utimo FIX

FrontAdmin/src/components/Pages/Sysacad/ExcelSysacad/CargaExcel.tsx

@@ -1,14 +1,16 @@
 import { Stack, Text, Button } from '@chakra-ui/react';
 import ZonaCarga from './ZonaCarga';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import Resultado from './Resultado';
 import Cookies from 'js-cookie';
 
 function CargaExcel() {
     const [fileUploaded, setFileUploaded] = useState(false);
     const [reset, setReset] = useState(false);
     const [file, setFile] = useState<File | null>(null);  
-    const [data, setData] = useState<any[]>([]); 
+    const [fileAux, setFileAux] = useState<File | null>(null);
+    const [data, setData] = useState<string[]>([]); 
+    const [isLoading, setIsLoading] = useState(false);
 
     const handleFileUpload = (fileName: string) => {
         setFileUploaded(true);  
@@ -19,23 +21,21 @@ function CargaExcel() {
         formData.append('excel', file);
 
         try {
+            setIsLoading(true);
             const token = Cookies.get('tokennn');
             const response = await fetch(
                 `http://localhost:8000/api/excels/`,  
                 {
                     method: 'POST',
-
                     headers: {
                         Authorization: `Bearer ${token}`,  
-
                     },
                     body: formData,
                 }
             );
 
             if (response.ok) {
                 const result = await response.json();
-                console.log(result);
                 setData(result);  
                 setFileUploaded(true);  
             } else {
@@ -44,6 +44,8 @@ function CargaExcel() {
             }
         } catch (error: any) {
             console.error('Error al subir el archivo:', error);
+        }finally {
+            setIsLoading(false);
         }
     };
 
@@ -56,8 +58,11 @@ function CargaExcel() {
     const handleReset = () => {
         setFileUploaded(false);  
         setFile(null);  
+        setData([]);  
+        setFileAux(null);
     };
 
+
     return (
         <Stack direction="column" align="center">
             <Stack direction="column" spacing={4} align="center" bg="secundaryBg" padding={5} borderRadius={10} w={550}>
@@ -67,18 +72,21 @@ function CargaExcel() {
                     reset={reset}
                     cargar={fileUploaded}
                     setFile={setFile}  
+                    fileAux={fileAux}
+                    setFileAux={setFileAux}
                 />
                 <Stack direction="row" padding={2} gap={4}>
-                    <Button onClick={handleUploadClick} color="white" isDisabled={!fileUploaded} _hover={{ bg: "secundaryHover" }}>Cargar</Button>
+                    <Button onClick={handleUploadClick} color="white" isDisabled={!fileUploaded} _hover={{ bg: "secundaryHover" }}>
+                        {isLoading ? 'Procesando...' : 'Cargar'}
+
+                    </Button>
                     <Button onClick={handleReset} variant="light">Volver a Intentar</Button>
                 </Stack>
             </Stack>
-            {data.length > 0 && (
-                <Stack>
-                    ¿
-                    <Resultado data={data} />
-                </Stack>
-            )}
+
+            <Stack>
+                <Resultado data={data} />
+            </Stack>
         </Stack>
     );
 }

FrontAdmin/src/components/Pages/Sysacad/ExcelSysacad/Resultado.tsx

@@ -1,38 +1,25 @@
 import datos from '../../../../API/Sysacad.ts';
 import { useState, useEffect, JSXElementConstructor, Key, ReactElement, ReactNode, ReactPortal } from 'react';
-import {Stack, Flex, Text} from '@chakra-ui/react';
-interface DataItem {
-    "id": string;
-    "Apellido y Nombres": string | null;
-    "Celular": string | null;
-    "Tel. Resid"?: string | null;
-    "Teléfono": string | null;
+import { Stack, Flex, Text, Link } from '@chakra-ui/react';
+
+
+function Resultado({ data }: { data: any }) {
+
+  if (data.length === 0) {
+    console.log("No hay datos")
+    return null;
   }
-
-  //recibe los datos como parametros y los muestra en pantalla
-  function Resultado(data: any) {
-
-
-    useEffect(() => {
-        //mapear a array de objetos pq viene un diccionario
-      const dataArray = Object.entries(datos).map(([key, value]) => ({
-        id: key,
-        ...value
-      })) as DataItem[];
-      //setData(dataArray);
-    }, []);
-
-    return (
-        <Stack mt={7}>
-            <Text fontSize="xl" fontWeight="bold">Errores de formato encontrados. Por favor, revisar:</Text>
-            {data.map((item: { [x: string]: any; id: string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null | undefined; }, index: Key | null | undefined) => (
-                <Flex key={index} direction="column" p={3} borderRadius="8px" mb={2} bg="#F8C0BB" w={800}>
-                    <Text fontWeight={500}> Error en la linea {item.id}, en el/los campo/s: {item["Apellido y Nombres"] && "Apellido y Nombres"} {item["Celular"] && "Celular"} {item["Tel. Resid"] && "Tel. Resid"} {item["Teléfono"] && "Teléfono"} 
-                    </Text>
-                </Flex>
-            ))}
-        </Stack>
-    );
-  }
-
-  export default Resultado;
+
+  const { excel, duplicates, message, total } = data;
+
+  return (
+    <Stack mt={7}>
+      <Text fontSize="xl" fontWeight="bold">Datos cargados</Text>
+      <Text>Duplicados: {duplicates}</Text>
+      <Text>Mensaje: {message}</Text>
+      <Text>Total: {total}</Text>
+    </Stack>
+  );
+}
+
+export default Resultado;

FrontAdmin/src/components/Pages/Sysacad/ExcelSysacad/ZonaCarga.tsx

@@ -2,39 +2,47 @@ import { useDropzone, FileRejection } from 'react-dropzone';
 import { useEffect, useState } from 'react';
 import { Stack, Text, Box } from '@chakra-ui/react';
 
-const ZonaCarga = ({ onFileUpload, reset, cargar, setFile }: { onFileUpload: (fileName: string) => void, reset: boolean, cargar: boolean, setFile: (file: File) => void }) => {
-    const [fileAux, setFileAux] = useState<File | null>(null);
+interface ZonaCargaProps {
+    onFileUpload: (fileName: string) => void;
+    reset: boolean;
+    cargar: boolean;
+    setFile: (file: File) => void;
+    fileAux: File | null;
+    setFileAux: (file: File) => void;
+}
+
+const ZonaCarga = ({ onFileUpload, reset, cargar, setFile, fileAux, setFileAux }: ZonaCargaProps) => {
 
     useEffect(() => {
-        if ( fileAux) {
-            setFile(fileAux);  
+        if (fileAux) {
+            setFile(fileAux);
         }
-    }, [ fileAux]);
+    }, [fileAux]);
 
     const onDrop = (acceptedFiles: File[], rejectedFiles: FileRejection[]) => {
         if (acceptedFiles.length > 0) {
             setFileAux(acceptedFiles[0]);
-            onFileUpload(acceptedFiles[0].name);  
+            onFileUpload(acceptedFiles[0].name);
         }
     };
 
     const { getRootProps, getInputProps } = useDropzone({
         onDrop,
-        accept: { 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': ['.xlsx'] },  
+        accept: { 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': ['.xlsx'] },
     });
 
     return (
         <Stack direction="column">
             <Box {...getRootProps()} p={4} border="2px dashed" borderRadius="md" cursor="pointer">
                 <input {...getInputProps()} />
                 {fileAux ? (
-                    <Text>Archivo seleccionado: {fileAux.name}</Text>
+                    <Text>{fileAux.name}</Text>
                 ) : (
-                    <Text>Arrastra y suelta el archivo aquí o haz clic para seleccionar un archivo</Text>
+                    <Text>Arrastra y suelta un archivo aquí, o haz clic para seleccionar uno</Text>
                 )}
             </Box>
         </Stack>
     );
-}
+};
 
 export default ZonaCarga;