frontend/src/components/NavBarItem.tsx

@@ -1,5 +1,6 @@
-import React, {useEffect, useRef, useState} from 'react'
+import React, {useEffect, useRef} from 'react'
 import Link from 'next/link'
+import { useState } from 'react'
 import { mdiChevronUp, mdiChevronDown } from '@mdi/js'
 import BaseDivider from './BaseDivider'
 import BaseIcon from './BaseIcon'
@@ -128,4 +129,4 @@ export default function NavBarItem({ item }: Props) {
   }
 
   return <div className={componentClass} ref={excludedRef}>{NavBarItemComponentContents}</div>
-}
+}

frontend/src/config.ts

@@ -8,8 +8,8 @@ export const localStorageStyleKey = 'style'
 
 export const containerMaxW = 'xl:max-w-full xl:mx-auto 2xl:mx-20'
 
-export const appTitle = 'The Power Suite Executive Directory'
+export const appTitle = 'created by Flatlogic generator!'
 
 export const getPageTitle = (currentPageTitle: string) => `${currentPageTitle} — ${appTitle}`
 
-export const tinyKey = process.env.NEXT_PUBLIC_TINY_KEY || ''
+export const tinyKey = process.env.NEXT_PUBLIC_TINY_KEY || ''

frontend/src/layouts/Authenticated.tsx

@@ -1,4 +1,5 @@
-import React, { ReactNode, useEffect, useState } from 'react'
+import React, { ReactNode, useEffect } from 'react'
+import { useState } from 'react'
 import jwt from 'jsonwebtoken';
 import { mdiForwardburger, mdiBackburger, mdiMenu } from '@mdi/js'
 import menuAside from '../menuAside'
@@ -62,19 +63,6 @@ export default function LayoutAuthenticated({
 
     if (!hasPermission(currentUser, permission)) router.push('/error');
   }, [currentUser, permission]);
-
-  // Mandatory Opt-In Gating
-  useEffect(() => {
-    if (!currentUser) return;
-    
-    const memberProfile = currentUser?.member_profiles_user?.[0] || currentUser?.member_profiles_user;
-    const isOptInPage = router.pathname === '/profile/opt-in';
-    
-    // If user is a member but hasn't consented, redirect to opt-in
-    if (memberProfile && !memberProfile.directory_consent && !isOptInPage) {
-      router.push('/profile/opt-in');
-    }
-  }, [currentUser, router.pathname]);
   
 
   const darkMode = useAppSelector((state) => state.style.darkMode)
@@ -134,7 +122,7 @@ export default function LayoutAuthenticated({
           onAsideLgClose={() => setIsAsideLgActive(false)}
         />
         {children}
-        <FooterBar>Power Suite Executive Directory © 2026</FooterBar>
+        <FooterBar>Hand-crafted & Made with ❤️</FooterBar>
       </div>
     </div>
   )

frontend/src/menuAside.ts

@@ -3,70 +3,89 @@ import { MenuAsideItem } from './interfaces'
 
 const menuAside: MenuAsideItem[] = [
   {
-    href: '/',
-    icon: icon.mdiHomeOutline,
-    label: 'Home',
+    href: '/dashboard',
+    icon: icon.mdiViewDashboardOutline,
+    label: 'Dashboard',
+  },
+  
+  {
+    href: '/users/users-list',
+    label: 'Users',
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    icon: icon.mdiAccountGroup ?? icon.mdiTable,
+    permissions: 'READ_USERS'
+  },
+  {
+    href: '/roles/roles-list',
+    label: 'Roles',
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    icon: icon.mdiShieldAccountVariantOutline ?? icon.mdiTable,
+    permissions: 'READ_ROLES'
+  },
+  {
+    href: '/permissions/permissions-list',
+    label: 'Permissions',
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    icon: icon.mdiShieldAccountOutline ?? icon.mdiTable,
+    permissions: 'READ_PERMISSIONS'
   },
   {
     href: '/member_profiles/member_profiles-list',
-    label: 'Executive Directory',
+    label: 'Member profiles',
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
-    icon: icon.mdiCardAccountDetailsOutline ?? icon.mdiTable,
+    icon: 'mdiBadgeAccountOutline' in icon ? icon['mdiBadgeAccountOutline' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
     permissions: 'READ_MEMBER_PROFILES'
   },
   {
-    href: '/profile',
-    label: 'My Profile',
-    icon: icon.mdiAccountCircle,
+    href: '/expertise_areas/expertise_areas-list',
+    label: 'Expertise areas',
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    icon: 'mdiLightbulbOnOutline' in icon ? icon['mdiLightbulbOnOutline' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
+    permissions: 'READ_EXPERTISE_AREAS'
   },
   {
-    label: 'Administration',
-    icon: icon.mdiShieldEditOutline,
-    permissions: 'READ_USERS', // Only show to users who can read users (Admins)
-    menu: [
-      {
-        href: '/dashboard',
-        icon: icon.mdiChartTimelineVariant,
-        label: 'Analytics',
-      },
-      {
-        href: '/users/users-list',
-        label: 'Member Accounts',
-        icon: icon.mdiAccountGroup,
-      },
-      {
-        href: '/member_import_batches/member_import_batches-list',
-        label: 'CSV Imports',
-        icon: icon.mdiFileUploadOutline,
-      },
-      {
-        href: '/expertise_areas/expertise_areas-list',
-        label: 'Expertise Areas',
-        icon: icon.mdiLightbulbOnOutline,
-      },
-      {
-        href: '/email_reminders/email_reminders-list',
-        label: 'System Emails',
-        icon: icon.mdiEmailOutline,
-      },
-      {
-        href: '/audit_events/audit_events-list',
-        label: 'Audit Log',
-        icon: icon.mdiClipboardTextOutline,
-      },
-      {
-        href: '/roles/roles-list',
-        label: 'Roles',
-        icon: icon.mdiShieldAccountVariantOutline,
-      },
-      {
-        href: '/permissions/permissions-list',
-        label: 'Permissions',
-        icon: icon.mdiShieldAccountOutline,
-      },
-    ]
+    href: '/member_import_batches/member_import_batches-list',
+    label: 'Member import batches',
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    icon: 'mdiFileUploadOutline' in icon ? icon['mdiFileUploadOutline' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
+    permissions: 'READ_MEMBER_IMPORT_BATCHES'
+  },
+  {
+    href: '/email_reminders/email_reminders-list',
+    label: 'Email reminders',
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    icon: 'mdiEmailOutline' in icon ? icon['mdiEmailOutline' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
+    permissions: 'READ_EMAIL_REMINDERS'
+  },
+  {
+    href: '/audit_events/audit_events-list',
+    label: 'Audit events',
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    icon: 'mdiClipboardTextOutline' in icon ? icon['mdiClipboardTextOutline' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
+    permissions: 'READ_AUDIT_EVENTS'
+  },
+  {
+    href: '/profile',
+    label: 'Profile',
+    icon: icon.mdiAccountCircle,
+  },
+
+ 
+  {
+    href: '/api-docs',
+    target: '_blank',
+    label: 'Swagger API',
+    icon: icon.mdiFileCode,
+    permissions: 'READ_API_DOCS'
   },
 ]
 
-export default menuAside
+export default menuAside

frontend/src/pages/index.tsx

@@ -1,101 +1,166 @@
-import React, { ReactElement, useEffect } from 'react';
+
+import React, { useEffect, useState } from 'react';
+import type { ReactElement } from 'react';
 import Head from 'next/head';
 import Link from 'next/link';
-import { useRouter } from 'next/router';
-import { useAppSelector, useAppDispatch } from '../stores/hooks';
-import LayoutGuest from '../layouts/Guest';
-import { getPageTitle } from '../config';
 import BaseButton from '../components/BaseButton';
-import { logoutUser, findMe } from '../stores/authSlice';
+import CardBox from '../components/CardBox';
+import SectionFullScreen from '../components/SectionFullScreen';
+import LayoutGuest from '../layouts/Guest';
+import BaseDivider from '../components/BaseDivider';
+import BaseButtons from '../components/BaseButtons';
+import { getPageTitle } from '../config';
+import { useAppSelector } from '../stores/hooks';
+import CardBoxComponentTitle from "../components/CardBoxComponentTitle";
+import { getPexelsImage, getPexelsVideo } from '../helpers/pexels';
+
 
 export default function Starter() {
-  const router = useRouter();
-  const dispatch = useAppDispatch();
-  const { currentUser, token } = useAppSelector((state) => state.auth);
-  
-  // Hydrate auth state if token exists but currentUser doesn't
-  useEffect(() => {
-    if (token && !currentUser) {
-      dispatch(findMe());
-    }
-  }, [token, currentUser, dispatch]);
+    const [illustrationImage, setIllustrationImage] = useState({
+        src: undefined,
+        photographer: undefined,
+        photographer_url: undefined,
+    })
+    const [illustrationVideo, setIllustrationVideo] = useState({video_files: []})
+    const [contentType, setContentType] = useState('image');
+    const [contentPosition, setContentPosition] = useState('background');
+    const textColor = useAppSelector((state) => state.style.linkColor);
 
-  const handleLogout = () => {
-    dispatch(logoutUser());
-    router.push('/login');
-  };
+    const title = 'Power Suite Executive Directory'
 
-  // If not authenticated, show a minimal landing with Login CTA
-  if (!token) {
-    return (
-      <div className="min-h-screen flex flex-col items-center justify-center bg-white px-4">
-        <Head>
-          <title>{getPageTitle('The Power Suite')}</title>
-        </Head>
-        <div className="max-w-2xl w-full text-center space-y-8">
-          <h1 className="text-4xl md:text-5xl font-bold text-[#091EAA] tracking-tight">
-            Zetas in Corporate America: The Power Suite
-          </h1>
-          <p className="text-xl text-gray-600 font-light">
-            A private executive directory connecting Power Suite members across industries, regions, and leadership levels.
-          </p>
-          <div className="pt-8">
-            <BaseButton
-              href="/login"
-              label="Login to Access"
-              color="info"
-              className="px-12 py-3 text-lg rounded-none bg-[#091EAA] hover:bg-[#0055AA] border-none shadow-lg"
-            />
-          </div>
+    // Fetch Pexels image/video
+    useEffect(() => {
+        async function fetchData() {
+            const image = await getPexelsImage();
+            const video = await getPexelsVideo();
+            setIllustrationImage(image);
+            setIllustrationVideo(video);
+        }
+        fetchData();
+    }, []);
+
+    const imageBlock = (image) => (
+        <div
+            className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'
+            style={{
+                backgroundImage: `${
+                    image
+                        ? `url(${image?.src?.original})`
+                        : 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
+                }`,
+                backgroundSize: 'cover',
+                backgroundPosition: 'left center',
+                backgroundRepeat: 'no-repeat',
+            }}
+        >
+            <div className='flex justify-center w-full bg-blue-300/20'>
+                <a
+                    className='text-[8px]'
+                    href={image?.photographer_url}
+                    target='_blank'
+                    rel='noreferrer'
+                >
+                    Photo by {image?.photographer} on Pexels
+                </a>
+            </div>
         </div>
-      </div>
     );
-  }
 
-  // Option C Landing Page for Authenticated Users
+    const videoBlock = (video) => {
+        if (video?.video_files?.length > 0) {
+            return (
+                <div className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'>
+                    <video
+                        className='absolute top-0 left-0 w-full h-full object-cover'
+                        autoPlay
+                        loop
+                        muted
+                    >
+                        <source src={video?.video_files[0]?.link} type='video/mp4'/>
+                        Your browser does not support the video tag.
+                    </video>
+                    <div className='flex justify-center w-full bg-blue-300/20 z-10'>
+                        <a
+                            className='text-[8px]'
+                            href={video?.user?.url}
+                            target='_blank'
+                            rel='noreferrer'
+                        >
+                            Video by {video.user.name} on Pexels
+                        </a>
+                    </div>
+                </div>)
+        }
+    };
+
   return (
-    <div className="min-h-screen flex flex-col items-center justify-center bg-white px-4">
+      <div
+          style={
+              contentPosition === 'background'
+                  ? {
+                      backgroundImage: `${
+                          illustrationImage
+                              ? `url(${illustrationImage.src?.original})`
+                              : 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
+                      }`,
+                      backgroundSize: 'cover',
+                      backgroundPosition: 'left center',
+                      backgroundRepeat: 'no-repeat',
+                  }
+                  : {}
+          }
+      >
       <Head>
-        <title>{getPageTitle('Home')}</title>
+        <title>{getPageTitle('Starter Page')}</title>
       </Head>
-      <div className="max-w-3xl w-full text-center space-y-12">
-        <div className="space-y-4">
-          <h1 className="text-4xl md:text-6xl font-bold text-[#091EAA] tracking-tight">
-            Zetas in Corporate America: The Power Suite
-          </h1>
-          <p className="text-xl md:text-2xl text-gray-600 font-light max-w-2xl mx-auto">
-            A private executive directory connecting Power Suite members across industries, regions, and leadership levels.
-          </p>
-        </div>
 
-        <div className="flex flex-col items-center space-y-6 pt-4">
-          <Link 
-            href="/member_profiles/member_profiles-list"
-            className="px-16 py-4 text-xl font-bold text-white rounded-none bg-[#091EAA] hover:bg-[#0055AA] border-none shadow-xl transition-all inline-block"
-          >
-            Enter Executive Directory
-          </Link>
-          
-          <div className="flex flex-wrap justify-center gap-x-8 gap-y-4 pt-4 text-gray-500 font-medium uppercase tracking-widest text-xs">
-            <Link href="/profile" className="hover:text-[#091EAA] transition-colors">
-              Update My Profile
-            </Link>
-            <Link href="/profile/reconfirm" className="hover:text-[#091EAA] transition-colors">
-              Reconfirm My Profile
-            </Link>
-            <button 
-              onClick={handleLogout}
-              className="hover:text-red-600 transition-colors uppercase tracking-widest text-xs font-medium"
-            >
-              Log Out
-            </button>
-          </div>
+      <SectionFullScreen bg='violet'>
+      <div
+          className={`flex ${
+              contentPosition === 'right' ? 'flex-row-reverse' : 'flex-row'
+          } min-h-screen w-full`}
+      >
+          {contentType === 'image' && contentPosition !== 'background'
+              ? imageBlock(illustrationImage)
+              : null}
+          {contentType === 'video' && contentPosition !== 'background'
+              ? videoBlock(illustrationVideo)
+              : null}
+          <div className='flex items-center justify-center flex-col space-y-4 w-full lg:w-full'>
+        <CardBox className='w-full md:w-3/5 lg:w-2/3'>
+            <CardBoxComponentTitle title="Welcome to your Power Suite Executive Directory app!"/>
+        
+            <div className="space-y-3">
+                <p className='text-center text-gray-500'>This is a React.js/Node.js app generated by the <a className={`${textColor}`} href="https://flatlogic.com/generator">Flatlogic Web App Generator</a></p>
+                <p className='text-center text-gray-500'>For guides and documentation please check
+                    your local README.md and the <a className={`${textColor}`} href="https://flatlogic.com/documentation">Flatlogic documentation</a></p>
+            </div>
+        
+            <BaseButtons>
+                <BaseButton
+                    href='/login'
+                    label='Login'
+                    color='info'
+                    className='w-full'
+                />
+
+            </BaseButtons>
+        </CardBox>
         </div>
       </div>
+      </SectionFullScreen>
+      <div className='bg-black text-white flex flex-col text-center justify-center md:flex-row'>
+        <p className='py-6 text-sm'>© 2026 <span>{title}</span>. All rights reserved</p>
+        <Link className='py-6 ml-4 text-sm' href='/privacy-policy/'>
+            Privacy Policy
+        </Link>
+      </div>
+
     </div>
   );
 }
 
 Starter.getLayout = function getLayout(page: ReactElement) {
   return <LayoutGuest>{page}</LayoutGuest>;
-};
+};
+

frontend/src/pages/profile/opt-in.tsx

@@ -1,131 +0,0 @@
-import React, { ReactElement, useState, useEffect } from 'react';
-import Head from 'next/head';
-import { useRouter } from 'next/router';
-import { useAppDispatch, useAppSelector } from '../../stores/hooks';
-import LayoutAuthenticated from '../../layouts/Authenticated';
-import { getPageTitle } from '../../config';
-import CardBox from '../../components/CardBox';
-import SectionMain from '../../components/SectionMain';
-import BaseButton from '../../components/BaseButton';
-import { findMe } from '../../stores/authSlice';
-import axios from 'axios';
-import { toast } from 'react-toastify';
-
-export default function ProfileOptIn() {
-  const router = useRouter();
-  const dispatch = useAppDispatch();
-  const { currentUser } = useAppSelector((state) => state.auth);
-  const [consent, setConsent] = useState(false);
-  const [loading, setLoading] = useState(false);
-
-  // Get the member profile ID. It might be in member_profiles_user array or object depending on associations
-  const memberProfile = currentUser?.member_profiles_user?.[0] || currentUser?.member_profiles_user;
-  
-  useEffect(() => {
-    if (memberProfile?.directory_consent) {
-      router.push('/');
-    }
-  }, [memberProfile, router]);
-
-  const handleConsent = async () => {
-    if (!consent) {
-      toast.error('You must provide consent to proceed.');
-      return;
-    }
-
-    setLoading(true);
-    try {
-      if (memberProfile?.id) {
-        // Update existing member profile with consent
-        await axios.put(`/member_profiles/${memberProfile.id}`, {
-          id: memberProfile.id,
-          data: {
-            directory_consent: true,
-            consented_at: new Date(),
-            profile_status: 'draft' // Initial status after consent
-          }
-        });
-      } else {
-        // Create new member profile with consent
-        await axios.post(`/member_profiles`, {
-          data: {
-            user: currentUser.id,
-            directory_consent: true,
-            consented_at: new Date(),
-            profile_status: 'draft'
-          }
-        });
-      }
-      
-      await dispatch(findMe());
-      toast.success('Consent recorded. Welcome to the Directory!');
-      
-      // Redirect to the directory list
-      router.push('/member_profiles/member_profiles-list');
-    } catch (error) {
-      console.error(error);
-      toast.error('Failed to save consent. Please try again.');
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  return (
-    <>
-      <Head>
-        <title>{getPageTitle('Directory Consent')}</title>
-      </Head>
-      <SectionMain>
-        <div className="max-w-3xl mx-auto py-12">
-          <CardBox>
-            <div className="space-y-8 p-6">
-              <div className="text-center space-y-4">
-                <h1 className="text-3xl font-bold text-[#091EAA]">Private Directory Consent</h1>
-                <p className="text-gray-600">
-                  Welcome to Zetas in Corporate America: The Power Suite. To access and be visible in our private executive directory, we require your explicit consent.
-                </p>
-              </div>
-
-              <div className="bg-blue-50 p-6 border-l-4 border-[#091EAA] space-y-4 text-sm text-blue-900">
-                <p className="font-semibold uppercase tracking-wider">Mandatory Disclosure</p>
-                <p>
-                  I understand this directory is visible only to approved Power Suite members and I consent to having my professional information displayed.
-                </p>
-                <p>
-                  Your profile will remain in a &quot;Draft&quot; status and will not be searchable by other members until you complete all required fields, including your headshot and LinkedIn URL.
-                </p>
-              </div>
-
-              <div className="flex items-start space-x-3 pt-4">
-                <input
-                  id="consent-checkbox"
-                  type="checkbox"
-                  className="mt-1 h-5 w-5 text-[#091EAA] border-gray-300 rounded focus:ring-[#091EAA]"
-                  checked={consent}
-                  onChange={(e) => setConsent(e.target.checked)}
-                />
-                <label htmlFor="consent-checkbox" className="text-gray-700 font-medium cursor-pointer">
-                  I agree to the terms above and wish to opt-in to the Executive Directory.
-                </label>
-              </div>
-
-              <div className="pt-8 flex justify-center">
-                <BaseButton
-                  label={loading ? 'Processing...' : 'Proceed to Directory'}
-                  color="info"
-                  className="px-12 py-3 bg-[#091EAA] hover:bg-[#0055AA] border-none rounded-none text-lg shadow-lg"
-                  onClick={handleConsent}
-                  disabled={loading}
-                />
-              </div>
-            </div>
-          </CardBox>
-        </div>
-      </SectionMain>
-    </>
-  );
-}
-
-ProfileOptIn.getLayout = function getLayout(page: ReactElement) {
-  return <LayoutAuthenticated>{page}</LayoutAuthenticated>;
-};

frontend/src/stores/authSlice.ts

@@ -10,19 +10,12 @@ interface MainState {
   token: string;
 }
 
-const getInitialToken = () => {
-  if (typeof window !== 'undefined') {
-    return localStorage.getItem('token') || '';
-  }
-  return '';
-};
-
 const initialState: MainState = {
   /* User */
   isFetching: false,
   errorMessage: '',
   currentUser: null,
-  token: getInitialToken(),
+  token: '',
   notify: {
     showNotification: false,
     textNotification: '',
@@ -128,4 +121,4 @@ export const authSlice = createSlice({
 // Action creators are generated for each case reducer function
 export const { logoutUser } = authSlice.actions;
 
-export default authSlice.reducer;
+export default authSlice.reducer;