V1.1

frontend/src/components/NavBarItem.tsx

@@ -1,6 +1,5 @@
-import React, {useEffect, useRef} from 'react'
+import React, {useEffect, useRef, useState} 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'

frontend/src/config.ts

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

frontend/src/layouts/Authenticated.tsx

@@ -1,5 +1,4 @@
-import React, { ReactNode, useEffect } from 'react'
-import { useState } from 'react'
+import React, { ReactNode, useEffect, useState } from 'react'
 import jwt from 'jsonwebtoken';
 import { mdiForwardburger, mdiBackburger, mdiMenu } from '@mdi/js'
 import menuAside from '../menuAside'
@@ -64,6 +63,19 @@ 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)
 
@@ -122,7 +134,7 @@ export default function LayoutAuthenticated({
           onAsideLgClose={() => setIsAsideLgActive(false)}
         />
         {children}
-        <FooterBar>Hand-crafted & Made with ❤️</FooterBar>
+        <FooterBar>Power Suite Executive Directory © 2026</FooterBar>
       </div>
     </div>
   )

frontend/src/menuAside.ts

@@ -3,88 +3,69 @@ import { MenuAsideItem } from './interfaces'
 
 const menuAside: MenuAsideItem[] = [
   {
-    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: '/',
+    icon: icon.mdiHomeOutline,
+    label: 'Home',
   },
   {
     href: '/member_profiles/member_profiles-list',
-    label: 'Member profiles',
+    label: 'Executive Directory',
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
-    icon: 'mdiBadgeAccountOutline' in icon ? icon['mdiBadgeAccountOutline' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
+    icon: icon.mdiCardAccountDetailsOutline ?? icon.mdiTable,
     permissions: 'READ_MEMBER_PROFILES'
   },
-  {
-    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'
-  },
-  {
-    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',
+    label: 'My Profile',
     icon: icon.mdiAccountCircle,
   },
-
- 
   {
-    href: '/api-docs',
-    target: '_blank',
-    label: 'Swagger API',
-    icon: icon.mdiFileCode,
-    permissions: 'READ_API_DOCS'
+    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,
+      },
+    ]
   },
 ]
 

frontend/src/pages/index.tsx

@@ -1,161 +1,97 @@
-
-import React, { useEffect, useState } from 'react';
-import type { ReactElement } from 'react';
+import React, { ReactElement, useEffect } from 'react';
 import Head from 'next/head';
 import Link from 'next/link';
-import BaseButton from '../components/BaseButton';
-import CardBox from '../components/CardBox';
-import SectionFullScreen from '../components/SectionFullScreen';
+import { useRouter } from 'next/router';
+import { useAppSelector, useAppDispatch } from '../stores/hooks';
 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';
-
+import BaseButton from '../components/BaseButton';
+import { logoutUser, findMe } from '../stores/authSlice';
 
 export default function Starter() {
-    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 router = useRouter();
+  const dispatch = useAppDispatch();
+  const { currentUser, token } = useAppSelector((state) => state.auth);
   
-    const title = 'Power Suite Executive Directory'
+  // Hydrate auth state if token exists but currentUser doesn't
+  useEffect(() => {
+    if (token && !currentUser) {
+      dispatch(findMe());
+    }
+  }, [token, currentUser, dispatch]);
 
-    // Fetch Pexels image/video
-    useEffect(() => {
-        async function fetchData() {
-            const image = await getPexelsImage();
-            const video = await getPexelsVideo();
-            setIllustrationImage(image);
-            setIllustrationVideo(video);
-        }
-        fetchData();
-    }, []);
+  const handleLogout = () => {
+    dispatch(logoutUser());
+    router.push('/login');
+  };
 
-    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>
+  // 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>
         </div>
+      </div>
     );
+  }
 
-    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>)
-        }
-    };
-
+  // Option C Landing Page for Authenticated Users
   return (
-      <div
-          style={
-              contentPosition === 'background'
-                  ? {
-                      backgroundImage: `${
-                          illustrationImage
-                              ? `url(${illustrationImage.src?.original})`
-                              : 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
-                      }`,
-                      backgroundSize: 'cover',
-                      backgroundPosition: 'left center',
-                      backgroundRepeat: 'no-repeat',
-                  }
-                  : {}
-          }
-      >
+    <div className="min-h-screen flex flex-col items-center justify-center bg-white px-4">
       <Head>
-        <title>{getPageTitle('Starter Page')}</title>
+        <title>{getPageTitle('Home')}</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>
 
-      <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="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="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 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>
         </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>
   );
 }
@@ -163,4 +99,3 @@ export default function Starter() {
 Starter.getLayout = function getLayout(page: ReactElement) {
   return <LayoutGuest>{page}</LayoutGuest>;
 };
-

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

@@ -0,0 +1,131 @@
+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,12 +10,19 @@ 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: '',
+  token: getInitialToken(),
   notify: {
     showNotification: false,
     textNotification: '',