subos-frontend 1.0.13 → 1.0.15

package/dist/index.js

@@ -1,13 +1,13 @@
 'use strict';
 
-var React9 = require('react');
+var React8 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var reactRouterDom = require('react-router-dom');
 
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React9__default = /*#__PURE__*/_interopDefault(React9);
+var React8__default = /*#__PURE__*/_interopDefault(React8);
 
 // src/config/envConfig.ts
 function getEnvVar(key, fallback) {
@@ -216,10 +216,10 @@ var transactionApi = {
   getInvoice: (transactionId) => apiRequest(`${ENDPOINTS.TRANSACTIONS}/${transactionId}/invoice`)
 };
 var useSubscription = () => {
-  const [subscription, setSubscription] = React9.useState(null);
-  const [loading, setLoading] = React9.useState(false);
-  const [error, setError] = React9.useState(null);
-  const fetchSubscription = React9.useCallback(async (externalId) => {
+  const [subscription, setSubscription] = React8.useState(null);
+  const [loading, setLoading] = React8.useState(false);
+  const [error, setError] = React8.useState(null);
+  const fetchSubscription = React8.useCallback(async (externalId) => {
     if (!externalId || externalId === "undefined" || externalId.trim() === "") {
       setError("Invalid user ID. Please ensure you are properly authenticated.");
       setLoading(false);
@@ -244,7 +244,7 @@ var useSubscription = () => {
       setLoading(false);
     }
   }, [loading]);
-  const clearSubscription = React9.useCallback(() => {
+  const clearSubscription = React8.useCallback(() => {
     setSubscription(null);
     setError(null);
   }, []);
@@ -381,14 +381,14 @@ var formatDate = (dateString, format = "date") => {
 
 // src/hooks/usePlans.ts
 var usePlans = () => {
-  const [plans, setPlans] = React9.useState([]);
-  const [filteredPlans, setFilteredPlans] = React9.useState([]);
-  const [selectedPlan, setSelectedPlan] = React9.useState(null);
-  const [tierFilter, setTierFilter] = React9.useState("all");
-  const [billingCycle, setBillingCycle] = React9.useState("monthly");
-  const [loading, setLoading] = React9.useState(false);
-  const [error, setError] = React9.useState(null);
-  const fetchPlans = React9.useCallback(async () => {
+  const [plans, setPlans] = React8.useState([]);
+  const [filteredPlans, setFilteredPlans] = React8.useState([]);
+  const [selectedPlan, setSelectedPlan] = React8.useState(null);
+  const [tierFilter, setTierFilter] = React8.useState("all");
+  const [billingCycle, setBillingCycle] = React8.useState("monthly");
+  const [loading, setLoading] = React8.useState(false);
+  const [error, setError] = React8.useState(null);
+  const fetchPlans = React8.useCallback(async () => {
     if (loading) return;
     setLoading(true);
     setError(null);
@@ -410,7 +410,7 @@ var usePlans = () => {
       setLoading(false);
     }
   }, [loading]);
-  React9.useEffect(() => {
+  React8.useEffect(() => {
     if (plans.length > 0 && tierFilter === "all") {
       const uniqueUnits = getUniqueCandidateUnits(plans);
       if (uniqueUnits.length > 0) {
@@ -418,16 +418,16 @@ var usePlans = () => {
       }
     }
   }, [plans, tierFilter]);
-  React9.useEffect(() => {
+  React8.useEffect(() => {
     let filtered = [...plans];
     filtered = filterPlansByBillingCycle(filtered, billingCycle);
     filtered = filterPlansByTier(filtered, tierFilter);
     setFilteredPlans(filtered);
   }, [plans, tierFilter, billingCycle]);
-  const handlePlanSelect = React9.useCallback((plan) => {
+  const handlePlanSelect = React8.useCallback((plan) => {
     setSelectedPlan(plan);
   }, []);
-  const handleUpgrade = React9.useCallback(async (externalId) => {
+  const handleUpgrade = React8.useCallback(async (externalId) => {
     var _a;
     if (!selectedPlan) return;
     try {
@@ -445,14 +445,14 @@ var usePlans = () => {
       alert("An error occurred. Please try again.");
     }
   }, [selectedPlan]);
-  const clearPlans = React9.useCallback(() => {
+  const clearPlans = React8.useCallback(() => {
     setPlans([]);
     setFilteredPlans([]);
     setSelectedPlan(null);
     setError(null);
     setTierFilter("all");
   }, []);
-  const clearSelectedPlan2 = React9.useCallback(() => {
+  const clearSelectedPlan2 = React8.useCallback(() => {
     setSelectedPlan(null);
   }, []);
   const dropdownOptions = getDropdownOptions(plans);
@@ -536,18 +536,18 @@ var useTransactions = ({
   initialFilters = {},
   autoFetch = false
 }) => {
-  const [transactions, setTransactions] = React9.useState([]);
-  const [allTransactions, setAllTransactions] = React9.useState([]);
-  const [loading, setLoading] = React9.useState(false);
-  const [error, setError] = React9.useState(null);
-  const [filters, setFilters] = React9.useState({
+  const [transactions, setTransactions] = React8.useState([]);
+  const [allTransactions, setAllTransactions] = React8.useState([]);
+  const [loading, setLoading] = React8.useState(false);
+  const [error, setError] = React8.useState(null);
+  const [filters, setFilters] = React8.useState({
     ...DEFAULT_FILTERS,
     ...initialFilters
   });
-  const [meta, setMeta] = React9.useState(null);
-  const [isBackendPaginated, setIsBackendPaginated] = React9.useState(false);
-  const hasAutoFetchedRef = React9.useRef(false);
-  const fetchTransactions = React9.useCallback(async () => {
+  const [meta, setMeta] = React8.useState(null);
+  const [isBackendPaginated, setIsBackendPaginated] = React8.useState(false);
+  const hasAutoFetchedRef = React8.useRef(false);
+  const fetchTransactions = React8.useCallback(async () => {
     if (!externalId) return;
     setLoading(true);
     setError(null);
@@ -591,7 +591,7 @@ var useTransactions = ({
       setLoading(false);
     }
   }, [externalId, filters]);
-  const updateFilters = React9.useCallback((newFilters) => {
+  const updateFilters = React8.useCallback((newFilters) => {
     setFilters((prev) => ({
       ...prev,
       ...newFilters,
@@ -599,7 +599,7 @@ var useTransactions = ({
       page: newFilters.page !== void 0 ? newFilters.page : 1
     }));
   }, []);
-  React9.useEffect(() => {
+  React8.useEffect(() => {
     if (!isBackendPaginated && allTransactions.length > 0) {
       const filteredTransactions = applyFrontendFilters(allTransactions, filters);
       const paginatedResult = applyFrontendPagination(filteredTransactions, filters);
@@ -607,19 +607,19 @@ var useTransactions = ({
       setMeta(paginatedResult.meta);
     }
   }, [filters, allTransactions, isBackendPaginated]);
-  const clearFilters = React9.useCallback(() => {
+  const clearFilters = React8.useCallback(() => {
     setFilters(DEFAULT_FILTERS);
   }, []);
-  const refetch = React9.useCallback(async () => {
+  const refetch = React8.useCallback(async () => {
     await fetchTransactions();
   }, [fetchTransactions]);
-  React9.useEffect(() => {
+  React8.useEffect(() => {
     if (autoFetch && externalId && !hasAutoFetchedRef.current) {
       hasAutoFetchedRef.current = true;
       fetchTransactions();
     }
   }, [autoFetch, externalId, fetchTransactions]);
-  React9.useEffect(() => {
+  React8.useEffect(() => {
     if (!autoFetch) return;
     const hasNonPaginationFilters = filters.startDate !== void 0 || filters.endDate !== void 0 || filters.status !== void 0;
     const shouldFetch = isBackendPaginated || allTransactions.length === 0 && hasNonPaginationFilters;
@@ -646,10 +646,10 @@ var usePagination = ({
   initialPage = 1,
   initialLimit = 10
 } = {}) => {
-  const [currentPage, setCurrentPage] = React9.useState(initialPage);
-  const [limit, setLimitState] = React9.useState(initialLimit);
-  const [meta, setMeta] = React9.useState(null);
-  const goToPage = React9.useCallback((page) => {
+  const [currentPage, setCurrentPage] = React8.useState(initialPage);
+  const [limit, setLimitState] = React8.useState(initialLimit);
+  const [meta, setMeta] = React8.useState(null);
+  const goToPage = React8.useCallback((page) => {
     if (meta) {
       const validPage = Math.max(1, Math.min(page, meta.totalPages));
       setCurrentPage(validPage);
@@ -657,29 +657,29 @@ var usePagination = ({
       setCurrentPage(Math.max(1, page));
     }
   }, [meta]);
-  const goToNextPage = React9.useCallback(() => {
+  const goToNextPage = React8.useCallback(() => {
     if (meta && meta.hasNextPage) {
       setCurrentPage((prev) => prev + 1);
     }
   }, [meta]);
-  const goToPreviousPage = React9.useCallback(() => {
+  const goToPreviousPage = React8.useCallback(() => {
     if (meta && meta.hasPreviousPage) {
       setCurrentPage((prev) => prev - 1);
     }
   }, [meta]);
-  const goToFirstPage = React9.useCallback(() => {
+  const goToFirstPage = React8.useCallback(() => {
     setCurrentPage(1);
   }, []);
-  const goToLastPage = React9.useCallback(() => {
+  const goToLastPage = React8.useCallback(() => {
     if (meta) {
       setCurrentPage(meta.totalPages);
     }
   }, [meta]);
-  const setLimit = React9.useCallback((newLimit) => {
+  const setLimit = React8.useCallback((newLimit) => {
     setLimitState(newLimit);
     setCurrentPage(1);
   }, []);
-  const reset = React9.useCallback(() => {
+  const reset = React8.useCallback(() => {
     setCurrentPage(initialPage);
     setLimitState(initialLimit);
     setMeta(null);
@@ -702,9 +702,9 @@ var useCancelSubscription = ({
   onSuccess,
   onError
 } = {}) => {
-  const [loading, setLoading] = React9.useState(false);
-  const [error, setError] = React9.useState(null);
-  const cancelSubscription = React9.useCallback(async (externalId, options) => {
+  const [loading, setLoading] = React8.useState(false);
+  const [error, setError] = React8.useState(null);
+  const cancelSubscription = React8.useCallback(async (externalId, options) => {
     if (!externalId) {
       const errorMsg = "External ID is required";
       setError(errorMsg);
@@ -733,7 +733,7 @@ var useCancelSubscription = ({
       setLoading(false);
     }
   }, [onSuccess, onError]);
-  const reset = React9.useCallback(() => {
+  const reset = React8.useCallback(() => {
     setLoading(false);
     setError(null);
   }, []);
@@ -773,9 +773,9 @@ var useCustomerPortal = ({
   onSuccess,
   onError
 } = {}) => {
-  const [loading, setLoading] = React9.useState(false);
-  const [error, setError] = React9.useState(null);
-  const openCustomerPortal = React9.useCallback(async (externalId) => {
+  const [loading, setLoading] = React8.useState(false);
+  const [error, setError] = React8.useState(null);
+  const openCustomerPortal = React8.useCallback(async (externalId) => {
     var _a;
     if (!externalId) {
       const errorMsg = "External ID is required";
@@ -813,7 +813,7 @@ var useCustomerPortal = ({
       setLoading(false);
     }
   }, [onSuccess, onError]);
-  const reset = React9.useCallback(() => {
+  const reset = React8.useCallback(() => {
     setLoading(false);
     setError(null);
   }, []);
@@ -824,9 +824,9 @@ var useCustomerPortal = ({
     reset
   };
 };
-var UpgradeContext = React9.createContext(void 0);
+var UpgradeContext = React8.createContext(void 0);
 var UpgradeProvider = ({ children }) => {
-  const [isUpgradeSummaryVisible, setIsUpgradeSummaryVisible] = React9.useState(false);
+  const [isUpgradeSummaryVisible, setIsUpgradeSummaryVisible] = React8.useState(false);
   const setUpgradeSummaryVisible = (visible) => {
     setIsUpgradeSummaryVisible(visible);
   };
@@ -846,7 +846,7 @@ var UpgradeProvider = ({ children }) => {
   );
 };
 var useUpgrade = () => {
-  const context = React9.useContext(UpgradeContext);
+  const context = React8.useContext(UpgradeContext);
   if (context === void 0) {
     throw new Error("useUpgrade must be used within an UpgradeProvider");
   }
@@ -860,22 +860,34 @@ var BillingCycleToggle = ({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: "flex rounded-lg p-1",
-      style: { backgroundColor: "var(--subos-muted, #f8f9fa)" },
+      className: "inline-flex rounded-lg p-1",
+      style: {
+        backgroundColor: "var(--subos-muted, #f1f5f9)",
+        border: "1px solid var(--subos-border, #e2e8f0)"
+      },
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
             onClick: () => onBillingCycleChange("monthly"),
-            className: `px-4 py-2 rounded-md text-sm font-medium transition-colors ${billingCycle === "monthly" ? `subos-btn-primary text-white shadow-sm ${className || ""}` : ""}`,
-            style: billingCycle !== "monthly" ? {
-              color: "var(--subos-muted-foreground, #6c757d)"
-            } : {},
+            className: `px-6 py-2 rounded-md text-sm font-medium transition-all duration-200 ${className || ""}`,
+            style: billingCycle === "monthly" ? {
+              backgroundColor: "var(--subos-primary-500, #ef4444)",
+              color: "white",
+              boxShadow: "0 2px 4px 0 rgba(0, 0, 0, 0.1)",
+              fontWeight: "600"
+            } : {
+              backgroundColor: "transparent",
+              color: "var(--subos-muted-foreground, #64748b)",
+              fontWeight: "500"
+            },
             onMouseEnter: billingCycle !== "monthly" ? (e) => {
-              e.currentTarget.style.color = "var(--subos-foreground, inherit)";
+              e.currentTarget.style.color = "var(--subos-foreground, #1e293b)";
+              e.currentTarget.style.backgroundColor = "rgba(255, 255, 255, 0.8)";
             } : void 0,
             onMouseLeave: billingCycle !== "monthly" ? (e) => {
-              e.currentTarget.style.color = "var(--subos-muted-foreground, #6c757d)";
+              e.currentTarget.style.color = "var(--subos-muted-foreground, #64748b)";
+              e.currentTarget.style.backgroundColor = "transparent";
             } : void 0,
             children: "Monthly"
           }
@@ -884,15 +896,24 @@ var BillingCycleToggle = ({
           "button",
           {
             onClick: () => onBillingCycleChange("yearly"),
-            className: `px-4 py-2 rounded-md text-sm font-medium transition-colors ${billingCycle === "yearly" ? `subos-btn-primary text-white shadow-sm ${className || ""}` : ""}`,
-            style: billingCycle !== "yearly" ? {
-              color: "var(--subos-muted-foreground, #6c757d)"
-            } : {},
+            className: `px-6 py-2 rounded-md text-sm font-medium transition-all duration-200 ${className || ""}`,
+            style: billingCycle === "yearly" ? {
+              backgroundColor: "var(--subos-primary-500, #ef4444)",
+              color: "white",
+              boxShadow: "0 2px 4px 0 rgba(0, 0, 0, 0.1)",
+              fontWeight: "600"
+            } : {
+              backgroundColor: "transparent",
+              color: "var(--subos-muted-foreground, #64748b)",
+              fontWeight: "500"
+            },
             onMouseEnter: billingCycle !== "yearly" ? (e) => {
-              e.currentTarget.style.color = "var(--subos-foreground, inherit)";
+              e.currentTarget.style.color = "var(--subos-foreground, #1e293b)";
+              e.currentTarget.style.backgroundColor = "rgba(255, 255, 255, 0.8)";
             } : void 0,
             onMouseLeave: billingCycle !== "yearly" ? (e) => {
-              e.currentTarget.style.color = "var(--subos-muted-foreground, #6c757d)";
+              e.currentTarget.style.color = "var(--subos-muted-foreground, #64748b)";
+              e.currentTarget.style.backgroundColor = "transparent";
             } : void 0,
             children: "Yearly"
           }
@@ -909,8 +930,8 @@ var TierFilterDropdown = ({
   selectedValue,
   onSelect
 }) => {
-  const dropdownRef = React9.useRef(null);
-  React9.useEffect(() => {
+  const dropdownRef = React8.useRef(null);
+  React8.useEffect(() => {
     const handleClickOutside = (event) => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
         if (isOpen) {
@@ -932,31 +953,74 @@ var TierFilterDropdown = ({
       "button",
       {
         onClick: onToggle,
-        className: "w-full max-w-xs px-4 py-3 border border-gray-300 rounded-lg bg-white text-left focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500 flex items-center justify-between hover:border-gray-400 transition-colors",
+        className: "w-full min-w-[200px] px-4 py-3 border rounded-lg text-left focus:outline-none focus:ring-2 flex items-center justify-between transition-all duration-200",
+        style: {
+          backgroundColor: "var(--subos-background, #ffffff)",
+          borderColor: isOpen ? "var(--subos-primary-500, #3f51b5)" : "var(--subos-border, #e2e8f0)",
+          color: "var(--subos-foreground, #1e293b)",
+          boxShadow: isOpen ? "0 0 0 1px var(--subos-primary-500, #3f51b5)" : "none"
+        },
+        onMouseEnter: (e) => {
+          if (!isOpen) {
+            e.currentTarget.style.borderColor = "var(--subos-muted-foreground, #64748b)";
+          }
+        },
+        onMouseLeave: (e) => {
+          if (!isOpen) {
+            e.currentTarget.style.borderColor = "var(--subos-border, #e2e8f0)";
+          }
+        },
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-700", children: currentSelectionText }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--subos-foreground, #1e293b)" }, children: currentSelectionText }),
           /* @__PURE__ */ jsxRuntime.jsx(
             "svg",
             {
-              className: `w-5 h-5 text-gray-400 transition-transform ${isOpen ? "rotate-180" : ""}`,
+              className: `w-5 h-5 transition-transform duration-200 ${isOpen ? "rotate-180" : ""}`,
               fill: "none",
               stroke: "currentColor",
               viewBox: "0 0 24 24",
+              style: { color: "var(--subos-muted-foreground, #64748b)" },
               children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })
             }
           )
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-full left-0 w-full max-w-xs mt-1 bg-white border border-gray-200 rounded-lg shadow-lg z-50", children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
+    isOpen && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
       {
-        onClick: () => handleOptionSelect(option.value),
-        className: `w-full px-4 py-3 text-left hover:bg-gray-50 transition-colors border-b border-gray-100 last:border-b-0 first:rounded-t-lg last:rounded-b-lg ${selectedValue === option.value ? "bg-green-50 text-green-700" : "text-gray-700"}`,
-        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: option.label }) })
-      },
-      option.value
-    )) })
+        className: "absolute top-full left-0 w-full min-w-[200px] mt-1 border rounded-lg z-50",
+        style: {
+          backgroundColor: "var(--subos-background, #ffffff)",
+          borderColor: "var(--subos-border, #e2e8f0)",
+          boxShadow: "var(--subos-shadow-card, 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06))"
+        },
+        children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => handleOptionSelect(option.value),
+            className: "w-full px-4 py-3 text-left transition-colors border-b last:border-b-0 first:rounded-t-lg last:rounded-b-lg",
+            style: {
+              backgroundColor: selectedValue === option.value ? "var(--subos-primary-50, #eff6ff)" : "transparent",
+              color: selectedValue === option.value ? "var(--subos-primary-700, #1d4ed8)" : "var(--subos-foreground, #1e293b)",
+              borderColor: "var(--subos-border, #f1f5f9)"
+            },
+            onMouseEnter: (e) => {
+              if (selectedValue !== option.value) {
+                e.currentTarget.style.backgroundColor = "var(--subos-accent, #f8fafc)";
+              }
+            },
+            onMouseLeave: (e) => {
+              if (selectedValue !== option.value) {
+                e.currentTarget.style.backgroundColor = "transparent";
+              }
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: option.label }) })
+          },
+          option.value
+        ))
+      }
+    )
   ] });
 };
 var CheckIcon = ({ className = "w-5 h-5", style }) => {
@@ -1141,7 +1205,7 @@ var PlanSelector = ({
   onBillingCycleChange,
   activePlanCode
 }) => {
-  const [isDropdownOpen, setIsDropdownOpen] = React9.useState(false);
+  const [isDropdownOpen, setIsDropdownOpen] = React8.useState(false);
   const handleDropdownToggle = () => {
     setIsDropdownOpen(!isDropdownOpen);
   };
@@ -1206,8 +1270,12 @@ var ChangeCardButton = ({
   const handleClick = async () => {
     await openCustomerPortal(externalId);
   };
-  const defaultClassName = "text-sm text-blue-600 font-medium hover:text-blue-700 hover:underline disabled:opacity-50 disabled:cursor-not-allowed";
+  const defaultClassName = "text-sm font-medium transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed";
   const finalClassName = className || defaultClassName;
+  const getStyles = () => ({
+    color: loading ? "var(--subos-muted-foreground, #64748b)" : "var(--subos-primary-600, #2563eb)",
+    textDecoration: "none"
+  });
   return /* @__PURE__ */ jsxRuntime.jsx(
     "button",
     {
@@ -1215,7 +1283,16 @@ var ChangeCardButton = ({
       disabled: loading,
       className: finalClassName,
       type: "button",
-      children: loading ? "Opening..." : children || "Change Card"
+      style: getStyles(),
+      onMouseEnter: !loading ? (e) => {
+        e.currentTarget.style.color = "var(--subos-primary-700, #1d4ed8)";
+        e.currentTarget.style.textDecoration = "underline";
+      } : void 0,
+      onMouseLeave: !loading ? (e) => {
+        e.currentTarget.style.color = "var(--subos-primary-600, #2563eb)";
+        e.currentTarget.style.textDecoration = "none";
+      } : void 0,
+      children: loading ? "Opening..." : children || "Manage Billing"
     }
   );
 };
@@ -1820,7 +1897,7 @@ var TransactionPagination = ({
           children: "Previous"
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center space-x-1", children: getVisiblePages().map((page, index) => /* @__PURE__ */ jsxRuntime.jsx(React9__default.default.Fragment, { children: page === "..." ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-3 py-2 text-sm text-gray-500", children: "..." }) : /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center space-x-1", children: getVisiblePages().map((page, index) => /* @__PURE__ */ jsxRuntime.jsx(React8__default.default.Fragment, { children: page === "..." ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-3 py-2 text-sm text-gray-500", children: "..." }) : /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
           onClick: () => onPageChange(page),
@@ -1866,7 +1943,7 @@ var TransactionModal = ({
     autoFetch: true
     // Enable auto-fetch so it works when modal opens
   });
-  React9.useEffect(() => {
+  React8.useEffect(() => {
     if (isOpen && externalId) {
       fetchTransactions();
     }
@@ -2005,7 +2082,7 @@ var SubscriptionInfoGrid = ({
         return "grid-cols-1 md:grid-cols-3";
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `grid ${getGridClass()} gap-4 ${className}`, children: displayFields.map((field) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: field.className, children: [
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `grid ${getGridClass()} gap-4 ${className}`, children: displayFields.map((field) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `p-4 border border-gray-200 rounded-lg bg-white ${field.className || ""}`, children: [
     /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500", children: field.label }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium", children: field.getValue(subscription) })
   ] }, field.key)) });
@@ -2055,7 +2132,7 @@ var SubscriptionUsageDisplay = ({
     const displayValue = metric.formatValue ? metric.formatValue(used, total) : formatDefaultValue(used, total);
     const percentage = getProgressPercentage(used, total);
     const shouldShowProgress = showProgressBars || metric.showProgress;
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 border border-gray-200 rounded-lg bg-white space-y-1", children: [
       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500", children: metric.label }),
       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium", children: displayValue }),
       shouldShowProgress && total > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full bg-gray-200 rounded-full h-2", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -2075,13 +2152,39 @@ var SubscriptionTransactionButton = ({
   disabled = false,
   variant = "text"
 }) => {
-  const baseClasses = variant === "text" ? "text-sm text-green-600 font-medium hover:text-green-700 hover:underline disabled:text-green-300 disabled:cursor-not-allowed" : "px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 disabled:bg-green-300 disabled:cursor-not-allowed text-sm font-medium";
+  const baseClasses = variant === "text" ? "text-sm font-medium transition-colors duration-200 disabled:cursor-not-allowed" : "px-4 py-2 text-white rounded-md text-sm font-medium transition-colors duration-200 disabled:cursor-not-allowed";
+  const getStyles = () => {
+    if (variant === "text") {
+      return {
+        color: disabled ? "var(--subos-muted-foreground, #64748b)" : "var(--subos-primary-600, #2563eb)",
+        textDecoration: "none"
+      };
+    } else {
+      return {
+        backgroundColor: disabled ? "var(--subos-muted, #f1f5f9)" : "var(--subos-primary-500, #3f51b5)",
+        color: disabled ? "var(--subos-muted-foreground, #64748b)" : "white"
+      };
+    }
+  };
   return /* @__PURE__ */ jsxRuntime.jsx(
     "button",
     {
       onClick,
       disabled,
       className: `${baseClasses} ${className}`,
+      style: getStyles(),
+      onMouseEnter: !disabled && variant === "text" ? (e) => {
+        e.currentTarget.style.color = "var(--subos-primary-700, #1d4ed8)";
+        e.currentTarget.style.textDecoration = "underline";
+      } : !disabled && variant === "button" ? (e) => {
+        e.currentTarget.style.backgroundColor = "var(--subos-primary-600, #2563eb)";
+      } : void 0,
+      onMouseLeave: !disabled && variant === "text" ? (e) => {
+        e.currentTarget.style.color = "var(--subos-primary-600, #2563eb)";
+        e.currentTarget.style.textDecoration = "none";
+      } : !disabled && variant === "button" ? (e) => {
+        e.currentTarget.style.backgroundColor = "var(--subos-primary-500, #3f51b5)";
+      } : void 0,
       children
     }
   );
@@ -2093,13 +2196,41 @@ var SubscriptionCancelButton = ({
   disabled = false,
   variant = "text"
 }) => {
-  const baseClasses = variant === "text" ? "text-sm text-red-500 font-medium hover:text-red-600 hover:underline disabled:text-red-300 disabled:cursor-not-allowed" : "px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 disabled:bg-red-300 disabled:cursor-not-allowed text-sm font-medium";
+  const baseClasses = variant === "text" ? "text-sm font-medium transition-colors duration-200 disabled:cursor-not-allowed" : "px-4 py-2 text-white rounded-md text-sm font-medium transition-colors duration-200 disabled:cursor-not-allowed";
+  const getStyles = () => {
+    if (variant === "text") {
+      return {
+        color: disabled ? "var(--subos-muted-foreground, #64748b)" : "#dc2626",
+        // Keep red for cancel action
+        textDecoration: "none"
+      };
+    } else {
+      return {
+        backgroundColor: disabled ? "var(--subos-muted, #f1f5f9)" : "#dc2626",
+        // Keep red for cancel action
+        color: disabled ? "var(--subos-muted-foreground, #64748b)" : "white"
+      };
+    }
+  };
   return /* @__PURE__ */ jsxRuntime.jsx(
     "button",
     {
       onClick,
       disabled,
       className: `${baseClasses} ${className}`,
+      style: getStyles(),
+      onMouseEnter: !disabled && variant === "text" ? (e) => {
+        e.currentTarget.style.color = "#b91c1c";
+        e.currentTarget.style.textDecoration = "underline";
+      } : !disabled && variant === "button" ? (e) => {
+        e.currentTarget.style.backgroundColor = "#b91c1c";
+      } : void 0,
+      onMouseLeave: !disabled && variant === "text" ? (e) => {
+        e.currentTarget.style.color = "#dc2626";
+        e.currentTarget.style.textDecoration = "none";
+      } : !disabled && variant === "button" ? (e) => {
+        e.currentTarget.style.backgroundColor = "#dc2626";
+      } : void 0,
       children
     }
   );
@@ -2120,14 +2251,15 @@ var SubscriptionActionButtons = ({
       case "tight":
         return isVertical ? "space-y-1" : "space-x-2";
       case "normal":
-        return isVertical ? "space-y-2" : "space-x-4";
+        return isVertical ? "space-y-3" : "space-x-6";
+      // Increased spacing
       case "loose":
-        return isVertical ? "space-y-4" : "space-x-6";
+        return isVertical ? "space-y-4" : "space-x-8";
       default:
-        return isVertical ? "space-y-2" : "space-x-4";
+        return isVertical ? "space-y-3" : "space-x-6";
     }
   };
-  const containerClass = layout === "vertical" ? `flex flex-col ${getSpacingClass()}` : `flex ${getSpacingClass()}`;
+  const containerClass = layout === "vertical" ? `flex flex-col ${getSpacingClass()}` : `flex items-center ${getSpacingClass()}`;
   const defaultActions = [
     {
       key: "transaction",
@@ -2145,7 +2277,17 @@ var SubscriptionActionButtons = ({
   if (visibleActions.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${containerClass} ${className}`, children: visibleActions.map((action) => /* @__PURE__ */ jsxRuntime.jsx(React9__default.default.Fragment, { children: action.component }, action.key)) });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${containerClass} ${className}`, children: visibleActions.map((action, index) => /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      style: {
+        marginLeft: index > 0 && layout === "horizontal" ? "24px" : "0",
+        marginTop: index > 0 && layout === "vertical" ? "12px" : "0"
+      },
+      children: action.component
+    },
+    action.key
+  )) });
 };
 var SubscriptionCancelModal = ({
   isOpen,
@@ -2227,8 +2369,8 @@ var SubscriptionDetails = ({
   customActions = [],
   className = ""
 }) => {
-  const [isTransactionModalOpen, setIsTransactionModalOpen] = React9.useState(false);
-  const [showCancelConfirmation, setShowCancelConfirmation] = React9.useState(false);
+  const [isTransactionModalOpen, setIsTransactionModalOpen] = React8.useState(false);
+  const [showCancelConfirmation, setShowCancelConfirmation] = React8.useState(false);
   const { cancelSubscription, loading: cancelLoading } = useCancelSubscription({
     onSuccess: () => {
       setShowCancelConfirmation(false);
@@ -2257,7 +2399,7 @@ var SubscriptionDetails = ({
     setShowCancelConfirmation(false);
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `mb-6 bg-white rounded-lg border border-gray-200 p-6 ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `mb-6 ${className}`, children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-4", children: [
         /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold", children: "Subscription Details" }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-4", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -2274,7 +2416,6 @@ var SubscriptionDetails = ({
                   ChangeCardButton,
                   {
                     externalId,
-                    className: "text-sm text-blue-600 font-medium hover:text-blue-700 hover:underline",
                     onSuccess: () => {
                     },
                     onError: (error) => {
@@ -2339,9 +2480,9 @@ var UpgradeSummary = ({
   onUpgrade,
   isVisible = true
 }) => {
-  const [checkoutInfo, setCheckoutInfo] = React9.useState(null);
-  const [loading, setLoading] = React9.useState(false);
-  React9.useEffect(() => {
+  const [checkoutInfo, setCheckoutInfo] = React8.useState(null);
+  const [loading, setLoading] = React8.useState(false);
+  React8.useEffect(() => {
     if (!selectedPlan || !isVisible || Number(selectedPlan.fixedCost) === 0) {
       setCheckoutInfo(null);
       return;
@@ -2368,39 +2509,108 @@ var UpgradeSummary = ({
   const displayInfo = checkoutInfo;
   const intervalDisplay = displayInfo.planInterval === "MONTHLY" ? "Mo" : "Yr";
   const dueToday = displayInfo.proration > 0 ? displayInfo.proration : displayInfo.planPrice;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-white shadow-xl rounded-md border border-gray-200 px-4 py-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500", children: "Summary" }),
-      /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-sm font-medium", children: displayInfo.planName })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-6", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-right", children: /* @__PURE__ */ jsxRuntime.jsxs("h3", { className: "text-2xl font-semibold text-gray-900", children: [
-        "$",
-        displayInfo.planPrice,
-        "/",
-        intervalDisplay
-      ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-right", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500", children: "Due Today" }),
-          /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xl font-semibold text-gray-900", children: [
-            "$",
-            dueToday
-          ] }),
-          displayInfo.proration > 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500 mt-1", children: "(Includes prorated discount for unused days of your current plan)" })
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: "shadow-xl rounded-md border px-4 py-3",
+      style: {
+        backgroundColor: "var(--subos-background, #ffffff)",
+        borderColor: "var(--subos-border, #e2e8f0)",
+        boxShadow: "var(--subos-shadow-card-hover, 0 8px 24px rgba(0,0,0,0.15))"
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: "text-sm",
+              style: { color: "var(--subos-muted-foreground, #64748b)" },
+              children: "Summary"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "h2",
+            {
+              className: "text-sm font-medium",
+              style: { color: "var(--subos-foreground, #1e293b)" },
+              children: displayInfo.planName
+            }
+          )
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            onClick: onUpgrade,
-            disabled: loading,
-            className: "btn-primary text-white px-6 py-2 rounded-md font-medium hover:bg-primary-dark transition-colors text-sm disabled:opacity-50",
-            children: loading ? "Loading..." : "Upgrade Now"
-          }
-        )
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-6", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-right", children: /* @__PURE__ */ jsxRuntime.jsxs(
+            "h3",
+            {
+              className: "text-2xl font-semibold",
+              style: { color: "var(--subos-foreground, #1e293b)" },
+              children: [
+                "$",
+                displayInfo.planPrice,
+                "/",
+                intervalDisplay
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-right", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  className: "text-sm",
+                  style: { color: "var(--subos-muted-foreground, #64748b)" },
+                  children: "Due Today"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "p",
+                {
+                  className: "text-xl font-semibold",
+                  style: { color: "var(--subos-foreground, #1e293b)" },
+                  children: [
+                    "$",
+                    dueToday
+                  ]
+                }
+              ),
+              displayInfo.proration > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  className: "text-xs mt-1",
+                  style: { color: "var(--subos-muted-foreground, #64748b)" },
+                  children: "(Includes prorated discount for unused days of your current plan)"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: onUpgrade,
+                disabled: loading,
+                className: "text-white px-8 py-3 rounded-lg font-semibold transition-all duration-200 text-sm disabled:opacity-50 shadow-md",
+                style: {
+                  backgroundColor: loading ? "var(--subos-muted, #f1f5f9)" : "var(--subos-primary-500, #ef4444)",
+                  color: loading ? "var(--subos-muted-foreground, #64748b)" : "white",
+                  border: "none",
+                  boxShadow: loading ? "none" : "0 4px 12px rgba(239, 68, 68, 0.3)"
+                },
+                onMouseEnter: !loading ? (e) => {
+                  e.currentTarget.style.backgroundColor = "#dc2626";
+                  e.currentTarget.style.transform = "translateY(-1px)";
+                  e.currentTarget.style.boxShadow = "0 6px 16px rgba(239, 68, 68, 0.4)";
+                } : void 0,
+                onMouseLeave: !loading ? (e) => {
+                  e.currentTarget.style.backgroundColor = "var(--subos-primary-500, #ef4444)";
+                  e.currentTarget.style.transform = "translateY(0)";
+                  e.currentTarget.style.boxShadow = "0 4px 12px rgba(239, 68, 68, 0.3)";
+                } : void 0,
+                children: loading ? "Loading..." : "Upgrade Now"
+              }
+            )
+          ] })
+        ] })
       ] })
-    ] })
-  ] }) }) }) });
+    }
+  ) }) });
 };
 var LogoInline = ({ src, alt = "Logo", viewBox = "0 0 1024 1024", ...props }) => {
   const resolvedSrc = src ?? "https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg";
@@ -2428,9 +2638,9 @@ var Layout = ({ children }) => {
     ] }) }) })
   ] });
 };
-var SubOSThemeContext = React9.createContext(void 0);
+var SubOSThemeContext = React8.createContext(void 0);
 var useSubOSTheme = () => {
-  const context = React9.useContext(SubOSThemeContext);
+  const context = React8.useContext(SubOSThemeContext);
   if (!context) {
     throw new Error("useSubOSTheme must be used within a SubOSThemeProvider");
   }
@@ -2441,8 +2651,8 @@ var SubOSThemeProvider = ({
   theme = {},
   className = ""
 }) => {
-  const [currentTheme, setCurrentTheme] = React9__default.default.useState(theme);
-  const cssVariables = React9__default.default.useMemo(() => {
+  const [currentTheme, setCurrentTheme] = React8__default.default.useState(theme);
+  const cssVariables = React8__default.default.useMemo(() => {
     const vars = {};
     if (currentTheme.primaryColors) {
       Object.entries(currentTheme.primaryColors).forEach(([key, value]) => {
@@ -2467,7 +2677,7 @@ var SubOSThemeProvider = ({
     if (currentTheme.shadowCardHover) vars["--subos-shadow-card-hover"] = currentTheme.shadowCardHover;
     return vars;
   }, [currentTheme]);
-  const contextValue = React9__default.default.useMemo(() => ({
+  const contextValue = React8__default.default.useMemo(() => ({
     theme: currentTheme,
     setTheme: setCurrentTheme
   }), [currentTheme]);
@@ -2482,7 +2692,7 @@ var SubOSThemeProvider = ({
 };
 var useApplyHostTheme = (hostTheme) => {
   const { setTheme } = useSubOSTheme();
-  React9__default.default.useEffect(() => {
+  React8__default.default.useEffect(() => {
     if (hostTheme) {
       setTheme(hostTheme);
     }
@@ -2562,7 +2772,7 @@ var Pagination = ({
             children: "Previous"
           }
         ),
-        pageNumbers.map((page, index) => /* @__PURE__ */ jsxRuntime.jsx(React9__default.default.Fragment, { children: page === "..." ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300", children: "..." }) : /* @__PURE__ */ jsxRuntime.jsx(
+        pageNumbers.map((page, index) => /* @__PURE__ */ jsxRuntime.jsx(React8__default.default.Fragment, { children: page === "..." ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300", children: "..." }) : /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
             onClick: () => onPageChange(page),
@@ -2589,15 +2799,15 @@ var DashboardPage = ({
   var _a;
   const subscription = useSubscription();
   const plans = usePlans();
-  const lastLoadedIdRef = React9.useRef(null);
-  React9.useEffect(() => {
+  const lastLoadedIdRef = React8.useRef(null);
+  React8.useEffect(() => {
     if (lastLoadedIdRef.current !== externalId) {
       subscription.fetchSubscription(externalId);
       plans.fetchPlans();
       lastLoadedIdRef.current = externalId;
     }
   }, [externalId]);
-  React9.useEffect(() => {
+  React8.useEffect(() => {
     registerClearSelectedPlan(plans.clearSelectedPlan);
     return () => {
       unregisterClearSelectedPlan();
@@ -2647,7 +2857,7 @@ var DashboardPage = ({
   ] }) }) });
 };
 var usePaymentParams = () => {
-  return React9.useMemo(() => {
+  return React8.useMemo(() => {
     const params = new URLSearchParams(window.location.search);
     return {
       gateway: params.get("gateway") || void 0,
@@ -2658,9 +2868,9 @@ var usePaymentParams = () => {
   }, []);
 };
 var useProcessPaymentSuccess = (params) => {
-  const [loading, setLoading] = React9.useState(true);
-  const [error, setError] = React9.useState(null);
-  React9.useEffect(() => {
+  const [loading, setLoading] = React8.useState(true);
+  const [error, setError] = React8.useState(null);
+  React8.useEffect(() => {
     const run = async () => {
       try {
         const qs = new URLSearchParams({
@@ -2730,9 +2940,9 @@ var PaymentSuccessPage = () => {
 };
 var PaymentSuccessPage_default = PaymentSuccessPage;
 var useProcessPaymentCancel = (params) => {
-  const [loading, setLoading] = React9.useState(true);
-  const [error, setError] = React9.useState(null);
-  React9.useEffect(() => {
+  const [loading, setLoading] = React8.useState(true);
+  const [error, setError] = React8.useState(null);
+  React8.useEffect(() => {
     const run = async () => {
       try {
         const qs = new URLSearchParams({