Add beta banner

closes #228

src/servala/core/models/organization.py

@@ -387,7 +387,8 @@ class OrganizationOrigin(ServalaModelMixin, models.Model):
         help_text=_(
             "If set, this billing entity will be used on new organizations with this origin."
         ),
-        null=True, blank=True,
+        null=True,
+        blank=True,
     )
     limit_cloudproviders = models.ManyToManyField(
         to="CloudProvider",

src/servala/frontend/context_processors.py

@@ -1,5 +1,12 @@
+from django.conf import settings
+
+
 def add_organizations(request):
     if not request.user.is_authenticated:
         return {"user_organizations": []}
 
     return {"user_organizations": request.user.organizations.all().order_by("name")}
+
+
+def add_beta_banner(request):
+    return {"show_beta_banner": settings.SERVALA_SHOW_BETA_BANNER}

src/servala/frontend/templates/frontend/base.html

@@ -22,6 +22,7 @@
     <script src="{% static 'mazer/static/js/initTheme.js' %}"></script>
     <div id="app">
         <div id="main" class="layout-horizontal">
+            {% include 'includes/beta_banner.html' %}
             {% include 'includes/header.html' %}
             <div class="content-wrapper container">
                 <div class="page-heading">

src/servala/frontend/templates/includes/beta_banner.html

@@ -0,0 +1,13 @@
+{% if show_beta_banner %}
+    <div class="beta-banner">
+        <div class="container">
+            <div class="beta-banner-content">
+                <span class="beta-banner-badge">BETA</span>
+                <span class="beta-banner-text">The Servala Portal is currently in beta testing. Your feedback helps us improve!</span>
+                <button type="button"
+                        class="btn btn-sm beta-banner-button"
+                        onclick="if(window.Ybug) { Ybug.open(); }">Share Feedback</button>
+            </div>
+        </div>
+    </div>
+{% endif %}

src/servala/settings.py

@@ -20,6 +20,7 @@ from servala.__about__ import __version__ as version
 
 SERVALA_ENVIRONMENT = os.environ.get("SERVALA_ENVIRONMENT", "development")
 DEBUG = SERVALA_ENVIRONMENT == "development"
+SERVALA_SHOW_BETA_BANNER = os.environ.get("SERVALA_SHOW_BETA_BANNER", "True") == "True"
 
 SECRET_KEY = os.environ.get("SERVALA_SECRET_KEY")
 if previous_secret_key := os.environ.get("SERVALA_PREVIOUS_SECRET_KEY"):
@@ -219,6 +220,7 @@ TEMPLATES = [
                 "django.contrib.messages.context_processors.messages",
                 "django.template.context_processors.static",
                 "servala.frontend.context_processors.add_organizations",
+                "servala.frontend.context_processors.add_beta_banner",
             ],
             "loaders": template_loaders,
         },

src/servala/static/css/servala.css

@@ -332,3 +332,59 @@ html[data-bs-theme="dark"] @keyframes tab-pulse {
 .nav-tabs .nav-link.tab-flash {
     animation: tab-pulse 1s ease-in-out 2;
 }
+
+.beta-banner {
+    background: linear-gradient(135deg, var(--bs-primary) 0%, var(--brand-mid) 100%);
+    color: white;
+    padding: 0.75rem 0;
+    text-align: center;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+.beta-banner-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+}
+.beta-banner-badge {
+    background-color: white;
+    color: var(--bs-primary);
+    padding: 0.25rem 0.75rem;
+    border-radius: 1rem;
+    font-weight: bold;
+    font-size: 0.875rem;
+    letter-spacing: 0.5px;
+}
+.beta-banner-text {
+    font-size: 0.95rem;
+}
+.beta-banner-button {
+    background-color: white;
+    color: var(--bs-primary);
+    border: none;
+    font-weight: 600;
+    padding: 0.375rem 1rem;
+    transition: all 0.2s ease;
+}
+.beta-banner-button:hover {
+    background-color: var(--brand-light);
+    color: var(--bs-primary);
+    transform: translateY(-1px);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+
+html[data-bs-theme="dark"] .beta-banner {
+    background: linear-gradient(135deg, var(--bs-primary) 0%, #7a4fc4 100%);
+}
+html[data-bs-theme="dark"] .beta-banner-badge {
+    background-color: rgba(255, 255, 255, 0.95);
+}
+html[data-bs-theme="dark"] .beta-banner-button {
+    background-color: rgba(255, 255, 255, 0.95);
+    color: var(--bs-primary);
+}
+html[data-bs-theme="dark"] .beta-banner-button:hover {
+    background-color: white;
+    color: var(--bs-primary);
+}