From bc8611a66250eb7747e7acd6e882a740c0028ba1 Mon Sep 17 00:00:00 2001
From: Dries Augustyns <inbox@driaug.com>
Date: Sun, 28 Dec 2025 14:00:15 +0100
Subject: [PATCH] feat: Add additional banner and information about security
 metrics

---
 .../src/components/SecurityWarningBanner.tsx  | 32 +++++++++++++------
 apps/web/src/pages/index.tsx                  | 31 +++++++++++++++---
 2 files changed, 48 insertions(+), 15 deletions(-)

diff --git a/apps/web/src/components/SecurityWarningBanner.tsx b/apps/web/src/components/SecurityWarningBanner.tsx
index 00149dc..fb2bab8 100644
--- a/apps/web/src/components/SecurityWarningBanner.tsx
+++ b/apps/web/src/components/SecurityWarningBanner.tsx
@@ -8,28 +8,40 @@ interface SecurityWarningBannerProps {
 }
 
 export function SecurityWarningBanner({status}: SecurityWarningBannerProps) {
-  // Don't show if no warnings or already disabled
-  if (status.warnings.length === 0 || status.shouldDisable) {
+  // Don't show if no warnings or violations
+  const hasCriticalViolations = status.violations.length > 0;
+  const hasWarnings = status.warnings.length > 0;
+
+  if (!hasCriticalViolations && !hasWarnings) {
     return null;
   }
 
+  // Determine severity - critical violations take precedence
+  const variant = hasCriticalViolations ? 'destructive' : 'warning';
+  const title = hasCriticalViolations
+    ? 'Critical Security Violations - Immediate Action Required'
+    : 'Security Warning - Action Required';
+  const issues = hasCriticalViolations ? status.violations : status.warnings;
+  const messageColor = hasCriticalViolations ? 'text-red-800' : 'text-amber-800';
+
   return (
-    <Alert variant="warning">
+    <Alert variant={variant}>
       <AlertTriangle className="h-4 w-4" />
-      <AlertTitle>Security Warning - Action Required</AlertTitle>
+      <AlertTitle>{title}</AlertTitle>
       <AlertDescription className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3">
         <div className="space-y-2 flex-1">
           <p className="text-sm font-medium">
             Your project has exceeded the following security thresholds:
           </p>
-          <ul className="list-disc list-inside space-y-1 text-sm text-amber-800">
-            {status.warnings.map((warning, idx) => (
-              <li key={idx}>{warning}</li>
+          <ul className={`list-disc list-inside space-y-1 text-sm ${messageColor}`}>
+            {issues.map((issue, idx) => (
+              <li key={idx}>{issue}</li>
             ))}
           </ul>
-          <p className="text-xs text-amber-800 mt-2">
-            High bounce or complaint rates can lead to project suspension. Review the detailed metrics
-            and take action to improve your email quality.
+          <p className={`text-xs ${messageColor} mt-2`}>
+            {hasCriticalViolations
+              ? 'Your project may be suspended soon. Please review the detailed metrics immediately and take action to improve your email quality.'
+              : 'High bounce or complaint rates can lead to project suspension. Review the detailed metrics and take action to improve your email quality.'}
           </p>
         </div>
         <Link href="/settings?tab=security">
diff --git a/apps/web/src/pages/index.tsx b/apps/web/src/pages/index.tsx
index 0d6aec9..4439884 100644
--- a/apps/web/src/pages/index.tsx
+++ b/apps/web/src/pages/index.tsx
@@ -86,11 +86,32 @@ export default function Index() {
             <Alert variant="destructive">
               <AlertCircle className="h-4 w-4" />
               <AlertTitle>Project Disabled - Read-Only Mode</AlertTitle>
-              <AlertDescription>
-                This project has been disabled due to security violations (high bounce or complaint rates). All
-                scheduled campaigns and workflows have been cancelled. The project is now in read-only mode - you can
-                view your data but cannot create, update, or delete anything. Please contact support to resolve this
-                issue.
+              <AlertDescription className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3">
+                <div className="space-y-2 flex-1">
+                  <p className="text-sm font-medium">
+                    This project has been disabled due to security violations. All scheduled campaigns and workflows
+                    have been cancelled. The project is now in read-only mode - you can view your data but cannot
+                    create, update, or delete anything.
+                  </p>
+                  {securityMetrics && securityMetrics.status.violations.length > 0 && (
+                    <>
+                      <p className="text-sm font-medium mt-3">Security violations that caused suspension:</p>
+                      <ul className="list-disc list-inside space-y-1 text-sm text-red-800">
+                        {securityMetrics.status.violations.map((violation, idx) => (
+                          <li key={idx}>{violation}</li>
+                        ))}
+                      </ul>
+                    </>
+                  )}
+                  <p className="text-xs text-red-800 mt-2">
+                    Please contact support to resolve this issue and get your project re-enabled.
+                  </p>
+                </div>
+                <Link href="/settings?tab=security">
+                  <Button size="sm" variant="outline" className="w-full sm:w-auto flex-shrink-0">
+                    View Details
+                  </Button>
+                </Link>
               </AlertDescription>
             </Alert>
           )}