agregar columna de estado en la tabla

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

@@ -262,7 +262,7 @@ const AdministradoresSistema = () => {
       <div className="actions">
         <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={() => confirmChangeStatusAdminSystem(rowData)}
           title={`${text}`}
         />
@@ -419,6 +419,7 @@ const AdministradoresSistema = () => {
       </p>
     </>
   );
+  
   const headerStatus = (
     <>
       <p> {' '}

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

@@ -15,6 +15,7 @@ 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 { faHashtag } from '@fortawesome/free-solid-svg-icons';
+import { faCircleQuestion } from '@fortawesome/free-solid-svg-icons';
 
 import { useCookies } from "react-cookie";
 
@@ -288,12 +289,12 @@ const Inquilinos = () => {
       <div className="actions">
          <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" 
-        className="p-button-rounded p-button-danger mt-2" 
+        className="p-button-rounded p-button-danger mt-2 mx-2" 
         onClick={() => confirmDeleteTenant(rowData)} />
       </div>
     );
@@ -397,6 +398,26 @@ const Inquilinos = () => {
     </>
   )
 
+  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">
@@ -418,7 +439,14 @@ const Inquilinos = () => {
             <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 style={{ flexGrow: 1, flexBasis: '130px', minWidth: '130px' }} body={actionsTenant}></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={actionsTenant}></Column>
           </DataTable>
           <Dialog visible={deleteTenantDialog} style={{ width: '450px' }} header="Confirmar" modal footer={deleteTenantDialogFooter} onHide={hideDeleteTenantDialog}>
             <div className="flex align-items-center justify-content-center">