diff --git a/apps/web/src/components/molecules/InventoryImagesStep.scss b/apps/web/src/components/molecules/InventoryImagesStep.scss new file mode 100644 index 0000000..45ff21f --- /dev/null +++ b/apps/web/src/components/molecules/InventoryImagesStep.scss @@ -0,0 +1,58 @@ +.inventory-images-step { + display: grid; + gap: var(--space-4); + grid-column: 1 / -1; + border: var(--border-thin) solid var(--color-border); + border-radius: var(--radius-lg); + padding: var(--space-4); + background: var(--color-surface); +} + +.inventory-images-step__header { + display: flex; + justify-content: space-between; + gap: var(--space-4); +} + +.inventory-images-step__intro { + margin: var(--space-2) 0 0; + color: var(--color-text-muted); + font-size: var(--text-sm); +} + +.inventory-images-step__count { + align-self: start; + color: var(--color-warning-text); + font-size: var(--text-sm); + font-weight: var(--weight-semibold); +} + +.inventory-images-step__list { + display: grid; + gap: var(--space-2); + margin: 0; + padding: 0; + list-style: none; +} + +.inventory-images-step__list li { + display: flex; + justify-content: space-between; + align-items: center; + gap: var(--space-3); + padding: var(--space-3) 0; + border-top: var(--border-thin) solid var(--color-border); +} + +.inventory-images-step__list a { + color: var(--color-interactive-text); + font-weight: var(--weight-semibold); +} + +@media (max-width: 640px) { + .inventory-images-step__header, + .inventory-images-step__list li { + align-items: flex-start; + flex-direction: column; + } +} diff --git a/apps/web/src/components/molecules/InventoryImagesStep.stories.js b/apps/web/src/components/molecules/InventoryImagesStep.stories.js new file mode 100644 index 0000000..a7e9ebd --- /dev/null +++ b/apps/web/src/components/molecules/InventoryImagesStep.stories.js @@ -0,0 +1,15 @@ +import InventoryImagesStep from './InventoryImagesStep.vue'; + +export default { title: 'Molecules/InventoryImagesStep', component: InventoryImagesStep }; + +export const MissingImages = { + args: { + missingImages: 2, + inventory: [ + { id: 'copy-1', status: 'ACTIVE' }, + { id: 'copy-2', status: 'ACTIVE' }, + ], + }, +}; + +export const Empty = { args: { missingImages: 0, inventory: [] } }; diff --git a/apps/web/src/components/molecules/InventoryImagesStep.vue b/apps/web/src/components/molecules/InventoryImagesStep.vue new file mode 100644 index 0000000..cb7f69e --- /dev/null +++ b/apps/web/src/components/molecules/InventoryImagesStep.vue @@ -0,0 +1,30 @@ + + + + + diff --git a/apps/web/src/pages/AdminHomePage.vue b/apps/web/src/pages/AdminHomePage.vue index 2967582..a5dad90 100644 --- a/apps/web/src/pages/AdminHomePage.vue +++ b/apps/web/src/pages/AdminHomePage.vue @@ -1,6 +1,5 @@