bakery-admin/bakery-ia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add new frontend - fix 24

Browse Source
This commit is contained in:
Urtzi Alfaro
2025-07-23 17:51:39 +02:00
parent 20c31a07f7
commit e3a5256281
3 changed files with 161 additions and 313 deletions
Download Patch File Download Diff File Expand all files Collapse all files

253
frontend/src/api/services/dataService.ts
View File

@@ -19,28 +19,13 @@ export interface UploadResponse {
upload_id?: string;
}
// ✅ FIXED: Updated to match backend SalesValidationResult schema
export interface DataValidation {
is_valid: boolean; // Changed from 'valid' to 'is_valid'
total_records: number; // Changed from 'recordCount' to 'total_records'
valid_records: number; // Added missing field
invalid_records: number; // Added missing field
errors: Array<{ // Changed from string[] to object array
row?: number;
field?: string;
message: string;
value?: any;
}>;
warnings: Array<{ // Changed from string[] to object array
row?: number;
field?: string;
message: string;
value?: any;
}>;
summary: { // Added missing summary field
[key: string]: any;
};
duplicates?: number; // Made optional, may not always be present
valid: boolean; // ✅ Backend uses "valid", not "is_valid"
errors: string[]; // ✅ Backend returns string array, not objects
warnings: string[]; // ✅ Backend returns string array, not objects
suggestions: string[]; // ✅ Backend uses "suggestions", not "summary"
recordCount?: number; // ✅ Optional field for record count (if backend provides it)
duplicates?: number; // ✅ Optional field for duplicates
}
// Data types
@@ -104,11 +89,10 @@ export class DataService {
* ✅ COMPLETELY FIXED: Validate sales data before upload
* Backend expects JSON data with SalesDataImport structure, not a file upload
*/
async validateSalesData(file: File): Promise<DataValidation> {
async validateSalesData(file: File, tenantId?: string): Promise<DataValidation> {
try {
console.log('Reading file content...', file.name);
// ✅ FIXED: Proper file reading implementation
const fileContent = await this.readFileAsText(file);
if (!fileContent) {
@@ -128,219 +112,92 @@ export class DataService {
} else if (fileName.endsWith('.xlsx') || fileName.endsWith('.xls')) {
dataFormat = 'excel';
} else {
// Default to CSV if unable to determine
dataFormat = 'csv';
}
console.log('Detected file format:', dataFormat);
// ✅ CRITICAL FIX: Use correct endpoint based on API Gateway routing
// ✅ FIXED: Use proper tenant ID when available
const importData: SalesDataImportRequest = {
tenant_id: '', // Will be set by backend from auth context
tenant_id: tenantId || '00000000-0000-0000-0000-000000000000',
data: fileContent,
data_format: dataFormat,
validate_only: true
};
console.log('Sending validation request to:', '/api/v1/data/sales/import/validate');
console.log('Sending validation request with tenant_id:', importData.tenant_id);
// ✅ FIXED: Correct endpoint path - Gateway routes /api/v1/data/sales/* to data service /api/v1/sales/*
const response = await apiClient.post<ApiResponse<DataValidation>>(
'/api/v1/data/sales/import/validate', // Gateway will proxy this to data service
'/api/v1/data/sales/import/validate',
importData
);
console.log('Raw response from API:', response);
// ✅ CRITICAL FIX: Handle various response formats properly
// Check if response contains error information first
// ✅ FIXED: Handle response according to backend's actual format
if (response && typeof response === 'object') {
// Handle direct error responses (like 404)
// Handle validation errors from FastAPI
if ('detail' in response) {
console.error('API returned error:', response.detail);
if (response.detail === 'Not Found') {
// Return a proper validation failure for missing endpoint
return {
is_valid: false,
total_records: 0,
valid_records: 0,
invalid_records: 0,
errors: [{
message: 'El servicio de validación no está disponible temporalmente. Por favor contacta al soporte técnico.'
}],
warnings: [],
summary: {
validation_error: true,
error_type: 'service_unavailable',
message: 'Validation service endpoint not found'
if (Array.isArray(response.detail)) {
// Handle Pydantic validation errors
const errorMessages = response.detail.map(err => {
if (typeof err === 'object' && err.msg) {
return `${err.loc ? err.loc.join('.') + ': ' : ''}${err.msg}`;
}
};
} else {
// Handle other API errors
return err.toString();
});
return {
is_valid: false,
total_records: 0,
valid_records: 0,
invalid_records: 0,
errors: [{
message: `Error del servidor: ${response.detail}`
}],
valid: false,
errors: errorMessages,
warnings: [],
summary: {
validation_error: true,
error_type: 'api_error',
message: response.detail
}
suggestions: ['Revisa el formato de los datos enviados']
};
}
return {
valid: false,
errors: [typeof response.detail === 'string' ? response.detail : 'Error de validación'],
warnings: [],
suggestions: []
};
}
// Handle successful response (either wrapped or direct)
const validationResult = response.data || response;
// Verify that we have a proper validation response
if (validationResult && typeof validationResult === 'object' && 'is_valid' in validationResult) {
console.log('Valid validation response received:', validationResult);
return validationResult;
// Handle successful response - check for nested data
if ('data' in response) {
return response.data;
}
// If response seems to be the validation result directly
if ('valid' in response) {
return response as DataValidation;
}
}
// If we get here, the response format is unexpected
console.warn('Unexpected response format:', response);
return {
is_valid: false,
total_records: 0,
valid_records: 0,
invalid_records: 0,
errors: [{
message: 'Respuesta inválida del servidor. Formato de respuesta no reconocido.'
}],
warnings: [],
summary: {
validation_error: true,
error_type: 'invalid_response',
message: 'Unexpected response format from validation service'
}
};
throw new Error('Invalid response format from validation service');
} catch (error: any) {
console.error('Error in validateSalesData:', error);
console.error('Error validating file:', error);
// ✅ COMPREHENSIVE ERROR HANDLING
let errorMessage = 'Error al validar el archivo';
if (error.response?.status === 422) {
errorMessage = 'Formato de archivo inválido';
} else if (error.response?.status === 400) {
errorMessage = 'El archivo no se puede procesar';
} else if (error.response?.status === 500) {
errorMessage = 'Error del servidor. Inténtalo más tarde.';
} else if (error.message) {
errorMessage = error.message;
}
// Handle network/connection errors
if (error.code === 'NETWORK_ERROR' || error.message?.includes('fetch')) {
return {
is_valid: false,
total_records: 0,
valid_records: 0,
invalid_records: 0,
errors: [{
message: 'Error de conexión. Verifica tu conexión a internet y vuelve a intentar.'
}],
warnings: [],
summary: {
validation_error: true,
error_type: 'network_error',
message: 'Failed to connect to validation service'
}
};
}
// Handle HTTP status errors
if (error.response) {
const status = error.response.status;
console.log('HTTP error status:', status);
if (status === 404) {
return {
is_valid: false,
total_records: 0,
valid_records: 0,
invalid_records: 0,
errors: [{
message: 'El servicio de validación no está disponible. Contacta al administrador del sistema.'
}],
warnings: [],
summary: {
validation_error: true,
error_type: 'service_not_found',
message: 'Validation endpoint not found (404)'
}
};
}
if (status === 422) {
return {
is_valid: false,
total_records: 0,
valid_records: 0,
invalid_records: 0,
errors: [{
message: error.response?.data?.detail || 'Formato de datos inválido'
}],
warnings: [],
summary: {
validation_error: true,
error_type: 'validation_failed',
message: 'Data validation failed'
}
};
}
if (status === 400) {
return {
is_valid: false,
total_records: 0,
valid_records: 0,
invalid_records: 0,
errors: [{
message: error.response?.data?.detail || 'Solicitud inválida'
}],
warnings: [],
summary: {
validation_error: true,
error_type: 'bad_request',
message: 'Bad request to validation service'
}
};
}
if (status >= 500) {
return {
is_valid: false,
total_records: 0,
valid_records: 0,
invalid_records: 0,
errors: [{
message: 'Error interno del servidor. Inténtalo más tarde.'
}],
warnings: [],
summary: {
validation_error: true,
error_type: 'server_error',
message: 'Internal server error during validation'
}
};
}
}
// Handle any other unknown errors
// ✅ FIXED: Return format matching backend schema
return {
is_valid: false,
total_records: 0,
valid_records: 0,
invalid_records: 0,
errors: [{
message: error.message || 'Error desconocido durante la validación'
}],
valid: false,
errors: [errorMessage],
warnings: [],
summary: {
validation_error: true,
error_type: 'unknown_error',
message: error.message || 'Unknown validation error'
}
suggestions: ['Intenta con un archivo diferente o contacta soporte']
};
}
}

219
frontend/src/pages/onboarding.tsx
View File

@@ -322,151 +322,140 @@ const OnboardingPage = () => {
}
};
const handleFileUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
const file = event.target.files?.[0];
if (!file) return;
// ✅ FIXED: Update handleFileUpload to use backend's schema
const handleFileUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
const file = event.target.files?.[0];
if (!file) return;
setFormData(prev => ({ ...prev, salesFile: file }));
setUploadValidation(null);
setFormData(prev => ({ ...prev, salesFile: file }));
setUploadValidation(null);
try {
setLoading(true);
console.log('Validating file:', file.name);
// Auto-validate file on selection
try {
setLoading(true);
console.log('Validating file:', file.name);
// ✅ CRITICAL FIX: Add null check for validation response
const validation = await api.data.validateSalesData(file);
if (!validation) {
throw new Error('No validation response received from server');
}
console.log('Validation result:', validation); // Debug log
setUploadValidation(validation);
// ✅ FIXED: Use correct field name is_valid instead of valid
if (validation.is_valid) {
showNotification('success', 'Archivo válido',
`${validation.total_records} registros detectados, ${validation.valid_records} válidos.`);
} else if (validation.warnings && validation.warnings.length > 0 &&
validation.errors && validation.errors.length === 0) {
showNotification('warning', 'Archivo con advertencias',
'El archivo es válido pero tiene algunas advertencias.');
} else {
const errorCount = validation.errors ? validation.errors.length : 0;
showNotification('error', 'Archivo con errores',
`Se encontraron ${errorCount} errores en el archivo.`);
}
} catch (error: any) {
console.error('Error validating file:', error);
// Handle network or other errors
let errorMessage = 'Error al validar el archivo';
if (error.response?.status === 422) {
errorMessage = 'Formato de archivo inválido';
} else if (error.response?.status === 400) {
errorMessage = 'El archivo no se puede procesar';
} else if (error.response?.status === 500) {
errorMessage = 'Error del servidor. Inténtalo más tarde.';
} else if (error.message) {
errorMessage = error.message;
}
showNotification('error', 'Error de validación', errorMessage);
// ✅ FIXED: Set validation state with correct field names
setUploadValidation({
is_valid: false, // ✅ Use is_valid not valid
total_records: 0,
valid_records: 0,
invalid_records: 0,
errors: [{ message: errorMessage }], // ✅ Array of objects, not strings
warnings: [],
summary: { validation_failed: true }
});
} finally {
setLoading(false);
// Pass the current tenant ID to validation
const validation = await api.data.validateSalesData(file, currentTenantId);
if (!validation) {
throw new Error('No validation response received from server');
}
};
console.log('Validation result:', validation);
setUploadValidation(validation);
// ✅ FIXED: Use backend's "valid" field instead of "is_valid"
if (validation.valid) {
showNotification('success', 'Archivo válido',
`${validation.recordCount || 'Algunos'} registros detectados.`);
} else if (validation.warnings && validation.warnings.length > 0 &&
validation.errors && validation.errors.length === 0) {
showNotification('warning', 'Archivo con advertencias',
'El archivo es válido pero tiene algunas advertencias.');
} else {
const errorCount = validation.errors ? validation.errors.length : 0;
showNotification('error', 'Archivo con errores',
`Se encontraron ${errorCount} errores en el archivo.`);
}
} catch (error: any) {
console.error('Error validating file:', error);
let errorMessage = 'Error al validar el archivo';
if (error.response?.status === 422) {
errorMessage = 'Formato de archivo inválido';
} else if (error.response?.status === 400) {
errorMessage = 'El archivo no se puede procesar';
} else if (error.response?.status === 500) {
errorMessage = 'Error del servidor. Inténtalo más tarde.';
} else if (error.message) {
errorMessage = error.message;
}
showNotification('error', 'Error de validación', errorMessage);
// ✅ FIXED: Set validation state using backend's schema
setUploadValidation({
valid: false,
errors: [errorMessage],
warnings: [],
suggestions: ['Intenta con un archivo diferente']
});
} finally {
setLoading(false);
}
};
// Fixed validation display component
const renderValidationResult = () => {
{uploadValidation && (
if (!uploadValidation) return null;
return (
<div className={`border rounded-lg p-4 ${
uploadValidation.is_valid ? 'bg-green-50 border-green-200' : 'bg-red-50 border-red-200'
uploadValidation.valid ? 'bg-green-50 border-green-200' : 'bg-red-50 border-red-200'
}`}>
<div className="flex items-start">
{uploadValidation.is_valid ? (
{uploadValidation.valid ? (
<CheckIcon className="w-5 h-5 text-green-600 mt-0.5 mr-3" />
) : (
<XMarkIcon className="w-5 h-5 text-red-600 mt-0.5 mr-3" />
)}
<div className="flex-1">
<h4 className={`font-semibold ${
uploadValidation.is_valid ? 'text-green-800' : 'text-red-800'
uploadValidation.valid ? 'text-green-800' : 'text-red-800'
}`}>
{uploadValidation.is_valid ? 'Archivo válido' : 'Archivo con problemas'}
{uploadValidation.valid ? 'Archivo válido' : 'Archivo con problemas'}
</h4>
{/* Always safe record count display */}
{/* ✅ FIXED: Display record count using backend's field names */}
<p className={`text-sm mt-1 ${
uploadValidation.is_valid ? 'text-green-700' : 'text-red-700'
uploadValidation.valid ? 'text-green-700' : 'text-red-700'
}`}>
{uploadValidation.total_records || uploadValidation.recordCount || 0} registros procesados
{uploadValidation.recordCount || 0} registros encontrados
{uploadValidation.duplicates && uploadValidation.duplicates > 0 &&
`, ${uploadValidation.duplicates} duplicados`}
</p>
{/* Only show errors if they exist and are in array format */}
{!uploadValidation.is_valid && uploadValidation.errors && (
{/* ✅ FIXED: Handle errors as string array (backend's current format) */}
{!uploadValidation.valid && uploadValidation.errors && uploadValidation.errors.length > 0 && (
<div className="mt-2">
<p className="text-sm font-medium text-red-700 mb-1">
{Array.isArray(uploadValidation.errors) ? 'Errores encontrados:' : 'Error:'}
</p>
{Array.isArray(uploadValidation.errors) ? (
<ul className="text-sm text-red-700 space-y-1">
{uploadValidation.errors.map((error, idx) => (
<li key={idx}>
• {error?.message || error || 'Error no especificado'}
</li>
))}
</ul>
) : (
<p className="text-sm text-red-700">
{uploadValidation.errors.message || uploadValidation.errors || 'Error desconocido'}
</p>
)}
</div>
)}
{/* Show warnings if they exist */}
{uploadValidation.warnings && Array.isArray(uploadValidation.warnings) && uploadValidation.warnings.length > 0 && (
<div className="mt-2">
<p className="text-sm font-medium text-yellow-700 mb-1">Advertencias:</p>
<ul className="text-sm text-yellow-700 space-y-1">
{uploadValidation.warnings.map((warning, idx) => (
<li key={idx}>
• {warning?.message || warning || 'Advertencia no especificada'}
</li>
<p className="text-sm font-medium text-red-700 mb-1">Errores encontrados:</p>
<ul className="text-sm text-red-700 space-y-1">
{uploadValidation.errors.map((error, idx) => (
<li key={idx}>• {error}</li>
))}
</ul>
</div>
)}
{/* Show technical info for debugging */}
{uploadValidation.summary && uploadValidation.summary.error_type && (
<div className="mt-2 p-2 bg-gray-100 rounded">
<p className="text-xs text-gray-600">
<strong>Info técnica:</strong> {uploadValidation.summary.error_type}
</p>
{/* ✅ FIXED: Handle warnings as string array (backend's current format) */}
{uploadValidation.warnings && uploadValidation.warnings.length > 0 && (
<div className="mt-2">
<p className="text-sm font-medium text-yellow-700 mb-1">Advertencias:</p>
<ul className="text-sm text-yellow-700 space-y-1">
{uploadValidation.warnings.map((warning, idx) => (
<li key={idx}>• {warning}</li>
))}
</ul>
</div>
)}
{/* ✅ FIXED: Handle backend's "suggestions" field */}
{uploadValidation.suggestions && uploadValidation.suggestions.length > 0 && (
<div className="mt-2">
<p className="text-sm font-medium text-blue-700 mb-1">Sugerencias:</p>
<ul className="text-sm text-blue-700 space-y-1">
{uploadValidation.suggestions.map((suggestion, idx) => (
<li key={idx}>• {suggestion}</li>
))}
</ul>
</div>
)}
</div>
</div>
</div>
)}
};
);
};
const renderStepIndicator = () => (
<div className="mb-12">
@@ -814,8 +803,10 @@ const OnboardingPage = () => {
<div className="mt-2">
<p className="text-sm font-medium text-red-700 mb-1">Errores:</p>
<ul className="text-sm text-red-700 space-y-1">
{uploadValidation.errors.map((error, idx) => (
<li key={idx}>• {error}</li>
{validation.errors.map((error, idx) => (
<li key={idx}>
• {typeof error === 'string' ? error : (error?.message || 'Error no especificado')}
</li>
))}
</ul>
</div>