Autosave: 20260216-011410

2026-02-16 01:14:10 +00:00 · 2026-02-16 01:14:10 +00:00 · ac44e687a7
commit ac44e687a7
parent 98d74694cd
43 changed files with 3022 additions and 1288 deletions
--- a/assets/pasted-20260215-205037-3f24985a.png
+++ b/assets/pasted-20260215-205037-3f24985a.png
--- a/assets/pasted-20260215-205929-0da7605c.png
+++ b/assets/pasted-20260215-205929-0da7605c.png
--- a/backend/check_dbs.js
+++ b/backend/check_dbs.js
@ -0,0 +1,28 @@
+
+const { Sequelize } = require('sequelize');
+require('dotenv').config();
+
+const sequelize = new Sequelize(
+  'postgres', // Connect to default DB to list others
+  process.env.DB_USER,
+  process.env.DB_PASS,
+  {
+    host: process.env.DB_HOST,
+    port: process.env.DB_PORT,
+    dialect: 'postgres',
+    logging: false,
+  }
+);
+
+async function check() {
+  try {
+    const [results, metadata] = await sequelize.query("SELECT datname FROM pg_database WHERE datistemplate = false");
+    console.log('Databases:', results.map(r => r.datname));
+  } catch (err) {
+    console.error('Error:', err);
+  } finally {
+    await sequelize.close();
+  }
+}
+
+check();
--- a/backend/check_meta.js
+++ b/backend/check_meta.js
@ -0,0 +1,28 @@
+
+const { Sequelize } = require('sequelize');
+require('dotenv').config();
+
+const sequelize = new Sequelize(
+  process.env.DB_NAME,
+  process.env.DB_USER,
+  process.env.DB_PASS,
+  {
+    host: process.env.DB_HOST,
+    port: process.env.DB_PORT,
+    dialect: 'postgres',
+    logging: false,
+  }
+);
+
+async function check() {
+  try {
+    const [results, metadata] = await sequelize.query("SELECT * FROM \"SequelizeMeta\"");
+    console.log('Migrations:', results);
+  } catch (err) {
+    console.error('Error:', err);
+  } finally {
+    await sequelize.close();
+  }
+}
+
+check();
--- a/backend/check_old_db.js
+++ b/backend/check_old_db.js
@ -0,0 +1,26 @@
+
+const { Sequelize } = require('sequelize');
+
+const sequelize = new Sequelize(
+  'db_greenhouse_trials_tracker',
+  'postgres',
+  '',
+  {
+    host: 'localhost', // or process.env.DB_HOST which is 127.0.0.1
+    dialect: 'postgres',
+    logging: false,
+  }
+);
+
+async function check() {
+  try {
+    const [results, metadata] = await sequelize.query("SELECT table_name FROM information_schema.tables WHERE table_schema = 'public'");
+    console.log('Tables:', results);
+  } catch (err) {
+    console.error('Error:', err);
+  } finally {
+    await sequelize.close();
+  }
+}
+
+check();
--- a/backend/check_perms.js
+++ b/backend/check_perms.js
@ -0,0 +1,28 @@
+
+const { Sequelize } = require('sequelize');
+require('dotenv').config();
+
+const sequelize = new Sequelize(
+  process.env.DB_NAME,
+  process.env.DB_USER,
+  process.env.DB_PASS,
+  {
+    host: process.env.DB_HOST,
+    port: process.env.DB_PORT,
+    dialect: 'postgres',
+    logging: false,
+  }
+);
+
+async function check() {
+  try {
+    const [results] = await sequelize.query("SELECT * FROM permissions WHERE name = 'READ_PROJECTS'");
+    console.log('Permissions:', results);
+  } catch (err) {
+    console.error('Error:', err);
+  } finally {
+    await sequelize.close();
+  }
+}
+
+check();
--- a/backend/check_tables.js
+++ b/backend/check_tables.js
@ -0,0 +1,27 @@
+const { Sequelize } = require('sequelize');
+require('dotenv').config();
+
+const sequelize = new Sequelize(
+  'app_38100',
+  process.env.DB_USER,
+  process.env.DB_PASS,
+  {
+    host: process.env.DB_HOST,
+    port: process.env.DB_PORT,
+    dialect: 'postgres',
+    logging: false,
+  }
+);
+
+async function check() {
+  try {
+    const [results, metadata] = await sequelize.query("SELECT table_name FROM information_schema.tables WHERE table_schema = 'public'");
+    console.log('Tables in app_38100:', results);
+  } catch (err) {
+    console.error('Error:', err);
+  } finally {
+    await sequelize.close();
+  }
+}
+
+check();
--- a/backend/fix_meta.js
+++ b/backend/fix_meta.js
@ -0,0 +1,28 @@
+
+const { Sequelize } = require('sequelize');
+require('dotenv').config();
+
+const sequelize = new Sequelize(
+  process.env.DB_NAME,
+  process.env.DB_USER,
+  process.env.DB_PASS,
+  {
+    host: process.env.DB_HOST,
+    port: process.env.DB_PORT,
+    dialect: 'postgres',
+    logging: false,
+  }
+);
+
+async function fix() {
+  try {
+    await sequelize.query("INSERT INTO \"SequelizeMeta\" (name) VALUES ('1771187473079.js')");
+    console.log('Inserted 1771187473079.js into SequelizeMeta');
+  } catch (err) {
+    console.error('Error:', err);
+  } finally {
+    await sequelize.close();
+  }
+}
+
+fix();
--- a/backend/reset_meta.js
+++ b/backend/reset_meta.js
@ -0,0 +1,28 @@
+
+const { Sequelize } = require('sequelize');
+require('dotenv').config();
+
+const sequelize = new Sequelize(
+  process.env.DB_NAME, // app_38460
+  process.env.DB_USER,
+  process.env.DB_PASS,
+  {
+    host: process.env.DB_HOST,
+    port: process.env.DB_PORT,
+    dialect: 'postgres',
+    logging: false,
+  }
+);
+
+async function reset() {
+  try {
+    await sequelize.query('TRUNCATE TABLE "SequelizeMeta"');
+    console.log('SequelizeMeta truncated.');
+  } catch (err) {
+    console.error('Error:', err);
+  } finally {
+    await sequelize.close();
+  }
+}
+
+reset();
--- a/backend/src/config.js
+++ b/backend/src/config.js
@ -1,6 +1,3 @@
-
-
-
 const os = require('os');

 const config = {
@ -71,11 +68,11 @@ const config = {

 config.pexelsKey = process.env.PEXELS_KEY || '';

-config.pexelsQuery = 'Seedlings growing toward sunlight';
+config.pexelsQuery = 'Greenhouse interior agriculture';
 config.host = process.env.NODE_ENV === "production" ? config.remote : "http://localhost";
 config.apiUrl = `${config.host}${config.port ? `:${config.port}` : ``}/api`;
 config.swaggerUrl = `${config.swaggerUI}${config.swaggerPort}`;
 config.uiUrl = `${config.hostUI}${config.portUI ? `:${config.portUI}` : ``}/#`;
 config.backUrl = `${config.hostUI}${config.portUI ? `:${config.portUI}` : ``}`;

-module.exports = config;
+module.exports = config;
--- a/backend/src/db/api/projects.js
+++ b/backend/src/db/api/projects.js
@ -0,0 +1,298 @@
+
+const db = require('../models');
+const FileDBApi = require('./file');
+const crypto = require('crypto');
+const Utils = require('../utils');
+
+const Sequelize = db.Sequelize;
+const Op = Sequelize.Op;
+
+module.exports = class ProjectsDBApi {
+
+    static async create(data, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        const projects = await db.projects.create(
+            {
+                id: data.id || undefined,
+                name: data.name || null,
+                description: data.description || null,
+                status: data.status || null,
+                startDate: data.startDate || null,
+                endDate: data.endDate || null,
+                importHash: data.importHash || null,
+                createdById: currentUser.id,
+                updatedById: currentUser.id,
+            },
+            { transaction },
+        );
+
+        await projects.setTenant(data.tenant || null, { transaction });
+        await projects.setOrganizations(data.organizations || null, { transaction });
+
+        if (data.trials) {
+            await projects.setTrials(data.trials, { transaction });
+        }
+
+        if (data.documentation) {
+             // Expecting array of file objects or IDs
+             // Since association is hasMany (Project hasMany Files), we can use setDocumentation
+             // But File model is polymorphic-ish.
+             // If we use standard setter, Sequelize handles foreign key update on File table.
+             // But we need to make sure 'belongsTo' and 'belongsToColumn' are set if we rely on scope.
+             // Usually, we update files manually or use a helper.
+             // Let's try standard setter first.
+             // If data.documentation is array of IDs:
+             let fileIds = data.documentation;
+             if (fileIds.length > 0 && typeof fileIds[0] === 'object') {
+                 fileIds = fileIds.map(f => f.id);
+             }
+             
+             // We need to update the files to point to this project
+             await db.file.update(
+                 {
+                     belongsTo: 'projects',
+                     belongsToColumn: 'documentation',
+                     belongsToId: projects.id
+                 },
+                 {
+                     where: {
+                         id: { [Op.in]: fileIds }
+                     },
+                     transaction
+                 }
+             );
+        }
+
+        return projects;
+    }
+
+    static async update(id, data, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        const projects = await db.projects.findByPk(id, {}, { transaction });
+
+        const updatePayload = {};
+        if (data.name !== undefined) updatePayload.name = data.name;
+        if (data.description !== undefined) updatePayload.description = data.description;
+        if (data.status !== undefined) updatePayload.status = data.status;
+        if (data.startDate !== undefined) updatePayload.startDate = data.startDate;
+        if (data.endDate !== undefined) updatePayload.endDate = data.endDate;
+
+        updatePayload.updatedById = currentUser.id;
+
+        await projects.update(updatePayload, { transaction });
+
+        if (data.tenant !== undefined) {
+            await projects.setTenant(data.tenant, { transaction });
+        }
+        if (data.organizations !== undefined) {
+            await projects.setOrganizations(data.organizations, { transaction });
+        }
+        if (data.trials !== undefined) {
+            await projects.setTrials(data.trials, { transaction });
+        }
+        
+        if (data.documentation !== undefined) {
+             let fileIds = data.documentation;
+             if (fileIds && fileIds.length > 0 && typeof fileIds[0] === 'object') {
+                 fileIds = fileIds.map(f => f.id);
+             }
+             
+             // Unlink old files? 
+             // Ideally we should unset old ones.
+             // For now, let's just update new ones.
+             // If we want to support removal, we need to know which ones are removed.
+             // Assuming data.documentation is the NEW complete list.
+             
+             // First, clear existing files for this project (optional, depends on logic)
+             // or just overwrite.
+             // If we want to keep files that are still in the list, and remove others:
+             
+             // 1. Set all files belonging to this project to null (orphaned)
+             await db.file.update(
+                 { belongsToId: null, belongsTo: null, belongsToColumn: null },
+                 { where: { belongsTo: 'projects', belongsToId: projects.id }, transaction }
+             );
+
+             // 2. Set new files
+             if (fileIds && fileIds.length > 0) {
+                 await db.file.update(
+                     {
+                         belongsTo: 'projects',
+                         belongsToColumn: 'documentation',
+                         belongsToId: projects.id
+                     },
+                     {
+                         where: {
+                             id: { [Op.in]: fileIds }
+                         },
+                         transaction
+                     }
+                 );
+             }
+        }
+
+        return projects;
+    }
+
+    static async deleteByIds(ids, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        const projects = await db.projects.findAll({
+            where: { id: { [Op.in]: ids } },
+            transaction,
+        });
+
+        for (const record of projects) {
+            await record.destroy({ transaction });
+        }
+        return projects;
+    }
+
+    static async remove(id, options) {
+        const currentUser = (options && options.currentUser) || { id: null };
+        const transaction = (options && options.transaction) || undefined;
+
+        const projects = await db.projects.findByPk(id, options);
+        await projects.destroy({ transaction });
+        return projects;
+    }
+
+    static async findBy(where, options) {
+        const transaction = (options && options.transaction) || undefined;
+
+        const projects = await db.projects.findOne(
+            { where },
+            { transaction },
+        );
+
+        if (!projects) {
+            return projects;
+        }
+
+        const output = projects.get({ plain: true });
+
+        output.tenant = await projects.getTenant({ transaction });
+        output.organizations = await projects.getOrganizations({ transaction });
+        output.trials = await projects.getTrials({ transaction });
+        output.documentation = await db.file.findAll({
+            where: {
+                belongsTo: 'projects',
+                belongsToId: projects.id,
+                belongsToColumn: 'documentation'
+            },
+            transaction
+        });
+
+        return output;
+    }
+
+    static async findAll(filter, globalAccess, options) {
+        const limit = filter.limit || 0;
+        let offset = 0;
+        let where = {};
+        const currentPage = +filter.page;
+
+        const user = (options && options.currentUser) || null;
+        const userOrganizations = (user && user.organizations?.id) || null;
+
+        if (userOrganizations) {
+            if (options?.currentUser?.organizationsId) {
+                where.organizationsId = options.currentUser.organizationsId;
+            }
+        }
+
+        offset = currentPage * limit;
+
+        const transaction = (options && options.transaction) || undefined;
+
+        let include = [
+            {
+                model: db.tenants,
+                as: 'tenant',
+            },
+            {
+                model: db.organizations,
+                as: 'organizations',
+            },
+            {
+                model: db.trials,
+                as: 'trials',
+            }
+        ];
+
+        if (filter) {
+            if (filter.id) {
+                where = { ...where, ['id']: Utils.uuid(filter.id) };
+            }
+            if (filter.name) {
+                where = { ...where, [Op.and]: Utils.ilike('projects', 'name', filter.name) };
+            }
+            if (filter.status) {
+                where = { ...where, status: filter.status };
+            }
+        }
+
+        if (globalAccess) {
+            delete where.organizationsId;
+        }
+
+        const queryOptions = {
+            where,
+            include,
+            distinct: true,
+            order: filter.field && filter.sort ? [[filter.field, filter.sort]] : [['createdAt', 'desc']],
+            transaction: options?.transaction,
+        };
+
+        if (!options?.countOnly) {
+            queryOptions.limit = limit ? Number(limit) : undefined;
+            queryOptions.offset = offset ? Number(offset) : undefined;
+        }
+
+        try {
+            const { rows, count } = await db.projects.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, globalAccess, organizationId) {
+        let where = {};
+        if (!globalAccess && organizationId) {
+            where.organizationsId = organizationId;
+        }
+
+        if (query) {
+            where = {
+                ...where,
+                [Op.or]: [
+                    { ['id']: Utils.uuid(query) },
+                    Utils.ilike('projects', 'name', query),
+                ],
+            };
+        }
+
+        const records = await db.projects.findAll({
+            attributes: ['id', 'name'],
+            where,
+            limit: limit ? Number(limit) : undefined,
+            offset: offset ? Number(offset) : undefined,
+            order: [['name', 'ASC']],
+        });
+
+        return records.map((record) => ({
+            id: record.id,
+            label: record.name,
+        }));
+    }
+};
--- a/backend/src/db/db.config.js
+++ b/backend/src/db/db.config.js
@ -1,4 +1,4 @@
-
+require('dotenv').config();

 module.exports = {
  production: {
@ -12,11 +12,12 @@ module.exports = {
    seederStorage: 'sequelize',
  },
  development: {
-    username: 'postgres',
    dialect: 'postgres',
-    password: '',
-    database: 'db_greenhouse_trials_tracker',
-    host: process.env.DB_HOST || 'localhost',
+    username: process.env.DB_USER,
+    password: process.env.DB_PASS,
+    database: process.env.DB_NAME,
+    host: process.env.DB_HOST,
+    port: process.env.DB_PORT,
    logging: console.log,
    seederStorage: 'sequelize',
  },
@ -30,4 +31,4 @@ module.exports = {
      logging: console.log,
      seederStorage: 'sequelize',
    }
-};
+};
--- a/backend/src/db/migrations/20260216005901-create-projects.js
+++ b/backend/src/db/migrations/20260216005901-create-projects.js
@ -0,0 +1,119 @@
+module.exports = {
+  async up(queryInterface, Sequelize) {
+    const transaction = await queryInterface.sequelize.transaction();
+    try {
+      await queryInterface.createTable(
+        'projects',
+        {
+          id: {
+            type: Sequelize.DataTypes.UUID,
+            defaultValue: Sequelize.DataTypes.UUIDV4,
+            primaryKey: true,
+          },
+          name: {
+            type: Sequelize.DataTypes.TEXT,
+          },
+          description: {
+            type: Sequelize.DataTypes.TEXT,
+          },
+          status: {
+            type: Sequelize.DataTypes.ENUM,
+            values: ['active', 'completed', 'archived'],
+          },
+          startDate: {
+            type: Sequelize.DataTypes.DATE,
+          },
+          endDate: {
+            type: Sequelize.DataTypes.DATE,
+          },
+          importHash: {
+            type: Sequelize.DataTypes.STRING(255),
+            allowNull: true,
+            unique: true,
+          },
+          tenantId: {
+            type: Sequelize.DataTypes.UUID,
+            references: {
+              model: 'tenants',
+              key: 'id',
+            },
+          },
+          organizationsId: {
+            type: Sequelize.DataTypes.UUID,
+            references: {
+              model: 'organizations',
+              key: 'id',
+            },
+          },
+          createdById: {
+            type: Sequelize.DataTypes.UUID,
+            references: {
+              model: 'users',
+              key: 'id',
+            },
+          },
+          updatedById: {
+            type: Sequelize.DataTypes.UUID,
+            references: {
+              model: 'users',
+              key: 'id',
+            },
+          },
+          createdAt: { type: Sequelize.DataTypes.DATE },
+          updatedAt: { type: Sequelize.DataTypes.DATE },
+          deletedAt: { type: Sequelize.DataTypes.DATE },
+        },
+        { transaction }
+      );
+
+      await queryInterface.createTable(
+        'projects_trials',
+        {
+          id: {
+            type: Sequelize.DataTypes.UUID,
+            defaultValue: Sequelize.DataTypes.UUIDV4,
+            primaryKey: true,
+          },
+          projectId: {
+            type: Sequelize.DataTypes.UUID,
+            references: {
+              model: 'projects',
+              key: 'id',
+            },
+            onDelete: 'CASCADE',
+            onUpdate: 'CASCADE',
+          },
+          trialId: {
+            type: Sequelize.DataTypes.UUID,
+            references: {
+              model: 'trials',
+              key: 'id',
+            },
+            onDelete: 'CASCADE',
+            onUpdate: 'CASCADE',
+          },
+          createdAt: { type: Sequelize.DataTypes.DATE },
+          updatedAt: { type: Sequelize.DataTypes.DATE },
+        },
+        { transaction }
+      );
+
+      await transaction.commit();
+    } catch (err) {
+      await transaction.rollback();
+      throw err;
+    }
+  },
+
+  async down(queryInterface, Sequelize) {
+    const transaction = await queryInterface.sequelize.transaction();
+    try {
+      await queryInterface.dropTable('projects_trials', { transaction });
+      await queryInterface.dropTable('projects', { transaction });
+      await transaction.commit();
+    } catch (err) {
+      await transaction.rollback();
+      throw err;
+    }
+  },
+};
--- a/backend/src/db/migrations/20260216013000-add-projects-permissions.js
+++ b/backend/src/db/migrations/20260216013000-add-projects-permissions.js
@ -0,0 +1,90 @@
+
+const { v4: uuid } = require('uuid');
+
+module.exports = {
+  async up(queryInterface, Sequelize) {
+    const transaction = await queryInterface.sequelize.transaction();
+    try {
+      const entities = ['PROJECTS'];
+      const actions = ['CREATE', 'READ', 'UPDATE', 'DELETE'];
+      const timestamp = new Date();
+
+      // 1. Insert Permissions
+      const newPermissions = [];
+      for (const entity of entities) {
+        for (const action of actions) {
+          newPermissions.push({
+            id: uuid(),
+            name: `${action}_${entity}`,
+            createdAt: timestamp,
+            updatedAt: timestamp,
+          });
+        }
+      }
+
+      await queryInterface.bulkInsert('permissions', newPermissions, { transaction });
+
+      // 2. Get Roles
+      const [roles] = await queryInterface.sequelize.query(
+        "SELECT id, name FROM roles WHERE name IN ('Administrator', 'Super Administrator')",
+        { transaction }
+      );
+
+      // 3. Link Permissions to Roles
+      const rolePermissions = [];
+      for (const role of roles) {
+        for (const perm of newPermissions) {
+          rolePermissions.push({
+            roles_permissionsId: role.id,
+            permissionId: perm.id,
+            createdAt: timestamp,
+            updatedAt: timestamp,
+          });
+        }
+      }
+
+      if (rolePermissions.length > 0) {
+        await queryInterface.bulkInsert('rolesPermissionsPermissions', rolePermissions, { transaction });
+      }
+
+      await transaction.commit();
+    } catch (err) {
+      await transaction.rollback();
+      throw err;
+    }
+  },
+
+  async down(queryInterface, Sequelize) {
+    const transaction = await queryInterface.sequelize.transaction();
+    try {
+      // Find permissions to delete
+      const [permissions] = await queryInterface.sequelize.query(
+        "SELECT id FROM permissions WHERE name LIKE '%_PROJECTS'",
+        { transaction }
+      );
+
+      const permissionIds = permissions.map(p => p.id);
+
+      if (permissionIds.length > 0) {
+        // Delete from join table
+        await queryInterface.bulkDelete(
+          'rolesPermissionsPermissions',
+          { permissionId: { [Sequelize.Op.in]: permissionIds } },
+          { transaction }
+        );
+
+        // Delete from permissions table
+        await queryInterface.bulkDelete(
+          'permissions',
+          { id: { [Sequelize.Op.in]: permissionIds } },
+          { transaction }
+        );
+      }
+
+      await transaction.commit();
+    } catch (err) {
+      await transaction.rollback();
+      throw err;
+    }
+  },
+};
--- a/backend/src/db/models/projects.js
+++ b/backend/src/db/models/projects.js
@ -0,0 +1,95 @@
+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 projects = sequelize.define(
+    'projects',
+    {
+      id: {
+        type: DataTypes.UUID,
+        defaultValue: DataTypes.UUIDV4,
+        primaryKey: true,
+      },
+      name: {
+        type: DataTypes.TEXT,
+      },
+      description: {
+        type: DataTypes.TEXT,
+      },
+      status: {
+        type: DataTypes.ENUM,
+        values: ['active', 'completed', 'archived'],
+      },
+      startDate: {
+        type: DataTypes.DATE,
+      },
+      endDate: {
+        type: DataTypes.DATE,
+      },
+      importHash: {
+        type: DataTypes.STRING(255),
+        allowNull: true,
+        unique: true,
+      },
+    },
+    {
+      timestamps: true,
+      paranoid: true,
+      freezeTableName: true,
+    },
+  );
+
+  projects.associate = (db) => {
+    db.projects.belongsTo(db.users, {
+      as: 'createdBy',
+    });
+
+    db.projects.belongsTo(db.users, {
+      as: 'updatedBy',
+    });
+
+    db.projects.belongsTo(db.tenants, {
+      as: 'tenant',
+      foreignKey: {
+        name: 'tenantId',
+      },
+      constraints: false,
+    });
+
+    db.projects.belongsTo(db.organizations, {
+      as: 'organizations',
+      foreignKey: {
+        name: 'organizationsId',
+      },
+      constraints: false,
+    });
+
+    db.projects.belongsToMany(db.trials, {
+      as: 'trials',
+      foreignKey: 'projectId',
+      otherKey: 'trialId',
+      through: 'projects_trials',
+      constraints: false,
+    });
+    
+    // File attachment association (polymorphic usually handled in service, but we can define hasMany if we use a specific convention)
+    // The `file` model uses `belongsTo` string.
+    // So we don't strictly need an association here unless we want Sequelize to include it automatically.
+    // But `file` model has `belongsTo` (string) and `belongsToId` (UUID).
+    // So we can define:
+    db.projects.hasMany(db.file, {
+      as: 'documentation',
+      foreignKey: 'belongsToId',
+      constraints: false,
+      scope: {
+        belongsTo: 'projects',
+        belongsToColumn: 'documentation', // User mentioned "supporting documentation". I'll use this as the 'column' differentiator if needed.
+      },
+    });
+  };
+
+  return projects;
+};
--- a/backend/src/routes/projects.js
+++ b/backend/src/routes/projects.js
@ -0,0 +1,133 @@
+
+const express = require('express');
+const ProjectsService = require('../services/projects');
+const ProjectsDBApi = require('../db/api/projects');
+const wrapAsync = require('../helpers').wrapAsync;
+const router = express.Router();
+const { parse } = require('json2csv');
+const { checkCrudPermissions } = require('../middlewares/check-permissions');
+
+// Assuming 'projects' permission exists. If not, I might need to add it to DB or use a generic one.
+// For now, I'll use checkCrudPermissions('projects').
+// Note: If 'projects' is not in permissions table, this might fail or default to allow/deny depending on implementation.
+// Usually we need to add permissions in migration.
+// But user didn't ask for granular permissions setup, so I'll assume admin has access or I might need to skip it if it blocks.
+// I'll assume 'projects' is the resource name.
+// If it fails, I'll remove it.
+router.use(checkCrudPermissions('projects'));
+
+/**
+ *  @swagger
+ *  components:
+ *    schemas:
+ *      Projects:
+ *        type: object
+ *        properties:
+ *          name:
+ *            type: string
+ *          description:
+ *            type: string
+ *          status:
+ *            type: string
+ *          startDate:
+ *            type: string
+ *            format: date-time
+ *          endDate:
+ *            type: string
+ *            format: date-time
+ */
+
+router.post('/', wrapAsync(async (req, res) => {
+    const referer = req.headers.referer || `${req.protocol}://${req.hostname}${req.originalUrl}`;
+    const link = new URL(referer);
+    await ProjectsService.create(req.body.data, req.currentUser, true, link.host);
+    const payload = true;
+    res.status(200).send(payload);
+}));
+
+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 ProjectsService.bulkImport(req, res, true, link.host);
+    const payload = true;
+    res.status(200).send(payload);
+}));
+
+router.put('/:id', wrapAsync(async (req, res) => {
+  await ProjectsService.update(req.body.data, req.body.id, req.currentUser);
+  const payload = true;
+  res.status(200).send(payload);
+}));
+
+router.delete('/:id', wrapAsync(async (req, res) => {
+  await ProjectsService.remove(req.params.id, req.currentUser);
+  const payload = true;
+  res.status(200).send(payload);
+}));
+
+router.post('/deleteByIds', wrapAsync(async (req, res) => {
+    await ProjectsService.deleteByIds(req.body.data, req.currentUser);
+    const payload = true;
+    res.status(200).send(payload);
+  }));
+
+router.get('/', wrapAsync(async (req, res) => {
+  const filetype = req.query.filetype;
+  const globalAccess = req.currentUser.app_role.globalAccess;
+  const currentUser = req.currentUser;
+  
+  const payload = await ProjectsDBApi.findAll(
+    req.query, globalAccess, { currentUser }
+  );
+
+  if (filetype && filetype === 'csv') {
+    const fields = ['id', 'name', 'description', 'status', 'startDate', 'endDate'];
+    const opts = { fields };
+    try {
+      const csv = parse(payload.rows, opts);
+      res.status(200).attachment(csv);
+      res.send(csv);
+    } catch (err) {
+      console.error(err);
+      res.status(500).send('Error generating CSV');
+    }
+  } else {
+    res.status(200).send(payload);
+  }
+}));
+
+router.get('/count', wrapAsync(async (req, res) => {
+  const globalAccess = req.currentUser.app_role.globalAccess;
+  const currentUser = req.currentUser;
+  const payload = await ProjectsDBApi.findAll(
+      req.query,
+      globalAccess, 
+      { countOnly: true, currentUser }
+  );
+  res.status(200).send(payload);
+}));
+
+router.get('/autocomplete', async (req, res) => {
+  const globalAccess = req.currentUser.app_role.globalAccess;
+  const organizationId = req.currentUser.organization?.id;
+  
+  const payload = await ProjectsDBApi.findAllAutocomplete(
+    req.query.query,
+    req.query.limit,
+    req.query.offset,
+    globalAccess,
+    organizationId,
+  );
+  res.status(200).send(payload);
+});
+
+router.get('/:id', wrapAsync(async (req, res) => {
+  const payload = await ProjectsDBApi.findBy(
+    { id: req.params.id },
+  );
+  res.status(200).send(payload);
+}));
+
+router.use('/', require('../helpers').commonErrorHandler);
+
+module.exports = router;
--- a/backend/src/services/projects.js
+++ b/backend/src/services/projects.js
@ -0,0 +1,131 @@
+
+const db = require('../db/models');
+const ProjectsDBApi = require('../db/api/projects');
+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 ProjectsService {
+  static async create(data, currentUser) {
+    const transaction = await db.sequelize.transaction();
+    try {
+      await ProjectsDBApi.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"));
+
+      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 ProjectsDBApi.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 projects = await ProjectsDBApi.findBy(
+        {id},
+        {transaction},
+      );
+
+      if (!projects) {
+        throw new ValidationError(
+          'projectsNotFound',
+        );
+      }
+
+      const updatedProjects = await ProjectsDBApi.update(
+        id,
+        data,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+      return updatedProjects;
+
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  };
+
+  static async deleteByIds(ids, currentUser) {
+    const transaction = await db.sequelize.transaction();
+
+    try {
+      await ProjectsDBApi.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 ProjectsDBApi.remove(
+        id,
+        {
+          currentUser,
+          transaction,
+        },
+      );
+
+      await transaction.commit();
+    } catch (error) {
+      await transaction.rollback();
+      throw error;
+    }
+  }
+};
--- a/frontend/public/logo.png
+++ b/frontend/public/logo.png
--- a/frontend/src/components/ActivityFeed.tsx
+++ b/frontend/src/components/ActivityFeed.tsx
@ -0,0 +1,129 @@
+import React, { useEffect } from 'react'
+import { useAppDispatch, useAppSelector } from '../stores/hooks'
+import { fetch } from '../stores/media_assets/media_assetsSlice'
+import BaseButton from './BaseButton'
+import { mdiHeart, mdiComment, mdiShareVariant, mdiDotsHorizontal } from '@mdi/js'
+import BaseIcon from './BaseIcon'
+import LoadingSpinner from './LoadingSpinner'
+
+const ActivityFeed = () => {
+  const dispatch = useAppDispatch()
+  const { media_assets, loading } = useAppSelector((state) => state.media_assets)
+
+  useEffect(() => {
+    dispatch(fetch({ query: '?limit=10' }))
+  }, [dispatch])
+
+  if (loading && media_assets.length === 0) {
+    return (
+      <div className="flex justify-center py-10">
+        <LoadingSpinner />
+      </div>
+    )
+  }
+
+  if (media_assets.length === 0) {
+    return (
+      <div className="text-center py-10 text-gray-500 italic">
+        No recent activities found.
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-6">
+      {media_assets.map((asset: any) => (
+        <div key={asset.id} className="bg-white dark:bg-dark-900 border border-gray-200 dark:border-dark-700 rounded-xl shadow-sm overflow-hidden transition-all hover:shadow-md">
+          {/* Header */}
+          <div className="p-4 flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <div className="w-10 h-10 rounded-full bg-pavitra-100 flex items-center justify-center text-pavitra-600 font-bold uppercase">
+                {asset.uploaded_by?.firstName?.charAt(0) || 'U'}
+              </div>
+              <div>
+                <p className="font-bold text-gray-900 dark:text-white leading-none mb-1">
+                  {asset.uploaded_by ? `${asset.uploaded_by.firstName} ${asset.uploaded_by.lastName || ''}` : 'System User'}
+                </p>
+                <p className="text-xs text-gray-500">
+                  {asset.captured_at ? new Date(asset.captured_at).toLocaleString() : new Date(asset.createdAt).toLocaleString()}
+                </p>
+              </div>
+            </div>
+            <button className="text-gray-400 hover:text-gray-600">
+              <BaseIcon path={mdiDotsHorizontal} size={20} />
+            </button>
+          </div>
+
+          {/* Caption */}
+          {asset.caption && (
+            <div className="px-4 pb-3">
+              <p className="text-gray-800 dark:text-gray-200">{asset.caption}</p>
+              {asset.tags && (
+                <div className="flex flex-wrap gap-2 mt-2">
+                  {asset.tags.split(',').map((tag: string) => (
+                    <span key={tag} className="text-xs font-medium text-pavitra-600 bg-pavitra-50 px-2 py-0.5 rounded-full">
+                      #{tag.trim()}
+                    </span>
+                  ))}
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* Media/Thumbnails */}
+          {(asset.images?.length > 0 || asset.attachments?.length > 0) && (
+            <div className={`grid gap-1 border-y border-gray-100 dark:border-dark-800 ${asset.images?.length + asset.attachments?.length > 1 ? 'grid-cols-2' : 'grid-cols-1'}`}>
+              {[...(asset.images || []), ...(asset.attachments || [])].map((file: any, index: number) => {
+                const isImage = file.name?.match(/\.(jpg|jpeg|png|gif|webp)$/i)
+                return (
+                  <div key={file.id} className={`relative bg-gray-100 dark:bg-dark-800 overflow-hidden ${index === 0 && asset.images?.length + asset.attachments?.length === 3 ? 'row-span-2' : ''}`}>
+                    {isImage ? (
+                      <img 
+                        src={file.publicUrl} 
+                        alt={file.name} 
+                        className="w-full h-full object-cover max-h-[400px] hover:scale-105 transition-transform duration-500 cursor-pointer"
+                      />
+                    ) : (
+                      <div className="flex flex-col items-center justify-center py-12 px-4 text-gray-500">
+                        <div className="w-12 h-12 bg-gray-200 rounded-lg flex items-center justify-center mb-2">
+                          <span className="text-xs font-bold uppercase">{file.name?.split('.').pop()}</span>
+                        </div>
+                        <span className="text-xs truncate w-full text-center">{file.name}</span>
+                      </div>
+                    )}
+                  </div>
+                )
+              })}
+            </div>
+          )}
+
+          {/* Actions */}
+          <div className="p-3 flex items-center justify-between border-t border-gray-50 dark:border-dark-800">
+            <div className="flex gap-4">
+              <button className="flex items-center gap-1.5 text-gray-500 hover:text-red-500 transition-colors">
+                <BaseIcon path={mdiHeart} size={20} />
+                <span className="text-xs font-medium">Like</span>
+              </button>
+              <button className="flex items-center gap-1.5 text-gray-500 hover:text-pavitra-500 transition-colors">
+                <BaseIcon path={mdiComment} size={20} />
+                <span className="text-xs font-medium">Comment</span>
+              </button>
+              <button className="flex items-center gap-1.5 text-gray-500 hover:text-blue-500 transition-colors">
+                <BaseIcon path={mdiShareVariant} size={20} />
+                <span className="text-xs font-medium">Share</span>
+              </button>
+            </div>
+            {asset.source && (
+              <span className="text-[10px] text-gray-400 uppercase tracking-wider">Source: {asset.source}</span>
+            )}
+          </div>
+        </div>
+      ))}
+      <div className="flex justify-center pt-4">
+        <BaseButton label="Load More" color="white" outline />
+      </div>
+    </div>
+  )
+}
+
+export default ActivityFeed
--- a/frontend/src/components/AsideMenuLayer.tsx
+++ b/frontend/src/components/AsideMenuLayer.tsx
@ -3,10 +3,9 @@ import { mdiLogout, mdiClose } from '@mdi/js'
 import BaseIcon from './BaseIcon'
 import AsideMenuList from './AsideMenuList'
 import { MenuAsideItem } from '../interfaces'
-import { useAppSelector } from '../stores/hooks'
+import { useAppSelector, useAppDispatch } from '../stores/hooks'
 import Link from 'next/link';

-import { useAppDispatch } from '../stores/hooks';
 import { createAsyncThunk } from '@reduxjs/toolkit';
 import axios from 'axios';

@ -91,4 +90,4 @@ export default function AsideMenuLayer({ menu, className = '', ...props }: Props
      </div>
    </aside>
  )
-}
+}
--- a/frontend/src/components/NavBar.tsx
+++ b/frontend/src/components/NavBar.tsx
@ -6,10 +6,11 @@ import NavBarItemPlain from './NavBarItemPlain'
 import NavBarMenuList from './NavBarMenuList'
 import { MenuNavBarItem } from '../interfaces'
 import {  useAppSelector } from '../stores/hooks';
+import Search from './Search';

 type Props = {
  menu: MenuNavBarItem[]
-  className: string
+  className?: string
  children: ReactNode
 }

@ -35,23 +36,30 @@ export default function NavBar({ menu, className = '', children }: Props) {

  return (
    <nav
-      className={`${className} top-0 inset-x-0 fixed ${bgColor} h-14 z-30 transition-position w-screen lg:w-auto dark:bg-dark-800`}
+      className={`${className} top-0 inset-x-0 fixed ${bgColor} h-14 z-30 transition-position w-full dark:bg-dark-800 border-b border-gray-100 dark:border-dark-700`}
    >
-      <div className={`flex lg:items-stretch ${containerMaxW} ${isScrolled && `border-b  border-pavitra-400 dark:border-dark-700`}`}>
-        <div className="flex flex-1 items-stretch h-14">{children}</div>
-        <div className="flex-none items-stretch flex h-14 lg:hidden">
+      <div className={`flex lg:items-stretch ${containerMaxW} ${isScrolled && `shadow-sm`}`}>
+        <div className="flex flex-none items-stretch h-14">{children}</div>
+        
+        <div className="flex-none items-stretch flex h-14 lg:hidden ml-auto">
          <NavBarItemPlain onClick={handleMenuNavBarToggleClick}>
            <BaseIcon path={isMenuNavBarActive ? mdiClose : mdiDotsVertical} size="24" />
          </NavBarItemPlain>
        </div>
+
        <div
          className={`${
            isMenuNavBarActive ? 'block' : 'hidden'
-          } flex items-center max-h-screen-menu overflow-y-auto lg:overflow-visible absolute w-screen top-14 left-0 ${bgColor}  shadow-lg lg:w-auto lg:flex lg:static lg:shadow-none dark:bg-dark-800`}
+          } flex flex-1 items-center max-h-screen-menu overflow-y-auto lg:overflow-visible absolute w-screen top-14 left-0 ${bgColor} shadow-lg lg:w-auto lg:flex lg:static lg:shadow-none dark:bg-dark-800 ml-4`}
        >
-          <NavBarMenuList menu={menu} />
+          <div className="flex flex-1 items-center">
+            <NavBarMenuList menu={menu} />
+          </div>
+          <div className="flex items-center px-4 lg:px-0 lg:ml-auto">
+             <Search />
+          </div>
        </div>
      </div>
    </nav>
  )
-}
+}
--- a/frontend/src/components/NavBarItem.tsx
+++ b/frontend/src/components/NavBarItem.tsx
@ -1,6 +1,5 @@
-import React, {useEffect, useRef} from 'react'
+import React, {useEffect, useRef, useState} from 'react'
 import Link from 'next/link'
-import { useState } from 'react'
 import { mdiChevronUp, mdiChevronDown } from '@mdi/js'
 import BaseDivider from './BaseDivider'
 import BaseIcon from './BaseIcon'
@ -87,13 +86,15 @@ export default function NavBarItem({ item }: Props) {
        onClick={handleMenuClick}
      >
        {item.icon && <BaseIcon path={item.icon} size={22} className="transition-colors" />}
-        <span
-          className={`px-2 transition-colors w-40 grow ${
-            item.isDesktopNoLabel && item.icon ? 'lg:hidden' : ''
-          }`}
-        >
-          {itemLabel}
-        </span>
+        {itemLabel && (
+          <span
+            className={`px-2 transition-colors whitespace-nowrap ${
+              item.isDesktopNoLabel && item.icon ? 'lg:hidden' : ''
+            }`}
+          >
+            {itemLabel}
+          </span>
+        )}
        {item.isCurrentUser && <UserAvatarCurrentUser className="w-6 h-6 mr-3 inline-flex" />}
        {item.menu && (
          <BaseIcon
--- a/frontend/src/components/NavBarMenuList.tsx
+++ b/frontend/src/components/NavBarMenuList.tsx
@ -1,19 +1,29 @@
 import React from 'react'
 import { MenuNavBarItem } from '../interfaces'
 import NavBarItem from './NavBarItem'
+import {useAppSelector} from "../stores/hooks";
+import {hasPermission} from "../helpers/userPermissions";

 type Props = {
  menu: MenuNavBarItem[]
 }

 export default function NavBarMenuList({ menu }: Props) {
+  const { currentUser } = useAppSelector((state) => state.auth);
+
+  if (!currentUser) return null;
+
  return (
    <>
-      {menu.map((item, index) => (
+      {menu.map((item, index) => {
+        if (!hasPermission(currentUser, item.permissions)) return null;
+
+        return (
          <div key={index}>
            <NavBarItem  item={item} />
          </div>
-      ))}
+        )
+      })}
    </>
  )
-}
+}
--- a/frontend/src/components/Projects/TableProjects.tsx
+++ b/frontend/src/components/Projects/TableProjects.tsx
@ -0,0 +1,430 @@
+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/projects/projectsSlice'
+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 "./configureProjectsCols";
+import _ from 'lodash';
+import dataFormatter from '../../helpers/dataFormatter'
+import {dataGridStyles} from "../../styles";
+
+const perPage =  100 
+
+const TableProjects = ({ filterItems, setFilterItems, filters }) => {
+  const notify = (type, msg) => toast( msg, {type, position: "bottom-center"});
+
+    const dispatch = useAppDispatch();
+    const router = useRouter();
+
+    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 { projects, loading, count, notify: projectsNotify, refetch } = useAppSelector((state) => state.projects)
+  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 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 (projectsNotify.showNotification) {
+          notify(projectsNotify.typeNotification, projectsNotify.textNotification);
+      }
+  }, [projectsNotify.showNotification]);
+
+  useEffect(() => {
+      if (!currentUser) return;
+      loadData();
+  }, [sortModel, currentUser]);
+
+  useEffect(() => {
+    if (refetch) {
+      loadData(0);
+      dispatch(setRefetch(false));
+    }
+  }, [refetch, dispatch]);
+
+  const [isModalTrashActive, setIsModalTrashActive] = useState(false)
+
+  const handleModalAction = () => {
+    setIsModalTrashActive(false)
+  }
+
+  const handleDeleteModalAction = (id: string) => {
+    setId(id)
+    setIsModalTrashActive(true)
+  }
+  const handleDeleteAction = async () => {
+      if (id) {
+          await dispatch(deleteItem(id));
+          await loadData(0);
+          setIsModalTrashActive(false);
+      }
+  };
+
+  const generateFilterRequests = useMemo(() => {
+    let request = '&';
+    filterItems.forEach((item) => {
+      const isRangeFilter = filters.find(
+        (filter) =>
+          filter.title === item.fields.selectedField &&
+          (filter.number || filter.date),
+      );
+
+      if (isRangeFilter) {
+        const from = item.fields.filterValueFrom;
+        const to = item.fields.filterValueTo;
+        if (from) {
+          request += `${item.fields.selectedField}Range=${from}&`;
+        }
+        if (to) {
+          request += `${item.fields.selectedField}Range=${to}&`;
+        }
+      } else {
+        const value = item.fields.filterValue;
+        if (value) {
+          request += `${item.fields.selectedField}=${value}&`;
+        }
+      }
+    });
+    return request;
+  }, [filterItems, filters]);
+
+  const deleteFilter = (value) => {
+    const newItems = filterItems.filter((item) => item.id !== value);
+
+    if (newItems.length) {
+        setFilterItems(newItems);
+    } else {
+        loadData(0, '');
+        setFilterItems(newItems);
+    }
+  };
+
+  const handleSubmit = () => {
+    loadData(0, generateFilterRequests);
+  };
+
+  const handleChange = (id) => (e) => {
+    const value = e.target.value;
+    const name = e.target.name;
+
+    setFilterItems(
+      filterItems.map((item) => {
+        if (item.id !== id) return item;
+        if (name === 'selectedField') return { id, fields: { [name]: value } };
+
+        return { id, fields: { ...item.fields, [name]: value } }
+      }),
+    );
+  };
+
+  const handleReset = () => {
+      setFilterItems([]);
+      loadData(0, '');
+  };
+
+  const onPageChange = (page: number) => {
+    loadData(page);
+    setCurrentPage(page);
+  };
+
+    useEffect(() => {
+        if (!currentUser) return;
+
+        loadColumns(
+            handleDeleteModalAction,
+            `projects`,
+            currentUser,
+        ).then((newCols) => setColumns(newCols));
+    }, [currentUser]);
+
+  const handleTableSubmit = async (id: string, data) => {
+    if (!_.isEmpty(data)) {
+      await dispatch(update({ id, data }))
+        .unwrap()
+        .then((res) => res)
+        .catch((err) => {
+          throw new Error(err);
+        });
+    }
+  };
+
+  const onDeleteRows = async (selectedRows) => {
+    await dispatch(deleteItemsByIds(selectedRows));
+    await loadData(0);
+  };
+
+  const controlClasses =
+      'w-full py-2 px-2 my-2   rounded dark:placeholder-gray-400 ' +
+      ` ${bgColor} ${focusRing} ${corners} ` +
+      'dark:bg-slate-800 border';
+
+  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>
+
+      <div  className='relative overflow-x-auto'>
+          <DataGrid
+              autoHeight
+              rowHeight={64}
+              sx={dataGridStyles}
+              className={'datagrid--table'}
+              getRowClassName={() => `datagrid--row`}
+              rows={projects ?? []}
+              columns={columns}
+              initialState={{
+                  pagination: {
+                      paginationModel: {
+                          pageSize: 10,
+                      },
+                  },
+              }}
+              disableRowSelectionOnClick
+              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>
+
+      {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 TableProjects
--- a/frontend/src/components/Projects/configureProjectsCols.tsx
+++ b/frontend/src/components/Projects/configureProjectsCols.tsx
@ -0,0 +1,122 @@
+import React from 'react';
+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';
+import {hasPermission} from "../../helpers/userPermissions";
+
+type Params = (id: string) => void;
+
+export const loadColumns = async (
+    onDelete: Params,
+    entityName: string,
+    user
+) => {
+    const hasUpdatePermission = hasPermission(user, 'UPDATE_PROJECTS')
+    
+    return [
+        {
+            field: 'name',
+            headerName: 'Name',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+            editable: hasUpdatePermission,
+        },
+        {
+            field: 'status',
+            headerName: 'Status',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+            editable: hasUpdatePermission,
+            type: 'singleSelect',
+            valueOptions: ['active', 'completed', 'archived'],
+        },
+        {
+            field: 'startDate',
+            headerName: 'Start Date',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+            editable: hasUpdatePermission,
+            type: 'dateTime',
+            valueGetter: (params: GridValueGetterParams) =>
+                params.row.startDate ? new Date(params.row.startDate) : null,
+        },
+        {
+            field: 'endDate',
+            headerName: 'Finish Date',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+            editable: hasUpdatePermission,
+            type: 'dateTime',
+            valueGetter: (params: GridValueGetterParams) =>
+                params.row.endDate ? new Date(params.row.endDate) : null,
+        },
+        {
+            field: 'description',
+            headerName: 'Description',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+            editable: hasUpdatePermission,
+        },
+        {
+            field: 'trials',
+            headerName: 'Associated Trials',
+            flex: 1,
+            minWidth: 150,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+            editable: false,
+            sortable: false,
+            type: 'singleSelect',
+            valueFormatter: ({ value }) =>
+                 // Assuming trials is an array of objects with name or title
+                 Array.isArray(value) ? value.map(t => t.name || t.id).join(', ') : '',
+            // If we want editable trials in grid, we can enable it, but might be complex for M-to-M
+            renderEditCell: (params) => (
+                <DataGridMultiSelect {...params} entityName={'trials'}/>
+            ),
+        },
+        {
+            field: 'actions',
+            type: 'actions',
+            minWidth: 80,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+            getActions: (params: GridRowParams) => {
+               return [
+                   <div key={params?.row?.id}>
+                      <ListActionsPopover
+                      onDelete={onDelete}
+                      itemId={params?.row?.id}
+                      pathEdit={`/projects/${params?.row?.id}`}
+                      pathView={`/projects/${params?.row?.id}`} // View can be same as Edit for now or we create a separate view
+                      hasUpdatePermission={hasUpdatePermission}
+                    />
+                   </div>,
+                  ]
+            },
+        },
+    ];
+};
--- a/frontend/src/components/RecentTrialsTable.tsx
+++ b/frontend/src/components/RecentTrialsTable.tsx
@ -0,0 +1,98 @@
+import React, { useEffect } from 'react'
+import { useAppDispatch, useAppSelector } from '../stores/hooks'
+import { fetch } from '../stores/trials/trialsSlice'
+import BaseButton from './BaseButton'
+import BaseButtons from './BaseButtons'
+import { mdiEye, mdiPlus } from '@mdi/js'
+import Link from 'next/link'
+
+const RecentTrialsTable = () => {
+  const dispatch = useAppDispatch()
+  const { trials, loading } = useAppSelector((state) => state.trials)
+
+  useEffect(() => {
+    dispatch(fetch({ query: '?limit=5' }))
+  }, [dispatch])
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case 'active':
+        return 'bg-emerald-100 text-emerald-800 border-emerald-200'
+      case 'planned':
+        return 'bg-blue-100 text-blue-800 border-blue-200'
+      case 'completed':
+        return 'bg-purple-100 text-purple-800 border-purple-200'
+      case 'draft':
+        return 'bg-gray-100 text-gray-800 border-gray-200'
+      default:
+        return 'bg-gray-50 text-gray-600 border-gray-200'
+    }
+  }
+
+  return (
+    <div className="bg-white border border-gray-200 rounded-xl overflow-hidden shadow-sm">
+      <div className="px-6 py-4 border-b border-gray-100 flex justify-between items-center bg-gray-50/50">
+        <h3 className="font-bold text-gray-800">Recent Trials</h3>
+        <Link href="/trials/trials-list">
+          <BaseButton label="View All" color="white" small />
+        </Link>
+      </div>
+      <div className="overflow-x-auto">
+        <table className="w-full text-sm text-left">
+          <thead className="text-xs text-gray-500 uppercase bg-gray-50/30 border-b border-gray-100">
+            <tr>
+              <th className="px-6 py-3 font-semibold">Trial Name</th>
+              <th className="px-6 py-3 font-semibold text-center">Code</th>
+              <th className="px-6 py-3 font-semibold text-center">Status</th>
+              <th className="px-6 py-3 font-semibold text-center">Created</th>
+              <th className="px-6 py-3"></th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-gray-50">
+            {loading && trials.length === 0 ? (
+              <tr>
+                <td colSpan={5} className="px-6 py-10 text-center text-gray-400">
+                  <div className="flex items-center justify-center gap-2">
+                    <div className="w-4 h-4 border-2 border-blue-500 border-t-transparent rounded-full animate-spin" />
+                    Loading trials...
+                  </div>
+                </td>
+              </tr>
+            ) : trials.length > 0 ? (
+              trials.slice(0, 5).map((trial: any) => (
+                <tr key={trial.id} className="hover:bg-gray-50/80 transition-colors">
+                  <td className="px-6 py-4 font-bold text-gray-900">{trial.name}</td>
+                  <td className="px-6 py-4 text-center font-mono text-gray-500">{trial.code || '-'}</td>
+                  <td className="px-6 py-4 text-center">
+                    <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-bold border ${getStatusColor(trial.status)}`}>
+                      {trial.status}
+                    </span>
+                  </td>
+                  <td className="px-6 py-4 text-center text-gray-500">
+                    {new Date(trial.createdAt).toLocaleDateString()}
+                  </td>
+                  <td className="px-6 py-4 text-right">
+                    <Link href={`/trials/trials-list`}>
+                      <BaseButton color="info" icon={mdiEye} small rounded-full />
+                    </Link>
+                  </td>
+                </tr>
+              ))
+            ) : (
+              <tr>
+                <td colSpan={5} className="px-6 py-12 text-center">
+                  <p className="text-gray-400 mb-4 italic">No trials found in the system.</p>
+                  <Link href="/trials/trials-list">
+                    <BaseButton label="Create First Trial" icon={mdiPlus} color="info" small />
+                  </Link>
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  )
+}
+
+export default RecentTrialsTable
--- a/frontend/src/components/Search.tsx
+++ b/frontend/src/components/Search.tsx
@ -31,7 +31,7 @@ const Search = () => {
      validateOnChange={false}
    >
      {({ errors, touched, values }) => (
-          <Form  style={{width: '300px'}} >
+          <Form  className="w-40 lg:w-60" >
          <Field
            id='search'
            name='search'
@ -47,4 +47,4 @@ const Search = () => {
    </Formik>
  );
 };
-export default Search;
+export default Search;
--- a/frontend/src/config.ts
+++ b/frontend/src/config.ts
@ -8,8 +8,8 @@ export const localStorageStyleKey = 'style'

 export const containerMaxW = 'xl:max-w-full xl:mx-auto 2xl:mx-20'

-export const appTitle = 'created by Flatlogic generator!'
+export const appTitle = 'Trial Tracker'

 export const getPageTitle = (currentPageTitle: string) => `${currentPageTitle} — ${appTitle}`

-export const tinyKey = process.env.NEXT_PUBLIC_TINY_KEY || ''
+export const tinyKey = process.env.NEXT_PUBLIC_TINY_KEY || ''
--- a/frontend/src/helpers/dataFormatter.js
+++ b/frontend/src/helpers/dataFormatter.js
@ -394,10 +394,28 @@ export default {
            if (!val) return ''
            return {label: val.name, id: val.id}
        },
+
+        
+        projectsManyListFormatter(val) {
+            if (!val || !val.length) return []
+            return val.map((item) => item.name)
+        },
+        projectsOneListFormatter(val) {
+            if (!val) return ''
+            return val.name
+        },
+        projectsManyListFormatterEdit(val) {
+            if (!val || !val.length) return []
+            return val.map((item) => {
+              return {id: item.id, label: item.name}
+            });
+        },
+        projectsOneListFormatterEdit(val) {
+            if (!val) return ''
+            return {label: val.name, id: val.id}
+        },
        
    
        
    
-        
-    
-}
+}
--- a/frontend/src/interfaces/index.ts
+++ b/frontend/src/interfaces/index.ts
@ -27,6 +27,7 @@ export type MenuNavBarItem = {
  isToggleLightDark?: boolean
  isCurrentUser?: boolean
  menu?: MenuNavBarItem[]
+  permissions?: string | string[]
 }

 export type ColorKey = 'white' | 'light' | 'contrast' | 'success' | 'danger' | 'warning' | 'info'
@ -106,4 +107,4 @@ export type StyleKey = 'white' | 'basic'
 export type UserForm = {
  name: string
  email: string
-}
+}
--- a/frontend/src/layouts/Authenticated.tsx
+++ b/frontend/src/layouts/Authenticated.tsx
@ -1,16 +1,10 @@
 import React, { ReactNode, useEffect } from 'react'
-import { useState } from 'react'
 import jwt from 'jsonwebtoken';
-import { mdiForwardburger, mdiBackburger, mdiMenu } from '@mdi/js'
-import menuAside from '../menuAside'
 import menuNavBar from '../menuNavBar'
-import BaseIcon from '../components/BaseIcon'
 import NavBar from '../components/NavBar'
 import NavBarItemPlain from '../components/NavBarItemPlain'
-import AsideMenu from '../components/AsideMenu'
 import FooterBar from '../components/FooterBar'
 import { useAppDispatch, useAppSelector } from '../stores/hooks'
-import Search from '../components/Search';
 import { useRouter } from 'next/router'
 import {findMe, logoutUser} from "../stores/authSlice";

@ -34,6 +28,7 @@ export default function LayoutAuthenticated({
  const router = useRouter()
  const { token, currentUser } = useAppSelector((state) => state.auth)
  const bgColor = useAppSelector((state) => state.style.bgLayoutColor);
+
  let localToken
  if (typeof window !== 'undefined') {
    // Perform localStorage action
@ -67,63 +62,28 @@ export default function LayoutAuthenticated({

  const darkMode = useAppSelector((state) => state.style.darkMode)

-  const [isAsideMobileExpanded, setIsAsideMobileExpanded] = useState(false)
-  const [isAsideLgActive, setIsAsideLgActive] = useState(false)
-
-  useEffect(() => {
-    const handleRouteChangeStart = () => {
-      setIsAsideMobileExpanded(false)
-      setIsAsideLgActive(false)
-    }
-
-    router.events.on('routeChangeStart', handleRouteChangeStart)
-
-    // If the component is unmounted, unsubscribe
-    // from the event with the `off` method:
-    return () => {
-      router.events.off('routeChangeStart', handleRouteChangeStart)
-    }
-  }, [router.events, dispatch])
-
-
-  const layoutAsidePadding = 'xl:pl-60'
-
  return (
    <div className={`${darkMode ? 'dark' : ''} overflow-hidden lg:overflow-visible`}>
      <div
-        className={`${layoutAsidePadding} ${
-          isAsideMobileExpanded ? 'ml-60 lg:ml-0' : ''
-        } pt-14 min-h-screen w-screen transition-position lg:w-auto ${bgColor}  dark:bg-dark-800 dark:text-slate-100`}
+        className={`pt-14 min-h-screen w-screen transition-position lg:w-auto ${bgColor}  dark:bg-dark-800 dark:text-slate-100`}
      >
        <NavBar
          menu={menuNavBar}
-          className={`${layoutAsidePadding} ${isAsideMobileExpanded ? 'ml-60 lg:ml-0' : ''}`}
+          className={`w-full`}
        >
-          <NavBarItemPlain
-            display="flex lg:hidden"
-            onClick={() => setIsAsideMobileExpanded(!isAsideMobileExpanded)}
-          >
-            <BaseIcon path={isAsideMobileExpanded ? mdiBackburger : mdiForwardburger} size="24" />
-          </NavBarItemPlain>
-          <NavBarItemPlain
-            display="hidden lg:flex xl:hidden"
-            onClick={() => setIsAsideLgActive(true)}
-          >
-            <BaseIcon path={mdiMenu} size="24" />
-          </NavBarItemPlain>
-          <NavBarItemPlain useMargin>
-            <Search />
+          <NavBarItemPlain useMargin onClick={() => router.push('/dashboard')}>
+            <div className="flex items-center space-x-2 px-4 py-2 cursor-pointer">
+              <img 
+                src="/logo.png" 
+                alt="Trial Tracker Logo" 
+                className="h-10 w-auto object-contain"
+              />
+            </div>
          </NavBarItemPlain>
        </NavBar>
-        <AsideMenu
-          isAsideMobileExpanded={isAsideMobileExpanded}
-          isAsideLgActive={isAsideLgActive}
-          menu={menuAside}
-          onAsideLgClose={() => setIsAsideLgActive(false)}
-        />
        {children}
        <FooterBar>Hand-crafted & Made with ❤️</FooterBar>
      </div>
    </div>
  )
-}
+}
--- a/frontend/src/menuAside.ts
+++ b/frontend/src/menuAside.ts
@ -5,9 +5,134 @@ const menuAside: MenuAsideItem[] = [
  {
    href: '/dashboard',
    icon: icon.mdiViewDashboardOutline,
-    label: 'Dashboard',
+    label: 'Home',
+  },
+  {
+    label: 'Projects',
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    icon: 'mdiGreenhouse' in icon ? icon['mdiGreenhouse' as keyof typeof icon] : icon.mdiTable,
+    menu: [
+      {
+        href: '/projects/projects-list',
+        label: 'Projects List',
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        icon: 'mdiGreenhouse' in icon ? icon['mdiGreenhouse' as keyof typeof icon] : icon.mdiTable,
+        permissions: 'READ_PROJECTS'
+      },
+      {
+        href: '/trial_sites/trial_sites-list',
+        label: 'Trial Sites',
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        icon: 'mdiMapMarker' in icon ? icon['mdiMapMarker' as keyof typeof icon] : icon.mdiTable,
+        permissions: 'READ_TRIAL_SITES'
+      },
+      {
+        href: '/organizations/organizations-list',
+        label: 'Organizations',
+        icon: icon.mdiTable,
+        permissions: 'READ_ORGANIZATIONS'
+      },
+      {
+        href: '/tenants/tenants-list',
+        label: 'Tenants',
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        icon: 'mdiDomain' in icon ? icon['mdiDomain' as keyof typeof icon] : icon.mdiTable,
+        permissions: 'READ_TENANTS'
+      },
+    ]
+  },
+  {
+    label: 'Trials',
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    icon: 'mdiFlask' in icon ? icon['mdiFlask' as keyof typeof icon] : icon.mdiTable,
+    menu: [
+      {
+        href: '/trials/trials-list',
+        label: 'Trials List',
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        icon: 'mdiFlask' in icon ? icon['mdiFlask' as keyof typeof icon] : icon.mdiTable,
+        permissions: 'READ_TRIALS'
+      },
+      {
+        href: '/trial_entries/trial_entries-list',
+        label: 'Trial Entries',
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        icon: 'mdiTagMultiple' in icon ? icon['mdiTagMultiple' as keyof typeof icon] : icon.mdiTable,
+        permissions: 'READ_TRIAL_ENTRIES'
+      },
+      {
+        href: '/varieties/varieties-list',
+        label: 'Varieties',
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        icon: 'mdiSprout' in icon ? icon['mdiSprout' as keyof typeof icon] : icon.mdiTable,
+        permissions: 'READ_VARIETIES'
+      },
+      {
+        href: '/plots/plots-list',
+        label: 'Plots',
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        icon: 'mdiGrid' in icon ? icon['mdiGrid' as keyof typeof icon] : icon.mdiTable,
+        permissions: 'READ_PLOTS'
+      },
+      {
+        href: '/plants/plants-list',
+        label: 'Plants',
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        icon: 'mdiFlower' in icon ? icon['mdiFlower' as keyof typeof icon] : icon.mdiTable,
+        permissions: 'READ_PLANTS'
+      },
+    ]
+  },
+  {
+    label: 'Tracking',
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    icon: 'mdiChartBellCurve' in icon ? icon['mdiChartBellCurve' as keyof typeof icon] : icon.mdiTable,
+    menu: [
+      {
+        href: '/observations/observations-list',
+        label: 'Observations',
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        icon: 'mdiChartBellCurve' in icon ? icon['mdiChartBellCurve' as keyof typeof icon] : icon.mdiTable,
+        permissions: 'READ_OBSERVATIONS'
+      },
+      {
+        href: '/observation_events/observation_events-list',
+        label: 'Observation Events',
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        icon: 'mdiClipboardText' in icon ? icon['mdiClipboardText' as keyof typeof icon] : icon.mdiTable,
+        permissions: 'READ_OBSERVATION_EVENTS'
+      },
+      {
+        href: '/traits/traits-list',
+        label: 'Traits',
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        icon: 'mdiRuler' in icon ? icon['mdiRuler' as keyof typeof icon] : icon.mdiTable,
+        permissions: 'READ_TRAITS'
+      },
+      {
+        href: '/media_assets/media_assets-list',
+        label: 'Media Assets',
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        icon: 'mdiImageMultiple' in icon ? icon['mdiImageMultiple' as keyof typeof icon] : icon.mdiTable,
+        permissions: 'READ_MEDIA_ASSETS'
+      },
+    ]
  },
-  
  {
    href: '/users/users-list',
    label: 'Users',
@ -17,163 +142,67 @@ const menuAside: MenuAsideItem[] = [
    permissions: 'READ_USERS'
  },
  {
-    href: '/roles/roles-list',
-    label: 'Roles',
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    icon: icon.mdiShieldAccountVariantOutline ?? icon.mdiTable,
-    permissions: 'READ_ROLES'
-  },
-  {
-    href: '/permissions/permissions-list',
-    label: 'Permissions',
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    icon: icon.mdiShieldAccountOutline ?? icon.mdiTable,
-    permissions: 'READ_PERMISSIONS'
-  },
-  {
-    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: '/tenants/tenants-list',
-    label: 'Tenants',
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    icon: 'mdiDomain' in icon ? icon['mdiDomain' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
-    permissions: 'READ_TENANTS'
-  },
-  {
-    href: '/farms/farms-list',
-    label: 'Farms',
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    icon: 'mdiGreenhouse' in icon ? icon['mdiGreenhouse' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
-    permissions: 'READ_FARMS'
-  },
-  {
-    href: '/trials/trials-list',
-    label: 'Trials',
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    icon: 'mdiFlask' in icon ? icon['mdiFlask' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
-    permissions: 'READ_TRIALS'
-  },
-  {
-    href: '/trial_sites/trial_sites-list',
-    label: 'Trial sites',
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    icon: 'mdiMapMarker' in icon ? icon['mdiMapMarker' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
-    permissions: 'READ_TRIAL_SITES'
-  },
-  {
-    href: '/varieties/varieties-list',
-    label: 'Varieties',
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    icon: 'mdiSprout' in icon ? icon['mdiSprout' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
-    permissions: 'READ_VARIETIES'
-  },
-  {
-    href: '/trial_entries/trial_entries-list',
-    label: 'Trial entries',
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    icon: 'mdiTagMultiple' in icon ? icon['mdiTagMultiple' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
-    permissions: 'READ_TRIAL_ENTRIES'
-  },
-  {
-    href: '/plots/plots-list',
-    label: 'Plots',
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    icon: 'mdiGrid' in icon ? icon['mdiGrid' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
-    permissions: 'READ_PLOTS'
-  },
-  {
-    href: '/plants/plants-list',
-    label: 'Plants',
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    icon: 'mdiFlower' in icon ? icon['mdiFlower' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
-    permissions: 'READ_PLANTS'
-  },
-  {
-    href: '/observation_events/observation_events-list',
-    label: 'Observation events',
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    icon: 'mdiClipboardText' in icon ? icon['mdiClipboardText' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
-    permissions: 'READ_OBSERVATION_EVENTS'
-  },
-  {
-    href: '/traits/traits-list',
-    label: 'Traits',
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    icon: 'mdiRuler' in icon ? icon['mdiRuler' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
-    permissions: 'READ_TRAITS'
-  },
-  {
-    href: '/observations/observations-list',
-    label: 'Observations',
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    icon: 'mdiChartBellCurve' in icon ? icon['mdiChartBellCurve' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
-    permissions: 'READ_OBSERVATIONS'
-  },
-  {
-    href: '/media_assets/media_assets-list',
-    label: 'Media assets',
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    icon: 'mdiImageMultiple' in icon ? icon['mdiImageMultiple' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
-    permissions: 'READ_MEDIA_ASSETS'
-  },
-  {
-    href: '/report_templates/report_templates-list',
-    label: 'Report templates',
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    icon: 'mdiFileDocumentOutline' in icon ? icon['mdiFileDocumentOutline' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
-    permissions: 'READ_REPORT_TEMPLATES'
-  },
-  {
-    href: '/reports/reports-list',
    label: 'Reports',
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore
-    icon: 'mdiFileChart' in icon ? icon['mdiFileChart' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
-    permissions: 'READ_REPORTS'
+    icon: 'mdiFileChart' in icon ? icon['mdiFileChart' as keyof typeof icon] : icon.mdiTable,
+    menu: [
+      {
+        href: '/reports/reports-list',
+        label: 'Reports List',
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        icon: 'mdiFileChart' in icon ? icon['mdiFileChart' as keyof typeof icon] : icon.mdiTable,
+        permissions: 'READ_REPORTS'
+      },
+      {
+        href: '/report_templates/report_templates-list',
+        label: 'Report Templates',
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        icon: 'mdiFileDocumentOutline' in icon ? icon['mdiFileDocumentOutline' as keyof typeof icon] : icon.mdiTable,
+        permissions: 'READ_REPORT_TEMPLATES'
+      },
+    ]
  },
  {
-    href: '/api_clients/api_clients-list',
-    label: 'Api clients',
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    icon: 'mdiApi' in icon ? icon['mdiApi' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
-    permissions: 'READ_API_CLIENTS'
-  },
-  {
-    href: '/profile',
-    label: 'Profile',
-    icon: icon.mdiAccountCircle,
-  },
-
- 
-  {
-    href: '/api-docs',
-    target: '_blank',
-    label: 'Swagger API',
-    icon: icon.mdiFileCode,
-    permissions: 'READ_API_DOCS'
-  },
+    label: 'Settings',
+    icon: icon.mdiCog,
+    menu: [
+      {
+        href: '/roles/roles-list',
+        label: 'Roles',
+        icon: icon.mdiShieldAccountVariantOutline,
+        permissions: 'READ_ROLES'
+      },
+      {
+        href: '/permissions/permissions-list',
+        label: 'Permissions',
+        icon: icon.mdiShieldAccountOutline,
+        permissions: 'READ_PERMISSIONS'
+      },
+      {
+        href: '/api_clients/api_clients-list',
+        label: 'API Clients',
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        icon: 'mdiApi' in icon ? icon['mdiApi' as keyof typeof icon] : icon.mdiTable,
+        permissions: 'READ_API_CLIENTS'
+      },
+      {
+        href: '/profile',
+        label: 'Profile',
+        icon: icon.mdiAccountCircle,
+      },
+      {
+        href: '/api-docs',
+        target: '_blank',
+        label: 'Swagger API',
+        icon: icon.mdiFileCode,
+        permissions: 'READ_API_DOCS'
+      },
+    ]
+  }
 ]

 export default menuAside
--- a/frontend/src/menuNavBar.ts
+++ b/frontend/src/menuNavBar.ts
@ -1,19 +1,195 @@
 import {
-  mdiMenu,
-  mdiClockOutline,
-  mdiCloud,
-  mdiCrop,
  mdiAccount,
-  mdiCogOutline,
-  mdiEmail,
  mdiLogout,
  mdiThemeLightDark,
-  mdiGithub,
-  mdiVuejs,
+  mdiViewDashboardOutline,
+  mdiTable,
+  mdiAccountGroup,
+  mdiCog,
+  mdiShieldAccountVariantOutline,
+  mdiShieldAccountOutline,
+  mdiAccountCircle,
+  mdiFileCode,
+  mdiFlask,
+  mdiGreenhouse,
+  mdiMapMarker,
+  mdiDomain,
+  mdiTagMultiple,
+  mdiSprout,
+  mdiGrid,
+  mdiFlower,
+  mdiChartBellCurve,
+  mdiClipboardText,
+  mdiRuler,
+  mdiImageMultiple,
+  mdiFileChart,
+  mdiFileDocumentOutline,
+  mdiApi,
 } from '@mdi/js'
 import { MenuNavBarItem } from './interfaces'

 const menuNavBar: MenuNavBarItem[] = [
+  {
+    href: '/dashboard',
+    icon: mdiViewDashboardOutline,
+    label: 'Home',
+  },
+  {
+    label: 'Projects',
+    icon: mdiGreenhouse,
+    menu: [
+      {
+        href: '/farms/farms-list',
+        label: 'Projects List',
+        icon: mdiGreenhouse,
+        permissions: 'READ_FARMS'
+      },
+      {
+        href: '/trial_sites/trial_sites-list',
+        label: 'Trial Sites',
+        icon: mdiMapMarker,
+        permissions: 'READ_TRIAL_SITES'
+      },
+      {
+        href: '/organizations/organizations-list',
+        label: 'Organizations',
+        icon: mdiTable,
+        permissions: 'READ_ORGANIZATIONS'
+      },
+      {
+        href: '/tenants/tenants-list',
+        label: 'Tenants',
+        icon: mdiDomain,
+        permissions: 'READ_TENANTS'
+      },
+    ]
+  },
+  {
+    label: 'Trials',
+    icon: mdiFlask,
+    menu: [
+      {
+        href: '/trials/trials-list',
+        label: 'Trials List',
+        icon: mdiFlask,
+        permissions: 'READ_TRIALS'
+      },
+      {
+        href: '/trial_entries/trial_entries-list',
+        label: 'Trial Entries',
+        icon: mdiTagMultiple,
+        permissions: 'READ_TRIAL_ENTRIES'
+      },
+      {
+        href: '/varieties/varieties-list',
+        label: 'Varieties',
+        icon: mdiSprout,
+        permissions: 'READ_VARIETIES'
+      },
+      {
+        href: '/plots/plots-list',
+        label: 'Plots',
+        icon: mdiGrid,
+        permissions: 'READ_PLOTS'
+      },
+      {
+        href: '/plants/plants-list',
+        label: 'Plants',
+        icon: mdiFlower,
+        permissions: 'READ_PLANTS'
+      },
+    ]
+  },
+  {
+    label: 'Tracking',
+    icon: mdiChartBellCurve,
+    menu: [
+      {
+        href: '/observations/observations-list',
+        label: 'Observations',
+        icon: mdiChartBellCurve,
+        permissions: 'READ_OBSERVATIONS'
+      },
+      {
+        href: '/observation_events/observation_events-list',
+        label: 'Observation Events',
+        icon: mdiClipboardText,
+        permissions: 'READ_OBSERVATION_EVENTS'
+      },
+      {
+        href: '/traits/traits-list',
+        label: 'Traits',
+        icon: mdiRuler,
+        permissions: 'READ_TRAITS'
+      },
+      {
+        href: '/media_assets/media_assets-list',
+        label: 'Media Assets',
+        icon: mdiImageMultiple,
+        permissions: 'READ_MEDIA_ASSETS'
+      },
+    ]
+  },
+  {
+    href: '/users/users-list',
+    label: 'Users',
+    icon: mdiAccountGroup,
+    permissions: 'READ_USERS'
+  },
+  {
+    label: 'Reports',
+    icon: mdiFileChart,
+    menu: [
+      {
+        href: '/reports/reports-list',
+        label: 'Reports List',
+        icon: mdiFileChart,
+        permissions: 'READ_REPORTS'
+      },
+      {
+        href: '/report_templates/report_templates-list',
+        label: 'Report Templates',
+        icon: mdiFileDocumentOutline,
+        permissions: 'READ_REPORT_TEMPLATES'
+      },
+    ]
+  },
+  {
+    label: 'Settings',
+    icon: mdiCog,
+    menu: [
+      {
+        href: '/roles/roles-list',
+        label: 'Roles',
+        icon: mdiShieldAccountVariantOutline,
+        permissions: 'READ_ROLES'
+      },
+      {
+        href: '/permissions/permissions-list',
+        label: 'Permissions',
+        icon: mdiShieldAccountOutline,
+        permissions: 'READ_PERMISSIONS'
+      },
+      {
+        href: '/api_clients/api_clients-list',
+        label: 'API Clients',
+        icon: mdiApi,
+        permissions: 'READ_API_CLIENTS'
+      },
+      {
+        href: '/profile',
+        label: 'Profile',
+        icon: mdiAccountCircle,
+      },
+      {
+        href: '/api-docs',
+        target: '_blank',
+        label: 'Swagger API',
+        icon: mdiFileCode,
+        permissions: 'READ_API_DOCS'
+      },
+    ]
+  },
  {
    isCurrentUser: true,
    menu: [
@ -50,4 +226,4 @@ export const webPagesNavBar = [
    
 ];

-export default menuNavBar
+export default menuNavBar
--- a/frontend/src/pages/dashboard.tsx
+++ b/frontend/src/pages/dashboard.tsx
@ -1,694 +1,87 @@
-import * as icon from '@mdi/js';
+import { mdiChartTimelineVariant } from '@mdi/js'
 import Head from 'next/head'
-import React from 'react'
-import axios from 'axios';
-import type { ReactElement } from 'react'
+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 BaseIcon from "../components/BaseIcon";
 import { getPageTitle } from '../config'
-import Link from "next/link";
+import ActivityFeed from '../components/ActivityFeed'
+import { useAppSelector } from '../stores/hooks'

-import { hasPermission } from "../helpers/userPermissions";
-import { fetchWidgets } from '../stores/roles/rolesSlice';
-import { WidgetCreator } from '../components/WidgetCreator/WidgetCreator';
-import { SmartWidget } from '../components/SmartWidget/SmartWidget';
-
-import { useAppDispatch, useAppSelector } from '../stores/hooks';
 const Dashboard = () => {
-    const dispatch = useAppDispatch();
-    const iconsColor = useAppSelector((state) => state.style.iconsColor);
-    const corners = useAppSelector((state) => state.style.corners);
-    const cardsStyle = useAppSelector((state) => state.style.cardsStyle);
+  const { currentUser } = useAppSelector((state) => state.auth)

-    const loadingMessage = 'Loading...';
-
-    
-    const [users, setUsers] = React.useState(loadingMessage);
-    const [roles, setRoles] = React.useState(loadingMessage);
-    const [permissions, setPermissions] = React.useState(loadingMessage);
-    const [organizations, setOrganizations] = React.useState(loadingMessage);
-    const [tenants, setTenants] = React.useState(loadingMessage);
-    const [farms, setFarms] = React.useState(loadingMessage);
-    const [trials, setTrials] = React.useState(loadingMessage);
-    const [trial_sites, setTrial_sites] = React.useState(loadingMessage);
-    const [varieties, setVarieties] = React.useState(loadingMessage);
-    const [trial_entries, setTrial_entries] = React.useState(loadingMessage);
-    const [plots, setPlots] = React.useState(loadingMessage);
-    const [plants, setPlants] = React.useState(loadingMessage);
-    const [observation_events, setObservation_events] = React.useState(loadingMessage);
-    const [traits, setTraits] = React.useState(loadingMessage);
-    const [observations, setObservations] = React.useState(loadingMessage);
-    const [media_assets, setMedia_assets] = React.useState(loadingMessage);
-    const [report_templates, setReport_templates] = React.useState(loadingMessage);
-    const [reports, setReports] = React.useState(loadingMessage);
-    const [api_clients, setApi_clients] = React.useState(loadingMessage);
-
-    
-    const [widgetsRole, setWidgetsRole] = React.useState({
-        role: { value: '', label: '' },
-    });
-    const { currentUser } = useAppSelector((state) => state.auth);
-    const { isFetchingQuery } = useAppSelector((state) => state.openAi);
-    
-    const { rolesWidgets, loading } = useAppSelector((state) => state.roles);
-    
-    
-    const organizationId = currentUser?.organizations?.id;
-    
-    async function loadData() {
-        const entities = ['users','roles','permissions','organizations','tenants','farms','trials','trial_sites','varieties','trial_entries','plots','plants','observation_events','traits','observations','media_assets','report_templates','reports','api_clients',];
-        const fns = [setUsers,setRoles,setPermissions,setOrganizations,setTenants,setFarms,setTrials,setTrial_sites,setVarieties,setTrial_entries,setPlots,setPlants,setObservation_events,setTraits,setObservations,setMedia_assets,setReport_templates,setReports,setApi_clients,];
-
-        const requests = entities.map((entity, index) => {
-          
-          if(hasPermission(currentUser, `READ_${entity.toUpperCase()}`)) {
-            return axios.get(`/${entity.toLowerCase()}/count`);
-          } else {
-            fns[index](null);
-            return Promise.resolve({data: {count: null}});
-          }
-          
-        });
-
-        Promise.allSettled(requests).then((results) => {
-            results.forEach((result, i) => {
-                if (result.status === 'fulfilled') {
-                    fns[i](result.value.data.count);
-                } else {
-                    fns[i](result.reason.message);
-                }
-            });
-        });
-    }
-  
-    async function getWidgets(roleId) {
-        await dispatch(fetchWidgets(roleId));
-    }
-    React.useEffect(() => {
-        if (!currentUser) return;
-        loadData().then();
-        setWidgetsRole({ role: { value: currentUser?.app_role?.id, label: currentUser?.app_role?.name } });
-    }, [currentUser]);
-
-    React.useEffect(() => {
-        if (!currentUser || !widgetsRole?.role?.value) return;
-        getWidgets(widgetsRole?.role?.value || '').then();
-    }, [widgetsRole?.role?.value]);
-  
  return (
    <>
      <Head>
-        <title>
-            {getPageTitle('Overview')}
-        </title>
+        <title>{getPageTitle('Trial Tracker')}</title>
      </Head>
      <SectionMain>
-        <SectionTitleLineWithButton
-            icon={icon.mdiChartTimelineVariant}
-            title='Overview'
-            main>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={`Welcome ${currentUser?.firstName || ''}`} main>
          {''}
        </SectionTitleLineWithButton>
-        
-        {hasPermission(currentUser, 'CREATE_ROLES') && <WidgetCreator
-            currentUser={currentUser}
-            isFetchingQuery={isFetchingQuery}
-            setWidgetsRole={setWidgetsRole}
-            widgetsRole={widgetsRole}
-        />}
-        {!!rolesWidgets.length &&
-            hasPermission(currentUser, 'CREATE_ROLES') && (
-                <p className='  text-gray-500 dark:text-gray-400 mb-4'>
-                    {`${widgetsRole?.role?.label || 'Users'}'s widgets`}
-                </p>
-            )}

-        <div className='grid grid-cols-1 gap-6 lg:grid-cols-4 mb-6 grid-flow-dense'>
-            {(isFetchingQuery || loading) && (
-                <div className={` ${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 text-lg leading-tight   text-gray-500 flex items-center ${cardsStyle} dark:border-dark-700 p-6`}>
-                    <BaseIcon
-                        className={`${iconsColor} animate-spin mr-5`}
-                        w='w-16'
-                        h='h-16'
-                        size={48}
-                        path={icon.mdiLoading}
-                    />{' '}
-                    Loading widgets...
-                </div>
-            )}
+        <div className="grid grid-cols-1 gap-6 lg:grid-cols-3 mb-6">
+          <CardBox className="bg-gradient-to-br from-pavitra-500 to-pavitra-600 border-none shadow-lg">
+            <div className="flex items-center justify-between text-white">
+              <div>
+                <p className="text-sm font-medium opacity-80 mb-1">Total Projects</p>
+                <h3 className="text-3xl font-bold">12</h3>
+              </div>
+              <div className="bg-white/20 p-3 rounded-lg">
+                <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
+                </svg>
+              </div>
+            </div>
+            <p className="text-white/60 text-sm mt-4">+2 since last month</p>
+          </CardBox>

-            { rolesWidgets &&
-                rolesWidgets.map((widget) => (
-                    <SmartWidget
-                        key={widget.id}
-                        userId={currentUser?.id}
-                        widget={widget}
-                        roleId={widgetsRole?.role?.value || ''}
-                        admin={hasPermission(currentUser, 'CREATE_ROLES')}
-                    />
-            ))}
+          <CardBox className="bg-gradient-to-br from-blue-500 to-blue-600 border-none shadow-lg">
+            <div className="flex items-center justify-between text-white">
+              <div>
+                <p className="text-sm font-medium opacity-80 mb-1">Active Trials</p>
+                <h3 className="text-3xl font-bold">48</h3>
+              </div>
+              <div className="bg-white/20 p-3 rounded-lg">
+                <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
+                </svg>
+              </div>
+            </div>
+            <p className="text-white/60 text-sm mt-4">+12 from last week</p>
+          </CardBox>
+
+          <CardBox className="bg-gradient-to-br from-green-500 to-green-600 border-none shadow-lg">
+            <div className="flex items-center justify-between text-white">
+              <div>
+                <p className="text-sm font-medium opacity-80 mb-1">Completed Trials</p>
+                <h3 className="text-3xl font-bold">156</h3>
+              </div>
+              <div className="bg-white/20 p-3 rounded-lg">
+                <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+              </div>
+            </div>
+            <p className="text-white/60 text-sm mt-4">98% success rate</p>
+          </CardBox>
        </div>

-        {!!rolesWidgets.length && <hr className='my-6  ' />}
-        
-        <div id="dashboard" className='grid grid-cols-1 gap-6 lg:grid-cols-3 mb-6'>
-        
-          
-            {hasPermission(currentUser, 'READ_USERS') && <Link href={'/users/users-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">
-                              Users
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {users}
-                            </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.mdiAccountGroup || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_ROLES') && <Link href={'/roles/roles-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">
-                              Roles
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {roles}
-                            </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.mdiShieldAccountVariantOutline || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_PERMISSIONS') && <Link href={'/permissions/permissions-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">
-                              Permissions
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {permissions}
-                            </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.mdiShieldAccountOutline || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_ORGANIZATIONS') && <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>}
-          
-            {hasPermission(currentUser, 'READ_TENANTS') && <Link href={'/tenants/tenants-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">
-                              Tenants
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {tenants}
-                            </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={'mdiDomain' in icon ? icon['mdiDomain' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_FARMS') && <Link href={'/farms/farms-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">
-                              Farms
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {farms}
-                            </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={'mdiGreenhouse' in icon ? icon['mdiGreenhouse' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_TRIALS') && <Link href={'/trials/trials-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">
-                              Trials
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {trials}
-                            </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={'mdiFlask' in icon ? icon['mdiFlask' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_TRIAL_SITES') && <Link href={'/trial_sites/trial_sites-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">
-                              Trial sites
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {trial_sites}
-                            </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={'mdiMapMarker' in icon ? icon['mdiMapMarker' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_VARIETIES') && <Link href={'/varieties/varieties-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">
-                              Varieties
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {varieties}
-                            </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={'mdiSprout' in icon ? icon['mdiSprout' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_TRIAL_ENTRIES') && <Link href={'/trial_entries/trial_entries-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">
-                              Trial entries
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {trial_entries}
-                            </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={'mdiTagMultiple' in icon ? icon['mdiTagMultiple' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_PLOTS') && <Link href={'/plots/plots-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">
-                              Plots
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {plots}
-                            </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={'mdiGrid' in icon ? icon['mdiGrid' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_PLANTS') && <Link href={'/plants/plants-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">
-                              Plants
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {plants}
-                            </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={'mdiFlower' in icon ? icon['mdiFlower' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_OBSERVATION_EVENTS') && <Link href={'/observation_events/observation_events-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">
-                              Observation events
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {observation_events}
-                            </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={'mdiClipboardText' in icon ? icon['mdiClipboardText' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_TRAITS') && <Link href={'/traits/traits-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">
-                              Traits
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {traits}
-                            </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={'mdiRuler' in icon ? icon['mdiRuler' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_OBSERVATIONS') && <Link href={'/observations/observations-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">
-                              Observations
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {observations}
-                            </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={'mdiChartBellCurve' in icon ? icon['mdiChartBellCurve' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_MEDIA_ASSETS') && <Link href={'/media_assets/media_assets-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">
-                              Media assets
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {media_assets}
-                            </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={'mdiImageMultiple' in icon ? icon['mdiImageMultiple' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_REPORT_TEMPLATES') && <Link href={'/report_templates/report_templates-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">
-                              Report templates
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {report_templates}
-                            </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={'mdiFileDocumentOutline' in icon ? icon['mdiFileDocumentOutline' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_REPORTS') && <Link href={'/reports/reports-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">
-                              Reports
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {reports}
-                            </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={'mdiFileChart' in icon ? icon['mdiFileChart' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_API_CLIENTS') && <Link href={'/api_clients/api_clients-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">
-                              Api clients
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {api_clients}
-                            </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={'mdiApi' in icon ? icon['mdiApi' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-          
+        <div className="mb-6 max-w-4xl mx-auto">
+          <div className="flex items-center justify-between mb-4">
+            <h3 className="text-xl font-bold text-gray-800 dark:text-white">Recent Activities</h3>
+            <div className="flex gap-2">
+              <span className="text-sm text-gray-500">Filter by:</span>
+              <select className="text-sm border-none bg-transparent font-medium text-pavitra-600 focus:ring-0 cursor-pointer">
+                <option>All Activities</option>
+                <option>Images</option>
+                <option>Updates</option>
+              </select>
+            </div>
+          </div>
+          <ActivityFeed />
        </div>
      </SectionMain>
    </>
@ -699,4 +92,4 @@ Dashboard.getLayout = function getLayout(page: ReactElement) {
  return <LayoutAuthenticated>{page}</LayoutAuthenticated>
 }

-export default Dashboard
+export default Dashboard
--- a/frontend/src/pages/index.tsx
+++ b/frontend/src/pages/index.tsx
@ -1,166 +1,30 @@
-
-import React, { useEffect, useState } from 'react';
-import type { ReactElement } from 'react';
-import Head from 'next/head';
-import Link from 'next/link';
-import BaseButton from '../components/BaseButton';
-import CardBox from '../components/CardBox';
-import SectionFullScreen from '../components/SectionFullScreen';
-import LayoutGuest from '../layouts/Guest';
-import BaseDivider from '../components/BaseDivider';
-import BaseButtons from '../components/BaseButtons';
-import { getPageTitle } from '../config';
+import React, { useEffect } from 'react';
+import { useRouter } from 'next/router';
 import { useAppSelector } from '../stores/hooks';
-import CardBoxComponentTitle from "../components/CardBoxComponentTitle";
-import { getPexelsImage, getPexelsVideo } from '../helpers/pexels';
+import Head from 'next/head';
+import { getPageTitle } from '../config';

+export default function IndexPage() {
+    const { currentUser } = useAppSelector((state) => state.auth);
+    const router = useRouter();

-export default function Starter() {
-    const [illustrationImage, setIllustrationImage] = useState({
-        src: undefined,
-        photographer: undefined,
-        photographer_url: undefined,
-    })
-    const [illustrationVideo, setIllustrationVideo] = useState({video_files: []})
-    const [contentType, setContentType] = useState('video');
-    const [contentPosition, setContentPosition] = useState('right');
-    const textColor = useAppSelector((state) => state.style.linkColor);
-
-    const title = 'Greenhouse Trials Tracker'
-
-    // Fetch Pexels image/video
    useEffect(() => {
-        async function fetchData() {
-            const image = await getPexelsImage();
-            const video = await getPexelsVideo();
-            setIllustrationImage(image);
-            setIllustrationVideo(video);
+        if (currentUser) {
+            router.push('/dashboard');
+        } else {
+            router.push('/login');
        }
-        fetchData();
-    }, []);
+    }, [currentUser, router]);

-    const imageBlock = (image) => (
-        <div
-            className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'
-            style={{
-                backgroundImage: `${
-                    image
-                        ? `url(${image?.src?.original})`
-                        : 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
-                }`,
-                backgroundSize: 'cover',
-                backgroundPosition: 'left center',
-                backgroundRepeat: 'no-repeat',
-            }}
-        >
-            <div className='flex justify-center w-full bg-blue-300/20'>
-                <a
-                    className='text-[8px]'
-                    href={image?.photographer_url}
-                    target='_blank'
-                    rel='noreferrer'
-                >
-                    Photo by {image?.photographer} on Pexels
-                </a>
+    return (
+        <div className="min-h-screen bg-gray-100 flex items-center justify-center">
+            <Head>
+                <title>{getPageTitle('Loading...')}</title>
+            </Head>
+            <div className="flex flex-col items-center gap-4">
+                <div className="w-8 h-8 border-4 border-blue-600 border-t-transparent rounded-full animate-spin" />
+                <p className="text-gray-500 font-medium">Redirecting to system...</p>
            </div>
        </div>
    );
-
-    const videoBlock = (video) => {
-        if (video?.video_files?.length > 0) {
-            return (
-                <div className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'>
-                    <video
-                        className='absolute top-0 left-0 w-full h-full object-cover'
-                        autoPlay
-                        loop
-                        muted
-                    >
-                        <source src={video?.video_files[0]?.link} type='video/mp4'/>
-                        Your browser does not support the video tag.
-                    </video>
-                    <div className='flex justify-center w-full bg-blue-300/20 z-10'>
-                        <a
-                            className='text-[8px]'
-                            href={video?.user?.url}
-                            target='_blank'
-                            rel='noreferrer'
-                        >
-                            Video by {video.user.name} on Pexels
-                        </a>
-                    </div>
-                </div>)
-        }
-    };
-
-  return (
-      <div
-          style={
-              contentPosition === 'background'
-                  ? {
-                      backgroundImage: `${
-                          illustrationImage
-                              ? `url(${illustrationImage.src?.original})`
-                              : 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
-                      }`,
-                      backgroundSize: 'cover',
-                      backgroundPosition: 'left center',
-                      backgroundRepeat: 'no-repeat',
-                  }
-                  : {}
-          }
-      >
-      <Head>
-        <title>{getPageTitle('Starter Page')}</title>
-      </Head>
-
-      <SectionFullScreen bg='violet'>
-      <div
-          className={`flex ${
-              contentPosition === 'right' ? 'flex-row-reverse' : 'flex-row'
-          } min-h-screen w-full`}
-      >
-          {contentType === 'image' && contentPosition !== 'background'
-              ? imageBlock(illustrationImage)
-              : null}
-          {contentType === 'video' && contentPosition !== 'background'
-              ? videoBlock(illustrationVideo)
-              : null}
-          <div className='flex items-center justify-center flex-col space-y-4 w-full lg:w-full'>
-        <CardBox className='w-full md:w-3/5 lg:w-2/3'>
-            <CardBoxComponentTitle title="Welcome to your Greenhouse Trials Tracker app!"/>
-        
-            <div className="space-y-3">
-                <p className='text-center text-gray-500'>This is a React.js/Node.js app generated by the <a className={`${textColor}`} href="https://flatlogic.com/generator">Flatlogic Web App Generator</a></p>
-                <p className='text-center text-gray-500'>For guides and documentation please check
-                    your local README.md and the <a className={`${textColor}`} href="https://flatlogic.com/documentation">Flatlogic documentation</a></p>
-            </div>
-        
-            <BaseButtons>
-                <BaseButton
-                    href='/login'
-                    label='Login'
-                    color='info'
-                    className='w-full'
-                />
-
-            </BaseButtons>
-        </CardBox>
-        </div>
-      </div>
-      </SectionFullScreen>
-      <div className='bg-black text-white flex flex-col text-center justify-center md:flex-row'>
-        <p className='py-6 text-sm'>© 2026 <span>{title}</span>. All rights reserved</p>
-        <Link className='py-6 ml-4 text-sm' href='/privacy-policy/'>
-            Privacy Policy
-        </Link>
-      </div>
-
-    </div>
-  );
 }
-
-Starter.getLayout = function getLayout(page: ReactElement) {
-  return <LayoutGuest>{page}</LayoutGuest>;
-};
-
--- a/frontend/src/pages/login.tsx
+++ b/frontend/src/pages/login.tsx
@ -1,12 +1,10 @@
-
-
 import React, { useEffect, useState } from 'react';
 import type { ReactElement } from 'react';
 import Head from 'next/head';
 import BaseButton from '../components/BaseButton';
 import CardBox from '../components/CardBox';
 import BaseIcon from "../components/BaseIcon";
-import { mdiInformation, mdiEye, mdiEyeOff } from '@mdi/js';
+import { mdiInformation, mdiEye, mdiEyeOff, mdiViewDashboard } from '@mdi/js';
 import SectionFullScreen from '../components/SectionFullScreen';
 import LayoutGuest from '../layouts/Guest';
 import { Field, Form, Formik } from 'formik';
@ -20,7 +18,6 @@ import { findMe, loginUser, resetAction } from '../stores/authSlice';
 import { useAppDispatch, useAppSelector } from '../stores/hooks';
 import Link from 'next/link';
 import {toast, ToastContainer} from "react-toastify";
-import { getPexelsImage, getPexelsVideo } from '../helpers/pexels'

 export default function Login() {
  const router = useRouter();
@ -28,15 +25,7 @@ export default function Login() {
  const textColor = useAppSelector((state) => state.style.linkColor);
  const iconsColor = useAppSelector((state) => state.style.iconsColor);
  const notify = (type, msg) => toast(msg, { type });
-  const [ illustrationImage, setIllustrationImage ] = useState({
-      src: undefined,
-      photographer: undefined,
-      photographer_url: undefined,
-  })
-  const [ illustrationVideo, setIllustrationVideo ] = useState({video_files: []})
-    const [contentType, setContentType] = useState('video');
-    const [contentPosition, setContentPosition] = useState('right');
-    const [showPassword, setShowPassword] = useState(false);
+  const [showPassword, setShowPassword] = useState(false);
  const { currentUser, isFetching, errorMessage, token, notify:notifyState } = useAppSelector(
    (state) => state.auth,
  );
@ -44,37 +33,29 @@ export default function Login() {
    password: 'db9589f7',
    remember: true })

-  const title = 'Greenhouse Trials Tracker'
+  const title = 'TrialTracker ERP'

-  // Fetch Pexels image/video
-  useEffect( () => {
-      async function fetchData() {
-          const image = await getPexelsImage()
-          const video = await getPexelsVideo()
-          setIllustrationImage(image);
-          setIllustrationVideo(video);
-      }
-      fetchData();
-  }, []);
  // Fetch user data
  useEffect(() => {
    if (token) {
      dispatch(findMe());
    }
  }, [token, dispatch]);
+  
  // Redirect to dashboard if user is logged in
  useEffect(() => {
    if (currentUser?.id) {
      router.push('/dashboard');
    }
  }, [currentUser?.id, router]);
+
  // Show error message if there is one
  useEffect(() => {
    if (errorMessage){
      notify('error', errorMessage)
    }
-
  }, [errorMessage])
+
  // Show notification if there is one
  useEffect(() => {
      if (notifyState?.showNotification) {
@ -100,178 +81,95 @@ export default function Login() {
      }));
  };

-  const imageBlock = (image) => (
-      <div className="hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3"
-           style={{
-               backgroundImage: `${image ? `url(${image.src?.original})` : 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'}`,
-               backgroundSize: 'cover',
-               backgroundPosition: 'left center',
-               backgroundRepeat: 'no-repeat',
-           }}>
-          <div className="flex justify-center w-full bg-blue-300/20">
-              <a className="text-[8px]" href={image?.photographer_url} target="_blank" rel="noreferrer">Photo
-                  by {image?.photographer} on Pexels</a>
-          </div>
-      </div>
-  )
-
-  const videoBlock = (video) => {
-      if (video?.video_files?.length > 0) {
-          return (
-              <div className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'>
-                  <video
-                      className='absolute top-0 left-0 w-full h-full object-cover'
-                      autoPlay
-                      loop
-                      muted
-                  >
-                      <source src={video.video_files[0]?.link} type='video/mp4'/>
-                      Your browser does not support the video tag.
-                  </video>
-                  <div className='flex justify-center w-full bg-blue-300/20 z-10'>
-                      <a
-                          className='text-[8px]'
-                          href={video.user.url}
-                          target='_blank'
-                          rel='noreferrer'
-                      >
-                          Video by {video.user.name} on Pexels
-                      </a>
-                  </div>
-              </div>)
-      }
-  };
-
  return (
-      <div style={contentPosition === 'background' ? {
-          backgroundImage: `${
-              illustrationImage
-                  ? `url(${illustrationImage.src?.original})`
-                  : 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
-          }`,
-          backgroundSize: 'cover',
-          backgroundPosition: 'left center',
-          backgroundRepeat: 'no-repeat',
-      } : {}}>
+      <div className="bg-gray-50 min-h-screen font-sans">
        <Head>
          <title>{getPageTitle('Login')}</title>
        </Head>

-        <SectionFullScreen bg='violet'>
-          <div className={`flex ${contentPosition === 'right' ? 'flex-row-reverse' : 'flex-row'} min-h-screen w-full`}>
-            {contentType === 'image' && contentPosition !== 'background' ? imageBlock(illustrationImage) : null}
-            {contentType === 'video' && contentPosition !== 'background' ? videoBlock(illustrationVideo) : null}
-            <div className='flex items-center justify-center flex-col space-y-4 w-full lg:w-full'>
-              
-                <CardBox id="loginRoles" className='w-full md:w-3/5 lg:w-2/3'>
-                 
-                    <h2 className="text-4xl font-semibold my-4">{title}</h2>
-                    
-                    <div className='flex flex-row text-gray-500 justify-between'>
-                        <div>
-                          
-                            <p className='mb-2'>Use{' '}
-                                <code className={`cursor-pointer ${textColor} `}
-                                      data-password="db9589f7"
-                                      onClick={(e) => setLogin(e.target)}>super_admin@flatlogic.com</code>{' / '}
-                                <code className={`${textColor}`}>db9589f7</code>{' / '}
-                                to login as Super Admin</p>
-                          
-                            <p className='mb-2'>Use{' '}
-                                <code className={`cursor-pointer ${textColor} `}
-                                      data-password="db9589f7"
-                                      onClick={(e) => setLogin(e.target)}>admin@flatlogic.com</code>{' / '}
-                                <code className={`${textColor}`}>db9589f7</code>{' / '}
-                                to login as Admin</p>
-                            <p>Use <code
-                                className={`cursor-pointer ${textColor} `}
-                                data-password="259e6bfdf548"
-                                onClick={(e) => setLogin(e.target)}>client@hello.com</code>{' / '}
-                                <code className={`${textColor}`}>259e6bfdf548</code>{' / '}
-                                to login as User</p>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w='w-16'
-                                h='h-16'
-                                size={48}
-                                path={mdiInformation}
-                            />
-                        </div>
+        <div className="flex flex-col items-center justify-center min-h-screen p-6">
+            <div className="w-full max-w-md space-y-8">
+                <div className="text-center mb-8">
+                    <div className="inline-flex items-center justify-center w-16 h-16 rounded-xl bg-blue-600 text-white mb-4 shadow-lg">
+                        <BaseIcon path={mdiViewDashboard} size={36} />
                    </div>
-                </CardBox>
-              
-                <CardBox className='w-full md:w-3/5 lg:w-2/3'>
+                    <h2 className="text-3xl font-extrabold text-gray-900 tracking-tight">{title}</h2>
+                    <p className="mt-2 text-sm text-gray-500 font-medium">Enterprise Breeding & Trial Management</p>
+                </div>
+
+                <CardBox className="shadow-xl border-gray-100">
                    <Formik
                        initialValues={initialValues}
                        enableReinitialize
                        onSubmit={(values) => handleSubmit(values)}
                    >
-                        <Form>
+                        <Form className="space-y-4">
                            <FormField
-                                label='Login'
-                                 help='Please enter your login'>
-                                <Field name='email' />
+                                label='Email Address'
+                                labelColor="text-gray-700"
+                                 help='Enter your registered enterprise email'>
+                                <Field name='email' placeholder="name@company.com" className="focus:ring-blue-500 border-gray-300" />
                            </FormField>

                            <div className='relative'>
                                <FormField
                                    label='Password'
-                                     help='Please enter your password'>
-                                    <Field name='password' type={showPassword ? 'text' : 'password'} />
+                                    labelColor="text-gray-700"
+                                     help='Enter your secure password'>
+                                    <Field name='password' type={showPassword ? 'text' : 'password'} className="focus:ring-blue-500 border-gray-300" />
                                </FormField>
                                <div
-                                    className='absolute bottom-8 right-0 pr-3 flex items-center cursor-pointer'
+                                    className='absolute top-9 right-0 pr-3 flex items-center cursor-pointer'
                                    onClick={togglePasswordVisibility}
                                >
                                    <BaseIcon
-                                        className='text-gray-500 hover:text-gray-700'
+                                        className='text-gray-400 hover:text-gray-600'
                                        size={20}
                                        path={showPassword ? mdiEyeOff : mdiEye}
                                    />
                                </div>
                            </div>

-                            <div className={'flex justify-between'}>
-                                <FormCheckRadio type='checkbox' label='Remember'>
+                            <div className={'flex justify-between items-center text-sm'}>
+                                <FormCheckRadio type='checkbox' label='Stay logged in'>
                                    <Field type='checkbox' name='remember' />
                                </FormCheckRadio>

-                                <Link className={`${textColor} text-blue-600`} href={'/forgot'}>
+                                <Link className="font-semibold text-blue-600 hover:text-blue-700" href={'/forgot'}>
                                    Forgot password?
                                </Link>
                            </div>

-                            <BaseDivider />
-
-                            <BaseButtons>
+                            <div className="pt-2">
                                <BaseButton
-                                    className={'w-full'}
+                                    className={'w-full py-3 font-bold text-lg'}
                                    type='submit'
-                                    label={isFetching ? 'Loading...' : 'Login'}
+                                    label={isFetching ? 'Authenticating...' : 'Sign In'}
                                    color='info'
                                    disabled={isFetching}
                                />
-                            </BaseButtons>
-                            <br />
-                            <p className={'text-center'}>
-                                Don’t have an account yet?{' '}
-                                <Link className={`${textColor}`} href={'/register'}>
-                                    New Account
-                                </Link>
-                            </p>
+                            </div>
                        </Form>
                    </Formik>
                </CardBox>
+
+                <div className="bg-blue-50 border border-blue-100 rounded-xl p-4 text-sm text-blue-800">
+                    <div className="flex gap-3">
+                        <BaseIcon path={mdiInformation} size={20} className="text-blue-500 flex-shrink-0" />
+                        <div>
+                            <p className="font-bold mb-1">Quick Access for Review:</p>
+                            <div className="space-y-1 opacity-90">
+                                <p>Admin: <code className="cursor-pointer font-bold underline" onClick={(e) => setLogin(e.target)} data-password="db9589f7">admin@flatlogic.com</code></p>
+                                <p>Staff: <code className="cursor-pointer font-bold underline" onClick={(e) => setLogin(e.target)} data-password="259e6bfdf548">client@hello.com</code></p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div className="text-center text-gray-400 text-xs">
+                    <p>© 2026 {title}. Confidential & Proprietary.</p>
+                </div>
            </div>
-          </div>
-        </SectionFullScreen>
-        <div className='bg-black text-white flex flex-col text-center justify-center md:flex-row'>
-          <p className='py-6 text-sm'>© 2026 <span>{title}</span>. © All rights reserved</p>
-          <Link className='py-6 ml-4 text-sm' href='/privacy-policy/'>
-              Privacy Policy
-          </Link>
        </div>
        <ToastContainer />
      </div>
@ -280,4 +178,4 @@ export default function Login() {

 Login.getLayout = function getLayout(page: ReactElement) {
  return <LayoutGuest>{page}</LayoutGuest>;
-};
+};
--- a/frontend/src/pages/projects/[id].tsx
+++ b/frontend/src/pages/projects/[id].tsx
@ -0,0 +1,194 @@
+import { mdiChartTimelineVariant, mdiArrowLeft } from '@mdi/js'
+import Head from 'next/head'
+import React, { ReactElement, useEffect, 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 { 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 FormFilePicker from '../../components/FormFilePicker'
+import { SelectField } from '../../components/SelectField'
+import { SelectFieldMany } from "../../components/SelectFieldMany";
+import { RichTextField } from "../../components/RichTextField";
+import { create, update, fetch } from '../../stores/projects/projectsSlice'
+import { useAppDispatch, useAppSelector } from '../../stores/hooks'
+import { useRouter } from 'next/router'
+import moment from 'moment';
+import { hasPermission } from "../../helpers/userPermissions";
+
+const ProjectsForm = () => {
+  const router = useRouter()
+  const dispatch = useAppDispatch()
+  const { id } = router.query
+  const isNew = id === 'new'
+  
+  const { projects: projectData, loading } = useAppSelector((state) => state.projects)
+  const [initialValues, setInitialValues] = useState({
+    name: '',
+    status: 'active',
+    description: '',
+    startDate: '',
+    endDate: '',
+    trials: [],
+    documentation: [],
+    tenant: '', // Optional/Tenant logic
+    organizations: '', // Optional/Org logic
+  })
+
+  useEffect(() => {
+    if (id && !isNew) {
+      dispatch(fetch({ id }))
+    }
+  }, [id, isNew, dispatch])
+
+  useEffect(() => {
+    if (!isNew && projectData && projectData.id === id) {
+       setInitialValues({
+         name: projectData.name || '',
+         status: projectData.status || 'active',
+         description: projectData.description || '',
+         startDate: projectData.startDate ? moment(projectData.startDate).format('YYYY-MM-DDTHH:mm') : '',
+         endDate: projectData.endDate ? moment(projectData.endDate).format('YYYY-MM-DDTHH:mm') : '',
+         trials: projectData.trials || [],
+         documentation: projectData.documentation || [],
+         tenant: projectData.tenant?.id || '',
+         organizations: projectData.organizations?.id || '',
+       })
+    }
+  }, [projectData, id, isNew])
+
+  const handleSubmit = async (values) => {
+    try {
+      if (isNew) {
+        await dispatch(create(values)).unwrap()
+      } else {
+        await dispatch(update({ id, data: values })).unwrap()
+      }
+      await router.push('/projects/projects-list')
+    } catch (error) {
+      console.error('Failed to save project:', error)
+    }
+  }
+
+  const title = isNew ? 'New Project' : 'Edit Project'
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle(title)}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={title} main>
+            <BaseButton
+                href={'/projects/projects-list'}
+                icon={mdiArrowLeft}
+                color="whiteDark"
+                label="Back"
+                roundedFull
+                small
+            />
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            {({ values, setFieldValue }) => (
+            <Form>
+              <FormField label="Name" labelFor="name">
+                  <Field name="name" placeholder="Project Name" id="name" />
+              </FormField>
+
+              <FormField label="Status" labelFor="status">
+                  <Field name="status" id="status" component="select">
+                    <option value="active">Active</option>
+                    <option value="completed">Completed</option>
+                    <option value="archived">Archived</option>
+                  </Field>
+              </FormField>
+
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <FormField label="Start Date" labelFor="startDate">
+                      <Field
+                          type="datetime-local"
+                          name="startDate"
+                          id="startDate"
+                      />
+                  </FormField>
+
+                  <FormField label="Finish Date" labelFor="endDate">
+                      <Field
+                          type="datetime-local"
+                          name="endDate"
+                          id="endDate"
+                      />
+                  </FormField>
+              </div>
+
+              <FormField label='Description' hasTextareaHeight>
+                  <Field
+                      name='description'
+                      id='description'
+                      component={RichTextField}
+                  ></Field>
+              </FormField>
+
+              <FormField label='Associated Trials' labelFor='trials'>
+                  <Field
+                      name='trials'
+                      id='trials'
+                      itemRef={'trials'}
+                      options={[]}
+                      component={SelectFieldMany}>
+                  </Field>
+              </FormField>
+              
+              <FormField label="Supporting Documentation" labelFor="documentation">
+                  <Field
+                    component={FormFilePicker}
+                    path="projects/documentation" // Path for upload
+                    name="documentation"
+                    field={{ name: 'documentation', value: values.documentation }}
+                    form={{ setFieldValue }}
+                    schema={{
+                        size: 1024 * 1024 * 10, // 10MB
+                        formats: [ 'application/pdf', 'image/jpeg', 'image/png', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'text/csv', 'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ]
+                    }}
+                    accept="*"
+                    label="Upload File"
+                    color="info"
+                  />
+              </FormField>
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type="submit" color="info" label="Submit" loading={loading} />
+                <BaseButton type="reset" color="info" outline label="Reset" />
+                <BaseButton type='button' color='danger' outline label='Cancel' onClick={() => router.push('/projects/projects-list')}/>
+              </BaseButtons>
+            </Form>
+            )}
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  )
+}
+
+ProjectsForm.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+          permission={'READ_PROJECTS'} // Or CREATE/UPDATE depending on mode, but READ is safer base
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default ProjectsForm
--- a/frontend/src/pages/projects/index.tsx
+++ b/frontend/src/pages/projects/index.tsx
@ -0,0 +1,14 @@
+import React, { useEffect } from 'react';
+import { useRouter } from 'next/router';
+
+const ProjectsIndex = () => {
+  const router = useRouter();
+
+  useEffect(() => {
+    router.replace('/projects/projects-list');
+  }, [router]);
+
+  return null;
+};
+
+export default ProjectsIndex;
--- a/frontend/src/pages/projects/projects-list.tsx
+++ b/frontend/src/pages/projects/projects-list.tsx
@ -0,0 +1,149 @@
+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 TableProjects from '../../components/Projects/TableProjects'
+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} from '../../stores/projects/projectsSlice'; // Assuming uploadCsv exists or we skip CSV for now
+import {hasPermission} from "../../helpers/userPermissions";
+
+const ProjectsListPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  
+  const { currentUser } = useAppSelector((state) => state.auth);
+  
+  const dispatch = useAppDispatch();
+
+  const [filters] = useState([
+      {label: 'Name', title: 'name'},
+      {label: 'Status', title: 'status', type: 'enum', options: ['active','completed','archived']},
+      {label: 'Start Date', title: 'startDate', date: 'true'},
+      {label: 'Finish Date', title: 'endDate', date: 'true'},
+  ]);
+    
+  const hasCreatePermission = currentUser && hasPermission(currentUser, 'CREATE_PROJECTS');
+    
+    const addFilter = () => {
+        const newItem = {
+            id: uniqueId(),
+            fields: {
+                filterValue: '',
+                filterValueFrom: '',
+                filterValueTo: '',
+                selectedField: '',
+            },
+        };
+        newItem.fields.selectedField = filters[0].title;
+        setFilterItems([...filterItems, newItem]);
+    };
+
+    const getProjectsCSV = async () => {
+        const response = await axios({url: '/projects?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 = 'projects.csv'
+        link.click()
+    };
+
+    const onModalConfirm = async () => {
+        if (!csvFile) return;
+        // await dispatch(uploadCsv(csvFile)); // Not implemented in slice yet, skipping
+        // dispatch(setRefetch(true));
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+    const onModalCancel = () => {
+        setCsvFile(null);
+        setIsModalActive(false);
+    };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Projects')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Projects" main>
+        {''}
+        </SectionTitleLineWithButton>
+        <CardBox   className='mb-6' cardBoxClassName='flex flex-wrap'>
+          
+            {hasCreatePermission && <BaseButton className={'mr-3'} href={'/projects/new'} color='info' label='New Project'/>}
+          
+          <BaseButton
+              className={'mr-3'}
+              color='info'
+              label='Filter'
+              onClick={addFilter}
+          />
+          <BaseButton className={'mr-3'} color='info' label='Download CSV' onClick={getProjectsCSV} />
+          
+          {/* CSV Upload skipped for now until slice supports it */}
+          {/* 
+            {hasCreatePermission && (
+              <BaseButton
+                color='info'
+                label='Upload CSV'
+                onClick={() => setIsModalActive(true)}
+              />
+            )}
+           */}
+          
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+          </div>  
+          
+        </CardBox>
+        
+        <CardBox className="mb-6" hasTable>
+          <TableProjects
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            />
+        </CardBox>
+        
+      </SectionMain>
+      <CardBoxModal
+          title='Upload CSV'
+          buttonColor='info'
+          buttonLabel={'Confirm'}
+          isActive={isModalActive}
+          onConfirm={onModalConfirm}
+          onCancel={onModalCancel}
+      >
+          <DragDropFilePicker
+              file={csvFile}
+              setFile={setCsvFile}
+              formats={'.csv'}
+          />
+      </CardBoxModal>
+    </>
+  )
+}
+
+ProjectsListPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+      <LayoutAuthenticated
+        permission={'READ_PROJECTS'}
+      >
+          {page}
+      </LayoutAuthenticated>
+  )
+}
+
+export default ProjectsListPage
--- a/frontend/src/pages/search.tsx
+++ b/frontend/src/pages/search.tsx
@ -1,9 +1,7 @@
 import React, { ReactElement, useEffect, useState } from 'react';
 import Head from 'next/head';
 import 'react-datepicker/dist/react-datepicker.css';
-import { useAppDispatch } from '../stores/hooks';
-
-import { useAppSelector } from '../stores/hooks';
+import { useAppDispatch, useAppSelector } from '../stores/hooks';

 import { useRouter } from 'next/router';
 import LayoutAuthenticated from '../layouts/Authenticated';
@ -93,4 +91,4 @@ SearchView.getLayout = function getLayout(page: ReactElement) {
  );
 };

-export default SearchView;
+export default SearchView;
--- a/frontend/src/stores/projects/projectsSlice.ts
+++ b/frontend/src/stores/projects/projectsSlice.ts
@ -0,0 +1,185 @@
+
+import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit'
+import axios from 'axios'
+import {fulfilledNotify, rejectNotify, resetNotify} from "../../helpers/notifyStateHandler";
+
+interface MainState {
+    projects: any
+    loading: boolean
+    count: number
+    refetch: boolean;
+    notify: {
+        showNotification: boolean
+        textNotification: string
+        typeNotification: string
+    }
+}
+
+const initialState: MainState = {
+    projects: [],
+    loading: false,
+    count: 0,
+    refetch: false,
+    notify: {
+        showNotification: false,
+        textNotification: '',
+        typeNotification: 'warn',
+    },
+}
+
+export const fetch = createAsyncThunk('projects/fetch', async (data: any) => {
+    const { id, query } = data
+    const result = await axios.get(
+        `projects${
+            query || (id ? `/${id}` : '')
+        }`
+    )
+    return id ? result.data : {rows: result.data.rows, count: result.data.count};
+})
+
+export const deleteItemsByIds = createAsyncThunk(
+  'projects/deleteByIds',
+  async (data: any, { rejectWithValue }) => {
+    try {
+      await axios.post('projects/deleteByIds', { data });
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const deleteItem = createAsyncThunk('projects/deleteItem', async (id: string, { rejectWithValue }) => {
+    try {
+        await axios.delete(`projects/${id}`)
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+        return rejectWithValue(error.response.data);
+    }
+})
+
+export const create = createAsyncThunk('projects/create', async (data: any, { rejectWithValue }) => {
+    try {
+        const result = await axios.post(
+          'projects',
+          { data }
+        )
+        return result.data
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+        return rejectWithValue(error.response.data);
+    }
+})
+
+export const update = createAsyncThunk('projects/update', async (payload: any, { rejectWithValue }) => {
+    try {
+        const result = await axios.put(
+          `projects/${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 projectsSlice = createSlice({
+    name: 'projects',
+    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.projects = action.payload.rows;
+                state.count = action.payload.count;
+            } else {
+                state.projects = 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, 'Projects 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, `Project 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, `Project created`);
+        })
+
+        builder.addCase(update.pending, (state) => {
+            state.loading = true
+            resetNotify(state);
+        })
+        builder.addCase(update.fulfilled, (state) => {
+            state.loading = false
+            fulfilledNotify(state, `Project updated`);
+        })
+        builder.addCase(update.rejected, (state, action) => {
+            state.loading = false
+            rejectNotify(state, action);
+        })
+    },
+})
+
+export const { setRefetch } = projectsSlice.actions
+
+export default projectsSlice.reducer
--- a/frontend/src/stores/store.ts
+++ b/frontend/src/stores/store.ts
@ -11,6 +11,7 @@ import organizationsSlice from "./organizations/organizationsSlice";
 import tenantsSlice from "./tenants/tenantsSlice";
 import farmsSlice from "./farms/farmsSlice";
 import trialsSlice from "./trials/trialsSlice";
+import projectsSlice from "./projects/projectsSlice";
 import trial_sitesSlice from "./trial_sites/trial_sitesSlice";
 import varietiesSlice from "./varieties/varietiesSlice";
 import trial_entriesSlice from "./trial_entries/trial_entriesSlice";
@ -38,6 +39,7 @@ organizations: organizationsSlice,
 tenants: tenantsSlice,
 farms: farmsSlice,
 trials: trialsSlice,
+projects: projectsSlice,
 trial_sites: trial_sitesSlice,
 varieties: varietiesSlice,
 trial_entries: trial_entriesSlice,
@ -56,4 +58,4 @@ api_clients: api_clientsSlice,
 // Infer the `RootState` and `AppDispatch` types from the store itself
 export type RootState = ReturnType<typeof store.getState>
 // Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
-export type AppDispatch = typeof store.dispatch
+export type AppDispatch = typeof store.dispatch
--- a/frontend/src/styles.ts
+++ b/frontend/src/styles.ts
@ -25,27 +25,27 @@ interface StyleObject {
 }

 export const white: StyleObject = {
-  aside: 'bg-white dark:text-white',
+  aside: 'bg-white dark:text-white border-r border-gray-200',
  asideScrollbars: 'aside-scrollbars-light',
-  asideBrand: '',
-  asideMenuItem: 'text-gray-700 hover:bg-gray-100/70 dark:text-dark-500 dark:hover:text-white dark:hover:bg-dark-800',
-  asideMenuItemActive: 'font-bold text-black dark:text-white',
-  asideMenuDropdown: 'bg-gray-100/75',
-  navBarItemLabel: 'text-blue-600',
-  navBarItemLabelHover: 'hover:text-black',
-  navBarItemLabelActiveColor: 'text-black',
+  asideBrand: 'border-b border-gray-200',
+  asideMenuItem: 'text-gray-600 hover:bg-blue-50 hover:text-blue-700 dark:text-dark-500 dark:hover:text-white dark:hover:bg-dark-800',
+  asideMenuItemActive: 'font-bold text-blue-700 bg-blue-50/50 dark:text-white',
+  asideMenuDropdown: 'bg-gray-50',
+  navBarItemLabel: 'text-gray-600',
+  navBarItemLabelHover: 'hover:text-blue-700',
+  navBarItemLabelActiveColor: 'text-blue-700',
  overlay: 'from-white via-gray-100 to-white',
-  activeLinkColor: 'bg-gray-100/70',
-  bgLayoutColor: 'bg-gray-50',
-  iconsColor: 'text-blue-500',
+  activeLinkColor: 'bg-blue-50/50',
+  bgLayoutColor: 'bg-gray-100/50',
+  iconsColor: 'text-blue-600',
  cardsColor: 'bg-white',
-  focusRingColor: 'focus:ring focus:ring-blue-600 focus:border-blue-600 focus:outline-none border-gray-300 dark:focus:ring-blue-600 dark:focus:border-blue-600',
-  corners: 'rounded',
-  cardsStyle: 'bg-white border border-pavitra-400',
+  focusRingColor: 'focus:ring-2 focus:ring-blue-600/20 focus:border-blue-600 focus:outline-none border-gray-300 dark:focus:ring-blue-600 dark:focus:border-blue-600',
+  corners: 'rounded-lg',
+  cardsStyle: 'bg-white border border-gray-200 shadow-sm',
  linkColor: 'text-blue-600',
  websiteHeder: 'border-b border-gray-200',
  borders: 'border-gray-200',
-  shadow: '', 
+  shadow: 'shadow-sm', 
  websiteSectionStyle: '',
  textSecondary: 'text-gray-500',
 }
@ -57,51 +57,50 @@ export const white: StyleObject = {
 export const dataGridStyles = {
  '& .MuiDataGrid-cell': {
    paddingX: 3,
-    border: 'none',
+    borderBottom: '1px solid #f3f4f6',
  },
  '& .MuiDataGrid-columnHeader': {
    paddingX: 3,
+    backgroundColor: '#f9fafb',
+    fontWeight: 'bold',
  },
  '& .MuiDataGrid-columnHeaderCheckbox': {
    paddingX: 0,
  },
  '& .MuiDataGrid-columnHeaders': {
-    paddingY: 4,
-    borderStartStartRadius: 7,
-    borderStartEndRadius: 7,
+    borderBottom: '2px solid #e5e7eb',
  },
  '& .MuiDataGrid-footerContainer': {
-    paddingY: 0.5,
-    borderEndStartRadius: 7,
-    borderEndEndRadius: 7,
+    borderTop: '1px solid #e5e7eb',
  },
  '& .MuiDataGrid-root': {
-    border: 'none',
+    border: '1px solid #e5e7eb',
+    borderRadius: '8px',
  },
 };

 export const basic: StyleObject = {
-    aside: 'bg-gray-800',
+    aside: 'bg-slate-900',
    asideScrollbars: 'aside-scrollbars-gray',
-    asideBrand: 'bg-gray-900 text-white',
-    asideMenuItem: 'text-gray-300 hover:text-white',
-    asideMenuItemActive: 'font-bold text-white',
-    asideMenuDropdown: 'bg-gray-700/50',
-    navBarItemLabel: 'text-black',
-    navBarItemLabelHover: 'hover:text-blue-500',
+    asideBrand: 'bg-slate-900 text-white border-b border-slate-800',
+    asideMenuItem: 'text-slate-400 hover:text-white hover:bg-slate-800/50',
+    asideMenuItemActive: 'font-bold text-white bg-blue-600/10',
+    asideMenuDropdown: 'bg-slate-800/40',
+    navBarItemLabel: 'text-slate-600',
+    navBarItemLabelHover: 'hover:text-blue-600',
    navBarItemLabelActiveColor: 'text-blue-600',
-    overlay: 'from-gray-700 via-gray-900 to-gray-700',
-    activeLinkColor: 'bg-gray-100/70',
-    bgLayoutColor: 'bg-gray-50',
-    iconsColor: 'text-blue-500',
+    overlay: 'from-slate-700 via-slate-900 to-slate-700',
+    activeLinkColor: 'bg-blue-600/10',
+    bgLayoutColor: 'bg-slate-50',
+    iconsColor: 'text-blue-600',
    cardsColor: 'bg-white',
-    focusRingColor: 'focus:ring focus:ring-blue-600 focus:border-blue-600 focus:outline-none dark:focus:ring-blue-600 border-gray-300 dark:focus:border-blue-600',
-    corners: 'rounded',
-    cardsStyle: 'bg-white border border-pavitra-400',
-    linkColor: 'text-black',
-    websiteHeder: '',
-    borders: '',
-    shadow: '',
+    focusRingColor: 'focus:ring-2 focus:ring-blue-600/20 focus:border-blue-600 focus:outline-none dark:focus:ring-blue-600 border-gray-200 dark:focus:border-blue-600',
+    corners: 'rounded-lg',
+    cardsStyle: 'bg-white border border-slate-200 shadow-sm',
+    linkColor: 'text-blue-600',
+    websiteHeder: 'border-b border-slate-200',
+    borders: 'border-slate-200',
+    shadow: 'shadow-sm',
    websiteSectionStyle: '',
-    textSecondary: '',
-}
+    textSecondary: 'text-slate-500',
+}