Merge branch 'dev' into US-43-Activar-DesactivarInquilinos

api-gateway/src/app.service.ts

@@ -269,6 +269,7 @@ export class AppService {
       hourMax: hourMax,
       bookable: bookable,
       community_id: community_id,
+      status: '1'
     };
     return this.clientCommonAreaApp
       .send<string>(pattern, payload)

web-ui/web-react/src/components/AdministradoresSistema.js

@@ -58,7 +58,7 @@ const AdministradoresSistema = () => {
         item.status_text = 'Inactivo';
       } 
     })
-    setAdministrators(adminRes.message);
+    setAdministrators(await data);
   }
   useEffect(() => {
     fetchP();
@@ -614,12 +614,12 @@ const AdministradoresSistema = () => {
               <InputText id="nombre" type="text" />
             </div>
             <div className="field col-12 md:col-6">
-              <label htmlFor="apellidos">Apellidos</label>
+              <label htmlFor="apellidos">Apellido(s)</label>
               <InputText id="apellidos" type="text" />
             </div>
             <div className="field col-12 md:col-6">
               <label htmlFor="correo_electronico">Correo electrónico</label>
-              <InputText id="correo_electronico" type="text" />
+              <InputText id="correo_electronico" type="email" />
             </div>
             <div className="field col-12 md:col-6">
               <label htmlFor="identificacion">Identificación</label>

web-ui/web-react/src/components/AreasComunes.js

@@ -15,16 +15,15 @@ import { faIdCardAlt } from '@fortawesome/free-solid-svg-icons';
 import { faClipboardCheck } from '@fortawesome/free-solid-svg-icons';
 import classNames from 'classnames';
 import { useCookies } from "react-cookie";
-
+import { RadioButton } from 'primereact/radiobutton';
 
 const AreasComunes = () => {
 
     let emptyCommonArea = {
         _id: null,
-        dni: '',
         name: '',
-        hourMin: '',
+        hourMin: '00:00',
-        hourMax: '',
+        hourMax: '01:00',
         community_id: '',
         bookable: '1',
         bookable_text: '',
@@ -32,6 +31,7 @@ const AreasComunes = () => {
         status_text: '',
     };
 
+
     const [commonAreaList, setCommonAreaList] = useState([]);
     const [commonArea, setCommonArea] = useState(emptyCommonArea);
     const [selectedCommonAreas, setSelectedCommonAreas] = useState(null);
@@ -44,6 +44,8 @@ const AreasComunes = () => {
 
     const [cookies, setCookie] = useCookies();
 
+
+
     async function getCommonAreas() {
         await fetch(`http://localhost:4000/commonArea/findByCommunity/${cookies.community_id}`, { method: 'GET' })
             .then((response) => response.json())
@@ -78,6 +80,74 @@ const AreasComunes = () => {
         getCommonAreas();
     }, []);
 
+    const saveCommonArea = () => {
+        if (
+            commonArea.name &&
+            commonArea.hourMin < commonArea.hourMax
+        ) {
+            let _common_areas = [...commonAreaList];
+            let _common_area = { ...commonArea };
+            _common_area.community_id = cookies.community_id;
+
+            // console.log(houses)
+            fetch('http://localhost:4000/commonArea/createCommonArea', {
+                cache: 'no-cache',
+                method: 'POST',
+                body: JSON.stringify(_common_area),
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+            })
+                .then(function (response) {
+                    if (response.status != 201)
+                        console.log('Ocurrió un error con el servicio: ' + response.status);
+                    else return response.json();
+                })
+                .then(function (data) {
+                    return data.message;
+                })
+                .then((data) => {
+                    if (data) {
+                        if (data.bookable == '1') {
+                            data.bookable_text = 'Necesaria';
+                        } else {
+                            data.bookable_text = 'No es necesaria';
+                        }
+
+                        if (data.status == '1') {
+                            data.status_text = 'Activo';
+                        } else if (data.status == '0') {
+                            data.status_text = 'Inactivo';
+                        } else {
+                            data.status_text = 'Eliminado';
+                        }
+                    }
+                    _common_areas.push(data);
+
+                    toast.current.show({
+                        severity: 'success',
+                        summary: 'Registro exitoso',
+                        detail: 'Área Común Creada',
+                        life: 3000,
+                    });
+                    setCommonAreaList(_common_areas);
+                    setCommonArea(emptyCommonArea);
+                })
+                .catch((err) => {
+                    console.log('Ocurrió un error con el fetch', err);
+                    toast.current.show({
+                        severity: 'danger',
+                        summary: 'Error',
+                        detail: 'No se pudo registrar el área común',
+                        life: 3000
+                    });
+
+                });
+        } else {
+            setSubmitted(true);
+        }
+    };
+
 
     const deleteCommonArea = () => {
         fetch('http://localhost:4000/commonArea/deleteCommonArea/' + commonArea._id, {
@@ -167,8 +237,6 @@ const AreasComunes = () => {
         setDeleteCommonAreasDialog(true);
     };
 
-
-
     const actionsCommonArea = (rowData) => {
         return (
             <div className="actions">
@@ -181,6 +249,18 @@ const AreasComunes = () => {
         );
     };
 
+    const onBookableChange = (e) => {
+        let _commonArea = { ...commonArea };
+        _commonArea['bookable'] = e.value;
+        setCommonArea(_commonArea);
+    };
+
+    const onInputChange = (e, name) => {
+        const val = (e.target && e.target.value) || '';
+        let _commonArea = { ...commonArea };
+        _commonArea[`${name}`] = val;
+        setCommonArea(_commonArea);
+    };
 
     const deleteCommonAreaDialogFooter = (
         <>
@@ -278,7 +358,7 @@ const AreasComunes = () => {
 
     const bookableBodyTemplate = (rowData) => {
         let class_color = '';
-        if(rowData.bookable == '1') {
+        if (rowData.bookable == '1') {
             class_color = '0';
         } else {
             class_color = '1';
@@ -307,6 +387,18 @@ const AreasComunes = () => {
         );
     };
 
+
+    function compareTimesMinRequired(hour1, hour2) {
+        var timeFormat1 = Number(hour1.replace(/[:]/g, ''));
+        var timeFormat2 = Number(hour2.replace(/[:]/g, ''));
+        if (timeFormat1 <= timeFormat2) {
+            return true;
+        } else {
+            return false;
+        }
+    }
+
+
     return (
         <div className="grid">
             <div className="col-12">
@@ -341,6 +433,124 @@ const AreasComunes = () => {
                     </Dialog>
                 </div>
             </div>
+            <div className="col-12">
+                <div className="card">
+                    <h5>Registro de área común</h5>
+                    <div className="p-fluid formgrid grid">
+                        <div className="field col-12 md:col-6">
+                            <label htmlFor="name">Nombre</label>
+                            <div className="p-0 col-12 md:col-12">
+
+                                <div className="p-inputgroup">
+                                    <span className="p-inputgroup-addon p-button p-icon-input-khaki">
+                                        <i className="pi pi-home"></i>
+                                    </span>
+                                    <InputText id="name"
+                                        type="text"
+                                        onChange={(e) => onInputChange(e, 'name')}
+                                        value={commonArea.name}
+                                        required
+                                        autoFocus
+                                        className={classNames({
+                                            'p-invalid': submitted && commonArea.name === '',
+                                        })}
+                                    />
+                                </div>
+                                {submitted && commonArea.name === '' && (
+                                    <small className="p-invalid">Nombre es requirido.</small>
+                                )}
+                            </div>
+                        </div>
+                        <div className="field col-12 md:col-6">
+                            <label htmlFor="hourMin">Hora apertura</label>
+                            <div className="p-0 col-12 md:col-12">
+                                <div className="p-inputgroup">
+                                    <span className="p-inputgroup-addon p-button p-icon-input-khaki">
+                                        <i className="pi pi-home"></i>
+                                    </span>
+                                    <InputText id="hourMin"
+                                        type="time"
+                                        min="00:00" max="23:59"
+                                        step="3600000"
+                                        onChange={(e) => onInputChange(e, 'hourMin')}
+                                        value={commonArea.hourMin}
+                                        required
+                                        autoFocus
+                                        className={classNames({
+                                            'p-invalid': submitted && compareTimesMinRequired(commonArea.hourMax, commonArea.hourMin),
+                                        })}
+                                    />
+                                </div>
+                                {submitted && compareTimesMinRequired(commonArea.hourMax, commonArea.hourMin) && (
+                                    <small className="p-invalid">La hora de apertura debe ser menor que la hora de cierre.</small>
+                                )}
+                            </div>
+                        </div>
+                        <div className="field col-12 md:col-6">
+                            <label htmlFor="hourMax">Hora de cierre</label>
+                            <div className="p-0 col-12 md:col-12">
+                                <div className="p-inputgroup">
+                                    <span className="p-inputgroup-addon p-button p-icon-input-khaki">
+                                        <i className="pi pi-home"></i>
+                                    </span>
+                                    <InputText id="hourMax"
+                                        type="time"
+                                        min="00:00" max="23:59"
+                                        step="3600000"
+                                        onChange={(e) => onInputChange(e, 'hourMax')}
+                                        value={commonArea.hourMax}
+                                        required
+                                        autoFocus
+                                        className={classNames({
+                                            'p-invalid': submitted && compareTimesMinRequired(commonArea.hourMax, commonArea.hourMin),
+                                        })}
+                                    />
+                                </div>
+                                {submitted && compareTimesMinRequired(commonArea.hourMax, commonArea.hourMin) && (
+                                    <small className="p-invalid">La hora de cierre debe ser mayor que la hora de apertura</small>
+                                )}
+                            </div>
+                        </div>
+                        <div className="field col-12 md:col-6">
+                            <label htmlFor="bookable">¿Necesita Reservación?</label>
+                            <div className="formgrid grid align-items-end" style={{marginTop: '12px', width: '300px'}}>
+                                <div className="field-radiobutton col-6">
+
+                                    <RadioButton
+                                        inputId="bookable1"
+                                        name="bookable"
+                                        value="1"
+                                        onChange={onBookableChange}
+                                        checked={commonArea.bookable === '1'}
+                                    />
+                                    <label htmlFor="bookable1">
+                                        <span className="p-icon-input-khaki">
+                                            <i className="pi pi-check status status-1"></i> Sí
+                                        </span>
+                                    </label>
+                                </div>
+                                <div className="field-radiobutton col-6">
+                                    <RadioButton
+                                        inputId="bookable2"
+                                        name="bookable"
+                                        value="0"
+                                        onChange={onBookableChange}
+                                        checked={commonArea.bookable === '0'}
+                                    />
+                                    <label htmlFor="bookable2">
+                                        <span className="p-icon-input-khaki">
+                                            <i className="pi pi-times status status-0"></i> No
+                                        </span>
+                                    </label>
+                                </div>
+                            </div>
+                        </div>
+
+                        <Button label="Registrar" onClick={saveCommonArea}></Button>
+                    </div>
+                </div>
+            </div>
+
         </div>
     );
 

web-ui/web-react/src/components/GuardasSeguridad.js

@@ -11,18 +11,11 @@ import { faUserAlt } from '@fortawesome/free-solid-svg-icons';
 import { faPhoneAlt } from '@fortawesome/free-solid-svg-icons';
 import { faAt } from '@fortawesome/free-solid-svg-icons';
 import { faIdCardAlt } from '@fortawesome/free-solid-svg-icons';
-import { faEllipsis } from '@fortawesome/free-solid-svg-icons';
+import { faCircleQuestion } from '@fortawesome/free-solid-svg-icons';
+import { useCookies } from "react-cookie";
 
 const GuardasSeguridad = () => {
-    const [listaGuardas, setListaGuardas] = useState([]);
+
-    const [urlFetch, setUrlFetch] = useState('http://localhost:4000/user/findGuards/62be68215692582bbfd77134');
-    const [guarda, setGuarda] = useState(emptyGuarda);
-    const [selectedGuardas, setSelectedGuardas] = useState(null);
-    const [globalFilter, setGlobalFilter] = useState(null);
-    const [deleteGuardaDialog, setDeleteGuardaDialog] = useState(false);
-    const [deleteGuardasDialog, setDeleteGuardasDialog] = useState(false);
-    const toast = useRef(null);
-    const dt = useRef(null);
     let emptyGuarda = {
         _id: null,
         dni: '',
@@ -32,16 +25,44 @@ const GuardasSeguridad = () => {
         phone: '',
         password: '',
         user_type: '1',
-        status: ''
+        status: '1',
+        status_text: '',
     };
 
 
+    const [listaGuardas, setListaGuardas] = useState([]);
+    const [urlFetch, setUrlFetch] = useState('http://localhost:4000/user/findGuards/');
+    const [guarda, setGuarda] = useState(emptyGuarda);
+    const [selectedGuardas, setSelectedGuardas] = useState(null);
+    const [globalFilter, setGlobalFilter] = useState(null);
+    const [deleteGuardaDialog, setDeleteGuardaDialog] = useState(false);
+    const [deleteGuardasDialog, setDeleteGuardasDialog] = useState(false);
+    const toast = useRef(null);
+    const dt = useRef(null);
+
+    const [cookies, setCookie] = useCookies();
+    const [changeStatusGuardDialog, setChangeStatusGuardDialog] = useState(false);
+
+    const [guardDialog, setGuardDialog] = useState(false);
+    const [submitted, setSubmitted] = useState(false);
+
 
     async function listaGuardasF() {
-        let nombres = await fetch(urlFetch, { method: 'GET' });
+        let nombres = await fetch((urlFetch + cookies.community_id), { method: 'GET' });
         let listaGuardasRes = await nombres.json();
-        setListaGuardas(listaGuardasRes.message);
+        let data = await listaGuardasRes.message.filter(
+            (val) => val.status != -1,
+        )
+        await data.map((item) => {
+            if (item.status == '1') {
+                item.status_text = 'Activo';
+            } else if (item.status == '0') {
+                item.status_text = 'Inactivo';
+            }
+        })
+        setListaGuardas(await data);
     }
+
     useEffect(() => {
         listaGuardasF();
     }, [])
@@ -56,7 +77,7 @@ const GuardasSeguridad = () => {
             password: document.getElementById('correo_electronico').value,
             user_type: "4", //4 es guarda
             status: "1",
-            community_id: "62be68215692582bbfd77134"
+            community_id: cookies.community_id
         };
         var data2 = {
             dni: "11979037",
@@ -66,7 +87,7 @@ const GuardasSeguridad = () => {
             phone: 84664515,
             password: "1203",
             user_type: "2",
-            status: "4",
+            status: "1",
             community_id: "62be68215692582bbfd77134"
         }
         console.log('ssss');
@@ -74,7 +95,7 @@ const GuardasSeguridad = () => {
             cache: 'no-cache',
             method: 'POST',
             mode: 'cors',
-            body: JSON.stringify(data2),
+            body: JSON.stringify(data),
             headers: {
                 'Content-Type': 'application/json'
             }
@@ -89,7 +110,6 @@ const GuardasSeguridad = () => {
             )
             .then(
                 function (response) {
-                    console.log('fff');
                     listaGuardasF();
                 }
             )
@@ -98,22 +118,51 @@ const GuardasSeguridad = () => {
             );
     }
 
-    const hideDeleteGuardaDialog = () => {
+    const cambiarStatusUser = () => {
-        setDeleteGuardaDialog(false);
+        if (guarda.status == '1') {
+            guarda.status = '0';
+            guarda.status_text = 'Inactivo';
+
+        } else if (guarda.status == '0') {
+            guarda.status = '1';
+            guarda.status_text = 'Activo';
+        }
+        var data = {
+            id: guarda._id,
+            status: guarda.status,
+        };
+        fetch('http://localhost:4000/user/changeStatus', {
+            cache: 'no-cache',
+            method: 'POST',
+            body: JSON.stringify(data),
+            headers: {
+                'Content-Type': 'application/json'
+            }
+        })
+            .then(
+                function (response) {
+                    if (response.status != 201)
+                        console.log('Ocurrió un error con el servicio: ' + response.status);
+                    else
+                        return response.json();
+                }
+            )
+            .then(
+                function (response) {
+                    setChangeStatusGuardDialog(false);
+                    toast.current.show({
+                        severity: 'success',
+                        summary: 'Éxito',
+                        detail: 'Guarda de Seguridad Actualizado',
+                        life: 3000,
+                    });
+                }
+            )
+            .catch(
+                err => console.log('Ocurrió un error con el fetch', err)
+            );
     }
 
-    const hideDeleteGuardasDialog = () => {
-        setDeleteGuardasDialog(false);
-    }
-
-    const confirmDeleteGuarda = (guarda) => {
-        setGuarda(guarda);
-        setDeleteGuardaDialog(true);
-    }
-
-    const confirmDeleteSelected = () => {
-        setDeleteGuardasDialog(true);
-    }
 
     const deleteGuarda = () => {
 
@@ -166,10 +215,70 @@ const GuardasSeguridad = () => {
         toast.current.show({ severity: 'success', summary: 'Éxito', detail: 'Administradores del Sistema Eliminados', life: 3000 });
     }
 
-    const actionsAdmin = (rowData) => {
+    const hideDeleteGuardaDialog = () => {
+        setDeleteGuardaDialog(false);
+    }
+
+    const hideDeleteGuardasDialog = () => {
+        setDeleteGuardasDialog(false);
+    }
+
+    const confirmDeleteGuarda = (guarda) => {
+        setGuarda(guarda);
+        setDeleteGuardaDialog(true);
+    }
+
+    const confirmDeleteSelected = () => {
+        setDeleteGuardasDialog(true);
+    }
+
+    const hideChangeStatusGuardDialog = () => {
+        setChangeStatusGuardDialog(false);
+    };
+
+    const confirmChangeStatusGuard = (guard) => {
+        setGuarda(guard);
+        setChangeStatusGuardDialog(true);
+    };
+
+    const hideGuardDialog = () => {
+        setSubmitted(false);
+        setGuardDialog(false);
+    };
+
+    const infoGuard = (guard) => {
+        setGuarda(guard);
+        setGuardDialog(true);
+    };
+
+
+    const actionsGuard = (rowData) => {
+        let icono = '';
+        let text = '';
+        if (rowData.status == '0') {
+            icono = "pi pi-eye";
+            text = "Activar Guarda de Seguridad"
+        } else if (rowData.status == '1') {
+            icono = "pi pi-eye-slash";
+            text = "Inactivar Guarda de Seguridad"
+
+        }
         return (
             <div className="actions">
-                <Button icon="pi pi-trash" className="p-button-rounded p-button-danger mt-2" onClick={() => confirmDeleteGuarda(rowData)} />
+                <Button
+                    icon="pi pi-exclamation-circle"
+                    className="p-button-rounded p-button-info mt-2 mx-2"
+                    onClick={() => infoGuard(rowData)}
+                />
+                <Button
+                    icon={`${icono}`}
+                    className="p-button-rounded p-button-warning mt-2 mx-2"
+                    onClick={() => confirmChangeStatusGuard(rowData)}
+                    title={`${text}`}
+                />
+                <Button icon="pi pi-trash"
+                    className="p-button-rounded p-button-danger mt-2 mx-2"
+                    onClick={() => confirmDeleteGuarda(rowData)} />
             </div>
         );
     }
@@ -178,7 +287,11 @@ const GuardasSeguridad = () => {
         return (
             <React.Fragment>
                 <div className="my-2">
-                    <Button label="Eliminar" icon="pi pi-trash" className="p-button-danger" onClick={confirmDeleteSelected} disabled={!selectedGuardas || !selectedGuardas.length} />
+                    <Button label="Eliminar"
+                        icon="pi pi-trash"
+                        className="p-button-danger"
+                        onClick={confirmDeleteSelected}
+                        disabled={!selectedGuardas || !selectedGuardas.length} />
                 </div>
             </React.Fragment>
         )
@@ -187,7 +300,9 @@ const GuardasSeguridad = () => {
     const rightToolbarTemplate = () => {
         return (
             <React.Fragment>
-                <Button label="Exportar" icon="pi pi-upload" className="p-button-help" />
+                <Button label="Exportar"
+                    icon="pi pi-upload"
+                    className="p-button-help" />
             </React.Fragment>
         )
     }
@@ -205,17 +320,47 @@ const GuardasSeguridad = () => {
     const deleteAdminSystemDialogFooter = (
         <>
             <Button label="No" icon="pi pi-times" className="p-button-text" onClick={hideDeleteGuardasDialog} />
-            <Button label="Yes" icon="pi pi-check" className="p-button-text" onClick={deleteGuarda} />
+            <Button label="Sí" icon="pi pi-check" className="p-button-text" onClick={deleteGuarda} />
         </>
     );
 
     const deleteAdminsSystemDialogFooter = (
         <>
             <Button label="No" icon="pi pi-times" className="p-button-text" onClick={hideDeleteGuardasDialog} />
-            <Button label="Yes" icon="pi pi-check" className="p-button-text" onClick={deleteSelectedGuardas} />
+            <Button label="Sí" icon="pi pi-check" className="p-button-text" onClick={deleteSelectedGuardas} />
         </>
     );
 
+    const changeStatusGuardDialogFooter = (
+        <>
+            <Button
+                label="No"
+                icon="pi pi-times"
+                className="p-button-text"
+                onClick={hideChangeStatusGuardDialog}
+            />
+            <Button
+                label="Sí"
+                icon="pi pi-check"
+                className="p-button-text"
+                onClick={cambiarStatusUser}
+            />
+        </>
+    );
+
+    const guardDialogFooter = (
+        <>
+            <Button
+                label="Cerrar"
+                icon="pi pi-times"
+                className="p-button-text"
+                onClick={hideGuardDialog}
+            />
+
+        </>
+    );
+
+
     const headerName = (
         <>
             <p>{' '}
@@ -261,6 +406,26 @@ const GuardasSeguridad = () => {
         </>
     )
 
+    const headerStatus = (
+        <>
+            <p> {' '}
+                <FontAwesomeIcon icon={faCircleQuestion} style={{ color: "#D7A86E" }} />{' '}
+                Estado
+            </p>
+        </>
+    )
+
+    const statusBodyTemplate = (rowData) => {
+        return (
+            <>
+                <span
+                    className={`status status-${rowData.status}`}
+                >
+                    {rowData.status_text}
+                </span>
+            </>
+        );
+    };
 
     return (
         <div className="grid">
@@ -281,8 +446,85 @@ const GuardasSeguridad = () => {
                         </Column>
                         <Column field="email" sortable header={headerEmail} style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }}></Column>
                         <Column field="phone" header={headerPhone} style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }}></Column>
-                        <Column style={{ flexGrow: 1, flexBasis: '130px', minWidth: '130px' }} body={actionsAdmin}></Column>
+                        <Column
+                            field="status"
+                            sortable
+                            header={headerStatus}
+                            body={statusBodyTemplate}
+                            style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }}>
+                        </Column>
+                        <Column style={{ flexGrow: 1, flexBasis: '80px', minWidth: '80px' }} body={actionsGuard}></Column>
                     </DataTable>
+                    <Dialog
+                        visible={guardDialog}
+                        style={{ width: '650px' }}
+                        header="Información del Guarda de Seguridad"
+                        modal
+                        className="p-fluid"
+                        footer={guardDialogFooter}
+                        onHide={hideGuardDialog}>
+                        <div className='container text-center'>
+                            <div className='row my-4'>
+                                <div className=" col-4 md:col-4">
+                                    <p>Nombre</p>
+                                    <div className="p-0 col-2  md:col-2" style={{ margin: '0 auto' }}>
+                                        <div className="p-inputgroup align-items-center justify-content-evenly">
+                                            <i className="pi pi-user icon-khaki"></i>
+                                            <p>{guarda.name}</p>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div className=" col-4 md:col-4">
+                                    <p>Apellido(s)</p>
+                                    <div className="p-0 col-6  md:col-6" style={{ margin: '0 auto' }}>
+                                        <div className="p-inputgroup align-items-center justify-content-evenly">
+                                            <i className="pi pi-user icon-khaki"></i>
+                                            <p>{guarda.last_name}</p>
+                                        </div>
+
+                                    </div>
+                                </div>
+                                <div className=" col-4 col-md-4 md:col-4">
+                                    <p>Identificación</p>
+                                    <div className="p-0 col-10 md:col-10" style={{ margin: '0 auto' }}>
+                                        <div className="p-inputgroup align-items-center justify-content-evenly">
+                                            <i className="pi pi-id-card icon-khaki"></i>
+                                            <p>{guarda.dni}</p>
+                                        </div>
+
+                                    </div>
+                                </div>
+                            </div>
+                            <div className='row my-5 justify-content-center'>
+                                
+
+
+                            </div>
+                            <div className='row my-5 justify-content-center'>
+                                <div className=" col-4 md:col-4">
+                                    <p>Teléfono</p>
+                                    <div className="p-0 col-10 md:col-10">
+                                        <div className="p-inputgroup align-items-center justify-content-evenly">
+                                            <i className="pi pi-phone icon-khaki"></i>
+                                            <p>{guarda.phone}</p>
+                                        </div>
+
+                                    </div>
+                                </div>
+                                <div className=" col-6 md:col-6">
+                                    <p>Correo Electrónico</p>
+                                    <div className="p-0 col-10  md:col-10" style={{ margin: '0 auto' }}>
+                                        <div className="p-inputgroup align-items-center justify-content-evenly">
+                                            <i className="pi pi-envelope icon-khaki"></i>
+                                            <p>{guarda.email}</p>
+                                        </div>
+
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                    </Dialog>
                     <Dialog visible={deleteGuardaDialog} style={{ width: '450px' }} header="Confirmar" modal footer={deleteAdminSystemDialogFooter} onHide={hideDeleteGuardaDialog}>
                         <div className="flex align-items-center justify-content-center">
                             <i className="pi pi-exclamation-triangle mr-3" style={{ fontSize: '2rem' }} />
@@ -292,7 +534,27 @@ const GuardasSeguridad = () => {
                     <Dialog visible={deleteGuardasDialog} style={{ width: '450px' }} header="Confirmar" modal footer={deleteAdminsSystemDialogFooter} onHide={hideDeleteGuardasDialog}>
                         <div className="flex align-items-center justify-content-center">
                             <i className="pi pi-exclamation-triangle mr-3" style={{ fontSize: '2rem' }} />
-                            {selectedGuardas && <span>¿Está seguro eliminar los adminsitradores del sistema seleccionados?</span>}
+                            {selectedGuardas && <span>¿Está seguro eliminar los guardas de seguridad seleccionados?</span>}
+                        </div>
+                    </Dialog>
+                    <Dialog
+                        visible={changeStatusGuardDialog}
+                        style={{ width: '450px' }}
+                        header="Confirmar"
+                        modal
+                        footer={changeStatusGuardDialogFooter}
+                        onHide={hideChangeStatusGuardDialog}
+                    >
+                        <div className="flex align-items-center justify-content-center">
+                            <i
+                                className="pi pi-exclamation-triangle mr-3"
+                                style={{ fontSize: '2rem' }}
+                            />
+                            {guarda && (
+                                <span>
+                                    ¿Estás seguro que desea cambiar estado a <b>{guarda.name}</b>?
+                                </span>
+                            )}
                         </div>
                     </Dialog>
                 </div>
@@ -306,12 +568,12 @@ const GuardasSeguridad = () => {
                             <InputText id="nombre" type="text" />
                         </div>
                         <div className="field col-12 md:col-6">
-                            <label htmlFor="apellidos">Apellidos</label>
+                            <label htmlFor="apellidos">Apellido(s)</label>
                             <InputText id="apellidos" type="text" />
                         </div>
                         <div className="field col-12 md:col-6">
                             <label htmlFor="correo_electronico">Correo electrónico</label>
-                            <InputText id="correo_electronico" type="text" />
+                            <InputText id="correo_electronico" type="email" />
                         </div>
                         <div className="field col-12 md:col-6">
                             <label htmlFor="identificacion">Identificación</label>
@@ -319,7 +581,7 @@ const GuardasSeguridad = () => {
                         </div>
                         <div className="field col-12">
                             <label htmlFor="telefono">Teléfono</label>
-                            <InputText id="telefono" type="number" rows="4" />
+                            <InputText id="telefono" type="tel" rows="4" />
                         </div>
                         <Button label="Registrar" onClick={registrarGuarda}></Button>
                     </div>

web-ui/web-react/src/components/Inquilinos.js

@@ -331,14 +331,14 @@ const Inquilinos = () => {
   const deleteTenantDialogFooter = (
     <>
       <Button label="No" icon="pi pi-times" className="p-button-text" onClick={hideDeleteTenantDialog} />
-      <Button label="Yes" icon="pi pi-check" className="p-button-text" onClick={deleteTenant} />
+      <Button label="Sí" icon="pi pi-check" className="p-button-text" onClick={deleteTenant} />
     </>
   );
 
   const deleteTenantsDialogFooter = (
     <>
       <Button label="No" icon="pi pi-times" className="p-button-text" onClick={hideDeleteTenantsDialog} />
-      <Button label="Yes" icon="pi pi-check" className="p-button-text" onClick={deleteSelectedTenants} />
+      <Button label="Sí" icon="pi pi-check" className="p-button-text" onClick={deleteSelectedTenants} />
     </>
   );
 
@@ -352,7 +352,7 @@ const Inquilinos = () => {
         onClick={hideChangeStatusTenantDialog}
       />
       <Button
-        label="Yes"
+        label="Sí"
         icon="pi pi-check"
         className="p-button-text"
         onClick={cambiarStatusUser}
@@ -457,7 +457,7 @@ const Inquilinos = () => {
           <Dialog visible={deleteTenantsDialog} style={{ width: '450px' }} header="Confirmar" modal footer={deleteTenantsDialogFooter} onHide={hideDeleteTenantsDialog}>
             <div className="flex align-items-center justify-content-center">
               <i className="pi pi-exclamation-triangle mr-3" style={{ fontSize: '2rem' }} />
-              {selectedTentants && <span>¿Está seguro eliminar los Inquilinos seleccionados?</span>}
+              {selectedTentants && <span>¿Está seguro eliminar los inquilinos seleccionados?</span>}
             </div>
           </Dialog>
           <Dialog
@@ -491,7 +491,7 @@ const Inquilinos = () => {
               <InputText type="text" className="form-control" id="nombre" />
             </div>
             <div className="field col-12 md:col-6">
-              <label htmlFor="apellidos">Apellidos</label>
+              <label htmlFor="apellidos">Apellido(s)</label>
               <InputText type="text" className="form-control" id="apellidos" />
             </div>
             <div className="field col-12 md:col-6">