@powerhousedao/service-offering 1.0.0-dev.4 → 1.0.0-dev.6

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

@@ -2,8 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useState, useMemo, useEffect, useRef, useCallback } from "react";
 import { generateId } from "document-model/core";
 import { usePHToast, } from "@powerhousedao/reactor-browser";
+import {} from "@powerhousedao/service-offering/document-models/service-offering";
 import { BILLING_CYCLE_SHORT_LABELS, BILLING_CYCLE_LABELS, BILLING_CYCLE_MONTHS, RECURRING_BILLING_CYCLES, formatPrice, detectMajorityCycle, } from "./pricing-utils.js";
 import { addServiceLevel, updateServiceLevel, addUsageLimit, updateUsageLimit, removeUsageLimit, addService, updateService, } from "../../../document-models/service-offering/v1/gen/creators.js";
+import { getUserSelectionPriceBreakdown, } from "../../../document-models/service-offering/v1/index.js";
 import { InfoIcon } from "./InfoIcon.js";
 import { ConfirmDialog } from "./ConfirmDialog.js";
 const SERVICE_LEVELS = [
@@ -237,44 +239,16 @@ export function TheMatrix({ document, dispatch }) {
     const addonGroups = useMemo(() => {
         return optionGroups.filter((g) => g.isAddOn);
     }, [optionGroups]);
+    // Precompute price breakdowns for all tiers using the centralized utility
     const tierBreakdowns = useMemo(() => {
-        const months = BILLING_CYCLE_MONTHS[activeBillingCycle];
-        return tiers.map((tier) => {
-            const regularGroups = optionGroups.filter((g) => g.costType !== "SETUP" && !g.isAddOn);
-            let monthlyBase = 0;
-            const ogBreakdowns = [];
-            for (const group of regularGroups) {
-                const tp = group.tierDependentPricing?.find((p) => p.tierId === tier.id);
-                const amount = tp?.amount ?? group.standalonePricing?.amount ?? 0;
-                monthlyBase += amount;
-                ogBreakdowns.push({
-                    optionGroupId: group.id,
-                    cycleAmount: amount * months,
-                });
-            }
-            let addOnTotal = 0;
-            const addOnBreakdowns = [];
-            for (const group of optionGroups.filter((g) => g.isAddOn)) {
-                if (!enabledOptionalGroups.has(group.id))
-                    continue;
-                const tp = group.tierDependentPricing?.find((p) => p.tierId === tier.id);
-                const amount = tp?.amount ?? group.standalonePricing?.amount ?? 0;
-                addOnTotal += amount * months;
-                addOnBreakdowns.push({
-                    optionGroupId: group.id,
-                    cycleAmount: amount * months,
-                });
-            }
-            const tierCycleTotal = monthlyBase * months;
-            return {
-                tierMonthlyBase: monthlyBase,
-                tierCycleTotal,
-                tierCurrency: tier.pricing?.currency || "USD",
-                addOnBreakdowns,
-                optionGroupBreakdowns: ogBreakdowns,
-                totals: { grandRecurringTotal: tierCycleTotal + addOnTotal },
-            };
-        });
+        const addonIds = [...enabledOptionalGroups];
+        return tiers.map((tier) => getUserSelectionPriceBreakdown(state, {
+            tierId: tier.id,
+            billingCycle: activeBillingCycle,
+            optionGroupIds: addonIds,
+            groupBillingCycleOverrides: groupBillingCycles,
+            addonBillingCycleOverrides: addonBillingCycles,
+        }));
     }, [
         tiers,
         optionGroups,
@@ -292,10 +266,12 @@ export function TheMatrix({ document, dispatch }) {
     const getServiceLevelForTier = (serviceId, tier) => {
         return tier.serviceLevels.find((sl) => sl.serviceId === serviceId);
     };
-    const getUniqueMetricsForService = (_serviceId) => {
+    const getUniqueMetricsForService = (serviceId) => {
         const metricsSet = new Set();
         tiers.forEach((tier) => {
-            tier.usageLimits.forEach((ul) => metricsSet.add(ul.name));
+            tier.usageLimits
+                .filter((ul) => ul.serviceId === serviceId)
+                .forEach((ul) => metricsSet.add(ul.metric));
         });
         return Array.from(metricsSet);
     };
@@ -309,8 +285,8 @@ export function TheMatrix({ document, dispatch }) {
             return !isIncludedAnywhere;
         });
     }, [services, tiers]);
-    const getUsageLimitForMetric = (_serviceId, metric, tier) => {
-        return tier.usageLimits.find((ul) => ul.name === metric);
+    const getUsageLimitForMetric = (serviceId, metric, tier) => {
+        return tier.usageLimits.find((ul) => ul.serviceId === serviceId && ul.metric === metric);
     };
     // Derive tier display pricing from precomputed breakdown
     const getTierDisplayPrice = (tierIdx) => {
@@ -334,11 +310,11 @@ export function TheMatrix({ document, dispatch }) {
             discountLabel: savingsPercent > 0 ? `SAVE ${savingsPercent}%` : "",
         };
     };
-    const handleSetServiceLevel = (serviceId, tierId, level, existingLevelId, _optionGroupId) => {
+    const handleSetServiceLevel = (serviceId, tierId, level, existingLevelId, optionGroupId) => {
         if (existingLevelId) {
             dispatch(updateServiceLevel({
                 tierId,
-                id: existingLevelId,
+                serviceLevelId: existingLevelId,
                 level,
                 lastModified: new Date().toISOString(),
             }));
@@ -346,9 +322,10 @@ export function TheMatrix({ document, dispatch }) {
         else {
             dispatch(addServiceLevel({
                 tierId,
-                id: generateId(),
+                serviceLevelId: generateId(),
                 serviceId,
                 level,
+                optionGroupId,
                 lastModified: new Date().toISOString(),
             }));
         }
@@ -381,12 +358,16 @@ export function TheMatrix({ document, dispatch }) {
                 : undefined,
             lastModified: now,
         }));
+        // Create ServiceLevelBindings for each selected tier
         newServiceSelectedTiers.forEach((tierId) => {
             dispatch(addServiceLevel({
                 tierId,
-                id: generateId(),
+                serviceLevelId: generateId(),
                 serviceId: newServiceId,
                 level: "INCLUDED",
+                optionGroupId: addServiceModal.groupId !== UNGROUPED_ID
+                    ? addServiceModal.groupId
+                    : undefined,
                 lastModified: now,
             }));
         });
@@ -431,20 +412,23 @@ export function TheMatrix({ document, dispatch }) {
             const existingLevel = tier.serviceLevels.find((sl) => sl.serviceId === editServiceModal.id);
             const shouldBeIncluded = editServiceSelectedTiers.has(tier.id);
             if (shouldBeIncluded && !existingLevel) {
+                // Add to tier
                 dispatch(addServiceLevel({
                     tierId: tier.id,
-                    id: generateId(),
+                    serviceLevelId: generateId(),
                     serviceId: editServiceModal.id,
                     level: "INCLUDED",
+                    optionGroupId: editServiceModal.optionGroupId || undefined,
                     lastModified: now,
                 }));
             }
             else if (shouldBeIncluded &&
                 existingLevel &&
                 existingLevel.level !== "INCLUDED") {
+                // Update to included
                 dispatch(updateServiceLevel({
                     tierId: tier.id,
-                    id: existingLevel.id,
+                    serviceLevelId: existingLevel.id,
                     level: "INCLUDED",
                     lastModified: now,
                 }));
@@ -452,9 +436,10 @@ export function TheMatrix({ document, dispatch }) {
             else if (!shouldBeIncluded &&
                 existingLevel &&
                 existingLevel.level === "INCLUDED") {
+                // Remove from tier (set to NOT_INCLUDED)
                 dispatch(updateServiceLevel({
                     tierId: tier.id,
-                    id: existingLevel.id,
+                    serviceLevelId: existingLevel.id,
                     level: "NOT_INCLUDED",
                     lastModified: now,
                 }));
@@ -494,23 +479,33 @@ export function TheMatrix({ document, dispatch }) {
         const service = services.find((s) => s.id === serviceId);
         setMetricResetCycle(service?.isSetupFormation ? "NONE" : "MONTHLY");
     };
-    const handleEditMetric = (_serviceId, metric) => {
-        setMetricModal({ serviceId: _serviceId, metric });
+    const handleEditMetric = (serviceId, metric) => {
+        setMetricModal({ serviceId, metric });
         setMetricName(metric);
+        // Initialize limits with existing values and track which tiers have this metric
         const existingLimits = {};
         const existingPaidLimits = {};
         const existingOveragePrices = {};
         const enabledTiers = new Set();
         let existingUnitName = "";
+        let existingResetCycle = "MONTHLY";
         tiers.forEach((tier) => {
-            const usageLimit = tier.usageLimits.find((ul) => ul.name === metric);
-            existingLimits[tier.id] = usageLimit?.limit?.toString() || "";
-            existingPaidLimits[tier.id] = "";
-            existingOveragePrices[tier.id] = "";
+            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?.freeLimit?.toString() || usageLimit?.notes || "";
+            existingPaidLimits[tier.id] = usageLimit?.paidLimit?.toString() || "";
+            // Load per-tier overage pricing
+            existingOveragePrices[tier.id] = usageLimit?.unitPrice?.toString() || "";
             if (usageLimit) {
                 enabledTiers.add(tier.id);
-                if (!existingUnitName && usageLimit.unit) {
-                    existingUnitName = usageLimit.unit;
+                // Get unit name from first tier that has it
+                if (!existingUnitName && usageLimit.unitName) {
+                    existingUnitName = usageLimit.unitName;
+                }
+                // Get reset cycle from first tier that has it
+                if (usageLimit.resetCycle) {
+                    existingResetCycle = usageLimit.resetCycle;
                 }
             }
         });
@@ -519,7 +514,7 @@ export function TheMatrix({ document, dispatch }) {
         setMetricEnabledTiers(enabledTiers);
         setMetricOveragePrices(existingOveragePrices);
         setMetricUnitName(existingUnitName);
-        setMetricResetCycle("MONTHLY");
+        setMetricResetCycle(existingResetCycle);
     };
     const handleRemoveMetric = (serviceId, metric) => {
         setPendingRemoveMetric({ serviceId, metric });
@@ -527,13 +522,14 @@ export function TheMatrix({ document, dispatch }) {
     const confirmRemoveMetric = () => {
         if (!pendingRemoveMetric)
             return;
-        const { metric } = pendingRemoveMetric;
+        const { serviceId, metric } = pendingRemoveMetric;
+        // Remove this metric from all tiers
         tiers.forEach((tier) => {
-            const usageLimit = tier.usageLimits.find((ul) => ul.name === metric);
+            const usageLimit = tier.usageLimits.find((ul) => ul.serviceId === serviceId && ul.metric === metric);
             if (usageLimit) {
                 dispatch(removeUsageLimit({
                     tierId: tier.id,
-                    id: usageLimit.id,
+                    limitId: usageLimit.id,
                     lastModified: new Date().toISOString(),
                 }));
             }
@@ -573,40 +569,67 @@ export function TheMatrix({ document, dispatch }) {
     const handleSaveMetric = () => {
         if (!metricModal || !metricName.trim())
             return;
-        const { metric: originalMetric } = metricModal;
+        const { serviceId, metric: originalMetric } = metricModal;
         const now = new Date().toISOString();
         tiers.forEach((tier) => {
             const isEnabled = metricEnabledTiers.has(tier.id);
             const limitValue = metricLimits[tier.id];
             const existingLimit = originalMetric
-                ? tier.usageLimits.find((ul) => ul.name === originalMetric)
+                ? tier.usageLimits.find((ul) => ul.serviceId === serviceId && ul.metric === originalMetric)
+                : null;
+            // Check if value is numeric or string
+            const parsedLimit = limitValue ? parseInt(limitValue, 10) : null;
+            const isNumeric = parsedLimit !== null && !isNaN(parsedLimit);
+            // Parse paid limit
+            const paidLimitValue = metricPaidLimits[tier.id];
+            const parsedPaidLimit = paidLimitValue
+                ? parseInt(paidLimitValue, 10)
                 : null;
-            const parsedLimit = limitValue ? parseInt(limitValue, 10) : 0;
-            const isNumeric = !isNaN(parsedLimit);
+            const isPaidNumeric = parsedPaidLimit !== null && !isNaN(parsedPaidLimit);
+            // Get per-tier overage pricing
+            const tierOveragePrice = metricOveragePrices[tier.id];
+            const parsedOveragePrice = tierOveragePrice
+                ? parseFloat(tierOveragePrice)
+                : null;
+            const hasOveragePricing = parsedOveragePrice !== null && !isNaN(parsedOveragePrice);
             if (existingLimit && !isEnabled) {
+                // Remove limit - tier was disabled
                 dispatch(removeUsageLimit({
                     tierId: tier.id,
-                    id: existingLimit.id,
+                    limitId: existingLimit.id,
                     lastModified: now,
                 }));
             }
             else if (existingLimit && isEnabled) {
+                // Update existing limit - use limit for numeric values, notes for strings
                 dispatch(updateUsageLimit({
                     tierId: tier.id,
-                    id: existingLimit.id,
-                    name: metricName.trim(),
-                    limit: isNumeric ? parsedLimit : 0,
-                    unit: metricUnitName.trim() || undefined,
+                    limitId: existingLimit.id,
+                    metric: metricName.trim(),
+                    unitName: metricUnitName.trim() || undefined,
+                    freeLimit: isNumeric ? parsedLimit : null,
+                    paidLimit: isPaidNumeric ? parsedPaidLimit : null,
+                    notes: !isNumeric && limitValue ? limitValue.trim() : null,
+                    resetCycle: metricResetCycle,
+                    unitPrice: hasOveragePricing ? parsedOveragePrice : null,
+                    unitPriceCurrency: hasOveragePricing ? "USD" : undefined,
                     lastModified: now,
                 }));
             }
             else if (!existingLimit && isEnabled) {
+                // Add new limit - use limit for numeric values, notes for strings
                 dispatch(addUsageLimit({
                     tierId: tier.id,
-                    id: generateId(),
-                    name: metricName.trim(),
-                    limit: isNumeric ? parsedLimit : 0,
-                    unit: metricUnitName.trim() || undefined,
+                    limitId: generateId(),
+                    serviceId,
+                    metric: metricName.trim(),
+                    unitName: metricUnitName.trim() || undefined,
+                    freeLimit: isNumeric ? parsedLimit : null,
+                    paidLimit: isPaidNumeric ? parsedPaidLimit : null,
+                    notes: !isNumeric && limitValue ? limitValue.trim() : null,
+                    resetCycle: metricResetCycle,
+                    unitPrice: hasOveragePricing ? parsedOveragePrice : undefined,
+                    unitPriceCurrency: hasOveragePricing ? "USD" : undefined,
                     lastModified: now,
                 }));
             }
@@ -625,6 +648,12 @@ export function TheMatrix({ document, dispatch }) {
             return { label: "—", color: "#cbd5e1" };
         const level = serviceLevel.level;
         const config = SERVICE_LEVELS.find((l) => l.value === level);
+        if (level === "CUSTOM" && serviceLevel.customValue) {
+            return {
+                label: serviceLevel.customValue,
+                color: config?.color || "#d97706",
+            };
+        }
         return {
             label: config?.shortLabel || level,
             color: config?.color || "#475569",
@@ -715,9 +744,9 @@ export function TheMatrix({ document, dispatch }) {
                                                     costType: null,
                                                     currency: null,
                                                     price: null,
-                                                    pricingMode: "STANDALONE",
+                                                    pricingMode: null,
                                                     standalonePricing: null,
-                                                    tierDependentPricing: [],
+                                                    tierDependentPricing: null,
                                                     discountMode: null,
                                                 }, 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, selectedTierIdx: selectedTierIdx, onAddMetric: handleAddMetric, onEditMetric: handleEditMetric, onRemoveMetric: handleRemoveMetric, onEditService: openEditServiceModal, onReorderService: handleReorderService, activeBillingCycle: activeBillingCycle }, "ungrouped-setup")), (regularGroups.length > 0 ||
                                                 ungroupedRegularServices.length > 0) && (_jsx("tr", { children: _jsxs("td", { colSpan: tiers.length + 1, className: "bg-slate-50 py-3 px-4 text-xs font-semibold text-slate-700 border-b border-slate-200 flex items-center gap-2", children: [_jsx("span", { className: "flex items-center justify-center w-5 h-5 text-slate-500", children: _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", className: "w-full h-full", 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, onEditService: openEditServiceModal, onReorderService: handleReorderService, activeBillingCycle: activeBillingCycle, groupActiveCycle: groupBillingCycles[group.id], onGroupCycleChange: (cycle) => handleGroupCycleChange(group.id, cycle), groupBreakdown: tierBreakdowns[selectedTierIdx]?.optionGroupBreakdowns.find((b) => b.optionGroupId === group.id) }, group.id))), ungroupedRegularServices.length > 0 && (_jsx(ServiceGroupSection, { group: {
@@ -731,19 +760,23 @@ export function TheMatrix({ document, dispatch }) {
                                                     costType: null,
                                                     currency: null,
                                                     price: null,
-                                                    pricingMode: "STANDALONE",
+                                                    pricingMode: null,
                                                     standalonePricing: null,
-                                                    tierDependentPricing: [],
+                                                    tierDependentPricing: null,
                                                     discountMode: null,
                                                 }, 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, onEditService: openEditServiceModal, onReorderService: handleReorderService, activeBillingCycle: activeBillingCycle }, "ungrouped-regular")), _jsxs("tr", { className: "bg-slate-100 [&>td]:py-2.5 [&>td]:px-4 [&>td]:font-semibold [&>td]:text-slate-700 [&>td]:border-b [&>td]:border-slate-300 [&>td:first-child]:sticky [&>td:first-child]:left-0 [&>td:first-child]:z-10 [&>td:first-child]:bg-slate-100", children: [_jsx("td", { children: "SUBTOTAL" }), tiers.map((tier, idx) => {
                                                         if (tier.isCustomPricing) {
                                                             return (_jsx("td", { style: { textAlign: "center" }, children: "Custom" }, tier.id));
                                                         }
                                                         const groupSum = tierBreakdowns[idx].tierMonthlyBase;
-                                                        const tierPrice = tier.pricing?.amount ?? 0;
-                                                        const currency = tier.pricing?.currency || "USD";
-                                                        const isOver = tierPrice > 0 && groupSum > tierPrice;
-                                                        return (_jsx("td", { style: { textAlign: "center" }, children: _jsxs("div", { className: "flex flex-col items-center gap-0.5", children: [_jsx("span", { className: "font-semibold", children: formatPrice(tierPrice > 0 ? tierPrice : groupSum, currency) }), groupSum > 0 &&
+                                                        const tierPrice = tier.pricing.amount ?? 0;
+                                                        const isCalculated = tier.pricingMode === "CALCULATED";
+                                                        const currency = tier.pricing.currency || "USD";
+                                                        const isOver = !isCalculated && tierPrice > 0 && groupSum > tierPrice;
+                                                        return (_jsx("td", { style: { textAlign: "center" }, children: _jsxs("div", { className: "flex flex-col items-center gap-0.5", children: [_jsx("span", { className: "font-semibold", children: formatPrice(isCalculated ? groupSum : tierPrice, currency) }), isCalculated && (_jsx("span", { className: "inline-block ml-1 px-1 text-[0.5rem] font-semibold text-emerald-700 bg-emerald-100 rounded-md align-middle uppercase", title: "Calculated from service groups", style: {
+                                                                            fontFamily: "'DM Mono', 'SF Mono', monospace",
+                                                                        }, children: "calc" })), !isCalculated &&
+                                                                        groupSum > 0 &&
                                                                         tierPrice > 0 &&
                                                                         groupSum !== tierPrice && (_jsx("span", { className: `text-[0.5625rem] py-px px-1.5 rounded-md ${isOver ? "text-rose-700 bg-rose-100 font-semibold" : "text-slate-500 bg-slate-100"}`, style: {
                                                                             fontFamily: "'DM Mono', 'SF Mono', monospace",
@@ -776,11 +809,69 @@ export function TheMatrix({ document, dispatch }) {
                                                             }, children: idx === selectedTierIdx ? (tier.isCustomPricing ? ("Custom") : (_jsxs(_Fragment, { children: [formatPrice(discountedTotal, breakdown.tierCurrency), savingsPct > 0 && (_jsxs("span", { className: "inline-block ml-1.5 py-px px-1.5 text-[0.5625rem] font-semibold text-emerald-700 bg-emerald-100 rounded-md align-middle", style: {
                                                                             fontFamily: "'DM Mono', 'SF Mono', monospace",
                                                                         }, children: ["SAVE ", savingsPct, "%"] }))] }))) : null }, tier.id));
-                                                    })] })) : (tierBreakdowns[selectedTierIdx]?.optionGroupBreakdowns.map((ogb) => {
-                                                const ogGroup = optionGroups.find((g) => g.id === ogb.optionGroupId);
-                                                return (_jsxs("tr", { className: "bg-violet-100 [&>td]:py-3.5 [&>td]:px-4 [&>td]:font-bold [&>td]:text-violet-900 [&>td]:border-t-2 [&>td]:border-violet-300 [&>td:first-child]:sticky [&>td:first-child]:left-0 [&>td:first-child]:z-10 [&>td:first-child]:bg-violet-100", children: [_jsxs("td", { children: [ogGroup?.name || ogb.optionGroupId, _jsxs("span", { className: "font-normal text-[0.6875rem] text-slate-400 ml-1", children: ["/", BILLING_CYCLE_SHORT_LABELS[activeBillingCycle].toLowerCase()] })] }), tiers.map((tier, idx) => (_jsx("td", { className: idx === selectedTierIdx
-                                                                ? "text-white relative"
-                                                                : "", style: {
+                                                    })] })) : (
+                                            /* Custom billing mode: itemized per-group rows from breakdown */
+                                            tierBreakdowns[selectedTierIdx]?.optionGroupBreakdowns.map((ogb) => (_jsxs("tr", { className: "bg-violet-100 [&>td]:py-3.5 [&>td]:px-4 [&>td]:font-bold [&>td]:text-violet-900 [&>td]:border-t-2 [&>td]:border-violet-300 [&>td:first-child]:sticky [&>td:first-child]:left-0 [&>td:first-child]:z-10 [&>td:first-child]:bg-violet-100", children: [_jsxs("td", { children: [ogb.optionGroupName, _jsxs("span", { className: "font-normal text-[0.6875rem] text-slate-400 ml-1", children: ["/", BILLING_CYCLE_SHORT_LABELS[ogb.effectiveBillingCycle].toLowerCase()] })] }), tiers.map((tier, idx) => (_jsx("td", { className: idx === selectedTierIdx
+                                                            ? "text-white relative"
+                                                            : "", style: {
+                                                            textAlign: "center",
+                                                            ...(idx === selectedTierIdx
+                                                                ? {
+                                                                    background: "linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%)",
+                                                                    boxShadow: "inset 0 1px 0 rgba(255, 255, 255, 0.15)",
+                                                                }
+                                                                : {}),
+                                                        }, children: idx === selectedTierIdx ? (tier.isCustomPricing ? ("Custom") : ogb.monthlyBase > 0 ? (_jsxs(_Fragment, { children: [formatPrice(ogb.recurringAmount, ogb.currency), ogb.discount &&
+                                                                    ogb.discount.discountValue > 0 && (_jsxs("span", { className: "inline-block ml-1.5 py-px px-1.5 text-[0.5625rem] font-semibold text-emerald-700 bg-emerald-100 rounded-md align-middle", style: {
+                                                                        fontFamily: "'DM Mono', 'SF Mono', monospace",
+                                                                    }, children: ["SAVE", " ", Math.round(ogb.discount.discountType ===
+                                                                            "PERCENTAGE"
+                                                                            ? ogb.discount.discountValue
+                                                                            : ogb.cycleAmount > 0
+                                                                                ? ((ogb.cycleAmount -
+                                                                                    ogb.recurringAmount) /
+                                                                                    ogb.cycleAmount) *
+                                                                                    100
+                                                                                : 0), "%"] }))] })) : ("—")) : null }, tier.id)))] }, `group-${ogb.optionGroupId}`)))), tierBreakdowns[selectedTierIdx]?.addOnBreakdowns
+                                                .filter((ab) => ab.monthlyBase > 0)
+                                                .map((ab) => (_jsxs("tr", { className: "bg-violet-50 [&>td]:border-t [&>td]:border-dashed [&>td]:border-violet-200 [&>td]:font-semibold [&>td]:text-[0.8125rem] [&>td]:text-violet-700 [&>td]:py-2 [&>td]:px-4 [&>td:first-child]:bg-violet-50", children: [_jsxs("td", { children: ["+ ", ab.optionGroupName, _jsxs("span", { className: "font-normal text-[0.6875rem] text-slate-400 ml-1", children: ["/", BILLING_CYCLE_SHORT_LABELS[ab.selectedBillingCycle].toLowerCase()] })] }), tiers.map((tier, idx) => (_jsx("td", { className: idx === selectedTierIdx ? "text-white relative" : "", style: {
+                                                            textAlign: "center",
+                                                            ...(idx === selectedTierIdx
+                                                                ? {
+                                                                    background: "linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%)",
+                                                                    boxShadow: "inset 0 1px 0 rgba(255, 255, 255, 0.15)",
+                                                                }
+                                                                : {}),
+                                                        }, children: idx === selectedTierIdx ? (_jsxs(_Fragment, { children: ["+", formatPrice(ab.recurringAmount, ab.currency), ab.discount && ab.discount.discountValue > 0 && (_jsxs("span", { className: "inline-block ml-1.5 py-px px-1.5 text-[0.5625rem] font-semibold text-emerald-700 bg-emerald-100 rounded-md align-middle", style: {
+                                                                        fontFamily: "'DM Mono', 'SF Mono', monospace",
+                                                                    }, children: ["SAVE", " ", Math.round(ab.discount.discountType === "PERCENTAGE"
+                                                                            ? ab.discount.discountValue
+                                                                            : ab.cycleAmount > 0
+                                                                                ? ((ab.cycleAmount -
+                                                                                    ab.recurringAmount) /
+                                                                                    ab.cycleAmount) *
+                                                                                    100
+                                                                                : 0), "%"] }))] })) : null }, tier.id)))] }, `addon-recurring-${ab.optionGroupId}`))), tierBreakdowns[selectedTierIdx]?.addOnBreakdowns
+                                                .filter((ab) => ab.setupCost !== null && ab.setupCost > 0)
+                                                .map((ab) => (_jsxs("tr", { className: "bg-violet-50 [&>td]:border-t [&>td]:border-dashed [&>td]:border-violet-200 [&>td]:font-semibold [&>td]:text-[0.8125rem] [&>td]:text-violet-700 [&>td]:py-2 [&>td]:px-4 [&>td:first-child]:bg-violet-50", children: [_jsxs("td", { children: ["+ ", ab.optionGroupName, " ", _jsx("span", { className: "font-normal text-[0.6875rem] text-slate-400 ml-1", children: "(one-time setup)" })] }), tiers.map((tier, idx) => (_jsx("td", { className: idx === selectedTierIdx ? "text-white relative" : "", style: {
+                                                            textAlign: "center",
+                                                            ...(idx === selectedTierIdx
+                                                                ? {
+                                                                    background: "linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%)",
+                                                                    boxShadow: "inset 0 1px 0 rgba(255, 255, 255, 0.15)",
+                                                                }
+                                                                : {}),
+                                                        }, children: idx === selectedTierIdx
+                                                            ? `${formatPrice(ab.setupCost, ab.setupCostCurrency || "USD")} one-time`
+                                                            : null }, tier.id)))] }, `addon-setup-${ab.optionGroupId}`))), (() => {
+                                                const setupBds = tierBreakdowns[selectedTierIdx]?.setupGroupBreakdowns ?? [];
+                                                const totalSetupBase = setupBds.reduce((sum, s) => sum +
+                                                    (s.setupCostDiscount?.originalAmount ?? s.setupCost ?? 0), 0);
+                                                const totalSetupEffective = setupBds.reduce((sum, s) => sum + (s.setupCost ?? 0), 0);
+                                                if (totalSetupBase === 0)
+                                                    return null;
+                                                const hasDiscount = totalSetupEffective !== totalSetupBase;
+                                                return (_jsxs("tr", { className: "bg-violet-50 [&>td]:border-t [&>td]:border-dashed [&>td]:border-violet-200 [&>td]:font-semibold [&>td]:text-[0.8125rem] [&>td]:text-violet-700 [&>td]:py-2 [&>td]:px-4 [&>td:first-child]:bg-violet-50", children: [_jsx("td", { children: "+ Setup & Formation Fees" }), tiers.map((tier, idx) => (_jsx("td", { className: idx === selectedTierIdx ? "text-white relative" : "", style: {
                                                                 textAlign: "center",
                                                                 ...(idx === selectedTierIdx
                                                                     ? {
@@ -789,23 +880,11 @@ export function TheMatrix({ document, dispatch }) {
                                                                     }
                                                                     : {}),
                                                             }, children: idx === selectedTierIdx
-                                                                ? tier.isCustomPricing
-                                                                    ? "Custom"
-                                                                    : ogb.cycleAmount > 0
-                                                                        ? formatPrice(ogb.cycleAmount)
-                                                                        : "—"
-                                                                : null }, tier.id)))] }, `group-${ogb.optionGroupId}`));
-                                            })), tierBreakdowns[selectedTierIdx]?.addOnBreakdowns
-                                                .filter((ab) => ab.cycleAmount > 0)
-                                                .map((ab, abIdx) => (_jsxs("tr", { className: "bg-violet-50 [&>td]:border-t [&>td]:border-dashed [&>td]:border-violet-200 [&>td]:font-semibold [&>td]:text-[0.8125rem] [&>td]:text-violet-700 [&>td]:py-2 [&>td]:px-4 [&>td:first-child]:bg-violet-50", children: [_jsx("td", { children: "+ Add-on" }), tiers.map((tier, idx) => (_jsx("td", { className: idx === selectedTierIdx ? "text-white relative" : "", style: {
-                                                            textAlign: "center",
-                                                            ...(idx === selectedTierIdx
-                                                                ? {
-                                                                    background: "linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%)",
-                                                                    boxShadow: "inset 0 1px 0 rgba(255, 255, 255, 0.15)",
-                                                                }
-                                                                : {}),
-                                                        }, children: idx === selectedTierIdx ? (_jsxs(_Fragment, { children: ["+", formatPrice(ab.cycleAmount)] })) : null }, tier.id)))] }, `addon-recurring-${abIdx}`)))] }) }) })] }), selectedCell && (_jsx(ServiceLevelDetailPanel, { serviceId: selectedCell.serviceId, tierId: selectedCell.tierId, services: services, tiers: tiers, optionGroups: optionGroups, dispatch: dispatch, onClose: () => setSelectedCell(null) })), addServiceModal && (_jsx("div", { className: "fixed inset-0 bg-slate-900/75 backdrop-blur-sm flex items-center justify-center z-[100]", style: { animation: "modal-backdrop 0.2s ease-out" }, children: _jsxs("div", { className: "bg-white rounded-xl p-6 max-h-[85vh] overflow-y-auto", style: {
+                                                                ? hasDiscount
+                                                                    ? `${formatPrice(totalSetupEffective, "USD")} one-time`
+                                                                    : `${formatPrice(totalSetupBase, "USD")} one-time`
+                                                                : null }, tier.id)))] }));
+                                            })()] }) }) })] }), selectedCell && (_jsx(ServiceLevelDetailPanel, { serviceId: selectedCell.serviceId, tierId: selectedCell.tierId, services: services, tiers: tiers, optionGroups: optionGroups, dispatch: dispatch, onClose: () => setSelectedCell(null) })), addServiceModal && (_jsx("div", { className: "fixed inset-0 bg-slate-900/75 backdrop-blur-sm flex items-center justify-center z-[100]", style: { animation: "modal-backdrop 0.2s ease-out" }, children: _jsxs("div", { className: "bg-white rounded-xl p-6 max-h-[85vh] overflow-y-auto", style: {
                                 width: "min(32rem, calc(100vw - 2rem))",
                                 maxWidth: "32rem",
                                 boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.08)",
@@ -821,7 +900,7 @@ export function TheMatrix({ document, dispatch }) {
                                                                     newSet.delete(tier.id);
                                                                 }
                                                                 setNewServiceSelectedTiers(newSet);
-                                                            }, className: "relative w-5 h-5 shrink-0 appearance-none bg-white border-2 border-slate-400 rounded-md cursor-pointer transition-all duration-150 checked:bg-violet-600 checked:border-violet-600" }), _jsx("span", { className: "flex-1 text-sm font-semibold text-slate-800 min-w-0 overflow-hidden text-ellipsis whitespace-nowrap", children: tier.name }), tier.pricing?.amount != null && (_jsxs("span", { className: "text-xs font-semibold text-slate-500 whitespace-nowrap shrink-0", children: ["$", tier.pricing.amount, "/mo"] }))] }, tier.id));
+                                                            }, className: "relative w-5 h-5 shrink-0 appearance-none bg-white border-2 border-slate-400 rounded-md cursor-pointer transition-all duration-150 checked:bg-violet-600 checked:border-violet-600" }), _jsx("span", { className: "flex-1 text-sm font-semibold text-slate-800 min-w-0 overflow-hidden text-ellipsis whitespace-nowrap", children: tier.name }), tier.pricing.amount !== null && (_jsxs("span", { className: "text-xs font-semibold text-slate-500 whitespace-nowrap shrink-0", children: ["$", tier.pricing.amount, "/mo"] }))] }, tier.id));
                                             }) }), newServiceSelectedTiers.size === 0 && (_jsx("p", { className: "text-[0.8125rem] text-slate-500 mt-3 italic", children: "Select at least one tier to include this service" }))] })), _jsxs("p", { className: "text-[0.8125rem] text-slate-600 mb-5 leading-6", children: ["This service will be added to", " ", _jsx("strong", { children: addServiceModal.groupId !== UNGROUPED_ID
                                                 ? optionGroups.find((g) => g.id === addServiceModal.groupId)
                                                     ?.name || "Unknown Group"
@@ -848,7 +927,7 @@ export function TheMatrix({ document, dispatch }) {
                                                                     newSet.delete(tier.id);
                                                                 }
                                                                 setEditServiceSelectedTiers(newSet);
-                                                            }, className: "relative w-5 h-5 shrink-0 appearance-none bg-white border-2 border-slate-400 rounded-md cursor-pointer transition-all duration-150 checked:bg-violet-600 checked:border-violet-600" }), _jsx("span", { className: "flex-1 text-sm font-semibold text-slate-800 min-w-0 overflow-hidden text-ellipsis whitespace-nowrap", children: tier.name }), tier.pricing?.amount != null && (_jsxs("span", { className: "text-xs font-semibold text-slate-500 whitespace-nowrap shrink-0", children: ["$", tier.pricing.amount, "/mo"] }))] }, tier.id));
+                                                            }, className: "relative w-5 h-5 shrink-0 appearance-none bg-white border-2 border-slate-400 rounded-md cursor-pointer transition-all duration-150 checked:bg-violet-600 checked:border-violet-600" }), _jsx("span", { className: "flex-1 text-sm font-semibold text-slate-800 min-w-0 overflow-hidden text-ellipsis whitespace-nowrap", children: tier.name }), tier.pricing.amount !== null && (_jsxs("span", { className: "text-xs font-semibold text-slate-500 whitespace-nowrap shrink-0", children: ["$", tier.pricing.amount, "/mo"] }))] }, tier.id));
                                             }) })] })), _jsxs("div", { className: "flex gap-3 justify-end pt-2", children: [_jsx("button", { onClick: () => {
                                                 setEditServiceModal(null);
                                                 setEditServiceName("");
@@ -995,16 +1074,22 @@ function ServiceGroupSection({ group, services, tiers, isSetupFormation, isOptio
                                     (() => {
                                         if (!groupBreakdown)
                                             return null;
-                                        const { cycleAmount } = groupBreakdown;
-                                        if (cycleAmount <= 0)
+                                        const { monthlyBase, recurringAmount, discount, currency } = groupBreakdown;
+                                        if (monthlyBase <= 0 && !group.standalonePricing?.setupCost)
                                             return null;
+                                        const setupCost = group.standalonePricing?.setupCost;
                                         const months = BILLING_CYCLE_MONTHS[effectiveBillingCycle];
                                         const monthlyEq = months > 0
-                                            ? Math.round((cycleAmount / months) * 100) / 100
-                                            : cycleAmount;
-                                        return (_jsxs("div", { className: "flex items-center gap-3 ml-auto", children: [_jsxs("span", { className: "text-sm font-bold text-slate-800 whitespace-nowrap", children: [formatPrice(effectiveBillingCycle === "MONTHLY"
-                                                            ? cycleAmount
-                                                            : monthlyEq), "/mo"] }), effectiveBillingCycle !== "MONTHLY" && (_jsxs("span", { className: "text-[0.6875rem] font-medium text-slate-500 whitespace-nowrap", children: ["Billed ", formatPrice(cycleAmount), " ", BILLING_CYCLE_LABELS[effectiveBillingCycle]] }))] }));
+                                            ? Math.round((recurringAmount / months) * 100) / 100
+                                            : recurringAmount;
+                                        const savingsPct = discount && discount.originalAmount > 0
+                                            ? Math.round(((discount.originalAmount - discount.discountedAmount) /
+                                                discount.originalAmount) *
+                                                100)
+                                            : 0;
+                                        return (_jsxs("div", { className: "flex items-center gap-3 ml-auto", children: [monthlyBase > 0 && (_jsxs("span", { className: "text-sm font-bold text-slate-800 whitespace-nowrap", children: [formatPrice(effectiveBillingCycle === "MONTHLY"
+                                                            ? monthlyBase
+                                                            : monthlyEq, currency), "/mo"] })), effectiveBillingCycle !== "MONTHLY" && monthlyBase > 0 && (_jsxs("span", { className: "text-[0.6875rem] font-medium text-slate-500 whitespace-nowrap", children: ["Billed ", formatPrice(recurringAmount, currency), " ", BILLING_CYCLE_LABELS[effectiveBillingCycle]] })), savingsPct > 0 && (_jsxs("span", { className: "text-[0.6875rem] font-semibold text-emerald-600 whitespace-nowrap", children: ["SAVE ", Math.round(savingsPct), "%"] })), setupCost && setupCost.amount > 0 && (_jsxs("span", { className: "text-[0.6875rem] font-medium text-slate-500 whitespace-nowrap", children: ["+", " ", formatPrice(setupCost.amount, setupCost.currency || "USD"), " ", "Setup"] }))] }));
                                     })()] }) }), _jsx("td", { colSpan: tiers.length, className: headerClass, style: { textAlign: "center" }, children: _jsx("span", { className: `inline-block py-1 px-2.5 rounded-md text-[0.625rem] font-semibold uppercase tracking-[0.04em] ${isSetupFormation || !isOptional
                                 ? "bg-emerald-100 text-emerald-700"
                                 : "bg-sky-200 text-sky-700"}`, children: isSetupFormation
@@ -1021,20 +1106,53 @@ function ServiceGroupSection({ group, services, tiers, isSetupFormation, isOptio
                         return (_jsxs("tr", { className: "bg-slate-50 [&>td]:py-2.5 [&>td]:px-4 [&>td]:font-semibold [&>td]:text-slate-700 [&>td]:border-b [&>td]:border-slate-200 [&>td:first-child]:sticky [&>td:first-child]:left-0 [&>td:first-child]:z-10 [&>td:first-child]:bg-slate-50", children: [_jsx("td", { children: "TOTAL SETUP FEE" }), _jsx("td", { colSpan: tiers.length, style: { textAlign: "center" }, children: "No setup fee configured" })] }));
                     }
                     const selectedTier = tiers[selectedTierIdx] ?? null;
+                    const tierPricing = selectedTier
+                        ? group.tierDependentPricing?.find((tp) => tp.tierId === selectedTier.id)
+                        : null;
+                    const cycleDiscount = tierPricing?.setupCostDiscounts?.find((d) => d.billingCycle === activeBillingCycle);
+                    const genericDiscount = tierPricing?.setupCost?.discount;
+                    const discount = cycleDiscount?.discountRule ?? genericDiscount;
+                    let effectivePrice = basePrice;
+                    if (discount && discount.discountValue > 0) {
+                        if (discount.discountType === "PERCENTAGE") {
+                            effectivePrice = basePrice * (1 - discount.discountValue / 100);
+                        }
+                        else {
+                            effectivePrice = Math.max(0, basePrice - discount.discountValue);
+                        }
+                        effectivePrice = Math.round(effectivePrice * 100) / 100;
+                    }
                     const curr = group.currency || "USD";
-                    return (_jsxs("tr", { className: "bg-slate-50 [&>td]:py-2.5 [&>td]:px-4 [&>td]:font-semibold [&>td]:text-slate-700 [&>td]:border-b [&>td]:border-slate-200 [&>td:first-child]:sticky [&>td:first-child]:left-0 [&>td:first-child]:z-10 [&>td:first-child]:bg-slate-50", children: [_jsx("td", { children: "TOTAL SETUP FEE" }), _jsxs("td", { colSpan: tiers.length, style: { textAlign: "center" }, children: [formatPrice(basePrice, curr), " flat fee"] })] }));
+                    const hasDiscount = effectivePrice !== basePrice;
+                    return (_jsxs("tr", { className: "bg-slate-50 [&>td]:py-2.5 [&>td]:px-4 [&>td]:font-semibold [&>td]:text-slate-700 [&>td]:border-b [&>td]:border-slate-200 [&>td:first-child]:sticky [&>td:first-child]:left-0 [&>td:first-child]:z-10 [&>td:first-child]:bg-slate-50", children: [_jsx("td", { children: "TOTAL SETUP FEE" }), _jsx("td", { colSpan: tiers.length, style: { textAlign: "center" }, children: hasDiscount ? (_jsxs(_Fragment, { children: [_jsx("span", { style: {
+                                                textDecoration: "line-through",
+                                                opacity: 0.5,
+                                                marginRight: 6,
+                                            }, children: formatPrice(basePrice, curr) }), formatPrice(effectivePrice, curr), " flat fee", discount?.discountType === "PERCENTAGE"
+                                            ? ` (${discount.discountValue}% off)`
+                                            : ` (${formatPrice(discount?.discountValue ?? 0, curr)} off)`] })) : (`${formatPrice(basePrice, curr)} flat fee (applied to all ${tiers.some((t) => {
+                                    const tp = group.tierDependentPricing?.find((p) => p.tierId === t.id);
+                                    const monthlyAmt = tp?.recurringPricing?.find((r) => r.billingCycle === "MONTHLY")?.amount;
+                                    return !monthlyAmt || monthlyAmt === 0;
+                                })
+                                    ? "priced "
+                                    : ""}tiers)`) })] }));
                 })(), isOptional &&
                 (() => {
-                    const cycleAmount = isEnabled
-                        ? (groupBreakdown?.cycleAmount ?? 0)
+                    const baseMonthly = isEnabled
+                        ? (groupBreakdown?.monthlyBase ?? 0)
+                        : 0;
+                    const adjustedTotal = isEnabled
+                        ? (groupBreakdown?.recurringAmount ?? 0)
+                        : 0;
+                    const setupCost = isEnabled
+                        ? (group.standalonePricing?.setupCost?.amount ?? 0)
                         : 0;
                     const billingLabel = `/${BILLING_CYCLE_SHORT_LABELS[effectiveBillingCycle].toLowerCase()}`;
-                    const currency = group.currency || "USD";
-                    return (_jsxs("tr", { className: `[&>td]:py-2.5 [&>td]:px-4 [&>td]:font-semibold [&>td]:text-slate-700 [&>td]:border-b [&>td]:border-slate-300 [&>td:first-child]:sticky [&>td:first-child]:left-0 [&>td:first-child]:z-10 ${headerClass}`, children: [_jsx("td", { className: headerClass, children: "SUBTOTAL" }), _jsx("td", { colSpan: tiers.length, style: { textAlign: "center" }, children: isEnabled && cycleAmount > 0
-                                    ? `+${formatPrice(cycleAmount, currency)}${billingLabel}`
-                                    : isEnabled
-                                        ? "Included"
-                                        : "—" })] }));
+                    const currency = groupBreakdown?.currency || group.currency || "USD";
+                    return (_jsxs("tr", { className: `[&>td]:py-2.5 [&>td]:px-4 [&>td]:font-semibold [&>td]:text-slate-700 [&>td]:border-b [&>td]:border-slate-300 [&>td:first-child]:sticky [&>td:first-child]:left-0 [&>td:first-child]:z-10 ${headerClass}`, children: [_jsx("td", { className: headerClass, children: "SUBTOTAL" }), _jsx("td", { colSpan: tiers.length, style: { textAlign: "center" }, children: isEnabled && (baseMonthly > 0 || setupCost > 0) ? (_jsxs(_Fragment, { children: [baseMonthly > 0 &&
+                                            `+${formatPrice(adjustedTotal, currency)}${billingLabel}`, baseMonthly > 0 && setupCost > 0 && " + ", setupCost > 0 &&
+                                            `${formatPrice(setupCost, currency)} setup`] })) : isEnabled ? ("Included") : ("—") })] }));
                 })()] }));
 }
 function ServiceRowWithMetrics({ service, metrics, tiers, rowClass, getServiceLevelForTier, getUsageLimitForMetric, getLevelDisplay, selectedCell, setSelectedCell, selectedTierIdx, onAddMetric, onEditMetric, onRemoveMetric, onEditService, onReorderService, groupServices, serviceIndex, }) {
@@ -1095,7 +1213,10 @@ function ServiceRowWithMetrics({ service, metrics, tiers, rowClass, getServiceLe
                                 ? {
                                     background: "linear-gradient(180deg, rgba(139, 92, 246, 0.06) 0%, rgba(139, 92, 246, 0.12) 100%)",
                                 }
-                                : undefined, children: _jsx("div", { className: "inline-flex flex-col border border-slate-200 rounded-[10px] overflow-hidden min-w-[10rem]", children: usageLimit ? (_jsxs("div", { className: "flex justify-between items-center py-1.5 px-3 gap-4", children: [_jsx("span", { className: "text-[0.6875rem] text-slate-500 whitespace-nowrap", children: "Limit" }), _jsx("span", { className: "text-xs text-slate-700 text-right whitespace-nowrap", children: _jsxs("strong", { children: [usageLimit.limit, usageLimit.unit ? ` ${usageLimit.unit}` : ""] }) })] })) : (_jsx("span", { className: "text-xs text-slate-300", children: "\u2014" })) }) }, tier.id));
+                                : undefined, children: _jsx("div", { className: "inline-flex flex-col border border-slate-200 rounded-[10px] overflow-hidden min-w-[10rem]", children: usageLimit ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex justify-between items-center py-1.5 px-3 gap-4", children: [_jsx("span", { className: "text-[0.6875rem] text-slate-500 whitespace-nowrap", children: "Included" }), _jsx("span", { className: "text-xs text-slate-700 text-right whitespace-nowrap", children: usageLimit.freeLimit != null ? (_jsxs(_Fragment, { children: [_jsxs("strong", { children: [usageLimit.freeLimit, usageLimit.unitName
+                                                                        ? ` ${usageLimit.unitName}`
+                                                                        : ""] }), usageLimit.resetCycle &&
+                                                                usageLimit.resetCycle !== "NONE" && (_jsxs("span", { className: "text-[0.625rem] font-normal text-slate-400", children: [" ", "/ ", usageLimit.resetCycle.toLowerCase()] }))] })) : (_jsx("strong", { children: usageLimit.notes || "Unlimited" })) })] }), usageLimit.unitPrice != null && (_jsxs("div", { className: "flex justify-between items-center py-1.5 px-3 gap-4 border-t border-slate-100", children: [_jsx("span", { className: "text-[0.6875rem] text-slate-500 whitespace-nowrap", children: "Overage" }), _jsxs("span", { className: "text-xs text-emerald-600 font-medium text-right whitespace-nowrap", children: [formatPrice(usageLimit.unitPrice, usageLimit.unitPriceCurrency || "USD"), _jsxs("span", { className: "text-[0.625rem] font-normal text-slate-400", children: [" ", "/ extra"] })] })] }))] })) : (_jsx("span", { className: "text-xs text-slate-300", children: "\u2014" })) }) }, tier.id));
                     })] }, `${service.id}-${metric}`)))] }));
 }
 function ServiceLevelDetailPanel({ serviceId, tierId, services, tiers, optionGroups: _optionGroups, dispatch, onClose, }) {
@@ -1161,21 +1282,28 @@ function ServiceLevelDetailPanel({ serviceId, tierId, services, tiers, optionGro
     const serviceLevel = service
         ? tier?.serviceLevels.find((sl) => sl.serviceId === serviceId)
         : undefined;
-    const usageLimits = service ? tier?.usageLimits || [] : [];
+    const usageLimits = service
+        ? tier?.usageLimits.filter((ul) => ul.serviceId === serviceId) || []
+        : [];
     const [isAddingMetric, setIsAddingMetric] = useState(false);
     const [newMetric, setNewMetric] = useState("");
     const [newLimit, setNewLimit] = useState("");
+    const [customValue, setCustomValue] = useState(serviceLevel?.customValue || "");
     if (!service || !tier)
         return null;
     const handleAddLimit = () => {
         if (!newMetric.trim())
             return;
-        const parsedLimit = newLimit ? parseInt(newLimit, 10) : NaN;
+        const parsedLimit = newLimit ? parseInt(newLimit, 10) : null;
+        const isNumeric = parsedLimit !== null && !isNaN(parsedLimit);
         dispatch(addUsageLimit({
             tierId: tier.id,
-            id: generateId(),
-            name: newMetric.trim(),
-            limit: !isNaN(parsedLimit) ? parsedLimit : 0,
+            limitId: generateId(),
+            serviceId: service.id,
+            metric: newMetric.trim(),
+            freeLimit: isNumeric ? parsedLimit : undefined,
+            notes: !isNumeric && newLimit ? newLimit.trim() : undefined,
+            resetCycle: "MONTHLY",
             lastModified: new Date().toISOString(),
         }));
         setNewMetric("");
@@ -1185,7 +1313,7 @@ function ServiceLevelDetailPanel({ serviceId, tierId, services, tiers, optionGro
     const handleRemoveLimit = (limitId) => {
         dispatch(removeUsageLimit({
             tierId: tier.id,
-            id: limitId,
+            limitId,
             lastModified: new Date().toISOString(),
         }));
     };
@@ -1200,29 +1328,56 @@ function ServiceLevelDetailPanel({ serviceId, tierId, services, tiers, optionGro
 }
 function MetricLimitItem({ limit, tierId, dispatch, onRemove, }) {
     const [isEditing, setIsEditing] = useState(false);
-    const [editMetric, setEditMetric] = useState(limit.name);
-    const [editUnit, setEditUnit] = useState(limit.unit || "");
-    const [editLimit, setEditLimit] = useState(limit.limit?.toString() || "");
+    const [editMetric, setEditMetric] = useState(limit.metric);
+    const [editUnitName, setEditUnitName] = useState(limit.unitName || "");
+    const [editLimit, setEditLimit] = useState(limit.freeLimit?.toString() || limit.notes || "");
+    const [editPaidLimit, setEditPaidLimit] = useState(limit.paidLimit?.toString() || "");
+    const [editResetCycle, setEditResetCycle] = useState(limit.resetCycle || "MONTHLY");
+    // Overage pricing state
+    const [editUnitPrice, setEditUnitPrice] = useState(limit.unitPrice?.toString() || "");
+    const [editUnitPriceCurrency] = useState(limit.unitPriceCurrency || "USD");
     const handleSave = () => {
         const parsedLimit = editLimit ? parseInt(editLimit, 10) : null;
+        const isNumeric = parsedLimit !== null && !isNaN(parsedLimit);
+        const parsedPaidLimit = editPaidLimit ? parseInt(editPaidLimit, 10) : null;
+        const isPaidNumeric = parsedPaidLimit !== null && !isNaN(parsedPaidLimit);
+        const parsedUnitPrice = editUnitPrice ? parseFloat(editUnitPrice) : null;
         dispatch(updateUsageLimit({
             tierId,
-            id: limit.id,
-            name: editMetric.trim() || limit.name,
-            unit: editUnit.trim() || undefined,
-            limit: parsedLimit !== null && !isNaN(parsedLimit) ? parsedLimit : undefined,
+            limitId: limit.id,
+            metric: editMetric.trim() || limit.metric,
+            unitName: editUnitName.trim() || undefined,
+            freeLimit: isNumeric ? parsedLimit : undefined,
+            paidLimit: isPaidNumeric ? parsedPaidLimit : undefined,
+            notes: !isNumeric && editLimit ? editLimit.trim() : undefined,
+            resetCycle: editResetCycle,
+            unitPrice: parsedUnitPrice,
+            unitPriceCurrency: parsedUnitPrice ? editUnitPriceCurrency : undefined,
             lastModified: new Date().toISOString(),
         }));
         setIsEditing(false);
     };
     const handleCancel = () => {
-        setEditMetric(limit.name);
-        setEditUnit(limit.unit || "");
-        setEditLimit(limit.limit?.toString() || "");
+        setEditMetric(limit.metric);
+        setEditUnitName(limit.unitName || "");
+        setEditLimit(limit.freeLimit?.toString() || limit.notes || "");
+        setEditPaidLimit(limit.paidLimit?.toString() || "");
+        setEditResetCycle(limit.resetCycle || "MONTHLY");
+        setEditUnitPrice(limit.unitPrice?.toString() || "");
         setIsEditing(false);
     };
+    // Format overage display string
+    const getOverageDisplay = () => {
+        if (!limit.unitPrice)
+            return null;
+        const unitLabel = limit.unitName || "unit";
+        return `+${formatPrice(limit.unitPrice, limit.unitPriceCurrency || "USD")} per ${unitLabel}`;
+    };
+    const overageDisplay = getOverageDisplay();
     if (isEditing) {
-        return (_jsxs("div", { className: "p-3 bg-violet-50 rounded-[10px] mb-3 [&>div]:mb-2.5 [&>div:last-child]:mb-0", children: [_jsxs("div", { children: [_jsx("label", { className: "block text-[0.625rem] font-semibold uppercase tracking-[0.08em] text-slate-500 mb-1", style: { fontFamily: "'DM Mono', 'SF Mono', monospace" }, children: "Metric Name" }), _jsx("input", { type: "text", value: editMetric, onChange: (e) => setEditMetric(e.target.value), placeholder: "e.g., Number of Entities", className: "w-full text-[0.8125rem] text-slate-900 bg-white border-[1.5px] border-slate-300 rounded-[10px] py-2.5 px-3.5 outline-none transition-all duration-150 focus:border-violet-500 focus:shadow-[0_0_0_3px_rgba(139,92,246,0.15)]", style: { fontFamily: "'DM Sans', system-ui, sans-serif" }, autoFocus: true })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-[0.625rem] font-semibold uppercase tracking-[0.08em] text-slate-500 mb-1", style: { fontFamily: "'DM Mono', 'SF Mono', monospace" }, children: "Unit" }), _jsx("input", { type: "text", value: editUnit, onChange: (e) => setEditUnit(e.target.value), placeholder: "e.g., entity, credit card, contractor", className: "w-full text-[0.8125rem] text-slate-900 bg-white border-[1.5px] border-slate-300 rounded-[10px] py-2.5 px-3.5 outline-none transition-all duration-150 focus:border-violet-500 focus:shadow-[0_0_0_3px_rgba(139,92,246,0.15)]", style: { fontFamily: "'DM Sans', system-ui, sans-serif" } })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-[0.625rem] font-semibold uppercase tracking-[0.08em] text-slate-500 mb-1", style: { fontFamily: "'DM Mono', 'SF Mono', monospace" }, children: "Limit" }), _jsx("input", { type: "text", value: editLimit, onChange: (e) => setEditLimit(e.target.value), placeholder: "e.g., 100", className: "w-full text-[0.8125rem] text-slate-900 bg-white border-[1.5px] border-slate-300 rounded-[10px] py-2.5 px-3.5 outline-none transition-all duration-150 focus:border-violet-500 focus:shadow-[0_0_0_3px_rgba(139,92,246,0.15)]", style: { fontFamily: "'DM Sans', system-ui, sans-serif" } })] }), _jsxs("div", { className: "flex gap-2", children: [_jsx("button", { onClick: handleSave, className: "flex-1 py-2 px-3 text-[0.8125rem] font-semibold rounded-[10px] cursor-pointer transition-all duration-150 bg-violet-600 text-white border-none hover:enabled:bg-violet-700 disabled:opacity-50 disabled:cursor-not-allowed", style: { fontFamily: "'DM Sans', system-ui, sans-serif" }, children: "Save" }), _jsx("button", { onClick: handleCancel, className: "flex-1 py-2 px-3 text-[0.8125rem] font-semibold rounded-[10px] cursor-pointer transition-all duration-150 bg-slate-200 text-slate-700 border-none hover:bg-slate-300", style: { fontFamily: "'DM Sans', system-ui, sans-serif" }, children: "Cancel" })] })] }));
+        return (_jsxs("div", { className: "p-3 bg-violet-50 rounded-[10px] mb-3 [&>div]:mb-2.5 [&>div:last-child]:mb-0", children: [_jsxs("div", { children: [_jsx("label", { className: "block text-[0.625rem] font-semibold uppercase tracking-[0.08em] text-slate-500 mb-1", style: { fontFamily: "'DM Mono', 'SF Mono', monospace" }, children: "Metric Name" }), _jsx("input", { type: "text", value: editMetric, onChange: (e) => setEditMetric(e.target.value), placeholder: "e.g., Number of Entities", className: "w-full text-[0.8125rem] text-slate-900 bg-white border-[1.5px] border-slate-300 rounded-[10px] py-2.5 px-3.5 outline-none transition-all duration-150 focus:border-violet-500 focus:shadow-[0_0_0_3px_rgba(139,92,246,0.15)]", style: { fontFamily: "'DM Sans', system-ui, sans-serif" }, autoFocus: true })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-[0.625rem] font-semibold uppercase tracking-[0.08em] text-slate-500 mb-1", style: { fontFamily: "'DM Mono', 'SF Mono', monospace" }, children: "Unit Name" }), _jsx("input", { type: "text", value: editUnitName, onChange: (e) => setEditUnitName(e.target.value), placeholder: "e.g., entity, credit card, contractor", className: "w-full text-[0.8125rem] text-slate-900 bg-white border-[1.5px] border-slate-300 rounded-[10px] py-2.5 px-3.5 outline-none transition-all duration-150 focus:border-violet-500 focus:shadow-[0_0_0_3px_rgba(139,92,246,0.15)]", style: { fontFamily: "'DM Sans', system-ui, sans-serif" } }), _jsx("p", { className: "text-[0.6875rem] text-slate-400 mt-1", children: "Used for overage pricing display (e.g., \"$50 per entity\")" })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-[0.625rem] font-semibold uppercase tracking-[0.08em] text-slate-500 mb-1", style: { fontFamily: "'DM Mono', 'SF Mono', monospace" }, children: "Free Limit" }), _jsx("input", { type: "text", value: editLimit, onChange: (e) => setEditLimit(e.target.value), placeholder: "e.g., 100, Unlimited, Custom", className: "w-full text-[0.8125rem] text-slate-900 bg-white border-[1.5px] border-slate-300 rounded-[10px] py-2.5 px-3.5 outline-none transition-all duration-150 focus:border-violet-500 focus:shadow-[0_0_0_3px_rgba(139,92,246,0.15)]", style: { fontFamily: "'DM Sans', system-ui, sans-serif" } }), _jsx("p", { className: "text-[0.6875rem] text-slate-400 mt-1", children: "Included free limit for this tier" })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-[0.625rem] font-semibold uppercase tracking-[0.08em] text-slate-500 mb-1", style: { fontFamily: "'DM Mono', 'SF Mono', monospace" }, children: "Paid Limit" }), _jsx("input", { type: "text", value: editPaidLimit, onChange: (e) => setEditPaidLimit(e.target.value), placeholder: "e.g., 500, 1000", className: "w-full text-[0.8125rem] text-slate-900 bg-white border-[1.5px] border-slate-300 rounded-[10px] py-2.5 px-3.5 outline-none transition-all duration-150 focus:border-violet-500 focus:shadow-[0_0_0_3px_rgba(139,92,246,0.15)]", style: { fontFamily: "'DM Sans', system-ui, sans-serif" } }), _jsx("p", { className: "text-[0.6875rem] text-slate-400 mt-1", children: "Maximum paid usage beyond the free limit (optional)" })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-[0.625rem] font-semibold uppercase tracking-[0.08em] text-slate-500 mb-1", style: { fontFamily: "'DM Mono', 'SF Mono', monospace" }, children: "Reset Cycle" }), _jsxs("select", { value: editResetCycle, onChange: (e) => setEditResetCycle(e.target.value), className: "w-full text-[0.8125rem] text-slate-900 bg-white border-[1.5px] border-slate-300 rounded-[10px] py-2.5 px-3.5 outline-none transition-all duration-150 focus:border-violet-500 focus:shadow-[0_0_0_3px_rgba(139,92,246,0.15)] cursor-pointer", style: { fontFamily: "'DM Sans', system-ui, sans-serif" }, children: [_jsx("option", { value: "NONE", children: "None (One-time)" }), _jsx("option", { value: "DAILY", children: "Daily" }), _jsx("option", { value: "WEEKLY", children: "Weekly" }), _jsx("option", { value: "MONTHLY", children: "Monthly" })] })] }), _jsxs("div", { className: "mt-2 pt-3 border-t border-dashed border-slate-300", children: [_jsx("label", { className: "block text-[0.625rem] font-semibold uppercase tracking-[0.08em] text-slate-500 mb-1", style: { fontFamily: "'DM Mono', 'SF Mono', monospace" }, children: "Overage Pricing (Optional)" }), _jsx("p", { className: "text-[0.6875rem] text-slate-400 mt-1", style: { marginBottom: "0.5rem" }, children: "Set a price for usage beyond the included limit" }), _jsxs("div", { className: "flex items-center gap-1.5 flex-wrap", children: [_jsxs("div", { className: "flex items-center gap-1", children: [_jsx("span", { className: "text-sm text-slate-500", style: { fontFamily: "'DM Mono', 'SF Mono', monospace" }, children: "$" }), _jsx("input", { type: "number", value: editUnitPrice, onChange: (e) => setEditUnitPrice(e.target.value), placeholder: "0.00", step: "0.01", className: "w-[4.5rem] text-sm font-medium text-slate-900 bg-white border border-slate-300 rounded-md py-1.5 px-2 outline-none transition-colors duration-150 focus:border-violet-600", style: { fontFamily: "'DM Mono', 'SF Mono', monospace" } })] }), _jsxs("span", { className: "text-xs text-slate-500", children: ["per ", editUnitName || "unit"] })] })] }), _jsxs("div", { className: "flex gap-2", children: [_jsx("button", { onClick: handleSave, className: "flex-1 py-2 px-3 text-[0.8125rem] font-semibold rounded-[10px] cursor-pointer transition-all duration-150 bg-violet-600 text-white border-none hover:enabled:bg-violet-700 disabled:opacity-50 disabled:cursor-not-allowed", style: { fontFamily: "'DM Sans', system-ui, sans-serif" }, children: "Save" }), _jsx("button", { onClick: handleCancel, className: "flex-1 py-2 px-3 text-[0.8125rem] font-semibold rounded-[10px] cursor-pointer transition-all duration-150 bg-slate-200 text-slate-700 border-none hover:bg-slate-300", style: { fontFamily: "'DM Sans', system-ui, sans-serif" }, children: "Cancel" })] })] }));
     }
-    return (_jsxs("div", { className: "group/limititem flex items-center gap-3 p-3 bg-slate-50 border border-slate-200 rounded-[10px] mb-3", children: [_jsxs("div", { className: "flex-1 cursor-pointer p-1 -m-1 rounded-md transition-all duration-150 hover:bg-slate-200", onClick: () => setIsEditing(true), children: [_jsx("div", { className: "text-sm font-semibold text-slate-900", style: { fontFamily: "'DM Sans', system-ui, sans-serif" }, children: limit.name }), _jsx("div", { className: "flex flex-col gap-0.5", children: _jsxs("div", { className: "text-[0.8125rem] text-slate-500", children: [limit.limit != null ? `Limit: ${limit.limit}` : "—", limit.unit ? ` ${limit.unit}` : ""] }) })] }), _jsxs("div", { className: "flex gap-1 opacity-0 group-hover/limititem:opacity-100 transition-all duration-150", children: [_jsx("button", { onClick: () => setIsEditing(true), className: "p-1 bg-transparent border-none text-slate-400 cursor-pointer rounded-md transition-all duration-150 hover:bg-slate-200 hover:text-violet-600", title: "Edit metric", children: _jsx("svg", { className: "w-4 h-4", 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: "p-1 bg-transparent border-none text-slate-400 cursor-pointer rounded-md transition-all duration-150 hover:bg-slate-200 hover:text-rose-600", title: "Remove metric", children: _jsx("svg", { className: "w-4 h-4", 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: "group/limititem flex items-center gap-3 p-3 bg-slate-50 border border-slate-200 rounded-[10px] mb-3", children: [_jsxs("div", { className: "flex-1 cursor-pointer p-1 -m-1 rounded-md transition-all duration-150 hover:bg-slate-200", onClick: () => setIsEditing(true), children: [_jsx("div", { className: "text-sm font-semibold text-slate-900", style: { fontFamily: "'DM Sans', system-ui, sans-serif" }, children: limit.metric }), _jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("div", { className: "text-[0.8125rem] text-slate-500", children: limit.freeLimit != null
+                                    ? `Free: ${limit.freeLimit}${limit.paidLimit != null ? ` / Paid: ${limit.paidLimit}` : ""}`
+                                    : (limit.notes ?? "—") }), limit.resetCycle && (_jsxs("div", { style: { fontSize: "0.6875rem", color: "#64748b" }, children: ["Resets ", limit.resetCycle.toLowerCase()] })), overageDisplay && (_jsx("div", { className: "text-[0.6875rem] text-emerald-600 font-medium", style: { fontFamily: "'DM Mono', 'SF Mono', monospace" }, children: overageDisplay }))] })] }), _jsxs("div", { className: "flex gap-1 opacity-0 group-hover/limititem:opacity-100 transition-all duration-150", children: [_jsx("button", { onClick: () => setIsEditing(true), className: "p-1 bg-transparent border-none text-slate-400 cursor-pointer rounded-md transition-all duration-150 hover:bg-slate-200 hover:text-violet-600", title: "Edit metric", children: _jsx("svg", { className: "w-4 h-4", 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: "p-1 bg-transparent border-none text-slate-400 cursor-pointer rounded-md transition-all duration-150 hover:bg-slate-200 hover:text-rose-600", title: "Remove metric", children: _jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })] })] }));
 }