From c85fefefb87631c1408ff3546e6c7a07279bbe9a Mon Sep 17 00:00:00 2001
From: Denis Lugowski <denis.lugowski@gmail.com>
Date: Sun, 8 Feb 2026 18:43:30 +0100
Subject: [PATCH] feat(frontend): Add sidebar entries for help and organization

---
 legalconsenthub/app/layouts/default.vue    | 44 ++++++++++---
 legalconsenthub/app/pages/help.vue         | 75 ++++++++++++++++++++++
 legalconsenthub/app/pages/organization.vue | 74 +++++++++++++++++++++
 legalconsenthub/i18n/locales/de.json       | 37 ++++++++++-
 legalconsenthub/i18n/locales/en.json       | 37 ++++++++++-
 5 files changed, 257 insertions(+), 10 deletions(-)
 create mode 100644 legalconsenthub/app/pages/help.vue
 create mode 100644 legalconsenthub/app/pages/organization.vue

diff --git a/legalconsenthub/app/layouts/default.vue b/legalconsenthub/app/layouts/default.vue
index 7902483..013122e 100644
--- a/legalconsenthub/app/layouts/default.vue
+++ b/legalconsenthub/app/layouts/default.vue
@@ -18,9 +18,7 @@
       <template #default="{ collapsed }">
         <UDashboardSearchButton :collapsed="collapsed" class="bg-transparent ring-(--ui-border)" />
 
-        <UNavigationMenu :collapsed="collapsed" :items="links[0]" orientation="vertical" />
-
-        <UNavigationMenu :collapsed="collapsed" :items="links[1]" orientation="vertical" class="mt-auto" />
+        <UNavigationMenu :collapsed="collapsed" :items="links" orientation="vertical" />
       </template>
 
       <template #footer="{ collapsed }">
@@ -49,20 +47,50 @@
 <script setup lang="ts">
 import { useNotificationStore } from '~~/stores/useNotificationStore'
 import { useSeededSapS4HanaDuplicator } from '~/composables/testing/useSeededSapS4HanaDuplicator'
+import { usePermissions } from '~/composables/usePermissions'
 
 const { t: $t } = useI18n()
+const { hasAnyRole } = usePermissions()
 
-const links = [
-  [
+const links = computed(() => {
+  const items = [
     {
       label: $t('contact.title'),
       icon: 'i-lucide-mail',
       to: '/contact',
       exact: true
+    },
+    {
+      label: $t('help.title'),
+      icon: 'i-lucide-help-circle',
+      to: '/help',
+      exact: true
+    },
+    {
+      label: $t('organization.title'),
+      icon: 'i-lucide-building-2',
+      to: '/organization',
+      exact: true
+    },
+    {
+      label: $t('settings.title'),
+      icon: 'i-lucide-settings',
+      to: '/settings',
+      exact: true
     }
-  ],
-  []
-]
+  ]
+
+  if (hasAnyRole(['CHIEF_EXECUTIVE_OFFICER', 'IT_DEPARTMENT'])) {
+    items.push({
+      label: $t('administration.title'),
+      icon: 'i-lucide-shield',
+      to: '/administration',
+      exact: true
+    })
+  }
+
+  return items
+})
 const open = ref(false)
 const logger = useLogger().withTag('layout')
 
diff --git a/legalconsenthub/app/pages/help.vue b/legalconsenthub/app/pages/help.vue
new file mode 100644
index 0000000..f51998f
--- /dev/null
+++ b/legalconsenthub/app/pages/help.vue
@@ -0,0 +1,75 @@
+<template>
+  <UDashboardPanel id="help">
+    <template #header>
+      <UDashboardNavbar :title="$t('help.pageTitle')">
+        <template #leading>
+          <UDashboardSidebarCollapse />
+        </template>
+      </UDashboardNavbar>
+    </template>
+
+    <template #body>
+      <div class="flex flex-col gap-6 w-full lg:max-w-4xl mx-auto p-6">
+        <!-- Introduction Card -->
+        <UCard>
+          <template #header>
+            <div>
+              <h3 class="text-lg font-semibold text-highlighted">{{ $t('help.pageTitle') }}</h3>
+              <p class="text-sm text-muted mt-1">{{ $t('help.description') }}</p>
+            </div>
+          </template>
+        </UCard>
+
+        <!-- FAQ Section -->
+        <UCard>
+          <template #header>
+            <div>
+              <h3 class="text-lg font-semibold text-highlighted">{{ $t('help.faq.title') }}</h3>
+            </div>
+          </template>
+
+          <UAccordion :items="faqItems" />
+        </UCard>
+
+        <!-- Support Section -->
+        <UCard>
+          <template #header>
+            <div>
+              <h3 class="text-lg font-semibold text-highlighted">{{ $t('help.support.title') }}</h3>
+              <p class="text-sm text-muted mt-1">{{ $t('help.support.description') }}</p>
+            </div>
+          </template>
+
+          <UButton :label="$t('help.support.contactLink')" to="/contact" icon="i-lucide-mail" />
+        </UCard>
+      </div>
+    </template>
+  </UDashboardPanel>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: 'default'
+})
+
+const { t: $t } = useI18n()
+
+const faqItems = computed(() => [
+  {
+    label: $t('help.faq.q1.question'),
+    content: $t('help.faq.q1.answer')
+  },
+  {
+    label: $t('help.faq.q2.question'),
+    content: $t('help.faq.q2.answer')
+  },
+  {
+    label: $t('help.faq.q3.question'),
+    content: $t('help.faq.q3.answer')
+  },
+  {
+    label: $t('help.faq.q4.question'),
+    content: $t('help.faq.q4.answer')
+  }
+])
+</script>
diff --git a/legalconsenthub/app/pages/organization.vue b/legalconsenthub/app/pages/organization.vue
new file mode 100644
index 0000000..e12b600
--- /dev/null
+++ b/legalconsenthub/app/pages/organization.vue
@@ -0,0 +1,74 @@
+<template>
+  <UDashboardPanel id="organization">
+    <template #header>
+      <UDashboardNavbar :title="$t('organization.pageTitle')">
+        <template #leading>
+          <UDashboardSidebarCollapse />
+        </template>
+      </UDashboardNavbar>
+    </template>
+
+    <template #body>
+      <div class="flex flex-col gap-6 w-full lg:max-w-4xl mx-auto p-6">
+        <template v-if="selectedOrganization">
+          <!-- Organization Details Card -->
+          <UCard>
+            <template #header>
+              <div class="flex items-center gap-3">
+                <div class="flex items-center justify-center w-12 h-12 rounded-lg bg-primary/10">
+                  <UIcon name="i-lucide-building-2" class="w-6 h-6 text-primary" />
+                </div>
+                <div>
+                  <h3 class="text-lg font-semibold text-highlighted">{{ selectedOrganization.name }}</h3>
+                  <p class="text-sm text-muted mt-1">{{ $t('organization.current') }}</p>
+                </div>
+              </div>
+            </template>
+
+            <div class="space-y-4">
+              <div>
+                <label class="text-sm font-medium text-muted">{{ $t('organization.name') }}</label>
+                <p class="text-base text-highlighted mt-1">{{ selectedOrganization.name }}</p>
+              </div>
+
+              <div>
+                <label class="text-sm font-medium text-muted">{{ $t('organization.id') }}</label>
+                <p class="text-base text-highlighted mt-1 font-mono text-sm">{{ selectedOrganization.id }}</p>
+              </div>
+            </div>
+          </UCard>
+        </template>
+
+        <template v-else>
+          <!-- No Organization Card -->
+          <UCard>
+            <template #header>
+              <div class="flex items-center gap-3">
+                <div class="flex items-center justify-center w-12 h-12 rounded-lg bg-warning/10">
+                  <UIcon name="i-lucide-alert-triangle" class="w-6 h-6 text-warning" />
+                </div>
+                <div>
+                  <h3 class="text-lg font-semibold text-highlighted">{{ $t('organization.noOrganization') }}</h3>
+                  <p class="text-sm text-muted mt-1">{{ $t('organization.noOrganizationDescription') }}</p>
+                </div>
+              </div>
+            </template>
+          </UCard>
+        </template>
+      </div>
+    </template>
+  </UDashboardPanel>
+</template>
+
+<script setup lang="ts">
+import { useUserStore } from '~~/stores/useUserStore'
+
+definePageMeta({
+  layout: 'default'
+})
+
+const { t: $t } = useI18n()
+const userStore = useUserStore()
+
+const { selectedOrganization } = storeToRefs(userStore)
+</script>
diff --git a/legalconsenthub/i18n/locales/de.json b/legalconsenthub/i18n/locales/de.json
index bc8c57e..0e06518 100644
--- a/legalconsenthub/i18n/locales/de.json
+++ b/legalconsenthub/i18n/locales/de.json
@@ -189,7 +189,42 @@
     }
   },
   "organization": {
-    "current": "Aktuelle Organisation"
+    "title": "Organisation",
+    "pageTitle": "Organisationsprofil",
+    "current": "Aktuelle Organisation",
+    "name": "Organisationsname",
+    "id": "Organisations-ID",
+    "noOrganization": "Keine Organisation zugewiesen",
+    "noOrganizationDescription": "Sie sind derzeit keiner Organisation zugewiesen. Bitte kontaktieren Sie Ihren Administrator."
+  },
+  "help": {
+    "title": "Hilfe",
+    "pageTitle": "Hilfe & FAQ",
+    "description": "Hier finden Sie Antworten auf häufig gestellte Fragen und Anleitungen zur Nutzung der Plattform.",
+    "faq": {
+      "title": "Häufig gestellte Fragen",
+      "q1": {
+        "question": "Was ist Mitbestimmung?",
+        "answer": "Mitbestimmung bezeichnet das Recht der Arbeitnehmer, an Entscheidungen im Unternehmen mitzuwirken. In Deutschland ist dieses Recht gesetzlich verankert, insbesondere durch das Betriebsverfassungsgesetz."
+      },
+      "q2": {
+        "question": "Wer kann Anträge einreichen?",
+        "answer": "Anträge können von berechtigten Nutzern eingereicht werden, die eine entsprechende Rolle in der Organisation haben. Die genauen Berechtigungen werden von Ihrem Administrator festgelegt."
+      },
+      "q3": {
+        "question": "Wie lange dauert die Bearbeitung eines Antrags?",
+        "answer": "Die Bearbeitungszeit variiert je nach Art des Antrags und der Verfügbarkeit der zuständigen Personen. Sie werden über Statusänderungen per E-Mail benachrichtigt."
+      },
+      "q4": {
+        "question": "Kann ich meine Einstellungen ändern?",
+        "answer": "Ja, unter 'Einstellungen' können Sie Ihre Sprach- und Anzeigeeinstellungen sowie E-Mail-Benachrichtigungen anpassen."
+      }
+    },
+    "support": {
+      "title": "Weitere Unterstützung",
+      "description": "Haben Sie weitere Fragen oder benötigen Sie individuelle Unterstützung? Nutzen Sie unser Kontaktformular.",
+      "contactLink": "Zum Kontaktformular"
+    }
   },
   "auth": {
     "welcome": "Willkommen",
diff --git a/legalconsenthub/i18n/locales/en.json b/legalconsenthub/i18n/locales/en.json
index ae7be9a..76a26e8 100644
--- a/legalconsenthub/i18n/locales/en.json
+++ b/legalconsenthub/i18n/locales/en.json
@@ -189,7 +189,42 @@
     }
   },
   "organization": {
-    "current": "Current Organization"
+    "title": "Organization",
+    "pageTitle": "Organization Profile",
+    "current": "Current Organization",
+    "name": "Organization Name",
+    "id": "Organization ID",
+    "noOrganization": "No Organization Assigned",
+    "noOrganizationDescription": "You are currently not assigned to any organization. Please contact your administrator."
+  },
+  "help": {
+    "title": "Help",
+    "pageTitle": "Help & FAQ",
+    "description": "Find answers to frequently asked questions and guides on how to use the platform.",
+    "faq": {
+      "title": "Frequently Asked Questions",
+      "q1": {
+        "question": "What is co-determination?",
+        "answer": "Co-determination refers to the right of employees to participate in decisions within the company. In Germany, this right is legally established, particularly through the Works Constitution Act."
+      },
+      "q2": {
+        "question": "Who can submit applications?",
+        "answer": "Applications can be submitted by authorized users who have an appropriate role in the organization. The exact permissions are set by your administrator."
+      },
+      "q3": {
+        "question": "How long does it take to process an application?",
+        "answer": "Processing time varies depending on the type of application and the availability of the responsible parties. You will be notified of status changes by email."
+      },
+      "q4": {
+        "question": "Can I change my settings?",
+        "answer": "Yes, under 'Settings' you can adjust your language and display preferences as well as email notifications."
+      }
+    },
+    "support": {
+      "title": "Further Support",
+      "description": "Do you have more questions or need individual support? Use our contact form.",
+      "contactLink": "Go to Contact Form"
+    }
   },
   "auth": {
     "welcome": "Welcome",