fix: add migration step in CI deploy

Co-authored-by: openhands <openhands@all-hands.dev>

.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']>

.dockerignore

@@ -0,0 +1,7 @@
+node_modules
+.git
+build
+tmp
+coverage
+.env
+.env.test

.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

.env.production.example

@@ -0,0 +1,9 @@
+# App
+APP_KEY=change-me-to-a-random-string
+APP_URL=https://pc-builder.example.com
+
+# Database
+DB_ROOT_PASSWORD=change-me-root-password
+DB_USER=pcbuilder
+DB_PASSWORD=change-me-db-password
+DB_DATABASE=pc_builderv2

.gitea/workflows/build.yml

@@ -0,0 +1,56 @@
+name: Build & Deploy
+
+on:
+  push:
+    branches: [main, master]
+  pull_request:
+    branches: [main, master]
+
+jobs:
+  build:
+    runs-on: linux
+    container: node:24
+    steps:
+      - name: Checkout repository
+        run: git clone --depth=1 http://x-access-token:${{ github.token }}@192.168.1.39:3000/${{ github.repository }}.git .
+        with:
+          fetch-depth: 0
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build project
+        run: npm run build
+
+  docker:
+    needs: build
+    runs-on: dind
+    if: github.event_name == 'push' && github.ref == 'refs/heads/main'
+    steps:
+      - name: Checkout repository
+        run: git clone --depth=1 http://x-access-token:${{ github.token }}@192.168.1.39:3000/${{ github.repository }}.git .
+
+      - name: Login to Gitea Container Registry
+        run: |
+          echo "${{ secrets.token }}" | docker login http://192.168.1.39:3000 -u "${{ secrets.username }}" --password-stdin
+
+      - name: Build and push Docker image
+        run: |
+          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: Deploy on NAS
+        run: |
+          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
+          "

Dockerfile

@@ -0,0 +1,18 @@
+FROM node:24-alpine AS base
+RUN apk add --no-cache ffmpeg
+
+FROM base AS build
+WORKDIR /app
+COPY package*.json ./
+RUN npm ci
+COPY . .
+RUN npm run build
+
+FROM base AS production
+WORKDIR /app
+COPY package*.json ./
+RUN npm ci --omit=dev
+COPY --from=build /app/build ./
+RUN mkdir -p uploads
+EXPOSE 3333
+CMD ["node", "bin/server.js"]

README.md

@@ -1,2 +1,208 @@
-# pc_builder
+# PC Builder
 
+Une application web moderne pour construire et gérer des configurations PC personnalisées. Construite avec **AdonisJS** et **Vue.js** (Inertia).
+
+## 🎯 Fonctionnalités
+
+- **Gestion des composants** : Cataloguer et gérer les composants informatiques (CPU, GPU, RAM, etc.)
+- **Construction de PC** : Créer et configurer des ordinateurs personnalisés
+- **Galerie de photos** : Ajouter et gérer des images de vos configurations
+- **Authentification utilisateur** : Système d'inscription et de connexion sécurisé
+- **Interface réactive** : Interface utilisateur moderne avec Vue.js et Tailwind CSS
+
+## 📋 Prérequis
+
+- **Node.js** >= 18.0.0
+- **npm** ou **yarn**
+- **PostgreSQL** (ou autre base de données supportée)
+- **Docker** (optionnel, pour l'environnement de développement)
+
+## 🚀 Installation
+
+### 1. Cloner le repository
+
+```bash
+git clone http://192.168.1.39:3000/Stude12/pc_builder
+cd pc_builder
+```
+
+### 2. Installer les dépendances
+
+```bash
+npm install
+```
+
+### 3. Configuration de l'environnement
+
+Copier le fichier `.env.example` en `.env` et configurer vos variables :
+
+```bash
+cp .env.example .env
+```
+
+Éditer `.env` et configurer :
+- `DB_CONNECTION` : Type de base de données
+- `DB_HOST`, `DB_PORT`, `DB_USER`, `DB_PASSWORD`, `DB_DATABASE` : Connexion à la base
+- `APP_KEY` : Clé de chiffrement (générer avec `node ace generate:key`)
+
+### 4. Générer la clé d'application
+
+```bash
+node ace generate:key
+```
+
+### 5. Exécuter les migrations
+
+```bash
+node ace migration:run
+```
+
+### 6. Démarrer le serveur de développement
+
+```bash
+npm run dev
+```
+
+L'application sera disponible à `http://localhost:3333`
+
+## 🛠️ Scripts disponibles
+
+```bash
+# Développement avec hot reload
+npm run dev
+
+# Compilation pour la production
+npm run build
+
+# Serveur de production
+npm run start
+
+# Linter (ESLint)
+npm run lint
+
+# Tests
+npm run test
+
+# Vérifier les types TypeScript
+npm run typecheck
+```
+
+## 📁 Structure du projet
+
+```
+pc_builder/
+├── app/                          # Code métier
+│   ├── controllers/             # Contrôleurs des routes
+│   ├── models/                  # Modèles Lucid (ORM)
+│   ├── middleware/              # Middlewares
+│   ├── validators/              # Validateurs
+│   ├── services/                # Logique métier
+│   ├── exceptions/              # Exceptions personnalisées
+│   └── transformers/            # Transformeurs de données
+├── inertia/                     # Code frontend Vue.js
+│   ├── pages/                   # Pages Vue.js
+│   ├── components/              # Composants Vue.js réutilisables
+│   ├── layouts/                 # Layouts de pages
+│   ├── composables/             # Composables Vue.js
+│   ├── assets/                  # Images, icônes, CSS
+│   └── directives/              # Directives Vue.js personnalisées
+├── config/                      # Fichiers de configuration
+├── database/                    # Migrations et schema
+│   ├── migrations/              # Fichiers de migration
+│   └── schema.ts                # Schéma de la base de données
+├── start/                       # Points d'entrée de l'application
+├── public/                      # Fichiers publics statiques
+├── resources/                   # Templates Edge
+├── tests/                       # Tests unitaires et fonctionnels
+└── node_modules/                # Dépendances (ignorées par git)
+```
+
+## 🗄️ Modèles de données
+
+### User
+- Utilisateurs de l'application
+- Authentification et autorisation
+
+### Computer
+- Configurations PC
+- Associations avec les composants
+- Galerie de photos
+
+### Component
+- Composants informatiques
+- Classés par type (CPU, GPU, RAM, etc.)
+
+### ComputerState
+- État et historique des configurations
+
+### ComputerPicture
+- Images des configurations PC
+
+## 🔐 Sécurité
+
+- Validation CSRF sur tous les formulaires
+- Hachage sécurisé des mots de passe
+- Middleware d'authentification
+- Protection CORS configurée
+- Échappement des données XSS
+
+## 🧪 Tests
+
+```bash
+# Exécuter les tests
+npm run test
+
+# Tests avec couverture
+npm run test:coverage
+```
+
+## 📦 Déploiement
+
+### Avec Docker
+
+```bash
+# Construire l'image
+docker-compose build
+
+# Lancer les services
+docker-compose up -d
+```
+
+### Manuel
+
+1. Compiler le projet : `npm run build`
+2. Installer les dépendances de production : `npm ci --omit=dev`
+3. Démarrer l'application : `npm start`
+
+## 🤝 Contribution
+
+Les contributions sont bienvenues ! Voici le workflow :
+
+1. Créer une nouvelle branche : `git checkout -b feature/ma-feature`
+2. Faire vos modifications
+3. Commiter vos changements : `git commit -m "Add: description"`
+4. Pousser vers la branche : `git push origin feature/ma-feature`
+5. Ouvrir une Pull Request
+
+## 📝 Convention de commits
+
+- `feat:` Nouvelle fonctionnalité
+- `fix:` Correction de bug
+- `docs:` Documentation
+- `style:` Formatage, sans changement logique
+- `refactor:` Refactorisation de code
+- `test:` Ajout ou modification de tests
+- `chore:` Maintenance, dépendances
+
+## 📄 Licence
+
+Ce projet est sous licence MIT.
+
+## 📧 Support
+
+Pour toute question ou problème, veuillez ouvrir une issue sur le repository.
+
+---
+
+**Repository** : http://192.168.1.39:3000/Stude12/pc_builder  
+**Branche principale** : main

app/controllers/components_controller.ts

@@ -1,4 +1,5 @@
 import type { HttpContext } from '@adonisjs/core/http'
+import { DateTime } from 'luxon'
 import { storeComponentValidator } from '#validators/Components/store'
 import { updateComponentValidator } from '#validators/Components/update'
 import Component from '#models/component'
@@ -7,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) {
@@ -26,6 +25,7 @@ export default class ComponentsController {
     for (let i = 0; i < quantity; i++) {
       await Component.create({
         ...componentData,
+        purchaseDate: DateTime.fromFormat(componentData.purchaseDate, 'yyyy-MM-dd'),
         userId: user.id,
       })
     }
@@ -40,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) {
@@ -52,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) {
@@ -63,7 +66,10 @@ export default class ComponentsController {
       .where('userId', user.id)
       .andWhere('id', params.id)
       .firstOrFail()
-    component.merge(componentData)
+    component.merge({
+      ...componentData,
+      purchaseDate: DateTime.fromFormat(componentData.purchaseDate, 'yyyy-MM-dd'),
+    })
     await component.save()
     return response.redirect('/components')
   }

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/transformers/user_transformer.ts

@@ -1,9 +1,9 @@
-import { BaseModel } from '@adonisjs/lucid/orm'
+import type User from '#models/user'
 
 export default class UserTransformer {
   static exclude = ['password']
 
-  transform(user: BaseModel) {
+  static transform(user: typeof User.prototype) {
     return {
       id: user.id,
       name: user.name,

app/validators/Components/update.ts

@@ -0,0 +1,10 @@
+import vine from '@vinejs/vine'
+
+export const updateComponentValidator = vine.compile(
+  vine.object({
+    name: vine.string().trim().minLength(1),
+    price: vine.number().decimal([0, 2]).min(0),
+    typeId: vine.number().min(1),
+    purchaseDate: vine.string().regex(/^\d{4}-(0[1-9]|1[012])-(0[1-9]|[12][0-9]|3[01])$/),
+  })
+)

app/validators/Computers/store.ts

@@ -0,0 +1,14 @@
+import vine from '@vinejs/vine'
+
+export const storeComputerValidator = vine.compile(
+  vine.object({
+    title: vine.string().trim().minLength(1),
+    sellPrice: vine.number().decimal([0, 2]).min(0),
+    gpuScore: vine.number().min(0),
+    cpuScore: vine.number().min(0),
+    globalScore: vine.number().min(0),
+    stateId: vine.number().min(1),
+    componentsId: vine.array(vine.number()),
+    pictures: vine.array(vine.object({})),
+  })
+)

app/validators/Computers/update.ts

@@ -0,0 +1,14 @@
+import vine from '@vinejs/vine'
+
+export const updateComputerValidator = vine.compile(
+  vine.object({
+    title: vine.string().trim().minLength(1),
+    sellPrice: vine.number().decimal([0, 2]).min(0),
+    gpuScore: vine.number().min(0),
+    cpuScore: vine.number().min(0),
+    globalScore: vine.number().min(0),
+    stateId: vine.number().min(1),
+    componentsId: vine.array(vine.number()),
+    pictures: vine.array(vine.object({})),
+  })
+)

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/Dockerfile

@@ -0,0 +1,8 @@
+FROM alpine:3.19
+
+RUN apk add --no-cache docker-cli netcat-openbsd
+
+COPY deploy-webhook.sh /usr/local/bin/deploy-webhook.sh
+RUN chmod +x /usr/local/bin/deploy-webhook.sh
+
+ENTRYPOINT ["/usr/local/bin/deploy-webhook.sh"]

deploy/deploy-webhook.sh

@@ -0,0 +1,27 @@
+#!/bin/sh
+set -e
+
+COMPOSE_DIR="${COMPOSE_DIR:-/app}"
+WEBHOOK_PORT="${WEBHOOK_PORT:-9000}"
+
+cd "$COMPOSE_DIR"
+
+deploy() {
+  echo "[$(date)] Deploy triggered..."
+  docker compose pull
+  docker compose up -d --remove-orphans
+  echo "[$(date)] Deploy complete."
+}
+
+echo "=== PC Builder Deploy Webhook ==="
+echo "Compose dir: $COMPOSE_DIR"
+echo "Listening on port $WEBHOOK_PORT..."
+
+while true; do
+  # Netcat reads the HTTP request, we filter for POST /deploy
+  REQ=$(nc -l -p "$WEBHOOK_PORT" -q 1 2>/dev/null || true)
+  
+  if echo "$REQ" | grep -q "^POST /deploy"; then
+    deploy &
+  fi
+done

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

@@ -0,0 +1,29 @@
+services:
+  pc-builder:
+    image: 192.168.1.39:3000/stude12/pc_builder:latest
+    container_name: pc-builder
+    restart: unless-stopped
+    ports:
+      - '3333:3333'
+    environment:
+      - TZ=Europe/Paris
+      - 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=host.docker.internal
+      - DB_PORT=3306
+      - DB_USER=${DB_USER:-pcbuilder}
+      - DB_PASSWORD=${DB_PASSWORD}
+      - DB_DATABASE=${DB_DATABASE:-pc_builder}
+    extra_hosts:
+      - "host.docker.internal:host-gateway"
+    volumes:
+      - uploads:/app/uploads
+
+volumes:
+  uploads:

inertia/app.ts

@@ -1,14 +1,13 @@
 import './css/app.css'
 import 'vue-sonner/style.css'
 import { client } from '~/client'
-import Layout from '~/layouts/default.vue'
 import { createInertiaApp } from '@inertiajs/vue3'
 import { TuyauProvider } from '@adonisjs/inertia/vue'
 import { createApp, type DefineComponent, h } from 'vue'
 import { resolvePageComponent } from '@adonisjs/inertia/helpers'
 
-import DefaultLayout from '~/pages/layout/defaultLayout.vue'
+import DefaultLayout from './pages/layout/defaultLayout.vue'
-import EmptyLayout from '~/pages/layout/emptyLayout.vue'
+import EmptyLayout from './pages/layout/emptyLayout.vue'
 
 // directives
 // @ts-ignore

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/layouts/default.vue

@@ -1,70 +0,0 @@
-<script setup lang="ts">
-import { watch } from 'vue'
-import { usePage } from '@inertiajs/vue3'
-import { toast, Toaster } from 'vue-sonner'
-import type { Data } from '@generated/data'
-import { Link, Form } from '@adonisjs/inertia/vue'
-
-const page = usePage<Data.SharedProps>()
-
-watch(
-  () => page.url,
-  () => toast.dismiss()
-)
-
-watch(
-  () => page.props.flash,
-  (flashMessages) => {
-    if (flashMessages.error) {
-      toast.error(flashMessages.error)
-    }
-    if (flashMessages.success) {
-      toast.success(flashMessages.success)
-    }
-  },
-  { immediate: true }
-)
-</script>
-
-<template>
-  <header>
-    <div>
-      <div>
-        <Link route="home">
-          <svg
-            width="66"
-            height="24"
-            viewBox="0 0 105 38"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M0 0h7.5v15H0ZM7.5 15h7.5v15H7.5ZM15 30h7.5v7.5H15ZM22.5 15h7.5v15H22.5ZM30 0h7.5v15H30ZM45 0h7.5v30h15v-30h7.5v37.5h-30v-37.5ZM82.5 37.5V0H105v7.5H90V15h15v7.5H90V30h15v7.5H82.5Z"
-              fill="currentColor"
-            />
-          </svg>
-        </Link>
-      </div>
-      <div>
-        <nav>
-          <template v-if="page.props.user">
-            <span>{{ page.props.user.initials }}</span>
-            <Form route="session.destroy">
-              <button type="submit">Logout</button>
-            </Form>
-          </template>
-          <template v-else>
-            <Link route="new_account.create">Signup</Link>
-            <Link route="session.create">Login</Link>
-          </template>
-        </nav>
-      </div>
-    </div>
-  </header>
-
-  <main>
-    <slot />
-  </main>
-
-  <Toaster position="top-center" rich-colors />
-</template>

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": {
@@ -20,6 +20,7 @@
         "@adonisjs/vite": "^5.1.1",
         "@inertiajs/vue3": "^2.3.24",
         "@tuyau/core": "^1.2.2",
+        "@types/uuid": "^10.0.0",
         "@vinejs/vine": "^4.4.0",
         "@vue/server-renderer": "^3.5.35",
         "@vuepic/vue-datepicker": "^13.0.0",
@@ -28,6 +29,7 @@
         "luxon": "^3.7.2",
         "mysql2": "^3.22.4",
         "reflect-metadata": "^0.2.2",
+        "uuid": "^14.0.1",
         "vue": "^3.5.35",
         "vue-sonner": "^2.0.9",
         "vue3-carousel": "^0.17.0"
@@ -3115,6 +3117,12 @@
       "integrity": "sha512-JOqsl+ZoCpP4e8TDke9W79FDcSgPAR0l6pixx2JHkhnRjvShyYiAYw2LVsnA7K08Y6DeOnaU6ujmENO4os/cYg==",
       "license": "MIT"
     },
+    "node_modules/@types/uuid": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-10.0.0.tgz",
+      "integrity": "sha512-7gqG38EyHgyP1S+7+xomFtL+ZNHcKv6DwNaCZmJmo1vgMugyF3TCnXVg4t1uk89mLNwnLtnY3TpOpCOyp1/xHQ==",
+      "license": "MIT"
+    },
     "node_modules/@types/validator": {
       "version": "13.15.10",
       "resolved": "https://registry.npmjs.org/@types/validator/-/validator-13.15.10.tgz",
@@ -9679,6 +9687,19 @@
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
       "license": "MIT"
     },
+    "node_modules/uuid": {
+      "version": "14.0.1",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-14.0.1.tgz",
+      "integrity": "sha512-6ZxzVpzDXDa3bJWaHilVayA+BH/1zmxCJoVgvmqJnid/gPoKHxUrS/aC/T6LGQtNHT+XHG9fXPJB4d+IrU30Ew==",
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
+      "license": "MIT",
+      "bin": {
+        "uuid": "dist-node/bin/uuid"
+      }
+    },
     "node_modules/validate-npm-package-license": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "pc-builderV2",
+  "name": "pc-builder",
   "version": "0.0.0",
   "private": true,
   "type": "module",
@@ -27,6 +27,7 @@
     "#generated/*": "./.adonisjs/server/*.js",
     "#middleware/*": "./app/middleware/*.js",
     "#transformers/*": "./app/transformers/*.js",
+    "#types/*": "./types/*.js",
     "#validators/*": "./app/validators/*.js",
     "#providers/*": "./providers/*.js",
     "#policies/*": "./app/policies/*.js",
@@ -74,6 +75,7 @@
     "@adonisjs/vite": "^5.1.1",
     "@inertiajs/vue3": "^2.3.24",
     "@tuyau/core": "^1.2.2",
+    "@types/uuid": "^10.0.0",
     "@vinejs/vine": "^4.4.0",
     "@vue/server-renderer": "^3.5.35",
     "@vuepic/vue-datepicker": "^13.0.0",
@@ -82,6 +84,7 @@
     "luxon": "^3.7.2",
     "mysql2": "^3.22.4",
     "reflect-metadata": "^0.2.2",
+    "uuid": "^14.0.1",
     "vue": "^3.5.35",
     "vue-sonner": "^2.0.9",
     "vue3-carousel": "^0.17.0"

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

tsconfig.json

@@ -1,8 +1,6 @@
 {
   "extends": "@adonisjs/tsconfig/tsconfig.app.json",
   "compilerOptions": {
-    "rootDir": "./",
+    "outDir": "build"
-    "outDir": "./build"
+  }
-  },
-  "references": [{ "path": "./tsconfig.inertia.json" }]
 }

types/UItypes.ts

@@ -0,0 +1,12 @@
+interface ServerImage {
+  id: number
+  link: string
+  order: number
+}
+
+interface NewImage {
+  file: File
+  order: number
+}
+
+export type Image = ServerImage | NewImage