From 3d8f2354cb2c41e58ddae71570556073d3e21ade Mon Sep 17 00:00:00 2001
From: Arno Kaimbacher <arno.kaimbacher@geosphere.at>
Date: Wed, 29 Oct 2025 11:20:27 +0100
Subject: [PATCH] feat: Enhance Dataset Edit Page with Unsaved Changes
 Indicator and Improved Structure

- Added a progress indicator for unsaved changes at the top of the dataset edit page.
- Enhanced the title section with a dataset status badge and improved layout.
- Introduced collapsible sections for better organization of form fields.
- Improved notifications for success/error messages.
- Refactored form fields into distinct sections: Basic Information, Licenses, Titles, Descriptions, Creators & Contributors, Additional Metadata, Geographic Coverage, and Files.
- Enhanced loading spinner with a more visually appealing overlay.
- Added new project validation logic in the backend with create and update validators.
---
 app/controllers/projects_controller.ts        |   8 +-
 app/validators/project.ts                     |  28 +
 resources/js/Layouts/LayoutAuthenticated.vue  |  23 +-
 resources/js/Pages/Admin/License/Index.vue    | 159 +--
 resources/js/Pages/Admin/Project/Create.vue   |  55 +-
 resources/js/Pages/Admin/Project/Index.vue    |   4 +-
 resources/js/Pages/Admin/Role/Index.vue       | 164 ++--
 resources/js/Pages/Dashboard.vue              | 138 +--
 resources/js/Pages/Submitter/Dataset/Edit.vue | 909 ++++++++++--------
 9 files changed, 863 insertions(+), 625 deletions(-)
 create mode 100644 app/validators/project.ts

diff --git a/app/controllers/projects_controller.ts b/app/controllers/projects_controller.ts
index 7b4d43e..21e20df 100644
--- a/app/controllers/projects_controller.ts
+++ b/app/controllers/projects_controller.ts
@@ -1,6 +1,7 @@
 // app/controllers/projects_controller.ts
 import Project from '#models/project';
 import type { HttpContext } from '@adonisjs/core/http';
+import { createProjectValidator, updateProjectValidator } from '#validators/project';
 
 export default class ProjectsController {
     // GET /settings/projects
@@ -23,7 +24,8 @@ export default class ProjectsController {
 
     // POST /settings/projects
     public async store({ request, response, session }: HttpContext) {
-        const data = request.only(['label', 'name', 'description']);
+        // Validate the request data
+        const data = await request.validateUsing(createProjectValidator);
 
         await Project.create(data);
 
@@ -40,7 +42,9 @@ export default class ProjectsController {
     // PUT /settings/projects/:id
     public async update({ params, request, response, session }: HttpContext) {
         const project = await Project.findOrFail(params.id);
-        const data = request.only(['label', 'name', 'description']);
+        
+        // Validate the request data
+        const data = await request.validateUsing(updateProjectValidator);
 
         await project.merge(data).save();
 
diff --git a/app/validators/project.ts b/app/validators/project.ts
new file mode 100644
index 0000000..bad6c7c
--- /dev/null
+++ b/app/validators/project.ts
@@ -0,0 +1,28 @@
+// app/validators/project.ts
+import vine from '@vinejs/vine';
+
+export const createProjectValidator = vine.compile(
+    vine.object({
+        label: vine.string().trim().minLength(1).maxLength(50),
+        name: vine
+            .string()
+            .trim()
+            .minLength(3)
+            .maxLength(255)
+            .regex(/^[a-z0-9-]+$/),
+        description: vine.string().trim().maxLength(255).minLength(5).optional(),
+    }),
+);
+
+export const updateProjectValidator = vine.compile(
+    vine.object({
+        // label is NOT included since it's readonly
+        name: vine
+            .string()
+            .trim()
+            .minLength(3)
+            .maxLength(255)
+            .regex(/^[a-z0-9-]+$/),
+         description: vine.string().trim().maxLength(255).minLength(5).optional(),
+    }),
+);
diff --git a/resources/js/Layouts/LayoutAuthenticated.vue b/resources/js/Layouts/LayoutAuthenticated.vue
index 15a117c..c077c7b 100644
--- a/resources/js/Layouts/LayoutAuthenticated.vue
+++ b/resources/js/Layouts/LayoutAuthenticated.vue
@@ -14,11 +14,11 @@ const props = defineProps({
     showAsideMenu: {
       type: Boolean,
       default: true // Set default value to true
+    },
+    hasProgressBar: {
+      type: Boolean,
+      default: false // New prop to indicate if progress bar is shown
     }
-	// user: {
-	// 	type: Object,
-	// 	default: () => ({}),
-	// }
 });
 </script>
 
@@ -29,9 +29,18 @@ const props = defineProps({
     }">
         <div :class="{ 
             'ml-60 lg:ml-0': layoutService.isAsideMobileExpanded,
-            'xl:pl-60': props.showAsideMenu==true }"
-            class="pt-14  min-h-screen w-screen transition-position lg:w-auto bg-gray-50 dark:bg-slate-800 dark:text-slate-100">
-            <NavBar :class="{ 'ml-60 lg:ml-0': layoutService.isAsideMobileExpanded }" :showBurger="props.showAsideMenu" />
+            'xl:pl-60': props.showAsideMenu==true,
+            'pt-14': !props.hasProgressBar,
+            'pt-24': props.hasProgressBar // Increased padding when progress bar is present (pt-14 + height of progress bar)
+        }"
+            class="min-h-screen w-screen transition-position lg:w-auto bg-gray-50 dark:bg-slate-800 dark:text-slate-100">
+            <NavBar 
+                :class="{ 
+                    'ml-60 lg:ml-0': layoutService.isAsideMobileExpanded,
+                    'top-10': props.hasProgressBar // Push NavBar down when progress bar is present
+                }" 
+                :showBurger="props.showAsideMenu" 
+            />
             <!-- Conditionally render AsideMenu based on showAsideMenu prop -->
             <template v-if="showAsideMenu">
                 <AsideMenu />
diff --git a/resources/js/Pages/Admin/License/Index.vue b/resources/js/Pages/Admin/License/Index.vue
index 73192dc..b871260 100644
--- a/resources/js/Pages/Admin/License/Index.vue
+++ b/resources/js/Pages/Admin/License/Index.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { usePage } from '@inertiajs/vue3';
-import { mdiAccountKey, mdiSquareEditOutline, mdiAlertBoxOutline } from '@mdi/js';
+import { Head, usePage } from '@inertiajs/vue3';
+import { mdiLicense, mdiCheckCircle, mdiCloseCircle, mdiAlertBoxOutline } from '@mdi/js';
 import { computed, ComputedRef } from 'vue';
 import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
 import SectionMain from '@/Components/SectionMain.vue';
@@ -9,107 +9,150 @@ import BaseButton from '@/Components/BaseButton.vue';
 import CardBox from '@/Components/CardBox.vue';
 import BaseButtons from '@/Components/BaseButtons.vue';
 import NotificationBar from '@/Components/NotificationBar.vue';
-// import Pagination from '@/Components/Admin/Pagination.vue';
-// import Sort from '@/Components/Admin/Sort.vue';
 import { stardust } from '@eidellev/adonis-stardust/client';
-// import CardBoxModal from '@/Components/CardBoxModal.vue';
 
-// const isModalDangerActive = ref(false);
-// const deleteId = ref();
+interface License {
+    id: number;
+    name: string;
+    sort_order: number;
+    active: boolean;
+}
 
-defineProps({
+const props = defineProps({
     licenses: {
-        type: Object,
-        default: () => ({}),
+        type: Array<License>,
+        default: () => [],
     },
-    // filters: {
-    //     type: Object,
-    //     default: () => ({}),
-    // },
     can: {
         type: Object,
         default: () => ({}),
     },
 });
 
-const flash: ComputedRef<any> = computed(() => {
-    // let test = usePage();
-    // console.log(test);
-    return usePage().props.flash;
-});
+const flash: ComputedRef<any> = computed(() => usePage().props.flash);
 
+const licenseCount = computed(() => props.licenses.length);
 
+const getLicenseColor = (index: number) => {
+    const colors = [
+        'bg-emerald-100 text-emerald-800 dark:bg-emerald-900 dark:text-emerald-300',
+        'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300',
+        'bg-violet-100 text-violet-800 dark:bg-violet-900 dark:text-violet-300',
+        'bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-300',
+        'bg-rose-100 text-rose-800 dark:bg-rose-900 dark:text-rose-300',
+        'bg-cyan-100 text-cyan-800 dark:bg-cyan-900 dark:text-cyan-300',
+    ];
+    return colors[index % colors.length];
+};
 </script>
 
 <template>
-
     <LayoutAuthenticated>
-
         <Head title="Licenses" />
         <SectionMain>
-            <SectionTitleLineWithButton :icon="mdiAccountKey" title="Licenses" main>
-                <!-- <BaseButton
-                    v-if="can.create"
-                    :route-name="stardust.route('settings.role.create')"
-                    :icon="mdiPlus"
-                    label="Add"
-                    color="info"
-                    rounded-full
-                    small
-                /> -->
+            <SectionTitleLineWithButton :icon="mdiLicense" title="Licenses" main>
+                <div class="flex items-center gap-3">
+                    <span class="text-sm text-gray-500 dark:text-gray-400 font-medium">
+                        {{ licenseCount }} {{ licenseCount === 1 ? 'license' : 'licenses' }}
+                    </span>
+                </div>
             </SectionTitleLineWithButton>
+
             <NotificationBar v-if="flash.message" color="success" :icon="mdiAlertBoxOutline">
                 {{ flash.message }}
             </NotificationBar>
+
             <CardBox class="mb-6" has-table>
-            </CardBox>
-            <CardBox class="mb-6" has-form-data>
                 <table>
                     <thead>
                         <tr>
-                            <th>
-                                <!-- <Sort label="Name" attribute="name" /> -->
-                                Name
-                            </th>
-                            <th>
-                                <!-- <Sort label="Sort Order" attribute="sort_order" /> -->
-                                Sort Order
-                            </th>
+                            <th>Name</th>
+                            <th>Sort Order</th>
+                            <th>Status</th>
                             <th v-if="can.edit">Actions</th>
-
                         </tr>
                     </thead>
 
                     <tbody>
-                        <tr v-for="license in licenses" :key="license.id">
+                        <tr v-if="licenses.length === 0">
+                            <td colspan="4" class="text-center py-12">
+                                <div class="flex flex-col items-center justify-center text-gray-500 dark:text-gray-400">
+                                    <p class="text-lg font-medium mb-2">No licenses found</p>
+                                    <p class="text-sm">Licenses will appear here once configured</p>
+                                </div>
+                            </td>
+                        </tr>
+                        <tr
+                            v-for="(license, index) in licenses"
+                            :key="license.id"
+                            class="hover:bg-gray-50 dark:hover:bg-slate-800 transition-colors"
+                        >
                             <td data-label="Name">
-                                <!-- <Link
-                                    :href="stardust.route('settings.role.show', [role.id])"
-                                    class="no-underline hover:underline text-cyan-600 dark:text-cyan-400"
+                                <span
+                                    class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium transition-all hover:shadow-md"
+                                    :class="getLicenseColor(index)"
                                 >
                                     {{ license.name }}
-                                </Link> -->
-                                {{ license.name }}
+                                </span>
                             </td>
-                            <td data-label="Description">
-                                {{ license.sort_order }}
+                            <td data-label="Sort Order">
+                                <span
+                                    class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-gray-100 dark:bg-slate-700 text-gray-700 dark:text-gray-300 font-semibold text-sm"
+                                >
+                                    {{ license.sort_order }}
+                                </span>
+                            </td>
+                            <td data-label="Status">
+                                <span
+                                    v-if="license.active"
+                                    class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300"
+                                >
+                                    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+                                        <path
+                                            fill-rule="evenodd"
+                                            d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+                                            clip-rule="evenodd"
+                                        />
+                                    </svg>
+                                    Active
+                                </span>
+                                <span
+                                    v-else
+                                    class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-300"
+                                >
+                                    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+                                        <path
+                                            fill-rule="evenodd"
+                                            d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
+                                            clip-rule="evenodd"
+                                        />
+                                    </svg>
+                                    Inactive
+                                </span>
                             </td>
-
                             <td v-if="can.edit" class="before:hidden lg:w-1 whitespace-nowrap">
                                 <BaseButtons type="justify-start lg:justify-end" no-wrap>
-                                    <BaseButton v-if="license.active"
+                                    <BaseButton
+                                        v-if="license.active"
                                         :route-name="stardust.route('settings.license.down', [license.id])"
-                                        color="warning" :icon="mdiSquareEditOutline" label="deactivate" small />
-                                    <BaseButton v-else :route-name="stardust.route('settings.license.up', [license.id])"
-                                        color="success" :icon="mdiSquareEditOutline" label="activate" small />
+                                        color="warning"
+                                        :icon="mdiCloseCircle"
+                                        label="Deactivate"
+                                        small
+                                    />
+                                    <BaseButton
+                                        v-else
+                                        :route-name="stardust.route('settings.license.up', [license.id])"
+                                        color="success"
+                                        :icon="mdiCheckCircle"
+                                        label="Activate"
+                                        small
+                                    />
                                 </BaseButtons>
                             </td>
                         </tr>
                     </tbody>
                 </table>
-                <!-- <div class="py-4">
-					<Pagination v-bind:data="roles.meta" />
-				</div> -->
             </CardBox>
         </SectionMain>
     </LayoutAuthenticated>
diff --git a/resources/js/Pages/Admin/Project/Create.vue b/resources/js/Pages/Admin/Project/Create.vue
index f0f8ee5..688e0ee 100644
--- a/resources/js/Pages/Admin/Project/Create.vue
+++ b/resources/js/Pages/Admin/Project/Create.vue
@@ -36,19 +36,15 @@ const submit = async () => {
                     small
                 />
             </SectionTitleLineWithButton>
-            
+
             <CardBox form @submit.prevent="submit()" class="shadow-lg">
                 <div class="grid grid-cols-1 gap-6">
-                    <FormField 
-                        label="Label" 
-                        help="Required. Displayed project label" 
-                        :class="{ 'text-red-400': form.errors.label }"
-                    >
-                        <FormControl 
-                            v-model="form.label" 
-                            type="text" 
-                            placeholder="Enter a descriptive label..." 
-                            required 
+                    <FormField label="Label" help="Required. Displayed project label" :class="{ 'text-red-400': form.errors.label }">
+                        <FormControl
+                            v-model="form.label"
+                            type="text"
+                            placeholder="e.g., my-awesome-project"                           
+                            required
                             :error="form.errors.label"
                             class="transition-all focus:ring-2 focus:ring-blue-500"
                         >
@@ -58,16 +54,16 @@ const submit = async () => {
                         </FormControl>
                     </FormField>
 
-                    <FormField 
-                        label="Name" 
-                        help="Required. Project identifier (slug, lowercase, no spaces)" 
+                    <FormField
+                        label="Name"
+                        help="Required. Project identifier (slug, lowercase, no spaces)"
                         :class="{ 'text-red-400': form.errors.name }"
                     >
-                        <FormControl 
-                            v-model="form.name" 
-                            type="text" 
-                            placeholder="e.g., my-awesome-project" 
-                            required 
+                        <FormControl
+                            v-model="form.name"
+                            type="text"
+                            placeholder="Enter a descriptive titel..."
+                            required
                             :error="form.errors.name"
                             class="font-mono transition-all focus:ring-2 focus:ring-blue-500"
                         >
@@ -100,12 +96,7 @@ const submit = async () => {
 
                 <template #footer>
                     <BaseButtons class="justify-between">
-                        <BaseButton
-                            :route-name="stardust.route('settings.project.index')"
-                            label="Cancel"
-                            color="white"
-                            outline
-                        />
+                        <BaseButton :route-name="stardust.route('settings.project.index')" label="Cancel" color="white" outline />
                         <BaseButton
                             type="submit"
                             color="info"
@@ -120,7 +111,9 @@ const submit = async () => {
             </CardBox>
 
             <!-- Helper Card -->
-            <CardBox class="mt-6 bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-slate-800 dark:to-slate-900 border-l-4 border-blue-500">
+            <CardBox
+                class="mt-6 bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-slate-800 dark:to-slate-900 border-l-4 border-blue-500"
+            >
                 <div class="flex items-start gap-4">
                     <div class="flex-shrink-0">
                         <div class="w-10 h-10 rounded-full bg-blue-500 dark:bg-blue-600 flex items-center justify-center">
@@ -128,12 +121,10 @@ const submit = async () => {
                         </div>
                     </div>
                     <div class="flex-1">
-                        <h3 class="text-sm font-semibold text-gray-900 dark:text-white mb-2">
-                            Quick Tips
-                        </h3>
+                        <h3 class="text-sm font-semibold text-gray-900 dark:text-white mb-2">Quick Tips</h3>
                         <ul class="text-sm text-gray-700 dark:text-gray-300 space-y-1">
-                            <li>• <strong>Label</strong> is what users will see in the interface</li>
-                            <li>• <strong>Name</strong> is a technical identifier (use lowercase and hyphens)</li>
+                            <li>• <strong>Label</strong> is a technical identifier (use lowercase and hyphens) </li>
+                            <li>• <strong>Name</strong> is what users will see in the interface - short title</li>
                             <li>• <strong>Description</strong> helps team members understand the project's purpose</li>
                         </ul>
                     </div>
@@ -141,4 +132,4 @@ const submit = async () => {
             </CardBox>
         </SectionMain>
     </LayoutAuthenticated>
-</template>
\ No newline at end of file
+</template>
diff --git a/resources/js/Pages/Admin/Project/Index.vue b/resources/js/Pages/Admin/Project/Index.vue
index 13dcbf9..93e47c8 100644
--- a/resources/js/Pages/Admin/Project/Index.vue
+++ b/resources/js/Pages/Admin/Project/Index.vue
@@ -143,7 +143,7 @@ const getProjectColor = (index) => {
                                         :class="getProjectColor(index)"
                                         :title="project.label"
                                     >
-                                        {{ truncate(project.label, 25) }}
+                                        {{ truncate(project.label, 30) }}
                                     </span>
                                 <!-- </Link> -->
                             </td>
@@ -152,7 +152,7 @@ const getProjectColor = (index) => {
                                     class="text-gray-700 dark:text-gray-300 font-mono text-sm"
                                     :title="project.name"
                                 >
-                                    {{ truncate(project.name, 30) }}
+                                    {{ truncate(project.name, 40) }}
                                 </span>
                             </td>
                             <td v-if="can.edit || can.delete" class="before:hidden lg:w-1 whitespace-nowrap">
diff --git a/resources/js/Pages/Admin/Role/Index.vue b/resources/js/Pages/Admin/Role/Index.vue
index 77aa1ff..e9c1f0a 100644
--- a/resources/js/Pages/Admin/Role/Index.vue
+++ b/resources/js/Pages/Admin/Role/Index.vue
@@ -1,7 +1,7 @@
-<script setup>
+<script lang="ts" setup>
 import { Head, Link, useForm, usePage } from '@inertiajs/vue3';
 import { mdiAccountKey, mdiPlus, mdiSquareEditOutline, mdiTrashCan, mdiAlertBoxOutline } from '@mdi/js';
-import { computed, ref } from 'vue';
+import { computed, ref, ComputedRef } from 'vue';
 import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
 import SectionMain from '@/Components/SectionMain.vue';
 import SectionTitleLineWithButton from '@/Components/SectionTitleLineWithButton.vue';
@@ -9,18 +9,23 @@ import BaseButton from '@/Components/BaseButton.vue';
 import CardBox from '@/Components/CardBox.vue';
 import BaseButtons from '@/Components/BaseButtons.vue';
 import NotificationBar from '@/Components/NotificationBar.vue';
-import Pagination from '@/Components/Admin/Pagination.vue';
+import CardBoxModal from '@/Components/CardBoxModal.vue';
 import Sort from '@/Components/Admin/Sort.vue';
 import { stardust } from '@eidellev/adonis-stardust/client';
-import CardBoxModal from '@/Components/CardBoxModal.vue';
+
+interface Role {
+    id: number;
+    name: string;
+    description: string;
+}
 
 const isModalDangerActive = ref(false);
 const deleteId = ref();
 
 const props = defineProps({
     roles: {
-        type: Object,
-        default: () => ({}),
+        type: Array<Role>,
+        default: () => [],
     },
     filters: {
         type: Object,
@@ -32,88 +37,89 @@ const props = defineProps({
     },
 });
 
-const flash = computed(() => {
-    // let test = usePage();
-    // console.log(test);
-    return usePage().props.flash;
-});
+const flash: ComputedRef<any> = computed(() => usePage().props.flash);
 
-const form = useForm({
-    search: props.filters.search,
-});
+// const form = useForm({
+//     search: props.filters.search,
+// });
+
+const roleCount = computed(() => props.roles.length);
 
 const formDelete = useForm({});
-const destroy = (id, e) => {
-    // console.log(id);
+
+const destroy = (id: number) => {
     deleteId.value = id;
     isModalDangerActive.value = true;
 };
 
-const onConfirm = async (id) => {
-    // let id = 6;
+const onConfirm = async (id: number) => {
     await formDelete.delete(stardust.route('settings.role.destroy', [id]));
     deleteId.value = null;
 };
 
-const onCancel = (id) => {
-    // console.log('cancel');
+const onCancel = () => {
     deleteId.value = null;
 };
+
+const getRoleColor = (index: number) => {
+    const colors = [
+        'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300',
+        'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300',
+        'bg-pink-100 text-pink-800 dark:bg-pink-900 dark:text-pink-300',
+        'bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-300',
+        'bg-teal-100 text-teal-800 dark:bg-teal-900 dark:text-teal-300',
+        'bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-300',
+    ];
+    return colors[index % colors.length];
+};
+
+const truncate = (text: string, length = 50) => {
+    if (!text) return '-';
+    return text.length > length ? text.substring(0, length) + '...' : text;
+};
 </script>
 
 <template>
     <CardBoxModal
         v-model="isModalDangerActive"
         :delete-id="deleteId"
-        large-title="Please confirm"
+        large-title="Delete Role"
         button="danger"
         button-label="Delete"
         has-cancel
-        v-on:confirm="onConfirm"
-        v-on:cancel="onCancel"
+        @confirm="onConfirm"
+        @cancel="onCancel"
     >
-        <p>Lorem ipsum dolor sit amet <b>adipiscing elit</b></p>
-        <p>This is sample modal</p>
+        <p>Are you sure you want to delete this role?</p>
+        <p>This action cannot be undone.</p>
     </CardBoxModal>
 
     <LayoutAuthenticated>
         <Head title="Roles" />
         <SectionMain>
             <SectionTitleLineWithButton :icon="mdiAccountKey" title="Roles" main>
-                <BaseButton
-                    v-if="can.create"
-                    :route-name="stardust.route('settings.role.create')"
-                    :icon="mdiPlus"
-                    label="Add"
-                    color="info"
-                    rounded-full
-                    small
-                />
+                <div class="flex items-center gap-3">
+                    <span class="text-sm text-gray-500 dark:text-gray-400 font-medium">
+                        {{ roleCount }} {{ roleCount === 1 ? 'role' : 'roles' }}
+                    </span>
+                    <BaseButton
+                        v-if="can.create"
+                        :route-name="stardust.route('settings.role.create')"
+                        :icon="mdiPlus"
+                        label="New Role"
+                        color="info"
+                        rounded-full
+                        small
+                        class="shadow-md hover:shadow-lg transition-shadow"
+                    />
+                </div>
             </SectionTitleLineWithButton>
+
             <NotificationBar v-if="flash.message" color="success" :icon="mdiAlertBoxOutline">
                 {{ flash.message }}
             </NotificationBar>
+
             <CardBox class="mb-6" has-table>
-                <!-- <form @submit.prevent="form.get(stardust.route('role.index'))">
-					<div class="py-2 flex">
-						<div class="flex pl-4">
-							<input
-								type="search"
-								v-model="form.search"
-								class="rounded-md shadow-sm border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
-								placeholder="Search"
-							/>
-							<BaseButton
-								label="Search"
-								type="submit"
-								color="info"
-								class="ml-4 inline-flex items-center px-4 py-2"
-							/>
-						</div>
-					</div>
-				</form> -->
-            </CardBox>
-            <CardBox class="mb-6" has-form-data>
                 <table>
                     <thead>
                         <tr>
@@ -128,17 +134,42 @@ const onCancel = (id) => {
                     </thead>
 
                     <tbody>
-                        <tr v-for="role in roles" :key="role.id">
+                        <tr v-if="roles.length === 0">
+                            <td colspan="3" class="text-center py-12">
+                                <div class="flex flex-col items-center justify-center text-gray-500 dark:text-gray-400">
+                                    <p class="text-lg font-medium mb-2">No roles yet</p>
+                                    <p class="text-sm mb-4">Get started by creating your first role</p>
+                                    <BaseButton
+                                        v-if="can.create"
+                                        :route-name="stardust.route('settings.role.create')"
+                                        :icon="mdiPlus"
+                                        label="Create Role"
+                                        color="info"
+                                        small
+                                    />
+                                </div>
+                            </td>
+                        </tr>
+                        <tr
+                            v-for="(role, index) in roles"
+                            :key="role.id"
+                            class="hover:bg-gray-50 dark:hover:bg-slate-800 transition-colors"
+                        >
                             <td data-label="Name">
-                                <Link
-                                    :href="stardust.route('settings.role.show', [role.id])"
-                                    class="no-underline hover:underline text-cyan-600 dark:text-cyan-400"
-                                >
-                                    {{ role.name }}
+                                <Link :href="stardust.route('settings.role.show', [role.id])" class="no-underline hover:underline">
+                                    <span
+                                        class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium transition-all hover:shadow-md"
+                                        :class="getRoleColor(index)"
+                                        :title="role.name"
+                                    >
+                                        {{ role.name }}
+                                    </span>
                                 </Link>
                             </td>
                             <td data-label="Description">
-                                {{ role.description }}
+                                <span class="text-gray-700 dark:text-gray-300 text-sm" :title="role.description">
+                                    {{ truncate(role.description, 50) }}
+                                </span>
                             </td>
                             <td v-if="can.edit || can.delete" class="before:hidden lg:w-1 whitespace-nowrap">
                                 <BaseButtons type="justify-start lg:justify-end" no-wrap>
@@ -149,21 +180,12 @@ const onCancel = (id) => {
                                         :icon="mdiSquareEditOutline"
                                         small
                                     />
-                                    <!-- <BaseButton
-                                        v-if="can.delete"
-                                        color="danger"
-                                        :icon="mdiTrashCan"
-                                        small
-                                        @click="($event) => destroy(role.id, $event)"
-                                    /> -->                                   
+                                    <BaseButton v-if="can.delete" color="danger" :icon="mdiTrashCan" small @click="destroy(role.id)" />
                                 </BaseButtons>
                             </td>
                         </tr>
                     </tbody>
                 </table>
-                <!-- <div class="py-4">
-					<Pagination v-bind:data="roles.meta" />
-				</div> -->
             </CardBox>
         </SectionMain>
     </LayoutAuthenticated>
diff --git a/resources/js/Pages/Dashboard.vue b/resources/js/Pages/Dashboard.vue
index 17e1a58..57b5d44 100644
--- a/resources/js/Pages/Dashboard.vue
+++ b/resources/js/Pages/Dashboard.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Head, usePage } from '@inertiajs/vue3';
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import { MainService } from '@/Stores/main';
 import {
     mdiAccountMultiple,
@@ -10,6 +10,7 @@ import {
     mdiMonitorCellphone,
     mdiReload,
     mdiChartPie,
+    mdiTrendingUp,
 } from '@mdi/js';
 import LineChart from '@/Components/Charts/LineChart.vue';
 import SectionMain from '@/Components/SectionMain.vue';
@@ -18,47 +19,37 @@ import CardBox from '@/Components/CardBox.vue';
 import TableSampleClients from '@/Components/TableSampleClients.vue';
 import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
 import SectionTitleLineWithButton from '@/Components/SectionTitleLineWithButton.vue';
-// import SectionBannerStarOnGitHub from '@/Components/SectionBannerStarOnGitea.vue';
 import CardBoxDataset from '@/Components/CardBoxDataset.vue';
 import type { User } from '@/Dataset';
-const mainService = MainService()
 
-// const chartData = ref();
+const mainService = MainService();
+
+const isLoadingChart = ref(false);
+
 const fillChartData = async () => {
-    await mainService.fetchChartData();
-    // chartData.value = chartConfig.sampleChartData();
-    // chartData.value = mainService.graphData;
+    isLoadingChart.value = true;
+    try {
+        await mainService.fetchChartData();
+    } finally {
+        isLoadingChart.value = false;
+    }
 };
+
 const chartData = computed(() => mainService.graphData);
-// onMounted(async () => {
-//     await mainService.fetchChartData("2022");
-// });
-
-// mainService.fetch('clients');
-// mainService.fetch('history');
-
-// mainService.fetchApi('authors');
-// mainService.fetchApi('datasets');
-
-// const clientBarItems = computed(() => mainService.clients.slice(0, 4));
-// const transactionBarItems = computed(() => mainService.history);
+const authors = computed(() => mainService.authors);
+const datasets = computed(() => mainService.datasets);
+const datasetBarItems = computed(() => mainService.datasets.slice(0, 5));
+const submitters = computed(() => mainService.clients);
+const user = computed(() => usePage().props.authUser as User);
 
+// Initialize data
 mainService.fetchApi('clients');
 mainService.fetchApi('authors');
 mainService.fetchApi('datasets');
 mainService.fetchChartData();
 
-// const authorBarItems = computed(() => mainService.authors.slice(0, 5));
-const authors = computed(() => mainService.authors);
-const datasets = computed(() => mainService.datasets);
-const datasetBarItems = computed(() => mainService.datasets.slice(0, 5));
-const submitters = computed(() => mainService.clients);
-const user = computed(() => {
-    return usePage().props.authUser as User;
-});
-
 const userHasRoles = (roleNames: Array<string>): boolean => {
-    return user.value.roles.some(role => roleNames.includes(role.name));
+    return user.value.roles.some((role) => roleNames.includes(role.name));
 };
 </script>
 
@@ -67,18 +58,13 @@ const userHasRoles = (roleNames: Array<string>): boolean => {
         <Head title="Dashboard" />
 
         <SectionMain>
-            <SectionTitleLineWithButton v-bind:icon="mdiChartTimelineVariant" title="Overview" main>
-                <!-- <BaseButton
-                    href=""
-                    target="_blank"
-                    :icon="mdiGithub"
-                    label="Star on GeoSphere Forgejo"
-                    color="contrast"
-                    rounded-full
-                    small
-                /> -->
+            <SectionTitleLineWithButton :icon="mdiChartTimelineVariant" title="Dashboard Overview" main>
+                <div class="text-sm text-gray-500 dark:text-gray-400">
+                    Welcome back, <span class="font-semibold">{{ user.login }}</span>
+                </div>
             </SectionTitleLineWithButton>
 
+            <!-- Stats Grid -->
             <div class="grid grid-cols-1 gap-6 lg:grid-cols-3 mb-6">
                 <CardBoxWidget
                     trend="12%"
@@ -87,25 +73,28 @@ const userHasRoles = (roleNames: Array<string>): boolean => {
                     :icon="mdiAccountMultiple"
                     :number="authors.length"
                     label="Authors"
-                />              
-                <CardBoxWidget                    
+                    class="hover:shadow-lg transition-shadow duration-300"
+                />
+                <CardBoxWidget
                     trend-type="info"
                     color="text-blue-500"
                     :icon="mdiDatabaseOutline"
                     :number="datasets.length"
                     label="Publications"
-                />               
-                <CardBoxWidget                    
+                    class="hover:shadow-lg transition-shadow duration-300"
+                />
+                <CardBoxWidget
                     trend-type="up"
                     color="text-purple-500"
                     :icon="mdiChartTimelineVariant"
                     :number="submitters.length"
                     label="Submitters"
+                    class="hover:shadow-lg transition-shadow duration-300"
                 />
             </div>
 
-            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
-                <!-- <div class="flex flex-col justify-between">
+                 <!-- <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
+               <div class="flex flex-col justify-between">
                     <CardBoxClient
                         v-for="client in authorBarItems"
                         :key="client.id"
@@ -116,7 +105,7 @@ const userHasRoles = (roleNames: Array<string>): boolean => {
                         :count="client.dataset_count"
                         
                     />
-                </div> -->
+                </div>  <!-- 
                 <div class="flex flex-col justify-between">
                     <CardBoxDataset
                         v-for="(dataset, index) in datasetBarItems"
@@ -124,22 +113,63 @@ const userHasRoles = (roleNames: Array<string>): boolean => {
                        :dataset="dataset"
                     />
                 </div>
+            </div> 
+
+            <!-- Recent Datasets Section -->
+            <div v-if="datasetBarItems.length > 0" class="mb-6">
+                <SectionTitleLineWithButton :icon="mdiTrendingUp" title="Recent Publications">
+                    <span class="text-sm text-gray-500 dark:text-gray-400"> Latest {{ datasetBarItems.length }} publications </span>
+                </SectionTitleLineWithButton>
+
+                <div class="grid grid-cols-1 gap-4">
+                    <CardBoxDataset
+                        v-for="(dataset, index) in datasetBarItems"
+                        :key="index"
+                        :dataset="dataset"
+                        class="hover:shadow-md transition-all duration-300"
+                    />
+                </div>
             </div>
 
             <!-- <SectionBannerStarOnGitHub /> -->
 
-            <SectionTitleLineWithButton :icon="mdiChartPie" title="Trends overview: Publications per month" ></SectionTitleLineWithButton>
-            <CardBox title="Performance" :icon="mdiFinance" :header-icon="mdiReload" class="mb-6" @header-icon-click="fillChartData">
-                <div v-if="chartData">
+            <!-- Chart Section -->
+            <SectionTitleLineWithButton :icon="mdiChartPie" title="Trends Overview" class="mt-8">
+                <span class="text-sm text-gray-500 dark:text-gray-400"> Publications per month </span>
+            </SectionTitleLineWithButton>
+
+            <CardBox
+                title="Performance"
+                :icon="mdiFinance"
+                :header-icon="mdiReload"
+                class="mb-6 shadow-lg"
+                @header-icon-click="fillChartData"
+            >
+                <div v-if="isLoadingChart" class="flex items-center justify-center h-96">
+                    <div class="flex flex-col items-center gap-3">
+                        <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500"></div>
+                        <p class="text-sm text-gray-500 dark:text-gray-400">Loading chart data...</p>
+                    </div>
+                </div>
+                <div v-else-if="chartData" class="relative">
                     <line-chart :data="chartData" class="h-96" />
                 </div>
+                <div v-else class="flex items-center justify-center h-96 text-gray-500 dark:text-gray-400">
+                    <p>No chart data available</p>
+                </div>
             </CardBox>
 
-            <SectionTitleLineWithButton v-if="userHasRoles(['administrator'])" :icon="mdiAccountMultiple" title="Submitters" />
-            <!-- <NotificationBar color="info" :icon="mdiMonitorCellphone"> <b>Responsive table.</b> Collapses on mobile </NotificationBar> -->
-            <CardBox v-if="userHasRoles(['administrator'])" :icon="mdiMonitorCellphone" title="Responsive table" has-table>
-                <TableSampleClients />
-            </CardBox>
+            <!-- Admin Section -->
+            <template v-if="userHasRoles(['administrator'])">
+                <SectionTitleLineWithButton :icon="mdiAccountMultiple" title="Submitters Management" class="mt-8">
+                    <span class="text-sm text-gray-500 dark:text-gray-400"> Administrator view </span>
+                </SectionTitleLineWithButton>
+
+                <CardBox :icon="mdiMonitorCellphone" title="All Submitters" has-table class="shadow-lg">
+                    <TableSampleClients />
+                </CardBox>
+            </template>
+
         </SectionMain>
     </LayoutAuthenticated>
 </template>
diff --git a/resources/js/Pages/Submitter/Dataset/Edit.vue b/resources/js/Pages/Submitter/Dataset/Edit.vue
index 11184ac..027bbc2 100644
--- a/resources/js/Pages/Submitter/Dataset/Edit.vue
+++ b/resources/js/Pages/Submitter/Dataset/Edit.vue
@@ -1,25 +1,55 @@
+<!-- 1. Add progress indicator at the top -->
 <template>
     <LayoutAuthenticated>
         <Head title="Edit dataset" />
+
+        <!-- Progress Bar for Unsaved Changes -->
+        <!-- Progress Bar for Unsaved Changes -->
+        <div v-if="hasUnsavedChanges" class="fixed top-0 left-0 right-0 z-50 bg-amber-500 text-white px-4 py-2.5 text-sm shadow-lg h-14">
+            <div class="container mx-auto flex items-center justify-between h-full">
+                <div class="flex items-center gap-2">
+                    <svg class="animate-pulse w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+                        <path
+                            fill-rule="evenodd"
+                            d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
+                            clip-rule="evenodd"
+                        />
+                    </svg>
+                    <span class="font-medium">You have unsaved changes</span>
+                </div>
+                <BaseButton @click="submitAlternative" label="Save Now" color="white" small :disabled="form.processing" />
+            </div>
+        </div>
+
         <SectionMain>
-            <SectionTitleLineWithButton :icon="mdiImageText" title="Update dataset" main>
-                <BaseButton
-                    :route-name="stardust.route('dataset.list')"
-                    :icon="mdiArrowLeftBoldOutline"
-                    label="Back"
-                    color="white"
-                    rounded-full
-                    small
-                />
+            <!-- Enhanced Title Section -->
+            <SectionTitleLineWithButton :icon="mdiImageText" title="Update Dataset" main>
+                <div class="flex items-center gap-3">
+                    <!-- Dataset Status Badge -->
+                    <!-- <span
+                        class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300"
+                    >
+                        Draft
+                    </span> -->
+                    <BaseButton
+                        :route-name="stardust.route('dataset.list')"
+                        :icon="mdiArrowLeftBoldOutline"
+                        label="Back"
+                        color="white"
+                        rounded-full
+                        small
+                    />
+                </div>
             </SectionTitleLineWithButton>
 
+            <!-- Success/Error Notifications -->
             <NotificationBar v-if="flash.message" color="success" :icon="mdiAlertBoxOutline">
                 {{ flash.message }}
             </NotificationBar>
             <FormValidationErrors v-bind:errors="errors" />
 
-            <!-- @auto-save="submitAlternative" -->
-            <CardBox :form="true">
+            <!-- Main Form with Sections -->
+            <CardBox :form="true" class="shadow-lg">
                 <UnsavedChangesWarning
                     :show="hasUnsavedChanges"
                     :changes-summary="getChangesSummary()"
@@ -29,58 +59,39 @@
                     :auto-save-delay="30"
                     @save="submitAlternative"
                 />
-                <div class="mb-4">
-                    <div class="flex flex-col md:flex-row">
-                        <!-- (1) language field -->
+                <!-- Collapsible Sections for Better Organization -->
+
+                <!-- Section 1: Basic Information -->
+                <div class="mb-8">
+                    <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
+                        <span class="w-8 h-8 rounded-full bg-blue-500 text-white flex items-center justify-center text-sm">1</span>
+                        Basic Information
+                    </h2>
+
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 ml-10">
+                        <!-- (1) Language -->
                         <FormField
                             label="Language *"
                             help="required: select dataset main language"
                             :class="{ 'text-red-400': form.errors.language }"
-                            class="w-full flex-1"
                         >
                             <FormControl
                                 required
                                 v-model="form.language"
-                                :type="'select'"
+                                type="select"
                                 placeholder="[Enter Language]"
                                 :errors="form.errors.language"
                                 :options="{ de: 'de', en: 'en' }"
                             >
-                                <div class="text-red-400 text-sm" v-if="form.errors.language">
+                             <div class="text-red-400 text-sm" v-if="form.errors.language">
                                     {{ form.errors.language.join(', ') }}
                                 </div>
                             </FormControl>
                         </FormField>
-                    </div>
 
-                    <!-- (2) licenses -->
-                    <FormField label="Licenses" wrap-body :class="{ 'text-red-400': form.errors.licenses }" class="mt-8 w-full mx-2 flex-1">
-                        <FormCheckRadioGroup
-                            type="radio"
-                            v-model="form.licenses"
-                            name="licenses"
-                            is-column
-                            :options="licenses"
-                            :key="`licenses-${Date.now()}-${JSON.stringify(form.licenses)}`"
-                        />
-                    </FormField>
-                    <!-- Add this temporarily near your licenses FormField for debugging -->
-                    <!-- <div v-if="true" class="border p-2 mb-2 text-xs bg-gray-50">
-                        <strong>Debug - Licenses:</strong><br />
-                        Form licenses: {{ JSON.stringify(form.licenses) }}<br />
-                        Original licenses: {{ JSON.stringify(originalDataset.licenses) }}<br />
-                        License options: {{ JSON.stringify(Object.keys(licenses)) }}
-                    </div> -->
-
-                    <div class="flex flex-col md:flex-row">
                         <!-- (3) dataset_type -->
-                        <FormField
-                            label="Dataset Type *"
-                            help="required: dataset type"
-                            :class="{ 'text-red-400': form.errors.type }"
-                            class="w-full mx-2 flex-1"
-                        >
-                            <FormControl
+                        <FormField label="Dataset Type *" help="required: dataset type" :class="{ 'text-red-400': form.errors.type }">
+                             <FormControl
                                 required
                                 v-model="form.type"
                                 :type="'select'"
@@ -115,17 +126,40 @@
                             </FormControl>
                         </FormField>
                     </div>
+                </div>
 
-                    <BaseDivider />
+                <BaseDivider />
 
+                <!-- Section 2: Licenses -->
+                <div class="mb-8">
+                    <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
+                        <span class="w-8 h-8 rounded-full bg-green-500 text-white flex items-center justify-center text-sm">2</span>
+                        Licenses
+                    </h2>
+
+                    <div class="ml-10">
+                        <!-- (2) licenses -->
+                        <FormField label="Select License" wrap-body :class="{ 'text-red-400': form.errors.licenses }">
+                            <FormCheckRadioGroup type="radio" v-model="form.licenses" name="licenses" is-column :options="licenses" />
+                        </FormField>
+                    </div>
+                </div>
+
+                <BaseDivider />
+
+                <!-- Section 3: Titles -->
+                <div class="mb-8">
+                    <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
+                        <span class="w-8 h-8 rounded-full bg-purple-500 text-white flex items-center justify-center text-sm">3</span>
+                        Titles
+                    </h2>
                     <!-- (5) titles -->
                     <CardBox
-                        class="mb-6 shadow"
-                        :has-form-data="false"
-                        title="Titles"
+                        class="ml-10 shadow-md"
+                        title="Main & Additional Titles"
                         :icon="mdiFinance"
                         :header-icon="mdiPlusCircle"
-                        v-on:header-icon-click="addTitle()"
+                        @header-icon-click="addTitle()"
                     >
                         <div class="flex flex-col md:flex-row">
                             <FormField
@@ -238,15 +272,23 @@
                             </tbody>
                         </table>
                     </CardBox>
+                </div>
 
+                <BaseDivider />
+
+                <!-- Section 4: Descriptions -->
+                <div class="mb-8">
+                    <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
+                        <span class="w-8 h-8 rounded-full bg-orange-500 text-white flex items-center justify-center text-sm">4</span>
+                        Descriptions
+                    </h2>
                     <!-- (6) descriptions -->
                     <CardBox
-                        class="mb-6 shadow"
-                        :has-form-data="false"
-                        title="Descriptions"
+                        class="ml-10 shadow-md"
+                        title="Abstract & Additional Descriptions"
                         :icon="mdiFinance"
                         :header-icon="mdiPlusCircle"
-                        v-on:header-icon-click="addDescription()"
+                        @header-icon-click="addDescription()"
                     >
                         <div class="flex flex-col md:flex-row">
                             <FormField
@@ -359,35 +401,52 @@
                             </tbody>
                         </table>
                     </CardBox>
+                </div>
 
-                    <!-- (7) authors -->
-                    <CardBox
-                        class="mb-6 shadow"
-                        has-table
-                        title="Creators"
-                        :icon="mdiBookOpenPageVariant"
-                        :header-icon="mdiPlusCircle"
-                        v-on:header-icon-click="addNewAuthor()"
-                    >
-                        <div class="mb-2 text-gray-600 text-sm flex items-center gap-2">
-                            <span>Add creators by searching existing persons or manually adding new ones.</span>
-                            <BaseIcon
-                                :path="mdiAlertBoxOutline"
-                                class="text-blue-400"
-                                title="You can add existing persons via search, or create new ones manually."
-                            />
-                        </div>
-                        <div class="flex flex-col md:flex-row gap-4 mb-4">
-                            <div class="flex-1">
-                                <!-- <label class="block text-xs font-semibold mb-1">Find existing person</label> -->
-                                <SearchAutocomplete
-                                    source="/api/persons"
-                                    :response-property="'first_name'"
-                                    placeholder="Search for existing persons..."
-                                    v-on:person="onAddAuthor"
+                <BaseDivider />
+
+                <!-- Section 5: People (Authors & Contributors) -->
+                <div class="mb-8">
+                    <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
+                        <span class="w-8 h-8 rounded-full bg-pink-500 text-white flex items-center justify-center text-sm">5</span>
+                        Creators & Contributors
+                    </h2>
+
+                    <div class="ml-10 space-y-6">
+                        <!-- (7) authors -->
+                        <CardBox
+                            class="shadow-md"
+                            has-table
+                            title="Creators"
+                            :icon="mdiBookOpenPageVariant"
+                            :header-icon="mdiPlusCircle"
+                            @header-icon-click="addNewAuthor()"
+                        >
+                            <div
+                                class="mb-4 p-3 bg-blue-50 dark:bg-slate-800 rounded-lg text-sm text-blue-800 dark:text-blue-300 flex items-start gap-2"
+                            >
+                                <BaseIcon :path="mdiAlertBoxOutline" class="flex-shrink-0 mt-0.5" />
+                                <span>Search for existing persons or add new ones manually. Creators are displayed in citation order.</span>
+                            </div>
+                            <div class="mb-2 text-gray-600 text-sm flex items-center gap-2">
+                                <span>Add creators by searching existing persons or manually adding new ones.</span>
+                                <BaseIcon
+                                    :path="mdiAlertBoxOutline"
+                                    class="text-blue-400"
+                                    title="You can add existing persons via search, or create new ones manually."
                                 />
                             </div>
-                            <!-- <div class="flex-1 flex items-end">
+                            <div class="flex flex-col md:flex-row gap-4 mb-4">
+                                <div class="flex-1">
+                                    <!-- <label class="block text-xs font-semibold mb-1">Find existing person</label> -->
+                                    <SearchAutocomplete
+                                        source="/api/persons"
+                                        :response-property="'first_name'"
+                                        placeholder="Search for existing persons..."
+                                        v-on:person="onAddAuthor"
+                                    />
+                                </div>
+                                <!-- <div class="flex-1 flex items-end">
                                 <BaseButton
                                     :icon="mdiPlusCircle"
                                     @click.prevent="addNewAuthor"
@@ -397,104 +456,299 @@
                                     title="Add new creator manually"
                                 />
                             </div> -->
-                        </div>
-                        <TablePersons :persons="form.authors" v-if="form.authors.length > 0" :errors="form.errors" :relation="'authors'" />
-                        <div class="text-red-400 text-sm" v-if="form.errors.authors && Array.isArray(form.errors.authors)">
-                            {{ form.errors.authors.join(', ') }}
-                        </div>
-                    </CardBox>
-
-                    <!-- (8) contributors -->
-                    <CardBox
-                        class="mb-6 shadow"
-                        has-table
-                        title="Contributors"
-                        :icon="mdiBookOpenPageVariant"
-                        :header-icon="mdiPlusCircle"
-                        v-on:header-icon-click="addNewContributor()"
-                    >
-                    <div class="mb-2 text-gray-600 text-sm flex items-center gap-2">
-                            <span>Add contributors by searching existing persons or manually adding new ones.</span>
-                            <BaseIcon
-                                :path="mdiAlertBoxOutline"
-                                class="text-blue-400"
-                                title="You can add existing persons via search, or create new ones manually."
+                            </div>
+                            <TablePersons
+                                :persons="form.authors"
+                                v-if="form.authors.length > 0"
+                                :errors="form.errors"
+                                :relation="'authors'"
                             />
-                        </div>
-                        <SearchAutocomplete
-                            source="/api/persons"
-                            :response-property="'first_name'"
-                            placeholder="search in person table...."
-                            v-on:person="onAddContributor"
-                        >
-                        </SearchAutocomplete>
+                            <div class="text-red-400 text-sm" v-if="form.errors.authors && Array.isArray(form.errors.authors)">
+                                {{ form.errors.authors.join(', ') }}
+                            </div>
+                        </CardBox>
 
-                        <TablePersons
-                            :persons="form.contributors"
-                            v-if="form.contributors.length > 0"
-                            :contributortypes="contributorTypes"
-                            :errors="form.errors"
-                            :relation="'contributors'"
-                        />
-                        <div class="text-red-400 text-sm" v-if="form.errors.contributors && Array.isArray(form.errors.contributors)">
-                            {{ form.errors.contributors.join(', ') }}
-                        </div>
-                    </CardBox>
+                        <!-- (8) contributors -->
+                        <CardBox
+                            class="shadow-md"
+                            has-table
+                            title="Contributors"
+                            :icon="mdiBookOpenPageVariant"
+                            :header-icon="mdiPlusCircle"
+                            @header-icon-click="addNewContributor()"
+                        >
+                            <div class="mb-2 text-gray-600 text-sm flex items-center gap-2">
+                                <span>Add contributors by searching existing persons or manually adding new ones.</span>
+                                <BaseIcon
+                                    :path="mdiAlertBoxOutline"
+                                    class="text-blue-400"
+                                    title="You can add existing persons via search, or create new ones manually."
+                                />
+                            </div>
+                            <SearchAutocomplete
+                                source="/api/persons"
+                                :response-property="'first_name'"
+                                placeholder="search in person table...."
+                                v-on:person="onAddContributor"
+                            >
+                            </SearchAutocomplete>
 
-                    <div class="flex flex-col md:flex-row">
-                        <!-- (9) project_id -->
-                        <FormField
-                            label="Project.."
-                            help="project is optional"
-                            :class="{ 'text-red-400': form.errors.project_id }"
-                            class="w-full mx-2 flex-1"
-                        >
-                            <FormControl
-                                required
-                                v-model="form.project_id"
-                                :type="'select'"
-                                placeholder="[Select Project]"
-                                :errors="form.errors.project_id"
-                                :options="projects"
-                            >
-                                <div class="text-red-400 text-sm" v-if="form.errors.project_id">
-                                    {{ form.errors.project_id.join(', ') }}
-                                </div>
-                            </FormControl>
-                        </FormField>
-                        <!-- (10) embargo_date -->
-                        <FormField
-                            label="Embargo Date.."
-                            help="embargo date is optional"
-                            :class="{ 'text-red-400': form.errors.embargo_date }"
-                            class="w-full mx-2 flex-1"
-                        >
-                            <FormControl
-                                v-model="form.embargo_date"
-                                :type="'date'"
-                                placeholder="date('y-m-d')"
-                                :errors="form.errors.embargo_date"
-                            >
-                                <div class="text-red-400 text-sm" v-if="form.errors.embargo_date">
-                                    {{ form.errors.embargo_date.join(', ') }}
-                                </div>
-                            </FormControl>
-                        </FormField>
+                            <TablePersons
+                                :persons="form.contributors"
+                                v-if="form.contributors.length > 0"
+                                :contributortypes="contributorTypes"
+                                :errors="form.errors"
+                                :relation="'contributors'"
+                            />
+                            <div class="text-red-400 text-sm" v-if="form.errors.contributors && Array.isArray(form.errors.contributors)">
+                                {{ form.errors.contributors.join(', ') }}
+                            </div>
+                        </CardBox>
                     </div>
+                </div>
 
-                    <BaseDivider />
+                <BaseDivider />
 
-                    <MapComponent
-                        v-if="form.coverage"
-                        :mapOptions="mapOptions"
-                        :baseMaps="baseMaps"
-                        :fitBounds="fitBounds"
-                        :coverage="form.coverage"
-                        :mapId="mapId"
-                        v-bind-event:onMapInitializedEvent="onMapInitialized"
-                    >
-                    </MapComponent>
-                    <div class="flex flex-col md:flex-row">
+                <!-- Section 6: Additional Metadata -->
+                <div class="mb-8">
+                    <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
+                        <span class="w-8 h-8 rounded-full bg-indigo-500 text-white flex items-center justify-center text-sm">6</span>
+                        Additional Metadata
+                    </h2>
+
+                    <div class="ml-10 space-y-6">
+                        <!-- Project & Embargo -->
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                            <!-- (9) project_id -->
+                            <FormField
+                                label="Project.."
+                                help="project is optional"
+                                :class="{ 'text-red-400': form.errors.project_id }"
+                                class="w-full mx-2 flex-1"
+                            >
+                                <FormControl
+                                    required
+                                    v-model="form.project_id"
+                                    :type="'select'"
+                                    placeholder="[Select Project]"
+                                    :errors="form.errors.project_id"
+                                    :options="projects"
+                                >
+                                    <div class="text-red-400 text-sm" v-if="form.errors.project_id">
+                                        {{ form.errors.project_id.join(', ') }}
+                                    </div>
+                                </FormControl>
+                            </FormField>
+
+                            <!-- (10) embargo_date -->
+                            <FormField
+                                label="Embargo Date.."
+                                help="embargo date is optional"
+                                :class="{ 'text-red-400': form.errors.embargo_date }"
+                                class="w-full mx-2 flex-1"
+                            >
+                                <FormControl
+                                    v-model="form.embargo_date"
+                                    :type="'date'"
+                                    placeholder="date('y-m-d')"
+                                    :errors="form.errors.embargo_date"
+                                >
+                                    <div class="text-red-400 text-sm" v-if="form.errors.embargo_date">
+                                        {{ form.errors.embargo_date.join(', ') }}
+                                    </div>
+                                </FormControl>
+                            </FormField>
+                        </div>
+
+                        <!-- Keywords -->
+                        <CardBox
+                            class="shadow-md"
+                            has-table
+                            title="Keywords"
+                            :icon="mdiEarthPlus"
+                            :header-icon="mdiPlusCircle"
+                            @header-icon-click="addKeyword"
+                        >
+                            <TableKeywords
+                                :keywords="form.subjects"
+                                :errors="form.errors"
+                                :subjectTypes="subjectTypes"
+                                v-model:subjects-to-delete="form.subjectsToDelete"
+                                v-if="form.subjects.length > 0"
+                            />
+                        </CardBox>
+
+                        <!-- References -->
+                        <CardBox
+                            class="shadow-md"
+                            has-table
+                            title="Dataset References"
+                            :icon="mdiEarthPlus"
+                            :header-icon="mdiPlusCircle"
+                            @header-icon-click="addReference"
+                        >
+                            <!-- Message when no references exist -->
+                            <div v-if="form.references.length === 0" class="text-center py-4">
+                                <p class="text-gray-600">No references added yet.</p>
+                                <p class="text-gray-400">Click the plus icon above to add a new reference.</p>
+                            </div>
+                            <!-- Reference form -->
+                            <table class="table-fixed border-green-900" v-if="form.references.length">
+                                <thead>
+                                    <tr>
+                                        <th class="w-4/12">Value</th>
+                                        <th class="w-2/12">Type</th>
+                                        <th class="w-3/12">Relation</th>
+                                        <th class="w-2/12">Label</th>
+                                        <th class="w-1/12"></th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    <tr v-for="(item, index) in form.references">
+                                        <td data-label="Reference Value">
+                                            <!-- <input name="Reference Value" class="form-control"
+                                                placeholder="[VALUE]" v-model="item.value" /> -->
+                                            <FormControl
+                                                required
+                                                v-model="item.value"
+                                                :type="'text'"
+                                                placeholder="[VALUE]"
+                                                :errors="form.errors.embargo_date"
+                                            >
+                                                <div
+                                                    class="text-red-400 text-sm"
+                                                    v-if="
+                                                        form.errors[`references.${index}.value`] &&
+                                                        Array.isArray(form.errors[`references.${index}.value`])
+                                                    "
+                                                >
+                                                    {{ form.errors[`references.${index}.value`].join(', ') }}
+                                                </div>
+                                            </FormControl>
+                                        </td>
+                                        <td>
+                                            <FormControl
+                                                required
+                                                v-model="form.references[index].type"
+                                                type="select"
+                                                :options="referenceIdentifierTypes"
+                                                placeholder="[type]"
+                                            >
+                                                <div
+                                                    class="text-red-400 text-sm"
+                                                    v-if="Array.isArray(form.errors[`references.${index}.type`])"
+                                                >
+                                                    {{ form.errors[`references.${index}.type`].join(', ') }}
+                                                </div>
+                                            </FormControl>
+                                        </td>
+
+                                        <td>
+                                            <FormControl
+                                                required
+                                                v-model="form.references[index].relation"
+                                                type="select"
+                                                :options="relationTypes"
+                                                placeholder="[relation type]"
+                                            >
+                                                <div
+                                                    class="text-red-400 text-sm"
+                                                    v-if="Array.isArray(form.errors[`references.${index}.relation`])"
+                                                >
+                                                    {{ form.errors[`references.${index}.relation`].join(', ') }}
+                                                </div>
+                                            </FormControl>
+                                        </td>
+                                        <td data-label="Reference Label">
+                                            <!-- <input name="Reference Label" class="form-control" v-model="item.label" /> -->
+                                            <FormControl
+                                                required
+                                                v-model="form.references[index].label"
+                                                type="text"
+                                                placeholder="[reference label]"
+                                            >
+                                                <div class="text-red-400 text-sm" v-if="form.errors[`references.${index}.label`]">
+                                                    {{ form.errors[`references.${index}.label`].join(', ') }}
+                                                </div>
+                                            </FormControl>
+                                        </td>
+                                        <td class="before:hidden lg:w-1 whitespace-nowrap">
+                                            <!-- <BaseButton color="info" :icon="mdiEye" small @click="isModalActive = true" /> -->
+                                            <BaseButton color="danger" :icon="mdiTrashCan" small @click.prevent="removeReference(index)" />
+                                        </td>
+                                    </tr>
+                                </tbody>
+                            </table>
+
+                            <!-- References to delete section -->
+                            <div v-if="form.referencesToDelete && form.referencesToDelete.length > 0" class="mt-8">
+                                <h1 class="pt-8 pb-3 font-semibold sm:text-lg text-gray-900">References To Delete</h1>
+                                <ul class="flex flex-1 flex-wrap -m-1">
+                                    <li
+                                        v-for="(element, index) in form.referencesToDelete"
+                                        :key="index"
+                                        class="block p-1 w-1/2 sm:w-1/3 md:w-1/4 lg:w-1/6 xl:w-1/8 h-40"
+                                    >
+                                        <article
+                                            tabindex="0"
+                                            class="bg-red-100 group w-full h-full rounded-md cursor-pointer relative shadow-sm overflow-hidden"
+                                        >
+                                            <section
+                                                class="flex flex-col rounded-md text-xs break-words w-full h-full z-20 absolute top-0 py-2 px-3"
+                                            >
+                                                <h1
+                                                    class="flex-1 text-gray-700 group-hover:text-blue-800 font-medium text-sm mb-1 truncate overflow-hidden whitespace-nowrap"
+                                                >
+                                                    {{ element.value }}
+                                                </h1>
+                                                <div class="flex flex-col mt-auto">
+                                                    <p class="p-1 size text-xs text-gray-700">
+                                                        <span class="font-semibold">Type:</span> {{ element.type }}
+                                                    </p>
+                                                    <p class="p-1 size text-xs text-gray-700">
+                                                        <span class="font-semibold">Relation:</span> {{ element.relation }}
+                                                    </p>
+                                                    <div class="flex justify-end mt-1">
+                                                        <button
+                                                            class="restore ml-auto focus:outline-none hover:bg-gray-300 p-1 rounded-md text-gray-800"
+                                                            @click.prevent="restoreReference(index)"
+                                                        >
+                                                            <svg viewBox="0 0 24 24" class="w-5 h-5">
+                                                                <path fill="currentColor" :d="mdiRestore"></path>
+                                                            </svg>
+                                                        </button>
+                                                    </div>
+                                                </div>
+                                            </section>
+                                        </article>
+                                    </li>
+                                </ul>
+                            </div>
+                        </CardBox>
+                    </div>
+                </div>
+
+                <BaseDivider />
+
+                <!-- Section 7: Geographic Coverage -->
+                <div class="mb-8">
+                    <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
+                        <span class="w-8 h-8 rounded-full bg-teal-500 text-white flex items-center justify-center text-sm">7</span>
+                        Geographic Coverage
+                    </h2>
+
+                    <div class="ml-10">
+                        <MapComponent
+                            v-if="form.coverage"
+                            :mapOptions="mapOptions"
+                            :baseMaps="baseMaps"
+                            :fitBounds="fitBounds"
+                            :coverage="form.coverage"
+                            :mapId="mapId"
+                            class="mb-4 rounded-lg overflow-hidden shadow-md"
+                        />
+                    </div>
+                    <div class="flex flex-col md:flex-row ml-10">
                         <!-- x min and max -->
                         <FormField
                             label="Coverage X Min"
@@ -554,223 +808,99 @@
                             </FormControl>
                         </FormField>
                     </div>
+                </div>
 
-                    <CardBox
-                        class="mb-6 shadow"
-                        has-table
-                        title="Dataset References"
-                        :icon="mdiEarthPlus"
-                        :header-icon="mdiPlusCircle"
-                        v-on:header-icon-click="addReference"
-                    >
-                        <!-- Message when no references exist -->
-                        <div v-if="form.references.length === 0" class="text-center py-4">
-                            <p class="text-gray-600">No references added yet.</p>
-                            <p class="text-gray-400">Click the plus icon above to add a new reference.</p>
-                        </div>
-                        <!-- Reference form -->
-                        <table class="table-fixed border-green-900" v-if="form.references.length">
-                            <thead>
-                                <tr>
-                                    <th class="w-4/12">Value</th>
-                                    <th class="w-2/12">Type</th>
-                                    <th class="w-3/12">Relation</th>
-                                    <th class="w-2/12">Label</th>
-                                    <th class="w-1/12"></th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <tr v-for="(item, index) in form.references">
-                                    <td data-label="Reference Value">
-                                        <!-- <input name="Reference Value" class="form-control"
-                                                placeholder="[VALUE]" v-model="item.value" /> -->
-                                        <FormControl
-                                            required
-                                            v-model="item.value"
-                                            :type="'text'"
-                                            placeholder="[VALUE]"
-                                            :errors="form.errors.embargo_date"
-                                        >
-                                            <div
-                                                class="text-red-400 text-sm"
-                                                v-if="
-                                                    form.errors[`references.${index}.value`] &&
-                                                    Array.isArray(form.errors[`references.${index}.value`])
-                                                "
-                                            >
-                                                {{ form.errors[`references.${index}.value`].join(', ') }}
-                                            </div>
-                                        </FormControl>
-                                    </td>
-                                    <td>
-                                        <FormControl
-                                            required
-                                            v-model="form.references[index].type"
-                                            type="select"
-                                            :options="referenceIdentifierTypes"
-                                            placeholder="[type]"
-                                        >
-                                            <div class="text-red-400 text-sm" v-if="Array.isArray(form.errors[`references.${index}.type`])">
-                                                {{ form.errors[`references.${index}.type`].join(', ') }}
-                                            </div>
-                                        </FormControl>
-                                    </td>
+                <BaseDivider />
 
-                                    <td>
-                                        <FormControl
-                                            required
-                                            v-model="form.references[index].relation"
-                                            type="select"
-                                            :options="relationTypes"
-                                            placeholder="[relation type]"
-                                        >
-                                            <div
-                                                class="text-red-400 text-sm"
-                                                v-if="Array.isArray(form.errors[`references.${index}.relation`])"
-                                            >
-                                                {{ form.errors[`references.${index}.relation`].join(', ') }}
-                                            </div>
-                                        </FormControl>
-                                    </td>
-                                    <td data-label="Reference Label">
-                                        <!-- <input name="Reference Label" class="form-control" v-model="item.label" /> -->
-                                        <FormControl
-                                            required
-                                            v-model="form.references[index].label"
-                                            type="text"
-                                            placeholder="[reference label]"
-                                        >
-                                            <div class="text-red-400 text-sm" v-if="form.errors[`references.${index}.label`]">
-                                                {{ form.errors[`references.${index}.label`].join(', ') }}
-                                            </div>
-                                        </FormControl>
-                                    </td>
-                                    <td class="before:hidden lg:w-1 whitespace-nowrap">
-                                        <!-- <BaseButton color="info" :icon="mdiEye" small @click="isModalActive = true" /> -->
-                                        <BaseButton color="danger" :icon="mdiTrashCan" small @click.prevent="removeReference(index)" />
-                                    </td>
-                                </tr>
-                            </tbody>
-                        </table>
+                <!-- Section 8: Files -->
+                <div class="mb-8">
+                    <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
+                        <span class="w-8 h-8 rounded-full bg-cyan-500 text-white flex items-center justify-center text-sm">8</span>
+                        Files
+                    </h2>
 
-                        <!-- References to delete section -->
-                        <div v-if="form.referencesToDelete && form.referencesToDelete.length > 0" class="mt-8">
-                            <h1 class="pt-8 pb-3 font-semibold sm:text-lg text-gray-900">References To Delete</h1>
-                            <ul class="flex flex-1 flex-wrap -m-1">
-                                <li
-                                    v-for="(element, index) in form.referencesToDelete"
-                                    :key="index"
-                                    class="block p-1 w-1/2 sm:w-1/3 md:w-1/4 lg:w-1/6 xl:w-1/8 h-40"
-                                >
-                                    <article
-                                        tabindex="0"
-                                        class="bg-red-100 group w-full h-full rounded-md cursor-pointer relative shadow-sm overflow-hidden"
-                                    >
-                                        <section
-                                            class="flex flex-col rounded-md text-xs break-words w-full h-full z-20 absolute top-0 py-2 px-3"
-                                        >
-                                            <h1
-                                                class="flex-1 text-gray-700 group-hover:text-blue-800 font-medium text-sm mb-1 truncate overflow-hidden whitespace-nowrap"
-                                            >
-                                                {{ element.value }}
-                                            </h1>
-                                            <div class="flex flex-col mt-auto">
-                                                <p class="p-1 size text-xs text-gray-700">
-                                                    <span class="font-semibold">Type:</span> {{ element.type }}
-                                                </p>
-                                                <p class="p-1 size text-xs text-gray-700">
-                                                    <span class="font-semibold">Relation:</span> {{ element.relation }}
-                                                </p>
-                                                <div class="flex justify-end mt-1">
-                                                    <button
-                                                        class="restore ml-auto focus:outline-none hover:bg-gray-300 p-1 rounded-md text-gray-800"
-                                                        @click.prevent="restoreReference(index)"
-                                                    >
-                                                        <svg viewBox="0 0 24 24" class="w-5 h-5">
-                                                            <path fill="currentColor" :d="mdiRestore"></path>
-                                                        </svg>
-                                                    </button>
-                                                </div>
-                                            </div>
-                                        </section>
-                                    </article>
-                                </li>
-                            </ul>
-                        </div>
-                    </CardBox>
-
-                    <BaseDivider />
-
-                    <CardBox
-                        class="mb-6 shadow"
-                        has-table
-                        title="Dataset Keywords"
-                        :icon="mdiEarthPlus"
-                        :header-icon="mdiPlusCircle"
-                        v-on:header-icon-click="addKeyword"
-                    >
-                        <TableKeywords
-                            :keywords="form.subjects"
-                            :errors="form.errors"
-                            :subjectTypes="subjectTypes"
-                            v-model:subjects-to-delete="form.subjectsToDelete"
-                            v-if="form.subjects.length > 0"
+                    <div class="ml-10">
+                        <FileUploadComponent
+                            v-model:files="form.files"
+                            v-model:filesToDelete="form.filesToDelete"
+                            :showClearButton="false"
+                            class="shadow-md"
                         />
-                    </CardBox>
-                </div>
-
-                <div class="mb-4">
-                    <!-- <label for="project" class="block text-gray-700 font-bold mb-2">Project:</label>
-                    <select
-                        id="project"
-                        class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
-                        v-model="dataset.project_id"
-                    >
-                        <option v-for="project in projects" :key="project.id" :value="project.id" class="block px-4 py-2 text-gray-700">
-                            {{ project.label }}
-                        </option>
-                    </select> -->
-                </div>
-
-                <FileUploadComponent v-model:files="form.files" v-model:filesToDelete="form.filesToDelete" :showClearButton="false">
-                </FileUploadComponent>
-
-                <div class="text-red-400 text-sm" v-if="form.errors['file'] && Array.isArray(form.errors['files'])">
-                    {{ form.errors['files'].join(', ') }}
+                        <div class="text-red-400 text-sm" v-if="form.errors['file'] && Array.isArray(form.errors['files'])">
+                            {{ form.errors['files'].join(', ') }}
+                        </div>
+                    </div>
                 </div>
 
+                <!-- Enhanced Footer with Action Buttons -->
                 <template #footer>
-                    <BaseButtons>
-                        <BaseButton
-                            v-if="can.edit"
-                            @click.stop="submitAlternative"
-                            :disabled="form.processing"
-                            label="Save"
-                            color="info"
-                            :icon="mdiDisc"
-                            :class="{ 'opacity-25': form.processing }"
-                            small
-                        >
-                        </BaseButton>
-                        <BaseButton
-                            v-if="can.edit"
-                            :route-name="stardust.route('dataset.release', [dataset.id])"
-                            color="info"
-                            :icon="mdiLockOpen"
-                            :label="'Release'"
-                            small
-                            :disabled="hasUnsavedChanges || form.processing"
-                            :title="hasUnsavedChanges ? 'Please save your changes before releasing' : ''"
-                        />
-                    </BaseButtons>
+                    <div class="flex items-center justify-between">
+                        <div class="text-sm text-gray-500 dark:text-gray-400">
+                            <span v-if="hasUnsavedChanges" class="flex items-center gap-2">
+                                <svg class="w-4 h-4 text-amber-500" fill="currentColor" viewBox="0 0 20 20">
+                                    <path
+                                        fill-rule="evenodd"
+                                        d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z"
+                                        clip-rule="evenodd"
+                                    />
+                                </svg>
+                                <span class="font-medium">{{ getChangesSummary().length }} unsaved change(s)</span>
+                            </span>
+                            <span v-else class="flex items-center gap-2 text-green-600 dark:text-green-400">
+                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+                                    <path
+                                        fill-rule="evenodd"
+                                        d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+                                        clip-rule="evenodd"
+                                    />
+                                </svg>
+                                <span class="font-medium">All changes saved</span>
+                            </span>
+                        </div>
+
+                        <BaseButtons>
+                            <BaseButton
+                                v-if="can.edit"
+                                @click.stop="submitAlternative"
+                                :disabled="form.processing"
+                                label="Save Changes"
+                                color="info"
+                                :icon="mdiDisc"
+                                :class="{ 'opacity-25': form.processing }"
+                                class="shadow-md hover:shadow-lg transition-shadow"
+                            />
+                            <BaseButton
+                                v-if="can.edit"
+                                :route-name="stardust.route('dataset.release', [dataset.id])"
+                                color="success"
+                                :icon="mdiLockOpen"
+                                label="Release"
+                                :disabled="hasUnsavedChanges || form.processing"
+                                :title="hasUnsavedChanges ? 'Please save your changes before releasing' : 'Publish this dataset'"
+                                class="shadow-md hover:shadow-lg transition-shadow"
+                            />
+                        </BaseButtons>
+                    </div>
                 </template>
             </CardBox>
-            <!-- Loading Spinner -->
-            <div v-if="form.processing" class="fixed inset-0 flex items-center justify-center bg-gray-500 bg-opacity-50 z-50">
-                <svg class="animate-spin h-12 w-12 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                    <path class="opacity-75" fill="currentColor" d="M12 2a10 10 0 0110 10h-4a6 6 0 00-6-6V2z"></path>
-                </svg>
+
+            <!-- Enhanced Loading Spinner Overlay -->
+            <div
+                v-if="form.processing"
+                class="fixed inset-0 flex items-center justify-center bg-gray-900 bg-opacity-75 z-50 backdrop-blur-sm"
+            >
+                <div class="bg-white dark:bg-slate-800 rounded-lg p-8 shadow-2xl flex flex-col items-center gap-4">
+                    <svg class="animate-spin h-12 w-12 text-blue-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                        <path
+                            class="opacity-75"
+                            fill="currentColor"
+                            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                        ></path>
+                    </svg>
+                    <p class="text-lg font-semibold text-gray-900 dark:text-white">Saving changes...</p>
+                    <p class="text-sm text-gray-500 dark:text-gray-400">Please wait while we update your dataset</p>
+                </div>
             </div>
         </SectionMain>
     </LayoutAuthenticated>
@@ -1499,25 +1629,6 @@ const getChangesSummary = () => {
 
     return changes;
 };
-
-// onMounted(() => {
-//     window.addEventListener('beforeunload', handleBeforeUnload);
-// });
-
-// onUnmounted(() => {
-//     window.removeEventListener('beforeunload', handleBeforeUnload);
-// });
-
-// Watch for when the component receives new props (e.g., after save)
-// watch(
-//     () => props.dataset,
-//     (newDataset) => {
-//         if (originalDataset) {
-//             originalDataset.value = JSON.parse(JSON.stringify(newDataset));
-//         }
-//     },
-//     { deep: true },
-// );
 </script>
 
 <style scoped>