feat: Sales Entry wizard now uses finished products dropdown
Sales Entry Wizard - Manual Entry Improvements: - Replaced text input 'Nombre del producto' with dropdown selector - Fetches finished products from inventory via inventoryService.getIngredients() - Filters for finished_product category only - Shows product name and price in dropdown options - Auto-fills price when product is selected - Loading state while fetching products - Error handling if products fail to load - Empty state if no finished products exist - Disabled 'Agregar Producto' button while loading or if no products - Fixed dark mode inputs with bg-[var(--bg-primary)] and text-[var(--text-primary)] This is a CRITICAL improvement - products sold must come from inventory.
This commit is contained in:
Claude
@@ -1,4 +1,4 @@
|
||||
import React, { useState } from 'react';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { WizardStep, WizardStepProps } from '../../../ui/WizardModal/WizardModal';
|
||||
import {
|
||||
Edit3,
|
||||
@@ -16,6 +16,7 @@ import {
|
||||
} from 'lucide-react';
|
||||
import { useTenant } from '../../../../stores/tenant.store';
|
||||
import { salesService } from '../../../../api/services/sales';
|
||||
import { inventoryService } from '../../../../api/services/inventory';
|
||||
|
||||
// ========================================
|
||||
// STEP 1: Entry Method Selection
|
||||
@@ -184,17 +185,42 @@ const EntryMethodStep: React.FC<EntryMethodStepProps> = ({ data, onDataChange, o
|
||||
// ========================================
|
||||
|
||||
const ManualEntryStep: React.FC<EntryMethodStepProps> = ({ data, onDataChange, onNext }) => {
|
||||
const { currentTenant } = useTenant();
|
||||
const [salesItems, setSalesItems] = useState(data.salesItems || []);
|
||||
const [saleDate, setSaleDate] = useState(
|
||||
data.saleDate || new Date().toISOString().split('T')[0]
|
||||
);
|
||||
const [paymentMethod, setPaymentMethod] = useState(data.paymentMethod || 'cash');
|
||||
const [notes, setNotes] = useState(data.notes || '');
|
||||
const [products, setProducts] = useState<any[]>([]);
|
||||
const [loadingProducts, setLoadingProducts] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
fetchProducts();
|
||||
}, []);
|
||||
|
||||
const fetchProducts = async () => {
|
||||
if (!currentTenant?.id) return;
|
||||
|
||||
setLoadingProducts(true);
|
||||
try {
|
||||
const result = await inventoryService.getIngredients(currentTenant.id);
|
||||
// Filter for finished products only
|
||||
const finishedProducts = result.filter((p: any) => p.category === 'finished_product');
|
||||
setProducts(finishedProducts);
|
||||
} catch (err: any) {
|
||||
console.error('Error fetching products:', err);
|
||||
setError('Error al cargar los productos');
|
||||
} finally {
|
||||
setLoadingProducts(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleAddItem = () => {
|
||||
setSalesItems([
|
||||
...salesItems,
|
||||
{ id: Date.now(), product: '', quantity: 1, unitPrice: 0, subtotal: 0 },
|
||||
{ id: Date.now(), productId: '', product: '', quantity: 1, unitPrice: 0, subtotal: 0 },
|
||||
]);
|
||||
};
|
||||
|
||||
@@ -202,8 +228,18 @@ const ManualEntryStep: React.FC<EntryMethodStepProps> = ({ data, onDataChange, o
|
||||
const updated = salesItems.map((item: any, i: number) => {
|
||||
if (i === index) {
|
||||
const newItem = { ...item, [field]: value };
|
||||
|
||||
// If product is selected, auto-fill price
|
||||
if (field === 'productId') {
|
||||
const selectedProduct = products.find((p: any) => p.id === value);
|
||||
if (selectedProduct) {
|
||||
newItem.product = selectedProduct.name;
|
||||
newItem.unitPrice = selectedProduct.average_cost || selectedProduct.last_purchase_price || 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Auto-calculate subtotal
|
||||
if (field === 'quantity' || field === 'unitPrice') {
|
||||
if (field === 'quantity' || field === 'unitPrice' || field === 'productId') {
|
||||
newItem.subtotal = (newItem.quantity || 0) * (newItem.unitPrice || 0);
|
||||
}
|
||||
return newItem;
|
||||
@@ -278,6 +314,13 @@ const ManualEntryStep: React.FC<EntryMethodStepProps> = ({ data, onDataChange, o
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="p-3 bg-red-50 border border-red-200 rounded-lg text-red-700 text-sm flex items-start gap-2">
|
||||
<AlertCircle className="w-4 h-4 mt-0.5 flex-shrink-0" />
|
||||
<span>{error}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Sales Items */}
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
@@ -287,13 +330,25 @@ const ManualEntryStep: React.FC<EntryMethodStepProps> = ({ data, onDataChange, o
|
||||
</label>
|
||||
<button
|
||||
onClick={handleAddItem}
|
||||
className="px-3 py-1.5 text-sm bg-[var(--color-primary)] text-white rounded-md hover:bg-[var(--color-primary)]/90 transition-colors"
|
||||
disabled={loadingProducts || products.length === 0}
|
||||
className="px-3 py-1.5 text-sm bg-[var(--color-primary)] text-white rounded-md hover:bg-[var(--color-primary)]/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
+ Agregar Producto
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{salesItems.length === 0 ? (
|
||||
{loadingProducts ? (
|
||||
<div className="flex items-center justify-center py-8">
|
||||
<Loader2 className="w-6 h-6 animate-spin text-[var(--color-primary)]" />
|
||||
<span className="ml-3 text-[var(--text-secondary)]">Cargando productos...</span>
|
||||
</div>
|
||||
) : products.length === 0 ? (
|
||||
<div className="text-center py-8 border-2 border-dashed border-[var(--border-secondary)] rounded-lg text-[var(--text-tertiary)]">
|
||||
<Package className="w-8 h-8 mx-auto mb-2 opacity-50" />
|
||||
<p>No hay productos terminados disponibles</p>
|
||||
<p className="text-sm">Agrega productos al inventario primero</p>
|
||||
</div>
|
||||
) : salesItems.length === 0 ? (
|
||||
<div className="text-center py-8 border-2 border-dashed border-[var(--border-secondary)] rounded-lg text-[var(--text-tertiary)]">
|
||||
<Package className="w-8 h-8 mx-auto mb-2 opacity-50" />
|
||||
<p>No hay productos agregados</p>
|
||||
@@ -308,13 +363,18 @@ const ManualEntryStep: React.FC<EntryMethodStepProps> = ({ data, onDataChange, o
|
||||
>
|
||||
<div className="grid grid-cols-12 gap-2 items-center">
|
||||
<div className="col-span-12 sm:col-span-5">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Nombre del producto"
|
||||
value={item.product}
|
||||
onChange={(e) => handleUpdateItem(index, 'product', e.target.value)}
|
||||
className="w-full px-2 py-1.5 text-sm border border-[var(--border-secondary)] rounded focus:outline-none focus:ring-1 focus:ring-[var(--color-primary)]"
|
||||
/>
|
||||
<select
|
||||
value={item.productId}
|
||||
onChange={(e) => handleUpdateItem(index, 'productId', e.target.value)}
|
||||
className="w-full px-2 py-1.5 text-sm border border-[var(--border-secondary)] rounded focus:outline-none focus:ring-1 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
||||
>
|
||||
<option value="">Seleccionar producto...</option>
|
||||
{products.map((product: any) => (
|
||||
<option key={product.id} value={product.id}>
|
||||
{product.name} - €{(product.average_cost || product.last_purchase_price || 0).toFixed(2)}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="col-span-4 sm:col-span-2">
|
||||
<input
|
||||
|
||||
Reference in New Issue
Block a user