format

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

@@ -1,24 +1,22 @@
-import { Button } from 'primereact/button';
+import { Button } from 'primereact/button'
 import { InputText } from 'primereact/inputtext'
-import React, { useEffect, useState, useRef } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
-import { DataTable } from 'primereact/datatable';
+import { DataTable } from 'primereact/datatable'
-import { Column } from 'primereact/column';
+import { Column } from 'primereact/column'
-import { Dropdown } from 'primereact/dropdown';
+import { Dropdown } from 'primereact/dropdown'
-import { Toast } from 'primereact/toast';
+import { Toast } from 'primereact/toast'
-import { Dialog } from 'primereact/dialog';
+import { Dialog } from 'primereact/dialog'
-import { Toolbar } from 'primereact/toolbar';
+import { Toolbar } from 'primereact/toolbar'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faUserAlt } from '@fortawesome/free-solid-svg-icons';
+import { faUserAlt } from '@fortawesome/free-solid-svg-icons'
-import { faPhoneAlt } from '@fortawesome/free-solid-svg-icons';
+import { faPhoneAlt } from '@fortawesome/free-solid-svg-icons'
-import { faAt } from '@fortawesome/free-solid-svg-icons';
+import { faAt } from '@fortawesome/free-solid-svg-icons'
-import { faIdCardAlt } from '@fortawesome/free-solid-svg-icons';
+import { faIdCardAlt } from '@fortawesome/free-solid-svg-icons'
-import { faHashtag } from '@fortawesome/free-solid-svg-icons';
+import { faHashtag } from '@fortawesome/free-solid-svg-icons'
-import { faCircleQuestion } from '@fortawesome/free-solid-svg-icons';
+import { faCircleQuestion } from '@fortawesome/free-solid-svg-icons'
-import { useCookies } from "react-cookie";
+import { useCookies } from 'react-cookie'
-
 
 const Inquilinos = () => {
-
   let emptyTenant = {
     _id: null,
     dni: '',
@@ -34,66 +32,65 @@ const Inquilinos = () => {
     date_entry: new Date(),
     status: '1',
     status_text: '',
-  };
+  }
 
-  const [tenants, setTenants] = useState([]);
+  const [tenants, setTenants] = useState([])
-  const [tenant, setTenant] = useState(emptyTenant);
+  const [tenant, setTenant] = useState(emptyTenant)
-  const [selectedTentants, setSelectedTenants] = useState(null);
+  const [selectedTentants, setSelectedTenants] = useState(null)
-  const [globalFilter, setGlobalFilter] = useState(null);
+  const [globalFilter, setGlobalFilter] = useState(null)
-  const [deleteTenantDialog, setDeleteTenantDialog] = useState(false);
+  const [deleteTenantDialog, setDeleteTenantDialog] = useState(false)
-  const [deleteTenantsDialog, setDeleteTenantsDialog,] = useState(false);
+  const [deleteTenantsDialog, setDeleteTenantsDialog] = useState(false)
-  const [communitiesList, setCommunitiesList] = useState([]);
+  const [communitiesList, setCommunitiesList] = useState([])
-  const [communityId, setCommunityId] = useState(null);
+  const [communityId, setCommunityId] = useState(null)
-  const [submitted, setSubmitted] = useState(false);
+  const [submitted, setSubmitted] = useState(false)
-  const toast = useRef(null);
+  const toast = useRef(null)
-  const dt = useRef(null);
+  const dt = useRef(null)
-
-  const [cookies, setCookie] = useCookies();
-  const [changeStatusTenantDialog, setChangeStatusTenantDialog] = useState(false);
 
+  const [cookies, setCookie] = useCookies()
+  const [changeStatusTenantDialog, setChangeStatusTenantDialog] =
+    useState(false)
 
   async function tenantsList() {
-    await fetch(`http://localhost:4000/user/findTenants/${cookies.community_id}`, { method: 'GET' })
+    await fetch(
+      `http://localhost:4000/user/findTenants/${cookies.community_id}`,
+      { method: 'GET' },
+    )
       .then((response) => response.json())
-      .then(data => data.message)
+      .then((data) => data.message)
-      .then(data => {
+      .then((data) => {
-        data = data.filter(
+        data = data.filter((val) => val.status != -1)
-          (val) => val.status != -1,
-        )
         data.map((item) => {
           if (item.status == '1') {
-            item.status_text = 'Activo';
+            item.status_text = 'Activo'
           } else if (item.status == '0') {
-            item.status_text = 'Inactivo';
+            item.status_text = 'Inactivo'
           }
 
-
+          if (item.number_house == '') {
-          if (item.number_house == "") {
+            item.number_house = 'Sin vivienda asignada'
-            item.number_house = "Sin vivienda asignada";
           }
         })
         setTenants(data)
-      });
+      })
   }
 
-
   async function getCommunites() {
-    let response = await fetch('http://localhost:4000/community/allCommunities', { method: 'GET' });
+    let response = await fetch(
-    let resList = await response.json();
+      'http://localhost:4000/community/allCommunities',
-    let list = await resList.message;
+      { method: 'GET' },
-    list = await list.filter(
-      (val) => val.status != -1,
     )
-    setCommunitiesList(await list);
+    let resList = await response.json()
+    let list = await resList.message
+    list = await list.filter((val) => val.status != -1)
+    setCommunitiesList(await list)
   }
 
   useEffect(() => {
-    tenantsList();
+    tenantsList()
   }, [])
 
-
   useEffect(() => {
-    getCommunites();
+    getCommunites()
   }, [])
 
   const cList = communitiesList.map((item) => ({
@@ -104,20 +101,20 @@ const Inquilinos = () => {
   function registrarInquilino() {
     let data = {
       _id: null,
-      dni: "",
+      dni: '',
-      name: "",
+      name: '',
-      last_name: "",
+      last_name: '',
-      email: document.getElementById("correo_electronico").value,
+      email: document.getElementById('correo_electronico').value,
-      phone: "",
+      phone: '',
-      password: "",
+      password: '',
-      community_id: document.getElementById("numero_vivienda").value,
+      community_id: document.getElementById('numero_vivienda').value,
-      community_name: "",
+      community_name: '',
-      number_house: "Sin número de vivienda",
+      number_house: 'Sin número de vivienda',
       date_entry: new Date(),
-      user_type: "3",
+      user_type: '3',
-      status: "1",
+      status: '1',
-      status_text: "",
+      status_text: '',
-    };
+    }
 
     fetch('http://localhost:3000/api/createUser', {
       method: 'POST',
@@ -128,140 +125,141 @@ const Inquilinos = () => {
       },
     }).then((response) => {
       if (response.ok) {
-        alert('Inquilino registrado correctamente');
+        alert('Inquilino registrado correctamente')
       } else {
-        alert('Error al registrar inquilino');
+        alert('Error al registrar inquilino')
       }
-    });
+    })
   }
 
   const deleteTenant = () => {
-    let _tenants = tenants.filter(
+    let _tenants = tenants.filter((val) => val._id !== tenant._id)
-      (val) => val._id !== tenant._id,
+    setTenants(_tenants)
-    );
+    setDeleteTenantDialog(false)
-    setTenants(_tenants);
+    setTenant(emptyTenant)
-    setDeleteTenantDialog(false);
-    setTenant(emptyTenant);
     toast.current.show({
       severity: 'success',
       summary: 'Inquilino Eliminado',
       life: 3000,
-    });
+    })
-  };
+  }
 
   const deleteSelectedTenants = () => {
-    let _tenants = tenants.filter(
+    let _tenants = tenants.filter((val) => !selectedTentants.includes(val))
-      (val) => !selectedTentants.includes(val),
+    setTenants(_tenants)
-    );
+    setDeleteTenantsDialog(false)
-    setTenants(_tenants);
+    setSelectedTenants(null)
-    setDeleteTenantsDialog(false);
-    setSelectedTenants(null);
     toast.current.show({
       severity: 'success',
       summary: 'Éxito',
       detail: 'Inquilinos Eliminados',
       life: 3000,
-    });
+    })
-  };
+  }
 
   const cambiarStatusUser = () => {
     if (tenant.status == '1') {
-      tenant.status = '0';
+      tenant.status = '0'
-      tenant.status_text = 'Inactivo';
+      tenant.status_text = 'Inactivo'
-
     } else if (tenant.status == '0') {
-      tenant.status = '1';
+      tenant.status = '1'
-      tenant.status_text = 'Activo';
+      tenant.status_text = 'Activo'
     }
     var data = {
       id: tenant._id,
       status: tenant.status,
-    };
+    }
     fetch('http://localhost:4000/user/changeStatus', {
       cache: 'no-cache',
       method: 'POST',
       body: JSON.stringify(data),
       headers: {
-        'Content-Type': 'application/json'
+        'Content-Type': 'application/json',
-      }
+      },
     })
       .then((response) => {
-        if(response.status != 201)
+        if (response.status != 201) {
-          console.log('Ocurrió un error con el servicio: ' + response.status);
+          console.log('Ocurrió un error con el servicio: ' + response.status)
-        else
+        } else {
-          return response.json();
+          return response.json()
+        }
       })
       .then((response) => {
-        setChangeStatusTenantDialog(false);
+        setChangeStatusTenantDialog(false)
         toast.current.show({
           severity: 'success',
           summary: 'Éxito',
           detail: 'Inquilino Actualizado',
           life: 3000,
-        });
+        })
       })
-      .catch(
+      .catch((err) => console.log('Ocurrió un error con el fetch', err))
-        err => console.log('Ocurrió un error con el fetch', err)
-      );
   }
 
   const hideDeleteTenantDialog = () => {
-    setDeleteTenantDialog(false);
+    setDeleteTenantDialog(false)
   }
 
   const hideDeleteTenantsDialog = () => {
-    setDeleteTenantsDialog(false);
+    setDeleteTenantsDialog(false)
   }
 
   const confirmDeleteTenant = (tenant) => {
-    setTenant(tenant);
+    setTenant(tenant)
-    setDeleteTenantDialog(true);
+    setDeleteTenantDialog(true)
   }
 
   const confirmDeleteSelected = () => {
-    setDeleteTenantsDialog(true);
+    setDeleteTenantsDialog(true)
-  };
+  }
 
   const hideChangeStatusTenantDialog = () => {
-    setChangeStatusTenantDialog(false);
+    setChangeStatusTenantDialog(false)
-  };
+  }
 
   const confirmChangeStatusTenant = (tenant) => {
-    setTenant(tenant);
+    setTenant(tenant)
-    setChangeStatusTenantDialog(true);
+    setChangeStatusTenantDialog(true)
-  };
+  }
 
   const actionsTenant = (rowData) => {
-    let icono = '';
+    let icono = ''
-    let text = '';
+    let text = ''
     if (rowData.status == '0') {
-      icono = "pi pi-eye";
+      icono = 'pi pi-eye'
-      text = "Activar Inquilino"
+      text = 'Activar Inquilino'
     } else if (rowData.status == '1') {
-      icono = "pi pi-eye-slash";
+      icono = 'pi pi-eye-slash'
-      text = "Inactivar Inquilino"
+      text = 'Inactivar Inquilino'
-
     }
     return (
-      <div className="actions">
+      <div className='actions'>
-         <Button
+        <Button
           icon={`${icono}`}
-          className="p-button-rounded p-button-warning mt-2 mx-2"
+          className='p-button-rounded p-button-warning mt-2 mx-2'
           onClick={() => confirmChangeStatusTenant(rowData)}
           title={`${text}`}
         />
-        <Button icon="pi pi-trash" 
+        <Button
-        className="p-button-rounded p-button-danger mt-2 mx-2" 
+          icon='pi pi-trash'
-        onClick={() => confirmDeleteTenant(rowData)} />
+          className='p-button-rounded p-button-danger mt-2 mx-2'
+          onClick={() => confirmDeleteTenant(rowData)}
+        />
       </div>
-    );
+    )
   }
 
   const leftToolbarTemplate = () => {
     return (
       <React.Fragment>
-        <div className="my-2">
+        <div className='my-2'>
-          <Button label="Eliminar" icon="pi pi-trash" className="p-button-danger" onClick={confirmDeleteSelected} disabled={!selectedTentants || !selectedTentants.length} />
+          <Button
+            label='Eliminar'
+            icon='pi pi-trash'
+            className='p-button-danger'
+            onClick={confirmDeleteSelected}
+            disabled={!selectedTentants || !selectedTentants.length}
+          />
         </div>
       </React.Fragment>
     )
@@ -270,95 +268,141 @@ const Inquilinos = () => {
   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>
     )
   }
 
   const header = (
-    <div className="flex flex-column md:flex-row md:justify-content-between md:align-items-center">
+    <div className='flex flex-column md:flex-row md:justify-content-between md:align-items-center'>
-      <h5 className="m-0">Inquilinos</h5>
+      <h5 className='m-0'>Inquilinos</h5>
-      <span className="block mt-2 md:mt-0 p-input-icon-left">
+      <span className='block mt-2 md:mt-0 p-input-icon-left'>
-        <i className="pi pi-search" />
+        <i className='pi pi-search' />
-        <InputText type="search" onInput={(e) => setGlobalFilter(e.target.value)} placeholder="Buscar..." />
+        <InputText
+          type='search'
+          onInput={(e) => setGlobalFilter(e.target.value)}
+          placeholder='Buscar...'
+        />
       </span>
     </div>
-  );
+  )
 
   const deleteTenantDialogFooter = (
     <>
-      <Button label="No" icon="pi pi-times" className="p-button-text" onClick={hideDeleteTenantDialog} />
+      <Button
-      <Button label="Sí" icon="pi pi-check" className="p-button-text" onClick={deleteTenant} />
+        label='No'
+        icon='pi pi-times'
+        className='p-button-text'
+        onClick={hideDeleteTenantDialog}
+      />
+      <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
-      <Button label="Sí" icon="pi pi-check" className="p-button-text" onClick={deleteSelectedTenants} />
+        label='No'
+        icon='pi pi-times'
+        className='p-button-text'
+        onClick={hideDeleteTenantsDialog}
+      />
+      <Button
+        label='Sí'
+        icon='pi pi-check'
+        className='p-button-text'
+        onClick={deleteSelectedTenants}
+      />
     </>
-  );
+  )
-
 
   const changeStatusTenantDialogFooter = (
     <>
       <Button
-        label="No"
+        label='No'
-        icon="pi pi-times"
+        icon='pi pi-times'
-        className="p-button-text"
+        className='p-button-text'
         onClick={hideChangeStatusTenantDialog}
       />
       <Button
-        label="Sí"
+        label='Sí'
-        icon="pi pi-check"
+        icon='pi pi-check'
-        className="p-button-text"
+        className='p-button-text'
         onClick={cambiarStatusUser}
       />
     </>
-  );
+  )
-  
+
   const headerName = (
     <>
-      <p> <FontAwesomeIcon icon={faUserAlt} style={{ color: "#C08135" }} />  Nombre</p>
+      <p>
+        <FontAwesomeIcon icon={faUserAlt} style={{ color: '#C08135' }} /> Nombre
+      </p>
     </>
   )
 
   const headerLastName = (
     <>
-      <p> <FontAwesomeIcon icon={faUserAlt} style={{ color: "#D7A86E" }} />    Apellidos</p>
+      <p>
+        <FontAwesomeIcon icon={faUserAlt} style={{ color: '#D7A86E' }} />{' '}
+        Apellidos
+      </p>
     </>
   )
 
   const headerDNI = (
     <>
-      <p> <FontAwesomeIcon icon={faIdCardAlt} style={{ color: "#C08135" }} />    Identificación</p>
+      <p>
+        <FontAwesomeIcon icon={faIdCardAlt} style={{ color: '#C08135' }} />{' '}
+        Identificación
+      </p>
     </>
   )
 
   const headerEmail = (
     <>
-      <p> <FontAwesomeIcon icon={faAt} style={{ color: "#D7A86E" }} />    Correo Electrónico</p>
+      <p>
+        <FontAwesomeIcon icon={faAt} style={{ color: '#D7A86E' }} /> Correo
+        Electrónico
+      </p>
     </>
   )
 
   const headerPhone = (
     <>
-      <p> <FontAwesomeIcon icon={faPhoneAlt} style={{ color: "#C08135" }} />   Teléfono</p>
+      <p>
+        <FontAwesomeIcon icon={faPhoneAlt} style={{ color: '#C08135' }} />{' '}
+        Teléfono
+      </p>
     </>
   )
 
-
-
   const headerNumberHouse = (
     <>
-      <p> <FontAwesomeIcon icon={faHashtag} style={{ color: "#C08135" }} />   Número de vivienda</p>
+      <p>
+        <FontAwesomeIcon icon={faHashtag} style={{ color: '#C08135' }} /> Número
+        de vivienda
+      </p>
     </>
   )
 
   const headerStatus = (
     <>
-      <p> {' '}
+      <p>
-        <FontAwesomeIcon icon={faCircleQuestion} style={{ color: "#D7A86E" }} />{' '}
+        {' '}
+        <FontAwesomeIcon
+          icon={faCircleQuestion}
+          style={{ color: '#D7A86E' }}
+        />{' '}
         Estado
       </p>
     </>
@@ -367,67 +411,179 @@ const Inquilinos = () => {
   const statusBodyTemplate = (rowData) => {
     return (
       <>
-        <span
+        <span className={`status status-${rowData.status}`}>
-          className={`status status-${rowData.status}`}
-        >
           {rowData.status_text}
         </span>
       </>
-    );
+    )
-  };
+  }
 
   return (
-    <div className="grid">
+    <div className='grid'>
-      <div className="col-12">
+      <div className='col-12'>
         <Toast ref={toast} />
-        <div className="card">
+        <div className='card'>
-          <Toolbar className="mb-4" left={leftToolbarTemplate} right={rightToolbarTemplate}></Toolbar>
+          <Toolbar
-          <DataTable ref={dt} value={tenants} dataKey="_id" paginator rows={5} selection={selectedTentants} onSelectionChange={(e) => setSelectedTenants(e.value)}
+            className='mb-4'
-            scrollable scrollHeight="400px" scrollDirection="both" header={header}
+            left={leftToolbarTemplate}
-            rowsPerPageOptions={[5, 10, 25]} className="datatable-responsive mt-3"
+            right={rightToolbarTemplate}
-            paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
+          ></Toolbar>
-            currentPageReportTemplate="Mostrando {first} a {last} de {totalRecords} inquilinos"
+          <DataTable
-            globalFilter={globalFilter} emptyMessage="No hay inquilinos en esta comunidad registrados.">
+            ref={dt}
-            <Column selectionMode="multiple" headerStyle={{ width: '3rem' }}></Column>
+            value={tenants}
-            <Column field="name" sortable header={headerName} style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }}></Column>
+            dataKey='_id'
-            <Column field="last_name" sortable header={headerLastName} style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }} alignFrozen="left"></Column>
+            paginator
-            <Column field="dni" sortable header={headerDNI} style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }}>
+            rows={5}
-            </Column>
+            selection={selectedTentants}
-            <Column field="email" sortable header={headerEmail} style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }}></Column>
+            onSelectionChange={(e) => setSelectedTenants(e.value)}
-            <Column field="phone" header={headerPhone} style={{ flexGrow: 1, flexBasis: '80px', minWidth: '80px', wordBreak: 'break-word' }}></Column>
+            scrollable
-            <Column field="number_house" sortable header={headerNumberHouse} style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word', justifyContent: 'center' }}></Column>
+            scrollHeight='400px'
+            scrollDirection='both'
+            header={header}
+            rowsPerPageOptions={[5, 10, 25]}
+            className='datatable-responsive mt-3'
+            paginatorTemplate='FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown'
+            currentPageReportTemplate='Mostrando {first} a {last} de {totalRecords} inquilinos'
+            globalFilter={globalFilter}
+            emptyMessage='No hay inquilinos en esta comunidad registrados.'
+          >
             <Column
-              field="status"
+              selectionMode='multiple'
+              headerStyle={{ width: '3rem' }}
+            ></Column>
+            <Column
+              field='name'
+              sortable
+              header={headerName}
+              style={{
+                flexGrow: 1,
+                flexBasis: '160px',
+                minWidth: '160px',
+                wordBreak: 'break-word',
+              }}
+            ></Column>
+            <Column
+              field='last_name'
+              sortable
+              header={headerLastName}
+              style={{
+                flexGrow: 1,
+                flexBasis: '160px',
+                minWidth: '160px',
+                wordBreak: 'break-word',
+              }}
+              alignFrozen='left'
+            ></Column>
+            <Column
+              field='dni'
+              sortable
+              header={headerDNI}
+              style={{
+                flexGrow: 1,
+                flexBasis: '160px',
+                minWidth: '160px',
+                wordBreak: 'break-word',
+              }}
+            ></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: '80px',
+                minWidth: '80px',
+                wordBreak: 'break-word',
+              }}
+            ></Column>
+            <Column
+              field='number_house'
+              sortable
+              header={headerNumberHouse}
+              style={{
+                flexGrow: 1,
+                flexBasis: '160px',
+                minWidth: '160px',
+                wordBreak: 'break-word',
+                justifyContent: 'center',
+              }}
+            ></Column>
+            <Column
+              field='status'
               sortable
               header={headerStatus}
               body={statusBodyTemplate}
-              style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }}>
+              style={{
-            </Column>
+                flexGrow: 1,
-            <Column style={{ flexGrow: 1, flexBasis: '80px', minWidth: '80px' }} body={actionsTenant}></Column>
+                flexBasis: '160px',
+                minWidth: '160px',
+                wordBreak: 'break-word',
+              }}
+            ></Column>
+            <Column
+              style={{ flexGrow: 1, flexBasis: '80px', minWidth: '80px' }}
+              body={actionsTenant}
+            ></Column>
           </DataTable>
-          <Dialog visible={deleteTenantDialog} style={{ width: '450px' }} header="Confirmar" modal footer={deleteTenantDialogFooter} onHide={hideDeleteTenantDialog}>
+          <Dialog
-            <div className="flex align-items-center justify-content-center">
+            visible={deleteTenantDialog}
-              <i className="pi pi-exclamation-triangle mr-3" style={{ fontSize: '2rem' }} />
+            style={{ width: '450px' }}
-              {tenant && <span>¿Estás seguro que desea eliminar a <b>{tenant.name}</b>?</span>}
+            header='Confirmar'
+            modal
+            footer={deleteTenantDialogFooter}
+            onHide={hideDeleteTenantDialog}
+          >
+            <div className='flex align-items-center justify-content-center'>
+              <i
+                className='pi pi-exclamation-triangle mr-3'
+                style={{ fontSize: '2rem' }}
+              />
+              {tenant && (
+                <span>
+                  ¿Estás seguro que desea eliminar a <b>{tenant.name}</b>?
+                </span>
+              )}
             </div>
           </Dialog>
-          <Dialog visible={deleteTenantsDialog} style={{ width: '450px' }} header="Confirmar" modal footer={deleteTenantsDialogFooter} onHide={hideDeleteTenantsDialog}>
+          <Dialog
-            <div className="flex align-items-center justify-content-center">
+            visible={deleteTenantsDialog}
-              <i className="pi pi-exclamation-triangle mr-3" style={{ fontSize: '2rem' }} />
+            style={{ width: '450px' }}
-              {selectedTentants && <span>¿Está seguro eliminar los inquilinos seleccionados?</span>}
+            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>
+              )}
             </div>
           </Dialog>
           <Dialog
             visible={changeStatusTenantDialog}
             style={{ width: '450px' }}
-            header="Confirmar"
+            header='Confirmar'
             modal
             footer={changeStatusTenantDialogFooter}
             onHide={hideChangeStatusTenantDialog}
           >
-            <div className="flex align-items-center justify-content-center">
+            <div className='flex align-items-center justify-content-center'>
               <i
-                className="pi pi-exclamation-triangle mr-3"
+                className='pi pi-exclamation-triangle mr-3'
                 style={{ fontSize: '2rem' }}
               />
               {tenant && (
@@ -439,28 +595,32 @@ const Inquilinos = () => {
           </Dialog>
         </div>
       </div>
-      <div className="col-12">
+      <div className='col-12'>
-        <div className="card">
+        <div className='card'>
-          <h5 className="card-header">Registrar Inquilino</h5>
+          <h5 className='card-header'>Registrar Inquilino</h5>
-          <div className="p-fluid formgrid grid">
+          <div className='p-fluid formgrid grid'>
-            <div className="field col-12 md:col-6">
+            <div className='field col-12 md:col-6'>
-              <label htmlFor="correo_electronico">Correo electrónico</label>
+              <label htmlFor='correo_electronico'>Correo electrónico</label>
               <InputText
-                type="email"
+                type='email'
-                className="form-control"
+                className='form-control'
-                id="correo_electronico"
+                id='correo_electronico'
               />
             </div>
-            <div className="field col-12 md:col-6">
+            <div className='field col-12 md:col-6'>
-              <label htmlFor="numero_vivienda">Número de Vivienda</label>
+              <label htmlFor='numero_vivienda'>Número de Vivienda</label>
-              <Dropdown id="numero_vivienda" value={communityId} options={cList} />
+              <Dropdown
+                id='numero_vivienda'
+                value={communityId}
+                options={cList}
+              />
             </div>
-            <Button label="Registrar" onClick={registrarInquilino} />
+            <Button label='Registrar' onClick={registrarInquilino} />
           </div>
         </div>
       </div>
     </div>
-  );
+  )
-};
+}
 
-export default React.memo(Inquilinos);
+export default React.memo(Inquilinos)