From 3fa903b09a861def22ed1c85b9d46b0ddb8e3351 Mon Sep 17 00:00:00 2001 From: Frnn4268 Date: Tue, 12 Nov 2024 08:09:29 -0600 Subject: [PATCH] Creating new ParkingPriceComponent.jsx components and fixing some issues inside of IncomeForm.jsx component --- .../components/dailyIncome/IncomeForm.jsx | 5 +- .../parkingPrice/LastParkingPriceCard.jsx | 22 ++ .../parkingPrice/ParkingPriceForm.jsx | 46 ++++ .../parkingPrice/ParkingPriceHeader.jsx | 13 + .../parkingPrice/ParkingPriceLayout.jsx | 17 ++ .../pages/income/ParkingPriceComponent.jsx | 246 +++++++----------- 6 files changed, 194 insertions(+), 155 deletions(-) create mode 100644 frontend/components/parkingPrice/LastParkingPriceCard.jsx create mode 100644 frontend/components/parkingPrice/ParkingPriceForm.jsx create mode 100644 frontend/components/parkingPrice/ParkingPriceHeader.jsx create mode 100644 frontend/components/parkingPrice/ParkingPriceLayout.jsx diff --git a/frontend/components/dailyIncome/IncomeForm.jsx b/frontend/components/dailyIncome/IncomeForm.jsx index deccacc..4b1ef30 100644 --- a/frontend/components/dailyIncome/IncomeForm.jsx +++ b/frontend/components/dailyIncome/IncomeForm.jsx @@ -8,7 +8,7 @@ const IncomeForm = ({ form, handleSubmit, handleDateChange, income, setIncome, p label='Fecha de ingreso:' name='date' rules={[{ required: true, message: 'Por favor selecciona la fecha' }]} - style={{ marginTop: 15 }} + style={{ marginTop: 15, textAlign: 'center' }} > - + diff --git a/frontend/components/parkingPrice/LastParkingPriceCard.jsx b/frontend/components/parkingPrice/LastParkingPriceCard.jsx new file mode 100644 index 0000000..58f3965 --- /dev/null +++ b/frontend/components/parkingPrice/LastParkingPriceCard.jsx @@ -0,0 +1,22 @@ +import React from 'react'; +import { Card, Statistic } from 'antd'; +import { ArrowUpOutlined } from '@ant-design/icons'; +import moment from 'moment'; + +const LastParkingPriceCard = ({ lastSavedParkingPrice, lastDateParkingPrice }) => ( + + } + /> + + +); + +export default LastParkingPriceCard; \ No newline at end of file diff --git a/frontend/components/parkingPrice/ParkingPriceForm.jsx b/frontend/components/parkingPrice/ParkingPriceForm.jsx new file mode 100644 index 0000000..440728a --- /dev/null +++ b/frontend/components/parkingPrice/ParkingPriceForm.jsx @@ -0,0 +1,46 @@ +import React from 'react'; +import { Form, InputNumber, Button } from 'antd'; + +const ParkingPriceForm = ({ form, handleSubmit }) => ( +
+
+ + `Q ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')} + parser={(value) => value.replace(/\Q\s?|(,*)/g, '')} + style={{ width: '100%' }} + /> + + + `${value} horas`} + parser={value => value.replace(' horas', '')} + style={{ width: '100%' }} + /> + + + + +
+
+); + +export default ParkingPriceForm; \ No newline at end of file diff --git a/frontend/components/parkingPrice/ParkingPriceHeader.jsx b/frontend/components/parkingPrice/ParkingPriceHeader.jsx new file mode 100644 index 0000000..45b374b --- /dev/null +++ b/frontend/components/parkingPrice/ParkingPriceHeader.jsx @@ -0,0 +1,13 @@ +import React from 'react'; +import { Layout } from 'antd'; +import TopMenu from '../../src/pages/dashboard/TopMenu.jsx'; + +const { Header } = Layout; + +const ParkingPriceHeader = () => ( +
+ +
+); + +export default ParkingPriceHeader; \ No newline at end of file diff --git a/frontend/components/parkingPrice/ParkingPriceLayout.jsx b/frontend/components/parkingPrice/ParkingPriceLayout.jsx new file mode 100644 index 0000000..2325da5 --- /dev/null +++ b/frontend/components/parkingPrice/ParkingPriceLayout.jsx @@ -0,0 +1,17 @@ +// ParkingPriceLayout.jsx +import React from 'react'; +import { Layout } from 'antd'; +import LeftMenu from '../../src/pages/dashboard/LeftMenu.jsx'; + +const ParkingPriceLayout = ({ children }) => ( + + + + + + {children} + + +); + +export default ParkingPriceLayout; \ No newline at end of file diff --git a/frontend/src/pages/income/ParkingPriceComponent.jsx b/frontend/src/pages/income/ParkingPriceComponent.jsx index 9f2d132..055e90c 100644 --- a/frontend/src/pages/income/ParkingPriceComponent.jsx +++ b/frontend/src/pages/income/ParkingPriceComponent.jsx @@ -1,171 +1,111 @@ +// ParkingPriceComponent.jsx import React, { useState, useEffect } from 'react'; -import { Row, Col, Button, Form, Layout, Card, Typography, message, InputNumber, Statistic } from 'antd'; -import { ArrowUpOutlined } from '@ant-design/icons'; +import { Row, Col, Layout, Card, Typography, message, Form } from 'antd'; import moment from 'moment'; -import TopMenu from '../dashboard/TopMenu.jsx' -import LeftMenu from '../dashboard/LeftMenu.jsx'; +import ParkingPriceHeader from '../../../components//parkingPrice/ParkingPriceHeader'; +import ParkingPriceLayout from '../../../components//parkingPrice/ParkingPriceLayout'; +import ParkingPriceForm from '../../../components//parkingPrice/ParkingPriceForm'; +import LastParkingPriceCard from '../../../components//parkingPrice/LastParkingPriceCard'; -import '../../css/DashboardMenu.css' +import '../../css/DashboardMenu.css'; import '../../css/ParkingPriceComponent.css'; -const { Header } = Layout; const { useForm } = Form; const ParkingPriceComponent = () => { - const [form] = useForm(); - const [messageApi, contextHolder] = message.useMessage(); - const [parkingPrice, setParkingPrice] = useState(0); - const [lastSavedParkingPrice, setLastSavedParkingPrice] = useState(0); - const [lastDateParkingPrice, setLastDateParkingPrice] = useState(null); + const [form] = useForm(); + const [messageApi, contextHolder] = message.useMessage(); + const [parkingPrice, setParkingPrice] = useState(0); + const [lastSavedParkingPrice, setLastSavedParkingPrice] = useState(0); + const [lastDateParkingPrice, setLastDateParkingPrice] = useState(null); - const success = async () => { - messageApi - .loading('Guardando precio de parqueo...', 2.5) - .then(async () => { - message.success('Precio de parqueo guardado correctamente', 2.5); - form.resetFields(); - setLastSavedParkingPrice(parkingPrice); - await fetchLastParkingIncome(); - }) - .catch(() => message.error('Error al guardar el precio de parqueo', 2.5)); - }; + const success = async () => { + messageApi + .loading('Guardando precio de parqueo...', 2.5) + .then(async () => { + message.success('Precio de parqueo guardado correctamente', 2.5); + form.resetFields(); + setLastSavedParkingPrice(parkingPrice); + await fetchLastParkingIncome(); + }) + .catch(() => message.error('Error al guardar el precio de parqueo', 2.5)); + }; - useEffect(() => { - fetchLastParkingIncome(); - }, []); + useEffect(() => { + fetchLastParkingIncome(); + }, []); - const fetchLastParkingIncome = async () => { - try { - const response = await fetch(`${import.meta.env.VITE_APP_API_URL}/parking-price/last-parking-price`); - const data = await response.json(); - if (data.status === 'success') { - setParkingPrice(data.data.price); - setLastSavedParkingPrice(data.data.price); - setLastDateParkingPrice(moment(data.data.hour_date).format('YYYY-MM-DD HH:mm:ss')); - } else { - throw new Error('Error al obtener el último precio de parqueo'); - } - } catch (error) { - message.error(error.message); - } - }; + const fetchLastParkingIncome = async () => { + try { + const response = await fetch(`${import.meta.env.VITE_APP_API_URL}/parking-price/last-parking-price`); + const data = await response.json(); + if (data.status === 'success') { + setParkingPrice(data.data.price); + setLastSavedParkingPrice(data.data.price); + setLastDateParkingPrice(moment(data.data.hour_date).format('YYYY-MM-DD HH:mm:ss')); + } else { + throw new Error('Error al obtener el último precio de parqueo'); + } + } catch (error) { + message.error(error.message); + } + }; - const handleSubmit = async (values) => { - try { - const { price, time_in_hours } = values; + const handleSubmit = async (values) => { + try { + const { price, time_in_hours } = values; - const response = await fetch(`${import.meta.env.VITE_APP_API_URL}/parking-price`, { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - }, - body: JSON.stringify({ - price: price, - time_in_hours: time_in_hours, - }), - }); + const response = await fetch(`${import.meta.env.VITE_APP_API_URL}/parking-price`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + price: price, + time_in_hours: time_in_hours, + }), + }); - if (response.ok) { - success(); - } else { - throw new Error('Error al guardar el ingreso de dinero'); - } - } catch (error) { - message.error(error.message); - } - }; + if (response.ok) { + success(); + } else { + throw new Error('Error al guardar el ingreso de dinero'); + } + } catch (error) { + message.error(error.message); + } + }; - return ( - -
- -
- - - - - - - - Precio de Tiempo de Estacionamiento - - - -
- - `Q ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')} - parser={(value) => value.replace(/\Q\s?|(,*)/g, '')} - style={{ width: '100%' }} - /> - - - `${value} horas`} - parser={value => value.replace(' horas', '')} - style={{ width: '100%' }} - /> - - - - -
- - - - - - - } - /> - - - - - - - {contextHolder} - - ); + return ( + + + + + + Precio de Tiempo de Estacionamiento + + + + + + + + + + + + + + {contextHolder} + + ); } -export default ParkingPriceComponent; +export default ParkingPriceComponent; \ No newline at end of file