docs: add comprehensive Jinja macros documentation

New documentation:
- docs/frontend/shared/jinja-macros.md: Complete reference for all 94 macros
  - Alerts, Avatars, Badges, Buttons, Cards, Charts, Datepicker
  - Dropdowns, Forms, Headers, Modals, Pagination, Tables
  - Usage examples and parameter documentation
  - Complete page example showing all macros together

Updated documentation:
- docs/frontend/cdn-fallback-strategy.md:
  - Add Chart.js (v4.4.1) and Flatpickr (v4.6.13) sections
  - Document optional-libs.html loader macros
  - Update file structure and deployment checklist

- docs/frontend/shared/ui-components.md:
  - Add tip box recommending Jinja macros for new development
  - Update related documentation links

- mkdocs.yml:
  - Add Jinja Macros Library to navigation (top of Shared Components)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

docs/frontend/shared/ui-components.md

@@ -12,6 +12,22 @@ The admin panel uses a consistent set of UI components built with Tailwind CSS a
 
 **Live Component Library:** Visit `/admin/components` in the admin panel to see all components with copy-paste ready code.
 
+!!! tip "Use Jinja Macros Instead"
+    For new development, prefer using the **[Jinja Macros Library](jinja-macros.md)** instead of copy-pasting HTML. Macros provide:
+
+    - **Consistency:** Same styling across all pages
+    - **Maintainability:** Update once, apply everywhere
+    - **Less code:** Parameters instead of full HTML
+    - **Type safety:** Built-in Alpine.js bindings
+
+    ```jinja
+    {# Instead of 20 lines of HTML... #}
+    {% from 'shared/macros/buttons.html' import btn_primary %}
+    {{ btn_primary('Save Changes', icon='check', onclick='save()') }}
+    ```
+
+    See [Jinja Macros Library](jinja-macros.md) for full documentation.
+
 ---
 
 ## Page Layout Structure
@@ -462,6 +478,10 @@ function adminResourceList() {
 
 ## Related Documentation
 
+- **[Jinja Macros Library](jinja-macros.md)** - Reusable macro components (recommended)
+- [Pagination Guide](pagination.md)
+- [CDN Fallback Strategy](../cdn-fallback-strategy.md)
 - [Tailwind CSS](../tailwind-css.md)
+- [Icons Guide](../../development/icons-guide.md)
 - [Tailwind CSS Official Docs](https://tailwindcss.com/docs)
 - [Alpine.js Official Docs](https://alpinejs.dev/)