first fixes

inertia/pages/auth/login.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import { Link, useForm } from '@inertiajs/vue3'
+import { Link } from '@adonisjs/inertia/vue'
+import { useForm } from '@inertiajs/vue3'
 import { computed } from 'vue'
 import EmptyLayout from '~/pages/layout/emptyLayout.vue'
 

inertia/pages/components/create.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, reactive } from 'vue'
-import { Link, useForm } from '@inertiajs/vue3'
+import { Link } from '@adonisjs/inertia/vue'
+import { useForm } from '@inertiajs/vue3'
 import CustomSelect from '~/pages/widgets/CustomSelect.vue'
 
 const props = defineProps<{ types: any[]; errors?: Record<string, string> }>()

inertia/pages/components/edit.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, reactive } from 'vue'
-import { Link, usePage } from '@inertiajs/vue3'
+import { Link } from '@adonisjs/inertia/vue'
+import { usePage } from '@inertiajs/vue3'
 import CustomSelect from '~/pages/widgets/CustomSelect.vue'
 
 const { props } = usePage<{

inertia/pages/components/index.vue

@@ -1,12 +1,11 @@
 <script setup lang="ts">
-import { Link } from '@inertiajs/vue3'
-
-defineProps<{ components: any[] }>()
+import { Link } from '@adonisjs/inertia/vue'
+import ComponentsViewer from '~/pages/widgets/ComponentsViewer.vue'
 </script>
 
 <template>
   <div>
-    <div class="flex justify-between items-center">
+    <div class="flex justify-between items-center mb-6">
       <h3 class="text-3xl font-semibold text-gray-700">Components</h3>
       <Link
         href="/components/create"
@@ -17,27 +16,6 @@ defineProps<{ components: any[] }>()
       </Link>
     </div>
 
-    <div class="mt-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-      <template v-if="components.length > 0">
-        <div
-          v-for="component in components"
-          :key="component.id"
-          class="p-4 border rounded-lg shadow hover:shadow-lg transition"
-        >
-          <h4 class="font-semibold text-lg text-gray-800">{{ component.name }}</h4>
-          <p class="text-gray-600">Type: {{ component.type?.name }}</p>
-          <p class="text-indigo-600 font-semibold">Price: ${{ component.price }}</p>
-          <Link
-            :href="`/components/${component.id}`"
-            class="mt-2 inline-block text-indigo-600 hover:text-indigo-700"
-          >
-            View Details
-          </Link>
-        </div>
-      </template>
-      <template v-else>
-        <p class="text-gray-500">No components yet. Create one to get started!</p>
-      </template>
-    </div>
+    <ComponentsViewer />
   </div>
 </template>

inertia/pages/components/show.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Link } from '@inertiajs/vue3'
+import { Link } from '@adonisjs/inertia/vue'
 
 const props = defineProps<{ component: any }>()
 </script>

inertia/pages/computers/create.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, reactive } from 'vue'
-import { Link, usePage } from '@inertiajs/vue3'
+import { Link } from '@adonisjs/inertia/vue'
+import { usePage } from '@inertiajs/vue3'
 
 const { props } = usePage<{
   components: any[]

inertia/pages/computers/edit.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, reactive } from 'vue'
-import { Link, router, usePage } from '@inertiajs/vue3'
+import { Link } from '@adonisjs/inertia/vue'
+import { router, usePage } from '@inertiajs/vue3'
 
 const { props } = usePage<{
   computer: any

inertia/pages/computers/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Link } from '@inertiajs/vue3'
+import { Link } from '@adonisjs/inertia/vue'
 
 defineProps<{ computers: any[] }>()
 </script>

inertia/pages/computers/show.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Link } from '@inertiajs/vue3'
+import { Link } from '@adonisjs/inertia/vue'
 
 const { props } = defineProps<{ computer: any }>()
 </script>

inertia/pages/home.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { Link, usePage } from '@inertiajs/vue3'
+import { Link } from '@adonisjs/inertia/vue'
+import { usePage } from '@inertiajs/vue3'
 
 const page = usePage()
 

inertia/pages/layout/header.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 import { useSidebar } from '~/composables/useSidebar'
-import { Link, usePage } from '@inertiajs/vue3'
+import { Link } from '@adonisjs/inertia/vue'
+import { usePage } from '@inertiajs/vue3'
 import { userProfileIcon } from '~/assets/icons'
 
 const dropdownOpen = ref(false)
@@ -31,16 +32,23 @@ const user = computed(() => {
     </div>
 
     <div class="flex items-center gap-6">
-      <button class="text-on-surface-variant hover:bg-surface-container-low p-2 rounded-full transition-all">
+      <button
+        class="text-on-surface-variant hover:bg-surface-container-low p-2 rounded-full transition-all"
+      >
         <span class="material-symbols-outlined">notifications</span>
       </button>
-      <button class="text-on-surface-variant hover:bg-surface-container-low p-2 rounded-full transition-all">
+      <button
+        class="text-on-surface-variant hover:bg-surface-container-low p-2 rounded-full transition-all"
+      >
         <span class="material-symbols-outlined">settings</span>
       </button>
 
       <div class="h-8 w-px bg-outline-variant mx-2"></div>
 
-      <div class="relative flex items-center gap-3 cursor-pointer group" @click="dropdownOpen = !dropdownOpen">
+      <div
+        class="relative flex items-center gap-3 cursor-pointer group"
+        @click="dropdownOpen = !dropdownOpen"
+      >
         <div class="text-right hidden sm:block">
           <p class="font-label-md text-label-md text-on-surface">{{ user.name }}</p>
         </div>
@@ -65,7 +73,9 @@ const user = computed(() => {
         >
           <div class="px-4 py-3 border-b border-outline-variant">
             <p class="font-label-md text-label-md text-on-surface truncate">{{ user.name }}</p>
-            <p class="font-label-sm text-label-sm text-on-surface-variant truncate">{{ user.email }}</p>
+            <p class="font-label-sm text-label-sm text-on-surface-variant truncate">
+              {{ user.email }}
+            </p>
           </div>
 
           <Link

inertia/pages/layout/sidebar.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { ref, useAttrs } from 'vue'
 import { useSidebar } from '~/composables/useSidebar'
-import { Link } from '@inertiajs/vue3'
+import { Link } from '@adonisjs/inertia/vue'
 import { siteIcon } from '~/assets/icons'
 
 const { isOpen } = useSidebar()

inertia/pages/widgets/ComponentEditor.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, onMounted, ref, watch } from 'vue'
-import { Component } from '~/pages/types/UITypes'
+import type { Component } from '~/pages/types/UITypes'
 
 interface ComponentsByType {
   type: string

inertia/pages/widgets/ComponentsViewer.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { computed, reactive, ref } from 'vue'
 import TableComponent from '~/pages/widgets/TableComponent.vue'
-import Component from '#models/component'
-import ComponentType from '#models/component_type'
+import type Component from '#models/component'
+import type ComponentType from '#models/component_type'
 import { usePage } from '@inertiajs/vue3'
 
 const { props } = usePage<{ components: Component[] }>()

inertia/pages/widgets/ComputerComponentsTable.vue

@@ -14,8 +14,8 @@ import {
   ssd,
   wiFiCard,
 } from '~/assets/icons'
-import Component from '#models/component'
-import { Link } from '@inertiajs/vue3'
+import type Component from '#models/component'
+import { Link } from '@adonisjs/inertia/vue'
 
 const props = defineProps<{
   components: Component[]

inertia/pages/widgets/SimpleGallery.vue

@@ -84,8 +84,8 @@
 import { computed, ref, watch } from 'vue'
 import { crossIcon } from '~/assets/icons'
 import { Navigation, Pagination } from 'vue3-carousel'
-import { NewImage, ServerImage } from '../../../app/types/UItypes'
-import { Image } from '~/pages/types/UITypes'
+import type { NewImage, ServerImage } from '../../../app/types/UItypes'
+import type { Image } from '~/pages/types/UITypes'
 
 const props = defineProps<{
   galleryId: string

inertia/pages/widgets/TableComponent.vue

@@ -16,7 +16,7 @@ import {
 } from '~/assets/icons'
 import { router } from '@inertiajs/vue3'
 import { useAdminMode } from '~/composables/isAdminMode'
-import Component from '#models/component'
+import type Component from '#models/component'
 
 const props = defineProps<{
   components: Component[]