From 9d9453b5c81cc0721caea2b8b7dc897af2750940 Mon Sep 17 00:00:00 2001
From: gsinghpal <gur_preet.singh@outlook.com>
Date: Tue, 24 Feb 2026 02:53:55 -0500
Subject: [PATCH] feat: customizable portal gradient theme + LTC repair form
 fixes

- Add portal gradient branding settings with 4 presets (Green/Teal,
  Blue/Purple, Sunset Orange, Dark Slate) and custom color picker
- Live preview in settings, onchange updates colors reactively
- Dynamic gradient applied across portal home, CSS, and card elements
- Fix after photos visibility (conditional on resolved=yes)
- Fix technician section gating on portal repair form
- Move Create Sale Order button to form header for visibility
- Fix portal home row width inconsistency (xpath target change)

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../controllers/portal_main.py                |   8 ++
 .../static/src/css/portal_style.css           |  10 +-
 .../views/portal_repair_form.xml              |  42 +++----
 .../views/portal_templates.xml                |  30 ++---
 fusion_claims/models/res_config_settings.py   | 110 ++++++++++++++++++
 fusion_claims/views/ltc_repair_views.xml      |   6 +-
 .../views/res_config_settings_views.xml       |  61 ++++++++++
 7 files changed, 226 insertions(+), 41 deletions(-)

diff --git a/fusion_authorizer_portal/controllers/portal_main.py b/fusion_authorizer_portal/controllers/portal_main.py
index e05288a..b97938f 100644
--- a/fusion_authorizer_portal/controllers/portal_main.py
+++ b/fusion_authorizer_portal/controllers/portal_main.py
@@ -37,6 +37,14 @@ class AuthorizerPortal(CustomerPortal):
                 ])
             response.qcontext['sign_count'] = sign_count
             response.qcontext['sign_module_available'] = sign_module_available
+
+            ICP = request.env['ir.config_parameter'].sudo()
+            g_start = ICP.get_param('fusion_claims.portal_gradient_start', '#5ba848')
+            g_mid = ICP.get_param('fusion_claims.portal_gradient_mid', '#3a8fb7')
+            g_end = ICP.get_param('fusion_claims.portal_gradient_end', '#2e7aad')
+            response.qcontext['portal_gradient'] = (
+                'linear-gradient(135deg, %s 0%%, %s 60%%, %s 100%%)' % (g_start, g_mid, g_end)
+            )
         
         return response
 
diff --git a/fusion_authorizer_portal/static/src/css/portal_style.css b/fusion_authorizer_portal/static/src/css/portal_style.css
index 3fb49d7..163e5ba 100644
--- a/fusion_authorizer_portal/static/src/css/portal_style.css
+++ b/fusion_authorizer_portal/static/src/css/portal_style.css
@@ -339,7 +339,7 @@
 }
 
 .assessment-express-form .card-header.bg-primary {
-    background: linear-gradient(135deg, #5ba848 0%, #3a8fb7 60%, #2e7aad 100%) !important;
+    background: var(--fc-portal-gradient, linear-gradient(135deg, #5ba848 0%, #3a8fb7 60%, #2e7aad 100%)) !important;
     border-radius: 12px 12px 0 0;
 }
 
@@ -391,7 +391,7 @@
 }
 
 .assessment-express-form .progress-bar {
-    background: linear-gradient(90deg, #5ba848 0%, #3a8fb7 60%, #2e7aad 100%);
+    background: var(--fc-portal-gradient, linear-gradient(90deg, #5ba848 0%, #3a8fb7 60%, #2e7aad 100%));
 }
 
 /* Section Separators */
@@ -415,7 +415,7 @@
 
 /* New Assessment Card on Portal Home */
 .portal-new-assessment-card {
-    background: linear-gradient(135deg, #5ba848 0%, #3a8fb7 60%, #2e7aad 100%) !important;
+    background: var(--fc-portal-gradient, linear-gradient(135deg, #5ba848 0%, #3a8fb7 60%, #2e7aad 100%)) !important;
     transition: transform 0.2s ease, box-shadow 0.2s ease;
 }
 
@@ -450,7 +450,7 @@
 
 /* Authorizer Portal Card on Portal Home */
 .portal-authorizer-card {
-    background: linear-gradient(135deg, #5ba848 0%, #3a8fb7 60%, #2e7aad 100%) !important;
+    background: var(--fc-portal-gradient, linear-gradient(135deg, #5ba848 0%, #3a8fb7 60%, #2e7aad 100%)) !important;
     transition: transform 0.2s ease, box-shadow 0.2s ease;
 }
 
@@ -522,7 +522,7 @@
 
 /* Welcome Header */
 .auth-dash-header {
-    background: linear-gradient(135deg, #5ba848 0%, #3a8fb7 60%, #2e7aad 100%);
+    background: var(--fc-portal-gradient, linear-gradient(135deg, #5ba848 0%, #3a8fb7 60%, #2e7aad 100%));
     border-radius: 16px;
     margin-bottom: 24px;
     overflow: hidden;
diff --git a/fusion_authorizer_portal/views/portal_repair_form.xml b/fusion_authorizer_portal/views/portal_repair_form.xml
index 165e077..7d1d5ac 100644
--- a/fusion_authorizer_portal/views/portal_repair_form.xml
+++ b/fusion_authorizer_portal/views/portal_repair_form.xml
@@ -178,27 +178,29 @@
                                                            for="resolved_no">No</label>
                                                 </div>
                                             </div>
-                                            <div class="mb-3" id="resolution_section"
+                                            <div id="resolution_section"
                                                  style="display: none;">
-                                                <label for="resolution_description"
-                                                       class="form-label">
-                                                    Describe the Solution
-                                                </label>
-                                                <textarea name="resolution_description"
-                                                          id="resolution_description"
-                                                          class="form-control" rows="3"
-                                                          placeholder="How was the issue resolved?"/>
-                                            </div>
-                                            <div class="mb-3">
-                                                <label for="after_photos" class="form-label fw-bold">
-                                                    After Photos (Completed Repair)
-                                                </label>
-                                                <input type="file" name="after_photos" id="after_photos"
-                                                       class="form-control" multiple="multiple"
-                                                       accept="image/*"/>
-                                                <small class="text-muted">
-                                                    Optional. Attach after repair is completed. Up to 4 photos (max 10MB each).
-                                                </small>
+                                                <div class="mb-3">
+                                                    <label for="resolution_description"
+                                                           class="form-label">
+                                                        Describe the Solution
+                                                    </label>
+                                                    <textarea name="resolution_description"
+                                                              id="resolution_description"
+                                                              class="form-control" rows="3"
+                                                              placeholder="How was the issue resolved?"/>
+                                                </div>
+                                                <div class="mb-3">
+                                                    <label for="after_photos" class="form-label fw-bold">
+                                                        After Photos (Completed Repair)
+                                                    </label>
+                                                    <input type="file" name="after_photos" id="after_photos"
+                                                           class="form-control" multiple="multiple"
+                                                           accept="image/*"/>
+                                                    <small class="text-muted">
+                                                        Attach after repair is completed. Up to 4 photos (max 10MB each).
+                                                    </small>
+                                                </div>
                                             </div>
                                         </div>
                                     </t>
diff --git a/fusion_authorizer_portal/views/portal_templates.xml b/fusion_authorizer_portal/views/portal_templates.xml
index 9f7818e..784433b 100644
--- a/fusion_authorizer_portal/views/portal_templates.xml
+++ b/fusion_authorizer_portal/views/portal_templates.xml
@@ -4,13 +4,17 @@
     <!-- ==================== PORTAL HOME EXTENSION ==================== -->
     
     <template id="portal_my_home_authorizer" inherit_id="portal.portal_my_home" priority="40">
-        <!-- Insert Fusion content at the very top, before alert category -->
-        <xpath expr="//div[@id='portal_alert_category']" position="before">
+        <!-- Insert Fusion content before the default portal docs grid -->
+        <xpath expr="//div[hasclass('o_portal_docs')]" position="before">
             <t t-if="request.env.user.partner_id.is_authorizer or request.env.user.partner_id.is_sales_rep_portal or request.env.user.partner_id.is_client_portal or request.env.user.partner_id.is_technician_portal">
+                <t t-set="fc_gradient" t-value="portal_gradient or 'linear-gradient(135deg, #5ba848 0%, #3a8fb7 60%, #2e7aad 100%)'"/>
+                <style>
+                    :root { --fc-portal-gradient: <t t-out="fc_gradient"/>; }
+                </style>
                 <!-- Welcome Banner -->
-                <div class="row mb-4">
+                <div class="row g-3 mb-4">
                     <div class="col-12">
-                        <div class="border-0 shadow-sm p-4" style="background: linear-gradient(135deg, #5ba848 0%, #3a8fb7 60%, #2e7aad 100%); border-radius: 12px;">
+                        <div class="border-0 shadow-sm p-4" t-attf-style="background: {{fc_gradient}}; border-radius: 12px;">
                             <div class="d-flex align-items-center text-white">
                                 <div class="flex-grow-1">
                                     <h4 class="mb-1" style="color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.1);">
@@ -71,7 +75,7 @@
                             <a href="/my/accessibility" class="card h-100 border-0 shadow-sm text-decoration-none" style="border-radius: 12px; min-height: 100px;">
                                 <div class="card-body d-flex align-items-center p-4">
                                     <div class="me-3">
-                                        <div class="rounded-circle d-flex align-items-center justify-content-center" style="width: 50px; height: 50px; background: linear-gradient(135deg, #5ba848 0%, #3a8fb7 60%, #2e7aad 100%);">
+                                        <div class="rounded-circle d-flex align-items-center justify-content-center" t-attf-style="width: 50px; height: 50px; background: {{fc_gradient}};">
                                             <i class="fa fa-wheelchair fa-lg text-white"/>
                                         </div>
                                     </div>
@@ -90,7 +94,7 @@
                             <a href="/my/sales" class="card h-100 border-0 shadow-sm text-decoration-none" style="border-radius: 12px; min-height: 100px;">
                                 <div class="card-body d-flex align-items-center p-4">
                                     <div class="me-3">
-                                        <div class="rounded-circle d-flex align-items-center justify-content-center" style="width: 50px; height: 50px; background: linear-gradient(135deg, #5ba848 0%, #3a8fb7 60%, #2e7aad 100%);">
+                                        <div class="rounded-circle d-flex align-items-center justify-content-center" t-attf-style="width: 50px; height: 50px; background: {{fc_gradient}};">
                                             <i class="fa fa-briefcase fa-lg text-white"/>
                                         </div>
                                     </div>
@@ -109,7 +113,7 @@
                             <a href="/my/assessments" class="card h-100 border-0 shadow-sm text-decoration-none" style="border-radius: 12px; min-height: 100px;">
                                 <div class="card-body d-flex align-items-center p-4">
                                     <div class="me-3">
-                                        <div class="rounded-circle d-flex align-items-center justify-content-center" style="width: 50px; height: 50px; background: linear-gradient(135deg, #5ba848 0%, #3a8fb7 60%, #2e7aad 100%);">
+                                        <div class="rounded-circle d-flex align-items-center justify-content-center" t-attf-style="width: 50px; height: 50px; background: {{fc_gradient}};">
                                             <i class="fa fa-clipboard fa-lg text-white"/>
                                         </div>
                                     </div>
@@ -131,7 +135,7 @@
                                 </t>
                                 <div class="card-body d-flex align-items-center p-4">
                                     <div class="me-3">
-                                        <div class="rounded-circle d-flex align-items-center justify-content-center" style="width: 50px; height: 50px; background: linear-gradient(135deg, #5ba848 0%, #3a8fb7 60%, #2e7aad 100%);">
+                                        <div class="rounded-circle d-flex align-items-center justify-content-center" t-attf-style="width: 50px; height: 50px; background: {{fc_gradient}};">
                                             <i class="fa fa-pencil-square-o fa-lg text-white"/>
                                         </div>
                                     </div>
@@ -172,7 +176,7 @@
                             <a href="/my/technician" class="card h-100 border-0 shadow-sm text-decoration-none" style="border-radius: 12px; min-height: 100px;">
                                 <div class="card-body d-flex align-items-center p-4">
                                     <div class="me-3">
-                                        <div class="rounded-circle d-flex align-items-center justify-content-center" style="width: 50px; height: 50px; background: linear-gradient(135deg, #5ba848 0%, #3a8fb7 60%, #2e7aad 100%);">
+                                        <div class="rounded-circle d-flex align-items-center justify-content-center" t-attf-style="width: 50px; height: 50px; background: {{fc_gradient}};">
                                             <i class="fa fa-truck fa-lg text-white"/>
                                         </div>
                                     </div>
@@ -191,7 +195,7 @@
                             <a href="/my/funding-claims" class="card h-100 border-0 shadow-sm text-decoration-none" style="border-radius: 12px; min-height: 100px;">
                                 <div class="card-body d-flex align-items-center p-4">
                                     <div class="me-3">
-                                        <div class="rounded-circle d-flex align-items-center justify-content-center" style="width: 50px; height: 50px; background: linear-gradient(135deg, #5ba848 0%, #3a8fb7 60%, #2e7aad 100%);">
+                                        <div class="rounded-circle d-flex align-items-center justify-content-center" t-attf-style="width: 50px; height: 50px; background: {{fc_gradient}};">
                                             <i class="fa fa-file-text-o fa-lg text-white"/>
                                         </div>
                                     </div>
@@ -206,16 +210,16 @@
                 </div>
                 
                 <!-- ADP Posting Schedule Card -->
-                <div class="row mb-4" t-if="next_posting_date">
+                <div class="row g-3 mb-4" t-if="next_posting_date">
                     <div class="col-12">
                         <div class="card shadow-sm border-0 overflow-hidden" style="border-radius: 12px;">
-                            <div class="card-header py-3" style="background: linear-gradient(135deg, #5ba848 0%, #3a8fb7 60%, #2e7aad 100%);">
+                            <div class="card-header py-3" t-attf-style="background: {{fc_gradient}};">
                                 <h5 class="mb-0 text-white"><i class="fa fa-calendar me-2"/>Upcoming ADP Posting Schedule</h5>
                             </div>
                             <div class="card-body" style="background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);">
                                 <div class="row align-items-center">
                                     <div class="col-md-4 text-center mb-3 mb-md-0">
-                                        <div class="rounded-3 p-4" style="background: linear-gradient(135deg, #5ba848 0%, #3a8fb7 60%, #2e7aad 100%);">
+                                        <div class="rounded-3 p-4" t-attf-style="background: {{fc_gradient}};">
                                             <small class="d-block" style="color: rgba(255,255,255,0.8);">Next ADP Posting</small>
                                             <h2 class="mb-1 text-white"><t t-out="next_posting_display"/></h2>
                                             <small style="color: rgba(255,255,255,0.8);"><t t-out="next_posting_weekday"/></small>
diff --git a/fusion_claims/models/res_config_settings.py b/fusion_claims/models/res_config_settings.py
index 4d6da9c..32013fd 100644
--- a/fusion_claims/models/res_config_settings.py
+++ b/fusion_claims/models/res_config_settings.py
@@ -487,6 +487,80 @@ class ResConfigSettings(models.TransientModel):
         help='Minimum 4 characters. Share with facility staff to access the repair form.',
     )
 
+    # =========================================================================
+    # PORTAL BRANDING
+    # =========================================================================
+
+    fc_portal_gradient_preset = fields.Selection([
+        ('green_teal', 'Green to Teal (Default)'),
+        ('blue_purple', 'Blue to Purple'),
+        ('orange_red', 'Sunset Orange'),
+        ('dark_slate', 'Dark Slate'),
+        ('custom', 'Custom'),
+    ],
+        string='Portal Gradient Theme',
+        config_parameter='fusion_claims.portal_gradient_preset',
+        default='green_teal',
+    )
+    fc_portal_gradient_start = fields.Char(
+        string='Gradient Start Color',
+        config_parameter='fusion_claims.portal_gradient_start',
+        default='#5ba848',
+    )
+    fc_portal_gradient_mid = fields.Char(
+        string='Gradient Mid Color',
+        config_parameter='fusion_claims.portal_gradient_mid',
+        default='#3a8fb7',
+    )
+    fc_portal_gradient_end = fields.Char(
+        string='Gradient End Color',
+        config_parameter='fusion_claims.portal_gradient_end',
+        default='#2e7aad',
+    )
+    fc_portal_gradient_preview = fields.Html(
+        string='Gradient Preview',
+        compute='_compute_portal_gradient_preview',
+        sanitize=False,
+    )
+
+    @api.onchange('fc_portal_gradient_preset')
+    def _onchange_portal_gradient_preset(self):
+        preset = self.fc_portal_gradient_preset
+        if preset and preset != 'custom' and preset in self.GRADIENT_PRESETS:
+            start, mid, end = self.GRADIENT_PRESETS[preset]
+            self.fc_portal_gradient_start = start
+            self.fc_portal_gradient_mid = mid
+            self.fc_portal_gradient_end = end
+
+    @api.depends(
+        'fc_portal_gradient_preset',
+        'fc_portal_gradient_start',
+        'fc_portal_gradient_mid',
+        'fc_portal_gradient_end',
+    )
+    def _compute_portal_gradient_preview(self):
+        for rec in self:
+            start = rec.fc_portal_gradient_start or '#5ba848'
+            mid = rec.fc_portal_gradient_mid or '#3a8fb7'
+            end = rec.fc_portal_gradient_end or '#2e7aad'
+            gradient = 'linear-gradient(135deg, %s 0%%, %s 60%%, %s 100%%)' % (start, mid, end)
+            rec.fc_portal_gradient_preview = (
+                '<div style="background: %s; border-radius: 12px; padding: 24px; min-height: 80px;">'
+                '<div style="display: flex; align-items: center; color: #fff;">'
+                '<div style="flex: 1;">'
+                '<h5 style="color: #fff; margin-bottom: 4px;">'
+                '<i class="fa fa-hand-peace-o" style="margin-right: 8px;"></i>'
+                'Welcome back, Preview User!</h5>'
+                '<small style="color: rgba(255,255,255,0.9);">'
+                'This is how your portal dashboard header will look.</small>'
+                '</div>'
+                '<div style="text-align: right;">'
+                '<div style="background: rgba(255,255,255,0.2); border-radius: 8px; padding: 8px 12px;">'
+                '<small style="display: block; color: rgba(255,255,255,0.8);">Preview</small>'
+                '<strong style="color: #fff;">Live</strong>'
+                '</div></div></div></div>'
+            ) % gradient
+
     @api.model
     def get_values(self):
         res = super().get_values()
@@ -603,6 +677,14 @@ class ResConfigSettings(models.TransientModel):
         elif not ICP.get_param('fusion_claims.odsp_default_office_id', ''):
             ICP.set_param('fusion_claims.odsp_default_office_id', '')
 
+        # Apply gradient preset colors to ICP so the portal reads them
+        preset = self.fc_portal_gradient_preset
+        if preset and preset != 'custom' and preset in self.GRADIENT_PRESETS:
+            start, mid, end = self.GRADIENT_PRESETS[preset]
+            ICP.set_param('fusion_claims.portal_gradient_start', start)
+            ICP.set_param('fusion_claims.portal_gradient_mid', mid)
+            ICP.set_param('fusion_claims.portal_gradient_end', end)
+
     # =========================================================================
     # ACTION METHODS
     # =========================================================================
@@ -618,3 +700,31 @@ class ResConfigSettings(models.TransientModel):
             'context': {},
         }
 
+    # -- Portal Gradient Presets -----------------------------------------------
+
+    GRADIENT_PRESETS = {
+        'green_teal': ('#5ba848', '#3a8fb7', '#2e7aad'),
+        'blue_purple': ('#4a90d9', '#7b68ee', '#6a5acd'),
+        'orange_red': ('#f7971e', '#e44d26', '#c0392b'),
+        'dark_slate': ('#2c3e50', '#4a6274', '#34495e'),
+    }
+
+    def _apply_gradient_preset(self, preset_key):
+        start, mid, end = self.GRADIENT_PRESETS[preset_key]
+        self.fc_portal_gradient_preset = preset_key
+        self.fc_portal_gradient_start = start
+        self.fc_portal_gradient_mid = mid
+        self.fc_portal_gradient_end = end
+
+    def action_set_gradient_green_teal(self):
+        self._apply_gradient_preset('green_teal')
+
+    def action_set_gradient_blue_purple(self):
+        self._apply_gradient_preset('blue_purple')
+
+    def action_set_gradient_orange_red(self):
+        self._apply_gradient_preset('orange_red')
+
+    def action_set_gradient_dark_slate(self):
+        self._apply_gradient_preset('dark_slate')
+
diff --git a/fusion_claims/views/ltc_repair_views.xml b/fusion_claims/views/ltc_repair_views.xml
index 5433c01..d410c2e 100644
--- a/fusion_claims/views/ltc_repair_views.xml
+++ b/fusion_claims/views/ltc_repair_views.xml
@@ -10,6 +10,9 @@
         <field name="arch" type="xml">
             <form string="Repair Request">
                 <header>
+                    <button name="action_create_sale_order" type="object"
+                            string="Create Sale Order" class="btn-primary"
+                            invisible="sale_order_id"/>
                     <field name="stage_id" widget="statusbar"
                            options="{'clickable': '1'}"/>
                 </header>
@@ -98,9 +101,6 @@
                                     <field name="repair_value"/>
                                 </group>
                             </group>
-                            <button name="action_create_sale_order" type="object"
-                                    string="Create Sale Order" class="btn-primary"
-                                    invisible="sale_order_id"/>
                         </page>
 
                         <page string="Photos &amp; Notes" name="photos">
diff --git a/fusion_claims/views/res_config_settings_views.xml b/fusion_claims/views/res_config_settings_views.xml
index 3fcaff5..fe9a4b2 100644
--- a/fusion_claims/views/res_config_settings_views.xml
+++ b/fusion_claims/views/res_config_settings_views.xml
@@ -519,6 +519,67 @@
                         </div>
                     </div>
 
+                    <!-- ===== PORTAL BRANDING ===== -->
+                    <h2>Portal Branding</h2>
+                    <div class="row mt16 o_settings_container">
+                        <div class="col-12 o_setting_box">
+                            <div class="o_setting_right_pane">
+                                <span class="o_form_label">Portal Gradient Theme</span>
+                                <div class="text-muted mb-3">
+                                    Choose a preset gradient or customize your own colors for the portal dashboard.
+                                </div>
+
+                                <div class="mb-3">
+                                    <field name="fc_portal_gradient_preset" widget="radio"/>
+                                </div>
+
+                                <div class="d-flex flex-wrap gap-2 mb-3">
+                                    <button type="object" name="action_set_gradient_green_teal"
+                                            class="btn btn-sm btn-outline-secondary d-flex align-items-center gap-2">
+                                        <span style="display:inline-block;width:20px;height:20px;border-radius:4px;background:linear-gradient(135deg,#5ba848 0%,#3a8fb7 60%,#2e7aad 100%);"/>
+                                        Green to Teal
+                                    </button>
+                                    <button type="object" name="action_set_gradient_blue_purple"
+                                            class="btn btn-sm btn-outline-secondary d-flex align-items-center gap-2">
+                                        <span style="display:inline-block;width:20px;height:20px;border-radius:4px;background:linear-gradient(135deg,#4a90d9 0%,#7b68ee 60%,#6a5acd 100%);"/>
+                                        Blue to Purple
+                                    </button>
+                                    <button type="object" name="action_set_gradient_orange_red"
+                                            class="btn btn-sm btn-outline-secondary d-flex align-items-center gap-2">
+                                        <span style="display:inline-block;width:20px;height:20px;border-radius:4px;background:linear-gradient(135deg,#f7971e 0%,#e44d26 60%,#c0392b 100%);"/>
+                                        Sunset Orange
+                                    </button>
+                                    <button type="object" name="action_set_gradient_dark_slate"
+                                            class="btn btn-sm btn-outline-secondary d-flex align-items-center gap-2">
+                                        <span style="display:inline-block;width:20px;height:20px;border-radius:4px;background:linear-gradient(135deg,#2c3e50 0%,#4a6274 60%,#34495e 100%);"/>
+                                        Dark Slate
+                                    </button>
+                                </div>
+
+                                <div class="row mb-3" invisible="fc_portal_gradient_preset != 'custom'">
+                                    <div class="col-md-4">
+                                        <span class="o_form_label">Start Color</span>
+                                        <field name="fc_portal_gradient_start" widget="color"/>
+                                    </div>
+                                    <div class="col-md-4">
+                                        <span class="o_form_label">Mid Color</span>
+                                        <field name="fc_portal_gradient_mid" widget="color"/>
+                                    </div>
+                                    <div class="col-md-4">
+                                        <span class="o_form_label">End Color</span>
+                                        <field name="fc_portal_gradient_end" widget="color"/>
+                                    </div>
+                                </div>
+
+                                <div class="mb-2">
+                                    <span class="o_form_label">Preview</span>
+                                    <div class="text-muted small">Preview updates after saving settings.</div>
+                                </div>
+                                <field name="fc_portal_gradient_preview" widget="html" readonly="1" class="border-0"/>
+                            </div>
+                        </div>
+                    </div>
+
                     <!-- Hidden fields for field mappings (still needed for ir.config_parameter storage) -->
                     <div class="d-none">
                         <field name="fc_field_sale_type"/>