@fayz-ai/plugin-inventory 0.1.1 → 0.1.2

package/README.md

@@ -0,0 +1,50 @@
+# @fayz-ai/plugin-inventory
+
+> Stock that actually ties to your business — products, movements, recipes, and low-stock alerts.
+
+[![npm](https://img.shields.io/npm/v/@fayz-ai/plugin-inventory.svg)](https://www.npmjs.com/package/@fayz-ai/plugin-inventory)
+[![license](https://img.shields.io/npm/l/@fayz-ai/plugin-inventory.svg)](https://github.com/FayaLabs/fayz-sdk/blob/main/LICENSE)
+
+Inventory is the universal organ — a salon counts product, a restaurant counts ingredients, a clinic counts supplies. `plugin-inventory` is that organ as a plugin: a product catalog, stock entry/exit/history, optional recipes (bill of materials), and a dashboard that surfaces stock value and what's running low. It's `scope: universal`, so it snaps into any vertical.
+
+It ships real data out of the box: a Supabase provider with an automatic mock fallback, so a fresh app demos immediately and a configured one persists for real. Recipes, stock locations, and batch tracking are opt-in modules; product types, currency, and labels are configurable. The host dashboard gets inventory KPI widgets, and the AI assistant can answer "what's running low?" The intent: stop rebuilding stock control per app — compose it from one plugin into a real SaaS.
+
+## What's inside
+- **Navigation + page** — an `/inventory` surface: product catalog, stock entry/exit, movement history, and recipes
+- **Real data, zero setup** — a Supabase provider that safely falls back to a mock provider, or inject your own `InventoryDataProvider`
+- **Dashboard widgets** — stock-value KPI (headline on the home), plus total-products, low-stock, out-of-stock KPIs and a recent-activity panel
+- **Opt-in modules** — `recipes` and `stockLocations` (on by default), `batchTracking` (off by default)
+- **AI tool** — `getLowStock` (products below minimum threshold), with vertical-aware prompt suggestions
+- **Declared features, settings + i18n** — registers `inventory` (and `inventory.recipes`) features, a general settings tab, and bundled locales
+
+## Install
+```bash
+npm install @fayz-ai/plugin-inventory
+```
+Peer deps: `@fayz-ai/core`, `@fayz-ai/ui`, `@fayz-ai/saas` (+ react, react-dom).
+
+## Usage
+```tsx
+import { defineSaas } from '@fayz-ai/saas'
+import { createInventoryPlugin } from '@fayz-ai/plugin-inventory'
+
+export const app = defineSaas({
+  // ...
+  plugins: [
+    createInventoryPlugin({
+      modules: { recipes: true, stockLocations: true, batchTracking: false },
+      currency: { code: 'BRL', locale: 'pt-BR', symbol: 'R$' },
+      locations: [{ id: 'hq', name: 'Main', isHQ: true }],
+      // dataProvider: myProvider, // optional — defaults to Supabase + mock fallback
+    }),
+  ],
+})
+```
+
+Options: `modules`, `labels`, `productTypes`, `currency`, `navPosition`, `navSection`, `scope`, `verticalId`, `dataProvider`, `locations`.
+
+## Part of the Fayz SDK
+A composable, universal plugin for the Fayz SDK. Underpins `@fayz-ai/plugin-menu` recipes and `@fayz-ai/plugin-shop` stock — pair them for a full order-to-cash picture.
+
+## Roadmap & contributing
+Built and evolving in the open. See the [Fayz SDK roadmap](../../docs/ROADMAP.md#plugin-inventory) for current gaps, missing features, and good first issues.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fayz-ai/plugin-inventory",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Fayz SDK — plugin-inventory plugin",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -26,9 +26,9 @@
     "lucide-react": "^0.400.0",
     "zustand": "^4.5.0",
     "@tanstack/react-table": "^8.20.0",
-    "@fayz-ai/core": "^0.1.6",
-    "@fayz-ai/saas": "^0.1.6",
-    "@fayz-ai/ui": "^0.1.6"
+    "@fayz-ai/ui": "^0.1.7",
+    "@fayz-ai/core": "^0.1.7",
+    "@fayz-ai/saas": "^0.1.7"
   },
   "devDependencies": {
     "@types/react": "^18.3.0",

package/src/InventoryPage.tsx

@@ -9,7 +9,7 @@ import { useModuleNavigation, ModuleActionBar, createViewRouter } from '@fayz-ai
 import { useTranslation } from '@fayz-ai/core'
 import { DashboardView } from './views/DashboardView'
 import { ProductListView } from './views/ProductListView'
-import { ProductFormView } from './views/ProductFormView'
+import { ProductCrudForm } from './views/ProductCrudForm'
 import { StockMovementView } from './views/StockMovementView'
 import { MovementHistoryView } from './views/MovementHistoryView'
 import { RecipesView } from './views/RecipesView'
@@ -129,8 +129,8 @@ export function InventoryPage({ config, provider, store, registries }: {
 
   const renderView = createViewRouter([
     { id: 'products-list', render: () => <ProductListView onNew={() => navigate('products-new')} onEdit={(id) => navigate(`products-edit:${id}`)} /> },
-    { id: 'products-new', render: () => <ProductFormView onSaved={() => navigate('products-list')} /> },
-    { id: 'products-edit', render: ({ id }) => <ProductFormView editId={id!} onSaved={() => navigate('products-list')} /> },
+    { id: 'products-new', render: () => <ProductCrudForm onSaved={() => navigate('products-list')} /> },
+    { id: 'products-edit', render: ({ id }) => <ProductCrudForm editId={id!} onSaved={() => navigate('products-list')} /> },
     { id: 'stock-entry', render: () => <StockMovementView defaultType="entry" onSaved={() => navigate('stock-history')} /> },
     { id: 'stock-exit', render: () => <StockMovementView defaultType="exit" onSaved={() => navigate('stock-history')} /> },
     { id: 'stock-history', render: () => <MovementHistoryView onViewDetail={(id) => navigate(`stock-detail:${id}`)} /> },

package/src/data/supabase.ts

@@ -73,6 +73,8 @@ export function createSupabaseInventoryProvider(): InventoryDataProvider {
       const { core, pub } = getClients()
       let qb = core.from('products').select('*', { count: 'exact' })
       if (query.search) qb = qb.ilike('name', `%${query.search}%`)
+      // productType lives in the metadata JSON column → filter on metadata->>productType.
+      if (query.productType) qb = qb.eq('metadata->>productType', query.productType)
       if (query.isActive !== undefined) qb = qb.eq('is_active', query.isActive)
       if (query.lowStockOnly) qb = qb.lte('stock', 0) // simplified
       const page = query.page ?? 1

package/src/views/ProductListView.tsx

@@ -1,64 +1,14 @@
-import React, { useEffect, useState } from 'react'
-import { Package } from 'lucide-react'
-import type { ColumnDef } from '@tanstack/react-table'
-import { ListView } from '@fayz-ai/ui'
-import { useInventoryConfig, useInventoryStore, formatCurrency } from '../InventoryContext'
-import { SubpageHeader } from '@fayz-ai/ui'
+import React, { useEffect, useMemo, useState } from 'react'
+import { CrudListView } from '@fayz-ai/saas'
+import { useInventoryConfig, useInventoryStore } from '../InventoryContext'
 import { useTranslation } from '@fayz-ai/core'
-import type { ProductType, Product } from '../types'
-
-const useColumns = (currency: { code: string; locale: string; symbol: string }, t: (key: string) => string): ColumnDef<Product, any>[] => [
-  {
-    accessorKey: 'name',
-    header: t('inventory.productList.product'),
-    enableSorting: true,
-    cell: ({ row }: any) => (
-      <div>
-        <p className="font-medium">{row.original.name}</p>
-        {row.original.sku && <p className="text-xs text-muted-foreground">{row.original.sku}</p>}
-      </div>
-    ),
-  },
-  {
-    accessorKey: 'productType',
-    header: t('inventory.productList.type'),
-    cell: ({ getValue }: any) => (
-      <span className="inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-medium bg-muted text-muted-foreground capitalize">
-        {getValue() as string}
-      </span>
-    ),
-  },
-  {
-    accessorKey: 'currentQuantity',
-    header: t('inventory.productList.stock'),
-    enableSorting: true,
-    meta: { align: 'right' },
-    cell: ({ row }: any) => (
-      <span className={`text-right block ${row.original.currentQuantity <= row.original.minQuantity ? 'text-destructive font-medium' : ''}`}>
-        {row.original.currentQuantity}
-      </span>
-    ),
-  },
-  {
-    accessorKey: 'costPrice',
-    header: t('inventory.productList.cost'),
-    meta: { align: 'right' },
-    cell: ({ getValue }: any) => (
-      <span className="text-right block text-muted-foreground">{formatCurrency(getValue() as number, currency)}</span>
-    ),
-  },
-  {
-    id: 'value',
-    header: t('inventory.productList.value'),
-    meta: { align: 'right' },
-    cell: ({ row }: any) => (
-      <span className="text-right block font-medium">
-        {formatCurrency(row.original.currentQuantity * row.original.costPrice, currency)}
-      </span>
-    ),
-  },
-]
+import type { ProductType } from '../types'
+import { buildProductEntity } from './productEntity'
 
+// Product list, rendered through the generic CrudListView (header · search ·
+// facet pills · table). One shared EntityDef (buildProductEntity) drives both
+// this list and the create/edit form. Data + routing stay in the inventory
+// store / module nav.
 export function ProductListView({ onNew, onEdit }: {
   onNew?: () => void
   onEdit?: (id: string) => void
@@ -72,36 +22,36 @@ export function ProductListView({ onNew, onEdit }: {
 
   const [search, setSearch] = useState('')
   const [typeFilter, setTypeFilter] = useState<string | undefined>()
+  const [loadedOnce, setLoadedOnce] = useState(false)
 
   useEffect(() => {
-    fetchProducts({ productType: typeFilter as ProductType | undefined, search: search || undefined })
+    let active = true
+    Promise.resolve(fetchProducts({ productType: typeFilter as ProductType | undefined, search: search || undefined }))
+      .finally(() => { if (active) setLoadedOnce(true) })
+    return () => { active = false }
   }, [typeFilter, search])
 
-  const columns = useColumns(currency, t)
+  const entity = useMemo(() => buildProductEntity(t, productTypes, currency), [t, productTypes, currency])
+  const facets = useMemo(() => [{
+    field: 'productType',
+    allLabel: t('crud.list.allFacet'),
+    options: productTypes.map((p) => ({ value: p.value, label: p.label })),
+  }], [productTypes, t])
 
   return (
-    <div className="space-y-4">
-      <SubpageHeader title={t('inventory.productList.title')} subtitle={t('inventory.productList.subtitle', { count: String(productsTotal) })} />
-
-      <ListView<Product>
-        columns={columns}
-        data={products}
-        loading={productsLoading}
-        searchPlaceholder={t('inventory.productList.searchPlaceholder')}
-        search={search}
-        onSearchChange={setSearch}
-        searchDebounce={0}
-        tags={productTypes.map((t) => ({ value: t.value, label: t.label }))}
-        activeTag={typeFilter}
-        onTagChange={setTypeFilter}
-        newLabel={t('inventory.productList.newProduct')}
-        onNew={onNew}
-        onRowClick={(row) => onEdit?.(row.id)}
-        emptyIcon={Package}
-        emptyMessage={t('inventory.productList.empty')}
-        emptyActionLabel={onNew ? t('inventory.productList.createFirst') : undefined}
-        onEmptyAction={onNew}
-      />
-    </div>
+    <CrudListView
+      entityDef={entity}
+      items={loadedOnce ? products : null}
+      total={productsTotal}
+      search={search}
+      onSearchChange={setSearch}
+      searchPlaceholder={t('inventory.productList.searchPlaceholder')}
+      facets={facets}
+      activeFilters={{ productType: typeFilter }}
+      onFacetChange={(_field, value) => setTypeFilter(value)}
+      onNew={onNew}
+      addLabel={t('inventory.productList.newProduct')}
+      onRowClick={(row) => onEdit?.((row as { id: string }).id)}
+    />
   )
 }

package/src/views/StockMovementView.tsx

@@ -151,6 +151,24 @@ export function StockMovementView({ defaultType, onSaved, viewMovement }: {
 
   useEffect(() => { fetchProducts({}); fetchLocations() }, [])
 
+  // Build a map of locationId → total quantity from positions.
+  // NOTE: these useMemo hooks must run before the early returns below, otherwise
+  // saving (which flips savedMovement) renders fewer hooks → React error.
+  const positionByLocation = useMemo(() => {
+    const map: Record<string, number> = {}
+    for (const pos of positions) {
+      if (pos.stockLocationId) {
+        map[pos.stockLocationId] = (map[pos.stockLocationId] ?? 0) + pos.quantity
+      }
+    }
+    return map
+  }, [positions])
+
+  // Sort locations by stock position (highest first)
+  const sortedLocations = useMemo(() => {
+    return [...locations].sort((a, b) => (positionByLocation[b.id] ?? 0) - (positionByLocation[a.id] ?? 0))
+  }, [locations, positionByLocation])
+
   // If viewing a movement detail
   if (viewMovement) {
     return <MovementDetail movement={viewMovement} currency={currency} onClose={() => onSaved?.()} />
@@ -198,22 +216,6 @@ export function StockMovementView({ defaultType, onSaved, viewMovement }: {
     }
   }
 
-  // Build a map of locationId → total quantity from positions
-  const positionByLocation = useMemo(() => {
-    const map: Record<string, number> = {}
-    for (const pos of positions) {
-      if (pos.stockLocationId) {
-        map[pos.stockLocationId] = (map[pos.stockLocationId] ?? 0) + pos.quantity
-      }
-    }
-    return map
-  }, [positions])
-
-  // Sort locations by stock position (highest first)
-  const sortedLocations = useMemo(() => {
-    return [...locations].sort((a, b) => (positionByLocation[b.id] ?? 0) - (positionByLocation[a.id] ?? 0))
-  }, [locations, positionByLocation])
-
   const canProceedStep1 = !!productId
   const canProceedStep2 = quantity > 0 && (!needsReason || reason.trim()) && (!needsDest || destLocationId)
   const title = defaultType === 'entry' ? t('inventory.stock.entry') : defaultType === 'exit' ? t('inventory.stock.exit') : t('inventory.stock.movement')

package/src/views/ProductFormView.tsx

@@ -1,283 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import { ImagePlus } from 'lucide-react'
-import { useInventoryConfig, useInventoryStore, useInventoryProvider, formatCurrency } from '../InventoryContext'
-import { SubpageHeader, useSaveBar, toast } from '@fayz-ai/ui'
-import { CurrencyInput } from '@fayz-ai/ui'
-import { useTranslation } from '@fayz-ai/core'
-import type { ProductType } from '../types'
-
-// ---------------------------------------------------------------------------
-// Product type descriptions — parametrizable via config
-// ---------------------------------------------------------------------------
-
-const TYPE_DESCRIPTION_KEYS: Record<string, string> = {
-  ingredient: 'inventory.productForm.typeIngredient',
-  sale: 'inventory.productForm.typeSale',
-  intermediate: 'inventory.productForm.typeIntermediate',
-  asset: 'inventory.productForm.typeAsset',
-}
-
-// ---------------------------------------------------------------------------
-// Section component for grouping form fields
-// ---------------------------------------------------------------------------
-
-function FormSection({ title, subtitle, children }: {
-  title: string; subtitle?: string; children: React.ReactNode
-}) {
-  return (
-    <div className="rounded-lg border bg-card shadow-sm">
-      <div className="px-5 py-3 border-b">
-        <h3 className="text-sm font-semibold">{title}</h3>
-        {subtitle && <p className="text-[10px] text-muted-foreground mt-0.5">{subtitle}</p>}
-      </div>
-      <div className="p-5 space-y-4">
-        {children}
-      </div>
-    </div>
-  )
-}
-
-// ---------------------------------------------------------------------------
-// Product form
-// ---------------------------------------------------------------------------
-
-export function ProductFormView({ editId, onSaved }: { editId?: string; onSaved?: () => void }) {
-  const t = useTranslation()
-  const { productTypes, currency } = useInventoryConfig()
-  const provider = useInventoryProvider()
-  const createProduct = useInventoryStore((s) => s.createProduct)
-  const isEdit = !!editId
-
-  const [loaded, setLoaded] = useState(false)
-  const [name, setName] = useState('')
-  const [sku, setSku] = useState('')
-  const [barcode, setBarcode] = useState('')
-  const [brand, setBrand] = useState('')
-  const [productType, setProductType] = useState<ProductType>(productTypes[0]?.value as ProductType ?? 'ingredient')
-  const [costPrice, setCostPrice] = useState(0)
-  const [salePrice, setSalePrice] = useState(0)
-  const [minQuantity, setMinQuantity] = useState(0)
-  const [maxQuantity, setMaxQuantity] = useState(0)
-  const [description, setDescription] = useState('')
-  const [saving, setSaving] = useState(false)
-
-  // Load existing product for edit
-  useEffect(() => {
-    if (!editId || loaded) return
-    ;(async () => {
-      const product = await provider.getProductById(editId)
-      if (!product) return
-      setName(product.name)
-      setSku(product.sku ?? '')
-      setBarcode(product.barcode ?? '')
-      setBrand(product.brand ?? '')
-      setProductType(product.productType)
-      setCostPrice(product.costPrice)
-      setSalePrice(product.salePrice ?? 0)
-      setMinQuantity(product.minQuantity)
-      setMaxQuantity(product.maxQuantity ?? 0)
-      setDescription(product.description ?? '')
-      setLoaded(true)
-    })()
-  }, [editId])
-
-  const fields = { name, sku, barcode, brand, productType, costPrice, salePrice, minQuantity, maxQuantity, description }
-  const ready = !editId || loaded
-  const snapshot = React.useRef<string | null>(null)
-  useEffect(() => {
-    if (ready && snapshot.current === null) snapshot.current = JSON.stringify(fields)
-  }, [ready])
-  const dirty = snapshot.current !== null && JSON.stringify(fields) !== snapshot.current
-  useSaveBar({
-    dirty,
-    saving,
-    onSave: () => { void handleSave() },
-    onDiscard: () => onSaved?.(),
-    saveLabel: t('inventory.productForm.save'),
-  })
-
-  async function handleSave() {
-    if (!name.trim()) { toast.error(t('common.formIncomplete')); return }
-    setSaving(true)
-    try {
-      if (isEdit && editId) {
-        await provider.updateProduct(editId, {
-          name, sku: sku || undefined, barcode: barcode || undefined, brand: brand || undefined,
-          productType, costPrice, salePrice: salePrice || undefined,
-          minQuantity, maxQuantity: maxQuantity || undefined, description: description || undefined,
-        })
-      } else {
-        await createProduct({
-          name, sku: sku || undefined, barcode: barcode || undefined, brand: brand || undefined,
-          productType, costPrice, salePrice: salePrice || undefined,
-          minQuantity, maxQuantity: maxQuantity || undefined, description: description || undefined,
-        })
-      }
-      onSaved?.()
-    } finally {
-      setSaving(false)
-    }
-  }
-
-  const title = isEdit ? (name || t('inventory.productForm.editProduct')) : t('inventory.productForm.newProduct')
-  const subtitle = isEdit ? undefined : t('inventory.productForm.addToCatalog')
-  const margin = salePrice > 0 && costPrice > 0 ? ((salePrice - costPrice) / costPrice * 100).toFixed(1) : null
-
-  return (
-    <div className="space-y-5">
-      <SubpageHeader
-        title={title}
-        subtitle={subtitle}
-        onBack={onSaved}
-        parentLabel={t('inventory.nav.products')}
-      />
-
-      {/* Section 1: General Info */}
-      <FormSection title={t('inventory.productForm.generalInfo')}>
-        <div className="flex gap-4">
-          {/* Image placeholder */}
-          <div className="shrink-0">
-            <div className="w-20 h-20 rounded-lg border-2 border-dashed border-muted flex items-center justify-center text-muted-foreground hover:border-primary/30 hover:text-primary/50 transition-colors cursor-pointer">
-              <ImagePlus className="h-5 w-5" />
-            </div>
-          </div>
-
-          <div className="flex-1 grid gap-3 sm:grid-cols-2">
-            <div className="sm:col-span-1">
-              <label className="text-xs font-medium text-muted-foreground">{t('inventory.productForm.name')} *</label>
-              <input
-                type="text"
-                value={name}
-                onChange={(e) => setName(e.target.value)}
-                placeholder={t('inventory.productForm.namePlaceholder')}
-                autoFocus
-                className="w-full mt-1 rounded-input border border-input  bg-card shadow-[inset_0_1px_0_rgb(0_0_0_/0.06)] px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
-              />
-            </div>
-            <div>
-              <label className="text-xs font-medium text-muted-foreground">{t('inventory.productForm.brand')}</label>
-              <input
-                type="text"
-                value={brand}
-                onChange={(e) => setBrand(e.target.value)}
-                placeholder={t('inventory.productForm.brandPlaceholder')}
-                className="w-full mt-1 rounded-input border border-input  bg-card shadow-[inset_0_1px_0_rgb(0_0_0_/0.06)] px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
-              />
-            </div>
-          </div>
-        </div>
-
-        <div className="grid gap-3 sm:grid-cols-2">
-          <div>
-            <label className="text-xs font-medium text-muted-foreground">{t('inventory.productForm.sku')}</label>
-            <input type="text" value={sku} onChange={(e) => setSku(e.target.value)} placeholder={t('inventory.productForm.skuPlaceholder')} className="w-full mt-1 rounded-input border border-input  bg-card shadow-[inset_0_1px_0_rgb(0_0_0_/0.06)] px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring" />
-          </div>
-          <div>
-            <label className="text-xs font-medium text-muted-foreground">{t('inventory.productForm.barcode')}</label>
-            <input type="text" value={barcode} onChange={(e) => setBarcode(e.target.value)} placeholder={t('inventory.productForm.barcodePlaceholder')} className="w-full mt-1 rounded-input border border-input  bg-card shadow-[inset_0_1px_0_rgb(0_0_0_/0.06)] px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring" />
-          </div>
-        </div>
-
-        <div>
-          <label className="text-xs font-medium text-muted-foreground">{t('inventory.productForm.description')}</label>
-          <textarea
-            value={description}
-            onChange={(e) => setDescription(e.target.value)}
-            rows={2}
-            placeholder={t('inventory.productForm.descriptionPlaceholder')}
-            className="w-full mt-1 rounded-input border border-input  bg-card shadow-[inset_0_1px_0_rgb(0_0_0_/0.06)] px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring resize-none"
-          />
-        </div>
-      </FormSection>
-
-      {/* Section 2: Classification */}
-      <FormSection title={t('inventory.productForm.classification')} subtitle={t('inventory.productForm.classificationDesc')}>
-        <div className="grid gap-2 sm:grid-cols-2 lg:grid-cols-4">
-          {productTypes.map((pt) => {
-            const active = productType === pt.value
-            const descKey = TYPE_DESCRIPTION_KEYS[pt.value]
-            const desc = descKey ? t(descKey) : ''
-            return (
-              <button
-                key={pt.value}
-                onClick={() => setProductType(pt.value as ProductType)}
-                className={`rounded-lg border-2 p-3 text-left transition-all ${
-                  active
-                    ? 'border-primary bg-primary/5'
-                    : 'border-transparent bg-muted/20 hover:bg-muted/40'
-                }`}
-              >
-                <p className={`text-sm font-medium ${active ? 'text-primary' : ''}`}>{pt.label}</p>
-                {desc && <p className="text-[10px] text-muted-foreground mt-0.5 leading-tight">{desc}</p>}
-              </button>
-            )
-          })}
-        </div>
-      </FormSection>
-
-      {/* Section 3: Pricing */}
-      <FormSection title={t('inventory.productForm.pricing')}>
-        <div className="grid gap-4 sm:grid-cols-3">
-          <CurrencyInput
-            label={t('inventory.productForm.costPrice')}
-            value={costPrice}
-            onChange={setCostPrice}
-            symbol={currency.symbol}
-            locale={currency.locale}
-            currencyCode={currency.code}
-          />
-          <CurrencyInput
-            label={t('inventory.productForm.salePrice')}
-            value={salePrice}
-            onChange={setSalePrice}
-            symbol={currency.symbol}
-            locale={currency.locale}
-            currencyCode={currency.code}
-          />
-          <div>
-            <label className="text-xs font-medium text-muted-foreground">{t('inventory.productForm.margin')}</label>
-            <div className="mt-1 rounded-lg border bg-muted/20 px-3 py-2 text-sm tabular-nums text-right">
-              {margin !== null ? (
-                <span className={Number(margin) >= 0 ? 'text-success' : 'text-destructive'}>
-                  {margin}%
-                </span>
-              ) : (
-                <span className="text-muted-foreground">—</span>
-              )}
-            </div>
-          </div>
-        </div>
-      </FormSection>
-
-      {/* Section 4: Stock Levels */}
-      <FormSection title={t('inventory.productForm.stockLevels')} subtitle={t('inventory.productForm.stockLevelsDesc')}>
-        <div className="grid gap-4 sm:grid-cols-2 max-w-md">
-          <div>
-            <label className="text-xs font-medium text-muted-foreground">{t('inventory.productForm.minQuantity')}</label>
-            <input
-              type="number"
-              min={0}
-              value={minQuantity}
-              onChange={(e) => setMinQuantity(Number(e.target.value) || 0)}
-              placeholder="0"
-              className="w-full mt-1 rounded-input border border-input  bg-card shadow-[inset_0_1px_0_rgb(0_0_0_/0.06)] px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
-            />
-            <p className="text-[10px] text-muted-foreground mt-1">{t('inventory.productForm.minQuantityHint')}</p>
-          </div>
-          <div>
-            <label className="text-xs font-medium text-muted-foreground">{t('inventory.productForm.maxQuantity')}</label>
-            <input
-              type="number"
-              min={0}
-              value={maxQuantity}
-              onChange={(e) => setMaxQuantity(Number(e.target.value) || 0)}
-              placeholder={t('inventory.productForm.optional')}
-              className="w-full mt-1 rounded-input border border-input  bg-card shadow-[inset_0_1px_0_rgb(0_0_0_/0.06)] px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
-            />
-            <p className="text-[10px] text-muted-foreground mt-1">{t('inventory.productForm.maxQuantityHint')}</p>
-          </div>
-        </div>
-      </FormSection>
-    </div>
-  )
-}