From db7057d7453985218abf4da324e0059358306800 Mon Sep 17 00:00:00 2001
From: Frnn4268 <appstutorialesy@gmail.com>
Date: Sun, 10 Nov 2024 14:01:00 -0600
Subject: [PATCH] Fixing some bugs inside of IncomeForm.jsx component

---
 .../components/dailyIncome/IncomeForm.jsx     | 74 ++++++++++---------
 frontend/src/pages/income/DailyIncome.jsx     |  2 +-
 2 files changed, 39 insertions(+), 37 deletions(-)

diff --git a/frontend/components/dailyIncome/IncomeForm.jsx b/frontend/components/dailyIncome/IncomeForm.jsx
index 674287c..deccacc 100644
--- a/frontend/components/dailyIncome/IncomeForm.jsx
+++ b/frontend/components/dailyIncome/IncomeForm.jsx
@@ -2,42 +2,44 @@ import React from 'react';
 import { Form, DatePicker, InputNumber, Button } from 'antd';
 
 const IncomeForm = ({ form, handleSubmit, handleDateChange, income, setIncome, parseIncome }) => (
-  <Form layout="vertical" onFinish={handleSubmit} form={form}>
-    <Form.Item 
-      label='Fecha de ingreso:' 
-      name='date' 
-      rules={[{ required: true, message: 'Por favor selecciona la fecha' }]}
-      style={{ marginTop: 15 }}
-    >
-      <DatePicker 
-        format="YYYY-MM-DD" 
-        style={{ width: '100%' }}  
-        placeholder='Selecciona la fecha'
-        onChange={handleDateChange}
-      />
-    </Form.Item>
-    <Form.Item 
-      label='Monto:'
-      name='income'
-      rules={[{ required: true, message: 'Por favor ingresa el monto.' }]}
-    >
-      <InputNumber
-        size='large'
-        placeholder='Ingresa el monto'
-        defaultValue={0}
-        value={income} 
-        formatter={(value) => `Q ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
-        parser={parseIncome} 
-        onChange={setIncome} 
-        style={{ width: '100%' }}
-      />
-    </Form.Item>
-    <Form.Item>
-      <Button type='primary' size='large' className='btn' htmlType="submit">
-        Guardar
-      </Button>
-    </Form.Item>
-  </Form>
+  <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'column' }}>
+    <Form layout="vertical" onFinish={handleSubmit} form={form} style={{ width: '100%', maxWidth: '400px' }}>
+      <Form.Item 
+        label='Fecha de ingreso:' 
+        name='date' 
+        rules={[{ required: true, message: 'Por favor selecciona la fecha' }]}
+        style={{ marginTop: 15 }}
+      >
+        <DatePicker 
+          format="YYYY-MM-DD" 
+          style={{ width: '100%' }}  
+          placeholder='Selecciona la fecha'
+          onChange={handleDateChange}
+        />
+      </Form.Item>
+      <Form.Item 
+        label='Monto:'
+        name='income'
+        rules={[{ required: true, message: 'Por favor ingresa el monto.' }]}
+      >
+        <InputNumber
+          size='large'
+          placeholder='Ingresa el monto'
+          defaultValue={0}
+          value={income} 
+          formatter={(value) => `Q ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
+          parser={parseIncome} 
+          onChange={setIncome} 
+          style={{ width: '100%' }}
+        />
+      </Form.Item>
+      <Form.Item>
+        <Button type='primary' size='large' className='btn' htmlType="submit" style={{ width: '100%' }}>
+          Guardar
+        </Button>
+      </Form.Item>
+    </Form>
+  </div>
 );
 
 export default IncomeForm;
\ No newline at end of file
diff --git a/frontend/src/pages/income/DailyIncome.jsx b/frontend/src/pages/income/DailyIncome.jsx
index 27f35be..ba5d4a1 100644
--- a/frontend/src/pages/income/DailyIncome.jsx
+++ b/frontend/src/pages/income/DailyIncome.jsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Layout, Card, Typography, message } from 'antd';
+import { Layout, Card, Typography, message, Form } from 'antd';
 import moment from 'moment'; 
 
 import IncomeHeader from '../../../components/dailyIncome/IncomeHeader';