@powerhousedao/contributor-billing 0.1.30 → 0.1.32

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

@@ -0,0 +1,1379 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useState, useMemo, useEffect } from "react";
+import { generateId } from "document-model/core";
+import { addService, updateService, deleteService, addOptionGroup, updateOptionGroup, deleteOptionGroup, addServiceLevel, removeServiceLevel, } from "../../../document-models/service-offering/gen/creators.js";
+export function ServiceCatalog({ document, dispatch, groupMetadata, setGroupMetadata, }) {
+    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 [newGroupSetupFee, setNewGroupSetupFee] = useState("");
+    const [newService, setNewService] = useState({ title: "", description: "" });
+    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 [editGroupSetupFee, setEditGroupSetupFee] = useState("");
+    // Initialize metadata from existing services in groups when optionGroups change
+    useEffect(() => {
+        const metadata = {};
+        optionGroups.forEach((group) => {
+            const groupServices = getServicesForGroup(group.id);
+            const hasSetupServices = groupServices.some((s) => s.isSetupFormation);
+            metadata[group.id] = {
+                isSetupFormation: groupMetadata[group.id]?.isSetupFormation ?? hasSetupServices,
+                setupFee: groupMetadata[group.id]?.setupFee ?? null,
+            };
+        });
+        setGroupMetadata(metadata);
+    }, [optionGroups.length]);
+    // 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 metadata
+    const setupGroups = useMemo(() => {
+        return optionGroups.filter((g) => groupMetadata[g.id]?.isSetupFormation);
+    }, [optionGroups, groupMetadata]);
+    const regularGroups = useMemo(() => {
+        return optionGroups.filter((g) => !groupMetadata[g.id]?.isSetupFormation && !g.isAddOn);
+    }, [optionGroups, groupMetadata]);
+    const addonGroups = useMemo(() => {
+        return optionGroups.filter((g) => g.isAddOn);
+    }, [optionGroups]);
+    const handleAddGroup = () => {
+        if (!newGroupName.trim())
+            return;
+        const groupId = generateId();
+        const isSetup = newGroupType === "setup";
+        const setupFee = isSetup && newGroupSetupFee ? parseFloat(newGroupSetupFee) : null;
+        dispatch(addOptionGroup({
+            id: groupId,
+            name: newGroupName.trim(),
+            isAddOn: newGroupType === "addon",
+            defaultSelected: newGroupType !== "addon",
+            lastModified: new Date().toISOString(),
+        }));
+        // Store metadata locally
+        setGroupMetadata((prev) => ({
+            ...prev,
+            [groupId]: {
+                isSetupFormation: isSetup,
+                setupFee,
+            },
+        }));
+        setNewGroupName("");
+        setNewGroupType("recurring");
+        setNewGroupSetupFee("");
+        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(),
+        }));
+        setGroupMetadata((prev) => {
+            const next = { ...prev };
+            delete next[groupId];
+            return next;
+        });
+        if (selectedGroupId === groupId) {
+            setSelectedGroupId(null);
+        }
+    };
+    const handleOpenEditGroup = (group) => {
+        const meta = groupMetadata[group.id];
+        setEditingGroup(group);
+        setEditGroupName(group.name);
+        setEditGroupType(meta?.isSetupFormation ? "setup" : group.isAddOn ? "addon" : "recurring");
+        setEditGroupSetupFee(meta?.setupFee?.toString() || "");
+    };
+    const handleSaveGroupEdit = () => {
+        if (!editingGroup || !editGroupName.trim())
+            return;
+        const isSetup = editGroupType === "setup";
+        const isAddOn = editGroupType === "addon";
+        const setupFee = isSetup && editGroupSetupFee ? parseFloat(editGroupSetupFee) : null;
+        // Update the option group in the document
+        dispatch(updateOptionGroup({
+            id: editingGroup.id,
+            name: editGroupName.trim(),
+            isAddOn,
+            defaultSelected: !isAddOn,
+            lastModified: new Date().toISOString(),
+        }));
+        // Update local metadata
+        setGroupMetadata((prev) => ({
+            ...prev,
+            [editingGroup.id]: {
+                isSetupFormation: isSetup,
+                setupFee,
+            },
+        }));
+        // 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 metadata
+        const isSetupFormation = selectedGroupId
+            ? (groupMetadata[selectedGroupId]?.isSetupFormation ?? false)
+            : false;
+        // Add the service with optionGroupId directly on the service
+        dispatch(addService({
+            id: serviceId,
+            title: newService.title.trim(),
+            description: newService.description.trim() || undefined,
+            isSetupFormation,
+            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: "" });
+        setSelectedTierIds(new Set());
+        setIsAddingService(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;
+    const selectedGroupMeta = selectedGroupId
+        ? groupMetadata[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__fee-field", 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: editGroupSetupFee, onChange: (e) => setEditGroupSetupFee(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__fee-field", 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: newGroupSetupFee, onChange: (e) => setNewGroupSetupFee(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");
+                                                    setNewGroupSetupFee("");
+                                                }, 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, groupMetadata: groupMetadata, getServicesForGroup: getServicesForGroup, onSelect: setSelectedGroupId, onEdit: handleOpenEditGroup, onDelete: handleDeleteGroup })), regularGroups.length > 0 && (_jsx(GroupSection, { title: "Recurring Services", color: "emerald", groups: regularGroups, selectedGroupId: selectedGroupId, groupMetadata: groupMetadata, getServicesForGroup: getServicesForGroup, onSelect: setSelectedGroupId, onEdit: handleOpenEditGroup, onDelete: handleDeleteGroup })), addonGroups.length > 0 && (_jsx(GroupSection, { title: "Optional Add-ons", color: "violet", groups: addonGroups, selectedGroupId: selectedGroupId, groupMetadata: groupMetadata, 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: selectedGroupMeta?.isSetupFormation ? (_jsxs("span", { className: "catalog__main-meta", children: [_jsx("span", { className: "catalog__badge catalog__badge--amber", children: "Setup & Formation" }), selectedGroupMeta.setupFee && (_jsxs("span", { className: "catalog__fee-display", children: ["$", selectedGroupMeta.setupFee, " one-time fee"] }))] })) : selectedGroup?.isAddOn ? ("Optional add-on group") : selectedGroup ? ("Included in subscription") : ("Services not assigned to any group") })] }), selectedGroupId && (_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"] }))] }), !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" })] }), 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.pricing.billingCycle.toLowerCase()] }))] }, 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: "" });
+                                                    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, groupMetadata: groupMetadata, onUpdate: handleUpdateService, onDelete: () => handleDeleteService(service.id), onToggleTier: handleToggleTier }, service.id))) }))] })] })] }));
+}
+function GroupSection({ title, color, groups, selectedGroupId, groupMetadata, 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), setupFee: groupMetadata[group.id]?.setupFee, isSetup: groupMetadata[group.id]?.isSetupFormation, color: color }, group.id))) })] }));
+}
+function GroupButton({ group, serviceCount, isSelected, onSelect, onEdit, onDelete, setupFee, isSetup, color, }) {
+    const [isHovered, setIsHovered] = useState(false);
+    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" }))] }), _jsxs("div", { className: "catalog__group-meta", children: [_jsxs("span", { children: [serviceCount, " services"] }), setupFee && (_jsxs("span", { className: "catalog__group-fee", children: ["$", setupFee, " fee"] }))] })] }), 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, groupMetadata, 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" }))] }), _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 isSetupGroup = newGroupId
+                                        ? (groupMetadata[newGroupId]?.isSetupFormation ?? false)
+                                        : false;
+                                    onUpdate(service, {
+                                        optionGroupId: newGroupId,
+                                        isSetupFormation: isSetupGroup,
+                                    });
+                                }, className: "catalog__select", children: [_jsx("option", { value: "", children: "No group (ungrouped)" }), optionGroups.map((group) => {
+                                        const meta = groupMetadata[group.id];
+                                        const label = meta?.isSetupFormation
+                                            ? `${group.name} (Setup)`
+                                            : group.isAddOn
+                                                ? `${group.name} (Add-on)`
+                                                : `${group.name} (Recurring)`;
+                                        return (_jsx("option", { value: group.id, children: label }, group.id));
+                                    })] })] }), 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.pricing.billingCycle.toLowerCase()] }))] }, 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-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;
+  }
+`;