Skip to content

Commit

Permalink
Tup 59 pagina estado de cuenta (#135)
Browse files Browse the repository at this point in the history
  • Loading branch information
@facundomelgarejo
facundomelgarejo authored Oct 8, 2024
2 parents ac51489 + 89210ab commit 7ffef1a
Show file tree
Hide file tree
Showing 4 changed files with 150 additions and 138 deletions.
4 changes: 2 additions & 2 deletions FrontAdmin/src/API-Alumnos/Cuotas.ts
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import Cookies from 'js-cookie';

export const FetchCuotas = async () => {
export const FetchCuotas = async (limit: number, offset:number) => {
try {
const token = Cookies.get('tokennn');
const dni = Cookies.get('dni');

const response = await fetch(`http://localhost:8000/api/cuotas/alumno/${dni}/`, {
const response = await fetch(`http://localhost:8000/api/cuotas/alumno/${dni}/?limit=${limit}&offset=${offset}`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
Expand Down
257 changes: 138 additions & 119 deletions FrontAdmin/src/components/Pages-Alumnos/EstadoCuenta/EstadoCuenta.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React from "react";
import { Flex, Button, Text, Stack, Card, CardBody, Box,Tabs,TabList, TabPanels, TabPanel, Table, Tag,Thead,Tr, Th, Tbody, Tab,Td } from "@chakra-ui/react";
import { useDisclosure } from "@chakra-ui/react";
import {useState, useEffect} from 'react';
import {AttachmentIcon} from '@chakra-ui/icons';
import {AttachmentIcon, ArrowLeftIcon, ArrowRightIcon} from '@chakra-ui/icons';
import { IoEyeOutline } from "react-icons/io5";
import {obtenerFechaDeHoy, formatoFechaISOaDDMMAAAA} from '../../../utils/general';
import {FetchDetalleAlumno} from '../../../API/DetalleAlumno'
Expand Down Expand Up @@ -69,6 +69,7 @@ interface Pago {
cuotas: Cuota[];
comentario: string;
}

interface PagosResponse {
count: number;
next: string | null;
Expand All @@ -77,46 +78,70 @@ interface PagosResponse {
}

function InformarPago() {


const [alumno, setAlumno] = useState<Alumno | null>(null); // Define el estado con un valor inicial de null
const [compromisoFirmado, setCompromiso] = useState<CompromisoResponse >(); // Define el estado con un valor inicial de null
const [idCuotaSeleccionada, setIdCuotaSeleccionada] = useState<number | null>(null);
const [detalleCompromiso, setDetalleCompromiso] = useState<CompromisoResponse >();
const [pagos, setPagos] = useState<PagosResponse | null>(null);
const [cuotas, setCuotas] = useState<Cuota[]>([]); //arranca vacio
const [totalCuotas, setTotalCuotas] = useState<number>(0);
const [detail, showDetail] = useState<number | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<unknown>(null);
const [limit] = useState(5);
const [offset, setOffset1] = useState(0);

const handleNextPage = () => {
if (offset + limit < totalCuotas) {
setOffset1(offset + limit);
}
};

const handlePreviousPage = () => {
if (offset > 0) {
setOffset1(offset - limit);
}
};

useEffect(() => {
const fetchDetalleAlumno = async (dni: any) => {

const fetchCuotas = async () => {
try {
const data = await FetchDetalleAlumno(dni);
setAlumno(data);
const data = await FetchCuotas(limit, offset); //limit, offset
setCuotas(data.results);
setTotalCuotas(data.count);
} catch (error) {
setError(error);
console.error('Error al obtener los datos', error);
} finally {
setLoading(false);
}
};

const fetchCompromisoFirmado = async () => {

fetchCuotas()

}, [limit, offset]);



useEffect(() => {
const fetchDetalleAlumno = async (dni: any) => {
try {
const data = await FetchCompromisos();
setCompromiso(data)
const data = await FetchDetalleAlumno(dni);
setAlumno(data);
} catch (error) {
setError(error);
console.error('Error al obtener los datos', error);
} finally {
setLoading(false);
}
};

const fetchDetalleCompromiso = async (id: any) => {
const fetchCompromiso = async () => {
try {
const data = await FetchDetalleCompromiso(id);
setDetalleCompromiso(data)
const data = await FetchCompromisos();
console.log(' compromiso:', data)
setCompromiso(data)
} catch (error) {
setError(error);
console.error('Error al obtener los datos', error);
Expand All @@ -137,32 +162,43 @@ function InformarPago() {
}
};

const fetchCuotas = async () => {
try {
const data = await FetchCuotas();
setCuotas(data.results);
} catch (error) {
setError(error);
console.error('Error al obtener los datos', error);
} finally {
setLoading(false);
}
};


const dni = Cookies.get('dni');
fetchDetalleAlumno(dni);
fetchCompromisoFirmado();
fetchCompromiso();
fetchPagos();
fetchCuotas();
compromisoFirmado != null ? fetchDetalleCompromiso(compromisoFirmado?.results[0].id_compromiso_de_pago) : null






}, []);

useEffect(() => {
if (idCuotaSeleccionada !== null && compromisoFirmado) {
const fetchDetalleCompromiso = async () => {
try {
const detalleData = await FetchDetalleCompromiso(compromisoFirmado.results[0].id_compromiso_de_pago);
console.log('detalle compromiso:', detalleData)
setDetalleCompromiso(detalleData);
} catch (error) {
console.error('Error al obtener el detalle del compromiso', error);
}
};

fetchDetalleCompromiso();
}
}, [idCuotaSeleccionada, compromisoFirmado]);

const handleDetailPay = (idCuota: number) => {
showDetail(idCuota)
setIdCuotaSeleccionada(idCuota);
};


const [fechaDeHoy, setFechaDeHoy] = React.useState(obtenerFechaDeHoy());
const [refresh, setRefresh] = useState(false);
const [cuotasSeleccionadas, setCuotasSeleccionadas] = useState<Cuota[]>([]);


const handleRefresh = () => {
Expand Down Expand Up @@ -208,90 +244,61 @@ function InformarPago() {
}
};


return (

<Flex mt="20px">

<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>
<Flex mt="20px" flexDirection={"column"} justifyContent={"center"}>

<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>
<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>
Expand All @@ -305,34 +312,47 @@ function InformarPago() {
<Td textAlign="center">{'$ ' + new Intl.NumberFormat('es-ES').format(cuota.montoActual - cuota.valorpagado - cuota.valorinformado)}</Td>
<Td textAlign="center" p="8px">{
cuota.valorinformado > 0 || cuota.valorpagado > 0 ?
<Button bg='transparent' _hover='transparent' m="0px" p="0px" onClick={() => showDetail(cuota.id_cuota)}><IoEyeOutline size="22px"> </IoEyeOutline> </Button>
<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>
))}
</Tbody>
</Table>


) : (
<Text textAlign="center" padding="20px">No existen cuotas para el alumno.</Text>
)}
</TabPanel>

</TabPanels>

</Box>
<Box w="90%" mt="20px" ml="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>
<Button onClick={handleNextPage} isDisabled={offset + limit >= totalCuotas} _hover="none" color="white" rightIcon={<ArrowRightIcon/>}>
Siguiente
</Button>
</Flex>
</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>
Expand All @@ -341,8 +361,8 @@ function InformarPago() {
pago.cuotas.length > 0 &&
pago.cuotas.some(cuota => cuota.id_cuota === detail) // Verifica si alguna cuota cumple la condición
)
.map(pago => (
<Tr key={pago.monto_informado}>
.map((pago, index) => (
<Tr key={index}>
{pago.cuotas.map (cuota => (
cuota.id_cuota === detail ? ( // Verifica cada cuota para mostrar solo las que coinciden
<>
Expand All @@ -362,12 +382,11 @@ function InformarPago() {
</Tbody>
</Table>
</Box>
</Box>
:
<Box></Box>
}

</Tabs>


</Flex>
);
}
Expand Down
Loading

0 comments on commit 7ffef1a

Please sign in to comment.