feat: add Office Contact settings page and reorder Advanced sidebar

- Add OfficeContact Prisma model with receptionist name, dentist name, phone, email, fax fields
- Create GET/PUT /api/office-contact backend route and storage
- Add OfficeContactCard frontend component under Settings > Advanced
- Reorder Advanced sidebar: Office Hours → Office Contact → Twilio Settings → Google AI Settings

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

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

@@ -27,6 +27,7 @@ import {
   Workflow,
   Bot,
   Clock,
+  Building2,
 } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { useMemo, useState, useEffect } from "react";
@@ -213,6 +214,16 @@ export function Sidebar() {
           // ── Advanced ─────────────────────────────────────────
           {
             groupLabel: "Advanced",
+            name: "Office Hours",
+            path: "/settings/officehours",
+            icon: <Clock className="h-4 w-4 text-gray-400" />,
+          },
+          {
+            name: "Office Contact",
+            path: "/settings/officecontact",
+            icon: <Building2 className="h-4 w-4 text-gray-400" />,
+          },
+          {
             name: "Twilio Settings",
             path: "/settings/twilio",
             icon: <Phone className="h-4 w-4 text-gray-400" />,
@@ -222,11 +233,6 @@ export function Sidebar() {
             path: "/settings/ai",
             icon: <Bot className="h-4 w-4 text-gray-400" />,
           },
-          {
-            name: "Office Hours",
-            path: "/settings/officehours",
-            icon: <Clock className="h-4 w-4 text-gray-400" />,
-          },
         ],
       },
     ],

apps/Frontend/src/components/settings/office-contact-card.tsx

@@ -0,0 +1,152 @@
+import { useState, useEffect } from "react";
+import { useQuery, useMutation } from "@tanstack/react-query";
+import { Card, CardContent } from "@/components/ui/card";
+import { useToast } from "@/hooks/use-toast";
+import { apiRequest, queryClient } from "@/lib/queryClient";
+
+type OfficeContact = {
+  id?: number;
+  receptionistName?: string | null;
+  dentistName?: string | null;
+  phoneNumber?: string | null;
+  email?: string | null;
+  fax?: string | null;
+};
+
+export function OfficeContactCard() {
+  const { toast } = useToast();
+
+  const [receptionistName, setReceptionistName] = useState("");
+  const [dentistName, setDentistName] = useState("");
+  const [phoneNumber, setPhoneNumber] = useState("");
+  const [email, setEmail] = useState("");
+  const [fax, setFax] = useState("");
+
+  const { data: contact, isLoading } = useQuery<OfficeContact | null>({
+    queryKey: ["/api/office-contact"],
+    queryFn: async () => {
+      const res = await apiRequest("GET", "/api/office-contact");
+      if (!res.ok) return null;
+      return res.json();
+    },
+  });
+
+  useEffect(() => {
+    if (contact) {
+      setReceptionistName(contact.receptionistName ?? "");
+      setDentistName(contact.dentistName ?? "");
+      setPhoneNumber(contact.phoneNumber ?? "");
+      setEmail(contact.email ?? "");
+      setFax(contact.fax ?? "");
+    }
+  }, [contact]);
+
+  const saveMutation = useMutation({
+    mutationFn: async (data: OfficeContact) => {
+      const res = await apiRequest("PUT", "/api/office-contact", data);
+      if (!res.ok) {
+        const err = await res.json().catch(() => null);
+        throw new Error(err?.message || "Failed to save office contact");
+      }
+      return res.json();
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["/api/office-contact"] });
+      toast({ title: "Office Contact Saved", description: "Office contact information has been saved." });
+    },
+    onError: (err: any) => {
+      toast({ title: "Error", description: err?.message || "Failed to save office contact", variant: "destructive" });
+    },
+  });
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    saveMutation.mutate({ receptionistName, dentistName, phoneNumber, email, fax });
+  };
+
+  return (
+    <Card>
+      <CardContent className="space-y-4 py-6">
+        <div>
+          <h3 className="text-lg font-semibold">Office Contact</h3>
+          <p className="text-sm text-gray-500 mt-1">
+            Contact information for your dental office staff and communications.
+          </p>
+        </div>
+
+        {isLoading ? (
+          <p className="text-sm text-gray-400">Loading...</p>
+        ) : (
+          <form className="space-y-4" onSubmit={handleSubmit}>
+            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+              <div>
+                <label className="block text-sm font-medium">Receptionist Name</label>
+                <input
+                  type="text"
+                  value={receptionistName}
+                  onChange={(e) => setReceptionistName(e.target.value)}
+                  className="mt-1 p-2 border rounded w-full text-sm"
+                  placeholder="e.g. Jane Smith"
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium">Dentist Name</label>
+                <input
+                  type="text"
+                  value={dentistName}
+                  onChange={(e) => setDentistName(e.target.value)}
+                  className="mt-1 p-2 border rounded w-full text-sm"
+                  placeholder="e.g. Dr. John Doe"
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium">Office Phone Number</label>
+                <input
+                  type="tel"
+                  value={phoneNumber}
+                  onChange={(e) => setPhoneNumber(e.target.value)}
+                  className="mt-1 p-2 border rounded w-full text-sm"
+                  placeholder="e.g. (508) 555-0100"
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium">Office Email Address</label>
+                <input
+                  type="email"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  className="mt-1 p-2 border rounded w-full text-sm"
+                  placeholder="e.g. office@dentalclinic.com"
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium">Office Fax</label>
+                <input
+                  type="tel"
+                  value={fax}
+                  onChange={(e) => setFax(e.target.value)}
+                  className="mt-1 p-2 border rounded w-full text-sm"
+                  placeholder="e.g. (508) 555-0199"
+                />
+              </div>
+            </div>
+
+            <div className="pt-1">
+              <button
+                type="submit"
+                className="bg-teal-600 text-white px-4 py-2 rounded hover:bg-teal-700 text-sm"
+                disabled={saveMutation.isPending}
+              >
+                {saveMutation.isPending ? "Saving..." : "Save Office Contact"}
+              </button>
+            </div>
+          </form>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

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

@@ -16,6 +16,7 @@ import { ProgramBridgeTable } from "@/components/settings/program-bridge-table";
 import { TwilioSettingsCard } from "@/components/settings/twilio-settings-card";
 import { AiSettingsCard } from "@/components/settings/ai-settings-card";
 import { OfficeHoursCard } from "@/components/settings/office-hours-card";
+import { OfficeContactCard } from "@/components/settings/office-contact-card";
 
 type SectionId =
   | "staff"
@@ -26,7 +27,8 @@ type SectionId =
   | "programs"
   | "twilio"
   | "ai"
-  | "officehours";
+  | "officehours"
+  | "officecontact";
 
 export default function SettingsPage() {
   const { toast } = useToast();
@@ -256,6 +258,9 @@ export default function SettingsPage() {
       case "officehours":
         return <OfficeHoursCard />;
 
+      case "officecontact":
+        return <OfficeContactCard />;
+
       default:
         return null;
     }