Merge pull request #170 from Frnn4268/Frnn

Fixing some bugs inside of IncomeForm.jsx component
Frnn4268 · Nov 10, 2024 · 204a328 · 204a328
2 parents 4cc4877 + db7057d
commit 204a328
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 37 deletions.
diff --git 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;
diff --git 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';