v1.1-NewFrontEndSearch

.gitignore

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

backend/src/db/api/users.js

@@ -34,6 +34,8 @@ module.exports = class UsersDBApi {
         passwordResetTokenExpiresAt:
           data.data.passwordResetTokenExpiresAt || null,
         provider: data.data.provider || null,
+        title: data.data.title || null,
+        location: data.data.location || null,
         importHash: data.data.importHash || null,
         createdById: currentUser.id,
         updatedById: currentUser.id,
@@ -60,6 +62,10 @@ module.exports = class UsersDBApi {
       transaction,
     });
 
+    await users.setTags(data.data.tags || [], {
+      transaction,
+    });
+
     await FileDBApi.replaceRelationFiles(
       {
         belongsTo: db.users.getTableName(),
@@ -96,6 +102,8 @@ module.exports = class UsersDBApi {
       passwordResetToken: item.passwordResetToken || null,
       passwordResetTokenExpiresAt: item.passwordResetTokenExpiresAt || null,
       provider: item.provider || null,
+      title: item.title || null,
+      location: item.location || null,
       importHash: item.importHash || null,
       createdById: currentUser.id,
       updatedById: currentUser.id,
@@ -178,6 +186,10 @@ module.exports = class UsersDBApi {
 
     if (data.provider !== undefined) updatePayload.provider = data.provider;
 
+    if (data.title !== undefined) updatePayload.title = data.title;
+
+    if (data.location !== undefined) updatePayload.location = data.location;
+
     updatePayload.updatedById = currentUser.id;
 
     await users.update(updatePayload, { transaction });
@@ -196,6 +208,10 @@ module.exports = class UsersDBApi {
       });
     }
 
+    if (data.tags !== undefined) {
+      await users.setTags(data.tags, { transaction });
+    }
+
     await FileDBApi.replaceRelationFiles(
       {
         belongsTo: db.users.getTableName(),
@@ -285,6 +301,10 @@ module.exports = class UsersDBApi {
       transaction,
     });
 
+    output.tags = await users.getTags({
+      transaction,
+    });
+
     return output;
   }
 
@@ -333,6 +353,12 @@ module.exports = class UsersDBApi {
         required: false,
       },
 
+      {
+        model: db.tags,
+        as: 'tags',
+        required: false,
+      },
+
       {
         model: db.file,
         as: 'avatar',
@@ -411,6 +437,20 @@ module.exports = class UsersDBApi {
         };
       }
 
+      if (filter.title) {
+        where = {
+          ...where,
+          [Op.and]: Utils.ilike('users', 'title', filter.title),
+        };
+      }
+
+      if (filter.location) {
+        where = {
+          ...where,
+          [Op.and]: Utils.ilike('users', 'location', filter.location),
+        };
+      }
+
       if (filter.emailVerificationTokenExpiresAtRange) {
         const [start, end] = filter.emailVerificationTokenExpiresAtRange;
 
@@ -512,6 +552,38 @@ module.exports = class UsersDBApi {
         ];
       }
 
+      if (filter.tags) {
+        const searchTerms = filter.tags.split('|');
+
+        include = [
+          {
+            model: db.tags,
+            as: 'tags_filter',
+            required: searchTerms.length > 0,
+            where:
+              searchTerms.length > 0
+                ? {
+                    [Op.or]: [
+                      {
+                        id: {
+                          [Op.in]: searchTerms.map((term) => Utils.uuid(term)),
+                        },
+                      },
+                      {
+                        name: {
+                          [Op.or]: searchTerms.map((term) => ({
+                            [Op.iLike]: `%${term}%`,
+                          })),
+                        },
+                      },
+                    ],
+                  }
+                : undefined,
+          },
+          ...include,
+        ];
+      }
+
       if (filter.createdAtRange) {
         const [start, end] = filter.createdAtRange;
 

backend/src/db/migrations/1758082362735.js

@@ -0,0 +1,47 @@
+module.exports = {
+  /**
+   * @param {QueryInterface} queryInterface
+   * @param {Sequelize} Sequelize
+   * @returns {Promise<void>}
+   */
+  async up(queryInterface, Sequelize) {
+    /**
+     * @type {Transaction}
+     */
+    const transaction = await queryInterface.sequelize.transaction();
+    try {
+      await queryInterface.addColumn(
+        'users',
+        'title',
+        {
+          type: Sequelize.DataTypes.TEXT,
+        },
+        { transaction },
+      );
+
+      await transaction.commit();
+    } catch (err) {
+      await transaction.rollback();
+      throw err;
+    }
+  },
+  /**
+   * @param {QueryInterface} queryInterface
+   * @param {Sequelize} Sequelize
+   * @returns {Promise<void>}
+   */
+  async down(queryInterface, Sequelize) {
+    /**
+     * @type {Transaction}
+     */
+    const transaction = await queryInterface.sequelize.transaction();
+    try {
+      await queryInterface.removeColumn('users', 'title', { transaction });
+
+      await transaction.commit();
+    } catch (err) {
+      await transaction.rollback();
+      throw err;
+    }
+  },
+};

backend/src/db/migrations/1758082383753.js

@@ -0,0 +1,47 @@
+module.exports = {
+  /**
+   * @param {QueryInterface} queryInterface
+   * @param {Sequelize} Sequelize
+   * @returns {Promise<void>}
+   */
+  async up(queryInterface, Sequelize) {
+    /**
+     * @type {Transaction}
+     */
+    const transaction = await queryInterface.sequelize.transaction();
+    try {
+      await queryInterface.addColumn(
+        'users',
+        'location',
+        {
+          type: Sequelize.DataTypes.TEXT,
+        },
+        { transaction },
+      );
+
+      await transaction.commit();
+    } catch (err) {
+      await transaction.rollback();
+      throw err;
+    }
+  },
+  /**
+   * @param {QueryInterface} queryInterface
+   * @param {Sequelize} Sequelize
+   * @returns {Promise<void>}
+   */
+  async down(queryInterface, Sequelize) {
+    /**
+     * @type {Transaction}
+     */
+    const transaction = await queryInterface.sequelize.transaction();
+    try {
+      await queryInterface.removeColumn('users', 'location', { transaction });
+
+      await transaction.commit();
+    } catch (err) {
+      await transaction.rollback();
+      throw err;
+    }
+  },
+};

backend/src/db/migrations/1758082403503.js

@@ -0,0 +1,36 @@
+module.exports = {
+  /**
+   * @param {QueryInterface} queryInterface
+   * @param {Sequelize} Sequelize
+   * @returns {Promise<void>}
+   */
+  async up(queryInterface, Sequelize) {
+    /**
+     * @type {Transaction}
+     */
+    const transaction = await queryInterface.sequelize.transaction();
+    try {
+      await transaction.commit();
+    } catch (err) {
+      await transaction.rollback();
+      throw err;
+    }
+  },
+  /**
+   * @param {QueryInterface} queryInterface
+   * @param {Sequelize} Sequelize
+   * @returns {Promise<void>}
+   */
+  async down(queryInterface, Sequelize) {
+    /**
+     * @type {Transaction}
+     */
+    const transaction = await queryInterface.sequelize.transaction();
+    try {
+      await transaction.commit();
+    } catch (err) {
+      await transaction.rollback();
+      throw err;
+    }
+  },
+};

backend/src/db/models/users.js

@@ -68,6 +68,14 @@ module.exports = function (sequelize, DataTypes) {
         type: DataTypes.TEXT,
       },
 
+      title: {
+        type: DataTypes.TEXT,
+      },
+
+      location: {
+        type: DataTypes.TEXT,
+      },
+
       importHash: {
         type: DataTypes.STRING(255),
         allowNull: true,
@@ -100,6 +108,24 @@ module.exports = function (sequelize, DataTypes) {
       through: 'usersCustom_permissionsPermissions',
     });
 
+    db.users.belongsToMany(db.tags, {
+      as: 'tags',
+      foreignKey: {
+        name: 'users_tagsId',
+      },
+      constraints: false,
+      through: 'usersTagsTags',
+    });
+
+    db.users.belongsToMany(db.tags, {
+      as: 'tags_filter',
+      foreignKey: {
+        name: 'users_tagsId',
+      },
+      constraints: false,
+      through: 'usersTagsTags',
+    });
+
     /// loop through entities and it's fields, and if ref === current e[name] and create relation has many on parent entity
 
     //end loop

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

@@ -17,10 +17,6 @@ const AlertsData = [
   {
     message: 'New tag created: AI',
   },
-
-  {
-    message: 'User Bob Brown updated profile',
-  },
 ];
 
 const TagsData = [
@@ -39,18 +35,14 @@ const TagsData = [
   {
     name: 'Development',
 
-    category: 'Profession',
-  },
-
-  {
-    name: 'Marketing',
-
     category: 'Expertise',
   },
 ];
 
 // Similar logic for "relation_many"
 
+// Similar logic for "relation_many"
+
 module.exports = {
   up: async (queryInterface, Sequelize) => {
     await Alerts.bulkCreate(AlertsData);
@@ -59,6 +51,7 @@ module.exports = {
 
     await Promise.all([
       // Similar logic for "relation_many"
+      // Similar logic for "relation_many"
     ]);
   },
 

backend/src/routes/users.js

@@ -32,6 +32,12 @@ router.use(checkCrudPermissions('users'));
  *          email:
  *            type: string
  *            default: email
+ *          title:
+ *            type: string
+ *            default: title
+ *          location:
+ *            type: string
+ *            default: location
 
  */
 
@@ -308,7 +314,15 @@ router.get(
     const currentUser = req.currentUser;
     const payload = await UsersDBApi.findAll(req.query, { currentUser });
     if (filetype && filetype === 'csv') {
-      const fields = ['id', 'firstName', 'lastName', 'phoneNumber', 'email'];
+      const fields = [
+        'id',
+        'firstName',
+        'lastName',
+        'phoneNumber',
+        'email',
+        'title',
+        'location',
+      ];
       const opts = { fields };
       try {
         const csv = parse(payload.rows, opts);

backend/src/services/search.js

@@ -41,7 +41,19 @@ module.exports = class SearchService {
         throw new ValidationError('iam.errors.searchQueryRequired');
       }
       const tableColumns = {
-        users: ['firstName', 'lastName', 'phoneNumber', 'email'],
+        users: [
+          'firstName',
+
+          'lastName',
+
+          'phoneNumber',
+
+          'email',
+
+          'title',
+
+          'location',
+        ],
 
         alerts: ['message'],
 

frontend/json/runtimeError.json

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

frontend/src/components/Users/CardUsers.tsx

@@ -173,6 +173,35 @@ const CardUsers = ({
                     </div>
                   </dd>
                 </div>
+
+                <div className='flex justify-between gap-x-4 py-3'>
+                  <dt className='  text-gray-500  dark:text-dark-600'>Title</dt>
+                  <dd className='flex items-start gap-x-2'>
+                    <div className='font-medium line-clamp-4'>{item.title}</div>
+                  </dd>
+                </div>
+
+                <div className='flex justify-between gap-x-4 py-3'>
+                  <dt className='  text-gray-500  dark:text-dark-600'>
+                    Location
+                  </dt>
+                  <dd className='flex items-start gap-x-2'>
+                    <div className='font-medium line-clamp-4'>
+                      {item.location}
+                    </div>
+                  </dd>
+                </div>
+
+                <div className='flex justify-between gap-x-4 py-3'>
+                  <dt className='  text-gray-500  dark:text-dark-600'>Tags</dt>
+                  <dd className='flex items-start gap-x-2'>
+                    <div className='font-medium line-clamp-4'>
+                      {dataFormatter
+                        .tagsManyListFormatter(item.tags)
+                        .join(', ')}
+                    </div>
+                  </dd>
+                </div>
               </dl>
             </li>
           ))}

frontend/src/components/Users/ListUsers.tsx

@@ -115,6 +115,25 @@ const ListUsers = ({
                           .join(', ')}
                       </p>
                     </div>
+
+                    <div className={'flex-1 px-3'}>
+                      <p className={'text-xs   text-gray-500 '}>Title</p>
+                      <p className={'line-clamp-2'}>{item.title}</p>
+                    </div>
+
+                    <div className={'flex-1 px-3'}>
+                      <p className={'text-xs   text-gray-500 '}>Location</p>
+                      <p className={'line-clamp-2'}>{item.location}</p>
+                    </div>
+
+                    <div className={'flex-1 px-3'}>
+                      <p className={'text-xs   text-gray-500 '}>Tags</p>
+                      <p className={'line-clamp-2'}>
+                        {dataFormatter
+                          .tagsManyListFormatter(item.tags)
+                          .join(', ')}
+                      </p>
+                    </div>
                   </Link>
                   <ListActionsPopover
                     onDelete={onDelete}

frontend/src/components/Users/configureUsersCols.tsx

@@ -159,6 +159,49 @@ export const loadColumns = async (
       ),
     },
 
+    {
+      field: 'title',
+      headerName: 'Title',
+      flex: 1,
+      minWidth: 120,
+      filterable: false,
+      headerClassName: 'datagrid--header',
+      cellClassName: 'datagrid--cell',
+
+      editable: hasUpdatePermission,
+    },
+
+    {
+      field: 'location',
+      headerName: 'Location',
+      flex: 1,
+      minWidth: 120,
+      filterable: false,
+      headerClassName: 'datagrid--header',
+      cellClassName: 'datagrid--cell',
+
+      editable: hasUpdatePermission,
+    },
+
+    {
+      field: 'tags',
+      headerName: 'Tags',
+      flex: 1,
+      minWidth: 120,
+      filterable: false,
+      headerClassName: 'datagrid--header',
+      cellClassName: 'datagrid--cell',
+
+      editable: false,
+      sortable: false,
+      type: 'singleSelect',
+      valueFormatter: ({ value }) =>
+        dataFormatter.tagsManyListFormatter(value).join(', '),
+      renderEditCell: (params) => (
+        <DataGridMultiSelect {...params} entityName={'tags'} />
+      ),
+    },
+
     {
       field: 'actions',
       type: 'actions',

frontend/src/components/WebPageComponents/Footer.tsx

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

frontend/src/components/WebPageComponents/Header.tsx

@@ -19,7 +19,7 @@ export default function WebSiteHeader({ projectName }: WebSiteHeaderProps) {
 
   const style = HeaderStyle.PAGES_LEFT;
 
-  const design = HeaderDesigns.DESIGN_DIVERSITY;
+  const design = HeaderDesigns.DEFAULT_DESIGN;
   return (
     <header id='websiteHeader' className='overflow-hidden'>
       <div

frontend/src/helpers/dataFormatter.js

@@ -39,6 +39,25 @@ export default {
     });
   },
 
+  tagsManyListFormatter(val) {
+    if (!val || !val.length) return [];
+    return val.map((item) => item.name);
+  },
+  tagsOneListFormatter(val) {
+    if (!val) return '';
+    return val.name;
+  },
+  tagsManyListFormatterEdit(val) {
+    if (!val || !val.length) return [];
+    return val.map((item) => {
+      return { id: item.id, label: item.name };
+    });
+  },
+  tagsOneListFormatterEdit(val) {
+    if (!val) return '';
+    return { label: val.name, id: val.id };
+  },
+
   rolesManyListFormatter(val) {
     if (!val || !val.length) return [];
     return val.map((item) => item.name);

frontend/src/pages/index.tsx

@@ -93,7 +93,7 @@ export default function WebSite() {
         <FeaturesSection
           projectName={'BlackEconDev'}
           image={['Icons representing diverse features']}
-          withBg={1}
+          withBg={0}
           features={features_points}
           mainText={`Discover the Power of ${projectName}`}
           subTitle={`Unlock the potential of your network with ${projectName}. Explore features designed to connect, update, and manage effortlessly.`}

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

@@ -115,6 +115,10 @@ const RolesView = () => {
                       <th>E-Mail</th>
 
                       <th>Disabled</th>
+
+                      <th>Title</th>
+
+                      <th>Location</th>
                     </tr>
                   </thead>
                   <tbody>
@@ -138,6 +142,10 @@ const RolesView = () => {
                           <td data-label='disabled'>
                             {dataFormatter.booleanFormatter(item.disabled)}
                           </td>
+
+                          <td data-label='title'>{item.title}</td>
+
+                          <td data-label='location'>{item.location}</td>
                         </tr>
                       ))}
                   </tbody>

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

@@ -52,6 +52,12 @@ const EditUsers = () => {
 
     custom_permissions: [],
 
+    title: '',
+
+    location: '',
+
+    tags: [],
+
     password: '',
   };
   const [initialValues, setInitialValues] = useState(initVals);
@@ -170,6 +176,25 @@ const EditUsers = () => {
                 ></Field>
               </FormField>
 
+              <FormField label='Title'>
+                <Field name='title' placeholder='Title' />
+              </FormField>
+
+              <FormField label='Location'>
+                <Field name='location' placeholder='Location' />
+              </FormField>
+
+              <FormField label='Tags' labelFor='tags'>
+                <Field
+                  name='tags'
+                  id='tags'
+                  component={SelectFieldMany}
+                  options={initialValues.tags}
+                  itemRef={'tags'}
+                  showField={'name'}
+                ></Field>
+              </FormField>
+
               <FormField label='Password'>
                 <Field name='password' placeholder='password' />
               </FormField>

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

@@ -52,6 +52,12 @@ const EditUsersPage = () => {
 
     custom_permissions: [],
 
+    title: '',
+
+    location: '',
+
+    tags: [],
+
     password: '',
   };
   const [initialValues, setInitialValues] = useState(initVals);
@@ -168,6 +174,25 @@ const EditUsersPage = () => {
                 ></Field>
               </FormField>
 
+              <FormField label='Title'>
+                <Field name='title' placeholder='Title' />
+              </FormField>
+
+              <FormField label='Location'>
+                <Field name='location' placeholder='Location' />
+              </FormField>
+
+              <FormField label='Tags' labelFor='tags'>
+                <Field
+                  name='tags'
+                  id='tags'
+                  component={SelectFieldMany}
+                  options={initialValues.tags}
+                  itemRef={'tags'}
+                  showField={'name'}
+                ></Field>
+              </FormField>
+
               <FormField label='Password'>
                 <Field name='password' placeholder='password' />
               </FormField>

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

@@ -33,10 +33,13 @@ const UsersTablesPage = () => {
     { label: 'Last Name', title: 'lastName' },
     { label: 'Phone Number', title: 'phoneNumber' },
     { label: 'E-Mail', title: 'email' },
+    { label: 'Title', title: 'title' },
+    { label: 'Location', title: 'location' },
 
     { label: 'App Role', title: 'app_role' },
 
     { label: 'Custom Permissions', title: 'custom_permissions' },
+    { label: 'Tags', title: 'tags' },
   ]);
 
   const hasCreatePermission =

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

@@ -48,6 +48,12 @@ const initialValues = {
   app_role: '',
 
   custom_permissions: [],
+
+  title: '',
+
+  location: '',
+
+  tags: [],
 };
 
 const UsersNew = () => {
@@ -140,6 +146,24 @@ const UsersNew = () => {
                 ></Field>
               </FormField>
 
+              <FormField label='Title'>
+                <Field name='title' placeholder='Title' />
+              </FormField>
+
+              <FormField label='Location'>
+                <Field name='location' placeholder='Location' />
+              </FormField>
+
+              <FormField label='Tags' labelFor='tags'>
+                <Field
+                  name='tags'
+                  id='tags'
+                  itemRef={'tags'}
+                  options={[]}
+                  component={SelectFieldMany}
+                ></Field>
+              </FormField>
+
               <BaseDivider />
               <BaseButtons>
                 <BaseButton type='submit' color='info' label='Submit' />

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

@@ -33,10 +33,13 @@ const UsersTablesPage = () => {
     { label: 'Last Name', title: 'lastName' },
     { label: 'Phone Number', title: 'phoneNumber' },
     { label: 'E-Mail', title: 'email' },
+    { label: 'Title', title: 'title' },
+    { label: 'Location', title: 'location' },
 
     { label: 'App Role', title: 'app_role' },
 
     { label: 'Custom Permissions', title: 'custom_permissions' },
+    { label: 'Tags', title: 'tags' },
   ]);
 
   const hasCreatePermission =

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

@@ -138,6 +138,55 @@ const UsersView = () => {
             </CardBox>
           </>
 
+          <div className={'mb-4'}>
+            <p className={'block font-bold mb-2'}>Title</p>
+            <p>{users?.title}</p>
+          </div>
+
+          <div className={'mb-4'}>
+            <p className={'block font-bold mb-2'}>Location</p>
+            <p>{users?.location}</p>
+          </div>
+
+          <>
+            <p className={'block font-bold mb-2'}>Tags</p>
+            <CardBox
+              className='mb-6 border border-gray-300 rounded overflow-hidden'
+              hasTable
+            >
+              <div className='overflow-x-auto'>
+                <table>
+                  <thead>
+                    <tr>
+                      <th>Name</th>
+
+                      <th>Category</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {users.tags &&
+                      Array.isArray(users.tags) &&
+                      users.tags.map((item: any) => (
+                        <tr
+                          key={item.id}
+                          onClick={() =>
+                            router.push(`/tags/tags-view/?id=${item.id}`)
+                          }
+                        >
+                          <td data-label='name'>{item.name}</td>
+
+                          <td data-label='category'>{item.category}</td>
+                        </tr>
+                      ))}
+                  </tbody>
+                </table>
+              </div>
+              {!users?.tags?.length && (
+                <div className={'text-center py-4'}>No data</div>
+              )}
+            </CardBox>
+          </>
+
           <BaseDivider />
 
           <BaseButton

frontend/src/pages/web_pages/home.tsx

@@ -77,7 +77,7 @@ export default function WebSite() {
         <FeaturesSection
           projectName={'BlackEconDev'}
           image={['Icons representing diverse features']}
-          withBg={0}
+          withBg={1}
           features={features_points}
           mainText={`Discover the Power of ${projectName}`}
           subTitle={`Unlock the potential of your network with ${projectName}. Explore features designed to connect, update, and manage effortlessly.`}