3.02

.gitignore

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

backend/src/db/api/organizations.js

@@ -0,0 +1,267 @@
+
+const db = require('../models');
+const crypto = require('crypto');
+const Utils = require('../utils');
+
+const Sequelize = db.Sequelize;
+const Op = Sequelize.Op;
+
+module.exports = class OrganizationsDBApi {
+
+    static async create(data, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        const organizations = await db.organizations.create(
+            {
+                id: data.id || undefined,
+
+        name: data.name
+        ||
+        null
+            ,
+
+            importHash: data.importHash || null,
+            createdById: currentUser.id,
+            updatedById: currentUser.id,
+    },
+        { transaction },
+    );
+
+        return organizations;
+    }
+
+    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 organizationsData = data.map((item, index) => ({
+                id: item.id || undefined,
+
+                name: item.name
+            ||
+            null
+            ,
+
+            importHash: item.importHash || null,
+            createdById: currentUser.id,
+            updatedById: currentUser.id,
+            createdAt: new Date(Date.now() + index * 1000),
+    }));
+
+        // Bulk create items
+        const organizations = await db.organizations.bulkCreate(organizationsData, { transaction });
+
+        return organizations;
+    }
+
+    static async update(id, data, options) {
+        const currentUser = (options && options.currentUser) || {id: null};
+        const transaction = (options && options.transaction) || undefined;
+
+        const organizations = await db.organizations.findByPk(id, {}, {transaction});
+
+        const updatePayload = {};
+
+        if (data.name !== undefined) updatePayload.name = data.name;
+
+        updatePayload.updatedById = currentUser.id;
+
+        await organizations.update(updatePayload, {transaction});
+
+        return organizations;
+    }
+
+    static async deleteByIds(ids, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        const organizations = await db.organizations.findAll({
+            where: {
+                id: {
+                    [Op.in]: ids,
+                },
+            },
+            transaction,
+        });
+
+        await db.sequelize.transaction(async (transaction) => {
+            for (const record of organizations) {
+                await record.update(
+                    {deletedBy: currentUser.id},
+                    {transaction}
+                );
+            }
+            for (const record of organizations) {
+                await record.destroy({transaction});
+            }
+        });
+
+        return organizations;
+    }
+
+    static async remove(id, options) {
+        const currentUser = (options && options.currentUser) || {id: null};
+        const transaction = (options && options.transaction) || undefined;
+
+        const organizations = await db.organizations.findByPk(id, options);
+
+        await organizations.update({
+            deletedBy: currentUser.id
+        }, {
+            transaction,
+        });
+
+        await organizations.destroy({
+            transaction
+        });
+
+        return organizations;
+    }
+
+    static async findBy(where, options) {
+        const transaction = (options && options.transaction) || undefined;
+
+        const organizations = await db.organizations.findOne(
+            { where },
+            { transaction },
+        );
+
+        if (!organizations) {
+            return organizations;
+        }
+
+        const output = organizations.get({plain: true});
+
+        return output;
+    }
+
+    static async findAll(filter, options) {
+        const limit = filter.limit || 0;
+        let offset = 0;
+        let where = {};
+        const currentPage = +filter.page;
+
+        const user = (options && options.currentUser) || null;
+
+        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(
+                            'organizations',
+                            'name',
+                            filter.name,
+                        ),
+                    };
+                }
+
+            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.organizations.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(
+                        'organizations',
+                        'name',
+                        query,
+                    ),
+                ],
+            };
+        }
+
+        const records = await db.organizations.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/migrations/1756220125378.js

@@ -0,0 +1,91 @@
+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('organizations', {
+                        id: {
+                            type: Sequelize.DataTypes.UUID,
+                            defaultValue: Sequelize.DataTypes.UUIDV4,
+                            primaryKey: true,
+                        },
+                        createdById: {
+                            type: Sequelize.DataTypes.UUID,
+                            references: {
+                                key: 'id',
+                                model: 'users',
+                            },
+                        },
+                        updatedById: {
+                            type: Sequelize.DataTypes.UUID,
+                            references: {
+                                key: 'id',
+                                model: 'users',
+                            },
+                        },
+                        createdAt: { type: Sequelize.DataTypes.DATE },
+                        updatedAt: { type: Sequelize.DataTypes.DATE },
+                        deletedAt: { type: Sequelize.DataTypes.DATE },
+                        importHash: {
+                            type: Sequelize.DataTypes.STRING(255),
+                            allowNull: true,
+                          unique: true, 
+                        },
+                    }, { transaction });
+
+                    await queryInterface.addColumn(
+                      'organizations',
+                      'organizationsId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+
+                            references: {
+                                model: 'organizations',
+                                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(
+                        'organizations',
+                        'organizationsId',
+                        { transaction }
+                    );
+
+                    await queryInterface.dropTable('organizations', { transaction });
+
+            await transaction.commit();
+        } catch (err) {
+            await transaction.rollback();
+            throw err;
+        }
+    }
+};

backend/src/db/migrations/1756220134952.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(
+                      'organizations',
+                      '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(
+                        'organizations',
+                        'name',
+                        { transaction }
+                    );
+
+            await transaction.commit();
+        } catch (err) {
+            await transaction.rollback();
+            throw err;
+        }
+    }
+};

backend/src/db/migrations/1756220141114.js

@@ -0,0 +1,59 @@
+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(
+                      'users',
+                      'organizationId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+
+                            references: {
+                                model: 'organizations',
+                                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(
+                        'users',
+                        'organizationId',
+                        { transaction }
+                    );
+
+            await transaction.commit();
+        } catch (err) {
+            await transaction.rollback();
+            throw err;
+        }
+    }
+};

backend/src/db/migrations/1756220146280.js

@@ -0,0 +1,38 @@
+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 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 transaction.commit();
+        } catch (err) {
+            await transaction.rollback();
+            throw err;
+        }
+    }
+};

backend/src/db/models/organizations.js

@@ -0,0 +1,48 @@
+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 organizations = sequelize.define(
+    'organizations',
+    {
+      id: {
+        type: DataTypes.UUID,
+        defaultValue: DataTypes.UUIDV4,
+        primaryKey: true,
+      },
+
+name: {
+        type: DataTypes.TEXT,
+
+      },
+
+      importHash: {
+        type: DataTypes.STRING(255),
+        allowNull: true,
+        unique: true,
+      },
+    },
+    {
+      timestamps: true,
+      paranoid: true,
+      freezeTableName: true,
+    },
+  );
+
+  organizations.associate = (db) => {
+
+    db.organizations.belongsTo(db.users, {
+      as: 'createdBy',
+    });
+
+    db.organizations.belongsTo(db.users, {
+      as: 'updatedBy',
+    });
+  };
+
+  return organizations;
+};
+

backend/src/index.js

@@ -24,6 +24,8 @@ const check_insRoutes = require('./routes/check_ins');
 
 const exportsRoutes = require('./routes/exports');
 
+const organizationsRoutes = require('./routes/organizations');
+
 const getBaseUrl = (url) => {
   if (!url) return '';
   return url.endsWith('/api') ? url.slice(0, -4) : url;
@@ -86,6 +88,8 @@ app.use('/api/check_ins', passport.authenticate('jwt', {session: false}), check_
 
 app.use('/api/exports', passport.authenticate('jwt', {session: false}), exportsRoutes);
 
+app.use('/api/organizations', passport.authenticate('jwt', {session: false}), organizationsRoutes);
+
 app.use('/api/contact-form', contactFormRoutes);
 
 app.use(

backend/src/routes/organizations.js

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

backend/src/services/organizations.js

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

backend/src/services/search.js

@@ -67,6 +67,12 @@ module.exports = class SearchService {
 
             ],
 
+            "organizations": [
+
+                "name",
+
+            ],
+
       };
       const columnsInt = {
 

frontend/json/runtimeError.json

@@ -0,0 +1 @@
+{}

frontend/src/components/Organizations/CardOrganizations.tsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import ListActionsPopover from '../ListActionsPopover';
+import { useAppSelector } from '../../stores/hooks';
+import dataFormatter from '../../helpers/dataFormatter';
+import { Pagination } from '../Pagination';
+import LoadingSpinner from "../LoadingSpinner";
+import Link from 'next/link';
+
+type Props = {
+  organizations: any[];
+  loading: boolean;
+  onDelete: (id: string) => void;
+  currentPage: number;
+  numPages: number;
+  onPageChange: (page: number) => void;
+};
+
+const CardOrganizations = ({
+  organizations,
+  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);
+
+  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 && organizations.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
+            }`}
+          >
+              <Link href={`/organizations/organizations-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={`/organizations/organizations-edit/?id=${item.id}`}
+                  pathView={`/organizations/organizations-view/?id=${item.id}`}
+                  hasUpdatePermission={true}
+                />
+              </div>
+            </div>
+            <dl className='divide-y 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'>Members</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { item.members }
+                        </div>
+                    </dd>
+                </div>
+
+            </dl>
+          </li>
+        ))}
+        {!loading && organizations.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 CardOrganizations;

frontend/src/components/Organizations/ListOrganizations.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import CardBox from '../CardBox';
+import dataFormatter from '../../helpers/dataFormatter';
+import ListActionsPopover from "../ListActionsPopover";
+import {useAppSelector} from "../../stores/hooks";
+import {Pagination} from "../Pagination";
+import LoadingSpinner from "../LoadingSpinner";
+import Link from 'next/link';
+
+type Props = {
+    organizations: any[];
+    loading: boolean;
+    onDelete: (id: string) => void;
+    currentPage: number;
+    numPages: number;
+    onPageChange: (page: number) => void;
+};
+
+const ListOrganizations = ({ organizations, loading, onDelete, currentPage, numPages, onPageChange }: Props) => {
+    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 && organizations.map((item) => (
+                  <div key={item.id}>
+                    <CardBox hasTable isList className={'rounded shadow-none'}>
+                        <div className={`flex rounded dark:bg-dark-900 border items-center overflow-hidden`}>
+                          <Link
+                              href={`/organizations/organizations-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'}>Members</p>
+                                <p className={'line-clamp-2'}>{ item.members }</p>
+                            </div>
+
+                          </Link>
+                            <ListActionsPopover
+                              onDelete={onDelete}
+                              itemId={item.id}
+                              pathEdit={`/organizations/organizations-edit/?id=${item.id}`}
+                              pathView={`/organizations/organizations-view/?id=${item.id}`}
+                              hasUpdatePermission={true}
+                            />
+                        </div>
+                    </CardBox>
+                  </div>
+                ))}
+                {!loading && organizations.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 ListOrganizations

frontend/src/components/Organizations/TableOrganizations.tsx

@@ -0,0 +1,441 @@
+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/organizations/organizationsSlice'
+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 "./configureOrganizationsCols";
+import _ from 'lodash';
+import dataFormatter from '../../helpers/dataFormatter'
+import {dataGridStyles} from "../../styles";
+import axios from 'axios';
+
+const perPage = 10;
+
+const TableSampleOrganizations = ({ 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 { organizations, loading, count, notify: organizationsNotify, refetch } = useAppSelector((state) => state.organizations)
+  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 (organizationsNotify.showNotification) {
+          notify(organizationsNotify.typeNotification, organizationsNotify.textNotification);
+      }
+  }, [organizationsNotify.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(() => {
+    loadColumns(handleDeleteModalAction, `organizations`).then((newCols) =>
+      setColumns(newCols),
+    );
+  }, []);
+
+  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 border-gray-700 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={organizations ?? []}
+              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 TableSampleOrganizations

frontend/src/components/Organizations/configureOrganizationsCols.tsx

@@ -0,0 +1,78 @@
+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 dataFormatter from '../../helpers/dataFormatter'
+import DataGridMultiSelect from "../DataGridMultiSelect";
+import ListActionsPopover from '../ListActionsPopover';
+type Params = (id: string) => void;
+
+export const loadColumns = async (
+    onDelete: Params,
+    entityName: string,
+) => {
+    async function callOptionsApi(entityName: string) {
+        try {
+        const data = await axios(`/${entityName}/autocomplete?limit=100`);
+        return data.data;
+        } catch (error) {
+         console.log(error);
+         return [];
+        }
+    }
+    return [
+
+        {
+            field: 'name',
+            headerName: 'Name',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+
+            editable: true,
+
+        },
+
+        {
+            field: 'members',
+            headerName: 'Members',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+
+            editable: true,
+
+        },
+
+        {
+            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={`/organizations/organizations-edit/?id=${params?.row?.id}`}
+                      pathView={`/organizations/organizations-view/?id=${params?.row?.id}`}
+                      hasUpdatePermission={true}
+                    />
+                   </div>,
+                  ]
+            },
+        },
+    ];
+};

frontend/src/components/Users/CardUsers.tsx

@@ -115,6 +115,15 @@ const CardUsers = ({
                     </dd>
                 </div>
 
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='text-gray-500 dark:text-dark-600'>Organization</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.organizationsOneListFormatter(item.organization) }
+                        </div>
+                    </dd>
+                </div>
+
             </dl>
           </li>
         ))}

frontend/src/components/Users/ListUsers.tsx

@@ -65,6 +65,11 @@ const ListUsers = ({ users, loading, onDelete, currentPage, numPages, onPageChan
                                 <p className={'line-clamp-2'}>{ item.avatar }</p>
                             </div>
 
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs text-gray-500'}>Organization</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.organizationsOneListFormatter(item.organization) }</p>
+                            </div>
+
                           </Link>
                             <ListActionsPopover
                               onDelete={onDelete}

frontend/src/components/Users/configureUsersCols.tsx

@@ -106,6 +106,26 @@ export const loadColumns = async (
 
         },
 
+        {
+            field: 'organization',
+            headerName: 'Organization',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+
+            editable: true,
+            sortable: false,
+            type: 'singleSelect',
+            getOptionValue: (value: any) => value?.id,
+            getOptionLabel: (value: any) => value?.label,
+            valueOptions: await callOptionsApi('organizations'),
+            valueGetter: (params: GridValueGetterParams) =>
+                params?.value?.id ?? params?.value,
+
+        },
+
         {
             field: 'actions',
             type: 'actions',

frontend/src/helpers/dataFormatter.js

@@ -58,4 +58,23 @@ export default {
             return {label: val.firstName, id: val.id}
         },
 
+        organizationsManyListFormatter(val) {
+            if (!val || !val.length) return []
+            return val.map((item) => item.name)
+        },
+        organizationsOneListFormatter(val) {
+            if (!val) return ''
+            return val.name
+        },
+        organizationsManyListFormatterEdit(val) {
+            if (!val || !val.length) return []
+            return val.map((item) => {
+              return {id: item.id, label: item.name}
+            });
+        },
+        organizationsOneListFormatterEdit(val) {
+            if (!val) return ''
+            return {label: val.name, id: val.id}
+        },
+
 }

frontend/src/menuAside.ts

@@ -40,6 +40,14 @@ const menuAside: MenuAsideItem[] = [
     icon: 'mdiFileExport' in icon ? icon['mdiFileExport' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
     permissions: 'READ_EXPORTS'
   },
+  {
+    href: '/organizations/organizations-list',
+    label: 'Organizations',
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    icon: icon.mdiTable ?? icon.mdiTable,
+    permissions: 'READ_ORGANIZATIONS'
+  },
   {
     href: '/profile',
     label: 'Profile',

frontend/src/pages/dashboard.tsx

@@ -21,10 +21,11 @@ const Dashboard = () => {
     const [alerts, setAlerts] = React.useState(loadingMessage);
     const [check_ins, setCheck_ins] = React.useState(loadingMessage);
     const [exports, setExports] = React.useState(loadingMessage);
+    const [organizations, setOrganizations] = React.useState(loadingMessage);
 
     async function loadData() {
-        const entities = ['users','alerts','check_ins','exports',];
+        const entities = ['users','alerts','check_ins','exports','organizations',];
-        const fns = [setUsers,setAlerts,setCheck_ins,setExports,];
+        const fns = [setUsers,setAlerts,setCheck_ins,setExports,setOrganizations,];
 
         const requests = entities.map((entity, index) => {
             return axios.get(`/${entity.toLowerCase()}/count`);
@@ -174,6 +175,34 @@ const Dashboard = () => {
                 </div>
             </Link>
 
+            <Link href={'/organizations/organizations-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">
+                              Organizations
+                            </div>
+                            <div className="text-3xl leading-tight font-semibold">
+                                {organizations}
+                            </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/organizations/[organizationsId].tsx

@@ -0,0 +1,133 @@
+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 { SelectField } from "../../components/SelectField";
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import { SwitchField } from '../../components/SwitchField'
+import {RichTextField} from "../../components/RichTextField";
+
+import { update, fetch } from '../../stores/organizations/organizationsSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+
+const EditOrganizations = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+  const initVals = {
+
+    organizations: null,
+
+    'name': '',
+
+  }
+  const [initialValues, setInitialValues] = useState(initVals)
+
+  const { organizations } = useAppSelector((state) => state.organizations)
+
+  const { organizationsId } = router.query
+
+  useEffect(() => {
+    dispatch(fetch({ id: organizationsId }))
+  }, [organizationsId])
+
+  useEffect(() => {
+    if (typeof organizations === 'object') {
+      setInitialValues(organizations)
+    }
+  }, [organizations])
+
+  useEffect(() => {
+      if (typeof organizations === 'object') {
+
+          const newInitialVal = {...initVals};
+
+          Object.keys(initVals).forEach(el => newInitialVal[el] = (organizations)[el])
+
+          setInitialValues(newInitialVal);
+      }
+  }, [organizations])
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: organizationsId, data }))
+    await router.push('/organizations/organizations-list')
+  }
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit organizations')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={'Edit organizations'} main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+    <FormField label='organizations' labelFor='organizations'>
+        <Field
+            name='organizations'
+            id='organizations'
+            component={SelectField}
+            options={initialValues.organizations}
+            itemRef={'organizations'}
+
+            showField={'name'}
+
+        ></Field>
+    </FormField>
+
+    <FormField
+        label="Name"
+    >
+        <Field
+            name="name"
+            placeholder="Name"
+        />
+    </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('/organizations/organizations-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+EditOrganizations.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated>
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default EditOrganizations

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

@@ -0,0 +1,131 @@
+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 { SelectField } from "../../components/SelectField";
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import { SwitchField } from '../../components/SwitchField'
+import {RichTextField} from "../../components/RichTextField";
+
+import { update, fetch } from '../../stores/organizations/organizationsSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import dataFormatter from '../../helpers/dataFormatter';
+
+const EditOrganizationsPage = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+  const initVals = {
+
+    organizations: null,
+
+    'name': '',
+
+  }
+  const [initialValues, setInitialValues] = useState(initVals)
+
+  const { organizations } = useAppSelector((state) => state.organizations)
+
+  const { id } = router.query
+
+  useEffect(() => {
+    dispatch(fetch({ id: id }))
+  }, [id])
+
+  useEffect(() => {
+    if (typeof organizations === 'object') {
+      setInitialValues(organizations)
+    }
+  }, [organizations])
+
+  useEffect(() => {
+      if (typeof organizations === 'object') {
+          const newInitialVal = {...initVals};
+          Object.keys(initVals).forEach(el => newInitialVal[el] = (organizations)[el])
+          setInitialValues(newInitialVal);
+      }
+  }, [organizations])
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: id, data }))
+    await router.push('/organizations/organizations-list')
+  }
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit organizations')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={'Edit organizations'} main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+
+  <FormField label='organizations' labelFor='organizations'>
+        <Field
+            name='organizations'
+            id='organizations'
+            component={SelectField}
+            options={initialValues.organizations}
+            itemRef={'organizations'}
+
+            showField={'name'}
+
+        ></Field>
+    </FormField>
+
+    <FormField
+        label="Name"
+    >
+        <Field
+            name="name"
+            placeholder="Name"
+        />
+    </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('/organizations/organizations-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+EditOrganizationsPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated>
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default EditOrganizationsPage

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

@@ -0,0 +1,128 @@
+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 TableOrganizations from '../../components/Organizations/TableOrganizations'
+import BaseButton from '../../components/BaseButton'
+import axios from "axios";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import CardBoxModal from "../../components/CardBoxModal";
+import DragDropFilePicker from "../../components/DragDropFilePicker";
+import {setRefetch, uploadCsv} from '../../stores/organizations/organizationsSlice';
+
+const OrganizationsTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+
+  const dispatch = useAppDispatch();
+
+  const [filters] = useState([{label: 'Name', title: 'name'},
+
+  ]);
+  const addFilter = () => {
+        const newItem = {
+            id: uniqueId(),
+            fields: {
+                filterValue: '',
+                filterValueFrom: '',
+                filterValueTo: '',
+                selectedField: '',
+            },
+        };
+        newItem.fields.selectedField = filters[0].title;
+        setFilterItems([...filterItems, newItem]);
+    };
+
+    const getOrganizationsCSV = async () => {
+        const response = await axios({url: '/organizations?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 = 'organizationsCSV.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('Organizations')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Organizations" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox   className='mb-6' cardBoxClassName='flex flex-wrap'>
+          <BaseButton className={'mr-3'} href={'/organizations/organizations-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={getOrganizationsCSV} />
+            <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>
+          <TableOrganizations
+            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>
+    </>
+  )
+}
+
+OrganizationsTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated>
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default OrganizationsTablesPage

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

@@ -0,0 +1,95 @@
+import { mdiChartTimelineVariant } 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 { SwitchField } from '../../components/SwitchField'
+
+import { SelectField } from '../../components/SelectField'
+import {RichTextField} from "../../components/RichTextField";
+
+import { create } from '../../stores/organizations/organizationsSlice'
+import { useAppDispatch } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+
+const initialValues = {
+
+    organizations: '',
+
+    name: '',
+
+}
+
+const OrganizationsNew = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+
+  const handleSubmit = async (data) => {
+    await dispatch(create(data))
+    await router.push('/organizations/organizations-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="organizations" labelFor="organizations">
+      <Field name="organizations" id="organizations" component={SelectField} options={[]} itemRef={'organizations'}></Field>
+  </FormField>
+
+  <FormField
+      label="Name"
+  >
+      <Field
+          name="name"
+          placeholder="Name"
+      />
+  </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('/organizations/organizations-list')}/>
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+OrganizationsNew.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated>
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default OrganizationsNew

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

@@ -0,0 +1,129 @@
+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 TableOrganizations from '../../components/Organizations/TableOrganizations'
+import BaseButton from '../../components/BaseButton'
+import axios from "axios";
+import {useAppDispatch, useAppSelector} from "../../stores/hooks";
+import CardBoxModal from "../../components/CardBoxModal";
+import DragDropFilePicker from "../../components/DragDropFilePicker";
+import {setRefetch, uploadCsv} from '../../stores/organizations/organizationsSlice';
+
+const OrganizationsTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+
+  const dispatch = useAppDispatch();
+
+  const [filters] = useState([{label: 'Name', title: 'name'},
+
+  ]);
+    const addFilter = () => {
+        const newItem = {
+            id: uniqueId(),
+            fields: {
+                filterValue: '',
+                filterValueFrom: '',
+                filterValueTo: '',
+                selectedField: '',
+            },
+        };
+        newItem.fields.selectedField = filters[0].title;
+        setFilterItems([...filterItems, newItem]);
+    };
+
+    const getOrganizationsCSV = async () => {
+        const response = await axios({url: '/organizations?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 = 'organizationsCSV.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('Organizations')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Organizations" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox className='mb-6' cardBoxClassName='flex flex-wrap'>
+          <BaseButton className={'mr-3'} href={'/organizations/organizations-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={getOrganizationsCSV} />
+            <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>
+          <TableOrganizations
+            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>
+    </>
+  )
+}
+
+OrganizationsTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated>
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default OrganizationsTablesPage

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

@@ -0,0 +1,142 @@
+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/organizations/organizationsSlice'
+import dataFormatter from '../../helpers/dataFormatter';
+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 OrganizationsView = () => {
+    const router = useRouter()
+    const dispatch = useAppDispatch()
+    const { organizations } = useAppSelector((state) => state.organizations)
+
+    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 organizations')}</title>
+          </Head>
+          <SectionMain>
+            <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={removeLastCharacter('View organizations')} main>
+                <BaseButton
+                  color='info'
+                  label='Edit'
+                  href={`/organizations/organizations-edit/?id=${id}`}
+                />
+            </SectionTitleLineWithButton>
+            <CardBox>
+
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>organizations</p>
+
+                        <p>{organizations?.organizations?.name ?? 'No data'}</p>
+
+                </div>
+
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>Name</p>
+                    <p>{organizations?.name}</p>
+                </div>
+
+                <>
+                    <p className={'block font-bold mb-2'}>Users Organization</p>
+                    <CardBox
+                      className='mb-6 border border-gray-300 rounded overflow-hidden'
+                      hasTable
+                    >
+                        <div className='overflow-x-auto'>
+                            <table>
+                            <thead>
+                            <tr>
+
+                                <th>First Name</th>
+
+                                <th>Last Name</th>
+
+                                <th>Phone Number</th>
+
+                                <th>E-Mail</th>
+
+                                <th>Disabled</th>
+
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {organizations.users_organization && Array.isArray(organizations.users_organization) &&
+                              organizations.users_organization.map((item: any) => (
+                                <tr key={item.id} onClick={() => router.push(`/users/users-view/?id=${item.id}`)}>
+
+                                    <td data-label="firstName">
+                                        { item.firstName }
+                                    </td>
+
+                                    <td data-label="lastName">
+                                        { item.lastName }
+                                    </td>
+
+                                    <td data-label="phoneNumber">
+                                        { item.phoneNumber }
+                                    </td>
+
+                                    <td data-label="email">
+                                        { item.email }
+                                    </td>
+
+                                    <td data-label="disabled">
+                                        { dataFormatter.booleanFormatter(item.disabled) }
+                                    </td>
+
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                        </div>
+                        {!organizations?.users_organization?.length && <div className={'text-center py-4'}>No data</div>}
+                    </CardBox>
+                </>
+
+                <BaseDivider />
+
+                <BaseButton
+                    color='info'
+                    label='Back'
+                    onClick={() => router.push('/organizations/organizations-list')}
+                />
+              </CardBox>
+          </SectionMain>
+      </>
+    );
+};
+
+OrganizationsView.getLayout = function getLayout(page: ReactElement) {
+    return (
+      <LayoutAuthenticated>
+          {page}
+      </LayoutAuthenticated>
+    )
+}
+
+export default OrganizationsView;

frontend/src/pages/users/[usersId].tsx

@@ -42,6 +42,8 @@ const EditUsers = () => {
 
     disabled: false,
 
+    organization: null,
+
     password: ''
 
   }
@@ -138,6 +140,19 @@ const EditUsers = () => {
         ></Field>
     </FormField>
 
+    <FormField label='Organization' labelFor='organization'>
+        <Field
+            name='organization'
+            id='organization'
+            component={SelectField}
+            options={initialValues.organization}
+            itemRef={'organizations'}
+
+            showField={'name'}
+
+        ></Field>
+    </FormField>
+
     <FormField
         label="Password"
     >

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

@@ -43,6 +43,8 @@ const EditUsersPage = () => {
 
     disabled: false,
 
+    organization: null,
+
     password: ''
 
   }
@@ -136,6 +138,19 @@ const EditUsersPage = () => {
         ></Field>
     </FormField>
 
+  <FormField label='Organization' labelFor='organization'>
+        <Field
+            name='organization'
+            id='organization'
+            component={SelectField}
+            options={initialValues.organization}
+            itemRef={'organizations'}
+
+            showField={'name'}
+
+        ></Field>
+    </FormField>
+
     <FormField
         label="Password"
     >

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

@@ -35,6 +35,8 @@ const initialValues = {
 
     disabled: false,
 
+    organization: '',
+
 }
 
 const UsersNew = () => {
@@ -107,6 +109,10 @@ const UsersNew = () => {
       ></Field>
   </FormField>
 
+  <FormField label="Organization" labelFor="organization">
+      <Field name="organization" id="organization" component={SelectField} options={[]} itemRef={'organizations'}></Field>
+  </FormField>
+
               <BaseDivider />
               <BaseButtons>
                 <BaseButton type="submit" color="info" label="Submit" />

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

@@ -77,6 +77,13 @@ const UsersView = () => {
                     />
                 </FormField>
 
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>Organization</p>
+
+                        <p>{users?.organization?.name ?? 'No data'}</p>
+
+                </div>
+
                 <>
                     <p className={'block font-bold mb-2'}>Alerts Athlete</p>
                     <CardBox

frontend/src/stores/authSlice.ts

@@ -81,6 +81,7 @@ export const authSlice = createSlice({
   extraReducers: (builder) => {
     builder.addCase(loginUser.pending, (state) => {
       state.isFetching = true;
+      state.errorMessage = '';
     });
     builder.addCase(loginUser.fulfilled, (state, action) => {
       const token = action.payload;
@@ -94,7 +95,7 @@ export const authSlice = createSlice({
     });
 
     builder.addCase(loginUser.rejected, (state, action) => {
-      state.errorMessage = String(action.payload) || 'Something went wrong. Try again';
+      state.errorMessage = action.payload?.message || action.error?.message || 'Something went wrong. Try again';
       state.isFetching = false;
     });
     builder.addCase(findMe.pending, () => {

frontend/src/stores/organizations/organizationsSlice.ts

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

frontend/src/stores/store.ts

@@ -7,6 +7,7 @@ import usersSlice from "./users/usersSlice";
 import alertsSlice from "./alerts/alertsSlice";
 import check_insSlice from "./check_ins/check_insSlice";
 import exportsSlice from "./exports/exportsSlice";
+import organizationsSlice from "./organizations/organizationsSlice";
 
 export const store = configureStore({
   reducer: {
@@ -18,6 +19,7 @@ users: usersSlice,
 alerts: alertsSlice,
 check_ins: check_insSlice,
 exports: exportsSlice,
+organizations: organizationsSlice,
   },
 })