Initial version

.gitignore

@@ -0,0 +1,4 @@
+node_modules/
+*/node_modules/
+app-shell/
+*/build/

backend/.prettierrc

@@ -0,0 +1,11 @@
+{
+  "singleQuote": true,
+  "tabWidth": 2,
+  "printWidth": 80,
+  "trailingComma": "all",
+  "quoteProps": "as-needed",
+  "jsxSingleQuote": true,
+  "bracketSpacing": true,
+  "bracketSameLine": false,
+  "arrowParens": "always"
+}

backend/.sequelizerc

@@ -0,0 +1,7 @@
+const path = require('path');
+module.exports = {
+  "config": path.resolve("src", "db", "db.config.js"),
+  "models-path": path.resolve("src", "db", "models"),
+  "seeders-path": path.resolve("src", "db", "seeders"),
+  "migrations-path": path.resolve("src", "db", "migrations")
+};

backend/Dockerfile

@@ -0,0 +1,23 @@
+FROM node:20.15.1-alpine
+
+RUN apk update && apk add bash
+# Create app directory
+WORKDIR /usr/src/app
+
+# Install app dependencies
+# A wildcard is used to ensure both package.json AND package-lock.json are copied
+# where available (npm@5+)
+COPY package*.json ./
+
+RUN yarn install
+# If you are building your code for production
+# RUN npm ci --only=production
+
+
+# Bundle app source
+COPY . .
+
+
+EXPOSE 8080
+
+CMD [ "yarn", "start" ]

backend/README.md

@@ -0,0 +1,67 @@
+#https://iphonekarshenas.ir - template backend,
+
+#### Run App on local machine:
+
+##### Install local dependencies:
+
+- `yarn install`
+
+---
+
+##### Adjust local db:
+
+###### 1. Install postgres:
+
+- MacOS:
+
+  - `brew install postgres`
+
+- Ubuntu:
+  - `sudo apt update`
+  - `sudo apt install postgresql postgresql-contrib`
+
+###### 2. Create db and admin user:
+
+- Before run and test connection, make sure you have created a database as described in the above configuration. You can use the `psql` command to create a user and database.
+
+  - `psql postgres --u postgres`
+
+- Next, type this command for creating a new user with password then give access for creating the database.
+
+  - `postgres-# CREATE ROLE admin WITH LOGIN PASSWORD 'admin_pass';`
+  - `postgres-# ALTER ROLE admin CREATEDB;`
+
+- Quit `psql` then log in again using the new user that previously created.
+
+  - `postgres-# \q`
+  - `psql postgres -U admin`
+
+- Type this command to creating a new database.
+
+  - `postgres=> CREATE DATABASE db_https___iphonekarshenas_ir;`
+
+- Then give that new user privileges to the new database then quit the `psql`.
+  - `postgres=> GRANT ALL PRIVILEGES ON DATABASE db_https___iphonekarshenas_ir TO admin;`
+  - `postgres=> \q`
+
+---
+
+#### Api Documentation (Swagger)
+
+http://localhost:8080/api-docs (local host)
+
+http://host_name/api-docs
+
+---
+
+##### Setup database tables or update after schema change
+
+- `yarn db:migrate`
+
+##### Seed the initial data (admin accounts, relevant for the first setup):
+
+- `yarn db:seed`
+
+##### Start build:
+
+- `yarn start`

backend/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "httpsiphonekarshenasir",
+  "description": "https://iphonekarshenas.ir - template backend",
+  "scripts": {
+    "start": "npm run db:migrate && npm run db:seed && nodemon ./src/index.js",
+    "db:migrate": "sequelize-cli db:migrate",
+    "db:seed": "sequelize-cli db:seed:all",
+    "db:drop": "sequelize-cli db:drop",
+    "db:create": "sequelize-cli db:create"
+  },
+  "dependencies": {
+    "@google-cloud/storage": "^5.18.2",
+    "axios": "^1.6.7",
+    "bcrypt": "5.1.1",
+    "cors": "2.8.5",
+    "csv-parser": "^3.0.0",
+    "express": "4.18.2",
+    "formidable": "1.2.2",
+    "helmet": "4.1.1",
+    "json2csv": "^5.0.7",
+    "jsonwebtoken": "8.5.1",
+    "lodash": "4.17.21",
+    "moment": "2.30.1",
+    "multer": "^1.4.4",
+    "mysql2": "2.2.5",
+    "nodemailer": "6.9.9",
+    "passport": "^0.7.0",
+    "passport-google-oauth2": "^0.2.0",
+    "passport-jwt": "^4.0.1",
+    "passport-microsoft": "^0.1.0",
+    "pg": "8.4.1",
+    "pg-hstore": "2.3.4",
+    "sequelize": "6.35.2",
+    "sequelize-json-schema": "^2.1.1",
+    "sqlite": "4.0.15",
+    "swagger-jsdoc": "^6.2.8",
+    "swagger-ui-express": "^5.0.0",
+    "tedious": "^18.2.4"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "private": true,
+  "devDependencies": {
+    "cross-env": "7.0.3",
+    "mocha": "8.1.3",
+    "node-mocks-http": "1.9.0",
+    "nodemon": "2.0.5",
+    "sequelize-cli": "6.6.2"
+  }
+}

backend/src/auth/auth.js

@@ -0,0 +1,79 @@
+const config = require('../config');
+const providers = config.providers;
+const helpers = require('../helpers');
+const db = require('../db/models');
+
+const passport = require('passport');
+const JWTstrategy = require('passport-jwt').Strategy;
+const ExtractJWT = require('passport-jwt').ExtractJwt;
+const GoogleStrategy = require('passport-google-oauth2').Strategy;
+const MicrosoftStrategy = require('passport-microsoft').Strategy;
+const UsersDBApi = require('../db/api/users');
+
+passport.use(
+  new JWTstrategy(
+    {
+      passReqToCallback: true,
+      secretOrKey: config.secret_key,
+      jwtFromRequest: ExtractJWT.fromAuthHeaderAsBearerToken(),
+    },
+    async (req, token, done) => {
+      try {
+        const user = await UsersDBApi.findBy({ email: token.user.email });
+
+        if (user && user.disabled) {
+          return done(new Error(`User '${user.email}' is disabled`));
+        }
+
+        req.currentUser = user;
+
+        return done(null, user);
+      } catch (error) {
+        done(error);
+      }
+    },
+  ),
+);
+
+passport.use(
+  new GoogleStrategy(
+    {
+      clientID: config.google.clientId,
+      clientSecret: config.google.clientSecret,
+      callbackURL: config.apiUrl + '/auth/signin/google/callback',
+      passReqToCallback: true,
+    },
+    function (request, accessToken, refreshToken, profile, done) {
+      socialStrategy(profile.email, profile, providers.GOOGLE, done);
+    },
+  ),
+);
+
+passport.use(
+  new MicrosoftStrategy(
+    {
+      clientID: config.microsoft.clientId,
+      clientSecret: config.microsoft.clientSecret,
+      callbackURL: config.apiUrl + '/auth/signin/microsoft/callback',
+      passReqToCallback: true,
+    },
+    function (request, accessToken, refreshToken, profile, done) {
+      const email = profile._json.mail || profile._json.userPrincipalName;
+      socialStrategy(email, profile, providers.MICROSOFT, done);
+    },
+  ),
+);
+
+function socialStrategy(email, profile, provider, done) {
+  db.users
+    .findOrCreate({ where: { email, provider } })
+    .then(([user, created]) => {
+      const body = {
+        id: user.id,
+        email: user.email,
+        name: profile.displayName,
+      };
+      const token = helpers.jwtSign({ user: body });
+      return done(null, { token });
+    });
+}

backend/src/config.js

@@ -0,0 +1,71 @@
+const os = require('os');
+
+const config = {
+  gcloud: {
+    bucket: 'fldemo-files',
+    hash: '0cfb81fd2794ad4a4cfc6375884e505a',
+  },
+  bcrypt: {
+    saltRounds: 12,
+  },
+  admin_pass: 'password',
+  admin_email: 'admin@flatlogic.com',
+  providers: {
+    LOCAL: 'local',
+    GOOGLE: 'google',
+    MICROSOFT: 'microsoft',
+  },
+  secret_key: 'HUEyqESqgQ1yTwzVlO6wprC9Kf1J1xuA',
+  remote: '',
+  port: process.env.NODE_ENV === 'production' ? '' : '8080',
+  hostUI: process.env.NODE_ENV === 'production' ? '' : 'http://localhost',
+  portUI: process.env.NODE_ENV === 'production' ? '' : '3000',
+
+  portUIProd: process.env.NODE_ENV === 'production' ? '' : ':3000',
+
+  swaggerUI: process.env.NODE_ENV === 'production' ? '' : 'http://localhost',
+  swaggerPort: process.env.NODE_ENV === 'production' ? '' : ':8080',
+  google: {
+    clientId:
+      '671001533244-kf1k1gmp6mnl0r030qmvdu6v36ghmim6.apps.googleusercontent.com',
+    clientSecret: 'Yo4qbKZniqvojzUQ60iKlxqR',
+  },
+  microsoft: {
+    clientId: '4696f457-31af-40de-897c-e00d7d4cff73',
+    clientSecret: 'm8jzZ.5UpHF3=-dXzyxiZ4e[F8OF54@p',
+  },
+  uploadDir: os.tmpdir(),
+  email: {
+    from: 'https://iphonekarshenas.ir <app@flatlogic.app>',
+    host: 'email-smtp.us-east-1.amazonaws.com',
+    port: 587,
+    auth: {
+      user: 'AKIAVEW7G4PQUBGM52OF',
+      pass: process.env.EMAIL_PASS,
+    },
+    tls: {
+      rejectUnauthorized: false,
+    },
+  },
+  roles: {
+    admin: 'Administrator',
+    user: 'User',
+  },
+
+  project_uuid: '2639963c-1162-494b-bfcc-09408f16d055',
+  flHost:
+    process.env.NODE_ENV === 'production' ||
+    process.env.NODE_ENV === 'dev_stage'
+      ? 'https://flatlogic.com/projects'
+      : 'http://localhost:3000/projects',
+};
+config.pexelsKey = 'Vc99rnmOhHhJAbgGQoKLZtsaIVfkeownoQNbTj78VemUjKh08ZYRbf18';
+config.pexelsQuery = 'nature';
+config.host =
+  process.env.NODE_ENV === 'production' ? config.remote : 'http://localhost';
+config.apiUrl = `${config.host}${config.port ? `:${config.port}` : ``}/api`;
+config.swaggerUrl = `${config.swaggerUI}${config.swaggerPort}`;
+config.uiUrl = `${config.hostUI}${config.portUI ? `:${config.portUI}` : ``}/#`;
+config.backUrl = `${config.hostUI}${config.portUI ? `:${config.portUI}` : ``}`;
+
+module.exports = config;

backend/src/db/api/file.js

@@ -0,0 +1,73 @@
+const db = require('../models');
+const assert = require('assert');
+const services = require('../../services/file');
+
+module.exports = class FileDBApi {
+  static async replaceRelationFiles(relation, rawFiles, options) {
+    assert(relation.belongsTo, 'belongsTo is required');
+    assert(relation.belongsToColumn, 'belongsToColumn is required');
+    assert(relation.belongsToId, 'belongsToId is required');
+
+    let files = [];
+
+    if (Array.isArray(rawFiles)) {
+      files = rawFiles;
+    } else {
+      files = rawFiles ? [rawFiles] : [];
+    }
+
+    await this._removeLegacyFiles(relation, files, options);
+    await this._addFiles(relation, files, options);
+  }
+
+  static async _addFiles(relation, files, options) {
+    const transaction = (options && options.transaction) || undefined;
+    const currentUser = (options && options.currentUser) || { id: null };
+
+    const inexistentFiles = files.filter((file) => !!file.new);
+
+    for (const file of inexistentFiles) {
+      await db.file.create(
+        {
+          belongsTo: relation.belongsTo,
+          belongsToColumn: relation.belongsToColumn,
+          belongsToId: relation.belongsToId,
+          name: file.name,
+          sizeInBytes: file.sizeInBytes,
+          privateUrl: file.privateUrl,
+          publicUrl: file.publicUrl,
+          createdById: currentUser.id,
+          updatedById: currentUser.id,
+        },
+        {
+          transaction,
+        },
+      );
+    }
+  }
+
+  static async _removeLegacyFiles(relation, files, options) {
+    const transaction = (options && options.transaction) || undefined;
+
+    const filesToDelete = await db.file.findAll({
+      where: {
+        belongsTo: relation.belongsTo,
+        belongsToId: relation.belongsToId,
+        belongsToColumn: relation.belongsToColumn,
+        id: {
+          [db.Sequelize.Op.notIn]: files
+            .filter((file) => !file.new)
+            .map((file) => file.id),
+        },
+      },
+      transaction,
+    });
+
+    for (let file of filesToDelete) {
+      await services.deleteGCloud(file.privateUrl);
+      await file.destroy({
+        transaction,
+      });
+    }
+  }
+};

backend/src/db/api/users.js

@@ -0,0 +1,646 @@
+const db = require('../models');
+const FileDBApi = require('./file');
+const crypto = require('crypto');
+const Utils = require('../utils');
+
+const bcrypt = require('bcrypt');
+const config = require('../../config');
+
+const Sequelize = db.Sequelize;
+const Op = Sequelize.Op;
+
+module.exports = class UsersDBApi {
+  static async create(data, options) {
+    const currentUser = (options && options.currentUser) || { id: null };
+    const transaction = (options && options.transaction) || undefined;
+
+    const users = await db.users.create(
+      {
+        id: data.data.id || undefined,
+
+        firstName: data.data.firstName || null,
+        lastName: data.data.lastName || null,
+        phoneNumber: data.data.phoneNumber || null,
+        email: data.data.email || null,
+        role: data.data.role || 'user',
+
+        disabled: data.data.disabled || false,
+
+        password: data.data.password || null,
+        emailVerified: data.data.emailVerified || true,
+
+        emailVerificationToken: data.data.emailVerificationToken || null,
+        emailVerificationTokenExpiresAt:
+          data.data.emailVerificationTokenExpiresAt || null,
+        passwordResetToken: data.data.passwordResetToken || null,
+        passwordResetTokenExpiresAt:
+          data.data.passwordResetTokenExpiresAt || null,
+        provider: data.data.provider || null,
+        importHash: data.data.importHash || null,
+        createdById: currentUser.id,
+        updatedById: currentUser.id,
+      },
+      { transaction },
+    );
+
+    await FileDBApi.replaceRelationFiles(
+      {
+        belongsTo: db.users.getTableName(),
+        belongsToColumn: 'avatar',
+        belongsToId: users.id,
+      },
+      data.data.avatar,
+      options,
+    );
+
+    return users;
+  }
+
+  static async bulkImport(data, options) {
+    const currentUser = (options && options.currentUser) || { id: null };
+    const transaction = (options && options.transaction) || undefined;
+
+    // Prepare data - wrapping individual data transformations in a map() method
+    const usersData = data.map((item, index) => ({
+      id: item.id || undefined,
+
+      firstName: item.firstName || null,
+      lastName: item.lastName || null,
+      phoneNumber: item.phoneNumber || null,
+      email: item.email || null,
+      role: item.role || 'user',
+
+      disabled: item.disabled || false,
+
+      password: item.password || null,
+      emailVerified: item.emailVerified || false,
+
+      emailVerificationToken: item.emailVerificationToken || null,
+      emailVerificationTokenExpiresAt:
+        item.emailVerificationTokenExpiresAt || null,
+      passwordResetToken: item.passwordResetToken || null,
+      passwordResetTokenExpiresAt: item.passwordResetTokenExpiresAt || null,
+      provider: item.provider || null,
+      importHash: item.importHash || null,
+      createdById: currentUser.id,
+      updatedById: currentUser.id,
+      createdAt: new Date(Date.now() + index * 1000),
+    }));
+
+    // Bulk create items
+    const users = await db.users.bulkCreate(usersData, { transaction });
+
+    // For each item created, replace relation files
+
+    for (let i = 0; i < users.length; i++) {
+      await FileDBApi.replaceRelationFiles(
+        {
+          belongsTo: db.users.getTableName(),
+          belongsToColumn: 'avatar',
+          belongsToId: users[i].id,
+        },
+        data[i].avatar,
+        options,
+      );
+    }
+
+    return users;
+  }
+
+  static async update(id, data, options) {
+    const currentUser = (options && options.currentUser) || { id: null };
+    const transaction = (options && options.transaction) || undefined;
+
+    const users = await db.users.findByPk(id, {}, { transaction });
+
+    if (!data?.app_role) {
+      data.app_role = users?.app_role?.id;
+    }
+    if (!data?.custom_permissions) {
+      data.custom_permissions = users?.custom_permissions?.map(
+        (item) => item.id,
+      );
+    }
+
+    if (data.password) {
+      data.password = bcrypt.hashSync(data.password, config.bcrypt.saltRounds);
+    } else {
+      data.password = users.password;
+    }
+
+    const updatePayload = {};
+
+    if (data.firstName !== undefined) updatePayload.firstName = data.firstName;
+
+    if (data.lastName !== undefined) updatePayload.lastName = data.lastName;
+
+    if (data.phoneNumber !== undefined)
+      updatePayload.phoneNumber = data.phoneNumber;
+
+    if (data.email !== undefined) updatePayload.email = data.email;
+
+    if (data.role !== undefined) updatePayload.role = data.role;
+    else updatePayload.role = 'user';
+
+    if (data.disabled !== undefined) updatePayload.disabled = data.disabled;
+
+    if (data.password !== undefined) updatePayload.password = data.password;
+
+    if (data.emailVerified !== undefined)
+      updatePayload.emailVerified = data.emailVerified;
+    else updatePayload.emailVerified = true;
+
+    if (data.emailVerificationToken !== undefined)
+      updatePayload.emailVerificationToken = data.emailVerificationToken;
+
+    if (data.emailVerificationTokenExpiresAt !== undefined)
+      updatePayload.emailVerificationTokenExpiresAt =
+        data.emailVerificationTokenExpiresAt;
+
+    if (data.passwordResetToken !== undefined)
+      updatePayload.passwordResetToken = data.passwordResetToken;
+
+    if (data.passwordResetTokenExpiresAt !== undefined)
+      updatePayload.passwordResetTokenExpiresAt =
+        data.passwordResetTokenExpiresAt;
+
+    if (data.provider !== undefined) updatePayload.provider = data.provider;
+
+    updatePayload.updatedById = currentUser.id;
+
+    await users.update(updatePayload, { transaction });
+
+    await FileDBApi.replaceRelationFiles(
+      {
+        belongsTo: db.users.getTableName(),
+        belongsToColumn: 'avatar',
+        belongsToId: users.id,
+      },
+      data.avatar,
+      options,
+    );
+
+    return users;
+  }
+
+  static async deleteByIds(ids, options) {
+    const currentUser = (options && options.currentUser) || { id: null };
+    const transaction = (options && options.transaction) || undefined;
+
+    const users = await db.users.findAll({
+      where: {
+        id: {
+          [Op.in]: ids,
+        },
+      },
+      transaction,
+    });
+
+    await db.sequelize.transaction(async (transaction) => {
+      for (const record of users) {
+        await record.update({ deletedBy: currentUser.id }, { transaction });
+      }
+      for (const record of users) {
+        await record.destroy({ transaction });
+      }
+    });
+
+    return users;
+  }
+
+  static async remove(id, options) {
+    const currentUser = (options && options.currentUser) || { id: null };
+    const transaction = (options && options.transaction) || undefined;
+
+    const users = await db.users.findByPk(id, options);
+
+    await users.update(
+      {
+        deletedBy: currentUser.id,
+      },
+      {
+        transaction,
+      },
+    );
+
+    await users.destroy({
+      transaction,
+    });
+
+    return users;
+  }
+
+  static async findBy(where, options) {
+    const transaction = (options && options.transaction) || undefined;
+
+    const users = await db.users.findOne({ where }, { transaction });
+
+    if (!users) {
+      return users;
+    }
+
+    const output = users.get({ plain: true });
+
+    output.avatar = await users.getAvatar({
+      transaction,
+    });
+
+    return output;
+  }
+
+  static async findAll(filter, options) {
+    const limit = filter.limit || 0;
+    let offset = 0;
+    let where = {};
+    const currentPage = +filter.page;
+
+    offset = currentPage * limit;
+
+    const orderBy = null;
+
+    const transaction = (options && options.transaction) || undefined;
+
+    let include = [
+      {
+        model: db.file,
+        as: 'avatar',
+      },
+    ];
+
+    if (filter) {
+      if (filter.id) {
+        where = {
+          ...where,
+          ['id']: Utils.uuid(filter.id),
+        };
+      }
+
+      if (filter.firstName) {
+        where = {
+          ...where,
+          [Op.and]: Utils.ilike('users', 'firstName', filter.firstName),
+        };
+      }
+
+      if (filter.lastName) {
+        where = {
+          ...where,
+          [Op.and]: Utils.ilike('users', 'lastName', filter.lastName),
+        };
+      }
+
+      if (filter.phoneNumber) {
+        where = {
+          ...where,
+          [Op.and]: Utils.ilike('users', 'phoneNumber', filter.phoneNumber),
+        };
+      }
+
+      if (filter.email) {
+        where = {
+          ...where,
+          [Op.and]: Utils.ilike('users', 'email', filter.email),
+        };
+      }
+
+      if (filter.password) {
+        where = {
+          ...where,
+          [Op.and]: Utils.ilike('users', 'password', filter.password),
+        };
+      }
+
+      if (filter.emailVerificationToken) {
+        where = {
+          ...where,
+          [Op.and]: Utils.ilike(
+            'users',
+            'emailVerificationToken',
+            filter.emailVerificationToken,
+          ),
+        };
+      }
+
+      if (filter.passwordResetToken) {
+        where = {
+          ...where,
+          [Op.and]: Utils.ilike(
+            'users',
+            'passwordResetToken',
+            filter.passwordResetToken,
+          ),
+        };
+      }
+
+      if (filter.provider) {
+        where = {
+          ...where,
+          [Op.and]: Utils.ilike('users', 'provider', filter.provider),
+        };
+      }
+
+      if (filter.emailVerificationTokenExpiresAtRange) {
+        const [start, end] = filter.emailVerificationTokenExpiresAtRange;
+
+        if (start !== undefined && start !== null && start !== '') {
+          where = {
+            ...where,
+            emailVerificationTokenExpiresAt: {
+              ...where.emailVerificationTokenExpiresAt,
+              [Op.gte]: start,
+            },
+          };
+        }
+
+        if (end !== undefined && end !== null && end !== '') {
+          where = {
+            ...where,
+            emailVerificationTokenExpiresAt: {
+              ...where.emailVerificationTokenExpiresAt,
+              [Op.lte]: end,
+            },
+          };
+        }
+      }
+
+      if (filter.passwordResetTokenExpiresAtRange) {
+        const [start, end] = filter.passwordResetTokenExpiresAtRange;
+
+        if (start !== undefined && start !== null && start !== '') {
+          where = {
+            ...where,
+            passwordResetTokenExpiresAt: {
+              ...where.passwordResetTokenExpiresAt,
+              [Op.gte]: start,
+            },
+          };
+        }
+
+        if (end !== undefined && end !== null && end !== '') {
+          where = {
+            ...where,
+            passwordResetTokenExpiresAt: {
+              ...where.passwordResetTokenExpiresAt,
+              [Op.lte]: end,
+            },
+          };
+        }
+      }
+
+      if (filter.active !== undefined) {
+        where = {
+          ...where,
+          active: filter.active === true || filter.active === 'true',
+        };
+      }
+
+      if (filter.role) {
+        where = {
+          ...where,
+          role: filter.role,
+        };
+      }
+
+      if (filter.disabled) {
+        where = {
+          ...where,
+          disabled: filter.disabled,
+        };
+      }
+
+      if (filter.emailVerified) {
+        where = {
+          ...where,
+          emailVerified: filter.emailVerified,
+        };
+      }
+
+      if (filter.createdAtRange) {
+        const [start, end] = filter.createdAtRange;
+
+        if (start !== undefined && start !== null && start !== '') {
+          where = {
+            ...where,
+            ['createdAt']: {
+              ...where.createdAt,
+              [Op.gte]: start,
+            },
+          };
+        }
+
+        if (end !== undefined && end !== null && end !== '') {
+          where = {
+            ...where,
+            ['createdAt']: {
+              ...where.createdAt,
+              [Op.lte]: end,
+            },
+          };
+        }
+      }
+    }
+
+    const queryOptions = {
+      where,
+      include,
+      distinct: true,
+      order:
+        filter.field && filter.sort
+          ? [[filter.field, filter.sort]]
+          : [['createdAt', 'desc']],
+      transaction: options?.transaction,
+      logging: console.log,
+    };
+
+    if (!options?.countOnly) {
+      queryOptions.limit = limit ? Number(limit) : undefined;
+      queryOptions.offset = offset ? Number(offset) : undefined;
+    }
+
+    try {
+      const { rows, count } = await db.users.findAndCountAll(queryOptions);
+
+      return {
+        rows: options?.countOnly ? [] : rows,
+        count: count,
+      };
+    } catch (error) {
+      console.error('Error executing query:', error);
+      throw error;
+    }
+  }
+
+  static async findAllAutocomplete(query, limit, offset) {
+    let where = {};
+
+    if (query) {
+      where = {
+        [Op.or]: [
+          { ['id']: Utils.uuid(query) },
+          Utils.ilike('users', 'firstName', query),
+        ],
+      };
+    }
+
+    const records = await db.users.findAll({
+      attributes: ['id', 'firstName'],
+      where,
+      limit: limit ? Number(limit) : undefined,
+      offset: offset ? Number(offset) : undefined,
+      orderBy: [['firstName', 'ASC']],
+    });
+
+    return records.map((record) => ({
+      id: record.id,
+      label: record.firstName,
+    }));
+  }
+
+  static async createFromAuth(data, options) {
+    const transaction = (options && options.transaction) || undefined;
+    const users = await db.users.create(
+      {
+        email: data.email,
+        firstName: data.firstName,
+        authenticationUid: data.authenticationUid,
+        password: data.password,
+      },
+      { transaction },
+    );
+
+    const app_role = await db.roles.findOne({
+      where: { name: 'User' },
+    });
+    if (app_role?.id) {
+      await users.setApp_role(app_role?.id || null, {
+        transaction,
+      });
+    }
+
+    await users.update(
+      {
+        authenticationUid: users.id,
+      },
+      { transaction },
+    );
+
+    delete users.password;
+    return users;
+  }
+
+  static async updatePassword(id, password, options) {
+    const currentUser = (options && options.currentUser) || { id: null };
+
+    const transaction = (options && options.transaction) || undefined;
+
+    const users = await db.users.findByPk(id, {
+      transaction,
+    });
+
+    await users.update(
+      {
+        password,
+        authenticationUid: id,
+        updatedById: currentUser.id,
+      },
+      { transaction },
+    );
+
+    return users;
+  }
+
+  static async generateEmailVerificationToken(email, options) {
+    return this._generateToken(
+      ['emailVerificationToken', 'emailVerificationTokenExpiresAt'],
+      email,
+      options,
+    );
+  }
+
+  static async generatePasswordResetToken(email, options) {
+    return this._generateToken(
+      ['passwordResetToken', 'passwordResetTokenExpiresAt'],
+      email,
+      options,
+    );
+  }
+
+  static async findByPasswordResetToken(token, options) {
+    const transaction = (options && options.transaction) || undefined;
+
+    return db.users.findOne(
+      {
+        where: {
+          passwordResetToken: token,
+          passwordResetTokenExpiresAt: {
+            [db.Sequelize.Op.gt]: Date.now(),
+          },
+        },
+      },
+      { transaction },
+    );
+  }
+
+  static async findByEmailVerificationToken(token, options) {
+    const transaction = (options && options.transaction) || undefined;
+    return db.users.findOne(
+      {
+        where: {
+          emailVerificationToken: token,
+          emailVerificationTokenExpiresAt: {
+            [db.Sequelize.Op.gt]: Date.now(),
+          },
+        },
+      },
+      { transaction },
+    );
+  }
+
+  static async markEmailVerified(id, options) {
+    const currentUser = (options && options.currentUser) || { id: null };
+    const transaction = (options && options.transaction) || undefined;
+
+    const users = await db.users.findByPk(id, {
+      transaction,
+    });
+
+    await users.update(
+      {
+        emailVerified: true,
+        updatedById: currentUser.id,
+      },
+      { transaction },
+    );
+
+    return true;
+  }
+
+  static async _generateToken(keyNames, email, options) {
+    const currentUser = (options && options.currentUser) || { id: null };
+    const transaction = (options && options.transaction) || undefined;
+    const users = await db.users.findOne(
+      {
+        where: { email: email.toLowerCase() },
+      },
+      {
+        transaction,
+      },
+    );
+
+    const token = crypto.randomBytes(20).toString('hex');
+    const tokenExpiresAt = Date.now() + 360000;
+
+    if (users) {
+      await users.update(
+        {
+          [keyNames[0]]: token,
+          [keyNames[1]]: tokenExpiresAt,
+          updatedById: currentUser.id,
+        },
+        { transaction },
+      );
+    }
+
+    return token;
+  }
+};

backend/src/db/db.config.js

@@ -0,0 +1,31 @@
+module.exports = {
+  production: {
+    dialect: 'postgres',
+    username: process.env.DB_USER,
+    password: process.env.DB_PASS,
+    database: process.env.DB_NAME,
+    host: process.env.DB_HOST,
+    port: process.env.DB_PORT,
+    logging: console.log,
+    seederStorage: 'sequelize',
+  },
+  development: {
+    username: 'postgres',
+    dialect: 'postgres',
+    password: '',
+    database: 'db_https___iphonekarshenas_ir',
+    host: process.env.DB_HOST || 'localhost',
+    logging: console.log,
+    seederStorage: 'sequelize',
+  },
+  dev_stage: {
+    dialect: 'postgres',
+    username: process.env.DB_USER,
+    password: process.env.DB_PASS,
+    database: process.env.DB_NAME,
+    host: process.env.DB_HOST,
+    port: process.env.DB_PORT,
+    logging: console.log,
+    seederStorage: 'sequelize',
+  },
+};

backend/src/db/migrations/1649669713491.js

@@ -0,0 +1,239 @@
+module.exports = {
+  /**
+   * @param {QueryInterface} queryInterface
+   * @param {Sequelize} Sequelize
+   * @returns {Promise<void>}
+   */
+  async up(queryInterface, Sequelize) {
+    /**
+     * @type {Transaction}
+     */
+    const transaction = await queryInterface.sequelize.transaction();
+    try {
+      await queryInterface.createTable(
+        'users',
+        {
+          id: {
+            type: Sequelize.DataTypes.UUID,
+            defaultValue: Sequelize.DataTypes.UUIDV4,
+            primaryKey: true,
+          },
+          createdById: {
+            type: Sequelize.DataTypes.UUID,
+            references: {
+              key: 'id',
+              model: 'users',
+            },
+          },
+          updatedById: {
+            type: Sequelize.DataTypes.UUID,
+            references: {
+              key: 'id',
+              model: 'users',
+            },
+          },
+          createdAt: { type: Sequelize.DataTypes.DATE },
+          updatedAt: { type: Sequelize.DataTypes.DATE },
+          deletedAt: { type: Sequelize.DataTypes.DATE },
+          importHash: {
+            type: Sequelize.DataTypes.STRING(255),
+            allowNull: true,
+            unique: true,
+          },
+        },
+        { transaction },
+      );
+
+      await queryInterface.addColumn(
+        'users',
+        'firstName',
+        {
+          type: Sequelize.DataTypes.TEXT,
+        },
+        { transaction },
+      );
+
+      await queryInterface.addColumn(
+        'users',
+        'lastName',
+        {
+          type: Sequelize.DataTypes.TEXT,
+        },
+        { transaction },
+      );
+
+      await queryInterface.addColumn(
+        'users',
+        'phoneNumber',
+        {
+          type: Sequelize.DataTypes.TEXT,
+        },
+        { transaction },
+      );
+
+      await queryInterface.addColumn(
+        'users',
+        'email',
+        {
+          type: Sequelize.DataTypes.TEXT,
+        },
+        { transaction },
+      );
+
+      await queryInterface.addColumn(
+        'users',
+        'role',
+        {
+          type: Sequelize.DataTypes.ENUM,
+
+          values: ['admin', 'user'],
+        },
+        { transaction },
+      );
+
+      await queryInterface.addColumn(
+        'users',
+        'disabled',
+        {
+          type: Sequelize.DataTypes.BOOLEAN,
+
+          defaultValue: false,
+          allowNull: false,
+        },
+        { transaction },
+      );
+
+      await queryInterface.addColumn(
+        'users',
+        'password',
+        {
+          type: Sequelize.DataTypes.TEXT,
+        },
+        { transaction },
+      );
+
+      await queryInterface.addColumn(
+        'users',
+        'emailVerified',
+        {
+          type: Sequelize.DataTypes.BOOLEAN,
+
+          defaultValue: false,
+          allowNull: false,
+        },
+        { transaction },
+      );
+
+      await queryInterface.addColumn(
+        'users',
+        'emailVerificationToken',
+        {
+          type: Sequelize.DataTypes.TEXT,
+        },
+        { transaction },
+      );
+
+      await queryInterface.addColumn(
+        'users',
+        'emailVerificationTokenExpiresAt',
+        {
+          type: Sequelize.DataTypes.DATE,
+        },
+        { transaction },
+      );
+
+      await queryInterface.addColumn(
+        'users',
+        'passwordResetToken',
+        {
+          type: Sequelize.DataTypes.TEXT,
+        },
+        { transaction },
+      );
+
+      await queryInterface.addColumn(
+        'users',
+        'passwordResetTokenExpiresAt',
+        {
+          type: Sequelize.DataTypes.DATE,
+        },
+        { transaction },
+      );
+
+      await queryInterface.addColumn(
+        'users',
+        'provider',
+        {
+          type: Sequelize.DataTypes.TEXT,
+        },
+        { transaction },
+      );
+
+      await transaction.commit();
+    } catch (err) {
+      await transaction.rollback();
+      throw err;
+    }
+  },
+  /**
+   * @param {QueryInterface} queryInterface
+   * @param {Sequelize} Sequelize
+   * @returns {Promise<void>}
+   */
+  async down(queryInterface, Sequelize) {
+    /**
+     * @type {Transaction}
+     */
+    const transaction = await queryInterface.sequelize.transaction();
+    try {
+      await queryInterface.removeColumn('users', 'provider', { transaction });
+
+      await queryInterface.removeColumn(
+        'users',
+        'passwordResetTokenExpiresAt',
+        { transaction },
+      );
+
+      await queryInterface.removeColumn('users', 'passwordResetToken', {
+        transaction,
+      });
+
+      await queryInterface.removeColumn(
+        'users',
+        'emailVerificationTokenExpiresAt',
+        { transaction },
+      );
+
+      await queryInterface.removeColumn('users', 'emailVerificationToken', {
+        transaction,
+      });
+
+      await queryInterface.removeColumn('users', 'emailVerified', {
+        transaction,
+      });
+
+      await queryInterface.removeColumn('users', 'password', { transaction });
+
+      await queryInterface.removeColumn('users', 'disabled', { transaction });
+
+      await queryInterface.removeColumn('users', 'role', { transaction });
+
+      await queryInterface.removeColumn('users', 'email', { transaction });
+
+      await queryInterface.removeColumn('users', 'phoneNumber', {
+        transaction,
+      });
+
+      await queryInterface.removeColumn('users', 'lastName', { transaction });
+
+      await queryInterface.removeColumn('users', 'firstName', { transaction });
+
+      await queryInterface.dropTable('users', { transaction });
+
+      await transaction.commit();
+    } catch (err) {
+      await transaction.rollback();
+      throw err;
+    }
+  },
+};

backend/src/db/models/file.js

@@ -0,0 +1,53 @@
+module.exports = function (sequelize, DataTypes) {
+  const file = sequelize.define(
+    'file',
+    {
+      id: {
+        type: DataTypes.UUID,
+        defaultValue: DataTypes.UUIDV4,
+        primaryKey: true,
+      },
+      belongsTo: DataTypes.STRING(255),
+      belongsToId: DataTypes.UUID,
+      belongsToColumn: DataTypes.STRING(255),
+      name: {
+        type: DataTypes.STRING(2083),
+        allowNull: false,
+        validate: {
+          notEmpty: true,
+        },
+      },
+      sizeInBytes: {
+        type: DataTypes.INTEGER,
+        allowNull: true,
+      },
+      privateUrl: {
+        type: DataTypes.STRING(2083),
+        allowNull: true,
+      },
+      publicUrl: {
+        type: DataTypes.STRING(2083),
+        allowNull: false,
+        validate: {
+          notEmpty: true,
+        },
+      },
+    },
+    {
+      timestamps: true,
+      paranoid: true,
+    },
+  );
+
+  file.associate = (db) => {
+    db.file.belongsTo(db.users, {
+      as: 'createdBy',
+    });
+
+    db.file.belongsTo(db.users, {
+      as: 'updatedBy',
+    });
+  };
+
+  return file;
+};

backend/src/db/models/index.js

@@ -0,0 +1,47 @@
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const Sequelize = require('sequelize');
+const basename = path.basename(__filename);
+const env = process.env.NODE_ENV || 'development';
+const config = require('../db.config')[env];
+const db = {};
+
+let sequelize;
+console.log(env);
+if (config.use_env_variable) {
+  sequelize = new Sequelize(process.env[config.use_env_variable], config);
+} else {
+  sequelize = new Sequelize(
+    config.database,
+    config.username,
+    config.password,
+    config,
+  );
+}
+
+fs.readdirSync(__dirname)
+  .filter((file) => {
+    return (
+      file.indexOf('.') !== 0 && file !== basename && file.slice(-3) === '.js'
+    );
+  })
+  .forEach((file) => {
+    const model = require(path.join(__dirname, file))(
+      sequelize,
+      Sequelize.DataTypes,
+    );
+    db[model.name] = model;
+  });
+
+Object.keys(db).forEach((modelName) => {
+  if (db[modelName].associate) {
+    db[modelName].associate(db);
+  }
+});
+
+db.sequelize = sequelize;
+db.Sequelize = Sequelize;
+
+module.exports = db;

backend/src/db/models/users.js

@@ -0,0 +1,151 @@
+const config = require('../../config');
+const providers = config.providers;
+const crypto = require('crypto');
+const bcrypt = require('bcrypt');
+const moment = require('moment');
+
+module.exports = function (sequelize, DataTypes) {
+  const users = sequelize.define(
+    'users',
+    {
+      id: {
+        type: DataTypes.UUID,
+        defaultValue: DataTypes.UUIDV4,
+        primaryKey: true,
+      },
+
+      firstName: {
+        type: DataTypes.TEXT,
+      },
+
+      lastName: {
+        type: DataTypes.TEXT,
+      },
+
+      phoneNumber: {
+        type: DataTypes.TEXT,
+      },
+
+      email: {
+        type: DataTypes.TEXT,
+      },
+
+      role: {
+        type: DataTypes.ENUM,
+
+        values: ['admin', 'user'],
+      },
+
+      disabled: {
+        type: DataTypes.BOOLEAN,
+
+        allowNull: false,
+        defaultValue: false,
+      },
+
+      password: {
+        type: DataTypes.TEXT,
+      },
+
+      emailVerified: {
+        type: DataTypes.BOOLEAN,
+
+        allowNull: false,
+        defaultValue: false,
+      },
+
+      emailVerificationToken: {
+        type: DataTypes.TEXT,
+      },
+
+      emailVerificationTokenExpiresAt: {
+        type: DataTypes.DATE,
+      },
+
+      passwordResetToken: {
+        type: DataTypes.TEXT,
+      },
+
+      passwordResetTokenExpiresAt: {
+        type: DataTypes.DATE,
+      },
+
+      provider: {
+        type: DataTypes.TEXT,
+      },
+
+      importHash: {
+        type: DataTypes.STRING(255),
+        allowNull: true,
+        unique: true,
+      },
+    },
+    {
+      timestamps: true,
+      paranoid: true,
+      freezeTableName: true,
+    },
+  );
+
+  users.associate = (db) => {
+    /// loop through entities and it's fields, and if ref === current e[name] and create relation has many on parent entity
+
+    //end loop
+
+    db.users.hasMany(db.file, {
+      as: 'avatar',
+      foreignKey: 'belongsToId',
+      constraints: false,
+      scope: {
+        belongsTo: db.users.getTableName(),
+        belongsToColumn: 'avatar',
+      },
+    });
+
+    db.users.belongsTo(db.users, {
+      as: 'createdBy',
+    });
+
+    db.users.belongsTo(db.users, {
+      as: 'updatedBy',
+    });
+  };
+
+  users.beforeCreate((users, options) => {
+    users = trimStringFields(users);
+
+    if (
+      users.provider !== providers.LOCAL &&
+      Object.values(providers).indexOf(users.provider) > -1
+    ) {
+      users.emailVerified = true;
+
+      if (!users.password) {
+        const password = crypto.randomBytes(20).toString('hex');
+
+        const hashedPassword = bcrypt.hashSync(
+          password,
+          config.bcrypt.saltRounds,
+        );
+
+        users.password = hashedPassword;
+      }
+    }
+  });
+
+  users.beforeUpdate((users, options) => {
+    users = trimStringFields(users);
+  });
+
+  return users;
+};
+
+function trimStringFields(users) {
+  users.email = users.email.trim();
+
+  users.firstName = users.firstName ? users.firstName.trim() : null;
+
+  users.lastName = users.lastName ? users.lastName.trim() : null;
+
+  return users;
+}

backend/src/db/reset.js

@@ -0,0 +1,16 @@
+const db = require('./models');
+const { execSync } = require('child_process');
+
+console.log('Resetting Database');
+
+db.sequelize
+  .sync({ force: true })
+  .then(() => {
+    execSync('sequelize db:seed:all');
+    console.log('OK');
+    process.exit();
+  })
+  .catch((error) => {
+    console.error(error);
+    process.exit(1);
+  });

backend/src/db/seeders/20200430130759-admin-user.js

@@ -0,0 +1,69 @@
+'use strict';
+const bcrypt = require('bcrypt');
+const config = require('../../config');
+
+const ids = [
+  '193bf4b5-9f07-4bd5-9a43-e7e41f3e96af',
+  'af5a87be-8f9c-4630-902a-37a60b7005ba',
+  '5bc531ab-611f-41f3-9373-b7cc5d09c93d',
+];
+
+module.exports = {
+  up: async (queryInterface, Sequelize) => {
+    let hash = bcrypt.hashSync(config.admin_pass, config.bcrypt.saltRounds);
+
+    try {
+      await queryInterface.bulkInsert('users', [
+        {
+          id: ids[0],
+          firstName: 'Admin',
+          email: config.admin_email,
+          emailVerified: true,
+          provider: config.providers.LOCAL,
+          password: hash,
+          createdAt: new Date(),
+          updatedAt: new Date(),
+        },
+        {
+          id: ids[1],
+          firstName: 'John',
+          email: 'john@doe.com',
+          emailVerified: true,
+          provider: config.providers.LOCAL,
+          password: hash,
+          createdAt: new Date(),
+          updatedAt: new Date(),
+        },
+        {
+          id: ids[2],
+          firstName: 'Client',
+          email: 'client@hello.com',
+          emailVerified: true,
+          provider: config.providers.LOCAL,
+          password: hash,
+          createdAt: new Date(),
+          updatedAt: new Date(),
+        },
+      ]);
+    } catch (error) {
+      console.error('Error during bulkInsert:', error);
+      throw error;
+    }
+  },
+  down: async (queryInterface, Sequelize) => {
+    try {
+      await queryInterface.bulkDelete(
+        'users',
+        {
+          id: {
+            [Sequelize.Op.in]: ids,
+          },
+        },
+        {},
+      );
+    } catch (error) {
+      console.error('Error during bulkDelete:', error);
+      throw error;
+    }
+  },
+};

backend/src/db/seeders/20200430130760-user-roles.js

@@ -0,0 +1,8 @@
+module.exports = {
+  up: async (queryInterface, Sequelize) => {
+    // up function does nothing
+  },
+  down: async (queryInterface, Sequelize) => {
+    // down function does nothing
+  },
+};

backend/src/db/seeders/20231127130745-sample-data.js

@@ -0,0 +1,10 @@
+const db = require('../models');
+const Users = db.users;
+
+module.exports = {
+  up: async (queryInterface, Sequelize) => {
+    await Promise.all([]);
+  },
+
+  down: async (queryInterface, Sequelize) => {},
+};

backend/src/db/utils.js

@@ -0,0 +1,24 @@
+const validator = require('validator');
+const { v4: uuid } = require('uuid');
+const Sequelize = require('./models').Sequelize;
+
+module.exports = class Utils {
+  static uuid(value) {
+    let id = value;
+
+    if (!validator.isUUID(id)) {
+      id = uuid();
+    }
+
+    return id;
+  }
+
+  static ilike(model, column, value) {
+    return Sequelize.where(
+      Sequelize.fn('lower', Sequelize.col(`${model}.${column}`)),
+      {
+        [Sequelize.Op.like]: `%${value}%`.toLowerCase(),
+      },
+    );
+  }
+};

backend/src/helpers.js

@@ -0,0 +1,23 @@
+const jwt = require('jsonwebtoken');
+const config = require('./config');
+
+module.exports = class Helpers {
+  static wrapAsync(fn) {
+    return function (req, res, next) {
+      fn(req, res, next).catch(next);
+    };
+  }
+
+  static commonErrorHandler(error, req, res, next) {
+    if ([400, 403, 404].includes(error.code)) {
+      return res.status(error.code).send(error.message);
+    }
+
+    console.error(error);
+    return res.status(500).send(error.message);
+  }
+
+  static jwtSign(data) {
+    return jwt.sign(data, config.secret_key, { expiresIn: '6h' });
+  }
+};

backend/src/index.js

@@ -0,0 +1,109 @@
+const express = require('express');
+const cors = require('cors');
+const app = express();
+const passport = require('passport');
+const path = require('path');
+const fs = require('fs');
+const bodyParser = require('body-parser');
+const db = require('./db/models');
+const config = require('./config');
+const swaggerUI = require('swagger-ui-express');
+const swaggerJsDoc = require('swagger-jsdoc');
+
+const authRoutes = require('./routes/auth');
+const fileRoutes = require('./routes/file');
+const searchRoutes = require('./routes/search');
+const pexelsRoutes = require('./routes/pexels');
+
+const usersRoutes = require('./routes/users');
+
+const options = {
+  definition: {
+    openapi: '3.0.0',
+    info: {
+      version: '1.0.0',
+      title: 'https://iphonekarshenas.ir',
+      description:
+        'https://iphonekarshenas.ir Online REST API for Testing and Prototyping application. You can perform all major operations with your entities - create, delete and etc.',
+    },
+    servers: [
+      {
+        url: config.swaggerUrl,
+        description: 'Development server',
+      },
+    ],
+    components: {
+      securitySchemes: {
+        bearerAuth: {
+          type: 'http',
+          scheme: 'bearer',
+          bearerFormat: 'JWT',
+        },
+      },
+      responses: {
+        UnauthorizedError: {
+          description: 'Access token is missing or invalid',
+        },
+      },
+    },
+    security: [
+      {
+        bearerAuth: [],
+      },
+    ],
+  },
+  apis: ['./src/routes/*.js'],
+};
+
+const specs = swaggerJsDoc(options);
+app.use(
+  '/api-docs',
+  function (req, res, next) {
+    swaggerUI.host = req.get('host');
+    next();
+  },
+  swaggerUI.serve,
+  swaggerUI.setup(specs),
+);
+
+app.use(cors({ origin: true }));
+require('./auth/auth');
+
+app.use(bodyParser.json());
+
+app.use('/api/auth', authRoutes);
+app.use('/api/file', fileRoutes);
+app.use('/api/pexels', pexelsRoutes);
+app.enable('trust proxy');
+
+app.use(
+  '/api/users',
+  passport.authenticate('jwt', { session: false }),
+  usersRoutes,
+);
+
+app.use(
+  '/api/search',
+  passport.authenticate('jwt', { session: false }),
+  searchRoutes,
+);
+
+const publicDir = path.join(__dirname, '../public');
+
+if (fs.existsSync(publicDir)) {
+  app.use('/', express.static(publicDir));
+
+  app.get('*', function (request, response) {
+    response.sendFile(path.resolve(publicDir, 'index.html'));
+  });
+}
+
+const PORT = process.env.NODE_ENV === 'dev_stage' ? 3000 : 8080;
+
+db.sequelize.sync().then(function () {
+  app.listen(PORT, () => {
+    console.log(`Listening on port ${PORT}`);
+  });
+});
+
+module.exports = app;

backend/src/middlewares/upload.js

@@ -0,0 +1,11 @@
+const util = require('util');
+const Multer = require('multer');
+const maxSize = 10 * 1024 * 1024;
+
+let processFile = Multer({
+  storage: Multer.memoryStorage(),
+  limits: { fileSize: maxSize },
+}).single('file');
+
+let processFileMiddleware = util.promisify(processFile);
+module.exports = processFileMiddleware;

backend/src/routes/auth.js

@@ -0,0 +1,268 @@
+const express = require('express');
+const passport = require('passport');
+
+const config = require('../config');
+const AuthService = require('../services/auth');
+const ForbiddenError = require('../services/notifications/errors/forbidden');
+const EmailSender = require('../services/email');
+const wrapAsync = require('../helpers').wrapAsync;
+
+const router = express.Router();
+
+/**
+ *  @swagger
+ *  components:
+ *    schemas:
+ *      Auth:
+ *        type: object
+ *        required:
+ *          - email
+ *          - password
+ *        properties:
+ *          email:
+ *            type: string
+ *            default: admin@flatlogic.com
+ *            description: User email
+ *          password:
+ *            type: string
+ *            default: password
+ *            description: User password
+ */
+
+/**
+ * @swagger
+ * tags:
+ *   name: Auth
+ *   description: Authorization operations
+ */
+
+/**
+ * @swagger
+ *  /api/auth/signin/local:
+ *    post:
+ *      tags: [Auth]
+ *      summary: Logs user into the system
+ *      description: Logs user into the system
+ *      requestBody:
+ *        description: Set valid user email and password
+ *        content:
+ *          application/json:
+ *            schema:
+ *              $ref: "#/components/schemas/Auth"
+ *      responses:
+ *        200:
+ *          description: Successful login
+ *        400:
+ *          description: Invalid username/password supplied
+ *      x-codegen-request-body-name: body
+ */
+
+router.post(
+  '/signin/local',
+  wrapAsync(async (req, res) => {
+    const payload = await AuthService.signin(
+      req.body.email,
+      req.body.password,
+      req,
+    );
+    res.status(200).send(payload);
+  }),
+);
+
+/**
+ * @swagger
+ *  /api/auth/me:
+ *    get:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Auth]
+ *      summary: Get current authorized user info
+ *      description: Get current authorized user info
+ *      responses:
+ *        200:
+ *          description: Successful retrieval of current authorized user data
+ *        400:
+ *          description: Invalid username/password supplied
+ *      x-codegen-request-body-name: body
+ */
+
+router.get(
+  '/me',
+  passport.authenticate('jwt', { session: false }),
+  (req, res) => {
+    if (!req.currentUser || !req.currentUser.id) {
+      throw new ForbiddenError();
+    }
+
+    const payload = req.currentUser;
+    delete payload.password;
+    res.status(200).send(payload);
+  },
+);
+
+router.put(
+  '/password-reset',
+  wrapAsync(async (req, res) => {
+    const payload = await AuthService.passwordReset(
+      req.body.token,
+      req.body.password,
+      req,
+    );
+    res.status(200).send(payload);
+  }),
+);
+
+router.put(
+  '/password-update',
+  passport.authenticate('jwt', { session: false }),
+  wrapAsync(async (req, res) => {
+    const payload = await AuthService.passwordUpdate(
+      req.body.currentPassword,
+      req.body.newPassword,
+      req,
+    );
+    res.status(200).send(payload);
+  }),
+);
+
+router.post(
+  '/send-email-address-verification-email',
+  passport.authenticate('jwt', { session: false }),
+  wrapAsync(async (req, res) => {
+    if (!req.currentUser) {
+      throw new ForbiddenError();
+    }
+
+    await AuthService.sendEmailAddressVerificationEmail(req.currentUser.email);
+    const payload = true;
+    res.status(200).send(payload);
+  }),
+);
+
+router.post(
+  '/send-password-reset-email',
+  wrapAsync(async (req, res) => {
+    const link = new URL(req.headers.referer);
+    await AuthService.sendPasswordResetEmail(
+      req.body.email,
+      'register',
+      link.host,
+    );
+    const payload = true;
+    res.status(200).send(payload);
+  }),
+);
+
+/**
+ * @swagger
+ *  /api/auth/signup:
+ *    post:
+ *      tags: [Auth]
+ *      summary: Register new user into the system
+ *      description: Register new user into the system
+ *      requestBody:
+ *        description: Set valid user email and password
+ *        content:
+ *          application/json:
+ *            schema:
+ *              $ref: "#/components/schemas/Auth"
+ *      responses:
+ *        200:
+ *          description: New user successfully signed up
+ *        400:
+ *          description: Invalid username/password supplied
+ *        500:
+ *          description: Some server error
+ *      x-codegen-request-body-name: body
+ */
+
+router.post(
+  '/signup',
+  wrapAsync(async (req, res) => {
+    const link = new URL(req.headers.referer);
+    const payload = await AuthService.signup(
+      req.body.email,
+      req.body.password,
+
+      req,
+      link.host,
+    );
+    res.status(200).send(payload);
+  }),
+);
+
+router.put(
+  '/profile',
+  passport.authenticate('jwt', { session: false }),
+  wrapAsync(async (req, res) => {
+    if (!req.currentUser || !req.currentUser.id) {
+      throw new ForbiddenError();
+    }
+
+    await AuthService.updateProfile(req.body.profile, req.currentUser);
+    const payload = true;
+    res.status(200).send(payload);
+  }),
+);
+
+router.put(
+  '/verify-email',
+  wrapAsync(async (req, res) => {
+    const payload = await AuthService.verifyEmail(
+      req.body.token,
+      req,
+      req.headers.referer,
+    );
+    res.status(200).send(payload);
+  }),
+);
+
+router.get('/email-configured', (req, res) => {
+  const payload = EmailSender.isConfigured;
+  res.status(200).send(payload);
+});
+
+router.get('/signin/google', (req, res, next) => {
+  passport.authenticate('google', {
+    scope: ['profile', 'email'],
+    state: req.query.app,
+  })(req, res, next);
+});
+
+router.get(
+  '/signin/google/callback',
+  passport.authenticate('google', {
+    failureRedirect: '/login',
+    session: false,
+  }),
+
+  function (req, res) {
+    socialRedirect(res, req.query.state, req.user.token, config);
+  },
+);
+
+router.get('/signin/microsoft', (req, res, next) => {
+  passport.authenticate('microsoft', {
+    scope: ['https://graph.microsoft.com/user.read openid'],
+    state: req.query.app,
+  })(req, res, next);
+});
+
+router.get(
+  '/signin/microsoft/callback',
+  passport.authenticate('microsoft', {
+    failureRedirect: '/login',
+    session: false,
+  }),
+  function (req, res) {
+    socialRedirect(res, req.query.state, req.user.token, config);
+  },
+);
+
+router.use('/', require('../helpers').commonErrorHandler);
+
+function socialRedirect(res, state, token, config) {
+  res.redirect(config.uiUrl + '/login?token=' + token);
+}
+
+module.exports = router;

backend/src/routes/file.js

@@ -0,0 +1,40 @@
+const express = require('express');
+const config = require('../config');
+const path = require('path');
+const passport = require('passport');
+const services = require('../services/file');
+const router = express.Router();
+
+router.get('/download', (req, res) => {
+  if (
+    process.env.NODE_ENV == 'production' ||
+    process.env.NEXT_PUBLIC_BACK_API
+  ) {
+    services.downloadGCloud(req, res);
+  } else {
+    services.downloadLocal(req, res);
+  }
+});
+
+router.post(
+  '/upload/:table/:field',
+  passport.authenticate('jwt', { session: false }),
+  (req, res) => {
+    const fileName = `${req.params.table}/${req.params.field}`;
+
+    if (
+      process.env.NODE_ENV == 'production' ||
+      process.env.NEXT_PUBLIC_BACK_API
+    ) {
+      services.uploadGCloud(fileName, req, res);
+    } else {
+      services.uploadLocal(fileName, {
+        entity: null,
+        maxFileSize: 10 * 1024 * 1024,
+        folderIncludesAuthenticationUid: false,
+      })(req, res);
+    }
+  },
+);
+
+module.exports = router;

backend/src/routes/openai.js

@@ -0,0 +1,180 @@
+const express = require('express');
+const db = require('../db/models');
+const wrapAsync = require('../helpers').wrapAsync;
+const router = express.Router();
+const sjs = require('sequelize-json-schema');
+const { getWidget } = require('../services/openai');
+const RolesService = require('../services/roles');
+const RolesDBApi = require('../db/api/roles');
+
+/**
+ * @swagger
+ * /api/roles/roles-info/{infoId}:
+ *   delete:
+ *     security:
+ *       - bearerAuth: []
+ *     tags: [Roles]
+ *     summary: Remove role information by ID
+ *     description: Remove specific role information by ID
+ *     parameters:
+ *       - in: path
+ *         name: infoId
+ *         description: ID of role information to remove
+ *         required: true
+ *         schema:
+ *           type: string
+ *       - in: query
+ *         name: userId
+ *         description: ID of the user
+ *         required: true
+ *         schema:
+ *           type: string
+ *       - in: query
+ *         name: key
+ *         description: Key of the role information to remove
+ *         required: true
+ *         schema:
+ *           type: string
+ *     responses:
+ *       200:
+ *         description: Role information successfully removed
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 user:
+ *                   type: string
+ *                   description: The user information
+ *       400:
+ *         description: Invalid ID or key supplied
+ *       401:
+ *         $ref: "#/components/responses/UnauthorizedError"
+ *       404:
+ *         description: Role not found
+ *       500:
+ *         description: Some server error
+ */
+
+router.delete(
+  '/roles-info/:infoId',
+  wrapAsync(async (req, res) => {
+    const role = await RolesService.removeRoleInfoById(
+      req.query.infoId,
+      req.query.roleId,
+      req.query.key,
+      req.currentUser,
+    );
+
+    res.status(200).send(role);
+  }),
+);
+
+/**
+ * @swagger
+ * /api/roles/role-info/{roleId}:
+ *   get:
+ *     security:
+ *       - bearerAuth: []
+ *     tags: [Roles]
+ *     summary: Get role information by key
+ *     description: Get specific role information by key
+ *     parameters:
+ *       - in: path
+ *         name: roleId
+ *         description: ID of role to get information for
+ *         required: true
+ *         schema:
+ *           type: string
+ *       - in: query
+ *         name: key
+ *         description: Key of the role information to retrieve
+ *         required: true
+ *         schema:
+ *           type: string
+ *     responses:
+ *       200:
+ *         description: Role information successfully received
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 info:
+ *                   type: string
+ *                   description: The role information
+ *       400:
+ *         description: Invalid ID or key supplied
+ *       401:
+ *         $ref: "#/components/responses/UnauthorizedError"
+ *       404:
+ *         description: Role not found
+ *       500:
+ *         description: Some server error
+ */
+
+router.get(
+  '/info-by-key',
+  wrapAsync(async (req, res) => {
+    const roleId = req.query.roleId;
+    const key = req.query.key;
+    const currentUser = req.currentUser;
+    let info = await RolesService.getRoleInfoByKey(key, roleId, currentUser);
+    const role = await RolesDBApi.findBy({ id: roleId });
+    if (!role?.role_customization) {
+      await Promise.all(
+        ['pie', 'bar'].map(async (e) => {
+          const schema = await sjs.getSequelizeSchema(db.sequelize, {});
+          const payload = {
+            description: `Create some cool ${e} chart`,
+            modelDefinition: schema.definitions,
+          };
+          const widgetId = await getWidget(payload, currentUser?.id, roleId);
+          if (widgetId) {
+            await RolesService.addRoleInfo(
+              roleId,
+              currentUser?.id,
+              'widgets',
+              widgetId,
+              req.currentUser,
+            );
+          }
+        }),
+      );
+      info = await RolesService.getRoleInfoByKey(key, roleId, currentUser);
+    }
+    res.status(200).send(info);
+  }),
+);
+
+router.post(
+  '/create_widget',
+  wrapAsync(async (req, res) => {
+    const { description, userId, roleId } = req.body;
+
+    const currentUser = req.currentUser;
+    const schema = await sjs.getSequelizeSchema(db.sequelize, {});
+    const payload = {
+      description,
+      modelDefinition: schema.definitions,
+    };
+
+    const widgetId = await getWidget(payload, userId, roleId);
+
+    if (widgetId) {
+      await RolesService.addRoleInfo(
+        roleId,
+        userId,
+        'widgets',
+        widgetId,
+        currentUser,
+      );
+
+      return res.status(200).send(widgetId);
+    } else {
+      return res.status(400).send(widgetId);
+    }
+  }),
+);
+
+module.exports = router;

backend/src/routes/pexels.js

@@ -0,0 +1,106 @@
+const express = require('express');
+const router = express.Router();
+const { pexelsKey, pexelsQuery } = require('../config');
+const fetch = require('node-fetch');
+
+const KEY = pexelsKey;
+
+router.get('/image', async (req, res) => {
+  const headers = {
+    Authorization: `${KEY}`,
+  };
+  const query = pexelsQuery || 'nature';
+  const orientation = 'portrait';
+  const perPage = 1;
+  const url = `https://api.pexels.com/v1/search?query=${query}&orientation=${orientation}&per_page=${perPage}&page=1`;
+
+  try {
+    const response = await fetch(url, { headers });
+    const data = await response.json();
+    res.status(200).json(data.photos[0]);
+  } catch (error) {
+    res.status(500).json({ error: 'Failed to fetch image' });
+  }
+});
+
+router.get('/video', async (req, res) => {
+  const headers = {
+    Authorization: `${KEY}`,
+  };
+  const query = pexelsQuery || 'nature';
+  const orientation = 'portrait';
+  const perPage = 1;
+  const url = `https://api.pexels.com/videos/search?query=${query}&orientation=${orientation}&per_page=${perPage}&page=1`;
+
+  try {
+    const response = await fetch(url, { headers });
+    const data = await response.json();
+    res.status(200).json(data.videos[0]);
+  } catch (error) {
+    res.status(500).json({ error: 'Failed to fetch video' });
+  }
+});
+
+router.get('/multiple-images', async (req, res) => {
+  const headers = {
+    Authorization: `${KEY}`,
+  };
+
+  const queries = req.query.queries
+    ? req.query.queries.split(',')
+    : ['home', 'apple', 'pizza', 'mountains', 'cat'];
+  const orientation = 'square';
+  const perPage = 1;
+
+  const fallbackImage = {
+    src: 'https://images.pexels.com/photos/8199252/pexels-photo-8199252.jpeg',
+    photographer: 'Yan Krukau',
+    photographer_url: 'https://www.pexels.com/@yankrukov',
+  };
+  const fetchFallbackImage = async () => {
+    try {
+      const response = await fetch('https://picsum.photos/600');
+      return {
+        src: response.url,
+        photographer: 'Random Picsum',
+        photographer_url: 'https://picsum.photos/',
+      };
+    } catch (error) {
+      return fallbackImage;
+    }
+  };
+  const fetchImage = async (query) => {
+    const url = `https://api.pexels.com/v1/search?query=${query}&orientation=${orientation}&per_page=${perPage}&page=1`;
+    const response = await fetch(url, { headers });
+    const data = await response.json();
+    return data.photos[0] || null;
+  };
+
+  const imagePromises = queries.map((query) => fetchImage(query));
+  const imagesResults = await Promise.allSettled(imagePromises);
+
+  const formattedImages = await Promise.all(
+    imagesResults.map(async (result) => {
+      if (result.status === 'fulfilled' && result.value) {
+        const image = result.value;
+        return {
+          src: image.src?.original || fallbackImage.src,
+          photographer: image.photographer || fallbackImage.photographer,
+          photographer_url:
+            image.photographer_url || fallbackImage.photographer_url,
+        };
+      } else {
+        const fallback = await fetchFallbackImage();
+        return {
+          src: fallback.src || '',
+          photographer: fallback.photographer || 'Unknown',
+          photographer_url: fallback.photographer_url || '',
+        };
+      }
+    }),
+  );
+
+  res.json(formattedImages);
+});
+
+module.exports = router;

backend/src/routes/search.js

@@ -0,0 +1,51 @@
+const express = require('express');
+const SearchService = require('../services/search');
+
+const router = express.Router();
+
+/**
+ * @swagger
+ * path:
+ *  /api/search:
+ *    post:
+ *      summary: Search
+ *      description: Search results across multiple tables
+ *      requestBody:
+ *        content:
+ *          application/json:
+ *            schema:
+ *              type: object
+ *              properties:
+ *                searchQuery:
+ *                  type: string
+ *              required:
+ *                - searchQuery
+ *      responses:
+ *        200:
+ *          description: Successful request
+ *        400:
+ *          description: Invalid request
+ *        500:
+ *          description: Internal server error
+ */
+
+router.post('/', async (req, res) => {
+  const { searchQuery } = req.body;
+
+  if (!searchQuery) {
+    return res.status(400).json({ error: 'Please enter a search query' });
+  }
+
+  try {
+    const foundMatches = await SearchService.search(
+      searchQuery,
+      req.currentUser,
+    );
+    res.json(foundMatches);
+  } catch (error) {
+    console.error('Internal Server Error', error);
+    res.status(500).json({ error: 'Internal Server Error' });
+  }
+});
+
+module.exports = router;

backend/src/routes/users.js

@@ -0,0 +1,444 @@
+const express = require('express');
+
+const UsersService = require('../services/users');
+const UsersDBApi = require('../db/api/users');
+const wrapAsync = require('../helpers').wrapAsync;
+
+const router = express.Router();
+
+const { parse } = require('json2csv');
+
+/**
+ *  @swagger
+ *  components:
+ *    schemas:
+ *      Users:
+ *        type: object
+ *        properties:
+
+ *          firstName:
+ *            type: string
+ *            default: firstName
+ *          lastName:
+ *            type: string
+ *            default: lastName
+ *          phoneNumber:
+ *            type: string
+ *            default: phoneNumber
+ *          email:
+ *            type: string
+ *            default: email
+
+ *          
+ *          role:
+ *            type: string
+ *            default: user
+ */
+
+/**
+ *  @swagger
+ * tags:
+ *   name: Users
+ *   description: The Users managing API
+ */
+
+/**
+ *  @swagger
+ *  /api/users:
+ *    post:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Users]
+ *      summary: Add new item
+ *      description: Add new item
+ *      requestBody:
+ *        required: true
+ *        content:
+ *          application/json:
+ *            schema:
+ *              properties:
+ *                data:
+ *                  description: Data of the updated item
+ *                  type: object
+ *                  $ref: "#/components/schemas/Users"
+ *      responses:
+ *        200:
+ *          description: The item was successfully added
+ *          content:
+ *            application/json:
+ *              schema:
+ *                $ref: "#/components/schemas/Users"
+ *        401:
+ *          $ref: "#/components/responses/UnauthorizedError"
+ *        405:
+ *          description: Invalid input data
+ *        500:
+ *          description: Some server error
+ */
+router.post(
+  '/',
+  wrapAsync(async (req, res) => {
+    const referer =
+      req.headers.referer ||
+      `${req.protocol}://${req.hostname}${req.originalUrl}`;
+    const link = new URL(referer);
+    await UsersService.create(req.body.data, req.currentUser, true, link.host);
+    const payload = true;
+    res.status(200).send(payload);
+  }),
+);
+
+/**
+ * @swagger
+ * /api/budgets/bulk-import:
+ *  post:
+ *    security:
+ *      - bearerAuth: []
+ *    tags: [Users]
+ *    summary: Bulk import items
+ *    description: Bulk import items
+ *    requestBody:
+ *      required: true
+ *      content:
+ *        application/json:
+ *         schema:
+ *          properties:
+ *            data:
+ *              description: Data of the updated items
+ *              type: array
+ *              items:
+ *                $ref: "#/components/schemas/Users"
+ *    responses:
+ *      200:
+ *        description: The items were successfully imported
+ *    content:
+ *      application/json:
+ *        schema:
+ *          $ref: "#/components/schemas/Users"
+ *      401:
+ *        $ref: "#/components/responses/UnauthorizedError"
+ *      405:
+ *        description: Invalid input data
+ *      500:
+ *        description: Some server error
+ *
+ */
+router.post(
+  '/bulk-import',
+  wrapAsync(async (req, res) => {
+    const referer =
+      req.headers.referer ||
+      `${req.protocol}://${req.hostname}${req.originalUrl}`;
+    const link = new URL(referer);
+    await UsersService.bulkImport(req, res, true, link.host);
+    const payload = true;
+    res.status(200).send(payload);
+  }),
+);
+
+/**
+ *  @swagger
+ *  /api/users/{id}:
+ *    put:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Users]
+ *      summary: Update the data of the selected item
+ *      description: Update the data of the selected item
+ *      parameters:
+ *        - in: path
+ *          name: id
+ *          description: Item ID to update
+ *          required: true
+ *          schema:
+ *            type: string
+ *      requestBody:
+ *        description: Set new item data
+ *        required: true
+ *        content:
+ *          application/json:
+ *            schema:
+ *              properties:
+ *                id:
+ *                  description: ID of the updated item
+ *                  type: string
+ *                data:
+ *                  description: Data of the updated item
+ *                  type: object
+ *                  $ref: "#/components/schemas/Users"
+ *              required:
+ *                - id
+ *      responses:
+ *        200:
+ *          description: The item data was successfully updated
+ *          content:
+ *            application/json:
+ *              schema:
+ *                $ref: "#/components/schemas/Users"
+ *        400:
+ *          description: Invalid ID supplied
+ *        401:
+ *          $ref: "#/components/responses/UnauthorizedError"
+ *        404:
+ *          description: Item not found
+ *        500:
+ *          description: Some server error
+ */
+router.put(
+  '/:id',
+  wrapAsync(async (req, res) => {
+    await UsersService.update(req.body.data, req.body.id, req.currentUser);
+    const payload = true;
+    res.status(200).send(payload);
+  }),
+);
+
+/**
+ * @swagger
+ *  /api/users/{id}:
+ *    delete:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Users]
+ *      summary: Delete the selected item
+ *      description: Delete the selected item
+ *      parameters:
+ *        - in: path
+ *          name: id
+ *          description: Item ID to delete
+ *          required: true
+ *          schema:
+ *            type: string
+ *      responses:
+ *        200:
+ *          description: The item was successfully deleted
+ *          content:
+ *            application/json:
+ *              schema:
+ *                $ref: "#/components/schemas/Users"
+ *        400:
+ *          description: Invalid ID supplied
+ *        401:
+ *          $ref: "#/components/responses/UnauthorizedError"
+ *        404:
+ *          description: Item not found
+ *        500:
+ *          description: Some server error
+ */
+router.delete(
+  '/:id',
+  wrapAsync(async (req, res) => {
+    await UsersService.remove(req.params.id, req.currentUser);
+    const payload = true;
+    res.status(200).send(payload);
+  }),
+);
+
+/**
+ *  @swagger
+ *  /api/users/deleteByIds:
+ *    post:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Users]
+ *      summary: Delete the selected item list
+ *      description: Delete the selected item list
+ *      requestBody:
+ *        required: true
+ *        content:
+ *          application/json:
+ *            schema:
+ *              properties:
+ *                ids:
+ *                  description: IDs of the updated items
+ *                  type: array
+ *      responses:
+ *        200:
+ *          description: The items was successfully deleted
+ *          content:
+ *            application/json:
+ *              schema:
+ *                $ref: "#/components/schemas/Users"
+ *        401:
+ *          $ref: "#/components/responses/UnauthorizedError"
+ *        404:
+ *          description: Items not found
+ *        500:
+ *          description: Some server error
+ */
+router.post(
+  '/deleteByIds',
+  wrapAsync(async (req, res) => {
+    await UsersService.deleteByIds(req.body.data, req.currentUser);
+    const payload = true;
+    res.status(200).send(payload);
+  }),
+);
+
+/**
+ *  @swagger
+ *  /api/users:
+ *    get:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Users]
+ *      summary: Get all users
+ *      description: Get all users
+ *      responses:
+ *        200:
+ *          description: Users list successfully received
+ *          content:
+ *            application/json:
+ *              schema:
+ *                type: array
+ *                items:
+ *                  $ref: "#/components/schemas/Users"
+ *        401:
+ *          $ref: "#/components/responses/UnauthorizedError"
+ *        404:
+ *          description: Data not found
+ *        500:
+ *          description: Some server error
+ */
+router.get(
+  '/',
+  wrapAsync(async (req, res) => {
+    const filetype = req.query.filetype;
+
+    const currentUser = req.currentUser;
+    const payload = await UsersDBApi.findAll(req.query, { currentUser });
+    if (filetype && filetype === 'csv') {
+      const fields = ['id', 'firstName', 'lastName', 'phoneNumber', 'email'];
+      const opts = { fields };
+      try {
+        const csv = parse(payload.rows, opts);
+        res.status(200).attachment(csv);
+        res.send(csv);
+      } catch (err) {
+        console.error(err);
+      }
+    } else {
+      res.status(200).send(payload);
+    }
+  }),
+);
+
+/**
+ *  @swagger
+ *  /api/users/count:
+ *    get:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Users]
+ *      summary: Count all users
+ *      description: Count all users
+ *      responses:
+ *        200:
+ *          description: Users count successfully received
+ *          content:
+ *            application/json:
+ *              schema:
+ *                type: array
+ *                items:
+ *                  $ref: "#/components/schemas/Users"
+ *        401:
+ *          $ref: "#/components/responses/UnauthorizedError"
+ *        404:
+ *          description: Data not found
+ *        500:
+ *          description: Some server error
+ */
+router.get(
+  '/count',
+  wrapAsync(async (req, res) => {
+    const currentUser = req.currentUser;
+    const payload = await UsersDBApi.findAll(req.query, null, {
+      countOnly: true,
+      currentUser,
+    });
+
+    res.status(200).send(payload);
+  }),
+);
+
+/**
+ *  @swagger
+ *  /api/users/autocomplete:
+ *    get:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Users]
+ *      summary: Find all users that match search criteria
+ *      description: Find all users that match search criteria
+ *      responses:
+ *        200:
+ *          description: Users list successfully received
+ *          content:
+ *            application/json:
+ *              schema:
+ *                type: array
+ *                items:
+ *                  $ref: "#/components/schemas/Users"
+ *        401:
+ *          $ref: "#/components/responses/UnauthorizedError"
+ *        404:
+ *          description: Data not found
+ *        500:
+ *          description: Some server error
+ */
+router.get('/autocomplete', async (req, res) => {
+  const payload = await UsersDBApi.findAllAutocomplete(
+    req.query.query,
+    req.query.limit,
+    req.query.offset,
+  );
+
+  res.status(200).send(payload);
+});
+
+/**
+ * @swagger
+ *  /api/users/{id}:
+ *    get:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Users]
+ *      summary: Get selected item
+ *      description: Get selected item
+ *      parameters:
+ *        - in: path
+ *          name: id
+ *          description: ID of item to get
+ *          required: true
+ *          schema:
+ *            type: string
+ *      responses:
+ *        200:
+ *          description: Selected item successfully received
+ *          content:
+ *            application/json:
+ *              schema:
+ *                $ref: "#/components/schemas/Users"
+ *        400:
+ *          description: Invalid ID supplied
+ *        401:
+ *          $ref: "#/components/responses/UnauthorizedError"
+ *        404:
+ *          description: Item not found
+ *        500:
+ *          description: Some server error
+ */
+router.get(
+  '/:id',
+  wrapAsync(async (req, res) => {
+    const payload = await UsersDBApi.findBy({ id: req.params.id });
+
+    delete payload.password;
+
+    res.status(200).send(payload);
+  }),
+);
+
+router.use('/', require('../helpers').commonErrorHandler);
+
+module.exports = router;

backend/src/services/auth.js

@@ -0,0 +1,226 @@
+const UsersDBApi = require('../db/api/users');
+const ValidationError = require('./notifications/errors/validation');
+const ForbiddenError = require('./notifications/errors/forbidden');
+const bcrypt = require('bcrypt');
+const EmailAddressVerificationEmail = require('./email/list/addressVerification');
+const InvitationEmail = require('./email/list/invitation');
+const PasswordResetEmail = require('./email/list/passwordReset');
+const EmailSender = require('./email');
+const config = require('../config');
+const helpers = require('../helpers');
+
+class Auth {
+  static async signup(email, password, options = {}, host) {
+    const user = await UsersDBApi.findBy({ email });
+
+    const hashedPassword = await bcrypt.hash(
+      password,
+      config.bcrypt.saltRounds,
+    );
+
+    if (user) {
+      if (user.authenticationUid) {
+        throw new ValidationError('auth.emailAlreadyInUse');
+      }
+
+      if (user.disabled) {
+        throw new ValidationError('auth.userDisabled');
+      }
+
+      await UsersDBApi.updatePassword(user.id, hashedPassword, options);
+
+      if (EmailSender.isConfigured) {
+        await this.sendEmailAddressVerificationEmail(user.email, host);
+      }
+
+      const data = {
+        user: {
+          id: user.id,
+          email: user.email,
+        },
+      };
+
+      return helpers.jwtSign(data);
+    }
+
+    const newUser = await UsersDBApi.createFromAuth(
+      {
+        firstName: email.split('@')[0],
+        password: hashedPassword,
+        email: email,
+      },
+      options,
+    );
+
+    if (EmailSender.isConfigured) {
+      await this.sendEmailAddressVerificationEmail(newUser.email, host);
+    }
+
+    const data = {
+      user: {
+        id: newUser.id,
+        email: newUser.email,
+      },
+    };
+
+    return helpers.jwtSign(data);
+  }
+
+  static async signin(email, password, options = {}) {
+    const user = await UsersDBApi.findBy({ email });
+
+    if (!user) {
+      throw new ValidationError('auth.userNotFound');
+    }
+
+    if (user.disabled) {
+      throw new ValidationError('auth.userDisabled');
+    }
+
+    if (!user.password) {
+      throw new ValidationError('auth.wrongPassword');
+    }
+
+    if (!EmailSender.isConfigured) {
+      user.emailVerified = true;
+    }
+
+    if (!user.emailVerified) {
+      throw new ValidationError('auth.userNotVerified');
+    }
+
+    const passwordsMatch = await bcrypt.compare(password, user.password);
+
+    if (!passwordsMatch) {
+      throw new ValidationError('auth.wrongPassword');
+    }
+
+    const data = {
+      user: {
+        id: user.id,
+        email: user.email,
+      },
+    };
+
+    return helpers.jwtSign(data);
+  }
+
+  static async sendEmailAddressVerificationEmail(email, host) {
+    let link;
+    try {
+      const token = await UsersDBApi.generateEmailVerificationToken(email);
+      link = `${host}/verify-email?token=${token}`;
+    } catch (error) {
+      console.error(error);
+      throw new ValidationError('auth.emailAddressVerificationEmail.error');
+    }
+
+    const emailAddressVerificationEmail = new EmailAddressVerificationEmail(
+      email,
+      link,
+    );
+
+    return new EmailSender(emailAddressVerificationEmail).send();
+  }
+
+  static async sendPasswordResetEmail(email, type = 'register', host) {
+    let link;
+
+    try {
+      const token = await UsersDBApi.generatePasswordResetToken(email);
+      link = `${host}/password-reset?token=${token}`;
+    } catch (error) {
+      console.error(error);
+      throw new ValidationError('auth.passwordReset.error');
+    }
+
+    let passwordResetEmail;
+    if (type === 'register') {
+      passwordResetEmail = new PasswordResetEmail(email, link);
+    }
+    if (type === 'invitation') {
+      passwordResetEmail = new InvitationEmail(email, link);
+    }
+
+    return new EmailSender(passwordResetEmail).send();
+  }
+
+  static async verifyEmail(token, options = {}) {
+    const user = await UsersDBApi.findByEmailVerificationToken(token, options);
+
+    if (!user) {
+      throw new ValidationError(
+        'auth.emailAddressVerificationEmail.invalidToken',
+      );
+    }
+
+    return UsersDBApi.markEmailVerified(user.id, options);
+  }
+
+  static async passwordUpdate(currentPassword, newPassword, options) {
+    const currentUser = options.currentUser || null;
+    if (!currentUser) {
+      throw new ForbiddenError();
+    }
+
+    const currentPasswordMatch = await bcrypt.compare(
+      currentPassword,
+      currentUser.password,
+    );
+
+    if (!currentPasswordMatch) {
+      throw new ValidationError('auth.wrongPassword');
+    }
+
+    const newPasswordMatch = await bcrypt.compare(
+      newPassword,
+      currentUser.password,
+    );
+
+    if (newPasswordMatch) {
+      throw new ValidationError('auth.passwordUpdate.samePassword');
+    }
+
+    const hashedPassword = await bcrypt.hash(
+      newPassword,
+      config.bcrypt.saltRounds,
+    );
+
+    return UsersDBApi.updatePassword(currentUser.id, hashedPassword, options);
+  }
+
+  static async passwordReset(token, password, options = {}) {
+    const user = await UsersDBApi.findByPasswordResetToken(token, options);
+
+    if (!user) {
+      throw new ValidationError('auth.passwordReset.invalidToken');
+    }
+
+    const hashedPassword = await bcrypt.hash(
+      password,
+      config.bcrypt.saltRounds,
+    );
+
+    return UsersDBApi.updatePassword(user.id, hashedPassword, options);
+  }
+
+  static async updateProfile(data, currentUser) {
+    let transaction = await db.sequelize.transaction();
+
+    try {
+      await UsersDBApi.findBy({ id: currentUser.id }, { transaction });
+
+      await UsersDBApi.update(currentUser.id, data, {
+        currentUser,
+        transaction,
+      });
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+}
+
+module.exports = Auth;

backend/src/services/email/htmlTemplates/addressVerification/emailAddressVerification.html

@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+      .email-container {
+        max-width: 600px;
+        margin: auto;
+        background-color: #ffffff;
+        border: 1px solid #e2e8f0;
+        border-radius: 4px;
+        overflow: hidden;
+      }
+      .email-header {
+        background-color: #3498db;
+        color: #fff;
+        padding: 16px;
+        text-align: center;
+      }
+      .email-body {
+        padding: 16px;
+      }
+      .email-footer {
+        padding: 16px;
+        background-color: #f7fafc;
+        text-align: center;
+        color: #4a5568;
+        font-size: 14px;
+      }
+      .link-primary {
+        color: #3498db;
+        text-decoration: none;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="email-container">
+      <div class="email-header">Verify your email for {appTitle}!</div>
+      <div class="email-body">
+        <p>Hello,</p>
+        <p>Follow this link to verify your email address.</p>
+        <p>
+          If you didn't ask to verify this address, you can ignore this email.
+        </p>
+        <p><a href="{signupUrl}" class="link-primary">{signupUrl}</a></p>
+      </div>
+      <div class="email-footer">
+        Thanks,<br />
+        The {appTitle} Team
+      </div>
+    </div>
+  </body>
+</html>

backend/src/services/email/htmlTemplates/invitation/invitationTemplate.html

@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+      .email-container {
+        max-width: 600px;
+        margin: auto;
+        background-color: #ffffff;
+        border: 1px solid #e2e8f0;
+        border-radius: 4px;
+        overflow: hidden;
+      }
+      .email-header {
+        background-color: #3498db;
+        color: #fff;
+        padding: 16px;
+        text-align: center;
+      }
+      .email-body {
+        padding: 16px;
+      }
+      .email-footer {
+        padding: 16px;
+        background-color: #f7fafc;
+        text-align: center;
+        color: #4a5568;
+        font-size: 14px;
+      }
+      .btn-primary {
+        background-color: #3498db;
+        color: #fff !important;
+        padding: 8px 16px;
+        border-radius: 4px;
+        text-decoration: none;
+        display: inline-block;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="email-container">
+      <div class="email-header">Welcome to {appTitle}!</div>
+      <div class="email-body">
+        <p>Hello,</p>
+        <p>
+          You've been invited to join {appTitle}. Please click the button below
+          to set up your account.
+        </p>
+        <a href="{signupUrl}" class="btn-primary">Set up account</a>
+      </div>
+      <div class="email-footer">
+        Thanks,<br />
+        The {appTitle} Team
+      </div>
+    </div>
+  </body>
+</html>

backend/src/services/email/htmlTemplates/passwordReset/passwordResetEmail.html

@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+      .email-container {
+        max-width: 600px;
+        margin: auto;
+        background-color: #ffffff;
+        border: 1px solid #e2e8f0;
+        border-radius: 4px;
+        overflow: hidden;
+      }
+      .email-header {
+        background-color: #3498db;
+        color: #fff;
+        padding: 16px;
+        text-align: center;
+      }
+      .email-body {
+        padding: 16px;
+      }
+      .email-footer {
+        padding: 16px;
+        background-color: #f7fafc;
+        text-align: center;
+        color: #4a5568;
+        font-size: 14px;
+      }
+      .link-primary {
+        color: #3498db;
+        text-decoration: none;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="email-container">
+      <div class="email-header">Reset your password for {appTitle}</div>
+      <div class="email-body">
+        <p>Hello,</p>
+        <p>
+          Follow this link to reset your {appTitle} password for your
+          {accountName} account.
+        </p>
+        <p><a href="{resetUrl}" class="link-primary">{resetUrl}</a></p>
+        <p>
+          If you didn't ask to reset your password, you can ignore this email.
+        </p>
+      </div>
+      <div class="email-footer">
+        Thanks,<br />
+        The {appTitle} Team
+      </div>
+    </div>
+  </body>
+</html>

backend/src/services/email/index.js

@@ -0,0 +1,41 @@
+const config = require('../../config');
+const assert = require('assert');
+const nodemailer = require('nodemailer');
+
+module.exports = class EmailSender {
+  constructor(email) {
+    this.email = email;
+  }
+
+  async send() {
+    assert(this.email, 'email is required');
+    assert(this.email.to, 'email.to is required');
+    assert(this.email.subject, 'email.subject is required');
+    assert(this.email.html, 'email.html is required');
+
+    const htmlContent = await this.email.html();
+
+    const transporter = nodemailer.createTransport(this.transportConfig);
+
+    const mailOptions = {
+      from: this.from,
+      to: this.email.to,
+      subject: this.email.subject,
+      html: htmlContent,
+    };
+
+    return transporter.sendMail(mailOptions);
+  }
+
+  static get isConfigured() {
+    return !!config.email?.auth?.pass && !!config.email?.auth?.user;
+  }
+
+  get transportConfig() {
+    return config.email;
+  }
+
+  get from() {
+    return config.email.from;
+  }
+};

backend/src/services/email/list/addressVerification.js

@@ -0,0 +1,41 @@
+const { getNotification } = require('../../notifications/helpers');
+const fs = require('fs').promises;
+const path = require('path');
+
+module.exports = class EmailAddressVerificationEmail {
+  constructor(to, link) {
+    this.to = to;
+    this.link = link;
+  }
+
+  get subject() {
+    return getNotification(
+      'emails.emailAddressVerification.subject',
+      getNotification('app.title'),
+    );
+  }
+
+  async html() {
+    try {
+      const templatePath = path.join(
+        __dirname,
+        '../../email/htmlTemplates/addressVerification/emailAddressVerification.html',
+      );
+
+      const template = await fs.readFile(templatePath, 'utf8');
+
+      const appTitle = getNotification('app.title');
+      const signupUrl = this.link;
+
+      let html = template
+        .replace(/{appTitle}/g, appTitle)
+        .replace(/{signupUrl}/g, signupUrl)
+        .replace(/{to}/g, this.to);
+
+      return html;
+    } catch (error) {
+      console.error('Error generating invitation email HTML:', error);
+      throw error;
+    }
+  }
+};

backend/src/services/email/list/invitation.js

@@ -0,0 +1,41 @@
+const fs = require('fs').promises;
+const path = require('path');
+const { getNotification } = require('../../notifications/helpers');
+
+module.exports = class InvitationEmail {
+  constructor(to, host) {
+    this.to = to;
+    this.host = host;
+  }
+
+  get subject() {
+    return getNotification(
+      'emails.invitation.subject',
+      getNotification('app.title'),
+    );
+  }
+
+  async html() {
+    try {
+      const templatePath = path.join(
+        __dirname,
+        '../../email/htmlTemplates/invitation/invitationTemplate.html',
+      );
+
+      const template = await fs.readFile(templatePath, 'utf8');
+
+      const appTitle = getNotification('app.title');
+      const signupUrl = `${this.host}&invitation=true`;
+
+      let html = template
+        .replace(/{appTitle}/g, appTitle)
+        .replace(/{signupUrl}/g, signupUrl)
+        .replace(/{to}/g, this.to);
+
+      return html;
+    } catch (error) {
+      console.error('Error generating invitation email HTML:', error);
+      throw error;
+    }
+  }
+};

backend/src/services/email/list/passwordReset.js

@@ -0,0 +1,42 @@
+const { getNotification } = require('../../notifications/helpers');
+const path = require('path');
+const { promises: fs } = require('fs');
+
+module.exports = class PasswordResetEmail {
+  constructor(to, link) {
+    this.to = to;
+    this.link = link;
+  }
+
+  get subject() {
+    return getNotification(
+      'emails.passwordReset.subject',
+      getNotification('app.title'),
+    );
+  }
+
+  async html() {
+    try {
+      const templatePath = path.join(
+        __dirname,
+        '../../email/htmlTemplates/passwordReset/passwordResetEmail.html',
+      );
+
+      const template = await fs.readFile(templatePath, 'utf8');
+
+      const appTitle = getNotification('app.title');
+      const resetUrl = this.link;
+      const accountName = this.to;
+
+      let html = template
+        .replace(/{appTitle}/g, appTitle)
+        .replace(/{resetUrl}/g, resetUrl)
+        .replace(/{accountName}/g, accountName);
+
+      return html;
+    } catch (error) {
+      console.error('Error generating invitation email HTML:', error);
+      throw error;
+    }
+  }
+};

backend/src/services/file.js

@@ -0,0 +1,202 @@
+const formidable = require('formidable');
+const fs = require('fs');
+const config = require('../config');
+const path = require('path');
+const { format } = require('util');
+
+const ensureDirectoryExistence = (filePath) => {
+  const dirname = path.dirname(filePath);
+
+  if (fs.existsSync(dirname)) {
+    return true;
+  }
+
+  ensureDirectoryExistence(dirname);
+  fs.mkdirSync(dirname);
+};
+
+const uploadLocal = (
+  folder,
+  validations = {
+    entity: null,
+    maxFileSize: null,
+    folderIncludesAuthenticationUid: false,
+  },
+) => {
+  return (req, res) => {
+    if (!req.currentUser) {
+      res.sendStatus(403);
+      return;
+    }
+
+    if (validations.entity) {
+      res.sendStatus(403);
+      return;
+    }
+
+    if (validations.folderIncludesAuthenticationUid) {
+      folder = folder.replace(':userId', req.currentUser.authenticationUid);
+      if (
+        !req.currentUser.authenticationUid ||
+        !folder.includes(req.currentUser.authenticationUid)
+      ) {
+        res.sendStatus(403);
+        return;
+      }
+    }
+
+    const form = new formidable.IncomingForm();
+    form.uploadDir = config.uploadDir;
+
+    if (validations && validations.maxFileSize) {
+      form.maxFileSize = validations.maxFileSize;
+    }
+
+    form.parse(req, function (err, fields, files) {
+      const filename = String(fields.filename);
+      const fileTempUrl = files.file.path;
+
+      if (!filename) {
+        fs.unlinkSync(fileTempUrl);
+        res.sendStatus(500);
+        return;
+      }
+
+      const privateUrl = path.join(form.uploadDir, folder, filename);
+      ensureDirectoryExistence(privateUrl);
+      fs.renameSync(fileTempUrl, privateUrl);
+      res.sendStatus(200);
+    });
+
+    form.on('error', function (err) {
+      res.status(500).send(err);
+    });
+  };
+};
+
+const downloadLocal = async (req, res) => {
+  const privateUrl = req.query.privateUrl;
+  if (!privateUrl) {
+    return res.sendStatus(404);
+  }
+  res.download(path.join(config.uploadDir, privateUrl));
+};
+
+const initGCloud = () => {
+  const processFile = require('../middlewares/upload');
+  const { Storage } = require('@google-cloud/storage');
+
+  const crypto = require('crypto');
+  const hash = config.gcloud.hash;
+
+  const privateKey = process.env.GC_PRIVATE_KEY.replace(/\\\n/g, '\n');
+
+  const storage = new Storage({
+    projectId: process.env.GC_PROJECT_ID,
+    credentials: {
+      client_email: process.env.GC_CLIENT_EMAIL,
+      private_key: privateKey,
+    },
+  });
+
+  const bucket = storage.bucket(config.gcloud.bucket);
+  return { hash, bucket, processFile };
+};
+
+const uploadGCloud = async (folder, req, res) => {
+  try {
+    const { hash, bucket, processFile } = initGCloud();
+    await processFile(req, res);
+    let buffer = await req.file.buffer;
+    let filename = await req.body.filename;
+
+    if (!req.file) {
+      return res.status(400).send({ message: 'Please upload a file!' });
+    }
+
+    let path = `${hash}/${folder}/${filename}`;
+    let blob = bucket.file(path);
+
+    console.log(path);
+
+    const blobStream = blob.createWriteStream({
+      resumable: false,
+    });
+
+    blobStream.on('error', (err) => {
+      console.log('Upload error');
+      console.log(err.message);
+      res.status(500).send({ message: err.message });
+    });
+
+    console.log(`https://storage.googleapis.com/${bucket.name}/${blob.name}`);
+
+    blobStream.on('finish', async (data) => {
+      const publicUrl = format(
+        `https://storage.googleapis.com/${bucket.name}/${blob.name}`,
+      );
+
+      res.status(200).send({
+        message: 'Uploaded the file successfully: ' + path,
+        url: publicUrl,
+      });
+    });
+
+    blobStream.end(buffer);
+  } catch (err) {
+    console.log(err);
+
+    res.status(500).send({
+      message: `Could not upload the file. ${err}`,
+    });
+  }
+};
+
+const downloadGCloud = async (req, res) => {
+  try {
+    const { hash, bucket, processFile } = initGCloud();
+
+    const privateUrl = await req.query.privateUrl;
+    const filePath = `${hash}/${privateUrl}`;
+    const file = bucket.file(filePath);
+    const fileExists = await file.exists();
+
+    if (fileExists[0]) {
+      const stream = file.createReadStream();
+      stream.pipe(res);
+    } else {
+      res.status(404).send({
+        message: 'Could not download the file. ' + err,
+      });
+    }
+  } catch (err) {
+    res.status(404).send({
+      message: 'Could not download the file. ' + err,
+    });
+  }
+};
+
+const deleteGCloud = async (privateUrl) => {
+  try {
+    const { hash, bucket, processFile } = initGCloud();
+    const filePath = `${hash}/${privateUrl}`;
+
+    const file = bucket.file(filePath);
+    const fileExists = await file.exists();
+
+    if (fileExists[0]) {
+      file.delete();
+    }
+  } catch (err) {
+    console.log(`Cannot find the file ${privateUrl}`);
+  }
+};
+
+module.exports = {
+  initGCloud,
+  uploadLocal,
+  downloadLocal,
+  deleteGCloud,
+  uploadGCloud,
+  downloadGCloud,
+};

backend/src/services/notifications/errors/forbidden.js

@@ -0,0 +1,16 @@
+const { getNotification, isNotification } = require('../helpers');
+
+module.exports = class ForbiddenError extends Error {
+  constructor(messageCode) {
+    let message;
+
+    if (messageCode && isNotification(messageCode)) {
+      message = getNotification(messageCode);
+    }
+
+    message = message || getNotification('errors.forbidden.message');
+
+    super(message);
+    this.code = 403;
+  }
+};

backend/src/services/notifications/errors/validation.js

@@ -0,0 +1,16 @@
+const { getNotification, isNotification } = require('../helpers');
+
+module.exports = class ValidationError extends Error {
+  constructor(messageCode) {
+    let message;
+
+    if (messageCode && isNotification(messageCode)) {
+      message = getNotification(messageCode);
+    }
+
+    message = message || getNotification('errors.validation.message');
+
+    super(message);
+    this.code = 400;
+  }
+};

backend/src/services/notifications/helpers.js

@@ -0,0 +1,30 @@
+const _get = require('lodash/get');
+const errors = require('./list');
+
+function format(message, args) {
+  if (!message) {
+    return null;
+  }
+
+  return message.replace(/{(\d+)}/g, function (match, number) {
+    return typeof args[number] != 'undefined' ? args[number] : match;
+  });
+}
+
+const isNotification = (key) => {
+  const message = _get(errors, key);
+  return !!message;
+};
+
+const getNotification = (key, ...args) => {
+  const message = _get(errors, key);
+
+  if (!message) {
+    return key;
+  }
+
+  return format(message, args);
+};
+
+exports.getNotification = getNotification;
+exports.isNotification = isNotification;

backend/src/services/notifications/list.js

@@ -0,0 +1,100 @@
+const errors = {
+  app: {
+    title: 'https://iphonekarshenas.ir',
+  },
+
+  auth: {
+    userDisabled: 'Your account is disabled',
+    forbidden: 'Forbidden',
+    unauthorized: 'Unauthorized',
+    userNotFound: `Sorry, we don't recognize your credentials`,
+    wrongPassword: `Sorry, we don't recognize your credentials`,
+    weakPassword: 'This password is too weak',
+    emailAlreadyInUse: 'Email is already in use',
+    invalidEmail: 'Please provide a valid email',
+    passwordReset: {
+      invalidToken: 'Password reset link is invalid or has expired',
+      error: `Email not recognized`,
+    },
+    passwordUpdate: {
+      samePassword: `You can't use the same password. Please create new password`,
+    },
+    userNotVerified: `Sorry, your email has not been verified yet`,
+    emailAddressVerificationEmail: {
+      invalidToken: 'Email verification link is invalid or has expired',
+      error: `Email not recognized`,
+    },
+  },
+
+  iam: {
+    errors: {
+      userAlreadyExists: 'User with this email already exists',
+      userNotFound: 'User not found',
+      disablingHimself: `You can't disable yourself`,
+      revokingOwnPermission: `You can't revoke your own owner permission`,
+      deletingHimself: `You can't delete yourself`,
+      emailRequired: 'Email is required',
+    },
+  },
+
+  importer: {
+    errors: {
+      invalidFileEmpty: 'The file is empty',
+      invalidFileExcel: 'Only excel (.xlsx) files are allowed',
+      invalidFileUpload:
+        'Invalid file. Make sure you are using the last version of the template.',
+      importHashRequired: 'Import hash is required',
+      importHashExistent: 'Data has already been imported',
+      userEmailMissing: 'Some items in the CSV do not have an email',
+    },
+  },
+
+  errors: {
+    forbidden: {
+      message: 'Forbidden',
+    },
+    validation: {
+      message: 'An error occurred',
+    },
+    searchQueryRequired: {
+      message: 'Search query is required',
+    },
+  },
+
+  emails: {
+    invitation: {
+      subject: `You've been invited to {0}`,
+      body: `    
+        <p>Hello,</p>
+        <p>You've been invited to {0} set password for your {1} account.</p>
+        <p><a href='{2}'>{2}</a></p>
+        <p>Thanks,</p>
+        <p>Your {0} team</p>
+      `,
+    },
+    emailAddressVerification: {
+      subject: `Verify your email for {0}`,
+      body: `
+        <p>Hello,</p>
+        <p>Follow this link to verify your email address.</p>
+        <p><a href='{0}'>{0}</a></p>
+        <p>If you didn't ask to verify this address, you can ignore this email.</p>
+        <p>Thanks,</p>
+        <p>Your {1} team</p>
+      `,
+    },
+    passwordReset: {
+      subject: `Reset your password for {0}`,
+      body: `
+        <p>Hello,</p>
+        <p>Follow this link to reset your {0} password for your {1} account.</p>
+        <p><a href='{2}'>{2}</a></p>
+        <p>If you didn't ask to reset your password, you can ignore this email.</p>
+        <p>Thanks,</p>
+        <p>Your {0} team</p>
+      `,
+    },
+  },
+};
+
+module.exports = errors;

backend/src/services/openai.js

@@ -0,0 +1,22 @@
+const axios = require('axios');
+const { v4: uuid } = require('uuid');
+const RoleService = require('./roles');
+const config = require('../config');
+
+module.exports = class OpenAiService {
+  static async getWidget(payload, userId, roleId) {
+    const response = await axios.post(
+      `${config.flHost}/${config.project_uuid}/project_customization_widgets.json`,
+      payload,
+    );
+
+    if (response.status >= 200 && response.status < 300) {
+      const { widget_id } = await response.data;
+      await RoleService.addRoleInfo(roleId, userId, 'widgets', widget_id);
+      return widget_id;
+    } else {
+      console.error('=======error=======', response.data);
+      return { value: null, error: response.data };
+    }
+  }
+};

backend/src/services/search.js

@@ -0,0 +1,129 @@
+const db = require('../db/models');
+const ValidationError = require('./notifications/errors/validation');
+
+const Sequelize = db.Sequelize;
+const Op = Sequelize.Op;
+
+/**
+ * @param {string} permission
+ * @param {object} currentUser
+ */
+async function checkPermissions(permission, currentUser) {
+  if (!currentUser) {
+    throw new ValidationError('auth.unauthorized');
+  }
+
+  const userPermission = currentUser.custom_permissions.find(
+    (cp) => cp.name === permission,
+  );
+
+  if (userPermission) {
+    return true;
+  }
+
+  try {
+    if (!currentUser.app_role) {
+      throw new ValidationError('auth.forbidden');
+    }
+
+    const permissions = await currentUser.app_role.getPermissions();
+
+    return !!permissions.find((p) => p.name === permission);
+  } catch (e) {
+    throw e;
+  }
+}
+
+module.exports = class SearchService {
+  static async search(searchQuery, currentUser) {
+    try {
+      if (!searchQuery) {
+        throw new ValidationError('iam.errors.searchQueryRequired');
+      }
+      const tableColumns = {
+        users: ['firstName', 'lastName', 'phoneNumber', 'email'],
+      };
+      const columnsInt = {};
+
+      let allFoundRecords = [];
+
+      for (const tableName in tableColumns) {
+        if (tableColumns.hasOwnProperty(tableName)) {
+          const attributesToSearch = tableColumns[tableName];
+          const attributesIntToSearch = columnsInt[tableName] || [];
+          const whereCondition = {
+            [Op.or]: [
+              ...attributesToSearch.map((attribute) => ({
+                [attribute]: {
+                  [Op.iLike]: `%${searchQuery}%`,
+                },
+              })),
+              ...attributesIntToSearch.map((attribute) =>
+                Sequelize.where(
+                  Sequelize.cast(
+                    Sequelize.col(`${tableName}.${attribute}`),
+                    'varchar',
+                  ),
+                  { [Op.iLike]: `%${searchQuery}%` },
+                ),
+              ),
+            ],
+          };
+
+          const hasPermission = await checkPermissions(
+            `READ_${tableName.toUpperCase()}`,
+            currentUser,
+          );
+          if (!hasPermission) {
+            continue;
+          }
+
+          const foundRecords = await db[tableName].findAll({
+            where: whereCondition,
+            attributes: [
+              ...tableColumns[tableName],
+              'id',
+              ...attributesIntToSearch,
+            ],
+          });
+
+          const modifiedRecords = foundRecords.map((record) => {
+            const matchAttribute = [];
+
+            for (const attribute of attributesToSearch) {
+              if (
+                record[attribute]
+                  ?.toLowerCase()
+                  ?.includes(searchQuery.toLowerCase())
+              ) {
+                matchAttribute.push(attribute);
+              }
+            }
+
+            for (const attribute of attributesIntToSearch) {
+              const castedValue = String(record[attribute]);
+              if (
+                castedValue &&
+                castedValue.toLowerCase().includes(searchQuery.toLowerCase())
+              ) {
+                matchAttribute.push(attribute);
+              }
+            }
+
+            return {
+              ...record.get(),
+              matchAttribute,
+              tableName,
+            };
+          });
+
+          allFoundRecords = allFoundRecords.concat(modifiedRecords);
+        }
+      }
+
+      return allFoundRecords;
+    } catch (error) {
+      throw error;
+    }
+  }
+};

backend/src/services/users.js

@@ -0,0 +1,152 @@
+const db = require('../db/models');
+const UsersDBApi = require('../db/api/users');
+const processFile = require('../middlewares/upload');
+const ValidationError = require('./notifications/errors/validation');
+const csv = require('csv-parser');
+const axios = require('axios');
+const config = require('../config');
+const stream = require('stream');
+
+const InvitationEmail = require('./email/list/invitation');
+const EmailSender = require('./email');
+const AuthService = require('./auth');
+
+module.exports = class UsersService {
+  static async create(data, currentUser, sendInvitationEmails = true, host) {
+    let transaction = await db.sequelize.transaction();
+
+    let email = data.email;
+    let emailsToInvite = [];
+    try {
+      if (email) {
+        let user = await UsersDBApi.findBy({ email }, { transaction });
+        if (user) {
+          throw new ValidationError('iam.errors.userAlreadyExists');
+        } else {
+          await UsersDBApi.create(
+            { data },
+
+            {
+              currentUser,
+              transaction,
+            },
+          );
+          emailsToInvite.push(email);
+        }
+      } else {
+        throw new ValidationError('iam.errors.emailRequired');
+      }
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+    if (emailsToInvite && emailsToInvite.length) {
+      if (!sendInvitationEmails) return;
+
+      AuthService.sendPasswordResetEmail(email, 'invitation', host);
+    }
+  }
+
+  static async bulkImport(req, res, sendInvitationEmails = true, host) {
+    const transaction = await db.sequelize.transaction();
+    let emailsToInvite = [];
+
+    try {
+      await processFile(req, res);
+      const bufferStream = new stream.PassThrough();
+      const results = [];
+
+      await bufferStream.end(Buffer.from(req.file.buffer, 'utf-8')); // convert Buffer to Stream
+
+      await new Promise((resolve, reject) => {
+        bufferStream
+          .pipe(csv())
+          .on('data', (data) => results.push(data))
+          .on('end', () => {
+            console.log('results csv', results);
+            resolve();
+          })
+          .on('error', (error) => reject(error));
+      });
+
+      const hasAllEmails = results.every((result) => result.email);
+
+      if (!hasAllEmails) {
+        throw new ValidationError('importer.errors.userEmailMissing');
+      }
+
+      await UsersDBApi.bulkImport(results, {
+        transaction,
+        ignoreDuplicates: true,
+        validate: true,
+        currentUser: req.currentUser,
+      });
+
+      emailsToInvite = results.map((result) => result.email);
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+
+    if (emailsToInvite && emailsToInvite.length && !sendInvitationEmails) {
+      emailsToInvite.forEach((email) => {
+        AuthService.sendPasswordResetEmail(email, 'invitation', host);
+      });
+    }
+  }
+
+  static async update(data, id, currentUser) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      let users = await UsersDBApi.findBy({ id }, { transaction });
+
+      if (!users) {
+        throw new ValidationError('iam.errors.userNotFound');
+      }
+
+      const updatedUser = await UsersDBApi.update(
+        id,
+        data,
+
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+      return updatedUser;
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  static async remove(id, currentUser) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      if (currentUser.id === id) {
+        throw new ValidationError('iam.errors.deletingHimself');
+      }
+
+      if (currentUser.app_role?.name !== config.roles.admin) {
+        throw new ValidationError('errors.forbidden.message');
+      }
+
+      await UsersDBApi.remove(id, {
+        currentUser,
+        transaction,
+      });
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+};

frontend/.eslintrc.cjs

@@ -0,0 +1,11 @@
+module.exports = {
+  extends: [
+    'next/core-web-vitals',
+    'eslint-config-prettier',
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+  ],
+  parser: '@typescript-eslint/parser',
+  plugins: ['@typescript-eslint'],
+  root: true,
+};

frontend/.prettierrc

@@ -0,0 +1,10 @@
+{
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "quoteProps": "as-needed",
+  "jsxSingleQuote": true,
+  "bracketSpacing": true,
+  "bracketSameLine": false,
+  "arrowParens": "always"
+}

frontend/Dockerfile

@@ -0,0 +1,19 @@
+FROM node:20.15.1-alpine
+
+# Create app directory
+WORKDIR /usr/src/app
+
+# Install app dependencies
+# A wildcard is used to ensure both package.json AND package-lock.json are copied
+# where available (npm@5+)
+COPY package*.json ./
+
+RUN yarn install
+# If you are building your code for production
+# RUN npm ci --only=production
+
+# Bundle app source
+COPY . .
+
+EXPOSE 3000
+CMD [ "yarn", "dev" ]

frontend/LICENSE-justboil

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2019-current JustBoil.me (https://justboil.me)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

frontend/README.md

@@ -0,0 +1,91 @@
+# https://iphonekarshenas.ir
+
+## This project was generated by Flatlogic Platform.
+
+## Install
+
+`cd` to project's dir and run `npm install`
+
+### Builds
+
+Build are handled by Next.js CLI — [Info](https://nextjs.org/docs/api-reference/cli)
+
+### Hot-reloads for development
+
+```
+npm run dev
+```
+
+### Builds and minifies for production
+
+```
+npm run build
+```
+
+### Exports build for static hosts
+
+```
+npm run export
+```
+
+### Lint
+
+```
+npm run lint
+```
+
+### Format with prettier
+
+```
+npm run format
+```
+
+## Support
+
+For any additional information please refer to [Flatlogic homepage](https://flatlogic.com).
+
+## To start the project with Docker:
+
+### Description:
+
+The project contains the **docker folder** and the `Dockerfile`.
+
+The `Dockerfile` is used to Deploy the project to Google Cloud.
+
+The **docker folder** contains a couple of helper scripts:
+
+- `docker-compose.yml` (all our services: web, backend, db are described here)
+- `start-backend.sh` (starts backend, but only after the database)
+- `wait-for-it.sh` (imported from https://github.com/vishnubob/wait-for-it)
+
+  > To avoid breaking the application, we recommend you don't edit the following files: everything that includes the **docker folder** and `Dokerfile`.
+
+### Run services:
+
+1. Install docker compose (https://docs.docker.com/compose/install/)
+
+2. Move to `docker` folder. All next steps should be done from this folder.
+
+   `cd docker`
+
+3. Make executables from `wait-for-it.sh` and `start-backend.sh`:
+
+   `chmod +x start-backend.sh && chmod +x wait-for-it.sh`
+
+4. Download dependend projects for services.
+
+5. Review the docker-compose.yml file. Make sure that all services have Dockerfiles. Only db service doesn't require a Dockerfile.
+
+6. Make sure you have needed ports (see them in `ports`) available on your local machine.
+
+7. Start services:
+
+   7.1. With an empty database `rm -rf data && docker-compose up`
+
+   7.2. With a stored (from previus runs) database data `docker-compose up`
+
+8. Check http://localhost:3000
+
+9. Stop services:
+
+   9.1. Just press `Ctr+C`

frontend/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.

frontend/next.config.mjs

@@ -0,0 +1,22 @@
+/**
+ * @type {import('next').NextConfig}
+ */
+const output = process.env.NODE_ENV === 'production' ? 'export' : 'standalone';
+const nextConfig = {
+  trailingSlash: true,
+  distDir: 'build',
+  output,
+  basePath: '',
+  swcMinify: false,
+  images: {
+    unoptimized: true,
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: '**',
+      },
+    ],
+  },
+};
+
+export default nextConfig;

frontend/package.json

@@ -0,0 +1,71 @@
+{
+  "private": true,
+  "scripts": {
+    "dev": "cross-env PORT=${FRONT_PORT:-3000} next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "format": "prettier '{components,pages,src,interfaces,hooks}/**/*.{tsx,ts,js}' --write"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.11.3",
+    "@emotion/styled": "^11.11.0",
+    "@mdi/js": "^7.4.47",
+    "@mui/material": "^6.3.0",
+    "@mui/x-data-grid": "^6.19.2",
+    "@reduxjs/toolkit": "^2.1.0",
+    "@tailwindcss/typography": "^0.5.13",
+    "@tinymce/tinymce-react": "^4.3.2",
+    "apexcharts": "^3.45.2",
+    "axios": "^1.6.7",
+    "chart.js": "^4.4.1",
+    "chroma-js": "^2.4.2",
+    "dayjs": "^1.11.10",
+    "file-saver": "^2.0.5",
+    "formik": "^2.4.5",
+    "intro.js": "^7.2.0",
+    "intro.js-react": "^1.0.0",
+    "jsonwebtoken": "^9.0.2",
+    "jwt-decode": "^3.1.2",
+    "lodash": "^4.17.21",
+    "moment": "^2.30.1",
+    "next": "^14.1.0",
+    "numeral": "^2.0.6",
+    "query-string": "^8.1.0",
+    "react": "^19.0.0",
+    "react-apexcharts": "^1.4.1",
+    "react-big-calendar": "^1.10.3",
+    "react-chartjs-2": "^4.3.1",
+    "react-datepicker": "^4.10.0",
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1",
+    "react-dom": "^19.0.0",
+    "react-toastify": "^11.0.2",
+    "react-redux": "^8.0.2",
+    "react-select": "^5.7.0",
+    "react-select-async-paginate": "^0.7.9",
+    "react-switch": "^7.0.0",
+    "swr": "^1.3.0",
+    "uuid": "^9.0.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/forms": "^0.5.7",
+    "@tailwindcss/line-clamp": "^0.4.4",
+    "@types/node": "18.7.16",
+    "@types/numeral": "^2.0.2",
+    "@types/react-big-calendar": "^1.8.8",
+    "@types/react-redux": "^7.1.24",
+    "@typescript-eslint/eslint-plugin": "^5.37.0",
+    "@typescript-eslint/parser": "^5.37.0",
+    "autoprefixer": "^10.4.0",
+    "cross-env": "^7.0.3",
+    "eslint": "^8.23.1",
+    "eslint-config-next": "^13.0.4",
+    "eslint-config-prettier": "^8.5.0",
+    "postcss": "^8.4.4",
+    "postcss-import": "^14.1.0",
+    "prettier": "^3.2.4",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^4.8.3"
+  }
+}

frontend/postcss.config.js

@@ -0,0 +1,9 @@
+/* eslint-env node */
+module.exports = {
+  plugins: {
+    'postcss-import': {},
+    'tailwindcss/nesting': {},
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

frontend/prettier.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+  semi: false,
+  singleQuote: true,
+  printWidth: 100,
+  trailingComma: 'es5',
+  arrowParens: 'always',
+  tabWidth: 2,
+  useTabs: false,
+  quoteProps: 'as-needed',
+  jsxSingleQuote: false,
+  bracketSpacing: true,
+  bracketSameLine: false,
+};

frontend/public/data-sources/clients.json

@@ -0,0 +1,224 @@
+{
+  "data": [
+    {
+      "id": 19,
+      "avatar": "https://avatars.dicebear.com/v2/gridy/Howell-Hand.svg",
+      "login": "percy64",
+      "name": "Howell Hand",
+      "company": "Kiehn-Green",
+      "city": "Emelyside",
+      "progress": 70,
+      "created": "Mar 3, 2022",
+      "created_mm_dd_yyyy": "03-03-2022"
+    },
+    {
+      "id": 11,
+      "avatar": "https://avatars.dicebear.com/v2/gridy/Hope-Howe.svg",
+      "login": "dare.concepcion",
+      "name": "Hope Howe",
+      "company": "Nolan Inc",
+      "city": "Paristown",
+      "progress": 68,
+      "created": "Dec 1, 2022",
+      "created_mm_dd_yyyy": "12-01-2022"
+    },
+    {
+      "id": 32,
+      "avatar": "https://avatars.dicebear.com/v2/gridy/Nelson-Jerde.svg",
+      "login": "geovanni.kessler",
+      "name": "Nelson Jerde",
+      "company": "Nitzsche LLC",
+      "city": "Jailynbury",
+      "progress": 49,
+      "created": "May 18, 2022",
+      "created_mm_dd_yyyy": "05-18-2022"
+    },
+    {
+      "id": 22,
+      "avatar": "https://avatars.dicebear.com/v2/gridy/Kim-Weimann.svg",
+      "login": "macejkovic.dashawn",
+      "name": "Kim Weimann",
+      "company": "Brown-Lueilwitz",
+      "city": "New Emie",
+      "progress": 38,
+      "created": "May 4, 2022",
+      "created_mm_dd_yyyy": "05-04-2022"
+    },
+    {
+      "id": 34,
+      "avatar": "https://avatars.dicebear.com/v2/gridy/Justice-OReilly.svg",
+      "login": "hilpert.leora",
+      "name": "Justice O'Reilly",
+      "company": "Lakin-Muller",
+      "city": "New Kacie",
+      "progress": 38,
+      "created": "Mar 27, 2022",
+      "created_mm_dd_yyyy": "03-27-2022"
+    },
+    {
+      "id": 48,
+      "avatar": "https://avatars.dicebear.com/v2/gridy/Adrienne-Mayer-III.svg",
+      "login": "ferry.sophia",
+      "name": "Adrienne Mayer III",
+      "company": "Kozey, McLaughlin and Kuhn",
+      "city": "Howardbury",
+      "progress": 39,
+      "created": "Mar 29, 2022",
+      "created_mm_dd_yyyy": "03-29-2022"
+    },
+    {
+      "id": 20,
+      "avatar": "https://avatars.dicebear.com/v2/gridy/Mr.-Julien-Ebert.svg",
+      "login": "gokuneva",
+      "name": "Mr. Julien Ebert",
+      "company": "Cormier LLC",
+      "city": "South Serenaburgh",
+      "progress": 29,
+      "created": "Jun 25, 2022",
+      "created_mm_dd_yyyy": "06-25-2022"
+    },
+    {
+      "id": 47,
+      "avatar": "https://avatars.dicebear.com/v2/gridy/Lenna-Smitham.svg",
+      "login": "paolo.walter",
+      "name": "Lenna Smitham",
+      "company": "King Inc",
+      "city": "McCulloughfort",
+      "progress": 59,
+      "created": "Oct 8, 2022",
+      "created_mm_dd_yyyy": "10-08-2022"
+    },
+    {
+      "id": 24,
+      "avatar": "https://avatars.dicebear.com/v2/gridy/Travis-Davis.svg",
+      "login": "lkessler",
+      "name": "Travis Davis",
+      "company": "Leannon and Sons",
+      "city": "West Frankton",
+      "progress": 52,
+      "created": "Oct 20, 2022",
+      "created_mm_dd_yyyy": "10-20-2022"
+    },
+    {
+      "id": 49,
+      "avatar": "https://avatars.dicebear.com/v2/gridy/Prof.-Esteban-Steuber.svg",
+      "login": "shana.lang",
+      "name": "Prof. Esteban Steuber",
+      "company": "Langosh-Ernser",
+      "city": "East Sedrick",
+      "progress": 34,
+      "created": "May 16, 2022",
+      "created_mm_dd_yyyy": "05-16-2022"
+    },
+    {
+      "id": 36,
+      "avatar": "https://avatars.dicebear.com/v2/gridy/Russell-Goodwin-V.svg",
+      "login": "jewel07",
+      "name": "Russell Goodwin V",
+      "company": "Nolan-Stracke",
+      "city": "Williamsonmouth",
+      "progress": 55,
+      "created": "Apr 22, 2022",
+      "created_mm_dd_yyyy": "04-22-2022"
+    },
+    {
+      "id": 33,
+      "avatar": "https://avatars.dicebear.com/v2/gridy/Ms.-Cassidy-Wiegand-DVM.svg",
+      "login": "burnice.okuneva",
+      "name": "Ms. Cassidy Wiegand DVM",
+      "company": "Kuhlman-Hahn",
+      "city": "New Ruthiehaven",
+      "progress": 76,
+      "created": "Sep 16, 2022",
+      "created_mm_dd_yyyy": "09-16-2022"
+    },
+    {
+      "id": 44,
+      "avatar": "https://avatars.dicebear.com/v2/gridy/Mr.-Watson-Brakus-PhD.svg",
+      "login": "oconnell.juanita",
+      "name": "Mr. Watson Brakus PhD",
+      "company": "Osinski, Bins and Kuhn",
+      "city": "Lake Gloria",
+      "progress": 58,
+      "created": "Jun 22, 2022",
+      "created_mm_dd_yyyy": "06-22-2022"
+    },
+    {
+      "id": 46,
+      "avatar": "https://avatars.dicebear.com/v2/gridy/Mr.-Garrison-Friesen-V.svg",
+      "login": "vgutmann",
+      "name": "Mr. Garrison Friesen V",
+      "company": "VonRueden, Rippin and Pfeffer",
+      "city": "Port Cieloport",
+      "progress": 39,
+      "created": "Oct 19, 2022",
+      "created_mm_dd_yyyy": "10-19-2022"
+    },
+    {
+      "id": 14,
+      "avatar": "https://avatars.dicebear.com/v2/gridy/Ms.-Sister-Morar.svg",
+      "login": "veum.lucio",
+      "name": "Ms. Sister Morar",
+      "company": "Gusikowski, Altenwerth and Abbott",
+      "city": "Lake Macville",
+      "progress": 34,
+      "created": "Jun 11, 2022",
+      "created_mm_dd_yyyy": "06-11-2022"
+    },
+    {
+      "id": 40,
+      "avatar": "https://avatars.dicebear.com/v2/gridy/Ms.-Laisha-Reinger.svg",
+      "login": "edietrich",
+      "name": "Ms. Laisha Reinger",
+      "company": "Boehm PLC",
+      "city": "West Alexiemouth",
+      "progress": 73,
+      "created": "Nov 2, 2022",
+      "created_mm_dd_yyyy": "11-02-2022"
+    },
+    {
+      "id": 5,
+      "avatar": "https://avatars.dicebear.com/v2/gridy/Cameron-Lind.svg",
+      "login": "mose44",
+      "name": "Cameron Lind",
+      "company": "Tremblay, Padberg and Pouros",
+      "city": "Naderview",
+      "progress": 59,
+      "created": "Sep 14, 2022",
+      "created_mm_dd_yyyy": "09-14-2022"
+    },
+    {
+      "id": 43,
+      "avatar": "https://avatars.dicebear.com/v2/gridy/Sarai-Little.svg",
+      "login": "rau.abelardo",
+      "name": "Sarai Little",
+      "company": "Deckow LLC",
+      "city": "Jeanieborough",
+      "progress": 49,
+      "created": "Jun 13, 2022",
+      "created_mm_dd_yyyy": "06-13-2022"
+    },
+    {
+      "id": 2,
+      "avatar": "https://avatars.dicebear.com/v2/gridy/Shyann-Kautzer.svg",
+      "login": "imurazik",
+      "name": "Shyann Kautzer",
+      "company": "Osinski, Boehm and Kihn",
+      "city": "New Alvera",
+      "progress": 41,
+      "created": "Feb 15, 2022",
+      "created_mm_dd_yyyy": "02-15-2022"
+    },
+    {
+      "id": 15,
+      "avatar": "https://avatars.dicebear.com/v2/gridy/Lorna-Christiansen.svg",
+      "login": "annalise97",
+      "name": "Lorna Christiansen",
+      "company": "Altenwerth-Friesen",
+      "city": "Port Elbertland",
+      "progress": 36,
+      "created": "Mar 9, 2022",
+      "created_mm_dd_yyyy": "03-09-2022"
+    }
+  ]
+}

frontend/public/data-sources/history.json

@@ -0,0 +1,40 @@
+{
+  "data": [
+    {
+      "id": 1,
+      "amount": 375.53,
+      "account": "45721474",
+      "name": "Home Loan Account",
+      "date": "3 days ago",
+      "type": "deposit",
+      "business": "Turcotte"
+    },
+    {
+      "id": 2,
+      "amount": 470.26,
+      "account": "94486537",
+      "name": "Savings Account",
+      "date": "3 days ago",
+      "type": "payment",
+      "business": "Murazik - Graham"
+    },
+    {
+      "id": 3,
+      "amount": 971.34,
+      "account": "63189893",
+      "name": "Checking Account",
+      "date": "5 days ago",
+      "type": "invoice",
+      "business": "Fahey - Keebler"
+    },
+    {
+      "id": 4,
+      "amount": 374.63,
+      "account": "74828780",
+      "name": "Auto Loan Account",
+      "date": "7 days ago",
+      "type": "withdraw",
+      "business": "Collier - Hintz"
+    }
+  ]
+}

frontend/public/favicon.svg

@@ -0,0 +1,27 @@
+
+<svg width="134" height="110" viewBox="0 0 134 110" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g filter="url(#filter0_d_311_30216)">
+    <circle cx="56.423" cy="43.0949" r="32.3527" fill="#F8F9FF"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M18.8296 52.2405C19.4251 51.6706 19.4251 50.7466 18.8296 50.1766L13.6813 45.2494L18.8296 40.3222C19.4251 39.7523 19.4251 38.8283 18.8296 38.2583C18.2341 37.6884 17.2686 37.6884 16.6731 38.2583L10.4466 44.2175C9.85113 44.7874 9.85113 45.7114 10.4466 46.2814L16.6731 52.2405C17.2686 52.8105 18.2341 52.8105 18.8296 52.2405Z" fill="#02004E"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M95.1704 52.2405C94.5749 51.6706 94.5749 50.7466 95.1704 50.1766L100.319 45.2494L95.1704 40.3222C94.5749 39.7523 94.5749 38.8283 95.1704 38.2583C95.7659 37.6884 96.7314 37.6884 97.3269 38.2583L103.553 44.2175C104.149 44.7874 104.149 45.7114 103.553 46.2814L97.3269 52.2405C96.7314 52.8105 95.7659 52.8105 95.1704 52.2405Z" fill="#02004E"/>
+    <path d="M56.9779 79.2582C74.2516 79.2582 88.3475 66.645 89.1339 49.832C89.1722 49.0134 88.4956 48.3477 87.6654 48.3477H83.7825H79.8996C79.0695 48.3477 78.3965 49.0119 78.3965 49.8314V54.7771C78.3965 57.9182 75.8169 60.4646 72.6348 60.4646H41.321C38.0005 60.4646 35.3087 57.8075 35.3087 54.5298V49.8314C35.3087 49.0119 34.6358 48.3477 33.8057 48.3477H30.1106H26.2903C25.4602 48.3477 24.7836 49.0134 24.8219 49.832C25.6083 66.645 39.7042 79.2582 56.9779 79.2582Z" fill="#BEC8FF"/>
+    <path d="M53.8961 12.128V28.1618C53.8961 29.0051 53.2227 29.6932 52.3921 29.6932H40.1097C36.7872 29.6932 34.0938 32.4279 34.0938 35.8014V40.637C34.0938 41.4804 33.4205 42.1641 32.5899 42.1641H28.8299H25.07C24.2394 42.1641 23.5629 41.4785 23.5948 40.6357C24.2463 23.4509 35.8889 11.3309 52.3912 10.6366C53.2211 10.6016 53.8961 11.2846 53.8961 12.128Z" fill="#FFA70B"/>
+    <path d="M59.4555 12.128V28.1618C59.4555 29.0051 60.1233 29.6932 60.9471 29.6932H73.1303C76.3761 29.6932 79.0266 32.352 79.0956 35.6741V40.637C79.0956 41.4804 79.7635 42.1641 80.5873 42.1641H84.4407H88.2942C89.118 42.1641 89.789 41.4785 89.7567 40.6357C89.0979 23.4507 77.3285 11.3306 60.948 10.6365C60.1249 10.6017 59.4555 11.2846 59.4555 12.128Z" fill="#5C7EF1"/>
+    <path d="M39.0547 37.1238C39.0547 35.4655 40.3929 34.1211 42.0437 34.1211H71.9337C73.5845 34.1211 74.9228 35.4655 74.9228 37.1238V52.1375C74.9228 53.7959 73.5845 55.1403 71.9337 55.1403H42.0437C40.3929 55.1403 39.0547 53.7959 39.0547 52.1375V37.1238Z" fill="#02004E"/>
+    <path d="M48.333 49.5859C46.9669 49.5859 45.8594 48.4957 45.8594 47.1508V41.5115C45.8594 40.1666 46.9669 39.0763 48.333 39.0763V39.0763C49.6992 39.0763 50.8067 40.1666 50.8067 41.5115V47.1508C50.8067 48.4957 49.6992 49.5859 48.333 49.5859V49.5859Z" fill="#FFA70B"/>
+    <path d="M51.4297 64.3583C51.4297 62.9952 52.4818 63.1892 53.7797 63.1892H59.2217C60.5196 63.1892 61.3243 62.9952 61.3243 64.3583C61.3243 65.7214 59.2217 68.1254 56.377 68.1254C53.7797 68.1254 51.4297 65.7214 51.4297 64.3583Z" fill="#02004E"/>
+    <path d="M65.0362 49.5859C63.67 49.5859 62.5625 48.4957 62.5625 47.1508V41.5115C62.5625 40.1666 63.67 39.0763 65.0362 39.0763V39.0763C66.4023 39.0763 67.5098 40.1666 67.5098 41.5115V47.1508C67.5098 48.4957 66.4023 49.5859 65.0362 49.5859V49.5859Z" fill="#FFA70B"/>
+  </g>
+  <defs>
+    <filter id="filter0_d_311_30216" x="0" y="0.636719" width="134" height="108.621" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dx="10" dy="10"/>
+      <feGaussianBlur stdDeviation="10"/>
+      <feComposite in2="hardAlpha" operator="out"/>
+      <feColorMatrix type="matrix" values="0 0 0 0 0.00784314 0 0 0 0 0 0 0 0 0 0.305882 0 0 0 0.14 0"/>
+      <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_311_30216"/>
+      <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_311_30216" result="shape"/>
+    </filter>
+  </defs>
+</svg>

frontend/src/colors.ts

@@ -0,0 +1,145 @@
+import type { ColorButtonKey } from './interfaces';
+
+export const gradientBgBase = 'bg-gradient-to-tr';
+export const colorBgBase = 'bg-violet-50/50';
+export const gradientBgPurplePink = `${gradientBgBase} from-purple-400 via-pink-500 to-red-500`;
+export const gradientBgViolet = `${gradientBgBase} ${colorBgBase}`;
+export const gradientBgDark = `${gradientBgBase} from-dark-700 via-dark-900 to-dark-800`;
+export const gradientBgPinkRed = `${gradientBgBase} from-pink-400 via-red-500 to-yellow-500`;
+
+export const colorsBgLight = {
+  white: 'bg-white text-black',
+  light: ' bg-white text-black text-black dark:bg-dark-900 dark:text-white',
+  contrast: 'bg-gray-800 text-white dark:bg-white dark:text-black',
+  success:
+    'bg-emerald-500 border-emerald-500 dark:bg-pavitra-blue dark:border-pavitra-blue text-white',
+  danger: 'bg-red-500 border-red-500 text-white',
+  warning: 'bg-yellow-500 border-yellow-500 text-white',
+  info: 'bg-blue-500 border-blue-500 dark:bg-pavitra-blue dark:border-pavitra-blue text-white',
+};
+
+export const colorsText = {
+  white: 'text-black dark:text-slate-100',
+  light: 'text-gray-700 dark:text-slate-400',
+  contrast: 'dark:text-white',
+  success: 'text-emerald-500',
+  danger: 'text-red-500',
+  warning: 'text-yellow-500',
+  info: 'text-blue-500',
+};
+
+export const colorsOutline = {
+  white: [colorsText.white, 'border-gray-100'].join(' '),
+  light: [colorsText.light, 'border-gray-100'].join(' '),
+  contrast: [colorsText.contrast, 'border-gray-900 dark:border-slate-100'].join(
+    ' ',
+  ),
+  success: [colorsText.success, 'border-emerald-500'].join(' '),
+  danger: [colorsText.danger, 'border-red-500'].join(' '),
+  warning: [colorsText.warning, 'border-yellow-500'].join(' '),
+  info: [colorsText.info, 'border-blue-500'].join(' '),
+};
+
+export const getButtonColor = (
+  color: ColorButtonKey,
+  isOutlined: boolean,
+  hasHover: boolean,
+  isActive = false,
+) => {
+  if (color === 'void') {
+    return '';
+  }
+
+  const colors = {
+    ring: {
+      white: 'ring-gray-200 dark:ring-gray-500',
+      whiteDark: 'ring-gray-200 dark:ring-dark-500',
+      lightDark: 'ring-gray-200 dark:ring-gray-500',
+      contrast: 'ring-gray-300 dark:ring-gray-400',
+      success: 'ring-emerald-300 dark:ring-pavitra-blue',
+      danger: 'ring-red-300 dark:ring-red-700',
+      warning: 'ring-yellow-300 dark:ring-yellow-700',
+      info: 'ring-blue-300 dark:ring-pavitra-blue',
+    },
+    active: {
+      white: 'bg-gray-100',
+      whiteDark: 'bg-gray-100 dark:bg-dark-800',
+      lightDark: 'bg-gray-200 dark:bg-slate-700',
+      contrast: 'bg-gray-700 dark:bg-slate-100',
+      success: 'bg-emerald-700 dark:bg-pavitra-blue',
+      danger: 'bg-red-700 dark:bg-red-600',
+      warning: 'bg-yellow-700 dark:bg-yellow-600',
+      info: 'bg-blue-700  dark:bg-pavitra-blue',
+    },
+    bg: {
+      white: 'bg-white text-black',
+      whiteDark: 'bg-white  text-black  dark:bg-dark-900 dark:text-white',
+      lightDark: 'bg-gray-100 text-black dark:bg-slate-800 dark:text-white',
+      contrast: 'bg-gray-800 text-white dark:bg-white dark:text-black',
+      success: 'bg-emerald-600 dark:bg-pavitra-blue text-white',
+      danger: 'bg-red-600 text-white    dark:bg-red-500 ',
+      warning: 'bg-yellow-600 dark:bg-yellow-500 text-white',
+      info: ' bg-blue-600  dark:bg-pavitra-blue  text-white ',
+    },
+    bgHover: {
+      white: 'hover:bg-gray-100',
+      whiteDark: 'hover:bg-gray-100  hover:dark:bg-dark-800',
+      lightDark: 'hover:bg-gray-200 hover:dark:bg-slate-700',
+      contrast: 'hover:bg-gray-700 hover:dark:bg-slate-100',
+      success:
+        'hover:bg-emerald-700 hover:border-emerald-700 hover:dark:bg-pavitra-blue hover:dark:border-pavitra-blue',
+      danger:
+        'hover:bg-red-700 hover:border-red-700 hover:dark:bg-red-600 hover:dark:border-red-600',
+      warning:
+        'hover:bg-yellow-700 hover:border-yellow-700 hover:dark:bg-yellow-600 hover:dark:border-yellow-600',
+      info: 'hover:bg-blue-700 hover:border-blue-700   hover:dark:bg-pavitra-blue/80 hover:dark:border-pavitra-blue/80',
+    },
+    borders: {
+      white: 'border-white',
+      whiteDark: 'border-white  dark:border-dark-900',
+      lightDark: 'border-gray-100 dark:border-slate-800',
+      contrast: 'border-gray-800 dark:border-white',
+      success: 'border-emerald-600 dark:border-pavitra-blue',
+      danger: 'border-red-600 dark:border-red-500',
+      warning: 'border-yellow-600 dark:border-yellow-500',
+      info: 'border-blue-600  border-blue-600 dark:border-pavitra-blue',
+    },
+    text: {
+      contrast: 'dark:text-slate-100',
+      success: 'text-emerald-600 dark:text-pavitra-blue',
+      danger: 'text-red-600 dark:text-red-500',
+      warning: 'text-yellow-600 dark:text-yellow-500',
+      info: 'text-blue-600  dark:text-pavitra-blue',
+    },
+    outlineHover: {
+      contrast:
+        'hover:bg-gray-800 hover:text-gray-100 hover:dark:bg-slate-100 hover:dark:text-black',
+      success:
+        'hover:bg-emerald-600 hover:text-white hover:text-white hover:dark:text-white hover:dark:border-pavitra-blue',
+      danger:
+        'hover:bg-red-600 hover:text-white hover:text-white hover:dark:text-white hover:dark:border-red-600',
+      warning:
+        'hover:bg-yellow-600 hover:text-white hover:text-white hover:dark:text-white hover:dark:border-yellow-600',
+      info: 'hover:bg-blue-600  hover:bg-blue-600 hover:text-white hover:dark:text-white hover:dark:border-pavitra-blue',
+    },
+  };
+
+  const isOutlinedProcessed =
+    isOutlined && ['white', 'whiteDark', 'lightDark'].indexOf(color) < 0;
+
+  const base = [colors.borders[color], colors.ring[color]];
+
+  if (isActive) {
+    base.push(colors.active[color]);
+  } else {
+    base.push(isOutlinedProcessed ? colors.text[color] : colors.bg[color]);
+  }
+
+  if (hasHover) {
+    base.push(
+      isOutlinedProcessed ? colors.outlineHover[color] : colors.bgHover[color],
+    );
+  }
+
+  return base.join(' ');
+};

frontend/src/components/AsideMenu.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { MenuAsideItem } from '../interfaces';
+import AsideMenuLayer from './AsideMenuLayer';
+import OverlayLayer from './OverlayLayer';
+
+type Props = {
+  menu: MenuAsideItem[];
+  isAsideMobileExpanded: boolean;
+  isAsideLgActive: boolean;
+  onAsideLgClose: () => void;
+};
+
+export default function AsideMenu({
+  isAsideMobileExpanded = false,
+  isAsideLgActive = false,
+  ...props
+}: Props) {
+  return (
+    <>
+      <AsideMenuLayer
+        menu={props.menu}
+        className={`${
+          isAsideMobileExpanded ? 'left-0' : '-left-60 lg:left-0'
+        } ${!isAsideLgActive ? 'lg:hidden xl:flex' : ''}`}
+        onAsideLgCloseClick={props.onAsideLgClose}
+      />
+      {isAsideLgActive && (
+        <OverlayLayer zIndex='z-30' onClick={props.onAsideLgClose} />
+      )}
+    </>
+  );
+}

frontend/src/components/AsideMenuItem.tsx

@@ -0,0 +1,116 @@
+import React, { useEffect, useState } from 'react';
+import { mdiMinus, mdiPlus } from '@mdi/js';
+import BaseIcon from './BaseIcon';
+import Link from 'next/link';
+import { getButtonColor } from '../colors';
+import AsideMenuList from './AsideMenuList';
+import { MenuAsideItem } from '../interfaces';
+import { useAppSelector } from '../stores/hooks';
+import { useRouter } from 'next/router';
+
+type Props = {
+  item: MenuAsideItem;
+  isDropdownList?: boolean;
+};
+
+const AsideMenuItem = ({ item, isDropdownList = false }: Props) => {
+  const [isLinkActive, setIsLinkActive] = useState(false);
+  const [isDropdownActive, setIsDropdownActive] = useState(false);
+
+  const asideMenuItemStyle = useAppSelector(
+    (state) => state.style.asideMenuItemStyle,
+  );
+  const asideMenuDropdownStyle = useAppSelector(
+    (state) => state.style.asideMenuDropdownStyle,
+  );
+  const asideMenuItemActiveStyle = useAppSelector(
+    (state) => state.style.asideMenuItemActiveStyle,
+  );
+  const borders = useAppSelector((state) => state.style.borders);
+  const activeLinkColor = useAppSelector(
+    (state) => state.style.activeLinkColor,
+  );
+  const activeClassAddon =
+    !item.color && isLinkActive ? asideMenuItemActiveStyle : '';
+
+  const { asPath, isReady } = useRouter();
+
+  useEffect(() => {
+    if (item.href && isReady) {
+      const linkPathName = new URL(item.href, location.href).pathname + '/';
+      const activePathname = new URL(asPath, location.href).pathname;
+
+      const activeView = activePathname.split('/')[1];
+      const linkPathNameView = linkPathName.split('/')[1];
+
+      setIsLinkActive(linkPathNameView === activeView);
+    }
+  }, [item.href, isReady, asPath]);
+
+  const asideMenuItemInnerContents = (
+    <>
+      {item.icon && (
+        <BaseIcon
+          path={item.icon}
+          className={`flex-none mx-3 ${activeClassAddon}`}
+          size='18'
+        />
+      )}
+      <span
+        className={`grow text-ellipsis line-clamp-1 ${
+          item.menu ? '' : 'pr-12'
+        } ${activeClassAddon}`}
+      >
+        {item.label}
+      </span>
+      {item.menu && (
+        <BaseIcon
+          path={isDropdownActive ? mdiMinus : mdiPlus}
+          className={`flex-none ${activeClassAddon}`}
+          w='w-12'
+        />
+      )}
+    </>
+  );
+
+  const componentClass = [
+    'flex cursor-pointer py-1.5 ',
+    isDropdownList ? 'px-6 text-sm' : '',
+    item.color
+      ? getButtonColor(item.color, false, true)
+      : `${asideMenuItemStyle}`,
+    isLinkActive
+      ? `text-black ${activeLinkColor} dark:text-white dark:bg-dark-800`
+      : '',
+  ].join(' ');
+
+  return (
+    <li className={'px-3 py-1.5'}>
+      {item.withDevider && <hr className={`${borders} mb-3`} />}
+      {item.href && (
+        <Link href={item.href} target={item.target} className={componentClass}>
+          {asideMenuItemInnerContents}
+        </Link>
+      )}
+      {!item.href && (
+        <div
+          className={componentClass}
+          onClick={() => setIsDropdownActive(!isDropdownActive)}
+        >
+          {asideMenuItemInnerContents}
+        </div>
+      )}
+      {item.menu && (
+        <AsideMenuList
+          menu={item.menu}
+          className={`${asideMenuDropdownStyle} ${
+            isDropdownActive ? 'block dark:bg-slate-800/50' : 'hidden'
+          }`}
+          isDropdownList
+        />
+      )}
+    </li>
+  );
+};
+
+export default AsideMenuItem;

frontend/src/components/AsideMenuLayer.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { mdiLogout, mdiClose } from '@mdi/js';
+import BaseIcon from './BaseIcon';
+import AsideMenuList from './AsideMenuList';
+import { MenuAsideItem } from '../interfaces';
+import { useAppSelector } from '../stores/hooks';
+import Link from 'next/link';
+
+type Props = {
+  menu: MenuAsideItem[];
+  className?: string;
+  onAsideLgCloseClick: () => void;
+};
+
+export default function AsideMenuLayer({
+  menu,
+  className = '',
+  ...props
+}: Props) {
+  const asideStyle = useAppSelector((state) => state.style.asideStyle);
+  const asideBrandStyle = useAppSelector(
+    (state) => state.style.asideBrandStyle,
+  );
+  const asideScrollbarsStyle = useAppSelector(
+    (state) => state.style.asideScrollbarsStyle,
+  );
+  const darkMode = useAppSelector((state) => state.style.darkMode);
+
+  const handleAsideLgCloseClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    props.onAsideLgCloseClick();
+  };
+
+  return (
+    <aside
+      id='asideMenu'
+      className={`${className} zzz lg:py-2 lg:pl-2 w-60 fixed flex z-40 top-0 h-screen transition-position overflow-hidden`}
+    >
+      <div
+        className={`flex-1 flex flex-col overflow-hidden dark:bg-dark-900 ${asideStyle}`}
+      >
+        <div
+          className={`flex flex-row h-14 items-center justify-between ${asideBrandStyle}`}
+        >
+          <div className='text-center flex-1 lg:text-left lg:pl-6 xl:text-center xl:pl-0'>
+            <b className='font-black'>https://iphonekarshenas.ir</b>
+          </div>
+          <button
+            className='hidden lg:inline-block xl:hidden p-3'
+            onClick={handleAsideLgCloseClick}
+          >
+            <BaseIcon path={mdiClose} />
+          </button>
+        </div>
+        <div
+          className={`flex-1 overflow-y-auto overflow-x-hidden ${
+            darkMode ? 'aside-scrollbars-[slate]' : asideScrollbarsStyle
+          }`}
+        >
+          <AsideMenuList menu={menu} />
+        </div>
+      </div>
+    </aside>
+  );
+}

frontend/src/components/AsideMenuList.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { MenuAsideItem } from '../interfaces';
+import AsideMenuItem from './AsideMenuItem';
+import { useAppSelector } from '../stores/hooks';
+
+type Props = {
+  menu: MenuAsideItem[];
+  isDropdownList?: boolean;
+  className?: string;
+};
+
+export default function AsideMenuList({
+  menu,
+  isDropdownList = false,
+  className = '',
+}: Props) {
+  const { currentUser } = useAppSelector((state) => state.auth);
+
+  if (!currentUser) return null;
+
+  return (
+    <ul className={className}>
+      {menu.map((item, index) => {
+        return (
+          <AsideMenuItem
+            key={index}
+            item={item}
+            isDropdownList={isDropdownList}
+          />
+        );
+      })}
+    </ul>
+  );
+}

frontend/src/components/BaseButton.tsx

@@ -0,0 +1,106 @@
+import React from 'react';
+import Link from 'next/link';
+import { getButtonColor } from '../colors';
+import BaseIcon from './BaseIcon';
+import type { ColorButtonKey } from '../interfaces';
+import { useAppSelector } from '../stores/hooks';
+
+type Props = {
+  label?: string;
+  icon?: string;
+  iconSize?: string | number;
+  href?: string;
+  target?: string;
+  type?: string;
+  color?: ColorButtonKey;
+  className?: string;
+  iconClassName?: string;
+  asAnchor?: boolean;
+  small?: boolean;
+  outline?: boolean;
+  active?: boolean;
+  disabled?: boolean;
+  roundedFull?: boolean;
+  onClick?: (e: React.MouseEvent) => void;
+};
+
+export default function BaseButton({
+  label,
+  icon,
+  iconSize,
+  href,
+  target,
+  type,
+  color = 'white',
+  className = '',
+  iconClassName = '',
+  asAnchor = false,
+  small = false,
+  outline = false,
+  active = false,
+  disabled = false,
+  roundedFull = false,
+  onClick,
+}: Props) {
+  const corners = useAppSelector((state) => state.style.corners);
+  const componentClass = [
+    'inline-flex',
+    'justify-center',
+    'items-center',
+    'whitespace-nowrap',
+    'focus:outline-none',
+    'transition-colors',
+    'focus:ring',
+    'duration-150',
+    'border',
+    disabled ? 'cursor-not-allowed' : 'cursor-pointer',
+    roundedFull ? 'rounded-full' : `${corners}`,
+    getButtonColor(color, outline, !disabled, active),
+    className,
+  ];
+
+  if (!label && icon) {
+    componentClass.push('p-1');
+  } else if (small) {
+    componentClass.push('text-sm', roundedFull ? 'px-3 py-1' : 'p-1');
+  } else {
+    componentClass.push('py-2', roundedFull ? 'px-6' : 'px-3');
+  }
+
+  if (disabled) {
+    componentClass.push(outline ? 'opacity-50' : 'opacity-70');
+  }
+
+  const componentClassString = componentClass.join(' ');
+
+  const componentChildren = (
+    <>
+      {icon && (
+        <BaseIcon path={icon} size={iconSize} className={iconClassName} />
+      )}
+      {label && (
+        <span className={small && icon ? 'px-1' : 'px-2'}>{label}</span>
+      )}
+    </>
+  );
+
+  if (href && !disabled) {
+    return (
+      <Link href={href} target={target} className={componentClassString}>
+        {componentChildren}
+      </Link>
+    );
+  }
+
+  return React.createElement(
+    asAnchor ? 'a' : 'button',
+    {
+      className: componentClassString,
+      type: type ?? 'button',
+      target,
+      disabled,
+      onClick,
+    },
+    componentChildren,
+  );
+}

frontend/src/components/BaseButtons.tsx

@@ -0,0 +1,38 @@
+import { Children, cloneElement, ReactElement } from 'react';
+import type { ReactNode } from 'react';
+
+type Props = {
+  type?: string;
+  mb?: string;
+  noWrap?: boolean;
+  classAddon?: string;
+  children: ReactNode;
+  className?: string;
+};
+
+const BaseButtons = ({
+  type = 'justify-end',
+  mb = '-mb-3',
+  classAddon = 'mr-3 last:mr-0 mb-3',
+  noWrap = false,
+  children,
+  className,
+}: Props) => {
+  return (
+    <div
+      className={`flex items-center ${type} ${className} ${mb} ${
+        noWrap ? 'flex-nowrap' : 'flex-wrap'
+      }`}
+    >
+      {Children.map(children, (child: ReactElement) =>
+        child
+          ? cloneElement(child, {
+              className: `${classAddon} ${child.props.className}`,
+            })
+          : null,
+      )}
+    </div>
+  );
+};
+
+export default BaseButtons;

frontend/src/components/BaseDivider.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { useAppSelector } from '../stores/hooks';
+type Props = {
+  navBar?: boolean;
+};
+
+export default function BaseDivider({ navBar = false }: Props) {
+  const borders = useAppSelector((state) => state.style.borders);
+  const classAddon = navBar
+    ? 'hidden lg:block lg:my-0.5 dark:border-dark-700'
+    : 'my-6 -mx-6 dark:border-dark-800';
+
+  return <hr className={`${classAddon} border-t ${borders} `} />;
+}

frontend/src/components/BaseIcon.tsx

@@ -0,0 +1,39 @@
+import React, { ReactNode } from 'react';
+
+type Props = {
+  path: string;
+  w?: string;
+  h?: string;
+  fill?: string;
+  size?: string | number | null;
+  className?: string;
+  children?: ReactNode;
+};
+
+export default function BaseIcon({
+  path,
+  fill,
+  w = 'w-6',
+  h = 'h-6',
+  size = null,
+  className = '',
+  children,
+}: Props) {
+  const iconSize = size ?? 16;
+
+  return (
+    <span
+      className={`inline-flex justify-center items-center ${w} ${h} ${className}`}
+    >
+      <svg
+        viewBox='0 0 24 24'
+        width={iconSize}
+        height={iconSize}
+        className='inline-block'
+      >
+        <path fill={fill || 'currentColor'} d={path} />
+      </svg>
+      {children}
+    </span>
+  );
+}

frontend/src/components/BigCalendar.tsx

@@ -0,0 +1,163 @@
+import React, { useEffect, useMemo, useState, useRef } from 'react';
+import {
+  Calendar,
+  Views,
+  momentLocalizer,
+  SlotInfo,
+  EventProps,
+} from 'react-big-calendar';
+import moment from 'moment';
+import 'react-big-calendar/lib/css/react-big-calendar.css';
+import ListActionsPopover from './ListActionsPopover';
+import Link from 'next/link';
+
+const localizer = momentLocalizer(moment);
+
+type TEvent = {
+  id: string;
+  title: string;
+  start: Date;
+  end: Date;
+};
+
+type Props = {
+  events: any[];
+  handleDeleteAction: (id: string) => void;
+  handleCreateEventAction: (slotInfo: SlotInfo) => void;
+  onDateRangeChange: (range: { start: string; end: string }) => void;
+  entityName: string;
+  showField: string;
+  pathEdit?: string;
+  pathView?: string;
+  'start-data-key': string;
+  'end-data-key': string;
+};
+
+const BigCalendar = ({
+  events,
+  handleDeleteAction,
+  handleCreateEventAction,
+  onDateRangeChange,
+  entityName,
+  showField,
+  pathEdit,
+  pathView,
+  'start-data-key': startDataKey,
+  'end-data-key': endDataKey,
+}: Props) => {
+  const [myEvents, setMyEvents] = useState<TEvent[]>([]);
+  const prevRange = useRef<{ start: string; end: string }>();
+
+  const hasUpdatePermission = true;
+  const hasCreatePermission = true;
+
+  const { defaultDate, scrollToTime } = useMemo(
+    () => ({
+      defaultDate: new Date(),
+      scrollToTime: new Date(1970, 1, 1, 6),
+    }),
+    [],
+  );
+
+  useEffect(() => {
+    if (!events || !Array.isArray(events) || !events?.length) return;
+
+    const formattedEvents = events.map((event) => ({
+      ...event,
+      start: new Date(event[startDataKey]),
+      end: new Date(event[endDataKey]),
+      title: event[showField],
+    }));
+
+    setMyEvents(formattedEvents);
+  }, [endDataKey, events, startDataKey, showField]);
+
+  const onRangeChange = (range: Date[] | { start: Date; end: Date }) => {
+    const newRange = { start: '', end: '' };
+    const format = 'YYYY-MM-DDTHH:mm';
+
+    if (Array.isArray(range)) {
+      newRange.start = moment(range[0]).format(format);
+      newRange.end = moment(range[range.length - 1]).format(format);
+    } else {
+      newRange.start = moment(range.start).format(format);
+      newRange.end = moment(range.end).format(format);
+    }
+
+    if (newRange.start === newRange.end) {
+      newRange.end = moment(newRange.end).add(1, 'days').format(format);
+    }
+
+    // check if the range fits in the previous range
+    if (
+      prevRange.current &&
+      prevRange.current.start <= newRange.start &&
+      prevRange.current.end >= newRange.end
+    ) {
+      return;
+    }
+
+    prevRange.current = { start: newRange.start, end: newRange.end };
+    onDateRangeChange(newRange);
+  };
+
+  return (
+    <div className='h-[600px] p-4'>
+      <Calendar
+        defaultDate={defaultDate}
+        defaultView={Views.MONTH}
+        events={myEvents}
+        localizer={localizer}
+        selectable={hasCreatePermission}
+        onSelectSlot={handleCreateEventAction}
+        onRangeChange={onRangeChange}
+        scrollToTime={scrollToTime}
+        components={{
+          event: (props) => (
+            <MyCustomEvent
+              {...props}
+              onDelete={handleDeleteAction}
+              hasUpdatePermission={hasUpdatePermission}
+              pathEdit={pathEdit}
+              pathView={pathView}
+            />
+          ),
+        }}
+      />
+    </div>
+  );
+};
+
+const MyCustomEvent = (
+  props: {
+    onDelete: (id: string) => void;
+    hasUpdatePermission: boolean;
+    pathEdit?: string;
+    pathView?: string;
+  } & EventProps<TEvent>,
+) => {
+  const { onDelete, hasUpdatePermission, title, event, pathEdit, pathView } =
+    props;
+
+  return (
+    <div className={'flex items-center justify-between relative'}>
+      <Link
+        href={`${pathView}${event.id}`}
+        className={'text-ellipsis overflow-hidden grow'}
+      >
+        {title}
+      </Link>
+      <ListActionsPopover
+        className={'w-2 h-2 text-white'}
+        iconClassName={'text-white w-5'}
+        itemId={event.id}
+        onDelete={onDelete}
+        pathEdit={`${pathEdit}${event.id}`}
+        pathView={`${pathView}${event.id}`}
+        hasUpdatePermission={hasUpdatePermission}
+      />
+    </div>
+  );
+};
+
+export default BigCalendar;

frontend/src/components/CardBox.tsx

@@ -0,0 +1,70 @@
+import React, { ReactNode } from 'react';
+import CardBoxComponentBody from './CardBoxComponentBody';
+import CardBoxComponentFooter from './CardBoxComponentFooter';
+import { useAppSelector } from '../stores/hooks';
+
+type Props = {
+  rounded?: string;
+  flex?: string;
+  className?: string;
+  hasComponentLayout?: boolean;
+  cardBoxClassName?: string;
+  hasTable?: boolean;
+  isHoverable?: boolean;
+  isModal?: boolean;
+  children: ReactNode;
+  footer?: ReactNode;
+  isList?: boolean;
+  id?: string;
+  onClick?: (e: React.MouseEvent) => void;
+};
+
+export default function CardBox({
+  rounded = 'rounded',
+  flex = 'flex-col',
+  className = '',
+  hasComponentLayout = false,
+  cardBoxClassName = '',
+  hasTable = false,
+  isHoverable = false,
+  isList = false,
+  isModal = false,
+  children,
+  footer,
+  id = '',
+  onClick,
+}: Props) {
+  const corners = useAppSelector((state) => state.style.corners);
+  const cardsStyle = useAppSelector((state) => state.style.cardsStyle);
+  const componentClass = [
+    `flex  dark:border-dark-700 dark:bg-dark-900`,
+    className,
+    corners !== 'rounded-full' ? corners : 'rounded-3xl',
+    flex,
+    isList ? '' : `${cardsStyle}`,
+    hasTable ? '' : `border-dark-700  dark:border-dark-700`,
+  ];
+
+  if (isHoverable) {
+    componentClass.push('hover:shadow-lg transition-shadow duration-500');
+  }
+
+  return React.createElement(
+    'div',
+    { className: componentClass.join(' '), onClick },
+    hasComponentLayout ? (
+      children
+    ) : (
+      <>
+        <CardBoxComponentBody
+          id={id}
+          noPadding={hasTable}
+          className={cardBoxClassName}
+        >
+          {children}
+        </CardBoxComponentBody>
+        {footer && <CardBoxComponentFooter>{footer}</CardBoxComponentFooter>}
+      </>
+    ),
+  );
+}

frontend/src/components/CardBoxComponentBody.tsx

@@ -0,0 +1,21 @@
+import React, { ReactNode } from 'react';
+
+type Props = {
+  noPadding?: boolean;
+  className?: string;
+  children?: ReactNode;
+  id?: string;
+};
+
+export default function CardBoxComponentBody({
+  noPadding = false,
+  className,
+  children,
+  id,
+}: Props) {
+  return (
+    <div id={id} className={`flex-1 ${noPadding ? '' : 'p-6'} ${className}`}>
+      {children}
+    </div>
+  );
+}

frontend/src/components/CardBoxComponentEmpty.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const CardBoxComponentEmpty = () => {
+  return (
+    <div className='text-center py-24 text-gray-500 dark:text-slate-400'>
+      <p>Nothing&apos;s here…</p>
+    </div>
+  );
+};
+
+export default CardBoxComponentEmpty;

frontend/src/components/CardBoxComponentFooter.tsx

@@ -0,0 +1,10 @@
+import React, { ReactNode } from 'react';
+
+type Props = {
+  className?: string;
+  children?: ReactNode;
+};
+
+export default function CardBoxComponentFooter({ className, children }: Props) {
+  return <footer className={`p-6 ${className}`}>{children}</footer>;
+}

frontend/src/components/CardBoxComponentTitle.tsx

@@ -0,0 +1,17 @@
+import React, { ReactNode } from 'react';
+
+type Props = {
+  title: string;
+  children?: ReactNode;
+};
+
+const CardBoxComponentTitle = ({ title, children }: Props) => {
+  return (
+    <div className='flex items-center justify-center mb-3'>
+      <h1 className='text-2xl'>{title}</h1>
+      {children}
+    </div>
+  );
+};
+
+export default CardBoxComponentTitle;

frontend/src/components/CardBoxModal.tsx

@@ -0,0 +1,75 @@
+import { mdiClose } from '@mdi/js';
+import { ReactNode } from 'react';
+import type { ColorButtonKey } from '../interfaces';
+import BaseButton from './BaseButton';
+import BaseButtons from './BaseButtons';
+import CardBox from './CardBox';
+import CardBoxComponentTitle from './CardBoxComponentTitle';
+import OverlayLayer from './OverlayLayer';
+
+type Props = {
+  title: string;
+  buttonColor: ColorButtonKey;
+  buttonLabel: string;
+  isActive: boolean;
+  children: ReactNode;
+  onConfirm: () => void;
+  onCancel?: () => void;
+};
+
+const CardBoxModal = ({
+  title,
+  buttonColor,
+  buttonLabel,
+  isActive,
+  children,
+  onConfirm,
+  onCancel,
+}: Props) => {
+  if (!isActive) {
+    return null;
+  }
+
+  const footer = (
+    <BaseButtons>
+      <BaseButton label={buttonLabel} color={buttonColor} onClick={onConfirm} />
+      {!!onCancel && (
+        <BaseButton
+          label='Cancel'
+          color={buttonColor}
+          outline
+          onClick={onCancel}
+        />
+      )}
+    </BaseButtons>
+  );
+
+  return (
+    <OverlayLayer
+      onClick={onCancel}
+      className={onCancel ? 'cursor-pointer' : ''}
+    >
+      <CardBox
+        className={`transition-transform shadow-lg max-h-modal w-11/12 md:w-3/5 lg:w-2/5 xl:w-4/12 z-50`}
+        isModal
+        footer={footer}
+      >
+        <CardBoxComponentTitle title={title}>
+          {!!onCancel && (
+            <BaseButton
+              icon={mdiClose}
+              color='whiteDark'
+              onClick={onCancel}
+              small
+              roundedFull
+            />
+          )}
+        </CardBoxComponentTitle>
+
+        <div className='space-y-3'>{children}</div>
+      </CardBox>
+    </OverlayLayer>
+  );
+};
+
+export default CardBoxModal;

frontend/src/components/ChartLineSample/config.ts

@@ -0,0 +1,54 @@
+export const chartColors = {
+  default: {
+    primary: '#00D1B2',
+    info: '#209CEE',
+    danger: '#FF3860',
+  },
+};
+
+const randomChartData = (n: number) => {
+  const data = [];
+
+  for (let i = 0; i < n; i++) {
+    data.push(Math.round(Math.random() * 200));
+  }
+
+  return data;
+};
+
+const datasetObject = (color: string, points: number) => {
+  return {
+    fill: false,
+    borderColor: chartColors.default[color],
+    borderWidth: 2,
+    borderDash: [],
+    borderDashOffset: 0.0,
+    pointBackgroundColor: chartColors.default[color],
+    pointBorderColor: 'rgba(255,255,255,0)',
+    pointHoverBackgroundColor: chartColors.default[color],
+    pointBorderWidth: 20,
+    pointHoverRadius: 4,
+    pointHoverBorderWidth: 15,
+    pointRadius: 4,
+    data: randomChartData(points),
+    tension: 0.5,
+    cubicInterpolationMode: 'default',
+  };
+};
+
+export const sampleChartData = (points = 9) => {
+  const labels = [];
+
+  for (let i = 1; i <= points; i++) {
+    labels.push(`0${i}`);
+  }
+
+  return {
+    labels,
+    datasets: [
+      datasetObject('primary', points),
+      datasetObject('info', points),
+      datasetObject('danger', points),
+    ],
+  };
+};

frontend/src/components/ChartLineSample/index.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import {
+  Chart,
+  LineElement,
+  PointElement,
+  LineController,
+  LinearScale,
+  CategoryScale,
+  Tooltip,
+} from 'chart.js';
+import { Line } from 'react-chartjs-2';
+
+Chart.register(
+  LineElement,
+  PointElement,
+  LineController,
+  LinearScale,
+  CategoryScale,
+  Tooltip,
+);
+
+const options = {
+  responsive: true,
+  maintainAspectRatio: false,
+  scales: {
+    y: {
+      display: false,
+    },
+    x: {
+      display: true,
+    },
+  },
+  plugins: {
+    legend: {
+      display: false,
+    },
+  },
+};
+
+const ChartLineSample = ({ data }) => {
+  return <Line options={options} data={data} className='h-96' />;
+};
+
+export default ChartLineSample;

frontend/src/components/ClickOutside.tsx

@@ -0,0 +1,29 @@
+import React, { useCallback, useEffect, useRef } from 'react';
+
+const ClickOutside = ({ children, onClickOutside, excludedElements }) => {
+  const wrapperRef = useRef(null);
+
+  const handleClickOutside = useCallback(
+    (event) => {
+      if (
+        wrapperRef.current &&
+        !wrapperRef.current.contains(event.target) &&
+        !excludedElements.some((el) => el.current.contains(event.target))
+      ) {
+        onClickOutside();
+      }
+    },
+    [wrapperRef, onClickOutside, ...excludedElements],
+  );
+
+  useEffect(() => {
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [handleClickOutside]);
+
+  return <div ref={wrapperRef}>{children}</div>;
+};
+
+export default ClickOutside;

frontend/src/components/DataGridMultiSelect.tsx

@@ -0,0 +1,55 @@
+import { GridRenderEditCellParams, useGridApiContext } from '@mui/x-data-grid';
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+import { MenuItem, Select } from '@mui/material';
+
+interface Props {
+  entityName: string;
+}
+
+const DataGridMultiSelect = (props: GridRenderEditCellParams & Props) => {
+  const { id, value, field, entityName } = props;
+  const apiRef = useGridApiContext();
+  const [options, setOptions] = useState([]);
+
+  async function callApi(entityName: string) {
+    const data = await axios(`/${entityName}/autocomplete?limit=100`);
+    return data.data;
+  }
+
+  useEffect(() => {
+    callApi(entityName).then((data) => {
+      setOptions(data);
+    });
+  }, []);
+
+  const handleChange = (event) => {
+    const eventValue = event.target.value; // The new value entered by the user
+
+    const newValue =
+      typeof eventValue === 'string' ? value.split(',') : eventValue;
+
+    apiRef.current.setEditCellValue({
+      id,
+      field,
+      value: newValue.filter((x) => x !== ''),
+    });
+  };
+
+  return (
+    <Select
+      multiple
+      value={value ?? []}
+      onChange={handleChange}
+      sx={{ width: '100%' }}
+    >
+      {options.map((option) => (
+        <MenuItem key={option.id} value={option.id}>
+          {option.label}
+        </MenuItem>
+      ))}
+    </Select>
+  );
+};
+
+export default DataGridMultiSelect;

frontend/src/components/DragDropFilePicker.tsx

@@ -0,0 +1,124 @@
+import React, { ChangeEvent, useEffect, useState } from 'react';
+import BaseIcon from './BaseIcon';
+import { mdiFileUploadOutline } from '@mdi/js';
+
+type Props = {
+  file: File | null;
+  setFile: (file: File) => void;
+  formats?: string;
+};
+
+const DragDropFilePicker = ({ file, setFile, formats = '' }: Props) => {
+  const [highlight, setHighlight] = useState(false);
+  const [errorMessage, setErrorMessage] = useState('');
+  const fileInput = React.createRef<HTMLInputElement>();
+
+  useEffect(() => {
+    if (!file && fileInput) fileInput.current.value = '';
+  }, [file, fileInput]);
+
+  function onFilesAdded(files: FileList | null) {
+    if (files && files[0]) {
+      const newFile = files[0];
+      const fileExtension = newFile.name.split('.').pop().toLowerCase();
+
+      if (formats.includes(fileExtension) || !formats) {
+        setFile(newFile);
+        setErrorMessage('');
+      } else {
+        setErrorMessage(`Allowed formats: ${formats}`);
+      }
+    }
+  }
+
+  function onDragOver(e) {
+    e.preventDefault();
+    setHighlight(true);
+  }
+
+  function onDragLeave() {
+    setHighlight(false);
+  }
+
+  function onDrop(e) {
+    e.preventDefault();
+
+    const files = e.dataTransfer.files;
+
+    onFilesAdded(files);
+    setHighlight(false);
+  }
+
+  const onClear = () => {
+    setFile(null);
+    setErrorMessage('');
+  };
+
+  return (
+    <div
+      className='flex items-center justify-center w-full mb-4'
+      onDragOver={onDragOver}
+      onDragLeave={onDragLeave}
+      onDrop={onDrop}
+    >
+      <label
+        htmlFor='dropzone-file'
+        className={`
+          flex flex-col items-center justify-center w-full h-64
+          border-2 border-dashed rounded-lg cursor-pointer
+          bg-gray-50 dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100
+          dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600
+          ${
+            highlight
+              ? 'border-pavitra-blue dark:border-pavitra-blue'
+              : 'border-pavitra-600'
+          }
+        `}
+      >
+        <div className='flex flex-col items-center justify-center pt-5 pb-6'>
+          <BaseIcon
+            path={mdiFileUploadOutline}
+            size={34}
+            className={`${
+              file ? 'text-pavitra-blue' : 'text-pavitra-600'
+            } mx-auto mb-2`}
+          />
+          {errorMessage && (
+            <p className='mb-2 text-sm text-red-600 dark:text-red-600'>
+              {errorMessage}
+            </p>
+          )}
+          {file ? (
+            <div className='px-4 py-2 max-w-full flex-grow-0 overflow-x-hidden bg-gray-100 dark:bg-slate-800 border-gray-200 dark:border-slate-700 border rounded'>
+              <span className='text-ellipsis max-w-full line-clamp-1'>
+                {file.name}
+              </span>
+            </div>
+          ) : (
+            <>
+              <p className='mb-2 text-sm text-gray-500 dark:text-gray-400'>
+                <span className='font-semibold'>Click to upload</span> or drag
+                and drop
+              </p>
+              {formats && (
+                <p className='text-xs text-gray-500 dark:text-gray-400'>
+                  {formats}
+                </p>
+              )}
+            </>
+          )}
+        </div>
+        <input
+          id='dropzone-file'
+          ref={fileInput}
+          type='file'
+          accept={formats}
+          className='hidden'
+          onChange={(e) => onFilesAdded(e.target.files)}
+        />
+      </label>
+    </div>
+  );
+};
+
+export default DragDropFilePicker;

frontend/src/components/FooterBar.tsx

@@ -0,0 +1,34 @@
+import React, { ReactNode } from 'react';
+import { containerMaxW } from '../config';
+import Logo from './Logo';
+
+type Props = {
+  children?: ReactNode;
+};
+
+export default function FooterBar({ children }: Props) {
+  const year = new Date().getFullYear();
+
+  return (
+    <footer className={`py-2 px-6 ${containerMaxW}`}>
+      <div className='block md:flex items-center justify-between'>
+        <div className='text-center md:text-left mb-6 md:mb-0'>
+          <b>
+            &copy;{year},{` `}
+            <a href='https://flatlogic.com/' rel='noreferrer' target='_blank'>
+              Flatlogic
+            </a>
+            .
+          </b>
+          {` `}
+          {children}
+        </div>
+        <div className='md:py-2'>
+          <a href='https://flatlogic.com/' rel='noreferrer' target='_blank'>
+            <Logo className='w-auto h-8 md:h-6 mx-auto' />
+          </a>
+        </div>
+      </div>
+    </footer>
+  );
+}

frontend/src/components/FormCheckRadio.tsx

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+
+type Props = {
+  children: ReactNode;
+  type: 'checkbox' | 'radio' | 'switch';
+  label?: string;
+  className?: string;
+};
+
+const FormCheckRadio = (props: Props) => {
+  return (
+    <label className={`${props.type} ${props.className}`}>
+      {props.children}
+      <span className='check' />
+      <span className='pl-2'>{props.label}</span>
+    </label>
+  );
+};
+
+export default FormCheckRadio;

frontend/src/components/FormCheckRadioGroup.tsx

@@ -0,0 +1,24 @@
+import { Children, cloneElement, ReactElement, ReactNode } from 'react';
+
+type Props = {
+  isColumn?: boolean;
+  children: ReactNode;
+};
+
+const FormCheckRadioGroup = (props: Props) => {
+  return (
+    <div
+      className={`flex justify-start flex-wrap -mb-3 ${
+        props.isColumn ? 'flex-col' : ''
+      }`}
+    >
+      {Children.map(props.children, (child: ReactElement) =>
+        cloneElement(child, {
+          className: `mr-6 mb-3 last:mr-0 ${child.props.className}`,
+        }),
+      )}
+    </div>
+  );
+};
+
+export default FormCheckRadioGroup;

frontend/src/components/FormField.tsx

@@ -0,0 +1,92 @@
+import { Children, cloneElement, ReactElement, ReactNode } from 'react';
+import BaseIcon from './BaseIcon';
+import { useAppSelector } from '../stores/hooks';
+
+type Props = {
+  label?: string;
+  labelFor?: string;
+  help?: string;
+  icons?: string[] | null[];
+  isBorderless?: boolean;
+  isTransparent?: boolean;
+  hasTextareaHeight?: boolean;
+  children: ReactNode;
+  disabled?: boolean;
+  borderButtom?: boolean;
+  diversity?: boolean;
+  websiteBg?: boolean;
+};
+
+const FormField = ({ icons = [], ...props }: Props) => {
+  const childrenCount = Children.count(props.children);
+  const bgColor = useAppSelector((state) => state.style.cardsColor);
+  const focusRing = useAppSelector((state) => state.style.focusRingColor);
+  const corners = useAppSelector((state) => state.style.corners);
+  const bgWebsiteColor = useAppSelector((state) => state.style.bgLayoutColor);
+  let elementWrapperClass = '';
+
+  switch (childrenCount) {
+    case 2:
+      elementWrapperClass = 'grid grid-cols-1 gap-3 md:grid-cols-2';
+      break;
+    case 3:
+      elementWrapperClass = 'grid grid-cols-1 gap-3 md:grid-cols-3';
+  }
+
+  const controlClassName = [
+    `px-3 py-2 max-w-full border-gray-300 dark:border-dark-700 ${corners} w-full dark:placeholder-gray-400`,
+    `${focusRing}`,
+    props.hasTextareaHeight ? 'h-24' : 'h-12',
+    props.isBorderless ? 'border-0' : 'border',
+    props.isTransparent
+      ? 'bg-transparent'
+      : `${props.websiteBg ? `  ` : bgColor} dark:bg-dark-800`,
+    props.disabled ? 'bg-gray-200 text-gray-100 dark:bg-dark-900 disabled' : '',
+    props.borderButtom
+      ? `border-0 border-b ${
+          props.diversity
+            ? 'border-gray-400'
+            : ' placeholder-white   border-gray-300/10  '
+        } rounded-none focus:ring-0`
+      : '',
+  ].join(' ');
+
+  return (
+    <div className='mb-6 last:mb-0'>
+      {props.label && (
+        <label
+          htmlFor={props.labelFor}
+          className={`block font-bold mb-2 ${
+            props.labelFor ? 'cursor-pointer' : ''
+          }`}
+        >
+          {props.label}
+        </label>
+      )}
+      <div className={`${elementWrapperClass}`}>
+        {Children.map(props.children, (child: ReactElement, index) => (
+          <div className='relative'>
+            {cloneElement(child, {
+              className: `${controlClassName} ${icons[index] ? 'pl-10' : ''}`,
+            })}
+            {icons[index] && (
+              <BaseIcon
+                path={icons[index]}
+                w='w-10'
+                h={props.hasTextareaHeight ? 'h-full' : 'h-12'}
+                className='absolute top-0 left-0 z-10 pointer-events-none text-gray-500 dark:text-slate-400'
+              />
+            )}
+          </div>
+        ))}
+      </div>
+      {props.help && (
+        <div className='text-xs    text-gray-500 dark:text-dark-600 mt-1'>
+          {props.help}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default FormField;

frontend/src/components/FormFilePicker.tsx

@@ -0,0 +1,101 @@
+import { useEffect, useState } from 'react';
+import { ColorButtonKey } from '../interfaces';
+import BaseButton from './BaseButton';
+import FileUploader from './Uploaders/UploadService';
+import { mdiReload } from '@mdi/js';
+import { useAppSelector } from '../stores/hooks';
+
+type Props = {
+  label?: string;
+  icon?: string;
+  accept?: string;
+  color: ColorButtonKey;
+  isRoundIcon?: boolean;
+  path: string;
+  schema: object;
+  field: any;
+  form: any;
+};
+
+const FormFilePicker = ({
+  label,
+  icon,
+  accept,
+  color,
+  isRoundIcon,
+  path,
+  schema,
+  form,
+  field,
+}: Props) => {
+  const [file, setFile] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const corners = useAppSelector((state) => state.style.corners);
+  const bgColor = useAppSelector((state) => state.style.cardsColor);
+  let cornersRight;
+  if (corners === 'rounded') {
+    cornersRight = 'rounded-r';
+  } else if (corners === 'rounded-lg') {
+    cornersRight = 'rounded-r-lg';
+  } else if (corners === 'rounded-full') {
+    cornersRight = 'rounded-r-3xl';
+  } else {
+    cornersRight = '';
+  }
+
+  useEffect(() => {
+    if (field.value) {
+      setFile(field.value[0]);
+    }
+  }, [field.value]);
+  const handleFileChange = async (event) => {
+    const file = event.currentTarget.files[0];
+    setFile(file);
+
+    FileUploader.validate(file, schema);
+    setLoading(true);
+    const remoteFile = await FileUploader.upload(path, file, schema);
+
+    form.setFieldValue(field.name, [{ ...remoteFile }]);
+    setLoading(false);
+  };
+
+  const showFilename = !isRoundIcon && file;
+
+  return (
+    <div className='flex items-stretch justify-start relative'>
+      <label className='inline-flex'>
+        <BaseButton
+          className={`${isRoundIcon ? 'w-12 h-12' : ''} ${
+            showFilename ? 'rounded-r-none' : ''
+          }`}
+          iconSize={isRoundIcon ? 24 : undefined}
+          label={isRoundIcon ? null : label}
+          icon={loading ? mdiReload : icon}
+          iconClassName={loading && 'animate-spin'}
+          color={color}
+          roundedFull={isRoundIcon}
+          asAnchor
+        />
+        <input
+          type='file'
+          className='absolute top-0 left-0 w-full h-full opacity-0 outline-none cursor-pointer -z-1'
+          onChange={handleFileChange}
+          accept={accept}
+          disabled={loading}
+        />
+      </label>
+      {showFilename && !loading && (
+        <div
+          className={` px-4 py-2 max-w-full flex-grow-0 overflow-x-hidden ${bgColor}  dark:bg-slate-800 border-gray-200 dark:border-slate-700 border ${cornersRight} `}
+        >
+          <span className='text-ellipsis max-w-full line-clamp-1'>
+            {file.name}
+          </span>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default FormFilePicker;

frontend/src/components/FormImagePicker.tsx

@@ -0,0 +1,102 @@
+import { useState, useEffect } from 'react';
+import { ColorButtonKey } from '../interfaces';
+import BaseButton from './BaseButton';
+import ImagesUploader from './Uploaders/ImagesUploader';
+import FileUploader from './Uploaders/UploadService';
+import { mdiReload } from '@mdi/js';
+import { useAppSelector } from '../stores/hooks';
+
+type Props = {
+  label?: string;
+  icon?: string;
+  accept?: string;
+  color: ColorButtonKey;
+  isRoundIcon?: boolean;
+  path: string;
+  schema: object;
+  field: any;
+  form: any;
+};
+
+const FormImagePicker = ({
+  label,
+  icon,
+  accept,
+  color,
+  isRoundIcon,
+  path,
+  schema,
+  form,
+  field,
+}: Props) => {
+  const [file, setFile] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const corners = useAppSelector((state) => state.style.corners);
+  const bgColor = useAppSelector((state) => state.style.cardsColor);
+  let cornersRight;
+  if (corners === 'rounded') {
+    cornersRight = 'rounded-r';
+  } else if (corners === 'rounded-lg') {
+    cornersRight = 'rounded-r-lg';
+  } else if (corners === 'rounded-full') {
+    cornersRight = 'rounded-r-3xl';
+  } else {
+    cornersRight = '';
+  }
+
+  useEffect(() => {
+    if (field.value) {
+      setFile(field.value[0]);
+    }
+  }, [field.value]);
+  const handleFileChange = async (event) => {
+    const file = event.currentTarget.files[0];
+    setFile(file);
+
+    FileUploader.validate(file, schema);
+    setLoading(true);
+    const remoteFile = await FileUploader.upload(path, file, schema);
+
+    form.setFieldValue(field.name, [{ ...remoteFile }]);
+    setLoading(false);
+  };
+
+  const showFilename = !isRoundIcon && file;
+
+  return (
+    <div className='flex items-stretch justify-start relative'>
+      <label className='inline-flex'>
+        <BaseButton
+          className={`${isRoundIcon ? 'w-12 h-12' : ''} ${
+            showFilename ? 'rounded-r-none' : ''
+          }`}
+          iconSize={isRoundIcon ? 24 : undefined}
+          label={isRoundIcon ? null : label}
+          icon={loading ? mdiReload : icon}
+          iconClassName={loading && 'animate-spin'}
+          color={color}
+          roundedFull={isRoundIcon}
+          asAnchor
+        />
+        <input
+          type='file'
+          className='absolute top-0 left-0 w-full h-full opacity-0 outline-none cursor-pointer -z-1'
+          onChange={handleFileChange}
+          accept={accept}
+          disabled={loading}
+        />
+      </label>
+      {showFilename && !loading && (
+        <div
+          className={` ${cornersRight} px-4 py-2 max-w-full flex-grow-0 overflow-x-hidden ${bgColor} dark:bg-slate-800 border-gray-200 dark:border-slate-700 border  `}
+        >
+          <span className='text-ellipsis max-w-full line-clamp-1'>
+            {file.name}
+          </span>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default FormImagePicker;

frontend/src/components/IconRounded.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { ColorKey } from '../interfaces';
+import { colorsBgLight, colorsText } from '../colors';
+import BaseIcon from './BaseIcon';
+
+type Props = {
+  icon: string;
+  color: ColorKey;
+  w?: string;
+  h?: string;
+  bg?: boolean;
+  className?: string;
+};
+
+export default function IconRounded({
+  icon,
+  color,
+  w = 'w-12',
+  h = 'h-12',
+  bg = false,
+  className = '',
+}: Props) {
+  const classAddon = bg
+    ? colorsBgLight[color]
+    : `${colorsText[color]} bg-gray-50 dark:bg-slate-800`;
+
+  return (
+    <BaseIcon
+      path={icon}
+      w={w}
+      h={h}
+      size='24'
+      className={`rounded-full ${classAddon} ${className}`}
+    />
+  );
+}

frontend/src/components/ImageField.tsx

@@ -0,0 +1,51 @@
+/* eslint-disable @next/next/no-img-element */
+// Why disabled:
+// avatars.dicebear.com provides svg avatars
+// next/image needs dangerouslyAllowSVG option for that
+
+import React, { ReactNode } from 'react';
+import { mdiImageOutline } from '@mdi/js';
+import BaseIcon from './BaseIcon';
+
+type Props = {
+  name: string;
+  image?: object | null;
+  api?: string;
+  className?: string;
+  imageClassName?: string;
+  children?: ReactNode;
+};
+
+export default function ImageField({
+  name,
+  image,
+  className = '',
+  imageClassName = '',
+  children,
+}: Props) {
+  const imageSrc = image && image[0] ? `${image[0].publicUrl}` : '';
+
+  return (
+    <div className={className}>
+      {imageSrc ? (
+        <img
+          src={imageSrc}
+          alt={name}
+          className={`rounded-full block h-auto w-full max-w-full bg-gray-100 dark:bg-dark-900 ${imageClassName}`}
+        />
+      ) : (
+        <div className={'flex h-full  dark:bg-dark-900/70'}>
+          <BaseIcon
+            className='text-black dark:text-white'
+            w='w-full'
+            h='h-full'
+            size={54}
+            path={mdiImageOutline}
+          />
+        </div>
+      )}
+
+      {children}
+    </div>
+  );
+}

frontend/src/components/IntroGuide.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { Steps, Hints } from 'intro.js-react';
+import { useRouter } from 'next/router';
+interface IntroGuideProps {
+  steps: Array<{
+    element: string;
+    intro: string;
+    position?: string;
+  }>;
+  disableInteraction?: boolean;
+  stepsEnabled: boolean;
+  stepsName: string;
+  onExit: () => void;
+}
+
+const IntroGuide: React.FC<IntroGuideProps> = ({
+  steps,
+  stepsEnabled,
+  onExit,
+  stepsName,
+}) => {
+  const router = useRouter();
+  const handleStepChange = (stepIndex: number) => {
+    if (stepIndex === 7 && stepsName === 'appSteps') {
+      onExit();
+      router.push('/users/users-list/');
+    }
+  };
+
+  const handleExit = () => {
+    localStorage.setItem(`completed_${stepsName}`, 'true');
+    onExit();
+  };
+  return (
+    <>
+      <Steps
+        enabled={stepsEnabled}
+        steps={steps}
+        initialStep={0}
+        onExit={handleExit}
+        onChange={handleStepChange}
+        options={{
+          scrollToElement: true,
+          scrollPadding: 50,
+        }}
+      />
+    </>
+  );
+};
+
+export default IntroGuide;

frontend/src/components/KanbanBoard/KanbanBoard.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import KanbanColumn from './KanbanColumn';
+import { AsyncThunk } from '@reduxjs/toolkit';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+
+type Props = {
+  columns: Array<{ id: string; label: string }>;
+  filtersQuery: string;
+  entityName: string;
+  columnFieldName: string;
+  showFieldName: string;
+  deleteThunk: AsyncThunk<any, any, any>;
+  updateThunk: AsyncThunk<any, any, any>;
+};
+
+const KanbanBoard = ({
+  columns,
+  entityName,
+  columnFieldName,
+  filtersQuery,
+  showFieldName,
+  deleteThunk,
+  updateThunk,
+}: Props) => {
+  return (
+    <div
+      className={
+        'pb-2 flex-grow min-h-[400px] flex-1 grid grid-rows-1 auto-cols-min grid-flow-col gap-x-3 overflow-y-hidden overflow-x-auto'
+      }
+    >
+      <DndProvider backend={HTML5Backend}>
+        {columns.map((column) => (
+          <KanbanColumn
+            key={column.id}
+            entityName={entityName}
+            columnFieldName={columnFieldName}
+            showFieldName={showFieldName}
+            column={column}
+            filtersQuery={filtersQuery}
+            deleteThunk={deleteThunk}
+            updateThunk={updateThunk}
+          />
+        ))}
+      </DndProvider>
+    </div>
+  );
+};
+
+export default KanbanBoard;

frontend/src/components/KanbanBoard/KanbanCard.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import Link from 'next/link';
+import moment from 'moment';
+import ListActionsPopover from '../ListActionsPopover';
+import { DragSourceMonitor, useDrag } from 'react-dnd';
+
+type Props = {
+  item: any;
+  column: { id: string; label: string };
+  entityName: string;
+  showFieldName: string;
+  setItemIdToDelete: (id: string) => void;
+};
+
+const KanbanCard = ({
+  item,
+  entityName,
+  showFieldName,
+  setItemIdToDelete,
+  column,
+}: Props) => {
+  const [{ isDragging }, drag] = useDrag(
+    () => ({
+      type: 'box',
+      item: { item, column },
+      collect: (monitor: DragSourceMonitor) => ({
+        isDragging: monitor.isDragging(),
+      }),
+    }),
+    [item],
+  );
+
+  return (
+    <div
+      ref={drag}
+      className={`bg--cardColor  dark:bg-dark-800 rounded-md space-y-2 p-4 relative ${
+        isDragging ? 'cursor-grabbing' : 'cursor-grab'
+      }`}
+    >
+      <div className={'flex items-center justify-between'}>
+        <Link
+          href={`/${entityName}/${entityName}-view/?id=${item.id}`}
+          className={'text-base font-semibold'}
+        >
+          {item[showFieldName] ?? 'No data'}
+        </Link>
+      </div>
+      <div className={'flex items-center justify-between'}>
+        <p>{moment(item.createdAt).format('MMM DD hh:mm a')}</p>
+        <ListActionsPopover
+          itemId={item.id}
+          pathEdit={`/${entityName}/${entityName}-edit/?id=${item.id}`}
+          pathView={`/${entityName}/${entityName}-view/?id=${item.id}`}
+          onDelete={(id) => setItemIdToDelete(id)}
+          hasUpdatePermission={true}
+          className={'w-2 h-2 text-white'}
+          iconClassName={'w-5'}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default KanbanCard;

frontend/src/components/KanbanBoard/KanbanColumn.tsx

@@ -0,0 +1,211 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useAppDispatch, useAppSelector } from '../../stores/hooks';
+import Axios from 'axios';
+import CardBox from '../CardBox';
+import CardBoxModal from '../CardBoxModal';
+import { AsyncThunk } from '@reduxjs/toolkit';
+import { useDrop } from 'react-dnd';
+import KanbanCard from './KanbanCard';
+
+type Props = {
+  column: { id: string; label: string };
+  entityName: string;
+  columnFieldName: string;
+  showFieldName: string;
+  filtersQuery: any;
+  deleteThunk: AsyncThunk<any, any, any>;
+  updateThunk: AsyncThunk<any, any, any>;
+};
+
+type DropResult = {
+  sourceColumn: { id: string; label: string };
+  item: any;
+};
+
+const perPage = 10;
+
+const KanbanColumn = ({
+  column,
+  entityName,
+  columnFieldName,
+  showFieldName,
+  filtersQuery,
+  deleteThunk,
+  updateThunk,
+}: Props) => {
+  const [currentPage, setCurrentPage] = useState(0);
+  const [count, setCount] = useState(0);
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [itemIdToDelete, setItemIdToDelete] = useState('');
+  const currentUser = useAppSelector((state) => state.auth.currentUser);
+  const listInnerRef = useRef<HTMLDivElement>();
+  const dispatch = useAppDispatch();
+
+  const [{ dropResult }, drop] = useDrop<
+    {
+      item: any;
+      column: {
+        id: string;
+        label: string;
+      };
+    },
+    unknown,
+    {
+      dropResult: DropResult;
+    }
+  >(
+    () => ({
+      accept: 'box',
+      drop: ({
+        item,
+        column: sourceColumn,
+      }: {
+        item: any;
+        column: { id: string; label: string };
+      }) => {
+        if (sourceColumn.id === column.id) return;
+
+        dispatch(
+          updateThunk({
+            id: item.id,
+            data: {
+              [columnFieldName]: column.id,
+            },
+          }),
+        ).then((res) => {
+          console.log('res', res);
+          setData((prevState) => (prevState ? [...prevState, item] : [item]));
+          setCount((prevState) => prevState + 1);
+        });
+
+        return { sourceColumn, item };
+      },
+      collect: (monitor) => ({
+        dropResult: monitor.getDropResult(),
+      }),
+    }),
+    [],
+  );
+
+  const loadData = useCallback(
+    (page: number, filters = '') => {
+      const query = `?page=${page}&limit=${perPage}&field=createdAt&sort=desc&${columnFieldName}=${column.id}&${filters}`;
+      setLoading(true);
+      Axios.get(`${entityName}${query}`)
+        .then((res) => {
+          setData((prevState) =>
+            page === 0 ? res.data.rows : [...prevState, ...res.data.rows],
+          );
+          setCount(res.data.count);
+          setCurrentPage(page);
+        })
+        .catch((err) => {
+          console.error(err);
+        })
+        .finally(() => {
+          setLoading(false);
+        });
+    },
+    [currentUser, column],
+  );
+
+  useEffect(() => {
+    if (!currentUser) return;
+    loadData(0, filtersQuery);
+  }, [currentUser, loadData, filtersQuery]);
+
+  useEffect(() => {
+    loadData(0, filtersQuery);
+  }, [loadData, filtersQuery]);
+
+  useEffect(() => {
+    if (dropResult?.sourceColumn && dropResult.sourceColumn.id === column.id) {
+      setData((prevState) =>
+        prevState.filter((item) => item.id !== dropResult.item.id),
+      );
+      setCount((prevState) => prevState - 1);
+    }
+  }, [dropResult]);
+
+  const onScroll = () => {
+    if (listInnerRef.current) {
+      const { scrollTop, scrollHeight, clientHeight } = listInnerRef.current;
+      if (Math.floor(scrollTop + clientHeight) === scrollHeight) {
+        if (data.length < count && !loading) {
+          loadData(currentPage + 1, filtersQuery);
+        }
+      }
+    }
+  };
+
+  const onDeleteConfirm = () => {
+    if (!itemIdToDelete) return;
+
+    dispatch(deleteThunk(itemIdToDelete))
+      .then((res) => {
+        if (res.meta.requestStatus === 'fulfilled') {
+          setItemIdToDelete('');
+          loadData(0, filtersQuery);
+        }
+      })
+      .catch((err) => {
+        console.error(err);
+      })
+      .finally(() => {
+        setItemIdToDelete('');
+      });
+  };
+
+  return (
+    <>
+      <CardBox
+        hasComponentLayout
+        className={
+          'w-72 rounded-md h-fit max-h-full overflow-hidden flex flex-col'
+        }
+      >
+        <div className={'flex items-center justify-between p-3'}>
+          <p className={'uppercase'}>{column.label}</p>
+          <p>{count}</p>
+        </div>
+        <div
+          ref={(node) => {
+            drop(node);
+            listInnerRef.current = node;
+          }}
+          className={'p-3 space-y-3 flex-1 overflow-y-auto max-h-[400px]'}
+          onScroll={onScroll}
+        >
+          {data?.map((item) => (
+            <KanbanCard
+              key={item.id}
+              item={item}
+              column={column}
+              showFieldName={showFieldName}
+              entityName={entityName}
+              setItemIdToDelete={setItemIdToDelete}
+            />
+          ))}
+          {!data?.length && (
+            <p className={'text-center py-8 bg--cardColor  dark:bg-dark-800'}>
+              No data
+            </p>
+          )}
+        </div>
+      </CardBox>
+      <CardBoxModal
+        title='Please confirm'
+        buttonColor='info'
+        buttonLabel={loading ? 'Deleting...' : 'Confirm'}
+        isActive={!!itemIdToDelete}
+        onConfirm={onDeleteConfirm}
+        onCancel={() => setItemIdToDelete('')}
+      >
+        <p>Are you sure you want to delete this item?</p>
+      </CardBoxModal>
+    </>
+  );
+};
+
+export default KanbanColumn;

frontend/src/components/ListActionsPopover.tsx

@@ -0,0 +1,114 @@
+import React from 'react';
+import Link from 'next/link';
+import Button from '@mui/material/Button';
+import BaseIcon from './BaseIcon';
+import {
+  mdiDotsVertical,
+  mdiEye,
+  mdiPencilOutline,
+  mdiTrashCan,
+} from '@mdi/js';
+import Popover from '@mui/material/Popover';
+import { IconButton } from '@mui/material';
+
+type Props = {
+  itemId: string;
+  onDelete: (id: string) => void;
+  hasUpdatePermission: boolean;
+  className?: string;
+  iconClassName?: string;
+  pathEdit: string;
+  pathView: string;
+};
+
+const ListActionsPopover = ({
+  itemId,
+  onDelete,
+  hasUpdatePermission,
+  className,
+  iconClassName,
+  pathEdit,
+  pathView,
+}: Props) => {
+  const [anchorEl, setAnchorEl] = React.useState(null);
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const linkView = pathView;
+  const linkEdit = pathEdit;
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const open = Boolean(anchorEl);
+  const id = open ? 'simple-popover' : undefined;
+
+  return (
+    <>
+      <IconButton
+        aria-describedby={id}
+        onClick={handleClick}
+        className={`rounded-full  ${className}`}
+        size={'small'}
+      >
+        <BaseIcon
+          className={`text-black dark:text-white ${iconClassName}`}
+          w='w-10'
+          h='h-10'
+          size={24}
+          path={mdiDotsVertical}
+        />
+      </IconButton>
+      <Popover
+        id={id}
+        open={open}
+        anchorEl={anchorEl}
+        onClose={handleClose}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'left',
+        }}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'center',
+        }}
+      >
+        <div className={'flex  flex-col'}>
+          <Button
+            startIcon={<BaseIcon path={mdiEye} size={24} />}
+            className='w-full MuiButton-colorInherit'
+            href={linkView}
+            sx={{ justifyContent: 'start' }}
+          >
+            View
+          </Button>
+          {hasUpdatePermission && (
+            <Button
+              startIcon={<BaseIcon path={mdiPencilOutline} size={24} />}
+              className='w-full MuiButton-colorInherit'
+              href={linkEdit}
+              sx={{ justifyContent: 'start' }}
+            >
+              Edit
+            </Button>
+          )}
+          {hasUpdatePermission && (
+            <Button
+              startIcon={<BaseIcon path={mdiTrashCan} size={24} />}
+              className='MuiButton-colorInherit'
+              onClick={() => {
+                handleClose();
+                onDelete(itemId);
+              }}
+              sx={{ justifyContent: 'start' }}
+            >
+              Delete
+            </Button>
+          )}
+        </div>
+      </Popover>
+    </>
+  );
+};
+
+export default ListActionsPopover;

frontend/src/components/LoadingSpinner.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+const LoadingSpinner = () => {
+  return (
+    <div className='flex items-center justify-center h-40'>
+      <div className='relative w-12'>
+        <div className='w-12 h-12 rounded-full absolute border-4 border-solid border-gray-200 dark:border-slate-800'></div>
+        <div className='w-12 h-12 rounded-full animate-spin absolute border-4 border-solid  border-blue-500 dark:border-blue-500 border-t-transparent'></div>
+      </div>
+    </div>
+  );
+};
+
+export default LoadingSpinner;

frontend/src/components/Logo/index.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+type Props = {
+  className?: string;
+};
+
+export default function Logo({ className = '' }: Props) {
+  return (
+    <img
+      src={'https://flatlogic.com/logo.svg'}
+      className={className}
+      alt={'Flatlogic logo'}
+    ></img>
+  );
+}

frontend/src/components/NavBar.tsx

@@ -0,0 +1,65 @@
+import React, { ReactNode, useState, useEffect } from 'react';
+import { mdiClose, mdiDotsVertical } from '@mdi/js';
+import { containerMaxW } from '../config';
+import BaseIcon from './BaseIcon';
+import NavBarItemPlain from './NavBarItemPlain';
+import NavBarMenuList from './NavBarMenuList';
+import { MenuNavBarItem } from '../interfaces';
+import { useAppSelector } from '../stores/hooks';
+
+type Props = {
+  menu: MenuNavBarItem[];
+  className: string;
+  children: ReactNode;
+};
+
+export default function NavBar({ menu, className = '', children }: Props) {
+  const [isMenuNavBarActive, setIsMenuNavBarActive] = useState(false);
+  const [isScrolled, setIsScrolled] = useState(false);
+  const bgColor = useAppSelector((state) => state.style.bgLayoutColor);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const scrolled = window.scrollY > 0;
+      setIsScrolled(scrolled);
+    };
+    window.addEventListener('scroll', handleScroll);
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
+
+  const handleMenuNavBarToggleClick = () => {
+    setIsMenuNavBarActive(!isMenuNavBarActive);
+  };
+
+  return (
+    <nav
+      className={`${className} top-0 inset-x-0 fixed ${bgColor} h-14 z-30 transition-position w-screen lg:w-auto dark:bg-dark-800`}
+    >
+      <div
+        className={`flex lg:items-stretch ${containerMaxW} ${
+          isScrolled &&
+          `border-b  border--outsideCardColor dark:border-dark-700`
+        }`}
+      >
+        <div className='flex flex-1 items-stretch h-14'>{children}</div>
+        <div className='flex-none items-stretch flex h-14 lg:hidden'>
+          <NavBarItemPlain onClick={handleMenuNavBarToggleClick}>
+            <BaseIcon
+              path={isMenuNavBarActive ? mdiClose : mdiDotsVertical}
+              size='24'
+            />
+          </NavBarItemPlain>
+        </div>
+        <div
+          className={`${
+            isMenuNavBarActive ? 'block' : 'hidden'
+          } max-h-screen-menu overflow-y-auto lg:overflow-visible absolute w-screen top-14 left-0 ${bgColor}  shadow-lg lg:w-auto lg:flex lg:static lg:shadow-none dark:bg-dark-800`}
+        >
+          <NavBarMenuList menu={menu} />
+        </div>
+      </div>
+    </nav>
+  );
+}

frontend/src/components/NavBarItem.tsx

@@ -0,0 +1,149 @@
+import React, { useEffect, useRef } from 'react';
+import Link from 'next/link';
+import { useState } from 'react';
+import { mdiChevronUp, mdiChevronDown } from '@mdi/js';
+import BaseDivider from './BaseDivider';
+import BaseIcon from './BaseIcon';
+import UserAvatarCurrentUser from './UserAvatarCurrentUser';
+import NavBarMenuList from './NavBarMenuList';
+import { useAppDispatch, useAppSelector } from '../stores/hooks';
+import { MenuNavBarItem } from '../interfaces';
+import { setDarkMode } from '../stores/styleSlice';
+import { logoutUser } from '../stores/authSlice';
+import { useRouter } from 'next/router';
+import ClickOutside from './ClickOutside';
+
+type Props = {
+  item: MenuNavBarItem;
+};
+
+export default function NavBarItem({ item }: Props) {
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+  const excludedRef = useRef(null);
+
+  const navBarItemLabelActiveColorStyle = useAppSelector(
+    (state) => state.style.navBarItemLabelActiveColorStyle,
+  );
+  const navBarItemLabelStyle = useAppSelector(
+    (state) => state.style.navBarItemLabelStyle,
+  );
+  const navBarItemLabelHoverStyle = useAppSelector(
+    (state) => state.style.navBarItemLabelHoverStyle,
+  );
+
+  const currentUser = useAppSelector((state) => state.auth.currentUser);
+
+  const userName = `${currentUser?.firstName ? currentUser?.firstName : ''} ${
+    currentUser?.lastName ? currentUser?.lastName : ''
+  }`;
+
+  const [isDropdownActive, setIsDropdownActive] = useState(false);
+
+  useEffect(() => {
+    return () => setIsDropdownActive(false);
+  }, [router.pathname]);
+
+  const componentClass = [
+    'block lg:flex items-center relative cursor-pointer',
+    isDropdownActive
+      ? `${navBarItemLabelActiveColorStyle} dark:text-slate-400`
+      : `${navBarItemLabelStyle} dark:text-white dark:hover:text-slate-400 ${navBarItemLabelHoverStyle}`,
+    item.menu ? 'lg:py-2 lg:px-3' : 'py-2 px-3',
+    item.isDesktopNoLabel ? 'lg:w-16 lg:justify-center' : '',
+  ].join(' ');
+
+  const itemLabel = item.isCurrentUser ? userName : item.label;
+
+  const handleMenuClick = () => {
+    if (item.menu) {
+      setIsDropdownActive(!isDropdownActive);
+    }
+
+    if (item.isToggleLightDark) {
+      dispatch(setDarkMode(null));
+    }
+
+    if (item.isLogout) {
+      dispatch(logoutUser());
+      router.push('/login');
+    }
+  };
+
+  const getItemId = (label) => {
+    switch (label) {
+      case 'Light/Dark':
+        return 'themeToggle';
+      case 'Log out':
+        return 'logout';
+      default:
+        return undefined;
+    }
+  };
+
+  const NavBarItemComponentContents = (
+    <>
+      <div
+        id={getItemId(itemLabel)}
+        className={`flex items-center ${
+          item.menu
+            ? 'bg-gray-100 dark:bg-dark-800 lg:bg-transparent lg:dark:bg-transparent p-3 lg:p-0'
+            : 'w-full'
+        }`}
+        onClick={handleMenuClick}
+      >
+        {item.icon && (
+          <BaseIcon path={item.icon} size={22} className='transition-colors' />
+        )}
+        <span
+          className={`px-2 transition-colors w-40 grow ${
+            item.isDesktopNoLabel && item.icon ? 'lg:hidden' : ''
+          }`}
+        >
+          {itemLabel}
+        </span>
+        {item.isCurrentUser && (
+          <UserAvatarCurrentUser className='w-6 h-6 mr-3 inline-flex' />
+        )}
+        {item.menu && (
+          <BaseIcon
+            path={isDropdownActive ? mdiChevronUp : mdiChevronDown}
+            className='hidden lg:inline-flex transition-colors'
+          />
+        )}
+      </div>
+      {item.menu && (
+        <div
+          className={`${
+            !isDropdownActive ? 'lg:hidden' : ''
+          } text-sm border-b border-gray-100 lg:border lg:bg-white lg:absolute lg:top-full lg:left-0 lg:min-w-full lg:z-20 lg:rounded-lg lg:shadow-lg lg:dark:bg-dark-900 dark:border-dark-700`}
+        >
+          <ClickOutside
+            onClickOutside={() => setIsDropdownActive(false)}
+            excludedElements={[excludedRef]}
+          >
+            <NavBarMenuList menu={item.menu} />
+          </ClickOutside>
+        </div>
+      )}
+    </>
+  );
+
+  if (item.isDivider) {
+    return <BaseDivider navBar />;
+  }
+
+  if (item.href) {
+    return (
+      <Link href={item.href} target={item.target} className={componentClass}>
+        {NavBarItemComponentContents}
+      </Link>
+    );
+  }
+
+  return (
+    <div className={componentClass} ref={excludedRef}>
+      {NavBarItemComponentContents}
+    </div>
+  );
+}