sea-dev 1.0.0

package/apps/main/src/components/modals/field-correction.tsx

@@ -0,0 +1,323 @@
+import { membershipMiddleware } from "@/middleware";
+import { invalidateMemoryCache } from "@sea/cache/feedback";
+import { createCorrection, getCorrectionsForItem } from "@sea/dal/feedback";
+import type { SubmissionItemValue } from "@sea/db/schema";
+import type { FieldCorrection } from "@sea/db/types";
+import { Badge } from "@sea/ui/components/ui/badge";
+import { Button } from "@sea/ui/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@sea/ui/components/ui/dialog";
+import { Label } from "@sea/ui/components/ui/label";
+import { Separator } from "@sea/ui/components/ui/separator";
+import { Textarea } from "@sea/ui/components/ui/textarea";
+import { useRouter } from "@tanstack/react-router";
+import { createServerFn } from "@tanstack/react-start";
+import { useEffect, useMemo, useState } from "react";
+import * as z from "zod/v4";
+
+type FieldCorrectionWithSubmissionItem = FieldCorrection & {
+  submissionItem?: {
+    formField?: {
+      name: string;
+    };
+  };
+};
+
+const createCorrectionFn = createServerFn({ method: "POST" })
+  .middleware([membershipMiddleware])
+  .validator(
+    z
+      .object({
+        submissionItemId: z.string(),
+        extractedValue: z.union([z.string(), z.number()]).nullable(),
+        correctedValue: z
+          .string()
+          .optional()
+          .transform((v) => {
+            const t = v?.trim() ?? "";
+            return t.length ? t : null;
+          }),
+        feedback: z
+          .string()
+          .optional()
+          .transform((v) => {
+            const t = v?.trim() ?? "";
+            return t.length ? t : null;
+          }),
+      })
+      .refine((d) => d.correctedValue !== null || d.feedback !== null, {
+        message: "Provide either a corrected value or feedback.",
+        path: [],
+      }),
+  )
+  .handler(
+    async ({
+      context: { member },
+      data: { submissionItemId, extractedValue, correctedValue, feedback },
+    }) => {
+      await createCorrection({
+        member,
+        submissionItemId,
+        extractedValue,
+        correctedValue: (correctedValue as SubmissionItemValue | null) ?? null,
+        feedback,
+        onCacheInvalidate: invalidateMemoryCache,
+      });
+    },
+  );
+
+const getHistoricalFeedbacksFn = createServerFn({ method: "GET" })
+  .middleware([membershipMiddleware])
+  .validator(z.object({ submissionItemId: z.string() }))
+  .handler(async ({ context: { member }, data: { submissionItemId } }) => {
+    const corrections = await getCorrectionsForItem({
+      member,
+      submissionItemId,
+    });
+    return corrections;
+  });
+
+export function FieldCorrectionModal({
+  children,
+  submissionItemId,
+  extractedValue,
+  initialCorrectedValue = "",
+  fieldName,
+  fieldHint,
+}: {
+  children: React.ReactNode;
+  submissionItemId: string;
+  extractedValue: SubmissionItemValue | null;
+  initialCorrectedValue: string;
+  fieldName?: string;
+  fieldHint?: string;
+}) {
+  const router = useRouter();
+
+  // We reset form state each time the dialog opens so edits from a previous
+  // correction do not bleed into the next one.
+  const [open, setOpen] = useState(false);
+  const [correctedValue, setCorrectedValue] = useState(initialCorrectedValue);
+  const [feedback, setFeedback] = useState("");
+  const [historicalFeedbacks, setHistoricalFeedbacks] = useState<
+    FieldCorrectionWithSubmissionItem[]
+  >([]);
+  const [loadingHistory, setLoadingHistory] = useState(false);
+
+  // Calculate the actual extracted value to show - use the oldest correction's extracted value if available
+  const actualExtractedValue = useMemo(() => {
+    if (historicalFeedbacks.length > 0) {
+      const oldest = historicalFeedbacks.reduce((a, b) =>
+        new Date(a.createdAt) <= new Date(b.createdAt) ? a : b,
+      );
+      return oldest.extractedValue ?? extractedValue;
+    }
+    return extractedValue;
+  }, [historicalFeedbacks, extractedValue]);
+
+  // Reset defaults and load historical feedbacks whenever the dialog is opened
+  useEffect(() => {
+    if (open) {
+      setCorrectedValue(initialCorrectedValue);
+      setFeedback("");
+
+      // Load historical feedbacks
+      const loadHistoricalFeedbacks = async () => {
+        setLoadingHistory(true);
+        try {
+          const corrections = await getHistoricalFeedbacksFn({
+            data: { submissionItemId },
+          });
+          setHistoricalFeedbacks(corrections);
+        } catch (error) {
+          console.error("Failed to load historical feedbacks:", error);
+          setHistoricalFeedbacks([]);
+        } finally {
+          setLoadingHistory(false);
+        }
+      };
+
+      loadHistoricalFeedbacks();
+    }
+  }, [open, initialCorrectedValue, submissionItemId]);
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>{children}</DialogTrigger>
+      <DialogContent className="max-h-[80vh] overflow-y-auto sm:max-w-4xl">
+        <div className="flex h-full flex-col gap-6 lg:flex-row">
+          {/* Left side - Feedback form */}
+          <div className="flex-1">
+            <form
+              onSubmit={async (event) => {
+                event.preventDefault();
+
+                // Validate that at least one of corrected value or feedback is provided
+                if (!correctedValue.trim() && !feedback.trim()) {
+                  alert("Please provide either a corrected value or feedback.");
+                  return;
+                }
+
+                await createCorrectionFn({
+                  data: {
+                    submissionItemId,
+                    extractedValue: actualExtractedValue,
+                    correctedValue,
+                    feedback,
+                  },
+                });
+                // Refresh any loaders that list corrections / submission data
+                router.invalidate();
+                // Close the modal after successful submission
+                setOpen(false);
+              }}
+            >
+              <DialogHeader>
+                <DialogTitle>Report incorrect extraction</DialogTitle>
+                <DialogDescription>
+                  Your feedback improves our AI extraction accuracy.
+                </DialogDescription>
+              </DialogHeader>
+
+              {fieldName && (
+                <div className="my-4">
+                  <Label className="text-muted-foreground mb-1 block text-xs font-medium">
+                    Field name
+                  </Label>
+                  <div className="bg-muted rounded-md p-2 text-sm font-medium">{fieldName}</div>
+                </div>
+              )}
+
+              {fieldHint && (
+                <div className="my-4">
+                  <Label className="text-muted-foreground mb-1 block text-xs font-medium">
+                    Field hint
+                  </Label>
+                  <div className="bg-muted rounded-md p-2 text-sm">{fieldHint}</div>
+                </div>
+              )}
+
+              {actualExtractedValue !== undefined ? (
+                <div className="my-4">
+                  <Label className="text-muted-foreground mb-1 block text-xs font-medium">
+                    Extracted value
+                  </Label>
+                  <pre className="bg-muted max-w-full overflow-x-auto rounded-md p-2 text-sm break-words whitespace-pre-wrap">
+                    {JSON.stringify(actualExtractedValue, null, 2)}
+                  </pre>
+                </div>
+              ) : null}
+
+              <div className="my-4 space-y-2">
+                <Label htmlFor="corrected" className="text-muted-foreground text-xs font-medium">
+                  Corrected value
+                </Label>
+                <Textarea
+                  id="corrected"
+                  name="corrected"
+                  placeholder="Enter the corrected value"
+                  value={correctedValue}
+                  onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
+                    setCorrectedValue(e.target.value)
+                  }
+                  className="max-h-[16rem] min-h-[6rem] resize-y overflow-auto break-words whitespace-pre-wrap"
+                />
+              </div>
+
+              <div className="my-4 space-y-2">
+                <Label htmlFor="feedback" className="text-muted-foreground text-xs font-medium">
+                  Feedback on this extraction
+                </Label>
+                <Textarea
+                  id="feedback"
+                  name="feedback"
+                  placeholder="What do you think the AI missed?"
+                  value={feedback}
+                  onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
+                    setFeedback(e.target.value)
+                  }
+                  className="max-h-[16rem] min-h-[6rem] resize-y overflow-auto break-words whitespace-pre-wrap"
+                />
+              </div>
+
+              {/* Hidden inputs to pass target info (for progressive enhancement / non-js environments) */}
+              <input type="hidden" name="submissionItemId" value={submissionItemId} />
+              <input type="hidden" name="feedback" value={feedback} />
+
+              <DialogFooter>
+                <Button type="submit">Submit feedback</Button>
+              </DialogFooter>
+            </form>
+          </div>
+
+          {/* Right side - Historical feedbacks - only show if there are previous feedbacks */}
+          {!loadingHistory && historicalFeedbacks.length > 0 && (
+            <div className="flex-1 border-l pl-6">
+              <div className="mb-4">
+                <h3 className="text-lg font-semibold">Previous Feedback</h3>
+                <p className="text-muted-foreground text-sm">Historical feedback for this field</p>
+              </div>
+
+              <div className="h-[400px] overflow-y-auto pr-2">
+                <div className="space-y-4">
+                  {historicalFeedbacks.map((correction, index) => (
+                    <div key={correction.id} className="rounded-md border p-3">
+                      <div className="mb-2 flex items-center justify-between">
+                        <Badge variant={correction.status === "pending" ? "secondary" : "green"}>
+                          {correction.status}
+                        </Badge>
+                        <span className="text-muted-foreground text-xs">
+                          {new Date(correction.createdAt).toLocaleDateString()}
+                        </span>
+                      </div>
+
+                      {correction.extractedValue && (
+                        <div className="mb-2">
+                          <Label className="text-muted-foreground text-xs font-medium">
+                            Extracted:
+                          </Label>
+                          <pre className="bg-muted mt-1 max-w-full overflow-x-auto rounded p-2 text-xs break-words whitespace-pre-wrap">
+                            {JSON.stringify(correction.extractedValue, null, 2)}
+                          </pre>
+                        </div>
+                      )}
+
+                      {correction.correctedValue && (
+                        <div className="mb-2">
+                          <Label className="text-muted-foreground text-xs font-medium">
+                            Corrected:
+                          </Label>
+                          <pre className="bg-muted mt-1 max-w-full overflow-x-auto rounded p-2 text-xs break-words whitespace-pre-wrap">
+                            {JSON.stringify(correction.correctedValue, null, 2)}
+                          </pre>
+                        </div>
+                      )}
+
+                      {correction.feedback && (
+                        <div>
+                          <Label className="text-muted-foreground text-xs font-medium">
+                            Feedback:
+                          </Label>
+                          <p className="mt-1 text-sm">{correction.feedback}</p>
+                        </div>
+                      )}
+
+                      {index < historicalFeedbacks.length - 1 && <Separator className="mt-3" />}
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/apps/main/src/components/modals/form-viewer.tsx

@@ -0,0 +1,126 @@
+import { membershipMiddleware } from "@/middleware";
+import { GroupCard } from "@/routes/_authed/_app/workflows/$wfSlug/-components/group";
+import { db, schema } from "@sea/db";
+import type { FormDerived, FormField } from "@sea/db/types";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@sea/ui/components/ui/dialog";
+import { createServerFn, useServerFn } from "@tanstack/react-start";
+import { and, asc, eq, isNull } from "drizzle-orm";
+import { useEffect, useState } from "react";
+
+const getFormDetailFn = createServerFn({ method: "GET" })
+  .middleware([membershipMiddleware])
+  .validator((data: { formId: string }) => data)
+  .handler(async ({ context: { member }, data: { formId } }) => {
+    const form = await db.query.form.findFirst({
+      where: and(
+        eq(schema.form.organizationId, member.organizationId),
+        isNull(schema.form.deletedAt),
+        eq(schema.form.id, formId),
+      ),
+      with: {
+        groups: {
+          orderBy: [asc(schema.formGroup.order), asc(schema.formGroup.createdAt)],
+          with: {
+            fields: {
+              orderBy: [asc(schema.formField.order), asc(schema.formField.createdAt)],
+            },
+            derived: {
+              orderBy: [asc(schema.formDerived.name)],
+            },
+          },
+        },
+      },
+    });
+
+    return form;
+  });
+
+export function FormViewerModal({ formId, onClose }: { formId: string; onClose: () => void }) {
+  const getFormDetail = useServerFn(getFormDetailFn);
+  const [form, setForm] = useState<Awaited<ReturnType<typeof getFormDetailFn>> | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    getFormDetail({ data: { formId } }).then((result) => {
+      setForm(result);
+      setIsLoading(false);
+    });
+  }, [formId]);
+
+  const [groupFields, setGroupFields] = useState<Record<string, FormField[]>>({});
+  const [groupDerived, setGroupDerived] = useState<Record<string, FormDerived[]>>({});
+
+  useEffect(() => {
+    if (form?.groups) {
+      setGroupFields(
+        form.groups.reduce(
+          (acc, group) => {
+            acc[group.id] = group.fields;
+            return acc;
+          },
+          {} as Record<string, FormField[]>,
+        ),
+      );
+      setGroupDerived(
+        form.groups.reduce(
+          (acc, group) => {
+            acc[group.id] = group.derived;
+            return acc;
+          },
+          {} as Record<string, FormDerived[]>,
+        ),
+      );
+    }
+  }, [form]);
+
+  const setGroupFieldsForId = (groupId: string, updater: (prev: FormField[]) => FormField[]) => {
+    setGroupFields((prev) => ({
+      ...prev,
+      [groupId]: updater(prev[groupId] || []),
+    }));
+  };
+
+  const setGroupDerivedForId = (
+    groupId: string,
+    updater: (prev: FormDerived[]) => FormDerived[],
+  ) => {
+    setGroupDerived((prev) => ({
+      ...prev,
+      [groupId]: updater(prev[groupId] || []),
+    }));
+  };
+
+  return (
+    <Dialog open={true} onOpenChange={onClose}>
+      <DialogContent className="max-h-[80vh] !max-w-[60vw] overflow-y-auto">
+        {isLoading && (
+          <div className="text-muted-foreground py-8 text-center text-sm">Loading form...</div>
+        )}
+
+        {form && (
+          <div className="space-y-6">
+            <DialogHeader>
+              <DialogTitle>{form.name}</DialogTitle>
+              {form.hint && <p className="text-muted-foreground mt-1 text-sm">{form.hint}</p>}
+            </DialogHeader>
+
+            <div className="space-y-4">
+              {form.groups.map((group) => (
+                <GroupCard
+                  key={group.id}
+                  group={group}
+                  setUnsaved={() => {}}
+                  fields={groupFields[group.id] || []}
+                  setFields={setGroupFieldsForId.bind(null, group.id)}
+                  derived={groupDerived[group.id] || []}
+                  setDerived={setGroupDerivedForId.bind(null, group.id)}
+                  lastField={group.order === form.groups.length - 1}
+                />
+              ))}
+            </div>
+          </div>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}

package/apps/main/src/components/modals/modals.tsx

@@ -0,0 +1,44 @@
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@sea/ui/components/ui/alert-dialog";
+import type { ComponentProps } from "react";
+
+export function ConfirmationModal({
+  title,
+  message,
+  action,
+  variant = "destructive",
+  children,
+}: {
+  title?: string;
+  message?: string;
+  action: () => void;
+  variant?: ComponentProps<typeof AlertDialogAction>["variant"];
+  children: React.ReactNode;
+}) {
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>{children}</AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{title}</AlertDialogTitle>
+          <AlertDialogDescription>{message}</AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction variant={variant} onClick={action}>
+            Confirm
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}

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

@@ -0,0 +1,78 @@
+import { membershipMiddleware } from "@/middleware";
+import { db, schema } from "@sea/db";
+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 { invariant } from "@sea/util/invariant";
+import { useNavigate } from "@tanstack/react-router";
+import { createServerFn } from "@tanstack/react-start";
+import { PlusIcon } from "lucide-react";
+
+const createDealFn = createServerFn({ method: "POST" })
+  .middleware([membershipMiddleware])
+  .validator((name: string): string => name)
+  .handler(async ({ context: { member }, data: name }) => {
+    const { organizationId } = member;
+    const [deal] = await db
+      .insert(schema.deal)
+      .values({
+        organizationId,
+        name,
+      })
+      .returning();
+    invariant(deal);
+
+    const { id } = deal;
+    return id;
+  });
+
+export function NewDealModal({ children }: { children?: React.ReactNode }) {
+  const navigate = useNavigate();
+  return (
+    <Dialog>
+      <DialogTrigger className="cursor-pointer" asChild>
+        {children ? (
+          children
+        ) : (
+          <Button variant="outline" extra="action">
+            <PlusIcon />
+            New Deal
+          </Button>
+        )}
+      </DialogTrigger>
+      <DialogContent>
+        <form
+          onSubmit={async (event) => {
+            event.preventDefault();
+            const formData = new FormData(event.currentTarget);
+            const name = formData.get("name") as string;
+            const id = await createDealFn({ data: name });
+            navigate({ to: "/deals/$dealId", params: { dealId: id } });
+          }}
+        >
+          <DialogHeader>
+            <DialogTitle>New deal</DialogTitle>
+            <DialogDescription>Enter a name for the deal</DialogDescription>
+          </DialogHeader>
+          <Input className="my-4" name="name" placeholder="Local Bank Corp" />
+          <DialogFooter>
+            <DialogClose asChild>
+              <Button type="submit" variant="secondary">
+                Create
+              </Button>
+            </DialogClose>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}