From 09933e07b06d3d5a71b6285fb8101e33e6509f93 Mon Sep 17 00:00:00 2001
From: Denis Lugowski <denis.lugowski@gmail.com>
Date: Thu, 20 Nov 2025 06:57:46 +0100
Subject: [PATCH] feat(#15): Redesign application form card on overview page

---
 legalconsenthub/app/pages/index.vue | 89 +++++++++++++++++++++--------
 1 file changed, 64 insertions(+), 25 deletions(-)

diff --git a/legalconsenthub/app/pages/index.vue b/legalconsenthub/app/pages/index.vue
index c02a77b..106949f 100644
--- a/legalconsenthub/app/pages/index.vue
+++ b/legalconsenthub/app/pages/index.vue
@@ -41,30 +41,64 @@
     </template>
 
     <template #body>
-      <div class="flex flex-col gap-4 sm:gap-6 lg:gap-12 w-full lg:max-w-4xl mx-auto">
-        <div
+      <div class="flex flex-col gap-4 sm:gap-6 w-full lg:max-w-4xl mx-auto p-4">
+        <UCard
           v-for="(applicationFormElem, index) in applicationForms"
           :key="applicationFormElem.id"
-          class="flex justify-between items-center p-4 bg-white rounded-lg shadow-md"
+          class="cursor-pointer hover:ring-2 hover:ring-primary transition-all duration-200"
           @click="navigateTo(`application-forms/${applicationFormElem.id}/0`)"
         >
-          <div>
-            <p class="font-medium text-(--ui-text-highlighted) text-base">
-              #{{ index }} {{ applicationFormElem.name }}
-            </p>
-            <p class="text-(--ui-text-muted) text-sm">
-              Zuletzt bearbeitet von {{ applicationFormElem.lastModifiedBy.name }} am
-              {{ formatDate(applicationFormElem.modifiedAt) }}
-            </p>
-            <p class="text-(--ui-text-muted) text-sm">
-              Erstellt von {{ applicationFormElem.createdBy.name }} am {{ formatDate(applicationFormElem.createdAt) }}
-            </p>
-            <p class="text-(--ui-text-muted) text-sm">Status: {{ applicationFormElem.status }}</p>
+          <template #header>
+            <div class="flex items-start justify-between gap-3">
+              <div class="flex-1 min-w-0">
+                <h3 class="font-semibold text-lg text-highlighted truncate">
+                  {{ applicationFormElem.name }}
+                </h3>
+                <p class="text-xs text-muted mt-1">
+                  #{{ index }}
+                </p>
+              </div>
+              <div class="flex items-center gap-2">
+                <UBadge
+                  :label="applicationFormElem.status"
+                  :color="getStatusColor(applicationFormElem.status)"
+                  variant="subtle"
+                  size="sm"
+                />
+                <UDropdownMenu :items="[getLinksForApplicationForm(applicationFormElem)]" :content="{ align: 'end' }">
+                  <UButton
+                    icon="i-lucide-ellipsis-vertical"
+                    color="neutral"
+                    variant="ghost"
+                    size="sm"
+                    square
+                    @click.stop
+                  />
+                </UDropdownMenu>
+              </div>
+            </div>
+          </template>
+
+          <div class="space-y-3">
+            <div class="flex items-center gap-2 text-sm">
+              <UIcon name="i-lucide-pencil" class="size-4 text-muted shrink-0" />
+              <span class="text-muted">
+                Zuletzt bearbeitet von
+                <span class="font-medium text-highlighted">{{ applicationFormElem.lastModifiedBy.name }}</span>
+                am {{ formatDate(applicationFormElem.modifiedAt) }}
+              </span>
+            </div>
+
+            <div class="flex items-center gap-2 text-sm">
+              <UIcon name="i-lucide-user-plus" class="size-4 text-muted shrink-0" />
+              <span class="text-muted">
+                Erstellt von
+                <span class="font-medium text-highlighted">{{ applicationFormElem.createdBy.name }}</span>
+                am {{ formatDate(applicationFormElem.createdAt) }}
+              </span>
+            </div>
           </div>
-          <div>
-            <UPageLinks :links="getLinksForApplicationForm(applicationFormElem)" />
-          </div>
-        </div>
+        </UCard>
       </div>
     </template>
     <DeleteModal
@@ -151,12 +185,6 @@ const applicationForms = computed({
 
 function getLinksForApplicationForm(applicationForm: ApplicationFormDto) {
   return [
-    {
-      label: 'Bearbeiten',
-      icon: 'i-lucide-file-pen',
-      to: `/application-forms/${applicationForm.id}`,
-      disabled: !canWriteApplicationForms.value
-    },
     {
       label: 'Löschen',
       icon: 'i-lucide-trash',
@@ -166,6 +194,17 @@ function getLinksForApplicationForm(applicationForm: ApplicationFormDto) {
   ]
 }
 
+function getStatusColor(status: string) {
+  const statusMap: Record<string, 'success' | 'warning' | 'error' | 'info' | 'neutral'> = {
+    COMPLETED: 'success',
+    IN_PROGRESS: 'warning',
+    DRAFT: 'info',
+    REJECTED: 'error',
+    PENDING: 'warning'
+  }
+  return statusMap[status] || 'neutral'
+}
+
 async function deleteApplicationForm(applicationFormId: string) {
   await deleteApplicationFormById(applicationFormId)
   data.value?.content.splice(