feat: update API controllers, validations, and Vue components

- Modified Api/Authors.Controller.ts to use only personal types and sort by dataset_count.
- Completely rewritten AvatarController.ts.
- Added new Api/CollectionsController.ts for querying collections and collection_roles.
- Modified Api/DatasetController.ts to preload titles, identifier and order by server_date_published.
- Modified FileController.ts to serve files from /storage/app/data/ instead of /storage/app/public.
- Added new Api/UserController for requesting submitters (getSubmitters).
- Improved OaiController.ts with performant DB queries for better ResumptionToken handling.
- Modified Submitter/DatasetController.ts by adding a categorize method for library classification.
- Rewritten ResumptionToken.ts.
- Improved TokenWorkerService.ts to utilize browser fingerprint.
- Edited dataset.ts by adding the doiIdentifier property.
- Enhanced person.ts to improve the fullName property.
- Completely rewritten AsideMenuItem.vue component.
- Updated CarBoxClient.vue to use TypeScript.
- Added new CardBoxDataset.vue for displaying recent datasets on the dashboard.
- Completely rewritten TableSampleClients.vue for the dashboard.
- Completely rewritten UserAvatar.vue.
- Made small layout changes in Dashboard.vue.
- Added new Category.vue for browsing scientific collections.
- Adapted the pinia store in main.ts.
- Added additional routes in start/routes.ts and start/api/routes.ts.
- Improved referenceValidation.ts for better ISBN existence checking.
- NPM dependency updates.

resources/js/Components/CardBoxClient.vue

@@ -1,6 +1,6 @@
-<script setup>
+<script lang="ts" setup>
 import { computed } from 'vue';
-import { mdiTrendingDown, mdiTrendingUp, mdiTrendingNeutral } from '@mdi/js';
+// import { mdiTrendingDown, mdiTrendingUp, mdiTrendingNeutral } from '@mdi/js';
 import CardBox from '@/Components/CardBox.vue';
 import BaseLevel from '@/Components/BaseLevel.vue';
 import PillTag from '@/Components/PillTag.vue';
@@ -27,6 +27,10 @@ const props = defineProps({
         type: Number,
         default: 0,
     },
+    count: {
+        type: Number,
+        default: 0,
+    },
     text: {
         type: String,
         default: null,
@@ -42,11 +46,11 @@ const pillType = computed(() => {
         return props.type;
     }
 
-    if (props.progress) {
-        if (props.progress >= 60) {
+    if (props.count) {
+        if (props.count >= 20) {
             return 'success';
         }
-        if (props.progress >= 40) {
+        if (props.count >= 5) {
             return 'warning';
         }
 
@@ -56,17 +60,17 @@ const pillType = computed(() => {
     return 'info';
 });
 
-const pillIcon = computed(() => {
-    return {
-        success: mdiTrendingUp,
-        warning: mdiTrendingNeutral,
-        danger: mdiTrendingDown,
-        info: mdiTrendingNeutral,
-    }[pillType.value];
-});
+// const pillIcon = computed(() => {
+//     return {
+//         success: mdiTrendingUp,
+//         warning: mdiTrendingNeutral,
+//         danger: mdiTrendingDown,
+//         info: mdiTrendingNeutral,
+//     }[pillType.value];
+// });
 
-const pillText = computed(() => props.text ?? `${props.progress}%`);
-</script>
+// const pillText = computed(() => props.text ?? `${props.progress}%`);
+// </script>
 
 <template>
     <CardBox class="mb-6 last:mb-0" hoverable>
@@ -83,7 +87,17 @@ const pillText = computed(() => props.text ?? `${props.progress}%`);
                     </p>
                 </div>
             </BaseLevel>
-            <PillTag :type="pillType" :text="pillText" small :icon="pillIcon" />
+            <!-- <PillTag :type="pillType" :text="text" small :icon="pillIcon" /> -->
+
+            <div class="text-center md:text-right space-y-2">
+                <p class="text-sm text-gray-500">
+                   Count
+                </p>
+                <div>
+                    <PillTag :type="pillType" :text="String(count)" small />
+                </div>
+            </div>
+
         </BaseLevel>
     </CardBox>
 </template>