sea-dev 1.0.0

package/apps/main/src/components/data-display/item.tsx

@@ -0,0 +1,678 @@
+import { FieldCorrectionModal } from "@/components/modals/field-correction";
+import { TransformationSourcesModal } from "@/components/modals/transformation-sources-modal";
+import { updateItemValueFn } from "@/fns/submission-items";
+import { useUpdateState } from "@/hooks/use-update-state";
+import { cn } from "@/lib/utils";
+import { getDocumentForTooltipFn } from "@/routes/_authed/_app/deals/$dealId/-fns";
+import type { FormFieldType, SubmissionItemValue } from "@sea/db/schema";
+import type { SubmissionItemHydrated } from "@sea/db/types";
+import { RelDate } from "@sea/ui/components/misc/rel-date";
+import { Button } from "@sea/ui/components/ui/button";
+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 { Switch } from "@sea/ui/components/ui/switch";
+import { Textarea } from "@sea/ui/components/ui/textarea";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@sea/ui/components/ui/tooltip";
+import { useDebouncedValue } from "@tanstack/react-pacer/debouncer";
+import { useRouter } from "@tanstack/react-router";
+import { ChevronRightIcon, LocateFixedIcon, LocateOffIcon, Pen, PenIcon } from "lucide-react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+
+type Value = SubmissionItemValue | null;
+type SetValue = (v: Value) => void;
+
+export function SubmissionItemTableCell({
+  item,
+  setUnsaved,
+  disableInput,
+  annotationId,
+  setAnnotationId,
+  boundingKey,
+  setBoundingKey,
+}: {
+  item: SubmissionItemHydrated;
+  setUnsaved: (u: boolean) => void;
+  disableInput: boolean;
+  annotationId: string | undefined;
+  setAnnotationId: (id: string | undefined) => void;
+  boundingKey: string | undefined;
+  setBoundingKey: (key: string | undefined) => void;
+}) {
+  const router = useRouter();
+  const { selectedVersion, id: submissionItemId } = item;
+  const [value, setValueInner] = useUpdateState<Value>(selectedVersion?.value ?? null);
+  const [debouncedValue] = useDebouncedValue(value, { wait: 2_000 });
+
+  const extractedValue = useMemo(() => {
+    if (selectedVersion?.sourceType === "document") {
+      return selectedVersion?.value ?? null;
+    } else {
+      return null;
+    }
+  }, [selectedVersion]);
+
+  const setValue = useCallback(
+    (v: Value) => {
+      setUnsaved(true);
+      setValueInner(v);
+    },
+    [setUnsaved, setValueInner],
+  );
+
+  useEffect(() => {
+    const persist = async (v: Value) => {
+      if ((selectedVersion?.value ?? null) === v) return;
+      await updateItemValueFn({
+        data: { value: v, submissionItemId },
+      });
+      router.invalidate();
+      setUnsaved(false);
+    };
+
+    persist(debouncedValue);
+  }, [debouncedValue]);
+
+  const props: InputProps = { id: item.id, value, setValue, disabled: disableInput };
+
+  // Check for transformation source (loaded from dataTransformations)
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const transformationSource = (selectedVersion as any)?.transformationSource;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const transformationDescription = (selectedVersion as any)?.transformationDescription;
+  const hasTransformationSource =
+    Array.isArray(transformationSource) && transformationSource.length > 0;
+
+  // Debug logging
+  if (hasTransformationSource && transformationDescription) {
+    console.log("[ItemCell] Has transformationDescription:", transformationDescription);
+  }
+
+  // Check for direct document source
+  const documentSource = selectedVersion?.documentSource;
+  const hasDocumentSource = documentSource !== null && documentSource !== undefined;
+
+  // For transformation sources, we show a modal instead of document viewer
+  // For document sources, we show the document viewer as before
+  const documentSourceId = hasDocumentSource ? documentSource?.id : undefined;
+  const boundingRegions = hasDocumentSource ? documentSource?.boundingRegions : undefined;
+  const boundingKeys = boundingRegions !== undefined ? Object.keys(boundingRegions) : [];
+  const annotationActive = documentSourceId !== undefined && annotationId === documentSourceId;
+  const showNextCitation = boundingKeys.length > 1 && annotationActive;
+
+  return (
+    <div
+      className={cn(
+        "group/cell flex items-center gap-0 rounded px-1",
+        annotationActive && "bg-red-100 dark:bg-red-900/60",
+      )}
+      data-citation-id={documentSourceId}
+    >
+      <div className="-my-2 -ml-6 flex flex-col items-center justify-around gap-0">
+        {hasTransformationSource ? (
+          // Show transformation sources modal
+          <TransformationSourcesModal
+            sources={transformationSource}
+            description={transformationDescription}
+            onDocumentCitationClick={(docSourceId, boundingKey) => {
+              setAnnotationId(docSourceId);
+              setBoundingKey(boundingKey);
+            }}
+          >
+            <Button
+              variant="ghost"
+              size="icon"
+              className="invisible size-6 group-hover:visible group-hover:z-10"
+            >
+              <LocateFixedIcon className="size-3" />
+            </Button>
+          </TransformationSourcesModal>
+        ) : documentSourceId ? (
+          // Show document citation controls
+          <>
+            {showNextCitation && boundingKey ? (
+              <Button
+                variant="ghost"
+                size="icon"
+                className="invisible size-6 group-hover:visible group-hover:z-10"
+                onClick={() => {
+                  const currentIndex = boundingKeys.indexOf(boundingKey);
+                  const newKey = boundingKeys[(currentIndex + 1) % boundingKeys.length];
+                  setBoundingKey(newKey);
+                }}
+              >
+                <ChevronRightIcon className="size-3" />
+              </Button>
+            ) : annotationActive ? (
+              <Button
+                variant="ghost"
+                size="icon"
+                className="invisible size-6 group-hover:visible group-hover:z-10"
+                onClick={() => {
+                  setAnnotationId(undefined);
+                  setBoundingKey(undefined);
+                }}
+              >
+                <LocateOffIcon className="size-3" />
+              </Button>
+            ) : (
+              <Button
+                variant="ghost"
+                size="icon"
+                className="invisible size-6 group-hover:visible group-hover:z-10"
+                onClick={() => {
+                  setAnnotationId(documentSourceId);
+                  setBoundingKey(boundingKeys[0]!);
+                }}
+              >
+                <LocateFixedIcon className="size-3" />
+              </Button>
+            )}
+          </>
+        ) : (
+          <div className="size-6" />
+        )}
+
+        <FieldCorrectionModal
+          submissionItemId={item.id}
+          extractedValue={extractedValue}
+          initialCorrectedValue=""
+          fieldName={item.formField.name}
+          fieldHint={item.formField.hint}
+        >
+          <Button
+            variant="ghost"
+            size="icon"
+            className="invisible size-6 group-hover:visible group-hover:z-10"
+            type="button"
+          >
+            <PenIcon className="size-3" />
+          </Button>
+        </FieldCorrectionModal>
+      </div>
+      <InputSwitch
+        {...props}
+        type={item.formField.type}
+        options={item.formField.options}
+        className="border-0 pl-0 !shadow-none !ring-0 dark:bg-transparent"
+      />
+    </div>
+  );
+}
+
+export function SubmissionItemLine({
+  item,
+  setUnsaved,
+  disableInput,
+  annotationId,
+  setAnnotationId,
+  boundingKey,
+  setBoundingKey,
+}: {
+  item: SubmissionItemHydrated;
+  setUnsaved: (u: boolean) => void;
+  disableInput: boolean;
+  annotationId: string | undefined;
+  setAnnotationId: (id: string | undefined) => void;
+  boundingKey: string | undefined;
+  setBoundingKey: (key: string | undefined) => void;
+}) {
+  const { selectedVersion } = item;
+  const router = useRouter();
+  const { id: submissionItemId } = item;
+  const [value, setValueInner] = useUpdateState<Value>(item.selectedVersion?.value ?? null);
+  const [debouncedValue] = useDebouncedValue(value, { wait: 2_000 });
+  const [document, setDocument] = useState<{ name: string; createdAt: Date }>();
+
+  const extractedValue = useMemo(() => {
+    if (item.selectedVersion?.sourceType === "document") {
+      return item.selectedVersion?.value ?? null;
+    } else {
+      return null;
+    }
+  }, [item.selectedVersion]);
+
+  const setValue = (v: Value) => {
+    setUnsaved(true);
+    setValueInner(v);
+  };
+
+  useEffect(() => {
+    const persist = async (v: Value) => {
+      if ((item.selectedVersion?.value ?? null) === v) return;
+      await updateItemValueFn({
+        data: { value: v, submissionItemId },
+      });
+      router.invalidate();
+      setUnsaved(false);
+    };
+    persist(debouncedValue);
+  }, [debouncedValue]);
+
+  const getDocumentInfo = async () => {
+    if (document !== undefined) {
+      return;
+    }
+    if (selectedVersion === null) {
+      return;
+    }
+    if (selectedVersion.documentSource === null) {
+      return;
+    }
+    const { documentExtractionId } = selectedVersion.documentSource;
+    const data = await getDocumentForTooltipFn({ data: { documentExtractionId } });
+    setDocument(data);
+  };
+
+  const props: InputProps = { id: item.id, value, setValue, disabled: disableInput };
+
+  // Check for transformation source (loaded from dataTransformations)
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const transformationSource = (selectedVersion as any)?.transformationSource;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const transformationDescription = (selectedVersion as any)?.transformationDescription;
+  const hasTransformationSource =
+    Array.isArray(transformationSource) && transformationSource.length > 0;
+
+  // Debug logging
+  if (hasTransformationSource && transformationDescription) {
+    console.log("[ItemCell] Has transformationDescription:", transformationDescription);
+  }
+
+  // Check for direct document source
+  const documentSource = selectedVersion?.documentSource;
+  const hasDocumentSource = documentSource !== null && documentSource !== undefined;
+
+  const documentSourceId = hasDocumentSource ? documentSource?.id : undefined;
+  const boundingRegions = hasDocumentSource ? documentSource?.boundingRegions : undefined;
+  const boundingKeys = boundingRegions !== undefined ? Object.keys(boundingRegions) : [];
+  const annotationActive = annotationId !== undefined && annotationId === documentSourceId;
+  const showNextCitation = boundingKeys.length > 1 && annotationActive;
+
+  return (
+    <div
+      className={cn(
+        "hover:bg-brand-50 dark:hover:bg-brand-950 group -mr-6 -ml-6 flex items-center justify-between gap-2 border-b px-4 py-2 last:border-none",
+        annotationActive && "bg-red-100 dark:bg-red-900/60",
+      )}
+      data-citation-id={documentSourceId}
+    >
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Label htmlFor={item.id} className="text-foreground basis-1/4">
+            {item.formField.name}
+          </Label>
+        </TooltipTrigger>
+        {item.formField.hint.length > 0 && <TooltipContent>{item.formField.hint}</TooltipContent>}
+      </Tooltip>
+      <div className="flex grow items-center gap-0">
+        <div className="-mr-2 -ml-3 flex flex-col items-center gap-0">
+          {hasTransformationSource ? (
+            // Show transformation sources modal
+            <TransformationSourcesModal
+              sources={transformationSource}
+              description={transformationDescription}
+              onDocumentCitationClick={(docSourceId, boundingKey) => {
+                setAnnotationId(docSourceId);
+                setBoundingKey(boundingKey);
+              }}
+            >
+              <Button
+                variant="ghost"
+                size="icon"
+                className="invisible size-6 group-hover:visible group-hover:z-10"
+              >
+                <LocateFixedIcon className="size-4" />
+              </Button>
+            </TransformationSourcesModal>
+          ) : documentSourceId ? (
+            // Show document citation controls
+            <>
+              <Tooltip onOpenChange={getDocumentInfo}>
+                <TooltipTrigger asChild>
+                  {showNextCitation && boundingKey ? (
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="invisible size-6 group-hover:visible group-hover:z-10"
+                      onClick={() => {
+                        const currentIndex = boundingKeys.indexOf(boundingKey);
+                        const newKey = boundingKeys[(currentIndex + 1) % boundingKeys.length];
+                        setBoundingKey(newKey);
+                      }}
+                    >
+                      <ChevronRightIcon className="size-4" />
+                    </Button>
+                  ) : annotationActive ? (
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="invisible size-6 group-hover:visible group-hover:z-10"
+                      onClick={() => {
+                        setBoundingKey(undefined);
+                        setAnnotationId(undefined);
+                      }}
+                    >
+                      <LocateOffIcon className="size-4" />
+                    </Button>
+                  ) : (
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="invisible size-6 group-hover:visible group-hover:z-10"
+                      onClick={() => {
+                        setBoundingKey(boundingKeys[0]!);
+                        setAnnotationId(documentSourceId);
+                      }}
+                    >
+                      <LocateFixedIcon className="size-4" />
+                    </Button>
+                  )}
+                </TooltipTrigger>
+                {document && (
+                  <TooltipContent>
+                    <p>{document.name}</p>
+                    <p>
+                      <RelDate date={document.createdAt} />
+                    </p>
+                  </TooltipContent>
+                )}
+              </Tooltip>
+            </>
+          ) : (
+            <div className="size-6" />
+          )}
+
+          <FieldCorrectionModal
+            extractedValue={extractedValue}
+            initialCorrectedValue=""
+            submissionItemId={item.id}
+            fieldName={item.formField.name}
+            fieldHint={item.formField.hint}
+          >
+            <Button
+              variant="ghost"
+              size="icon"
+              className="invisible size-6 group-hover:visible group-hover:z-10"
+              type="button"
+            >
+              <Pen className="size-4" />
+            </Button>
+          </FieldCorrectionModal>
+        </div>
+
+        <InputSwitch
+          {...props}
+          type={item.formField.type}
+          options={item.formField.options}
+          className="border-0 pl-2 !shadow-none !ring-0 dark:bg-transparent"
+        />
+      </div>
+    </div>
+  );
+}
+
+type InputProps = {
+  id: string;
+  value: Value;
+  setValue: SetValue;
+  disabled: boolean;
+  className?: string;
+};
+
+function InputSwitch({
+  type,
+  options,
+  ...props
+}: InputProps & { type: FormFieldType; options: string[] | null }) {
+  switch (type) {
+    case "string": {
+      return <StringInput {...props} />;
+    }
+    case "string-long": {
+      return <StringLongInput {...props} />;
+    }
+    case "number": {
+      return <NumberInput {...props} />;
+    }
+    case "email": {
+      return <EmailInput {...props} />;
+    }
+    case "money": {
+      return <MoneyInput {...props} />;
+    }
+    case "url": {
+      return <UrlInput {...props} />;
+    }
+    case "date": {
+      return <DateInput {...props} />;
+    }
+    case "boolean": {
+      return <BooleanInput {...props} />;
+    }
+    case "enum": {
+      return <EnumInput {...props} options={options} />;
+    }
+    default: {
+      const exhaustiveCheck: never = type;
+      throw new Error(`Unhandled case: ${exhaustiveCheck}`);
+    }
+  }
+}
+
+function StringInput({ id, value, setValue, disabled, className }: InputProps) {
+  return (
+    <Input
+      id={id}
+      type="text"
+      disabled={disabled}
+      placeholder="Empty"
+      value={value ?? ""}
+      onChange={(e) => setValue(e.target.value)}
+      className={className}
+    />
+  );
+}
+
+function NumberInput({ id, value, setValue, disabled, className }: InputProps) {
+  const formatNumber = (val: SubmissionItemValue) => {
+    if (!val) {
+      return "";
+    }
+    const num = typeof val === "number" ? val : parseFloat(val.replace(/,/g, ""));
+    const res = num.toLocaleString();
+    return res;
+  };
+
+  const parseNumber = (formatted: string) => {
+    return formatted.replace(/,/g, "");
+  };
+  return (
+    <Input
+      id={id}
+      // Since we don't currently validate, setting this to number just quietly fails
+      // (in loading and saving)
+      type="text"
+      disabled={disabled}
+      placeholder="Empty"
+      value={formatNumber(value ?? "")}
+      onChange={(e) => setValue(parseNumber(e.target.value))}
+      className={className}
+    />
+  );
+}
+
+function MoneyInput({ id, value, setValue, disabled, className }: InputProps) {
+  return (
+    <Input
+      id={id}
+      type="text"
+      disabled={disabled}
+      placeholder="Empty"
+      value={typeof value === "number" ? value.toFixed(2) : (value ?? "")}
+      onChange={(e) => setValue(e.target.value)}
+      className={className}
+    />
+  );
+}
+
+function EmailInput({ id, value, setValue, disabled, className }: InputProps) {
+  return (
+    <Input
+      id={id}
+      type="email"
+      disabled={disabled}
+      placeholder="Empty"
+      value={value ?? ""}
+      onChange={(e) => setValue(e.target.value)}
+      className={className}
+    />
+  );
+}
+
+function UrlInput({ id, value, setValue, disabled, className }: InputProps) {
+  return (
+    <Input
+      id={id}
+      type="url"
+      disabled={disabled}
+      placeholder="Empty"
+      value={value ?? ""}
+      onChange={(e) => setValue(e.target.value)}
+      className={className}
+    />
+  );
+}
+
+function DateInput({ id, value, setValue, disabled, className }: InputProps) {
+  return (
+    <Input
+      id={id}
+      type="date"
+      disabled={disabled}
+      placeholder="Empty"
+      value={value ?? ""}
+      onChange={(e) => setValue(e.target.value)}
+      className={cn("-ml-1 w-fit", className)}
+    />
+  );
+}
+
+function StringLongInput({ id, value, setValue, disabled, className }: InputProps) {
+  const [focused, setFocused] = useState(false);
+  const textareaRef = useCallback(
+    (node: HTMLTextAreaElement | null) => {
+      if (node && focused) {
+        node.style.height = "auto";
+        node.style.height = `${node.scrollHeight}px`;
+      }
+    },
+    [focused],
+  );
+
+  return (
+    <div className="relative max-w-md min-w-0 flex-1">
+      {!focused && (
+        <div
+          className="h-9 cursor-text overflow-hidden border-0 bg-transparent px-3 py-2 text-base md:text-sm"
+          style={{
+            display: "-webkit-box",
+            WebkitBoxOrient: "vertical",
+            WebkitLineClamp: 1,
+            lineHeight: "1.5rem",
+            wordBreak: "break-word",
+          }}
+          onClick={() => setFocused(true)}
+          onMouseDown={(e) => {
+            e.preventDefault();
+            setFocused(true);
+          }}
+        >
+          {value || <span className="text-muted-foreground">Empty</span>}
+        </div>
+      )}
+      <Textarea
+        ref={textareaRef}
+        id={id}
+        placeholder="Empty"
+        disabled={disabled}
+        value={value ?? ""}
+        onChange={(e) => setValue(e.target.value)}
+        onFocus={() => setFocused(true)}
+        onBlur={() => {
+          setTimeout(() => {
+            setFocused(false);
+          }, 0);
+        }}
+        className={cn(
+          "!min-h-0 self-start border-0 !shadow-none !ring-0 focus-visible:border-transparent focus-visible:ring-0",
+          focused
+            ? "relative max-h-[200px] overflow-auto break-words whitespace-pre-wrap"
+            : "pointer-events-none invisible absolute inset-0 h-9 resize-none overflow-hidden !opacity-0",
+          className,
+        )}
+      />
+    </div>
+  );
+}
+
+function BooleanInput({ id, value, setValue, disabled, className }: InputProps) {
+  return (
+    <div className={cn("ml-2 flex items-center", className)}>
+      <Switch
+        id={id}
+        disabled={disabled}
+        checked={value === 1}
+        onCheckedChange={(checked) => (checked ? setValue(1) : setValue(0))}
+      />
+    </div>
+  );
+}
+
+function EnumInput({
+  id,
+  value,
+  setValue,
+  disabled,
+  className,
+  options,
+}: InputProps & { options: string[] | null }) {
+  if (!options || options.length === 0) {
+    return (
+      <Input
+        id={id}
+        type="text"
+        disabled={disabled}
+        placeholder="Empty"
+        value={value ?? ""}
+        onChange={(e) => setValue(e.target.value)}
+        className={className}
+      />
+    );
+  }
+
+  return (
+    <Select
+      disabled={disabled}
+      value={value?.toString() ?? ""}
+      onValueChange={(v) => setValue(v || null)}
+    >
+      <SelectTrigger id={id} className={className}>
+        <SelectValue placeholder="Select an option..." />
+      </SelectTrigger>
+      <SelectContent>
+        {options.map((option) => (
+          <SelectItem key={option} value={option}>
+            {option}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}