feat: enhance user management, mimetype creation, and validation

- **AdminuserController.ts**: enable editing `first_name` and `last_name` for user creation and updates
- **MimetypeController.ts**: add creation support for mimetypes with selectable extensions
- **Models**: add `Mimetype` model (mime_type.ts); add `SnakeCaseNamingStrategy` for User model
- **Validators**:
  - **updateDatasetValidator**: increase title length to 255 and description length to 2500
  - **User Validators**: refine `createUserValidator` and `updateUserValidator` to include `first_name` and `last_name`
- **vanilla_error_reporter**: improve error reporting for wildcard fields
- **SKOS Query**: refine keyword request in `SearchCategoryAutocomplete.vue`
- **UI Enhancements**:
  - improve icon design in wizard (Wizard.vue)
  - add components for mimetype creation (Create.vue and button in Index.vue)
- **Routes**: update `routes.ts` to include new AdonisJS routes

resources/js/Components/Icons/Wizard.vue

@@ -1,50 +1,50 @@
 <template>
     <div class="flex items-center relative">
-        <!-- v-bind:class="{ 'text-white  bg-teal-600 border-teal-600': isCurrent, 'border-teal-600': isChecked }" -->
-        <div
-            class="text-gray-500 rounded-full transition duration-500 ease-in-out h-12 w-12 py-3 border-2"
-            :class="[
-                isCurrent ? 'text-white  bg-teal-600 border-teal-600' : 'border-gray-300',
-                isChecked && 'text-teal-600 border-teal-600',
-            ]"
-        >
-            <!-- <svg class="my-svg-component" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-                <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    d="M11.42 15.17L17.25 21A2.652 2.652 0 0021 17.25l-5.877-5.877M11.42 15.17l2.496-3.03c.317-.384.74-.626 1.208-.766M11.42 15.17l-4.655 5.653a2.548 2.548 0 11-3.586-3.586l6.837-5.63m5.108-.233c.55-.164 1.163-.188 1.743-.14a4.5 4.5 0 004.486-6.336l-3.276 3.277a3.004 3.004 0 01-2.25-2.25l3.276-3.276a4.5 4.5 0 00-6.336 4.486c.091 1.076-.071 2.264-.904 2.95l-.102.085m-1.745 1.437L5.909 7.5H4.5L2.25 3.75l1.5-1.5L7.5 4.5v1.409l4.26 4.26m-1.745 1.437l1.745-1.437m6.615 8.206L15.75 15.75M4.867 19.125h.008v.008h-.008v-.008z"
-                />
-            </svg> -->
+        <!-- The main circular icon with dynamic classes based on the state of the step -->
+        <div class="text-gray-500 rounded-full transition duration-500 ease-in-out h-12 w-12 py-3 border-2" 
+             :class="[
+                 isCurrent ? 'text-white bg-teal-600 border-teal-600' : 'border-gray-300',
+                 isChecked && 'text-teal-600 border-teal-600',
+             ]">
+            <!-- Slot for custom content inside the circle -->
             <slot></slot>
-            <div class="absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase invisible sm:visible">
+            <!-- Label displayed above the icon, visibility controlled by isCurrent and isDark -->
+            <div class="absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase invisible sm:visible"
+                 :class="[!isDark && isCurrent ? 'font-black text-green-600' : '']">
                 {{ label }}
             </div>
         </div>
     </div>
-    <div
-        v-if="!isLastStep"
-        class="flex-auto border-t-2 transition duration-500 ease-in-out invisible sm:visible"
-        :class="[isChecked ? 'border-teal-600' : 'border-gray-300']"
-    ></div>
+    <!-- Divider line between steps, only visible if this is not the last step -->
+    <div v-if="!isLastStep" class="flex-auto border-t-2 transition duration-500 ease-in-out invisible sm:visible"
+         :class="[isChecked ? 'border-teal-600' : 'border-gray-300']"></div>
 </template>
 
-<script>
+<script lang="ts">
+import { StyleService } from '@/Stores/style.service';
+
+const styleService = StyleService();
+
 export default {
     name: 'Icon_Multistep',
-
     props: {
-        isCurrent: Boolean,
-        isChecked: Boolean,
-        isLastStep: Boolean,
-        label: String,
+        isCurrent: Boolean,   // Indicates if this step is the current one
+        isChecked: Boolean,   // Indicates if this step has been checked
+        isLastStep: Boolean,  // Indicates if this step is the last one
+        label: String,        // Label to display above the icon
     },
-
     data() {
         return {
-            mode: 'light',
-            checkedClass: 'border-teal-600',
-            uncheckedClass: 'border-gray-300',
+            mode: 'light',                     // Light mode setting
+            checkedClass: 'border-teal-600',   // Class for checked state
+            uncheckedClass: 'border-gray-300',  // Class for unchecked state
         };
     },
+    computed: {
+        // Computed property to determine if dark mode is enabled
+        isDark() {
+            return styleService.darkMode === true; // Return true if dark mode is active
+        }
+    },
 };
 </script>