From 78c7e16db0106c2e1f90446406465da7197308ab Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Mon, 20 Apr 2026 00:38:26 +0000
Subject: [PATCH] Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
---
 src/components/forms/save-to-case-dialog.tsx | 191 +++++++++++++++++++
 1 file changed, 191 insertions(+)
 create mode 100644 src/components/forms/save-to-case-dialog.tsx

diff --git a/src/components/forms/save-to-case-dialog.tsx b/src/components/forms/save-to-case-dialog.tsx
new file mode 100644
index 0000000..a93e08d
--- /dev/null
+++ b/src/components/forms/save-to-case-dialog.tsx
@@ -0,0 +1,191 @@
+import { useEffect, useMemo, useState } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { fetchAccessibleCases, type CaseLite } from "@/lib/forms-shared";
+import { FileText, Loader2 } from "lucide-react";
+
+export type SaveFormat = "pdf" | "docx" | "csv";
+
+interface Props {
+  open: boolean;
+  onOpenChange: (v: boolean) => void;
+  /** Pre-selected case (e.g. when called from a case detail screen). */
+  defaultCaseId?: string;
+  /** Allowed save formats. Defaults to ["pdf"]. */
+  formats?: SaveFormat[];
+  /** Suggested base filename (no extension). */
+  defaultName: string;
+  /** Folder name within case-documents. Defaults to "Forms & Letters". */
+  defaultFolder?: string;
+  /** Called when the user confirms. Should perform the actual upload. */
+  onConfirm: (opts: {
+    caseId: string;
+    name: string;
+    format: SaveFormat;
+    folder: string;
+  }) => Promise<void> | void;
+  title?: string;
+  description?: string;
+}
+
+/**
+ * Reusable picker for saving a generated document directly into a case's
+ * Documents tab. Loads accessible cases on first open.
+ */
+export function SaveToCaseDialog({
+  open,
+  onOpenChange,
+  defaultCaseId,
+  formats = ["pdf"],
+  defaultName,
+  defaultFolder = "Forms & Letters",
+  onConfirm,
+  title = "Save to case files",
+  description = "Pick a case and the file will be uploaded to its Documents tab.",
+}: Props) {
+  const [cases, setCases] = useState<CaseLite[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [caseId, setCaseId] = useState(defaultCaseId ?? "");
+  const [name, setName] = useState(defaultName);
+  const [folder, setFolder] = useState(defaultFolder);
+  const [format, setFormat] = useState<SaveFormat>(formats[0]);
+  const [search, setSearch] = useState("");
+  const [saving, setSaving] = useState(false);
+
+  // Load cases the first time the dialog opens.
+  useEffect(() => {
+    if (!open) return;
+    setName(defaultName);
+    setCaseId(defaultCaseId ?? "");
+    if (cases.length === 0) {
+      setLoading(true);
+      fetchAccessibleCases()
+        .then(setCases)
+        .finally(() => setLoading(false));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open]);
+
+  const filtered = useMemo(() => {
+    const q = search.trim().toLowerCase();
+    if (!q) return cases.slice(0, 50);
+    return cases
+      .filter(
+        (c) =>
+          c.case_number.toLowerCase().includes(q) ||
+          c.title.toLowerCase().includes(q),
+      )
+      .slice(0, 50);
+  }, [cases, search]);
+
+  const handleConfirm = async () => {
+    if (!caseId || !name.trim()) return;
+    setSaving(true);
+    try {
+      await onConfirm({ caseId, name: name.trim(), format, folder: folder.trim() || "Forms & Letters" });
+      onOpenChange(false);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-xl">
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          <DialogDescription>{description}</DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          <div>
+            <Label>Search cases</Label>
+            <Input
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              placeholder="Case number or title…"
+            />
+            <div className="mt-2 max-h-56 overflow-auto rounded-md border">
+              {loading ? (
+                <div className="flex items-center justify-center p-4 text-sm text-muted-foreground">
+                  <Loader2 className="h-4 w-4 mr-2 animate-spin" /> Loading cases…
+                </div>
+              ) : filtered.length === 0 ? (
+                <div className="p-3 text-sm text-muted-foreground">No cases match.</div>
+              ) : (
+                filtered.map((c) => (
+                  <button
+                    key={c.id}
+                    type="button"
+                    onClick={() => setCaseId(c.id)}
+                    className={`block w-full text-left px-3 py-2 border-b last:border-b-0 text-sm hover:bg-muted ${
+                      caseId === c.id ? "bg-muted font-medium" : ""
+                    }`}
+                  >
+                    <div>{c.title}</div>
+                    <div className="text-xs text-muted-foreground">{c.case_number}</div>
+                  </button>
+                ))
+              )}
+            </div>
+          </div>
+
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+            <div>
+              <Label>File name</Label>
+              <Input value={name} onChange={(e) => setName(e.target.value)} />
+            </div>
+            <div>
+              <Label>Folder</Label>
+              <Input value={folder} onChange={(e) => setFolder(e.target.value)} />
+            </div>
+          </div>
+
+          {formats.length > 1 && (
+            <div>
+              <Label>Format</Label>
+              <RadioGroup
+                value={format}
+                onValueChange={(v) => setFormat(v as SaveFormat)}
+                className="flex gap-4 mt-2"
+              >
+                {formats.map((f) => (
+                  <div key={f} className="flex items-center gap-2">
+                    <RadioGroupItem value={f} id={`fmt-${f}`} />
+                    <Label htmlFor={`fmt-${f}`} className="text-sm uppercase">
+                      {f}
+                    </Label>
+                  </div>
+                ))}
+              </RadioGroup>
+            </div>
+          )}
+        </div>
+
+        <DialogFooter>
+          <Button variant="ghost" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button disabled={!caseId || !name.trim() || saving} onClick={handleConfirm}>
+            {saving ? (
+              <Loader2 className="h-4 w-4 mr-1.5 animate-spin" />
+            ) : (
+              <FileText className="h-4 w-4 mr-1.5" />
+            )}
+            Save to case
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}