@tulip-systems/create-app 0.11.1

package/dist/templates/spark/src/app/admin/projects/[id]/purchase-orders/page.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { Allowed } from "@tulip-systems/auth/permissions/client";
+import { DataTable } from "@tulip-systems/data-tables/client";
+import { use } from "react";
+import { PurchaseOrderPaginationTableProvider } from "@/app/admin/purchase-orders/_components/tables";
+import { PurchaseOrderTableToolbar } from "@/app/admin/purchase-orders/_components/toolbars";
+import { purchaseOrderColumns } from "@/app/admin/purchase-orders/_config/columns-data";
+import {
+  purchaseOrderArchiveCommand,
+  purchaseOrderDeleteCommand,
+  purchaseOrderRestoreCommand,
+  purchaseOrderStatusCommand,
+} from "@/app/admin/purchase-orders/_config/commands";
+
+export default function ProductDetailPage(
+  props: PageProps<"/admin/projects/[id]/purchase-orders">,
+) {
+  const params = use(props.params);
+  const projectId = params.id?.toString();
+
+  return (
+    <Allowed permission={{ purchaseOrder: ["view"] }}>
+      <PurchaseOrderPaginationTableProvider
+        columns={purchaseOrderColumns}
+        commands={[
+          purchaseOrderStatusCommand,
+          purchaseOrderArchiveCommand,
+          purchaseOrderRestoreCommand,
+          purchaseOrderDeleteCommand,
+        ]}
+        filterOptions={{ constraints: { projectId: [projectId] } }}
+      >
+        <PurchaseOrderTableToolbar />
+        <DataTable />
+      </PurchaseOrderPaginationTableProvider>
+    </Allowed>
+  );
+}

package/dist/templates/spark/src/app/admin/projects/[id]/runs/layout.tsx

@@ -0,0 +1,6 @@
+import { TableLayout } from "@tulip-systems/data-tables";
+import type { PropsWithChildren } from "react";
+
+export default function Layout(props: PropsWithChildren) {
+  return <TableLayout className="p-content">{props.children}</TableLayout>;
+}

package/dist/templates/spark/src/app/admin/projects/[id]/runs/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/projects/[id]/runs/page.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { Allowed } from "@tulip-systems/auth/permissions/client";
+import { DataTable } from "@tulip-systems/data-tables/client";
+import { use } from "react";
+import { RunPaginationTableProvider } from "@/app/admin/runs/_components/tables";
+import { RunTableToolbar } from "@/app/admin/runs/_components/toolbars";
+import { runTableColumns } from "@/app/admin/runs/_config/columns-data";
+import {
+  runArchiveCommand,
+  runDeleteCommand,
+  runRestoreCommand,
+  runSetInReviewCommand,
+  runUpdateStatusCommand,
+} from "@/app/admin/runs/_config/commands";
+
+export default function ProductDetailPage(props: PageProps<"/admin/projects/[id]/runs">) {
+  const params = use(props.params);
+  const projectId = params.id?.toString();
+
+  return (
+    <Allowed permission={{ run: ["view"] }}>
+      <RunPaginationTableProvider
+        columns={runTableColumns}
+        commands={[
+          runUpdateStatusCommand,
+          runSetInReviewCommand,
+          runArchiveCommand,
+          runRestoreCommand,
+          runDeleteCommand,
+        ]}
+        filterOptions={{ constraints: { projectId: [projectId] } }}
+      >
+        <RunTableToolbar filtersVisibility={{ projectId: false }} />
+        <DataTable />
+      </RunPaginationTableProvider>
+    </Allowed>
+  );
+}

package/dist/templates/spark/src/app/admin/projects/[id]/statistics/layout.tsx

@@ -0,0 +1,5 @@
+import type { PropsWithChildren } from "react";
+
+export default function Layout(props: PropsWithChildren) {
+  return <div className="p-content">{props.children}</div>;
+}

package/dist/templates/spark/src/app/admin/projects/[id]/statistics/loading.tsx

@@ -0,0 +1,20 @@
+import { Card, CardContent, CardHeader } from "@tulip-systems/ui/card";
+import { Skeleton } from "@tulip-systems/ui/skeleton";
+
+export default function Loading() {
+  return (
+    <div className="flex flex-col gap-5">
+      {Array.from({ length: 15 }).map((_, index) => (
+        <Card key={index}>
+          <CardHeader>
+            <Skeleton className="h-6 w-1/3" />
+          </CardHeader>
+
+          <CardContent>
+            <Skeleton className="h-20 w-full" />
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+  );
+}

package/dist/templates/spark/src/app/admin/projects/[id]/statistics/page.tsx

@@ -0,0 +1,263 @@
+"use client";
+
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { Allowed } from "@tulip-systems/auth/permissions/client";
+import { formatCurrency, formatDate, formatDuration } from "@tulip-systems/core";
+import { Card, CardHeader, CardTitle } from "@tulip-systems/ui/card";
+import { cn } from "@tulip-systems/ui/cn";
+import { Progress } from "@tulip-systems/ui/progress";
+import { differenceInCalendarDays } from "date-fns";
+import { EuroIcon, TimerIcon } from "lucide-react";
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import { use } from "react";
+import { generateClientHref } from "@/app/admin/clients/_lib/helpers";
+import { orpc } from "@/server/router/client";
+
+export default function ProjectDetailPage(props: PageProps<"/admin/projects/[id]/statistics">) {
+  const params = use(props.params);
+  const id = params.id?.toString();
+  if (!id) notFound();
+
+  const { data: project } = useSuspenseQuery(orpc.projects.getById.queryOptions({ input: { id } }));
+  if (!project) notFound();
+
+  const { clientId, budget, startDate, deadline, endDate, expectedCost } = project;
+
+  const { data: budgetStats } = useSuspenseQuery(
+    orpc.projects.getBudgetStats.queryOptions({ input: { projectId: id, clientId: clientId } }),
+  );
+
+  if (!budgetStats) return null;
+  const { client, totalRegistrationDuration, totalRegistrationCost, totalOrderCost, cost } =
+    budgetStats;
+
+  const budgetPercentage = budget != null ? Math.min(Math.round((cost / budget) * 100), 100) : 0;
+
+  const totalDays = deadline && startDate && differenceInCalendarDays(deadline, startDate);
+  const elapsedDays = startDate && differenceInCalendarDays(new Date(), startDate);
+
+  const daysPercentage =
+    elapsedDays == null || totalDays == null
+      ? 0
+      : Math.min(Math.round(((elapsedDays < 0 ? 0 : elapsedDays) / totalDays) * 100), 100);
+
+  return (
+    <Allowed permission={{ project: ["view.stats"] }}>
+      <div className="space-y-12">
+        <div>
+          <div className="grid grid-cols-1 gap-x-10 gap-y-5 lg:grid-cols-3">
+            <Card>
+              <CardHeader>
+                <div className="flex flex-row items-center justify-between space-y-0 pb-2">
+                  <CardTitle className="font-medium text-sm">
+                    {client?.clientType === "company" ? "Bedrijf" : "Particulier"}
+                  </CardTitle>
+                </div>
+                {client?.clientType && client.clientName && (
+                  <Link
+                    href={generateClientHref({
+                      id: clientId,
+                      type: client?.clientType,
+                    })}
+                    className="font-bold text-2xl hover:underline"
+                  >
+                    {client?.clientName}
+                  </Link>
+                )}
+              </CardHeader>
+            </Card>
+
+            <Card>
+              <CardHeader>
+                <div className="flex flex-row items-center justify-between space-y-0 pb-2">
+                  <CardTitle className="font-medium text-sm">Totale werkuren</CardTitle>
+                  <TimerIcon className="h-4 w-4 text-muted-foreground" />
+                </div>
+                <div className="font-bold text-2xl">
+                  {formatDuration(totalRegistrationDuration)}
+                </div>
+              </CardHeader>
+            </Card>
+          </div>
+        </div>
+
+        <div>
+          <h2 className="mb-4 font-bold text-xl">Budget</h2>
+
+          <div className="grid grid-cols-1 gap-x-10 gap-y-5 lg:grid-cols-3">
+            <Card>
+              <CardHeader>
+                <div className="flex flex-row items-center justify-between space-y-0 pb-2">
+                  <CardTitle className="font-medium text-sm">Kost bestellingen</CardTitle>
+                  <EuroIcon className="h-4 w-4 text-muted-foreground" />
+                </div>
+
+                <div className="font-bold text-2xl">{formatCurrency(totalOrderCost)}</div>
+              </CardHeader>
+            </Card>
+
+            <Card>
+              <CardHeader>
+                <div className="flex flex-row items-center justify-between space-y-0 pb-2">
+                  <CardTitle className="font-medium text-sm">Kost werkuren</CardTitle>
+                  <EuroIcon className="h-4 w-4 text-muted-foreground" />
+                </div>
+                <div className="font-bold text-2xl">{formatCurrency(totalRegistrationCost)}</div>
+              </CardHeader>
+            </Card>
+
+            <Card>
+              <CardHeader>
+                <div className="flex flex-row items-center justify-between space-y-0 pb-2">
+                  <CardTitle className="font-medium text-sm">Totale Kosten</CardTitle>
+                  <EuroIcon className="h-4 w-4 text-muted-foreground" />
+                </div>
+                <div className="font-bold text-2xl">{formatCurrency(cost)}</div>
+              </CardHeader>
+            </Card>
+
+            <Card>
+              <CardHeader>
+                <div className="flex flex-row items-center justify-between space-y-0 pb-2">
+                  <CardTitle className="font-medium text-sm">Totaal Budget</CardTitle>
+                  <EuroIcon className="h-4 w-4 text-muted-foreground" />
+                </div>
+                <div className="font-bold text-2xl">
+                  {budget != null ? formatCurrency(budget) : "Niet vermeld"}
+                </div>
+              </CardHeader>
+            </Card>
+
+            <Card>
+              <CardHeader>
+                <div className="flex flex-row items-center justify-between space-y-0 pb-2">
+                  <CardTitle className="font-medium text-sm">Bruto Marge</CardTitle>
+                  <EuroIcon className="h-4 w-4 text-muted-foreground" />
+                </div>
+                <div className="font-bold text-2xl">
+                  {budget != null ? formatCurrency(budget - cost) : "Budget niet vermeld"}
+                </div>
+              </CardHeader>
+            </Card>
+
+            <Card>
+              <CardHeader>
+                <div className="flex flex-row items-center justify-between space-y-0 pb-2">
+                  <CardTitle className="font-medium text-sm">Verwachtte Kosten</CardTitle>
+                  <EuroIcon className="h-4 w-4 text-muted-foreground" />
+                </div>
+                <div className="font-bold text-2xl">
+                  {expectedCost != null ? formatCurrency(expectedCost) : "Niet vermeld"}
+                </div>
+              </CardHeader>
+            </Card>
+
+            <Progress
+              value={budgetPercentage}
+              className={cn(
+                "col-span-full",
+                budgetPercentage && budgetPercentage >= 100 && "bg-red-600/20 [&>div]:bg-red-600",
+                budgetPercentage && budgetPercentage < 100 && "bg-red-500/20 [&>div]:bg-red-500",
+                budgetPercentage &&
+                  budgetPercentage < 75 &&
+                  "bg-orange-500/20 [&>div]:bg-orange-500",
+                budgetPercentage && budgetPercentage < 50 && "bg-primary/20 [&>div]:bg-primary",
+                budgetPercentage && budgetPercentage < 25 && "bg-green-500/20 [&>div]:bg-green-500",
+              )}
+            />
+          </div>
+        </div>
+
+        <div>
+          <h2 className="mb-4 font-bold text-xl">Planning</h2>
+          <div className="grid grid-cols-1 gap-x-10 gap-y-5 lg:grid-cols-3">
+            <Card>
+              <CardHeader>
+                <div className="flex flex-row items-center justify-between space-y-0 pb-2">
+                  <CardTitle className="font-medium text-sm">Startdatum</CardTitle>
+                  <TimerIcon className="h-4 w-4 text-muted-foreground" />
+                </div>
+                <div className="font-bold text-2xl">
+                  {startDate != null ? formatDate(startDate) : "Niet vermeld"}
+                </div>
+              </CardHeader>
+            </Card>
+
+            <Card>
+              <CardHeader>
+                <div className="flex flex-row items-center justify-between space-y-0 pb-2">
+                  <CardTitle className="font-medium text-sm">Deadline</CardTitle>
+                  <TimerIcon className="h-4 w-4 text-muted-foreground" />
+                </div>
+                <div className="font-bold text-2xl">
+                  {deadline != null ? formatDate(deadline) : "Niet vermeld"}
+                </div>
+              </CardHeader>
+            </Card>
+
+            <Card>
+              <CardHeader>
+                <div className="flex flex-row items-center justify-between space-y-0 pb-2">
+                  <CardTitle className="font-medium text-sm">Einddatum</CardTitle>
+                  <TimerIcon className="h-4 w-4 text-muted-foreground" />
+                </div>
+                <div className="font-bold text-2xl">
+                  {endDate != null ? formatDate(endDate) : "Niet vermeld"}
+                </div>
+              </CardHeader>
+            </Card>
+
+            <Card>
+              <CardHeader>
+                <div className="flex flex-row items-center justify-between space-y-0 pb-2">
+                  <CardTitle className="font-medium text-sm">Totale tijd</CardTitle>
+                  <TimerIcon className="h-4 w-4 text-muted-foreground" />
+                </div>
+                <div className="font-bold text-2xl">{totalDays ? totalDays : "Niet vermeld"}</div>
+              </CardHeader>
+            </Card>
+
+            <Card>
+              <CardHeader>
+                <div className="flex flex-row items-center justify-between space-y-0 pb-2">
+                  <CardTitle className="font-medium text-sm">Verstreken dagen</CardTitle>
+                  <TimerIcon className="h-4 w-4 text-muted-foreground" />
+                </div>
+                <div className="font-bold text-2xl">
+                  {elapsedDays && elapsedDays > 0
+                    ? elapsedDays
+                    : `Start op ${formatDate(startDate)}`}
+                </div>
+              </CardHeader>
+            </Card>
+
+            <Card>
+              <CardHeader>
+                <div className="flex flex-row items-center justify-between space-y-0 pb-2">
+                  <CardTitle className="font-medium text-sm">Dagen tot deadline</CardTitle>
+                  <TimerIcon className="h-4 w-4 text-muted-foreground" />
+                </div>
+                <div className="font-bold text-2xl">
+                  {deadline ? differenceInCalendarDays(deadline, new Date()) : "Niet vermeld"}
+                </div>
+              </CardHeader>
+            </Card>
+
+            <Progress
+              value={daysPercentage}
+              className={cn(
+                "col-span-full",
+                daysPercentage && daysPercentage >= 100 && "bg-red-600/20 [&>div]:bg-red-600",
+                daysPercentage && daysPercentage < 100 && "bg-red-500/20 [&>div]:bg-red-500",
+                daysPercentage && daysPercentage < 75 && "bg-orange-500/20 [&>div]:bg-orange-500",
+                daysPercentage && daysPercentage < 50 && "bg-primary/20 [&>div]:bg-primary",
+                daysPercentage && daysPercentage < 25 && "bg-green-500/20 [&>div]:bg-green-500",
+              )}
+            />
+          </div>
+        </div>
+      </div>
+    </Allowed>
+  );
+}

package/dist/templates/spark/src/app/admin/projects/[id]/subprojects/layout.tsx

@@ -0,0 +1,6 @@
+import { TableLayout } from "@tulip-systems/data-tables";
+import type { PropsWithChildren } from "react";
+
+export default function Layout(props: PropsWithChildren) {
+  return <TableLayout className="p-content">{props.children}</TableLayout>;
+}

package/dist/templates/spark/src/app/admin/projects/[id]/subprojects/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/projects/[id]/subprojects/page.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { Allowed } from "@tulip-systems/auth/permissions/client";
+import { ResponsiveCommandMenu } from "@tulip-systems/commands/client";
+import { DataTable, SortableRows } from "@tulip-systems/data-tables/client";
+import { use } from "react";
+import { SubprojectInfiniteTableProvider } from "@/app/admin/subprojects/_components/tables";
+import { SubprojectTableToolbar } from "@/app/admin/subprojects/_components/toolbars";
+import { subprojectInlineTableColumns } from "@/app/admin/subprojects/_config/columns-inline";
+import {
+  subprojectCreateCommand,
+  subprojectDeleteCommand,
+} from "@/app/admin/subprojects/_config/commands";
+import { orpc } from "@/server/router/client";
+
+export default function ProductDetailPage(props: PageProps<"/admin/projects/[id]/subprojects">) {
+  const params = use(props.params);
+  const projectId = params.id?.toString();
+
+  return (
+    <Allowed permission={{ subproject: ["view"] }}>
+      <SubprojectInfiniteTableProvider
+        columns={subprojectInlineTableColumns}
+        commands={[subprojectDeleteCommand]}
+        filterOptions={{ constraints: { projectId: [projectId] } }}
+      >
+        <SubprojectTableToolbar>
+          <ResponsiveCommandMenu data={{ projectId }} commands={[subprojectCreateCommand]} />
+        </SubprojectTableToolbar>
+
+        <SortableRows
+          mutationOptions={{
+            mutationFn: (input) => orpc.subprojects.move.call({ ...input, projectId }),
+          }}
+        >
+          <DataTable />
+        </SortableRows>
+      </SubprojectInfiniteTableProvider>
+    </Allowed>
+  );
+}

package/dist/templates/spark/src/app/admin/projects/[id]/tasks/(default)/page.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import { Allowed } from "@tulip-systems/auth/permissions/client";
+import { ResponsiveCommandMenu } from "@tulip-systems/commands/client";
+import { DataTable, SortableRows, TableHotkeys } from "@tulip-systems/data-tables/client";
+import { notFound } from "next/navigation";
+import { use } from "react";
+import { TaskInfiniteTableProvider } from "@/app/admin/tasks/_components/tables";
+import { TaskTableToolbar } from "@/app/admin/tasks/_components/toolbars";
+import { taskInlineTableColumns } from "@/app/admin/tasks/_config/columns-inline";
+import {
+  taskCopyCommand,
+  taskCreateCommand,
+  taskDeleteCommand,
+  taskImportQuotationItemsCommand,
+  taskImportTemplateTasksCommand,
+  taskUpdateStatusCommand,
+} from "@/app/admin/tasks/_config/commands";
+import { inlineDataTableDefaultHotkeys } from "@/lib/config/hotkeys";
+import { orpc } from "@/server/router/client";
+
+export default function Page(props: PageProps<"/admin/projects/[id]/tasks">) {
+  const params = use(props.params);
+  const projectId = params.id?.toString();
+  if (!projectId) return notFound();
+
+  return (
+    <Allowed permission={{ task: ["view"] }}>
+      <TaskInfiniteTableProvider
+        columns={taskInlineTableColumns}
+        commands={[taskUpdateStatusCommand, taskCopyCommand, taskDeleteCommand]}
+        filterOptions={{ constraints: { projectId: [projectId], subprojectId: ["none"] } }}
+        columnVisibility={{ projectTitle: false, subprojectId: false }}
+        meta={{ projectId }}
+      >
+        <TaskTableToolbar filtersVisibility={{ subprojectId: false }}>
+          <ResponsiveCommandMenu
+            data={{ projectId }}
+            commands={[
+              taskImportQuotationItemsCommand,
+              taskImportTemplateTasksCommand,
+              taskCreateCommand,
+            ]}
+          />
+        </TaskTableToolbar>
+
+        <TableHotkeys hotkeys={inlineDataTableDefaultHotkeys}>
+          <SortableRows
+            mutationOptions={{
+              mutationFn: (input) =>
+                orpc.tasks.move.call({ ...input, projectId, subprojectId: null }),
+            }}
+          >
+            <DataTable />
+          </SortableRows>
+        </TableHotkeys>
+      </TaskInfiniteTableProvider>
+    </Allowed>
+  );
+}

package/dist/templates/spark/src/app/admin/projects/[id]/tasks/[subprojectId]/page.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import { Allowed } from "@tulip-systems/auth/permissions/client";
+import { ResponsiveCommandMenu } from "@tulip-systems/commands/client";
+import { DataTable, SortableRows } from "@tulip-systems/data-tables/client";
+import { use } from "react";
+import { TaskInfiniteTableProvider } from "@/app/admin/tasks/_components/tables";
+import { TaskTableToolbar } from "@/app/admin/tasks/_components/toolbars";
+import { taskInlineTableColumns } from "@/app/admin/tasks/_config/columns-inline";
+import {
+  taskCopyCommand,
+  taskCreateCommand,
+  taskDeleteCommand,
+  taskImportQuotationItemsCommand,
+  taskImportTemplateTasksCommand,
+  taskUpdateStatusCommand,
+} from "@/app/admin/tasks/_config/commands";
+import { orpc } from "@/server/router/client";
+
+export default function ProductDetailPage(
+  props: PageProps<"/admin/projects/[id]/tasks/[subprojectId]">,
+) {
+  const params = use(props.params);
+
+  const projectId = params.id?.toString();
+  const subprojectId = params.subprojectId?.toString();
+
+  return (
+    <Allowed permission={{ task: ["view"] }}>
+      <TaskInfiniteTableProvider
+        columns={taskInlineTableColumns}
+        commands={[taskUpdateStatusCommand, taskCopyCommand, taskDeleteCommand]}
+        filterOptions={{
+          constraints: {
+            projectId: projectId ? [projectId] : undefined,
+            subprojectId: subprojectId ? [subprojectId] : undefined,
+          },
+        }}
+        columnVisibility={{ projectTitle: false, subprojectId: false }}
+        meta={{ projectId }}
+      >
+        <TaskTableToolbar filtersVisibility={{ subprojectId: false }}>
+          <ResponsiveCommandMenu
+            data={{ projectId, subprojectId }}
+            commands={[
+              taskImportQuotationItemsCommand,
+              taskImportTemplateTasksCommand,
+              taskCreateCommand,
+            ]}
+          />
+        </TaskTableToolbar>
+
+        <SortableRows
+          mutationOptions={{
+            mutationFn: (input) => orpc.tasks.move.call({ ...input, projectId, subprojectId }),
+          }}
+        >
+          <DataTable />
+        </SortableRows>
+      </TaskInfiniteTableProvider>
+    </Allowed>
+  );
+}

package/dist/templates/spark/src/app/admin/projects/[id]/tasks/layout.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { TableLayout } from "@tulip-systems/data-tables";
+import { Suspense, use } from "react";
+import {
+  TaskSubprojectTabGrid,
+  TaskSubprojectTabGridLoading,
+} from "@/app/admin/tasks/_components/subproject-selector";
+
+export default function ListLayout(props: LayoutProps<"/admin/projects/[id]/tasks">) {
+  const params = use(props.params);
+  const projectId = params.id?.toString();
+
+  return (
+    <div className="space-y-10 p-content">
+      <Suspense fallback={<TaskSubprojectTabGridLoading />}>
+        <TaskSubprojectTabGrid projectId={projectId} />
+      </Suspense>
+
+      <TableLayout>{props.children}</TableLayout>
+    </div>
+  );
+}

package/dist/templates/spark/src/app/admin/projects/[id]/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/projects/[id]/technical-sheets/layout.tsx

@@ -0,0 +1,6 @@
+import { TableLayout } from "@tulip-systems/data-tables";
+import type { PropsWithChildren } from "react";
+
+export default function Layout(props: PropsWithChildren) {
+  return <TableLayout className="p-content">{props.children}</TableLayout>;
+}

package/dist/templates/spark/src/app/admin/projects/[id]/technical-sheets/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/projects/[id]/technical-sheets/page.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import { Allowed } from "@tulip-systems/auth/permissions/client";
+import {
+  ResponsiveCommandMenu,
+  ResponsiveCommandMenuLoading,
+} from "@tulip-systems/commands/client";
+import { DataTable } from "@tulip-systems/data-tables/client";
+import { Suspense, use } from "react";
+import { TechnicalSheetInfiniteTableProvider } from "@/app/admin/technical-sheets/_components/tables";
+import { TechnicalSheetTableToolbar } from "@/app/admin/technical-sheets/_components/toolbars";
+import { technicalSheetTableColumns } from "@/app/admin/technical-sheets/_config/columns-data";
+import {
+  technicalSheetDeleteCommand,
+  technicalSheetDownloadCommand,
+  technicalSheetGenerateCommand,
+  technicalSheetImportQuotationItemsCommand,
+  technicalSheetUpdateStatusCommand,
+} from "@/app/admin/technical-sheets/_config/commands";
+
+export default function Page(props: PageProps<"/admin/projects/[id]/technical-sheets">) {
+  const params = use(props.params);
+  const projectId = params.id?.toString();
+
+  return (
+    <Allowed permission={{ technicalSheet: ["view"] }}>
+      <TechnicalSheetInfiniteTableProvider
+        columns={technicalSheetTableColumns}
+        commands={[
+          technicalSheetGenerateCommand,
+          technicalSheetUpdateStatusCommand,
+          technicalSheetDownloadCommand,
+          technicalSheetDeleteCommand,
+        ]}
+        filterOptions={{ constraints: { projectId: [projectId] } }}
+        columnVisibility={{ projectTitle: false }}
+      >
+        <TechnicalSheetTableToolbar>
+          <Suspense fallback={<ResponsiveCommandMenuLoading />}>
+            <ResponsiveCommandMenu
+              data={{ projectId }}
+              commands={[technicalSheetImportQuotationItemsCommand]}
+            />
+          </Suspense>
+        </TechnicalSheetTableToolbar>
+
+        <DataTable />
+      </TechnicalSheetInfiniteTableProvider>
+    </Allowed>
+  );
+}