fix - procedure combos file source made

apps/Frontend/src/components/appointment-procedures/appointment-procedures-dialog.tsx

@@ -12,7 +12,7 @@ import { Label } from "@/components/ui/label";
 import { Trash2, Plus, Save, X } from "lucide-react";
 import { apiRequest, queryClient } from "@/lib/queryClient";
 import { useToast } from "@/hooks/use-toast";
-import { PROCEDURE_COMBOS, COMBO_CATEGORIES } from "@/utils/procedureCombos";
+import { PROCEDURE_COMBOS } from "@/utils/procedureCombos";
 import {
   CODE_MAP,
   getPriceForCodeWithAgeFromMap,
@@ -20,6 +20,10 @@ import {
 import { Patient, AppointmentProcedure } from "@repo/db/types";
 import { useLocation } from "wouter";
 import { DeleteConfirmationDialog } from "../ui/deleteDialog";
+import {
+  DirectComboButtons,
+  RegularComboButtons,
+} from "@/components/procedure/procedure-combo-buttons";
 
 interface Props {
   open: boolean;
@@ -66,13 +70,13 @@ export function AppointmentProceduresDialog({
       queryFn: async () => {
         const res = await apiRequest(
           "GET",
-          `/api/appointment-procedures/${appointmentId}`
+          `/api/appointment-procedures/${appointmentId}`,
         );
         if (!res.ok) throw new Error("Failed to load procedures");
         return res.json();
       },
       enabled: open && !!appointmentId,
-    }
+    },
   );
 
   // -----------------------------
@@ -94,7 +98,7 @@ export function AppointmentProceduresDialog({
       const res = await apiRequest(
         "POST",
         "/api/appointment-procedures",
-        payload
+        payload,
       );
       if (!res.ok) throw new Error("Failed to add procedure");
       return res.json();
@@ -124,7 +128,7 @@ export function AppointmentProceduresDialog({
       const res = await apiRequest(
         "POST",
         "/api/appointment-procedures/bulk",
-        rows
+        rows,
       );
       if (!res.ok) throw new Error("Failed to add combo procedures");
       return res.json();
@@ -141,7 +145,7 @@ export function AppointmentProceduresDialog({
     mutationFn: async (id: number) => {
       const res = await apiRequest(
         "DELETE",
-        `/api/appointment-procedures/${id}`
+        `/api/appointment-procedures/${id}`,
       );
       if (!res.ok) throw new Error("Failed to delete");
     },
@@ -157,7 +161,7 @@ export function AppointmentProceduresDialog({
     mutationFn: async () => {
       const res = await apiRequest(
         "DELETE",
-        `/api/appointment-procedures/clear/${appointmentId}`
+        `/api/appointment-procedures/clear/${appointmentId}`,
       );
       if (!res.ok) throw new Error("Failed to clear procedures");
     },
@@ -183,7 +187,7 @@ export function AppointmentProceduresDialog({
       const res = await apiRequest(
         "PUT",
         `/api/appointment-procedures/${editingId}`,
-        editRow
+        editRow,
       );
       if (!res.ok) throw new Error("Failed to update");
       return res.json();
@@ -291,34 +295,18 @@ export function AppointmentProceduresDialog({
         </DialogHeader>
 
         {/* ================= COMBOS ================= */}
-        <div className="space-y-4 pointer-events-auto">
-          <div className="text-sm font-semibold text-muted-foreground">
-            Quick Add Combos
-          </div>
+        <div className="space-y-8 pointer-events-auto">
+          <DirectComboButtons
+            onDirectCombo={(comboKey) => {
+              handleAddCombo(comboKey);
+            }}
+          />
 
-          {Object.entries(COMBO_CATEGORIES).map(([categoryName, comboKeys]) => (
-            <div key={categoryName} className="space-y-2">
-              <div className="text-sm font-medium">{categoryName}</div>
-
-              <div className="flex flex-wrap gap-2">
-                {comboKeys.map((comboKey) => {
-                  const combo = PROCEDURE_COMBOS[comboKey];
-                  if (!combo) return null;
-
-                  return (
-                    <Button
-                      key={comboKey}
-                      variant="secondary"
-                      size="sm"
-                      onClick={() => handleAddCombo(comboKey)}
-                    >
-                      {combo.label}
-                    </Button>
-                  );
-                })}
-              </div>
-            </div>
-          ))}
+          <RegularComboButtons
+            onRegularCombo={(comboKey) => {
+              handleAddCombo(comboKey);
+            }}
+          />
         </div>
 
         {/* ================= MANUAL ADD ================= */}