875 lines
34 KiB
TypeScript
875 lines
34 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
||
import { useTranslation } from 'react-i18next';
|
||
import { WizardStep, WizardStepProps } from '../../../ui/WizardModal/WizardModal';
|
||
import {
|
||
Edit3,
|
||
Upload,
|
||
CheckCircle2,
|
||
Download,
|
||
FileSpreadsheet,
|
||
Calendar,
|
||
DollarSign,
|
||
Package,
|
||
CreditCard,
|
||
Loader2,
|
||
X,
|
||
AlertCircle,
|
||
} from 'lucide-react';
|
||
import { useTenant } from '../../../../stores/tenant.store';
|
||
import { salesService } from '../../../../api/services/sales';
|
||
import { inventoryService } from '../../../../api/services/inventory';
|
||
import { showToast } from '../../../../utils/toast';
|
||
|
||
// ========================================
|
||
// STEP 1: Entry Method Selection
|
||
// ========================================
|
||
|
||
const EntryMethodStep: React.FC<WizardStepProps> = ({ dataRef, onDataChange, onNext }) => {
|
||
const data = dataRef?.current || {};
|
||
const { t } = useTranslation('wizards');
|
||
const [selectedMethod, setSelectedMethod] = useState<'manual' | 'upload'>(
|
||
data.entryMethod || 'manual'
|
||
);
|
||
|
||
const handleSelect = (method: 'manual' | 'upload') => {
|
||
setSelectedMethod(method);
|
||
const newData = { ...data, entryMethod: method };
|
||
onDataChange?.(newData);
|
||
// Automatically advance to next step after selection
|
||
setTimeout(() => onNext?.(), 100);
|
||
};
|
||
|
||
return (
|
||
<div className="space-y-6">
|
||
<div className="text-center pb-4 border-b border-[var(--border-primary)]">
|
||
<h3 className="text-lg font-semibold text-[var(--text-primary)] mb-2">
|
||
{t('salesEntry.entryMethod.title')}
|
||
</h3>
|
||
<p className="text-sm text-[var(--text-secondary)]">
|
||
{t('salesEntry.entryMethod.subtitle')}
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
{/* Manual Entry Option */}
|
||
<button
|
||
onClick={() => handleSelect('manual')}
|
||
className={`
|
||
p-6 rounded-xl border-2 transition-all duration-200 text-left
|
||
hover:shadow-lg hover:-translate-y-1
|
||
focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] focus:ring-offset-2
|
||
${
|
||
selectedMethod === 'manual'
|
||
? 'border-[var(--color-primary)] bg-[var(--color-primary)]/5 shadow-md'
|
||
: 'border-[var(--border-secondary)] bg-[var(--bg-primary)]'
|
||
}
|
||
`}
|
||
>
|
||
<div className="flex items-start gap-4">
|
||
<div
|
||
className={`
|
||
p-3 rounded-lg transition-colors
|
||
${
|
||
selectedMethod === 'manual'
|
||
? 'bg-[var(--color-primary)] text-white'
|
||
: 'bg-[var(--bg-secondary)] text-[var(--color-primary)]'
|
||
}
|
||
`}
|
||
>
|
||
<Edit3 className="w-6 h-6" />
|
||
</div>
|
||
<div className="flex-1">
|
||
<h4 className="text-lg font-semibold text-[var(--text-primary)] mb-2">
|
||
{t('salesEntry.entryMethod.manual.title')}
|
||
</h4>
|
||
<p className="text-sm text-[var(--text-secondary)] mb-3">
|
||
{t('salesEntry.entryMethod.manual.description')}
|
||
</p>
|
||
<div className="space-y-1 text-xs text-[var(--text-tertiary)]">
|
||
<p className="flex items-center gap-1.5">
|
||
<CheckCircle2 className="w-3.5 h-3.5 text-green-600" />
|
||
{t('salesEntry.entryMethod.manual.benefits.1')}
|
||
</p>
|
||
<p className="flex items-center gap-1.5">
|
||
<CheckCircle2 className="w-3.5 h-3.5 text-green-600" />
|
||
{t('salesEntry.entryMethod.manual.benefits.2')}
|
||
</p>
|
||
<p className="flex items-center gap-1.5">
|
||
<CheckCircle2 className="w-3.5 h-3.5 text-green-600" />
|
||
{t('salesEntry.entryMethod.manual.benefits.3')}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</button>
|
||
|
||
{/* File Upload Option */}
|
||
<button
|
||
onClick={() => handleSelect('upload')}
|
||
className={`
|
||
relative p-6 rounded-xl border-2 transition-all duration-200 text-left
|
||
hover:shadow-lg hover:-translate-y-1
|
||
focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] focus:ring-offset-2
|
||
${
|
||
selectedMethod === 'upload'
|
||
? 'border-[var(--color-primary)] bg-[var(--color-primary)]/5 shadow-md'
|
||
: 'border-[var(--border-secondary)] bg-[var(--bg-primary)]'
|
||
}
|
||
`}
|
||
>
|
||
{/* Recommended Badge */}
|
||
<div className="absolute top-3 right-3">
|
||
<span className="px-2 py-1 text-xs rounded-full bg-gradient-to-r from-amber-100 to-orange-100 text-orange-800 font-semibold">
|
||
{t('salesEntry.entryMethod.file.recommended')}
|
||
</span>
|
||
</div>
|
||
|
||
<div className="flex items-start gap-4">
|
||
<div
|
||
className={`
|
||
p-3 rounded-lg transition-colors
|
||
${
|
||
selectedMethod === 'upload'
|
||
? 'bg-[var(--color-primary)] text-white'
|
||
: 'bg-[var(--bg-secondary)] text-[var(--color-primary)]'
|
||
}
|
||
`}
|
||
>
|
||
<Upload className="w-6 h-6" />
|
||
</div>
|
||
<div className="flex-1">
|
||
<h4 className="text-lg font-semibold text-[var(--text-primary)] mb-2">
|
||
{t('salesEntry.entryMethod.file.title')}
|
||
</h4>
|
||
<p className="text-sm text-[var(--text-secondary)] mb-3">
|
||
{t('salesEntry.entryMethod.file.description')}
|
||
</p>
|
||
<div className="space-y-1 text-xs text-[var(--text-tertiary)]">
|
||
<p className="flex items-center gap-1.5">
|
||
<CheckCircle2 className="w-3.5 h-3.5 text-green-600" />
|
||
{t('salesEntry.entryMethod.file.benefits.1')}
|
||
</p>
|
||
<p className="flex items-center gap-1.5">
|
||
<CheckCircle2 className="w-3.5 h-3.5 text-green-600" />
|
||
{t('salesEntry.entryMethod.file.benefits.2')}
|
||
</p>
|
||
<p className="flex items-center gap-1.5">
|
||
<CheckCircle2 className="w-3.5 h-3.5 text-green-600" />
|
||
{t('salesEntry.entryMethod.file.benefits.3')}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
// ========================================
|
||
// STEP 2a: Manual Entry Form
|
||
// ========================================
|
||
|
||
const ManualEntryStep: React.FC<WizardStepProps> = ({ dataRef, onDataChange, onNext }) => {
|
||
const data = dataRef?.current || {};
|
||
const { t } = useTranslation('wizards');
|
||
const { currentTenant } = useTenant();
|
||
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(t('salesEntry.messages.errorLoadingProducts'));
|
||
} finally {
|
||
setLoadingProducts(false);
|
||
}
|
||
};
|
||
|
||
const handleAddItem = () => {
|
||
const newItems = [
|
||
...(data.salesItems || []),
|
||
{ id: Date.now(), productId: '', product: '', quantity: 1, unitPrice: 0, subtotal: 0 },
|
||
];
|
||
onDataChange?.({ ...data, salesItems: newItems });
|
||
};
|
||
|
||
const handleUpdateItem = (index: number, field: string, value: any) => {
|
||
const updated = (data.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' || field === 'productId') {
|
||
newItem.subtotal = (newItem.quantity || 0) * (newItem.unitPrice || 0);
|
||
}
|
||
return newItem;
|
||
}
|
||
return item;
|
||
});
|
||
onDataChange?.({ ...data, salesItems: updated });
|
||
};
|
||
|
||
const handleRemoveItem = (index: number) => {
|
||
const newItems = (data.salesItems || []).filter((_: any, i: number) => i !== index);
|
||
onDataChange?.({ ...data, salesItems: newItems });
|
||
};
|
||
|
||
const calculateTotal = () => {
|
||
return (data.salesItems || []).reduce((sum: number, item: any) => sum + (item.subtotal || 0), 0);
|
||
};
|
||
|
||
// Auto-save totalAmount when items change
|
||
useEffect(() => {
|
||
onDataChange?.({
|
||
...data,
|
||
totalAmount: calculateTotal(),
|
||
});
|
||
}, [data.salesItems]);
|
||
|
||
return (
|
||
<div className="space-y-6">
|
||
<div className="text-center pb-4 border-b border-[var(--border-primary)]">
|
||
<h3 className="text-lg font-semibold text-[var(--text-primary)] mb-2">
|
||
{t('salesEntry.manualEntry.title')}
|
||
</h3>
|
||
<p className="text-sm text-[var(--text-secondary)]">
|
||
{t('salesEntry.manualEntry.subtitle')}
|
||
</p>
|
||
</div>
|
||
|
||
{/* Date and Payment Method */}
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
<div>
|
||
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
||
<Calendar className="w-4 h-4 inline mr-1.5" />
|
||
{t('salesEntry.manualEntry.fields.saleDate')} *
|
||
</label>
|
||
<input
|
||
type="date"
|
||
value={data.saleDate || new Date().toISOString().split('T')[0]}
|
||
onChange={(e) => onDataChange?.({ ...data, saleDate: e.target.value })}
|
||
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>
|
||
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
||
<CreditCard className="w-4 h-4 inline mr-1.5" />
|
||
{t('salesEntry.manualEntry.fields.paymentMethod')} *
|
||
</label>
|
||
<select
|
||
value={data.paymentMethod || 'cash'}
|
||
onChange={(e) => onDataChange?.({ ...data, paymentMethod: e.target.value })}
|
||
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="cash">{t('salesEntry.paymentMethods.cash')}</option>
|
||
<option value="card">{t('salesEntry.paymentMethods.card')}</option>
|
||
<option value="mobile">{t('salesEntry.paymentMethods.mobile')}</option>
|
||
<option value="transfer">{t('salesEntry.paymentMethods.transfer')}</option>
|
||
<option value="other">{t('salesEntry.paymentMethods.other')}</option>
|
||
</select>
|
||
</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">
|
||
<label className="block text-sm font-medium text-[var(--text-secondary)]">
|
||
<Package className="w-4 h-4 inline mr-1.5" />
|
||
{t('salesEntry.manualEntry.products.title')}
|
||
</label>
|
||
<button
|
||
onClick={handleAddItem}
|
||
disabled={loadingProducts}
|
||
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"
|
||
>
|
||
{t('salesEntry.manualEntry.products.addProduct')}
|
||
</button>
|
||
</div>
|
||
|
||
{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)]">{t('salesEntry.manualEntry.products.loading')}</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>{t('salesEntry.manualEntry.products.noFinishedProducts')}</p>
|
||
<p className="text-sm">{t('salesEntry.manualEntry.products.addToInventory')}</p>
|
||
</div>
|
||
) : (data.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>{t('salesEntry.manualEntry.products.noProductsAdded')}</p>
|
||
<p className="text-sm">{t('salesEntry.manualEntry.products.clickToBegin')}</p>
|
||
</div>
|
||
) : (
|
||
<div className="space-y-2">
|
||
{(data.salesItems || []).map((item: any, index: number) => (
|
||
<div
|
||
key={item.id}
|
||
className="p-3 border border-[var(--border-secondary)] rounded-lg bg-[var(--bg-secondary)]/30"
|
||
>
|
||
<div className="grid grid-cols-12 gap-2 items-center">
|
||
<div className="col-span-12 sm:col-span-5">
|
||
<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="">{t('salesEntry.manualEntry.products.selectProduct')}</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
|
||
type="number"
|
||
placeholder={t('salesEntry.manualEntry.products.quantity')}
|
||
value={item.quantity}
|
||
onChange={(e) =>
|
||
handleUpdateItem(index, 'quantity', parseFloat(e.target.value) || 0)
|
||
}
|
||
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)]"
|
||
min="0"
|
||
step="1"
|
||
/>
|
||
</div>
|
||
<div className="col-span-4 sm:col-span-2">
|
||
<input
|
||
type="number"
|
||
placeholder={t('salesEntry.manualEntry.products.price')}
|
||
value={item.unitPrice}
|
||
onChange={(e) =>
|
||
handleUpdateItem(index, 'unitPrice', parseFloat(e.target.value) || 0)
|
||
}
|
||
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)]"
|
||
min="0"
|
||
step="0.01"
|
||
/>
|
||
</div>
|
||
<div className="col-span-3 sm:col-span-2 text-sm font-semibold text-[var(--text-primary)]">
|
||
€{item.subtotal.toFixed(2)}
|
||
</div>
|
||
<div className="col-span-1 sm:col-span-1 flex justify-end">
|
||
<button
|
||
onClick={() => handleRemoveItem(index)}
|
||
className="p-1 text-red-500 hover:text-red-700 transition-colors"
|
||
>
|
||
✕
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
{/* Total */}
|
||
{(data.salesItems || []).length > 0 && (
|
||
<div className="pt-3 border-t border-[var(--border-primary)] text-right">
|
||
<span className="text-lg font-bold text-[var(--text-primary)]">
|
||
{t('salesEntry.manualEntry.products.total')} €{calculateTotal().toFixed(2)}
|
||
</span>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Notes */}
|
||
<div>
|
||
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
||
{t('salesEntry.manualEntry.fields.notes')}
|
||
</label>
|
||
<textarea
|
||
value={data.notes || ''}
|
||
onChange={(e) => onDataChange?.({ ...data, notes: e.target.value })}
|
||
placeholder={t('salesEntry.manualEntry.fields.notesPlaceholder')}
|
||
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)] text-sm"
|
||
/>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
// ========================================
|
||
// STEP 2b: File Upload
|
||
// ========================================
|
||
|
||
const FileUploadStep: React.FC<WizardStepProps> = ({ dataRef, onDataChange, onNext }) => {
|
||
const data = dataRef?.current || {};
|
||
const { t } = useTranslation('wizards');
|
||
const { currentTenant } = useTenant();
|
||
const [validating, setValidating] = useState(false);
|
||
const [importing, setImporting] = useState(false);
|
||
const [validationResult, setValidationResult] = useState<any>(null);
|
||
const [error, setError] = useState<string | null>(null);
|
||
const [downloadingTemplate, setDownloadingTemplate] = useState(false);
|
||
|
||
const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||
const selectedFile = e.target.files?.[0];
|
||
if (selectedFile) {
|
||
onDataChange?.({ ...data, uploadedFile: selectedFile });
|
||
setValidationResult(null);
|
||
setError(null);
|
||
}
|
||
};
|
||
|
||
const handleRemoveFile = () => {
|
||
onDataChange?.({ ...data, uploadedFile: null });
|
||
setValidationResult(null);
|
||
setError(null);
|
||
};
|
||
|
||
const handleValidate = async () => {
|
||
if (!data.uploadedFile || !currentTenant?.id) return;
|
||
|
||
setValidating(true);
|
||
setError(null);
|
||
|
||
try {
|
||
const result = await salesService.validateImportFile(currentTenant.id, data.uploadedFile);
|
||
setValidationResult(result);
|
||
} catch (err: any) {
|
||
console.error('Error validating file:', err);
|
||
setError(err.response?.data?.detail || t('salesEntry.messages.errorValidatingFile'));
|
||
} finally {
|
||
setValidating(false);
|
||
}
|
||
};
|
||
|
||
const handleImport = async () => {
|
||
if (!data.uploadedFile || !currentTenant?.id) return;
|
||
|
||
setImporting(true);
|
||
setError(null);
|
||
|
||
try {
|
||
const result = await salesService.importSalesData(currentTenant.id, data.uploadedFile, false);
|
||
onDataChange?.({ ...data, importResult: result });
|
||
onNext?.();
|
||
} catch (err: any) {
|
||
console.error('Error importing file:', err);
|
||
setError(err.response?.data?.detail || t('salesEntry.messages.errorImportingFile'));
|
||
} finally {
|
||
setImporting(false);
|
||
}
|
||
};
|
||
|
||
const handleDownloadTemplate = async () => {
|
||
if (!currentTenant?.id) return;
|
||
|
||
setDownloadingTemplate(true);
|
||
try {
|
||
const blob = await salesService.downloadImportTemplate(currentTenant.id);
|
||
const url = window.URL.createObjectURL(blob);
|
||
const a = document.createElement('a');
|
||
a.href = url;
|
||
a.download = 'plantilla_ventas.csv';
|
||
document.body.appendChild(a);
|
||
a.click();
|
||
window.URL.revokeObjectURL(url);
|
||
document.body.removeChild(a);
|
||
} catch (err: any) {
|
||
console.error('Error downloading template:', err);
|
||
setError(t('salesEntry.messages.errorValidatingFile'));
|
||
} finally {
|
||
setDownloadingTemplate(false);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div className="space-y-6">
|
||
<div className="text-center pb-4 border-b border-[var(--border-primary)]">
|
||
<h3 className="text-lg font-semibold text-[var(--text-primary)] mb-2">
|
||
{t('salesEntry.fileUpload.title')}
|
||
</h3>
|
||
<p className="text-sm text-[var(--text-secondary)]">
|
||
{t('salesEntry.fileUpload.subtitle')}
|
||
</p>
|
||
</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>
|
||
)}
|
||
|
||
{/* Download Template Button */}
|
||
<div className="flex justify-center">
|
||
<button
|
||
onClick={handleDownloadTemplate}
|
||
disabled={downloadingTemplate}
|
||
className="px-4 py-2 border border-[var(--border-secondary)] text-[var(--text-secondary)] rounded-lg hover:bg-[var(--bg-secondary)] transition-colors inline-flex items-center gap-2 disabled:opacity-50"
|
||
>
|
||
{downloadingTemplate ? (
|
||
<>
|
||
<Loader2 className="w-4 h-4 animate-spin" />
|
||
{t('salesEntry.fileUpload.downloading')}
|
||
</>
|
||
) : (
|
||
<>
|
||
<Download className="w-4 h-4" />
|
||
{t('salesEntry.fileUpload.downloadTemplate')}
|
||
</>
|
||
)}
|
||
</button>
|
||
</div>
|
||
|
||
{/* File Upload Area */}
|
||
{!data.uploadedFile ? (
|
||
<div className="border-2 border-dashed border-[var(--border-secondary)] rounded-xl p-8 text-center bg-[var(--bg-secondary)]/30">
|
||
<FileSpreadsheet className="w-16 h-16 mx-auto mb-4 text-[var(--color-primary)]/50" />
|
||
<h4 className="text-lg font-semibold text-[var(--text-primary)] mb-2">
|
||
{t('salesEntry.fileUpload.dragDrop.title')}
|
||
</h4>
|
||
<p className="text-sm text-[var(--text-secondary)] mb-4">
|
||
{t('salesEntry.fileUpload.dragDrop.subtitle')}
|
||
</p>
|
||
<label className="inline-block">
|
||
<input
|
||
type="file"
|
||
accept=".csv,.xlsx,.xls"
|
||
onChange={handleFileSelect}
|
||
className="hidden"
|
||
/>
|
||
<span className="px-6 py-2 bg-[var(--color-primary)] text-white rounded-lg hover:bg-[var(--color-primary)]/90 transition-colors cursor-pointer inline-block">
|
||
{t('salesEntry.fileUpload.dragDrop.button')}
|
||
</span>
|
||
</label>
|
||
<p className="text-xs text-[var(--text-tertiary)] mt-3">
|
||
{t('salesEntry.fileUpload.dragDrop.supportedFormats')}
|
||
</p>
|
||
</div>
|
||
) : (
|
||
<div className="border border-[var(--border-secondary)] rounded-lg p-4 bg-[var(--bg-primary)]">
|
||
<div className="flex items-center justify-between">
|
||
<div className="flex items-center gap-3">
|
||
<FileSpreadsheet className="w-8 h-8 text-[var(--color-primary)]" />
|
||
<div>
|
||
<p className="font-medium text-[var(--text-primary)]">{data.uploadedFile.name}</p>
|
||
<p className="text-sm text-[var(--text-secondary)]">
|
||
{(data.uploadedFile.size / 1024).toFixed(2)} KB
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<button
|
||
onClick={handleRemoveFile}
|
||
className="p-1 text-red-500 hover:text-red-700 transition-colors"
|
||
>
|
||
<X className="w-5 h-5" />
|
||
</button>
|
||
</div>
|
||
|
||
{/* Validation Result */}
|
||
{validationResult && (
|
||
<div className="mt-4 p-3 bg-blue-50 border border-blue-200 rounded-lg">
|
||
<p className="text-sm text-blue-800 font-medium mb-2">
|
||
{t('salesEntry.fileUpload.validated.title')}
|
||
</p>
|
||
<div className="text-xs text-blue-700 space-y-1">
|
||
<p>{t('salesEntry.fileUpload.validated.recordsFound')} {validationResult.total_rows || 0}</p>
|
||
<p>{t('salesEntry.fileUpload.validated.validRecords')} {validationResult.valid_rows || 0}</p>
|
||
{validationResult.errors?.length > 0 && (
|
||
<p className="text-red-600">
|
||
{t('salesEntry.fileUpload.validated.errors')} {validationResult.errors.length}
|
||
</p>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Action Buttons */}
|
||
<div className="mt-4 flex gap-3">
|
||
{!validationResult && (
|
||
<button
|
||
onClick={handleValidate}
|
||
disabled={validating}
|
||
className="flex-1 px-4 py-2 border border-[var(--color-primary)] text-[var(--color-primary)] rounded-lg hover:bg-[var(--color-primary)]/5 transition-colors inline-flex items-center justify-center gap-2 disabled:opacity-50"
|
||
>
|
||
{validating ? (
|
||
<>
|
||
<Loader2 className="w-4 h-4 animate-spin" />
|
||
{t('salesEntry.fileUpload.validating')}
|
||
</>
|
||
) : (
|
||
<>
|
||
<CheckCircle2 className="w-4 h-4" />
|
||
{t('salesEntry.fileUpload.validateButton')}
|
||
</>
|
||
)}
|
||
</button>
|
||
)}
|
||
<button
|
||
onClick={handleImport}
|
||
disabled={importing || !validationResult}
|
||
className="flex-1 px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors inline-flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
|
||
>
|
||
{importing ? (
|
||
<>
|
||
<Loader2 className="w-4 h-4 animate-spin" />
|
||
{t('salesEntry.fileUpload.importing')}
|
||
</>
|
||
) : (
|
||
<>
|
||
<Upload className="w-4 h-4" />
|
||
{t('salesEntry.fileUpload.importButton')}
|
||
</>
|
||
)}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
<div className="text-center text-sm text-[var(--text-tertiary)]">
|
||
<p>{t('salesEntry.fileUpload.instructions.title')}</p>
|
||
<p className="font-mono text-xs mt-1">
|
||
{t('salesEntry.fileUpload.instructions.columns')}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
// ========================================
|
||
// STEP 3: Review & Confirm
|
||
// ========================================
|
||
|
||
const ReviewStep: React.FC<WizardStepProps> = ({ dataRef }) => {
|
||
const data = dataRef?.current || {};
|
||
const { t } = useTranslation('wizards');
|
||
|
||
const isManual = data.entryMethod === 'manual';
|
||
const isUpload = data.entryMethod === 'upload';
|
||
|
||
return (
|
||
<div className="space-y-6">
|
||
<div className="text-center pb-4 border-b border-[var(--border-primary)]">
|
||
<div className="flex items-center justify-center mb-3">
|
||
<div className="p-3 bg-green-100 rounded-full">
|
||
<CheckCircle2 className="w-8 h-8 text-green-600" />
|
||
</div>
|
||
</div>
|
||
<h3 className="text-lg font-semibold text-[var(--text-primary)] mb-2">
|
||
{t('salesEntry.review.title')}
|
||
</h3>
|
||
<p className="text-sm text-[var(--text-secondary)]">
|
||
{t('salesEntry.review.subtitle')}
|
||
</p>
|
||
</div>
|
||
|
||
{isManual && data.salesItems && (
|
||
<div className="space-y-4">
|
||
{/* Summary */}
|
||
<div className="p-4 bg-[var(--bg-secondary)]/50 rounded-lg">
|
||
<div className="grid grid-cols-2 gap-3 text-sm">
|
||
<div>
|
||
<span className="text-[var(--text-secondary)]">{t('salesEntry.review.fields.date')}</span>
|
||
<p className="font-semibold text-[var(--text-primary)]">{data.saleDate}</p>
|
||
</div>
|
||
<div>
|
||
<span className="text-[var(--text-secondary)]">{t('salesEntry.review.fields.paymentMethod')}</span>
|
||
<p className="font-semibold text-[var(--text-primary)] capitalize">
|
||
{data.paymentMethod}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Items */}
|
||
<div>
|
||
<h4 className="text-sm font-semibold text-[var(--text-secondary)] mb-2">
|
||
{t('salesEntry.review.fields.products')} ({(data.salesItems || []).length})
|
||
</h4>
|
||
<div className="space-y-2">
|
||
{(data.salesItems || []).map((item: any) => (
|
||
<div
|
||
key={item.id}
|
||
className="p-3 border border-[var(--border-secondary)] rounded-lg bg-[var(--bg-primary)] flex justify-between items-center"
|
||
>
|
||
<div className="flex-1">
|
||
<p className="font-medium text-[var(--text-primary)]">{item.product}</p>
|
||
<p className="text-sm text-[var(--text-secondary)]">
|
||
{item.quantity} × €{item.unitPrice.toFixed(2)}
|
||
</p>
|
||
</div>
|
||
<div className="text-right">
|
||
<p className="font-semibold text-[var(--text-primary)]">
|
||
€{item.subtotal.toFixed(2)}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Total */}
|
||
<div className="p-4 bg-gradient-to-r from-[var(--color-primary)]/5 to-[var(--color-primary)]/10 rounded-lg border-2 border-[var(--color-primary)]/20">
|
||
<div className="flex justify-between items-center">
|
||
<span className="text-lg font-semibold text-[var(--text-primary)]">{t('salesEntry.review.fields.total')}</span>
|
||
<span className="text-2xl font-bold text-[var(--color-primary)]">
|
||
€{data.totalAmount?.toFixed(2)}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Notes */}
|
||
{data.notes && (
|
||
<div className="p-3 bg-[var(--bg-secondary)]/30 rounded-lg">
|
||
<p className="text-sm text-[var(--text-secondary)] mb-1">{t('salesEntry.review.fields.notes')}</p>
|
||
<p className="text-sm text-[var(--text-primary)]">{data.notes}</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{isUpload && data.importResult && (
|
||
<div className="space-y-4">
|
||
<div className="p-4 bg-green-50 border border-green-200 rounded-lg">
|
||
<p className="text-green-800 font-semibold mb-2">
|
||
{t('salesEntry.review.imported.title')}
|
||
</p>
|
||
<div className="text-sm text-green-700 space-y-1">
|
||
<p>{t('salesEntry.review.imported.recordsImported')} {data.importResult.successful_imports || 0}</p>
|
||
<p>{t('salesEntry.review.imported.recordsFailed')} {data.importResult.failed_imports || 0}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
// ========================================
|
||
// Export Wizard Steps
|
||
// ========================================
|
||
|
||
export const SalesEntryWizardSteps = (
|
||
dataRef: React.MutableRefObject<Record<string, any>>,
|
||
setData: (data: Record<string, any>) => void
|
||
): WizardStep[] => {
|
||
const entryMethod = dataRef.current.entryMethod;
|
||
|
||
// New architecture: return direct component references instead of arrow functions
|
||
// dataRef and onDataChange are now passed through WizardModal props
|
||
const steps: WizardStep[] = [
|
||
{
|
||
id: 'entry-method',
|
||
title: 'salesEntry.steps.entryMethod',
|
||
description: 'salesEntry.steps.entryMethodDescription',
|
||
component: EntryMethodStep,
|
||
},
|
||
];
|
||
|
||
if (entryMethod === 'manual') {
|
||
steps.push({
|
||
id: 'manual-entry',
|
||
title: 'salesEntry.steps.manualEntry',
|
||
description: 'salesEntry.steps.manualEntryDescription',
|
||
component: ManualEntryStep,
|
||
validate: () => {
|
||
const data = dataRef.current;
|
||
return (data.salesItems || []).length > 0;
|
||
},
|
||
});
|
||
} else if (entryMethod === 'upload') {
|
||
steps.push({
|
||
id: 'file-upload',
|
||
title: 'salesEntry.steps.fileUpload',
|
||
description: 'salesEntry.steps.fileUploadDescription',
|
||
component: FileUploadStep,
|
||
});
|
||
}
|
||
|
||
steps.push({
|
||
id: 'review',
|
||
title: 'salesEntry.steps.review',
|
||
description: 'salesEntry.steps.reviewDescription',
|
||
component: ReviewStep,
|
||
validate: async () => {
|
||
const { useTenant } = await import('../../../../stores/tenant.store');
|
||
const { salesService } = await import('../../../../api/services/sales');
|
||
const { showToast } = await import('../../../../utils/toast');
|
||
|
||
const data = dataRef.current;
|
||
const { currentTenant } = useTenant.getState();
|
||
|
||
if (!currentTenant?.id) {
|
||
const { showToast } = await import('../../../../utils/toast');
|
||
showToast.error('No se pudo obtener información del tenant');
|
||
return false;
|
||
}
|
||
|
||
try {
|
||
if (data.entryMethod === 'manual' && data.salesItems) {
|
||
// Create individual sales records for each item
|
||
for (const item of data.salesItems) {
|
||
const salesData = {
|
||
inventory_product_id: item.productId || null,
|
||
product_name: item.product,
|
||
product_category: 'general',
|
||
quantity_sold: item.quantity,
|
||
unit_price: item.unitPrice,
|
||
total_amount: item.subtotal,
|
||
sale_date: data.saleDate,
|
||
sales_channel: 'retail',
|
||
source: 'manual',
|
||
payment_method: data.paymentMethod,
|
||
notes: data.notes,
|
||
};
|
||
|
||
await salesService.createSalesRecord(currentTenant.id, salesData);
|
||
}
|
||
}
|
||
|
||
const { showToast } = await import('../../../../utils/toast');
|
||
showToast.success('Registro de ventas guardado exitosamente');
|
||
return true;
|
||
} catch (err: any) {
|
||
console.error('Error saving sales data:', err);
|
||
const { showToast } = await import('../../../../utils/toast');
|
||
const errorMessage = err.response?.data?.detail || 'Error al guardar los datos de ventas';
|
||
showToast.error(errorMessage);
|
||
return false;
|
||
}
|
||
},
|
||
});
|
||
|
||
return steps;
|
||
};
|