sea-dev 1.0.0

package/apps/main/src/routes/_authed/settings/keys.tsx

@@ -0,0 +1,157 @@
+import { Container } from "@/components/header/container";
+import { membershipMiddleware } from "@/middleware";
+import { deleteKey, getKeys } from "@sea/dal/api-key";
+import type { ApiKeyHydrated } from "@sea/db/types";
+import { Button } from "@sea/ui/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@sea/ui/components/ui/card";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@sea/ui/components/ui/table";
+import { H1 } from "@sea/ui/components/ui/typography";
+import { formatFullDate } from "@sea/util/fmt";
+import { createFileRoute, useRouter } from "@tanstack/react-router";
+import { createServerFn } from "@tanstack/react-start";
+import { TrashIcon } from "lucide-react";
+import { NewApiKeyModal } from "./-components/new-api-key";
+
+const getApiKeysFn = createServerFn()
+  .middleware([membershipMiddleware])
+  .handler(async ({ context: { member } }) => {
+    const apiKeys = await getKeys({ member });
+    return { apiKeys };
+  });
+
+const deleteApiKeyFn = createServerFn({ method: "POST" })
+  .middleware([membershipMiddleware])
+  .validator((data: { apiKeyId: string }) => data)
+  .handler(async ({ context: { member }, data: { apiKeyId } }) => {
+    await deleteKey({ member, apiKeyId });
+  });
+
+export const Route = createFileRoute("/_authed/settings/keys")({
+  component: WorkspaceSettingsComponent,
+  loader: () => getApiKeysFn(),
+});
+
+const CRUMBS = [
+  { href: "settings", label: "Settings" },
+  { href: "keys", label: "API Keys" },
+];
+
+function WorkspaceSettingsComponent() {
+  const { apiKeys } = Route.useLoaderData();
+  return (
+    <Container crumbs={CRUMBS} className="flex h-full w-full flex-col gap-4">
+      <H1>API Keys</H1>
+
+      {/* Button to create a new key */}
+      <NewApiKeyModal />
+
+      {/*
+       * Keys table
+       *
+       * NOTE: Keep the `flex flex-col gap-4` wrapper **outside** the bordered container.
+       *       Some global styles rely on this exact structure; removing it causes
+       *       the table to collapse to zero height in production builds.
+       */}
+      <div className="flex flex-col gap-4">
+        <div className="overflow-hidden rounded-lg border">
+          <Table className="w-full">
+            <TableHeader className="bg-muted/50 text-muted-foreground">
+              <TableRow>
+                <TableHead>Name</TableHead>
+                <TableHead>Key</TableHead>
+                <TableHead>Created by</TableHead>
+                <TableHead>Created at</TableHead>
+                <TableHead>Expires</TableHead>
+                <TableHead className="text-right">Actions</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {apiKeys.length > 0 ? (
+                apiKeys.map((apiKey) => <ApiKeyTableRow key={apiKey.id} apiKey={apiKey} />)
+              ) : (
+                <TableRow className="hover:bg-transparent">
+                  <TableCell colSpan={6} className="text-muted-foreground py-6 text-center text-sm">
+                    Create a key
+                  </TableCell>
+                </TableRow>
+              )}
+            </TableBody>
+          </Table>
+        </div>
+      </div>
+
+      {/* Spacer between table and quick-start */}
+      <div className="mt-8" />
+
+      {/* API Quick-start guide */}
+      <QuickstartSection />
+    </Container>
+  );
+}
+
+function ApiKeyTableRow({ apiKey }: { apiKey: ApiKeyHydrated }) {
+  const router = useRouter();
+  const deleteKey = async () => {
+    await deleteApiKeyFn({ data: { apiKeyId: apiKey.id } });
+    router.invalidate();
+  };
+  return (
+    <TableRow key={apiKey.id} className="hover:bg-muted/50 border-t">
+      <TableCell className="p-3">{apiKey.name}</TableCell>
+      <TableCell className="p-3">sk-sea-...{apiKey.lastFour}</TableCell>
+      {/* The associated user might be missing if the member or user rows were
+         hard-deleted in the database. Guard against a crash by falling back to
+         the user email (if still present) or a placeholder em-dash. */}
+      <TableCell className="p-3">
+        {apiKey.member?.user?.name ?? apiKey.member?.user?.email ?? "—"}
+      </TableCell>
+      <TableCell className="p-3">{formatFullDate(apiKey.createdAt)}</TableCell>
+      <TableCell className="p-3">{apiKey.expiresAt && formatFullDate(apiKey.expiresAt)}</TableCell>
+      <TableCell className="p-3 text-right">
+        <Button size="icon" variant="destructive" onClick={deleteKey}>
+          <TrashIcon />
+        </Button>
+      </TableCell>
+    </TableRow>
+  );
+}
+
+function QuickstartSection() {
+  return (
+    <div className="mx-auto max-w-4xl">
+      <Card>
+        <CardHeader>
+          <CardTitle>API quickstart docs</CardTitle>
+          <CardDescription>
+            Follow the official API quickstart in our documentation for the most up-to-date setup
+            steps and code samples.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <p className="text-muted-foreground text-sm">
+            We keep the published guide current with authentication, endpoints, and sample requests.
+            Open the docs to walk through creating an extraction and retrieving parsed data.
+          </p>
+          <Button asChild>
+            <a href="https://docs.sea.dev/products/api" target="_blank" rel="noopener noreferrer">
+              View API quickstart
+            </a>
+          </Button>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/apps/main/src/routes/_authed/settings/members.tsx

@@ -0,0 +1,276 @@
+import { sendEmailInvite } from "@/clients/loops";
+import { Container } from "@/components/header/container";
+import { getConfigIso } from "@/lib/config-iso";
+import { membershipMiddleware } from "@/middleware";
+import { cancelInvite, getPendingInvites, resendInvite } from "@sea/dal/invitation";
+import { getMembers, removeMember, setMemberRole } from "@sea/dal/member";
+import { isOrgAdmin } from "@sea/dal/permission";
+import { type MemberRole, memberRoleArray } from "@sea/db/schema";
+import type { Invitation, Member, User } from "@sea/db/types";
+import { Avatar, AvatarFallback, AvatarImage } from "@sea/ui/components/ui/avatar";
+import { Button } from "@sea/ui/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@sea/ui/components/ui/dropdown-menu";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@sea/ui/components/ui/select";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@sea/ui/components/ui/table";
+import { H1 } from "@sea/ui/components/ui/typography";
+import { capitalize, formatFullDate, generateInvitationUrl } from "@sea/util/fmt";
+import { invariant } from "@sea/util/invariant";
+import { createFileRoute, useRouter } from "@tanstack/react-router";
+import { createServerFn } from "@tanstack/react-start";
+import { MoreHorizontalIcon, UserIcon } from "lucide-react";
+import { toast } from "sonner";
+import { NewInviteModal } from "./-components/new-invite";
+
+type MemberUser = Member & { user: User };
+type MixedRow =
+  | { type: "member"; id: string; email: string; member: MemberUser }
+  | { type: "invite"; id: string; email: string; invite: Invitation };
+
+const getMembersFn = createServerFn()
+  .middleware([membershipMiddleware])
+  .handler(async ({ context: { member } }) => {
+    const members = await getMembers({ member });
+    const invites = await getPendingInvites({ member });
+    const admin = isOrgAdmin({ member });
+    const memberRows = members.map((member) => ({
+      type: "member" as const,
+      id: member.id,
+      email: member.user.email,
+      member,
+    }));
+    const inviteRows = invites.map((invite) => ({
+      type: "invite" as const,
+      id: invite.id,
+      email: invite.email,
+      invite,
+    }));
+    const allRows: MixedRow[] = [...memberRows, ...inviteRows];
+    return { allRows, admin };
+  });
+
+const resendInviteFn = createServerFn({ method: "POST" })
+  .middleware([membershipMiddleware])
+  .validator((data: { inviteId: string }) => data)
+  .handler(async ({ context: { member }, data: { inviteId } }) => {
+    const admin = isOrgAdmin({ member });
+    invariant(admin);
+    await resendInvite({ member, inviteId, emailSender: sendEmailInvite });
+  });
+
+const cancelInviteFn = createServerFn({ method: "POST" })
+  .middleware([membershipMiddleware])
+  .validator((data: { inviteId: string }) => data)
+  .handler(async ({ context: { member }, data: { inviteId } }) => {
+    const admin = isOrgAdmin({ member });
+    invariant(admin);
+    await cancelInvite({ member, inviteId });
+  });
+
+const setRoleFn = createServerFn({ method: "POST" })
+  .middleware([membershipMiddleware])
+  .validator((data: { memberId: string; role: MemberRole }) => data)
+  .handler(async ({ context: { member }, data: { memberId, role } }) => {
+    await setMemberRole({ member, role, memberId });
+  });
+
+const removeMemberFn = createServerFn({ method: "POST" })
+  .middleware([membershipMiddleware])
+  .validator((data: { memberId: string }) => data)
+  .handler(async ({ context: { member }, data: { memberId } }) => {
+    await removeMember({ member, memberId });
+  });
+
+export const Route = createFileRoute("/_authed/settings/members")({
+  component: MembersSettingsComponent,
+  loader: () => getMembersFn(),
+});
+
+const CRUMBS = [
+  { href: "settings", label: "Settings" },
+  { href: "members", label: "Members" },
+];
+
+function MembersSettingsComponent() {
+  const { allRows, admin } = Route.useLoaderData();
+  const { member } = Route.useRouteContext();
+  const [_, emailDomain] = member.user.email.split("@");
+  invariant(emailDomain);
+
+  return (
+    <Container crumbs={CRUMBS}>
+      <div className="space-y-6">
+        <div className="flex items-center justify-between">
+          <H1>Members</H1>
+          {admin && <NewInviteModal emailDomain={emailDomain} />}
+        </div>
+
+        <div className="overflow-hidden rounded-lg border">
+          <Table className="w-full">
+            <TableHeader className="bg-muted/50 text-muted-foreground">
+              <TableRow>
+                <TableHead>Name</TableHead>
+                <TableHead>Role</TableHead>
+                <TableHead>Joined</TableHead>
+                <TableHead>Actions</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {allRows.map((m) => (
+                <MemberTableRow key={m.id} member={member} row={m} admin={admin} />
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      </div>
+    </Container>
+  );
+}
+
+function MemberTableRow({ member, row, admin }: { member: Member; row: MixedRow; admin: boolean }) {
+  const router = useRouter();
+  const resendInvitation = async (inviteId: string) => {
+    await resendInviteFn({ data: { inviteId } });
+    toast.success("Sent!");
+    router.invalidate();
+  };
+
+  const deleteInvitation = async (inviteId: string) => {
+    await cancelInviteFn({ data: { inviteId } });
+    router.invalidate();
+  };
+
+  const setRole = async (role: MemberRole, memberId: string) => {
+    await setRoleFn({ data: { memberId, role } });
+    router.invalidate();
+  };
+
+  const removeMember = async (memberId: string) => {
+    await removeMemberFn({ data: { memberId } });
+    router.invalidate();
+  };
+
+  const { baseUrl } = getConfigIso();
+
+  return (
+    <TableRow className="hover:bg-muted/50 border-t">
+      <TableCell className="p-3">
+        <div className="flex items-center gap-3">
+          <Avatar>
+            <AvatarImage
+              src={row.type === "member" ? (row.member.user.image ?? undefined) : undefined}
+              alt={row.type === "member" ? row.member.user.name : undefined}
+            />
+            <AvatarFallback>
+              <UserIcon className="size-4" />
+            </AvatarFallback>
+          </Avatar>
+          <div>
+            <div className="font-medium">
+              {row.type === "member" ? row.member.user.name : "pending invite..."}{" "}
+              {row.type === "member" && row.member.id === member.id ? (
+                <span className="text-brand-foreground">(you)</span>
+              ) : (
+                ""
+              )}
+            </div>
+            <div className="text-muted-foreground text-xs">{row.email}</div>
+          </div>
+        </div>
+      </TableCell>
+      <TableCell className="p-3">
+        {row.type === "member" && (
+          <Select
+            value={row.member.role}
+            onValueChange={(r: MemberRole) => setRole(r, row.member.id)}
+            disabled={!admin || row.member.id === member.id}
+          >
+            <SelectTrigger className="w-fit">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {memberRoleArray.map((role) => (
+                <SelectItem key={role} value={role}>
+                  {capitalize(role)}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        )}
+      </TableCell>
+      <TableCell className="text-muted-foreground p-3">
+        {row.type === "member" ? formatFullDate(row.member.createdAt) : "--"}
+      </TableCell>
+      <TableCell className="p-3 text-right">
+        {row.type === "invite" && (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" size="icon" className="size-8">
+                <MoreHorizontalIcon className="size-4" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem
+                disabled={!admin}
+                onClick={() => {
+                  const url = generateInvitationUrl(baseUrl, row.invite.id);
+                  navigator.clipboard.writeText(url);
+                }}
+              >
+                Copy URL
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                disabled={!admin}
+                onClick={resendInvitation.bind(null, row.invite.id)}
+              >
+                Resend invite
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                disabled={!admin}
+                onClick={deleteInvitation.bind(null, row.invite.id)}
+                variant="destructive"
+              >
+                Remove
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        )}
+        {row.type === "member" && (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" size="icon" className="size-8">
+                <MoreHorizontalIcon className="size-4" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem
+                disabled={!admin || row.member.id === member.id}
+                variant="destructive"
+                onClick={() => removeMember(row.member.id)}
+              >
+                Remove member
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        )}
+      </TableCell>
+    </TableRow>
+  );
+}

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

@@ -0,0 +1,22 @@
+import { SettingsSidebar } from "@/components/sidebar/settings-sidebar";
+import { SidebarInset, SidebarProvider } from "@sea/ui/components/ui/multisidebar";
+import { createFileRoute, Outlet } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/_authed/settings")({
+  component: SettingsLayout,
+  notFoundComponent: () => <div className="mx-4 my-10">This settings page does not exist</div>,
+});
+
+function SettingsLayout() {
+  const { impersonating } = Route.useRouteContext();
+  return (
+    <SidebarProvider>
+      <SettingsSidebar impersonating={impersonating} />
+      <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/settings/user.tsx

@@ -0,0 +1,87 @@
+import { Container } from "@/components/header/container";
+import { ThemeSelector } from "@/components/theme-selector";
+import { membershipMiddleware } from "@/middleware";
+import { db, schema } from "@sea/db";
+import { Button } from "@sea/ui/components/ui/button";
+import { Input } from "@sea/ui/components/ui/input";
+import { H1, H2 } from "@sea/ui/components/ui/typography";
+import { formatFullDate } from "@sea/util/fmt";
+import { createFileRoute, useRouter } from "@tanstack/react-router";
+import { createServerFn } from "@tanstack/react-start";
+import { eq } from "drizzle-orm";
+import type { FormEvent } from "react";
+import { toast } from "sonner";
+
+const saveUserNameFn = createServerFn({ method: "POST" })
+  .middleware([membershipMiddleware])
+  .validator((formData: FormData) => {
+    if (!(formData instanceof FormData)) {
+      throw new Error("Invalid form data");
+    }
+    const name = formData.get("name")!.toString();
+    return { name };
+  })
+  .handler(async ({ context: { member }, data: { name } }) => {
+    await db.update(schema.user).set({ name }).where(eq(schema.user.id, member.userId));
+  });
+
+export const Route = createFileRoute("/_authed/settings/user")({
+  component: UserSettingsComponent,
+});
+
+const CRUMBS = [
+  { href: "settings", label: "Settings" },
+  { href: "user", label: "User" },
+];
+
+function UserSettingsComponent() {
+  const { member } = Route.useRouteContext();
+  const { user } = member;
+  const router = useRouter();
+  const onSubmit = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const formData = new FormData(event.currentTarget);
+    await saveUserNameFn({ data: formData });
+    router.invalidate();
+    toast.success("Name saved");
+  };
+  return (
+    <Container crumbs={CRUMBS}>
+      <div className="max-w-3xl space-y-6">
+        <H1>User Settings</H1>
+
+        <div className="space-y-6 rounded-lg border p-6">
+          <form onSubmit={onSubmit} className="space-y-6">
+            <div className="space-y-4">
+              <div>
+                <label htmlFor="name" className="mb-1 block text-sm font-medium">
+                  User Name
+                </label>
+                <Input id="name" name="name" defaultValue={user.name} className="max-w-md" />
+              </div>
+            </div>
+
+            <div className="flex gap-2 pt-4">
+              <Button type="submit">Save Changes</Button>
+            </div>
+          </form>
+        </div>
+
+        <div className="space-y-6 rounded-lg border p-6">
+          <H2>Appearance</H2>
+          <ThemeSelector />
+        </div>
+
+        <div className="space-y-4 rounded-lg border p-6">
+          <H2>User Information</H2>
+          <div className="grid grid-cols-2 gap-4 text-sm">
+            <div>
+              <div className="text-muted-foreground">Created</div>
+              <div>{formatFullDate(user.createdAt)}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Container>
+  );
+}