Merge branch 'dev' of github.com:DeimosPr4/katoikia-app into movil

.envrc

@@ -0,0 +1,12 @@
+#!/usr/bin/env bash
+# ^ added for shellcheck and file-type detection
+
+# Watch & reload direnv on change
+watch_file devshell.toml
+
+if [[ $(type -t use_flake) != function ]]; then
+  echo "ERROR: use_flake function missing."
+  echo "Please update direnv to v2.30.0 or later."
+  exit 1
+fi
+use flake

api-gateway/src/app.controller.ts

@@ -1,4 +1,4 @@
-import { Controller, Get, Post, Body, Param, Delete } from '@nestjs/common';
+import { Controller, Get, Post, Put, Body, Param, Delete } from '@nestjs/common';
 import { AppService } from './app.service';
 @Controller()
 export class AppController {
@@ -11,22 +11,12 @@ export class AppController {
     @Body('last_name') last_name: string,
     @Body('email') email: string,
     @Body('phone') phone: number,
-    @Body('password') password: string,
     @Body('user_type') user_type: string,
     @Body('status') status: string,
     @Body('date_entry') date_entry: Date,
   ) {
-    return this.appService.createAdminSystem(
-      dni,
-      name,
-      last_name,
-      email,
-      phone,
-      password,
-      user_type,
-      status,
-      date_entry,
-    );
+    return this.appService.createAdminSystem(dni, name, last_name, email, phone, 
+            user_type, status, date_entry);
   }
 
   @Post('user/createGuard')
@@ -37,24 +27,30 @@ export class AppController {
     @Body('last_name') last_name: string,
     @Body('email') email: string,
     @Body('phone') phone: number,
-    @Body('password') password: string,
     @Body('user_type') user_type: string,
     @Body('status') status: string,
     @Body('date_entry') date_entry: Date,
     @Body('community_id') community_id: string,
   ) {
-    return this.appService.createGuard(
-      dni,
-      name,
-      last_name,
-      email,
-      phone,
-      password,
-      user_type,
-      status,
-      date_entry,
-      community_id,
-    );
+    return this.appService.createGuard(dni, name, last_name, email, phone,
+      user_type, status, date_entry,community_id);
+  }
+
+  @Post('user/createAdminCommunity')
+  createAdminCommunity(
+    //Nombre, Apellidos, Correo electrónico, Cédula, Teléfono, Contraseña
+    @Body('dni') dni: string,
+    @Body('name') name: string,
+    @Body('last_name') last_name: string,
+    @Body('email') email: string,
+    @Body('phone') phone: number,
+    @Body('user_type') user_type: string,
+    @Body('status') status: string,
+    @Body('date_entry') date_entry: Date,
+    @Body('community_id') community_id:string
+  ) {
+    return this.appService.createAdminCommunity(dni, name, last_name, email, phone,
+      user_type, status, date_entry,community_id);
   }
 
   @Post('user/createUser')
@@ -69,6 +65,7 @@ export class AppController {
     @Body('status') status: string,
     @Body('date_entry') date_entry: Date,
     @Body('community_id') community_id: string,
+    @Body('number_house') number_house: string,
   ) {
     return this.appService.createUser(
       dni,
@@ -81,6 +78,67 @@ export class AppController {
       status,
       date_entry,
       community_id,
+      number_house,
+    );
+  }
+
+  @Put('user/updateGuard/:id')
+  updateGuard(
+    @Param('id') id: string,
+    @Body('dni') dni: string,
+    @Body('name') name: string,
+    @Body('last_name') last_name: string,
+    @Body('email') email: string,
+    @Body('phone') phone: number,
+    @Body('password') password: string,
+    @Body('user_type') user_type: string,
+    @Body('status') status: string,
+    @Body('date_entry') date_entry: Date,
+    @Body('community_id') community_id: string,
+  ) {
+    return this.appService.updateGuard(
+      id,
+      dni,
+      name,
+      last_name,
+      email,
+      phone,
+      password,
+      user_type,
+      status,
+      date_entry,
+      community_id,
+    );
+  }
+
+  @Put('user/updateUser/:id')
+  updateUser(
+    @Param('id') id: string,
+    @Body('dni') dni: string,
+    @Body('name') name: string,
+    @Body('last_name') last_name: string,
+    @Body('email') email: string,
+    @Body('phone') phone: number,
+    @Body('password') password: string,
+    @Body('user_type') user_type: string,
+    @Body('status') status: string,
+    @Body('date_entry') date_entry: Date,
+    @Body('community_id') community_id: string,
+    @Body('number_house') number_house: string,
+  ) {
+    return this.appService.updateUser(
+      id,
+      dni,
+      name,
+      last_name,
+      email,
+      phone,
+      password,
+      user_type,
+      status,
+      date_entry,
+      community_id,
+      number_house,
     );
   }
 
@@ -106,21 +164,50 @@ export class AppController {
   allUsersAdminComunidad() {
     return this.appService.allUsersAdminComunidad();
   }
+
   @Get('user/findGuards/:community')
   findGuardsCommunity(@Param('community_id') community_id: string) {
     return this.appService.findGuardsCommunity(community_id);
   }
 
+  @Get('user/findTenants/:community_id')
+  allUsersTenants(@Param('community_id') paramCommunity_id: string) {
+    return this.appService.findTenantsCommunity(paramCommunity_id);
+  }
+  
   @Get('user/find/:dni')
   findUser(@Param('dni') paramUserDNI: string) {
     return this.appService.findUser(paramUserDNI);
   }
 
+  @Get('user/findUserById/:id')
+  findUserById(@Param('id') id: string) {
+    return this.appService.findUserById(id);
+  }
+
   @Delete('user/deleteAdminSystem/:id')
   deleteAdminSystem(@Param('id') id: string) {
     return this.appService.deleteAdminSystem(id);
   }
 
+  @Delete('user/deleteAdminCommunity/:id')
+  deleteAdminCommunity(@Param('id') id: string) {
+    return this.appService.deleteAdminCommunity(id);
+  }
+
+  @Delete('user/deleteTenant/:id')
+  deleteTenant(@Param('id') id: string) {
+    return this.appService.deleteTenant(id);
+  }
+
+  @Post('user/changeStatus')
+  changeStatusUser(
+    @Body('id') pId: string,
+    @Body('status') pStatus: string,
+  ) {
+    return this.appService.changeStatusUser(pId, pStatus);
+  }
+
   // #==== API Communities
   @Post('community/createCommunity')
   createCommunity(
@@ -166,7 +253,15 @@ export class AppController {
   findCommunityAdmin(@Body('community_id') community_id: string) {
     return this.appService.findCommunityAdmin(community_id);
   }
+  @Post('community/changeStatus')
+  changeStatusCommunity(
+    @Body('id') pId: string,
+    @Body('status') pStatus: string,
+  ) {
+    return this.appService.changeStatusCommunity(pId, pStatus);
+  }
 
+  
   // #==== API Common Areas
   @Post('commonArea/createCommonArea')
   createCommonArea(
@@ -195,6 +290,25 @@ export class AppController {
     return this.appService.findCommonArea(paramCommonAreaId);
   }
 
+  @Get('commonArea/findByCommunity/:community_id')
+  findByCommunity(@Param('community_id') paramCommunityId: string) {
+    return this.appService.findByCommunity(paramCommunityId);
+  }
+
+
+  @Delete('commonArea/deleteCommonArea/:id')
+  deleteCommonArea(@Param('id') id: string) {
+    return this.appService.deleteCommonArea(id);
+  }
+
+  @Post('commonArea/changeStatus')
+  changeStatusCommonArea(
+    @Body('id') pId: string,
+    @Body('status') pStatus: string,
+  ) {
+    return this.appService.changeStatusCommonArea(pId, pStatus);
+  }
+
   // #==== API GUEST
   //#API userService - create user
   @Post('guest/createGuest')

api-gateway/src/app.service.ts

@@ -18,7 +18,7 @@ export class AppService {
     @Inject('SERVICIO_REPORTES') private readonly clientReportApp: ClientProxy,
     @Inject('SERVICIO_NOTIFICACIONES')
     private readonly clientNotificationtApp: ClientProxy,
-  ) {}
+  ) { }
 
   // ====================== USERS ===============================
 
@@ -34,6 +34,7 @@ export class AppService {
     status: string,
     date_entry: Date,
     community_id: string,
+    number_house: string,
   ) {
     const pattern = { cmd: 'createUser' };
     const payload = {
@@ -47,6 +48,73 @@ export class AppService {
       status: status,
       date_entry: date_entry,
       community_id: community_id,
+      number_house: number_house,
+    };
+    return this.clientUserApp
+      .send<string>(pattern, payload)
+      .pipe(map((message: string) => ({ message })));
+  }
+
+  updateUser(
+    _id: string,
+    dni: string,
+    name: string,
+    last_name: string,
+    email: string,
+    phone: number,
+    password: string,
+    user_type: string,
+    status: string,
+    date_entry: Date,
+    community_id: string,
+    number_house: string,
+  ) {
+    const pattern = { cmd: 'updateUser' };
+    const payload = {
+      id: _id,
+      dni: dni,
+      name: name,
+      last_name: last_name,
+      email: email,
+      phone: phone,
+      password: password,
+      user_type: user_type,
+      status: status,
+      date_entry: date_entry,
+      community_id: community_id,
+      number_house: number_house,
+    };
+    return this.clientUserApp
+      .send<string>(pattern, payload)
+      .pipe(map((message: string) => ({ message })));
+  }
+
+  updateGuard(
+    _id: string,
+    dni: string,
+    name: string,
+    last_name: string,
+    email: string,
+    phone: number,
+    password: string,
+    user_type: string,
+    status: string,
+    date_entry: Date,
+    community_id: string,
+  ) {
+    const pattern = { cmd: 'updateGuard' };
+    const payload = {
+      id: _id,
+      dni: dni,
+      name: name,
+      last_name: last_name,
+      email: email,
+      phone: phone,
+      password: password,
+      user_type: user_type,
+      status: status,
+      date_entry: date_entry,
+      community_id: community_id,
     };
     return this.clientUserApp
       .send<string>(pattern, payload)
@@ -54,64 +122,47 @@ export class AppService {
   }
 
   //POST parameter from API
-  createAdminSystem(
-    dni: string,
-    name: string,
-    last_name: string,
-    email: string,
-    phone: number,
-    password: string,
-    user_type: string,
-    status: string,
-    date_entry: Date,
-  ) {
+  createAdminSystem(dni: string, name: string, last_name: string, email: string, phone: number
+    , user_type: string, status: string, date_entry: Date) {
     const pattern = { cmd: 'createAdminSystem' };
     const payload = {
-      dni: dni,
-      name: name,
-      last_name: last_name,
-      email: email,
-      phone: phone,
-      password: password,
-      user_type: user_type,
-      status: status,
-      date_entry: date_entry,
+      dni: dni, name: name, last_name: last_name, email: email, phone: phone,
+      password: this.generatePassword(), user_type: user_type, status: status, date_entry: date_entry
     };
     return this.clientUserApp
       .send<string>(pattern, payload)
       .pipe(map((message: string) => ({ message })));
   }
 
-  createGuard(
-    dni: string,
-    name: string,
-    last_name: string,
-    email: string,
-    phone: number,
-    password: string,
-    user_type: string,
-    status: string,
-    date_entry: Date,
-    community_id: string,
-  ) {
+  createGuard(dni: string, name: string, last_name: string, email: string, phone: number
+    , user_type: string, status: string, date_entry: Date, community_id: string) {
     const pattern = { cmd: 'createGuard' };
     const payload = {
-      dni: dni,
-      name: name,
-      last_name: last_name,
-      email: email,
-      phone: phone,
-      password: password,
-      user_type: user_type,
-      status: status,
-      date_entry: date_entry,
-      community_id,
+      dni: dni, name: name, last_name: last_name, email: email, phone: phone,
+      password: this.generatePassword(), user_type: user_type, status: status, date_entry: date_entry, community_id
+
     };
     return this.clientUserApp
       .send<string>(pattern, payload)
       .pipe(map((message: string) => ({ message })));
   }
 
+
+  createAdminCommunity(dni: string, name: string, last_name: string, email: string, phone: number
+    , user_type: string, status: string, date_entry: Date, community_id: string) {
+    const pattern = { cmd: 'createAdminCommunity' };
+    const payload = {
+      dni: dni, name: name, last_name: last_name, email: email, phone: phone,
+      password: this.generatePassword(), user_type: user_type, status: status, date_entry: date_entry, community_id
+
+    };
+    return this.clientUserApp
+      .send<string>(pattern, payload)
+      .pipe(
+        map((message: string) => ({ message })),
+      );
+  }
+
   allUsers() {
     const pattern = { cmd: 'findAllUsers' };
     const payload = {};
@@ -136,6 +187,17 @@ export class AppService {
       .pipe(map((message: string) => ({ message })));
   }
 
+  allUsersTenants() {
+    const pattern = { cmd: 'findTenants' };
+    const payload = {};
+    return this.clientUserApp
+      .send<string>(pattern, payload)
+      .pipe(
+        map((message: string) => ({ message })),
+      );
+  }
+
+
   //GET parameter from API
   findUser(paramUserDNI: string) {
     const pattern = { cmd: 'findUserDNI' };
@@ -153,6 +215,14 @@ export class AppService {
       .pipe(map((message: string) => ({ message })));
   }
 
+  findTenantsCommunity(community_id: string) {
+    const pattern = { cmd: 'findTenantsCommunity' };
+    const payload = { community_id: community_id };
+    return this.clientUserApp
+      .send<string>(pattern, payload)
+      .pipe(map((message: string) => ({ message })));
+  }
+
   deleteAdminSystem(id: string) {
     const pattern = { cmd: 'deleteAdminSystem' };
     const payload = { id: id };
@@ -161,6 +231,22 @@ export class AppService {
       .pipe(map((message: string) => ({ message })));
   }
 
+  deleteAdminCommunity(id: string) {
+    const pattern = { cmd: 'deleteAdminCommunity' };
+    const payload = { id: id };
+    return this.clientUserApp
+      .send<string>(pattern, payload)
+      .pipe(map((message: string) => ({ message })));
+  }
+
+  deleteTenant(id: string) {
+    const pattern = { cmd: 'deleteTenant' };
+    const payload = { id: id };
+    return this.clientUserApp
+      .send<string>(pattern, payload)
+      .pipe(map((message: string) => ({ message })));
+  }
+
   inicioSesion(pEmail: string, pPassword: string) {
     const pattern = { cmd: 'loginUser' };
     const payload = { email: pEmail, password: pPassword };
@@ -178,20 +264,37 @@ export class AppService {
       .pipe(map((message: string) => ({ message })));
   }
 
+
+  //GET parameter from API
+  findUserById(id: string) {
+    const pattern = { cmd: 'findById' };
+    const payload = { id: id };
+    return this.clientUserApp
+      .send<string>(pattern, payload)
+      .pipe(map((message: string) => ({ message })));
+  }
+
+  changeStatusUser(pId: string, pStatus: string) {
+    const pattern = { cmd: 'changeStatus' };
+    const payload = { id: pId, status: pStatus };
+    return this.clientUserApp
+      .send<string>(pattern, payload)
+      .pipe(map((message: string) => ({ message })));
+  }
+
+
   // ====================== COMMUNITIES ===============================
+  changeStatusCommunity(pId: string, pStatus: string) {
+    const pattern = { cmd: 'changeStatus' };
+    const payload = { id: pId, status: pStatus };
+    return this.clientCommunityApp
+      .send<string>(pattern, payload)
+      .pipe(map((message: string) => ({ message })));
+  }
 
   //POST parameter from API
-  createCommunity(
-    name: string,
-    province: string,
-    canton: string,
-    district: string,
-    num_houses: number,
-    phone: string,
-    status: string,
-    date_entry: Date,
-    houses: [],
-  ) {
+  createCommunity(name: string, province: string, canton: string, district: string
+    , num_houses: number, phone: string, status: string, date_entry: Date, houses: []) {
     const pattern = { cmd: 'createCommunity' };
     const payload = {
       name: name,
@@ -250,6 +353,7 @@ export class AppService {
       hourMax: hourMax,
       bookable: bookable,
       community_id: community_id,
+      status: '1'
     };
     return this.clientCommonAreaApp
       .send<string>(pattern, payload)
@@ -273,6 +377,35 @@ export class AppService {
       .pipe(map((message: string) => ({ message })));
   }
 
+
+  //GET parameter from API
+  findByCommunity(paramCommunityId: string) {
+    const pattern = { cmd: 'findByCommunity' };
+    const payload = { community_id: paramCommunityId };
+    return this.clientCommonAreaApp
+      .send<string>(pattern, payload)
+      .pipe(map((message: string) => ({ message })));
+  }
+
+
+  //DELETE parameter from API
+  deleteCommonArea(paramCommonAreaId: string) {
+    const pattern = { cmd: 'removeCommonArea' };
+    const payload = { id: paramCommonAreaId };
+    return this.clientCommonAreaApp
+      .send<string>(pattern, payload)
+      .pipe(map((message: string) => ({ message })));
+  }
+
+  changeStatusCommonArea(pId: string, pStatus: string) {
+    const pattern = { cmd: 'changeStatus' };
+    const payload = { id: pId, status: pStatus };
+    return this.clientCommonAreaApp
+      .send<string>(pattern, payload)
+      .pipe(map((message: string) => ({ message })));
+  }
+
+
   // ====================== GUESTS ===============================
 
   //POST parameter from API
@@ -287,13 +420,8 @@ export class AppService {
   ) {
     const pattern = { cmd: 'createGuest' };
     const payload = {
-      name: name,
-      last_name: last_name,
-      dni: dni,
-      number_plate: number_plate,
-      phone: phone,
-      status: status,
-      date_entry: date_entry,
+      name: name, last_name: last_name, dni: dni, number_plate: number_plate, phone: phone,
+      status: status, date_entry: date_entry
     };
     return this.clientGuestApp
       .send<string>(pattern, payload)
@@ -317,7 +445,7 @@ export class AppService {
       .pipe(map((message: string) => ({ message })));
   }
 
-  // ====================== PAYMENTS ===============================
+  // ====================== PAYMENTS =============================== 
 
   //POST parameter from API
   createPayment(
@@ -331,13 +459,8 @@ export class AppService {
   ) {
     const pattern = { cmd: 'createPayment' };
     const payload = {
-      date_payment: date_payment,
-      mount: mount,
-      description: description,
-      period: period,
-      status: status,
-      user_id: user_id,
-      communty_id: communty_id,
+      date_payment: date_payment, mount: mount, description: description,
+      period: period, status: status, user_id: user_id, communty_id: communty_id
     };
     return this.clientPaymentApp
       .send<string>(pattern, payload)
@@ -364,22 +487,12 @@ export class AppService {
   // ====================== RESERVATIONS ===============================
 
   //POST parameter from API
-  createReservation(
-    start_time: string,
-    finish_time: string,
-    status: string,
-    date_entry: Date,
-    user_id: string,
-    common_area_id: string,
-  ) {
+  createReservation(start_time: string, finish_time: string, status: string,
+    date_entry: Date, user_id: string, common_area_id: string) {
     const pattern = { cmd: 'createReservation' };
     const payload = {
-      start_time: start_time,
-      finish_time: finish_time,
-      status: status,
-      date_entry: date_entry,
-      user_id: user_id,
-      common_area_id: common_area_id,
+      start_time: start_time, finish_time: finish_time, status: status,
+      date_entry: date_entry, user_id: user_id, common_area_id: common_area_id
     };
     return this.clientReservationApp
       .send<string>(pattern, payload)
@@ -406,18 +519,12 @@ export class AppService {
   // ====================== POSTS ===============================
 
   //POST parameter from API
-  createPost(
-    post: string,
-    date_entry: Date,
-    user_id: string,
-    community_id: string,
-  ) {
+  createPost(post: string, date_entry: Date, user_id: string,
+    community_id: string) {
     const pattern = { cmd: 'createPost' };
     const payload = {
-      post: post,
-      date_entry: date_entry,
-      user_id: user_id,
-      community_id: community_id,
+      post: post, date_entry: date_entry, user_id: user_id,
+      community_id: community_id
     };
     return this.clientPostApp
       .send<string>(pattern, payload)
@@ -444,18 +551,12 @@ export class AppService {
   // ====================== COMMNENT POSTS ===============================
 
   //Comment parameter from API
-  createComment(
-    comment: string,
-    date_entry: Date,
-    user_id: string,
-    post_id: string,
-  ) {
+  createComment(comment: string, date_entry: Date, user_id: string,
+    post_id: string) {
     const pattern = { cmd: 'createComment' };
     const payload = {
-      comment: comment,
-      date_entry: date_entry,
-      user_id: user_id,
-      post_id: post_id,
+      comment: comment, date_entry: date_entry, user_id: user_id,
+      post_id: post_id
     };
     return this.clientPostApp
       .send<string>(pattern, payload)
@@ -482,18 +583,12 @@ export class AppService {
   // ====================== REPORTS ===============================
 
   //Report parameter from API
-  createReport(
-    action: string,
-    description: string,
-    date_entry: Date,
-    user_id: string,
-  ) {
+  createReport(action: string, description: string, date_entry: Date,
+    user_id: string) {
     const pattern = { cmd: 'createReport' };
     const payload = {
-      action: action,
-      description: description,
-      date_entry: date_entry,
-      user_id: user_id,
+      action: action, description: description, date_entry: date_entry,
+      user_id: user_id
     };
     return this.clientReportApp
       .send<string>(pattern, payload)
@@ -532,4 +627,22 @@ export class AppService {
       .send<string>(pattern, payload)
       .pipe(map((message: string) => ({ message })));
   }
+
+
+
+  /* Function to generate combination of password */
+  generatePassword() {
+    var pass = '';
+    var str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ' +
+      'abcdefghijklmnopqrstuvwxyz0123456789@#$';
+
+    for (let i = 1; i <= 8; i++) {
+      var char = Math.floor(Math.random()
+        * str.length + 1);
+
+      pass += str.charAt(char)
+    }
+
+    return pass;
+  }
 }

devshell.toml

@@ -0,0 +1,13 @@
+# https://numtide.github.io/devshell
+[[commands]]
+package = "devshell.cli"
+help = "Per project developer environments"
+
+[[commands]]
+package = "nodejs"
+help = "Node.js"
+
+[[commands]]
+package = "nodePackages.expo-cli"
+help = "Expo CLI"
+

flake.lock

@@ -0,0 +1,92 @@
+{
+  "nodes": {
+    "devshell": {
+      "inputs": {
+        "flake-utils": "flake-utils",
+        "nixpkgs": "nixpkgs"
+      },
+      "locked": {
+        "lastModified": 1658746384,
+        "narHash": "sha256-CCJcoMOcXyZFrV1ag4XMTpAPjLWb4Anbv+ktXFI1ry0=",
+        "owner": "numtide",
+        "repo": "devshell",
+        "rev": "0ffc7937bb5e8141af03d462b468bd071eb18e1b",
+        "type": "github"
+      },
+      "original": {
+        "owner": "numtide",
+        "repo": "devshell",
+        "type": "github"
+      }
+    },
+    "flake-utils": {
+      "locked": {
+        "lastModified": 1642700792,
+        "narHash": "sha256-XqHrk7hFb+zBvRg6Ghl+AZDq03ov6OshJLiSWOoX5es=",
+        "owner": "numtide",
+        "repo": "flake-utils",
+        "rev": "846b2ae0fc4cc943637d3d1def4454213e203cba",
+        "type": "github"
+      },
+      "original": {
+        "owner": "numtide",
+        "repo": "flake-utils",
+        "type": "github"
+      }
+    },
+    "flake-utils_2": {
+      "locked": {
+        "lastModified": 1656928814,
+        "narHash": "sha256-RIFfgBuKz6Hp89yRr7+NR5tzIAbn52h8vT6vXkYjZoM=",
+        "owner": "numtide",
+        "repo": "flake-utils",
+        "rev": "7e2a3b3dfd9af950a856d66b0a7d01e3c18aa249",
+        "type": "github"
+      },
+      "original": {
+        "owner": "numtide",
+        "repo": "flake-utils",
+        "type": "github"
+      }
+    },
+    "nixpkgs": {
+      "locked": {
+        "lastModified": 1643381941,
+        "narHash": "sha256-pHTwvnN4tTsEKkWlXQ8JMY423epos8wUOhthpwJjtpc=",
+        "owner": "NixOS",
+        "repo": "nixpkgs",
+        "rev": "5efc8ca954272c4376ac929f4c5ffefcc20551d5",
+        "type": "github"
+      },
+      "original": {
+        "owner": "NixOS",
+        "ref": "nixpkgs-unstable",
+        "repo": "nixpkgs",
+        "type": "github"
+      }
+    },
+    "nixpkgs_2": {
+      "locked": {
+        "lastModified": 1659782844,
+        "narHash": "sha256-tM/qhHFE61puBxh9ebP3BIG1fkRAT4rHqD3jCM0HXGY=",
+        "owner": "NixOS",
+        "repo": "nixpkgs",
+        "rev": "c85e56bb060291eac3fb3c75d4e0e64f6836fcfe",
+        "type": "github"
+      },
+      "original": {
+        "id": "nixpkgs",
+        "type": "indirect"
+      }
+    },
+    "root": {
+      "inputs": {
+        "devshell": "devshell",
+        "flake-utils": "flake-utils_2",
+        "nixpkgs": "nixpkgs_2"
+      }
+    }
+  },
+  "root": "root",
+  "version": 7
+}

flake.nix

@@ -0,0 +1,20 @@
+{
+  description = "virtual environments";
+
+  inputs.devshell.url = "github:numtide/devshell";
+  inputs.flake-utils.url = "github:numtide/flake-utils";
+
+  outputs = { self, flake-utils, devshell, nixpkgs }:
+    flake-utils.lib.eachDefaultSystem (system: {
+      devShell =
+        let pkgs = import nixpkgs {
+          inherit system;
+
+          overlays = [ devshell.overlay ];
+        };
+        in
+        pkgs.devshell.mkShell {
+          imports = [ (pkgs.devshell.importTOML ./devshell.toml) ];
+        };
+    });
+}

servicio-areas-comunes/src/common_areas/common_areas.controller.ts

@@ -30,7 +30,21 @@ export class CommonAreasController {
 
   @MessagePattern({ cmd: 'removeCommonArea' })
   remove(@Payload() id: string) {
-    let _id = id['_id'];
+    let _id = id['id'];
     return this.commonAreasService.remove(_id);
   }
+
+  @MessagePattern({ cmd: 'findByCommunity' })
+  findByCommunity(@Payload() id: string) {
+    let _community_id = id['community_id'];
+    return this.commonAreasService.findByCommunity(_community_id);
+  }
+
+   //cambiar de estado
+   @MessagePattern({ cmd: 'changeStatus' })
+   changeStatus(@Payload() body: string) {
+     let pid = body['id'];
+     let pstatus = body['status'];
+     return this.commonAreasService.changeStatus(pid,pstatus);
+   }
 }

servicio-areas-comunes/src/common_areas/common_areas.service.ts

@@ -32,6 +32,19 @@ export class CommonAreasService {
   }
 
   async remove(id: string) {
-    return this.commonAreaModel.findByIdAndRemove({ _id: id }).exec();
+    return this.commonAreaModel.findOneAndUpdate({ _id: id }, {status: '-1'}, {
+      new: true,
+    });  
+  };
+
+  async findByCommunity(community_id: string): Promise<CommonArea[]> {
+    return this.commonAreaModel.find({ community_id: community_id }).exec();
   }
+
+  async changeStatus(id: string, status: string) {
+    return this.commonAreaModel.findOneAndUpdate({ _id: id }, {status: status}, {
+      new: true,
+    });  
+  }
+
 }

servicio-areas-comunes/src/schemas/common_area.schema.ts

@@ -19,6 +19,9 @@ export class CommonArea {
   @Prop()
   bookable: number; //saber si es necesario reservarlo o no
 
+  @Prop()
+  status: string;
+
   @Prop()
   community_id: string;
 }

servicio-comunidad-viviendas/package-lock.json

@@ -5,6 +5,7 @@
   "requires": true,
   "packages": {
     "": {
+      "name": "servicio-comunidad-viviendas",
       "version": "0.0.1",
       "license": "UNLICENSED",
       "dependencies": {

servicio-comunidad-viviendas/src/communities/communities.controller.ts

@@ -45,4 +45,12 @@ export class CommunitiesController {
     let _id = id['_id'];
     return this.communitiesService.remove(_id);
   }
+
+   //cambiar de estado
+   @MessagePattern({ cmd: 'changeStatus' })
+   changeStatus(@Payload() body: string) {
+     let pid = body['id'];
+     let pstatus = body['status'];
+     return this.communitiesService.changeStatus(pid,pstatus);
+   }
 }

servicio-comunidad-viviendas/src/communities/communities.service.ts

@@ -56,7 +56,15 @@ export class CommunitiesService {
   }
 
   async remove(id: string) {
-    return this.communityModel.findByIdAndRemove({ _id: id }).exec();
+    return this.communityModel.findOneAndUpdate({ _id: id }, {status: '-1'}, {
+      new: true,
+    });  
+  }
+
+  async changeStatus(id: string, status: string) {
+    return this.communityModel.findOneAndUpdate({ _id: id }, {status: status}, {
+      new: true,
+    });  
   }
 
   async findCommunityAdmin(community: string, user_type: string) {

servicio-foro-comunicaciones/src/post-comments/post-comments.service.ts

@@ -33,6 +33,8 @@ export class PostCommentsService {
   }
 
   async remove(id: string) {
-    return this.commentModel.findByIdAndRemove({ _id: id }).exec();
+    return this.commentModel.findOneAndUpdate({ _id: id }, {status: '-1'}, {
+      new: true,
+    });  
   }
 }

servicio-invitados/src/guests/guests.service.ts

@@ -32,6 +32,8 @@ export class GuestsService {
   }
 
   async remove(id: string) {
-    return this.guestModel.findByIdAndRemove({ _id: id }).exec();
+    return this.guestModel.findOneAndUpdate({ _id: id }, {status: '-1'}, {
+      new: true,
+    });  
   }
 }

servicio-notificaciones/src/email.controller.ts

@@ -19,27 +19,62 @@ export class EmailController {
     return response;
   }
 
-  @MessagePattern({ cmd: 'html' })
-  async postHTMLEmail(@Payload() user: any) {
-    const url = 'http://localhost:3000/';
-    const image = 'images/email.ong';
-    var response = await this.mailService.sendMail({
-      to: user['email'],
-      from: 'mbonilla.guti@gmail.com',
-      subject: 'HTML Dynamic Template',
-      template: 'templateEmail',
-      context: {
-        name: user['name'],
-        url,
-      },
-      attachments: [
-        {
-          filename: 'email.png',
-          path: __dirname + '/mails/images/email.png',
-          cid: 'logo', //my mistake was putting "cid:logo@cid" here!
-        },
-      ],
-    });
-    return response;
-  }
+    @MessagePattern({ cmd: 'html' })
+    async postHTMLEmail(@Payload() user: any) {
+        const url = "http://localhost:3000/";
+        const image = "images/email.png";
+        var response = await this.mailService.sendMail({
+            to: user["email"],
+            from: "mbonilla.guti@gmail.com",
+            subject: 'HTML Dynamic Template',
+            template: 'templateEmail',
+            context: {
+                name: user["name"],
+                url
+            },
+            attachments: [
+                {
+                    filename: 'email.png',
+                    path: __dirname + '/mails/images/email.png',
+                    cid: 'logo' //my mistake was putting "cid:logo@cid" here! 
+                }
+            ]
+        });
+        return response;
+    }
+
+
+    @MessagePattern({ cmd: 'emailCreateUserAdminCommunity' })
+    async emailCreateUserAdmin(@Payload() user: any) {
+        const url = "http://localhost:3000/";
+        const image = "images/email.png";
+        const logo = "images/Logo Katoikia.png";
+        var response = await this.mailService.sendMail({
+            to: user["email"],
+            from: "mbonilla.guti@gmail.com",
+            subject: 'Usuario registrado',
+            template: 'emailCreateUserAdminCommunity',
+            context: {
+                name: user["name"],
+                password: user["password"],
+                date_entry: user["date_entry"],
+                email: user["email"],
+                community_name: user['community_name'],
+                url
+            },
+            attachments: [
+                {
+                    filename: 'email.png',
+                    path: __dirname + '/mails/images/email.png',
+                    cid: 'image_email' //my mistake was putting "cid:logo@cid" here! 
+                },
+                {
+                    filename: 'Logo_Katoikia.png',
+                    path: __dirname + '/mails/images/Logo_Katoikia.png',
+                    cid: 'logoKatoikia' //my mistake was putting "cid:logo@cid" here! 
+                }
+            ]
+        });
+        return response;
+    }
 }

servicio-notificaciones/src/mails/emailCreateUserAdmin.hbs

@@ -0,0 +1,457 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"
+    xmlns:o="urn:schemas-microsoft-com:office:office">
+
+<head>
+    <meta charset="utf-8"> <!-- utf-8 works for most cases -->
+    <meta name="viewport" content="width=device-width"> <!-- Forcing initial-scale shouldn't be necessary -->
+    <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Use the latest (edge) version of IE rendering engine -->
+    <meta name="x-apple-disable-message-reformatting"> <!-- Disable auto-scale in iOS 10 Mail entirely -->
+    <title></title> <!-- The title tag shows in email notifications, like Android 4.4. -->
+
+    <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css"
+        integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A=="
+        crossorigin="anonymous" referrerpolicy="no-referrer" />
+
+
+    <!-- CSS Reset : BEGIN -->
+    <style>
+        html,
+        body {
+            margin: 0 auto !important;
+            padding: 0 !important;
+            height: 100% !important;
+            width: 100% !important;
+            background: #f1f1f1;
+        }
+
+        /* What it does: Stops email clients resizing small text. */
+        * {
+            -ms-text-size-adjust: 100%;
+            -webkit-text-size-adjust: 100%;
+        }
+
+        /* What it does: Centers email on Android 4.4 */
+        div[style*="margin: 16px 0"] {
+            margin: 0 !important;
+        }
+
+        /* What it does: Stops Outlook from adding extra spacing to tables. */
+        table,
+        td {
+            mso-table-lspace: 0pt !important;
+            mso-table-rspace: 0pt !important;
+        }
+
+        /* What it does: Fixes webkit padding issue. */
+        table {
+            border-spacing: 0 !important;
+            border-collapse: collapse !important;
+            table-layout: fixed !important;
+            margin: 0 auto !important;
+        }
+
+        /* What it does: Uses a better rendering method when resizing images in IE. */
+        img {
+            -ms-interpolation-mode: bicubic;
+        }
+
+        /* What it does: Prevents Windows 10 Mail from underlining links despite inline CSS. Styles for underlined links should be inline. */
+        a {
+            text-decoration: none;
+        }
+
+        /* What it does: A work-around for email clients meddling in triggered links. */
+        *[x-apple-data-detectors],
+        /* iOS */
+        .unstyle-auto-detected-links *,
+        .aBn {
+            border-bottom: 0 !important;
+            cursor: default !important;
+            color: inherit !important;
+            text-decoration: none !important;
+            font-size: inherit !important;
+            font-family: inherit !important;
+            font-weight: inherit !important;
+            line-height: inherit !important;
+        }
+
+        /* What it does: Prevents Gmail from displaying a download button on large, non-linked images. */
+        .a6S {
+            display: none !important;
+            opacity: 0.01 !important;
+        }
+
+        /* What it does: Prevents Gmail from changing the text color in conversation threads. */
+        .im {
+            color: inherit !important;
+        }
+
+        /* If the above doesn't work, add a .g-img class to any image in question. */
+        img.g-img+div {
+            display: none !important;
+        }
+
+        /* What it does: Removes right gutter in Gmail iOS app: https://github.com/TedGoas/Cerberus/issues/89  */
+        /* Create one of these media queries for each additional viewport size you'd like to fix */
+
+        /* iPhone 4, 4S, 5, 5S, 5C, and 5SE */
+        @media only screen and (min-device-width: 320px) and (max-device-width: 374px) {
+            u~div .email-container {
+                min-width: 320px !important;
+            }
+        }
+
+        /* iPhone 6, 6S, 7, 8, and X */
+        @media only screen and (min-device-width: 375px) and (max-device-width: 413px) {
+            u~div .email-container {
+                min-width: 375px !important;
+            }
+        }
+
+        /* iPhone 6+, 7+, and 8+ */
+        @media only screen and (min-device-width: 414px) {
+            u~div .email-container {
+                min-width: 414px !important;
+            }
+        }
+    </style>
+
+    <!-- CSS Reset : END -->
+
+    <!-- Progressive Enhancements : BEGIN -->
+    <style>
+        .primary {
+            background: #D7A86E;
+        }
+
+        .bg_white {
+            background: #ffffff;
+        }
+
+        .bg_light {
+            background: #fafafa;
+        }
+
+        .bg_black {
+            background: #000000;
+        }
+
+        .bg_dark {
+            background: rgba(0, 0, 0, .8);
+        }
+
+        .email-section {
+            padding: 2.5em;
+        }
+
+        /*BUTTON*/
+        .btn {
+            padding: 10px 15px;
+            display: inline-block;
+        }
+
+        .btn.btn-primary {
+            border-radius: 5px;
+            background: #D7A86E;
+            color: #ffffff;
+        }
+
+        .btn.btn-white {
+            border-radius: 5px;
+            background: #ffffff;
+            color: #000000;
+        }
+
+        .btn.btn-white-outline {
+            border-radius: 5px;
+            background: transparent;
+            border: 1px solid #fff;
+            color: #fff;
+        }
+
+        .btn.btn-black-outline {
+            border-radius: 0px;
+            background: transparent;
+            border: 2px solid #000;
+            color: #000;
+            font-weight: 700;
+        }
+
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6 {
+            font-family: 'Lato', sans-serif;
+            color: #000000;
+            margin-top: 0;
+            font-weight: 400;
+            margin-bottom: 12px;
+        }
+
+        body {
+            font-family: 'Lato', sans-serif;
+            font-weight: 400;
+            font-size: 15px;
+            line-height: 1.8;
+            color: rgba(0, 0, 0, 0.808);
+        }
+
+        a {
+            color: #D7A86E;
+        }
+
+        table {}
+
+        /*LOGO*/
+
+        .logo h1 {
+            margin: 0;
+        }
+
+        .logo h1 a {
+            color: #D7A86E;
+            font-size: 24px;
+            font-weight: 700;
+            font-family: 'Lato', sans-serif;
+        }
+
+        /*HERO*/
+        .hero {
+            position: relative;
+            z-index: 0;
+        }
+
+        .hero .text {
+            color: rgba(0, 0, 0, 0.884);
+        }
+
+        .hero .text h2 {
+            color: #000;
+            font-size: 40px;
+            margin-bottom: 0;
+            font-weight: 400;
+            line-height: 1.4;
+        }
+
+        .hero .text h3 {
+            font-size: 24px;
+            font-weight: 300;
+        }
+
+        .hero .text h2 span {
+            font-weight: 600;
+            color: #D7A86E;
+        }
+
+
+        /*HEADING SECTION*/
+        .heading-section {}
+
+        .heading-section h2 {
+            color: #000000;
+            font-size: 28px;
+            margin-top: 0;
+            line-height: 1.4;
+            font-weight: 400;
+        }
+
+        .heading-section .subheading {
+            margin-bottom: 20px !important;
+            display: inline-block;
+            font-size: 13px;
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            color: rgba(0, 0, 0, .4);
+            position: relative;
+        }
+
+        .heading-section .subheading::after {
+            position: absolute;
+            left: 0;
+            right: 0;
+            bottom: -10px;
+            content: '';
+            width: 100%;
+            height: 2px;
+            background: #D7A86E;
+            margin: 0 auto;
+        }
+
+        .heading-section-white {
+            color: rgba(255, 255, 255, .8);
+        }
+
+        .heading-section-white h2 {
+            line-height: 1;
+            padding-bottom: 0;
+        }
+
+        .heading-section-white h2 {
+            color: #ffffff;
+        }
+
+        .heading-section-white .subheading {
+            margin-bottom: 0;
+            display: inline-block;
+            font-size: 13px;
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            color: rgba(255, 255, 255, .4);
+        }
+
+
+        ul.social {
+            padding: 0;
+        }
+
+        ul.social li {
+            display: inline-block;
+            margin-right: 10px;
+        }
+
+        /*FOOTER*/
+
+        .footer {
+            border-top: 1px solid rgba(0, 0, 0, .05);
+            color: rgba(0, 0, 0, .5);
+        }
+
+        .footer .heading {
+            color: #000;
+            font-size: 20px;
+        }
+
+        .footer ul {
+            margin: 0;
+            padding: 0;
+        }
+
+        .footer ul li {
+            list-style: none;
+            margin-bottom: 10px;
+        }
+
+        .footer ul li a {
+            color: rgba(0, 0, 0, 1);
+        }
+
+
+        @media screen and (max-width: 500px) {}
+    </style>
+
+
+</head>
+
+<body width="100%" style="margin: 0; padding: 0 !important; mso-line-height-rule: exactly; background-color: #f1f1f1;">
+    <center style="width: 100%; background-color: #f1f1f1;">
+        <div
+            style="display: none; font-size: 1px;max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden; mso-hide: all; font-family: sans-serif;">
+            &zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
+        </div>
+        <div style="max-width: 600px; margin: 0 auto;" class="email-container">
+            <!-- BEGIN BODY -->
+            <table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%"
+                style="margin: auto;">
+                <tr>
+                    <td valign="top" class="bg_white" style="padding: 1em 2.5em 0 2.5em;">
+                        <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
+                            <tr>
+
+                                <td class="logo" style="text-align: right;">
+                                    <img src="cid:logoLatoikia" alt="Logo Katoikia"
+                                        style="width: 60px; max-width: 60px; height: auto; margin: auto; display: block; float: right;">
+                                </td>
+                                <td class="logo" style="text-align: left;">
+                                    <h1><a href="#">Katoikia</a></h1>
+                                </td>
+                            </tr>
+                        </table>
+                    </td>
+
+                </tr><!-- end tr -->
+                <tr>
+                    <td valign="middle" class="hero bg_white" style="padding: 3em 0 2em 0;">
+                        <img src="cid:image_email" alt="Logo Katoikia"
+                            style="width: 150px; max-width: 300px; height: auto; margin: auto; display: block;">
+                    </td>
+                </tr><!-- end tr -->
+                <tr>
+                    <td valign="middle" class="hero bg_white" style="padding: 2em 0 4em 0;">
+                        <table>
+                            <tr>
+                                <td>
+                                    <div class="text" style="padding: 0 2.5em; text-align: center;">
+                                        <h2> Hola , {{ name }} <i class="fa-regular fa-face-smile-wink"
+                                                style="color:#D7A86E; font-size: 0.8em; margin-left: 20px;"></i></h2>
+                                        <h3>Ha sido registrado como un Administrador General del sitio web Katoikia</h3>
+                                        <h4><i class="fa-solid fa-calendar-day"
+                                                style="color:#D7A86E; margin-right: 10px;"></i> Fecha de registro
+                                            {{date_entry}}</h4>
+                                    </div>
+                                    <div class="text" style="padding: 0 4em; text-align: left;">
+                                        <h3>Estas son sus credenciales:</h3>
+                                        <p><i class="fa-regular fa-envelope"  style="color:#D7A86E; margin-right: 10px;"></i>  Correo electronico: {{email}}</p>
+                                        <p><i class="fa-solid fa-key"  style="color:#D7A86E; margin-right: 10px;"></i> Password: {{password}}</p>
+
+                                    </div>
+                                    <div class="text" style="padding: 0 2.5em; text-align: center;">
+                                        <h3>Inicie sesión en el sitio web para poder acceder y disfrutar todos sus
+                                            beneficios</h3>
+                                        <p><a href="{{ url }}" class="btn btn-primary">Iniciar sesión</a></p>
+                                    </div>
+                                </td>
+                            </tr>
+                        </table>
+                    </td>
+                </tr><!-- end tr -->
+                
+                <!-- 1 Column Text + Button : END -->
+            </table>
+            <table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%"
+                style="margin: auto;">
+                <td valign="middle" class="bg_light footer email-section">
+                    <table>
+                      <tr>
+                        <td valign="top" width="33.333%" style="padding-top: 20px">
+                          <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
+                            <tr>
+                              <td style="text-align: left; padding-right: 10px">
+                                <h3 class="heading">Acerca de</h3>
+                                <p>Katoikia es su compañero más cercano para poder estar en contacto con sus vecinos y conocer sobre los mejores anuncios sobre su comunidad.</p>
+                              </td>
+                            </tr>
+                          </table>
+                        </td>
+                        <td valign="top" width="33.333%" style="padding-top: 20px">
+                          <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
+                            <tr>
+                              <td style="text-align: left; padding-left: 5px; padding-right: 5px">
+                                <h3 class="heading">Información de contacto</h3>
+                                <ul>
+                                  <li><span href="mailto:katoikiaapp@gmail.com" class="text">katoikiaapp@gmail.com</span></li>
+                                </ul>
+                              </td>
+                            </tr>
+                          </table>
+                        </td>
+                      </tr>
+                    </table>
+                  </td>
+                </tr>
+                <!-- end: tr -->
+                <tr>
+                  <td class="bg_light" style="text-align: center">
+                    <p><a href="http://localhost:3000" style="color: rgba(0, 0, 0, 0.8)">katoikiaapp.org</a></p>
+                  </td>
+
+            </table>
+
+        </div>
+    </center>
+</body>
+
+</html>

servicio-notificaciones/src/mails/emailCreateUserAdminCommunity.hbs

@@ -0,0 +1,464 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"
+    xmlns:o="urn:schemas-microsoft-com:office:office">
+
+<head>
+    <meta charset="utf-8"> <!-- utf-8 works for most cases -->
+    <meta name="viewport" content="width=device-width"> <!-- Forcing initial-scale shouldn't be necessary -->
+    <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Use the latest (edge) version of IE rendering engine -->
+    <meta name="x-apple-disable-message-reformatting"> <!-- Disable auto-scale in iOS 10 Mail entirely -->
+    <title></title> <!-- The title tag shows in email notifications, like Android 4.4. -->
+
+    <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css"
+        integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A=="
+        crossorigin="anonymous" referrerpolicy="no-referrer" />
+
+
+    <!-- CSS Reset : BEGIN -->
+    <style>
+        html,
+        body {
+            margin: 0 auto !important;
+            padding: 0 !important;
+            height: 100% !important;
+            width: 100% !important;
+            background: #f1f1f1;
+        }
+
+        /* What it does: Stops email clients resizing small text. */
+        * {
+            -ms-text-size-adjust: 100%;
+            -webkit-text-size-adjust: 100%;
+        }
+
+        /* What it does: Centers email on Android 4.4 */
+        div[style*="margin: 16px 0"] {
+            margin: 0 !important;
+        }
+
+        /* What it does: Stops Outlook from adding extra spacing to tables. */
+        table,
+        td {
+            mso-table-lspace: 0pt !important;
+            mso-table-rspace: 0pt !important;
+        }
+
+        /* What it does: Fixes webkit padding issue. */
+        table {
+            border-spacing: 0 !important;
+            border-collapse: collapse !important;
+            table-layout: fixed !important;
+            margin: 0 auto !important;
+        }
+
+        /* What it does: Uses a better rendering method when resizing images in IE. */
+        img {
+            -ms-interpolation-mode: bicubic;
+        }
+
+        /* What it does: Prevents Windows 10 Mail from underlining links despite inline CSS. Styles for underlined links should be inline. */
+        a {
+            text-decoration: none;
+        }
+
+        /* What it does: A work-around for email clients meddling in triggered links. */
+        *[x-apple-data-detectors],
+        /* iOS */
+        .unstyle-auto-detected-links *,
+        .aBn {
+            border-bottom: 0 !important;
+            cursor: default !important;
+            color: inherit !important;
+            text-decoration: none !important;
+            font-size: inherit !important;
+            font-family: inherit !important;
+            font-weight: inherit !important;
+            line-height: inherit !important;
+        }
+
+        /* What it does: Prevents Gmail from displaying a download button on large, non-linked images. */
+        .a6S {
+            display: none !important;
+            opacity: 0.01 !important;
+        }
+
+        /* What it does: Prevents Gmail from changing the text color in conversation threads. */
+        .im {
+            color: inherit !important;
+        }
+
+        /* If the above doesn't work, add a .g-img class to any image in question. */
+        img.g-img+div {
+            display: none !important;
+        }
+
+        /* What it does: Removes right gutter in Gmail iOS app: https://github.com/TedGoas/Cerberus/issues/89  */
+        /* Create one of these media queries for each additional viewport size you'd like to fix */
+
+        /* iPhone 4, 4S, 5, 5S, 5C, and 5SE */
+        @media only screen and (min-device-width: 320px) and (max-device-width: 374px) {
+            u~div .email-container {
+                min-width: 320px !important;
+            }
+        }
+
+        /* iPhone 6, 6S, 7, 8, and X */
+        @media only screen and (min-device-width: 375px) and (max-device-width: 413px) {
+            u~div .email-container {
+                min-width: 375px !important;
+            }
+        }
+
+        /* iPhone 6+, 7+, and 8+ */
+        @media only screen and (min-device-width: 414px) {
+            u~div .email-container {
+                min-width: 414px !important;
+            }
+        }
+    </style>
+
+    <!-- CSS Reset : END -->
+
+    <!-- Progressive Enhancements : BEGIN -->
+    <style>
+        .primary {
+            background: #D7A86E;
+        }
+
+        .bg_white {
+            background: #ffffff;
+        }
+
+        .bg_light {
+            background: #fafafa;
+        }
+
+        .bg_black {
+            background: #000000;
+        }
+
+        .bg_dark {
+            background: rgba(0, 0, 0, .8);
+        }
+
+        .email-section {
+            padding: 2.5em;
+        }
+
+        /*BUTTON*/
+        .btn {
+            padding: 10px 15px;
+            display: inline-block;
+        }
+
+        .btn.btn-primary {
+            border-radius: 5px;
+            background: #D7A86E;
+            color: #ffffff;
+        }
+
+        .btn.btn-white {
+            border-radius: 5px;
+            background: #ffffff;
+            color: #000000;
+        }
+
+        .btn.btn-white-outline {
+            border-radius: 5px;
+            background: transparent;
+            border: 1px solid #fff;
+            color: #fff;
+        }
+
+        .btn.btn-black-outline {
+            border-radius: 0px;
+            background: transparent;
+            border: 2px solid #000;
+            color: #000;
+            font-weight: 700;
+        }
+
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6 {
+            font-family: 'Lato', sans-serif;
+            color: #000000;
+            margin-top: 0;
+            font-weight: 400;
+            margin-bottom: 12px;
+        }
+
+        body {
+            font-family: 'Lato', sans-serif;
+            font-weight: 400;
+            font-size: 15px;
+            line-height: 1.8;
+            color: rgba(0, 0, 0, 0.808);
+        }
+
+        a {
+            color: #D7A86E;
+        }
+
+        table {}
+
+        /*LOGO*/
+
+        .logo h1 {
+            margin: 0;
+        }
+
+        .logo h1 a {
+            color: #D7A86E;
+            font-size: 24px;
+            font-weight: 700;
+            font-family: 'Lato', sans-serif;
+        }
+
+        /*HERO*/
+        .hero {
+            position: relative;
+            z-index: 0;
+        }
+
+        .hero .text {
+            color: rgba(0, 0, 0, 0.884);
+        }
+
+        .hero .text h2 {
+            color: #000;
+            font-size: 40px;
+            margin-bottom: 0;
+            font-weight: 400;
+            line-height: 1.4;
+        }
+
+        .hero .text h3 {
+            font-size: 24px;
+            font-weight: 300;
+        }
+
+        .hero .text h2 span {
+            font-weight: 600;
+            color: #D7A86E;
+        }
+
+
+        /*HEADING SECTION*/
+        .heading-section {}
+
+        .heading-section h2 {
+            color: #000000;
+            font-size: 28px;
+            margin-top: 0;
+            line-height: 1.4;
+            font-weight: 400;
+        }
+
+        .heading-section .subheading {
+            margin-bottom: 20px !important;
+            display: inline-block;
+            font-size: 13px;
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            color: rgba(0, 0, 0, .4);
+            position: relative;
+        }
+
+        .heading-section .subheading::after {
+            position: absolute;
+            left: 0;
+            right: 0;
+            bottom: -10px;
+            content: '';
+            width: 100%;
+            height: 2px;
+            background: #D7A86E;
+            margin: 0 auto;
+        }
+
+        .heading-section-white {
+            color: rgba(255, 255, 255, .8);
+        }
+
+        .heading-section-white h2 {
+            line-height: 1;
+            padding-bottom: 0;
+        }
+
+        .heading-section-white h2 {
+            color: #ffffff;
+        }
+
+        .heading-section-white .subheading {
+            margin-bottom: 0;
+            display: inline-block;
+            font-size: 13px;
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            color: rgba(255, 255, 255, .4);
+        }
+
+
+        ul.social {
+            padding: 0;
+        }
+
+        ul.social li {
+            display: inline-block;
+            margin-right: 10px;
+        }
+
+        /*FOOTER*/
+
+        .footer {
+            border-top: 1px solid rgba(0, 0, 0, .05);
+            color: rgba(0, 0, 0, .5);
+        }
+
+        .footer .heading {
+            color: #000;
+            font-size: 20px;
+        }
+
+        .footer ul {
+            margin: 0;
+            padding: 0;
+        }
+
+        .footer ul li {
+            list-style: none;
+            margin-bottom: 10px;
+        }
+
+        .footer ul li a {
+            color: rgba(0, 0, 0, 1);
+        }
+
+
+        @media screen and (max-width: 500px) {}
+    </style>
+
+
+</head>
+
+<body width="100%" style="margin: 0; padding: 0 !important; mso-line-height-rule: exactly; background-color: #f1f1f1;">
+    <center style="width: 100%; background-color: #f1f1f1;">
+        <div
+            style="display: none; font-size: 1px;max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden; mso-hide: all; font-family: sans-serif;">
+            &zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
+        </div>
+        <div style="max-width: 600px; margin: 0 auto;" class="email-container">
+            <!-- BEGIN BODY -->
+            <table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%"
+                style="margin: auto;">
+                <tr>
+                    <td valign="top" class="bg_white" style="padding: 1em 2.5em 0 2.5em;">
+                        <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
+                            <tr>
+
+                                <td class="logo" style="text-align: right;">
+                                    <img src="cid:logoKatoikia" alt="Logo Katoikia"
+                                        style="width: 60px; max-width: 60px; height: auto; margin: auto; display: block; float: right;">
+                                </td>
+                                <td class="logo" style="text-align: left;">
+                                    <h1><a href="#">Katoikia</a></h1>
+                                </td>
+                            </tr>
+                        </table>
+                    </td>
+
+                </tr><!-- end tr -->
+                <tr>
+                    <td valign="middle" class="hero bg_white" style="padding: 3em 0 2em 0;">
+                        <img src="cid:image_email" alt="Logo Katoikia"
+                            style="width: 150px; max-width: 300px; height: auto; margin: auto; display: block;">
+                    </td>
+                </tr><!-- end tr -->
+                <tr>
+                    <td valign="middle" class="hero bg_white" style="padding: 2em 0 4em 0;">
+                        <table>
+                            <tr>
+                                <td>
+                                    <div class="text" style="padding: 0 2.5em; text-align: center;">
+                                        <h2> Hola , {{ name }} <i class="fa-regular fa-face-smile-wink"
+                                                style="color:#D7A86E; font-size: 0.8em; margin-left: 20px;"></i></h2>
+                                        <h3>Ha sido registrado como un Administrador de la Comunidad `{{community_name}}`
+                                        </h3>
+
+                                        <h4><i class="fa-solid fa-calendar-day"
+                                                style="color:#D7A86E; margin-right: 10px;"></i> Fecha de registro
+                                            {{date_entry}}</h4>
+                                    </div>
+                                    <div class="text" style="padding: 0 4em; text-align: left;">
+                                        <h3>Estas son sus credenciales:</h3>
+                                        <p><i class="fa fa-regular fa-envelope"
+                                                style="color:#D7A86E; margin-right: 10px;"></i> Correo electronico:
+                                            {{email}}</p>
+                                        <p><i class="fa-solid fa-key" style="color:#D7A86E; margin-right: 10px;"></i>
+                                            Password: {{password}}</p>
+
+                                    </div>
+                                    <div class="text" style="padding: 0 2.5em; text-align: center;">
+                                        <h3>Inicie sesión en el sitio web para poder acceder y disfrutar todos sus
+                                            beneficios</h3>
+                                        <p><a href="{{ url }}" class="btn btn-primary">Iniciar sesión</a></p>
+                                    </div>
+                                </td>
+                            </tr>
+                        </table>
+                    </td>
+                </tr><!-- end tr -->
+
+                <!-- 1 Column Text + Button : END -->
+            </table>
+            <table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%"
+                style="margin: auto;">
+                <td valign="middle" class="bg_light footer email-section">
+                    <table>
+                        <tr>
+                            <td valign="top" width="33.333%" style="padding-top: 20px">
+                                <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
+                                    <tr>
+                                        <td style="text-align: left; padding-right: 10px">
+                                            <h3 class="heading">Acerca de</h3>
+                                            <p>Katoikia es su compañero más cercano para poder estar en contacto con sus
+                                                vecinos y conocer sobre los mejores anuncios sobre su comunidad.</p>
+                                        </td>
+                                    </tr>
+                                </table>
+                            </td>
+                            <td valign="top" width="33.333%" style="padding-top: 20px">
+                                <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
+                                    <tr>
+                                        <td style="text-align: left; padding-left: 5px; padding-right: 5px">
+                                            <h3 class="heading">Información de contacto</h3>
+                                            <ul>
+                                                <li><span href="mailto:katoikiaapp@gmail.com"
+                                                        class="text">katoikiaapp@gmail.com</span></li>
+                                            </ul>
+                                        </td>
+                                    </tr>
+                                </table>
+                            </td>
+                        </tr>
+                    </table>
+                </td>
+                </tr>
+                <!-- end: tr -->
+                <tr>
+                    <td class="bg_light" style="text-align: center">
+                        <p><a href="http://localhost:3000" style="color: rgba(0, 0, 0, 0.8)">katoikiaapp.org</a></p>
+                    </td>
+
+            </table>
+
+        </div>
+    </center>
+</body>
+
+</html>

servicio-reportes/src/reports/reports.service.ts

@@ -9,9 +9,8 @@ import { map } from 'rxjs/operators';
 export class ReportsService {
   constructor(
     @InjectModel(Report.name)
-    private readonly reportModel: Model<ReportDocument>,
-  ) //
-  {}
+    private readonly reportModel: Model<ReportDocument>, //
+  ) {}
 
   async create(report: ReportDocument): Promise<Report> {
     return this.reportModel.create(report);
@@ -32,6 +31,9 @@ export class ReportsService {
   }
 
   async remove(id: string) {
-    return this.reportModel.findByIdAndRemove({ _id: id }).exec();
+    return this.reportModel.findOneAndUpdate({ _id: id }, {status: '-1'}, {
+      new: true,
+    });  
+    
   }
 }

servicio-reservaciones/src/reservations/reservations.service.ts

@@ -41,6 +41,8 @@ export class ReservationsService {
   }
 
   async remove(id: string) {
-    return this.reservationModel.findByIdAndRemove({ _id: id }).exec();
+    return this.reservationModel.findOneAndUpdate({ _id: id }, {status: '-1'}, {
+      new: true,
+    });  
   }
 }

servicio-usuarios/package.json

@@ -29,10 +29,12 @@
     "@nestjs/platform-express": "^8.0.0",
     "@nestjs/swagger": "^5.2.1",
     "buffer": "^5.7.1",
+    "class-validator": "^0.13.2",
     "cors": "^2.8.5",
     "crypto-browserify": "^3.12.0",
     "md5-typescript": "^1.0.5",
     "mongoose": "^6.4.1",
+    "mongoose-unique-validator": "^3.1.0",
     "reflect-metadata": "^0.1.13",
     "rimraf": "^3.0.2",
     "rxjs": "^7.2.0",

servicio-usuarios/src/MongoExceptionFilter.ts

@@ -0,0 +1,14 @@
+import { ArgumentsHost, Catch, ConflictException, ExceptionFilter } from '@nestjs/common';
+import { MongoError } from 'mongodb';
+
+@Catch(MongoError)
+export class MongoExceptionFilter implements ExceptionFilter {
+  catch(exception: MongoError, host: ArgumentsHost) {
+    switch (exception.code) {
+      case 11000:
+          console.log('llave duplicada')
+        // duplicate exception
+        // do whatever you want here, for instance send error to client
+    }
+  }
+}

servicio-usuarios/src/app.module.ts

@@ -16,11 +16,12 @@ import { UsersModule } from './users/users.module';
       },
     ]),
     MongooseModule.forRoot(
-      `mongodb+srv://proyecto_4:proyecto_4@proyecto4.yv4fb.mongodb.net/servicio_usuarios?retryWrites=true&w=majority`,
+      `mongodb+srv://proyecto_4:proyecto_4@proyecto4.yv4fb.mongodb.net/servicio_usuarios?retryWrites=true&w=majority`
+
     ),
     UsersModule,
   ],
   controllers: [],
   providers: [],
 })
-export class AppModule {}
+export class AppModule { }

servicio-usuarios/src/exceptions/UserExistsRule.ts

@@ -0,0 +1,30 @@
+import { Injectable } from "@nestjs/common";
+import { Model } from 'mongoose';
+import { User, UserDocument } from '../schemas/user.schema';
+import { InjectModel } from '@nestjs/mongoose';
+import { ValidationArguments, ValidatorConstraint, ValidatorConstraintInterface } from "class-validator";
+
+
+@ValidatorConstraint({ name: 'UserExists', async: true })
+@Injectable()
+export class UserExistsRule implements ValidatorConstraintInterface {
+  constructor(    
+      @InjectModel(User.name) private readonly userModel: Model<UserDocument>,
+  ) {}
+
+  async validate(value: string) {
+    try {
+      await this.userModel.find({email: value});
+    } catch (e) {
+      return false;
+    }
+
+    return true;
+  }
+
+  defaultMessage(args: ValidationArguments) {
+    return `User doesn't exist`;
+  }
+}
+
+

servicio-usuarios/src/schemas/user.schema.ts

@@ -1,23 +1,25 @@
 import { Schema, Prop, SchemaFactory } from '@nestjs/mongoose';
 import { Document } from 'mongoose';
+var uniqueValidator = require('mongoose-unique-validator');
+import { IsEmail, IsNotEmpty, IsString, Validate } from 'class-validator';
 
 export type UserDocument = User & Document;
 
-@Schema({ collection: 'users' })
+@Schema({ collection: 'users'})
 export class User {
-  @Prop()
-  dni: string;
+  @Prop({index: true})
+  dni!: string;
 
-  @Prop()
+  @Prop({required: true})
   name: string;
 
-  @Prop()
+  @Prop({required: true})
   last_name: string;
 
-  @Prop()
-  email: string;
+  @Prop({required: true, unique: true})
+  email: string; 
 
-  @Prop()
+  @Prop({required: true, unique: true})
   phone: number;
 
   @Prop()
@@ -34,6 +36,10 @@ export class User {
 
   @Prop()
   community_id?: string;
+
+  @Prop()
+  number_house?: string;
 }
 
 export const UserSchema = SchemaFactory.createForClass(User);
+UserSchema.plugin(uniqueValidator);

servicio-usuarios/src/users/users.controller.ts

@@ -1,11 +1,12 @@
-import { Controller } from '@nestjs/common';
+import { Controller, UseFilters } from '@nestjs/common';
 import { MessagePattern, Payload } from '@nestjs/microservices';
 import { User, UserDocument } from '../schemas/user.schema';
 import { UsersService } from './users.service';
+import { MongoExceptionFilter } from 'src/MongoExceptionFilter';
 
 @Controller()
 export class UsersController {
-  constructor(private readonly userService: UsersService) {}
+  constructor(private readonly userService: UsersService) { }
 
   @MessagePattern({ cmd: 'createUser' })
   create(@Payload() user: UserDocument) {
@@ -13,6 +14,7 @@ export class UsersController {
   }
 
   @MessagePattern({ cmd: 'createAdminSystem' })
+  @UseFilters(MongoExceptionFilter)
   createUserAdmin(@Payload() user: UserDocument) {
     return this.userService.create(user);
   }
@@ -22,6 +24,11 @@ export class UsersController {
     return this.userService.create(user);
   }
 
+  @MessagePattern({ cmd: 'createAdminCommunity' })
+  createAdminCommunity(@Payload() user: UserDocument) {
+    return this.userService.createAdminCommunity(user);
+  }
+
   @MessagePattern({ cmd: 'findAllUsers' })
   findAll() {
     return this.userService.findAll();
@@ -33,17 +40,40 @@ export class UsersController {
     return this.userService.findOneByDNI(dni);
   }
 
+  @MessagePattern({ cmd: 'findById' })
+  findById(@Payload() id: string) {
+    let _id = id['id'];
+    return this.userService.findOne(_id);
+  }
+
   @MessagePattern({ cmd: 'findGuardsCommunity' })
   findGuardsCommunity(@Payload() community_id: string) {
     let pcommunity_id = community_id['community_id'];
     return this.userService.findGuardsCommunity(pcommunity_id);
   }
 
+  @MessagePattern({ cmd: 'findTenantsCommunity' })
+  findTenantsCommunity(@Payload() community_id: string) {
+    let pcommunity_id = community_id['community_id'];
+    return this.userService.findTenantsCommunity(pcommunity_id);
+  }
+
+  @MessagePattern({ cmd: 'findTenants' })
+  findTenants() {
+    return this.userService.findTenants();
+  }
+
+
   @MessagePattern({ cmd: 'updateUser' })
   update(@Payload() user: UserDocument) {
     return this.userService.update(user.id, user);
   }
 
+  @MessagePattern({ cmd: 'updateGuard' })
+  updateGuard(@Payload() guard: UserDocument) {
+    return this.userService.update(guard.id, guard);
+  }
+
   @MessagePattern({ cmd: 'removeUser' })
   remove(@Payload() id: string) {
     let dni = id['dni'];
@@ -87,8 +117,23 @@ export class UsersController {
 
   @MessagePattern({ cmd: 'deleteAdminSystem' })
   deleteAdminSystem(@Payload() user: any) {
-    console.log('entró');
-
     return this.userService.deleteAdminSystem(user['id']);
   }
+
+  @MessagePattern({ cmd: 'deleteAdminCommunity' })
+  deleteAdminCommunity(@Payload() user: any) {
+    return this.userService.deleteAdminCommunity(user['id']);
+  }
+
+  @MessagePattern({ cmd: 'deleteTenant' })
+  deleteTenant(@Payload() user: any) {
+    return this.userService.deleteTenant(user['id']);
+  }
+
+  @MessagePattern({ cmd: 'changeStatus' })
+  changeStatus(@Payload() body: string) {
+    let pid = body['id'];
+    let pstatus = body['status'];
+    return this.userService.changeStatus(pid, pstatus);
+  }
 }

servicio-usuarios/src/users/users.module.ts

@@ -18,7 +18,17 @@ import { ClientsModule, Transport } from '@nestjs/microservices';
         },
       },
     ]),
-    MongooseModule.forFeature([{ name: User.name, schema: UserSchema }]),
+    ClientsModule.register([
+      {
+        name: "SERVICIO_COMUNIDADES",
+        transport: Transport.TCP,
+        options: {
+          host: "127.0.0.1",
+          port: 3002
+        }
+      }
+    ]),
+    MongooseModule.forFeature([{ name: User.name, schema: UserSchema }]), 
   ],
   controllers: [UsersController],
   providers: [UsersService],

servicio-usuarios/src/users/users.service.ts

@@ -4,6 +4,7 @@ import { User, UserDocument } from '../schemas/user.schema';
 import { InjectModel } from '@nestjs/mongoose';
 import { Md5 } from 'md5-typescript';
 import { map } from 'rxjs/operators';
+import { lastValueFrom } from 'rxjs';
 
 import { RpcException, ClientProxy } from '@nestjs/microservices';
 
@@ -11,9 +12,10 @@ import { RpcException, ClientProxy } from '@nestjs/microservices';
 export class UsersService {
   constructor(
     @InjectModel(User.name) private readonly userModel: Model<UserDocument>,
-    @Inject('SERVICIO_NOTIFICACIONES')
-    private readonly clientNotificationtApp: ClientProxy,
-  ) {}
+    @Inject('SERVICIO_NOTIFICACIONES') private readonly clientNotificationtApp: ClientProxy,
+    @Inject('SERVICIO_COMUNIDADES') private readonly clientCommunityApp: ClientProxy,
+  ) { }
+
   private publicKey: string;
   async create(user: UserDocument): Promise<User> {
     let passwordEncriptada = Md5.init(user.password);
@@ -21,6 +23,44 @@ export class UsersService {
     return this.userModel.create(user);
   }
 
+
+  async createAdminCommunity(user: UserDocument) {
+    let password = user.password;
+    let passwordEncriptada = Md5.init(user.password);
+    user.password = passwordEncriptada;
+
+    this.userModel.create(user)
+
+
+    let community = await this.findCommunity(user.community_id);
+    user.community_id = community['name'];
+
+    const pattern = { cmd: 'emailCreateUserAdminCommunity' };
+    const payload = {
+      email: user['email'], password: password, name: user['name'],
+      date_entry: user['date_entry'], community_name: community['name']
+    };
+    return this.clientNotificationtApp
+      .send<string>(pattern, payload)
+      .pipe(
+        map((message: string) => ({ message })),
+      );
+  }
+
+  async findCommunity(community_id: string) {
+    const pattern = { cmd: 'findOneCommunity' }
+    const payload = { _id: community_id }
+
+    let callback = await this.clientCommunityApp
+      .send<string>(pattern, payload)
+      .pipe(
+        map((response: string) => ({ response }))
+      )
+    const finalValue = await lastValueFrom(callback);
+    return finalValue['response'];
+
+  }
+
   async findAll(): Promise<User[]> {
     return this.userModel.find().setOptions({ sanitizeFilter: true }).exec();
   }
@@ -38,8 +78,14 @@ export class UsersService {
     });
   }
 
+  /* async remove(id: string) {
+     return this.userModel.findByIdAndRemove({ _id: id }).exec();
+   }*/
+
   async remove(id: string) {
-    return this.userModel.findByIdAndRemove({ _id: id }).exec();
+    return this.userModel.findOneAndUpdate({ _id: id }, { status: '-1' }, {
+      new: true,
+    });
   }
 
   //inicio de sesion
@@ -53,8 +99,12 @@ export class UsersService {
           reject(err);
         } else {
           let passwordEncriptada = Md5.init(password);
-          if (res[0].password == passwordEncriptada) {
-            resolve(res[0]);
+          if (res.length > 0) {
+            if (res[0].password == passwordEncriptada) {
+              resolve(res[0]);
+            } else {
+              resolve(null);
+            }
           } else {
             resolve(null);
           }
@@ -79,6 +129,23 @@ export class UsersService {
     return this.userModel.find({ user_type: 2 }).exec();
   }
 
+
+  //find inquilinos
+  async findTenants(): Promise<User[]> {
+    return this.userModel.find({ user_type: 3 }).exec();
+  }
+
+
+  //find inquilinos
+  async findTenantsCommunity(pcommunity_id: string) {
+    //let tenants = await this.findCommunityTenants(pcommunity_id);
+
+
+
+    return await this.userModel.find({ community_id: pcommunity_id, user_type: 4 })
+  }
+
+
   async testSendMail(user: UserDocument) {
     let passwordEncriptada = Md5.init(user.password);
     user.password = passwordEncriptada;
@@ -104,6 +171,65 @@ export class UsersService {
   }
 
   async deleteAdminSystem(id: string) {
-    return this.userModel.deleteOne({ _id: id }).exec();
+    return this.userModel.findOneAndUpdate({ _id: id }, { status: '-1' }, {
+      new: true,
+    });
+  }
+
+  deleteAdminCommunity(id: string) {
+    return this.userModel.findOneAndUpdate({ _id: id }, { status: '-1' }, {
+      new: true,
+    });
+  }
+
+  async deleteTenant(id: string) {
+    return this.userModel.findOneAndUpdate({ _id: id }, { status: '-1' }, {
+      new: true,
+    });
+  }
+
+  async validateEmail(email: string) {
+    let repo1 = this.userModel;
+    return new Promise<User>((resolve, reject) => {
+      let repo = repo1;
+
+      repo.find({ email: email }).exec((err, res) => {
+        if (err) {
+          reject(err);
+        } else {
+          if (res.length > 0) {
+            return res;
+          }
+        }
+      });
+    });
+  }
+
+  async findNumHouseTenant(community_id: string, tenant_id: string): Promise<string> {
+    const pattern = { cmd: 'findOneCommunity' }
+    const payload = { _id: community_id }
+
+    let callback = this.clientCommunityApp
+      .send<string>(pattern, payload)
+      .pipe(map((response: string) => ({ response })))
+    const finalValue = await lastValueFrom(callback);
+    const response = finalValue['response'];
+    const houses = response['houses'];
+    let num_house = "";
+    await houses.forEach(async (house: { [x: string]: string; }) => {
+      if (house['tenant_id'] !== undefined) {
+        if (house['tenant_id'] === tenant_id) {
+          num_house = house['number_house'];
+        }
+      }
+    })
+    return num_house;
+  }
+
+  async changeStatus(id: string, status: string) {
+    return this.userModel.findOneAndUpdate({ _id: id }, { status: status }, {
+      new: true,
+    });
   }
 }
+

web-ui/web-react/package-lock.json

@@ -17,7 +17,8 @@
                 "@fullcalendar/interaction": "^5.7.2",
                 "@fullcalendar/react": "^5.7.0",
                 "@fullcalendar/timegrid": "^5.7.2",
-                "axios": "^0.19.0",
+                "axios": "^0.19.2",
+                "bootstrap": "^5.2.0",
                 "chart.js": "3.3.2",
                 "classnames": "^2.2.6",
                 "cors": "^2.8.5",
@@ -27,6 +28,7 @@
                 "prismjs": "1.9.0",
                 "react": "^17.0.1",
                 "react-app-polyfill": "^1.0.6",
+                "react-cookie": "^4.1.1",
                 "react-dom": "^17.0.1",
                 "react-router-dom": "^5.2.0",
                 "react-scripts": "3.4.1",
@@ -2287,6 +2289,16 @@
                 "node": ">= 6"
             }
         },
+        "node_modules/@popperjs/core": {
+            "version": "2.11.6",
+            "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
+            "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==",
+            "peer": true,
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/popperjs"
+            }
+        },
         "node_modules/@svgr/babel-plugin-add-jsx-attribute": {
             "version": "4.2.0",
             "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-4.2.0.tgz",
@@ -2475,6 +2487,11 @@
                 "@babel/types": "^7.3.0"
             }
         },
+        "node_modules/@types/cookie": {
+            "version": "0.3.3",
+            "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.3.3.tgz",
+            "integrity": "sha512-LKVP3cgXBT9RYj+t+9FDKwS5tdI+rPBXaNSkma7hvqy35lc7mAokC2zsqWJH0LaqIt3B962nuYI77hsJoT1gow=="
+        },
         "node_modules/@types/eslint-visitor-keys": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz",
@@ -2489,6 +2506,15 @@
                 "@types/node": "*"
             }
         },
+        "node_modules/@types/hoist-non-react-statics": {
+            "version": "3.3.1",
+            "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
+            "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
+            "dependencies": {
+                "@types/react": "*",
+                "hoist-non-react-statics": "^3.3.0"
+            }
+        },
         "node_modules/@types/istanbul-lib-coverage": {
             "version": "2.0.4",
             "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz",
@@ -2531,11 +2557,31 @@
             "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
             "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA=="
         },
+        "node_modules/@types/prop-types": {
+            "version": "15.7.5",
+            "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
+            "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
+        },
         "node_modules/@types/q": {
             "version": "1.5.5",
             "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.5.tgz",
             "integrity": "sha512-L28j2FcJfSZOnL1WBjDYp2vUHCeIFlyYI/53EwD/rKUBQ7MtUUfbQWiyKJGpcnv4/WgrhWsFKrcPstcAt/J0tQ=="
         },
+        "node_modules/@types/react": {
+            "version": "18.0.15",
+            "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.15.tgz",
+            "integrity": "sha512-iz3BtLuIYH1uWdsv6wXYdhozhqj20oD4/Hk2DNXIn1kFsmp9x8d9QB6FnPhfkbhd2PgEONt9Q1x/ebkwjfFLow==",
+            "dependencies": {
+                "@types/prop-types": "*",
+                "@types/scheduler": "*",
+                "csstype": "^3.0.2"
+            }
+        },
+        "node_modules/@types/scheduler": {
+            "version": "0.16.2",
+            "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
+            "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
+        },
         "node_modules/@types/stack-utils": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz",
@@ -4175,6 +4221,24 @@
             "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
             "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="
         },
+        "node_modules/bootstrap": {
+            "version": "5.2.0",
+            "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.0.tgz",
+            "integrity": "sha512-qlnS9GL6YZE6Wnef46GxGv1UpGGzAwO0aPL1yOjzDIJpeApeMvqV24iL+pjr2kU4dduoBA9fINKWKgMToobx9A==",
+            "funding": [
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/twbs"
+                },
+                {
+                    "type": "opencollective",
+                    "url": "https://opencollective.com/bootstrap"
+                }
+            ],
+            "peerDependencies": {
+                "@popperjs/core": "^2.11.5"
+            }
+        },
         "node_modules/brace-expansion": {
             "version": "1.1.11",
             "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -13402,6 +13466,19 @@
                 "node": ">=6"
             }
         },
+        "node_modules/react-cookie": {
+            "version": "4.1.1",
+            "resolved": "https://registry.npmjs.org/react-cookie/-/react-cookie-4.1.1.tgz",
+            "integrity": "sha512-ffn7Y7G4bXiFbnE+dKhHhbP+b8I34mH9jqnm8Llhj89zF4nPxPutxHT1suUqMeCEhLDBI7InYwf1tpaSoK5w8A==",
+            "dependencies": {
+                "@types/hoist-non-react-statics": "^3.0.1",
+                "hoist-non-react-statics": "^3.0.0",
+                "universal-cookie": "^4.0.0"
+            },
+            "peerDependencies": {
+                "react": ">= 16.3.0"
+            }
+        },
         "node_modules/react-dev-utils": {
             "version": "10.2.1",
             "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-10.2.1.tgz",
@@ -16599,6 +16676,23 @@
                 "imurmurhash": "^0.1.4"
             }
         },
+        "node_modules/universal-cookie": {
+            "version": "4.0.4",
+            "resolved": "https://registry.npmjs.org/universal-cookie/-/universal-cookie-4.0.4.tgz",
+            "integrity": "sha512-lbRVHoOMtItjWbM7TwDLdl8wug7izB0tq3/YVKhT/ahB4VDvWMyvnADfnJI8y6fSvsjh51Ix7lTGC6Tn4rMPhw==",
+            "dependencies": {
+                "@types/cookie": "^0.3.3",
+                "cookie": "^0.4.0"
+            }
+        },
+        "node_modules/universal-cookie/node_modules/cookie": {
+            "version": "0.4.2",
+            "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.2.tgz",
+            "integrity": "sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==",
+            "engines": {
+                "node": ">= 0.6"
+            }
+        },
         "node_modules/universalify": {
             "version": "0.1.2",
             "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
@@ -19623,6 +19717,12 @@
             "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz",
             "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw=="
         },
+        "@popperjs/core": {
+            "version": "2.11.6",
+            "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
+            "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==",
+            "peer": true
+        },
         "@svgr/babel-plugin-add-jsx-attribute": {
             "version": "4.2.0",
             "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-4.2.0.tgz",
@@ -19769,6 +19869,11 @@
                 "@babel/types": "^7.3.0"
             }
         },
+        "@types/cookie": {
+            "version": "0.3.3",
+            "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.3.3.tgz",
+            "integrity": "sha512-LKVP3cgXBT9RYj+t+9FDKwS5tdI+rPBXaNSkma7hvqy35lc7mAokC2zsqWJH0LaqIt3B962nuYI77hsJoT1gow=="
+        },
         "@types/eslint-visitor-keys": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz",
@@ -19783,6 +19888,15 @@
                 "@types/node": "*"
             }
         },
+        "@types/hoist-non-react-statics": {
+            "version": "3.3.1",
+            "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
+            "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
+            "requires": {
+                "@types/react": "*",
+                "hoist-non-react-statics": "^3.3.0"
+            }
+        },
         "@types/istanbul-lib-coverage": {
             "version": "2.0.4",
             "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz",
@@ -19825,11 +19939,31 @@
             "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
             "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA=="
         },
+        "@types/prop-types": {
+            "version": "15.7.5",
+            "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
+            "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
+        },
         "@types/q": {
             "version": "1.5.5",
             "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.5.tgz",
             "integrity": "sha512-L28j2FcJfSZOnL1WBjDYp2vUHCeIFlyYI/53EwD/rKUBQ7MtUUfbQWiyKJGpcnv4/WgrhWsFKrcPstcAt/J0tQ=="
         },
+        "@types/react": {
+            "version": "18.0.15",
+            "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.15.tgz",
+            "integrity": "sha512-iz3BtLuIYH1uWdsv6wXYdhozhqj20oD4/Hk2DNXIn1kFsmp9x8d9QB6FnPhfkbhd2PgEONt9Q1x/ebkwjfFLow==",
+            "requires": {
+                "@types/prop-types": "*",
+                "@types/scheduler": "*",
+                "csstype": "^3.0.2"
+            }
+        },
+        "@types/scheduler": {
+            "version": "0.16.2",
+            "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
+            "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
+        },
         "@types/stack-utils": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz",
@@ -21118,6 +21252,12 @@
             "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
             "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="
         },
+        "bootstrap": {
+            "version": "5.2.0",
+            "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.0.tgz",
+            "integrity": "sha512-qlnS9GL6YZE6Wnef46GxGv1UpGGzAwO0aPL1yOjzDIJpeApeMvqV24iL+pjr2kU4dduoBA9fINKWKgMToobx9A==",
+            "requires": {}
+        },
         "brace-expansion": {
             "version": "1.1.11",
             "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -28396,6 +28536,16 @@
                 "whatwg-fetch": "^3.0.0"
             }
         },
+        "react-cookie": {
+            "version": "4.1.1",
+            "resolved": "https://registry.npmjs.org/react-cookie/-/react-cookie-4.1.1.tgz",
+            "integrity": "sha512-ffn7Y7G4bXiFbnE+dKhHhbP+b8I34mH9jqnm8Llhj89zF4nPxPutxHT1suUqMeCEhLDBI7InYwf1tpaSoK5w8A==",
+            "requires": {
+                "@types/hoist-non-react-statics": "^3.0.1",
+                "hoist-non-react-statics": "^3.0.0",
+                "universal-cookie": "^4.0.0"
+            }
+        },
         "react-dev-utils": {
             "version": "10.2.1",
             "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-10.2.1.tgz",
@@ -30926,6 +31076,22 @@
                 "imurmurhash": "^0.1.4"
             }
         },
+        "universal-cookie": {
+            "version": "4.0.4",
+            "resolved": "https://registry.npmjs.org/universal-cookie/-/universal-cookie-4.0.4.tgz",
+            "integrity": "sha512-lbRVHoOMtItjWbM7TwDLdl8wug7izB0tq3/YVKhT/ahB4VDvWMyvnADfnJI8y6fSvsjh51Ix7lTGC6Tn4rMPhw==",
+            "requires": {
+                "@types/cookie": "^0.3.3",
+                "cookie": "^0.4.0"
+            },
+            "dependencies": {
+                "cookie": {
+                    "version": "0.4.2",
+                    "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.2.tgz",
+                    "integrity": "sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA=="
+                }
+            }
+        },
         "universalify": {
             "version": "0.1.2",
             "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",

web-ui/web-react/package.json

@@ -17,7 +17,8 @@
         "@fullcalendar/interaction": "^5.7.2",
         "@fullcalendar/react": "^5.7.0",
         "@fullcalendar/timegrid": "^5.7.2",
-        "axios": "^0.19.0",
+        "axios": "^0.19.2",
+        "bootstrap": "^5.2.0",
         "chart.js": "3.3.2",
         "classnames": "^2.2.6",
         "cors": "^2.8.5",
@@ -27,6 +28,7 @@
         "prismjs": "1.9.0",
         "react": "^17.0.1",
         "react-app-polyfill": "^1.0.6",
+        "react-cookie": "^4.1.1",
         "react-dom": "^17.0.1",
         "react-router-dom": "^5.2.0",
         "react-scripts": "3.4.1",

web-ui/web-react/public/assets/themes/khaki/theme.css

@@ -89,8 +89,8 @@
 }
 
 .p-icon-input-khaki {
-    border-top-right-radius: 0!important;
-    border-bottom-right-radius: 0!important;
+    border-top-right-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
     border-color: #C08135;
 }
 
@@ -7117,4 +7117,50 @@
 
 .p-button.p-button-danger:enabled:focus {
     box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #f7a2a2, 0 1px 2px 0 black;
+}
+
+
+.icon-khaki {
+    color: var(--primary-color);
+}
+
+.row {
+    display: flex;
+}
+
+
+.status {
+    border-radius: var(--border-radius);
+    padding: 0.25em 0.5rem;
+    text-transform: uppercase;
+    font-weight: 700;
+    font-size: 12px;
+    letter-spacing: 0.3px;
+}
+
+.status.status-1 {
+    background: #c8e6c9!important;
+    color: #256029!important;
+}
+
+.status.status-0 {
+    background: #ffcdd2;
+    color: #c63737;
+}
+
+.status.status-2 {
+    background: #feedaf;
+    color: #8a5340;
+}
+
+.status.status--1 {
+    background: #565656;
+    color: #f7f9f7;
+}
+
+
+.login-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 }

web-ui/web-react/src/App.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react';
 import classNames from 'classnames';
-import { Route, useLocation } from 'react-router-dom';
+import { BrowserRouter, Switch, Route, useLocation } from 'react-router-dom';
 import { CSSTransition } from 'react-transition-group';
 
 import { AppTopbar } from './AppTopbar';
@@ -33,6 +33,8 @@ import AdministradoresComunidad from './components/AdministradoresComunidad';
 import GuardasSeguridad from './components/GuardasSeguridad';
 import Communities from './components/ComunidadViviendas';
 import Inquilinos from './components/Inquilinos';
+import RegistroComunicado from './components/RegistroComunicado';
+import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
 
 import Crud from './pages/Crud';
 import EmptyPage from './pages/EmptyPage';
@@ -49,395 +51,480 @@ import './assets/demo/flags/flags.css';
 import './assets/demo/Demos.scss';
 import './assets/layout/layout.scss';
 import './App.scss';
-import LogIn from './components/LogIn';
 import { PrimeIcons } from 'primereact/api';
+import AreasComunes from './components/AreasComunes';
+import { useCookies } from "react-cookie";
+import LogInUser from './components/LogInUser';
+import Page404 from './components/Page404'
+
 
 const App = () => {
-  const [layoutMode, setLayoutMode] = useState('static');
-  const [layoutColorMode, setLayoutColorMode] = useState('light');
-  const [inputStyle, setInputStyle] = useState('outlined');
-  const [ripple, setRipple] = useState(true);
-  const [staticMenuInactive, setStaticMenuInactive] = useState(false);
-  const [overlayMenuActive, setOverlayMenuActive] = useState(false);
-  const [mobileMenuActive, setMobileMenuActive] = useState(false);
-  const [mobileTopbarMenuActive, setMobileTopbarMenuActive] = useState(false);
-  const copyTooltipRef = useRef();
-  const location = useLocation();
+    const [layoutMode, setLayoutMode] = useState('static');
+    const [layoutColorMode, setLayoutColorMode] = useState('light')
+    const [inputStyle, setInputStyle] = useState('outlined');
+    const [ripple, setRipple] = useState(true);
+    const [staticMenuInactive, setStaticMenuInactive] = useState(false);
+    const [overlayMenuActive, setOverlayMenuActive] = useState(false);
+    const [mobileMenuActive, setMobileMenuActive] = useState(false);
+    const [mobileTopbarMenuActive, setMobileTopbarMenuActive] = useState(false);
+    const copyTooltipRef = useRef();
+    const location = useLocation();
+    const [cookies, setCookies] = useCookies();
+    const [logged, setLogged] = useState()
 
-  PrimeReact.ripple = true;
+    PrimeReact.ripple = true;
 
-  let menuClick = false;
-  let mobileTopbarMenuClick = false;
+    let menuClick = false;
+    let mobileTopbarMenuClick = false;
 
-  useEffect(() => {
-    if (mobileMenuActive) {
-      addClass(document.body, 'body-overflow-hidden');
-    } else {
-      removeClass(document.body, 'body-overflow-hidden');
-    }
-  }, [mobileMenuActive]);
+    useEffect(() => {
+        if (mobileMenuActive) {
+            addClass(document.body, 'body-overflow-hidden');
+        } else {
+            removeClass(document.body, 'body-overflow-hidden');
+        }
+    }, [mobileMenuActive]);
 
-  useEffect(() => {
-    copyTooltipRef &&
-      copyTooltipRef.current &&
-      copyTooltipRef.current.updateTargetEvents();
-  }, [location]);
+    useEffect(() => {
+        copyTooltipRef &&
+            copyTooltipRef.current &&
+            copyTooltipRef.current.updateTargetEvents();
+    }, [location]);
 
-  const onInputStyleChange = (inputStyle) => {
-    setInputStyle(inputStyle);
-  };
 
-  const onRipple = (e) => {
-    PrimeReact.ripple = e.value;
-    setRipple(e.value);
-  };
 
-  const onLayoutModeChange = (mode) => {
-    setLayoutMode(mode);
-  };
 
-  const onColorModeChange = (mode) => {
-    setLayoutColorMode(mode);
-  };
 
-  const onWrapperClick = (event) => {
-    if (!menuClick) {
-      setOverlayMenuActive(false);
-      setMobileMenuActive(false);
-    }
 
-    if (!mobileTopbarMenuClick) {
-      setMobileTopbarMenuActive(false);
-    }
 
-    mobileTopbarMenuClick = false;
-    menuClick = false;
-  };
+    const onInputStyleChange = (inputStyle) => {
+        setInputStyle(inputStyle);
+    };
 
-  const onToggleMenuClick = (event) => {
-    menuClick = true;
+    const onRipple = (e) => {
+        PrimeReact.ripple = e.value;
+        setRipple(e.value);
+    };
 
-    if (isDesktop()) {
-      if (layoutMode === 'overlay') {
-        if (mobileMenuActive === true) {
-          setOverlayMenuActive(true);
+    const onLayoutModeChange = (mode) => {
+        setLayoutMode(mode);
+    };
+
+    const onColorModeChange = (mode) => {
+        setLayoutColorMode(mode);
+    };
+
+    const onWrapperClick = (event) => {
+        if (!menuClick) {
+            setOverlayMenuActive(false);
+            setMobileMenuActive(false);
         }
 
-        setOverlayMenuActive((prevState) => !prevState);
-        setMobileMenuActive(false);
-      } else if (layoutMode === 'static') {
-        setStaticMenuInactive((prevState) => !prevState);
-      }
-    } else {
-      setMobileMenuActive((prevState) => !prevState);
+        if (!mobileTopbarMenuClick) {
+            setMobileTopbarMenuActive(false);
+        }
+
+        mobileTopbarMenuClick = false;
+        menuClick = false;
+    };
+
+    const onToggleMenuClick = (event) => {
+        menuClick = true;
+
+        if (isDesktop()) {
+            if (layoutMode === 'overlay') {
+                if (mobileMenuActive === true) {
+                    setOverlayMenuActive(true);
+                }
+
+                setOverlayMenuActive((prevState) => !prevState);
+                setMobileMenuActive(false);
+            } else if (layoutMode === 'static') {
+                setStaticMenuInactive((prevState) => !prevState);
+            }
+        } else {
+            setMobileMenuActive((prevState) => !prevState);
+        }
+
+        event.preventDefault();
+    };
+
+    const onSidebarClick = () => {
+        menuClick = true;
+    };
+
+    const onMobileTopbarMenuClick = (event) => {
+        mobileTopbarMenuClick = true;
+
+        setMobileTopbarMenuActive((prevState) => !prevState);
+        event.preventDefault();
+    };
+
+    const onMobileSubTopbarMenuClick = (event) => {
+        mobileTopbarMenuClick = true;
+
+        event.preventDefault();
+    };
+
+    const onMenuItemClick = (event) => {
+        if (!event.item.items) {
+            setOverlayMenuActive(false);
+            setMobileMenuActive(false);
+        }
+    };
+    const isDesktop = () => {
+        return window.innerWidth >= 992;
+    };
+
+    const menu2 = [
+        {
+            label: 'Inicio',
+            items: [
+                { label: 'Dashboard', icon: 'pi pi-fw pi-home', to: '/' },
+                { label: 'Administradores del sistema', icon: PrimeIcons.USERS, to: '/administradoresSistema' },
+                { label: 'Administradores de comunidad', icon: PrimeIcons.USERS, to: '/administradoresComunidad' },
+                { label: 'Comunidades', icon: PrimeIcons.BUILDING, to: '/comunidadesViviendas' },
+            ]
+        }
+    ]
+
+
+    const menu3 = [
+        {
+            label: 'Inicio',
+            items: [
+                { label: 'Dashboard', icon: 'pi pi-fw pi-home', to: '/' },
+                { label: 'Inquilinos', icon: PrimeIcons.USERS, to: '/inquilinos' },
+                { label: 'Guardas de seguridad', icon: PrimeIcons.LOCK, to: '/guardasSeguridad' },
+                {
+                    label: 'Áreas Comunes de Comunidad',
+                    icon: PrimeIcons.BUILDING,
+                    to: '/areasComunes',
+                },
+                
+                { label: 'Comunicados', icon: PrimeIcons.COMMENTS, to: '/registroComunicado'},
+    
+            ]
+        },
+    ]
+
+    const menuLogin = [
+        {
+            label: 'Inicio',
+            items: [
+                {
+                    label: 'Inicio de sesion',
+                    icon: PrimeIcons.BUILDING,
+                    to: '/login'
+                },
+            ]
+        },
+    ]
+
+    function menu4() {
+        if (cookies.type == '1') {
+            return menu2;
+        } else if (cookies.type == '2') {
+            return menu3;
+        } else {
+            return menuLogin;
+        }
     }
 
-    event.preventDefault();
-  };
-
-  const onSidebarClick = () => {
-    menuClick = true;
-  };
-
-  const onMobileTopbarMenuClick = (event) => {
-    mobileTopbarMenuClick = true;
-
-    setMobileTopbarMenuActive((prevState) => !prevState);
-    event.preventDefault();
-  };
-
-  const onMobileSubTopbarMenuClick = (event) => {
-    mobileTopbarMenuClick = true;
-
-    event.preventDefault();
-  };
-
-  const onMenuItemClick = (event) => {
-    if (!event.item.items) {
-      setOverlayMenuActive(false);
-      setMobileMenuActive(false);
-    }
-  };
-  const isDesktop = () => {
-    return window.innerWidth >= 992;
-  };
-
-  const menu = [
-    {
-      label: 'Home',
-      items: [
-        { label: 'Dashboard', icon: 'pi pi-fw pi-home', to: '/' },
+    const menu = [
         {
-          label: 'Administradores del sistema',
-          icon: PrimeIcons.USERS,
-          to: '/administradoresSistema',
+            label: 'Inicio',
+            items:
+                [
+                    {
+                        label: 'Administradores del sistema',
+                        icon: PrimeIcons.USERS,
+                        to: '/administradoresSistema',
+                    },
+                    {
+                        label: 'Administradores de comunidad',
+                        icon: PrimeIcons.USERS,
+                        to: '/administradoresComunidad',
+                    },
+                    {
+                        label: 'Guardas de seguridad',
+                        icon: PrimeIcons.LOCK,
+                        to: '/guardasSeguridad',
+                    },
+                    {
+                        label: 'Comunidades',
+                        icon: PrimeIcons.BUILDING,
+                        to: '/comunidadesViviendas',
+                    },
+                    {
+                        label: 'Inquilinos',
+                        icon: PrimeIcons.USER,
+                        to: '/inquilinos'
+                    },
+                    {
+                        label: 'Áreas Comunes de Comunidad',
+                        icon: PrimeIcons.BUILDING,
+                        to: '/areasComunes',
+                    },
+                    { label: 'Log in', icon: 'pi pi-fw pi-id-card', to: '/logIn' },
+                ],
         },
         {
-          label: 'Administradores de comunidad',
-          icon: PrimeIcons.USERS,
-          to: '/administradoresComunidad',
+            label: 'UI Components',
+            icon: 'pi pi-fw pi-sitemap',
+            items: [
+                {
+                    label: 'Form Layout',
+                    icon: 'pi pi-fw pi-id-card',
+                    to: '/formlayout',
+                },
+                { label: 'Input', icon: 'pi pi-fw pi-check-square', to: '/input' },
+                {
+                    label: 'Float Label',
+                    icon: 'pi pi-fw pi-bookmark',
+                    to: '/floatlabel',
+                },
+                {
+                    label: 'Invalid State',
+                    icon: 'pi pi-fw pi-exclamation-circle',
+                    to: 'invalidstate',
+                },
+                { label: 'Button', icon: 'pi pi-fw pi-mobile', to: '/button' },
+                { label: 'Table', icon: 'pi pi-fw pi-table', to: '/table' },
+                { label: 'List', icon: 'pi pi-fw pi-list', to: '/list' },
+                { label: 'Tree', icon: 'pi pi-fw pi-share-alt', to: '/tree' },
+                { label: 'Panel', icon: 'pi pi-fw pi-tablet', to: '/panel' },
+                { label: 'Overlay', icon: 'pi pi-fw pi-clone', to: '/overlay' },
+                { label: 'Media', icon: 'pi pi-fw pi-image', to: '/media' },
+                { label: 'Menu', icon: 'pi pi-fw pi-bars', to: '/menu' },
+                { label: 'Message', icon: 'pi pi-fw pi-comment', to: '/messages' },
+                { label: 'File', icon: 'pi pi-fw pi-file', to: '/file' },
+                { label: 'Chart', icon: 'pi pi-fw pi-chart-bar', to: '/chart' },
+                { label: 'Misc', icon: 'pi pi-fw pi-circle-off', to: '/misc' },
+            ],
         },
         {
-          label: 'Guardas de seguridad',
-          icon: PrimeIcons.LOCK,
-          to: '/guardasSeguridad',
+            label: 'UI Blocks',
+            items: [
+                {
+                    label: 'Free Blocks',
+                    icon: 'pi pi-fw pi-eye',
+                    to: '/blocks',
+                    badge: 'NEW',
+                },
+                {
+                    label: 'All Blocks',
+                    icon: 'pi pi-fw pi-globe',
+                    url: 'https://www.primefaces.org/primeblocks-react',
+                },
+            ],
         },
         {
-          label: 'Comunidadades',
-          icon: PrimeIcons.BUILDING,
-          to: '/comunidadesViviendas',
-        },
-        { label: 'Inquilinos', icon: PrimeIcons.USER, to: '/inquilinos' },
-        { label: 'Log in', icon: 'pi pi-fw pi-id-card', to: '/logIn' },
-      ],
-    },
-    {
-      label: 'UI Components',
-      icon: 'pi pi-fw pi-sitemap',
-      items: [
-        {
-          label: 'Form Layout',
-          icon: 'pi pi-fw pi-id-card',
-          to: '/formlayout',
-        },
-        { label: 'Input', icon: 'pi pi-fw pi-check-square', to: '/input' },
-        {
-          label: 'Float Label',
-          icon: 'pi pi-fw pi-bookmark',
-          to: '/floatlabel',
+            label: 'Icons',
+            items: [{ label: 'PrimeIcons', icon: 'pi pi-fw pi-prime', to: '/icons' }],
         },
         {
-          label: 'Invalid State',
-          icon: 'pi pi-fw pi-exclamation-circle',
-          to: 'invalidstate',
-        },
-        { label: 'Button', icon: 'pi pi-fw pi-mobile', to: '/button' },
-        { label: 'Table', icon: 'pi pi-fw pi-table', to: '/table' },
-        { label: 'List', icon: 'pi pi-fw pi-list', to: '/list' },
-        { label: 'Tree', icon: 'pi pi-fw pi-share-alt', to: '/tree' },
-        { label: 'Panel', icon: 'pi pi-fw pi-tablet', to: '/panel' },
-        { label: 'Overlay', icon: 'pi pi-fw pi-clone', to: '/overlay' },
-        { label: 'Media', icon: 'pi pi-fw pi-image', to: '/media' },
-        { label: 'Menu', icon: 'pi pi-fw pi-bars', to: '/menu' },
-        { label: 'Message', icon: 'pi pi-fw pi-comment', to: '/messages' },
-        { label: 'File', icon: 'pi pi-fw pi-file', to: '/file' },
-        { label: 'Chart', icon: 'pi pi-fw pi-chart-bar', to: '/chart' },
-        { label: 'Misc', icon: 'pi pi-fw pi-circle-off', to: '/misc' },
-      ],
-    },
-    {
-      label: 'UI Blocks',
-      items: [
-        {
-          label: 'Free Blocks',
-          icon: 'pi pi-fw pi-eye',
-          to: '/blocks',
-          badge: 'NEW',
+            label: 'Pages',
+            icon: 'pi pi-fw pi-clone',
+            items: [
+                { label: 'Crud', icon: 'pi pi-fw pi-user-edit', to: '/crud' },
+                { label: 'Timeline', icon: 'pi pi-fw pi-calendar', to: '/timeline' },
+                { label: 'Empty', icon: 'pi pi-fw pi-circle-off', to: '/empty' },
+            ],
         },
         {
-          label: 'All Blocks',
-          icon: 'pi pi-fw pi-globe',
-          url: 'https://www.primefaces.org/primeblocks-react',
+            label: 'Menu Hierarchy',
+            icon: 'pi pi-fw pi-search',
+            items: [
+                {
+                    label: 'Submenu 1',
+                    icon: 'pi pi-fw pi-bookmark',
+                    items: [
+                        {
+                            label: 'Submenu 1.1',
+                            icon: 'pi pi-fw pi-bookmark',
+                            items: [
+                                { label: 'Submenu 1.1.1', icon: 'pi pi-fw pi-bookmark' },
+                                { label: 'Submenu 1.1.2', icon: 'pi pi-fw pi-bookmark' },
+                                { label: 'Submenu 1.1.3', icon: 'pi pi-fw pi-bookmark' },
+                            ],
+                        },
+                        {
+                            label: 'Submenu 1.2',
+                            icon: 'pi pi-fw pi-bookmark',
+                            items: [
+                                { label: 'Submenu 1.2.1', icon: 'pi pi-fw pi-bookmark' },
+                                { label: 'Submenu 1.2.2', icon: 'pi pi-fw pi-bookmark' },
+                            ],
+                        },
+                    ],
+                },
+                {
+                    label: 'Submenu 2',
+                    icon: 'pi pi-fw pi-bookmark',
+                    items: [
+                        {
+                            label: 'Submenu 2.1',
+                            icon: 'pi pi-fw pi-bookmark',
+                            items: [
+                                { label: 'Submenu 2.1.1', icon: 'pi pi-fw pi-bookmark' },
+                                { label: 'Submenu 2.1.2', icon: 'pi pi-fw pi-bookmark' },
+                                { label: 'Submenu 2.1.3', icon: 'pi pi-fw pi-bookmark' },
+                            ],
+                        },
+                        {
+                            label: 'Submenu 2.2',
+                            icon: 'pi pi-fw pi-bookmark',
+                            items: [
+                                { label: 'Submenu 2.2.1', icon: 'pi pi-fw pi-bookmark' },
+                                { label: 'Submenu 2.2.2', icon: 'pi pi-fw pi-bookmark' },
+                            ],
+                        },
+                    ],
+                },
+            ],
         },
-      ],
-    },
-    {
-      label: 'Icons',
-      items: [{ label: 'PrimeIcons', icon: 'pi pi-fw pi-prime', to: '/icons' }],
-    },
-    {
-      label: 'Pages',
-      icon: 'pi pi-fw pi-clone',
-      items: [
-        { label: 'Crud', icon: 'pi pi-fw pi-user-edit', to: '/crud' },
-        { label: 'Timeline', icon: 'pi pi-fw pi-calendar', to: '/timeline' },
-        { label: 'Empty', icon: 'pi pi-fw pi-circle-off', to: '/empty' },
-      ],
-    },
-    {
-      label: 'Menu Hierarchy',
-      icon: 'pi pi-fw pi-search',
-      items: [
-        {
-          label: 'Submenu 1',
-          icon: 'pi pi-fw pi-bookmark',
-          items: [
-            {
-              label: 'Submenu 1.1',
-              icon: 'pi pi-fw pi-bookmark',
-              items: [
-                { label: 'Submenu 1.1.1', icon: 'pi pi-fw pi-bookmark' },
-                { label: 'Submenu 1.1.2', icon: 'pi pi-fw pi-bookmark' },
-                { label: 'Submenu 1.1.3', icon: 'pi pi-fw pi-bookmark' },
-              ],
-            },
-            {
-              label: 'Submenu 1.2',
-              icon: 'pi pi-fw pi-bookmark',
-              items: [
-                { label: 'Submenu 1.2.1', icon: 'pi pi-fw pi-bookmark' },
-                { label: 'Submenu 1.2.2', icon: 'pi pi-fw pi-bookmark' },
-              ],
-            },
-          ],
-        },
-        {
-          label: 'Submenu 2',
-          icon: 'pi pi-fw pi-bookmark',
-          items: [
-            {
-              label: 'Submenu 2.1',
-              icon: 'pi pi-fw pi-bookmark',
-              items: [
-                { label: 'Submenu 2.1.1', icon: 'pi pi-fw pi-bookmark' },
-                { label: 'Submenu 2.1.2', icon: 'pi pi-fw pi-bookmark' },
-                { label: 'Submenu 2.1.3', icon: 'pi pi-fw pi-bookmark' },
-              ],
-            },
-            {
-              label: 'Submenu 2.2',
-              icon: 'pi pi-fw pi-bookmark',
-              items: [
-                { label: 'Submenu 2.2.1', icon: 'pi pi-fw pi-bookmark' },
-                { label: 'Submenu 2.2.2', icon: 'pi pi-fw pi-bookmark' },
-              ],
-            },
-          ],
-        },
-      ],
-    },
-  ];
+    ];
 
-  const addClass = (element, className) => {
-    if (element.classList) element.classList.add(className);
-    else element.className += ' ' + className;
-  };
+    const addClass = (element, className) => {
+        if (element.classList) element.classList.add(className);
+        else element.className += ' ' + className;
+    };
 
-  const removeClass = (element, className) => {
-    if (element.classList) element.classList.remove(className);
-    else
-      element.className = element.className.replace(
-        new RegExp(
-          '(^|\\b)' + className.split(' ').join('|') + '(\\b|$)',
-          'gi',
-        ),
-        ' ',
-      );
-  };
+    const removeClass = (element, className) => {
+        if (element.classList) element.classList.remove(className);
+        else
+            element.className = element.className.replace(
+                new RegExp(
+                    '(^|\\b)' + className.split(' ').join('|') + '(\\b|$)',
+                    'gi',
+                ),
+                ' ',
+            );
+    };
 
-  const wrapperClass = classNames('layout-wrapper', {
-    'layout-overlay': layoutMode === 'overlay',
-    'layout-static': layoutMode === 'static',
-    'layout-static-sidebar-inactive':
-      staticMenuInactive && layoutMode === 'static',
-    'layout-overlay-sidebar-active':
-      overlayMenuActive && layoutMode === 'overlay',
-    'layout-mobile-sidebar-active': mobileMenuActive,
-    'p-input-filled': inputStyle === 'filled',
-    'p-ripple-disabled': ripple === false,
-    'layout-theme-light': layoutColorMode === 'light',
-  });
+    const wrapperClass = classNames('layout-wrapper', {
+        'layout-overlay': layoutMode === 'overlay',
+        'layout-static': layoutMode === 'static',
+        'layout-static-sidebar-inactive':
+            staticMenuInactive && layoutMode === 'static',
+        'layout-overlay-sidebar-active':
+            overlayMenuActive && layoutMode === 'overlay',
+        'layout-mobile-sidebar-active': mobileMenuActive,
+        'p-input-filled': inputStyle === 'filled',
+        'p-ripple-disabled': ripple === false,
+        'layout-theme-light': layoutColorMode === 'light',
+    });
 
-  return (
-    <div className={wrapperClass} onClick={onWrapperClick}>
-      <Tooltip
-        ref={copyTooltipRef}
-        target=".block-action-copy"
-        position="bottom"
-        content="Copied to clipboard"
-        event="focus"
-      />
 
-      <AppTopbar
-        onToggleMenuClick={onToggleMenuClick}
-        layoutColorMode={layoutColorMode}
-        mobileTopbarMenuActive={mobileTopbarMenuActive}
-        onMobileTopbarMenuClick={onMobileTopbarMenuClick}
-        onMobileSubTopbarMenuClick={onMobileSubTopbarMenuClick}
-      />
 
-      <div className="layout-sidebar" onClick={onSidebarClick}>
-        <AppMenu
-          model={menu}
-          onMenuItemClick={onMenuItemClick}
-          layoutColorMode={layoutColorMode}
-        />
-      </div>
 
-      <div className="layout-main-container">
-        <div className="layout-main">
-          <Route
-            path="/"
-            exact
-            render={() => (
-              <Dashboard colorMode={layoutColorMode} location={location} />
-            )}
-          />
-          <Route path="/formlayout" component={FormLayoutDemo} />
-          <Route path="/input" component={InputDemo} />
-          <Route path="/floatlabel" component={FloatLabelDemo} />
-          <Route path="/invalidstate" component={InvalidStateDemo} />
-          <Route path="/button" component={ButtonDemo} />
-          <Route path="/table" component={TableDemo} />
-          <Route path="/list" component={ListDemo} />
-          <Route path="/tree" component={TreeDemo} />
-          <Route path="/panel" component={PanelDemo} />
-          <Route path="/overlay" component={OverlayDemo} />
-          <Route path="/media" component={MediaDemo} />
-          <Route path="/menu" component={MenuDemo} />
-          <Route path="/messages" component={MessagesDemo} />
-          <Route path="/blocks" component={BlocksDemo} />
-          <Route path="/icons" component={IconsDemo} />
-          <Route path="/file" component={FileDemo} />
-          <Route
-            path="/chart"
-            render={() => (
-              <ChartDemo colorMode={layoutColorMode} location={location} />
-            )}
-          />
-          <Route path="/misc" component={MiscDemo} />
-          <Route path="/timeline" component={TimelineDemo} />
-          <Route path="/crud" component={Crud} />
-          <Route path="/empty" component={EmptyPage} />
-          <Route path="/documentation" component={Documentation} />
-          <Route
-            path="/administradoresSistema"
-            component={AdministradoresSistema}
-          />
-          <Route
-            path="/administradoresComunidad"
-            component={AdministradoresComunidad}
-          />
-          <Route path="/guardasSeguridad" component={GuardasSeguridad} />
-          <Route path="/comunidadesViviendas" component={Communities} />
-          <Route path="/inquilinos" component={Inquilinos} />
-          <Route path="/logIn" component={LogIn} />
-        </div>
+    return (
 
-        <AppFooter layoutColorMode={layoutColorMode} />
-      </div>
+        <BrowserRouter>
+            <Switch>
 
-      <AppConfig
-        rippleEffect={ripple}
-        onRippleEffect={onRipple}
-        inputStyle={inputStyle}
-        onInputStyleChange={onInputStyleChange}
-        layoutMode={layoutMode}
-        onLayoutModeChange={onLayoutModeChange}
-        layoutColorMode={layoutColorMode}
-        onColorModeChange={onColorModeChange}
-      />
+                <div className={wrapperClass} onClick={onWrapperClick}>
 
-      <CSSTransition
-        classNames="layout-mask"
-        timeout={{ enter: 200, exit: 200 }}
-        in={mobileMenuActive}
-        unmountOnExit
-      >
-        <div className="layout-mask p-component-overlay"></div>
-      </CSSTransition>
-    </div>
-  );
-};
+
+                    <Tooltip ref={copyTooltipRef} target=".block-action-copy" position="bottom" content="Copied to clipboard" event="focus" />
+
+                    <AppTopbar onToggleMenuClick={onToggleMenuClick} layoutColorMode={layoutColorMode}
+                        mobileTopbarMenuActive={mobileTopbarMenuActive} onMobileTopbarMenuClick={onMobileTopbarMenuClick} onMobileSubTopbarMenuClick={onMobileSubTopbarMenuClick} />
+
+                    <div className="layout-sidebar" onClick={onSidebarClick}>
+                        <AppMenu model={menu4()} onMenuItemClick={onMenuItemClick} layoutColorMode={layoutColorMode} />
+                    </div>
+
+                    <div className="layout-main-container">
+                        <div className="layout-main">
+                            {(() => {
+                                if (!cookies.email) {
+                                    return (
+                                        <>
+
+                                            <Route path="/login" exact component={LogInUser} />
+                                        </>
+
+                                    )
+                                } else {
+
+                                    if (cookies.type == '1') {
+                                        return (
+                                            <>
+                                                <Route path="/" exact render={() => <Dashboard colorMode={layoutColorMode} location={location} />} />
+                                                <Route path="/administradoresSistema" component={AdministradoresSistema} />
+                                                <Route path="/administradoresComunidad" component={AdministradoresComunidad} />
+                                                <Route path="/comunidadesViviendas" component={Communities} />
+                                            </>
+
+                                        )
+
+                                    } else if (cookies.type == '2') {
+                                        return (
+                                            <>
+                                                <Route path="/" exact render={() => <Dashboard colorMode={layoutColorMode} location={location} />} />
+                                                <Route path="/guardasSeguridad" component={GuardasSeguridad} />
+                                                <Route path="/inquilinos" component={Inquilinos} />
+                                                <Route path="/areasComunes" component={AreasComunes} />
+                                                <Route path="/registroComunicado" component={RegistroComunicado} />
+                                            </>
+                                        )
+                                    } else {
+                                        return (
+                                            <Route path="/page404" exact component={Page404} />
+                                        )
+                                    }
+
+
+                                    return (
+                                        <>
+                                            <Route path="/" exact render={() => <Dashboard colorMode={layoutColorMode} location={location} />} />
+                                            <Route path="/formlayout" component={FormLayoutDemo} />
+                                            <Route path="/input" component={InputDemo} />
+                                            <Route path="/floatlabel" component={FloatLabelDemo} />
+                                            <Route path="/invalidstate" component={InvalidStateDemo} />
+                                            <Route path="/button" component={ButtonDemo} />
+                                            <Route path="/table" component={TableDemo} />
+                                            <Route path="/list" component={ListDemo} />
+                                            <Route path="/tree" component={TreeDemo} />
+                                            <Route path="/panel" component={PanelDemo} />
+                                            <Route path="/overlay" component={OverlayDemo} />
+                                            <Route path="/media" component={MediaDemo} />
+                                            <Route path="/menu" component={MenuDemo} />
+                                            <Route path="/messages" component={MessagesDemo} />
+                                            {/*<Route path="/blocks" component={BlocksDemo} />*/}
+                                            <Route path="/icons" component={IconsDemo} />
+                                            <Route path="/file" component={FileDemo} />
+                                            <Route path="/chart" render={() => <ChartDemo colorMode={layoutColorMode} location={location} />} />
+                                            <Route path="/misc" component={MiscDemo} />
+                                            <Route path="/timeline" component={TimelineDemo} />
+                                            <Route path="/crud" component={Crud} />
+                                            <Route path="/empty" component={EmptyPage} />
+                                            <Route path="/documentation" component={Documentation} />
+                                        </>
+
+                                    )
+
+                                }
+                            })()}
+
+                        </div>
+
+                        <AppFooter layoutColorMode={layoutColorMode} />
+                    </div>
+
+                    <AppConfig />
+
+                    <CSSTransition classNames="layout-mask" timeout={{ enter: 200, exit: 200 }} in={mobileMenuActive} unmountOnExit>
+                        <div className="layout-mask p-component-overlay"></div>
+                    </CSSTransition>
+                </div>
+            </Switch>
+        </BrowserRouter>
+
+    );
+
+}
 
 export default App;

web-ui/web-react/src/AppMenu.js

@@ -6,171 +6,161 @@ import { Ripple } from 'primereact/ripple';
 import { Badge } from 'primereact/badge';
 
 const AppSubmenu = (props) => {
-  const [activeIndex, setActiveIndex] = useState(null);
+    const [activeIndex, setActiveIndex] = useState(null);
 
-  const onMenuItemClick = (event, item, index) => {
-    //avoid processing disabled items
-    if (item.disabled) {
-      event.preventDefault();
-      return true;
-    }
+    const onMenuItemClick = (event, item, index) => {
+        //avoid processing disabled items
+        if (item.disabled) {
+            event.preventDefault();
+            return true;
+        }
 
-    //execute command
-    if (item.command) {
-      item.command({ originalEvent: event, item: item });
-    }
+        //execute command
+        if (item.command) {
+            item.command({ originalEvent: event, item: item });
+        }
 
-    if (index === activeIndex) setActiveIndex(null);
-    else setActiveIndex(index);
+        if (index === activeIndex) setActiveIndex(null);
+        else setActiveIndex(index);
 
-    if (props.onMenuItemClick) {
-      props.onMenuItemClick({
-        originalEvent: event,
-        item: item,
-      });
-    }
-  };
+        if (props.onMenuItemClick) {
+            props.onMenuItemClick({
+                originalEvent: event,
+                item: item,
+            });
+        }
+    };
 
-  const onKeyDown = (event) => {
-    if (event.code === 'Enter' || event.code === 'Space') {
-      event.preventDefault();
-      event.target.click();
-    }
-  };
+    const onKeyDown = (event) => {
+        if (event.code === 'Enter' || event.code === 'Space') {
+            event.preventDefault();
+            event.target.click();
+        }
+    };
 
-  const renderLinkContent = (item) => {
-    let submenuIcon = item.items && (
-      <i className="pi pi-fw pi-angle-down menuitem-toggle-icon"></i>
-    );
-    let badge = item.badge && <Badge value={item.badge} />;
+    const renderLinkContent = (item) => {
+        let submenuIcon = item.items && (
+            <i className="pi pi-fw pi-angle-down menuitem-toggle-icon"></i>
+        );
+        let badge = item.badge && <Badge value={item.badge} />;
 
-    return (
-      <React.Fragment>
-        <i className={item.icon}></i>
-        <span>{item.label}</span>
-        {submenuIcon}
-        {badge}
-        <Ripple />
-      </React.Fragment>
-    );
-  };
-
-  const renderLink = (item, i) => {
-    let content = renderLinkContent(item);
-
-    if (item.to) {
-      return (
-        <NavLink
-          aria-label={item.label}
-          onKeyDown={onKeyDown}
-          role="menuitem"
-          className="p-ripple"
-          activeClassName="router-link-active router-link-exact-active"
-          to={item.to}
-          onClick={(e) => onMenuItemClick(e, item, i)}
-          exact
-          target={item.target}
-        >
-          {content}
-        </NavLink>
-      );
-    } else {
-      return (
-        <a
-          tabIndex="0"
-          aria-label={item.label}
-          onKeyDown={onKeyDown}
-          role="menuitem"
-          href={item.url}
-          className="p-ripple"
-          onClick={(e) => onMenuItemClick(e, item, i)}
-          target={item.target}
-        >
-          {content}
-        </a>
-      );
-    }
-  };
-
-  let items =
-    props.items &&
-    props.items.map((item, i) => {
-      let active = activeIndex === i;
-      let styleClass = classNames(item.badgeStyleClass, {
-        'layout-menuitem-category': props.root,
-        'active-menuitem': active && !item.to,
-      });
-
-      if (props.root) {
         return (
-          <li className={styleClass} key={i} role="none">
-            {props.root === true && (
-              <React.Fragment>
-                <div
-                  className="layout-menuitem-root-text"
-                  aria-label={item.label}
+            <React.Fragment>
+                <i className={item.icon}></i>
+                <span>{item.label}</span>
+                {submenuIcon}
+                {badge}
+                <Ripple />
+            </React.Fragment>
+        );
+    };
+
+    const renderLink = (item, i) => {
+        let content = renderLinkContent(item);
+
+        if (item.to) {
+            return (
+                <NavLink
+                    aria-label={item.label}
+                    onKeyDown={onKeyDown}
+                    role="menuitem"
+                    className="p-ripple"
+                    activeClassName="router-link-active router-link-exact-active"
+                    to={item.to}
+                    onClick={(e) => onMenuItemClick(e, item, i)}
+                    exact
+                    target={item.target}
                 >
-                  {item.label}
-                </div>
-                <AppSubmenu
-                  items={item.items}
-                  onMenuItemClick={props.onMenuItemClick}
-                />
-              </React.Fragment>
-            )}
-          </li>
-        );
-      } else {
-        return (
-          <li className={styleClass} key={i} role="none">
-            {renderLink(item, i)}
-            <CSSTransition
-              classNames="layout-submenu-wrapper"
-              timeout={{ enter: 1000, exit: 450 }}
-              in={active}
-              unmountOnExit
-            >
-              <AppSubmenu
-                items={item.items}
-                onMenuItemClick={props.onMenuItemClick}
-              />
-            </CSSTransition>
-          </li>
-        );
-      }
-    });
+                    {content}
+                </NavLink>
+            );
+        } else {
+            return (
+                <a
+                    tabIndex="0"
+                    aria-label={item.label}
+                    onKeyDown={onKeyDown}
+                    role="menuitem"
+                    href={item.url}
+                    className="p-ripple"
+                    onClick={(e) => onMenuItemClick(e, item, i)}
+                    target={item.target}
+                >
+                    {content}
+                </a>
+            );
+        }
+    };
 
-  return items ? (
-    <ul className={props.className} role="menu">
-      {items}
-    </ul>
-  ) : null;
+    let items =
+        props.items &&
+        props.items.map((item, i) => {
+            let active = activeIndex === i;
+            let styleClass = classNames(item.badgeStyleClass, {
+                'layout-menuitem-category': props.root,
+                'active-menuitem': active && !item.to,
+            });
+
+            if (props.root) {
+                return (
+                    <li className={styleClass} key={i} role="none">
+                        {props.root === true && (
+                            <React.Fragment>
+                                <div
+                                    className="layout-menuitem-root-text"
+                                    aria-label={item.label}
+                                >
+                                    {item.label}
+                                </div>
+                                <AppSubmenu
+                                    items={item.items}
+                                    onMenuItemClick={props.onMenuItemClick}
+                                />
+                            </React.Fragment>
+                        )}
+                    </li>
+                );
+            } else {
+                return (
+                    <li className={styleClass} key={i} role="none">
+                        {renderLink(item, i)}
+                        <CSSTransition
+                            classNames="layout-submenu-wrapper"
+                            timeout={{ enter: 1000, exit: 450 }}
+                            in={active}
+                            unmountOnExit
+                        >
+                            <AppSubmenu
+                                items={item.items}
+                                onMenuItemClick={props.onMenuItemClick}
+                            />
+                        </CSSTransition>
+                    </li>
+                );
+            }
+        });
+
+    return items ? (
+        <ul className={props.className} role="menu">
+            {items}
+        </ul>
+    ) : null;
 };
 
 export const AppMenu = (props) => {
-  return (
-    <div className="layout-menu-container">
-      <AppSubmenu
-        items={props.model}
-        className="layout-menu"
-        onMenuItemClick={props.onMenuItemClick}
-        root={true}
-        role="menu"
-      />
-      <a
-        href="https://www.primefaces.org/primeblocks-react"
-        className="block mt-3"
-      >
-        <img
-          alt="primeblocks"
-          className="w-full"
-          src={
-            props.layoutColorMode === 'light'
-              ? 'assets/layout/images/banner-primeblocks.png'
-              : 'assets/layout/images/banner-primeblocks-dark.png'
-          }
-        />
-      </a>
-    </div>
-  );
-};
+    return (
+        <div className="layout-menu-container">
+            <AppSubmenu
+                items={props.model}
+                className="layout-menu"
+                onMenuItemClick={props.onMenuItemClick}
+                root={true}
+                role="menu"
+            />
+           
+        </div>
+    );
+
+
+    
+}

web-ui/web-react/src/AppTopbar.js

@@ -1,46 +1,118 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import classNames from 'classnames';
+import Cookies from 'universal-cookie';
+import { Button } from 'primereact/button';
+import { Menubar } from 'primereact/menubar';
+
+const cookies = new Cookies();
 
 export const AppTopbar = (props) => {
-  return (
-    <div className="layout-topbar">
-      <Link to="/" className="layout-topbar-logo">
-        <img src={'assets/layout/images/logo-dark.svg'} alt="logo" />
-        <span>KATOIKIA</span>
-      </Link>
+    const [logged, setLogged] = useState(null);
 
-      {/* <button type="button" className="p-link  layout-menu-button layout-topbar-button" onClick={props.onToggleMenuClick}>
+
+    function cerrarSesion() {
+        cookies.remove('id', { path: "/" });
+        cookies.remove('email', { path: "/" });
+        cookies.remove('name', { path: "/" });
+        cookies.remove('type', { path: "/" });
+        cookies.remove('community_id', { path: "/" });
+        window.location.href = '/login';
+    }
+
+    useEffect(() => {
+        if (cookies.get('email')) {
+            setLogged(true);
+        } else {
+            setLogged(false);
+        };
+    }, [])
+
+
+    const buttonLogout = () => {
+        return (
+            <>
+                <div className="my-2">
+                    <Button label="Cerrar Sesión"
+                        className="p-button-danger"
+                        onClick={cerrarSesion}
+                        disabled={logged} />
+                </div>
+            </>
+        )
+    }
+
+    const menuProfile = [
+        {
+            label: 'Perfil',
+            icon: 'pi pi-user',
+            items: [
+                {
+                    label: 'Cerrar Sesion',
+                    icon: 'pi pi-fw pi-lock',
+                }
+            ],
+        },
+    ]
+
+
+    return (
+        <div className="layout-topbar">
+            <Link to="/" className="layout-topbar-logo">
+                <img src={'images/Logo_Katoikia.svg'} alt="logo" />
+                <span>KATOIKIA</span>
+            </Link>
+
+            {/* <button type="button" className="p-link  layout-menu-button layout-topbar-button" onClick={props.onToggleMenuClick}>
                 <i className="pi pi-bars"/>
             </button> */}
 
-      <button
-        type="button"
-        className="p-link layout-topbar-menu-button layout-topbar-button"
-      >
-        <i className="pi pi-ellipsis-v" />
-      </button>
+            <button
+                type="button"
+                className="p-link layout-topbar-menu-button layout-topbar-button"
+            >
+                <i className="pi pi-ellipsis-v" />
+            </button>
 
-      <ul className="layout-topbar-menu lg:flex origin-top">
-        {/* <li>
+            <ul className="layout-topbar-menu lg:flex origin-top">
+                {/* <li>
                         <button className="p-link layout-topbar-button" onClick={props.onMobileSubTopbarMenuClick}>
                             <i className="pi pi-calendar"/>
                             <span>Events</span>
                         </button>
                     </li> */}
-        {/* <li>
+                {/* <li>
                         <button className="p-link layout-topbar-button" onClick={props.onMobileSubTopbarMenuClick}>
                             <i className="pi pi-cog"/>
                             <span>Settings</span>
                         </button>
                     </li> */}
-        <li>
-          <button className="p-link layout-topbar-button">
-            <i className="pi pi-user" />
-            <span>Profile</span>
-          </button>
-        </li>
-      </ul>
-    </div>
-  );
-};
+                <li className='mx-2' hidden={!logged}>
+                    <button className="p-link layout-topbar-button" >
+                        <i className="pi pi-user" />
+                        <span>Perfil</span>
+                    </button>
+                </li>
+                <li className='mx-2' hidden={!logged}>
+                    <button className="p-link layout-topbar-button" onClick={cerrarSesion} >
+                        <i className="pi pi-sign-out" />
+                        <span>Cerrar Sesión</span>
+                    </button>
+                </li>
+                {/*
+                    <Menubar model={menuProfile} ></Menubar>
+
+
+                </li>
+                <li hidden={!logged}>
+                    <div className="my-2" >
+                        <Button label="Cerrar Sesión"
+                            className="p-button-danger"
+                            onClick={cerrarSesion}
+                        />
+                    </div>
+                </li>*/}
+            </ul>
+        </div>
+    );
+}

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

@@ -11,7 +11,7 @@ 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';
 
 const AdministradoresSistema = () => {
   const [administrators, setAdministrators] = useState([]);
@@ -27,6 +27,10 @@ const AdministradoresSistema = () => {
   const toast = useRef(null);
   const dt = useRef(null);
 
+  const [changeStatusAdminSystemDialog, setChangeStatusAdminSystemDialog] = useState(false);
+  const [changeStatusAdminsSystemDialog, setChangeStatusAdminsSystemDialog] =
+    useState(false);
+
   let emptySysAdmin = {
     _id: null,
     dni: '',
@@ -36,18 +40,29 @@ const AdministradoresSistema = () => {
     phone: '',
     password: '',
     user_type: '1',
-    status: '',
+    status: '1',
+    status_text: '',
   };
 
   async function fetchP() {
     let nombres = await fetch(urlFetch, { method: 'GET' });
     let adminRes = await nombres.json();
-    setAdministrators(adminRes.message);
-    console.log(administrators);
+    let data = await adminRes.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';
+      } 
+    })
+    setAdministrators(await data);
   }
+
   useEffect(() => {
     fetchP();
-  }, []);
+  }, [])
 
   function registrarAdmin() {
     var data = {
@@ -57,40 +72,84 @@ const AdministradoresSistema = () => {
       email: document.getElementById('correo_electronico').value,
       phone: document.getElementById('telefono').value,
       password: document.getElementById('correo_electronico').value,
-      user_type: '1', //1 es admin
-      status: '1',
+      user_type: "1", //1 es admin
+      status: "1"
     };
-    // console.log(data);
+    setSysAdmin(data)
 
     fetch('http://localhost:4000/user/createAdminSystem/', {
       cache: 'no-cache',
       method: 'POST',
       body: JSON.stringify(data),
       headers: {
-        'Content-Type': 'application/json',
-      },
+        '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) {
-        let _administrators = [...administrators];
-        let _admin = { ...response.message };
-        _administrators.push(_admin);
-        setAdministrators(_administrators);
-      })
-      .catch((err) => console.log('Ocurrió un error con el fetch', err));
+      .then(
+        function (response) {
+          if (response.status != 201)
+            console.log('Ocurrió un error con el servicio: ' + response.status);
+          else
+            return response.json();
+        }
+      )
+      .then(
+        function (response) {
+          let _administrators = [...administrators];
+          let _admin = { ...sysadmin };
+          _administrators.push(_admin);
+          setAdministrators(_administrators)
+        }
+      )
+      .catch(
+        err => console.log('Ocurrió un error con el fetch', err)
+      );
   }
 
-  const hideDeleteAdminSystemDialog = () => {
-    setDeleteAdminSystemDialog(false);
-  };
+  const cambiarStatusUser = () => {
+    if (sysadmin.status == '1') {
+      sysadmin.status = '0';
+      sysadmin.status_text = 'Inactivo';
 
-  const hideDeleteAdminsSystemsDialog = () => {
-    setDeleteAdminsSystemDialog(false);
-  };
+    } else if (sysadmin.status == '0') {
+      sysadmin.status = '1';
+      sysadmin.status_text = 'Activo';
+    }
+    var data = {
+      id: sysadmin._id,
+      status: sysadmin.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) {
+          setChangeStatusAdminSystemDialog(false);
+          toast.current.show({
+            severity: 'success',
+            summary: 'Éxito',
+            detail: 'Administrador del Sistema Actualizado',
+            life: 3000,
+          });
+        }
+      )
+      .catch(
+        err => console.log('Ocurrió un error con el fetch', err)
+      );
+  }
 
   const confirmDeleteAdminSystem = (sysAdmin) => {
     setSysAdmin(sysAdmin);
@@ -101,6 +160,23 @@ const AdministradoresSistema = () => {
     setDeleteAdminsSystemDialog(true);
   };
 
+  const hideDeleteAdminSystemDialog = () => {
+    setDeleteAdminSystemDialog(false);
+  };
+
+  const hideDeleteAdminsSystemDialog = () => {
+    setDeleteAdminsSystemDialog(false);
+  };
+
+  const hideChangeStatusAdminDialog = () => {
+    setChangeStatusAdminSystemDialog(false);
+  };
+
+  const confirmChangeStatusAdminSystem = (sysAdmin) => {
+    setSysAdmin(sysAdmin);
+    setChangeStatusAdminSystemDialog(true);
+  };
+
   const deleteSysAdmin = () => {
     fetch('http://localhost:4000/user/deleteAdminSystem/' + sysadmin._id, {
       cache: 'no-cache',
@@ -116,8 +192,9 @@ const AdministradoresSistema = () => {
       })
       .then(function (response) {
         let _sysadmin = administrators.filter(
-          (val) => val._id !== sysadmin._id,
+          (val) => (val._id !== sysadmin._id || val.status != -1),
         );
+
         setAdministrators(_sysadmin);
         setDeleteAdminSystemDialog(false);
         setSysAdmin(emptySysAdmin);
@@ -141,7 +218,7 @@ const AdministradoresSistema = () => {
 
   const deleteSelectedAdminsSystem = () => {
     let _administrators = administrators.filter(
-      (val) => !selectedAdministrators.includes(val),
+      (val) => (!selectedAdministrators.includes(val)),
     );
     selectedAdministrators.map((item) => {
       fetch('http://localhost:4000/user/deleteAdminSystem/' + item._id, {
@@ -152,6 +229,9 @@ const AdministradoresSistema = () => {
         },
       });
     });
+    _administrators = _administrators.filter(
+      (val) => val.status != -1,
+    )
     setAdministrators(_administrators);
     setDeleteAdminsSystemDialog(false);
     setSelectedAdministrators(null);
@@ -163,13 +243,33 @@ const AdministradoresSistema = () => {
     });
   };
 
+
+
   const actionsAdmin = (rowData) => {
+    let icono = '';
+    let text = '';
+    if (rowData.status == '0') {
+      icono = "pi pi-eye";
+      text = "Activar Administrador"
+    } else if (rowData.status == '1') {
+      icono = "pi pi-eye-slash";
+      text = "Inactivar Administrador"
+
+    }
+
     return (
       <div className="actions">
+        <Button
+          icon={`${icono}`}
+          className="p-button-rounded p-button-warning mt-2 mx-2"
+          onClick={() => confirmChangeStatusAdminSystem(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={() => confirmDeleteAdminSystem(rowData)}
+          title="Eliminar Administrador"
         />
       </div>
     );
@@ -206,7 +306,7 @@ const AdministradoresSistema = () => {
   const header = (
     <div className="flex flex-column md:flex-row md:justify-content-between md:align-items-center">
       <h5 className="m-0">
-        Administradores del sistema <i class="fal fa-user"></i>
+        Administradores del sistema <i className="fal fa-user"></i>
       </h5>
       <span className="block mt-2 md:mt-0 p-input-icon-left">
         <i className="pi pi-search" />
@@ -242,7 +342,7 @@ const AdministradoresSistema = () => {
         label="No"
         icon="pi pi-times"
         className="p-button-text"
-        onClick={hideDeleteAdminsSystemsDialog}
+        onClick={hideDeleteAdminsSystemDialog}
       />
       <Button
         label="Yes"
@@ -253,6 +353,23 @@ const AdministradoresSistema = () => {
     </>
   );
 
+  const changeStatusAdminSystemDialogFooter = (
+    <>
+      <Button
+        label="No"
+        icon="pi pi-times"
+        className="p-button-text"
+        onClick={hideChangeStatusAdminDialog}
+      />
+      <Button
+        label="Yes"
+        icon="pi pi-check"
+        className="p-button-text"
+        onClick={cambiarStatusUser}
+      />
+    </>
+  );
+
   const headerName = (
     <>
       <p>
@@ -301,15 +418,27 @@ const AdministradoresSistema = () => {
       </p>
     </>
   );
-
-  const headerOptions = (
+  
+  const headerStatus = (
     <>
-      <p>
-        Opciones{' '}
-        <FontAwesomeIcon icon={faEllipsis} style={{ color: '#D7A86E' }} />
+      <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">
@@ -391,7 +520,6 @@ const AdministradoresSistema = () => {
             ></Column>
             <Column
               field="phone"
-              sortable
               header={headerPhone}
               style={{
                 flexGrow: 1,
@@ -401,8 +529,15 @@ const AdministradoresSistema = () => {
               }}
             ></Column>
             <Column
-              header={headerOptions}
-              style={{ flexGrow: 1, flexBasis: '130px', minWidth: '130px' }}
+              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={actionsAdmin}
             ></Column>
           </DataTable>
@@ -432,7 +567,7 @@ const AdministradoresSistema = () => {
             header="Confirmar"
             modal
             footer={deleteAdminsSystemDialogFooter}
-            onHide={hideDeleteAdminsSystemsDialog}
+            onHide={hideDeleteAdminsSystemDialog}
           >
             <div className="flex align-items-center justify-content-center">
               <i
@@ -447,6 +582,26 @@ const AdministradoresSistema = () => {
               )}
             </div>
           </Dialog>
+          <Dialog
+            visible={changeStatusAdminSystemDialog}
+            style={{ width: '450px' }}
+            header="Confirmar"
+            modal
+            footer={changeStatusAdminSystemDialogFooter}
+            onHide={hideChangeStatusAdminDialog}
+          >
+            <div className="flex align-items-center justify-content-center">
+              <i
+                className="pi pi-exclamation-triangle mr-3"
+                style={{ fontSize: '2rem' }}
+              />
+              {sysadmin && (
+                <span>
+                  ¿Estás seguro que desea cambiar estado a <b>{sysadmin.name}</b>?
+                </span>
+              )}
+            </div>
+          </Dialog>
         </div>
       </div>
       <div className="col-12">
@@ -458,12 +613,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

@@ -0,0 +1,669 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { InputText } from 'primereact/inputtext';
+import { Button } from 'primereact/button';
+import { Dropdown } from 'primereact/dropdown';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { Toast } from 'primereact/toast';
+import { Dialog } from 'primereact/dialog';
+import { Toolbar } from 'primereact/toolbar';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faHome, faUserAlt } from '@fortawesome/free-solid-svg-icons';
+import { faCircleQuestion } from '@fortawesome/free-solid-svg-icons';
+import { faAt } from '@fortawesome/free-solid-svg-icons';
+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,
+        name: '',
+        hourMin: '00:00',
+        hourMax: '01:00',
+        community_id: '',
+        bookable: '1',
+        bookable_text: '',
+        status: '1',
+        status_text: '',
+    };
+
+
+    const [commonAreaList, setCommonAreaList] = useState([]);
+    const [commonArea, setCommonArea] = useState(emptyCommonArea);
+    const [selectedCommonAreas, setSelectedCommonAreas] = useState(null);
+    const [globalFilter, setGlobalFilter] = useState(null);
+    const [deleteCommonAreaDialog, setDeleteCommonAreaDialog] = useState(false);
+    const [deleteCommonAreasDialog, setDeleteCommonAreasDialog] = useState(false);
+    const [submitted, setSubmitted] = useState(false);
+    const toast = useRef(null);
+    const dt = useRef(null);
+
+    const [cookies, setCookie] = useCookies();
+    const [changeStatusAreaDialog, setChangeStatusAreaDialog] = useState(false);
+
+
+
+    async function getCommonAreas() {
+        await fetch(`http://localhost:4000/commonArea/findByCommunity/${cookies.community_id}`, { method: 'GET' })
+            .then((response) => response.json())
+            .then(data => data.message)
+            .then(data => {
+                if (data) {
+                    data.map(item => {
+                        if (item.bookable == '1') {
+                            item.bookable_text = 'Necesaria';
+                        } else {
+                            item.bookable_text = 'No es necesarioa';
+                        }
+
+                        if (item.status == '1') {
+                            item.status_text = 'Activo';
+                        } else if (item.status == '0') {
+                            item.status_text = 'Inactivo';
+                        } else {
+                            item.status_text = 'Eliminado';
+                        }
+                    })
+                }
+
+                data = data.filter(
+                    (val) => val.status != -1,
+                )
+                setCommonAreaList(data);
+            });
+    }
+
+    useEffect(() => {
+        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, {
+            cache: 'no-cache',
+            method: 'DELETE',
+            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) {
+
+                    let _common_areas = commonAreaList.filter(
+                        (val) => val._id !== commonArea._id,
+                    );
+                    _common_areas = _common_areas.filter(
+                        (val) => val.status != -1,
+                    )
+                    setCommonAreaList(_common_areas);
+                    setDeleteCommonAreaDialog(false);
+                    setCommonArea(emptyCommonArea);
+                    toast.current.show({
+                        severity: 'success',
+                        summary: 'Área Común Eliminada',
+                        life: 3000,
+                    });
+                }
+            )
+            .catch(
+                err => {
+                    console.log('Ocurrió un error con el fetch', err)
+                    toast.current.show({ severity: 'danger', summary: 'Error', detail: 'Área Común no se pudo eliminar', life: 3000 });
+                }
+            );
+
+    };
+
+    const deleteSelectedCommonAreas = () => {
+        let _common_areas = commonAreaList.filter(
+            (val) => !selectedCommonAreas.includes(val),
+        );
+        selectedCommonAreas.map((item) => {
+            fetch('http://localhost:4000/commonArea/deleteCommonArea/' + item._id, {
+                cache: 'no-cache',
+                method: 'DELETE',
+                headers: {
+                    'Content-Type': 'application/json'
+                }
+            })
+        });
+        _common_areas = _common_areas.filter(
+            (val) => val.status != -1,
+        )
+        setCommonAreaList(_common_areas);
+        setDeleteCommonAreasDialog(false);
+        setSelectedCommonAreas(null);
+        toast.current.show({
+            severity: 'success',
+            summary: 'Éxito',
+            detail: 'Áreas Comúnes Eliminadas',
+            life: 3000,
+        });
+    };
+
+    const cambiarStatuscommonArea = () => {
+        if (commonArea.status == '1') {
+            commonArea.status = '0';
+            commonArea.status_text = 'Inactivo';
+
+        } else if (commonArea.status == '0') {
+            commonArea.status = '1';
+            commonArea.status_text = 'Activo';
+        }
+        var data = {
+            id: commonArea._id,
+            status: commonArea.status,
+        };
+        fetch('http://localhost:4000/commonArea/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) {
+                    setChangeStatusAreaDialog(false);
+                    toast.current.show({
+                        severity: 'success',
+                        summary: 'Éxito',
+                        detail: 'Área Común Actualizada',
+                        life: 3000,
+                    });
+                }
+            )
+            .catch(
+                err => console.log('Ocurrió un error con el fetch', err)
+            );
+    }
+
+    const hideDeleteCommonAreaDialog = () => {
+        setDeleteCommonAreaDialog(false);
+    }
+
+    const hideDeleteCommonAreasDialog = () => {
+        setDeleteCommonAreasDialog(false);
+    }
+
+    const confirmDeleteCommonArea = (commonArea) => {
+        setCommonArea(commonArea);
+        setDeleteCommonAreaDialog(true);
+    }
+
+    const confirmDeleteSelected = () => {
+        setDeleteCommonAreasDialog(true);
+    };
+
+
+
+    const hideChangeStatusAreaDialog = () => {
+        setChangeStatusAreaDialog(false);
+    };
+
+    const confirmChangeStatusArea = (commonArea) => {
+        setCommonArea(commonArea);
+        setChangeStatusAreaDialog(true);
+    };
+
+    const actionsCommonArea = (rowData) => {
+        let icono = '';
+        let text = '';
+        if (rowData.status == '0') {
+            icono = "pi pi-eye";
+            text = "Activar Área Común"
+        } else if (rowData.status == '1') {
+            icono = "pi pi-eye-slash";
+            text = "Inactivar Área Común"
+        }
+
+        return (
+            <div className="actions">
+                <Button
+                    icon={`${icono}`}
+                    className="p-button-rounded p-button-warning mt-2 mx-2"
+                    onClick={() => confirmChangeStatusArea(rowData)}
+                    title={`${text}`}
+                />
+                <Button
+                    icon="pi pi-trash"
+                    className="p-button-rounded p-button-danger mt-2"
+                    onClick={() => confirmDeleteCommonArea(rowData)}
+                />
+            </div>
+        );
+    };
+
+    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 = (
+        <>
+            <Button label="No" icon="pi pi-times" className="p-button-text" onClick={hideDeleteCommonAreaDialog} />
+            <Button label="Yes" icon="pi pi-check" className="p-button-text" onClick={deleteCommonArea} />
+        </>
+    );
+
+    const deleteCommonAreasDialogFooter = (
+        <>
+            <Button label="No" icon="pi pi-times" className="p-button-text" onClick={hideDeleteCommonAreasDialog} />
+            <Button label="Yes" icon="pi pi-check" className="p-button-text" onClick={deleteSelectedCommonAreas} />
+        </>
+    );
+
+    const changeStatusAreaDialogFooter = (
+        <>
+            <Button
+                label="No"
+                icon="pi pi-times"
+                className="p-button-text"
+                onClick={hideChangeStatusAreaDialog}
+            />
+            <Button
+                label="Yes"
+                icon="pi pi-check"
+                className="p-button-text"
+                onClick={cambiarStatuscommonArea}
+            />
+        </>
+    );
+
+    const leftToolbarTemplate = () => {
+        return (
+            <React.Fragment>
+                <div className="my-2">
+                    <Button label="Eliminar" icon="pi pi-trash" className="p-button-danger" onClick={confirmDeleteSelected} disabled={!selectedCommonAreas || !selectedCommonAreas.length} />
+                </div>
+            </React.Fragment>
+        )
+    }
+
+    const rightToolbarTemplate = () => {
+        return (
+            <React.Fragment>
+                <Button label="Exportar" icon="pi pi-upload" className="p-button-help" />
+            </React.Fragment>
+        )
+    }
+
+
+    const header = (
+        <React.Fragment>
+
+            <div className="flex flex-column md:flex-row md:justify-content-between md:align-items-center">
+                <h5 className="m-0">Áreas Comunes</h5>
+                <span className="block mt-2 md:mt-0 p-input-icon-left">
+                    <i className="pi pi-search" />
+                    <InputText type="search" onInput={(e) => setGlobalFilter(e.target.value)} placeholder="Buscar..." />
+                </span>
+            </div>
+        </React.Fragment>
+    );
+
+    const headerName = (
+        <>
+            <p>{' '}
+                <FontAwesomeIcon icon={faUserAlt} style={{ color: "#C08135" }} /> {' '}
+                Nombre
+            </p>
+        </>
+    )
+
+    const headerHourMin = (
+        <>
+            <p>
+                {' '}
+                <FontAwesomeIcon icon={faUserAlt} style={{ color: "#D7A86E" }} />{' '}
+                Hora de apertura
+            </p>
+        </>
+    )
+
+    const headerHourMax = (
+        <>
+            <p> {' '}
+                <FontAwesomeIcon icon={faIdCardAlt} style={{ color: "#C08135" }} />{' '}
+                Hora de cierre
+            </p>
+        </>
+    )
+
+    const headerBookable = (
+        <>
+            <p> {' '}
+                <FontAwesomeIcon icon={faClipboardCheck} style={{ color: "#D7A86E" }} />{' '}
+                Reservación
+            </p>
+        </>
+    )
+
+    const headerStatus = (
+        <>
+            <p> {' '}
+                <FontAwesomeIcon icon={faCircleQuestion} style={{ color: "#C08135" }} />{' '}
+                Estado
+            </p>
+        </>
+    )
+
+
+    const bookableBodyTemplate = (rowData) => {
+        let class_color = '';
+        if (rowData.bookable == '1') {
+            class_color = '0';
+        } else {
+            class_color = '1';
+
+        }
+        return (
+            <>
+                <span
+                    className={`status status-${class_color}`}
+                >
+                    {rowData.bookable_text}
+                </span>
+            </>
+        );
+    };
+
+    const statusBodyTemplate = (rowData) => {
+        return (
+            <>
+                <span
+                    className={`status status-${rowData.status}`}
+                >
+                    {rowData.status_text}
+                </span>
+            </>
+        );
+    };
+
+
+    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">
+                <Toast ref={toast} />
+                <div className="card">
+                    <Toolbar className="mb-4" left={leftToolbarTemplate} right={rightToolbarTemplate}></Toolbar>
+                    <DataTable ref={dt} value={commonAreaList} dataKey="_id" paginator rows={5} selection={selectedCommonAreas} onSelectionChange={(e) => setSelectedCommonAreas(e.value)}
+                        scrollable 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} áreas comunes"
+                        globalFilter={globalFilter} emptyMessage="No hay áreas comunes registrados.">
+                        <Column 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="hourMin" header={headerHourMin} style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }} alignFrozen="left"></Column>
+                        <Column field="hourMax" header={headerHourMax} style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }}>                    </Column>
+                        <Column field="bookable" sortable header={headerBookable} body={bookableBodyTemplate} style={{ flexGrow: 1, flexBasis: '200px', minWidth: '200px', wordBreak: 'break-word' }}></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: '130px', minWidth: '130px' }} body={actionsCommonArea}></Column>
+                    </DataTable>
+                    <Dialog visible={deleteCommonAreaDialog} style={{ width: '450px' }} header="Confirmar" modal footer={deleteCommonAreaDialogFooter} onHide={hideDeleteCommonAreaDialog}>
+                        <div className="flex align-items-center justify-content-center">
+                            <i className="pi pi-exclamation-triangle mr-3" style={{ fontSize: '2rem' }} />
+                            {commonArea && <span>¿Estás seguro que desea eliminar a <b>{commonArea.name}</b>?</span>}
+                        </div>
+                    </Dialog>
+                    <Dialog visible={deleteCommonAreasDialog} style={{ width: '450px' }} header="Confirmar" modal footer={deleteCommonAreasDialogFooter} onHide={hideDeleteCommonAreasDialog}>
+                        <div className="flex align-items-center justify-content-center">
+                            <i className="pi pi-exclamation-triangle mr-3" style={{ fontSize: '2rem' }} />
+                            {selectedCommonAreas && <span>¿Está seguro eliminar las áreas comunes seleccionadas?</span>}
+                        </div>
+                    </Dialog>
+                    <Dialog
+                        visible={changeStatusAreaDialog}
+                        style={{ width: '450px' }}
+                        header="Confirmar"
+                        modal
+                        footer={changeStatusAreaDialogFooter}
+                        onHide={hideChangeStatusAreaDialog}
+                    >
+                        <div className="flex align-items-center justify-content-center">
+                            <i
+                                className="pi pi-exclamation-triangle mr-3"
+                                style={{ fontSize: '2rem' }}
+                            />
+                            {commonArea && (
+                                <span>
+                                    ¿Estás seguro que desea cambiar estado a <b>{commonArea.name}</b>?
+                                </span>
+                            )}
+                        </div>
+                    </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>
+    );
+
+};
+
+
+export default React.memo(AreasComunes);

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

@@ -9,10 +9,11 @@ import classNames from 'classnames';
 import { Dialog } from 'primereact/dialog';
 import { Toolbar } from 'primereact/toolbar';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faHome } from '@fortawesome/free-solid-svg-icons';
+import { faHome, faUserAlt } from '@fortawesome/free-solid-svg-icons';
 import { faMapLocationDot } from '@fortawesome/free-solid-svg-icons';
 import { faPhoneAlt } 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';
 
 const Communities = () => {
   let emptyCommunity = {
@@ -23,7 +24,8 @@ const Communities = () => {
     district: districtId,
     phone: '',
     num_houses: 0,
-    status: 'activo',
+    status: '1',
+    status_text: '',
     date_entry: new Date(),
     houses: [],
   };
@@ -44,9 +46,19 @@ const Communities = () => {
   const [globalFilter, setGlobalFilter] = useState(null);
   const [deleteCommunityDialog, setDeleteCommunityDialog] = useState(false);
   const [deleteCommunitiesDialog, setDeleteCommunitiesDialog] = useState(false);
+  const [editCommunityDialog, setEditCommunityDialog] = useState(false);
   const toast = useRef(null);
   const dt = useRef(null);
 
+
+
+  //para el perfil de la comunidad
+  const [tenants, setTenants] = useState([]);
+
+  const [communityDialog, setCommunityDialog] = useState(false);
+
+
+
   const p = provincesList.map((item) => ({
     label: item.name,
     value: item.code,
@@ -64,17 +76,6 @@ const Communities = () => {
     parent: item.parentCode,
   }));
 
-  useEffect(() => {
-    fillProvinces();
-  }, []);
-
-  useEffect(() => {
-    fillCantons();
-  }, [provinciaId]);
-
-  useEffect(() => {
-    fillDistricts();
-  }, [cantonId]);
 
   async function getProvinces() {
     const response = await fetch('assets/demo/data/provincias.json', {
@@ -118,6 +119,20 @@ const Communities = () => {
     setDistrictsList(await districts);
   }
 
+
+  useEffect(() => {
+    fillProvinces();
+  }, []);
+
+  useEffect(() => {
+    fillCantons();
+  }, [provinciaId]);
+
+  useEffect(() => {
+    fillDistricts();
+  }, [cantonId]);
+
+
   const handleProvinces = (event) => {
     const getprovinciaId = event.target.value;
     setProvinciaId(getprovinciaId);
@@ -147,7 +162,17 @@ const Communities = () => {
     let pList = await getProvinces();
     let cList = await getCantons();
     let dList = await getDistricts();
-    await resJson.message.map((item) => {
+    let data = await resJson.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';
+      } else {
+        item.status_text = 'Eliminado';
+      }
       item.province = pList.find((p) => p.code === item.province).name;
       item.canton = cList.find((p) => p.code === item.canton).name;
       item.district = dList.find((p) => p.code === item.district).name;
@@ -155,13 +180,30 @@ const Communities = () => {
         item.name_admin = 'Sin Administrador';
       }
     });
-    setCommunitiesList(await resJson.message);
+    setCommunitiesList(await data);
   }
 
   useEffect(() => {
     getCommunites();
   }, []);
 
+  async function tenantsList(id) {
+    await fetch(`http://localhost:4000/user/findTenants/${id}`, { method: 'GET' })
+      .then((response) => response.json())
+      .then(data => data.message)
+      .then(data => {
+        data = data.filter(
+          (val) => val.status != -1,
+        )
+        setTenants(data)
+      });
+  }
+
+  useEffect(() => {
+    tenantsList(community._id);
+  }, [])
+
+
   const saveCommunity = () => {
     if (
       community.name &&
@@ -230,6 +272,19 @@ const Communities = () => {
     }
   };
 
+
+
+  function findNameTenant(tenant_id) {
+    let name = '';
+    if (tenant_id == '') {
+      name = 'Sin inquilino';
+    } else {
+      let tenant = tenants.find(t => t._id == tenant_id)
+      name = tenant['name'] + ' ' + tenant['last_name'];
+    }
+    return name;
+  }
+
   const onInputChange = (e, name) => {
     const val = (e.target && e.target.value) || '';
     let _community = { ...community };
@@ -238,6 +293,11 @@ const Communities = () => {
     setCommunity(_community);
   };
 
+  const hideCommunityDialog = () => {
+    setSubmitted(false);
+    setCommunityDialog(false);
+  };
+
   const hideDeleteCommunityDialog = () => {
     setDeleteCommunityDialog(false);
   };
@@ -255,6 +315,75 @@ const Communities = () => {
     setDeleteCommunitiesDialog(true);
   };
 
+
+  const infoCommunity = async (community) => {
+    await tenantsList(community._id);
+
+    setCommunity({ ...community });
+    setCommunityDialog(true);
+  };
+
+  const editCommunity = (community) => {
+    setCommunity({ ...community });
+    setEditCommunityDialog(true);
+  };
+
+  const hideEditCommunityDialog = () => {
+    setEditCommunityDialog(false);
+  };
+
+  const confirmEditCommunity = (community) => {
+    setCommunity(community);
+    setEditCommunityDialog(true);
+  };
+
+  //desactivar o activar una comunidad
+  const cambiarEstadoCommunity = () => {
+    if (community.status == '1') {
+      community.status = '0';
+      community.status_text = 'Inactivo';
+
+    } else if (community.status == '0') {
+      community.status = '1';
+      community.status_text = 'Activo';
+    }
+    var data = {
+      id: community._id,
+      status: community.status,
+    };
+    fetch('http://localhost:4000/community/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) {
+          setEditCommunityDialog(false);
+          toast.current.show({
+            severity: 'success',
+            summary: 'Éxito',
+            detail: 'Comunidad de Viviendas Actualizada',
+            life: 3000,
+          });
+        }
+      )
+      .catch(
+        err => console.log('Ocurrió un error con el fetch', err)
+      );
+  }
+
+
   const deleteCommunity = () => {
     /*   fetch('http://localhost:4000/community/deleteCommunity/' + community._id, {
                cache: 'no-cache',
@@ -288,8 +417,11 @@ const Communities = () => {
                    }
                ); 
         */
-    let _community = communitiesList.filter((val) => val._id !== community._id);
-    setCommunitiesList(_community);
+    let _communities = communitiesList.filter((val) => val._id !== community._id);
+    _communities = _communities.filter(
+      (val) => val.status != -1,
+    )
+    setCommunitiesList(_communities);
     setDeleteCommunityDialog(false);
     setCommunity(emptyCommunity);
     toast.current.show({
@@ -313,6 +445,9 @@ const Communities = () => {
                  }
              })
          })*/
+    _communities = _communities.filter(
+      (val) => val.status != -1,
+    )
     setCommunitiesList(_communities);
     setDeleteCommunitiesDialog(false);
     setSelectedCommunities(null);
@@ -325,11 +460,29 @@ const Communities = () => {
   };
 
   const actionsCommunity = (rowData) => {
+
+    let icono = '';
+    if (rowData.status == '0') {
+      icono = "pi pi-eye";
+    } else if (rowData.status == '1') {
+      icono = "pi pi-eye-slash";
+    }
+
     return (
       <div className="actions">
+        <Button
+          icon="pi pi-exclamation-circle"
+          className="p-button-rounded p-button-info mt-2 mx-2"
+          onClick={() => infoCommunity(rowData)}
+        />
+        <Button
+          icon={`${icono}`}
+          className={`p-button-rounded p-button-warning mt-2 mx-2`}
+          onClick={() => confirmEditCommunity(rowData)}
+        />
         <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={() => confirmDeleteCommunity(rowData)}
         />
       </div>
@@ -366,7 +519,7 @@ const Communities = () => {
 
   const header = (
     <div className="flex flex-column md:flex-row md:justify-content-between md:align-items-center">
-      <h5 className="m-0">Comunidade de Viviendas</h5>
+      <h5 className="m-0">Comunidades de Viviendas</h5>
       <span className="block mt-2 md:mt-0 p-input-icon-left">
         <i className="pi pi-search" />
         <InputText
@@ -378,6 +531,18 @@ const Communities = () => {
     </div>
   );
 
+  const communityDialogFooter = (
+    <>
+      <Button
+        label="Cerrar"
+        icon="pi pi-times"
+        className="p-button-text"
+        onClick={hideCommunityDialog}
+      />
+
+    </>
+  );
+
   const deleteCommunityDialogFooter = (
     <>
       <Button
@@ -411,6 +576,24 @@ const Communities = () => {
       />
     </>
   );
+  const editEstadoCommunityDialogFooter = (
+    <>
+      <Button
+        label="No"
+        icon="pi pi-times"
+        className="p-button-text"
+        onClick={hideEditCommunityDialog}
+      />
+      <Button
+        label="Yes"
+        icon="pi pi-check"
+        className="p-button-text"
+        onClick={cambiarEstadoCommunity}
+      />
+    </>
+  );
+
+
 
   const headerName = (
     <>
@@ -429,7 +612,7 @@ const Communities = () => {
           icon={faMapLocationDot}
           style={{ color: '#D7A86E' }}
         />{' '}
-        Pronvincia
+        Provincia
       </p>
     </>
   );
@@ -474,7 +657,7 @@ const Communities = () => {
     <>
       <p>
         {' '}
-        <FontAwesomeIcon icon={faPhoneAlt} style={{ color: '#D7A86E' }} />{' '}
+        <FontAwesomeIcon icon={faHashtag} style={{ color: '#D7A86E' }} />{' '}
         Número de viviendas
       </p>
     </>
@@ -490,15 +673,53 @@ const Communities = () => {
     </>
   );
 
-  const headerOptions = (
+  const headerStatus = (
     <>
-      <p>
-        Opciones{' '}
-        <FontAwesomeIcon icon={faEllipsis} style={{ color: '#D7A86E' }} />
+      <p> {' '}
+        <FontAwesomeIcon icon={faCircleQuestion} style={{ color: "#D7A86E" }} />{' '}
+        Estado
       </p>
     </>
+  )
+
+  //ver perfil comunidad
+  const headerTenant = (
+    <>
+      <p>
+        {' '}
+        <FontAwesomeIcon icon={faUserAlt} style={{ color: '#C08135' }} />{' '}
+        Inquilinos
+      </p>
+
+    </>
   );
 
+  const statusBodyTemplate = (rowData) => {
+    return (
+      <>
+        <span
+          className={`status status-${rowData.status}`}
+        >
+          {rowData.status_text}
+        </span>
+      </>
+    );
+  };
+
+  const tenantsBodyTemplate = (rowData) => {
+    let tenants = rowData.tenants;
+    let name = 'Sin inquilino';
+    if (rowData.tenants) {
+      name = findNameTenant(tenants.tenant_id);
+    }
+
+    return (
+      <>
+        {name}
+      </>
+    )
+  };
+
   return (
     <div className="grid">
       <div className="col-12">
@@ -534,21 +755,25 @@ const Communities = () => {
             ></Column>
             <Column
               field="name"
+              sortable
               header={headerName}
               style={{ flexGrow: 1, flexBasis: '160px' }}
             ></Column>
             <Column
               field="province"
+              sortable
               header={headerProvince}
               style={{ flexGrow: 1, flexBasis: '160px' }}
             ></Column>
             <Column
               field="canton"
+              sortable
               header={headerCanton}
               style={{ flexGrow: 1, flexBasis: '160px' }}
             ></Column>
             <Column
               field="district"
+              sortable
               header={headerDistrict}
               style={{ flexGrow: 1, flexBasis: '160px' }}
             ></Column>
@@ -559,16 +784,176 @@ const Communities = () => {
             ></Column>
             <Column
               field="num_houses"
+              sortable
               header={headerNumberHouses}
               style={{ flexGrow: 1, flexBasis: '180px' }}
             ></Column>
             <Column
               field="name_admin"
+              sortable
               header={headerAdministrator}
               style={{ flexGrow: 1, flexBasis: '180px' }}
             ></Column>
-            <Column header={headerOptions} body={actionsCommunity}></Column>
+            <Column
+              field="status"
+              sortable
+              header={headerStatus}
+              body={statusBodyTemplate}
+              style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }}>
+            </Column>
+            <Column
+              body={actionsCommunity}
+              style={{ flexGrow: 1, flexBasis: '100px' }}
+            ></Column>
           </DataTable>
+
+
+          <Dialog
+            visible={communityDialog}
+            style={{ width: '650px' }}
+            header="Información de la Comunidad"
+            modal
+            className="p-fluid"
+            footer={communityDialogFooter}
+            onHide={hideCommunityDialog}>
+            <div className='container text-center'>
+              <div className='row my-4'>
+                <div className=" col-12 md:col-12">
+                  <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-home icon-khaki"></i>
+                      <p>{community.name}</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div className='row my-5'>
+                <div className=" col-6 md:col-6">
+                  <p>Administrador</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>{community.name_admin}</p>
+                    </div>
+
+                  </div>
+                </div>
+                <div className=" col-6 md:col-6">
+                  <p>Teléfono Administrativo</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-phone icon-khaki"></i>
+                      <p>{community.phone}</p>
+                    </div>
+
+                  </div>
+                </div>
+              </div>
+
+              <div className='row my-5'>
+                <div className=" col-4 col-md-4 md:col-4">
+                  <p>Provincia</p>
+                  <div className="p-0 col-10 md:col-10">
+                    <div className="p-inputgroup align-items-center justify-content-evenly">
+                      <i className="pi pi-map-marker icon-khaki"></i>
+                      <p>{community.province}</p>
+                    </div>
+
+                  </div>
+                </div>
+                <div className=" col-4 md:col-4">
+                  <p>Cantón</p>
+                  <div className="p-0 col-10 md:col-10">
+                    <div className="p-inputgroup align-items-center justify-content-evenly">
+                      <i className="pi pi-map-marker icon-khaki"></i>
+                      <p>{community.canton}</p>
+                    </div>
+
+                  </div>
+                </div>
+                <div className=" col-4 md:col-4">
+                  <p>Distrito</p>
+                  <div className="p-0 col-10 md:col-10">
+                    <div className="p-inputgroup align-items-center justify-content-evenly">
+                      <i className="pi pi-map-marker icon-khaki"></i>
+                      <p>{community.district}</p>
+                    </div>
+
+                  </div>
+                </div>
+              </div>
+              <div className='row my-5'>
+                <div className=" col-12 md:col-12">
+                  <p>Número de Viviendas</p>
+                  <div className="p-0 col-2  md:col-2" style={{ margin: '0 auto' }}>
+                    <div className="p-inputgroup justify-content-evenly">
+                      <i className="pi pi-hashtag icon-khaki"></i>
+                      <p>{community.num_houses}</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div className='row my-5'>
+                <div className=" col-12 md:col-12">
+
+
+                  <p> <i className="pi pi-home icon-khaki"></i>  Viviendas</p>
+                  <div className="p-0 col-12  md:col-12" style={{ margin: '0 auto' }}>
+                    <div className="p-inputgroup justify-content-evenly">
+                      <DataTable
+                        value={community.houses}
+                        paginator
+                        rows={5}
+                        scrollable
+                        scrollHeight="200px"
+                        scrollDirection="both"
+                        rowsPerPageOptions={[5, 10, 25]}
+                        className="datatable-responsive mt-3"
+                        paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
+                        currentPageReportTemplate="Mostrando {first} a {last} de {totalRecords} viviendas"
+                        globalFilter={globalFilter}
+                      >
+                        <Column
+                          field="number_house"
+                          header={headerNumberHouses}
+                          style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px' }}
+                        ></Column>
+                        <Column
+                          field="tenants"
+                          header={headerTenant}
+                          body={tenantsBodyTemplate}
+                          style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px' }}
+                        ></Column>
+                      </DataTable>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+          </Dialog>
+
+          <Dialog
+            visible={editCommunityDialog}
+            style={{ width: '450px' }}
+            header="Confirmar"
+            modal
+            footer={editEstadoCommunityDialogFooter}
+            onHide={hideEditCommunityDialog}
+          >
+            <div className="flex align-items-center justify-content-center">
+              <i
+                className="pi pi-exclamation-triangle mr-3"
+                style={{ fontSize: '2rem' }}
+              />
+              {community && (
+                <span>
+                  ¿Estás seguro que desea cambiar estado a <b>{community.name}</b>?
+                </span>
+              )}
+            </div>
+          </Dialog>
           <Dialog
             visible={deleteCommunityDialog}
             style={{ width: '450px' }}

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

@@ -1,135 +1,662 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import { InputText } from 'primereact/inputtext';
 import { Button } from 'primereact/button';
 import { DataTable } from 'primereact/datatable';
 import { Column } from 'primereact/column';
+import { Toast } from 'primereact/toast';
+import { Dialog } from 'primereact/dialog';
+import { Toolbar } from 'primereact/toolbar';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+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 { faCircleQuestion } from '@fortawesome/free-solid-svg-icons';
+import { useCookies } from "react-cookie";
+import classNames from 'classnames';
 
 const GuardasSeguridad = () => {
-  const [pokemones, setPokemones] = useState([]);
-  const [urlFetch, setUrlFetch] = useState(
-    'http://localhost:4000/user/findGuards/62be68215692582bbfd77134',
-  );
-  async function fetchP() {
-    let nombres = await fetch(urlFetch, { method: 'GET' });
-    let pokemonesRes = await nombres.json();
-    setPokemones(pokemonesRes.message);
-    console.log(pokemones);
+
+  let emptyGuarda = {
+    _id: null,
+    dni: '',
+    name: '',
+    last_name: '',
+    email: '',
+    phone: '',
+    password: '',
+    user_type: '1',
+    status: '1',
+    status_text: '',
+    date_entry: Date.now(),
+    community_id: '',
+  };
+
+  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 [saveButtonTitle, setSaveButtonTitle] = useState("Registrar");
+  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 + cookies.community_id), { method: 'GET' });
+    let listaGuardasRes = await nombres.json();
+    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(() => {
-    fetchP();
-  }, []);
+    listaGuardasF();
+  }, [])
 
   function registrarGuarda() {
     var data = {
-      dni: document.getElementById('identificacion').value,
-      name: document.getElementById('nombre').value,
-      last_name: document.getElementById('apellidos').value,
-      email: document.getElementById('correo_electronico').value,
-      phone: document.getElementById('telefono').value,
-      password: document.getElementById('correo_electronico').value,
-      user_type: '4', //4 es guarda
-      status: '1',
-      community_id: '62be68215692582bbfd77134',
+      dni: document.getElementById('dni').value,
+      name: document.getElementById('name').value,
+      last_name: document.getElementById('last_name').value,
+      email: document.getElementById('email').value,
+      phone: document.getElementById('phone').value,
+      password: document.getElementById('email').value,
+      user_type: "4", //4 es guarda
+      status: "1",
+      date_entry: Date.now(),
+      community_id: cookies.community_id
     };
-    var data2 = {
-      dni: '98765',
-      name: 'Danielito',
-      last_name: 'Rodriguez',
-      email: 'danirodriguez@gmail.com',
-      phone: 84664515,
-      password: '1203',
-      user_type: '2',
-      status: '4',
-      community_id: '62be68215692582bbfd77134',
-    };
-    console.log(data2);
+    if (guarda._id === null) {
+      console.log('ssss');
+      fetch('http://localhost:4000/user/createGuard', {
+        cache: 'no-cache',
+        method: 'POST',
+        mode: 'cors',
+        body: JSON.stringify(data),
+        headers: {
+          'Content-Type': 'application/json'
+        }
+      }).then((response) => {
+        if (response.status != 201)
+          console.log(`Ocurrió un error con el servicio: ${response.status}`);
+        else
+          return response.json();
+      }).then(() => {
+        listaGuardasF();
+      }).catch(
+        err => console.log('Ocurrió un error con el fetch', err)
+      );
+    } else {
+      data._id = guarda._id;
+      console.log(`Actualizando guarda: ${data}`);
+      fetch(`http://localhost:4000/user/updateGuard/${guarda._id}`, {
+        cache: 'no-cache',
+        method: 'PUT',
+        body: JSON.stringify(data),
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      }).then((response) => {
+        if (response.status !== 200)
+          console.log(`Ocurrió un error con el servicio: ${response.status}`);
+        else return response.json();
+      }).then(() => {
+        toast.current.show({
+          severity: 'success',
+          summary: 'Guarda actualizada',
+          detail: 'Guarda actualizado correctamente'
+        });
+        setGuarda(emptyGuarda);
+        listaGuardasF();
+      })
+    }
+    setSaveButtonTitle("Registrar");
+  }
 
-    fetch('http://localhost:4000/user/createGuard', {
+  const cambiarStatusUser = () => {
+    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',
-      mode: 'cors',
-      body: JSON.stringify(data2),
+      body: JSON.stringify(data),
       headers: {
-        'Content-Type': 'application/json',
-      },
+        'Content-Type': 'application/json'
+      }
+    }).then((response) => {
+      if (response.status != 201)
+        console.log(`Ocurrió un error con el servicio: ${response.status}`);
+      else
+        return response.json();
+    }).then(() => {
+      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 deleteGuarda = () => {
+    fetch(`http://localhost:4000/user/deleteAdminSystem/${guarda._id}`, {
+      cache: 'no-cache',
+      method: 'DELETE',
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    }).then((response) => {
+      if (response.status != 201)
+        console.log(`Ocurrió un error con el servicio: ${response.status}`);
+      else
+        return response.json();
+    }).then(function() {
+      let _guarda = listaGuardas.filter(val => val._id !== guarda._id);
+      setListaGuardas(_guarda);
+      setDeleteGuardaDialog(false);
+      setGuarda(emptyGuarda);
+      toast.current.show({ severity: 'success', summary: 'Éxito', detail: 'Administrador del Sistema Eliminado', life: 3000 });
+    }).catch(err => {
+      console.log('Ocurrió un error con el fetch', err)
+      toast.current.show({ severity: 'danger', summary: 'Error', detail: 'Administrador del Sistema no se pudo Eliminar', life: 3000 });
+    });
+  }
+
+  const deleteSelectedGuardas = () => {
+    let _guardas = listaGuardas.filter(val => !selectedGuardas.includes(val));
+    selectedGuardas.map((item) => {
+      fetch('http://localhost:4000/user/deleteAdminSystem/' + item._id, {
+        cache: 'no-cache',
+        method: 'DELETE',
+        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) {
-        fetchP();
-      })
-      .catch((err) => console.log('Ocurrió un error con el fetch', err));
+    setListaGuardas(_guardas);
+    setDeleteGuardasDialog(false);
+    setSelectedGuardas(null);
+    toast.current.show({
+      severity: 'success',
+      summary: 'Éxito',
+      detail: 'Administradores del Sistema Eliminados',
+      life: 3000
+    });
+  }
+
+  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 editGuard = (guard) => {
+    setGuarda(guard);
+    console.log(guard);
+    setSaveButtonTitle("Actualizar");
+  }
+
+  const cancelEdit = () => {
+    setGuarda(emptyGuarda);
+    setSaveButtonTitle("Registrar");
+  }
+
+  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-pencil"
+          className="p-button-rounded p-button-success mt-2 mx-2"
+          onClick={() => editGuard(rowData)}
+          title="Editar"
+        />
+        <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>
+    );
+  }
+
+  const leftToolbarTemplate = () => {
+    return (
+      <React.Fragment>
+        <div className="my-2">
+          <Button label="Eliminar"
+            icon="pi pi-trash"
+            className="p-button-danger"
+            onClick={confirmDeleteSelected}
+            disabled={!selectedGuardas || !selectedGuardas.length} />
+        </div>
+      </React.Fragment>
+    )
+  }
+
+  const rightToolbarTemplate = () => {
+    return (
+      <React.Fragment>
+        <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">
+      <h5 className="m-0">Guardas de seguridad</h5>
+      <span className="block mt-2 md:mt-0 p-input-icon-left">
+        <i className="pi pi-search" />
+        <InputText type="search" onInput={(e) => setGlobalFilter(e.target.value)} placeholder="Buscar..." />
+      </span>
+    </div>
+  );
+
+  const deleteAdminSystemDialogFooter = (
+    <>
+      <Button label="No" icon="pi pi-times" className="p-button-text" onClick={hideDeleteGuardasDialog} />
+      <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="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>{' '}
+        <FontAwesomeIcon icon={faUserAlt} style={{ color: "#C08135" }} /> {' '}
+        Nombre
+      </p>
+    </>
+  )
+
+  const headerLastName = (
+    <>
+      <p>
+        {' '}
+        <FontAwesomeIcon icon={faUserAlt} style={{ color: "#D7A86E" }} />{' '}
+        Apellido(s)
+      </p>
+    </>
+  )
+
+  const headerDNI = (
+    <p> {' '}
+      <FontAwesomeIcon icon={faIdCardAlt} style={{ color: "#C08135" }} />{' '}
+      Identificación
+    </p>
+  )
+
+  const headerEmail = (
+    <>
+      <p> {' '}
+        <FontAwesomeIcon icon={faAt} style={{ color: "#D7A86E" }} />{' '}
+        Correo Electrónico
+      </p>
+    </>
+  )
+
+  const headerPhone = (
+    <>
+      <p>
+        {' '}
+        <FontAwesomeIcon icon={faPhoneAlt} style={{ color: '#C08135' }} />{' '}
+        Teléfono
+      </p>
+    </>
+  )
+
+  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>
+      </>
+    );
+  };
+
+  const onInputChange = (e, name) => {
+    const value = (e.target && e.target.value) || ''
+    let _guarda = { ...guarda }
+    _guarda[`${name}`] = value
+    setGuarda(_guarda)
   }
 
   return (
     <div className="grid">
       <div className="col-12">
+        <Toast ref={toast} />
         <div className="card">
-          <h5>Guardas de seguridad</h5>
-          <DataTable
-            value={pokemones}
-            scrollable
-            scrollHeight="400px"
-            scrollDirection="both"
-            className="mt-3"
-          >
+          <Toolbar className="mb-4" left={leftToolbarTemplate} right={rightToolbarTemplate}></Toolbar>
+          <DataTable ref={dt} value={listaGuardas} dataKey="_id" paginator rows={5} selection={selectedGuardas} onSelectionChange={(e) => setSelectedGuardas(e.value)}
+            responsiveLayout="scroll" 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}"
+            globalFilter={globalFilter} emptyMessage="No hay guardas registrados.">
+            <Column 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: '160px', minWidth: '160px', wordBreak: 'break-word' }}></Column>
             <Column
-              field="name"
-              header="Nombre"
-              style={{ flexGrow: 1, flexBasis: '160px' }}
-            ></Column>
-            <Column
-              field="last_name"
-              header="Apellidos"
-              style={{ flexGrow: 1, flexBasis: '160px' }}
-              alignFrozen="left"
-            ></Column>
-            <Column
-              field="dni"
-              header="Identificación"
-              style={{ flexGrow: 1, flexBasis: '160px' }}
-            ></Column>
-            <Column
-              field="email"
-              header="Correo electrónico"
-              style={{ flexGrow: 1, flexBasis: '160px' }}
-            ></Column>
-            <Column
-              field="phone"
-              header="Telefóno"
-              style={{ flexGrow: 1, flexBasis: '160px' }}
-            ></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' }} />
+              {guarda && <span>¿Estás seguro que desea eliminar a <b>{guarda.name}</b>?</span>}
+            </div>
+          </Dialog>
+          <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 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>
       </div>
       <div className="col-12">
         <div className="card">
-          <h5>Registro de un guarda de seguridad</h5>
+          <h5>Registro de un Guarda de Seguridad</h5>
           <div className="p-fluid formgrid grid">
             <div className="field col-12 md:col-6">
-              <label htmlFor="nombre">Nombre</label>
-              <InputText id="nombre" type="text" />
+              <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 type="text" id="name" value={guarda.name} onChange={(e) => onInputChange(e, 'name')} required autoFocus className={classNames({ 'p-invalid': submitted && guarda.name === '' })} />
+                </div>
+                {submitted && guarda.name === '' && <small className="p-invalid">Nombre es requerido.</small>}
+              </div>
             </div>
             <div className="field col-12 md:col-6">
-              <label htmlFor="apellidos">Apellidos</label>
-              <InputText id="apellidos" type="text" />
+              <label htmlFor="name">Apellido(s)</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 type="text" id="last_name" value={guarda.last_name} onChange={(e) => onInputChange(e, 'last_name')} required autoFocus className={classNames({ 'p-invalid': submitted && guarda.last_name === '' })} />
+                </div>
+                {submitted && guarda.last_name === '' && <small className="p-invalid">Apellidos son requeridos.</small>}
+              </div>
             </div>
             <div className="field col-12 md:col-6">
-              <label htmlFor="correo_electronico">Correo electrónico</label>
-              <InputText id="correo_electronico" type="text" />
+              <label htmlFor="name">Correo Electrónico</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 type='email' id="email" value={guarda.email} onChange={(e) => onInputChange(e, 'email')} required autoFocus className={classNames({ 'p-invalid': submitted && guarda.email === '' })} />
+                </div>
+                {submitted && guarda.email === '' && <small className="p-invalid">Correo electrónico es requerido.</small>}
+              </div>
             </div>
             <div className="field col-12 md:col-6">
-              <label htmlFor="identificacion">Identificación</label>
-              <InputText id="identificacion" type="text" />
+              <label htmlFor="dni">Identificación</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="dni" value={guarda.dni} onChange={(e) => onInputChange(e, 'dni')} required autoFocus className={classNames({ 'p-invalid': submitted && guarda.dni === '' })} />
+                </div>
+                {submitted && guarda.email === '' && <small className="p-invalid">Identificación es requerida.</small>}
+              </div>
             </div>
-            <div className="field col-12">
-              <label htmlFor="telefono">Teléfono</label>
-              <InputText id="telefono" type="number" rows="4" />
+            <div className="field col-12 md:col-6">
+              <label htmlFor="phone">Número de teléfono</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-phone"></i>
+                  </span>
+                  <InputText id="phone" value={guarda.phone} onChange={(e) => onInputChange(e, 'phone')} type='tel' required autoFocus className={classNames({ 'p-invalid': submitted && guarda.phone === '' })} />
+                </div>
+                {submitted
+                  && guarda.phone === ''
+                  && <small className="p-invalid">Número de teléfono es requerido.</small>}
+              </div>
+            </div>
+            <div style={{
+              display: "flex",
+              justifyContent: "center",
+              gap: "10px",
+              width: "100%"
+            }}>
+              <Button
+                label={`${saveButtonTitle}`}
+                onClick={registrarGuarda}
+              />
+              {saveButtonTitle === 'Actualizar' && (
+                <Button
+                  label="Cancel"
+                  onClick={cancelEdit}
+                  className="p-button-danger" />)}
             </div>
-            <Button label="Registrar" onClick={registrarGuarda}></Button>
           </div>
         </div>
       </div>

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

@@ -1,75 +1,872 @@
-import { Button } from 'primereact/button';
-import { Dropdown } from 'primereact/dropdown';
-import { InputText } from 'primereact/inputtext';
-import React, { useEffect, useState } from 'react';
+import { Button } from 'primereact/button'
+import { InputText } from 'primereact/inputtext'
+import React, { useEffect, useRef, useState } from 'react'
+import { DataTable } from 'primereact/datatable'
+import { Column } from 'primereact/column'
+import { Dropdown } from 'primereact/dropdown'
+import { Toast } from 'primereact/toast'
+import { Dialog } from 'primereact/dialog'
+import { Toolbar } from 'primereact/toolbar'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+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 { faHashtag } from '@fortawesome/free-solid-svg-icons'
+import { faCircleQuestion } from '@fortawesome/free-solid-svg-icons'
+import { useCookies } from 'react-cookie'
+import classNames from 'classnames';
 
 const Inquilinos = () => {
-  const [communitiesList, setCommunitiesList] = useState([]);
-  const communityIdList = communitiesList.map((community) => community.id);
-  async function getCommunites() {
-    let response = await fetch(
-      'http://localhost:4000/community/allCommunities',
+  const emptyTenant = {
+    _id: null,
+    dni: '',
+    name: '',
+    last_name: '',
+    email: '',
+    phone: '',
+    password: '',
+    community_id: '',
+    community_name: '',
+    number_house: 'Sin número de vivienda',
+    user_type: '4',
+    date_entry: new Date(),
+    status: '1',
+    status_text: '',
+  }
+
+  const [tenants, setTenants] = useState([])
+  const [tenant, setTenant] = useState(emptyTenant)
+  const [selectedTentants, setSelectedTenants] = useState(null)
+  const [globalFilter, setGlobalFilter] = useState(null)
+  const [deleteTenantDialog, setDeleteTenantDialog] = useState(false)
+  const [deleteTenantsDialog, setDeleteTenantsDialog] = useState(false)
+  const [community, setCommunity] = useState([])
+  const [saveButtonTitle, setSaveButtonTitle] = useState("Registrar")
+  const [houseNumber, setHouseNumber] = useState([])
+  const [housesList, setHousesList] = useState([])
+  const [submitted, setSubmitted] = useState(false)
+  const [infoDialogVisible, setShowInfoDialog] = useState(false)
+  const toast = useRef(null)
+  const dt = useRef(null)
+  const [cookies] = useCookies()
+  const [changeStatusTenantDialog, setChangeStatusTenantDialog] = useState(false)
+
+  async function tenantsList() {
+    await fetch(
+      `http://localhost:4000/user/findTenants/${cookies.community_id}`,
       { method: 'GET' },
-    );
-    let list = await response.json();
-    setCommunitiesList(list.message);
+    )
+      .then((response) => response.json())
+      .then((data) => data.message)
+      .then((data) => {
+        data = data.filter((val) => val.status !== -1)
+        data.map((item) => {
+          if (item.status === '1') {
+            item.status_text = 'Activo'
+          } else if (item.status === '0') {
+            item.status_text = 'Inactivo'
+          }
+
+          if (item.number_house === '') {
+            item.number_house = 'Sin vivienda asignada'
+          }
+        })
+        setTenants(data)
+      })
+  }
+
+  async function getCommunity() {
+    let response = await fetch(
+      `http://localhost:4000/community/findCommunityName/${cookies.community_id}`,
+      { method: 'GET' },
+    )
+    const responseJson = await response.json()
+    const result = await responseJson.message
+    setCommunity(await result)
+    const houses = await result.houses.filter((house) =>
+      house.state === "desocupada"
+    )
+    setHousesList(houses.map((house) => ({
+      label: house.number_house, value: house.number_house
+    }))
+    )
   }
 
   useEffect(() => {
-    getCommunites();
-  }, []);
-  function registrarInquilino() {
-    let data = {
-      email: document.getElementById('correo_electronico').value,
-      community_id: document.getElementById('numero_vivienda').value,
-      user_type: '3',
-      status: '1',
-    };
+    tenantsList()
+  }, [])
 
-    fetch('http://localhost:3000/api/createUser', {
-      method: 'POST',
+  useEffect(() => {
+    getCommunity()
+  }, [])
+
+  const saveTenant = () => {
+    if (tenant._id === null) {
+      if (tenant.email && tenant.number_house && tenant.dni
+        && tenant.name && tenant.last_name && tenant.phone) {
+        let _tenants = [...tenants]
+        let _tenant = { ...tenant }
+        _tenant.community_id = cookies.community_id;
+        _tenant.number_house = houseNumber;
+        _tenant.password = _tenant.email;
+      console.log(`Registrando nuevo inquilino: ${_tenant}`)
+
+        fetch(`http://localhost:4000/user/createUser`, {
+          cache: 'no-cache',
+          method: 'POST',
+          body: JSON.stringify(_tenant),
+          headers: {
+            'Content-Type': 'application/json',
+          },
+        })
+          .then((response) => {
+            if (response.status !== 200)
+              console.log(`Hubo un error en el servicio: ${response.status}`)
+            else return response.json()
+          })
+          .then(() => {
+            _tenants.push(_tenant)
+            toast.current.show({
+              severity: 'success',
+              summary: 'Éxito',
+              detail: 'Inquilino creado',
+              life: 3000,
+            })
+            setTenants(_tenants)
+            setTenant(emptyTenant)
+            setHouseNumber('')
+          })
+          .catch((error) => console.log(`Ocurrió un error: ${error}`))
+      } else setSubmitted(true)
+    } else {
+      let _tenant = { ..._tenant, number_house: houseNumber };
+      console.log(`Actualizando inquilino: ${_tenant}`)
+      fetch(`http://localhost:4000/user/updateUser/${tenant._id}`, {
+        cache: 'no-cache',
+        method: 'PUT',
+        body: JSON.stringify(_tenant),
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      }).then((response) => {
+        if (response.status !== 200)
+          console.log(`Hubo un error en el servicio: ${response.status}`)
+        else return response.json()
+      }).then(() => {
+        toast.current.show({
+          severity: 'success',
+          summary: 'Éxito',
+          detail: 'Inquilino editado',
+          life: 3000,
+        })
+        tenantsList()
+        setTenant(emptyTenant)
+        setHouseNumber('')
+      })
+    }
+  }
+
+  const deleteTenant = () => {
+    let _tenants = tenants.filter((val) => val._id !== tenant._id)
+    setTenants(_tenants)
+    setDeleteTenantDialog(false)
+    setTenant(emptyTenant)
+    toast.current.show({
+      severity: 'success',
+      summary: 'Inquilino Eliminado',
+      life: 3000,
+    })
+  }
+
+  const deleteSelectedTenants = () => {
+    let _tenants = tenants.filter((val) => !selectedTentants.includes(val))
+    setTenants(_tenants)
+    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_text = 'Inactivo'
+    } else if (tenant.status === '0') {
+      tenant.status = '1'
+      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',
       },
-    }).then((response) => {
-      if (response.ok) {
-        alert('Inquilino registrado correctamente');
-      } else {
-        alert('Error al registrar inquilino');
-      }
-    });
+    })
+      .then((response) => {
+        if (response.status !== 201) {
+          console.log('Ocurrió un error con el servicio: ' + response.status)
+        } else {
+          return response.json()
+        }
+      })
+      .then(() => {
+        setChangeStatusTenantDialog(false)
+        toast.current.show({
+          severity: 'success',
+          summary: 'Éxito',
+          detail: 'Inquilino Actualizado',
+          life: 3000,
+        })
+      })
+      .catch((err) => console.log('Ocurrió un error con el fetch', err))
+  }
+
+  const hideDeleteTenantDialog = () => {
+    setDeleteTenantDialog(false)
+  }
+
+  const hideDeleteTenantsDialog = () => {
+    setDeleteTenantsDialog(false)
+  }
+
+  const confirmDeleteTenant = (tenant) => {
+    setTenant(tenant)
+    setDeleteTenantDialog(true)
+  }
+
+  const confirmDeleteSelected = () => {
+    setDeleteTenantsDialog(true)
+  }
+
+  const hideChangeStatusTenantDialog = () => {
+    setChangeStatusTenantDialog(false)
+  }
+
+  const confirmChangeStatusTenant = (tenant) => {
+    setTenant(tenant)
+    setChangeStatusTenantDialog(true)
+  }
+
+  const hideInfoDialog = () => {
+    setSubmitted(false);
+    setShowInfoDialog(false);
+    setTenant(emptyTenant);
+  }
+
+  const infoTenant = (tenant) => {
+    setTenant(tenant);
+    setShowInfoDialog(true);
+  }
+
+  const editTenant = (tenant) => {
+    setTenant(tenant);
+    console.log(tenant);
+    setSaveButtonTitle('Actualizar');
+    setHouseNumber(tenant.number_house);
+  }
+
+  const cancelEdit = () => {
+    setTenant(emptyTenant);
+    setSaveButtonTitle('Registrar');
+    setHouseNumber('');
+  }
+
+  const actionsTenant = (rowData) => {
+    let icono = ''
+    let text = ''
+    if (rowData.status === '0') {
+      icono = 'pi pi-eye'
+      text = 'Activar Inquilino'
+    } else if (rowData.status === '1') {
+      icono = 'pi pi-eye-slash'
+      text = 'Desactivar Inquilino'
+    }
+    return (
+      <div className='actions'>
+        <Button
+          icon="pi pi-pencil"
+          className="p-button-rounded p-button-success mt-2 mx-2"
+          onClick={() => editTenant(rowData)}
+          title="Editar"
+        />
+        <Button
+          icon="pi pi-exclamation-circle"
+          className="p-button-rounded p-button-info mt-2 mx-2"
+          onClick={() => infoTenant(rowData)}
+          title="Ver Información"
+        />
+        <Button
+          icon={`${icono}`}
+          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 mx-2'
+          onClick={() => confirmDeleteTenant(rowData)}
+          title='Eliminar Inquilino'
+        />
+      </div>
+    )
+  }
+
+  const leftToolbarTemplate = () => {
+    return (
+      <React.Fragment>
+        <div className='my-2'>
+          <Button
+            label='Eliminar'
+            icon='pi pi-trash'
+            className='p-button-danger'
+            onClick={confirmDeleteSelected}
+            disabled={!selectedTentants || !selectedTentants.length}
+          />
+        </div>
+      </React.Fragment>
+    )
+  }
+
+  const rightToolbarTemplate = () => {
+    return (
+      <React.Fragment>
+        <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'>
+      <h5 className='m-0'>Inquilinos</h5>
+      <span className='block mt-2 md:mt-0 p-input-icon-left'>
+        <i className='pi pi-search' />
+        <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
+        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='Sí'
+        icon='pi pi-check'
+        className='p-button-text'
+        onClick={deleteSelectedTenants}
+      />
+    </>
+  )
+
+  const changeStatusTenantDialogFooter = (
+    <>
+      <Button
+        label='No'
+        icon='pi pi-times'
+        className='p-button-text'
+        onClick={hideChangeStatusTenantDialog}
+      />
+      <Button
+        label='Sí'
+        icon='pi pi-check'
+        className='p-button-text'
+        onClick={cambiarStatusUser}
+      />
+    </>
+  )
+
+  const infoDialogFooter = (
+    <>
+      <Button
+        label='Cerrar'
+        icon='pi pi-times'
+        className='p-button-text'
+        onClick={hideInfoDialog}
+      />
+    </>
+  );
+
+  const headerName = (
+    <>
+      <p>
+        <FontAwesomeIcon icon={faUserAlt} style={{ color: '#C08135' }} /> Nombre
+      </p>
+    </>
+  )
+
+  const headerLastName = (
+    <>
+      <p>
+        <FontAwesomeIcon icon={faUserAlt} style={{ color: '#D7A86E' }} />{' '}
+        Apellidos
+      </p>
+    </>
+  )
+
+  const headerDNI = (
+    <>
+      <p>
+        <FontAwesomeIcon icon={faIdCardAlt} style={{ color: '#C08135' }} />{' '}
+        Identificación
+      </p>
+    </>
+  )
+
+  const headerEmail = (
+    <>
+      <p>
+        <FontAwesomeIcon icon={faAt} style={{ color: '#D7A86E' }} /> Correo
+        Electrónico
+      </p>
+    </>
+  )
+
+  const headerPhone = (
+    <>
+      <p>
+        <FontAwesomeIcon icon={faPhoneAlt} style={{ color: '#C08135' }} />{' '}
+        Teléfono
+      </p>
+    </>
+  )
+
+  const headerNumberHouse = (
+    <>
+      <p>
+        <FontAwesomeIcon icon={faHashtag} style={{ color: '#C08135' }} /> Número
+        de vivienda
+      </p>
+    </>
+  )
+
+  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>
+      </>
+    )
+  }
+
+  const onInputChange = (e, name) => {
+    const value = (e.target && e.target.value) || ''
+    let _tenant = { ...tenant }
+    _tenant[`${name}`] = value
+    setTenant(_tenant)
+  }
+
+  const handleHouses = (e) => {
+    const getHouseNumber = e.target.value;
+    setHouseNumber(getHouseNumber);
   }
 
   return (
-    <div className="grid">
+    <div className='grid'>
+      <div className='col-12'>
+        <Toast ref={toast} />
+        <div className='card'>
+          <Toolbar
+            className='mb-4'
+            left={leftToolbarTemplate}
+            right={rightToolbarTemplate}
+          ></Toolbar>
+          <DataTable
+            ref={dt}
+            value={tenants}
+            dataKey='_id'
+            paginator
+            rows={5}
+            selection={selectedTentants}
+            onSelectionChange={(e) => setSelectedTenants(e.value)}
+            scrollable
+            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
+              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',
+              }}
+            ></Column>
+            <Column style={{ flexGrow: 1, flexBasis: '80px', minWidth: '80px' }} body={actionsTenant}></Column>
+          </DataTable>
+          <Dialog
+            visible={infoDialogVisible}
+            style={{ width: '650px' }}
+            header="Información del Inquilino"
+            modal
+            className="p-fluid"
+            footer={infoDialogFooter}
+            onHide={hideInfoDialog}>
+            <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>{tenant.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>{tenant.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>{tenant.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>{tenant.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>{tenant.email}</p>
+                    </div>
+
+                  </div>
+                </div>
+              </div>
+            </div>
+
+          </Dialog>
+          <Dialog
+            visible={deleteTenantDialog}
+            style={{ width: '450px' }}
+            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}
+          >
+            <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'
+            modal
+            footer={changeStatusTenantDialogFooter}
+            onHide={hideChangeStatusTenantDialog}
+          >
+            <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 cambiar estado a <b>{tenant.name}</b>?
+                </span>
+              )}
+            </div>
+          </Dialog>
+        </div>
+      </div>
       <div className="col-12">
         <div className="card">
-          <h5 className="card-header">Registrar Inquilino</h5>
+          <h5>Registro de un Inquilino</h5>
           <div className="p-fluid formgrid grid">
-            <div className="p-field col-12 md:col-6">
-              <label htmlFor="correo_electronico">Correo electrónico</label>
-              <InputText
-                type="email"
-                className="form-control"
-                id="correo_electronico"
-              />
+            <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 type="text" id="name" value={tenant.name} onChange={(e) => onInputChange(e, 'name')} required autoFocus className={classNames({ 'p-invalid': submitted && tenant.name === '' })} />
+                </div>
+                {submitted && tenant.name === '' && <small className="p-invalid">Nombre es requerido.</small>}
+              </div>
             </div>
-            <div className="p-field col-12 md:col-6">
-              <label htmlFor="numero_vivienda">Número de Vivienda</label>
-              <Dropdown
-                id="numero_vivienda"
-                value={communityIdList[0]}
-                options={communitiesList}
-              />
+            <div className="field col-12 md:col-6">
+              <label htmlFor="name">Apellido(s)</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 type="text" id="last_name" value={tenant.last_name} onChange={(e) => onInputChange(e, 'last_name')} required autoFocus className={classNames({ 'p-invalid': submitted && tenant.last_name === '' })} />
+                </div>
+                {submitted && tenant.last_name === '' && <small className="p-invalid">Apellidos son requeridos.</small>}
+              </div>
+            </div>
+            <div className="field col-12 md:col-6">
+              <label htmlFor="name">Correo Electrónico</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 type='email' id="email" value={tenant.email} onChange={(e) => onInputChange(e, 'email')} required autoFocus className={classNames({ 'p-invalid': submitted && tenant.email === '' })} />
+                </div>
+                {submitted && tenant.email === '' && <small className="p-invalid">Correo electrónico es requerido.</small>}
+              </div>
+            </div>
+            <div className="field col-12 md:col-6">
+              <label htmlFor="dni">Identificación</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="dni" value={tenant.dni} onChange={(e) => onInputChange(e, 'dni')} required autoFocus className={classNames({ 'p-invalid': submitted && tenant.dni === '' })} />
+                </div>
+                {submitted && tenant.email === '' && <small className="p-invalid">Identificación es requerida.</small>}
+              </div>
+            </div>
+            <div className="field col-12 md:col-6">
+              <label htmlFor="phone">Número de teléfono</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-phone"></i>
+                  </span>
+                  <InputText id="phone" value={tenant.phone} onChange={(e) => onInputChange(e, 'phone')} type='tel' required autoFocus className={classNames({ 'p-invalid': submitted && tenant.phone === '' })} />
+                </div>
+                {submitted
+                  && tenant.phone === ''
+                  && <small className="p-invalid">Número de teléfono es requerido.</small>}
+              </div>
+            </div>
+            <div className="field col-12 md:col-6">
+              <label htmlFor="number_house">Casa a asignar: </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>
+                  <Dropdown
+                    placeholder="--Seleccione la Casa a Asignar--"
+                    id="number_house"
+                    value={houseNumber}
+                    options={housesList}
+                    onChange={handleHouses}
+                    required autoFocus
+                    className={
+                      classNames({ 'p-invalid': submitted && !houseNumber })}
+                  />
+                </div>
+                {submitted
+                  && !houseNumber
+                  && <small className="p-invalid">Casa es requerida.</small>}
+              </div>
+            </div>
+            <div style={{
+              display: "flex",
+              justifyContent: "center",
+              gap: "10px",
+              width: "100%"
+            }}>
+              <Button
+                label={`${saveButtonTitle}`}
+                onClick={saveTenant}
+              />
+              {saveButtonTitle === 'Actualizar' && (
+                <Button
+                  label="Cancel"
+                  onClick={cancelEdit}
+                  className="p-button-danger" />)}
             </div>
-            <Button label="Registrar" onClick={registrarInquilino} />
           </div>
         </div>
       </div>
     </div>
-  );
-};
+  )
+}
 
-export default React.memo(Inquilinos);
+export default React.memo(Inquilinos)

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

@@ -1,30 +0,0 @@
-import React from 'react';
-import { InputText } from 'primereact/inputtext';
-
-const LogIn = () => {
-  return (
-    <div className="grid">
-      <div className="col-12">
-        <div className="card">
-          <h5>Iniciar Sesión</h5>
-          <div className="p-fluid formgrid grid">
-            <div className="field col-12">
-              <label htmlFor="nombre">Correo electrónico</label>
-              <InputText id="nombre" type="text" />
-            </div>
-            <div className="field col-12 ">
-              <label htmlFor="apellidos">Contraseña</label>
-              <InputText id="apellidos" type="text" />
-            </div>
-
-            {/* <Button label="Registrar" onClick={registrarAdmin}></Button> */}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default LogIn;
-
-/* image 1 */

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

@@ -0,0 +1,226 @@
+import React, { Component, Fragment, useRef } from 'react';
+import Cookies from 'universal-cookie';
+import { InputText } from 'primereact/inputtext';
+import { Button } from 'primereact/button';
+import { Toast } from 'primereact/toast';
+
+const baseUrl = "http://localhost:4000/user/loginUser";
+const cookies = new Cookies();
+
+class LogInUser extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            form: {
+                email: '',
+                password: ''
+            },
+            errorEmail: false,
+            errorPassword: false,
+            logged: null
+        }
+    }
+
+    handleChange = async e => {
+        await this.setState({
+            form: {
+                ...this.state.form,
+                [e.target.name]: e.target.value
+            }
+        });
+    }
+
+    validaciones = (data) => {
+        let error = false;
+        if (data.email == '') {
+            this.setState({
+                errorEmail: true
+            })
+            error = true;
+        } else {
+            this.setState({
+                errorEmail: false
+            })
+        }
+        if (data.password == '') {
+            this.setState({
+                errorPassword: true
+            })
+            error = true;
+        } else {
+            this.setState({
+                errorPassword: false
+            })
+        }
+
+        return error;
+
+    }
+
+    iniciarSesion = async () => {
+        const data = {
+            email: this.state.form.email,
+            password: this.state.form.password
+        }
+
+        console.log(data);
+
+        if (!this.validaciones(data)) {
+            this.setState({
+                email: true,
+                password: true
+            })
+            await fetch(baseUrl, {
+                cache: 'no-cache',
+                method: 'POST',
+                body: JSON.stringify(data),
+                headers: {
+                    'Content-Type': 'application/json'
+                }
+            })
+                .then(response => {
+                    if (response.status != 201)
+                        console.log('Ocurrió un error con el servicio: ' + response.status);
+                    else return response.json();
+                })
+                .then(response => {
+                    console.log(response.message);
+
+                    if (response.message) {
+                        const user = response.message;
+
+                        if(user.user_type == '1' || user.user_type == '2'){
+                            cookies.set('id', user._id, { path: "/" });
+                            cookies.set('name', user.name, { path: "/" });
+                            cookies.set('email', user.email, { path: "/" });
+                            cookies.set('type', user.user_type, { path: "/" });
+                            if (user.user_type != '1') {
+                                cookies.set('community_id', user.community_id, { path: "/" });
+                            }
+                            // alert(`Bienvenido ${user.name}`);
+                            document.getElementById('notification').hidden = true;
+                            document.getElementById('notification2').hidden = false;
+    
+                            document.getElementById("message2").innerHTML = `Bienvenido ${user.name}`;
+    
+                            window.location.href = "/";
+                        }
+                        window.location.href = "/page404";
+
+                       
+                    } else {
+                        document.getElementById('notification2').hidden = true;
+                        document.getElementById('notification').hidden = false;
+
+                        //alert('El usuario o la contraseña no son correctos');
+                        document.getElementById("message").innerHTML = "El usuario o la contraseña son incorrectos";
+                    }
+                })
+                .catch(error => {
+                    console.log(error);
+                })
+        }
+    }
+
+    componentDidMount() {
+        if (cookies.get('email')) {
+            window.location.href = "/";
+        }
+    }
+
+    renderErrorMessage = (name) =>
+        name === this.state.errorMessages.name && (
+            <div className="error">{this.state.errorMessages.message}</div>
+        );
+
+    errors = {
+        email: "Correo requerido",
+        pass: "Contraseña requerida"
+    };
+
+    render() {
+        return (
+
+            <Fragment>
+
+
+                <div className="grid ">
+                    <div className="col-10 xl:col-8">
+                        <div id="notification" className="p-message p-message-error" hidden={true} >
+                            <div className="card">
+                                <h5 className='card-header' id="message">
+                                </h5>
+                            </div>
+                        </div>
+                        <div id="notification2" className="p-message p-message-success" hidden={true} >
+                            <div className="card">
+                                <h5 className='card-header' id="message2">
+                                </h5>
+                            </div>
+                        </div>
+
+
+                    </div>
+                    <div className="col-10 xl:col-8">
+
+                        <div className="card">
+                            <h5 className='card-header'>Iniciar Sesión</h5>
+                            <div className="p-fluid formgrid grid">
+
+                                <div className="field col-12 md:col-12">
+                                    <label htmlFor="email">Correo electrónico</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-user"></i>
+                                            </span>
+                                            <InputText id="email"
+                                                type="email"
+                                                name="email"
+                                                onChange={this.handleChange}
+                                                placeholder='Correo electrónico'
+                                                className={this.state.errorEmail ? 'p-invalid' : ''}
+
+                                            />
+                                        </div>
+                                        {this.state.errorEmail && (
+                                            <small className="p-invalid">Correo electrónico es requerido</small>
+                                        )}
+
+                                    </div>
+                                </div>
+                                <div className="field col-12 md:col-12">
+                                    <label htmlFor="v">Contraseña</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-lock"></i>
+                                            </span>
+                                            <InputText id="password"
+                                                type="password"
+                                                name="password"
+                                                onChange={this.handleChange}
+                                                placeholder='Contraseña'
+                                                className={this.state.errorPassword ? 'p-invalid' : ''}
+                                            />
+                                        </div>
+                                        {this.state.errorPassword && (
+                                            <small className="p-invalid">Contraseña es requerida</small>
+                                        )}
+                                    </div>
+                                </div>
+
+                                <Button label="Iniciar sesión" type="button" onClick={() => this.iniciarSesion()}></Button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </Fragment>
+
+
+
+        );
+    }
+}
+
+export default LogInUser;

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

@@ -0,0 +1,20 @@
+import React from 'react';
+
+
+const Page404 = () => {
+
+    return (
+        <div className="col-12 xl:col-12">
+            <div className="card">
+                <div className="surface-section px-4 py-8 md:px-6 lg:px-8">
+                    <div className="text-700 text-center">
+                        <div className="text-900 font-bold text-5xl mb-3">404</div>
+                        <div className="text-700 text-2xl mb-5">No se encuentra la página</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default React.memo(Page404)

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

@@ -0,0 +1,165 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { InputText } from 'primereact/inputtext';
+import { Button } from 'primereact/button';
+import { InputTextarea } from 'primereact/inputtextarea';
+import { useCookies } from "react-cookie";
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { Toast } from 'primereact/toast';
+import { Dialog } from 'primereact/dialog';
+import { Toolbar } from 'primereact/toolbar';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faHome, faUserAlt } from '@fortawesome/free-solid-svg-icons';
+import { faCommentAlt } 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 { faHomeAlt } from '@fortawesome/free-solid-svg-icons';
+import { Dropdown } from 'primereact/dropdown';
+import classNames from 'classnames';
+const RegistroComunicado = () => {
+
+    let emptyComunicado = {
+        _id: null,
+        post: '',
+        user_id: '',
+        community_id: ''
+    };
+
+    useEffect(()=>{
+      listaComunis();
+    },[])
+
+
+    const [comunicado, setComunicado] = useState(emptyComunicado);
+    const [comunicados,setComuicados]=useState([]);
+    const [comunicadoId, setComunicadoId] = useState(null);
+    const [submitted, setSubmitted] = useState(false);
+    const toast = useRef(null);
+    const dt = useRef(null);
+    const [cookies, setCookie] = useCookies();
+    const [globalFilter, setGlobalFilter] = useState(null);
+
+    async function listaComunis() {
+      let comunicadosA=await fetch('http://localhost:4000/post/allPosts', {method:'GET'});
+      let comunicadosRes= await comunicadosA.json();
+      setComuicados(comunicadosRes.message);
+      console.log(comunicadosRes.message);
+     }
+
+  
+    const saveComunicado = () => {
+        var data = {
+            post: document.getElementById('txt_comunicado').value,
+            user_id: cookies.id,
+            community_id: cookies.community_id
+          };
+      
+          fetch('http://localhost:4000/post/createPost', {
+            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) {
+                
+              }
+            )
+            .catch(
+              err => console.log('Ocurrió un error con el fetch', err)
+            );
+    }
+
+    const header = (
+      <React.Fragment>
+
+          <div className="flex flex-column md:flex-row md:justify-content-between md:align-items-center">
+              <h5 className="m-0">Comunicados de la comunidad</h5>
+              <span className="block mt-2 md:mt-0 p-input-icon-left">
+                  <i className="pi pi-search" />
+                  <InputText type="search" onInput={(e) => setGlobalFilter(e.target.value)} placeholder="Buscar..." />
+              </span>
+          </div>
+      </React.Fragment>
+  );
+  const headerPost = (
+    <>
+        <p>
+            {' '}
+            <FontAwesomeIcon icon={faCommentAlt} style={{ color: "#D7A86E" }} />{' '}
+            Descripción comunicado</p>
+    </>
+  )
+
+  const leftToolbarTemplate = () => {
+    return (
+        <React.Fragment>
+            <div className="my-2">
+                <Button label="Eliminar" icon="pi pi-trash" className="p-button-danger" />
+            </div>
+        </React.Fragment>
+    )
+}
+
+const rightToolbarTemplate = () => {
+    return (
+        <React.Fragment>
+            <Button label="Exportar" icon="pi pi-upload" className="p-button-help" />
+        </React.Fragment>
+    )
+}
+
+    return (
+        <div className="grid">
+            <div className="col-12">
+                  <Toast ref={toast} />
+                  <div className="card">
+                      <Toolbar className="mb-4" left={leftToolbarTemplate} right={rightToolbarTemplate}></Toolbar>
+                      <DataTable ref={dt} value={comunicados} dataKey="_id" paginator rows={5}
+                          scrollable 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} administradores de comunidades de viviendas"
+                          globalFilter={globalFilter} emptyMessage="No hay administradores de comunidades registrados.">
+                          <Column selectionMode="multiple" headerStyle={{ width: '3rem' }}></Column>
+                          <Column field="post" sortable header={headerPost} style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }}></Column>
+        
+                      </DataTable>
+                  </div>
+              </div>
+            <div className="col-12">
+                <div className="card">
+                    <h5>Registro de un comunicado para la comunidad</h5>
+                    <div className="p-fluid formgrid grid">
+                        <div className="field col-12 md:col-12">
+                            <label htmlFor="name">Contenido del comunicado</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-pencil"></i>
+                                    </span>
+                                    <InputTextarea id="txt_comunicado" rows="4"/>
+                                </div>
+                            </div>
+                        </div>
+                        <Button label="Registrar" onClick={saveComunicado} />
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default React.memo(RegistroComunicado);

web-ui/web-react/src/components/generic/InfoDialog.js

@@ -0,0 +1,97 @@
+import React from 'react'
+import { Dialog } from 'primereact/dialog'
+import { Button } from 'primereact/button'
+
+class InfoDialog extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      openInfoDialog: false,
+      footer: (
+        <>
+          <Button label='Cerrar' icon='pi pi-times' onClick={this.onClose} />
+        </>
+      ),
+    }
+  }
+  onClose = () => this.setState({ openInfoDialog: false })
+  render() {
+    return (
+      <div>
+        <Dialog
+          visible={this.state.openInfoDialog}
+          style={{ width: '650px' }}
+          modal
+          className='p-fluid'
+          header={this.props.header}
+          footer={this.state.footer}
+        >
+          <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' />
+                    <p>{this.props.info.name}</p>
+                  </div>
+                </div>
+                <div className='col-4 md:col-4'>
+                  <p>Apellido(s)</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' />
+                      <p>{this.props.info.last_name}</p>
+                    </div>
+                  </div>
+                </div>
+                <div className='col-4 md:col-4'>
+                  <p>Identificación</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' />
+                      <p>{this.props.info.dni}</p>
+                    </div>
+                  </div>
+                </div>
+              </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>{this.props.info.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>{this.props.info.email}</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </Dialog>
+      </div>
+    )
+  }
+}
+export default InfoDialog

web-ui/web-react/src/index.js

@@ -5,11 +5,16 @@ import App from './App';
 //import * as serviceWorker from './serviceWorker';
 import { HashRouter } from 'react-router-dom';
 import ScrollToTop from './ScrollToTop';
+import { CookiesProvider } from "react-cookie";
+
+
 
 ReactDOM.render(
   <HashRouter>
     <ScrollToTop>
-      <App></App>
+      <CookiesProvider>
+        <App></App>
+      </CookiesProvider>
     </ScrollToTop>
   </HashRouter>,
   document.getElementById('root'),