Skip to content

Commit

Permalink
fix: estado de cuenta y ficha alumno responsive
Browse files Browse the repository at this point in the history
  • Loading branch information
@facundomelgarejo
facundomelgarejo committed Dec 10, 2024
1 parent ad69c3f commit 70bf455
Show file tree
Hide file tree
Showing 3 changed files with 118 additions and 56 deletions.
6 changes: 5 additions & 1 deletion FrontAdmin/src/components/Header/HeaderContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
Text,
useDisclosure,
Avatar,
useBreakpointValue
} from '@chakra-ui/react';
import imgLogo from '../icons/Logos TUP_Mesa de trabajo 1.png';
import logoUser from '../icons/logo-user.png';
Expand All @@ -33,6 +34,9 @@ export function HeaderContent({ onOpen }: { onOpen: any }) {
return fullName.trim();
}

// Definir el ancho de la caja de SubMenuContent según el tamaño de la pantalla
const isMobile = useBreakpointValue({ base: true, xl: false });

// Perfil
const {
isOpen: isOpen1,
Expand Down Expand Up @@ -74,7 +78,7 @@ export function HeaderContent({ onOpen }: { onOpen: any }) {
color="white"
/>
<Flex direction={"row"} alignItems={"center"} gap={3}>
<Text fontFamily={"'Roboto',sans-serif"} fontWeight="600">{user}</Text>
<Text display={isMobile ? 'none' : ''} fontFamily={"'Roboto',sans-serif"} fontWeight="600">{user}</Text>
<MenuButton borderRadius={'full'}>
<Avatar
name={formatUserName(user || '')}
Expand Down
38 changes: 33 additions & 5 deletions FrontAdmin/src/components/Pages-Alumnos/EstadoCuenta/EstadoCuenta.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from "react";
import { Flex, Button, Text, Stack, Card, CardBody, Box,Tabs,TabList, TabPanels, TabPanel, Table, Tag,Thead,Tr, Th, Tbody, Tab,Td, Tooltip, Alert, AlertIcon } from "@chakra-ui/react";
import { useDisclosure } from "@chakra-ui/react";
import { useDisclosure, useBreakpointValue} from "@chakra-ui/react";
import {useState, useEffect} from 'react';
import {AttachmentIcon, ArrowLeftIcon, ArrowRightIcon, QuestionOutlineIcon} from '@chakra-ui/icons';
import { IoEyeOutline } from "react-icons/io5";
Expand Down Expand Up @@ -97,6 +97,9 @@ function InformarPago() {

const [cuotaCompleta, setCuotaCompleta] = useState()

// Definir el ancho de la caja de SubMenuContent según el tamaño de la pantalla
const isMobile = useBreakpointValue({ base: true, xl: false });

const handleNextPage = () => {
if (offset + limit < totalCuotas) {
setOffset1(offset + limit);
Expand Down Expand Up @@ -270,7 +273,7 @@ function InformarPago() {
</Tag>
</Box>

<Box w="100%" mb={7} display="flex" gap={2} flexDirection={{ base: "column", sm: "row" }} alignItems="center" justifyContent="center" flexWrap="wrap">
<Box w="100%" mb={7} display="flex" gap={2} flexDirection={{ base: "column", sm: "row" }} alignItems="center" justifyContent="center" flexWrap="wrap" paddingBottom={isMobile ? '20px' : ''} borderBottom={isMobile ? '2px solid gray' : ''}>
<Tag flex="1" p="10px" fontSize={16}>
<Flex alignItems="center" direction={{ base: "column", md: "row" }}>
<Text color="gray" textAlign="center">
Expand Down Expand Up @@ -312,6 +315,29 @@ function InformarPago() {
)}
</Box>

{ isMobile ? (//mobile
<Box>
{cuotas && cuotas.map((cuota, index) => (
<Box
key={index}
borderWidth="1px"
borderRadius="lg"
overflow="hidden"
p={4}
mb={4}
background={'blue.50'}
>
<Text textAlign={'center'} fontWeight={'600'}>Cuota Número: {cuota.numero}</Text>
<Text>Fecha Vto.:{formatoFechaISOaDDMMAAAA(cuota.fechaVencimiento)}</Text>
<Text>Monto Actual: {'$ ' + new Intl.NumberFormat('es-ES').format(cuota.montoActual)}</Text>
<Text>Monto Pagado: {'$ ' + new Intl.NumberFormat('es-ES').format(cuota.monto_pagado)}</Text>
<Text>Valor Informado: {'$ ' + new Intl.NumberFormat('es-ES').format( cuota.valorinformado)}</Text>
<Text>Valor Adeudado: {'$ ' + new Intl.NumberFormat('es-ES').format(cuota.montoActual - cuota.valorinformado )}</Text>
</Box>
))}
</Box>
)
: (
<Box w={"100%"} display={"flex"} justifyContent={"center"} >
{cuotas.length > 0 ? (
<Table variant="simple" width="90%" borderColor={"gray.200"}
Expand Down Expand Up @@ -378,13 +404,15 @@ function InformarPago() {
)}

</Box>
)}

{cuotas.length > 0 ?
<Box w="90%" mt="20px" ml="70px">
<Flex justifyContent="space-between" >
<Box w="90%" mt="20px" ml={isMobile? '' : "70px"}>
<Flex justifyContent="space-between">
<Button onClick={handlePreviousPage} isDisabled={offset === 0} _hover="none" color="white" leftIcon={<ArrowLeftIcon/>}>
Anterior
</Button>
<Text textAlign={"center"} mb={0}>Página {Math.ceil(offset / limit) + 1} de {Math.ceil(totalCuotas / limit)}</Text>
<Text m={isMobile? '2px' : ""} textAlign={"center"} mb={0}>Página {Math.ceil(offset / limit) + 1} de {Math.ceil(totalCuotas / limit)}</Text>
<Button onClick={handleNextPage} isDisabled={offset + limit >= totalCuotas} _hover="none" color="white" rightIcon={<ArrowRightIcon/>}>
Siguiente
</Button>
Expand Down
130 changes: 80 additions & 50 deletions FrontAdmin/src/components/Pages/Alumnos/SubPages/FichaAlumno.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,9 @@ import {
Tab,
TabPanels,
TabPanel,
Spinner
Spinner,
useBreakpointValue,
Center
} from '@chakra-ui/react';
import { createTheme, ThemeProvider } from '@mui/material';
import logoUser from '../../../icons/logo-user.png';
Expand Down Expand Up @@ -152,7 +154,9 @@ function FichaAlumno() {
const [pagos, setPagos] = useState<PagosResponse | null>(null);
const [detalleCompromiso, setDetalleCompromiso] = useState<CompromisoResponse >();
const [compromisoFirmado, setCompromiso] = useState<CompromisoResponse >(); // Defi

// Definir el ancho de la caja de SubMenuContent según el tamaño de la pantalla
const isMobile = useBreakpointValue({ base: true, xl: false });

interface Inhabilitacion {
fecha_desde: string;
fecha_hasta: string;
Expand Down Expand Up @@ -367,17 +371,18 @@ function FichaAlumno() {

return (

<Flex mt="20px" width={"100%"} >
<Flex mt="20px" width={"100%"} display={isMobile ? 'Box' : 'Flex'} >
<Button
position="absolute"
left="120"
left={isMobile ? '10px' : '120px'}
color="white"
size="sm"
onClick={handleBackClick}
>
<ArrowLeftIcon mr="10px" /> Volver{' '}
</Button>
<Box borderRight="1px solid #cbd5e0" w="25%" minH="80vh" p="20px">

<Box borderRight={isMobile ? '' : "1px solid #cbd5e0"} borderBottom={isMobile ? "1px solid #cbd5e0" : ''} w={isMobile ? '100%' : '25%'} minH={isMobile ? '' : "80vh"} p={isMobile ? '20px 0px 0px 0px' : '20px'} >
<Text color="gray" mt="30px">
Apellido y nombre
</Text>
Expand Down Expand Up @@ -496,62 +501,87 @@ function FichaAlumno() {

<TabPanels>
<TabPanel w={"100%"}>
<Flex justifyContent="center" w={"100%"} mt={1} gap={2} mb={2}>
<Flex justifyContent="center" w={"100%"} mt={1} gap={2} mb={2} display={isMobile ? 'Block' : 'Flex'}>
<Tag m="1px" p="10px" w={"100%"} fontWeight={"bold"} fontSize={16}>
Estado de cuenta al {(new Date().toLocaleDateString())}
</Tag>
<Tag m="1px" p="10px" w="100%" fontWeight={"bold"} fontSize={16}>
Deuda total: {'$ ' + new Intl.NumberFormat('es-ES').format(deuda)}
</Tag>
</Flex>
<Box w={"100%"} display={"flex"} justifyContent={"center"} >
{cuotas.length > 0 ? (
<Table variant="simple" width="90%" borderColor={"gray.200"}
borderStyle={"solid"}
borderWidth={1}
p={5}
>
<Thead>
<Tr mt={6}>
<Th textAlign="center" >
Numero
</Th>
<Th textAlign="center">Fecha Proximo Vto.</Th>
<Th textAlign="center">Valor Actual</Th>
<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>
{cuotas && cuotas.map((cuota, index) => (
<Tr key={index}>
<Td textAlign="center">{cuota.numero}</Td>
<Td textAlign="center">{formatoFechaISOaDDMMAAAA(cuota.fechaVencimiento)}</Td>
<Td textAlign="center">{'$ ' + new Intl.NumberFormat('es-ES').format(cuota.montoActual)}</Td>
<Td textAlign="center">{'$ ' + new Intl.NumberFormat('es-ES').format(cuota.monto_pagado)}</Td>
<Td textAlign="center">{'$ ' + new Intl.NumberFormat('es-ES').format( cuota.valorinformado)}</Td>
<Td textAlign="center">{'$ ' + new Intl.NumberFormat('es-ES').format(cuota.montoActual - cuota.valorinformado )}</Td>
<Td textAlign="center" p="8px">{
cuota.monto_pagado > 0 ?
<Button bg='transparent' _hover='transparent' m="0px" p="0px" onClick={() => handleDetailPay(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>
{ isMobile ? (//mobile
<Box>
{cuotas && cuotas.map((cuota, index) => (
<Box
key={index}
borderWidth="1px"
borderRadius="lg"
overflow="hidden"
p={4}
mb={4}
background={'gray.100'}
>
<Text textAlign={'center'} fontWeight={'600'}>Cuota Número: {cuota.numero}</Text>
<Text>Fecha Vto.:{formatoFechaISOaDDMMAAAA(cuota.fechaVencimiento)}</Text>
<Text>Monto Actual: {'$ ' + new Intl.NumberFormat('es-ES').format(cuota.montoActual)}</Text>
<Text>Monto Pagado: {'$ ' + new Intl.NumberFormat('es-ES').format(cuota.monto_pagado)}</Text>
<Text>Valor Informado: {'$ ' + new Intl.NumberFormat('es-ES').format( cuota.valorinformado)}</Text>
<Text>Valor Adeudado{'$ ' + new Intl.NumberFormat('es-ES').format(cuota.montoActual - cuota.valorinformado )}</Text>
</Box>
))}
</Box>
)
: ( //desktop
<Box w={"100%"} display={"flex"} justifyContent={"center"} >
{cuotas.length > 0 ? (
<Table variant="simple" width="90%" borderColor={"gray.200"}
borderStyle={"solid"}
borderWidth={1}
p={5}
>
<Thead>
<Tr mt={6}>
<Th textAlign="center" >
Numero
</Th>
<Th textAlign="center">Fecha Proximo Vto.</Th>
<Th textAlign="center">Valor Actual</Th>
<Th textAlign="center">Valor Pagado</Th>
<Th textAlign="center">Valor Informado</Th>
<Th textAlign="center">Valor Adeudado</Th>
<Th textAlign="center">Detalle</Th>
</Tr>
))}
</Tbody>
</Table>
</Thead>
<Tbody>
{cuotas && cuotas.map((cuota, index) => (
<Tr key={index}>
<Td textAlign="center">{cuota.numero}</Td>
<Td textAlign="center">{formatoFechaISOaDDMMAAAA(cuota.fechaVencimiento)}</Td>
<Td textAlign="center">{'$ ' + new Intl.NumberFormat('es-ES').format(cuota.montoActual)}</Td>
<Td textAlign="center">{'$ ' + new Intl.NumberFormat('es-ES').format(cuota.monto_pagado)}</Td>
<Td textAlign="center">{'$ ' + new Intl.NumberFormat('es-ES').format( cuota.valorinformado)}</Td>
<Td textAlign="center">{'$ ' + new Intl.NumberFormat('es-ES').format(cuota.montoActual - cuota.valorinformado )}</Td>
<Td textAlign="center" p="8px">{
cuota.monto_pagado > 0 ?
<Button bg='transparent' _hover='transparent' m="0px" p="0px" onClick={() => handleDetailPay(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>
))}
</Tbody>
</Table>


) : (
<Text textAlign="center" padding="20px">El alumno aún no tiene cuotas generadas. </Text>
)}
) : (
<Text textAlign="center" padding="20px">El alumno aún no tiene cuotas generadas. </Text>
)}

</Box>
<Box w="90%" mt="20px" ml="70px">
</Box>
)}

<Box w="90%" mt="20px" ml={isMobile? '' : "70px"}>
<Flex justifyContent="space-between" >
<Button onClick={handlePreviousPage} isDisabled={offset === 0} _hover="none" color="white" leftIcon={<ArrowLeftIcon />}>
Anterior
Expand Down

0 comments on commit 70bf455

Please sign in to comment.