fix: add migration step in CI deploy

.adonisjs/client/registry/index.ts

@@ -38,8 +38,8 @@ const routes = {
   },
   'session.destroy': {
     methods: ["POST"],
-    pattern: '/logout',
+    pattern: '/auth/logout',
-    tokens: [{"old":"/logout","type":0,"val":"logout","end":""}],
+    tokens: [{"old":"/auth/logout","type":0,"val":"auth","end":""},{"old":"/auth/logout","type":0,"val":"logout","end":""}],
     types: placeholder as Registry['session.destroy']['types'],
   },
   'computers.index': {

.adonisjs/client/registry/schema.d.ts

@@ -69,7 +69,7 @@ export interface Registry {
   }
   'session.destroy': {
     methods: ["POST"]
-    pattern: '/logout'
+    pattern: '/auth/logout'
     types: {
       body: {}
       paramsTuple: []

.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']>
@@ -33,6 +32,7 @@ declare module '@adonisjs/inertia/types' {
     'widgets/ComputerCard': ExtractProps<(typeof import('../../inertia/pages/widgets/ComputerCard.vue'))['default']>
     'widgets/ComputerComponentsTable': ExtractProps<(typeof import('../../inertia/pages/widgets/ComputerComponentsTable.vue'))['default']>
     'widgets/ComputersViewer': ExtractProps<(typeof import('../../inertia/pages/widgets/ComputersViewer.vue'))['default']>
+    'widgets/CustomSelect': ExtractProps<(typeof import('../../inertia/pages/widgets/CustomSelect.vue'))['default']>
     'widgets/DeleteConfirmationModal': ExtractProps<(typeof import('../../inertia/pages/widgets/DeleteConfirmationModal.vue'))['default']>
     'widgets/SimpleGallery': ExtractProps<(typeof import('../../inertia/pages/widgets/SimpleGallery.vue'))['default']>
     'widgets/TableComponent': ExtractProps<(typeof import('../../inertia/pages/widgets/TableComponent.vue'))['default']>

.env.example

@@ -1,4 +1,4 @@
-# Node
+# Node
 TZ=UTC
 PORT=3333
 HOST=localhost
@@ -6,7 +6,7 @@ NODE_ENV=development
 
 # App
 LOG_LEVEL=info
-APP_KEY=hzjnqY1-CfioBl2N-mncw4hty_66rB7V
+APP_KEY=
 APP_URL=http://localhost:3333
 
 # Session
@@ -18,4 +18,4 @@ DB_HOST=127.0.0.1
 DB_PORT=3306
 DB_USER=admin
 DB_PASSWORD=password
-DB_DATABASE=pc_builderv2
+DB_DATABASE=pc_builderv2

.env.production

@@ -0,0 +1,5 @@
+APP_KEY=Z_CbQqpIxo4bGJ0WpqZkB3HoaLXvHf0J
+APP_URL=http://192.168.1.39:3333
+DB_PASSWORD=pcbuilder_secure_pass
+DB_DATABASE=pc_builder
+DB_USER=pcbuilder

.gitea/workflows/build.yml

@@ -36,11 +36,21 @@ jobs:
 
       - name: Build and push Docker image
         run: |
-          IMAGE=192.168.1.39:3000/${{ github.repository }}
+          IMAGE=192.168.1.39:3000/$(echo "${{ github.repository }}" | tr '[:upper:]' '[:lower:]')
           docker build -t ${IMAGE}:latest -t ${IMAGE}:${{ github.sha }} .
           docker push ${IMAGE}:latest
           docker push ${IMAGE}:${{ github.sha }}
 
-      - name: Trigger deploy
+      - name: Deploy on NAS
         run: |
-          curl -X POST http://192.168.1.39:9000/deploy || echo "Deploy webhook not reachable"
+          apk add --no-cache openssh-client sshpass
+          cat docker-compose.prod.yml | sshpass -p "${{ secrets.NASPASS }}" ssh -o StrictHostKeyChecking=no Stude12@192.168.1.39 "cat > /volume1/docker/pc_builder/docker-compose.prod.yml"
+          cat .env.production | sshpass -p "${{ secrets.NASPASS }}" ssh -o StrictHostKeyChecking=no Stude12@192.168.1.39 "cat > /volume1/docker/pc_builder/.env"
+          cat deploy/setup-db.sh | sshpass -p "${{ secrets.NASPASS }}" ssh -o StrictHostKeyChecking=no Stude12@192.168.1.39 "cat > /volume1/docker/pc_builder/setup-db.sh"
+          sshpass -p "${{ secrets.NASPASS }}" ssh -o StrictHostKeyChecking=no Stude12@192.168.1.39 "
+            cd /volume1/docker/pc_builder &&
+            echo '${{ secrets.NASPASS }}' | sudo -S /usr/bin/bash setup-db.sh &&
+            echo '${{ secrets.NASPASS }}' | sudo -S /usr/bin/docker compose -f docker-compose.prod.yml pull &&
+            echo '${{ secrets.NASPASS }}' | sudo -S /usr/bin/docker compose -f docker-compose.prod.yml up -d --remove-orphans &&
+            echo '${{ secrets.NASPASS }}' | sudo -S /usr/bin/docker exec pc-builder node ace migration:run --force
+          "

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()) })
-      .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() })
   }
 
   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(),
+      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()) })
   }
 
   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()), 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() })
   }
 
   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(), availableComponents: availableComponents.map((c) => c.serialize()), 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',

config/app.ts

@@ -1,4 +1,3 @@
-import app from '@adonisjs/core/services/app'
 import { defineConfig } from '@adonisjs/core/http'
 
 /**
@@ -66,7 +65,7 @@ export const http = defineConfig({
     /**
      * Send cookies only over HTTPS in production.
      */
-    secure: app.inProduction,
+    secure: false,
 
     /**
      * Cross-site policy for cookie sending.

config/session.ts

@@ -1,5 +1,4 @@
 import env from '#start/env'
-import app from '@adonisjs/core/services/app'
 import { defineConfig, stores } from '@adonisjs/session'
 
 const sessionConfig = defineConfig({
@@ -43,7 +42,7 @@ const sessionConfig = defineConfig({
     /**
      * Send cookies only over HTTPS in production.
      */
-    secure: app.inProduction,
+    secure: false,
 
     /**
      * Cross-site policy for cookie sending.

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 NpmUserSchema extends BaseModel {
+  static $columns = ['avatar', 'createdOn', 'email', 'id', 'isDeleted', 'isDisabled', 'modifiedOn', 'name', 'nickname', 'roles'] as const
+  $columns = NpmUserSchema.$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',
+      },
+    ])
+  }
+}

deploy/setup-db.sh

@@ -0,0 +1,14 @@
+#!/bin/bash
+MYSQL_CONTAINER=$(docker ps -q --filter ancestor=mysql:8 | head -1)
+if [ -z "$MYSQL_CONTAINER" ]; then
+  echo "❌ MySQL container not found"
+  exit 1
+fi
+echo "MySQL container: $MYSQL_CONTAINER"
+docker exec "$MYSQL_CONTAINER" mysql -u root -pnpm_root_password -e "
+  CREATE DATABASE IF NOT EXISTS pc_builder;
+  CREATE USER IF NOT EXISTS 'pcbuilder'@'%' IDENTIFIED BY 'pcbuilder_secure_pass';
+  GRANT ALL PRIVILEGES ON pc_builder.* TO 'pcbuilder'@'%';
+  FLUSH PRIVILEGES;
+"
+echo "✅ Database pc_builder created"

docker-compose.prod.yml

@@ -1,6 +1,6 @@
 services:
   pc-builder:
-    image: 192.168.1.39:3000/Stude12/pc_builder:latest
+    image: 192.168.1.39:3000/stude12/pc_builder:latest
     container_name: pc-builder
     restart: unless-stopped
     ports:
@@ -10,60 +10,20 @@ services:
       - PORT=3333
       - HOST=0.0.0.0
       - NODE_ENV=production
+      - LOG_LEVEL=info
       - APP_KEY=${APP_KEY}
       - APP_URL=${APP_URL}
       - SESSION_DRIVER=cookie
       - DB_CONNECTION=mysql
-      - DB_HOST=mysql
+      - DB_HOST=host.docker.internal
       - DB_PORT=3306
       - DB_USER=${DB_USER:-pcbuilder}
       - DB_PASSWORD=${DB_PASSWORD}
-      - DB_DATABASE=${DB_DATABASE:-pc_builderv2}
+      - DB_DATABASE=${DB_DATABASE:-pc_builder}
+    extra_hosts:
+      - "host.docker.internal:host-gateway"
     volumes:
       - uploads:/app/uploads
-    depends_on:
-      mysql:
-        condition: service_healthy
-    networks:
-      - pc-builder
-
-  mysql:
-    image: mysql/mysql-server:8.0.32
-    container_name: pc-builder-mysql
-    restart: unless-stopped
-    environment:
-      MYSQL_ROOT_PASSWORD: ${DB_ROOT_PASSWORD}
-      MYSQL_DATABASE: ${DB_DATABASE:-pc_builderv2}
-      MYSQL_USER: ${DB_USER:-pcbuilder}
-      MYSQL_PASSWORD: ${DB_PASSWORD}
-    volumes:
-      - mysql_data:/var/lib/mysql
-    healthcheck:
-      test: ['CMD', 'mysqladmin', 'ping', '-p${DB_ROOT_PASSWORD}']
-      retries: 10
-      timeout: 5s
-    networks:
-      - pc-builder
-
-  deployer:
-    build: ./deploy
-    container_name: pc-builder-deployer
-    restart: unless-stopped
-    ports:
-      - '9000:9000'
-    environment:
-      - COMPOSE_DIR=/app
-      - WEBHOOK_PORT=9000
-    volumes:
-      - /var/run/docker.sock:/var/run/docker.sock
-      - .:/app:ro
-    networks:
-      - pc-builder
 
 volumes:
-  mysql_data:
   uploads:
-
-networks:
-  pc-builder:
-    driver: bridge

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,39 +1,14 @@
 <script lang="ts" setup>
-import { Link, useForm } from '@inertiajs/vue3'
+import { Link } from '@adonisjs/inertia/vue'
-import { computed } from 'vue'
+import { useForm } from '@inertiajs/vue3'
 import EmptyLayout from '~/pages/layout/emptyLayout.vue'
 
 defineOptions({ layout: EmptyLayout })
 
-const props = defineProps<{ errors?: any[] | any }>()
-
-const vineErrors = computed(() => {
-  if (Array.isArray(props.errors)) {
-    return props.errors as any[]
-  }
-  return []
-})
-
-const authError = computed(() => {
-  if (!Array.isArray(props.errors) && props.errors) {
-    return props.errors as any
-  }
-  return null
-})
-
 const form = useForm({
   email: '',
   password: '',
 })
-
-function getErrorMessage(field: string): string | null {
-  const error = vineErrors.value.find((error) => error.field === field)
-  return error ? error.message : null
-}
-
-console.log(authError)
-console.log(vineErrors)
-console.log(props)
 </script>
 
 <template>
@@ -109,7 +84,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 }">
         <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,30 +1,18 @@
 <script setup lang="ts">
-import { computed, reactive } from 'vue'
+import { 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[] }>()
+defineProps<{ types: any[]; errors?: Record<string, string> }>()
-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 error ? error.message : null
-}
-
-function formatDateForMySQL(date: string) {
-  const d = new Date(date)
-  const year = d.getFullYear()
-  const month = String(d.getMonth() + 1).padStart(2, '0')
-  const day = String(d.getDate()).padStart(2, '0')
-  form.purchase_date = `${year}-${month}-${day}`
-}
-
 function submitForm() {
   const inertiaForm = useForm(form)
   inertiaForm.post('/components')
@@ -59,17 +47,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 +59,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,37 +1,25 @@
 <script setup lang="ts">
-import { computed, reactive } from 'vue'
+import { 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 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 error ? error.message : null
-}
-
-function formatDateForMySQL(date: string) {
-  const d = new Date(date)
-  const year = d.getFullYear()
-  const month = String(d.getMonth() + 1).padStart(2, '0')
-  const day = String(d.getDate()).padStart(2, '0')
-  form.purchase_date = `${year}-${month}-${day}`
-}
 </script>
 
 <template>
@@ -61,16 +49,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 +61,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>
 
-    <div class="mb-6">
+    <template v-if="props.component">
-      <label class="block text-gray-700 text-sm font-bold mb-2" for="name">Name</label>
+      <div class="mb-6">
-      <div class="px-3 py-2 border rounded text-gray-700" id="name">
+        <label class="block text-gray-700 text-sm font-bold mb-2">Name</label>
-        {{ component.name }}
+        <div class="px-3 py-2 border rounded text-gray-700">
+          {{ props.component.name }}
+        </div>
       </div>
-    </div>
 
-    <div class="mb-6">
+      <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>
-      <div class="px-3 py-2 border rounded text-gray-700" id="type">
-        {{ component.type.name }}
       </div>
-    </div>
 
-    <div class="mb-6">
+      <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">Type</label>
-        >Purchase Date</label
+        <div class="px-3 py-2 border rounded text-gray-700">
+          {{ props.component.type?.name ?? 'N/A' }}
+        </div>
+      </div>
+
+      <div class="mb-6">
+        <label class="block text-gray-700 text-sm font-bold mb-2">Purchase Date</label>
+        <div class="px-3 py-2 border rounded text-gray-700">
+          {{ props.component.purchaseDate }}
+        </div>
+      </div>
+
+      <Link
+        :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"
       >
-      <div class="px-3 py-2 border rounded text-gray-700" id="purchaseDate">
+        Edit
-        {{ component.purchaseDate }}
+      </Link>
-      </div>
+    </template>
-    </div>
-
-    <Link
-      :href="`/components/${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>
   </div>
 </template>
-
-<style scoped></style>

inertia/pages/computers/create.vue

@@ -1,14 +1,14 @@
 <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 componentTypeOrder = [
   'Processor',
@@ -47,11 +47,6 @@ const form = reactive({
   globalScore: 0,
   componentsId: [] as number[],
 })
-
-function getErrorMessage(field: string): string | null {
-  const error = errors.value.find((error) => error.field === field)
-  return error ? error.message : null
-}
 </script>
 
 <template>

inertia/pages/computers/edit.vue

@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import { computed, reactive } from 'vue'
+import { 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 { computer, states } = props
-const errors = computed(() => props.errors || [])
 
 const form = reactive({
   id: computer.id,
@@ -22,18 +22,9 @@ const form = reactive({
   componentsId: computer.components.map((c: any) => c.id),
 })
 
-function updateComponents(componentsId: number[]) {
-  form.componentsId = componentsId
-}
-
 function deleteComputer(id: number) {
   router.delete(`/computers/${id}`)
 }
-
-function getErrorMessage(field: string): string | null {
-  const error = errors.value.find((error) => error.field === field)
-  return error ? error.message : null
-}
 </script>
 
 <template>

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

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">
-    <Sidebar />
+    <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,10 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
-import { useSidebar } from '~/composables/useSidebar'
+import { Link } from '@adonisjs/inertia/vue'
-import { Link, usePage } from '@inertiajs/vue3'
+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,78 +15,83 @@ 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
-        <button
+        class="text-on-surface-variant hover:bg-surface-container-low p-2 rounded-full transition-all"
-          class="relative z-10 block w-8 h-8 overflow-hidden rounded-full shadow focus:outline-none"
+      >
-          @click="dropdownOpen = !dropdownOpen"
+        <span class="material-symbols-outlined">notifications</span>
-        >
+      </button>
-          <img class="object-cover w-full h-full" :src="userProfileIcon" alt="Your avatar" />
+      <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
+        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>
+        <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"
+        enter-from-class="scale-95 opacity-0"
+        enter-to-class="scale-100 opacity-100"
+        leave-active-class="transition duration-150 ease-in transform"
+        leave-from-class="scale-100 opacity-100"
+        leave-to-class="scale-95 opacity-0"
+      >
         <div
           v-show="dropdownOpen"
-          class="fixed inset-0 z-10 w-full h-full"
+          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"
-          @click="dropdownOpen = false"
-        />
-
-        <transition
-          enter-active-class="transition duration-150 ease-out transform"
-          enter-from-class="scale-95 opacity-0"
-          enter-to-class="scale-100 opacity-100"
-          leave-active-class="transition duration-150 ease-in transform"
-          leave-from-class="scale-100 opacity-100"
-          leave-to-class="scale-95 opacity-0"
         >
-          <div
+          <div class="px-4 py-3 border-b border-outline-variant">
-            v-show="dropdownOpen"
+            <p class="font-label-md text-label-md text-on-surface truncate">{{ user.name }}</p>
-            class="absolute right-0 z-20 w-48 py-2 mt-2 bg-white rounded-md shadow-xl"
+            <p class="font-label-sm text-label-sm text-on-surface-variant truncate">
-          >
+              {{ user.email }}
-            <div class="flex items-center justify-between px-4 py-2 text-sm text-indigo-600">
+            </p>
-              <strong>{{ user.name }}</strong>
-            </div>
-            <hr />
-
-            <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"
-            >
-              Logout
-            </Link>
           </div>
-        </transition>
+
-      </div>
+          <Link
+            href="/auth/logout"
+            method="post"
+            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"
+          >
+            <span class="material-symbols-outlined text-[20px]">logout</span>
+            Sign Out
+          </Link>
+        </div>
+      </transition>
     </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/types/UITypes.ts

@@ -1,6 +1,3 @@
-import { PageProps } from '@adonisjs/inertia/types'
-import { InertiaAppProps } from '@inertiajs/vue3/types/app'
-
 interface ComponentType {
   id: number
   name: string
@@ -39,13 +36,13 @@ export type Component = {
   type: ComponentType
 }
 
-interface ServerImage {
+export interface ServerImage {
   id: number
   link: string
   order: number
 }
 
-interface NewImage {
+export interface NewImage {
   file: File
   order: number
 }
@@ -63,15 +60,4 @@ export type UIAuthError = {
   message: string
 }
 
-interface SharedProps extends PageProps {
-  auth: {
-    user: {
-      id: number
-      name: string
-      email: string
-    }
-  }
-}
-
-export type PageWithSharedProps = InertiaAppProps<SharedProps>
 export type Image = ServerImage | NewImage

inertia/pages/widgets/AuthErrorAlert.vue

@@ -1,4 +1,10 @@
 <script setup lang="ts">
+type UIAuthError = {
+  status: number
+  code: string
+  message: string
+}
+
 defineProps<{
   authError?: UIAuthError
 }>()

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,7 @@
 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 { Image, NewImage, ServerImage } from '~/pages/types/UITypes'
-import { Image } from '~/pages/types/UITypes'
 
 const props = defineProps<{
   galleryId: string
@@ -134,12 +133,12 @@ function addImage() {
 
 function removeImage(image: Image) {
   if ('id' in image) {
-    const index = serverImages.value.findIndex((img) => img.id === image.id)
+    const index = serverImages.value.findIndex((img: ServerImage) => img.id === image.id)
     if (index !== -1) {
       serverImages.value.splice(index, 1)
     }
   } else {
-    const index = newImages.value.findIndex((img) => img.file === image.file)
+    const index = newImages.value.findIndex((img: NewImage) => img.file === image.file)
     if (index !== -1) {
       newImages.value.splice(index, 1)
     }

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()

start/env.ts

@@ -20,6 +20,7 @@ export default await Env.create(new URL('../', import.meta.url), {
 
   // App
   APP_KEY: Env.schema.secret(),
+  APP_URL: Env.schema.string(),
 
   // Session
   SESSION_DRIVER: Env.schema.enum(['cookie', 'memory', 'database'] as const),

start/routes.ts

@@ -30,6 +30,7 @@ router
   .group(() => {
     router.post('logout', [controllers.Session, 'destroy'])
   })
+  .prefix('/auth')
   .use(middleware.auth())
 
 router

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