Merge pull request #171 from Frnn4268/Frnn

Adding new IncomeHistory.jsx components

Author: Frnn4268

frontend/components/incomeHistory/IncomeDrawer.jsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { Drawer, Form, Input, Button } from 'antd';
+
+const IncomeDrawer = ({ drawerVisible, setDrawerVisible, form, onFinish }) => (
+  <Drawer
+    title="Editar historial de ingresos"
+    width={500}
+    onClose={() => setDrawerVisible(false)}
+    visible={drawerVisible}
+  >
+    <Form form={form} onFinish={onFinish}>
+      <Form.Item 
+        label="Día" 
+        name="day"
+        rules={[{ required: true, message: '¡Por favor ingresa el día del ingreso!' }]}
+      >
+        <Input />
+      </Form.Item>
+      <Form.Item 
+        label="Mes" 
+        name="month"
+        rules={[{ required: true, message: '¡Por favor ingresa el mes del ingreso!' }]}
+      >
+        <Input />
+      </Form.Item>
+      <Form.Item 
+        label="Año" 
+        name="year"
+        rules={[{ required: true, message: '¡Por favor ingresa el año del ingreso!' }]}
+      >
+        <Input />
+      </Form.Item>
+      <Form.Item 
+        label="Monto monetario" 
+        name="income"
+        rules={[{ required: true, message: '¡Por favor ingresa el monto del ingreso!' }]}
+      >
+        <Input />
+      </Form.Item>
+      <Form.Item 
+        label="Fecha y hora" 
+        name="hour_date"
+        rules={[{ required: true, message: '¡Por favor ingresa la fecha y hora del ingreso!' }]}
+      >
+        <Input />
+      </Form.Item>
+      <Form.Item>
+        <Button type="primary" htmlType="submit" style={{ textAlign: 'center' }}>Guardar cambios</Button>
+      </Form.Item>
+    </Form>
+  </Drawer>
+);
+
+export default IncomeDrawer;

frontend/components/incomeHistory/IncomeTable.jsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { Table, Tag, Button, Space } from 'antd';
+import { DeleteOutlined, SyncOutlined } from '@ant-design/icons';
+
+const IncomeTable = ({ incomes, handleUpdate, handleDelete, getRandomColor }) => {
+  const columns = [
+    {
+      title: 'ID',
+      dataIndex: 'id',
+      key: 'id',
+    },
+    {
+      title: 'Dia',
+      dataIndex: 'day',
+      key: 'day',
+    },
+    {
+      title: 'Mes',
+      dataIndex: 'month',
+      key: 'month',
+    },
+    {
+      title: 'Año',
+      dataIndex: 'year',
+      key: 'year',
+    },
+    {
+      title: 'Monto monetario',
+      dataIndex: 'income',
+      key: 'income',
+    },
+    {
+      title: 'Fecha y hora',
+      dataIndex: 'hour_date',
+      key: 'hour_date',
+      render: (hour_date) => (
+        <Tag color={getRandomColor()}>{hour_date}</Tag>
+      ),
+    },
+    {
+      title: 'Acción',
+      key: 'action',
+      render: (_, record) => (
+        <Space size="middle">
+          <Button type="primary" icon={<SyncOutlined />} onClick={() => handleUpdate(record)}>Editar</Button>
+          <Button danger icon={<DeleteOutlined />} onClick={() => handleDelete(record.id)}>Eliminar</Button>
+        </Space>
+      ),
+    },
+  ];
+
+  return (
+    <Table 
+      dataSource={incomes} 
+      columns={columns} 
+      rowKey="id" 
+      pagination={{
+        pageSize: 10, 
+        showSizeChanger: false, 
+        pageSizeOptions: ['5', '10', '20'], 
+        showTotal: (total, range) => `${range[0]}-${range[1]} de ${total} filas`,
+      }}
+    />
+  );
+};
+
+export default IncomeTable;