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>
This commit is contained in:
2026-07-02 23:53:43 -04:00
co-authored by Claude Sonnet 4.6
parent abb2a0ac96
commit 75ecd7cc20
998 changed files with 18415 additions and 283 deletions
@@ -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>
);
}