add newline at end of file for user schema

the linter complains, so to avert that, I'm adding it

.github/workflows/node.js.yml

@@ -29,3 +29,22 @@ jobs:
           cd ./api-gateway
           npm ci
           npm run build --if-present
+  build-web:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [14.x, 16.x, 18.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+    steps:
+      - name: checkout
+        uses: actions/checkout@v3
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'npm'
+      - name: Test
+        run: |
+          cd ./web-ui/web-react/
+          npm ci
+          npm run build --if-present

api-gateway/src/app.controller.ts

@@ -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')

api-gateway/src/app.service.ts

@@ -54,64 +54,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 = {};
@@ -153,6 +136,7 @@ export class AppService {
       .pipe(map((message: string) => ({ message })));
   }
 
+
   deleteAdminSystem(id: string) {
     const pattern = { cmd: 'deleteAdminSystem' };
     const payload = { id: id };
@@ -181,17 +165,8 @@ export class AppService {
   // ====================== COMMUNITIES ===============================
 
   //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,
@@ -287,13 +262,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 +287,7 @@ export class AppService {
       .pipe(map((message: string) => ({ message })));
   }
 
-  // ====================== PAYMENTS ===============================
+  // ====================== PAYMENTS =============================== 
 
   //POST parameter from API
   createPayment(
@@ -331,13 +301,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 +329,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 +361,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 +393,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 +425,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 +469,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;
+  }
 }

mobile-ui/App.js

@@ -1,123 +0,0 @@
-import React, {useState} from "react";
-import { Image } from "react-native";
-import AppLoading from "expo-app-loading";
-import { useFonts } from '@use-expo/font';
-import { Asset } from "expo-asset";
-import { Block, GalioProvider } from "galio-framework";
-import { NavigationContainer } from "@react-navigation/native";
-
-// Before rendering any navigation stack
-import { enableScreens } from "react-native-screens";
-enableScreens();
-
-import Screens from "./navigation/Screens";
-import { Images, articles, argonTheme } from "./constants";
-
-// cache app images
-const assetImages = [
-  Images.Onboarding,
-  Images.LogoOnboarding,
-  Images.Logo,
-  Images.Pro,
-  Images.ArgonLogo,
-  Images.iOSLogo,
-  Images.androidLogo
-];
-
-// cache product images
-articles.map(article => assetImages.push(article.image));
-
-function cacheImages(images) {
-  return images.map(image => {
-    if (typeof image === "string") {
-      return Image.prefetch(image);
-    } else {
-      return Asset.fromModule(image).downloadAsync();
-    }
-  });
-}
-
-export default props => {
-  const [isLoadingComplete, setLoading] = useState(false);
-  let [fontsLoaded] = useFonts({
-    'ArgonExtra': require('./assets/font/argon.ttf'),
-  });
-
-  function _loadResourcesAsync() {
-    return Promise.all([...cacheImages(assetImages)]);
-  }
-
-  function _handleLoadingError(error) {
-    // In this case, you might want to report the error to your error
-    // reporting service, for example Sentry
-    console.warn(error);
-  };
-
- function _handleFinishLoading() {
-    setLoading(true);
-  };
-
-  if(!fontsLoaded && !isLoadingComplete) {
-    return (
-      <AppLoading
-        startAsync={_loadResourcesAsync}
-        onError={_handleLoadingError}
-        onFinish={_handleFinishLoading}
-      />
-    );
-  } else if(fontsLoaded) {
-    return (
-      <NavigationContainer>
-        <GalioProvider theme={argonTheme}>
-          <Block flex>
-            <Screens />
-          </Block>
-        </GalioProvider>
-      </NavigationContainer>
-    );
-  } else {
-    return null
-  }
-}
-
-// export default class App extends React.Component {
-//   state = {
-//     isLoadingComplete: false
-//   };
-
-//   render() {
-//     if (!this.state.isLoadingComplete) {
-//       return (
-//         <AppLoading
-//           startAsync={this._loadResourcesAsync}
-//           onError={this._handleLoadingError}
-//           onFinish={this._handleFinishLoading}
-//         />
-//       );
-//     } else {
-//       return (
-//         <NavigationContainer>
-//           <GalioProvider theme={argonTheme}>
-//             <Block flex>
-//               <Screens />
-//             </Block>
-//           </GalioProvider>
-//         </NavigationContainer>
-//       );
-//     }
-//   }
-
-//   _loadResourcesAsync = async () => {
-//     return Promise.all([...cacheImages(assetImages)]);
-//   };
-
-//   _handleLoadingError = error => {
-//     // In this case, you might want to report the error to your error
-//     // reporting service, for example Sentry
-//     console.warn(error);
-//   };
-
-//   _handleFinishLoading = () => {
-//     this.setState({ isLoadingComplete: true });
-//   };
-// }

mobile-ui/App.tsx

@@ -1,14 +1,9 @@
 import { StatusBar } from 'expo-status-bar';
 import { StyleSheet, Text, View } from 'react-native';
-//import { NavigationContainer } from "@react-navigation/native";
-import { Button } from './components';
-
 
 export default function App() {
   return (
     <View style={styles.container}>
-
-      <Button>testing</Button>
       <Text>Open up App.tsx to start working on your app!</Text>
       <StatusBar style="auto" />
     </View>

mobile-ui/app.json

@@ -1,18 +1,14 @@
 {
   "expo": {
-    "name": "Argon FREE React Native",
-    "slug": "argon-free-react-native",
-    "privacy": "public",
-    "platforms": [
-      "ios",
-      "android"
-    ],
-    "version": "1.7.1",
+    "name": "mobile-ui",
+    "slug": "mobile-ui",
+    "version": "1.0.0",
     "orientation": "portrait",
     "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
     "splash": {
       "image": "./assets/splash.png",
-      "resizeMode": "cover",
+      "resizeMode": "contain",
       "backgroundColor": "#ffffff"
     },
     "updates": {
@@ -24,6 +20,14 @@
     "ios": {
       "supportsTablet": true
     },
-    "description": "Argon React Native, based on Argon Design System. Coded by Creative Tim"
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#FFFFFF"
+      }
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
   }
 }

mobile-ui/assets/nucleo icons/svg/bag-17.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" width="24" height="24"><g class="nc-icon-wrapper" fill="#444444"><path fill="#444444" d="M20,0H4C2.3,0,1,1.3,1,3v20c0,0.6,0.4,1,1,1h20c0.6,0,1-0.4,1-1V3C23,1.3,21.7,0,20,0z M12,16 c-3.3,0-6-2.7-6-6c0-0.6,0.4-1,1-1s1,0.4,1,1c0,2.2,1.8,4,4,4s4-1.8,4-4c0-0.6,0.4-1,1-1s1,0.4,1,1C18,13.3,15.3,16,12,16z M20,4H4 C3.4,4,3,3.6,3,3s0.4-1,1-1h16c0.6,0,1,0.4,1,1S20.6,4,20,4z"/></g></svg>

mobile-ui/assets/nucleo icons/svg/basket.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 12 12" width="12" height="12"><g class="nc-icon-wrapper" fill="#444444"><path d="M1,10.5A1.5,1.5,0,0,0,2.5,12h7A1.5,1.5,0,0,0,11,10.5V7H1Z" fill="#444444"/> <path d="M9.838,4,8.171.665a.75.75,0,0,0-1.342.67L8.162,4H3.838L5.171,1.335A.75.75,0,0,0,3.829.665L2.162,4H0V6H12V4Z" fill="#444444" data-color="color-2"/></g></svg>

mobile-ui/assets/nucleo icons/svg/bell.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" width="24" height="24"><g class="nc-icon-wrapper" fill="#444444"><path d="M20,10V8A8,8,0,0,0,4,8v2a4.441,4.441,0,0,1-1.547,3.193A4.183,4.183,0,0,0,1,16c0,2.5,4.112,4,11,4s11-1.5,11-4a4.183,4.183,0,0,0-1.453-2.807A4.441,4.441,0,0,1,20,10Z" fill="#444444"/> <path data-color="color-2" d="M9.145,21.9a2.992,2.992,0,0,0,5.71,0c-.894.066-1.844.1-2.855.1S10.039,21.968,9.145,21.9Z" fill="#444444"/></g></svg>

mobile-ui/assets/nucleo icons/svg/calendar-date.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" width="24" height="24"><g class="nc-icon-wrapper" fill="#444444"><rect data-color="color-2" x="4" y="10" width="4" height="3" fill="#444444"/> <rect data-color="color-2" x="10" y="10" width="4" height="3" fill="#444444"/> <rect data-color="color-2" x="4" y="15" width="4" height="3" fill="#444444"/> <rect data-color="color-2" x="10" y="15" width="4" height="3" fill="#444444"/> <rect data-color="color-2" x="16" y="10" width="4" height="3" fill="#444444"/> <path d="M23,3H18V1a1,1,0,0,0-2,0V3H8V1A1,1,0,0,0,6,1V3H1A1,1,0,0,0,0,4V22a1,1,0,0,0,1,1H23a1,1,0,0,0,1-1V4A1,1,0,0,0,23,3ZM22,21H2V7H22Z" fill="#444444"/></g></svg>

mobile-ui/assets/nucleo icons/svg/chart-pie-35.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" width="24" height="24"><g class="nc-icon-wrapper" fill="#444444"><path data-color="color-2" fill="#444444" d="M13,11h10.949C23.466,5.181,18.819,0.534,13,0.051V11z"/> <path fill="#444444" d="M12.414,13l-8.155,8.155C6.351,22.926,9.051,24,12,24c6.279,0,11.438-4.851,11.949-11H12.414z"/> <path fill="#444444" d="M11,11.586V0.051C4.851,0.562,0,5.721,0,12c0,2.949,1.074,5.649,2.845,7.741L11,11.586z"/></g></svg>

mobile-ui/assets/nucleo icons/svg/diamond.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" width="24" height="24"><g class="nc-icon-wrapper" fill="#444444"><path fill="#444444" d="M18.768,1.36C18.578,1.132,18.297,1,18,1H6C5.703,1,5.422,1.132,5.232,1.36l-5,6 c-0.294,0.353-0.31,0.861-0.039,1.231l11,15C11.382,23.848,11.682,24,12,24s0.618-0.152,0.807-0.409l11-15 c0.271-0.371,0.256-0.878-0.039-1.231L18.768,1.36z M19,9H5V7h14V9z"/></g></svg>

mobile-ui/assets/nucleo icons/svg/engine-start.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 16" width="16" height="16"><g class="nc-icon-wrapper" fill="#444444"><path d="M8,15A7,7,0,0,1,3.333,2.783l1.334,1.49a5,5,0,1,0,6.666,0l1.333-1.49A7,7,0,0,1,8,15Z" fill="#444444"/> <rect x="7" width="2" height="7" fill="#444444" data-color="color-2"/></g></svg>

mobile-ui/assets/nucleo icons/svg/g-check.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 16" width="16" height="16"><g class="nc-icon-wrapper" fill="#444444"><path fill="#444444" d="M16,3.6L15.2,2C8.3,4,4.8,8.4,4.8,8.4L1.6,6L0,7.6L4.8,14C8.5,7.1,16,3.6,16,3.6z"/></g></svg>

mobile-ui/assets/nucleo icons/svg/hat-3.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" width="24" height="24"><g class="nc-icon-wrapper" fill="#444444"><rect x="22" y="11" fill="#444444" width="2" height="6"/> <path data-color="color-2" fill="#444444" d="M13.241,15.73C12.847,15.91,12.43,16,12,16s-0.847-0.09-1.24-0.269L4,12.658V18 c0,2.626,4.024,4,8,4s8-1.374,8-4v-5.341L13.241,15.73z"/> <path fill="#444444" d="M23.414,7.09l-11-5c-0.263-0.119-0.564-0.119-0.827,0l-11,5C0.229,7.252,0,7.607,0,8s0.229,0.748,0.586,0.91 l11,5C11.718,13.97,11.859,14,12,14s0.282-0.03,0.414-0.09l11-5C23.771,8.748,24,8.393,24,8S23.771,7.252,23.414,7.09z"/></g></svg>

mobile-ui/assets/nucleo icons/svg/ic_mail_24px.svg

@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <g class="nc-icon-wrapper" fill="#444444">
-        <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
-    </g>
-</svg>

mobile-ui/assets/nucleo icons/svg/map-big.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" width="24" height="24"><g class="nc-icon-wrapper" fill="#444444"><polygon fill="#444444" points="17,1.382 13,3.382 13,22.618 17,20.618 "/> <polygon data-color="color-2" fill="#444444" points="11,3.382 7,1.382 7,20.618 11,22.618 "/> <path fill="#444444" d="M5,1.434L0.485,4.143C0.185,4.323,0,4.648,0,5v19l5-3.234V1.434z"/> <path data-color="color-2" fill="#444444" d="M23.515,4.143L19,1.434v19.332L24,24V5C24,4.648,23.815,4.323,23.515,4.143z"/></g></svg>

mobile-ui/assets/nucleo icons/svg/menu-8.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 12 12" width="12" height="12"><g class="nc-icon-wrapper" fill="#444444"><path d="M11,9H1a1,1,0,0,0,0,2H11a1,1,0,0,0,0-2Z" fill="#444444"/> <path d="M11,1H1A1,1,0,0,0,1,3H11a1,1,0,0,0,0-2Z" fill="#444444"/> <path d="M11,5H1A1,1,0,0,0,1,7H11a1,1,0,0,0,0-2Z" fill="#444444" data-color="color-2"/></g></svg>

mobile-ui/assets/nucleo icons/svg/nav-down.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 12 12" width="12" height="12"><g class="nc-icon-wrapper" fill="#444444"><polygon points="6 5.882 2.148 2.03 0.074 4.104 6 10.03 11.926 4.104 9.852 2.03 6 5.882" fill="#444444"/></g></svg>

mobile-ui/assets/nucleo icons/svg/nav-left.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 12 12" width="12" height="12"><g class="nc-icon-wrapper" fill="#444444"><polygon points="7.92 0 1.92 6 7.92 12 10.02 9.9 6.12 6 10.02 2.1 7.92 0" fill="#444444"></polygon></g></svg>

mobile-ui/assets/nucleo icons/svg/nav-right.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 12 12" width="12" height="12"><g class="nc-icon-wrapper" fill="#444444"><polygon points="1.98 2.1 5.88 6 1.98 9.9 4.08 12 10.08 6 4.08 0 1.98 2.1" fill="#444444"/></g></svg>

mobile-ui/assets/nucleo icons/svg/padlock-unlocked.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 16" width="16" height="16"><g class="nc-icon-wrapper" fill="#444444"><path fill="#444444" d="M8,2c0.6,0,1.1,0.2,1.5,0.7l0.7,0.7l1.5-1.3L11,1.3C10.2,0.5,9.1,0,8,0C5.8,0,4,1.8,4,4v1.5 C2.8,6.6,2,8.2,2,10c0,3.3,2.7,6,6,6s6-2.7,6-6s-2.7-6-6-6C7.3,4,6.6,4.1,6,4.4V4C6,2.9,6.9,2,8,2z M8,7c1.1,0,2,0.9,2,2 c0,0.7-0.4,1.4-1,1.7V13H7v-2.3c-0.6-0.3-1-1-1-1.7C6,7.9,6.9,7,8,7z"/></g></svg>

mobile-ui/assets/nucleo icons/svg/palette.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" width="24" height="24"><g class="nc-icon-wrapper" fill="#444444"><path fill="#444444" d="M20.4,6.1c-1.1-0.5-2.2-0.8-3.4-0.8c-1.6,0-3,0.5-4.3,0.9c-0.8,0.3-1.6,0.5-2.2,0.5c-0.4,0-0.6-0.1-0.7-0.3 c0-0.1,0.1-0.6,0.2-0.9c0.3-0.9,0.6-2-0.2-3.1c-0.5-0.6-1.3-1-2.2-1c-0.9,0-1.7,0.3-2.5,0.8C1.9,4.4,0,8.1,0,12c0,6.6,5.4,12,12,12 c5.3,0,10.1-3.6,11.6-8.8C23.7,14.6,25.1,8.4,20.4,6.1z M3,12c0-1.1,0.9-2,2-2s2,0.9,2,2s-0.9,2-2,2S3,13.1,3,12z M7.5,19 c-1.1,0-2-0.9-2-2s0.9-2,2-2s2,0.9,2,2S8.6,19,7.5,19z M13,21c-1.1,0-2-0.9-2-2s0.9-2,2-2s2,0.9,2,2S14.1,21,13,21z M17,15 c-1.7,0-3-1.3-3-3s1.3-3,3-3s3,1.3,3,3S18.7,15,17,15z"/></g></svg>

mobile-ui/assets/nucleo icons/svg/search-zoom-in.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 16" width="16" height="16"><g class="nc-icon-wrapper" fill="#444444"><path data-color="color-2" fill="#444444" d="M10,8H8v2H6V8H4V6h2V4h2v2h2V8z"/> <path fill="#444444" d="M7,14c-3.86,0-7-3.14-7-7s3.14-7,7-7s7,3.14,7,7S10.86,14,7,14z M7,2C4.243,2,2,4.243,2,7s2.243,5,5,5 s5-2.243,5-5S9.757,2,7,2z"/> <path data-color="color-2" fill="#444444" d="M15.707,14.293L13.314,11.9c-0.411,0.529-0.885,1.003-1.414,1.414l2.393,2.393 C14.488,15.902,14.744,16,15,16s0.512-0.098,0.707-0.293C16.098,15.316,16.098,14.684,15.707,14.293z"/> </g></svg>

mobile-ui/assets/nucleo icons/svg/shop.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 16" width="16" height="16"><g class="nc-icon-wrapper" fill="#444444"><path fill="#444444" d="M13.9,0.5C13.7,0.2,13.4,0,13,0H3C2.6,0,2.3,0.2,2.1,0.5C0,4.5,0,4.7,0,5c0,1.1,0.9,2,2,2v8c0,0.6,0.4,1,1,1 h10c0.6,0,1-0.4,1-1V7c1.1,0,2-0.9,2-2C16,4.7,16,4.5,13.9,0.5z M10,14v-4H6v4H4V6.7C4.3,6.9,4.6,7,5,7c0.6,0,1.1-0.3,1.5-0.7 C6.9,6.7,7.4,7,8,7s1.1-0.3,1.5-0.7C9.9,6.7,10.4,7,11,7c0.4,0,0.7-0.1,1-0.3V14H10z"></path></g></svg>

mobile-ui/assets/nucleo icons/svg/spaceship.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" width="24" height="24"><g class="nc-icon-wrapper" fill="#444444"><path d="M23.58.424A1,1,0,0,0,22.819.13C8.791.862,3.609,13.358,3.559,13.484a1,1,0,0,0,.22,1.08l5.657,5.657a1,1,0,0,0,1.085.218c.125-.051,12.554-5.291,13.348-19.253A1,1,0,0,0,23.58.424Zm-8.166,10.99a2,2,0,1,1,0-2.828A2,2,0,0,1,15.414,11.414Z" fill="#444444"/> <path data-color="color-2" d="M1.113,18.844a2.844,2.844,0,1,1,4.022,4.022C4.024,23.977,0,24,0,24S0,19.954,1.113,18.844Z" fill="#444444"/> <path id="color-2" d="M10.357,2.341A8.911,8.911,0,0,0,2.522,4.825a9.084,9.084,0,0,0-1.384,1.8,1,1,0,0,0,.155,1.215l1.989,1.99A26.623,26.623,0,0,1,10.357,2.341Z" fill="#444444"/> <path id="color-3" d="M21.659,13.643a8.911,8.911,0,0,1-2.484,7.835,9.084,9.084,0,0,1-1.8,1.384,1,1,0,0,1-1.215-.155l-1.99-1.989A26.623,26.623,0,0,0,21.659,13.643Z" fill="#444444"/></g></svg>

mobile-ui/assets/nucleo icons/svg/support.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 16" width="16" height="16"><g class="nc-icon-wrapper" fill="#444444"><path fill="#444444" d="M8,0C3.6,0,0,3.6,0,8c0,4.4,3.6,8,8,8s8-3.6,8-8C16,3.6,12.4,0,8,0z M8,10c-1.1,0-2-0.9-2-2c0-1.1,0.9-2,2-2 s2,0.9,2,2C10,9.1,9.1,10,8,10z M8,2c0.9,0,1.8,0.2,2.6,0.6L9.044,4.156c-0.761-0.207-1.327-0.207-2.089,0L5.4,2.6 C6.2,2.2,7.1,2,8,2z M2,8c0-0.9,0.2-1.8,0.6-2.6l1.556,1.556c-0.207,0.761-0.207,1.327,0,2.089L2.6,10.6C2.2,9.8,2,8.9,2,8z M8,14 c-0.9,0-1.8-0.2-2.6-0.6l1.556-1.556c0.761,0.207,1.327,0.207,2.089,0L10.6,13.4C9.8,13.8,8.9,14,8,14z M13.4,10.6l-1.556-1.556 c0.207-0.761,0.207-1.327,0-2.089L13.4,5.4C13.8,6.2,14,7.1,14,8C14,8.9,13.8,9.8,13.4,10.6z"/></g></svg>

mobile-ui/assets/nucleo icons/svg/switches.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" width="24" height="24"><g class="nc-icon-wrapper" fill="#444444"><path fill="#444444" d="M6.5,11h11c3,0,5.5-2.5,5.5-5.5S20.5,0,17.5,0h-11C3.5,0,1,2.5,1,5.5S3.5,11,6.5,11z M6.5,2 C8.4,2,10,3.6,10,5.5S8.4,9,6.5,9S3,7.4,3,5.5S4.6,2,6.5,2z"></path> <path data-color="color-2" fill="#444444" d="M17.5,13h-11c-3,0-5.5,2.5-5.5,5.5S3.5,24,6.5,24h11c3,0,5.5-2.5,5.5-5.5S20.5,13,17.5,13z M17.5,22c-1.9,0-3.5-1.6-3.5-3.5s1.6-3.5,3.5-3.5s3.5,1.6,3.5,3.5S19.4,22,17.5,22z"></path></g></svg>

mobile-ui/assets/nucleo icons/svg/ungroup.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 16" width="16" height="16"><g class="nc-icon-wrapper" fill="#444444"><path fill="#444444" d="M11,12H1c-0.553,0-1-0.447-1-1V1c0-0.552,0.447-1,1-1h10c0.553,0,1,0.448,1,1v10C12,11.553,11.553,12,11,12z "></path> <path data-color="color-2" fill="#444444" d="M15,16H4v-2h10V4h2v11C16,15.553,15.553,16,15,16z"></path></g></svg>

mobile-ui/components/Button.js

@@ -1,57 +0,0 @@
-import React from "react";
-import { StyleSheet } from "react-native";
-import PropTypes from 'prop-types';
-import { Button } from "galio-framework";
-
-import argonTheme from "../constants/Theme";
-
-class ArButton extends React.Component {
-  render() {
-    const { small, shadowless, children, color, style, ...props } = this.props;
-    
-    const colorStyle = color && argonTheme.COLORS[color.toUpperCase()];
-
-    const buttonStyles = [
-      small && styles.smallButton,
-      color && { backgroundColor: colorStyle },
-      !shadowless && styles.shadow,
-      {...style}
-    ];
-
-    return (
-      <Button
-        style={buttonStyles}
-        shadowless
-        textStyle={{ fontSize: 12, fontWeight: '700' }}
-        {...props}
-      >
-        {children}
-      </Button>
-    );
-  }
-}
-
-ArButton.propTypes = {
-  small: PropTypes.bool,
-  shadowless: PropTypes.bool,
-  color: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.oneOf(['default', 'primary', 'secondary', 'info', 'error', 'success', 'warning'])
-  ])
-}
-
-const styles = StyleSheet.create({
-  smallButton: {
-    width: 75,
-    height: 28
-  },
-  shadow: {
-    shadowColor: 'black',
-    shadowOffset: { width: 0, height: 4 },
-    shadowRadius: 4,
-    shadowOpacity: 0.1,
-    elevation: 2,
-  },
-});
-
-export default ArButton;

mobile-ui/components/Card.js

@@ -1,98 +0,0 @@
-import React from 'react';
-import { withNavigation } from '@react-navigation/native';
-import PropTypes from 'prop-types';
-import { StyleSheet, Dimensions, Image, TouchableWithoutFeedback } from 'react-native';
-import { Block, Text, theme } from 'galio-framework';
-
-import { argonTheme } from '../constants';
-
-
-class Card extends React.Component {
-  render() {
-    const { navigation, item, horizontal, full, style, ctaColor, imageStyle } = this.props;
-    
-    const imageStyles = [
-      full ? styles.fullImage : styles.horizontalImage,
-      imageStyle
-    ];
-    const cardContainer = [styles.card, styles.shadow, style];
-    const imgContainer = [styles.imageContainer,
-      horizontal ? styles.horizontalStyles : styles.verticalStyles,
-      styles.shadow
-    ];
-
-    return (
-      <Block row={horizontal} card flex style={cardContainer}>
-        <TouchableWithoutFeedback onPress={() => navigation.navigate('Pro')}>
-          <Block flex style={imgContainer}>
-            <Image source={{uri: item.image}} style={imageStyles} />
-          </Block>
-        </TouchableWithoutFeedback>
-        <TouchableWithoutFeedback onPress={() => navigation.navigate('Pro')}>
-          <Block flex space="between" style={styles.cardDescription}>
-            <Text size={14} style={styles.cardTitle}>{item.title}</Text>
-            <Text size={12} muted={!ctaColor} color={ctaColor || argonTheme.COLORS.ACTIVE} bold>{item.cta}</Text>
-          </Block>
-        </TouchableWithoutFeedback>
-      </Block>
-    );
-  }
-}
-
-Card.propTypes = {
-  item: PropTypes.object,
-  horizontal: PropTypes.bool,
-  full: PropTypes.bool,
-  ctaColor: PropTypes.string,
-  imageStyle: PropTypes.any,
-}
-
-const styles = StyleSheet.create({
-  card: {
-    backgroundColor: theme.COLORS.WHITE,
-    marginVertical: theme.SIZES.BASE,
-    borderWidth: 0,
-    minHeight: 114,
-    marginBottom: 16
-  },
-  cardTitle: {
-    flex: 1,
-    flexWrap: 'wrap',
-    paddingBottom: 6
-  },
-  cardDescription: {
-    padding: theme.SIZES.BASE / 2
-  },
-  imageContainer: {
-    borderRadius: 3,
-    elevation: 1,
-    overflow: 'hidden',
-  },
-  image: {
-    // borderRadius: 3,
-  },
-  horizontalImage: {
-    height: 122,
-    width: 'auto',
-  },
-  horizontalStyles: {
-    borderTopRightRadius: 0,
-    borderBottomRightRadius: 0,
-  },
-  verticalStyles: {
-    borderBottomRightRadius: 0,
-    borderBottomLeftRadius: 0
-  },
-  fullImage: {
-    height: 215
-  },
-  shadow: {
-    shadowColor: theme.COLORS.BLACK,
-    shadowOffset: { width: 0, height: 2 },
-    shadowRadius: 4,
-    shadowOpacity: 0.1,
-    elevation: 2,
-  },
-});
-
-export default withNavigation(Card);

mobile-ui/components/DrawerItem.js

@@ -1,130 +0,0 @@
-import React from "react";
-import { StyleSheet, TouchableOpacity, Linking } from "react-native";
-import { Block, Text, theme } from "galio-framework";
-
-import Icon from "./Icon";
-import argonTheme from "../constants/Theme";
-
-class DrawerItem extends React.Component {
-  renderIcon = () => {
-    const { title, focused } = this.props;
-
-    switch (title) {
-      case "Home":
-        return (
-          <Icon
-            name="shop"
-            family="ArgonExtra"
-            size={14}
-            color={focused ? "white" : argonTheme.COLORS.PRIMARY}
-          />
-        );
-      case "Elements":
-        return (
-          <Icon
-            name="map-big"
-            family="ArgonExtra"
-            size={14}
-            color={focused ? "white" : argonTheme.COLORS.ERROR}
-          />
-        );
-      case "Articles":
-        return (
-          <Icon
-            name="spaceship"
-            family="ArgonExtra"
-            size={14}
-            color={focused ? "white" : argonTheme.COLORS.PRIMARY}
-          />
-        );
-      case "Profile":
-        return (
-          <Icon
-            name="chart-pie-35"
-            family="ArgonExtra"
-            size={14}
-            color={focused ? "white" : argonTheme.COLORS.WARNING}
-          />
-        );
-      case "Account":
-        return (
-          <Icon
-            name="calendar-date"
-            family="ArgonExtra"
-            size={14}
-            color={focused ? "white" : argonTheme.COLORS.INFO}
-          />
-        );
-      case "Getting Started":
-        return (<Icon
-          name="spaceship"
-          family="ArgonExtra"
-          size={14}
-          color={focused ? "white" : "rgba(0,0,0,0.5)"}
-        />);
-      case "Log out":
-        return <Icon />;
-      default:
-        return null;
-    }
-  };
-
-  render() {
-    const { focused, title, navigation } = this.props;
-
-    const containerStyles = [
-      styles.defaultStyle,
-      focused ? [styles.activeStyle, styles.shadow] : null
-    ];
-
-    return (
-      <TouchableOpacity
-        style={{ height: 60 }}
-        onPress={() =>
-          title == "Getting Started"
-            ? Linking.openURL(
-                "https://demos.creative-tim.com/argon-pro-react-native/docs/"
-              ).catch(err => console.error("An error occurred", err))
-            : navigation.navigate(title)
-        }
-      >
-        <Block flex row style={containerStyles}>
-          <Block middle flex={0.1} style={{ marginRight: 5 }}>
-            {this.renderIcon()}
-          </Block>
-          <Block row center flex={0.9}>
-            <Text
-              size={15}
-              bold={focused ? true : false}
-              color={focused ? "white" : "rgba(0,0,0,0.5)"}
-            >
-              {title}
-            </Text>
-          </Block>
-        </Block>
-      </TouchableOpacity>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  defaultStyle: {
-    paddingVertical: 16,
-    paddingHorizontal: 16
-  },
-  activeStyle: {
-    backgroundColor: argonTheme.COLORS.ACTIVE,
-    borderRadius: 4
-  },
-  shadow: {
-    shadowColor: theme.COLORS.BLACK,
-    shadowOffset: {
-      width: 0,
-      height: 2
-    },
-    shadowRadius: 8,
-    shadowOpacity: 0.1
-  }
-});
-
-export default DrawerItem;

mobile-ui/components/Header.js

@@ -1,281 +0,0 @@
-import React from 'react';
-import { withNavigation } from '@react-navigation/native';
-import { TouchableOpacity, StyleSheet, Platform, Dimensions } from 'react-native';
-import { Button, Block, NavBar, Text, theme } from 'galio-framework';
-
-import Icon from './Icon';
-import Input from './Input';
-import Tabs from './Tabs';
-import argonTheme from '../constants/Theme';
-
-const { height, width } = Dimensions.get('window');
-const iPhoneX = () => Platform.OS === 'ios' && (height === 812 || width === 812 || height === 896 || width === 896);
-
-const BellButton = ({isWhite, style, navigation}) => (
-  <TouchableOpacity style={[styles.button, style]} onPress={() => navigation.navigate('Pro')}>
-    <Icon
-      family="ArgonExtra"
-      size={16}
-      name="bell"
-      color={argonTheme.COLORS[isWhite ? 'WHITE' : 'ICON']}
-    />
-    <Block middle style={styles.notify} />
-  </TouchableOpacity>
-);
-
-const BasketButton = ({isWhite, style, navigation}) => (
-  <TouchableOpacity style={[styles.button, style]} onPress={() => navigation.navigate('Pro')}>
-    <Icon
-      family="ArgonExtra"
-      size={16}
-      name="basket"
-      color={argonTheme.COLORS[isWhite ? 'WHITE' : 'ICON']}
-    />
-  </TouchableOpacity>
-);
-
-const SearchButton = ({isWhite, style, navigation}) => (
-  <TouchableOpacity style={[styles.button, style]} onPress={() => navigation.navigate('Pro')}>
-    <Icon
-      size={16}
-      family="Galio"
-      name="search-zoom-in"
-      color={theme.COLORS[isWhite ? 'WHITE' : 'ICON']}
-    />
-  </TouchableOpacity>
-);
-
-class Header extends React.Component {
-  handleLeftPress = () => {
-    const { back, navigation } = this.props;
-    return (back ? navigation.goBack() : navigation.openDrawer());
-  }
-  renderRight = () => {
-    const { white, title, navigation } = this.props;
-
-    if (title === 'Title') {
-      return [
-        <BellButton key='chat-title' navigation={navigation} isWhite={white} />,
-        <BasketButton key='basket-title' navigation={navigation} isWhite={white} />
-      ]
-    }
-
-    switch (title) {
-      case 'Home':
-        return ([
-          <BellButton key='chat-home' navigation={navigation} isWhite={white} />,
-          <BasketButton key='basket-home' navigation={navigation} isWhite={white} />
-        ]);
-      case 'Deals':
-        return ([
-          <BellButton key='chat-categories' navigation={navigation} />,
-          <BasketButton key='basket-categories' navigation={navigation} />
-        ]);
-      case 'Categories':
-        return ([
-          <BellButton key='chat-categories' navigation={navigation} isWhite={white} />,
-          <BasketButton key='basket-categories' navigation={navigation} isWhite={white} />
-        ]);
-      case 'Category':
-        return ([
-          <BellButton key='chat-deals' navigation={navigation} isWhite={white} />,
-          <BasketButton key='basket-deals' navigation={navigation} isWhite={white} />
-        ]);
-      case 'Profile':
-        return ([
-          <BellButton key='chat-profile' navigation={navigation} isWhite={white} />,
-          <BasketButton key='basket-deals' navigation={navigation} isWhite={white} />
-        ]);
-      case 'Product':
-        return ([
-          <SearchButton key='search-product' navigation={navigation} isWhite={white} />,
-          <BasketButton key='basket-product' navigation={navigation} isWhite={white} />
-        ]);
-      case 'Search':
-        return ([
-          <BellButton key='chat-search' navigation={navigation} isWhite={white} />,
-          <BasketButton key='basket-search' navigation={navigation} isWhite={white} />
-        ]);
-      case 'Settings':
-        return ([
-          <BellButton key='chat-search' navigation={navigation} isWhite={white} />,
-          <BasketButton key='basket-search' navigation={navigation} isWhite={white} />
-        ]);
-      default:
-        break;
-    }
-  }
-  renderSearch = () => {
-    const { navigation } = this.props;
-    return (
-      <Input
-        right
-        color="black"
-        style={styles.search}
-        placeholder="What are you looking for?"
-        placeholderTextColor={'#8898AA'}
-        onFocus={() => navigation.navigate('Pro')}
-        iconContent={<Icon size={16} color={theme.COLORS.MUTED} name="search-zoom-in" family="ArgonExtra" />}
-      />
-    );
-  }
-  renderOptions = () => {
-    const { navigation, optionLeft, optionRight } = this.props;
-
-    return (
-      <Block row style={styles.options}>
-        <Button shadowless style={[styles.tab, styles.divider]} onPress={() => navigation.navigate('Pro')}>
-          <Block row middle>
-            <Icon name="diamond" family="ArgonExtra" style={{ paddingRight: 8 }} color={argonTheme.COLORS.ICON} />
-            <Text size={16} style={styles.tabTitle}>{optionLeft || 'Beauty'}</Text>
-          </Block>
-        </Button>
-        <Button shadowless style={styles.tab} onPress={() => navigation.navigate('Pro')}>
-          <Block row middle>
-            <Icon size={16} name="bag-17" family="ArgonExtra" style={{ paddingRight: 8 }} color={argonTheme.COLORS.ICON}/>
-            <Text size={16} style={styles.tabTitle}>{optionRight || 'Fashion'}</Text>
-          </Block>
-        </Button>
-      </Block>
-    );
-  }
-  renderTabs = () => {
-    const { tabs, tabIndex, navigation } = this.props;
-    const defaultTab = tabs && tabs[0] && tabs[0].id;
-    
-    if (!tabs) return null;
-
-    return (
-      <Tabs
-        data={tabs || []}
-        initialIndex={tabIndex || defaultTab}
-        onChange={id => navigation.setParams({ tabId: id })} />
-    )
-  }
-  renderHeader = () => {
-    const { search, options, tabs } = this.props;
-    if (search || tabs || options) {
-      return (
-        <Block center>
-          {search ? this.renderSearch() : null}
-          {options ? this.renderOptions() : null}
-          {tabs ? this.renderTabs() : null}
-        </Block>
-      );
-    }
-  }
-  render() {
-    const { back, title, white, transparent, bgColor, iconColor, titleColor, navigation, ...props } = this.props;
-
-    const noShadow = ['Search', 'Categories', 'Deals', 'Pro', 'Profile'].includes(title);
-    const headerStyles = [
-      !noShadow ? styles.shadow : null,
-      transparent ? { backgroundColor: 'rgba(0,0,0,0)' } : null,
-    ];
-
-    const navbarStyles = [
-      styles.navbar,
-      bgColor && { backgroundColor: bgColor }
-    ];
-
-    return (
-      <Block style={headerStyles}>
-        <NavBar
-          back={false}
-          title={title}
-          style={navbarStyles}
-          transparent={transparent}
-          right={this.renderRight()}
-          rightStyle={{ alignItems: 'center' }}
-          left={
-            <Icon 
-              name={back ? 'chevron-left' : "menu"} family="entypo" 
-              size={20} onPress={this.handleLeftPress} 
-              color={iconColor || (white ? argonTheme.COLORS.WHITE : argonTheme.COLORS.ICON)}
-              style={{ marginTop: 2 }}
-            />
-              
-          }
-          leftStyle={{ paddingVertical: 12, flex: 0.2 }}
-          titleStyle={[
-            styles.title,
-            { color: argonTheme.COLORS[white ? 'WHITE' : 'HEADER'] },
-            titleColor && { color: titleColor }
-          ]}
-          {...props}
-        />
-        {this.renderHeader()}
-      </Block>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  button: {
-    padding: 12,
-    position: 'relative',
-  },
-  title: {
-    width: '100%',
-    fontSize: 16,
-    fontWeight: 'bold',
-  },
-  navbar: {
-    paddingVertical: 0,
-    paddingBottom: theme.SIZES.BASE * 1.5,
-    paddingTop: iPhoneX ? theme.SIZES.BASE * 4 : theme.SIZES.BASE,
-    zIndex: 5,
-  },
-  shadow: {
-    backgroundColor: theme.COLORS.WHITE,
-    shadowColor: 'black',
-    shadowOffset: { width: 0, height: 2 },
-    shadowRadius: 6,
-    shadowOpacity: 0.2,
-    elevation: 3,
-  },
-  notify: {
-    backgroundColor: argonTheme.COLORS.LABEL,
-    borderRadius: 4,
-    height: theme.SIZES.BASE / 2,
-    width: theme.SIZES.BASE / 2,
-    position: 'absolute',
-    top: 9,
-    right: 12,
-  },
-  header: {
-    backgroundColor: theme.COLORS.WHITE,
-  },
-  divider: {
-    borderRightWidth: 0.3,
-    borderRightColor: theme.COLORS.ICON,
-  },
-  search: {
-    height: 48,
-    width: width - 32,
-    marginHorizontal: 16,
-    borderWidth: 1,
-    borderRadius: 3,
-    borderColor: argonTheme.COLORS.BORDER
-  },
-  options: {
-    marginBottom: 24,
-    marginTop: 10,
-    elevation: 4,
-  },
-  tab: {
-    backgroundColor: theme.COLORS.TRANSPARENT,
-    width: width * 0.35,
-    borderRadius: 0,
-    borderWidth: 0,
-    height: 24,
-    elevation: 0,
-  },
-  tabTitle: {
-    lineHeight: 19,
-    fontWeight: '400',
-    color: argonTheme.COLORS.HEADER
-  },
-});
-
-export default withNavigation(Header);

mobile-ui/components/Icon.js

@@ -1,34 +0,0 @@
-import React from 'react';
-import * as Font from 'expo-font';
-import { createIconSetFromIcoMoon } from '@expo/vector-icons';
-import { Icon } from 'galio-framework';
-
-import argonConfig from '../assets/config/argon.json';
-const ArgonExtra = require('../assets/font/argon.ttf');
-const IconArgonExtra = createIconSetFromIcoMoon(argonConfig, 'ArgonExtra');
-
-class IconExtra extends React.Component {
-  state = {
-    fontLoaded: false,
-  }
-
-  async componentDidMount() {
-    await Font.loadAsync({ ArgonExtra: ArgonExtra });
-    this.setState({ fontLoaded: true });
-  }
-
-  render() {
-    const { name, family, ...rest } = this.props;
-    
-    if (name && family && this.state.fontLoaded) {
-      if (family === 'ArgonExtra') {
-        return <IconArgonExtra name={name} family={family} {...rest} />;
-      }
-      return <Icon name={name} family={family} {...rest} />;
-    }
-
-    return null;
-  }
-}
-
-export default IconExtra;

mobile-ui/components/Input.js

@@ -1,76 +0,0 @@
-import React from "react";
-import { StyleSheet } from "react-native";
-import PropTypes from 'prop-types';
-
-import { Input } from "galio-framework";
-
-import Icon from './Icon';
-import { argonTheme } from "../constants";
-
-class ArInput extends React.Component {
-  render() {
-    const { shadowless, success, error } = this.props;
-
-    const inputStyles = [
-      styles.input,
-      !shadowless && styles.shadow,
-      success && styles.success,
-      error && styles.error,
-      {...this.props.style}
-    ];
-
-    return (
-      <Input
-        placeholder="write something here"
-        placeholderTextColor={argonTheme.COLORS.MUTED}
-        style={inputStyles}
-        color={argonTheme.COLORS.HEADER}
-        iconContent={
-          <Icon
-            size={14}
-            color={argonTheme.COLORS.ICON}
-            name="link"
-            family="AntDesign"
-          />
-        }
-        {...this.props}
-      />
-    );
-  }
-}
-
-ArInput.defaultProps = {
-  shadowless: false,
-  success: false,
-  error: false
-};
-
-ArInput.propTypes = {
-  shadowless: PropTypes.bool,
-  success: PropTypes.bool,
-  error: PropTypes.bool
-}
-
-const styles = StyleSheet.create({
-  input: {
-    borderRadius: 4,
-    borderColor: argonTheme.COLORS.BORDER,
-    height: 44,
-    backgroundColor: '#FFFFFF'
-  },
-  success: {
-    borderColor: argonTheme.COLORS.INPUT_SUCCESS,
-  },
-  error: {
-    borderColor: argonTheme.COLORS.INPUT_ERROR,
-  },
-  shadow: {
-    shadowColor: argonTheme.COLORS.BLACK,
-    shadowOffset: { width: 0, height: 1 },
-    shadowRadius: 2,
-    shadowOpacity: 0.05,
-    elevation: 2,
-  }
-});
-
-export default ArInput;

mobile-ui/components/Select.js

@@ -1,85 +0,0 @@
-import React from 'react';
-import { StyleSheet } from 'react-native';
-import PropTypes from 'prop-types';
-import ModalDropdown from 'react-native-material-dropdown';
-import { Block, Text } from 'galio-framework';
-
-import Icon from './Icon';
-import { argonTheme } from '../constants';
-
-class DropDown extends React.Component {
-  state = {
-    value: 1,
-  }
-
-  handleOnSelect = (index, value) => {
-    const { onSelect } = this.props;
-
-    this.setState({ value: value });
-    onSelect && onSelect(index, value);
-  }
-
-  render() {
-    const { onSelect, iconName, iconFamily, iconSize, iconColor, color, textStyle, style, ...props } = this.props;
-
-    const modalStyles = [
-      styles.qty,
-      color && { backgroundColor: color },
-      style
-    ];
-
-    const textStyles = [
-      styles.text,
-      textStyle
-    ];
-
-    return (
-      <ModalDropdown
-        style={modalStyles}
-        onSelect={this.handleOnSelect}
-        dropdownStyle={styles.dropdown}
-        dropdownTextStyle={{paddingLeft:16, fontSize:12}}
-        {...props}>
-        <Block flex row middle space="between">
-          <Text size={12} style={textStyles}>{this.state.value}</Text>
-          <Icon name={iconName || "nav-down"} family={iconFamily || "ArgonExtra"} size={iconSize || 10} color={iconColor || argonTheme.COLORS.WHITE} />
-        </Block>
-      </ModalDropdown>
-    )
-  }
-}
-
-DropDown.propTypes = {
-  onSelect: PropTypes.func,
-  iconName: PropTypes.string,
-  iconFamily: PropTypes.string,
-  iconSize: PropTypes.number,
-  color: PropTypes.string,
-  textStyle: PropTypes.any,
-};
-
-const styles = StyleSheet.create({
-  qty: {
-    width: 100,
-    backgroundColor: argonTheme.COLORS.DEFAULT,
-    paddingHorizontal: 16,
-    paddingTop: 10,
-    paddingBottom:9.5,
-    borderRadius: 4,
-    shadowColor: "rgba(0, 0, 0, 0.1)",
-    shadowOffset: { width: 0, height: 2 },
-    shadowRadius: 4,
-    shadowOpacity: 1,
-  },
-  text: {
-    color: argonTheme.COLORS.WHITE,
-    fontWeight: '600'
-  },
-  dropdown: {
-    marginTop: 8,
-    marginLeft: -16,
-    width: 100,
-  },
-});
-
-export default DropDown;

mobile-ui/components/Switch.js

@@ -1,24 +0,0 @@
-import React from 'react';
-import { Switch, Platform } from 'react-native';
-
-import argonTheme from '../constants/Theme';
-
-class MkSwitch extends React.Component {
-  render() {
-    const { value, ...props } = this.props;
-    const thumbColor = Platform.OS === 'ios' ? null :
-      Platform.OS === 'android' && value ? argonTheme.COLORS.SWITCH_ON : argonTheme.COLORS.SWITCH_OFF;
-
-    return (
-      <Switch
-        value={value}
-        thumbColor={thumbColor}
-        ios_backgroundColor={argonTheme.COLORS.SWITCH_OFF}
-        trackColor={{ false: argonTheme.COLORS.SWITCH_ON, true: argonTheme.COLORS.SWITCH_ON }}
-        {...props}
-      />
-    );
-  }
-}
-
-export default MkSwitch;

mobile-ui/components/Tabs.js

@@ -1,159 +0,0 @@
-import React from 'react';
-import { StyleSheet, Dimensions, FlatList, Animated } from 'react-native';
-import { Block, theme } from 'galio-framework';
-
-const { width } = Dimensions.get('screen');
-import argonTheme from '../constants/Theme';
-
-const defaultMenu = [
-  { id: 'popular', title: 'Popular', },
-  { id: 'beauty', title: 'Beauty', },
-  { id: 'cars', title: 'Cars', },
-  { id: 'motocycles', title: 'Motocycles', },
-];
-
-export default class Tabs extends React.Component {
-  static defaultProps = {
-    data: defaultMenu,
-    initialIndex: null,
-  }
-
-  state = {
-    active: null,
-  }
-
-  componentDidMount() {
-    const { initialIndex } = this.props;
-    initialIndex && this.selectMenu(initialIndex);
-  }
-
-  animatedValue = new Animated.Value(1);
-
-  animate() {
-    this.animatedValue.setValue(0);
-
-    Animated.timing(this.animatedValue, {
-      toValue: 1,
-      duration: 300,
-      useNativeDriver: false, // color not supported
-    }).start()
-  }
-
-  menuRef = React.createRef();
-
-  onScrollToIndexFailed = () => {
-    this.menuRef.current.scrollToIndex({
-      index: 0,
-      viewPosition: 0.5
-    });
-  }
-
-  selectMenu = (id) => {
-    this.setState({ active: id });
-
-    this.menuRef.current.scrollToIndex({
-      index: this.props.data.findIndex(item => item.id === id),
-      viewPosition: 0.5
-    });
-
-    this.animate();
-    this.props.onChange && this.props.onChange(id);
-  }
-
-  renderItem = (item) => {
-    const isActive = this.state.active === item.id;
-
-    const textColor = this.animatedValue.interpolate({
-      inputRange: [0, 1],
-      outputRange: [argonTheme.COLORS.BLACK, isActive ? argonTheme.COLORS.WHITE : argonTheme.COLORS.BLACK],
-      extrapolate: 'clamp',
-    });
-    
-    const containerStyles = [
-      styles.titleContainer,
-      !isActive && { backgroundColor: argonTheme.COLORS.SECONDARY },
-      isActive && styles.containerShadow
-    ];
-
-    return (
-      <Block style={containerStyles}>
-        <Animated.Text
-          style={[
-            styles.menuTitle,
-            { color: textColor }
-          ]}
-          onPress={() => this.selectMenu(item.id)}>
-          {item.title}
-        </Animated.Text>
-      </Block>
-    )
-  }
-
-  renderMenu = () => {
-    const { data, ...props } = this.props;
-
-    return (
-      <FlatList
-        {...props}
-        data={data}
-        horizontal={true}
-        ref={this.menuRef}
-        extraData={this.state}
-        keyExtractor={(item) => item.id}
-        showsHorizontalScrollIndicator={false}
-        onScrollToIndexFailed={this.onScrollToIndexFailed}
-        renderItem={({ item }) => this.renderItem(item)}
-        contentContainerStyle={styles.menu}
-      />
-    )
-  }
-
-  render() {
-    return (
-      <Block style={styles.container}>
-        {this.renderMenu()}
-      </Block>
-    )
-  }
-}
-
-const styles = StyleSheet.create({
-  container: {
-    width: width,
-    backgroundColor: theme.COLORS.WHITE,
-    zIndex: 2,
-  },
-  shadow: {
-    shadowColor: theme.COLORS.BLACK,
-    shadowOffset: { width: 0, height: 2 },
-    shadowRadius: 8,
-    shadowOpacity: 0.2,
-    elevation: 4,
-  },
-  menu: {
-    paddingHorizontal: theme.SIZES.BASE * 2.5,
-    paddingTop: 8,
-    paddingBottom: 16,
-  },
-  titleContainer: {
-    alignItems: 'center',
-    backgroundColor: argonTheme.COLORS.ACTIVE,
-    borderRadius: 4,
-    marginRight: 9
-  },
-  containerShadow: {
-    shadowColor: 'black',
-    shadowOffset: { width: 0, height: 2 },
-    shadowRadius: 4,
-    shadowOpacity: 0.1,
-    elevation: 1,
-  },
-  menuTitle: {
-    fontWeight: '600',
-    fontSize: 14,
-    // lineHeight: 28,
-    paddingVertical: 10,
-    paddingHorizontal: 16,
-    color: argonTheme.COLORS.MUTED
-  },
-});

mobile-ui/components/index.js

@@ -1,19 +0,0 @@
-import Button from './Button';
-import Card from './Card';
-import DrawerItem from './DrawerItem';
-import Icon from './Icon';
-import Header from './Header';
-import Input from './Input';
-import Switch from './Switch';
-import Select from './Select';
-
-export {
-  Button,
-  Card,
-  DrawerItem,
-  Icon,
-  Input,
-  Header,
-  Switch, 
-  Select
-};

mobile-ui/constants/Images.js

@@ -1,41 +0,0 @@
-// local imgs
-const Onboarding = require("../assets/imgs/bg.png");
-const Logo = require("../assets/imgs/argon-logo.png");
-const LogoOnboarding = require("../assets/imgs/argon-logo-onboarding.png");
-const ProfileBackground = require("../assets/imgs/profile-screen-bg.png");
-const RegisterBackground = require("../assets/imgs/register-bg.png");
-const Pro = require("../assets/imgs/getPro-bg.png");
-const ArgonLogo = require("../assets/imgs/argonlogo.png");
-const iOSLogo = require("../assets/imgs/ios.png");
-const androidLogo = require("../assets/imgs/android.png");
-// internet imgs
-
-const ProfilePicture = 'https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?fit=crop&w=1650&q=80';
-
-const Viewed = [
-  'https://images.unsplash.com/photo-1501601983405-7c7cabaa1581?fit=crop&w=240&q=80',
-  'https://images.unsplash.com/photo-1543747579-795b9c2c3ada?fit=crop&w=240&q=80',
-  'https://images.unsplash.com/photo-1551798507-629020c81463?fit=crop&w=240&q=80',
-  'https://images.unsplash.com/photo-1470225620780-dba8ba36b745?fit=crop&w=240&q=80',
-  'https://images.unsplash.com/photo-1503642551022-c011aafb3c88?fit=crop&w=240&q=80',
-  'https://images.unsplash.com/photo-1482686115713-0fbcaced6e28?fit=crop&w=240&q=80',
-];
-
-const Products = {
-  'View article': 'https://images.unsplash.com/photo-1501601983405-7c7cabaa1581?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=840&q=840',
-};
-
-export default {
-  Onboarding,
-  Logo,
-  LogoOnboarding,
-  ProfileBackground,
-  ProfilePicture,
-  RegisterBackground,
-  Viewed,
-  Products,
-  Pro,
-  ArgonLogo,
-  iOSLogo,
-  androidLogo
-};

mobile-ui/constants/Theme.js

@@ -1,32 +0,0 @@
-export default {
-  COLORS: {
-    DEFAULT: '#172B4D',
-    PRIMARY: '#5E72E4',
-    SECONDARY: '#F7FAFC',
-    LABEL: '#FE2472',
-    INFO: '#11CDEF',
-    ERROR: '#F5365C',
-    SUCCESS: '#2DCE89',
-    WARNING: '#FB6340',
-    /*not yet changed */
-    MUTED: '#ADB5BD',
-    INPUT: '#DCDCDC',
-    INPUT_SUCCESS: '#7BDEB2',
-    INPUT_ERROR: '#FCB3A4',
-    ACTIVE: '#5E72E4', //same as primary
-    BUTTON_COLOR: '#9C26B0', //wtf
-    PLACEHOLDER: '#9FA5AA',
-    SWITCH_ON: '#5E72E4',
-    SWITCH_OFF: '#D4D9DD',
-    GRADIENT_START: '#6B24AA',
-    GRADIENT_END: '#AC2688',
-    PRICE_COLOR: '#EAD5FB',
-    BORDER_COLOR: '#E7E7E7',
-    BLOCK: '#E7E7E7',
-    ICON: '#172B4D',
-    HEADER: '#525F7F',
-    BORDER: '#CAD1D7',
-    WHITE: '#FFFFFF',
-    BLACK: '#000000'
-  }
-};

mobile-ui/constants/articles.js

@@ -1,29 +0,0 @@
-export default [
-  {
-    title: 'Ice cream is made with carrageenan …',
-    image: 'https://images.unsplash.com/photo-1516559828984-fb3b99548b21?ixlib=rb-1.2.1&auto=format&fit=crop&w=2100&q=80',
-    cta: 'View article', 
-    horizontal: true
-  },
-  {
-    title: 'Is makeup one of your daily esse …',
-    image: 'https://images.unsplash.com/photo-1519368358672-25b03afee3bf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2004&q=80',
-    cta: 'View article'
-  },
-  {
-    title: 'Coffee is more than just a drink: It’s …',
-    image: 'https://images.unsplash.com/photo-1500522144261-ea64433bbe27?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2102&q=80',
-    cta: 'View article' 
-  },
-  {
-    title: 'Fashion is a popular style, especially in …',
-    image: 'https://images.unsplash.com/photo-1487222477894-8943e31ef7b2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1326&q=80',
-    cta: 'View article' 
-  },
-  {
-    title: 'Argon is a great free UI packag …',
-    image: 'https://images.unsplash.com/photo-1482686115713-0fbcaced6e28?fit=crop&w=1947&q=80',
-    cta: 'View article', 
-    horizontal: true
-  },
-];

mobile-ui/constants/index.js

@@ -1,11 +0,0 @@
-import argonTheme from './Theme';
-import articles from './articles';
-import Images from './Images';
-import tabs from './tabs';
-
-export {
-  articles, 
-  argonTheme,
-  Images,
-  tabs
-};

mobile-ui/constants/tabs.js

@@ -1,8 +0,0 @@
-export default tabs = {
-  categories: [
-    { id: 'popular', title: 'Popular' },
-    { id: 'beauty', title: 'Beauty' },
-    { id: 'fashion', title: 'Fashion' },
-    { id: 'car_motorcycle', title: 'Car & Motorcycle' },
-  ],
-}

mobile-ui/constants/utils.js

@@ -1,6 +0,0 @@
-import { Platform, StatusBar } from 'react-native';
-import { theme } from 'galio-framework';
-
-export const StatusHeight = StatusBar.currentHeight;
-export const HeaderHeight = (theme.SIZES.BASE * 3.5 + (StatusHeight || 0));
-export const iPhoneX = () => Platform.OS === 'ios' && (height === 812 || width === 812);

mobile-ui/navigation/Menu.js

@@ -1,71 +0,0 @@
-import { Block, Text, theme } from "galio-framework";
-import { Image, ScrollView, StyleSheet } from "react-native";
-
-import { DrawerItem as DrawerCustomItem } from "../components";
-import Images from "../constants/Images";
-import React from "react";
-
-function CustomDrawerContent({
-  drawerPosition,
-  navigation,
-  profile,
-  focused,
-  state,
-  ...rest
-}) {
-  const screens = ["Home", "Profile", "Account", "Elements", "Articles"];
-  return (
-    <Block
-      style={styles.container}
-      forceInset={{ top: "always", horizontal: "never" }}
-    >
-      <Block flex={0.06} style={styles.header}>
-        <Image styles={styles.logo} source={Images.Logo} />
-      </Block>
-      <Block flex style={{ paddingLeft: 8, paddingRight: 14 }}>
-        <ScrollView style={{ flex: 1 }} showsVerticalScrollIndicator={false}>
-          {screens.map((item, index) => {
-            return (
-              <DrawerCustomItem
-                title={item}
-                key={index}
-                navigation={navigation}
-                focused={state.index === index ? true : false}
-              />
-            );
-          })}
-          <Block
-            flex
-            style={{ marginTop: 24, marginVertical: 8, paddingHorizontal: 8 }}
-          >
-            <Block
-              style={{
-                borderColor: "rgba(0,0,0,0.2)",
-                width: "100%",
-                borderWidth: StyleSheet.hairlineWidth,
-              }}
-            />
-            <Text color="#8898AA" style={{ marginTop: 16, marginLeft: 8 }}>
-              DOCUMENTATION
-            </Text>
-          </Block>
-          <DrawerCustomItem title="Getting Started" navigation={navigation} />
-        </ScrollView>
-      </Block>
-    </Block>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  header: {
-    paddingHorizontal: 28,
-    paddingBottom: theme.SIZES.BASE,
-    paddingTop: theme.SIZES.BASE * 3,
-    justifyContent: "center",
-  },
-});
-
-export default CustomDrawerContent;

mobile-ui/navigation/Screens.js

@@ -1,256 +0,0 @@
-import { Animated, Dimensions, Easing } from "react-native";
-// header for screens
-import { Header, Icon } from "../components";
-import { argonTheme, tabs } from "../constants";
-
-import Articles from "../screens/Articles";
-import { Block } from "galio-framework";
-// drawer
-import CustomDrawerContent from "./Menu";
-import Elements from "../screens/Elements";
-// screens
-import Home from "../screens/Home";
-import Onboarding from "../screens/Onboarding";
-import Pro from "../screens/Pro";
-import Profile from "../screens/Profile";
-import React from "react";
-import Register from "../screens/Register";
-import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
-import { createDrawerNavigator } from "@react-navigation/drawer";
-import { createStackNavigator } from "@react-navigation/stack";
-
-const { width } = Dimensions.get("screen");
-
-const Stack = createStackNavigator();
-const Drawer = createDrawerNavigator();
-const Tab = createBottomTabNavigator();
-
-function ElementsStack(props) {
-  return (
-    <Stack.Navigator
-      screenOptions={{
-        mode: "card",
-        headerShown: false,
-      }}
-    >
-      <Stack.Screen
-        name="Elements"
-        component={Elements}
-        options={{
-          header: ({ navigation, scene }) => (
-            <Header title="Elements" navigation={navigation} scene={scene} />
-          ),
-          cardStyle: { backgroundColor: "#F8F9FE" },
-        }}
-      />
-      <Stack.Screen
-        name="Pro"
-        component={Pro}
-        options={{
-          header: ({ navigation, scene }) => (
-            <Header
-              title=""
-              back
-              white
-              transparent
-              navigation={navigation}
-              scene={scene}
-            />
-          ),
-          headerTransparent: true,
-        }}
-      />
-    </Stack.Navigator>
-  );
-}
-
-function ArticlesStack(props) {
-  return (
-    <Stack.Navigator
-      screenOptions={{
-        mode: "card",
-        headerShown: "screen",
-      }}
-    >
-      <Stack.Screen
-        name="Articles"
-        component={Articles}
-        options={{
-          header: ({ navigation, scene }) => (
-            <Header title="Articles" navigation={navigation} scene={scene} />
-          ),
-          cardStyle: { backgroundColor: "#F8F9FE" },
-        }}
-      />
-      <Stack.Screen
-        name="Pro"
-        component={Pro}
-        options={{
-          header: ({ navigation, scene }) => (
-            <Header
-              title=""
-              back
-              white
-              transparent
-              navigation={navigation}
-              scene={scene}
-            />
-          ),
-          headerTransparent: true,
-        }}
-      />
-    </Stack.Navigator>
-  );
-}
-
-function ProfileStack(props) {
-  return (
-    <Stack.Navigator
-      initialRouteName="Profile"
-      screenOptions={{
-        mode: "card",
-        headerShown: "screen",
-      }}
-    >
-      <Stack.Screen
-        name="Profile"
-        component={Profile}
-        options={{
-          header: ({ navigation, scene }) => (
-            <Header
-              transparent
-              white
-              title="Profile"
-              navigation={navigation}
-              scene={scene}
-            />
-          ),
-          cardStyle: { backgroundColor: "#FFFFFF" },
-          headerTransparent: true,
-        }}
-      />
-      <Stack.Screen
-        name="Pro"
-        component={Pro}
-        options={{
-          header: ({ navigation, scene }) => (
-            <Header
-              title=""
-              back
-              white
-              transparent
-              navigation={navigation}
-              scene={scene}
-            />
-          ),
-          headerTransparent: true,
-        }}
-      />
-    </Stack.Navigator>
-  );
-}
-
-function HomeStack(props) {
-  return (
-    <Stack.Navigator
-      screenOptions={{
-        mode: "card",
-        headerShown: "screen",
-      }}
-    >
-      <Stack.Screen
-        name="Home"
-        component={Home}
-        options={{
-          header: ({ navigation, scene }) => (
-            <Header
-              title="Home"
-              search
-              options
-              navigation={navigation}
-              scene={scene}
-            />
-          ),
-          cardStyle: { backgroundColor: "#F8F9FE" },
-        }}
-      />
-      <Stack.Screen
-        name="Pro"
-        component={Pro}
-        options={{
-          header: ({ navigation, scene }) => (
-            <Header
-              title=""
-              back
-              white
-              transparent
-              navigation={navigation}
-              scene={scene}
-            />
-          ),
-          headerTransparent: true,
-        }}
-      />
-    </Stack.Navigator>
-  );
-}
-
-export default function OnboardingStack(props) {
-  return (
-    <Stack.Navigator
-      screenOptions={{
-        mode: "card",
-        headerShown: false,
-      }}
-    >
-      <Stack.Screen
-        name="Onboarding"
-        component={Onboarding}
-        option={{
-          headerTransparent: true,
-        }}
-      />
-      <Stack.Screen name="App" component={AppStack} />
-    </Stack.Navigator>
-  );
-}
-
-function AppStack(props) {
-  return (
-    <Drawer.Navigator
-      style={{ flex: 1 }}
-      drawerContent={(props) => <CustomDrawerContent {...props} />}
-      drawerStyle={{
-        backgroundColor: "white",
-        width: width * 0.8,
-      }}
-      drawerContentOptions={{
-        activeTintcolor: "white",
-        inactiveTintColor: "#000",
-        activeBackgroundColor: "transparent",
-        itemStyle: {
-          width: width * 0.75,
-          backgroundColor: "transparent",
-          paddingVertical: 16,
-          paddingHorizonal: 12,
-          justifyContent: "center",
-          alignContent: "center",
-          alignItems: "center",
-          overflow: "hidden",
-        },
-        labelStyle: {
-          fontSize: 18,
-          marginLeft: 12,
-          fontWeight: "normal",
-        },
-      }}
-      initialRouteName="Home"
-    >
-      <Drawer.Screen name="Home" component={HomeStack} />
-      <Drawer.Screen name="Profile" component={ProfileStack} />
-      <Drawer.Screen name="Account" component={Register} />
-      <Drawer.Screen name="Elements" component={ElementsStack} />
-      <Drawer.Screen name="Articles" component={ArticlesStack} />
-    </Drawer.Navigator>
-  );
-}

mobile-ui/package.json

@@ -10,23 +10,13 @@
     "eject": "expo eject"
   },
   "dependencies": {
-    "@react-native-community/masked-view": "^0.1.11",
-    "@react-navigation/native": "^6.0.11",
     "expo": "~45.0.0",
     "expo-cli": "^5.4.12",
     "expo-status-bar": "~1.3.0",
-    "galio-framework": "^0.8.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-native": "0.68.2",
-    "react-native-gesture-handler": "~2.2.1",
-    "react-native-material-dropdown": "^0.11.1",
-    "react-native-reanimated": "~2.8.0",
-    "react-native-safe-area-context": "4.2.4",
-    "react-native-screens": "~3.11.1",
     "react-native-web": "0.17.7",
-    "react-navigation": "^4.4.4",
-    "react-navigation-stack": "^2.10.4",
     "sharp-cli": "^2.1.1"
   },
   "devDependencies": {

mobile-ui/screens/Articles.js

@@ -1,252 +0,0 @@
-//galio
-import { Block, Text, theme } from "galio-framework";
-import {
-  Dimensions,
-  Image,
-  ImageBackground,
-  ScrollView,
-  StyleSheet,
-  TouchableWithoutFeedback,
-} from "react-native";
-//argon
-import { Images, argonTheme, articles } from "../constants/";
-
-import { Card } from "../components/";
-import React from "react";
-
-const { width } = Dimensions.get("screen");
-
-const thumbMeasure = (width - 48 - 32) / 3;
-const cardWidth = width - theme.SIZES.BASE * 2;
-const categories = [
-  {
-    title: "Music Album",
-    description:
-      "Rock music is a genre of popular music. It developed during and after the 1960s in the United Kingdom.",
-    image:
-      "https://images.unsplash.com/photo-1470225620780-dba8ba36b745?fit=crop&w=840&q=80",
-    price: "$125",
-  },
-  {
-    title: "Events",
-    description:
-      "Rock music is a genre of popular music. It developed during and after the 1960s in the United Kingdom.",
-    image:
-      "https://images.unsplash.com/photo-1543747579-795b9c2c3ada?fit=crop&w=840&q=80",
-    price: "$35",
-  },
-];
-
-class Articles extends React.Component {
-  renderProduct = (item, index) => {
-    const { navigation } = this.props;
-
-    return (
-      <TouchableWithoutFeedback
-        style={{ zIndex: 3 }}
-        key={`product-${item.title}`}
-        onPress={() => navigation.navigate("Pro", { product: item })}
-      >
-        <Block center style={styles.productItem}>
-          <Image
-            resizeMode="cover"
-            style={styles.productImage}
-            source={{ uri: item.image }}
-          />
-          <Block center style={{ paddingHorizontal: theme.SIZES.BASE }}>
-            <Text
-              center
-              size={16}
-              color={theme.COLORS.MUTED}
-              style={styles.productPrice}
-            >
-              {item.price}
-            </Text>
-            <Text center size={34}>
-              {item.title}
-            </Text>
-            <Text
-              center
-              size={16}
-              color={theme.COLORS.MUTED}
-              style={styles.productDescription}
-            >
-              {item.description}
-            </Text>
-          </Block>
-        </Block>
-      </TouchableWithoutFeedback>
-    );
-  };
-
-  renderCards = () => {
-    return (
-      <Block flex style={styles.group}>
-        <Text bold size={16} style={styles.title}>
-          Cards
-        </Text>
-        <Block flex>
-          <Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
-            <Card item={articles[0]} horizontal />
-            <Block flex row>
-              <Card
-                item={articles[1]}
-                style={{ marginRight: theme.SIZES.BASE }}
-              />
-              <Card item={articles[2]} />
-            </Block>
-            <Card item={articles[4]} full />
-            <Block flex card shadow style={styles.category}>
-              <ImageBackground
-                source={{ uri: Images.Products["View article"] }}
-                style={[
-                  styles.imageBlock,
-                  { width: width - theme.SIZES.BASE * 2, height: 252 },
-                ]}
-                imageStyle={{
-                  width: width - theme.SIZES.BASE * 2,
-                  height: 252,
-                }}
-              >
-                <Block style={styles.categoryTitle}>
-                  <Text size={18} bold color={theme.COLORS.WHITE}>
-                    View article
-                  </Text>
-                </Block>
-              </ImageBackground>
-            </Block>
-          </Block>
-          <Block flex style={{ marginTop: theme.SIZES.BASE / 2 }}>
-            <ScrollView
-              horizontal={true}
-              pagingEnabled={true}
-              decelerationRate={0}
-              scrollEventThrottle={16}
-              snapToAlignment="center"
-              showsHorizontalScrollIndicator={false}
-              snapToInterval={cardWidth + theme.SIZES.BASE * 0.375}
-              contentContainerStyle={{
-                paddingHorizontal: theme.SIZES.BASE / 2,
-              }}
-            >
-              {categories &&
-                categories.map((item, index) =>
-                  this.renderProduct(item, index)
-                )}
-            </ScrollView>
-          </Block>
-        </Block>
-      </Block>
-    );
-  };
-
-  renderAlbum = () => {
-    const { navigation } = this.props;
-
-    return (
-      <Block
-        flex
-        style={[styles.group, { paddingBottom: theme.SIZES.BASE * 5 }]}
-      >
-        <Text bold size={16} style={styles.title}>
-          Album
-        </Text>
-        <Block style={{ marginHorizontal: theme.SIZES.BASE * 2 }}>
-          <Block flex right>
-            <Text
-              size={12}
-              color={theme.COLORS.PRIMARY}
-              onPress={() => navigation.navigate("Home")}
-            >
-              View All
-            </Text>
-          </Block>
-          <Block
-            row
-            space="between"
-            style={{ marginTop: theme.SIZES.BASE, flexWrap: "wrap" }}
-          >
-            {Images.Viewed.map((img, index) => (
-              <Block key={`viewed-${img}`} style={styles.shadow}>
-                <Image
-                  resizeMode="cover"
-                  source={{ uri: img }}
-                  style={styles.albumThumb}
-                />
-              </Block>
-            ))}
-          </Block>
-        </Block>
-      </Block>
-    );
-  };
-
-  render() {
-    return (
-      <Block flex center>
-        <ScrollView showsVerticalScrollIndicator={false}>
-          {this.renderCards()}
-          {this.renderAlbum()}
-        </ScrollView>
-      </Block>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  title: {
-    paddingBottom: theme.SIZES.BASE,
-    paddingHorizontal: theme.SIZES.BASE * 2,
-    marginTop: 22,
-    color: argonTheme.COLORS.HEADER,
-  },
-  group: {
-    paddingTop: theme.SIZES.BASE,
-  },
-  albumThumb: {
-    borderRadius: 4,
-    marginVertical: 4,
-    alignSelf: "center",
-    width: thumbMeasure,
-    height: thumbMeasure,
-  },
-  category: {
-    backgroundColor: theme.COLORS.WHITE,
-    marginVertical: theme.SIZES.BASE / 2,
-    borderWidth: 0,
-  },
-  categoryTitle: {
-    height: "100%",
-    paddingHorizontal: theme.SIZES.BASE,
-    backgroundColor: "rgba(0, 0, 0, 0.5)",
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  imageBlock: {
-    overflow: "hidden",
-    borderRadius: 4,
-  },
-  productItem: {
-    width: cardWidth - theme.SIZES.BASE * 2,
-    marginHorizontal: theme.SIZES.BASE,
-    shadowColor: "black",
-    shadowOffset: { width: 0, height: 7 },
-    shadowRadius: 10,
-    shadowOpacity: 0.2,
-  },
-  productImage: {
-    width: cardWidth - theme.SIZES.BASE,
-    height: cardWidth - theme.SIZES.BASE,
-    borderRadius: 3,
-  },
-  productPrice: {
-    paddingTop: theme.SIZES.BASE,
-    paddingBottom: theme.SIZES.BASE / 2,
-  },
-  productDescription: {
-    paddingTop: theme.SIZES.BASE,
-    // paddingBottom: theme.SIZES.BASE * 2,
-  },
-});
-
-export default Articles;

mobile-ui/screens/Elements.js

@@ -1,487 +0,0 @@
-// Galio components
-import { Block, Button as GaButton, Text, theme } from "galio-framework";
-import { Button, Header, Icon, Input, Select, Switch } from "../components/";
-import {
-  Dimensions,
-  ScrollView,
-  StyleSheet,
-  TouchableOpacity,
-} from "react-native";
-// Argon themed components
-import { argonTheme, tabs } from "../constants/";
-
-import React from "react";
-
-const { width } = Dimensions.get("screen");
-
-class Elements extends React.Component {
-  state = {
-    "switch-1": true,
-    "switch-2": false,
-  };
-
-  toggleSwitch = (switchId) =>
-    this.setState({ [switchId]: !this.state[switchId] });
-
-  renderButtons = () => {
-    return (
-      <Block flex>
-        <Text bold size={16} style={styles.title}>
-          Buttons
-        </Text>
-        <Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
-          <Block center>
-            <Button color="default" style={styles.button}>
-              DEFAULT
-            </Button>
-          </Block>
-          <Block center>
-            <Button
-              color="secondary"
-              textStyle={{ color: "black", fontSize: 12, fontWeight: "700" }}
-              style={styles.button}
-            >
-              SECONDARY
-            </Button>
-          </Block>
-          <Block center>
-            <Button style={styles.button}>PRIMARY</Button>
-          </Block>
-          <Block center>
-            <Button color="info" style={styles.button}>
-              INFO
-            </Button>
-          </Block>
-          <Block center>
-            <Button color="success" style={styles.button}>
-              SUCCESS
-            </Button>
-          </Block>
-          <Block center>
-            <Button color="warning" style={styles.button}>
-              WARNING
-            </Button>
-          </Block>
-          <Block center>
-            <Button color="error" style={styles.button}>
-              ERROR
-            </Button>
-          </Block>
-          <Block row space="evenly">
-            <Block flex left style={{ marginTop: 8 }}>
-              <Select
-                defaultIndex={1}
-                options={["01", "02", "03", "04", "05"]}
-              />
-            </Block>
-            <Block flex center>
-              <Button small center color="default" style={styles.optionsButton}>
-                DELETE
-              </Button>
-            </Block>
-            <Block flex={1.25} right>
-              <Button center color="default" style={styles.optionsButton}>
-                SAVE FOR LATER
-              </Button>
-            </Block>
-          </Block>
-        </Block>
-      </Block>
-    );
-  };
-
-  renderText = () => {
-    return (
-      <Block flex style={styles.group}>
-        <Text bold size={16} style={styles.title}>
-          Typography
-        </Text>
-        <Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
-          <Text
-            h1
-            style={{ marginBottom: theme.SIZES.BASE / 2 }}
-            color={argonTheme.COLORS.DEFAULT}
-          >
-            Heading 1
-          </Text>
-          <Text
-            h2
-            style={{ marginBottom: theme.SIZES.BASE / 2 }}
-            color={argonTheme.COLORS.DEFAULT}
-          >
-            Heading 2
-          </Text>
-          <Text
-            h3
-            style={{ marginBottom: theme.SIZES.BASE / 2 }}
-            color={argonTheme.COLORS.DEFAULT}
-          >
-            Heading 3
-          </Text>
-          <Text
-            h4
-            style={{ marginBottom: theme.SIZES.BASE / 2 }}
-            color={argonTheme.COLORS.DEFAULT}
-          >
-            Heading 4
-          </Text>
-          <Text
-            h5
-            style={{ marginBottom: theme.SIZES.BASE / 2 }}
-            color={argonTheme.COLORS.DEFAULT}
-          >
-            Heading 5
-          </Text>
-          <Text
-            p
-            style={{ marginBottom: theme.SIZES.BASE / 2 }}
-            color={argonTheme.COLORS.DEFAULT}
-          >
-            Paragraph
-          </Text>
-          <Text muted>This is a muted paragraph.</Text>
-        </Block>
-      </Block>
-    );
-  };
-
-  renderInputs = () => {
-    return (
-      <Block flex style={styles.group}>
-        <Text bold size={16} style={styles.title}>
-          Inputs
-        </Text>
-        <Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
-          <Input right placeholder="Regular" iconContent={<Block />} />
-        </Block>
-        <Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
-          <Input
-            right
-            placeholder="Regular Custom"
-            style={{
-              borderColor: argonTheme.COLORS.INFO,
-              borderRadius: 4,
-              backgroundColor: "#fff",
-            }}
-            iconContent={<Block />}
-          />
-        </Block>
-        <Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
-          <Input
-            placeholder="Icon left"
-            iconContent={
-              <Icon
-                size={11}
-                style={{ marginRight: 10 }}
-                color={argonTheme.COLORS.ICON}
-                name="search-zoom-in"
-                family="ArgonExtra"
-              />
-            }
-          />
-        </Block>
-        <Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
-          <Input
-            right
-            placeholder="Icon Right"
-            iconContent={
-              <Icon
-                size={11}
-                color={argonTheme.COLORS.ICON}
-                name="search-zoom-in"
-                family="ArgonExtra"
-              />
-            }
-          />
-        </Block>
-        <Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
-          <Input
-            success
-            right
-            placeholder="Success"
-            iconContent={
-              <Block
-                middle
-                style={{
-                  width: 20,
-                  height: 20,
-                  borderRadius: 10,
-                  backgroundColor: argonTheme.COLORS.INPUT_SUCCESS,
-                }}
-              >
-                <Icon
-                  size={11}
-                  color={argonTheme.COLORS.ICON}
-                  name="g-check"
-                  family="ArgonExtra"
-                />
-              </Block>
-            }
-          />
-        </Block>
-        <Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
-          <Input
-            error
-            right
-            placeholder="Error Input"
-            iconContent={
-              <Block
-                middle
-                style={{
-                  width: 20,
-                  height: 20,
-                  borderRadius: 10,
-                  backgroundColor: argonTheme.COLORS.INPUT_ERROR,
-                }}
-              >
-                <Icon
-                  size={11}
-                  color={argonTheme.COLORS.ICON}
-                  name="support"
-                  family="ArgonExtra"
-                />
-              </Block>
-            }
-          />
-        </Block>
-      </Block>
-    );
-  };
-
-  renderSwitches = () => {
-    return (
-      <Block flex style={styles.group}>
-        <Text bold size={16} style={styles.title}>
-          Switches
-        </Text>
-        <Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
-          <Block
-            row
-            middle
-            space="between"
-            style={{ marginBottom: theme.SIZES.BASE }}
-          >
-            <Text size={14}>Switch is ON</Text>
-            <Switch
-              value={this.state["switch-1"]}
-              onValueChange={() => this.toggleSwitch("switch-1")}
-            />
-          </Block>
-          <Block row middle space="between">
-            <Text size={14}>Switch is OFF</Text>
-            <Switch
-              value={this.state["switch-2"]}
-              onValueChange={() => this.toggleSwitch("switch-2")}
-            />
-          </Block>
-        </Block>
-      </Block>
-    );
-  };
-
-  renderTableCell = () => {
-    const { navigation } = this.props;
-    return (
-      <Block flex style={styles.group}>
-        <Text bold size={16} style={styles.title}>
-          Table Cell
-        </Text>
-        <Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
-          <Block style={styles.rows}>
-            <TouchableOpacity onPress={() => navigation.navigate("Pro")}>
-              <Block row middle space="between" style={{ paddingTop: 7 }}>
-                <Text size={14}>Manage Options</Text>
-                <Icon
-                  name="chevron-right"
-                  family="entypo"
-                  style={{ paddingRight: 5 }}
-                />
-              </Block>
-            </TouchableOpacity>
-          </Block>
-        </Block>
-      </Block>
-    );
-  };
-
-  renderSocial = () => {
-    return (
-      <Block flex style={styles.group}>
-        <Text bold size={16} style={styles.title}>
-          Social
-        </Text>
-        <Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
-          <Block row center space="between">
-            <Block flex middle right>
-              <GaButton
-                round
-                onlyIcon
-                shadowless
-                icon="facebook"
-                iconFamily="Font-Awesome"
-                iconColor={theme.COLORS.WHITE}
-                iconSize={theme.SIZES.BASE * 1.625}
-                color={theme.COLORS.FACEBOOK}
-                style={[styles.social, styles.shadow]}
-              />
-            </Block>
-            <Block flex middle center>
-              <GaButton
-                round
-                onlyIcon
-                shadowless
-                icon="twitter"
-                iconFamily="Font-Awesome"
-                iconColor={theme.COLORS.WHITE}
-                iconSize={theme.SIZES.BASE * 1.625}
-                color={theme.COLORS.TWITTER}
-                style={[styles.social, styles.shadow]}
-              />
-            </Block>
-            <Block flex middle left>
-              <GaButton
-                round
-                onlyIcon
-                shadowless
-                icon="dribbble"
-                iconFamily="Font-Awesome"
-                iconColor={theme.COLORS.WHITE}
-                iconSize={theme.SIZES.BASE * 1.625}
-                color={theme.COLORS.DRIBBBLE}
-                style={[styles.social, styles.shadow]}
-              />
-            </Block>
-          </Block>
-        </Block>
-      </Block>
-    );
-  };
-
-  renderNavigation = () => {
-    return (
-      <Block flex style={styles.group}>
-        <Text bold size={16} style={styles.title}>
-          Navigation
-        </Text>
-        <Block>
-          <Block style={{ marginBottom: theme.SIZES.BASE }}>
-            <Header back title="Title" navigation={this.props.navigation} />
-          </Block>
-
-          <Block style={{ marginBottom: theme.SIZES.BASE }}>
-            <Header
-              white
-              back
-              title="Title"
-              navigation={this.props.navigation}
-              bgColor={argonTheme.COLORS.ACTIVE}
-              titleColor="white"
-              iconColor="white"
-            />
-          </Block>
-
-          <Block style={{ marginBottom: theme.SIZES.BASE }}>
-            <Header search title="Title" navigation={this.props.navigation} />
-          </Block>
-
-          <Block style={{ marginBottom: theme.SIZES.BASE }}>
-            <Header
-              tabs={tabs.categories}
-              search
-              title="Title"
-              navigation={this.props.navigation}
-            />
-          </Block>
-
-          <Block style={{ marginBottom: theme.SIZES.BASE }}>
-            <Header
-              options
-              search
-              title="Title"
-              optionLeft="Option 1"
-              optionRight="Option 2"
-              navigation={this.props.navigation}
-            />
-          </Block>
-        </Block>
-      </Block>
-    );
-  };
-
-  render() {
-    return (
-      <Block flex center>
-        <ScrollView
-          showsVerticalScrollIndicator={false}
-          contentContainerStyle={{ paddingBottom: 30, width }}
-        >
-          {this.renderButtons()}
-          {this.renderText()}
-          {this.renderInputs()}
-          {this.renderSocial()}
-          {this.renderSwitches()}
-          {this.renderNavigation()}
-          {this.renderTableCell()}
-        </ScrollView>
-      </Block>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  title: {
-    paddingBottom: theme.SIZES.BASE,
-    paddingHorizontal: theme.SIZES.BASE * 2,
-    marginTop: 44,
-    color: argonTheme.COLORS.HEADER,
-  },
-  group: {
-    paddingTop: theme.SIZES.BASE * 2,
-  },
-  shadow: {
-    shadowColor: "black",
-    shadowOffset: { width: 0, height: 2 },
-    shadowRadius: 4,
-    shadowOpacity: 0.2,
-    elevation: 2,
-  },
-  button: {
-    marginBottom: theme.SIZES.BASE,
-    width: width - theme.SIZES.BASE * 2,
-  },
-  optionsButton: {
-    width: "auto",
-    height: 34,
-    paddingHorizontal: theme.SIZES.BASE,
-    paddingVertical: 10,
-  },
-  input: {
-    borderBottomWidth: 1,
-  },
-  inputDefault: {
-    borderBottomColor: argonTheme.COLORS.PLACEHOLDER,
-  },
-  inputTheme: {
-    borderBottomColor: argonTheme.COLORS.PRIMARY,
-  },
-  inputInfo: {
-    borderBottomColor: argonTheme.COLORS.INFO,
-  },
-  inputSuccess: {
-    borderBottomColor: argonTheme.COLORS.SUCCESS,
-  },
-  inputWarning: {
-    borderBottomColor: argonTheme.COLORS.WARNING,
-  },
-  inputDanger: {
-    borderBottomColor: argonTheme.COLORS.ERROR,
-  },
-  social: {
-    width: theme.SIZES.BASE * 3.5,
-    height: theme.SIZES.BASE * 3.5,
-    borderRadius: theme.SIZES.BASE * 1.75,
-    justifyContent: "center",
-  },
-});
-
-export default Elements;

mobile-ui/screens/Home.js

@@ -1,47 +0,0 @@
-import React from 'react';
-import { StyleSheet, Dimensions, ScrollView } from 'react-native';
-import { Block, theme } from 'galio-framework';
-
-import { Card } from '../components';
-import articles from '../constants/articles';
-const { width } = Dimensions.get('screen');
-
-class Home extends React.Component {
-  renderArticles = () => {
-    return (
-      <ScrollView
-        showsVerticalScrollIndicator={false}
-        contentContainerStyle={styles.articles}>
-        <Block flex>
-          <Card item={articles[0]} horizontal  />
-          <Block flex row>
-            <Card item={articles[1]} style={{ marginRight: theme.SIZES.BASE }} />
-            <Card item={articles[2]} />
-          </Block>
-          <Card item={articles[3]} horizontal />
-          <Card item={articles[4]} full />
-        </Block>
-      </ScrollView>
-    )
-  }
-
-  render() {
-    return (
-      <Block flex center style={styles.home}>
-        {this.renderArticles()}
-      </Block>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  home: {
-    width: width,    
-  },
-  articles: {
-    width: width - theme.SIZES.BASE * 2,
-    paddingVertical: theme.SIZES.BASE,
-  },
-});
-
-export default Home;

mobile-ui/screens/Onboarding.js

@@ -1,99 +0,0 @@
-import React from "react";
-import {
-  ImageBackground,
-  Image,
-  StyleSheet,
-  StatusBar,
-  Dimensions
-} from "react-native";
-import { Block, Button, Text, theme } from "galio-framework";
-
-const { height, width } = Dimensions.get("screen");
-
-import argonTheme from "../constants/Theme";
-import Images from "../constants/Images";
-
-class Onboarding extends React.Component {
-  render() {
-    const { navigation } = this.props;
-
-    return (
-      <Block flex style={styles.container}>
-        <StatusBar hidden />
-        <Block flex center>
-        <ImageBackground
-            source={Images.Onboarding}
-            style={{ height, width, zIndex: 1 }}
-          />
-        </Block>
-        <Block center>
-          <Image source={Images.LogoOnboarding} style={styles.logo} />
-        </Block>
-        <Block flex space="between" style={styles.padded}>
-            <Block flex space="around" style={{ zIndex: 2 }}>
-              <Block style={styles.title}>
-                <Block>
-                  <Text color="white" size={60}>
-                    Design
-                  </Text>
-                </Block>
-                <Block>
-                  <Text color="white" size={60}>
-                    System
-                  </Text>
-                </Block>
-                <Block style={styles.subTitle}>
-                  <Text color="white" size={16}>
-                    Fully coded React Native components.
-                  </Text>
-                </Block>
-              </Block>
-              <Block center>
-                <Button
-                  style={styles.button}
-                  color={argonTheme.COLORS.SECONDARY}
-                  onPress={() => navigation.navigate("App")}
-                  textStyle={{ color: argonTheme.COLORS.BLACK }}
-                >
-                  Get Started
-                </Button>
-              </Block>
-          </Block>
-        </Block>
-      </Block>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  container: {
-    backgroundColor: theme.COLORS.BLACK
-  },
-  padded: {
-    paddingHorizontal: theme.SIZES.BASE * 2,
-    position: "relative",
-    bottom: theme.SIZES.BASE,
-    zIndex: 2,
-  },
-  button: {
-    width: width - theme.SIZES.BASE * 4,
-    height: theme.SIZES.BASE * 3,
-    shadowRadius: 0,
-    shadowOpacity: 0
-  },
-  logo: {
-    width: 200,
-    height: 60,
-    zIndex: 2,
-    position: 'relative',
-    marginTop: '-50%'
-  },
-  title: {
-    marginTop:'-5%'
-  },
-  subTitle: {
-    marginTop: 20
-  }
-});
-
-export default Onboarding;

mobile-ui/screens/Pro.js

@@ -1,100 +0,0 @@
-import React from 'react';
-import { ImageBackground, Image, StyleSheet, StatusBar, Dimensions, Platform, Linking } from 'react-native';
-import { Block, Button, Text, theme } from 'galio-framework';
-
-const { height, width } = Dimensions.get('screen');
-import { Images, argonTheme } from '../constants/';
-import { HeaderHeight } from "../constants/utils";
-
-export default class Pro extends React.Component {
-  render() {
-    const { navigation } = this.props;
-
-    return (
-      <Block flex style={styles.container}>
-        <StatusBar barStyle="light-content" />
-        <Block flex>
-          <ImageBackground
-            source={Images.Pro}
-            style={{ flex: 1, height: height, width, zIndex: 1 }}
-          />
-          <Block space="between" style={styles.padded}>
-            <Block>
-              <Block>
-                <Image source={Images.ArgonLogo}
-                  style={{ marginBottom: theme.SIZES.BASE * 1.5 }}/>
-              </Block>
-              <Block >
-                <Block>
-                  <Text color="white" size={60}>Argon</Text>
-                </Block>
-                <Block>
-                  <Text color="white" size={60}>Design</Text>
-                </Block>
-                <Block row>
-                  <Text color="white" size={60}>System</Text>
-                  <Block middle style={styles.pro}>
-                    <Text size={16} color="white">PRO</Text>
-                  </Block>
-                </Block>
-              </Block>
-              <Text size={16} color='rgba(255,255,255,0.6)' style={{ marginTop: 35 }}>
-                Take advantage of all the features and screens made upon Galio Design System, coded on React Native for both.
-              </Text>
-              <Block row style={{ marginTop: theme.SIZES.BASE * 1.5, marginBottom: theme.SIZES.BASE * 4 }}>
-                <Image
-                  source={Images.iOSLogo}
-                  style={{ height: 38, width: 82, marginRight: theme.SIZES.BASE * 1.5 }} />
-                <Image
-                  source={Images.androidLogo}
-                  style={{ height: 38, width: 140 }} />
-              </Block>
-              <Button
-                shadowless
-                style={styles.button}
-                color={argonTheme.COLORS.INFO}
-                onPress={() => Linking.openURL('https://www.creative-tim.com/product/argon-pro-react-native').catch((err) => console.error('An error occurred', err))}>
-                <Text bold color={theme.COLORS.WHITE}>BUY NOW</Text>
-              </Button>
-            </Block>
-          </Block>
-        </Block>
-      </Block>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  container: {
-    backgroundColor: theme.COLORS.BLACK,
-    marginTop: Platform.OS === 'android' ? -HeaderHeight : 0,
-  },
-  padded: {
-    paddingHorizontal: theme.SIZES.BASE * 2,
-    zIndex: 3,
-    position: 'absolute',
-    bottom: Platform.OS === 'android' ? theme.SIZES.BASE * 2 : theme.SIZES.BASE * 3,
-  },
-  button: {
-    width: width - theme.SIZES.BASE * 4,
-    height: theme.SIZES.BASE * 3,
-    shadowRadius: 0,
-    shadowOpacity: 0,
-  },
-  pro: {
-    backgroundColor: argonTheme.COLORS.INFO,
-    paddingHorizontal: 8,
-    marginLeft: 3,
-    borderRadius: 4,
-    height: 22,
-    marginTop: 15
-  },
-  gradient: {
-    zIndex: 1,
-    position: 'absolute',
-    bottom: 0,
-    left: 0,
-    right: 0,
-    height: 66,
-  },
-});

mobile-ui/screens/Profile.js

@@ -1,342 +0,0 @@
-import React from "react";
-import {
-  StyleSheet,
-  Dimensions,
-  ScrollView,
-  Image,
-  ImageBackground,
-  Platform
-} from "react-native";
-import { Block, Text, theme } from "galio-framework";
-
-import { Button } from "../components";
-import { Images, argonTheme } from "../constants";
-import { HeaderHeight } from "../constants/utils";
-
-const { width, height } = Dimensions.get("screen");
-
-const thumbMeasure = (width - 48 - 32) / 3;
-
-class Profile extends React.Component {
-  render() {
-    return (
-      <Block flex style={styles.profile}>
-        <Block flex>
-          <ImageBackground
-            source={Images.ProfileBackground}
-            style={styles.profileContainer}
-            imageStyle={styles.profileBackground}
-          >
-            <ScrollView
-              showsVerticalScrollIndicator={false}
-              style={{ width, marginTop: '25%' }}
-            >
-              <Block flex style={styles.profileCard}>
-                <Block middle style={styles.avatarContainer}>
-                  <Image
-                    source={{ uri: Images.ProfilePicture }}
-                    style={styles.avatar}
-                  />
-                </Block>
-                <Block style={styles.info}>
-                  <Block
-                    middle
-                    row
-                    space="evenly"
-                    style={{ marginTop: 20, paddingBottom: 24 }}
-                  >
-                    <Button
-                      small
-                      style={{ backgroundColor: argonTheme.COLORS.INFO }}
-                    >
-                      CONNECT
-                    </Button>
-                    <Button
-                      small
-                      style={{ backgroundColor: argonTheme.COLORS.DEFAULT }}
-                    >
-                      MESSAGE
-                    </Button>
-                  </Block>
-                  <Block row space="between">
-                    <Block middle>
-                      <Text
-                        bold
-                        size={18}
-                        color="#525F7F"
-                        style={{ marginBottom: 4 }}
-                      >
-                        2K
-                      </Text>
-                      <Text size={12} color={argonTheme.COLORS.TEXT}>Orders</Text>
-                    </Block>
-                    <Block middle>
-                      <Text
-                        bold
-                        color="#525F7F"
-                        size={18}
-                        style={{ marginBottom: 4 }}
-                      >
-                        10
-                      </Text>
-                      <Text size={12} color={argonTheme.COLORS.TEXT}>Photos</Text>
-                    </Block>
-                    <Block middle>
-                      <Text
-                        bold
-                        color="#525F7F"
-                        size={18}
-                        style={{ marginBottom: 4 }}
-                      >
-                        89
-                      </Text>
-                      <Text size={12} color={argonTheme.COLORS.TEXT}>Comments</Text>
-                    </Block>
-                  </Block>
-                </Block>
-                <Block flex>
-                  <Block middle style={styles.nameInfo}>
-                    <Text bold size={28} color="#32325D">
-                      Jessica Jones, 27
-                    </Text>
-                    <Text size={16} color="#32325D" style={{ marginTop: 10 }}>
-                      San Francisco, USA
-                    </Text>
-                  </Block>
-                  <Block middle style={{ marginTop: 30, marginBottom: 16 }}>
-                    <Block style={styles.divider} />
-                  </Block>
-                  <Block middle>
-                    <Text
-                      size={16}
-                      color="#525F7F"
-                      style={{ textAlign: "center" }}
-                    >
-                      An artist of considerable range, Jessica name taken by
-                      Melbourne …
-                    </Text>
-                    <Button
-                      color="transparent"
-                      textStyle={{
-                        color: "#233DD2",
-                        fontWeight: "500",
-                        fontSize: 16
-                      }}
-                    >
-                      Show more
-                    </Button>
-                  </Block>
-                  <Block
-                    row
-                    space="between"
-                  >
-                    <Text bold size={16} color="#525F7F" style={{marginTop: 12}}>
-                      Album
-                    </Text>
-                    <Button
-                      small
-                      color="transparent"
-                      textStyle={{ color: "#5E72E4", fontSize: 12, marginLeft: 24 }}
-                    >
-                      View all
-                    </Button>
-                  </Block>
-                  <Block style={{ paddingBottom: -HeaderHeight * 2 }}>
-                    <Block row space="between" style={{ flexWrap: "wrap" }}>
-                      {Images.Viewed.map((img, imgIndex) => (
-                        <Image
-                          source={{ uri: img }}
-                          key={`viewed-${img}`}
-                          resizeMode="cover"
-                          style={styles.thumb}
-                        />
-                      ))}
-                    </Block>
-                  </Block>
-                </Block>
-              </Block>
-            </ScrollView>
-          </ImageBackground>
-        </Block>
-        {/* <ScrollView showsVerticalScrollIndicator={false} 
-                    contentContainerStyle={{ flex: 1, width, height, zIndex: 9000, backgroundColor: 'red' }}>
-        <Block flex style={styles.profileCard}>
-          <Block middle style={styles.avatarContainer}>
-            <Image
-              source={{ uri: Images.ProfilePicture }}
-              style={styles.avatar}
-            />
-          </Block>
-          <Block style={styles.info}>
-            <Block
-              middle
-              row
-              space="evenly"
-              style={{ marginTop: 20, paddingBottom: 24 }}
-            >
-              <Button small style={{ backgroundColor: argonTheme.COLORS.INFO }}>
-                CONNECT
-              </Button>
-              <Button
-                small
-                style={{ backgroundColor: argonTheme.COLORS.DEFAULT }}
-              >
-                MESSAGE
-              </Button>
-            </Block>
-
-            <Block row space="between">
-              <Block middle>
-                <Text
-                  bold
-                  size={12}
-                  color="#525F7F"
-                  style={{ marginBottom: 4 }}
-                >
-                  2K
-                </Text>
-                <Text size={12}>Orders</Text>
-              </Block>
-              <Block middle>
-                <Text bold size={12} style={{ marginBottom: 4 }}>
-                  10
-                </Text>
-                <Text size={12}>Photos</Text>
-              </Block>
-              <Block middle>
-                <Text bold size={12} style={{ marginBottom: 4 }}>
-                  89
-                </Text>
-                <Text size={12}>Comments</Text>
-              </Block>
-            </Block>
-          </Block>
-          <Block flex>
-              <Block middle style={styles.nameInfo}>
-                <Text bold size={28} color="#32325D">
-                  Jessica Jones, 27
-                </Text>
-                <Text size={16} color="#32325D" style={{ marginTop: 10 }}>
-                  San Francisco, USA
-                </Text>
-              </Block>
-              <Block middle style={{ marginTop: 30, marginBottom: 16 }}>
-                <Block style={styles.divider} />
-              </Block>
-              <Block middle>
-                <Text size={16} color="#525F7F" style={{ textAlign: "center" }}>
-                  An artist of considerable range, Jessica name taken by
-                  Melbourne …
-                </Text>
-                <Button
-                  color="transparent"
-                  textStyle={{
-                    color: "#233DD2",
-                    fontWeight: "500",
-                    fontSize: 16
-                  }}
-                >
-                  Show more
-                </Button>
-              </Block>
-              <Block
-                row
-                style={{ paddingVertical: 14, alignItems: "baseline" }}
-              >
-                <Text bold size={16} color="#525F7F">
-                  Album
-                </Text>
-              </Block>
-              <Block
-                row
-                style={{ paddingBottom: 20, justifyContent: "flex-end" }}
-              >
-                <Button
-                  small
-                  color="transparent"
-                  textStyle={{ color: "#5E72E4", fontSize: 12 }}
-                >
-                  View all
-                </Button>
-              </Block>
-              <Block style={{ paddingBottom: -HeaderHeight * 2 }}>
-                <Block row space="between" style={{ flexWrap: "wrap" }}>
-                  {Images.Viewed.map((img, imgIndex) => (
-                    <Image
-                      source={{ uri: img }}
-                      key={`viewed-${img}`}
-                      resizeMode="cover"
-                      style={styles.thumb}
-                    />
-                  ))}
-                </Block>
-              </Block>
-          </Block>
-        </Block>
-                  </ScrollView>*/}
-      </Block>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  profile: {
-    marginTop: Platform.OS === "android" ? -HeaderHeight : 0,
-    // marginBottom: -HeaderHeight * 2,
-    flex: 1
-  },
-  profileContainer: {
-    width: width,
-    height: height,
-    padding: 0,
-    zIndex: 1
-  },
-  profileBackground: {
-    width: width,
-    height: height / 2
-  },
-  profileCard: {
-    // position: "relative",
-    padding: theme.SIZES.BASE,
-    marginHorizontal: theme.SIZES.BASE,
-    marginTop: 65,
-    borderTopLeftRadius: 6,
-    borderTopRightRadius: 6,
-    backgroundColor: theme.COLORS.WHITE,
-    shadowColor: "black",
-    shadowOffset: { width: 0, height: 0 },
-    shadowRadius: 8,
-    shadowOpacity: 0.2,
-    zIndex: 2
-  },
-  info: {
-    paddingHorizontal: 40
-  },
-  avatarContainer: {
-    position: "relative",
-    marginTop: -80
-  },
-  avatar: {
-    width: 124,
-    height: 124,
-    borderRadius: 62,
-    borderWidth: 0
-  },
-  nameInfo: {
-    marginTop: 35
-  },
-  divider: {
-    width: "90%",
-    borderWidth: 1,
-    borderColor: "#E9ECEF"
-  },
-  thumb: {
-    borderRadius: 4,
-    marginVertical: 4,
-    alignSelf: "center",
-    width: thumbMeasure,
-    height: thumbMeasure
-  }
-});
-
-export default Profile;

mobile-ui/screens/Register.js

@@ -1,215 +0,0 @@
-import React from "react";
-import {
-  StyleSheet,
-  ImageBackground,
-  Dimensions,
-  StatusBar,
-  KeyboardAvoidingView
-} from "react-native";
-import { Block, Checkbox, Text, theme } from "galio-framework";
-
-import { Button, Icon, Input } from "../components";
-import { Images, argonTheme } from "../constants";
-
-const { width, height } = Dimensions.get("screen");
-
-class Register extends React.Component {
-  render() {
-    return (
-      <Block flex middle>
-        <StatusBar hidden />
-        <ImageBackground
-          source={Images.RegisterBackground}
-          style={{ width, height, zIndex: 1 }}
-        >
-          <Block safe flex middle>
-            <Block style={styles.registerContainer}>
-              <Block flex={0.25} middle style={styles.socialConnect}>
-                <Text color="#8898AA" size={12}>
-                  Sign up with
-                </Text>
-                <Block row style={{ marginTop: theme.SIZES.BASE }}>
-                  <Button style={{ ...styles.socialButtons, marginRight: 30 }}>
-                    <Block row>
-                      <Icon
-                        name="logo-github"
-                        family="Ionicon"
-                        size={14}
-                        color={"black"}
-                        style={{ marginTop: 2, marginRight: 5 }}
-                      />
-                      <Text style={styles.socialTextButtons}>GITHUB</Text>
-                    </Block>
-                  </Button>
-                  <Button style={styles.socialButtons}>
-                    <Block row>
-                      <Icon
-                        name="logo-google"
-                        family="Ionicon"
-                        size={14}
-                        color={"black"}
-                        style={{ marginTop: 2, marginRight: 5 }}
-                      />
-                      <Text style={styles.socialTextButtons}>GOOGLE</Text>
-                    </Block>
-                  </Button>
-                </Block>
-              </Block>
-              <Block flex>
-                <Block flex={0.17} middle>
-                  <Text color="#8898AA" size={12}>
-                    Or sign up the classic way
-                  </Text>
-                </Block>
-                <Block flex center>
-                  <KeyboardAvoidingView
-                    style={{ flex: 1 }}
-                    behavior="padding"
-                    enabled
-                  >
-                    <Block width={width * 0.8} style={{ marginBottom: 15 }}>
-                      <Input
-                        borderless
-                        placeholder="Name"
-                        iconContent={
-                          <Icon
-                            size={16}
-                            color={argonTheme.COLORS.ICON}
-                            name="hat-3"
-                            family="ArgonExtra"
-                            style={styles.inputIcons}
-                          />
-                        }
-                      />
-                    </Block>
-                    <Block width={width * 0.8} style={{ marginBottom: 15 }}>
-                      <Input
-                        borderless
-                        placeholder="Email"
-                        iconContent={
-                          <Icon
-                            size={16}
-                            color={argonTheme.COLORS.ICON}
-                            name="ic_mail_24px"
-                            family="ArgonExtra"
-                            style={styles.inputIcons}
-                          />
-                        }
-                      />
-                    </Block>
-                    <Block width={width * 0.8}>
-                      <Input
-                        password
-                        borderless
-                        placeholder="Password"
-                        iconContent={
-                          <Icon
-                            size={16}
-                            color={argonTheme.COLORS.ICON}
-                            name="padlock-unlocked"
-                            family="ArgonExtra"
-                            style={styles.inputIcons}
-                          />
-                        }
-                      />
-                      <Block row style={styles.passwordCheck}>
-                        <Text size={12} color={argonTheme.COLORS.MUTED}>
-                          password strength:
-                        </Text>
-                        <Text bold size={12} color={argonTheme.COLORS.SUCCESS}>
-                          {" "}
-                          strong
-                        </Text>
-                      </Block>
-                    </Block>
-                    <Block row width={width * 0.75}>
-                      <Checkbox
-                        checkboxStyle={{
-                          borderWidth: 3
-                        }}
-                        color={argonTheme.COLORS.PRIMARY}
-                        label="I agree with the"
-                      />
-                      <Button
-                        style={{ width: 100 }}
-                        color="transparent"
-                        textStyle={{
-                          color: argonTheme.COLORS.PRIMARY,
-                          fontSize: 14
-                        }}
-                      >
-                        Privacy Policy
-                      </Button>
-                    </Block>
-                    <Block middle>
-                      <Button color="primary" style={styles.createButton}>
-                        <Text bold size={14} color={argonTheme.COLORS.WHITE}>
-                          CREATE ACCOUNT
-                        </Text>
-                      </Button>
-                    </Block>
-                  </KeyboardAvoidingView>
-                </Block>
-              </Block>
-            </Block>
-          </Block>
-        </ImageBackground>
-      </Block>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  registerContainer: {
-    width: width * 0.9,
-    height: height * 0.875,
-    backgroundColor: "#F4F5F7",
-    borderRadius: 4,
-    shadowColor: argonTheme.COLORS.BLACK,
-    shadowOffset: {
-      width: 0,
-      height: 4
-    },
-    shadowRadius: 8,
-    shadowOpacity: 0.1,
-    elevation: 1,
-    overflow: "hidden"
-  },
-  socialConnect: {
-    backgroundColor: argonTheme.COLORS.WHITE,
-    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderColor: "#8898AA"
-  },
-  socialButtons: {
-    width: 120,
-    height: 40,
-    backgroundColor: "#fff",
-    shadowColor: argonTheme.COLORS.BLACK,
-    shadowOffset: {
-      width: 0,
-      height: 4
-    },
-    shadowRadius: 8,
-    shadowOpacity: 0.1,
-    elevation: 1
-  },
-  socialTextButtons: {
-    color: argonTheme.COLORS.PRIMARY,
-    fontWeight: "800",
-    fontSize: 14
-  },
-  inputIcons: {
-    marginRight: 12
-  },
-  passwordCheck: {
-    paddingLeft: 15,
-    paddingTop: 13,
-    paddingBottom: 30
-  },
-  createButton: {
-    width: width * 0.5,
-    marginTop: 25
-  }
-});
-
-export default Register;

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);

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()
@@ -37,3 +39,4 @@ export class User {
 }
 
 export const UserSchema = SchemaFactory.createForClass(User);
+UserSchema.plugin(uniqueValidator);

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

@@ -1,7 +1,8 @@
-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 {
@@ -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();
@@ -91,4 +98,7 @@ export class UsersController {
 
     return this.userService.deleteAdminSystem(user['id']);
   }
+
+  
+
 }

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,42 @@ 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();
   }
@@ -106,4 +144,23 @@ export class UsersService {
   async deleteAdminSystem(id: string) {
     return this.userModel.deleteOne({ _id: id }).exec();
   }
+
+  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;
+          }
+        }
+      });
+    });
+  }
+
 }
+

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

@@ -36,9 +36,10 @@ const AdministradoresSistema = () => {
     phone: '',
     password: '',
     user_type: '1',
-    status: '',
+    status: '1',
   };
 
+
   async function fetchP() {
     let nombres = await fetch(urlFetch, { method: 'GET' });
     let adminRes = await nombres.json();
@@ -47,7 +48,8 @@ const AdministradoresSistema = () => {
   }
   useEffect(() => {
     fetchP();
-  }, []);
+  }, [])
+
 
   function registrarAdmin() {
     var data = {
@@ -57,9 +59,10 @@ 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"
     };
+    setSysAdmin(data)
     // console.log(data);
 
     fetch('http://localhost:4000/user/createAdminSystem/', {
@@ -67,31 +70,30 @@ const AdministradoresSistema = () => {
       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 hideDeleteAdminsSystemsDialog = () => {
-    setDeleteAdminsSystemDialog(false);
-  };
-
   const confirmDeleteAdminSystem = (sysAdmin) => {
     setSysAdmin(sysAdmin);
     setDeleteAdminSystemDialog(true);
@@ -101,6 +103,15 @@ const AdministradoresSistema = () => {
     setDeleteAdminsSystemDialog(true);
   };
 
+  const hideDeleteAdminSystemDialog = () => {
+    setDeleteAdminSystemDialog(false);
+  };
+
+  const hideDeleteAdminsSystemDialog = () => {
+    setDeleteAdminsSystemDialog(false);
+  };
+
+
   const deleteSysAdmin = () => {
     fetch('http://localhost:4000/user/deleteAdminSystem/' + sysadmin._id, {
       cache: 'no-cache',
@@ -206,7 +217,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 +253,7 @@ const AdministradoresSistema = () => {
         label="No"
         icon="pi pi-times"
         className="p-button-text"
-        onClick={hideDeleteAdminsSystemsDialog}
+        onClick={hideDeleteAdminsSystemDialog}
       />
       <Button
         label="Yes"
@@ -432,7 +443,7 @@ const AdministradoresSistema = () => {
             header="Confirmar"
             modal
             footer={deleteAdminsSystemDialogFooter}
-            onHide={hideDeleteAdminsSystemsDialog}
+            onHide={hideDeleteAdminsSystemDialog}
           >
             <div className="flex align-items-center justify-content-center">
               <i

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

@@ -23,7 +23,7 @@ const Communities = () => {
     district: districtId,
     phone: '',
     num_houses: 0,
-    status: 'activo',
+    status: '1',
     date_entry: new Date(),
     houses: [],
   };
@@ -64,17 +64,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 +107,20 @@ const Communities = () => {
     setDistrictsList(await districts);
   }
 
+
+  useEffect(() => {
+    fillProvinces();
+  }, []);
+
+  useEffect(() => {
+    fillCantons();
+  }, [provinciaId]);
+
+  useEffect(() => {
+    fillDistricts();
+  }, [cantonId]);
+
+  
   const handleProvinces = (event) => {
     const getprovinciaId = event.target.value;
     setProvinciaId(getprovinciaId);

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

@@ -1,139 +1,321 @@
-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 { faEllipsis } from '@fortawesome/free-solid-svg-icons';
 
 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);
-  }
-  useEffect(() => {
-    fetchP();
-  }, []);
-
-  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',
+    const [listaGuardas,setListaGuardas]=useState([]);
+    const [urlFetch,setUrlFetch]=useState('http://localhost:4000/user/findGuards/62be68215692582bbfd77134');
+    const [guarda, setGuarda] = useState(emptyGuarda);
+    const [selectedGuardas, setSelectedGuardas] = useState(null);
+    const [globalFilter, setGlobalFilter] = useState(null);
+    const [deleteGuardaDialog, setDeleteGuardaDialog] = useState(false);
+    const [deleteGuardasDialog, setDeleteGuardasDialog] = useState(false);
+    const toast = useRef(null);
+    const dt = useRef(null);
+    let emptyGuarda = {
+        _id: null,
+        dni: '',
+        name: '',
+        last_name: '',
+        email: '',
+        phone: '',
+        password: '',
+        user_type: '1',
+        status: ''
     };
-    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);
 
-    fetch('http://localhost:4000/user/createGuard', {
-      cache: 'no-cache',
-      method: 'POST',
-      mode: 'cors',
-      body: JSON.stringify(data2),
-      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));
-  }
 
-  return (
-    <div className="grid">
-      <div className="col-12">
-        <div className="card">
-          <h5>Guardas de seguridad</h5>
-          <DataTable
-            value={pokemones}
-            scrollable
-            scrollHeight="400px"
-            scrollDirection="both"
-            className="mt-3"
-          >
-            <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>
-          </DataTable>
+
+    async function listaGuardasF(){
+    let nombres=await fetch(urlFetch, {method:'GET'});
+    let listaGuardasRes= await nombres.json();
+    setListaGuardas(listaGuardasRes.message);
+   }
+    useEffect(()=>{
+        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"
+        };
+        var data2={
+            dni: "11979037",
+            name: "Jorge",
+            last_name: "Soto",
+            email: "jorgesoto@gmail.com",
+            phone: 84664515,
+            password: "1203",
+            user_type: "2",
+            status: "4",
+            community_id:"62be68215692582bbfd77134"
+        }
+console.log('ssss');
+         fetch('http://localhost:4000/user/createGuard', {
+            cache: 'no-cache',
+            method: 'POST',
+            mode:'cors',
+            body: JSON.stringify(data2),
+            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) {
+                 console.log('fff');
+                listaGuardasF();
+            }
+        )
+        .catch(
+            err => console.log('Ocurrió un error con el fetch', err)
+        );
+    }
+
+    const hideDeleteGuardaDialog = () => {
+        setDeleteGuardaDialog(false);
+    }
+
+    const hideDeleteGuardasDialog = () => {
+        setDeleteGuardasDialog(false);
+    }
+
+    const confirmDeleteGuarda = (guarda) => {
+        setGuarda(guarda);
+        setDeleteGuardaDialog(true);
+    }
+
+    const confirmDeleteSelected = () => {
+        setDeleteGuardasDialog(true);
+    }
+
+    const deleteGuarda = () => {
+
+        fetch('http://localhost:4000/user/deleteAdminSystem/' + guarda._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 _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'
+                }
+            })
+        })
+        setListaGuardas(_guardas);
+        setDeleteGuardasDialog(false);
+        setSelectedGuardas(null);
+        toast.current.show({ severity: 'success', summary: 'Éxito', detail: 'Administradores del Sistema Eliminados', life: 3000 });
+    }
+
+    const actionsAdmin = (rowData) => {
+        return (
+            <div className="actions">
+                <Button icon="pi pi-trash" className="p-button-rounded p-button-danger mt-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>
-      </div>
-      <div className="col-12">
-        <div className="card">
-          <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" />
+    );
+
+    const deleteAdminSystemDialogFooter = (
+        <>
+            <Button label="No" icon="pi pi-times" className="p-button-text" onClick={hideDeleteGuardasDialog} />
+            <Button label="Yes" icon="pi pi-check" className="p-button-text" onClick={deleteGuarda} />
+        </>
+    );
+
+    const deleteAdminsSystemDialogFooter = (
+        <>
+            <Button label="No" icon="pi pi-times" className="p-button-text" onClick={hideDeleteGuardasDialog} />
+            <Button label="Yes" icon="pi pi-check" className="p-button-text" onClick={deleteSelectedGuardas} />
+        </>
+    );
+
+    const headerName = (
+        <>
+            <p>Nombre</p>
+        </>
+    )
+
+    const headerLastName = (
+        <>
+            <p>Apellidos</p>
+        </>
+    )
+
+    const headerDNI = (
+        <>
+            <p>Identificación</p>
+        </>
+    )
+
+    const headerEmail = (
+        <>
+            <p>Correo Electrónico</p>
+        </>
+    )
+
+    const headerPhone = (
+        <>
+            <p>Teléfono</p>
+        </>
+    )
+
+    const headerOptions = (
+        <>
+            <p>Opciones</p>
+        </>
+    )
+
+    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={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" sortable header={headerPhone} style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }}></Column>
+                        <Column header={headerOptions} style={{ flexGrow: 1, flexBasis: '130px', minWidth: '130px' }} body={actionsAdmin}></Column>
+                    </DataTable>
+                    <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 adminsitradores del sistema seleccionados?</span>}
+                        </div>
+                    </Dialog>
+                </div>
             </div>
-            <div className="field col-12 md:col-6">
-              <label htmlFor="apellidos">Apellidos</label>
-              <InputText id="apellidos" type="text" />
+            <div className="col-12">
+                <div className="card">
+                    <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" />
+                        </div>
+                        <div className="field col-12 md:col-6">
+                            <label htmlFor="apellidos">Apellidos</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" />
+                        </div>
+                        <div className="field col-12 md:col-6">
+                            <label htmlFor="identificacion">Identificación</label>
+                            <InputText id="identificacion" type="text" />
+                        </div>
+                        <div className="field col-12">
+                            <label htmlFor="telefono">Teléfono</label>
+                            <InputText id="telefono" type="number" rows="4" />
+                        </div>
+                        <Button label="Registrar" onClick={registrarGuarda}></Button>
+                    </div>
+                </div>
             </div>
-            <div className="field col-12 md:col-6">
-              <label htmlFor="correo_electronico">Correo electrónico</label>
-              <InputText id="correo_electronico" type="text" />
-            </div>
-            <div className="field col-12 md:col-6">
-              <label htmlFor="identificacion">Identificación</label>
-              <InputText id="identificacion" type="text" />
-            </div>
-            <div className="field col-12">
-              <label htmlFor="telefono">Teléfono</label>
-              <InputText id="telefono" type="number" rows="4" />
-            </div>
-            <Button label="Registrar" onClick={registrarGuarda}></Button>
-          </div>
         </div>
-      </div>
-    </div>
   );
 };
 

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

@@ -20,8 +20,13 @@ const Inquilinos = () => {
   }, []);
   function registrarInquilino() {
     let data = {
+      dni: document.getElementById('identificacion').value,
+      name: document.getElementById('nombre').value,
+      last_name: document.getElementById('apellidos').value,
+      phone: document.getElementById('telefono').value,
       email: document.getElementById('correo_electronico').value,
       community_id: document.getElementById('numero_vivienda').value,
+      password: document.getElementById('password').value,
       user_type: '3',
       status: '1',
     };
@@ -48,7 +53,23 @@ const Inquilinos = () => {
         <div className="card">
           <h5 className="card-header">Registrar Inquilino</h5>
           <div className="p-fluid formgrid grid">
-            <div className="p-field col-12 md:col-6">
+            <div className="field col-12 md:col-6">
+              <label htmlFor="nombre">Nombre</label>
+              <InputText type="text" className="form-control" id="nombre" />
+            </div>
+            <div className="field col-12 md:col-6">
+              <label htmlFor="apellidos">Apellidos</label>
+              <InputText type="text" className="form-control" id="apellidos" />
+            </div>
+            <div className="field col-12 md:col-6">
+              <label htmlFor="identificacion">Identificación</label>
+              <InputText
+                type="text"
+                className="form-control"
+                id="identificacion"
+              />
+            </div>
+            <div className="field col-12 md:col-6">
               <label htmlFor="correo_electronico">Correo electrónico</label>
               <InputText
                 type="email"
@@ -56,7 +77,7 @@ const Inquilinos = () => {
                 id="correo_electronico"
               />
             </div>
-            <div className="p-field col-12 md:col-6">
+            <div className="field col-12 md:col-6">
               <label htmlFor="numero_vivienda">Número de Vivienda</label>
               <Dropdown
                 id="numero_vivienda"
@@ -64,6 +85,14 @@ const Inquilinos = () => {
                 options={communitiesList}
               />
             </div>
+            <div className="field col-12 md:col-6">
+              <label htmlFor="identificacion">Identificación</label>
+              <InputText
+                type="password"
+                className="form-control"
+                id="identificacion"
+              />
+            </div>
             <Button label="Registrar" onClick={registrarInquilino} />
           </div>
         </div>