@powerhousedao/service-offering 0.0.1

package/dist/editors/subscription-instance-editor/components/ImportServiceConfigButton.js

@@ -0,0 +1,169 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { generateId } from "document-model/core";
+import { updateTierInfo } from "../../../document-models/subscription-instance/gen/subscription/creators.js";
+import { addService } from "../../../document-models/subscription-instance/gen/service/creators.js";
+import { addServiceMetric } from "../../../document-models/subscription-instance/gen/metrics/creators.js";
+// Mock service offering configuration (simulates what would come from a Service Offering document)
+const MOCK_SERVICE_OFFERING = {
+    title: "Cloud Platform Services",
+    services: [
+        {
+            id: "svc-compute",
+            title: "Cloud Compute",
+            description: "Scalable virtual machines with automatic load balancing",
+        },
+        {
+            id: "svc-storage",
+            title: "Object Storage",
+            description: "Unlimited cloud storage with CDN integration",
+        },
+        {
+            id: "svc-database",
+            title: "Managed Database",
+            description: "PostgreSQL with automatic backups and failover",
+        },
+        {
+            id: "svc-cdn",
+            title: "Global CDN",
+            description: "Content delivery network with edge caching",
+        },
+        {
+            id: "svc-security",
+            title: "Security Suite",
+            description: "DDoS protection and Web Application Firewall",
+        },
+    ],
+    tier: {
+        id: "tier-professional",
+        name: "Professional",
+        // Services included in this tier
+        includedServices: [
+            "svc-compute",
+            "svc-storage",
+            "svc-database",
+            "svc-cdn",
+            "svc-security",
+        ],
+        // Usage limits/metrics for this tier
+        usageLimits: [
+            {
+                serviceId: "svc-compute",
+                metric: "vCPU Hours",
+                unitName: "hours",
+                limit: 2000,
+                resetPeriod: "MONTHLY",
+            },
+            {
+                serviceId: "svc-compute",
+                metric: "RAM GB-Hours",
+                unitName: "GB-hours",
+                limit: 5000,
+                resetPeriod: "MONTHLY",
+            },
+            {
+                serviceId: "svc-compute",
+                metric: "Active Instances",
+                unitName: "instances",
+                limit: 20,
+                resetPeriod: null,
+            },
+            {
+                serviceId: "svc-storage",
+                metric: "Storage Used",
+                unitName: "GB",
+                limit: 1000,
+                resetPeriod: null,
+            },
+            {
+                serviceId: "svc-storage",
+                metric: "Bandwidth Out",
+                unitName: "GB",
+                limit: 500,
+                resetPeriod: "MONTHLY",
+            },
+            {
+                serviceId: "svc-storage",
+                metric: "API Requests",
+                unitName: "requests",
+                limit: 500000,
+                resetPeriod: "MONTHLY",
+            },
+            {
+                serviceId: "svc-database",
+                metric: "Database Size",
+                unitName: "GB",
+                limit: 100,
+                resetPeriod: null,
+            },
+            {
+                serviceId: "svc-database",
+                metric: "Connections",
+                unitName: "connections",
+                limit: 100,
+                resetPeriod: null,
+            },
+            {
+                serviceId: "svc-cdn",
+                metric: "Edge Requests",
+                unitName: "M requests",
+                limit: 50,
+                resetPeriod: "MONTHLY",
+            },
+            {
+                serviceId: "svc-security",
+                metric: "WAF Rules",
+                unitName: "rules",
+                limit: 100,
+                resetPeriod: null,
+            },
+        ],
+    },
+};
+export function ImportServiceConfigButton({ document, dispatch, }) {
+    const hasServices = document.state.global.services.length > 0;
+    const importServiceConfig = useCallback(() => {
+        const offering = MOCK_SERVICE_OFFERING;
+        const tier = offering.tier;
+        // Update tier info on subscription
+        dispatch(updateTierInfo({
+            tierName: tier.name,
+            tierPricingOptionId: tier.id,
+        }));
+        // Create a map of old service IDs to new service IDs
+        const serviceIdMap = new Map();
+        // Import services (without billing amounts - config only)
+        offering.services.forEach((service) => {
+            // Only import services that are included in the tier
+            if (!tier.includedServices.includes(service.id))
+                return;
+            const newServiceId = generateId();
+            serviceIdMap.set(service.id, newServiceId);
+            dispatch(addService({
+                serviceId: newServiceId,
+                name: service.title,
+                description: service.description,
+                // No amounts - these will be set when subscription is active
+            }));
+        });
+        // Import usage limits as metrics (with 0 current usage - config only)
+        tier.usageLimits.forEach((limit) => {
+            const newServiceId = serviceIdMap.get(limit.serviceId);
+            if (!newServiceId)
+                return;
+            dispatch(addServiceMetric({
+                serviceId: newServiceId,
+                metricId: generateId(),
+                name: limit.metric,
+                unitName: limit.unitName,
+                currentUsage: 0, // No usage yet - just configuration
+                limit: limit.limit,
+                usageResetPeriod: limit.resetPeriod ?? undefined,
+                // No cost amounts - these will be set when subscription is active
+            }));
+        });
+    }, [dispatch]);
+    return (_jsxs("button", { type: "button", className: "si-btn si-btn--secondary", onClick: importServiceConfig, title: hasServices
+            ? "Import additional service configuration"
+            : "Import service configuration (without billing)", children: [_jsx("svg", { className: "si-btn__icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" }) }), hasServices ? "Import More Config" : "Import Service Config"] }));
+}

package/dist/editors/subscription-instance-editor/components/MetricActions.d.ts

@@ -0,0 +1,21 @@
+import type { DocumentDispatch } from "@powerhousedao/reactor-browser";
+import type { SubscriptionInstanceAction } from "@powerhousedao/service-offering/document-models/subscription-instance";
+import type { ServiceMetric } from "../../../document-models/subscription-instance/gen/schema/types.js";
+interface MetricActionsProps {
+    serviceId: string;
+    metric: ServiceMetric;
+    dispatch: DocumentDispatch<SubscriptionInstanceAction>;
+    isOperator: boolean;
+    customerName?: string | null;
+}
+export declare function MetricActions({ serviceId, metric, dispatch, isOperator, }: MetricActionsProps): import("react/jsx-runtime").JSX.Element | null;
+interface UpdateMetricLimitModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    serviceId: string;
+    metric: ServiceMetric;
+    dispatch: DocumentDispatch<SubscriptionInstanceAction>;
+}
+export declare function UpdateMetricLimitModal({ isOpen, onClose, serviceId, metric, dispatch, }: UpdateMetricLimitModalProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=MetricActions.d.ts.map

package/dist/editors/subscription-instance-editor/components/MetricActions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetricActions.d.ts","sourceRoot":"","sources":["../../../../editors/subscription-instance-editor/components/MetricActions.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AACvE,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,uEAAuE,CAAC;AACxH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oEAAoE,CAAC;AAUxG,UAAU,kBAAkB;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,aAAa,CAAC;IACtB,QAAQ,EAAE,gBAAgB,CAAC,0BAA0B,CAAC,CAAC;IACvD,UAAU,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC9B;AAED,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,MAAM,EACN,QAAQ,EACR,UAAU,GACX,EAAE,kBAAkB,kDAqRpB;AAED,UAAU,2BAA2B;IACnC,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,aAAa,CAAC;IACtB,QAAQ,EAAE,gBAAgB,CAAC,0BAA0B,CAAC,CAAC;CACxD;AAED,wBAAgB,sBAAsB,CAAC,EACrC,MAAM,EACN,OAAO,EACP,SAAS,EACT,MAAM,EACN,QAAQ,GACT,EAAE,2BAA2B,kDAmE7B"}

package/dist/editors/subscription-instance-editor/components/MetricActions.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useCallback } from "react";
+import { incrementMetricUsage, decrementMetricUsage, updateMetric, } from "../../../document-models/subscription-instance/gen/metrics/creators.js";
+export function MetricActions({ serviceId, metric, dispatch, isOperator, }) {
+    const [showAdjustModal, setShowAdjustModal] = useState(false);
+    const [showRequestModal, setShowRequestModal] = useState(false);
+    const [adjustAmount, setAdjustAmount] = useState("1");
+    const [requestedLimit, setRequestedLimit] = useState(metric.limit?.toString() || "");
+    const [requestReason, setRequestReason] = useState("");
+    const handleIncrement = useCallback((amount = 1) => {
+        dispatch(incrementMetricUsage({
+            serviceId,
+            metricId: metric.id,
+            incrementBy: amount,
+            currentTime: new Date().toISOString(),
+        }));
+    }, [dispatch, serviceId, metric.id]);
+    const handleDecrement = useCallback((amount = 1) => {
+        dispatch(decrementMetricUsage({
+            serviceId,
+            metricId: metric.id,
+            decrementBy: amount,
+            currentTime: new Date().toISOString(),
+        }));
+    }, [dispatch, serviceId, metric.id]);
+    const handleAdjust = useCallback(() => {
+        const amount = parseInt(adjustAmount, 10);
+        if (isNaN(amount) || amount === 0)
+            return;
+        if (amount > 0) {
+            handleIncrement(amount);
+        }
+        else {
+            handleDecrement(Math.abs(amount));
+        }
+        setShowAdjustModal(false);
+        setAdjustAmount("1");
+    }, [adjustAmount, handleIncrement, handleDecrement]);
+    const handleRequestLimitIncrease = useCallback(() => {
+        const newLimit = parseInt(requestedLimit, 10);
+        if (isNaN(newLimit) || newLimit <= 0)
+            return;
+        // Requests module has been removed - functionality disabled
+        console.warn("Limit increase request functionality is currently disabled");
+        setShowRequestModal(false);
+        setRequestedLimit(metric.limit?.toString() || "");
+        setRequestReason("");
+    }, [requestedLimit, metric.limit]);
+    // Operator view - direct manipulation
+    if (isOperator) {
+        return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "si-metric-actions", children: [_jsx("button", { type: "button", className: "si-metric-btn si-metric-btn--minus", onClick: () => handleDecrement(1), disabled: metric.currentUsage <= 0, "aria-label": `Decrease ${metric.name} by 1`, children: _jsx("svg", { viewBox: "0 0 20 20", fill: "currentColor", children: _jsx("path", { fillRule: "evenodd", d: "M5 10a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1z", clipRule: "evenodd" }) }) }), _jsx("button", { type: "button", className: "si-metric-btn si-metric-btn--adjust", onClick: () => setShowAdjustModal(true), "aria-label": `Adjust ${metric.name}`, title: "Adjust usage", children: _jsx("svg", { viewBox: "0 0 20 20", fill: "currentColor", children: _jsx("path", { d: "M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" }) }) }), _jsx("button", { type: "button", className: "si-metric-btn si-metric-btn--plus", onClick: () => handleIncrement(1), "aria-label": `Increase ${metric.name} by 1`, children: _jsx("svg", { viewBox: "0 0 20 20", fill: "currentColor", children: _jsx("path", { fillRule: "evenodd", d: "M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z", clipRule: "evenodd" }) }) })] }), showAdjustModal && (_jsx("div", { className: "si-modal-overlay", onClick: () => setShowAdjustModal(false), children: _jsxs("div", { className: "si-modal si-modal--sm", onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { className: "si-modal__header", children: [_jsx("h3", { className: "si-modal__title", children: "Adjust Usage" }), _jsx("span", { className: "si-modal__subtitle", children: metric.name })] }), _jsxs("div", { className: "si-modal__body", children: [_jsxs("div", { className: "si-metric-adjust-info", children: [_jsxs("span", { children: ["Current: ", metric.currentUsage.toLocaleString()] }), metric.limit && (_jsxs("span", { children: ["Limit: ", metric.limit.toLocaleString()] }))] }), _jsxs("div", { className: "si-form-group", children: [_jsx("label", { className: "si-form-label", htmlFor: "adjust-amount", children: "Adjustment (+ or -)" }), _jsx("input", { id: "adjust-amount", type: "number", className: "si-input si-input--center", value: adjustAmount, onChange: (e) => setAdjustAmount(e.target.value), placeholder: "Enter amount" })] }), _jsxs("div", { className: "si-metric-adjust-preview", children: ["New value:", " ", _jsx("strong", { children: Math.max(0, metric.currentUsage + (parseInt(adjustAmount, 10) || 0)).toLocaleString() }), " ", metric.unitName] })] }), _jsxs("div", { className: "si-modal__footer", children: [_jsx("button", { type: "button", className: "si-btn si-btn--ghost", onClick: () => setShowAdjustModal(false), children: "Cancel" }), _jsx("button", { type: "button", className: "si-btn si-btn--primary", onClick: handleAdjust, disabled: !adjustAmount || parseInt(adjustAmount, 10) === 0, children: "Apply" })] })] }) }))] }));
+    }
+    // Client view - only show request button if there's a limit
+    if (!metric.limit)
+        return null;
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "si-metric-actions si-metric-actions--client", children: _jsx("button", { type: "button", className: "si-metric-btn si-metric-btn--request", onClick: () => setShowRequestModal(true), "aria-label": `Request limit increase for ${metric.name}`, title: "Request limit increase", children: _jsx("svg", { viewBox: "0 0 20 20", fill: "currentColor", children: _jsx("path", { fillRule: "evenodd", d: "M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z", clipRule: "evenodd" }) }) }) }), showRequestModal && (_jsx("div", { className: "si-modal-overlay", onClick: () => setShowRequestModal(false), children: _jsxs("div", { className: "si-modal si-modal--sm", onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { className: "si-modal__header", children: [_jsx("h3", { className: "si-modal__title", children: "Request Limit Increase" }), _jsx("span", { className: "si-modal__subtitle", children: metric.name })] }), _jsxs("div", { className: "si-modal__body", children: [_jsxs("div", { className: "si-metric-adjust-info", children: [_jsxs("span", { children: ["Current Usage: ", metric.currentUsage.toLocaleString()] }), _jsxs("span", { children: ["Current Limit: ", metric.limit.toLocaleString()] })] }), _jsxs("div", { className: "si-form-group", children: [_jsxs("label", { className: "si-form-label", htmlFor: "requested-limit", children: ["Requested New Limit (", metric.unitName, ")"] }), _jsx("input", { id: "requested-limit", type: "number", className: "si-input si-input--center", value: requestedLimit, onChange: (e) => setRequestedLimit(e.target.value), placeholder: "Enter requested limit", min: metric.limit + 1 })] }), _jsxs("div", { className: "si-form-group", children: [_jsx("label", { className: "si-form-label", htmlFor: "request-reason", children: "Reason (optional)" }), _jsx("textarea", { id: "request-reason", className: "si-input si-input--textarea", value: requestReason, onChange: (e) => setRequestReason(e.target.value), placeholder: "Explain why you need a higher limit...", rows: 3 })] })] }), _jsxs("div", { className: "si-modal__footer", children: [_jsx("button", { type: "button", className: "si-btn si-btn--ghost", onClick: () => setShowRequestModal(false), children: "Cancel" }), _jsx("button", { type: "button", className: "si-btn si-btn--primary", onClick: handleRequestLimitIncrease, disabled: !requestedLimit ||
+                                        parseInt(requestedLimit, 10) <= (metric.limit || 0), children: "Submit Request" })] })] }) }))] }));
+}
+export function UpdateMetricLimitModal({ isOpen, onClose, serviceId, metric, dispatch, }) {
+    const [limit, setLimit] = useState(metric.limit?.toString() || "");
+    const handleSubmit = useCallback((e) => {
+        e.preventDefault();
+        const parsedLimit = limit ? parseInt(limit, 10) : null;
+        dispatch(updateMetric({
+            serviceId,
+            metricId: metric.id,
+            limit: parsedLimit,
+        }));
+        onClose();
+    }, [limit, serviceId, metric.id, dispatch, onClose]);
+    if (!isOpen)
+        return null;
+    return (_jsx("div", { className: "si-modal-overlay", onClick: onClose, children: _jsxs("div", { className: "si-modal si-modal--sm", onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { className: "si-modal__header", children: [_jsx("h3", { className: "si-modal__title", children: "Update Metric Limit" }), _jsx("span", { className: "si-modal__subtitle", children: metric.name })] }), _jsxs("form", { onSubmit: handleSubmit, children: [_jsx("div", { className: "si-modal__body", children: _jsxs("div", { className: "si-form-group", children: [_jsxs("label", { className: "si-form-label", htmlFor: "metric-limit", children: ["New Limit (", metric.unitName, ")"] }), _jsx("input", { id: "metric-limit", type: "number", className: "si-input", value: limit, onChange: (e) => setLimit(e.target.value), placeholder: "Leave empty for unlimited", min: "0" })] }) }), _jsxs("div", { className: "si-modal__footer", children: [_jsx("button", { type: "button", className: "si-btn si-btn--ghost", onClick: onClose, children: "Cancel" }), _jsx("button", { type: "submit", className: "si-btn si-btn--primary", children: "Update Limit" })] })] })] }) }));
+}

package/dist/editors/subscription-instance-editor/components/MockDataButton.d.ts

@@ -0,0 +1,9 @@
+import type { DocumentDispatch } from "@powerhousedao/reactor-browser";
+import type { SubscriptionInstanceAction, SubscriptionInstanceDocument } from "@powerhousedao/service-offering/document-models/subscription-instance";
+interface MockDataButtonProps {
+    document: SubscriptionInstanceDocument;
+    dispatch: DocumentDispatch<SubscriptionInstanceAction>;
+}
+export declare function MockDataButton({ document, dispatch }: MockDataButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=MockDataButton.d.ts.map

package/dist/editors/subscription-instance-editor/components/MockDataButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MockDataButton.d.ts","sourceRoot":"","sources":["../../../../editors/subscription-instance-editor/components/MockDataButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AACvE,OAAO,KAAK,EACV,0BAA0B,EAC1B,4BAA4B,EAC7B,MAAM,uEAAuE,CAAC;AAgB/E,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,4BAA4B,CAAC;IACvC,QAAQ,EAAE,gBAAgB,CAAC,0BAA0B,CAAC,CAAC;CACxD;AAED,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,mBAAmB,2CAuWzE"}

package/dist/editors/subscription-instance-editor/components/MockDataButton.js

@@ -0,0 +1,258 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { generateId } from "document-model/core";
+import { initializeSubscription, activateSubscription, setAutoRenew, setRenewalDate, updateBillingProjection, } from "../../../document-models/subscription-instance/gen/subscription/creators.js";
+import { addService } from "../../../document-models/subscription-instance/gen/service/creators.js";
+import { addServiceGroup, addServiceToGroup, } from "../../../document-models/subscription-instance/gen/service-group/creators.js";
+import { addServiceMetric } from "../../../document-models/subscription-instance/gen/metrics/creators.js";
+import { setCustomerType } from "../../../document-models/subscription-instance/gen/customer/creators.js";
+export function MockDataButton({ document, dispatch }) {
+    const hasData = document.state.global.services.length > 0 ||
+        document.state.global.serviceGroups.length > 0;
+    const populateMockData = useCallback(() => {
+        const oneMonthAgo = new Date(Date.now() - 30 * 24 * 60 * 60 * 1000).toISOString();
+        const oneMonthFromNow = new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString();
+        const twoMonthsFromNow = new Date(Date.now() + 60 * 24 * 60 * 60 * 1000).toISOString();
+        // 1. Initialize subscription if not already done
+        if (!document.state.global.customerId) {
+            dispatch(initializeSubscription({
+                createdAt: oneMonthAgo,
+                customerId: `phid:customer:${generateId()}`,
+                customerName: "Acme Corporation",
+                customerEmail: "billing@acme.example.com",
+                resourceId: `phid:resource:${generateId()}`,
+                resourceLabel: "Enterprise Cloud Platform",
+                tierName: "Professional",
+                tierPricingOptionId: generateId(),
+            }));
+        }
+        // 2. Activate subscription
+        dispatch(activateSubscription({
+            activatedSince: oneMonthAgo,
+        }));
+        // 3. Set auto-renew and renewal date
+        dispatch(setAutoRenew({ autoRenew: true }));
+        dispatch(setRenewalDate({ renewalDate: twoMonthsFromNow }));
+        // 4. Set customer type
+        dispatch(setCustomerType({
+            customerType: "TEAM",
+            teamMemberCount: 12,
+        }));
+        // === SERVICES (4 core services) ===
+        const service1Id = generateId();
+        const service2Id = generateId();
+        const service3Id = generateId();
+        const service4Id = generateId();
+        // Service 1: Compute
+        dispatch(addService({
+            serviceId: service1Id,
+            name: "Cloud Compute",
+            description: "Scalable virtual machines with automatic load balancing",
+            recurringAmount: 299,
+            recurringCurrency: "USD",
+            recurringBillingCycle: "MONTHLY",
+            recurringNextBillingDate: oneMonthFromNow,
+            setupAmount: 500,
+            setupCurrency: "USD",
+            setupPaymentDate: oneMonthAgo,
+        }));
+        // Service 2: Storage
+        dispatch(addService({
+            serviceId: service2Id,
+            name: "Object Storage",
+            description: "Unlimited cloud storage with CDN integration",
+            recurringAmount: 149,
+            recurringCurrency: "USD",
+            recurringBillingCycle: "MONTHLY",
+            recurringNextBillingDate: oneMonthFromNow,
+        }));
+        // Service 3: Database
+        dispatch(addService({
+            serviceId: service3Id,
+            name: "Managed Database",
+            description: "PostgreSQL with automatic backups and failover",
+            recurringAmount: 199,
+            recurringCurrency: "USD",
+            recurringBillingCycle: "MONTHLY",
+            recurringNextBillingDate: oneMonthFromNow,
+            setupAmount: 250,
+            setupCurrency: "USD",
+        }));
+        // Service 4: CDN
+        dispatch(addService({
+            serviceId: service4Id,
+            name: "Global CDN",
+            description: "Content delivery network with edge caching",
+            recurringAmount: 79,
+            recurringCurrency: "USD",
+            recurringBillingCycle: "MONTHLY",
+            recurringNextBillingDate: oneMonthFromNow,
+        }));
+        // === METRICS (10 total, spread across services) ===
+        // Compute metrics (3)
+        dispatch(addServiceMetric({
+            serviceId: service1Id,
+            metricId: generateId(),
+            name: "vCPU Hours",
+            unitName: "hours",
+            currentUsage: 1250,
+            limit: 2000,
+            usageResetPeriod: "MONTHLY",
+            nextUsageReset: oneMonthFromNow,
+            unitCostAmount: 0.05,
+            unitCostCurrency: "USD",
+            unitCostBillingCycle: "MONTHLY",
+        }));
+        dispatch(addServiceMetric({
+            serviceId: service1Id,
+            metricId: generateId(),
+            name: "RAM GB-Hours",
+            unitName: "GB-hours",
+            currentUsage: 3200,
+            limit: 5000,
+            usageResetPeriod: "MONTHLY",
+            nextUsageReset: oneMonthFromNow,
+        }));
+        dispatch(addServiceMetric({
+            serviceId: service1Id,
+            metricId: generateId(),
+            name: "Active Instances",
+            unitName: "instances",
+            currentUsage: 8,
+            limit: 20,
+        }));
+        // Storage metrics (3)
+        dispatch(addServiceMetric({
+            serviceId: service2Id,
+            metricId: generateId(),
+            name: "Storage Used",
+            unitName: "GB",
+            currentUsage: 450,
+            limit: 1000,
+            unitCostAmount: 0.02,
+            unitCostCurrency: "USD",
+            unitCostBillingCycle: "MONTHLY",
+        }));
+        dispatch(addServiceMetric({
+            serviceId: service2Id,
+            metricId: generateId(),
+            name: "Bandwidth Out",
+            unitName: "GB",
+            currentUsage: 280,
+            limit: 500,
+            usageResetPeriod: "MONTHLY",
+            nextUsageReset: oneMonthFromNow,
+        }));
+        dispatch(addServiceMetric({
+            serviceId: service2Id,
+            metricId: generateId(),
+            name: "API Requests",
+            unitName: "requests",
+            currentUsage: 125000,
+            limit: 500000,
+            usageResetPeriod: "MONTHLY",
+            nextUsageReset: oneMonthFromNow,
+        }));
+        // Database metrics (2)
+        dispatch(addServiceMetric({
+            serviceId: service3Id,
+            metricId: generateId(),
+            name: "Database Size",
+            unitName: "GB",
+            currentUsage: 85,
+            limit: 100,
+        }));
+        dispatch(addServiceMetric({
+            serviceId: service3Id,
+            metricId: generateId(),
+            name: "Connections",
+            unitName: "connections",
+            currentUsage: 45,
+            limit: 100,
+        }));
+        // CDN metrics (2)
+        dispatch(addServiceMetric({
+            serviceId: service4Id,
+            metricId: generateId(),
+            name: "Cache Hit Rate",
+            unitName: "%",
+            currentUsage: 94,
+            limit: 100,
+        }));
+        dispatch(addServiceMetric({
+            serviceId: service4Id,
+            metricId: generateId(),
+            name: "Edge Requests",
+            unitName: "M requests",
+            currentUsage: 12,
+            limit: 50,
+            usageResetPeriod: "MONTHLY",
+            nextUsageReset: oneMonthFromNow,
+        }));
+        // === ADDON SERVICE GROUPS (2 optional groups) ===
+        const addonGroup1Id = generateId();
+        const addonGroup2Id = generateId();
+        // Addon Group 1: Security Suite
+        dispatch(addServiceGroup({
+            groupId: addonGroup1Id,
+            name: "Security Suite",
+            optional: true,
+        }));
+        dispatch(addServiceToGroup({
+            groupId: addonGroup1Id,
+            serviceId: generateId(),
+            name: "DDoS Protection",
+            description: "Advanced DDoS mitigation with real-time monitoring",
+            recurringAmount: 99,
+            recurringCurrency: "USD",
+            recurringBillingCycle: "MONTHLY",
+            recurringNextBillingDate: oneMonthFromNow,
+        }));
+        dispatch(addServiceToGroup({
+            groupId: addonGroup1Id,
+            serviceId: generateId(),
+            name: "WAF",
+            description: "Web Application Firewall with custom rules",
+            recurringAmount: 79,
+            recurringCurrency: "USD",
+            recurringBillingCycle: "MONTHLY",
+            recurringNextBillingDate: oneMonthFromNow,
+        }));
+        // Addon Group 2: Premium Support
+        dispatch(addServiceGroup({
+            groupId: addonGroup2Id,
+            name: "Premium Support",
+            optional: true,
+        }));
+        dispatch(addServiceToGroup({
+            groupId: addonGroup2Id,
+            serviceId: generateId(),
+            name: "24/7 Priority Support",
+            description: "Direct access to senior engineers with 15-min response time",
+            recurringAmount: 299,
+            recurringCurrency: "USD",
+            recurringBillingCycle: "MONTHLY",
+            recurringNextBillingDate: oneMonthFromNow,
+            setupAmount: 0,
+            setupCurrency: "USD",
+        }));
+        dispatch(addServiceToGroup({
+            groupId: addonGroup2Id,
+            serviceId: generateId(),
+            name: "Dedicated Account Manager",
+            description: "Personal account manager for strategic guidance",
+            recurringAmount: 199,
+            recurringCurrency: "USD",
+            recurringBillingCycle: "MONTHLY",
+            recurringNextBillingDate: oneMonthFromNow,
+        }));
+        // === BILLING PROJECTION ===
+        // Total recurring: 299 + 149 + 199 + 79 = 726 (core) + 99 + 79 + 299 + 199 = 1402 (with addons)
+        dispatch(updateBillingProjection({
+            nextBillingDate: oneMonthFromNow,
+            projectedBillAmount: 1402,
+            projectedBillCurrency: "USD",
+        }));
+    }, [document.state.global.customerId, dispatch]);
+    return (_jsxs("button", { type: "button", className: "si-btn si-btn--secondary", onClick: populateMockData, title: hasData ? "Add more mock data" : "Populate with example data", children: [_jsx("svg", { className: "si-btn__icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" }) }), hasData ? "Add More Data" : "Populate Mock Data"] }));
+}

package/dist/editors/subscription-instance-editor/components/ModeToggle.d.ts

@@ -0,0 +1,8 @@
+import type { ViewMode } from "../types.js";
+interface ModeToggleProps {
+    mode: ViewMode;
+    onModeChange: (mode: ViewMode) => void;
+}
+export declare function ModeToggle({ mode, onModeChange }: ModeToggleProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ModeToggle.d.ts.map

package/dist/editors/subscription-instance-editor/components/ModeToggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModeToggle.d.ts","sourceRoot":"","sources":["../../../../editors/subscription-instance-editor/components/ModeToggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAE5C,UAAU,eAAe;IACvB,IAAI,EAAE,QAAQ,CAAC;IACf,YAAY,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;CACxC;AAED,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,EAAE,eAAe,2CAkDjE"}

package/dist/editors/subscription-instance-editor/components/ModeToggle.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function ModeToggle({ mode, onModeChange }) {
+    return (_jsxs("div", { className: "si-mode-toggle", children: [_jsxs("button", { type: "button", className: `si-mode-toggle__btn ${mode === "client" ? "si-mode-toggle__btn--active" : ""}`, onClick: () => onModeChange("client"), children: [_jsx("svg", { className: "si-mode-toggle__icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" }) }), _jsx("span", { children: "Client View" })] }), _jsxs("button", { type: "button", className: `si-mode-toggle__btn ${mode === "operator" ? "si-mode-toggle__btn--active" : ""}`, onClick: () => onModeChange("operator"), children: [_jsxs("svg", { className: "si-mode-toggle__icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: [_jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" }), _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z" })] }), _jsx("span", { children: "Operator View" })] })] }));
+}

package/dist/editors/subscription-instance-editor/components/OperatorNotes.d.ts

@@ -0,0 +1,9 @@
+import type { DocumentDispatch } from "@powerhousedao/reactor-browser";
+import type { SubscriptionInstanceAction, SubscriptionInstanceDocument } from "@powerhousedao/service-offering/document-models/subscription-instance";
+interface OperatorNotesProps {
+    document: SubscriptionInstanceDocument;
+    dispatch: DocumentDispatch<SubscriptionInstanceAction>;
+}
+export declare function OperatorNotes({ document, dispatch }: OperatorNotesProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=OperatorNotes.d.ts.map

package/dist/editors/subscription-instance-editor/components/OperatorNotes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OperatorNotes.d.ts","sourceRoot":"","sources":["../../../../editors/subscription-instance-editor/components/OperatorNotes.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AACvE,OAAO,KAAK,EACV,0BAA0B,EAC1B,4BAA4B,EAC7B,MAAM,uEAAuE,CAAC;AAG/E,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,4BAA4B,CAAC;IACvC,QAAQ,EAAE,gBAAgB,CAAC,0BAA0B,CAAC,CAAC;CACxD;AAED,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,kBAAkB,2CAkFvE"}

package/dist/editors/subscription-instance-editor/components/OperatorNotes.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback } from "react";
+import { setOperatorNotes } from "../../../document-models/subscription-instance/gen/creators.js";
+export function OperatorNotes({ document, dispatch }) {
+    const currentNotes = document.state.global.operatorNotes || "";
+    const [isEditing, setIsEditing] = useState(false);
+    const [notes, setNotes] = useState(currentNotes);
+    const handleSave = useCallback(() => {
+        dispatch(setOperatorNotes({ operatorNotes: notes || null }));
+        setIsEditing(false);
+    }, [dispatch, notes]);
+    const handleCancel = useCallback(() => {
+        setNotes(currentNotes);
+        setIsEditing(false);
+    }, [currentNotes]);
+    return (_jsxs("div", { className: "si-operator-notes", children: [_jsxs("div", { className: "si-operator-notes__header", children: [_jsxs("h4", { className: "si-operator-notes__title", children: [_jsx("svg", { className: "si-operator-notes__icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" }) }), "Internal Notes"] }), !isEditing && (_jsx("button", { type: "button", className: "si-btn si-btn--ghost si-btn--sm", onClick: () => setIsEditing(true), children: "Edit" }))] }), isEditing ? (_jsxs("div", { className: "si-operator-notes__edit", children: [_jsx("textarea", { className: "si-input si-input--textarea", value: notes, onChange: (e) => setNotes(e.target.value), placeholder: "Add internal notes about this subscription...", rows: 4 }), _jsxs("div", { className: "si-operator-notes__actions", children: [_jsx("button", { type: "button", className: "si-btn si-btn--ghost si-btn--sm", onClick: handleCancel, children: "Cancel" }), _jsx("button", { type: "button", className: "si-btn si-btn--primary si-btn--sm", onClick: handleSave, children: "Save Notes" })] })] })) : (_jsx("div", { className: "si-operator-notes__content", children: currentNotes ? (_jsx("p", { className: "si-operator-notes__text", children: currentNotes })) : (_jsx("p", { className: "si-operator-notes__empty", children: "No internal notes" })) }))] }));
+}

package/dist/editors/subscription-instance-editor/components/PendingRequestsPanel.d.ts

@@ -0,0 +1,9 @@
+import type { DocumentDispatch } from "@powerhousedao/reactor-browser";
+import type { SubscriptionInstanceAction, SubscriptionInstanceDocument } from "@powerhousedao/service-offering/document-models/subscription-instance";
+interface PendingRequestsPanelProps {
+    document: SubscriptionInstanceDocument;
+    dispatch: DocumentDispatch<SubscriptionInstanceAction>;
+}
+export declare function PendingRequestsPanel(_props: PendingRequestsPanelProps): null;
+export {};
+//# sourceMappingURL=PendingRequestsPanel.d.ts.map

package/dist/editors/subscription-instance-editor/components/PendingRequestsPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PendingRequestsPanel.d.ts","sourceRoot":"","sources":["../../../../editors/subscription-instance-editor/components/PendingRequestsPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AACvE,OAAO,KAAK,EACV,0BAA0B,EAC1B,4BAA4B,EAC7B,MAAM,uEAAuE,CAAC;AAM/E,UAAU,yBAAyB;IACjC,QAAQ,EAAE,4BAA4B,CAAC;IACvC,QAAQ,EAAE,gBAAgB,CAAC,0BAA0B,CAAC,CAAC;CACxD;AAED,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,yBAAyB,QAGrE"}

package/dist/editors/subscription-instance-editor/components/PendingRequestsPanel.js

@@ -0,0 +1,4 @@
+export function PendingRequestsPanel(_props) {
+    // Requests functionality has been removed from the document model
+    return null;
+}

package/dist/editors/subscription-instance-editor/components/ServicesPanel.d.ts

@@ -0,0 +1,11 @@
+import type { DocumentDispatch } from "@powerhousedao/reactor-browser";
+import type { SubscriptionInstanceAction, SubscriptionInstanceDocument } from "@powerhousedao/service-offering/document-models/subscription-instance";
+import type { ViewMode } from "../types.js";
+interface ServicesPanelProps {
+    document: SubscriptionInstanceDocument;
+    dispatch: DocumentDispatch<SubscriptionInstanceAction>;
+    mode: ViewMode;
+}
+export declare function ServicesPanel({ document, dispatch, mode, }: ServicesPanelProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ServicesPanel.d.ts.map

package/dist/editors/subscription-instance-editor/components/ServicesPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ServicesPanel.d.ts","sourceRoot":"","sources":["../../../../editors/subscription-instance-editor/components/ServicesPanel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AACvE,OAAO,KAAK,EACV,0BAA0B,EAC1B,4BAA4B,EAC7B,MAAM,uEAAuE,CAAC;AAK/E,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAM5C,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,4BAA4B,CAAC;IACvC,QAAQ,EAAE,gBAAgB,CAAC,0BAA0B,CAAC,CAAC;IACvD,IAAI,EAAE,QAAQ,CAAC;CAChB;AA2QD,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,QAAQ,EACR,IAAI,GACL,EAAE,kBAAkB,2CA2GpB"}