4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T221b,import { useMemo, useState } from 'react' import { Button } from '../Button' import { Input, Field } from '../Input' import { BottomNav, type NavItem } from '../BottomNav' import { NavLink } from '../NavLink' import { Empty } from '../feedback' import { Blob, Badge } from '../media' import { Grid, Row, Shell, Sidebar, Spacer, Stack } from '../layout' import { Stat } from '../readout' import { Segmented } from '../Segmented' import { Card } from '../surface' import { Table } from '../table' import { Eyebrow, Heading, Text } from '../text' const NAV: NavItem[] = [ { href: '/', label: 'Overview', icon: 'overview', tone: 'purple' }, { href: '/inventory', label: 'Inventory', icon: 'database', tone: 'blue' }, { href: '/orders', label: 'Orders', icon: 'cart', tone: 'mint' }, { href: '/suppliers', label: 'Suppliers', icon: 'users', tone: 'yellow' }, { href: '/settings', label: 'Settings', icon: 'settings', tone: 'orange' }, ] const HERE = '/inventory' const NUMBER = new Intl.NumberFormat('en-US') const MONEY = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }) interface StockItem { id: string sku: string name: string category: string stock: number reorderAt: number price: number } const INITIAL_ITEMS: StockItem[] = [ { id: 'cloud-lamp', sku: 'LMP-104', name: 'Cloud lamp', category: 'Lighting', stock: 18, reorderAt: 8, price: 64 }, { id: 'pebble-mug', sku: 'MUG-220', name: 'Pebble mug', category: 'Kitchen', stock: 6, reorderAt: 10, price: 24 }, { id: 'soft-clock', sku: 'CLK-018', name: 'Soft clock', category: 'Decor', stock: 0, reorderAt: 5, price: 42 }, { id: 'loop-vase', sku: 'VAS-431', name: 'Loop vase', category: 'Decor', stock: 24, reorderAt: 8, price: 48 }, { id: 'pocket-tray', sku: 'TRY-092', name: 'Pocket tray', category: 'Storage', stock: 9, reorderAt: 6, price: 18 }, ] type StockFilter = 'all' | 'low' | 'out' function stockTone(item: StockItem): 'up' | 'warn' | 'down' { if (item.stock === 0) return 'down' if (item.stock <= item.reorderAt) return 'warn' return 'up' } function stockLabel(item: StockItem): string { if (item.stock === 0) return 'Out of stock' if (item.stock <= item.reorderAt) return 'Low stock' return 'In stock' } /** A complete inventory workspace with searchable stock, meaningful status * filters, sortable columns, record detail, and a working receiving action. */ export function InventoryBlock() { const [items, setItems] = useState(INITIAL_ITEMS) const [filter, setFilter] = useState('all') const [query, setQuery] = useState('') const [selectedId, setSelectedId] = useState(INITIAL_ITEMS[0]!.id) const visible = useMemo(() => { const normalized = query.trim().toLowerCase() return items.filter((item) => { const matchesQuery = !normalized || `${item.name} ${item.sku} ${item.category}`.toLowerCase().includes(normalized) const matchesFilter = filter === 'all' || (filter === 'low' && item.stock > 0 && item.stock <= item.reorderAt) || (filter === 'out' && item.stock === 0) return matchesQuery && matchesFilter }) }, [filter, items, query]) const selected = items.find((item) => item.id === selectedId) ?? items[0]! const lowCount = items.filter((item) => item.stock > 0 && item.stock <= item.reorderAt).length const outCount = items.filter((item) => item.stock === 0).length const inventoryValue = items.reduce((sum, item) => sum + item.stock * item.price, 0) function receive(id: string) { setItems((current) => current.map((item) => (item.id === id ? { ...item, stock: item.stock + 12 } : item)), ) } return ( <> Stockroom {NAV.map((item) => ( {item.label} ))} Operations Inventory Know what is ready to sell and what needs attention.

{(id, describedBy) => ( )}

{visible.length > 0 ? ( item.id} onRowClick={(item) => setSelectedId(item.id)} getRowLabel={(item) => `Open ${item.name}`} columns={[ { key: 'product', header: 'Product', truncate: true, render: (item) => item.name, sort: (a, b) => a.name.localeCompare(b.name), }, { key: 'sku', header: 'SKU', mono: true, render: (item) => item.sku }, { key: 'stock', header: 'Stock', align: 'right', render: (item) => NUMBER.format(item.stock), sort: (a, b) => a.stock - b.stock, }, ]} /> ) : (

Try another search or stock filter.

)} {selected.sku} {selected.name} {selected.category} {stockLabel(selected)} On hand {NUMBER.format(selected.stock)} Reorder at {NUMBER.format(selected.reorderAt)} Unit price {MONEY.format(selected.price)} ) } 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L4e",null,{"namespace":"@1st-pouf","registryDependencies":["https://1st-pouf.worksonmy.dev/r/base.json","https://1st-pouf.worksonmy.dev/r/bottom-nav.json","https://1st-pouf.worksonmy.dev/r/button.json","https://1st-pouf.worksonmy.dev/r/feedback.json","https://1st-pouf.worksonmy.dev/r/input.json","https://1st-pouf.worksonmy.dev/r/layout.json","https://1st-pouf.worksonmy.dev/r/media.json","https://1st-pouf.worksonmy.dev/r/nav-link.json","https://1st-pouf.worksonmy.dev/r/readout.json","https://1st-pouf.worksonmy.dev/r/segmented.json","https://1st-pouf.worksonmy.dev/r/surface.json","https://1st-pouf.worksonmy.dev/r/table.json","https://1st-pouf.worksonmy.dev/r/text.json"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/pouf/blocks/inventory.tsx","content":"$50","type":"registry:block","target":"components/pouf/blocks/inventory.tsx"}],"className":"h-[70svh] min-h-80"}]]}]