Merge pull request #177 from Frnn4268/Frnn

Adding new Users.jsx components

frontend/components/user/UsersDrawer.jsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { Drawer, Form, Input, Radio, Button } from 'antd';
+
+const UsersDrawer = ({ drawerVisible, setDrawerVisible, form, onFinish, selectedRole, setSelectedRole }) => (
+  <Drawer
+    title="Editar usuario"
+    width={500}
+    onClose={() => setDrawerVisible(false)}
+    visible={drawerVisible}
+  >
+    <Form form={form} onFinish={onFinish}>
+      <Form.Item 
+        label="Nombre" 
+        name="name"
+        rules={[
+          {
+            required: true,
+            message: '¡Por favor ingrese el nombre del usuario!',
+          },
+        ]}
+      >
+        <Input />
+      </Form.Item>
+      <Form.Item 
+        label="Email" 
+        name="email"
+        rules={[
+          {
+            required: true,
+            message: '¡Por favor ingrese el email del usuario!',
+          },
+        ]}
+      >
+        <Input />
+      </Form.Item>
+      <Form.Item 
+        label="Rol" 
+        name="role"
+      >
+        <Radio.Group onChange={(e) => setSelectedRole(e.target.value)}>
+          <Radio.Button value="Empleado">Empleado</Radio.Button>
+          <Radio.Button value="Administrador">Administrador</Radio.Button>
+        </Radio.Group>
+      </Form.Item>
+      <Form.Item>
+        <Button type="primary" htmlType="submit" style={{ textAlign: 'center' }}>Guardar cambios</Button>
+      </Form.Item>
+    </Form>
+  </Drawer>
+);
+
+export default UsersDrawer;

frontend/components/user/UsersHeader.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 UsersHeader = () => (
+  <Header className='home-header-dashboard'>
+    <TopMenu />
+  </Header>
+);
+
+export default UsersHeader;

frontend/components/user/UsersLayout.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Layout } from 'antd';
+import LeftMenu from '../../src/pages/dashboard/LeftMenu.jsx';
+
+const UsersLayout = ({ children }) => (
+  <Layout>
+    <Layout.Sider>
+      <LeftMenu />
+    </Layout.Sider>
+    <Layout.Content className='layout-content-user'>
+      {children}
+    </Layout.Content>
+  </Layout>
+);
+
+export default UsersLayout;

frontend/components/user/UsersTable.jsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { Table, Tag, Button, Space, Switch } from 'antd';
+import { DeleteOutlined, SyncOutlined } from '@ant-design/icons';
+
+const UsersTable = ({ users, handleUpdate, handleDelete, handleSwitchChange, getRandomColor }) => {
+  const columns = [
+    {
+      title: 'ID',
+      dataIndex: 'id',
+      key: 'id',
+    },
+    {
+      title: 'Nombre',
+      dataIndex: 'name',
+      key: 'name',
+    },
+    {
+      title: 'Email',
+      dataIndex: 'email',
+      key: 'email',
+      render: (email) => (
+        <Tag color={getRandomColor()}>{email}</Tag>
+      ),
+    },
+    {
+      title: 'Rol',
+      dataIndex: 'role',
+      key: 'role',
+      render: (role) => (
+        <Tag color={role === 'Administrador' ? 'green' : 'blue'}>{role}</Tag>
+      ),
+    },
+    {
+      title: 'Estado',
+      dataIndex: 'active',
+      key: 'active',
+      render: (active, record) => (
+        <Switch
+          checked={active}
+          checkedChildren="Activo"
+          unCheckedChildren="Inactivo"
+          onChange={(checked) => handleSwitchChange(record.id, checked)}
+          style={{ backgroundColor: active ? 'green' : 'red', transition: 'background-color 0.3s' }} 
+        />
+      ),
+    },
+    {
+      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={users} 
+      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 UsersTable;