[FEAT] Objective 2: Modifying the graphical user interface to add custom resources + Test CSS

app.py

@@ -19,7 +19,7 @@ def load_css(file_path):
 css_path = pathlib.Path("assets/styles.css")
 load_css(css_path)
 
-st.markdown('<h1 class="custom-title">CRRA Toolkit: CDR Portfolio Optimization</h1>', unsafe_allow_html=True)
+st.markdown('<h1 class="custom-title">CRRA <span class="crra-hl">Toolkit</span>: CDR Portfolio Optimization</h1>', unsafe_allow_html=True)
 
 with st.sidebar:
     selected = option_menu(

assets/styles.css

@@ -1,4 +1,4 @@
-.cdr-table, .cdr-table-res{
+.cdr-table, .cdr-table-res, .resources-summary {
     width: 100%;
     border-collapse: separate;
     border-spacing: 0;
@@ -6,7 +6,7 @@
     overflow: hidden;
 }
 
-.cdr-table thead th, .cdr-table-res thead th{
+.cdr-table thead th, .cdr-table-res thead th, .resources-summary thead th{
     background-color: #3d86e9;
     color: white;
     font-weight: bold;
@@ -14,7 +14,7 @@
     text-align: center;
 }
 
-.cdr-table tbody th, .cdr-table-res tbody th{
+.cdr-table tbody th, .cdr-table-res tbody th, .resources-summary tbody th{
     text-align: center;
     color: #949393;
     font-weight: 100;
@@ -28,7 +28,7 @@
     text-align: center;
 }
 
-.cdr-table tbody tr:hover, .cdr-table-res tbody tr:hover {
+.cdr-table tbody tr:hover, .cdr-table-res tbody tr:hover, .resources-summary tbody tr:hover {
     background-color: #f5f5f5;
 }
 
@@ -37,21 +37,116 @@
     font-weight: 600;
 }
 
-h1.custom-header {
+h1.custom-title {
     font-family: "Segoe UI", sans-serif;
-    font-weight: bold;
+    font-size: 60px;
     font-style: italic;
-    font-size: 35px;
+    line-height: 0.95em;
 }
 
-h1.custom-title {
-    font-family: "Segoe UI", sans-serif;
-    font-weight: bold;
-    font-size: 50px;
-    font-style: italic;
+.crra-hl {
+    background: linear-gradient(90deg, #D9E210 0%, #92EF9B 99%);
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    padding-right: 6px;
 }
 
 div.custom-corps {
     font-family: "Segoe UI", sans-serif;
     font-size: 18px;
+}
+
+.resources-summary tbody {
+    text-align: center
+}
+
+.text_with_border {
+    border-left: 3px solid #FF5F4D;
+    padding-left: 16px;
+    font-family: "Segoe UI", sans-serif;
+    /* font-style: italic; */
+    font-weight: 600;
+    font-size: 18px !important;
+}
+
+.objective_title {
+    color: #FF5F4D;
+    font-family: "Segoe UI", sans-serif;
+    font-size: 14px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.094444em;
+    margin: 0 0 8px 0;
+}
+
+.st-key-warning_resources [data-testid="stAlert"] {
+    background-color: #EAE9D8!important;
+    clip-path: polygon(1.5% 0, 100% 0, 98.5% 100%, 0 100%);
+}
+
+.st-key-warning_resources p{
+    font-family: 'Segoe UI', sans-serif;
+    font-style: italic;
+    font-size: 16px;
+    font-weight: 600;
+    color: #665d5b;
+}
+
+.st-key-warning_resources span{
+    font-style: italic;
+    color: #665d5b;
+}
+
+.crra-heading {
+    font-family: 'Segoe UI', sans-serif !important;
+    font-weight: 700;
+    font-style: italic;
+    font-size: clamp(32px, 2.5vw, 55px) !important;
+    line-height: 1.25em;
+    margin: 0;
+    padding: 0;
+}
+
+.et_pb_module {
+    margin-bottom: 30px
+}
+
+.crra-sub-heading {
+    font-family: 'Segoe UI', sans-serif !important;
+    font-weight: 700;
+    font-style: italic;
+    font-size: clamp(25px, 2vw, 32px) !important;
+    line-height: 1.25em;
+    color: #665D5B !important;
+    margin-bottom: 15px;
+    margin-top: 30px !important;
+}
+
+
+/* buttons */
+.st-key-btn-reset button {
+    border-width: 0px !important;
+    border-radius: 0px;
+    color: #FFFFFF;
+    background: #FF5F4D;
+    display: inline-flex;
+    align-items: center;
+    height: clamp(52px, 3.125vw, 74px);
+    padding: 0 clamp(20px, 2.625vw, 42px);
+    clip-path: polygon(16px 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
+    transition: background 0.25s ease;
+}
+
+.st-key-btn-reset button p{
+    font-weight: 700 !important;
+    font-family: "Segoe UI", sans-serif;
+    font-size: clamp(14px, 0.900vw, 18px);
+    letter-spacing: 0.094444em;
+    text-decoration: none;
+    text-transform: uppercase;
+}
+
+.st-key-btn-reset button:hover{
+    background: #E5503F;
+    color: #FFFFFF;
 }

optimization/optimization.py

@@ -2,7 +2,7 @@ import numpy as np
 from scipy.optimize import linprog
 
 
-def run_optimization(resource_caps, method_constraints, method_costs):
+def run_optimization(resource_caps, method_constraints, method_costs, custom_resources=None):
     """
     Run linear optimization to maximize CO₂ removal while respecting resource limits and method constraints.
 
@@ -12,11 +12,30 @@ def run_optimization(resource_caps, method_constraints, method_costs):
             cap_type: "percent" → cap_value is a fraction of total (0 to 1)
             cap_type: "absolute" → cap_value is a hard upper bound in CO₂ units
         method_costs (dict): {method: {resource: usage_per_tCO2}}
+        custom_resources (list | None): list of custom batch dicts: [{"name": str, "group": str, "amount": float, "methods": {method: {"min", "median", "max"}}}]
+            If provided, each batch is injected as an extra resource row.
 
     Returns:
         (bool, dict): (success_flag, result_dict)
             result_dict includes "total_removed", "method_usage"
     """
+    # ── Inject custom resource batches ────────────────────────────────────────
+    # Work on shallow copies so callers are not mutated.
+    resource_caps = dict(resource_caps)
+    method_costs = {m: dict(v) for m, v in method_costs.items()}
+ 
+    for batch in (custom_resources or []):
+        r_key = batch["name"]
+        resource_caps[r_key] = batch["amount"]
+        for method, coefs in batch["methods"].items():
+            if method in method_costs:
+                method_costs[method][r_key] = coefs["median"]
+            else:
+                method_costs[method] = {r_key: coefs["median"]}
+
+
+    # ── Standard optimisation setup ───────────────────────────────────────────
+
     # Only keep active methods
     methods = [m for m in method_costs if method_constraints.get(m, {}).get("active", True)]
     resources = list(resource_caps.keys())

tabs/tab0_welcome.py

@@ -1,8 +1,10 @@
 import streamlit as st
 from config.config import CO2_UNIT
+from utils.ui_helpers import show_bar
 
 def render_tab():
-    st.markdown('<h1 class="custom-header">Welcome!</h1>', unsafe_allow_html=True)
+    st.markdown('<h1 class="crra-heading">Welcome!</h1>', unsafe_allow_html=True)
+    show_bar()
     st.markdown(f"""
     <div class='custom-corps'>
     This tool helps you optimize your carbon direct removal portfolio by adjusting resource usage and constraints.

tabs/tab1_inputs.py

@@ -2,10 +2,327 @@ import pandas as pd
 import streamlit as st
 
 from config.config import (resource_groups, resource_order, resource_tooltips,
-                           resource_unit_map)
+                           resource_unit_map, method_groups, method_order, CO2_UNIT)
 from utils.data_utils import render_resource_input
-from utils.ui_helpers import format_resource_summary
+from utils.ui_helpers import format_resource_summary, show_bar
+from io import BytesIO
 
+# ─── Custom resource helpers ──────────────────────────────────────────────────
+
+def standard_resource_names():
+    """Flat set of all standard resource names (without unit suffixes)."""
+    return {r for rlist in resource_groups.values() for r in rlist}
+
+
+def init_custom_resources():
+    if "custom_resources" not in st.session_state:
+        st.session_state.custom_resources = []
+
+
+# ─── Dialog: add / edit a custom resource batch ───────────────────────────────
+
+@st.dialog("Add a custom resource", width="large")
+def dialog_add_custom_resource(edit_index: int | None = None):
+    """
+    Full-screen dialog to create or edit a custom resource batch.
+    edit_index: index in st.session_state.custom_resources to edit (None = new).
+    """
+
+    standard_names = standard_resource_names()
+    existing_names = {
+        b["name"] for i, b in enumerate(st.session_state.custom_resources)
+        if i != edit_index
+    }
+
+    # Pre-fill values when editing
+    existing = st.session_state.custom_resources[edit_index] if edit_index is not None else {}
+
+    st.markdown("### 1 — Name & group")
+    col_name, col_group = st.columns(2)
+
+    with col_name:
+        batch_name = st.text_input(
+            "Resource name *",
+            value=existing.get("name", ""),
+            placeholder="e.g. Degraded forest lands – North",
+            help="It can't match the name of an existing resource.",
+        )
+
+    with col_group:
+        groups = list(resource_groups.keys())
+        default_group_idx = groups.index(existing["group"]) if existing.get("group") in groups else 0
+        batch_group = st.selectbox(
+            "Resource group *",
+            options=groups,
+            index=default_group_idx,
+            help="Determines the physical unit of this resource.",
+        )
+
+    unit = resource_unit_map.get(batch_group, "?")
+    st.caption(f"Unit for this group: **{unit}** (per MtCO₂ for coefficients)")
+
+    st.markdown("### 2 — Available quantity")
+    batch_amount = st.number_input(
+        f"Available amount ({unit})",
+        min_value=0.0,
+        format="%.2f",
+        value=float(existing.get("amount", 0.0)),
+        help=f"Total quantity available for 1 year, in {unit}.",
+    )
+
+    st.markdown("### 3 — Allowed CDR methods & coefficients")
+    st.caption(
+        f"Select which methods can use this resource and enter their resource consumption coefficients in **{unit}/{CO2_UNIT}**."
+    )
+
+    existing_methods = existing.get("methods", {})
+    method_configs = {}
+
+    for group_name, methods in method_groups.items():
+        with st.expander(f"**{group_name}**", expanded=False):
+            for m in methods:
+                prev = existing_methods.get(m)
+                enabled_default = prev is not None
+                enabled = st.checkbox(f"**{m}**", value=enabled_default, key=f"_dlg_chk_{m}")
+
+                if enabled:
+                    col_min, col_med, col_max = st.columns(3)
+                    with col_min:
+                        v_min = st.number_input(
+                            "Min", min_value=0.0, format="%.4f",
+                            value=float(prev["min"] if prev else 0.0),
+                            key=f"_dlg_min_{m}",
+                        )
+                    with col_med:
+                        v_med = st.number_input(
+                            "Median ★", min_value=0.0, format="%.4f",
+                            value=float(prev["median"] if prev else 0.0),
+                            key=f"_dlg_med_{m}",
+                        )
+                    with col_max:
+                        v_max = st.number_input(
+                            "Max", min_value=0.0, format="%.4f",
+                            value=float(prev["max"] if prev else 0.0),
+                            key=f"_dlg_max_{m}",
+                        )
+                    method_configs[m] = {"min": v_min, "median": v_med, "max": v_max}
+
+    # ── Save / cancel ──────────────────────────────────────────────────────────
+    error_placeholder = st.empty()
+
+    col_save, col_cancel = st.columns([2, 2])
+
+    with col_cancel:
+        if st.button("Cancel", use_container_width=True):
+            st.rerun()
+
+    def _validate():
+        errors = []
+        if not batch_name.strip():
+            errors.append("Resource name is required.")
+        elif batch_name.strip() in standard_names:
+            errors.append(f"**{batch_name}** matches a standard resource name. Choose a different name.")
+        elif batch_name.strip() in existing_names:
+            errors.append(f"**{batch_name}** already exists. Choose a different name.")
+        if batch_amount <= 0:
+            errors.append("Available amount must be greater than 0.")
+        if not method_configs:
+            errors.append("Select at least one CDR method.")
+        #consistency check min / median / max
+        for m, c in method_configs.items():
+            if c["min"] > c["max"]:
+                errors.append(f"**{m}**: min ({c['min']}) cannot be greater than max ({c['max']}).")
+            if not (c["min"] <= c["median"] <= c["max"]):
+                errors.append(f"**{m}**: median must be between min and max.")
+        return errors
+
+    with col_save:
+        if st.button("Add to session", type="primary", use_container_width=True, icon=":material/check:"):
+            errors = _validate()
+            if errors:
+                with error_placeholder.container():
+                    for e in errors:
+                        st.error(e, icon=":material/error:")
+            else:
+                batch = {
+                    "name": batch_name.strip(),
+                    "group": batch_group,
+                    "amount": batch_amount,
+                    "methods": method_configs,
+                }
+                if edit_index is not None:
+                    st.session_state.custom_resources[edit_index] = batch
+                else:
+                    st.session_state.custom_resources.append(batch)
+                # Clear any cached optimization results since inputs changed
+                st.session_state.pop("latest_result", None)
+                st.rerun()
+    return method_configs
+
+# ─── Load custom resource from a saved Excel ────────────────────────────────────
+
+def to_excel_bytes(df: pd.DataFrame) -> bytes:
+    buffer = BytesIO()
+    with pd.ExcelWriter(buffer, engine="openpyxl") as writer:
+        df.to_excel(writer, index=False, sheet_name="custom_resources")
+    return buffer.getvalue()
+
+@st.dialog("Load a saved resource batch", width="large")
+def dialog_load_custom_batch():
+    st.caption("Import a Excel file that you have previously exported from the ‘Custom resource’ section")
+    uploaded = st.file_uploader("Upload Excel file", type=["xlsx"])
+    if uploaded is None:
+        return
+
+    try:
+        df = pd.read_excel(uploaded, sheet_name=0)
+        required = {"name", "group", "amount", "method", "min", "median", "max"}
+        if not required.issubset(df.columns):
+            st.error(f"Missing columns: {required - set(df.columns)}")
+            return
+
+        standard_names = standard_resource_names()
+        existing_names = {b["name"] for b in st.session_state.custom_resources}
+
+        batches_in_file = df["name"].unique()
+        for bname in batches_in_file:
+            df_b = df[df["name"] == bname]
+            group = df_b["group"].iloc[0]
+            amount = float(df_b["amount"].iloc[0])
+            methods = {
+                row["method"]: {"min": row["min"], "median": row["median"], "max": row["max"]}
+                for _, row in df_b.iterrows()
+            }
+            batch = {"name": bname, "group": group, "amount": amount, "methods": methods}
+
+            st.markdown(f"**Batch:** {bname} | Group: {group} | Amount: {amount} | Methods: {len(methods)}")
+
+            if bname in standard_names:
+                st.error(f"'{bname}' matches a standard resource. Skipped.")
+                continue
+            if bname in existing_names:
+                st.warning(f"'{bname}' already exists in session. It will be overwritten.")
+                idx = next(i for i, b in enumerate(st.session_state.custom_resources) if b["name"] == bname)
+                st.session_state.custom_resources[idx] = batch
+            else:
+                st.session_state.custom_resources.append(batch)
+
+        st.success(f"Loaded {len(batches_in_file)} batch(es) from file.")
+        st.session_state.pop("latest_result", None)
+        st.rerun()
+
+    except Exception as e:
+        st.error(f"Error loading file: {e}")
+
+
+# ─── Custom resources management panel ────────────────────────────────────────
+
+def panel_custom_resources():
+    """Panel displayed at the top of the inputs tab to manage custom batches."""
+    init_custom_resources()
+
+    st.markdown("### ➕ Custom resource")
+    st.caption(
+        "Add sub-batches for any resource group and manually assign them to specific CDR methods. "
+        "Standard resources above use the default taxonomy; custom batches give you full control."
+    )
+
+    col_add, col_load = st.columns([1, 1])
+    with col_add:
+        if st.button("New resource", use_container_width=True, type="primary", icon=":material/add:"):
+            dialog_add_custom_resource()
+    with col_load:
+        if st.button("Load from Excel", use_container_width=True, icon=":material/arrow_upload_progress:"):
+            dialog_load_custom_batch()
+
+    batches = st.session_state.custom_resources
+    if not batches:
+        st.info("No custom batches defined yet. Click **+ New resource** to get started.")
+        return
+
+    st.markdown(f"**{len(batches)} custom batch(es) active**")
+
+    for i, batch in enumerate(batches):
+        unit = resource_unit_map.get(batch["group"], "?")
+        n_methods = len(batch["methods"])
+
+        with st.expander(
+            f"🆕 {batch['group']} ({unit}) - CDR methods: **{n_methods}**",
+            expanded=False,
+        ):
+            st.markdown(f"**{batch['name']}**")
+
+            col_amount, _, _, _ = st.columns(4)
+            with col_amount:
+                new_amount = st.number_input(
+                    "Available amount",
+                    label_visibility= "collapsed",
+                    min_value=0.0,
+                    value=float(batch["amount"]),
+                    format="%.2f",
+                    key=f"custom_amount_{i}",
+                )
+
+            if new_amount != batch["amount"]:
+                batch["amount"] = new_amount
+                st.session_state.pop("latest_result", None)
+
+            # Summary table
+            rows = [
+                {
+                    "Method": m,
+                    f"Min ({unit}/MtCO₂)": f"{c['min']:.2f}",
+                    f"Median ({unit}/MtCO₂)": f"{c['median']:.2f}",
+                    f"Max ({unit}/MtCO₂)": f"{c['max']:.2f}",
+                }
+                for m, c in batch["methods"].items()
+            ]
+
+            st.dataframe(
+                pd.DataFrame(rows),
+                use_container_width=True,
+                hide_index=True,
+            )
+
+            col_edit, col_del = st.columns([1, 1])
+            with col_edit:
+                if st.button("Edit", key=f"edit_batch_{i}", use_container_width=True, icon=":material/edit:"):
+                    method_configs = dialog_add_custom_resource(edit_index=i)
+                    print(method_configs)
+            with col_del:
+                if st.button("Delete", key=f"del_batch_{i}", use_container_width=True, type="primary", icon=":material/delete:"):
+                    st.session_state.custom_resources.pop(i)
+                    st.session_state.pop("latest_result", None)
+                    st.rerun()
+
+    # ── Export all batches as a single Excel file ─────────────────────────────────────
+    _,_,col_save_custom = st.columns(3)
+    with col_save_custom:
+        all_rows = []
+
+        for batch in batches:
+            for m, coefs in batch["methods"].items():
+                all_rows.append({
+                    "name": batch["name"],
+                    "group": batch["group"],
+                    "amount": batch["amount"],
+                    "method": m,
+                    "min": coefs["min"],
+                    "median": coefs["median"],
+                    "max": coefs["max"],
+                })
+
+        df_export = pd.DataFrame(all_rows)
+
+        st.download_button(
+            "Save all custom resources (Excel)",
+            data=to_excel_bytes(df_export),
+            file_name="custom_resources.xlsx",
+            mime="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+            icon=":material/save:",
+        )
+
+# ─── Main render ──────────────────────────────────────────────────────────────
 
 def render_tab():
     # Safe session init
@@ -14,56 +331,70 @@ def render_tab():
     for r in resource_order:
         if r not in st.session_state.resource_caps:
             st.session_state.resource_caps[r] = 0.0
-    st.markdown('<h1 class="custom-header">Resource inputs</h1>', unsafe_allow_html=True)
+    init_custom_resources()
 
-    st.info("""
-    **Objective:**
+    st.markdown('<h1 class="crra-heading">Resource inputs</h1>', unsafe_allow_html=True)
+    show_bar()
+    
+    st.markdown(
+        """
+        <p class="objective_title">OBJECTIVE</p>
+        """,
+        unsafe_allow_html=True,
+    )
 
-    This section lets you define the **total available quantities of each resource** for the optimization model.
-    """)
+    st.markdown("""
+    <p class="text_with_border"> This section lets you define the total available quantities of each resource for the optimization model.</p>
+    """,
+        unsafe_allow_html=True,
+    )
 
-    st.warning("Resources with zero availability will block portfolio feasibility if required by active methods.", icon=":material/warning:")
+    with st.container(key="warning_resources"):
+        st.warning(
+            "Resources with zero availability will block portfolio feasibility if required by active methods.",
+            icon=":material/warning:"
+        )
 
     # Reset button
-    st.markdown("### Controls")
-    col_reset, _ = st.columns([1, 5])
-
-    with col_reset:
-        if st.button("🔄 Reset All", type="secondary"):
-            for r in st.session_state.resource_caps:
-                st.session_state.resource_caps[r] = 0.0
-            st.success("All resource values reset to 0.")
-            st.rerun()
+    st.markdown("""
+        <p class="crra-sub-heading">Controls</p>""",
+        unsafe_allow_html=True,
+    )
+
+    if st.button("RESET ALL", key="btn-reset", icon=":material/reset_settings:"):
+        for r in st.session_state.resource_caps:
+            st.session_state.resource_caps[r] = 0.0
+        st.session_state.custom_resources = []
+        st.success("All resource values reset to 0.")
+        st.rerun()
 
-    # Dowload template
-    st.markdown("**Import resource values**")
+    # Import / download template
+    st.markdown("##### Import resource values")
     col_template, col_upload = st.columns([1, 1])
     with col_template:
         st.markdown("Use the template below to fill in your resource availability values and import them directly into the tool.")
-        st.warning("The change of unit in the template will not be taken into account.", icon=":material/warning:")
         with open("data/resource_template.xlsx", "rb") as f:
             st.download_button(
                 label="Download Excel Template",
                 data=f,
                 file_name="resource_template.xlsx",
-                use_container_width= True,
+                use_container_width=True,
                 mime="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
-                icon=":material/download:"
+                icon=":material/download:",
             )
     with col_upload:
         uploaded_file = st.file_uploader(
             "Upload your Excel file", type="xlsx",
             key=f"resource_uploader_{st.session_state.get('resource_uploader_key', 0)}"
         )
-        
+
         if uploaded_file is not None and uploaded_file.name != st.session_state.get("resource_last_loaded_file"):
             try:
                 df = pd.read_excel(uploaded_file)
-                required_cols = {"Resource", "Unit", "Available Amount"}
+                required_cols = {"Resource", "Available Amount"}
                 if not required_cols.issubset(df.columns):
                     raise ValueError(f"Missing columns: {required_cols - set(df.columns)}")
-                
-                # Reset tout à 0 avant d'appliquer le fichier
+
                 for r in st.session_state.resource_caps:
                     st.session_state.resource_caps[r] = 0.0
                     st.session_state[f"cap_{r}"] = 0.0
@@ -94,10 +425,8 @@ def render_tab():
 
         elif st.session_state.get("resource_last_loaded_file"):
             st.success(f"Loaded: **{st.session_state['resource_last_loaded_file']}**", icon="✅")
-            
-    col_reset, _ = st.columns([1, 5])
 
-    # Inputs by resource group
+    # ── Standard resource inputs ───────────────────────────────────────────────
     st.markdown("### Set available resources for one year")
     for group, rlist in resource_groups.items():
         unit = resource_unit_map.get(group, "")
@@ -109,16 +438,54 @@ def render_tab():
                 with cols[i % 4]:
                     render_resource_input(name_clean, r, tooltip=tooltip)
 
-    # Summary table
+    # ── Custom resource batches panel ──────────────────────────────────────────
+    panel_custom_resources()
+
+    # ── Summary table ──────────────────────────────────────────────────────────
     st.markdown("### Summary of available resources")
-    df_caps = pd.DataFrame.from_dict({
-        r: st.session_state.resource_caps[r]
-        for r in resource_order if st.session_state.resource_caps.get(r, 0.0) > 0
-    }, orient="index", columns=["Available Amount"]).reindex(resource_order).dropna()
-
-    if not df_caps.empty:
-        df_caps.columns = ["Available Amount"]
-        styled = format_resource_summary(df_caps)
-        st.table(styled)
+
+    # Standard resources
+    df_caps = pd.DataFrame.from_dict(
+        {r: st.session_state.resource_caps[r] for r in resource_order
+         if st.session_state.resource_caps.get(r, 0.0) > 0},
+        orient="index", columns=["Available Amount"]
+    ).reindex(resource_order).dropna()
+
+    # Custom resource rows
+    custom_rows = []
+    for batch in st.session_state.get("custom_resources", []):
+        unit = resource_unit_map.get(batch["group"], "?")
+        custom_rows.append({
+            "Resource": f"{batch['name']}",
+            "Available Amount": batch["amount"],
+        })
+
+    if not df_caps.empty or custom_rows:
+
+        # --- Standard resources ---
+        dfs = []
+
+        if not df_caps.empty:
+            df_std = df_caps.copy()
+            df_std = df_std.rename(columns={"Available Amount": "Available Amount"})
+            df_std["Type"] = "Standard"
+            dfs.append(df_std)
+
+        # --- Custom resources ---
+        if custom_rows:
+            df_custom = pd.DataFrame(custom_rows).set_index("Resource")
+            df_custom["Type"] = "Custom"
+            dfs.append(df_custom)
+
+        # --- Merge ---
+        df_all = pd.concat(dfs)
+
+        # Optionnel : ordre des colonnes
+        cols = ["Type", "Available Amount"]
+        df_all = df_all[cols]
+
+        # Styling
+        st.markdown(format_resource_summary(df_all), unsafe_allow_html=True)
+
     else:
-        st.error("No resources defined yet. Set availability above to populate the summary table.")
+        st.error("No resources defined yet. Set availability above to populate the summary table.")

tabs/tab2_constraints.py

@@ -4,7 +4,7 @@ import pandas as pd
 import streamlit as st
 
 from config.config import CO2_UNIT, method_groups, method_order, method_tooltips
-from utils.ui_helpers import format_table_summary
+from utils.ui_helpers import format_table_summary, show_bar
 
 
 # ─── Helpers ─────────────────────────────────────────────────────────────────
@@ -108,7 +108,9 @@ def build_summary_df():
 # ─── Main render ─────────────────────────────────────────────────────────────
 
 def render_tab():
-    st.markdown('<h1 class="custom-header">Method constraints</h1>', unsafe_allow_html=True)
+    st.markdown('<h1 class="crra-heading">Method constraints</h1>', unsafe_allow_html=True)
+    show_bar()
+    
     st.info("""
     **Objective:**
 

tabs/tab3_coefficients.py

@@ -3,7 +3,7 @@ import streamlit as st
 
 from config.config import (method_groups, method_order, resource_groups,
                            resource_order, secondary_resources, resource_unit_map, CO2_UNIT)
-from utils.ui_helpers import format_efficiency_summary
+from utils.ui_helpers import format_efficiency_summary, show_bar
 from utils.data_utils import strip_unit_suffix
 
 
@@ -26,8 +26,9 @@ def _get_slider_params(conf: dict) -> tuple:
 
 
 def render_tab(cost_sliders):
-    st.header("Resource efficiency coefficients")
-
+    st.markdown('<h1 class="crra-heading">Resource efficiency coefficients</h1>', unsafe_allow_html=True)
+    show_bar()
+    
     st.info("""
     **Objective:**
 

tabs/tab4_optimization.py

@@ -14,7 +14,7 @@ import plotly.graph_objects as go
 
 from config.config import method_order, resource_order, resource_unit_map, resource_groups, secondary_resources, CO2_UNIT
 from optimization.optimization import run_optimization
-from utils.ui_helpers import format_table_summary
+from utils.ui_helpers import format_table_summary, show_bar
 from utils.data_utils import is_valid_scenario, load_inputs_from_excel, strip_unit_suffix
 
 
@@ -520,7 +520,9 @@ def reset_scenario():
 # ─── Main tab entry point ─────────────────────────────────────────────────────
 
 def render_tab():
-    st.header("Portfolio generation")
+    st.markdown('<h1 class="crra-heading">Portfolio generation</h1>', unsafe_allow_html=True)
+    show_bar()
+
     st.info(
         "Run the optimization tool, explore results and save scenarios for comparison or export."
     )

tabs/tab5_sensitivity.py

@@ -5,10 +5,13 @@ import streamlit as st
 
 from config.config import CO2_UNIT, method_order, resource_order
 from optimization.optimization import run_optimization
+from utils.ui_helpers import show_bar
 
 
 def render_tab():
-    st.header("Sensitivity analysis")
+    st.markdown('<h1 class="crra-heading">Sensitivity analysis</h1>', unsafe_allow_html=True)
+    show_bar()
+
     st.info("""
         **Objective**:
         

tabs/tab6_scenarios.py

@@ -7,6 +7,7 @@ import streamlit as st
 from config.config import CO2_UNIT
 from utils.data_utils import is_valid_scenario
 from tabs.tab4_optimization import parse_zip_scenario
+from utils.ui_helpers import show_bar
 
 
 # ─── Load from file ───────────────────────────────────────────────────────────
@@ -128,7 +129,8 @@ def _show_resource_usage(df):
 # ─── Main tab entry point ─────────────────────────────────────────────────────
 
 def render_tab():
-    st.header("Scenario Comparison")
+    st.markdown('<h1 class="crra-heading">Scenario Comparison</h1>', unsafe_allow_html=True)
+    show_bar()
 
     st.session_state.setdefault("scenarios", {})
 

utils/ui_helpers.py

@@ -6,6 +6,21 @@ from config.config import CO2_UNIT
 # params
 background_color = "#3d86e9"
 
+def show_bar():
+    st.markdown(
+        """
+        <div class="et_pb_module">
+            <div style="display:flex;width:100%;height:12px;margin:0 auto 0 0;">
+                <span style="flex:1;background:#FF5F4D;"></span>
+                <span style="flex:1;background:#A0A0A0;"></span>
+                <span style="flex:1;background:#D9E210;"></span>
+                <span style="flex:1;background:#55C95B;"></span>
+            </div>
+        </div>
+        """,
+        unsafe_allow_html=True,
+    )
+
 def styled_table(df):
     return (
         df.style
@@ -41,23 +56,6 @@ def format_table_summary(df: pd.DataFrame, class_name: str):
 
     html = df.to_html(index=True, classes=class_name, border=0)
     return html
-
-    # df = df.copy()
-    # df.index.name = "CDR Method"
-    # df.reset_index(inplace=True)
-
-    # return (
-    #     df.style
-    #     .format({
-    #         f"{CO2_UNIT} removed": "{:,.0f}",
-    #         "Share (%)": "{:.2f}"
-    #     })
-    #     .set_table_styles([
-    #         {"selector": "thead th", "props": [("background-color", background_color), ("color", "white"), ("font-weight", "bold")]},
-    #         {"selector": "td.col0", "props": [("text-align", "left"), ("font-weight", "bold")]},
-    #         {"selector": "td.col1", "props": [("text-align", "center")]}
-    #     ])
-    # )
     
 def format_efficiency_summary(df: pd.DataFrame, df_default: pd.DataFrame):
     df_numeric = df.copy()
@@ -189,31 +187,11 @@ def format_resource_summary(df: pd.DataFrame):
     Format a resource availability summary table with styling and column width control.
     """
     df = df.copy()
-    col = df.columns[0]
-    df[col] = df[col].map(lambda x: f"{x:,.2f}")
-    df.index.name = "Resource"  # label the index for clarity
-
-    return (
-        df.style
-            .set_table_styles([
-                {
-                    "selector": "thead th:nth-child(1)",  # First column header (after index)
-                    "props": [
-                        ("background-color", background_color),
-                        ("color", "white"),
-                        ("font-weight", "bold")
-                    ]
-                },
-                {
-                    "selector": "thead th:nth-child(2)",  # Second column header
-                    "props": [
-                        ("background-color", background_color),
-                        ("color", "white"),
-                        ("font-weight", "bold")
-                    ]
-                }
-            ])
-    )
+    df.index.name = "Resource"
+    df = df.reset_index()
+    
+    html = df.to_html(index=True, classes="resources-summary", border=0)
+    return html
 
 def smart_display_format(val):
     if abs(val) < 1e-8: