npm - @burdenoff/microfe-coolandlovely - Versions diffs - 2026.706.1 → 2026.706.2 - Mend

@burdenoff/microfe-coolandlovely 2026.706.1 → 2026.706.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (66) hide show

package/dist/coolandlovely/pages/items/StyleItemDetailPage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StyleItemDetailPage.js","names":[],"sources":["../../../../src/coolandlovely/pages/items/StyleItemDetailPage.tsx"],"sourcesContent":["/*\n Style Item Detail Page\n * @module coolandlovely/pages/items\n \n Renders a single catalogue piece (`cooStyleItem`) with edit + archive\n * (`cooArchiveStyleItem`) actions.\n */\n\nimport { useParams } from 'react-router-dom';\nimport { ArrowLeft, Pencil, Archive, Loader2, Store, Shapes } from 'lucide-react';\nimport { GlassCard } from '@burdenoff/fe-libs/ui';\nimport { PageLayout } from '../../components/PageLayout';\nimport { StatusBadge } from '../../components/StatusBadge';\nimport { LoadingView, ErrorView } from '../../components/StateViews';\nimport { Thumbnail } from '../../components/Thumbnail';\nimport { TagList } from '../../components/TagList';\nimport { useCoolAndLovely } from '../../context/CoolAndLovelyContext';\nimport { useStyleItem, useArchiveStyleItem } from '../../hooks';\nimport { categoryIcon } from '../../utils/icons';\nimport { formatPrice, formatDate, titleCase } from '../../utils/formatters';\n\nexport function StyleItemDetailPage() {\n const { itemId } = useParams<{ itemId: string }>();\n const { navigateTo } = useCoolAndLovely();\n const query = useStyleItem(itemId);\n const archive = useArchiveStyleItem();\n\n if (query.isLoading) {\n return (\n <PageLayout title=\"Style item\">\n <LoadingView label=\"Loading item…\" />\n </PageLayout>\n );\n }\n\n if (query.isError \|\| !query.data) {\n return (\n <PageLayout title=\"Style item\">\n <ErrorView title=\"Item not found\" onRetry={() => void query.refetch()} />\n </PageLayout>\n );\n }\n\n const item = query.data;\n const isArchived = item.status === 'RETIRED';\n\n return (\n <PageLayout\n title={item.name}\n description={item.brand?.name ?? undefined}\n actions={\n <div className=\"flex items-center gap-2\">\n <button\n type=\"button\"\n onClick={() => navigateTo('/items')}\n className=\"inline-flex items-center gap-1.5 rounded-lg border border-border-seam px-3 py-2 text-sm font-medium text-text-primary transition-colors hover:bg-bg-sunken\"\n >\n <ArrowLeft className=\"h-4 w-4\" /> Back\n </button>\n <button\n type=\"button\"\n onClick={() => navigateTo(`/items/${item.id}/edit`)}\n className=\"inline-flex items-center gap-1.5 rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text transition-colors hover:bg-action-primary-bg/90\"\n >\n <Pencil className=\"h-4 w-4\" /> Edit\n </button>\n {!isArchived && (\n <button\n type=\"button\"\n disabled={archive.isPending}\n onClick={() => archive.mutate(item.id, { onSuccess: () => navigateTo('/items') })}\n className=\"inline-flex items-center gap-1.5 rounded-lg border border-border-seam px-3 py-2 text-sm font-medium text-status-error-text transition-colors hover:bg-status-error-bg-subtle disabled:opacity-50\"\n >\n {archive.isPending ? (\n <Loader2 className=\"h-4 w-4 animate-spin\" />\n ) : (\n <Archive className=\"h-4 w-4\" />\n )}\n Archive\n </button>\n )}\n </div>\n }\n >\n <div className=\"grid grid-cols-1 gap-6 lg:grid-cols-3\">\n <div className=\"lg:col-span-2\">\n <GlassCard treatment=\"glass\" className=\"overflow-hidden p-0\">\n <Thumbnail\n icon={categoryIcon(item.category, 40)}\n seed={item.id}\n className=\"h-52 w-full\"\n />\n <div className=\"p-6\">\n <div className=\"flex items-center gap-2\">\n <h2 className=\"text-xl font-semibold text-text-primary\">{item.name}</h2>\n <StatusBadge status={item.status} className=\"ml-auto\" />\n </div>\n <p className=\"mt-1 text-2xl font-bold text-text-primary tabular-nums\">\n {formatPrice(item.price, item.currency)}\n </p>\n {item.description && (\n <p className=\"mt-3 text-sm text-text-secondary\">{item.description}</p>\n )}\n\n <div className=\"mt-5 grid grid-cols-1 gap-4 sm:grid-cols-2\">\n {item.colours.length > 0 && (\n <div>\n <p className=\"mb-1.5 text-xs font-medium uppercase tracking-wide text-text-secondary\">\n Colours\n </p>\n <TagList tags={item.colours} max={10} />\n </div>\n )}\n {item.sizes.length > 0 && (\n <div>\n <p className=\"mb-1.5 text-xs font-medium uppercase tracking-wide text-text-secondary\">\n Sizes\n </p>\n <TagList tags={item.sizes} max={10} />\n </div>\n )}\n {item.materials.length > 0 && (\n <div>\n <p className=\"mb-1.5 text-xs font-medium uppercase tracking-wide text-text-secondary\">\n Materials\n </p>\n <TagList tags={item.materials} max={10} />\n </div>\n )}\n {item.tags.length > 0 && (\n <div>\n <p className=\"mb-1.5 text-xs font-medium uppercase tracking-wide text-text-secondary\">\n Tags\n </p>\n <TagList tags={item.tags} max={10} tone=\"accent\" />\n </div>\n )}\n </div>\n </div>\n </GlassCard>\n </div>\n\n <div className=\"space-y-4\">\n <GlassCard treatment=\"plain\" className=\"p-5\">\n <h3 className=\"mb-3 text-sm font-semibold text-text-primary\">Details</h3>\n <dl className=\"space-y-2 text-sm\">\n <div className=\"flex justify-between gap-2\">\n <dt className=\"text-text-secondary\">Category</dt>\n <dd className=\"text-text-primary\">{titleCase(item.category)}</dd>\n </div>\n <div className=\"flex justify-between gap-2\">\n <dt className=\"text-text-secondary\">SKU</dt>\n <dd className=\"text-text-primary\">{item.sku ?? '—'}</dd>\n </div>\n <div className=\"flex justify-between gap-2\">\n <dt className=\"text-text-secondary\">Currency</dt>\n <dd className=\"text-text-primary\">{item.currency}</dd>\n </div>\n <div className=\"flex justify-between gap-2\">\n <dt className=\"text-text-secondary\">Created</dt>\n <dd className=\"text-text-primary\">\n {formatDate(item.createdAt, { hour: undefined, minute: undefined })}\n </dd>\n </div>\n </dl>\n </GlassCard>\n\n {item.brand && (\n <button\n type=\"button\"\n onClick={() => navigateTo(`/brands/${item.brand?.id}`)}\n className=\"flex w-full items-center gap-3 rounded-lg border border-border-seam bg-bg-surface p-4 text-left transition-colors hover:bg-bg-sunken/50\"\n >\n <Thumbnail\n icon={<Store className=\"h-5 w-5\" />}\n seed={item.brand.id}\n className=\"h-10 w-10 shrink-0\"\n />\n <div className=\"min-w-0\">\n <p className=\"truncate text-sm font-medium text-text-primary\">{item.brand.name}</p>\n <p className=\"truncate text-xs text-text-secondary\">View brand</p>\n </div>\n </button>\n )}\n\n {item.collection && (\n <button\n type=\"button\"\n onClick={() => navigateTo(`/collections/${item.collection?.id}`)}\n className=\"flex w-full items-center gap-3 rounded-lg border border-border-seam bg-bg-surface p-4 text-left transition-colors hover:bg-bg-sunken/50\"\n >\n <Thumbnail\n icon={<Shapes className=\"h-5 w-5\" />}\n seed={item.collection.id}\n className=\"h-10 w-10 shrink-0\"\n />\n <div className=\"min-w-0\">\n <p className=\"truncate text-sm font-medium text-text-primary\">\n {item.collection.name}\n </p>\n <p className=\"truncate text-xs text-text-secondary\">View collection</p>\n </div>\n </button>\n )}\n </div>\n </div>\n </PageLayout>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;AAqBA,SAAgB,IAAsB;CACpC,IAAM,EAAE,cAAW,GAA+B,EAC5C,EAAE,kBAAe,GAAkB,EACnC,IAAQ,EAAa,EAAO,EAC5B,IAAU,GAAqB;AAErC,KAAI,EAAM,UACR,QACE,kBAAC,GAAD;EAAY,OAAM;YAChB,kBAAC,GAAD,EAAa,OAAM,iBAAkB,CAAA;EAC1B,CAAA;AAIjB,KAAI,EAAM,WAAW,CAAC,EAAM,KAC1B,QACE,kBAAC,GAAD;EAAY,OAAM;YAChB,kBAAC,GAAD;GAAW,OAAM;GAAiB,eAAe,KAAK,EAAM,SAAS;GAAI,CAAA;EAC9D,CAAA;CAIjB,IAAM,IAAO,EAAM,MACb,IAAa,EAAK,WAAW;AAEnC,QACE,kBAAC,GAAD;EACE,OAAO,EAAK;EACZ,aAAa,EAAK,OAAO,QAAQ,KAAA;EACjC,SACE,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,UAAD;KACE,MAAK;KACL,eAAe,EAAW,SAAS;KACnC,WAAU;eAHZ,CAKE,kBAAC,GAAD,EAAW,WAAU,WAAY,CAAA,EAAA,QAC1B;;IACT,kBAAC,UAAD;KACE,MAAK;KACL,eAAe,EAAW,UAAU,EAAK,GAAG,OAAO;KACnD,WAAU;eAHZ,CAKE,kBAAC,GAAD,EAAQ,WAAU,WAAY,CAAA,EAAA,QACvB;;IACR,CAAC,KACA,kBAAC,UAAD;KACE,MAAK;KACL,UAAU,EAAQ;KAClB,eAAe,EAAQ,OAAO,EAAK,IAAI,EAAE,iBAAiB,EAAW,SAAS,EAAE,CAAC;KACjF,WAAU;eAJZ,CAMG,EAAQ,YACP,kBAAC,GAAD,EAAS,WAAU,wBAAyB,CAAA,GAE5C,kBAAC,GAAD,EAAS,WAAU,WAAY,CAAA,EAC/B,UAEK;;IAEP;;YAGR,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,GAAD;KAAW,WAAU;KAAQ,WAAU;eAAvC,CACE,kBAAC,GAAD;MACE,MAAM,EAAa,EAAK,UAAU,GAAG;MACrC,MAAM,EAAK;MACX,WAAU;MACV,CAAA,EACF,kBAAC,OAAD;MAAK,WAAU;gBAAf;OACE,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,MAAD;SAAI,WAAU;mBAA2C,EAAK;SAAU,CAAA,EACxE,kBAAC,GAAD;SAAa,QAAQ,EAAK;SAAQ,WAAU;SAAY,CAAA,CACpD;;OACN,kBAAC,KAAD;QAAG,WAAU;kBACV,EAAY,EAAK,OAAO,EAAK,SAAS;QACrC,CAAA;OACH,EAAK,eACJ,kBAAC,KAAD;QAAG,WAAU;kBAAoC,EAAK;QAAgB,CAAA;OAGxE,kBAAC,OAAD;QAAK,WAAU;kBAAf;SACG,EAAK,QAAQ,SAAS,KACrB,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;UAAG,WAAU;oBAAyE;UAElF,CAAA,EACJ,kBAAC,GAAD;UAAS,MAAM,EAAK;UAAS,KAAK;UAAM,CAAA,CACpC,EAAA,CAAA;SAEP,EAAK,MAAM,SAAS,KACnB,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;UAAG,WAAU;oBAAyE;UAElF,CAAA,EACJ,kBAAC,GAAD;UAAS,MAAM,EAAK;UAAO,KAAK;UAAM,CAAA,CAClC,EAAA,CAAA;SAEP,EAAK,UAAU,SAAS,KACvB,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;UAAG,WAAU;oBAAyE;UAElF,CAAA,EACJ,kBAAC,GAAD;UAAS,MAAM,EAAK;UAAW,KAAK;UAAM,CAAA,CACtC,EAAA,CAAA;SAEP,EAAK,KAAK,SAAS,KAClB,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;UAAG,WAAU;oBAAyE;UAElF,CAAA,EACJ,kBAAC,GAAD;UAAS,MAAM,EAAK;UAAM,KAAK;UAAI,MAAK;UAAW,CAAA,CAC/C,EAAA,CAAA;SAEJ;;OACF;QACI;;IACR,CAAA,EAEN,kBAAC,OAAD;IAAK,WAAU;cAAf;KACE,kBAAC,GAAD;MAAW,WAAU;MAAQ,WAAU;gBAAvC,CACE,kBAAC,MAAD;OAAI,WAAU;iBAA+C;OAAY,CAAA,EACzE,kBAAC,MAAD;OAAI,WAAU;iBAAd;QACE,kBAAC,OAAD;SAAK,WAAU;mBAAf,CACE,kBAAC,MAAD;UAAI,WAAU;oBAAsB;UAAa,CAAA,EACjD,kBAAC,MAAD;UAAI,WAAU;oBAAqB,EAAU,EAAK,SAAS;UAAM,CAAA,CAC7D;;QACN,kBAAC,OAAD;SAAK,WAAU;mBAAf,CACE,kBAAC,MAAD;UAAI,WAAU;oBAAsB;UAAQ,CAAA,EAC5C,kBAAC,MAAD;UAAI,WAAU;oBAAqB,EAAK,OAAO;UAAS,CAAA,CACpD;;QACN,kBAAC,OAAD;SAAK,WAAU;mBAAf,CACE,kBAAC,MAAD;UAAI,WAAU;oBAAsB;UAAa,CAAA,EACjD,kBAAC,MAAD;UAAI,WAAU;oBAAqB,EAAK;UAAc,CAAA,CAClD;;QACN,kBAAC,OAAD;SAAK,WAAU;mBAAf,CACE,kBAAC,MAAD;UAAI,WAAU;oBAAsB;UAAY,CAAA,EAChD,kBAAC,MAAD;UAAI,WAAU;oBACX,EAAW,EAAK,WAAW;WAAE,MAAM,KAAA;WAAW,QAAQ,KAAA;WAAW,CAAC;UAChE,CAAA,CACD;;QACH;SACK;;KAEX,EAAK,SACJ,kBAAC,UAAD;MACE,MAAK;MACL,eAAe,EAAW,WAAW,EAAK,OAAO,KAAK;MACtD,WAAU;gBAHZ,CAKE,kBAAC,GAAD;OACE,MAAM,kBAAC,GAAD,EAAO,WAAU,WAAY,CAAA;OACnC,MAAM,EAAK,MAAM;OACjB,WAAU;OACV,CAAA,EACF,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,KAAD;QAAG,WAAU;kBAAkD,EAAK,MAAM;QAAS,CAAA,EACnF,kBAAC,KAAD;QAAG,WAAU;kBAAuC;QAAc,CAAA,CAC9D;SACC;;KAGV,EAAK,cACJ,kBAAC,UAAD;MACE,MAAK;MACL,eAAe,EAAW,gBAAgB,EAAK,YAAY,KAAK;MAChE,WAAU;gBAHZ,CAKE,kBAAC,GAAD;OACE,MAAM,kBAAC,GAAD,EAAQ,WAAU,WAAY,CAAA;OACpC,MAAM,EAAK,WAAW;OACtB,WAAU;OACV,CAAA,EACF,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,KAAD;QAAG,WAAU;kBACV,EAAK,WAAW;QACf,CAAA,EACJ,kBAAC,KAAD;QAAG,WAAU;kBAAuC;QAAmB,CAAA,CACnE;SACC;;KAEP;MACF;;EACK,CAAA"}
1	+ {"version":3,"file":"StyleItemDetailPage.js","names":[],"sources":["../../../../src/coolandlovely/pages/items/StyleItemDetailPage.tsx"],"sourcesContent":["/*\n Style Item Detail Page\n * @module coolandlovely/pages/items\n \n Renders a single catalogue piece (`cooStyleItem`) with edit + archive\n * (`cooArchiveStyleItem`) actions.\n */\n\nimport { useParams } from 'react-router-dom';\nimport { ArrowLeft, Pencil, Archive, Loader2, Store, Shapes } from 'lucide-react';\nimport { GlassCard } from '@burdenoff/fe-libs/ui';\nimport { PageLayout } from '../../components/PageLayout';\nimport { StatusBadge } from '../../components/StatusBadge';\nimport { LoadingView, ErrorView } from '../../components/StateViews';\nimport { Thumbnail } from '../../components/Thumbnail';\nimport { TagList } from '../../components/TagList';\nimport { AddToLookbookButton } from '../../components/AddToLookbookButton';\nimport { useCoolAndLovely } from '../../context/CoolAndLovelyContext';\nimport { useStyleItem, useArchiveStyleItem } from '../../hooks';\nimport { categoryIcon } from '../../utils/icons';\nimport { formatPrice, formatDate, titleCase } from '../../utils/formatters';\n\nexport function StyleItemDetailPage() {\n const { itemId } = useParams<{ itemId: string }>();\n const { navigateTo } = useCoolAndLovely();\n const query = useStyleItem(itemId);\n const archive = useArchiveStyleItem();\n\n if (query.isLoading) {\n return (\n <PageLayout title=\"Style item\">\n <LoadingView label=\"Loading item…\" />\n </PageLayout>\n );\n }\n\n if (query.isError \|\| !query.data) {\n return (\n <PageLayout title=\"Style item\">\n <ErrorView title=\"Item not found\" onRetry={() => void query.refetch()} />\n </PageLayout>\n );\n }\n\n const item = query.data;\n const isArchived = item.status === 'RETIRED';\n\n return (\n <PageLayout\n title={item.name}\n description={item.brand?.name ?? undefined}\n actions={\n <div className=\"flex flex-wrap items-center gap-2\">\n <button\n type=\"button\"\n onClick={() => navigateTo('/items')}\n className=\"inline-flex items-center gap-1.5 rounded-lg border border-border-seam px-3 py-2 text-sm font-medium text-text-primary transition-colors hover:bg-bg-sunken\"\n >\n <ArrowLeft className=\"h-4 w-4\" /> Back\n </button>\n <AddToLookbookButton styleItemId={item.id} />\n <button\n type=\"button\"\n onClick={() => navigateTo(`/items/${item.id}/edit`)}\n className=\"inline-flex items-center gap-1.5 rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text transition-colors hover:bg-action-primary-bg/90\"\n >\n <Pencil className=\"h-4 w-4\" /> Edit\n </button>\n {!isArchived && (\n <button\n type=\"button\"\n disabled={archive.isPending}\n onClick={() => archive.mutate(item.id, { onSuccess: () => navigateTo('/items') })}\n className=\"inline-flex items-center gap-1.5 rounded-lg border border-border-seam px-3 py-2 text-sm font-medium text-status-error-text transition-colors hover:bg-status-error-bg-subtle disabled:opacity-50\"\n >\n {archive.isPending ? (\n <Loader2 className=\"h-4 w-4 animate-spin\" />\n ) : (\n <Archive className=\"h-4 w-4\" />\n )}\n Archive\n </button>\n )}\n </div>\n }\n >\n <div className=\"grid grid-cols-1 gap-6 lg:grid-cols-3\">\n <div className=\"lg:col-span-2\">\n <GlassCard treatment=\"glass\" className=\"overflow-hidden p-0\">\n <Thumbnail\n icon={categoryIcon(item.category, 40)}\n seed={item.id}\n fileId={item.image?.id}\n alt={item.name}\n className=\"h-52 w-full\"\n />\n <div className=\"p-6\">\n <div className=\"flex items-center gap-2\">\n <h2 className=\"text-xl font-semibold text-text-primary\">{item.name}</h2>\n <StatusBadge status={item.status} className=\"ml-auto\" />\n </div>\n <p className=\"mt-1 text-2xl font-bold text-text-primary tabular-nums\">\n {formatPrice(item.price, item.currency)}\n </p>\n {item.description && (\n <p className=\"mt-3 text-sm text-text-secondary\">{item.description}</p>\n )}\n\n <div className=\"mt-5 grid grid-cols-1 gap-4 sm:grid-cols-2\">\n {item.colours.length > 0 && (\n <div>\n <p className=\"mb-1.5 text-xs font-medium uppercase tracking-wide text-text-secondary\">\n Colours\n </p>\n <TagList tags={item.colours} max={10} />\n </div>\n )}\n {item.sizes.length > 0 && (\n <div>\n <p className=\"mb-1.5 text-xs font-medium uppercase tracking-wide text-text-secondary\">\n Sizes\n </p>\n <TagList tags={item.sizes} max={10} />\n </div>\n )}\n {item.materials.length > 0 && (\n <div>\n <p className=\"mb-1.5 text-xs font-medium uppercase tracking-wide text-text-secondary\">\n Materials\n </p>\n <TagList tags={item.materials} max={10} />\n </div>\n )}\n {item.tags.length > 0 && (\n <div>\n <p className=\"mb-1.5 text-xs font-medium uppercase tracking-wide text-text-secondary\">\n Tags\n </p>\n <TagList tags={item.tags} max={10} tone=\"accent\" />\n </div>\n )}\n </div>\n </div>\n </GlassCard>\n </div>\n\n <div className=\"space-y-4\">\n <GlassCard treatment=\"plain\" className=\"p-5\">\n <h3 className=\"mb-3 text-sm font-semibold text-text-primary\">Details</h3>\n <dl className=\"space-y-2 text-sm\">\n <div className=\"flex justify-between gap-2\">\n <dt className=\"text-text-secondary\">Category</dt>\n <dd className=\"text-text-primary\">{titleCase(item.category)}</dd>\n </div>\n <div className=\"flex justify-between gap-2\">\n <dt className=\"text-text-secondary\">SKU</dt>\n <dd className=\"text-text-primary\">{item.sku ?? '—'}</dd>\n </div>\n <div className=\"flex justify-between gap-2\">\n <dt className=\"text-text-secondary\">Currency</dt>\n <dd className=\"text-text-primary\">{item.currency}</dd>\n </div>\n <div className=\"flex justify-between gap-2\">\n <dt className=\"text-text-secondary\">Created</dt>\n <dd className=\"text-text-primary\">\n {formatDate(item.createdAt, { hour: undefined, minute: undefined })}\n </dd>\n </div>\n </dl>\n </GlassCard>\n\n {item.brand && (\n <button\n type=\"button\"\n onClick={() => navigateTo(`/brands/${item.brand?.id}`)}\n className=\"flex w-full items-center gap-3 rounded-lg border border-border-seam bg-bg-surface p-4 text-left transition-colors hover:bg-bg-sunken/50\"\n >\n <Thumbnail\n icon={<Store className=\"h-5 w-5\" />}\n seed={item.brand.id}\n className=\"h-10 w-10 shrink-0\"\n />\n <div className=\"min-w-0\">\n <p className=\"truncate text-sm font-medium text-text-primary\">{item.brand.name}</p>\n <p className=\"truncate text-xs text-text-secondary\">View brand</p>\n </div>\n </button>\n )}\n\n {item.collection && (\n <button\n type=\"button\"\n onClick={() => navigateTo(`/collections/${item.collection?.id}`)}\n className=\"flex w-full items-center gap-3 rounded-lg border border-border-seam bg-bg-surface p-4 text-left transition-colors hover:bg-bg-sunken/50\"\n >\n <Thumbnail\n icon={<Shapes className=\"h-5 w-5\" />}\n seed={item.collection.id}\n className=\"h-10 w-10 shrink-0\"\n />\n <div className=\"min-w-0\">\n <p className=\"truncate text-sm font-medium text-text-primary\">\n {item.collection.name}\n </p>\n <p className=\"truncate text-xs text-text-secondary\">View collection</p>\n </div>\n </button>\n )}\n </div>\n </div>\n </PageLayout>\n );\n}\n"],"mappings":"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"}

package/dist/coolandlovely/pages/items/StyleItemFormPage.js CHANGED Viewed

@@ -1,18 +1,20 @@
 import { useCoolAndLovely as e } from "../../context/CoolAndLovelyContext.js";
 import { PageLayout as t } from "../../components/PageLayout.js";
 import { ErrorView as n, LoadingView as r } from "../../components/StateViews.js";
-import { useBrands as i, useCollections as a, useCreateStyleItem as o, useStyleItem as s, useUpdateStyleItem as c } from "../../hooks/useCoolAndLovelyApi.js";
+import { COO_FILE_FOLDERS as i } from "../../hooks/useFiles.js";
+import { useBrands as a, useCollections as o, useCreateStyleItem as s, useStyleItem as c, useUpdateStyleItem as l } from "../../hooks/useCoolAndLovelyApi.js";
 import "../../hooks/index.js";
-import { parseCsv as l, titleCase as u } from "../../utils/formatters.js";
-import { STYLE_CATEGORIES as d } from "../../utils/icons.js";
-import { SelectField as f, TextAreaField as p, TextField as m } from "../../components/Field.js";
-import { useEffect as h, useMemo as g, useState as _ } from "react";
-import { ArrowLeft as v, Loader2 as y, Save as b, Shirt as x } from "lucide-react";
-import { useParams as S, useSearchParams as C } from "react-router-dom";
-import { jsx as w, jsxs as T } from "react/jsx-runtime";
-import { GlassCard as E } from "@burdenoff/fe-libs/ui";
+import { parseCsv as u, titleCase as d } from "../../utils/formatters.js";
+import { STYLE_CATEGORIES as f } from "../../utils/icons.js";
+import { SelectField as p, TextAreaField as m, TextField as h } from "../../components/Field.js";
+import { ImageUploadField as g } from "../../components/ImageUploadField.js";
+import { useEffect as _, useMemo as v, useState as y } from "react";
+import { ArrowLeft as b, Loader2 as x, Save as S, Shirt as C } from "lucide-react";
+import { useParams as w, useSearchParams as T } from "react-router-dom";
+import { jsx as E, jsxs as D } from "react/jsx-runtime";
+import { GlassCard as O } from "@burdenoff/fe-libs/ui";
 //#region src/coolandlovely/pages/items/StyleItemFormPage.tsx
-var D = {
+var k = {
 	brandId: "",
 	collectionId: "",
 	name: "",
@@ -24,21 +26,22 @@ var D = {
 	colours: "",
 	sizes: "",
 	materials: "",
-	tags: ""
+	tags: "",
+	imageFileId: ""
 };
-function O() {
-	let { itemId: O } = S(), [k] = C(), A = !!O, { navigateTo: j } = e(), M = s(A ? O : void 0), N = i({ pagination: {
+function A() {
+	let { itemId: A } = w(), [j] = T(), M = !!A, { navigateTo: N } = e(), P = c(M ? A : void 0), F = a({ pagination: {
 		limit: 100,
 		offset: 0
-	} }), P = o(), F = c(), [I, L] = _(() => ({
-		...D,
-		brandId: k.get("brandId") ?? "",
-		collectionId: k.get("collectionId") ?? ""
-	})), [R, z] = _({}), B = a(I.brandId ? { brandId: I.brandId } : {});
-	h(() => {
-		if (A && M.data) {
-			let e = M.data;
-			L({
+	} }), I = s(), L = l(), [R, z] = y(() => ({
+		...k,
+		brandId: j.get("brandId") ?? "",
+		collectionId: j.get("collectionId") ?? ""
+	})), [B, V] = y({}), H = o(R.brandId ? { brandId: R.brandId } : {});
+	_(() => {
+		if (M && P.data) {
+			let e = P.data;
+			z({
 				brandId: e.brandId,
 				collectionId: e.collectionId ?? "",
 				name: e.name,
@@ -50,219 +53,230 @@ function O() {
 				colours: e.colours.join(", "),
 				sizes: e.sizes.join(", "),
 				materials: e.materials.join(", "),
-				tags: e.tags.join(", ")
+				tags: e.tags.join(", "),
+				imageFileId: e.image?.id ?? ""
 			});
 		}
-	}, [A, M.data]);
-	let V = (e, t) => L((n) => ({
+	}, [M, P.data]);
+	let U = (e, t) => z((n) => ({
 		...n,
 		[e]: t
-	})), H = A ? F : P, U = g(() => (N.data?.items ?? []).map((e) => ({
+	})), W = M ? L : I, G = v(() => (F.data?.items ?? []).map((e) => ({
 		value: e.id,
 		label: e.name
-	})), [N.data]), W = g(() => (B.data ?? []).map((e) => ({
+	})), [F.data]), K = v(() => (H.data ?? []).map((e) => ({
 		value: e.id,
 		label: e.name
-	})), [B.data]), G = d.map((e) => ({
+	})), [H.data]), q = f.map((e) => ({
 		value: e,
-		label: u(e)
-	})), K = () => {
+		label: d(e)
+	})), J = () => {
 		let e = {};
-		return I.name.trim() || (e.name = "Name is required"), !A && !I.brandId && (e.brandId = "Brand is required"), I.price && Number.isNaN(Number(I.price)) && (e.price = "Price must be a number"), z(e), Object.keys(e).length === 0;
+		return R.name.trim() || (e.name = "Name is required"), !M && !R.brandId && (e.brandId = "Brand is required"), R.price && Number.isNaN(Number(R.price)) && (e.price = "Price must be a number"), V(e), Object.keys(e).length === 0;
 	};
-	return A && M.isLoading ? /* @__PURE__ */ w(t, {
+	return M && P.isLoading ? /* @__PURE__ */ E(t, {
 		title: "Edit item",
-		children: /* @__PURE__ */ w(r, { label: "Loading item…" })
-	}) : A && (M.isError || !M.data) ? /* @__PURE__ */ w(t, {
+		children: /* @__PURE__ */ E(r, { label: "Loading item…" })
+	}) : M && (P.isError || !P.data) ? /* @__PURE__ */ E(t, {
 		title: "Edit item",
-		children: /* @__PURE__ */ w(n, {
+		children: /* @__PURE__ */ E(n, {
 			title: "Item not found",
-			onRetry: () => void M.refetch()
+			onRetry: () => void P.refetch()
 		})
-	}) : /* @__PURE__ */ w(t, {
-		title: A ? "Edit item" : "New style item",
-		description: A ? "Update this catalogue piece" : "List a new shoppable piece",
-		actions: /* @__PURE__ */ T("button", {
+	}) : /* @__PURE__ */ E(t, {
+		title: M ? "Edit item" : "New style item",
+		description: M ? "Update this catalogue piece" : "List a new shoppable piece",
+		actions: /* @__PURE__ */ D("button", {
 			type: "button",
-			onClick: () => j(A && O ? `/items/${O}` : "/items"),
+			onClick: () => N(M && A ? `/items/${A}` : "/items"),
 			className: "inline-flex items-center gap-1.5 rounded-lg border border-border-seam px-3 py-2 text-sm font-medium text-text-primary transition-colors hover:bg-bg-sunken",
-			children: [/* @__PURE__ */ w(v, { className: "h-4 w-4" }), " Cancel"]
+			children: [/* @__PURE__ */ E(b, { className: "h-4 w-4" }), " Cancel"]
 		}),
-		children: /* @__PURE__ */ w("form", {
+		children: /* @__PURE__ */ E("form", {
 			onSubmit: (e) => {
-				if (e.preventDefault(), !K()) return;
-				let t = I.price.trim() ? Number(I.price) : void 0;
-				A && O ? F.mutate({
-					id: O,
+				if (e.preventDefault(), !J()) return;
+				let t = R.price.trim() ? Number(R.price) : void 0;
+				M && A ? L.mutate({
+					id: A,
 					input: {
-						name: I.name.trim(),
-						description: I.description.trim() || void 0,
-						category: I.category,
-						collectionId: I.collectionId || void 0,
-						sku: I.sku.trim() || void 0,
+						name: R.name.trim(),
+						description: R.description.trim() || void 0,
+						category: R.category,
+						collectionId: R.collectionId || void 0,
+						sku: R.sku.trim() || void 0,
 						price: t,
-						currency: I.currency.trim() || void 0,
-						colours: l(I.colours),
-						sizes: l(I.sizes),
-						materials: l(I.materials),
-						tags: l(I.tags)
+						currency: R.currency.trim() || void 0,
+						colours: u(R.colours),
+						sizes: u(R.sizes),
+						materials: u(R.materials),
+						tags: u(R.tags),
+						imageFileId: R.imageFileId || void 0
 					}
-				}, { onSuccess: () => j(`/items/${O}`) }) : P.mutate({
-					brandId: I.brandId,
-					name: I.name.trim(),
-					description: I.description.trim() || void 0,
-					category: I.category,
-					collectionId: I.collectionId || void 0,
-					sku: I.sku.trim() || void 0,
+				}, { onSuccess: () => N(`/items/${A}`) }) : I.mutate({
+					brandId: R.brandId,
+					name: R.name.trim(),
+					description: R.description.trim() || void 0,
+					category: R.category,
+					collectionId: R.collectionId || void 0,
+					sku: R.sku.trim() || void 0,
 					price: t,
-					currency: I.currency.trim() || void 0,
-					colours: l(I.colours),
-					sizes: l(I.sizes),
-					materials: l(I.materials),
-					tags: l(I.tags)
-				}, { onSuccess: (e) => j(`/items/${e.id}`) });
+					currency: R.currency.trim() || void 0,
+					colours: u(R.colours),
+					sizes: u(R.sizes),
+					materials: u(R.materials),
+					tags: u(R.tags),
+					imageFileId: R.imageFileId || void 0
+				}, { onSuccess: (e) => N(`/items/${e.id}`) });
 			},
 			className: "mx-auto max-w-2xl",
-			children: /* @__PURE__ */ T(E, {
+			children: /* @__PURE__ */ D(O, {
 				treatment: "plain",
 				className: "p-6",
 				children: [
-					/* @__PURE__ */ T("div", {
+					/* @__PURE__ */ D("div", {
 						className: "mb-6 flex items-center gap-3",
-						children: [/* @__PURE__ */ w("div", {
+						children: [/* @__PURE__ */ E("div", {
 							className: "flex h-11 w-11 items-center justify-center rounded-lg bg-[var(--color-accent-soft)] text-text-primary",
-							children: /* @__PURE__ */ w(x, { className: "h-5 w-5" })
-						}), /* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("h2", {
+							children: /* @__PURE__ */ E(C, { className: "h-5 w-5" })
+						}), /* @__PURE__ */ D("div", { children: [/* @__PURE__ */ E("h2", {
 							className: "text-base font-semibold text-text-primary",
 							children: "Item details"
-						}), /* @__PURE__ */ w("p", {
+						}), /* @__PURE__ */ E("p", {
 							className: "text-xs text-text-secondary",
 							children: "A piece belongs to a brand and optionally a collection."
 						})] })]
 					}),
-					!A && /* @__PURE__ */ w(f, {
+					!M && /* @__PURE__ */ E(p, {
 						id: "brandId",
 						label: "Brand",
-						value: I.brandId,
-						onChange: (e) => V("brandId", e),
-						options: U,
+						value: R.brandId,
+						onChange: (e) => U("brandId", e),
+						options: G,
 						required: !0,
-						placeholder: N.isLoading ? "Loading brands…" : "Select a brand",
-						error: R.brandId,
+						placeholder: F.isLoading ? "Loading brands…" : "Select a brand",
+						error: B.brandId,
 						className: "mb-4"
 					}),
-					/* @__PURE__ */ T("div", {
+					/* @__PURE__ */ D("div", {
 						className: "grid grid-cols-1 gap-4 sm:grid-cols-2",
-						children: [/* @__PURE__ */ w(m, {
+						children: [/* @__PURE__ */ E(h, {
 							id: "name",
 							label: "Name",
-							value: I.name,
-							onChange: (e) => V("name", e),
+							value: R.name,
+							onChange: (e) => U("name", e),
 							placeholder: "Silk slip dress",
 							required: !0,
-							error: R.name
-						}), /* @__PURE__ */ w(f, {
+							error: B.name
+						}), /* @__PURE__ */ E(p, {
 							id: "category",
 							label: "Category",
-							value: I.category,
-							onChange: (e) => V("category", e),
-							options: G
+							value: R.category,
+							onChange: (e) => U("category", e),
+							options: q
 						})]
 					}),
-					/* @__PURE__ */ w(p, {
+					/* @__PURE__ */ E(m, {
 						id: "description",
 						label: "Description",
-						value: I.description,
-						onChange: (e) => V("description", e),
+						value: R.description,
+						onChange: (e) => U("description", e),
 						placeholder: "Describe the piece…",
 						rows: 3,
 						className: "mt-4"
 					}),
-					/* @__PURE__ */ T("div", {
+					/* @__PURE__ */ E(g, {
+						label: "Product photo",
+						value: R.imageFileId,
+						onChange: (e) => U("imageFileId", e),
+						folder: i.items,
+						hint: "Shown across the catalogue and item page",
+						className: "mt-4"
+					}),
+					/* @__PURE__ */ D("div", {
 						className: "mt-4 grid grid-cols-1 gap-4 sm:grid-cols-3",
 						children: [
-							/* @__PURE__ */ w(m, {
+							/* @__PURE__ */ E(h, {
 								id: "price",
 								label: "Price",
 								type: "number",
-								value: I.price,
-								onChange: (e) => V("price", e),
+								value: R.price,
+								onChange: (e) => U("price", e),
 								placeholder: "0.00",
-								error: R.price
+								error: B.price
 							}),
-							/* @__PURE__ */ w(m, {
+							/* @__PURE__ */ E(h, {
 								id: "currency",
 								label: "Currency",
-								value: I.currency,
-								onChange: (e) => V("currency", e),
+								value: R.currency,
+								onChange: (e) => U("currency", e),
 								placeholder: "USD"
 							}),
-							/* @__PURE__ */ w(m, {
+							/* @__PURE__ */ E(h, {
 								id: "sku",
 								label: "SKU",
-								value: I.sku,
-								onChange: (e) => V("sku", e),
+								value: R.sku,
+								onChange: (e) => U("sku", e),
 								placeholder: "ABC-123"
 							})
 						]
 					}),
-					/* @__PURE__ */ w(f, {
+					/* @__PURE__ */ E(p, {
 						id: "collectionId",
 						label: "Collection (optional)",
-						value: I.collectionId,
-						onChange: (e) => V("collectionId", e),
-						options: W,
-						placeholder: I.brandId ? B.isLoading ? "Loading collections…" : "No collection" : "Select a brand first",
+						value: R.collectionId,
+						onChange: (e) => U("collectionId", e),
+						options: K,
+						placeholder: R.brandId ? H.isLoading ? "Loading collections…" : "No collection" : "Select a brand first",
 						className: "mt-4"
 					}),
-					/* @__PURE__ */ T("div", {
+					/* @__PURE__ */ D("div", {
 						className: "mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2",
 						children: [
-							/* @__PURE__ */ w(m, {
+							/* @__PURE__ */ E(h, {
 								id: "colours",
 								label: "Colours",
-								value: I.colours,
-								onChange: (e) => V("colours", e),
+								value: R.colours,
+								onChange: (e) => U("colours", e),
 								placeholder: "black, ivory",
 								hint: "Comma-separated"
 							}),
-							/* @__PURE__ */ w(m, {
+							/* @__PURE__ */ E(h, {
 								id: "sizes",
 								label: "Sizes",
-								value: I.sizes,
-								onChange: (e) => V("sizes", e),
+								value: R.sizes,
+								onChange: (e) => U("sizes", e),
 								placeholder: "XS, S, M, L",
 								hint: "Comma-separated"
 							}),
-							/* @__PURE__ */ w(m, {
+							/* @__PURE__ */ E(h, {
 								id: "materials",
 								label: "Materials",
-								value: I.materials,
-								onChange: (e) => V("materials", e),
+								value: R.materials,
+								onChange: (e) => U("materials", e),
 								placeholder: "silk, cotton",
 								hint: "Comma-separated"
 							}),
-							/* @__PURE__ */ w(m, {
+							/* @__PURE__ */ E(h, {
 								id: "tags",
 								label: "Tags",
-								value: I.tags,
-								onChange: (e) => V("tags", e),
+								value: R.tags,
+								onChange: (e) => U("tags", e),
 								placeholder: "summer, party",
 								hint: "Comma-separated"
 							})
 						]
 					}),
-					H.isError && /* @__PURE__ */ w("p", {
+					W.isError && /* @__PURE__ */ E("p", {
 						className: "mt-4 rounded-lg bg-status-error-bg-subtle px-3 py-2 text-sm text-status-error-text",
-						children: H.error instanceof Error ? H.error.message : "Something went wrong"
+						children: W.error instanceof Error ? W.error.message : "Something went wrong"
 					}),
-					/* @__PURE__ */ w("div", {
+					/* @__PURE__ */ E("div", {
 						className: "mt-6 flex justify-end gap-2",
-						children: /* @__PURE__ */ T("button", {
+						children: /* @__PURE__ */ D("button", {
 							type: "submit",
-							disabled: H.isPending,
+							disabled: W.isPending,
 							className: "inline-flex items-center gap-1.5 rounded-lg bg-action-primary-bg px-5 py-2 text-sm font-medium text-action-primary-text transition-colors hover:bg-action-primary-bg/90 disabled:opacity-50",
-							children: [H.isPending ? /* @__PURE__ */ w(y, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ w(b, { className: "h-4 w-4" }), A ? "Save changes" : "Create item"]
+							children: [W.isPending ? /* @__PURE__ */ E(x, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ E(S, { className: "h-4 w-4" }), M ? "Save changes" : "Create item"]
 						})
 					})
 				]
@@ -271,6 +285,6 @@ function O() {
 	});
 }
 //#endregion
-export { O as StyleItemFormPage };
+export { A as StyleItemFormPage };
 //# sourceMappingURL=StyleItemFormPage.js.map

package/dist/coolandlovely/pages/items/StyleItemFormPage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StyleItemFormPage.js","names":[],"sources":["../../../../src/coolandlovely/pages/items/StyleItemFormPage.tsx"],"sourcesContent":["/*\n Style Item Create / Edit Page\n * @module coolandlovely/pages/items\n \n Drives `cooCreateStyleItem` (new) and `cooUpdateStyleItem` (edit).\n * Brand selection is required on create (and locked on edit). The collection\n * select is scoped to the chosen brand.\n */\n\nimport { useEffect, useMemo, useState } from 'react';\nimport { useParams, useSearchParams } from 'react-router-dom';\nimport { ArrowLeft, Loader2, Save, Shirt } from 'lucide-react';\nimport { GlassCard } from '@burdenoff/fe-libs/ui';\nimport { PageLayout } from '../../components/PageLayout';\nimport { LoadingView, ErrorView } from '../../components/StateViews';\nimport { TextField, TextAreaField, SelectField } from '../../components/Field';\nimport { useCoolAndLovely } from '../../context/CoolAndLovelyContext';\nimport {\n useStyleItem,\n useCreateStyleItem,\n useUpdateStyleItem,\n useBrands,\n useCollections,\n} from '../../hooks';\nimport { STYLE_CATEGORIES } from '../../utils/icons';\nimport { parseCsv, titleCase } from '../../utils/formatters';\nimport type { CooStyleCategory } from '../../types';\n\ninterface FormState {\n brandId: string;\n collectionId: string;\n name: string;\n description: string;\n category: CooStyleCategory;\n sku: string;\n price: string;\n currency: string;\n colours: string;\n sizes: string;\n materials: string;\n tags: string;\n}\n\nconst EMPTY: FormState = {\n brandId: '',\n collectionId: '',\n name: '',\n description: '',\n category: 'OTHER',\n sku: '',\n price: '',\n currency: 'USD',\n colours: '',\n sizes: '',\n materials: '',\n tags: '',\n};\n\nexport function StyleItemFormPage() {\n const { itemId } = useParams<{ itemId: string }>();\n const [searchParams] = useSearchParams();\n const isEdit = Boolean(itemId);\n const { navigateTo } = useCoolAndLovely();\n\n const existing = useStyleItem(isEdit ? itemId : undefined);\n const brands = useBrands({ pagination: { limit: 100, offset: 0 } });\n const createItem = useCreateStyleItem();\n const updateItem = useUpdateStyleItem();\n\n const [form, setForm] = useState<FormState>(() => ({\n ...EMPTY,\n brandId: searchParams.get('brandId') ?? '',\n collectionId: searchParams.get('collectionId') ?? '',\n }));\n const [errors, setErrors] = useState<Partial<Record<keyof FormState, string>>>({});\n\n // Collections scoped to the selected brand (for the optional collection select)\n const collections = useCollections(form.brandId ? { brandId: form.brandId } : {});\n\n useEffect(() => {\n if (isEdit && existing.data) {\n const it = existing.data;\n setForm({\n brandId: it.brandId,\n collectionId: it.collectionId ?? '',\n name: it.name,\n description: it.description ?? '',\n category: it.category,\n sku: it.sku ?? '',\n price: String(it.price),\n currency: it.currency,\n colours: it.colours.join(', '),\n sizes: it.sizes.join(', '),\n materials: it.materials.join(', '),\n tags: it.tags.join(', '),\n });\n }\n }, [isEdit, existing.data]);\n\n const setField = <K extends keyof FormState>(key: K, value: FormState[K]) =>\n setForm((f) => ({ ...f, [key]: value }));\n\n const mutation = isEdit ? updateItem : createItem;\n\n const brandOptions = useMemo(\n () => (brands.data?.items ?? []).map((b) => ({ value: b.id, label: b.name })),\n [brands.data]\n );\n const collectionOptions = useMemo(\n () => (collections.data ?? []).map((c) => ({ value: c.id, label: c.name })),\n [collections.data]\n );\n const categoryOptions = STYLE_CATEGORIES.map((c) => ({ value: c, label: titleCase(c) }));\n\n const validate = (): boolean => {\n const next: Partial<Record<keyof FormState, string>> = {};\n if (!form.name.trim()) next.name = 'Name is required';\n if (!isEdit && !form.brandId) next.brandId = 'Brand is required';\n if (form.price && Number.isNaN(Number(form.price))) next.price = 'Price must be a number';\n setErrors(next);\n return Object.keys(next).length === 0;\n };\n\n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n if (!validate()) return;\n\n const priceNum = form.price.trim() ? Number(form.price) : undefined;\n\n if (isEdit && itemId) {\n updateItem.mutate(\n {\n id: itemId,\n input: {\n name: form.name.trim(),\n description: form.description.trim() \|\| undefined,\n category: form.category,\n collectionId: form.collectionId \|\| undefined,\n sku: form.sku.trim() \|\| undefined,\n price: priceNum,\n currency: form.currency.trim() \|\| undefined,\n colours: parseCsv(form.colours),\n sizes: parseCsv(form.sizes),\n materials: parseCsv(form.materials),\n tags: parseCsv(form.tags),\n },\n },\n { onSuccess: () => navigateTo(`/items/${itemId}`) }\n );\n } else {\n createItem.mutate(\n {\n brandId: form.brandId,\n name: form.name.trim(),\n description: form.description.trim() \|\| undefined,\n category: form.category,\n collectionId: form.collectionId \|\| undefined,\n sku: form.sku.trim() \|\| undefined,\n price: priceNum,\n currency: form.currency.trim() \|\| undefined,\n colours: parseCsv(form.colours),\n sizes: parseCsv(form.sizes),\n materials: parseCsv(form.materials),\n tags: parseCsv(form.tags),\n },\n { onSuccess: (item) => navigateTo(`/items/${item.id}`) }\n );\n }\n };\n\n if (isEdit && existing.isLoading) {\n return (\n <PageLayout title=\"Edit item\">\n <LoadingView label=\"Loading item…\" />\n </PageLayout>\n );\n }\n\n if (isEdit && (existing.isError \|\| !existing.data)) {\n return (\n <PageLayout title=\"Edit item\">\n <ErrorView title=\"Item not found\" onRetry={() => void existing.refetch()} />\n </PageLayout>\n );\n }\n\n return (\n <PageLayout\n title={isEdit ? 'Edit item' : 'New style item'}\n description={isEdit ? 'Update this catalogue piece' : 'List a new shoppable piece'}\n actions={\n <button\n type=\"button\"\n onClick={() => navigateTo(isEdit && itemId ? `/items/${itemId}` : '/items')}\n className=\"inline-flex items-center gap-1.5 rounded-lg border border-border-seam px-3 py-2 text-sm font-medium text-text-primary transition-colors hover:bg-bg-sunken\"\n >\n <ArrowLeft className=\"h-4 w-4\" /> Cancel\n </button>\n }\n >\n <form onSubmit={handleSubmit} className=\"mx-auto max-w-2xl\">\n <GlassCard treatment=\"plain\" className=\"p-6\">\n <div className=\"mb-6 flex items-center gap-3\">\n <div className=\"flex h-11 w-11 items-center justify-center rounded-lg bg-[var(--color-accent-soft)] text-text-primary\">\n <Shirt className=\"h-5 w-5\" />\n </div>\n <div>\n <h2 className=\"text-base font-semibold text-text-primary\">Item details</h2>\n <p className=\"text-xs text-text-secondary\">\n A piece belongs to a brand and optionally a collection.\n </p>\n </div>\n </div>\n\n {!isEdit && (\n <SelectField\n id=\"brandId\"\n label=\"Brand\"\n value={form.brandId}\n onChange={(v) => setField('brandId', v)}\n options={brandOptions}\n required\n placeholder={brands.isLoading ? 'Loading brands…' : 'Select a brand'}\n error={errors.brandId}\n className=\"mb-4\"\n />\n )}\n\n <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2\">\n <TextField\n id=\"name\"\n label=\"Name\"\n value={form.name}\n onChange={(v) => setField('name', v)}\n placeholder=\"Silk slip dress\"\n required\n error={errors.name}\n />\n <SelectField\n id=\"category\"\n label=\"Category\"\n value={form.category}\n onChange={(v) => setField('category', v as CooStyleCategory)}\n options={categoryOptions}\n />\n </div>\n\n <TextAreaField\n id=\"description\"\n label=\"Description\"\n value={form.description}\n onChange={(v) => setField('description', v)}\n placeholder=\"Describe the piece…\"\n rows={3}\n className=\"mt-4\"\n />\n\n <div className=\"mt-4 grid grid-cols-1 gap-4 sm:grid-cols-3\">\n <TextField\n id=\"price\"\n label=\"Price\"\n type=\"number\"\n value={form.price}\n onChange={(v) => setField('price', v)}\n placeholder=\"0.00\"\n error={errors.price}\n />\n <TextField\n id=\"currency\"\n label=\"Currency\"\n value={form.currency}\n onChange={(v) => setField('currency', v)}\n placeholder=\"USD\"\n />\n <TextField\n id=\"sku\"\n label=\"SKU\"\n value={form.sku}\n onChange={(v) => setField('sku', v)}\n placeholder=\"ABC-123\"\n />\n </div>\n\n <SelectField\n id=\"collectionId\"\n label=\"Collection (optional)\"\n value={form.collectionId}\n onChange={(v) => setField('collectionId', v)}\n options={collectionOptions}\n placeholder={\n !form.brandId\n ? 'Select a brand first'\n : collections.isLoading\n ? 'Loading collections…'\n : 'No collection'\n }\n className=\"mt-4\"\n />\n\n <div className=\"mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2\">\n <TextField\n id=\"colours\"\n label=\"Colours\"\n value={form.colours}\n onChange={(v) => setField('colours', v)}\n placeholder=\"black, ivory\"\n hint=\"Comma-separated\"\n />\n <TextField\n id=\"sizes\"\n label=\"Sizes\"\n value={form.sizes}\n onChange={(v) => setField('sizes', v)}\n placeholder=\"XS, S, M, L\"\n hint=\"Comma-separated\"\n />\n <TextField\n id=\"materials\"\n label=\"Materials\"\n value={form.materials}\n onChange={(v) => setField('materials', v)}\n placeholder=\"silk, cotton\"\n hint=\"Comma-separated\"\n />\n <TextField\n id=\"tags\"\n label=\"Tags\"\n value={form.tags}\n onChange={(v) => setField('tags', v)}\n placeholder=\"summer, party\"\n hint=\"Comma-separated\"\n />\n </div>\n\n {mutation.isError && (\n <p className=\"mt-4 rounded-lg bg-status-error-bg-subtle px-3 py-2 text-sm text-status-error-text\">\n {mutation.error instanceof Error ? mutation.error.message : 'Something went wrong'}\n </p>\n )}\n\n <div className=\"mt-6 flex justify-end gap-2\">\n <button\n type=\"submit\"\n disabled={mutation.isPending}\n className=\"inline-flex items-center gap-1.5 rounded-lg bg-action-primary-bg px-5 py-2 text-sm font-medium text-action-primary-text transition-colors hover:bg-action-primary-bg/90 disabled:opacity-50\"\n >\n {mutation.isPending ? (\n <Loader2 className=\"h-4 w-4 animate-spin\" />\n ) : (\n <Save className=\"h-4 w-4\" />\n )}\n {isEdit ? 'Save changes' : 'Create item'}\n </button>\n </div>\n </GlassCard>\n </form>\n </PageLayout>\n );\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"StyleItemFormPage.js","names":[],"sources":["../../../../src/coolandlovely/pages/items/StyleItemFormPage.tsx"],"sourcesContent":["/*\n Style Item Create / Edit Page\n * @module coolandlovely/pages/items\n \n Drives `cooCreateStyleItem` (new) and `cooUpdateStyleItem` (edit).\n * Brand selection is required on create (and locked on edit). The collection\n * select is scoped to the chosen brand.\n */\n\nimport { useEffect, useMemo, useState } from 'react';\nimport { useParams, useSearchParams } from 'react-router-dom';\nimport { ArrowLeft, Loader2, Save, Shirt } from 'lucide-react';\nimport { GlassCard } from '@burdenoff/fe-libs/ui';\nimport { PageLayout } from '../../components/PageLayout';\nimport { LoadingView, ErrorView } from '../../components/StateViews';\nimport { TextField, TextAreaField, SelectField } from '../../components/Field';\nimport { ImageUploadField } from '../../components/ImageUploadField';\nimport { useCoolAndLovely } from '../../context/CoolAndLovelyContext';\nimport {\n useStyleItem,\n useCreateStyleItem,\n useUpdateStyleItem,\n useBrands,\n useCollections,\n} from '../../hooks';\nimport { COO_FILE_FOLDERS } from '../../hooks/useFiles';\nimport { STYLE_CATEGORIES } from '../../utils/icons';\nimport { parseCsv, titleCase } from '../../utils/formatters';\nimport type { CooStyleCategory } from '../../types';\n\ninterface FormState {\n brandId: string;\n collectionId: string;\n name: string;\n description: string;\n category: CooStyleCategory;\n sku: string;\n price: string;\n currency: string;\n colours: string;\n sizes: string;\n materials: string;\n tags: string;\n imageFileId: string;\n}\n\nconst EMPTY: FormState = {\n brandId: '',\n collectionId: '',\n name: '',\n description: '',\n category: 'OTHER',\n sku: '',\n price: '',\n currency: 'USD',\n colours: '',\n sizes: '',\n materials: '',\n tags: '',\n imageFileId: '',\n};\n\nexport function StyleItemFormPage() {\n const { itemId } = useParams<{ itemId: string }>();\n const [searchParams] = useSearchParams();\n const isEdit = Boolean(itemId);\n const { navigateTo } = useCoolAndLovely();\n\n const existing = useStyleItem(isEdit ? itemId : undefined);\n const brands = useBrands({ pagination: { limit: 100, offset: 0 } });\n const createItem = useCreateStyleItem();\n const updateItem = useUpdateStyleItem();\n\n const [form, setForm] = useState<FormState>(() => ({\n ...EMPTY,\n brandId: searchParams.get('brandId') ?? '',\n collectionId: searchParams.get('collectionId') ?? '',\n }));\n const [errors, setErrors] = useState<Partial<Record<keyof FormState, string>>>({});\n\n // Collections scoped to the selected brand (for the optional collection select)\n const collections = useCollections(form.brandId ? { brandId: form.brandId } : {});\n\n useEffect(() => {\n if (isEdit && existing.data) {\n const it = existing.data;\n setForm({\n brandId: it.brandId,\n collectionId: it.collectionId ?? '',\n name: it.name,\n description: it.description ?? '',\n category: it.category,\n sku: it.sku ?? '',\n price: String(it.price),\n currency: it.currency,\n colours: it.colours.join(', '),\n sizes: it.sizes.join(', '),\n materials: it.materials.join(', '),\n tags: it.tags.join(', '),\n imageFileId: it.image?.id ?? '',\n });\n }\n }, [isEdit, existing.data]);\n\n const setField = <K extends keyof FormState>(key: K, value: FormState[K]) =>\n setForm((f) => ({ ...f, [key]: value }));\n\n const mutation = isEdit ? updateItem : createItem;\n\n const brandOptions = useMemo(\n () => (brands.data?.items ?? []).map((b) => ({ value: b.id, label: b.name })),\n [brands.data]\n );\n const collectionOptions = useMemo(\n () => (collections.data ?? []).map((c) => ({ value: c.id, label: c.name })),\n [collections.data]\n );\n const categoryOptions = STYLE_CATEGORIES.map((c) => ({ value: c, label: titleCase(c) }));\n\n const validate = (): boolean => {\n const next: Partial<Record<keyof FormState, string>> = {};\n if (!form.name.trim()) next.name = 'Name is required';\n if (!isEdit && !form.brandId) next.brandId = 'Brand is required';\n if (form.price && Number.isNaN(Number(form.price))) next.price = 'Price must be a number';\n setErrors(next);\n return Object.keys(next).length === 0;\n };\n\n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n if (!validate()) return;\n\n const priceNum = form.price.trim() ? Number(form.price) : undefined;\n\n if (isEdit && itemId) {\n updateItem.mutate(\n {\n id: itemId,\n input: {\n name: form.name.trim(),\n description: form.description.trim() \|\| undefined,\n category: form.category,\n collectionId: form.collectionId \|\| undefined,\n sku: form.sku.trim() \|\| undefined,\n price: priceNum,\n currency: form.currency.trim() \|\| undefined,\n colours: parseCsv(form.colours),\n sizes: parseCsv(form.sizes),\n materials: parseCsv(form.materials),\n tags: parseCsv(form.tags),\n imageFileId: form.imageFileId \|\| undefined,\n },\n },\n { onSuccess: () => navigateTo(`/items/${itemId}`) }\n );\n } else {\n createItem.mutate(\n {\n brandId: form.brandId,\n name: form.name.trim(),\n description: form.description.trim() \|\| undefined,\n category: form.category,\n collectionId: form.collectionId \|\| undefined,\n sku: form.sku.trim() \|\| undefined,\n price: priceNum,\n currency: form.currency.trim() \|\| undefined,\n colours: parseCsv(form.colours),\n sizes: parseCsv(form.sizes),\n materials: parseCsv(form.materials),\n tags: parseCsv(form.tags),\n imageFileId: form.imageFileId \|\| undefined,\n },\n { onSuccess: (item) => navigateTo(`/items/${item.id}`) }\n );\n }\n };\n\n if (isEdit && existing.isLoading) {\n return (\n <PageLayout title=\"Edit item\">\n <LoadingView label=\"Loading item…\" />\n </PageLayout>\n );\n }\n\n if (isEdit && (existing.isError \|\| !existing.data)) {\n return (\n <PageLayout title=\"Edit item\">\n <ErrorView title=\"Item not found\" onRetry={() => void existing.refetch()} />\n </PageLayout>\n );\n }\n\n return (\n <PageLayout\n title={isEdit ? 'Edit item' : 'New style item'}\n description={isEdit ? 'Update this catalogue piece' : 'List a new shoppable piece'}\n actions={\n <button\n type=\"button\"\n onClick={() => navigateTo(isEdit && itemId ? `/items/${itemId}` : '/items')}\n className=\"inline-flex items-center gap-1.5 rounded-lg border border-border-seam px-3 py-2 text-sm font-medium text-text-primary transition-colors hover:bg-bg-sunken\"\n >\n <ArrowLeft className=\"h-4 w-4\" /> Cancel\n </button>\n }\n >\n <form onSubmit={handleSubmit} className=\"mx-auto max-w-2xl\">\n <GlassCard treatment=\"plain\" className=\"p-6\">\n <div className=\"mb-6 flex items-center gap-3\">\n <div className=\"flex h-11 w-11 items-center justify-center rounded-lg bg-[var(--color-accent-soft)] text-text-primary\">\n <Shirt className=\"h-5 w-5\" />\n </div>\n <div>\n <h2 className=\"text-base font-semibold text-text-primary\">Item details</h2>\n <p className=\"text-xs text-text-secondary\">\n A piece belongs to a brand and optionally a collection.\n </p>\n </div>\n </div>\n\n {!isEdit && (\n <SelectField\n id=\"brandId\"\n label=\"Brand\"\n value={form.brandId}\n onChange={(v) => setField('brandId', v)}\n options={brandOptions}\n required\n placeholder={brands.isLoading ? 'Loading brands…' : 'Select a brand'}\n error={errors.brandId}\n className=\"mb-4\"\n />\n )}\n\n <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2\">\n <TextField\n id=\"name\"\n label=\"Name\"\n value={form.name}\n onChange={(v) => setField('name', v)}\n placeholder=\"Silk slip dress\"\n required\n error={errors.name}\n />\n <SelectField\n id=\"category\"\n label=\"Category\"\n value={form.category}\n onChange={(v) => setField('category', v as CooStyleCategory)}\n options={categoryOptions}\n />\n </div>\n\n <TextAreaField\n id=\"description\"\n label=\"Description\"\n value={form.description}\n onChange={(v) => setField('description', v)}\n placeholder=\"Describe the piece…\"\n rows={3}\n className=\"mt-4\"\n />\n\n <ImageUploadField\n label=\"Product photo\"\n value={form.imageFileId}\n onChange={(id) => setField('imageFileId', id)}\n folder={COO_FILE_FOLDERS.items}\n hint=\"Shown across the catalogue and item page\"\n className=\"mt-4\"\n />\n\n <div className=\"mt-4 grid grid-cols-1 gap-4 sm:grid-cols-3\">\n <TextField\n id=\"price\"\n label=\"Price\"\n type=\"number\"\n value={form.price}\n onChange={(v) => setField('price', v)}\n placeholder=\"0.00\"\n error={errors.price}\n />\n <TextField\n id=\"currency\"\n label=\"Currency\"\n value={form.currency}\n onChange={(v) => setField('currency', v)}\n placeholder=\"USD\"\n />\n <TextField\n id=\"sku\"\n label=\"SKU\"\n value={form.sku}\n onChange={(v) => setField('sku', v)}\n placeholder=\"ABC-123\"\n />\n </div>\n\n <SelectField\n id=\"collectionId\"\n label=\"Collection (optional)\"\n value={form.collectionId}\n onChange={(v) => setField('collectionId', v)}\n options={collectionOptions}\n placeholder={\n !form.brandId\n ? 'Select a brand first'\n : collections.isLoading\n ? 'Loading collections…'\n : 'No collection'\n }\n className=\"mt-4\"\n />\n\n <div className=\"mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2\">\n <TextField\n id=\"colours\"\n label=\"Colours\"\n value={form.colours}\n onChange={(v) => setField('colours', v)}\n placeholder=\"black, ivory\"\n hint=\"Comma-separated\"\n />\n <TextField\n id=\"sizes\"\n label=\"Sizes\"\n value={form.sizes}\n onChange={(v) => setField('sizes', v)}\n placeholder=\"XS, S, M, L\"\n hint=\"Comma-separated\"\n />\n <TextField\n id=\"materials\"\n label=\"Materials\"\n value={form.materials}\n onChange={(v) => setField('materials', v)}\n placeholder=\"silk, cotton\"\n hint=\"Comma-separated\"\n />\n <TextField\n id=\"tags\"\n label=\"Tags\"\n value={form.tags}\n onChange={(v) => setField('tags', v)}\n placeholder=\"summer, party\"\n hint=\"Comma-separated\"\n />\n </div>\n\n {mutation.isError && (\n <p className=\"mt-4 rounded-lg bg-status-error-bg-subtle px-3 py-2 text-sm text-status-error-text\">\n {mutation.error instanceof Error ? mutation.error.message : 'Something went wrong'}\n </p>\n )}\n\n <div className=\"mt-6 flex justify-end gap-2\">\n <button\n type=\"submit\"\n disabled={mutation.isPending}\n className=\"inline-flex items-center gap-1.5 rounded-lg bg-action-primary-bg px-5 py-2 text-sm font-medium text-action-primary-text transition-colors hover:bg-action-primary-bg/90 disabled:opacity-50\"\n >\n {mutation.isPending ? (\n <Loader2 className=\"h-4 w-4 animate-spin\" />\n ) : (\n <Save className=\"h-4 w-4\" />\n )}\n {isEdit ? 'Save changes' : 'Create item'}\n </button>\n </div>\n </GlassCard>\n </form>\n </PageLayout>\n );\n}\n"],"mappings":"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"}

package/dist/coolandlovely/pages/items/StyleItemsListPage.js CHANGED Viewed

@@ -109,6 +109,8 @@ function C() {
 						children: [/* @__PURE__ */ y(o, {
 							icon: d(e.category, 28),
 							seed: e.id,
+							fileId: e.image?.id,
+							alt: e.name,
 							className: "h-36 w-full"
 						}), /* @__PURE__ */ y("div", {
 							className: "absolute right-2 top-2",