Updated via schema editor on 2025-06-02 13:54

.gitignore

@@ -1,3 +1,8 @@
 node_modules/
 */node_modules/
 */build/
+
+**/node_modules/
+**/build/
+.DS_Store
+.env

backend/src/db/api/settings.js

@@ -0,0 +1,383 @@
+const db = require('../models');
+const FileDBApi = require('./file');
+const crypto = require('crypto');
+const Utils = require('../utils');
+
+const Sequelize = db.Sequelize;
+const Op = Sequelize.Op;
+
+module.exports = class SettingsDBApi {
+  static async create(data, options) {
+    const currentUser = (options && options.currentUser) || { id: null };
+    const transaction = (options && options.transaction) || undefined;
+
+    const settings = await db.settings.create(
+      {
+        id: data.id || undefined,
+
+        system_name: data.system_name || null,
+        location_text: data.location_text || null,
+        latitude: data.latitude || null,
+        longitude: data.longitude || null,
+        wifi_ssid: data.wifi_ssid || null,
+        wifi_password: data.wifi_password || null,
+        ip_mode: data.ip_mode || null,
+        ip_address: data.ip_address || null,
+        sensor_selector: data.sensor_selector || null,
+        importHash: data.importHash || null,
+        createdById: currentUser.id,
+        updatedById: currentUser.id,
+      },
+      { transaction },
+    );
+
+    return settings;
+  }
+
+  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 settingsData = data.map((item, index) => ({
+      id: item.id || undefined,
+
+      system_name: item.system_name || null,
+      location_text: item.location_text || null,
+      latitude: item.latitude || null,
+      longitude: item.longitude || null,
+      wifi_ssid: item.wifi_ssid || null,
+      wifi_password: item.wifi_password || null,
+      ip_mode: item.ip_mode || null,
+      ip_address: item.ip_address || null,
+      sensor_selector: item.sensor_selector || null,
+      importHash: item.importHash || null,
+      createdById: currentUser.id,
+      updatedById: currentUser.id,
+      createdAt: new Date(Date.now() + index * 1000),
+    }));
+
+    // Bulk create items
+    const settings = await db.settings.bulkCreate(settingsData, {
+      transaction,
+    });
+
+    // For each item created, replace relation files
+
+    return settings;
+  }
+
+  static async update(id, data, options) {
+    const currentUser = (options && options.currentUser) || { id: null };
+    const transaction = (options && options.transaction) || undefined;
+
+    const settings = await db.settings.findByPk(id, {}, { transaction });
+
+    const updatePayload = {};
+
+    if (data.system_name !== undefined)
+      updatePayload.system_name = data.system_name;
+
+    if (data.location_text !== undefined)
+      updatePayload.location_text = data.location_text;
+
+    if (data.latitude !== undefined) updatePayload.latitude = data.latitude;
+
+    if (data.longitude !== undefined) updatePayload.longitude = data.longitude;
+
+    if (data.wifi_ssid !== undefined) updatePayload.wifi_ssid = data.wifi_ssid;
+
+    if (data.wifi_password !== undefined)
+      updatePayload.wifi_password = data.wifi_password;
+
+    if (data.ip_mode !== undefined) updatePayload.ip_mode = data.ip_mode;
+
+    if (data.ip_address !== undefined)
+      updatePayload.ip_address = data.ip_address;
+
+    if (data.sensor_selector !== undefined)
+      updatePayload.sensor_selector = data.sensor_selector;
+
+    updatePayload.updatedById = currentUser.id;
+
+    await settings.update(updatePayload, { transaction });
+
+    return settings;
+  }
+
+  static async deleteByIds(ids, options) {
+    const currentUser = (options && options.currentUser) || { id: null };
+    const transaction = (options && options.transaction) || undefined;
+
+    const settings = await db.settings.findAll({
+      where: {
+        id: {
+          [Op.in]: ids,
+        },
+      },
+      transaction,
+    });
+
+    await db.sequelize.transaction(async (transaction) => {
+      for (const record of settings) {
+        await record.update({ deletedBy: currentUser.id }, { transaction });
+      }
+      for (const record of settings) {
+        await record.destroy({ transaction });
+      }
+    });
+
+    return settings;
+  }
+
+  static async remove(id, options) {
+    const currentUser = (options && options.currentUser) || { id: null };
+    const transaction = (options && options.transaction) || undefined;
+
+    const settings = await db.settings.findByPk(id, options);
+
+    await settings.update(
+      {
+        deletedBy: currentUser.id,
+      },
+      {
+        transaction,
+      },
+    );
+
+    await settings.destroy({
+      transaction,
+    });
+
+    return settings;
+  }
+
+  static async findBy(where, options) {
+    const transaction = (options && options.transaction) || undefined;
+
+    const settings = await db.settings.findOne({ where }, { transaction });
+
+    if (!settings) {
+      return settings;
+    }
+
+    const output = settings.get({ plain: true });
+
+    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 = [];
+
+    if (filter) {
+      if (filter.id) {
+        where = {
+          ...where,
+          ['id']: Utils.uuid(filter.id),
+        };
+      }
+
+      if (filter.system_name) {
+        where = {
+          ...where,
+          [Op.and]: Utils.ilike('settings', 'system_name', filter.system_name),
+        };
+      }
+
+      if (filter.location_text) {
+        where = {
+          ...where,
+          [Op.and]: Utils.ilike(
+            'settings',
+            'location_text',
+            filter.location_text,
+          ),
+        };
+      }
+
+      if (filter.wifi_ssid) {
+        where = {
+          ...where,
+          [Op.and]: Utils.ilike('settings', 'wifi_ssid', filter.wifi_ssid),
+        };
+      }
+
+      if (filter.wifi_password) {
+        where = {
+          ...where,
+          [Op.and]: Utils.ilike(
+            'settings',
+            'wifi_password',
+            filter.wifi_password,
+          ),
+        };
+      }
+
+      if (filter.ip_address) {
+        where = {
+          ...where,
+          [Op.and]: Utils.ilike('settings', 'ip_address', filter.ip_address),
+        };
+      }
+
+      if (filter.latitudeRange) {
+        const [start, end] = filter.latitudeRange;
+
+        if (start !== undefined && start !== null && start !== '') {
+          where = {
+            ...where,
+            latitude: {
+              ...where.latitude,
+              [Op.gte]: start,
+            },
+          };
+        }
+
+        if (end !== undefined && end !== null && end !== '') {
+          where = {
+            ...where,
+            latitude: {
+              ...where.latitude,
+              [Op.lte]: end,
+            },
+          };
+        }
+      }
+
+      if (filter.longitudeRange) {
+        const [start, end] = filter.longitudeRange;
+
+        if (start !== undefined && start !== null && start !== '') {
+          where = {
+            ...where,
+            longitude: {
+              ...where.longitude,
+              [Op.gte]: start,
+            },
+          };
+        }
+
+        if (end !== undefined && end !== null && end !== '') {
+          where = {
+            ...where,
+            longitude: {
+              ...where.longitude,
+              [Op.lte]: end,
+            },
+          };
+        }
+      }
+
+      if (filter.active !== undefined) {
+        where = {
+          ...where,
+          active: filter.active === true || filter.active === 'true',
+        };
+      }
+
+      if (filter.ip_mode) {
+        where = {
+          ...where,
+          ip_mode: filter.ip_mode,
+        };
+      }
+
+      if (filter.sensor_selector) {
+        where = {
+          ...where,
+          sensor_selector: filter.sensor_selector,
+        };
+      }
+
+      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.settings.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('settings', 'system_name', query),
+        ],
+      };
+    }
+
+    const records = await db.settings.findAll({
+      attributes: ['id', 'system_name'],
+      where,
+      limit: limit ? Number(limit) : undefined,
+      offset: offset ? Number(offset) : undefined,
+      orderBy: [['system_name', 'ASC']],
+    });
+
+    return records.map((record) => ({
+      id: record.id,
+      label: record.system_name,
+    }));
+  }
+};

backend/src/db/api/status.js

@@ -0,0 +1,304 @@
+const db = require('../models');
+const FileDBApi = require('./file');
+const crypto = require('crypto');
+const Utils = require('../utils');
+
+const Sequelize = db.Sequelize;
+const Op = Sequelize.Op;
+
+module.exports = class StatusDBApi {
+  static async create(data, options) {
+    const currentUser = (options && options.currentUser) || { id: null };
+    const transaction = (options && options.transaction) || undefined;
+
+    const status = await db.status.create(
+      {
+        id: data.id || undefined,
+
+        wifi_status: data.wifi_status || null,
+        wifi_strength: data.wifi_strength || null,
+        sensor_status: data.sensor_status || false,
+
+        thingsboard_status: data.thingsboard_status || false,
+
+        importHash: data.importHash || null,
+        createdById: currentUser.id,
+        updatedById: currentUser.id,
+      },
+      { transaction },
+    );
+
+    return status;
+  }
+
+  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 statusData = data.map((item, index) => ({
+      id: item.id || undefined,
+
+      wifi_status: item.wifi_status || null,
+      wifi_strength: item.wifi_strength || null,
+      sensor_status: item.sensor_status || false,
+
+      thingsboard_status: item.thingsboard_status || false,
+
+      importHash: item.importHash || null,
+      createdById: currentUser.id,
+      updatedById: currentUser.id,
+      createdAt: new Date(Date.now() + index * 1000),
+    }));
+
+    // Bulk create items
+    const status = await db.status.bulkCreate(statusData, { transaction });
+
+    // For each item created, replace relation files
+
+    return status;
+  }
+
+  static async update(id, data, options) {
+    const currentUser = (options && options.currentUser) || { id: null };
+    const transaction = (options && options.transaction) || undefined;
+
+    const status = await db.status.findByPk(id, {}, { transaction });
+
+    const updatePayload = {};
+
+    if (data.wifi_status !== undefined)
+      updatePayload.wifi_status = data.wifi_status;
+
+    if (data.wifi_strength !== undefined)
+      updatePayload.wifi_strength = data.wifi_strength;
+
+    if (data.sensor_status !== undefined)
+      updatePayload.sensor_status = data.sensor_status;
+
+    if (data.thingsboard_status !== undefined)
+      updatePayload.thingsboard_status = data.thingsboard_status;
+
+    updatePayload.updatedById = currentUser.id;
+
+    await status.update(updatePayload, { transaction });
+
+    return status;
+  }
+
+  static async deleteByIds(ids, options) {
+    const currentUser = (options && options.currentUser) || { id: null };
+    const transaction = (options && options.transaction) || undefined;
+
+    const status = await db.status.findAll({
+      where: {
+        id: {
+          [Op.in]: ids,
+        },
+      },
+      transaction,
+    });
+
+    await db.sequelize.transaction(async (transaction) => {
+      for (const record of status) {
+        await record.update({ deletedBy: currentUser.id }, { transaction });
+      }
+      for (const record of status) {
+        await record.destroy({ transaction });
+      }
+    });
+
+    return status;
+  }
+
+  static async remove(id, options) {
+    const currentUser = (options && options.currentUser) || { id: null };
+    const transaction = (options && options.transaction) || undefined;
+
+    const status = await db.status.findByPk(id, options);
+
+    await status.update(
+      {
+        deletedBy: currentUser.id,
+      },
+      {
+        transaction,
+      },
+    );
+
+    await status.destroy({
+      transaction,
+    });
+
+    return status;
+  }
+
+  static async findBy(where, options) {
+    const transaction = (options && options.transaction) || undefined;
+
+    const status = await db.status.findOne({ where }, { transaction });
+
+    if (!status) {
+      return status;
+    }
+
+    const output = status.get({ plain: true });
+
+    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 = [];
+
+    if (filter) {
+      if (filter.id) {
+        where = {
+          ...where,
+          ['id']: Utils.uuid(filter.id),
+        };
+      }
+
+      if (filter.wifi_status) {
+        where = {
+          ...where,
+          [Op.and]: Utils.ilike('status', 'wifi_status', filter.wifi_status),
+        };
+      }
+
+      if (filter.wifi_strengthRange) {
+        const [start, end] = filter.wifi_strengthRange;
+
+        if (start !== undefined && start !== null && start !== '') {
+          where = {
+            ...where,
+            wifi_strength: {
+              ...where.wifi_strength,
+              [Op.gte]: start,
+            },
+          };
+        }
+
+        if (end !== undefined && end !== null && end !== '') {
+          where = {
+            ...where,
+            wifi_strength: {
+              ...where.wifi_strength,
+              [Op.lte]: end,
+            },
+          };
+        }
+      }
+
+      if (filter.active !== undefined) {
+        where = {
+          ...where,
+          active: filter.active === true || filter.active === 'true',
+        };
+      }
+
+      if (filter.sensor_status) {
+        where = {
+          ...where,
+          sensor_status: filter.sensor_status,
+        };
+      }
+
+      if (filter.thingsboard_status) {
+        where = {
+          ...where,
+          thingsboard_status: filter.thingsboard_status,
+        };
+      }
+
+      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.status.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('status', 'wifi_status', query),
+        ],
+      };
+    }
+
+    const records = await db.status.findAll({
+      attributes: ['id', 'wifi_status'],
+      where,
+      limit: limit ? Number(limit) : undefined,
+      offset: offset ? Number(offset) : undefined,
+      orderBy: [['wifi_status', 'ASC']],
+    });
+
+    return records.map((record) => ({
+      id: record.id,
+      label: record.wifi_status,
+    }));
+  }
+};

backend/src/db/migrations/1748872417660.js

@@ -0,0 +1,52 @@
+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.renameTable('system_settings', 'settings', {
+        transaction,
+      });
+
+      await queryInterface.renameTable('system_status', 'status', {
+        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.renameTable('status', 'system_status', {
+        transaction,
+      });
+
+      await queryInterface.renameTable('settings', 'system_settings', {
+        transaction,
+      });
+
+      await transaction.commit();
+    } catch (err) {
+      await transaction.rollback();
+      throw err;
+    }
+  },
+};

backend/src/db/models/settings.js

@@ -0,0 +1,85 @@
+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 settings = sequelize.define(
+    'settings',
+    {
+      id: {
+        type: DataTypes.UUID,
+        defaultValue: DataTypes.UUIDV4,
+        primaryKey: true,
+      },
+
+      system_name: {
+        type: DataTypes.TEXT,
+      },
+
+      location_text: {
+        type: DataTypes.TEXT,
+      },
+
+      latitude: {
+        type: DataTypes.DECIMAL,
+      },
+
+      longitude: {
+        type: DataTypes.DECIMAL,
+      },
+
+      wifi_ssid: {
+        type: DataTypes.TEXT,
+      },
+
+      wifi_password: {
+        type: DataTypes.TEXT,
+      },
+
+      ip_mode: {
+        type: DataTypes.ENUM,
+
+        values: ['static', 'dhcp'],
+      },
+
+      ip_address: {
+        type: DataTypes.TEXT,
+      },
+
+      sensor_selector: {
+        type: DataTypes.ENUM,
+
+        values: ['none', 'DHT11', 'DHT22', 'DS18B20'],
+      },
+
+      importHash: {
+        type: DataTypes.STRING(255),
+        allowNull: true,
+        unique: true,
+      },
+    },
+    {
+      timestamps: true,
+      paranoid: true,
+      freezeTableName: true,
+    },
+  );
+
+  settings.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.settings.belongsTo(db.users, {
+      as: 'createdBy',
+    });
+
+    db.settings.belongsTo(db.users, {
+      as: 'updatedBy',
+    });
+  };
+
+  return settings;
+};

backend/src/db/models/status.js

@@ -0,0 +1,67 @@
+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 status = sequelize.define(
+    'status',
+    {
+      id: {
+        type: DataTypes.UUID,
+        defaultValue: DataTypes.UUIDV4,
+        primaryKey: true,
+      },
+
+      wifi_status: {
+        type: DataTypes.TEXT,
+      },
+
+      wifi_strength: {
+        type: DataTypes.INTEGER,
+      },
+
+      sensor_status: {
+        type: DataTypes.BOOLEAN,
+
+        allowNull: false,
+        defaultValue: false,
+      },
+
+      thingsboard_status: {
+        type: DataTypes.BOOLEAN,
+
+        allowNull: false,
+        defaultValue: false,
+      },
+
+      importHash: {
+        type: DataTypes.STRING(255),
+        allowNull: true,
+        unique: true,
+      },
+    },
+    {
+      timestamps: true,
+      paranoid: true,
+      freezeTableName: true,
+    },
+  );
+
+  status.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.status.belongsTo(db.users, {
+      as: 'createdBy',
+    });
+
+    db.status.belongsTo(db.users, {
+      as: 'updatedBy',
+    });
+  };
+
+  return status;
+};

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

@@ -85,10 +85,10 @@ module.exports = {
 
     const entities = [
       'users',
-      'integrations',
+      'status',
       'sensors',
-      'system_settings',
+      'integrations',
-      'system_status',
+      'settings',
       'roles',
       'permissions',
       ,
@@ -202,83 +202,6 @@ primary key ("roles_permissionsId", "permissionId")
         permissionId: getId('CREATE_USERS'),
       },
 
-      {
-        createdAt,
-        updatedAt,
-        roles_permissionsId: getId('HiveMaster'),
-        permissionId: getId('CREATE_INTEGRATIONS'),
-      },
-
-      {
-        createdAt,
-        updatedAt,
-        roles_permissionsId: getId('HiveMaster'),
-        permissionId: getId('READ_INTEGRATIONS'),
-      },
-
-      {
-        createdAt,
-        updatedAt,
-        roles_permissionsId: getId('HiveMaster'),
-        permissionId: getId('UPDATE_INTEGRATIONS'),
-      },
-
-      {
-        createdAt,
-        updatedAt,
-        roles_permissionsId: getId('HiveMaster'),
-        permissionId: getId('DELETE_INTEGRATIONS'),
-      },
-
-      {
-        createdAt,
-        updatedAt,
-        roles_permissionsId: getId('BeeKeeper'),
-        permissionId: getId('CREATE_INTEGRATIONS'),
-      },
-
-      {
-        createdAt,
-        updatedAt,
-        roles_permissionsId: getId('BeeKeeper'),
-        permissionId: getId('READ_INTEGRATIONS'),
-      },
-
-      {
-        createdAt,
-        updatedAt,
-        roles_permissionsId: getId('TechSpecialist'),
-        permissionId: getId('CREATE_INTEGRATIONS'),
-      },
-
-      {
-        createdAt,
-        updatedAt,
-        roles_permissionsId: getId('TechSpecialist'),
-        permissionId: getId('READ_INTEGRATIONS'),
-      },
-
-      {
-        createdAt,
-        updatedAt,
-        roles_permissionsId: getId('DataViewer'),
-        permissionId: getId('CREATE_INTEGRATIONS'),
-      },
-
-      {
-        createdAt,
-        updatedAt,
-        roles_permissionsId: getId('DataViewer'),
-        permissionId: getId('READ_INTEGRATIONS'),
-      },
-
-      {
-        createdAt,
-        updatedAt,
-        roles_permissionsId: getId('GuestUser'),
-        permissionId: getId('CREATE_INTEGRATIONS'),
-      },
-
       {
         createdAt,
         updatedAt,
@@ -367,168 +290,77 @@ primary key ("roles_permissionsId", "permissionId")
         createdAt,
         updatedAt,
         roles_permissionsId: getId('HiveMaster'),
-        permissionId: getId('CREATE_SYSTEM_SETTINGS'),
+        permissionId: getId('CREATE_INTEGRATIONS'),
       },
 
       {
         createdAt,
         updatedAt,
         roles_permissionsId: getId('HiveMaster'),
-        permissionId: getId('READ_SYSTEM_SETTINGS'),
+        permissionId: getId('READ_INTEGRATIONS'),
       },
 
       {
         createdAt,
         updatedAt,
         roles_permissionsId: getId('HiveMaster'),
-        permissionId: getId('UPDATE_SYSTEM_SETTINGS'),
+        permissionId: getId('UPDATE_INTEGRATIONS'),
       },
 
       {
         createdAt,
         updatedAt,
         roles_permissionsId: getId('HiveMaster'),
-        permissionId: getId('DELETE_SYSTEM_SETTINGS'),
+        permissionId: getId('DELETE_INTEGRATIONS'),
       },
 
       {
         createdAt,
         updatedAt,
         roles_permissionsId: getId('BeeKeeper'),
-        permissionId: getId('CREATE_SYSTEM_SETTINGS'),
+        permissionId: getId('CREATE_INTEGRATIONS'),
       },
 
       {
         createdAt,
         updatedAt,
         roles_permissionsId: getId('BeeKeeper'),
-        permissionId: getId('READ_SYSTEM_SETTINGS'),
+        permissionId: getId('READ_INTEGRATIONS'),
-      },
-
-      {
-        createdAt,
-        updatedAt,
-        roles_permissionsId: getId('BeeKeeper'),
-        permissionId: getId('UPDATE_SYSTEM_SETTINGS'),
       },
 
       {
         createdAt,
         updatedAt,
         roles_permissionsId: getId('TechSpecialist'),
-        permissionId: getId('CREATE_SYSTEM_SETTINGS'),
+        permissionId: getId('CREATE_INTEGRATIONS'),
       },
 
       {
         createdAt,
         updatedAt,
         roles_permissionsId: getId('TechSpecialist'),
-        permissionId: getId('READ_SYSTEM_SETTINGS'),
+        permissionId: getId('READ_INTEGRATIONS'),
-      },
-
-      {
-        createdAt,
-        updatedAt,
-        roles_permissionsId: getId('TechSpecialist'),
-        permissionId: getId('UPDATE_SYSTEM_SETTINGS'),
       },
 
       {
         createdAt,
         updatedAt,
         roles_permissionsId: getId('DataViewer'),
-        permissionId: getId('CREATE_SYSTEM_SETTINGS'),
+        permissionId: getId('CREATE_INTEGRATIONS'),
       },
 
       {
         createdAt,
         updatedAt,
         roles_permissionsId: getId('DataViewer'),
-        permissionId: getId('READ_SYSTEM_SETTINGS'),
+        permissionId: getId('READ_INTEGRATIONS'),
       },
 
       {
         createdAt,
         updatedAt,
         roles_permissionsId: getId('GuestUser'),
-        permissionId: getId('CREATE_SYSTEM_SETTINGS'),
+        permissionId: getId('CREATE_INTEGRATIONS'),
-      },
-
-      {
-        createdAt,
-        updatedAt,
-        roles_permissionsId: getId('HiveMaster'),
-        permissionId: getId('CREATE_SYSTEM_STATUS'),
-      },
-
-      {
-        createdAt,
-        updatedAt,
-        roles_permissionsId: getId('HiveMaster'),
-        permissionId: getId('READ_SYSTEM_STATUS'),
-      },
-
-      {
-        createdAt,
-        updatedAt,
-        roles_permissionsId: getId('HiveMaster'),
-        permissionId: getId('UPDATE_SYSTEM_STATUS'),
-      },
-
-      {
-        createdAt,
-        updatedAt,
-        roles_permissionsId: getId('HiveMaster'),
-        permissionId: getId('DELETE_SYSTEM_STATUS'),
-      },
-
-      {
-        createdAt,
-        updatedAt,
-        roles_permissionsId: getId('BeeKeeper'),
-        permissionId: getId('CREATE_SYSTEM_STATUS'),
-      },
-
-      {
-        createdAt,
-        updatedAt,
-        roles_permissionsId: getId('BeeKeeper'),
-        permissionId: getId('READ_SYSTEM_STATUS'),
-      },
-
-      {
-        createdAt,
-        updatedAt,
-        roles_permissionsId: getId('TechSpecialist'),
-        permissionId: getId('CREATE_SYSTEM_STATUS'),
-      },
-
-      {
-        createdAt,
-        updatedAt,
-        roles_permissionsId: getId('TechSpecialist'),
-        permissionId: getId('READ_SYSTEM_STATUS'),
-      },
-
-      {
-        createdAt,
-        updatedAt,
-        roles_permissionsId: getId('DataViewer'),
-        permissionId: getId('CREATE_SYSTEM_STATUS'),
-      },
-
-      {
-        createdAt,
-        updatedAt,
-        roles_permissionsId: getId('DataViewer'),
-        permissionId: getId('READ_SYSTEM_STATUS'),
-      },
-
-      {
-        createdAt,
-        updatedAt,
-        roles_permissionsId: getId('GuestUser'),
-        permissionId: getId('CREATE_SYSTEM_STATUS'),
       },
 
       {
@@ -595,25 +427,25 @@ primary key ("roles_permissionsId", "permissionId")
         createdAt,
         updatedAt,
         roles_permissionsId: getId('Administrator'),
-        permissionId: getId('CREATE_INTEGRATIONS'),
+        permissionId: getId('CREATE_STATUS'),
       },
       {
         createdAt,
         updatedAt,
         roles_permissionsId: getId('Administrator'),
-        permissionId: getId('READ_INTEGRATIONS'),
+        permissionId: getId('READ_STATUS'),
       },
       {
         createdAt,
         updatedAt,
         roles_permissionsId: getId('Administrator'),
-        permissionId: getId('UPDATE_INTEGRATIONS'),
+        permissionId: getId('UPDATE_STATUS'),
       },
       {
         createdAt,
         updatedAt,
         roles_permissionsId: getId('Administrator'),
-        permissionId: getId('DELETE_INTEGRATIONS'),
+        permissionId: getId('DELETE_STATUS'),
       },
 
       {
@@ -645,50 +477,50 @@ primary key ("roles_permissionsId", "permissionId")
         createdAt,
         updatedAt,
         roles_permissionsId: getId('Administrator'),
-        permissionId: getId('CREATE_SYSTEM_SETTINGS'),
+        permissionId: getId('CREATE_INTEGRATIONS'),
       },
       {
         createdAt,
         updatedAt,
         roles_permissionsId: getId('Administrator'),
-        permissionId: getId('READ_SYSTEM_SETTINGS'),
+        permissionId: getId('READ_INTEGRATIONS'),
       },
       {
         createdAt,
         updatedAt,
         roles_permissionsId: getId('Administrator'),
-        permissionId: getId('UPDATE_SYSTEM_SETTINGS'),
+        permissionId: getId('UPDATE_INTEGRATIONS'),
       },
       {
         createdAt,
         updatedAt,
         roles_permissionsId: getId('Administrator'),
-        permissionId: getId('DELETE_SYSTEM_SETTINGS'),
+        permissionId: getId('DELETE_INTEGRATIONS'),
       },
 
       {
         createdAt,
         updatedAt,
         roles_permissionsId: getId('Administrator'),
-        permissionId: getId('CREATE_SYSTEM_STATUS'),
+        permissionId: getId('CREATE_SETTINGS'),
       },
       {
         createdAt,
         updatedAt,
         roles_permissionsId: getId('Administrator'),
-        permissionId: getId('READ_SYSTEM_STATUS'),
+        permissionId: getId('READ_SETTINGS'),
       },
       {
         createdAt,
         updatedAt,
         roles_permissionsId: getId('Administrator'),
-        permissionId: getId('UPDATE_SYSTEM_STATUS'),
+        permissionId: getId('UPDATE_SETTINGS'),
       },
       {
         createdAt,
         updatedAt,
         roles_permissionsId: getId('Administrator'),
-        permissionId: getId('DELETE_SYSTEM_STATUS'),
+        permissionId: getId('DELETE_SETTINGS'),
       },
 
       {

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

@@ -1,13 +1,77 @@
 const db = require('../models');
 const Users = db.users;
 
-const Integrations = db.integrations;
+const Status = db.status;
 
 const Sensors = db.sensors;
 
-const SystemSettings = db.system_settings;
+const Integrations = db.integrations;
 
-const SystemStatus = db.system_status;
+const Settings = db.settings;
+
+const StatusData = [
+  {
+    wifi_status: 'Gregor Mendel',
+
+    wifi_strength: 1,
+
+    sensor_status: true,
+
+    thingsboard_status: false,
+  },
+
+  {
+    wifi_status: 'Werner Heisenberg',
+
+    wifi_strength: 3,
+
+    sensor_status: false,
+
+    thingsboard_status: false,
+  },
+
+  {
+    wifi_status: 'Max Born',
+
+    wifi_strength: 3,
+
+    sensor_status: false,
+
+    thingsboard_status: false,
+  },
+];
+
+const SensorsData = [
+  {
+    name: 'Left Scale',
+
+    type: 'scale',
+
+    value: 12.5,
+
+    last_updated: new Date('2023-10-01T10:00:00Z'),
+  },
+
+  {
+    name: 'Right Scale',
+
+    type: 'temperature',
+
+    value: 13,
+
+    last_updated: new Date('2023-10-01T10:05:00Z'),
+  },
+
+  {
+    name: 'Temperature Sensor',
+
+    type: 'humidity',
+
+    value: 25.3,
+
+    last_updated: new Date('2023-10-01T10:10:00Z'),
+  },
+];
 
 const IntegrationsData = [
   {
@@ -23,7 +87,7 @@ const IntegrationsData = [
   },
 
   {
-    connection_status: false,
+    connection_status: true,
 
     customer_id: 'cust456',
 
@@ -45,249 +109,81 @@ const IntegrationsData = [
 
     thingsboard_key: 'key789',
   },
-
-  {
-    connection_status: true,
-
-    customer_id: 'cust012',
-
-    server_address: 'thingsboard.example.co',
-
-    provision_secret: 'secret012',
-
-    thingsboard_key: 'key012',
-  },
-
-  {
-    connection_status: true,
-
-    customer_id: 'cust345',
-
-    server_address: 'thingsboard.example.io',
-
-    provision_secret: 'secret345',
-
-    thingsboard_key: 'key345',
-  },
 ];
 
-const SensorsData = [
+const SettingsData = [
   {
-    name: 'Left Scale',
+    system_name: 'Jean Baptiste Lamarck',
 
-    type: 'scale',
+    location_text: 'Johannes Kepler',
 
-    value: 12.5,
+    latitude: 80.25,
 
-    last_updated: new Date('2023-10-01T10:00:00Z'),
+    longitude: 72.91,
+
+    wifi_ssid: 'Thomas Hunt Morgan',
+
+    wifi_password: 'Michael Faraday',
+
+    ip_mode: 'static',
+
+    ip_address: 'August Kekule',
+
+    sensor_selector: 'DS18B20',
   },
 
   {
-    name: 'Right Scale',
+    system_name: 'Jonas Salk',
 
-    type: 'scale',
+    location_text: 'Louis Victor de Broglie',
 
-    value: 13,
+    latitude: 91.51,
 
-    last_updated: new Date('2023-10-01T10:05:00Z'),
+    longitude: 12.35,
+
+    wifi_ssid: 'Murray Gell-Mann',
+
+    wifi_password: 'Albert Einstein',
+
+    ip_mode: 'static',
+
+    ip_address: 'Isaac Newton',
+
+    sensor_selector: 'DHT22',
   },
 
   {
-    name: 'Temperature Sensor',
+    system_name: 'Louis Victor de Broglie',
 
-    type: 'humidity',
+    location_text: 'Dmitri Mendeleev',
 
-    value: 25.3,
+    latitude: 47.18,
 
-    last_updated: new Date('2023-10-01T10:10:00Z'),
+    longitude: 19.03,
-  },
 
-  {
+    wifi_ssid: 'Ludwig Boltzmann',
-    name: 'Humidity Sensor',
 
-    type: 'temperature',
+    wifi_password: 'Ernest Rutherford',
-
-    value: 60.2,
-
-    last_updated: new Date('2023-10-01T10:15:00Z'),
-  },
-
-  {
-    name: 'Backup Scale',
-
-    type: 'scale',
-
-    value: 11.8,
-
-    last_updated: new Date('2023-10-01T10:20:00Z'),
-  },
-];
-
-const SystemSettingsData = [
-  {
-    system_name: 'Hive Monitor 1',
-
-    location_text: 'Garden Apiary',
-
-    latitude: 34.0522,
-
-    longitude: -118.2437,
-
-    wifi_ssid: 'BeehiveNet',
-
-    wifi_password: 'securepassword',
 
     ip_mode: 'dhcp',
 
-    ip_address: '192.168.1.10',
+    ip_address: 'Andreas Vesalius',
 
     sensor_selector: 'none',
   },
-
-  {
-    system_name: 'Hive Monitor 2',
-
-    location_text: 'Rooftop Apiary',
-
-    latitude: 40.7128,
-
-    longitude: -74.006,
-
-    wifi_ssid: 'HiveNetwork',
-
-    wifi_password: 'anotherpassword',
-
-    ip_mode: 'static',
-
-    ip_address: '192.168.1.11',
-
-    sensor_selector: 'DHT11',
-  },
-
-  {
-    system_name: 'Hive Monitor 3',
-
-    location_text: 'Field Apiary',
-
-    latitude: 51.5074,
-
-    longitude: -0.1278,
-
-    wifi_ssid: 'FieldNet',
-
-    wifi_password: 'fieldpassword',
-
-    ip_mode: 'static',
-
-    ip_address: '192.168.1.12',
-
-    sensor_selector: 'DHT11',
-  },
-
-  {
-    system_name: 'Hive Monitor 4',
-
-    location_text: 'Forest Apiary',
-
-    latitude: 48.8566,
-
-    longitude: 2.3522,
-
-    wifi_ssid: 'ForestNet',
-
-    wifi_password: 'forestpassword',
-
-    ip_mode: 'static',
-
-    ip_address: '192.168.1.13',
-
-    sensor_selector: 'DHT11',
-  },
-
-  {
-    system_name: 'Hive Monitor 5',
-
-    location_text: 'Urban Apiary',
-
-    latitude: 35.6895,
-
-    longitude: 139.6917,
-
-    wifi_ssid: 'UrbanNet',
-
-    wifi_password: 'urbanpassword',
-
-    ip_mode: 'static',
-
-    ip_address: '192.168.1.14',
-
-    sensor_selector: 'DHT11',
-  },
-];
-
-const SystemStatusData = [
-  {
-    wifi_status: 'Connected',
-
-    wifi_strength: 75,
-
-    sensor_status: true,
-
-    thingsboard_status: true,
-  },
-
-  {
-    wifi_status: 'Disconnected',
-
-    wifi_strength: 0,
-
-    sensor_status: false,
-
-    thingsboard_status: false,
-  },
-
-  {
-    wifi_status: 'Connected',
-
-    wifi_strength: 85,
-
-    sensor_status: true,
-
-    thingsboard_status: true,
-  },
-
-  {
-    wifi_status: 'Connected',
-
-    wifi_strength: 65,
-
-    sensor_status: true,
-
-    thingsboard_status: true,
-  },
-
-  {
-    wifi_status: 'Disconnected',
-
-    wifi_strength: 0,
-
-    sensor_status: false,
-
-    thingsboard_status: true,
-  },
 ];
 
 // Similar logic for "relation_many"
 
 module.exports = {
   up: async (queryInterface, Sequelize) => {
-    await Integrations.bulkCreate(IntegrationsData);
+    await Status.bulkCreate(StatusData);
 
     await Sensors.bulkCreate(SensorsData);
 
-    await SystemSettings.bulkCreate(SystemSettingsData);
+    await Integrations.bulkCreate(IntegrationsData);
 
-    await SystemStatus.bulkCreate(SystemStatusData);
+    await Settings.bulkCreate(SettingsData);
 
     await Promise.all([
       // Similar logic for "relation_many"
@@ -295,12 +191,12 @@ module.exports = {
   },
 
   down: async (queryInterface, Sequelize) => {
-    await queryInterface.bulkDelete('integrations', null, {});
+    await queryInterface.bulkDelete('status', null, {});
 
     await queryInterface.bulkDelete('sensors', null, {});
 
-    await queryInterface.bulkDelete('system_settings', null, {});
+    await queryInterface.bulkDelete('integrations', null, {});
 
-    await queryInterface.bulkDelete('system_status', null, {});
+    await queryInterface.bulkDelete('settings', null, {});
   },
 };

backend/src/db/seeders/20250602135337.js

@@ -0,0 +1,103 @@
+const { v4: uuid } = require('uuid');
+const db = require('../models');
+const Sequelize = require('sequelize');
+const config = require('../../config');
+
+module.exports = {
+  /**
+   * @param{import("sequelize").QueryInterface} queryInterface
+   * @return {Promise<void>}
+   */
+  async up(queryInterface) {
+    const createdAt = new Date();
+    const updatedAt = new Date();
+
+    /** @type {Map<string, string>} */
+    const idMap = new Map();
+
+    /**
+     * @param {string} key
+     * @return {string}
+     */
+    function getId(key) {
+      if (idMap.has(key)) {
+        return idMap.get(key);
+      }
+      const id = uuid();
+      idMap.set(key, id);
+      return id;
+    }
+
+    /**
+     * @param {string} name
+     */
+    function createPermissions(name) {
+      return [
+        {
+          id: getId(`CREATE_${name.toUpperCase()}`),
+          createdAt,
+          updatedAt,
+          name: `CREATE_${name.toUpperCase()}`,
+        },
+        {
+          id: getId(`READ_${name.toUpperCase()}`),
+          createdAt,
+          updatedAt,
+          name: `READ_${name.toUpperCase()}`,
+        },
+        {
+          id: getId(`UPDATE_${name.toUpperCase()}`),
+          createdAt,
+          updatedAt,
+          name: `UPDATE_${name.toUpperCase()}`,
+        },
+        {
+          id: getId(`DELETE_${name.toUpperCase()}`),
+          createdAt,
+          updatedAt,
+          name: `DELETE_${name.toUpperCase()}`,
+        },
+      ];
+    }
+
+    const entities = ['settings', 'status'];
+
+    const previousValues = ['system_settings', 'system_status'];
+    const createdPreviousPermissions =
+      previousValues.flatMap(createPermissions);
+    const namesPreviousPermissions = createdPreviousPermissions.map(
+      (p) => p.name,
+    );
+
+    const createdPermissions = entities.flatMap(createPermissions);
+
+    // Add permissions to database
+    await queryInterface.bulkInsert('permissions', createdPermissions);
+    // Get permissions ids
+    const permissionsIds = createdPermissions.map((p) => p.id);
+    // Get admin role
+    const adminRole = await db.roles.findOne({
+      where: { name: config.roles.admin },
+    });
+
+    if (adminRole) {
+      // Add permissions to admin role if it exists
+      await adminRole.addPermissions(permissionsIds);
+    }
+
+    // Remove previous permissions
+    await db.permissions.destroy({
+      where: {
+        name: {
+          [Sequelize.Op.in]: namesPreviousPermissions,
+        },
+      },
+    });
+  },
+  down: async (queryInterface, Sequelize) => {
+    await queryInterface.bulkDelete(
+      'permissions',
+      entities.flatMap(createPermissions),
+    );
+  },
+};

backend/src/index.js

@@ -19,13 +19,13 @@ const openaiRoutes = require('./routes/openai');
 
 const usersRoutes = require('./routes/users');
 
-const integrationsRoutes = require('./routes/integrations');
+const statusRoutes = require('./routes/status');
 
 const sensorsRoutes = require('./routes/sensors');
 
-const system_settingsRoutes = require('./routes/system_settings');
+const integrationsRoutes = require('./routes/integrations');
 
-const system_statusRoutes = require('./routes/system_status');
+const settingsRoutes = require('./routes/settings');
 
 const rolesRoutes = require('./routes/roles');
 
@@ -103,9 +103,9 @@ app.use(
 );
 
 app.use(
-  '/api/integrations',
+  '/api/status',
   passport.authenticate('jwt', { session: false }),
-  integrationsRoutes,
+  statusRoutes,
 );
 
 app.use(
@@ -115,15 +115,15 @@ app.use(
 );
 
 app.use(
-  '/api/system_settings',
+  '/api/integrations',
   passport.authenticate('jwt', { session: false }),
-  system_settingsRoutes,
+  integrationsRoutes,
 );
 
 app.use(
-  '/api/system_status',
+  '/api/settings',
   passport.authenticate('jwt', { session: false }),
-  system_statusRoutes,
+  settingsRoutes,
 );
 
 app.use(

backend/src/routes/settings.js

@@ -0,0 +1,469 @@
+const express = require('express');
+
+const SettingsService = require('../services/settings');
+const SettingsDBApi = require('../db/api/settings');
+const wrapAsync = require('../helpers').wrapAsync;
+
+const router = express.Router();
+
+const { parse } = require('json2csv');
+
+const { checkCrudPermissions } = require('../middlewares/check-permissions');
+
+router.use(checkCrudPermissions('settings'));
+
+/**
+ *  @swagger
+ *  components:
+ *    schemas:
+ *      Settings:
+ *        type: object
+ *        properties:
+
+ *          system_name:
+ *            type: string
+ *            default: system_name
+ *          location_text:
+ *            type: string
+ *            default: location_text
+ *          wifi_ssid:
+ *            type: string
+ *            default: wifi_ssid
+ *          wifi_password:
+ *            type: string
+ *            default: wifi_password
+ *          ip_address:
+ *            type: string
+ *            default: ip_address
+
+ *          latitude:
+ *            type: integer
+ *            format: int64
+ *          longitude:
+ *            type: integer
+ *            format: int64
+
+ *          
+ *          
+ */
+
+/**
+ *  @swagger
+ * tags:
+ *   name: Settings
+ *   description: The Settings managing API
+ */
+
+/**
+ *  @swagger
+ *  /api/settings:
+ *    post:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Settings]
+ *      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/Settings"
+ *      responses:
+ *        200:
+ *          description: The item was successfully added
+ *          content:
+ *            application/json:
+ *              schema:
+ *                $ref: "#/components/schemas/Settings"
+ *        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 SettingsService.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: [Settings]
+ *    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/Settings"
+ *    responses:
+ *      200:
+ *        description: The items were successfully imported
+ *    content:
+ *      application/json:
+ *        schema:
+ *          $ref: "#/components/schemas/Settings"
+ *      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 SettingsService.bulkImport(req, res, true, link.host);
+    const payload = true;
+    res.status(200).send(payload);
+  }),
+);
+
+/**
+ *  @swagger
+ *  /api/settings/{id}:
+ *    put:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Settings]
+ *      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/Settings"
+ *              required:
+ *                - id
+ *      responses:
+ *        200:
+ *          description: The item data was successfully updated
+ *          content:
+ *            application/json:
+ *              schema:
+ *                $ref: "#/components/schemas/Settings"
+ *        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 SettingsService.update(req.body.data, req.body.id, req.currentUser);
+    const payload = true;
+    res.status(200).send(payload);
+  }),
+);
+
+/**
+ * @swagger
+ *  /api/settings/{id}:
+ *    delete:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Settings]
+ *      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/Settings"
+ *        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 SettingsService.remove(req.params.id, req.currentUser);
+    const payload = true;
+    res.status(200).send(payload);
+  }),
+);
+
+/**
+ *  @swagger
+ *  /api/settings/deleteByIds:
+ *    post:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Settings]
+ *      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/Settings"
+ *        401:
+ *          $ref: "#/components/responses/UnauthorizedError"
+ *        404:
+ *          description: Items not found
+ *        500:
+ *          description: Some server error
+ */
+router.post(
+  '/deleteByIds',
+  wrapAsync(async (req, res) => {
+    await SettingsService.deleteByIds(req.body.data, req.currentUser);
+    const payload = true;
+    res.status(200).send(payload);
+  }),
+);
+
+/**
+ *  @swagger
+ *  /api/settings:
+ *    get:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Settings]
+ *      summary: Get all settings
+ *      description: Get all settings
+ *      responses:
+ *        200:
+ *          description: Settings list successfully received
+ *          content:
+ *            application/json:
+ *              schema:
+ *                type: array
+ *                items:
+ *                  $ref: "#/components/schemas/Settings"
+ *        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 SettingsDBApi.findAll(req.query, { currentUser });
+    if (filetype && filetype === 'csv') {
+      const fields = [
+        'id',
+        'system_name',
+        'location_text',
+        'wifi_ssid',
+        'wifi_password',
+        'ip_address',
+
+        'latitude',
+        'longitude',
+      ];
+      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/settings/count:
+ *    get:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Settings]
+ *      summary: Count all settings
+ *      description: Count all settings
+ *      responses:
+ *        200:
+ *          description: Settings count successfully received
+ *          content:
+ *            application/json:
+ *              schema:
+ *                type: array
+ *                items:
+ *                  $ref: "#/components/schemas/Settings"
+ *        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 SettingsDBApi.findAll(req.query, null, {
+      countOnly: true,
+      currentUser,
+    });
+
+    res.status(200).send(payload);
+  }),
+);
+
+/**
+ *  @swagger
+ *  /api/settings/autocomplete:
+ *    get:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Settings]
+ *      summary: Find all settings that match search criteria
+ *      description: Find all settings that match search criteria
+ *      responses:
+ *        200:
+ *          description: Settings list successfully received
+ *          content:
+ *            application/json:
+ *              schema:
+ *                type: array
+ *                items:
+ *                  $ref: "#/components/schemas/Settings"
+ *        401:
+ *          $ref: "#/components/responses/UnauthorizedError"
+ *        404:
+ *          description: Data not found
+ *        500:
+ *          description: Some server error
+ */
+router.get('/autocomplete', async (req, res) => {
+  const payload = await SettingsDBApi.findAllAutocomplete(
+    req.query.query,
+    req.query.limit,
+    req.query.offset,
+  );
+
+  res.status(200).send(payload);
+});
+
+/**
+ * @swagger
+ *  /api/settings/{id}:
+ *    get:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Settings]
+ *      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/Settings"
+ *        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 SettingsDBApi.findBy({ id: req.params.id });
+
+    res.status(200).send(payload);
+  }),
+);
+
+router.use('/', require('../helpers').commonErrorHandler);
+
+module.exports = router;

backend/src/routes/status.js

@@ -0,0 +1,437 @@
+const express = require('express');
+
+const StatusService = require('../services/status');
+const StatusDBApi = require('../db/api/status');
+const wrapAsync = require('../helpers').wrapAsync;
+
+const router = express.Router();
+
+const { parse } = require('json2csv');
+
+const { checkCrudPermissions } = require('../middlewares/check-permissions');
+
+router.use(checkCrudPermissions('status'));
+
+/**
+ *  @swagger
+ *  components:
+ *    schemas:
+ *      Status:
+ *        type: object
+ *        properties:
+
+ *          wifi_status:
+ *            type: string
+ *            default: wifi_status
+
+ *          wifi_strength:
+ *            type: integer
+ *            format: int64
+
+ */
+
+/**
+ *  @swagger
+ * tags:
+ *   name: Status
+ *   description: The Status managing API
+ */
+
+/**
+ *  @swagger
+ *  /api/status:
+ *    post:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Status]
+ *      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/Status"
+ *      responses:
+ *        200:
+ *          description: The item was successfully added
+ *          content:
+ *            application/json:
+ *              schema:
+ *                $ref: "#/components/schemas/Status"
+ *        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 StatusService.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: [Status]
+ *    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/Status"
+ *    responses:
+ *      200:
+ *        description: The items were successfully imported
+ *    content:
+ *      application/json:
+ *        schema:
+ *          $ref: "#/components/schemas/Status"
+ *      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 StatusService.bulkImport(req, res, true, link.host);
+    const payload = true;
+    res.status(200).send(payload);
+  }),
+);
+
+/**
+ *  @swagger
+ *  /api/status/{id}:
+ *    put:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Status]
+ *      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/Status"
+ *              required:
+ *                - id
+ *      responses:
+ *        200:
+ *          description: The item data was successfully updated
+ *          content:
+ *            application/json:
+ *              schema:
+ *                $ref: "#/components/schemas/Status"
+ *        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 StatusService.update(req.body.data, req.body.id, req.currentUser);
+    const payload = true;
+    res.status(200).send(payload);
+  }),
+);
+
+/**
+ * @swagger
+ *  /api/status/{id}:
+ *    delete:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Status]
+ *      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/Status"
+ *        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 StatusService.remove(req.params.id, req.currentUser);
+    const payload = true;
+    res.status(200).send(payload);
+  }),
+);
+
+/**
+ *  @swagger
+ *  /api/status/deleteByIds:
+ *    post:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Status]
+ *      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/Status"
+ *        401:
+ *          $ref: "#/components/responses/UnauthorizedError"
+ *        404:
+ *          description: Items not found
+ *        500:
+ *          description: Some server error
+ */
+router.post(
+  '/deleteByIds',
+  wrapAsync(async (req, res) => {
+    await StatusService.deleteByIds(req.body.data, req.currentUser);
+    const payload = true;
+    res.status(200).send(payload);
+  }),
+);
+
+/**
+ *  @swagger
+ *  /api/status:
+ *    get:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Status]
+ *      summary: Get all status
+ *      description: Get all status
+ *      responses:
+ *        200:
+ *          description: Status list successfully received
+ *          content:
+ *            application/json:
+ *              schema:
+ *                type: array
+ *                items:
+ *                  $ref: "#/components/schemas/Status"
+ *        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 StatusDBApi.findAll(req.query, { currentUser });
+    if (filetype && filetype === 'csv') {
+      const fields = ['id', 'wifi_status', 'wifi_strength'];
+      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/status/count:
+ *    get:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Status]
+ *      summary: Count all status
+ *      description: Count all status
+ *      responses:
+ *        200:
+ *          description: Status count successfully received
+ *          content:
+ *            application/json:
+ *              schema:
+ *                type: array
+ *                items:
+ *                  $ref: "#/components/schemas/Status"
+ *        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 StatusDBApi.findAll(req.query, null, {
+      countOnly: true,
+      currentUser,
+    });
+
+    res.status(200).send(payload);
+  }),
+);
+
+/**
+ *  @swagger
+ *  /api/status/autocomplete:
+ *    get:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Status]
+ *      summary: Find all status that match search criteria
+ *      description: Find all status that match search criteria
+ *      responses:
+ *        200:
+ *          description: Status list successfully received
+ *          content:
+ *            application/json:
+ *              schema:
+ *                type: array
+ *                items:
+ *                  $ref: "#/components/schemas/Status"
+ *        401:
+ *          $ref: "#/components/responses/UnauthorizedError"
+ *        404:
+ *          description: Data not found
+ *        500:
+ *          description: Some server error
+ */
+router.get('/autocomplete', async (req, res) => {
+  const payload = await StatusDBApi.findAllAutocomplete(
+    req.query.query,
+    req.query.limit,
+    req.query.offset,
+  );
+
+  res.status(200).send(payload);
+});
+
+/**
+ * @swagger
+ *  /api/status/{id}:
+ *    get:
+ *      security:
+ *        - bearerAuth: []
+ *      tags: [Status]
+ *      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/Status"
+ *        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 StatusDBApi.findBy({ id: req.params.id });
+
+    res.status(200).send(payload);
+  }),
+);
+
+router.use('/', require('../helpers').commonErrorHandler);
+
+module.exports = router;

backend/src/services/search.js

@@ -43,6 +43,10 @@ module.exports = class SearchService {
       const tableColumns = {
         users: ['firstName', 'lastName', 'phoneNumber', 'email'],
 
+        status: ['wifi_status'],
+
+        sensors: ['name'],
+
         integrations: [
           'customer_id',
 
@@ -53,9 +57,7 @@ module.exports = class SearchService {
           'thingsboard_key',
         ],
 
-        sensors: ['name'],
+        settings: [
-
-        system_settings: [
           'system_name',
 
           'location_text',
@@ -66,15 +68,13 @@ module.exports = class SearchService {
 
           'ip_address',
         ],
-
-        system_status: ['wifi_status'],
       };
       const columnsInt = {
+        status: ['wifi_strength'],
+
         sensors: ['value'],
 
-        system_settings: ['latitude', 'longitude'],
+        settings: ['latitude', 'longitude'],
-
-        system_status: ['wifi_strength'],
       };
 
       let allFoundRecords = [];

backend/src/services/settings.js

@@ -0,0 +1,114 @@
+const db = require('../db/models');
+const SettingsDBApi = require('../db/api/settings');
+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');
+
+module.exports = class SettingsService {
+  static async create(data, currentUser) {
+    const transaction = await db.sequelize.transaction();
+    try {
+      await SettingsDBApi.create(data, {
+        currentUser,
+        transaction,
+      });
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  static async bulkImport(req, res, sendInvitationEmails = true, host) {
+    const transaction = await db.sequelize.transaction();
+
+    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', async () => {
+            console.log('CSV results', results);
+            resolve();
+          })
+          .on('error', (error) => reject(error));
+      });
+
+      await SettingsDBApi.bulkImport(results, {
+        transaction,
+        ignoreDuplicates: true,
+        validate: true,
+        currentUser: req.currentUser,
+      });
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  static async update(data, id, currentUser) {
+    const transaction = await db.sequelize.transaction();
+    try {
+      let settings = await SettingsDBApi.findBy({ id }, { transaction });
+
+      if (!settings) {
+        throw new ValidationError('settingsNotFound');
+      }
+
+      const updatedSettings = await SettingsDBApi.update(id, data, {
+        currentUser,
+        transaction,
+      });
+
+      await transaction.commit();
+      return updatedSettings;
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  static async deleteByIds(ids, currentUser) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await SettingsDBApi.deleteByIds(ids, {
+        currentUser,
+        transaction,
+      });
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  static async remove(id, currentUser) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await SettingsDBApi.remove(id, {
+        currentUser,
+        transaction,
+      });
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+};

backend/src/services/status.js

@@ -0,0 +1,114 @@
+const db = require('../db/models');
+const StatusDBApi = require('../db/api/status');
+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');
+
+module.exports = class StatusService {
+  static async create(data, currentUser) {
+    const transaction = await db.sequelize.transaction();
+    try {
+      await StatusDBApi.create(data, {
+        currentUser,
+        transaction,
+      });
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  static async bulkImport(req, res, sendInvitationEmails = true, host) {
+    const transaction = await db.sequelize.transaction();
+
+    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', async () => {
+            console.log('CSV results', results);
+            resolve();
+          })
+          .on('error', (error) => reject(error));
+      });
+
+      await StatusDBApi.bulkImport(results, {
+        transaction,
+        ignoreDuplicates: true,
+        validate: true,
+        currentUser: req.currentUser,
+      });
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  static async update(data, id, currentUser) {
+    const transaction = await db.sequelize.transaction();
+    try {
+      let status = await StatusDBApi.findBy({ id }, { transaction });
+
+      if (!status) {
+        throw new ValidationError('statusNotFound');
+      }
+
+      const updatedStatus = await StatusDBApi.update(id, data, {
+        currentUser,
+        transaction,
+      });
+
+      await transaction.commit();
+      return updatedStatus;
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  static async deleteByIds(ids, currentUser) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await StatusDBApi.deleteByIds(ids, {
+        currentUser,
+        transaction,
+      });
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  static async remove(id, currentUser) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await StatusDBApi.remove(id, {
+        currentUser,
+        transaction,
+      });
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+};

frontend/src/components/Settings/CardSettings.tsx

@@ -0,0 +1,197 @@
+import React from 'react';
+import ImageField from '../ImageField';
+import ListActionsPopover from '../ListActionsPopover';
+import { useAppSelector } from '../../stores/hooks';
+import dataFormatter from '../../helpers/dataFormatter';
+import { Pagination } from '../Pagination';
+import { saveFile } from '../../helpers/fileSaver';
+import LoadingSpinner from '../LoadingSpinner';
+import Link from 'next/link';
+
+import { hasPermission } from '../../helpers/userPermissions';
+
+type Props = {
+  settings: any[];
+  loading: boolean;
+  onDelete: (id: string) => void;
+  currentPage: number;
+  numPages: number;
+  onPageChange: (page: number) => void;
+};
+
+const CardSettings = ({
+  settings,
+  loading,
+  onDelete,
+  currentPage,
+  numPages,
+  onPageChange,
+}: Props) => {
+  const asideScrollbarsStyle = useAppSelector(
+    (state) => state.style.asideScrollbarsStyle,
+  );
+  const bgColor = useAppSelector((state) => state.style.cardsColor);
+  const darkMode = useAppSelector((state) => state.style.darkMode);
+  const corners = useAppSelector((state) => state.style.corners);
+  const focusRing = useAppSelector((state) => state.style.focusRingColor);
+
+  const currentUser = useAppSelector((state) => state.auth.currentUser);
+  const hasUpdatePermission = hasPermission(currentUser, 'UPDATE_SETTINGS');
+
+  return (
+    <div className={'p-4'}>
+      {loading && <LoadingSpinner />}
+      <ul
+        role='list'
+        className='grid grid-cols-1 gap-x-6 gap-y-8 lg:grid-cols-3 2xl:grid-cols-4 xl:gap-x-8'
+      >
+        {!loading &&
+          settings.map((item, index) => (
+            <li
+              key={item.id}
+              className={`overflow-hidden ${
+                corners !== 'rounded-full' ? corners : 'rounded-3xl'
+              } border  ${focusRing} border-gray-200 dark:border-dark-700 ${
+                darkMode ? 'aside-scrollbars-[slate]' : asideScrollbarsStyle
+              }`}
+            >
+              <div
+                className={`flex items-center ${bgColor} p-6  gap-x-4 border-b border-gray-900/5 bg-gray-50 dark:bg-dark-800 relative`}
+              >
+                <Link
+                  href={`/settings/settings-view/?id=${item.id}`}
+                  className='text-lg font-bold leading-6 line-clamp-1'
+                >
+                  {item.system_name}
+                </Link>
+
+                <div className='ml-auto '>
+                  <ListActionsPopover
+                    onDelete={onDelete}
+                    itemId={item.id}
+                    pathEdit={`/settings/settings-edit/?id=${item.id}`}
+                    pathView={`/settings/settings-view/?id=${item.id}`}
+                    hasUpdatePermission={hasUpdatePermission}
+                  />
+                </div>
+              </div>
+              <dl className='divide-y  divide-stone-300   dark:divide-dark-700 px-6 py-4 text-sm leading-6 h-64 overflow-y-auto'>
+                <div className='flex justify-between gap-x-4 py-3'>
+                  <dt className='  text-gray-500  dark:text-dark-600'>
+                    SystemName
+                  </dt>
+                  <dd className='flex items-start gap-x-2'>
+                    <div className='font-medium line-clamp-4'>
+                      {item.system_name}
+                    </div>
+                  </dd>
+                </div>
+
+                <div className='flex justify-between gap-x-4 py-3'>
+                  <dt className='  text-gray-500  dark:text-dark-600'>
+                    LocationText
+                  </dt>
+                  <dd className='flex items-start gap-x-2'>
+                    <div className='font-medium line-clamp-4'>
+                      {item.location_text}
+                    </div>
+                  </dd>
+                </div>
+
+                <div className='flex justify-between gap-x-4 py-3'>
+                  <dt className='  text-gray-500  dark:text-dark-600'>
+                    Latitude
+                  </dt>
+                  <dd className='flex items-start gap-x-2'>
+                    <div className='font-medium line-clamp-4'>
+                      {item.latitude}
+                    </div>
+                  </dd>
+                </div>
+
+                <div className='flex justify-between gap-x-4 py-3'>
+                  <dt className='  text-gray-500  dark:text-dark-600'>
+                    Longitude
+                  </dt>
+                  <dd className='flex items-start gap-x-2'>
+                    <div className='font-medium line-clamp-4'>
+                      {item.longitude}
+                    </div>
+                  </dd>
+                </div>
+
+                <div className='flex justify-between gap-x-4 py-3'>
+                  <dt className='  text-gray-500  dark:text-dark-600'>
+                    Wi-FiSSID
+                  </dt>
+                  <dd className='flex items-start gap-x-2'>
+                    <div className='font-medium line-clamp-4'>
+                      {item.wifi_ssid}
+                    </div>
+                  </dd>
+                </div>
+
+                <div className='flex justify-between gap-x-4 py-3'>
+                  <dt className='  text-gray-500  dark:text-dark-600'>
+                    Wi-FiPassword
+                  </dt>
+                  <dd className='flex items-start gap-x-2'>
+                    <div className='font-medium line-clamp-4'>
+                      {item.wifi_password}
+                    </div>
+                  </dd>
+                </div>
+
+                <div className='flex justify-between gap-x-4 py-3'>
+                  <dt className='  text-gray-500  dark:text-dark-600'>
+                    IPMode
+                  </dt>
+                  <dd className='flex items-start gap-x-2'>
+                    <div className='font-medium line-clamp-4'>
+                      {item.ip_mode}
+                    </div>
+                  </dd>
+                </div>
+
+                <div className='flex justify-between gap-x-4 py-3'>
+                  <dt className='  text-gray-500  dark:text-dark-600'>
+                    IPAddress
+                  </dt>
+                  <dd className='flex items-start gap-x-2'>
+                    <div className='font-medium line-clamp-4'>
+                      {item.ip_address}
+                    </div>
+                  </dd>
+                </div>
+
+                <div className='flex justify-between gap-x-4 py-3'>
+                  <dt className='  text-gray-500  dark:text-dark-600'>
+                    SensorSelector
+                  </dt>
+                  <dd className='flex items-start gap-x-2'>
+                    <div className='font-medium line-clamp-4'>
+                      {item.sensor_selector}
+                    </div>
+                  </dd>
+                </div>
+              </dl>
+            </li>
+          ))}
+        {!loading && settings.length === 0 && (
+          <div className='col-span-full flex items-center justify-center h-40'>
+            <p className=''>No data to display</p>
+          </div>
+        )}
+      </ul>
+      <div className={'flex items-center justify-center my-6'}>
+        <Pagination
+          currentPage={currentPage}
+          numPages={numPages}
+          setCurrentPage={onPageChange}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default CardSettings;

frontend/src/components/Settings/ListSettings.tsx

@@ -0,0 +1,133 @@
+import React from 'react';
+import CardBox from '../CardBox';
+import ImageField from '../ImageField';
+import dataFormatter from '../../helpers/dataFormatter';
+import { saveFile } from '../../helpers/fileSaver';
+import ListActionsPopover from '../ListActionsPopover';
+import { useAppSelector } from '../../stores/hooks';
+import { Pagination } from '../Pagination';
+import LoadingSpinner from '../LoadingSpinner';
+import Link from 'next/link';
+
+import { hasPermission } from '../../helpers/userPermissions';
+
+type Props = {
+  settings: any[];
+  loading: boolean;
+  onDelete: (id: string) => void;
+  currentPage: number;
+  numPages: number;
+  onPageChange: (page: number) => void;
+};
+
+const ListSettings = ({
+  settings,
+  loading,
+  onDelete,
+  currentPage,
+  numPages,
+  onPageChange,
+}: Props) => {
+  const currentUser = useAppSelector((state) => state.auth.currentUser);
+  const hasUpdatePermission = hasPermission(currentUser, 'UPDATE_SETTINGS');
+
+  const corners = useAppSelector((state) => state.style.corners);
+  const bgColor = useAppSelector((state) => state.style.cardsColor);
+
+  return (
+    <>
+      <div className='relative overflow-x-auto p-4 space-y-4'>
+        {loading && <LoadingSpinner />}
+        {!loading &&
+          settings.map((item) => (
+            <div key={item.id}>
+              <CardBox hasTable isList className={'rounded shadow-none'}>
+                <div
+                  className={`flex ${bgColor} ${
+                    corners !== 'rounded-full' ? corners : 'rounded-3xl'
+                  }  dark:bg-dark-900  border  border-stone-300  items-center overflow-hidden`}
+                >
+                  <Link
+                    href={`/settings/settings-view/?id=${item.id}`}
+                    className={
+                      'flex-1 px-4 py-6 h-24 flex divide-x-2  divide-stone-300   items-center overflow-hidden`}> dark:divide-dark-700 overflow-x-auto'
+                    }
+                  >
+                    <div className={'flex-1 px-3'}>
+                      <p className={'text-xs   text-gray-500 '}>SystemName</p>
+                      <p className={'line-clamp-2'}>{item.system_name}</p>
+                    </div>
+
+                    <div className={'flex-1 px-3'}>
+                      <p className={'text-xs   text-gray-500 '}>LocationText</p>
+                      <p className={'line-clamp-2'}>{item.location_text}</p>
+                    </div>
+
+                    <div className={'flex-1 px-3'}>
+                      <p className={'text-xs   text-gray-500 '}>Latitude</p>
+                      <p className={'line-clamp-2'}>{item.latitude}</p>
+                    </div>
+
+                    <div className={'flex-1 px-3'}>
+                      <p className={'text-xs   text-gray-500 '}>Longitude</p>
+                      <p className={'line-clamp-2'}>{item.longitude}</p>
+                    </div>
+
+                    <div className={'flex-1 px-3'}>
+                      <p className={'text-xs   text-gray-500 '}>Wi-FiSSID</p>
+                      <p className={'line-clamp-2'}>{item.wifi_ssid}</p>
+                    </div>
+
+                    <div className={'flex-1 px-3'}>
+                      <p className={'text-xs   text-gray-500 '}>
+                        Wi-FiPassword
+                      </p>
+                      <p className={'line-clamp-2'}>{item.wifi_password}</p>
+                    </div>
+
+                    <div className={'flex-1 px-3'}>
+                      <p className={'text-xs   text-gray-500 '}>IPMode</p>
+                      <p className={'line-clamp-2'}>{item.ip_mode}</p>
+                    </div>
+
+                    <div className={'flex-1 px-3'}>
+                      <p className={'text-xs   text-gray-500 '}>IPAddress</p>
+                      <p className={'line-clamp-2'}>{item.ip_address}</p>
+                    </div>
+
+                    <div className={'flex-1 px-3'}>
+                      <p className={'text-xs   text-gray-500 '}>
+                        SensorSelector
+                      </p>
+                      <p className={'line-clamp-2'}>{item.sensor_selector}</p>
+                    </div>
+                  </Link>
+                  <ListActionsPopover
+                    onDelete={onDelete}
+                    itemId={item.id}
+                    pathEdit={`/settings/settings-edit/?id=${item.id}`}
+                    pathView={`/settings/settings-view/?id=${item.id}`}
+                    hasUpdatePermission={hasUpdatePermission}
+                  />
+                </div>
+              </CardBox>
+            </div>
+          ))}
+        {!loading && settings.length === 0 && (
+          <div className='col-span-full flex items-center justify-center h-40'>
+            <p className=''>No data to display</p>
+          </div>
+        )}
+      </div>
+      <div className={'flex items-center justify-center my-6'}>
+        <Pagination
+          currentPage={currentPage}
+          numPages={numPages}
+          setCurrentPage={onPageChange}
+        />
+      </div>
+    </>
+  );
+};
+
+export default ListSettings;

frontend/src/components/Settings/TableSettings.tsx

@@ -0,0 +1,497 @@
+import React, { useEffect, useState, useMemo } from 'react';
+import { createPortal } from 'react-dom';
+import { ToastContainer, toast } from 'react-toastify';
+import BaseButton from '../BaseButton';
+import CardBoxModal from '../CardBoxModal';
+import CardBox from '../CardBox';
+import {
+  fetch,
+  update,
+  deleteItem,
+  setRefetch,
+  deleteItemsByIds,
+} from '../../stores/settings/settingsSlice';
+import { useAppDispatch, useAppSelector } from '../../stores/hooks';
+import { useRouter } from 'next/router';
+import { Field, Form, Formik } from 'formik';
+import { DataGrid, GridColDef } from '@mui/x-data-grid';
+import { loadColumns } from './configureSettingsCols';
+import _ from 'lodash';
+import dataFormatter from '../../helpers/dataFormatter';
+import { dataGridStyles } from '../../styles';
+
+import ListSettings from './ListSettings';
+
+const perPage = 10;
+
+const TableSampleSettings = ({
+  filterItems,
+  setFilterItems,
+  filters,
+  showGrid,
+}) => {
+  const notify = (type, msg) => toast(msg, { type, position: 'bottom-center' });
+
+  const dispatch = useAppDispatch();
+  const router = useRouter();
+
+  const pagesList = [];
+  const [id, setId] = useState(null);
+  const [currentPage, setCurrentPage] = useState(0);
+  const [filterRequest, setFilterRequest] = React.useState('');
+  const [columns, setColumns] = useState<GridColDef[]>([]);
+  const [selectedRows, setSelectedRows] = useState([]);
+  const [sortModel, setSortModel] = useState([
+    {
+      field: '',
+      sort: 'desc',
+    },
+  ]);
+
+  const {
+    settings,
+    loading,
+    count,
+    notify: settingsNotify,
+    refetch,
+  } = useAppSelector((state) => state.settings);
+  const { currentUser } = useAppSelector((state) => state.auth);
+  const focusRing = useAppSelector((state) => state.style.focusRingColor);
+  const bgColor = useAppSelector((state) => state.style.bgLayoutColor);
+  const corners = useAppSelector((state) => state.style.corners);
+  const numPages =
+    Math.floor(count / perPage) === 0 ? 1 : Math.ceil(count / perPage);
+  for (let i = 0; i < numPages; i++) {
+    pagesList.push(i);
+  }
+
+  const loadData = async (page = currentPage, request = filterRequest) => {
+    if (page !== currentPage) setCurrentPage(page);
+    if (request !== filterRequest) setFilterRequest(request);
+    const { sort, field } = sortModel[0];
+
+    const query = `?page=${page}&limit=${perPage}${request}&sort=${sort}&field=${field}`;
+    dispatch(fetch({ limit: perPage, page, query }));
+  };
+
+  useEffect(() => {
+    if (settingsNotify.showNotification) {
+      notify(settingsNotify.typeNotification, settingsNotify.textNotification);
+    }
+  }, [settingsNotify.showNotification]);
+
+  useEffect(() => {
+    if (!currentUser) return;
+    loadData();
+  }, [sortModel, currentUser]);
+
+  useEffect(() => {
+    if (refetch) {
+      loadData(0);
+      dispatch(setRefetch(false));
+    }
+  }, [refetch, dispatch]);
+
+  const [isModalInfoActive, setIsModalInfoActive] = useState(false);
+  const [isModalTrashActive, setIsModalTrashActive] = useState(false);
+
+  const handleModalAction = () => {
+    setIsModalInfoActive(false);
+    setIsModalTrashActive(false);
+  };
+
+  const handleDeleteModalAction = (id: string) => {
+    setId(id);
+    setIsModalTrashActive(true);
+  };
+  const handleDeleteAction = async () => {
+    if (id) {
+      await dispatch(deleteItem(id));
+      await loadData(0);
+      setIsModalTrashActive(false);
+    }
+  };
+
+  const generateFilterRequests = useMemo(() => {
+    let request = '&';
+    filterItems.forEach((item) => {
+      const isRangeFilter = filters.find(
+        (filter) =>
+          filter.title === item.fields.selectedField &&
+          (filter.number || filter.date),
+      );
+
+      if (isRangeFilter) {
+        const from = item.fields.filterValueFrom;
+        const to = item.fields.filterValueTo;
+        if (from) {
+          request += `${item.fields.selectedField}Range=${from}&`;
+        }
+        if (to) {
+          request += `${item.fields.selectedField}Range=${to}&`;
+        }
+      } else {
+        const value = item.fields.filterValue;
+        if (value) {
+          request += `${item.fields.selectedField}=${value}&`;
+        }
+      }
+    });
+    return request;
+  }, [filterItems, filters]);
+
+  const deleteFilter = (value) => {
+    const newItems = filterItems.filter((item) => item.id !== value);
+
+    if (newItems.length) {
+      setFilterItems(newItems);
+    } else {
+      loadData(0, '');
+
+      setFilterItems(newItems);
+    }
+  };
+
+  const handleSubmit = () => {
+    loadData(0, generateFilterRequests);
+  };
+
+  const handleChange = (id) => (e) => {
+    const value = e.target.value;
+    const name = e.target.name;
+
+    setFilterItems(
+      filterItems.map((item) => {
+        if (item.id !== id) return item;
+        if (name === 'selectedField') return { id, fields: { [name]: value } };
+
+        return { id, fields: { ...item.fields, [name]: value } };
+      }),
+    );
+  };
+
+  const handleReset = () => {
+    setFilterItems([]);
+    loadData(0, '');
+  };
+
+  const onPageChange = (page: number) => {
+    loadData(page);
+    setCurrentPage(page);
+  };
+
+  useEffect(() => {
+    if (!currentUser) return;
+
+    loadColumns(handleDeleteModalAction, `settings`, currentUser).then(
+      (newCols) => setColumns(newCols),
+    );
+  }, [currentUser]);
+
+  const handleTableSubmit = async (id: string, data) => {
+    if (!_.isEmpty(data)) {
+      await dispatch(update({ id, data }))
+        .unwrap()
+        .then((res) => res)
+        .catch((err) => {
+          throw new Error(err);
+        });
+    }
+  };
+
+  const onDeleteRows = async (selectedRows) => {
+    await dispatch(deleteItemsByIds(selectedRows));
+    await loadData(0);
+  };
+
+  const controlClasses =
+    'w-full py-2 px-2 my-2   rounded dark:placeholder-gray-400 ' +
+    ` ${bgColor} ${focusRing} ${corners} ` +
+    'dark:bg-slate-800 border';
+
+  const dataGrid = (
+    <div className='relative overflow-x-auto'>
+      <DataGrid
+        autoHeight
+        rowHeight={64}
+        sx={dataGridStyles}
+        className={'datagrid--table'}
+        getRowClassName={() => `datagrid--row`}
+        rows={settings ?? []}
+        columns={columns}
+        initialState={{
+          pagination: {
+            paginationModel: {
+              pageSize: 10,
+            },
+          },
+        }}
+        disableRowSelectionOnClick
+        onProcessRowUpdateError={(params) => {
+          console.log('Error', params);
+        }}
+        processRowUpdate={async (newRow, oldRow) => {
+          const data = dataFormatter.dataGridEditFormatter(newRow);
+
+          try {
+            await handleTableSubmit(newRow.id, data);
+            return newRow;
+          } catch {
+            return oldRow;
+          }
+        }}
+        sortingMode={'server'}
+        checkboxSelection
+        onRowSelectionModelChange={(ids) => {
+          setSelectedRows(ids);
+        }}
+        onSortModelChange={(params) => {
+          params.length
+            ? setSortModel(params)
+            : setSortModel([{ field: '', sort: 'desc' }]);
+        }}
+        rowCount={count}
+        pageSizeOptions={[10]}
+        paginationMode={'server'}
+        loading={loading}
+        onPaginationModelChange={(params) => {
+          onPageChange(params.page);
+        }}
+      />
+    </div>
+  );
+
+  return (
+    <>
+      {filterItems && Array.isArray(filterItems) && filterItems.length ? (
+        <CardBox>
+          <Formik
+            initialValues={{
+              checkboxes: ['lorem'],
+              switches: ['lorem'],
+              radio: 'lorem',
+            }}
+            onSubmit={() => null}
+          >
+            <Form>
+              <>
+                {filterItems &&
+                  filterItems.map((filterItem) => {
+                    return (
+                      <div key={filterItem.id} className='flex mb-4'>
+                        <div className='flex flex-col w-full mr-3'>
+                          <div className='  text-gray-500  font-bold'>
+                            Filter
+                          </div>
+                          <Field
+                            className={controlClasses}
+                            name='selectedField'
+                            id='selectedField'
+                            component='select'
+                            value={filterItem?.fields?.selectedField || ''}
+                            onChange={handleChange(filterItem.id)}
+                          >
+                            {filters.map((selectOption) => (
+                              <option
+                                key={selectOption.title}
+                                value={`${selectOption.title}`}
+                              >
+                                {selectOption.label}
+                              </option>
+                            ))}
+                          </Field>
+                        </div>
+                        {filters.find(
+                          (filter) =>
+                            filter.title === filterItem?.fields?.selectedField,
+                        )?.type === 'enum' ? (
+                          <div className='flex flex-col w-full mr-3'>
+                            <div className='text-gray-500 font-bold'>Value</div>
+                            <Field
+                              className={controlClasses}
+                              name='filterValue'
+                              id='filterValue'
+                              component='select'
+                              value={filterItem?.fields?.filterValue || ''}
+                              onChange={handleChange(filterItem.id)}
+                            >
+                              <option value=''>Select Value</option>
+                              {filters
+                                .find(
+                                  (filter) =>
+                                    filter.title ===
+                                    filterItem?.fields?.selectedField,
+                                )
+                                ?.options?.map((option) => (
+                                  <option key={option} value={option}>
+                                    {option}
+                                  </option>
+                                ))}
+                            </Field>
+                          </div>
+                        ) : filters.find(
+                            (filter) =>
+                              filter.title ===
+                              filterItem?.fields?.selectedField,
+                          )?.number ? (
+                          <div className='flex flex-row w-full mr-3'>
+                            <div className='flex flex-col w-full mr-3'>
+                              <div className='  text-gray-500  font-bold'>
+                                From
+                              </div>
+                              <Field
+                                className={controlClasses}
+                                name='filterValueFrom'
+                                placeholder='From'
+                                id='filterValueFrom'
+                                value={
+                                  filterItem?.fields?.filterValueFrom || ''
+                                }
+                                onChange={handleChange(filterItem.id)}
+                              />
+                            </div>
+                            <div className='flex flex-col w-full'>
+                              <div className='  text-gray-500  font-bold'>
+                                To
+                              </div>
+                              <Field
+                                className={controlClasses}
+                                name='filterValueTo'
+                                placeholder='to'
+                                id='filterValueTo'
+                                value={filterItem?.fields?.filterValueTo || ''}
+                                onChange={handleChange(filterItem.id)}
+                              />
+                            </div>
+                          </div>
+                        ) : filters.find(
+                            (filter) =>
+                              filter.title ===
+                              filterItem?.fields?.selectedField,
+                          )?.date ? (
+                          <div className='flex flex-row w-full mr-3'>
+                            <div className='flex flex-col w-full mr-3'>
+                              <div className='  text-gray-500  font-bold'>
+                                From
+                              </div>
+                              <Field
+                                className={controlClasses}
+                                name='filterValueFrom'
+                                placeholder='From'
+                                id='filterValueFrom'
+                                type='datetime-local'
+                                value={
+                                  filterItem?.fields?.filterValueFrom || ''
+                                }
+                                onChange={handleChange(filterItem.id)}
+                              />
+                            </div>
+                            <div className='flex flex-col w-full'>
+                              <div className='  text-gray-500  font-bold'>
+                                To
+                              </div>
+                              <Field
+                                className={controlClasses}
+                                name='filterValueTo'
+                                placeholder='to'
+                                id='filterValueTo'
+                                type='datetime-local'
+                                value={filterItem?.fields?.filterValueTo || ''}
+                                onChange={handleChange(filterItem.id)}
+                              />
+                            </div>
+                          </div>
+                        ) : (
+                          <div className='flex flex-col w-full mr-3'>
+                            <div className='  text-gray-500  font-bold'>
+                              Contains
+                            </div>
+                            <Field
+                              className={controlClasses}
+                              name='filterValue'
+                              placeholder='Contained'
+                              id='filterValue'
+                              value={filterItem?.fields?.filterValue || ''}
+                              onChange={handleChange(filterItem.id)}
+                            />
+                          </div>
+                        )}
+                        <div className='flex flex-col'>
+                          <div className='  text-gray-500  font-bold'>
+                            Action
+                          </div>
+                          <BaseButton
+                            className='my-2'
+                            type='reset'
+                            color='danger'
+                            label='Delete'
+                            onClick={() => {
+                              deleteFilter(filterItem.id);
+                            }}
+                          />
+                        </div>
+                      </div>
+                    );
+                  })}
+                <div className='flex'>
+                  <BaseButton
+                    className='my-2 mr-3'
+                    type='submit'
+                    color='info'
+                    label='Apply'
+                    onClick={handleSubmit}
+                  />
+                  <BaseButton
+                    className='my-2'
+                    type='reset'
+                    color='info'
+                    outline
+                    label='Cancel'
+                    onClick={handleReset}
+                  />
+                </div>
+              </>
+            </Form>
+          </Formik>
+        </CardBox>
+      ) : null}
+      <CardBoxModal
+        title='Please confirm'
+        buttonColor='info'
+        buttonLabel={loading ? 'Deleting...' : 'Confirm'}
+        isActive={isModalTrashActive}
+        onConfirm={handleDeleteAction}
+        onCancel={handleModalAction}
+      >
+        <p>Are you sure you want to delete this item?</p>
+      </CardBoxModal>
+
+      {settings && Array.isArray(settings) && !showGrid && (
+        <ListSettings
+          settings={settings}
+          loading={loading}
+          onDelete={handleDeleteModalAction}
+          currentPage={currentPage}
+          numPages={numPages}
+          onPageChange={onPageChange}
+        />
+      )}
+
+      {showGrid && dataGrid}
+
+      {selectedRows.length > 0 &&
+        createPortal(
+          <BaseButton
+            className='me-4'
+            color='danger'
+            label={`Delete ${selectedRows.length === 1 ? 'Row' : 'Rows'}`}
+            onClick={() => onDeleteRows(selectedRows)}
+          />,
+          document.getElementById('delete-rows-button'),
+        )}
+      <ToastContainer />
+    </>
+  );
+};
+
+export default TableSampleSettings;

frontend/src/components/Settings/configureSettingsCols.tsx

@@ -0,0 +1,174 @@
+import React from 'react';
+import BaseIcon from '../BaseIcon';
+import { mdiEye, mdiTrashCan, mdiPencilOutline } from '@mdi/js';
+import axios from 'axios';
+import {
+  GridActionsCellItem,
+  GridRowParams,
+  GridValueGetterParams,
+} from '@mui/x-data-grid';
+import ImageField from '../ImageField';
+import { saveFile } from '../../helpers/fileSaver';
+import dataFormatter from '../../helpers/dataFormatter';
+import DataGridMultiSelect from '../DataGridMultiSelect';
+import ListActionsPopover from '../ListActionsPopover';
+
+import { hasPermission } from '../../helpers/userPermissions';
+
+type Params = (id: string) => void;
+
+export const loadColumns = async (
+  onDelete: Params,
+  entityName: string,
+
+  user,
+) => {
+  async function callOptionsApi(entityName: string) {
+    if (!hasPermission(user, 'READ_' + entityName.toUpperCase())) return [];
+
+    try {
+      const data = await axios(`/${entityName}/autocomplete?limit=100`);
+      return data.data;
+    } catch (error) {
+      console.log(error);
+      return [];
+    }
+  }
+
+  const hasUpdatePermission = hasPermission(user, 'UPDATE_SETTINGS');
+
+  return [
+    {
+      field: 'system_name',
+      headerName: 'SystemName',
+      flex: 1,
+      minWidth: 120,
+      filterable: false,
+      headerClassName: 'datagrid--header',
+      cellClassName: 'datagrid--cell',
+
+      editable: hasUpdatePermission,
+    },
+
+    {
+      field: 'location_text',
+      headerName: 'LocationText',
+      flex: 1,
+      minWidth: 120,
+      filterable: false,
+      headerClassName: 'datagrid--header',
+      cellClassName: 'datagrid--cell',
+
+      editable: hasUpdatePermission,
+    },
+
+    {
+      field: 'latitude',
+      headerName: 'Latitude',
+      flex: 1,
+      minWidth: 120,
+      filterable: false,
+      headerClassName: 'datagrid--header',
+      cellClassName: 'datagrid--cell',
+
+      editable: hasUpdatePermission,
+
+      type: 'number',
+    },
+
+    {
+      field: 'longitude',
+      headerName: 'Longitude',
+      flex: 1,
+      minWidth: 120,
+      filterable: false,
+      headerClassName: 'datagrid--header',
+      cellClassName: 'datagrid--cell',
+
+      editable: hasUpdatePermission,
+
+      type: 'number',
+    },
+
+    {
+      field: 'wifi_ssid',
+      headerName: 'Wi-FiSSID',
+      flex: 1,
+      minWidth: 120,
+      filterable: false,
+      headerClassName: 'datagrid--header',
+      cellClassName: 'datagrid--cell',
+
+      editable: hasUpdatePermission,
+    },
+
+    {
+      field: 'wifi_password',
+      headerName: 'Wi-FiPassword',
+      flex: 1,
+      minWidth: 120,
+      filterable: false,
+      headerClassName: 'datagrid--header',
+      cellClassName: 'datagrid--cell',
+
+      editable: hasUpdatePermission,
+    },
+
+    {
+      field: 'ip_mode',
+      headerName: 'IPMode',
+      flex: 1,
+      minWidth: 120,
+      filterable: false,
+      headerClassName: 'datagrid--header',
+      cellClassName: 'datagrid--cell',
+
+      editable: hasUpdatePermission,
+    },
+
+    {
+      field: 'ip_address',
+      headerName: 'IPAddress',
+      flex: 1,
+      minWidth: 120,
+      filterable: false,
+      headerClassName: 'datagrid--header',
+      cellClassName: 'datagrid--cell',
+
+      editable: hasUpdatePermission,
+    },
+
+    {
+      field: 'sensor_selector',
+      headerName: 'SensorSelector',
+      flex: 1,
+      minWidth: 120,
+      filterable: false,
+      headerClassName: 'datagrid--header',
+      cellClassName: 'datagrid--cell',
+
+      editable: hasUpdatePermission,
+    },
+
+    {
+      field: 'actions',
+      type: 'actions',
+      minWidth: 30,
+      headerClassName: 'datagrid--header',
+      cellClassName: 'datagrid--cell',
+      getActions: (params: GridRowParams) => {
+        return [
+          <div key={params?.row?.id}>
+            <ListActionsPopover
+              onDelete={onDelete}
+              itemId={params?.row?.id}
+              pathEdit={`/settings/settings-edit/?id=${params?.row?.id}`}
+              pathView={`/settings/settings-view/?id=${params?.row?.id}`}
+              hasUpdatePermission={hasUpdatePermission}
+            />
+          </div>,
+        ];
+      },
+    },
+  ];
+};

frontend/src/components/Status/CardStatus.tsx

@@ -0,0 +1,142 @@
+import React from 'react';
+import ImageField from '../ImageField';
+import ListActionsPopover from '../ListActionsPopover';
+import { useAppSelector } from '../../stores/hooks';
+import dataFormatter from '../../helpers/dataFormatter';
+import { Pagination } from '../Pagination';
+import { saveFile } from '../../helpers/fileSaver';
+import LoadingSpinner from '../LoadingSpinner';
+import Link from 'next/link';
+
+import { hasPermission } from '../../helpers/userPermissions';
+
+type Props = {
+  status: any[];
+  loading: boolean;
+  onDelete: (id: string) => void;
+  currentPage: number;
+  numPages: number;
+  onPageChange: (page: number) => void;
+};
+
+const CardStatus = ({
+  status,
+  loading,
+  onDelete,
+  currentPage,
+  numPages,
+  onPageChange,
+}: Props) => {
+  const asideScrollbarsStyle = useAppSelector(
+    (state) => state.style.asideScrollbarsStyle,
+  );
+  const bgColor = useAppSelector((state) => state.style.cardsColor);
+  const darkMode = useAppSelector((state) => state.style.darkMode);
+  const corners = useAppSelector((state) => state.style.corners);
+  const focusRing = useAppSelector((state) => state.style.focusRingColor);
+
+  const currentUser = useAppSelector((state) => state.auth.currentUser);
+  const hasUpdatePermission = hasPermission(currentUser, 'UPDATE_STATUS');
+
+  return (
+    <div className={'p-4'}>
+      {loading && <LoadingSpinner />}
+      <ul
+        role='list'
+        className='grid grid-cols-1 gap-x-6 gap-y-8 lg:grid-cols-3 2xl:grid-cols-4 xl:gap-x-8'
+      >
+        {!loading &&
+          status.map((item, index) => (
+            <li
+              key={item.id}
+              className={`overflow-hidden ${
+                corners !== 'rounded-full' ? corners : 'rounded-3xl'
+              } border  ${focusRing} border-gray-200 dark:border-dark-700 ${
+                darkMode ? 'aside-scrollbars-[slate]' : asideScrollbarsStyle
+              }`}
+            >
+              <div
+                className={`flex items-center ${bgColor} p-6  gap-x-4 border-b border-gray-900/5 bg-gray-50 dark:bg-dark-800 relative`}
+              >
+                <Link
+                  href={`/status/status-view/?id=${item.id}`}
+                  className='text-lg font-bold leading-6 line-clamp-1'
+                >
+                  {item.wifi_status}
+                </Link>
+
+                <div className='ml-auto '>
+                  <ListActionsPopover
+                    onDelete={onDelete}
+                    itemId={item.id}
+                    pathEdit={`/status/status-edit/?id=${item.id}`}
+                    pathView={`/status/status-view/?id=${item.id}`}
+                    hasUpdatePermission={hasUpdatePermission}
+                  />
+                </div>
+              </div>
+              <dl className='divide-y  divide-stone-300   dark:divide-dark-700 px-6 py-4 text-sm leading-6 h-64 overflow-y-auto'>
+                <div className='flex justify-between gap-x-4 py-3'>
+                  <dt className='  text-gray-500  dark:text-dark-600'>
+                    Wi-FiStatus
+                  </dt>
+                  <dd className='flex items-start gap-x-2'>
+                    <div className='font-medium line-clamp-4'>
+                      {item.wifi_status}
+                    </div>
+                  </dd>
+                </div>
+
+                <div className='flex justify-between gap-x-4 py-3'>
+                  <dt className='  text-gray-500  dark:text-dark-600'>
+                    Wi-FiStrength
+                  </dt>
+                  <dd className='flex items-start gap-x-2'>
+                    <div className='font-medium line-clamp-4'>
+                      {item.wifi_strength}
+                    </div>
+                  </dd>
+                </div>
+
+                <div className='flex justify-between gap-x-4 py-3'>
+                  <dt className='  text-gray-500  dark:text-dark-600'>
+                    SensorStatus
+                  </dt>
+                  <dd className='flex items-start gap-x-2'>
+                    <div className='font-medium line-clamp-4'>
+                      {dataFormatter.booleanFormatter(item.sensor_status)}
+                    </div>
+                  </dd>
+                </div>
+
+                <div className='flex justify-between gap-x-4 py-3'>
+                  <dt className='  text-gray-500  dark:text-dark-600'>
+                    ThingsBoardStatus
+                  </dt>
+                  <dd className='flex items-start gap-x-2'>
+                    <div className='font-medium line-clamp-4'>
+                      {dataFormatter.booleanFormatter(item.thingsboard_status)}
+                    </div>
+                  </dd>
+                </div>
+              </dl>
+            </li>
+          ))}
+        {!loading && status.length === 0 && (
+          <div className='col-span-full flex items-center justify-center h-40'>
+            <p className=''>No data to display</p>
+          </div>
+        )}
+      </ul>
+      <div className={'flex items-center justify-center my-6'}>
+        <Pagination
+          currentPage={currentPage}
+          numPages={numPages}
+          setCurrentPage={onPageChange}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default CardStatus;

frontend/src/components/Status/ListStatus.tsx

@@ -0,0 +1,114 @@
+import React from 'react';
+import CardBox from '../CardBox';
+import ImageField from '../ImageField';
+import dataFormatter from '../../helpers/dataFormatter';
+import { saveFile } from '../../helpers/fileSaver';
+import ListActionsPopover from '../ListActionsPopover';
+import { useAppSelector } from '../../stores/hooks';
+import { Pagination } from '../Pagination';
+import LoadingSpinner from '../LoadingSpinner';
+import Link from 'next/link';
+
+import { hasPermission } from '../../helpers/userPermissions';
+
+type Props = {
+  status: any[];
+  loading: boolean;
+  onDelete: (id: string) => void;
+  currentPage: number;
+  numPages: number;
+  onPageChange: (page: number) => void;
+};
+
+const ListStatus = ({
+  status,
+  loading,
+  onDelete,
+  currentPage,
+  numPages,
+  onPageChange,
+}: Props) => {
+  const currentUser = useAppSelector((state) => state.auth.currentUser);
+  const hasUpdatePermission = hasPermission(currentUser, 'UPDATE_STATUS');
+
+  const corners = useAppSelector((state) => state.style.corners);
+  const bgColor = useAppSelector((state) => state.style.cardsColor);
+
+  return (
+    <>
+      <div className='relative overflow-x-auto p-4 space-y-4'>
+        {loading && <LoadingSpinner />}
+        {!loading &&
+          status.map((item) => (
+            <div key={item.id}>
+              <CardBox hasTable isList className={'rounded shadow-none'}>
+                <div
+                  className={`flex ${bgColor} ${
+                    corners !== 'rounded-full' ? corners : 'rounded-3xl'
+                  }  dark:bg-dark-900  border  border-stone-300  items-center overflow-hidden`}
+                >
+                  <Link
+                    href={`/status/status-view/?id=${item.id}`}
+                    className={
+                      'flex-1 px-4 py-6 h-24 flex divide-x-2  divide-stone-300   items-center overflow-hidden`}> dark:divide-dark-700 overflow-x-auto'
+                    }
+                  >
+                    <div className={'flex-1 px-3'}>
+                      <p className={'text-xs   text-gray-500 '}>Wi-FiStatus</p>
+                      <p className={'line-clamp-2'}>{item.wifi_status}</p>
+                    </div>
+
+                    <div className={'flex-1 px-3'}>
+                      <p className={'text-xs   text-gray-500 '}>
+                        Wi-FiStrength
+                      </p>
+                      <p className={'line-clamp-2'}>{item.wifi_strength}</p>
+                    </div>
+
+                    <div className={'flex-1 px-3'}>
+                      <p className={'text-xs   text-gray-500 '}>SensorStatus</p>
+                      <p className={'line-clamp-2'}>
+                        {dataFormatter.booleanFormatter(item.sensor_status)}
+                      </p>
+                    </div>
+
+                    <div className={'flex-1 px-3'}>
+                      <p className={'text-xs   text-gray-500 '}>
+                        ThingsBoardStatus
+                      </p>
+                      <p className={'line-clamp-2'}>
+                        {dataFormatter.booleanFormatter(
+                          item.thingsboard_status,
+                        )}
+                      </p>
+                    </div>
+                  </Link>
+                  <ListActionsPopover
+                    onDelete={onDelete}
+                    itemId={item.id}
+                    pathEdit={`/status/status-edit/?id=${item.id}`}
+                    pathView={`/status/status-view/?id=${item.id}`}
+                    hasUpdatePermission={hasUpdatePermission}
+                  />
+                </div>
+              </CardBox>
+            </div>
+          ))}
+        {!loading && status.length === 0 && (
+          <div className='col-span-full flex items-center justify-center h-40'>
+            <p className=''>No data to display</p>
+          </div>
+        )}
+      </div>
+      <div className={'flex items-center justify-center my-6'}>
+        <Pagination
+          currentPage={currentPage}
+          numPages={numPages}
+          setCurrentPage={onPageChange}
+        />
+      </div>
+    </>
+  );
+};
+
+export default ListStatus;

frontend/src/components/Status/TableStatus.tsx

@@ -0,0 +1,497 @@
+import React, { useEffect, useState, useMemo } from 'react';
+import { createPortal } from 'react-dom';
+import { ToastContainer, toast } from 'react-toastify';
+import BaseButton from '../BaseButton';
+import CardBoxModal from '../CardBoxModal';
+import CardBox from '../CardBox';
+import {
+  fetch,
+  update,
+  deleteItem,
+  setRefetch,
+  deleteItemsByIds,
+} from '../../stores/status/statusSlice';
+import { useAppDispatch, useAppSelector } from '../../stores/hooks';
+import { useRouter } from 'next/router';
+import { Field, Form, Formik } from 'formik';
+import { DataGrid, GridColDef } from '@mui/x-data-grid';
+import { loadColumns } from './configureStatusCols';
+import _ from 'lodash';
+import dataFormatter from '../../helpers/dataFormatter';
+import { dataGridStyles } from '../../styles';
+
+import CardStatus from './CardStatus';
+
+const perPage = 10;
+
+const TableSampleStatus = ({
+  filterItems,
+  setFilterItems,
+  filters,
+  showGrid,
+}) => {
+  const notify = (type, msg) => toast(msg, { type, position: 'bottom-center' });
+
+  const dispatch = useAppDispatch();
+  const router = useRouter();
+
+  const pagesList = [];
+  const [id, setId] = useState(null);
+  const [currentPage, setCurrentPage] = useState(0);
+  const [filterRequest, setFilterRequest] = React.useState('');
+  const [columns, setColumns] = useState<GridColDef[]>([]);
+  const [selectedRows, setSelectedRows] = useState([]);
+  const [sortModel, setSortModel] = useState([
+    {
+      field: '',
+      sort: 'desc',
+    },
+  ]);
+
+  const {
+    status,
+    loading,
+    count,
+    notify: statusNotify,
+    refetch,
+  } = useAppSelector((state) => state.status);
+  const { currentUser } = useAppSelector((state) => state.auth);
+  const focusRing = useAppSelector((state) => state.style.focusRingColor);
+  const bgColor = useAppSelector((state) => state.style.bgLayoutColor);
+  const corners = useAppSelector((state) => state.style.corners);
+  const numPages =
+    Math.floor(count / perPage) === 0 ? 1 : Math.ceil(count / perPage);
+  for (let i = 0; i < numPages; i++) {
+    pagesList.push(i);
+  }
+
+  const loadData = async (page = currentPage, request = filterRequest) => {
+    if (page !== currentPage) setCurrentPage(page);
+    if (request !== filterRequest) setFilterRequest(request);
+    const { sort, field } = sortModel[0];
+
+    const query = `?page=${page}&limit=${perPage}${request}&sort=${sort}&field=${field}`;
+    dispatch(fetch({ limit: perPage, page, query }));
+  };
+
+  useEffect(() => {
+    if (statusNotify.showNotification) {
+      notify(statusNotify.typeNotification, statusNotify.textNotification);
+    }
+  }, [statusNotify.showNotification]);
+
+  useEffect(() => {
+    if (!currentUser) return;
+    loadData();
+  }, [sortModel, currentUser]);
+
+  useEffect(() => {
+    if (refetch) {
+      loadData(0);
+      dispatch(setRefetch(false));
+    }
+  }, [refetch, dispatch]);
+
+  const [isModalInfoActive, setIsModalInfoActive] = useState(false);
+  const [isModalTrashActive, setIsModalTrashActive] = useState(false);
+
+  const handleModalAction = () => {
+    setIsModalInfoActive(false);
+    setIsModalTrashActive(false);
+  };
+
+  const handleDeleteModalAction = (id: string) => {
+    setId(id);
+    setIsModalTrashActive(true);
+  };
+  const handleDeleteAction = async () => {
+    if (id) {
+      await dispatch(deleteItem(id));
+      await loadData(0);
+      setIsModalTrashActive(false);
+    }
+  };
+
+  const generateFilterRequests = useMemo(() => {
+    let request = '&';
+    filterItems.forEach((item) => {
+      const isRangeFilter = filters.find(
+        (filter) =>
+          filter.title === item.fields.selectedField &&
+          (filter.number || filter.date),
+      );
+
+      if (isRangeFilter) {
+        const from = item.fields.filterValueFrom;
+        const to = item.fields.filterValueTo;
+        if (from) {
+          request += `${item.fields.selectedField}Range=${from}&`;
+        }
+        if (to) {
+          request += `${item.fields.selectedField}Range=${to}&`;
+        }
+      } else {
+        const value = item.fields.filterValue;
+        if (value) {
+          request += `${item.fields.selectedField}=${value}&`;
+        }
+      }
+    });
+    return request;
+  }, [filterItems, filters]);
+
+  const deleteFilter = (value) => {
+    const newItems = filterItems.filter((item) => item.id !== value);
+
+    if (newItems.length) {
+      setFilterItems(newItems);
+    } else {
+      loadData(0, '');
+
+      setFilterItems(newItems);
+    }
+  };
+
+  const handleSubmit = () => {
+    loadData(0, generateFilterRequests);
+  };
+
+  const handleChange = (id) => (e) => {
+    const value = e.target.value;
+    const name = e.target.name;
+
+    setFilterItems(
+      filterItems.map((item) => {
+        if (item.id !== id) return item;
+        if (name === 'selectedField') return { id, fields: { [name]: value } };
+
+        return { id, fields: { ...item.fields, [name]: value } };
+      }),
+    );
+  };
+
+  const handleReset = () => {
+    setFilterItems([]);
+    loadData(0, '');
+  };
+
+  const onPageChange = (page: number) => {
+    loadData(page);
+    setCurrentPage(page);
+  };
+
+  useEffect(() => {
+    if (!currentUser) return;
+
+    loadColumns(handleDeleteModalAction, `status`, currentUser).then(
+      (newCols) => setColumns(newCols),
+    );
+  }, [currentUser]);
+
+  const handleTableSubmit = async (id: string, data) => {
+    if (!_.isEmpty(data)) {
+      await dispatch(update({ id, data }))
+        .unwrap()
+        .then((res) => res)
+        .catch((err) => {
+          throw new Error(err);
+        });
+    }
+  };
+
+  const onDeleteRows = async (selectedRows) => {
+    await dispatch(deleteItemsByIds(selectedRows));
+    await loadData(0);
+  };
+
+  const controlClasses =
+    'w-full py-2 px-2 my-2   rounded dark:placeholder-gray-400 ' +
+    ` ${bgColor} ${focusRing} ${corners} ` +
+    'dark:bg-slate-800 border';
+
+  const dataGrid = (
+    <div className='relative overflow-x-auto'>
+      <DataGrid
+        autoHeight
+        rowHeight={64}
+        sx={dataGridStyles}
+        className={'datagrid--table'}
+        getRowClassName={() => `datagrid--row`}
+        rows={status ?? []}
+        columns={columns}
+        initialState={{
+          pagination: {
+            paginationModel: {
+              pageSize: 10,
+            },
+          },
+        }}
+        disableRowSelectionOnClick
+        onProcessRowUpdateError={(params) => {
+          console.log('Error', params);
+        }}
+        processRowUpdate={async (newRow, oldRow) => {
+          const data = dataFormatter.dataGridEditFormatter(newRow);
+
+          try {
+            await handleTableSubmit(newRow.id, data);
+            return newRow;
+          } catch {
+            return oldRow;
+          }
+        }}
+        sortingMode={'server'}
+        checkboxSelection
+        onRowSelectionModelChange={(ids) => {
+          setSelectedRows(ids);
+        }}
+        onSortModelChange={(params) => {
+          params.length
+            ? setSortModel(params)
+            : setSortModel([{ field: '', sort: 'desc' }]);
+        }}
+        rowCount={count}
+        pageSizeOptions={[10]}
+        paginationMode={'server'}
+        loading={loading}
+        onPaginationModelChange={(params) => {
+          onPageChange(params.page);
+        }}
+      />
+    </div>
+  );
+
+  return (
+    <>
+      {filterItems && Array.isArray(filterItems) && filterItems.length ? (
+        <CardBox>
+          <Formik
+            initialValues={{
+              checkboxes: ['lorem'],
+              switches: ['lorem'],
+              radio: 'lorem',
+            }}
+            onSubmit={() => null}
+          >
+            <Form>
+              <>
+                {filterItems &&
+                  filterItems.map((filterItem) => {
+                    return (
+                      <div key={filterItem.id} className='flex mb-4'>
+                        <div className='flex flex-col w-full mr-3'>
+                          <div className='  text-gray-500  font-bold'>
+                            Filter
+                          </div>
+                          <Field
+                            className={controlClasses}
+                            name='selectedField'
+                            id='selectedField'
+                            component='select'
+                            value={filterItem?.fields?.selectedField || ''}
+                            onChange={handleChange(filterItem.id)}
+                          >
+                            {filters.map((selectOption) => (
+                              <option
+                                key={selectOption.title}
+                                value={`${selectOption.title}`}
+                              >
+                                {selectOption.label}
+                              </option>
+                            ))}
+                          </Field>
+                        </div>
+                        {filters.find(
+                          (filter) =>
+                            filter.title === filterItem?.fields?.selectedField,
+                        )?.type === 'enum' ? (
+                          <div className='flex flex-col w-full mr-3'>
+                            <div className='text-gray-500 font-bold'>Value</div>
+                            <Field
+                              className={controlClasses}
+                              name='filterValue'
+                              id='filterValue'
+                              component='select'
+                              value={filterItem?.fields?.filterValue || ''}
+                              onChange={handleChange(filterItem.id)}
+                            >
+                              <option value=''>Select Value</option>
+                              {filters
+                                .find(
+                                  (filter) =>
+                                    filter.title ===
+                                    filterItem?.fields?.selectedField,
+                                )
+                                ?.options?.map((option) => (
+                                  <option key={option} value={option}>
+                                    {option}
+                                  </option>
+                                ))}
+                            </Field>
+                          </div>
+                        ) : filters.find(
+                            (filter) =>
+                              filter.title ===
+                              filterItem?.fields?.selectedField,
+                          )?.number ? (
+                          <div className='flex flex-row w-full mr-3'>
+                            <div className='flex flex-col w-full mr-3'>
+                              <div className='  text-gray-500  font-bold'>
+                                From
+                              </div>
+                              <Field
+                                className={controlClasses}
+                                name='filterValueFrom'
+                                placeholder='From'
+                                id='filterValueFrom'
+                                value={
+                                  filterItem?.fields?.filterValueFrom || ''
+                                }
+                                onChange={handleChange(filterItem.id)}
+                              />
+                            </div>
+                            <div className='flex flex-col w-full'>
+                              <div className='  text-gray-500  font-bold'>
+                                To
+                              </div>
+                              <Field
+                                className={controlClasses}
+                                name='filterValueTo'
+                                placeholder='to'
+                                id='filterValueTo'
+                                value={filterItem?.fields?.filterValueTo || ''}
+                                onChange={handleChange(filterItem.id)}
+                              />
+                            </div>
+                          </div>
+                        ) : filters.find(
+                            (filter) =>
+                              filter.title ===
+                              filterItem?.fields?.selectedField,
+                          )?.date ? (
+                          <div className='flex flex-row w-full mr-3'>
+                            <div className='flex flex-col w-full mr-3'>
+                              <div className='  text-gray-500  font-bold'>
+                                From
+                              </div>
+                              <Field
+                                className={controlClasses}
+                                name='filterValueFrom'
+                                placeholder='From'
+                                id='filterValueFrom'
+                                type='datetime-local'
+                                value={
+                                  filterItem?.fields?.filterValueFrom || ''
+                                }
+                                onChange={handleChange(filterItem.id)}
+                              />
+                            </div>
+                            <div className='flex flex-col w-full'>
+                              <div className='  text-gray-500  font-bold'>
+                                To
+                              </div>
+                              <Field
+                                className={controlClasses}
+                                name='filterValueTo'
+                                placeholder='to'
+                                id='filterValueTo'
+                                type='datetime-local'
+                                value={filterItem?.fields?.filterValueTo || ''}
+                                onChange={handleChange(filterItem.id)}
+                              />
+                            </div>
+                          </div>
+                        ) : (
+                          <div className='flex flex-col w-full mr-3'>
+                            <div className='  text-gray-500  font-bold'>
+                              Contains
+                            </div>
+                            <Field
+                              className={controlClasses}
+                              name='filterValue'
+                              placeholder='Contained'
+                              id='filterValue'
+                              value={filterItem?.fields?.filterValue || ''}
+                              onChange={handleChange(filterItem.id)}
+                            />
+                          </div>
+                        )}
+                        <div className='flex flex-col'>
+                          <div className='  text-gray-500  font-bold'>
+                            Action
+                          </div>
+                          <BaseButton
+                            className='my-2'
+                            type='reset'
+                            color='danger'
+                            label='Delete'
+                            onClick={() => {
+                              deleteFilter(filterItem.id);
+                            }}
+                          />
+                        </div>
+                      </div>
+                    );
+                  })}
+                <div className='flex'>
+                  <BaseButton
+                    className='my-2 mr-3'
+                    type='submit'
+                    color='info'
+                    label='Apply'
+                    onClick={handleSubmit}
+                  />
+                  <BaseButton
+                    className='my-2'
+                    type='reset'
+                    color='info'
+                    outline
+                    label='Cancel'
+                    onClick={handleReset}
+                  />
+                </div>
+              </>
+            </Form>
+          </Formik>
+        </CardBox>
+      ) : null}
+      <CardBoxModal
+        title='Please confirm'
+        buttonColor='info'
+        buttonLabel={loading ? 'Deleting...' : 'Confirm'}
+        isActive={isModalTrashActive}
+        onConfirm={handleDeleteAction}
+        onCancel={handleModalAction}
+      >
+        <p>Are you sure you want to delete this item?</p>
+      </CardBoxModal>
+
+      {status && Array.isArray(status) && !showGrid && (
+        <CardStatus
+          status={status}
+          loading={loading}
+          onDelete={handleDeleteModalAction}
+          currentPage={currentPage}
+          numPages={numPages}
+          onPageChange={onPageChange}
+        />
+      )}
+
+      {showGrid && dataGrid}
+
+      {selectedRows.length > 0 &&
+        createPortal(
+          <BaseButton
+            className='me-4'
+            color='danger'
+            label={`Delete ${selectedRows.length === 1 ? 'Row' : 'Rows'}`}
+            onClick={() => onDeleteRows(selectedRows)}
+          />,
+          document.getElementById('delete-rows-button'),
+        )}
+      <ToastContainer />
+    </>
+  );
+};
+
+export default TableSampleStatus;

frontend/src/components/Status/configureStatusCols.tsx

@@ -0,0 +1,116 @@
+import React from 'react';
+import BaseIcon from '../BaseIcon';
+import { mdiEye, mdiTrashCan, mdiPencilOutline } from '@mdi/js';
+import axios from 'axios';
+import {
+  GridActionsCellItem,
+  GridRowParams,
+  GridValueGetterParams,
+} from '@mui/x-data-grid';
+import ImageField from '../ImageField';
+import { saveFile } from '../../helpers/fileSaver';
+import dataFormatter from '../../helpers/dataFormatter';
+import DataGridMultiSelect from '../DataGridMultiSelect';
+import ListActionsPopover from '../ListActionsPopover';
+
+import { hasPermission } from '../../helpers/userPermissions';
+
+type Params = (id: string) => void;
+
+export const loadColumns = async (
+  onDelete: Params,
+  entityName: string,
+
+  user,
+) => {
+  async function callOptionsApi(entityName: string) {
+    if (!hasPermission(user, 'READ_' + entityName.toUpperCase())) return [];
+
+    try {
+      const data = await axios(`/${entityName}/autocomplete?limit=100`);
+      return data.data;
+    } catch (error) {
+      console.log(error);
+      return [];
+    }
+  }
+
+  const hasUpdatePermission = hasPermission(user, 'UPDATE_STATUS');
+
+  return [
+    {
+      field: 'wifi_status',
+      headerName: 'Wi-FiStatus',
+      flex: 1,
+      minWidth: 120,
+      filterable: false,
+      headerClassName: 'datagrid--header',
+      cellClassName: 'datagrid--cell',
+
+      editable: hasUpdatePermission,
+    },
+
+    {
+      field: 'wifi_strength',
+      headerName: 'Wi-FiStrength',
+      flex: 1,
+      minWidth: 120,
+      filterable: false,
+      headerClassName: 'datagrid--header',
+      cellClassName: 'datagrid--cell',
+
+      editable: hasUpdatePermission,
+
+      type: 'number',
+    },
+
+    {
+      field: 'sensor_status',
+      headerName: 'SensorStatus',
+      flex: 1,
+      minWidth: 120,
+      filterable: false,
+      headerClassName: 'datagrid--header',
+      cellClassName: 'datagrid--cell',
+
+      editable: hasUpdatePermission,
+
+      type: 'boolean',
+    },
+
+    {
+      field: 'thingsboard_status',
+      headerName: 'ThingsBoardStatus',
+      flex: 1,
+      minWidth: 120,
+      filterable: false,
+      headerClassName: 'datagrid--header',
+      cellClassName: 'datagrid--cell',
+
+      editable: hasUpdatePermission,
+
+      type: 'boolean',
+    },
+
+    {
+      field: 'actions',
+      type: 'actions',
+      minWidth: 30,
+      headerClassName: 'datagrid--header',
+      cellClassName: 'datagrid--cell',
+      getActions: (params: GridRowParams) => {
+        return [
+          <div key={params?.row?.id}>
+            <ListActionsPopover
+              onDelete={onDelete}
+              itemId={params?.row?.id}
+              pathEdit={`/status/status-edit/?id=${params?.row?.id}`}
+              pathView={`/status/status-view/?id=${params?.row?.id}`}
+              hasUpdatePermission={hasUpdatePermission}
+            />
+          </div>,
+        ];
+      },
+    },
+  ];
+};

frontend/src/menuAside.ts

@@ -17,15 +17,15 @@ const menuAside: MenuAsideItem[] = [
     permissions: 'READ_USERS',
   },
   {
-    href: '/integrations/integrations-list',
+    href: '/status/status-list',
-    label: 'Integrations',
+    label: 'Status',
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     icon:
-      'mdiCloudOutline' in icon
+      'mdiSignal' in icon
-        ? icon['mdiCloudOutline' as keyof typeof icon]
+        ? icon['mdiSignal' as keyof typeof icon]
         : icon.mdiTable ?? icon.mdiTable,
-    permissions: 'READ_INTEGRATIONS',
+    permissions: 'READ_STATUS',
   },
   {
     href: '/sensors/sensors-list',
@@ -39,26 +39,26 @@ const menuAside: MenuAsideItem[] = [
     permissions: 'READ_SENSORS',
   },
   {
-    href: '/system_settings/system_settings-list',
+    href: '/integrations/integrations-list',
-    label: 'System settings',
+    label: 'Integrations',
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    icon:
+      'mdiCloudOutline' in icon
+        ? icon['mdiCloudOutline' as keyof typeof icon]
+        : icon.mdiTable ?? icon.mdiTable,
+    permissions: 'READ_INTEGRATIONS',
+  },
+  {
+    href: '/settings/settings-list',
+    label: 'Settings',
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     icon:
       'mdiSettings' in icon
         ? icon['mdiSettings' as keyof typeof icon]
         : icon.mdiTable ?? icon.mdiTable,
-    permissions: 'READ_SYSTEM_SETTINGS',
+    permissions: 'READ_SETTINGS',
-  },
-  {
-    href: '/system_status/system_status-list',
-    label: 'System status',
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    icon:
-      'mdiSignal' in icon
-        ? icon['mdiSignal' as keyof typeof icon]
-        : icon.mdiTable ?? icon.mdiTable,
-    permissions: 'READ_SYSTEM_STATUS',
   },
   {
     href: '/roles/roles-list',

frontend/src/pages/dashboard.tsx

@@ -29,10 +29,10 @@ const Dashboard = () => {
   });
 
   const [users, setUsers] = React.useState(loadingMessage);
-  const [integrations, setIntegrations] = React.useState(loadingMessage);
+  const [status, setStatus] = React.useState(loadingMessage);
   const [sensors, setSensors] = React.useState(loadingMessage);
-  const [system_settings, setSystem_settings] = React.useState(loadingMessage);
+  const [integrations, setIntegrations] = React.useState(loadingMessage);
-  const [system_status, setSystem_status] = React.useState(loadingMessage);
+  const [settings, setSettings] = React.useState(loadingMessage);
   const [roles, setRoles] = React.useState(loadingMessage);
   const [permissions, setPermissions] = React.useState(loadingMessage);
 
@@ -47,19 +47,19 @@ const Dashboard = () => {
   async function loadData() {
     const entities = [
       'users',
-      'integrations',
+      'status',
       'sensors',
-      'system_settings',
+      'integrations',
-      'system_status',
+      'settings',
       'roles',
       'permissions',
     ];
     const fns = [
       setUsers,
-      setIntegrations,
+      setStatus,
       setSensors,
-      setSystem_settings,
+      setIntegrations,
-      setSystem_status,
+      setSettings,
       setRoles,
       setPermissions,
     ];
@@ -208,8 +208,8 @@ const Dashboard = () => {
             </Link>
           )}
 
-          {hasPermission(currentUser, 'READ_INTEGRATIONS') && (
+          {hasPermission(currentUser, 'READ_STATUS') && (
-            <Link href={'/integrations/integrations-list'}>
+            <Link href={'/status/status-list'}>
               <div
                 className={`${
                   corners !== 'rounded-full' ? corners : 'rounded-3xl'
@@ -218,10 +218,10 @@ const Dashboard = () => {
                 <div className='flex justify-between align-center'>
                   <div>
                     <div className='text-lg leading-tight   text-gray-500 dark:text-gray-400'>
-                      Integrations
+                      Status
                     </div>
                     <div className='text-3xl leading-tight font-semibold'>
-                      {integrations}
+                      {status}
                     </div>
                   </div>
                   <div>
@@ -233,8 +233,8 @@ const Dashboard = () => {
                       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                       // @ts-ignore
                       path={
-                        'mdiCloudOutline' in icon
+                        'mdiSignal' in icon
-                          ? icon['mdiCloudOutline' as keyof typeof icon]
+                          ? icon['mdiSignal' as keyof typeof icon]
                           : icon.mdiTable || icon.mdiTable
                       }
                     />
@@ -280,8 +280,8 @@ const Dashboard = () => {
             </Link>
           )}
 
-          {hasPermission(currentUser, 'READ_SYSTEM_SETTINGS') && (
+          {hasPermission(currentUser, 'READ_INTEGRATIONS') && (
-            <Link href={'/system_settings/system_settings-list'}>
+            <Link href={'/integrations/integrations-list'}>
               <div
                 className={`${
                   corners !== 'rounded-full' ? corners : 'rounded-3xl'
@@ -290,10 +290,46 @@ const Dashboard = () => {
                 <div className='flex justify-between align-center'>
                   <div>
                     <div className='text-lg leading-tight   text-gray-500 dark:text-gray-400'>
-                      System settings
+                      Integrations
                     </div>
                     <div className='text-3xl leading-tight font-semibold'>
-                      {system_settings}
+                      {integrations}
+                    </div>
+                  </div>
+                  <div>
+                    <BaseIcon
+                      className={`${iconsColor}`}
+                      w='w-16'
+                      h='h-16'
+                      size={48}
+                      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                      // @ts-ignore
+                      path={
+                        'mdiCloudOutline' in icon
+                          ? icon['mdiCloudOutline' as keyof typeof icon]
+                          : icon.mdiTable || icon.mdiTable
+                      }
+                    />
+                  </div>
+                </div>
+              </div>
+            </Link>
+          )}
+
+          {hasPermission(currentUser, 'READ_SETTINGS') && (
+            <Link href={'/settings/settings-list'}>
+              <div
+                className={`${
+                  corners !== 'rounded-full' ? corners : 'rounded-3xl'
+                } dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
+              >
+                <div className='flex justify-between align-center'>
+                  <div>
+                    <div className='text-lg leading-tight   text-gray-500 dark:text-gray-400'>
+                      Settings
+                    </div>
+                    <div className='text-3xl leading-tight font-semibold'>
+                      {settings}
                     </div>
                   </div>
                   <div>
@@ -316,42 +352,6 @@ const Dashboard = () => {
             </Link>
           )}
 
-          {hasPermission(currentUser, 'READ_SYSTEM_STATUS') && (
-            <Link href={'/system_status/system_status-list'}>
-              <div
-                className={`${
-                  corners !== 'rounded-full' ? corners : 'rounded-3xl'
-                } dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-              >
-                <div className='flex justify-between align-center'>
-                  <div>
-                    <div className='text-lg leading-tight   text-gray-500 dark:text-gray-400'>
-                      System status
-                    </div>
-                    <div className='text-3xl leading-tight font-semibold'>
-                      {system_status}
-                    </div>
-                  </div>
-                  <div>
-                    <BaseIcon
-                      className={`${iconsColor}`}
-                      w='w-16'
-                      h='h-16'
-                      size={48}
-                      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                      // @ts-ignore
-                      path={
-                        'mdiSignal' in icon
-                          ? icon['mdiSignal' as keyof typeof icon]
-                          : icon.mdiTable || icon.mdiTable
-                      }
-                    />
-                  </div>
-                </div>
-              </div>
-            </Link>
-          )}
-
           {hasPermission(currentUser, 'READ_ROLES') && (
             <Link href={'/roles/roles-list'}>
               <div

frontend/src/pages/settings/[settingsId].tsx

@@ -0,0 +1,188 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js';
+import Head from 'next/head';
+import React, { ReactElement, useEffect, useState } from 'react';
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+import dayjs from 'dayjs';
+
+import CardBox from '../../components/CardBox';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import SectionMain from '../../components/SectionMain';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import { getPageTitle } from '../../config';
+
+import { Field, Form, Formik } from 'formik';
+import FormField from '../../components/FormField';
+import BaseDivider from '../../components/BaseDivider';
+import BaseButtons from '../../components/BaseButtons';
+import BaseButton from '../../components/BaseButton';
+import FormCheckRadio from '../../components/FormCheckRadio';
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup';
+import FormFilePicker from '../../components/FormFilePicker';
+import FormImagePicker from '../../components/FormImagePicker';
+import { SelectField } from '../../components/SelectField';
+import { SelectFieldMany } from '../../components/SelectFieldMany';
+import { SwitchField } from '../../components/SwitchField';
+import { RichTextField } from '../../components/RichTextField';
+
+import { update, fetch } from '../../stores/settings/settingsSlice';
+import { useAppDispatch, useAppSelector } from '../../stores/hooks';
+import { useRouter } from 'next/router';
+import { saveFile } from '../../helpers/fileSaver';
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from '../../components/ImageField';
+
+const EditSettings = () => {
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+  const initVals = {
+    system_name: '',
+
+    location_text: '',
+
+    latitude: '',
+
+    longitude: '',
+
+    wifi_ssid: '',
+
+    wifi_password: '',
+
+    ip_mode: '',
+
+    ip_address: '',
+
+    sensor_selector: '',
+  };
+  const [initialValues, setInitialValues] = useState(initVals);
+
+  const { settings } = useAppSelector((state) => state.settings);
+
+  const { settingsId } = router.query;
+
+  useEffect(() => {
+    dispatch(fetch({ id: settingsId }));
+  }, [settingsId]);
+
+  useEffect(() => {
+    if (typeof settings === 'object') {
+      setInitialValues(settings);
+    }
+  }, [settings]);
+
+  useEffect(() => {
+    if (typeof settings === 'object') {
+      const newInitialVal = { ...initVals };
+
+      Object.keys(initVals).forEach((el) => (newInitialVal[el] = settings[el]));
+
+      setInitialValues(newInitialVal);
+    }
+  }, [settings]);
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: settingsId, data }));
+    await router.push('/settings/settings-list');
+  };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit settings')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title={'Edit settings'}
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+              <FormField label='SystemName'>
+                <Field name='system_name' placeholder='SystemName' />
+              </FormField>
+
+              <FormField label='LocationText'>
+                <Field name='location_text' placeholder='LocationText' />
+              </FormField>
+
+              <FormField label='Latitude'>
+                <Field type='number' name='latitude' placeholder='Latitude' />
+              </FormField>
+
+              <FormField label='Longitude'>
+                <Field type='number' name='longitude' placeholder='Longitude' />
+              </FormField>
+
+              <FormField label='Wi-FiSSID'>
+                <Field name='wifi_ssid' placeholder='Wi-FiSSID' />
+              </FormField>
+
+              <FormField label='Wi-FiPassword'>
+                <Field name='wifi_password' placeholder='Wi-FiPassword' />
+              </FormField>
+
+              <FormField label='IPMode' labelFor='ip_mode'>
+                <Field name='ip_mode' id='ip_mode' component='select'>
+                  <option value='static'>static</option>
+
+                  <option value='dhcp'>dhcp</option>
+                </Field>
+              </FormField>
+
+              <FormField label='IPAddress'>
+                <Field name='ip_address' placeholder='IPAddress' />
+              </FormField>
+
+              <FormField label='SensorSelector' labelFor='sensor_selector'>
+                <Field
+                  name='sensor_selector'
+                  id='sensor_selector'
+                  component='select'
+                >
+                  <option value='none'>none</option>
+
+                  <option value='DHT11'>DHT11</option>
+
+                  <option value='DHT22'>DHT22</option>
+
+                  <option value='DS18B20'>DS18B20</option>
+                </Field>
+              </FormField>
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type='submit' color='info' label='Submit' />
+                <BaseButton type='reset' color='info' outline label='Reset' />
+                <BaseButton
+                  type='reset'
+                  color='danger'
+                  outline
+                  label='Cancel'
+                  onClick={() => router.push('/settings/settings-list')}
+                />
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  );
+};
+
+EditSettings.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'UPDATE_SETTINGS'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default EditSettings;

frontend/src/pages/settings/settings-edit.tsx

@@ -0,0 +1,186 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js';
+import Head from 'next/head';
+import React, { ReactElement, useEffect, useState } from 'react';
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+import dayjs from 'dayjs';
+
+import CardBox from '../../components/CardBox';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import SectionMain from '../../components/SectionMain';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import { getPageTitle } from '../../config';
+
+import { Field, Form, Formik } from 'formik';
+import FormField from '../../components/FormField';
+import BaseDivider from '../../components/BaseDivider';
+import BaseButtons from '../../components/BaseButtons';
+import BaseButton from '../../components/BaseButton';
+import FormCheckRadio from '../../components/FormCheckRadio';
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup';
+import FormFilePicker from '../../components/FormFilePicker';
+import FormImagePicker from '../../components/FormImagePicker';
+import { SelectField } from '../../components/SelectField';
+import { SelectFieldMany } from '../../components/SelectFieldMany';
+import { SwitchField } from '../../components/SwitchField';
+import { RichTextField } from '../../components/RichTextField';
+
+import { update, fetch } from '../../stores/settings/settingsSlice';
+import { useAppDispatch, useAppSelector } from '../../stores/hooks';
+import { useRouter } from 'next/router';
+import { saveFile } from '../../helpers/fileSaver';
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from '../../components/ImageField';
+
+const EditSettingsPage = () => {
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+  const initVals = {
+    system_name: '',
+
+    location_text: '',
+
+    latitude: '',
+
+    longitude: '',
+
+    wifi_ssid: '',
+
+    wifi_password: '',
+
+    ip_mode: '',
+
+    ip_address: '',
+
+    sensor_selector: '',
+  };
+  const [initialValues, setInitialValues] = useState(initVals);
+
+  const { settings } = useAppSelector((state) => state.settings);
+
+  const { id } = router.query;
+
+  useEffect(() => {
+    dispatch(fetch({ id: id }));
+  }, [id]);
+
+  useEffect(() => {
+    if (typeof settings === 'object') {
+      setInitialValues(settings);
+    }
+  }, [settings]);
+
+  useEffect(() => {
+    if (typeof settings === 'object') {
+      const newInitialVal = { ...initVals };
+      Object.keys(initVals).forEach((el) => (newInitialVal[el] = settings[el]));
+      setInitialValues(newInitialVal);
+    }
+  }, [settings]);
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: id, data }));
+    await router.push('/settings/settings-list');
+  };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit settings')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title={'Edit settings'}
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+              <FormField label='SystemName'>
+                <Field name='system_name' placeholder='SystemName' />
+              </FormField>
+
+              <FormField label='LocationText'>
+                <Field name='location_text' placeholder='LocationText' />
+              </FormField>
+
+              <FormField label='Latitude'>
+                <Field type='number' name='latitude' placeholder='Latitude' />
+              </FormField>
+
+              <FormField label='Longitude'>
+                <Field type='number' name='longitude' placeholder='Longitude' />
+              </FormField>
+
+              <FormField label='Wi-FiSSID'>
+                <Field name='wifi_ssid' placeholder='Wi-FiSSID' />
+              </FormField>
+
+              <FormField label='Wi-FiPassword'>
+                <Field name='wifi_password' placeholder='Wi-FiPassword' />
+              </FormField>
+
+              <FormField label='IPMode' labelFor='ip_mode'>
+                <Field name='ip_mode' id='ip_mode' component='select'>
+                  <option value='static'>static</option>
+
+                  <option value='dhcp'>dhcp</option>
+                </Field>
+              </FormField>
+
+              <FormField label='IPAddress'>
+                <Field name='ip_address' placeholder='IPAddress' />
+              </FormField>
+
+              <FormField label='SensorSelector' labelFor='sensor_selector'>
+                <Field
+                  name='sensor_selector'
+                  id='sensor_selector'
+                  component='select'
+                >
+                  <option value='none'>none</option>
+
+                  <option value='DHT11'>DHT11</option>
+
+                  <option value='DHT22'>DHT22</option>
+
+                  <option value='DS18B20'>DS18B20</option>
+                </Field>
+              </FormField>
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type='submit' color='info' label='Submit' />
+                <BaseButton type='reset' color='info' outline label='Reset' />
+                <BaseButton
+                  type='reset'
+                  color='danger'
+                  outline
+                  label='Cancel'
+                  onClick={() => router.push('/settings/settings-list')}
+                />
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  );
+};
+
+EditSettingsPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'UPDATE_SETTINGS'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default EditSettingsPage;

frontend/src/pages/settings/settings-list.tsx

@@ -0,0 +1,188 @@
+import { mdiChartTimelineVariant } from '@mdi/js';
+import Head from 'next/head';
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react';
+import CardBox from '../../components/CardBox';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import SectionMain from '../../components/SectionMain';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import { getPageTitle } from '../../config';
+import TableSettings from '../../components/Settings/TableSettings';
+import BaseButton from '../../components/BaseButton';
+import axios from 'axios';
+import Link from 'next/link';
+import { useAppDispatch, useAppSelector } from '../../stores/hooks';
+import CardBoxModal from '../../components/CardBoxModal';
+import DragDropFilePicker from '../../components/DragDropFilePicker';
+import { setRefetch, uploadCsv } from '../../stores/settings/settingsSlice';
+
+import { hasPermission } from '../../helpers/userPermissions';
+
+const SettingsTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  const { currentUser } = useAppSelector((state) => state.auth);
+
+  const dispatch = useAppDispatch();
+
+  const [filters] = useState([
+    { label: 'SystemName', title: 'system_name' },
+    { label: 'LocationText', title: 'location_text' },
+    { label: 'Wi-FiSSID', title: 'wifi_ssid' },
+    { label: 'Wi-FiPassword', title: 'wifi_password' },
+    { label: 'IPAddress', title: 'ip_address' },
+
+    { label: 'Latitude', title: 'latitude', number: 'true' },
+    { label: 'Longitude', title: 'longitude', number: 'true' },
+
+    {
+      label: 'IPMode',
+      title: 'ip_mode',
+      type: 'enum',
+      options: ['static', 'dhcp'],
+    },
+    {
+      label: 'SensorSelector',
+      title: 'sensor_selector',
+      type: 'enum',
+      options: ['none', 'DHT11', 'DHT22', 'DS18B20'],
+    },
+  ]);
+
+  const hasCreatePermission =
+    currentUser && hasPermission(currentUser, 'CREATE_SETTINGS');
+
+  const addFilter = () => {
+    const newItem = {
+      id: uniqueId(),
+      fields: {
+        filterValue: '',
+        filterValueFrom: '',
+        filterValueTo: '',
+        selectedField: '',
+      },
+    };
+    newItem.fields.selectedField = filters[0].title;
+    setFilterItems([...filterItems, newItem]);
+  };
+
+  const getSettingsCSV = async () => {
+    const response = await axios({
+      url: '/settings?filetype=csv',
+      method: 'GET',
+      responseType: 'blob',
+    });
+    const type = response.headers['content-type'];
+    const blob = new Blob([response.data], { type: type });
+    const link = document.createElement('a');
+    link.href = window.URL.createObjectURL(blob);
+    link.download = 'settingsCSV.csv';
+    link.click();
+  };
+
+  const onModalConfirm = async () => {
+    if (!csvFile) return;
+    await dispatch(uploadCsv(csvFile));
+    dispatch(setRefetch(true));
+    setCsvFile(null);
+    setIsModalActive(false);
+  };
+
+  const onModalCancel = () => {
+    setCsvFile(null);
+    setIsModalActive(false);
+  };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Settings')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title='Settings'
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox className='mb-6' cardBoxClassName='flex flex-wrap'>
+          {hasCreatePermission && (
+            <BaseButton
+              className={'mr-3'}
+              href={'/settings/settings-new'}
+              color='info'
+              label='New Item'
+            />
+          )}
+
+          <BaseButton
+            className={'mr-3'}
+            color='info'
+            label='Filter'
+            onClick={addFilter}
+          />
+          <BaseButton
+            className={'mr-3'}
+            color='info'
+            label='Download CSV'
+            onClick={getSettingsCSV}
+          />
+
+          {hasCreatePermission && (
+            <BaseButton
+              color='info'
+              label='Upload CSV'
+              onClick={() => setIsModalActive(true)}
+            />
+          )}
+
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+          </div>
+
+          <div className='md:inline-flex items-center ms-auto'>
+            <Link href={'/settings/settings-table'}>Switch to Table</Link>
+          </div>
+        </CardBox>
+
+        <CardBox className='mb-6' hasTable>
+          <TableSettings
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={false}
+          />
+        </CardBox>
+      </SectionMain>
+      <CardBoxModal
+        title='Upload CSV'
+        buttonColor='info'
+        buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+        isActive={isModalActive}
+        onConfirm={onModalConfirm}
+        onCancel={onModalCancel}
+      >
+        <DragDropFilePicker
+          file={csvFile}
+          setFile={setCsvFile}
+          formats={'.csv'}
+        />
+      </CardBoxModal>
+    </>
+  );
+};
+
+SettingsTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'READ_SETTINGS'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default SettingsTablesPage;

frontend/src/pages/settings/settings-new.tsx

@@ -0,0 +1,162 @@
+import {
+  mdiAccount,
+  mdiChartTimelineVariant,
+  mdiMail,
+  mdiUpload,
+} from '@mdi/js';
+import Head from 'next/head';
+import React, { ReactElement } from 'react';
+import CardBox from '../../components/CardBox';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import SectionMain from '../../components/SectionMain';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import { getPageTitle } from '../../config';
+
+import { Field, Form, Formik } from 'formik';
+import FormField from '../../components/FormField';
+import BaseDivider from '../../components/BaseDivider';
+import BaseButtons from '../../components/BaseButtons';
+import BaseButton from '../../components/BaseButton';
+import FormCheckRadio from '../../components/FormCheckRadio';
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup';
+import FormFilePicker from '../../components/FormFilePicker';
+import FormImagePicker from '../../components/FormImagePicker';
+import { SwitchField } from '../../components/SwitchField';
+
+import { SelectField } from '../../components/SelectField';
+import { SelectFieldMany } from '../../components/SelectFieldMany';
+import { RichTextField } from '../../components/RichTextField';
+
+import { create } from '../../stores/settings/settingsSlice';
+import { useAppDispatch } from '../../stores/hooks';
+import { useRouter } from 'next/router';
+import moment from 'moment';
+
+const initialValues = {
+  system_name: '',
+
+  location_text: '',
+
+  latitude: '',
+
+  longitude: '',
+
+  wifi_ssid: '',
+
+  wifi_password: '',
+
+  ip_mode: 'static',
+
+  ip_address: '',
+
+  sensor_selector: 'none',
+};
+
+const SettingsNew = () => {
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+
+  const handleSubmit = async (data) => {
+    await dispatch(create(data));
+    await router.push('/settings/settings-list');
+  };
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('New Item')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title='New Item'
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+              <FormField label='SystemName'>
+                <Field name='system_name' placeholder='SystemName' />
+              </FormField>
+
+              <FormField label='LocationText'>
+                <Field name='location_text' placeholder='LocationText' />
+              </FormField>
+
+              <FormField label='Latitude'>
+                <Field type='number' name='latitude' placeholder='Latitude' />
+              </FormField>
+
+              <FormField label='Longitude'>
+                <Field type='number' name='longitude' placeholder='Longitude' />
+              </FormField>
+
+              <FormField label='Wi-FiSSID'>
+                <Field name='wifi_ssid' placeholder='Wi-FiSSID' />
+              </FormField>
+
+              <FormField label='Wi-FiPassword'>
+                <Field name='wifi_password' placeholder='Wi-FiPassword' />
+              </FormField>
+
+              <FormField label='IPMode' labelFor='ip_mode'>
+                <Field name='ip_mode' id='ip_mode' component='select'>
+                  <option value='static'>static</option>
+
+                  <option value='dhcp'>dhcp</option>
+                </Field>
+              </FormField>
+
+              <FormField label='IPAddress'>
+                <Field name='ip_address' placeholder='IPAddress' />
+              </FormField>
+
+              <FormField label='SensorSelector' labelFor='sensor_selector'>
+                <Field
+                  name='sensor_selector'
+                  id='sensor_selector'
+                  component='select'
+                >
+                  <option value='none'>none</option>
+
+                  <option value='DHT11'>DHT11</option>
+
+                  <option value='DHT22'>DHT22</option>
+
+                  <option value='DS18B20'>DS18B20</option>
+                </Field>
+              </FormField>
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type='submit' color='info' label='Submit' />
+                <BaseButton type='reset' color='info' outline label='Reset' />
+                <BaseButton
+                  type='reset'
+                  color='danger'
+                  outline
+                  label='Cancel'
+                  onClick={() => router.push('/settings/settings-list')}
+                />
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  );
+};
+
+SettingsNew.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'CREATE_SETTINGS'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default SettingsNew;

frontend/src/pages/settings/settings-table.tsx

@@ -0,0 +1,187 @@
+import { mdiChartTimelineVariant } from '@mdi/js';
+import Head from 'next/head';
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react';
+import CardBox from '../../components/CardBox';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import SectionMain from '../../components/SectionMain';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import { getPageTitle } from '../../config';
+import TableSettings from '../../components/Settings/TableSettings';
+import BaseButton from '../../components/BaseButton';
+import axios from 'axios';
+import Link from 'next/link';
+import { useAppDispatch, useAppSelector } from '../../stores/hooks';
+import CardBoxModal from '../../components/CardBoxModal';
+import DragDropFilePicker from '../../components/DragDropFilePicker';
+import { setRefetch, uploadCsv } from '../../stores/settings/settingsSlice';
+
+import { hasPermission } from '../../helpers/userPermissions';
+
+const SettingsTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  const { currentUser } = useAppSelector((state) => state.auth);
+
+  const dispatch = useAppDispatch();
+
+  const [filters] = useState([
+    { label: 'SystemName', title: 'system_name' },
+    { label: 'LocationText', title: 'location_text' },
+    { label: 'Wi-FiSSID', title: 'wifi_ssid' },
+    { label: 'Wi-FiPassword', title: 'wifi_password' },
+    { label: 'IPAddress', title: 'ip_address' },
+
+    { label: 'Latitude', title: 'latitude', number: 'true' },
+    { label: 'Longitude', title: 'longitude', number: 'true' },
+
+    {
+      label: 'IPMode',
+      title: 'ip_mode',
+      type: 'enum',
+      options: ['static', 'dhcp'],
+    },
+    {
+      label: 'SensorSelector',
+      title: 'sensor_selector',
+      type: 'enum',
+      options: ['none', 'DHT11', 'DHT22', 'DS18B20'],
+    },
+  ]);
+
+  const hasCreatePermission =
+    currentUser && hasPermission(currentUser, 'CREATE_SETTINGS');
+
+  const addFilter = () => {
+    const newItem = {
+      id: uniqueId(),
+      fields: {
+        filterValue: '',
+        filterValueFrom: '',
+        filterValueTo: '',
+        selectedField: '',
+      },
+    };
+    newItem.fields.selectedField = filters[0].title;
+    setFilterItems([...filterItems, newItem]);
+  };
+
+  const getSettingsCSV = async () => {
+    const response = await axios({
+      url: '/settings?filetype=csv',
+      method: 'GET',
+      responseType: 'blob',
+    });
+    const type = response.headers['content-type'];
+    const blob = new Blob([response.data], { type: type });
+    const link = document.createElement('a');
+    link.href = window.URL.createObjectURL(blob);
+    link.download = 'settingsCSV.csv';
+    link.click();
+  };
+
+  const onModalConfirm = async () => {
+    if (!csvFile) return;
+    await dispatch(uploadCsv(csvFile));
+    dispatch(setRefetch(true));
+    setCsvFile(null);
+    setIsModalActive(false);
+  };
+
+  const onModalCancel = () => {
+    setCsvFile(null);
+    setIsModalActive(false);
+  };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Settings')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title='Settings'
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox className='mb-6' cardBoxClassName='flex flex-wrap'>
+          {hasCreatePermission && (
+            <BaseButton
+              className={'mr-3'}
+              href={'/settings/settings-new'}
+              color='info'
+              label='New Item'
+            />
+          )}
+
+          <BaseButton
+            className={'mr-3'}
+            color='info'
+            label='Filter'
+            onClick={addFilter}
+          />
+          <BaseButton
+            className={'mr-3'}
+            color='info'
+            label='Download CSV'
+            onClick={getSettingsCSV}
+          />
+
+          {hasCreatePermission && (
+            <BaseButton
+              color='info'
+              label='Upload CSV'
+              onClick={() => setIsModalActive(true)}
+            />
+          )}
+
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+
+            <Link href={'/settings/settings-list'}>
+              Back to <span className='capitalize'>list</span>
+            </Link>
+          </div>
+        </CardBox>
+        <CardBox className='mb-6' hasTable>
+          <TableSettings
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={true}
+          />
+        </CardBox>
+      </SectionMain>
+      <CardBoxModal
+        title='Upload CSV'
+        buttonColor='info'
+        buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+        isActive={isModalActive}
+        onConfirm={onModalConfirm}
+        onCancel={onModalCancel}
+      >
+        <DragDropFilePicker
+          file={csvFile}
+          setFile={setCsvFile}
+          formats={'.csv'}
+        />
+      </CardBoxModal>
+    </>
+  );
+};
+
+SettingsTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'READ_SETTINGS'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default SettingsTablesPage;

frontend/src/pages/settings/settings-view.tsx

@@ -0,0 +1,123 @@
+import React, { ReactElement, useEffect } from 'react';
+import Head from 'next/head';
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+import dayjs from 'dayjs';
+import { useAppDispatch, useAppSelector } from '../../stores/hooks';
+import { useRouter } from 'next/router';
+import { fetch } from '../../stores/settings/settingsSlice';
+import { saveFile } from '../../helpers/fileSaver';
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from '../../components/ImageField';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import { getPageTitle } from '../../config';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import SectionMain from '../../components/SectionMain';
+import CardBox from '../../components/CardBox';
+import BaseButton from '../../components/BaseButton';
+import BaseDivider from '../../components/BaseDivider';
+import { mdiChartTimelineVariant } from '@mdi/js';
+import { SwitchField } from '../../components/SwitchField';
+import FormField from '../../components/FormField';
+
+const SettingsView = () => {
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+  const { settings } = useAppSelector((state) => state.settings);
+
+  const { id } = router.query;
+
+  function removeLastCharacter(str) {
+    console.log(str, `str`);
+    return str.slice(0, -1);
+  }
+
+  useEffect(() => {
+    dispatch(fetch({ id }));
+  }, [dispatch, id]);
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('View settings')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title={removeLastCharacter('View settings')}
+          main
+        >
+          <BaseButton
+            color='info'
+            label='Edit'
+            href={`/settings/settings-edit/?id=${id}`}
+          />
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <div className={'mb-4'}>
+            <p className={'block font-bold mb-2'}>SystemName</p>
+            <p>{settings?.system_name}</p>
+          </div>
+
+          <div className={'mb-4'}>
+            <p className={'block font-bold mb-2'}>LocationText</p>
+            <p>{settings?.location_text}</p>
+          </div>
+
+          <div className={'mb-4'}>
+            <p className={'block font-bold mb-2'}>Latitude</p>
+            <p>{settings?.latitude || 'No data'}</p>
+          </div>
+
+          <div className={'mb-4'}>
+            <p className={'block font-bold mb-2'}>Longitude</p>
+            <p>{settings?.longitude || 'No data'}</p>
+          </div>
+
+          <div className={'mb-4'}>
+            <p className={'block font-bold mb-2'}>Wi-FiSSID</p>
+            <p>{settings?.wifi_ssid}</p>
+          </div>
+
+          <div className={'mb-4'}>
+            <p className={'block font-bold mb-2'}>Wi-FiPassword</p>
+            <p>{settings?.wifi_password}</p>
+          </div>
+
+          <div className={'mb-4'}>
+            <p className={'block font-bold mb-2'}>IPMode</p>
+            <p>{settings?.ip_mode ?? 'No data'}</p>
+          </div>
+
+          <div className={'mb-4'}>
+            <p className={'block font-bold mb-2'}>IPAddress</p>
+            <p>{settings?.ip_address}</p>
+          </div>
+
+          <div className={'mb-4'}>
+            <p className={'block font-bold mb-2'}>SensorSelector</p>
+            <p>{settings?.sensor_selector ?? 'No data'}</p>
+          </div>
+
+          <BaseDivider />
+
+          <BaseButton
+            color='info'
+            label='Back'
+            onClick={() => router.push('/settings/settings-list')}
+          />
+        </CardBox>
+      </SectionMain>
+    </>
+  );
+};
+
+SettingsView.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'READ_SETTINGS'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default SettingsView;

frontend/src/pages/status/[statusId].tsx

@@ -0,0 +1,157 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js';
+import Head from 'next/head';
+import React, { ReactElement, useEffect, useState } from 'react';
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+import dayjs from 'dayjs';
+
+import CardBox from '../../components/CardBox';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import SectionMain from '../../components/SectionMain';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import { getPageTitle } from '../../config';
+
+import { Field, Form, Formik } from 'formik';
+import FormField from '../../components/FormField';
+import BaseDivider from '../../components/BaseDivider';
+import BaseButtons from '../../components/BaseButtons';
+import BaseButton from '../../components/BaseButton';
+import FormCheckRadio from '../../components/FormCheckRadio';
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup';
+import FormFilePicker from '../../components/FormFilePicker';
+import FormImagePicker from '../../components/FormImagePicker';
+import { SelectField } from '../../components/SelectField';
+import { SelectFieldMany } from '../../components/SelectFieldMany';
+import { SwitchField } from '../../components/SwitchField';
+import { RichTextField } from '../../components/RichTextField';
+
+import { update, fetch } from '../../stores/status/statusSlice';
+import { useAppDispatch, useAppSelector } from '../../stores/hooks';
+import { useRouter } from 'next/router';
+import { saveFile } from '../../helpers/fileSaver';
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from '../../components/ImageField';
+
+const EditStatus = () => {
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+  const initVals = {
+    wifi_status: '',
+
+    wifi_strength: '',
+
+    sensor_status: false,
+
+    thingsboard_status: false,
+  };
+  const [initialValues, setInitialValues] = useState(initVals);
+
+  const { status } = useAppSelector((state) => state.status);
+
+  const { statusId } = router.query;
+
+  useEffect(() => {
+    dispatch(fetch({ id: statusId }));
+  }, [statusId]);
+
+  useEffect(() => {
+    if (typeof status === 'object') {
+      setInitialValues(status);
+    }
+  }, [status]);
+
+  useEffect(() => {
+    if (typeof status === 'object') {
+      const newInitialVal = { ...initVals };
+
+      Object.keys(initVals).forEach((el) => (newInitialVal[el] = status[el]));
+
+      setInitialValues(newInitialVal);
+    }
+  }, [status]);
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: statusId, data }));
+    await router.push('/status/status-list');
+  };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit status')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title={'Edit status'}
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+              <FormField label='Wi-FiStatus'>
+                <Field name='wifi_status' placeholder='Wi-FiStatus' />
+              </FormField>
+
+              <FormField label='Wi-FiStrength'>
+                <Field
+                  type='number'
+                  name='wifi_strength'
+                  placeholder='Wi-FiStrength'
+                />
+              </FormField>
+
+              <FormField label='SensorStatus' labelFor='sensor_status'>
+                <Field
+                  name='sensor_status'
+                  id='sensor_status'
+                  component={SwitchField}
+                ></Field>
+              </FormField>
+
+              <FormField
+                label='ThingsBoardStatus'
+                labelFor='thingsboard_status'
+              >
+                <Field
+                  name='thingsboard_status'
+                  id='thingsboard_status'
+                  component={SwitchField}
+                ></Field>
+              </FormField>
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type='submit' color='info' label='Submit' />
+                <BaseButton type='reset' color='info' outline label='Reset' />
+                <BaseButton
+                  type='reset'
+                  color='danger'
+                  outline
+                  label='Cancel'
+                  onClick={() => router.push('/status/status-list')}
+                />
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  );
+};
+
+EditStatus.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'UPDATE_STATUS'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default EditStatus;

frontend/src/pages/status/status-edit.tsx

@@ -0,0 +1,155 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js';
+import Head from 'next/head';
+import React, { ReactElement, useEffect, useState } from 'react';
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+import dayjs from 'dayjs';
+
+import CardBox from '../../components/CardBox';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import SectionMain from '../../components/SectionMain';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import { getPageTitle } from '../../config';
+
+import { Field, Form, Formik } from 'formik';
+import FormField from '../../components/FormField';
+import BaseDivider from '../../components/BaseDivider';
+import BaseButtons from '../../components/BaseButtons';
+import BaseButton from '../../components/BaseButton';
+import FormCheckRadio from '../../components/FormCheckRadio';
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup';
+import FormFilePicker from '../../components/FormFilePicker';
+import FormImagePicker from '../../components/FormImagePicker';
+import { SelectField } from '../../components/SelectField';
+import { SelectFieldMany } from '../../components/SelectFieldMany';
+import { SwitchField } from '../../components/SwitchField';
+import { RichTextField } from '../../components/RichTextField';
+
+import { update, fetch } from '../../stores/status/statusSlice';
+import { useAppDispatch, useAppSelector } from '../../stores/hooks';
+import { useRouter } from 'next/router';
+import { saveFile } from '../../helpers/fileSaver';
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from '../../components/ImageField';
+
+const EditStatusPage = () => {
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+  const initVals = {
+    wifi_status: '',
+
+    wifi_strength: '',
+
+    sensor_status: false,
+
+    thingsboard_status: false,
+  };
+  const [initialValues, setInitialValues] = useState(initVals);
+
+  const { status } = useAppSelector((state) => state.status);
+
+  const { id } = router.query;
+
+  useEffect(() => {
+    dispatch(fetch({ id: id }));
+  }, [id]);
+
+  useEffect(() => {
+    if (typeof status === 'object') {
+      setInitialValues(status);
+    }
+  }, [status]);
+
+  useEffect(() => {
+    if (typeof status === 'object') {
+      const newInitialVal = { ...initVals };
+      Object.keys(initVals).forEach((el) => (newInitialVal[el] = status[el]));
+      setInitialValues(newInitialVal);
+    }
+  }, [status]);
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: id, data }));
+    await router.push('/status/status-list');
+  };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit status')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title={'Edit status'}
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+              <FormField label='Wi-FiStatus'>
+                <Field name='wifi_status' placeholder='Wi-FiStatus' />
+              </FormField>
+
+              <FormField label='Wi-FiStrength'>
+                <Field
+                  type='number'
+                  name='wifi_strength'
+                  placeholder='Wi-FiStrength'
+                />
+              </FormField>
+
+              <FormField label='SensorStatus' labelFor='sensor_status'>
+                <Field
+                  name='sensor_status'
+                  id='sensor_status'
+                  component={SwitchField}
+                ></Field>
+              </FormField>
+
+              <FormField
+                label='ThingsBoardStatus'
+                labelFor='thingsboard_status'
+              >
+                <Field
+                  name='thingsboard_status'
+                  id='thingsboard_status'
+                  component={SwitchField}
+                ></Field>
+              </FormField>
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type='submit' color='info' label='Submit' />
+                <BaseButton type='reset' color='info' outline label='Reset' />
+                <BaseButton
+                  type='reset'
+                  color='danger'
+                  outline
+                  label='Cancel'
+                  onClick={() => router.push('/status/status-list')}
+                />
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  );
+};
+
+EditStatusPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'UPDATE_STATUS'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default EditStatusPage;

frontend/src/pages/status/status-list.tsx

@@ -0,0 +1,167 @@
+import { mdiChartTimelineVariant } from '@mdi/js';
+import Head from 'next/head';
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react';
+import CardBox from '../../components/CardBox';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import SectionMain from '../../components/SectionMain';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import { getPageTitle } from '../../config';
+import TableStatus from '../../components/Status/TableStatus';
+import BaseButton from '../../components/BaseButton';
+import axios from 'axios';
+import Link from 'next/link';
+import { useAppDispatch, useAppSelector } from '../../stores/hooks';
+import CardBoxModal from '../../components/CardBoxModal';
+import DragDropFilePicker from '../../components/DragDropFilePicker';
+import { setRefetch, uploadCsv } from '../../stores/status/statusSlice';
+
+import { hasPermission } from '../../helpers/userPermissions';
+
+const StatusTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  const { currentUser } = useAppSelector((state) => state.auth);
+
+  const dispatch = useAppDispatch();
+
+  const [filters] = useState([
+    { label: 'Wi-FiStatus', title: 'wifi_status' },
+    { label: 'Wi-FiStrength', title: 'wifi_strength', number: 'true' },
+  ]);
+
+  const hasCreatePermission =
+    currentUser && hasPermission(currentUser, 'CREATE_STATUS');
+
+  const addFilter = () => {
+    const newItem = {
+      id: uniqueId(),
+      fields: {
+        filterValue: '',
+        filterValueFrom: '',
+        filterValueTo: '',
+        selectedField: '',
+      },
+    };
+    newItem.fields.selectedField = filters[0].title;
+    setFilterItems([...filterItems, newItem]);
+  };
+
+  const getStatusCSV = async () => {
+    const response = await axios({
+      url: '/status?filetype=csv',
+      method: 'GET',
+      responseType: 'blob',
+    });
+    const type = response.headers['content-type'];
+    const blob = new Blob([response.data], { type: type });
+    const link = document.createElement('a');
+    link.href = window.URL.createObjectURL(blob);
+    link.download = 'statusCSV.csv';
+    link.click();
+  };
+
+  const onModalConfirm = async () => {
+    if (!csvFile) return;
+    await dispatch(uploadCsv(csvFile));
+    dispatch(setRefetch(true));
+    setCsvFile(null);
+    setIsModalActive(false);
+  };
+
+  const onModalCancel = () => {
+    setCsvFile(null);
+    setIsModalActive(false);
+  };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Status')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title='Status'
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox className='mb-6' cardBoxClassName='flex flex-wrap'>
+          {hasCreatePermission && (
+            <BaseButton
+              className={'mr-3'}
+              href={'/status/status-new'}
+              color='info'
+              label='New Item'
+            />
+          )}
+
+          <BaseButton
+            className={'mr-3'}
+            color='info'
+            label='Filter'
+            onClick={addFilter}
+          />
+          <BaseButton
+            className={'mr-3'}
+            color='info'
+            label='Download CSV'
+            onClick={getStatusCSV}
+          />
+
+          {hasCreatePermission && (
+            <BaseButton
+              color='info'
+              label='Upload CSV'
+              onClick={() => setIsModalActive(true)}
+            />
+          )}
+
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+          </div>
+
+          <div className='md:inline-flex items-center ms-auto'>
+            <Link href={'/status/status-table'}>Switch to Table</Link>
+          </div>
+        </CardBox>
+
+        <CardBox className='mb-6' hasTable>
+          <TableStatus
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={false}
+          />
+        </CardBox>
+      </SectionMain>
+      <CardBoxModal
+        title='Upload CSV'
+        buttonColor='info'
+        buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+        isActive={isModalActive}
+        onConfirm={onModalConfirm}
+        onCancel={onModalCancel}
+      >
+        <DragDropFilePicker
+          file={csvFile}
+          setFile={setCsvFile}
+          formats={'.csv'}
+        />
+      </CardBoxModal>
+    </>
+  );
+};
+
+StatusTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'READ_STATUS'}>{page}</LayoutAuthenticated>
+  );
+};
+
+export default StatusTablesPage;

frontend/src/pages/status/status-new.tsx

@@ -0,0 +1,131 @@
+import {
+  mdiAccount,
+  mdiChartTimelineVariant,
+  mdiMail,
+  mdiUpload,
+} from '@mdi/js';
+import Head from 'next/head';
+import React, { ReactElement } from 'react';
+import CardBox from '../../components/CardBox';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import SectionMain from '../../components/SectionMain';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import { getPageTitle } from '../../config';
+
+import { Field, Form, Formik } from 'formik';
+import FormField from '../../components/FormField';
+import BaseDivider from '../../components/BaseDivider';
+import BaseButtons from '../../components/BaseButtons';
+import BaseButton from '../../components/BaseButton';
+import FormCheckRadio from '../../components/FormCheckRadio';
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup';
+import FormFilePicker from '../../components/FormFilePicker';
+import FormImagePicker from '../../components/FormImagePicker';
+import { SwitchField } from '../../components/SwitchField';
+
+import { SelectField } from '../../components/SelectField';
+import { SelectFieldMany } from '../../components/SelectFieldMany';
+import { RichTextField } from '../../components/RichTextField';
+
+import { create } from '../../stores/status/statusSlice';
+import { useAppDispatch } from '../../stores/hooks';
+import { useRouter } from 'next/router';
+import moment from 'moment';
+
+const initialValues = {
+  wifi_status: '',
+
+  wifi_strength: '',
+
+  sensor_status: false,
+
+  thingsboard_status: false,
+};
+
+const StatusNew = () => {
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+
+  const handleSubmit = async (data) => {
+    await dispatch(create(data));
+    await router.push('/status/status-list');
+  };
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('New Item')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title='New Item'
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+              <FormField label='Wi-FiStatus'>
+                <Field name='wifi_status' placeholder='Wi-FiStatus' />
+              </FormField>
+
+              <FormField label='Wi-FiStrength'>
+                <Field
+                  type='number'
+                  name='wifi_strength'
+                  placeholder='Wi-FiStrength'
+                />
+              </FormField>
+
+              <FormField label='SensorStatus' labelFor='sensor_status'>
+                <Field
+                  name='sensor_status'
+                  id='sensor_status'
+                  component={SwitchField}
+                ></Field>
+              </FormField>
+
+              <FormField
+                label='ThingsBoardStatus'
+                labelFor='thingsboard_status'
+              >
+                <Field
+                  name='thingsboard_status'
+                  id='thingsboard_status'
+                  component={SwitchField}
+                ></Field>
+              </FormField>
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type='submit' color='info' label='Submit' />
+                <BaseButton type='reset' color='info' outline label='Reset' />
+                <BaseButton
+                  type='reset'
+                  color='danger'
+                  outline
+                  label='Cancel'
+                  onClick={() => router.push('/status/status-list')}
+                />
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  );
+};
+
+StatusNew.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'CREATE_STATUS'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default StatusNew;

frontend/src/pages/status/status-table.tsx

@@ -0,0 +1,166 @@
+import { mdiChartTimelineVariant } from '@mdi/js';
+import Head from 'next/head';
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react';
+import CardBox from '../../components/CardBox';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import SectionMain from '../../components/SectionMain';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import { getPageTitle } from '../../config';
+import TableStatus from '../../components/Status/TableStatus';
+import BaseButton from '../../components/BaseButton';
+import axios from 'axios';
+import Link from 'next/link';
+import { useAppDispatch, useAppSelector } from '../../stores/hooks';
+import CardBoxModal from '../../components/CardBoxModal';
+import DragDropFilePicker from '../../components/DragDropFilePicker';
+import { setRefetch, uploadCsv } from '../../stores/status/statusSlice';
+
+import { hasPermission } from '../../helpers/userPermissions';
+
+const StatusTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  const { currentUser } = useAppSelector((state) => state.auth);
+
+  const dispatch = useAppDispatch();
+
+  const [filters] = useState([
+    { label: 'Wi-FiStatus', title: 'wifi_status' },
+    { label: 'Wi-FiStrength', title: 'wifi_strength', number: 'true' },
+  ]);
+
+  const hasCreatePermission =
+    currentUser && hasPermission(currentUser, 'CREATE_STATUS');
+
+  const addFilter = () => {
+    const newItem = {
+      id: uniqueId(),
+      fields: {
+        filterValue: '',
+        filterValueFrom: '',
+        filterValueTo: '',
+        selectedField: '',
+      },
+    };
+    newItem.fields.selectedField = filters[0].title;
+    setFilterItems([...filterItems, newItem]);
+  };
+
+  const getStatusCSV = async () => {
+    const response = await axios({
+      url: '/status?filetype=csv',
+      method: 'GET',
+      responseType: 'blob',
+    });
+    const type = response.headers['content-type'];
+    const blob = new Blob([response.data], { type: type });
+    const link = document.createElement('a');
+    link.href = window.URL.createObjectURL(blob);
+    link.download = 'statusCSV.csv';
+    link.click();
+  };
+
+  const onModalConfirm = async () => {
+    if (!csvFile) return;
+    await dispatch(uploadCsv(csvFile));
+    dispatch(setRefetch(true));
+    setCsvFile(null);
+    setIsModalActive(false);
+  };
+
+  const onModalCancel = () => {
+    setCsvFile(null);
+    setIsModalActive(false);
+  };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Status')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title='Status'
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox className='mb-6' cardBoxClassName='flex flex-wrap'>
+          {hasCreatePermission && (
+            <BaseButton
+              className={'mr-3'}
+              href={'/status/status-new'}
+              color='info'
+              label='New Item'
+            />
+          )}
+
+          <BaseButton
+            className={'mr-3'}
+            color='info'
+            label='Filter'
+            onClick={addFilter}
+          />
+          <BaseButton
+            className={'mr-3'}
+            color='info'
+            label='Download CSV'
+            onClick={getStatusCSV}
+          />
+
+          {hasCreatePermission && (
+            <BaseButton
+              color='info'
+              label='Upload CSV'
+              onClick={() => setIsModalActive(true)}
+            />
+          )}
+
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+
+            <Link href={'/status/status-list'}>
+              Back to <span className='capitalize'>card</span>
+            </Link>
+          </div>
+        </CardBox>
+        <CardBox className='mb-6' hasTable>
+          <TableStatus
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={true}
+          />
+        </CardBox>
+      </SectionMain>
+      <CardBoxModal
+        title='Upload CSV'
+        buttonColor='info'
+        buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+        isActive={isModalActive}
+        onConfirm={onModalConfirm}
+        onCancel={onModalCancel}
+      >
+        <DragDropFilePicker
+          file={csvFile}
+          setFile={setCsvFile}
+          formats={'.csv'}
+        />
+      </CardBoxModal>
+    </>
+  );
+};
+
+StatusTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'READ_STATUS'}>{page}</LayoutAuthenticated>
+  );
+};
+
+export default StatusTablesPage;

frontend/src/pages/status/status-view.tsx

@@ -0,0 +1,105 @@
+import React, { ReactElement, useEffect } from 'react';
+import Head from 'next/head';
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+import dayjs from 'dayjs';
+import { useAppDispatch, useAppSelector } from '../../stores/hooks';
+import { useRouter } from 'next/router';
+import { fetch } from '../../stores/status/statusSlice';
+import { saveFile } from '../../helpers/fileSaver';
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from '../../components/ImageField';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import { getPageTitle } from '../../config';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import SectionMain from '../../components/SectionMain';
+import CardBox from '../../components/CardBox';
+import BaseButton from '../../components/BaseButton';
+import BaseDivider from '../../components/BaseDivider';
+import { mdiChartTimelineVariant } from '@mdi/js';
+import { SwitchField } from '../../components/SwitchField';
+import FormField from '../../components/FormField';
+
+const StatusView = () => {
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+  const { status } = useAppSelector((state) => state.status);
+
+  const { id } = router.query;
+
+  function removeLastCharacter(str) {
+    console.log(str, `str`);
+    return str.slice(0, -1);
+  }
+
+  useEffect(() => {
+    dispatch(fetch({ id }));
+  }, [dispatch, id]);
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('View status')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title={removeLastCharacter('View status')}
+          main
+        >
+          <BaseButton
+            color='info'
+            label='Edit'
+            href={`/status/status-edit/?id=${id}`}
+          />
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <div className={'mb-4'}>
+            <p className={'block font-bold mb-2'}>Wi-FiStatus</p>
+            <p>{status?.wifi_status}</p>
+          </div>
+
+          <div className={'mb-4'}>
+            <p className={'block font-bold mb-2'}>Wi-FiStrength</p>
+            <p>{status?.wifi_strength || 'No data'}</p>
+          </div>
+
+          <FormField label='SensorStatus'>
+            <SwitchField
+              field={{ name: 'sensor_status', value: status?.sensor_status }}
+              form={{ setFieldValue: () => null }}
+              disabled
+            />
+          </FormField>
+
+          <FormField label='ThingsBoardStatus'>
+            <SwitchField
+              field={{
+                name: 'thingsboard_status',
+                value: status?.thingsboard_status,
+              }}
+              form={{ setFieldValue: () => null }}
+              disabled
+            />
+          </FormField>
+
+          <BaseDivider />
+
+          <BaseButton
+            color='info'
+            label='Back'
+            onClick={() => router.push('/status/status-list')}
+          />
+        </CardBox>
+      </SectionMain>
+    </>
+  );
+};
+
+StatusView.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'READ_STATUS'}>{page}</LayoutAuthenticated>
+  );
+};
+
+export default StatusView;

frontend/src/stores/settings/settingsSlice.ts

@@ -0,0 +1,236 @@
+import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit';
+import axios from 'axios';
+import {
+  fulfilledNotify,
+  rejectNotify,
+  resetNotify,
+} from '../../helpers/notifyStateHandler';
+
+interface MainState {
+  settings: any;
+  loading: boolean;
+  count: number;
+  refetch: boolean;
+  rolesWidgets: any[];
+  notify: {
+    showNotification: boolean;
+    textNotification: string;
+    typeNotification: string;
+  };
+}
+
+const initialState: MainState = {
+  settings: [],
+  loading: false,
+  count: 0,
+  refetch: false,
+  rolesWidgets: [],
+  notify: {
+    showNotification: false,
+    textNotification: '',
+    typeNotification: 'warn',
+  },
+};
+
+export const fetch = createAsyncThunk('settings/fetch', async (data: any) => {
+  const { id, query } = data;
+  const result = await axios.get(`settings${query || (id ? `/${id}` : '')}`);
+  return id
+    ? result.data
+    : { rows: result.data.rows, count: result.data.count };
+});
+
+export const deleteItemsByIds = createAsyncThunk(
+  'settings/deleteByIds',
+  async (data: any, { rejectWithValue }) => {
+    try {
+      await axios.post('settings/deleteByIds', { data });
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const deleteItem = createAsyncThunk(
+  'settings/deleteSettings',
+  async (id: string, { rejectWithValue }) => {
+    try {
+      await axios.delete(`settings/${id}`);
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const create = createAsyncThunk(
+  'settings/createSettings',
+  async (data: any, { rejectWithValue }) => {
+    try {
+      const result = await axios.post('settings', { data });
+      return result.data;
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const uploadCsv = createAsyncThunk(
+  'settings/uploadCsv',
+  async (file: File, { rejectWithValue }) => {
+    try {
+      const data = new FormData();
+      data.append('file', file);
+      data.append('filename', file.name);
+
+      const result = await axios.post('settings/bulk-import', data, {
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        },
+      });
+
+      return result.data;
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const update = createAsyncThunk(
+  'settings/updateSettings',
+  async (payload: any, { rejectWithValue }) => {
+    try {
+      const result = await axios.put(`settings/${payload.id}`, {
+        id: payload.id,
+        data: payload.data,
+      });
+      return result.data;
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const settingsSlice = createSlice({
+  name: 'settings',
+  initialState,
+  reducers: {
+    setRefetch: (state, action: PayloadAction<boolean>) => {
+      state.refetch = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetch.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+    builder.addCase(fetch.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+
+    builder.addCase(fetch.fulfilled, (state, action) => {
+      if (action.payload.rows && action.payload.count >= 0) {
+        state.settings = action.payload.rows;
+        state.count = action.payload.count;
+      } else {
+        state.settings = action.payload;
+      }
+      state.loading = false;
+    });
+
+    builder.addCase(deleteItemsByIds.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+
+    builder.addCase(deleteItemsByIds.fulfilled, (state) => {
+      state.loading = false;
+      fulfilledNotify(state, 'Settings has been deleted');
+    });
+
+    builder.addCase(deleteItemsByIds.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+
+    builder.addCase(deleteItem.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+
+    builder.addCase(deleteItem.fulfilled, (state) => {
+      state.loading = false;
+      fulfilledNotify(state, `${'Settings'.slice(0, -1)} has been deleted`);
+    });
+
+    builder.addCase(deleteItem.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+
+    builder.addCase(create.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+    builder.addCase(create.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+
+    builder.addCase(create.fulfilled, (state) => {
+      state.loading = false;
+      fulfilledNotify(state, `${'Settings'.slice(0, -1)} has been created`);
+    });
+
+    builder.addCase(update.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+    builder.addCase(update.fulfilled, (state) => {
+      state.loading = false;
+      fulfilledNotify(state, `${'Settings'.slice(0, -1)} has been updated`);
+    });
+    builder.addCase(update.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+
+    builder.addCase(uploadCsv.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+    builder.addCase(uploadCsv.fulfilled, (state) => {
+      state.loading = false;
+      fulfilledNotify(state, 'Settings has been uploaded');
+    });
+    builder.addCase(uploadCsv.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+  },
+});
+
+// Action creators are generated for each case reducer function
+export const { setRefetch } = settingsSlice.actions;
+
+export default settingsSlice.reducer;

frontend/src/stores/status/statusSlice.ts

@@ -0,0 +1,236 @@
+import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit';
+import axios from 'axios';
+import {
+  fulfilledNotify,
+  rejectNotify,
+  resetNotify,
+} from '../../helpers/notifyStateHandler';
+
+interface MainState {
+  status: any;
+  loading: boolean;
+  count: number;
+  refetch: boolean;
+  rolesWidgets: any[];
+  notify: {
+    showNotification: boolean;
+    textNotification: string;
+    typeNotification: string;
+  };
+}
+
+const initialState: MainState = {
+  status: [],
+  loading: false,
+  count: 0,
+  refetch: false,
+  rolesWidgets: [],
+  notify: {
+    showNotification: false,
+    textNotification: '',
+    typeNotification: 'warn',
+  },
+};
+
+export const fetch = createAsyncThunk('status/fetch', async (data: any) => {
+  const { id, query } = data;
+  const result = await axios.get(`status${query || (id ? `/${id}` : '')}`);
+  return id
+    ? result.data
+    : { rows: result.data.rows, count: result.data.count };
+});
+
+export const deleteItemsByIds = createAsyncThunk(
+  'status/deleteByIds',
+  async (data: any, { rejectWithValue }) => {
+    try {
+      await axios.post('status/deleteByIds', { data });
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const deleteItem = createAsyncThunk(
+  'status/deleteStatus',
+  async (id: string, { rejectWithValue }) => {
+    try {
+      await axios.delete(`status/${id}`);
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const create = createAsyncThunk(
+  'status/createStatus',
+  async (data: any, { rejectWithValue }) => {
+    try {
+      const result = await axios.post('status', { data });
+      return result.data;
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const uploadCsv = createAsyncThunk(
+  'status/uploadCsv',
+  async (file: File, { rejectWithValue }) => {
+    try {
+      const data = new FormData();
+      data.append('file', file);
+      data.append('filename', file.name);
+
+      const result = await axios.post('status/bulk-import', data, {
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        },
+      });
+
+      return result.data;
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const update = createAsyncThunk(
+  'status/updateStatus',
+  async (payload: any, { rejectWithValue }) => {
+    try {
+      const result = await axios.put(`status/${payload.id}`, {
+        id: payload.id,
+        data: payload.data,
+      });
+      return result.data;
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const statusSlice = createSlice({
+  name: 'status',
+  initialState,
+  reducers: {
+    setRefetch: (state, action: PayloadAction<boolean>) => {
+      state.refetch = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetch.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+    builder.addCase(fetch.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+
+    builder.addCase(fetch.fulfilled, (state, action) => {
+      if (action.payload.rows && action.payload.count >= 0) {
+        state.status = action.payload.rows;
+        state.count = action.payload.count;
+      } else {
+        state.status = action.payload;
+      }
+      state.loading = false;
+    });
+
+    builder.addCase(deleteItemsByIds.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+
+    builder.addCase(deleteItemsByIds.fulfilled, (state) => {
+      state.loading = false;
+      fulfilledNotify(state, 'Status has been deleted');
+    });
+
+    builder.addCase(deleteItemsByIds.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+
+    builder.addCase(deleteItem.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+
+    builder.addCase(deleteItem.fulfilled, (state) => {
+      state.loading = false;
+      fulfilledNotify(state, `${'Status'.slice(0, -1)} has been deleted`);
+    });
+
+    builder.addCase(deleteItem.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+
+    builder.addCase(create.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+    builder.addCase(create.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+
+    builder.addCase(create.fulfilled, (state) => {
+      state.loading = false;
+      fulfilledNotify(state, `${'Status'.slice(0, -1)} has been created`);
+    });
+
+    builder.addCase(update.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+    builder.addCase(update.fulfilled, (state) => {
+      state.loading = false;
+      fulfilledNotify(state, `${'Status'.slice(0, -1)} has been updated`);
+    });
+    builder.addCase(update.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+
+    builder.addCase(uploadCsv.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+    builder.addCase(uploadCsv.fulfilled, (state) => {
+      state.loading = false;
+      fulfilledNotify(state, 'Status has been uploaded');
+    });
+    builder.addCase(uploadCsv.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+  },
+});
+
+// Action creators are generated for each case reducer function
+export const { setRefetch } = statusSlice.actions;
+
+export default statusSlice.reducer;

frontend/src/stores/store.ts

@@ -5,10 +5,10 @@ import authSlice from './authSlice';
 import openAiSlice from './openAiSlice';
 
 import usersSlice from './users/usersSlice';
-import integrationsSlice from './integrations/integrationsSlice';
+import statusSlice from './status/statusSlice';
 import sensorsSlice from './sensors/sensorsSlice';
-import system_settingsSlice from './system_settings/system_settingsSlice';
+import integrationsSlice from './integrations/integrationsSlice';
-import system_statusSlice from './system_status/system_statusSlice';
+import settingsSlice from './settings/settingsSlice';
 import rolesSlice from './roles/rolesSlice';
 import permissionsSlice from './permissions/permissionsSlice';
 
@@ -20,10 +20,10 @@ export const store = configureStore({
     openAi: openAiSlice,
 
     users: usersSlice,
-    integrations: integrationsSlice,
+    status: statusSlice,
     sensors: sensorsSlice,
-    system_settings: system_settingsSlice,
+    integrations: integrationsSlice,
-    system_status: system_statusSlice,
+    settings: settingsSlice,
     roles: rolesSlice,
     permissions: permissionsSlice,
   },