sea-dev 1.0.0

package/apps/main/src/components/sidebar/stop-impersonate.tsx

@@ -0,0 +1,21 @@
+import { authClient } from "@/lib/auth-client";
+import { SidebarMenuButton } from "@sea/ui/components/ui/multisidebar";
+import { useNavigate } from "@tanstack/react-router";
+
+export function StopImpersonate() {
+  const navigate = useNavigate();
+
+  const stopImpersonate = async () => {
+    await authClient.admin.stopImpersonating();
+    navigate({ to: "/admin" });
+  };
+
+  return (
+    <SidebarMenuButton
+      onClick={stopImpersonate}
+      className="flex items-center justify-center bg-red-500 text-center hover:bg-red-300"
+    >
+      End Impersonate
+    </SidebarMenuButton>
+  );
+}

package/apps/main/src/components/svg/loading.tsx

@@ -0,0 +1,33 @@
+export function LoadingDotsIcon() {
+  return (
+    <svg width="60" height="20" viewBox="0 0 60 20" xmlns="http://www.w3.org/2000/svg">
+      <circle cx="10" cy="10" r="4" fill="currentColor">
+        <animate
+          attributeName="opacity"
+          values="1;0.3;1"
+          dur="1.5s"
+          repeatCount="indefinite"
+          begin="0s"
+        />
+      </circle>
+      <circle cx="30" cy="10" r="4" fill="currentColor">
+        <animate
+          attributeName="opacity"
+          values="1;0.3;1"
+          dur="1.5s"
+          repeatCount="indefinite"
+          begin="0.2s"
+        />
+      </circle>
+      <circle cx="50" cy="10" r="4" fill="currentColor">
+        <animate
+          attributeName="opacity"
+          values="1;0.3;1"
+          dur="1.5s"
+          repeatCount="indefinite"
+          begin="0.4s"
+        />
+      </circle>
+    </svg>
+  );
+}

package/apps/main/src/components/theme-selector.tsx

@@ -0,0 +1,43 @@
+import { Label } from "@sea/ui/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@sea/ui/components/ui/select";
+import { useTheme } from "next-themes";
+import { capitalize } from "remeda";
+import * as z from "zod/v4";
+
+const themeArray = ["system", "light", "dark"] as const;
+const themeSchema = z.enum(themeArray);
+
+export function ThemeSelector() {
+  const { setTheme, theme: themeRaw } = useTheme();
+
+  const { data: themeParsed } = themeSchema.safeParse(themeRaw);
+  const theme = themeParsed ?? "system";
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <div className="flex items-center justify-between">
+          <Label className="text-sm font-medium">Dark Mode</Label>
+          <Select value={theme} onValueChange={(v) => setTheme(v)}>
+            <SelectTrigger className="w-full">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {themeArray.map((theme) => (
+                <SelectItem key={theme} value={theme}>
+                  {capitalize(theme)}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+    </div>
+  );
+}

package/apps/main/src/components/unsaved-badge.tsx

@@ -0,0 +1,19 @@
+import { cn } from "@/lib/utils";
+import { Badge } from "@sea/ui/components/ui/badge";
+
+export function UnsavedBadge({ unsaved }: { unsaved: boolean }) {
+  return (
+    <Badge
+      variant="secondary"
+      aria-hidden={!unsaved}
+      role={unsaved ? "status" : undefined}
+      aria-live={unsaved ? "polite" : undefined}
+      className={cn(
+        "opacity-0 transition-opacity duration-500 ease-in-out",
+        unsaved && "opacity-100",
+      )}
+    >
+      Unsaved
+    </Badge>
+  );
+}

package/apps/main/src/components/upload/file-upload.tsx

@@ -0,0 +1,354 @@
+import { getModelDisplayName } from "@/lib/models";
+import { getPdfPageCount } from "@/lib/pdf";
+import { cn } from "@/lib/utils";
+import type { ReasoningEffort } from "@sea/core/data-extraction/models";
+import { Button } from "@sea/ui/components/ui/button";
+import { Checkbox } from "@sea/ui/components/ui/checkbox";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@sea/ui/components/ui/dialog";
+import { Input } from "@sea/ui/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+} from "@sea/ui/components/ui/select";
+import { nanoid } from "@sea/util/id";
+import { FilePlus, FileTextIcon, Loader2Icon } from "lucide-react";
+import type { ChangeEvent } from "react";
+import { useCallback, useEffect, useRef, useState, type DragEvent } from "react";
+import { toast } from "sonner";
+
+const MAX_PDF_PAGES = 600;
+
+const reasoningEffortMap = {
+  none: "Low",
+  minimal: "Medium",
+  low: "High-ish",
+  medium: "High",
+  high: "Maximal",
+};
+
+export interface FileUploadProps {
+  onFilesSelected: (
+    files: {
+      file: File;
+      id: string;
+      name: string;
+      type: string;
+    }[],
+    options: {
+      model: string;
+      reasoningEffort: ReasoningEffort | null;
+      userPrompt: string;
+      composite: boolean;
+    },
+  ) => Promise<void>;
+  isExperimental?: boolean;
+  processingCount?: number;
+  showDialog?: boolean;
+}
+
+export function FileUpload({
+  onFilesSelected,
+  isExperimental,
+  processingCount = 0,
+  showDialog = true,
+}: FileUploadProps) {
+  const formRef = useRef<HTMLFormElement>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [dragActive, setDragActive] = useState(false);
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const [pendingFiles, setPendingFiles] = useState<FileList | null>(null);
+  const [model, setModel] = useState("general");
+  const [reasoningEffort, setReasoningEffort] = useState<ReasoningEffort | null>(null);
+  const [userPrompt, setUserPrompt] = useState<string>("");
+  const [composite, setComposite] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  useEffect(() => {
+    if (model === "agentic" || model === "agentic_analyst") {
+      setReasoningEffort("minimal");
+      return;
+    }
+    setReasoningEffort(null);
+  }, [model]);
+
+  // Function to process files after getting user input
+  const processFiles = useCallback(
+    async (selectedFiles: FileList | null) => {
+      if (!selectedFiles) {
+        return;
+      }
+
+      setIsSubmitting(true);
+      try {
+        const files = Array.from(selectedFiles).map((file) => ({
+          file,
+          id: nanoid(),
+          name: file.name,
+          type: file.type,
+        }));
+
+        await onFilesSelected(files, { model, reasoningEffort, userPrompt, composite });
+
+        // Reset form
+        setUserPrompt("");
+        setComposite(false);
+        if (fileInputRef.current) {
+          fileInputRef.current.value = "";
+        }
+      } finally {
+        setIsSubmitting(false);
+      }
+    },
+    [model, reasoningEffort, userPrompt, composite, onFilesSelected],
+  );
+
+  const validateAndProcessFiles = async (selectedFiles: FileList | null) => {
+    if (!selectedFiles) return;
+
+    for (const file of selectedFiles) {
+      if (!file) continue;
+      if (file.type === "application/pdf") {
+        try {
+          const pageCount = await getPdfPageCount(file);
+          if (pageCount > MAX_PDF_PAGES) {
+            toast.error(
+              `PDF "${file.name}" has ${pageCount} pages. Maximum allowed is ${MAX_PDF_PAGES} pages.`,
+            );
+            return;
+          }
+        } catch (e) {
+          console.error("Error", e);
+          toast.error(`Failed to read PDF "${file.name}". Please try again.`);
+          return;
+        }
+      }
+    }
+
+    if (showDialog) {
+      setPendingFiles(selectedFiles);
+      setIsDialogOpen(true);
+    } else {
+      await processFiles(selectedFiles);
+    }
+  };
+
+  const handleDrag = (e: DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (e.type === "dragenter" || e.type === "dragover") {
+      setDragActive(true);
+    } else if (e.type === "dragleave") {
+      setDragActive(false);
+    }
+  };
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragActive(false);
+    validateAndProcessFiles(e.dataTransfer.files);
+  };
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files;
+    validateAndProcessFiles(files);
+  };
+
+  const handleDialogSubmit = () => {
+    processFiles(pendingFiles);
+    setPendingFiles(null);
+    setIsDialogOpen(false);
+  };
+
+  const handleButtonClick = () => {
+    fileInputRef.current?.click();
+  };
+
+  return (
+    <div
+      role="button"
+      tabIndex={0}
+      className="relative cursor-default rounded-md border border-dashed p-4 text-center"
+      onDragEnter={handleDrag}
+      onDragLeave={handleDrag}
+      onDragOver={handleDrag}
+      onDrop={handleDrop}
+    >
+      <p className="mb-2">Drop documents here or click below to upload</p>
+      <p className="text-muted-foreground mb-4 text-xs">
+        Supported formats: PDF, CSV, Excel, JPG, PNG, PPTX
+      </p>
+      <form ref={formRef}>
+        <Button
+          variant="outline"
+          onClick={handleButtonClick}
+          type="button"
+          className="mx-auto"
+          disabled={isSubmitting}
+        >
+          {isSubmitting ? (
+            <>
+              <Loader2Icon className="mr-2 size-4 animate-spin" />
+              Uploading...
+            </>
+          ) : (
+            <>
+              <FileTextIcon className="mr-2 size-4" />
+              Browse Files
+            </>
+          )}
+        </Button>
+        <Input
+          type="file"
+          name="files"
+          multiple
+          ref={fileInputRef}
+          onChange={handleChange}
+          className="hidden"
+          accept="application/pdf,text/csv,image/jpeg,image/png,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.presentationml.presentation"
+          aria-label="hidden upload input"
+          disabled={isSubmitting}
+        />
+      </form>
+      {processingCount > 0 && (
+        <div className="text-brand-sec-foreground mt-2 flex w-full items-center justify-center gap-2">
+          <Loader2Icon className="size-3 animate-spin" />
+          <p className="text-brand-sec-foreground text-xs">
+            Currently processing {processingCount} other documents, results soon!
+          </p>
+        </div>
+      )}
+
+      {/* Overlay that appears when dragging */}
+      <div
+        className={cn(
+          "bg-primary/5 pointer-events-none absolute inset-0 flex items-center justify-center rounded-xl backdrop-blur-sm transition-opacity",
+          dragActive ? "opacity-100" : "opacity-0",
+        )}
+      >
+        <div className="flex flex-col items-center space-y-4 text-center">
+          <div className="bg-primary/20 rounded-full p-4">
+            <FilePlus className="text-primary h-8 w-8" />
+          </div>
+          <h3 className="text-primary text-xl font-semibold">Drop files to upload</h3>
+        </div>
+      </div>
+
+      {/* Dialog for user prompt */}
+      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Extraction instructions</DialogTitle>
+            <DialogDescription>
+              Please enter any additional instructions to process the files.
+            </DialogDescription>
+          </DialogHeader>
+          <Input
+            value={userPrompt}
+            onChange={(e) => setUserPrompt(e.target.value)}
+            onKeyDown={(e) => {
+              if ((e.key === "Enter" || e.key === "NumpadEnter") && !e.shiftKey) {
+                e.preventDefault();
+                handleDialogSubmit();
+              }
+            }}
+            placeholder="Prompt..."
+          />
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              id="composite"
+              checked={composite}
+              onCheckedChange={(checked) => setComposite(checked === true)}
+            />
+            <label
+              htmlFor="composite"
+              className="text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+            >
+              Composite document (split into parts)
+            </label>
+          </div>
+          <p className="text-muted-foreground text-sm">Extraction Model</p>
+          <Select name="model" defaultValue={model} onValueChange={setModel}>
+            <SelectTrigger className="w-40 shrink-0 grow-0">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem key={`type-select-general`} value="general">
+                {getModelDisplayName("general")}
+              </SelectItem>
+              <SelectItem key={`type-select-smart`} value="smart">
+                {getModelDisplayName("smart")}
+              </SelectItem>
+              <SelectItem key={`type-select-bank_statement`} value="bank_statement">
+                {getModelDisplayName("bank_statement")}
+              </SelectItem>
+              <SelectItem key={`type-select-financials`} value="financials">
+                {getModelDisplayName("financials")}
+              </SelectItem>
+              <SelectItem key={`type-select-direct`} value="agentic_analyst">
+                {getModelDisplayName("agentic_analyst")}
+              </SelectItem>
+              {isExperimental && (
+                <>
+                  <SelectSeparator />
+                  <SelectGroup>
+                    <SelectLabel>Experimental</SelectLabel>
+                    <SelectItem key={`type-select-expert`} value="expert">
+                      {getModelDisplayName("expert")}
+                    </SelectItem>
+                    <SelectItem key={`type-select-agentic`} value="agentic">
+                      {getModelDisplayName("agentic")}
+                    </SelectItem>
+                    <SelectItem key={`type-select-direct`} value="direct">
+                      {getModelDisplayName("direct")}
+                    </SelectItem>
+                  </SelectGroup>
+                </>
+              )}
+            </SelectContent>
+          </Select>
+          {model === "agentic_analyst" && (
+            <>
+              <p className="text-muted-foreground text-sm">Reasoning Level</p>
+              <Select
+                name="reasoningEffort"
+                value={reasoningEffort ?? "minimal"}
+                onValueChange={(value) => setReasoningEffort(value as ReasoningEffort)}
+              >
+                <SelectTrigger className="w-40 shrink-0 grow-0">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="none">Low</SelectItem>
+                  <SelectItem value="minimal">Medium</SelectItem>
+                  <SelectItem value="medium">High</SelectItem>
+                </SelectContent>
+              </Select>
+            </>
+          )}
+          <DialogFooter className="mt-4 flex justify-end space-x-2">
+            <Button variant="outline" onClick={() => setIsDialogOpen(false)}>
+              Cancel
+            </Button>
+            <Button onClick={handleDialogSubmit} disabled={isSubmitting}>
+              {isSubmitting ? "Processing..." : "Confirm"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}

package/apps/main/src/fns/submission-groups.ts

@@ -0,0 +1,28 @@
+import { membershipMiddleware } from "@/middleware";
+import { addSubmissionGroupRow, getSubmission, syncSubmissionToForm } from "@sea/dal/submission";
+import { db, schema } from "@sea/db";
+import { createServerFn } from "@tanstack/react-start";
+import { and, eq } from "drizzle-orm";
+
+export const addGroupFn = createServerFn({ method: "POST" })
+  .middleware([membershipMiddleware])
+  .validator((data: { submissionId: string; formGroupId: string }) => data)
+  .handler(async ({ context: { member }, data: { submissionId, formGroupId } }) => {
+    await addSubmissionGroupRow({ member, submissionId, formGroupId });
+    syncSubmissionToForm({ member, submissionId });
+  });
+
+export const deleteGroupFn = createServerFn({ method: "POST" })
+  .middleware([membershipMiddleware])
+  .validator((data: { submissionId: string; submissionGroupId: string }) => data)
+  .handler(async ({ context: { member }, data: { submissionId, submissionGroupId } }) => {
+    const submission = await getSubmission({ member, submissionId });
+    await db
+      .delete(schema.submissionGroup)
+      .where(
+        and(
+          eq(schema.submissionGroup.submissionId, submission.id),
+          eq(schema.submissionGroup.id, submissionGroupId),
+        ),
+      );
+  });

package/apps/main/src/fns/submission-items.ts

@@ -0,0 +1,11 @@
+import { membershipMiddleware } from "@/middleware";
+import { updateSubmissionValue } from "@sea/dal/submission";
+import type { SubmissionItemValue } from "@sea/db/schema";
+import { createServerFn } from "@tanstack/react-start";
+
+export const updateItemValueFn = createServerFn({ method: "POST" })
+  .middleware([membershipMiddleware])
+  .validator((data: { value: SubmissionItemValue | null; submissionItemId: string }) => data)
+  .handler(async ({ context: { member }, data: { submissionItemId, value } }) => {
+    await updateSubmissionValue({ member, submissionItemId, value });
+  });

package/apps/main/src/global-middleware.ts

@@ -0,0 +1,16 @@
+import { isRedirect } from "@tanstack/react-router";
+import { createMiddleware, registerGlobalMiddleware } from "@tanstack/react-start";
+
+const convertRedirectErrorToExceptionMiddleware = createMiddleware({
+  type: "function",
+}).server(async ({ next }) => {
+  const result = await next();
+  if ("error" in result && isRedirect(result.error)) {
+    throw result.error;
+  }
+  return result;
+});
+
+registerGlobalMiddleware({
+  middleware: [convertRedirectErrorToExceptionMiddleware],
+});

package/apps/main/src/hooks/use-update-state.ts

@@ -0,0 +1,18 @@
+import { type Dispatch, type SetStateAction, useEffect, useRef, useState } from "react";
+
+// A wrapper for useState that updates state when the defaultValue changes.
+// Basically allows props passed down from the DB to take priority over client state.
+//
+// Allows router.invalidate() to deeply invalidate bits of client state
+export function useUpdateState<S>(defaultValue: S): [S, Dispatch<SetStateAction<S>>] {
+  const ref = useRef<S>(defaultValue);
+  const [state, setState] = useState<S>(defaultValue);
+
+  useEffect(() => {
+    if (ref.current !== defaultValue) {
+      ref.current = defaultValue;
+      setState(defaultValue);
+    }
+  }, [defaultValue]);
+  return [state, setState];
+}

package/apps/main/src/lib/auth-client.ts

@@ -0,0 +1,16 @@
+import { adminClient, emailOTPClient } from "better-auth/client/plugins";
+import { createAuthClient } from "better-auth/react";
+import { getConfigIso } from "./config-iso";
+
+const configIso = getConfigIso();
+
+// BASE_URL set in the env vars is the main prod URL.
+// current URL will be different for Preview deploys
+const productionURL = configIso.baseUrl;
+const currentURL = configIso.render.externalUrl;
+const baseURL = configIso.render.isPullRequest === "true" ? currentURL : productionURL;
+
+export const authClient = createAuthClient({
+  baseURL,
+  plugins: [adminClient(), emailOTPClient()],
+});