Enterprise C R U D - Copy this React, Tailwind Component to your project

Como mejorarías este componente? Ya no quiero usar react bootstrap, solamente tailwind para los estilos. #07143d,#d1d5db,#1f2937 usa esos colores, y crea un componente bonito. import React, { useState, useEffect } from "react"; import { Form, Button, Container, Row, Col, Table } from "react bootstrap"; import Swal from "sweetalert2"; import config from "../config/config"; function EnterpriseCRUD() { const [enterpriseName, setEnterpriseName] = useState(""); const [departments, setDepartments] = useState([]); const [departmentName, setDepartmentName] = useState(""); const [cameras, setCameras] = useState([]); const [camera, setCamera] = useState({ camera_name: "", type_camera_usb_or_ip: "USB", location: "", }); const [error, setError] = useState({}); useEffect(() => { fetchEnterpriseData(); fetchDepartments(); fetchCameras(); }, []); const fetchEnterpriseData = async () => { try { const response = await fetch(`${config.apiUrl}/get enterprise`); const data = await response.json(); if (data.success) { setEnterpriseName(data.enterprise_name); } } catch (error) { Swal.fire("Error", "Error al obtener los datos de la empresa.", "error"); } }; const fetchDepartments = async () => { try { const response = await fetch(`${config.apiUrl}/lista departamentos`); const data = await response.json(); setDepartments(data); } catch (error) { Swal.fire("Error", "Error al obtener los departamentos.", "error"); } }; const fetchCameras = async () => { try { const response = await fetch(`${config.apiUrl}/lista camaras`); const data = await response.json(); if (Array.isArray(data.cameras)) { setCameras(data.cameras); } else { setCameras([]); } } catch (error) { setCameras([]); Swal.fire("Error", "Error al obtener las cámaras.", "error"); } }; const handleEnterpriseUpdate = async () => { if (!enterpriseName.trim()) { Swal.fire("Error", "El nombre de la empresa no puede estar vacío.", "error"); return; } try { const response = await fetch(`${config.apiUrl}/actualizar empresa`, { method: "POST", headers: { "Content Type": "application/json" }, body: JSON.stringify({ enterprise_name: enterpriseName }), }); const result = await response.json(); if (result.success) { Swal.fire("Éxito", "Nombre de la empresa actualizado.", "success"); } else { Swal.fire("Error", result.message, "error"); } } catch (error) { Swal.fire("Error", "Error al actualizar el nombre de la empresa.", "error"); } }; const handleDepartmentSubmit = async () => { if (!departmentName.trim()) { Swal.fire("Error", "El nombre del departamento no puede estar vacío.", "error"); return; } try { const response = await fetch(`${config.apiUrl}/crear departamento`, { method: "POST", headers: { "Content Type": "application/json" }, body: JSON.stringify({ department_name: departmentName }), }); const result = await response.json(); if (result.success) { fetchDepartments(); setDepartmentName(""); Swal.fire("Éxito", "Departamento creado exitosamente.", "success"); } else { Swal.fire("Error", result.message, "error"); } } catch (error) { Swal.fire("Error", "Error al crear el departamento.", "error"); } }; const handleCameraSubmit = async () => { if (!camera.camera_name.trim()) { Swal.fire("Error", "El nombre de la cámara no puede estar vacío.", "error"); return; } try { const response = await fetch(`${config.apiUrl}/crear camara`, { method: "POST", headers: { "Content Type": "application/json" }, body: JSON.stringify(camera), }); const result = await response.json(); if (result.success) { fetchCameras(); setCamera({ camera_name: "", type_camera_usb_or_ip: "USB", location: "" }); Swal.fire("Éxito", "Cámara creada exitosamente.", "success"); } else { Swal.fire("Error", result.message, "error"); } } catch (error) { Swal.fire("Error", "Error al crear la cámara.", "error"); } }; const handleDeleteDepartment = async (id) => { try { const response = await fetch(`${config.apiUrl}/eliminar departamento/${id}`, { method: "DELETE", }); const result = await response.json(); if (result.success) { fetchDepartments(); Swal.fire("Éxito", "Departamento eliminado.", "success"); } else { Swal.fire("Error", result.message, "error"); } } catch (error) { Swal.fire("Error", "Error al eliminar el departamento.", "error"); } }; const handleDeleteCamera = async (id) => { try { const response = await fetch(`${config.apiUrl}/eliminar camara/${id}`, { method: "DELETE", }); const result = await response.json(); if (result.success) { fetchCameras(); Swal.fire("Éxito", "Cámara eliminada.", "success"); } else { Swal.fire("Error", result.message, "error"); } } catch (error) { Swal.fire("Error", "Error al eliminar la cámara.", "error"); } }; return ( <Container> <h2>Gestión de la Organización</h2> <Row> <Col md={12}> <Form> <Form.Group controlId="enterpriseName"> <Form.Label>Nombre de la Empresa</Form.Label> <Form.Control type="text" value={enterpriseName} onChange={(e) => setEnterpriseName(e.target.value)} isInvalid={!!error.enterpriseName} /> <Form.Control.Feedback type="invalid"> {error.enterpriseName} </Form.Control.Feedback> </Form.Group> <Button variant="primary" onClick={handleEnterpriseUpdate}> Actualizar Empresa </Button> </Form> </Col> </Row> <hr /> <Row> <Col md={6}> <h3>Departamentos</h3> <Form> <Form.Group controlId="departmentName"> <Form.Label>Nombre del Departamento</Form.Label> <Form.Control type="text" value={departmentName} onChange={(e) => setDepartmentName(e.target.value)} isInvalid={!!error.departmentName} /> <Form.Control.Feedback type="invalid"> {error.departmentName} </Form.Control.Feedback> </Form.Group> <Button variant="primary" onClick={handleDepartmentSubmit}> Crear Departamento </Button> </Form> <Table striped bordered hover className="mt 3"> <thead> <tr> <th>ID</th> <th>Nombre</th> <th>Acciones</th> </tr> </thead> <tbody> {departments.map((dept) => ( <tr key={dept.id_department}> <td>{dept.id_department}</td> <td>{dept.department_name}</td> <td> <Button variant="danger" onClick={() => handleDeleteDepartment(dept.id_department)} > Eliminar </Button> </td> </tr> ))} </tbody> </Table> </Col> <Col md={6}> <h3>Cámaras</h3> <Form> <Form.Group controlId="cameraName"> <Form.Label>Nombre de la Cámara</Form.Label> <Form.Control type="text" value={camera.camera_name} onChange={(e) => setCamera({ ...camera, camera_name: e.target.value })} isInvalid={!!error.cameraName} /> <Form.Control.Feedback type="invalid"> {error.cameraName} </Form.Control.Feedback> </Form.Group> <Form.Group controlId="cameraType"> <Form.Label>Tipo de Cámara</Form.Label> <Form.Control as="select" value={camera.type_camera_usb_or_ip} onChange={(e) => setCamera({ ...camera, type_camera_usb_or_ip: e.target.value })} > <option value="USB">USB</option> <option value="IP">IP</option> </Form.Control> </Form.Group> <Form.Group controlId="cameraLocation"> <Form.Label>Ubicación</Form.Label> <Form.Control type="text" value={camera.location} onChange={(e) => setCamera({ ...camera, location: e.target.value })} /> </Form.Group> <Button variant="primary" onClick={handleCameraSubmit}> Crear Cámara </Button> </Form> <Table striped bordered hover className="mt 3"> <thead> <tr> <th>ID</th> <th>Nombre</th> <th>Tipo</th> <th>Ubicación</th> <th>Acciones</th> </tr> </thead> <tbody> {cameras.map((cam) => ( <tr key={cam.id_camera}> <td>{cam.id_camera}</td> <td>{cam.camera_name}</td> <td>{cam.type_camera_usb_or_ip}</td> <td>{cam.location}</td> <td> <Button variant="danger" onClick={() => handleDeleteCamera(cam.id_camera)} > Eliminar </Button> </td> </tr> ))} </tbody> </Table> </Col> </Row> </Container> ); } export default EnterpriseCRUD;