feat: Introduce reusable template components and enhance styling utilities for consistent UI

templates/partials/components.html

@@ -0,0 +1,37 @@
+{% macro select_field(label_text, select_id, name=None, options=[], placeholder="Select an option", required=False, include_blank=True, value_attr="id", label_attr="name", placeholder_disabled=False, placeholder_selected=True, selected_value=None) %}
+<label for="{{ select_id }}">
+  {{ label_text }}
+  <select id="{{ select_id }}"{% if name %} name="{{ name }}"{% endif %}{% if required %} required{% endif %}>
+    {% if include_blank %}
+    <option value=""{% if placeholder_disabled %} disabled{% endif %}{% if placeholder_selected %} selected{% endif %}>{{ placeholder }}</option>
+    {% endif %}
+    {% for option in options %}
+      {% if option is mapping %}
+        {% set option_value = option[value_attr] %}
+        {% set option_label = option[label_attr] %}
+      {% else %}
+        {% set option_value = attribute(option, value_attr) %}
+        {% set option_label = attribute(option, label_attr) %}
+      {% endif %}
+    <option value="{{ option_value }}"{% if selected_value is not none and option_value|string == selected_value|string %} selected{% endif %}>{{ option_label }}</option>
+    {% endfor %}
+  </select>
+</label>
+{% endmacro %}
+
+{% macro feedback(id, hidden=True, role="status", extra_classes="") %}
+<p id="{{ id }}" class="feedback{% if hidden %} hidden{% endif %}{% if extra_classes %} {{ extra_classes }}{% endif %}" role="{{ role }}"></p>
+{% endmacro %}
+
+{% macro empty_state(id, text, hidden=False, extra_classes="") %}
+<p id="{{ id }}" class="empty-state{% if hidden %} hidden{% endif %}{% if extra_classes %} {{ extra_classes }}{% endif %}">{{ text }}</p>
+{% endmacro %}
+
+{% macro table_container(wrapper_id, hidden=False, aria_label=None, extra_classes="", heading=None, heading_level="h3") %}
+<div id="{{ wrapper_id }}" class="table-container{% if hidden %} hidden{% endif %}{% if extra_classes %} {{ extra_classes }}{% endif %}">
+  {% if heading %}<{{ heading_level }}>{{ heading }}</{{ heading_level }}>{% endif %}
+  <table{% if aria_label %} aria-label="{{ aria_label }}"{% endif %}>
+    {{ caller() }}
+  </table>
+</div>
+{% endmacro %}