@mieweb/ui 0.1.1 → 0.2.0

package/dist/index.cjs

@@ -1,24 +1,25 @@
 'use strict';
 
+var chunkB7YGVKTE_cjs = require('./chunk-B7YGVKTE.cjs');
 var chunkVDMQCSXT_cjs = require('./chunk-VDMQCSXT.cjs');
 var chunkBXK5TNJE_cjs = require('./chunk-BXK5TNJE.cjs');
 var chunkZJCPW6MS_cjs = require('./chunk-ZJCPW6MS.cjs');
-var chunk6DP6RKUA_cjs = require('./chunk-6DP6RKUA.cjs');
+var chunkCLJZHS7Y_cjs = require('./chunk-CLJZHS7Y.cjs');
+var chunkP52GA3GJ_cjs = require('./chunk-P52GA3GJ.cjs');
 var chunkS6UNPMAS_cjs = require('./chunk-S6UNPMAS.cjs');
 var chunkSWV5E75F_cjs = require('./chunk-SWV5E75F.cjs');
 var chunkZ3TFPXVN_cjs = require('./chunk-Z3TFPXVN.cjs');
 var chunkFFJVCQ5R_cjs = require('./chunk-FFJVCQ5R.cjs');
 var chunk4LNS5QDP_cjs = require('./chunk-4LNS5QDP.cjs');
 var chunkO5HS7ZND_cjs = require('./chunk-O5HS7ZND.cjs');
-var chunkP52GA3GJ_cjs = require('./chunk-P52GA3GJ.cjs');
-var chunkNL3CZNBH_cjs = require('./chunk-NL3CZNBH.cjs');
+var chunk5UUL5EEO_cjs = require('./chunk-5UUL5EEO.cjs');
 var chunkN3QTYHRZ_cjs = require('./chunk-N3QTYHRZ.cjs');
+var chunkBV75DAKO_cjs = require('./chunk-BV75DAKO.cjs');
 var chunkJYMQJ32S_cjs = require('./chunk-JYMQJ32S.cjs');
 var chunkRRQGH7C5_cjs = require('./chunk-RRQGH7C5.cjs');
 var chunkLZEY55QZ_cjs = require('./chunk-LZEY55QZ.cjs');
 var chunkORUPC5TV_cjs = require('./chunk-ORUPC5TV.cjs');
 var chunkQDGZBDBI_cjs = require('./chunk-QDGZBDBI.cjs');
-var chunkB7YGVKTE_cjs = require('./chunk-B7YGVKTE.cjs');
 var chunkI7L6CQXR_cjs = require('./chunk-I7L6CQXR.cjs');
 var chunkPF3XWKE5_cjs = require('./chunk-PF3XWKE5.cjs');
 var chunkCQCYXHCU_cjs = require('./chunk-CQCYXHCU.cjs');
@@ -242,7 +243,7 @@ function AddContactModal({
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx(
-              chunkNL3CZNBH_cjs.Select,
+              chunk5UUL5EEO_cjs.Select,
               {
                 id: "contact-sex",
                 options: SEX_OPTIONS,
@@ -2283,6 +2284,35 @@ var TOOL_ICONS = {
       )
     }
   ),
+  // Provider tools
+  search_providers: /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      className: "h-4 w-4",
+      fill: "none",
+      viewBox: "0 0 24 24",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            d: "M15 10.5a3 3 0 11-6 0 3 3 0 016 0z"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            d: "M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z"
+          }
+        )
+      ]
+    }
+  ),
   // Default tool icon
   default: /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
@@ -2386,6 +2416,34 @@ function ResourceLink({ link, onClick, className }) {
         )
       }
     ),
+    provider: /* @__PURE__ */ jsxRuntime.jsxs(
+      "svg",
+      {
+        className: "h-4 w-4",
+        fill: "none",
+        viewBox: "0 0 24 24",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "path",
+            {
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              d: "M15 10.5a3 3 0 11-6 0 3 3 0 016 0z"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "path",
+            {
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              d: "M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z"
+            }
+          )
+        ]
+      }
+    ),
     external: /* @__PURE__ */ jsxRuntime.jsx(
       "svg",
       {
@@ -2572,7 +2630,8 @@ var TOOL_FRIENDLY_NAMES = {
   search_documents: "Searching documents",
   create_order: "Creating order",
   send_message: "Sending message",
-  search: "Searching"
+  search: "Searching",
+  search_providers: "Searching for providers"
 };
 function getToolFriendlyName(toolName, status) {
   const baseName = TOOL_FRIENDLY_NAMES[toolName] || toolName.replace(/_/g, " ");
@@ -2581,8 +2640,10 @@ function getToolFriendlyName(toolName, status) {
       return baseName.replace("Creating", "Created");
     if (baseName.startsWith("Scheduling"))
       return baseName.replace("Scheduling", "Scheduled");
+    if (baseName.startsWith("Searching for"))
+      return baseName.replace("Searching for", "Found");
     if (baseName.startsWith("Searching"))
-      return baseName.replace("Searching", "Searched");
+      return baseName.replace("Searching", "Found");
     if (baseName.startsWith("Looking"))
       return baseName.replace("Looking", "Found");
     if (baseName.startsWith("Updating"))
@@ -2612,6 +2673,10 @@ function getParameterSummary(toolName, params) {
     const date = paramMap.preferredDate || paramMap.date;
     return date ? `${paramMap.patientName} on ${date}` : String(paramMap.patientName);
   }
+  if (toolName === "search_providers" && paramMap.zipcode) {
+    const service = paramMap.service;
+    return service ? `${service} near ${paramMap.zipcode}` : `near ${paramMap.zipcode}`;
+  }
   return null;
 }
 function MCPToolCallDisplay({
@@ -8314,7 +8379,7 @@ function CheckrIntegration({
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
-            chunkNL3CZNBH_cjs.Select,
+            chunk5UUL5EEO_cjs.Select,
             {
               label: packageLabel,
               options: packageOptions,
@@ -9614,7 +9679,7 @@ function CSVColumnCard({
                   hasError && !column.ignored && "ring-warning/50 ring-2"
                 ),
                 children: /* @__PURE__ */ jsxRuntime.jsx(
-                  chunkNL3CZNBH_cjs.Select,
+                  chunk5UUL5EEO_cjs.Select,
                   {
                     id: formatHtmlId(column.name),
                     options: selectOptions,
@@ -9635,7 +9700,7 @@ function CSVColumnCard({
           childSelectOptions && childSelectOptions.length > 0 && column.mappedTo && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground mb-1 block text-xs font-semibold tracking-wider uppercase", children: "Sub-field" }),
             /* @__PURE__ */ jsxRuntime.jsx(
-              chunkNL3CZNBH_cjs.Select,
+              chunk5UUL5EEO_cjs.Select,
               {
                 id: formatHtmlId(column.name, column.mappedTo),
                 options: childSelectOptions,
@@ -11860,7 +11925,7 @@ function ClaimProviderForm({
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4 border-t border-gray-200 pt-4 dark:border-gray-700", children: [
         /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: "Your Role" }),
         /* @__PURE__ */ jsxRuntime.jsx(
-          chunkNL3CZNBH_cjs.Select,
+          chunk5UUL5EEO_cjs.Select,
           {
             label: "Role at this Organization",
             value: formData.role,
@@ -11883,7 +11948,7 @@ function ClaimProviderForm({
         )
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4 border-t border-gray-200 pt-4 dark:border-gray-700", children: /* @__PURE__ */ jsxRuntime.jsx(
-        chunkNL3CZNBH_cjs.Select,
+        chunk5UUL5EEO_cjs.Select,
         {
           label: "Preferred Language",
           value: formData.preferredLanguage || "en",
@@ -12072,7 +12137,7 @@ function CreateInvoiceModal({
       step === 1 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
         /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: "Select the employer you want to create an invoice for." }),
         /* @__PURE__ */ jsxRuntime.jsx(
-          chunkNL3CZNBH_cjs.Select,
+          chunk5UUL5EEO_cjs.Select,
           {
             label: "Employer",
             options: employerOptions,
@@ -12567,7 +12632,7 @@ function EditUserRoleModal({
         /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-destructive text-sm", children: errorMessage })
       ] }) }),
       /* @__PURE__ */ jsxRuntime.jsx(
-        chunkNL3CZNBH_cjs.Select,
+        chunk5UUL5EEO_cjs.Select,
         {
           label: "Role",
           value: selectedRoleId,
@@ -12799,7 +12864,7 @@ function EmployeeForm({
     departments.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
       /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-4 text-lg font-semibold", children: departmentLabel }),
       /* @__PURE__ */ jsxRuntime.jsx(
-        chunkNL3CZNBH_cjs.Select,
+        chunk5UUL5EEO_cjs.Select,
         {
           label: selectDepartments,
           value: selectedDepartments[0] ?? "",
@@ -12888,7 +12953,7 @@ function EmployeeForm({
             }
           ) }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-32", children: /* @__PURE__ */ jsxRuntime.jsx(
-            chunkNL3CZNBH_cjs.Select,
+            chunk5UUL5EEO_cjs.Select,
             {
               label: index === 0 ? "Type" : void 0,
               value: phone.type,
@@ -16070,7 +16135,7 @@ function InviteUserModal({
         )
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(
-        chunkNL3CZNBH_cjs.Select,
+        chunk5UUL5EEO_cjs.Select,
         {
           label: "Role",
           value: roleId,
@@ -25093,9 +25158,13 @@ function RecurringServiceCard({
   onDelete,
   onEdit,
   showProvider = true,
+  state,
   className,
   labels = {}
 }) {
+  if (!service) {
+    return null;
+  }
   const {
     provider = "Provider",
     occurrence = "Occurrence",
@@ -25122,56 +25191,188 @@ function RecurringServiceCard({
   const getOccurrenceLabel = (occ) => {
     return occurrenceLabels[occ] || occ;
   };
+  const effectiveState = state ?? "default";
+  const stateStyles = {
+    default: {
+      border: "border-border",
+      icon: null,
+      showNote: !service?.overrideConsent
+      // Still show consent note if needed
+    },
+    success: {
+      border: "border-success/30",
+      icon: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bg-success text-success-foreground flex h-5 w-5 shrink-0 items-center justify-center rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "svg",
+        {
+          className: "h-3 w-3",
+          fill: "none",
+          viewBox: "0 0 24 24",
+          stroke: "currentColor",
+          strokeWidth: 3,
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            "path",
+            {
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              d: "M5 13l4 4L19 7"
+            }
+          )
+        }
+      ) }),
+      showNote: false
+    },
+    primary: {
+      border: "border-primary/30",
+      icon: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bg-primary text-primary-foreground flex h-5 w-5 shrink-0 items-center justify-center rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "svg",
+        {
+          className: "h-3 w-3",
+          fill: "none",
+          viewBox: "0 0 24 24",
+          stroke: "currentColor",
+          strokeWidth: 2,
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            "path",
+            {
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              d: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+            }
+          )
+        }
+      ) }),
+      showNote: false
+    },
+    warning: {
+      border: "border-warning/30",
+      icon: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bg-warning text-warning-foreground flex h-5 w-5 shrink-0 items-center justify-center rounded-full", children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "h-3 w-3", fill: "currentColor", viewBox: "0 0 24 24", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10", fill: "currentColor" }),
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "4", className: "fill-warning" })
+      ] }) }),
+      showNote: true
+    },
+    error: {
+      border: "border-destructive/30",
+      icon: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bg-destructive text-destructive-foreground flex h-5 w-5 shrink-0 items-center justify-center rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "svg",
+        {
+          className: "h-3 w-3",
+          fill: "none",
+          viewBox: "0 0 24 24",
+          stroke: "currentColor",
+          strokeWidth: 3,
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            "path",
+            {
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              d: "M6 18L18 6M6 6l12 12"
+            }
+          )
+        }
+      ) }),
+      showNote: true
+    },
+    disabled: {
+      border: "border-border",
+      icon: null,
+      showNote: false
+    }
+  };
+  const currentStyle = stateStyles[effectiveState];
+  const isDisabled = effectiveState === "disabled";
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       className: chunkOR5DRJCW_cjs.cn(
-        "rounded-lg border bg-white shadow-sm",
-        onEdit && "cursor-pointer transition-shadow hover:shadow-md",
+        "bg-card text-card-foreground rounded-xl border-2 shadow-sm",
+        currentStyle.border,
+        isDisabled && "opacity-50",
+        onEdit && !isDisabled && "cursor-pointer transition-shadow hover:shadow-md",
         className
       ),
-      onClick: () => onEdit?.(service),
-      role: onEdit ? "button" : void 0,
-      tabIndex: onEdit ? 0 : void 0,
+      onClick: () => !isDisabled && onEdit?.(service),
+      role: onEdit && !isDisabled ? "button" : void 0,
+      tabIndex: onEdit && !isDisabled ? 0 : void 0,
       onKeyDown: (e) => {
-        if (onEdit && (e.key === "Enter" || e.key === " ")) {
+        if (onEdit && !isDisabled && (e.key === "Enter" || e.key === " ")) {
           e.preventDefault();
           onEdit(service);
         }
       },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-b bg-gray-50 px-4 py-3", children: /* @__PURE__ */ jsxRuntime.jsx("h6", { className: "font-medium", children: service.serviceName }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4", children: [
-          showProvider && service.providerName && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex items-center justify-between text-sm", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: provider }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { children: service.providerName })
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 px-4 py-3", children: [
+          currentStyle.icon,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "h6",
+            {
+              className: "truncate text-sm font-semibold",
+              title: service.serviceName,
+              children: service.serviceName
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4 px-4 pb-4", children: [
+          showProvider && service.providerName && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground mb-1 block text-xs font-semibold tracking-wider uppercase", children: provider }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-muted truncate rounded-md px-3 py-2 text-sm", children: service.providerName })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex items-center justify-between text-sm", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: occurrence }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { children: getOccurrenceLabel(service.occurrence) })
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground mb-1 block text-xs font-semibold tracking-wider uppercase", children: occurrence }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-muted rounded-md px-3 py-2 text-sm", children: getOccurrenceLabel(service.occurrence) })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("hr", { className: "my-3" }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex items-center justify-between text-sm", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: nextOrder }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { title: service.nextOrder?.toString(), children: formatDate4(service.nextOrder) })
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground mb-1 block text-xs font-semibold tracking-wider uppercase", children: nextOrder }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: "bg-muted rounded-md px-3 py-2 text-sm",
+                title: service.nextOrder?.toString(),
+                children: formatDate4(service.nextOrder)
+              }
+            )
           ] }),
-          !service.overrideConsent && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 text-right text-xs text-red-600", children: consentNote })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t bg-gray-50 px-4 py-3 text-right", children: /* @__PURE__ */ jsxRuntime.jsxs(
-          "button",
-          {
-            type: "button",
-            onClick: (e) => {
-              e.stopPropagation();
-              onDelete?.(service);
-            },
-            className: "rounded-lg border border-red-300 px-3 py-1.5 text-sm text-red-600 hover:bg-red-50",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("i", { className: "fas fa-trash mr-1" }),
-              deleteLabel
-            ]
-          }
-        ) })
+          effectiveState === "warning" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-warning/10 text-warning-800 dark:text-warning-200 rounded-md px-3 py-2 text-xs", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("i", { className: "fas fa-exclamation-triangle mr-1" }),
+            consentNote
+          ] }),
+          effectiveState === "error" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-destructive/10 text-destructive rounded-md px-3 py-2 text-xs", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("i", { className: "fas fa-times-circle mr-1" }),
+            consentNote
+          ] }),
+          !isDisabled && /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: (e) => {
+                e.stopPropagation();
+                onDelete?.(service);
+              },
+              className: "text-muted-foreground hover:text-destructive mx-auto flex items-center gap-1 text-xs transition-colors",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "svg",
+                  {
+                    className: "h-3 w-3",
+                    fill: "none",
+                    viewBox: "0 0 24 24",
+                    stroke: "currentColor",
+                    strokeWidth: 2,
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      "path",
+                      {
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+                      }
+                    )
+                  }
+                ),
+                deleteLabel
+              ]
+            }
+          )
+        ] })
       ]
     }
   );
@@ -25187,7 +25388,7 @@ function RecurringServiceAddCard({
       type: "button",
       onClick,
       className: chunkOR5DRJCW_cjs.cn(
-        "text-muted-foreground hover:border-primary hover:bg-primary/5 hover:text-primary flex min-h-[200px] w-full flex-col items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 p-4 transition-colors",
+        "text-muted-foreground hover:border-primary hover:bg-primary/5 hover:text-primary border-border bg-muted/50 flex min-h-[200px] w-full flex-col items-center justify-center rounded-xl border-2 border-dashed p-4 transition-colors",
         className
       ),
       children: [
@@ -25244,15 +25445,15 @@ function RecurringServiceSetupModal({
     onSave(formData);
   };
   if (!open) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50", children: /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-foreground/50 fixed inset-0 z-50 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       className: chunkOR5DRJCW_cjs.cn(
-        "w-full max-w-lg rounded-lg bg-white shadow-xl",
+        "bg-card text-card-foreground w-full max-w-lg rounded-lg shadow-xl",
         className
       ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-primary flex items-center justify-between border-b p-4 text-white", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-primary text-primary-foreground flex items-center justify-between p-4", children: [
           /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-lg font-semibold", children: title }),
           /* @__PURE__ */ jsxRuntime.jsx(
             "button",
@@ -25266,13 +25467,13 @@ function RecurringServiceSetupModal({
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, className: "p-6", children: [
           showProviderSelector && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("label", { className: "mb-1 block text-sm font-medium", children: provider }),
+            /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-muted-foreground mb-1 block text-xs font-semibold tracking-wider uppercase", children: provider }),
             /* @__PURE__ */ jsxRuntime.jsxs(
               "select",
               {
                 value: formData.providerId,
                 onChange: (e) => setFormData({ ...formData, providerId: e.target.value }),
-                className: "w-full rounded-lg border border-gray-300 p-2",
+                className: "bg-card border-input focus:ring-primary w-full rounded-lg border p-2 focus:ring-2 focus:outline-none",
                 required: showProviderSelector,
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: "Select provider..." }),
@@ -25282,13 +25483,13 @@ function RecurringServiceSetupModal({
             )
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("label", { className: "mb-1 block text-sm font-medium", children: service }),
+            /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-muted-foreground mb-1 block text-xs font-semibold tracking-wider uppercase", children: service }),
             /* @__PURE__ */ jsxRuntime.jsxs(
               "select",
               {
                 value: formData.serviceId,
                 onChange: (e) => setFormData({ ...formData, serviceId: e.target.value }),
-                className: "w-full rounded-lg border border-gray-300 p-2",
+                className: "bg-card border-input focus:ring-primary w-full rounded-lg border p-2 focus:ring-2 focus:outline-none",
                 required: true,
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: "Select service..." }),
@@ -25298,13 +25499,13 @@ function RecurringServiceSetupModal({
             )
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("label", { className: "mb-1 block text-sm font-medium", children: occurrence }),
+            /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-muted-foreground mb-1 block text-xs font-semibold tracking-wider uppercase", children: occurrence }),
             /* @__PURE__ */ jsxRuntime.jsxs(
               "select",
               {
                 value: formData.occurrence,
                 onChange: (e) => setFormData({ ...formData, occurrence: e.target.value }),
-                className: "w-full rounded-lg border border-gray-300 p-2",
+                className: "bg-card border-input focus:ring-primary w-full rounded-lg border p-2 focus:ring-2 focus:outline-none",
                 required: true,
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx("option", { value: "monthly", children: "Monthly" }),
@@ -25326,7 +25527,7 @@ function RecurringServiceSetupModal({
                     ...formData,
                     overrideConsent: e.target.checked
                   }),
-                  className: "h-4 w-4 rounded border-gray-300"
+                  className: "border-input accent-primary h-4 w-4 rounded"
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: overrideConsent })
@@ -25339,7 +25540,7 @@ function RecurringServiceSetupModal({
               {
                 type: "button",
                 onClick: onClose,
-                className: "rounded-lg border border-gray-300 px-4 py-2 text-gray-700 hover:bg-gray-50",
+                className: "border-border text-muted-foreground hover:bg-muted rounded-lg border px-4 py-2 transition-colors",
                 children: cancel
               }
             ),
@@ -25348,7 +25549,7 @@ function RecurringServiceSetupModal({
               {
                 type: "submit",
                 disabled: saving,
-                className: "bg-primary hover:bg-primary/90 rounded-lg px-4 py-2 text-white disabled:bg-gray-300",
+                className: "bg-primary text-primary-foreground hover:bg-primary/90 disabled:bg-muted disabled:text-muted-foreground rounded-lg px-4 py-2 transition-colors",
                 children: saving ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-2", children: [
                   /* @__PURE__ */ jsxRuntime.jsx("i", { className: "fas fa-spinner fa-spin" }),
                   "Saving..."
@@ -25428,16 +25629,16 @@ function RejectionModal({
   };
   return /* @__PURE__ */ jsxRuntime.jsx(chunkI7L6CQXR_cjs.Modal, { open, onOpenChange, size: "md", children: /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, children: [
     /* @__PURE__ */ jsxRuntime.jsx(chunkI7L6CQXR_cjs.ModalHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(chunkI7L6CQXR_cjs.ModalTitle, { children: title }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
-      (description || itemDescription) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg bg-gray-50 p-3 dark:bg-gray-800", children: [
-        description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: description }),
-        itemDescription && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm font-medium text-gray-900 dark:text-white", children: itemDescription })
+    /* @__PURE__ */ jsxRuntime.jsxs(chunkI7L6CQXR_cjs.ModalBody, { className: "space-y-4", children: [
+      (description || itemDescription) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-muted rounded-lg p-3", children: [
+        description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground text-sm", children: description }),
+        itemDescription && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-foreground mt-1 text-sm font-medium", children: itemDescription })
       ] }),
-      variant === "danger" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3 rounded-lg border border-red-200 bg-red-50 p-3 dark:border-red-800 dark:bg-red-900/20", children: [
+      variant === "danger" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-destructive/30 bg-destructive/10 flex items-start gap-3 rounded-lg border p-3", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "svg",
           {
-            className: "mt-0.5 h-5 w-5 flex-shrink-0 text-red-500",
+            className: "text-destructive mt-0.5 h-5 w-5 flex-shrink-0",
             fill: "none",
             viewBox: "0 0 24 24",
             stroke: "currentColor",
@@ -25452,14 +25653,17 @@ function RejectionModal({
             )
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-red-600 dark:text-red-400", children: "This action cannot be undone. The affected party will be notified of this rejection." })
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-destructive text-sm", children: "This action cannot be undone. The affected party will be notified of this rejection." })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300", children: "Reason for rejection" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-foreground mb-2 block text-sm font-medium", children: "Reason for rejection" }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: reasons.map((reason) => /* @__PURE__ */ jsxRuntime.jsxs(
           "label",
           {
-            className: `flex cursor-pointer items-center gap-3 rounded-lg border p-3 transition-colors ${selectedReasonId === reason.id ? "border-blue-500 bg-blue-50 dark:border-blue-400 dark:bg-blue-900/20" : "border-gray-200 hover:border-gray-300 dark:border-gray-700 dark:hover:border-gray-600"} `,
+            className: chunkOR5DRJCW_cjs.cn(
+              "flex cursor-pointer items-center gap-3 rounded-lg border p-3 transition-colors",
+              selectedReasonId === reason.id ? "border-primary bg-primary/10" : "border-border hover:border-muted-foreground/50"
+            ),
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 "input",
@@ -25469,25 +25673,25 @@ function RejectionModal({
                   value: reason.id,
                   checked: selectedReasonId === reason.id,
                   onChange: (e) => setSelectedReasonId(e.target.value),
-                  className: "h-4 w-4 border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600"
+                  className: "text-primary focus:ring-primary border-border h-4 w-4"
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-gray-900 dark:text-white", children: reason.label }),
-              reason.requiresDetails && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: "(requires details)" })
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-foreground text-sm", children: reason.label }),
+              reason.requiresDetails && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground text-xs", children: "(requires details)" })
             ]
           },
           reason.id
         )) })
       ] }),
       showDetails && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "text-foreground mb-1 block text-sm font-medium", children: [
           detailsLabel,
-          needsDetails && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-1 text-red-500", children: "*" })
+          needsDetails && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-destructive ml-1", children: "*" })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(
           "textarea",
           {
-            className: "w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:ring-2 focus:ring-blue-500 focus:outline-none dark:border-gray-600 dark:bg-gray-800 dark:text-white",
+            className: "bg-background text-foreground border-input focus:ring-ring w-full rounded-md border px-3 py-2 shadow-sm focus:ring-2 focus:outline-none",
             rows: 3,
             value: details,
             onChange: (e) => setDetails(e.target.value),
@@ -25495,7 +25699,7 @@ function RejectionModal({
             required: needsDetails
           }
         ),
-        needsDetails && !details.trim() && selectedReasonId && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-xs text-red-500", children: "Please provide additional details for this rejection reason." })
+        needsDetails && !details.trim() && selectedReasonId && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-destructive mt-1 text-xs", children: "Please provide additional details for this rejection reason." })
       ] })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs(chunkI7L6CQXR_cjs.ModalFooter, { children: [
@@ -25661,7 +25865,7 @@ function ReportDashboard({
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
-          chunkNL3CZNBH_cjs.Select,
+          chunk5UUL5EEO_cjs.Select,
           {
             options: dateRangeOptions,
             value: selectedDateRange,
@@ -25798,7 +26002,7 @@ function ReportDashboard({
     ] })
   ] });
 }
-function ResultsEntryForm({
+var ResultsEntryForm = React46__namespace.forwardRef(function ResultsEntryForm2({
   employeeFirstName,
   employeeLastName,
   initialData = {},
@@ -25808,7 +26012,7 @@ function ResultsEntryForm({
   onSubmit,
   labels = {},
   className
-}) {
+}, ref) {
   const {
     testResults = "Test Results",
     passed = "Passed",
@@ -25865,39 +26069,60 @@ function ResultsEntryForm({
       (prev) => prev.includes(contactId) ? prev.filter((id) => id !== contactId) : [...prev, contactId]
     );
   };
+  const validateAndSubmit = React46__namespace.useCallback(() => {
+    if (!result) {
+      setShowError(true);
+      return;
+    }
+    setShowError(false);
+    onSubmit({
+      result,
+      alternateText: alternateText || void 0,
+      dateDrawn: dateDrawnValue || void 0,
+      dateCompleted: dateCompletedValue || void 0,
+      recommendations: recommendations || void 0,
+      files: files.length > 0 ? files : void 0,
+      providerContacts: selectedContacts.length > 0 ? selectedContacts : void 0,
+      applyToAllServices: applyToAll
+    });
+  }, [
+    result,
+    alternateText,
+    dateDrawnValue,
+    dateCompletedValue,
+    recommendations,
+    files,
+    selectedContacts,
+    applyToAll,
+    onSubmit
+  ]);
+  React46__namespace.useImperativeHandle(
+    ref,
+    () => ({
+      submit: validateAndSubmit
+    }),
+    [validateAndSubmit]
+  );
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkOR5DRJCW_cjs.cn("space-y-6", className), children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 sm:flex-row sm:items-center", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sm:w-1/2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mr-2 font-semibold", children: testResults }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 flex gap-4 sm:mt-0 sm:inline-flex", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            chunkXHJGYBYG_cjs.Radio,
-            {
-              name: "result",
-              value: "passed",
-              label: passed,
-              checked: result === "passed",
-              onChange: () => {
-                setResult("passed");
-                setShowError(false);
-              }
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            chunkXHJGYBYG_cjs.Radio,
-            {
-              name: "result",
-              value: "failed",
-              label: failed,
-              checked: result === "failed",
-              onChange: () => {
-                setResult("failed");
-                setShowError(false);
-              }
-            }
-          )
-        ] })
-      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sm:w-1/2", children: /* @__PURE__ */ jsxRuntime.jsxs(
+        chunkXHJGYBYG_cjs.RadioGroup,
+        {
+          name: "result",
+          label: testResults,
+          value: result ?? "",
+          onValueChange: (value) => {
+            setResult(value);
+            setShowError(false);
+          },
+          orientation: "horizontal",
+          error: showError ? pleaseSelectResult : void 0,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(chunkXHJGYBYG_cjs.Radio, { value: "passed", label: passed }),
+            /* @__PURE__ */ jsxRuntime.jsx(chunkXHJGYBYG_cjs.Radio, { value: "failed", label: failed })
+          ]
+        }
+      ) }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sm:w-1/2", children: /* @__PURE__ */ jsxRuntime.jsx(
         chunkVV4N4WY6_cjs.Input,
         {
@@ -26073,57 +26298,122 @@ function ResultsEntryForm({
     ] }),
     showError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-destructive text-sm font-medium", children: pleaseSelectResult })
   ] });
-}
-function ResultsEntryCard({
+});
+function ResultsEntryModal({
   serviceName,
   employeeFirstName,
   employeeLastName,
-  isOpen = true,
-  onClose,
+  open,
+  onOpenChange,
   onSubmit,
+  isSubmitting = false,
   labels = {},
   ...props
 }) {
   const { submit = "Submit", close = "Close" } = labels;
+  const formRef = React46__namespace.useRef(null);
   const employeeName = employeeFirstName || employeeLastName ? `${employeeFirstName ?? ""} ${employeeLastName ?? ""}`.trim() : void 0;
-  if (!isOpen) return null;
-  const handleSubmit = (data) => {
-    onSubmit(data);
-    onClose();
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-background w-full max-w-2xl rounded-lg border shadow-lg", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-primary text-primary-foreground rounded-t-lg p-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-lg font-semibold", children: serviceName }),
-      employeeName && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm opacity-90", children: employeeName })
+  const handleSubmitClick = () => {
+    formRef.current?.submit();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(chunkI7L6CQXR_cjs.Modal, { open, onOpenChange, size: "2xl", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(chunkI7L6CQXR_cjs.ModalHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(chunkI7L6CQXR_cjs.ModalTitle, { children: serviceName }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(chunkI7L6CQXR_cjs.ModalBody, { children: [
+      employeeName && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-muted mb-4 rounded-lg p-3", children: /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-muted-foreground text-sm", children: [
+        "Employee:",
+        " ",
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-foreground font-medium", children: employeeName })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ResultsEntryForm,
+        {
+          ref: formRef,
+          employeeFirstName,
+          employeeLastName,
+          onSubmit,
+          labels,
+          ...props
+        }
+      )
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-6", children: /* @__PURE__ */ jsxRuntime.jsx(
-      ResultsEntryForm,
-      {
-        serviceName,
-        employeeFirstName,
-        employeeLastName,
-        onSubmit: handleSubmit,
-        labels,
-        ...props
-      }
-    ) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-3 border-t p-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(chunkMKJDBXX4_cjs.Button, { variant: "outline", onClick: onClose, children: close }),
+    /* @__PURE__ */ jsxRuntime.jsxs(chunkI7L6CQXR_cjs.ModalFooter, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         chunkMKJDBXX4_cjs.Button,
         {
-          onClick: () => {
-            const form = document.querySelector("[data-results-form]");
-            if (form) {
-              form.dispatchEvent(new Event("submit", { bubbles: true }));
-            }
-          },
-          children: submit
+          type: "button",
+          variant: "outline",
+          onClick: () => onOpenChange(false),
+          disabled: isSubmitting,
+          children: close
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        chunkMKJDBXX4_cjs.Button,
+        {
+          type: "button",
+          onClick: handleSubmitClick,
+          disabled: isSubmitting,
+          children: isSubmitting ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "svg",
+              {
+                className: "mr-2 -ml-1 h-4 w-4 animate-spin",
+                fill: "none",
+                viewBox: "0 0 24 24",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "circle",
+                    {
+                      className: "opacity-25",
+                      cx: "12",
+                      cy: "12",
+                      r: "10",
+                      stroke: "currentColor",
+                      strokeWidth: "4"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "path",
+                    {
+                      className: "opacity-75",
+                      fill: "currentColor",
+                      d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                    }
+                  )
+                ]
+              }
+            ),
+            "Processing..."
+          ] }) : submit
         }
       )
     ] })
   ] });
 }
+function ResultsEntryCard({
+  isOpen,
+  onClose,
+  onSubmit,
+  ...restProps
+}) {
+  const handleSubmit = (data) => {
+    onSubmit(data);
+    onClose();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ResultsEntryModal,
+    {
+      open: isOpen,
+      onOpenChange: (nextOpen) => {
+        if (!nextOpen) {
+          onClose();
+        }
+      },
+      onSubmit: handleSubmit,
+      ...restProps
+    }
+  );
+}
 function ScheduleCalendar({
   appointments,
   selectedDate = /* @__PURE__ */ new Date(),
@@ -27321,42 +27611,42 @@ function ServiceCard({
   return /* @__PURE__ */ jsxRuntime.jsx(
     chunkHRA4FUO6_cjs.Card,
     {
-      className: `h-full transition-all duration-200 ${onClick ? "cursor-pointer hover:shadow-md" : ""} ${selected ? "ring-2 ring-blue-500 dark:ring-blue-400" : ""} ${!currentlyOffered ? "opacity-60" : ""} ${className} `.trim(),
+      className: `h-full transition-all duration-200 ${onClick ? "cursor-pointer hover:shadow-md" : ""} ${selected ? "ring-primary ring-2" : ""} ${!currentlyOffered ? "opacity-60" : ""} ${className} `.trim(),
       onClick: onClick ? handleCardClick : void 0,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col p-4", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex items-start justify-between gap-2", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "truncate font-semibold text-gray-900 dark:text-white", children: name }),
-            category && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-0.5 text-xs text-gray-500 dark:text-gray-400", children: category })
+            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-foreground truncate font-semibold", children: name }),
+            category && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground mt-0.5 text-xs", children: category })
           ] }),
           !currentlyOffered && /* @__PURE__ */ jsxRuntime.jsx(chunkEKIQE524_cjs.Badge, { variant: "warning", size: "sm", children: "Not Offered" })
         ] }),
-        description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-3 line-clamp-2 text-sm text-gray-600 dark:text-gray-400", children: description }),
+        description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground mb-3 line-clamp-2 text-sm", children: description }),
         tags.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-3 flex flex-wrap gap-1", children: [
           tags.slice(0, 3).map((tag) => /* @__PURE__ */ jsxRuntime.jsx(
             "span",
             {
-              className: "inline-flex items-center rounded bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-600 dark:bg-gray-800 dark:text-gray-400",
+              className: "bg-muted text-muted-foreground inline-flex items-center rounded px-2 py-0.5 text-xs font-medium",
               children: tag
             },
             tag
           )),
-          tags.length > 3 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: [
+          tags.length > 3 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-muted-foreground text-xs", children: [
             "+",
             tags.length - 3
           ] })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-auto", children: [
           price !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex items-baseline justify-between", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-gray-500 uppercase dark:text-gray-400", children: "Base Price" }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg font-bold text-gray-900 dark:text-white", children: formatCurrency2(price, currency) })
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground text-xs font-medium uppercase", children: "Base Price" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-foreground text-lg font-bold", children: formatCurrency2(price, currency) })
           ] }),
           showInventory && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex items-center justify-between text-sm", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-500 dark:text-gray-400", children: "Inventory" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Inventory" }),
             /* @__PURE__ */ jsxRuntime.jsxs(
               "span",
               {
-                className: `font-medium ${isLowInventory ? "text-red-600 dark:text-red-400" : "text-gray-900 dark:text-white"}`,
+                className: `font-medium ${isLowInventory ? "text-destructive" : "text-foreground"}`,
                 children: [
                   inventoryCount,
                   inventoryTotal && ` / ${inventoryTotal}`
@@ -27364,53 +27654,19 @@ function ServiceCard({
               }
             )
           ] }),
-          (hasCustomAvailability || customPricingCount > 0) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-3 flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "svg",
-              {
-                className: "h-3.5 w-3.5",
-                fill: "none",
-                viewBox: "0 0 24 24",
-                stroke: "currentColor",
-                children: /* @__PURE__ */ jsxRuntime.jsx(
-                  "path",
-                  {
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round",
-                    strokeWidth: 2,
-                    d: "M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"
-                  }
-                )
-              }
-            ),
+          (hasCustomAvailability || customPricingCount > 0) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-muted-foreground mb-3 flex items-center gap-2 text-xs", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SlidersHorizontal, { className: "h-3.5 w-3.5" }),
             /* @__PURE__ */ jsxRuntime.jsx("span", { children: customPricingCount > 0 ? `${customPricingCount} custom pricing tier${customPricingCount > 1 ? "s" : ""}` : "Custom availability" })
           ] }),
-          (onEdit || onManage || onDelete) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-2 border-t border-gray-100 pt-2 dark:border-gray-800", children: [
+          (onEdit || onManage || onDelete) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-border flex items-center gap-2 border-t pt-2", children: [
             onDelete && /* @__PURE__ */ jsxRuntime.jsx(
               "button",
               {
                 type: "button",
                 onClick: handleDeleteClick,
-                className: "p-1.5 text-gray-400 transition-colors hover:text-red-500 dark:hover:text-red-400",
+                className: "text-muted-foreground hover:text-destructive p-1.5 transition-colors",
                 title: "Delete service",
-                children: /* @__PURE__ */ jsxRuntime.jsx(
-                  "svg",
-                  {
-                    className: "h-4 w-4",
-                    fill: "none",
-                    viewBox: "0 0 24 24",
-                    stroke: "currentColor",
-                    children: /* @__PURE__ */ jsxRuntime.jsx(
-                      "path",
-                      {
-                        strokeLinecap: "round",
-                        strokeLinejoin: "round",
-                        strokeWidth: 2,
-                        d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
-                      }
-                    )
-                  }
-                )
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "h-4 w-4" })
               }
             ),
             onEdit && /* @__PURE__ */ jsxRuntime.jsx(
@@ -27418,26 +27674,9 @@ function ServiceCard({
               {
                 type: "button",
                 onClick: handleEditClick,
-                className: "p-1.5 text-gray-400 transition-colors hover:text-blue-500 dark:hover:text-blue-400",
+                className: "text-muted-foreground hover:text-primary p-1.5 transition-colors",
                 title: "Edit service",
-                children: /* @__PURE__ */ jsxRuntime.jsx(
-                  "svg",
-                  {
-                    className: "h-4 w-4",
-                    fill: "none",
-                    viewBox: "0 0 24 24",
-                    stroke: "currentColor",
-                    children: /* @__PURE__ */ jsxRuntime.jsx(
-                      "path",
-                      {
-                        strokeLinecap: "round",
-                        strokeLinejoin: "round",
-                        strokeWidth: 2,
-                        d: "M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
-                      }
-                    )
-                  }
-                )
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pencil, { className: "h-4 w-4" })
               }
             ),
             onManage && /* @__PURE__ */ jsxRuntime.jsx(
@@ -27445,7 +27684,7 @@ function ServiceCard({
               {
                 type: "button",
                 onClick: handleManageClick,
-                className: "rounded px-3 py-1 text-sm font-medium text-blue-600 transition-colors hover:bg-blue-50 dark:text-blue-400 dark:hover:bg-blue-900/20",
+                className: "text-primary hover:bg-primary/10 ml-auto rounded px-3 py-1 text-sm font-medium transition-colors",
                 children: "Manage"
               }
             )
@@ -27462,28 +27701,11 @@ function AddServiceCard({
   return /* @__PURE__ */ jsxRuntime.jsx(
     chunkHRA4FUO6_cjs.Card,
     {
-      className: `h-full cursor-pointer border-2 border-dashed border-gray-300 bg-gray-50 transition-all duration-200 hover:border-blue-400 hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-800/50 dark:hover:border-blue-500 dark:hover:bg-gray-800 ${className} `.trim(),
+      className: `border-border bg-muted/50 hover:border-primary hover:bg-muted h-full cursor-pointer border-2 border-dashed transition-all duration-200 ${className} `.trim(),
       onClick,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full min-h-[160px] flex-col items-center justify-center p-4", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-gray-200 dark:bg-gray-700", children: /* @__PURE__ */ jsxRuntime.jsx(
-          "svg",
-          {
-            className: "h-6 w-6 text-gray-500 dark:text-gray-400",
-            fill: "none",
-            viewBox: "0 0 24 24",
-            stroke: "currentColor",
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              "path",
-              {
-                strokeLinecap: "round",
-                strokeLinejoin: "round",
-                strokeWidth: 2,
-                d: "M12 4v16m8-8H4"
-              }
-            )
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-gray-600 dark:text-gray-400", children: "Add New Service" })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-muted mb-3 flex h-12 w-12 items-center justify-center rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "text-muted-foreground h-6 w-6" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground text-sm font-medium", children: "Add New Service" })
       ] })
     }
   );
@@ -27579,7 +27801,7 @@ function ServiceGeneralSettings({
             }
           ),
           categories.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-            chunkNL3CZNBH_cjs.Select,
+            chunk5UUL5EEO_cjs.Select,
             {
               label: "Category",
               value: categoryId || "",
@@ -27666,18 +27888,18 @@ function ServiceGeneralSettings({
   ] });
 }
 function ServiceSkeleton() {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "animate-pulse rounded-lg border border-gray-200 p-4 dark:border-gray-700", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-border animate-pulse rounded-lg border p-4", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-3 flex items-start justify-between", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-5 w-32 rounded bg-gray-200 dark:bg-gray-700" }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-5 w-16 rounded bg-gray-200 dark:bg-gray-700" })
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-muted h-5 w-32 rounded" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-muted h-5 w-16 rounded" })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4 space-y-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-full rounded bg-gray-200 dark:bg-gray-700" }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-3/4 rounded bg-gray-200 dark:bg-gray-700" })
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-muted h-4 w-full rounded" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-muted h-4 w-3/4 rounded" })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-6 w-20 rounded-full bg-gray-200 dark:bg-gray-700" }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-6 w-20 rounded-full bg-gray-200 dark:bg-gray-700" })
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-muted h-6 w-20 rounded-full" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-muted h-6 w-20 rounded-full" })
     ] })
   ] });
 }
@@ -27725,7 +27947,7 @@ function ServiceGrid({
       /* @__PURE__ */ jsxRuntime.jsx(
         "svg",
         {
-          className: "mb-4 h-12 w-12 text-gray-400",
+          className: "text-muted-foreground mb-4 h-12 w-12",
           fill: "none",
           viewBox: "0 0 24 24",
           stroke: "currentColor",
@@ -27740,7 +27962,7 @@ function ServiceGrid({
           )
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-500 dark:text-gray-400", children: emptyMessage })
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: emptyMessage })
     ] });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -27854,12 +28076,16 @@ function ServicePicker({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: chunkOR5DRJCW_cjs.cn("flex flex-col", !fullWidth && "lg:max-w-md", className),
+      className: chunkOR5DRJCW_cjs.cn(
+        "bg-card text-card-foreground border-border shadow-card flex flex-col rounded-xl border",
+        !fullWidth && "lg:max-w-md",
+        className
+      ),
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-3", children: [
-          !hideHeading && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "mb-3 text-xl font-bold text-gray-900 dark:text-gray-100", children: heading }),
+          !hideHeading && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-foreground mb-3 text-xl font-bold", children: heading }),
           showSearch && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3", children: /* @__PURE__ */ jsxRuntime.jsx(SearchIcon5, { className: "h-5 w-5 text-gray-400" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3", children: /* @__PURE__ */ jsxRuntime.jsx(SearchIcon5, { className: "text-muted-foreground h-5 w-5" }) }),
             /* @__PURE__ */ jsxRuntime.jsx(
               chunkVV4N4WY6_cjs.Input,
               {
@@ -27874,8 +28100,8 @@ function ServicePicker({
           ] })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 overflow-y-auto p-3", children: [
-          error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 rounded-lg bg-red-50 p-4 text-red-700 dark:bg-red-900/20 dark:text-red-400", children: /* @__PURE__ */ jsxRuntime.jsx("strong", { children: error }) }),
-          loading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-gray-500", children: [
+          error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-destructive/10 text-destructive mb-4 rounded-lg p-4", children: /* @__PURE__ */ jsxRuntime.jsx("strong", { children: error }) }),
+          loading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-muted-foreground flex items-center gap-2", children: [
             /* @__PURE__ */ jsxRuntime.jsx(SpinnerIcon5, { className: "h-5 w-5 animate-spin" }),
             /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Loading available services..." })
           ] }) : isSearching ? (
@@ -27889,7 +28115,7 @@ function ServicePicker({
                 multiple
               },
               service.id
-            )) : /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg bg-yellow-50 p-4 text-yellow-700 dark:bg-yellow-900/20 dark:text-yellow-400", children: /* @__PURE__ */ jsxRuntime.jsx("strong", { children: emptyMessage }) }) }) })
+            )) : /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-muted text-muted-foreground rounded-lg p-4", children: /* @__PURE__ */ jsxRuntime.jsx("strong", { children: emptyMessage }) }) }) })
           ) : (
             // Grouped list - accordion style
             /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-1", children: filteredGroups.length > 0 ? filteredGroups.map((group) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -27904,7 +28130,7 @@ function ServicePicker({
                 multiple
               },
               group.id
-            )) : /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg bg-yellow-50 p-4 text-yellow-700 dark:bg-yellow-900/20 dark:text-yellow-400", children: /* @__PURE__ */ jsxRuntime.jsx("strong", { children: emptyMessage }) }) }) })
+            )) : /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-muted text-muted-foreground rounded-lg p-4", children: /* @__PURE__ */ jsxRuntime.jsx("strong", { children: emptyMessage }) }) }) })
           )
         ] })
       ]
@@ -27932,10 +28158,10 @@ function ServiceGroupItem({
         onClick: () => onToggleGroup(group.id),
         className: chunkOR5DRJCW_cjs.cn(
           "flex w-full items-center justify-between rounded-lg px-3 py-2",
-          "text-left text-sm font-medium",
-          "hover:bg-gray-100 dark:hover:bg-gray-800",
+          "text-muted-foreground text-left text-sm font-medium",
+          "hover:bg-muted",
           "transition-colors",
-          depth > 0 && "ml-4 text-gray-600 dark:text-gray-400"
+          depth > 0 && "ml-4"
         ),
         "aria-expanded": isExpanded,
         children: [
@@ -27944,7 +28170,7 @@ function ServiceGroupItem({
             hasSelection && /* @__PURE__ */ jsxRuntime.jsx(
               "span",
               {
-                className: "bg-brand-500 h-2 w-2 rounded-full",
+                className: "bg-primary h-2 w-2 rounded-full",
                 "aria-label": "Has selected items"
               }
             )
@@ -27953,7 +28179,7 @@ function ServiceGroupItem({
             ChevronIcon2,
             {
               className: chunkOR5DRJCW_cjs.cn(
-                "h-5 w-5 transition-transform",
+                "text-muted-foreground h-5 w-5 transition-transform",
                 isExpanded && "rotate-180"
               )
             }
@@ -28000,42 +28226,62 @@ function ServiceItem({
     {
       className: chunkOR5DRJCW_cjs.cn(
         "flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2",
-        "hover:bg-gray-100 dark:hover:bg-gray-800",
+        "hover:bg-muted",
         "transition-colors",
         service.disabled && "cursor-not-allowed opacity-50"
       ),
       children: [
-        multiple ? /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            type: "checkbox",
-            checked: selected,
-            onChange: onToggle,
-            disabled: service.disabled,
-            className: "text-brand-600 focus:ring-brand-500 h-4 w-4 rounded border-gray-300"
-          }
-        ) : /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            type: "radio",
-            checked: selected,
-            onChange: onToggle,
-            disabled: service.disabled,
-            className: "text-brand-600 focus:ring-brand-500 h-4 w-4 border-gray-300"
-          }
-        ),
+        multiple ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative inline-flex shrink-0 items-center justify-center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "checkbox",
+              checked: selected,
+              onChange: onToggle,
+              disabled: service.disabled,
+              className: chunkOR5DRJCW_cjs.cn(
+                "peer h-4 w-4 shrink-0 appearance-none rounded",
+                "border-input bg-background border-2",
+                "cursor-pointer transition-all duration-150",
+                "focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none",
+                "disabled:cursor-not-allowed disabled:opacity-50",
+                "checked:bg-primary-500 checked:border-primary-500"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(CheckIcon4, { className: "pointer-events-none absolute h-3 w-3 text-white opacity-0 transition-opacity peer-checked:opacity-100" })
+        ] }) : /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative inline-flex shrink-0 items-center justify-center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "radio",
+              checked: selected,
+              onChange: onToggle,
+              disabled: service.disabled,
+              className: chunkOR5DRJCW_cjs.cn(
+                "peer h-4 w-4 shrink-0 appearance-none rounded-full",
+                "border-input bg-background border-2",
+                "cursor-pointer transition-all duration-150",
+                "focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none",
+                "disabled:cursor-not-allowed disabled:opacity-50",
+                "checked:border-primary-500"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bg-primary-500 pointer-events-none absolute h-2 w-2 scale-0 rounded-full transition-transform peer-checked:scale-100" })
+        ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: service.name }),
-            service.code && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-foreground text-sm font-medium", children: service.name }),
+            service.code && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-muted-foreground text-xs", children: [
               "(",
               service.code,
               ")"
             ] })
           ] }),
-          service.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-xs text-gray-500 dark:text-gray-400", children: service.description })
+          service.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground truncate text-xs", children: service.description })
         ] }),
-        service.price !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: [
+        service.price !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-foreground text-sm font-medium", children: [
           "$",
           service.price.toFixed(2)
         ] })
@@ -28043,6 +28289,19 @@ function ServiceItem({
     }
   ) });
 }
+function CheckIcon4({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      className,
+      fill: "none",
+      viewBox: "0 0 24 24",
+      stroke: "currentColor",
+      strokeWidth: 3,
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" })
+    }
+  );
+}
 function SearchIcon5({ className }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
@@ -28512,7 +28771,7 @@ function ServiceShippingSettings({
     ] }),
     shippingEnabled && /* @__PURE__ */ jsxRuntime.jsxs(chunkHRA4FUO6_cjs.CardContent, { className: "space-y-6", children: [
       shippingMethods.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-        chunkNL3CZNBH_cjs.Select,
+        chunk5UUL5EEO_cjs.Select,
         {
           label: "Shipping Method",
           value: selectedMethodId || "",
@@ -28579,7 +28838,7 @@ function ServiceShippingSettings({
             }
           ) }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-1", children: /* @__PURE__ */ jsxRuntime.jsx(
-            chunkNL3CZNBH_cjs.Select,
+            chunk5UUL5EEO_cjs.Select,
             {
               label: "State",
               value: address.state,
@@ -28688,10 +28947,10 @@ function SetupServiceModal({
   const isValid = formData.name.trim() && formData.price >= 0;
   return /* @__PURE__ */ jsxRuntime.jsx(chunkI7L6CQXR_cjs.Modal, { open, onOpenChange, size: "lg", children: /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, children: [
     /* @__PURE__ */ jsxRuntime.jsx(chunkI7L6CQXR_cjs.ModalHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(chunkI7L6CQXR_cjs.ModalTitle, { children: title }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(chunkI7L6CQXR_cjs.ModalBody, { className: "min-w-[320px] space-y-4", children: [
       errorMessage && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border border-red-200 bg-red-50 p-3 dark:border-red-800 dark:bg-red-900/20", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-red-600 dark:text-red-400", children: errorMessage }) }),
       showServicePicker && availableServices.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-        chunkNL3CZNBH_cjs.Select,
+        chunk5UUL5EEO_cjs.Select,
         {
           label: "Select Service",
           value: formData.serviceId || "",
@@ -28719,7 +28978,7 @@ function SetupServiceModal({
           "label",
           {
             htmlFor: "setup-service-description",
-            className: "mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300",
+            className: "text-foreground mb-1 block text-sm font-medium",
             children: "Description"
           }
         ),
@@ -28727,7 +28986,7 @@ function SetupServiceModal({
           "textarea",
           {
             id: "setup-service-description",
-            className: "w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:ring-2 focus:ring-blue-500 focus:outline-none dark:border-gray-600 dark:bg-gray-800 dark:text-white",
+            className: "bg-background text-foreground border-input focus:ring-ring w-full rounded-md border px-3 py-2 shadow-sm focus:ring-2 focus:outline-none",
             rows: 3,
             value: formData.description,
             onChange: (e) => setFormData((prev) => ({
@@ -28739,7 +28998,7 @@ function SetupServiceModal({
         )
       ] }),
       categories.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-        chunkNL3CZNBH_cjs.Select,
+        chunk5UUL5EEO_cjs.Select,
         {
           label: "Category",
           value: formData.categoryId || "",
@@ -28756,12 +29015,12 @@ function SetupServiceModal({
           "label",
           {
             htmlFor: "setup-service-price",
-            className: "mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300",
+            className: "text-foreground mb-1 block text-sm font-medium",
             children: "Base Price"
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute top-1/2 left-3 -translate-y-1/2 text-gray-500", children: "$" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground absolute top-1/2 left-3 -translate-y-1/2", children: "$" }),
           /* @__PURE__ */ jsxRuntime.jsx(
             "input",
             {
@@ -28769,7 +29028,7 @@ function SetupServiceModal({
               type: "number",
               min: "0",
               step: "0.01",
-              className: "w-full rounded-md border border-gray-300 py-2 pr-4 pl-7 shadow-sm focus:ring-2 focus:ring-blue-500 focus:outline-none dark:border-gray-600 dark:bg-gray-800 dark:text-white",
+              className: "bg-background text-foreground border-input focus:ring-ring w-full rounded-md border py-2 pr-4 pl-7 shadow-sm focus:ring-2 focus:outline-none",
               value: formData.price,
               onChange: (e) => setFormData((prev) => ({
                 ...prev,
@@ -28782,14 +29041,15 @@ function SetupServiceModal({
         ] })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3 pt-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-gray-900 dark:text-white", children: "Currently Offered" }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: "Service is available for orders" })
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-foreground text-sm font-medium", children: "Currently Offered" }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground text-xs", children: "Service is available for orders" })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(
             chunkRRQGH7C5_cjs.Switch,
             {
+              className: "flex-shrink-0",
               checked: formData.currentlyOffered,
               onCheckedChange: (checked) => setFormData((prev) => ({
                 ...prev,
@@ -28798,14 +29058,15 @@ function SetupServiceModal({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-gray-900 dark:text-white", children: "Limited Inventory" }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: "Track inventory for this service" })
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-foreground text-sm font-medium", children: "Limited Inventory" }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground text-xs", children: "Track inventory for this service" })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(
             chunkRRQGH7C5_cjs.Switch,
             {
+              className: "flex-shrink-0",
               checked: formData.limitedInventory,
               onCheckedChange: (checked) => setFormData((prev) => ({
                 ...prev,
@@ -28814,7 +29075,7 @@ function SetupServiceModal({
             }
           )
         ] }),
-        formData.limitedInventory && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-4 border-l-2 border-gray-200 pl-4 dark:border-gray-700", children: /* @__PURE__ */ jsxRuntime.jsx(
+        formData.limitedInventory && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-border ml-4 border-l-2 pl-4", children: /* @__PURE__ */ jsxRuntime.jsx(
           chunkVV4N4WY6_cjs.Input,
           {
             label: "Initial Inventory",
@@ -28828,14 +29089,15 @@ function SetupServiceModal({
             placeholder: "Enter quantity"
           }
         ) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-gray-900 dark:text-white", children: "Auto-Accept Referrals" }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: "Automatically accept incoming referrals" })
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-foreground text-sm font-medium", children: "Auto-Accept Referrals" }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground text-xs", children: "Automatically accept incoming referrals" })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(
             chunkRRQGH7C5_cjs.Switch,
             {
+              className: "flex-shrink-0",
               checked: formData.autoAcceptReferrals,
               onCheckedChange: (checked) => setFormData((prev) => ({
                 ...prev,
@@ -30903,7 +31165,7 @@ function SSOConfigForm({
     ] })
   ] });
 }
-function CheckIcon4({ className }) {
+function CheckIcon5({ className }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
     {
@@ -30988,66 +31250,89 @@ function StepIndicator({
     if (allowCompletedStepsOnly) return index <= currentStep;
     return true;
   };
+  const circleButton = (step, index, status, clickable) => /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      onClick: () => handleStepClick(index),
+      disabled: !clickable,
+      className: `${sizes.circle} flex shrink-0 items-center justify-center rounded-full font-medium transition-all duration-200 focus:ring-2 focus:ring-offset-2 focus:outline-none dark:focus:ring-offset-neutral-900 ${clickable ? "cursor-pointer" : "cursor-default"} ${step.hasError ? "bg-red-100 text-red-600 focus:ring-red-500 dark:bg-red-900/30 dark:text-red-400" : status === "completed" ? "bg-primary-600 focus:ring-primary-500 dark:bg-primary-500 text-white" : status === "current" ? "bg-primary-600 ring-primary-600 focus:ring-primary-500 dark:bg-primary-500 dark:ring-primary-500 text-white ring-2 ring-offset-2 dark:ring-offset-neutral-900" : "bg-neutral-200 text-neutral-500 focus:ring-neutral-400 dark:bg-neutral-700 dark:text-neutral-300"}`.trim(),
+      "aria-current": status === "current" ? "step" : void 0,
+      children: step.hasError ? /* @__PURE__ */ jsxRuntime.jsx(ErrorIcon, { className: "h-4 w-4" }) : status === "completed" ? step.icon || /* @__PURE__ */ jsxRuntime.jsx(CheckIcon5, { className: "h-4 w-4" }) : step.icon || /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: status === "current" ? "text-white" : "text-neutral-500 dark:text-neutral-300",
+          children: index + 1
+        }
+      )
+    }
+  );
+  const stepLabel = (step, status, horizontal) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${horizontal ? "text-center" : "flex-1"} ${sizes.text}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "p",
+      {
+        className: `font-medium ${step.hasError ? "text-red-600 dark:text-red-400" : status === "completed" || status === "current" ? "text-neutral-900 dark:text-white" : "text-neutral-500 dark:text-neutral-400"}`.trim(),
+        children: [
+          step.label,
+          step.optional && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-normal text-neutral-500 dark:text-neutral-400", children: [
+            " ",
+            "(optional)"
+          ] })
+        ]
+      }
+    ),
+    step.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-0.5 text-neutral-500 dark:text-neutral-400", children: step.description })
+  ] });
+  if (orientation === "horizontal") {
+    return /* @__PURE__ */ jsxRuntime.jsx("nav", { className: `flex ${className}`.trim(), "aria-label": "Progress", children: steps.map((step, index) => {
+      const status = getStepStatus(index);
+      const isLast = index === steps.length - 1;
+      const clickable = isClickable(index);
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col items-center", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center", children: [
+          index > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: `flex-1 ${sizes.line} ${index <= currentStep ? "bg-primary-600 dark:bg-primary-500" : "bg-neutral-200 dark:bg-neutral-700"}`,
+              "aria-hidden": "true"
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1" }),
+          circleButton(step, index, status, clickable),
+          !isLast ? /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: `flex-1 ${sizes.line} ${index < currentStep ? "bg-primary-600 dark:bg-primary-500" : "bg-neutral-200 dark:bg-neutral-700"}`,
+              "aria-hidden": "true"
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2", children: stepLabel(step, status, true) })
+      ] }, step.id);
+    }) });
+  }
   return /* @__PURE__ */ jsxRuntime.jsx(
     "nav",
     {
-      className: ` ${orientation === "horizontal" ? "flex items-center" : "flex flex-col"} ${sizes.gap} ${className} `.trim(),
+      className: `flex flex-col ${sizes.gap} ${className}`.trim(),
       "aria-label": "Progress",
       children: steps.map((step, index) => {
         const status = getStepStatus(index);
         const isLast = index === steps.length - 1;
         const clickable = isClickable(index);
         return /* @__PURE__ */ jsxRuntime.jsxs(React46__namespace.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
-            {
-              className: `flex items-center ${orientation === "vertical" ? "flex-row" : "flex-col"} ${sizes.gap} `.trim(),
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: () => handleStepClick(index),
-                    disabled: !clickable,
-                    className: ` ${sizes.circle} flex items-center justify-center rounded-full font-medium transition-all duration-200 focus:ring-2 focus:ring-offset-2 focus:outline-none ${clickable ? "cursor-pointer" : "cursor-default"} ${step.hasError ? "bg-red-100 text-red-600 focus:ring-red-500 dark:bg-red-900/30 dark:text-red-400" : status === "completed" ? "bg-blue-600 text-white focus:ring-blue-500 dark:bg-blue-500" : status === "current" ? "bg-blue-600 text-white ring-2 ring-blue-600 ring-offset-2 focus:ring-blue-500 dark:bg-blue-500 dark:ring-blue-500" : "bg-gray-200 text-gray-500 focus:ring-gray-400 dark:bg-gray-700 dark:text-gray-400"} `.trim(),
-                    "aria-current": status === "current" ? "step" : void 0,
-                    children: step.hasError ? /* @__PURE__ */ jsxRuntime.jsx(ErrorIcon, { className: "h-4 w-4" }) : status === "completed" ? step.icon || /* @__PURE__ */ jsxRuntime.jsx(CheckIcon4, { className: "h-4 w-4" }) : step.icon || /* @__PURE__ */ jsxRuntime.jsx("span", { children: index + 1 })
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsxs(
-                  "div",
-                  {
-                    className: ` ${orientation === "horizontal" ? "text-center" : "flex-1"} ${sizes.text} `.trim(),
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsxs(
-                        "p",
-                        {
-                          className: `font-medium ${step.hasError ? "text-red-600 dark:text-red-400" : status === "completed" || status === "current" ? "text-gray-900 dark:text-white" : "text-gray-500 dark:text-gray-400"} `.trim(),
-                          children: [
-                            step.label,
-                            step.optional && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-normal text-gray-500 dark:text-gray-400", children: [
-                              " ",
-                              "(optional)"
-                            ] })
-                          ]
-                        }
-                      ),
-                      step.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-0.5 text-gray-500 dark:text-gray-400", children: step.description })
-                    ]
-                  }
-                )
-              ]
-            }
-          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex flex-row items-center ${sizes.gap}`, children: [
+            circleButton(step, index, status, clickable),
+            stepLabel(step, status, false)
+          ] }),
           !isLast && /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
-              className: ` ${orientation === "horizontal" ? "min-w-8 flex-1" : "ml-4 min-h-4"} flex items-center justify-center`.trim(),
+              className: `flex min-h-4 justify-center ${size === "sm" ? "w-6" : size === "lg" ? "w-10" : "w-8"}`,
               "aria-hidden": "true",
               children: /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
                 {
-                  className: ` ${orientation === "horizontal" ? "w-full" : "h-full min-h-4"} ${sizes.line} ${index < currentStep ? "bg-blue-600 dark:bg-blue-500" : "bg-gray-200 dark:bg-gray-700"} `.trim()
+                  className: `h-full min-h-4 ${sizes.line} ${index < currentStep ? "bg-primary-600 dark:bg-primary-500" : "bg-neutral-200 dark:bg-neutral-700"}`
                 }
               )
             }
@@ -31191,11 +31476,68 @@ function TimelineProgress({
   steps,
   currentStep,
   showTimestamps = true,
+  size = "md",
+  pulse = true,
   className
 }) {
   const visibleSteps = steps.filter((step) => !step.hidden);
   const currentIndex = visibleSteps.findIndex((s) => s.key === currentStep);
-  const getStepState = (index) => {
+  const sizeConfig = {
+    sm: {
+      wrapper: "h-6 w-6",
+      completed: "h-5 w-5",
+      current: "h-6 w-6",
+      pending: "h-5 w-5",
+      error: "h-6 w-6",
+      checkIcon: "h-3 w-3",
+      xIcon: "h-3.5 w-3.5",
+      currentDot: "h-1.5 w-1.5",
+      pendingDot: "h-1.5 w-1.5",
+      connector: "h-px",
+      timestamp: "text-[10px]",
+      label: "text-[10px]",
+      padding: "py-2",
+      labelMargin: "mt-1.5",
+      timestampMargin: "mb-1"
+    },
+    md: {
+      wrapper: "h-10 w-10",
+      completed: "h-8 w-8",
+      current: "h-10 w-10",
+      pending: "h-8 w-8",
+      error: "h-10 w-10",
+      checkIcon: "h-4 w-4",
+      xIcon: "h-5 w-5",
+      currentDot: "h-2.5 w-2.5",
+      pendingDot: "h-2 w-2",
+      connector: "h-0.5",
+      timestamp: "text-xs",
+      label: "text-xs",
+      padding: "py-4",
+      labelMargin: "mt-2.5",
+      timestampMargin: "mb-2"
+    },
+    lg: {
+      wrapper: "h-14 w-14",
+      completed: "h-11 w-11",
+      current: "h-14 w-14",
+      pending: "h-11 w-11",
+      error: "h-14 w-14",
+      checkIcon: "h-5 w-5",
+      xIcon: "h-6 w-6",
+      currentDot: "h-3.5 w-3.5",
+      pendingDot: "h-2.5 w-2.5",
+      connector: "h-1",
+      timestamp: "text-sm",
+      label: "text-sm",
+      padding: "py-6",
+      labelMargin: "mt-3",
+      timestampMargin: "mb-3"
+    }
+  };
+  const sizes = sizeConfig[size];
+  const getStepState = (index, step) => {
+    if (step.error) return "error";
     if (index < currentIndex) return "completed";
     if (index === currentIndex) return "current";
     return "pending";
@@ -31207,77 +31549,123 @@ function TimelineProgress({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: chunkOR5DRJCW_cjs.cn("flex items-start overflow-x-auto py-4", className),
+      className: chunkOR5DRJCW_cjs.cn(sizes.padding, "overflow-x-auto", className),
       role: "progressbar",
       "aria-valuenow": currentIndex + 1,
       "aria-valuemin": 1,
       "aria-valuemax": visibleSteps.length,
-      children: visibleSteps.map((step, index) => {
-        const state = getStepState(index);
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative flex items-start", children: visibleSteps.map((step, index) => {
+        const state = getStepState(index, step);
         const isLast = index === visibleSteps.length - 1;
-        return /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: chunkOR5DRJCW_cjs.cn(
-              "flex flex-1 flex-col items-center",
-              !isLast && "mr-2"
+        return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col items-center", children: [
+          showTimestamps && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: chunkOR5DRJCW_cjs.cn(
+                "h-4 text-center text-neutral-500 dark:text-neutral-400",
+                sizes.timestamp,
+                sizes.timestampMargin
+              ),
+              children: step.completedAt ? formatTimestamp(step.completedAt) : "\xA0"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex w-full items-center", children: [
+            index > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: chunkOR5DRJCW_cjs.cn(
+                  "flex-1",
+                  sizes.connector,
+                  state === "completed" || state === "current" || state === "error" ? "bg-primary-600 dark:bg-primary-500" : "bg-neutral-200 dark:bg-neutral-700"
+                )
+              }
             ),
-            children: [
-              showTimestamps && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-1 h-5 text-center text-xs text-gray-500", children: step.completedAt ? formatTimestamp(step.completedAt) : "\xA0" }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "div",
-                  {
-                    className: chunkOR5DRJCW_cjs.cn(
-                      "h-1 flex-1",
-                      index === 0 ? "bg-transparent" : "",
-                      state === "completed" || state === "current" && index > 0 ? "bg-brand-500" : "bg-gray-200 dark:bg-gray-700"
-                    )
-                  }
+            index === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: chunkOR5DRJCW_cjs.cn(
+                  "flex shrink-0 items-center justify-center",
+                  sizes.wrapper
                 ),
-                /* @__PURE__ */ jsxRuntime.jsxs(
+                children: /* @__PURE__ */ jsxRuntime.jsxs(
                   "div",
                   {
                     className: chunkOR5DRJCW_cjs.cn(
-                      "relative z-10 flex h-6 w-6 shrink-0 items-center justify-center rounded-full border-2",
-                      state === "completed" && "border-brand-500 bg-brand-500 text-white",
-                      state === "current" && "border-brand-500 bg-white dark:bg-gray-900",
-                      state === "pending" && "border-gray-300 bg-white dark:border-gray-600 dark:bg-gray-900"
+                      "relative z-10 flex items-center justify-center rounded-full transition-all duration-200",
+                      state === "completed" && chunkOR5DRJCW_cjs.cn(
+                        "bg-primary-100 text-primary-600 ring-primary-200 dark:bg-primary-900/40 dark:text-primary-400 dark:ring-primary-800 ring-2",
+                        sizes.completed
+                      ),
+                      state === "current" && chunkOR5DRJCW_cjs.cn(
+                        "bg-primary-500 shadow-primary-500/30 ring-primary-100 dark:bg-primary-500 dark:ring-primary-900/50 text-white shadow-md ring-4",
+                        sizes.current,
+                        pulse && "animate-pulse"
+                      ),
+                      state === "pending" && chunkOR5DRJCW_cjs.cn(
+                        "bg-neutral-100 text-neutral-400 ring-2 ring-neutral-200 dark:bg-neutral-800 dark:text-neutral-500 dark:ring-neutral-700",
+                        sizes.pending
+                      ),
+                      state === "error" && chunkOR5DRJCW_cjs.cn(
+                        "bg-red-500 text-white shadow-md ring-4 shadow-red-500/30 ring-red-100 dark:bg-red-500 dark:ring-red-900/50",
+                        sizes.error
+                      )
                     ),
                     children: [
-                      state === "completed" && /* @__PURE__ */ jsxRuntime.jsx(CheckIcon5, { className: "h-3 w-3" }),
-                      state === "current" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-brand-500 h-2 w-2 rounded-full" })
+                      state === "completed" && /* @__PURE__ */ jsxRuntime.jsx(CheckIcon6, { className: sizes.checkIcon }),
+                      state === "current" && /* @__PURE__ */ jsxRuntime.jsx(
+                        "div",
+                        {
+                          className: chunkOR5DRJCW_cjs.cn(
+                            "rounded-full bg-white",
+                            sizes.currentDot
+                          )
+                        }
+                      ),
+                      state === "pending" && /* @__PURE__ */ jsxRuntime.jsx(
+                        "div",
+                        {
+                          className: chunkOR5DRJCW_cjs.cn(
+                            "rounded-full bg-neutral-300 dark:bg-neutral-600",
+                            sizes.pendingDot
+                          )
+                        }
+                      ),
+                      state === "error" && /* @__PURE__ */ jsxRuntime.jsx(XIcon4, { className: sizes.xIcon })
                     ]
                   }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "div",
-                  {
-                    className: chunkOR5DRJCW_cjs.cn(
-                      "h-1 flex-1",
-                      isLast ? "bg-transparent" : "",
-                      state === "completed" ? "bg-brand-500" : "bg-gray-200 dark:bg-gray-700"
-                    )
-                  }
                 )
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  className: chunkOR5DRJCW_cjs.cn(
-                    "mt-2 text-center text-xs font-medium capitalize",
-                    state === "completed" && "text-brand-600 dark:text-brand-400",
-                    state === "current" && "text-gray-900 dark:text-gray-100",
-                    state === "pending" && "text-gray-400 dark:text-gray-500"
-                  ),
-                  children: step.label
-                }
-              )
-            ]
-          },
-          step.key
-        );
-      })
+              }
+            ),
+            !isLast && /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: chunkOR5DRJCW_cjs.cn(
+                  "flex-1",
+                  sizes.connector,
+                  state === "completed" ? "bg-primary-600 dark:bg-primary-500" : "bg-neutral-200 dark:bg-neutral-700"
+                )
+              }
+            ),
+            isLast && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: chunkOR5DRJCW_cjs.cn(
+                "text-center font-medium capitalize",
+                sizes.label,
+                sizes.labelMargin,
+                state === "completed" && "text-primary-700 dark:text-primary-300",
+                state === "current" && "font-semibold text-neutral-900 dark:text-white",
+                state === "pending" && "text-neutral-400 dark:text-neutral-500",
+                state === "error" && "font-semibold text-red-600 dark:text-red-400"
+              ),
+              children: step.label
+            }
+          )
+        ] }, step.key);
+      }) })
     }
   );
 }
@@ -31326,48 +31714,56 @@ function TimelineEventList({
   const getEventColor = (type) => {
     switch (type) {
       case "message":
-        return "bg-blue-100 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400";
+        return "bg-blue-50 text-blue-500 ring-blue-100 dark:bg-blue-900/20 dark:text-blue-400 dark:ring-blue-800/40";
       case "status":
-        return "bg-green-100 text-green-600 dark:bg-green-900/30 dark:text-green-400";
+        return "bg-green-50 text-green-500 ring-green-100 dark:bg-green-900/20 dark:text-green-400 dark:ring-green-800/40";
       case "attachment":
-        return "bg-purple-100 text-purple-600 dark:bg-purple-900/30 dark:text-purple-400";
+        return "bg-purple-50 text-purple-500 ring-purple-100 dark:bg-purple-900/20 dark:text-purple-400 dark:ring-purple-800/40";
       case "assignment":
-        return "bg-orange-100 text-orange-600 dark:bg-orange-900/30 dark:text-orange-400";
+        return "bg-orange-50 text-orange-500 ring-orange-100 dark:bg-orange-900/20 dark:text-orange-400 dark:ring-orange-800/40";
       case "note":
-        return "bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400";
+        return "bg-neutral-50 text-neutral-500 ring-neutral-100 dark:bg-neutral-800/50 dark:text-neutral-400 dark:ring-neutral-700/40";
       default:
-        return "bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400";
+        return "bg-neutral-50 text-neutral-500 ring-neutral-100 dark:bg-neutral-800/50 dark:text-neutral-400 dark:ring-neutral-700/40";
     }
   };
   if (events.length === 0) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkOR5DRJCW_cjs.cn("py-8 text-center text-gray-500", className), children: "No activity yet." });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkOR5DRJCW_cjs.cn("py-8 text-center text-neutral-500", className), children: "No activity yet." });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkOR5DRJCW_cjs.cn("space-y-4", className), children: events.map((event, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex gap-4", children: [
-    index < events.length - 1 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-10 left-5 h-full w-px bg-gray-200 dark:bg-gray-700" }),
-    /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkOR5DRJCW_cjs.cn("relative", className), children: [
+    events.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: chunkOR5DRJCW_cjs.cn(
-          "relative z-10 flex h-10 w-10 shrink-0 items-center justify-center rounded-full",
-          getEventColor(event.type)
-        ),
-        children: getEventIcon(event.type)
+        className: "absolute top-0 bottom-0 left-5 w-px bg-neutral-200 dark:bg-neutral-700",
+        "aria-hidden": "true"
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 pt-1", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "font-medium text-gray-900 dark:text-gray-100", children: event.title }),
-          event.author && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: [
-            "by ",
-            event.author
-          ] })
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-6", children: events.map((event) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: chunkOR5DRJCW_cjs.cn(
+            "relative z-10 flex h-10 w-10 shrink-0 items-center justify-center rounded-full ring-2",
+            getEventColor(event.type)
+          ),
+          children: getEventIcon(event.type)
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 pt-0.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "font-semibold text-neutral-900 dark:text-neutral-100", children: event.title }),
+            event.author && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-neutral-500 dark:text-neutral-400", children: [
+              "by ",
+              event.author
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("time", { className: "shrink-0 pt-0.5 text-xs text-neutral-400 dark:text-neutral-500", children: formatTime4(event.timestamp) })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("time", { className: "shrink-0 text-xs text-gray-400 dark:text-gray-500", children: formatTime4(event.timestamp) })
-      ] }),
-      event.content && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm text-gray-600 dark:text-gray-300", children: event.content })
-    ] })
-  ] }, event.id)) });
+        event.content && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1.5 text-sm text-neutral-600 dark:text-neutral-300", children: event.content })
+      ] })
+    ] }, event.id)) })
+  ] });
 }
 TimelineEventList.displayName = "TimelineEventList";
 function OrderConfirmation({
@@ -31388,21 +31784,21 @@ function OrderConfirmation({
       role: "dialog",
       "aria-modal": "true",
       "aria-labelledby": "order-confirmation-title",
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full max-w-md rounded-xl bg-white p-6 shadow-xl dark:bg-gray-800", children: [
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full max-w-md rounded-xl bg-white p-6 shadow-xl dark:bg-neutral-800", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-6 flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-20 w-20 items-center justify-center rounded-full bg-green-100 dark:bg-green-900/30", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "animate-bounce", children: /* @__PURE__ */ jsxRuntime.jsx(PlaneIcon, { className: "h-10 w-10 text-green-600 dark:text-green-400" }) }) }) }),
         /* @__PURE__ */ jsxRuntime.jsx(
           "h2",
           {
             id: "order-confirmation-title",
-            className: "mb-2 text-center text-2xl font-bold text-gray-900 dark:text-gray-100",
+            className: "mb-2 text-center text-2xl font-bold text-neutral-900 dark:text-neutral-100",
             children: "Order Submitted!"
           }
         ),
-        orderNumber && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "mb-4 text-center text-sm text-gray-500 dark:text-gray-400", children: [
+        orderNumber && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "mb-4 text-center text-sm text-neutral-500 dark:text-neutral-400", children: [
           "Order #",
           orderNumber
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-6 text-center text-gray-600 dark:text-gray-300", children: message }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-6 text-center text-neutral-600 dark:text-neutral-300", children: message }),
         /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
@@ -31410,8 +31806,8 @@ function OrderConfirmation({
             onClick: onClose,
             className: chunkOR5DRJCW_cjs.cn(
               "w-full rounded-lg px-4 py-3 font-medium",
-              "bg-brand-600 hover:bg-brand-700 text-white",
-              "dark:bg-brand-500 dark:hover:bg-brand-600",
+              "bg-primary-600 hover:bg-primary-700 text-white",
+              "dark:bg-primary-500 dark:hover:bg-primary-600",
               "transition-colors"
             ),
             children: "Got It"
@@ -31422,7 +31818,7 @@ function OrderConfirmation({
   );
 }
 OrderConfirmation.displayName = "OrderConfirmation";
-function CheckIcon5({ className }) {
+function CheckIcon6({ className }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
     {
@@ -31442,6 +31838,26 @@ function CheckIcon5({ className }) {
     }
   );
 }
+function XIcon4({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      className,
+      fill: "none",
+      viewBox: "0 0 24 24",
+      stroke: "currentColor",
+      strokeWidth: 3,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          d: "M6 18L18 6M6 6l12 12"
+        }
+      )
+    }
+  );
+}
 function MessageIcon({ className }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
@@ -31562,7 +31978,7 @@ function PlaneIcon({ className }) {
     }
   );
 }
-var CheckIcon6 = () => /* @__PURE__ */ jsxRuntime.jsx(
+var CheckIcon7 = () => /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
   {
     className: "h-5 w-5",
@@ -31627,7 +32043,7 @@ var InfoIcon = () => /* @__PURE__ */ jsxRuntime.jsx(
     )
   }
 );
-var XIcon4 = () => /* @__PURE__ */ jsxRuntime.jsx(
+var XIcon5 = () => /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
   {
     className: "h-4 w-4",
@@ -31664,7 +32080,7 @@ var variantStyles = {
   }
 };
 var defaultIcons = {
-  success: /* @__PURE__ */ jsxRuntime.jsx(CheckIcon6, {}),
+  success: /* @__PURE__ */ jsxRuntime.jsx(CheckIcon7, {}),
   error: /* @__PURE__ */ jsxRuntime.jsx(XCircleIcon, {}),
   warning: /* @__PURE__ */ jsxRuntime.jsx(ExclamationIcon, {}),
   info: /* @__PURE__ */ jsxRuntime.jsx(InfoIcon, {})
@@ -31710,7 +32126,7 @@ function Toast({
             onClick: onClose,
             className: "flex-shrink-0 rounded p-1 transition-colors hover:bg-black/10 focus:ring-2 focus:ring-current focus:outline-none dark:hover:bg-white/10",
             "aria-label": "Dismiss notification",
-            children: /* @__PURE__ */ jsxRuntime.jsx(XIcon4, {})
+            children: /* @__PURE__ */ jsxRuntime.jsx(XIcon5, {})
           }
         )
       ]
@@ -31864,6 +32280,7 @@ function WebChartReportViewer({
   onDateRangeChange,
   webchartBrand: webchartBrand2 = { name: "Enterprise Health" },
   onReconnect,
+  columnRenderers,
   className,
   labels = {}
 }) {
@@ -31873,17 +32290,16 @@ function WebChartReportViewer({
     reconnect = "Reconnect",
     noReports = "No reports available",
     loadingData = "Fetching latest data from Enterprise Health...",
-    close = "Close",
     dateFrom = "From",
     dateTo = "To"
   } = labels;
-  const [offcanvasOpen, setOffcanvasOpen] = React46__namespace.useState(false);
+  const [modalOpen, setModalOpen] = React46__namespace.useState(false);
   const handleReportClick = (report) => {
     onReportSelect?.(report);
-    setOffcanvasOpen(true);
+    setModalOpen(true);
   };
   const handleClose = () => {
-    setOffcanvasOpen(false);
+    setModalOpen(false);
     onClose?.();
   };
   const formatDate4 = (date) => {
@@ -31891,144 +32307,153 @@ function WebChartReportViewer({
     return d.toISOString().split("T")[0];
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkOR5DRJCW_cjs.cn("webchart-report-viewer", className), children: [
-    error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 rounded-lg border border-yellow-300 bg-yellow-50 p-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("i", { className: "fas fa-exclamation-triangle mt-0.5 text-yellow-600" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-yellow-800", children: error }),
-        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "mt-1 text-sm text-yellow-700", children: [
-          "If this error persists, you can try reconnecting",
-          " ",
-          webchartBrand2.name,
-          "."
-        ] }),
+    error && /* @__PURE__ */ jsxRuntime.jsxs(chunkIY7UQPDO_cjs.Alert, { variant: "warning", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, {}), className: "mb-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(chunkIY7UQPDO_cjs.AlertTitle, { children: error }),
+      /* @__PURE__ */ jsxRuntime.jsxs(chunkIY7UQPDO_cjs.AlertDescription, { children: [
+        "If this error persists, you can try reconnecting",
+        " ",
+        webchartBrand2.name,
+        ".",
         onReconnect && /* @__PURE__ */ jsxRuntime.jsxs(
-          "button",
+          chunkMKJDBXX4_cjs.Button,
           {
-            type: "button",
+            variant: "secondary",
+            size: "sm",
             onClick: onReconnect,
-            className: "mt-2 rounded-lg border border-gray-300 bg-white px-4 py-2 text-gray-700 hover:bg-gray-50",
+            className: "mt-2",
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx("i", { className: "fas fa-link mr-2" }),
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Link, { className: "mr-2 h-4 w-4" }),
               reconnect
             ]
           }
         )
       ] })
-    ] }) }),
-    !error && !loading && /* @__PURE__ */ jsxRuntime.jsxs(
-      "button",
-      {
-        type: "button",
-        onClick: onRefreshReports,
-        className: "bg-primary hover:bg-primary/90 mb-4 rounded-lg px-4 py-2 text-white",
-        title: refreshReports,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("i", { className: "fas fa-sync-alt mr-2" }),
-          refreshReports
-        ]
-      }
-    ),
+    ] }),
+    !error && !loading && /* @__PURE__ */ jsxRuntime.jsxs(chunkMKJDBXX4_cjs.Button, { onClick: onRefreshReports, className: "mb-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { className: "mr-2 h-4 w-4" }),
+      refreshReports
+    ] }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4 grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3", children: loading ? (
       // Loading placeholders
-      /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: [1, 2, 3, 4, 5, 6].map((i) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "animate-pulse", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-12 rounded-lg bg-gray-200" }) }, i)) })
+      /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: [1, 2, 3, 4, 5, 6].map((i) => /* @__PURE__ */ jsxRuntime.jsx(chunkN3QTYHRZ_cjs.Skeleton, { variant: "button", className: "h-12 w-full" }, i)) })
     ) : reports.length > 0 ? (
       // Report buttons
       reports.map((report) => /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
+        chunkHRA4FUO6_cjs.Card,
         {
-          type: "button",
+          interactive: true,
+          padding: "none",
+          role: "button",
+          tabIndex: 0,
+          "aria-label": report.description ? `${report.name}: ${report.description}` : report.name,
           onClick: () => handleReportClick(report),
-          className: "border-primary text-primary hover:bg-primary w-full truncate rounded-lg border bg-white p-3 text-left hover:text-white",
-          title: report.description ? `${report.name}: ${report.description}` : report.name,
-          children: report.name
+          onKeyDown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              handleReportClick(report);
+            }
+          },
+          className: "cursor-pointer",
+          children: /* @__PURE__ */ jsxRuntime.jsx(chunkHRA4FUO6_cjs.CardContent, { className: "p-3", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: "block truncate text-sm font-medium",
+              title: report.description ? `${report.name}: ${report.description}` : report.name,
+              children: report.name
+            }
+          ) })
         },
         report.id
       ))
     ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-muted-foreground col-span-full py-8 text-center", children: noReports }) }),
-    offcanvasOpen && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fixed inset-0 z-50 flex", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          role: "button",
-          tabIndex: 0,
-          "aria-label": "Close panel",
-          className: "fixed inset-0 bg-black/50",
-          onClick: handleClose,
-          onKeyDown: (e) => e.key === "Enter" && handleClose()
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fixed right-0 bottom-0 left-0 flex h-3/4 flex-col rounded-t-xl bg-white shadow-xl", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between border-b p-4", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("h5", { className: "text-lg font-semibold", children: currentReport?.name || "Report Results" }),
-            reportResult?.error ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-yellow-500", title: reportResult.error, children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "fas fa-exclamation-triangle" }) }) : reportResult?.success ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-green-500", children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "fas fa-check-circle" }) }) : null
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              onClick: handleClose,
-              className: "text-2xl text-gray-400 hover:text-gray-600",
-              "aria-label": close,
-              children: "\xD7"
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-3 border-b bg-gray-50 p-4", children: [
-          onDateRangeChange && dateRange && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "text-muted-foreground text-sm", children: [
-              dateFrom,
-              ":"
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      chunkI7L6CQXR_cjs.Modal,
+      {
+        open: modalOpen,
+        onOpenChange: (open) => {
+          if (!open) {
+            handleClose();
+          }
+        },
+        size: "4xl",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(chunkI7L6CQXR_cjs.ModalHeader, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(chunkI7L6CQXR_cjs.ModalTitle, { children: currentReport?.name || "Report Results" }),
+              reportResult?.error ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { className: "h-5 w-5 text-yellow-500" }) : reportResult?.success ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-5 w-5 text-green-500" }) : null
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "input",
-              {
-                type: "date",
-                value: formatDate4(dateRange.start),
-                onChange: (e) => onDateRangeChange(e.target.value, dateRange.end),
-                className: "rounded-lg border border-gray-300 px-2 py-1 text-sm"
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "text-muted-foreground text-sm", children: [
-              dateTo,
-              ":"
+            /* @__PURE__ */ jsxRuntime.jsx(chunkI7L6CQXR_cjs.ModalClose, {})
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-muted/50 flex flex-wrap items-center gap-3 border-b px-6 py-4", children: [
+            onDateRangeChange && dateRange && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "text-muted-foreground text-sm", children: [
+                dateFrom,
+                ":"
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                chunkVV4N4WY6_cjs.Input,
+                {
+                  type: "date",
+                  size: "sm",
+                  value: formatDate4(dateRange.start),
+                  onChange: (e) => onDateRangeChange(e.target.value, dateRange.end),
+                  className: "w-auto"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "text-muted-foreground text-sm", children: [
+                dateTo,
+                ":"
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                chunkVV4N4WY6_cjs.Input,
+                {
+                  type: "date",
+                  size: "sm",
+                  value: formatDate4(dateRange.end),
+                  onChange: (e) => onDateRangeChange(dateRange.start, e.target.value),
+                  className: "w-auto"
+                }
+              )
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx(
-              "input",
+              chunkMKJDBXX4_cjs.Button,
               {
-                type: "date",
-                value: formatDate4(dateRange.end),
-                onChange: (e) => onDateRangeChange(dateRange.start, e.target.value),
-                className: "rounded-lg border border-gray-300 px-2 py-1 text-sm"
+                size: "sm",
+                onClick: onRefreshReport,
+                title: refreshReport,
+                "aria-label": refreshReport,
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { className: "h-4 w-4" })
               }
             )
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
+          /* @__PURE__ */ jsxRuntime.jsx(chunkI7L6CQXR_cjs.ModalBody, { className: "max-h-[60vh] overflow-auto", children: loadingReport ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-64 flex-col items-center justify-center", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(chunkJYMQJ32S_cjs.Spinner, { size: "xl" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground mt-4", children: loadingData })
+          ] }) : reportResult?.error ? /* @__PURE__ */ jsxRuntime.jsx(chunkIY7UQPDO_cjs.Alert, { variant: "danger", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, {}), children: /* @__PURE__ */ jsxRuntime.jsx(chunkIY7UQPDO_cjs.AlertDescription, { children: reportResult.error }) }) : reportResult?.data ? typeof reportResult.data === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
             {
-              type: "button",
-              onClick: onRefreshReport,
-              className: "bg-primary hover:bg-primary/90 rounded-lg px-3 py-1.5 text-white",
-              title: refreshReport,
-              children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "fas fa-sync-alt" })
+              className: "prose dark:prose-invert max-w-none",
+              dangerouslySetInnerHTML: { __html: reportResult.data }
             }
-          )
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-auto p-4", children: loadingReport ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col items-center justify-center", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-primary h-12 w-12 animate-spin rounded-full border-4 border-t-transparent" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground mt-4", children: loadingData })
-        ] }) : reportResult?.error ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg border border-red-200 bg-red-50 p-4 text-red-600", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("i", { className: "fas fa-exclamation-circle mr-2" }),
-          reportResult.error
-        ] }) : reportResult?.data ? typeof reportResult.data === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: "prose max-w-none",
-            dangerouslySetInnerHTML: { __html: reportResult.data }
-          }
-        ) : /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "overflow-auto rounded-lg bg-gray-100 p-4 text-sm", children: JSON.stringify(reportResult.data, null, 2) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-muted-foreground py-8 text-center", children: "No data available" }) })
-      ] })
-    ] })
+          ) : Array.isArray(reportResult.data) && reportResult.data.length > 0 ? (() => {
+            const rows = reportResult.data;
+            const columns = Object.keys(rows[0]);
+            return /* @__PURE__ */ jsxRuntime.jsxs(chunkLZEY55QZ_cjs.Table, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(chunkLZEY55QZ_cjs.TableHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(chunkLZEY55QZ_cjs.TableRow, { children: columns.map((key) => /* @__PURE__ */ jsxRuntime.jsx(chunkLZEY55QZ_cjs.TableHead, { children: key }, key)) }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(chunkLZEY55QZ_cjs.TableBody, { children: rows.map((row) => {
+                const rowKey = columns.map((key) => String(row[key])).join("|") || JSON.stringify(row);
+                return /* @__PURE__ */ jsxRuntime.jsx(chunkLZEY55QZ_cjs.TableRow, { children: columns.map((key) => /* @__PURE__ */ jsxRuntime.jsx(chunkLZEY55QZ_cjs.TableCell, { children: columnRenderers?.[key] ? columnRenderers[key](row[key], row) : row[key] == null ? "" : String(row[key]) }, key)) }, rowKey);
+              }) })
+            ] });
+          })() : /* @__PURE__ */ jsxRuntime.jsx(chunkLZEY55QZ_cjs.Table, { children: /* @__PURE__ */ jsxRuntime.jsx(chunkLZEY55QZ_cjs.TableBody, { children: Object.entries(
+            reportResult.data
+          ).map(([key, val]) => /* @__PURE__ */ jsxRuntime.jsxs(chunkLZEY55QZ_cjs.TableRow, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(chunkLZEY55QZ_cjs.TableCell, { className: "text-muted-foreground font-medium", children: key }),
+            /* @__PURE__ */ jsxRuntime.jsx(chunkLZEY55QZ_cjs.TableCell, { children: val == null ? "" : String(val) })
+          ] }, key)) }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-muted-foreground py-8 text-center", children: "No data available" }) })
+        ]
+      }
+    )
   ] });
 }
 function ReportDatePicker({
@@ -32055,7 +32480,7 @@ function ReportDatePicker({
     setPreset(value);
     const now = /* @__PURE__ */ new Date();
     let start;
-    let end = now;
+    const end = now;
     switch (value) {
       case "today":
         start = now;
@@ -32080,34 +32505,40 @@ function ReportDatePicker({
     }
     onChange?.(start, end);
   };
+  const selectOptions = presets.map((p) => ({
+    value: p.value,
+    label: p.label
+  }));
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkOR5DRJCW_cjs.cn("flex flex-wrap items-center gap-3", className), children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      "select",
+      chunk5UUL5EEO_cjs.Select,
       {
         value: preset,
-        onChange: (e) => handlePresetChange(e.target.value),
-        className: "rounded-lg border border-gray-300 px-3 py-2",
-        children: presets.map((p) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: p.value, children: p.label }, p.value))
+        onValueChange: (value) => handlePresetChange(value),
+        options: selectOptions,
+        size: "sm"
       }
     ),
     preset === "custom" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(
-        "input",
+        chunkVV4N4WY6_cjs.Input,
         {
           type: "date",
+          size: "sm",
           value: formatDate4(startDate),
           onChange: (e) => onChange?.(e.target.value, endDate || /* @__PURE__ */ new Date()),
-          className: "rounded-lg border border-gray-300 px-3 py-2"
+          className: "w-auto"
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "to" }),
       /* @__PURE__ */ jsxRuntime.jsx(
-        "input",
+        chunkVV4N4WY6_cjs.Input,
         {
           type: "date",
+          size: "sm",
           value: formatDate4(endDate),
           onChange: (e) => onChange?.(startDate || /* @__PURE__ */ new Date(), e.target.value),
-          className: "rounded-lg border border-gray-300 px-3 py-2"
+          className: "w-auto"
         }
       )
     ] })
@@ -32366,6 +32797,14 @@ function WebsiteInputGroup({
 }
 WebsiteInputGroup.displayName = "WebsiteInputGroup";
 
+Object.defineProperty(exports, "Textarea", {
+  enumerable: true,
+  get: function () { return chunkB7YGVKTE_cjs.Textarea; }
+});
+Object.defineProperty(exports, "textareaVariants", {
+  enumerable: true,
+  get: function () { return chunkB7YGVKTE_cjs.textareaVariants; }
+});
 Object.defineProperty(exports, "ThemeProvider", {
   enumerable: true,
   get: function () { return chunkVDMQCSXT_cjs.ThemeProvider; }
@@ -32400,7 +32839,11 @@ Object.defineProperty(exports, "VisuallyHidden", {
 });
 Object.defineProperty(exports, "brands", {
   enumerable: true,
-  get: function () { return chunk6DP6RKUA_cjs.brands; }
+  get: function () { return chunkCLJZHS7Y_cjs.brands; }
+});
+Object.defineProperty(exports, "enterpriseHealthBrand", {
+  enumerable: true,
+  get: function () { return chunkP52GA3GJ_cjs.enterpriseHealthBrand; }
 });
 Object.defineProperty(exports, "miewebBrand", {
   enumerable: true,
@@ -32434,17 +32877,13 @@ Object.defineProperty(exports, "defaultBrand", {
   enumerable: true,
   get: function () { return chunkO5HS7ZND_cjs.defaultBrand; }
 });
-Object.defineProperty(exports, "enterpriseHealthBrand", {
-  enumerable: true,
-  get: function () { return chunkP52GA3GJ_cjs.enterpriseHealthBrand; }
-});
 Object.defineProperty(exports, "Select", {
   enumerable: true,
-  get: function () { return chunkNL3CZNBH_cjs.Select; }
+  get: function () { return chunk5UUL5EEO_cjs.Select; }
 });
 Object.defineProperty(exports, "selectTriggerVariants", {
   enumerable: true,
-  get: function () { return chunkNL3CZNBH_cjs.selectTriggerVariants; }
+  get: function () { return chunk5UUL5EEO_cjs.selectTriggerVariants; }
 });
 Object.defineProperty(exports, "Skeleton", {
   enumerable: true,
@@ -32466,6 +32905,22 @@ Object.defineProperty(exports, "skeletonVariants", {
   enumerable: true,
   get: function () { return chunkN3QTYHRZ_cjs.skeletonVariants; }
 });
+Object.defineProperty(exports, "Slider", {
+  enumerable: true,
+  get: function () { return chunkBV75DAKO_cjs.Slider; }
+});
+Object.defineProperty(exports, "sliderRangeVariants", {
+  enumerable: true,
+  get: function () { return chunkBV75DAKO_cjs.sliderRangeVariants; }
+});
+Object.defineProperty(exports, "sliderThumbVariants", {
+  enumerable: true,
+  get: function () { return chunkBV75DAKO_cjs.sliderThumbVariants; }
+});
+Object.defineProperty(exports, "sliderTrackVariants", {
+  enumerable: true,
+  get: function () { return chunkBV75DAKO_cjs.sliderTrackVariants; }
+});
 Object.defineProperty(exports, "FullPageSpinner", {
   enumerable: true,
   get: function () { return chunkJYMQJ32S_cjs.FullPageSpinner; }
@@ -32562,14 +33017,6 @@ Object.defineProperty(exports, "textVariants", {
   enumerable: true,
   get: function () { return chunkQDGZBDBI_cjs.textVariants; }
 });
-Object.defineProperty(exports, "Textarea", {
-  enumerable: true,
-  get: function () { return chunkB7YGVKTE_cjs.Textarea; }
-});
-Object.defineProperty(exports, "textareaVariants", {
-  enumerable: true,
-  get: function () { return chunkB7YGVKTE_cjs.textareaVariants; }
-});
 Object.defineProperty(exports, "Modal", {
   enumerable: true,
   get: function () { return chunkI7L6CQXR_cjs.Modal; }
@@ -33258,6 +33705,7 @@ exports.ReportLink = ReportLink;
 exports.ResourceLink = ResourceLink;
 exports.ResultsEntryCard = ResultsEntryCard;
 exports.ResultsEntryForm = ResultsEntryForm;
+exports.ResultsEntryModal = ResultsEntryModal;
 exports.SSOConfigForm = SSOConfigForm;
 exports.ScheduleCalendar = ScheduleCalendar;
 exports.SearchResultsMessage = SearchResultsMessage;