Rework menu GLPI 10 (#29)

* Feat(UI): rework main menu

* Feat(UI): rework main menu

* Apply suggestion from @Rom1-B

---------

Co-authored-by: Romain B. <8530352+Rom1-B@users.noreply.github.com>

Author: stonebuzz

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## [UNRELEASED]
 
+### Added
+
+- Rework main menu
+
 ### Fixes
 
 - SQL error when merging the Jamf device linked to a GLPI asset

front/menu.php

@@ -46,22 +46,25 @@
 $links      = [];
 if (Session::haveRight('plugin_jamf_mobiledevice', CREATE)) {
     $links[] = [
-        'name' => _x('menu', 'Import devices', 'jamf'),
-        'url'  => PluginJamfImport::getSearchURL(),
+        'name'          => _x('menu', 'Import devices', 'jamf'),
+        'url'           => PluginJamfImport::getSearchURL(),
+        'description'   => __('Discover the devices in your Jamf Pro instance to ensure data integrity and prevent the creation of unwanted assets.', 'jamf'),
+        'action'        => __s('Import', 'jamf'),
+        'pics'          => $plugin_dir . '/pics/import.png',
     ];
     $links[] = [
-        'name' => _x('menu', 'Merge existing devices', 'jamf'),
-        'url'  => "{$plugin_dir}/front/merge.php",
-    ];
-}
-if (Session::haveRight('config', UPDATE)) {
-    $links[] = [
-        'name' => _x('menu', 'Configuration', 'jamf'),
-        'url'  => Config::getFormURL() . '?forcetab=PluginJamfConfig',
+        'name'          => _x('menu', 'Merge existing devices', 'jamf'),
+        'url'           => $plugin_dir . '/front/merge.php',
+        'description'   => __('Compare imported devices with those already present in GLPI using unique identifiers and facilitate the consolidation.', 'jamf'),
+        'action'        => __s('Merge', 'jamf'),
+        'pics'          => $plugin_dir . '/pics/merge.png',
     ];
 }
 
 TemplateRenderer::getInstance()->display('@jamf/menu.html.twig', [
-    'links' => $links,
+    'links'         => $links,
+    'can_configure' => Session::haveRight('config', UPDATE),
+    'config_url'    => Config::getFormURL() . '?forcetab=PluginJamfConfig$1',
 ]);
+
 Html::footer();

pics/import.png

@@ -29,31 +29,32 @@
  */
 #}
 
-{% if links|length > 0 %}
-    <div class="text-center">
-        <table class="mx-auto table" style="width: 400px">
-            <thead>
-                <tr>
-                    <th>{{ _x('plugin_info', 'Jamf plugin', 'jamf') }}</th>
-                </tr>
-            </thead>
-            <tbody>
-                {% for link in links %}
-                    <tr>
-                        <td>
-                            <a href="{{ link.url }}">{{ link.name }}</a>
-                        </td>
-                    </tr>
-                {% endfor %}
-            </tbody>
-        </table>
-    </div>
-{% else %}
-    <div class="text-center">
-        <div class="alert alert-warning" role="alert">
-            <i class="alert-icon ti ti-alert-triangle fa-2x"></i>
-            <p class="alert-title">{{ _x('error', 'You do not have access to any Jamf plugin items', 'jamf') }}</p>
-            <p>{{ _x('error', 'Please check your profile permissions', 'jamf') }}</p>
+<div class="container d-flex flex-column justify-content-center mt-4">
+    {% if can_configure %}
+        <div class="d-flex justify-content-end mb-4">
+            <a href="{{ config_url }}" class="btn btn-outline-secondary d-flex align-items-center shadow-sm">
+                <i class="ti ti-settings me-2"></i> {{ __('Configuration', 'jamf') }}
+            </a>
         </div>
+    {% endif %}
+    <div class="row justify-content-center">
+        {% for link in links %}
+            <div class="col-md-5 col-lg-4 mb-3">
+                <div class="card h-100 shadow-sm border-0">
+                    <div class="d-flex justify-content-center align-items-center p-3">
+                        <img src="{{ link.pics }}" class="card-img-top" style="width: 150px; height: 150px; color: var(--tblr-muted) !important;" alt="{{ link.name }}">
+                    </div>
+                    <div class="card-body text-center p-5">
+                        <h5 class="card-title fw-bold">{{ link.name }}</h5>
+                        <p class="card-text">{{ link.description }}</p>
+                        <a href="{{ link.url }}" class="btn btn-primary w-100 mt-3">
+                            {{ link.action }}
+                        </a>
+                    </div>
+                </div>
+            </div>
+        {% endfor %}
     </div>
-{% endif %}
+</div>
+
+