admin/38697-vm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

merge into: admin:master
Branches Tags
admin:master
admin:ai-dev
...
pull from: admin:ai-dev
Branches Tags
admin:ai-dev
admin:master

2 Commits
master ... ai-dev

Author SHA1 Message Date
Flatlogic Bot
84db90e7f3 Autosave: 20260223-002254 2026-02-23 00:22:54 +00:00
Flatlogic Bot
249c697601 Autosave: 20260222-225400 2026-02-22 22:54:00 +00:00
62 changed files with 3119 additions and 7166 deletions
Show Stats Expand all files Collapse all files

4
backend/src/db/api/activity_feed_items.js
View File

@ -348,6 +348,10 @@ module.exports = class Activity_feed_itemsDBApi {
where.organizationsId = options.currentUser.organizationsId;
}
}
if (options?.currentUser?.tenantId) {
where.tenantId = options.currentUser.tenantId;
}
offset = currentPage * limit;

4
backend/src/db/api/form_field_choices.js
View File

@ -298,6 +298,10 @@ module.exports = class Form_field_choicesDBApi {
where.organizationsId = options.currentUser.organizationsId;
}
}
if (options?.currentUser?.tenantId) {
where.tenantId = options.currentUser.tenantId;
}
offset = currentPage * limit;

4
backend/src/db/api/form_fields.js
View File

@ -362,6 +362,10 @@ module.exports = class Form_fieldsDBApi {
where.organizationsId = options.currentUser.organizationsId;
}
}
if (options?.currentUser?.tenantId) {
where.tenantId = options.currentUser.tenantId;
}
offset = currentPage * limit;

4
backend/src/db/api/form_submissions.js
View File

@ -412,6 +412,10 @@ module.exports = class Form_submissionsDBApi {
where.organizationsId = options.currentUser.organizationsId;
}
}
if (options?.currentUser?.tenantId) {
where.tenantId = options.currentUser.tenantId;
}
offset = currentPage * limit;

4
backend/src/db/api/form_templates.js
View File

@ -314,6 +314,10 @@ module.exports = class Form_templatesDBApi {
where.organizationsId = options.currentUser.organizationsId;
}
}
if (options?.currentUser?.tenantId) {
where.tenantId = options.currentUser.tenantId;
}
offset = currentPage * limit;

4
backend/src/db/api/locations.js
View File

@ -349,6 +349,10 @@ module.exports = class LocationsDBApi {
where.organizationsId = options.currentUser.organizationsId;
}
}
if (options?.currentUser?.tenantId) {
where.tenantId = options.currentUser.tenantId;
}
offset = currentPage * limit;

34
backend/src/db/api/organizations.js
View File

@ -1,4 +1,3 @@
const db = require('../models');
const FileDBApi = require('./file');
const crypto = require('crypto');
@ -25,6 +24,13 @@ module.exports = class OrganizationsDBApi {
||
null
,
address: data.address || null,
city: data.city || null,
state: data.state || null,
country: data.country || null,
zip: data.zip || null,
navOrientation: data.navOrientation || 'top',
defaultView: data.defaultView || 'list',
importHash: data.importHash || null,
createdById: currentUser.id,
@ -55,7 +61,14 @@ module.exports = class OrganizationsDBApi {
||
null
,
address: item.address || null,
city: item.city || null,
state: item.state || null,
country: item.country || null,
zip: item.zip || null,
navOrientation: item.navOrientation || 'top',
defaultView: item.defaultView || 'list',
importHash: item.importHash || null,
createdById: currentUser.id,
updatedById: currentUser.id,
@ -74,9 +87,9 @@ module.exports = class OrganizationsDBApi {
static async update(id, data, options) {
const currentUser = (options && options.currentUser) || {id: null};
const transaction = (options && options.transaction) || undefined;
const globalAccess = currentUser.app_role?.globalAccess;
// const globalAccess = currentUser.app_role?.globalAccess;
const organizations = await db.organizations.findByPk(id, {}, {transaction});
const organizations = await db.organizations.findByPk(id, { transaction });
@ -84,6 +97,13 @@ module.exports = class OrganizationsDBApi {
const updatePayload = {};
if (data.name !== undefined) updatePayload.name = data.name;
if (data.address !== undefined) updatePayload.address = data.address;
if (data.city !== undefined) updatePayload.city = data.city;
if (data.state !== undefined) updatePayload.state = data.state;
if (data.country !== undefined) updatePayload.country = data.country;
if (data.zip !== undefined) updatePayload.zip = data.zip;
if (data.navOrientation !== undefined) updatePayload.navOrientation = data.navOrientation;
if (data.defaultView !== undefined) updatePayload.defaultView = data.defaultView;
updatePayload.updatedById = currentUser.id;
@ -153,8 +173,7 @@ module.exports = class OrganizationsDBApi {
const transaction = (options && options.transaction) || undefined;
const organizations = await db.organizations.findOne(
{ where },
{ transaction },
{ where, transaction },
);
if (!organizations) {
@ -407,5 +426,4 @@ module.exports = class OrganizationsDBApi {
}
};
};

76
backend/src/db/api/projects.js
View File

@ -1,7 +1,5 @@
const db = require('../models');
const FileDBApi = require('./file');
const crypto = require('crypto');
const Utils = require('../utils');
@ -30,6 +28,11 @@ module.exports = class ProjectsDBApi {
||
null
,
insights: data.insights
||
null
,
start_date: data.start_date
||
@ -111,6 +114,11 @@ module.exports = class ProjectsDBApi {
description: item.description
||
null
,
insights: item.insights
||
null
,
start_date: item.start_date
@ -149,9 +157,6 @@ module.exports = class ProjectsDBApi {
data[i].attachments,
options,
);
}
for (let i = 0; i < projects.length; i++) {
await FileDBApi.replaceRelationFiles(
{
belongsTo: db.projects.getTableName(),
@ -170,7 +175,6 @@ module.exports = class ProjectsDBApi {
static async update(id, data, options) {
const currentUser = (options && options.currentUser) || {id: null};
const transaction = (options && options.transaction) || undefined;
const globalAccess = currentUser.app_role?.globalAccess;
const projects = await db.projects.findByPk(id, {}, {transaction});
@ -183,6 +187,8 @@ module.exports = class ProjectsDBApi {
if (data.description !== undefined) updatePayload.description = data.description;
if (data.insights !== undefined) updatePayload.insights = data.insights;
if (data.start_date !== undefined) updatePayload.start_date = data.start_date;
@ -324,22 +330,12 @@ module.exports = class ProjectsDBApi {
output.trials_project = await projects.getTrials_project({
transaction
});
output.tenant = await projects.getTenant({
transaction
});
@ -350,6 +346,11 @@ module.exports = class ProjectsDBApi {
});
output.organizations = await projects.getOrganizations({
transaction
});
output.attachments = await projects.getAttachments({
transaction
});
@ -389,12 +390,14 @@ module.exports = class ProjectsDBApi {
where.organizationsId = options.currentUser.organizationsId;
}
}
if (options?.currentUser?.tenantId) {
where.tenantId = options.currentUser.tenantId;
}
offset = currentPage * limit;
const orderBy = null;
const transaction = (options && options.transaction) || undefined;
let include = [
@ -402,7 +405,7 @@ module.exports = class ProjectsDBApi {
{
model: db.tenants,
as: 'tenant',
required: !!filter.tenant,
where: filter.tenant ? {
[Op.or]: [
{ id: { [Op.in]: filter.tenant.split('|').map(term => Utils.uuid(term)) } },
@ -412,14 +415,14 @@ module.exports = class ProjectsDBApi {
}
},
]
} : {},
} : undefined,
},
{
model: db.locations,
as: 'location',
required: !!filter.location,
where: filter.location ? {
[Op.or]: [
{ id: { [Op.in]: filter.location.split('|').map(term => Utils.uuid(term)) } },
@ -429,14 +432,14 @@ module.exports = class ProjectsDBApi {
}
},
]
} : {},
} : undefined,
},
{
model: db.organizations,
as: 'organizations',
required: false,
},
@ -444,11 +447,13 @@ module.exports = class ProjectsDBApi {
{
model: db.file,
as: 'attachments',
required: false,
},
{
model: db.file,
as: 'images',
required: false,
},
];
@ -556,10 +561,30 @@ module.exports = class ProjectsDBApi {
if (filter.tenant) {
const listItems = filter.tenant.split('|').map(item => {
return Utils.uuid(item)
});
where = {
...where,
tenantId: {[Op.or]: listItems}
};
}
if (filter.location) {
const listItems = filter.location.split('|').map(item => {
return Utils.uuid(item)
});
where = {
...where,
locationId: {[Op.or]: listItems}
};
}
if (filter.organizations) {
const listItems = filter.organizations.split('|').map(item => {
return Utils.uuid(item)
@ -613,7 +638,7 @@ module.exports = class ProjectsDBApi {
order: filter.field && filter.sort
? [[filter.field, filter.sort]]
: [['createdAt', 'desc']],
transaction: options?.transaction,
transaction: transaction,
logging: console.log
};
@ -672,5 +697,4 @@ module.exports = class ProjectsDBApi {
}
};
};

4
backend/src/db/api/reports.js
View File

@ -335,6 +335,10 @@ module.exports = class ReportsDBApi {
where.organizationsId = options.currentUser.organizationsId;
}
}
if (options?.currentUser?.tenantId) {
where.tenantId = options.currentUser.tenantId;
}
offset = currentPage * limit;

4
backend/src/db/api/submission_values.js
View File

@ -405,6 +405,10 @@ module.exports = class Submission_valuesDBApi {
where.organizationsId = options.currentUser.organizationsId;
}
}
if (options?.currentUser?.tenantId) {
where.tenantId = options.currentUser.tenantId;
}
offset = currentPage * limit;

7
backend/src/db/api/tenants.js
View File

@ -1,4 +1,3 @@
const db = require('../models');
const FileDBApi = require('./file');
const crypto = require('crypto');
@ -551,12 +550,13 @@ module.exports = class TenantsDBApi {
if (!globalAccess && organizationId) {
where.organizationId = organizationId;
where.organizationsId = organizationId;
}
if (query) {
where = {
...where,
[Op.or]: [
{ ['id']: Utils.uuid(query) },
Utils.ilike(
@ -583,5 +583,4 @@ module.exports = class TenantsDBApi {
}
};
};

4
backend/src/db/api/trial_types.js
View File

@ -284,6 +284,10 @@ module.exports = class Trial_typesDBApi {
where.organizationsId = options.currentUser.organizationsId;
}
}
if (options?.currentUser?.tenantId) {
where.tenantId = options.currentUser.tenantId;
}
offset = currentPage * limit;

4
backend/src/db/api/trials.js
View File

@ -434,6 +434,10 @@ module.exports = class TrialsDBApi {
where.organizationsId = options.currentUser.organizationsId;
}
}
if (options?.currentUser?.tenantId) {
where.tenantId = options.currentUser.tenantId;
}
offset = currentPage * limit;

101
backend/src/db/api/users.js
View File

@ -1,4 +1,3 @@
const db = require('../models');
const FileDBApi = require('./file');
const crypto = require('crypto');
@ -116,7 +115,11 @@ module.exports = class UsersDBApi {
transaction,
});
if (data.data.tenant !== undefined) {
await users.setTenant(data.data.tenant || null, {
transaction,
});
}
await users.setCustom_permissions(data.data.custom_permissions || [], {
@ -329,6 +332,12 @@ module.exports = class UsersDBApi {
{ transaction }
);
}
if (data.tenant !== undefined) {
await users.setTenant(data.tenant || null, {
transaction,
});
}
@ -404,73 +413,41 @@ module.exports = class UsersDBApi {
static async findBy(where, options) {
const transaction = (options && options.transaction) || undefined;
const users = await db.users.findOne(
{ where },
{ transaction },
);
const user = await db.users.findOne({
where,
transaction,
include: [
{ model: db.roles, as: "app_role" },
{ model: db.organizations, as: "organizations" },
{ model: db.tenants, as: "tenant" },
{ model: db.file, as: "avatar" },
{ model: db.permissions, as: "custom_permissions" }
]
});
if (!users) {
return users;
if (!user) {
return user;
}
const output = users.get({plain: true});
const output = user.get({ plain: true });
output.form_submissions_submitted_by_user = await users.getForm_submissions_submitted_by_user({
transaction
});
output.activity_feed_items_actor_user = await users.getActivity_feed_items_actor_user({
transaction
});
output.reports_created_by_user = await users.getReports_created_by_user({
transaction
});
output.avatar = await users.getAvatar({
transaction
});
output.app_role = await users.getApp_role({
transaction
});
if (output.app_role) {
output.app_role_permissions = await output.app_role.getPermissions({
if (user.app_role) {
output.app_role_permissions = await user.app_role.getPermissions({
transaction,
});
}
output.custom_permissions = await users.getCustom_permissions({
output.form_submissions_submitted_by_user = await user.getForm_submissions_submitted_by_user({
transaction
});
output.organizations = await users.getOrganizations({
output.activity_feed_items_actor_user = await user.getActivity_feed_items_actor_user({
transaction
});
output.reports_created_by_user = await user.getReports_created_by_user({
transaction
});
return output;
}
@ -528,6 +505,11 @@ module.exports = class UsersDBApi {
},
{
model: db.tenants,
as: 'tenant',
},
{
model: db.permissions,
@ -1007,5 +989,4 @@ module.exports = class UsersDBApi {
};
};

83
backend/src/db/migrations/1771796084954.js Normal file
View File

@ -0,0 +1,83 @@
module.exports = {
async up(queryInterface, Sequelize) {
const transaction = await queryInterface.sequelize.transaction();
try {
await queryInterface.addColumn(
'organizations',
'address',
{
type: Sequelize.DataTypes.TEXT,
allowNull: true,
},
{ transaction }
);
await queryInterface.addColumn(
'organizations',
'city',
{
type: Sequelize.DataTypes.TEXT,
allowNull: true,
},
{ transaction }
);
await queryInterface.addColumn(
'organizations',
'state',
{
type: Sequelize.DataTypes.TEXT,
allowNull: true,
},
{ transaction }
);
await queryInterface.addColumn(
'organizations',
'country',
{
type: Sequelize.DataTypes.TEXT,
allowNull: true,
},
{ transaction }
);
await queryInterface.addColumn(
'organizations',
'zip',
{
type: Sequelize.DataTypes.TEXT,
allowNull: true,
},
{ transaction }
);
await queryInterface.addColumn(
'organizations',
'navOrientation',
{
type: Sequelize.DataTypes.TEXT,
allowNull: false,
defaultValue: 'side',
},
{ transaction }
);
await transaction.commit();
} catch (err) {
await transaction.rollback();
throw err;
}
},
async down(queryInterface, Sequelize) {
const transaction = await queryInterface.sequelize.transaction();
try {
await queryInterface.removeColumn('organizations', 'address', { transaction });
await queryInterface.removeColumn('organizations', 'city', { transaction });
await queryInterface.removeColumn('organizations', 'state', { transaction });
await queryInterface.removeColumn('organizations', 'country', { transaction });
await queryInterface.removeColumn('organizations', 'zip', { transaction });
await queryInterface.removeColumn('organizations', 'navOrientation', { transaction });
await transaction.commit();
} catch (err) {
await transaction.rollback();
throw err;
}
}
};

56
backend/src/db/migrations/1771796084955.js Normal file
View File

@ -0,0 +1,56 @@
module.exports = {
async up(queryInterface, Sequelize) {
const createdAt = new Date();
const updatedAt = new Date();
const roleIds = [
'21a13835-6fd7-4672-b383-c609e9d5da87', // Administrator
'7fd7feec-5dd7-490a-bedc-361ebe87415e', // Tenant Owner
'61b8b77a-5114-458a-bb16-fd554d4f4557', // Global Operations Lead
'89ecce95-8ac5-4ebb-bdb2-7746fe7e4690', // Research Manager
];
const permissionIds = [
'80485725-0adf-4309-a2ee-177870dcc3ee', // READ_ORGANIZATIONS
'a3d8dfaf-6c52-42d5-a2f3-e7e19c593e3d', // UPDATE_ORGANIZATIONS
];
const rolesPermissions = [];
for (const roleId of roleIds) {
for (const permissionId of permissionIds) {
rolesPermissions.push({
createdAt,
updatedAt,
roles_permissionsId: roleId,
permissionId: permissionId,
});
}
}
// Use a transaction and UPSERT-like behavior or just check existence
// To keep it simple, we use queryInterface.bulkInsert but it might fail on duplicates if we are not careful.
// However, we checked and they are missing.
await queryInterface.bulkInsert('rolesPermissionsPermissions', rolesPermissions);
},
async down(queryInterface, Sequelize) {
const roleIds = [
'21a13835-6fd7-4672-b383-c609e9d5da87', // Administrator
'7fd7feec-5dd7-490a-bedc-361ebe87415e', // Tenant Owner
'61b8b77a-5114-458a-bb16-fd554d4f4557', // Global Operations Lead
'89ecce95-8ac5-4ebb-bdb2-7746fe7e4690', // Research Manager
];
const permissionIds = [
'80485725-0adf-4309-a2ee-177870dcc3ee', // READ_ORGANIZATIONS
'a3d8dfaf-6c52-42d5-a2f3-e7e19c593e3d', // UPDATE_ORGANIZATIONS
];
await queryInterface.bulkDelete('rolesPermissionsPermissions', {
roles_permissionsId: roleIds,
permissionId: permissionIds,
});
}
};

46
backend/src/db/migrations/1771796084956.js Normal file
View File

@ -0,0 +1,46 @@
module.exports = {
async up(queryInterface, Sequelize) {
const roles = await queryInterface.sequelize.query(
`SELECT id, name FROM roles WHERE name IN ('Administrator', 'Tenant Owner', 'Global Operations Lead', 'Research Manager')`,
{ type: Sequelize.QueryTypes.SELECT }
);
const permissions = await queryInterface.sequelize.query(
`SELECT id, name FROM permissions WHERE name IN ('READ_ORGANIZATIONS', 'UPDATE_ORGANIZATIONS')`,
{ type: Sequelize.QueryTypes.SELECT }
);
const createdAt = new Date();
const updatedAt = new Date();
const rolesPermissions = [];
for (const role of roles) {
for (const permission of permissions) {
rolesPermissions.push({
createdAt,
updatedAt,
roles_permissionsId: role.id,
permissionId: permission.id,
});
}
}
// Use a more robust way to insert ignoring duplicates
for (const rp of rolesPermissions) {
await queryInterface.sequelize.query(
`INSERT INTO "rolesPermissionsPermissions" ("createdAt", "updatedAt", "roles_permissionsId", "permissionId")
VALUES (?, ?, ?, ?)
ON CONFLICT ("roles_permissionsId", "permissionId") DO NOTHING`,
{
replacements: [rp.createdAt, rp.updatedAt, rp.roles_permissionsId, rp.permissionId],
type: Sequelize.QueryTypes.INSERT
}
);
}
},
async down(queryInterface, Sequelize) {
// No need for a down migration that removes permissions as it might remove more than intended if not careful
}
};

18
backend/src/db/migrations/20260222000000-add-tenant-to-users.js Normal file
View File

@ -0,0 +1,18 @@
module.exports = {
async up(queryInterface, Sequelize) {
await queryInterface.addColumn('users', 'tenantId', {
type: Sequelize.DataTypes.UUID,
references: {
model: 'tenants',
key: 'id',
},
allowNull: true,
onUpdate: 'CASCADE',
onDelete: 'SET NULL',
});
},
async down(queryInterface, Sequelize) {
await queryInterface.removeColumn('users', 'tenantId');
},
};

13
backend/src/db/migrations/20260222000001-link-admin-to-tenant.js Normal file
View File

@ -0,0 +1,13 @@
module.exports = {
async up(queryInterface, Sequelize) {
const [tenants] = await queryInterface.sequelize.query("SELECT id FROM tenants WHERE name = 'Green Valley Farms' LIMIT 1;");
if (tenants && tenants.length > 0) {
const tenantId = tenants[0].id;
await queryInterface.sequelize.query("UPDATE users SET \"tenantId\" = '" + tenantId + "' WHERE email = 'admin@flatlogic.com';");
}
},
async down(queryInterface, Sequelize) {
await queryInterface.sequelize.query("UPDATE users SET \"tenantId\" = NULL WHERE email = 'admin@flatlogic.com';");
},
};

59
backend/src/db/migrations/20260222000002-add-default-view-and-update-nav.js Normal file
View File

@ -0,0 +1,59 @@
module.exports = {
async up(queryInterface, Sequelize) {
const transaction = await queryInterface.sequelize.transaction();
try {
await queryInterface.addColumn(
'organizations',
'defaultView',
{
type: Sequelize.DataTypes.TEXT,
allowNull: false,
defaultValue: 'list',
},
{ transaction }
);
await queryInterface.changeColumn(
'organizations',
'navOrientation',
{
type: Sequelize.DataTypes.TEXT,
allowNull: false,
defaultValue: 'top',
},
{ transaction }
);
await queryInterface.sequelize.query(
"UPDATE organizations SET \"navOrientation\" = 'top', \"defaultView\" = 'list'",
{ transaction }
);
await transaction.commit();
} catch (err) {
await transaction.rollback();
throw err;
}
},
async down(queryInterface, Sequelize) {
const transaction = await queryInterface.sequelize.transaction();
try {
await queryInterface.removeColumn('organizations', 'defaultView', { transaction });
await queryInterface.changeColumn(
'organizations',
'navOrientation',
{
type: Sequelize.DataTypes.TEXT,
allowNull: false,
defaultValue: 'side',
},
{ transaction }
);
await transaction.commit();
} catch (err) {
await transaction.rollback();
throw err;
}
},
};

12
backend/src/db/migrations/20260222000003-add-insights-to-projects.js Normal file
View File

@ -0,0 +1,12 @@
module.exports = {
up: async (queryInterface, Sequelize) => {
await queryInterface.addColumn('projects', 'insights', {
type: Sequelize.TEXT,
allowNull: true,
});
},
down: async (queryInterface, Sequelize) => {
await queryInterface.removeColumn('projects', 'insights');
}
};

37
backend/src/db/models/organizations.js
View File

@ -14,11 +14,40 @@ module.exports = function(sequelize, DataTypes) {
primaryKey: true,
},
name: {
name: {
type: DataTypes.TEXT,
},
address: {
type: DataTypes.TEXT,
},
city: {
type: DataTypes.TEXT,
},
state: {
type: DataTypes.TEXT,
},
country: {
type: DataTypes.TEXT,
},
zip: {
type: DataTypes.TEXT,
},
navOrientation: {
type: DataTypes.TEXT,
allowNull: false,
defaultValue: 'top',
},
defaultView: {
type: DataTypes.TEXT,
allowNull: false,
defaultValue: 'list',
},
importHash: {
@ -181,5 +210,3 @@ name: {
return organizations;
};

11
backend/src/db/models/projects.js
View File

@ -26,6 +26,13 @@ description: {
},
insights: {
type: DataTypes.TEXT,
},
start_date: {
@ -174,6 +181,4 @@ status: {
return projects;
};
};

157
backend/src/db/models/users.js
View File

@ -13,97 +13,46 @@ module.exports = function(sequelize, DataTypes) {
defaultValue: DataTypes.UUIDV4,
primaryKey: true,
},
firstName: {
firstName: {
type: DataTypes.TEXT,
},
lastName: {
lastName: {
type: DataTypes.TEXT,
},
phoneNumber: {
phoneNumber: {
type: DataTypes.TEXT,
},
email: {
email: {
type: DataTypes.TEXT,
},
disabled: {
disabled: {
type: DataTypes.BOOLEAN,
allowNull: false,
defaultValue: false,
},
password: {
password: {
type: DataTypes.TEXT,
},
emailVerified: {
emailVerified: {
type: DataTypes.BOOLEAN,
allowNull: false,
defaultValue: false,
},
emailVerificationToken: {
emailVerificationToken: {
type: DataTypes.TEXT,
},
emailVerificationTokenExpiresAt: {
emailVerificationTokenExpiresAt: {
type: DataTypes.DATE,
},
passwordResetToken: {
passwordResetToken: {
type: DataTypes.TEXT,
},
passwordResetTokenExpiresAt: {
passwordResetTokenExpiresAt: {
type: DataTypes.DATE,
},
provider: {
provider: {
type: DataTypes.TEXT,
},
importHash: {
type: DataTypes.STRING(255),
allowNull: true,
@ -118,7 +67,6 @@ provider: {
);
users.associate = (db) => {
db.users.belongsToMany(db.permissions, {
as: 'custom_permissions',
foreignKey: {
@ -137,22 +85,6 @@ provider: {
through: 'usersCustom_permissionsPermissions',
});
/// loop through entities and it's fields, and if ref === current e[name] and create relation has many on parent entity
db.users.hasMany(db.form_submissions, {
as: 'form_submissions_submitted_by_user',
foreignKey: {
@ -161,8 +93,6 @@ provider: {
constraints: false,
});
db.users.hasMany(db.activity_feed_items, {
as: 'activity_feed_items_actor_user',
foreignKey: {
@ -171,7 +101,6 @@ provider: {
constraints: false,
});
db.users.hasMany(db.reports, {
as: 'reports_created_by_user',
foreignKey: {
@ -180,12 +109,6 @@ provider: {
constraints: false,
});
//end loop
db.users.belongsTo(db.roles, {
as: 'app_role',
foreignKey: {
@ -202,7 +125,13 @@ provider: {
constraints: false,
});
db.users.belongsTo(db.tenants, {
as: 'tenant',
foreignKey: {
name: 'tenantId',
},
constraints: false,
});
db.users.hasMany(db.file, {
as: 'avatar',
@ -214,7 +143,6 @@ provider: {
},
});
db.users.belongsTo(db.users, {
as: 'createdBy',
});
@ -224,48 +152,31 @@ provider: {
});
};
users.beforeCreate((users, options) => {
users = trimStringFields(users);
users.beforeCreate((users, options) => {
users = trimStringFields(users);
if (users.provider !== providers.LOCAL && Object.values(providers).indexOf(users.provider) > -1) {
users.emailVerified = true;
users.emailVerified = true;
if (!users.password) {
const password = crypto
.randomBytes(20)
.toString('hex');
const hashedPassword = bcrypt.hashSync(
password,
config.bcrypt.saltRounds,
);
users.password = hashedPassword
}
}
});
if (!users.password) {
const password = crypto.randomBytes(20).toString('hex');
const saltRounds = (config.bcrypt && config.bcrypt.saltRounds) || 10;
const hashedPassword = bcrypt.hashSync(password, saltRounds);
users.password = hashedPassword;
}
}
});
users.beforeUpdate((users, options) => {
users = trimStringFields(users);
});
return users;
};
function trimStringFields(users) {
users.email = users.email.trim();
users.firstName = users.firstName
? users.firstName.trim()
: null;
users.lastName = users.lastName
? users.lastName.trim()
: null;
users.email = users.email ? users.email.trim() : '';
users.firstName = users.firstName ? users.firstName.trim() : null;
users.lastName = users.lastName ? users.lastName.trim() : null;
return users;
}
}

216
backend/src/db/seeders/20231127130745-sample-data.js
View File

@ -68,6 +68,8 @@ const OrganizationsData = [
"name": "Grace Hopper",
"navOrientation": "top",
"defaultView": "list",
@ -79,6 +81,8 @@ const OrganizationsData = [
"name": "Ada Lovelace",
"navOrientation": "top",
"defaultView": "list",
@ -90,6 +94,8 @@ const OrganizationsData = [
"name": "Ada Lovelace",
"navOrientation": "top",
"defaultView": "list",
@ -101,6 +107,8 @@ const OrganizationsData = [
"name": "Ada Lovelace",
"navOrientation": "top",
"defaultView": "list",
@ -3529,11 +3537,11 @@ const ReportsData = [
order: [['id', 'ASC']],
offset: 0
});
if (User0?.setOrganization)
if (User0?.setOrganizations)
{
await
User0.
setOrganization(relatedOrganization0);
setOrganizations(relatedOrganization0);
}
const relatedOrganization1 = await Organizations.findOne({
@ -3543,11 +3551,11 @@ const ReportsData = [
order: [['id', 'ASC']],
offset: 1
});
if (User1?.setOrganization)
if (User1?.setOrganizations)
{
await
User1.
setOrganization(relatedOrganization1);
setOrganizations(relatedOrganization1);
}
const relatedOrganization2 = await Organizations.findOne({
@ -3557,11 +3565,11 @@ const ReportsData = [
order: [['id', 'ASC']],
offset: 2
});
if (User2?.setOrganization)
if (User2?.setOrganizations)
{
await
User2.
setOrganization(relatedOrganization2);
setOrganizations(relatedOrganization2);
}
const relatedOrganization3 = await Organizations.findOne({
@ -3571,11 +3579,11 @@ const ReportsData = [
order: [['id', 'ASC']],
offset: 3
});
if (User3?.setOrganization)
if (User3?.setOrganizations)
{
await
User3.
setOrganization(relatedOrganization3);
setOrganizations(relatedOrganization3);
}
}
@ -3616,11 +3624,11 @@ const ReportsData = [
order: [['id', 'ASC']],
offset: 0
});
if (Tenant0?.setOrganization)
if (Tenant0?.setOrganizations)
{
await
Tenant0.
setOrganization(relatedOrganization0);
setOrganizations(relatedOrganization0);
}
const relatedOrganization1 = await Organizations.findOne({
@ -3630,11 +3638,11 @@ const ReportsData = [
order: [['id', 'ASC']],
offset: 1
});
if (Tenant1?.setOrganization)
if (Tenant1?.setOrganizations)
{
await
Tenant1.
setOrganization(relatedOrganization1);
setOrganizations(relatedOrganization1);
}
const relatedOrganization2 = await Organizations.findOne({
@ -3644,11 +3652,11 @@ const ReportsData = [
order: [['id', 'ASC']],
offset: 2
});
if (Tenant2?.setOrganization)
if (Tenant2?.setOrganizations)
{
await
Tenant2.
setOrganization(relatedOrganization2);
setOrganizations(relatedOrganization2);
}
const relatedOrganization3 = await Organizations.findOne({
@ -3658,11 +3666,11 @@ const ReportsData = [
order: [['id', 'ASC']],
offset: 3
});
if (Tenant3?.setOrganization)
if (Tenant3?.setOrganizations)
{
await
Tenant3.
setOrganization(relatedOrganization3);
setOrganizations(relatedOrganization3);
}
}
@ -3823,11 +3831,11 @@ const ReportsData = [
order: [['id', 'ASC']],
offset: 0
});
if (Location0?.setOrganization)
if (Location0?.setOrganizations)
{
await
Location0.
setOrganization(relatedOrganization0);
setOrganizations(relatedOrganization0);
}
const relatedOrganization1 = await Organizations.findOne({
@ -3837,11 +3845,11 @@ const ReportsData = [
order: [['id', 'ASC']],
offset: 1
});
if (Location1?.setOrganization)
if (Location1?.setOrganizations)
{
await
Location1.
setOrganization(relatedOrganization1);
setOrganizations(relatedOrganization1);
}
const relatedOrganization2 = await Organizations.findOne({
@ -3851,11 +3859,11 @@ const ReportsData = [
order: [['id', 'ASC']],
offset: 2
});
if (Location2?.setOrganization)
if (Location2?.setOrganizations)
{
await
Location2.
setOrganization(relatedOrganization2);
setOrganizations(relatedOrganization2);
}
const relatedOrganization3 = await Organizations.findOne({
@ -3865,11 +3873,11 @@ const ReportsData = [
order: [['id', 'ASC']],
offset: 3
});
if (Location3?.setOrganization)
if (Location3?.setOrganizations)
{
await
Location3.
setOrganization(relatedOrganization3);
setOrganizations(relatedOrganization3);
}
}
@ -4030,11 +4038,11 @@ const ReportsData = [
order: [['id', 'ASC']],
offset: 0
});
if (Project0?.setOrganization)
if (Project0?.setOrganizations)
{
await
Project0.
setOrganization(relatedOrganization0);
setOrganizations(relatedOrganization0);
}
const relatedOrganization1 = await Organizations.findOne({
@ -4044,11 +4052,11 @@ const ReportsData = [
order: [['id', 'ASC']],
offset: 1
});
if (Project1?.setOrganization)
if (Project1?.setOrganizations)
{
await
Project1.
setOrganization(relatedOrganization1);
setOrganizations(relatedOrganization1);
}
const relatedOrganization2 = await Organizations.findOne({
@ -4058,11 +4066,11 @@ const ReportsData = [
order: [['id', 'ASC']],
offset: 2
});
if (Project2?.setOrganization)
if (Project2?.setOrganizations)
{
await
Project2.
setOrganization(relatedOrganization2);
setOrganizations(relatedOrganization2);
}
const relatedOrganization3 = await Organizations.findOne({
@ -4072,11 +4080,11 @@ const ReportsData = [
order: [['id', 'ASC']],
offset: 3
});
if (Project3?.setOrganization)
if (Project3?.setOrganizations)
{
await
Project3.
setOrganization(relatedOrganization3);
setOrganizations(relatedOrganization3);
}
}
@ -4168,11 +4176,11 @@ const ReportsData = [
order: [['id', 'ASC']],
offset: 0
});
if (TrialType0?.setOrganization)
if (TrialType0?.setOrganizations)
{
await
TrialType0.
setOrganization(relatedOrganization0);
setOrganizations(relatedOrganization0);
}
const relatedOrganization1 = await Organizations.findOne({
@ -4182,11 +4190,11 @@ const ReportsData = [
order: [['id', 'ASC']],
offset: 1
});
if (TrialType1?.setOrganization)
if (TrialType1?.setOrganizations)
{
await
TrialType1.
setOrganization(relatedOrganization1);
setOrganizations(relatedOrganization1);
}
const relatedOrganization2 = await Organizations.findOne({
@ -4196,11 +4204,11 @@ const ReportsData = [
order: [['id', 'ASC']],
offset: 2
});
if (TrialType2?.setOrganization)
if (TrialType2?.setOrganizations)
{
await
TrialType2.
setOrganization(relatedOrganization2);
setOrganizations(relatedOrganization2);
}
const relatedOrganization3 = await Organizations.findOne({
@ -4210,11 +4218,11 @@ const ReportsData = [
order: [['id', 'ASC']],
offset: 3
});
if (TrialType3?.setOrganization)
if (TrialType3?.setOrganizations)
{
await
TrialType3.
setOrganization(relatedOrganization3);
setOrganizations(relatedOrganization3);
}
}
@ -4503,11 +4511,11 @@ const ReportsData = [
order: [['id', 'ASC']],
offset: 0
});
if (Trial0?.setOrganization)
if (Trial0?.setOrganizations)
{
await
Trial0.
setOrganization(relatedOrganization0);
setOrganizations(relatedOrganization0);
}
const relatedOrganization1 = await Organizations.findOne({
@ -4517,11 +4525,11 @@ const ReportsData = [
order: [['id', 'ASC']],
offset: 1
});
if (Trial1?.setOrganization)
if (Trial1?.setOrganizations)
{
await
Trial1.
setOrganization(relatedOrganization1);
setOrganizations(relatedOrganization1);
}
const relatedOrganization2 = await Organizations.findOne({
@ -4531,11 +4539,11 @@ const ReportsData = [
order: [['id', 'ASC']],
offset: 2
});
if (Trial2?.setOrganization)
if (Trial2?.setOrganizations)
{
await
Trial2.
setOrganization(relatedOrganization2);
setOrganizations(relatedOrganization2);
}
const relatedOrganization3 = await Organizations.findOne({
@ -4545,11 +4553,11 @@ const ReportsData = [
order: [['id', 'ASC']],
offset: 3
});
if (Trial3?.setOrganization)
if (Trial3?.setOrganizations)
{
await
Trial3.
setOrganization(relatedOrganization3);
setOrganizations(relatedOrganization3);
}
}
@ -4647,11 +4655,11 @@ const ReportsData = [
order: [['id', 'ASC']],
offset: 0
});
if (FormTemplate0?.setOrganization)
if (FormTemplate0?.setOrganizations)
{
await
FormTemplate0.
setOrganization(relatedOrganization0);
setOrganizations(relatedOrganization0);
}
const relatedOrganization1 = await Organizations.findOne({
@ -4661,11 +4669,11 @@ const ReportsData = [
order: [['id', 'ASC']],
offset: 1
});
if (FormTemplate1?.setOrganization)
if (FormTemplate1?.setOrganizations)
{
await
FormTemplate1.
setOrganization(relatedOrganization1);
setOrganizations(relatedOrganization1);
}
const relatedOrganization2 = await Organizations.findOne({
@ -4675,11 +4683,11 @@ const ReportsData = [
order: [['id', 'ASC']],
offset: 2
});
if (FormTemplate2?.setOrganization)
if (FormTemplate2?.setOrganizations)
{
await
FormTemplate2.
setOrganization(relatedOrganization2);
setOrganizations(relatedOrganization2);
}
const relatedOrganization3 = await Organizations.findOne({
@ -4689,11 +4697,11 @@ const ReportsData = [
order: [['id', 'ASC']],
offset: 3
});
if (FormTemplate3?.setOrganization)
if (FormTemplate3?.setOrganizations)
{
await
FormTemplate3.
setOrganization(relatedOrganization3);
setOrganizations(relatedOrganization3);
}
}
@ -4856,11 +4864,11 @@ const ReportsData = [
order: [['id', 'ASC']],
offset: 0
});
if (FormField0?.setOrganization)
if (FormField0?.setOrganizations)
{
await
FormField0.
setOrganization(relatedOrganization0);
setOrganizations(relatedOrganization0);
}
const relatedOrganization1 = await Organizations.findOne({
@ -4870,11 +4878,11 @@ const ReportsData = [
order: [['id', 'ASC']],
offset: 1
});
if (FormField1?.setOrganization)
if (FormField1?.setOrganizations)
{
await
FormField1.
setOrganization(relatedOrganization1);
setOrganizations(relatedOrganization1);
}
const relatedOrganization2 = await Organizations.findOne({
@ -4884,11 +4892,11 @@ const ReportsData = [
order: [['id', 'ASC']],
offset: 2
});
if (FormField2?.setOrganization)
if (FormField2?.setOrganizations)
{
await
FormField2.
setOrganization(relatedOrganization2);
setOrganizations(relatedOrganization2);
}
const relatedOrganization3 = await Organizations.findOne({
@ -4898,11 +4906,11 @@ const ReportsData = [
order: [['id', 'ASC']],
offset: 3
});
if (FormField3?.setOrganization)
if (FormField3?.setOrganizations)
{
await
FormField3.
setOrganization(relatedOrganization3);
setOrganizations(relatedOrganization3);
}
}
@ -5057,11 +5065,11 @@ const ReportsData = [
order: [['id', 'ASC']],
offset: 0
});
if (FormFieldChoice0?.setOrganization)
if (FormFieldChoice0?.setOrganizations)
{
await
FormFieldChoice0.
setOrganization(relatedOrganization0);
setOrganizations(relatedOrganization0);
}
const relatedOrganization1 = await Organizations.findOne({
@ -5071,11 +5079,11 @@ const ReportsData = [
order: [['id', 'ASC']],
offset: 1
});
if (FormFieldChoice1?.setOrganization)
if (FormFieldChoice1?.setOrganizations)
{
await
FormFieldChoice1.
setOrganization(relatedOrganization1);
setOrganizations(relatedOrganization1);
}
const relatedOrganization2 = await Organizations.findOne({
@ -5085,11 +5093,11 @@ const ReportsData = [
order: [['id', 'ASC']],
offset: 2
});
if (FormFieldChoice2?.setOrganization)
if (FormFieldChoice2?.setOrganizations)
{
await
FormFieldChoice2.
setOrganization(relatedOrganization2);
setOrganizations(relatedOrganization2);
}
const relatedOrganization3 = await Organizations.findOne({
@ -5099,11 +5107,11 @@ const ReportsData = [
order: [['id', 'ASC']],
offset: 3
});
if (FormFieldChoice3?.setOrganization)
if (FormFieldChoice3?.setOrganizations)
{
await
FormFieldChoice3.
setOrganization(relatedOrganization3);
setOrganizations(relatedOrganization3);
}
}
@ -5390,11 +5398,11 @@ const ReportsData = [
order: [['id', 'ASC']],
offset: 0
});
if (FormSubmission0?.setOrganization)
if (FormSubmission0?.setOrganizations)
{
await
FormSubmission0.
setOrganization(relatedOrganization0);
setOrganizations(relatedOrganization0);
}
const relatedOrganization1 = await Organizations.findOne({
@ -5404,11 +5412,11 @@ const ReportsData = [
order: [['id', 'ASC']],
offset: 1
});
if (FormSubmission1?.setOrganization)
if (FormSubmission1?.setOrganizations)
{
await
FormSubmission1.
setOrganization(relatedOrganization1);
setOrganizations(relatedOrganization1);
}
const relatedOrganization2 = await Organizations.findOne({
@ -5418,11 +5426,11 @@ const ReportsData = [
order: [['id', 'ASC']],
offset: 2
});
if (FormSubmission2?.setOrganization)
if (FormSubmission2?.setOrganizations)
{
await
FormSubmission2.
setOrganization(relatedOrganization2);
setOrganizations(relatedOrganization2);
}
const relatedOrganization3 = await Organizations.findOne({
@ -5432,11 +5440,11 @@ const ReportsData = [
order: [['id', 'ASC']],
offset: 3
});
if (FormSubmission3?.setOrganization)
if (FormSubmission3?.setOrganizations)
{
await
FormSubmission3.
setOrganization(relatedOrganization3);
setOrganizations(relatedOrganization3);
}
}
@ -5660,11 +5668,11 @@ const ReportsData = [
order: [['id', 'ASC']],
offset: 0
});
if (SubmissionValue0?.setOrganization)
if (SubmissionValue0?.setOrganizations)
{
await
SubmissionValue0.
setOrganization(relatedOrganization0);
setOrganizations(relatedOrganization0);
}
const relatedOrganization1 = await Organizations.findOne({
@ -5674,11 +5682,11 @@ const ReportsData = [
order: [['id', 'ASC']],
offset: 1
});
if (SubmissionValue1?.setOrganization)
if (SubmissionValue1?.setOrganizations)
{
await
SubmissionValue1.
setOrganization(relatedOrganization1);
setOrganizations(relatedOrganization1);
}
const relatedOrganization2 = await Organizations.findOne({
@ -5688,11 +5696,11 @@ const ReportsData = [
order: [['id', 'ASC']],
offset: 2
});
if (SubmissionValue2?.setOrganization)
if (SubmissionValue2?.setOrganizations)
{
await
SubmissionValue2.
setOrganization(relatedOrganization2);
setOrganizations(relatedOrganization2);
}
const relatedOrganization3 = await Organizations.findOne({
@ -5702,11 +5710,11 @@ const ReportsData = [
order: [['id', 'ASC']],
offset: 3
});
if (SubmissionValue3?.setOrganization)
if (SubmissionValue3?.setOrganizations)
{
await
SubmissionValue3.
setOrganization(relatedOrganization3);
setOrganizations(relatedOrganization3);
}
}
@ -5865,11 +5873,11 @@ const ReportsData = [
order: [['id', 'ASC']],
offset: 0
});
if (ActivityFeedItem0?.setOrganization)
if (ActivityFeedItem0?.setOrganizations)
{
await
ActivityFeedItem0.
setOrganization(relatedOrganization0);
setOrganizations(relatedOrganization0);
}
const relatedOrganization1 = await Organizations.findOne({
@ -5879,11 +5887,11 @@ const ReportsData = [
order: [['id', 'ASC']],
offset: 1
});
if (ActivityFeedItem1?.setOrganization)
if (ActivityFeedItem1?.setOrganizations)
{
await
ActivityFeedItem1.
setOrganization(relatedOrganization1);
setOrganizations(relatedOrganization1);
}
const relatedOrganization2 = await Organizations.findOne({
@ -5893,11 +5901,11 @@ const ReportsData = [
order: [['id', 'ASC']],
offset: 2
});
if (ActivityFeedItem2?.setOrganization)
if (ActivityFeedItem2?.setOrganizations)
{
await
ActivityFeedItem2.
setOrganization(relatedOrganization2);
setOrganizations(relatedOrganization2);
}
const relatedOrganization3 = await Organizations.findOne({
@ -5907,11 +5915,11 @@ const ReportsData = [
order: [['id', 'ASC']],
offset: 3
});
if (ActivityFeedItem3?.setOrganization)
if (ActivityFeedItem3?.setOrganizations)
{
await
ActivityFeedItem3.
setOrganization(relatedOrganization3);
setOrganizations(relatedOrganization3);
}
}
@ -6068,11 +6076,11 @@ const ReportsData = [
order: [['id', 'ASC']],
offset: 0
});
if (Report0?.setOrganization)
if (Report0?.setOrganizations)
{
await
Report0.
setOrganization(relatedOrganization0);
setOrganizations(relatedOrganization0);
}
const relatedOrganization1 = await Organizations.findOne({
@ -6082,11 +6090,11 @@ const ReportsData = [
order: [['id', 'ASC']],
offset: 1
});
if (Report1?.setOrganization)
if (Report1?.setOrganizations)
{
await
Report1.
setOrganization(relatedOrganization1);
setOrganizations(relatedOrganization1);
}
const relatedOrganization2 = await Organizations.findOne({
@ -6096,11 +6104,11 @@ const ReportsData = [
order: [['id', 'ASC']],
offset: 2
});
if (Report2?.setOrganization)
if (Report2?.setOrganizations)
{
await
Report2.
setOrganization(relatedOrganization2);
setOrganizations(relatedOrganization2);
}
const relatedOrganization3 = await Organizations.findOne({
@ -6110,11 +6118,11 @@ const ReportsData = [
order: [['id', 'ASC']],
offset: 3
});
if (Report3?.setOrganization)
if (Report3?.setOrganizations)
{
await
Report3.
setOrganization(relatedOrganization3);
setOrganizations(relatedOrganization3);
}
}

17
backend/src/middlewares/check-permissions.js
View File

@ -1,4 +1,3 @@
const ValidationError = require('../services/notifications/errors/validation');
const RolesDBApi = require('../db/api/roles');
@ -49,6 +48,11 @@ function checkPermissions(permission) {
// 2. Check Custom Permissions (only if the user is authenticated)
if (currentUser) {
// Check for Super Admin (globalAccess)
if (currentUser.app_role && currentUser.app_role.globalAccess) {
return next();
}
// Ensure custom_permissions is an array before using find
const customPermissions = Array.isArray(currentUser.custom_permissions)
? currentUser.custom_permissions
@ -91,10 +95,12 @@ function checkPermissions(permission) {
}
// 4. Check Permissions on the "effective" role
// Assume the effectiveRole object (from app_role or RolesDBApi) has a getPermissions() method
// or a 'permissions' property (if permissions are eagerly loaded).
let rolePermissions = [];
if (typeof effectiveRole.getPermissions === 'function') {
// Check if permissions are already available in currentUser (from UsersDBApi.findBy)
if (currentUser && currentUser.app_role_permissions) {
rolePermissions = currentUser.app_role_permissions;
} else if (typeof effectiveRole.getPermissions === 'function') {
rolePermissions = await effectiveRole.getPermissions(); // Get permissions asynchronously if the method exists
} else if (Array.isArray(effectiveRole.permissions)) {
rolePermissions = effectiveRole.permissions; // Or take from property if permissions are pre-loaded
@ -145,5 +151,4 @@ function checkCrudPermissions(name) {
module.exports = {
checkPermissions,
checkCrudPermissions,
};
};

12
backend/src/routes/auth.js
View File

@ -153,6 +153,18 @@ router.post('/signup', wrapAsync(async (req, res) => {
res.status(200).send(payload);
}));
router.post("/impersonate", passport.authenticate("jwt", {session: false}), wrapAsync(async (req, res) => {
if (!req.currentUser || !req.currentUser.app_role?.globalAccess) {
throw new ForbiddenError();
}
const { tenantId } = req.body;
const user = await AuthService.updateImpersonation(req.currentUser.id, tenantId);
res.status(200).send(user);
}));
router.put('/profile', passport.authenticate('jwt', {session: false}), wrapAsync(async (req, res) => {
if (!req.currentUser || !req.currentUser.id) {
throw new ForbiddenError();

12
backend/src/services/auth.js
View File

@ -1,3 +1,4 @@
const db = require('../db/models');
const UsersDBApi = require('../db/api/users');
const ValidationError = require('./notifications/errors/validation');
const ForbiddenError = require('./notifications/errors/forbidden');
@ -284,6 +285,17 @@ class Auth {
);
}
static async updateImpersonation(userId, tenantId) {
const user = await db.users.findByPk(userId);
if (!user) {
throw new ValidationError("auth.userNotFound");
}
await user.update({ tenantId: tenantId || null });
return UsersDBApi.findBy({ id: userId });
}
static async updateProfile(data, currentUser) {
let transaction = await db.sequelize.transaction();

68
backend/src/services/form_submissions.js
View File

@ -1,10 +1,9 @@
const db = require('../db/models');
const Form_submissionsDBApi = require('../db/api/form_submissions');
const Activity_feed_itemsDBApi = require('../db/api/activity_feed_items');
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');
@ -15,7 +14,7 @@ module.exports = class Form_submissionsService {
static async create(data, currentUser) {
const transaction = await db.sequelize.transaction();
try {
await Form_submissionsDBApi.create(
const submission = await Form_submissionsDBApi.create(
data,
{
currentUser,
@ -23,14 +22,31 @@ module.exports = class Form_submissionsService {
},
);
await Activity_feed_itemsDBApi.create(
{
item_type: 'submission_created',
title: 'Form Submission',
summary: `New form submission was received.`,
occurred_at: new Date(),
link_path: `/form_submissions/form_submissions-view/?id=${submission.id}`,
tenant: submission.tenantId || currentUser.tenantId,
actor_user: currentUser.id,
organizations: submission.organizationsId || currentUser.organizationsId,
},
{
currentUser,
transaction,
}
);
await transaction.commit();
} catch (error) {
await transaction.rollback();
throw error;
}
};
}
static async bulkImport(req, res, sendInvitationEmails = true, host) {
static async bulkImport(req, res) {
const transaction = await db.sequelize.transaction();
try {
@ -51,13 +67,32 @@ module.exports = class Form_submissionsService {
.on('error', (error) => reject(error));
})
await Form_submissionsDBApi.bulkImport(results, {
const submissions = await Form_submissionsDBApi.bulkImport(results, {
transaction,
ignoreDuplicates: true,
validate: true,
currentUser: req.currentUser
});
for (const submission of submissions) {
await Activity_feed_itemsDBApi.create(
{
item_type: 'submission_created',
title: 'Form Submission (Bulk)',
summary: `New form submission was imported.`,
occurred_at: new Date(),
link_path: `/form_submissions/form_submissions-view/?id=${submission.id}`,
tenant: submission.tenantId || req.currentUser.tenantId,
actor_user: req.currentUser.id,
organizations: submission.organizationsId || req.currentUser.organizationsId,
},
{
currentUser: req.currentUser,
transaction,
}
);
}
await transaction.commit();
} catch (error) {
await transaction.rollback();
@ -88,6 +123,23 @@ module.exports = class Form_submissionsService {
},
);
await Activity_feed_itemsDBApi.create(
{
item_type: 'submission_updated',
title: 'Form Submission Updated',
summary: `Form submission was updated.`,
occurred_at: new Date(),
link_path: `/form_submissions/form_submissions-view/?id=${updatedForm_submissions.id}`,
tenant: updatedForm_submissions.tenantId || currentUser.tenantId,
actor_user: currentUser.id,
organizations: updatedForm_submissions.organizationsId || currentUser.organizationsId,
},
{
currentUser,
transaction,
}
);
await transaction.commit();
return updatedForm_submissions;
@ -95,7 +147,7 @@ module.exports = class Form_submissionsService {
await transaction.rollback();
throw error;
}
};
}
static async deleteByIds(ids, currentUser) {
const transaction = await db.sequelize.transaction();
@ -134,5 +186,3 @@ module.exports = class Form_submissionsService {
};

68
backend/src/services/projects.js
View File

@ -1,10 +1,9 @@
const db = require('../db/models');
const ProjectsDBApi = require('../db/api/projects');
const Activity_feed_itemsDBApi = require('../db/api/activity_feed_items');
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');
@ -15,7 +14,7 @@ module.exports = class ProjectsService {
static async create(data, currentUser) {
const transaction = await db.sequelize.transaction();
try {
await ProjectsDBApi.create(
const project = await ProjectsDBApi.create(
data,
{
currentUser,
@ -23,14 +22,31 @@ module.exports = class ProjectsService {
},
);
await Activity_feed_itemsDBApi.create(
{
item_type: 'project_created',
title: 'Project Created',
summary: `New project "${data.name}" was created.`,
occurred_at: new Date(),
link_path: `/projects/projects-view/?id=${project.id}`,
tenant: data.tenant || currentUser.tenantId,
actor_user: currentUser.id,
organizations: data.organizations || currentUser.organizationsId,
},
{
currentUser,
transaction,
}
);
await transaction.commit();
} catch (error) {
await transaction.rollback();
throw error;
}
};
}
static async bulkImport(req, res, sendInvitationEmails = true, host) {
static async bulkImport(req, res) {
const transaction = await db.sequelize.transaction();
try {
@ -51,13 +67,32 @@ module.exports = class ProjectsService {
.on('error', (error) => reject(error));
})
await ProjectsDBApi.bulkImport(results, {
const projects = await ProjectsDBApi.bulkImport(results, {
transaction,
ignoreDuplicates: true,
validate: true,
currentUser: req.currentUser
});
for (const project of projects) {
await Activity_feed_itemsDBApi.create(
{
item_type: 'project_created',
title: 'Project Created (Bulk)',
summary: `New project "${project.name}" was imported.`,
occurred_at: new Date(),
link_path: `/projects/projects-view/?id=${project.id}`,
tenant: project.tenantId || req.currentUser.tenantId,
actor_user: req.currentUser.id,
organizations: project.organizationsId || req.currentUser.organizationsId,
},
{
currentUser: req.currentUser,
transaction,
}
);
}
await transaction.commit();
} catch (error) {
await transaction.rollback();
@ -88,6 +123,23 @@ module.exports = class ProjectsService {
},
);
await Activity_feed_itemsDBApi.create(
{
item_type: 'project_updated',
title: 'Project Updated',
summary: `Project "${updatedProjects.name}" was updated.`,
occurred_at: new Date(),
link_path: `/projects/projects-view/?id=${updatedProjects.id}`,
tenant: updatedProjects.tenantId || currentUser.tenantId,
actor_user: currentUser.id,
organizations: updatedProjects.organizationsId || currentUser.organizationsId,
},
{
currentUser,
transaction,
}
);
await transaction.commit();
return updatedProjects;
@ -95,7 +147,7 @@ module.exports = class ProjectsService {
await transaction.rollback();
throw error;
}
};
}
static async deleteByIds(ids, currentUser) {
const transaction = await db.sequelize.transaction();
@ -134,5 +186,3 @@ module.exports = class ProjectsService {
};

68
backend/src/services/trials.js
View File

@ -1,10 +1,9 @@
const db = require('../db/models');
const TrialsDBApi = require('../db/api/trials');
const Activity_feed_itemsDBApi = require('../db/api/activity_feed_items');
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');
@ -15,7 +14,7 @@ module.exports = class TrialsService {
static async create(data, currentUser) {
const transaction = await db.sequelize.transaction();
try {
await TrialsDBApi.create(
const trial = await TrialsDBApi.create(
data,
{
currentUser,
@ -23,14 +22,31 @@ module.exports = class TrialsService {
},
);
await Activity_feed_itemsDBApi.create(
{
item_type: 'trial_created',
title: 'Trial Created',
summary: `New trial "${data.name}" was created.`,
occurred_at: new Date(),
link_path: `/trials/trials-view/?id=${trial.id}`,
tenant: data.tenant || currentUser.tenantId,
actor_user: currentUser.id,
organizations: data.organizations || currentUser.organizationsId,
},
{
currentUser,
transaction,
}
);
await transaction.commit();
} catch (error) {
await transaction.rollback();
throw error;
}
};
}
static async bulkImport(req, res, sendInvitationEmails = true, host) {
static async bulkImport(req, res) {
const transaction = await db.sequelize.transaction();
try {
@ -51,13 +67,32 @@ module.exports = class TrialsService {
.on('error', (error) => reject(error));
})
await TrialsDBApi.bulkImport(results, {
const trials = await TrialsDBApi.bulkImport(results, {
transaction,
ignoreDuplicates: true,
validate: true,
currentUser: req.currentUser
});
for (const trial of trials) {
await Activity_feed_itemsDBApi.create(
{
item_type: 'trial_created',
title: 'Trial Created (Bulk)',
summary: `New trial "${trial.name}" was imported.`,
occurred_at: new Date(),
link_path: `/trials/trials-view/?id=${trial.id}`,
tenant: trial.tenantId || req.currentUser.tenantId,
actor_user: req.currentUser.id,
organizations: trial.organizationsId || req.currentUser.organizationsId,
},
{
currentUser: req.currentUser,
transaction,
}
);
}
await transaction.commit();
} catch (error) {
await transaction.rollback();
@ -88,6 +123,23 @@ module.exports = class TrialsService {
},
);
await Activity_feed_itemsDBApi.create(
{
item_type: 'trial_updated',
title: 'Trial Updated',
summary: `Trial "${updatedTrials.name}" was updated.`,
occurred_at: new Date(),
link_path: `/trials/trials-view/?id=${updatedTrials.id}`,
tenant: updatedTrials.tenantId || currentUser.tenantId,
actor_user: currentUser.id,
organizations: updatedTrials.organizationsId || currentUser.organizationsId,
},
{
currentUser,
transaction,
}
);
await transaction.commit();
return updatedTrials;
@ -95,7 +147,7 @@ module.exports = class TrialsService {
await transaction.rollback();
throw error;
}
};
}
static async deleteByIds(ids, currentUser) {
const transaction = await db.sequelize.transaction();
@ -134,5 +186,3 @@ module.exports = class TrialsService {
};

52
backend/src/services/users.js
View File

@ -1,15 +1,13 @@
const db = require('../db/models');
const UsersDBApi = require('../db/api/users');
const Activity_feed_itemsDBApi = require('../db/api/activity_feed_items');
const processFile = require("../middlewares/upload");
const ValidationError = require('./notifications/errors/validation');
const csv = require('csv-parser');
const axios = require('axios');
const config = require('../config');
const stream = require('stream');
const config = require('../config');
const InvitationEmail = require('./email/list/invitation');
const EmailSender = require('./email');
const AuthService = require('./auth');
module.exports = class UsersService {
@ -28,7 +26,7 @@ module.exports = class UsersService {
'iam.errors.userAlreadyExists',
);
} else {
await UsersDBApi.create(
const newUser = await UsersDBApi.create(
{data},
globalAccess,
@ -39,6 +37,23 @@ module.exports = class UsersService {
},
);
emailsToInvite.push(email);
await Activity_feed_itemsDBApi.create(
{
item_type: 'user_created',
title: 'New Member',
summary: `${newUser.firstName} ${newUser.lastName} joined the team.`,
occurred_at: new Date(),
link_path: `/users/users-view/?id=${newUser.id}`,
tenant: newUser.tenantId || currentUser.tenantId,
actor_user: currentUser.id,
organizations: newUser.organizationsId || currentUser.organizationsId,
},
{
currentUser,
transaction,
}
);
}
} else {
throw new ValidationError('iam.errors.emailRequired')
@ -83,13 +98,32 @@ module.exports = class UsersService {
throw new ValidationError('importer.errors.userEmailMissing');
}
await UsersDBApi.bulkImport(results, {
const users = await UsersDBApi.bulkImport(results, {
transaction,
ignoreDuplicates: true,
validate: true,
currentUser: req.currentUser
});
for (const user of users) {
await Activity_feed_itemsDBApi.create(
{
item_type: 'user_created',
title: 'New Member (Bulk)',
summary: `${user.firstName} ${user.lastName} was imported.`,
occurred_at: new Date(),
link_path: `/users/users-view/?id=${user.id}`,
tenant: user.tenantId || req.currentUser.tenantId,
actor_user: req.currentUser.id,
organizations: user.organizationsId || req.currentUser.organizationsId,
},
{
currentUser: req.currentUser,
transaction,
}
);
}
emailsToInvite = results.map((result) => result.email);
await transaction.commit();
@ -142,7 +176,7 @@ module.exports = class UsersService {
await transaction.rollback();
throw error;
}
};
}
static async remove(id, currentUser) {
const transaction = await db.sequelize.transaction();
@ -174,6 +208,4 @@ module.exports = class UsersService {
throw error;
}
}
};
};

14
frontend/src/components/Activity_feed_items/TableActivity_feed_items.tsx
View File

@ -1,4 +1,4 @@
import React, { useEffect, useState, useMemo } from 'react'
import React, { useEffect, useState, useMemo, useCallback } from 'react'
import { createPortal } from 'react-dom';
import { ToastContainer, toast } from 'react-toastify';
import BaseButton from '../BaseButton'
@ -41,6 +41,8 @@ const TableSampleActivity_feed_items = ({ filterItems, setFilterItems, filters,
sort: 'desc',
},
]);
const memoizedSortModel = useMemo(() => JSON.stringify(sortModel), [sortModel]);
const { activity_feed_items, loading, count, notify: activity_feed_itemsNotify, refetch } = useAppSelector((state) => state.activity_feed_items)
const { currentUser } = useAppSelector((state) => state.auth);
@ -52,14 +54,14 @@ const TableSampleActivity_feed_items = ({ filterItems, setFilterItems, filters,
pagesList.push(i);
}
const loadData = async (page = currentPage, request = filterRequest) => {
const loadData = useCallback(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 }));
};
}, [currentPage, filterRequest, sortModel, dispatch]);
useEffect(() => {
if (activity_feed_itemsNotify.showNotification) {
@ -70,14 +72,14 @@ const TableSampleActivity_feed_items = ({ filterItems, setFilterItems, filters,
useEffect(() => {
if (!currentUser) return;
loadData();
}, [sortModel, currentUser]);
}, [memoizedSortModel, currentUser, loadData]);
useEffect(() => {
if (refetch) {
loadData(0);
dispatch(setRefetch(false));
}
}, [refetch, dispatch]);
}, [refetch, dispatch, loadData]);
const [isModalInfoActive, setIsModalInfoActive] = useState(false)
const [isModalTrashActive, setIsModalTrashActive] = useState(false)
@ -473,4 +475,4 @@ const TableSampleActivity_feed_items = ({ filterItems, setFilterItems, filters,
)
}
export default TableSampleActivity_feed_items
export default TableSampleActivity_feed_items

6
frontend/src/components/AsideMenuLayer.tsx
View File

@ -3,10 +3,8 @@ import { mdiLogout, mdiClose } from '@mdi/js'
import BaseIcon from './BaseIcon'
import AsideMenuList from './AsideMenuList'
import { MenuAsideItem } from '../interfaces'
import { useAppSelector } from '../stores/hooks'
import { useAppDispatch, useAppSelector } from '../stores/hooks'
import Link from 'next/link';
import { useAppDispatch } from '../stores/hooks';
import { createAsyncThunk } from '@reduxjs/toolkit';
import axios from 'axios';
@ -91,4 +89,4 @@ export default function AsideMenuLayer({ menu, className = '', ...props }: Props
</div>
</aside>
)
}
}

181
frontend/src/components/Form_submissions/configureForm_submissionsCols.tsx
View File

@ -38,31 +38,9 @@ export const loadColumns = async (
}
const hasUpdatePermission = hasPermission(user, 'UPDATE_FORM_SUBMISSIONS')
const hasTenant = !!(user?.tenant?.id || user?.tenantId);
return [
{
field: 'tenant',
headerName: 'Tenant',
flex: 1,
minWidth: 120,
filterable: false,
headerClassName: 'datagrid--header',
cellClassName: 'datagrid--cell',
editable: hasUpdatePermission,
sortable: false,
type: 'singleSelect',
getOptionValue: (value: any) => value?.id,
getOptionLabel: (value: any) => value?.label,
valueOptions: await callOptionsApi('tenants'),
valueGetter: (params: GridValueGetterParams) =>
params?.value?.id ?? params?.value,
},
const columns: any[] = [
{
field: 'form_template',
headerName: 'FormTemplate',
@ -86,22 +64,46 @@ export const loadColumns = async (
},
{
field: 'trials',
headerName: 'Trials',
field: 'project',
headerName: 'Project',
flex: 1,
minWidth: 120,
filterable: false,
headerClassName: 'datagrid--header',
cellClassName: 'datagrid--cell',
editable: false,
editable: hasUpdatePermission,
sortable: false,
type: 'singleSelect',
valueFormatter: ({ value }) =>
dataFormatter.trialsManyListFormatter(value).join(', '),
renderEditCell: (params) => (
<DataGridMultiSelect {...params} entityName={'trials'}/>
),
getOptionValue: (value: any) => value?.id,
getOptionLabel: (value: any) => value?.label,
valueOptions: await callOptionsApi('projects'),
valueGetter: (params: GridValueGetterParams) =>
params?.value?.id ?? params?.value,
},
{
field: 'trial',
headerName: 'Trial',
flex: 1,
minWidth: 120,
filterable: false,
headerClassName: 'datagrid--header',
cellClassName: 'datagrid--cell',
editable: hasUpdatePermission,
sortable: false,
type: 'singleSelect',
getOptionValue: (value: any) => value?.id,
getOptionLabel: (value: any) => value?.label,
valueOptions: await callOptionsApi('trials'),
valueGetter: (params: GridValueGetterParams) =>
params?.value?.id ?? params?.value,
},
@ -127,28 +129,6 @@ export const loadColumns = async (
},
{
field: 'submitted_by_user',
headerName: 'SubmittedByUser',
flex: 1,
minWidth: 120,
filterable: false,
headerClassName: 'datagrid--header',
cellClassName: 'datagrid--cell',
editable: hasUpdatePermission,
sortable: false,
type: 'singleSelect',
getOptionValue: (value: any) => value?.id,
getOptionLabel: (value: any) => value?.label,
valueOptions: await callOptionsApi('users'),
valueGetter: (params: GridValueGetterParams) =>
params?.value?.id ?? params?.value,
},
{
field: 'submitted_at',
headerName: 'SubmittedAt',
@ -168,8 +148,8 @@ export const loadColumns = async (
},
{
field: 'status',
headerName: 'Status',
field: 'organizations',
headerName: 'organizations',
flex: 1,
minWidth: 120,
filterable: false,
@ -179,68 +159,13 @@ export const loadColumns = async (
editable: hasUpdatePermission,
},
{
field: 'notes',
headerName: 'Notes',
flex: 1,
minWidth: 120,
filterable: false,
headerClassName: 'datagrid--header',
cellClassName: 'datagrid--cell',
editable: hasUpdatePermission,
},
{
field: 'attachments',
headerName: 'Attachments',
flex: 1,
minWidth: 120,
filterable: false,
headerClassName: 'datagrid--header',
cellClassName: 'datagrid--cell',
editable: false,
sortable: false,
renderCell: (params: GridValueGetterParams) => (
<>
{dataFormatter.filesFormatter(params.row.attachments).map(link => (
<button
key={link.publicUrl}
onClick={(e) => saveFile(e, link.publicUrl, link.name)}
>
{link.name}
</button>
))}
</>
),
},
{
field: 'images',
headerName: 'Images',
flex: 1,
minWidth: 120,
filterable: false,
headerClassName: 'datagrid--header',
cellClassName: 'datagrid--cell',
editable: false,
sortable: false,
renderCell: (params: GridValueGetterParams) => (
<ImageField
name={'Avatar'}
image={params?.row?.images}
className='w-24 h-24 mx-auto lg:w-6 lg:h-6'
/>
),
type: 'singleSelect',
getOptionValue: (value: any) => value?.id,
getOptionLabel: (value: any) => value?.label,
valueOptions: await callOptionsApi('organizations'),
valueGetter: (params: GridValueGetterParams) =>
params?.value?.id ?? params?.value,
},
@ -268,4 +193,26 @@ export const loadColumns = async (
},
},
];
if (!hasTenant) {
columns.unshift({
field: 'tenant',
headerName: 'Tenant',
flex: 1,
minWidth: 120,
filterable: false,
headerClassName: 'datagrid--header',
cellClassName: 'datagrid--cell',
editable: hasUpdatePermission,
sortable: false,
type: 'singleSelect',
getOptionValue: (value: any) => value?.id,
getOptionLabel: (value: any) => value?.label,
valueOptions: await callOptionsApi('tenants'),
valueGetter: (params: GridValueGetterParams) =>
params?.value?.id ?? params?.value,
});
}
return columns;
};

52
frontend/src/components/NavBar.tsx
View File

@ -6,14 +6,17 @@ import NavBarItemPlain from './NavBarItemPlain'
import NavBarMenuList from './NavBarMenuList'
import { MenuNavBarItem } from '../interfaces'
import { useAppSelector } from '../stores/hooks';
import NavBarItem from './NavBarItem'
type Props = {
menu: MenuNavBarItem[]
leftMenu?: MenuNavBarItem[]
className: string
children: ReactNode
isTopNav?: boolean
}
export default function NavBar({ menu, className = '', children }: Props) {
export default function NavBar({ menu, leftMenu = [], className = '', children, isTopNav = false }: Props) {
const [isMenuNavBarActive, setIsMenuNavBarActive] = useState(false)
const [isScrolled, setIsScrolled] = useState(false);
const bgColor = useAppSelector((state) => state.style.bgLayoutColor);
@ -35,23 +38,50 @@ 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} ${isTopNav ? 'h-auto lg:h-28' : 'h-14'} z-30 transition-position w-screen lg:w-auto dark:bg-dark-800`}
>
<div className={`flex lg:items-stretch ${containerMaxW} ${isScrolled && `border-b border-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">
<NavBarItemPlain onClick={handleMenuNavBarToggleClick}>
<BaseIcon path={isMenuNavBarActive ? mdiClose : mdiDotsVertical} size="24" />
</NavBarItemPlain>
<div className={`flex flex-col ${containerMaxW} ${isScrolled && `border-b border-pavitra-400 dark:border-dark-700`}`}>
{/* Row 1: Children and Right Menu (always on Row 1) */}
<div className="flex items-stretch h-14 w-full">
<div className="flex-1 flex items-stretch overflow-hidden">
{children}
</div>
<div className="flex-none items-stretch flex h-14 lg:hidden">
<NavBarItemPlain onClick={handleMenuNavBarToggleClick}>
<BaseIcon path={isMenuNavBarActive ? mdiClose : mdiDotsVertical} size="24" />
</NavBarItemPlain>
</div>
<div className="hidden lg:flex items-center">
<NavBarMenuList menu={menu} />
</div>
</div>
{/* Row 2: Navigation (Left Menu) for Top Nav Orientation */}
{isTopNav && (
<div className="hidden lg:flex items-stretch h-14 border-t border-gray-100 dark:border-dark-700 overflow-x-auto no-scrollbar">
{leftMenu.length > 0 && (
<div className="flex items-stretch">
{leftMenu.map((item, index) => (
<NavBarItem key={index} item={item} />
))}
</div>
)}
</div>
)}
{/* Mobile menu dropdown */}
<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`}
} lg:hidden flex items-center max-h-screen-menu overflow-y-auto absolute w-screen top-14 left-0 ${bgColor} shadow-lg dark:bg-dark-800`}
>
<NavBarMenuList menu={menu} />
<div className="w-full">
<NavBarMenuList menu={[...leftMenu, ...menu]} />
</div>
</div>
</div>
</nav>
)
}
}

5
frontend/src/components/NavBarItem.tsx
View File

@ -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'
@ -129,4 +128,4 @@ export default function NavBarItem({ item }: Props) {
}
return <div className={componentClass} ref={excludedRef}>{NavBarItemComponentContents}</div>
}
}

71
frontend/src/components/Projects/configureProjectsCols.tsx
View File

@ -1,9 +1,11 @@
import Link from 'next/link';
import React from 'react';
import BaseIcon from '../BaseIcon';
import { mdiEye, mdiTrashCan, mdiPencilOutline } from '@mdi/js';
import axios from 'axios';
import {
GridActionsCellItem,
GridRenderCellParams,
GridRowParams,
GridValueGetterParams,
} from '@mui/x-data-grid';
@ -38,31 +40,9 @@ export const loadColumns = async (
}
const hasUpdatePermission = hasPermission(user, 'UPDATE_PROJECTS')
const hasTenant = !!(user?.tenant?.id || user?.tenantId);
return [
{
field: 'tenant',
headerName: 'Tenant',
flex: 1,
minWidth: 120,
filterable: false,
headerClassName: 'datagrid--header',
cellClassName: 'datagrid--cell',
editable: hasUpdatePermission,
sortable: false,
type: 'singleSelect',
getOptionValue: (value: any) => value?.id,
getOptionLabel: (value: any) => value?.label,
valueOptions: await callOptionsApi('tenants'),
valueGetter: (params: GridValueGetterParams) =>
params?.value?.id ?? params?.value,
},
const columns: any[] = [
{
field: 'name',
headerName: 'Name',
@ -74,7 +54,14 @@ export const loadColumns = async (
editable: hasUpdatePermission,
renderCell: (params: GridRenderCellParams) => {
if (!params.row?.id) return null;
return (
<Link href={`/projects/projects-view/?id=${params.row.id}`} className="text-blue-600 hover:underline font-semibold">
{params.row.name || 'Unnamed Project'}
</Link>
)
},
},
@ -107,7 +94,7 @@ export const loadColumns = async (
type: 'dateTime',
valueGetter: (params: GridValueGetterParams) =>
new Date(params.row.start_date),
params.row?.start_date ? new Date(params.row.start_date) : null,
},
@ -125,7 +112,7 @@ export const loadColumns = async (
type: 'dateTime',
valueGetter: (params: GridValueGetterParams) =>
new Date(params.row.estimated_end_date),
params.row?.estimated_end_date ? new Date(params.row.estimated_end_date) : null,
},
@ -177,9 +164,9 @@ export const loadColumns = async (
editable: false,
sortable: false,
renderCell: (params: GridValueGetterParams) => (
renderCell: (params: GridRenderCellParams) => (
<>
{dataFormatter.filesFormatter(params.row.attachments).map(link => (
{dataFormatter.filesFormatter(params.row?.attachments).map(link => (
<button
key={link.publicUrl}
onClick={(e) => saveFile(e, link.publicUrl, link.name)}
@ -203,7 +190,7 @@ export const loadColumns = async (
editable: false,
sortable: false,
renderCell: (params: GridValueGetterParams) => (
renderCell: (params: GridRenderCellParams) => (
<ImageField
name={'Avatar'}
image={params?.row?.images}
@ -237,4 +224,26 @@ export const loadColumns = async (
},
},
];
};
if (!hasTenant) {
columns.unshift({
field: 'tenant',
headerName: 'Tenant',
flex: 1,
minWidth: 120,
filterable: false,
headerClassName: 'datagrid--header',
cellClassName: 'datagrid--cell',
editable: hasUpdatePermission,
sortable: false,
type: 'singleSelect',
getOptionValue: (value: any) => value?.id,
getOptionLabel: (value: any) => value?.label,
valueOptions: await callOptionsApi('tenants'),
valueGetter: (params: GridValueGetterParams) =>
params?.value?.id ?? params?.value,
});
}
return columns;
};

37
frontend/src/components/Tenants/TableTenants.tsx
View File

@ -1,16 +1,18 @@
import React, { useEffect, useState, useMemo } from 'react'
import React, { useEffect, useState, useMemo, useCallback } 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/tenants/tenantsSlice'
import { impersonate } from '../../stores/authSlice'
import { useAppDispatch, useAppSelector } from '../../stores/hooks'
import { useRouter } from 'next/router'
import { Field, Form, Formik } from "formik";
import {
DataGrid,
GridColDef,
GridSortModel,
} from '@mui/x-data-grid';
import {loadColumns} from "./configureTenantsCols";
import _ from 'lodash';
@ -33,12 +35,14 @@ const TableSampleTenants = ({ filterItems, setFilterItems, filters, showGrid })
const [filterRequest, setFilterRequest] = React.useState('');
const [columns, setColumns] = useState<GridColDef[]>([]);
const [selectedRows, setSelectedRows] = useState([]);
const [sortModel, setSortModel] = useState([
const [sortModel, setSortModel] = useState<GridSortModel>([
{
field: '',
sort: 'desc',
},
]);
const memoizedSortModel = useMemo(() => JSON.stringify(sortModel), [sortModel]);
const { tenants, loading, count, notify: tenantsNotify, refetch } = useAppSelector((state) => state.tenants)
const { currentUser } = useAppSelector((state) => state.auth);
@ -50,14 +54,15 @@ const TableSampleTenants = ({ filterItems, setFilterItems, filters, showGrid })
pagesList.push(i);
}
const loadData = async (page = currentPage, request = filterRequest) => {
const loadData = useCallback(async (page = currentPage, request = filterRequest) => {
if (page !== currentPage) setCurrentPage(page);
if (request !== filterRequest) setFilterRequest(request);
const { sort, field } = sortModel[0];
const sortItem = sortModel[0] || { field: '', sort: 'desc' };
const { sort, field } = sortItem;
const query = `?page=${page}&limit=${perPage}${request}&sort=${sort}&field=${field}`;
const query = `?page=${page}&limit=${perPage}${request}&sort=${sort || 'desc'}&field=${field || ''}`;
dispatch(fetch({ limit: perPage, page, query }));
};
}, [dispatch, currentPage, filterRequest, sortModel]);
useEffect(() => {
if (tenantsNotify.showNotification) {
@ -68,14 +73,14 @@ const TableSampleTenants = ({ filterItems, setFilterItems, filters, showGrid })
useEffect(() => {
if (!currentUser) return;
loadData();
}, [sortModel, currentUser]);
}, [memoizedSortModel, currentUser, loadData]);
useEffect(() => {
if (refetch) {
loadData(0);
dispatch(setRefetch(false));
}
}, [refetch, dispatch]);
}, [refetch, dispatch, loadData]);
const [isModalInfoActive, setIsModalInfoActive] = useState(false)
const [isModalTrashActive, setIsModalTrashActive] = useState(false)
@ -85,10 +90,6 @@ const TableSampleTenants = ({ filterItems, setFilterItems, filters, showGrid })
setIsModalTrashActive(false)
}
const handleDeleteModalAction = (id: string) => {
setId(id)
setIsModalTrashActive(true)
@ -101,6 +102,11 @@ const TableSampleTenants = ({ filterItems, setFilterItems, filters, showGrid })
}
};
const handleImpersonate = async (tenantId: string) => {
await dispatch(impersonate(tenantId));
router.push('/dashboard');
};
const generateFilterRequests = useMemo(() => {
let request = '&';
filterItems.forEach((item) => {
@ -179,6 +185,7 @@ const TableSampleTenants = ({ filterItems, setFilterItems, filters, showGrid })
handleDeleteModalAction,
`tenants`,
currentUser,
handleImpersonate
).then((newCols) => setColumns(newCols));
}, [currentUser]);
@ -244,9 +251,7 @@ const TableSampleTenants = ({ filterItems, setFilterItems, filters, showGrid })
setSelectedRows(ids)
}}
onSortModelChange={(params) => {
params.length
? setSortModel(params)
: setSortModel([{ field: '', sort: 'desc' }]);
setSortModel(params.length ? params : [{ field: '', sort: 'desc' }]);
}}
rowCount={count}
pageSizeOptions={[10]}
@ -460,4 +465,4 @@ const TableSampleTenants = ({ filterItems, setFilterItems, filters, showGrid })
)
}
export default TableSampleTenants
export default TableSampleTenants

19
frontend/src/components/Tenants/configureTenantsCols.tsx
View File

@ -21,7 +21,8 @@ export const loadColumns = async (
onDelete: Params,
entityName: string,
user
user,
onImpersonate?: (id: string) => void
) => {
async function callOptionsApi(entityName: string) {
@ -38,6 +39,7 @@ export const loadColumns = async (
}
const hasUpdatePermission = hasPermission(user, 'UPDATE_TENANTS')
const isSuperAdmin = user?.app_role?.globalAccess;
return [
@ -49,9 +51,18 @@ export const loadColumns = async (
filterable: false,
headerClassName: 'datagrid--header',
cellClassName: 'datagrid--cell',
renderCell: (params: GridValueGetterParams) => {
return (
<div
className={`text-blue-600 dark:text-blue-400 ${isSuperAdmin ? 'cursor-pointer hover:underline font-bold' : ''}`}
onClick={() => isSuperAdmin && onImpersonate && onImpersonate(params.row.id)}
>
{params.row.name}
</div>
)
},
editable: hasUpdatePermission,
editable: hasUpdatePermission && !isSuperAdmin,
},
@ -164,4 +175,4 @@ export const loadColumns = async (
},
},
];
};
};

50
frontend/src/components/Trials/configureTrialsCols.tsx
View File

@ -38,31 +38,9 @@ export const loadColumns = async (
}
const hasUpdatePermission = hasPermission(user, 'UPDATE_TRIALS')
const hasTenant = !!(user?.tenant?.id || user?.tenantId);
return [
{
field: 'tenant',
headerName: 'Tenant',
flex: 1,
minWidth: 120,
filterable: false,
headerClassName: 'datagrid--header',
cellClassName: 'datagrid--cell',
editable: hasUpdatePermission,
sortable: false,
type: 'singleSelect',
getOptionValue: (value: any) => value?.id,
getOptionLabel: (value: any) => value?.label,
valueOptions: await callOptionsApi('tenants'),
valueGetter: (params: GridValueGetterParams) =>
params?.value?.id ?? params?.value,
},
const columns: any[] = [
{
field: 'project',
headerName: 'Project',
@ -296,4 +274,26 @@ export const loadColumns = async (
},
},
];
};
if (!hasTenant) {
columns.unshift({
field: 'tenant',
headerName: 'Tenant',
flex: 1,
minWidth: 120,
filterable: false,
headerClassName: 'datagrid--header',
cellClassName: 'datagrid--cell',
editable: hasUpdatePermission,
sortable: false,
type: 'singleSelect',
getOptionValue: (value: any) => value?.id,
getOptionLabel: (value: any) => value?.label,
valueOptions: await callOptionsApi('tenants'),
valueGetter: (params: GridValueGetterParams) =>
params?.value?.id ?? params?.value,
});
}
return columns;
};

5
frontend/src/interfaces/index.ts
View File

@ -14,6 +14,7 @@ export type MenuAsideItem = {
withDevider?: boolean;
menu?: MenuAsideItem[]
permissions?: string | string[]
isOrientationTopOnly?: boolean
}
export type MenuNavBarItem = {
@ -27,6 +28,8 @@ export type MenuNavBarItem = {
isToggleLightDark?: boolean
isCurrentUser?: boolean
menu?: MenuNavBarItem[]
isOrientationTopOnly?: boolean
permissions?: string | string[]
}
export type ColorKey = 'white' | 'light' | 'contrast' | 'success' | 'danger' | 'warning' | 'info'
@ -106,4 +109,4 @@ export type StyleKey = 'white' | 'basic'
export type UserForm = {
name: string
email: string
}
}

259
frontend/src/layouts/Authenticated.tsx
View File

@ -1,129 +1,206 @@
import React, { ReactNode, useEffect } from 'react'
import { useState } from 'react'
import jwt from 'jsonwebtoken';
import { mdiForwardburger, mdiBackburger, mdiMenu } from '@mdi/js'
import React, { ReactNode, useState, useMemo, useEffect } from 'react'
import { useRouter } from 'next/router'
import AsideMenu from '../components/AsideMenu'
import NavBar from '../components/NavBar'
import FooterBar from '../components/FooterBar'
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";
import {hasPermission} from "../helpers/userPermissions";
import { setDarkMode } from '../stores/styleSlice'
import { mdiLoading, mdiMenu } from '@mdi/js'
import BaseIcon from '../components/BaseIcon'
import { findMe } from '../stores/authSlice'
import { useTranslation } from 'next-i18next'
import Search from '../components/Search'
import NavBarItemPlain from '../components/NavBarItemPlain'
import { hasPermission } from '../helpers/userPermissions'
import { fetch as fetchOrganizations } from '../stores/organizations/organizationsSlice'
import Link from 'next/link'
type Props = {
children: ReactNode
permission?: string
}
export default function LayoutAuthenticated({
children,
permission
}: Props) {
export default function LayoutAuthenticated({ children }: Props) {
const dispatch = useAppDispatch()
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
localToken = localStorage.getItem('token')
}
const isTokenValid = () => {
const token = localStorage.getItem('token');
if (!token) return;
const date = new Date().getTime() / 1000;
const data = jwt.decode(token);
if (!data) return;
return date < data.exp;
};
useEffect(() => {
dispatch(findMe());
if (!isTokenValid()) {
dispatch(logoutUser());
router.push('/login');
}
}, [token, localToken]);
useEffect(() => {
if (!permission || !currentUser) return;
if (!hasPermission(currentUser, permission)) router.push('/error');
}, [currentUser, permission]);
const { i18n } = useTranslation()
const darkMode = useAppSelector((state) => state.style.darkMode)
const [isAsideMobileExpanded, setIsAsideMobileExpanded] = useState(false)
const [isAsideLgActive, setIsAsideLgActive] = useState(false)
const router = useRouter()
const { currentUser, isFetching } = useAppSelector((state) => state.auth)
const { organizations: allOrganizations } = useAppSelector((state) => state.organizations)
const organizations = currentUser?.organizations || currentUser?.organization;
const orgData = Array.isArray(organizations) ? organizations[0] : organizations;
// If user has no organization linked, try to find one from the organizations store (for Super Admins)
const fallbackOrg = useMemo(() => {
if (orgData) return orgData;
if (Array.isArray(allOrganizations) && allOrganizations.length > 0) {
return allOrganizations[0];
}
return null;
}, [orgData, allOrganizations]);
const navOrientation = fallbackOrg?.navOrientation || 'side';
// Fetch organizations if missing (especially for Super Admin to get preferences)
useEffect(() => {
if (!orgData && currentUser?.app_role?.name === 'Super Administrator' && (!allOrganizations || allOrganizations.length === 0)) {
dispatch(fetchOrganizations({ limit: 1 }));
}
}, [orgData, currentUser, allOrganizations, dispatch]);
const filteredMenuAside = useMemo(() => {
return menuAside.filter(item => {
// Filter by permissions
if (item.permissions && !hasPermission(currentUser, item.permissions)) {
return false;
}
// Filter by orientation
if (navOrientation === 'top' && item.isOrientationTopOnly) {
return false;
}
return true;
}).map(item => {
if (item.menu) {
return {
...item,
menu: item.menu.filter(subItem => {
if (subItem.permissions && !hasPermission(currentUser, subItem.permissions)) {
return false;
}
return true;
})
}
}
return item;
});
}, [currentUser, navOrientation]);
const filteredMenuNavBarRight = useMemo(() => {
return menuNavBar.filter(item => {
// Filter by permissions
if (item.permissions && !hasPermission(currentUser, item.permissions)) {
return false;
}
// Filter by orientation: only those NOT marked as isOrientationTopOnly go to the right menu
// EXCEPT when we are in side mode, then we don't show isOrientationTopOnly items at all in NavBar
if (navOrientation === 'side' && item.isOrientationTopOnly) {
return false;
}
if (navOrientation === 'top' && item.isOrientationTopOnly) {
return false;
}
return true;
});
}, [currentUser, navOrientation]);
const filteredMenuNavBarLeft = useMemo(() => {
if (navOrientation !== 'top') return [];
return menuNavBar.filter(item => {
if (item.permissions && !hasPermission(currentUser, item.permissions)) {
return false;
}
return item.isOrientationTopOnly;
});
}, [currentUser, navOrientation]);
useEffect(() => {
const handleRouteChangeStart = () => {
const handleRouteChange = () => {
setIsAsideMobileExpanded(false)
setIsAsideLgActive(false)
}
router.events.on('routeChangeStart', handleRouteChangeStart)
router.events.on('routeChangeStart', handleRouteChange)
// If the component is unmounted, unsubscribe
// from the event with the `off` method:
return () => {
router.events.off('routeChangeStart', handleRouteChangeStart)
router.events.off('routeChangeStart', handleRouteChange)
}
}, [router.events, dispatch])
}, [router.events])
useEffect(() => {
if (localStorage.getItem('token') && !currentUser && !isFetching) {
dispatch(findMe())
}
}, [currentUser, dispatch, isFetching])
const layoutAsidePadding = 'xl:pl-60'
useEffect(() => {
if (typeof window !== 'undefined') {
const isDarkMode = darkMode || localStorage.getItem('darkMode') === '1'
dispatch(setDarkMode(isDarkMode))
}
}, [darkMode, dispatch])
useEffect(() => {
if (i18n.language !== router.locale) {
i18n.changeLanguage(router.locale)
}
}, [router.locale, i18n])
if (isFetching || !currentUser) {
return (
<div className="flex h-screen items-center justify-center bg-gray-50 dark:bg-dark-900">
<BaseIcon path={mdiLoading} size={48} className="animate-spin text-emerald-600" />
</div>
)
}
const layoutAsidePadding = navOrientation === 'top' ? '' : 'xl:pl-60'
const navHeightPadding = navOrientation === 'top' ? 'pt-14 lg:pt-28' : 'pt-14'
const organizationName = fallbackOrg?.name;
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`}
} ${navHeightPadding} min-h-screen w-screen transition-position lg:w-auto bg-gray-50 dark:bg-dark-800 dark:text-slate-100`}
>
<NavBar
menu={menuNavBar}
menu={filteredMenuNavBarRight}
leftMenu={filteredMenuNavBarLeft}
isTopNav={navOrientation === 'top'}
className={`${layoutAsidePadding} ${isAsideMobileExpanded ? 'ml-60 lg:ml-0' : ''}`}
>
<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>
{navOrientation === 'side' && (
<div className="flex items-center">
<NavBarItemPlain
display="flex lg:hidden"
onClick={() => setIsAsideMobileExpanded(!isAsideMobileExpanded)}
>
<BaseIcon path={mdiMenu} size="24" />
</NavBarItemPlain>
<NavBarItemPlain
display="hidden lg:flex xl:hidden"
onClick={() => setIsAsideLgActive(true)}
>
<BaseIcon path={mdiMenu} size="24" />
</NavBarItemPlain>
</div>
)}
{navOrientation === 'top' && (
<Link href="/dashboard" className="flex items-center px-6">
<b className="font-black">Trial Tracker</b>
{organizationName && <span className="ml-2 text-sm text-gray-500 hidden md:inline">| {organizationName}</span>}
</Link>
)}
<div className="flex items-center p-3 lg:p-0 flex-1">
<Search />
</div>
</NavBar>
<AsideMenu
isAsideMobileExpanded={isAsideMobileExpanded}
isAsideLgActive={isAsideLgActive}
menu={menuAside}
onAsideLgClose={() => setIsAsideLgActive(false)}
/>
{navOrientation === 'side' && (
<AsideMenu
isAsideMobileExpanded={isAsideMobileExpanded}
isAsideLgActive={isAsideLgActive}
menu={filteredMenuAside}
onAsideLgClose={() => setIsAsideLgActive(false)}
/>
)}
{children}
<FooterBar>Hand-crafted & Made with ❤️</FooterBar>
<FooterBar />
</div>
</div>
)
}
}

175
frontend/src/menuAside.ts
View File

@ -4,152 +4,105 @@ import { MenuAsideItem } from './interfaces'
const menuAside: MenuAsideItem[] = [
{
href: '/dashboard',
icon: icon.mdiViewDashboardOutline,
label: 'Dashboard',
},
{
href: '/users/users-list',
label: 'Users',
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
icon: icon.mdiAccountGroup ?? icon.mdiTable,
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'
icon: icon.mdiHomeOutline,
label: 'Home',
isOrientationTopOnly: true
},
{
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: '/locations/locations-list',
label: 'Locations',
// 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_LOCATIONS'
icon: icon.mdiDomain,
permissions: 'READ_TENANTS',
isOrientationTopOnly: true
},
{
href: '/projects/projects-list',
label: 'Projects',
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
icon: 'mdiFolderOutline' in icon ? icon['mdiFolderOutline' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
permissions: 'READ_PROJECTS'
},
{
href: '/trial_types/trial_types-list',
label: 'Trial types',
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
icon: 'mdiFlaskOutline' in icon ? icon['mdiFlaskOutline' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
permissions: 'READ_TRIAL_TYPES'
icon: icon.mdiFolderOutline,
permissions: 'READ_PROJECTS',
isOrientationTopOnly: true
},
{
href: '/trials/trials-list',
label: 'Trials',
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
icon: 'mdiTestTube' in icon ? icon['mdiTestTube' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
permissions: 'READ_TRIALS'
},
{
href: '/form_templates/form_templates-list',
label: 'Form templates',
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
icon: 'mdiFormSelect' in icon ? icon['mdiFormSelect' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
permissions: 'READ_FORM_TEMPLATES'
},
{
href: '/form_fields/form_fields-list',
label: 'Form fields',
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
icon: 'mdiFormatListBulleted' in icon ? icon['mdiFormatListBulleted' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
permissions: 'READ_FORM_FIELDS'
},
{
href: '/form_field_choices/form_field_choices-list',
label: 'Form field choices',
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
icon: 'mdiPlaylistEdit' in icon ? icon['mdiPlaylistEdit' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
permissions: 'READ_FORM_FIELD_CHOICES'
icon: icon.mdiTestTube,
permissions: 'READ_TRIALS',
isOrientationTopOnly: true
},
{
href: '/form_submissions/form_submissions-list',
label: 'Form submissions',
label: 'Track-IT',
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
icon: 'mdiClipboardTextOutline' in icon ? icon['mdiClipboardTextOutline' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
permissions: 'READ_FORM_SUBMISSIONS'
icon: icon.mdiClipboardTextOutline,
permissions: 'READ_FORM_SUBMISSIONS',
isOrientationTopOnly: true
},
{
href: '/submission_values/submission_values-list',
label: 'Submission values',
href: '/users/users-list',
label: 'Users',
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
icon: 'mdiDatabaseOutline' in icon ? icon['mdiDatabaseOutline' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
permissions: 'READ_SUBMISSION_VALUES'
},
{
href: '/activity_feed_items/activity_feed_items-list',
label: 'Activity feed items',
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
icon: 'mdiTimelineTextOutline' in icon ? icon['mdiTimelineTextOutline' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
permissions: 'READ_ACTIVITY_FEED_ITEMS'
icon: icon.mdiAccountGroup,
permissions: 'READ_USERS',
isOrientationTopOnly: true
},
{
href: '/reports/reports-list',
label: 'Reports',
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
icon: 'mdiFileChartOutline' in icon ? icon['mdiFileChartOutline' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
permissions: 'READ_REPORTS'
icon: icon.mdiFileChartOutline,
permissions: 'READ_REPORTS',
isOrientationTopOnly: true
},
{
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.mdiCogOutline,
menu: [
{
href: '/settings/company-preferences',
label: 'Company Preferences',
permissions: 'UPDATE_ORGANIZATIONS'
},
{
href: '/trial_types/trial_types-list',
label: 'Trial Types',
permissions: 'READ_TRIAL_TYPES'
},
{
href: '/form_templates/form_templates-list',
label: 'Form Templates',
permissions: 'READ_FORM_TEMPLATES'
},
{
href: '/form_fields/form_fields-list',
label: 'Form Fields',
permissions: 'READ_FORM_FIELDS'
},
{
href: '/form_field_choices/form_field_choices-list',
label: 'Field Choices',
permissions: 'READ_FORM_FIELD_CHOICES'
},
{
href: '/locations/locations-list',
label: 'Locations',
permissions: 'READ_LOCATIONS'
},
{
href: '/submission_values/submission_values-list',
label: 'Data Sets',
permissions: 'READ_SUBMISSION_VALUES'
},
]
},
]
export default menuAside
export default menuAside

114
frontend/src/menuNavBar.ts
View File

@ -1,19 +1,115 @@
import {
mdiMenu,
mdiClockOutline,
mdiCloud,
mdiCrop,
mdiAccount,
mdiCogOutline,
mdiEmail,
mdiLogout,
mdiThemeLightDark,
mdiGithub,
mdiVuejs,
mdiDomain,
mdiFileCode,
mdiAccountCircle,
mdiHomeOutline,
mdiFolderOutline,
mdiTestTube,
mdiClipboardTextOutline,
mdiAccountGroup,
mdiFileChartOutline,
mdiCogOutline
} from '@mdi/js'
import { MenuNavBarItem } from './interfaces'
const menuNavBar: MenuNavBarItem[] = [
{
href: '/dashboard',
icon: mdiHomeOutline,
label: 'Home',
isOrientationTopOnly: true
},
{
href: '/projects/projects-list',
label: 'Projects',
icon: mdiFolderOutline,
isOrientationTopOnly: true
},
{
href: '/trials/trials-list',
label: 'Trials',
icon: mdiTestTube,
isOrientationTopOnly: true
},
{
href: '/form_submissions/form_submissions-list',
label: 'Track-IT',
icon: mdiClipboardTextOutline,
isOrientationTopOnly: true
},
{
href: '/users/users-list',
label: 'Users',
icon: mdiAccountGroup,
isOrientationTopOnly: true
},
{
href: '/reports/reports-list',
label: 'Reports',
icon: mdiFileChartOutline,
isOrientationTopOnly: true
},
{
label: 'Settings',
icon: mdiCogOutline,
isOrientationTopOnly: true,
menu: [
{
href: '/settings/company-preferences',
label: 'Company Preferences',
permissions: 'UPDATE_ORGANIZATIONS'
},
{
href: '/trial_types/trial_types-list',
label: 'Trial Types',
permissions: 'READ_TRIAL_TYPES'
},
{
href: '/form_templates/form_templates-list',
label: 'Form Templates',
permissions: 'READ_FORM_TEMPLATES'
},
{
href: '/form_fields/form_fields-list',
label: 'Form Fields',
permissions: 'READ_FORM_FIELDS'
},
{
href: '/form_field_choices/form_field_choices-list',
label: 'Field Choices',
permissions: 'READ_FORM_FIELD_CHOICES'
},
{
href: '/locations/locations-list',
label: 'Locations',
permissions: 'READ_LOCATIONS'
},
{
href: '/submission_values/submission_values-list',
label: 'Data Sets',
permissions: 'READ_SUBMISSION_VALUES'
},
]
},
{
href: '/tenants/tenants-list',
label: 'Tenants',
icon: mdiDomain,
},
{
href: '/profile',
label: 'Profile',
icon: mdiAccountCircle,
},
{
href: '/api-docs',
target: '_blank',
label: 'Swagger API',
icon: mdiFileCode,
},
{
isCurrentUser: true,
menu: [
@ -50,4 +146,4 @@ export const webPagesNavBar = [
];
export default menuNavBar
export default menuNavBar

766
frontend/src/pages/dashboard.tsx
View File

@ -1,6 +1,6 @@
import * as icon from '@mdi/js';
import Head from 'next/head'
import React from 'react'
import React, { useCallback, useMemo } from 'react'
import axios from 'axios';
import type { ReactElement } from 'react'
import LayoutAuthenticated from '../layouts/Authenticated'
@ -9,13 +9,18 @@ import SectionTitleLineWithButton from '../components/SectionTitleLineWithButton
import BaseIcon from "../components/BaseIcon";
import { getPageTitle } from '../config'
import Link from "next/link";
import moment from 'moment';
import { hasPermission } from "../helpers/userPermissions";
import { fetchWidgets } from '../stores/roles/rolesSlice';
import { WidgetCreator } from '../components/WidgetCreator/WidgetCreator';
import { SmartWidget } from '../components/SmartWidget/SmartWidget';
import UserAvatar from '../components/UserAvatar';
import CardBox from '../components/CardBox';
import { useAppDispatch, useAppSelector } from '../stores/hooks';
import { fetch as fetchActivityItems } from '../stores/activity_feed_items/activity_feed_itemsSlice';
const Dashboard = () => {
const dispatch = useAppDispatch();
const iconsColor = useAppSelector((state) => state.style.iconsColor);
@ -24,592 +29,231 @@ const Dashboard = () => {
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 [locations, setLocations] = React.useState(loadingMessage);
const [projects, setProjects] = React.useState(loadingMessage);
const [trial_types, setTrial_types] = React.useState(loadingMessage);
const [trials, setTrials] = React.useState(loadingMessage);
const [form_templates, setForm_templates] = React.useState(loadingMessage);
const [form_fields, setForm_fields] = React.useState(loadingMessage);
const [form_field_choices, setForm_field_choices] = React.useState(loadingMessage);
const [form_submissions, setForm_submissions] = React.useState(loadingMessage);
const [submission_values, setSubmission_values] = React.useState(loadingMessage);
const [activity_feed_items, setActivity_feed_items] = React.useState(loadingMessage);
const [reports, setReports] = React.useState(loadingMessage);
const [users, setUsers] = React.useState(loadingMessage);
const [widgetsRole, setWidgetsRole] = React.useState({
role: { value: '', label: '' },
});
const { activity_feed_items, loading: activityLoading } = useAppSelector((state) => state.activity_feed_items);
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','locations','projects','trial_types','trials','form_templates','form_fields','form_field_choices','form_submissions','submission_values','activity_feed_items','reports',];
const fns = [setUsers,setRoles,setPermissions,setOrganizations,setTenants,setLocations,setProjects,setTrial_types,setTrials,setForm_templates,setForm_fields,setForm_field_choices,setForm_submissions,setSubmission_values,setActivity_feed_items,setReports,];
const loadCounts = useCallback(async () => {
const entities = ['projects', 'trials', 'form_submissions', 'users'];
const fns = [setProjects, setTrials, setForm_submissions, setUsers];
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}});
}
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);
}
});
const results = await Promise.allSettled(requests);
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]);
const currentUserMemo = useMemo(() => currentUser ? JSON.stringify(currentUser.id) : null, [currentUser]);
React.useEffect(() => {
if (!currentUser || !widgetsRole?.role?.value) return;
getWidgets(widgetsRole?.role?.value || '').then();
}, [widgetsRole?.role?.value]);
return (
<>
<Head>
<title>
{getPageTitle('Overview')}
</title>
</Head>
<SectionMain>
<SectionTitleLineWithButton
icon={icon.mdiChartTimelineVariant}
title='Overview'
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>
)}
if (!currentUser) return;
loadCounts().then();
if (hasPermission(currentUser, 'READ_ACTIVITY_FEED_ITEMS')) {
dispatch(fetchActivityItems({ query: '?limit=10&orderBy=occurred_at_DESC' }));
}
}, [currentUserMemo, dispatch, loadCounts]);
<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>
)}
const getItemIcon = (type: string) => {
switch (type) {
case 'project_created': return icon.mdiFolderPlusOutline;
case 'trial_created': return icon.mdiFlaskPlusOutline;
case 'submission_created': return icon.mdiClipboardCheckOutline;
case 'user_created': return icon.mdiAccountPlusOutline;
case 'attachment_added': return icon.mdiPaperclip;
default: return icon.mdiBellOutline;
}
}
{ rolesWidgets &&
rolesWidgets.map((widget) => (
<SmartWidget
key={widget.id}
userId={currentUser?.id}
widget={widget}
roleId={widgetsRole?.role?.value || ''}
admin={hasPermission(currentUser, 'CREATE_ROLES')}
/>
))}
</div>
return (
<>
<Head>
<title>{getPageTitle('Home')}</title>
</Head>
<SectionMain>
<SectionTitleLineWithButton icon={icon.mdiHomeOutline} title='Home' main>
{''}
</SectionTitleLineWithButton>
{!!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
{/* Summary Cards */}
<div className='grid grid-cols-1 gap-6 lg:grid-cols-4 mb-6'>
<Link href={'/projects/projects-list'}>
<CardBox className="hover:shadow-lg transition-shadow cursor-pointer">
<div className="flex justify-between items-center">
<div>
<p className="text-gray-500 dark:text-gray-400">Projects</p>
<h3 className="text-3xl font-bold">{projects}</h3>
</div>
<BaseIcon path={icon.mdiFolderOutline} size={48} className={iconsColor} />
</div>
<div className="text-3xl leading-tight font-semibold">
{users}
</CardBox>
</Link>
<Link href={'/trials/trials-list'}>
<CardBox className="hover:shadow-lg transition-shadow cursor-pointer">
<div className="flex justify-between items-center">
<div>
<p className="text-gray-500 dark:text-gray-400">Trials</p>
<h3 className="text-3xl font-bold">{trials}</h3>
</div>
<BaseIcon path={icon.mdiTestTube} size={48} className={iconsColor} />
</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}
/>
</CardBox>
</Link>
<Link href={'/form_submissions/form_submissions-list'}>
<CardBox className="hover:shadow-lg transition-shadow cursor-pointer">
<div className="flex justify-between items-center">
<div>
<p className="text-gray-500 dark:text-gray-400">Submissions</p>
<h3 className="text-3xl font-bold">{form_submissions}</h3>
</div>
<BaseIcon path={icon.mdiClipboardTextOutline} size={48} className={iconsColor} />
</div>
</CardBox>
</Link>
<Link href={'/users/users-list'}>
<CardBox className="hover:shadow-lg transition-shadow cursor-pointer">
<div className="flex justify-between items-center">
<div>
<p className="text-gray-500 dark:text-gray-400">Team Members</p>
<h3 className="text-3xl font-bold">{users}</h3>
</div>
<BaseIcon path={icon.mdiAccountGroup} size={48} className={iconsColor} />
</div>
</CardBox>
</Link>
</div>
{/* Activity Feed Section */}
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
<div className="lg:col-span-2">
<SectionTitleLineWithButton icon={icon.mdiTimelineTextOutline} title="Recent Activity" />
{activityLoading && <p>Loading feed...</p>}
{!activityLoading && activity_feed_items?.length === 0 && (
<CardBox>
<p className="text-center text-gray-500 py-8">No recent activity found.</p>
</CardBox>
)}
<div className="space-y-4">
{activity_feed_items?.map((item: any) => (
<CardBox key={item.id} className="hover:border-emerald-500 transition-colors border-l-4 border-l-emerald-500">
<div className="flex items-start space-x-4">
<div className="flex-shrink-0">
<UserAvatar
username={item.actor_user?.firstName || 'User'}
image={item.actor_user?.avatar}
className="w-12 h-12"
/>
</div>
<div className="flex-grow">
<div className="flex justify-between items-start">
<div>
<span className="font-bold text-lg">
{item.actor_user?.firstName} {item.actor_user?.lastName}
</span>
<span className="text-gray-500 ml-2">
{item.title}
</span>
</div>
<div className="text-xs text-gray-400 flex items-center">
<BaseIcon path={icon.mdiClockOutline} size={14} className="mr-1" />
{moment(item.occurred_at).fromNow()}
</div>
</div>
<p className="text-gray-600 dark:text-gray-300 mt-1">
{item.summary}
</p>
{item.thumbnail && item.thumbnail[0] && (
<div className="mt-3">
{/* eslint-disable-next-line @next/next/no-img-element */}
<img
src={item.thumbnail[0].publicUrl}
alt="Activity thumbnail"
className="rounded-lg max-h-48 w-auto object-cover border dark:border-gray-700"
/>
</div>
)}
<div className="mt-3 flex items-center justify-between">
<div className="flex items-center space-x-2">
<BaseIcon
path={getItemIcon(item.item_type)}
size={18}
className="text-emerald-600"
/>
<span className="text-xs font-medium uppercase tracking-wider text-emerald-600">
{item.item_type.replace('_', ' ')}
</span>
</div>
{item.link_path && (
<Link href={item.link_path} className="text-sm text-emerald-600 hover:underline font-medium">
View Details →
</Link>
)}
</div>
</div>
</div>
</CardBox>
))}
</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 className="space-y-6">
<SectionTitleLineWithButton icon={icon.mdiChartPie} title="Quick Stats" />
<CardBox>
<div className="space-y-4">
<div className="flex justify-between items-center pb-2 border-b dark:border-gray-700">
<span className="text-gray-500">Active Projects</span>
<span className="font-bold">{projects}</span>
</div>
<div className="flex justify-between items-center pb-2 border-b dark:border-gray-700">
<span className="text-gray-500">Ongoing Trials</span>
<span className="font-bold">{trials}</span>
</div>
<div className="flex justify-between items-center">
<span className="text-gray-500">New Submissions</span>
<span className="font-bold text-emerald-600">+{form_submissions}</span>
</div>
</div>
</CardBox>
<SectionTitleLineWithButton icon={icon.mdiInformationOutline} title="System Info" />
<CardBox className="bg-emerald-50 dark:bg-emerald-900/20 border-emerald-200 dark:border-emerald-800">
<p className="text-sm text-emerald-800 dark:text-emerald-200">
<strong>Trial Tracker</strong> is running in multi-tenant mode.
Farm-level data isolation is active for your account.
</p>
</CardBox>
</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_LOCATIONS') && <Link href={'/locations/locations-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">
Locations
</div>
<div className="text-3xl leading-tight font-semibold">
{locations}
</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_PROJECTS') && <Link href={'/projects/projects-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">
Projects
</div>
<div className="text-3xl leading-tight font-semibold">
{projects}
</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={'mdiFolderOutline' in icon ? icon['mdiFolderOutline' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
/>
</div>
</div>
</div>
</Link>}
{hasPermission(currentUser, 'READ_TRIAL_TYPES') && <Link href={'/trial_types/trial_types-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 types
</div>
<div className="text-3xl leading-tight font-semibold">
{trial_types}
</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={'mdiFlaskOutline' in icon ? icon['mdiFlaskOutline' 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={'mdiTestTube' in icon ? icon['mdiTestTube' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
/>
</div>
</div>
</div>
</Link>}
{hasPermission(currentUser, 'READ_FORM_TEMPLATES') && <Link href={'/form_templates/form_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">
Form templates
</div>
<div className="text-3xl leading-tight font-semibold">
{form_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={'mdiFormSelect' in icon ? icon['mdiFormSelect' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
/>
</div>
</div>
</div>
</Link>}
{hasPermission(currentUser, 'READ_FORM_FIELDS') && <Link href={'/form_fields/form_fields-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">
Form fields
</div>
<div className="text-3xl leading-tight font-semibold">
{form_fields}
</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={'mdiFormatListBulleted' in icon ? icon['mdiFormatListBulleted' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
/>
</div>
</div>
</div>
</Link>}
{hasPermission(currentUser, 'READ_FORM_FIELD_CHOICES') && <Link href={'/form_field_choices/form_field_choices-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">
Form field choices
</div>
<div className="text-3xl leading-tight font-semibold">
{form_field_choices}
</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={'mdiPlaylistEdit' in icon ? icon['mdiPlaylistEdit' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
/>
</div>
</div>
</div>
</Link>}
{hasPermission(currentUser, 'READ_FORM_SUBMISSIONS') && <Link href={'/form_submissions/form_submissions-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">
Form submissions
</div>
<div className="text-3xl leading-tight font-semibold">
{form_submissions}
</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={'mdiClipboardTextOutline' in icon ? icon['mdiClipboardTextOutline' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
/>
</div>
</div>
</div>
</Link>}
{hasPermission(currentUser, 'READ_SUBMISSION_VALUES') && <Link href={'/submission_values/submission_values-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">
Submission values
</div>
<div className="text-3xl leading-tight font-semibold">
{submission_values}
</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={'mdiDatabaseOutline' in icon ? icon['mdiDatabaseOutline' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
/>
</div>
</div>
</div>
</Link>}
{hasPermission(currentUser, 'READ_ACTIVITY_FEED_ITEMS') && <Link href={'/activity_feed_items/activity_feed_items-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">
Activity feed items
</div>
<div className="text-3xl leading-tight font-semibold">
{activity_feed_items}
</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={'mdiTimelineTextOutline' in icon ? icon['mdiTimelineTextOutline' 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={'mdiFileChartOutline' in icon ? icon['mdiFileChartOutline' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
/>
</div>
</div>
</div>
</Link>}
</div>
</SectionMain>
</>
)
</SectionMain>
</>
)
}
Dashboard.getLayout = function getLayout(page: ReactElement) {
return <LayoutAuthenticated>{page}</LayoutAuthenticated>
return <LayoutAuthenticated>{page}</LayoutAuthenticated>
}
export default Dashboard
export default Dashboard

325
frontend/src/pages/index.tsx
View File

@ -1,166 +1,187 @@
import React, { useEffect, useState } from 'react';
import React 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 { useAppSelector } from '../stores/hooks';
import CardBoxComponentTitle from "../components/CardBoxComponentTitle";
import { getPexelsImage, getPexelsVideo } from '../helpers/pexels';
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('image');
const [contentPosition, setContentPosition] = useState('left');
const textColor = useAppSelector((state) => state.style.linkColor);
import BaseIcon from '../components/BaseIcon';
import * as icon from '@mdi/js';
export default function LandingPage() {
const title = 'Trial Tracker'
// Fetch Pexels image/video
useEffect(() => {
async function fetchData() {
const image = await getPexelsImage();
const video = await getPexelsVideo();
setIllustrationImage(image);
setIllustrationVideo(video);
}
fetchData();
}, []);
return (
<div className="min-h-screen bg-white text-gray-900 font-sans selection:bg-emerald-100 selection:text-emerald-900">
<Head>
<title>{getPageTitle('Trial Tracker - Research Simplified')}</title>
</Head>
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>
{/* Navigation */}
<nav className="fixed top-0 w-full z-50 bg-white/80 backdrop-blur-md border-b border-gray-100">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex justify-between h-16 items-center">
<div className="flex items-center space-x-2">
<div className="w-10 h-10 bg-emerald-600 rounded-xl flex items-center justify-center">
<BaseIcon path={icon.mdiFlaskOutline} size={24} className="text-white" />
</div>
<span className="text-2xl font-bold tracking-tight text-gray-900">{title}</span>
</div>
<div className="hidden md:flex space-x-8 items-center font-medium">
<a href="#features" className="text-gray-600 hover:text-emerald-600 transition-colors">Features</a>
<a href="#about" className="text-gray-600 hover:text-emerald-600 transition-colors">About</a>
<Link href="/login" className="px-5 py-2.5 bg-emerald-600 text-white rounded-full hover:bg-emerald-700 transition-all shadow-md shadow-emerald-200">
Sign In
</Link>
</div>
</div>
</div>
</nav>
{/* Hero Section */}
<header className="relative pt-32 pb-20 overflow-hidden">
<div className="absolute top-0 right-0 -z-10 w-1/2 h-full opacity-10 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-emerald-400 via-transparent to-transparent"></div>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="grid lg:grid-cols-2 gap-12 items-center">
<div className="space-y-8">
<div className="inline-flex items-center space-x-2 py-1.5 px-3 rounded-full bg-emerald-50 border border-emerald-100 text-emerald-700 text-sm font-semibold">
<span className="flex h-2 w-2 rounded-full bg-emerald-500 animate-pulse"></span>
<span>Advanced Multi-tenant Solution</span>
</div>
<h1 className="text-6xl md:text-7xl font-extrabold text-gray-900 leading-[1.1] tracking-tight">
Research <span className="text-transparent bg-clip-text bg-gradient-to-r from-emerald-600 to-teal-500">Tracked</span> Effortlessly.
</h1>
<p className="text-xl text-gray-600 leading-relaxed max-w-lg">
The ultimate tool for research trials. Manage projects, monitor trials, and capture field data in real-time with our beautiful, intuitive interface.
</p>
<div className="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 pt-4">
<Link href="/login" className="px-8 py-4 bg-gray-900 text-white rounded-2xl hover:bg-gray-800 transition-all text-lg font-bold shadow-xl shadow-gray-200 flex items-center justify-center">
Launch App <BaseIcon path={icon.mdiArrowRight} size={20} className="ml-2" />
</Link>
<a href="#features" className="px-8 py-4 bg-white text-gray-700 border-2 border-gray-100 rounded-2xl hover:border-emerald-200 hover:bg-emerald-50 transition-all text-lg font-bold flex items-center justify-center">
Learn More
</a>
</div>
</div>
<div className="relative">
<div className="bg-gradient-to-br from-emerald-100 to-teal-100 rounded-[3rem] p-4 shadow-2xl overflow-hidden aspect-video flex items-center justify-center border-8 border-white">
<div className="w-full h-full bg-white/40 backdrop-blur-sm rounded-[2rem] flex flex-col items-center justify-center space-y-4 text-emerald-800">
<BaseIcon path={icon.mdiChartTimelineVariant} size={80} className="opacity-40" />
<span className="text-2xl font-black uppercase tracking-widest opacity-40">Dashboard Preview</span>
</div>
</div>
{/* Decorative elements */}
<div className="absolute -bottom-6 -left-6 w-24 h-24 bg-teal-500 rounded-3xl -z-10 rotate-12 opacity-20 animate-bounce"></div>
<div className="absolute -top-6 -right-6 w-32 h-32 bg-emerald-500 rounded-full -z-10 opacity-10 animate-pulse"></div>
</div>
</div>
</div>
</header>
{/* Features Section */}
<section id="features" className="py-24 bg-gray-50/50">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="text-center max-w-3xl mx-auto mb-20 space-y-4">
<h2 className="text-emerald-600 font-bold tracking-widest uppercase text-sm">Powerful Capabilities</h2>
<h3 className="text-4xl md:text-5xl font-black text-gray-900">Designed for modern field research.</h3>
</div>
<div className="grid md:grid-cols-3 gap-8">
{[
{
title: 'Activity Feed',
description: 'Stay updated with a social-media style feed of everything happening across your trials.',
icon: icon.mdiTimelineTextOutline,
color: 'bg-blue-50 text-blue-600'
},
{
title: 'Dynamic Forms',
description: 'Configure custom fields and forms for different trial types like plant vs chemical.',
icon: icon.mdiClipboardTextOutline,
color: 'bg-emerald-50 text-emerald-600'
},
{
title: 'Track-IT',
description: 'Analyze all completed forms and data in a powerful, filtered table view.',
icon: icon.mdiDatabaseOutline,
color: 'bg-teal-50 text-teal-600'
},
{
title: '3-Tier Locations',
description: 'Organize your data by Farm, Block, and Row for precise spatial tracking.',
icon: icon.mdiMapMarkerOutline,
color: 'bg-orange-50 text-orange-600'
},
{
title: 'Project Management',
description: 'Categorize trials into projects with custom start/end dates and status tracking.',
icon: icon.mdiFolderOutline,
color: 'bg-purple-50 text-purple-600'
},
{
title: 'Multi-tenant',
description: 'Seamlessly toggle between different farms as a Global Admin with full data isolation.',
icon: icon.mdiDomain,
color: 'bg-indigo-50 text-indigo-600'
}
].map((feature, i) => (
<div key={i} className="group bg-white p-10 rounded-[2.5rem] border border-gray-100 hover:border-emerald-200 hover:shadow-2xl hover:shadow-emerald-100/50 transition-all duration-500">
<div className={`w-16 h-16 ${feature.color} rounded-2xl flex items-center justify-center mb-8 group-hover:scale-110 transition-transform duration-500`}>
<BaseIcon path={feature.icon} size={32} />
</div>
<h4 className="text-2xl font-bold mb-4 text-gray-900">{feature.title}</h4>
<p className="text-gray-600 leading-relaxed font-medium">{feature.description}</p>
</div>
))}
</div>
</div>
</section>
{/* CTA Section */}
<section className="py-24">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="bg-emerald-600 rounded-[4rem] p-12 md:p-20 text-center relative overflow-hidden shadow-2xl shadow-emerald-200">
<div className="absolute top-0 left-0 w-full h-full bg-[radial-gradient(circle_at_top_left,_var(--tw-gradient-stops))] from-white/20 via-transparent to-transparent"></div>
<div className="relative z-10 space-y-8 max-w-3xl mx-auto">
<h2 className="text-4xl md:text-6xl font-black text-white leading-tight">Ready to transform your trial tracking?</h2>
<p className="text-xl text-emerald-50 leading-relaxed font-medium">
Join hundreds of researchers who trust Trial Tracker for their daily field operations.
</p>
<div className="pt-6">
<Link href="/login" className="px-12 py-5 bg-white text-emerald-600 rounded-2xl hover:bg-emerald-50 transition-all text-xl font-black shadow-xl inline-flex items-center">
Get Started Now <BaseIcon path={icon.mdiArrowRight} size={24} className="ml-2" />
</Link>
</div>
</div>
</div>
</div>
</section>
{/* Footer */}
<footer className="bg-white border-t border-gray-100 py-16">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex flex-col md:flex-row justify-between items-center space-y-8 md:space-y-0">
<div className="flex items-center space-x-2">
<div className="w-8 h-8 bg-emerald-600 rounded-lg flex items-center justify-center">
<BaseIcon path={icon.mdiFlaskOutline} size={18} className="text-white" />
</div>
<span className="text-xl font-black text-gray-900">{title}</span>
</div>
<div className="flex space-x-8 text-sm font-bold text-gray-500 uppercase tracking-widest">
<a href="#" className="hover:text-emerald-600 transition-colors">Privacy</a>
<a href="#" className="hover:text-emerald-600 transition-colors">Terms</a>
<a href="#" className="hover:text-emerald-600 transition-colors">Contact</a>
</div>
<p className="text-sm font-bold text-gray-400 tracking-tighter uppercase">
© 2026 Trial Tracker. Built for Research.
</p>
</div>
</div>
</footer>
</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 Trial 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>;
};
LandingPage.getLayout = function getLayout(page: ReactElement) {
return <LayoutGuest>{page}</LayoutGuest>;
};

12
frontend/src/pages/login.tsx
View File

@ -1,5 +1,3 @@
import React, { useEffect, useState } from 'react';
import type { ReactElement } from 'react';
import Head from 'next/head';
@ -62,10 +60,14 @@ export default function Login() {
dispatch(findMe());
}
}, [token, dispatch]);
// Redirect to dashboard if user is logged in
// Redirect based on role if user is logged in
useEffect(() => {
if (currentUser?.id) {
router.push('/dashboard');
if (currentUser.app_role?.globalAccess) {
router.push('/tenants/tenants-list');
} else {
router.push('/dashboard');
}
}
}, [currentUser?.id, router]);
// Show error message if there is one
@ -280,4 +282,4 @@ export default function Login() {
Login.getLayout = function getLayout(page: ReactElement) {
return <LayoutGuest>{page}</LayoutGuest>;
};
};

113
frontend/src/pages/organizations/organizations-edit.tsx
View File

@ -40,60 +40,30 @@ const EditOrganizationsPage = () => {
const router = useRouter()
const dispatch = useAppDispatch()
const initVals = {
'name': '',
'navOrientation': 'top',
'defaultView': 'list',
}
const [initialValues, setInitialValues] = useState(initVals)
const { organizations } = useAppSelector((state) => state.organizations)
const { currentUser } = useAppSelector((state) => state.auth);
const { id } = router.query
useEffect(() => {
dispatch(fetch({ id: id }))
if (id) {
dispatch(fetch({ id: id }))
}
}, [id])
useEffect(() => {
if (typeof organizations === 'object') {
setInitialValues(organizations)
}
}, [organizations])
useEffect(() => {
if (typeof organizations === 'object') {
if (typeof organizations === 'object' && organizations !== null) {
const newInitialVal = {...initVals};
Object.keys(initVals).forEach(el => newInitialVal[el] = (organizations)[el])
Object.keys(initVals).forEach(el => {
if (organizations[el] !== undefined) {
newInitialVal[el] = (organizations)[el]
}
})
setInitialValues(newInitialVal);
}
}, [organizations])
@ -119,45 +89,28 @@ const EditOrganizationsPage = () => {
onSubmit={(values) => handleSubmit(values)}
>
<Form>
<FormField
label="Name"
>
<Field
name="name"
placeholder="Name"
/>
</FormField>
<FormField label="Navigation Orientation" labelFor="navOrientation">
<Field name="navOrientation" id="navOrientation" component="select">
<option value="side">Side</option>
<option value="top">Top</option>
</Field>
</FormField>
<FormField
label="Name"
>
<Field
name="name"
placeholder="Name"
/>
</FormField>
<FormField label="Default Project View" labelFor="defaultView">
<Field name="defaultView" id="defaultView" component="select">
<option value="list">List</option>
<option value="kanban">Kanban</option>
</Field>
</FormField>
<BaseDivider />
<BaseButtons>
@ -176,13 +129,11 @@ const EditOrganizationsPage = () => {
EditOrganizationsPage.getLayout = function getLayout(page: ReactElement) {
return (
<LayoutAuthenticated
permission={'UPDATE_ORGANIZATIONS'}
>
{page}
</LayoutAuthenticated>
)
}
export default EditOrganizationsPage
export default EditOrganizationsPage

925
frontend/src/pages/projects/[projectsId].tsx
View File

@ -40,288 +40,16 @@ const EditProjects = () => {
const router = useRouter()
const dispatch = useAppDispatch()
const initVals = {
tenant: null,
'name': '',
description: '',
start_date: new Date(),
estimated_end_date: new Date(),
status: '',
location: null,
attachments: [],
images: [],
organizations: null,
}
const [initialValues, setInitialValues] = useState(initVals)
@ -358,6 +86,9 @@ const EditProjects = () => {
await router.push('/projects/projects-list')
}
const hasTenant = !!(currentUser?.tenant?.id || currentUser?.tenantId);
const hasOrganizations = !!(currentUser?.organizations?.id || currentUser?.organizationsId || currentUser?.tenant?.organizationsId);
return (
<>
<Head>
@ -374,527 +105,131 @@ const EditProjects = () => {
onSubmit={(values) => handleSubmit(values)}
>
<Form>
<FormField label='Tenant' labelFor='tenant'>
<Field
name='tenant'
id='tenant'
component={SelectField}
options={initialValues.tenant}
itemRef={'tenants'}
showField={'name'}
></Field>
</FormField>
<FormField
label="Name"
>
<Field
name="name"
placeholder="Name"
/>
</FormField>
<FormField label='Description' hasTextareaHeight>
<Field
name='description'
id='description'
component={RichTextField}
></Field>
</FormField>
<FormField
label="StartDate"
>
<DatePicker
dateFormat="yyyy-MM-dd hh:mm"
showTimeSelect
selected={initialValues.start_date ?
new Date(
dayjs(initialValues.start_date).format('YYYY-MM-DD hh:mm'),
) : null
}
onChange={(date) => setInitialValues({...initialValues, 'start_date': date})}
/>
</FormField>
<FormField
label="EstimatedEndDate"
>
<DatePicker
dateFormat="yyyy-MM-dd hh:mm"
showTimeSelect
selected={initialValues.estimated_end_date ?
new Date(
dayjs(initialValues.estimated_end_date).format('YYYY-MM-DD hh:mm'),
) : null
}
onChange={(date) => setInitialValues({...initialValues, 'estimated_end_date': date})}
/>
</FormField>
<FormField label="Status" labelFor="status">
<Field name="status" id="status" component="select">
<option value="planned">planned</option>
<option value="active">active</option>
<option value="on_hold">on_hold</option>
<option value="completed">completed</option>
<option value="cancelled">cancelled</option>
</Field>
</FormField>
<FormField label='Location' labelFor='location'>
<Field
name='location'
id='location'
component={SelectField}
options={initialValues.location}
itemRef={'locations'}
showField={'name'}
></Field>
</FormField>
<FormField>
<Field
label='Attachments'
color='info'
icon={mdiUpload}
path={'projects/attachments'}
name='attachments'
id='attachments'
schema={{
size: undefined,
formats: undefined,
}}
component={FormFilePicker}
></Field>
</FormField>
<FormField>
<Field
label='Images'
color='info'
icon={mdiUpload}
path={'projects/images'}
name='images'
id='images'
schema={{
size: undefined,
formats: undefined,
}}
component={FormImagePicker}
></Field>
</FormField>
<FormField label='organizations' labelFor='organizations'>
<Field
name='organizations'
id='organizations'
component={SelectField}
options={initialValues.organizations}
itemRef={'organizations'}
showField={'name'}
></Field>
</FormField>
{!hasTenant && (
<FormField label='Tenant' labelFor='tenant'>
<Field
name='tenant'
id='tenant'
component={SelectField}
options={initialValues.tenant}
itemRef={'tenants'}
showField={'name'}
></Field>
</FormField>
)}
<FormField
label="Name"
>
<Field
name="name"
placeholder="Name"
/>
</FormField>
<FormField label='Description' hasTextareaHeight>
<Field
name='description'
id='description'
component={RichTextField}
></Field>
</FormField>
<FormField
label="StartDate"
>
<DatePicker
dateFormat="yyyy-MM-dd hh:mm"
showTimeSelect
selected={initialValues.start_date ?
new Date(
dayjs(initialValues.start_date).format('YYYY-MM-DD hh:mm'),
) : null
}
onChange={(date) => setInitialValues({...initialValues, 'start_date': date})}
/>
</FormField>
<FormField
label="EstimatedEndDate"
>
<DatePicker
dateFormat="yyyy-MM-dd hh:mm"
showTimeSelect
selected={initialValues.estimated_end_date ?
new Date(
dayjs(initialValues.estimated_end_date).format('YYYY-MM-DD hh:mm'),
) : null
}
onChange={(date) => setInitialValues({...initialValues, 'estimated_end_date': date})}
/>
</FormField>
<FormField label="Status" labelFor="status">
<Field name="status" id="status" component="select">
<option value="planned">planned</option>
<option value="active">active</option>
<option value="on_hold">on_hold</option>
<option value="completed">completed</option>
<option value="cancelled">cancelled</option>
</Field>
</FormField>
<FormField label='Location' labelFor='location'>
<Field
name='location'
id='location'
component={SelectField}
options={initialValues.location}
itemRef={'locations'}
showField={'name'}
></Field>
</FormField>
<FormField>
<Field
label='Attachments'
color='info'
icon={mdiUpload}
path={'projects/attachments'}
name='attachments'
id='attachments'
schema={{
size: undefined,
formats: undefined,
}}
component={FormFilePicker}
></Field>
</FormField>
<FormField>
<Field
label='Images'
color='info'
icon={mdiUpload}
path={'projects/images'}
name='images'
id='images'
schema={{
size: undefined,
formats: undefined,
}}
component={FormImagePicker}
></Field>
</FormField>
{!hasOrganizations && (
<FormField label='organizations' labelFor='organizations'>
<Field
name='organizations'
id='organizations'
component={SelectField}
options={initialValues.organizations}
itemRef={'organizations'}
showField={'name'}
></Field>
</FormField>
)}
<BaseDivider />
<BaseButtons>
@ -913,13 +248,11 @@ const EditProjects = () => {
EditProjects.getLayout = function getLayout(page: ReactElement) {
return (
<LayoutAuthenticated
permission={'UPDATE_PROJECTS'}
>
{page}
</LayoutAuthenticated>
)
}
export default EditProjects
export default EditProjects

1026
frontend/src/pages/projects/projects-edit.tsx
View File

File diff suppressed because it is too large Load Diff

22
frontend/src/pages/projects/projects-list.tsx
View File

@ -1,7 +1,7 @@
import { mdiChartTimelineVariant } from '@mdi/js'
import Head from 'next/head'
import { uniqueId } from 'lodash';
import React, { ReactElement, useState } from 'react'
import React, { ReactElement, useState, useEffect } from 'react'
import CardBox from '../../components/CardBox'
import LayoutAuthenticated from '../../layouts/Authenticated'
import SectionMain from '../../components/SectionMain'
@ -25,10 +25,15 @@ const ProjectsTablesPage = () => {
const [filterItems, setFilterItems] = useState([]);
const [csvFile, setCsvFile] = useState<File | null>(null);
const [isModalActive, setIsModalActive] = useState(false);
const [showTableView, setShowTableView] = useState(false);
const { currentUser } = useAppSelector((state) => state.auth);
const [showTableView, setShowTableView] = useState(true);
useEffect(() => {
if (currentUser?.organizations?.defaultView) {
setShowTableView(currentUser.organizations.defaultView === 'list');
}
}, [currentUser]);
const dispatch = useAppDispatch();
@ -125,7 +130,12 @@ const ProjectsTablesPage = () => {
</div>
<div className='md:inline-flex items-center ms-auto'>
<Link href={'/projects/projects-table'}>Switch to Table</Link>
<BaseButton
color='info'
outline
label={showTableView ? 'Switch to Kanban' : 'Switch to List'}
onClick={() => setShowTableView(!showTableView)}
/>
</div>
</CardBox>
@ -134,7 +144,7 @@ const ProjectsTablesPage = () => {
filterItems={filterItems}
setFilterItems={setFilterItems}
filters={filters}
showGrid={false}
showGrid={showTableView}
/>
</SectionMain>
@ -169,4 +179,4 @@ ProjectsTablesPage.getLayout = function getLayout(page: ReactElement) {
)
}
export default ProjectsTablesPage
export default ProjectsTablesPage

658
frontend/src/pages/projects/projects-new.tsx
View File

@ -1,6 +1,6 @@
import { mdiAccount, mdiChartTimelineVariant, mdiMail, mdiUpload } from '@mdi/js'
import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js'
import Head from 'next/head'
import React, { ReactElement } from 'react'
import React, { ReactElement, useMemo } from 'react'
import CardBox from '../../components/CardBox'
import LayoutAuthenticated from '../../layouts/Authenticated'
import SectionMain from '../../components/SectionMain'
@ -12,580 +12,170 @@ import FormField from '../../components/FormField'
import BaseDivider from '../../components/BaseDivider'
import BaseButtons from '../../components/BaseButtons'
import BaseButton from '../../components/BaseButton'
import FormCheckRadio from '../../components/FormCheckRadio'
import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
import FormFilePicker from '../../components/FormFilePicker'
import FormImagePicker from '../../components/FormImagePicker'
import { SwitchField } from '../../components/SwitchField'
import { SelectField } from '../../components/SelectField'
import { SelectFieldMany } from "../../components/SelectFieldMany";
import {RichTextField} from "../../components/RichTextField";
import { create } from '../../stores/projects/projectsSlice'
import { useAppDispatch } from '../../stores/hooks'
import { useAppDispatch, useAppSelector } from '../../stores/hooks'
import { useRouter } from 'next/router'
import moment from 'moment';
const initialValues = {
tenant: '',
tenant: null,
name: '',
description: '',
insights: '',
start_date: '',
estimated_end_date: '',
status: 'planned',
location: '',
location: null,
attachments: [],
images: [],
organizations: '',
organizations: null,
}
const ProjectsNew = () => {
const router = useRouter()
const dispatch = useAppDispatch()
const { currentUser } = useAppSelector((state) => state.auth)
const memoizedInitialValues = useMemo(() => {
return {
...initialValues,
tenant: currentUser?.tenant?.id || currentUser?.tenantId || null,
organizations: currentUser?.organizations?.id || currentUser?.organizationsId || currentUser?.tenant?.organizationsId || null,
}
}, [currentUser])
const handleSubmit = async (data) => {
await dispatch(create(data))
await router.push('/projects/projects-list')
}
const hasTenant = !!(currentUser?.tenant?.id || currentUser?.tenantId)
return (
<>
<Head>
<title>{getPageTitle('New Item')}</title>
<title>{getPageTitle('New Project')}</title>
</Head>
<SectionMain>
<SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="New Item" main>
<SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="New Project" main>
{''}
</SectionTitleLineWithButton>
<CardBox>
<Formik
initialValues={
initialValues
}
initialValues={memoizedInitialValues}
onSubmit={(values) => handleSubmit(values)}
enableReinitialize
>
<Form>
<FormField label="Tenant" labelFor="tenant">
<Field name="tenant" id="tenant" component={SelectField} options={[]} itemRef={'tenants'}></Field>
</FormField>
<FormField
label="Name"
>
<Field
name="name"
placeholder="Name"
/>
</FormField>
<FormField label='Description' hasTextareaHeight>
<Field
name='description'
id='description'
component={RichTextField}
></Field>
</FormField>
<FormField
label="StartDate"
>
<Field
type="datetime-local"
name="start_date"
placeholder="StartDate"
/>
</FormField>
<FormField
label="EstimatedEndDate"
>
<Field
type="datetime-local"
name="estimated_end_date"
placeholder="EstimatedEndDate"
/>
</FormField>
<FormField label="Status" labelFor="status">
<Field name="status" id="status" component="select">
<option value="planned">planned</option>
<option value="active">active</option>
<option value="on_hold">on_hold</option>
<option value="completed">completed</option>
<option value="cancelled">cancelled</option>
</Field>
</FormField>
<FormField label="Location" labelFor="location">
<Field name="location" id="location" component={SelectField} options={[]} itemRef={'locations'}></Field>
</FormField>
<FormField>
<Field
label='Attachments'
color='info'
icon={mdiUpload}
path={'projects/attachments'}
name='attachments'
id='attachments'
schema={{
size: undefined,
formats: undefined,
}}
component={FormFilePicker}
></Field>
</FormField>
<FormField>
<Field
label='Images'
color='info'
icon={mdiUpload}
path={'projects/images'}
name='images'
id='images'
schema={{
size: undefined,
formats: undefined,
}}
component={FormImagePicker}
></Field>
</FormField>
<FormField label="organizations" labelFor="organizations">
<Field name="organizations" id="organizations" component={SelectField} options={[]} itemRef={'organizations'}></Field>
</FormField>
{!hasTenant && (
<FormField label="Tenant" labelFor="tenant">
<Field name="tenant" id="tenant" component={SelectField} options={null} itemRef={'tenants'}></Field>
</FormField>
)}
<FormField label="Name">
<Field name="name" placeholder="Project Name" />
</FormField>
<FormField label='Description' hasTextareaHeight>
<Field
name='description'
id='description'
component={RichTextField}
></Field>
</FormField>
<FormField label='Strategic Insights' help="Add observations or strategic summaries" hasTextareaHeight>
<Field
name='insights'
id='insights'
component='textarea'
className="rounded p-3 w-full border-gray-300"
rows={4}
></Field>
</FormField>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<FormField label="Start Date">
<Field
type="datetime-local"
name="start_date"
className="w-full border-gray-300 rounded"
/>
</FormField>
<FormField label="Estimated End Date">
<Field
type="datetime-local"
name="estimated_end_date"
className="w-full border-gray-300 rounded"
/>
</FormField>
</div>
<FormField label="Status" labelFor="status">
<Field name="status" id="status" component="select">
<option value="planned">planned</option>
<option value="active">active</option>
<option value="on_hold">on_hold</option>
<option value="completed">completed</option>
<option value="cancelled">cancelled</option>
</Field>
</FormField>
<FormField label="Location" labelFor="location">
<Field name="location" id="location" component={SelectField} options={null} itemRef={'locations'}></Field>
</FormField>
<FormField>
<Field
label='Attachments'
color='info'
icon={mdiUpload}
path={'projects/attachments'}
name='attachments'
id='attachments'
schema={{
size: undefined,
formats: undefined,
}}
component={FormFilePicker}
></Field>
</FormField>
<FormField>
<Field
label='Images'
color='info'
icon={mdiUpload}
path={'projects/images'}
name='images'
id='images'
schema={{
size: undefined,
formats: undefined,
}}
component={FormImagePicker}
></Field>
</FormField>
{!memoizedInitialValues.organizations && (
<FormField label="Organizations" labelFor="organizations">
<Field name="organizations" id="organizations" component={SelectField} options={null} itemRef={'organizations'}></Field>
</FormField>
)}
<BaseDivider />
<BaseButtons>
<BaseButton type="submit" color="info" label="Submit" />
<BaseButton type="reset" color="info" outline label="Reset" />
<BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/projects/projects-list')}/>
<BaseButton color='danger' outline label='Cancel' onClick={() => router.push('/projects/projects-list')}/>
</BaseButtons>
</Form>
</Formik>
@ -597,14 +187,10 @@ const ProjectsNew = () => {
ProjectsNew.getLayout = function getLayout(page: ReactElement) {
return (
<LayoutAuthenticated
permission={'CREATE_PROJECTS'}
>
<LayoutAuthenticated>
{page}
</LayoutAuthenticated>
)
}
export default ProjectsNew
export default ProjectsNew

806
frontend/src/pages/projects/projects-view.tsx
View File

@ -1,6 +1,5 @@
import React, { ReactElement, useEffect } from 'react';
import React, { ReactElement, useEffect, useMemo } from 'react';
import Head from 'next/head'
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import dayjs from "dayjs";
import {useAppDispatch, useAppSelector} from "../../stores/hooks";
@ -15,645 +14,216 @@ import SectionTitleLineWithButton from "../../components/SectionTitleLineWithBut
import SectionMain from "../../components/SectionMain";
import CardBox from "../../components/CardBox";
import BaseButton from "../../components/BaseButton";
import BaseDivider from "../../components/BaseDivider";
import {mdiChartTimelineVariant} from "@mdi/js";
import {SwitchField} from "../../components/SwitchField";
import FormField from "../../components/FormField";
import {hasPermission} from "../../helpers/userPermissions";
const ProjectsView = () => {
const router = useRouter()
const dispatch = useAppDispatch()
const { projects } = useAppSelector((state) => state.projects)
const { currentUser } = useAppSelector((state) => state.auth);
const { projects: projectsRaw, loading } = useAppSelector((state) => state.projects)
const { id } = router.query;
function removeLastCharacter(str) {
console.log(str,`str`)
return str.slice(0, -1);
}
// Ensure we are working with the correct project object
const projects = useMemo(() => {
if (Array.isArray(projectsRaw)) {
return projectsRaw.find(p => p.id === id) || null;
}
return projectsRaw;
}, [projectsRaw, id]);
useEffect(() => {
dispatch(fetch({ id }));
if (id) {
dispatch(fetch({ id }));
}
}, [dispatch, id]);
const projectData = projects && !Array.isArray(projects) ? projects : null;
if (loading && !projectData) {
return (
<LayoutAuthenticated>
<SectionMain>
<div className="flex justify-center items-center h-64">
<p className="text-gray-500 animate-pulse">Loading project details...</p>
</div>
</SectionMain>
</LayoutAuthenticated>
)
}
return (
<>
<Head>
<title>{getPageTitle('View projects')}</title>
<title>{getPageTitle('View Project')}</title>
</Head>
<SectionMain>
<SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={removeLastCharacter('View projects')} main>
<SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={'Project Details'} main>
<BaseButton
color='info'
label='Edit'
href={`/projects/projects-edit/?id=${id}`}
/>
</SectionTitleLineWithButton>
<CardBox>
<div className={'mb-4'}>
<p className={'block font-bold mb-2'}>Tenant</p>
<p>{projects?.tenant?.name ?? 'No data'}</p>
</div>
<div className={'mb-4'}>
<p className={'block font-bold mb-2'}>Name</p>
<p>{projects?.name}</p>
</div>
<div className={'mb-4'}>
<p className={'block font-bold mb-2'}>Description</p>
{projects.description
? <p dangerouslySetInnerHTML={{__html: projects.description}}/>
: <p>No data</p>
}
</div>
<FormField label='StartDate'>
{projects.start_date ? <DatePicker
dateFormat="yyyy-MM-dd hh:mm"
showTimeSelect
selected={projects.start_date ?
new Date(
dayjs(projects.start_date).format('YYYY-MM-DD hh:mm'),
) : null
}
disabled
/> : <p>No StartDate</p>}
</FormField>
<FormField label='EstimatedEndDate'>
{projects.estimated_end_date ? <DatePicker
dateFormat="yyyy-MM-dd hh:mm"
showTimeSelect
selected={projects.estimated_end_date ?
new Date(
dayjs(projects.estimated_end_date).format('YYYY-MM-DD hh:mm'),
) : null
}
disabled
/> : <p>No EstimatedEndDate</p>}
</FormField>
<div className={'mb-4'}>
<p className={'block font-bold mb-2'}>Status</p>
<p>{projects?.status ?? 'No data'}</p>
</div>
<div className={'mb-4'}>
<p className={'block font-bold mb-2'}>Location</p>
<p>{projects?.location?.name ?? 'No data'}</p>
</div>
<div className={'mb-4'}>
<p className={'block font-bold mb-2'}>Attachments</p>
{projects?.attachments?.length
? dataFormatter.filesFormatter(projects.attachments).map(link => (
<button
key={link.publicUrl}
onClick={(e) => saveFile(e, link.publicUrl, link.name)}
>
{link.name}
</button>
)) : <p>No Attachments</p>
}
</div>
<div className={'mb-4'}>
<p className={'block font-bold mb-2'}>Images</p>
{projects?.images?.length
? (
<ImageField
name={'images'}
image={projects?.images}
className='w-20 h-20'
/>
) : <p>No Images</p>
}
</div>
<div className={'mb-4'}>
<p className={'block font-bold mb-2'}>organizations</p>
<p>{projects?.organizations?.name ?? 'No data'}</p>
</div>
<>
<p className={'block font-bold mb-2'}>Trials Project</p>
<CardBox
className='mb-6 border border-gray-300 rounded overflow-hidden'
hasTable
>
<div className='overflow-x-auto'>
<table>
<thead>
<tr>
<th>Name</th>
<th>Status</th>
<th>StartDate</th>
<th>EndDate</th>
<th>ReferenceCode</th>
</tr>
</thead>
<tbody>
{projects.trials_project && Array.isArray(projects.trials_project) &&
projects.trials_project.map((item: any) => (
<tr key={item.id} onClick={() => router.push(`/trials/trials-view/?id=${item.id}`)}>
<td data-label="name">
{ item.name }
</td>
<td data-label="status">
{ item.status }
</td>
<td data-label="start_date">
{ dataFormatter.dateTimeFormatter(item.start_date) }
</td>
<td data-label="end_date">
{ dataFormatter.dateTimeFormatter(item.end_date) }
</td>
<td data-label="reference_code">
{ item.reference_code }
</td>
</tr>
))}
</tbody>
</table>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
<CardBox className="h-full">
<div className="space-y-4">
<div>
<p className="text-gray-500 text-sm font-semibold uppercase tracking-wider">Name</p>
<p className="text-xl font-bold">{projectData?.name || 'No name provided'}</p>
</div>
<div>
<p className="text-gray-500 text-sm font-semibold uppercase tracking-wider">Status</p>
<span className={`px-3 py-1 rounded-full text-xs font-bold uppercase ${
projectData?.status === 'active' ? 'bg-green-100 text-green-800' :
projectData?.status === 'completed' ? 'bg-blue-100 text-blue-800' :
projectData?.status === 'on_hold' ? 'bg-yellow-100 text-yellow-800' :
projectData?.status === 'planned' ? 'bg-purple-100 text-purple-800' :
'bg-gray-100 text-gray-800'
}`}>
{projectData?.status || 'No status'}
</span>
</div>
{!projects?.trials_project?.length && <div className={'text-center py-4'}>No data</div>}
</CardBox>
</>
<BaseDivider />
<div>
<p className="text-gray-500 text-sm font-semibold uppercase tracking-wider">Description</p>
{projectData?.description
? <div className="prose prose-sm max-w-none text-gray-700 mt-1" dangerouslySetInnerHTML={{__html: projectData.description}}/>
: <p className="text-gray-400 italic">No description available</p>
}
</div>
<BaseButton
color='info'
label='Back'
onClick={() => router.push('/projects/projects-list')}
/>
</CardBox>
<div className="grid grid-cols-2 gap-4 pt-2">
<div>
<p className="text-gray-500 text-sm font-semibold uppercase tracking-wider">Start Date</p>
<p className="font-medium">
{projectData?.start_date ? dayjs(projectData.start_date).format('MMMM D, YYYY') : 'Not set'}
</p>
</div>
<div>
<p className="text-gray-500 text-sm font-semibold uppercase tracking-wider">Estimated End</p>
<p className="font-medium">
{projectData?.estimated_end_date ? dayjs(projectData.estimated_end_date).format('MMMM D, YYYY') : 'Not set'}
</p>
</div>
</div>
</div>
</CardBox>
<CardBox className="h-full">
<div className="space-y-4">
<div>
<p className="text-gray-500 text-sm font-semibold uppercase tracking-wider flex items-center">
<span className="mr-2">💡</span> Strategic Insights
</p>
<div className="bg-blue-50 border-l-4 border-blue-400 p-4 mt-2">
{projectData?.insights ? (
<p className="text-blue-700 whitespace-pre-wrap">{projectData.insights}</p>
) : (
<p className="text-blue-500 italic text-sm">No insights recorded for this project yet. Use the Edit page to add strategic observations or AI-generated summaries.</p>
)}
</div>
</div>
<div>
<p className="text-gray-500 text-sm font-semibold uppercase tracking-wider mb-2">Attachments</p>
<div className="flex flex-wrap gap-2">
{projectData?.attachments?.length ? (
dataFormatter.filesFormatter(projectData.attachments).map(link => (
<button
key={link.publicUrl}
onClick={(e) => saveFile(e, link.publicUrl, link.name)}
className="px-3 py-1 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded text-xs border border-gray-300 transition-colors flex items-center"
>
<span className="mr-1 text-base">📄</span> {link.name}
</button>
))
) : (
<p className="text-gray-400 text-sm italic">No files attached</p>
)}
</div>
</div>
<div>
<p className="text-gray-500 text-sm font-semibold uppercase tracking-wider mb-2">Images</p>
{projectData?.images?.length ? (
<ImageField
name={'images'}
image={projectData?.images}
className='w-full max-h-40 object-cover rounded shadow-sm'
/>
) : (
<p className="text-gray-400 text-sm italic">No images uploaded</p>
)}
</div>
</div>
</CardBox>
</div>
<CardBox hasTable className="mb-6 overflow-hidden">
<div className="p-4 border-b border-gray-100 bg-gray-50 flex justify-between items-center">
<h3 className="font-bold text-gray-700">Associated Trials</h3>
<span className="bg-blue-600 text-white px-2 py-0.5 rounded-full text-xs font-bold">
{projectData?.trials_project?.length || 0}
</span>
</div>
<div className="overflow-x-auto">
<table className="w-full text-sm text-left">
<thead className="bg-gray-50 text-gray-500 uppercase text-[10px] tracking-wider">
<tr>
<th className="px-6 py-3 font-bold">Trial Name</th>
<th className="px-6 py-3 font-bold text-center">Status</th>
<th className="px-6 py-3 font-bold text-center">Reference</th>
<th className="px-6 py-3 font-bold text-right">Period</th>
</tr>
</thead>
<tbody className="divide-y divide-gray-100">
{projectData?.trials_project && Array.isArray(projectData.trials_project) && projectData.trials_project.length > 0 ? (
projectData.trials_project.map((item: any) => (
<tr
key={item.id}
onClick={() => router.push(`/trials/trials-view/?id=${item.id}`)}
className="hover:bg-blue-50 cursor-pointer transition-colors group"
>
<td className="px-6 py-4 font-semibold text-blue-600 group-hover:underline">
{item.name}
</td>
<td className="px-6 py-4 text-center">
<span className={`px-2 py-0.5 rounded-full text-[10px] font-bold uppercase ${
item.status === 'active' ? 'bg-green-100 text-green-800' :
item.status === 'completed' ? 'bg-gray-100 text-gray-800' :
'bg-yellow-100 text-yellow-800'
}`}>
{item.status}
</span>
</td>
<td className="px-6 py-4 text-center font-mono text-gray-400 text-xs">
{item.reference_code || '-'}
</td>
<td className="px-6 py-4 text-right text-gray-500 text-xs">
{item.start_date ? dayjs(item.start_date).format('MMM D, YY') : '...'}
<span className="mx-1 opacity-50">→</span>
{item.end_date ? dayjs(item.end_date).format('MMM D, YY') : '...'}
</td>
</tr>
))
) : (
<tr>
<td colSpan={4} className="px-6 py-10 text-center text-gray-400 italic">
No trials associated with this project.
</td>
</tr>
)}
</tbody>
</table>
</div>
</CardBox>
<BaseButton
color='info'
label='Back to List'
onClick={() => router.push('/projects/projects-list')}
/>
</SectionMain>
</>
);
@ -661,11 +231,7 @@ const ProjectsView = () => {
ProjectsView.getLayout = function getLayout(page: ReactElement) {
return (
<LayoutAuthenticated
permission={'READ_PROJECTS'}
>
<LayoutAuthenticated>
{page}
</LayoutAuthenticated>
)

9
frontend/src/pages/search.tsx
View File

@ -1,10 +1,7 @@
import React, { ReactElement, useEffect, useState } from 'react';
import { 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';
import SectionTitleLineWithButton from '../components/SectionTitleLineWithButton';
@ -93,4 +90,4 @@ SearchView.getLayout = function getLayout(page: ReactElement) {
);
};
export default SearchView;
export default SearchView;

181
frontend/src/pages/settings/company-preferences.tsx Normal file
View File

@ -0,0 +1,181 @@
import { mdiChartTimelineVariant, mdiCogOutline } from '@mdi/js'
import Head from 'next/head'
import React, { ReactElement, useEffect, useState } from 'react'
import { useRouter } from 'next/router'
import { Field, Form, Formik } from 'formik'
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 FormField from '../../components/FormField'
import BaseDivider from '../../components/BaseDivider'
import BaseButton from '../../components/BaseButton'
import { update, fetch } from '../../stores/organizations/organizationsSlice'
import { useAppDispatch, useAppSelector } from '../../stores/hooks'
import { findMe } from '../../stores/authSlice'
import axios from 'axios'
const CompanyPreferencesPage = () => {
const router = useRouter()
const dispatch = useAppDispatch()
const { currentUser } = useAppSelector((state) => state.auth)
const { organizations } = useAppSelector((state) => state.organizations)
const [initialValues, setInitialValues] = useState({
name: '',
address: '',
city: '',
state: '',
country: '',
zip: '',
navOrientation: 'side',
})
const [activeOrganizationId, setActiveOrganizationId] = useState<string | null>(null)
// Determine the organization ID to use
useEffect(() => {
if (currentUser?.organizations?.id || currentUser?.organizationsId) {
setActiveOrganizationId(currentUser?.organizations?.id || currentUser?.organizationsId);
} else {
// If user has no organization linked, try to fetch the first available one if they are an admin
const fetchAnyOrganization = async () => {
try {
const response = await axios.get('/organizations?limit=1')
if (response.data.rows && response.data.rows.length > 0) {
setActiveOrganizationId(response.data.rows[0].id)
}
} catch (err) {
console.error('Failed to fetch organization for admin:', err)
}
}
fetchAnyOrganization()
}
}, [currentUser])
useEffect(() => {
if (activeOrganizationId) {
dispatch(fetch({ id: activeOrganizationId }))
}
}, [activeOrganizationId, dispatch])
useEffect(() => {
// If organizations is an array (from list fetch) or object (from single fetch)
const orgData = Array.isArray(organizations) ? organizations[0] : organizations;
if (orgData && typeof orgData === 'object') {
setInitialValues({
name: orgData.name || '',
address: orgData.address || '',
city: orgData.city || '',
state: orgData.state || '',
country: orgData.country || '',
zip: orgData.zip || '',
navOrientation: orgData.navOrientation || 'side',
})
}
}, [organizations])
const handleSubmit = async (values: any) => {
if (activeOrganizationId) {
try {
const resultAction = await dispatch(update({ id: activeOrganizationId, data: values }))
if (update.fulfilled.match(resultAction)) {
// Update current user to reflect changes in orientation immediately
await dispatch(findMe())
// Reload to ensure everything is in sync
router.reload();
} else if (update.rejected.match(resultAction)) {
console.error('Update rejected:', resultAction.payload);
alert('Error updating company preferences: ' + (resultAction.payload as any)?.message || 'Unknown error');
}
} catch (err) {
console.error('Unexpected error:', err);
}
} else {
alert('No organization found to update. Please link your user to an organization.');
}
}
return (
<>
<Head>
<title>{getPageTitle('Company Preferences')}</title>
</Head>
<SectionMain>
<SectionTitleLineWithButton icon={mdiCogOutline} title={'Company Preferences'} main>
{''}
</SectionTitleLineWithButton>
<CardBox>
<Formik
enableReinitialize
initialValues={initialValues}
onSubmit={handleSubmit}
>
{({ isSubmitting }) => (
<Form>
<FormField label="Company Name">
<Field name="name" placeholder="Name" />
</FormField>
<FormField label="Address">
<Field name="address" placeholder="Address" />
</FormField>
<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
<FormField label="City">
<Field name="city" placeholder="City" />
</FormField>
<FormField label="State/Province">
<Field name="state" placeholder="State/Province" />
</FormField>
</div>
<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
<FormField label="Country">
<Field name="country" placeholder="Country" />
</FormField>
<FormField label="ZIP/Postal Code">
<Field name="zip" placeholder="ZIP/Postal Code" />
</FormField>
</div>
<BaseDivider />
<FormField label="Navigation Orientation">
<Field as="select" name="navOrientation">
<option value="side">Sidebar (Default)</option>
<option value="top">Top Navigation</option>
</Field>
</FormField>
<BaseDivider />
<div className="flex items-center justify-end">
<BaseButton
type="submit"
color="info"
label={isSubmitting ? "Saving..." : "Save Changes"}
disabled={isSubmitting}
/>
</div>
</Form>
)}
</Formik>
</CardBox>
</SectionMain>
</>
)
}
CompanyPreferencesPage.getLayout = function getLayout(page: ReactElement) {
return (
<LayoutAuthenticated>
{page}
</LayoutAuthenticated>
)
}
export default CompanyPreferencesPage

19
frontend/src/pages/tenants/tenants-list.tsx
View File

@ -15,6 +15,7 @@ import {useAppDispatch, useAppSelector} from "../../stores/hooks";
import CardBoxModal from "../../components/CardBoxModal";
import DragDropFilePicker from "../../components/DragDropFilePicker";
import {setRefetch, uploadCsv} from '../../stores/tenants/tenantsSlice';
import { impersonate } from '../../stores/authSlice';
import {hasPermission} from "../../helpers/userPermissions";
@ -44,6 +45,8 @@ const TenantsTablesPage = () => {
]);
const hasCreatePermission = currentUser && hasPermission(currentUser, 'CREATE_TENANTS');
const isSuperAdmin = currentUser?.app_role?.globalAccess;
const isImpersonating = isSuperAdmin && (currentUser as any)?.tenantId;
const addFilter = () => {
@ -83,6 +86,11 @@ const TenantsTablesPage = () => {
setIsModalActive(false);
};
const handleStopImpersonating = async () => {
await dispatch(impersonate(null));
dispatch(setRefetch(true));
};
return (
<>
<Head>
@ -107,10 +115,19 @@ const TenantsTablesPage = () => {
{hasCreatePermission && (
<BaseButton
color='info'
className={'mr-3'}
label='Upload CSV'
onClick={() => setIsModalActive(true)}
/>
)}
{isImpersonating && (
<BaseButton
color='danger'
label='Stop Impersonating'
onClick={handleStopImpersonating}
/>
)}
<div className='md:inline-flex items-center ms-auto'>
<div id='delete-rows-button'></div>
@ -159,4 +176,4 @@ TenantsTablesPage.getLayout = function getLayout(page: ReactElement) {
)
}
export default TenantsTablesPage
export default TenantsTablesPage

1278
frontend/src/pages/trials/[trialsId].tsx
View File

File diff suppressed because it is too large Load Diff

1275
frontend/src/pages/trials/trials-edit.tsx
View File

File diff suppressed because it is too large Load Diff

12
frontend/src/pages/trials/trials-list.tsx
View File

@ -25,7 +25,7 @@ const TrialsTablesPage = () => {
const [filterItems, setFilterItems] = useState([]);
const [csvFile, setCsvFile] = useState<File | null>(null);
const [isModalActive, setIsModalActive] = useState(false);
const [showTableView, setShowTableView] = useState(false);
const [showTableView, setShowTableView] = useState(true);
const { currentUser } = useAppSelector((state) => state.auth);
@ -133,7 +133,11 @@ const TrialsTablesPage = () => {
</div>
<div className='md:inline-flex items-center ms-auto'>
<Link href={'/trials/trials-table'}>Switch to Table</Link>
<BaseButton
color='info'
label={showTableView ? 'Switch to Calendar' : 'Switch to Table'}
onClick={() => setShowTableView(!showTableView)}
/>
</div>
</CardBox>
@ -143,7 +147,7 @@ const TrialsTablesPage = () => {
filterItems={filterItems}
setFilterItems={setFilterItems}
filters={filters}
showGrid={false}
showGrid={showTableView}
/>
</CardBox>
@ -179,4 +183,4 @@ TrialsTablesPage.getLayout = function getLayout(page: ReactElement) {
)
}
export default TrialsTablesPage
export default TrialsTablesPage

591
frontend/src/pages/trials/trials-new.tsx
View File

@ -1,6 +1,6 @@
import { mdiAccount, mdiChartTimelineVariant, mdiMail, mdiUpload } from '@mdi/js'
import Head from 'next/head'
import React, { ReactElement } from 'react'
import React, { ReactElement, useMemo } from 'react'
import CardBox from '../../components/CardBox'
import LayoutAuthenticated from '../../layouts/Authenticated'
import SectionMain from '../../components/SectionMain'
@ -23,227 +23,31 @@ import { SelectFieldMany } from "../../components/SelectFieldMany";
import {RichTextField} from "../../components/RichTextField";
import { create } from '../../stores/trials/trialsSlice'
import { useAppDispatch } from '../../stores/hooks'
import { useAppDispatch, useAppSelector } from '../../stores/hooks'
import { useRouter } from 'next/router'
import moment from 'moment';
const initialValues = {
tenant: '',
project: '',
trial_type: '',
name: '',
objective: '',
status: 'draft',
start_date: '',
end_date: '',
location: '',
reference_code: '',
attachments: [],
images: [],
organizations: '',
}
const TrialsNew = () => {
const router = useRouter()
const dispatch = useAppDispatch()
const { currentUser } = useAppSelector((state) => state.auth)
@ -251,10 +55,27 @@ const TrialsNew = () => {
const { dateRangeStart, dateRangeEnd } = router.query
const memoizedInitialValues = useMemo(() => {
return {
...(dateRangeStart && dateRangeEnd ?
{
...initialValues,
start_date: moment(dateRangeStart).format('YYYY-MM-DDTHH:mm'),
end_date: moment(dateRangeEnd).format('YYYY-MM-DDTHH:mm'),
} : initialValues),
tenant: currentUser?.tenant?.id || currentUser?.tenantId || '',
organizations: currentUser?.organizations?.id || currentUser?.organizationsId || currentUser?.tenant?.organizationsId || '',
}
}, [currentUser, dateRangeStart, dateRangeEnd])
const handleSubmit = async (data) => {
await dispatch(create(data))
await router.push('/trials/trials-list')
}
const hasTenant = !!(currentUser?.tenant?.id || currentUser?.tenantId)
const hasOrganization = !!(currentUser?.organizations?.id || currentUser?.organizationsId || currentUser?.tenant?.organizationsId)
return (
<>
<Head>
@ -266,114 +87,26 @@ const TrialsNew = () => {
</SectionTitleLineWithButton>
<CardBox>
<Formik
initialValues={
dateRangeStart && dateRangeEnd ?
{
...initialValues,
start_date: moment(dateRangeStart).format('YYYY-MM-DDTHH:mm'),
end_date: moment(dateRangeEnd).format('YYYY-MM-DDTHH:mm'),
} : initialValues
}
initialValues={memoizedInitialValues}
onSubmit={(values) => handleSubmit(values)}
enableReinitialize
>
<Form>
<FormField label="Tenant" labelFor="tenant">
<Field name="tenant" id="tenant" component={SelectField} options={[]} itemRef={'tenants'}></Field>
</FormField>
{!hasTenant && (
<FormField label="Tenant" labelFor="tenant">
<Field name="tenant" id="tenant" component={SelectField} options={[]} itemRef={'tenants'}></Field>
</FormField>
)}
<FormField label="Project" labelFor="project">
<Field name="project" id="project" component={SelectField} options={[]} itemRef={'projects'}></Field>
</FormField>
<FormField label="TrialType" labelFor="trial_type">
<Field name="trial_type" id="trial_type" component={SelectField} options={[]} itemRef={'trial_types'}></Field>
</FormField>
<FormField
label="Name"
>
@ -383,36 +116,6 @@ const TrialsNew = () => {
/>
</FormField>
<FormField label='Objective' hasTextareaHeight>
<Field
name='objective'
@ -421,42 +124,6 @@ const TrialsNew = () => {
></Field>
</FormField>
<FormField label="Status" labelFor="status">
<Field name="status" id="status" component="select">
@ -473,28 +140,6 @@ const TrialsNew = () => {
</Field>
</FormField>
<FormField
label="StartDate"
>
@ -505,32 +150,6 @@ const TrialsNew = () => {
/>
</FormField>
<FormField
label="EndDate"
>
@ -541,52 +160,10 @@ const TrialsNew = () => {
/>
</FormField>
<FormField label="Location" labelFor="location">
<Field name="location" id="location" component={SelectField} options={[]} itemRef={'locations'}></Field>
</FormField>
<FormField
label="ReferenceCode"
>
@ -596,55 +173,6 @@ const TrialsNew = () => {
/>
</FormField>
<FormField>
<Field
label='Attachments'
@ -661,31 +189,6 @@ const TrialsNew = () => {
></Field>
</FormField>
<FormField>
<Field
label='Images'
@ -702,43 +205,17 @@ const TrialsNew = () => {
></Field>
</FormField>
<FormField label="organizations" labelFor="organizations">
<Field name="organizations" id="organizations" component={SelectField} options={[]} itemRef={'organizations'}></Field>
</FormField>
{!hasOrganization && (
<FormField label="organizations" labelFor="organizations">
<Field name="organizations" id="organizations" component={SelectField} options={[]} itemRef={'organizations'}></Field>
</FormField>
)}
<BaseDivider />
<BaseButtons>
<BaseButton type="submit" color="info" label="Submit" />
<BaseButton type="reset" color="info" outline label="Reset" />
<BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/trials/trials-list')}/>
<BaseButton color='danger' outline label='Cancel' onClick={() => router.push('/trials/trials-list')}/>
</BaseButtons>
</Form>
</Formik>
@ -760,4 +237,4 @@ TrialsNew.getLayout = function getLayout(page: ReactElement) {
)
}
export default TrialsNew
export default TrialsNew

16
frontend/src/stores/authSlice.ts
View File

@ -61,6 +61,22 @@ export const passwordReset = createAsyncThunk(
},
);
export const impersonate = createAsyncThunk(
"auth/impersonate",
async (tenantId: string | null, { dispatch, rejectWithValue }) => {
try {
const response = await axios.post("auth/impersonate", { tenantId });
await dispatch(findMe());
return response.data;
} catch (error) {
if (!error.response) {
throw error;
}
return rejectWithValue(error.response.data);
}
}
);
export const findMe = createAsyncThunk('auth/findMe', async () => {
const response = await axios.get('auth/me');
return response.data;