first fixes

.adonisjs/server/pages.d.ts

@@ -9,7 +9,6 @@ type ExtractProps<T> = Omit<
 
 declare module '@adonisjs/inertia/types' {
   export interface InertiaPages {
-    'account/signup': ExtractProps<(typeof import('../../inertia/pages/account/signup.vue'))['default']>
     'auth/login': ExtractProps<(typeof import('../../inertia/pages/auth/login.vue'))['default']>
     'auth/signup': ExtractProps<(typeof import('../../inertia/pages/auth/signup.vue'))['default']>
     'components/create': ExtractProps<(typeof import('../../inertia/pages/components/create.vue'))['default']>
@@ -37,5 +36,6 @@ declare module '@adonisjs/inertia/types' {
     'widgets/SimpleGallery': ExtractProps<(typeof import('../../inertia/pages/widgets/SimpleGallery.vue'))['default']>
     'widgets/TableComponent': ExtractProps<(typeof import('../../inertia/pages/widgets/TableComponent.vue'))['default']>
     'widgets/ValidationError': ExtractProps<(typeof import('../../inertia/pages/widgets/ValidationError.vue'))['default']>
+    'widgets/CustomSelect': ExtractProps<(typeof import('../../inertia/pages/widgets/CustomSelect.vue'))['default']>
   }
 }

app/controllers/components_controller.ts

@@ -8,15 +8,13 @@ import ComponentType from '#models/component_type'
 export default class ComponentsController {
   async index({ inertia, auth }: HttpContext) {
     const user = await auth.authenticate()
-    const components = await Component.query()
+    const components = await Component.query().preload('type').where('userId', user.id)
-      .preload('type')
+    return inertia.render('components/index', { components: components.map((c) => c.serialize({ relations: true })) })
-      .where('userId', user.id)
-    return inertia.render('components/index', { components })
   }
 
   async create({ inertia }: HttpContext) {
     const types = await ComponentType.all()
-    return inertia.render('components/create', { types })
+    return inertia.render('components/create', { types: types.map((t) => t.serialize()) })
   }
 
   async store({ request, response, auth }: HttpContext) {
@@ -42,7 +40,7 @@ export default class ComponentsController {
       .where('userId', user.id)
       .andWhere('id', componentId)
       .firstOrFail()
-    return inertia.render('components/show', { component })
+    return inertia.render('components/show', { component: component.serialize({ relations: true }) })
   }
 
   async edit({ params, auth, inertia }: HttpContext) {
@@ -54,7 +52,10 @@ export default class ComponentsController {
       .where('userId', user.id)
       .andWhere('id', componentId)
       .firstOrFail()
-    return inertia.render('components/edit', { component, types })
+    return inertia.render('components/edit', {
+      component: component.serialize({ relations: true }),
+      types: types.map((t) => t.serialize()),
+    })
   }
 
   async update({ params, auth, request, response }: HttpContext) {

app/controllers/computers_controller.ts

@@ -19,7 +19,7 @@ export default class ComputersController {
         picturesQuery.where('order', 1)
       })
 
-    return inertia.render('computers/index', { computers })
+    return inertia.render('computers/index', { computers: computers.map((c) => c.serialize({ relations: true })) })
   }
 
   async create({ auth, inertia }: HttpContext) {
@@ -29,7 +29,7 @@ export default class ComputersController {
       .where('userId', user.id)
       .whereNull('computerId')
       .preload('type')
-    return inertia.render('computers/create', { components, states })
+    return inertia.render('computers/create', { components: components.map((c) => c.serialize({ relations: true })), states: states.map((s) => s.serialize()) })
   }
 
   async store({ auth, request, response }: HttpContext) {
@@ -60,7 +60,7 @@ export default class ComputersController {
       .where('user_id', user.id)
       .andWhere('id', computerId)
       .firstOrFail()
-    return inertia.render('computers/show', { computer })
+    return inertia.render('computers/show', { computer: computer.serialize({ relations: true }) })
   }
 
   async edit({ params, inertia, auth }: HttpContext) {
@@ -86,7 +86,7 @@ export default class ComputersController {
         'id',
         computer.components.map((c) => c.id)
       )
-    return inertia.render('computers/edit', { computer, availableComponents, states })
+    return inertia.render('computers/edit', { computer: computer.serialize({ relations: true }), availableComponents: availableComponents.map((c) => c.serialize({ relations: true })), states: states.map((s) => s.serialize()) })
   }
 
   async update({ params, request, response }: HttpContext) {

app/validators/user.ts

@@ -4,7 +4,7 @@ const email = () => vine.string().email().maxLength(254)
 const password = () => vine.string().minLength(8).maxLength(32)
 
 export const signupValidator = vine.create({
-  fullName: vine.string().nullable(),
+  name: vine.string().nullable(),
   email: email().unique({ table: 'users', column: 'email' }),
   password: password().confirmed({
     confirmationField: 'passwordConfirmation',

database/schema.ts

@@ -7,6 +7,134 @@
 import { BaseModel, column } from '@adonisjs/lucid/orm'
 import { DateTime } from 'luxon'
 
+export class AccessListSchema extends BaseModel {
+  static $columns = ['createdOn', 'id', 'isDeleted', 'meta', 'modifiedOn', 'name', 'ownerUserId', 'passAuth', 'satisfyAny'] as const
+  $columns = AccessListSchema.$columns
+  @column.dateTime()
+  declare createdOn: DateTime
+  @column({ isPrimary: true })
+  declare id: number
+  @column()
+  declare isDeleted: number
+  @column()
+  declare meta: any
+  @column.dateTime()
+  declare modifiedOn: DateTime
+  @column()
+  declare name: string
+  @column()
+  declare ownerUserId: number
+  @column()
+  declare passAuth: number
+  @column()
+  declare satisfyAny: number
+}
+
+export class AccessListAuthSchema extends BaseModel {
+  static $columns = ['accessListId', 'createdOn', 'id', 'meta', 'modifiedOn', 'password', 'username'] as const
+  $columns = AccessListAuthSchema.$columns
+  @column()
+  declare accessListId: number
+  @column.dateTime()
+  declare createdOn: DateTime
+  @column({ isPrimary: true })
+  declare id: number
+  @column()
+  declare meta: any
+  @column.dateTime()
+  declare modifiedOn: DateTime
+  @column({ serializeAs: null })
+  declare password: string
+  @column()
+  declare username: string
+}
+
+export class AccessListClientSchema extends BaseModel {
+  static $columns = ['accessListId', 'address', 'createdOn', 'directive', 'id', 'meta', 'modifiedOn'] as const
+  $columns = AccessListClientSchema.$columns
+  @column()
+  declare accessListId: number
+  @column()
+  declare address: string
+  @column.dateTime()
+  declare createdOn: DateTime
+  @column()
+  declare directive: string
+  @column({ isPrimary: true })
+  declare id: number
+  @column()
+  declare meta: any
+  @column.dateTime()
+  declare modifiedOn: DateTime
+}
+
+export class AuditLogSchema extends BaseModel {
+  static $columns = ['action', 'createdOn', 'id', 'meta', 'modifiedOn', 'objectId', 'objectType', 'userId'] as const
+  $columns = AuditLogSchema.$columns
+  @column()
+  declare action: string
+  @column.dateTime()
+  declare createdOn: DateTime
+  @column({ isPrimary: true })
+  declare id: number
+  @column()
+  declare meta: any
+  @column.dateTime()
+  declare modifiedOn: DateTime
+  @column()
+  declare objectId: number
+  @column()
+  declare objectType: string
+  @column()
+  declare userId: number
+}
+
+export class AuthSchema extends BaseModel {
+  static $columns = ['createdOn', 'id', 'isDeleted', 'meta', 'modifiedOn', 'secret', 'type', 'userId'] as const
+  $columns = AuthSchema.$columns
+  @column.dateTime()
+  declare createdOn: DateTime
+  @column({ isPrimary: true })
+  declare id: number
+  @column()
+  declare isDeleted: number
+  @column()
+  declare meta: any
+  @column.dateTime()
+  declare modifiedOn: DateTime
+  @column()
+  declare secret: string
+  @column()
+  declare type: string
+  @column()
+  declare userId: number
+}
+
+export class CertificateSchema extends BaseModel {
+  static $columns = ['createdOn', 'domainNames', 'expiresOn', 'id', 'isDeleted', 'meta', 'modifiedOn', 'niceName', 'ownerUserId', 'provider'] as const
+  $columns = CertificateSchema.$columns
+  @column.dateTime()
+  declare createdOn: DateTime
+  @column()
+  declare domainNames: any
+  @column.dateTime()
+  declare expiresOn: DateTime
+  @column({ isPrimary: true })
+  declare id: number
+  @column()
+  declare isDeleted: number
+  @column()
+  declare meta: any
+  @column.dateTime()
+  declare modifiedOn: DateTime
+  @column()
+  declare niceName: string
+  @column()
+  declare ownerUserId: number
+  @column()
+  declare provider: string
+}
+
 export class ComponentTypeSchema extends BaseModel {
   static $columns = ['id', 'name', 'unique'] as const
   $columns = ComponentTypeSchema.$columns
@@ -92,6 +220,253 @@ export class ComputerSchema extends BaseModel {
   declare userId: number | null
 }
 
+export class DeadHostSchema extends BaseModel {
+  static $columns = ['advancedConfig', 'certificateId', 'createdOn', 'domainNames', 'enabled', 'hstsEnabled', 'hstsSubdomains', 'http2Support', 'id', 'isDeleted', 'meta', 'modifiedOn', 'ownerUserId', 'sslForced'] as const
+  $columns = DeadHostSchema.$columns
+  @column()
+  declare advancedConfig: string
+  @column()
+  declare certificateId: number
+  @column.dateTime()
+  declare createdOn: DateTime
+  @column()
+  declare domainNames: any
+  @column()
+  declare enabled: number
+  @column()
+  declare hstsEnabled: number
+  @column()
+  declare hstsSubdomains: number
+  @column()
+  declare http2Support: number
+  @column({ isPrimary: true })
+  declare id: number
+  @column()
+  declare isDeleted: number
+  @column()
+  declare meta: any
+  @column.dateTime()
+  declare modifiedOn: DateTime
+  @column()
+  declare ownerUserId: number
+  @column()
+  declare sslForced: number
+}
+
+export class MigrationSchema extends BaseModel {
+  static $columns = ['batch', 'id', 'migrationTime', 'name'] as const
+  $columns = MigrationSchema.$columns
+  @column()
+  declare batch: number | null
+  @column({ isPrimary: true })
+  declare id: number
+  @column.dateTime()
+  declare migrationTime: DateTime | null
+  @column()
+  declare name: string | null
+}
+
+export class MigrationsLockSchema extends BaseModel {
+  static $columns = ['index', 'isLocked'] as const
+  $columns = MigrationsLockSchema.$columns
+  @column({ isPrimary: true })
+  declare index: number
+  @column()
+  declare isLocked: number | null
+}
+
+export class ProxyHostSchema extends BaseModel {
+  static $columns = ['accessListId', 'advancedConfig', 'allowWebsocketUpgrade', 'blockExploits', 'cachingEnabled', 'certificateId', 'createdOn', 'domainNames', 'enabled', 'forwardHost', 'forwardPort', 'forwardScheme', 'hstsEnabled', 'hstsSubdomains', 'http2Support', 'id', 'isDeleted', 'locations', 'meta', 'modifiedOn', 'ownerUserId', 'sslForced', 'trustForwardedProto'] as const
+  $columns = ProxyHostSchema.$columns
+  @column()
+  declare accessListId: number
+  @column()
+  declare advancedConfig: string
+  @column()
+  declare allowWebsocketUpgrade: number
+  @column()
+  declare blockExploits: number
+  @column()
+  declare cachingEnabled: number
+  @column()
+  declare certificateId: number
+  @column.dateTime()
+  declare createdOn: DateTime
+  @column()
+  declare domainNames: any
+  @column()
+  declare enabled: number
+  @column()
+  declare forwardHost: string
+  @column()
+  declare forwardPort: number
+  @column()
+  declare forwardScheme: string
+  @column()
+  declare hstsEnabled: number
+  @column()
+  declare hstsSubdomains: number
+  @column()
+  declare http2Support: number
+  @column({ isPrimary: true })
+  declare id: number
+  @column()
+  declare isDeleted: number
+  @column()
+  declare locations: any | null
+  @column()
+  declare meta: any
+  @column.dateTime()
+  declare modifiedOn: DateTime
+  @column()
+  declare ownerUserId: number
+  @column()
+  declare sslForced: number
+  @column()
+  declare trustForwardedProto: boolean
+}
+
+export class RedirectionHostSchema extends BaseModel {
+  static $columns = ['advancedConfig', 'blockExploits', 'certificateId', 'createdOn', 'domainNames', 'enabled', 'forwardDomainName', 'forwardHttpCode', 'forwardScheme', 'hstsEnabled', 'hstsSubdomains', 'http2Support', 'id', 'isDeleted', 'meta', 'modifiedOn', 'ownerUserId', 'preservePath', 'sslForced'] as const
+  $columns = RedirectionHostSchema.$columns
+  @column()
+  declare advancedConfig: string
+  @column()
+  declare blockExploits: number
+  @column()
+  declare certificateId: number
+  @column.dateTime()
+  declare createdOn: DateTime
+  @column()
+  declare domainNames: any
+  @column()
+  declare enabled: number
+  @column()
+  declare forwardDomainName: string
+  @column()
+  declare forwardHttpCode: number
+  @column()
+  declare forwardScheme: string
+  @column()
+  declare hstsEnabled: number
+  @column()
+  declare hstsSubdomains: number
+  @column()
+  declare http2Support: number
+  @column({ isPrimary: true })
+  declare id: number
+  @column()
+  declare isDeleted: number
+  @column()
+  declare meta: any
+  @column.dateTime()
+  declare modifiedOn: DateTime
+  @column()
+  declare ownerUserId: number
+  @column()
+  declare preservePath: number
+  @column()
+  declare sslForced: number
+}
+
+export class SettingSchema extends BaseModel {
+  static $columns = ['description', 'id', 'meta', 'name', 'value'] as const
+  $columns = SettingSchema.$columns
+  @column()
+  declare description: string
+  @column({ isPrimary: true })
+  declare id: string
+  @column()
+  declare meta: any
+  @column()
+  declare name: string
+  @column()
+  declare value: string
+}
+
+export class StreamSchema extends BaseModel {
+  static $columns = ['certificateId', 'createdOn', 'enabled', 'forwardingHost', 'forwardingPort', 'id', 'incomingPort', 'isDeleted', 'meta', 'modifiedOn', 'ownerUserId', 'tcpForwarding', 'udpForwarding'] as const
+  $columns = StreamSchema.$columns
+  @column()
+  declare certificateId: number
+  @column.dateTime()
+  declare createdOn: DateTime
+  @column()
+  declare enabled: number
+  @column()
+  declare forwardingHost: string
+  @column()
+  declare forwardingPort: number
+  @column({ isPrimary: true })
+  declare id: number
+  @column()
+  declare incomingPort: number
+  @column()
+  declare isDeleted: number
+  @column()
+  declare meta: any
+  @column.dateTime()
+  declare modifiedOn: DateTime
+  @column()
+  declare ownerUserId: number
+  @column()
+  declare tcpForwarding: number
+  @column()
+  declare udpForwarding: number
+}
+
+export class UserSchema extends BaseModel {
+  static $columns = ['avatar', 'createdOn', 'email', 'id', 'isDeleted', 'isDisabled', 'modifiedOn', 'name', 'nickname', 'roles'] as const
+  $columns = UserSchema.$columns
+  @column()
+  declare avatar: string
+  @column.dateTime()
+  declare createdOn: DateTime
+  @column()
+  declare email: string
+  @column({ isPrimary: true })
+  declare id: number
+  @column()
+  declare isDeleted: number
+  @column()
+  declare isDisabled: number
+  @column.dateTime()
+  declare modifiedOn: DateTime
+  @column()
+  declare name: string
+  @column()
+  declare nickname: string
+  @column()
+  declare roles: any
+}
+
+export class UserPermissionSchema extends BaseModel {
+  static $columns = ['accessLists', 'certificates', 'createdOn', 'deadHosts', 'id', 'modifiedOn', 'proxyHosts', 'redirectionHosts', 'streams', 'userId', 'visibility'] as const
+  $columns = UserPermissionSchema.$columns
+  @column()
+  declare accessLists: string
+  @column()
+  declare certificates: string
+  @column.dateTime()
+  declare createdOn: DateTime
+  @column()
+  declare deadHosts: string
+  @column({ isPrimary: true })
+  declare id: number
+  @column.dateTime()
+  declare modifiedOn: DateTime
+  @column()
+  declare proxyHosts: string
+  @column()
+  declare redirectionHosts: string
+  @column()
+  declare streams: string
+  @column()
+  declare userId: number
+  @column()
+  declare visibility: string
+}
+
 export class UserSchema extends BaseModel {
   static $columns = ['createdAt', 'email', 'id', 'name', 'password', 'updatedAt'] as const
   $columns = UserSchema.$columns

database/seeders/component_type_seeder.ts

@@ -0,0 +1,57 @@
+import { BaseSeeder } from '@adonisjs/lucid/seeders'
+import ComponentType from '#models/component_type'
+
+export default class extends BaseSeeder {
+  async run() {
+    await ComponentType.createMany([
+      {
+        name: 'Processor',
+        unique: true,
+      },
+      {
+        name: 'Motherboard',
+        unique: true,
+      },
+      {
+        name: 'Graphic Card',
+        unique: true,
+      },
+      {
+        name: 'Memory',
+        unique: true,
+      },
+      {
+        name: 'SSD',
+        unique: true,
+      },
+      {
+        name: 'HDD',
+        unique: true,
+      },
+      {
+        name: 'Cooler',
+        unique: true,
+      },
+      {
+        name: 'Power Supply',
+        unique: true,
+      },
+      {
+        name: 'Case',
+        unique: true,
+      },
+      {
+        name: 'Fan',
+        unique: false,
+      },
+      {
+        name: 'WiFi-Card',
+        unique: true,
+      },
+      {
+        name: 'Other',
+        unique: false,
+      },
+    ])
+  }
+}

database/seeders/computer_state_seeder.ts

@@ -0,0 +1,18 @@
+import { BaseSeeder } from '@adonisjs/lucid/seeders'
+import ComputerState from '#models/computer_state'
+
+export default class extends BaseSeeder {
+  async run() {
+    await ComputerState.createMany([
+      {
+        name: 'ON_GOING',
+      },
+      {
+        name: 'FINISHED',
+      },
+      {
+        name: 'SOLD',
+      },
+    ])
+  }
+}

inertia/css/app.css

@@ -2,18 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-:root {
-  --gray-1: oklch(98.5% 0 0);
-  --gray-2: oklch(97% 0 0);
-  --gray-3: oklch(92.2% 0 0);
-  --gray-4: oklch(87% 0 0);
-  --gray-6: oklch(55.6% 0 0);
-  --gray-7: oklch(43.9% 0 0);
-  --gray-8: oklch(37.1% 0 0);
-  --gray-10: oklch(26.9% 0 0);
-  --gray-12: oklch(14.5% 0 0);
-}
-
 * {
   box-sizing: border-box;
   margin: 0;
@@ -23,218 +11,11 @@
 html,
 body {
   height: 100%;
-  font-family: system-ui, sans-serif;
   -webkit-font-smoothing: antialiased;
-  background: var(--gray-2);
-  color: var(--gray-10);
-  font-size: 16px;
-  line-height: 1.5;
 }
 
-a {
+.material-symbols-outlined {
-  color: inherit;
+  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
-  text-decoration: none;
-}
-
-[x-cloak] {
-  display: none;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  color: var(--gray-12);
-}
-
-/* Header */
-header {
-  max-width: 1440px;
-  margin: auto;
-  padding: 0 30px;
-}
-header > div {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  height: 64px;
-}
-header nav {
-  display: flex;
-  align-items: center;
-  gap: 26px;
-}
-header nav a {
-  font-weight: 500;
-  color: var(--gray-8);
-}
-header nav a:hover,
-header nav a.current {
-  color: var(--gray-12);
-}
-
-/* Main */
-main {
-  max-width: 1440px;
-  margin: 0 30px;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  min-height: calc(100vh - 65px);
-  background: #fff;
-  border: 1px solid var(--gray-3);
-}
-
-.hero {
-  padding: 100px 50px;
-  max-width: 880px;
-}
-.hero h1 {
-  margin-bottom: 15px;
-  font-size: 52px;
-  font-weight: 600;
-  letter-spacing: -1px;
-  line-height: 1.05;
-}
-.hero p {
-  font-size: 22px;
-  color: var(--gray-7);
-}
-.hero .button {
-  margin-top: 30px;
   display: inline-block;
-  padding: 10px 16px;
+  vertical-align: middle;
-}
-
-.cards {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  padding: 0 50px;
-  border-top: 1px solid var(--gray-3);
-}
-.cards a {
-  padding: 30px 40px;
-  border-right: 1px solid var(--gray-3);
-}
-.cards a:first-child {
-  border-left: 1px solid var(--gray-3);
-}
-.cards a:hover {
-  background: var(--gray-1);
-}
-.cards h3 {
-  margin-bottom: 10px;
-  font-size: 20px;
-  font-weight: 600;
-  letter-spacing: -0.4px;
-}
-.cards p {
-  color: var(--gray-6);
-}
-
-/* Form */
-.form-container {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  max-width: 400px;
-  margin: auto;
-}
-.form-container h1 {
-  font-size: 32px;
-  letter-spacing: -0.5px;
-  margin-bottom: 5px;
-}
-.form-container p {
-  font-size: 18px;
-  margin-bottom: 48px;
-  color: var(--gray-6);
-}
-form {
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-}
-label {
-  margin-bottom: 4px;
-  display: block;
-  font-size: 14px;
-  font-weight: 500;
-}
-input,
-textarea,
-button {
-  width: 100%;
-  border-radius: 4px;
-  font: inherit;
-}
-input {
-  height: 40px;
-  border: 1px solid var(--gray-4);
-  padding: 0 16px;
-}
-input[data-invalid='true'],
-textarea[data-invalid='true'] {
-  border-color: #fb2c36;
-}
-input[data-invalid='true'] + div,
-textarea[data-invalid='true'] + div {
-  color: #fb2c36;
-  font-size: 14px;
-  font-weight: 500;
-  margin-top: 2px;
-}
-
-button {
-  background: var(--gray-12);
-  color: #fff;
-  border: none;
-  padding: 10px;
-  font-weight: 500;
-}
-button:hover {
-  background: var(--gray-10);
-}
-
-/* Alerts */
-.alert {
-  background: #fff;
-  position: relative;
-  padding: 12px 16px;
-  font-size: 14px;
-  min-width: 380px;
-  font-weight: 500;
-  border: 1px solid var(--gray-3);
-  border-radius: 10px;
-  animation: scale-up 0.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
-}
-.alert-destructive {
-  color: #fb2c36;
-  background: #fb2c361a;
-  border-color: #fb2c36;
-}
-.alert-success {
-  color: #00a63e;
-  background: #00a63e1a;
-  border-color: #00a63e;
-}
-.flash-container {
-  position: fixed;
-  top: 80px;
-  left: 0;
-  right: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-@keyframes scale-up {
-  from {
-    transform: scale(0.7);
-  }
-  to {
-    transform: scale(1);
-  }
 }

inertia/pages/account/signup.vue

@@ -1,98 +0,0 @@
-<script setup lang="ts">
-import { Form, Link } from '@adonisjs/inertia/vue'
-import { useForm } from '@inertiajs/vue3'
-import EmptyLayout from '~/pages/layout/emptyLayout.vue'
-
-defineOptions({ layout: EmptyLayout })
-
-const form = useForm({
-  fullName: '',
-  email: '',
-  password: '',
-  passwordConfirmation: '',
-})
-</script>
-
-<template>
-  <div class="flex items-center justify-center min-h-screen px-4 py-8 bg-gradient-to-br from-gray-100 to-gray-200">
-    <div class="w-full max-w-md p-6 sm:p-8 bg-white rounded-lg shadow-lg">
-      <div class="flex flex-col items-center justify-center mb-8">
-        <h1 class="text-2xl sm:text-3xl font-bold text-gray-800">Create Account</h1>
-        <p class="text-sm text-gray-600 mt-2">Join PC Creator today</p>
-      </div>
-
-      <Form route="account.signup" #default="{ processing, errors }">
-        <div class="space-y-4 sm:space-y-6">
-          <div>
-            <label class="block">
-              <span class="text-sm font-medium text-gray-700 mb-2 block">Full Name</span>
-              <input
-                v-model="form.fullName"
-                class="w-full px-3 sm:px-4 py-2 sm:py-3 border-2 border-gray-300 rounded-lg focus:border-indigo-600 focus:ring-2 focus:ring-indigo-500/40 transition text-base"
-                name="fullName"
-                type="text"
-                placeholder="Enter your full name"
-              />
-            </label>
-          </div>
-
-          <div>
-            <label class="block">
-              <span class="text-sm font-medium text-gray-700 mb-2 block">Email</span>
-              <input
-                v-model="form.email"
-                class="w-full px-3 sm:px-4 py-2 sm:py-3 border-2 border-gray-300 rounded-lg focus:border-indigo-600 focus:ring-2 focus:ring-indigo-500/40 transition text-base"
-                name="email"
-                type="email"
-                placeholder="Enter your email"
-              />
-            </label>
-          </div>
-
-          <div>
-            <label class="block">
-              <span class="text-sm font-medium text-gray-700 mb-2 block">Password</span>
-              <input
-                v-model="form.password"
-                class="w-full px-3 sm:px-4 py-2 sm:py-3 border-2 border-gray-300 rounded-lg focus:border-indigo-600 focus:ring-2 focus:ring-indigo-500/40 transition text-base"
-                name="password"
-                type="password"
-                placeholder="Enter your password"
-              />
-            </label>
-          </div>
-
-          <div>
-            <label class="block">
-              <span class="text-sm font-medium text-gray-700 mb-2 block">Confirm Password</span>
-              <input
-                v-model="form.passwordConfirmation"
-                class="w-full px-3 sm:px-4 py-2 sm:py-3 border-2 border-gray-300 rounded-lg focus:border-indigo-600 focus:ring-2 focus:ring-indigo-500/40 transition text-base"
-                name="passwordConfirmation"
-                type="password"
-                placeholder="Confirm your password"
-              />
-            </label>
-          </div>
-
-          <button
-            type="submit"
-            :disabled="processing"
-            class="w-full px-3 sm:px-4 py-2 sm:py-3 mt-6 sm:mt-8 text-base font-semibold text-white bg-indigo-600 rounded-lg hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500/40 transition disabled:opacity-50 disabled:cursor-not-allowed"
-          >
-            {{ processing ? 'Creating account...' : 'Sign Up' }}
-          </button>
-
-          <div class="text-center mt-4">
-            <p class="text-sm text-gray-600">
-              Already have an account?
-              <Link route="auth.show_login" class="text-indigo-600 hover:text-indigo-700 font-semibold">
-                Login
-              </Link>
-            </p>
-          </div>
-        </div>
-      </Form>
-    </div>
-  </div>
-</template>

inertia/pages/auth/login.vue

@@ -1,22 +1,23 @@
 <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'
 
 defineOptions({ layout: EmptyLayout })
 
-const props = defineProps<{ errors?: any[] | any }>()
+const props = defineProps<{ errors?: Record<string, string> }>()
 
 const vineErrors = computed(() => {
-  if (Array.isArray(props.errors)) {
+  if (props.errors && !Array.isArray(props.errors)) {
-    return props.errors as any[]
+    return props.errors
   }
-  return []
+  return {}
 })
 
 const authError = computed(() => {
-  if (!Array.isArray(props.errors) && props.errors) {
+  if (props.errors && !Array.isArray(props.errors)) {
-    return props.errors as any
+    return props.errors
   }
   return null
 })
@@ -27,13 +28,8 @@ const form = useForm({
 })
 
 function getErrorMessage(field: string): string | null {
-  const error = vineErrors.value.find((error) => error.field === field)
+  return vineErrors.value[field] || null
-  return error ? error.message : null
 }
-
-console.log(authError)
-console.log(vineErrors)
-console.log(props)
 </script>
 
 <template>
@@ -109,7 +105,7 @@ console.log(props)
         <Link
           as="button"
           class="w-full px-3 sm:px-4 py-2 sm:py-3 mt-3 sm:mt-4 text-base font-semibold text-indigo-600 bg-gray-100 rounded-lg hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-500/40 transition"
-          href="/account/signup"
+          href="/auth/signup"
           type="button"
         >
           Create an account

inertia/pages/auth/signup.vue

@@ -6,7 +6,7 @@ import EmptyLayout from '~/pages/layout/emptyLayout.vue'
 defineOptions({ layout: EmptyLayout })
 
 const form = useForm({
-  fullName: '',
+  name: '',
   email: '',
   password: '',
   passwordConfirmation: '',
@@ -21,15 +21,15 @@ const form = useForm({
         <p class="text-sm text-gray-600 mt-2">Join PC Creator today</p>
       </div>
 
-      <Form route="account.signup" #default="{ processing, errors }">
+      <Form route="new_account.store" #default="{ processing, errors }">
         <div class="space-y-4 sm:space-y-6">
           <div>
             <label class="block">
               <span class="text-sm font-medium text-gray-700 mb-2 block">Full Name</span>
               <input
-                v-model="form.fullName"
+                v-model="form.name"
                 class="w-full px-3 sm:px-4 py-2 sm:py-3 border-2 border-gray-300 rounded-lg focus:border-indigo-600 focus:ring-2 focus:ring-indigo-500/40 transition text-base"
-                name="fullName"
+                name="name"
                 type="text"
                 placeholder="Enter your full name"
               />
@@ -86,7 +86,7 @@ const form = useForm({
           <div class="text-center mt-4">
             <p class="text-sm text-gray-600">
               Already have an account?
-              <Link route="auth.show_login" class="text-indigo-600 hover:text-indigo-700 font-semibold">
+              <Link route="session.create" class="text-indigo-600 hover:text-indigo-700 font-semibold">
                 Login
               </Link>
             </p>

inertia/pages/components/create.vue

@@ -1,20 +1,21 @@
 <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?: any[] }>()
+const props = defineProps<{ types: any[]; errors?: Record<string, string> }>()
-const errors = computed(() => props.errors || [])
+const errors = computed(() => props.errors || {})
 const form = reactive({
   name: '',
   price: 0,
-  type_id: null,
+  typeId: null,
-  purchase_date: new Date().toISOString().split('T')[0],
+  purchaseDate: new Date().toISOString().split('T')[0],
   quantity: 1,
 })
 
 function getErrorMessage(field: string): string | null {
-  const error = errors.value.find((error) => error.field === field)
+  return errors.value[field] || null
-  return error ? error.message : null
 }
 
 function formatDateForMySQL(date: string) {
@@ -59,17 +60,11 @@ function submitForm() {
 
       <div>
         <label class="block text-gray-700 text-sm font-bold mb-2" for="type">Type</label>
-        <select
+        <CustomSelect
-          name="type_id"
+          v-model="form.typeId"
-          v-model.number="form.type_id"
+          :options="types"
-          id="type"
+          placeholder="Choose a type"
-          class="w-full mt-2 border-gray-200 focus:border-indigo-600 focus:ring-indigo-500 px-3 py-2 focus:ring-1 border rounded text-gray-700 bg-white"
+        />
-        >
-          <option disabled :value="null">Choose a type</option>
-          <option v-for="type in types" :key="type.id" :value="type.id">
-            {{ type.name }}
-          </option>
-        </select>
       </div>
 
       <div>
@@ -77,8 +72,8 @@ function submitForm() {
           >Purchase Date</label
         >
         <input
-          name="purchase_date"
+          name="purchaseDate"
-          v-model="form.purchase_date"
+          v-model="form.purchaseDate"
           class="w-full mt-2 border-gray-200 focus:border-indigo-600 focus:ring focus:ring-indigo-500/40 border rounded text-gray-700 px-3 py-2"
           type="date"
         />

inertia/pages/components/edit.vue

@@ -1,28 +1,29 @@
 <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<{
   component: any
   types: any[]
   origin: string
-  errors?: any[]
+  errors?: Record<string, string>
 }>()
 const { component, types, origin } = props
-const errors = computed(() => props.errors || [])
+const errors = computed(() => props.errors || {})
 
 const form = reactive({
   id: component.id,
   name: component.name,
   price: component.price,
-  type_id: component.type.id,
+  typeId: component.type.id,
-  purchase_date: component.purchaseDate,
+  purchaseDate: component.purchaseDate,
   origin: origin,
 })
 
 function getErrorMessage(field: string): string | null {
-  const error = errors.value.find((error) => error.field === field)
+  return errors.value[field] || null
-  return error ? error.message : null
 }
 
 function formatDateForMySQL(date: string) {
@@ -61,16 +62,11 @@ function formatDateForMySQL(date: string) {
 
       <div>
         <label class="block text-gray-700 text-sm font-bold mb-2" for="type">Type</label>
-        <select
+        <CustomSelect
-          v-model="form.type_id"
+          v-model="form.typeId"
-          id="type"
+          :options="types"
-          class="w-full mt-2 border-gray-200 focus:border-indigo-600 focus:ring-indigo-500 px-3 py-2 focus:ring-1 border rounded text-gray-700 bg-white"
+          placeholder="Choose a type"
-        >
+        />
-          <option disabled :value="null">Choose a type</option>
-          <option v-for="type in types" :key="type.id" :value="type.id">
-            {{ type.name }}
-          </option>
-        </select>
       </div>
 
       <div>
@@ -78,8 +74,8 @@ function formatDateForMySQL(date: string) {
           >Purchase Date</label
         >
         <input
-          name="purchase_date"
+          name="purchaseDate"
-          v-model="form.purchase_date"
+          v-model="form.purchaseDate"
           class="w-full mt-2 border-gray-200 focus:border-indigo-600 focus:ring focus:ring-indigo-500/40 border rounded text-gray-700 px-3 py-2"
           type="date"
         />

inertia/pages/components/index.vue

@@ -1,12 +1,11 @@
 <script setup lang="ts">
-import { Link } from '@inertiajs/vue3'
+import { Link } from '@adonisjs/inertia/vue'
-
+import ComponentsViewer from '~/pages/widgets/ComponentsViewer.vue'
-defineProps<{ components: any[] }>()
 </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">
+    <ComponentsViewer />
-      <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>
   </div>
 </template>

inertia/pages/components/show.vue

@@ -1,53 +1,48 @@
 <script setup lang="ts">
-import { Link, usePage } from '@inertiajs/vue3'
+import { Link } from '@adonisjs/inertia/vue'
 
-const { props } = usePage<{ component: any }>()
+const props = defineProps<{ component: any }>()
-const { component } = props
-const originHeader = { 'X-Inertia-Origin': 'components' }
 </script>
 
 <template>
   <div class="max-w-2xl mx-auto p-8 bg-white shadow-lg rounded-lg">
     <h1 class="text-2xl font-semibold mb-8 text-gray-800">Component Details</h1>
 
+    <template v-if="props.component">
       <div class="mb-6">
-      <label class="block text-gray-700 text-sm font-bold mb-2" for="name">Name</label>
+        <label class="block text-gray-700 text-sm font-bold mb-2">Name</label>
-      <div class="px-3 py-2 border rounded text-gray-700" id="name">
+        <div class="px-3 py-2 border rounded text-gray-700">
-        {{ component.name }}
+          {{ props.component.name }}
         </div>
       </div>
 
       <div class="mb-6">
-      <label class="block text-gray-700 text-sm font-bold mb-2" for="price">Price</label>
+        <label class="block text-gray-700 text-sm font-bold mb-2">Price</label>
-      <div class="px-3 py-2 border rounded text-gray-700" id="price">${{ component.price }}</div>
+        <div class="px-3 py-2 border rounded text-gray-700">${{ props.component.price }}</div>
       </div>
 
       <div class="mb-6">
-      <label class="block text-gray-700 text-sm font-bold mb-2" for="type">Type</label>
+        <label class="block text-gray-700 text-sm font-bold mb-2">Type</label>
-      <div class="px-3 py-2 border rounded text-gray-700" id="type">
+        <div class="px-3 py-2 border rounded text-gray-700">
-        {{ component.type.name }}
+          {{ props.component.type?.name ?? 'N/A' }}
         </div>
       </div>
 
       <div class="mb-6">
-      <label class="block text-gray-700 text-sm font-bold mb-2" for="purchaseDate"
+        <label class="block text-gray-700 text-sm font-bold mb-2">Purchase Date</label>
-        >Purchase Date</label
+        <div class="px-3 py-2 border rounded text-gray-700">
-      >
+          {{ props.component.purchaseDate }}
-      <div class="px-3 py-2 border rounded text-gray-700" id="purchaseDate">
-        {{ component.purchaseDate }}
         </div>
       </div>
 
       <Link
-      :href="`/components/${component.id}/edit`"
+        :href="`/components/${props.component.id}/edit`"
         type="button"
         as="button"
         class="w-full md:w-auto px-4 py-2 bg-indigo-600 text-white rounded hover:bg-blue-700 transition text-center"
-      :headers="originHeader"
       >
         Edit
       </Link>
+    </template>
   </div>
 </template>
-
-<style scoped></style>

inertia/pages/computers/create.vue

@@ -1,14 +1,15 @@
 <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[]
   states: any[]
-  errors: any[]
+  errors: Record<string, string>
 }>()
 const { components, states } = props
-const errors = computed(() => props.errors || [])
+const errors = computed(() => props.errors || {})
 
 const componentTypeOrder = [
   'Processor',
@@ -49,8 +50,7 @@ const form = reactive({
 })
 
 function getErrorMessage(field: string): string | null {
-  const error = errors.value.find((error) => error.field === field)
+  return errors.value[field] || null
-  return error ? error.message : null
 }
 </script>
 

inertia/pages/computers/edit.vue

@@ -1,15 +1,16 @@
 <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
   availableComponents: any[]
   states: any[]
-  errors?: any[]
+  errors?: Record<string, string>
 }>()
 const { computer, availableComponents, states } = props
-const errors = computed(() => props.errors || [])
+const errors = computed(() => props.errors || {})
 
 const form = reactive({
   id: computer.id,
@@ -31,8 +32,7 @@ function deleteComputer(id: number) {
 }
 
 function getErrorMessage(field: string): string | null {
-  const error = errors.value.find((error) => error.field === field)
+  return errors.value[field] || null
-  return error ? error.message : null
 }
 </script>
 

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>
@@ -13,7 +13,7 @@ defineProps<{ computers: any[] }>()
         href="/computers/create"
         type="button"
         as="button"
-        class="px-4 py-2 bg-indigo-600 text-white rounded hover:bg-blue-700 transition"
+        class="inline-flex shrink-0 px-4 py-2 bg-indigo-600 text-white rounded hover:bg-blue-700 transition"
       >
         Add
       </Link>

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/defaultLayout.vue

@@ -4,14 +4,16 @@ import Header from './header.vue'
 </script>
 
 <template>
-  <div class="flex h-screen bg-gray-200 font-roboto">
+  <div class="flex h-screen bg-background font-body-md text-on-background overflow-hidden">
+    <aside class="w-64 shrink-0">
       <Sidebar />
+    </aside>
 
-    <div class="flex-1 flex flex-col overflow-hidden">
+    <div class="flex-1 flex flex-col min-w-0">
       <Header />
 
-      <main class="flex-1 overflow-x-hidden overflow-y-auto bg-gray-200">
+      <main class="flex-1 pt-16 min-h-screen border-0 overflow-auto">
-        <div class="container mx-auto px-6 py-8">
+        <div class="p-10 max-w-[1400px] mx-auto">
           <slot />
         </div>
       </main>

inertia/pages/layout/header.vue

@@ -1,17 +1,12 @@
 <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'
-import { useAdminMode } from '~/composables/isAdminMode'
 
 const dropdownOpen = ref(false)
 const { isOpen } = useSidebar()
-const { isAdminActive } = useAdminMode()
-
-function toggleActive() {
-  isAdminActive.value = !isAdminActive.value
-}
 
 const page = usePage()
 
@@ -22,35 +17,47 @@ const user = computed(() => {
 </script>
 
 <template>
-  <header class="flex items-center justify-between px-6 py-4 bg-white border-b-4 border-indigo-600">
+  <header
-    <div class="flex items-center">
+    class="flex justify-between items-center px-10 h-16 bg-white ml-64 w-[calc(100%-16rem)] fixed top-0 right-0 z-40 border-b border-outline-variant shadow-sm"
-      <button class="text-gray-500 focus:outline-none lg:hidden" @click="isOpen = true">
+  >
-        <svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <div
-          <path
+      class="flex items-center gap-4 bg-surface-container-low px-4 py-2 rounded-lg border border-outline-variant w-96 focus-within:ring-2 focus-within:ring-primary transition-all"
-            d="M4 6H20M4 12H20M4 18H11"
+    >
-            stroke="currentColor"
+      <span class="material-symbols-outlined text-on-surface-variant">search</span>
-            stroke-width="2"
+      <input
-            stroke-linecap="round"
+        class="bg-transparent border-none focus:ring-0 focus:outline-none text-body-sm font-body-sm w-full p-0"
-            stroke-linejoin="round"
+        placeholder="Search builds..."
+        type="text"
       />
-        </svg>
-      </button>
     </div>
 
-    <div class="flex items-center">
+    <div class="flex items-center gap-6">
-      <div class="relative">
       <button
-          class="relative z-10 block w-8 h-8 overflow-hidden rounded-full shadow focus:outline-none"
+        class="text-on-surface-variant hover:bg-surface-container-low p-2 rounded-full transition-all"
-          @click="dropdownOpen = !dropdownOpen"
       >
-          <img class="object-cover w-full h-full" :src="userProfileIcon" alt="Your avatar" />
+        <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"
+      >
+        <span class="material-symbols-outlined">settings</span>
       </button>
 
+      <div class="h-8 w-px bg-outline-variant mx-2"></div>
+
       <div
-          v-show="dropdownOpen"
+        class="relative flex items-center gap-3 cursor-pointer group"
-          class="fixed inset-0 z-10 w-full h-full"
+        @click="dropdownOpen = !dropdownOpen"
-          @click="dropdownOpen = false"
+      >
+        <div class="text-right hidden sm:block">
+          <p class="font-label-md text-label-md text-on-surface">{{ user.name }}</p>
+        </div>
+        <img
+          class="w-10 h-10 rounded-full border-2 border-primary-container group-hover:border-primary transition-all object-cover"
+          :src="userProfileIcon"
+          alt="Avatar"
         />
+      </div>
 
       <transition
         enter-active-class="transition duration-150 ease-out transform"
@@ -62,38 +69,30 @@ const user = computed(() => {
       >
         <div
           v-show="dropdownOpen"
-            class="absolute right-0 z-20 w-48 py-2 mt-2 bg-white rounded-md shadow-xl"
+          class="absolute top-14 right-0 z-50 min-w-48 max-w-72 bg-white rounded-lg shadow-xl border border-outline-variant overflow-hidden"
         >
-            <div class="flex items-center justify-between px-4 py-2 text-sm text-indigo-600">
+          <div class="px-4 py-3 border-b border-outline-variant">
-              <strong>{{ user.name }}</strong>
+            <p class="font-label-md text-label-md text-on-surface truncate">{{ user.name }}</p>
-            </div>
+            <p class="font-label-sm text-label-sm text-on-surface-variant truncate">
-            <hr />
+              {{ user.email }}
-
+            </p>
-            <div
-              class="flex items-center justify-between px-4 py-2 text-sm text-gray-700 hover:bg-indigo-600 hover:text-white cursor-pointer"
-              @click="toggleActive"
-            >
-              <span>{{ isAdminActive ? 'Admin' : 'Classic' }}</span>
-              <button
-                :class="{ 'bg-indigo-800': isAdminActive, 'bg-gray-200': !isAdminActive }"
-                class="w-10 h-5 rounded-full focus:outline-none relative"
-              >
-                <span
-                  :class="{ 'translate-x-5': isAdminActive, 'translate-x-0': !isAdminActive }"
-                  class="block w-4 h-4 bg-white rounded-full shadow transform transition duration-300"
-                ></span>
-              </button>
           </div>
 
           <Link
             href="/auth/logout"
-              class="block px-4 py-2 text-sm text-gray-700 hover:bg-indigo-600 hover:text-white"
+            class="flex items-center gap-3 px-4 py-2 text-body-sm font-body-sm text-on-surface hover:bg-surface-container-low transition-colors"
           >
-              Logout
+            <span class="material-symbols-outlined text-[20px]">logout</span>
+            Sign Out
           </Link>
         </div>
       </transition>
     </div>
-    </div>
   </header>
+
+  <div
+    v-show="dropdownOpen"
+    class="fixed inset-0 z-30"
+    @click="dropdownOpen = false"
+  />
 </template>

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()
@@ -14,7 +14,7 @@ console.log(route)
 </script>
 
 <template>
-  <div class="flex">
+  <div class="flex h-full">
     <!-- Backdrop -->
     <div
       :class="isOpen ? 'block' : 'hidden'"
@@ -25,7 +25,7 @@ console.log(route)
 
     <div
       :class="isOpen ? 'translate-x-0 ease-out' : '-translate-x-full ease-in'"
-      class="fixed inset-y-0 left-0 z-30 w-64 overflow-y-auto transition duration-300 transform bg-gray-900 lg:translate-x-0 lg:static lg:inset-0"
+      class="fixed inset-y-0 left-0 z-30 w-64 overflow-y-auto transition duration-300 transform bg-gray-900 lg:h-full lg:translate-x-0 lg:static lg:inset-0"
     >
       <div class="flex items-center justify-center mt-8">
         <div class="flex items-center">

inertia/pages/widgets/ComponentEditor.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { computed, defineEmits, defineProps, onMounted, ref, watch } from 'vue'
+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 type Component from '#models/component'
-import ComponentType from '#models/component_type'
+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 type Component from '#models/component'
-import { Link } from '@inertiajs/vue3'
+import { Link } from '@adonisjs/inertia/vue'
 
 const props = defineProps<{
   components: Component[]

inertia/pages/widgets/CustomSelect.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
+
+const props = defineProps<{
+  modelValue: number | null
+  options: { id: number; name: string }[]
+  placeholder?: string
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: number | null]
+}>()
+
+const isOpen = ref(false)
+const dropdownRef = ref<HTMLElement | null>(null)
+
+function handleClickOutside(e: MouseEvent) {
+  if (dropdownRef.value && !dropdownRef.value.contains(e.target as Node)) {
+    isOpen.value = false
+  }
+}
+
+onMounted(() => document.addEventListener('mousedown', handleClickOutside))
+onBeforeUnmount(() => document.removeEventListener('mousedown', handleClickOutside))
+
+const selectedLabel = computed(() => {
+  const selected = props.options.find((o) => o.id === props.modelValue)
+  return selected?.name ?? props.placeholder ?? 'Select...'
+})
+
+function select(id: number | null) {
+  emit('update:modelValue', id)
+  isOpen.value = false
+}
+</script>
+
+<template>
+  <div ref="dropdownRef" class="relative w-full">
+    <button
+      type="button"
+      class="w-full mt-2 border border-gray-200 focus:border-indigo-600 focus:ring-1 focus:ring-indigo-500 px-3 py-2 rounded text-gray-700 bg-white font-body-md text-left flex items-center justify-between"
+      @click="isOpen = !isOpen"
+    >
+      <span>{{ selectedLabel }}</span>
+      <svg class="w-4 h-4 text-gray-400 shrink-0" viewBox="0 0 20 20" fill="currentColor">
+        <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
+      </svg>
+    </button>
+
+    <ul
+      v-show="isOpen"
+      class="absolute z-50 w-full mt-1 bg-white border border-gray-200 rounded-lg shadow-lg max-h-60 overflow-auto"
+    >
+      <li
+        class="px-3 py-2 font-body-md text-sm cursor-pointer hover:bg-indigo-50 hover:text-indigo-700 transition-colors"
+        :class="{ 'text-gray-400': modelValue === null }"
+        @click="select(null)"
+      >
+        {{ placeholder ?? 'Select...' }}
+      </li>
+      <li
+        v-for="option in options"
+        :key="option.id"
+        class="px-3 py-2 font-body-md text-sm cursor-pointer hover:bg-indigo-50 hover:text-indigo-700 transition-colors"
+        :class="{ 'bg-indigo-50 text-indigo-700 font-medium': option.id === modelValue }"
+        @click="select(option.id)"
+      >
+        {{ option.name }}
+      </li>
+    </ul>
+  </div>
+</template>

inertia/pages/widgets/DeleteConfirmationModal.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { defineEmits, defineProps } from 'vue'
-
 defineProps<{ show: boolean }>()
 const emit = defineEmits(['confirm', 'cancel'])
 

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 type { NewImage, ServerImage } from '../../../app/types/UItypes'
-import { Image } from '~/pages/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[]

package-lock.json

@@ -1,11 +1,11 @@
 {
-  "name": "pc-builderV2",
+  "name": "pc-builder",
   "version": "0.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "pc-builderV2",
+      "name": "pc-builder",
       "version": "0.0.0",
       "license": "UNLICENSED",
       "dependencies": {

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "pc-builderV2",
+  "name": "pc-builder",
   "version": "0.0.0",
   "private": true,
   "type": "module",

resources/views/inertia_layout.edge

@@ -6,6 +6,17 @@
     <title inertia>
       AdonisJS
     </title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet" />
+    <style>
+      .material-symbols-outlined {
+        font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+        display: inline-block;
+        vertical-align: middle;
+      }
+    </style>
 
     @vite(['inertia/app.ts'])
     @inertiaHead()

tailwind.config.ts

@@ -6,7 +6,66 @@ export default {
     './inertia/**/*.vue',
   ],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        'primary': '#3525cd',
+        'on-primary': '#ffffff',
+        'primary-container': '#4f46e5',
+        'on-primary-container': '#dad7ff',
+        'secondary': '#565e74',
+        'on-secondary': '#ffffff',
+        'secondary-container': '#dae2fd',
+        'on-secondary-container': '#5c647a',
+        'tertiary': '#46494b',
+        'on-tertiary': '#ffffff',
+        'error': '#ba1a1a',
+        'on-error': '#ffffff',
+        'error-container': '#ffdad6',
+        'on-error-container': '#93000a',
+        'background': '#f8f9ff',
+        'on-background': '#0b1c30',
+        'surface': '#f8f9ff',
+        'on-surface': '#0b1c30',
+        'surface-variant': '#d3e4fe',
+        'on-surface-variant': '#464555',
+        'surface-dim': '#cbdbf5',
+        'surface-bright': '#f8f9ff',
+        'surface-container-lowest': '#ffffff',
+        'surface-container-low': '#eff4ff',
+        'surface-container': '#e5eeff',
+        'surface-container-high': '#dce9ff',
+        'surface-container-highest': '#d3e4fe',
+        'inverse-surface': '#213145',
+        'inverse-on-surface': '#eaf1ff',
+        'inverse-primary': '#c3c0ff',
+        'outline': '#777587',
+        'outline-variant': '#c7c4d8',
+        'surface-tint': '#4d44e3',
+      },
+      fontFamily: {
+        'headline-lg': ['Hanken Grotesk'],
+        'headline-md': ['Hanken Grotesk'],
+        'headline-xl': ['Hanken Grotesk'],
+        'body-lg': ['Inter'],
+        'body-md': ['Inter'],
+        'body-sm': ['Inter'],
+        'label-md': ['JetBrains Mono'],
+        'label-sm': ['JetBrains Mono'],
+      },
+      fontSize: {
+        'headline-lg': ['28px', { lineHeight: '36px', letterSpacing: '-0.01em', fontWeight: '600' }],
+        'headline-md': ['20px', { lineHeight: '28px', fontWeight: '600' }],
+        'headline-xl': ['36px', { lineHeight: '44px', letterSpacing: '-0.02em', fontWeight: '700' }],
+        'body-lg': ['18px', { lineHeight: '28px', fontWeight: '400' }],
+        'body-md': ['16px', { lineHeight: '24px', fontWeight: '400' }],
+        'body-sm': ['14px', { lineHeight: '20px', fontWeight: '400' }],
+        'label-md': ['14px', { lineHeight: '20px', letterSpacing: '0.02em', fontWeight: '500' }],
+        'label-sm': ['12px', { lineHeight: '16px', letterSpacing: '0.05em', fontWeight: '500' }],
+      },
+      spacing: {
+        'sidebar-width': '280px',
+      },
+    },
   },
   plugins: [],
 } satisfies Config