Updated via schema editor on 2025-07-29 11:41

backend/src/db/api/analytics.js

@@ -179,7 +179,7 @@ module.exports = class AnalyticsDBApi {
                   },
                 },
                 {
-                  firstName: {
+                  id: {
                     [Op.or]: filter.user
                       .split('|')
                       .map((term) => ({ [Op.iLike]: `%${term}%` })),

backend/src/db/api/followers.js

@@ -185,7 +185,7 @@ module.exports = class FollowersDBApi {
                   },
                 },
                 {
-                  firstName: {
+                  id: {
                     [Op.or]: filter.follower
                       .split('|')
                       .map((term) => ({ [Op.iLike]: `%${term}%` })),
@@ -211,7 +211,7 @@ module.exports = class FollowersDBApi {
                   },
                 },
                 {
-                  firstName: {
+                  id: {
                     [Op.or]: filter.following
                       .split('|')
                       .map((term) => ({ [Op.iLike]: `%${term}%` })),

backend/src/db/api/messages.js

@@ -193,7 +193,7 @@ module.exports = class MessagesDBApi {
                   },
                 },
                 {
-                  firstName: {
+                  id: {
                     [Op.or]: filter.sender
                       .split('|')
                       .map((term) => ({ [Op.iLike]: `%${term}%` })),
@@ -219,7 +219,7 @@ module.exports = class MessagesDBApi {
                   },
                 },
                 {
-                  firstName: {
+                  id: {
                     [Op.or]: filter.receiver
                       .split('|')
                       .map((term) => ({ [Op.iLike]: `%${term}%` })),

backend/src/db/api/posts.js

@@ -171,7 +171,7 @@ module.exports = class PostsDBApi {
                   },
                 },
                 {
-                  firstName: {
+                  id: {
                     [Op.or]: filter.user
                       .split('|')
                       .map((term) => ({ [Op.iLike]: `%${term}%` })),

backend/src/db/api/profiles.js

@@ -189,7 +189,7 @@ module.exports = class ProfilesDBApi {
                   },
                 },
                 {
-                  firstName: {
+                  id: {
                     [Op.or]: filter.user
                       .split('|')
                       .map((term) => ({ [Op.iLike]: `%${term}%` })),

backend/src/db/api/users.js

@@ -602,22 +602,22 @@ module.exports = class UsersDBApi {
       where = {
         [Op.or]: [
           { ['id']: Utils.uuid(query) },
-          Utils.ilike('users', 'firstName', query),
+          Utils.ilike('users', 'id', query),
         ],
       };
     }
 
     const records = await db.users.findAll({
-      attributes: ['id', 'firstName'],
+      attributes: ['id', 'id'],
       where,
       limit: limit ? Number(limit) : undefined,
       offset: offset ? Number(offset) : undefined,
-      orderBy: [['firstName', 'ASC']],
+      orderBy: [['id', 'ASC']],
     });
 
     return records.map((record) => ({
       id: record.id,
-      label: record.firstName,
+      label: record.id,
     }));
   }
 

backend/src/db/migrations/1753789251349.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/seeders/20231127130745-sample-data.js

@@ -35,6 +35,14 @@ const AnalyticsData = [
 
     engagements: 100,
   },
+
+  {
+    // type code here for "relation_one" field
+
+    profile_views: 180,
+
+    engagements: 90,
+  },
 ];
 
 const FollowersData = [
@@ -52,6 +60,11 @@ const FollowersData = [
     // type code here for "relation_one" field
     // type code here for "relation_one" field
   },
+
+  {
+    // type code here for "relation_one" field
+    // type code here for "relation_one" field
+  },
 ];
 
 const MessagesData = [
@@ -84,6 +97,16 @@ const MessagesData = [
 
     sent_at: new Date('2023-10-03T15:00:00Z'),
   },
+
+  {
+    // type code here for "relation_one" field
+
+    // type code here for "relation_one" field
+
+    content: 'Welcome to the platform!',
+
+    sent_at: new Date('2023-10-04T17:00:00Z'),
+  },
 ];
 
 const PostsData = [
@@ -104,6 +127,12 @@ const PostsData = [
 
     content: 'Looking for talented developers for our team.',
   },
+
+  {
+    // type code here for "relation_one" field
+
+    content: 'Check out my latest web design project.',
+  },
 ];
 
 const ProfilesData = [
@@ -142,6 +171,18 @@ const ProfilesData = [
 
     future_goals: 'Expand company reach',
   },
+
+  {
+    // type code here for "relation_one" field
+
+    current_work_status: 'Freelancing in web design',
+
+    years_of_experience: 7,
+
+    achievements: 'Designed 30+ websites',
+
+    future_goals: 'Start a design agency',
+  },
 ];
 
 // Similar logic for "relation_many"
@@ -179,6 +220,17 @@ async function associateAnalyticWithUser() {
   if (Analytic2?.setUser) {
     await Analytic2.setUser(relatedUser2);
   }
+
+  const relatedUser3 = await Users.findOne({
+    offset: Math.floor(Math.random() * (await Users.count())),
+  });
+  const Analytic3 = await Analytics.findOne({
+    order: [['id', 'ASC']],
+    offset: 3,
+  });
+  if (Analytic3?.setUser) {
+    await Analytic3.setUser(relatedUser3);
+  }
 }
 
 async function associateFollowerWithFollower() {
@@ -214,6 +266,17 @@ async function associateFollowerWithFollower() {
   if (Follower2?.setFollower) {
     await Follower2.setFollower(relatedFollower2);
   }
+
+  const relatedFollower3 = await Users.findOne({
+    offset: Math.floor(Math.random() * (await Users.count())),
+  });
+  const Follower3 = await Followers.findOne({
+    order: [['id', 'ASC']],
+    offset: 3,
+  });
+  if (Follower3?.setFollower) {
+    await Follower3.setFollower(relatedFollower3);
+  }
 }
 
 async function associateFollowerWithFollowing() {
@@ -249,6 +312,17 @@ async function associateFollowerWithFollowing() {
   if (Follower2?.setFollowing) {
     await Follower2.setFollowing(relatedFollowing2);
   }
+
+  const relatedFollowing3 = await Users.findOne({
+    offset: Math.floor(Math.random() * (await Users.count())),
+  });
+  const Follower3 = await Followers.findOne({
+    order: [['id', 'ASC']],
+    offset: 3,
+  });
+  if (Follower3?.setFollowing) {
+    await Follower3.setFollowing(relatedFollowing3);
+  }
 }
 
 async function associateMessageWithSender() {
@@ -284,6 +358,17 @@ async function associateMessageWithSender() {
   if (Message2?.setSender) {
     await Message2.setSender(relatedSender2);
   }
+
+  const relatedSender3 = await Users.findOne({
+    offset: Math.floor(Math.random() * (await Users.count())),
+  });
+  const Message3 = await Messages.findOne({
+    order: [['id', 'ASC']],
+    offset: 3,
+  });
+  if (Message3?.setSender) {
+    await Message3.setSender(relatedSender3);
+  }
 }
 
 async function associateMessageWithReceiver() {
@@ -319,6 +404,17 @@ async function associateMessageWithReceiver() {
   if (Message2?.setReceiver) {
     await Message2.setReceiver(relatedReceiver2);
   }
+
+  const relatedReceiver3 = await Users.findOne({
+    offset: Math.floor(Math.random() * (await Users.count())),
+  });
+  const Message3 = await Messages.findOne({
+    order: [['id', 'ASC']],
+    offset: 3,
+  });
+  if (Message3?.setReceiver) {
+    await Message3.setReceiver(relatedReceiver3);
+  }
 }
 
 async function associatePostWithUser() {
@@ -354,6 +450,17 @@ async function associatePostWithUser() {
   if (Post2?.setUser) {
     await Post2.setUser(relatedUser2);
   }
+
+  const relatedUser3 = await Users.findOne({
+    offset: Math.floor(Math.random() * (await Users.count())),
+  });
+  const Post3 = await Posts.findOne({
+    order: [['id', 'ASC']],
+    offset: 3,
+  });
+  if (Post3?.setUser) {
+    await Post3.setUser(relatedUser3);
+  }
 }
 
 async function associateProfileWithUser() {
@@ -389,6 +496,17 @@ async function associateProfileWithUser() {
   if (Profile2?.setUser) {
     await Profile2.setUser(relatedUser2);
   }
+
+  const relatedUser3 = await Users.findOne({
+    offset: Math.floor(Math.random() * (await Users.count())),
+  });
+  const Profile3 = await Profiles.findOne({
+    order: [['id', 'ASC']],
+    offset: 3,
+  });
+  if (Profile3?.setUser) {
+    await Profile3.setUser(relatedUser3);
+  }
 }
 
 module.exports = {

frontend/src/components/Users/CardUsers.tsx

@@ -68,7 +68,7 @@ const CardUsers = ({
                     className='w-12 h-12 md:w-full md:h-44 rounded-lg md:rounded-b-none overflow-hidden ring-1 ring-gray-900/10'
                     imageClassName='h-full w-full flex-none rounded-lg md:rounded-b-none bg-white object-cover'
                   />
-                  <p className={'px-6 py-2 font-semibold'}>{item.firstName}</p>
+                  <p className={'px-6 py-2 font-semibold'}>{item.id}</p>
                 </Link>
 
                 <div className='ml-auto  md:absolute md:top-0 md:right-0 '>

frontend/src/components/Users/TableUsers.tsx

@@ -464,6 +464,8 @@ const TableSampleUsers = ({
 
       {dataGrid}
 
+      {showGrid && dataGrid}
+
       {selectedRows.length > 0 &&
         createPortal(
           <BaseButton

frontend/src/components/WebPageComponents/Footer.tsx

@@ -19,7 +19,7 @@ export default function WebSiteFooter({ projectName }: WebSiteFooterProps) {
 
   const style = FooterStyle.WITH_PAGES;
 
-  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.DEFAULT_DESIGN;
+  const design = HeaderDesigns.DESIGN_DIVERSITY;
   return (
     <header id='websiteHeader' className='overflow-hidden'>
       <div

frontend/src/helpers/dataFormatter.js

@@ -41,21 +41,21 @@ export default {
 
   usersManyListFormatter(val) {
     if (!val || !val.length) return [];
-    return val.map((item) => item.firstName);
+    return val.map((item) => item.id);
   },
   usersOneListFormatter(val) {
     if (!val) return '';
-    return val.firstName;
+    return val.id;
   },
   usersManyListFormatterEdit(val) {
     if (!val || !val.length) return [];
     return val.map((item) => {
-      return { id: item.id, label: item.firstName };
+      return { id: item.id, label: item.id };
     });
   },
   usersOneListFormatterEdit(val) {
     if (!val) return '';
-    return { label: val.firstName, id: val.id };
+    return { label: val.id, id: val.id };
   },
 
   rolesManyListFormatter(val) {

frontend/src/pages/analytics/[analyticsId].tsx

@@ -102,7 +102,7 @@ const EditAnalytics = () => {
                   component={SelectField}
                   options={initialValues.user}
                   itemRef={'users'}
-                  showField={'firstName'}
+                  showField={'id'}
                 ></Field>
               </FormField>
 

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

@@ -100,7 +100,7 @@ const EditAnalyticsPage = () => {
                   component={SelectField}
                   options={initialValues.user}
                   itemRef={'users'}
-                  showField={'firstName'}
+                  showField={'id'}
                 ></Field>
               </FormField>
 

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

@@ -57,7 +57,7 @@ const AnalyticsView = () => {
           <div className={'mb-4'}>
             <p className={'block font-bold mb-2'}>User</p>
 
-            <p>{analytics?.user?.firstName ?? 'No data'}</p>
+            <p>{analytics?.user?.id ?? 'No data'}</p>
           </div>
 
           <div className={'mb-4'}>

frontend/src/pages/followers/[followersId].tsx

@@ -100,7 +100,7 @@ const EditFollowers = () => {
                   component={SelectField}
                   options={initialValues.follower}
                   itemRef={'users'}
-                  showField={'firstName'}
+                  showField={'id'}
                 ></Field>
               </FormField>
 
@@ -111,7 +111,7 @@ const EditFollowers = () => {
                   component={SelectField}
                   options={initialValues.following}
                   itemRef={'users'}
-                  showField={'firstName'}
+                  showField={'id'}
                 ></Field>
               </FormField>
 

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

@@ -98,7 +98,7 @@ const EditFollowersPage = () => {
                   component={SelectField}
                   options={initialValues.follower}
                   itemRef={'users'}
-                  showField={'firstName'}
+                  showField={'id'}
                 ></Field>
               </FormField>
 
@@ -109,7 +109,7 @@ const EditFollowersPage = () => {
                   component={SelectField}
                   options={initialValues.following}
                   itemRef={'users'}
-                  showField={'firstName'}
+                  showField={'id'}
                 ></Field>
               </FormField>
 

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

@@ -57,13 +57,13 @@ const FollowersView = () => {
           <div className={'mb-4'}>
             <p className={'block font-bold mb-2'}>Follower</p>
 
-            <p>{followers?.follower?.firstName ?? 'No data'}</p>
+            <p>{followers?.follower?.id ?? 'No data'}</p>
           </div>
 
           <div className={'mb-4'}>
             <p className={'block font-bold mb-2'}>Following</p>
 
-            <p>{followers?.following?.firstName ?? 'No data'}</p>
+            <p>{followers?.following?.id ?? 'No data'}</p>
           </div>
 
           <BaseDivider />

frontend/src/pages/messages/[messagesId].tsx

@@ -102,7 +102,7 @@ const EditMessages = () => {
                   component={SelectField}
                   options={initialValues.sender}
                   itemRef={'users'}
-                  showField={'firstName'}
+                  showField={'id'}
                 ></Field>
               </FormField>
 
@@ -113,7 +113,7 @@ const EditMessages = () => {
                   component={SelectField}
                   options={initialValues.receiver}
                   itemRef={'users'}
-                  showField={'firstName'}
+                  showField={'id'}
                 ></Field>
               </FormField>
 

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

@@ -100,7 +100,7 @@ const EditMessagesPage = () => {
                   component={SelectField}
                   options={initialValues.sender}
                   itemRef={'users'}
-                  showField={'firstName'}
+                  showField={'id'}
                 ></Field>
               </FormField>
 
@@ -111,7 +111,7 @@ const EditMessagesPage = () => {
                   component={SelectField}
                   options={initialValues.receiver}
                   itemRef={'users'}
-                  showField={'firstName'}
+                  showField={'id'}
                 ></Field>
               </FormField>
 

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

@@ -57,13 +57,13 @@ const MessagesView = () => {
           <div className={'mb-4'}>
             <p className={'block font-bold mb-2'}>Sender</p>
 
-            <p>{messages?.sender?.firstName ?? 'No data'}</p>
+            <p>{messages?.sender?.id ?? 'No data'}</p>
           </div>
 
           <div className={'mb-4'}>
             <p className={'block font-bold mb-2'}>Receiver</p>
 
-            <p>{messages?.receiver?.firstName ?? 'No data'}</p>
+            <p>{messages?.receiver?.id ?? 'No data'}</p>
           </div>
 
           <FormField label='Multi Text' hasTextareaHeight>

frontend/src/pages/posts/[postsId].tsx

@@ -98,7 +98,7 @@ const EditPosts = () => {
                   component={SelectField}
                   options={initialValues.user}
                   itemRef={'users'}
-                  showField={'firstName'}
+                  showField={'id'}
                 ></Field>
               </FormField>
 

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

@@ -96,7 +96,7 @@ const EditPostsPage = () => {
                   component={SelectField}
                   options={initialValues.user}
                   itemRef={'users'}
-                  showField={'firstName'}
+                  showField={'id'}
                 ></Field>
               </FormField>
 

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

@@ -57,7 +57,7 @@ const PostsView = () => {
           <div className={'mb-4'}>
             <p className={'block font-bold mb-2'}>User</p>
 
-            <p>{posts?.user?.firstName ?? 'No data'}</p>
+            <p>{posts?.user?.id ?? 'No data'}</p>
           </div>
 
           <FormField label='Multi Text' hasTextareaHeight>

frontend/src/pages/profiles/[profilesId].tsx

@@ -104,7 +104,7 @@ const EditProfiles = () => {
                   component={SelectField}
                   options={initialValues.user}
                   itemRef={'users'}
-                  showField={'firstName'}
+                  showField={'id'}
                 ></Field>
               </FormField>
 

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

@@ -102,7 +102,7 @@ const EditProfilesPage = () => {
                   component={SelectField}
                   options={initialValues.user}
                   itemRef={'users'}
-                  showField={'firstName'}
+                  showField={'id'}
                 ></Field>
               </FormField>
 

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

@@ -57,7 +57,7 @@ const ProfilesView = () => {
           <div className={'mb-4'}>
             <p className={'block font-bold mb-2'}>User</p>
 
-            <p>{profiles?.user?.firstName ?? 'No data'}</p>
+            <p>{profiles?.user?.id ?? 'No data'}</p>
           </div>
 
           <FormField label='Multi Text' hasTextareaHeight>

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

@@ -134,6 +134,10 @@ const UsersTablesPage = () => {
           <div className='md:inline-flex items-center ms-auto'>
             <div id='delete-rows-button'></div>
           </div>
+
+          <div className='md:inline-flex items-center ms-auto'>
+            <Link href={'/users/users-table'}>Switch to Table</Link>
+          </div>
         </CardBox>
 
         <CardBox className='mb-6' hasTable>

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

@@ -129,6 +129,10 @@ const UsersTablesPage = () => {
 
           <div className='md:inline-flex items-center ms-auto'>
             <div id='delete-rows-button'></div>
+
+            <Link href={'/users/users-list'}>
+              Back to <span className='capitalize'></span>
+            </Link>
           </div>
         </CardBox>
         <CardBox className='mb-6' hasTable>