Apply header component to all pages

templates/rooms/rooms.html

@@ -1,20 +1,21 @@
 {% extends "common/base.html" %}
+{% from "components/header.html" import header %}
 
 {% block title %}Rooms - DocuPulse{% endblock %}
 
 {% block content %}
-<div class="container mt-4">
-    <div class="row mb-4">
-        <div class="col">
-            <h2>Rooms</h2>
-        </div>
-        <div class="col text-end">
-            <a href="{{ url_for('rooms.create_room') }}" class="btn btn-primary">
-                <i class="fas fa-plus"></i> New Room
-            </a>
-        </div>
-    </div>
+{{ header(
+    title="Rooms",
+    description="Manage your document rooms and collaborate with team members",
+    button_text="New Room",
+    button_url=url_for('rooms.create_room'),
+    icon="fa-door-open",
+    button_icon="fa-plus",
+    button_class="btn-primary",
+    button_style="padding: 0.4rem 1rem;"
+) }}
 
+<div class="container mt-4">
     <!-- Search and Filter Section -->
     <div class="bg-white rounded-lg shadow-sm p-4 mb-4">
         <form method="GET" class="d-flex align-items-center w-100 justify-content-between" id="roomFilterForm" style="gap: 1rem;">