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

Autosave: 20260218-021506

Browse Source
This commit is contained in:
Flatlogic Bot 2026-02-18 02:15:06 +00:00
parent 15445f0bc1
commit a004fcd820
26 changed files with 1403 additions and 4939 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
backend/src/db/api/businesses.js
View File

@ -32,7 +32,7 @@ module.exports = class BusinessesDBApi {
// Data Isolation for Crafted Network™
if (currentUser && currentUser.app_role) {
const roleName = currentUser.app_role.name;
if (roleName === 'VerifiedBusinessOwner') {
if (roleName === 'Verified Business Owner') {
where.owner_userId = currentUser.id;
}
}
@ -63,6 +63,31 @@ module.exports = class BusinessesDBApi {
return { rows: options?.countOnly ? [] : rows, count: count };
}
static async findAllAutocomplete(query, limit, offset) {
let where = {};
if (query) {
where = {
[Op.or]: [
{ ['id']: Utils.uuid(query) },
{ ['name']: { [Op.iLike]: `%${query}%` } },
],
};
}
const records = await db.businesses.findAll({
attributes: ['id', 'name'],
where,
limit: limit ? Number(limit) : undefined,
offset: offset ? Number(offset) : undefined,
order: [['name', 'ASC']],
});
return records.map((record) => ({
id: record.id,
label: record.name,
}));
}
static async findBy(where, options) {
const transaction = (options && options.transaction) || undefined;
const business = await db.businesses.findOne({

2
backend/src/db/api/lead_matches.js
View File

@ -20,7 +20,7 @@ module.exports = class Lead_matchesDBApi {
// Data Isolation for Crafted Network™
if (currentUser && currentUser.app_role) {
const roleName = currentUser.app_role.name;
if (roleName === 'VerifiedBusinessOwner') {
if (roleName === 'Verified Business Owner') {
// Business owners only see matches for THEIR businesses
where['$business.owner_userId$'] = currentUser.id;
} else if (roleName === 'Consumer') {

30
backend/src/db/api/leads.js
View File

@ -59,10 +59,8 @@ module.exports = class LeadsDBApi {
const roleName = currentUser.app_role.name;
if (roleName === 'Consumer') {
where.userId = currentUser.id;
} else if (roleName === 'VerifiedBusinessOwner') {
} else if (roleName === 'Verified Business Owner') {
// Business owners see leads matched to them
// This is complex for standard findAll, usually handled in lead_matches
// But if they access /leads, we should probably filter
where['$lead_matches_lead.business.owner_userId$'] = currentUser.id;
}
}
@ -102,7 +100,31 @@ module.exports = class LeadsDBApi {
};
}
// ... other methods kept as standard or updated as needed
static async findAllAutocomplete(query, limit, offset) {
let where = {};
if (query) {
where = {
[Op.or]: [
{ ['id']: Utils.uuid(query) },
{ ['keyword']: { [Op.iLike]: `%${query}%` } },
],
};
}
const records = await db.leads.findAll({
attributes: ['id', 'keyword'],
where,
limit: limit ? Number(limit) : undefined,
offset: offset ? Number(offset) : undefined,
order: [['keyword', 'ASC']],
});
return records.map((record) => ({
id: record.id,
label: record.keyword,
}));
}
static async findBy(where, options) {
const transaction = (options && options.transaction) || undefined;
const leads = await db.leads.findOne({

594
backend/src/db/api/messages.js
View File

@ -1,18 +1,12 @@
const db = require('../models');
const FileDBApi = require('./file');
const crypto = require('crypto');
const Utils = require('../utils');
const Sequelize = db.Sequelize;
const Op = Sequelize.Op;
module.exports = class MessagesDBApi {
static async create(data, options) {
const currentUser = (options && options.currentUser) || { id: null };
const transaction = (options && options.transaction) || undefined;
@ -20,453 +14,93 @@ module.exports = class MessagesDBApi {
const messages = await db.messages.create(
{
id: data.id || undefined,
body: data.body
||
null
,
read_at: data.read_at
||
null
,
created_at_ts: data.created_at_ts
||
null
,
importHash: data.importHash || null,
createdById: currentUser.id,
updatedById: currentUser.id,
},
{ transaction },
);
await messages.setLead( data.lead || null, {
transaction,
});
await messages.setSender_user( data.sender_user || null, {
transaction,
});
await messages.setReceiver_user( data.receiver_user || null, {
transaction,
});
return messages;
}
static async bulkImport(data, options) {
const currentUser = (options && options.currentUser) || { id: null };
const transaction = (options && options.transaction) || undefined;
// Prepare data - wrapping individual data transformations in a map() method
const messagesData = data.map((item, index) => ({
id: item.id || undefined,
body: item.body
||
null
,
read_at: item.read_at
||
null
,
created_at_ts: item.created_at_ts
||
null
,
importHash: item.importHash || null,
createdById: currentUser.id,
updatedById: currentUser.id,
createdAt: new Date(Date.now() + index * 1000),
}));
// Bulk create items
const messages = await db.messages.bulkCreate(messagesData, { transaction });
// For each item created, replace relation files
return messages;
}
static async update(id, data, options) {
const currentUser = (options && options.currentUser) || {id: null};
const transaction = (options && options.transaction) || undefined;
const messages = await db.messages.findByPk(id, {}, {transaction});
const updatePayload = {};
if (data.body !== undefined) updatePayload.body = data.body;
if (data.read_at !== undefined) updatePayload.read_at = data.read_at;
if (data.created_at_ts !== undefined) updatePayload.created_at_ts = data.created_at_ts;
updatePayload.updatedById = currentUser.id;
await messages.update(updatePayload, {transaction});
if (data.lead !== undefined) {
await messages.setLead(
data.lead,
{ transaction }
);
}
if (data.sender_user !== undefined) {
await messages.setSender_user(
data.sender_user,
{ transaction }
);
}
if (data.receiver_user !== undefined) {
await messages.setReceiver_user(
data.receiver_user,
{ transaction }
);
}
return messages;
}
static async deleteByIds(ids, options) {
const currentUser = (options && options.currentUser) || { id: null };
const transaction = (options && options.transaction) || undefined;
const messages = await db.messages.findAll({
where: {
id: {
[Op.in]: ids,
},
body: data.body || null,
read_at: data.read_at || null,
created_at_ts: data.created_at_ts || null,
importHash: data.importHash || null,
createdById: currentUser.id,
updatedById: currentUser.id,
},
transaction,
});
await db.sequelize.transaction(async (transaction) => {
for (const record of messages) {
await record.update(
{deletedBy: currentUser.id},
{transaction}
);
}
for (const record of messages) {
await record.destroy({transaction});
}
});
return messages;
}
static async remove(id, options) {
const currentUser = (options && options.currentUser) || {id: null};
const transaction = (options && options.transaction) || undefined;
const messages = await db.messages.findByPk(id, options);
await messages.update({
deletedBy: currentUser.id
}, {
transaction,
});
await messages.destroy({
transaction
});
return messages;
}
static async findBy(where, options) {
const transaction = (options && options.transaction) || undefined;
const messages = await db.messages.findOne(
{ where },
{ transaction },
);
if (!messages) {
return messages;
}
await messages.setLead( data.lead || null, { transaction });
await messages.setSender_user( data.sender_user || currentUser.id, { transaction });
await messages.setReceiver_user( data.receiver_user || null, { transaction });
const output = messages.get({plain: true});
output.lead = await messages.getLead({
transaction
});
output.sender_user = await messages.getSender_user({
transaction
});
output.receiver_user = await messages.getReceiver_user({
transaction
});
return output;
return messages;
}
static async findAll(
filter,
options
) {
static async findAll(filter, options) {
const limit = filter.limit || 0;
let offset = 0;
let where = {};
const currentPage = +filter.page;
offset = currentPage * limit;
const orderBy = null;
const transaction = (options && options.transaction) || undefined;
const currentUser = options?.currentUser;
const transaction = (options && options.transaction) || undefined;
let include = [
{
model: db.leads,
as: 'lead',
where: filter.lead ? {
[Op.or]: [
{ id: { [Op.in]: filter.lead.split('|').map(term => Utils.uuid(term)) } },
{
keyword: {
[Op.or]: filter.lead.split('|').map(term => ({ [Op.iLike]: `%${term}%` }))
}
},
]
} : {},
},
{
model: db.users,
as: 'sender_user',
where: filter.sender_user ? {
[Op.or]: [
{ id: { [Op.in]: filter.sender_user.split('|').map(term => Utils.uuid(term)) } },
{
firstName: {
[Op.or]: filter.sender_user.split('|').map(term => ({ [Op.iLike]: `%${term}%` }))
}
},
]
} : {},
},
{
model: db.users,
as: 'receiver_user',
where: filter.receiver_user ? {
[Op.or]: [
{ id: { [Op.in]: filter.receiver_user.split('|').map(term => Utils.uuid(term)) } },
{
firstName: {
[Op.or]: filter.receiver_user.split('|').map(term => ({ [Op.iLike]: `%${term}%` }))
}
},
]
} : {},
},
];
if (filter) {
if (filter.id) {
where = {
...where,
['id']: Utils.uuid(filter.id),
};
}
if (filter.body) {
where = {
...where,
[Op.and]: Utils.ilike(
'messages',
'body',
filter.body,
),
};
}
if (filter.read_atRange) {
const [start, end] = filter.read_atRange;
if (start !== undefined && start !== null && start !== '') {
where = {
...where,
read_at: {
...where.read_at,
[Op.gte]: start,
},
};
}
if (end !== undefined && end !== null && end !== '') {
where = {
...where,
read_at: {
...where.read_at,
[Op.lte]: end,
},
};
}
}
if (filter.created_at_tsRange) {
const [start, end] = filter.created_at_tsRange;
if (start !== undefined && start !== null && start !== '') {
where = {
...where,
created_at_ts: {
...where.created_at_ts,
[Op.gte]: start,
},
};
}
if (end !== undefined && end !== null && end !== '') {
where = {
...where,
created_at_ts: {
...where.created_at_ts,
[Op.lte]: end,
},
};
}
}
if (filter.active !== undefined) {
where = {
...where,
active: filter.active === true || filter.active === 'true'
};
}
if (filter.createdAtRange) {
const [start, end] = filter.createdAtRange;
if (start !== undefined && start !== null && start !== '') {
where = {
...where,
['createdAt']: {
...where.createdAt,
[Op.gte]: start,
},
};
}
if (end !== undefined && end !== null && end !== '') {
where = {
...where,
['createdAt']: {
...where.createdAt,
[Op.lte]: end,
},
};
}
// Data Isolation for Crafted Network™
if (currentUser && currentUser.app_role) {
const roleName = currentUser.app_role.name;
if (roleName === 'Verified Business Owner') {
where[Op.or] = [
{ sender_userId: currentUser.id },
{ receiver_userId: currentUser.id },
{ '$lead.lead_matches_lead.business.owner_userId$': currentUser.id }
];
} else if (roleName === 'Consumer') {
where[Op.or] = [
{ sender_userId: currentUser.id },
{ receiver_userId: currentUser.id },
{ '$lead.userId$': currentUser.id }
];
}
}
let include = [
{
model: db.leads,
as: 'lead',
include: [{
model: db.lead_matches,
as: 'lead_matches_lead',
include: [{ model: db.businesses, as: 'business' }]
}],
where: filter.lead ? {
[Op.or]: [
{ id: { [Op.in]: filter.lead.split('|').map(term => Utils.uuid(term)) } },
{ keyword: { [Op.or]: filter.lead.split('|').map(term => ({ [Op.iLike]: `%${term}%` })) } },
]
} : {},
},
{
model: db.users,
as: 'sender_user',
where: filter.sender_user ? {
[Op.or]: [
{ id: { [Op.in]: filter.sender_user.split('|').map(term => Utils.uuid(term)) } },
{ firstName: { [Op.or]: filter.sender_user.split('|').map(term => ({ [Op.iLike]: `%${term}%` })) } },
]
} : {},
},
{
model: db.users,
as: 'receiver_user',
where: filter.receiver_user ? {
[Op.or]: [
{ id: { [Op.in]: filter.receiver_user.split('|').map(term => Utils.uuid(term)) } },
{ firstName: { [Op.or]: filter.receiver_user.split('|').map(term => ({ [Op.iLike]: `%${term}%` })) } },
]
} : {},
},
];
if (filter) {
if (filter.id) where.id = Utils.uuid(filter.id);
if (filter.body) where.body = { [Op.iLike]: `%${filter.body}%` };
}
const queryOptions = {
where,
@ -475,8 +109,7 @@ module.exports = class MessagesDBApi {
order: filter.field && filter.sort
? [[filter.field, filter.sort]]
: [['createdAt', 'desc']],
transaction: options?.transaction,
logging: console.log
transaction,
};
if (!options?.countOnly) {
@ -484,43 +117,81 @@ module.exports = class MessagesDBApi {
queryOptions.offset = offset ? Number(offset) : undefined;
}
try {
const { rows, count } = await db.messages.findAndCountAll(queryOptions);
const { rows, count } = await db.messages.findAndCountAll(queryOptions);
return {
rows: options?.countOnly ? [] : rows,
count: count
};
} catch (error) {
console.error('Error executing query:', error);
throw error;
}
return {
rows: options?.countOnly ? [] : rows,
count: count
};
}
static async findAllAutocomplete(query, limit, offset, ) {
let where = {};
static async findBy(where, options) {
const transaction = (options && options.transaction) || undefined;
const messages = await db.messages.findOne({ where, transaction });
if (!messages) return null;
const output = messages.get({plain: true});
output.lead = await messages.getLead({ transaction });
output.sender_user = await messages.getSender_user({ transaction });
output.receiver_user = await messages.getReceiver_user({ transaction });
return output;
}
static async update(id, data, options) {
const currentUser = (options && options.currentUser) || {id: null};
const transaction = (options && options.transaction) || undefined;
const messages = await db.messages.findByPk(id, {transaction});
if (!messages) return null;
const updatePayload = { ...data, updatedById: currentUser.id };
await messages.update(updatePayload, {transaction});
if (data.lead !== undefined) await messages.setLead(data.lead, { transaction });
if (data.sender_user !== undefined) await messages.setSender_user(data.sender_user, { transaction });
if (data.receiver_user !== undefined) await messages.setReceiver_user(data.receiver_user, { transaction });
return messages;
}
static async deleteByIds(ids, options) {
const currentUser = (options && options.currentUser) || { id: null };
const transaction = (options && options.transaction) || undefined;
const messages = await db.messages.findAll({ where: { id: { [Op.in]: ids } }, transaction });
for (const record of messages) {
await record.update({deletedBy: currentUser.id}, {transaction});
await record.destroy({transaction});
}
return messages;
}
static async remove(id, options) {
const currentUser = (options && options.currentUser) || {id: null};
const transaction = (options && options.transaction) || undefined;
const messages = await db.messages.findByPk(id, options);
await messages.update({ deletedBy: currentUser.id }, { transaction });
await messages.destroy({ transaction });
return messages;
}
static async findAllAutocomplete(query, limit, offset) {
let where = {};
if (query) {
where = {
[Op.or]: [
{ ['id']: Utils.uuid(query) },
Utils.ilike(
'messages',
'body',
query,
),
{ ['body']: { [Op.iLike]: `%${query}%` } },
],
};
}
const records = await db.messages.findAll({
attributes: [ 'id', 'body' ],
attributes: ['id', 'body'],
where,
limit: limit ? Number(limit) : undefined,
offset: offset ? Number(offset) : undefined,
orderBy: [['body', 'ASC']],
order: [['body', 'ASC']],
});
return records.map((record) => ({
@ -528,7 +199,4 @@ module.exports = class MessagesDBApi {
label: record.body,
}));
}
};
};

24
backend/src/db/api/reviews.js
View File

@ -1,4 +1,3 @@
const db = require('../models');
const FileDBApi = require('./file');
const crypto = require('crypto');
@ -46,6 +45,9 @@ module.exports = class ReviewsDBApi {
||
null
,
response: data.response || null,
response_at_ts: data.response ? new Date() : null,
created_at_ts: data.created_at_ts
||
@ -170,6 +172,11 @@ module.exports = class ReviewsDBApi {
if (data.moderation_notes !== undefined) updatePayload.moderation_notes = data.moderation_notes;
if (data.response !== undefined) {
updatePayload.response = data.response;
updatePayload.response_at_ts = new Date();
}
if (data.created_at_ts !== undefined) updatePayload.created_at_ts = data.created_at_ts;
@ -345,6 +352,18 @@ module.exports = class ReviewsDBApi {
const transaction = (options && options.transaction) || undefined;
const currentUser = options?.currentUser;
// Data Isolation for Crafted Network™
if (currentUser && currentUser.app_role) {
const roleName = currentUser.app_role.name;
if (roleName === 'Verified Business Owner') {
where['$business.owner_userId$'] = currentUser.id;
} else if (roleName === 'Consumer') {
where.userId = currentUser.id;
}
}
let include = [
{
@ -633,5 +652,4 @@ module.exports = class ReviewsDBApi {
}
};
};

20
backend/src/db/migrations/20260218012153-add-response-to-reviews.js Normal file
View File

@ -0,0 +1,20 @@
'use strict';
/** @type {import('sequelize-cli').Migration} */
module.exports = {
async up (queryInterface, Sequelize) {
await queryInterface.addColumn('reviews', 'response', {
type: Sequelize.TEXT,
allowNull: true,
});
await queryInterface.addColumn('reviews', 'response_at_ts', {
type: Sequelize.DATE,
allowNull: true,
});
},
async down (queryInterface, Sequelize) {
await queryInterface.removeColumn('reviews', 'response');
await queryInterface.removeColumn('reviews', 'response_at_ts');
}
};

12
backend/src/db/models/reviews.js
View File

@ -67,6 +67,14 @@ moderation_notes: {
},
response: {
type: DataTypes.TEXT,
},
response_at_ts: {
type: DataTypes.DATE,
},
created_at_ts: {
type: DataTypes.DATE,
@ -167,6 +175,4 @@ updated_at_ts: {
return reviews;
};
};

88
backend/src/db/seeders/20260218012500-update-vbo-permissions.js Normal file
View File

@ -0,0 +1,88 @@
const { v4: uuid } = require("uuid");
module.exports = {
/**
* @param{import("sequelize").QueryInterface} queryInterface
* @return {Promise<void>}
*/
async up(queryInterface) {
const createdAt = new Date();
const updatedAt = new Date();
/** @type {Map<string, string>} */
const idMap = new Map();
/**
* @param {string} key
* @return {string}
*/
function getId(key) {
if (idMap.has(key)) {
return idMap.get(key);
}
const id = uuid();
idMap.set(key, id);
return id;
}
// Since we are updating, we should try to fetch existing IDs if possible,
// but in a seeder for this kind of platform it's often better to just recreate or use fixed IDs if they were fixed.
// However, the previous seeder used random UUIDs.
// To update permissions, I'll need to fetch the roles.
const roles = await queryInterface.sequelize.query(
`SELECT id, name FROM "roles";`,
{ type: queryInterface.sequelize.QueryTypes.SELECT }
);
const permissions = await queryInterface.sequelize.query(
`SELECT id, name FROM "permissions";`,
{ type: queryInterface.sequelize.QueryTypes.SELECT }
);
const getRoleId = (name) => roles.find(r => r.name === name)?.id;
const getPermId = (name) => permissions.find(p => p.name === name)?.id;
const vboRoleId = getRoleId("Verified Business Owner");
if (vboRoleId) {
const newPerms = [
"CREATE_BUSINESSES",
"UPDATE_REVIEWS",
"CREATE_BUSINESS_PHOTOS",
"CREATE_BUSINESS_CATEGORIES",
"CREATE_SERVICE_PRICES",
"CREATE_LEAD_MATCHES", // Maybe?
"CREATE_MESSAGES",
];
const rolePermsToInsert = [];
for (const p of newPerms) {
const permId = getPermId(p);
if (permId) {
// Check if it already exists
const existing = await queryInterface.sequelize.query(
`SELECT * FROM "rolesPermissionsPermissions" WHERE "roles_permissionsId" = '${vboRoleId}' AND "permissionId" = '${permId}';`,
{ type: queryInterface.sequelize.QueryTypes.SELECT }
);
if (existing.length === 0) {
rolePermsToInsert.push({
createdAt,
updatedAt,
roles_permissionsId: vboRoleId,
permissionId: permId
});
}
}
}
if (rolePermsToInsert.length > 0) {
await queryInterface.bulkInsert("rolesPermissionsPermissions", rolePermsToInsert);
}
}
},
async down(queryInterface) {
// No easy way to undo this without more logic
}
};

6
backend/src/routes/search.js
View File

@ -22,6 +22,8 @@ router.use(checkCrudPermissions('search'));
* properties:
* searchQuery:
* type: string
* location:
* type: string
* required:
* - searchQuery
* responses:
@ -34,14 +36,14 @@ router.use(checkCrudPermissions('search'));
*/
router.post('/', async (req, res) => {
const { searchQuery } = req.body;
const { searchQuery, location } = req.body;
if (!searchQuery) {
return res.status(400).json({ error: 'Please enter a search query' });
}
try {
const foundMatches = await SearchService.search(searchQuery, req.currentUser );
const foundMatches = await SearchService.search(searchQuery, req.currentUser, location );
res.json(foundMatches);
} catch (error) {
console.error('Internal Server Error', error);

42
backend/src/services/businesses.js
View File

@ -2,6 +2,7 @@ const db = require('../db/models');
const BusinessesDBApi = require('../db/api/businesses');
const processFile = require("../middlewares/upload");
const ValidationError = require('./notifications/errors/validation');
const ForbiddenError = require('./notifications/errors/forbidden');
const csv = require('csv-parser');
const axios = require('axios');
const config = require('../config');
@ -11,7 +12,12 @@ module.exports = class BusinessesService {
static async create(data, currentUser) {
const transaction = await db.sequelize.transaction();
try {
await BusinessesDBApi.create(
// For VBOs, force the owner to be the current user
if (currentUser.app_role?.name === 'Verified Business Owner') {
data.owner_user = currentUser.id;
}
const business = await BusinessesDBApi.create(
data,
{
currentUser,
@ -20,6 +26,7 @@ module.exports = class BusinessesService {
);
await transaction.commit();
return business;
} catch (error) {
await transaction.rollback();
throw error;
@ -88,17 +95,27 @@ module.exports = class BusinessesService {
static async update(data, id, currentUser) {
const transaction = await db.sequelize.transaction();
try {
let businesses = await BusinessesDBApi.findBy(
let business = await BusinessesDBApi.findBy(
{id},
{transaction},
);
if (!businesses) {
if (!business) {
throw new ValidationError(
'businessesNotFound',
);
}
// Ownership check for Verified Business Owner
if (currentUser.app_role?.name === 'Verified Business Owner') {
if (business.owner_userId !== currentUser.id) {
throw new ForbiddenError('forbidden');
}
// Prevent transferring ownership
delete data.owner_user;
delete data.owner_userId;
}
const updatedBusinesses = await BusinessesDBApi.update(
id,
data,
@ -121,6 +138,20 @@ module.exports = class BusinessesService {
const transaction = await db.sequelize.transaction();
try {
// Ownership check for Verified Business Owner
if (currentUser.app_role?.name === 'Verified Business Owner') {
const records = await db.businesses.findAll({
where: {
id: { [db.Sequelize.Op.in]: ids },
owner_userId: { [db.Sequelize.Op.ne]: currentUser.id }
},
transaction
});
if (records.length > 0) {
throw new ForbiddenError('forbidden');
}
}
await BusinessesDBApi.deleteByIds(ids, {
currentUser,
transaction,
@ -137,6 +168,11 @@ module.exports = class BusinessesService {
const transaction = await db.sequelize.transaction();
try {
let business = await db.businesses.findByPk(id, { transaction });
if (currentUser.app_role?.name === 'Verified Business Owner' && business.owner_userId !== currentUser.id) {
throw new ForbiddenError('forbidden');
}
await BusinessesDBApi.remove(
id,
{

90
backend/src/services/googlePlaces.js
View File

@ -44,7 +44,7 @@ class GooglePlacesService {
const response = await axios.get(`${this.baseUrl}/details/json`, {
params: {
place_id: placeId,
fields: 'name,formatted_address,formatted_phone_number,website,opening_hours,geometry,rating,types,photos',
fields: 'name,formatted_address,address_components,formatted_phone_number,website,opening_hours,geometry,rating,types,photos,editorial_summary',
key: this.apiKey,
},
});
@ -66,38 +66,76 @@ class GooglePlacesService {
});
if (business) {
// Even if it exists, we might want to update the description or hours if missing
if (!business.description || !business.hours_json) {
const details = await this.getPlaceDetails(googlePlace.place_id);
if (details) {
let updated = false;
if (!business.description && details.editorial_summary) {
business.description = details.editorial_summary.overview;
updated = true;
}
if (!business.hours_json && details.opening_hours) {
business.hours_json = JSON.stringify(details.opening_hours);
updated = true;
}
if (updated) {
await business.save({ transaction });
}
}
}
await transaction.commit();
return business;
}
// If it's a new business, let's fetch full details to get the description
const details = await this.getPlaceDetails(googlePlace.place_id);
const placeData = details || googlePlace;
// Try to parse city/state/zip from address if available
let city = null;
let state = null;
let zip = null;
const formattedAddress = placeData.formatted_address || googlePlace.formatted_address || googlePlace.vicinity;
if (formattedAddress) {
const parts = formattedAddress.split(',');
if (parts.length >= 3) {
// Typically "City, State Zip, Country" or "City, State, Country"
city = parts[parts.length - 3].trim();
const stateZip = parts[parts.length - 2].trim().split(' ');
if (stateZip.length >= 1) state = stateZip[0];
if (stateZip.length >= 2) zip = stateZip[1];
}
}
// Prepare business data
const businessData = {
id: uuidv4(),
name: googlePlace.name,
slug: googlePlace.name.toLowerCase().replace(/[^a-z0-9]+/g, '-'),
address: googlePlace.formatted_address || googlePlace.vicinity,
lat: googlePlace.geometry?.location?.lat,
lng: googlePlace.geometry?.location?.lng,
name: placeData.name,
slug: placeData.name.toLowerCase().replace(/[^a-z0-9]+/g, '-'),
address: formattedAddress,
city,
state,
zip,
lat: placeData.geometry?.location?.lat,
lng: placeData.geometry?.location?.lng,
google_place_id: googlePlace.place_id,
rating: googlePlace.rating || 0,
rating: placeData.rating || 0,
is_active: true,
is_claimed: false,
hours_json: googlePlace.opening_hours ? JSON.stringify(googlePlace.opening_hours) : null,
hours_json: placeData.opening_hours ? JSON.stringify(placeData.opening_hours) : null,
description: placeData.editorial_summary?.overview || null,
phone: placeData.formatted_phone_number || null,
website: placeData.website || null,
};
// If we have more details (from getPlaceDetails)
if (googlePlace.formatted_phone_number) {
businessData.phone = googlePlace.formatted_phone_number;
}
if (googlePlace.website) {
businessData.website = googlePlace.website;
}
business = await db.businesses.create(businessData, { transaction });
// Handle categories/types
if (googlePlace.types) {
for (const type of googlePlace.types) {
const types = placeData.types || googlePlace.types;
if (types) {
for (const type of types) {
// Find or create category
let category = await db.categories.findOne({
where: { name: { [db.Sequelize.Op.iLike]: type.replace(/_/g, ' ') } },
@ -105,9 +143,12 @@ class GooglePlacesService {
});
if (!category) {
// Only create if it's a "beauty" related type to keep it relevant
const beautyTypes = ['beauty_salon', 'hair_care', 'spa', 'health', 'cosmetics'];
if (beautyTypes.includes(type)) {
// Include beauty types AND common service types found on landing page
const allowedTypes = [
'beauty_salon', 'hair_care', 'spa', 'health', 'cosmetics', 'beauty_product', 'hair_salon', 'massage', 'nail_salon', 'skin_care',
'plumber', 'electrician', 'hvac_contractor', 'painter', 'home_improvement_contractor', 'general_contractor', 'cleaning_service', 'locksmith', 'roofing_contractor'
];
if (allowedTypes.includes(type)) {
category = await db.categories.create({
id: uuidv4(),
name: type.replace(/_/g, ' ').charAt(0).toUpperCase() + type.replace(/_/g, ' ').slice(1),
@ -128,8 +169,9 @@ class GooglePlacesService {
}
// Handle photos
if (googlePlace.photos && googlePlace.photos.length > 0) {
const photo = googlePlace.photos[0];
const photos = placeData.photos || googlePlace.photos;
if (photos && photos.length > 0) {
const photo = photos[0];
const photoReference = photo.photo_reference;
const photoUrl = `${this.baseUrl}/photo?maxwidth=800&photoreference=${photoReference}&key=${this.apiKey}`;
@ -182,4 +224,4 @@ class GooglePlacesService {
}
}
module.exports = new GooglePlacesService();
module.exports = new GooglePlacesService();

21
backend/src/services/lead_matches.js
View File

@ -2,15 +2,12 @@ const db = require('../db/models');
const Lead_matchesDBApi = require('../db/api/lead_matches');
const processFile = require("../middlewares/upload");
const ValidationError = require('./notifications/errors/validation');
const ForbiddenError = require('./notifications/errors/forbidden');
const csv = require('csv-parser');
const axios = require('axios');
const config = require('../config');
const stream = require('stream');
module.exports = class Lead_matchesService {
static async create(data, currentUser) {
const transaction = await db.sequelize.transaction();
@ -68,17 +65,25 @@ module.exports = class Lead_matchesService {
static async update(data, id, currentUser) {
const transaction = await db.sequelize.transaction();
try {
let lead_matches = await Lead_matchesDBApi.findBy(
let lead_match = await Lead_matchesDBApi.findBy(
{id},
{transaction},
);
if (!lead_matches) {
if (!lead_match) {
throw new ValidationError(
'lead_matchesNotFound',
);
}
// Ownership check for Verified Business Owner
if (currentUser.app_role?.name === 'Verified Business Owner') {
const business = await db.businesses.findByPk(lead_match.businessId, { transaction });
if (business && business.owner_userId !== currentUser.id) {
throw new ForbiddenError('forbidden');
}
}
const updatedLead_matches = await Lead_matchesDBApi.update(
id,
data,
@ -133,6 +138,4 @@ module.exports = class Lead_matchesService {
}
};
};

17
backend/src/services/reviews.js
View File

@ -2,6 +2,7 @@ const db = require('../db/models');
const ReviewsDBApi = require('../db/api/reviews');
const processFile = require("../middlewares/upload");
const ValidationError = require('./notifications/errors/validation');
const ForbiddenError = require('./notifications/errors/forbidden');
const csv = require('csv-parser');
const axios = require('axios');
const config = require('../config');
@ -95,17 +96,27 @@ module.exports = class ReviewsService {
static async update(data, id, currentUser) {
const transaction = await db.sequelize.transaction();
try {
let reviews = await ReviewsDBApi.findBy(
let review = await ReviewsDBApi.findBy(
{id},
{transaction},
);
if (!reviews) {
if (!review) {
throw new ValidationError(
'reviewsNotFound',
);
}
// Ownership check for Verified Business Owner
// VBO can only update reviews for their own businesses
if (currentUser.app_role?.name === 'Verified Business Owner') {
// Check business owner
const business = await db.businesses.findByPk(review.businessId, { transaction });
if (business && business.owner_userId !== currentUser.id) {
throw new ForbiddenError('forbidden');
}
}
const updatedReviews = await ReviewsDBApi.update(
id,
data,
@ -115,7 +126,7 @@ module.exports = class ReviewsService {
},
);
const businessId = (updatedReviews.business && updatedReviews.business.id) || updatedReviews.businessId || reviews.businessId;
const businessId = (updatedReviews.business && updatedReviews.business.id) || updatedReviews.businessId || review.businessId;
await this.updateBusinessRating(businessId, transaction);
await transaction.commit();

91
backend/src/services/search.js
View File

@ -51,12 +51,14 @@ async function checkPermissions(permission, currentUser) {
}
module.exports = class SearchService {
static async search(searchQuery, currentUser ) {
static async search(searchQuery, currentUser, location ) {
try {
if (!searchQuery) {
throw new ValidationError('iam.errors.searchQueryRequired');
}
const tableColumns = {
// Columns that can be searched using iLike
const searchableColumns = {
"users": [
"firstName",
"lastName",
@ -66,7 +68,6 @@ module.exports = class SearchService {
"categories": [
"name",
"slug",
"icon",
"description",
],
"locations": [
@ -88,6 +89,23 @@ module.exports = class SearchService {
"zip",
],
};
// All columns to be returned in the result
const returnColumns = {
"users": [...searchableColumns.users],
"categories": [...searchableColumns.categories, "icon"],
"locations": [...searchableColumns.locations],
"businesses": [
...searchableColumns.businesses,
"is_claimed",
"rating",
"lat",
"lng",
"reliability_score",
"response_time_median_minutes"
],
};
const columnsInt = {
"businesses": [
"lat",
@ -99,26 +117,49 @@ module.exports = class SearchService {
let allFoundRecords = [];
for (const tableName in tableColumns) {
if (tableColumns.hasOwnProperty(tableName)) {
const attributesToSearch = tableColumns[tableName];
for (const tableName in searchableColumns) {
if (searchableColumns.hasOwnProperty(tableName)) {
const attributesToSearch = searchableColumns[tableName];
const attributesIntToSearch = columnsInt[tableName] || [];
const searchConditions = [
...attributesToSearch.map(attribute => ({
[attribute]: {
[Op.iLike] : `%${searchQuery}%`,
},
})),
...attributesIntToSearch.map(attribute => (
Sequelize.where(
Sequelize.cast(Sequelize.col(`${tableName}.${attribute}`), 'varchar'),
{ [Op.iLike]: `%${searchQuery}%` }
)
)),
];
const whereCondition = {
[Op.or]: [
...attributesToSearch.map(attribute => ({
[attribute]: {
[Op.iLike] : `%${searchQuery}%`,
},
})),
...attributesIntToSearch.map(attribute => (
Sequelize.where(
Sequelize.cast(Sequelize.col(`${tableName}.${attribute}`), 'varchar'),
{ [Op.iLike]: `%${searchQuery}%` }
)
)),
],
[Op.or]: searchConditions,
};
// If location is provided, bias local results by location for businesses and locations
if (location && (tableName === 'businesses' || tableName === 'locations')) {
const locationConditions = [
{ zip: { [Op.iLike]: `%${location}%` } },
{ city: { [Op.iLike]: `%${location}%` } },
{ state: { [Op.iLike]: `%${location}%` } },
];
// locations table doesn't have address column
if (tableName === 'businesses') {
locationConditions.push({ address: { [Op.iLike]: `%${location}%` } });
}
whereCondition[Op.and] = [
{
[Op.or]: locationConditions
}
];
}
const hasPerm = await checkPermissions(`READ_${tableName.toUpperCase()}`, currentUser);
if (!hasPerm) {
continue;
@ -138,7 +179,7 @@ module.exports = class SearchService {
const foundRecords = await db[tableName].findAll({
where: whereCondition,
attributes: [...tableColumns[tableName], 'id', ...attributesIntToSearch],
attributes: [...returnColumns[tableName], 'id'],
include
});
@ -146,7 +187,7 @@ module.exports = class SearchService {
const matchAttribute = [];
for (const attribute of attributesToSearch) {
if (record[attribute]?.toLowerCase()?.includes(searchQuery.toLowerCase())) {
if (record[attribute] && typeof record[attribute] === 'string' && record[attribute].toLowerCase().includes(searchQuery.toLowerCase())) {
matchAttribute.push(attribute);
}
}
@ -208,8 +249,10 @@ module.exports = class SearchService {
try {
// If no location in search query, try to append a default location to help Google
let refinedQuery = searchQuery;
if (!searchQuery.match(/\d{5}/) && !searchQuery.match(/in\s+[A-Za-z]+/i)) {
refinedQuery = `${searchQuery} 22193`; // Default to Woodbridge, VA area
if (location) {
refinedQuery = `${searchQuery} ${location}`;
} else if (!searchQuery.match(/\d{5}/) && !searchQuery.match(/in\s+[A-Za-z]+/i)) {
refinedQuery = `${searchQuery} USA`; // Search nationwide if no location specified
}
const googleResults = await GooglePlacesService.searchPlaces(refinedQuery);
@ -230,7 +273,7 @@ module.exports = class SearchService {
});
// Add to search results if not already there
if (!allFoundRecords.find(r => r.id === fullBusiness.id)) {
if (fullBusiness && !allFoundRecords.find(r => r.id === fullBusiness.id)) {
allFoundRecords.push({
...fullBusiness.get(),
matchAttribute: ['name'],

183
frontend/src/components/Reviews/configureReviewsCols.tsx
View File

@ -1,16 +1,9 @@
import React from 'react';
import BaseIcon from '../BaseIcon';
import { mdiEye, mdiTrashCan, mdiPencilOutline } from '@mdi/js';
import axios from 'axios';
import {
GridActionsCellItem,
GridRowParams,
GridValueGetterParams,
} from '@mui/x-data-grid';
import ImageField from '../ImageField';
import {saveFile} from "../../helpers/fileSaver";
import dataFormatter from '../../helpers/dataFormatter'
import DataGridMultiSelect from "../DataGridMultiSelect";
import ListActionsPopover from '../ListActionsPopover';
import {hasPermission} from "../../helpers/userPermissions";
@ -38,9 +31,9 @@ export const loadColumns = async (
}
const hasUpdatePermission = hasPermission(user, 'UPDATE_REVIEWS')
const isBusinessOwner = user?.app_role?.name === 'Verified Business Owner';
return [
const columns: any[] = [
{
field: 'business',
headerName: 'Business',
@ -49,10 +42,7 @@ export const loadColumns = async (
filterable: false,
headerClassName: 'datagrid--header',
cellClassName: 'datagrid--cell',
editable: hasUpdatePermission,
editable: hasUpdatePermission && !isBusinessOwner,
sortable: false,
type: 'singleSelect',
getOptionValue: (value: any) => value?.id,
@ -60,9 +50,7 @@ export const loadColumns = async (
valueOptions: await callOptionsApi('businesses'),
valueGetter: (params: GridValueGetterParams) =>
params?.value?.id ?? params?.value,
},
{
field: 'user',
headerName: 'User',
@ -71,10 +59,7 @@ export const loadColumns = async (
filterable: false,
headerClassName: 'datagrid--header',
cellClassName: 'datagrid--cell',
editable: hasUpdatePermission,
editable: hasUpdatePermission && !isBusinessOwner,
sortable: false,
type: 'singleSelect',
getOptionValue: (value: any) => value?.id,
@ -82,144 +67,89 @@ export const loadColumns = async (
valueOptions: await callOptionsApi('users'),
valueGetter: (params: GridValueGetterParams) =>
params?.value?.id ?? params?.value,
},
{
field: 'lead',
headerName: 'Lead',
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('leads'),
valueGetter: (params: GridValueGetterParams) =>
params?.value?.id ?? params?.value,
},
{
field: 'rating',
headerName: 'Rating',
flex: 1,
minWidth: 120,
flex: 0.5,
minWidth: 80,
filterable: false,
headerClassName: 'datagrid--header',
cellClassName: 'datagrid--cell',
editable: hasUpdatePermission,
editable: hasUpdatePermission && !isBusinessOwner,
type: 'number',
},
{
field: 'text',
headerName: 'Text',
flex: 1,
minWidth: 120,
headerName: 'Review',
flex: 2,
minWidth: 200,
filterable: false,
headerClassName: 'datagrid--header',
cellClassName: 'datagrid--cell',
editable: hasUpdatePermission,
editable: hasUpdatePermission && !isBusinessOwner,
},
{
field: 'is_verified_job',
headerName: 'IsVerifiedJob',
flex: 1,
minWidth: 120,
field: 'response',
headerName: 'Your Response',
flex: 2,
minWidth: 200,
filterable: false,
headerClassName: 'datagrid--header',
cellClassName: 'datagrid--cell',
editable: hasUpdatePermission,
type: 'boolean',
},
{
field: 'status',
headerName: 'Status',
flex: 1,
minWidth: 120,
minWidth: 100,
filterable: false,
headerClassName: 'datagrid--header',
cellClassName: 'datagrid--cell',
editable: hasUpdatePermission,
},
editable: hasUpdatePermission && !isBusinessOwner,
}
];
if (!isBusinessOwner) {
columns.push(
{
field: 'is_verified_job',
headerName: 'Verified',
flex: 0.5,
minWidth: 80,
filterable: false,
headerClassName: 'datagrid--header',
cellClassName: 'datagrid--cell',
editable: hasUpdatePermission,
type: 'boolean',
},
{
field: 'moderation_notes',
headerName: 'Moderation Notes',
flex: 1,
minWidth: 120,
filterable: false,
headerClassName: 'datagrid--header',
cellClassName: 'datagrid--cell',
editable: hasUpdatePermission,
}
);
}
columns.push(
{
field: 'moderation_notes',
headerName: 'ModerationNotes',
field: 'createdAt',
headerName: 'Date',
flex: 1,
minWidth: 120,
minWidth: 150,
filterable: false,
headerClassName: 'datagrid--header',
cellClassName: 'datagrid--cell',
editable: hasUpdatePermission,
},
{
field: 'created_at_ts',
headerName: 'CreatedAt',
flex: 1,
minWidth: 120,
filterable: false,
headerClassName: 'datagrid--header',
cellClassName: 'datagrid--cell',
editable: hasUpdatePermission,
type: 'dateTime',
valueGetter: (params: GridValueGetterParams) =>
new Date(params.row.created_at_ts),
new Date(params.row.createdAt),
},
{
field: 'updated_at_ts',
headerName: 'UpdatedAt',
flex: 1,
minWidth: 120,
filterable: false,
headerClassName: 'datagrid--header',
cellClassName: 'datagrid--cell',
editable: hasUpdatePermission,
type: 'dateTime',
valueGetter: (params: GridValueGetterParams) =>
new Date(params.row.updated_at_ts),
},
{
field: 'actions',
type: 'actions',
@ -227,7 +157,6 @@ export const loadColumns = async (
headerClassName: 'datagrid--header',
cellClassName: 'datagrid--cell',
getActions: (params: GridRowParams) => {
return [
<div key={params?.row?.id}>
<ListActionsPopover
@ -235,13 +164,13 @@ export const loadColumns = async (
itemId={params?.row?.id}
pathEdit={`/reviews/reviews-edit/?id=${params?.row?.id}`}
pathView={`/reviews/reviews-view/?id=${params?.row?.id}`}
hasUpdatePermission={hasUpdatePermission}
/>
</div>,
]
},
},
];
};
}
);
return columns;
};

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

@ -87,6 +87,32 @@ export default function LayoutAuthenticated({
const layoutAsidePadding = 'xl:pl-60'
// Filter and customize menu for Verified Business Owner
const filteredMenu = menuAside.filter(item => {
if (currentUser?.app_role?.name === 'Verified Business Owner') {
const allowedPaths = [
'/dashboard',
'/businesses/businesses-list',
'/leads/leads-list',
'/reviews/reviews-list',
'/messages/messages-list',
'/profile'
];
return allowedPaths.includes(item.href);
}
return true;
}).map(item => {
if (currentUser?.app_role?.name === 'Verified Business Owner') {
if (item.href === '/leads/leads-list') {
return { ...item, label: 'Service Requests' };
}
if (item.href === '/businesses/businesses-list') {
return { ...item, label: 'My Listing' };
}
}
return item;
});
return (
<div className={`${darkMode ? 'dark' : ''} overflow-hidden lg:overflow-visible`}>
<div
@ -117,7 +143,7 @@ export default function LayoutAuthenticated({
<AsideMenu
isAsideMobileExpanded={isAsideMobileExpanded}
isAsideLgActive={isAsideLgActive}
menu={menuAside}
menu={filteredMenu}
onAsideLgClose={() => setIsAsideLgActive(false)}
/>
{children}
@ -125,4 +151,4 @@ export default function LayoutAuthenticated({
</div>
</div>
)
}
}

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

@ -7,6 +7,7 @@ import LayoutAuthenticated from '../layouts/Authenticated'
import SectionMain from '../components/SectionMain'
import SectionTitleLineWithButton from '../components/SectionTitleLineWithButton'
import BaseIcon from "../components/BaseIcon";
import BaseButton from "../components/BaseButton";
import { getPageTitle } from '../config'
import Link from "next/link";
@ -16,6 +17,7 @@ import { WidgetCreator } from '../components/WidgetCreator/WidgetCreator';
import { SmartWidget } from '../components/SmartWidget/SmartWidget';
import { useAppDispatch, useAppSelector } from '../stores/hooks';
const Dashboard = () => {
const dispatch = useAppDispatch();
const iconsColor = useAppSelector((state) => state.style.iconsColor);
@ -24,7 +26,6 @@ const Dashboard = () => {
const loadingMessage = 'Loading...';
const [users, setUsers] = React.useState(loadingMessage);
const [roles, setRoles] = React.useState(loadingMessage);
const [permissions, setPermissions] = React.useState(loadingMessage);
@ -49,7 +50,6 @@ const Dashboard = () => {
const [badge_rules, setBadge_rules] = React.useState(loadingMessage);
const [trust_adjustments, setTrust_adjustments] = React.useState(loadingMessage);
const [widgetsRole, setWidgetsRole] = React.useState({
role: { value: '', label: '' },
});
@ -57,21 +57,21 @@ const Dashboard = () => {
const { isFetchingQuery } = useAppSelector((state) => state.openAi);
const { rolesWidgets, loading } = useAppSelector((state) => state.roles);
const isBusinessOwner = currentUser?.app_role?.name === 'Verified Business Owner';
const myBusiness = currentUser?.businesses_owner_user?.[0];
async function loadData() {
const entities = ['users','roles','permissions','refresh_tokens','categories','locations','businesses','business_photos','business_categories','service_prices','business_badges','verification_submissions','verification_evidences','leads','lead_photos','lead_matches','messages','lead_events','reviews','disputes','audit_logs','badge_rules','trust_adjustments',];
const fns = [setUsers,setRoles,setPermissions,setRefresh_tokens,setCategories,setLocations,setBusinesses,setBusiness_photos,setBusiness_categories,setService_prices,setBusiness_badges,setVerification_submissions,setVerification_evidences,setLeads,setLead_photos,setLead_matches,setMessages,setLead_events,setReviews,setDisputes,setAudit_logs,setBadge_rules,setTrust_adjustments,];
const requests = entities.map((entity, index) => {
if(hasPermission(currentUser, `READ_${entity.toUpperCase()}`)) {
return axios.get(`/${entity.toLowerCase()}/count`);
} else {
fns[index](null);
return Promise.resolve({data: {count: null}});
}
});
Promise.allSettled(requests).then((results) => {
@ -88,6 +88,7 @@ const Dashboard = () => {
async function getWidgets(roleId) {
await dispatch(fetchWidgets(roleId));
}
React.useEffect(() => {
if (!currentUser) return;
loadData().then();
@ -109,9 +110,16 @@ const Dashboard = () => {
<SectionMain>
<SectionTitleLineWithButton
icon={icon.mdiChartTimelineVariant}
title='Overview'
title={isBusinessOwner ? 'Business Dashboard' : 'Overview'}
main>
{''}
{isBusinessOwner && hasPermission(currentUser, 'CREATE_BUSINESSES') && (
<BaseButton
href="/businesses/businesses-new"
icon={icon.mdiPlus}
label="List New Business"
color="info"
/>
)}
</SectionTitleLineWithButton>
{hasPermission(currentUser, 'CREATE_ROLES') && <WidgetCreator
@ -156,9 +164,88 @@ const Dashboard = () => {
{!!rolesWidgets.length && <hr className='my-6 ' />}
<div id="dashboard" className='grid grid-cols-1 gap-6 lg:grid-cols-3 mb-6'>
{isBusinessOwner && myBusiness && (
<Link href={`/businesses/businesses-edit/?id=${myBusiness.id}`}>
<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">
My Listing
</div>
<div className="text-xl leading-tight font-semibold mt-2">
{myBusiness.name}
</div>
<div className="text-sm text-blue-500 mt-2">Edit Listing</div>
</div>
<div>
<BaseIcon
className={`${iconsColor}`}
w="w-16"
h="h-16"
size={48}
path={icon.mdiStoreEdit}
/>
</div>
</div>
</div>
</Link>
)}
{hasPermission(currentUser, 'READ_USERS') && <Link href={'/users/users-list'}>
{hasPermission(currentUser, 'READ_LEADS') && <Link href={'/leads/leads-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">
{isBusinessOwner ? 'Service Requests' : 'Leads'}
</div>
<div className="text-3xl leading-tight font-semibold">
{leads}
</div>
</div>
<div>
<BaseIcon
className={`${iconsColor}`}
w="w-16"
h="h-16"
size={48}
path={'mdiClipboardText' in icon ? icon['mdiClipboardText' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
/>
</div>
</div>
</div>
</Link>}
{hasPermission(currentUser, 'READ_REVIEWS') && <Link href={'/reviews/reviews-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">
Reviews
</div>
<div className="text-3xl leading-tight font-semibold">
{reviews}
</div>
</div>
<div>
<BaseIcon
className={`${iconsColor}`}
w="w-16"
h="h-16"
size={48}
path={'mdiStar' in icon ? icon['mdiStar' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
/>
</div>
</div>
</div>
</Link>}
{!isBusinessOwner && 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`}
>
@ -177,8 +264,6 @@ const Dashboard = () => {
w="w-16"
h="h-16"
size={48}
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
path={icon.mdiAccountGroup || icon.mdiTable}
/>
</div>
@ -186,7 +271,7 @@ const Dashboard = () => {
</div>
</Link>}
{hasPermission(currentUser, 'READ_ROLES') && <Link href={'/roles/roles-list'}>
{!isBusinessOwner && 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`}
>
@ -205,8 +290,6 @@ const Dashboard = () => {
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>
@ -214,7 +297,7 @@ const Dashboard = () => {
</div>
</Link>}
{hasPermission(currentUser, 'READ_PERMISSIONS') && <Link href={'/permissions/permissions-list'}>
{!isBusinessOwner && 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`}
>
@ -233,8 +316,6 @@ const Dashboard = () => {
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>
@ -242,7 +323,7 @@ const Dashboard = () => {
</div>
</Link>}
{hasPermission(currentUser, 'READ_REFRESH_TOKENS') && <Link href={'/refresh_tokens/refresh_tokens-list'}>
{!isBusinessOwner && hasPermission(currentUser, 'READ_REFRESH_TOKENS') && <Link href={'/refresh_tokens/refresh_tokens-list'}>
<div
className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
>
@ -261,8 +342,6 @@ const Dashboard = () => {
w="w-16"
h="h-16"
size={48}
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
path={'mdiLock' in icon ? icon['mdiLock' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
/>
</div>
@ -270,7 +349,7 @@ const Dashboard = () => {
</div>
</Link>}
{hasPermission(currentUser, 'READ_CATEGORIES') && <Link href={'/categories/categories-list'}>
{!isBusinessOwner && hasPermission(currentUser, 'READ_CATEGORIES') && <Link href={'/categories/categories-list'}>
<div
className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
>
@ -289,8 +368,6 @@ const Dashboard = () => {
w="w-16"
h="h-16"
size={48}
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
path={'mdiShape' in icon ? icon['mdiShape' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
/>
</div>
@ -298,7 +375,7 @@ const Dashboard = () => {
</div>
</Link>}
{hasPermission(currentUser, 'READ_LOCATIONS') && <Link href={'/locations/locations-list'}>
{!isBusinessOwner && 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`}
>
@ -317,8 +394,6 @@ const Dashboard = () => {
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>
@ -345,464 +420,12 @@ const Dashboard = () => {
w="w-16"
h="h-16"
size={48}
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
path={'mdiStore' in icon ? icon['mdiStore' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
/>
</div>
</div>
</div>
</Link>}
{hasPermission(currentUser, 'READ_BUSINESS_PHOTOS') && <Link href={'/business_photos/business_photos-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">
Business photos
</div>
<div className="text-3xl leading-tight font-semibold">
{business_photos}
</div>
</div>
<div>
<BaseIcon
className={`${iconsColor}`}
w="w-16"
h="h-16"
size={48}
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
path={'mdiImageMultiple' in icon ? icon['mdiImageMultiple' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
/>
</div>
</div>
</div>
</Link>}
{hasPermission(currentUser, 'READ_BUSINESS_CATEGORIES') && <Link href={'/business_categories/business_categories-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">
Business categories
</div>
<div className="text-3xl leading-tight font-semibold">
{business_categories}
</div>
</div>
<div>
<BaseIcon
className={`${iconsColor}`}
w="w-16"
h="h-16"
size={48}
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
path={'mdiTagMultiple' in icon ? icon['mdiTagMultiple' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
/>
</div>
</div>
</div>
</Link>}
{hasPermission(currentUser, 'READ_SERVICE_PRICES') && <Link href={'/service_prices/service_prices-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">
Service prices
</div>
<div className="text-3xl leading-tight font-semibold">
{service_prices}
</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={'mdiCurrencyUsd' in icon ? icon['mdiCurrencyUsd' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
/>
</div>
</div>
</div>
</Link>}
{hasPermission(currentUser, 'READ_BUSINESS_BADGES') && <Link href={'/business_badges/business_badges-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">
Business badges
</div>
<div className="text-3xl leading-tight font-semibold">
{business_badges}
</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={'mdiShieldCheck' in icon ? icon['mdiShieldCheck' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
/>
</div>
</div>
</div>
</Link>}
{hasPermission(currentUser, 'READ_VERIFICATION_SUBMISSIONS') && <Link href={'/verification_submissions/verification_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">
Verification submissions
</div>
<div className="text-3xl leading-tight font-semibold">
{verification_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={'mdiFileCheck' in icon ? icon['mdiFileCheck' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
/>
</div>
</div>
</div>
</Link>}
{hasPermission(currentUser, 'READ_VERIFICATION_EVIDENCES') && <Link href={'/verification_evidences/verification_evidences-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">
Verification evidences
</div>
<div className="text-3xl leading-tight font-semibold">
{verification_evidences}
</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={'mdiFileUpload' in icon ? icon['mdiFileUpload' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
/>
</div>
</div>
</div>
</Link>}
{hasPermission(currentUser, 'READ_LEADS') && <Link href={'/leads/leads-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">
Leads
</div>
<div className="text-3xl leading-tight font-semibold">
{leads}
</div>
</div>
<div>
<BaseIcon
className={`${iconsColor}`}
w="w-16"
h="h-16"
size={48}
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
path={'mdiClipboardText' in icon ? icon['mdiClipboardText' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
/>
</div>
</div>
</div>
</Link>}
{hasPermission(currentUser, 'READ_LEAD_PHOTOS') && <Link href={'/lead_photos/lead_photos-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">
Lead photos
</div>
<div className="text-3xl leading-tight font-semibold">
{lead_photos}
</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={'mdiCamera' in icon ? icon['mdiCamera' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
/>
</div>
</div>
</div>
</Link>}
{hasPermission(currentUser, 'READ_LEAD_MATCHES') && <Link href={'/lead_matches/lead_matches-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">
Lead matches
</div>
<div className="text-3xl leading-tight font-semibold">
{lead_matches}
</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={'mdiLinkVariant' in icon ? icon['mdiLinkVariant' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
/>
</div>
</div>
</div>
</Link>}
{hasPermission(currentUser, 'READ_MESSAGES') && <Link href={'/messages/messages-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">
Messages
</div>
<div className="text-3xl leading-tight font-semibold">
{messages}
</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={'mdiMessageText' in icon ? icon['mdiMessageText' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
/>
</div>
</div>
</div>
</Link>}
{hasPermission(currentUser, 'READ_LEAD_EVENTS') && <Link href={'/lead_events/lead_events-list'}>
<div
className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
>
<div className="flex justify-between align-center">
<div>
<div className="text-lg leading-tight text-gray-500 dark:text-gray-400">
Lead events
</div>
<div className="text-3xl leading-tight font-semibold">
{lead_events}
</div>
</div>
<div>
<BaseIcon
className={`${iconsColor}`}
w="w-16"
h="h-16"
size={48}
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
path={'mdiTimelineText' in icon ? icon['mdiTimelineText' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
/>
</div>
</div>
</div>
</Link>}
{hasPermission(currentUser, 'READ_REVIEWS') && <Link href={'/reviews/reviews-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">
Reviews
</div>
<div className="text-3xl leading-tight font-semibold">
{reviews}
</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={'mdiStar' in icon ? icon['mdiStar' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
/>
</div>
</div>
</div>
</Link>}
{hasPermission(currentUser, 'READ_DISPUTES') && <Link href={'/disputes/disputes-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">
Disputes
</div>
<div className="text-3xl leading-tight font-semibold">
{disputes}
</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={'mdiAlertOctagon' in icon ? icon['mdiAlertOctagon' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
/>
</div>
</div>
</div>
</Link>}
{hasPermission(currentUser, 'READ_AUDIT_LOGS') && <Link href={'/audit_logs/audit_logs-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">
Audit logs
</div>
<div className="text-3xl leading-tight font-semibold">
{audit_logs}
</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={'mdiClipboardList' in icon ? icon['mdiClipboardList' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
/>
</div>
</div>
</div>
</Link>}
{hasPermission(currentUser, 'READ_BADGE_RULES') && <Link href={'/badge_rules/badge_rules-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">
Badge rules
</div>
<div className="text-3xl leading-tight font-semibold">
{badge_rules}
</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={'mdiShieldCrown' in icon ? icon['mdiShieldCrown' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
/>
</div>
</div>
</div>
</Link>}
{hasPermission(currentUser, 'READ_TRUST_ADJUSTMENTS') && <Link href={'/trust_adjustments/trust_adjustments-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">
Trust adjustments
</div>
<div className="text-3xl leading-tight font-semibold">
{trust_adjustments}
</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={'mdiTuneVariant' in icon ? icon['mdiTuneVariant' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
/>
</div>
</div>
</div>
</Link>}
</div>
</SectionMain>
</>
@ -813,4 +436,4 @@ Dashboard.getLayout = function getLayout(page: ReactElement) {
return <LayoutAuthenticated>{page}</LayoutAuthenticated>
}
export default Dashboard
export default Dashboard

152
frontend/src/pages/forgot.tsx
View File

@ -1,79 +1,151 @@
import React from 'react';
import React, { useEffect, useState } from 'react';
import type { ReactElement } from 'react';
import { ToastContainer, toast } from 'react-toastify';
import Head from 'next/head';
import BaseButton from '../components/BaseButton';
import CardBox from '../components/CardBox';
import SectionFullScreen from '../components/SectionFullScreen';
import BaseIcon from "../components/BaseIcon";
import { mdiShieldCheck } from '@mdi/js';
import LayoutGuest from '../layouts/Guest';
import { Field, Form, Formik } from 'formik';
import FormField from '../components/FormField';
import BaseDivider from '../components/BaseDivider';
import BaseButtons from '../components/BaseButtons';
import { useRouter } from 'next/router';
import { getPageTitle } from '../config';
import Link from 'next/link';
import axios from "axios";
import { getPexelsImage, getPexelsVideo } from '../helpers/pexels'
export default function Forgot() {
const [loading, setLoading] = React.useState(false)
const router = useRouter();
const notify = (type, msg) => toast( msg, {type});
const notify = (type, msg) => toast(msg, { type });
const [illustrationImage, setIllustrationImage] = useState({
src: undefined,
photographer: undefined,
photographer_url: undefined,
})
const [illustrationVideo, setIllustrationVideo] = useState({ video_files: [] })
const [contentType, setContentType] = useState('image');
useEffect(() => {
async function fetchData() {
const image = await getPexelsImage()
const video = await getPexelsVideo()
setIllustrationImage(image);
setIllustrationVideo(video);
}
fetchData();
}, []);
const handleSubmit = async (value) => {
setLoading(true)
try {
const { data: response } = await axios.post('/auth/send-password-reset-email', value);
await axios.post('/auth/send-password-reset-email', value);
setLoading(false)
notify('success', 'Please check your email for verification link');
notify('success', 'Please check your email for reset link');
setTimeout(async () => {
await router.push('/login')
}, 3000)
} catch (error) {
setLoading(false)
console.log('error: ', error)
notify('error', 'Something was wrong. Try again')
notify('error', 'Something went wrong. Try again')
}
};
const imageBlock = (image) => (
<div className="hidden lg:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/2 overflow-hidden"
style={{
backgroundImage: `${image ? `url(${image.src?.original})` : 'linear-gradient(rgba(16, 185, 129, 0.1), rgba(6, 78, 59, 0.2))'}`,
backgroundSize: 'cover',
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat',
}}>
<div className="absolute inset-0 bg-emerald-900/20 backdrop-brightness-75"></div>
<div className="relative z-10 p-12 text-white">
<h1 className="text-4xl font-black mb-4">Secure Your Account.</h1>
<p className="text-lg text-emerald-50/80 max-w-md leading-relaxed">
We&apos;ll help you get back into your account safely and securely.
</p>
</div>
<div className="flex justify-center w-full bg-black/40 py-2 relative z-10">
<a className="text-[10px] text-white/60 hover:text-white transition-colors" href={image?.photographer_url} target="_blank" rel="noreferrer">
Photo by {image?.photographer} on Pexels
</a>
</div>
</div>
)
return (
<>
<div className="min-h-screen bg-slate-50 font-sans">
<Head>
<title>{getPageTitle('Login')}</title>
<title>{getPageTitle('Forgot Password')}</title>
</Head>
<SectionFullScreen bg='violet'>
<CardBox className='w-11/12 md:w-7/12 lg:w-6/12 xl:w-4/12'>
<Formik
initialValues={{
email: '',
}}
onSubmit={(values) => handleSubmit(values)}
>
<Form>
<FormField label='Email' help='Please enter your email'>
<Field name='email' />
</FormField>
<div className="flex flex-row min-h-screen">
{imageBlock(illustrationImage)}
<div className="w-full lg:w-1/2 flex items-center justify-center p-8 lg:p-16">
<div className="w-full max-w-md space-y-8">
{/* Branding */}
<div className="flex flex-col items-center mb-8">
<Link href="/" className="flex items-center gap-3 group mb-6">
<div className="w-12 h-12 bg-emerald-500 rounded-2xl flex items-center justify-center shadow-xl shadow-emerald-500/20 group-hover:scale-110 transition-transform">
<BaseIcon path={mdiShieldCheck} size={28} className="text-white" />
</div>
<span className="text-2xl font-black tracking-tight text-slate-900">
Crafted Network<span className="text-emerald-500 italic">™</span>
</span>
</Link>
<h2 className="text-3xl font-bold text-slate-900 text-center">Forgot Password?</h2>
<p className="text-slate-500 mt-2 text-center">Enter your email and we&apos;ll send you a link to reset your password.</p>
</div>
<BaseDivider />
<CardBox className="shadow-2xl border-none rounded-[2rem] p-4 lg:p-6">
<Formik
initialValues={{
email: '',
}}
onSubmit={(values) => handleSubmit(values)}
>
<Form className="space-y-6">
<FormField
label='Email Address'
labelColor="text-slate-700 font-bold"
>
<Field name='email' type='email' placeholder="name@company.com" className="rounded-xl border-slate-200 focus:border-emerald-500 focus:ring-emerald-500" />
</FormField>
<BaseButtons>
<BaseButton
type='submit'
label={loading ? 'Loading...' : 'Submit' }
color='info'
/>
<BaseButton
href={'/login'}
label={'Login'}
color='info'
/>
</BaseButtons>
</Form>
</Formik>
</CardBox>
</SectionFullScreen>
<div className="pt-2">
<BaseButton
className={'w-full py-4 rounded-xl font-bold text-lg shadow-lg shadow-emerald-500/20'}
type='submit'
label={loading ? 'Sending link...' : 'Send Reset Link'}
color='success'
disabled={loading}
/>
</div>
<div className="text-center pt-2">
<Link className="font-bold text-emerald-600 hover:text-emerald-700 text-sm" href={'/login'}>
Back to Login
</Link>
</div>
</Form>
</Formik>
</CardBox>
<div className="text-center text-slate-400 text-xs pt-8">
© 2026 Crafted Network™. All rights reserved. <br/>
<Link href='/privacy-policy/' className="hover:text-slate-600 mt-2 inline-block">Privacy Policy</Link>
</div>
</div>
</div>
</div>
<ToastContainer />
</>
</div>
);
}

1280
frontend/src/pages/leads/leads-edit.tsx
View File

File diff suppressed because it is too large Load Diff

1344
frontend/src/pages/leads/leads-view.tsx
View File

File diff suppressed because it is too large Load Diff

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

@ -1,12 +1,11 @@
import React, { useEffect, useState } from 'react';
import type { ReactElement } from 'react';
import Head from 'next/head';
import BaseButton from '../components/BaseButton';
import CardBox from '../components/CardBox';
import BaseIcon from "../components/BaseIcon";
import { mdiInformation, mdiEye, mdiEyeOff } from '@mdi/js';
import { mdiInformation, mdiEye, mdiEyeOff, mdiShieldCheck } from '@mdi/js';
import SectionFullScreen from '../components/SectionFullScreen';
import LayoutGuest from '../layouts/Guest';
import { Field, Form, Formik } from 'formik';
@ -25,8 +24,8 @@ import { getPexelsImage, getPexelsVideo } from '../helpers/pexels'
export default function Login() {
const router = useRouter();
const dispatch = useAppDispatch();
const textColor = useAppSelector((state) => state.style.linkColor);
const iconsColor = useAppSelector((state) => state.style.iconsColor);
const textColor = 'text-emerald-600';
const iconsColor = 'text-emerald-500';
const notify = (type, msg) => toast(msg, { type });
const [ illustrationImage, setIllustrationImage ] = useState({
src: undefined,
@ -34,7 +33,7 @@ export default function Login() {
photographer_url: undefined,
})
const [ illustrationVideo, setIllustrationVideo ] = useState({video_files: []})
const [contentType, setContentType] = useState('video');
const [contentType, setContentType] = useState('image');
const [contentPosition, setContentPosition] = useState('left');
const [showPassword, setShowPassword] = useState(false);
const { currentUser, isFetching, errorMessage, token, notify:notifyState } = useAppSelector(
@ -101,16 +100,24 @@ export default function Login() {
};
const imageBlock = (image) => (
<div className="hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3"
<div className="hidden lg:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/2 overflow-hidden"
style={{
backgroundImage: `${image ? `url(${image.src?.original})` : 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'}`,
backgroundImage: `${image ? `url(${image.src?.original})` : 'linear-gradient(rgba(16, 185, 129, 0.1), rgba(6, 78, 59, 0.2))'}`,
backgroundSize: 'cover',
backgroundPosition: 'left center',
backgroundPosition: '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 className="absolute inset-0 bg-emerald-900/20 backdrop-brightness-75"></div>
<div className="relative z-10 p-12 text-white">
<h1 className="text-4xl font-black mb-4">Welcome Back to the Network.</h1>
<p className="text-lg text-emerald-50/80 max-w-md leading-relaxed">
Join thousands of verified professionals and clients in the most transparent service ecosystem.
</p>
</div>
<div className="flex justify-center w-full bg-black/40 py-2 relative z-10">
<a className="text-[10px] text-white/60 hover:text-white transition-colors" href={image?.photographer_url} target="_blank" rel="noreferrer">
Photo by {image?.photographer} on Pexels
</a>
</div>
</div>
)
@ -118,7 +125,7 @@ export default function Login() {
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'>
<div className='hidden lg:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/2 overflow-hidden'>
<video
className='absolute top-0 left-0 w-full h-full object-cover'
autoPlay
@ -128,9 +135,16 @@ export default function Login() {
<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'>
<div className="absolute inset-0 bg-emerald-900/20 backdrop-brightness-75"></div>
<div className="relative z-10 p-12 text-white">
<h1 className="text-4xl font-black mb-4">Welcome Back to the Network.</h1>
<p className="text-lg text-emerald-50/80 max-w-md leading-relaxed">
Join thousands of verified professionals and clients in the most transparent service ecosystem.
</p>
</div>
<div className='flex justify-center w-full bg-black/40 py-2 relative z-10'>
<a
className='text-[8px]'
className='text-[10px] text-white/60 hover:text-white transition-colors'
href={video.user.url}
target='_blank'
rel='noreferrer'
@ -140,131 +154,127 @@ export default function Login() {
</div>
</div>)
}
return imageBlock(illustrationImage);
};
return (
<div style={contentPosition === 'background' ? {
backgroundImage: `${
illustrationImage
? `url(${illustrationImage.src?.original})`
: 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
}`,
backgroundSize: 'cover',
backgroundPosition: 'left center',
backgroundRepeat: 'no-repeat',
} : {}}>
<div className="min-h-screen bg-slate-50 font-sans">
<Head>
<title>{getPageTitle('Login')}</title>
</Head>
<SectionFullScreen bg='violet'>
<div className={`flex ${contentPosition === 'right' ? 'flex-row-reverse' : 'flex-row'} min-h-screen w-full`}>
{contentType === 'image' && contentPosition !== 'background' ? imageBlock(illustrationImage) : null}
{contentType === 'video' && contentPosition !== 'background' ? videoBlock(illustrationVideo) : null}
<div className='flex items-center justify-center flex-col space-y-4 w-full lg:w-full'>
<CardBox id="loginRoles" className='w-full md:w-3/5 lg:w-2/3'>
<h2 className="text-4xl font-semibold my-4">{title}</h2>
<div className='flex flex-row text-gray-500 justify-between'>
<div>
<p className='mb-2'>Use{' '}
<code className={`cursor-pointer ${textColor} `}
data-password="b2096650"
onClick={(e) => setLogin(e.target)}>admin@flatlogic.com</code>{' / '}
<code className={`${textColor}`}>b2096650</code>{' / '}
to login as Admin</p>
<p>Use <code
className={`cursor-pointer ${textColor} `}
data-password="7302e7d1c0fe"
onClick={(e) => setLogin(e.target)}>client@hello.com</code>{' / '}
<code className={`${textColor}`}>7302e7d1c0fe</code>{' / '}
to login as User</p>
</div>
<div>
<BaseIcon
className={`${iconsColor}`}
w='w-16'
h='h-16'
size={48}
path={mdiInformation}
/>
</div>
<div className="flex flex-row min-h-screen">
{contentType === 'video' ? videoBlock(illustrationVideo) : imageBlock(illustrationImage)}
<div className="w-full lg:w-1/2 flex items-center justify-center p-8 lg:p-16">
<div className="w-full max-w-md space-y-8">
{/* Branding */}
<div className="flex flex-col items-center mb-8">
<Link href="/" className="flex items-center gap-3 group mb-6">
<div className="w-12 h-12 bg-emerald-500 rounded-2xl flex items-center justify-center shadow-xl shadow-emerald-500/20 group-hover:scale-110 transition-transform">
<BaseIcon path={mdiShieldCheck} size={28} className="text-white" />
</div>
<span className="text-2xl font-black tracking-tight text-slate-900">
Crafted Network<span className="text-emerald-500 italic">™</span>
</span>
</Link>
<h2 className="text-3xl font-bold text-slate-900">Account Login</h2>
<p className="text-slate-500 mt-2">Enter your credentials to access your dashboard</p>
</div>
</CardBox>
<CardBox className='w-full md:w-3/5 lg:w-2/3'>
<Formik
initialValues={initialValues}
enableReinitialize
onSubmit={(values) => handleSubmit(values)}
>
<Form>
<FormField
label='Login'
help='Please enter your login'>
<Field name='email' />
</FormField>
<div className='relative'>
<CardBox className="shadow-2xl border-none rounded-[2rem] p-4 lg:p-6">
<Formik
initialValues={initialValues}
enableReinitialize
onSubmit={(values) => handleSubmit(values)}
>
<Form className="space-y-4">
<FormField
label='Password'
help='Please enter your password'>
<Field name='password' type={showPassword ? 'text' : 'password'} />
</FormField>
<div
className='absolute bottom-8 right-0 pr-3 flex items-center cursor-pointer'
onClick={togglePasswordVisibility}
label='Email Address'
labelColor="text-slate-700 font-bold"
>
<BaseIcon
className='text-gray-500 hover:text-gray-700'
size={20}
path={showPassword ? mdiEyeOff : mdiEye}
<Field name='email' placeholder="name@company.com" className="rounded-xl border-slate-200 focus:border-emerald-500 focus:ring-emerald-500" />
</FormField>
<div className='relative'>
<FormField
label='Password'
labelColor="text-slate-700 font-bold"
>
<Field name='password' type={showPassword ? 'text' : 'password'} placeholder="••••••••" className="rounded-xl border-slate-200 focus:border-emerald-500 focus:ring-emerald-500" />
</FormField>
<div
className='absolute top-[42px] right-0 pr-4 flex items-center cursor-pointer'
onClick={togglePasswordVisibility}
>
<BaseIcon
className='text-slate-400 hover:text-emerald-500'
size={20}
path={showPassword ? mdiEyeOff : mdiEye}
/>
</div>
</div>
<div className={'flex justify-between items-center text-sm'}>
<FormCheckRadio type='checkbox' label='Keep me logged in'>
<Field type='checkbox' name='remember' />
</FormCheckRadio>
<Link className="font-semibold text-emerald-600 hover:text-emerald-700" href={'/forgot'}>
Forgot password?
</Link>
</div>
<div className="pt-4">
<BaseButton
className={'w-full py-4 rounded-xl font-bold text-lg shadow-lg shadow-emerald-500/20'}
type='submit'
label={isFetching ? 'Signing in...' : 'Sign In'}
color='success'
disabled={isFetching}
/>
</div>
<div className="text-center pt-4">
<p className="text-slate-500 text-sm">
Don&apos;t have an account yet?{' '}
<Link className="font-bold text-emerald-600 hover:text-emerald-700" href={'/register'}>
Create an account
</Link>
</p>
</div>
</Form>
</Formik>
</CardBox>
{/* Demo Access Card - Styled more like a hint/badge */}
<div className="bg-slate-100/80 backdrop-blur rounded-2xl p-6 border border-slate-200">
<div className="flex items-start gap-4">
<div className="w-10 h-10 rounded-xl bg-white flex items-center justify-center shrink-0 shadow-sm">
<BaseIcon path={mdiInformation} size={20} className="text-emerald-500" />
</div>
<div className={'flex justify-between'}>
<FormCheckRadio type='checkbox' label='Remember'>
<Field type='checkbox' name='remember' />
</FormCheckRadio>
<Link className={`${textColor} text-blue-600`} href={'/forgot'}>
Forgot password?
</Link>
<div>
<h4 className="font-bold text-slate-900 text-sm mb-2">Demo Access</h4>
<div className="space-y-2 text-xs text-slate-600">
<p>
<span className="font-semibold">Admin:</span>{' '}
<code className="cursor-pointer text-emerald-600 bg-emerald-50 px-1.5 py-0.5 rounded" data-password="b2096650" onClick={(e) => setLogin(e.target as HTMLElement)}>admin@flatlogic.com</code>
</p>
<p>
<span className="font-semibold">Client:</span>{' '}
<code className="cursor-pointer text-emerald-600 bg-emerald-50 px-1.5 py-0.5 rounded" data-password="7302e7d1c0fe" onClick={(e) => setLogin(e.target as HTMLElement)}>client@hello.com</code>
</p>
</div>
</div>
</div>
</div>
<BaseDivider />
<BaseButtons>
<BaseButton
className={'w-full'}
type='submit'
label={isFetching ? 'Loading...' : 'Login'}
color='info'
disabled={isFetching}
/>
</BaseButtons>
<br />
<p className={'text-center'}>
Don’t have an account yet?{' '}
<Link className={`${textColor}`} href={'/register'}>
New Account
</Link>
</p>
</Form>
</Formik>
</CardBox>
<div className="text-center text-slate-400 text-xs pt-8">
© 2026 Crafted Network™. All rights reserved. <br/>
<Link href='/privacy-policy/' className="hover:text-slate-600 mt-2 inline-block">Privacy Policy</Link>
</div>
</div>
</div>
</div>
</SectionFullScreen>
<div className='bg-black text-white flex flex-col text-center justify-center md:flex-row'>
<p className='py-6 text-sm'>© 2026 <span>{title}</span>. © All rights reserved</p>
<Link className='py-6 ml-4 text-sm' href='/privacy-policy/'>
Privacy Policy
</Link>
</div>
<ToastContainer />
</div>

359
frontend/src/pages/messages/messages-new.tsx
View File

@ -1,6 +1,6 @@
import { mdiAccount, mdiChartTimelineVariant, mdiMail, mdiUpload } from '@mdi/js'
import { mdiChartTimelineVariant } from '@mdi/js'
import Head from 'next/head'
import React, { ReactElement } from 'react'
import React, { ReactElement, useEffect, useState } from 'react'
import CardBox from '../../components/CardBox'
import LayoutAuthenticated from '../../layouts/Authenticated'
import SectionMain from '../../components/SectionMain'
@ -12,128 +12,42 @@ 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/messages/messagesSlice'
import { useAppDispatch } from '../../stores/hooks'
import { useAppDispatch, useAppSelector } from '../../stores/hooks'
import { useRouter } from 'next/router'
import moment from 'moment';
const initialValues = {
lead: '',
sender_user: '',
receiver_user: '',
body: '',
read_at: '',
created_at_ts: '',
}
const MessagesNew = () => {
const router = useRouter()
const dispatch = useAppDispatch()
const { currentUser } = useAppSelector((state) => state.auth);
const { leadId, receiverId } = router.query;
const initialValues = {
lead: leadId || '',
sender_user: currentUser?.id || '',
receiver_user: receiverId || '',
body: '',
read_at: null,
created_at_ts: new Date(),
}
const [formInitialValues, setFormInitialValues] = useState(initialValues);
useEffect(() => {
if (leadId || receiverId) {
setFormInitialValues({
...initialValues,
lead: leadId || '',
sender_user: currentUser?.id || '',
receiver_user: receiverId || '',
});
}
}, [leadId, receiverId, currentUser]);
const handleSubmit = async (data) => {
await dispatch(create(data))
@ -142,219 +56,38 @@ const MessagesNew = () => {
return (
<>
<Head>
<title>{getPageTitle('New Item')}</title>
<title>{getPageTitle('Send Message')}</title>
</Head>
<SectionMain>
<SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="New Item" main>
<SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Send Message" main>
{''}
</SectionTitleLineWithButton>
<CardBox>
<Formik
initialValues={
initialValues
}
enableReinitialize
initialValues={formInitialValues}
onSubmit={(values) => handleSubmit(values)}
>
<Form>
<FormField label="Lead" labelFor="lead">
<Field name="lead" id="lead" component={SelectField} options={formInitialValues.lead ? [formInitialValues.lead] : []} itemRef={'leads'}></Field>
</FormField>
<FormField label="Sender" labelFor="sender_user">
<Field name="sender_user" id="sender_user" component={SelectField} options={formInitialValues.sender_user ? [formInitialValues.sender_user] : []} itemRef={'users'} showField={'firstName'}></Field>
</FormField>
<FormField label="To" labelFor="receiver_user">
<Field name="receiver_user" id="receiver_user" component={SelectField} options={formInitialValues.receiver_user ? [formInitialValues.receiver_user] : []} itemRef={'users'} showField={'firstName'}></Field>
</FormField>
<FormField label="Lead" labelFor="lead">
<Field name="lead" id="lead" component={SelectField} options={[]} itemRef={'leads'}></Field>
</FormField>
<FormField label="SenderUser" labelFor="sender_user">
<Field name="sender_user" id="sender_user" component={SelectField} options={[]} itemRef={'users'}></Field>
</FormField>
<FormField label="ReceiverUser" labelFor="receiver_user">
<Field name="receiver_user" id="receiver_user" component={SelectField} options={[]} itemRef={'users'}></Field>
</FormField>
<FormField label="Body" hasTextareaHeight>
<Field name="body" as="textarea" placeholder="Body" />
</FormField>
<FormField
label="ReadAt"
>
<Field
type="datetime-local"
name="read_at"
placeholder="ReadAt"
/>
</FormField>
<FormField
label="CreatedAt"
>
<Field
type="datetime-local"
name="created_at_ts"
placeholder="CreatedAt"
/>
</FormField>
<FormField label="Message Content" hasTextareaHeight>
<Field name="body" as="textarea" placeholder="Type your message here..." />
</FormField>
<BaseDivider />
<BaseButtons>
<BaseButton type="submit" color="info" label="Submit" />
<BaseButton type="reset" color="info" outline label="Reset" />
<BaseButton type="submit" color="info" label="Send Message" />
<BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/messages/messages-list')}/>
</BaseButtons>
</Form>
@ -368,13 +101,11 @@ const MessagesNew = () => {
MessagesNew.getLayout = function getLayout(page: ReactElement) {
return (
<LayoutAuthenticated
permission={'CREATE_MESSAGES'}
>
{page}
</LayoutAuthenticated>
)
}
export default MessagesNew
export default MessagesNew

35
frontend/src/pages/public/businesses-details.tsx
View File

@ -53,7 +53,8 @@ const BusinessDetailsPublic = () => {
}
try {
await axios.post(`/businesses/${id}/claim`);
fetchBusiness(); // Refresh data
// After claiming, redirect to dashboard as requested by user
router.push('/dashboard');
} catch (error) {
console.error('Error claiming business:', error);
alert('Failed to claim business. Please try again.');
@ -70,10 +71,21 @@ const BusinessDetailsPublic = () => {
return null;
};
const getOpeningHours = () => {
if (!business?.hours_json) return null;
try {
const hours = JSON.parse(business.hours_json);
return hours.weekday_text || null;
} catch (e) {
return null;
}
};
if (loading) return <div className="min-h-screen flex items-center justify-center bg-slate-50"><LoadingSpinner /></div>;
if (!business) return <div className="min-h-screen flex items-center justify-center bg-slate-50">Business not found.</div>;
const displayRating = business.rating ? Number(business.rating).toFixed(1) : 'New';
const weekdayText = getOpeningHours();
return (
<div className="min-h-screen bg-slate-50 pb-20 pt-20">
@ -292,6 +304,27 @@ const BusinessDetailsPublic = () => {
{/* Sidebar */}
<div className="space-y-8">
{/* Opening Hours */}
{weekdayText && (
<div className="bg-white p-10 rounded-[3rem] border border-slate-200 shadow-sm">
<h3 className="text-xl font-bold mb-6 flex items-center">
<BaseIcon path={mdiClockOutline} size={24} className="mr-2 text-emerald-500" />
Opening Hours
</h3>
<div className="space-y-3">
{weekdayText.map((text: string, index: number) => {
const [day, hours] = text.split(': ');
return (
<div key={index} className="flex justify-between text-sm">
<span className="font-bold text-slate-600">{day}</span>
<span className="text-slate-500">{hours}</span>
</div>
);
})}
</div>
</div>
)}
{/* Contact Info */}
<div className="bg-slate-900 text-white p-10 rounded-[3rem] shadow-xl relative overflow-hidden group">
<div className="absolute top-0 right-0 w-32 h-32 bg-emerald-500/10 rounded-full -mr-16 -mt-16 group-hover:scale-110 transition-transform"></div>

242
frontend/src/pages/register.tsx
View File

@ -1,92 +1,228 @@
import React from 'react';
import React, { useEffect, useState } from 'react';
import type { ReactElement } from 'react';
import { ToastContainer, toast } from 'react-toastify';
import Head from 'next/head';
import BaseButton from '../components/BaseButton';
import CardBox from '../components/CardBox';
import SectionFullScreen from '../components/SectionFullScreen';
import BaseIcon from "../components/BaseIcon";
import { mdiShieldCheck, mdiEye, mdiEyeOff } from '@mdi/js';
import LayoutGuest from '../layouts/Guest';
import { Field, Form, Formik } from 'formik';
import FormField from '../components/FormField';
import BaseDivider from '../components/BaseDivider';
import BaseButtons from '../components/BaseButtons';
import { useRouter } from 'next/router';
import { getPageTitle } from '../config';
import Link from 'next/link';
import axios from "axios";
import { getPexelsImage, getPexelsVideo } from '../helpers/pexels'
export default function Register() {
const [loading, setLoading] = React.useState(false);
const [showPassword, setShowPassword] = useState(false);
const router = useRouter();
const notify = (type, msg) => toast( msg, {type, position: "bottom-center"});
const notify = (type, msg) => toast(msg, { type, position: "bottom-center" });
const [illustrationImage, setIllustrationImage] = useState({
src: undefined,
photographer: undefined,
photographer_url: undefined,
})
const [illustrationVideo, setIllustrationVideo] = useState({ video_files: [] })
const [contentType, setContentType] = useState('video');
const handleSubmit = async (value) => {
useEffect(() => {
async function fetchData() {
const image = await getPexelsImage()
const video = await getPexelsVideo()
setIllustrationImage(image);
setIllustrationVideo(video);
}
fetchData();
}, []);
const togglePasswordVisibility = () => {
setShowPassword(!showPassword);
};
const handleSubmit = async (values) => {
if (values.password !== values.confirm) {
notify('error', 'Passwords do not match');
return;
}
setLoading(true)
try {
const { data: response } = await axios.post('/auth/signup',value);
await router.push('/login')
await axios.post('/auth/signup', values);
setLoading(false)
notify('success', 'Please check your email for verification link')
setTimeout(() => {
router.push('/login')
}, 2000);
} catch (error) {
setLoading(false)
console.log('error: ', error)
notify('error', 'Something was wrong. Try again')
notify('error', error.response?.data?.message || 'Something went wrong. Try again')
}
};
const imageBlock = (image) => (
<div className="hidden lg:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/2 overflow-hidden"
style={{
backgroundImage: `${image ? `url(${image.src?.original})` : 'linear-gradient(rgba(16, 185, 129, 0.1), rgba(6, 78, 59, 0.2))'}`,
backgroundSize: 'cover',
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat',
}}>
<div className="absolute inset-0 bg-emerald-900/20 backdrop-brightness-75"></div>
<div className="relative z-10 p-12 text-white">
<h1 className="text-4xl font-black mb-4">Start Your Professional Journey.</h1>
<p className="text-lg text-emerald-50/80 max-w-md leading-relaxed">
Get listed, get verified, and connect with clients looking for high-quality, trusted services.
</p>
</div>
<div className="flex justify-center w-full bg-black/40 py-2 relative z-10">
<a className="text-[10px] text-white/60 hover:text-white transition-colors" href={image?.photographer_url} target="_blank" rel="noreferrer">
Photo by {image?.photographer} on Pexels
</a>
</div>
</div>
)
const videoBlock = (video) => {
if (video?.video_files?.length > 0) {
return (
<div className='hidden lg:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/2 overflow-hidden'>
<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="absolute inset-0 bg-emerald-900/20 backdrop-brightness-75"></div>
<div className="relative z-10 p-12 text-white">
<h1 className="text-4xl font-black mb-4">Start Your Professional Journey.</h1>
<p className="text-lg text-emerald-50/80 max-w-md leading-relaxed">
Get listed, get verified, and connect with clients looking for high-quality, trusted services.
</p>
</div>
<div className='flex justify-center w-full bg-black/40 py-2 relative z-10'>
<a
className='text-[10px] text-white/60 hover:text-white transition-colors'
href={video.user.url}
target='_blank'
rel='noreferrer'
>
Video by {video.user.name} on Pexels
</a>
</div>
</div>)
}
return imageBlock(illustrationImage);
};
return (
<>
<div className="min-h-screen bg-slate-50 font-sans">
<Head>
<title>{getPageTitle('Login')}</title>
<title>{getPageTitle('Register')}</title>
</Head>
<SectionFullScreen bg='violet'>
<CardBox className='w-11/12 md:w-7/12 lg:w-6/12 xl:w-4/12'>
<Formik
initialValues={{
email: '',
password: '',
confirm: ''
}}
onSubmit={(values) => handleSubmit(values)}
>
<Form>
<FormField label='Email' help='Please enter your email'>
<Field type='email' name='email' />
</FormField>
<FormField label='Password' help='Please enter your password'>
<Field type='password' name='password' />
</FormField>
<FormField label='Confirm Password' help='Please confirm your password'>
<Field type='password' name='confirm' />
</FormField>
<div className="flex flex-row min-h-screen">
{contentType === 'video' ? videoBlock(illustrationVideo) : imageBlock(illustrationImage)}
<BaseDivider />
<div className="w-full lg:w-1/2 flex items-center justify-center p-8 lg:p-16">
<div className="w-full max-w-md space-y-8">
{/* Branding */}
<div className="flex flex-col items-center mb-8">
<Link href="/" className="flex items-center gap-3 group mb-6">
<div className="w-12 h-12 bg-emerald-500 rounded-2xl flex items-center justify-center shadow-xl shadow-emerald-500/20 group-hover:scale-110 transition-transform">
<BaseIcon path={mdiShieldCheck} size={28} className="text-white" />
</div>
<span className="text-2xl font-black tracking-tight text-slate-900">
Crafted Network<span className="text-emerald-500 italic">™</span>
</span>
</Link>
<h2 className="text-3xl font-bold text-slate-900">Create Account</h2>
<p className="text-slate-500 mt-2 text-center">Join the most trusted service network today</p>
</div>
<BaseButtons>
<BaseButton
type='submit'
label={loading ? 'Loading...' : 'Register' }
color='info'
/>
<BaseButton
href={'/login'}
label={'Login'}
color='info'
/>
</BaseButtons>
</Form>
</Formik>
</CardBox>
</SectionFullScreen>
<CardBox className="shadow-2xl border-none rounded-[2rem] p-4 lg:p-6">
<Formik
initialValues={{
email: '',
password: '',
confirm: ''
}}
onSubmit={(values) => handleSubmit(values)}
>
<Form className="space-y-4">
<FormField
label='Email Address'
labelColor="text-slate-700 font-bold"
>
<Field name='email' type='email' placeholder="name@company.com" className="rounded-xl border-slate-200 focus:border-emerald-500 focus:ring-emerald-500" />
</FormField>
<div className='relative'>
<FormField
label='Password'
labelColor="text-slate-700 font-bold"
>
<Field name='password' type={showPassword ? 'text' : 'password'} placeholder="••••••••" className="rounded-xl border-slate-200 focus:border-emerald-500 focus:ring-emerald-500" />
</FormField>
<div
className='absolute top-[42px] right-0 pr-4 flex items-center cursor-pointer'
onClick={togglePasswordVisibility}
>
<BaseIcon
className='text-slate-400 hover:text-emerald-500'
size={20}
path={showPassword ? mdiEyeOff : mdiEye}
/>
</div>
</div>
<FormField
label='Confirm Password'
labelColor="text-slate-700 font-bold"
>
<Field name='confirm' type={showPassword ? 'text' : 'password'} placeholder="••••••••" className="rounded-xl border-slate-200 focus:border-emerald-500 focus:ring-emerald-500" />
</FormField>
<div className="pt-6">
<BaseButton
className={'w-full py-4 rounded-xl font-bold text-lg shadow-lg shadow-emerald-500/20'}
type='submit'
label={loading ? 'Creating Account...' : 'Register'}
color='success'
disabled={loading}
/>
</div>
<div className="text-center pt-4">
<p className="text-slate-500 text-sm">
Already have an account?{' '}
<Link className="font-bold text-emerald-600 hover:text-emerald-700" href={'/login'}>
Sign in here
</Link>
</p>
</div>
</Form>
</Formik>
</CardBox>
<div className="text-center text-slate-400 text-xs pt-8">
By creating an account, you agree to our <Link href='/terms-of-use' className="underline">Terms</Link> and <Link href='/privacy-policy' className="underline">Privacy Policy</Link>. <br />
© 2026 Crafted Network™. All rights reserved.
</div>
</div>
</div>
</div>
<ToastContainer />
</>
</div>
);
}
Register.getLayout = function getLayout(page: ReactElement) {
return <LayoutGuest>{page}</LayoutGuest>;
};
};

779
frontend/src/pages/reviews/reviews-edit.tsx
View File

@ -1,4 +1,4 @@
import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js'
import { mdiChartTimelineVariant } from '@mdi/js'
import Head from 'next/head'
import React, { ReactElement, useEffect, useState } from 'react'
import DatePicker from "react-datepicker";
@ -16,310 +16,34 @@ import FormField from '../../components/FormField'
import BaseDivider from '../../components/BaseDivider'
import BaseButtons from '../../components/BaseButtons'
import BaseButton from '../../components/BaseButton'
import FormCheckRadio from '../../components/FormCheckRadio'
import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
import FormFilePicker from '../../components/FormFilePicker'
import FormImagePicker from '../../components/FormImagePicker'
import { SelectField } from "../../components/SelectField";
import { SelectFieldMany } from "../../components/SelectFieldMany";
import { SwitchField } from '../../components/SwitchField'
import {RichTextField} from "../../components/RichTextField";
import { update, fetch } from '../../stores/reviews/reviewsSlice'
import { useAppDispatch, useAppSelector } from '../../stores/hooks'
import { useRouter } from 'next/router'
import {saveFile} from "../../helpers/fileSaver";
import dataFormatter from '../../helpers/dataFormatter';
import ImageField from "../../components/ImageField";
const EditReviewsPage = () => {
const router = useRouter()
const dispatch = useAppDispatch()
const { currentUser } = useAppSelector((state) => state.auth);
const isBusinessOwner = currentUser?.app_role?.name === 'Verified Business Owner';
const initVals = {
business: null,
user: null,
lead: null,
rating: '',
text: '',
is_verified_job: false,
status: '',
moderation_notes: '',
response: '',
created_at_ts: new Date(),
updated_at_ts: new Date(),
}
const [initialValues, setInitialValues] = useState(initVals)
@ -330,22 +54,20 @@ const EditReviewsPage = () => {
useEffect(() => {
dispatch(fetch({ id: id }))
}, [id])
}, [id, dispatch])
useEffect(() => {
if (typeof reviews === 'object') {
setInitialValues(reviews)
if (typeof reviews === 'object' && reviews !== null) {
const newInitialVal = {...initVals};
Object.keys(initVals).forEach(el => {
if (reviews[el] !== undefined) {
newInitialVal[el] = reviews[el]
}
})
setInitialValues(newInitialVal);
}
}, [reviews])
useEffect(() => {
if (typeof reviews === 'object') {
const newInitialVal = {...initVals};
Object.keys(initVals).forEach(el => newInitialVal[el] = (reviews)[el])
setInitialValues(newInitialVal);
}
}, [reviews])
const handleSubmit = async (data) => {
await dispatch(update({ id: id, data }))
await router.push('/reviews/reviews-list')
@ -367,28 +89,8 @@ const EditReviewsPage = () => {
onSubmit={(values) => handleSubmit(values)}
>
<Form>
{!isBusinessOwner && (
<>
<FormField label='Business' labelFor='business'>
<Field
name='business'
@ -396,89 +98,10 @@ const EditReviewsPage = () => {
component={SelectField}
options={initialValues.business}
itemRef={'businesses'}
showField={'name'}
></Field>
</FormField>
<FormField label='User' labelFor='user'>
<Field
name='user'
@ -486,89 +109,10 @@ const EditReviewsPage = () => {
component={SelectField}
options={initialValues.user}
itemRef={'users'}
showField={'firstName'}
></Field>
</FormField>
<FormField label='Lead' labelFor='lead'>
<Field
name='lead'
@ -576,76 +120,10 @@ const EditReviewsPage = () => {
component={SelectField}
options={initialValues.lead}
itemRef={'leads'}
showField={'keyword'}
></Field>
</FormField>
<FormField
label="Rating"
>
@ -655,77 +133,15 @@ const EditReviewsPage = () => {
placeholder="Rating"
/>
</FormField>
</>
)}
<FormField label="Text" hasTextareaHeight>
<Field name="text" as="textarea" placeholder="Text" />
<FormField label="Review Text" hasTextareaHeight>
<Field name="text" as="textarea" placeholder="Text" disabled={isBusinessOwner} />
</FormField>
{!isBusinessOwner && (
<>
<FormField label='IsVerifiedJob' labelFor='is_verified_job'>
<Field
name='is_verified_job'
@ -733,103 +149,28 @@ const EditReviewsPage = () => {
component={SwitchField}
></Field>
</FormField>
<FormField label="Status" labelFor="status">
<Field name="status" id="status" component="select">
<option value="PUBLISHED">PUBLISHED</option>
<option value="PENDING">PENDING</option>
<option value="HIDDEN">HIDDEN</option>
<option value="REJECTED">REJECTED</option>
</Field>
</FormField>
<FormField label="ModerationNotes" hasTextareaHeight>
<Field name="moderation_notes" as="textarea" placeholder="ModerationNotes" />
</FormField>
</>
)}
<FormField label="Your Response" hasTextareaHeight help="Address the customer's feedback directly.">
<Field name="response" as="textarea" placeholder="Write your response here..." />
</FormField>
{!isBusinessOwner && (
<>
<FormField
label="CreatedAt"
>
@ -837,42 +178,12 @@ const EditReviewsPage = () => {
dateFormat="yyyy-MM-dd hh:mm"
showTimeSelect
selected={initialValues.created_at_ts ?
new Date(
dayjs(initialValues.created_at_ts).format('YYYY-MM-DD hh:mm'),
) : null
new Date(initialValues.created_at_ts) : null
}
onChange={(date) => setInitialValues({...initialValues, 'created_at_ts': date})}
/>
</FormField>
<FormField
label="UpdatedAt"
>
@ -880,31 +191,13 @@ const EditReviewsPage = () => {
dateFormat="yyyy-MM-dd hh:mm"
showTimeSelect
selected={initialValues.updated_at_ts ?
new Date(
dayjs(initialValues.updated_at_ts).format('YYYY-MM-DD hh:mm'),
) : null
new Date(initialValues.updated_at_ts) : null
}
onChange={(date) => setInitialValues({...initialValues, 'updated_at_ts': date})}
/>
</FormField>
</>
)}
<BaseDivider />
<BaseButtons>
@ -923,13 +216,11 @@ const EditReviewsPage = () => {
EditReviewsPage.getLayout = function getLayout(page: ReactElement) {
return (
<LayoutAuthenticated
permission={'UPDATE_REVIEWS'}
>
{page}
</LayoutAuthenticated>
)
}
export default EditReviewsPage
export default EditReviewsPage

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

@ -15,6 +15,7 @@ import LayoutGuest from '../layouts/Guest';
import BaseIcon from '../components/BaseIcon';
import LoadingSpinner from '../components/LoadingSpinner';
import Link from 'next/link';
import { getPageTitle } from '../config';
const SearchView = () => {
const router = useRouter();
@ -26,15 +27,21 @@ const SearchView = () => {
useEffect(() => {
if (searchQueryParam) {
setSearchQuery(searchQueryParam as string);
fetchData(searchQueryParam as string);
const q = searchQueryParam as string;
const l = locationParam as string;
setSearchQuery(q);
if (l) setLocation(l);
fetchData(q, l);
}
}, [searchQueryParam]);
}, [searchQueryParam, locationParam]);
const fetchData = async (query: string) => {
const fetchData = async (query: string, loc?: string) => {
setLoading(true);
try {
const response = await axios.post('/search', { searchQuery: query });
const response = await axios.post('/search', {
searchQuery: query,
location: loc
});
setSearchResults(response.data);
} catch (error) {
console.error('Search error:', error);
@ -66,7 +73,7 @@ const SearchView = () => {
return (
<div className="min-h-screen bg-slate-50 pb-20">
<Head>
<title>Find Services | Crafted Network™</title>
<title>{getPageTitle('Find Services')}</title>
</Head>
{/* Search Header */}
@ -195,9 +202,11 @@ const SearchView = () => {
</div>
</div>
<p className="text-slate-600 line-clamp-2 mb-6 leading-relaxed">
{biz.description || 'Verified service professional providing high-quality solutions for your needs.'}
</p>
{biz.description && (
<p className="text-slate-600 line-clamp-2 mb-6 leading-relaxed italic">
{biz.description}
</p>
)}
<div className="flex flex-wrap gap-4 pt-6 border-t border-slate-100">
<div className="flex items-center text-xs font-bold text-slate-500 uppercase tracking-wider">
@ -208,10 +217,12 @@ const SearchView = () => {
<BaseIcon path={mdiCurrencyUsd} size={16} className="mr-2 text-emerald-500" />
Fair Pricing
</div>
<div className="flex items-center text-xs font-bold text-slate-500 uppercase tracking-wider">
<BaseIcon path={mdiShieldCheck} size={16} className="mr-2 text-emerald-500" />
Verified
</div>
{biz.is_claimed && (
<div className="flex items-center text-xs font-bold text-emerald-600 uppercase tracking-wider">
<BaseIcon path={mdiShieldCheck} size={16} className="mr-2 text-emerald-500" />
Verified Listing
</div>
)}
</div>
</div>
</div>