Apply header component to all pages

templates/components/header.html

@@ -0,0 +1,29 @@
+{% macro header(title, description="", button_text="", button_url="", icon="fa-folder", button_class="", button_icon="fa-plus", button_style="") %}
+<header class="py-4">
+    <div class="container-fluid">
+        <div class="d-flex justify-content-between align-items-center">
+            <div>
+                <h3 class="mb-0">
+                    <i class="fas {{ icon }} me-2" style="color:#16767b;"></i>
+                    {{ title }}
+                </h3>
+                {% if description %}
+                    <p class="text-muted mb-0 mt-2 small">{{ description }}</p>
+                {% endif %}
+            </div>
+            {% if button_text and button_url %}
+                <div>
+                    <button onclick="window.location.href='{{ button_url }}'" 
+                            class="btn {{ button_class if button_class else '' }}" 
+                            style="{{ 'background-color: #16767b; color: white;' if not button_class else '' }}{{ '; ' + button_style if button_style else '' }}">
+                        {% if button_icon %}
+                            <i class="fas {{ button_icon }} me-1"></i>
+                        {% endif %}
+                        {{ button_text }}
+                    </button>
+                </div>
+            {% endif %}
+        </div>
+    </div>
+</header>
+{% endmacro %}