templates/base.html.twig line 1

  2. {# templates/layout/management_workspace.html.twig #}
  3. <!doctype html>
  4. <html lang="en">
  5. <head>
  6.     <!-- Required meta tags -->
  7.     <meta charset="utf-8">
  8.     <meta name="viewport" content="width=device-width, initial-scale=1">
  10.     <!-- Site Title -->
  11.     <title>Smart-Immo | Management</title>
  13.     <!-- Favicon -->
  14.     <link rel="shortcut icon" href="{{ asset('assets/img/smartimmoManagementHead.png') }}" type="image/x-icon">
  16.     {# === Vendor & App CSS (same stack as Espace Agent) === #}
  17.     <link href="{{ asset('assets/vendor/bootstrap/dist/css/bootstrap.min.css') }}" rel="stylesheet">
  18.     <link href="{{ asset('assets/vendor/icons/css/materialdesignicons.min.css') }}" rel="stylesheet">
  19.     <link rel="stylesheet" href="{{ asset('assets/vendor/date-picker/date-picker.css') }}">
  20.     <link rel="stylesheet" type="text/css" href="{{ asset('assets/vendor/slick/slick.min.css') }}" />
  21.     <link rel="stylesheet" type="text/css" href="{{ asset('assets/vendor/slick/slick-theme.min.css') }}" />
  24.     <link href="{{ asset('assets/css/style.css') }}" rel="stylesheet">
  25.     <link href="{{ asset('assets/admin/css/dasboard.css') }}" rel="stylesheet">
  26.     <link href="{{ asset('assets/admin/css/menu.css') }}" rel="stylesheet">  {# add this last #}
  27.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  28.     <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
  29.     <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
  30.     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" defer></script>
  33.     <style type="text/css" media="print">
  34.         .no-print { display: none; }
  35.     </style>
  36.     <style>
  37.         .logo {
  38.             filter: brightness(0) saturate(100%) invert(23%) sepia(89%) saturate(2111%) hue-rotate(209deg) brightness(91%) contrast(97%);
  39.         }
  40.     </style>
  41.     <style>
  42.         .loader-inner.ball-pulse > div{
  43.             width:12px;height:12px;margin:0 4px;display:inline-block;border-radius:50%;
  44.             background:#2C5FD7;animation:ball-pulse 1s infinite ease-in-out;
  45.         }
  46.         .loader-inner.ball-pulse > div:nth-child(2){animation-delay:.2s}
  47.         .loader-inner.ball-pulse > div:nth-child(3){animation-delay:.4s}
  48.         @keyframes ball-pulse{0%,80%,100%{transform:scale(0)}40%{transform:scale(1)}}
  50.     </style>
  52.     {# optional page-level styles #}
  53.     {% block style %}{% endblock %}
  54. </head>
  55. <body class="bg-light">
  57. <div class="container-fluid p-0">
  58.     <div class="row g-0 position-relative align-items-start">
  60.         {# ========== Offcanvas (mobile sidebar) ========== #}
  61.         <div class="offcanvas offcanvas-start admin-offcanvas" tabindex="-1" id="adminSidebar" aria-labelledby="adminSidebarLabel">
  62.             <div class="offcanvas-header">
  63.                 <a href="{{ path('app_dashboard') }}" class="text-decoration-none d-flex align-items-center gap-2">
  64.                     <img src="{{ asset('assets/img/smartImmoManagement.png') }}" alt="Smart-Immo" class="logo" style="max-width:160px;height:auto;">
  65.                 </a>
  66.                 <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Fermer"></button>
  67.             </div>
  69.             <div class="offcanvas-body p-0">
  70.                 <nav class="admin-nav w-100" role="navigation" aria-label="Menu principal">
  71.                     <div class="nav-section">Menu</div>
  73.                     <a class="nav-link{% if app.request.pathinfo == '/admin' %} is-active{% endif %}"
  74.                        href="{{ path('app_dashboard') }}">
  75.                         <span class="mdi mdi-view-dashboard"></span> Tableau de bord
  76.                     </a>
  77.                     <a class="nav-link {% if app.request.pathinfo starts with "/admin/entreprise" %} active{% endif %}" href="{{ path('app_entreprise') }}">
  78.                         <span class="mdi mdi-office-building-outline"></span> Entreprises
  79.                     </a>
  80.                     <a class="nav-link {% if app.request.pathinfo starts with "/admin/account" %} active{% endif %}" href="{{ path('admin_accounts_index') }}">
  81.                         <span class="mdi mdi-folder-multiple"></span> Comptes
  82.                     </a>
  83.                     <a class="nav-link {% if app.request.pathinfo starts with "/admin/sms" %} active{% endif %}" href="{{ path('app_sms_config_index') }}">
  84.                         <span class="mdi mdi-message-bookmark"></span> SMS
  85.                     </a>
  86.                     <a href="{{ path('app_habitat') }}" class="nav-link{% if app.request.pathinfo starts with "/admin/biens" %} active{% endif %}">
  87.                         <span class="mdi mdi-home"></span>Biens immobiliers
  88.                     </a>
  89.                     <a href="{{ path('app_profil') }}" class="nav-link {% if app.request.pathinfo starts with "/admin/profil/information" %} active{% endif %}"><i class="demo-pli-male-female fs-5 me-2"></i>
  90.                         <span class="nav-label mininav-content ms-1">Mon profil</span>
  91.                     </a>
  92.                     <a class="nav-link" href="{{ path('app_logout') }}">
  93.                         <span class="mdi mdi-logout"></span> Déconnexion
  94.                     </a>
  95.                 </nav>
  96.             </div>
  97.         </div>
  99.         {# ========== Sidebar (desktop) ========== #}
  100.         <aside class="col-lg-2 d-none d-lg-block admin-sidebar">
  101.             <nav class="admin-nav">
  102.                 <div class="brand">
  103.                     <a href="{{ path('app_dashboard') }}" class="text-decoration-none">
  104.                         <img src="{{ asset('assets/img/smartImmoManagement.png') }}" alt="Smart-Immo" class="logo">
  105.                     </a>
  106.                 </div>
  107.                 <div class="mainnav__profile mt-2 d-flex align-items-center flex-column text-center">
  108.                     <div class="mininav-toggle py-2">
  109.                             <img class="mainnav__avatar rounded-circle border"
  110.                                  src="{{ asset('assets/img/imageIcon.png') }}"
  111.                                  alt="Profile Picture"
  112.                                  style="width:60px; height:60px; object-fit:cover;">
  113.                     </div>
  115.                     <div class="d-mn-max w-100">
  116.                         <div class="d-grid">
  117.                             <div class="btn shadow-none p-2 d-flex flex-column align-items-center">
  118.                                 <p class="mb-1">
  119.                                     <span class="text-gray-500">Utilisateur:</span>
  120.                                     <strong>
  121.                                     {% if is_granted('IS_AUTHENTICATED') and app.user.username is not null %}
  122.                                         {{ app.user.username }}
  123.                                     {% endif %}
  124.                                     </strong>
  125.                                 </p>
  126.                                 <small class="text-success">
  127.                                     {% if is_granted('IS_AUTHENTICATED') %}
  128.                                         {{ app.user.role }}
  129.                                     {% endif %}
  130.                                 </small>
  131.                             </div>
  133.                             <div id="usernav" class="nav flex-column collapse">
  134.                                 <a href="{{ path('app_logout') }}" class="nav-link d-flex align-items-center justify-content-center">
  135.                                     <i class="demo-pli-unlock fs-5 me-2"></i>
  136.                                     <span>Logout</span>
  137.                                 </a>
  138.                             </div>
  139.                         </div>
  140.                     </div>
  141.                 </div>
  143.                 <div class="nav-section">Menu</div>
  145.                 <a class="nav-link{% if app.request.pathinfo == '/admin' %} is-active{% endif %}" href="{{ path('app_dashboard') }}">
  146.                     <span class="mdi mdi-view-dashboard"></span> Tableau de bord
  147.                 </a>
  148.                 <a class="nav-link {% if app.request.pathinfo starts with "/admin/entreprise" %} active{% endif %}" href="{{ path('app_entreprise') }}">
  149.                     <span class="mdi mdi-office-building-outline"></span> Entreprises
  150.                 </a>
  151.                 <a class="nav-link {% if app.request.pathinfo starts with "/admin/account" %} active{% endif %}" href="{{ path('admin_accounts_index') }}">
  152.                     <span class="mdi mdi-folder-multiple"></span> Comptes
  153.                 </a>
  154.                 <a class="nav-link {% if app.request.pathinfo starts with "/admin/settings/sms" %} active{% endif %}" href="{{ path('app_sms_config_index') }}">
  155.                     <span class="mdi mdi-message"></span> SMS
  156.                 </a>
  157.                 <a href="{{ path('app_habitat') }}" class="nav-link{% if app.request.pathinfo starts with "/admin/biens" %} active{% endif %}">
  158.                     <span class="mdi mdi-home"></span>Biens immobiliers
  159.                 </a>
  160.                 <a href="{{ path('app_profil') }}" class="nav-link {% if app.request.pathinfo starts with "/admin/profil" %} active{% endif %}">
  161.                     <span class="mdi mdi-account"></span>Mon profil
  162.                 </a>
  163.                 {% if is_granted('ROLE_ADMIN') %}
  164.                     <a href="{{ path('app_user_index') }}" class="nav-link {% if app.request.pathinfo starts with "/admin/user" %} active{% endif %}">
  165.                         <span class="mdi mdi-account-multiple"></span>Utilisateurs
  166.                     </a>
  167.                 {% endif %}
  168.                 <a class="nav-link" href="{{ path('app_logout') }}">
  169.                     <span class="mdi mdi-logout"></span> Déconnexion
  170.                 </a>
  172.             </nav>
  173.         </aside>
  175.         {# ========== Content ========== #}
  176.         <div class="col-lg-10 content-dashboard p-3 p-lg-4">
  178.             {# Top bar #}
  179.             <!-- Sticky Top Bar Card -->
  180.             <div class="topbar-card topbar-sticky mb-3">
  181.                 <div class="row gx-3 gy-3 align-items-center">
  182.                     <div class="col-6 d-flex align-items-center">
  183.                         <div class="toggle me-2 d-lg-none">
  184.                             <button class="btn bg-white rounded-3 px-2 py-1" type="button"
  185.                                     data-bs-toggle="offcanvas" data-bs-target="#adminSidebar" aria-controls="adminSidebar">
  186.                                 <i class="mdi mdi-menu fs-5"></i>
  187.                             </button>
  188.                         </div>
  190.                         {% set hour = "now"|date("G") %}
  191.                         {% set greet = hour < 12 ? 'Bonjour' : (hour < 18 ? 'Bon après-midi' : 'Bonsoir') %}
  192.                         <span class="greet-chip d-none d-md-inline-flex align-items-center me-3" aria-live="polite">
  193.                 <i class="mdi mdi-emoticon-happy-outline me-1"></i>
  194.                 {{ greet }}{% if is_granted('IS_AUTHENTICATED') and app.user and app.user.name is defined and app.user.name %}, {{ app.user.lastname }}{% endif %} 👋
  195.             </span>
  197.                         <!-- Live Clock -->
  198.                         <span id="live-clock" class="badge bg-light text-dark border ms-2">--:--:--</span>
  199.                     </div>
  201.                     <div class="col-6 d-flex justify-content-end align-items-center">
  202.                         <div class="dropdown profile-dropdown">
  203.                             <button class="btn bg-white rounded-9 btn-sm d-flex align-items-center dropdown-toggle py-1 ps-1 pe-2"
  204.                                     type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
  205.                                 {% if is_granted('IS_AUTHENTICATED') %}
  206.                                         <img src="{{ asset('assets/img/imageIcon.png') }}" class="img-fluid rounded-9" alt="">
  207.                                 {% endif %}
  208.                                 <span class="ms-2 me-1">{{ app.user.name }}</span>
  209.                             </button>
  210.                             <ul class="dropdown-menu border-0 rounded-9 dropdown-menu-end" aria-labelledby="dropdownMenuButton1">
  211.                                 <li><a class="dropdown-item" href="{{ path('app_profil') }}"><span class="mdi mdi-account"></span> Mon profil</a></li>
  212.                                 <li><a class="dropdown-item" href="{{ path('app_logout') }}"><span class="mdi mdi-logout"></span> Logout</a></li>
  213.                             </ul>
  214.                         </div>
  215.                     </div>
  216.                 </div>
  217.             </div>
  219.             {# Toasts (ported) #}
  220.             <div aria-live="polite" aria-atomic="true" class="position-relative">
  221.                 <div class="toast-container position-fixed top-0 end-0 p-3" style="z-index: 2000;">
  222.                     {% set levels = {'info':'info', 'success':'success', 'warning':'warning', 'error':'danger'} %}
  223.                     {% for level, bs in levels %}
  224.                         {% for message in app.session.flashBag.get(level) %}
  225.                             <div class="toast align-items-center text-bg-{{ bs }} border-0"
  226.                                  role="alert" aria-live="assertive" aria-atomic="true"
  227.                                  data-bs-delay="4000">
  228.                                 <div class="d-flex">
  229.                                     <div class="toast-body">{{ message|raw }}</div>
  230.                                     <button type="button" class="btn-close btn-close-white me-2 m-auto"
  231.                                             data-bs-dismiss="toast" aria-label="Fermer"></button>
  232.                                 </div>
  233.                             </div>
  234.                         {% endfor %}
  235.                     {% endfor %}
  236.                 </div>
  237.             </div>
  239.             <div class="dashboard-content pt-2 pt-lg-3">
  240.                 {% block bodyHeader %}{% endblock %}
  241.                 {% block bodyContent %}{% endblock %}
  242.             </div>
  244.             <footer class="mt-auto py-3">
  245.                 <div class="d-flex flex-column flex-md-row align-items-md-center">
  246.                     <div class="text-nowrap mb-2 mb-md-0 small">
  247.                         Copyright &copy; {{ "now"|date("Y") }}
  248.                         <a href="https://smarttech-rdc.com" class="ms-1 btn-link fw-bold">Smart-Technology</a>
  249.                     </div>
  250.                 </div>
  251.             </footer>
  252.         </div>
  253.         {# /Content #}
  254.     </div>
  255. </div>
  257. {# ========== Modal AJAX loader ========== #}
  258. <div class="modal fade" id="modalCenter" tabindex="-1" aria-labelledby="modalCenterTitle" aria-hidden="true">
  259.     <div class="modal-dialog modal-lg modal-dialog-centered">
  260.         <div class="modal-content shadow-lg rounded-4 border-0">
  262.             {# Header with subtle background #}
  263.             <div class="modal-header bg-light border-0 rounded-top-4">
  264.                 <h5 class="modal-title fw-semibold text-primary" id="modalCenterTitle">
  265.                     Chargement en cours
  266.                 </h5>
  267.                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
  268.             </div>
  270.             {# Dynamic content wrapper #}
  271.             <div id="modal-content-ajax">
  272.                 <div class="modal-body d-flex justify-content-center align-items-center flex-column py-5">
  273.                     <div class="spinner-border text-primary mb-3" role="status" style="width: 3rem; height: 3rem;">
  274.                         <span class="visually-hidden">Chargement...</span>
  275.                     </div>
  276.                     <p class="text-muted small mb-0">Veuillez patienter...</p>
  277.                 </div>
  278.             </div>
  280.         </div>
  281.     </div>
  282. </div>
  285. {# ========== JS Config & loaders ========== #}
  286. <script>
  287.     class Config {
  288.         constructor() {
  289.             this.basePath = '{{ app.request.basepath }}';
  290.             Object.seal(this);
  291.         }
  292.     }
  293.     var config = new Config();
  294.     var loader = `<div class="d-flex justify-content-center align-items-center flex-column py-3">
  295.                     <div class="spinner-border text-primary mb-3" role="status" style="width: 3rem; height: 3rem;">
  296.                         <span class="visually-hidden">Chargement...</span>
  297.                     </div>
  298.                     <p class="text-muted small mb-0">Veuillez patienter...</p>
  299.                 </div>`;
  300.     var loaderNode = document.createElement("img");
  301.     loaderNode.src = config.basePath + "/assets/img/ajax-loader.gif";
  302.     var modalLoader = '<div class="modal-body">' + loader + '</div>';
  303. </script>
  307. {# === Footer scripts (same stack as Espace Agent) === #}
  308. {#<script src="{{ asset('assets/vendor/bootstrap/dist/js/bootstrap.bundle.min.js') }}"></script>#}
  309. {#<script type="text/javascript" src="{{ asset('assets/vendor/slick/slick.min.js') }}"></script>#}
  310. {#<script src="{{ asset('assets/vendor/date-picker/date-picker.js') }}"></script>#}
  311. {##}
  312. {#<script type="text/javascript" src="{{ asset('assets/js/bodyevents.js') }}"></script>#}
  313. <script src="{{ asset('assets/js/ajax_1.0.1.js') }}"></script>
  314. <script src="{{ asset('assets/js/settings.js') }}"></script>
  315. {#<script src="{{ asset('assets/js/osahan.js') }}"></script>#}
  317. <script>
  318.     function updateClock(){
  319.         const now = new Date();
  320.         const h = String(now.getHours()).padStart(2,'0');
  321.         const m = String(now.getMinutes()).padStart(2,'0');
  322.         const s = String(now.getSeconds()).padStart(2,'0');
  323.         document.getElementById('live-clock').textContent = `${h}:${m}:${s}`;
  324.     }
  325.     setInterval(updateClock,1000);
  326.     updateClock();
  327. </script>
  328. {# Auto-show toasts #}
  329. <script>
  330.     (function () {
  331.         const run = () => {
  332.             if (!window.bootstrap) return;
  333.             document.querySelectorAll('.toast')
  334.                 .forEach(el => bootstrap.Toast.getOrCreateInstance(el).show());
  335.         };
  336.         if (document.readyState === 'loading') {
  337.             document.addEventListener('DOMContentLoaded', run);
  338.         } else {
  339.             run();
  340.         }
  341.     })();
  342. </script>
  344. {# optional page-level scripts #}
  345. {% block javascripts %}{% endblock %}
  346. </body>
  347. </html>