From f0a48f5e8b9a6870cf640aa828aca3c9cdc5c0d7 Mon Sep 17 00:00:00 2001
From: yoelmarain <jmarain62@gmail.com>
Date: Sun, 6 Oct 2024 22:43:28 -0300
Subject: [PATCH] Refactor styles from EstadoCuentaAlumno.ts

---
 .../EstadoCuenta/EstadoCuenta.tsx             | 135 +++++++-----------
 .../InformarPago/InformarPago.tsx             |  23 ++-
 .../Pages-Alumnos/InformarPago/TablaPagos.tsx |   4 +-
 3 files changed, 61 insertions(+), 101 deletions(-)

diff --git a/FrontAdmin/src/components/Pages-Alumnos/EstadoCuenta/EstadoCuenta.tsx b/FrontAdmin/src/components/Pages-Alumnos/EstadoCuenta/EstadoCuenta.tsx
index 08c36b6..abce076 100644
--- a/FrontAdmin/src/components/Pages-Alumnos/EstadoCuenta/EstadoCuenta.tsx
+++ b/FrontAdmin/src/components/Pages-Alumnos/EstadoCuenta/EstadoCuenta.tsx
@@ -232,81 +232,50 @@ function InformarPago() {
   
     return (
             
-    <Flex mt="20px">
+    <Flex mt="20px" flexDirection={"column"} justifyContent={"center"}>
 
-      <Box borderRight="1px solid #cbd5e0" w="20%" minH="80vh" p="20px">
-        <Text color="gray" mt="30px">
-          Apellido y nombre
-        </Text>
-        <Text
-          size="sm"
-          pl="8px"
-          fontWeight="Bold"
-        >
-          {alumnoInfo.full_name}
-        </Text>
-        <Text color="gray" mt="10px">
-          Número DNI:
-        </Text>
-        <Text size="sm" pl="8px" fontWeight="semibold">
-          {alumnoInfo.dni}
-        </Text>
-        <Text color="gray" mt="10px">
-          Legajo:
-        </Text>
-        <Text size="sm" pl="8px" fontWeight="semibold">
-        {alumnoInfo.legajo}
-        </Text>
-        <Text color="gray" mt="10px">
-          Email:
-        </Text>
-        <Text size="sm" pl="8px" fontWeight="semibold">
-        {alumnoInfo.email}  
-        </Text>
-        <Text color="gray" mt="10px">
-          Celular
-        </Text>
-        <Text size="sm" pl="8px" fontWeight="semibold" mb="20px">
-        {alumnoInfo.telefono}
-        </Text>
-
-        <hr></hr>
-
-        <Text color="gray" mt="20px">
-          Último Compromiso de Pago:
-        </Text>
-        <Text size="sm" pl="8px" fontWeight="semibold" mb="20px">
-          {compromisoFirmado && compromisoFirmado.results[0]?.firmo_ultimo_compromiso ? 'Firmado' : 'Pendiente de firma'}
-        </Text>
-        <Text color="gray" mt="10px">
-          Estado:
-        </Text>
-        <Text size="sm" pl="8px" fontWeight="semibold" mb="20px">
-         {alumno?.estado_financiero}
-        </Text>
-        <Text color="gray" mt="20px">
-          Ultimo Periodo Cursado
-        </Text>
-        <Text size="sm" pl="8px" fontWeight="semibold" mb="20px">
-        {alumnoInfo.ultimo_cursado}
-        </Text>
+      <Box w={"100%"} mb={3}>
+        <Tag p="10px" w={"100%"} fontSize={18} fontWeight={"semibold"} textAlign={"center"} justifyContent={"center"}>
+          Estado de cuenta al {fechaDeHoy} 
+        </Tag>
       </Box>
-      
-      <Tabs ml="30px">
-              <TabList>
-                <Tab>Estado de cuenta</Tab>
-              </TabList>
 
-              <TabPanels>
-                <TabPanel minW="50vw">
-                      <Tag m="20px" p="10px">
-                    Estado de cuenta al {fechaDeHoy} 
-                  </Tag>
+      <Box  w="100%" mb={7} display={"flex"} gap={2} flexDirection={"row"} alignItems={"center"} justifyContent={"center"}>
+        <Tag w={"100%"} p="10px" fontSize={16}>
+          <Text color="gray">
+            Último Compromiso de Pago:
+          </Text>
+          <Text size="sm" pl="8px" fontWeight="semibold">
+            {compromisoFirmado && compromisoFirmado.results[0]?.firmo_ultimo_compromiso ? 'Firmado' : 'Pendiente de firma'}
+          </Text>
+        </Tag>
+        <Tag w={"100%"} p="10px" fontSize={16} bg={alumno?.estado_financiero === 'Habilitado' ? "#C0EBA6" : "#FF8A8A"} >
+          <Text color="gray">
+            Estado:
+          </Text>
+          <Text size="sm" pl="8px" fontWeight="semibold">
+          {alumno?.estado_financiero}
+          </Text>
+        </Tag>
+        <Tag w={"100%"} p="10px" fontSize={16}>
+          <Text color="gray">
+            Ultimo Periodo Cursado
+          </Text>
+          <Text size="sm" pl="8px" fontWeight="semibold">
+          {alumnoInfo.ultimo_cursado}
+          </Text>
+        </Tag>
+      </Box>
+      <Box  w={"100%"} display={"flex"} justifyContent={"center"}  >
                   {cuotas.length > 0 ? (
-                    <Table variant="simple" width="100%">
+                    <Table variant="simple" width="90%" borderColor={"gray.200"}
+                    borderStyle={"solid"}
+                    borderWidth={1}
+                    p={5}
+                    >
                       <Thead>
                         <Tr mt={6}>
-                          <Th textAlign="center" p={1}>
+                          <Th textAlign="center" >
                             Numero
                           </Th>
                           <Th textAlign="center">Fecha Primer Vto.</Th>
@@ -314,6 +283,7 @@ function InformarPago() {
                           <Th textAlign="center">Valor Pagado</Th>
                           <Th textAlign="center">Valor Informado</Th>
                           <Th textAlign="center">Valor Adeudado</Th>
+                          <Th textAlign="center">Detalle</Th>
                         </Tr>
                       </Thead>
                       <Tbody>
@@ -330,7 +300,6 @@ function InformarPago() {
                                 <Button bg='transparent' _hover='transparent' m="0px" p="0px" onClick={() => handleDetailPay(cuota.id_cuota)}><IoEyeOutline size="22px"> </IoEyeOutline> </Button> 
                               : 
                               <Button bg='transparent' _hover='transparent' disabled cursor="not-allowed" pointerEvents="none"> <IoEyeOutline color='gray' size="22px"> </IoEyeOutline> </Button>
-                              
                               }
                               </Td>
                           </Tr>
@@ -340,21 +309,20 @@ function InformarPago() {
                   ) : (
                     <Text  textAlign="center" padding="20px">No existen cuotas para el alumno.</Text>
                   )}
-                </TabPanel>
-              
-              </TabPanels>
+      </Box>
               {detail != null ? 
-              <Box minH="80vh" p="20px">
-                <Table variant="simple" width="100%"  border="1px solid #cbd5e0">
+              <Box display={"flex"} justifyContent={"center"} flex={1} w={"100%"}>
+              <Box flexDirection={"column"} p={5}>
+                <Text mb={2} fontSize={18}>Detalle cuota</Text>
+                <Table variant="simple" width="100%" border="1px solid #cbd5e0" p={5}>
                       <Thead >
-                        <Text p="20px">Detalle pago</Text>
                         <Tr mt={6}>
-                          <Th textAlign="center" p={1}>Cuota</Th>
-                          <Th textAlign="center" p={1}>Valor Original Cuota</Th>
-                          <Th textAlign="center" p={1}>Mora</Th>
-                          <Th textAlign="center" p={1}>Cuota con Mora</Th>
-                          <Th textAlign="center" p={1}>Fecha de Informe</Th>
-                          <Th textAlign="center" p={1}>Valor Pagado</Th>
+                          <Th textAlign="center" >Cuota</Th>
+                          <Th textAlign="center" >Valor Original Cuota</Th>
+                          <Th textAlign="center" >Mora</Th>
+                          <Th textAlign="center" >Cuota con Mora</Th>
+                          <Th textAlign="center" >Fecha de Informe</Th>
+                          <Th textAlign="center" >Valor Pagado</Th>
                         </Tr>
                       </Thead>
                       <Tbody>
@@ -384,11 +352,10 @@ function InformarPago() {
                     </Tbody>
                 </Table>
               </Box> 
+              </Box>
               : 
               <Box></Box>
               }
-              
-      </Tabs>
                 
     </Flex>
     );
diff --git a/FrontAdmin/src/components/Pages-Alumnos/InformarPago/InformarPago.tsx b/FrontAdmin/src/components/Pages-Alumnos/InformarPago/InformarPago.tsx
index 4271278..77d7071 100644
--- a/FrontAdmin/src/components/Pages-Alumnos/InformarPago/InformarPago.tsx
+++ b/FrontAdmin/src/components/Pages-Alumnos/InformarPago/InformarPago.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import TablaCuotas from "./TablaPagos";
-import { Flex, Button, Text, Stack, Card, CardBody } from "@chakra-ui/react";
+import { Flex, Button, Text, Stack, Card, CardBody, Box } from "@chakra-ui/react";
 import { useDisclosure } from "@chakra-ui/react";
 import {useState, useEffect} from 'react';
 import {AttachmentIcon} from '@chakra-ui/icons';
@@ -8,7 +8,7 @@ import DrawerInformar from "./DrawerPago";
 import {obtenerFechaDeHoy} from '../../../utils/general';
 
 interface Cuota {
-    id: number;
+    id_cuota: number;
     numero: string;
     monto1erVencimiento: number;
     monto2doVencimiento: number;
@@ -43,25 +43,18 @@ function InformarPago() {
 
 
         <Stack
+            display={["none", "none", "flex", "flex"]}
+            justifyContent="center"
             alignItems="center"
             direction="column"
             w="100%"
             bg="white"
+            mt={12}
         >
-             <Card>
-                    <CardBody bg={'secundaryBg'} mt={2}>
-                        <Flex
-                            alignItems="center"
-                            justifyContent="center"
-                            flexDirection="column"
-                            
-                        >
-                            <Text> Estado de cuenta al:</Text>
-                            <Text fontWeight="bold"> {fechaDeHoy} </Text>
-                        </Flex>
-                    </CardBody>
-                </Card>
+                <Box>
+                <Text textAlign={"left"} mb={2} w={"100%"} color="gray.700">Selecciona las cuotas que deseas informar</Text>
                 <TablaCuotas refresh={refresh} setCuotasSeleccionadas={setCuotasSeleccionadas} cuotasSeleccionadas={cuotasSeleccionadas}/>
+                </Box>
                 <Flex mt={2} w="100%" justifyContent="flex-end">
                 <Button color="white" 
                  rightIcon={<AttachmentIcon/>} 
diff --git a/FrontAdmin/src/components/Pages-Alumnos/InformarPago/TablaPagos.tsx b/FrontAdmin/src/components/Pages-Alumnos/InformarPago/TablaPagos.tsx
index 5dddc04..a1d68c5 100644
--- a/FrontAdmin/src/components/Pages-Alumnos/InformarPago/TablaPagos.tsx
+++ b/FrontAdmin/src/components/Pages-Alumnos/InformarPago/TablaPagos.tsx
@@ -5,7 +5,7 @@ import { formatoFechaISOaDDMMAAAA } from '../../../utils/general';
 import { motion } from 'framer-motion';
 
 interface Cuota {
-  id: number;
+  id_cuota: number;
   numero: string;
   monto1erVencimiento: number;
   monto2doVencimiento: number;
@@ -86,7 +86,7 @@ function TablaCuotas({ refresh, setCuotasSeleccionadas, cuotasSeleccionadas }: T
                 p={3}
             >
             {loading ? (
-                    <Skeleton height="400px" w="750px" />
+                    <Skeleton height="400px" w="900px" />
                 ) : (
              cuotas.length > 0 ? (
                 <Table variant="simple" width="100%">