From dfa04981c58aacde9186bb31495ec7df6290c2bf Mon Sep 17 00:00:00 2001
From: Gitead <summitdentalcareframingham@gmail.com>
Date: Mon, 27 Apr 2026 22:53:40 -0400
Subject: [PATCH] feat: open select procedures inline on appointments page
 instead of navigating to claims

---
 apps/Frontend/src/pages/appointments-page.tsx | 32 ++++++++++++++++++-
 1 file changed, 31 insertions(+), 1 deletion(-)

diff --git a/apps/Frontend/src/pages/appointments-page.tsx b/apps/Frontend/src/pages/appointments-page.tsx
index 3f68597c..28e1e130 100755
--- a/apps/Frontend/src/pages/appointments-page.tsx
+++ b/apps/Frontend/src/pages/appointments-page.tsx
@@ -40,7 +40,9 @@ import {
   Patient,
   PatientStatus,
   UpdateAppointment,
+  UpdatePatient,
 } from "@repo/db/types";
+import { ClaimForm } from "@/components/claims/claim-form";
 import {
   Popover,
   PopoverContent,
@@ -150,6 +152,11 @@ export default function AppointmentsPage() {
 
   const [, setLocation] = useLocation();
 
+  // Select Procedures modal state (opened inline, no navigation)
+  const [isSelectProceduresOpen, setIsSelectProceduresOpen] = useState(false);
+  const [selectProceduresPatientId, setSelectProceduresPatientId] = useState<number | null>(null);
+  const [selectProceduresAppointmentId, setSelectProceduresAppointmentId] = useState<number | null>(null);
+
   // Create context menu hook
   const { show } = useContextMenu({
     id: APPOINTMENT_CONTEXT_MENU_ID,
@@ -741,7 +748,11 @@ export default function AppointmentsPage() {
   };
 
   const handleSelectProcedures = (appointmentId: number) => {
-    setLocation(`/claims?appointmentId=${appointmentId}&mode=procedures`);
+    const appt = appointments.find((a) => a.id === appointmentId);
+    if (!appt) return;
+    setSelectProceduresAppointmentId(appointmentId);
+    setSelectProceduresPatientId(appt.patientId);
+    setIsSelectProceduresOpen(true);
   };
 
   const handlePayments = (appointmentId: number) => {
@@ -1354,6 +1365,25 @@ export default function AppointmentsPage() {
         onCancel={() => setConfirmDeleteState({ open: false })}
         entityName={String(confirmDeleteState.appointmentId)}
       />
+
+      {/* Select Procedures modal — stays on appointments page */}
+      {isSelectProceduresOpen && selectProceduresPatientId !== null && (
+        <ClaimForm
+          patientId={selectProceduresPatientId}
+          appointmentId={selectProceduresAppointmentId ?? undefined}
+          proceduresOnly={true}
+          onClose={() => {
+            setIsSelectProceduresOpen(false);
+            setSelectProceduresPatientId(null);
+            setSelectProceduresAppointmentId(null);
+          }}
+          onSubmit={async () => { throw new Error("not used in proceduresOnly mode"); }}
+          onHandleAppointmentSubmit={async () => 0}
+          onHandleUpdatePatient={(_patient: UpdatePatient & { id: number }) => {}}
+          onHandleForMHSeleniumClaim={() => {}}
+          onHandleForMHSeleniumClaimPreAuth={() => {}}
+        />
+      )}
     </div>
   );
 }