@powerhousedao/service-offering 0.0.1

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

@@ -0,0 +1,1704 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useMemo, useEffect } from "react";
+import { generateId } from "document-model/core";
+import { BILLING_CYCLE_SHORT_LABELS } from "./pricing-utils.js";
+import { addService, updateService, deleteService, addOptionGroup, updateOptionGroup, deleteOptionGroup, addServiceLevel, removeServiceLevel, } from "../../../document-models/service-offering/gen/creators.js";
+const SERVICE_TEMPLATES = {
+    "Setup & Formation": [
+        {
+            title: "Swiss association entity",
+            description: "Legal entity formation as a Swiss association",
+            category: "setup",
+            icon: "🏛️",
+        },
+        {
+            title: "Registered address (Zug)",
+            description: "Official registered address in Zug, Switzerland",
+            category: "setup",
+            icon: "📍",
+        },
+        {
+            title: "Legal document templates",
+            description: "Access to standardized legal document templates",
+            category: "setup",
+            icon: "📋",
+        },
+    ],
+    "Operations & Finance": [
+        {
+            title: "Invoice management",
+            description: "Professional invoice processing and management",
+            category: "recurring",
+            icon: "📄",
+        },
+        {
+            title: "Annual tax filing",
+            description: "Yearly tax preparation and filing services",
+            category: "recurring",
+            icon: "💰",
+        },
+        {
+            title: "Monthly accounting & close",
+            description: "Monthly bookkeeping and financial close",
+            category: "recurring",
+            icon: "📊",
+        },
+    ],
+    "Contributor & Payments": [
+        {
+            title: "Contributor operations",
+            description: "Management of contributor payments and operations",
+            category: "recurring",
+            icon: "👥",
+        },
+        {
+            title: "Multi-currency payouts",
+            description: "Support for payments in multiple currencies",
+            category: "recurring",
+            icon: "💱",
+        },
+        {
+            title: "Multiple entities",
+            description: "Support for managing multiple legal entities",
+            category: "recurring",
+            icon: "🏢",
+        },
+    ],
+    "Support & Advisory": [
+        {
+            title: "Dedicated ops support",
+            description: "Dedicated operations support team",
+            category: "addon",
+            icon: "🎯",
+        },
+        {
+            title: "Dedicated account manager",
+            description: "Personal point of contact for all needs",
+            category: "addon",
+            icon: "👤",
+        },
+    ],
+};
+export function ServiceCatalog({ document, dispatch }) {
+    const { state } = document;
+    const services = state.global.services ?? [];
+    const optionGroups = state.global.optionGroups ?? [];
+    const tiers = state.global.tiers ?? [];
+    // Local UI state
+    const [selectedGroupId, setSelectedGroupId] = useState(null);
+    const [isAddingService, setIsAddingService] = useState(false);
+    const [isAddingGroup, setIsAddingGroup] = useState(false);
+    const [newGroupName, setNewGroupName] = useState("");
+    const [newGroupType, setNewGroupType] = useState("recurring");
+    const [newGroupPrice, setNewGroupPrice] = useState("");
+    const [newGroupBillingCycle, setNewGroupBillingCycle] = useState("MONTHLY");
+    const [newService, setNewService] = useState({ title: "", description: "" });
+    const [newServiceCostType, setNewServiceCostType] = useState("RECURRING");
+    const [newServicePrice, setNewServicePrice] = useState("");
+    const [selectedTierIds, setSelectedTierIds] = useState(new Set());
+    // Edit group modal state
+    const [editingGroup, setEditingGroup] = useState(null);
+    const [editGroupName, setEditGroupName] = useState("");
+    const [editGroupType, setEditGroupType] = useState("recurring");
+    const [editGroupPrice, setEditGroupPrice] = useState("");
+    const [editGroupBillingCycle, setEditGroupBillingCycle] = useState("MONTHLY");
+    // Service templates quick-add state
+    const [showServiceTemplates, setShowServiceTemplates] = useState(false);
+    // Get services that belong to a specific group (via service.optionGroupId)
+    const getServicesForGroup = (groupId) => {
+        return services.filter((s) => s.optionGroupId === groupId);
+    };
+    // Get ungrouped services (services without an optionGroupId)
+    const ungroupedServices = useMemo(() => {
+        return services.filter((s) => !s.optionGroupId);
+    }, [services]);
+    // Categorize option groups based on schema costType
+    const setupGroups = useMemo(() => {
+        return optionGroups.filter((g) => g.costType === "SETUP");
+    }, [optionGroups]);
+    const regularGroups = useMemo(() => {
+        return optionGroups.filter((g) => g.costType !== "SETUP" && !g.isAddOn);
+    }, [optionGroups]);
+    const addonGroups = useMemo(() => {
+        return optionGroups.filter((g) => g.isAddOn);
+    }, [optionGroups]);
+    const handleAddGroup = () => {
+        if (!newGroupName.trim())
+            return;
+        const groupId = generateId();
+        const isSetup = newGroupType === "setup";
+        const isAddOn = newGroupType === "addon";
+        const costType = isSetup ? "SETUP" : "RECURRING";
+        const price = newGroupPrice ? parseFloat(newGroupPrice) : null;
+        dispatch(addOptionGroup({
+            id: groupId,
+            name: newGroupName.trim(),
+            isAddOn,
+            defaultSelected: !isAddOn,
+            costType,
+            billingCycle: isSetup ? "ONE_TIME" : newGroupBillingCycle,
+            price: price ?? undefined,
+            currency: price ? "USD" : undefined,
+            lastModified: new Date().toISOString(),
+        }));
+        setNewGroupName("");
+        setNewGroupType("recurring");
+        setNewGroupPrice("");
+        setNewGroupBillingCycle("MONTHLY");
+        setIsAddingGroup(false);
+        setSelectedGroupId(groupId);
+    };
+    const handleDeleteGroup = (groupId) => {
+        if (!confirm("Are you sure you want to delete this group? Services in this group will become ungrouped."))
+            return;
+        dispatch(deleteOptionGroup({
+            id: groupId,
+            lastModified: new Date().toISOString(),
+        }));
+        if (selectedGroupId === groupId) {
+            setSelectedGroupId(null);
+        }
+    };
+    const handleOpenEditGroup = (group) => {
+        setEditingGroup(group);
+        setEditGroupName(group.name);
+        setEditGroupType(group.costType === "SETUP"
+            ? "setup"
+            : group.isAddOn
+                ? "addon"
+                : "recurring");
+        setEditGroupPrice(group.price?.toString() || "");
+        setEditGroupBillingCycle(group.billingCycle || "MONTHLY");
+    };
+    const handleSaveGroupEdit = () => {
+        if (!editingGroup || !editGroupName.trim())
+            return;
+        const isSetup = editGroupType === "setup";
+        const isAddOn = editGroupType === "addon";
+        const costType = isSetup ? "SETUP" : "RECURRING";
+        const price = editGroupPrice ? parseFloat(editGroupPrice) : null;
+        // Update the option group in the document
+        dispatch(updateOptionGroup({
+            id: editingGroup.id,
+            name: editGroupName.trim(),
+            isAddOn,
+            defaultSelected: !isAddOn,
+            costType,
+            billingCycle: isSetup ? "ONE_TIME" : editGroupBillingCycle,
+            price: price ?? undefined,
+            currency: price ? "USD" : undefined,
+            lastModified: new Date().toISOString(),
+        }));
+        // Update all services in this group to reflect the new setup status
+        const groupServices = getServicesForGroup(editingGroup.id);
+        groupServices.forEach((service) => {
+            if (service.isSetupFormation !== isSetup) {
+                dispatch(updateService({
+                    id: service.id,
+                    isSetupFormation: isSetup,
+                    lastModified: new Date().toISOString(),
+                }));
+            }
+        });
+        setEditingGroup(null);
+    };
+    const handleAddService = () => {
+        if (!newService.title.trim())
+            return;
+        const serviceId = generateId();
+        const now = new Date().toISOString();
+        // Determine if this is a setup service based on the selected group's costType
+        // or the per-service costType toggle (for add-on groups)
+        const isAddonGroup = selectedGroup?.isAddOn;
+        const isSetupFormation = selectedGroup?.costType === "SETUP" ||
+            (isAddonGroup && newServiceCostType === "SETUP");
+        const servicePrice = isAddonGroup && newServicePrice ? parseFloat(newServicePrice) : undefined;
+        // Add the service with optionGroupId directly on the service
+        dispatch(addService({
+            id: serviceId,
+            title: newService.title.trim(),
+            description: newService.description.trim() || undefined,
+            isSetupFormation,
+            costType: isAddonGroup ? newServiceCostType : undefined,
+            price: servicePrice,
+            currency: servicePrice ? "USD" : undefined,
+            optionGroupId: selectedGroupId || undefined,
+            lastModified: now,
+        }));
+        // Create ServiceLevelBindings for each selected tier
+        selectedTierIds.forEach((tierId) => {
+            dispatch(addServiceLevel({
+                serviceLevelId: generateId(),
+                serviceId,
+                tierId,
+                level: "INCLUDED",
+                optionGroupId: selectedGroupId || undefined,
+                lastModified: now,
+            }));
+        });
+        setNewService({ title: "", description: "" });
+        setNewServiceCostType("RECURRING");
+        setNewServicePrice("");
+        setSelectedTierIds(new Set());
+        setIsAddingService(false);
+    };
+    // Quick-add service from template (reduces activation energy)
+    const handleAddFromTemplate = (template) => {
+        if (!selectedGroupId)
+            return;
+        const serviceId = generateId();
+        const now = new Date().toISOString();
+        const isSetupFormation = selectedGroup?.costType === "SETUP";
+        dispatch(addService({
+            id: serviceId,
+            title: template.title,
+            description: template.description,
+            isSetupFormation,
+            optionGroupId: selectedGroupId,
+            lastModified: now,
+        }));
+        // Auto-include in all tiers for convenience (can be changed later)
+        tiers.forEach((tier) => {
+            dispatch(addServiceLevel({
+                serviceLevelId: generateId(),
+                serviceId,
+                tierId: tier.id,
+                level: "INCLUDED",
+                optionGroupId: selectedGroupId,
+                lastModified: now,
+            }));
+        });
+        setShowServiceTemplates(false);
+    };
+    const handleUpdateService = (service, updates) => {
+        dispatch(updateService({
+            id: service.id,
+            ...updates,
+            lastModified: new Date().toISOString(),
+        }));
+    };
+    const handleToggleTier = (serviceId, tierId, isIncluded) => {
+        const now = new Date().toISOString();
+        const tier = tiers.find((t) => t.id === tierId);
+        if (!tier)
+            return;
+        // Find existing service level binding for this service-tier combo
+        const existingBinding = tier.serviceLevels.find((sl) => sl.serviceId === serviceId);
+        if (isIncluded) {
+            // Add or update service level binding
+            if (existingBinding) {
+                // Service level exists, might need to update it if level changed
+                // (for now we just use INCLUDED)
+            }
+            else {
+                // Create new service level binding
+                const service = services.find((s) => s.id === serviceId);
+                dispatch(addServiceLevel({
+                    serviceLevelId: generateId(),
+                    serviceId,
+                    tierId,
+                    level: "INCLUDED",
+                    optionGroupId: service?.optionGroupId || undefined,
+                    lastModified: now,
+                }));
+            }
+        }
+        else {
+            // Remove service level binding
+            if (existingBinding) {
+                dispatch(removeServiceLevel({
+                    serviceLevelId: existingBinding.id,
+                    tierId,
+                    lastModified: now,
+                }));
+            }
+        }
+    };
+    const handleDeleteService = (serviceId) => {
+        if (!confirm("Are you sure you want to delete this service?"))
+            return;
+        dispatch(deleteService({
+            id: serviceId,
+            lastModified: new Date().toISOString(),
+        }));
+    };
+    // Get displayed services based on selection
+    const displayedServices = useMemo(() => {
+        if (selectedGroupId) {
+            return getServicesForGroup(selectedGroupId);
+        }
+        return ungroupedServices;
+    }, [selectedGroupId, services, ungroupedServices]);
+    // Get selected group info
+    const selectedGroup = selectedGroupId
+        ? optionGroups.find((g) => g.id === selectedGroupId)
+        : null;
+    return (_jsxs(_Fragment, { children: [_jsx("style", { children: styles }), editingGroup && (_jsx("div", { className: "catalog__modal-overlay", onClick: () => setEditingGroup(null), children: _jsxs("div", { className: "catalog__modal", onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { className: "catalog__modal-header", children: [_jsx("h3", { className: "catalog__modal-title", children: "Edit Group" }), _jsx("button", { onClick: () => setEditingGroup(null), className: "catalog__modal-close", "aria-label": "Close", children: _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M6 18L18 6M6 6l12 12" }) }) })] }), _jsxs("div", { className: "catalog__modal-body", children: [_jsxs("div", { className: "catalog__field", children: [_jsx("label", { className: "catalog__label", children: "Group Name" }), _jsx("input", { type: "text", value: editGroupName, onChange: (e) => setEditGroupName(e.target.value), className: "catalog__input", autoFocus: true })] }), _jsxs("div", { className: "catalog__type-selector", children: [_jsx("span", { className: "catalog__type-label", children: "Category" }), _jsx("div", { className: "catalog__type-buttons", children: [
+                                                { type: "setup", label: "Setup", color: "amber" },
+                                                {
+                                                    type: "recurring",
+                                                    label: "Recurring",
+                                                    color: "emerald",
+                                                },
+                                                {
+                                                    type: "addon",
+                                                    label: "Add-on",
+                                                    color: "violet",
+                                                },
+                                            ].map(({ type, label, color }) => (_jsx("button", { onClick: () => setEditGroupType(type), className: `catalog__type-btn catalog__type-btn--${color} ${editGroupType === type ? "catalog__type-btn--active" : ""}`, children: label }, type))) })] }), editGroupType !== "setup" && (_jsxs("div", { className: "catalog__field", children: [_jsx("label", { className: "catalog__label", children: "Billing Cycle" }), _jsx("select", { value: editGroupBillingCycle, onChange: (e) => setEditGroupBillingCycle(e.target.value), className: "catalog__select", children: Object.entries(BILLING_CYCLE_SHORT_LABELS).map(([value, label]) => (_jsx("option", { value: value, children: label }, value))) })] })), (editGroupType === "addon" || editGroupType === "setup") && (_jsxs("div", { className: "catalog__fee-field", children: [_jsx("span", { className: "catalog__fee-label", children: editGroupType === "setup"
+                                                ? "One-time Fee"
+                                                : "Add-on Price" }), _jsxs("div", { className: "catalog__fee-input-wrapper", children: [_jsx("span", { className: "catalog__fee-prefix", children: "$" }), _jsx("input", { type: "number", value: editGroupPrice, onChange: (e) => setEditGroupPrice(e.target.value), placeholder: "0", className: "catalog__fee-input", step: "0.01" })] })] }))] }), _jsxs("div", { className: "catalog__modal-footer", children: [_jsx("button", { onClick: () => setEditingGroup(null), className: "catalog__btn catalog__btn--secondary", children: "Cancel" }), _jsx("button", { onClick: handleSaveGroupEdit, disabled: !editGroupName.trim(), className: "catalog__btn catalog__btn--primary", children: "Save Changes" })] })] }) })), _jsxs("div", { className: "catalog", children: [_jsxs("aside", { className: "catalog__sidebar", children: [_jsxs("div", { className: "catalog__sidebar-header", children: [_jsx("h2", { className: "catalog__sidebar-title", children: "Service Groups" }), _jsx("button", { onClick: () => setIsAddingGroup(true), className: "catalog__add-btn", "aria-label": "Add group", children: _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M12 4v16m8-8H4" }) }) })] }), isAddingGroup && (_jsxs("div", { className: "catalog__add-form", children: [_jsx("input", { type: "text", value: newGroupName, onChange: (e) => setNewGroupName(e.target.value), placeholder: "Group name...", className: "catalog__input", autoFocus: true }), _jsxs("div", { className: "catalog__type-selector", children: [_jsx("span", { className: "catalog__type-label", children: "Type" }), _jsx("div", { className: "catalog__type-buttons", children: [
+                                                    { type: "setup", label: "Setup", color: "amber" },
+                                                    {
+                                                        type: "recurring",
+                                                        label: "Recurring",
+                                                        color: "emerald",
+                                                    },
+                                                    {
+                                                        type: "addon",
+                                                        label: "Add-on",
+                                                        color: "violet",
+                                                    },
+                                                ].map(({ type, label, color }) => (_jsx("button", { onClick: () => setNewGroupType(type), className: `catalog__type-btn catalog__type-btn--${color} ${newGroupType === type ? "catalog__type-btn--active" : ""}`, children: label }, type))) })] }), newGroupType !== "setup" && (_jsxs("div", { className: "catalog__field", children: [_jsx("label", { className: "catalog__label", children: "Billing Cycle" }), _jsx("select", { value: newGroupBillingCycle, onChange: (e) => setNewGroupBillingCycle(e.target.value), className: "catalog__select", children: Object.entries(BILLING_CYCLE_SHORT_LABELS).map(([value, label]) => (_jsx("option", { value: value, children: label }, value))) })] })), (newGroupType === "addon" || newGroupType === "setup") && (_jsxs("div", { className: "catalog__fee-field", children: [_jsx("span", { className: "catalog__fee-label", children: newGroupType === "setup" ? "One-time Fee" : "Add-on Price" }), _jsxs("div", { className: "catalog__fee-input-wrapper", children: [_jsx("span", { className: "catalog__fee-prefix", children: "$" }), _jsx("input", { type: "number", value: newGroupPrice, onChange: (e) => setNewGroupPrice(e.target.value), placeholder: "0", className: "catalog__fee-input", step: "0.01" })] })] })), _jsxs("div", { className: "catalog__form-actions", children: [_jsx("button", { onClick: handleAddGroup, disabled: !newGroupName.trim(), className: "catalog__btn catalog__btn--primary", children: "Add Group" }), _jsx("button", { onClick: () => {
+                                                    setIsAddingGroup(false);
+                                                    setNewGroupName("");
+                                                    setNewGroupType("recurring");
+                                                    setNewGroupPrice("");
+                                                }, className: "catalog__btn catalog__btn--secondary", children: "Cancel" })] })] })), _jsxs("div", { className: "catalog__groups", children: [setupGroups.length > 0 && (_jsx(GroupSection, { title: "Setup & Formation", color: "amber", groups: setupGroups, selectedGroupId: selectedGroupId, getServicesForGroup: getServicesForGroup, onSelect: setSelectedGroupId, onEdit: handleOpenEditGroup, onDelete: handleDeleteGroup })), regularGroups.length > 0 && (_jsx(GroupSection, { title: "Recurring Services", color: "emerald", groups: regularGroups, selectedGroupId: selectedGroupId, getServicesForGroup: getServicesForGroup, onSelect: setSelectedGroupId, onEdit: handleOpenEditGroup, onDelete: handleDeleteGroup })), addonGroups.length > 0 && (_jsx(GroupSection, { title: "Optional Add-ons", color: "violet", groups: addonGroups, selectedGroupId: selectedGroupId, getServicesForGroup: getServicesForGroup, onSelect: setSelectedGroupId, onEdit: handleOpenEditGroup, onDelete: handleDeleteGroup })), ungroupedServices.length > 0 && (_jsx("div", { className: "catalog__section", children: _jsxs("button", { onClick: () => setSelectedGroupId(null), className: `catalog__ungrouped-btn ${selectedGroupId === null ? "catalog__ungrouped-btn--active" : ""}`, children: [_jsx("span", { className: "catalog__ungrouped-name", children: "Ungrouped Services" }), _jsxs("span", { className: "catalog__ungrouped-count", children: [ungroupedServices.length, " services"] })] }) })), optionGroups.length === 0 && ungroupedServices.length === 0 && (_jsxs("div", { className: "catalog__empty", children: [_jsx("p", { className: "catalog__empty-title", children: "No service groups yet" }), _jsx("p", { className: "catalog__empty-text", children: "Click + to create a group" })] }))] })] }), _jsxs("main", { className: "catalog__main", children: [_jsxs("div", { className: "catalog__main-header", children: [_jsxs("div", { className: "catalog__main-info", children: [_jsx("h2", { className: "catalog__main-title", children: selectedGroup?.name || "Ungrouped Services" }), _jsx("p", { className: "catalog__main-subtitle", children: selectedGroup?.costType === "SETUP" ? (_jsxs("span", { className: "catalog__main-meta", children: [_jsx("span", { className: "catalog__badge catalog__badge--amber", children: "Setup & Formation" }), selectedGroup.price != null
+                                                            ? `One-time fee: $${selectedGroup.price}`
+                                                            : "Included in tier price"] })) : selectedGroup?.isAddOn ? (_jsxs("span", { className: "catalog__main-meta", children: ["Optional add-on group", selectedGroup.billingCycle && (_jsx("span", { className: "catalog__badge catalog__badge--violet", style: { marginLeft: 8 }, children: BILLING_CYCLE_SHORT_LABELS[selectedGroup.billingCycle] })), selectedGroup.price != null && (_jsxs("span", { className: "catalog__fee-display", children: ["$", selectedGroup.price] }))] })) : selectedGroup ? (_jsxs("span", { className: "catalog__main-meta", children: ["Included in subscription", selectedGroup.billingCycle && (_jsx("span", { className: "catalog__badge catalog__badge--emerald", style: { marginLeft: 8 }, children: BILLING_CYCLE_SHORT_LABELS[selectedGroup.billingCycle] }))] })) : ("Services not assigned to any group") })] }), selectedGroupId && (_jsxs("div", { className: "catalog__header-actions", children: [_jsxs("button", { onClick: () => setShowServiceTemplates(!showServiceTemplates), className: "catalog__btn catalog__btn--secondary", title: "Quick-add from templates", children: [_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z" }) }), "Templates"] }), _jsxs("button", { onClick: () => setIsAddingService(true), className: "catalog__btn catalog__btn--primary", children: [_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M12 4v16m8-8H4" }) }), "Add Service"] })] }))] }), showServiceTemplates && selectedGroupId && (_jsxs("div", { className: "catalog__templates-panel", children: [_jsxs("div", { className: "catalog__templates-header", children: [_jsx("h3", { className: "catalog__templates-title", children: "Quick Add from Templates" }), _jsx("button", { onClick: () => setShowServiceTemplates(false), className: "catalog__templates-close", children: _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M6 18L18 6M6 6l12 12" }) }) })] }), _jsx("p", { className: "catalog__templates-hint", children: "Click any template to instantly add it to this group. Services will be included in all tiers by default." }), _jsx("div", { className: "catalog__templates-grid", children: Object.entries(SERVICE_TEMPLATES).map(([category, templates]) => (_jsxs("div", { className: "catalog__template-category", children: [_jsx("h4", { className: "catalog__template-category-title", children: category }), _jsx("div", { className: "catalog__template-items", children: templates.map((template, idx) => {
+                                                        // Check if service already exists
+                                                        const alreadyExists = services.some((s) => s.title.toLowerCase() ===
+                                                            template.title.toLowerCase());
+                                                        return (_jsxs("button", { onClick: () => !alreadyExists &&
+                                                                handleAddFromTemplate(template), disabled: alreadyExists, className: `catalog__template-item ${alreadyExists ? "catalog__template-item--exists" : ""}`, children: [_jsx("span", { className: "catalog__template-icon", children: template.icon }), _jsxs("div", { className: "catalog__template-info", children: [_jsx("span", { className: "catalog__template-name", children: template.title }), _jsx("span", { className: "catalog__template-desc", children: template.description })] }), alreadyExists && (_jsx("span", { className: "catalog__template-badge", children: "Added" }))] }, idx));
+                                                    }) })] }, category))) })] })), !selectedGroupId && (_jsxs("div", { className: "catalog__notice catalog__notice--info", children: [_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("path", { d: "M12 16v-4m0-4h.01" })] }), _jsx("p", { children: "Select a service group from the sidebar to add services. Services must belong to a group to be properly managed." })] })), isAddingService && selectedGroupId && (_jsxs("div", { className: "catalog__add-service-form", children: [_jsxs("div", { className: "catalog__field", children: [_jsx("label", { className: "catalog__label", children: "Service Name" }), _jsx("input", { type: "text", value: newService.title, onChange: (e) => setNewService({ ...newService, title: e.target.value }), placeholder: "Enter service name...", className: "catalog__input", autoFocus: true })] }), _jsxs("div", { className: "catalog__field", children: [_jsx("label", { className: "catalog__label", children: "Description" }), _jsx("textarea", { value: newService.description, onChange: (e) => setNewService({
+                                                    ...newService,
+                                                    description: e.target.value,
+                                                }), placeholder: "Enter description...", rows: 2, className: "catalog__textarea" })] }), selectedGroup?.isAddOn && (_jsxs("div", { className: "catalog__field", children: [_jsx("label", { className: "catalog__label", children: "Service Type" }), _jsx("div", { className: "catalog__type-options", children: [
+                                                    {
+                                                        type: "RECURRING",
+                                                        label: "Recurring",
+                                                        color: "emerald",
+                                                    },
+                                                    {
+                                                        type: "SETUP",
+                                                        label: "One-time Setup",
+                                                        color: "amber",
+                                                    },
+                                                ].map(({ type, label, color }) => (_jsx("button", { type: "button", onClick: () => setNewServiceCostType(type), className: `catalog__type-btn catalog__type-btn--${color} ${newServiceCostType === type ? "catalog__type-btn--active" : ""}`, children: label }, type))) }), newServiceCostType === "SETUP" && (_jsxs("div", { className: "catalog__fee-field", style: { marginTop: 8 }, children: [_jsx("span", { className: "catalog__fee-label", children: "One-time Fee" }), _jsxs("div", { className: "catalog__fee-input-wrapper", children: [_jsx("span", { className: "catalog__fee-prefix", children: "$" }), _jsx("input", { type: "number", value: newServicePrice, onChange: (e) => setNewServicePrice(e.target.value), placeholder: "0", className: "catalog__fee-input", step: "0.01" })] })] }))] })), tiers.length > 0 && (_jsxs("div", { className: "catalog__field", children: [_jsx("label", { className: "catalog__label", children: "Include in Tiers" }), _jsx("div", { className: "catalog__tier-grid", children: tiers.map((tier) => {
+                                                    const isSelected = selectedTierIds.has(tier.id);
+                                                    return (_jsxs("label", { className: `catalog__tier-option ${isSelected ? "catalog__tier-option--selected" : ""}`, children: [_jsx("input", { type: "checkbox", checked: isSelected, onChange: (e) => {
+                                                                    const newSet = new Set(selectedTierIds);
+                                                                    if (e.target.checked) {
+                                                                        newSet.add(tier.id);
+                                                                    }
+                                                                    else {
+                                                                        newSet.delete(tier.id);
+                                                                    }
+                                                                    setSelectedTierIds(newSet);
+                                                                }, className: "catalog__tier-checkbox" }), _jsx("span", { className: "catalog__tier-name", children: tier.name }), tier.pricing.amount !== null && (_jsxs("span", { className: "catalog__tier-price", children: ["$", tier.pricing.amount] }))] }, tier.id));
+                                                }) }), selectedTierIds.size === 0 && (_jsx("p", { className: "catalog__tier-hint", children: "Select at least one tier to include this service" }))] })), tiers.length === 0 && (_jsxs("div", { className: "catalog__notice catalog__notice--warning", children: [_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", children: _jsx("path", { d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" }) }), _jsx("p", { children: "No tiers defined yet. Define tiers in the Tier Definition tab first to specify which tiers include this service." })] })), _jsxs("div", { className: "catalog__form-actions", children: [_jsx("button", { onClick: handleAddService, disabled: !newService.title.trim(), className: "catalog__btn catalog__btn--primary", children: "Add Service" }), _jsx("button", { onClick: () => {
+                                                    setIsAddingService(false);
+                                                    setNewService({ title: "", description: "" });
+                                                    setNewServiceCostType("RECURRING");
+                                                    setNewServicePrice("");
+                                                    setSelectedTierIds(new Set());
+                                                }, className: "catalog__btn catalog__btn--secondary", children: "Cancel" })] })] })), displayedServices.length === 0 ? (_jsxs("div", { className: "catalog__services-empty", children: [_jsx("div", { className: "catalog__services-empty-icon", children: _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: _jsx("path", { d: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" }) }) }), _jsx("h3", { className: "catalog__services-empty-title", children: "No services in this group" }), _jsx("p", { className: "catalog__services-empty-text", children: selectedGroupId
+                                            ? 'Click "Add Service" to create a new service.'
+                                            : "Select a group to manage its services." })] })) : (_jsx("div", { className: "catalog__services-list", children: displayedServices.map((service) => (_jsx(ServiceCard, { service: service, tiers: tiers, optionGroups: optionGroups, onUpdate: handleUpdateService, onDelete: () => handleDeleteService(service.id), onToggleTier: handleToggleTier }, service.id))) }))] })] })] }));
+}
+function GroupSection({ title, color, groups, selectedGroupId, getServicesForGroup, onSelect, onEdit, onDelete, }) {
+    return (_jsxs("div", { className: "catalog__section", children: [_jsxs("div", { className: "catalog__section-header", children: [_jsx("span", { className: `catalog__section-dot catalog__section-dot--${color}` }), _jsx("span", { className: "catalog__section-title", children: title })] }), _jsx("div", { className: "catalog__section-items", children: groups.map((group) => (_jsx(GroupButton, { group: group, serviceCount: getServicesForGroup(group.id).length, isSelected: selectedGroupId === group.id, onSelect: () => onSelect(group.id), onEdit: () => onEdit(group), onDelete: () => onDelete(group.id), color: color }, group.id))) })] }));
+}
+function GroupButton({ group, serviceCount, isSelected, onSelect, onEdit, onDelete, color, }) {
+    const [isHovered, setIsHovered] = useState(false);
+    const isSetup = group.costType === "SETUP";
+    return (_jsxs("div", { className: "catalog__group-wrapper", onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [_jsxs("button", { onClick: onSelect, className: `catalog__group-btn catalog__group-btn--${color} ${isSelected ? "catalog__group-btn--active" : ""}`, children: [_jsxs("div", { className: "catalog__group-info", children: [_jsx("span", { className: "catalog__group-name", children: group.name }), isSetup && (_jsx("span", { className: "catalog__group-tag catalog__group-tag--amber", children: "SETUP" })), group.isAddOn && (_jsx("span", { className: "catalog__group-tag catalog__group-tag--violet", children: "OPTIONAL" })), group.billingCycle && !isSetup && (_jsx("span", { className: "catalog__group-tag catalog__group-tag--emerald", children: BILLING_CYCLE_SHORT_LABELS[group.billingCycle] }))] }), _jsxs("div", { className: "catalog__group-meta", children: [_jsxs("span", { children: [serviceCount, " services"] }), (group.isAddOn || group.costType === "SETUP") &&
+                                group.price != null && (_jsxs("span", { className: "catalog__group-fee", children: ["$", group.price] }))] })] }), isHovered && (_jsxs("div", { className: "catalog__group-actions", children: [_jsx("button", { onClick: (e) => {
+                            e.stopPropagation();
+                            onEdit();
+                        }, className: "catalog__group-action catalog__group-action--edit", "aria-label": "Edit group", children: _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M17 3a2.85 2.85 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z" }) }) }), _jsx("button", { onClick: (e) => {
+                            e.stopPropagation();
+                            onDelete();
+                        }, className: "catalog__group-action catalog__group-action--delete", "aria-label": "Delete group", children: _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2" }) }) })] }))] }));
+}
+function ServiceCard({ service, tiers, optionGroups, onUpdate, onDelete, onToggleTier, }) {
+    const [localTitle, setLocalTitle] = useState(service.title);
+    const [localDescription, setLocalDescription] = useState(service.description || "");
+    const [isExpanded, setIsExpanded] = useState(false);
+    // Sync local state when service changes
+    useEffect(() => {
+        setLocalTitle(service.title);
+        setLocalDescription(service.description || "");
+    }, [service.title, service.description]);
+    // Get tiers this service is included in
+    const includedTierIds = useMemo(() => {
+        const ids = new Set();
+        tiers.forEach((tier) => {
+            const hasService = tier.serviceLevels.some((sl) => sl.serviceId === service.id && sl.level === "INCLUDED");
+            if (hasService) {
+                ids.add(tier.id);
+            }
+        });
+        return ids;
+    }, [tiers, service.id]);
+    return (_jsxs("div", { className: `catalog__service-card ${service.isSetupFormation ? "catalog__service-card--setup" : ""} ${isExpanded ? "catalog__service-card--expanded" : ""}`, children: [_jsxs("div", { className: "catalog__service-main", children: [_jsxs("div", { className: "catalog__service-content", children: [_jsxs("div", { className: "catalog__service-header", children: [_jsx("input", { type: "text", value: localTitle, onChange: (e) => setLocalTitle(e.target.value), onBlur: () => {
+                                            if (localTitle !== service.title && localTitle.trim()) {
+                                                onUpdate(service, { title: localTitle.trim() });
+                                            }
+                                        }, className: "catalog__service-title-input" }), service.isSetupFormation && (_jsx("span", { className: "catalog__badge catalog__badge--amber", children: "Setup Service" })), service.costType === "SETUP" && service.price != null && (_jsxs("span", { className: "catalog__badge catalog__badge--slate", children: ["$", service.price] }))] }), _jsx("textarea", { value: localDescription, onChange: (e) => setLocalDescription(e.target.value), onBlur: () => {
+                                    if (localDescription !== (service.description || "")) {
+                                        onUpdate(service, { description: localDescription });
+                                    }
+                                }, placeholder: "Add a description...", rows: 2, className: "catalog__service-desc-input" }), tiers.length > 0 && (_jsx("div", { className: "catalog__service-tiers-preview", children: tiers.map((tier) => (_jsx("span", { className: `catalog__service-tier-badge ${includedTierIds.has(tier.id) ? "catalog__service-tier-badge--included" : "catalog__service-tier-badge--excluded"}`, children: tier.name }, tier.id))) }))] }), _jsxs("div", { className: "catalog__service-actions", children: [_jsx("button", { onClick: () => setIsExpanded(!isExpanded), className: "catalog__service-expand", "aria-label": isExpanded ? "Collapse" : "Expand", children: _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", style: { transform: isExpanded ? "rotate(180deg)" : "none" }, children: _jsx("path", { d: "M6 9l6 6 6-6" }) }) }), _jsx("button", { onClick: onDelete, className: "catalog__service-delete", "aria-label": "Delete service", children: _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" }) }) })] })] }), isExpanded && (_jsxs("div", { className: "catalog__service-expanded", children: [_jsxs("div", { className: "catalog__service-section", children: [_jsx("label", { className: "catalog__label", children: "Assign to Group" }), _jsxs("select", { value: service.optionGroupId || "", onChange: (e) => {
+                                    const newGroupId = e.target.value || null;
+                                    const targetGroup = newGroupId
+                                        ? optionGroups.find((g) => g.id === newGroupId)
+                                        : null;
+                                    const isSetupGroup = targetGroup?.costType === "SETUP";
+                                    onUpdate(service, {
+                                        optionGroupId: newGroupId,
+                                        isSetupFormation: isSetupGroup,
+                                    });
+                                }, className: "catalog__select", children: [_jsx("option", { value: "", children: "No group (ungrouped)" }), optionGroups.map((group) => {
+                                        const label = group.costType === "SETUP"
+                                            ? `${group.name} (Setup)`
+                                            : group.isAddOn
+                                                ? `${group.name} (Add-on)`
+                                                : `${group.name} (Recurring)`;
+                                        return (_jsx("option", { value: group.id, children: label }, group.id));
+                                    })] })] }), (() => {
+                        const serviceGroup = service.optionGroupId
+                            ? optionGroups.find((g) => g.id === service.optionGroupId)
+                            : null;
+                        if (!serviceGroup?.isAddOn)
+                            return null;
+                        return (_jsxs("div", { className: "catalog__service-section", children: [_jsx("label", { className: "catalog__label", children: "Service Type" }), _jsx("div", { className: "catalog__type-options", children: [
+                                        {
+                                            type: "RECURRING",
+                                            label: "Recurring",
+                                            color: "emerald",
+                                        },
+                                        {
+                                            type: "SETUP",
+                                            label: "One-time Setup",
+                                            color: "amber",
+                                        },
+                                    ].map(({ type, label, color }) => (_jsx("button", { type: "button", onClick: () => onUpdate(service, {
+                                            costType: type,
+                                            isSetupFormation: type === "SETUP",
+                                        }), className: `catalog__type-btn catalog__type-btn--${color} ${(service.costType || "RECURRING") === type ? "catalog__type-btn--active" : ""}`, children: label }, type))) }), service.costType === "SETUP" && (_jsxs("div", { className: "catalog__fee-field", style: { marginTop: 8 }, children: [_jsx("span", { className: "catalog__fee-label", children: "One-time Fee" }), _jsxs("div", { className: "catalog__fee-input-wrapper", children: [_jsx("span", { className: "catalog__fee-prefix", children: "$" }), _jsx("input", { type: "number", defaultValue: service.price?.toString() || "", onBlur: (e) => {
+                                                        const val = e.target.value
+                                                            ? parseFloat(e.target.value)
+                                                            : null;
+                                                        onUpdate(service, {
+                                                            price: val,
+                                                            currency: val ? "USD" : null,
+                                                        });
+                                                    }, placeholder: "0", className: "catalog__fee-input", step: "0.01" })] })] }))] }));
+                    })(), tiers.length > 0 && (_jsxs("div", { className: "catalog__service-section", children: [_jsx("label", { className: "catalog__label", children: "Include in Tiers" }), _jsx("div", { className: "catalog__tier-grid catalog__tier-grid--compact", children: tiers.map((tier) => {
+                                    const isIncluded = includedTierIds.has(tier.id);
+                                    return (_jsxs("label", { className: `catalog__tier-option ${isIncluded ? "catalog__tier-option--selected" : ""}`, children: [_jsx("input", { type: "checkbox", checked: isIncluded, onChange: (e) => {
+                                                    onToggleTier(service.id, tier.id, e.target.checked);
+                                                }, className: "catalog__tier-checkbox" }), _jsx("span", { className: "catalog__tier-name", children: tier.name }), tier.pricing.amount !== null && (_jsxs("span", { className: "catalog__tier-price", children: ["$", tier.pricing.amount] }))] }, tier.id));
+                                }) })] }))] }))] }));
+}
+const styles = `
+  .catalog {
+    display: flex;
+    gap: 24px;
+    min-height: 600px;
+  }
+
+  /* Sidebar */
+  .catalog__sidebar {
+    width: 320px;
+    flex-shrink: 0;
+    background: white;
+    border-radius: var(--so-radius-lg);
+    box-shadow: var(--so-shadow-md);
+    border: 1px solid var(--so-slate-100);
+    padding: 20px;
+    animation: so-scale-in var(--so-transition-slow) ease-out;
+  }
+
+  .catalog__sidebar-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 16px;
+  }
+
+  .catalog__sidebar-title {
+    font-size: 1.0625rem;
+    font-weight: 600;
+    color: var(--so-slate-800);
+    margin: 0;
+    letter-spacing: -0.01em;
+  }
+
+  .catalog__add-btn {
+    width: 32px;
+    height: 32px;
+    border-radius: var(--so-radius-md);
+    background: var(--so-slate-100);
+    border: none;
+    color: var(--so-slate-500);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all var(--so-transition-fast);
+  }
+
+  .catalog__add-btn:hover {
+    background: var(--so-violet-100);
+    color: var(--so-violet-600);
+  }
+
+  .catalog__add-btn svg {
+    width: 18px;
+    height: 18px;
+  }
+
+  /* Add Group Form */
+  .catalog__add-form {
+    background: var(--so-slate-50);
+    border-radius: var(--so-radius-md);
+    padding: 16px;
+    margin-bottom: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    animation: so-scale-in var(--so-transition-fast) ease-out;
+  }
+
+  .catalog__input {
+    width: 100%;
+    padding: 10px 12px;
+    font-family: var(--so-font-sans);
+    font-size: 0.875rem;
+    color: var(--so-slate-800);
+    background: white;
+    border: 1.5px solid var(--so-slate-200);
+    border-radius: var(--so-radius-sm);
+    transition: all var(--so-transition-fast);
+  }
+
+  .catalog__input:focus {
+    outline: none;
+    border-color: var(--so-violet-500);
+    box-shadow: 0 0 0 2px var(--so-violet-100);
+  }
+
+  .catalog__type-selector {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .catalog__type-label,
+  .catalog__fee-label {
+    font-size: 0.6875rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--so-slate-500);
+  }
+
+  .catalog__type-buttons {
+    display: flex;
+    gap: 6px;
+  }
+
+  .catalog__type-btn {
+    flex: 1;
+    padding: 8px 10px;
+    font-family: var(--so-font-sans);
+    font-size: 0.75rem;
+    font-weight: 600;
+    border-radius: var(--so-radius-sm);
+    border: 1.5px solid var(--so-slate-200);
+    background: white;
+    color: var(--so-slate-600);
+    cursor: pointer;
+    transition: all var(--so-transition-fast);
+  }
+
+  .catalog__type-btn:hover {
+    border-color: var(--so-slate-300);
+  }
+
+  .catalog__type-btn--amber.catalog__type-btn--active {
+    border-color: var(--so-amber-500);
+    background: var(--so-amber-50);
+    color: var(--so-amber-700);
+  }
+
+  .catalog__type-btn--emerald.catalog__type-btn--active {
+    border-color: var(--so-emerald-500);
+    background: var(--so-emerald-50);
+    color: var(--so-emerald-700);
+  }
+
+  .catalog__type-btn--violet.catalog__type-btn--active {
+    border-color: var(--so-violet-500);
+    background: var(--so-violet-50);
+    color: var(--so-violet-700);
+  }
+
+  .catalog__fee-field {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+
+  .catalog__fee-input-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .catalog__fee-prefix {
+    font-size: 0.875rem;
+    color: var(--so-slate-500);
+  }
+
+  .catalog__fee-input {
+    flex: 1;
+    padding: 8px 10px;
+    font-family: var(--so-font-sans);
+    font-size: 0.875rem;
+    color: var(--so-slate-800);
+    background: white;
+    border: 1.5px solid var(--so-slate-200);
+    border-radius: var(--so-radius-sm);
+  }
+
+  .catalog__fee-input:focus {
+    outline: none;
+    border-color: var(--so-violet-500);
+    box-shadow: 0 0 0 2px var(--so-violet-100);
+  }
+
+  .catalog__form-actions {
+    display: flex;
+    gap: 8px;
+  }
+
+  .catalog__btn {
+    flex: 1;
+    padding: 10px 16px;
+    font-family: var(--so-font-sans);
+    font-size: 0.8125rem;
+    font-weight: 600;
+    border-radius: var(--so-radius-md);
+    border: none;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    transition: all var(--so-transition-fast);
+  }
+
+  .catalog__btn svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  .catalog__btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .catalog__btn--primary {
+    background: linear-gradient(135deg, var(--so-violet-600) 0%, var(--so-violet-700) 100%);
+    color: white;
+    box-shadow: 0 2px 6px rgba(124, 58, 237, 0.25);
+  }
+
+  .catalog__btn--primary:hover:not(:disabled) {
+    transform: translateY(-1px);
+    box-shadow: 0 3px 10px rgba(124, 58, 237, 0.35);
+  }
+
+  .catalog__btn--secondary {
+    background: var(--so-slate-100);
+    color: var(--so-slate-700);
+  }
+
+  .catalog__btn--secondary:hover:not(:disabled) {
+    background: var(--so-slate-200);
+  }
+
+  /* Group Sections */
+  .catalog__groups {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+  }
+
+  .catalog__section {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .catalog__section-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .catalog__section-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+  }
+
+  .catalog__section-dot--amber { background: var(--so-amber-500); }
+  .catalog__section-dot--emerald { background: var(--so-emerald-500); }
+  .catalog__section-dot--violet { background: var(--so-violet-500); }
+
+  .catalog__section-title {
+    font-size: 0.6875rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--so-slate-500);
+  }
+
+  .catalog__section-items {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  /* Group Button */
+  .catalog__group-wrapper {
+    position: relative;
+  }
+
+  .catalog__group-btn {
+    width: 100%;
+    padding: 10px 14px;
+    background: transparent;
+    border: none;
+    border-radius: var(--so-radius-md);
+    cursor: pointer;
+    text-align: left;
+    transition: all var(--so-transition-fast);
+  }
+
+  .catalog__group-btn:hover {
+    background: var(--so-slate-50);
+  }
+
+  .catalog__group-btn--active {
+    border-left: 3px solid;
+  }
+
+  .catalog__group-btn--amber.catalog__group-btn--active {
+    background: var(--so-amber-50);
+    border-color: var(--so-amber-500);
+  }
+
+  .catalog__group-btn--emerald.catalog__group-btn--active {
+    background: var(--so-emerald-50);
+    border-color: var(--so-emerald-500);
+  }
+
+  .catalog__group-btn--violet.catalog__group-btn--active {
+    background: var(--so-violet-50);
+    border-color: var(--so-violet-500);
+  }
+
+  .catalog__group-info {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    flex-wrap: wrap;
+  }
+
+  .catalog__group-name {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--so-slate-800);
+  }
+
+  .catalog__group-tag {
+    padding: 2px 6px;
+    font-size: 0.5625rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    border-radius: 4px;
+  }
+
+  .catalog__group-tag--amber {
+    background: var(--so-amber-100);
+    color: var(--so-amber-700);
+  }
+
+  .catalog__group-tag--violet {
+    background: var(--so-violet-100);
+    color: var(--so-violet-700);
+  }
+
+  .catalog__group-tag--emerald {
+    background: var(--so-emerald-100);
+    color: var(--so-emerald-700);
+  }
+
+  .catalog__group-meta {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 0.75rem;
+    color: var(--so-slate-500);
+    margin-top: 2px;
+  }
+
+  .catalog__group-fee {
+    color: var(--so-amber-600);
+  }
+
+  /* Ungrouped Button */
+  .catalog__ungrouped-btn {
+    width: 100%;
+    padding: 10px 14px;
+    background: transparent;
+    border: none;
+    border-top: 1px solid var(--so-slate-200);
+    border-radius: 0;
+    cursor: pointer;
+    text-align: left;
+    transition: all var(--so-transition-fast);
+    margin-top: 8px;
+    padding-top: 18px;
+  }
+
+  .catalog__ungrouped-btn:hover {
+    background: var(--so-slate-50);
+  }
+
+  .catalog__ungrouped-btn--active {
+    background: var(--so-slate-100);
+    border-left: 3px solid var(--so-slate-500);
+    border-radius: var(--so-radius-md);
+  }
+
+  .catalog__ungrouped-name {
+    display: block;
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--so-slate-700);
+  }
+
+  .catalog__ungrouped-count {
+    display: block;
+    font-size: 0.75rem;
+    color: var(--so-slate-400);
+    margin-top: 2px;
+  }
+
+  /* Empty State */
+  .catalog__empty {
+    text-align: center;
+    padding: 32px 16px;
+    color: var(--so-slate-500);
+  }
+
+  .catalog__empty-title {
+    font-size: 0.875rem;
+    font-weight: 500;
+    margin: 0 0 4px;
+  }
+
+  .catalog__empty-text {
+    font-size: 0.75rem;
+    margin: 0;
+    color: var(--so-slate-400);
+  }
+
+  /* Main Content */
+  .catalog__main {
+    flex: 1;
+    background: white;
+    border-radius: var(--so-radius-lg);
+    box-shadow: var(--so-shadow-md);
+    border: 1px solid var(--so-slate-100);
+    padding: 24px;
+    animation: so-scale-in var(--so-transition-slow) ease-out;
+    animation-delay: 50ms;
+  }
+
+  .catalog__main-header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 16px;
+    margin-bottom: 24px;
+  }
+
+  .catalog__main-info {
+    flex: 1;
+  }
+
+  .catalog__main-title {
+    font-size: 1.375rem;
+    font-weight: 600;
+    color: var(--so-slate-800);
+    margin: 0 0 6px;
+    letter-spacing: -0.02em;
+  }
+
+  .catalog__main-subtitle {
+    font-size: 0.875rem;
+    color: var(--so-slate-500);
+    margin: 0;
+  }
+
+  .catalog__main-meta {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+
+  .catalog__fee-display {
+    color: var(--so-amber-600);
+  }
+
+  .catalog__badge {
+    display: inline-flex;
+    align-items: center;
+    padding: 4px 10px;
+    font-size: 0.6875rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    border-radius: 100px;
+  }
+
+  .catalog__badge--amber {
+    background: var(--so-amber-100);
+    color: var(--so-amber-700);
+  }
+
+  /* Notice */
+  .catalog__notice {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    padding: 14px 16px;
+    border-radius: var(--so-radius-md);
+    margin-bottom: 20px;
+  }
+
+  .catalog__notice svg {
+    width: 20px;
+    height: 20px;
+    flex-shrink: 0;
+    margin-top: 1px;
+  }
+
+  .catalog__notice p {
+    font-size: 0.8125rem;
+    margin: 0;
+    line-height: 1.5;
+  }
+
+  .catalog__notice--info {
+    background: var(--so-sky-50);
+    border: 1px solid var(--so-sky-200);
+    color: var(--so-sky-700);
+  }
+
+  .catalog__notice--warning {
+    background: var(--so-amber-50);
+    border: 1px solid var(--so-amber-200);
+    color: var(--so-amber-700);
+  }
+
+  /* Add Service Form */
+  .catalog__add-service-form {
+    background: var(--so-slate-50);
+    border-radius: var(--so-radius-md);
+    border: 1px solid var(--so-slate-200);
+    padding: 20px;
+    margin-bottom: 24px;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    animation: so-scale-in var(--so-transition-fast) ease-out;
+  }
+
+  .catalog__field {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+
+  .catalog__label {
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--so-slate-500);
+  }
+
+  .catalog__textarea {
+    width: 100%;
+    padding: 10px 12px;
+    font-family: var(--so-font-sans);
+    font-size: 0.875rem;
+    color: var(--so-slate-800);
+    background: white;
+    border: 1.5px solid var(--so-slate-200);
+    border-radius: var(--so-radius-sm);
+    resize: none;
+    transition: all var(--so-transition-fast);
+  }
+
+  .catalog__textarea:focus {
+    outline: none;
+    border-color: var(--so-violet-500);
+    box-shadow: 0 0 0 2px var(--so-violet-100);
+  }
+
+  /* Services Empty State */
+  .catalog__services-empty {
+    text-align: center;
+    padding: 60px 24px;
+  }
+
+  .catalog__services-empty-icon {
+    width: 56px;
+    height: 56px;
+    margin: 0 auto 16px;
+    color: var(--so-slate-300);
+  }
+
+  .catalog__services-empty-icon svg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .catalog__services-empty-title {
+    font-size: 1.0625rem;
+    font-weight: 600;
+    color: var(--so-slate-700);
+    margin: 0 0 6px;
+  }
+
+  .catalog__services-empty-text {
+    font-size: 0.875rem;
+    color: var(--so-slate-500);
+    margin: 0;
+  }
+
+  /* Services List */
+  .catalog__services-list {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  /* Service Card */
+  .catalog__service-card {
+    display: flex;
+    gap: 16px;
+    padding: 18px;
+    background: white;
+    border: 1.5px solid var(--so-slate-200);
+    border-radius: var(--so-radius-md);
+    transition: all var(--so-transition-fast);
+  }
+
+  .catalog__service-card:hover {
+    border-color: var(--so-slate-300);
+    box-shadow: var(--so-shadow-sm);
+  }
+
+  .catalog__service-card--setup {
+    background: var(--so-amber-50);
+    border-color: var(--so-amber-200);
+  }
+
+  .catalog__service-card--setup:hover {
+    border-color: var(--so-amber-300);
+  }
+
+  .catalog__service-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .catalog__service-header {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+
+  .catalog__service-title-input {
+    flex: 1;
+    font-family: var(--so-font-sans);
+    font-size: 1rem;
+    font-weight: 500;
+    color: var(--so-slate-800);
+    background: transparent;
+    border: none;
+    border-bottom: 1.5px solid transparent;
+    padding: 0 0 2px;
+    transition: all var(--so-transition-fast);
+  }
+
+  .catalog__service-title-input:hover {
+    border-color: var(--so-slate-300);
+  }
+
+  .catalog__service-title-input:focus {
+    outline: none;
+    border-color: var(--so-violet-500);
+  }
+
+  .catalog__service-desc-input {
+    width: 100%;
+    padding: 10px 12px;
+    font-family: var(--so-font-sans);
+    font-size: 0.8125rem;
+    color: var(--so-slate-600);
+    background: var(--so-slate-50);
+    border: 1px solid var(--so-slate-200);
+    border-radius: var(--so-radius-sm);
+    resize: none;
+    transition: all var(--so-transition-fast);
+  }
+
+  .catalog__service-desc-input:hover {
+    background: white;
+    border-color: var(--so-slate-300);
+  }
+
+  .catalog__service-desc-input:focus {
+    outline: none;
+    background: white;
+    border-color: var(--so-violet-500);
+    box-shadow: 0 0 0 2px var(--so-violet-100);
+  }
+
+  .catalog__service-delete {
+    width: 36px;
+    height: 36px;
+    flex-shrink: 0;
+    border-radius: var(--so-radius-md);
+    background: transparent;
+    border: none;
+    color: var(--so-slate-400);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all var(--so-transition-fast);
+  }
+
+  .catalog__service-delete:hover {
+    background: var(--so-rose-100);
+    color: var(--so-rose-600);
+  }
+
+  .catalog__service-delete svg {
+    width: 18px;
+    height: 18px;
+  }
+
+  /* Tier Selection */
+  .catalog__tier-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+    gap: 10px;
+  }
+
+  .catalog__tier-option {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 12px 14px;
+    background: white;
+    border: 1.5px solid var(--so-slate-200);
+    border-radius: var(--so-radius-md);
+    cursor: pointer;
+    transition: all var(--so-transition-fast);
+  }
+
+  .catalog__tier-option:hover {
+    border-color: var(--so-slate-300);
+    background: var(--so-slate-50);
+  }
+
+  .catalog__tier-option--selected {
+    border-color: var(--so-emerald-500);
+    background: var(--so-emerald-50);
+  }
+
+  .catalog__tier-option--selected:hover {
+    border-color: var(--so-emerald-600);
+    background: var(--so-emerald-50);
+  }
+
+  .catalog__tier-checkbox {
+    width: 18px;
+    height: 18px;
+    flex-shrink: 0;
+    accent-color: var(--so-emerald-600);
+    cursor: pointer;
+  }
+
+  .catalog__tier-name {
+    flex: 1;
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--so-slate-800);
+  }
+
+  .catalog__tier-price {
+    font-size: 0.75rem;
+    font-weight: 500;
+    color: var(--so-slate-500);
+    white-space: nowrap;
+  }
+
+  .catalog__tier-option--selected .catalog__tier-name {
+    color: var(--so-emerald-800);
+  }
+
+  .catalog__tier-option--selected .catalog__tier-price {
+    color: var(--so-emerald-600);
+  }
+
+  .catalog__tier-hint {
+    font-size: 0.75rem;
+    color: var(--so-slate-500);
+    margin: 8px 0 0;
+    font-style: italic;
+  }
+
+  .catalog__tier-grid--compact {
+    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+    gap: 8px;
+  }
+
+  .catalog__tier-grid--compact .catalog__tier-option {
+    padding: 10px 12px;
+  }
+
+  /* Modal Overlay */
+  .catalog__modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(15, 23, 42, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+    animation: so-fade-in var(--so-transition-fast) ease-out;
+  }
+
+  .catalog__modal {
+    background: white;
+    border-radius: var(--so-radius-lg);
+    box-shadow: var(--so-shadow-xl);
+    width: 100%;
+    max-width: 420px;
+    animation: so-scale-in var(--so-transition-base) ease-out;
+  }
+
+  .catalog__modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 20px 24px 16px;
+    border-bottom: 1px solid var(--so-slate-100);
+  }
+
+  .catalog__modal-title {
+    font-size: 1.125rem;
+    font-weight: 600;
+    color: var(--so-slate-800);
+    margin: 0;
+    letter-spacing: -0.01em;
+  }
+
+  .catalog__modal-close {
+    width: 32px;
+    height: 32px;
+    border-radius: var(--so-radius-md);
+    background: transparent;
+    border: none;
+    color: var(--so-slate-400);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all var(--so-transition-fast);
+  }
+
+  .catalog__modal-close:hover {
+    background: var(--so-slate-100);
+    color: var(--so-slate-600);
+  }
+
+  .catalog__modal-close svg {
+    width: 18px;
+    height: 18px;
+  }
+
+  .catalog__modal-body {
+    padding: 20px 24px;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+
+  .catalog__modal-footer {
+    display: flex;
+    gap: 12px;
+    padding: 16px 24px 20px;
+    border-top: 1px solid var(--so-slate-100);
+  }
+
+  /* Group Actions */
+  .catalog__group-actions {
+    position: absolute;
+    right: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    gap: 2px;
+    animation: so-fade-in var(--so-transition-fast) ease-out;
+  }
+
+  .catalog__group-action {
+    width: 28px;
+    height: 28px;
+    border-radius: var(--so-radius-md);
+    background: white;
+    border: 1px solid var(--so-slate-200);
+    color: var(--so-slate-400);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all var(--so-transition-fast);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  }
+
+  .catalog__group-action:hover {
+    transform: scale(1.05);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  }
+
+  .catalog__group-action:active {
+    transform: scale(0.95);
+  }
+
+  .catalog__group-action svg {
+    width: 14px;
+    height: 14px;
+  }
+
+  .catalog__group-action--edit:hover {
+    background: var(--so-violet-50);
+    border-color: var(--so-violet-300);
+    color: var(--so-violet-600);
+  }
+
+  .catalog__group-action--delete:hover {
+    background: var(--so-rose-50);
+    border-color: var(--so-rose-300);
+    color: var(--so-rose-600);
+  }
+
+  /* Select element */
+  .catalog__select {
+    width: 100%;
+    padding: 10px 12px;
+    font-family: var(--so-font-sans);
+    font-size: 0.875rem;
+    color: var(--so-slate-800);
+    background: white;
+    border: 1.5px solid var(--so-slate-200);
+    border-radius: var(--so-radius-sm);
+    cursor: pointer;
+    transition: all var(--so-transition-fast);
+  }
+
+  .catalog__select:hover {
+    border-color: var(--so-slate-300);
+  }
+
+  .catalog__select:focus {
+    outline: none;
+    border-color: var(--so-violet-500);
+    box-shadow: 0 0 0 2px var(--so-violet-100);
+  }
+
+  /* Service Card Updates */
+  .catalog__service-card--expanded {
+    border-color: var(--so-violet-300);
+  }
+
+  .catalog__service-main {
+    display: flex;
+    gap: 16px;
+  }
+
+  .catalog__service-actions {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .catalog__service-expand {
+    width: 36px;
+    height: 36px;
+    border-radius: var(--so-radius-md);
+    background: var(--so-slate-100);
+    border: none;
+    color: var(--so-slate-500);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all var(--so-transition-fast);
+  }
+
+  .catalog__service-expand:hover {
+    background: var(--so-violet-100);
+    color: var(--so-violet-600);
+  }
+
+  .catalog__service-expand svg {
+    width: 18px;
+    height: 18px;
+    transition: transform var(--so-transition-fast);
+  }
+
+  .catalog__service-tiers-preview {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    margin-top: 4px;
+  }
+
+  .catalog__service-tier-badge {
+    padding: 3px 8px;
+    font-size: 0.625rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    border-radius: 4px;
+  }
+
+  .catalog__service-tier-badge--included {
+    background: var(--so-emerald-100);
+    color: var(--so-emerald-700);
+  }
+
+  .catalog__service-tier-badge--excluded {
+    background: var(--so-slate-100);
+    color: var(--so-slate-400);
+  }
+
+  .catalog__service-expanded {
+    border-top: 1px solid var(--so-slate-200);
+    margin-top: 16px;
+    padding-top: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    animation: so-fade-in var(--so-transition-fast) ease-out;
+  }
+
+  .catalog__service-section {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  /* Header Actions */
+  .catalog__header-actions {
+    display: flex;
+    gap: 8px;
+  }
+
+  /* Service Templates Panel */
+  .catalog__templates-panel {
+    background: linear-gradient(135deg, var(--so-violet-50) 0%, var(--so-slate-50) 100%);
+    border: 1px solid var(--so-violet-200);
+    border-radius: var(--so-radius-lg);
+    padding: 20px;
+    margin-bottom: 24px;
+    animation: so-scale-in var(--so-transition-fast) ease-out;
+  }
+
+  .catalog__templates-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 8px;
+  }
+
+  .catalog__templates-title {
+    font-size: 1rem;
+    font-weight: 600;
+    color: var(--so-slate-800);
+    margin: 0;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .catalog__templates-title::before {
+    content: "⚡";
+  }
+
+  .catalog__templates-close {
+    width: 28px;
+    height: 28px;
+    border-radius: var(--so-radius-sm);
+    background: transparent;
+    border: none;
+    color: var(--so-slate-400);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all var(--so-transition-fast);
+  }
+
+  .catalog__templates-close:hover {
+    background: white;
+    color: var(--so-slate-600);
+  }
+
+  .catalog__templates-close svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  .catalog__templates-hint {
+    font-size: 0.8125rem;
+    color: var(--so-slate-500);
+    margin: 0 0 16px;
+  }
+
+  .catalog__templates-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 16px;
+  }
+
+  .catalog__template-category {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .catalog__template-category-title {
+    font-size: 0.6875rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--so-slate-500);
+    margin: 0;
+    padding-left: 4px;
+  }
+
+  .catalog__template-items {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .catalog__template-item {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 10px 12px;
+    background: white;
+    border: 1px solid var(--so-slate-200);
+    border-radius: var(--so-radius-md);
+    cursor: pointer;
+    text-align: left;
+    transition: all var(--so-transition-fast);
+  }
+
+  .catalog__template-item:hover:not(:disabled) {
+    border-color: var(--so-violet-300);
+    background: white;
+    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.1);
+    transform: translateX(2px);
+  }
+
+  .catalog__template-item:active:not(:disabled) {
+    transform: translateX(0);
+  }
+
+  .catalog__template-item--exists {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+
+  .catalog__template-icon {
+    font-size: 1.25rem;
+    flex-shrink: 0;
+  }
+
+  .catalog__template-info {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  .catalog__template-name {
+    font-size: 0.8125rem;
+    font-weight: 500;
+    color: var(--so-slate-800);
+  }
+
+  .catalog__template-desc {
+    font-size: 0.6875rem;
+    color: var(--so-slate-500);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .catalog__template-badge {
+    padding: 2px 8px;
+    font-size: 0.5625rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    background: var(--so-emerald-100);
+    color: var(--so-emerald-700);
+    border-radius: 4px;
+    flex-shrink: 0;
+  }
+
+  @media (max-width: 900px) {
+    .catalog__templates-grid {
+      grid-template-columns: 1fr;
+    }
+  }
+`;