@tulip-systems/create-app 0.11.1

package/dist/templates/spark/src/app/admin/subprojects/_lib/router.ts

@@ -0,0 +1,139 @@
+import "server-cli-only";
+
+import { ORPCError } from "@orpc/server";
+import { arrayMove } from "@tulip-systems/core";
+import {
+  bulkActionSchema,
+  offsetPaginationResponse,
+  offsetPaginationSchema,
+} from "@tulip-systems/query";
+import { asc, desc, eq, inArray } from "drizzle-orm";
+import z from "zod";
+import { getTableData } from "@/lib/helpers/table-data.server";
+import { permissionMiddleware } from "@/server/router/middleware";
+import { protectedProcedure } from "@/server/router/procedures";
+import type { SubprojectTableData } from "../_components/tables";
+import {
+  subprojectDatabaseFiltersCompiler,
+  subprojectFiltersInputSchema,
+  subprojectFiltersParser,
+} from "../_config/filters";
+import {
+  subprojectTableDatabaseSortsCompiler,
+  subprojectTableSortsParser,
+  subprojectTableSortsSchema,
+} from "../_config/sorting";
+import { subprojects } from "./schema";
+import { createSubprojectSchema, updateSubprojectSchema } from "./validators";
+
+export const subprojectsRouter = {
+  list: protectedProcedure
+    .use(permissionMiddleware({ subproject: ["view"] }))
+    .input(
+      z.object({
+        pagination: offsetPaginationSchema,
+        filters: subprojectFiltersInputSchema,
+        sorts: subprojectTableSortsSchema,
+      }),
+    )
+    .handler(async ({ context, input }) => {
+      const parsedSorts = subprojectTableSortsParser.parse(input.sorts);
+      const orderBy = subprojectTableDatabaseSortsCompiler(subprojects).parse(parsedSorts);
+
+      const parsedFilters = subprojectFiltersParser.parse(input.filters);
+      const where = subprojectDatabaseFiltersCompiler(subprojects).parse(parsedFilters);
+
+      const { data, total } = await getTableData(context, subprojects, {
+        pagination: input.pagination,
+        where,
+        orderBy,
+      });
+
+      return offsetPaginationResponse({
+        data: data as SubprojectTableData[],
+        pagination: input.pagination,
+        total,
+      });
+    }),
+
+  getAll: protectedProcedure
+    .use(permissionMiddleware({ subproject: ["view"] }))
+    .input(z.object({ filters: subprojectFiltersInputSchema }))
+    .handler(async ({ context, input }) => {
+      const parsedFilters = subprojectFiltersParser.parse(input.filters);
+      const where = subprojectDatabaseFiltersCompiler(subprojects).parse(parsedFilters);
+
+      return context.db.select().from(subprojects).orderBy(asc(subprojects.index)).where(where);
+    }),
+  create: protectedProcedure
+    .use(permissionMiddleware({ subproject: ["create"] }))
+    .input(createSubprojectSchema)
+    .handler(async ({ context, input }) => {
+      const lastSubproject = await context.db
+        .select({ index: subprojects.index })
+        .from(subprojects)
+        .limit(1)
+        .orderBy(desc(subprojects.index));
+
+      const index = (lastSubproject[0]?.index ?? 0) + 1;
+
+      const [result] = await context.db
+        .insert(subprojects)
+        .values({ ...input, index })
+        .returning();
+
+      if (!result) {
+        throw new ORPCError("INTERNAL_SERVER_ERROR", {
+          message: "Subproject kon niet worden aangemaakt",
+        });
+      }
+    }),
+  update: protectedProcedure
+    .use(permissionMiddleware({ subproject: ["update"] }))
+    .input(z.object({ id: z.string(), data: updateSubprojectSchema.partial() }))
+    .output(z.void())
+    .handler(async ({ context, input }) => {
+      const [result] = await context.db
+        .update(subprojects)
+        .set(input.data)
+        .where(eq(subprojects.id, input.id))
+        .returning();
+
+      if (!result) {
+        throw new ORPCError("INTERNAL_SERVER_ERROR", {
+          message: "Subproject kon niet worden aangemaakt",
+        });
+      }
+    }),
+  move: protectedProcedure
+    .use(permissionMiddleware({ subproject: ["update"] }))
+    .input(z.object({ fromIndex: z.number(), toIndex: z.number(), projectId: z.string() }))
+    .handler(async ({ context, input }) => {
+      /**
+       * Get all items for the project
+       */
+      const items = await context.db
+        .select({ id: subprojects.id })
+        .from(subprojects)
+        .where(eq(subprojects.projectId, input.projectId))
+        .orderBy(asc(subprojects.index));
+      const newItems = arrayMove(items, input);
+
+      /**
+       * Update the index of the items by splicing the item to the new index.
+       */
+      await context.db.transaction(async (tx) =>
+        Promise.allSettled(
+          newItems.map((item, index) =>
+            tx.update(subprojects).set({ index }).where(eq(subprojects.id, item.id)),
+          ),
+        ),
+      );
+    }),
+  delete: protectedProcedure
+    .use(permissionMiddleware({ subproject: ["delete"] }))
+    .input(bulkActionSchema)
+    .handler(async ({ context, input }) => {
+      await context.db.delete(subprojects).where(inArray(subprojects.id, input.ids));
+    }),
+};

package/dist/templates/spark/src/app/admin/subprojects/_lib/schema.ts

@@ -0,0 +1,29 @@
+import { relations } from "drizzle-orm";
+import { pgTable } from "drizzle-orm/pg-core";
+import { baseColumns } from "@/server/db/helpers";
+import { projects } from "@/server/db/schema";
+import { tasks } from "../../tasks/_lib/schema";
+
+/**
+ * Table
+ */
+export const subprojects = pgTable("subprojects", (t) => ({
+  ...baseColumns,
+  title: t.varchar().notNull(),
+  index: t.integer().notNull(),
+  projectId: t
+    .uuid()
+    .notNull()
+    .references(() => projects.id, { onDelete: "cascade" }),
+}));
+
+/**
+ * Relations
+ */
+export const subprojectsRelations = relations(subprojects, ({ one, many }) => ({
+  project: one(projects, {
+    fields: [subprojects.projectId],
+    references: [projects.id],
+  }),
+  tasks: many(tasks),
+}));

package/dist/templates/spark/src/app/admin/subprojects/_lib/validators.ts

@@ -0,0 +1,30 @@
+import { createInsertSchema, createSelectSchema } from "drizzle-zod";
+import type { z } from "zod";
+
+export type { SubprojectFiltersInputSchema as SubprojectFiltersInput } from "../_config/filters";
+export { subprojectFiltersInputSchema } from "../_config/filters";
+
+import { subprojects } from "./schema";
+
+/**
+ * Subproject type
+ */
+export type Subproject = typeof subprojects.$inferSelect;
+
+export const selectSubprojectSchema = createSelectSchema(subprojects);
+export type SelectSubprojectSchema = z.infer<typeof selectSubprojectSchema>;
+
+/**
+ * Schema
+ */
+export const createSubprojectSchema = createInsertSchema(subprojects).omit({ index: true });
+export const updateSubprojectSchema = createInsertSchema(subprojects);
+
+/**
+ * Create project schema
+ */
+export type CreateSubprojectInput = z.input<typeof createSubprojectSchema>;
+export type CreateSubprojectSchema = z.infer<typeof createSubprojectSchema>;
+
+export type UpdateSubprojectInput = z.input<typeof updateSubprojectSchema>;
+export type UpdateSubprojectSchema = z.infer<typeof updateSubprojectSchema>;

package/dist/templates/spark/src/app/admin/suppliers/(list)/(default)/page.tsx

@@ -0,0 +1,24 @@
+import { Allowed } from "@tulip-systems/auth/permissions/client";
+import { DataTable } from "@tulip-systems/data-tables/client";
+import { SupplierPaginationTableProvider } from "../../_components/tables";
+import { SupplierTableToolbar } from "../../_components/toolbars";
+import { supplierColumns } from "../../_config/columns-data";
+import {
+  supplierArchiveCommand,
+  supplierDeleteCommand,
+  supplierRestoreCommand,
+} from "../../_config/commands";
+
+export default function Page() {
+  return (
+    <Allowed permission={{ supplier: ["view"] }}>
+      <SupplierPaginationTableProvider
+        columns={supplierColumns}
+        commands={[supplierArchiveCommand, supplierRestoreCommand, supplierDeleteCommand]}
+      >
+        <SupplierTableToolbar />
+        <DataTable />
+      </SupplierPaginationTableProvider>
+    </Allowed>
+  );
+}

package/dist/templates/spark/src/app/admin/suppliers/(list)/archive/page.tsx

@@ -0,0 +1,23 @@
+import { Allowed } from "@tulip-systems/auth/permissions/client";
+import { DataTable } from "@tulip-systems/data-tables/client";
+import { SupplierPaginationTableProvider } from "../../_components/tables";
+import { supplierColumns } from "../../_config/columns-data";
+import {
+  supplierArchiveCommand,
+  supplierDeleteCommand,
+  supplierRestoreCommand,
+} from "../../_config/commands";
+
+export default function Page() {
+  return (
+    <Allowed permission={{ supplier: ["view"] }}>
+      <SupplierPaginationTableProvider
+        columns={supplierColumns}
+        commands={[supplierArchiveCommand, supplierRestoreCommand, supplierDeleteCommand]}
+        filterOptions={{ constraints: { isDeleted: true } }}
+      >
+        <DataTable />
+      </SupplierPaginationTableProvider>
+    </Allowed>
+  );
+}

package/dist/templates/spark/src/app/admin/suppliers/(list)/layout.tsx

@@ -0,0 +1,54 @@
+import {
+  BottomBar,
+  BottomBarLinks,
+  Header,
+  Topbar,
+  TopbarTitle,
+  TopbarTools,
+} from "@tulip-systems/app/components/client";
+import { InlineCommandMenu, InlineCommandMenuLoading } from "@tulip-systems/commands/client";
+import { TableLayout } from "@tulip-systems/data-tables";
+import { type PropsWithChildren, Suspense } from "react";
+import { supplierCreateCommand } from "../_config/commands";
+
+export default function SupplierLayout(props: PropsWithChildren) {
+  return (
+    <>
+      <Header>
+        <Topbar>
+          <TopbarTitle breadcrumbs={[{ label: "Leveranciers" }]} />
+
+          <TopbarTools>
+            <Suspense fallback={<InlineCommandMenuLoading />}>
+              <InlineCommandMenu data={null} commands={[supplierCreateCommand]} />
+            </Suspense>
+          </TopbarTools>
+        </Topbar>
+
+        <BottomBar>
+          <BottomBarLinks
+            paths={[
+              {
+                name: "Overzicht",
+                href: "/admin/suppliers",
+                segment: "(default)",
+              },
+            ]}
+          />
+
+          <BottomBarLinks
+            paths={[
+              {
+                name: "Archief",
+                href: "/admin/suppliers/archive",
+                segment: "archive",
+              },
+            ]}
+          />
+        </BottomBar>
+      </Header>
+
+      <TableLayout className="p-content">{props.children}</TableLayout>
+    </>
+  );
+}

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

@@ -0,0 +1,56 @@
+"use client";
+
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { Allowed } from "@tulip-systems/auth/permissions/client";
+import { ResponsiveCommandMenu } from "@tulip-systems/commands/client";
+import { notFound } from "next/navigation";
+import { use } from "react";
+import { AddressGrid } from "@/app/admin/addresses/_components/grid";
+import { ContactGrid } from "@/app/admin/contacts/_components/grid";
+import { orpc } from "@/server/router/client";
+import { supplierCreateAddressCommand, supplierCreateContactCommand } from "../../_config/commands";
+
+export default function DetailPage(props: PageProps<"/admin/suppliers/[id]">) {
+  const params = use(props.params);
+  const id = params.id?.toString();
+
+  const { data } = useSuspenseQuery(orpc.suppliers.getById.queryOptions({ input: { id } }));
+  if (!data) notFound();
+
+  const contacts = data.suppliersContacts.flatMap(({ contact }) => contact);
+  const addresses = data.suppliersAddresses.flatMap(({ address }) => address);
+
+  return (
+    <Allowed permission={{ supplier: ["view"] }}>
+      <div className="space-y-12 pb-20">
+        <Allowed permission={{ address: ["view"] }}>
+          <div className="flex flex-col gap-y-5">
+            <div className="flex items-center justify-between">
+              <h2 className="font-bold text-lg">Adressen</h2>
+              <ResponsiveCommandMenu
+                data={{ supplierId: id }}
+                commands={[supplierCreateAddressCommand]}
+              />
+            </div>
+
+            <AddressGrid addresses={addresses} />
+          </div>
+        </Allowed>
+
+        <Allowed permission={{ contact: ["view"] }}>
+          <div className="flex flex-col gap-y-5">
+            <div className="flex items-center justify-between">
+              <h2 className="font-bold text-lg">Contacten</h2>
+              <ResponsiveCommandMenu
+                data={{ supplierId: id }}
+                commands={[supplierCreateContactCommand]}
+              />
+            </div>
+
+            <ContactGrid contacts={contacts} />
+          </div>
+        </Allowed>
+      </div>
+    </Allowed>
+  );
+}

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

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

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

@@ -0,0 +1,144 @@
+"use client";
+
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { Allowed } from "@tulip-systems/auth/permissions/client";
+import { EditorContent, EditorMenuBubble } from "@tulip-systems/editor/client";
+import {
+  InlineEditor,
+  InlineField,
+  InlineFieldError,
+  InlineStringInput,
+} from "@tulip-systems/inline/client";
+import { DataList, DataListItem, DataListTitle, DataListValue } from "@tulip-systems/ui/data-list";
+import { notFound } from "next/navigation";
+import { use } from "react";
+import { z } from "zod";
+import { orpc } from "@/server/router/client";
+
+export default function DetailPage(props: PageProps<"/admin/suppliers/[id]">) {
+  const params = use(props.params);
+  const id = params.id?.toString();
+
+  const { data } = useSuspenseQuery(orpc.suppliers.getById.queryOptions({ input: { id } }));
+  if (!data) notFound();
+
+  const { name, tradeName, vatNumber, website, email, phone, notes } = data;
+
+  return (
+    <Allowed permission={{ supplier: ["view"] }}>
+      <DataList>
+        <DataListItem>
+          <DataListTitle>Naam</DataListTitle>
+          <DataListValue>
+            <InlineField>
+              <InlineStringInput
+                initialValue={name}
+                variables={(value) => ({ id, data: { name: value ?? undefined } })}
+                mutation={orpc.suppliers.update.mutationOptions()}
+                strategy={{ mutate: { on: "blur" }, validate: { blur: z.string().nullable() } }}
+              />
+              <InlineFieldError />
+            </InlineField>
+          </DataListValue>
+        </DataListItem>
+
+        <DataListItem>
+          <DataListTitle>Handelsnaam</DataListTitle>
+          <DataListValue>
+            <InlineField>
+              <InlineStringInput
+                initialValue={tradeName ?? ""}
+                variables={(value) => ({ id, data: { tradeName: value } })}
+                mutation={orpc.suppliers.update.mutationOptions()}
+                strategy={{ mutate: { on: "blur" }, validate: { blur: z.string().nullable() } }}
+              />
+              <InlineFieldError />
+            </InlineField>
+          </DataListValue>
+        </DataListItem>
+
+        <DataListItem>
+          <DataListTitle>BTW-nummer</DataListTitle>
+          <DataListValue>
+            <InlineField>
+              <InlineStringInput
+                initialValue={vatNumber ?? ""}
+                variables={(value) => ({ id, data: { vatNumber: value } })}
+                mutation={orpc.suppliers.update.mutationOptions()}
+                strategy={{ mutate: { on: "blur" }, validate: { blur: z.string().nullable() } }}
+              />
+              <InlineFieldError />
+            </InlineField>
+          </DataListValue>
+        </DataListItem>
+
+        <DataListItem>
+          <DataListTitle>Email</DataListTitle>
+          <DataListValue>
+            <InlineField>
+              <InlineStringInput
+                initialValue={email ?? ""}
+                variables={(value) => ({ id, data: { email: value } })}
+                mutation={orpc.suppliers.update.mutationOptions()}
+                strategy={{ mutate: { on: "blur" }, validate: { blur: z.string().nullable() } }}
+              />
+              <InlineFieldError />
+            </InlineField>
+          </DataListValue>
+        </DataListItem>
+
+        <DataListItem>
+          <DataListTitle>Website</DataListTitle>
+          <DataListValue>
+            <InlineField>
+              <InlineStringInput
+                initialValue={website ?? ""}
+                variables={(value) => ({ id, data: { website: value } })}
+                mutation={orpc.suppliers.update.mutationOptions()}
+                strategy={{ mutate: { on: "blur" }, validate: { blur: z.string().nullable() } }}
+              />
+              <InlineFieldError />
+            </InlineField>
+          </DataListValue>
+        </DataListItem>
+
+        <DataListItem>
+          <DataListTitle>Phone</DataListTitle>
+          <DataListValue>
+            <InlineField>
+              <InlineStringInput
+                initialValue={phone ?? ""}
+                variables={(value) => ({ id, data: { phone: value } })}
+                mutation={orpc.suppliers.update.mutationOptions()}
+                strategy={{ mutate: { on: "blur" }, validate: { blur: z.string().nullable() } }}
+              />
+              <InlineFieldError />
+            </InlineField>
+          </DataListValue>
+        </DataListItem>
+
+        <DataListItem>
+          <DataListTitle className="self-start">Notitie</DataListTitle>
+          <DataListValue>
+            <InlineField>
+              <InlineEditor
+                initialValue={notes ?? undefined}
+                variables={(value) => ({ id, data: { notes: value } })}
+                mutation={orpc.suppliers.update.mutationOptions()}
+                strategy={{
+                  mutate: { on: "change", debounceMs: 700 },
+                  validate: { change: z.any() },
+                }}
+                className="min-h-40"
+              >
+                <EditorMenuBubble />
+                <EditorContent />
+              </InlineEditor>
+              <InlineFieldError />
+            </InlineField>
+          </DataListValue>
+        </DataListItem>
+      </DataList>
+    </Allowed>
+  );
+}

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

@@ -0,0 +1,49 @@
+"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 {
+  supplierArchiveCommand,
+  supplierDeleteCommand,
+  supplierRestoreCommand,
+} from "../_config/commands";
+
+export default function SupplierListLayout(props: LayoutProps<"/admin/suppliers/[id]">) {
+  const params = use(props.params);
+  const id = params.id?.toString();
+
+  const { data } = useSuspenseQuery(orpc.suppliers.getById.queryOptions({ input: { id } }));
+  if (!data) notFound();
+
+  return (
+    <>
+      <Header>
+        <Topbar>
+          <TopbarTitle
+            breadcrumbs={[
+              { label: "Leveranciers", href: "/admin/suppliers" },
+              { label: data.name || "" },
+            ]}
+          />
+
+          <TopbarTools>
+            <ResponsiveCommandMenu
+              data={data}
+              commands={[supplierArchiveCommand, supplierRestoreCommand, supplierDeleteCommand]}
+            />
+          </TopbarTools>
+        </Topbar>
+      </Header>
+
+      <div className="space-y-20 p-content">
+        {props.dashboard}
+
+        {props.children}
+      </div>
+    </>
+  );
+}

package/dist/templates/spark/src/app/admin/suppliers/_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 CreateSupplierInput,
+  type CreateSupplierSchema,
+  createSupplierSchema,
+} from "../_lib/validators";
+
+export type CreateSupplierCommandProps<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = undefined,
+  TOnMutateResult = unknown,
+> = {
+  variables: (values: CreateSupplierSchema) => TVariables;
+  mutation: MutationOptions<TData, TError, TVariables, TOnMutateResult>;
+  defaultValues?: Partial<CreateSupplierInput>;
+  children?: React.ReactNode;
+};
+
+export function CreateSupplierCommand<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = undefined,
+  TOnMutateResult = unknown,
+>({
+  variables,
+  mutation,
+  defaultValues,
+  children,
+}: CreateSupplierCommandProps<TData, TError, TVariables, TOnMutateResult>) {
+  const form = useForm<CreateSupplierInput>({
+    resolver: standardSchemaResolver(createSupplierSchema),
+    defaultValues,
+  });
+
+  return (
+    <CommandFormDialog>
+      {children}
+
+      <Form {...form}>
+        <CommandFormDialogContent variables={variables} mutation={mutation}>
+          <CommandFormDialogHeader>
+            <CommandFormDialogTitle>Leverancier Toevoegen</CommandFormDialogTitle>
+          </CommandFormDialogHeader>
+
+          <CommandFormDialogFields>
+            <FormField
+              control={form.control}
+              name="name"
+              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 CreateSupplierCommandTrigger = CommandFormDialogTrigger;