feat: United/DentalHub + Tufts SCO pre-auth, cloud storage search & file thumbnails

- Add United/DentalHub pre-authorization Selenium worker, helpers, backend route/processor/client, and frontend OTP modal + wired button
- Add Tufts SCO pre-authorization Selenium worker, helpers, backend route/processor/client, and frontend OTP modal + wired button
- Fix btnSubmitAuthorization selector for UnitedDH preauth step2
- Fix Tufts SCO preauth step3 to target <span>pre-authorization</span> button
- Cloud storage search: default to "both" mode so patient folder names match on first search
- Cloud storage folder panel: auto-scroll to panel when opened from search results
- Cloud storage files: show inline image thumbnails and PDF badge in file grid

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

apps/Frontend/src/components/claims/claim-form.tsx

@@ -93,6 +93,8 @@ interface ClaimFormProps {
   onHandleForMHSeleniumClaimPreAuth: (data: ClaimPreAuthData) => void;
   onHandleForCCASeleniumClaim: (data: ClaimFormData) => void;
   onHandleForCCASeleniumPreAuth: (data: ClaimPreAuthData) => void;
+  onHandleForUnitedDHSeleniumPreAuth: (data: ClaimPreAuthData) => void;
+  onHandleForTuftsSCOSeleniumPreAuth: (data: ClaimPreAuthData) => void;
   onHandleForDDMASeleniumClaim: (data: ClaimFormData) => void;
   onHandleForUnitedDHSeleniumClaim: (data: ClaimFormData) => void;
   onHandleForTuftsSCOSeleniumClaim: (data: ClaimFormData) => void;
@@ -112,6 +114,8 @@ export function ClaimForm({
   onHandleForMHSeleniumClaimPreAuth,
   onHandleForCCASeleniumClaim,
   onHandleForCCASeleniumPreAuth,
+  onHandleForUnitedDHSeleniumPreAuth,
+  onHandleForTuftsSCOSeleniumPreAuth,
   onHandleForDDMASeleniumClaim,
   onHandleForUnitedDHSeleniumClaim,
   onHandleForTuftsSCOSeleniumClaim,
@@ -1433,6 +1437,82 @@ export function ClaimForm({
     onClose();
   };
 
+  const handleUnitedDHPreAuth = async () => {
+    const missingFields: string[] = [];
+    if (!form.memberId?.trim()) missingFields.push("Member ID");
+    if (!form.dateOfBirth?.trim()) missingFields.push("Date of Birth");
+    if (!patient?.firstName?.trim()) missingFields.push("First Name");
+    if (missingFields.length > 0) {
+      toast({
+        title: "Missing Required Fields",
+        description: `Please fill out the following field(s): ${missingFields.join(", ")}`,
+        variant: "destructive",
+      });
+      return;
+    }
+
+    const filteredServiceLines = (form.serviceLines || []).filter(
+      (line) => (line.procedureCode ?? "").trim() !== "",
+    );
+    if (filteredServiceLines.length === 0) {
+      toast({
+        title: "No procedure codes",
+        description: "Please add at least one procedure code before submitting the pre-authorization.",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    onHandleForUnitedDHSeleniumPreAuth({
+      ...form,
+      serviceLines: filteredServiceLines,
+      staffId: appointmentStaffId ?? Number(staff?.id),
+      patientId,
+      insuranceProvider: "United/DentalHub",
+      insuranceSiteKey: "UNITED_SCO",
+    });
+
+    onClose();
+  };
+
+  const handleTuftsSCOPreAuth = async () => {
+    const missingFields: string[] = [];
+    if (!form.memberId?.trim()) missingFields.push("Member ID");
+    if (!form.dateOfBirth?.trim()) missingFields.push("Date of Birth");
+    if (!patient?.firstName?.trim()) missingFields.push("First Name");
+    if (missingFields.length > 0) {
+      toast({
+        title: "Missing Required Fields",
+        description: `Please fill out the following field(s): ${missingFields.join(", ")}`,
+        variant: "destructive",
+      });
+      return;
+    }
+
+    const filteredServiceLines = (form.serviceLines || []).filter(
+      (line) => (line.procedureCode ?? "").trim() !== "",
+    );
+    if (filteredServiceLines.length === 0) {
+      toast({
+        title: "No procedure codes",
+        description: "Please add at least one procedure code before submitting the pre-authorization.",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    onHandleForTuftsSCOSeleniumPreAuth({
+      ...form,
+      serviceLines: filteredServiceLines,
+      staffId: appointmentStaffId ?? Number(staff?.id),
+      patientId,
+      insuranceProvider: "Tufts SCO",
+      insuranceSiteKey: "TUFTS_SCO",
+    });
+
+    onClose();
+  };
+
   /** Check prices against the fee schedule. If mismatches exist, show dialog and
    *  store the action to run after the user responds. Otherwise run immediately. */
   const runWithPriceCheck = (action: () => void) => {
@@ -2931,16 +3011,16 @@ export function ClaimForm({
                       CCA PreAuth
                     </Button>
                     <Button
-                      className="w-44"
-                      variant="secondary"
+                      className="w-44 bg-blue-600 hover:bg-blue-700 text-white"
+                      onClick={handleUnitedDHPreAuth}
                       disabled={!isLicensed}
                       title={!isLicensed ? "License required" : undefined}
                     >
                       United/DentalHub PreAuth
                     </Button>
                     <Button
-                      className="w-32"
-                      variant="secondary"
+                      className="w-32 bg-blue-600 hover:bg-blue-700 text-white"
+                      onClick={handleTuftsSCOPreAuth}
                       disabled={!isLicensed}
                       title={!isLicensed ? "License required" : undefined}
                     >

apps/Frontend/src/components/cloud-storage/files-section.tsx

@@ -75,6 +75,51 @@ function fileIcon(mime?: string) {
   return <FileIcon className="h-6 w-6" />;
 }
 
+function FileThumbnail({ fileId, mime, name }: { fileId: number; mime?: string | null; name?: string | null }) {
+  const [blobUrl, setBlobUrl] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!mime?.startsWith("image/")) return;
+    let url: string | null = null;
+    apiRequest("GET", `/api/cloud-storage/files/${fileId}/content`)
+      .then((res) => {
+        if (!res.ok) throw new Error();
+        return res.blob();
+      })
+      .then((blob) => {
+        url = URL.createObjectURL(blob);
+        setBlobUrl(url);
+      })
+      .catch(() => {});
+    return () => { if (url) URL.revokeObjectURL(url); };
+  }, [fileId, mime]);
+
+  if (mime?.startsWith("image/")) {
+    return blobUrl ? (
+      <img src={blobUrl} alt={name ?? ""} className="w-full h-full object-cover rounded" />
+    ) : (
+      <div className="w-full h-full flex items-center justify-center text-gray-400">
+        <ImageIcon className="h-6 w-6" />
+      </div>
+    );
+  }
+
+  if (mime === "application/pdf" || mime?.endsWith("/pdf")) {
+    return (
+      <div className="w-full h-full flex flex-col items-center justify-center bg-red-50 rounded gap-1">
+        <FileText className="h-7 w-7 text-red-500" />
+        <span className="text-[10px] font-bold text-red-500 tracking-wide">PDF</span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="w-full h-full flex items-center justify-center text-gray-400">
+      {fileIcon(mime ?? undefined)}
+    </div>
+  );
+}
+
 export default function FilesSection({
   parentId,
   pageSize = FILES_LIMIT_DEFAULT,
@@ -388,22 +433,23 @@ export default function FilesSection({
               {data.map((file) => (
                 <div
                   key={file.id}
-                  className="p-3 rounded border hover:bg-gray-50 cursor-pointer"
+                  className="rounded border hover:border-primary hover:shadow-sm cursor-pointer overflow-hidden transition-all"
                   onContextMenu={(e) => showMenu(e, file)}
                   onClick={() => openPreview(file)}
                 >
-                  <div className="flex flex-col items-center">
-                    <div className="h-10 w-10 text-gray-500 mb-2 flex items-center justify-center">
-                      {fileIcon((file as any).mimeType)}
+                  <div className="h-28 w-full bg-gray-100">
+                    <FileThumbnail
+                      fileId={Number(file.id)}
+                      mime={(file as any).mimeType}
+                      name={file.name}
+                    />
+                  </div>
+                  <div className="p-2">
+                    <div className="text-sm font-medium truncate" title={file.name ?? ""}>
+                      {file.name}
                     </div>
-                    <div
-                      className="text-sm truncate text-center"
-                      style={{ maxWidth: 140 }}
-                    >
-                      <div title={file.name}>{file.name}</div>
-                      <div className="text-xs text-gray-400">
-                        {((file as any).fileSize ?? 0).toString()} bytes
-                      </div>
+                    <div className="text-xs text-gray-400">
+                      {((file as any).fileSize ?? 0).toString()} bytes
                     </div>
                   </div>
                 </div>

apps/Frontend/src/components/cloud-storage/search-bar.tsx

@@ -53,7 +53,7 @@ export default function CloudSearchBar({
   const [q, setQ] = useState("");
   const [searchTarget, setSearchTarget] = useState<
     "filename" | "foldername" | "both"
-  >("filename"); // default filename
+  >("both");
   const [typeFilter, setTypeFilter] = useState<
     "any" | "images" | "pdf" | "video" | "audio"
   >("any");
@@ -265,7 +265,7 @@ export default function CloudSearchBar({
               <SelectValue placeholder="Search target" />
             </SelectTrigger>
             <SelectContent>
-              <SelectItem value="filename">Filename (default)</SelectItem>
+              <SelectItem value="filename">Filename only</SelectItem>
               <SelectItem value="foldername">
                 Folder name (top-level)
               </SelectItem>

apps/Frontend/src/pages/appointments-page.tsx

@@ -2259,8 +2259,10 @@ export default function AppointmentsPage() {
           onHandleForMHSeleniumClaimPreAuth={() => {}}
           onHandleForCCASeleniumClaim={() => {}}
           onHandleForCCASeleniumPreAuth={() => {}}
+          onHandleForUnitedDHSeleniumPreAuth={() => {}}
           onHandleForDDMASeleniumClaim={() => {}}
           onHandleForUnitedDHSeleniumClaim={() => {}}
+          onHandleForTuftsSCOSeleniumPreAuth={() => {}}
           onHandleForTuftsSCOSeleniumClaim={() => {}}
         />
       )}

apps/Frontend/src/pages/claims-page.tsx

@@ -63,9 +63,15 @@ export default function ClaimsPage() {
   const [unitedDHClaimOtpOpen, setUnitedDHClaimOtpOpen] = useState(false);
   const [unitedDHClaimOtpSubmitting, setUnitedDHClaimOtpSubmitting] = useState(false);
   const unitedDHClaimSessionIdRef = useRef<string | null>(null);
+  const [unitedDHPreAuthOtpOpen, setUnitedDHPreAuthOtpOpen] = useState(false);
+  const [unitedDHPreAuthOtpSubmitting, setUnitedDHPreAuthOtpSubmitting] = useState(false);
+  const unitedDHPreAuthSessionIdRef = useRef<string | null>(null);
   const [tuftsSCOClaimOtpOpen, setTuftsSCOClaimOtpOpen] = useState(false);
   const [tuftsSCOClaimOtpSubmitting, setTuftsSCOClaimOtpSubmitting] = useState(false);
   const tuftsSCOClaimSessionIdRef = useRef<string | null>(null);
+  const [tuftsSCOPreAuthOtpOpen, setTuftsSCOPreAuthOtpOpen] = useState(false);
+  const [tuftsSCOPreAuthOtpSubmitting, setTuftsSCOPreAuthOtpSubmitting] = useState(false);
+  const tuftsSCOPreAuthSessionIdRef = useRef<string | null>(null);
   const pendingClaimMeta = useRef<{
     patientId: number | null;
     groupKey: "INSURANCE_CLAIM" | "INSURANCE_CLAIM_PREAUTH";
@@ -582,6 +588,136 @@ export default function ClaimsPage() {
     }
   };
 
+  const handleUnitedDHPreAuthOtpSubmit = async (otp: string) => {
+    const sessionId = unitedDHPreAuthSessionIdRef.current;
+    if (!sessionId) return;
+    try {
+      setUnitedDHPreAuthOtpSubmitting(true);
+      const resp = await apiRequest("POST", "/api/claims/uniteddh-preauth/selenium/submit-otp", {
+        session_id: sessionId,
+        otp,
+        socketId,
+      });
+      const data = await resp.json();
+      if (!resp.ok || data.error) throw new Error(data.error || "Failed to submit OTP");
+      setUnitedDHPreAuthOtpOpen(false);
+      dispatch(setTaskStatus({ key: "claimSubmit", status: "pending", message: "OTP submitted. Continuing United/DentalHub pre-authorization..." }));
+    } catch (err: any) {
+      toast({ title: "Failed to submit OTP", description: err?.message || "Error submitting OTP", variant: "destructive" });
+    } finally {
+      setUnitedDHPreAuthOtpSubmitting(false);
+    }
+  };
+
+  // United/DentalHub pre-auth selenium handler
+  const handleUnitedDHPreAuthSubmitSelenium = async (data: any) => {
+    try {
+      dispatch(setTaskStatus({ key: "claimSubmit", status: "pending", message: "Submitting United/DentalHub pre-authorization..." }));
+      const response = await apiRequest("POST", "/api/claims/uniteddh-preauth", {
+        data,
+        socketId,
+      });
+      const result = await response.json();
+      if (result.error) throw new Error(result.error);
+      pendingClaimMeta.current = { patientId: selectedPatientId, groupKey: "INSURANCE_CLAIM_PREAUTH" };
+      setPendingClaimJobId(result.jobId);
+
+      const jobId = result.jobId;
+      const onSessionStarted = (ev: any) => {
+        if (String(ev?.jobId) !== String(jobId)) return;
+        unitedDHPreAuthSessionIdRef.current = ev.session_id ?? null;
+      };
+      const onOtpRequired = (ev: any) => {
+        if (String(ev?.jobId) !== String(jobId)) return;
+        if (ev.session_id) unitedDHPreAuthSessionIdRef.current = ev.session_id;
+        setUnitedDHPreAuthOtpOpen(true);
+        dispatch(setTaskStatus({ key: "claimSubmit", status: "pending", message: "OTP required for United/DentalHub. Please enter the code." }));
+      };
+      const onDone = (ev: any) => {
+        if (String(ev?.jobId) !== String(jobId)) return;
+        socket.off("selenium:uniteddh_preauth_started", onSessionStarted);
+        socket.off("selenium:otp_required", onOtpRequired);
+        socket.off("job:update", onDone);
+        setUnitedDHPreAuthOtpOpen(false);
+        unitedDHPreAuthSessionIdRef.current = null;
+      };
+      socket.on("selenium:uniteddh_preauth_started", onSessionStarted);
+      socket.on("selenium:otp_required", onOtpRequired);
+      socket.on("job:update", onDone);
+
+      dispatch(setTaskStatus({ key: "claimSubmit", status: "pending", message: "United/DentalHub pre-auth queued. Awaiting Selenium..." }));
+      toast({ title: "United/DentalHub PreAuth queued", description: "Selenium is opening the pre-authorization form.", variant: "default" });
+    } catch (error: any) {
+      dispatch(setTaskStatus({ key: "claimSubmit", status: "error", message: error.message || "United/DentalHub pre-auth failed" }));
+      toast({ title: "United/DentalHub PreAuth error", description: error.message || "An error occurred.", variant: "destructive" });
+    }
+  };
+
+  const handleTuftsSCOPreAuthOtpSubmit = async (otp: string) => {
+    const sessionId = tuftsSCOPreAuthSessionIdRef.current;
+    if (!sessionId) return;
+    try {
+      setTuftsSCOPreAuthOtpSubmitting(true);
+      const resp = await apiRequest("POST", "/api/claims/tuftssco-preauth/selenium/submit-otp", {
+        session_id: sessionId,
+        otp,
+        socketId,
+      });
+      const data = await resp.json();
+      if (!resp.ok || data.error) throw new Error(data.error || "Failed to submit OTP");
+      setTuftsSCOPreAuthOtpOpen(false);
+      dispatch(setTaskStatus({ key: "claimSubmit", status: "pending", message: "OTP submitted. Continuing Tufts SCO pre-authorization..." }));
+    } catch (err: any) {
+      toast({ title: "Failed to submit OTP", description: err?.message || "Error submitting OTP", variant: "destructive" });
+    } finally {
+      setTuftsSCOPreAuthOtpSubmitting(false);
+    }
+  };
+
+  // Tufts SCO pre-auth selenium handler
+  const handleTuftsSCOPreAuthSubmitSelenium = async (data: any) => {
+    try {
+      dispatch(setTaskStatus({ key: "claimSubmit", status: "pending", message: "Submitting Tufts SCO pre-authorization..." }));
+      const response = await apiRequest("POST", "/api/claims/tuftssco-preauth", {
+        data,
+        socketId,
+      });
+      const result = await response.json();
+      if (result.error) throw new Error(result.error);
+      pendingClaimMeta.current = { patientId: selectedPatientId, groupKey: "INSURANCE_CLAIM_PREAUTH" };
+      setPendingClaimJobId(result.jobId);
+
+      const jobId = result.jobId;
+      const onSessionStarted = (ev: any) => {
+        if (String(ev?.jobId) !== String(jobId)) return;
+        tuftsSCOPreAuthSessionIdRef.current = ev.session_id ?? null;
+      };
+      const onOtpRequired = (ev: any) => {
+        if (String(ev?.jobId) !== String(jobId)) return;
+        if (ev.session_id) tuftsSCOPreAuthSessionIdRef.current = ev.session_id;
+        setTuftsSCOPreAuthOtpOpen(true);
+        dispatch(setTaskStatus({ key: "claimSubmit", status: "pending", message: "OTP required for Tufts SCO. Please enter the code." }));
+      };
+      const onDone = (ev: any) => {
+        if (String(ev?.jobId) !== String(jobId)) return;
+        socket.off("selenium:tuftssco_preauth_started", onSessionStarted);
+        socket.off("selenium:otp_required", onOtpRequired);
+        socket.off("job:update", onDone);
+        setTuftsSCOPreAuthOtpOpen(false);
+        tuftsSCOPreAuthSessionIdRef.current = null;
+      };
+      socket.on("selenium:tuftssco_preauth_started", onSessionStarted);
+      socket.on("selenium:otp_required", onOtpRequired);
+      socket.on("job:update", onDone);
+
+      dispatch(setTaskStatus({ key: "claimSubmit", status: "pending", message: "Tufts SCO pre-auth queued. Awaiting Selenium..." }));
+      toast({ title: "Tufts SCO PreAuth queued", description: "Selenium is opening the pre-authorization form.", variant: "default" });
+    } catch (error: any) {
+      dispatch(setTaskStatus({ key: "claimSubmit", status: "error", message: error.message || "Tufts SCO pre-auth failed" }));
+      toast({ title: "Tufts SCO PreAuth error", description: error.message || "An error occurred.", variant: "destructive" });
+    }
+  };
+
   // United/DentalHub claim selenium handler
   const handleUnitedDHClaimSubmitSelenium = async (data: any) => {
     try {
@@ -951,8 +1087,10 @@ export default function ClaimsPage() {
           onHandleForMHSeleniumClaimPreAuth={handleMHClaimPreAuthSubmitSelenium}
           onHandleForCCASeleniumClaim={handleCCAClaimSubmitSelenium}
           onHandleForCCASeleniumPreAuth={handleCCAPreAuthSubmitSelenium}
+          onHandleForUnitedDHSeleniumPreAuth={handleUnitedDHPreAuthSubmitSelenium}
           onHandleForDDMASeleniumClaim={handleDDMAClaimSubmitSelenium}
           onHandleForUnitedDHSeleniumClaim={handleUnitedDHClaimSubmitSelenium}
+          onHandleForTuftsSCOSeleniumPreAuth={handleTuftsSCOPreAuthSubmitSelenium}
           onHandleForTuftsSCOSeleniumClaim={handleTuftsSCOClaimSubmitSelenium}
           isLicensed={isLicensed}
         />
@@ -1048,6 +1186,84 @@ export default function ClaimsPage() {
         </div>
       )}
 
+      {/* United/DentalHub PreAuth OTP Modal */}
+      {unitedDHPreAuthOtpOpen && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
+          <div className="bg-white dark:bg-slate-900 rounded-xl shadow-lg w-full max-w-md p-6">
+            <div className="flex items-center justify-between mb-4">
+              <h2 className="text-lg font-semibold">Enter OTP — United/DentalHub PreAuth</h2>
+              <button type="button" onClick={() => setUnitedDHPreAuthOtpOpen(false)} className="text-slate-500 hover:text-slate-800">✕</button>
+            </div>
+            <p className="text-sm text-slate-500 mb-4">
+              The United/DentalHub portal requires a one-time password (OTP) to continue pre-authorization submission.
+            </p>
+            <form onSubmit={(e) => {
+              e.preventDefault();
+              const input = (e.currentTarget.elements.namedItem("otp") as HTMLInputElement);
+              if (input?.value.trim()) handleUnitedDHPreAuthOtpSubmit(input.value.trim());
+            }} className="space-y-4">
+              <div className="space-y-2">
+                <label htmlFor="uniteddh-preauth-otp" className="text-sm font-medium">OTP</label>
+                <input
+                  id="uniteddh-preauth-otp"
+                  name="otp"
+                  placeholder="Enter OTP code"
+                  autoFocus
+                  className="w-full border rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
+                />
+              </div>
+              <div className="flex justify-end gap-3">
+                <button type="button" onClick={() => setUnitedDHPreAuthOtpOpen(false)} disabled={unitedDHPreAuthOtpSubmitting}
+                  className="px-4 py-2 text-sm border rounded-md hover:bg-slate-50 disabled:opacity-50">Cancel</button>
+                <button type="submit" disabled={unitedDHPreAuthOtpSubmitting}
+                  className="px-4 py-2 text-sm bg-primary text-white rounded-md hover:bg-primary/90 disabled:opacity-50">
+                  {unitedDHPreAuthOtpSubmitting ? "Submitting..." : "Submit OTP"}
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+
+      {/* Tufts SCO PreAuth OTP Modal */}
+      {tuftsSCOPreAuthOtpOpen && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
+          <div className="bg-white dark:bg-slate-900 rounded-xl shadow-lg w-full max-w-md p-6">
+            <div className="flex items-center justify-between mb-4">
+              <h2 className="text-lg font-semibold">Enter OTP — Tufts SCO PreAuth</h2>
+              <button type="button" onClick={() => setTuftsSCOPreAuthOtpOpen(false)} className="text-slate-500 hover:text-slate-800">✕</button>
+            </div>
+            <p className="text-sm text-slate-500 mb-4">
+              The Tufts SCO (DentaQuest) portal requires a one-time password (OTP) to continue pre-authorization submission.
+            </p>
+            <form onSubmit={(e) => {
+              e.preventDefault();
+              const input = (e.currentTarget.elements.namedItem("otp") as HTMLInputElement);
+              if (input?.value.trim()) handleTuftsSCOPreAuthOtpSubmit(input.value.trim());
+            }} className="space-y-4">
+              <div className="space-y-2">
+                <label htmlFor="tuftssco-preauth-otp" className="text-sm font-medium">OTP</label>
+                <input
+                  id="tuftssco-preauth-otp"
+                  name="otp"
+                  placeholder="Enter OTP code"
+                  autoFocus
+                  className="w-full border rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
+                />
+              </div>
+              <div className="flex justify-end gap-3">
+                <button type="button" onClick={() => setTuftsSCOPreAuthOtpOpen(false)} disabled={tuftsSCOPreAuthOtpSubmitting}
+                  className="px-4 py-2 text-sm border rounded-md hover:bg-slate-50 disabled:opacity-50">Cancel</button>
+                <button type="submit" disabled={tuftsSCOPreAuthOtpSubmitting}
+                  className="px-4 py-2 text-sm bg-primary text-white rounded-md hover:bg-primary/90 disabled:opacity-50">
+                  {tuftsSCOPreAuthOtpSubmitting ? "Submitting..." : "Submit OTP"}
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+
       {/* United/DentalHub Claim OTP Modal */}
       {unitedDHClaimOtpOpen && (
         <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">

apps/Frontend/src/pages/cloud-storage-page.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useSearch } from "wouter";
 import { useQueryClient } from "@tanstack/react-query";
 import { Button } from "@/components/ui/button";
@@ -28,6 +28,7 @@ export default function CloudStoragePage() {
   const [panelInitialFolderId, setPanelInitialFolderId] = useState<
     number | null
   >(null);
+  const panelRef = useRef<HTMLDivElement>(null);
 
   // Deep-link: if navigated here with ?folderId=XXX, open that folder automatically
   useEffect(() => {
@@ -53,6 +54,9 @@ export default function CloudStoragePage() {
   function handleOpenFolder(folderId: number | null) {
     setPanelInitialFolderId(folderId);
     setPanelOpen(true);
+    setTimeout(() => {
+      panelRef.current?.scrollIntoView({ behavior: "smooth", block: "start" });
+    }, 50);
   }
 
   function handleSelectFile(fileId: number) {
@@ -131,6 +135,7 @@ export default function CloudStoragePage() {
       />
 
       {/* FolderPanel lives in page so it can be reused with other UI */}
+      <div ref={panelRef} />
       {panelOpen && (
         <FolderPanel
           folderId={panelInitialFolderId}