From 5a07d958378906cf777d973684e444df05b39e25 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Fromme?= <fromme@dreipunktnull.com>
Date: Thu, 2 Jan 2025 14:23:11 +0100
Subject: [PATCH] fix: streamline/simplify dashboard layout

---
 templates/admin/index.html.twig         | 155 +++++++++++-------------
 templates/house_manager/index.html.twig |  11 +-
 templates/manager/index.html.twig       |   9 +-
 3 files changed, 80 insertions(+), 95 deletions(-)

diff --git a/templates/admin/index.html.twig b/templates/admin/index.html.twig
index b9469e8..d693332 100644
--- a/templates/admin/index.html.twig
+++ b/templates/admin/index.html.twig
@@ -3,30 +3,25 @@
 {% block content %}
     <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 pb-2">
-                Neue Bewerbungen
+            <h2 class="flex justify-between pb-2">
+                <span class="font-bold text-lg">Neue Bewerbungen</span>
+                {% if newApplicationsCount > 0 or pendingApplicationsCount > 0 %}
+                    <span>{{ newApplicationsCount }} neu, {{ pendingApplicationsCount }} in Bearbeitung</span>
+                {% endif %}
             </h2>
-            {% if newApplicationsCount > 0 or pendingApplicationsCount > 0 %}
-                <h3 class="font-bold pb-2">
-                    {{ newApplicationsCount }} neu, {{ pendingApplicationsCount }} in Bearbeitung
-                </h3>
-            {% endif %}
             <ul class="divide-y divide-gray-200">
                 {% for application in applications %}
                     {% set assignment = application.assignment %}
-                    <li class="py-2 first:pt-0 last:pb-0">
-                        <a href="{{ path('app_administrative_assignment_detail', { 'uuid': assignment.uuid, 'r': return_url() }) }}">
-                            <div class="flex items-center space-x-1">
-                                {{ icon('hand', 'w-4 h-4 shrink-0') }}
-                                <div class="flex items-center space-x-1 truncate">
-                                    <span class="whitespace-nowrap">{{ application.teamer.fullName(true) }}</span>
-                                    {% include '_partials/_dot.html.twig' %}
-                                    <span class="whitespace-nowrap">{{ assignment.effectivePeriod.start|date('d.m.y') }} - {{ assignment.effectivePeriod.end|date('d.m.y') }}</span>
-                                    {% include '_partials/_dot.html.twig' %}
-                                    <span class="whitespace-nowrap">{{ assignment.destination.hotel }}</span>
-                                </div>
-                            </div>
-                            <div class="pl-5 whitespace-nowrap">{{ assignment.jobProfile.name }}</div>
+                    <li class="py-2 first:pt-0 last:pb-0 overflow-x-hidden">
+                        <a href="{{ path('app_administrative_assignment_detail', { 'uuid': assignment.uuid, 'r': return_url() }) }}" class="flex items-center space-x-1">
+                            {{ icon('hand', 'w-4 h-4 shrink-0') }}
+                            <span class="whitespace-nowrap">{{ application.teamer.fullName(true) }}</span>
+                            {% include '_partials/_dot.html.twig' %}
+                            <span class="whitespace-nowrap">{{ assignment.effectivePeriod.start|date('d.m.y') }} - {{ assignment.effectivePeriod.end|date('d.m.y') }}</span>
+                            {% include '_partials/_dot.html.twig' %}
+                            <span class="whitespace-nowrap">{{ assignment.destination.hotel }}</span>
+                            {% include '_partials/_dot.html.twig' %}
+                            <span class="whitespace-nowrap">{{ assignment.jobProfile.name }}</span>
                         </a>
                     </li>
                 {% else %}
@@ -43,8 +38,8 @@
             <ul class="divide-y divide-gray-200">
                 {% for disposition in newDispositions %}
                     {% set assignment = disposition.assignment %}
-                    <li class="py-2 first:pt-0 last:pb-0">
-                        <a href="{{ path('app_administrative_assignment_detail', { 'uuid': assignment.uuid }) }}" class="flex items-center space-x-1 truncate">
+                    <li class="py-2 first:pt-0 last:pb-0 overflow-x-hidden">
+                        <a href="{{ path('app_administrative_assignment_detail', { 'uuid': assignment.uuid }) }}" class="flex items-center space-x-1">
                             {{ icon('hand', 'w-4 h-4 shrink-0') }}
                             {% include '_partials/_disposition_data.html.twig' with { 'disposition': disposition } %}
                         </a>
@@ -57,14 +52,12 @@
             </ul>
         </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 Dokumente
+            <h2 class="flex justify-between pb-2">
+                <span class="font-bold text-lg">Neue Dokumente</span>
+                {% if newDocumentsCount > 0 or pendingDocumentsCount > 0 %}
+                    <span>{{ newDocumentsCount }} neu, {{ pendingDocumentsCount }} in Bearbeitung</span>
+                {% endif %}
             </h2>
-            {% if newDocumentsCount > 0 or pendingDocumentsCount > 0 %}
-                <h3 class="font-bold pb-2">
-                    {{ newDocumentsCount }} neu {{ pendingDocumentsCount }} in Bearbeitung
-                </h3>
-            {% endif %}
             <ul class="divide-y divide-gray-200">
                 {% for document in documents %}
                     <li class="py-2 first:pt-0 last:pb-0">
@@ -92,17 +85,15 @@
             </h2>
             <ul class="divide-y divide-gray-200">
                 {% for assignment in assignments %}
-                    <li class="py-2 first:pt-0 last:pb-0">
-                        <a href="{{ path('app_administrative_assignment_detail', { 'uuid': assignment.uuid, 'r': return_url() }) }}">
-                            <div class="flex items-center space-x-1">
-                                {{ icon('calendar', 'w-4 h-4 shrink-0') }}
-                                <div class="flex items-center space-x-1 truncate">
-                                    <span class="whitespace-nowrap">{{ assignment.effectivePeriod.start|date('d.m.y') }} - {{ assignment.effectivePeriod.end|date('d.m.y') }}</span>
-                                    {% include '_partials/_dot.html.twig' %}
-                                    <span class="whitespace-nowrap">{{ assignment.jobProfile.name }}</span>
-                                </div>
-                            </div>
-                            <div class="pl-5 whitespace-nowrap">{{ assignment.owner.fullName(true) }}</div>
+                    <li class="py-2 first:pt-0 last:pb-0 overflow-x-hidden">
+                        <a href="{{ path('app_administrative_assignment_detail', { 'uuid': assignment.uuid, 'r': return_url() }) }}"
+                           class="flex items-center space-x-1">
+                            {{ icon('calendar', 'w-4 h-4 shrink-0') }}
+                            <span class="whitespace-nowrap">{{ assignment.effectivePeriod.start|date('d.m.y') }} - {{ assignment.effectivePeriod.end|date('d.m.y') }}</span>
+                            {% include '_partials/_dot.html.twig' %}
+                            <span class="whitespace-nowrap">{{ assignment.jobProfile.name }}</span>
+                            {% include '_partials/_dot.html.twig' %}
+                            <span class="whitespace-nowrap">{{ assignment.owner.fullName(true) }}</span>
                         </a>
                     </li>
                 {% else %}
@@ -118,8 +109,9 @@
             </h2>
             <ul class="divide-y divide-gray-200">
                 {% for availability in availabilities %}
-                    <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="flex items-center space-x-1 truncate">
+                    <li class="py-2 first:pt-0 last:pb-0 overflow-x-hidden">
+                        <a href="{{ path('app_admin_teamer_availability', { 'uuid': availability.owner.uuid, 'r': return_url() }) }}"
+                           class="flex items-center space-x-1">
                             {{ icon('calendar', 'w-4 h-4 shrink-0') }}
                             <span class="whitespace-nowrap">{{ availability.owner.fullName(true) }}</span>
                             {% include '_partials/_dot.html.twig' %}
@@ -134,33 +126,28 @@
             </ul>
         </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 Feedbacks
+            <h2 class="flex justify-between pb-2">
+                <span class="font-bold text-lg">Neue Feedbacks</span>
+                {% if pendingFeedbacksCount > 0 %}
+                    <span>{{ pendingFeedbacksCount }} freizugeben</span>
+                {% endif %}
             </h2>
-            {% if pendingFeedbacksCount > 0 %}
-                <h3 class="font-bold pb-2">
-                    {{ pendingFeedbacksCount }} freizugeben
-                </h3>
-            {% endif %}
             <ul class="divide-y divide-gray-200">
                 {% for feedback in feedbacks %}
-                    <li class="py-2 first:pt-0 last:pb-0">
+                    <li class="py-2 first:pt-0 last:pb-0 overflow-x-hidden">
                         <button type="button"
                                 hx-get="{{ path('app_admin_feedback_approve', { 'uuid': feedback.uuid }) }}"
                                 hx-target="body"
-                                hx-swap="beforeend">
-                            <span class="flex items-center space-x-1">
-                                {{ icon('feedback', 'w-4 h-4 shrink-0') }}
-                                <div class="flex items-center space-x-1 truncate">
-                                    <span class="whitespace-nowrap">{{ feedback.teamer }}</span>
-                                    {% if feedback.destinationName %}
-                                        {% include '_partials/_dot.html.twig' %}
-                                        <span class="whitespace-nowrap">{{ feedback.destinationName }}</span>
-                                    {% endif %}
-                                </div>
-                            </span>
+                                hx-swap="beforeend" class="flex items-center space-x-1">
+                            {{ icon('feedback', 'w-4 h-4 shrink-0') }}
+                            <span class="whitespace-nowrap">{{ feedback.teamer }}</span>
+                            {% if feedback.destinationName %}
+                                {% include '_partials/_dot.html.twig' %}
+                                <span class="whitespace-nowrap">{{ feedback.destinationName }}</span>
+                            {% endif %}
                             {% if feedback.jobProfileName %}
-                                <span class="pl-5 whitespace-nowrap">{{ feedback.jobProfileName }}</span>
+                                {% include '_partials/_dot.html.twig' %}
+                                <span class="whitespace-nowrap">{{ feedback.jobProfileName }}</span>
                             {% endif %}
                         </button>
                     </li>
@@ -178,20 +165,18 @@
             <ul class="divide-y divide-gray-200">
                 {% for disposition in overdueFeedbacks %}
                     {% set assignment = disposition.assignment %}
-                    <li class="py-2 first:pt-0 last:pb-0">
-                        <a href="{{ path('app_administrative_assignment_detail', { 'uuid': assignment.uuid, 'r': return_url() }) }}">
-                            <span class="flex items-center space-x-1">
-                                {{ icon('feedback', 'w-4 h-4 shrink-0') }}
-                                <div class="flex items-center space-x-1 truncate">
-                                    <span class="whitespace-nowrap">{{ disposition.teamer }}</span>
-                                    {% if assignment.destination %}
-                                        {% include '_partials/_dot.html.twig' %}
-                                        <span class="whitespace-nowrap">{{ assignment.destination }}</span>
-                                    {% endif %}
-                                </div>
-                            </span>
+                    <li class="py-2 first:pt-0 last:pb-0 overflow-x-hidden">
+                        <a href="{{ path('app_administrative_assignment_detail', { 'uuid': assignment.uuid, 'r': return_url() }) }}"
+                           class="flex items-center space-x-1">
+                            {{ icon('feedback', 'w-4 h-4 shrink-0') }}
+                            <span class="whitespace-nowrap">{{ disposition.teamer }}</span>
+                            {% if assignment.destination %}
+                                {% include '_partials/_dot.html.twig' %}
+                                <span class="whitespace-nowrap">{{ assignment.destination }}</span>
+                            {% endif %}
                             {% if assignment.jobProfile %}
-                                <span class="pl-5 whitespace-nowrap">{{ assignment.jobProfile.name }}</span>
+                                {% include '_partials/_dot.html.twig' %}
+                                <span class="whitespace-nowrap">{{ assignment.jobProfile.name }}</span>
                             {% endif %}
                         </a>
                     </li>
@@ -209,17 +194,15 @@
             <ul class="divide-y divide-gray-200">
                 {% for disposition in overdueContracts %}
                     {% set assignment = disposition.assignment %}
-                    <li class="py-2 first:pt-0 last:pb-0">
-                        <a href="{{ path('app_administrative_assignment_detail', { 'uuid': assignment.uuid, 'r': return_url() }) }}">
-                            <div class="flex items-center space-x-1">
-                                {{ icon('calendar', 'w-4 h-4 shrink-0') }}
-                                <div class="flex items-center space-x-1 truncate">
-                                    <span class="whitespace-nowrap">{{ assignment.effectivePeriod.start|date('d.m.y') }} - {{ assignment.effectivePeriod.end|date('d.m.y') }}</span>
-                                    {% include '_partials/_dot.html.twig' %}
-                                    <span class="whitespace-nowrap">{{ assignment.jobProfile.name }}</span>
-                                </div>
-                            </div>
-                            <div class="pl-5 whitespace-nowrap">{{ disposition.teamer.fullName(true) }}</div>
+                    <li class="py-2 first:pt-0 last:pb-0 overflow-x-hidden">
+                        <a href="{{ path('app_administrative_assignment_detail', { 'uuid': assignment.uuid, 'r': return_url() }) }}"
+                           class="flex items-center space-x-1">
+                            {{ icon('calendar', 'w-4 h-4 shrink-0') }}
+                            <span class="whitespace-nowrap">{{ assignment.effectivePeriod.start|date('d.m.y') }} - {{ assignment.effectivePeriod.end|date('d.m.y') }}</span>
+                            {% include '_partials/_dot.html.twig' %}
+                            <span class="whitespace-nowrap">{{ assignment.jobProfile.name }}</span>
+                            {% include '_partials/_dot.html.twig' %}
+                            <span class="whitespace-nowrap">{{ disposition.teamer.fullName(true) }}</span>
                         </a>
                     </li>
                 {% else %}
diff --git a/templates/house_manager/index.html.twig b/templates/house_manager/index.html.twig
index 8fb5f98..3e866e9 100644
--- a/templates/house_manager/index.html.twig
+++ b/templates/house_manager/index.html.twig
@@ -28,11 +28,11 @@
         <ul class="divide-y divide-gray-200">
             {% for disposition in newDispositions %}
                 {% set assignment = disposition.assignment %}
-                <li class="py-2 first:pt-0 last:pb-0">
-                    <a href="#" class="flex items-center space-x-1 truncate">
+                <li class="py-2 first:pt-0 last:pb-0 overflow-x-hidden">
+                    <div class="flex items-center space-x-1">
                         {{ icon('hand', 'w-4 h-4 shrink-0') }}
                         {{ _self.dispositionData(disposition) }}
-                    </a>
+                    </div>
                 </li>
             {% else %}
                 <li class="py-2 first:pt-0 last:pb-0">
@@ -48,8 +48,9 @@
         <ul class="divide-y divide-gray-200">
             {% for disposition in pendingFeedbacks %}
                 {% set assignment = disposition.assignment %}
-                <li class="py-2 first:pt-0 last:pb-0">
-                    <a href="{{ path('app_house_manager_feedback_provide', { 'uuid': disposition.uuid, 'r': return_url() }) }}" class="flex items-center space-x-1 truncate">
+                <li class="py-2 first:pt-0 last:pb-0 overflow-x-hidden">
+                    <a href="{{ path('app_house_manager_feedback_provide', { 'uuid': disposition.uuid, 'r': return_url() }) }}"
+                       class="flex items-center space-x-1">
                         {{ icon('feedback', 'w-4 h-4 shrink-0') }}
                         {{ _self.dispositionData(disposition) }}
                     </a>
diff --git a/templates/manager/index.html.twig b/templates/manager/index.html.twig
index b01a187..da768d2 100644
--- a/templates/manager/index.html.twig
+++ b/templates/manager/index.html.twig
@@ -13,9 +13,9 @@
             {% endif %}
             <ul class="divide-y divide-gray-200">
                 {% for document in documents %}
-                    <li class="py-2 first:pt-0 last:pb-0">
+                    <li class="py-2 first:pt-0 last:pb-0 overflow-x-hidden">
                         <button type="button"
-                                class="flex items-center space-x-1 truncate"
+                                class="flex items-center space-x-1"
                                 hx-get="{{ path('app_administrative_document_check', { 'uuid': document.uuid, 'r': return_url() }) }}"
                                 hx-target="body"
                                 hx-swap="beforeend">
@@ -39,8 +39,9 @@
             <ul class="divide-y divide-gray-200">
                 {% for disposition in dispositions %}
                     {% set assignment = disposition.assignment %}
-                    <li class="py-2 first:pt-0 last:pb-0">
-                        <a href="{{ path('app_administrative_assignment_detail', { 'uuid': assignment.uuid }) }}" class="flex items-center space-x-1 truncate">
+                    <li class="py-2 first:pt-0 last:pb-0 overflow-x-hidden">
+                        <a href="{{ path('app_administrative_assignment_detail', { 'uuid': assignment.uuid }) }}"
+                           class="flex items-center space-x-1">
                             {{ icon('hand', 'w-4 h-4 shrink-0') }}
                             {% include '_partials/_disposition_data.html.twig' with { 'disposition': disposition } %}
                         </a>