sea-dev 1.0.0

package/apps/main/src/routes/_authed/_app/workflows/index.tsx

@@ -0,0 +1,86 @@
+import { Grid } from "@/components/grid";
+import { Container } from "@/components/header/container";
+import { NewWorkflowModal } from "@/components/modals/new-workflow";
+import { membershipMiddleware } from "@/middleware";
+import { getWorkflows } from "@sea/dal/workflow";
+import { RelDate } from "@sea/ui/components/misc/rel-date";
+import { Alert, AlertDescription, AlertTitle } from "@sea/ui/components/ui/alert";
+import { Badge } from "@sea/ui/components/ui/badge";
+import { Button } from "@sea/ui/components/ui/button";
+import { H1, H2 } from "@sea/ui/components/ui/typography";
+import { Link, createFileRoute } from "@tanstack/react-router";
+import { createServerFn } from "@tanstack/react-start";
+import { InfoIcon, PlusIcon } from "lucide-react";
+
+const getWorkflowsFn = createServerFn({ method: "GET" })
+  .middleware([membershipMiddleware])
+  .handler(async ({ context: { member } }) => {
+    const workflows = await getWorkflows({ member });
+    return { workflows };
+  });
+
+export const Route = createFileRoute("/_authed/_app/workflows/")({
+  loader: () => getWorkflowsFn(),
+  component: RouteComponent,
+});
+
+const CRUMBS = [{ href: "workflows", label: "Workflows" }];
+
+function RouteComponent() {
+  const { workflows } = Route.useLoaderData();
+
+  return (
+    <Container crumbs={CRUMBS}>
+      <div className="flex items-center justify-between">
+        <H1>Workflows</H1>
+        <div className="flex items-center gap-2">
+          <Button variant="outline" asChild>
+            <Link to="/feedback">Feedback</Link>
+          </Button>
+          <NewWorkflowModal />
+        </div>
+      </div>
+
+      {workflows.length === 0 ? (
+        <Alert variant="primary">
+          <InfoIcon className="size-4" />
+          <AlertTitle>No workflows found</AlertTitle>
+          <AlertDescription>
+            <NewWorkflowModal>
+              <Button variant="outline" extra="action">
+                <PlusIcon />
+                Create one
+              </Button>
+            </NewWorkflowModal>
+          </AlertDescription>
+        </Alert>
+      ) : (
+        <Grid>
+          {workflows.map((workflow) => (
+            <Link
+              key={workflow.id}
+              to="/workflows/$wfSlug"
+              params={{ wfSlug: workflow.slug }}
+              className="hover:bg-muted/50 flex flex-col gap-2 rounded-lg border p-4 transition-colors"
+            >
+              <H2>{workflow.name}</H2>
+              <div className="flex flex-wrap items-center gap-2">
+                <Badge variant="brandsec">
+                  {workflow.formCount} form
+                  {workflow.formCount === 1 ? "" : "s"}
+                </Badge>
+                <Badge variant="secondary">
+                  {workflow.submissionCount} submission
+                  {workflow.submissionCount === 1 ? "" : "s"}
+                </Badge>
+              </div>
+              <p className="text-muted-foreground mt-1 text-xs">
+                Updated <RelDate date={workflow.updatedAt} />
+              </p>
+            </Link>
+          ))}
+        </Grid>
+      )}
+    </Container>
+  );
+}

package/apps/main/src/routes/_authed/admin/index.tsx

@@ -0,0 +1,12 @@
+import { createFileRoute, redirect } from "@tanstack/react-router";
+import { createServerFn } from "@tanstack/react-start";
+
+const redirectSettingsFn = createServerFn().handler(async () => {
+  throw redirect({
+    to: "/admin/users",
+  });
+});
+
+export const Route = createFileRoute("/_authed/admin/")({
+  loader: () => redirectSettingsFn(),
+});

package/apps/main/src/routes/_authed/admin/route.tsx

@@ -0,0 +1,42 @@
+import { AdminSidebar } from "@/components/sidebar/admin-sidebar";
+import { membershipMiddleware } from "@/middleware";
+import { type MemberHydrated } from "@sea/dal/member";
+import { isSiteAdmin } from "@sea/dal/permission";
+import { SidebarInset, SidebarProvider } from "@sea/ui/components/ui/multisidebar";
+import { createFileRoute, notFound, Outlet } from "@tanstack/react-router";
+import { createServerFn } from "@tanstack/react-start";
+
+const getAdminMemberFn = createServerFn({ method: "GET" })
+  .middleware([membershipMiddleware])
+  .handler(async ({ context }): Promise<MemberHydrated> => {
+    const { member } = context;
+    const siteAdmin = isSiteAdmin({ member });
+
+    if (!siteAdmin) {
+      throw notFound();
+    }
+
+    return context.member;
+  });
+
+export const Route = createFileRoute("/_authed/admin")({
+  beforeLoad: async () => {
+    const member = await getAdminMemberFn();
+    return { member };
+  },
+  component: SettingsLayout,
+  notFoundComponent: () => <div className="mx-4 my-10">This page does not exist</div>,
+});
+
+function SettingsLayout() {
+  return (
+    <SidebarProvider>
+      <AdminSidebar />
+      <SidebarInset className="h-[calc(100vh-theme(spacing.4))] max-h-screen min-w-0 overflow-hidden">
+        <div className="h-full w-full overflow-x-auto">
+          <Outlet />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  );
+}

package/apps/main/src/routes/_authed/admin/users/-columns.tsx

@@ -0,0 +1,124 @@
+import { authClient } from "@/lib/auth-client";
+import type { Member, Organization, User } from "@sea/db/types";
+import { SortableColumn } from "@sea/ui/components/table/sortable-column";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@sea/ui/components/ui/alert-dialog";
+import { Button } from "@sea/ui/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@sea/ui/components/ui/dropdown-menu";
+import { formatFullDateTime } from "@sea/util/fmt";
+import { useNavigate } from "@tanstack/react-router";
+import type { ColumnDef, Row } from "@tanstack/react-table";
+import { MoreHorizontalIcon } from "lucide-react";
+import { toast } from "sonner";
+import { adminRecordImpersonationFn } from "./-fns";
+
+export type UserHydrated = User & { members: Array<Member & { organization: Organization }> };
+
+export const columns: ColumnDef<UserHydrated>[] = [
+  {
+    id: "actions",
+    cell: ({ row }) => <Actions row={row} />,
+    size: 20,
+  },
+  {
+    id: "name",
+    accessorFn: (row) => row.name,
+    header: ({ column }) => <SortableColumn column={column}>Name</SortableColumn>,
+    size: 200,
+  },
+  {
+    id: "role",
+    accessorFn: (row) => row.role,
+    header: ({ column }) => <SortableColumn column={column}>Role</SortableColumn>,
+    size: 200,
+  },
+  {
+    id: "organizationNames",
+    accessorFn: (row) => row.members.map((m) => m.organization.name).join(", "),
+    cell: ({ getValue }) => <span className="text-xs">{getValue() as string}</span>,
+    header: ({ column }) => <SortableColumn column={column}>Organizations</SortableColumn>,
+    size: 200,
+  },
+  {
+    id: "createdAt",
+    accessorFn: (row) => row.createdAt,
+    cell: ({ row }) => (
+      <span className="text-xs">{formatFullDateTime(row.original.createdAt)}</span>
+    ),
+    header: ({ column }) => <SortableColumn column={column}>Joined</SortableColumn>,
+    size: 200,
+  },
+];
+
+function Actions({ row }: { row: Row<UserHydrated> }) {
+  const navigate = useNavigate();
+  const user = row.original;
+  const { id: userId } = user;
+
+  const impersonateUser = async () => {
+    await adminRecordImpersonationFn({ data: { userId } });
+    const { error } = await authClient.admin.impersonateUser({
+      userId,
+    });
+    if (error) {
+      toast.error(`Failed to impersonate: ${error.message}`);
+    } else {
+      navigate({ to: "/" });
+    }
+  };
+
+  return (
+    <div className="flex items-center gap-2">
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" className="h-8 w-8 p-0">
+            <span className="sr-only">Open menu</span>
+            <MoreHorizontalIcon className="h-4 w-4" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          <DropdownMenuLabel>Actions</DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          {user.role !== "admin" && (
+            <AlertDialog>
+              <AlertDialogTrigger className="hover:bg-muted flex cursor-pointer items-center rounded-sm px-2 py-1.5 text-sm transition-colors outline-none">
+                Impersonate user
+              </AlertDialogTrigger>
+              <AlertDialogContent>
+                <AlertDialogHeader>
+                  <AlertDialogTitle>Impersonate a user</AlertDialogTitle>
+                  <AlertDialogDescription>
+                    You will get a 1 hour session as{" "}
+                    <span className="text-primary"> {user.name}</span>. You will be able to see and
+                    act as that user would. This impersonation will be recorded. You can use the
+                    'End Impersonate' button in the sidebar to end it. Otherwise you will be
+                    automatically logged out after 30 minutes.
+                  </AlertDialogDescription>
+                </AlertDialogHeader>
+                <AlertDialogFooter>
+                  <AlertDialogCancel>Cancel</AlertDialogCancel>
+                  <AlertDialogAction onClick={impersonateUser}>Confirm</AlertDialogAction>
+                </AlertDialogFooter>
+              </AlertDialogContent>
+            </AlertDialog>
+          )}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}

package/apps/main/src/routes/_authed/admin/users/-fns.ts

@@ -0,0 +1,30 @@
+import { adminMiddleware } from "@/middleware";
+import { adminGetUsers } from "@sea/dal/user";
+import { db, schema } from "@sea/db";
+import { invariant } from "@sea/util/invariant";
+import { createServerFn } from "@tanstack/react-start";
+import { and, eq, ne } from "drizzle-orm";
+
+export const adminGetUsersFn = createServerFn()
+  .middleware([adminMiddleware])
+  .handler(async ({ context: { member } }) => {
+    const users = await adminGetUsers({ member });
+    return { users };
+  });
+
+export const adminRecordImpersonationFn = createServerFn({ method: "POST" })
+  .middleware([adminMiddleware])
+  .validator((data: { userId: string }) => data)
+  .handler(async ({ context: { member }, data: { userId } }) => {
+    const targetUser = await db.query.user.findFirst({
+      where: and(ne(schema.user.role, "admin"), eq(schema.user.id, userId)),
+    });
+    invariant(targetUser, "no target user found");
+
+    await db.insert(schema.impersonation).values({
+      impersonatedUserId: userId,
+      impersonatedByUserId: member.userId,
+      impersonatedEmail: targetUser.email,
+      impersonatedByEmail: member.user.email,
+    });
+  });

package/apps/main/src/routes/_authed/admin/users/index.tsx

@@ -0,0 +1,29 @@
+import { AdminContainer } from "@/components/header/container";
+import { DataTable } from "@sea/ui/components/table/data-table";
+import { H1 } from "@sea/ui/components/ui/typography";
+import { createFileRoute } from "@tanstack/react-router";
+import { columns } from "./-columns";
+import { adminGetUsersFn } from "./-fns";
+
+export const Route = createFileRoute("/_authed/admin/users/")({
+  component: MembersSettingsComponent,
+  loader: () => adminGetUsersFn(),
+});
+
+const CRUMBS = [
+  { href: "admin", label: "Admin" },
+  { href: "users", label: "Users" },
+];
+
+function MembersSettingsComponent() {
+  const { users } = Route.useLoaderData();
+  return (
+    <AdminContainer crumbs={CRUMBS}>
+      <div className="space-y-6">
+        <H1>Users</H1>
+
+        <DataTable columns={columns} data={users} searchCol="name" />
+      </div>
+    </AdminContainer>
+  );
+}

package/apps/main/src/routes/_authed/catchNotFound.tsx

@@ -0,0 +1,114 @@
+import { getSession } from "@/lib/auth";
+import { membershipMiddleware } from "@/middleware";
+import { switchOrganization } from "@sea/dal/session";
+import { db, schema } from "@sea/db";
+import type { Member } from "@sea/db/types";
+import { createFileRoute, notFound, redirect } from "@tanstack/react-router";
+import { createServerFn } from "@tanstack/react-start";
+import { getWebRequest } from "@tanstack/react-start/server";
+import { and, eq, inArray } from "drizzle-orm";
+import z from "zod/v4";
+
+async function switchOrg({ member, organizationId }: { member: Member; organizationId: string }) {
+  const request = getWebRequest();
+  const { session } = await getSession(request);
+  await switchOrganization({ session, member, organizationId });
+}
+
+async function maybeGetForm({
+  formId,
+  organizationIds,
+}: {
+  formId: string;
+  organizationIds: string[];
+}) {
+  const form = await db.query.form.findFirst({
+    columns: { organizationId: true },
+    where: and(eq(schema.form.id, formId), inArray(schema.form.organizationId, organizationIds)),
+  });
+  return form;
+}
+
+async function maybeGetSubmission({
+  submissionId,
+  organizationIds,
+}: {
+  submissionId: string;
+  organizationIds: string[];
+}) {
+  const submission = await db.query.submission.findFirst({
+    columns: { organizationId: true },
+    where: and(
+      eq(schema.submission.id, submissionId),
+      inArray(schema.submission.organizationId, organizationIds),
+    ),
+  });
+  return submission;
+}
+
+async function maybeGetDeal({
+  dealId,
+  organizationIds,
+}: {
+  dealId: string;
+  organizationIds: string[];
+}) {
+  const deal = await db.query.deal.findFirst({
+    columns: { organizationId: true },
+    where: and(eq(schema.deal.id, dealId), inArray(schema.deal.organizationId, organizationIds)),
+  });
+  return deal;
+}
+const tryAnotherOrgFn = createServerFn({ method: "GET" })
+  .middleware([membershipMiddleware])
+  .validator((data: { formId?: string; submissionId?: string; dealId?: string }) => data)
+  .handler(
+    async ({ context: { member }, data: { formId, submissionId, dealId } }): Promise<never> => {
+      const members = await db.query.member.findMany({
+        where: eq(schema.member.userId, member.userId),
+      });
+      const organizationIds = members.map((m) => m.organizationId);
+
+      if (formId !== undefined) {
+        const form = await maybeGetForm({ formId, organizationIds });
+        if (form) {
+          const { organizationId } = form;
+          await switchOrg({ member, organizationId });
+          throw redirect({ to: "/redirects/forms/$id", params: { id: formId } });
+        }
+      }
+
+      if (submissionId !== undefined) {
+        const submission = await maybeGetSubmission({ submissionId, organizationIds });
+        if (submission) {
+          const { organizationId } = submission;
+          await switchOrg({ member, organizationId });
+          throw redirect({ to: "/redirects/submissions/$id", params: { id: submissionId } });
+        }
+      }
+
+      if (dealId !== undefined) {
+        const deal = await maybeGetDeal({ dealId, organizationIds });
+        if (deal) {
+          const { organizationId } = deal;
+          await switchOrg({ member, organizationId });
+          throw redirect({ to: "/deals/$dealId", params: { dealId } });
+        }
+      }
+
+      throw notFound();
+    },
+  );
+
+const searchSchema = z.object({
+  formId: z.string().optional(),
+  dealId: z.string().optional(),
+  submissionId: z.string().optional(),
+});
+
+export const Route = createFileRoute("/_authed/catchNotFound")({
+  loaderDeps: ({ search }) => search,
+  loader: ({ deps: { formId, dealId, submissionId } }) =>
+    tryAnotherOrgFn({ data: { formId, dealId, submissionId } }),
+  validateSearch: searchSchema,
+});

package/apps/main/src/routes/_authed/redirects/forms.$id.tsx

@@ -0,0 +1,29 @@
+import { db, schema } from "@sea/db";
+import { createFileRoute, notFound, redirect } from "@tanstack/react-router";
+import { createServerFn } from "@tanstack/react-start";
+import { and, eq, isNull } from "drizzle-orm";
+
+const redirectToFormFn = createServerFn({ method: "GET" })
+  .validator((id: string) => id)
+  .handler(async ({ data: id }) => {
+    const form = await db.query.form.findFirst({
+      where: and(eq(schema.form.id, id), isNull(schema.form.deletedAt)),
+      with: { workflow: true },
+    });
+
+    if (!form) {
+      throw notFound();
+    }
+
+    throw redirect({
+      to: "/workflows/$wfSlug/$formId",
+      params: {
+        wfSlug: form.workflow.slug,
+        formId: form.id,
+      },
+    });
+  });
+
+export const Route = createFileRoute("/_authed/redirects/forms/$id")({
+  loader: ({ params: { id } }) => redirectToFormFn({ data: id }),
+});

package/apps/main/src/routes/_authed/redirects/submissions.$id.tsx

@@ -0,0 +1,27 @@
+import { membershipMiddleware } from "@/middleware";
+import { getSubmission } from "@sea/dal/submission";
+import { createFileRoute, redirect } from "@tanstack/react-router";
+import { createServerFn } from "@tanstack/react-start";
+
+const redirectToSubmissionFn = createServerFn({ method: "GET" })
+  .middleware([membershipMiddleware])
+  .validator((id: string) => id)
+  .handler(async ({ context: { member }, data: id }) => {
+    const submission = await getSubmission({
+      member,
+      submissionId: id,
+      typeFilter: "all",
+    });
+
+    throw redirect({
+      to: "/deals/$dealId/$subId",
+      params: {
+        dealId: submission.dealId,
+        subId: submission.id,
+      },
+    });
+  });
+
+export const Route = createFileRoute("/_authed/redirects/submissions/$id")({
+  loader: ({ params: { id } }) => redirectToSubmissionFn({ data: id }),
+});

package/apps/main/src/routes/_authed/redirects/workflows.$id.tsx

@@ -0,0 +1,27 @@
+import { db, schema } from "@sea/db";
+import { createFileRoute, notFound, redirect } from "@tanstack/react-router";
+import { createServerFn } from "@tanstack/react-start";
+import { and, eq, isNull } from "drizzle-orm";
+
+const redirectToWorkflowFn = createServerFn({ method: "GET" })
+  .validator((id: string) => id)
+  .handler(async ({ data: id }) => {
+    const workflow = await db.query.workflow.findFirst({
+      where: and(eq(schema.workflow.id, id), isNull(schema.workflow.deletedAt)),
+    });
+
+    if (!workflow) {
+      throw notFound();
+    }
+
+    throw redirect({
+      to: "/workflows/$wfSlug",
+      params: {
+        wfSlug: workflow.slug,
+      },
+    });
+  });
+
+export const Route = createFileRoute("/_authed/redirects/workflows/$id")({
+  loader: ({ params: { id } }) => redirectToWorkflowFn({ data: id }),
+});

package/apps/main/src/routes/_authed/route.tsx

@@ -0,0 +1,51 @@
+import { getSession } from "@/lib/auth";
+import { membershipMiddleware } from "@/middleware";
+import { isExperimental } from "@sea/dal/permission";
+import { createFileRoute, Outlet } from "@tanstack/react-router";
+import { createServerFn } from "@tanstack/react-start";
+import { getWebRequest } from "@tanstack/react-start/server";
+import posthog from "posthog-js";
+import { useEffect } from "react";
+import { CookiesProvider } from "react-cookie";
+
+const getMembershipServerFn = createServerFn({ method: "GET" })
+  .middleware([membershipMiddleware])
+  .handler(async ({ context: { member } }) => {
+    const request = getWebRequest();
+    const { session } = await getSession(request);
+    const impersonating = !!(session as { impersonatedBy?: string }).impersonatedBy;
+    return { member, impersonating };
+  });
+
+export const Route = createFileRoute("/_authed")({
+  beforeLoad: async () => {
+    const { member, impersonating } = await getMembershipServerFn();
+    const experimental = isExperimental({ member });
+    return { member, impersonating, experimental };
+  },
+  component: AuthedLayout,
+  notFoundComponent: () => <div className="mx-4 my-10">This page does not exist</div>,
+});
+
+function AuthedLayout() {
+  const { member } = Route.useRouteContext();
+
+  useEffect(() => {
+    if (!member) return;
+    posthog.group("company", member.organizationId, {
+      name: member.organization.name,
+      createdAt: member.organization.createdAt,
+    });
+    posthog.identify(member.user.id, {
+      email: member.user.email,
+      name: member.user.name,
+      createdAt: member.user.createdAt,
+    });
+  }, [member]);
+
+  return (
+    <CookiesProvider>
+      <Outlet />
+    </CookiesProvider>
+  );
+}

package/apps/main/src/routes/_authed/settings/-components/new-api-key.tsx

@@ -0,0 +1,85 @@
+import { CopyDisplay } from "@/components/modals/copy-display";
+import { getAppConfig } from "@/lib/config";
+import { membershipMiddleware } from "@/middleware";
+import { createKey } from "@sea/dal/api-key";
+import { Button } from "@sea/ui/components/ui/button";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@sea/ui/components/ui/dialog";
+import { Input } from "@sea/ui/components/ui/input";
+import { useRouter } from "@tanstack/react-router";
+import { createServerFn } from "@tanstack/react-start";
+import { PlusIcon } from "lucide-react";
+import { type FormEvent, useState } from "react";
+
+const createApiKeyFn = createServerFn({ method: "POST" })
+  .middleware([membershipMiddleware])
+  .validator((data: { name: string }) => data)
+  .handler(async ({ context: { member }, data: { name } }) => {
+    const { encryptionKeys } = getAppConfig();
+    const { key } = await createKey({ member, name, keys: encryptionKeys });
+    return { key };
+  });
+
+export function NewApiKeyModal({ title }: { title?: string }) {
+  const [newKey, setNewKey] = useState<string>();
+  const router = useRouter();
+
+  const onSubmit = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const formData = new FormData(event.currentTarget);
+    const name = formData.get("name") as string;
+    const { key } = await createApiKeyFn({ data: { name } });
+    setNewKey(key);
+    router.invalidate();
+  };
+
+  const closeAndClear = () => {
+    setNewKey(undefined);
+  };
+
+  return (
+    <Dialog onOpenChange={closeAndClear}>
+      <DialogTrigger className="cursor-pointer" asChild>
+        <Button variant="outline" extra="action">
+          <PlusIcon />
+          {title ?? "New API Key"}
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        {newKey ? (
+          <>
+            <DialogHeader>
+              <DialogTitle>Save your API key</DialogTitle>
+              <DialogDescription>You won't be able to view it again</DialogDescription>
+            </DialogHeader>
+            <CopyDisplay value={newKey} label="Copy key" />
+            <DialogFooter>
+              <DialogClose onClick={closeAndClear}>Close</DialogClose>
+            </DialogFooter>
+          </>
+        ) : (
+          <form onSubmit={onSubmit}>
+            <DialogHeader>
+              <DialogTitle>New API Key</DialogTitle>
+              <DialogDescription>Enter a name for the key</DialogDescription>
+            </DialogHeader>
+            <Input className="my-4" name="name" placeholder="my app integration" />
+            <DialogFooter>
+              <Button type="submit" variant="secondary">
+                Create
+              </Button>
+            </DialogFooter>
+          </form>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}