diff --git a/FrontAdmin/src/API/Pagos.ts b/FrontAdmin/src/API/Pagos.ts index e676d43..c86991a 100644 --- a/FrontAdmin/src/API/Pagos.ts +++ b/FrontAdmin/src/API/Pagos.ts @@ -1,9 +1,9 @@ import Cookies from 'js-cookie'; -export const GetPagos = async (year?: string, month?: string) => { +export const GetPagos = async (inicio?: string, fin?: string) => { const token = Cookies.get('tokennn'); - const url = `http://localhost:8000/api/estadisticas/pagos_mes/${year}/${month}/`; + const url = `http://localhost:8000/api/estadisticas/pagos_mes?end_date=${fin}&start_date=${inicio}`; const response = await fetch(url, { method: 'GET', diff --git a/FrontAdmin/src/components/Pages/Estadisticas/SubPages/Pagos/Deuda.tsx b/FrontAdmin/src/components/Pages/Estadisticas/SubPages/Pagos/Deuda.tsx index f0d8626..17105dd 100644 --- a/FrontAdmin/src/components/Pages/Estadisticas/SubPages/Pagos/Deuda.tsx +++ b/FrontAdmin/src/components/Pages/Estadisticas/SubPages/Pagos/Deuda.tsx @@ -70,7 +70,7 @@ function Deuda() { {loading === true ? : - data && ( + data && Object.keys(data.alumnos).length > 0 ? ( <> @@ -121,7 +121,12 @@ function Deuda() { )} - )} + ): null} + {data && Object.keys(data.alumnos).length === 0 ? ( + + No hay deudas + + ) : null} ); diff --git a/FrontAdmin/src/components/Pages/Estadisticas/SubPages/Pagos/Pagos.tsx b/FrontAdmin/src/components/Pages/Estadisticas/SubPages/Pagos/Pagos.tsx index 3050bf0..789a110 100644 --- a/FrontAdmin/src/components/Pages/Estadisticas/SubPages/Pagos/Pagos.tsx +++ b/FrontAdmin/src/components/Pages/Estadisticas/SubPages/Pagos/Pagos.tsx @@ -40,7 +40,7 @@ type Pago = { export default function Pagos() { - const { fecha } = useParams<{ fecha: string }>(); + const { fecha_inicio, fecha_fin } = useParams<{ fecha_inicio: string, fecha_fin: string }>(); const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const [selectedDni, setSelectedDni] = useState(null); @@ -54,11 +54,9 @@ export default function Pagos() { }; useEffect (() => { - const [year, month] = fecha ? fecha.split('-') : [undefined, undefined]; const fetchPagos = async () => { try { - console.log('Buscando pagos de: ', year, month); - const datos = await GetPagos(year, month); + const datos = await GetPagos(fecha_inicio, fecha_fin); setData(datos); console.log(data); } catch (error) { @@ -68,7 +66,7 @@ export default function Pagos() { } }; fetchPagos(); - }, [fecha]); + }, [fecha_inicio, fecha_fin]); return ( @@ -79,7 +77,7 @@ export default function Pagos() { Periodo: - {fecha} + {`${fecha_inicio} / ${fecha_fin}`} Total Recaudado: diff --git a/FrontAdmin/src/components/Pages/Estadisticas/SubPages/Pagos/Select.tsx b/FrontAdmin/src/components/Pages/Estadisticas/SubPages/Pagos/Select.tsx new file mode 100644 index 0000000..c43431b --- /dev/null +++ b/FrontAdmin/src/components/Pages/Estadisticas/SubPages/Pagos/Select.tsx @@ -0,0 +1,113 @@ +import React, { useState } from 'react'; +import { Heading, Input, Flex,Button , Text } from '@chakra-ui/react'; +import {formatoFechaISOaAAAAMMDD} from '../../../../../utils/general'; +import { useNavigate } from 'react-router-dom'; +import { useEffect } from 'react'; + +function SelectPagos () { + const [selectedStartMonth, setSelectedStartMonth] = useState(''); + const [selectedEndMonth, setSelectedEndMonth] = useState(''); + const [mesInicio, setmesInicio] = useState(''); + const [mesFin, setmesFin] = useState(''); + const [today, setToday] = useState(new Date()); + const navigate = useNavigate(); + + useEffect(() => { + if (selectedStartMonth && selectedEndMonth) { + navigate(`/admin/estadisticas/pagos/${selectedStartMonth}/${selectedEndMonth}`); + } + }, [selectedStartMonth, selectedEndMonth]); + + const handleMonthStartChange = (event: React.ChangeEvent) => { + const [year, month, day] = event.target.value.split('-'); + const formattedDate = `${day}-${month}-${year}`; + setSelectedStartMonth(formattedDate); + setmesInicio(event.target.value); + }; + + const handleMonthEndChange = (event: React.ChangeEvent) => { + const [year, month, day] = event.target.value.split('-'); + const formattedDate = `${day}-${month}-${year}`; + setSelectedEndMonth(formattedDate); + setmesFin(event.target.value); + }; + + const handleButtonClick = () => { + const formattedStartMonth = selectedStartMonth.split('-').reverse().join('-'); + const formattedEndMonth = selectedEndMonth.split('-').reverse().join('-'); + setSelectedStartMonth(formattedStartMonth); + setSelectedEndMonth(formattedEndMonth); + }; + + const handleMesActual = () => { + const year = today.getFullYear(); + const month = String(today.getMonth() + 1).padStart(2, '0'); + const day = String(today.getDate()).padStart(2, '0'); + const startMonth = `01-${month}-${year}`; + const endMonth = `${day}-${month}-${year}`; + setSelectedStartMonth(startMonth); + setSelectedEndMonth(endMonth); + }; + + const handleCuatrimestreActual = () => { + const year = today.getFullYear(); + const month = String(today.getMonth() + 1).padStart(2, '0'); + const day = String(today.getDate()).padStart(2, '0'); + const startMonth = `01-08-${year}`; + const endMonth = `${day}-${month}-${year}`; + setSelectedStartMonth(startMonth); + setSelectedEndMonth(endMonth); + }; + + const handleAnioActual = () => { + const year = today.getFullYear(); + const month = String(today.getMonth() + 1).padStart(2, '0'); + const day = String(today.getDate()).padStart(2, '0'); + const startMonth = `01-03-${year}`; + const endMonth = `${day}-${month}-${year}`; + setSelectedStartMonth(startMonth); + setSelectedEndMonth(endMonth); + }; + + + return ( + + Seleccione un periodo + + + + + + + + - + + + + + + + ); +}; + +export default SelectPagos; diff --git a/FrontAdmin/src/routes.tsx b/FrontAdmin/src/routes.tsx index a1a5f4c..8aa6871 100644 --- a/FrontAdmin/src/routes.tsx +++ b/FrontAdmin/src/routes.tsx @@ -26,6 +26,7 @@ import FichaAlumno from './components/Pages/Alumnos/SubPages/FichaAlumno'; impor import ListadoAlumnosQueCursanMateria from './components/Pages/Estadisticas/SubPages/PaginasMaterias/ListadoAlumnosQueCursanMateria'; import AlumnosCompromisoPago from './components/Pages/Estadisticas/SubPages/Alumnos-que-fimaron-compromiso-de-pago'; import Select from './components/Pages/Estadisticas/SubPages/Cuotas/Select'; +import SelectPagos from './components/Pages/Estadisticas/SubPages/Pagos/Select'; import Listado from './components/Pages/Estadisticas/SubPages/Cuotas/Listado'; import path from 'path'; import EstadoCuenta from './components/Pages-Alumnos/EstadoCuenta/EstadoCuenta'; @@ -94,11 +95,11 @@ const routes = [ }, { path: 'pagos', - element: