Integración con Firebase actualizada

CoffeeUrbanTech/.gitignore

@@ -36,4 +36,6 @@ yarn-error.*
 # typescript
 *.tsbuildinfo
 
+# firebase info
+firebaseConfigWeb.js
 app-example

CoffeeUrbanTech/app/firebaseData.tsx

@@ -0,0 +1,47 @@
+// Modelos de Datos
+import { Timestamp } from 'firebase/firestore';
+
+export type Product = {
+  id: string;
+  name: string;
+  description: string;
+  price: number; // precio_venta
+  unitCost: number; // costo -> unitCost
+  stock: number;
+  category: string;
+  productType: string;
+  suggestedPrice?: number | null;
+  inMenu?: boolean;
+  createdAt?: Timestamp | null; // fecha_creacion
+  updatedAt?: Timestamp | null; // ultima_actualizacion
+};
+
+export type PurchasedItem = {
+  productId: string;
+  productName: string;
+  quantity: number;
+  unitCost: number; // costo_unitario
+};
+
+export type Purchase = {
+  id: string;
+  purchaseDate: Timestamp; // fecha_compra/date
+  supplierName: string;
+  items: PurchasedItem[];
+  total: number;
+};
+
+export type SoldItem = {
+  productId: string;
+  productName: string;
+  price: number;
+  quantity: number;
+  subtotal: number;
+};
+
+export type Sale = {
+  id: string;
+  date: Timestamp;
+  items: SoldItem[];
+  total: number;
+};

CoffeeUrbanTech/app/frontend/components/PurchaseForm.tsx

@@ -1,21 +1,25 @@
-import React, { useState, useEffect } from "react";
-import { View, Text, TextInput, Button, Pressable } from "react-native";
 import { Picker } from "@react-native-picker/picker";
+import React, { useEffect, useState } from "react";
+import { Pressable, Text, TextInput, View } from "react-native";
+
+// Importa el tipo Product desde tu archivo de modelos de datos
+import { Product } from '../../firebaseData';
 
 type Props = {
-  products: { id: number; name: string; stock: number }[];
+  // products ahora es un array de tu tipo Product de Firebase
+  products: Product[];
+  // onAddPurchase espera un productId y supplierName, alineado con ComprasScreen
   onAddPurchase: (purchase: {
-    supplier: string;
-    product: string;
+    productId: string;
     quantity: number;
-    unitCost: number;
-    total: number;
+    supplierName?: string;
+    unitCost?: number;
   }) => void;
 };
 
 export default function PurchaseForm({ products, onAddPurchase }: Props) {
-  const [supplier, setSupplier] = useState("");
-  const [product, setProduct] = useState("");
+  const [supplierName, setSupplierName] = useState("");
+  const [selectedProductId, setSelectedProductId] = useState("");
   const [quantity, setQuantity] = useState("");
   const [unitCost, setUnitCost] = useState("");
   const [total, setTotal] = useState<number | null>(null);
@@ -31,22 +35,22 @@ export default function PurchaseForm({ products, onAddPurchase }: Props) {
   }, [quantity, unitCost]);
 
   const handleSubmit = () => {
-    if (!product) return;
+    if (!selectedProductId) return;
     const q = parseInt(quantity);
     const u = parseFloat(unitCost);
-    if (q <= 0 || u <= 0) return;
+    if (isNaN(q) || isNaN(u) || q <= 0 || u <= 0) return;
 
     onAddPurchase({
-      supplier,
-      product,
+      supplierName,
+      productId: selectedProductId,
       quantity: q,
       unitCost: u,
-      total: q * u,
     });
 
     setQuantity("");
     setUnitCost("");
-    setProduct("");
+    setSelectedProductId("");
+    setSupplierName("");
     setTotal(null);
   };
 
@@ -57,11 +61,11 @@ export default function PurchaseForm({ products, onAddPurchase }: Props) {
       </Text>
 
       {/* Proveedor */}
-      <Text className="text-sm font-bold text-gray-700 mb-1">Compra</Text>
+      <Text className="text-sm font-bold text-gray-700 mb-1">Proveedor</Text>
       <View className="mb-4">
         <TextInput
-          value={supplier}
-          onChangeText={setSupplier}
+          value={supplierName}
+          onChangeText={setSupplierName}
           className="border border-gray-300 rounded-lg px-4 py-2 mb-4 text-sm"
           placeholder="Nombre del proveedor"
         />
@@ -71,14 +75,14 @@ export default function PurchaseForm({ products, onAddPurchase }: Props) {
       <Text className="text-sm font-bold text-gray-700 mb-1">Producto</Text>
       <View className="border border-gray-300 rounded-lg mb-4">
         <Picker
-          selectedValue={product}
-          onValueChange={(value) => setProduct(value)}
+          selectedValue={selectedProductId}
+          onValueChange={(itemValue) => setSelectedProductId(String(itemValue))}
         >
           <Picker.Item label="Seleccionar producto" value="" />
           {products.map((p) => (
             <Picker.Item
               label={`${p.name} (Stock: ${p.stock})`}
-              value={p.name}
+              value={p.id}
               key={p.id}
             />
           ))}
@@ -127,4 +131,4 @@ export default function PurchaseForm({ products, onAddPurchase }: Props) {
       </Pressable>
     </View>
   );
-}
+};

CoffeeUrbanTech/app/frontend/components/PurchaseHistory.tsx

@@ -1,17 +1,11 @@
 import React from "react";
-import { View, Text, Pressable } from "react-native";
+import { Pressable, Text, View } from "react-native";
+
+import { Purchase } from '../../firebaseData'; // Ajusta la ruta si es necesario
 
 type Props = {
-  purchases: {
-    id: number;
-    supplier: string;
-    product: string;
-    quantity: number;
-    unitCost: number;
-    total: number;
-    date: string;
-  }[];
-  onDelete: (id: number) => void;
+  purchases: Purchase[];
+  onDelete: (id: string) => void; // Un comentario para tus compañeros sobre el cambio de tipo de ID
 };
 
 export default function PurchaseHistory({ purchases, onDelete }: Props) {
@@ -32,6 +26,7 @@ export default function PurchaseHistory({ purchases, onDelete }: Props) {
         </View>
       ) : (
         <>
+          {/* Ordenar por fecha para mostrar las más recientes primero (aunque ya lo hacemos en ComprasScreen) */}
           {purchases.map((p) => (
             <View
               key={p.id}
@@ -40,25 +35,26 @@ export default function PurchaseHistory({ purchases, onDelete }: Props) {
               <View className="flex-row justify-between items-start">
                 <View className="flex-1">
                   <Text className="text-[#8B4513] font-bold mb-1">
-                    Compra #{p.id}
-                  </Text>
-                  <Text className="text-xs text-gray-700">
-                    Producto: {p.product}
-                  </Text>
-                  <Text className="text-xs text-gray-700">
-                    Proveedor: {p.supplier}
+                    Compra # {p.id.substring(0, 8)}... {/* Mostrar solo parte del ID para legibilidad */}
                   </Text>
                   <Text className="text-xs text-gray-700">
-                    Cantidad: {p.quantity}
+                    Proveedor: {p.supplierName}
                   </Text>
-                  <Text className="text-xs text-gray-700">
-                    Costo Unitario: ${p.unitCost.toFixed(2)}
+                  <Text className="text-xs text-gray-700 mb-2">
+                    Fecha: {p.purchaseDate.toDate().toLocaleString()} {/* Convierte Timestamp a Date */}
                   </Text>
-                  <Text className="text-xs text-gray-700">
-                    Fecha: {new Date(p.date).toLocaleString()}
+
+                  {/* Mostrar los items comprados dentro de esta compra */}
+                  <Text className="text-xs font-bold text-gray-700 mt-2">
+                    Productos:
                   </Text>
+                  {p.items.map((item, index) => (
+                    <Text key={index} className="text-xs text-gray-700 ml-2">
+                      • {item.productName} (x{item.quantity}) - ${item.unitCost.toFixed(2)} c/u
+                    </Text>
+                  ))}
                 </View>
-                <Text className="text-red-600 font-bold ml-4">
+                <Text className="text-red-600 font-bold ml-4 text-lg">
                   ${p.total.toFixed(2)}
                 </Text>
               </View>
@@ -75,4 +71,4 @@ export default function PurchaseHistory({ purchases, onDelete }: Props) {
       )}
     </View>
   );
-}
+}