templates/base.html.twig line 1

Open in your IDE?
  1. <!DOCTYPE html>
  2. <html lang="fr">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.         <title>{% block title %}PaySolution - Gestion des factures d'électricité{% endblock %}</title>
  7.         <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>💡</text></svg>">
  8.         <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
  9.         
  10.         {% block stylesheets %}
  11.             {{ encore_entry_link_tags('app') }}
  12.         {% endblock %}
  14.         {% block javascripts %}
  15.             {{ encore_entry_script_tags('app') }}
  16.             <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
  17.         {% endblock %}
  18.     </head>
  19.     <body class="min-h-screen flex flex-col bg-gray-50" style="font-family: 'Inter', sans-serif;">
  20.         <!-- Navigation -->
  21.         <nav class="bg-white shadow-lg border-b-4 border-primary">
  22.             <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
  23.                 <div class="flex justify-between h-16">
  24.                     <div class="flex items-center">
  25.                         <div class="flex-shrink-0 flex items-center">
  26.                             <div class="flex items-center space-x-2">
  27.                                 <div class="w-10 h-10 bg-gradient-to-br from-primary to-primary-dark rounded-lg flex items-center justify-center">
  28.                                     <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  29.                                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
  30.                                     </svg>
  31.                                 </div>
  32.                                 <span class="text-xl font-bold text-gray-900">Pay<span class="text-primary">Solution</span></span>
  33.                             </div>
  34.                         </div>
  35.                         <div class="hidden md:ml-10 md:flex md:space-x-8">
  36.                             {% if app.user %}
  37.                                 <a href="{{ path('app_dashboard') }}" class="text-gray-700 hover:text-primary inline-flex items-center px-1 pt-1 border-b-2 border-transparent hover:border-primary text-sm font-medium transition duration-200">
  38.                                     <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  39.                                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
  40.                                     </svg>
  41.                                     Tableau de bord
  42.                                 </a>
  43.                                 {% if is_granted('ROLE_ADMIN') %}
  44.                                     <a href="{{ path('admin_users_index') }}" class="text-gray-700 hover:text-primary inline-flex items-center px-1 pt-1 border-b-2 border-transparent hover:border-primary text-sm font-medium transition duration-200">
  45.                                         <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  46.                                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path>
  47.                                         </svg>
  48.                                         Utilisateurs
  49.                                     </a>
  50.                                     <div class="relative" x-data="{ open: false }">
  51.                                         <button @click="open = !open" class="text-gray-700 hover:text-primary inline-flex items-center px-1 pt-1 border-b-2 border-transparent hover:border-primary text-sm font-medium transition duration-200">
  52.                                             <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  53.                                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
  54.                                             </svg>
  55.                                             Clients
  56.                                             <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  57.                                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
  58.                                             </svg>
  59.                                         </button>
  60.                                         <div x-show="open" @click.away="open = false" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 transform scale-95" x-transition:enter-end="opacity-100 transform scale-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 transform scale-100" x-transition:leave-end="opacity-0 transform scale-95" class="absolute left-0 mt-2 w-56 bg-white rounded-lg shadow-xl border border-gray-200 py-2 z-50" style="display: none;">
  61.                                             <a href="{{ path('customers_index') }}" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition duration-150">
  62.                                                 <svg class="w-5 h-5 mr-3 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  63.                                                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
  64.                                                 </svg>
  65.                                                 Liste des clients
  66.                                             </a>
  67.                                             <a href="{{ path('settings_customer_categories_index') }}" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition duration-150">
  68.                                                 <svg class="w-5 h-5 mr-3 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  69.                                                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
  70.                                                 </svg>
  71.                                                 Catégorie client
  72.                                             </a>
  73.                                             <a href="{{ path('customers_import') }}" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition duration-150">
  74.                                                 <svg class="w-5 h-5 mr-3 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  75.                                                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
  76.                                                 </svg>
  77.                                                 Importer Excel
  78.                                             </a>
  79.                                         </div>
  80.                                     </div>
  81.                                     <div class="relative" x-data="{ open: false }">
  82.                                         <button @click="open = !open" class="text-gray-700 hover:text-primary inline-flex items-center px-1 pt-1 border-b-2 border-transparent hover:border-primary text-sm font-medium transition duration-200">
  83.                                             <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  84.                                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
  85.                                             </svg>
  86.                                             Factures
  87.                                             <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  88.                                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
  89.                                             </svg>
  90.                                         </button>
  91.                                         <div x-show="open" @click.away="open = false" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 transform scale-95" x-transition:enter-end="opacity-100 transform scale-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 transform scale-100" x-transition:leave-end="opacity-0 transform scale-95" class="absolute left-0 mt-2 w-56 bg-white rounded-lg shadow-xl border border-gray-200 py-2 z-50" style="display: none;">
  92.                                             <a href="{{ path('invoices_index') }}" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition duration-150">
  93.                                                 <svg class="w-5 h-5 mr-3 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  94.                                                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
  95.                                                 </svg>
  96.                                                 Liste des factures
  97.                                             </a>
  98.                                             <a href="{{ path('invoices_import_form') }}" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition duration-150">
  99.                                                 <svg class="w-5 h-5 mr-3 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  100.                                                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
  101.                                                 </svg>
  102.                                                 Importer Excel
  103.                                             </a>
  104.                                             <a href="{{ path('invoices_import_history') }}" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition duration-150">
  105.                                                 <svg class="w-5 h-5 mr-3 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  106.                                                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
  107.                                                 </svg>
  108.                                                 Historique des Imports
  109.                                             </a>
  110.                                             <a href="{{ path('payment_orders_index') }}" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition duration-150">
  111.                                                 <svg class="w-5 h-5 mr-3 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  112.                                                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path>
  113.                                                 </svg>
  114.                                                 Bons de Paiements
  115.                                             </a>
  116.                                             <div class="border-t border-gray-200 my-2"></div>
  117.                                             <a href="{{ path('banks_dashboard') }}" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition duration-150">
  118.                                                 <svg class="w-5 h-5 mr-3 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  119.                                                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
  120.                                                 </svg>
  121.                                                 Dashboard Encaissements
  122.                                             </a>
  123.                                             <a href="{{ path('banks_payments_history') }}" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition duration-150">
  124.                                                 <svg class="w-5 h-5 mr-3 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  125.                                                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path>
  126.                                                 </svg>
  127.                                                 Historique des Paiements
  128.                                             </a>
  129.                                             <a href="{{ path('banks_index') }}" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition duration-150">
  130.                                                 <svg class="w-5 h-5 mr-3 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  131.                                                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 14v3m4-3v3m4-3v3M3 21h18M3 10h18M3 7l9-4 9 4M4 10h16v11H4V10z"></path>
  132.                                                 </svg>
  133.                                                 Partenaires Financiers
  134.                                             </a>
  135.                                         </div>
  136.                                     </div>
  137.                                     <div class="relative" x-data="{ open: false }">
  138.                                         <button @click="open = !open" class="text-gray-700 hover:text-primary inline-flex items-center px-1 pt-1 border-b-2 border-transparent hover:border-primary text-sm font-medium transition duration-200">
  139.                                             <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  140.                                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
  141.                                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
  142.                                             </svg>
  143.                                             Paramètres
  144.                                             <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  145.                                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
  146.                                             </svg>
  147.                                         </button>
  148.                                         <div x-show="open" @click.away="open = false" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 transform scale-95" x-transition:enter-end="opacity-100 transform scale-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 transform scale-100" x-transition:leave-end="opacity-0 transform scale-95" class="absolute left-0 mt-2 w-56 bg-white rounded-lg shadow-xl border border-gray-200 py-2 z-50" style="display: none;">
  149.                                             <a href="{{ path('settings_provinces_index') }}" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition duration-150">
  150.                                                 <svg class="w-5 h-5 mr-3 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  151.                                                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"></path>
  152.                                                 </svg>
  153.                                                 Provinces
  154.                                             </a>
  155.                                             <a href="{{ path('settings_territoires_index') }}" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition duration-150">
  156.                                                 <svg class="w-5 h-5 mr-3 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  157.                                                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
  158.                                                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
  159.                                                 </svg>
  160.                                                 Territoires
  161.                                             </a>
  162.                                             <a href="{{ path('settings_secteurs_index') }}" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition duration-150">
  163.                                                 <svg class="w-5 h-5 mr-3 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  164.                                                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
  165.                                                 </svg>
  166.                                                 Secteurs
  167.                                             </a>
  168.                                             <div class="border-t border-gray-200 my-2"></div>
  169.                                             <a href="{{ path('settings_roles_index') }}" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition duration-150">
  170.                                                 <svg class="w-5 h-5 mr-3 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  171.                                                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
  172.                                                 </svg>
  173.                                                 Rôles
  174.                                             </a>
  175.                                             <a href="{{ path('settings_taxes_index') }}" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition duration-150">
  176.                                                 <svg class="w-5 h-5 mr-3 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  177.                                                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
  178.                                                 </svg>
  179.                                                 Taxes
  180.                                             </a>
  181.                                             {% if is_granted('ROLE_SUPERADMIN') %}
  182.                                                 <div class="border-t border-gray-200 my-2"></div>
  183.                                                 <a href="{{ path('payment_gateways_index') }}" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition duration-150">
  184.                                                     <svg class="w-5 h-5 mr-3 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  185.                                                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"></path>
  186.                                                     </svg>
  187.                                                     Moyens de Paiement
  188.                                                 </a>
  189.                                             {% endif %}
  190.                                         </div>
  191.                                     </div>
  192.                                 {% endif %}
  193.                             {% else %}
  194.                                 <a href="{{ path('homepage') }}" class="text-gray-700 hover:text-primary inline-flex items-center px-1 pt-1 border-b-2 border-transparent hover:border-primary text-sm font-medium transition duration-200">
  195.                                     Accueil
  196.                                 </a>
  197.                             {% endif %}
  198.                         </div>
  199.                     </div>
  200.                     <div class="flex items-center space-x-4">
  201.                         {% if app.user %}
  202.                             <div class="flex items-center space-x-3">
  203.                                 <div class="hidden md:block text-right">
  204.                                     <div class="text-sm font-medium text-gray-900">{{ app.user.fullName }}</div>
  205.                                     <div class="text-xs text-gray-500">{{ app.user.email }}</div>
  206.                                 </div>
  207.                                 <div class="relative" x-data="{ open: false }">
  208.                                     <button @click="open = !open" class="flex items-center focus:outline-none">
  209.                                         {% if app.user.avatar %}
  210.                                             <img src="{{ asset('uploads/avatars/' ~ app.user.avatar) }}" alt="Avatar" class="w-10 h-10 rounded-full object-cover shadow-lg cursor-pointer hover:shadow-xl transition duration-200 border-2 border-primary">
  211.                                         {% else %}
  212.                                             <div class="w-10 h-10 rounded-full bg-gradient-to-br from-primary to-primary-dark flex items-center justify-center text-white font-bold shadow-lg cursor-pointer hover:shadow-xl transition duration-200">
  213.                                                 {{ app.user.firstname|first }}{{ app.user.lastname|first }}
  214.                                             </div>
  215.                                         {% endif %}
  216.                                         <svg class="w-4 h-4 ml-1 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  217.                                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
  218.                                         </svg>
  219.                                     </button>
  220.                                     
  221.                                     <div x-show="open" @click.away="open = false" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 transform scale-95" x-transition:enter-end="opacity-100 transform scale-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 transform scale-100" x-transition:leave-end="opacity-0 transform scale-95" class="absolute right-0 mt-2 w-64 bg-white rounded-lg shadow-xl border border-gray-200 py-2 z-50" style="display: none;">
  222.                                         <div class="px-4 py-3 border-b border-gray-200">
  223.                                             <p class="text-sm font-semibold text-gray-900">{{ app.user.fullName }}</p>
  224.                                             <p class="text-xs text-gray-500 truncate">{{ app.user.email }}</p>
  225.                                         </div>
  226.                                         <a href="{{ path('app_profile') }}" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition duration-150">
  227.                                             <svg class="w-5 h-5 mr-3 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  228.                                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
  229.                                             </svg>
  230.                                             Mon profil
  231.                                         </a>
  232.                                         <a href="{{ path('app_change_password') }}" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition duration-150">
  233.                                             <svg class="w-5 h-5 mr-3 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  234.                                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"></path>
  235.                                             </svg>
  236.                                             Changer le mot de passe
  237.                                         </a>
  238.                                         <div class="border-t border-gray-200 my-2"></div>
  239.                                         <a href="{{ path('app_logout') }}" class="flex items-center px-4 py-2 text-sm text-red-600 hover:bg-red-50 transition duration-150">
  240.                                             <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  241.                                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path>
  242.                                             </svg>
  243.                                             Déconnexion
  244.                                         </a>
  245.                                     </div>
  246.                                 </div>
  247.                             </div>
  248.                         {% else %}
  249.                             <a href="{{ path('app_login') }}" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-primary hover:bg-primary-dark transition duration-200 shadow-sm">
  250.                                 <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  251.                                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"></path>
  252.                                 </svg>
  253.                                 Connexion
  254.                             </a>
  255.                         {% endif %}
  256.                     </div>
  257.                 </div>
  258.             </div>
  259.         </nav>
  261.         <!-- Main Content -->
  262.         <main class="flex-grow">
  263.             {% block body %}{% endblock %}
  264.         </main>
  266.         <!-- Footer -->
  267.         <footer class="bg-gray-800 text-white py-8">
  268.             <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
  269.                 <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
  270.                     <div>
  271.                         <h3 class="text-lg font-semibold mb-4">PaySolution</h3>
  272.                         <p class="text-gray-400">Solution de gestion des factures d'électricité et de paiement en ligne.</p>
  273.                     </div>
  274.                     <div>
  275.                         <h4 class="text-lg font-semibold mb-4">Liens rapides</h4>
  276.                         <ul class="space-y-2">
  277.                             <li><a href="#" class="text-gray-400 hover:text-white">Accueil</a></li>
  278.                             <li><a href="#" class="text-gray-400 hover:text-white">Fonctionnalités</a></li>
  279.                             <li><a href="#" class="text-gray-400 hover:text-white">Tarifs</a></li>
  280.                             <li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li>
  281.                         </ul>
  282.                     </div>
  283.                     <div>
  284.                         <h4 class="text-lg font-semibold mb-4">Contact</h4>
  285.                         <p class="text-gray-400">Email: contact@paysolution.com</p>
  286.                         <p class="text-gray-400">Tél: +33 1 23 45 67 89</p>
  287.                     </div>
  288.                 </div>
  289.                 <div class="mt-8 pt-8 border-t border-gray-700 text-center text-gray-400">
  290.                     <p>&copy; {{ "now"|date("Y") }} PaySolution. Tous droits réservés.</p>
  291.                 </div>
  292.             </div>
  293.         </footer>
  294.     </body>
  295. </html>