@tulip-systems/create-app 0.12.3 → 0.13.0

package/dist/templates/code/src/app/admin/quotations/_components/create-command.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import { standardSchemaResolver } from "@hookform/resolvers/standard-schema";
+import type { DefaultError, MutationOptions } from "@tanstack/react-query";
+import {
+  CommandFormDialog,
+  CommandFormDialogCancel,
+  CommandFormDialogContent,
+  CommandFormDialogFields,
+  CommandFormDialogFooter,
+  CommandFormDialogHeader,
+  CommandFormDialogSubmit,
+  CommandFormDialogTitle,
+  CommandFormDialogTrigger,
+} from "@tulip-systems/commands/client";
+import { Input } from "@tulip-systems/ui/input";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@tulip-systems/ui/react-hook-form";
+import type React from "react";
+import { useForm } from "react-hook-form";
+import {
+  type CreateQuotationInput,
+  type CreateQuotationSchema,
+  createQuotationSchema,
+} from "../_lib/validators";
+
+export type CreateQuotationCommandProps<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = undefined,
+  TOnMutateResult = unknown,
+> = {
+  variables: (values: CreateQuotationSchema) => TVariables;
+  mutation: MutationOptions<TData, TError, TVariables, TOnMutateResult>;
+  defaultValues?: Partial<CreateQuotationInput>;
+  children?: React.ReactNode;
+};
+
+export function CreateQuotationCommand<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = undefined,
+  TOnMutateResult = unknown,
+>({
+  variables,
+  mutation,
+  defaultValues,
+  children,
+}: CreateQuotationCommandProps<TData, TError, TVariables, TOnMutateResult>) {
+  const form = useForm<CreateQuotationInput>({
+    resolver: standardSchemaResolver(createQuotationSchema),
+    defaultValues,
+  });
+
+  return (
+    <CommandFormDialog>
+      {children}
+
+      <Form {...form}>
+        <CommandFormDialogContent variables={variables} mutation={mutation}>
+          <CommandFormDialogHeader>
+            <CommandFormDialogTitle>Offerte Toevoegen</CommandFormDialogTitle>
+          </CommandFormDialogHeader>
+
+          <CommandFormDialogFields>
+            <FormField
+              control={form.control}
+              name="title"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Titel</FormLabel>
+                  <FormControl>
+                    <Input {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </CommandFormDialogFields>
+
+          <CommandFormDialogFooter>
+            <CommandFormDialogCancel>Annuleren</CommandFormDialogCancel>
+            <CommandFormDialogSubmit>Toevoegen</CommandFormDialogSubmit>
+          </CommandFormDialogFooter>
+        </CommandFormDialogContent>
+      </Form>
+    </CommandFormDialog>
+  );
+}
+
+export const CreateQuotationCommandTrigger = CommandFormDialogTrigger;

package/dist/templates/code/src/app/admin/quotations/_components/tables.tsx

@@ -0,0 +1,68 @@
+"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 } from "react";
+import { orpc } from "@/server/router/client";
+import type { QuotationColumn } from "../_config/columns-data";
+import { quotationFilters } from "../_config/filters";
+import { quotationTableSorts } from "../_config/sorting";
+
+type QuotationTableProviderProps = PropsWithChildren<{
+  columns: TableColumnDef<QuotationColumn>[];
+  commands?: CommandFor<QuotationColumn[]>[];
+  filterOptions?: UseFiltersOptions<typeof quotationFilters>;
+  columnVisibility?: VisibilityState;
+}>;
+
+export function QuotationPaginationTableProvider({
+  columns,
+  commands,
+  filterOptions,
+  columnVisibility,
+  children,
+}: QuotationTableProviderProps) {
+  const pagination = usePagination(offsetPagination);
+  const filtering = useFilters(quotationFilters, filterOptions);
+  const sorting = useSorting(quotationTableSorts);
+
+  const input = useDeferredValue({
+    pagination: pagination.input,
+    filters: filtering.input,
+    sorts: sorting.input,
+  });
+
+  const response = useSuspenseQuery(orpc.quotations.list.queryOptions({ input }));
+
+  const queryData = response.data.data as QuotationColumn[];
+  const { total } = response.data.pagination;
+
+  const strategy = usePaginationStrategy({ pagination, total });
+
+  const config = createTableConfig<QuotationColumn>({
+    queryData,
+    getRowId: (row) => row.id,
+    columns,
+    strategy,
+    filtering,
+    sorting,
+    commands,
+    columnVisibility,
+  });
+
+  return <TableConfigProvider config={config}>{children}</TableConfigProvider>;
+}

package/dist/templates/code/src/app/admin/quotations/_components/toolbars.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import { TableToolbar, TableToolbarList } from "@tulip-systems/data-tables";
+import { resolveFilterDescriptors } from "@tulip-systems/query";
+import { FilterSearch } from "@tulip-systems/query/client";
+import { quotationFilters } from "../_config/filters";
+
+const quotationFilterDescriptors = resolveFilterDescriptors(quotationFilters);
+
+export function QuotationTableToolbar() {
+  return (
+    <TableToolbar>
+      <TableToolbarList>
+        <FilterSearch placeholder="Zoeken..." filter={quotationFilterDescriptors.search} />
+      </TableToolbarList>
+    </TableToolbar>
+  );
+}

package/dist/templates/code/src/app/admin/quotations/_config/columns-data.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { Link } from "@tulip-systems/core/navigation";
+import { TableCell, type TableColumnDef, TableColumnHeader } from "@tulip-systems/data-tables";
+import { createTableSelectCell } from "@tulip-systems/data-tables/client";
+import { format } from "date-fns";
+import type { Quotation } from "../_lib/validators";
+
+export type QuotationColumn = Quotation;
+
+export const quotationColumns: TableColumnDef<QuotationColumn>[] = [
+  createTableSelectCell(),
+  {
+    id: "title",
+    accessorKey: "title",
+    header: ({ column }) => <TableColumnHeader column={column} title="Titel" />,
+    cell: ({ row }) => (
+      <TableCell>
+        <Link href={`/admin/quotations/${row.original.id}`} className="truncate hover:underline">
+          {row.getValue("title")}
+        </Link>
+      </TableCell>
+    ),
+  },
+  {
+    id: "createdAt",
+    accessorKey: "createdAt",
+    header: ({ column }) => <TableColumnHeader column={column} title="Aangemaakt" />,
+    cell: ({ row }) => (
+      <TableCell>
+        <span className="truncate">{format(row.original.createdAt, "dd/MM/yyyy")}</span>
+      </TableCell>
+    ),
+  },
+];

package/dist/templates/code/src/app/admin/quotations/_config/commands.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import { commandBuilder, ensureArray } from "@tulip-systems/commands";
+import {
+  CommandEmpty,
+  CommandLabel,
+  type CommandMutationMeta,
+  DeleteCommand,
+} from "@tulip-systems/commands/client";
+import { Link } from "@tulip-systems/core/navigation";
+import { toast } from "@tulip-systems/ui/sonner";
+import { EyeIcon } from "lucide-react";
+import { Icons } from "@/components/icons";
+import { orpc } from "@/server/router/client";
+import {
+  CreateQuotationCommand,
+  CreateQuotationCommandTrigger,
+} from "../_components/create-command";
+import type { CreateQuotationSchema, Quotation } from "../_lib/validators";
+
+type QuotationCommandItem = Pick<Quotation, "id">;
+
+export const quotationCreateCommand = commandBuilder
+  .$type<Partial<CreateQuotationSchema>>()
+  .permission({ quotation: ["create"] })
+  .render(() => (
+    <CreateQuotationCommand
+      variables={(values) => values}
+      mutation={orpc.quotations.create.mutationOptions({
+        onSuccess: (data, _vars, _result, context) => {
+          toast.success("Offerte succesvol toegevoegd");
+          const meta = context.meta as CommandMutationMeta;
+          if (data.id) meta.router.push(`/admin/quotations/${data.id}`);
+        },
+      })}
+    >
+      <CreateQuotationCommandTrigger label="Toevoegen" hotkey="mod+i">
+        <Icons.add className="size-4" />
+        <CommandLabel />
+      </CreateQuotationCommandTrigger>
+    </CreateQuotationCommand>
+  ));
+
+export const quotationPreviewCommand = commandBuilder
+  .$type<QuotationCommandItem>()
+  .permission({ quotation: ["view"] })
+  .render(({ data }) => (
+    <Link href={`/admin/quotations/${data.id}/preview`} target="_blank" rel="noopener noreferrer">
+      <CommandEmpty label="Preview">
+        <EyeIcon className="size-4" />
+        <CommandLabel />
+      </CommandEmpty>
+    </Link>
+  ));
+
+export const quotationDeleteCommand = commandBuilder
+  .$type<QuotationCommandItem | QuotationCommandItem[]>()
+  .transform(ensureArray)
+  .permission({ quotation: ["delete"] })
+  .render(({ data }) => (
+    <DeleteCommand
+      variables={{ ids: data.map((item) => item.id) }}
+      mutation={orpc.quotations.delete.mutationOptions({
+        onSuccess: (_data, _vars, _result, context) => {
+          toast.success("Offerte succesvol verwijderd");
+          const meta = context.meta as CommandMutationMeta;
+          meta.router.push("/admin/quotations");
+        },
+      })}
+    />
+  ));

package/dist/templates/code/src/app/admin/quotations/_config/filters.ts

@@ -0,0 +1,22 @@
+import {
+  createFilteringParser,
+  defineFilters,
+  resolveFiltersSchema,
+  stringFilter,
+} from "@tulip-systems/query";
+import { createDatabaseFiltersCompiler } from "@tulip-systems/query/drizzle";
+import { createLocalFiltersCompiler } from "@tulip-systems/query/tanstack-db";
+import type z from "zod";
+
+export const quotationFilters = defineFilters({
+  search: stringFilter.build((value) =>
+    value ? { field: "title", operator: "ilike", value: `%${value}%` } : null,
+  ),
+});
+
+export const quotationFiltersSchema = resolveFiltersSchema(quotationFilters);
+export type QuotationFilters = z.input<typeof quotationFiltersSchema>;
+
+export const quotationFiltersParser = createFilteringParser(quotationFilters);
+export const quotationDatabaseFiltersCompiler = createDatabaseFiltersCompiler(quotationFilters);
+export const quotationLocalFiltersCompiler = createLocalFiltersCompiler(quotationFilters);

package/dist/templates/code/src/app/admin/quotations/_config/sorting.ts

@@ -0,0 +1,23 @@
+import {
+  createSortingParser,
+  defineSorting,
+  resolveSortingSchema,
+  sortOption,
+} from "@tulip-systems/query";
+import { createDatabaseSortingCompiler } from "@tulip-systems/query/drizzle";
+import { createLocalSortingCompiler } from "@tulip-systems/query/tanstack-db";
+
+export const quotationTableSorts = defineSorting({
+  title: sortOption((direction) => ({ field: "title", direction })),
+  createdAt: sortOption((direction) => ({ field: "createdAt", direction })),
+});
+
+export const quotationTableSortsSchema = resolveSortingSchema(quotationTableSorts);
+
+export const quotationTableSortsParser = createSortingParser(quotationTableSorts, {
+  fallback: [{ key: "createdAt", direction: "desc" }],
+});
+
+export const quotationTableLocalSortsCompiler = createLocalSortingCompiler(quotationTableSorts);
+export const quotationTableDatabaseSortsCompiler =
+  createDatabaseSortingCompiler(quotationTableSorts);

package/dist/templates/code/src/app/admin/quotations/_lib/router.ts

@@ -0,0 +1,260 @@
+import "server-cli-only";
+
+import { ORPCError } from "@orpc/server";
+import { moveBlock, reindexBlocks } from "@tulip-systems/blocks";
+import {
+  bulkActionSchema,
+  offsetPaginationResponse,
+  offsetPaginationSchema,
+} from "@tulip-systems/query";
+import { asc, desc, eq, inArray } from "drizzle-orm";
+import { z } from "zod";
+import { getTableData } from "@/app/lib/utils/table-data.server";
+import { permissionMiddleware } from "@/server/router/middleware";
+import { protectedProcedure } from "@/server/router/procedures";
+import {
+  type QuotationBlock,
+  type QuotationBlockInput,
+  quotationBlocks,
+} from "../_blocks/registry";
+import {
+  quotationDatabaseFiltersCompiler,
+  quotationFiltersParser,
+  quotationFiltersSchema,
+} from "../_config/filters";
+import {
+  quotationTableDatabaseSortsCompiler,
+  quotationTableSortsParser,
+  quotationTableSortsSchema,
+} from "../_config/sorting";
+import { quotationBlocks as quotationBlocksTable, quotations } from "./schema";
+import { createQuotationSchema, updateQuotationSchema } from "./validators";
+
+/**
+ * Router for handling operations related to quotations, including listing, retrieving by ID, creating, updating, and deleting quotations.
+ */
+export const quotationsRouter = {
+  list: protectedProcedure
+    .use(permissionMiddleware({ quotation: ["view"] }))
+    .input(
+      z.object({
+        pagination: offsetPaginationSchema,
+        filters: quotationFiltersSchema,
+        sorts: quotationTableSortsSchema,
+      }),
+    )
+    .handler(async ({ context, input }) => {
+      const parsedSorts = quotationTableSortsParser.parse(input.sorts);
+      const orderBy = quotationTableDatabaseSortsCompiler(quotations).parse(parsedSorts);
+
+      const parsedFilters = quotationFiltersParser.parse(input.filters);
+      const where = quotationDatabaseFiltersCompiler(quotations).parse(parsedFilters);
+
+      const { data, total } = await getTableData(context, quotations, {
+        pagination: input.pagination,
+        where,
+        orderBy,
+      });
+
+      return offsetPaginationResponse({ data, pagination: input.pagination, total });
+    }),
+  getById: protectedProcedure
+    .use(permissionMiddleware({ quotation: ["view"] }))
+    .input(z.object({ id: z.string() }))
+    .handler(async ({ context, input }) => {
+      const data = await context.db.query.quotations.findFirst({
+        where: eq(quotations.id, input.id),
+      });
+
+      return data ?? null;
+    }),
+  create: protectedProcedure
+    .use(permissionMiddleware({ quotation: ["create"] }))
+    .input(createQuotationSchema)
+    .handler(async ({ context, input }) => {
+      return context.db.transaction(async (tx) => {
+        const [quotation] = await tx.insert(quotations).values(input).returning();
+
+        if (!quotation) {
+          throw new ORPCError("INTERNAL_SERVER_ERROR", {
+            message: "Offerte kon niet worden aangemaakt",
+          });
+        }
+
+        return quotation;
+      });
+    }),
+  update: protectedProcedure
+    .use(permissionMiddleware({ quotation: ["update"] }))
+    .input(z.object({ id: z.string(), data: updateQuotationSchema.partial() }))
+    .handler(async ({ context, input }) => {
+      const [result] = await context.db
+        .update(quotations)
+        .set(input.data)
+        .where(eq(quotations.id, input.id))
+        .returning();
+
+      if (!result) {
+        throw new ORPCError("NOT_FOUND", {
+          message: "Offerte kon niet worden gewijzigd",
+        });
+      }
+
+      return result;
+    }),
+
+  delete: protectedProcedure
+    .use(permissionMiddleware({ quotation: ["delete"] }))
+    .input(bulkActionSchema)
+    .handler(async ({ context, input }) => {
+      await context.db.delete(quotations).where(inArray(quotations.id, input.ids));
+    }),
+};
+
+/**
+ * Quotation blocks router that handles operations related to quotation blocks, including listing, creating, updating, and moving blocks.
+ */
+export const quotationBlocksRouter = {
+  list: protectedProcedure
+    .use(permissionMiddleware({ quotation: ["view"] }))
+    .input(z.object({ quotationId: z.string() }))
+    .handler(async ({ context, input }) => {
+      const blocks = await context.db.query.quotationBlocks.findMany({
+        where: eq(quotationBlocksTable.quotationId, input.quotationId),
+        orderBy: asc(quotationBlocksTable.index),
+      });
+
+      return blocks;
+    }),
+  create: protectedProcedure
+    .use(permissionMiddleware({ quotation: ["update"] }))
+    .input(z.object({ quotationId: z.string(), block: quotationBlocks.createSchema }))
+    .handler(async ({ context, input }) => {
+      const block = input.block as QuotationBlockInput;
+      const lastBlock = await context.db
+        .select({ index: quotationBlocksTable.index })
+        .from(quotationBlocksTable)
+        .where(eq(quotationBlocksTable.quotationId, input.quotationId))
+        .orderBy(desc(quotationBlocksTable.index))
+        .limit(1);
+
+      const [created] = await context.db
+        .insert(quotationBlocksTable)
+        .values({
+          quotationId: input.quotationId,
+          slug: block.slug,
+          data: block.data,
+          index: (lastBlock[0]?.index ?? -1) + 1,
+        })
+        .returning();
+
+      if (!created) {
+        throw new ORPCError("INTERNAL_SERVER_ERROR", {
+          message: "Blok kon niet worden aangemaakt",
+        });
+      }
+
+      return quotationBlocks.selectSchema.parse(created) as QuotationBlock;
+    }),
+  update: protectedProcedure
+    .use(permissionMiddleware({ quotation: ["update"] }))
+    .input(z.object({ id: z.string(), data: z.record(z.string(), z.unknown()) }))
+    .handler(async ({ context, input }) => {
+      const existing = await context.db.query.quotationBlocks.findFirst({
+        where: eq(quotationBlocksTable.id, input.id),
+      });
+
+      if (!existing) {
+        throw new ORPCError("NOT_FOUND", {
+          message: "Blok kon niet worden gevonden",
+        });
+      }
+
+      const patchedData = quotationBlocks.patchData({ block: existing, patch: input.data });
+
+      if (!patchedData.success) {
+        throw new ORPCError("BAD_REQUEST", {
+          message: "Onbekend bloktype",
+        });
+      }
+
+      const [updated] = await context.db
+        .update(quotationBlocksTable)
+        .set({ data: patchedData.data })
+        .where(eq(quotationBlocksTable.id, input.id))
+        .returning();
+
+      if (!updated) {
+        throw new ORPCError("INTERNAL_SERVER_ERROR", {
+          message: "Blok kon niet worden gewijzigd",
+        });
+      }
+
+      return quotationBlocks.selectSchema.parse(updated) as QuotationBlock;
+    }),
+  delete: protectedProcedure
+    .use(permissionMiddleware({ quotation: ["update"] }))
+    .input(z.object({ id: z.string() }))
+    .handler(async ({ context, input }) => {
+      const existing = await context.db.query.quotationBlocks.findFirst({
+        where: eq(quotationBlocksTable.id, input.id),
+      });
+
+      if (!existing) {
+        throw new ORPCError("NOT_FOUND", {
+          message: "Blok kon niet worden gevonden",
+        });
+      }
+
+      await context.db.transaction(async (tx) => {
+        await tx.delete(quotationBlocksTable).where(eq(quotationBlocksTable.id, input.id));
+
+        const blocks = await tx.query.quotationBlocks.findMany({
+          where: eq(quotationBlocksTable.quotationId, existing.quotationId),
+          orderBy: asc(quotationBlocksTable.index),
+        });
+        const reindexedBlocks = reindexBlocks(blocks);
+
+        await Promise.all(
+          reindexedBlocks.map((block) =>
+            tx
+              .update(quotationBlocksTable)
+              .set({ index: block.index })
+              .where(eq(quotationBlocksTable.id, block.id)),
+          ),
+        );
+      });
+
+      return { success: true };
+    }),
+  move: protectedProcedure
+    .use(permissionMiddleware({ quotation: ["update"] }))
+    .input(z.object({ quotationId: z.string(), id: z.string(), toIndex: z.number().int().min(0) }))
+    .handler(async ({ context, input }) => {
+      const blocks = await context.db.query.quotationBlocks.findMany({
+        where: eq(quotationBlocksTable.quotationId, input.quotationId),
+        orderBy: asc(quotationBlocksTable.index),
+      });
+
+      const result = moveBlock(blocks, { id: input.id, toIndex: input.toIndex });
+
+      if (!result) {
+        throw new ORPCError("NOT_FOUND", {
+          message: "Blok kon niet worden gevonden",
+        });
+      }
+
+      await context.db.transaction(async (tx) => {
+        await Promise.all(
+          result.blocks.map((block) =>
+            tx
+              .update(quotationBlocksTable)
+              .set({ index: block.index })
+              .where(eq(quotationBlocksTable.id, block.id)),
+          ),
+        );
+      });
+
+      return z.array(quotationBlocks.selectSchema).parse(result.blocks) as QuotationBlock[];
+    }),
+};

package/dist/templates/code/src/app/admin/quotations/_lib/schema.ts

@@ -0,0 +1,42 @@
+import { relations } from "drizzle-orm";
+import { index, pgTable } from "drizzle-orm/pg-core";
+import { baseColumns } from "@/server/db/helpers";
+
+export const quotations = pgTable("quotations", (t) => ({
+  ...baseColumns,
+  title: t.varchar().notNull(),
+}));
+
+export const quotationsRelations = relations(quotations, ({ many }) => ({
+  blocks: many(quotationBlocks),
+}));
+
+/**
+ *
+ *
+ * Quotations Blocks
+ */
+export const quotationBlocks = pgTable(
+  "quotation_blocks",
+  (t) => ({
+    ...baseColumns,
+    slug: t.varchar().notNull(),
+    data: t.jsonb().notNull(),
+    index: t.doublePrecision().notNull(),
+    quotationId: t
+      .uuid()
+      .notNull()
+      .references(() => quotations.id, { onDelete: "cascade" }),
+  }),
+  (table) => [
+    index("quotation_blocks_quotation_order_idx").on(table.quotationId, table.index),
+    index("quotation_blocks_quotation_slug_idx").on(table.quotationId, table.slug),
+  ],
+);
+
+export const quotationBlocksRelations = relations(quotationBlocks, ({ one }) => ({
+  quotation: one(quotations, {
+    fields: [quotationBlocks.quotationId],
+    references: [quotations.id],
+  }),
+}));

package/dist/templates/code/src/app/admin/quotations/_lib/validators.ts

@@ -0,0 +1,20 @@
+import { createInsertSchema, createSelectSchema } from "drizzle-zod";
+import { z } from "zod";
+import { quotations } from "./schema";
+
+export const quotationSchema = createSelectSchema(quotations);
+export type Quotation = z.infer<typeof quotationSchema>;
+
+export const createQuotationSchema = createInsertSchema(quotations, {
+  title: z.string().min(1, "Titel is verplicht"),
+}).omit({ id: true, createdAt: true, updatedAt: true });
+
+export const updateQuotationSchema = createInsertSchema(quotations, {
+  title: z.string().min(1, "Titel is verplicht"),
+}).omit({ id: true, createdAt: true, updatedAt: true });
+
+export type CreateQuotationInput = z.input<typeof createQuotationSchema>;
+export type CreateQuotationSchema = z.infer<typeof createQuotationSchema>;
+
+export type UpdateQuotationInput = z.input<typeof updateQuotationSchema>;
+export type UpdateQuotationSchema = z.infer<typeof updateQuotationSchema>;

package/dist/templates/code/src/app/admin/settings/history/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/code/src/app/admin/settings/history/loading.tsx

@@ -0,0 +1,5 @@
+import { TableSkeleton } from "@tulip-systems/data-tables";
+
+export default function Loading() {
+  return <TableSkeleton />;
+}