diff --git a/app/Actions/SysAdmin/User/UI/EditUser.php b/app/Actions/SysAdmin/User/UI/EditUser.php
index 87b606a94..e3bc2c0a8 100644
--- a/app/Actions/SysAdmin/User/UI/EditUser.php
+++ b/app/Actions/SysAdmin/User/UI/EditUser.php
@@ -97,7 +97,7 @@ class_basename(Warehouse::class) => Organisation::all()->map(function (Organisat
         $jobPositionsOrganisationsData = [];
         foreach ($this->group->organisations as $organisation) {
             $jobPositionsOrganisationData = GetJobPositionsOrganisationData::run($user, $organisation);
-            $jobPositionsOrganisationsData[] = $jobPositionsOrganisationData;
+            $jobPositionsOrganisationsData[$organisation->slug] = $jobPositionsOrganisationData;
         }
 
         $permissionsGroupData = GetPermissionGroupData::run($user, $this->group);
diff --git a/app/Models/SysAdmin/User.php b/app/Models/SysAdmin/User.php
index ce84c7e0e..116292d99 100644
--- a/app/Models/SysAdmin/User.php
+++ b/app/Models/SysAdmin/User.php
@@ -278,7 +278,7 @@ public function timeSeries(): HasMany
     public function jobPositions(): BelongsToMany
     {
         return $this->belongsToMany(JobPosition::class, 'user_has_pseudo_job_positions')
-            ->using(UserHasPseudoJobPositions::class)->withTimestamps();
+            ->using(UserHasPseudoJobPositions::class)->withPivot(['scopes'])->withTimestamps();
     }
 
 
diff --git a/resources/js/Components/Forms/Fields/EmployeePosition.vue b/resources/js/Components/Forms/Fields/EmployeePosition.vue
index 76bfa3a57..b08e8bf41 100644
--- a/resources/js/Components/Forms/Fields/EmployeePosition.vue
+++ b/resources/js/Components/Forms/Fields/EmployeePosition.vue
@@ -1,5 +1,5 @@
     <script setup lang="ts">
-import { computed, inject, onMounted, reactive, ref } from 'vue'
+import { computed, inject, onMounted, reactive, ref, watch } from 'vue'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { faBullhorn,faCashRegister,faChessQueen,faCube,faStore, faInfoCircle, faCircle, faCrown, faBars, faAbacus, faCheckDouble, faQuestionCircle, faTimes, faCheckCircle as falCheckCircle } from '@fal'
 import { faBoxUsd,faHelmetBattle,faExclamationCircle, faCheckCircle as fasCheckCircle, faCrown as fasCrown } from '@fas'
@@ -69,8 +69,13 @@ interface optionsJob {
 const layout = inject('layout', layoutStructure)
 
 const props = defineProps<{
-    form?: any
-    fieldName: string
+    form: {
+        group: string[]
+        organisations: {
+            [key: string]: {}
+        }
+    }
+    fieldName: string  // organisation slug
     options: {
         positions: {
             data: {
@@ -109,7 +114,12 @@ const props = defineProps<{
     organisationId?: number
 }>()
 
-const newForm = props.saveButton ? useForm({[props.fieldName]: props.form[props.fieldName]} || {}) : reactive(props.form)
+const abcdef = {
+    [props.fieldName]: props.form.organisations[props.fieldName] || 'fffff'
+}
+console.log('pppp', props.form.organisations)
+const newForm = props.saveButton ? useForm(abcdef || {}) : reactive(props.form)
+console.log('bbbb', newForm)
 const onSubmitNewForm = () => {
     newForm
     .transform((data) => ({
@@ -561,14 +571,20 @@ onMounted(() => {
     }, 300)
 })
 
-const countPosition = computed(() => {
-    return Object.keys(newForm[props.fieldName] || {})?.length
-})
+const emits = defineEmits<{
+    (e: 'countPosition', value: number): void
+}>()
+watch(() => newForm, () => {
+    const xxx = Object.keys(newForm[props.fieldName]).length
+    // console.log('newForm', xxx)
+    emits('countPosition', xxx)
+}, { deep: true, immediate: true })
+
+
 </script>
 
 <template>
     <div class="relative">
-        <div class="bg-red-300">{{ countPosition }}ddddddd</div>
         <!-- authorised fulfilment: {{ fulfilmentsLength }} <br> authorised shop: {{ shopsLength }} <br> authorised warehouse: {{ warehousesLength }} <br> authorised production: {{ productionsLength }} -->
         <div class="relative flex flex-col text-xs divide-y-[1px]">
             <template v-if="isMounted">
@@ -643,7 +659,7 @@ const countPosition = computed(() => {
                                             <div class="flex flex-col gap-y-4 pt-4">
                                                 <template v-for="optionData, optionKey, optionIdx in optionsList" :key="optionKey + optionIdx">
                                                     <div v-if="jobGroup.subDepartment.some(subDep => subDep.optionsType?.includes(optionKey))" class="">
-                                                        <div class="text-white text-center bg-indigo-500 capitalize py-0.5">{{ optionKey }}</div>
+                                                        <div class="text-white text-center bg-gray-400 capitalize py-0.5">{{ optionKey }}</div>
                                                         <div class="flex flex-col gap-x-2 gap-y-0.5">
                                                             <!-- Section: Box radio -->
                                                             <div v-for="(shop, idxZXC) in optionData" class="grid grid-cols-4 items-center justify-start gap-x-6 min-h-6"
@@ -741,5 +757,6 @@ const countPosition = computed(() => {
 
     </div>
 
-    <pre>{{ newForm }}</pre>
+    Newform
+    <pre>{{ newForm[fieldName] }}</pre>
 </template>
diff --git a/resources/js/Components/Forms/Fields/Permissions.vue b/resources/js/Components/Forms/Fields/Permissions.vue
index 37b476c62..f4dfe9508 100644
--- a/resources/js/Components/Forms/Fields/Permissions.vue
+++ b/resources/js/Components/Forms/Fields/Permissions.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Ref, ref } from 'vue'
+import { computed, Ref, ref, watch } from 'vue'
 import { Collapse } from 'vue-collapsed'
 import CardPermissions from './Components/Permissions/Card.vue'
 import { get, set } from 'lodash'
@@ -170,11 +170,19 @@ const organisation = [
 ]
 const selectedOrganisation = ref<typeof organisation[number] | null>(organisation[0])
 
+const organisationPositionCounts = ref({})
+// watch(props.form, (newValue) => {
+//     console.log('vcxvcxvcxvcxvcxvcxvcx')
+//     organisationPositionCounts.value = {...newValue}.map((org) => {
+//         return {
+//             [org]: Object.keys(org).length
+//         }
+//     })
+// }, { deep: true })
 </script>
 
 <template>
     <div class="flex flex-col gap-y-6">
-
         <Fieldset legend="Group permissions">
             <div>
                 <template v-for="(jobGroup, departmentName, idxJobGroup) in groupPositionList" :key="departmentName + idxJobGroup">
@@ -232,9 +240,7 @@ const selectedOrganisation = ref<typeof organisation[number] | null>(organisatio
             <Button @click="submitGroupPermissions" full label="Save group permissions" class="mt-4" :disabled="!form.isDirty || form.processing" :loading="form.processing" />
         </Fieldset>
 
-        {{ props.form[props.fieldName].group }}
-
-        <!-- <div class="grid">
+        <div class="grid">
             <div class="flex justify-between px-2 border-b border-gray-300 py-2 mb-2">
                 <div>
                     Organisations
@@ -244,29 +250,30 @@ const selectedOrganisation = ref<typeof organisation[number] | null>(organisatio
                 </div>
             </div>
 
-            <div v-for="(review, slugReview) in props.fieldData.organisation_list.data"
+            <div v-for="(organisation, idxOrganisation) in props.fieldData.organisation_list.data"
                 class="border-l-2 border-indigo-500 pl-2 flex flex-col mb-1 gap-y-1"
             >
                 <div
-                    @click="selectedOrganisation?.slug == review.slug ? selectedOrganisation = null : selectedOrganisation = review"
+                    @click="selectedOrganisation?.slug == organisation.slug ? selectedOrganisation = null : selectedOrganisation = organisation"
                     class="rounded cursor-pointer py-1 px-2 flex justify-between"
-                    :class="review.slug === selectedOrganisation?.slug ? 'bg-indigo-100 text-indigo-500' : 'hover:bg-gray-200/70 '"
+                    :class="organisation.slug === selectedOrganisation?.slug ? 'bg-indigo-100 text-indigo-500' : 'hover:bg-gray-200/70 '"
                 >
-                    <div class="">{{ review.name }}</div>
-                    <div v-tooltip="trans('Number job positions')" class="pl-3 pr-2">0/{{ review.number_job_positions }}</div>
+                    <div class="">{{ organisation.name }}</div>
+                    <div v-tooltip="trans('Number job positions')" class="pl-3 pr-2 tabular-nums"><transition name="spin-to-right"><span :key="organisationPositionCounts[organisation.slug]">{{ organisationPositionCounts[organisation.slug] }}</span></transition>/{{ organisation.number_job_positions }}</div>
                 </div>
 
-                <Collapse as="section" :when="review.slug == selectedOrganisation?.slug">
-                    {{ form[fieldName] }}
-                    <div v-if="options?.[review.slug]" class="border border-gray-300 rounded-md mb-2">
+                <Collapse as="section" :when="organisation.slug == selectedOrganisation?.slug">
+                    <!-- {{ form[fieldName] }} -->
+                    <div v-if="options?.[organisation.slug]" class="border border-gray-300 rounded-md mb-2">
                         <EmployeePosition
-                            :key="'employeePosition' + review.slug "
+                            :key="'employeePosition' + organisation.slug "
                             :form="form[fieldName]"
                             :fieldData
-                            :fieldName="review.slug"
-                            :options="options?.[review.slug]"
+                            :fieldName="organisation.slug"
+                            :options="options?.[organisation.slug]"
                             saveButton
-                            :organisationId="review.id"
+                            :organisationId="organisation.id"
+                            @countPosition="(count: number) => set(organisationPositionCounts, organisation.slug, count)"
                         />
                     </div>
                     <div v-else class="text-center border border-gray-300 rounded-md mb-2">
@@ -274,7 +281,7 @@ const selectedOrganisation = ref<typeof organisation[number] | null>(organisatio
                     </div>
                 </Collapse>
             </div>
-        </div> -->
+        </div>
 
 
         <!-- <pre>{{ form }}</pre> -->