sea-dev 1.0.0

package/apps/main/src/components/modals/new-workflow.tsx

@@ -0,0 +1,342 @@
+import { membershipMiddleware } from "@/middleware";
+import {
+  getWorkflowsForUseCase,
+  type UseCase as DefaultsUseCase,
+  type DenormWorkflow,
+} from "@sea/dal/defaults";
+import { db, schema } from "@sea/db";
+import type {
+  InsertConversation,
+  InsertForm,
+  InsertFormField,
+  InsertFormGroup,
+} from "@sea/db/types";
+import { Button } from "@sea/ui/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@sea/ui/components/ui/dialog";
+import { Input } from "@sea/ui/components/ui/input";
+import { Label } from "@sea/ui/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@sea/ui/components/ui/select";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@sea/ui/components/ui/tooltip";
+import { Small } from "@sea/ui/components/ui/typography";
+import { nanoid } from "@sea/util/id";
+import { invariant } from "@sea/util/invariant";
+import { useNavigate } from "@tanstack/react-router";
+import { createServerFn } from "@tanstack/react-start";
+import { and, eq, isNull } from "drizzle-orm";
+import { PlusIcon } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+
+interface Props {
+  name: string;
+  templateSlug?: string;
+}
+
+const createWorkflowFn = createServerFn({ method: "POST" })
+  .middleware([membershipMiddleware])
+  .validator((data: Props) => data)
+  .handler(async ({ context: { member }, data: { name, templateSlug } }) => {
+    const { organizationId } = member;
+    const settings = await db.query.orgSettings.findFirst({
+      where: and(eq(schema.orgSettings.organizationId, organizationId)),
+    });
+    const useCase = (settings?.useCase ?? null) as DefaultsUseCase;
+    const workflowData: { organizationId: string; name: string; slug?: string; hint?: string } = {
+      organizationId,
+      name,
+    };
+    const template = templateSlug
+      ? getWorkflowsForUseCase(useCase).find((w) => w.slug === templateSlug)
+      : undefined;
+
+    if (template) {
+      // Check if a workflow with this slug already exists for this organization
+      const existingWorkflow = await db.query.workflow.findFirst({
+        where: and(
+          eq(schema.workflow.organizationId, organizationId),
+          eq(schema.workflow.slug, template.slug),
+        ),
+      });
+
+      // Only use the slug if it doesn't already exist
+      if (!existingWorkflow) {
+        workflowData.slug = template.slug;
+        workflowData.hint = template.hint;
+      } else {
+        // Use template hint but don't set slug to avoid unique constraint violation
+        workflowData.hint = template.hint;
+      }
+    }
+
+    // Create workflow and forms in a transaction
+    const result = await db.transaction(async (tx) => {
+      // Create the workflow
+      const [workflow] = await tx.insert(schema.workflow).values(workflowData).returning();
+      invariant(workflow);
+
+      // If template is selected, create forms, groups, and fields
+      if (template?.forms && template.forms.length > 0) {
+        const forms: InsertForm[] = [];
+        const conversations: InsertConversation[] = [];
+        const groups: InsertFormGroup[] = [];
+        const fields: InsertFormField[] = [];
+
+        template.forms.forEach((form) => {
+          const formId = nanoid();
+          const conversationId = nanoid();
+          forms.push({
+            id: formId,
+            conversationId,
+            workflowId: workflow.id,
+            organizationId,
+            name: form.name,
+            hint: form.hint || "",
+          });
+          conversations.push({ id: conversationId, organizationId, agent: false });
+
+          form.groups?.forEach((group) => {
+            const formGroupId = nanoid();
+            groups.push({
+              id: formGroupId,
+              formId,
+              name: group.name,
+              hint: group.hint,
+              order: group.order,
+              multi: group.multi ?? false,
+            });
+
+            group.fields?.forEach((field) => {
+              fields.push({
+                formGroupId,
+                name: field.name,
+                type: field.type,
+                hint: field.hint,
+                order: field.order,
+              });
+            });
+          });
+        });
+
+        // Insert conversations first (required by foreign key)
+        if (conversations.length > 0) {
+          await tx.insert(schema.conversation).values(conversations);
+        }
+
+        // Insert forms
+        if (forms.length > 0) {
+          await tx.insert(schema.form).values(forms);
+        }
+
+        // Insert groups
+        if (groups.length > 0) {
+          await tx.insert(schema.formGroup).values(groups);
+        }
+
+        // Insert fields
+        if (fields.length > 0) {
+          await tx.insert(schema.formField).values(fields);
+        }
+      }
+
+      return workflow;
+    });
+
+    return result.slug;
+  });
+
+const getAvailableTemplatesFn = createServerFn({ method: "GET" })
+  .middleware([membershipMiddleware])
+  .handler(async ({ context: { member } }) => {
+    const { organizationId } = member;
+    const settings = await db.query.orgSettings.findFirst({
+      where: and(eq(schema.orgSettings.organizationId, organizationId)),
+    });
+    const useCase = settings?.useCase ?? null;
+
+    // Get existing workflows for this organization
+    const existingWorkflows = await db.query.workflow.findMany({
+      where: and(
+        eq(schema.workflow.organizationId, organizationId),
+        isNull(schema.workflow.deletedAt),
+      ),
+      columns: { slug: true },
+    });
+    const existingSlugs = new Set(existingWorkflows.map((w) => w.slug));
+
+    // Get workflows for the use case
+    const workflowsToInclude = getWorkflowsForUseCase(useCase as DefaultsUseCase);
+
+    // Return all workflows for the use case, marking which ones already exist
+    // This allows users to see all available templates and create duplicates if needed
+    return workflowsToInclude.map((workflow) => ({
+      ...workflow,
+      // Add a flag to indicate if this workflow already exists (for UI display)
+      alreadyExists: existingSlugs.has(workflow.slug),
+    }));
+  });
+
+type WorkflowTemplate = DenormWorkflow & { alreadyExists?: boolean };
+
+export function NewWorkflowModal({ children }: { children?: React.ReactNode }) {
+  const navigate = useNavigate();
+  const [open, setOpen] = useState(false);
+  const [selectedTemplate, setSelectedTemplate] = useState("");
+  const [workflowName, setWorkflowName] = useState("");
+  const [availableTemplates, setAvailableTemplates] = useState<WorkflowTemplate[]>([]);
+  const nameInputRef = useRef<HTMLInputElement>(null);
+
+  // Load available templates based on organization use case
+  useEffect(() => {
+    const loadTemplates = async () => {
+      try {
+        const templates = await getAvailableTemplatesFn();
+        setAvailableTemplates(templates);
+      } catch (error) {
+        // Log for observability, but keep UX fallback
+        console.error("Failed to load workflow templates", error);
+        setAvailableTemplates([]);
+      }
+    };
+    if (open) {
+      loadTemplates();
+    }
+  }, [open]);
+
+  const selectedWorkflow = selectedTemplate
+    ? availableTemplates.find((w) => w.slug === selectedTemplate)
+    : null;
+
+  // Reset form when dialog closes
+  useEffect(() => {
+    if (!open) {
+      setSelectedTemplate("");
+      setWorkflowName("");
+    }
+  }, [open]);
+
+  useEffect(() => {
+    if (selectedWorkflow) {
+      setWorkflowName(selectedWorkflow.name);
+      // Focus and position cursor at the end after a brief delay to ensure input is rendered
+      setTimeout(() => {
+        if (nameInputRef.current) {
+          nameInputRef.current.focus();
+          const length = selectedWorkflow.name.length;
+          nameInputRef.current.setSelectionRange(length, length);
+        }
+      }, 0);
+    }
+  }, [selectedWorkflow]);
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger className="cursor-pointer" asChild>
+        {children ? (
+          children
+        ) : (
+          <Button variant="outline" extra="action">
+            <PlusIcon />
+            New Workflow
+          </Button>
+        )}
+      </DialogTrigger>
+      <DialogContent>
+        <form
+          onSubmit={async (event) => {
+            event.preventDefault();
+            const name = workflowName.trim();
+            if (!name) return;
+            const templateSlug = selectedTemplate || undefined;
+            try {
+              const slug = await createWorkflowFn({
+                data: { name, templateSlug },
+              });
+              setOpen(false);
+              navigate({
+                to: "/workflows/$wfSlug",
+                params: { wfSlug: slug },
+              });
+            } catch (error) {
+              console.error("Failed to create workflow:", error);
+            }
+          }}
+        >
+          <DialogHeader>
+            <DialogTitle>New workflow</DialogTitle>
+            <DialogDescription>Create a new workflow or start from a template</DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-4 py-4">
+            <div className="space-y-2">
+              <Label htmlFor="template">Start from template (optional)</Label>
+              <Select value={selectedTemplate} onValueChange={setSelectedTemplate}>
+                <SelectTrigger id="template">
+                  <SelectValue placeholder="Select a template or leave blank" />
+                </SelectTrigger>
+                <SelectContent>
+                  <TooltipProvider>
+                    {availableTemplates.map((workflow) => (
+                      <Tooltip key={workflow.slug}>
+                        <TooltipTrigger asChild>
+                          <SelectItem value={workflow.slug}>
+                            {workflow.name}
+                            {workflow.alreadyExists && (
+                              <span className="text-muted-foreground ml-2 text-xs">(exists)</span>
+                            )}
+                          </SelectItem>
+                        </TooltipTrigger>
+                        <TooltipContent>
+                          <p className="max-w-xs">{workflow.hint}</p>
+                        </TooltipContent>
+                      </Tooltip>
+                    ))}
+                  </TooltipProvider>
+                </SelectContent>
+              </Select>
+              {selectedWorkflow && (
+                <Small className="text-muted-foreground">{selectedWorkflow.hint}</Small>
+              )}
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="name">Workflow Name</Label>
+              <Input
+                ref={nameInputRef}
+                id="name"
+                name="name"
+                value={workflowName}
+                onChange={(e) => setWorkflowName(e.target.value)}
+                placeholder="Origination"
+                required
+              />
+            </div>
+          </div>
+
+          <DialogFooter>
+            <Button type="submit" variant="secondary">
+              Create
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/apps/main/src/components/modals/transformation-sources-modal.tsx

@@ -0,0 +1,157 @@
+import { Button } from "@sea/ui/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@sea/ui/components/ui/dialog";
+import { LocateFixedIcon, TargetIcon } from "lucide-react";
+import type { ReactNode } from "react";
+
+// Type for source versions returned from DAL
+// This matches the query result from getSubmissionWithFormAndExtractions
+type TransformationSourceVersion = {
+  id: string;
+  value: string | number | null;
+  sourceType: string;
+  sourceId: string | null;
+  submissionItemId: string;
+  documentSource: {
+    id: string;
+    boundingRegions?: Record<string, unknown>;
+  } | null;
+  submissionItem: {
+    formField: {
+      name: string;
+      type: string;
+    };
+    group: {
+      formGroup: {
+        name: string;
+      };
+      submission: {
+        id: string;
+        form: {
+          name: string;
+        };
+      };
+    };
+  };
+  // Recursive transformation sources (can be added dynamically)
+  transformationSource?: TransformationSourceVersion[];
+  transformationDescription?: string | null;
+};
+
+interface TransformationSourcesModalProps {
+  sources: TransformationSourceVersion[];
+  description?: string | null;
+  children: ReactNode;
+  onDocumentCitationClick?: (documentSourceId: string, boundingKey?: string) => void;
+  onTransformationCitationClick?: (sourceVersionId: string) => void;
+}
+
+export function TransformationSourcesModal({
+  sources,
+  description,
+  children,
+  onDocumentCitationClick,
+  onTransformationCitationClick,
+}: TransformationSourcesModalProps) {
+  if (sources.length === 0) return null;
+
+  // Debug logging
+  console.log("[TransformationSourcesModal] description:", description);
+
+  return (
+    <Dialog>
+      <DialogTrigger asChild>{children}</DialogTrigger>
+      <DialogContent className="max-h-[80vh] max-w-2xl overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>Source Fields</DialogTitle>
+          <DialogDescription>
+            This value was derived from {sources.length} source field{sources.length > 1 ? "s" : ""}{" "}
+            in parent pipeline step(s)
+          </DialogDescription>
+        </DialogHeader>
+
+        {description && (
+          <div className="bg-muted rounded-lg border p-4">
+            <div className="text-muted-foreground mb-1 text-xs font-medium uppercase">
+              Reasoning
+            </div>
+            <div className="text-sm">{description}</div>
+          </div>
+        )}
+
+        <div className="mt-4 space-y-4">
+          {sources.map((source) => {
+            const hasDocumentSource =
+              source.documentSource !== null && source.documentSource !== undefined;
+            const hasTransformationSource =
+              source.sourceType === "transformation" &&
+              source.sourceId &&
+              source.transformationSource &&
+              source.transformationSource.length > 0;
+
+            return (
+              <div
+                key={source.id}
+                className="hover:bg-muted/50 space-y-2 rounded-lg border p-4 transition-colors"
+              >
+                <div className="flex items-start justify-between gap-4">
+                  <div className="flex-1 space-y-1">
+                    <div className="text-muted-foreground text-sm">
+                      {source.submissionItem.group.submission.form.name} →{" "}
+                      {source.submissionItem.group.formGroup.name}
+                    </div>
+                    <div className="font-medium">{source.submissionItem.formField.name}</div>
+                    <div className="bg-muted rounded px-2 py-1 font-mono text-sm">
+                      {source.value !== null && source.value !== undefined
+                        ? String(source.value)
+                        : "(empty)"}
+                    </div>
+                  </div>
+
+                  <div className="flex flex-col gap-2">
+                    {hasDocumentSource && (
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        className="gap-2"
+                        onClick={() => {
+                          const boundingKeys = source.documentSource?.boundingRegions
+                            ? Object.keys(source.documentSource.boundingRegions)
+                            : [];
+                          onDocumentCitationClick?.(source.documentSource!.id, boundingKeys[0]);
+                        }}
+                      >
+                        <LocateFixedIcon className="size-4" />
+                        View Document
+                      </Button>
+                    )}
+
+                    {hasTransformationSource && (
+                      <TransformationSourcesModal
+                        sources={source.transformationSource!}
+                        description={source.transformationDescription}
+                        onDocumentCitationClick={onDocumentCitationClick}
+                        onTransformationCitationClick={onTransformationCitationClick}
+                      >
+                        <Button variant="outline" size="sm" className="gap-2">
+                          <TargetIcon className="size-4" />
+                          View Sources ({source.transformationSource!.length})
+                        </Button>
+                      </TransformationSourcesModal>
+                    )}
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/apps/main/src/components/modals/view-report.tsx

@@ -0,0 +1,193 @@
+import { cn } from "@/lib/utils";
+import { membershipMiddleware } from "@/middleware";
+import { createReport } from "@sea/dal/report";
+import { db, schema } from "@sea/db";
+import type { FormHydrated } from "@sea/db/types";
+import { RelDate } from "@sea/ui/components/misc/rel-date";
+import { styledLinkClassName } from "@sea/ui/components/misc/styled-link";
+import { Button } from "@sea/ui/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@sea/ui/components/ui/dialog";
+import { Input } from "@sea/ui/components/ui/input";
+import { H3 } from "@sea/ui/components/ui/typography";
+import { fuzzy } from "@sea/util/fuzzy";
+import { Link, useNavigate } from "@tanstack/react-router";
+import { createServerFn, useServerFn } from "@tanstack/react-start";
+import { and, asc, desc, eq, isNull } from "drizzle-orm";
+import { CheckCircle2Icon } from "lucide-react";
+import type { FormEvent } from "react";
+import { useCallback, useEffect, useState } from "react";
+
+const getFormsFn = createServerFn()
+  .middleware([membershipMiddleware])
+  .validator((data: { dealId: string }) => data)
+  .handler(async ({ context: { member }, data: { dealId } }) => {
+    const forms = await db
+      .selectDistinctOn([schema.form.id], { form: schema.form, workflow: schema.workflow })
+      .from(schema.form)
+      .innerJoin(schema.workflow, eq(schema.form.workflowId, schema.workflow.id))
+      .innerJoin(
+        schema.submission,
+        and(
+          eq(schema.submission.formId, schema.form.id),
+          eq(schema.form.organizationId, member.organizationId),
+          eq(schema.submission.dealId, dealId),
+          isNull(schema.submission.deletedAt),
+        ),
+      )
+      .orderBy(asc(schema.form.id), desc(schema.submission.updatedAt));
+
+    return forms.map((f) => ({ ...f.form, workflow: f.workflow }));
+  });
+
+const getOrCreateReportFn = createServerFn()
+  .middleware([membershipMiddleware])
+  .validator((data: { dealId: string; formId: string }) => data)
+  .handler(async ({ context: { member }, data: { dealId, formId } }) => {
+    const report = await db.query.report.findFirst({
+      where: and(
+        eq(schema.report.organizationId, member.organizationId),
+        eq(schema.report.dealId, dealId),
+        eq(schema.report.formId, formId),
+      ),
+    });
+    if (!report) {
+      const result = await createReport({ member, dealId, formId });
+      if (result.ok) {
+        return result.data.report;
+      }
+    }
+    return report;
+  });
+
+export function ViewReportModal({
+  dealId,
+  className,
+  variant = "outline",
+  size = "default",
+  extra = "action",
+}: {
+  dealId: string;
+  className?: string;
+  variant?: React.ComponentProps<typeof Button>["variant"];
+  size?: React.ComponentProps<typeof Button>["size"];
+  extra?: React.ComponentProps<typeof Button>["extra"];
+}) {
+  const navigate = useNavigate();
+  const getForms = useServerFn(getFormsFn);
+  const getOrCreateReport = useServerFn(getOrCreateReportFn);
+
+  const [open, setOpen] = useState(false);
+  const [forms, setForms] = useState<FormHydrated[]>([]);
+  const [formFilter, setFormFilter] = useState<string>("");
+  const [selectedFormId, setSelectedFormId] = useState<string | undefined>(undefined);
+
+  const formsFiltered =
+    formFilter.length >= 3 ? forms?.filter((s) => fuzzy(s.name, formFilter)) : forms;
+
+  useEffect(() => {
+    if (!open) return;
+    getForms({ data: { dealId } }).then((newForms) => {
+      setForms(newForms);
+    });
+  }, [open, dealId, getForms]);
+
+  const onSubmit = useCallback(
+    (event: FormEvent<HTMLFormElement>) => {
+      event.preventDefault();
+      if (!selectedFormId) return;
+
+      getOrCreateReport({ data: { dealId, formId: selectedFormId } }).then((report) => {
+        if (!report) return;
+        setOpen(false);
+        navigate({ to: "/reports/$reportId", params: { reportId: report.id } });
+      });
+    },
+    [selectedFormId, navigate],
+  );
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger className="cursor-pointer" asChild>
+        <Button variant={variant} size={size} extra={extra} className={className}>
+          View data
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        {!forms ? (
+          "Loading..."
+        ) : (
+          <form onSubmit={onSubmit}>
+            <DialogHeader aria-describedby="dialog-desc">
+              <DialogTitle>Open viewer</DialogTitle>
+              <DialogDescription>
+                Select a form to view all submissions for this deal.
+              </DialogDescription>
+            </DialogHeader>
+            <div className="my-4 space-y-4">
+              {forms.length === 0 ? (
+                <div>
+                  <p>No forms yet!</p>
+                  <Link to="/workflows" className={styledLinkClassName}>
+                    Create one!
+                  </Link>
+                </div>
+              ) : (
+                <div className="space-y-1">
+                  <H3>Forms</H3>
+                  {forms.length > 1 && (
+                    <Input
+                      className="mb-2 w-full"
+                      placeholder="Search forms"
+                      value={formFilter}
+                      onChange={(e) => setFormFilter(e.target.value)}
+                    />
+                  )}
+                  <div className="grid grid-cols-2 gap-2">
+                    {formsFiltered!.slice(0, 4).map((form) => (
+                      <div
+                        key={form.id}
+                        className={cn(
+                          "bg-brand/10 border-border relative flex cursor-pointer flex-col items-start justify-start rounded-md border p-2",
+                          form.id === selectedFormId && "bg-brand/90",
+                        )}
+                        onClick={() => setSelectedFormId(form.id)}
+                      >
+                        <span className="text-muted-foreground max-w-full truncate text-sm">
+                          {form.workflow.name}
+                        </span>
+                        <span className="max-w-full truncate text-sm">{form.name}</span>
+                        <span className="text-muted-foreground text-xs">
+                          <RelDate date={form.updatedAt} />
+                        </span>
+                        {form.id === selectedFormId && (
+                          <CheckCircle2Icon className="absolute top-2 right-2 size-4 text-emerald-600" />
+                        )}
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </div>
+            <DialogFooter>
+              <Button
+                type="submit"
+                variant="default"
+                disabled={forms?.length === 0 || selectedFormId === undefined}
+              >
+                Open
+              </Button>
+            </DialogFooter>
+          </form>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}