From e8e69121d03d52ec6f5ca263ece9ecbc697be133 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Fromme?= <fromme@dreipunktnull.com>
Date: Mon, 23 Oct 2023 11:54:52 +0200
Subject: [PATCH] Feat: Improve dashboard layout

---
 templates/admin/index.html.twig | 48 ++++++++++++++++++---------------
 1 file changed, 27 insertions(+), 21 deletions(-)

diff --git a/templates/admin/index.html.twig b/templates/admin/index.html.twig
index b125d64..062554c 100644
--- a/templates/admin/index.html.twig
+++ b/templates/admin/index.html.twig
@@ -1,70 +1,76 @@
 {% extends 'admin/layout.html.twig' %}
 
+{% macro dot() %}
+    <svg viewBox="0 0 2 2" class="h-1 w-1 fill-current inline-block mx-1">
+        <circle cx="1" cy="1" r="1" />
+    </svg>
+{% endmacro %}
+
 {% block content %}
-    <div class="grid grid-cols-2 gap-8">
-        <div>
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+        <div class="bg-gray-100 border border-gray-200 rounded-md px-4 py-2">
             <h2 class="font-bold text-lg">
                 Neue Bewerbungen
             </h2>
             <h3 class="font-bold pb-2">
                 {{ newApplicationsCount }} neu, {{ pendingApplicationsCount }} in Bearbeitung
             </h3>
-            <ul>
+            <ul class="divide-y divide-gray-200">
                 {% for application in applications %}
                     {% set assignment = application.assignment %}
-                    <li>
-                        <a href="{{ path('app_admin_assignment_detail', { 'uuid': assignment.uuid, 'r': return_url() }) }}">
-                            {{ application.teamer.fullName(true) }} / {{ assignment.effectivePeriod.start|date('d.m.Y') }} - {{ assignment.effectivePeriod.end|date('d.m.Y') }} / {{ assignment.jobProfile.name }}
+                    <li class="py-2 first:pt-0 last:pb-0">
+                        <a href="{{ path('app_admin_assignment_detail', { 'uuid': assignment.uuid, 'r': return_url() }) }}" class="block truncate">
+                            {{ application.teamer.fullName(true) }}{{ _self.dot() }}{{ assignment.effectivePeriod.start|date('d.m.Y') }} - {{ assignment.effectivePeriod.end|date('d.m.Y') }}{{ _self.dot() }}{{ assignment.jobProfile.name }}
                         </a>
                     </li>
                 {% endfor %}
             </ul>
         </div>
-        <div>
+        <div class="bg-gray-100 border border-gray-200 rounded-md px-4 py-2">
             <h2 class="font-bold text-lg">
                 Neue Dokumente
             </h2>
             <h3 class="font-bold pb-2">
                 {{ newDocumentsCount }} neu {{ pendingDocumentsCount }} in Bearbeitung
             </h3>
-            <ul>
+            <ul class="divide-y divide-gray-200">
                 {% for document in documents %}
-                    <li>
+                    <li class="py-2 first:pt-0 last:pb-0">
                         {% if document.disposition %}
                             {% set url = path('app_admin_assignment_detail', { 'uuid': document.disposition.assignment.uuid, 'r': return_url() }) %}
                         {% else %}
                             {% set url = path('app_admin_teamer_profile', { 'uuid': document.owner.teamer.uuid, 'r': return_url() }) %}
                         {% endif %}
-                        <a href="{{ url }}">
-                            {{ document.owner.teamer.fullName(true) }} / {{ document.originalFilename|u.truncate(32, '...') }}
+                        <a href="{{ url }}" class="block truncate">
+                            {{ document.owner.teamer.fullName(true) }}{{ _self.dot() }}{{ document.originalFilename }}
                         </a>
                     </li>
                 {% endfor %}
             </ul>
         </div>
-        <div>
+        <div class="bg-gray-100 border border-gray-200 rounded-md px-4 py-2">
             <h2 class="font-bold text-lg pb-2">
                 Neue Einsätze
             </h2>
-            <ul>
+            <ul class="divide-y divide-gray-200">
                 {% for assignment in assignments %}
-                    <li>
-                        <a href="{{ path('app_admin_assignment_detail', { 'uuid': assignment.uuid, 'r': return_url() }) }}">
-                            {{ assignment.effectivePeriod.start|date('d.m.Y') }} - {{ assignment.effectivePeriod.end|date('d.m.Y') }} / {{ assignment.jobProfile.name }} / {{ assignment.owner.fullName(true) }}
+                    <li class="py-2 first:pt-0 last:pb-0">
+                        <a href="{{ path('app_admin_assignment_detail', { 'uuid': assignment.uuid, 'r': return_url() }) }}" class="block truncate">
+                            {{ assignment.effectivePeriod.start|date('d.m.Y') }} - {{ assignment.effectivePeriod.end|date('d.m.Y') }}{{ _self.dot() }}{{ assignment.jobProfile.name }}{{ _self.dot() }}{{ assignment.owner.fullName(true) }}
                         </a>
                     </li>
                 {% endfor %}
             </ul>
         </div>
-        <div>
+        <div class="bg-gray-100 border border-gray-200 rounded-md px-4 py-2">
             <h2 class="font-bold text-lg pb-2">
                 Neue Verfügbarkeiten
             </h2>
-            <ul>
+            <ul class="divide-y divide-gray-200">
                 {% for availability in availabilities %}
-                    <li>
-                        <a href="{{ path('app_admin_teamer_availability', { 'uuid': availability.owner.uuid, 'r': return_url() }) }}">
-                            {{ availability.owner }} / {{ availability.dateFrom|date('d.m.Y') }} - {{ availability.dateTo|date('d.m.Y') }}
+                    <li class="py-2 first:pt-0 last:pb-0">
+                        <a href="{{ path('app_admin_teamer_availability', { 'uuid': availability.owner.uuid, 'r': return_url() }) }}" class="block truncate">
+                            {{ availability.owner }}{{ _self.dot() }}{{ availability.dateFrom|date('d.m.Y') }} - {{ availability.dateTo|date('d.m.Y') }}
                         </a>
                     </li>
                 {% endfor %}