@tulip-systems/create-app 0.12.3 → 0.13.0

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

@@ -13,6 +13,7 @@ import {
   desc,
   eq,
   exists,
+  getTableColumns,
   gte,
   ilike,
   inArray,
@@ -22,9 +23,12 @@ import {
   or,
   sql,
 } from "drizzle-orm";
+import { after } from "next/server";
 import z from "zod";
+import type { JSONValue } from "@/app/admin/history/_lib/validators";
 import { getTableData } from "@/app/lib/utils/table-data.server";
 import { customers, initiatives } from "@/server/db/schema";
+import { events } from "@/server/events/init";
 import { permissionMiddleware } from "@/server/router/middleware";
 import { protectedProcedure } from "@/server/router/procedures";
 import type { ProjectColumn } from "../_config/columns-data";
@@ -34,6 +38,12 @@ import {
   projectTableSortsParser,
   projectTableSortsSchema,
 } from "../_config/sorting";
+import {
+  projectArchivedEvent,
+  projectCreatedEvent,
+  projectRestoredEvent,
+  projectUpdatedEvent,
+} from "./events";
 import { ensureProjectDriveFolder } from "./helpers.server";
 import { projects } from "./schema";
 import {
@@ -215,50 +225,135 @@ export const projectsRouter = {
     .use(permissionMiddleware({ project: ["create"] }))
     .input(createProjectSchema)
     .handler(async ({ context, input }) => {
-      const [result] = await context.db.insert(projects).values(input).returning();
-
-      if (!result) {
-        throw new ORPCError("NOT_FOUND", {
-          message: "Project kon niet worden aangemaakt",
+      const [created] = await context.db
+        .insert(projects)
+        .values(input)
+        .returning({
+          ...getTableColumns(projects),
+          after: sql<Record<string, JSONValue>>`to_jsonb(NEW)`,
         });
-      }
+
+      if (!created) throw new ORPCError("INTERNAL_SERVER_ERROR");
+      const { after: snapshot, ...result } = created;
+
+      after(async () => {
+        await events.publish(
+          projectCreatedEvent,
+          {
+            actor: { id: context.user.id, name: context.user.name },
+            projectId: result.id,
+            key: result.key,
+            title: result.title,
+            status: result.status,
+            after: snapshot,
+          },
+          { occurredAt: new Date().toISOString() },
+        );
+      });
 
       return result;
     }),
   update: protectedProcedure
     .use(permissionMiddleware({ project: ["update"] }))
     .input(z.object({ id: z.string(), data: updateProjectSchema.partial() }))
-    .output(z.void())
     .handler(async ({ context, input }) => {
       const [result] = await context.db
         .update(projects)
         .set(input.data)
         .where(eq(projects.id, input.id))
-        .returning();
-
-      if (!result) {
-        throw new ORPCError("NOT_FOUND", {
-          message: "Project kon niet worden gewijzigd",
+        .returning({
+          ...getTableColumns(projects),
+          before: sql<Record<string, JSONValue>>`to_jsonb(OLD)`,
+          after: sql<Record<string, JSONValue>>`to_jsonb(NEW)`,
         });
-      }
+
+      if (!result) return;
+      const { before: previous, after: next, ...project } = result;
+      after(async () => {
+        await events.publish(
+          projectUpdatedEvent,
+          {
+            actor: { id: context.user.id, name: context.user.name },
+            projectId: project.id,
+            key: project.key,
+            title: project.title,
+            before: previous,
+            after: next,
+          },
+          { occurredAt: new Date().toISOString() },
+        );
+      });
+      return project;
     }),
   archive: protectedProcedure
     .use(permissionMiddleware({ project: ["archive"] }))
     .input(bulkActionSchema)
     .handler(async ({ context, input }) => {
-      await context.db
+      const updated = await context.db
         .update(projects)
         .set({ deletedAt: new Date() })
-        .where(inArray(projects.id, input.ids));
+        .where(and(inArray(projects.id, input.ids), isNull(projects.deletedAt)))
+        .returning({
+          id: projects.id,
+          key: projects.key,
+          title: projects.title,
+          before: sql<Record<string, JSONValue>>`to_jsonb(OLD)`,
+          after: sql<Record<string, JSONValue>>`to_jsonb(NEW)`,
+        });
+
+      after(async () => {
+        await Promise.all(
+          updated.map((project) =>
+            events.publish(
+              projectArchivedEvent,
+              {
+                actor: { id: context.user.id, name: context.user.name },
+                projectId: project.id,
+                key: project.key,
+                title: project.title,
+                before: project.before,
+                after: project.after,
+              },
+              { occurredAt: new Date().toISOString() },
+            ),
+          ),
+        );
+      });
     }),
   restore: protectedProcedure
     .use(permissionMiddleware({ project: ["archive"] }))
     .input(bulkActionSchema)
     .handler(async ({ context, input }) => {
-      await context.db
+      const updated = await context.db
         .update(projects)
         .set({ deletedAt: null })
-        .where(inArray(projects.id, input.ids));
+        .where(and(inArray(projects.id, input.ids), isNotNull(projects.deletedAt)))
+        .returning({
+          id: projects.id,
+          key: projects.key,
+          title: projects.title,
+          before: sql<Record<string, JSONValue>>`to_jsonb(OLD)`,
+          after: sql<Record<string, JSONValue>>`to_jsonb(NEW)`,
+        });
+
+      after(async () => {
+        await Promise.all(
+          updated.map((project) =>
+            events.publish(
+              projectRestoredEvent,
+              {
+                actor: { id: context.user.id, name: context.user.name },
+                projectId: project.id,
+                key: project.key,
+                title: project.title,
+                before: project.before,
+                after: project.after,
+              },
+              { occurredAt: new Date().toISOString() },
+            ),
+          ),
+        );
+      });
     }),
   delete: protectedProcedure
     .use(permissionMiddleware({ project: ["delete"] }))
@@ -270,10 +365,40 @@ export const projectsRouter = {
     .use(permissionMiddleware({ project: ["update"] }))
     .input(bulkActionSchema.extend({ status: projectStatusSchema }))
     .handler(async ({ context, input }) => {
-      await context.db
+      const updated = await context.db
         .update(projects)
         .set({ status: input.status })
-        .where(inArray(projects.id, input.ids))
-        .returning();
+        .where(
+          and(
+            inArray(projects.id, input.ids),
+            sql`${projects.status} IS DISTINCT FROM ${input.status}`,
+          ),
+        )
+        .returning({
+          id: projects.id,
+          key: projects.key,
+          title: projects.title,
+          before: sql<Record<string, JSONValue>>`to_jsonb(OLD)`,
+          after: sql<Record<string, JSONValue>>`to_jsonb(NEW)`,
+        });
+
+      after(async () => {
+        await Promise.all(
+          updated.map((project) =>
+            events.publish(
+              projectUpdatedEvent,
+              {
+                actor: { id: context.user.id, name: context.user.name },
+                projectId: project.id,
+                key: project.key,
+                title: project.title,
+                before: project.before,
+                after: project.after,
+              },
+              { occurredAt: new Date().toISOString() },
+            ),
+          ),
+        );
+      });
     }),
 };

package/dist/templates/code/src/app/admin/projects/timeline/page.tsx

@@ -2,11 +2,11 @@
 
 import { Temporal } from "@js-temporal/polyfill";
 import { useSuspenseQuery } from "@tanstack/react-query";
+import { Link } from "@tulip-systems/core/navigation";
 import { Button } from "@tulip-systems/ui/button";
 import { Select, SelectContent, SelectItem, SelectTrigger } from "@tulip-systems/ui/select";
 import { findStatus } from "@tulip-systems/ui/status";
 import { MinusIcon, PlusIcon } from "lucide-react";
-import Link from "next/link";
 import { parseAsStringEnum, useQueryState } from "nuqs";
 import { useState } from "react";
 import {

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

@@ -1,12 +1,12 @@
 "use client";
 
+import { Link } from "@tulip-systems/core/navigation";
 import { TableCell, type TableColumnDef, TableColumnHeader } from "@tulip-systems/data-tables";
 import {
   createTableSelectCell,
   TableStatusCell,
   TableTextCell,
 } from "@tulip-systems/data-tables/client";
-import Link from "next/link";
 import type { Customer } from "../../customers/_lib/validators";
 import type { Prospect } from "../_lib/validators";
 import { ProspectStatusField } from "./status";

package/dist/templates/code/src/app/admin/queue/_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 EnqueueQueueTaskInput,
+  type EnqueueQueueTaskSchema,
+  enqueueQueueTaskSchema,
+} from "../_lib/validators";
+
+export type EnqueueQueueTaskCommandProps<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = undefined,
+  TOnMutateResult = unknown,
+> = {
+  variables: (values: EnqueueQueueTaskSchema) => TVariables;
+  mutation: MutationOptions<TData, TError, TVariables, TOnMutateResult>;
+  children?: React.ReactNode;
+};
+
+export function EnqueueQueueTaskCommand<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = undefined,
+  TOnMutateResult = unknown,
+>({
+  variables,
+  mutation,
+  children,
+}: EnqueueQueueTaskCommandProps<TData, TError, TVariables, TOnMutateResult>) {
+  const form = useForm<EnqueueQueueTaskInput>({
+    resolver: standardSchemaResolver(enqueueQueueTaskSchema),
+    defaultValues: {
+      message: "",
+    },
+  });
+
+  return (
+    <CommandFormDialog>
+      {children}
+
+      <Form {...form}>
+        <CommandFormDialogContent variables={variables} mutation={mutation}>
+          <CommandFormDialogHeader>
+            <CommandFormDialogTitle>Enqueue task</CommandFormDialogTitle>
+          </CommandFormDialogHeader>
+
+          <CommandFormDialogFields>
+            <FormField
+              control={form.control}
+              name="message"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Message</FormLabel>
+                  <FormControl>
+                    <Input {...field} placeholder="Enter your message" />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </CommandFormDialogFields>
+
+          <CommandFormDialogFooter>
+            <CommandFormDialogCancel>Cancel</CommandFormDialogCancel>
+            <CommandFormDialogSubmit>Enqueue</CommandFormDialogSubmit>
+          </CommandFormDialogFooter>
+        </CommandFormDialogContent>
+      </Form>
+    </CommandFormDialog>
+  );
+}
+
+export const EnqueueQueueTaskCommandTrigger = CommandFormDialogTrigger;

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

@@ -0,0 +1,37 @@
+"use client";
+
+import { useSuspenseQuery } from "@tanstack/react-query";
+import type { CommandFor } from "@tulip-systems/commands";
+import type { TableColumnDef } from "@tulip-systems/data-tables";
+import {
+  createTableConfig,
+  TableConfigProvider,
+  useLocalStrategy,
+} from "@tulip-systems/data-tables/client";
+import type { PropsWithChildren } from "react";
+import { orpc } from "@/server/router/client";
+import type { QueueExecution } from "../_lib/validators";
+
+type QueueExecutionsTableProviderProps = PropsWithChildren<{
+  columns: TableColumnDef<QueueExecution>[];
+  commands?: CommandFor<QueueExecution[]>[];
+}>;
+
+export function QueueExecutionsTableProvider({
+  columns,
+  commands,
+  children,
+}: QueueExecutionsTableProviderProps) {
+  const response = useSuspenseQuery(orpc.queue.listExecutions.queryOptions());
+  const strategy = useLocalStrategy({ total: response.data.length });
+
+  const config = createTableConfig<QueueExecution>({
+    queryData: response.data,
+    getRowId: (row) => row.id,
+    columns,
+    strategy,
+    commands,
+  });
+
+  return <TableConfigProvider config={config}>{children}</TableConfigProvider>;
+}

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

@@ -0,0 +1,16 @@
+"use client";
+
+import { TableToolbar, TableToolbarList } from "@tulip-systems/data-tables";
+import type { PropsWithChildren } from "react";
+
+export function QueueExecutionsTableToolbar({ children }: PropsWithChildren) {
+  return (
+    <TableToolbar>
+      <TableToolbarList>
+        <h1 className="font-semibold text-lg tracking-tight">Queue executions</h1>
+      </TableToolbarList>
+
+      <TableToolbarList>{children}</TableToolbarList>
+    </TableToolbar>
+  );
+}

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

@@ -0,0 +1,44 @@
+"use client";
+
+import { formatDateTime } from "@tulip-systems/core";
+import { TableCell, type TableColumnDef, TableColumnHeader } from "@tulip-systems/data-tables";
+import { createTableSelectCell } from "@tulip-systems/data-tables/client";
+import type { QueueExecution } from "../_lib/validators";
+
+export const queueExecutionColumns: TableColumnDef<QueueExecution>[] = [
+  createTableSelectCell(),
+  {
+    accessorKey: "message",
+    header: ({ column }) => <TableColumnHeader column={column} title="Message" />,
+    cell: ({ row }) => (
+      <TableCell className="max-w-[360px] truncate">{row.original.message}</TableCell>
+    ),
+    enableSorting: false,
+  },
+  {
+    accessorKey: "task",
+    header: ({ column }) => <TableColumnHeader column={column} title="Task" />,
+    cell: ({ row }) => <TableCell>{row.original.task}</TableCell>,
+    enableSorting: false,
+  },
+  {
+    accessorKey: "jobId",
+    header: ({ column }) => <TableColumnHeader column={column} title="Job" />,
+    cell: ({ row }) => (
+      <TableCell className="max-w-[280px] truncate">{row.original.jobId}</TableCell>
+    ),
+    enableSorting: false,
+  },
+  {
+    accessorKey: "enqueuedAt",
+    header: ({ column }) => <TableColumnHeader column={column} title="Enqueued" />,
+    cell: ({ row }) => <TableCell>{formatDateTime(row.original.enqueuedAt)}</TableCell>,
+    enableSorting: false,
+  },
+  {
+    accessorKey: "executedAt",
+    header: ({ column }) => <TableColumnHeader column={column} title="Executed" />,
+    cell: ({ row }) => <TableCell>{formatDateTime(row.original.executedAt)}</TableCell>,
+    enableSorting: false,
+  },
+];

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

@@ -0,0 +1,39 @@
+"use client";
+
+import { commandBuilder } from "@tulip-systems/commands";
+import { CommandLabel, DeleteCommand } from "@tulip-systems/commands/client";
+import { toast } from "@tulip-systems/ui/sonner";
+import { ListPlusIcon } from "lucide-react";
+import { orpc } from "@/server/router/client";
+import {
+  EnqueueQueueTaskCommand,
+  EnqueueQueueTaskCommandTrigger,
+} from "../_components/create-command";
+import type { QueueExecution } from "../_lib/validators";
+
+export const queueEnqueueCommand = commandBuilder.render(() => (
+  <EnqueueQueueTaskCommand
+    variables={(values) => values}
+    mutation={orpc.queue.enqueueTask.mutationOptions({
+      meta: { invalidates: [orpc.queue.listExecutions.key()] },
+      onSuccess: () => toast.success("Task enqueued"),
+      onError: () => toast.error("Could not enqueue task"),
+    })}
+  >
+    <EnqueueQueueTaskCommandTrigger label="Enqueue task" hotkey="mod+i">
+      <ListPlusIcon className="size-4" />
+      <CommandLabel />
+    </EnqueueQueueTaskCommandTrigger>
+  </EnqueueQueueTaskCommand>
+));
+
+export const queueDeleteCommand = commandBuilder.$type<QueueExecution[]>().render(({ data }) => (
+  <DeleteCommand
+    variables={{ ids: data.map((item) => item.id) }}
+    mutation={orpc.queue.deleteExecutions.mutationOptions({
+      meta: { invalidates: [orpc.queue.listExecutions.key()] },
+      onSuccess: () => toast.success("Queue executions deleted"),
+      onError: () => toast.error("Could not delete queue executions"),
+    })}
+  />
+));

package/dist/templates/code/src/app/admin/queue/_lib/queue.ts

@@ -0,0 +1,27 @@
+import "server-cli-only";
+
+import { defineTask } from "@tulip-systems/queue";
+import { z } from "zod";
+import { db } from "@/server/db/init";
+import { queueExecutions } from "./schema";
+
+export const queueLogTask = defineTask("queue.log", {
+  schema: z.object({
+    message: z.string().min(1),
+    requestedAt: z.string().min(1),
+  }),
+});
+
+export const queueLogTaskHandler = queueLogTask.handle(
+  "record-queue-execution",
+  async ({ payload, job }) => {
+    await db.insert(queueExecutions).values({
+      jobId: job.id,
+      task: job.task,
+      message: payload.message,
+      enqueuedAt: new Date(job.enqueuedAt),
+      requestedAt: new Date(payload.requestedAt),
+      executedAt: new Date(),
+    });
+  },
+);

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

@@ -0,0 +1,33 @@
+import "server-cli-only";
+
+import { desc, inArray } from "drizzle-orm";
+import { queue } from "@/server/queue/init";
+import { protectedProcedure } from "@/server/router/procedures";
+import { queueLogTask } from "./queue";
+import { queueExecutions } from "./schema";
+import { deleteQueueExecutionsSchema, enqueueQueueTaskSchema } from "./validators";
+
+export const queueRouter = {
+  listExecutions: protectedProcedure.handler(async ({ context }) =>
+    context.db.query.queueExecutions.findMany({
+      orderBy: [desc(queueExecutions.executedAt)],
+      limit: 100,
+    }),
+  ),
+  enqueueTask: protectedProcedure.input(enqueueQueueTaskSchema).handler(async ({ input }) => {
+    const result = await queue.enqueue(queueLogTask, {
+      message: input.message,
+      requestedAt: new Date().toISOString(),
+    });
+
+    return {
+      adapter: queue.adapter.key,
+      enqueued: result,
+    };
+  }),
+  deleteExecutions: protectedProcedure
+    .input(deleteQueueExecutionsSchema)
+    .handler(async ({ context, input }) => {
+      await context.db.delete(queueExecutions).where(inArray(queueExecutions.id, input.ids));
+    }),
+};

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

@@ -0,0 +1,12 @@
+import { pgTable } from "drizzle-orm/pg-core";
+import { baseColumns } from "@/server/db/helpers";
+
+export const queueExecutions = pgTable("queue_executions", (t) => ({
+  ...baseColumns,
+  jobId: t.varchar().notNull(),
+  task: t.varchar().notNull(),
+  message: t.text().notNull(),
+  enqueuedAt: t.timestamp().notNull(),
+  requestedAt: t.timestamp().notNull(),
+  executedAt: t.timestamp().notNull(),
+}));

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

@@ -0,0 +1,15 @@
+import { z } from "zod";
+import type { queueExecutions } from "./schema";
+
+export type QueueExecution = typeof queueExecutions.$inferSelect;
+
+export const enqueueQueueTaskSchema = z.object({
+  message: z.string().trim().min(1),
+});
+
+export const deleteQueueExecutionsSchema = z.object({
+  ids: z.array(z.string()),
+});
+
+export type EnqueueQueueTaskInput = z.input<typeof enqueueQueueTaskSchema>;
+export type EnqueueQueueTaskSchema = z.infer<typeof enqueueQueueTaskSchema>;

package/dist/templates/code/src/app/admin/quotations/(list)/layout.tsx

@@ -0,0 +1,24 @@
+import { Header, Topbar, TopbarTitle, TopbarTools } from "@tulip-systems/app/components/client";
+import { InlineCommandMenu, InlineCommandMenuLoading } from "@tulip-systems/commands/client";
+import { type PropsWithChildren, Suspense } from "react";
+import { quotationCreateCommand } from "../_config/commands";
+
+export default function QuotationsLayout({ children }: PropsWithChildren) {
+  return (
+    <>
+      <Header>
+        <Topbar>
+          <TopbarTitle breadcrumbs={[{ label: "Offertes" }]} />
+
+          <TopbarTools>
+            <Suspense fallback={<InlineCommandMenuLoading />}>
+              <InlineCommandMenu data={{}} commands={[quotationCreateCommand]} />
+            </Suspense>
+          </TopbarTools>
+        </Topbar>
+      </Header>
+
+      {children}
+    </>
+  );
+}

package/dist/templates/code/src/app/admin/quotations/(list)/page.tsx

@@ -0,0 +1,23 @@
+import { Allowed } from "@tulip-systems/auth/permissions/client";
+import { TableLayout } from "@tulip-systems/data-tables";
+import { DataTable } from "@tulip-systems/data-tables/client";
+import { QuotationPaginationTableProvider } from "../_components/tables";
+import { QuotationTableToolbar } from "../_components/toolbars";
+import { quotationColumns } from "../_config/columns-data";
+import { quotationDeleteCommand } from "../_config/commands";
+
+export default function QuotationsPage() {
+  return (
+    <Allowed permission={{ quotation: ["view"] }}>
+      <TableLayout className="p-content">
+        <QuotationPaginationTableProvider
+          columns={quotationColumns}
+          commands={[quotationDeleteCommand]}
+        >
+          <QuotationTableToolbar />
+          <DataTable />
+        </QuotationPaginationTableProvider>
+      </TableLayout>
+    </Allowed>
+  );
+}

package/dist/templates/code/src/app/admin/quotations/[id]/(dashboard)/layout.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { Header, Topbar, TopbarTitle, TopbarTools } from "@tulip-systems/app/components/client";
+import { InlineCommandMenu, InlineCommandMenuLoading } from "@tulip-systems/commands/client";
+import { notFound } from "next/navigation";
+import { Suspense, use } from "react";
+import { orpc } from "@/server/router/client";
+import { quotationDeleteCommand, quotationPreviewCommand } from "../../_config/commands";
+
+export default function QuotationsLayout(props: LayoutProps<"/admin/quotations/[id]">) {
+  const params = use(props.params);
+  const id = params.id?.toString();
+
+  const { data } = useSuspenseQuery(orpc.quotations.getById.queryOptions({ input: { id } }));
+  if (!data) notFound();
+
+  return (
+    <>
+      <Header>
+        <Topbar>
+          <TopbarTitle
+            breadcrumbs={[{ label: "Offertes", href: "/admin/quotations" }, { label: data.title }]}
+          />
+
+          <TopbarTools>
+            <Suspense fallback={<InlineCommandMenuLoading />}>
+              <InlineCommandMenu
+                data={data}
+                commands={[quotationPreviewCommand, quotationDeleteCommand]}
+              />
+            </Suspense>
+          </TopbarTools>
+        </Topbar>
+      </Header>
+
+      {props.children}
+    </>
+  );
+}