@tulip-systems/create-app 0.12.4 → 0.14.0

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

@@ -0,0 +1,64 @@
+"use client";
+
+import { formatDateTime } from "@tulip-systems/core";
+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 type { Notification } from "../_lib/validators";
+
+export const notificationColumns: TableColumnDef<Notification>[] = [
+  createTableSelectCell(),
+  {
+    accessorKey: "title",
+    header: ({ column }) => <TableColumnHeader column={column} title="Title" />,
+    cell: ({ row }) => (
+      <TableCell>
+        <div className="font-medium">{row.original.title}</div>
+        <div className="max-w-[520px] truncate text-muted-foreground text-xs">
+          {row.original.body}
+        </div>
+      </TableCell>
+    ),
+    enableSorting: false,
+  },
+  {
+    accessorKey: "eventName",
+    header: ({ column }) => <TableColumnHeader column={column} title="Event" />,
+    cell: ({ row }) => <TableCell>{row.original.eventName}</TableCell>,
+    enableSorting: false,
+  },
+  {
+    accessorKey: "listenerKey",
+    header: ({ column }) => <TableColumnHeader column={column} title="Listener" />,
+    cell: ({ row }) => <TableCell>{row.original.listenerKey}</TableCell>,
+    enableSorting: false,
+  },
+  {
+    accessorKey: "sourceHref",
+    header: ({ column }) => <TableColumnHeader column={column} title="Source" />,
+    cell: ({ row }) => (
+      <TableCell>
+        {row.original.sourceHref ? (
+          <Link href={row.original.sourceHref} className="hover:underline">
+            {row.original.source}
+          </Link>
+        ) : (
+          row.original.source
+        )}
+      </TableCell>
+    ),
+    enableSorting: false,
+  },
+  {
+    accessorKey: "occurredAt",
+    header: ({ column }) => <TableColumnHeader column={column} title="Occurred" />,
+    cell: ({ row }) => <TableCell>{formatDateTime(row.original.occurredAt)}</TableCell>,
+    enableSorting: false,
+  },
+  {
+    accessorKey: "readAt",
+    header: ({ column }) => <TableColumnHeader column={column} title="Status" />,
+    cell: ({ row }) => <TableCell>{row.original.readAt ? "Read" : "Unread"}</TableCell>,
+    enableSorting: false,
+  },
+];

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

@@ -0,0 +1,40 @@
+"use client";
+
+import { commandBuilder } from "@tulip-systems/commands";
+import { CommandClick, CommandLabel, DeleteCommand } from "@tulip-systems/commands/client";
+import { toast } from "@tulip-systems/ui/sonner";
+import { CheckIcon } from "lucide-react";
+import { orpc } from "@/server/router/client";
+import { CommandTogglePush } from "../_components/command-toggle-push";
+import type { Notification } from "../_lib/validators";
+
+export const notificationTogglePushCommand = commandBuilder.render(() => <CommandTogglePush />);
+
+export const notificationMarkAsReadCommand = commandBuilder
+  .$type<Notification[]>()
+  .visibleWhen(({ data }) => data.some((item) => !item.readAt))
+  .render(({ data }) => (
+    <CommandClick
+      label="Mark as read"
+      variables={{ ids: data.map((item) => item.id) }}
+      mutation={orpc.notifications.markAsRead.mutationOptions({
+        meta: { invalidates: [orpc.notifications.list.key()] },
+        onSuccess: () => toast.success("Notifications marked as read"),
+      })}
+    >
+      <CheckIcon className="size-4" />
+      <CommandLabel />
+    </CommandClick>
+  ));
+
+export const notificationDeleteCommand = commandBuilder
+  .$type<Notification[]>()
+  .render(({ data }) => (
+    <DeleteCommand
+      variables={{ ids: data.map((item) => item.id) }}
+      mutation={orpc.notifications.delete.mutationOptions({
+        meta: { invalidates: [orpc.notifications.list.key()] },
+        onSuccess: () => toast.success("Notifications deleted"),
+      })}
+    />
+  ));

package/dist/templates/code/src/app/admin/notifications/_lib/listeners.server.ts

@@ -0,0 +1,69 @@
+import "server-cli-only";
+
+import { projectCreatedEvent, projectUpdatedEvent } from "@/app/admin/projects/_lib/events";
+import { taskCreatedEvent } from "@/app/admin/tasks/_lib/events";
+import { db } from "@/server/db/init";
+import { sendPushNotification } from "./push.server";
+import { notifications } from "./schema";
+
+export const notificationEventListeners = {
+  projectCreated: projectCreatedEvent.listen(async ({ payload, event }) => {
+    const [notification] = await db
+      .insert(notifications)
+      .values({
+        title: "Project created",
+        body: `${payload.title} was created with status ${payload.status}.`,
+        eventId: event.id,
+        eventName: event.name,
+        eventVersion: event.version,
+        listenerKey: "notifications:projectCreated",
+        source: "project",
+        sourceId: payload.projectId,
+        sourceHref: `/admin/projects/${payload.projectId}`,
+        occurredAt: new Date(event.occurredAt),
+      })
+      .returning();
+
+    if (notification) await sendPushNotification(notification);
+  }),
+  projectStatusChanged: projectUpdatedEvent.listen(async ({ payload, event }) => {
+    if (payload.before.status === payload.after.status) return;
+    
+    const [notification] = await db
+      .insert(notifications)
+      .values({
+        title: "Project status changed",
+        body: `${payload.title} moved from ${payload.before.status} to ${payload.after.status}.`,
+        eventId: event.id,
+        eventName: event.name,
+        eventVersion: event.version,
+        listenerKey: "notifications:projectStatusChanged",
+        source: "project",
+        sourceId: payload.projectId,
+        sourceHref: `/admin/projects/${payload.projectId}`,
+        occurredAt: new Date(event.occurredAt),
+      })
+      .returning();
+
+    if (notification) await sendPushNotification(notification);
+  }),
+  taskCreated: taskCreatedEvent.listen(async ({ payload, event }) => {
+    const [notification] = await db
+      .insert(notifications)
+      .values({
+        title: "Task created",
+        body: `${payload.code} ${payload.title} was added to ${payload.projectTitle}.`,
+        eventId: event.id,
+        eventName: event.name,
+        eventVersion: event.version,
+        listenerKey: "notifications:taskCreated",
+        source: "task",
+        sourceId: payload.taskId,
+        sourceHref: `/admin/tasks/${payload.taskId}`,
+        occurredAt: new Date(event.occurredAt),
+      })
+      .returning();
+
+    if (notification) await sendPushNotification(notification);
+  }),
+};

package/dist/templates/code/src/app/admin/notifications/_lib/push.server.ts

@@ -0,0 +1,80 @@
+import "server-cli-only";
+
+import { eq } from "drizzle-orm";
+import webpush from "web-push";
+import { env } from "@/env";
+import { db } from "@/server/db/init";
+import { notificationPushSubscriptions } from "./schema";
+import type { Notification } from "./validators";
+
+const publicKey = env.NEXT_PUBLIC_WEB_PUSH_PUBLIC_KEY;
+const privateKey = env.WEB_PUSH_PRIVATE_KEY;
+const subject = env.WEB_PUSH_SUBJECT;
+
+const isWebPushConfigured = Boolean(publicKey && privateKey && subject);
+
+if (publicKey && privateKey && subject) {
+  webpush.setVapidDetails(subject, publicKey, privateKey);
+}
+
+/**
+ * Returns the browser-facing Web Push configuration.
+ *
+ * The client uses this to know whether push is available in the current
+ * environment and which public VAPID key to pass to the browser subscription.
+ */
+export function getWebPushConfig() {
+  return {
+    publicKey: publicKey ?? null,
+    configured: isWebPushConfigured,
+  };
+}
+
+/**
+ * Sends a notification row to every stored browser push subscription.
+ *
+ * This is a best-effort side effect: if VAPID keys are not configured, it no-ops
+ * so database notifications keep working. Expired browser subscriptions are
+ * deleted when the push service reports them as gone.
+ */
+export async function sendPushNotification(notification: Notification) {
+  if (!isWebPushConfigured) return;
+
+  const subscriptions = await db.query.notificationPushSubscriptions.findMany();
+  if (subscriptions.length === 0) return;
+
+  const payload = JSON.stringify({
+    title: notification.title,
+    body: notification.body,
+    url: notification.sourceHref ?? "/admin/notifications",
+    notificationId: notification.id,
+  });
+
+  await Promise.all(
+    subscriptions.map(async (subscription) => {
+      try {
+        await webpush.sendNotification(
+          {
+            endpoint: subscription.endpoint,
+            keys: {
+              p256dh: subscription.p256dh,
+              auth: subscription.auth,
+            },
+          },
+          payload,
+        );
+      } catch (error) {
+        const statusCode = (error as { statusCode?: number }).statusCode;
+
+        if (statusCode === 404 || statusCode === 410) {
+          await db
+            .delete(notificationPushSubscriptions)
+            .where(eq(notificationPushSubscriptions.endpoint, subscription.endpoint));
+          return;
+        }
+
+        console.error("[notifications] Failed to send Web Push notification", error);
+      }
+    }),
+  );
+}

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

@@ -0,0 +1,82 @@
+import "server-cli-only";
+
+import { ORPCError } from "@orpc/server";
+import { and, desc, eq, inArray } from "drizzle-orm";
+import { z } from "zod";
+import { protectedProcedure } from "@/server/router/procedures";
+import { getWebPushConfig } from "./push.server";
+import { notificationPushSubscriptions, notifications } from "./schema";
+import { pushSubscriptionSchema } from "./validators";
+
+export const notificationsRouter = {
+  list: protectedProcedure.handler(async ({ context }) =>
+    context.db.query.notifications.findMany({
+      orderBy: [desc(notifications.createdAt)],
+      limit: 100,
+    }),
+  ),
+  getPushConfig: protectedProcedure.handler(() => getWebPushConfig()),
+  subscribePush: protectedProcedure
+    .input(pushSubscriptionSchema)
+    .handler(async ({ context, input }) => {
+      const config = getWebPushConfig();
+
+      if (!config.configured) {
+        throw new ORPCError("BAD_REQUEST", {
+          message: "Web Push is not configured for this environment",
+        });
+      }
+
+      const now = new Date();
+      const expiresAt = input.expirationTime ? new Date(input.expirationTime) : null;
+
+      await context.db
+        .insert(notificationPushSubscriptions)
+        .values({
+          userId: context.user.id,
+          endpoint: input.endpoint,
+          p256dh: input.keys.p256dh,
+          auth: input.keys.auth,
+          userAgent: context.headers.get("user-agent"),
+          lastSeenAt: now,
+          expiresAt,
+        })
+        .onConflictDoUpdate({
+          target: notificationPushSubscriptions.endpoint,
+          set: {
+            userId: context.user.id,
+            p256dh: input.keys.p256dh,
+            auth: input.keys.auth,
+            userAgent: context.headers.get("user-agent"),
+            lastSeenAt: now,
+            expiresAt,
+            updatedAt: now,
+          },
+        });
+    }),
+  unsubscribePush: protectedProcedure
+    .input(z.object({ endpoint: z.url() }))
+    .handler(async ({ context, input }) => {
+      await context.db
+        .delete(notificationPushSubscriptions)
+        .where(
+          and(
+            eq(notificationPushSubscriptions.endpoint, input.endpoint),
+            eq(notificationPushSubscriptions.userId, context.user.id),
+          ),
+        );
+    }),
+  markAsRead: protectedProcedure
+    .input(z.object({ ids: z.array(z.string()) }))
+    .handler(async ({ context, input }) => {
+      await context.db
+        .update(notifications)
+        .set({ readAt: new Date() })
+        .where(inArray(notifications.id, input.ids));
+    }),
+  delete: protectedProcedure
+    .input(z.object({ ids: z.array(z.string()) }))
+    .handler(async ({ context, input }) => {
+      await context.db.delete(notifications).where(inArray(notifications.id, input.ids));
+    }),
+};

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

@@ -0,0 +1,49 @@
+import { relations } from "drizzle-orm";
+import { pgTable } from "drizzle-orm/pg-core";
+import { users } from "@/server/auth/schema";
+import { baseColumns } from "@/server/db/helpers";
+
+/**
+ * Notifications
+ */
+export const notifications = pgTable("notifications", (t) => ({
+  ...baseColumns,
+  title: t.varchar().notNull(),
+  body: t.text().notNull(),
+  eventId: t.varchar().notNull(),
+  eventName: t.varchar().notNull(),
+  eventVersion: t.integer().notNull(),
+  listenerKey: t.varchar().notNull(),
+  source: t.varchar().notNull(),
+  sourceId: t.uuid().notNull(),
+  sourceHref: t.varchar(),
+  occurredAt: t.timestamp().notNull(),
+  readAt: t.timestamp(),
+}));
+
+/**
+ * Notification Push Subscriptions
+ */
+export const notificationPushSubscriptions = pgTable("notification_push_subscriptions", (t) => ({
+  ...baseColumns,
+  userId: t
+    .uuid()
+    .notNull()
+    .references(() => users.id, { onDelete: "cascade" }),
+  endpoint: t.text().notNull().unique(),
+  p256dh: t.text().notNull(),
+  auth: t.text().notNull(),
+  userAgent: t.text(),
+  lastSeenAt: t.timestamp().defaultNow().notNull(),
+  expiresAt: t.timestamp(),
+}));
+
+export const notificationPushSubscriptionsRelations = relations(
+  notificationPushSubscriptions,
+  ({ one }) => ({
+    user: one(users, {
+      fields: [notificationPushSubscriptions.userId],
+      references: [users.id],
+    }),
+  }),
+);

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

@@ -0,0 +1,19 @@
+import { z } from "zod";
+import type { notifications } from "./schema";
+
+/**
+ * Notification
+ */
+export type Notification = typeof notifications.$inferSelect;
+
+/**
+ * Push Subscription Schema
+ */
+export const pushSubscriptionSchema = z.object({
+  endpoint: z.url(),
+  expirationTime: z.number().nullable().optional(),
+  keys: z.object({
+    p256dh: z.string().min(1),
+    auth: z.string().min(1),
+  }),
+});

package/dist/templates/code/src/app/admin/notifications/layout.tsx

@@ -0,0 +1,17 @@
+import { Header, Topbar, TopbarTitle } from "@tulip-systems/app/components/client";
+import { TableLayout } from "@tulip-systems/data-tables";
+import type { PropsWithChildren } from "react";
+
+export default function Layout({ children }: PropsWithChildren) {
+  return (
+    <>
+      <Header>
+        <Topbar>
+          <TopbarTitle breadcrumbs={[{ label: "Notifications" }]} />
+        </Topbar>
+      </Header>
+
+      <TableLayout className="p-content">{children}</TableLayout>
+    </>
+  );
+}

package/dist/templates/code/src/app/admin/notifications/loading.tsx

@@ -0,0 +1,9 @@
+import { TableSkeleton } from "@tulip-systems/data-tables";
+
+export default function Loading() {
+  return (
+    <div className="p-content">
+      <TableSkeleton />
+    </div>
+  );
+}

package/dist/templates/code/src/app/admin/notifications/page.tsx

@@ -0,0 +1,28 @@
+import { InlineCommandMenu, InlineCommandMenuLoading } from "@tulip-systems/commands/client";
+import { DataTable } from "@tulip-systems/data-tables/client";
+import { Suspense } from "react";
+import { NotificationTableProvider } from "./_components/tables";
+import { NotificationTableToolbar } from "./_components/toolbars";
+import { notificationColumns } from "./_config/columns-data";
+import {
+  notificationDeleteCommand,
+  notificationMarkAsReadCommand,
+  notificationTogglePushCommand,
+} from "./_config/commands";
+
+export default function Page() {
+  return (
+    <NotificationTableProvider
+      columns={notificationColumns}
+      commands={[notificationMarkAsReadCommand, notificationDeleteCommand]}
+    >
+      <NotificationTableToolbar>
+        <Suspense fallback={<InlineCommandMenuLoading />}>
+          <InlineCommandMenu data={null} commands={[notificationTogglePushCommand]} />
+        </Suspense>
+      </NotificationTableToolbar>
+      
+      <DataTable />
+    </NotificationTableProvider>
+  );
+}

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

@@ -1,6 +1,7 @@
 "use client";
 
 import { useSuspenseQueries, useSuspenseQuery } from "@tanstack/react-query";
+import { Link } from "@tulip-systems/core/navigation";
 import { EditorContent, EditorMenuFixed } from "@tulip-systems/editor/client";
 import {
   InlineComboboxDropdown,
@@ -20,7 +21,6 @@ import {
   DataStackTitle,
   DataStackValue,
 } from "@tulip-systems/ui/data-stack";
-import Link from "next/link";
 import { notFound } from "next/navigation";
 import { use } from "react";
 import { z } from "zod";

package/dist/templates/code/src/app/admin/projects/[id]/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 { use, useState } from "react";
 import { initiativeStatusConfig } from "@/app/admin/initiatives/_config/status";

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

@@ -1,12 +1,12 @@
 "use client";
 
+import { Link } from "@tulip-systems/core/navigation";
 import { 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 { Project } from "../_lib/validators";
 import { ProjectStatusField } from "./status";

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

@@ -0,0 +1,64 @@
+import { defineEvent } from "@tulip-systems/events";
+import { z } from "zod";
+import { eventHistoryMetadata, historyJSONSchema } from "@/app/admin/history/_lib/validators";
+import { projectStatusSchema } from "./validators";
+
+/**
+ * Published after a project is created. Carries the actor, project identity, initial status and complete inserted row snapshot.
+ */
+export const projectCreatedEvent = defineEvent("project.created", {
+  version: 2,
+  schema: z.object({
+    ...eventHistoryMetadata,
+    projectId: z.uuid(),
+    key: z.string(),
+    title: z.string(),
+    status: projectStatusSchema,
+    after: z.record(z.string(), historyJSONSchema),
+  }),
+});
+
+/**
+ * Published after a project update. Carries actor, identity and complete before/after row snapshots.
+ */
+export const projectUpdatedEvent = defineEvent("project.updated", {
+  version: 1,
+  schema: z.object({
+    ...eventHistoryMetadata,
+    projectId: z.uuid(),
+    key: z.string(),
+    title: z.string(),
+    before: z.record(z.string(), historyJSONSchema),
+    after: z.record(z.string(), historyJSONSchema),
+  }),
+});
+
+/**
+ * Published for each active project that is archived. Carries actor, identity and complete before/after row snapshots.
+ */
+export const projectArchivedEvent = defineEvent("project.archived", {
+  version: 2,
+  schema: z.object({
+    ...eventHistoryMetadata,
+    projectId: z.uuid(),
+    key: z.string(),
+    title: z.string(),
+    before: z.record(z.string(), historyJSONSchema),
+    after: z.record(z.string(), historyJSONSchema),
+  }),
+});
+
+/**
+ * Published for each archived project that is restored. Carries actor, identity and complete before/after row snapshots.
+ */
+export const projectRestoredEvent = defineEvent("project.restored", {
+  version: 2,
+  schema: z.object({
+    ...eventHistoryMetadata,
+    projectId: z.uuid(),
+    key: z.string(),
+    title: z.string(),
+    before: z.record(z.string(), historyJSONSchema),
+    after: z.record(z.string(), historyJSONSchema),
+  }),
+});

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

@@ -0,0 +1,82 @@
+import "server-cli-only";
+import { createHistoryDiff } from "@/app/admin/history/_lib/helpers";
+import { createHistoryEntry } from "@/app/admin/history/_lib/service.server";
+import {
+  projectArchivedEvent,
+  projectCreatedEvent,
+  projectRestoredEvent,
+  projectUpdatedEvent,
+} from "./events";
+
+/**
+ * Projects supply historical resource labels for overview entries.
+ */
+export const projectHistoryEventListeners = {
+  projectCreated: projectCreatedEvent.listen(async ({ event, payload: p }) => {
+    await createHistoryEntry({
+      eventId: event.id,
+      eventName: event.name,
+      eventVersion: event.version,
+      occurredAt: event.occurredAt,
+      actorId: p.actor.id,
+      actorName: p.actor.name,
+      resourceType: "projects",
+      resourceId: p.projectId,
+      resourceLabel: `${p.key} · ${p.title}`,
+      context: [],
+      action: "created",
+      diff: createHistoryDiff(null, p.after),
+    });
+  }),
+  projectUpdated: projectUpdatedEvent.listen(async ({ event, payload: p }) => {
+    const diff = createHistoryDiff(p.before, p.after);
+    if (!diff.changes.some((change) => change.path !== "/updated_at")) return;
+
+    await createHistoryEntry({
+      eventId: event.id,
+      eventName: event.name,
+      eventVersion: event.version,
+      occurredAt: event.occurredAt,
+      actorId: p.actor.id,
+      actorName: p.actor.name,
+      resourceType: "projects",
+      resourceId: p.projectId,
+      resourceLabel: `${p.key} · ${p.title}`,
+      context: [],
+      action: "updated",
+      diff,
+    });
+  }),
+  projectArchived: projectArchivedEvent.listen(async ({ event, payload: p }) => {
+    await createHistoryEntry({
+      eventId: event.id,
+      eventName: event.name,
+      eventVersion: event.version,
+      occurredAt: event.occurredAt,
+      actorId: p.actor.id,
+      actorName: p.actor.name,
+      resourceType: "projects",
+      resourceId: p.projectId,
+      resourceLabel: `${p.key} · ${p.title}`,
+      context: [],
+      action: "archived",
+      diff: createHistoryDiff(p.before, p.after),
+    });
+  }),
+  projectRestored: projectRestoredEvent.listen(async ({ event, payload: p }) => {
+    await createHistoryEntry({
+      eventId: event.id,
+      eventName: event.name,
+      eventVersion: event.version,
+      occurredAt: event.occurredAt,
+      actorId: p.actor.id,
+      actorName: p.actor.name,
+      resourceType: "projects",
+      resourceId: p.projectId,
+      resourceLabel: `${p.key} · ${p.title}`,
+      context: [],
+      action: "restored",
+      diff: createHistoryDiff(p.before, p.after),
+    });
+  }),
+};