From 26b7dfc06ce3199a6ec20b7cbcf1835d1b680e41 Mon Sep 17 00:00:00 2001
From: florianfederspiel <florian@fedeo.de>
Date: Sat, 8 Nov 2025 18:47:46 +0100
Subject: [PATCH] Redone Profiles Edit

---
 pages/profiles/create.vue            |  97 ----
 pages/profiles/show/[id].vue         | 637 ---------------------------
 pages/staff/profiles/[id].vue        | 318 +++++++++++++
 pages/{ => staff}/profiles/index.vue |   4 +-
 4 files changed, 319 insertions(+), 737 deletions(-)
 delete mode 100644 pages/profiles/create.vue
 delete mode 100644 pages/profiles/show/[id].vue
 create mode 100644 pages/staff/profiles/[id].vue
 rename pages/{ => staff}/profiles/index.vue (92%)

diff --git a/pages/profiles/create.vue b/pages/profiles/create.vue
deleted file mode 100644
index a6cc563..0000000
--- a/pages/profiles/create.vue
+++ /dev/null
@@ -1,97 +0,0 @@
-<script setup>
-const router = useRouter()
-const route = useRoute()
-const dataStore = useDataStore()
-
-const itemInfo = ref({})
-
-const createProfile = async () => {
-  let data = {
-    fullName: `${itemInfo.value.firstName} ${itemInfo.value.lastName}`,
-    ...itemInfo.value
-  }
-
-  await dataStore.createNewItem("profiles", data)
-}
-
-</script>
-
-<template>
-  <UDashboardNavbar title="Mitarbeiter erstellen">
-    <template #right>
-      <UButton
-        color="rose"
-        @click="router.push(`/profiles`)"
-      >
-        Abbrechen
-      </UButton>
-      <UButton
-        @click="createProfile"
-      >
-        Erstellen
-      </UButton>
-    </template>
-  </UDashboardNavbar>
-
-  <UForm
-    class="p-5"
-  >
-    <UFormGroup
-      label="Anrede"
-    >
-      <UInput
-        required
-        v-model="itemInfo.salutation"
-      />
-    </UFormGroup>
-    <UFormGroup
-      label="Vorname"
-    >
-      <UInput
-        required
-        v-model="itemInfo.firstName"
-      />
-    </UFormGroup>
-    <UFormGroup
-      label="Nachname"
-    >
-      <UInput
-        required
-        v-model="itemInfo.lastName"
-      />
-    </UFormGroup>
-    <UFormGroup
-      label="Mitarbeiter Nummer"
-    >
-      <UInput
-        v-model="itemInfo.employeeNumber"
-      />
-    </UFormGroup>
-    <UFormGroup
-      label="E-Mail"
-    >
-      <UInput
-          v-model="itemInfo.email"
-      />
-    </UFormGroup>
-    <UFormGroup
-      label="Handynummer"
-    >
-      <UInput
-          v-model="itemInfo.mobileTel"
-      />
-    </UFormGroup>
-    <UFormGroup
-      label="Festnetznummer"
-    >
-      <UInput
-          v-model="itemInfo.fixedTel"
-      />
-    </UFormGroup>
-  </UForm>
-
-</template>
-
-<style scoped>
-
-</style>
\ No newline at end of file
diff --git a/pages/profiles/show/[id].vue b/pages/profiles/show/[id].vue
deleted file mode 100644
index 364d0a1..0000000
--- a/pages/profiles/show/[id].vue
+++ /dev/null
@@ -1,637 +0,0 @@
-<script setup>
-import axios from "axios"
-import HistoryDisplay from "~/components/HistoryDisplay.vue";
-import dayjs from "dayjs";
-import customParseFormat from "dayjs/plugin/customParseFormat";
-import isoWeek from "dayjs/plugin/isoWeek"
-import isBetween from "dayjs/plugin/isBetween"
-import DocumentList from "~/components/DocumentList.vue";
-import DocumentUpload from "~/components/DocumentUpload.vue";
-import { v4 as uuidv4 } from 'uuid';
-dayjs.extend(customParseFormat)
-dayjs.extend(isoWeek)
-dayjs.extend(isBetween)
-
-const dataStore = useDataStore()
-const profileStore = useProfileStore()
-const route = useRoute()
-const router = useRouter()
-const supabase = useSupabaseClient()
-const toast = useToast()
-
-const itemInfo = ref({
-  weeklyRegularWorkingHours: {
-    "1":0,
-    "2":0,
-    "3":0,
-    "4":0,
-    "5":0,
-    "6":0,
-    "7":0,
-  }
-})
-const oldItemInfo = ref({})
-
-const setupPage = async () => {
-
-  console.log(itemInfo.value)
-
-  if(route.params.id) {
-    itemInfo.value = await useSupabaseSelectSingle("profiles",route.params.id,"*, documents(*), checks(*)")
-
-    if(Object.keys(itemInfo.value.weeklyRegularWorkingHours).length === 0) {
-      itemInfo.value.weeklyRegularWorkingHours = {
-        "1":0,
-        "2":0,
-        "3":0,
-        "4":0,
-        "5":0,
-        "6":0,
-        "7":0,
-      }
-    }
-
-    if(!itemInfo.value.weeklyWorkingHours) itemInfo.value.weeklyWorkingHours = 0
-    if(!itemInfo.value.weeklyWorkingDays) itemInfo.value.weeklyWorkingDays = 0
-    if(!itemInfo.value.annualPaidLeaveDays) itemInfo.value.annualPaidLeaveDays = 0
-
-  }
-
-  if(itemInfo.value.id) oldItemInfo.value = JSON.parse(JSON.stringify(itemInfo.value))
-}
-
-setupPage()
-
-const emailSignature = ref(profileStore.activeProfile.emailSignature)
-const tiptapLoaded = ref(false)
-const contentSaved = ref(true)
-const contentChanged = async (content) => {
-  emailSignature.value = content.html
-  if(tiptapLoaded.value === true) {
-    contentSaved.value = false
-  } else {
-    tiptapLoaded.value = true
-  }
-}
-
-
-
-const saveSignature = async () => {
-  const {data,error} = await supabase.from("profiles").update({emailSignature: emailSignature.value}).eq("id", profileStore.activeProfile.id)
-
-  if(error) {
-    toast.add({title: "Fehler beim Speichern der Signatur", color:"rose"})
-  }
-  else {
-    contentSaved.value = true
-  }
-}
-
-
-
-const addToNewsletter = async () => {
-  const {data,error} = await axios({
-    url: "https://newsletter.fedeo.io/api/public/subscription",
-    method: "post",
-    data: {
-      email: profileStore.activeProfile.email,
-      name: profileStore.activeProfile.name,
-      list_uuids: ["b97453fd-14b2-4b25-8f9b-b83847317ea3"],
-
-    }
-  })
-
-}
-
-const calcWeeklyWorkingHours = () => {
-  itemInfo.value.weeklyWorkingHours =
-      itemInfo.value.weeklyRegularWorkingHours[1] +
-      itemInfo.value.weeklyRegularWorkingHours[2] +
-      itemInfo.value.weeklyRegularWorkingHours[3] +
-      itemInfo.value.weeklyRegularWorkingHours[4] +
-      itemInfo.value.weeklyRegularWorkingHours[5] +
-      itemInfo.value.weeklyRegularWorkingHours[6] +
-      itemInfo.value.weeklyRegularWorkingHours[7]
-}
-
-const colorMode = useColorMode()
-const isLight = computed({
-  get() {
-    return colorMode.value !== 'dark'
-  },
-  set() {
-    colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
-  }
-})
-
-const saveProfile = async () => {
-  let data = {...itemInfo.value, fullName: itemInfo.value.firstName + ' ' + itemInfo.value.lastName}
-  delete data.checks
-  delete data.documents
-
-  await dataStore.updateItem('profiles',data,oldItemInfo.value)
-}
-
-const addAutomaticHourCorrection = async () => {
-  itemInfo.value.automaticHourCorrections.push({mode: 'correct', id: uuidv4(), weekday: 1, bookingTimeUTC: {hour: 0, minute: 0}, rangeStartUTC: {hour: 0, minute: 0}, rangeEndUTC: {hour: 0, minute: 0}})
-}
-
-</script>
-
-<template>
-  <UDashboardNavbar
-    :title="itemInfo.fullName"
-  >
-    <template #left>
-      <UButton
-          icon="i-heroicons-chevron-left"
-          variant="outline"
-          @click="router.push(`/profiles`)"
-      >
-        Mitarbeiter
-      </UButton>
-    </template>
-    <template #center>
-      <h1
-          v-if="itemInfo"
-          :class="['text-xl','font-medium'/*, ... true ? ['text-primary'] : ['text-rose-500']*/]"
-      >{{itemInfo ? `Mitarbeiter: ${itemInfo.fullName}` : ''}}</h1>
-    </template>
-  </UDashboardNavbar>
-  <UTabs
-      v-if="itemInfo.id"
-    class="p-5"
-    :items="[
-        {
-          label: 'Informationen'
-        },{
-          label: 'Logbuch'
-        },{
-          label: 'Zeiterfassung'
-        },{
-          label: 'Vertragsdaten'
-        },{
-          label: 'Dokumente'
-        },{
-          label: 'Überprüfungen'
-        }
-    ]"
-  >
-    <template #item="{item}">
-      <UCard class="mt-5">
-        <div v-if="item.label === 'Informationen'">
-          <Toolbar>
-            <UButton
-                @click="saveProfile"
-            >
-              Speichern
-            </UButton>
-          </Toolbar>
-          <InputGroup class="w-full">
-            <UFormGroup
-              label="Anrede"
-              class="w-60"
-            >
-              <UInput
-                v-model="itemInfo.salutation"
-              />
-            </UFormGroup>
-            <UFormGroup
-              label="Vorname"
-              class="flex-auto"
-            >
-              <UInput
-                v-model="itemInfo.firstName"
-              />
-            </UFormGroup>
-            <UFormGroup
-              label="Nachname"
-              class="flex-auto"
-            >
-              <UInput
-                v-model="itemInfo.lastName"
-              />
-            </UFormGroup>
-          </InputGroup>
-          <InputGroup class="w-full">
-            <UFormGroup
-              label="Mitarbeiternummer"
-              class="w-60"
-            >
-              <UInput
-                v-model="itemInfo.employeeNumber"
-              />
-            </UFormGroup>
-            <UFormGroup
-              label="E-Mail"
-              class="flex-auto"
-            >
-              <UInput
-                v-model="itemInfo.email"
-              />
-            </UFormGroup>
-            <UFormGroup
-              label="Benutzername"
-              class="flex-auto"
-            >
-              <UInput
-                v-model="itemInfo.username"
-              />
-            </UFormGroup>
-          </InputGroup>
-          <InputGroup class="w-full">
-            <UFormGroup
-              label="Festnetz Telefon"
-              class="w-60"
-            >
-              <UInput
-                v-model="itemInfo.fixedTel"
-              />
-            </UFormGroup>
-            <UFormGroup
-              label="Handy"
-              class="flex-auto"
-            >
-              <UInput
-                v-model="itemInfo.mobileTel"
-              />
-            </UFormGroup>
-            <UFormGroup
-                label="Geburtstag:"
-            >
-              <UPopover :popper="{ placement: 'bottom-start' }">
-                <UButton
-                    icon="i-heroicons-calendar-days-20-solid"
-                    :label="itemInfo.birthday ? dayjs(itemInfo.birthday).format('DD.MM.YYYY') : 'Datum auswählen'"
-                    variant="outline"
-                />
-
-                <template #panel="{ close }">
-                  <LazyDatePicker v-model="itemInfo.birthday" />
-                </template>
-              </UPopover>
-            </UFormGroup>
-          </InputGroup>
-          <InputGroup class="w-full">
-            <UFormGroup
-              label="Kleidergröße Oberteil"
-              class="w-60"
-            >
-              <UInput
-                v-model="itemInfo.clothingSizeTop"
-              />
-            </UFormGroup>
-            <UFormGroup
-              label="Kleidergröße Hose"
-              class="w-60"
-            >
-              <UInput
-                v-model="itemInfo.clothingSizeBottom"
-              />
-            </UFormGroup>
-            <UFormGroup
-              label="Schuhgröße"
-              class="w-60"
-            >
-              <UInput
-                v-model="itemInfo.clothingSizeShoe"
-              />
-            </UFormGroup>
-          </InputGroup>
-
-          <UDivider class="my-5" v-if="profileStore.activeProfile.id === itemInfo.id">
-            Helligkeitseinstellung
-          </UDivider>
-
-          <UButton
-              v-if="profileStore.activeProfile.id === itemInfo.id"
-              :icon="isLight ? 'i-heroicons-moon-20-solid' : 'i-heroicons-sun-20-solid'"
-              color="white"
-              variant="outline"
-              aria-label="Theme"
-              @click="isLight = !isLight"
-          >
-            {{!isLight ? "Hell" : "Dunkel"}}
-          </UButton>
-
-          <UDivider class="my-5">
-            E-Mail Signatur
-          </UDivider>
-
-          <UButton
-            variant="outline"
-            v-if="!contentSaved"
-            @click="saveSignature"
-          >
-            Speichern
-          </UButton>
-
-          <Tiptap
-              @updateContent="contentChanged"
-              :preloadedContent="emailSignature"
-          />
-
-          <!--<UDivider>Newsletter</UDivider>
-
-          <UButton
-            @click="addToNewsletter"
-            variant="outline"
-          >
-            In Newsletter eintragen
-          </UButton>-->
-
-        </div>
-        <div v-if="item.label === 'Logbuch'">
-          <HistoryDisplay
-              type="profile"
-              v-if="itemInfo"
-              :element-id="itemInfo.id"
-          />
-        </div>
-        <div v-if="item.label === 'Vertragsdaten'">
-          <Toolbar>
-            <UButton
-                @click="saveProfile"
-            >
-              Speichern
-            </UButton>
-          </Toolbar>
-          <InputGroup class="w-full">
-            <UFormGroup
-                label="Eintrittsdatum:"
-            >
-              <UPopover :popper="{ placement: 'bottom-start' }">
-                <UButton
-                    icon="i-heroicons-calendar-days-20-solid"
-                    :label="itemInfo.entryDate ? dayjs(itemInfo.entryDate).format('DD.MM.YYYY') : 'Datum auswählen'"
-                    variant="outline"
-                />
-
-                <template #panel="{ close }">
-                  <LazyDatePicker v-model="itemInfo.entryDate" />
-                </template>
-              </UPopover>
-            </UFormGroup>
-          </InputGroup>
-          <InputGroup class="w-full">
-            <UFormGroup
-              label="Wöchentliche Arbeitszeit"
-              class="flex-auto"
-            >
-              <UInput
-                v-model="itemInfo.weeklyWorkingHours"
-                type="number"
-              />
-            </UFormGroup>
-<!--            <UFormGroup
-              label="Durchschnittliche Arbeitstage pro Woche"
-              class="flex-auto"
-            >
-              <UInput
-                v-model="itemInfo.weeklyWorkingDays"
-              />
-            </UFormGroup>-->
-            <UFormGroup
-              label="Urlaubstage"
-              class="flex-auto"
-            >
-              <UInput
-                v-model="itemInfo.annualPaidLeaveDays"
-              />
-            </UFormGroup>
-          </InputGroup>
-          <UDivider class="my-3">Regelarbeitszeiten</UDivider>
-          <InputGroup class="w-full">
-            <UFormGroup
-              label="Montag"
-              class="flex-auto"
-            >
-              <UInput
-                v-model="itemInfo.weeklyRegularWorkingHours[1]"
-                type="number"
-                @keyup="calcWeeklyWorkingHours"
-                @change="calcWeeklyWorkingHours"
-
-              />
-            </UFormGroup><UFormGroup
-              label="Dienstag"
-              class="flex-auto"
-            >
-              <UInput
-                v-model="itemInfo.weeklyRegularWorkingHours[2]"
-                type="number"
-                @change="calcWeeklyWorkingHours"
-                @keyup="calcWeeklyWorkingHours"
-
-              />
-            </UFormGroup>
-            <UFormGroup
-              label="Mittwoch"
-              class="flex-auto"
-            >
-              <UInput
-                v-model="itemInfo.weeklyRegularWorkingHours[3]"
-                type="number"
-                @change="calcWeeklyWorkingHours"
-                @keyup="calcWeeklyWorkingHours"
-              />
-            </UFormGroup>
-            <UFormGroup
-              label="Donnerstag"
-              class="flex-auto"
-            >
-              <UInput
-                v-model="itemInfo.weeklyRegularWorkingHours[4]"
-                type="number"
-                @change="calcWeeklyWorkingHours"
-                @keyup="calcWeeklyWorkingHours"
-              />
-            </UFormGroup>
-            <UFormGroup
-              label="Freitag"
-              class="flex-auto"
-            >
-              <UInput
-                v-model="itemInfo.weeklyRegularWorkingHours[5]"
-                type="number"
-                @change="calcWeeklyWorkingHours"
-                @keyup="calcWeeklyWorkingHours"
-              />
-            </UFormGroup>
-            <UFormGroup
-              label="Samstag"
-              class="flex-auto"
-            >
-              <UInput
-                v-model="itemInfo.weeklyRegularWorkingHours[6]"
-                type="number"
-                @change="calcWeeklyWorkingHours"
-                @keyup="calcWeeklyWorkingHours"
-              />
-            </UFormGroup>
-            <UFormGroup
-              label="Sonntag"
-              class="flex-auto"
-            >
-              <UInput
-                v-model="itemInfo.weeklyRegularWorkingHours[7]"
-                type="number"
-                @change="calcWeeklyWorkingHours"
-                @keyup="calcWeeklyWorkingHours"
-              />
-            </UFormGroup>
-          </InputGroup>
-        </div>
-        <div v-else-if="item.label === 'Dokumente'">
-          <DocumentUpload
-              type="profile"
-              :element-id="itemInfo.id"
-          />
-
-          <DocumentList :documents="dataStore.getDocumentsByProfileId(itemInfo.id)"/>
-        </div>
-        <div v-else-if="item.label === 'Überprüfungen'">
-          <UTable
-              :rows="itemInfo.checks"
-              :columns="[{key:'name',label: 'Name'},{key:'rhythm',label: 'Rhythmus'},{key:'description',label: 'Beschreibung'}]"
-              class="w-full"
-              :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
-              @select="(i) => router.push(`/checks/show/${i.id}`) "
-              :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Überprüfungen anzuzeigen' }"
-          >
-            <template #rhythm-data="{row}">
-              {{row.distance}}
-              <span v-if="row.distanceUnit === 'dayjs'">Tage</span>
-              <span v-if="row.distanceUnit === 'years'">Jahre</span>
-            </template>
-          </UTable>
-        </div>
-        <div v-else-if="item.label === 'Zeiterfassung'">
-          <UButton
-            @click="addAutomaticHourCorrection"
-          >
-            + Korrektur
-          </UButton>
-          <UButton
-            @click="saveProfile"
-            class="ml-3"
-          >
-            Speichern
-          </UButton>
-
-          <UDivider class="my-3" />
-
-          <InputGroup class="w-full" v-for="item in itemInfo.automaticHourCorrections">
-            <UFormGroup
-              label="Modus"
-            >
-              <USelectMenu
-                v-model="item.mode"
-                :options="[{key: 'correct', label: 'Korrigieren'},{key: 'automatic-checkout', label: 'Automatisches ausbuchen'}]"
-                option-attribute="label"
-                value-attribute="key"
-                class="w-80"
-              />
-            </UFormGroup>
-            <UFormGroup
-              label="Wochentag"
-            >
-              <USelectMenu
-                  v-model="item.weekday"
-                  :options="[{key: 1, label: 'Montag'},{key: 2, label: 'Dienstag'},{key: 3, label: 'Mittwoch'},{key: 4, label: 'Donnerstag'},{key: 5, label: 'Freitag'},{key: 6, label: 'Samstag'},{key: 7, label: 'Sonntag'},]"
-                  option-attribute="label"
-                  value-attribute="key"
-                  class="w-40"
-              />
-            </UFormGroup>
-            <UFormGroup
-              label="Zeitraum Start"
-              v-if="item.mode === 'correct'"
-            >
-              <InputGroup>
-                <UInput
-                    v-model="item.rangeStartUTC.hour"
-                    placeholder="Stunde UTC"
-                    class="w-20"
-                />
-                <UInput
-                    v-model="item.rangeStartUTC.minute"
-                    placeholder="Minute UTC"
-                    class="w-20"
-                />
-              </InputGroup>
-
-            </UFormGroup>
-            <UFormGroup
-              label="Zeitraum Ende"
-              v-if="item.mode === 'correct'"
-            >
-              <InputGroup>
-                <UInput
-                    v-model="item.rangeEndUTC.hour"
-                    placeholder="Stunde UTC"
-                    class="w-20"
-                />
-                <UInput
-                    v-model="item.rangeEndUTC.minute"
-                    placeholder="Minute UTC"
-                    class="w-20"
-                />
-              </InputGroup>
-            </UFormGroup>
-            <UFormGroup
-              label="Korrigieren zu"
-              v-if="item.mode === 'correct'"
-            >
-              <InputGroup>
-                <UInput
-                    v-model="item.bookingTimeUTC.hour"
-                    placeholder="Stunde UTC"
-                    class="w-20"
-                />
-                <UInput
-                    v-model="item.bookingTimeUTC.minute"
-                    placeholder="Minute UTC"
-                    class="w-20"
-                />
-              </InputGroup>
-            </UFormGroup>
-            <UFormGroup
-              label="Ausbuchen"
-              v-if="item.mode === 'automatic-checkout'"
-            >
-              <InputGroup>
-                <UInput
-                    v-model="item.bookingTimeUTC.hour"
-                    placeholder="Stunde UTC"
-                    class="w-20"
-                />
-                <UInput
-                    v-model="item.bookingTimeUTC.minute"
-                    placeholder="Minute UTC"
-                    class="w-20"
-                />
-              </InputGroup>
-            </UFormGroup>
-            <UFormGroup
-              label="Entfernen"
-            >
-              <UButton
-                  icon="i-heroicons-x-mark"
-                  variant="outline"
-                  color="red"
-                  @click="itemInfo.automaticHourCorrections = itemInfo.automaticHourCorrections.filter(i => i.id !== item.id)"
-              />
-            </UFormGroup>
-
-          </InputGroup>
-
-        </div>
-      </UCard>
-    </template>
-  </UTabs>
-</template>
-
-<style scoped>
-
-</style>
\ No newline at end of file
diff --git a/pages/staff/profiles/[id].vue b/pages/staff/profiles/[id].vue
new file mode 100644
index 0000000..508f94c
--- /dev/null
+++ b/pages/staff/profiles/[id].vue
@@ -0,0 +1,318 @@
+<script setup lang="ts">
+
+const route = useRoute()
+const toast = useToast()
+const { $api } = useNuxtApp()
+
+const id = route.params.id as string
+const profile = ref<any>(null)
+const pending = ref(true)
+const saving = ref(false)
+
+/** Profil laden **/
+async function fetchProfile() {
+  pending.value = true
+  try {
+    profile.value = await $api(`/api/profiles/${id}`)
+    ensureWorkingHoursStructure()
+  } catch (err: any) {
+    console.error('[fetchProfile]', err)
+    toast.add({
+      title: 'Fehler beim Laden',
+      description: err?.data?.error || err?.message || 'Unbekannter Fehler',
+      color: 'red'
+    })
+  } finally {
+    pending.value = false
+  }
+}
+
+/** Profil speichern **/
+async function saveProfile() {
+  if (saving.value) return
+  saving.value = true
+
+  try {
+    await $api(`/api/profiles/${id}`, {
+      method: 'PUT',
+      body: profile.value
+    })
+    toast.add({ title: 'Profil gespeichert', color: 'green' })
+    fetchProfile()
+  } catch (err: any) {
+    console.error('[saveProfile]', err)
+    toast.add({
+      title: 'Fehler beim Speichern',
+      description: err?.data?.error || err?.message || 'Unbekannter Fehler',
+      color: 'red'
+    })
+  } finally {
+    saving.value = false
+  }
+}
+
+const weekdays = [
+  { key: '1', label: 'Montag' },
+  { key: '2', label: 'Dienstag' },
+  { key: '3', label: 'Mittwoch' },
+  { key: '4', label: 'Donnerstag' },
+  { key: '5', label: 'Freitag' },
+  { key: '6', label: 'Samstag' },
+  { key: '7', label: 'Sonntag' }
+]
+
+const bundeslaender = [
+  { code: 'DE-BW', name: 'Baden-Württemberg' },
+  { code: 'DE-BY', name: 'Bayern' },
+  { code: 'DE-BE', name: 'Berlin' },
+  { code: 'DE-BB', name: 'Brandenburg' },
+  { code: 'DE-HB', name: 'Bremen' },
+  { code: 'DE-HH', name: 'Hamburg' },
+  { code: 'DE-HE', name: 'Hessen' },
+  { code: 'DE-MV', name: 'Mecklenburg-Vorpommern' },
+  { code: 'DE-NI', name: 'Niedersachsen' },
+  { code: 'DE-NW', name: 'Nordrhein-Westfalen' },
+  { code: 'DE-RP', name: 'Rheinland-Pfalz' },
+  { code: 'DE-SL', name: 'Saarland' },
+  { code: 'DE-SN', name: 'Sachsen' },
+  { code: 'DE-ST', name: 'Sachsen-Anhalt' },
+  { code: 'DE-SH', name: 'Schleswig-Holstein' },
+  { code: 'DE-TH', name: 'Thüringen' }
+]
+
+
+// Sicherstellen, dass das JSON-Feld existiert
+function ensureWorkingHoursStructure() {
+  if (!profile.value.weekly_regular_working_hours) {
+    profile.value.weekly_regular_working_hours = {}
+  }
+  for (const { key } of weekdays) {
+    if (profile.value.weekly_regular_working_hours[key] == null) {
+      profile.value.weekly_regular_working_hours[key] = 0
+    }
+  }
+}
+
+function recalculateWeeklyHours() {
+  if (!profile.value?.weekly_regular_working_hours) return
+
+  const total = Object.values(profile.value.weekly_regular_working_hours).reduce(
+      (sum: number, val: any) => {
+        const num = parseFloat(val)
+        return sum + (isNaN(num) ? 0 : num)
+      },
+      0
+  )
+
+  profile.value.weekly_working_hours = Number(total.toFixed(2))
+}
+
+const checkZip = async () => {
+  const zipData = await useFunctions().useZipCheck(profile.value.address_zip)
+  profile.value.address_city = zipData.short
+  profile.value.state_code = zipData.state_code
+}
+
+onMounted(fetchProfile)
+
+</script>
+
+<template>
+  <!-- Haupt-Navigation -->
+  <UDashboardNavbar title="Mitarbeiter">
+    <template #left>
+      <UButton
+        color="primary"
+        variant="outline"
+        @click="navigateTo(`/staff/profiles`)"
+        icon="i-heroicons-chevron-left"
+
+      >
+        Mitarbeiter
+      </UButton>
+    </template>
+    <template #center>
+      <h1 class="text-xl font-medium truncate">
+        Mitarbeiter bearbeiten: {{ profile?.full_name || '' }}
+      </h1>
+    </template>
+  </UDashboardNavbar>
+
+  <!-- Toolbar -->
+  <UDashboardToolbar>
+    <template #right>
+      <UButton
+          icon="i-mdi-content-save"
+          color="primary"
+          :loading="saving"
+          @click="saveProfile"
+      >
+        Speichern
+      </UButton>
+    </template>
+  </UDashboardToolbar>
+
+  <!-- Inhalt -->
+  <UDashboardPanelContent>
+    <UCard v-if="!pending && profile">
+      <div class="flex items-center gap-4 mb-6">
+        <UAvatar size="xl" :alt="profile.full_name" />
+        <div>
+          <h2 class="text-xl font-semibold text-gray-900">{{ profile.full_name }}</h2>
+          <p class="text-sm text-gray-500">{{ profile.employee_number || '–' }}</p>
+        </div>
+      </div>
+
+      <UDivider label="Persönliche Daten" />
+
+      <UForm :state="profile" @submit.prevent="saveProfile" class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-4">
+        <UFormGroup label="Vorname">
+          <UInput v-model="profile.first_name" />
+        </UFormGroup>
+
+        <UFormGroup label="Nachname">
+          <UInput v-model="profile.last_name" />
+        </UFormGroup>
+
+        <UFormGroup label="E-Mail">
+          <UInput v-model="profile.email" />
+        </UFormGroup>
+
+        <UFormGroup label="Telefon (Mobil)">
+          <UInput v-model="profile.mobile_tel" />
+        </UFormGroup>
+
+        <UFormGroup label="Telefon (Festnetz)">
+          <UInput v-model="profile.fixed_tel" />
+        </UFormGroup>
+
+        <UFormGroup label="Geburtstag">
+          <UInput type="date" v-model="profile.birthday" />
+        </UFormGroup>
+      </UForm>
+    </UCard>
+    <UCard v-if="!pending && profile" class="mt-3">
+      <UDivider label="Vertragsinformationen" />
+
+      <UForm :state="profile" @submit.prevent="saveProfile" class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-4">
+        <UFormGroup label="Vertragsart">
+          <UInput v-model="profile.contract_type"/>
+        </UFormGroup>
+
+        <UFormGroup label="Status">
+          <UInput v-model="profile.status"/>
+        </UFormGroup>
+
+        <UFormGroup label="Position">
+          <UInput v-model="profile.position"/>
+        </UFormGroup>
+
+        <UFormGroup label="Qualifikation">
+          <UInput v-model="profile.qualification"/>
+        </UFormGroup>
+
+        <UFormGroup label="Eintrittsdatum">
+          <UInput type="date" v-model="profile.entry_date" />
+        </UFormGroup>
+
+        <UFormGroup label="Wöchentliche Arbeitszeit (Std)">
+          <UInput type="number" v-model="profile.weekly_working_hours" />
+        </UFormGroup>
+
+        <UFormGroup label="Bezahlte Urlaubstage (Jahr)">
+          <UInput type="number" v-model="profile.annual_paid_leave_days" />
+        </UFormGroup>
+        <UFormGroup label="Aktiv">
+          <div class="flex items-center gap-3">
+            <UToggle v-model="profile.active" color="primary" />
+            <span class="text-sm text-gray-600">
+        </span>
+          </div>
+        </UFormGroup>
+      </UForm>
+
+    </UCard>
+
+    <UCard v-if="!pending && profile" class="mt-3">
+      <UDivider label="Adresse & Standort" />
+
+      <UForm :state="profile" @submit.prevent="saveProfile" class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-4">
+        <UFormGroup label="Straße und Hausnummer">
+          <UInput v-model="profile.address_street"/>
+        </UFormGroup>
+
+        <UFormGroup label="PLZ">
+          <UInput type="text" v-model="profile.address_zip" @focusout="checkZip"/>
+        </UFormGroup>
+
+        <UFormGroup label="Ort">
+          <UInput v-model="profile.address_city"/>
+        </UFormGroup>
+
+        <UFormGroup label="Bundesland">
+          <USelectMenu
+              v-model="profile.state_code"
+              :options="bundeslaender"
+              value-attribute="code"
+              option-attribute="name"
+              placeholder="Bundesland auswählen"
+          />
+        </UFormGroup>
+      </UForm>
+    </UCard>
+
+
+    <UCard v-if="!pending && profile" class="mt-3">
+      <UDivider label="Wöchentliche Arbeitsstunden" />
+
+      <div class="mt-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        <div
+            v-for="day in weekdays"
+            :key="day.key"
+            :class="[...profile.weekly_regular_working_hours[day.key] === 0 ? ['bg-gray-100'] : ['bg-gray-100','border-green-400'], 'flex items-center justify-between border rounded-lg p-3 bg-gray-50']"
+        >
+          <span class="font-medium text-gray-700">{{ day.label }}</span>
+          <div class="flex items-center gap-2">
+            <UInput
+                type="number"
+                size="sm"
+                min="0"
+                max="24"
+                step="0.25"
+                v-model.number="profile.weekly_regular_working_hours[day.key]"
+                placeholder="0"
+                class="w-24"
+                @change="recalculateWeeklyHours"
+            />
+            <span class="text-gray-400 text-sm">Std</span>
+          </div>
+        </div>
+      </div>
+    </UCard>
+
+    <UCard v-if="!pending && profile" class="mt-3">
+      <UDivider label="Sonstiges" />
+      <UForm :state="profile" @submit.prevent="saveProfile" class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-4">
+        <UFormGroup label="Kleidergröße (Oberteil)">
+          <UInput v-model="profile.clothing_size_top" />
+        </UFormGroup>
+
+        <UFormGroup label="Kleidergröße (Hose)">
+          <UInput v-model="profile.clothing_size_bottom" />
+        </UFormGroup>
+
+        <UFormGroup label="Schuhgröße">
+          <UInput v-model="profile.clothing_size_shoe" />
+        </UFormGroup>
+
+        <UFormGroup label="Token-ID">
+          <UInput v-model="profile.token_id" />
+        </UFormGroup>
+      </UForm>
+    </UCard>
+
+    <USkeleton v-if="pending" height="300px" />
+  </UDashboardPanelContent>
+</template>
+
+
diff --git a/pages/profiles/index.vue b/pages/staff/profiles/index.vue
similarity index 92%
rename from pages/profiles/index.vue
rename to pages/staff/profiles/index.vue
index 6513a1a..51a2690 100644
--- a/pages/profiles/index.vue
+++ b/pages/staff/profiles/index.vue
@@ -1,6 +1,4 @@
 <script setup>
-  const dataStore = useDataStore()
-  const profileStore = useProfileStore()
   const router = useRouter()
 
   const items = ref([])
@@ -40,10 +38,10 @@
         </UButton>
       </template>
   </UDashboardNavbar>
-
   <UTable
     :rows="items"
     :columns="columns"
+    @select="(i) => navigateTo(`/staff/profiles/${i.id}`)"
   >
 
   </UTable>