Update src/App.js

src/App.js

@@ -47,49 +47,49 @@ const useStore = () => {
 
 const mockExtractTextFromImage = async (file) => {
   await new Promise(resolve => setTimeout(resolve, 2000));
-  return `SUPERMARKET MERCADONA
-Address: Calle Mayor 123, Madrid
+  return `SUPERMARKET WALMART
+Address: 123 Main Street, New York
 Date: ${new Date().toLocaleDateString()}
 ----------------------------------------
-Whole Milk 1L          2.50€
-Whole Wheat Bread 500g 1.80€
-Tomatoes 1kg           3.20€
-Chicken Fillets 500g   4.50€
-Olive Oil 500ml        5.80€
-Dozen Eggs             2.90€
+Whole Milk 1L          $2.50
+Whole Wheat Bread 500g $1.80
+Tomatoes 1kg           $3.20
+Chicken Fillets 500g   $4.50
+Olive Oil 500ml        $5.80
+Dozen Eggs             $2.90
 ----------------------------------------
-TOTAL:                20.70€`;
+TOTAL:                $20.70`;
 };
 
 const mockProcessReceiptText = async (text) => {
   await new Promise(resolve => setTimeout(resolve, 1500));
   const lines = text.split('\n');
   const products = [];
-  let supermercado = '';
-  let direccion = '';
-  let fecha = '';
+  let store = '';
+  let address = '';
+  let date = '';
   
   lines.forEach(line => {
-    if (line.includes('SUPERMARKET') || line.includes('MERCADONA') || line.includes('CARREFOUR')) {
-      supermercado = line.replace('SUPERMARKET ', '').trim();
+    if (line.includes('SUPERMARKET') || line.includes('WALMART') || line.includes('TARGET')) {
+      store = line.replace('SUPERMARKET ', '').trim();
     }
     if (line.includes('Address:')) {
-      direccion = line.replace('Address:', '').trim();
+      address = line.replace('Address:', '').trim();
     }
     if (line.includes('Date:')) {
-      fecha = line.replace('Date:', '').trim();
+      date = line.replace('Date:', '').trim();
     }
 
-    const priceMatch = line.match(/(.+?)\s+(\d+[,.]?\d*€)$/);
+    const priceMatch = line.match(/(.+?)\s+(\$\d+[,.]?\d*)$/);
     if (priceMatch && !line.includes('TOTAL') && !line.includes('---')) {
-      const nombre = priceMatch[1].trim();
-      const precio = parseFloat(priceMatch[2].replace('€', '').replace(',', '.'));
-      if (nombre && precio > 0) {
+      const name = priceMatch[1].trim();
+      const price = parseFloat(priceMatch[2].replace('$', '').replace(',', '.'));
+      if (name && price > 0) {
         products.push({
-          nombre,
-          precio,
-          supermercado: { nombre: supermercado, direccion },
-          fecha
+          name,
+          price,
+          store: { name: store, address },
+          date
         });
       }
     }
@@ -139,36 +139,36 @@ const Sidebar = ({ activeTab, setActiveTab }) => {
 const HomeTab = () => {
   const { products } = useStore();
   
-  const totalGastado = products.reduce((sum, p) => sum + p.precio, 0);
+  const totalSpent = products.reduce((sum, p) => sum + p.price, 0);
   
-  const productsBySupermercado = products.reduce((acc, p) => {
-    const key = p.supermercado.nombre;
+  const productsByStore = products.reduce((acc, p) => {
+    const key = p.store.name;
     if (!acc[key]) acc[key] = [];
     acc[key].push(p);
     return acc;
   }, {});
 
-  const variacionPrecios = products.reduce((acc, p) => {
-    if (!acc[p.nombre]) acc[p.nombre] = [];
-    acc[p.nombre].push(p);
+  const priceVariations = products.reduce((acc, p) => {
+    if (!acc[p.name]) acc[p.name] = [];
+    acc[p.name].push(p);
     return acc;
   }, {});
 
-  const productosConVariacion = Object.entries(variacionPrecios)
+  const productsWithVariation = Object.entries(priceVariations)
     .filter(([_, prods]) => prods.length > 1)
-    .map(([nombre, prods]) => ({
-      nombre,
-      minPrecio: Math.min(...prods.map(p => p.precio)),
-      maxPrecio: Math.max(...prods.map(p => p.precio)),
-      diferencia: Math.max(...prods.map(p => p.precio)) - Math.min(...prods.map(p => p.precio))
+    .map(([name, prods]) => ({
+      name,
+      minPrice: Math.min(...prods.map(p => p.price)),
+      maxPrice: Math.max(...prods.map(p => p.price)),
+      difference: Math.max(...prods.map(p => p.price)) - Math.min(...prods.map(p => p.price))
     }))
-    .sort((a, b) => b.diferencia - a.diferencia)
+    .sort((a, b) => b.difference - a.difference)
     .slice(0, 5);
 
-  const gastoPorSupermercado = Object.entries(productsBySupermercado).map(([nombre, prods]) => ({
-    nombre,
-    gasto: prods.reduce((sum, p) => sum + p.precio, 0),
-    productos: prods.length
+  const spendingByStore = Object.entries(productsByStore).map(([name, prods]) => ({
+    name,
+    spending: prods.reduce((sum, p) => sum + p.price, 0),
+    products: prods.length
   }));
 
   const COLORS = ['#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6'];
@@ -179,77 +179,77 @@ const HomeTab = () => {
       
       <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
         <div className="bg-white rounded-lg shadow p-6">
-          <h3 className="text-lg font-semibold text-gray-700 mb-2">Total Gastado</h3>
-          <p className="text-3xl font-bold text-blue-600">{totalGastado.toFixed(2)}€</p>
+          <h3 className="text-lg font-semibold text-gray-700 mb-2">Total Spent</h3>
+          <p className="text-3xl font-bold text-blue-600">${totalSpent.toFixed(2)}</p>
         </div>
         
         <div className="bg-white rounded-lg shadow p-6">
-          <h3 className="text-lg font-semibold text-gray-700 mb-2">Productos Registrados</h3>
+          <h3 className="text-lg font-semibold text-gray-700 mb-2">Registered Products</h3>
           <p className="text-3xl font-bold text-green-600">{products.length}</p>
         </div>
         
         <div className="bg-white rounded-lg shadow p-6">
-          <h3 className="text-lg font-semibold text-gray-700 mb-2">Supermercados</h3>
-          <p className="text-3xl font-bold text-purple-600">{Object.keys(productsBySupermercado).length}</p>
+          <h3 className="text-lg font-semibold text-gray-700 mb-2">Stores</h3>
+          <p className="text-3xl font-bold text-purple-600">{Object.keys(productsByStore).length}</p>
         </div>
       </div>
 
-      {gastoPorSupermercado.length > 0 && (
+      {spendingByStore.length > 0 && (
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
           <div className="bg-white rounded-lg shadow p-6">
-            <h3 className="text-lg font-semibold text-gray-700 mb-4">Gasto por Supermercado</h3>
+            <h3 className="text-lg font-semibold text-gray-700 mb-4">Spending by Store</h3>
             <ResponsiveContainer width="100%" height={300}>
-              <BarChart data={gastoPorSupermercado}>
+              <BarChart data={spendingByStore}>
                 <CartesianGrid strokeDasharray="3 3" />
-                <XAxis dataKey="nombre" />
+                <XAxis dataKey="name" />
                 <YAxis />
-                <Tooltip formatter={(value) => [`${value.toFixed(2)}€`, 'Gasto']} />
-                <Bar dataKey="gasto" fill="#3b82f6" />
+                <Tooltip formatter={(value) => [`$${value.toFixed(2)}`, 'Spending']} />
+                <Bar dataKey="spending" fill="#3b82f6" />
               </BarChart>
             </ResponsiveContainer>
           </div>
 
           <div className="bg-white rounded-lg shadow p-6">
-            <h3 className="text-lg font-semibold text-gray-700 mb-4">Distribución de Gastos</h3>
+            <h3 className="text-lg font-semibold text-gray-700 mb-4">Spending Distribution</h3>
             <ResponsiveContainer width="100%" height={300}>
               <PieChart>
                 <Pie
-                  data={gastoPorSupermercado}
+                  data={spendingByStore}
                   cx="50%"
                   cy="50%"
                   labelLine={false}
-                  label={({ nombre, percent }) => `${nombre} ${(percent * 100).toFixed(0)}%`}
+                  label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`}
                   outerRadius={80}
                   fill="#8884d8"
-                  dataKey="gasto"
+                  dataKey="spending"
                 >
-                  {gastoPorSupermercado.map((entry, index) => (
+                  {spendingByStore.map((entry, index) => (
                     <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                   ))}
                 </Pie>
-                <Tooltip formatter={(value) => [`${value.toFixed(2)}€`, 'Gasto']} />
+                <Tooltip formatter={(value) => [`$${value.toFixed(2)}`, 'Spending']} />
               </PieChart>
             </ResponsiveContainer>
           </div>
         </div>
       )}
 
-      {productosConVariacion.length > 0 && (
+      {productsWithVariation.length > 0 && (
         <div className="bg-white rounded-lg shadow p-6">
           <h3 className="text-lg font-semibold text-gray-700 mb-4 flex items-center">
             <TrendingUp className="mr-2" />
-            Productos con Mayor Variación de Precio
+            Products with Highest Price Variation
           </h3>
           <div className="space-y-3">
-            {productosConVariacion.map((producto, index) => (
+            {productsWithVariation.map((product, index) => (
               <div key={index} className="flex justify-between items-center p-3 bg-gray-50 rounded">
-                <span className="font-medium">{producto.nombre}</span>
+                <span className="font-medium">{product.name}</span>
                 <div className="text-right">
                   <span className="text-sm text-gray-500">
-                    {producto.minPrecio.toFixed(2)}€ - {producto.maxPrecio.toFixed(2)}€
+                    ${product.minPrice.toFixed(2)} - ${product.maxPrice.toFixed(2)}
                   </span>
                   <span className="ml-2 text-red-600 font-semibold">
-                    +{producto.diferencia.toFixed(2)}€
+                    +${product.difference.toFixed(2)}
                   </span>
                 </div>
               </div>
@@ -293,7 +293,7 @@ const UploadTab = () => {
       setStep('review');
     } catch (error) {
       console.error('Error processing receipt:', error);
-      alert('Error procesando la factura');
+      alert('Error processing receipt');
     } finally {
       setLoading(false);
     }
@@ -305,12 +305,12 @@ const UploadTab = () => {
     setExtractedText('');
     setProcessedProducts([]);
     setStep('upload');
-    alert('Productos guardados exitosamente');
+    alert('Products saved successfully');
   };
 
   return (
     <div className="p-6">
-      <h2 className="text-3xl font-bold text-gray-800 mb-6">Subir Factura</h2>
+      <h2 className="text-3xl font-bold text-gray-800 mb-6">Upload Receipt</h2>
       
       <div className="bg-white rounded-lg shadow p-6">
         {step === 'upload' && (
@@ -319,7 +319,7 @@ const UploadTab = () => {
               <Upload className="mx-auto h-12 w-12 text-gray-400 mb-4" />
               <label className="cursor-pointer">
                 <span className="text-lg font-medium text-gray-700">
-                  Selecciona una imagen de factura
+                  Select a receipt image
                 </span>
                 <input
                   type="file"
@@ -330,7 +330,7 @@ const UploadTab = () => {
               </label>
               {file && (
                 <p className="mt-2 text-sm text-gray-500">
-                  Archivo seleccionado: {file.name}
+                  Selected file: {file.name}
                 </p>
               )}
             </div>
@@ -341,7 +341,7 @@ const UploadTab = () => {
                 disabled={loading}
                 className="w-full bg-blue-600 text-white py-3 px-4 rounded-lg hover:bg-blue-700 disabled:opacity-50"
               >
-                {loading ? 'Procesando...' : 'Procesar Factura'}
+                {loading ? 'Processing...' : 'Process Receipt'}
               </button>
             )}
           </div>
@@ -350,30 +350,30 @@ const UploadTab = () => {
         {step === 'extracting' && (
           <div className="text-center py-8">
             <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
-            <p className="text-lg font-medium text-gray-700">Extrayendo texto de la imagen...</p>
+            <p className="text-lg font-medium text-gray-700">Extracting text from image...</p>
           </div>
         )}
         
         {step === 'processing' && (
           <div className="text-center py-8">
             <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-green-600 mx-auto mb-4"></div>
-            <p className="text-lg font-medium text-gray-700">Procesando productos...</p>
+            <p className="text-lg font-medium text-gray-700">Processing products...</p>
           </div>
         )}
         
         {step === 'review' && (
           <div className="space-y-4">
-            <h3 className="text-xl font-semibold text-gray-800">Productos Detectados</h3>
+            <h3 className="text-xl font-semibold text-gray-800">Detected Products</h3>
             <div className="bg-gray-50 rounded-lg p-4 max-h-96 overflow-y-auto">
               {processedProducts.map((product, index) => (
                 <div key={index} className="flex justify-between items-center py-2 border-b border-gray-200 last:border-b-0">
                   <div>
-                    <span className="font-medium">{product.nombre}</span>
+                    <span className="font-medium">{product.name}</span>
                     <span className="text-sm text-gray-500 ml-2">
-                      ({product.supermercado.nombre})
+                      ({product.store.name})
                     </span>
                   </div>
-                  <span className="font-bold text-green-600">{product.precio.toFixed(2)}€</span>
+                  <span className="font-bold text-green-600">${product.price.toFixed(2)}</span>
                 </div>
               ))}
             </div>
@@ -383,13 +383,13 @@ const UploadTab = () => {
                 onClick={handleSaveProducts}
                 className="flex-1 bg-green-600 text-white py-3 px-4 rounded-lg hover:bg-green-700"
               >
-                Guardar Productos
+                Save Products
               </button>
               <button
                 onClick={() => setStep('upload')}
                 className="flex-1 bg-gray-600 text-white py-3 px-4 rounded-lg hover:bg-gray-700"
               >
-                Cancelar
+                Cancel
               </button>
             </div>
           </div>
@@ -421,14 +421,14 @@ const ListTab = () => {
   };
 
   const handleDelete = (id) => {
-    if (window.confirm('¿Estás seguro de que quieres eliminar este producto?')) {
+    if (window.confirm('Are you sure you want to delete this product?')) {
       deleteProduct(id);
     }
   };
 
   return (
     <div className="p-6">
-      <h2 className="text-3xl font-bold text-gray-800 mb-6">Listado de Productos</h2>
+      <h2 className="text-3xl font-bold text-gray-800 mb-6">Product List</h2>
       
       <div className="bg-white rounded-lg shadow overflow-hidden">
         <div className="overflow-x-auto">
@@ -436,19 +436,19 @@ const ListTab = () => {
             <thead className="bg-gray-50">
               <tr>
                 <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                  Producto
+                  Product
                 </th>
                 <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                  Precio
+                  Price
                 </th>
                 <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                  Supermercado
+                  Store
                 </th>
                 <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                  Fecha
+                  Date
                 </th>
                 <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                  Acciones
+                  Actions
                 </th>
               </tr>
             </thead>
@@ -459,12 +459,12 @@ const ListTab = () => {
                     {editingId === product.id ? (
                       <input
                         type="text"
-                        value={editForm.nombre}
-                        onChange={(e) => setEditForm({...editForm, nombre: e.target.value})}
+                        value={editForm.name}
+                        onChange={(e) => setEditForm({...editForm, name: e.target.value})}
                         className="w-full px-3 py-1 border border-gray-300 rounded"
                       />
                     ) : (
-                      <div className="text-sm font-medium text-gray-900">{product.nombre}</div>
+                      <div className="text-sm font-medium text-gray-900">{product.name}</div>
                     )}
                   </td>
                   <td className="px-6 py-4 whitespace-nowrap">
@@ -472,28 +472,28 @@ const ListTab = () => {
                       <input
                         type="number"
                         step="0.01"
-                        value={editForm.precio}
-                        onChange={(e) => setEditForm({...editForm, precio: parseFloat(e.target.value)})}
+                        value={editForm.price}
+                        onChange={(e) => setEditForm({...editForm, price: parseFloat(e.target.value)})}
                         className="w-full px-3 py-1 border border-gray-300 rounded"
                       />
                     ) : (
-                      <div className="text-sm text-gray-900">{product.precio.toFixed(2)}€</div>
+                      <div className="text-sm text-gray-900">${product.price.toFixed(2)}</div>
                     )}
                   </td>
                   <td className="px-6 py-4 whitespace-nowrap">
-                    <div className="text-sm text-gray-900">{product.supermercado.nombre}</div>
-                    <div className="text-sm text-gray-500">{product.supermercado.direccion}</div>
+                    <div className="text-sm text-gray-900">{product.store.name}</div>
+                    <div className="text-sm text-gray-500">{product.store.address}</div>
                   </td>
                   <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                     {editingId === product.id ? (
                       <input
                         type="date"
-                        value={editForm.fecha}
-                        onChange={(e) => setEditForm({...editForm, fecha: e.target.value})}
+                        value={editForm.date}
+                        onChange={(e) => setEditForm({...editForm, date: e.target.value})}
                         className="w-full px-3 py-1 border border-gray-300 rounded"
                       />
                     ) : (
-                      product.fecha
+                      product.date
                     )}
                   </td>
                   <td className="px-6 py-4 whitespace-nowrap text-sm font-medium space-x-2">
@@ -536,7 +536,7 @@ const ListTab = () => {
           
           {products.length === 0 && (
             <div className="text-center py-8">
-              <p className="text-gray-500">No hay productos registrados</p>
+              <p className="text-gray-500">No products registered</p>
             </div>
           )}
         </div>