feat: add Selenium Settings page to configure paymentGroupId per office

Adds a new Settings → Advanced → Selenium Settings page where the office
name (paymentGroupId) used in United/DentalHub portal dropdowns can be
configured without touching code. Previously hardcoded as "Summit Dental
Care"; now injected from DB into the three United workers at job dispatch.

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

apps/Frontend/src/components/layout/sidebar.tsx

@@ -30,6 +30,7 @@ import {
   Building2,
   Timer,
   BookOpen,
+  MonitorCog,
   GraduationCap,
   ShoppingCart,
   Search,
@@ -291,6 +292,11 @@ export function Sidebar() {
             path: "/settings/aichat",
             icon: <Bot className="h-4 w-4 text-gray-400" />,
           },
+          {
+            name: "Selenium Settings",
+            path: "/settings/selenium",
+            icon: <MonitorCog className="h-4 w-4 text-gray-400" />,
+          },
         ],
       },
     ],

apps/Frontend/src/components/settings/selenium-settings-card.tsx

@@ -0,0 +1,110 @@
+import { useState, useEffect } from "react";
+import { useQuery, useMutation } from "@tanstack/react-query";
+import { Card, CardContent } from "@/components/ui/card";
+import { CheckCircle } from "lucide-react";
+import { useToast } from "@/hooks/use-toast";
+import { apiRequest, queryClient } from "@/lib/queryClient";
+
+type SeleniumSettings = {
+  paymentGroupId: string;
+};
+
+export function SeleniumSettingsCard() {
+  const { toast } = useToast();
+  const [paymentGroupId, setPaymentGroupId] = useState("");
+
+  const { data: settings, isLoading } = useQuery<SeleniumSettings | null>({
+    queryKey: ["/api/selenium-settings"],
+    queryFn: async () => {
+      const res = await apiRequest("GET", "/api/selenium-settings");
+      if (!res.ok) return null;
+      return res.json();
+    },
+  });
+
+  useEffect(() => {
+    if (settings) {
+      setPaymentGroupId(settings.paymentGroupId ?? "");
+    }
+  }, [settings]);
+
+  const saveMutation = useMutation({
+    mutationFn: async (data: SeleniumSettings) => {
+      const res = await apiRequest("PUT", "/api/selenium-settings", data);
+      if (!res.ok) {
+        const err = await res.json().catch(() => null);
+        throw new Error(err?.message || "Failed to save Selenium settings");
+      }
+      return res.json();
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["/api/selenium-settings"] });
+      toast({ title: "Selenium Settings Saved" });
+    },
+    onError: (err: any) => {
+      toast({ title: "Error", description: err?.message || "Failed to save settings", variant: "destructive" });
+    },
+  });
+
+  if (isLoading) {
+    return (
+      <Card>
+        <CardContent className="py-6">
+          <p className="text-sm text-gray-500">Loading...</p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card>
+      <CardContent className="space-y-6 py-6">
+        <div>
+          <div className="flex items-center gap-2">
+            <h3 className="text-lg font-semibold">Selenium Settings</h3>
+            {settings?.paymentGroupId && (
+              <span className="flex items-center gap-1 text-xs text-green-600 font-medium">
+                <CheckCircle className="h-3.5 w-3.5" /> Configured
+              </span>
+            )}
+          </div>
+          <p className="text-sm text-gray-500 mt-1">
+            Configure values used by Selenium automation workers (United eligibility, claim, and pre-auth).
+          </p>
+        </div>
+
+        <form
+          className="space-y-4"
+          onSubmit={(e) => {
+            e.preventDefault();
+            saveMutation.mutate({ paymentGroupId });
+          }}
+        >
+          <div>
+            <label className="block text-sm font-medium text-gray-700">
+              Payment Group ID
+            </label>
+            <p className="text-xs text-gray-400 mb-1">
+              The office name as it appears in the United/DentalHub portal dropdown (e.g. "Summit Dental Care" or "Broadway Dental").
+            </p>
+            <input
+              type="text"
+              value={paymentGroupId}
+              onChange={(e) => setPaymentGroupId(e.target.value)}
+              className="mt-1 p-2 border rounded w-full"
+              placeholder="e.g. Summit Dental Care"
+            />
+          </div>
+
+          <button
+            type="submit"
+            className="bg-teal-600 text-white px-4 py-2 rounded hover:bg-teal-700 disabled:opacity-50"
+            disabled={saveMutation.isPending}
+          >
+            {saveMutation.isPending ? "Saving..." : "Save Settings"}
+          </button>
+        </form>
+      </CardContent>
+    </Card>
+  );
+}

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

@@ -20,6 +20,7 @@ import { OfficeContactCard } from "@/components/settings/office-contact-card";
 import { ProcedureTimeslotCard } from "@/components/settings/procedure-timeslot-card";
 import { InsuranceContactCard } from "@/components/settings/insurance-contact-card";
 import { AiChatSettingsCard } from "@/components/settings/ai-chat-settings-card";
+import { SeleniumSettingsCard } from "@/components/settings/selenium-settings-card";
 
 type SectionId =
   | "staff"
@@ -34,7 +35,8 @@ type SectionId =
   | "officehours"
   | "officecontact"
   | "proceduretimeslot"
-  | "insurancecontact";
+  | "insurancecontact"
+  | "selenium";
 
 export default function SettingsPage() {
   const { toast } = useToast();
@@ -276,6 +278,9 @@ export default function SettingsPage() {
       case "insurancecontact":
         return <InsuranceContactCard />;
 
+      case "selenium":
+        return <SeleniumSettingsCard />;
+
       default:
         return null;
     }