@@ -179,14 +179,14 @@ const InventoryDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange })
type = "text"
type = "text"
value = { inventoryData . barcode }
value = { inventoryData . barcode }
onChange = { ( e ) = > handleDataChange ( { . . . inventoryData , barcode : e.target.value } ) }
onChange = { ( e ) = > handleDataChange ( { . . . inventoryData , barcode : e.target.value } ) }
placeholder = "Barcode/UPC/EAN"
placeholder = { t ( 'inventory.fields.barcodePlaceholder' ) }
className = "w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
className = "w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/ >
/ >
< / div >
< / div >
< div >
< div >
< label className = "block text-sm font-medium text-[var(--text-secondary)] mb-2" >
< label className = "block text-sm font-medium text-[var(--text-secondary)] mb-2" >
{ inventoryData . productType === 'ingredient' ? 'I ngredient Category' : 'P roduct Category'}
{ inventoryData . productType === 'ingredient' ? t ( 'inventory.fields.i ngredientCategory') : t ( 'inventory.fields.p roductCategory') }
< / label >
< / label >
< select
< select
value = { inventoryData . productType === 'ingredient' ? inventoryData.ingredientCategory : inventoryData.productCategory }
value = { inventoryData . productType === 'ingredient' ? inventoryData.ingredientCategory : inventoryData.productCategory }
@@ -196,27 +196,28 @@ const InventoryDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange })
} ) }
} ) }
className = "w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
className = "w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
>
>
< option value = "" > Select . . . < / option >
{ inventoryData . productType === 'ingredient' ? (
{ inventoryData . productType === 'ingredient' ? (
< >
< >
< option value = "flour " > Flours < / option >
< option value = "" > { t ( 'inventory.ingredientCategories.select' ) } < / option >
< option value = "dairy " > Dairy < / option >
< option value = "flour " > { t ( 'inventory.ingredientCategories.flour' ) } < / option >
< option value = "eggs " > Eggs < / option >
< option value = "dairy " > { t ( 'inventory.ingredientCategories.dairy' ) } < / option >
< option value = "fat s" > Fats & Oils < / option >
< option value = "egg s" > { t ( 'inventory.ingredientCategories.eggs' ) } < / option >
< option value = "sweeteners" > Sweeteners < / option >
< option value = "fats" > { t ( 'inventory.ingredientCategories.fats' ) } < / option >
< option value = "additives" > Additives < / option >
< option value = "sweeteners" > { t ( 'inventory.ingredientCategories.sweeteners' ) } < / option >
< option value = "fruits" > Fruits < / option >
< option value = "additives" > { t ( 'inventory.ingredientCategories.additives' ) } < / option >
< option value = "nu ts" > Nuts & Seeds < / option >
< option value = "frui ts" > { t ( 'inventory.ingredientCategories.fruits' ) } < / option >
< option value = "spice s" > Spices < / option >
< option value = "nut s" > { t ( 'inventory.ingredientCategories.nuts' ) } < / option >
< option value = "leavening" > Leavening Agents < / option >
< option value = "spices" > { t ( 'inventory.ingredientCategories.spices' ) } < / option >
< option value = "leavening" > { t ( 'inventory.ingredientCategories.leavening' ) } < / option >
< / >
< / >
) : (
) : (
< >
< >
< option value = "bread " > Bread < / option >
< option value = "" > { t ( 'inventory.productCategories.select' ) } < / option >
< option value = "pastry " > Pastry < / option >
< option value = "bread " > { t ( 'inventory.productCategories.bread' ) } < / option >
< option value = "cake" > Cakes < / option >
< option value = "pastry" > { t ( 'inventory.productCategories.pastry' ) } < / option >
< option value = "cookies " > Cookies < / option >
< option value = "cake " > { t ( 'inventory.productCategories.cake' ) } < / option >
< option value = "specialty" > Specialty Items < / option >
< option value = "cookies" > { t ( 'inventory.productCategories.cookies' ) } < / option >
< option value = "specialty" > { t ( 'inventory.productCategories.specialty' ) } < / option >
< / >
< / >
) }
) }
< / select >
< / select >
@@ -224,25 +225,25 @@ const InventoryDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange })
< div >
< div >
< label className = "block text-sm font-medium text-[var(--text-secondary)] mb-2" >
< label className = "block text-sm font-medium text-[var(--text-secondary)] mb-2" >
Brand
{ t ( 'inventory.fields.brand' ) }
< / label >
< / label >
< input
< input
type = "text"
type = "text"
value = { inventoryData . brand }
value = { inventoryData . brand }
onChange = { ( e ) = > handleDataChange ( { . . . inventoryData , brand : e.target.value } ) }
onChange = { ( e ) = > handleDataChange ( { . . . inventoryData , brand : e.target.value } ) }
placeholder = "Brand name"
placeholder = { t ( 'inventory.fields.brandPlaceholder' ) }
className = "w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
className = "w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/ >
/ >
< / div >
< / div >
< div className = "md:col-span-2" >
< div className = "md:col-span-2" >
< label className = "block text-sm font-medium text-[var(--text-secondary)] mb-2" >
< label className = "block text-sm font-medium text-[var(--text-secondary)] mb-2" >
D escription
{ t ( 'inventory.fields.d escription' ) }
< / label >
< / label >
< textarea
< textarea
value = { inventoryData . description }
value = { inventoryData . description }
onChange = { ( e ) = > handleDataChange ( { . . . inventoryData , description : e.target.value } ) }
onChange = { ( e ) = > handleDataChange ( { . . . inventoryData , description : e.target.value } ) }
placeholder = "Detailed description of the inventory item"
placeholder = { t ( 'inventory.fields.descriptionPlaceholder' ) }
rows = { 2 }
rows = { 2 }
className = "w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
className = "w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/ >
/ >
@@ -252,19 +253,19 @@ const InventoryDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange })
{ /* Advanced Options */ }
{ /* Advanced Options */ }
< AdvancedOptionsSection
< AdvancedOptionsSection
title = "A dvanced Options"
title = { t ( 'inventory.sections.a dvancedOptions' ) }
description = "Optional fields for comprehensive inventory management"
description = { t ( 'inventory.sections.advancedOptionsDescription' ) }
>
>
{ /* Pricing Information */ }
{ /* Pricing Information */ }
< div className = "space-y-4" >
< div className = "space-y-4" >
< h5 className = "text-xs font-semibold text-[var(--text-secondary)] uppercase tracking-wider" >
< h5 className = "text-xs font-semibold text-[var(--text-secondary)] uppercase tracking-wider" >
P ricing Information
{ t ( 'inventory.sections.p ricingInformation' ) }
< / h5 >
< / h5 >
< div className = "grid grid-cols-1 md:grid-cols-2 gap-4" >
< div className = "grid grid-cols-1 md:grid-cols-2 gap-4" >
< div >
< div >
< label className = "block text-sm font-medium text-[var(--text-secondary)] mb-2" >
< label className = "block text-sm font-medium text-[var(--text-secondary)] mb-2" >
A verage Cost ( € )
{ t ( 'inventory.fields.a verageCost' ) }
< Tooltip content = "Average cost per unit based on purchase history" >
< Tooltip content = { t ( 'tooltips.averageCost' ) } >
< Info className = "inline w-4 h-4 ml-1 text-[var(--text-tertiary)]" / >
< Info className = "inline w-4 h-4 ml-1 text-[var(--text-tertiary)]" / >
< / Tooltip >
< / Tooltip >
< / label >
< / label >
@@ -281,7 +282,7 @@ const InventoryDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange })
< div >
< div >
< label className = "block text-sm font-medium text-[var(--text-secondary)] mb-2" >
< label className = "block text-sm font-medium text-[var(--text-secondary)] mb-2" >
Last Purchase Price ( € )
{ t ( 'inventory.fields.last PurchasePrice' ) }
< / label >
< / label >
< input
< input
type = "number"
type = "number"
@@ -296,8 +297,8 @@ const InventoryDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange })
< div >
< div >
< label className = "block text-sm font-medium text-[var(--text-secondary)] mb-2" >
< label className = "block text-sm font-medium text-[var(--text-secondary)] mb-2" >
S tandard Cost ( € )
{ t ( 'inventory.fields.s tandardCost' ) }
< Tooltip content = "Standard/expected cost per unit for costing calculations" >
< Tooltip content = { t ( 'tooltips.standardCost' ) } >
< Info className = "inline w-4 h-4 ml-1 text-[var(--text-tertiary)]" / >
< Info className = "inline w-4 h-4 ml-1 text-[var(--text-tertiary)]" / >
< / Tooltip >
< / Tooltip >
< / label >
< / label >
@@ -314,7 +315,7 @@ const InventoryDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange })
< div >
< div >
< label className = "block text-sm font-medium text-[var(--text-secondary)] mb-2" >
< label className = "block text-sm font-medium text-[var(--text-secondary)] mb-2" >
S elling Price ( € )
{ t ( 'inventory.fields.s ellingPrice' ) }
< / label >
< / label >
< input
< input
type = "number"
type = "number"
@@ -329,7 +330,7 @@ const InventoryDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange })
< div >
< div >
< label className = "block text-sm font-medium text-[var(--text-secondary)] mb-2" >
< label className = "block text-sm font-medium text-[var(--text-secondary)] mb-2" >
M inimum Price ( € )
{ t ( 'inventory.fields.m inimumPrice' ) }
< / label >
< / label >
< input
< input
type = "number"
type = "number"
@@ -347,13 +348,13 @@ const InventoryDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange })
{ /* Inventory Management */ }
{ /* Inventory Management */ }
< div className = "space-y-4 border-t border-[var(--border-primary)] pt-4" >
< div className = "space-y-4 border-t border-[var(--border-primary)] pt-4" >
< h5 className = "text-xs font-semibold text-[var(--text-secondary)] uppercase tracking-wider" >
< h5 className = "text-xs font-semibold text-[var(--text-secondary)] uppercase tracking-wider" >
I nventory Management
{ t ( 'inventory.sections.i nventoryManagement' ) }
< / h5 >
< / h5 >
< div className = "grid grid-cols-1 md:grid-cols-2 gap-4" >
< div className = "grid grid-cols-1 md:grid-cols-2 gap-4" >
< div >
< div >
< label className = "block text-sm font-medium text-[var(--text-secondary)] mb-2" >
< label className = "block text-sm font-medium text-[var(--text-secondary)] mb-2" >
Low Stock Threshold
{ t ( 'inventory.fields.low StockThreshold' ) }
< Tooltip content = "Alert when stock falls below this level" >
< Tooltip content = { t ( 'tooltips.lowStockThreshold' ) } >
< Info className = "inline w-4 h-4 ml-1 text-[var(--text-tertiary)]" / >
< Info className = "inline w-4 h-4 ml-1 text-[var(--text-tertiary)]" / >
< / Tooltip >
< / Tooltip >
< / label >
< / label >
@@ -369,8 +370,8 @@ const InventoryDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange })
< div >
< div >
< label className = "block text-sm font-medium text-[var(--text-secondary)] mb-2" >
< label className = "block text-sm font-medium text-[var(--text-secondary)] mb-2" >
R eorder Point
{ t ( 'inventory.fields.r eorderPoint' ) }
< Tooltip content = "Trigger reorder when stock reaches this level" >
< Tooltip content = { t ( 'tooltips.reorderPoint' ) } >
< Info className = "inline w-4 h-4 ml-1 text-[var(--text-tertiary)]" / >
< Info className = "inline w-4 h-4 ml-1 text-[var(--text-tertiary)]" / >
< / Tooltip >
< / Tooltip >
< / label >
< / label >
@@ -386,8 +387,8 @@ const InventoryDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange })
< div >
< div >
< label className = "block text-sm font-medium text-[var(--text-secondary)] mb-2" >
< label className = "block text-sm font-medium text-[var(--text-secondary)] mb-2" >
R eorder Quantity
{ t ( 'inventory.fields.r eorderQuantity' ) }
< Tooltip content = "Standard quantity to order when reordering" >
< Tooltip content = { t ( 'tooltips.reorderQuantity' ) } >
< Info className = "inline w-4 h-4 ml-1 text-[var(--text-tertiary)]" / >
< Info className = "inline w-4 h-4 ml-1 text-[var(--text-tertiary)]" / >
< / Tooltip >
< / Tooltip >
< / label >
< / label >
@@ -403,7 +404,7 @@ const InventoryDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange })
< div >
< div >
< label className = "block text-sm font-medium text-[var(--text-secondary)] mb-2" >
< label className = "block text-sm font-medium text-[var(--text-secondary)] mb-2" >
Max Stock Level
{ t ( 'inventory.fields.max StockLevel' ) }
< / label >
< / label >
< input
< input
type = "number"
type = "number"
@@ -417,8 +418,8 @@ const InventoryDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange })
< div >
< div >
< label className = "block text-sm font-medium text-[var(--text-secondary)] mb-2" >
< label className = "block text-sm font-medium text-[var(--text-secondary)] mb-2" >
Lead Time ( d ays)
{ t ( 'inventory.fields.leadTimeD ays' ) }
< Tooltip content = "Time between order placement and delivery" >
< Tooltip content = { t ( 'tooltips.leadTime' ) } >
< Info className = "inline w-4 h-4 ml-1 text-[var(--text-tertiary)]" / >
< Info className = "inline w-4 h-4 ml-1 text-[var(--text-tertiary)]" / >
< / Tooltip >
< / Tooltip >
< / label >
< / label >
@@ -437,25 +438,25 @@ const InventoryDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange })
{ /* Product Information */ }
{ /* Product Information */ }
< div className = "space-y-4 border-t border-[var(--border-primary)] pt-4" >
< div className = "space-y-4 border-t border-[var(--border-primary)] pt-4" >
< h5 className = "text-xs font-semibold text-[var(--text-secondary)] uppercase tracking-wider" >
< h5 className = "text-xs font-semibold text-[var(--text-secondary)] uppercase tracking-wider" >
P roduct Information
{ t ( 'inventory.sections.p roductInformation' ) }
< / h5 >
< / h5 >
< div className = "grid grid-cols-1 md:grid-cols-2 gap-4" >
< div className = "grid grid-cols-1 md:grid-cols-2 gap-4" >
< div >
< div >
< label className = "block text-sm font-medium text-[var(--text-secondary)] mb-2" >
< label className = "block text-sm font-medium text-[var(--text-secondary)] mb-2" >
P ackage Size
{ t ( 'inventory.fields.p ackageSize' ) }
< / label >
< / label >
< input
< input
type = "text"
type = "text"
value = { inventoryData . packageSize }
value = { inventoryData . packageSize }
onChange = { ( e ) = > handleDataChange ( { . . . inventoryData , packageSize : e.target.value } ) }
onChange = { ( e ) = > handleDataChange ( { . . . inventoryData , packageSize : e.target.value } ) }
placeholder = "E.g., 25kg bag, 12-pack"
placeholder = { t ( 'inventory.fields.packageSizePlaceholder' ) }
className = "w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
className = "w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/ >
/ >
< / div >
< / div >
< div >
< div >
< label className = "block text-sm font-medium text-[var(--text-secondary)] mb-2" >
< label className = "block text-sm font-medium text-[var(--text-secondary)] mb-2" >
S helf Life ( d ays)
{ t ( 'inventory.fields.s helfLifeD ays' ) }
< / label >
< / label >
< input
< input
type = "number"
type = "number"
@@ -469,8 +470,8 @@ const InventoryDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange })
< div >
< div >
< label className = "block text-sm font-medium text-[var(--text-secondary)] mb-2" >
< label className = "block text-sm font-medium text-[var(--text-secondary)] mb-2" >
D isplay Life ( h ours)
{ t ( 'inventory.fields.d isplayLifeH ours' ) }
< Tooltip content = "Hours product can be displayed before quality degrades" >
< Tooltip content = { t ( 'tooltips.displayLife' ) } >
< Info className = "inline w-4 h-4 ml-1 text-[var(--text-tertiary)]" / >
< Info className = "inline w-4 h-4 ml-1 text-[var(--text-tertiary)]" / >
< / Tooltip >
< / Tooltip >
< / label >
< / label >
@@ -486,14 +487,14 @@ const InventoryDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange })
< div >
< div >
< label className = "block text-sm font-medium text-[var(--text-secondary)] mb-2" >
< label className = "block text-sm font-medium text-[var(--text-secondary)] mb-2" >
S torage Temp Range ( ° C )
{ t ( 'inventory.fields.s torageTempRange' ) }
< / label >
< / label >
< div className = "flex gap-2" >
< div className = "flex gap-2" >
< input
< input
type = "number"
type = "number"
value = { inventoryData . storageTempMin }
value = { inventoryData . storageTempMin }
onChange = { ( e ) = > handleDataChange ( { . . . inventoryData , storageTempMin : e.target.value } ) }
onChange = { ( e ) = > handleDataChange ( { . . . inventoryData , storageTempMin : e.target.value } ) }
placeholder = "Min"
placeholder = { t ( 'inventory.fields.storageTempMin' ) }
step = "0.1"
step = "0.1"
className = "w-1/2 px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
className = "w-1/2 px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/ >
/ >
@@ -501,7 +502,7 @@ const InventoryDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange })
type = "number"
type = "number"
value = { inventoryData . storageTempMax }
value = { inventoryData . storageTempMax }
onChange = { ( e ) = > handleDataChange ( { . . . inventoryData , storageTempMax : e.target.value } ) }
onChange = { ( e ) = > handleDataChange ( { . . . inventoryData , storageTempMax : e.target.value } ) }
placeholder = "Max"
placeholder = { t ( 'inventory.fields.storageTempMax' ) }
step = "0.1"
step = "0.1"
className = "w-1/2 px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
className = "w-1/2 px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/ >
/ >
@@ -513,17 +514,17 @@ const InventoryDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange })
{ /* Storage & Handling */ }
{ /* Storage & Handling */ }
< div className = "space-y-4 border-t border-[var(--border-primary)] pt-4" >
< div className = "space-y-4 border-t border-[var(--border-primary)] pt-4" >
< h5 className = "text-xs font-semibold text-[var(--text-secondary)] uppercase tracking-wider" >
< h5 className = "text-xs font-semibold text-[var(--text-secondary)] uppercase tracking-wider" >
Storage & Handling
{ t ( 'inventory.sections.storageAnd Handling' ) }
< / h5 >
< / h5 >
< div className = "grid grid-cols-1 gap-4" >
< div className = "grid grid-cols-1 gap-4" >
< div >
< div >
< label className = "block text-sm font-medium text-[var(--text-secondary)] mb-2" >
< label className = "block text-sm font-medium text-[var(--text-secondary)] mb-2" >
S torage Instructions
{ t ( 'inventory.fields.s torageInstructions' ) }
< / label >
< / label >
< textarea
< textarea
value = { inventoryData . storageInstructions }
value = { inventoryData . storageInstructions }
onChange = { ( e ) = > handleDataChange ( { . . . inventoryData , storageInstructions : e.target.value } ) }
onChange = { ( e ) = > handleDataChange ( { . . . inventoryData , storageInstructions : e.target.value } ) }
placeholder = "E.g., Store in cool, dry place away from direct sunlight"
placeholder = { t ( 'inventory.fields.storageInstructionsPlaceholder' ) }
rows = { 2 }
rows = { 2 }
className = "w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
className = "w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/ >
/ >
@@ -531,12 +532,12 @@ const InventoryDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange })
< div >
< div >
< label className = "block text-sm font-medium text-[var(--text-secondary)] mb-2" >
< label className = "block text-sm font-medium text-[var(--text-secondary)] mb-2" >
H andling Instructions
{ t ( 'inventory.fields.h andlingInstructions' ) }
< / label >
< / label >
< textarea
< textarea
value = { inventoryData . handlingInstructions }
value = { inventoryData . handlingInstructions }
onChange = { ( e ) = > handleDataChange ( { . . . inventoryData , handlingInstructions : e.target.value } ) }
onChange = { ( e ) = > handleDataChange ( { . . . inventoryData , handlingInstructions : e.target.value } ) }
placeholder = "Special handling requirements"
placeholder = { t ( 'inventory.fields.handlingInstructionsPlaceholder' ) }
rows = { 2 }
rows = { 2 }
className = "w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
className = "w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/ >
/ >
@@ -550,7 +551,7 @@ const InventoryDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange })
className = "rounded border-[var(--border-secondary)] text-[var(--color-primary)] focus:ring-[var(--color-primary)]"
className = "rounded border-[var(--border-secondary)] text-[var(--color-primary)] focus:ring-[var(--color-primary)]"
/ >
/ >
< label className = "text-sm text-[var(--text-secondary)]" >
< label className = "text-sm text-[var(--text-secondary)]" >
Perishable Item
{ t ( 'inventory.fields.is Perishable' ) }
< / label >
< / label >
< / div >
< / div >
< / div >
< / div >
@@ -559,31 +560,31 @@ const InventoryDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange })
{ /* Supplier Information */ }
{ /* Supplier Information */ }
< div className = "space-y-4 border-t border-[var(--border-primary)] pt-4" >
< div className = "space-y-4 border-t border-[var(--border-primary)] pt-4" >
< h5 className = "text-xs font-semibold text-[var(--text-secondary)] uppercase tracking-wider" >
< h5 className = "text-xs font-semibold text-[var(--text-secondary)] uppercase tracking-wider" >
S upplier Information
{ t ( 'inventory.sections.s upplierInformation' ) }
< / h5 >
< / h5 >
< div className = "grid grid-cols-1 md:grid-cols-2 gap-4" >
< div className = "grid grid-cols-1 md:grid-cols-2 gap-4" >
< div >
< div >
< label className = "block text-sm font-medium text-[var(--text-secondary)] mb-2" >
< label className = "block text-sm font-medium text-[var(--text-secondary)] mb-2" >
P referred Supplier ID
{ t ( 'inventory.fields.p referredSupplierId' ) }
< / label >
< / label >
< input
< input
type = "text"
type = "text"
value = { inventoryData . preferredSupplierId }
value = { inventoryData . preferredSupplierId }
onChange = { ( e ) = > handleDataChange ( { . . . inventoryData , preferredSupplierId : e.target.value } ) }
onChange = { ( e ) = > handleDataChange ( { . . . inventoryData , preferredSupplierId : e.target.value } ) }
placeholder = "Supplier ID"
placeholder = { t ( 'inventory.fields.preferredSupplierIdPlaceholder' ) }
className = "w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
className = "w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/ >
/ >
< / div >
< / div >
< div >
< div >
< label className = "block text-sm font-medium text-[var(--text-secondary)] mb-2" >
< label className = "block text-sm font-medium text-[var(--text-secondary)] mb-2" >
S upplier Product Code
{ t ( 'inventory.fields.s upplierProductCode' ) }
< / label >
< / label >
< input
< input
type = "text"
type = "text"
value = { inventoryData . supplierProductCode }
value = { inventoryData . supplierProductCode }
onChange = { ( e ) = > handleDataChange ( { . . . inventoryData , supplierProductCode : e.target.value } ) }
onChange = { ( e ) = > handleDataChange ( { . . . inventoryData , supplierProductCode : e.target.value } ) }
placeholder = "S upplier's p roduct code"
placeholder = { t ( 'inventory.fields.s upplierP roductCodePlaceholder' ) }
className = "w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
className = "w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/ >
/ >
< / div >
< / div >
@@ -593,13 +594,13 @@ const InventoryDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange })
{ /* Quality & Compliance */ }
{ /* Quality & Compliance */ }
< div className = "space-y-4 border-t border-[var(--border-primary)] pt-4" >
< div className = "space-y-4 border-t border-[var(--border-primary)] pt-4" >
< h5 className = "text-xs font-semibold text-[var(--text-secondary)] uppercase tracking-wider" >
< h5 className = "text-xs font-semibold text-[var(--text-secondary)] uppercase tracking-wider" >
Quality & Compliance
{ t ( 'inventory.sections.qualityAnd Compliance' ) }
< / h5 >
< / h5 >
< div className = "grid grid-cols-1 gap-4" >
< div className = "grid grid-cols-1 gap-4" >
< div >
< div >
< label className = "block text-sm font-medium text-[var(--text-secondary)] mb-2" >
< label className = "block text-sm font-medium text-[var(--text-secondary)] mb-2" >
A llergen Information
{ t ( 'inventory.fields.a llergenInfo' ) }
< Tooltip content = "Comma-separated list: e.g., gluten, milk, eggs, nuts" >
< Tooltip content = { t ( 'tooltips.allergenInfo' ) } >
< Info className = "inline w-4 h-4 ml-1 text-[var(--text-tertiary)]" / >
< Info className = "inline w-4 h-4 ml-1 text-[var(--text-tertiary)]" / >
< / Tooltip >
< / Tooltip >
< / label >
< / label >
@@ -607,15 +608,15 @@ const InventoryDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange })
type = "text"
type = "text"
value = { inventoryData . allergenInfo }
value = { inventoryData . allergenInfo }
onChange = { ( e ) = > handleDataChange ( { . . . inventoryData , allergenInfo : e.target.value } ) }
onChange = { ( e ) = > handleDataChange ( { . . . inventoryData , allergenInfo : e.target.value } ) }
placeholder = "gluten, milk, eggs"
placeholder = { t ( 'inventory.fields.allergenInfoPlaceholder' ) }
className = "w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
className = "w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/ >
/ >
< / div >
< / div >
< div >
< div >
< label className = "block text-sm font-medium text-[var(--text-secondary)] mb-2" >
< label className = "block text-sm font-medium text-[var(--text-secondary)] mb-2" >
N utritional Information
{ t ( 'inventory.fields.n utritionalInfo' ) }
< Tooltip content = "Key nutrition facts as comma-separated list" >
< Tooltip content = { t ( 'tooltips.nutritionalInfo' ) } >
< Info className = "inline w-4 h-4 ml-1 text-[var(--text-tertiary)]" / >
< Info className = "inline w-4 h-4 ml-1 text-[var(--text-tertiary)]" / >
< / Tooltip >
< / Tooltip >
< / label >
< / label >
@@ -623,15 +624,15 @@ const InventoryDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange })
type = "text"
type = "text"
value = { inventoryData . nutritionalInfo }
value = { inventoryData . nutritionalInfo }
onChange = { ( e ) = > handleDataChange ( { . . . inventoryData , nutritionalInfo : e.target.value } ) }
onChange = { ( e ) = > handleDataChange ( { . . . inventoryData , nutritionalInfo : e.target.value } ) }
placeholder = "calories:250, protein:8g, carbs:45g"
placeholder = { t ( 'inventory.fields.nutritionalInfoPlaceholder' ) }
className = "w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
className = "w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/ >
/ >
< / div >
< / div >
< div >
< div >
< label className = "block text-sm font-medium text-[var(--text-secondary)] mb-2" >
< label className = "block text-sm font-medium text-[var(--text-secondary)] mb-2" >
C ertifications
{ t ( 'inventory.fields.c ertifications' ) }
< Tooltip content = "Comma-separated list: e.g., Organic, Non-GMO, Kosher" >
< Tooltip content = { t ( 'tooltips.certifications' ) } >
< Info className = "inline w-4 h-4 ml-1 text-[var(--text-tertiary)]" / >
< Info className = "inline w-4 h-4 ml-1 text-[var(--text-tertiary)]" / >
< / Tooltip >
< / Tooltip >
< / label >
< / label >
@@ -639,7 +640,7 @@ const InventoryDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange })
type = "text"
type = "text"
value = { inventoryData . certifications }
value = { inventoryData . certifications }
onChange = { ( e ) = > handleDataChange ( { . . . inventoryData , certifications : e.target.value } ) }
onChange = { ( e ) = > handleDataChange ( { . . . inventoryData , certifications : e.target.value } ) }
placeholder = "Organic, Non-GMO, Kosher"
placeholder = { t ( 'inventory.fields.certificationsPlaceholder' ) }
className = "w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
className = "w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/ >
/ >
< / div >
< / div >
@@ -649,12 +650,12 @@ const InventoryDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange })
{ /* Physical Properties */ }
{ /* Physical Properties */ }
< div className = "space-y-4 border-t border-[var(--border-primary)] pt-4" >
< div className = "space-y-4 border-t border-[var(--border-primary)] pt-4" >
< h5 className = "text-xs font-semibold text-[var(--text-secondary)] uppercase tracking-wider" >
< h5 className = "text-xs font-semibold text-[var(--text-secondary)] uppercase tracking-wider" >
P hysical Properties
{ t ( 'inventory.sections.p hysicalProperties' ) }
< / h5 >
< / h5 >
< div className = "grid grid-cols-1 md:grid-cols-2 gap-4" >
< div className = "grid grid-cols-1 md:grid-cols-2 gap-4" >
< div >
< div >
< label className = "block text-sm font-medium text-[var(--text-secondary)] mb-2" >
< label className = "block text-sm font-medium text-[var(--text-secondary)] mb-2" >
Weight ( kg )
{ t ( 'inventory.fields.weight' ) }
< / label >
< / label >
< input
< input
type = "number"
type = "number"
@@ -669,7 +670,7 @@ const InventoryDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange })
< div >
< div >
< label className = "block text-sm font-medium text-[var(--text-secondary)] mb-2" >
< label className = "block text-sm font-medium text-[var(--text-secondary)] mb-2" >
Volume ( L )
{ t ( 'inventory.fields.volume' ) }
< / label >
< / label >
< input
< input
type = "number"
type = "number"
@@ -684,26 +685,26 @@ const InventoryDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange })
< div >
< div >
< label className = "block text-sm font-medium text-[var(--text-secondary)] mb-2" >
< label className = "block text-sm font-medium text-[var(--text-secondary)] mb-2" >
Dimensions ( L × W × H cm )
{ t ( 'inventory.fields.dimensions' ) }
< / label >
< / label >
< input
< input
type = "text"
type = "text"
value = { inventoryData . dimensions }
value = { inventoryData . dimensions }
onChange = { ( e ) = > handleDataChange ( { . . . inventoryData , dimensions : e.target.value } ) }
onChange = { ( e ) = > handleDataChange ( { . . . inventoryData , dimensions : e.target.value } ) }
placeholder = "30× 20× 15"
placeholder = { t ( 'inventory.fields.dimensionsPlaceholder' ) }
className = "w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
className = "w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/ >
/ >
< / div >
< / div >
< div >
< div >
< label className = "block text-sm font-medium text-[var(--text-secondary)] mb-2" >
< label className = "block text-sm font-medium text-[var(--text-secondary)] mb-2" >
Color
{ t ( 'inventory.fields.color' ) }
< / label >
< / label >
< input
< input
type = "text"
type = "text"
value = { inventoryData . color }
value = { inventoryData . color }
onChange = { ( e ) = > handleDataChange ( { . . . inventoryData , color : e.target.value } ) }
onChange = { ( e ) = > handleDataChange ( { . . . inventoryData , color : e.target.value } ) }
placeholder = "Product color"
placeholder = { t ( 'inventory.fields.colorPlaceholder' ) }
className = "w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
className = "w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/ >
/ >
< / div >
< / div >
@@ -713,7 +714,7 @@ const InventoryDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange })
{ /* Status & Tracking */ }
{ /* Status & Tracking */ }
< div className = "space-y-4 border-t border-[var(--border-primary)] pt-4" >
< div className = "space-y-4 border-t border-[var(--border-primary)] pt-4" >
< h5 className = "text-xs font-semibold text-[var(--text-secondary)] uppercase tracking-wider" >
< h5 className = "text-xs font-semibold text-[var(--text-secondary)] uppercase tracking-wider" >
Status & Tracking
{ t ( 'inventory.sections.statusAnd Tracking' ) }
< / h5 >
< / h5 >
< div className = "grid grid-cols-1 md:grid-cols-2 gap-4" >
< div className = "grid grid-cols-1 md:grid-cols-2 gap-4" >
< div className = "flex items-center gap-2" >
< div className = "flex items-center gap-2" >
@@ -724,7 +725,7 @@ const InventoryDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange })
className = "rounded border-[var(--border-secondary)] text-[var(--color-primary)] focus:ring-[var(--color-primary)]"
className = "rounded border-[var(--border-secondary)] text-[var(--color-primary)] focus:ring-[var(--color-primary)]"
/ >
/ >
< label className = "text-sm text-[var(--text-secondary)]" >
< label className = "text-sm text-[var(--text-secondary)]" >
Active Item
{ t ( 'inventory.fields.isActive' ) }
< / label >
< / label >
< / div >
< / div >
@@ -736,7 +737,7 @@ const InventoryDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange })
className = "rounded border-[var(--border-secondary)] text-[var(--color-primary)] focus:ring-[var(--color-primary)]"
className = "rounded border-[var(--border-secondary)] text-[var(--color-primary)] focus:ring-[var(--color-primary)]"
/ >
/ >
< label className = "text-sm text-[var(--text-secondary)]" >
< label className = "text-sm text-[var(--text-secondary)]" >
Track by Lot / Batch
{ t ( 'inventory.fields.trackByLot' ) }
< / label >
< / label >
< / div >
< / div >
@@ -748,7 +749,7 @@ const InventoryDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange })
className = "rounded border-[var(--border-secondary)] text-[var(--color-primary)] focus:ring-[var(--color-primary)]"
className = "rounded border-[var(--border-secondary)] text-[var(--color-primary)] focus:ring-[var(--color-primary)]"
/ >
/ >
< label className = "text-sm text-[var(--text-secondary)]" >
< label className = "text-sm text-[var(--text-secondary)]" >
Track by Expiry Date
{ t ( 'inventory.fields.trackByExpiry' ) }
< / label >
< / label >
< / div >
< / div >
@@ -760,7 +761,7 @@ const InventoryDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange })
className = "rounded border-[var(--border-secondary)] text-[var(--color-primary)] focus:ring-[var(--color-primary)]"
className = "rounded border-[var(--border-secondary)] text-[var(--color-primary)] focus:ring-[var(--color-primary)]"
/ >
/ >
< label className = "text-sm text-[var(--text-secondary)]" >
< label className = "text-sm text-[var(--text-secondary)]" >
A llow Negative Stock
{ t ( 'inventory.fields.a llowNegativeStock' ) }
< / label >
< / label >
< / div >
< / div >
< / div >
< / div >
@@ -769,17 +770,17 @@ const InventoryDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange })
{ /* Additional Information */ }
{ /* Additional Information */ }
< div className = "space-y-4 border-t border-[var(--border-primary)] pt-4" >
< div className = "space-y-4 border-t border-[var(--border-primary)] pt-4" >
< h5 className = "text-xs font-semibold text-[var(--text-secondary)] uppercase tracking-wider" >
< h5 className = "text-xs font-semibold text-[var(--text-secondary)] uppercase tracking-wider" >
A dditional Information
{ t ( 'inventory.sections.a dditionalInformation' ) }
< / h5 >
< / h5 >
< div className = "grid grid-cols-1 gap-4" >
< div className = "grid grid-cols-1 gap-4" >
< div >
< div >
< label className = "block text-sm font-medium text-[var(--text-secondary)] mb-2" >
< label className = "block text-sm font-medium text-[var(--text-secondary)] mb-2" >
Notes
{ t ( 'inventory.fields.notes' ) }
< / label >
< / label >
< textarea
< textarea
value = { inventoryData . notes }
value = { inventoryData . notes }
onChange = { ( e ) = > handleDataChange ( { . . . inventoryData , notes : e.target.value } ) }
onChange = { ( e ) = > handleDataChange ( { . . . inventoryData , notes : e.target.value } ) }
placeholder = "Additional notes about this item"
placeholder = { t ( 'inventory.fields.notesPlaceholder' ) }
rows = { 3 }
rows = { 3 }
className = "w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
className = "w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/ >
/ >
@@ -787,8 +788,8 @@ const InventoryDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange })
< div >
< div >
< label className = "block text-sm font-medium text-[var(--text-secondary)] mb-2" >
< label className = "block text-sm font-medium text-[var(--text-secondary)] mb-2" >
Tags
{ t ( 'inventory.fields.tags' ) }
< Tooltip content = "Comma-separated tags for easier search and filtering" >
< Tooltip content = { t ( 'tooltips.tags' ) } >
< Info className = "inline w-4 h-4 ml-1 text-[var(--text-tertiary)]" / >
< Info className = "inline w-4 h-4 ml-1 text-[var(--text-tertiary)]" / >
< / Tooltip >
< / Tooltip >
< / label >
< / label >
@@ -796,22 +797,22 @@ const InventoryDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange })
type = "text"
type = "text"
value = { inventoryData . tags }
value = { inventoryData . tags }
onChange = { ( e ) = > handleDataChange ( { . . . inventoryData , tags : e.target.value } ) }
onChange = { ( e ) = > handleDataChange ( { . . . inventoryData , tags : e.target.value } ) }
placeholder = "organic, premium, seasonal"
placeholder = { t ( 'inventory.fields.tagsPlaceholder' ) }
className = "w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
className = "w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/ >
/ >
< / div >
< / div >
< div >
< div >
< label className = "block text-sm font-medium text-[var(--text-secondary)] mb-2" >
< label className = "block text-sm font-medium text-[var(--text-secondary)] mb-2" >
C ustom Fields ( JSON )
{ t ( 'inventory.fields.c ustomFields' ) }
< Tooltip content = "Additional custom data in JSON format" >
< Tooltip content = { t ( 'tooltips.customFields' ) } >
< Info className = "inline w-4 h-4 ml-1 text-[var(--text-tertiary)]" / >
< Info className = "inline w-4 h-4 ml-1 text-[var(--text-tertiary)]" / >
< / Tooltip >
< / Tooltip >
< / label >
< / label >
< textarea
< textarea
value = { inventoryData . customFields }
value = { inventoryData . customFields }
onChange = { ( e ) = > handleDataChange ( { . . . inventoryData , customFields : e.target.value } ) }
onChange = { ( e ) = > handleDataChange ( { . . . inventoryData , customFields : e.target.value } ) }
placeholder = '{" custom_f ield": "value"}'
placeholder = { t ( 'inventory.fields. customF ieldsPlaceholder' ) }
rows = { 2 }
rows = { 2 }
className = "w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)] font-mono text-xs"
className = "w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)] font-mono text-xs"
/ >
/ >
@@ -826,13 +827,17 @@ const InventoryDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange })
export const InventoryWizardSteps = (
export const InventoryWizardSteps = (
data : Record < string , any > ,
data : Record < string , any > ,
setData : ( data : Record < string , any > ) = > void
setData : ( data : Record < string , any > ) = > void
) : WizardStep [ ] = > [
) : WizardStep [ ] = > {
// Import translation function for step title
// Note: The title will be displayed dynamically based on user's language preference
return [
{
{
id : 'inventory-details' ,
id : 'inventory-details' ,
title : 'I nventory Details' ,
title : 'inventory.i nventoryDetails' ,
component : ( props ) = > < InventoryDetailsStep { ...props } data = { data } onDataChange = { setData } / > ,
component : ( props ) = > < InventoryDetailsStep { ...props } data = { data } onDataChange = { setData } / > ,
validate : ( ) = > {
validate : ( ) = > {
return ! ! ( data . name && data . unitOfMeasure && data . productType ) ;
return ! ! ( data . name && data . unitOfMeasure && data . productType ) ;
} ,
} ,
} ,
} ,
] ;
] ;
} ;