1.1

added industry and company name

.gitignore

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

backend/src/db/api/contacts.js

@@ -20,6 +20,8 @@ module.exports = class ContactsDBApi {
         email: data.email || null,
         phone_number: data.phone_number || null,
         notes: data.notes || null,
+        company: data.company || null,
+        industry: data.industry || null,
         importHash: data.importHash || null,
         createdById: currentUser.id,
         updatedById: currentUser.id,
@@ -47,6 +49,8 @@ module.exports = class ContactsDBApi {
       email: item.email || null,
       phone_number: item.phone_number || null,
       notes: item.notes || null,
+      company: item.company || null,
+      industry: item.industry || null,
       importHash: item.importHash || null,
       createdById: currentUser.id,
       updatedById: currentUser.id,
@@ -83,6 +87,10 @@ module.exports = class ContactsDBApi {
 
     if (data.notes !== undefined) updatePayload.notes = data.notes;
 
+    if (data.company !== undefined) updatePayload.company = data.company;
+
+    if (data.industry !== undefined) updatePayload.industry = data.industry;
+
     updatePayload.updatedById = currentUser.id;
 
     await contacts.update(updatePayload, { transaction });
@@ -263,6 +271,20 @@ module.exports = class ContactsDBApi {
         };
       }
 
+      if (filter.company) {
+        where = {
+          ...where,
+          [Op.and]: Utils.ilike('contacts', 'company', filter.company),
+        };
+      }
+
+      if (filter.industry) {
+        where = {
+          ...where,
+          [Op.and]: Utils.ilike('contacts', 'industry', filter.industry),
+        };
+      }
+
       if (filter.active !== undefined) {
         where = {
           ...where,

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

backend/src/db/migrations/1748026622056.js

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

backend/src/db/models/contacts.js

@@ -34,6 +34,14 @@ module.exports = function (sequelize, DataTypes) {
         type: DataTypes.TEXT,
       },
 
+      company: {
+        type: DataTypes.TEXT,
+      },
+
+      industry: {
+        type: DataTypes.TEXT,
+      },
+
       importHash: {
         type: DataTypes.STRING(255),
         allowNull: true,

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

@@ -33,14 +33,6 @@ const CallsData = [
 
     // type code here for "relation_one" field
   },
-
-  {
-    scheduled_time: new Date('2023-11-04T11:00:00Z'),
-
-    // type code here for "relation_one" field
-
-    // type code here for "relation_one" field
-  },
 ];
 
 const ContactsData = [
@@ -56,6 +48,10 @@ const ContactsData = [
     // type code here for "relation_one" field
 
     notes: 'Met at the tech conference.',
+
+    company: 'Lynn Margulis',
+
+    industry: 'Karl Landsteiner',
   },
 
   {
@@ -70,6 +66,10 @@ const ContactsData = [
     // type code here for "relation_one" field
 
     notes: 'Referred by a mutual friend.',
+
+    company: 'Paul Ehrlich',
+
+    industry: 'William Bayliss',
   },
 
   {
@@ -84,20 +84,10 @@ const ContactsData = [
     // type code here for "relation_one" field
 
     notes: 'Interested in software development roles.',
-  },
 
-  {
+    company: 'Louis Victor de Broglie',
-    first_name: 'Bob',
 
-    last_name: 'Brown',
+    industry: 'Alfred Wegener',
-
-    email: 'bob.brown@example.com',
-
-    phone_number: '5566778899',
-
-    // type code here for "relation_one" field
-
-    notes: 'Looking for opportunities in marketing.',
   },
 ];
 
@@ -131,16 +121,6 @@ const FollowUpsData = [
 
     status: 'Pending',
   },
-
-  {
-    follow_up_date: new Date('2023-11-09T11:00:00Z'),
-
-    // type code here for "relation_one" field
-
-    // type code here for "relation_one" field
-
-    status: 'In Progress',
-  },
 ];
 
 const OutreachMessagesData = [
@@ -173,16 +153,6 @@ const OutreachMessagesData = [
 
     // type code here for "relation_one" field
   },
-
-  {
-    subject: 'Job Opportunity Discussion',
-
-    body: 'I came across a job opportunity that might interest you.',
-
-    // type code here for "relation_one" field
-
-    // type code here for "relation_one" field
-  },
 ];
 
 async function associateCallWithContact() {
@@ -218,17 +188,6 @@ async function associateCallWithContact() {
   if (Call2?.setContact) {
     await Call2.setContact(relatedContact2);
   }
-
-  const relatedContact3 = await Contacts.findOne({
-    offset: Math.floor(Math.random() * (await Contacts.count())),
-  });
-  const Call3 = await Calls.findOne({
-    order: [['id', 'ASC']],
-    offset: 3,
-  });
-  if (Call3?.setContact) {
-    await Call3.setContact(relatedContact3);
-  }
 }
 
 async function associateCallWithJob_seeker() {
@@ -264,17 +223,6 @@ async function associateCallWithJob_seeker() {
   if (Call2?.setJob_seeker) {
     await Call2.setJob_seeker(relatedJob_seeker2);
   }
-
-  const relatedJob_seeker3 = await Users.findOne({
-    offset: Math.floor(Math.random() * (await Users.count())),
-  });
-  const Call3 = await Calls.findOne({
-    order: [['id', 'ASC']],
-    offset: 3,
-  });
-  if (Call3?.setJob_seeker) {
-    await Call3.setJob_seeker(relatedJob_seeker3);
-  }
 }
 
 // Similar logic for "relation_many"
@@ -312,17 +260,6 @@ async function associateContactWithJob_seeker() {
   if (Contact2?.setJob_seeker) {
     await Contact2.setJob_seeker(relatedJob_seeker2);
   }
-
-  const relatedJob_seeker3 = await Users.findOne({
-    offset: Math.floor(Math.random() * (await Users.count())),
-  });
-  const Contact3 = await Contacts.findOne({
-    order: [['id', 'ASC']],
-    offset: 3,
-  });
-  if (Contact3?.setJob_seeker) {
-    await Contact3.setJob_seeker(relatedJob_seeker3);
-  }
 }
 
 async function associateFollowUpWithContact() {
@@ -358,17 +295,6 @@ async function associateFollowUpWithContact() {
   if (FollowUp2?.setContact) {
     await FollowUp2.setContact(relatedContact2);
   }
-
-  const relatedContact3 = await Contacts.findOne({
-    offset: Math.floor(Math.random() * (await Contacts.count())),
-  });
-  const FollowUp3 = await FollowUps.findOne({
-    order: [['id', 'ASC']],
-    offset: 3,
-  });
-  if (FollowUp3?.setContact) {
-    await FollowUp3.setContact(relatedContact3);
-  }
 }
 
 async function associateFollowUpWithJob_seeker() {
@@ -404,17 +330,6 @@ async function associateFollowUpWithJob_seeker() {
   if (FollowUp2?.setJob_seeker) {
     await FollowUp2.setJob_seeker(relatedJob_seeker2);
   }
-
-  const relatedJob_seeker3 = await Users.findOne({
-    offset: Math.floor(Math.random() * (await Users.count())),
-  });
-  const FollowUp3 = await FollowUps.findOne({
-    order: [['id', 'ASC']],
-    offset: 3,
-  });
-  if (FollowUp3?.setJob_seeker) {
-    await FollowUp3.setJob_seeker(relatedJob_seeker3);
-  }
 }
 
 async function associateOutreachMessageWithContact() {
@@ -450,17 +365,6 @@ async function associateOutreachMessageWithContact() {
   if (OutreachMessage2?.setContact) {
     await OutreachMessage2.setContact(relatedContact2);
   }
-
-  const relatedContact3 = await Contacts.findOne({
-    offset: Math.floor(Math.random() * (await Contacts.count())),
-  });
-  const OutreachMessage3 = await OutreachMessages.findOne({
-    order: [['id', 'ASC']],
-    offset: 3,
-  });
-  if (OutreachMessage3?.setContact) {
-    await OutreachMessage3.setContact(relatedContact3);
-  }
 }
 
 async function associateOutreachMessageWithJob_seeker() {
@@ -496,17 +400,6 @@ async function associateOutreachMessageWithJob_seeker() {
   if (OutreachMessage2?.setJob_seeker) {
     await OutreachMessage2.setJob_seeker(relatedJob_seeker2);
   }
-
-  const relatedJob_seeker3 = await Users.findOne({
-    offset: Math.floor(Math.random() * (await Users.count())),
-  });
-  const OutreachMessage3 = await OutreachMessages.findOne({
-    order: [['id', 'ASC']],
-    offset: 3,
-  });
-  if (OutreachMessage3?.setJob_seeker) {
-    await OutreachMessage3.setJob_seeker(relatedJob_seeker3);
-  }
 }
 
 module.exports = {

backend/src/routes/contacts.js

@@ -35,6 +35,12 @@ router.use(checkCrudPermissions('contacts'));
  *          notes:
  *            type: string
  *            default: notes
+ *          company:
+ *            type: string
+ *            default: company
+ *          industry:
+ *            type: string
+ *            default: industry
 
  */
 
@@ -323,6 +329,8 @@ router.get(
         'email',
         'phone_number',
         'notes',
+        'company',
+        'industry',
       ];
       const opts = { fields };
       try {

backend/src/services/search.js

@@ -43,7 +43,21 @@ module.exports = class SearchService {
       const tableColumns = {
         users: ['firstName', 'lastName', 'phoneNumber', 'email'],
 
-        contacts: ['first_name', 'last_name', 'email', 'phone_number', 'notes'],
+        contacts: [
+          'first_name',
+
+          'last_name',
+
+          'email',
+
+          'phone_number',
+
+          'notes',
+
+          'company',
+
+          'industry',
+        ],
 
         follow_ups: ['status'],
 

frontend/json/runtimeError.json

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

frontend/src/components/Contacts/CardContacts.tsx

@@ -133,6 +133,28 @@ const CardContacts = ({
                     <div className='font-medium line-clamp-4'>{item.notes}</div>
                   </dd>
                 </div>
+
+                <div className='flex justify-between gap-x-4 py-3'>
+                  <dt className='  text-gray-500  dark:text-dark-600'>
+                    Company
+                  </dt>
+                  <dd className='flex items-start gap-x-2'>
+                    <div className='font-medium line-clamp-4'>
+                      {item.company}
+                    </div>
+                  </dd>
+                </div>
+
+                <div className='flex justify-between gap-x-4 py-3'>
+                  <dt className='  text-gray-500  dark:text-dark-600'>
+                    Industry
+                  </dt>
+                  <dd className='flex items-start gap-x-2'>
+                    <div className='font-medium line-clamp-4'>
+                      {item.industry}
+                    </div>
+                  </dd>
+                </div>
               </dl>
             </li>
           ))}

frontend/src/components/Contacts/ListContacts.tsx

@@ -84,6 +84,16 @@ const ListContacts = ({
                       <p className={'text-xs   text-gray-500 '}>Notes</p>
                       <p className={'line-clamp-2'}>{item.notes}</p>
                     </div>
+
+                    <div className={'flex-1 px-3'}>
+                      <p className={'text-xs   text-gray-500 '}>Company</p>
+                      <p className={'line-clamp-2'}>{item.company}</p>
+                    </div>
+
+                    <div className={'flex-1 px-3'}>
+                      <p className={'text-xs   text-gray-500 '}>Industry</p>
+                      <p className={'line-clamp-2'}>{item.industry}</p>
+                    </div>
                   </Link>
                   <ListActionsPopover
                     onDelete={onDelete}

frontend/src/components/Contacts/TableContacts.tsx

@@ -14,7 +14,7 @@ import {
 import { useAppDispatch, useAppSelector } from '../../stores/hooks';
 import { useRouter } from 'next/router';
 import { Field, Form, Formik } from 'formik';
-import { DataGrid, GridColDef } from '@mui/x-data-grid';
+import { DataGrid, GridColDef, GridToolbar } from '@mui/x-data-grid';
 import { loadColumns } from './configureContactsCols';
 import _ from 'lodash';
 import dataFormatter from '../../helpers/dataFormatter';
@@ -216,6 +216,9 @@ const TableSampleContacts = ({
         className={'datagrid--table'}
         getRowClassName={() => `datagrid--row`}
         rows={contacts ?? []}
+
+          components={{ Toolbar: GridToolbar }}
+          onRowClick={(params) => router.push(`/contacts/contacts-view/?id=${params.id}`)}
         columns={columns}
         initialState={{
           pagination: {

frontend/src/components/Contacts/configureContactsCols.tsx

@@ -39,29 +39,16 @@ export const loadColumns = async (
 
   return [
     {
-      field: 'first_name',
+      field: 'name',
-      headerName: 'FirstName',
+      headerName: 'Name',
       flex: 1,
       minWidth: 120,
       filterable: false,
       headerClassName: 'datagrid--header',
       cellClassName: 'datagrid--cell',
-
+      valueGetter: (params: GridValueGetterParams) =>
-      editable: hasUpdatePermission,
+        `${params.row.first_name || ''} ${params.row.last_name || ''}`,
     },
-
-    {
-      field: 'last_name',
-      headerName: 'LastName',
-      flex: 1,
-      minWidth: 120,
-      filterable: false,
-      headerClassName: 'datagrid--header',
-      cellClassName: 'datagrid--cell',
-
-      editable: hasUpdatePermission,
-    },
-
     {
       field: 'email',
       headerName: 'Email',
@@ -70,42 +57,19 @@ export const loadColumns = async (
       filterable: false,
       headerClassName: 'datagrid--header',
       cellClassName: 'datagrid--cell',
-
       editable: hasUpdatePermission,
     },
-
     {
       field: 'phone_number',
-      headerName: 'PhoneNumber',
+      headerName: 'Phone Number',
       flex: 1,
       minWidth: 120,
       filterable: false,
       headerClassName: 'datagrid--header',
       cellClassName: 'datagrid--cell',
-
       editable: hasUpdatePermission,
+      renderCell: (params) => dataFormatter.phoneFormatter(params.value),
     },
-
-    {
-      field: 'job_seeker',
-      headerName: 'JobSeeker',
-      flex: 1,
-      minWidth: 120,
-      filterable: false,
-      headerClassName: 'datagrid--header',
-      cellClassName: 'datagrid--cell',
-
-      editable: hasUpdatePermission,
-
-      sortable: false,
-      type: 'singleSelect',
-      getOptionValue: (value: any) => value?.id,
-      getOptionLabel: (value: any) => value?.label,
-      valueOptions: await callOptionsApi('users'),
-      valueGetter: (params: GridValueGetterParams) =>
-        params?.value?.id ?? params?.value,
-    },
-
     {
       field: 'notes',
       headerName: 'Notes',
@@ -114,10 +78,8 @@ export const loadColumns = async (
       filterable: false,
       headerClassName: 'datagrid--header',
       cellClassName: 'datagrid--cell',
-
       editable: hasUpdatePermission,
     },
-
     {
       field: 'actions',
       type: 'actions',

frontend/src/components/Contacts/configureContactsCols.tsx.temp

@@ -0,0 +1,105 @@
+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';
+
+type Params = (id: string) => void;
+
+export const loadColumns = async (
+  onDelete: Params,
+  entityName: string,
+
+  user,
+) => {
+  async function callOptionsApi(entityName: string) {
+    if (!hasPermission(user, 'READ_' + entityName.toUpperCase())) return [];
+
+    try {
+      const data = await axios(`/${entityName}/autocomplete?limit=100`);
+      return data.data;
+    } catch (error) {
+      console.log(error);
+      return [];
+    }
+  }
+
+  const hasUpdatePermission = hasPermission(user, 'UPDATE_CONTACTS');
+
+  return [
+    {
+      field: 'name',
+      headerName: 'Name',
+      flex: 1,
+      minWidth: 120,
+      filterable: false,
+      headerClassName: 'datagrid--header',
+      cellClassName: 'datagrid--cell',
+      valueGetter: (params: GridValueGetterParams) =>
+        `${params.row.first_name || ''} ${params.row.last_name || ''}`,
+    },
+    {
+      field: 'email',
+      headerName: 'Email',
+      flex: 1,
+      minWidth: 120,
+      filterable: false,
+      headerClassName: 'datagrid--header',
+      cellClassName: 'datagrid--cell',
+      editable: hasUpdatePermission,
+    },
+    {
+      field: 'phone_number',
+      headerName: 'Phone Number',
+      flex: 1,
+      minWidth: 120,
+      filterable: false,
+      headerClassName: 'datagrid--header',
+      cellClassName: 'datagrid--cell',
+      editable: hasUpdatePermission,
+      renderCell: (params) => dataFormatter.phoneFormatter(params.value),
+    },
+    },
+    {
+      field: 'notes',
+      headerName: 'Notes',
+      flex: 1,
+      minWidth: 120,
+      filterable: false,
+      headerClassName: 'datagrid--header',
+      cellClassName: 'datagrid--cell',
+      editable: hasUpdatePermission,
+    },
+    {
+      field: 'actions',
+      type: 'actions',
+      minWidth: 30,
+      headerClassName: 'datagrid--header',
+      cellClassName: 'datagrid--cell',
+      getActions: (params: GridRowParams) => {
+        return [
+          <div key={params?.row?.id}>
+            <ListActionsPopover
+              onDelete={onDelete}
+              itemId={params?.row?.id}
+              pathEdit={`/contacts/contacts-edit/?id=${params?.row?.id}`}
+              pathView={`/contacts/contacts-view/?id=${params?.row?.id}`}
+              hasUpdatePermission={hasUpdatePermission}
+            />
+          </div>,
+        ];
+      },
+    },
+  ];
+};

frontend/src/components/WebPageComponents/Footer.tsx

@@ -19,7 +19,7 @@ export default function WebSiteFooter({ projectName }: WebSiteFooterProps) {
 
   const style = FooterStyle.WITH_PAGES;
 
-  const design = FooterDesigns.DESIGN_DIVERSITY;
+  const design = FooterDesigns.DEFAULT_DESIGN;
 
   return (
     <div

frontend/src/helpers/dataFormatter.js

@@ -27,6 +27,99 @@ export default {
   booleanFormatter(val) {
     return val ? 'Yes' : 'No';
   },
+
+  /**
+   * Format phone number to +X (XXX) XXX-XXXX
+   */
+  phoneFormatter(val) {
+    if (!val) return '';
+    const digits = val.replace(/\D/g, '');
+    let country = '';
+    let number = '';
+    if (digits.length === 11) {
+      country = digits.charAt(0);
+      number = digits.slice(1);
+    } else if (digits.length === 10) {
+      country = '1';
+      number = digits;
+    } else {
+      return val;
+    }
+    const area = number.slice(0, 3);
+    const prefix = number.slice(3, 6);
+    const line = number.slice(6);
+    return `+${country} (${area}) ${prefix}-${line}`;
+  },
+
+  /**
+   * Format phone number to +X (XXX) XXX-XXXX
+   */
+  phoneFormatter(val) {
+    if (!val) return '';
+    const digits = val.replace(/\D/g, '');
+    let country = '';
+    let number = '';
+    if (digits.length === 11) {
+      country = digits.charAt(0);
+      number = digits.slice(1);
+    } else if (digits.length === 10) {
+      country = '1';
+      number = digits;
+    } else {
+      return val;
+    }
+    const area = number.slice(0, 3);
+    const prefix = number.slice(3, 6);
+    const line = number.slice(6);
+    return `+${country} (${area}) ${prefix}-${line}`;
+  },
+
+
+  /**
+   * Format phone number to +X (XXX) XXX-XXXX
+   */
+  phoneFormatter(val) {
+    if (!val) return '';
+    const digits = val.replace(/\D/g, '');
+    let country = '';
+    let number = '';
+    if (digits.length === 11) {
+      country = digits.charAt(0);
+      number = digits.slice(1);
+    } else if (digits.length === 10) {
+      country = '1';
+      number = digits;
+    } else {
+      return val;
+    }
+    const area = number.slice(0, 3);
+    const prefix = number.slice(3, 6);
+    const line = number.slice(6);
+    return `+${country} (${area}) ${prefix}-${line}`;
+  },
+
+  /**
+   * Format phone number to +X (XXX) XXX-XXXX
+   */
+  phoneFormatter(val) {
+    if (!val) return '';
+    const digits = val.replace(/\D/g, '');
+    let country = '';
+    let number = '';
+    if (digits.length === 11) {
+      country = digits.charAt(0);
+      number = digits.slice(1);
+    } else if (digits.length === 10) {
+      country = '1';
+      number = digits;
+    } else {
+      return val;
+    }
+    const area = number.slice(0, 3);
+    const prefix = number.slice(3, 6);
+    const line = number.slice(6);
+    return `+${country} (${area}) ${prefix}-${line}`;
+  },
   dataGridEditFormatter(obj) {
     return _.transform(obj, (result, value, key) => {
       if (_.isArray(value)) {

frontend/src/helpers/dataFormatter.js.temp

@@ -0,0 +1,234 @@
+import dayjs from 'dayjs';
+import _ from 'lodash';
+
+export default {
+  filesFormatter(arr) {
+    if (!arr || !arr.length) return [];
+    return arr.map((item) => item);
+  },
+  imageFormatter(arr) {
+    if (!arr || !arr.length) return [];
+    return arr.map((item) => ({
+      publicUrl: item.publicUrl || '',
+    }));
+  },
+  oneImageFormatter(arr) {
+    if (!arr || !arr.length) return '';
+    return arr[0].publicUrl || '';
+  },
+  dateFormatter(date) {
+    if (!date) return '';
+    return dayjs(date).format('YYYY-MM-DD');
+  },
+  dateTimeFormatter(date) {
+    if (!date) return '';
+    return dayjs(date).format('YYYY-MM-DD HH:mm');
+  },
+  booleanFormatter(val) {
+    return val ? 'Yes' : 'No';
+
+  /**
+   * Format phone number to +X (XXX) XXX-XXXX
+   */
+  phoneFormatter(val) {
+    if (!val) return '';
+    const digits = val.replace(/\D/g, '');
+    let country = '';
+    let number = '';
+    if (digits.length === 11) {
+      country = digits.charAt(0);
+      number = digits.slice(1);
+    } else if (digits.length === 10) {
+      country = '1';
+      number = digits;
+    } else {
+      return val;
+    }
+    const area = number.slice(0, 3);
+    const prefix = number.slice(3, 6);
+    const line = number.slice(6);
+    return `+${country} (${area}) ${prefix}-${line}`;
+  },
+
+  },
+
+  /**
+   * Format phone number to +X (XXX) XXX-XXXX
+   */
+  phoneFormatter(val) {
+    if (!val) return '';
+    const digits = val.replace(/\D/g, '');
+    let country = '';
+    let number = '';
+    if (digits.length === 11) {
+      country = digits.charAt(0);
+      number = digits.slice(1);
+    } else if (digits.length === 10) {
+      country = '1';
+      number = digits;
+    } else {
+      return val;
+    }
+    const area = number.slice(0, 3);
+    const prefix = number.slice(3, 6);
+    const line = number.slice(6);
+    return `+${country} (${area}) ${prefix}-${line}`;
+  },
+
+  /**
+   * Format phone number to +X (XXX) XXX-XXXX
+   */
+  phoneFormatter(val) {
+    if (!val) return '';
+    const digits = val.replace(/\D/g, '');
+    let country = '';
+    let number = '';
+    if (digits.length === 11) {
+      country = digits.charAt(0);
+      number = digits.slice(1);
+    } else if (digits.length === 10) {
+      country = '1';
+      number = digits;
+    } else {
+      return val;
+    }
+    const area = number.slice(0, 3);
+    const prefix = number.slice(3, 6);
+    const line = number.slice(6);
+    return `+${country} (${area}) ${prefix}-${line}`;
+  },
+
+
+  /**
+   * Format phone number to +X (XXX) XXX-XXXX
+   */
+  phoneFormatter(val) {
+    if (!val) return '';
+    const digits = val.replace(/\D/g, '');
+    let country = '';
+    let number = '';
+    if (digits.length === 11) {
+      country = digits.charAt(0);
+      number = digits.slice(1);
+    } else if (digits.length === 10) {
+      country = '1';
+      number = digits;
+    } else {
+      return val;
+    }
+    const area = number.slice(0, 3);
+    const prefix = number.slice(3, 6);
+    const line = number.slice(6);
+    return `+${country} (${area}) ${prefix}-${line}`;
+  },
+
+  /**
+   * Format phone number to +X (XXX) XXX-XXXX
+   */
+  phoneFormatter(val) {
+    if (!val) return '';
+    const digits = val.replace(/\D/g, '');
+    let country = '';
+    let number = '';
+    if (digits.length === 11) {
+      country = digits.charAt(0);
+      number = digits.slice(1);
+    } else if (digits.length === 10) {
+      country = '1';
+      number = digits;
+    } else {
+      return val;
+    }
+    const area = number.slice(0, 3);
+    const prefix = number.slice(3, 6);
+    const line = number.slice(6);
+    return `+${country} (${area}) ${prefix}-${line}`;
+  },
+  dataGridEditFormatter(obj) {
+    return _.transform(obj, (result, value, key) => {
+      if (_.isArray(value)) {
+        result[key] = _.map(value, 'id');
+      } else if (_.isObject(value)) {
+        result[key] = value.id;
+      } else {
+        result[key] = value;
+      }
+    });
+  },
+
+  usersManyListFormatter(val) {
+    if (!val || !val.length) return [];
+    return val.map((item) => item.firstName);
+  },
+  usersOneListFormatter(val) {
+    if (!val) return '';
+    return val.firstName;
+  },
+  usersManyListFormatterEdit(val) {
+    if (!val || !val.length) return [];
+    return val.map((item) => {
+      return { id: item.id, label: item.firstName };
+    });
+  },
+  usersOneListFormatterEdit(val) {
+    if (!val) return '';
+    return { label: val.firstName, id: val.id };
+  },
+
+  contactsManyListFormatter(val) {
+    if (!val || !val.length) return [];
+    return val.map((item) => item.first_name);
+  },
+  contactsOneListFormatter(val) {
+    if (!val) return '';
+    return val.first_name;
+  },
+  contactsManyListFormatterEdit(val) {
+    if (!val || !val.length) return [];
+    return val.map((item) => {
+      return { id: item.id, label: item.first_name };
+    });
+  },
+  contactsOneListFormatterEdit(val) {
+    if (!val) return '';
+    return { label: val.first_name, id: val.id };
+  },
+
+  rolesManyListFormatter(val) {
+    if (!val || !val.length) return [];
+    return val.map((item) => item.name);
+  },
+  rolesOneListFormatter(val) {
+    if (!val) return '';
+    return val.name;
+  },
+  rolesManyListFormatterEdit(val) {
+    if (!val || !val.length) return [];
+    return val.map((item) => {
+      return { id: item.id, label: item.name };
+    });
+  },
+  rolesOneListFormatterEdit(val) {
+    if (!val) return '';
+    return { label: val.name, id: val.id };
+  },
+
+  permissionsManyListFormatter(val) {
+    if (!val || !val.length) return [];
+    return val.map((item) => item.name);
+  },
+  permissionsOneListFormatter(val) {
+    if (!val) return '';
+    return val.name;
+  },
+  permissionsManyListFormatterEdit(val) {
+    if (!val || !val.length) return [];
+    return val.map((item) => {
+      return { id: item.id, label: item.name };
+    });
+  },
+  permissionsOneListFormatterEdit(val) {
+    if (!val) return '';
+    return { label: val.name, id: val.id };
+  },
+};

frontend/src/menuAside.ts

@@ -19,14 +19,6 @@ const menuAside: MenuAsideItem[] = [
         : icon.mdiTable ?? icon.mdiTable,
     permissions: 'READ_CALLS',
   },
-  {
-    href: '/users/users-list',
-    label: 'Users',
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    icon: icon.mdiAccountGroup ?? icon.mdiTable,
-    permissions: 'READ_USERS',
-  },
   {
     href: '/contacts/contacts-list',
     label: 'Contacts',

frontend/src/pages/contacts/[contactsId].tsx

@@ -47,6 +47,10 @@ const EditContacts = () => {
     job_seeker: null,
 
     notes: '',
+
+    company: '',
+
+    industry: '',
   };
   const [initialValues, setInitialValues] = useState(initVals);
 
@@ -134,6 +138,14 @@ const EditContacts = () => {
                 ></Field>
               </FormField>
 
+              <FormField label='Company'>
+                <Field name='company' placeholder='Company' />
+              </FormField>
+
+              <FormField label='Industry'>
+                <Field name='industry' placeholder='Industry' />
+              </FormField>
+
               <BaseDivider />
               <BaseButtons>
                 <BaseButton type='submit' color='info' label='Submit' />

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

@@ -47,6 +47,10 @@ const EditContactsPage = () => {
     job_seeker: null,
 
     notes: '',
+
+    company: '',
+
+    industry: '',
   };
   const [initialValues, setInitialValues] = useState(initVals);
 
@@ -132,6 +136,14 @@ const EditContactsPage = () => {
                 ></Field>
               </FormField>
 
+              <FormField label='Company'>
+                <Field name='company' placeholder='Company' />
+              </FormField>
+
+              <FormField label='Industry'>
+                <Field name='industry' placeholder='Industry' />
+              </FormField>
+
               <BaseDivider />
               <BaseButtons>
                 <BaseButton type='submit' color='info' label='Submit' />

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

@@ -34,6 +34,8 @@ const ContactsTablesPage = () => {
     { label: 'Email', title: 'email' },
     { label: 'PhoneNumber', title: 'phone_number' },
     { label: 'Notes', title: 'notes' },
+    { label: 'Company', title: 'company' },
+    { label: 'Industry', title: 'industry' },
 
     { label: 'JobSeeker', title: 'job_seeker' },
   ]);

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

@@ -44,6 +44,10 @@ const initialValues = {
   job_seeker: '',
 
   notes: '',
+
+  company: '',
+
+  industry: '',
 };
 
 const ContactsNew = () => {
@@ -107,6 +111,14 @@ const ContactsNew = () => {
                 ></Field>
               </FormField>
 
+              <FormField label='Company'>
+                <Field name='company' placeholder='Company' />
+              </FormField>
+
+              <FormField label='Industry'>
+                <Field name='industry' placeholder='Industry' />
+              </FormField>
+
               <BaseDivider />
               <BaseButtons>
                 <BaseButton type='submit' color='info' label='Submit' />

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

@@ -34,6 +34,8 @@ const ContactsTablesPage = () => {
     { label: 'Email', title: 'email' },
     { label: 'PhoneNumber', title: 'phone_number' },
     { label: 'Notes', title: 'notes' },
+    { label: 'Company', title: 'company' },
+    { label: 'Industry', title: 'industry' },
 
     { label: 'JobSeeker', title: 'job_seeker' },
   ]);

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

@@ -54,30 +54,10 @@ const ContactsView = () => {
           />
         </SectionTitleLineWithButton>
         <CardBox>
-          <div className={'mb-4'}>
+          <div className='mb-6'>
-            <p className={'block font-bold mb-2'}>FirstName</p>
+            <h1 className='text-2xl font-bold'>{contacts?.first_name} {contacts?.last_name}</h1>
-            <p>{contacts?.first_name}</p>
+            <p className='text-sm text-gray-500'>{contacts?.email}</p>
-          </div>
+            <p className='text-sm text-gray-500'>{contacts?.phone_number}</p>
-
-          <div className={'mb-4'}>
-            <p className={'block font-bold mb-2'}>LastName</p>
-            <p>{contacts?.last_name}</p>
-          </div>
-
-          <div className={'mb-4'}>
-            <p className={'block font-bold mb-2'}>Email</p>
-            <p>{contacts?.email}</p>
-          </div>
-
-          <div className={'mb-4'}>
-            <p className={'block font-bold mb-2'}>PhoneNumber</p>
-            <p>{contacts?.phone_number}</p>
-          </div>
-
-          <div className={'mb-4'}>
-            <p className={'block font-bold mb-2'}>JobSeeker</p>
-
-            <p>{contacts?.job_seeker?.firstName ?? 'No data'}</p>
           </div>
 
           <div className={'mb-4'}>
@@ -89,6 +69,16 @@ const ContactsView = () => {
             )}
           </div>
 
+          <div className={'mb-4'}>
+            <p className={'block font-bold mb-2'}>Company</p>
+            <p>{contacts?.company}</p>
+          </div>
+
+          <div className={'mb-4'}>
+            <p className={'block font-bold mb-2'}>Industry</p>
+            <p>{contacts?.industry}</p>
+          </div>
+
           <>
             <p className={'block font-bold mb-2'}>Calls Contact</p>
             <CardBox

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

@@ -194,6 +194,10 @@ const UsersView = () => {
                       <th>Email</th>
 
                       <th>PhoneNumber</th>
+
+                      <th>Company</th>
+
+                      <th>Industry</th>
                     </tr>
                   </thead>
                   <tbody>
@@ -215,6 +219,10 @@ const UsersView = () => {
                           <td data-label='email'>{item.email}</td>
 
                           <td data-label='phone_number'>{item.phone_number}</td>
+
+                          <td data-label='company'>{item.company}</td>
+
+                          <td data-label='industry'>{item.industry}</td>
                         </tr>
                       ))}
                   </tbody>

frontend/src/pages/web_pages/home.tsx

@@ -86,7 +86,7 @@ export default function WebSite() {
         <FeaturesSection
           projectName={'never search alone'}
           image={['Dashboard showcasing job connections']}
-          withBg={1}
+          withBg={0}
           features={features_points}
           mainText={`Discover Key Features of ${projectName}`}
           subTitle={`Unlock the full potential of your job search with ${projectName}. Streamline your process and connect effortlessly.`}