@delmaredigital/payload-experiments 0.2.0-rc.3 → 0.2.0-rc.4

package/dist/admin/surface/goals/GoalForm.js

@@ -0,0 +1,470 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { useRouter } from 'next/navigation.js';
+import { Link } from '@payloadcms/ui';
+import { formatAdminURL } from 'payload/shared';
+import { GOALS_COPY as C, goalUsedBy } from '../../copy/goals.js';
+import { metricSourceHint, metricSourceOptions } from '../../metricSource.model.js';
+import { validateCappingType, validateCappingValue } from '../../../collections/metricValidation.js';
+import { goalSlug, goalUsage } from './goals.model.js';
+import { goalPages, goalResponse } from './data.js';
+import { GoalsBreadcrumb } from './GoalsBreadcrumb.js';
+import './goals.css';
+const empty = ()=>({
+        name: '',
+        slug: '',
+        source: '',
+        direction: 'increase',
+        attributionWindowHours: 168,
+        minSampleSize: 150,
+        capType: '',
+        capValue: '',
+        warningPercent: '5'
+    });
+export function GoalForm({ surface, id, returnToTest }) {
+    const router = useRouter();
+    const base = surface.apiRoute.replace(/\/$/, '');
+    const [draft, setDraft] = useState(empty);
+    const [goal, setGoal] = useState();
+    const [usedBy, setUsedBy] = useState(0);
+    const [ready, setReady] = useState(false);
+    const [loadError, setLoadError] = useState('');
+    const [error, setError] = useState('');
+    const [fieldErrors, setFieldErrors] = useState({});
+    const [pending, setPending] = useState(null);
+    const [slugEdited, setSlugEdited] = useState(false);
+    const [attempt, setAttempt] = useState(0);
+    const inFlight = useRef(false);
+    const returnQuery = returnToTest ? `?${new URLSearchParams({
+        return: returnToTest
+    })}` : '';
+    const listUrl = formatAdminURL({
+        adminRoute: surface.adminRoute,
+        path: `/experiments/goals${returnQuery}`
+    });
+    useEffect(()=>{
+        const controller = new AbortController();
+        setReady(false);
+        setLoadError('');
+        void (async ()=>{
+            try {
+                if (id !== undefined) {
+                    const [loaded, tests] = await Promise.all([
+                        fetch(`${base}/xp-metrics/${encodeURIComponent(id)}?depth=0`, {
+                            credentials: 'include',
+                            signal: controller.signal
+                        }).then((response)=>goalResponse(response, C.loadError)),
+                        goalPages(base, 'xp-experiments', controller.signal)
+                    ]);
+                    if (loaded.id == null) throw new Error(C.missing);
+                    if (controller.signal.aborted) return;
+                    const defaultCap = surface.metricSources.some((source)=>source.id === loaded.source && source.kind === 'revenue') && loaded.capping?.type == null && loaded.capping?.value == null;
+                    setGoal(loaded);
+                    setUsedBy(goalUsage(tests).get(loaded.id) ?? 0);
+                    setDraft({
+                        ...empty(),
+                        ...loaded,
+                        capType: loaded.capping?.type ?? (defaultCap ? 'percentile' : ''),
+                        capValue: loaded.capping?.value == null ? defaultCap ? '0.99' : '' : String(loaded.capping.value),
+                        warningPercent: String(Number(((loaded.guardrailThreshold ?? 0.05) * 100).toPrecision(12)))
+                    });
+                    setSlugEdited(true);
+                }
+                if (!controller.signal.aborted) setReady(true);
+            } catch (cause) {
+                if (!controller.signal.aborted) setLoadError(cause instanceof Error ? cause.message : C.loadError);
+            }
+        })();
+        return ()=>controller.abort();
+    }, [
+        base,
+        id,
+        attempt
+    ]);
+    const source = surface.metricSources.find((source)=>source.id === draft.source);
+    const hint = metricSourceHint(source);
+    const options = metricSourceOptions(surface.metricSources);
+    const set = (key, value)=>setDraft((current)=>({
+                ...current,
+                [key]: value
+            }));
+    async function submit() {
+        if (inFlight.current || !ready) return;
+        const capValue = draft.capValue.trim() === '' ? null : Number(draft.capValue);
+        const typeError = validateCappingType(draft.capType || null, capValue, source?.kind);
+        const valueError = validateCappingValue(capValue, draft.capType || null);
+        const warningPercent = draft.warningPercent.trim() === '' ? 5 : Number(draft.warningPercent);
+        const errors = {
+            ...typeError !== true ? {
+                capType: typeError
+            } : {},
+            ...valueError !== true ? {
+                capValue: valueError
+            } : {},
+            ...!Number.isFinite(warningPercent) || warningPercent < 0 ? {
+                warningPercent: C.thresholdError
+            } : {}
+        };
+        setFieldErrors(errors);
+        if (Object.keys(errors).length) return;
+        inFlight.current = true;
+        setPending('save');
+        setError('');
+        try {
+            // Use an explicit body: loaded metadata and presentation fields never go back to Payload.
+            const body = {
+                name: draft.name,
+                slug: usedBy && goal ? goal.slug : draft.slug,
+                source: draft.source,
+                direction: draft.direction,
+                attributionWindowHours: draft.attributionWindowHours,
+                minSampleSize: draft.minSampleSize,
+                capping: {
+                    type: draft.capType || null,
+                    value: capValue
+                },
+                guardrailThreshold: warningPercent / 100
+            };
+            const response = await fetch(`${base}/xp-metrics${id === undefined ? '' : `/${encodeURIComponent(id)}`}`, {
+                method: id === undefined ? 'POST' : 'PATCH',
+                credentials: 'include',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(body)
+            });
+            const saved = await goalResponse(response, C.saveError);
+            if (saved.doc?.id == null) throw new Error(C.saveError);
+            router.push(id === undefined && returnToTest ? formatAdminURL({
+                adminRoute: surface.adminRoute,
+                path: `/experiments/${encodeURIComponent(returnToTest)}?${new URLSearchParams({
+                    goal: String(saved.doc.id)
+                })}`
+            }) : listUrl);
+        } catch (cause) {
+            setError(cause instanceof Error ? cause.message : C.saveError);
+            inFlight.current = false;
+            setPending(null);
+        }
+    }
+    async function remove() {
+        if (inFlight.current || !ready || usedBy || id === undefined) return;
+        inFlight.current = true;
+        setPending('delete');
+        setError('');
+        try {
+            const response = await fetch(`${base}/xp-metrics/${encodeURIComponent(id)}`, {
+                method: 'DELETE',
+                credentials: 'include'
+            });
+            await goalResponse(response, C.deleteError);
+            router.push(listUrl);
+        } catch (cause) {
+            setError(cause instanceof Error ? cause.message : C.deleteError);
+            inFlight.current = false;
+            setPending(null);
+        }
+    }
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "xp-goals",
+        children: [
+            /*#__PURE__*/ _jsx(GoalsBreadcrumb, {
+                adminRoute: surface.adminRoute,
+                name: goal?.name ?? (id === undefined ? C.newGoal : undefined),
+                returnQuery: returnQuery
+            }),
+            /*#__PURE__*/ _jsx("h1", {
+                children: goal?.name ?? (id === undefined ? C.newGoal : C.title)
+            }),
+            loadError ? /*#__PURE__*/ _jsxs("p", {
+                role: "alert",
+                children: [
+                    loadError,
+                    ' ',
+                    /*#__PURE__*/ _jsx("button", {
+                        type: "button",
+                        onClick: ()=>setAttempt((n)=>n + 1),
+                        children: C.retry
+                    })
+                ]
+            }) : !ready ? /*#__PURE__*/ _jsx("p", {
+                role: "status",
+                children: C.loading
+            }) : /*#__PURE__*/ _jsxs("form", {
+                className: "xp-goal-form",
+                onSubmit: (event)=>{
+                    event.preventDefault();
+                    void submit();
+                },
+                children: [
+                    /*#__PURE__*/ _jsxs("fieldset", {
+                        disabled: pending !== null,
+                        children: [
+                            /*#__PURE__*/ _jsxs("label", {
+                                className: "xp-field",
+                                children: [
+                                    C.name,
+                                    /*#__PURE__*/ _jsx("input", {
+                                        required: true,
+                                        value: draft.name,
+                                        onChange: (event)=>{
+                                            const name = event.currentTarget.value;
+                                            setDraft((current)=>({
+                                                    ...current,
+                                                    name,
+                                                    ...!slugEdited && !usedBy ? {
+                                                        slug: goalSlug(name)
+                                                    } : {}
+                                                }));
+                                        }
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs("label", {
+                                className: "xp-field",
+                                children: [
+                                    C.slug,
+                                    /*#__PURE__*/ _jsx("input", {
+                                        required: true,
+                                        value: draft.slug,
+                                        readOnly: usedBy > 0,
+                                        "aria-describedby": "xp-goal-slug-help",
+                                        onChange: (event)=>{
+                                            setSlugEdited(true);
+                                            set('slug', event.currentTarget.value);
+                                        }
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx("p", {
+                                id: "xp-goal-slug-help",
+                                children: usedBy ? C.slugLocked : C.slugHelp
+                            }),
+                            /*#__PURE__*/ _jsxs("label", {
+                                className: "xp-field",
+                                children: [
+                                    C.source,
+                                    /*#__PURE__*/ _jsxs("select", {
+                                        required: true,
+                                        value: draft.source,
+                                        onChange: (event)=>{
+                                            const sourceId = event.currentTarget.value;
+                                            const revenue = surface.metricSources.find((source)=>source.id === sourceId)?.kind === 'revenue';
+                                            setDraft((current)=>({
+                                                    ...current,
+                                                    source: sourceId,
+                                                    capType: revenue ? 'percentile' : '',
+                                                    capValue: revenue ? '0.99' : ''
+                                                }));
+                                        },
+                                        children: [
+                                            /*#__PURE__*/ _jsx("option", {
+                                                value: "",
+                                                children: C.chooseSource
+                                            }),
+                                            options.map((option)=>/*#__PURE__*/ _jsx("option", {
+                                                    value: option.value,
+                                                    children: option.label
+                                                }, option.value)),
+                                            draft.source && !options.some((option)=>option.value === draft.source) ? /*#__PURE__*/ _jsx("option", {
+                                                value: draft.source,
+                                                children: draft.source
+                                            }) : null
+                                        ]
+                                    })
+                                ]
+                            }),
+                            hint ? /*#__PURE__*/ _jsx("p", {
+                                children: hint
+                            }) : null,
+                            /*#__PURE__*/ _jsxs("label", {
+                                className: "xp-field",
+                                children: [
+                                    C.direction,
+                                    /*#__PURE__*/ _jsxs("select", {
+                                        value: draft.direction,
+                                        onChange: (event)=>set('direction', event.currentTarget.value),
+                                        children: [
+                                            /*#__PURE__*/ _jsx("option", {
+                                                value: "increase",
+                                                children: C.increase
+                                            }),
+                                            /*#__PURE__*/ _jsx("option", {
+                                                value: "decrease",
+                                                children: C.decrease
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs("label", {
+                                className: "xp-field",
+                                children: [
+                                    C.window,
+                                    /*#__PURE__*/ _jsx("input", {
+                                        required: true,
+                                        type: "number",
+                                        min: "1",
+                                        step: "any",
+                                        value: draft.attributionWindowHours ?? '',
+                                        onChange: (event)=>set('attributionWindowHours', event.currentTarget.value === '' ? null : Number(event.currentTarget.value))
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs("label", {
+                                className: "xp-field",
+                                children: [
+                                    C.minimum,
+                                    /*#__PURE__*/ _jsx("input", {
+                                        required: true,
+                                        type: "number",
+                                        min: "1",
+                                        step: "any",
+                                        value: draft.minSampleSize ?? '',
+                                        onChange: (event)=>set('minSampleSize', event.currentTarget.value === '' ? null : Number(event.currentTarget.value))
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs("details", {
+                                children: [
+                                    /*#__PURE__*/ _jsx("summary", {
+                                        children: C.advanced
+                                    }),
+                                    /*#__PURE__*/ _jsxs("fieldset", {
+                                        children: [
+                                            /*#__PURE__*/ _jsx("legend", {
+                                                children: C.capping
+                                            }),
+                                            /*#__PURE__*/ _jsxs("label", {
+                                                className: "xp-field",
+                                                children: [
+                                                    C.capType,
+                                                    /*#__PURE__*/ _jsxs("select", {
+                                                        required: source?.kind === 'revenue',
+                                                        value: draft.capType,
+                                                        "aria-invalid": fieldErrors.capType ? true : undefined,
+                                                        "aria-describedby": fieldErrors.capType ? 'xp-goal-cap-type-error' : undefined,
+                                                        onChange: (event)=>{
+                                                            const capType = event.currentTarget.value;
+                                                            setDraft((current)=>({
+                                                                    ...current,
+                                                                    capType,
+                                                                    capValue: capType ? current.capValue : ''
+                                                                }));
+                                                        },
+                                                        children: [
+                                                            source?.kind !== 'revenue' ? /*#__PURE__*/ _jsx("option", {
+                                                                value: "",
+                                                                children: C.noCap
+                                                            }) : null,
+                                                            /*#__PURE__*/ _jsx("option", {
+                                                                value: "percentile",
+                                                                children: C.percentile
+                                                            }),
+                                                            /*#__PURE__*/ _jsx("option", {
+                                                                value: "absolute",
+                                                                children: C.absolute
+                                                            })
+                                                        ]
+                                                    })
+                                                ]
+                                            }),
+                                            fieldErrors.capType ? /*#__PURE__*/ _jsx("p", {
+                                                id: "xp-goal-cap-type-error",
+                                                role: "alert",
+                                                children: fieldErrors.capType
+                                            }) : null,
+                                            /*#__PURE__*/ _jsxs("label", {
+                                                className: "xp-field",
+                                                children: [
+                                                    C.capValue,
+                                                    /*#__PURE__*/ _jsx("input", {
+                                                        type: "number",
+                                                        step: "any",
+                                                        min: "0",
+                                                        disabled: !draft.capType,
+                                                        value: draft.capValue,
+                                                        "aria-invalid": fieldErrors.capValue ? true : undefined,
+                                                        "aria-describedby": fieldErrors.capValue ? 'xp-goal-cap-value-error' : undefined,
+                                                        onChange: (event)=>set('capValue', event.currentTarget.value)
+                                                    })
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ _jsx("p", {
+                                                children: C.capHelp
+                                            }),
+                                            fieldErrors.capValue ? /*#__PURE__*/ _jsx("p", {
+                                                id: "xp-goal-cap-value-error",
+                                                role: "alert",
+                                                children: fieldErrors.capValue
+                                            }) : null
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsxs("label", {
+                                        className: "xp-field",
+                                        children: [
+                                            C.threshold,
+                                            /*#__PURE__*/ _jsx("input", {
+                                                type: "number",
+                                                min: "0",
+                                                step: "any",
+                                                value: draft.warningPercent,
+                                                "aria-invalid": fieldErrors.warningPercent ? true : undefined,
+                                                "aria-describedby": fieldErrors.warningPercent ? 'xp-goal-threshold-error' : undefined,
+                                                onInvalid: ()=>setFieldErrors((current)=>({
+                                                            ...current,
+                                                            warningPercent: C.thresholdError
+                                                        })),
+                                                onChange: (event)=>set('warningPercent', event.currentTarget.value)
+                                            })
+                                        ]
+                                    }),
+                                    fieldErrors.warningPercent ? /*#__PURE__*/ _jsx("p", {
+                                        id: "xp-goal-threshold-error",
+                                        role: "alert",
+                                        children: fieldErrors.warningPercent
+                                    }) : null
+                                ]
+                            })
+                        ]
+                    }),
+                    error ? /*#__PURE__*/ _jsx("p", {
+                        role: "alert",
+                        children: error
+                    }) : null,
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "xp-tests-toolbar",
+                        children: [
+                            /*#__PURE__*/ _jsx("button", {
+                                type: "submit",
+                                disabled: pending !== null,
+                                children: pending === 'save' ? C.saving : C.save
+                            }),
+                            /*#__PURE__*/ _jsx(Link, {
+                                className: "xp-goal-cancel",
+                                href: listUrl,
+                                children: C.cancel
+                            }),
+                            id === undefined ? null : /*#__PURE__*/ _jsxs(_Fragment, {
+                                children: [
+                                    /*#__PURE__*/ _jsx("button", {
+                                        type: "button",
+                                        disabled: pending !== null || usedBy > 0,
+                                        "aria-describedby": usedBy ? 'xp-goal-used' : undefined,
+                                        onClick: ()=>void remove(),
+                                        children: pending === 'delete' ? C.deleting : C.remove
+                                    }),
+                                    usedBy ? /*#__PURE__*/ _jsx("span", {
+                                        id: "xp-goal-used",
+                                        children: goalUsedBy(usedBy)
+                                    }) : null
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+}

package/dist/admin/surface/goals/GoalsBreadcrumb.d.ts

@@ -0,0 +1,5 @@
+export declare function GoalsBreadcrumb({ adminRoute, name, returnQuery }: {
+    adminRoute: string;
+    name?: string;
+    returnQuery?: string;
+}): import("react").JSX.Element;

package/dist/admin/surface/goals/GoalsBreadcrumb.js

@@ -0,0 +1,47 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Link } from '@payloadcms/ui';
+import { formatAdminURL } from 'payload/shared';
+import { GOALS_COPY as C } from '../../copy/goals.js';
+import { SURFACE_COPY } from '../../copy/surface.js';
+export function GoalsBreadcrumb({ adminRoute, name, returnQuery = '' }) {
+    return /*#__PURE__*/ _jsxs("nav", {
+        className: "xp-goals-breadcrumb",
+        "aria-label": C.breadcrumb,
+        children: [
+            /*#__PURE__*/ _jsx(Link, {
+                href: formatAdminURL({
+                    adminRoute,
+                    path: '/experiments'
+                }),
+                children: SURFACE_COPY.title
+            }),
+            /*#__PURE__*/ _jsx("span", {
+                "aria-hidden": "true",
+                children: "›"
+            }),
+            name ? /*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
+                    /*#__PURE__*/ _jsx(Link, {
+                        href: formatAdminURL({
+                            adminRoute,
+                            path: `/experiments/goals${returnQuery}`
+                        }),
+                        children: C.title
+                    }),
+                    /*#__PURE__*/ _jsx("span", {
+                        "aria-hidden": "true",
+                        children: "›"
+                    }),
+                    /*#__PURE__*/ _jsx("span", {
+                        "aria-current": "page",
+                        children: name
+                    })
+                ]
+            }) : /*#__PURE__*/ _jsx("span", {
+                "aria-current": "page",
+                children: C.title
+            })
+        ]
+    });
+}

package/dist/admin/surface/goals/GoalsList.d.ts

@@ -0,0 +1,6 @@
+import type { SurfaceProps } from '../contracts.js';
+import './goals.css';
+export declare function GoalsList({ surface, returnToTest }: {
+    surface: SurfaceProps;
+    returnToTest?: string;
+}): import("react").JSX.Element;

package/dist/admin/surface/goals/GoalsList.js

@@ -0,0 +1,135 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Link, Pill } from '@payloadcms/ui';
+import { formatAdminURL } from 'payload/shared';
+import { GOALS_COPY as C } from '../../copy/goals.js';
+import { goalUsage } from './goals.model.js';
+import { goalPages } from './data.js';
+import { GoalsBreadcrumb } from './GoalsBreadcrumb.js';
+import './goals.css';
+export function GoalsList({ surface, returnToTest }) {
+    const [data, setData] = useState();
+    const [error, setError] = useState('');
+    const [attempt, setAttempt] = useState(0);
+    const returnQuery = returnToTest ? `?${new URLSearchParams({
+        return: returnToTest
+    })}` : '';
+    useEffect(()=>{
+        const controller = new AbortController();
+        setData(undefined);
+        setError('');
+        const base = surface.apiRoute.replace(/\/$/, '');
+        void Promise.all([
+            goalPages(base, 'xp-metrics', controller.signal),
+            goalPages(base, 'xp-experiments', controller.signal)
+        ]).then(([goals, tests])=>{
+            if (!controller.signal.aborted) setData({
+                goals,
+                tests
+            });
+        }).catch((cause)=>{
+            if (!controller.signal.aborted) setError(cause instanceof Error ? cause.message : C.loadError);
+        });
+        return ()=>controller.abort();
+    }, [
+        surface.apiRoute,
+        attempt
+    ]);
+    const usage = goalUsage(data?.tests ?? []);
+    const newGoal = /*#__PURE__*/ _jsx(Link, {
+        className: "xp-tests-primary",
+        href: formatAdminURL({
+            adminRoute: surface.adminRoute,
+            path: `/experiments/goals/new${returnQuery}`
+        }),
+        children: C.newGoal
+    });
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "xp-goals",
+        children: [
+            /*#__PURE__*/ _jsx(GoalsBreadcrumb, {
+                adminRoute: surface.adminRoute
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "xp-tests-toolbar",
+                children: [
+                    /*#__PURE__*/ _jsx("h1", {
+                        children: C.title
+                    }),
+                    newGoal
+                ]
+            }),
+            error ? /*#__PURE__*/ _jsxs("p", {
+                role: "alert",
+                children: [
+                    error,
+                    ' ',
+                    /*#__PURE__*/ _jsx("button", {
+                        type: "button",
+                        onClick: ()=>setAttempt((n)=>n + 1),
+                        children: C.retry
+                    })
+                ]
+            }) : !data ? /*#__PURE__*/ _jsx("p", {
+                role: "status",
+                children: C.loading
+            }) : !data.goals.length ? /*#__PURE__*/ _jsx("p", {
+                children: C.empty
+            }) : /*#__PURE__*/ _jsx("div", {
+                className: "xp-goals-table",
+                children: /*#__PURE__*/ _jsxs("table", {
+                    children: [
+                        /*#__PURE__*/ _jsx("thead", {
+                            children: /*#__PURE__*/ _jsx("tr", {
+                                children: [
+                                    C.name,
+                                    C.source,
+                                    C.directionColumn,
+                                    C.usedBy,
+                                    C.status
+                                ].map((label)=>/*#__PURE__*/ _jsx("th", {
+                                        scope: "col",
+                                        children: label
+                                    }, label))
+                            })
+                        }),
+                        /*#__PURE__*/ _jsx("tbody", {
+                            children: data.goals.map((goal)=>{
+                                const count = usage.get(goal.id) ?? 0;
+                                return /*#__PURE__*/ _jsxs("tr", {
+                                    children: [
+                                        /*#__PURE__*/ _jsx("th", {
+                                            scope: "row",
+                                            children: /*#__PURE__*/ _jsx(Link, {
+                                                href: formatAdminURL({
+                                                    adminRoute: surface.adminRoute,
+                                                    path: `/experiments/goals/${encodeURIComponent(String(goal.id))}${returnQuery}`
+                                                }),
+                                                children: goal.name
+                                            })
+                                        }),
+                                        /*#__PURE__*/ _jsx("td", {
+                                            children: surface.metricSources.find((source)=>source.id === goal.source)?.label ?? goal.source
+                                        }),
+                                        /*#__PURE__*/ _jsx("td", {
+                                            children: goal.direction === 'decrease' ? C.decrease : C.increase
+                                        }),
+                                        /*#__PURE__*/ _jsx("td", {
+                                            children: count
+                                        }),
+                                        /*#__PURE__*/ _jsx("td", {
+                                            children: /*#__PURE__*/ _jsx(Pill, {
+                                                children: count ? C.inUse : C.unused
+                                            })
+                                        })
+                                    ]
+                                }, `${typeof goal.id}:${goal.id}`);
+                            })
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+}