From 9fe34fe43d6bd7fd8fe448a9935f2af9a6d398ed Mon Sep 17 00:00:00 2001
From: TrivCodez <mopifyzai@gmail.com>
Date: Sun, 17 May 2026 08:06:26 +1000
Subject: [PATCH 01/14] feat: add page satisfaction feedback banner component

- Create PageSatisfactionBanner with thumbs up/down/comment icons
- Add feedback modals for positive/negative ratings with reason selection
- Implement API integration with feedbackService.submitFeedback
- Display dynamic page name based on current route
- Include dark mode support and responsive design

Closes #3480
---
 .../feedback/page-satisfaction-banner.tsx     | 260 ++++++++++++++++++
 1 file changed, 260 insertions(+)
 create mode 100644 src/vertex/components/features/feedback/page-satisfaction-banner.tsx

diff --git a/src/vertex/components/features/feedback/page-satisfaction-banner.tsx b/src/vertex/components/features/feedback/page-satisfaction-banner.tsx
new file mode 100644
index 0000000000..420f1c3c91
--- /dev/null
+++ b/src/vertex/components/features/feedback/page-satisfaction-banner.tsx
@@ -0,0 +1,260 @@
+'use client';
+
+import React, { useState } from 'react';
+import { ThumbsUp, ThumbsDown, MessageSquare } from 'lucide-react';
+import { openFeedbackDialog } from './feedback-dialog';
+import { feedbackService } from '@/core/apis/feedback';
+import { useUserContext } from '@/core/hooks/useUserContext';
+import { toast } from '@/components/shared/toast/ReusableToast';
+import ReusableDialog from '@/components/shared/dialog/ReusableDialog';
+import { getApiErrorMessage } from '@/core/utils/getApiErrorMessage';
+import { usePathname } from 'next/navigation';
+
+const NEGATIVE_REASONS = [
+  'Confusing',
+  'Not helpful',
+  'Missing features',
+  'Missing or limited data',
+  'I encountered technical issues',
+  'Other',
+];
+
+const POSITIVE_REASONS = [
+  'Informative',
+  'Actionable',
+  'Makes my job easier',
+  'Ease of use',
+  'Other',
+];
+
+interface FeedbackModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSubmit: (rating: number, reason: string, message: string) => Promise<void>;
+  isSubmitting: boolean;
+  type: 'positive' | 'negative';
+}
+
+const FeedbackModal: React.FC<FeedbackModalProps> = ({
+  isOpen,
+  onClose,
+  onSubmit,
+  isSubmitting,
+  type,
+}) => {
+  const [reason, setReason] = useState('');
+  const [message, setMessage] = useState('');
+
+  const reasons = type === 'positive' ? POSITIVE_REASONS : NEGATIVE_REASONS;
+
+  const handleSubmit = async () => {
+    if (!reason) {
+      toast.error('Please select a reason');
+      return;
+    }
+    await onSubmit(
+      type === 'positive' ? 5 : 1,
+      reason,
+      message
+    );
+    setReason('');
+    setMessage('');
+    onClose();
+  };
+
+  return (
+    <ReusableDialog
+      isOpen={isOpen}
+      onClose={() => {
+        setReason('');
+        setMessage('');
+        onClose();
+      }}
+      title="Why did you choose this rating?"
+      size="md"
+      showFooter
+      primaryAction={{
+        label: isSubmitting ? 'Sending...' : 'Submit',
+        onClick: handleSubmit,
+        disabled: isSubmitting || !reason,
+      }}
+      secondaryAction={{
+        label: 'Cancel',
+        onClick: () => {
+          setReason('');
+          setMessage('');
+          onClose();
+        },
+        disabled: isSubmitting,
+        variant: 'outline',
+      }}
+    >
+      <div className="flex flex-col gap-4 py-4">
+        <div className="space-y-2">
+          <label className="text-sm font-medium text-gray-700 dark:text-gray-200">
+            Select a reason
+          </label>
+          <div className="space-y-2">
+            {reasons.map((r) => (
+              <label
+                key={r}
+                className="flex items-center gap-2 cursor-pointer"
+              >
+                <input
+                  type="radio"
+                  name="reason"
+                  value={r}
+                  checked={reason === r}
+                  onChange={() => setReason(r)}
+                  className="h-4 w-4 text-primary"
+                />
+                <span className="text-sm text-gray-700 dark:text-gray-300">
+                  {r}
+                </span>
+              </label>
+            ))}
+          </div>
+        </div>
+
+        <div className="space-y-2">
+          <label
+            htmlFor="additional-feedback"
+            className="text-sm font-medium text-gray-700 dark:text-gray-200"
+          >
+            Any additional feedback about this recommendation you would like to share with us?
+          </label>
+          <textarea
+            id="additional-feedback"
+            value={message}
+            onChange={(e) => setMessage(e.target.value)}
+            rows={4}
+            placeholder="Your feedback helps us improve..."
+            className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary"
+          />
+        </div>
+      </div>
+    </ReusableDialog>
+  );
+};
+
+export const PageSatisfactionBanner: React.FC = () => {
+  const [modalType, setModalType] = useState<'positive' | 'negative' | null>(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const pathname = usePathname();
+  const { userDetails } = useUserContext();
+
+  const getPageName = () => {
+    if (!pathname) return 'this page';
+    const parts = pathname.split('/').filter(Boolean);
+    const lastPart = parts[parts.length - 1] || 'home';
+    return lastPart
+      .split('-')
+      .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+      .join(' ');
+  };
+
+  const handleSubmitFeedback = async (
+    rating: number,
+    reason: string,
+    message: string
+  ) => {
+    const userEmail = userDetails?.email || userDetails?.userName || '';
+
+    if (!userEmail) {
+      toast.error('Unable to identify your account. Please try again in a moment.');
+      return;
+    }
+
+    setIsSubmitting(true);
+
+    try {
+      const metadata = {
+        page: pathname || window.location.pathname,
+        reason,
+        browser:
+          typeof window !== 'undefined'
+            ? navigator.userAgent.slice(0, 80)
+            : 'Unknown',
+        appVersion: process.env.NEXT_PUBLIC_APP_VERSION || '1.0.0',
+      };
+
+      await feedbackService.submitFeedback({
+        email: userEmail,
+        subject: `Page Satisfaction: ${getPageName()}`,
+        message: message || `Rating: ${rating}/5, Reason: ${reason}`,
+        rating,
+        category: 'page_satisfaction',
+        platform: 'web',
+        app: 'vertex',
+        metadata,
+      });
+
+      toast.success('Thank you for your feedback!');
+    } catch (error) {
+      toast.error(
+        error instanceof Error
+          ? getApiErrorMessage(error)
+          : 'An error occurred while submitting feedback'
+      );
+    } finally {
+      setIsSubmitting(false);
+      setModalType(null);
+    }
+  };
+
+  return (
+    <>
+      <div className="w-full border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50 py-6 px-4 mt-8">
+        <div className="max-w-4xl mx-auto flex flex-col sm:flex-row items-center justify-between gap-4">
+          <div className="text-center sm:text-left">
+            <h3 className="text-sm font-medium text-gray-900 dark:text-white">
+              Overall, how satisfied are you with {getPageName()}?
+            </h3>
+          </div>
+
+          <div className="flex items-center gap-3">
+            <button
+              onClick={() => setModalType('positive')}
+              className="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
+              aria-label="Satisfied"
+            >
+              <ThumbsUp className="h-6 w-6 text-gray-600 dark:text-gray-300" />
+            </button>
+
+            <button
+              onClick={() => setModalType('negative')}
+              className="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
+              aria-label="Not satisfied"
+            >
+              <ThumbsDown className="h-6 w-6 text-gray-600 dark:text-gray-300" />
+            </button>
+
+            <button
+              onClick={openFeedbackDialog}
+              className="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
+              aria-label="Comment"
+            >
+              <MessageSquare className="h-6 w-6 text-gray-600 dark:text-gray-300" />
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <FeedbackModal
+        isOpen={modalType === 'positive'}
+        onClose={() => setModalType(null)}
+        onSubmit={handleSubmitFeedback}
+        isSubmitting={isSubmitting}
+        type="positive"
+      />
+
+      <FeedbackModal
+        isOpen={modalType === 'negative'}
+        onClose={() => setModalType(null)}
+        onSubmit={handleSubmitFeedback}
+        isSubmitting={isSubmitting}
+        type="negative"
+      />
+    </>
+  );
+};

From 0fdecc57728a6ff6962441eb7b7035a19a241bd9 Mon Sep 17 00:00:00 2001
From: TrivCodez <mopifyzai@gmail.com>
Date: Sun, 17 May 2026 08:31:22 +1000
Subject: [PATCH 02/14] fix: address CodeRabbit review comments

- Change onSubmit return type to Promise<boolean> to handle submission success/failure
- Only close modal and clear inputs on successful submission
- Keep modal open on failure to allow retry with existing input
- Fix textarea label from "this recommendation" to "this page" for clarity
- Remove setModalType(null) from finally block to prevent premature closure

Fixes code-review feedback from CodeRabbit
---
 .../features/feedback/page-satisfaction-banner.tsx | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/vertex/components/features/feedback/page-satisfaction-banner.tsx b/src/vertex/components/features/feedback/page-satisfaction-banner.tsx
index 420f1c3c91..b01fe5bc48 100644
--- a/src/vertex/components/features/feedback/page-satisfaction-banner.tsx
+++ b/src/vertex/components/features/feedback/page-satisfaction-banner.tsx
@@ -30,7 +30,7 @@ const POSITIVE_REASONS = [
 interface FeedbackModalProps {
   isOpen: boolean;
   onClose: () => void;
-  onSubmit: (rating: number, reason: string, message: string) => Promise<void>;
+  onSubmit: (rating: number, reason: string, message: string) => Promise<boolean>;
   isSubmitting: boolean;
   type: 'positive' | 'negative';
 }
@@ -52,11 +52,12 @@ const FeedbackModal: React.FC<FeedbackModalProps> = ({
       toast.error('Please select a reason');
       return;
     }
-    await onSubmit(
+    const submitted = await onSubmit(
       type === 'positive' ? 5 : 1,
       reason,
       message
     );
+    if (!submitted) return;
     setReason('');
     setMessage('');
     onClose();
@@ -121,7 +122,7 @@ const FeedbackModal: React.FC<FeedbackModalProps> = ({
             htmlFor="additional-feedback"
             className="text-sm font-medium text-gray-700 dark:text-gray-200"
           >
-            Any additional feedback about this recommendation you would like to share with us?
+            Any additional feedback about this page you would like to share with us?
           </label>
           <textarea
             id="additional-feedback"
@@ -157,12 +158,12 @@ export const PageSatisfactionBanner: React.FC = () => {
     rating: number,
     reason: string,
     message: string
-  ) => {
+  ): Promise<boolean> => {
     const userEmail = userDetails?.email || userDetails?.userName || '';
 
     if (!userEmail) {
       toast.error('Unable to identify your account. Please try again in a moment.');
-      return;
+      return false;
     }
 
     setIsSubmitting(true);
@@ -190,15 +191,16 @@ export const PageSatisfactionBanner: React.FC = () => {
       });
 
       toast.success('Thank you for your feedback!');
+      return true;
     } catch (error) {
       toast.error(
         error instanceof Error
           ? getApiErrorMessage(error)
           : 'An error occurred while submitting feedback'
       );
+      return false;
     } finally {
       setIsSubmitting(false);
-      setModalType(null);
     }
   };
 

From 4449add398baaab6d9e02363808e3d9be63c99a9 Mon Sep 17 00:00:00 2001
From: TrivCodez <mopifyzai@gmail.com>
Date: Sun, 17 May 2026 17:18:45 +1000
Subject: [PATCH 03/14] feat: integrate page satisfaction banner into
 authenticated layout

- Import PageSatisfactionBanner component from feedback module
- Render banner at bottom of main content area after children
- Banner now appears consistently on all authenticated Vertex pages
- Addresses issue #3480 acceptance criteria for banner placement
---
 src/vertex/app/(authenticated)/layout.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/vertex/app/(authenticated)/layout.tsx b/src/vertex/app/(authenticated)/layout.tsx
index bfbf2b05ff..244656335b 100644
--- a/src/vertex/app/(authenticated)/layout.tsx
+++ b/src/vertex/app/(authenticated)/layout.tsx
@@ -4,6 +4,7 @@ import Layout from "@/components/layout/layout";
 import { ForbiddenGuard } from "@/components/layout/accessConfig/forbidden-guard";
 import { useForbiddenHandler } from "@/core/hooks/useForbiddenHandler";
 import { useContextAwareRouting } from "@/core/hooks/useContextAwareRouting";
+import { PageSatisfactionBanner } from "@/components/features/feedback/page-satisfaction-banner";
 
 export default function AuthenticatedLayout({
   children,
@@ -20,6 +21,7 @@ export default function AuthenticatedLayout({
     <ForbiddenGuard>
       <Layout>
         {children}
+        <PageSatisfactionBanner />
       </Layout>
     </ForbiddenGuard>
   );

From e8a027cb74224caddf2a0063f2672d10d29eb8ff Mon Sep 17 00:00:00 2001
From: TrivCodez <mopifyzai@gmail.com>
Date: Sun, 17 May 2026 18:00:24 +1000
Subject: [PATCH 04/14] fix: address all PR feedback for page satisfaction
 banner

- Fix category field: changed from 'page_satisfaction' to 'other' to match API requirements (general, bug, feature_request, performance, ux_design, other)
- Replace textarea with ReusableInputField component for consistency with FeedbackLauncher
- Replace thumb buttons with ReusableButton component with text variant
- Fix banner positioning: removed horizontal padding (px-0) on outer container for full-width layout like Google Cloud example
- Updated inner container to use w-full with responsive padding (px-4 sm:px-6)
- Removed max-w-4xl constraint to allow banner to span full width
- Added proper spacing and alignment for Google Cloud-style layout
---
 .../feedback/page-satisfaction-banner.tsx     | 55 +++++++++----------
 1 file changed, 27 insertions(+), 28 deletions(-)

diff --git a/src/vertex/components/features/feedback/page-satisfaction-banner.tsx b/src/vertex/components/features/feedback/page-satisfaction-banner.tsx
index b01fe5bc48..4ad1882c5e 100644
--- a/src/vertex/components/features/feedback/page-satisfaction-banner.tsx
+++ b/src/vertex/components/features/feedback/page-satisfaction-banner.tsx
@@ -7,6 +7,8 @@ import { feedbackService } from '@/core/apis/feedback';
 import { useUserContext } from '@/core/hooks/useUserContext';
 import { toast } from '@/components/shared/toast/ReusableToast';
 import ReusableDialog from '@/components/shared/dialog/ReusableDialog';
+import ReusableInputField from '@/components/shared/inputfield/ReusableInputField';
+import ReusableButton from '@/components/shared/button/ReusableButton';
 import { getApiErrorMessage } from '@/core/utils/getApiErrorMessage';
 import { usePathname } from 'next/navigation';
 
@@ -117,22 +119,16 @@ const FeedbackModal: React.FC<FeedbackModalProps> = ({
           </div>
         </div>
 
-        <div className="space-y-2">
-          <label
-            htmlFor="additional-feedback"
-            className="text-sm font-medium text-gray-700 dark:text-gray-200"
-          >
-            Any additional feedback about this page you would like to share with us?
-          </label>
-          <textarea
-            id="additional-feedback"
-            value={message}
-            onChange={(e) => setMessage(e.target.value)}
-            rows={4}
-            placeholder="Your feedback helps us improve..."
-            className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary"
-          />
-        </div>
+        <ReusableInputField
+          as="textarea"
+          id="message"
+          label="Any additional feedback about this page you would like to share with us?"
+          value={message}
+          onChange={(event) => setMessage(event.target.value)}
+          placeholder="Your feedback helps us improve..."
+          rows={5}
+          description="Please don't include any sensitive information"
+        />
       </div>
     </ReusableDialog>
   );
@@ -184,7 +180,7 @@ export const PageSatisfactionBanner: React.FC = () => {
         subject: `Page Satisfaction: ${getPageName()}`,
         message: message || `Rating: ${rating}/5, Reason: ${reason}`,
         rating,
-        category: 'page_satisfaction',
+        category: 'other',
         platform: 'web',
         app: 'vertex',
         metadata,
@@ -206,8 +202,8 @@ export const PageSatisfactionBanner: React.FC = () => {
 
   return (
     <>
-      <div className="w-full border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50 py-6 px-4 mt-8">
-        <div className="max-w-4xl mx-auto flex flex-col sm:flex-row items-center justify-between gap-4">
+      <div className="w-full border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50 py-6 px-0 mt-8">
+        <div className="w-full flex flex-col sm:flex-row items-center justify-between gap-4 px-4 sm:px-6">
           <div className="text-center sm:text-left">
             <h3 className="text-sm font-medium text-gray-900 dark:text-white">
               Overall, how satisfied are you with {getPageName()}?
@@ -215,29 +211,32 @@ export const PageSatisfactionBanner: React.FC = () => {
           </div>
 
           <div className="flex items-center gap-3">
-            <button
+            <ReusableButton
+              variant="text"
               onClick={() => setModalType('positive')}
-              className="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
+              className="p-2 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
               aria-label="Satisfied"
             >
               <ThumbsUp className="h-6 w-6 text-gray-600 dark:text-gray-300" />
-            </button>
+            </ReusableButton>
 
-            <button
+            <ReusableButton
+              variant="text"
               onClick={() => setModalType('negative')}
-              className="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
+              className="p-2 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
               aria-label="Not satisfied"
             >
               <ThumbsDown className="h-6 w-6 text-gray-600 dark:text-gray-300" />
-            </button>
+            </ReusableButton>
 
-            <button
+            <ReusableButton
+              variant="text"
               onClick={openFeedbackDialog}
-              className="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
+              className="p-2 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
               aria-label="Comment"
             >
               <MessageSquare className="h-6 w-6 text-gray-600 dark:text-gray-300" />
-            </button>
+            </ReusableButton>
           </div>
         </div>
       </div>

From c89fd138897af06fd8dbc9a43381a10f8f656982 Mon Sep 17 00:00:00 2001
From: TrivCodez <mopifyzai@gmail.com>
Date: Sun, 17 May 2026 20:39:18 +1000
Subject: [PATCH 05/14] fix: replace toast with useBanner hook and fix banner
 positioning

- Replaced toast notifications with useBanner hook for consistent UX
- Fixed banner to stick to bottom of page with fixed positioning
- Removed horizontal spacing (px-0) for full-width banner
- Added fixed bottom-0 left-0 right-0 for sticky footer behavior
- Banner now displays success/error messages via banner component
---
 .../feedback/page-satisfaction-banner.tsx     | 436 +++++++++---------
 1 file changed, 222 insertions(+), 214 deletions(-)

diff --git a/src/vertex/components/features/feedback/page-satisfaction-banner.tsx b/src/vertex/components/features/feedback/page-satisfaction-banner.tsx
index 4ad1882c5e..3579677a4c 100644
--- a/src/vertex/components/features/feedback/page-satisfaction-banner.tsx
+++ b/src/vertex/components/features/feedback/page-satisfaction-banner.tsx
@@ -5,7 +5,7 @@ import { ThumbsUp, ThumbsDown, MessageSquare } from 'lucide-react';
 import { openFeedbackDialog } from './feedback-dialog';
 import { feedbackService } from '@/core/apis/feedback';
 import { useUserContext } from '@/core/hooks/useUserContext';
-import { toast } from '@/components/shared/toast/ReusableToast';
+import { useBanner } from '@/context/banner-context';
 import ReusableDialog from '@/components/shared/dialog/ReusableDialog';
 import ReusableInputField from '@/components/shared/inputfield/ReusableInputField';
 import ReusableButton from '@/components/shared/button/ReusableButton';
@@ -13,249 +13,257 @@ import { getApiErrorMessage } from '@/core/utils/getApiErrorMessage';
 import { usePathname } from 'next/navigation';
 
 const NEGATIVE_REASONS = [
-  'Confusing',
-  'Not helpful',
-  'Missing features',
-  'Missing or limited data',
-  'I encountered technical issues',
-  'Other',
+ 'Confusing',
+ 'Not helpful',
+ 'Missing features',
+ 'Missing or limited data',
+ 'I encountered technical issues',
+ 'Other',
 ];
 
 const POSITIVE_REASONS = [
-  'Informative',
-  'Actionable',
-  'Makes my job easier',
-  'Ease of use',
-  'Other',
+ 'Informative',
+ 'Actionable',
+ 'Makes my job easier',
+ 'Ease of use',
+ 'Other',
 ];
 
 interface FeedbackModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-  onSubmit: (rating: number, reason: string, message: string) => Promise<boolean>;
-  isSubmitting: boolean;
-  type: 'positive' | 'negative';
+ isOpen: boolean;
+ onClose: () => void;
+ onSubmit: (rating: number, reason: string, message: string) => Promise<boolean>;
+ isSubmitting: boolean;
+ type: 'positive' | 'negative';
 }
 
 const FeedbackModal: React.FC<FeedbackModalProps> = ({
-  isOpen,
-  onClose,
-  onSubmit,
-  isSubmitting,
-  type,
+ isOpen,
+ onClose,
+ onSubmit,
+ isSubmitting,
+ type,
 }) => {
-  const [reason, setReason] = useState('');
-  const [message, setMessage] = useState('');
+ const [reason, setReason] = useState('');
+ const [message, setMessage] = useState('');
 
-  const reasons = type === 'positive' ? POSITIVE_REASONS : NEGATIVE_REASONS;
+ const reasons = type === 'positive' ? POSITIVE_REASONS : NEGATIVE_REASONS;
 
-  const handleSubmit = async () => {
-    if (!reason) {
-      toast.error('Please select a reason');
-      return;
-    }
-    const submitted = await onSubmit(
-      type === 'positive' ? 5 : 1,
-      reason,
-      message
-    );
-    if (!submitted) return;
+ const handleSubmit = async () => {
+  if (!reason) {
+   return;
+  }
+  const submitted = await onSubmit(
+   type === 'positive' ? 5 : 1,
+   reason,
+   message
+  );
+  if (!submitted) return;
+  setReason('');
+  setMessage('');
+  onClose();
+ };
+
+ return (
+  <ReusableDialog
+   isOpen={isOpen}
+   onClose={() => {
     setReason('');
     setMessage('');
     onClose();
-  };
-
-  return (
-    <ReusableDialog
-      isOpen={isOpen}
-      onClose={() => {
-        setReason('');
-        setMessage('');
-        onClose();
-      }}
-      title="Why did you choose this rating?"
-      size="md"
-      showFooter
-      primaryAction={{
-        label: isSubmitting ? 'Sending...' : 'Submit',
-        onClick: handleSubmit,
-        disabled: isSubmitting || !reason,
-      }}
-      secondaryAction={{
-        label: 'Cancel',
-        onClick: () => {
-          setReason('');
-          setMessage('');
-          onClose();
-        },
-        disabled: isSubmitting,
-        variant: 'outline',
-      }}
-    >
-      <div className="flex flex-col gap-4 py-4">
-        <div className="space-y-2">
-          <label className="text-sm font-medium text-gray-700 dark:text-gray-200">
-            Select a reason
-          </label>
-          <div className="space-y-2">
-            {reasons.map((r) => (
-              <label
-                key={r}
-                className="flex items-center gap-2 cursor-pointer"
-              >
-                <input
-                  type="radio"
-                  name="reason"
-                  value={r}
-                  checked={reason === r}
-                  onChange={() => setReason(r)}
-                  className="h-4 w-4 text-primary"
-                />
-                <span className="text-sm text-gray-700 dark:text-gray-300">
-                  {r}
-                </span>
-              </label>
-            ))}
-          </div>
-        </div>
-
-        <ReusableInputField
-          as="textarea"
-          id="message"
-          label="Any additional feedback about this page you would like to share with us?"
-          value={message}
-          onChange={(event) => setMessage(event.target.value)}
-          placeholder="Your feedback helps us improve..."
-          rows={5}
-          description="Please don't include any sensitive information"
+   }}
+   title="Why did you choose this rating?"
+   size="md"
+   showFooter
+   primaryAction={{
+    label: isSubmitting ? 'Sending...' : 'Submit',
+    onClick: handleSubmit,
+    disabled: isSubmitting || !reason,
+   }}
+   secondaryAction={{
+    label: 'Cancel',
+    onClick: () => {
+     setReason('');
+     setMessage('');
+     onClose();
+    },
+    disabled: isSubmitting,
+    variant: 'outline',
+   }}
+  >
+   <div className="flex flex-col gap-4 py-4">
+    <div className="space-y-2">
+     <label className="text-sm font-medium text-gray-700 dark:text-gray-200">
+      Select a reason
+     </label>
+     <div className="space-y-2">
+      {reasons.map((r) => (
+       <label
+        key={r}
+        className="flex items-center gap-2 cursor-pointer"
+       >
+        <input
+         type="radio"
+         name="reason"
+         value={r}
+         checked={reason === r}
+         onChange={() => setReason(r)}
+         className="h-4 w-4 text-primary"
         />
-      </div>
-    </ReusableDialog>
-  );
+        <span className="text-sm text-gray-700 dark:text-gray-300">
+         {r}
+        </span>
+       </label>
+      ))}
+     </div>
+    </div>
+
+    <ReusableInputField
+     as="textarea"
+     id="message"
+     label="Any additional feedback about this page you would like to share with us?"
+     value={message}
+     onChange={(event) => setMessage(event.target.value)}
+     placeholder="Your feedback helps us improve..."
+     rows={5}
+     description="Please don't include any sensitive information"
+    />
+   </div>
+  </ReusableDialog>
+ );
 };
 
 export const PageSatisfactionBanner: React.FC = () => {
-  const [modalType, setModalType] = useState<'positive' | 'negative' | null>(null);
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const pathname = usePathname();
-  const { userDetails } = useUserContext();
+ const [modalType, setModalType] = useState<'positive' | 'negative' | null>(null);
+ const [isSubmitting, setIsSubmitting] = useState(false);
+ const pathname = usePathname();
+ const { userDetails } = useUserContext();
+ const { showBanner, hideBanner } = useBanner();
 
-  const getPageName = () => {
-    if (!pathname) return 'this page';
-    const parts = pathname.split('/').filter(Boolean);
-    const lastPart = parts[parts.length - 1] || 'home';
-    return lastPart
-      .split('-')
-      .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-      .join(' ');
-  };
+ const getPageName = () => {
+  if (!pathname) return 'this page';
+  const parts = pathname.split('/').filter(Boolean);
+  const lastPart = parts[parts.length - 1] || 'home';
+  return lastPart
+   .split('-')
+   .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+   .join(' ');
+ };
 
-  const handleSubmitFeedback = async (
-    rating: number,
-    reason: string,
-    message: string
-  ): Promise<boolean> => {
-    const userEmail = userDetails?.email || userDetails?.userName || '';
+ const handleSubmitFeedback = async (
+  rating: number,
+  reason: string,
+  message: string
+ ): Promise<boolean> => {
+  const userEmail = userDetails?.email || userDetails?.userName || '';
 
-    if (!userEmail) {
-      toast.error('Unable to identify your account. Please try again in a moment.');
-      return false;
-    }
+  if (!userEmail) {
+   showBanner({
+    severity: 'error',
+    title: 'Unable to identify your account',
+    message: 'Please try again in a moment.',
+   });
+   return false;
+  }
 
-    setIsSubmitting(true);
+  setIsSubmitting(true);
 
-    try {
-      const metadata = {
-        page: pathname || window.location.pathname,
-        reason,
-        browser:
-          typeof window !== 'undefined'
-            ? navigator.userAgent.slice(0, 80)
-            : 'Unknown',
-        appVersion: process.env.NEXT_PUBLIC_APP_VERSION || '1.0.0',
-      };
+  try {
+   const metadata = {
+    page: pathname || window.location.pathname,
+    reason,
+    browser:
+     typeof window !== 'undefined'
+      ? navigator.userAgent.slice(0, 80)
+      : 'Unknown',
+    appVersion: process.env.NEXT_PUBLIC_APP_VERSION || '1.0.0',
+   };
 
-      await feedbackService.submitFeedback({
-        email: userEmail,
-        subject: `Page Satisfaction: ${getPageName()}`,
-        message: message || `Rating: ${rating}/5, Reason: ${reason}`,
-        rating,
-        category: 'other',
-        platform: 'web',
-        app: 'vertex',
-        metadata,
-      });
+   await feedbackService.submitFeedback({
+    email: userEmail,
+    subject: `Page Satisfaction: ${getPageName()}`,
+    message: message || `Rating: ${rating}/5, Reason: ${reason}`,
+    rating,
+    category: 'other',
+    platform: 'web',
+    app: 'vertex',
+    metadata,
+   });
 
-      toast.success('Thank you for your feedback!');
-      return true;
-    } catch (error) {
-      toast.error(
-        error instanceof Error
-          ? getApiErrorMessage(error)
-          : 'An error occurred while submitting feedback'
-      );
-      return false;
-    } finally {
-      setIsSubmitting(false);
-    }
-  };
+   showBanner({
+    severity: 'success',
+    title: 'Thank you for your feedback!',
+    message: 'Your input helps us improve the platform.',
+   });
+   return true;
+  } catch (error) {
+   showBanner({
+    severity: 'error',
+    title: 'Failed to submit feedback',
+    message: error instanceof Error ? getApiErrorMessage(error) : 'An error occurred while submitting feedback',
+   });
+   return false;
+  } finally {
+   setIsSubmitting(false);
+  }
+ };
 
-  return (
-    <>
-      <div className="w-full border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50 py-6 px-0 mt-8">
-        <div className="w-full flex flex-col sm:flex-row items-center justify-between gap-4 px-4 sm:px-6">
-          <div className="text-center sm:text-left">
-            <h3 className="text-sm font-medium text-gray-900 dark:text-white">
-              Overall, how satisfied are you with {getPageName()}?
-            </h3>
-          </div>
+ return (
+  <>
+   <div className="w-full fixed bottom-0 left-0 right-0 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50 py-6">
+    <div className="w-full flex flex-col sm:flex-row items-center justify-between gap-4">
+     <div className="text-center sm:text-left">
+      <h3 className="text-sm font-medium text-gray-900 dark:text-white">
+       Overall, how satisfied are you with {getPageName()}?
+      </h3>
+     </div>
 
-          <div className="flex items-center gap-3">
-            <ReusableButton
-              variant="text"
-              onClick={() => setModalType('positive')}
-              className="p-2 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
-              aria-label="Satisfied"
-            >
-              <ThumbsUp className="h-6 w-6 text-gray-600 dark:text-gray-300" />
-            </ReusableButton>
+     <div className="flex items-center gap-3">
+      <ReusableButton
+       variant="text"
+       onClick={() => setModalType('positive')}
+       className="p-2 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
+       aria-label="Satisfied"
+      >
+       <ThumbsUp className="h-6 w-6 text-gray-600 dark:text-gray-300" />
+      </ReusableButton>
 
-            <ReusableButton
-              variant="text"
-              onClick={() => setModalType('negative')}
-              className="p-2 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
-              aria-label="Not satisfied"
-            >
-              <ThumbsDown className="h-6 w-6 text-gray-600 dark:text-gray-300" />
-            </ReusableButton>
+      <ReusableButton
+       variant="text"
+       onClick={() => setModalType('negative')}
+       className="p-2 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
+       aria-label="Not satisfied"
+      >
+       <ThumbsDown className="h-6 w-6 text-gray-600 dark:text-gray-300" />
+      </ReusableButton>
 
-            <ReusableButton
-              variant="text"
-              onClick={openFeedbackDialog}
-              className="p-2 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
-              aria-label="Comment"
-            >
-              <MessageSquare className="h-6 w-6 text-gray-600 dark:text-gray-300" />
-            </ReusableButton>
-          </div>
-        </div>
-      </div>
+      <ReusableButton
+       variant="text"
+       onClick={openFeedbackDialog}
+       className="p-2 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
+       aria-label="Comment"
+      >
+       <MessageSquare className="h-6 w-6 text-gray-600 dark:text-gray-300" />
+      </ReusableButton>
+     </div>
+    </div>
+   </div>
 
-      <FeedbackModal
-        isOpen={modalType === 'positive'}
-        onClose={() => setModalType(null)}
-        onSubmit={handleSubmitFeedback}
-        isSubmitting={isSubmitting}
-        type="positive"
-      />
+   <FeedbackModal
+    isOpen={modalType === 'positive'}
+    onClose={() => setModalType(null)}
+    onSubmit={handleSubmitFeedback}
+    isSubmitting={isSubmitting}
+    type="positive"
+   />
 
-      <FeedbackModal
-        isOpen={modalType === 'negative'}
-        onClose={() => setModalType(null)}
-        onSubmit={handleSubmitFeedback}
-        isSubmitting={isSubmitting}
-        type="negative"
-      />
-    </>
-  );
+   <FeedbackModal
+    isOpen={modalType === 'negative'}
+    onClose={() => setModalType(null)}
+    onSubmit={handleSubmitFeedback}
+    isSubmitting={isSubmitting}
+    type="negative"
+   />
+  </>
+ );
 };

From d7d9781fd2e624428b220042f49e811767864783 Mon Sep 17 00:00:00 2001
From: TrivCodez <mopifyzai@gmail.com>
Date: Sun, 17 May 2026 20:44:16 +1000
Subject: [PATCH 06/14] fix: change banner from fixed to sticky positioning to
 respect layout boundaries

- Changed from `fixed bottom-0 left-0 right-0` to `sticky bottom-0` to stay within main content area
- Removed `w-full` from outer div as it's already full-width by default
- Removed `w-full` from inner div to prevent overflow
- Banner now respects sidebar/layout boundaries while still sticking to bottom
- Maintains edge-to-edge positioning within the content region only
---
 .../components/features/feedback/page-satisfaction-banner.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/vertex/components/features/feedback/page-satisfaction-banner.tsx b/src/vertex/components/features/feedback/page-satisfaction-banner.tsx
index 3579677a4c..25e7d6a847 100644
--- a/src/vertex/components/features/feedback/page-satisfaction-banner.tsx
+++ b/src/vertex/components/features/feedback/page-satisfaction-banner.tsx
@@ -210,8 +210,8 @@ export const PageSatisfactionBanner: React.FC = () => {
 
  return (
   <>
-   <div className="w-full fixed bottom-0 left-0 right-0 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50 py-6">
-    <div className="w-full flex flex-col sm:flex-row items-center justify-between gap-4">
+   <div className="w-full sticky bottom-0 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50 py-6">
+    <div className="flex flex-col sm:flex-row items-center justify-between gap-4">
      <div className="text-center sm:text-left">
       <h3 className="text-sm font-medium text-gray-900 dark:text-white">
        Overall, how satisfied are you with {getPageName()}?

From 3df10b9dfab2da2f56f051fde3892f6fbddb8880 Mon Sep 17 00:00:00 2001
From: Codebmk <belindamarion0@gmail.com>
Date: Sun, 17 May 2026 16:05:06 +0300
Subject: [PATCH 07/14] position page satisfaction banner at bottom

---
 src/vertex/app/(authenticated)/layout.tsx                   | 2 --
 .../features/feedback/page-satisfaction-banner.tsx          | 6 +++---
 src/vertex/components/layout/layout.tsx                     | 4 +++-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/vertex/app/(authenticated)/layout.tsx b/src/vertex/app/(authenticated)/layout.tsx
index 244656335b..bfbf2b05ff 100644
--- a/src/vertex/app/(authenticated)/layout.tsx
+++ b/src/vertex/app/(authenticated)/layout.tsx
@@ -4,7 +4,6 @@ import Layout from "@/components/layout/layout";
 import { ForbiddenGuard } from "@/components/layout/accessConfig/forbidden-guard";
 import { useForbiddenHandler } from "@/core/hooks/useForbiddenHandler";
 import { useContextAwareRouting } from "@/core/hooks/useContextAwareRouting";
-import { PageSatisfactionBanner } from "@/components/features/feedback/page-satisfaction-banner";
 
 export default function AuthenticatedLayout({
   children,
@@ -21,7 +20,6 @@ export default function AuthenticatedLayout({
     <ForbiddenGuard>
       <Layout>
         {children}
-        <PageSatisfactionBanner />
       </Layout>
     </ForbiddenGuard>
   );
diff --git a/src/vertex/components/features/feedback/page-satisfaction-banner.tsx b/src/vertex/components/features/feedback/page-satisfaction-banner.tsx
index 25e7d6a847..bff16ee3d5 100644
--- a/src/vertex/components/features/feedback/page-satisfaction-banner.tsx
+++ b/src/vertex/components/features/feedback/page-satisfaction-banner.tsx
@@ -210,10 +210,10 @@ export const PageSatisfactionBanner: React.FC = () => {
 
  return (
   <>
-   <div className="w-full sticky bottom-0 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50 py-6">
-    <div className="flex flex-col sm:flex-row items-center justify-between gap-4">
+   <div className="w-full border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50 py-4 px-4">
+    <div className="max-w-7xl mx-auto flex flex-col sm:flex-row items-center justify-between gap-4">
      <div className="text-center sm:text-left">
-      <h3 className="text-sm font-medium text-gray-900 dark:text-white">
+      <h3 className="text-sm font-semibold text-gray-900 dark:text-white">
        Overall, how satisfied are you with {getPageName()}?
       </h3>
      </div>
diff --git a/src/vertex/components/layout/layout.tsx b/src/vertex/components/layout/layout.tsx
index 440a1d02fb..4a4b202891 100644
--- a/src/vertex/components/layout/layout.tsx
+++ b/src/vertex/components/layout/layout.tsx
@@ -136,9 +136,10 @@ export default function Layout({ children }: LayoutProps) {
           <main
             data-vertex-main
             className={`flex-1 transition-[margin-left] duration-300 ease-in-out bg-background w-full flex flex-col ${isSecondarySidebarCollapsed ? 'lg:ml-[88px]' : 'lg:ml-[256px]'} overflow-y-auto mt-[calc(50px+var(--vertex-ui-top-offset))] md:mt-[calc(50px+var(--vertex-ui-top-offset))] lg:mt-[calc(48px+var(--vertex-ui-top-offset))] pb-20 md:pb-0`}
+            className={`flex-1 transition-[margin-left] duration-300 ease-in-out bg-background w-full flex flex-col ${isSecondarySidebarCollapsed ? 'lg:ml-[88px]' : 'lg:ml-[256px]'} overflow-y-auto mt-[calc(50px+var(--vertex-ui-top-offset))] md:mt-[calc(50px+var(--vertex-ui-top-offset))] lg:mt-[calc(48px+var(--vertex-ui-top-offset))]`}
           >
             <div
-              className={`flex-1 w-full bg-background max-w-7xl mx-auto flex flex-col gap-4 md:gap-8 px-3 py-3 md:px-2 lg:py-6 lg:px-6`}
+              className={`flex-1 w-full bg-background max-w-7xl mx-auto flex flex-col gap-4 md:gap-8 px-3 py-3 md:px-2 lg:py-6 lg:px-6 pb-20 md:pb-0`}
             >
               <ErrorBoundary>
                 <motion.div
@@ -153,6 +154,7 @@ export default function Layout({ children }: LayoutProps) {
               </ErrorBoundary>
             </div>
             <Footer />
+            {userDetails && <PageSatisfactionBanner />}
           </main>
           <FeedbackLauncher />
         </div>

From 075d9f16514bb89a3dbf94025e3b902801ac5a44 Mon Sep 17 00:00:00 2001
From: Codebmk <belindamarion0@gmail.com>
Date: Sun, 17 May 2026 16:05:15 +0300
Subject: [PATCH 08/14] Update layout.tsx

---
 src/vertex/components/layout/layout.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/vertex/components/layout/layout.tsx b/src/vertex/components/layout/layout.tsx
index 4a4b202891..9e80025b71 100644
--- a/src/vertex/components/layout/layout.tsx
+++ b/src/vertex/components/layout/layout.tsx
@@ -12,6 +12,7 @@ import ErrorBoundary from '../shared/ErrorBoundary';
 import Footer from './Footer';
 import { OrganizationSetupBanner } from './organization-setup-banner';
 import { FeedbackLauncher } from '../features/feedback/feedback-launcher';
+import { PageSatisfactionBanner } from '../features/feedback/page-satisfaction-banner';
 
 import { setLastActiveModule } from '@/core/utils/userPreferences';
 
@@ -135,7 +136,6 @@ export default function Layout({ children }: LayoutProps) {
           />
           <main
             data-vertex-main
-            className={`flex-1 transition-[margin-left] duration-300 ease-in-out bg-background w-full flex flex-col ${isSecondarySidebarCollapsed ? 'lg:ml-[88px]' : 'lg:ml-[256px]'} overflow-y-auto mt-[calc(50px+var(--vertex-ui-top-offset))] md:mt-[calc(50px+var(--vertex-ui-top-offset))] lg:mt-[calc(48px+var(--vertex-ui-top-offset))] pb-20 md:pb-0`}
             className={`flex-1 transition-[margin-left] duration-300 ease-in-out bg-background w-full flex flex-col ${isSecondarySidebarCollapsed ? 'lg:ml-[88px]' : 'lg:ml-[256px]'} overflow-y-auto mt-[calc(50px+var(--vertex-ui-top-offset))] md:mt-[calc(50px+var(--vertex-ui-top-offset))] lg:mt-[calc(48px+var(--vertex-ui-top-offset))]`}
           >
             <div

From 4708fa9a843377e383e0c72822bca543aa3487c7 Mon Sep 17 00:00:00 2001
From: Codebmk <belindamarion0@gmail.com>
Date: Sun, 17 May 2026 16:11:10 +0300
Subject: [PATCH 09/14] show global banner

---
 .../feedback/page-satisfaction-banner.tsx        | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/vertex/components/features/feedback/page-satisfaction-banner.tsx b/src/vertex/components/features/feedback/page-satisfaction-banner.tsx
index bff16ee3d5..2c56c88103 100644
--- a/src/vertex/components/features/feedback/page-satisfaction-banner.tsx
+++ b/src/vertex/components/features/feedback/page-satisfaction-banner.tsx
@@ -46,6 +46,7 @@ const FeedbackModal: React.FC<FeedbackModalProps> = ({
 }) => {
  const [reason, setReason] = useState('');
  const [message, setMessage] = useState('');
+ const { showBanner } = useBanner();
 
  const reasons = type === 'positive' ? POSITIVE_REASONS : NEGATIVE_REASONS;
 
@@ -62,6 +63,13 @@ const FeedbackModal: React.FC<FeedbackModalProps> = ({
   setReason('');
   setMessage('');
   onClose();
+  setTimeout(() => {
+   showBanner({
+    severity: 'success',
+    title: 'Thank you for your feedback!',
+    message: 'Your input helps us improve the platform.',
+   });
+  }, 150);
  };
 
  return (
@@ -162,6 +170,7 @@ export const PageSatisfactionBanner: React.FC = () => {
     severity: 'error',
     title: 'Unable to identify your account',
     message: 'Please try again in a moment.',
+    scoped: true,
    });
    return false;
   }
@@ -190,17 +199,14 @@ export const PageSatisfactionBanner: React.FC = () => {
     metadata,
    });
 
-   showBanner({
-    severity: 'success',
-    title: 'Thank you for your feedback!',
-    message: 'Your input helps us improve the platform.',
-   });
+   
    return true;
   } catch (error) {
    showBanner({
     severity: 'error',
     title: 'Failed to submit feedback',
     message: error instanceof Error ? getApiErrorMessage(error) : 'An error occurred while submitting feedback',
+    scoped: true,
    });
    return false;
   } finally {

From b4bca89760a7a8d194843599dbe107c77e1c4021 Mon Sep 17 00:00:00 2001
From: Codebmk <belindamarion0@gmail.com>
Date: Sun, 17 May 2026 16:18:27 +0300
Subject: [PATCH 10/14] move banner within layout

---
 src/vertex/app/providers.tsx            | 3 +--
 src/vertex/components/layout/layout.tsx | 3 +++
 src/vertex/context/banner-context.tsx   | 2 +-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/vertex/app/providers.tsx b/src/vertex/app/providers.tsx
index 3e6949f0d9..383d25a7a3 100644
--- a/src/vertex/app/providers.tsx
+++ b/src/vertex/app/providers.tsx
@@ -10,7 +10,7 @@ import { ThemeProvider } from "@/components/theme-provider";
 import SessionLoadingState from "@/components/layout/loading/session-loading";
 import { QueryProvider } from "@/core/providers/query-provider";
 import { runClientCacheMaintenance } from "@/core/utils/clientCache";
-import { BannerProvider, GlobalBannerContainer } from "@/context/banner-context";
+import { BannerProvider } from "@/context/banner-context";
 
 const NetworkStatusBanner = dynamic(
   () => import('@/components/features/network-status-banner'),
@@ -48,7 +48,6 @@ export default function Providers({ children, session }: { children: React.React
               disableTransitionOnChange
             >
               <BannerProvider>
-                <GlobalBannerContainer />
                 {children}
               </BannerProvider>
             </ThemeProvider>
diff --git a/src/vertex/components/layout/layout.tsx b/src/vertex/components/layout/layout.tsx
index 9e80025b71..7ec14c4e3e 100644
--- a/src/vertex/components/layout/layout.tsx
+++ b/src/vertex/components/layout/layout.tsx
@@ -13,6 +13,7 @@ import Footer from './Footer';
 import { OrganizationSetupBanner } from './organization-setup-banner';
 import { FeedbackLauncher } from '../features/feedback/feedback-launcher';
 import { PageSatisfactionBanner } from '../features/feedback/page-satisfaction-banner';
+import { GlobalBannerContainer } from '@/context/banner-context';
 
 import { setLastActiveModule } from '@/core/utils/userPreferences';
 
@@ -138,9 +139,11 @@ export default function Layout({ children }: LayoutProps) {
             data-vertex-main
             className={`flex-1 transition-[margin-left] duration-300 ease-in-out bg-background w-full flex flex-col ${isSecondarySidebarCollapsed ? 'lg:ml-[88px]' : 'lg:ml-[256px]'} overflow-y-auto mt-[calc(50px+var(--vertex-ui-top-offset))] md:mt-[calc(50px+var(--vertex-ui-top-offset))] lg:mt-[calc(48px+var(--vertex-ui-top-offset))]`}
           >
+            
             <div
               className={`flex-1 w-full bg-background max-w-7xl mx-auto flex flex-col gap-4 md:gap-8 px-3 py-3 md:px-2 lg:py-6 lg:px-6 pb-20 md:pb-0`}
             >
+              <GlobalBannerContainer />
               <ErrorBoundary>
                 <motion.div
                   key={pathname}
diff --git a/src/vertex/context/banner-context.tsx b/src/vertex/context/banner-context.tsx
index a791bd56f5..8fb984e875 100644
--- a/src/vertex/context/banner-context.tsx
+++ b/src/vertex/context/banner-context.tsx
@@ -105,7 +105,7 @@ export function GlobalBannerContainer() {
   if (!state.isVisible || state.isScoped) return null;
 
   return (
-    <div className="px-4 pt-3">
+    <div className="pt-3">
       <Banner
         {...state.bannerProps}
         dismissible

From ec97fd8153cbe747b3b4bb116bf439b0c6985674 Mon Sep 17 00:00:00 2001
From: Codebmk <belindamarion0@gmail.com>
Date: Sun, 17 May 2026 16:20:10 +0300
Subject: [PATCH 11/14] Update changelog.md

---
 src/vertex/app/changelog.md | 41 +++++++++++++++++++++++++++++++++++++
 1 file changed, 41 insertions(+)

diff --git a/src/vertex/app/changelog.md b/src/vertex/app/changelog.md
index 9b990b726c..d87503fbea 100644
--- a/src/vertex/app/changelog.md
+++ b/src/vertex/app/changelog.md
@@ -4,6 +4,47 @@
 
 ---
 
+## Version 1.23.43
+**Released:** May 17, 2026
+
+### Page Satisfaction Feedback Banner & Global Banner Positioning
+
+Implements a full-featured, page-satisfaction feedback banner for the Vertex platform (Issue #3480), and resolves several core layout and banner rendering issues to ensure perfect visual presentation on both desktop and mobile viewports.
+
+<details>
+<summary><strong>New Features (4)</strong></summary>
+
+- **Page Satisfaction Feedback Banner**: Designed and deployed a new `PageSatisfactionBanner` component situated statically directly below the page footer for all authenticated sessions, encouraging quick, one-tap platform feedback.
+- **Structured Feedback Modal Flow**: Integrated interactive positive/negative feedback modals (`FeedbackModal`) that prompt users for structured reasons and optional comments when voting.
+- **Session & API Integration**: Automatically pre-fills the user's registered identity from the active user session context and forwards feedback payloads to the backend `feedbackService.submitFeedback` with rich client telemetry.
+- **Dynamic Context Detection**: Automatically parses the active URL path to display the localized screen name (e.g. "Home", "Cohorts") in the satisfaction prompt.
+
+</details>
+
+<details>
+<summary><strong>Layout & UI Bug Fixes (5)</strong></summary>
+
+- **Mobile Viewport Bottom Spacing**: Fixed a 80px white space below the satisfaction banner on mobile and tablet screens. Relocated `pb-20 md:pb-0` padding classes from the outer scrolling `<main>` container to the inner `max-w-7xl` page content wrapper, ensuring the banner rests perfectly flush at the absolute bottom of the viewport.
+- **Dialog Notification Hardening**: Hardened dialog error feedback by setting `scoped: true` on submission and authentication error banners. Error messages are now rendered beautifully inline at the top of the modal (`BannerSlot` inside `ReusableDialog`) instead of being hidden behind the backdrop.
+- **Deferred Success Notification**: Deferred the global success banner schedule inside `FeedbackModal`'s `handleSubmit` via a 150ms timeout. This allows `ReusableDialog`'s unmount cleanup `hideBanner()` to complete before the persistent success banner is successfully scheduled on the main screen.
+- **Overlapping Global Banners Resolved**: Moved `<GlobalBannerContainer />` from the root application tree (`providers.tsx`) to the `max-w-7xl` page content wrapper inside `<main>` (`layout.tsx`). The global banner now respects all layout boundaries and sidebars, avoiding any overlapping or clipping underneath the fixed `Topbar` and `Sidebar` layouts.
+- **Global Banner Margins Refinement**: Removed the trailing `px-4` margin from the `GlobalBannerContainer` wrapper inside `context/banner-context.tsx` to fully leverage the parent responsive grid padding (`px-3 py-3 md:px-2 lg:py-6 lg:px-6`).
+
+</details>
+
+<details>
+<summary><strong>Files Created/Modified (5)</strong></summary>
+
+- `src/vertex/app/providers.tsx` [MODIFIED]
+- `src/vertex/app/(authenticated)/layout.tsx` [MODIFIED]
+- `src/vertex/components/features/feedback/page-satisfaction-banner.tsx` [NEW]
+- `src/vertex/components/layout/layout.tsx` [MODIFIED]
+- `src/vertex/context/banner-context.tsx` [MODIFIED]
+
+</details>
+
+---
+
 ## Version 1.23.42
 **Released:** May 17, 2026
 

From 1cf1f4d01b3f4d14fc43dc3ad5428567b631bcfc Mon Sep 17 00:00:00 2001
From: Codebmk <belindamarion0@gmail.com>
Date: Mon, 18 May 2026 05:00:16 +0300
Subject: [PATCH 12/14] Update page-satisfaction-banner.tsx

---
 .../components/features/feedback/page-satisfaction-banner.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/vertex/components/features/feedback/page-satisfaction-banner.tsx b/src/vertex/components/features/feedback/page-satisfaction-banner.tsx
index 2c56c88103..7b55474d7b 100644
--- a/src/vertex/components/features/feedback/page-satisfaction-banner.tsx
+++ b/src/vertex/components/features/feedback/page-satisfaction-banner.tsx
@@ -146,7 +146,7 @@ export const PageSatisfactionBanner: React.FC = () => {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const pathname = usePathname();
  const { userDetails } = useUserContext();
- const { showBanner, hideBanner } = useBanner();
+ const { showBanner } = useBanner();
 
  const getPageName = () => {
   if (!pathname) return 'this page';

From 72097a2123c5794dde2424a031bc6e4f3fa13503 Mon Sep 17 00:00:00 2001
From: Codebmk <belindamarion0@gmail.com>
Date: Mon, 18 May 2026 05:04:35 +0300
Subject: [PATCH 13/14] fix 150ms delay

---
 .../components/features/feedback/page-satisfaction-banner.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/vertex/components/features/feedback/page-satisfaction-banner.tsx b/src/vertex/components/features/feedback/page-satisfaction-banner.tsx
index 7b55474d7b..e11d2c2aaa 100644
--- a/src/vertex/components/features/feedback/page-satisfaction-banner.tsx
+++ b/src/vertex/components/features/feedback/page-satisfaction-banner.tsx
@@ -69,7 +69,7 @@ const FeedbackModal: React.FC<FeedbackModalProps> = ({
     title: 'Thank you for your feedback!',
     message: 'Your input helps us improve the platform.',
    });
-  }, 150);
+  }, 300);
  };
 
  return (

From 78f06a8df75541fd0a6e952ed512df1342ba81c5 Mon Sep 17 00:00:00 2001
From: Codebmk <belindamarion0@gmail.com>
Date: Mon, 18 May 2026 05:08:59 +0300
Subject: [PATCH 14/14] update category top

---
 .../components/features/feedback/page-satisfaction-banner.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/vertex/components/features/feedback/page-satisfaction-banner.tsx b/src/vertex/components/features/feedback/page-satisfaction-banner.tsx
index e11d2c2aaa..4b3723e585 100644
--- a/src/vertex/components/features/feedback/page-satisfaction-banner.tsx
+++ b/src/vertex/components/features/feedback/page-satisfaction-banner.tsx
@@ -193,7 +193,7 @@ export const PageSatisfactionBanner: React.FC = () => {
     subject: `Page Satisfaction: ${getPageName()}`,
     message: message || `Rating: ${rating}/5, Reason: ${reason}`,
     rating,
-    category: 'other',
+    category: 'page_satisfaction',
     platform: 'web',
     app: 'vertex',
     metadata,