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/Backend/src/routes/index.ts

@@ -27,6 +27,7 @@ import jobMonitorRoutes from "./job-monitor";
 import twilioRoutes from "./twilio";
 import aiSettingsRoutes from "./ai-settings";
 import officeHoursRoutes from "./office-hours";
+import officeContactRoutes from "./office-contact";
 
 const router = Router();
 
@@ -58,5 +59,6 @@ router.use("/job-monitor", jobMonitorRoutes);
 router.use("/twilio", twilioRoutes);
 router.use("/ai", aiSettingsRoutes);
 router.use("/office-hours", officeHoursRoutes);
+router.use("/office-contact", officeContactRoutes);
 
 export default router;

apps/Backend/src/routes/office-contact.ts

@@ -0,0 +1,39 @@
+import express, { Request, Response } from "express";
+import { storage } from "../storage";
+
+const router = express.Router();
+
+// GET /api/office-contact
+router.get("/", async (req: Request, res: Response): Promise<any> => {
+  try {
+    const userId = req.user?.id;
+    if (!userId) return res.status(401).json({ message: "Unauthorized" });
+
+    const record = await storage.getOfficeContact(userId);
+    return res.status(200).json(record ?? null);
+  } catch (err) {
+    return res.status(500).json({ error: "Failed to fetch office contact", details: String(err) });
+  }
+});
+
+// PUT /api/office-contact
+router.put("/", async (req: Request, res: Response): Promise<any> => {
+  try {
+    const userId = req.user?.id;
+    if (!userId) return res.status(401).json({ message: "Unauthorized" });
+
+    const { receptionistName, dentistName, phoneNumber, email, fax } = req.body;
+    const record = await storage.upsertOfficeContact(userId, {
+      receptionistName: receptionistName ?? undefined,
+      dentistName: dentistName ?? undefined,
+      phoneNumber: phoneNumber ?? undefined,
+      email: email ?? undefined,
+      fax: fax ?? undefined,
+    });
+    return res.status(200).json(record);
+  } catch (err) {
+    return res.status(500).json({ error: "Failed to save office contact", details: String(err) });
+  }
+});
+
+export default router;

apps/Backend/src/storage/index.ts

@@ -20,6 +20,7 @@ import { cronJobLogStorage } from "./cron-job-log-storage";
 import { twilioStorage } from "./twilio-storage";
 import { aiSettingsStorage } from "./ai-settings-storage";
 import { officeHoursStorage } from "./office-hours-storage";
+import { officeContactStorage } from "./office-contact-storage";
 
 
 export const storage = {
@@ -43,6 +44,7 @@ export const storage = {
   ...twilioStorage,
   ...aiSettingsStorage,
   ...officeHoursStorage,
+  ...officeContactStorage,
 
 };
 

apps/Backend/src/storage/office-contact-storage.ts

@@ -0,0 +1,21 @@
+import { prisma as db } from "@repo/db/client";
+
+export const officeContactStorage = {
+  async getOfficeContact(userId: number) {
+    return db.officeContact.findUnique({ where: { userId } });
+  },
+
+  async upsertOfficeContact(userId: number, data: {
+    receptionistName?: string;
+    dentistName?: string;
+    phoneNumber?: string;
+    email?: string;
+    fax?: string;
+  }) {
+    return db.officeContact.upsert({
+      where: { userId },
+      update: data,
+      create: { userId, ...data },
+    });
+  },
+};

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;
     }