Society Community portal

502.html

@@ -129,7 +129,7 @@
         <p class="tip">The application is currently launching. The page will automatically refresh once site is
             available.</p>
         <div class="project-info">
-            <h2>Adminpro</h2>
+            <h2>society-community-portal</h2>
             <p>Admin portal for management team.</p>
         </div>
         <div class="loader-container">

README.md

@@ -1,6 +1,6 @@
 
 
-# Adminpro
+# society-community-portal
 
 ## This project was generated by [Flatlogic Platform](https://flatlogic.com).
 

backend/README.md

@@ -1,4 +1,4 @@
-#Adminpro - template backend,
+#society-community-portal - template backend,
 
 #### Run App on local machine:
 
@@ -38,10 +38,10 @@
 
 - Type this command to creating a new database.
 
-  - `postgres=> CREATE DATABASE db_adminpro;`
+  - `postgres=> CREATE DATABASE db_society_community_portal;`
 
 - Then give that new user privileges to the new database then quit the `psql`.
-  - `postgres=> GRANT ALL PRIVILEGES ON DATABASE db_adminpro TO admin;`
+  - `postgres=> GRANT ALL PRIVILEGES ON DATABASE db_society_community_portal TO admin;`
   - `postgres=> \q`
 
 ---

backend/package.json

@@ -1,6 +1,6 @@
 {
-  "name": "adminpro",
-  "description": "Adminpro - template backend",
+  "name": "societycommunityportal",
+  "description": "society-community-portal - template backend",
   "scripts": {
     "start": "npm run db:migrate && npm run db:seed && npm run watch",
     "db:migrate": "sequelize-cli db:migrate",

backend/src/config.js

@@ -3,7 +3,7 @@ const os = require('os');
 const config = {
   gcloud: {
     bucket: 'fldemo-files',
-    hash: '9c474fb5916d5795b943fa0f92fc45ed',
+    hash: 'afeefb9d49f5b7977577876b99532ac7',
   },
   bcrypt: {
     saltRounds: 12,
@@ -36,7 +36,7 @@ const config = {
   },
   uploadDir: os.tmpdir(),
   email: {
-    from: 'Adminpro <app@flatlogic.app>',
+    from: 'society-community-portal <app@flatlogic.app>',
     host: 'email-smtp.us-east-1.amazonaws.com',
     port: 587,
     auth: {

backend/src/db/api/chatmessages.js

@@ -0,0 +1,370 @@
+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 ChatmessagesDBApi {
+  static async create(data, options) {
+    const currentUser = (options && options.currentUser) || { id: null };
+    const transaction = (options && options.transaction) || undefined;
+
+    const chatmessages = await db.chatmessages.create(
+      {
+        id: data.id || undefined,
+
+        content: data.content || null,
+        created_date: data.created_date || null,
+        importHash: data.importHash || null,
+        createdById: currentUser.id,
+        updatedById: currentUser.id,
+      },
+      { transaction },
+    );
+
+    await chatmessages.setChatroom(data.chatroom || null, {
+      transaction,
+    });
+
+    await chatmessages.setSender(data.sender || null, {
+      transaction,
+    });
+
+    return chatmessages;
+  }
+
+  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 chatmessagesData = data.map((item, index) => ({
+      id: item.id || undefined,
+
+      content: item.content || null,
+      created_date: item.created_date || null,
+      importHash: item.importHash || null,
+      createdById: currentUser.id,
+      updatedById: currentUser.id,
+      createdAt: new Date(Date.now() + index * 1000),
+    }));
+
+    // Bulk create items
+    const chatmessages = await db.chatmessages.bulkCreate(chatmessagesData, {
+      transaction,
+    });
+
+    // For each item created, replace relation files
+
+    return chatmessages;
+  }
+
+  static async update(id, data, options) {
+    const currentUser = (options && options.currentUser) || { id: null };
+    const transaction = (options && options.transaction) || undefined;
+
+    const chatmessages = await db.chatmessages.findByPk(
+      id,
+      {},
+      { transaction },
+    );
+
+    const updatePayload = {};
+
+    if (data.content !== undefined) updatePayload.content = data.content;
+
+    if (data.created_date !== undefined)
+      updatePayload.created_date = data.created_date;
+
+    updatePayload.updatedById = currentUser.id;
+
+    await chatmessages.update(updatePayload, { transaction });
+
+    if (data.chatroom !== undefined) {
+      await chatmessages.setChatroom(
+        data.chatroom,
+
+        { transaction },
+      );
+    }
+
+    if (data.sender !== undefined) {
+      await chatmessages.setSender(
+        data.sender,
+
+        { transaction },
+      );
+    }
+
+    return chatmessages;
+  }
+
+  static async deleteByIds(ids, options) {
+    const currentUser = (options && options.currentUser) || { id: null };
+    const transaction = (options && options.transaction) || undefined;
+
+    const chatmessages = await db.chatmessages.findAll({
+      where: {
+        id: {
+          [Op.in]: ids,
+        },
+      },
+      transaction,
+    });
+
+    await db.sequelize.transaction(async (transaction) => {
+      for (const record of chatmessages) {
+        await record.update({ deletedBy: currentUser.id }, { transaction });
+      }
+      for (const record of chatmessages) {
+        await record.destroy({ transaction });
+      }
+    });
+
+    return chatmessages;
+  }
+
+  static async remove(id, options) {
+    const currentUser = (options && options.currentUser) || { id: null };
+    const transaction = (options && options.transaction) || undefined;
+
+    const chatmessages = await db.chatmessages.findByPk(id, options);
+
+    await chatmessages.update(
+      {
+        deletedBy: currentUser.id,
+      },
+      {
+        transaction,
+      },
+    );
+
+    await chatmessages.destroy({
+      transaction,
+    });
+
+    return chatmessages;
+  }
+
+  static async findBy(where, options) {
+    const transaction = (options && options.transaction) || undefined;
+
+    const chatmessages = await db.chatmessages.findOne(
+      { where },
+      { transaction },
+    );
+
+    if (!chatmessages) {
+      return chatmessages;
+    }
+
+    const output = chatmessages.get({ plain: true });
+
+    output.chatroom = await chatmessages.getChatroom({
+      transaction,
+    });
+
+    output.sender = await chatmessages.getSender({
+      transaction,
+    });
+
+    return output;
+  }
+
+  static async findAll(filter, options) {
+    const limit = filter.limit || 0;
+    let offset = 0;
+    let where = {};
+    const currentPage = +filter.page;
+
+    offset = currentPage * limit;
+
+    const orderBy = null;
+
+    const transaction = (options && options.transaction) || undefined;
+
+    let include = [
+      {
+        model: db.chatrooms,
+        as: 'chatroom',
+
+        where: filter.chatroom
+          ? {
+              [Op.or]: [
+                {
+                  id: {
+                    [Op.in]: filter.chatroom
+                      .split('|')
+                      .map((term) => Utils.uuid(term)),
+                  },
+                },
+                {
+                  name: {
+                    [Op.or]: filter.chatroom
+                      .split('|')
+                      .map((term) => ({ [Op.iLike]: `%${term}%` })),
+                  },
+                },
+              ],
+            }
+          : {},
+      },
+
+      {
+        model: db.users,
+        as: 'sender',
+
+        where: filter.sender
+          ? {
+              [Op.or]: [
+                {
+                  id: {
+                    [Op.in]: filter.sender
+                      .split('|')
+                      .map((term) => Utils.uuid(term)),
+                  },
+                },
+                {
+                  firstName: {
+                    [Op.or]: filter.sender
+                      .split('|')
+                      .map((term) => ({ [Op.iLike]: `%${term}%` })),
+                  },
+                },
+              ],
+            }
+          : {},
+      },
+    ];
+
+    if (filter) {
+      if (filter.id) {
+        where = {
+          ...where,
+          ['id']: Utils.uuid(filter.id),
+        };
+      }
+
+      if (filter.content) {
+        where = {
+          ...where,
+          [Op.and]: Utils.ilike('chatmessages', 'content', filter.content),
+        };
+      }
+
+      if (filter.created_dateRange) {
+        const [start, end] = filter.created_dateRange;
+
+        if (start !== undefined && start !== null && start !== '') {
+          where = {
+            ...where,
+            created_date: {
+              ...where.created_date,
+              [Op.gte]: start,
+            },
+          };
+        }
+
+        if (end !== undefined && end !== null && end !== '') {
+          where = {
+            ...where,
+            created_date: {
+              ...where.created_date,
+              [Op.lte]: end,
+            },
+          };
+        }
+      }
+
+      if (filter.active !== undefined) {
+        where = {
+          ...where,
+          active: filter.active === true || filter.active === 'true',
+        };
+      }
+
+      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.chatmessages.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('chatmessages', 'id', query),
+        ],
+      };
+    }
+
+    const records = await db.chatmessages.findAll({
+      attributes: ['id', 'id'],
+      where,
+      limit: limit ? Number(limit) : undefined,
+      offset: offset ? Number(offset) : undefined,
+      orderBy: [['id', 'ASC']],
+    });
+
+    return records.map((record) => ({
+      id: record.id,
+      label: record.id,
+    }));
+  }
+};

backend/src/db/api/chatroomparticipants.js

@@ -0,0 +1,334 @@
+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 ChatroomparticipantsDBApi {
+  static async create(data, options) {
+    const currentUser = (options && options.currentUser) || { id: null };
+    const transaction = (options && options.transaction) || undefined;
+
+    const chatroomparticipants = await db.chatroomparticipants.create(
+      {
+        id: data.id || undefined,
+
+        importHash: data.importHash || null,
+        createdById: currentUser.id,
+        updatedById: currentUser.id,
+      },
+      { transaction },
+    );
+
+    await chatroomparticipants.setChatroom(data.chatroom || null, {
+      transaction,
+    });
+
+    await chatroomparticipants.setUser(data.user || null, {
+      transaction,
+    });
+
+    return chatroomparticipants;
+  }
+
+  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 chatroomparticipantsData = data.map((item, index) => ({
+      id: item.id || undefined,
+
+      importHash: item.importHash || null,
+      createdById: currentUser.id,
+      updatedById: currentUser.id,
+      createdAt: new Date(Date.now() + index * 1000),
+    }));
+
+    // Bulk create items
+    const chatroomparticipants = await db.chatroomparticipants.bulkCreate(
+      chatroomparticipantsData,
+      { transaction },
+    );
+
+    // For each item created, replace relation files
+
+    return chatroomparticipants;
+  }
+
+  static async update(id, data, options) {
+    const currentUser = (options && options.currentUser) || { id: null };
+    const transaction = (options && options.transaction) || undefined;
+
+    const chatroomparticipants = await db.chatroomparticipants.findByPk(
+      id,
+      {},
+      { transaction },
+    );
+
+    const updatePayload = {};
+
+    updatePayload.updatedById = currentUser.id;
+
+    await chatroomparticipants.update(updatePayload, { transaction });
+
+    if (data.chatroom !== undefined) {
+      await chatroomparticipants.setChatroom(
+        data.chatroom,
+
+        { transaction },
+      );
+    }
+
+    if (data.user !== undefined) {
+      await chatroomparticipants.setUser(
+        data.user,
+
+        { transaction },
+      );
+    }
+
+    return chatroomparticipants;
+  }
+
+  static async deleteByIds(ids, options) {
+    const currentUser = (options && options.currentUser) || { id: null };
+    const transaction = (options && options.transaction) || undefined;
+
+    const chatroomparticipants = await db.chatroomparticipants.findAll({
+      where: {
+        id: {
+          [Op.in]: ids,
+        },
+      },
+      transaction,
+    });
+
+    await db.sequelize.transaction(async (transaction) => {
+      for (const record of chatroomparticipants) {
+        await record.update({ deletedBy: currentUser.id }, { transaction });
+      }
+      for (const record of chatroomparticipants) {
+        await record.destroy({ transaction });
+      }
+    });
+
+    return chatroomparticipants;
+  }
+
+  static async remove(id, options) {
+    const currentUser = (options && options.currentUser) || { id: null };
+    const transaction = (options && options.transaction) || undefined;
+
+    const chatroomparticipants = await db.chatroomparticipants.findByPk(
+      id,
+      options,
+    );
+
+    await chatroomparticipants.update(
+      {
+        deletedBy: currentUser.id,
+      },
+      {
+        transaction,
+      },
+    );
+
+    await chatroomparticipants.destroy({
+      transaction,
+    });
+
+    return chatroomparticipants;
+  }
+
+  static async findBy(where, options) {
+    const transaction = (options && options.transaction) || undefined;
+
+    const chatroomparticipants = await db.chatroomparticipants.findOne(
+      { where },
+      { transaction },
+    );
+
+    if (!chatroomparticipants) {
+      return chatroomparticipants;
+    }
+
+    const output = chatroomparticipants.get({ plain: true });
+
+    output.chatroom = await chatroomparticipants.getChatroom({
+      transaction,
+    });
+
+    output.user = await chatroomparticipants.getUser({
+      transaction,
+    });
+
+    return output;
+  }
+
+  static async findAll(filter, options) {
+    const limit = filter.limit || 0;
+    let offset = 0;
+    let where = {};
+    const currentPage = +filter.page;
+
+    offset = currentPage * limit;
+
+    const orderBy = null;
+
+    const transaction = (options && options.transaction) || undefined;
+
+    let include = [
+      {
+        model: db.chatrooms,
+        as: 'chatroom',
+
+        where: filter.chatroom
+          ? {
+              [Op.or]: [
+                {
+                  id: {
+                    [Op.in]: filter.chatroom
+                      .split('|')
+                      .map((term) => Utils.uuid(term)),
+                  },
+                },
+                {
+                  name: {
+                    [Op.or]: filter.chatroom
+                      .split('|')
+                      .map((term) => ({ [Op.iLike]: `%${term}%` })),
+                  },
+                },
+              ],
+            }
+          : {},
+      },
+
+      {
+        model: db.users,
+        as: 'user',
+
+        where: filter.user
+          ? {
+              [Op.or]: [
+                {
+                  id: {
+                    [Op.in]: filter.user
+                      .split('|')
+                      .map((term) => Utils.uuid(term)),
+                  },
+                },
+                {
+                  firstName: {
+                    [Op.or]: filter.user
+                      .split('|')
+                      .map((term) => ({ [Op.iLike]: `%${term}%` })),
+                  },
+                },
+              ],
+            }
+          : {},
+      },
+    ];
+
+    if (filter) {
+      if (filter.id) {
+        where = {
+          ...where,
+          ['id']: Utils.uuid(filter.id),
+        };
+      }
+
+      if (filter.active !== undefined) {
+        where = {
+          ...where,
+          active: filter.active === true || filter.active === 'true',
+        };
+      }
+
+      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.chatroomparticipants.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('chatroomparticipants', 'id', query),
+        ],
+      };
+    }
+
+    const records = await db.chatroomparticipants.findAll({
+      attributes: ['id', 'id'],
+      where,
+      limit: limit ? Number(limit) : undefined,
+      offset: offset ? Number(offset) : undefined,
+      orderBy: [['id', 'ASC']],
+    });
+
+    return records.map((record) => ({
+      id: record.id,
+      label: record.id,
+    }));
+  }
+};

backend/src/db/api/chatrooms.js

@@ -0,0 +1,297 @@
+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 ChatroomsDBApi {
+  static async create(data, options) {
+    const currentUser = (options && options.currentUser) || { id: null };
+    const transaction = (options && options.transaction) || undefined;
+
+    const chatrooms = await db.chatrooms.create(
+      {
+        id: data.id || undefined,
+
+        name: data.name || null,
+        type: data.type || null,
+        created_date: data.created_date || null,
+        importHash: data.importHash || null,
+        createdById: currentUser.id,
+        updatedById: currentUser.id,
+      },
+      { transaction },
+    );
+
+    return chatrooms;
+  }
+
+  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 chatroomsData = data.map((item, index) => ({
+      id: item.id || undefined,
+
+      name: item.name || null,
+      type: item.type || null,
+      created_date: item.created_date || null,
+      importHash: item.importHash || null,
+      createdById: currentUser.id,
+      updatedById: currentUser.id,
+      createdAt: new Date(Date.now() + index * 1000),
+    }));
+
+    // Bulk create items
+    const chatrooms = await db.chatrooms.bulkCreate(chatroomsData, {
+      transaction,
+    });
+
+    // For each item created, replace relation files
+
+    return chatrooms;
+  }
+
+  static async update(id, data, options) {
+    const currentUser = (options && options.currentUser) || { id: null };
+    const transaction = (options && options.transaction) || undefined;
+
+    const chatrooms = await db.chatrooms.findByPk(id, {}, { transaction });
+
+    const updatePayload = {};
+
+    if (data.name !== undefined) updatePayload.name = data.name;
+
+    if (data.type !== undefined) updatePayload.type = data.type;
+
+    if (data.created_date !== undefined)
+      updatePayload.created_date = data.created_date;
+
+    updatePayload.updatedById = currentUser.id;
+
+    await chatrooms.update(updatePayload, { transaction });
+
+    return chatrooms;
+  }
+
+  static async deleteByIds(ids, options) {
+    const currentUser = (options && options.currentUser) || { id: null };
+    const transaction = (options && options.transaction) || undefined;
+
+    const chatrooms = await db.chatrooms.findAll({
+      where: {
+        id: {
+          [Op.in]: ids,
+        },
+      },
+      transaction,
+    });
+
+    await db.sequelize.transaction(async (transaction) => {
+      for (const record of chatrooms) {
+        await record.update({ deletedBy: currentUser.id }, { transaction });
+      }
+      for (const record of chatrooms) {
+        await record.destroy({ transaction });
+      }
+    });
+
+    return chatrooms;
+  }
+
+  static async remove(id, options) {
+    const currentUser = (options && options.currentUser) || { id: null };
+    const transaction = (options && options.transaction) || undefined;
+
+    const chatrooms = await db.chatrooms.findByPk(id, options);
+
+    await chatrooms.update(
+      {
+        deletedBy: currentUser.id,
+      },
+      {
+        transaction,
+      },
+    );
+
+    await chatrooms.destroy({
+      transaction,
+    });
+
+    return chatrooms;
+  }
+
+  static async findBy(where, options) {
+    const transaction = (options && options.transaction) || undefined;
+
+    const chatrooms = await db.chatrooms.findOne({ where }, { transaction });
+
+    if (!chatrooms) {
+      return chatrooms;
+    }
+
+    const output = chatrooms.get({ plain: true });
+
+    output.chatmessages_chatroom = await chatrooms.getChatmessages_chatroom({
+      transaction,
+    });
+
+    output.chatroomparticipants_chatroom =
+      await chatrooms.getChatroomparticipants_chatroom({
+        transaction,
+      });
+
+    return output;
+  }
+
+  static async findAll(filter, options) {
+    const limit = filter.limit || 0;
+    let offset = 0;
+    let where = {};
+    const currentPage = +filter.page;
+
+    offset = currentPage * limit;
+
+    const orderBy = null;
+
+    const transaction = (options && options.transaction) || undefined;
+
+    let include = [];
+
+    if (filter) {
+      if (filter.id) {
+        where = {
+          ...where,
+          ['id']: Utils.uuid(filter.id),
+        };
+      }
+
+      if (filter.name) {
+        where = {
+          ...where,
+          [Op.and]: Utils.ilike('chatrooms', 'name', filter.name),
+        };
+      }
+
+      if (filter.created_dateRange) {
+        const [start, end] = filter.created_dateRange;
+
+        if (start !== undefined && start !== null && start !== '') {
+          where = {
+            ...where,
+            created_date: {
+              ...where.created_date,
+              [Op.gte]: start,
+            },
+          };
+        }
+
+        if (end !== undefined && end !== null && end !== '') {
+          where = {
+            ...where,
+            created_date: {
+              ...where.created_date,
+              [Op.lte]: end,
+            },
+          };
+        }
+      }
+
+      if (filter.active !== undefined) {
+        where = {
+          ...where,
+          active: filter.active === true || filter.active === 'true',
+        };
+      }
+
+      if (filter.type) {
+        where = {
+          ...where,
+          type: filter.type,
+        };
+      }
+
+      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.chatrooms.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('chatrooms', 'name', query),
+        ],
+      };
+    }
+
+    const records = await db.chatrooms.findAll({
+      attributes: ['id', 'name'],
+      where,
+      limit: limit ? Number(limit) : undefined,
+      offset: offset ? Number(offset) : undefined,
+      orderBy: [['name', 'ASC']],
+    });
+
+    return records.map((record) => ({
+      id: record.id,
+      label: record.name,
+    }));
+  }
+};

backend/src/db/api/users.js

@@ -267,6 +267,16 @@ module.exports = class UsersDBApi {
 
     const output = users.get({ plain: true });
 
+    output.chatmessages_sender = await users.getChatmessages_sender({
+      transaction,
+    });
+
+    output.chatroomparticipants_user = await users.getChatroomparticipants_user(
+      {
+        transaction,
+      },
+    );
+
     output.avatar = await users.getAvatar({
       transaction,
     });

backend/src/db/db.config.js

@@ -13,7 +13,7 @@ module.exports = {
     username: 'postgres',
     dialect: 'postgres',
     password: '',
-    database: 'db_adminpro',
+    database: 'db_society_community_portal',
     host: process.env.DB_HOST || 'localhost',
     logging: console.log,
     seederStorage: 'sequelize',

backend/src/db/migrations/1750265371768.js

@@ -0,0 +1,72 @@
+module.exports = {
+  /**
+   * @param {QueryInterface} queryInterface
+   * @param {Sequelize} Sequelize
+   * @returns {Promise<void>}
+   */
+  async up(queryInterface, Sequelize) {
+    /**
+     * @type {Transaction}
+     */
+    const transaction = await queryInterface.sequelize.transaction();
+    try {
+      await queryInterface.createTable(
+        'chatrooms',
+        {
+          id: {
+            type: Sequelize.DataTypes.UUID,
+            defaultValue: Sequelize.DataTypes.UUIDV4,
+            primaryKey: true,
+          },
+          createdById: {
+            type: Sequelize.DataTypes.UUID,
+            references: {
+              key: 'id',
+              model: 'users',
+            },
+          },
+          updatedById: {
+            type: Sequelize.DataTypes.UUID,
+            references: {
+              key: 'id',
+              model: 'users',
+            },
+          },
+          createdAt: { type: Sequelize.DataTypes.DATE },
+          updatedAt: { type: Sequelize.DataTypes.DATE },
+          deletedAt: { type: Sequelize.DataTypes.DATE },
+          importHash: {
+            type: Sequelize.DataTypes.STRING(255),
+            allowNull: true,
+            unique: true,
+          },
+        },
+        { transaction },
+      );
+
+      await 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.dropTable('chatrooms', { transaction });
+
+      await transaction.commit();
+    } catch (err) {
+      await transaction.rollback();
+      throw err;
+    }
+  },
+};

backend/src/db/migrations/1750265419400.js

@@ -0,0 +1,47 @@
+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.addColumn(
+        'chatrooms',
+        'name',
+        {
+          type: Sequelize.DataTypes.TEXT,
+        },
+        { transaction },
+      );
+
+      await transaction.commit();
+    } catch (err) {
+      await transaction.rollback();
+      throw err;
+    }
+  },
+  /**
+   * @param {QueryInterface} queryInterface
+   * @param {Sequelize} Sequelize
+   * @returns {Promise<void>}
+   */
+  async down(queryInterface, Sequelize) {
+    /**
+     * @type {Transaction}
+     */
+    const transaction = await queryInterface.sequelize.transaction();
+    try {
+      await queryInterface.removeColumn('chatrooms', 'name', { transaction });
+
+      await transaction.commit();
+    } catch (err) {
+      await transaction.rollback();
+      throw err;
+    }
+  },
+};

backend/src/db/migrations/1750265455323.js

@@ -0,0 +1,49 @@
+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.addColumn(
+        'chatrooms',
+        'type',
+        {
+          type: Sequelize.DataTypes.ENUM,
+
+          values: ['value'],
+        },
+        { transaction },
+      );
+
+      await transaction.commit();
+    } catch (err) {
+      await transaction.rollback();
+      throw err;
+    }
+  },
+  /**
+   * @param {QueryInterface} queryInterface
+   * @param {Sequelize} Sequelize
+   * @returns {Promise<void>}
+   */
+  async down(queryInterface, Sequelize) {
+    /**
+     * @type {Transaction}
+     */
+    const transaction = await queryInterface.sequelize.transaction();
+    try {
+      await queryInterface.removeColumn('chatrooms', 'type', { transaction });
+
+      await transaction.commit();
+    } catch (err) {
+      await transaction.rollback();
+      throw err;
+    }
+  },
+};

backend/src/db/migrations/1750265515961.js

@@ -0,0 +1,72 @@
+module.exports = {
+  /**
+   * @param {QueryInterface} queryInterface
+   * @param {Sequelize} Sequelize
+   * @returns {Promise<void>}
+   */
+  async up(queryInterface, Sequelize) {
+    /**
+     * @type {Transaction}
+     */
+    const transaction = await queryInterface.sequelize.transaction();
+    try {
+      await queryInterface.createTable(
+        'chatmessages',
+        {
+          id: {
+            type: Sequelize.DataTypes.UUID,
+            defaultValue: Sequelize.DataTypes.UUIDV4,
+            primaryKey: true,
+          },
+          createdById: {
+            type: Sequelize.DataTypes.UUID,
+            references: {
+              key: 'id',
+              model: 'users',
+            },
+          },
+          updatedById: {
+            type: Sequelize.DataTypes.UUID,
+            references: {
+              key: 'id',
+              model: 'users',
+            },
+          },
+          createdAt: { type: Sequelize.DataTypes.DATE },
+          updatedAt: { type: Sequelize.DataTypes.DATE },
+          deletedAt: { type: Sequelize.DataTypes.DATE },
+          importHash: {
+            type: Sequelize.DataTypes.STRING(255),
+            allowNull: true,
+            unique: true,
+          },
+        },
+        { transaction },
+      );
+
+      await 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.dropTable('chatmessages', { transaction });
+
+      await transaction.commit();
+    } catch (err) {
+      await transaction.rollback();
+      throw err;
+    }
+  },
+};

backend/src/db/migrations/1750265548741.js

@@ -0,0 +1,49 @@
+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.addColumn(
+        'chatrooms',
+        'created_date',
+        {
+          type: Sequelize.DataTypes.DATE,
+        },
+        { transaction },
+      );
+
+      await transaction.commit();
+    } catch (err) {
+      await transaction.rollback();
+      throw err;
+    }
+  },
+  /**
+   * @param {QueryInterface} queryInterface
+   * @param {Sequelize} Sequelize
+   * @returns {Promise<void>}
+   */
+  async down(queryInterface, Sequelize) {
+    /**
+     * @type {Transaction}
+     */
+    const transaction = await queryInterface.sequelize.transaction();
+    try {
+      await queryInterface.removeColumn('chatrooms', 'created_date', {
+        transaction,
+      });
+
+      await transaction.commit();
+    } catch (err) {
+      await transaction.rollback();
+      throw err;
+    }
+  },
+};

backend/src/db/migrations/1750265578751.js

@@ -0,0 +1,49 @@
+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.addColumn(
+        'chatmessages',
+        'content',
+        {
+          type: Sequelize.DataTypes.TEXT,
+        },
+        { transaction },
+      );
+
+      await transaction.commit();
+    } catch (err) {
+      await transaction.rollback();
+      throw err;
+    }
+  },
+  /**
+   * @param {QueryInterface} queryInterface
+   * @param {Sequelize} Sequelize
+   * @returns {Promise<void>}
+   */
+  async down(queryInterface, Sequelize) {
+    /**
+     * @type {Transaction}
+     */
+    const transaction = await queryInterface.sequelize.transaction();
+    try {
+      await queryInterface.removeColumn('chatmessages', 'content', {
+        transaction,
+      });
+
+      await transaction.commit();
+    } catch (err) {
+      await transaction.rollback();
+      throw err;
+    }
+  },
+};

backend/src/db/migrations/1750265604945.js

@@ -0,0 +1,49 @@
+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.addColumn(
+        'chatmessages',
+        'created_date',
+        {
+          type: Sequelize.DataTypes.DATE,
+        },
+        { transaction },
+      );
+
+      await transaction.commit();
+    } catch (err) {
+      await transaction.rollback();
+      throw err;
+    }
+  },
+  /**
+   * @param {QueryInterface} queryInterface
+   * @param {Sequelize} Sequelize
+   * @returns {Promise<void>}
+   */
+  async down(queryInterface, Sequelize) {
+    /**
+     * @type {Transaction}
+     */
+    const transaction = await queryInterface.sequelize.transaction();
+    try {
+      await queryInterface.removeColumn('chatmessages', 'created_date', {
+        transaction,
+      });
+
+      await transaction.commit();
+    } catch (err) {
+      await transaction.rollback();
+      throw err;
+    }
+  },
+};

backend/src/db/migrations/1750265634411.js

@@ -0,0 +1,72 @@
+module.exports = {
+  /**
+   * @param {QueryInterface} queryInterface
+   * @param {Sequelize} Sequelize
+   * @returns {Promise<void>}
+   */
+  async up(queryInterface, Sequelize) {
+    /**
+     * @type {Transaction}
+     */
+    const transaction = await queryInterface.sequelize.transaction();
+    try {
+      await queryInterface.createTable(
+        'chatroomparticipants',
+        {
+          id: {
+            type: Sequelize.DataTypes.UUID,
+            defaultValue: Sequelize.DataTypes.UUIDV4,
+            primaryKey: true,
+          },
+          createdById: {
+            type: Sequelize.DataTypes.UUID,
+            references: {
+              key: 'id',
+              model: 'users',
+            },
+          },
+          updatedById: {
+            type: Sequelize.DataTypes.UUID,
+            references: {
+              key: 'id',
+              model: 'users',
+            },
+          },
+          createdAt: { type: Sequelize.DataTypes.DATE },
+          updatedAt: { type: Sequelize.DataTypes.DATE },
+          deletedAt: { type: Sequelize.DataTypes.DATE },
+          importHash: {
+            type: Sequelize.DataTypes.STRING(255),
+            allowNull: true,
+            unique: true,
+          },
+        },
+        { transaction },
+      );
+
+      await 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.dropTable('chatroomparticipants', { transaction });
+
+      await transaction.commit();
+    } catch (err) {
+      await transaction.rollback();
+      throw err;
+    }
+  },
+};

backend/src/db/migrations/1750265662159.js

@@ -0,0 +1,54 @@
+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.addColumn(
+        'chatroomparticipants',
+        'chatroomId',
+        {
+          type: Sequelize.DataTypes.UUID,
+
+          references: {
+            model: 'chatrooms',
+            key: 'id',
+          },
+        },
+        { transaction },
+      );
+
+      await transaction.commit();
+    } catch (err) {
+      await transaction.rollback();
+      throw err;
+    }
+  },
+  /**
+   * @param {QueryInterface} queryInterface
+   * @param {Sequelize} Sequelize
+   * @returns {Promise<void>}
+   */
+  async down(queryInterface, Sequelize) {
+    /**
+     * @type {Transaction}
+     */
+    const transaction = await queryInterface.sequelize.transaction();
+    try {
+      await queryInterface.removeColumn('chatroomparticipants', 'chatroomId', {
+        transaction,
+      });
+
+      await transaction.commit();
+    } catch (err) {
+      await transaction.rollback();
+      throw err;
+    }
+  },
+};

backend/src/db/migrations/1750265689235.js

@@ -0,0 +1,54 @@
+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.addColumn(
+        'chatmessages',
+        'chatroomId',
+        {
+          type: Sequelize.DataTypes.UUID,
+
+          references: {
+            model: 'chatrooms',
+            key: 'id',
+          },
+        },
+        { transaction },
+      );
+
+      await transaction.commit();
+    } catch (err) {
+      await transaction.rollback();
+      throw err;
+    }
+  },
+  /**
+   * @param {QueryInterface} queryInterface
+   * @param {Sequelize} Sequelize
+   * @returns {Promise<void>}
+   */
+  async down(queryInterface, Sequelize) {
+    /**
+     * @type {Transaction}
+     */
+    const transaction = await queryInterface.sequelize.transaction();
+    try {
+      await queryInterface.removeColumn('chatmessages', 'chatroomId', {
+        transaction,
+      });
+
+      await transaction.commit();
+    } catch (err) {
+      await transaction.rollback();
+      throw err;
+    }
+  },
+};

backend/src/db/migrations/1750265715124.js

@@ -0,0 +1,54 @@
+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.addColumn(
+        'chatroomparticipants',
+        'userId',
+        {
+          type: Sequelize.DataTypes.UUID,
+
+          references: {
+            model: 'users',
+            key: 'id',
+          },
+        },
+        { transaction },
+      );
+
+      await transaction.commit();
+    } catch (err) {
+      await transaction.rollback();
+      throw err;
+    }
+  },
+  /**
+   * @param {QueryInterface} queryInterface
+   * @param {Sequelize} Sequelize
+   * @returns {Promise<void>}
+   */
+  async down(queryInterface, Sequelize) {
+    /**
+     * @type {Transaction}
+     */
+    const transaction = await queryInterface.sequelize.transaction();
+    try {
+      await queryInterface.removeColumn('chatroomparticipants', 'userId', {
+        transaction,
+      });
+
+      await transaction.commit();
+    } catch (err) {
+      await transaction.rollback();
+      throw err;
+    }
+  },
+};

backend/src/db/migrations/1750265741614.js

@@ -0,0 +1,54 @@
+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.addColumn(
+        'chatmessages',
+        'senderId',
+        {
+          type: Sequelize.DataTypes.UUID,
+
+          references: {
+            model: 'users',
+            key: 'id',
+          },
+        },
+        { transaction },
+      );
+
+      await transaction.commit();
+    } catch (err) {
+      await transaction.rollback();
+      throw err;
+    }
+  },
+  /**
+   * @param {QueryInterface} queryInterface
+   * @param {Sequelize} Sequelize
+   * @returns {Promise<void>}
+   */
+  async down(queryInterface, Sequelize) {
+    /**
+     * @type {Transaction}
+     */
+    const transaction = await queryInterface.sequelize.transaction();
+    try {
+      await queryInterface.removeColumn('chatmessages', 'senderId', {
+        transaction,
+      });
+
+      await transaction.commit();
+    } catch (err) {
+      await transaction.rollback();
+      throw err;
+    }
+  },
+};

backend/src/db/models/chatmessages.js

@@ -0,0 +1,69 @@
+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 chatmessages = sequelize.define(
+    'chatmessages',
+    {
+      id: {
+        type: DataTypes.UUID,
+        defaultValue: DataTypes.UUIDV4,
+        primaryKey: true,
+      },
+
+      content: {
+        type: DataTypes.TEXT,
+      },
+
+      created_date: {
+        type: DataTypes.DATE,
+      },
+
+      importHash: {
+        type: DataTypes.STRING(255),
+        allowNull: true,
+        unique: true,
+      },
+    },
+    {
+      timestamps: true,
+      paranoid: true,
+      freezeTableName: true,
+    },
+  );
+
+  chatmessages.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.chatmessages.belongsTo(db.chatrooms, {
+      as: 'chatroom',
+      foreignKey: {
+        name: 'chatroomId',
+      },
+      constraints: false,
+    });
+
+    db.chatmessages.belongsTo(db.users, {
+      as: 'sender',
+      foreignKey: {
+        name: 'senderId',
+      },
+      constraints: false,
+    });
+
+    db.chatmessages.belongsTo(db.users, {
+      as: 'createdBy',
+    });
+
+    db.chatmessages.belongsTo(db.users, {
+      as: 'updatedBy',
+    });
+  };
+
+  return chatmessages;
+};

backend/src/db/models/chatroomparticipants.js

@@ -0,0 +1,61 @@
+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 chatroomparticipants = sequelize.define(
+    'chatroomparticipants',
+    {
+      id: {
+        type: DataTypes.UUID,
+        defaultValue: DataTypes.UUIDV4,
+        primaryKey: true,
+      },
+
+      importHash: {
+        type: DataTypes.STRING(255),
+        allowNull: true,
+        unique: true,
+      },
+    },
+    {
+      timestamps: true,
+      paranoid: true,
+      freezeTableName: true,
+    },
+  );
+
+  chatroomparticipants.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.chatroomparticipants.belongsTo(db.chatrooms, {
+      as: 'chatroom',
+      foreignKey: {
+        name: 'chatroomId',
+      },
+      constraints: false,
+    });
+
+    db.chatroomparticipants.belongsTo(db.users, {
+      as: 'user',
+      foreignKey: {
+        name: 'userId',
+      },
+      constraints: false,
+    });
+
+    db.chatroomparticipants.belongsTo(db.users, {
+      as: 'createdBy',
+    });
+
+    db.chatroomparticipants.belongsTo(db.users, {
+      as: 'updatedBy',
+    });
+  };
+
+  return chatroomparticipants;
+};

backend/src/db/models/chatrooms.js

@@ -0,0 +1,75 @@
+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 chatrooms = sequelize.define(
+    'chatrooms',
+    {
+      id: {
+        type: DataTypes.UUID,
+        defaultValue: DataTypes.UUIDV4,
+        primaryKey: true,
+      },
+
+      name: {
+        type: DataTypes.TEXT,
+      },
+
+      type: {
+        type: DataTypes.ENUM,
+
+        values: ['value'],
+      },
+
+      created_date: {
+        type: DataTypes.DATE,
+      },
+
+      importHash: {
+        type: DataTypes.STRING(255),
+        allowNull: true,
+        unique: true,
+      },
+    },
+    {
+      timestamps: true,
+      paranoid: true,
+      freezeTableName: true,
+    },
+  );
+
+  chatrooms.associate = (db) => {
+    /// loop through entities and it's fields, and if ref === current e[name] and create relation has many on parent entity
+
+    db.chatrooms.hasMany(db.chatmessages, {
+      as: 'chatmessages_chatroom',
+      foreignKey: {
+        name: 'chatroomId',
+      },
+      constraints: false,
+    });
+
+    db.chatrooms.hasMany(db.chatroomparticipants, {
+      as: 'chatroomparticipants_chatroom',
+      foreignKey: {
+        name: 'chatroomId',
+      },
+      constraints: false,
+    });
+
+    //end loop
+
+    db.chatrooms.belongsTo(db.users, {
+      as: 'createdBy',
+    });
+
+    db.chatrooms.belongsTo(db.users, {
+      as: 'updatedBy',
+    });
+  };
+
+  return chatrooms;
+};

backend/src/db/models/users.js

@@ -102,6 +102,22 @@ module.exports = function (sequelize, DataTypes) {
 
     /// loop through entities and it's fields, and if ref === current e[name] and create relation has many on parent entity
 
+    db.users.hasMany(db.chatmessages, {
+      as: 'chatmessages_sender',
+      foreignKey: {
+        name: 'senderId',
+      },
+      constraints: false,
+    });
+
+    db.users.hasMany(db.chatroomparticipants, {
+      as: 'chatroomparticipants_user',
+      foreignKey: {
+        name: 'userId',
+      },
+      constraints: false,
+    });
+
     //end loop
 
     db.users.belongsTo(db.roles, {

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

@@ -104,6 +104,9 @@ module.exports = {
       'reports',
       'roles',
       'permissions',
+      'chatrooms',
+      'chatmessages',
+      'chatroomparticipants',
       ,
     ];
     await queryInterface.bulkInsert(
@@ -529,6 +532,81 @@ primary key ("roles_permissionsId", "permissionId")
         permissionId: getId('DELETE_PERMISSIONS'),
       },
 
+      {
+        createdAt,
+        updatedAt,
+        roles_permissionsId: getId('Administrator'),
+        permissionId: getId('CREATE_CHATROOMS'),
+      },
+      {
+        createdAt,
+        updatedAt,
+        roles_permissionsId: getId('Administrator'),
+        permissionId: getId('READ_CHATROOMS'),
+      },
+      {
+        createdAt,
+        updatedAt,
+        roles_permissionsId: getId('Administrator'),
+        permissionId: getId('UPDATE_CHATROOMS'),
+      },
+      {
+        createdAt,
+        updatedAt,
+        roles_permissionsId: getId('Administrator'),
+        permissionId: getId('DELETE_CHATROOMS'),
+      },
+
+      {
+        createdAt,
+        updatedAt,
+        roles_permissionsId: getId('Administrator'),
+        permissionId: getId('CREATE_CHATMESSAGES'),
+      },
+      {
+        createdAt,
+        updatedAt,
+        roles_permissionsId: getId('Administrator'),
+        permissionId: getId('READ_CHATMESSAGES'),
+      },
+      {
+        createdAt,
+        updatedAt,
+        roles_permissionsId: getId('Administrator'),
+        permissionId: getId('UPDATE_CHATMESSAGES'),
+      },
+      {
+        createdAt,
+        updatedAt,
+        roles_permissionsId: getId('Administrator'),
+        permissionId: getId('DELETE_CHATMESSAGES'),
+      },
+
+      {
+        createdAt,
+        updatedAt,
+        roles_permissionsId: getId('Administrator'),
+        permissionId: getId('CREATE_CHATROOMPARTICIPANTS'),
+      },
+      {
+        createdAt,
+        updatedAt,
+        roles_permissionsId: getId('Administrator'),
+        permissionId: getId('READ_CHATROOMPARTICIPANTS'),
+      },
+      {
+        createdAt,
+        updatedAt,
+        roles_permissionsId: getId('Administrator'),
+        permissionId: getId('UPDATE_CHATROOMPARTICIPANTS'),
+      },
+      {
+        createdAt,
+        updatedAt,
+        roles_permissionsId: getId('Administrator'),
+        permissionId: getId('DELETE_CHATROOMPARTICIPANTS'),
+      },
+
       {
         createdAt,
         updatedAt,

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

@@ -5,6 +5,12 @@ const Departments = db.departments;
 
 const Reports = db.reports;
 
+const Chatrooms = db.chatrooms;
+
+const Chatmessages = db.chatmessages;
+
+const Chatroomparticipants = db.chatroomparticipants;
+
 const DepartmentsData = [
   {
     name: 'Human Resources',
@@ -29,6 +35,12 @@ const DepartmentsData = [
 
     // type code here for "relation_many" field
   },
+
+  {
+    name: 'Sales',
+
+    // type code here for "relation_many" field
+  },
 ];
 
 const ReportsData = [
@@ -55,21 +67,391 @@ const ReportsData = [
 
     created_date: new Date('2023-04-05T11:15:00Z'),
   },
+
+  {
+    title: 'Sales Performance Review',
+
+    created_date: new Date('2023-05-25T16:45:00Z'),
+  },
+];
+
+const ChatroomsData = [
+  {
+    name: 'Charles Darwin',
+
+    type: 'value',
+
+    created_date: new Date(Date.now()),
+  },
+
+  {
+    name: 'Emil Fischer',
+
+    type: 'value',
+
+    created_date: new Date(Date.now()),
+  },
+
+  {
+    name: 'Johannes Kepler',
+
+    type: 'value',
+
+    created_date: new Date(Date.now()),
+  },
+
+  {
+    name: 'Dmitri Mendeleev',
+
+    type: 'value',
+
+    created_date: new Date(Date.now()),
+  },
+
+  {
+    name: 'August Kekule',
+
+    type: 'value',
+
+    created_date: new Date(Date.now()),
+  },
+];
+
+const ChatmessagesData = [
+  {
+    content: 'Max Planck',
+
+    created_date: new Date(Date.now()),
+
+    // type code here for "relation_one" field
+
+    // type code here for "relation_one" field
+  },
+
+  {
+    content: 'Enrico Fermi',
+
+    created_date: new Date(Date.now()),
+
+    // type code here for "relation_one" field
+
+    // type code here for "relation_one" field
+  },
+
+  {
+    content: 'Charles Darwin',
+
+    created_date: new Date(Date.now()),
+
+    // type code here for "relation_one" field
+
+    // type code here for "relation_one" field
+  },
+
+  {
+    content: 'Franz Boas',
+
+    created_date: new Date(Date.now()),
+
+    // type code here for "relation_one" field
+
+    // type code here for "relation_one" field
+  },
+
+  {
+    content: 'Dmitri Mendeleev',
+
+    created_date: new Date(Date.now()),
+
+    // type code here for "relation_one" field
+
+    // type code here for "relation_one" field
+  },
+];
+
+const ChatroomparticipantsData = [
+  {
+    // type code here for "relation_one" field
+    // type code here for "relation_one" field
+  },
+
+  {
+    // type code here for "relation_one" field
+    // type code here for "relation_one" field
+  },
+
+  {
+    // type code here for "relation_one" field
+    // type code here for "relation_one" field
+  },
+
+  {
+    // type code here for "relation_one" field
+    // type code here for "relation_one" field
+  },
+
+  {
+    // type code here for "relation_one" field
+    // type code here for "relation_one" field
+  },
 ];
 
 // Similar logic for "relation_many"
 
 // Similar logic for "relation_many"
 
+async function associateChatmessageWithChatroom() {
+  const relatedChatroom0 = await Chatrooms.findOne({
+    offset: Math.floor(Math.random() * (await Chatrooms.count())),
+  });
+  const Chatmessage0 = await Chatmessages.findOne({
+    order: [['id', 'ASC']],
+    offset: 0,
+  });
+  if (Chatmessage0?.setChatroom) {
+    await Chatmessage0.setChatroom(relatedChatroom0);
+  }
+
+  const relatedChatroom1 = await Chatrooms.findOne({
+    offset: Math.floor(Math.random() * (await Chatrooms.count())),
+  });
+  const Chatmessage1 = await Chatmessages.findOne({
+    order: [['id', 'ASC']],
+    offset: 1,
+  });
+  if (Chatmessage1?.setChatroom) {
+    await Chatmessage1.setChatroom(relatedChatroom1);
+  }
+
+  const relatedChatroom2 = await Chatrooms.findOne({
+    offset: Math.floor(Math.random() * (await Chatrooms.count())),
+  });
+  const Chatmessage2 = await Chatmessages.findOne({
+    order: [['id', 'ASC']],
+    offset: 2,
+  });
+  if (Chatmessage2?.setChatroom) {
+    await Chatmessage2.setChatroom(relatedChatroom2);
+  }
+
+  const relatedChatroom3 = await Chatrooms.findOne({
+    offset: Math.floor(Math.random() * (await Chatrooms.count())),
+  });
+  const Chatmessage3 = await Chatmessages.findOne({
+    order: [['id', 'ASC']],
+    offset: 3,
+  });
+  if (Chatmessage3?.setChatroom) {
+    await Chatmessage3.setChatroom(relatedChatroom3);
+  }
+
+  const relatedChatroom4 = await Chatrooms.findOne({
+    offset: Math.floor(Math.random() * (await Chatrooms.count())),
+  });
+  const Chatmessage4 = await Chatmessages.findOne({
+    order: [['id', 'ASC']],
+    offset: 4,
+  });
+  if (Chatmessage4?.setChatroom) {
+    await Chatmessage4.setChatroom(relatedChatroom4);
+  }
+}
+
+async function associateChatmessageWithSender() {
+  const relatedSender0 = await Users.findOne({
+    offset: Math.floor(Math.random() * (await Users.count())),
+  });
+  const Chatmessage0 = await Chatmessages.findOne({
+    order: [['id', 'ASC']],
+    offset: 0,
+  });
+  if (Chatmessage0?.setSender) {
+    await Chatmessage0.setSender(relatedSender0);
+  }
+
+  const relatedSender1 = await Users.findOne({
+    offset: Math.floor(Math.random() * (await Users.count())),
+  });
+  const Chatmessage1 = await Chatmessages.findOne({
+    order: [['id', 'ASC']],
+    offset: 1,
+  });
+  if (Chatmessage1?.setSender) {
+    await Chatmessage1.setSender(relatedSender1);
+  }
+
+  const relatedSender2 = await Users.findOne({
+    offset: Math.floor(Math.random() * (await Users.count())),
+  });
+  const Chatmessage2 = await Chatmessages.findOne({
+    order: [['id', 'ASC']],
+    offset: 2,
+  });
+  if (Chatmessage2?.setSender) {
+    await Chatmessage2.setSender(relatedSender2);
+  }
+
+  const relatedSender3 = await Users.findOne({
+    offset: Math.floor(Math.random() * (await Users.count())),
+  });
+  const Chatmessage3 = await Chatmessages.findOne({
+    order: [['id', 'ASC']],
+    offset: 3,
+  });
+  if (Chatmessage3?.setSender) {
+    await Chatmessage3.setSender(relatedSender3);
+  }
+
+  const relatedSender4 = await Users.findOne({
+    offset: Math.floor(Math.random() * (await Users.count())),
+  });
+  const Chatmessage4 = await Chatmessages.findOne({
+    order: [['id', 'ASC']],
+    offset: 4,
+  });
+  if (Chatmessage4?.setSender) {
+    await Chatmessage4.setSender(relatedSender4);
+  }
+}
+
+async function associateChatroomparticipantWithChatroom() {
+  const relatedChatroom0 = await Chatrooms.findOne({
+    offset: Math.floor(Math.random() * (await Chatrooms.count())),
+  });
+  const Chatroomparticipant0 = await Chatroomparticipants.findOne({
+    order: [['id', 'ASC']],
+    offset: 0,
+  });
+  if (Chatroomparticipant0?.setChatroom) {
+    await Chatroomparticipant0.setChatroom(relatedChatroom0);
+  }
+
+  const relatedChatroom1 = await Chatrooms.findOne({
+    offset: Math.floor(Math.random() * (await Chatrooms.count())),
+  });
+  const Chatroomparticipant1 = await Chatroomparticipants.findOne({
+    order: [['id', 'ASC']],
+    offset: 1,
+  });
+  if (Chatroomparticipant1?.setChatroom) {
+    await Chatroomparticipant1.setChatroom(relatedChatroom1);
+  }
+
+  const relatedChatroom2 = await Chatrooms.findOne({
+    offset: Math.floor(Math.random() * (await Chatrooms.count())),
+  });
+  const Chatroomparticipant2 = await Chatroomparticipants.findOne({
+    order: [['id', 'ASC']],
+    offset: 2,
+  });
+  if (Chatroomparticipant2?.setChatroom) {
+    await Chatroomparticipant2.setChatroom(relatedChatroom2);
+  }
+
+  const relatedChatroom3 = await Chatrooms.findOne({
+    offset: Math.floor(Math.random() * (await Chatrooms.count())),
+  });
+  const Chatroomparticipant3 = await Chatroomparticipants.findOne({
+    order: [['id', 'ASC']],
+    offset: 3,
+  });
+  if (Chatroomparticipant3?.setChatroom) {
+    await Chatroomparticipant3.setChatroom(relatedChatroom3);
+  }
+
+  const relatedChatroom4 = await Chatrooms.findOne({
+    offset: Math.floor(Math.random() * (await Chatrooms.count())),
+  });
+  const Chatroomparticipant4 = await Chatroomparticipants.findOne({
+    order: [['id', 'ASC']],
+    offset: 4,
+  });
+  if (Chatroomparticipant4?.setChatroom) {
+    await Chatroomparticipant4.setChatroom(relatedChatroom4);
+  }
+}
+
+async function associateChatroomparticipantWithUser() {
+  const relatedUser0 = await Users.findOne({
+    offset: Math.floor(Math.random() * (await Users.count())),
+  });
+  const Chatroomparticipant0 = await Chatroomparticipants.findOne({
+    order: [['id', 'ASC']],
+    offset: 0,
+  });
+  if (Chatroomparticipant0?.setUser) {
+    await Chatroomparticipant0.setUser(relatedUser0);
+  }
+
+  const relatedUser1 = await Users.findOne({
+    offset: Math.floor(Math.random() * (await Users.count())),
+  });
+  const Chatroomparticipant1 = await Chatroomparticipants.findOne({
+    order: [['id', 'ASC']],
+    offset: 1,
+  });
+  if (Chatroomparticipant1?.setUser) {
+    await Chatroomparticipant1.setUser(relatedUser1);
+  }
+
+  const relatedUser2 = await Users.findOne({
+    offset: Math.floor(Math.random() * (await Users.count())),
+  });
+  const Chatroomparticipant2 = await Chatroomparticipants.findOne({
+    order: [['id', 'ASC']],
+    offset: 2,
+  });
+  if (Chatroomparticipant2?.setUser) {
+    await Chatroomparticipant2.setUser(relatedUser2);
+  }
+
+  const relatedUser3 = await Users.findOne({
+    offset: Math.floor(Math.random() * (await Users.count())),
+  });
+  const Chatroomparticipant3 = await Chatroomparticipants.findOne({
+    order: [['id', 'ASC']],
+    offset: 3,
+  });
+  if (Chatroomparticipant3?.setUser) {
+    await Chatroomparticipant3.setUser(relatedUser3);
+  }
+
+  const relatedUser4 = await Users.findOne({
+    offset: Math.floor(Math.random() * (await Users.count())),
+  });
+  const Chatroomparticipant4 = await Chatroomparticipants.findOne({
+    order: [['id', 'ASC']],
+    offset: 4,
+  });
+  if (Chatroomparticipant4?.setUser) {
+    await Chatroomparticipant4.setUser(relatedUser4);
+  }
+}
+
 module.exports = {
   up: async (queryInterface, Sequelize) => {
     await Departments.bulkCreate(DepartmentsData);
 
     await Reports.bulkCreate(ReportsData);
 
+    await Chatrooms.bulkCreate(ChatroomsData);
+
+    await Chatmessages.bulkCreate(ChatmessagesData);
+
+    await Chatroomparticipants.bulkCreate(ChatroomparticipantsData);
+
     await Promise.all([
       // Similar logic for "relation_many"
+
       // Similar logic for "relation_many"
+
+      await associateChatmessageWithChatroom(),
+
+      await associateChatmessageWithSender(),
+
+      await associateChatroomparticipantWithChatroom(),
+
+      await associateChatroomparticipantWithUser(),
     ]);
   },
 
@@ -77,5 +459,11 @@ module.exports = {
     await queryInterface.bulkDelete('departments', null, {});
 
     await queryInterface.bulkDelete('reports', null, {});
+
+    await queryInterface.bulkDelete('chatrooms', null, {});
+
+    await queryInterface.bulkDelete('chatmessages', null, {});
+
+    await queryInterface.bulkDelete('chatroomparticipants', null, {});
   },
 };

backend/src/db/seeders/20250618164931.js

@@ -0,0 +1,87 @@
+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 = ['chatrooms'];
+
+    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);
+    }
+  },
+  down: async (queryInterface, Sequelize) => {
+    await queryInterface.bulkDelete(
+      'permissions',
+      entities.flatMap(createPermissions),
+    );
+  },
+};

backend/src/db/seeders/20250618165155.js

@@ -0,0 +1,87 @@
+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 = ['chatmessages'];
+
+    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);
+    }
+  },
+  down: async (queryInterface, Sequelize) => {
+    await queryInterface.bulkDelete(
+      'permissions',
+      entities.flatMap(createPermissions),
+    );
+  },
+};

backend/src/db/seeders/20250618165354.js

@@ -0,0 +1,87 @@
+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 = ['chatroomparticipants'];
+
+    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);
+    }
+  },
+  down: async (queryInterface, Sequelize) => {
+    await queryInterface.bulkDelete(
+      'permissions',
+      entities.flatMap(createPermissions),
+    );
+  },
+};

backend/src/index.js

@@ -29,6 +29,12 @@ const rolesRoutes = require('./routes/roles');
 
 const permissionsRoutes = require('./routes/permissions');
 
+const chatroomsRoutes = require('./routes/chatrooms');
+
+const chatmessagesRoutes = require('./routes/chatmessages');
+
+const chatroomparticipantsRoutes = require('./routes/chatroomparticipants');
+
 const getBaseUrl = (url) => {
   if (!url) return '';
   return url.endsWith('/api') ? url.slice(0, -4) : url;
@@ -39,9 +45,9 @@ const options = {
     openapi: '3.0.0',
     info: {
       version: '1.0.0',
-      title: 'Adminpro',
+      title: 'society-community-portal',
       description:
-        'Adminpro Online REST API for Testing and Prototyping application. You can perform all major operations with your entities - create, delete and etc.',
+        'society-community-portal Online REST API for Testing and Prototyping application. You can perform all major operations with your entities - create, delete and etc.',
     },
     servers: [
       {
@@ -124,6 +130,24 @@ app.use(
   permissionsRoutes,
 );
 
+app.use(
+  '/api/chatrooms',
+  passport.authenticate('jwt', { session: false }),
+  chatroomsRoutes,
+);
+
+app.use(
+  '/api/chatmessages',
+  passport.authenticate('jwt', { session: false }),
+  chatmessagesRoutes,
+);
+
+app.use(
+  '/api/chatroomparticipants',
+  passport.authenticate('jwt', { session: false }),
+  chatroomparticipantsRoutes,
+);
+
 app.use(
   '/api/openai',
   passport.authenticate('jwt', { session: false }),

backend/src/routes/chatmessages.js

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

backend/src/routes/chatroomparticipants.js

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

backend/src/routes/chatrooms.js

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

backend/src/services/chatmessages.js

@@ -0,0 +1,117 @@
+const db = require('../db/models');
+const ChatmessagesDBApi = require('../db/api/chatmessages');
+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 ChatmessagesService {
+  static async create(data, currentUser) {
+    const transaction = await db.sequelize.transaction();
+    try {
+      await ChatmessagesDBApi.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 ChatmessagesDBApi.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 chatmessages = await ChatmessagesDBApi.findBy(
+        { id },
+        { transaction },
+      );
+
+      if (!chatmessages) {
+        throw new ValidationError('chatmessagesNotFound');
+      }
+
+      const updatedChatmessages = await ChatmessagesDBApi.update(id, data, {
+        currentUser,
+        transaction,
+      });
+
+      await transaction.commit();
+      return updatedChatmessages;
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  static async deleteByIds(ids, currentUser) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await ChatmessagesDBApi.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 ChatmessagesDBApi.remove(id, {
+        currentUser,
+        transaction,
+      });
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+};

backend/src/services/chatroomparticipants.js

@@ -0,0 +1,118 @@
+const db = require('../db/models');
+const ChatroomparticipantsDBApi = require('../db/api/chatroomparticipants');
+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 ChatroomparticipantsService {
+  static async create(data, currentUser) {
+    const transaction = await db.sequelize.transaction();
+    try {
+      await ChatroomparticipantsDBApi.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 ChatroomparticipantsDBApi.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 chatroomparticipants = await ChatroomparticipantsDBApi.findBy(
+        { id },
+        { transaction },
+      );
+
+      if (!chatroomparticipants) {
+        throw new ValidationError('chatroomparticipantsNotFound');
+      }
+
+      const updatedChatroomparticipants =
+        await ChatroomparticipantsDBApi.update(id, data, {
+          currentUser,
+          transaction,
+        });
+
+      await transaction.commit();
+      return updatedChatroomparticipants;
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  static async deleteByIds(ids, currentUser) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await ChatroomparticipantsDBApi.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 ChatroomparticipantsDBApi.remove(id, {
+        currentUser,
+        transaction,
+      });
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+};

backend/src/services/chatrooms.js

@@ -0,0 +1,114 @@
+const db = require('../db/models');
+const ChatroomsDBApi = require('../db/api/chatrooms');
+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 ChatroomsService {
+  static async create(data, currentUser) {
+    const transaction = await db.sequelize.transaction();
+    try {
+      await ChatroomsDBApi.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 ChatroomsDBApi.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 chatrooms = await ChatroomsDBApi.findBy({ id }, { transaction });
+
+      if (!chatrooms) {
+        throw new ValidationError('chatroomsNotFound');
+      }
+
+      const updatedChatrooms = await ChatroomsDBApi.update(id, data, {
+        currentUser,
+        transaction,
+      });
+
+      await transaction.commit();
+      return updatedChatrooms;
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+
+  static async deleteByIds(ids, currentUser) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await ChatroomsDBApi.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 ChatroomsDBApi.remove(id, {
+        currentUser,
+        transaction,
+      });
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+};

backend/src/services/notifications/list.js

@@ -1,6 +1,6 @@
 const errors = {
   app: {
-    title: 'Adminpro',
+    title: 'society-community-portal',
   },
 
   auth: {

backend/src/services/search.js

@@ -46,6 +46,10 @@ module.exports = class SearchService {
         departments: ['name'],
 
         reports: ['title'],
+
+        chatrooms: ['name'],
+
+        chatmessages: ['content'],
       };
       const columnsInt = {};
 

docker/docker-compose.yml

@@ -25,7 +25,7 @@ services:
       - ./data/db:/var/lib/postgresql/data
     environment:
       - POSTGRES_HOST_AUTH_METHOD=trust
-      - POSTGRES_DB=db_adminpro
+      - POSTGRES_DB=db_society_community_portal
     ports:
       - "5432:5432"
     logging:

frontend/README.md

@@ -1,4 +1,4 @@
-# Adminpro
+# society-community-portal
 
 ## This project was generated by Flatlogic Platform.
 

frontend/src/components/AsideMenuLayer.tsx

@@ -45,7 +45,7 @@ export default function AsideMenuLayer({
         >
           <div className='text-center flex-1 lg:text-left lg:pl-6 xl:text-center xl:pl-0'>
             <Link href={'/home'}>
-              <b className='font-black'>Adminpro</b>
+              <b className='font-black'>society-community-portal</b>
             </Link>
           </div>
           <button

frontend/src/components/Chatmessages/CardChatmessages.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 = {
+  chatmessages: any[];
+  loading: boolean;
+  onDelete: (id: string) => void;
+  currentPage: number;
+  numPages: number;
+  onPageChange: (page: number) => void;
+};
+
+const CardChatmessages = ({
+  chatmessages,
+  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_CHATMESSAGES');
+
+  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 &&
+          chatmessages.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={`/chatmessages/chatmessages-view/?id=${item.id}`}
+                  className='text-lg font-bold leading-6 line-clamp-1'
+                >
+                  {item.id}
+                </Link>
+
+                <div className='ml-auto '>
+                  <ListActionsPopover
+                    onDelete={onDelete}
+                    itemId={item.id}
+                    pathEdit={`/chatmessages/chatmessages-edit/?id=${item.id}`}
+                    pathView={`/chatmessages/chatmessages-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'>
+                    Content
+                  </dt>
+                  <dd className='flex items-start gap-x-2'>
+                    <div className='font-medium line-clamp-4'>
+                      {item.content}
+                    </div>
+                  </dd>
+                </div>
+
+                <div className='flex justify-between gap-x-4 py-3'>
+                  <dt className='  text-gray-500  dark:text-dark-600'>
+                    Created date
+                  </dt>
+                  <dd className='flex items-start gap-x-2'>
+                    <div className='font-medium line-clamp-4'>
+                      {dataFormatter.dateTimeFormatter(item.created_date)}
+                    </div>
+                  </dd>
+                </div>
+
+                <div className='flex justify-between gap-x-4 py-3'>
+                  <dt className='  text-gray-500  dark:text-dark-600'>
+                    Chatroom
+                  </dt>
+                  <dd className='flex items-start gap-x-2'>
+                    <div className='font-medium line-clamp-4'>
+                      {dataFormatter.chatroomsOneListFormatter(item.chatroom)}
+                    </div>
+                  </dd>
+                </div>
+
+                <div className='flex justify-between gap-x-4 py-3'>
+                  <dt className='  text-gray-500  dark:text-dark-600'>
+                    Sender
+                  </dt>
+                  <dd className='flex items-start gap-x-2'>
+                    <div className='font-medium line-clamp-4'>
+                      {dataFormatter.usersOneListFormatter(item.sender)}
+                    </div>
+                  </dd>
+                </div>
+              </dl>
+            </li>
+          ))}
+        {!loading && chatmessages.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 CardChatmessages;

frontend/src/components/Chatmessages/ListChatmessages.tsx

@@ -0,0 +1,108 @@
+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 = {
+  chatmessages: any[];
+  loading: boolean;
+  onDelete: (id: string) => void;
+  currentPage: number;
+  numPages: number;
+  onPageChange: (page: number) => void;
+};
+
+const ListChatmessages = ({
+  chatmessages,
+  loading,
+  onDelete,
+  currentPage,
+  numPages,
+  onPageChange,
+}: Props) => {
+  const currentUser = useAppSelector((state) => state.auth.currentUser);
+  const hasUpdatePermission = hasPermission(currentUser, 'UPDATE_CHATMESSAGES');
+
+  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 &&
+          chatmessages.map((item) => (
+            <div key={item.id}>
+              <CardBox hasTable isList className={'rounded shadow-none'}>
+                <div
+                  className={`flex rounded  dark:bg-dark-900  border  border-stone-300  items-center overflow-hidden`}
+                >
+                  <Link
+                    href={`/chatmessages/chatmessages-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 '}>Content</p>
+                      <p className={'line-clamp-2'}>{item.content}</p>
+                    </div>
+
+                    <div className={'flex-1 px-3'}>
+                      <p className={'text-xs   text-gray-500 '}>Created date</p>
+                      <p className={'line-clamp-2'}>
+                        {dataFormatter.dateTimeFormatter(item.created_date)}
+                      </p>
+                    </div>
+
+                    <div className={'flex-1 px-3'}>
+                      <p className={'text-xs   text-gray-500 '}>Chatroom</p>
+                      <p className={'line-clamp-2'}>
+                        {dataFormatter.chatroomsOneListFormatter(item.chatroom)}
+                      </p>
+                    </div>
+
+                    <div className={'flex-1 px-3'}>
+                      <p className={'text-xs   text-gray-500 '}>Sender</p>
+                      <p className={'line-clamp-2'}>
+                        {dataFormatter.usersOneListFormatter(item.sender)}
+                      </p>
+                    </div>
+                  </Link>
+                  <ListActionsPopover
+                    onDelete={onDelete}
+                    itemId={item.id}
+                    pathEdit={`/chatmessages/chatmessages-edit/?id=${item.id}`}
+                    pathView={`/chatmessages/chatmessages-view/?id=${item.id}`}
+                    hasUpdatePermission={hasUpdatePermission}
+                  />
+                </div>
+              </CardBox>
+            </div>
+          ))}
+        {!loading && chatmessages.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 ListChatmessages;

frontend/src/components/Chatmessages/TableChatmessages.tsx

@@ -0,0 +1,484 @@
+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/chatmessages/chatmessagesSlice';
+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 './configureChatmessagesCols';
+import _ from 'lodash';
+import dataFormatter from '../../helpers/dataFormatter';
+import { dataGridStyles } from '../../styles';
+
+const perPage = 10;
+
+const TableSampleChatmessages = ({
+  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 {
+    chatmessages,
+    loading,
+    count,
+    notify: chatmessagesNotify,
+    refetch,
+  } = useAppSelector((state) => state.chatmessages);
+  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 (chatmessagesNotify.showNotification) {
+      notify(
+        chatmessagesNotify.typeNotification,
+        chatmessagesNotify.textNotification,
+      );
+    }
+  }, [chatmessagesNotify.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, `chatmessages`, 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={chatmessages ?? []}
+        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'
+                    color='success'
+                    label='Apply'
+                    onClick={handleSubmit}
+                  />
+                  <BaseButton
+                    className='my-2'
+                    color='info'
+                    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>
+
+      {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 TableSampleChatmessages;

frontend/src/components/Chatmessages/configureChatmessagesCols.tsx

@@ -0,0 +1,130 @@
+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_CHATMESSAGES');
+
+  return [
+    {
+      field: 'content',
+      headerName: 'Content',
+      flex: 1,
+      minWidth: 120,
+      filterable: false,
+      headerClassName: 'datagrid--header',
+      cellClassName: 'datagrid--cell',
+
+      editable: hasUpdatePermission,
+    },
+
+    {
+      field: 'created_date',
+      headerName: 'Created date',
+      flex: 1,
+      minWidth: 120,
+      filterable: false,
+      headerClassName: 'datagrid--header',
+      cellClassName: 'datagrid--cell',
+
+      editable: hasUpdatePermission,
+
+      type: 'dateTime',
+      valueGetter: (params: GridValueGetterParams) =>
+        new Date(params.row.created_date),
+    },
+
+    {
+      field: 'chatroom',
+      headerName: 'Chatroom',
+      flex: 1,
+      minWidth: 120,
+      filterable: false,
+      headerClassName: 'datagrid--header',
+      cellClassName: 'datagrid--cell',
+
+      editable: hasUpdatePermission,
+
+      sortable: false,
+      type: 'singleSelect',
+      getOptionValue: (value: any) => value?.id,
+      getOptionLabel: (value: any) => value?.label,
+      valueOptions: await callOptionsApi('chatrooms'),
+      valueGetter: (params: GridValueGetterParams) =>
+        params?.value?.id ?? params?.value,
+    },
+
+    {
+      field: 'sender',
+      headerName: 'Sender',
+      flex: 1,
+      minWidth: 120,
+      filterable: false,
+      headerClassName: 'datagrid--header',
+      cellClassName: 'datagrid--cell',
+
+      editable: hasUpdatePermission,
+
+      sortable: false,
+      type: 'singleSelect',
+      getOptionValue: (value: any) => value?.id,
+      getOptionLabel: (value: any) => value?.label,
+      valueOptions: await callOptionsApi('users'),
+      valueGetter: (params: GridValueGetterParams) =>
+        params?.value?.id ?? params?.value,
+    },
+
+    {
+      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={`/chatmessages/chatmessages-edit/?id=${params?.row?.id}`}
+              pathView={`/chatmessages/chatmessages-view/?id=${params?.row?.id}`}
+              hasUpdatePermission={hasUpdatePermission}
+            />
+          </div>,
+        ];
+      },
+    },
+  ];
+};

frontend/src/components/Chatroomparticipants/CardChatroomparticipants.tsx

@@ -0,0 +1,121 @@
+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 = {
+  chatroomparticipants: any[];
+  loading: boolean;
+  onDelete: (id: string) => void;
+  currentPage: number;
+  numPages: number;
+  onPageChange: (page: number) => void;
+};
+
+const CardChatroomparticipants = ({
+  chatroomparticipants,
+  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_CHATROOMPARTICIPANTS',
+  );
+
+  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 &&
+          chatroomparticipants.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={`/chatroomparticipants/chatroomparticipants-view/?id=${item.id}`}
+                  className='text-lg font-bold leading-6 line-clamp-1'
+                >
+                  {item.id}
+                </Link>
+
+                <div className='ml-auto '>
+                  <ListActionsPopover
+                    onDelete={onDelete}
+                    itemId={item.id}
+                    pathEdit={`/chatroomparticipants/chatroomparticipants-edit/?id=${item.id}`}
+                    pathView={`/chatroomparticipants/chatroomparticipants-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'>
+                    Chatroom
+                  </dt>
+                  <dd className='flex items-start gap-x-2'>
+                    <div className='font-medium line-clamp-4'>
+                      {dataFormatter.chatroomsOneListFormatter(item.chatroom)}
+                    </div>
+                  </dd>
+                </div>
+
+                <div className='flex justify-between gap-x-4 py-3'>
+                  <dt className='  text-gray-500  dark:text-dark-600'>User</dt>
+                  <dd className='flex items-start gap-x-2'>
+                    <div className='font-medium line-clamp-4'>
+                      {dataFormatter.usersOneListFormatter(item.user)}
+                    </div>
+                  </dd>
+                </div>
+              </dl>
+            </li>
+          ))}
+        {!loading && chatroomparticipants.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 CardChatroomparticipants;

frontend/src/components/Chatroomparticipants/ListChatroomparticipants.tsx

@@ -0,0 +1,99 @@
+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 = {
+  chatroomparticipants: any[];
+  loading: boolean;
+  onDelete: (id: string) => void;
+  currentPage: number;
+  numPages: number;
+  onPageChange: (page: number) => void;
+};
+
+const ListChatroomparticipants = ({
+  chatroomparticipants,
+  loading,
+  onDelete,
+  currentPage,
+  numPages,
+  onPageChange,
+}: Props) => {
+  const currentUser = useAppSelector((state) => state.auth.currentUser);
+  const hasUpdatePermission = hasPermission(
+    currentUser,
+    'UPDATE_CHATROOMPARTICIPANTS',
+  );
+
+  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 &&
+          chatroomparticipants.map((item) => (
+            <div key={item.id}>
+              <CardBox hasTable isList className={'rounded shadow-none'}>
+                <div
+                  className={`flex rounded  dark:bg-dark-900  border  border-stone-300  items-center overflow-hidden`}
+                >
+                  <Link
+                    href={`/chatroomparticipants/chatroomparticipants-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 '}>Chatroom</p>
+                      <p className={'line-clamp-2'}>
+                        {dataFormatter.chatroomsOneListFormatter(item.chatroom)}
+                      </p>
+                    </div>
+
+                    <div className={'flex-1 px-3'}>
+                      <p className={'text-xs   text-gray-500 '}>User</p>
+                      <p className={'line-clamp-2'}>
+                        {dataFormatter.usersOneListFormatter(item.user)}
+                      </p>
+                    </div>
+                  </Link>
+                  <ListActionsPopover
+                    onDelete={onDelete}
+                    itemId={item.id}
+                    pathEdit={`/chatroomparticipants/chatroomparticipants-edit/?id=${item.id}`}
+                    pathView={`/chatroomparticipants/chatroomparticipants-view/?id=${item.id}`}
+                    hasUpdatePermission={hasUpdatePermission}
+                  />
+                </div>
+              </CardBox>
+            </div>
+          ))}
+        {!loading && chatroomparticipants.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 ListChatroomparticipants;

frontend/src/components/Chatroomparticipants/TableChatroomparticipants.tsx

@@ -0,0 +1,486 @@
+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/chatroomparticipants/chatroomparticipantsSlice';
+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 './configureChatroomparticipantsCols';
+import _ from 'lodash';
+import dataFormatter from '../../helpers/dataFormatter';
+import { dataGridStyles } from '../../styles';
+
+const perPage = 10;
+
+const TableSampleChatroomparticipants = ({
+  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 {
+    chatroomparticipants,
+    loading,
+    count,
+    notify: chatroomparticipantsNotify,
+    refetch,
+  } = useAppSelector((state) => state.chatroomparticipants);
+  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 (chatroomparticipantsNotify.showNotification) {
+      notify(
+        chatroomparticipantsNotify.typeNotification,
+        chatroomparticipantsNotify.textNotification,
+      );
+    }
+  }, [chatroomparticipantsNotify.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,
+      `chatroomparticipants`,
+      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={chatroomparticipants ?? []}
+        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'
+                    color='success'
+                    label='Apply'
+                    onClick={handleSubmit}
+                  />
+                  <BaseButton
+                    className='my-2'
+                    color='info'
+                    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>
+
+      {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 TableSampleChatroomparticipants;

frontend/src/components/Chatroomparticipants/configureChatroomparticipantsCols.tsx

@@ -0,0 +1,105 @@
+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_CHATROOMPARTICIPANTS',
+  );
+
+  return [
+    {
+      field: 'chatroom',
+      headerName: 'Chatroom',
+      flex: 1,
+      minWidth: 120,
+      filterable: false,
+      headerClassName: 'datagrid--header',
+      cellClassName: 'datagrid--cell',
+
+      editable: hasUpdatePermission,
+
+      sortable: false,
+      type: 'singleSelect',
+      getOptionValue: (value: any) => value?.id,
+      getOptionLabel: (value: any) => value?.label,
+      valueOptions: await callOptionsApi('chatrooms'),
+      valueGetter: (params: GridValueGetterParams) =>
+        params?.value?.id ?? params?.value,
+    },
+
+    {
+      field: 'user',
+      headerName: 'User',
+      flex: 1,
+      minWidth: 120,
+      filterable: false,
+      headerClassName: 'datagrid--header',
+      cellClassName: 'datagrid--cell',
+
+      editable: hasUpdatePermission,
+
+      sortable: false,
+      type: 'singleSelect',
+      getOptionValue: (value: any) => value?.id,
+      getOptionLabel: (value: any) => value?.label,
+      valueOptions: await callOptionsApi('users'),
+      valueGetter: (params: GridValueGetterParams) =>
+        params?.value?.id ?? params?.value,
+    },
+
+    {
+      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={`/chatroomparticipants/chatroomparticipants-edit/?id=${params?.row?.id}`}
+              pathView={`/chatroomparticipants/chatroomparticipants-view/?id=${params?.row?.id}`}
+              hasUpdatePermission={hasUpdatePermission}
+            />
+          </div>,
+        ];
+      },
+    },
+  ];
+};

frontend/src/components/Chatrooms/CardChatrooms.tsx

@@ -0,0 +1,123 @@
+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 = {
+  chatrooms: any[];
+  loading: boolean;
+  onDelete: (id: string) => void;
+  currentPage: number;
+  numPages: number;
+  onPageChange: (page: number) => void;
+};
+
+const CardChatrooms = ({
+  chatrooms,
+  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_CHATROOMS');
+
+  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 &&
+          chatrooms.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={`/chatrooms/chatrooms-view/?id=${item.id}`}
+                  className='text-lg font-bold leading-6 line-clamp-1'
+                >
+                  {item.name}
+                </Link>
+
+                <div className='ml-auto '>
+                  <ListActionsPopover
+                    onDelete={onDelete}
+                    itemId={item.id}
+                    pathEdit={`/chatrooms/chatrooms-edit/?id=${item.id}`}
+                    pathView={`/chatrooms/chatrooms-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'>Name</dt>
+                  <dd className='flex items-start gap-x-2'>
+                    <div className='font-medium line-clamp-4'>{item.name}</div>
+                  </dd>
+                </div>
+
+                <div className='flex justify-between gap-x-4 py-3'>
+                  <dt className='  text-gray-500  dark:text-dark-600'>Type</dt>
+                  <dd className='flex items-start gap-x-2'>
+                    <div className='font-medium line-clamp-4'>{item.type}</div>
+                  </dd>
+                </div>
+
+                <div className='flex justify-between gap-x-4 py-3'>
+                  <dt className='  text-gray-500  dark:text-dark-600'>
+                    Created date
+                  </dt>
+                  <dd className='flex items-start gap-x-2'>
+                    <div className='font-medium line-clamp-4'>
+                      {dataFormatter.dateTimeFormatter(item.created_date)}
+                    </div>
+                  </dd>
+                </div>
+              </dl>
+            </li>
+          ))}
+        {!loading && chatrooms.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 CardChatrooms;

frontend/src/components/Chatrooms/ListChatrooms.tsx

@@ -0,0 +1,99 @@
+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 = {
+  chatrooms: any[];
+  loading: boolean;
+  onDelete: (id: string) => void;
+  currentPage: number;
+  numPages: number;
+  onPageChange: (page: number) => void;
+};
+
+const ListChatrooms = ({
+  chatrooms,
+  loading,
+  onDelete,
+  currentPage,
+  numPages,
+  onPageChange,
+}: Props) => {
+  const currentUser = useAppSelector((state) => state.auth.currentUser);
+  const hasUpdatePermission = hasPermission(currentUser, 'UPDATE_CHATROOMS');
+
+  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 &&
+          chatrooms.map((item) => (
+            <div key={item.id}>
+              <CardBox hasTable isList className={'rounded shadow-none'}>
+                <div
+                  className={`flex rounded  dark:bg-dark-900  border  border-stone-300  items-center overflow-hidden`}
+                >
+                  <Link
+                    href={`/chatrooms/chatrooms-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 '}>Name</p>
+                      <p className={'line-clamp-2'}>{item.name}</p>
+                    </div>
+
+                    <div className={'flex-1 px-3'}>
+                      <p className={'text-xs   text-gray-500 '}>Type</p>
+                      <p className={'line-clamp-2'}>{item.type}</p>
+                    </div>
+
+                    <div className={'flex-1 px-3'}>
+                      <p className={'text-xs   text-gray-500 '}>Created date</p>
+                      <p className={'line-clamp-2'}>
+                        {dataFormatter.dateTimeFormatter(item.created_date)}
+                      </p>
+                    </div>
+                  </Link>
+                  <ListActionsPopover
+                    onDelete={onDelete}
+                    itemId={item.id}
+                    pathEdit={`/chatrooms/chatrooms-edit/?id=${item.id}`}
+                    pathView={`/chatrooms/chatrooms-view/?id=${item.id}`}
+                    hasUpdatePermission={hasUpdatePermission}
+                  />
+                </div>
+              </CardBox>
+            </div>
+          ))}
+        {!loading && chatrooms.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 ListChatrooms;

frontend/src/components/Chatrooms/TableChatrooms.tsx

@@ -0,0 +1,484 @@
+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/chatrooms/chatroomsSlice';
+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 './configureChatroomsCols';
+import _ from 'lodash';
+import dataFormatter from '../../helpers/dataFormatter';
+import { dataGridStyles } from '../../styles';
+
+const perPage = 10;
+
+const TableSampleChatrooms = ({
+  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 {
+    chatrooms,
+    loading,
+    count,
+    notify: chatroomsNotify,
+    refetch,
+  } = useAppSelector((state) => state.chatrooms);
+  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 (chatroomsNotify.showNotification) {
+      notify(
+        chatroomsNotify.typeNotification,
+        chatroomsNotify.textNotification,
+      );
+    }
+  }, [chatroomsNotify.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, `chatrooms`, 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={chatrooms ?? []}
+        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'
+                    color='success'
+                    label='Apply'
+                    onClick={handleSubmit}
+                  />
+                  <BaseButton
+                    className='my-2'
+                    color='info'
+                    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>
+
+      {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 TableSampleChatrooms;

frontend/src/components/Chatrooms/configureChatroomsCols.tsx

@@ -0,0 +1,105 @@
+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_CHATROOMS');
+
+  return [
+    {
+      field: 'name',
+      headerName: 'Name',
+      flex: 1,
+      minWidth: 120,
+      filterable: false,
+      headerClassName: 'datagrid--header',
+      cellClassName: 'datagrid--cell',
+
+      editable: hasUpdatePermission,
+    },
+
+    {
+      field: 'type',
+      headerName: 'Type',
+      flex: 1,
+      minWidth: 120,
+      filterable: false,
+      headerClassName: 'datagrid--header',
+      cellClassName: 'datagrid--cell',
+
+      editable: hasUpdatePermission,
+
+      type: 'singleSelect',
+      valueOptions: ['value'],
+    },
+
+    {
+      field: 'created_date',
+      headerName: 'Created date',
+      flex: 1,
+      minWidth: 120,
+      filterable: false,
+      headerClassName: 'datagrid--header',
+      cellClassName: 'datagrid--cell',
+
+      editable: hasUpdatePermission,
+
+      type: 'dateTime',
+      valueGetter: (params: GridValueGetterParams) =>
+        new Date(params.row.created_date),
+    },
+
+    {
+      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={`/chatrooms/chatrooms-edit/?id=${params?.row?.id}`}
+              pathView={`/chatrooms/chatrooms-view/?id=${params?.row?.id}`}
+              hasUpdatePermission={hasUpdatePermission}
+            />
+          </div>,
+        ];
+      },
+    },
+  ];
+};

frontend/src/components/WebPageComponents/Footer.tsx

@@ -17,7 +17,7 @@ export default function WebSiteFooter({ projectName }: WebSiteFooterProps) {
   const borders = useAppSelector((state) => state.style.borders);
   const websiteHeder = useAppSelector((state) => state.style.websiteHeder);
 
-  const style = FooterStyle.WITH_PROJECT_NAME;
+  const style = FooterStyle.WITH_PAGES;
 
   const design = FooterDesigns.DEFAULT_DESIGN;
 

frontend/src/helpers/dataFormatter.js

@@ -95,4 +95,23 @@ export default {
     if (!val) return '';
     return { label: val.name, id: val.id };
   },
+
+  chatroomsManyListFormatter(val) {
+    if (!val || !val.length) return [];
+    return val.map((item) => item.name);
+  },
+  chatroomsOneListFormatter(val) {
+    if (!val) return '';
+    return val.name;
+  },
+  chatroomsManyListFormatterEdit(val) {
+    if (!val || !val.length) return [];
+    return val.map((item) => {
+      return { id: item.id, label: item.name };
+    });
+  },
+  chatroomsOneListFormatterEdit(val) {
+    if (!val) return '';
+    return { label: val.name, id: val.id };
+  },
 };

frontend/src/menuAside.ts

@@ -54,6 +54,30 @@ const menuAside: MenuAsideItem[] = [
     icon: icon.mdiShieldAccountOutline ?? icon.mdiTable,
     permissions: 'READ_PERMISSIONS',
   },
+  {
+    href: '/chatrooms/chatrooms-list',
+    label: 'Chatrooms',
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    icon: icon.mdiTable ?? icon.mdiTable,
+    permissions: 'READ_CHATROOMS',
+  },
+  {
+    href: '/chatmessages/chatmessages-list',
+    label: 'Chatmessages',
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    icon: icon.mdiTable ?? icon.mdiTable,
+    permissions: 'READ_CHATMESSAGES',
+  },
+  {
+    href: '/chatroomparticipants/chatroomparticipants-list',
+    label: 'Chatroomparticipants',
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    icon: icon.mdiTable ?? icon.mdiTable,
+    permissions: 'READ_CHATROOMPARTICIPANTS',
+  },
   {
     href: '/profile',
     label: 'Profile',

frontend/src/pages/_app.tsx

@@ -140,8 +140,8 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) {
     setStepsEnabled(false);
   };
 
-  const title = 'Adminpro';
-  const description = 'Adminpro generated by Flatlogic';
+  const title = 'society-community-portal';
+  const description = 'society-community-portal generated by Flatlogic';
   const url = 'https://flatlogic.com/';
   const image = `https://flatlogic.com/logo.svg`;
   const imageWidth = '1920';

frontend/src/pages/chatmessages/[chatmessagesId].tsx

@@ -0,0 +1,173 @@
+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/chatmessages/chatmessagesSlice';
+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 EditChatmessages = () => {
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+  const initVals = {
+    content: '',
+
+    created_date: new Date(),
+
+    chatroom: null,
+
+    sender: null,
+  };
+  const [initialValues, setInitialValues] = useState(initVals);
+
+  const { chatmessages } = useAppSelector((state) => state.chatmessages);
+
+  const { chatmessagesId } = router.query;
+
+  useEffect(() => {
+    dispatch(fetch({ id: chatmessagesId }));
+  }, [chatmessagesId]);
+
+  useEffect(() => {
+    if (typeof chatmessages === 'object') {
+      setInitialValues(chatmessages);
+    }
+  }, [chatmessages]);
+
+  useEffect(() => {
+    if (typeof chatmessages === 'object') {
+      const newInitialVal = { ...initVals };
+
+      Object.keys(initVals).forEach(
+        (el) => (newInitialVal[el] = chatmessages[el]),
+      );
+
+      setInitialValues(newInitialVal);
+    }
+  }, [chatmessages]);
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: chatmessagesId, data }));
+    await router.push('/chatmessages/chatmessages-list');
+  };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit chatmessages')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title={'Edit chatmessages'}
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+              <FormField label='Content'>
+                <Field name='content' placeholder='Content' />
+              </FormField>
+
+              <FormField label='Created date'>
+                <DatePicker
+                  dateFormat='yyyy-MM-dd hh:mm'
+                  showTimeSelect
+                  selected={
+                    initialValues.created_date
+                      ? new Date(
+                          dayjs(initialValues.created_date).format(
+                            'YYYY-MM-DD hh:mm',
+                          ),
+                        )
+                      : null
+                  }
+                  onChange={(date) =>
+                    setInitialValues({ ...initialValues, created_date: date })
+                  }
+                />
+              </FormField>
+
+              <FormField label='Chatroom' labelFor='chatroom'>
+                <Field
+                  name='chatroom'
+                  id='chatroom'
+                  component={SelectField}
+                  options={initialValues.chatroom}
+                  itemRef={'chatrooms'}
+                  showField={'name'}
+                ></Field>
+              </FormField>
+
+              <FormField label='Sender' labelFor='sender'>
+                <Field
+                  name='sender'
+                  id='sender'
+                  component={SelectField}
+                  options={initialValues.sender}
+                  itemRef={'users'}
+                  showField={'firstName'}
+                ></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('/chatmessages/chatmessages-list')}
+                />
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  );
+};
+
+EditChatmessages.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'UPDATE_CHATMESSAGES'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default EditChatmessages;

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

@@ -0,0 +1,171 @@
+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/chatmessages/chatmessagesSlice';
+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 EditChatmessagesPage = () => {
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+  const initVals = {
+    content: '',
+
+    created_date: new Date(),
+
+    chatroom: null,
+
+    sender: null,
+  };
+  const [initialValues, setInitialValues] = useState(initVals);
+
+  const { chatmessages } = useAppSelector((state) => state.chatmessages);
+
+  const { id } = router.query;
+
+  useEffect(() => {
+    dispatch(fetch({ id: id }));
+  }, [id]);
+
+  useEffect(() => {
+    if (typeof chatmessages === 'object') {
+      setInitialValues(chatmessages);
+    }
+  }, [chatmessages]);
+
+  useEffect(() => {
+    if (typeof chatmessages === 'object') {
+      const newInitialVal = { ...initVals };
+      Object.keys(initVals).forEach(
+        (el) => (newInitialVal[el] = chatmessages[el]),
+      );
+      setInitialValues(newInitialVal);
+    }
+  }, [chatmessages]);
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: id, data }));
+    await router.push('/chatmessages/chatmessages-list');
+  };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit chatmessages')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title={'Edit chatmessages'}
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+              <FormField label='Content'>
+                <Field name='content' placeholder='Content' />
+              </FormField>
+
+              <FormField label='Created date'>
+                <DatePicker
+                  dateFormat='yyyy-MM-dd hh:mm'
+                  showTimeSelect
+                  selected={
+                    initialValues.created_date
+                      ? new Date(
+                          dayjs(initialValues.created_date).format(
+                            'YYYY-MM-DD hh:mm',
+                          ),
+                        )
+                      : null
+                  }
+                  onChange={(date) =>
+                    setInitialValues({ ...initialValues, created_date: date })
+                  }
+                />
+              </FormField>
+
+              <FormField label='Chatroom' labelFor='chatroom'>
+                <Field
+                  name='chatroom'
+                  id='chatroom'
+                  component={SelectField}
+                  options={initialValues.chatroom}
+                  itemRef={'chatrooms'}
+                  showField={'name'}
+                ></Field>
+              </FormField>
+
+              <FormField label='Sender' labelFor='sender'>
+                <Field
+                  name='sender'
+                  id='sender'
+                  component={SelectField}
+                  options={initialValues.sender}
+                  itemRef={'users'}
+                  showField={'firstName'}
+                ></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('/chatmessages/chatmessages-list')}
+                />
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  );
+};
+
+EditChatmessagesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'UPDATE_CHATMESSAGES'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default EditChatmessagesPage;

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

@@ -0,0 +1,173 @@
+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 TableChatmessages from '../../components/Chatmessages/TableChatmessages';
+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/chatmessages/chatmessagesSlice';
+
+import { hasPermission } from '../../helpers/userPermissions';
+
+const ChatmessagesTablesPage = () => {
+  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: 'Content', title: 'content' },
+
+    { label: 'Created date', title: 'created_date', date: 'true' },
+
+    { label: 'Chatroom', title: 'chatroom' },
+
+    { label: 'Sender', title: 'sender' },
+  ]);
+
+  const hasCreatePermission =
+    currentUser && hasPermission(currentUser, 'CREATE_CHATMESSAGES');
+
+  const addFilter = () => {
+    const newItem = {
+      id: uniqueId(),
+      fields: {
+        filterValue: '',
+        filterValueFrom: '',
+        filterValueTo: '',
+        selectedField: '',
+      },
+    };
+    newItem.fields.selectedField = filters[0].title;
+    setFilterItems([...filterItems, newItem]);
+  };
+
+  const getChatmessagesCSV = async () => {
+    const response = await axios({
+      url: '/chatmessages?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 = 'chatmessagesCSV.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('Chatmessages')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title='Chatmessages'
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox className='mb-6' cardBoxClassName='flex flex-wrap'>
+          {hasCreatePermission && (
+            <BaseButton
+              className={'mr-3'}
+              href={'/chatmessages/chatmessages-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={getChatmessagesCSV}
+          />
+
+          {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>
+        </CardBox>
+
+        <CardBox className='mb-6' hasTable>
+          <TableChatmessages
+            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>
+    </>
+  );
+};
+
+ChatmessagesTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'READ_CHATMESSAGES'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default ChatmessagesTablesPage;

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

@@ -0,0 +1,132 @@
+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/chatmessages/chatmessagesSlice';
+import { useAppDispatch } from '../../stores/hooks';
+import { useRouter } from 'next/router';
+import moment from 'moment';
+
+const initialValues = {
+  content: '',
+
+  created_date: '',
+
+  chatroom: '',
+
+  sender: '',
+};
+
+const ChatmessagesNew = () => {
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+
+  const handleSubmit = async (data) => {
+    await dispatch(create(data));
+    await router.push('/chatmessages/chatmessages-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='Content'>
+                <Field name='content' placeholder='Content' />
+              </FormField>
+
+              <FormField label='Created date'>
+                <Field
+                  type='datetime-local'
+                  name='created_date'
+                  placeholder='Created date'
+                />
+              </FormField>
+
+              <FormField label='Chatroom' labelFor='chatroom'>
+                <Field
+                  name='chatroom'
+                  id='chatroom'
+                  component={SelectField}
+                  options={[]}
+                  itemRef={'chatrooms'}
+                ></Field>
+              </FormField>
+
+              <FormField label='Sender' labelFor='sender'>
+                <Field
+                  name='sender'
+                  id='sender'
+                  component={SelectField}
+                  options={[]}
+                  itemRef={'users'}
+                ></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('/chatmessages/chatmessages-list')}
+                />
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  );
+};
+
+ChatmessagesNew.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'CREATE_CHATMESSAGES'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default ChatmessagesNew;

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

@@ -0,0 +1,172 @@
+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 TableChatmessages from '../../components/Chatmessages/TableChatmessages';
+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/chatmessages/chatmessagesSlice';
+
+import { hasPermission } from '../../helpers/userPermissions';
+
+const ChatmessagesTablesPage = () => {
+  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: 'Content', title: 'content' },
+
+    { label: 'Created date', title: 'created_date', date: 'true' },
+
+    { label: 'Chatroom', title: 'chatroom' },
+
+    { label: 'Sender', title: 'sender' },
+  ]);
+
+  const hasCreatePermission =
+    currentUser && hasPermission(currentUser, 'CREATE_CHATMESSAGES');
+
+  const addFilter = () => {
+    const newItem = {
+      id: uniqueId(),
+      fields: {
+        filterValue: '',
+        filterValueFrom: '',
+        filterValueTo: '',
+        selectedField: '',
+      },
+    };
+    newItem.fields.selectedField = filters[0].title;
+    setFilterItems([...filterItems, newItem]);
+  };
+
+  const getChatmessagesCSV = async () => {
+    const response = await axios({
+      url: '/chatmessages?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 = 'chatmessagesCSV.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('Chatmessages')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title='Chatmessages'
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox className='mb-6' cardBoxClassName='flex flex-wrap'>
+          {hasCreatePermission && (
+            <BaseButton
+              className={'mr-3'}
+              href={'/chatmessages/chatmessages-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={getChatmessagesCSV}
+          />
+
+          {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>
+        </CardBox>
+        <CardBox className='mb-6' hasTable>
+          <TableChatmessages
+            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>
+    </>
+  );
+};
+
+ChatmessagesTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'READ_CHATMESSAGES'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default ChatmessagesTablesPage;

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

@@ -0,0 +1,116 @@
+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/chatmessages/chatmessagesSlice';
+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 ChatmessagesView = () => {
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+  const { chatmessages } = useAppSelector((state) => state.chatmessages);
+
+  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 chatmessages')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title={removeLastCharacter('View chatmessages')}
+          main
+        >
+          <BaseButton
+            color='info'
+            label='Edit'
+            href={`/chatmessages/chatmessages-edit/?id=${id}`}
+          />
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <div className={'mb-4'}>
+            <p className={'block font-bold mb-2'}>Content</p>
+            <p>{chatmessages?.content}</p>
+          </div>
+
+          <FormField label='Created date'>
+            {chatmessages.created_date ? (
+              <DatePicker
+                dateFormat='yyyy-MM-dd hh:mm'
+                showTimeSelect
+                selected={
+                  chatmessages.created_date
+                    ? new Date(
+                        dayjs(chatmessages.created_date).format(
+                          'YYYY-MM-DD hh:mm',
+                        ),
+                      )
+                    : null
+                }
+                disabled
+              />
+            ) : (
+              <p>No Created date</p>
+            )}
+          </FormField>
+
+          <div className={'mb-4'}>
+            <p className={'block font-bold mb-2'}>Chatroom</p>
+
+            <p>{chatmessages?.chatroom?.name ?? 'No data'}</p>
+          </div>
+
+          <div className={'mb-4'}>
+            <p className={'block font-bold mb-2'}>Sender</p>
+
+            <p>{chatmessages?.sender?.firstName ?? 'No data'}</p>
+          </div>
+
+          <BaseDivider />
+
+          <BaseButton
+            color='info'
+            label='Back'
+            onClick={() => router.push('/chatmessages/chatmessages-list')}
+          />
+        </CardBox>
+      </SectionMain>
+    </>
+  );
+};
+
+ChatmessagesView.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'READ_CHATMESSAGES'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default ChatmessagesView;

frontend/src/pages/chatroomparticipants/[chatroomparticipantsId].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/chatroomparticipants/chatroomparticipantsSlice';
+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 EditChatroomparticipants = () => {
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+  const initVals = {
+    chatroom: null,
+
+    user: null,
+  };
+  const [initialValues, setInitialValues] = useState(initVals);
+
+  const { chatroomparticipants } = useAppSelector(
+    (state) => state.chatroomparticipants,
+  );
+
+  const { chatroomparticipantsId } = router.query;
+
+  useEffect(() => {
+    dispatch(fetch({ id: chatroomparticipantsId }));
+  }, [chatroomparticipantsId]);
+
+  useEffect(() => {
+    if (typeof chatroomparticipants === 'object') {
+      setInitialValues(chatroomparticipants);
+    }
+  }, [chatroomparticipants]);
+
+  useEffect(() => {
+    if (typeof chatroomparticipants === 'object') {
+      const newInitialVal = { ...initVals };
+
+      Object.keys(initVals).forEach(
+        (el) => (newInitialVal[el] = chatroomparticipants[el]),
+      );
+
+      setInitialValues(newInitialVal);
+    }
+  }, [chatroomparticipants]);
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: chatroomparticipantsId, data }));
+    await router.push('/chatroomparticipants/chatroomparticipants-list');
+  };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit chatroomparticipants')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title={'Edit chatroomparticipants'}
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+              <FormField label='Chatroom' labelFor='chatroom'>
+                <Field
+                  name='chatroom'
+                  id='chatroom'
+                  component={SelectField}
+                  options={initialValues.chatroom}
+                  itemRef={'chatrooms'}
+                  showField={'name'}
+                ></Field>
+              </FormField>
+
+              <FormField label='User' labelFor='user'>
+                <Field
+                  name='user'
+                  id='user'
+                  component={SelectField}
+                  options={initialValues.user}
+                  itemRef={'users'}
+                  showField={'firstName'}
+                ></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(
+                      '/chatroomparticipants/chatroomparticipants-list',
+                    )
+                  }
+                />
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  );
+};
+
+EditChatroomparticipants.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'UPDATE_CHATROOMPARTICIPANTS'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default EditChatroomparticipants;

frontend/src/pages/chatroomparticipants/chatroomparticipants-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/chatroomparticipants/chatroomparticipantsSlice';
+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 EditChatroomparticipantsPage = () => {
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+  const initVals = {
+    chatroom: null,
+
+    user: null,
+  };
+  const [initialValues, setInitialValues] = useState(initVals);
+
+  const { chatroomparticipants } = useAppSelector(
+    (state) => state.chatroomparticipants,
+  );
+
+  const { id } = router.query;
+
+  useEffect(() => {
+    dispatch(fetch({ id: id }));
+  }, [id]);
+
+  useEffect(() => {
+    if (typeof chatroomparticipants === 'object') {
+      setInitialValues(chatroomparticipants);
+    }
+  }, [chatroomparticipants]);
+
+  useEffect(() => {
+    if (typeof chatroomparticipants === 'object') {
+      const newInitialVal = { ...initVals };
+      Object.keys(initVals).forEach(
+        (el) => (newInitialVal[el] = chatroomparticipants[el]),
+      );
+      setInitialValues(newInitialVal);
+    }
+  }, [chatroomparticipants]);
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: id, data }));
+    await router.push('/chatroomparticipants/chatroomparticipants-list');
+  };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit chatroomparticipants')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title={'Edit chatroomparticipants'}
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+              <FormField label='Chatroom' labelFor='chatroom'>
+                <Field
+                  name='chatroom'
+                  id='chatroom'
+                  component={SelectField}
+                  options={initialValues.chatroom}
+                  itemRef={'chatrooms'}
+                  showField={'name'}
+                ></Field>
+              </FormField>
+
+              <FormField label='User' labelFor='user'>
+                <Field
+                  name='user'
+                  id='user'
+                  component={SelectField}
+                  options={initialValues.user}
+                  itemRef={'users'}
+                  showField={'firstName'}
+                ></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(
+                      '/chatroomparticipants/chatroomparticipants-list',
+                    )
+                  }
+                />
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  );
+};
+
+EditChatroomparticipantsPage.getLayout = function getLayout(
+  page: ReactElement,
+) {
+  return (
+    <LayoutAuthenticated permission={'UPDATE_CHATROOMPARTICIPANTS'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default EditChatroomparticipantsPage;

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

@@ -0,0 +1,171 @@
+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 TableChatroomparticipants from '../../components/Chatroomparticipants/TableChatroomparticipants';
+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/chatroomparticipants/chatroomparticipantsSlice';
+
+import { hasPermission } from '../../helpers/userPermissions';
+
+const ChatroomparticipantsTablesPage = () => {
+  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: 'Chatroom', title: 'chatroom' },
+
+    { label: 'User', title: 'user' },
+  ]);
+
+  const hasCreatePermission =
+    currentUser && hasPermission(currentUser, 'CREATE_CHATROOMPARTICIPANTS');
+
+  const addFilter = () => {
+    const newItem = {
+      id: uniqueId(),
+      fields: {
+        filterValue: '',
+        filterValueFrom: '',
+        filterValueTo: '',
+        selectedField: '',
+      },
+    };
+    newItem.fields.selectedField = filters[0].title;
+    setFilterItems([...filterItems, newItem]);
+  };
+
+  const getChatroomparticipantsCSV = async () => {
+    const response = await axios({
+      url: '/chatroomparticipants?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 = 'chatroomparticipantsCSV.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('Chatroomparticipants')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title='Chatroomparticipants'
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox className='mb-6' cardBoxClassName='flex flex-wrap'>
+          {hasCreatePermission && (
+            <BaseButton
+              className={'mr-3'}
+              href={'/chatroomparticipants/chatroomparticipants-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={getChatroomparticipantsCSV}
+          />
+
+          {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>
+        </CardBox>
+
+        <CardBox className='mb-6' hasTable>
+          <TableChatroomparticipants
+            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>
+    </>
+  );
+};
+
+ChatroomparticipantsTablesPage.getLayout = function getLayout(
+  page: ReactElement,
+) {
+  return (
+    <LayoutAuthenticated permission={'READ_CHATROOMPARTICIPANTS'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default ChatroomparticipantsTablesPage;

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

@@ -0,0 +1,120 @@
+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/chatroomparticipants/chatroomparticipantsSlice';
+import { useAppDispatch } from '../../stores/hooks';
+import { useRouter } from 'next/router';
+import moment from 'moment';
+
+const initialValues = {
+  chatroom: '',
+
+  user: '',
+};
+
+const ChatroomparticipantsNew = () => {
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+
+  const handleSubmit = async (data) => {
+    await dispatch(create(data));
+    await router.push('/chatroomparticipants/chatroomparticipants-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='Chatroom' labelFor='chatroom'>
+                <Field
+                  name='chatroom'
+                  id='chatroom'
+                  component={SelectField}
+                  options={[]}
+                  itemRef={'chatrooms'}
+                ></Field>
+              </FormField>
+
+              <FormField label='User' labelFor='user'>
+                <Field
+                  name='user'
+                  id='user'
+                  component={SelectField}
+                  options={[]}
+                  itemRef={'users'}
+                ></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(
+                      '/chatroomparticipants/chatroomparticipants-list',
+                    )
+                  }
+                />
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  );
+};
+
+ChatroomparticipantsNew.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'CREATE_CHATROOMPARTICIPANTS'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default ChatroomparticipantsNew;

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

@@ -0,0 +1,170 @@
+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 TableChatroomparticipants from '../../components/Chatroomparticipants/TableChatroomparticipants';
+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/chatroomparticipants/chatroomparticipantsSlice';
+
+import { hasPermission } from '../../helpers/userPermissions';
+
+const ChatroomparticipantsTablesPage = () => {
+  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: 'Chatroom', title: 'chatroom' },
+
+    { label: 'User', title: 'user' },
+  ]);
+
+  const hasCreatePermission =
+    currentUser && hasPermission(currentUser, 'CREATE_CHATROOMPARTICIPANTS');
+
+  const addFilter = () => {
+    const newItem = {
+      id: uniqueId(),
+      fields: {
+        filterValue: '',
+        filterValueFrom: '',
+        filterValueTo: '',
+        selectedField: '',
+      },
+    };
+    newItem.fields.selectedField = filters[0].title;
+    setFilterItems([...filterItems, newItem]);
+  };
+
+  const getChatroomparticipantsCSV = async () => {
+    const response = await axios({
+      url: '/chatroomparticipants?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 = 'chatroomparticipantsCSV.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('Chatroomparticipants')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title='Chatroomparticipants'
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox className='mb-6' cardBoxClassName='flex flex-wrap'>
+          {hasCreatePermission && (
+            <BaseButton
+              className={'mr-3'}
+              href={'/chatroomparticipants/chatroomparticipants-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={getChatroomparticipantsCSV}
+          />
+
+          {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>
+        </CardBox>
+        <CardBox className='mb-6' hasTable>
+          <TableChatroomparticipants
+            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>
+    </>
+  );
+};
+
+ChatroomparticipantsTablesPage.getLayout = function getLayout(
+  page: ReactElement,
+) {
+  return (
+    <LayoutAuthenticated permission={'READ_CHATROOMPARTICIPANTS'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default ChatroomparticipantsTablesPage;

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

@@ -0,0 +1,94 @@
+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/chatroomparticipants/chatroomparticipantsSlice';
+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 ChatroomparticipantsView = () => {
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+  const { chatroomparticipants } = useAppSelector(
+    (state) => state.chatroomparticipants,
+  );
+
+  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 chatroomparticipants')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title={removeLastCharacter('View chatroomparticipants')}
+          main
+        >
+          <BaseButton
+            color='info'
+            label='Edit'
+            href={`/chatroomparticipants/chatroomparticipants-edit/?id=${id}`}
+          />
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <div className={'mb-4'}>
+            <p className={'block font-bold mb-2'}>Chatroom</p>
+
+            <p>{chatroomparticipants?.chatroom?.name ?? 'No data'}</p>
+          </div>
+
+          <div className={'mb-4'}>
+            <p className={'block font-bold mb-2'}>User</p>
+
+            <p>{chatroomparticipants?.user?.firstName ?? 'No data'}</p>
+          </div>
+
+          <BaseDivider />
+
+          <BaseButton
+            color='info'
+            label='Back'
+            onClick={() =>
+              router.push('/chatroomparticipants/chatroomparticipants-list')
+            }
+          />
+        </CardBox>
+      </SectionMain>
+    </>
+  );
+};
+
+ChatroomparticipantsView.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'READ_CHATROOMPARTICIPANTS'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default ChatroomparticipantsView;

frontend/src/pages/chatrooms/[chatroomsId].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/chatrooms/chatroomsSlice';
+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 EditChatrooms = () => {
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+  const initVals = {
+    name: '',
+
+    type: '',
+
+    created_date: new Date(),
+  };
+  const [initialValues, setInitialValues] = useState(initVals);
+
+  const { chatrooms } = useAppSelector((state) => state.chatrooms);
+
+  const { chatroomsId } = router.query;
+
+  useEffect(() => {
+    dispatch(fetch({ id: chatroomsId }));
+  }, [chatroomsId]);
+
+  useEffect(() => {
+    if (typeof chatrooms === 'object') {
+      setInitialValues(chatrooms);
+    }
+  }, [chatrooms]);
+
+  useEffect(() => {
+    if (typeof chatrooms === 'object') {
+      const newInitialVal = { ...initVals };
+
+      Object.keys(initVals).forEach(
+        (el) => (newInitialVal[el] = chatrooms[el]),
+      );
+
+      setInitialValues(newInitialVal);
+    }
+  }, [chatrooms]);
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: chatroomsId, data }));
+    await router.push('/chatrooms/chatrooms-list');
+  };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit chatrooms')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title={'Edit chatrooms'}
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+              <FormField label='Name'>
+                <Field name='name' placeholder='Name' />
+              </FormField>
+
+              <FormField label='Type'>
+                <FormCheckRadioGroup>
+                  <FormCheckRadio type='radio' label='value'>
+                    <Field type='radio' name='type' value='value' />
+                  </FormCheckRadio>
+                </FormCheckRadioGroup>
+              </FormField>
+
+              <FormField label='Created date'>
+                <DatePicker
+                  dateFormat='yyyy-MM-dd hh:mm'
+                  showTimeSelect
+                  selected={
+                    initialValues.created_date
+                      ? new Date(
+                          dayjs(initialValues.created_date).format(
+                            'YYYY-MM-DD hh:mm',
+                          ),
+                        )
+                      : null
+                  }
+                  onChange={(date) =>
+                    setInitialValues({ ...initialValues, created_date: date })
+                  }
+                />
+              </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('/chatrooms/chatrooms-list')}
+                />
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  );
+};
+
+EditChatrooms.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'UPDATE_CHATROOMS'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default EditChatrooms;

frontend/src/pages/chatrooms/chatrooms-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/chatrooms/chatroomsSlice';
+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 EditChatroomsPage = () => {
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+  const initVals = {
+    name: '',
+
+    type: '',
+
+    created_date: new Date(),
+  };
+  const [initialValues, setInitialValues] = useState(initVals);
+
+  const { chatrooms } = useAppSelector((state) => state.chatrooms);
+
+  const { id } = router.query;
+
+  useEffect(() => {
+    dispatch(fetch({ id: id }));
+  }, [id]);
+
+  useEffect(() => {
+    if (typeof chatrooms === 'object') {
+      setInitialValues(chatrooms);
+    }
+  }, [chatrooms]);
+
+  useEffect(() => {
+    if (typeof chatrooms === 'object') {
+      const newInitialVal = { ...initVals };
+      Object.keys(initVals).forEach(
+        (el) => (newInitialVal[el] = chatrooms[el]),
+      );
+      setInitialValues(newInitialVal);
+    }
+  }, [chatrooms]);
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: id, data }));
+    await router.push('/chatrooms/chatrooms-list');
+  };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit chatrooms')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title={'Edit chatrooms'}
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+              <FormField label='Name'>
+                <Field name='name' placeholder='Name' />
+              </FormField>
+
+              <FormField label='Type'>
+                <FormCheckRadioGroup>
+                  <FormCheckRadio type='radio' label='value'>
+                    <Field type='radio' name='type' value='value' />
+                  </FormCheckRadio>
+                </FormCheckRadioGroup>
+              </FormField>
+
+              <FormField label='Created date'>
+                <DatePicker
+                  dateFormat='yyyy-MM-dd hh:mm'
+                  showTimeSelect
+                  selected={
+                    initialValues.created_date
+                      ? new Date(
+                          dayjs(initialValues.created_date).format(
+                            'YYYY-MM-DD hh:mm',
+                          ),
+                        )
+                      : null
+                  }
+                  onChange={(date) =>
+                    setInitialValues({ ...initialValues, created_date: date })
+                  }
+                />
+              </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('/chatrooms/chatrooms-list')}
+                />
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  );
+};
+
+EditChatroomsPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'UPDATE_CHATROOMS'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default EditChatroomsPage;

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

@@ -0,0 +1,168 @@
+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 TableChatrooms from '../../components/Chatrooms/TableChatrooms';
+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/chatrooms/chatroomsSlice';
+
+import { hasPermission } from '../../helpers/userPermissions';
+
+const ChatroomsTablesPage = () => {
+  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: 'Name', title: 'name' },
+
+    { label: 'Created date', title: 'created_date', date: 'true' },
+
+    { label: 'Type', title: 'type', type: 'enum', options: ['value'] },
+  ]);
+
+  const hasCreatePermission =
+    currentUser && hasPermission(currentUser, 'CREATE_CHATROOMS');
+
+  const addFilter = () => {
+    const newItem = {
+      id: uniqueId(),
+      fields: {
+        filterValue: '',
+        filterValueFrom: '',
+        filterValueTo: '',
+        selectedField: '',
+      },
+    };
+    newItem.fields.selectedField = filters[0].title;
+    setFilterItems([...filterItems, newItem]);
+  };
+
+  const getChatroomsCSV = async () => {
+    const response = await axios({
+      url: '/chatrooms?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 = 'chatroomsCSV.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('Chatrooms')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title='Chatrooms'
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox className='mb-6' cardBoxClassName='flex flex-wrap'>
+          {hasCreatePermission && (
+            <BaseButton
+              className={'mr-3'}
+              href={'/chatrooms/chatrooms-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={getChatroomsCSV}
+          />
+
+          {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>
+        </CardBox>
+
+        <CardBox className='mb-6' hasTable>
+          <TableChatrooms
+            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>
+    </>
+  );
+};
+
+ChatroomsTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'READ_CHATROOMS'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default ChatroomsTablesPage;

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

@@ -0,0 +1,118 @@
+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/chatrooms/chatroomsSlice';
+import { useAppDispatch } from '../../stores/hooks';
+import { useRouter } from 'next/router';
+import moment from 'moment';
+
+const initialValues = {
+  name: '',
+
+  type: '',
+
+  created_date: '',
+};
+
+const ChatroomsNew = () => {
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+
+  const handleSubmit = async (data) => {
+    await dispatch(create(data));
+    await router.push('/chatrooms/chatrooms-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='Name'>
+                <Field name='name' placeholder='Name' />
+              </FormField>
+
+              <FormField label='Type'>
+                <FormCheckRadioGroup>
+                  <FormCheckRadio type='radio' label='value'>
+                    <Field type='radio' name='type' value='value' />
+                  </FormCheckRadio>
+                </FormCheckRadioGroup>
+              </FormField>
+
+              <FormField label='Created date'>
+                <Field
+                  type='datetime-local'
+                  name='created_date'
+                  placeholder='Created date'
+                />
+              </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('/chatrooms/chatrooms-list')}
+                />
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  );
+};
+
+ChatroomsNew.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'CREATE_CHATROOMS'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default ChatroomsNew;

frontend/src/pages/chatrooms/chatrooms-table.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 TableChatrooms from '../../components/Chatrooms/TableChatrooms';
+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/chatrooms/chatroomsSlice';
+
+import { hasPermission } from '../../helpers/userPermissions';
+
+const ChatroomsTablesPage = () => {
+  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: 'Name', title: 'name' },
+
+    { label: 'Created date', title: 'created_date', date: 'true' },
+
+    { label: 'Type', title: 'type', type: 'enum', options: ['value'] },
+  ]);
+
+  const hasCreatePermission =
+    currentUser && hasPermission(currentUser, 'CREATE_CHATROOMS');
+
+  const addFilter = () => {
+    const newItem = {
+      id: uniqueId(),
+      fields: {
+        filterValue: '',
+        filterValueFrom: '',
+        filterValueTo: '',
+        selectedField: '',
+      },
+    };
+    newItem.fields.selectedField = filters[0].title;
+    setFilterItems([...filterItems, newItem]);
+  };
+
+  const getChatroomsCSV = async () => {
+    const response = await axios({
+      url: '/chatrooms?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 = 'chatroomsCSV.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('Chatrooms')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title='Chatrooms'
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox className='mb-6' cardBoxClassName='flex flex-wrap'>
+          {hasCreatePermission && (
+            <BaseButton
+              className={'mr-3'}
+              href={'/chatrooms/chatrooms-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={getChatroomsCSV}
+          />
+
+          {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>
+        </CardBox>
+        <CardBox className='mb-6' hasTable>
+          <TableChatrooms
+            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>
+    </>
+  );
+};
+
+ChatroomsTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'READ_CHATROOMS'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default ChatroomsTablesPage;

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

@@ -0,0 +1,189 @@
+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/chatrooms/chatroomsSlice';
+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 ChatroomsView = () => {
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+  const { chatrooms } = useAppSelector((state) => state.chatrooms);
+
+  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 chatrooms')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title={removeLastCharacter('View chatrooms')}
+          main
+        >
+          <BaseButton
+            color='info'
+            label='Edit'
+            href={`/chatrooms/chatrooms-edit/?id=${id}`}
+          />
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <div className={'mb-4'}>
+            <p className={'block font-bold mb-2'}>Name</p>
+            <p>{chatrooms?.name}</p>
+          </div>
+
+          <div className={'mb-4'}>
+            <p className={'block font-bold mb-2'}>Type</p>
+            <p>{chatrooms?.type ?? 'No data'}</p>
+          </div>
+
+          <FormField label='Created date'>
+            {chatrooms.created_date ? (
+              <DatePicker
+                dateFormat='yyyy-MM-dd hh:mm'
+                showTimeSelect
+                selected={
+                  chatrooms.created_date
+                    ? new Date(
+                        dayjs(chatrooms.created_date).format(
+                          'YYYY-MM-DD hh:mm',
+                        ),
+                      )
+                    : null
+                }
+                disabled
+              />
+            ) : (
+              <p>No Created date</p>
+            )}
+          </FormField>
+
+          <>
+            <p className={'block font-bold mb-2'}>Chatmessages Chatroom</p>
+            <CardBox
+              className='mb-6 border border-gray-300 rounded overflow-hidden'
+              hasTable
+            >
+              <div className='overflow-x-auto'>
+                <table>
+                  <thead>
+                    <tr>
+                      <th>Content</th>
+
+                      <th>Created date</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {chatrooms.chatmessages_chatroom &&
+                      Array.isArray(chatrooms.chatmessages_chatroom) &&
+                      chatrooms.chatmessages_chatroom.map((item: any) => (
+                        <tr
+                          key={item.id}
+                          onClick={() =>
+                            router.push(
+                              `/chatmessages/chatmessages-view/?id=${item.id}`,
+                            )
+                          }
+                        >
+                          <td data-label='content'>{item.content}</td>
+
+                          <td data-label='created_date'>
+                            {dataFormatter.dateTimeFormatter(item.created_date)}
+                          </td>
+                        </tr>
+                      ))}
+                  </tbody>
+                </table>
+              </div>
+              {!chatrooms?.chatmessages_chatroom?.length && (
+                <div className={'text-center py-4'}>No data</div>
+              )}
+            </CardBox>
+          </>
+
+          <>
+            <p className={'block font-bold mb-2'}>
+              Chatroomparticipants Chatroom
+            </p>
+            <CardBox
+              className='mb-6 border border-gray-300 rounded overflow-hidden'
+              hasTable
+            >
+              <div className='overflow-x-auto'>
+                <table>
+                  <thead>
+                    <tr></tr>
+                  </thead>
+                  <tbody>
+                    {chatrooms.chatroomparticipants_chatroom &&
+                      Array.isArray(chatrooms.chatroomparticipants_chatroom) &&
+                      chatrooms.chatroomparticipants_chatroom.map(
+                        (item: any) => (
+                          <tr
+                            key={item.id}
+                            onClick={() =>
+                              router.push(
+                                `/chatroomparticipants/chatroomparticipants-view/?id=${item.id}`,
+                              )
+                            }
+                          ></tr>
+                        ),
+                      )}
+                  </tbody>
+                </table>
+              </div>
+              {!chatrooms?.chatroomparticipants_chatroom?.length && (
+                <div className={'text-center py-4'}>No data</div>
+              )}
+            </CardBox>
+          </>
+
+          <BaseDivider />
+
+          <BaseButton
+            color='info'
+            label='Back'
+            onClick={() => router.push('/chatrooms/chatrooms-list')}
+          />
+        </CardBox>
+      </SectionMain>
+    </>
+  );
+};
+
+ChatroomsView.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'READ_CHATROOMS'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default ChatroomsView;

frontend/src/pages/dashboard.tsx

@@ -33,6 +33,10 @@ const Dashboard = () => {
   const [reports, setReports] = React.useState(loadingMessage);
   const [roles, setRoles] = React.useState(loadingMessage);
   const [permissions, setPermissions] = React.useState(loadingMessage);
+  const [chatrooms, setChatrooms] = React.useState(loadingMessage);
+  const [chatmessages, setChatmessages] = React.useState(loadingMessage);
+  const [chatroomparticipants, setChatroomparticipants] =
+    React.useState(loadingMessage);
 
   const [widgetsRole, setWidgetsRole] = React.useState({
     role: { value: '', label: '' },
@@ -49,6 +53,9 @@ const Dashboard = () => {
       'reports',
       'roles',
       'permissions',
+      'chatrooms',
+      'chatmessages',
+      'chatroomparticipants',
     ];
     const fns = [
       setUsers,
@@ -56,6 +63,9 @@ const Dashboard = () => {
       setReports,
       setRoles,
       setPermissions,
+      setChatrooms,
+      setChatmessages,
+      setChatroomparticipants,
     ];
 
     const requests = entities.map((entity, index) => {
@@ -337,6 +347,102 @@ const Dashboard = () => {
               </div>
             </Link>
           )}
+
+          {hasPermission(currentUser, 'READ_CHATROOMS') && (
+            <Link href={'/chatrooms/chatrooms-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'>
+                      Chatrooms
+                    </div>
+                    <div className='text-3xl leading-tight font-semibold'>
+                      {chatrooms}
+                    </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={icon.mdiTable || icon.mdiTable}
+                    />
+                  </div>
+                </div>
+              </div>
+            </Link>
+          )}
+
+          {hasPermission(currentUser, 'READ_CHATMESSAGES') && (
+            <Link href={'/chatmessages/chatmessages-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'>
+                      Chatmessages
+                    </div>
+                    <div className='text-3xl leading-tight font-semibold'>
+                      {chatmessages}
+                    </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={icon.mdiTable || icon.mdiTable}
+                    />
+                  </div>
+                </div>
+              </div>
+            </Link>
+          )}
+
+          {hasPermission(currentUser, 'READ_CHATROOMPARTICIPANTS') && (
+            <Link href={'/chatroomparticipants/chatroomparticipants-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'>
+                      Chatroomparticipants
+                    </div>
+                    <div className='text-3xl leading-tight font-semibold'>
+                      {chatroomparticipants}
+                    </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={icon.mdiTable || icon.mdiTable}
+                    />
+                  </div>
+                </div>
+              </div>
+            </Link>
+          )}
         </div>
       </SectionMain>
     </>

frontend/src/pages/index.tsx

@@ -27,7 +27,7 @@ import FaqSection from '../components/WebPageComponents/FaqComponent';
 export default function WebSite() {
   const cardsStyle = useAppSelector((state) => state.style.cardsStyle);
   const bgColor = useAppSelector((state) => state.style.bgLayoutColor);
-  const projectName = 'Adminpro';
+  const projectName = 'society-community-portal';
 
   useEffect(() => {
     const darkElement = document.querySelector('body .dark');
@@ -125,10 +125,10 @@ export default function WebSite() {
           content={`Discover our comprehensive admin portal designed for management teams, offering robust features, seamless communication, and efficient data management.`}
         />
       </Head>
-      <WebSiteHeader projectName={'Adminpro'} pages={pages} />
+      <WebSiteHeader projectName={'society-community-portal'} pages={pages} />
       <main className={`flex-grow    bg-white  rounded-none  `}>
         <HeroSection
-          projectName={'Adminpro'}
+          projectName={'society-community-portal'}
           image={['Team collaborating in modern office']}
           mainText={`Empower Your Management with ${projectName}`}
           subTitle={`Streamline your team's operations with ${projectName}. Enhance efficiency, manage data seamlessly, and foster collaboration within your management team.`}
@@ -137,9 +137,9 @@ export default function WebSite() {
         />
 
         <FeaturesSection
-          projectName={'Adminpro'}
+          projectName={'society-community-portal'}
           image={['Dashboard showcasing key metrics']}
-          withBg={0}
+          withBg={1}
           features={features_points}
           mainText={`Discover Key Features of ${projectName}`}
           subTitle={`Explore how ${projectName} enhances your management team's productivity with these powerful features.`}
@@ -147,7 +147,7 @@ export default function WebSite() {
         />
 
         <AboutUsSection
-          projectName={'Adminpro'}
+          projectName={'society-community-portal'}
           image={['Team brainstorming in modern office']}
           mainText={`Unleashing Potential with ${projectName}`}
           subTitle={`At ${projectName}, we are dedicated to transforming management processes. Our mission is to empower teams with innovative tools and seamless solutions.`}
@@ -156,21 +156,21 @@ export default function WebSite() {
         />
 
         <FaqSection
-          projectName={'Adminpro'}
+          projectName={'society-community-portal'}
           design={FaqDesigns.ACCORDION || ''}
           faqs={faqs}
           mainText={`Frequently Asked Questions about ${projectName} `}
         />
 
         <ContactFormSection
-          projectName={'Adminpro'}
+          projectName={'society-community-portal'}
           design={ContactFormDesigns.WITH_IMAGE || ''}
           image={['Person typing on a laptop']}
           mainText={`Connect with ${projectName} Today `}
           subTitle={`Reach out to us anytime. Our team is ready to assist you with any inquiries or support you need. Expect a prompt response from ${projectName}.`}
         />
       </main>
-      <WebSiteFooter projectName={'Adminpro'} pages={pages} />
+      <WebSiteFooter projectName={'society-community-portal'} pages={pages} />
     </div>
   );
 }

frontend/src/pages/login.tsx

@@ -52,7 +52,7 @@ export default function Login() {
     remember: true,
   });
 
-  const title = 'Adminpro';
+  const title = 'society-community-portal';
 
   // Fetch Pexels image/video
   useEffect(() => {

frontend/src/pages/privacy-policy.tsx

@@ -5,7 +5,7 @@ import LayoutGuest from '../layouts/Guest';
 import { getPageTitle } from '../config';
 
 export default function PrivacyPolicy() {
-  const title = 'Adminpro';
+  const title = 'society-community-portal';
   const [projectUrl, setProjectUrl] = useState('');
 
   useEffect(() => {

frontend/src/pages/terms-of-use.tsx

@@ -5,7 +5,7 @@ import LayoutGuest from '../layouts/Guest';
 import { getPageTitle } from '../config';
 
 export default function PrivacyPolicy() {
-  const title = 'Adminpro';
+  const title = 'society-community-portal';
   const [projectUrl, setProjectUrl] = useState('');
 
   useEffect(() => {

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

@@ -138,6 +138,82 @@ const UsersView = () => {
             </CardBox>
           </>
 
+          <>
+            <p className={'block font-bold mb-2'}>Chatmessages Sender</p>
+            <CardBox
+              className='mb-6 border border-gray-300 rounded overflow-hidden'
+              hasTable
+            >
+              <div className='overflow-x-auto'>
+                <table>
+                  <thead>
+                    <tr>
+                      <th>Content</th>
+
+                      <th>Created date</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {users.chatmessages_sender &&
+                      Array.isArray(users.chatmessages_sender) &&
+                      users.chatmessages_sender.map((item: any) => (
+                        <tr
+                          key={item.id}
+                          onClick={() =>
+                            router.push(
+                              `/chatmessages/chatmessages-view/?id=${item.id}`,
+                            )
+                          }
+                        >
+                          <td data-label='content'>{item.content}</td>
+
+                          <td data-label='created_date'>
+                            {dataFormatter.dateTimeFormatter(item.created_date)}
+                          </td>
+                        </tr>
+                      ))}
+                  </tbody>
+                </table>
+              </div>
+              {!users?.chatmessages_sender?.length && (
+                <div className={'text-center py-4'}>No data</div>
+              )}
+            </CardBox>
+          </>
+
+          <>
+            <p className={'block font-bold mb-2'}>Chatroomparticipants User</p>
+            <CardBox
+              className='mb-6 border border-gray-300 rounded overflow-hidden'
+              hasTable
+            >
+              <div className='overflow-x-auto'>
+                <table>
+                  <thead>
+                    <tr></tr>
+                  </thead>
+                  <tbody>
+                    {users.chatroomparticipants_user &&
+                      Array.isArray(users.chatroomparticipants_user) &&
+                      users.chatroomparticipants_user.map((item: any) => (
+                        <tr
+                          key={item.id}
+                          onClick={() =>
+                            router.push(
+                              `/chatroomparticipants/chatroomparticipants-view/?id=${item.id}`,
+                            )
+                          }
+                        ></tr>
+                      ))}
+                  </tbody>
+                </table>
+              </div>
+              {!users?.chatroomparticipants_user?.length && (
+                <div className={'text-center py-4'}>No data</div>
+              )}
+            </CardBox>
+          </>
+
           <BaseDivider />
 
           <BaseButton

frontend/src/pages/web_pages/about.tsx

@@ -24,7 +24,7 @@ import FaqSection from '../../components/WebPageComponents/FaqComponent';
 export default function WebSite() {
   const cardsStyle = useAppSelector((state) => state.style.cardsStyle);
   const bgColor = useAppSelector((state) => state.style.bgLayoutColor);
-  const projectName = 'Adminpro';
+  const projectName = 'society-community-portal';
 
   useEffect(() => {
     const darkElement = document.querySelector('body .dark');
@@ -96,10 +96,10 @@ export default function WebSite() {
           content={`Learn more about ${projectName}, our mission, values, and the innovative features that empower management teams to excel.`}
         />
       </Head>
-      <WebSiteHeader projectName={'Adminpro'} />
+      <WebSiteHeader projectName={'society-community-portal'} />
       <main className={`flex-grow    bg-white  rounded-none  `}>
         <HeroSection
-          projectName={'Adminpro'}
+          projectName={'society-community-portal'}
           image={['Team collaborating in bright office']}
           mainText={`Discover the Heart of ${projectName}`}
           subTitle={`Dive into the story behind ${projectName}. Learn about our mission, values, and the passion driving our innovative solutions for management teams.`}
@@ -108,7 +108,7 @@ export default function WebSite() {
         />
 
         <AboutUsSection
-          projectName={'Adminpro'}
+          projectName={'society-community-portal'}
           image={['Team discussing project strategy']}
           mainText={`Our Mission and Vision at ${projectName}`}
           subTitle={`At ${projectName}, we are committed to revolutionizing management processes. Our vision is to empower teams with cutting-edge tools and foster a culture of innovation and collaboration.`}
@@ -117,9 +117,9 @@ export default function WebSite() {
         />
 
         <FeaturesSection
-          projectName={'Adminpro'}
+          projectName={'society-community-portal'}
           image={['Illustration of app features']}
-          withBg={0}
+          withBg={1}
           features={features_points}
           mainText={`Innovative Features of ${projectName}`}
           subTitle={`Explore the powerful features of ${projectName} that streamline management processes and enhance team productivity.`}
@@ -127,13 +127,13 @@ export default function WebSite() {
         />
 
         <FaqSection
-          projectName={'Adminpro'}
+          projectName={'society-community-portal'}
           design={FaqDesigns.TWO_COLUMN || ''}
           faqs={faqs}
           mainText={`Common Questions about ${projectName} `}
         />
       </main>
-      <WebSiteFooter projectName={'Adminpro'} />
+      <WebSiteFooter projectName={'society-community-portal'} />
     </div>
   );
 }

frontend/src/pages/web_pages/contact.tsx

@@ -21,7 +21,7 @@ import FaqSection from '../../components/WebPageComponents/FaqComponent';
 export default function WebSite() {
   const cardsStyle = useAppSelector((state) => state.style.cardsStyle);
   const bgColor = useAppSelector((state) => state.style.bgLayoutColor);
-  const projectName = 'Adminpro';
+  const projectName = 'society-community-portal';
 
   useEffect(() => {
     const darkElement = document.querySelector('body .dark');
@@ -67,10 +67,10 @@ export default function WebSite() {
           content={`Get in touch with the ${projectName} team for inquiries, support, or feedback. We're here to assist you with any questions you may have.`}
         />
       </Head>
-      <WebSiteHeader projectName={'Adminpro'} />
+      <WebSiteHeader projectName={'society-community-portal'} />
       <main className={`flex-grow    bg-white  rounded-none  `}>
         <HeroSection
-          projectName={'Adminpro'}
+          projectName={'society-community-portal'}
           image={['Customer support team assisting clients']}
           mainText={`Reach Out to ${projectName} Today`}
           subTitle={`We're here to help! Contact the ${projectName} team for any inquiries, support, or feedback. Your satisfaction is our priority.`}
@@ -79,21 +79,21 @@ export default function WebSite() {
         />
 
         <FaqSection
-          projectName={'Adminpro'}
+          projectName={'society-community-portal'}
           design={FaqDesigns.ACCORDION || ''}
           faqs={faqs}
           mainText={`Frequently Asked Questions about ${projectName} `}
         />
 
         <ContactFormSection
-          projectName={'Adminpro'}
+          projectName={'society-community-portal'}
           design={ContactFormDesigns.WITH_IMAGE || ''}
           image={['Person typing on a laptop']}
           mainText={`Get in Touch with ${projectName} `}
           subTitle={`Feel free to reach out to us anytime. Our team is available 24/7 to respond to your queries and provide the support you need.`}
         />
       </main>
-      <WebSiteFooter projectName={'Adminpro'} />
+      <WebSiteFooter projectName={'society-community-portal'} />
     </div>
   );
 }

frontend/src/pages/web_pages/faq.tsx

@@ -18,7 +18,7 @@ import FaqSection from '../../components/WebPageComponents/FaqComponent';
 export default function WebSite() {
   const cardsStyle = useAppSelector((state) => state.style.cardsStyle);
   const bgColor = useAppSelector((state) => state.style.bgLayoutColor);
-  const projectName = 'Adminpro';
+  const projectName = 'society-community-portal';
 
   useEffect(() => {
     const darkElement = document.querySelector('body .dark');
@@ -69,10 +69,10 @@ export default function WebSite() {
           content={`Find answers to common questions about ${projectName}. Learn more about our features, pricing, and support options.`}
         />
       </Head>
-      <WebSiteHeader projectName={'Adminpro'} />
+      <WebSiteHeader projectName={'society-community-portal'} />
       <main className={`flex-grow    bg-white  rounded-none  `}>
         <HeroSection
-          projectName={'Adminpro'}
+          projectName={'society-community-portal'}
           image={['Person reading FAQ on tablet']}
           mainText={`Your Questions Answered with ${projectName}`}
           subTitle={`Explore our comprehensive FAQ section to find answers to your questions about ${projectName}. Get insights into features, pricing, and more.`}
@@ -81,13 +81,13 @@ export default function WebSite() {
         />
 
         <FaqSection
-          projectName={'Adminpro'}
+          projectName={'society-community-portal'}
           design={FaqDesigns.ACCORDION || ''}
           faqs={faqs}
           mainText={`Common Questions about ${projectName} `}
         />
       </main>
-      <WebSiteFooter projectName={'Adminpro'} />
+      <WebSiteFooter projectName={'society-community-portal'} />
     </div>
   );
 }

frontend/src/pages/web_pages/home.tsx

@@ -27,7 +27,7 @@ import FaqSection from '../../components/WebPageComponents/FaqComponent';
 export default function WebSite() {
   const cardsStyle = useAppSelector((state) => state.style.cardsStyle);
   const bgColor = useAppSelector((state) => state.style.bgLayoutColor);
-  const projectName = 'Adminpro';
+  const projectName = 'society-community-portal';
 
   useEffect(() => {
     const darkElement = document.querySelector('body .dark');
@@ -99,10 +99,10 @@ export default function WebSite() {
           content={`Discover our comprehensive admin portal designed for management teams, offering robust features, seamless communication, and efficient data management.`}
         />
       </Head>
-      <WebSiteHeader projectName={'Adminpro'} />
+      <WebSiteHeader projectName={'society-community-portal'} />
       <main className={`flex-grow    bg-white  rounded-none  `}>
         <HeroSection
-          projectName={'Adminpro'}
+          projectName={'society-community-portal'}
           image={['Team collaborating in modern office']}
           mainText={`Empower Your Management with ${projectName}`}
           subTitle={`Streamline your team's operations with ${projectName}. Enhance efficiency, manage data seamlessly, and foster collaboration within your management team.`}
@@ -111,7 +111,7 @@ export default function WebSite() {
         />
 
         <FeaturesSection
-          projectName={'Adminpro'}
+          projectName={'society-community-portal'}
           image={['Dashboard showcasing key metrics']}
           withBg={1}
           features={features_points}
@@ -121,7 +121,7 @@ export default function WebSite() {
         />
 
         <AboutUsSection
-          projectName={'Adminpro'}
+          projectName={'society-community-portal'}
           image={['Team brainstorming in modern office']}
           mainText={`Unleashing Potential with ${projectName}`}
           subTitle={`At ${projectName}, we are dedicated to transforming management processes. Our mission is to empower teams with innovative tools and seamless solutions.`}
@@ -130,21 +130,21 @@ export default function WebSite() {
         />
 
         <FaqSection
-          projectName={'Adminpro'}
+          projectName={'society-community-portal'}
           design={FaqDesigns.ACCORDION || ''}
           faqs={faqs}
           mainText={`Frequently Asked Questions about ${projectName} `}
         />
 
         <ContactFormSection
-          projectName={'Adminpro'}
+          projectName={'society-community-portal'}
           design={ContactFormDesigns.WITH_IMAGE || ''}
           image={['Person typing on a laptop']}
           mainText={`Connect with ${projectName} Today `}
           subTitle={`Reach out to us anytime. Our team is ready to assist you with any inquiries or support you need. Expect a prompt response from ${projectName}.`}
         />
       </main>
-      <WebSiteFooter projectName={'Adminpro'} />
+      <WebSiteFooter projectName={'society-community-portal'} />
     </div>
   );
 }

frontend/src/pages/web_pages/services.tsx

@@ -21,7 +21,7 @@ import FaqSection from '../../components/WebPageComponents/FaqComponent';
 export default function WebSite() {
   const cardsStyle = useAppSelector((state) => state.style.cardsStyle);
   const bgColor = useAppSelector((state) => state.style.bgLayoutColor);
-  const projectName = 'Adminpro';
+  const projectName = 'society-community-portal';
 
   useEffect(() => {
     const darkElement = document.querySelector('body .dark');
@@ -88,10 +88,10 @@ export default function WebSite() {
           content={`Explore the range of services offered by ${projectName}, designed to enhance management efficiency and drive team success.`}
         />
       </Head>
-      <WebSiteHeader projectName={'Adminpro'} />
+      <WebSiteHeader projectName={'society-community-portal'} />
       <main className={`flex-grow    bg-white  rounded-none  `}>
         <HeroSection
-          projectName={'Adminpro'}
+          projectName={'society-community-portal'}
           image={['Team analyzing data on screen']}
           mainText={`Transform Your Management with ${projectName}`}
           subTitle={`Discover the comprehensive services offered by ${projectName} to streamline your management processes and boost team productivity.`}
@@ -100,7 +100,7 @@ export default function WebSite() {
         />
 
         <FeaturesSection
-          projectName={'Adminpro'}
+          projectName={'society-community-portal'}
           image={['Illustration of service features']}
           withBg={0}
           features={features_points}
@@ -110,13 +110,13 @@ export default function WebSite() {
         />
 
         <FaqSection
-          projectName={'Adminpro'}
+          projectName={'society-community-portal'}
           design={FaqDesigns.SPLIT_LIST || ''}
           faqs={faqs}
           mainText={`Frequently Asked Questions about ${projectName} Services `}
         />
       </main>
-      <WebSiteFooter projectName={'Adminpro'} />
+      <WebSiteFooter projectName={'society-community-portal'} />
     </div>
   );
 }

frontend/src/stores/chatmessages/chatmessagesSlice.ts

@@ -0,0 +1,241 @@
+import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit';
+import axios from 'axios';
+import {
+  fulfilledNotify,
+  rejectNotify,
+  resetNotify,
+} from '../../helpers/notifyStateHandler';
+
+interface MainState {
+  chatmessages: any;
+  loading: boolean;
+  count: number;
+  refetch: boolean;
+  rolesWidgets: any[];
+  notify: {
+    showNotification: boolean;
+    textNotification: string;
+    typeNotification: string;
+  };
+}
+
+const initialState: MainState = {
+  chatmessages: [],
+  loading: false,
+  count: 0,
+  refetch: false,
+  rolesWidgets: [],
+  notify: {
+    showNotification: false,
+    textNotification: '',
+    typeNotification: 'warn',
+  },
+};
+
+export const fetch = createAsyncThunk(
+  'chatmessages/fetch',
+  async (data: any) => {
+    const { id, query } = data;
+    const result = await axios.get(
+      `chatmessages${query || (id ? `/${id}` : '')}`,
+    );
+    return id
+      ? result.data
+      : { rows: result.data.rows, count: result.data.count };
+  },
+);
+
+export const deleteItemsByIds = createAsyncThunk(
+  'chatmessages/deleteByIds',
+  async (data: any, { rejectWithValue }) => {
+    try {
+      await axios.post('chatmessages/deleteByIds', { data });
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const deleteItem = createAsyncThunk(
+  'chatmessages/deleteChatmessages',
+  async (id: string, { rejectWithValue }) => {
+    try {
+      await axios.delete(`chatmessages/${id}`);
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const create = createAsyncThunk(
+  'chatmessages/createChatmessages',
+  async (data: any, { rejectWithValue }) => {
+    try {
+      const result = await axios.post('chatmessages', { data });
+      return result.data;
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const uploadCsv = createAsyncThunk(
+  'chatmessages/uploadCsv',
+  async (file: File, { rejectWithValue }) => {
+    try {
+      const data = new FormData();
+      data.append('file', file);
+      data.append('filename', file.name);
+
+      const result = await axios.post('chatmessages/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(
+  'chatmessages/updateChatmessages',
+  async (payload: any, { rejectWithValue }) => {
+    try {
+      const result = await axios.put(`chatmessages/${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 chatmessagesSlice = createSlice({
+  name: 'chatmessages',
+  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.chatmessages = action.payload.rows;
+        state.count = action.payload.count;
+      } else {
+        state.chatmessages = 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, 'Chatmessages 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, `${'Chatmessages'.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, `${'Chatmessages'.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, `${'Chatmessages'.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, 'Chatmessages 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 } = chatmessagesSlice.actions;
+
+export default chatmessagesSlice.reducer;

frontend/src/stores/chatroomparticipants/chatroomparticipantsSlice.ts

@@ -0,0 +1,254 @@
+import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit';
+import axios from 'axios';
+import {
+  fulfilledNotify,
+  rejectNotify,
+  resetNotify,
+} from '../../helpers/notifyStateHandler';
+
+interface MainState {
+  chatroomparticipants: any;
+  loading: boolean;
+  count: number;
+  refetch: boolean;
+  rolesWidgets: any[];
+  notify: {
+    showNotification: boolean;
+    textNotification: string;
+    typeNotification: string;
+  };
+}
+
+const initialState: MainState = {
+  chatroomparticipants: [],
+  loading: false,
+  count: 0,
+  refetch: false,
+  rolesWidgets: [],
+  notify: {
+    showNotification: false,
+    textNotification: '',
+    typeNotification: 'warn',
+  },
+};
+
+export const fetch = createAsyncThunk(
+  'chatroomparticipants/fetch',
+  async (data: any) => {
+    const { id, query } = data;
+    const result = await axios.get(
+      `chatroomparticipants${query || (id ? `/${id}` : '')}`,
+    );
+    return id
+      ? result.data
+      : { rows: result.data.rows, count: result.data.count };
+  },
+);
+
+export const deleteItemsByIds = createAsyncThunk(
+  'chatroomparticipants/deleteByIds',
+  async (data: any, { rejectWithValue }) => {
+    try {
+      await axios.post('chatroomparticipants/deleteByIds', { data });
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const deleteItem = createAsyncThunk(
+  'chatroomparticipants/deleteChatroomparticipants',
+  async (id: string, { rejectWithValue }) => {
+    try {
+      await axios.delete(`chatroomparticipants/${id}`);
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const create = createAsyncThunk(
+  'chatroomparticipants/createChatroomparticipants',
+  async (data: any, { rejectWithValue }) => {
+    try {
+      const result = await axios.post('chatroomparticipants', { data });
+      return result.data;
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const uploadCsv = createAsyncThunk(
+  'chatroomparticipants/uploadCsv',
+  async (file: File, { rejectWithValue }) => {
+    try {
+      const data = new FormData();
+      data.append('file', file);
+      data.append('filename', file.name);
+
+      const result = await axios.post(
+        'chatroomparticipants/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(
+  'chatroomparticipants/updateChatroomparticipants',
+  async (payload: any, { rejectWithValue }) => {
+    try {
+      const result = await axios.put(`chatroomparticipants/${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 chatroomparticipantsSlice = createSlice({
+  name: 'chatroomparticipants',
+  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.chatroomparticipants = action.payload.rows;
+        state.count = action.payload.count;
+      } else {
+        state.chatroomparticipants = 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, 'Chatroomparticipants 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,
+        `${'Chatroomparticipants'.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,
+        `${'Chatroomparticipants'.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,
+        `${'Chatroomparticipants'.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, 'Chatroomparticipants 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 } = chatroomparticipantsSlice.actions;
+
+export default chatroomparticipantsSlice.reducer;

frontend/src/stores/chatrooms/chatroomsSlice.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 {
+  chatrooms: any;
+  loading: boolean;
+  count: number;
+  refetch: boolean;
+  rolesWidgets: any[];
+  notify: {
+    showNotification: boolean;
+    textNotification: string;
+    typeNotification: string;
+  };
+}
+
+const initialState: MainState = {
+  chatrooms: [],
+  loading: false,
+  count: 0,
+  refetch: false,
+  rolesWidgets: [],
+  notify: {
+    showNotification: false,
+    textNotification: '',
+    typeNotification: 'warn',
+  },
+};
+
+export const fetch = createAsyncThunk('chatrooms/fetch', async (data: any) => {
+  const { id, query } = data;
+  const result = await axios.get(`chatrooms${query || (id ? `/${id}` : '')}`);
+  return id
+    ? result.data
+    : { rows: result.data.rows, count: result.data.count };
+});
+
+export const deleteItemsByIds = createAsyncThunk(
+  'chatrooms/deleteByIds',
+  async (data: any, { rejectWithValue }) => {
+    try {
+      await axios.post('chatrooms/deleteByIds', { data });
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const deleteItem = createAsyncThunk(
+  'chatrooms/deleteChatrooms',
+  async (id: string, { rejectWithValue }) => {
+    try {
+      await axios.delete(`chatrooms/${id}`);
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const create = createAsyncThunk(
+  'chatrooms/createChatrooms',
+  async (data: any, { rejectWithValue }) => {
+    try {
+      const result = await axios.post('chatrooms', { data });
+      return result.data;
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const uploadCsv = createAsyncThunk(
+  'chatrooms/uploadCsv',
+  async (file: File, { rejectWithValue }) => {
+    try {
+      const data = new FormData();
+      data.append('file', file);
+      data.append('filename', file.name);
+
+      const result = await axios.post('chatrooms/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(
+  'chatrooms/updateChatrooms',
+  async (payload: any, { rejectWithValue }) => {
+    try {
+      const result = await axios.put(`chatrooms/${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 chatroomsSlice = createSlice({
+  name: 'chatrooms',
+  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.chatrooms = action.payload.rows;
+        state.count = action.payload.count;
+      } else {
+        state.chatrooms = 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, 'Chatrooms 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, `${'Chatrooms'.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, `${'Chatrooms'.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, `${'Chatrooms'.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, 'Chatrooms 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 } = chatroomsSlice.actions;
+
+export default chatroomsSlice.reducer;

frontend/src/stores/store.ts

@@ -9,6 +9,9 @@ import departmentsSlice from './departments/departmentsSlice';
 import reportsSlice from './reports/reportsSlice';
 import rolesSlice from './roles/rolesSlice';
 import permissionsSlice from './permissions/permissionsSlice';
+import chatroomsSlice from './chatrooms/chatroomsSlice';
+import chatmessagesSlice from './chatmessages/chatmessagesSlice';
+import chatroomparticipantsSlice from './chatroomparticipants/chatroomparticipantsSlice';
 
 export const store = configureStore({
   reducer: {
@@ -22,6 +25,9 @@ export const store = configureStore({
     reports: reportsSlice,
     roles: rolesSlice,
     permissions: permissionsSlice,
+    chatrooms: chatroomsSlice,
+    chatmessages: chatmessagesSlice,
+    chatroomparticipants: chatroomparticipantsSlice,
   },
 });