@powerhousedao/contributor-billing 0.1.42 → 0.1.43

package/dist/editors/service-offering-editor/components/TheMatrix.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useMemo, useEffect, useRef, useCallback } from "react";
 import { generateId } from "document-model/core";
+import { RECURRING_BILLING_CYCLES, BILLING_CYCLE_SHORT_LABELS, formatPrice, getMonthlyEquivalent, } from "./pricing-utils.js";
 import { addServiceLevel, updateServiceLevel, addUsageLimit, updateUsageLimit, removeUsageLimit, addService, updateService, } from "../../../document-models/service-offering/gen/creators.js";
+import { useResourceTemplateDocumentsInSelectedDrive } from "../../../document-models/resource-template/hooks.js";
 const SERVICE_LEVELS = [
     {
         value: "INCLUDED",
@@ -41,38 +43,6 @@ const SERVICE_LEVELS = [
     },
 ];
 const UNGROUPED_ID = "__ungrouped__";
-const FACET_CATEGORIES = {
-    FUNCTION: {
-        label: "SNO Function",
-        options: [
-            { id: "operational-hub", label: "Operational Hub" },
-            { id: "embryonic-hub", label: "Embryonic Hub" },
-        ],
-    },
-    LEGAL_ENTITY: {
-        label: "Legal Entity",
-        options: [
-            { id: "swiss-association", label: "Swiss Association" },
-            { id: "bvi-ltd", label: "BVI Ltd" },
-            { id: "unaffiliated", label: "Unaffiliated" },
-        ],
-    },
-    TEAM_STRUCTURE: {
-        label: "Team",
-        options: [
-            { id: "remote-team", label: "Remote" },
-            { id: "on-premise", label: "On-Premise" },
-            { id: "hybrid", label: "Hybrid" },
-        ],
-    },
-    ANONYMITY: {
-        label: "Anonymity",
-        options: [
-            { id: "high-anonymity", label: "High" },
-            { id: "highest-anonymity", label: "Highest" },
-        ],
-    },
-};
 const matrixStyles = `
   .matrix {
     background: var(--so-white);
@@ -268,6 +238,40 @@ const matrixStyles = `
     color: var(--so-violet-200);
   }
 
+  /* Billing Cycle Selector in Tier Header */
+  .matrix__tier-cycle-select {
+    font-family: var(--so-font-sans);
+    font-size: 0.625rem;
+    color: var(--so-slate-600);
+    background: var(--so-white);
+    border: 1px solid var(--so-slate-200);
+    border-radius: var(--so-radius-sm);
+    padding: 0.25rem 0.5rem;
+    cursor: pointer;
+    outline: none;
+    transition: var(--so-transition-fast);
+    margin-top: 0.25rem;
+  }
+
+  .matrix__tier-cycle-select:hover {
+    border-color: var(--so-slate-300);
+  }
+
+  .matrix__tier-cycle-select:focus {
+    border-color: var(--so-violet-400);
+    box-shadow: 0 0 0 2px var(--so-violet-100);
+  }
+
+  .matrix__tier-header--selected .matrix__tier-cycle-select {
+    background: var(--so-violet-500);
+    border-color: var(--so-violet-400);
+    color: var(--so-white);
+  }
+
+  .matrix__tier-header--selected .matrix__tier-cycle-select:focus {
+    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
+  }
+
   /* Section Header */
   .matrix__section-header {
     background: var(--so-slate-100);
@@ -890,11 +894,26 @@ const matrixStyles = `
     border-bottom: 1px solid var(--so-slate-100);
   }
 
+  .matrix__metric-value-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.125rem;
+  }
+
   .matrix__metric-value {
     font-size: 0.6875rem;
     color: var(--so-slate-500);
   }
 
+  .matrix__metric-overage {
+    font-family: var(--so-font-mono);
+    font-size: 0.5625rem;
+    font-weight: 500;
+    color: #059669;
+    white-space: nowrap;
+  }
+
   /* Add Metric Button on Service Row */
   .matrix__service-cell-wrapper {
     display: flex;
@@ -927,6 +946,54 @@ const matrixStyles = `
     color: var(--so-violet-700);
   }
 
+  /* Service Reorder Buttons */
+  .matrix__reorder-btns {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    margin-right: 0.5rem;
+    opacity: 0;
+    transition: opacity 0.15s ease;
+  }
+
+  .matrix__service-row:hover .matrix__reorder-btns {
+    opacity: 1;
+  }
+
+  .matrix__reorder-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 14px;
+    padding: 0;
+    background: var(--so-slate-100);
+    border: 1px solid var(--so-slate-200);
+    border-radius: 3px;
+    cursor: pointer;
+    transition: all 0.1s ease;
+  }
+
+  .matrix__reorder-btn:hover:not(:disabled) {
+    background: var(--so-violet-100);
+    border-color: var(--so-violet-300);
+  }
+
+  .matrix__reorder-btn:disabled {
+    opacity: 0.3;
+    cursor: not-allowed;
+  }
+
+  .matrix__reorder-btn svg {
+    width: 10px;
+    height: 10px;
+    color: var(--so-slate-500);
+  }
+
+  .matrix__reorder-btn:hover:not(:disabled) svg {
+    color: var(--so-violet-600);
+  }
+
   /* Add Service Row */
   .matrix__add-service-row td {
     padding: 0.5rem 1rem;
@@ -1267,6 +1334,89 @@ const matrixStyles = `
     color: #64748b;
   }
 
+  .matrix__panel-limit-value-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+  }
+
+  .matrix__panel-limit-overage {
+    font-family: var(--so-font-mono);
+    font-size: 0.6875rem;
+    color: #059669;
+    font-weight: 500;
+  }
+
+  /* Overage Pricing Section */
+  .matrix__panel-overage-section {
+    margin-top: 0.5rem;
+    padding-top: 0.75rem;
+    border-top: 1px dashed #cbd5e1;
+  }
+
+  .matrix__panel-overage-row {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    flex-wrap: wrap;
+  }
+
+  .matrix__panel-overage-price {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
+
+  .matrix__panel-overage-currency {
+    font-family: var(--so-font-mono);
+    font-size: 0.875rem;
+    color: #64748b;
+  }
+
+  .matrix__panel-overage-input {
+    width: 4.5rem;
+    font-family: var(--so-font-mono);
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: #0f172a;
+    background: #ffffff;
+    border: 1px solid #cbd5e1;
+    border-radius: var(--so-radius-sm);
+    padding: 0.375rem 0.5rem;
+    outline: none;
+    transition: border-color 0.15s ease;
+  }
+
+  .matrix__panel-overage-input:focus {
+    border-color: #7c3aed;
+  }
+
+  .matrix__panel-overage-separator {
+    font-size: 0.875rem;
+    color: #94a3b8;
+  }
+
+  .matrix__panel-overage-select {
+    font-family: var(--so-font-sans);
+    font-size: 0.8125rem;
+    color: #334155;
+    background: #ffffff;
+    border: 1px solid #cbd5e1;
+    border-radius: var(--so-radius-sm);
+    padding: 0.375rem 0.5rem;
+    cursor: pointer;
+    outline: none;
+  }
+
+  .matrix__panel-overage-select:focus {
+    border-color: #7c3aed;
+  }
+
+  .matrix__panel-overage-label {
+    font-size: 0.75rem;
+    color: #64748b;
+  }
+
   .matrix__panel-limit-actions {
     display: flex;
     gap: 0.25rem;
@@ -1688,6 +1838,26 @@ export function TheMatrix({ document, dispatch, groupSetupFees = {}, }) {
     const services = state.global.services ?? [];
     const tiers = state.global.tiers ?? [];
     const optionGroups = state.global.optionGroups ?? [];
+    const resourceTemplateId = state.global.resourceTemplateId;
+    // Get resource templates to find the selected one
+    const templates = useResourceTemplateDocumentsInSelectedDrive();
+    // Get selected facets from the offering document's facetTargets
+    const offeringFacetTargets = state.global.facetTargets ?? [];
+    // Build facet categories from the SERVICE OFFERING's selected facet targets
+    // This ensures only the options selected in the offering's facet targeting appear in the Matrix
+    const facetCategories = useMemo(() => {
+        const categories = {};
+        offeringFacetTargets.forEach((facet) => {
+            categories[facet.categoryKey] = {
+                label: facet.categoryLabel,
+                options: facet.selectedOptions.map((option) => ({
+                    id: option.toLowerCase().replace(/\s+/g, "-"),
+                    label: option,
+                })),
+            };
+        });
+        return categories;
+    }, [offeringFacetTargets]);
     const [enabledOptionalGroups, setEnabledOptionalGroups] = useState(new Set(optionGroups.filter((g) => g.defaultSelected).map((g) => g.id)));
     const [selectedCell, setSelectedCell] = useState(null);
     const [addServiceModal, setAddServiceModal] = useState(null);
@@ -1695,17 +1865,30 @@ export function TheMatrix({ document, dispatch, groupSetupFees = {}, }) {
     const [newServiceDescription, setNewServiceDescription] = useState("");
     const [newServiceSelectedTiers, setNewServiceSelectedTiers] = useState(new Set());
     const [selectedTierIdx, setSelectedTierIdx] = useState(0);
-    const [selectedFacets, setSelectedFacets] = useState({
-        FUNCTION: "operational-hub",
-        LEGAL_ENTITY: "swiss-association",
-        TEAM_STRUCTURE: "remote-team",
-        ANONYMITY: "high-anonymity",
+    // Selected billing cycle per tier (for tiers with multiple pricing options)
+    const [selectedBillingCycles, setSelectedBillingCycles] = useState({});
+    // Initialize selected facets from offering's facet targets
+    const [selectedFacets, setSelectedFacets] = useState(() => {
+        const initial = {};
+        offeringFacetTargets.forEach((facet) => {
+            if (facet.selectedOptions.length > 0) {
+                initial[facet.categoryKey] = facet.selectedOptions[0]
+                    .toLowerCase()
+                    .replace(/\s+/g, "-");
+            }
+        });
+        return initial;
     });
     // Metric editing modal state
     const [metricModal, setMetricModal] = useState(null);
     const [metricName, setMetricName] = useState("");
     const [metricLimits, setMetricLimits] = useState({});
     const [metricEnabledTiers, setMetricEnabledTiers] = useState(new Set());
+    // Per-tier overage pricing for metric modal
+    const [metricOveragePrices, setMetricOveragePrices] = useState({});
+    const [metricOverageCycles, setMetricOverageCycles] = useState({});
+    // Unit name for the metric (e.g., "entity", "user", "API call")
+    const [metricUnitName, setMetricUnitName] = useState("");
     // Bulk actions state
     const [showBulkActions, setShowBulkActions] = useState(false);
     const getServiceGroup = (service) => {
@@ -1989,32 +2172,53 @@ export function TheMatrix({ document, dispatch, groupSetupFees = {}, }) {
         setMetricName("");
         // Initialize limits for all tiers to empty string
         const initialLimits = {};
+        const initialOveragePrices = {};
+        const initialOverageCycles = {};
         // For new metrics, enable all tiers by default
         const allTierIds = new Set();
         tiers.forEach((tier) => {
             initialLimits[tier.id] = "";
+            initialOveragePrices[tier.id] = "";
+            initialOverageCycles[tier.id] = "";
             allTierIds.add(tier.id);
         });
         setMetricLimits(initialLimits);
         setMetricEnabledTiers(allTierIds);
+        // Reset per-tier overage pricing and unit name
+        setMetricOveragePrices(initialOveragePrices);
+        setMetricOverageCycles(initialOverageCycles);
+        setMetricUnitName("");
     };
     const handleEditMetric = (serviceId, metric) => {
         setMetricModal({ serviceId, metric });
         setMetricName(metric);
         // Initialize limits with existing values and track which tiers have this metric
         const existingLimits = {};
+        const existingOveragePrices = {};
+        const existingOverageCycles = {};
         const enabledTiers = new Set();
+        let existingUnitName = "";
         tiers.forEach((tier) => {
             const usageLimit = tier.usageLimits.find((ul) => ul.serviceId === serviceId && ul.metric === metric);
             // Load value from either limit (numeric) or notes (string)
             existingLimits[tier.id] =
                 usageLimit?.limit?.toString() || usageLimit?.notes || "";
+            // Load per-tier overage pricing
+            existingOveragePrices[tier.id] = usageLimit?.unitPrice?.toString() || "";
+            existingOverageCycles[tier.id] = usageLimit?.unitPriceBillingCycle || "";
             if (usageLimit) {
                 enabledTiers.add(tier.id);
+                // Get unit name from first tier that has it
+                if (!existingUnitName && usageLimit.unitName) {
+                    existingUnitName = usageLimit.unitName;
+                }
             }
         });
         setMetricLimits(existingLimits);
         setMetricEnabledTiers(enabledTiers);
+        setMetricOveragePrices(existingOveragePrices);
+        setMetricOverageCycles(existingOverageCycles);
+        setMetricUnitName(existingUnitName);
     };
     const handleRemoveMetric = (serviceId, metric) => {
         // Remove this metric from all tiers
@@ -2039,6 +2243,35 @@ export function TheMatrix({ document, dispatch, groupSetupFees = {}, }) {
             lastModified: new Date().toISOString(),
         }));
     };
+    // Service reordering - swap display order with adjacent service
+    const handleReorderService = (serviceId, direction, groupServices) => {
+        // Sort services by displayOrder for consistent ordering
+        const sortedServices = [...groupServices].sort((a, b) => {
+            const orderA = a.displayOrder ?? 999;
+            const orderB = b.displayOrder ?? 999;
+            return orderA - orderB;
+        });
+        const currentIndex = sortedServices.findIndex((s) => s.id === serviceId);
+        if (currentIndex === -1)
+            return;
+        const targetIndex = direction === "up" ? currentIndex - 1 : currentIndex + 1;
+        if (targetIndex < 0 || targetIndex >= sortedServices.length)
+            return;
+        const currentService = sortedServices[currentIndex];
+        const targetService = sortedServices[targetIndex];
+        const now = new Date().toISOString();
+        // Swap display orders
+        dispatch(updateService({
+            id: currentService.id,
+            displayOrder: targetIndex,
+            lastModified: now,
+        }));
+        dispatch(updateService({
+            id: targetService.id,
+            displayOrder: currentIndex,
+            lastModified: now,
+        }));
+    };
     const handleSaveMetric = () => {
         if (!metricModal || !metricName.trim())
             return;
@@ -2053,6 +2286,13 @@ export function TheMatrix({ document, dispatch, groupSetupFees = {}, }) {
             // Check if value is numeric or string
             const parsedLimit = limitValue ? parseInt(limitValue, 10) : null;
             const isNumeric = parsedLimit !== null && !isNaN(parsedLimit);
+            // Get per-tier overage pricing
+            const tierOveragePrice = metricOveragePrices[tier.id];
+            const tierOverageCycle = metricOverageCycles[tier.id];
+            const parsedOveragePrice = tierOveragePrice
+                ? parseFloat(tierOveragePrice)
+                : null;
+            const hasOveragePricing = parsedOveragePrice && tierOverageCycle;
             if (existingLimit && !isEnabled) {
                 // Remove limit - tier was disabled
                 dispatch(removeUsageLimit({
@@ -2067,8 +2307,14 @@ export function TheMatrix({ document, dispatch, groupSetupFees = {}, }) {
                     tierId: tier.id,
                     limitId: existingLimit.id,
                     metric: metricName.trim(),
+                    unitName: metricUnitName.trim() || undefined,
                     limit: isNumeric ? parsedLimit : null,
                     notes: !isNumeric && limitValue ? limitValue.trim() : null,
+                    unitPrice: hasOveragePricing ? parsedOveragePrice : null,
+                    unitPriceCurrency: hasOveragePricing ? "USD" : undefined,
+                    unitPriceBillingCycle: hasOveragePricing
+                        ? tierOverageCycle
+                        : undefined,
                     lastModified: now,
                 }));
             }
@@ -2079,9 +2325,15 @@ export function TheMatrix({ document, dispatch, groupSetupFees = {}, }) {
                     limitId: generateId(),
                     serviceId,
                     metric: metricName.trim(),
+                    unitName: metricUnitName.trim() || undefined,
                     limit: isNumeric ? parsedLimit : null,
                     notes: !isNumeric && limitValue ? limitValue.trim() : null,
                     resetPeriod: "MONTHLY",
+                    unitPrice: hasOveragePricing ? parsedOveragePrice : undefined,
+                    unitPriceCurrency: hasOveragePricing ? "USD" : undefined,
+                    unitPriceBillingCycle: hasOveragePricing
+                        ? tierOverageCycle
+                        : undefined,
                     lastModified: now,
                 }));
             }
@@ -2090,6 +2342,9 @@ export function TheMatrix({ document, dispatch, groupSetupFees = {}, }) {
         setMetricName("");
         setMetricLimits({});
         setMetricEnabledTiers(new Set());
+        setMetricOveragePrices({});
+        setMetricOverageCycles({});
+        setMetricUnitName("");
     };
     const getLevelDisplay = (serviceLevel) => {
         if (!serviceLevel)
@@ -2114,41 +2369,72 @@ export function TheMatrix({ document, dispatch, groupSetupFees = {}, }) {
                                         ? "Add services in the Service Catalog to configure the matrix."
                                         : "Add tiers in Tier Definition to configure the matrix." })] }) })] }));
     }
-    return (_jsxs(_Fragment, { children: [_jsx("style", { children: matrixStyles }), _jsxs("div", { className: "matrix", children: [_jsxs("div", { className: "matrix__facets", children: [_jsx("div", { className: "matrix__facets-row", children: Object.entries(FACET_CATEGORIES).map(([key, category]) => (_jsxs("div", { className: "matrix__facet-group", children: [_jsx("span", { className: "matrix__facet-label", children: category.label }), key === "ANONYMITY" ? (_jsx("div", { className: "matrix__toggle-group", children: category.options.map((option) => (_jsx("button", { onClick: () => setSelectedFacets((prev) => ({
-                                                    ...prev,
-                                                    [key]: option.id,
-                                                })), className: `matrix__toggle-btn ${selectedFacets[key] === option.id
-                                                    ? "matrix__toggle-btn--active"
-                                                    : ""}`, children: option.label }, option.id))) })) : (_jsx("select", { value: selectedFacets[key] || "", onChange: (e) => setSelectedFacets((prev) => ({
+    return (_jsxs(_Fragment, { children: [_jsx("style", { children: matrixStyles }), _jsxs("div", { className: "matrix", children: [Object.keys(facetCategories).length > 0 && (_jsx("div", { className: "matrix__facets", children: _jsx("div", { className: "matrix__facets-row", children: Object.entries(facetCategories).map(([key, category]) => (_jsxs("div", { className: "matrix__facet-group", children: [_jsx("span", { className: "matrix__facet-label", children: category.label }), category.options.length <= 3 ? (_jsx("div", { className: "matrix__toggle-group", children: category.options.map((option) => (_jsx("button", { type: "button", onClick: () => setSelectedFacets((prev) => ({
                                                 ...prev,
-                                                [key]: e.target.value,
-                                            })), className: "matrix__facet-select", children: category.options.map((option) => (_jsx("option", { value: option.id, children: option.label }, option.id))) }))] }, key))) }), selectedFacets.ANONYMITY === "highest-anonymity" && (_jsx("div", { className: "matrix__facet-notice", children: _jsxs("p", { className: "matrix__facet-notice-text", children: [_jsx("strong", { children: "Highest Anonymity:" }), " Additional setup services may be required for enhanced privacy configurations."] }) }))] }), services.length > 0 && tiers.length > 0 && (_jsxs("div", { className: "matrix__bulk-actions", children: [_jsxs("button", { type: "button", onClick: () => setShowBulkActions(!showBulkActions), className: "matrix__bulk-toggle", children: [_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M4 6h16M4 12h16M4 18h7" }) }), "Bulk Actions", _jsx("svg", { className: `matrix__bulk-toggle-arrow ${showBulkActions ? "matrix__bulk-toggle-arrow--open" : ""}`, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M19 9l-7 7-7-7" }) })] }), showBulkActions && (_jsxs("div", { className: "matrix__bulk-panel", children: [_jsxs("div", { className: "matrix__bulk-section", children: [_jsx("span", { className: "matrix__bulk-label", children: "Include all services in:" }), _jsx("div", { className: "matrix__bulk-buttons", children: tiers.map((tier) => (_jsxs("button", { type: "button", onClick: () => handleBulkIncludeAllInTier(tier.id), className: "matrix__bulk-btn matrix__bulk-btn--include", children: [_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M5 12l5 5L20 7" }) }), tier.name] }, tier.id))) })] }), _jsxs("div", { className: "matrix__bulk-section", children: [_jsx("span", { className: "matrix__bulk-label", children: "Clear all from:" }), _jsx("div", { className: "matrix__bulk-buttons", children: tiers.map((tier) => (_jsxs("button", { type: "button", onClick: () => handleBulkClearTier(tier.id), className: "matrix__bulk-btn matrix__bulk-btn--clear", children: [_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M6 18L18 6M6 6l12 12" }) }), tier.name] }, tier.id))) })] }), tiers.length >= 2 && (_jsxs("div", { className: "matrix__bulk-section", children: [_jsx("span", { className: "matrix__bulk-label", children: "Copy configuration:" }), _jsx("div", { className: "matrix__bulk-copy", children: tiers.map((sourceTier, idx) => tiers
+                                                [key]: option.id,
+                                            })), className: `matrix__toggle-btn ${selectedFacets[key] === option.id
+                                                ? "matrix__toggle-btn--active"
+                                                : ""}`, children: option.label }, option.id))) })) : (_jsx("select", { value: selectedFacets[key] || category.options[0]?.id || "", onChange: (e) => setSelectedFacets((prev) => ({
+                                            ...prev,
+                                            [key]: e.target.value,
+                                        })), className: "matrix__facet-select", children: category.options.map((option) => (_jsx("option", { value: option.id, children: option.label }, option.id))) }))] }, key))) }) })), services.length > 0 && tiers.length > 0 && (_jsxs("div", { className: "matrix__bulk-actions", children: [_jsxs("button", { type: "button", onClick: () => setShowBulkActions(!showBulkActions), className: "matrix__bulk-toggle", children: [_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M4 6h16M4 12h16M4 18h7" }) }), "Bulk Actions", _jsx("svg", { className: `matrix__bulk-toggle-arrow ${showBulkActions ? "matrix__bulk-toggle-arrow--open" : ""}`, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M19 9l-7 7-7-7" }) })] }), showBulkActions && (_jsxs("div", { className: "matrix__bulk-panel", children: [_jsxs("div", { className: "matrix__bulk-section", children: [_jsx("span", { className: "matrix__bulk-label", children: "Include all services in:" }), _jsx("div", { className: "matrix__bulk-buttons", children: tiers.map((tier) => (_jsxs("button", { type: "button", onClick: () => handleBulkIncludeAllInTier(tier.id), className: "matrix__bulk-btn matrix__bulk-btn--include", children: [_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M5 12l5 5L20 7" }) }), tier.name] }, tier.id))) })] }), _jsxs("div", { className: "matrix__bulk-section", children: [_jsx("span", { className: "matrix__bulk-label", children: "Clear all from:" }), _jsx("div", { className: "matrix__bulk-buttons", children: tiers.map((tier) => (_jsxs("button", { type: "button", onClick: () => handleBulkClearTier(tier.id), className: "matrix__bulk-btn matrix__bulk-btn--clear", children: [_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M6 18L18 6M6 6l12 12" }) }), tier.name] }, tier.id))) })] }), tiers.length >= 2 && (_jsxs("div", { className: "matrix__bulk-section", children: [_jsx("span", { className: "matrix__bulk-label", children: "Copy configuration:" }), _jsx("div", { className: "matrix__bulk-copy", children: tiers.map((sourceTier, idx) => tiers
                                                     .filter((_, i) => i !== idx)
                                                     .map((targetTier) => (_jsxs("button", { type: "button", onClick: () => handleBulkCopyFromTier(sourceTier.id, targetTier.id), className: "matrix__bulk-btn matrix__bulk-btn--copy", children: [sourceTier.name, " \u2192 ", targetTier.name] }, `${sourceTier.id}-${targetTier.id}`)))) })] })), _jsxs("div", { className: "matrix__bulk-section matrix__bulk-patterns", children: [_jsxs("span", { className: "matrix__bulk-label", children: [_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", className: "matrix__bulk-label-icon", children: _jsx("path", { d: "M13 10V3L4 14h7v7l9-11h-7z" }) }), "Apply Pattern Preset:"] }), _jsxs("div", { className: "matrix__pattern-grid", children: [_jsxs("button", { type: "button", onClick: () => handleApplyPattern("good-better-best"), className: "matrix__pattern-btn", title: "Progressive inclusion: Basic tier gets 50%, mid-tier 75%, top tier 100%", children: [_jsx("span", { className: "matrix__pattern-icon", children: "\uD83D\uDCC8" }), _jsx("span", { className: "matrix__pattern-name", children: "Good-Better-Best" }), _jsx("span", { className: "matrix__pattern-desc", children: "Progressive inclusion" })] }), _jsxs("button", { type: "button", onClick: () => handleApplyPattern("premium-only"), className: "matrix__pattern-btn", title: "Top 30% services exclusive to premium tier, rest included everywhere", children: [_jsx("span", { className: "matrix__pattern-icon", children: "\u2B50" }), _jsx("span", { className: "matrix__pattern-name", children: "Premium Exclusives" }), _jsx("span", { className: "matrix__pattern-desc", children: "Top services in top tier only" })] }), _jsxs("button", { type: "button", onClick: () => handleApplyPattern("core-upgrades"), className: "matrix__pattern-btn", title: "Core services included, extras as optional add-ons", children: [_jsx("span", { className: "matrix__pattern-icon", children: "\uD83C\uDFAF" }), _jsx("span", { className: "matrix__pattern-name", children: "Core + Add-ons" }), _jsx("span", { className: "matrix__pattern-desc", children: "Half included, half optional" })] }), _jsxs("button", { type: "button", onClick: () => handleApplyPattern("ascending"), className: "matrix__pattern-btn", title: "Each tier unlocks more services progressively", children: [_jsx("span", { className: "matrix__pattern-icon", children: "\uD83E\uDE9C" }), _jsx("span", { className: "matrix__pattern-name", children: "Ascending Tiers" }), _jsx("span", { className: "matrix__pattern-desc", children: "Each tier unlocks more" })] }), _jsxs("button", { type: "button", onClick: () => handleApplyPattern("all-included"), className: "matrix__pattern-btn matrix__pattern-btn--simple", title: "Everything included in all tiers", children: [_jsx("span", { className: "matrix__pattern-icon", children: "\u2713" }), _jsx("span", { className: "matrix__pattern-name", children: "All Included" })] }), _jsxs("button", { type: "button", onClick: () => handleApplyPattern("all-optional"), className: "matrix__pattern-btn matrix__pattern-btn--simple", title: "Everything optional in all tiers", children: [_jsx("span", { className: "matrix__pattern-icon", children: "\u25D0" }), _jsx("span", { className: "matrix__pattern-name", children: "All Optional" })] })] })] })] }))] })), incompleteServices.length > 0 && (_jsxs("div", { className: "matrix__incomplete-warning", children: [_jsx("div", { className: "matrix__incomplete-icon", children: _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" }) }) }), _jsxs("div", { className: "matrix__incomplete-content", children: [_jsxs("span", { className: "matrix__incomplete-title", children: [incompleteServices.length, " service", incompleteServices.length !== 1 ? "s" : "", " not configured"] }), _jsxs("span", { className: "matrix__incomplete-text", children: ["The following services are not included in any tier:", " ", _jsx("strong", { children: incompleteServices
                                                     .slice(0, 3)
                                                     .map((s) => s.title)
                                                     .join(", ") }), incompleteServices.length > 3 &&
-                                                ` and ${incompleteServices.length - 3} more`] })] })] })), _jsx("div", { className: "matrix__table-wrap", children: _jsxs("table", { className: "matrix__table", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { className: "matrix__corner-cell" }), tiers.map((tier, idx) => (_jsx("th", { onClick: () => setSelectedTierIdx(idx), className: `matrix__tier-header ${idx === selectedTierIdx
-                                                    ? "matrix__tier-header--selected"
-                                                    : ""}`, children: _jsxs("div", { className: "matrix__tier-header-inner", children: [_jsx("div", { className: "matrix__tier-radio" }), _jsx("span", { className: "matrix__tier-name", children: tier.name }), _jsx("span", { className: "matrix__tier-price", children: tier.isCustomPricing
-                                                                ? "Custom"
-                                                                : `$${tier.pricing.amount}/mo` })] }) }, tier.id)))] }) }), _jsxs("tbody", { children: [_jsx("tr", { children: _jsx("td", { colSpan: tiers.length + 1, className: "matrix__section-header", children: "Service Catalog" }) }), (setupGroups.length > 0 ||
-                                            ungroupedSetupServices.length > 0) && (_jsx("tr", { children: _jsxs("td", { colSpan: tiers.length + 1, className: "matrix__category-header", children: [_jsx("span", { className: "matrix__category-icon", children: _jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", children: [_jsx("path", { d: "M19 21V5a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v16" }), _jsx("path", { d: "M9 21v-6h6v6" }), _jsx("path", { d: "M9 7h.01M9 11h.01M15 7h.01M15 11h.01" })] }) }), "Setup & Formation"] }) })), setupGroups.map((group) => (_jsx(ServiceGroupSection, { group: group, services: groupedServices.get(group.id) || [], tiers: tiers, isSetupFormation: true, isOptional: false, isEnabled: true, onToggle: () => { }, getServiceLevelForTier: getServiceLevelForTier, getUniqueMetricsForService: getUniqueMetricsForService, getUsageLimitForMetric: getUsageLimitForMetric, getLevelDisplay: getLevelDisplay, selectedCell: selectedCell, setSelectedCell: setSelectedCell, handleSetServiceLevel: handleSetServiceLevel, dispatch: dispatch, setupFee: groupSetupFees[group.id], onAddService: openAddServiceModal, selectedTierIdx: selectedTierIdx, onAddMetric: handleAddMetric, onEditMetric: handleEditMetric, onRemoveMetric: handleRemoveMetric, onTogglePremiumExclusive: handleTogglePremiumExclusive }, group.id))), ungroupedSetupServices.length > 0 && (_jsx(ServiceGroupSection, { group: {
+                                                ` and ${incompleteServices.length - 3} more`] })] })] })), _jsx("div", { className: "matrix__table-wrap", children: _jsxs("table", { className: "matrix__table", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { className: "matrix__corner-cell" }), tiers.map((tier, idx) => {
+                                                const hasPricingOptions = tier.pricingOptions && tier.pricingOptions.length > 0;
+                                                const selectedCycleId = selectedBillingCycles[tier.id];
+                                                const activePricingOption = hasPricingOptions
+                                                    ? tier.pricingOptions.find((po) => po.id === selectedCycleId) ||
+                                                        tier.pricingOptions.find((po) => po.isDefault) ||
+                                                        tier.pricingOptions[0]
+                                                    : null;
+                                                const displayAmount = activePricingOption
+                                                    ? activePricingOption.amount
+                                                    : tier.pricing.amount;
+                                                const displayCycle = activePricingOption
+                                                    ? activePricingOption.billingCycle
+                                                    : tier.pricing.billingCycle;
+                                                const monthlyEquivalent = displayAmount &&
+                                                    displayCycle !== "MONTHLY" &&
+                                                    displayCycle !== "ONE_TIME"
+                                                    ? getMonthlyEquivalent(displayAmount, displayCycle)
+                                                    : null;
+                                                return (_jsx("th", { onClick: () => setSelectedTierIdx(idx), className: `matrix__tier-header ${idx === selectedTierIdx
+                                                        ? "matrix__tier-header--selected"
+                                                        : ""}`, children: _jsxs("div", { className: "matrix__tier-header-inner", children: [_jsx("div", { className: "matrix__tier-radio" }), _jsx("span", { className: "matrix__tier-name", children: tier.name }), _jsx("span", { className: "matrix__tier-price", children: tier.isCustomPricing
+                                                                    ? "Custom"
+                                                                    : monthlyEquivalent
+                                                                        ? `$${monthlyEquivalent.toFixed(0)}/mo`
+                                                                        : displayAmount !== null
+                                                                            ? `$${displayAmount}/mo`
+                                                                            : "$null/mo" }), hasPricingOptions &&
+                                                                tier.pricingOptions.length > 1 && (_jsx("select", { value: selectedCycleId || activePricingOption?.id || "", onClick: (e) => e.stopPropagation(), onChange: (e) => {
+                                                                    e.stopPropagation();
+                                                                    setSelectedBillingCycles((prev) => ({
+                                                                        ...prev,
+                                                                        [tier.id]: e.target.value,
+                                                                    }));
+                                                                }, className: "matrix__tier-cycle-select", children: tier.pricingOptions.map((po) => (_jsxs("option", { value: po.id, children: [BILLING_CYCLE_SHORT_LABELS[po.billingCycle], " ", "- $", po.amount] }, po.id))) }))] }) }, tier.id));
+                                            })] }) }), _jsxs("tbody", { children: [_jsx("tr", { children: _jsx("td", { colSpan: tiers.length + 1, className: "matrix__section-header", children: "Service Catalog" }) }), (setupGroups.length > 0 ||
+                                            ungroupedSetupServices.length > 0) && (_jsx("tr", { children: _jsxs("td", { colSpan: tiers.length + 1, className: "matrix__category-header", children: [_jsx("span", { className: "matrix__category-icon", children: _jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", children: [_jsx("path", { d: "M19 21V5a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v16" }), _jsx("path", { d: "M9 21v-6h6v6" }), _jsx("path", { d: "M9 7h.01M9 11h.01M15 7h.01M15 11h.01" })] }) }), "Setup & Formation"] }) })), setupGroups.map((group) => (_jsx(ServiceGroupSection, { group: group, services: groupedServices.get(group.id) || [], tiers: tiers, isSetupFormation: true, isOptional: false, isEnabled: true, onToggle: () => { }, getServiceLevelForTier: getServiceLevelForTier, getUniqueMetricsForService: getUniqueMetricsForService, getUsageLimitForMetric: getUsageLimitForMetric, getLevelDisplay: getLevelDisplay, selectedCell: selectedCell, setSelectedCell: setSelectedCell, handleSetServiceLevel: handleSetServiceLevel, dispatch: dispatch, setupFee: groupSetupFees[group.id], onAddService: openAddServiceModal, selectedTierIdx: selectedTierIdx, onAddMetric: handleAddMetric, onEditMetric: handleEditMetric, onRemoveMetric: handleRemoveMetric, onTogglePremiumExclusive: handleTogglePremiumExclusive, onReorderService: handleReorderService }, group.id))), ungroupedSetupServices.length > 0 && (_jsx(ServiceGroupSection, { group: {
                                                 id: UNGROUPED_ID,
                                                 name: "Setup & Formation",
                                                 description: null,
                                                 isAddOn: false,
                                                 defaultSelected: true,
-                                            }, services: ungroupedSetupServices, tiers: tiers, isSetupFormation: true, isOptional: false, isEnabled: true, onToggle: () => { }, getServiceLevelForTier: getServiceLevelForTier, getUniqueMetricsForService: getUniqueMetricsForService, getUsageLimitForMetric: getUsageLimitForMetric, getLevelDisplay: getLevelDisplay, selectedCell: selectedCell, setSelectedCell: setSelectedCell, handleSetServiceLevel: handleSetServiceLevel, dispatch: dispatch, setupFee: groupSetupFees[UNGROUPED_ID], selectedTierIdx: selectedTierIdx, onAddMetric: handleAddMetric, onEditMetric: handleEditMetric, onRemoveMetric: handleRemoveMetric, onTogglePremiumExclusive: handleTogglePremiumExclusive }, "ungrouped-setup")), (regularGroups.length > 0 ||
-                                            ungroupedRegularServices.length > 0) && (_jsx("tr", { children: _jsxs("td", { colSpan: tiers.length + 1, className: "matrix__category-header", children: [_jsx("span", { className: "matrix__category-icon", children: _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", children: _jsx("path", { d: "M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83" }) }) }), "Recurring Services"] }) })), regularGroups.map((group) => (_jsx(ServiceGroupSection, { group: group, services: groupedServices.get(group.id) || [], tiers: tiers, isSetupFormation: false, isOptional: false, isEnabled: true, onToggle: () => { }, getServiceLevelForTier: getServiceLevelForTier, getUniqueMetricsForService: getUniqueMetricsForService, getUsageLimitForMetric: getUsageLimitForMetric, getLevelDisplay: getLevelDisplay, selectedCell: selectedCell, setSelectedCell: setSelectedCell, handleSetServiceLevel: handleSetServiceLevel, onAddService: openAddServiceModal, selectedTierIdx: selectedTierIdx, dispatch: dispatch, onAddMetric: handleAddMetric, onEditMetric: handleEditMetric, onRemoveMetric: handleRemoveMetric, onTogglePremiumExclusive: handleTogglePremiumExclusive }, group.id))), ungroupedRegularServices.length > 0 && (_jsx(ServiceGroupSection, { group: {
+                                            }, services: ungroupedSetupServices, tiers: tiers, isSetupFormation: true, isOptional: false, isEnabled: true, onToggle: () => { }, getServiceLevelForTier: getServiceLevelForTier, getUniqueMetricsForService: getUniqueMetricsForService, getUsageLimitForMetric: getUsageLimitForMetric, getLevelDisplay: getLevelDisplay, selectedCell: selectedCell, setSelectedCell: setSelectedCell, handleSetServiceLevel: handleSetServiceLevel, dispatch: dispatch, setupFee: groupSetupFees[UNGROUPED_ID], selectedTierIdx: selectedTierIdx, onAddMetric: handleAddMetric, onEditMetric: handleEditMetric, onRemoveMetric: handleRemoveMetric, onTogglePremiumExclusive: handleTogglePremiumExclusive, onReorderService: handleReorderService }, "ungrouped-setup")), (regularGroups.length > 0 ||
+                                            ungroupedRegularServices.length > 0) && (_jsx("tr", { children: _jsxs("td", { colSpan: tiers.length + 1, className: "matrix__category-header", children: [_jsx("span", { className: "matrix__category-icon", children: _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", children: _jsx("path", { d: "M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83" }) }) }), "Recurring Services"] }) })), regularGroups.map((group) => (_jsx(ServiceGroupSection, { group: group, services: groupedServices.get(group.id) || [], tiers: tiers, isSetupFormation: false, isOptional: false, isEnabled: true, onToggle: () => { }, getServiceLevelForTier: getServiceLevelForTier, getUniqueMetricsForService: getUniqueMetricsForService, getUsageLimitForMetric: getUsageLimitForMetric, getLevelDisplay: getLevelDisplay, selectedCell: selectedCell, setSelectedCell: setSelectedCell, handleSetServiceLevel: handleSetServiceLevel, onAddService: openAddServiceModal, selectedTierIdx: selectedTierIdx, dispatch: dispatch, onAddMetric: handleAddMetric, onEditMetric: handleEditMetric, onRemoveMetric: handleRemoveMetric, onTogglePremiumExclusive: handleTogglePremiumExclusive, onReorderService: handleReorderService }, group.id))), ungroupedRegularServices.length > 0 && (_jsx(ServiceGroupSection, { group: {
                                                 id: UNGROUPED_ID,
                                                 name: "Recurring Services",
                                                 description: null,
                                                 isAddOn: false,
                                                 defaultSelected: true,
-                                            }, services: ungroupedRegularServices, tiers: tiers, isSetupFormation: false, isOptional: false, isEnabled: true, onToggle: () => { }, getServiceLevelForTier: getServiceLevelForTier, getUniqueMetricsForService: getUniqueMetricsForService, getUsageLimitForMetric: getUsageLimitForMetric, getLevelDisplay: getLevelDisplay, selectedCell: selectedCell, setSelectedCell: setSelectedCell, handleSetServiceLevel: handleSetServiceLevel, dispatch: dispatch, selectedTierIdx: selectedTierIdx, onAddMetric: handleAddMetric, onEditMetric: handleEditMetric, onRemoveMetric: handleRemoveMetric, onTogglePremiumExclusive: handleTogglePremiumExclusive }, "ungrouped-regular")), _jsxs("tr", { className: "matrix__total-row", children: [_jsx("td", { children: "SUBTOTAL" }), tiers.map((tier) => (_jsx("td", { style: { textAlign: "center" }, children: tier.isCustomPricing
+                                            }, services: ungroupedRegularServices, tiers: tiers, isSetupFormation: false, isOptional: false, isEnabled: true, onToggle: () => { }, getServiceLevelForTier: getServiceLevelForTier, getUniqueMetricsForService: getUniqueMetricsForService, getUsageLimitForMetric: getUsageLimitForMetric, getLevelDisplay: getLevelDisplay, selectedCell: selectedCell, setSelectedCell: setSelectedCell, handleSetServiceLevel: handleSetServiceLevel, dispatch: dispatch, selectedTierIdx: selectedTierIdx, onAddMetric: handleAddMetric, onEditMetric: handleEditMetric, onRemoveMetric: handleRemoveMetric, onTogglePremiumExclusive: handleTogglePremiumExclusive, onReorderService: handleReorderService }, "ungrouped-regular")), _jsxs("tr", { className: "matrix__total-row", children: [_jsx("td", { children: "SUBTOTAL" }), tiers.map((tier) => (_jsx("td", { style: { textAlign: "center" }, children: tier.isCustomPricing
                                                         ? "Custom"
-                                                        : `$${tier.pricing.amount}` }, tier.id)))] }), addonGroups.map((group) => (_jsx(ServiceGroupSection, { group: group, services: groupedServices.get(group.id) || [], tiers: tiers, isSetupFormation: false, isOptional: true, isEnabled: enabledOptionalGroups.has(group.id), onToggle: () => toggleOptionalGroup(group.id), getServiceLevelForTier: getServiceLevelForTier, getUniqueMetricsForService: getUniqueMetricsForService, getUsageLimitForMetric: getUsageLimitForMetric, getLevelDisplay: getLevelDisplay, selectedCell: selectedCell, setSelectedCell: setSelectedCell, handleSetServiceLevel: handleSetServiceLevel, dispatch: dispatch, onAddService: openAddServiceModal, selectedTierIdx: selectedTierIdx, onAddMetric: handleAddMetric, onEditMetric: handleEditMetric, onRemoveMetric: handleRemoveMetric, onTogglePremiumExclusive: handleTogglePremiumExclusive }, group.id))), _jsxs("tr", { className: "matrix__grand-total-row", children: [_jsx("td", { children: "Grand Total (Recurring)" }), tiers.map((tier, idx) => {
+                                                        : `$${tier.pricing.amount}` }, tier.id)))] }), addonGroups.map((group) => (_jsx(ServiceGroupSection, { group: group, services: groupedServices.get(group.id) || [], tiers: tiers, isSetupFormation: false, isOptional: true, isEnabled: enabledOptionalGroups.has(group.id), onToggle: () => toggleOptionalGroup(group.id), getServiceLevelForTier: getServiceLevelForTier, getUniqueMetricsForService: getUniqueMetricsForService, getUsageLimitForMetric: getUsageLimitForMetric, getLevelDisplay: getLevelDisplay, selectedCell: selectedCell, setSelectedCell: setSelectedCell, handleSetServiceLevel: handleSetServiceLevel, dispatch: dispatch, onAddService: openAddServiceModal, selectedTierIdx: selectedTierIdx, onAddMetric: handleAddMetric, onEditMetric: handleEditMetric, onRemoveMetric: handleRemoveMetric, onTogglePremiumExclusive: handleTogglePremiumExclusive, onReorderService: handleReorderService }, group.id))), _jsxs("tr", { className: "matrix__grand-total-row", children: [_jsx("td", { children: "Grand Total (Recurring)" }), tiers.map((tier, idx) => {
                                                     const tierPrice = tier.pricing.amount || 0;
                                                     const grandTotal = tierPrice;
                                                     return (_jsx("td", { className: idx === selectedTierIdx
@@ -2176,17 +2462,19 @@ export function TheMatrix({ document, dispatch, groupSetupFees = {}, }) {
                                                 setNewServiceName("");
                                                 setNewServiceDescription("");
                                                 setNewServiceSelectedTiers(new Set());
-                                            }, className: "matrix__modal-btn matrix__modal-btn--cancel", children: "Cancel" }), _jsx("button", { onClick: handleAddService, disabled: !newServiceName.trim() || newServiceSelectedTiers.size === 0, className: "matrix__modal-btn matrix__modal-btn--primary", children: "Add Service" })] })] }) })), metricModal && (_jsx("div", { className: "matrix__modal-overlay", children: _jsxs("div", { className: "matrix__modal matrix__modal--wide", children: [_jsx("h3", { className: "matrix__modal-title", children: metricModal.metric ? "Edit Metric" : "Add Metric" }), _jsxs("div", { className: "matrix__modal-field", children: [_jsx("label", { className: "matrix__modal-label", children: "Metric Name" }), _jsx("input", { type: "text", value: metricName, onChange: (e) => setMetricName(e.target.value), placeholder: "e.g., API Calls, Storage, Users", className: "matrix__modal-input", autoFocus: true })] }), _jsxs("div", { className: "matrix__modal-field", children: [_jsx("label", { className: "matrix__modal-label", children: "Pricing Tiers & Values" }), _jsx("p", { className: "matrix__modal-hint", style: { marginBottom: "0.75rem" }, children: "Enable the metric for each tier and set values." }), _jsx("div", { style: {
+                                            }, className: "matrix__modal-btn matrix__modal-btn--cancel", children: "Cancel" }), _jsx("button", { onClick: handleAddService, disabled: !newServiceName.trim() || newServiceSelectedTiers.size === 0, className: "matrix__modal-btn matrix__modal-btn--primary", children: "Add Service" })] })] }) })), metricModal && (_jsx("div", { className: "matrix__modal-overlay", children: _jsxs("div", { className: "matrix__modal matrix__modal--wide", children: [_jsx("h3", { className: "matrix__modal-title", children: metricModal.metric ? "Edit Metric" : "Add Metric" }), _jsxs("div", { className: "matrix__modal-field", children: [_jsx("label", { className: "matrix__modal-label", children: "Metric Name" }), _jsx("input", { type: "text", value: metricName, onChange: (e) => setMetricName(e.target.value), placeholder: "e.g., Number of Entities, API Calls, Storage", className: "matrix__modal-input", autoFocus: true })] }), _jsxs("div", { className: "matrix__modal-field", children: [_jsx("label", { className: "matrix__modal-label", children: "Unit Name (Optional)" }), _jsx("input", { type: "text", value: metricUnitName, onChange: (e) => setMetricUnitName(e.target.value), placeholder: "e.g., entity, user, API call, GB", className: "matrix__modal-input" }), _jsx("p", { className: "matrix__modal-hint", style: { marginTop: "0.375rem" }, children: "Used for overage pricing display (e.g., \"$50 per entity per month\")" })] }), _jsxs("div", { className: "matrix__modal-field", children: [_jsx("label", { className: "matrix__modal-label", children: "Pricing Tiers & Values" }), _jsx("p", { className: "matrix__modal-hint", style: { marginBottom: "0.75rem" }, children: "Enable the metric for each tier and set values." }), _jsx("div", { style: {
                                                 display: "flex",
                                                 flexDirection: "column",
                                                 gap: "0.5rem",
                                             }, children: tiers.map((tier) => {
                                                 const isEnabled = metricEnabledTiers.has(tier.id);
+                                                const tierOveragePrice = metricOveragePrices[tier.id] || "";
+                                                const tierOverageCycle = metricOverageCycles[tier.id] || "";
                                                 return (_jsxs("div", { style: {
                                                         display: "flex",
-                                                        alignItems: "center",
-                                                        gap: "0.75rem",
-                                                        padding: "0.5rem",
+                                                        flexDirection: "column",
+                                                        gap: "0.5rem",
+                                                        padding: "0.75rem",
                                                         borderRadius: "6px",
                                                         background: isEnabled
                                                             ? "rgba(124, 58, 237, 0.05)"
@@ -2195,48 +2483,101 @@ export function TheMatrix({ document, dispatch, groupSetupFees = {}, }) {
                                                             ? "1px solid rgba(124, 58, 237, 0.2)"
                                                             : "1px solid #e2e8f0",
                                                         transition: "all 0.15s ease",
-                                                    }, children: [_jsxs("label", { style: {
+                                                    }, children: [_jsxs("div", { style: {
+                                                                display: "flex",
+                                                                alignItems: "center",
+                                                                gap: "0.75rem",
+                                                            }, children: [_jsxs("label", { style: {
+                                                                        display: "flex",
+                                                                        alignItems: "center",
+                                                                        gap: "0.5rem",
+                                                                        cursor: "pointer",
+                                                                        minWidth: "120px",
+                                                                    }, children: [_jsx("input", { type: "checkbox", checked: isEnabled, onChange: (e) => {
+                                                                                setMetricEnabledTiers((prev) => {
+                                                                                    const next = new Set(prev);
+                                                                                    if (e.target.checked) {
+                                                                                        next.add(tier.id);
+                                                                                    }
+                                                                                    else {
+                                                                                        next.delete(tier.id);
+                                                                                    }
+                                                                                    return next;
+                                                                                });
+                                                                            }, style: {
+                                                                                width: "16px",
+                                                                                height: "16px",
+                                                                                accentColor: "#7c3aed",
+                                                                                cursor: "pointer",
+                                                                            } }), _jsx("span", { style: {
+                                                                                fontWeight: 600,
+                                                                                color: isEnabled ? "#334155" : "#94a3b8",
+                                                                                fontSize: "0.875rem",
+                                                                            }, children: tier.name })] }), _jsx("input", { type: "text", value: metricLimits[tier.id] || "", onChange: (e) => setMetricLimits((prev) => ({
+                                                                        ...prev,
+                                                                        [tier.id]: e.target.value,
+                                                                    })), placeholder: isEnabled ? "Limit value" : "—", className: "matrix__modal-input", disabled: !isEnabled, style: {
+                                                                        flex: 1,
+                                                                        opacity: isEnabled ? 1 : 0.5,
+                                                                        cursor: isEnabled ? "text" : "not-allowed",
+                                                                    } })] }), isEnabled && (_jsxs("div", { style: {
                                                                 display: "flex",
                                                                 alignItems: "center",
                                                                 gap: "0.5rem",
-                                                                cursor: "pointer",
-                                                                minWidth: "120px",
-                                                            }, children: [_jsx("input", { type: "checkbox", checked: isEnabled, onChange: (e) => {
-                                                                        setMetricEnabledTiers((prev) => {
-                                                                            const next = new Set(prev);
-                                                                            if (e.target.checked) {
-                                                                                next.add(tier.id);
-                                                                            }
-                                                                            else {
-                                                                                next.delete(tier.id);
-                                                                            }
-                                                                            return next;
-                                                                        });
-                                                                    }, style: {
-                                                                        width: "16px",
-                                                                        height: "16px",
-                                                                        accentColor: "#7c3aed",
+                                                                marginLeft: "1.75rem",
+                                                                padding: "0.5rem 0.75rem",
+                                                                background: "rgba(255,255,255,0.6)",
+                                                                borderRadius: "4px",
+                                                            }, children: [_jsx("span", { style: {
+                                                                        fontSize: "0.75rem",
+                                                                        color: "#64748b",
+                                                                        whiteSpace: "nowrap",
+                                                                    }, children: "Overage:" }), _jsx("span", { style: {
+                                                                        fontFamily: "var(--so-font-mono)",
+                                                                        fontSize: "0.8125rem",
+                                                                        color: "#64748b",
+                                                                    }, children: "$" }), _jsx("input", { type: "number", value: tierOveragePrice, onChange: (e) => setMetricOveragePrices((prev) => ({
+                                                                        ...prev,
+                                                                        [tier.id]: e.target.value,
+                                                                    })), placeholder: "0.00", step: "0.01", style: {
+                                                                        width: "4rem",
+                                                                        fontFamily: "var(--so-font-mono)",
+                                                                        fontSize: "0.8125rem",
+                                                                        fontWeight: 500,
+                                                                        color: "#0f172a",
+                                                                        background: "#ffffff",
+                                                                        border: "1px solid #cbd5e1",
+                                                                        borderRadius: "4px",
+                                                                        padding: "0.25rem 0.375rem",
+                                                                        outline: "none",
+                                                                    } }), _jsx("span", { style: { fontSize: "0.75rem", color: "#94a3b8" }, children: "/" }), _jsxs("select", { value: tierOverageCycle, onChange: (e) => setMetricOverageCycles((prev) => ({
+                                                                        ...prev,
+                                                                        [tier.id]: e.target.value || "",
+                                                                    })), style: {
+                                                                        fontFamily: "var(--so-font-sans)",
+                                                                        fontSize: "0.75rem",
+                                                                        color: "#334155",
+                                                                        background: "#ffffff",
+                                                                        border: "1px solid #cbd5e1",
+                                                                        borderRadius: "4px",
+                                                                        padding: "0.25rem 0.375rem",
                                                                         cursor: "pointer",
-                                                                    } }), _jsx("span", { style: {
-                                                                        fontWeight: 600,
-                                                                        color: isEnabled ? "#334155" : "#94a3b8",
-                                                                        fontSize: "0.875rem",
-                                                                    }, children: tier.name })] }), _jsx("input", { type: "text", value: metricLimits[tier.id] || "", onChange: (e) => setMetricLimits((prev) => ({
-                                                                ...prev,
-                                                                [tier.id]: e.target.value,
-                                                            })), placeholder: isEnabled ? "Enter value" : "—", className: "matrix__modal-input", disabled: !isEnabled, style: {
-                                                                flex: 1,
-                                                                opacity: isEnabled ? 1 : 0.5,
-                                                                cursor: isEnabled ? "text" : "not-allowed",
-                                                            } })] }, tier.id));
+                                                                        outline: "none",
+                                                                    }, children: [_jsx("option", { value: "", children: "None" }), RECURRING_BILLING_CYCLES.map((cycle) => (_jsx("option", { value: cycle, children: BILLING_CYCLE_SHORT_LABELS[cycle] }, cycle)))] }), _jsxs("span", { style: {
+                                                                        fontSize: "0.6875rem",
+                                                                        color: "#64748b",
+                                                                    }, children: ["per extra ", metricUnitName || "unit"] })] }))] }, tier.id));
                                             }) })] }), _jsxs("div", { className: "matrix__modal-actions", children: [_jsx("button", { onClick: () => {
                                                 setMetricModal(null);
                                                 setMetricName("");
+                                                setMetricUnitName("");
                                                 setMetricLimits({});
                                                 setMetricEnabledTiers(new Set());
+                                                setMetricOveragePrices({});
+                                                setMetricOverageCycles({});
                                             }, className: "matrix__modal-btn matrix__modal-btn--cancel", children: "Cancel" }), _jsx("button", { onClick: handleSaveMetric, disabled: !metricName.trim() || metricEnabledTiers.size === 0, className: "matrix__modal-btn matrix__modal-btn--primary", children: metricModal.metric ? "Save Changes" : "Add Metric" })] })] }) }))] })] }));
 }
-function ServiceGroupSection({ group, services, tiers, isSetupFormation, isOptional, isEnabled, onToggle, getServiceLevelForTier, getUniqueMetricsForService, getUsageLimitForMetric, getLevelDisplay, selectedCell, setSelectedCell, setupFee, onAddService, selectedTierIdx, onAddMetric, onEditMetric, onRemoveMetric, onTogglePremiumExclusive, }) {
+function ServiceGroupSection({ group, services, tiers, isSetupFormation, isOptional, isEnabled, onToggle, getServiceLevelForTier, getUniqueMetricsForService, getUsageLimitForMetric, getLevelDisplay, selectedCell, setSelectedCell, setupFee, onAddService, selectedTierIdx, onAddMetric, onEditMetric, onRemoveMetric, onTogglePremiumExclusive, onReorderService, }) {
     const showGroup = services.length > 0 || onAddService;
     if (!showGroup)
         return null;
@@ -2256,9 +2597,9 @@ function ServiceGroupSection({ group, services, tiers, isSetupFormation, isOptio
                                 ? "INCLUDED"
                                 : isOptional
                                     ? "OPTIONAL"
-                                    : "INCLUDED" }) })] }), services.map((service) => {
+                                    : "INCLUDED" }) })] }), services.map((service, serviceIndex) => {
                 const metrics = getUniqueMetricsForService(service.id);
-                return (_jsx(ServiceRowWithMetrics, { service: service, metrics: metrics, tiers: tiers, rowClass: rowClass, getServiceLevelForTier: getServiceLevelForTier, getUsageLimitForMetric: getUsageLimitForMetric, getLevelDisplay: getLevelDisplay, selectedCell: selectedCell, setSelectedCell: setSelectedCell, selectedTierIdx: selectedTierIdx, onAddMetric: onAddMetric, onEditMetric: onEditMetric, onRemoveMetric: onRemoveMetric, onTogglePremiumExclusive: onTogglePremiumExclusive }, service.id));
+                return (_jsx(ServiceRowWithMetrics, { service: service, metrics: metrics, tiers: tiers, rowClass: rowClass, getServiceLevelForTier: getServiceLevelForTier, getUsageLimitForMetric: getUsageLimitForMetric, getLevelDisplay: getLevelDisplay, selectedCell: selectedCell, setSelectedCell: setSelectedCell, selectedTierIdx: selectedTierIdx, onAddMetric: onAddMetric, onEditMetric: onEditMetric, onRemoveMetric: onRemoveMetric, onTogglePremiumExclusive: onTogglePremiumExclusive, onReorderService: onReorderService, groupServices: services, serviceIndex: serviceIndex }, service.id));
             }), onAddService && group.id !== "__ungrouped__" && (_jsxs("tr", { className: `matrix__add-service-row ${rowClass}`, children: [_jsx("td", { className: rowClass, children: _jsxs("button", { onClick: () => onAddService(group.id, isSetupFormation), className: "matrix__add-service-btn", children: [_jsx("svg", { className: "matrix__add-service-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 4v16m8-8H4" }) }), "+ Add a Service"] }) }), _jsx("td", { colSpan: tiers.length, className: rowClass })] })), isSetupFormation && (_jsxs("tr", { className: "matrix__setup-total-row", children: [_jsx("td", { children: "TOTAL SETUP FEE" }), _jsx("td", { colSpan: tiers.length, style: { textAlign: "center" }, children: setupFee
                             ? `$${setupFee} flat fee (applied to all tiers)`
                             : "No setup fee configured" })] })), isOptional && (_jsxs("tr", { className: `matrix__total-row ${headerClass}`, children: [_jsx("td", { className: headerClass, children: "SUBTOTAL" }), tiers.map((tier, tierIdx) => {
@@ -2274,10 +2615,16 @@ function ServiceGroupSection({ group, services, tiers, isSetupFormation, isOptio
                             }, children: isEnabled ? priceDisplay : "$0" }, tier.id));
                     })] }))] }));
 }
-function ServiceRowWithMetrics({ service, metrics, tiers, rowClass, getServiceLevelForTier, getUsageLimitForMetric, getLevelDisplay, selectedCell, setSelectedCell, selectedTierIdx, onAddMetric, onEditMetric, onRemoveMetric, onTogglePremiumExclusive, }) {
+function ServiceRowWithMetrics({ service, metrics, tiers, rowClass, getServiceLevelForTier, getUsageLimitForMetric, getLevelDisplay, selectedCell, setSelectedCell, selectedTierIdx, onAddMetric, onEditMetric, onRemoveMetric, onTogglePremiumExclusive, onReorderService, groupServices, serviceIndex, }) {
     // Use persisted isPremiumExclusive field from document state
     const isPremiumExclusive = service.isPremiumExclusive;
-    return (_jsxs(_Fragment, { children: [_jsxs("tr", { className: `matrix__service-row ${rowClass}`, children: [_jsx("td", { className: `matrix__service-cell ${rowClass}`, children: _jsxs("div", { className: "matrix__service-cell-wrapper", children: [_jsx("span", { className: "matrix__service-title", children: service.title }), _jsxs("button", { onClick: (e) => {
+    return (_jsxs(_Fragment, { children: [_jsxs("tr", { className: `matrix__service-row ${rowClass}`, children: [_jsx("td", { className: `matrix__service-cell ${rowClass}`, children: _jsxs("div", { className: "matrix__service-cell-wrapper", children: [_jsxs("div", { className: "matrix__reorder-btns", children: [_jsx("button", { className: "matrix__reorder-btn", onClick: (e) => {
+                                                e.stopPropagation();
+                                                onReorderService(service.id, "up", groupServices);
+                                            }, disabled: serviceIndex === 0, title: "Move up", children: _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M18 15l-6-6-6 6" }) }) }), _jsx("button", { className: "matrix__reorder-btn", onClick: (e) => {
+                                                e.stopPropagation();
+                                                onReorderService(service.id, "down", groupServices);
+                                            }, disabled: serviceIndex === groupServices.length - 1, title: "Move down", children: _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M6 9l6 6 6-6" }) }) })] }), _jsx("span", { className: "matrix__service-title", children: service.title }), _jsxs("button", { onClick: (e) => {
                                         e.stopPropagation();
                                         onTogglePremiumExclusive(service.id);
                                     }, className: `matrix__premium-badge ${isPremiumExclusive ? "matrix__premium-badge--active" : "matrix__premium-badge--inactive"}`, title: isPremiumExclusive
@@ -2311,11 +2658,12 @@ function ServiceRowWithMetrics({ service, metrics, tiers, rowClass, getServiceLe
                         const usageLimit = getUsageLimitForMetric(service.id, metric, tier);
                         return (_jsx("td", { className: `matrix__metric-value-cell ${tierIdx === selectedTierIdx
                                 ? "matrix__level-cell--highlight"
-                                : ""}`, children: _jsx("span", { className: "matrix__metric-value", children: usageLimit
-                                    ? usageLimit.limit
-                                        ? `Up to ${usageLimit.limit}`
-                                        : usageLimit.notes || "Unlimited"
-                                    : "—" }) }, tier.id));
+                                : ""}`, children: _jsxs("div", { className: "matrix__metric-value-container", children: [_jsx("span", { className: "matrix__metric-value", children: usageLimit
+                                            ? usageLimit.limit
+                                                ? `Up to ${usageLimit.limit}`
+                                                : usageLimit.notes || "Unlimited"
+                                            : "—" }), usageLimit?.unitPrice &&
+                                        usageLimit?.unitPriceBillingCycle && (_jsxs("span", { className: "matrix__metric-overage", children: ["+", formatPrice(usageLimit.unitPrice, usageLimit.unitPriceCurrency || "USD"), "/", BILLING_CYCLE_SHORT_LABELS[usageLimit.unitPriceBillingCycle].toLowerCase()] }))] }) }, tier.id));
                     })] }, `${service.id}-${metric}`)))] }));
 }
 function ServiceLevelDetailPanel({ serviceId, tierId, services, tiers, optionGroups: _optionGroups, dispatch, onClose, }) {
@@ -2414,37 +2762,6 @@ function ServiceLevelDetailPanel({ serviceId, tierId, services, tiers, optionGro
             lastModified: new Date().toISOString(),
         }));
     };
-    const handleSetLevel = (level) => {
-        if (serviceLevel) {
-            dispatch(updateServiceLevel({
-                tierId: tier.id,
-                serviceLevelId: serviceLevel.id,
-                level,
-                customValue: level === "CUSTOM" ? customValue : undefined,
-                lastModified: new Date().toISOString(),
-            }));
-        }
-        else {
-            dispatch(addServiceLevel({
-                tierId: tier.id,
-                serviceLevelId: generateId(),
-                serviceId: service.id,
-                level,
-                customValue: level === "CUSTOM" ? customValue : undefined,
-                lastModified: new Date().toISOString(),
-            }));
-        }
-    };
-    const handleUpdateCustomValue = () => {
-        if (serviceLevel && serviceLevel.level === "CUSTOM") {
-            dispatch(updateServiceLevel({
-                tierId: tier.id,
-                serviceLevelId: serviceLevel.id,
-                customValue,
-                lastModified: new Date().toISOString(),
-            }));
-        }
-    };
     return (_jsx("div", { ref: overlayRef, className: "matrix__panel-overlay", onClick: handleOverlayClick, role: "dialog", "aria-modal": "true", "aria-labelledby": "panel-title", children: _jsxs("div", { ref: panelRef, className: "matrix__panel", children: [_jsxs("div", { className: "matrix__panel-header", children: [_jsxs("div", { className: "matrix__panel-header-top", children: [_jsxs("span", { className: "matrix__panel-tier", children: [tier.name, " Tier"] }), _jsx("button", { onClick: onClose, className: "matrix__panel-close", children: _jsx("svg", { className: "matrix__panel-close-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })] }), _jsx("h3", { id: "panel-title", className: "matrix__panel-title", children: service.title })] }), _jsx("div", { className: "matrix__panel-body", children: _jsxs("div", { children: [_jsxs("div", { className: "matrix__panel-limits-header", children: [_jsx("label", { className: "matrix__panel-section-label", style: { marginBottom: 0 }, children: "Metrics" }), _jsx("button", { onClick: () => setIsAddingMetric(true), className: "matrix__panel-add-btn", children: "+ Add Metric" })] }), usageLimits.map((limit) => (_jsx(MetricLimitItem, { limit: limit, tierId: tier.id, dispatch: dispatch, onRemove: () => handleRemoveLimit(limit.id) }, limit.id))), usageLimits.length === 0 && !isAddingMetric && (_jsx("p", { className: "matrix__panel-empty-text", children: "No metrics added yet. Metrics will appear as nested rows under this service in the matrix." })), isAddingMetric && (_jsxs("div", { className: "matrix__panel-edit-form", children: [_jsxs("div", { children: [_jsx("label", { className: "matrix__panel-edit-label", children: "Metric Name" }), _jsx("input", { type: "text", value: newMetric, onChange: (e) => setNewMetric(e.target.value), placeholder: "e.g., API Calls, Storage, Users", className: "matrix__panel-input", autoFocus: true })] }), _jsxs("div", { children: [_jsx("label", { className: "matrix__panel-edit-label", children: "Value" }), _jsx("input", { type: "text", value: newLimit, onChange: (e) => setNewLimit(e.target.value), placeholder: "e.g., 100, Unlimited, Custom", className: "matrix__panel-input" }), _jsx("p", { className: "matrix__panel-edit-hint", children: "Enter a value or leave empty" })] }), _jsxs("div", { className: "matrix__panel-edit-actions", children: [_jsx("button", { onClick: handleAddLimit, disabled: !newMetric.trim(), className: "matrix__panel-edit-btn matrix__panel-edit-btn--primary", children: "Add Metric" }), _jsx("button", { onClick: () => {
                                                     setNewMetric("");
                                                     setNewLimit("");
@@ -2454,27 +2771,53 @@ function ServiceLevelDetailPanel({ serviceId, tierId, services, tiers, optionGro
 function MetricLimitItem({ limit, tierId, dispatch, onRemove, }) {
     const [isEditing, setIsEditing] = useState(false);
     const [editMetric, setEditMetric] = useState(limit.metric);
+    const [editUnitName, setEditUnitName] = useState(limit.unitName || "");
     const [editLimit, setEditLimit] = useState(limit.limit?.toString() || limit.notes || "");
+    // Overage pricing state
+    const [editUnitPrice, setEditUnitPrice] = useState(limit.unitPrice?.toString() || "");
+    const [editUnitPriceCurrency] = useState(limit.unitPriceCurrency || "USD");
+    const [editUnitPriceBillingCycle, setEditUnitPriceBillingCycle] = useState(limit.unitPriceBillingCycle || "");
     const handleSave = () => {
         const parsedLimit = editLimit ? parseInt(editLimit, 10) : null;
         const isNumeric = parsedLimit !== null && !isNaN(parsedLimit);
+        const parsedUnitPrice = editUnitPrice ? parseFloat(editUnitPrice) : null;
         dispatch(updateUsageLimit({
             tierId,
             limitId: limit.id,
             metric: editMetric.trim() || limit.metric,
+            unitName: editUnitName.trim() || undefined,
             limit: isNumeric ? parsedLimit : undefined,
             notes: !isNumeric && editLimit ? editLimit.trim() : undefined,
+            unitPrice: parsedUnitPrice,
+            unitPriceCurrency: parsedUnitPrice && editUnitPriceBillingCycle
+                ? editUnitPriceCurrency
+                : undefined,
+            unitPriceBillingCycle: parsedUnitPrice && editUnitPriceBillingCycle
+                ? editUnitPriceBillingCycle
+                : undefined,
             lastModified: new Date().toISOString(),
         }));
         setIsEditing(false);
     };
     const handleCancel = () => {
         setEditMetric(limit.metric);
+        setEditUnitName(limit.unitName || "");
         setEditLimit(limit.limit?.toString() || limit.notes || "");
+        setEditUnitPrice(limit.unitPrice?.toString() || "");
+        setEditUnitPriceBillingCycle(limit.unitPriceBillingCycle || "");
         setIsEditing(false);
     };
+    // Format overage display string
+    const getOverageDisplay = () => {
+        if (!limit.unitPrice || !limit.unitPriceBillingCycle)
+            return null;
+        const cycleLabel = BILLING_CYCLE_SHORT_LABELS[limit.unitPriceBillingCycle].toLowerCase();
+        const unitLabel = limit.unitName || "unit";
+        return `+${formatPrice(limit.unitPrice, limit.unitPriceCurrency || "USD")} per ${unitLabel}/${cycleLabel}`;
+    };
+    const overageDisplay = getOverageDisplay();
     if (isEditing) {
-        return (_jsxs("div", { className: "matrix__panel-edit-form", children: [_jsxs("div", { children: [_jsx("label", { className: "matrix__panel-edit-label", children: "Metric Name" }), _jsx("input", { type: "text", value: editMetric, onChange: (e) => setEditMetric(e.target.value), placeholder: "Metric name", className: "matrix__panel-input", autoFocus: true })] }), _jsxs("div", { children: [_jsx("label", { className: "matrix__panel-edit-label", children: "Value" }), _jsx("input", { type: "text", value: editLimit, onChange: (e) => setEditLimit(e.target.value), placeholder: "e.g., 100, Unlimited, Custom", className: "matrix__panel-input" }), _jsx("p", { className: "matrix__panel-edit-hint", children: "Enter a value or leave empty" })] }), _jsxs("div", { className: "matrix__panel-edit-actions", children: [_jsx("button", { onClick: handleSave, className: "matrix__panel-edit-btn matrix__panel-edit-btn--primary", children: "Save" }), _jsx("button", { onClick: handleCancel, className: "matrix__panel-edit-btn matrix__panel-edit-btn--secondary", children: "Cancel" })] })] }));
+        return (_jsxs("div", { className: "matrix__panel-edit-form", children: [_jsxs("div", { children: [_jsx("label", { className: "matrix__panel-edit-label", children: "Metric Name" }), _jsx("input", { type: "text", value: editMetric, onChange: (e) => setEditMetric(e.target.value), placeholder: "e.g., Number of Entities", className: "matrix__panel-input", autoFocus: true })] }), _jsxs("div", { children: [_jsx("label", { className: "matrix__panel-edit-label", children: "Unit Name" }), _jsx("input", { type: "text", value: editUnitName, onChange: (e) => setEditUnitName(e.target.value), placeholder: "e.g., entity, credit card, contractor", className: "matrix__panel-input" }), _jsx("p", { className: "matrix__panel-edit-hint", children: "Used for overage pricing display (e.g., \"$50 per entity\")" })] }), _jsxs("div", { children: [_jsx("label", { className: "matrix__panel-edit-label", children: "Included Value" }), _jsx("input", { type: "text", value: editLimit, onChange: (e) => setEditLimit(e.target.value), placeholder: "e.g., 100, Unlimited, Custom", className: "matrix__panel-input" }), _jsx("p", { className: "matrix__panel-edit-hint", children: "Enter limit included in tier or leave empty" })] }), _jsxs("div", { className: "matrix__panel-overage-section", children: [_jsx("label", { className: "matrix__panel-edit-label", children: "Overage Pricing (Optional)" }), _jsx("p", { className: "matrix__panel-edit-hint", style: { marginBottom: "0.5rem" }, children: "Set a price for usage beyond the included limit" }), _jsxs("div", { className: "matrix__panel-overage-row", children: [_jsxs("div", { className: "matrix__panel-overage-price", children: [_jsx("span", { className: "matrix__panel-overage-currency", children: "$" }), _jsx("input", { type: "number", value: editUnitPrice, onChange: (e) => setEditUnitPrice(e.target.value), placeholder: "0.00", step: "0.01", className: "matrix__panel-overage-input" })] }), _jsx("span", { className: "matrix__panel-overage-separator", children: "/" }), _jsxs("select", { value: editUnitPriceBillingCycle, onChange: (e) => setEditUnitPriceBillingCycle(e.target.value || ""), className: "matrix__panel-overage-select", children: [_jsx("option", { value: "", children: "No overage" }), RECURRING_BILLING_CYCLES.map((cycle) => (_jsx("option", { value: cycle, children: BILLING_CYCLE_SHORT_LABELS[cycle] }, cycle)))] }), _jsxs("span", { className: "matrix__panel-overage-label", children: ["per ", editUnitName || "unit"] })] })] }), _jsxs("div", { className: "matrix__panel-edit-actions", children: [_jsx("button", { onClick: handleSave, className: "matrix__panel-edit-btn matrix__panel-edit-btn--primary", children: "Save" }), _jsx("button", { onClick: handleCancel, className: "matrix__panel-edit-btn matrix__panel-edit-btn--secondary", children: "Cancel" })] })] }));
     }
-    return (_jsxs("div", { className: "matrix__panel-limit-item", children: [_jsxs("div", { className: "matrix__panel-limit-content", onClick: () => setIsEditing(true), children: [_jsx("div", { className: "matrix__panel-limit-metric", children: limit.metric }), _jsx("div", { className: "matrix__panel-limit-value", children: limit.limit ?? limit.notes ?? "—" })] }), _jsxs("div", { className: "matrix__panel-limit-actions", children: [_jsx("button", { onClick: () => setIsEditing(true), className: "matrix__panel-limit-btn matrix__panel-limit-btn--edit", title: "Edit metric", children: _jsx("svg", { className: "matrix__panel-limit-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" }) }) }), _jsx("button", { onClick: onRemove, className: "matrix__panel-limit-btn matrix__panel-limit-btn--remove", title: "Remove metric", children: _jsx("svg", { className: "matrix__panel-limit-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })] })] }));
+    return (_jsxs("div", { className: "matrix__panel-limit-item", children: [_jsxs("div", { className: "matrix__panel-limit-content", onClick: () => setIsEditing(true), children: [_jsx("div", { className: "matrix__panel-limit-metric", children: limit.metric }), _jsxs("div", { className: "matrix__panel-limit-value-group", children: [_jsx("div", { className: "matrix__panel-limit-value", children: limit.limit ?? limit.notes ?? "—" }), overageDisplay && (_jsx("div", { className: "matrix__panel-limit-overage", children: overageDisplay }))] })] }), _jsxs("div", { className: "matrix__panel-limit-actions", children: [_jsx("button", { onClick: () => setIsEditing(true), className: "matrix__panel-limit-btn matrix__panel-limit-btn--edit", title: "Edit metric", children: _jsx("svg", { className: "matrix__panel-limit-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" }) }) }), _jsx("button", { onClick: onRemove, className: "matrix__panel-limit-btn matrix__panel-limit-btn--remove", title: "Remove metric", children: _jsx("svg", { className: "matrix__panel-limit-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })] })] }));
 }