Skip to content

Commit

Permalink
feat: navegacion
Browse files Browse the repository at this point in the history
  • Loading branch information
@yoelmarain
yoelmarain committed Dec 11, 2024
1 parent 6a7a69a commit 4f162b2
Show file tree
Hide file tree
Showing 5 changed files with 105 additions and 37 deletions.
9 changes: 7 additions & 2 deletions FrontAdmin/src/components/Pages/Estadisticas/SubPages/Cuotas/Tabla.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,9 +46,13 @@ const Tabla: React.FC<TablaProps> = ({ headers, data }) => {
</Thead>
<Tbody>
{data.map((row, rowIndex) => (
<Tr key={rowIndex} onClick={() => handleRowClick(row[keyMap['DNI']])} cursor="pointer">
<Tr key={rowIndex} onClick={() => handleRowClick(row[keyMap['DNI']])} cursor="pointer" _hover={{
bg: 'gray.200', // Color de fondo cuando el cursor está sobre la fila
cursor: 'pointer', // Cambiar el cursor para indicar que es un enlace
}}>
{headers.map((header) => (
<Td key={header} textAlign={header === 'Apellido y Nombre' ? "left" : "center"}>
<Td key={header} textAlign={header === 'Apellido y Nombre' ? "left" : "center"}
>
{/* Usamos keyMap para obtener la propiedad correcta */}
{header === 'Monto Cuota' || header === 'Monto Adeudado' || header === 'Monto Abonado' ? (
`$${new Intl.NumberFormat('es-ES').format(row[keyMap[header]])}`
Expand All @@ -57,6 +61,7 @@ const Tabla: React.FC<TablaProps> = ({ headers, data }) => {
) : typeof row[keyMap[header]] === 'number' ? (
new Intl.NumberFormat('es-ES').format(row[keyMap[header]])
) : 'N/A'}

</Td>
))}
</Tr>
Expand Down
47 changes: 16 additions & 31 deletions ...min/src/components/Pages/Estadisticas/SubPages/Inhabilitaciones/Alumnos_a_Inhabilitar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ import { Box, Button, Flex, Table, Tbody, Td, Th, Thead, Tr, Text } from "@chakr
import Tabla from './Tabla';
import { IoEyeOutline } from "react-icons/io5";
import { ArrowLeftIcon, ArrowRightIcon } from "@chakra-ui/icons";
import { useNavigate } from "react-router-dom";
import TablaDetalle from "./TablaDetalles";

type Alumno = {
user: number,
Expand All @@ -20,31 +22,6 @@ type Cuota = {
tipo: string
};

const prueba = {
"count": 2,
"next": null,
"previous": null,
"results": [
{
"user": 43665213,
"full_name": "ACEVEDO, Gabriel Antonio",
"estado_financiero": "Inhabilitado",
"legajo": 25112,
"cuotas_adeudadas": [
{
"monto": 10,
"fecha_vencimiento": "2024-12-10",
"tipo": "Cuota"
},
{
"monto": 10,
"fecha_vencimiento": "2025-01-10",
"tipo": "Cuota"
}
]
}
]
}

export default function AInhabilitar() {

Expand All @@ -54,6 +31,7 @@ export default function AInhabilitar() {
const headers = ['Tipo', 'Fecha Vencimiento' , 'Monto'];
const [limit1] = useState(10);
const [offset1, setOffset1] = useState(0);
const navigate = useNavigate();
const [totalInhabilitados, setTotalInhabilitados] = useState<number>(0);

const handleNextPage = () => {
Expand Down Expand Up @@ -83,6 +61,10 @@ export default function AInhabilitar() {
setSelectedDni(dni);
};

const handleRowClick = (dni: any) => {
navigate(`/admin/alumnos/${dni}`);
};


useEffect(() => {
fetchData();
Expand All @@ -108,10 +90,13 @@ export default function AInhabilitar() {
</Thead>
<Tbody>
{alumnosAInhabilitar.map((alumno) => (
<Tr key={alumno.user}>
<Td textAlign="center">{alumno.full_name}</Td>
<Td textAlign="center">{new Intl.NumberFormat('es-ES').format(alumno.user)}</Td>
<Td textAlign="center">{new Intl.NumberFormat('es-ES').format(alumno.legajo)}</Td>
<Tr key={alumno.user} cursor="pointer" _hover={{
bg: 'gray.200', // Color de fondo cuando el cursor está sobre la fila
cursor: 'pointer', // Cambiar el cursor para indicar que es un enlace
}}>
<Td textAlign="center" onClick={() => handleRowClick(alumno.user)}>{alumno.full_name}</Td>
<Td textAlign="center" onClick={() => handleRowClick(alumno.user)}>{new Intl.NumberFormat('es-ES').format(alumno.user)}</Td>
<Td textAlign="center" onClick={() => handleRowClick(alumno.user)}>{new Intl.NumberFormat('es-ES').format(alumno.legajo)}</Td>
<Td textAlign="center">
<Button bg='transparent' _hover='transparent' m="0px" p="0px" onClick={() => handleDetailsClick((alumno.user.toString()))}>
<IoEyeOutline size="22px" />
Expand All @@ -122,7 +107,7 @@ export default function AInhabilitar() {
</Tbody>
</Table>
{selectedDni && (
<Tabla headers={headers} data={alumnosAInhabilitar.find((alumno) => alumno.user === parseInt(selectedDni))?.cuotas_adeudadas || []} />
<TablaDetalle headers={headers} data={alumnosAInhabilitar.find((alumno) => alumno.user === parseInt(selectedDni))?.cuotas_adeudadas || []} />
)}
<Box bottom="0" width="100%" bg="white" p="10px" mt={5} mb={5} boxShadow="md" >
<Flex justifyContent="space-between" alignItems={"center"}>
Expand All @@ -134,7 +119,7 @@ export default function AInhabilitar() {
Siguiente
</Button>
</Flex>
</Box>
</Box>
</>
) : <p>No hay datos para mostrar</p>}
</Flex>
Expand Down
12 changes: 10 additions & 2 deletions FrontAdmin/src/components/Pages/Estadisticas/SubPages/Inhabilitaciones/Tabla.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@
import React, { useEffect, useState } from 'react';
import { Table, Tr, Th,Thead, Tbody, Td, Checkbox } from '@chakra-ui/react';
import { formatoFechaISOaDDMMAAAA } from '../../../../../utils/general';

import { useNavigate } from 'react-router-dom';
interface TablaProps {
headers: string[];
data: Array<Record<string, any>>;
}

const Tabla: React.FC<TablaProps> = ({ headers, data}) => {
const [renderKey, setRenderKey] = useState(0);
const navigate = useNavigate();

const keyMap: { [key: string]: string } = {
'Apellido y Nombre': 'full_name',
Expand All @@ -20,6 +21,10 @@ const Tabla: React.FC<TablaProps> = ({ headers, data}) => {
'Monto': 'monto'
};

const handleRowClick = (dni: any) => {
navigate(`/admin/alumnos/${dni}`);
}

return (
<Table key={renderKey} variant="simple" p={4} borderWidth={1} borderColor={'grey.500'}>
<Thead>
Expand All @@ -31,7 +36,10 @@ const Tabla: React.FC<TablaProps> = ({ headers, data}) => {
</Thead>
<Tbody>
{data.map((row) => (
<Tr key={row.user}>
<Tr key={row.user} onClick={() => handleRowClick(row[keyMap['DNI']])} cursor="pointer" _hover={{
bg: 'gray.200', // Color de fondo cuando el cursor está sobre la fila
cursor: 'pointer', // Cambiar el cursor para indicar que es un enlace
}}>
{headers.map((header) => (
<Td key={header}>
{header === 'Desde'
Expand Down
61 changes: 61 additions & 0 deletions FrontAdmin/src/components/Pages/Estadisticas/SubPages/Inhabilitaciones/TablaDetalles.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
import React, { useEffect, useState } from 'react';
import { Table, Tr, Th,Thead, Tbody, Td, Checkbox } from '@chakra-ui/react';
import { formatoFechaISOaDDMMAAAA } from '../../../../../utils/general';
import { useNavigate } from 'react-router-dom';
interface TablaProps {
headers: string[];
data: Array<Record<string, any>>;
}

const TablaDetalle: React.FC<TablaProps> = ({ headers, data}) => {
const [renderKey, setRenderKey] = useState(0);
const navigate = useNavigate();

const keyMap: { [key: string]: string } = {
'Apellido y Nombre': 'full_name',
'DNI': 'user',
'Legajo': 'legajo',
'Desde': 'fecha_inhabilitacion',
'Tipo': 'tipo',
'Fecha Vencimiento': 'fecha_vencimiento',
'Monto': 'monto'
};

return (
<Table key={renderKey} variant="simple" p={4} borderWidth={1} borderColor={'grey.500'}>
<Thead>
<Tr>
{headers.map((header) => (
<Th fontFamily="Helvetica" fontWeight="900" key={header}>{header}</Th>
))}
</Tr>
</Thead>
<Tbody>
{data.map((row) => (
<Tr key={row.user} cursor="pointer" _hover={{
bg: 'gray.200', // Color de fondo cuando el cursor está sobre la fila
cursor: 'pointer', // Cambiar el cursor para indicar que es un enlace
}}>
{headers.map((header) => (
<Td key={header}>
{header === 'Desde'
? row[keyMap[header]]
? new Date(row[keyMap[header]]).toLocaleDateString()
: 'N/A'
: header === 'Legajo' || header === 'DNI'
? new Intl.NumberFormat('es-ES').format(row[keyMap[header]])
: header === 'Monto'
? `$${new Intl.NumberFormat('es-ES').format(row[keyMap[header]])}`
: header === 'Fecha Vencimiento'
? formatoFechaISOaDDMMAAAA(row[keyMap[header]])
: row[keyMap[header]]}
</Td>
))}
</Tr>
))}
</Tbody>
</Table>
);
};

export default TablaDetalle;
13 changes: 11 additions & 2 deletions FrontAdmin/src/components/Pages/Estadisticas/SubPages/Pagos/Pagos.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import {
import { ViewIcon } from '@chakra-ui/icons'
import { IoEyeOutline } from "react-icons/io5";
import {formatoFechaISOaDDMMAAAA} from "../../../../../utils/general";
import { useNavigate } from "react-router-dom";

type Cuota = {
nro_cuota: number;
Expand Down Expand Up @@ -52,6 +53,7 @@ export default function Pagos() {
const [data, setData] = useState<Data | null>(null);
const [loading, setLoading] = useState<boolean>(true);
const [selectedDni, setSelectedDni] = useState<string | null>(null);
const navigate = useNavigate();
const [expandedPagoIndex, setExpandedPagoIndex] = useState(null);

const handleDetailsClick = (dni: string) => {
Expand All @@ -67,6 +69,10 @@ export default function Pagos() {
setExpandedPagoIndex(expandedPagoIndex === index ? null : index);
};

const handleRowClick = (dni: any) => {
navigate(`/admin/alumnos/${dni}`);
};

useEffect (() => {
const fetchPagos = async () => {
try {
Expand Down Expand Up @@ -109,8 +115,11 @@ export default function Pagos() {
</Thead>
<Tbody>
{Object.keys(data.alumnos).map((dni) => (
<Tr key={dni}>
<Td textAlign="center" > {data.alumnos[dni].nombre}</Td>
<Tr key={dni} cursor="pointer" _hover={{
bg: 'gray.200', // Color de fondo cuando el cursor está sobre la fila
cursor: 'pointer', // Cambiar el cursor para indicar que es un enlace
}}>
<Td textAlign="center" onClick={() => handleRowClick(dni)}> {data.alumnos[dni].nombre}</Td>
<Td textAlign="center" >{new Intl.NumberFormat('es-ES').format(parseInt(dni))}</Td>
<Td textAlign="center" >{ "$ " + new Intl.NumberFormat('es-ES').format(data.alumnos[dni].total)}</Td>
<Td textAlign="center" >
Expand Down

0 comments on commit 4f162b2

Please sign in to comment.