├── README.md
├── .browserslistrc
├── public
    └── favicon.ico
├── src
    ├── assets
    │   ├── logo.png
    │   ├── logo.svg
    │   └── theme.css
    ├── styles
    │   ├── README.md
    │   └── settings.scss
    ├── plugins
    │   ├── README.md
    │   ├── index.js
    │   └── vuetify.js
    ├── pages
    │   ├── README.md
    │   ├── plan
    │   │   └── [plan].vue
    │   ├── Settings.vue
    │   ├── Me.vue
    │   ├── Servers.vue
    │   └── index.vue
    ├── main.js
    ├── config
    │   └── sites.js
    ├── components
    │   ├── cart
    │   │   ├── CartHeader.vue
    │   │   ├── CartItemList.vue
    │   │   ├── ItemPricing.vue
    │   │   ├── AvailableCarts.vue
    │   │   ├── CartSection.vue
    │   │   ├── ActiveCartDisplay.vue
    │   │   ├── OSConfiguration.vue
    │   │   ├── CartItem.vue
    │   │   └── ConfigurationDetails.vue
    │   ├── README.md
    │   └── AppFooter.vue
    ├── router
    │   └── index.js
    └── App.vue
├── .editorconfig
├── .gitignore
├── index.html
├── jsconfig.json
├── eslint.config.js
├── .github
    └── workflows
    │   └── node.js.yml
├── package.json
└── vite.config.mjs


/README.md:
--------------------------------------------------------------------------------
1 | # OVH Cart
2 | 


--------------------------------------------------------------------------------
/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | not dead
4 | not ie 11
5 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/orvice/ovhcart/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/orvice/ovhcart/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/src/styles/README.md:
--------------------------------------------------------------------------------
1 | # Styles
2 | 
3 | This directory is for configuring the styles of the application.
4 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | [*.{js,jsx,ts,tsx,vue}]
2 | indent_style = space
3 | indent_size = 2
4 | trim_trailing_whitespace = true
5 | insert_final_newline = true
6 | 


--------------------------------------------------------------------------------
/src/plugins/README.md:
--------------------------------------------------------------------------------
1 | # Plugins
2 | 
3 | Plugins are a way to extend the functionality of your Vue application. Use this folder for registering plugins that you want to use globally.
4 | 


--------------------------------------------------------------------------------
/src/styles/settings.scss:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * src/styles/settings.scss
 3 |  *
 4 |  * Configures SASS variables and Vuetify overwrites
 5 |  */
 6 | 
 7 | // https://vuetifyjs.com/features/sass-variables/`
 8 | // @use 'vuetify/settings' with (
 9 | //   $color-pack: false
10 | // );
11 | 


--------------------------------------------------------------------------------
/src/pages/README.md:
--------------------------------------------------------------------------------
1 | # Pages
2 | 
3 | Vue components created in this folder will automatically be converted to navigatable routes.
4 | 
5 | Full documentation for this feature can be found in the Official [unplugin-vue-router](https://github.com/posva/unplugin-vue-router) repository.
6 | 


--------------------------------------------------------------------------------
/src/plugins/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * plugins/index.js
 3 |  *
 4 |  * Automatically included in `./src/main.js`
 5 |  */
 6 | 
 7 | // Plugins
 8 | import vuetify from './vuetify'
 9 | import router from '@/router'
10 | 
11 | export function registerPlugins (app) {
12 |   app
13 |     .use(vuetify)
14 |     .use(router)
15 | }
16 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | pnpm-debug.log*
14 | 
15 | # Editor directories and files
16 | .idea
17 | .vscode
18 | *.suo
19 | *.ntvs*
20 | *.njsproj
21 | *.sln
22 | *.sw?
23 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8">
 5 |     <link rel="icon" href="/favicon.ico">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Ovh Cart</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="app"></div>
11 |     <script type="module" src="/src/main.js"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * main.js
 3 |  *
 4 |  * Bootstraps Vuetify and other plugins then mounts the App`
 5 |  */
 6 | 
 7 | // Plugins
 8 | import { registerPlugins } from '@/plugins'
 9 | 
10 | // Components
11 | import App from './App.vue'
12 | 
13 | // Composables
14 | import { createApp } from 'vue'
15 | 
16 | const app = createApp(App)
17 | 
18 | registerPlugins(app)
19 | 
20 | app.mount('#app')
21 | 


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "allowJs": true,
 4 |     "target": "es5",
 5 |     "module": "esnext",
 6 |     "baseUrl": "./",
 7 |     "moduleResolution": "bundler",
 8 |     "paths": {
 9 |       "@/*": [
10 |         "src/*"
11 |       ]
12 |     },
13 |     "lib": [
14 |       "esnext",
15 |       "dom",
16 |       "dom.iterable",
17 |       "scripthost"
18 |     ]
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/src/plugins/vuetify.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * plugins/vuetify.js
 3 |  *
 4 |  * Framework documentation: https://vuetifyjs.com`
 5 |  */
 6 | 
 7 | // Styles
 8 | import '@mdi/font/css/materialdesignicons.css'
 9 | import 'vuetify/styles'
10 | 
11 | // Composables
12 | import { createVuetify } from 'vuetify'
13 | 
14 | // https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
15 | export default createVuetify({
16 |   theme: {
17 |     defaultTheme: 'dark',
18 |   },
19 | })
20 | 


--------------------------------------------------------------------------------
/eslint.config.js:
--------------------------------------------------------------------------------
 1 | import js from '@eslint/js'
 2 | import pluginVue from 'eslint-plugin-vue'
 3 | 
 4 | export default [
 5 |   {
 6 |     name: 'app/files-to-lint',
 7 |     files: ['**/*.{js,mjs,jsx,vue}'],
 8 |   },
 9 | 
10 |   {
11 |     name: 'app/files-to-ignore',
12 |     ignores: ['**/dist/**', '**/dist-ssr/**', '**/coverage/**'],
13 |   },
14 | 
15 |   js.configs.recommended,
16 |   ...pluginVue.configs['flat/recommended'],
17 | 
18 |   {
19 |     rules: {
20 |       'vue/multi-word-component-names': 'off',
21 |     },
22 |   }
23 | ]
24 | 


--------------------------------------------------------------------------------
/src/assets/logo.svg:
--------------------------------------------------------------------------------
1 | <svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M261.126 140.65L164.624 307.732L256.001 466L377.028 256.5L498.001 47H315.192L261.126 140.65Z" fill="#1697F6"/>
3 | <path d="M135.027 256.5L141.365 267.518L231.64 111.178L268.731 47H256H14L135.027 256.5Z" fill="#AEDDFF"/>
4 | <path d="M315.191 47C360.935 197.446 256 466 256 466L164.624 307.732L315.191 47Z" fill="#1867C0"/>
5 | <path d="M268.731 47C76.0026 47 141.366 267.518 141.366 267.518L268.731 47Z" fill="#7BC6FF"/>
6 | </svg>
7 | 


--------------------------------------------------------------------------------
/src/config/sites.js:
--------------------------------------------------------------------------------
 1 | export const availableSites = [
 2 |   { code: 'CZ', name: 'Czech Republic' },
 3 |   { code: 'DE', name: 'Germany' },
 4 |   { code: 'ES', name: 'Spain' },
 5 |   { code: 'EU', name: 'Europe' },
 6 |   { code: 'FI', name: 'Finland' },
 7 |   { code: 'FR', name: 'France' },
 8 |   { code: 'GB', name: 'United Kingdom' },
 9 |   { code: 'IE', name: 'Internationnal' },
10 |   { code: 'IT', name: 'Italy' },
11 |   { code: 'LT', name: 'Lithuania' },
12 |   { code: 'MA', name: 'Morocco' },
13 |   { code: 'NL', name: 'Netherlands' },
14 |   { code: 'PL', name: 'Poland' },
15 |   { code: 'PT', name: 'Portugal' },
16 |   { code: 'SN', name: 'Senegal' },
17 |   { code: 'TN', name: 'Tunisia' }
18 | ]
19 | 


--------------------------------------------------------------------------------
/src/components/cart/CartHeader.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-card-title class="text-h5 py-4 d-flex align-center">
 3 |     Shopping Cart
 4 |     <v-spacer></v-spacer>
 5 |     <v-btn
 6 |       color="success"
 7 |       variant="elevated"
 8 |       prepend-icon="mdi-cart-plus"
 9 |       @click="$emit('create-cart')"
10 |       :loading="creatingCart"
11 |       :disabled="!apiToken"
12 |     >
13 |       Create New Cart
14 |     </v-btn>
15 |   </v-card-title>
16 | </template>
17 | 
18 | <script setup>
19 | defineProps({
20 |   creatingCart: {
21 |     type: Boolean,
22 |     default: false
23 |   },
24 |   apiToken: {
25 |     type: String,
26 |     default: ''
27 |   }
28 | });
29 | 
30 | defineEmits(['create-cart']);
31 | </script>
32 | 


--------------------------------------------------------------------------------
/.github/workflows/node.js.yml:
--------------------------------------------------------------------------------
 1 | # This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
 2 | # For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs
 3 | 
 4 | name: Node.js CI
 5 | 
 6 | on:
 7 |   push:
 8 |     branches: [ "main" ]
 9 |   pull_request:
10 |     branches: [ "main" ]
11 | 
12 | jobs:
13 |   build:
14 | 
15 |     runs-on: ubuntu-latest
16 | 
17 |     strategy:
18 |       matrix:
19 |         node-version: [18.x, 20.x, 22.x]
20 |         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
21 | 
22 |     steps:
23 |     - uses: actions/checkout@v4
24 |     - name: Use Node.js ${{ matrix.node-version }}
25 |       uses: actions/setup-node@v4
26 |       with:
27 |         node-version: ${{ matrix.node-version }}
28 |         cache: 'npm'
29 |     - run: yarn
30 |     - run: yarn build
31 | 


--------------------------------------------------------------------------------
/src/components/README.md:
--------------------------------------------------------------------------------
 1 | # Components
 2 | 
 3 | Vue template files in this folder are automatically imported.
 4 | 
 5 | ## 🚀 Usage
 6 | 
 7 | Importing is handled by [unplugin-vue-components](https://github.com/unplugin/unplugin-vue-components). This plugin automatically imports `.vue` files created in the `src/components` directory, and registers them as global components. This means that you can use any component in your application without having to manually import it.
 8 | 
 9 | The following example assumes a component located at `src/components/MyComponent.vue`:
10 | 
11 | ```vue
12 | <template>
13 |   <div>
14 |     <MyComponent />
15 |   </div>
16 | </template>
17 | 
18 | <script lang="ts" setup>
19 |   //
20 | </script>
21 | ```
22 | 
23 | When your template is rendered, the component's import will automatically be inlined, which renders to this:
24 | 
25 | ```vue
26 | <template>
27 |   <div>
28 |     <MyComponent />
29 |   </div>
30 | </template>
31 | 
32 | <script lang="ts" setup>
33 |   import MyComponent from '@/components/MyComponent.vue'
34 | </script>
35 | ```
36 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ovhcart",
 3 |   "private": true,
 4 |   "type": "module",
 5 |   "version": "0.0.0",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "vite build",
 9 |     "preview": "vite preview",
10 |     "lint": "eslint . --fix"
11 |   },
12 |   "dependencies": {
13 |     "@mdi/font": "7.4.47",
14 |     "axios": "^1.8.4",
15 |     "roboto-fontface": "*",
16 |     "vue": "^3.4.31",
17 |     "vuetify": "^3.6.14"
18 |   },
19 |   "devDependencies": {
20 |     "@eslint/js": "^9.14.0",
21 |     "@vitejs/plugin-vue": "^5.0.5",
22 |     "eslint": "^9.14.0",
23 |     "eslint-plugin-import": "^2.29.1",
24 |     "eslint-plugin-n": "^16.6.2",
25 |     "eslint-plugin-node": "^11.1.0",
26 |     "eslint-plugin-promise": "^6.4.0",
27 |     "eslint-plugin-vue": "^9.30.0",
28 |     "sass": "1.77.8",
29 |     "sass-embedded": "^1.77.8",
30 |     "unplugin-fonts": "^1.1.1",
31 |     "unplugin-vue-components": "^28.4.1",
32 |     "unplugin-vue-router": "^0.10.0",
33 |     "vite": "^5.4.0",
34 |     "vite-plugin-vuetify": "^2.0.3",
35 |     "vue-router": "^4.4.0"
36 |   }
37 | }
38 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | 
 2 | /**
 3 |  * router/index.ts
 4 |  *
 5 |  * Automatic routes for `./src/pages/*.vue`
 6 |  */
 7 | 
 8 | // Composables
 9 | import { createRouter, createWebHistory } from 'vue-router/auto'
10 | import { routes } from 'vue-router/auto-routes'
11 | 
12 | const router = createRouter({
13 |   history: createWebHistory(import.meta.env.BASE_URL),
14 |   routes,
15 | })
16 | 
17 | // Workaround for https://github.com/vitejs/vite/issues/11804
18 | router.onError((err, to) => {
19 |   if (err?.message?.includes?.('Failed to fetch dynamically imported module')) {
20 |     if (!localStorage.getItem('vuetify:dynamic-reload')) {
21 |       console.log('Reloading page to fix dynamic import error')
22 |       localStorage.setItem('vuetify:dynamic-reload', 'true')
23 |       location.assign(to.fullPath)
24 |     } else {
25 |       console.error('Dynamic import error, reloading page did not fix it', err)
26 |     }
27 |   } else {
28 |     console.error(err)
29 |   }
30 | })
31 | 
32 | router.isReady().then(() => {
33 |   localStorage.removeItem('vuetify:dynamic-reload')
34 | })
35 | 
36 | export default router
37 | 


--------------------------------------------------------------------------------
/src/components/cart/CartItemList.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h3 class="text-subtitle-1 font-weight-bold mb-2">Cart Items</h3>
 4 |     <cart-item 
 5 |       v-for="(itemId, index) in items" 
 6 |       :key="index" 
 7 |       :item-id="itemId"
 8 |       :index="index"
 9 |       :item-details="itemDetails[itemId]"
10 |       :read-only="readOnly"
11 |       @remove-item="$emit('remove-item', itemId)"
12 |       @configure-datacenter="(datacenterCode) => $emit('configure-datacenter', { itemId, datacenterCode })"
13 |       @configure-os="(osCode) => $emit('configure-os', { itemId, osCode })"
14 |       @update-configuration="(label, value, configId) => $emit('update-configuration', { itemId, label, value, configId })"
15 |       @delete-configuration="(configId) => $emit('delete-configuration', { itemId, configId })"
16 |       @fetch-available-configurations="() => $emit('fetch-available-configurations', itemId)"
17 |     />
18 |   </div>
19 | </template>
20 | 
21 | <script setup>
22 | import CartItem from './CartItem.vue';
23 | 
24 | defineProps({
25 |   items: {
26 |     type: Array,
27 |     required: true
28 |   },
29 |   itemDetails: {
30 |     type: Object,
31 |     default: () => ({})
32 |   },
33 |   readOnly: {
34 |     type: Boolean,
35 |     default: false
36 |   }
37 | });
38 | 
39 | defineEmits([
40 |   'remove-item', 
41 |   'configure-datacenter',
42 |   'configure-os',
43 |   'update-configuration',
44 |   'delete-configuration',
45 |   'fetch-available-configurations'
46 | ]);
47 | </script>
48 | 


--------------------------------------------------------------------------------
/vite.config.mjs:
--------------------------------------------------------------------------------
 1 | // Plugins
 2 | import Components from 'unplugin-vue-components/vite'
 3 | import Vue from '@vitejs/plugin-vue'
 4 | import Vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
 5 | import ViteFonts from 'unplugin-fonts/vite'
 6 | import VueRouter from 'unplugin-vue-router/vite'
 7 | 
 8 | // Utilities
 9 | import { defineConfig } from 'vite'
10 | import { fileURLToPath, URL } from 'node:url'
11 | 
12 | // https://vitejs.dev/config/
13 | export default defineConfig({
14 |   plugins: [
15 |     VueRouter(),
16 |     Vue({
17 |       template: { transformAssetUrls }
18 |     }),
19 |     // https://github.com/vuetifyjs/vuetify-loader/tree/master/packages/vite-plugin#readme
20 |     Vuetify({
21 |       autoImport: true,
22 |       styles: {
23 |         configFile: 'src/styles/settings.scss',
24 |       },
25 |     }),
26 |     Components(),
27 |     ViteFonts({
28 |       google: {
29 |         families: [{
30 |           name: 'Roboto',
31 |           styles: 'wght@100;300;400;500;700;900',
32 |         }],
33 |       },
34 |     }),
35 |   ],
36 |   define: { 'process.env': {} },
37 |   resolve: {
38 |     alias: {
39 |       '@': fileURLToPath(new URL('./src', import.meta.url))
40 |     },
41 |     extensions: [
42 |       '.js',
43 |       '.json',
44 |       '.jsx',
45 |       '.mjs',
46 |       '.ts',
47 |       '.tsx',
48 |       '.vue',
49 |     ],
50 |   },
51 |   server: {
52 |     port: 3000,
53 |   },
54 |   css: {
55 |     preprocessorOptions: {
56 |       sass: {
57 |         api: 'modern-compiler',
58 |       },
59 |     },
60 |   },
61 | })
62 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-app :theme="theme">
 3 |     <v-main class="main-content">
 4 |       <router-view />
 5 |     </v-main>
 6 |   </v-app>
 7 | </template>
 8 | 
 9 | <script setup>
10 |   // Import the custom theme
11 |   import '@/assets/theme.css'
12 |   import { ref, onMounted, onUnmounted } from 'vue'
13 | 
14 |   const theme = ref('light')
15 | 
16 |   // Function to update theme based on system preference or stored value
17 |   const updateTheme = () => {
18 |     const savedTheme = localStorage.getItem('ovhTheme')
19 |     if (savedTheme === 'dark') {
20 |       theme.value = 'dark'
21 |       document.documentElement.setAttribute('data-theme', 'dark')
22 |     } else if (savedTheme === 'light') {
23 |       theme.value = 'light'
24 |       document.documentElement.setAttribute('data-theme', 'light')
25 |     } else {
26 |       // Auto mode - follow system preference
27 |       const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
28 |       theme.value = prefersDark ? 'dark' : 'light'
29 |       document.documentElement.setAttribute('data-theme', prefersDark ? 'dark' : 'light')
30 |     }
31 |   }
32 | 
33 |   // Watch for system color scheme changes
34 |   onMounted(() => {
35 |     updateTheme()
36 |     window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateTheme)
37 |   })
38 | 
39 |   // Clean up event listener
40 |   onUnmounted(() => {
41 |     window.matchMedia('(prefers-color-scheme: dark)').removeEventListener('change', updateTheme)
42 |   })
43 | </script>
44 | 
45 | <style>
46 | .main-content {
47 |   background-color: var(--background-color);
48 |   min-height: 100vh;
49 | }
50 | </style>
51 | 


--------------------------------------------------------------------------------
/src/components/cart/ItemPricing.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-col cols="12">
 3 |     <v-card variant="outlined" class="mt-2">
 4 |       <v-card-title class="text-subtitle-1">
 5 |         <v-icon icon="mdi-currency-eur" color="primary" class="mr-2"></v-icon>
 6 |         Pricing Summary
 7 |       </v-card-title>
 8 |       <v-card-text>
 9 |         <v-table density="compact">
10 |           <thead>
11 |             <tr>
12 |               <th>Description</th>
13 |               <th>Duration</th>
14 |               <th class="text-right">Price</th>
15 |             </tr>
16 |           </thead>
17 |           <tbody>
18 |             <tr v-for="(price, i) in prices" :key="i" :class="price.label === 'TOTAL' ? 'font-weight-bold' : ''">
19 |               <td>{{ price.description }}</td>
20 |               <td>{{ formatDuration(price.duration) }}</td>
21 |               <td class="text-right">{{ price.price.text }} {{ price.price.currencySymbol }}</td>
22 |             </tr>
23 |           </tbody>
24 |         </v-table>
25 |       </v-card-text>
26 |     </v-card>
27 |   </v-col>
28 | </template>
29 | 
30 | <script setup>
31 | defineProps({
32 |   prices: {
33 |     type: Array,
34 |     required: true
35 |   }
36 | });
37 | 
38 | // Function to format duration string
39 | const formatDuration = (duration) => {
40 |   if (!duration) return 'N/A';
41 |   
42 |   const match = duration.match(/P(?:(\d+)Y)?(?:(\d+)M)?(?:(\d+)D)?(?:T(?:(\d+)H)?(?:(\d+)M)?(?:(\d+)S)?)?/);
43 |   if (!match) return duration;
44 |   
45 |   const [_, years, months, days, hours, minutes, seconds] = match;
46 |   let result = [];
47 |   
48 |   if (years) result.push(`${years} ${parseInt(years) === 1 ? 'year' : 'years'}`);
49 |   if (months) result.push(`${months} ${parseInt(months) === 1 ? 'month' : 'months'}`);
50 |   if (days) result.push(`${days} ${parseInt(days) === 1 ? 'day' : 'days'}`);
51 |   if (hours) result.push(`${hours} ${parseInt(hours) === 1 ? 'hour' : 'hours'}`);
52 |   if (minutes) result.push(`${minutes} ${parseInt(minutes) === 1 ? 'minute' : 'minutes'}`);
53 |   if (seconds) result.push(`${seconds} ${parseInt(seconds) === 1 ? 'second' : 'seconds'}`);
54 |   
55 |   return result.length > 0 ? result.join(', ') : 'One-time';
56 | };
57 | </script>
58 | 


--------------------------------------------------------------------------------
/src/components/cart/AvailableCarts.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h3 class="text-subtitle-1 font-weight-bold mb-2">Available Carts</h3>
 4 |     <v-alert
 5 |       v-if="!cartItems || cartItems.length === 0"
 6 |       type="info"
 7 |       text="You don't have any carts yet. Create a new cart to start shopping."
 8 |       class="mb-2"
 9 |     ></v-alert>
10 |     
11 |     <v-table v-else density="compact">
12 |       <thead>
13 |         <tr>
14 |           <th>Cart ID</th>
15 |           <th>Description</th>
16 |           <th>Expiration</th>
17 |           <th>Items</th>
18 |           <th class="text-center">Actions</th>
19 |         </tr>
20 |       </thead>
21 |       <tbody>
22 |         <tr 
23 |           v-for="cart in cartItems" 
24 |           :key="cart.cartId"
25 |           :class="cart.cartId === activeCartId ? 'bg-primary bg-opacity-10' : ''"
26 |         >
27 |           <td>
28 |             <div class="d-flex align-center">
29 |               <v-icon
30 |                 v-if="cart.cartId === activeCartId"
31 |                 icon="mdi-check-circle"
32 |                 color="success"
33 |                 size="small"
34 |                 class="mr-1"
35 |               ></v-icon>
36 |               <span>{{ cart.cartId }}</span>
37 |             </div>
38 |           </td>
39 |           <td>{{ cart.description || 'No description' }}</td>
40 |           <td>{{ formatDate(cart.expire) }}</td>
41 |           <td>{{ cart.itemsCount || 0 }}</td>
42 |           <td class="text-center">
43 |             <v-btn
44 |               v-if="cart.cartId !== activeCartId"
45 |               color="primary"
46 |               variant="text"
47 |               size="small"
48 |               @click="$emit('set-active', cart.cartId)"
49 |               :disabled="!apiToken"
50 |             >
51 |               Set Active
52 |             </v-btn>
53 |             <v-chip
54 |               v-else
55 |               color="success"
56 |               size="small"
57 |             >
58 |               Active
59 |             </v-chip>
60 |           </td>
61 |         </tr>
62 |       </tbody>
63 |     </v-table>
64 |   </div>
65 | </template>
66 | 
67 | <script setup>
68 | defineProps({
69 |   cartItems: {
70 |     type: Array,
71 |     default: () => []
72 |   },
73 |   activeCartId: {
74 |     type: String,
75 |     default: ''
76 |   },
77 |   loading: {
78 |     type: Boolean,
79 |     default: false
80 |   },
81 |   apiToken: {
82 |     type: String,
83 |     default: ''
84 |   }
85 | });
86 | 
87 | defineEmits(['set-active']);
88 | 
89 | // Format date helper function
90 | const formatDate = (dateString) => {
91 |   if (!dateString) return 'Not set';
92 |   const date = new Date(dateString);
93 |   return date.toLocaleString();
94 | };
95 | </script>
96 | 


--------------------------------------------------------------------------------
/src/assets/theme.css:
--------------------------------------------------------------------------------
  1 | /* Theme variables */
  2 | :root[data-theme="light"] {
  3 |   --background-color: #f5f5f5;
  4 |   --text-color: #212121;
  5 |   --primary-color: #1976d2;
  6 |   --secondary-color: #424242;
  7 |   --accent-color: #82b1ff;
  8 |   --error-color: #ff5252;
  9 |   --success-color: #4caf50;
 10 |   --warning-color: #fb8c00;
 11 |   --info-color: #2196f3;
 12 |   --surface-color: #ffffff;
 13 |   --card-border-color: #e0e0e0;
 14 | }
 15 | 
 16 | :root[data-theme="dark"] {
 17 |   --background-color: #121212;
 18 |   --text-color: #e0e0e0;
 19 |   --primary-color: #2196f3;
 20 |   --secondary-color: #757575;
 21 |   --accent-color: #536dfe;
 22 |   --error-color: #ff5252;
 23 |   --success-color: #4caf50;
 24 |   --warning-color: #fb8c00;
 25 |   --info-color: #2196f3;
 26 |   --surface-color: #1e1e1e;
 27 |   --card-border-color: #424242;
 28 | }
 29 | 
 30 | /* Apply theme variables to Vuetify */
 31 | .v-application {
 32 |   background-color: var(--background-color) !important;
 33 |   color: var(--text-color) !important;
 34 | }
 35 | 
 36 | .v-main {
 37 |   background-color: var(--background-color) !important;
 38 | }
 39 | 
 40 | .v-card {
 41 |   background-color: var(--surface-color) !important;
 42 |   color: var(--text-color) !important;
 43 |   border-color: var(--card-border-color) !important;
 44 | }
 45 | 
 46 | /* Additional style overrides for dark/light themes can be added here */
 47 | 
 48 | /* List items */
 49 | .v-list-item {
 50 |   color: var(--text-color) !important;
 51 | }
 52 | 
 53 | .v-list {
 54 |   background-color: var(--surface-color) !important;
 55 |   color: var(--text-color) !important;
 56 | }
 57 | 
 58 | /* Buttons */
 59 | .v-btn.v-btn--variant-elevated {
 60 |   background-color: var(--primary-color) !important;
 61 |   color: var(--surface-color) !important;
 62 | }
 63 | 
 64 | /* Tables */
 65 | .v-table {
 66 |   background-color: var(--surface-color) !important;
 67 |   color: var(--text-color) !important;
 68 | }
 69 | 
 70 | /* Dialog */
 71 | .v-dialog .v-card {
 72 |   background-color: var(--surface-color) !important;
 73 |   color: var(--text-color) !important;
 74 | }
 75 | 
 76 | /* Inputs */
 77 | .v-field__field {
 78 |   color: var(--text-color) !important;
 79 | }
 80 | 
 81 | /* System preference dark mode listener */
 82 | @media (prefers-color-scheme: dark) {
 83 |   :root[data-theme="auto"] {
 84 |     --background-color: #121212;
 85 |     --text-color: #e0e0e0;
 86 |     --primary-color: #2196f3;
 87 |     --secondary-color: #757575;
 88 |     --accent-color: #536dfe;
 89 |     --error-color: #ff5252;
 90 |     --success-color: #4caf50;
 91 |     --warning-color: #fb8c00;
 92 |     --info-color: #2196f3;
 93 |     --surface-color: #1e1e1e;
 94 |     --card-border-color: #424242;
 95 |   }
 96 | }
 97 | 
 98 | @media (prefers-color-scheme: light) {
 99 |   :root[data-theme="auto"] {
100 |     --background-color: #f5f5f5;
101 |     --text-color: #212121;
102 |     --primary-color: #1976d2;
103 |     --secondary-color: #424242;
104 |     --accent-color: #82b1ff;
105 |     --error-color: #ff5252;
106 |     --success-color: #4caf50;
107 |     --warning-color: #fb8c00;
108 |     --info-color: #2196f3;
109 |     --surface-color: #ffffff;
110 |     --card-border-color: #e0e0e0;
111 |   }
112 | } 


--------------------------------------------------------------------------------
/src/components/AppFooter.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-footer height="40" app>
 3 |     <a
 4 |       v-for="item in items"
 5 |       :key="item.title"
 6 |       :href="item.href"
 7 |       :title="item.title"
 8 |       class="d-inline-block mx-2 social-link"
 9 |       rel="noopener noreferrer"
10 |       target="_blank"
11 |     >
12 |       <v-icon
13 |         :icon="item.icon"
14 |         :size="item.icon === '$vuetify' ? 24 : 16"
15 |       />
16 |     </a>
17 | 
18 |     <div
19 |       class="text-caption text-disabled"
20 |       style="position: absolute; right: 16px;"
21 |     >
22 |       &copy; 2016-{{ (new Date()).getFullYear() }} <span class="d-none d-sm-inline-block">Vuetify, LLC</span>
23 |       —
24 |       <a
25 |         class="text-decoration-none on-surface"
26 |         href="https://vuetifyjs.com/about/licensing/"
27 |         rel="noopener noreferrer"
28 |         target="_blank"
29 |       >
30 |         MIT License
31 |       </a>
32 |     </div>
33 |   </v-footer>
34 | </template>
35 | 
36 | <script setup>
37 |   const items = [
38 |     {
39 |       title: 'Vuetify Documentation',
40 |       icon: `$vuetify`,
41 |       href: 'https://vuetifyjs.com/',
42 |     },
43 |     {
44 |       title: 'Vuetify Support',
45 |       icon: 'mdi-shield-star-outline',
46 |       href: 'https://support.vuetifyjs.com/',
47 |     },
48 |     {
49 |       title: 'Vuetify X',
50 |       icon: ['M2.04875 3.00002L9.77052 13.3248L1.99998 21.7192H3.74882L10.5519 14.3697L16.0486 21.7192H22L13.8437 10.8137L21.0765 3.00002H19.3277L13.0624 9.76874L8.0001 3.00002H2.04875ZM4.62054 4.28821H7.35461L19.4278 20.4308H16.6937L4.62054 4.28821Z'],
51 |       href: 'https://x.com/vuetifyjs',
52 |     },
53 |     {
54 |       title: 'Vuetify GitHub',
55 |       icon: `mdi-github`,
56 |       href: 'https://github.com/vuetifyjs/vuetify',
57 |     },
58 |     {
59 |       title: 'Vuetify Discord',
60 |       icon: ['M22,24L16.75,19L17.38,21H4.5A2.5,2.5 0 0,1 2,18.5V3.5A2.5,2.5 0 0,1 4.5,1H19.5A2.5,2.5 0 0,1 22,3.5V24M12,6.8C9.32,6.8 7.44,7.95 7.44,7.95C8.47,7.03 10.27,6.5 10.27,6.5L10.1,6.33C8.41,6.36 6.88,7.53 6.88,7.53C5.16,11.12 5.27,14.22 5.27,14.22C6.67,16.03 8.75,15.9 8.75,15.9L9.46,15C8.21,14.73 7.42,13.62 7.42,13.62C7.42,13.62 9.3,14.9 12,14.9C14.7,14.9 16.58,13.62 16.58,13.62C16.58,13.62 15.79,14.73 14.54,15L15.25,15.9C15.25,15.9 17.33,16.03 18.73,14.22C18.73,14.22 18.84,11.12 17.12,7.53C17.12,7.53 15.59,6.36 13.9,6.33L13.73,6.5C13.73,6.5 15.53,7.03 16.56,7.95C16.56,7.95 14.68,6.8 12,6.8M9.93,10.59C10.58,10.59 11.11,11.16 11.1,11.86C11.1,12.55 10.58,13.13 9.93,13.13C9.29,13.13 8.77,12.55 8.77,11.86C8.77,11.16 9.28,10.59 9.93,10.59M14.1,10.59C14.75,10.59 15.27,11.16 15.27,11.86C15.27,12.55 14.75,13.13 14.1,13.13C13.46,13.13 12.94,12.55 12.94,11.86C12.94,11.16 13.45,10.59 14.1,10.59Z'],
61 |       href: 'https://community.vuetifyjs.com/',
62 |     },
63 |     {
64 |       title: 'Vuetify Reddit',
65 |       icon: `mdi-reddit`,
66 |       href: 'https://reddit.com/r/vuetifyjs',
67 |     },
68 |   ]
69 | </script>
70 | 
71 | <style scoped lang="sass">
72 |   .social-link :deep(.v-icon)
73 |     color: rgba(var(--v-theme-on-background), var(--v-disabled-opacity))
74 |     text-decoration: none
75 |     transition: .2s ease-in-out
76 | 
77 |     &:hover
78 |       color: rgba(25, 118, 210, 1)
79 | </style>
80 | 


--------------------------------------------------------------------------------
/src/components/cart/CartSection.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <cart-header 
  4 |       @create-cart="createCart" 
  5 |       :creating-cart="creatingCart" 
  6 |       :api-token="apiToken" 
  7 |     />
  8 |     
  9 |     <v-card-text>
 10 |       <div v-if="loading">
 11 |         <v-progress-circular indeterminate color="primary"></v-progress-circular>
 12 |         <span class="ml-2">Loading cart data...</span>
 13 |       </div>
 14 |       
 15 |       <v-alert
 16 |         v-else-if="error"
 17 |         type="error"
 18 |         title="Error"
 19 |         :text="error.message || 'Failed to load cart data'"
 20 |       ></v-alert>
 21 |       
 22 |       <v-alert
 23 |         v-if="!activeCartId && !loading && cartItems.length > 0"
 24 |         type="warning"
 25 |         text="No active cart selected. Please select one from below."
 26 |         class="mb-4"
 27 |       ></v-alert>
 28 |       
 29 |       <!-- Active Cart Section -->
 30 |       <active-cart-display 
 31 |         v-if="activeCartId && activeCartDetails" 
 32 |         :cart-details="activeCartDetails"
 33 |         :cart-item-details="cartItemDetails"
 34 |         :read-only="activeCartDetails.readOnly" 
 35 |         @refresh="fetchActiveCartDetails"
 36 |         @checkout="checkoutCart"
 37 |         @clear-cart="clearActiveCart"
 38 |       />
 39 |       
 40 |       <!-- Available Carts -->
 41 |       <available-carts
 42 |         :cart-items="cartItems"
 43 |         :active-cart-id="activeCartId"
 44 |         :loading="loading"
 45 |         :api-token="apiToken"
 46 |         @set-active="setActiveCart"
 47 |       />
 48 |     </v-card-text>
 49 |     
 50 |     <v-card-actions>
 51 |       <v-btn
 52 |         color="primary"
 53 |         variant="elevated"
 54 |         prepend-icon="mdi-refresh"
 55 |         @click="fetchCart"
 56 |         :loading="loading"
 57 |         :disabled="!apiToken"
 58 |       >
 59 |         Refresh Carts
 60 |       </v-btn>
 61 |     </v-card-actions>
 62 |   </div>
 63 | </template>
 64 | 
 65 | <script setup>
 66 | import { ref, computed, onMounted } from 'vue';
 67 | import CartHeader from './CartHeader.vue';
 68 | import ActiveCartDisplay from './ActiveCartDisplay.vue';
 69 | import AvailableCarts from './AvailableCarts.vue';
 70 | 
 71 | const props = defineProps({
 72 |   apiToken: {
 73 |     type: String,
 74 |     required: true
 75 |   },
 76 |   activeCartId: {
 77 |     type: String,
 78 |     default: ''
 79 |   },
 80 |   cartItems: {
 81 |     type: Array,
 82 |     default: () => []
 83 |   },
 84 |   activeCartDetails: {
 85 |     type: Object,
 86 |     default: null
 87 |   },
 88 |   cartItemDetails: {
 89 |     type: Object,
 90 |     default: () => ({})
 91 |   },
 92 |   loading: {
 93 |     type: Boolean,
 94 |     default: false
 95 |   },
 96 |   creatingCart: {
 97 |     type: Boolean,
 98 |     default: false
 99 |   },
100 |   error: {
101 |     type: Object,
102 |     default: null
103 |   }
104 | });
105 | 
106 | const emit = defineEmits([
107 |   'create-cart',
108 |   'fetch-cart',
109 |   'set-active-cart',
110 |   'clear-active-cart',
111 |   'fetch-active-cart-details',
112 |   'checkout-cart'
113 | ]);
114 | 
115 | const createCart = () => {
116 |   emit('create-cart');
117 | };
118 | 
119 | const fetchCart = () => {
120 |   emit('fetch-cart');
121 | };
122 | 
123 | const setActiveCart = (cartId) => {
124 |   emit('set-active-cart', cartId);
125 | };
126 | 
127 | const clearActiveCart = () => {
128 |   emit('clear-active-cart');
129 | };
130 | 
131 | const fetchActiveCartDetails = () => {
132 |   emit('fetch-active-cart-details');
133 | };
134 | 
135 | const checkoutCart = () => {
136 |   emit('checkout-cart');
137 | };
138 | 
139 | onMounted(() => {
140 |   if (props.apiToken) {
141 |     fetchCart();
142 |   }
143 | });
144 | </script>
145 | 


--------------------------------------------------------------------------------
/src/components/cart/ActiveCartDisplay.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="mb-6">
  3 |     <v-card variant="outlined" class="mb-4">
  4 |       <v-card-title>
  5 |         <div class="d-flex align-center">
  6 |           <span>Active Cart</span>
  7 |           <v-chip
  8 |             :color="cartDetails.readOnly ? 'error' : 'success'"
  9 |             size="small"
 10 |             class="ml-2"
 11 |           >
 12 |             {{ cartDetails.readOnly ? 'Read Only' : 'Active' }}
 13 |           </v-chip>
 14 |         </div>
 15 |       </v-card-title>
 16 |       <v-card-text>
 17 |         <v-row>
 18 |           <v-col cols="12" sm="6">
 19 |             <v-list-item>
 20 |               <template v-slot:prepend>
 21 |                 <v-icon icon="mdi-cart-outline" color="primary"></v-icon>
 22 |               </template>
 23 |               <v-list-item-title>Cart ID</v-list-item-title>
 24 |               <v-list-item-subtitle>{{ cartDetails.cartId }}</v-list-item-subtitle>
 25 |             </v-list-item>
 26 |           </v-col>
 27 |           <v-col cols="12" sm="6">
 28 |             <v-list-item>
 29 |               <template v-slot:prepend>
 30 |                 <v-icon icon="mdi-text-box-outline" color="primary"></v-icon>
 31 |               </template>
 32 |               <v-list-item-title>Description</v-list-item-title>
 33 |               <v-list-item-subtitle>{{ cartDetails.description || 'No description' }}</v-list-item-subtitle>
 34 |             </v-list-item>
 35 |           </v-col>
 36 |           <v-col cols="12" sm="6">
 37 |             <v-list-item>
 38 |               <template v-slot:prepend>
 39 |                 <v-icon icon="mdi-calendar-clock" color="primary"></v-icon>
 40 |               </template>
 41 |               <v-list-item-title>Expiration</v-list-item-title>
 42 |               <v-list-item-subtitle>{{ formatDate(cartDetails.expire) }}</v-list-item-subtitle>
 43 |             </v-list-item>
 44 |           </v-col>
 45 |           <v-col cols="12" sm="6">
 46 |             <v-list-item>
 47 |               <template v-slot:prepend>
 48 |                 <v-icon icon="mdi-package-variant-closed" color="primary"></v-icon>
 49 |               </template>
 50 |               <v-list-item-title>Items</v-list-item-title>
 51 |               <v-list-item-subtitle>{{ cartDetails.items?.length || 0 }} items</v-list-item-subtitle>
 52 |             </v-list-item>
 53 |           </v-col>
 54 |         </v-row>
 55 |         
 56 |         <!-- Cart Items Section -->
 57 |         <v-divider class="my-4"></v-divider>
 58 |         <cart-item-list 
 59 |           v-if="cartDetails && cartDetails.items && cartDetails.items.length > 0"
 60 |           :items="cartDetails.items"
 61 |           :item-details="cartItemDetails"
 62 |           :read-only="readOnly"
 63 |           @remove-item="$emit('remove-item', $event)"
 64 |           @configure-datacenter="$emit('configure-datacenter', $event.itemId, $event.datacenterCode)"
 65 |           @configure-os="$emit('configure-os', $event.itemId, $event.osCode)"
 66 |           @update-configuration="$emit('update-configuration', $event.itemId, $event.label, $event.value, $event.configId)"
 67 |           @delete-configuration="$emit('delete-configuration', $event.itemId, $event.configId)"
 68 |           @fetch-available-configurations="$emit('fetch-available-configurations', $event)"
 69 |         />
 70 |         <div v-else>
 71 |           <v-alert type="info" text="No items in this cart" class="mt-2"></v-alert>
 72 |         </div>
 73 |       </v-card-text>
 74 |       <v-card-actions>
 75 |         <v-btn
 76 |           color="primary"
 77 |           variant="text"
 78 |           prepend-icon="mdi-refresh"
 79 |           @click="$emit('refresh')"
 80 |           :disabled="loading"
 81 |         >
 82 |           Refresh
 83 |         </v-btn>
 84 |         <v-spacer></v-spacer>
 85 |         <v-btn
 86 |           v-if="!readOnly && cartDetails.items && cartDetails.items.length > 0"
 87 |           color="success"
 88 |           variant="elevated"
 89 |           prepend-icon="mdi-cart-check"
 90 |           @click="$emit('checkout')"
 91 |           :disabled="loading"
 92 |         >
 93 |           Checkout
 94 |         </v-btn>
 95 |         <v-btn
 96 |           color="error"
 97 |           variant="outlined"
 98 |           prepend-icon="mdi-cart-remove"
 99 |           @click="$emit('clear-cart')"
100 |           :disabled="loading"
101 |           class="ml-2"
102 |         >
103 |           Clear
104 |         </v-btn>
105 |       </v-card-actions>
106 |     </v-card>
107 |   </div>
108 | </template>
109 | 
110 | <script setup>
111 | import { ref } from 'vue';
112 | import CartItemList from './CartItemList.vue';
113 | 
114 | const props = defineProps({
115 |   cartDetails: {
116 |     type: Object,
117 |     required: true
118 |   },
119 |   cartItemDetails: {
120 |     type: Object,
121 |     default: () => ({})
122 |   },
123 |   readOnly: {
124 |     type: Boolean,
125 |     default: false
126 |   },
127 |   loading: {
128 |     type: Boolean,
129 |     default: false
130 |   }
131 | });
132 | 
133 | defineEmits([
134 |   'refresh', 
135 |   'checkout', 
136 |   'clear-cart',
137 |   'remove-item',
138 |   'configure-datacenter',
139 |   'configure-os',
140 |   'update-configuration',
141 |   'delete-configuration',
142 |   'fetch-available-configurations'
143 | ]);
144 | 
145 | // Format date helper function
146 | const formatDate = (dateString) => {
147 |   if (!dateString) return 'Not set';
148 |   const date = new Date(dateString);
149 |   return date.toLocaleString();
150 | };
151 | </script>
152 | 


--------------------------------------------------------------------------------
/src/components/cart/OSConfiguration.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <v-col cols="12" class="mt-2">
  3 |     <v-card variant="outlined">
  4 |       <v-card-title class="text-subtitle-1">
  5 |         <v-icon icon="mdi-server-network" color="primary" class="mr-2"></v-icon>
  6 |         Operating System Configuration
  7 |       </v-card-title>
  8 |       <v-card-text>
  9 |         <div v-if="loading" class="d-flex align-center">
 10 |           <v-progress-circular indeterminate size="16" width="2" color="primary" class="mr-2"></v-progress-circular>
 11 |           <span>Loading available operating systems...</span>
 12 |         </div>
 13 |         
 14 |         <div v-else-if="osError" class="text-error">
 15 |           <v-alert type="error" text="Failed to load OS configuration options" class="mb-2"></v-alert>
 16 |         </div>
 17 |         
 18 |         <div v-else>
 19 |           <div class="d-flex align-center mb-3">
 20 |             <div>
 21 |               <div class="text-subtitle-2 mb-1">Current OS</div>
 22 |               <div class="d-flex align-center">
 23 |                 <v-icon :icon="getOSIcon(currentOS?.family || '')" class="mr-2"></v-icon>
 24 |                 <span>{{ currentOS?.displayName || 'Not configured' }}</span>
 25 |               </div>
 26 |             </div>
 27 |             
 28 |             <v-spacer></v-spacer>
 29 |             
 30 |             <v-select
 31 |               v-if="!readOnly && availableOS.length > 0"
 32 |               v-model="selectedOS"
 33 |               :items="availableOS"
 34 |               item-title="displayName"
 35 |               item-value="code"
 36 |               label="Change OS"
 37 |               class="max-width-200"
 38 |               return-object
 39 |               :disabled="loading"
 40 |               hide-details
 41 |             >
 42 |               <template v-slot:item="{ item, props }">
 43 |                 <v-list-item v-bind="props" :subtitle="item.raw.family">
 44 |                   <template v-slot:prepend>
 45 |                     <v-icon :icon="getOSIcon(item.raw.family)" class="mr-2"></v-icon>
 46 |                   </template>
 47 |                 </v-list-item>
 48 |               </template>
 49 |             </v-select>
 50 |             
 51 |             <v-btn
 52 |               v-if="!readOnly && selectedOS && selectedOS.code !== currentOS?.code"
 53 |               color="primary"
 54 |               variant="text"
 55 |               size="small"
 56 |               :loading="applying"
 57 |               @click="applyOSChange"
 58 |               class="ml-2"
 59 |             >
 60 |               Apply
 61 |             </v-btn>
 62 |           </div>
 63 |         </div>
 64 |       </v-card-text>
 65 |     </v-card>
 66 |   </v-col>
 67 | </template>
 68 | 
 69 | <script setup>
 70 | import { ref, computed, watch } from 'vue';
 71 | 
 72 | const props = defineProps({
 73 |   itemId: {
 74 |     type: String,
 75 |     required: true
 76 |   },
 77 |   itemDetails: {
 78 |     type: Object,
 79 |     required: true
 80 |   },
 81 |   readOnly: {
 82 |     type: Boolean,
 83 |     default: false
 84 |   }
 85 | });
 86 | 
 87 | const emit = defineEmits(['configure-os']);
 88 | 
 89 | // State
 90 | const loading = ref(false);
 91 | const applying = ref(false);
 92 | const osError = ref(null);
 93 | const selectedOS = ref(null);
 94 | const availableOS = ref([]);
 95 | 
 96 | // Computed
 97 | const currentOS = computed(() => {
 98 |   if (!props.itemDetails || !props.itemDetails.configurations) return null;
 99 |   
100 |   // Find OS configuration
101 |   const osConfig = props.itemDetails.configurations.find(
102 |     config => config.label === 'os' || config.label === 'image' || config.label.includes('OS')
103 |   );
104 |   
105 |   if (!osConfig) return null;
106 |   
107 |   // Try to find the OS in the available list
108 |   if (availableOS.value.length > 0) {
109 |     const os = availableOS.value.find(os => os.code === osConfig.value);
110 |     if (os) return os;
111 |   }
112 |   
113 |   // If not found in the available list, return a basic representation
114 |   return {
115 |     code: osConfig.value,
116 |     displayName: osConfig.value,
117 |     family: 'unknown'
118 |   };
119 | });
120 | 
121 | // Watch for current OS changes to update the selected OS
122 | watch(currentOS, (newOS) => {
123 |   if (newOS && !selectedOS.value) {
124 |     selectedOS.value = newOS;
125 |   }
126 | });
127 | 
128 | // OS icon helper
129 | const getOSIcon = (family) => {
130 |   if (!family) return 'mdi-server';
131 |   
132 |   const lowercaseFamily = family.toLowerCase();
133 |   if (lowercaseFamily.includes('windows')) return 'mdi-microsoft-windows';
134 |   if (lowercaseFamily.includes('linux')) return 'mdi-linux';
135 |   if (lowercaseFamily.includes('ubuntu')) return 'mdi-ubuntu';
136 |   if (lowercaseFamily.includes('debian')) return 'mdi-debian';
137 |   if (lowercaseFamily.includes('centos')) return 'mdi-centos';
138 |   if (lowercaseFamily.includes('fedora')) return 'mdi-fedora';
139 |   if (lowercaseFamily.includes('freebsd')) return 'mdi-freebsd';
140 |   
141 |   return 'mdi-server';
142 | };
143 | 
144 | // Apply OS change
145 | const applyOSChange = async () => {
146 |   if (!selectedOS.value || selectedOS.value.code === currentOS.value?.code) return;
147 |   
148 |   applying.value = true;
149 |   try {
150 |     // Emit event to parent component to handle the change
151 |     emit('configure-os', selectedOS.value.code);
152 |   } catch (error) {
153 |     console.error('Failed to apply OS change:', error);
154 |     osError.value = error;
155 |   } finally {
156 |     applying.value = false;
157 |   }
158 | };
159 | </script>
160 | 
161 | <style scoped>
162 | .max-width-200 {
163 |   max-width: 200px;
164 | }
165 | </style>
166 | 


--------------------------------------------------------------------------------
/src/pages/plan/[plan].vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="plan-container">
  3 |     <div v-if="loading" class="loading">
  4 |       <p>Loading server availability...</p>
  5 |     </div>
  6 |     <div v-else-if="error" class="error">
  7 |       <p>{{ error }}</p>
  8 |     </div>
  9 |     <div v-else class="server-info">
 10 |       <h1>Server Plan: {{ planData.planCode }}</h1>
 11 |       
 12 |       <div class="server-specs">
 13 |         <div class="spec-item">
 14 |           <h3>Server</h3>
 15 |           <p>{{ planData.server }}</p>
 16 |         </div>
 17 |         <div class="spec-item">
 18 |           <h3>Memory</h3>
 19 |           <p>{{ planData.memory }}</p>
 20 |         </div>
 21 |         <div class="spec-item">
 22 |           <h3>Storage</h3>
 23 |           <p>{{ planData.storage }}</p>
 24 |         </div>
 25 |       </div>
 26 | 
 27 |       <h2>Datacenter Availability</h2>
 28 |       <div class="datacenter-grid">
 29 |         <div 
 30 |           v-for="dc in planData.datacenters" 
 31 |           :key="dc.datacenter"
 32 |           class="datacenter-card"
 33 |           :class="getAvailabilityClass(dc.availability)"
 34 |         >
 35 |           <h3>{{ dc.datacenter.toUpperCase() }}</h3>
 36 |           <p class="availability">{{ formatAvailability(dc.availability) }}</p>
 37 |         </div>
 38 |       </div>
 39 |     </div>
 40 |   </div>
 41 | </template>
 42 | 
 43 | <script>
 44 | import { ref, onMounted } from 'vue'
 45 | import { useRoute } from 'vue-router'
 46 | import axios from 'axios'
 47 | 
 48 | export default {
 49 |   name: 'PlanPage',
 50 |   setup() {
 51 |     const route = useRoute()
 52 |     const planCode = ref('')
 53 |     const planData = ref(null)
 54 |     const loading = ref(true)
 55 |     const error = ref(null)
 56 | 
 57 |     const fetchPlanData = async () => {
 58 |       loading.value = true
 59 |       error.value = null
 60 |       
 61 |       try {
 62 |         planCode.value = route.params.plan
 63 |         const response = await axios.get(
 64 |           `https://ca.ovh.com/engine/apiv6/dedicated/server/datacenter/availabilities/?excludeDatacenters=false&planCode=${planCode.value}`
 65 |         )
 66 |         
 67 |         if (response.data && response.data.length > 0) {
 68 |           planData.value = response.data[0]
 69 |         } else {
 70 |           error.value = 'No data available for this plan'
 71 |         }
 72 |       } catch (err) {
 73 |         console.error('Error fetching plan data:', err)
 74 |         error.value = 'Failed to load server data. Please try again later.'
 75 |       } finally {
 76 |         loading.value = false
 77 |       }
 78 |     }
 79 | 
 80 |     const getAvailabilityClass = (availability) => {
 81 |       if (availability.includes('high')) return 'high-availability'
 82 |       if (availability.includes('low')) return 'low-availability'
 83 |       if (availability === 'unavailable') return 'unavailable'
 84 |       return 'medium-availability'
 85 |     }
 86 | 
 87 |     const formatAvailability = (availability) => {
 88 |       if (availability === 'unavailable') return 'Unavailable'
 89 |       return availability
 90 |     }
 91 | 
 92 |     onMounted(() => {
 93 |       fetchPlanData()
 94 |     })
 95 | 
 96 |     return {
 97 |       planCode,
 98 |       planData,
 99 |       loading,
100 |       error,
101 |       getAvailabilityClass,
102 |       formatAvailability
103 |     }
104 |   }
105 | }
106 | </script>
107 | 
108 | <style scoped>
109 | :root {
110 |   --v-theme-on-surface-rgb: 0, 0, 0;
111 | }
112 | 
113 | .v-theme--dark {
114 |   --v-theme-on-surface-rgb: 255, 255, 255;
115 |   --v-theme-success-container: rgba(0, 200, 83, 0.12);
116 |   --v-theme-success-border: rgba(0, 200, 83, 0.2);
117 |   --v-theme-on-success-container: rgba(0, 200, 83, 0.87);
118 |   --v-theme-warning-container: rgba(255, 171, 0, 0.12);
119 |   --v-theme-warning-border: rgba(255, 171, 0, 0.2);
120 |   --v-theme-on-warning-container: rgba(255, 171, 0, 0.87);
121 |   --v-theme-error-container: rgba(244, 67, 54, 0.12);
122 |   --v-theme-error-border: rgba(244, 67, 54, 0.2);
123 |   --v-theme-on-error-container: rgba(244, 67, 54, 0.87);
124 | }
125 | .plan-container {
126 |   max-width: 1200px;
127 |   margin: 0 auto;
128 |   padding: 2rem;
129 |   color: var(--v-theme-on-background, inherit);
130 | }
131 | 
132 | .loading, .error {
133 |   text-align: center;
134 |   padding: 2rem;
135 |   font-size: 1.2rem;
136 | }
137 | 
138 | .error {
139 |   color: #e74c3c;
140 | }
141 | 
142 | .server-specs {
143 |   display: flex;
144 |   gap: 2rem;
145 |   margin: 2rem 0;
146 |   background-color: var(--v-theme-surface-variant, #f8f9fa);
147 |   padding: 1.5rem;
148 |   border-radius: 8px;
149 |   box-shadow: 0 2px 8px rgba(var(--v-theme-on-surface-rgb, 0, 0, 0), 0.05);
150 | }
151 | 
152 | .spec-item {
153 |   flex: 1;
154 | }
155 | 
156 | .spec-item h3 {
157 |   margin-bottom: 0.5rem;
158 |   color: var(--v-theme-primary, #555);
159 | }
160 | 
161 | .datacenter-grid {
162 |   display: grid;
163 |   grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
164 |   gap: 1.5rem;
165 |   margin-top: 1.5rem;
166 | }
167 | 
168 | .datacenter-card {
169 |   padding: 1.5rem;
170 |   border-radius: 8px;
171 |   text-align: center;
172 |   box-shadow: 0 2px 8px rgba(var(--v-theme-on-surface-rgb, 0, 0, 0), 0.1);
173 |   transition: transform 0.2s ease, box-shadow 0.2s ease;
174 | }
175 | 
176 | .datacenter-card:hover {
177 |   transform: translateY(-3px);
178 |   box-shadow: 0 4px 12px rgba(var(--v-theme-on-surface-rgb, 0, 0, 0), 0.15);
179 | }
180 | 
181 | .datacenter-card h3 {
182 |   margin-bottom: 0.5rem;
183 | }
184 | 
185 | .high-availability {
186 |   background-color: var(--v-theme-success-container, #d4edda);
187 |   border: 1px solid var(--v-theme-success-border, #c3e6cb);
188 |   color: var(--v-theme-on-success-container, #155724);
189 | }
190 | 
191 | .medium-availability {
192 |   background-color: var(--v-theme-warning-container, #fff3cd);
193 |   border: 1px solid var(--v-theme-warning-border, #ffeeba);
194 |   color: var(--v-theme-on-warning-container, #856404);
195 | }
196 | 
197 | .low-availability {
198 |   background-color: var(--v-theme-error-container, #f8d7da);
199 |   border: 1px solid var(--v-theme-error-border, #f5c6cb);
200 |   color: var(--v-theme-on-error-container, #721c24);
201 | }
202 | 
203 | .unavailable {
204 |   background-color: var(--v-theme-surface, #e9ecef);
205 |   border: 1px solid var(--v-theme-outline, #dee2e6);
206 |   color: var(--v-theme-on-surface-variant, #6c757d);
207 | }
208 | 
209 | .availability {
210 |   font-weight: bold;
211 |   font-size: 1.1rem;
212 | }
213 | </style>


--------------------------------------------------------------------------------
/src/components/cart/CartItem.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <v-card class="mb-4" variant="outlined">
  3 |     <v-card-item>
  4 |       <v-card-title>
  5 |         <div class="d-flex align-center">
  6 |           <span>Item #{{ index + 1 }}</span>
  7 |           <v-chip
  8 |             v-if="itemDetails"
  9 |             :color="getItemStatusColor(itemDetails)"
 10 |             size="small"
 11 |             class="ml-2"
 12 |           >
 13 |             {{ itemDetails?.status || 'Loading...' }}
 14 |           </v-chip>
 15 |         </div>
 16 |       </v-card-title>
 17 |       
 18 |       <v-card-text>
 19 |         <div v-if="!itemDetails" class="d-flex align-center">
 20 |           <v-progress-circular indeterminate size="20" width="2" color="primary" class="mr-2"></v-progress-circular>
 21 |           <span>Loading item details...</span>
 22 |         </div>
 23 |         
 24 |         <v-row v-else>
 25 |           <v-col cols="12" sm="6">
 26 |             <v-card-title>{{ itemDetails?.description || itemDetails?.planCode }}</v-card-title>
 27 |             <v-card-subtitle v-if="itemDetails?.description && itemDetails?.planCode">{{ itemDetails?.planCode }}</v-card-subtitle>
 28 |             
 29 |             <v-chip
 30 |               v-if="itemDetails?.settings?.quantity"
 31 |               color="primary"
 32 |               size="small"
 33 |               class="mt-2"
 34 |               prepend-icon="mdi-numeric"
 35 |             >
 36 |               Quantity: {{ itemDetails?.settings?.quantity }}
 37 |             </v-chip>
 38 |             
 39 |             <v-list density="compact" class="mt-2">
 40 |               <v-list-item>
 41 |                 <template v-slot:prepend>
 42 |                   <v-icon icon="mdi-card-bulleted-outline" color="primary"></v-icon>
 43 |                 </template>
 44 |                 <v-list-item-title>Product</v-list-item-title>
 45 |                 <v-list-item-subtitle>{{ getProductName(itemDetails?.productId) }}</v-list-item-subtitle>
 46 |               </v-list-item>
 47 |             </v-list>
 48 |           </v-col>
 49 |           
 50 |           <v-col cols="12" sm="6">
 51 |             <v-list density="compact">
 52 |               <v-list-item v-if="itemDetails?.prices">
 53 |                 <template v-slot:prepend>
 54 |                   <v-icon icon="mdi-currency-eur" color="primary"></v-icon>
 55 |                 </template>
 56 |                 <v-list-item-title>Price</v-list-item-title>
 57 |                 <v-list-item-subtitle>{{ getItemPrice(itemDetails) }}</v-list-item-subtitle>
 58 |               </v-list-item>
 59 |               
 60 |               <v-list-item>
 61 |                 <template v-slot:prepend>
 62 |                   <v-icon icon="mdi-cog-outline" color="primary"></v-icon>
 63 |                 </template>
 64 |                 <v-list-item-title>Settings</v-list-item-title>
 65 |                 <v-list-item-subtitle>{{ itemDetails?.configurations?.length || 0 }} configurations</v-list-item-subtitle>
 66 |               </v-list-item>
 67 |             </v-list>
 68 |           </v-col>
 69 |         </v-row>
 70 | 
 71 |         <!-- Item sections -->
 72 |         <v-row v-if="itemDetails">
 73 |           <!-- Pricing summary section if there are prices -->
 74 |           <item-pricing 
 75 |             v-if="itemDetails?.prices && itemDetails?.prices.length > 0" 
 76 |             :prices="itemDetails.prices" 
 77 |           />
 78 |           
 79 |           <!-- OS configuration section -->
 80 |           <os-configuration 
 81 |             :item-id="itemId"
 82 |             :item-details="itemDetails"
 83 |             :read-only="readOnly"
 84 |             @configure-os="$emit('configure-os', $event)"
 85 |           />
 86 |           
 87 |           <!-- Configuration details section -->
 88 |           <configuration-details
 89 |             :item-id="itemId"
 90 |             :item-details="itemDetails"
 91 |             :read-only="readOnly"
 92 |             @update-configuration="$emit('update-configuration', $event.label, $event.value, $event.configId)"
 93 |             @delete-configuration="$emit('delete-configuration', $event)"
 94 |             @fetch-available-configurations="$emit('fetch-available-configurations')"
 95 |           />
 96 |         </v-row>
 97 |         
 98 |         <!-- Action buttons -->
 99 |         <v-card-actions v-if="itemDetails && !readOnly">
100 |           <v-btn
101 |             color="error"
102 |             variant="text"
103 |             prepend-icon="mdi-delete"
104 |             @click="$emit('remove-item')"
105 |           >
106 |             Remove from Cart
107 |           </v-btn>
108 |         </v-card-actions>
109 |       </v-card-text>
110 |     </v-card-item>
111 |   </v-card>
112 | </template>
113 | 
114 | <script setup>
115 | import { ref } from 'vue';
116 | import ItemPricing from './ItemPricing.vue';
117 | import OSConfiguration from './OSConfiguration.vue';
118 | import ConfigurationDetails from './ConfigurationDetails.vue';
119 | 
120 | const props = defineProps({
121 |   itemId: {
122 |     type: String,
123 |     required: true
124 |   },
125 |   index: {
126 |     type: Number,
127 |     required: true
128 |   },
129 |   itemDetails: {
130 |     type: Object,
131 |     default: null
132 |   },
133 |   readOnly: {
134 |     type: Boolean,
135 |     default: false
136 |   }
137 | });
138 | 
139 | defineEmits([
140 |   'remove-item',
141 |   'configure-datacenter',
142 |   'configure-os',
143 |   'update-configuration',
144 |   'delete-configuration',
145 |   'fetch-available-configurations'
146 | ]);
147 | 
148 | // Helper functions
149 | const getItemStatusColor = (item) => {
150 |   if (!item || !item.status) return 'grey';
151 |   switch (item.status.toLowerCase()) {
152 |     case 'delivered': return 'success';
153 |     case 'delivering': return 'info';
154 |     case 'todeliver': return 'info';
155 |     case 'waiting_start': return 'warning';
156 |     case 'error': return 'error';
157 |     default: return 'grey';
158 |   }
159 | };
160 | 
161 | const getItemPrice = (item) => {
162 |   if (!item || !item.prices || item.prices.length === 0) return 'N/A';
163 |   
164 |   // Find the total price
165 |   const totalPrice = item.prices.find(p => p.label === 'TOTAL');
166 |   if (totalPrice) {
167 |     return `${totalPrice.price.text} ${totalPrice.price.currencySymbol}`;
168 |   }
169 |   
170 |   // If no total, just return the first price
171 |   return `${item.prices[0].price.text} ${item.prices[0].price.currencySymbol}`;
172 | };
173 | 
174 | const getProductName = (productId) => {
175 |   if (!productId) return 'Unknown';
176 |   
177 |   // Map product IDs to readable names
178 |   const productMap = {
179 |     'dedicated': 'Dedicated Server',
180 |     'cloud': 'Cloud Instance',
181 |     'vps': 'Virtual Private Server',
182 |     'baremetal': 'Baremetal Server',
183 |     'hosting': 'Web Hosting'
184 |   };
185 |   
186 |   // Try to extract a product category from the ID
187 |   for (const [key, value] of Object.entries(productMap)) {
188 |     if (productId.toLowerCase().includes(key)) {
189 |       return value;
190 |     }
191 |   }
192 |   
193 |   // If no match, return a cleaned-up version of the ID
194 |   return productId.replace(/^.*\./, '').replace(/\./g, ' ');
195 | };
196 | </script>
197 | 


--------------------------------------------------------------------------------
/src/components/cart/ConfigurationDetails.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <v-col cols="12">
  3 |     <v-card variant="outlined" class="mt-2">
  4 |       <v-card-title class="text-subtitle-1 d-flex align-center">
  5 |         <v-icon icon="mdi-cog" color="primary" class="mr-2"></v-icon>
  6 |         Configuration Details
  7 |         <v-spacer></v-spacer>
  8 |         <v-btn
  9 |           v-if="!readOnly"
 10 |           color="primary"
 11 |           variant="text"
 12 |           size="small"
 13 |           prepend-icon="mdi-refresh"
 14 |           @click="$emit('fetch-available-configurations')"
 15 |         >
 16 |           Refresh Configs
 17 |         </v-btn>
 18 |       </v-card-title>
 19 |       
 20 |       <v-card-text>
 21 |         <div v-if="!itemDetails?.configurationDetails || itemDetails?.configurationDetails.length === 0">
 22 |           <v-alert
 23 |             type="info"
 24 |             density="compact"
 25 |             text="No additional configuration details available"
 26 |             class="mb-2"
 27 |           ></v-alert>
 28 |         </div>
 29 |         
 30 |         <div v-else>
 31 |           <v-list density="compact">
 32 |             <v-list-item v-for="(config, i) in itemDetails.configurations" :key="i">
 33 |               <div class="d-flex align-center w-100">
 34 |                 <div>
 35 |                   <v-list-item-title>{{ config.label }}</v-list-item-title>
 36 |                   <v-list-item-subtitle>{{ config.value }}</v-list-item-subtitle>
 37 |                 </div>
 38 |                 <v-spacer></v-spacer>
 39 |                 <v-btn
 40 |                   v-if="!readOnly"
 41 |                   icon="mdi-pencil"
 42 |                   size="small"
 43 |                   color="primary"
 44 |                   variant="text"
 45 |                   @click="openEditDialog(config)"
 46 |                 ></v-btn>
 47 |                 <v-btn
 48 |                   v-if="!readOnly && !isRequiredConfig(config.label)"
 49 |                   icon="mdi-delete"
 50 |                   size="small"
 51 |                   color="error"
 52 |                   variant="text"
 53 |                   @click="$emit('delete-configuration', config.id)"
 54 |                 ></v-btn>
 55 |               </div>
 56 |             </v-list-item>
 57 |           </v-list>
 58 |         </div>
 59 |         
 60 |         <!-- Add new configuration -->
 61 |         <div class="mt-4" v-if="!readOnly">
 62 |           <v-divider class="mb-2"></v-divider>
 63 |           <v-row>
 64 |             <v-col cols="12">
 65 |               <v-select
 66 |                 v-model="newConfigType"
 67 |                 :items="configTypes"
 68 |                 label="Add Configuration"
 69 |                 item-title="label"
 70 |                 item-value="type"
 71 |                 return-object
 72 |                 hide-details
 73 |                 class="mb-2"
 74 |               >
 75 |                 <template v-slot:item="{ item, props }">
 76 |                   <v-list-item v-bind="props">
 77 |                     <template v-slot:prepend>
 78 |                       <v-icon :icon="getConfigIcon(item.raw.type)" color="primary"></v-icon>
 79 |                     </template>
 80 |                   </v-list-item>
 81 |                 </template>
 82 |               </v-select>
 83 |             </v-col>
 84 |             <v-col cols="12" sm="8">
 85 |               <v-text-field
 86 |                 v-model="newConfigValue"
 87 |                 :label="newConfigType ? `Enter ${newConfigType.label} value` : 'Value'"
 88 |                 :disabled="!newConfigType"
 89 |                 hide-details
 90 |               ></v-text-field>
 91 |             </v-col>
 92 |             <v-col cols="12" sm="4" class="d-flex align-center">
 93 |               <v-btn
 94 |                 color="primary"
 95 |                 variant="text"
 96 |                 block
 97 |                 @click="addNewConfig"
 98 |                 :disabled="!newConfigType || !newConfigValue"
 99 |               >
100 |                 Add Configuration
101 |               </v-btn>
102 |             </v-col>
103 |           </v-row>
104 |         </div>
105 |       </v-card-text>
106 |     </v-card>
107 | 
108 |     <!-- Edit Configuration Dialog -->
109 |     <v-dialog v-model="showEditDialog" max-width="500">
110 |       <v-card>
111 |         <v-card-title>
112 |           Edit Configuration
113 |         </v-card-title>
114 |         <v-card-text>
115 |           <v-text-field
116 |             v-model="editConfig.label"
117 |             label="Configuration Key"
118 |             disabled
119 |           ></v-text-field>
120 |           <v-text-field
121 |             v-model="editConfig.value"
122 |             label="Configuration Value"
123 |             autofocus
124 |           ></v-text-field>
125 |         </v-card-text>
126 |         <v-card-actions>
127 |           <v-spacer></v-spacer>
128 |           <v-btn color="grey" variant="text" @click="showEditDialog = false">
129 |             Cancel
130 |           </v-btn>
131 |           <v-btn color="primary" @click="saveConfigEdit">
132 |             Save
133 |           </v-btn>
134 |         </v-card-actions>
135 |       </v-card>
136 |     </v-dialog>
137 |   </v-col>
138 | </template>
139 | 
140 | <script setup>
141 | import { ref, computed } from 'vue';
142 | 
143 | const props = defineProps({
144 |   itemId: {
145 |     type: String,
146 |     required: true
147 |   },
148 |   itemDetails: {
149 |     type: Object,
150 |     required: true
151 |   },
152 |   readOnly: {
153 |     type: Boolean,
154 |     default: false
155 |   }
156 | });
157 | 
158 | const emit = defineEmits([
159 |   'update-configuration',
160 |   'delete-configuration',
161 |   'fetch-available-configurations'
162 | ]);
163 | 
164 | // State
165 | const showEditDialog = ref(false);
166 | const editConfig = ref({ label: '', value: '', id: null });
167 | const newConfigType = ref(null);
168 | const newConfigValue = ref('');
169 | 
170 | // Common configuration types
171 | const configTypes = ref([
172 |   { type: 'hostname', label: 'Hostname' },
173 |   { type: 'domain', label: 'Domain' },
174 |   { type: 'ssh_key', label: 'SSH Key' },
175 |   { type: 'language', label: 'Language' },
176 |   { type: 'custom', label: 'Custom' }
177 | ]);
178 | 
179 | // Helper to check if a config is required and can't be deleted
180 | const isRequiredConfig = (label) => {
181 |   const requiredConfigs = ['os', 'datacenter', 'hostname', 'domain'];
182 |   return requiredConfigs.includes(label.toLowerCase());
183 | };
184 | 
185 | // Helper to get icon for config types
186 | const getConfigIcon = (type) => {
187 |   const iconMap = {
188 |     'hostname': 'mdi-server',
189 |     'domain': 'mdi-web',
190 |     'ssh_key': 'mdi-key',
191 |     'language': 'mdi-translate',
192 |     'custom': 'mdi-cog'
193 |   };
194 |   return iconMap[type] || 'mdi-cog';
195 | };
196 | 
197 | // Open edit dialog
198 | const openEditDialog = (config) => {
199 |   editConfig.value = { ...config };
200 |   showEditDialog.value = true;
201 | };
202 | 
203 | // Save config edit
204 | const saveConfigEdit = () => {
205 |   if (editConfig.value.label && editConfig.value.value) {
206 |     emit('update-configuration', editConfig.value.label, editConfig.value.value, editConfig.value.id);
207 |     showEditDialog.value = false;
208 |   }
209 | };
210 | 
211 | // Add new config
212 | const addNewConfig = () => {
213 |   if (newConfigType.value && newConfigValue.value) {
214 |     const label = newConfigType.value.type === 'custom' 
215 |       ? prompt('Enter custom configuration name:', '') 
216 |       : newConfigType.value.type;
217 |       
218 |     if (label) {
219 |       emit('update-configuration', label, newConfigValue.value, null);
220 |       newConfigType.value = null;
221 |       newConfigValue.value = '';
222 |     }
223 |   }
224 | };
225 | </script>
226 | 


--------------------------------------------------------------------------------
/src/pages/Settings.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <v-card-title class="text-h5 py-4">Settings</v-card-title>
  4 |     <v-card-text>
  5 |       <v-form @submit.prevent="saveSettings">
  6 |         <v-text-field
  7 |           v-model="localApiToken"
  8 |           label="OVH API Token"
  9 |           type="password"
 10 |           hint="Your OVH API token will be stored locally"
 11 |           placeholder="Enter your OVH API token"
 12 |           persistent-hint
 13 |           :rules="[v => !!v || 'Token is required']"
 14 |           class="mb-4"
 15 |         ></v-text-field>
 16 | 
 17 |         <v-alert
 18 |           type="info"
 19 |           variant="tonal"
 20 |           class="mb-4"
 21 |           density="compact"
 22 |         >
 23 |           <div class="d-flex align-center">
 24 |             <span>Get your API token from:</span>
 25 |             <v-btn
 26 |               variant="text"
 27 |               color="info"
 28 |               href="https://eu.api.ovh.com/console/?section=%2Forder&branch=v1#get-/order/cart"
 29 |               target="_blank"
 30 |               class="ml-1"
 31 |               density="compact"
 32 |             >
 33 |               OVH API Console
 34 |               <v-icon icon="mdi-open-in-new" size="small" class="ml-1"></v-icon>
 35 |             </v-btn>
 36 |           </div>
 37 |         </v-alert>
 38 | 
 39 |         <v-select
 40 |           v-model="localSelectedSite"
 41 |           label="OVH Subsidiary for Cart Creation"
 42 |           :items="availableSites"
 43 |           hint="Select your OVH region for cart creation (ovhSubsidiary)"
 44 |           persistent-hint
 45 |           item-title="name"
 46 |           item-value="code"
 47 |           return-object
 48 |           class="mb-4"
 49 |         >
 50 |           <template v-slot:selection="{ item }">
 51 |             <div class="d-flex align-center">
 52 |               <v-avatar size="24" class="me-2">
 53 |                 <v-img :src="getCountryFlag(item?.raw?.code)" alt="Country flag"></v-img>
 54 |               </v-avatar>
 55 |               {{ item?.raw?.name || 'Select site' }} {{ item?.raw?.code ? `(${item.raw.code})` : '' }}
 56 |             </div>
 57 |           </template>
 58 | 
 59 |           <template v-slot:item="{ item, props }">
 60 |             <v-list-item v-bind="props">
 61 |               <template v-slot:prepend>
 62 |                 <v-avatar size="24">
 63 |                   <v-img :src="getCountryFlag(item?.code)" alt="Country flag"></v-img>
 64 |                 </v-avatar>
 65 |               </template>
 66 |               <v-list-item-title>{{ item?.name || '-' }}</v-list-item-title>
 67 |               <v-list-item-subtitle>{{ item?.code || '' }}</v-list-item-subtitle>
 68 |             </v-list-item>
 69 |           </template>
 70 |         </v-select>
 71 | 
 72 |         <v-card variant="outlined" class="mb-4 pa-3">
 73 |           <v-card-title class="text-subtitle-1">Current Settings</v-card-title>
 74 |           <v-card-text>
 75 |             <p><strong>API Endpoint:</strong> https://eu.api.ovh.com/v1 (Fixed)</p>
 76 |             <p><strong>Selected Site:</strong> {{ localSelectedSite?.code || 'Not selected' }} - {{ localSelectedSite?.name || 'Not selected' }}</p>
 77 |             <p class="text-caption">Note: The API endpoint is fixed to eu.api.ovh.com regardless of site selection</p>
 78 |           </v-card-text>
 79 |         </v-card>
 80 | 
 81 |         <!-- Theme Selection -->
 82 |         <v-card variant="outlined" class="mb-4 pa-3">
 83 |           <v-card-title class="text-subtitle-1">
 84 |             <v-icon icon="mdi-theme-light-dark" class="mr-2"></v-icon>
 85 |             Theme Settings
 86 |           </v-card-title>
 87 |           <v-card-text>
 88 |             <v-radio-group
 89 |               v-model="selectedTheme"
 90 |               inline
 91 |               hide-details
 92 |             >
 93 |               <v-radio
 94 |                 value="light"
 95 |                 label="Light"
 96 |               >
 97 |                 <template v-slot:label>
 98 |                   <div class="d-flex align-center">
 99 |                     <v-icon icon="mdi-white-balance-sunny" color="amber" class="mr-2"></v-icon>
100 |                     Light
101 |                   </div>
102 |                 </template>
103 |               </v-radio>
104 |               <v-radio
105 |                 value="dark"
106 |                 label="Dark"
107 |               >
108 |                 <template v-slot:label>
109 |                   <div class="d-flex align-center">
110 |                     <v-icon icon="mdi-weather-night" color="blue-darken-3" class="mr-2"></v-icon>
111 |                     Dark
112 |                   </div>
113 |                 </template>
114 |               </v-radio>
115 |               <v-radio
116 |                 value="auto"
117 |                 label="Auto"
118 |               >
119 |                 <template v-slot:label>
120 |                   <div class="d-flex align-center">
121 |                     <v-icon icon="mdi-theme-light-dark" color="grey" class="mr-2"></v-icon>
122 |                     Auto (System)
123 |                   </div>
124 |                 </template>
125 |               </v-radio>
126 |             </v-radio-group>
127 |           </v-card-text>
128 |         </v-card>
129 | 
130 |         <v-btn
131 |           color="primary"
132 |           type="submit"
133 |           :loading="tokenSaving"
134 |         >
135 |           Save Settings
136 |         </v-btn>
137 |       </v-form>
138 |     </v-card-text>
139 | 
140 |     <v-snackbar
141 |       v-model="showSettingsSaved"
142 |       :timeout="3000"
143 |       color="success"
144 |     >
145 |       Settings saved successfully!
146 |     </v-snackbar>
147 |   </div>
148 | </template>
149 | 
150 | <script setup>
151 | import { ref, onMounted, watch, computed } from 'vue'
152 | import { availableSites } from '../config/sites'
153 | 
154 | const emit = defineEmits(['update:apiToken', 'update:selectedSite', 'settingsSaved'])
155 | 
156 | const props = defineProps({
157 |   apiToken: {
158 |     type: String,
159 |     required: true
160 |   },
161 |   selectedSite: {
162 |     type: Object,
163 |     required: true
164 |   }
165 | })
166 | 
167 | // Use computed properties for two-way binding
168 | const localApiToken = computed({
169 |   get: () => props.apiToken,
170 |   set: (value) => emit('update:apiToken', value)
171 | })
172 | 
173 | const localSelectedSite = computed({
174 |   get: () => props.selectedSite,
175 |   set: (value) => emit('update:selectedSite', value)
176 | })
177 | 
178 | // Theme selection
179 | const selectedTheme = ref('auto')
180 | const tokenSaving = ref(false)
181 | const showSettingsSaved = ref(false)
182 | 
183 | // Function to get country flag for site code
184 | const getCountryFlag = (siteCode) => {
185 |   // Check if siteCode is defined
186 |   if (!siteCode) return 'https://flagcdn.com/48x36/xx.png'
187 | 
188 |   // Convert site code to country code for flags
189 |   const countryCode = siteCode === 'EU' ? 'eu' : siteCode.toLowerCase()
190 |   return `https://flagcdn.com/48x36/${countryCode}.png`
191 | }
192 | 
193 | // Function to apply theme
194 | const applyTheme = (theme) => {
195 |   if (theme === 'auto') {
196 |     // Check system preference
197 |     const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
198 |     document.documentElement.setAttribute('data-theme', prefersDark ? 'dark' : 'light')
199 |   } else {
200 |     // Apply specified theme
201 |     document.documentElement.setAttribute('data-theme', theme)
202 |   }
203 | }
204 | 
205 | // Watch for theme changes to apply immediately
206 | watch(selectedTheme, (newTheme) => {
207 |   applyTheme(newTheme)
208 | })
209 | 
210 | // Function to save settings
211 | const saveSettings = async () => {
212 |   try {
213 |     tokenSaving.value = true
214 | 
215 |     // Save token
216 |     localStorage.setItem('ovhApiToken', localApiToken.value)
217 | 
218 |     // Save selected site
219 |     if (localSelectedSite.value) {
220 |       localStorage.setItem('ovhSiteCode', localSelectedSite.value.code)
221 |     }
222 | 
223 |     // Save selected theme
224 |     localStorage.setItem('ovhTheme', selectedTheme.value)
225 | 
226 |     showSettingsSaved.value = true
227 |     emit('settingsSaved')
228 |   } catch (err) {
229 |     console.error('Error saving settings:', err)
230 |   } finally {
231 |     tokenSaving.value = false
232 |   }
233 | }
234 | 
235 | // On mounted, load saved theme
236 | onMounted(() => {
237 |   // Load saved theme
238 |   const savedTheme = localStorage.getItem('ovhTheme')
239 |   if (savedTheme) {
240 |     selectedTheme.value = savedTheme
241 |     applyTheme(savedTheme)
242 |   } else {
243 |     // Default to auto theme
244 |     applyTheme('auto')
245 |   }
246 | })
247 | </script>
248 | 


--------------------------------------------------------------------------------
/src/pages/Me.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <v-container>
  3 |     <v-card>
  4 |       <v-card-title class="text-h5 py-4 d-flex align-center">
  5 |         User Profile
  6 |         <v-spacer />
  7 |         <v-btn
  8 |           color="primary"
  9 |           variant="text"
 10 |           prepend-icon="mdi-refresh"
 11 |           :loading="loading"
 12 |           :disabled="!apiToken"
 13 |           @click="fetchUserProfile"
 14 |         >
 15 |           Refresh
 16 |         </v-btn>
 17 |       </v-card-title>
 18 | 
 19 |       <v-card-text>
 20 |         <div v-if="loading">
 21 |           <v-progress-circular 
 22 |             indeterminate 
 23 |             color="primary" 
 24 |           />
 25 |           <span class="ml-2">Loading user profile...</span>
 26 |         </div>
 27 |         
 28 |         <v-alert
 29 |           v-else-if="error"
 30 |           type="error"
 31 |           title="Error"
 32 |           :text="error.message || 'Failed to load user profile'"
 33 |           class="mb-4"
 34 |         />
 35 | 
 36 |         <div v-else-if="!apiToken">
 37 |           <v-alert
 38 |             type="warning"
 39 |             text="Please set your OVH API token in Settings tab to access your profile information."
 40 |             class="mb-4"
 41 |           />
 42 |         </div>
 43 | 
 44 |         <div v-else-if="userData">
 45 |           <v-row>
 46 |             <v-col 
 47 |               cols="12" 
 48 |               md="6"
 49 |             >
 50 |               <v-card 
 51 |                 variant="outlined" 
 52 |                 class="mb-4"
 53 |               >
 54 |                 <v-card-title class="text-subtitle-1">
 55 |                   <v-icon 
 56 |                     icon="mdi-account" 
 57 |                     color="primary" 
 58 |                     class="mr-2"
 59 |                   />
 60 |                   Personal Information
 61 |                 </v-card-title>
 62 |                 <v-card-text>
 63 |                   <v-table density="compact">
 64 |                     <tbody>
 65 |                       <tr>
 66 |                         <th>Name</th>
 67 |                         <td>{{ userData.firstname }} {{ userData.name }}</td>
 68 |                       </tr>
 69 |                       <tr>
 70 |                         <th>Email</th>
 71 |                         <td>{{ userData.email }}</td>
 72 |                       </tr>
 73 |                       <tr>
 74 |                         <th>Nickname</th>
 75 |                         <td>{{ userData.nichandle }}</td>
 76 |                       </tr>
 77 |                       <tr>
 78 |                         <th>Customer ID</th>
 79 |                         <td>{{ userData.customerCode }}</td>
 80 |                       </tr>
 81 |                       <tr>
 82 |                         <th>Area</th>
 83 |                         <td>{{ userData.area }}</td>
 84 |                       </tr>
 85 |                       <tr>
 86 |                         <th>State</th>
 87 |                         <td>
 88 |                           <v-chip
 89 |                             :color="getUserStateColor(userData.state)"
 90 |                             size="small"
 91 |                           >
 92 |                             {{ userData.state }}
 93 |                           </v-chip>
 94 |                         </td>
 95 |                       </tr>
 96 |                     </tbody>
 97 |                   </v-table>
 98 |                 </v-card-text>
 99 |               </v-card>
100 |             </v-col>
101 | 
102 |             <v-col 
103 |               cols="12" 
104 |               md="6"
105 |             >
106 |               <v-card 
107 |                 variant="outlined" 
108 |                 class="mb-4"
109 |               >
110 |                 <v-card-title class="text-subtitle-1">
111 |                   <v-icon 
112 |                     icon="mdi-map-marker" 
113 |                     color="primary" 
114 |                     class="mr-2"
115 |                   />
116 |                   Address Information
117 |                 </v-card-title>
118 |                 <v-card-text>
119 |                   <v-table density="compact">
120 |                     <tbody>
121 |                       <tr>
122 |                         <th>Country</th>
123 |                         <td>{{ userData.country }}</td>
124 |                       </tr>
125 |                       <tr>
126 |                         <th>Currency</th>
127 |                         <td>{{ userData.currency?.code || 'N/A' }}</td>
128 |                       </tr>
129 |                       <tr>
130 |                         <th>Language</th>
131 |                         <td>{{ userData.language }}</td>
132 |                       </tr>
133 |                       <tr>
134 |                         <th>OVH Subsidiary</th>
135 |                         <td>{{ userData.ovhSubsidiary }}</td>
136 |                       </tr>
137 |                     </tbody>
138 |                   </v-table>
139 |                 </v-card-text>
140 |               </v-card>
141 | 
142 |               <v-card variant="outlined">
143 |                 <v-card-title class="text-subtitle-1">
144 |                   <v-icon 
145 |                     icon="mdi-cog" 
146 |                     color="primary" 
147 |                     class="mr-2"
148 |                   />
149 |                   Account Settings
150 |                 </v-card-title>
151 |                 <v-card-text>
152 |                   <v-table density="compact">
153 |                     <tbody>
154 |                       <tr>
155 |                         <th>OVHCompany</th>
156 |                         <td>{{ userData.ovhCompany }}</td>
157 |                       </tr>
158 |                       <tr>
159 |                         <th>Creation</th>
160 |                         <td>{{ formatDate(userData.creation) }}</td>
161 |                       </tr>
162 |                       <tr>
163 |                         <th>Legal Form</th>
164 |                         <td>{{ userData.legalform }}</td>
165 |                       </tr>
166 |                       <tr>
167 |                         <th>Two-Factor Auth</th>
168 |                         <td>
169 |                           <v-chip
170 |                             :color="userData.hasTwoFA ? 'success' : 'error'"
171 |                             size="small"
172 |                           >
173 |                             {{ userData.hasTwoFA ? 'Enabled' : 'Disabled' }}
174 |                           </v-chip>
175 |                         </td>
176 |                       </tr>
177 |                     </tbody>
178 |                   </v-table>
179 |                 </v-card-text>
180 |               </v-card>
181 |             </v-col>
182 |           </v-row>
183 |         </div>
184 |         <div v-else>
185 |           <v-alert
186 |             type="info"
187 |             text="No user data available. Please refresh to load your profile."
188 |             class="mb-4"
189 |           />
190 |         </div>
191 |       </v-card-text>
192 |     </v-card>
193 |   </v-container>
194 | </template>
195 | 
196 | <script setup>
197 | import { ref, onMounted } from 'vue'
198 | 
199 | // Props - we need the API token from the parent component
200 | const props = defineProps({
201 |   apiToken: {
202 |     type: String,
203 |     default: ''
204 |   },
205 |   selectedSite: {
206 |     type: Object,
207 |     default: () => ({ code: 'EU' })
208 |   }
209 | });
210 | 
211 | // State
212 | const userData = ref(null);
213 | const loading = ref(false);
214 | const error = ref(null);
215 | 
216 | // Function to get API endpoint based on selected site
217 | const getApiEndpoint = () => {
218 |   const siteCode = props.selectedSite?.code || 'EU';
219 |   switch (siteCode) {
220 |     default: return 'https://eu.api.ovh.com/v1';
221 |   }
222 | };
223 | 
224 | // Function to fetch user profile from OVH API
225 | const fetchUserProfile = async () => {
226 |   if (!props.apiToken) {
227 |     error.value = { message: 'API token is required' };
228 |     return;
229 |   }
230 | 
231 |   loading.value = true;
232 |   error.value = null;
233 | 
234 |   try {
235 |     const apiEndpoint = getApiEndpoint();
236 |     const response = await fetch(`${apiEndpoint}/me`, {
237 |       method: 'GET',
238 |       headers: {
239 |         // 'X-Ovh-Application': 'OVHCart',
240 |         //'X-Ovh-Consumer': 'OVHCart',
241 |         'X-Ovh-Timestamp': Math.floor(Date.now() / 1000),
242 |         // 'X-Ovh-Signature': props.apiToken,
243 |         'Authorization': `Bearer ${props.apiToken}`,
244 |         'Content-Type': 'application/json'
245 |       }
246 |     });
247 | 
248 |     if (!response.ok) {
249 |       const errorData = await response.json().catch(() => ({}));
250 |       throw new Error(`Failed to fetch user profile: ${response.status} - ${errorData.message || JSON.stringify(errorData)}`);
251 |     }
252 | 
253 |     userData.value = await response.json();
254 |   } catch (err) {
255 |     console.error('Error fetching user profile:', err);
256 |     error.value = err;
257 |   } finally {
258 |     loading.value = false;
259 |   }
260 | };
261 | 
262 | // Format date helper function
263 | const formatDate = (dateString) => {
264 |   if (!dateString) return 'Not set';
265 |   const date = new Date(dateString);
266 |   return date.toLocaleString();
267 | };
268 | 
269 | // Get color for user state
270 | const getUserStateColor = (state) => {
271 |   if (!state) return 'grey';
272 |   switch (state.toLowerCase()) {
273 |     case 'active': return 'success';
274 |     case 'enabled': return 'success';
275 |     case 'disabled': return 'error';
276 |     case 'suspended': return 'warning';
277 |     case 'pending': return 'info';
278 |     default: return 'grey';
279 |   }
280 | };
281 | 
282 | // Fetch user profile on component mount if we have a token
283 | onMounted(() => {
284 |   if (props.apiToken) {
285 |     fetchUserProfile();
286 |   }
287 | });
288 | </script>
289 | 


--------------------------------------------------------------------------------
/src/pages/Servers.vue:
--------------------------------------------------------------------------------
   1 | <template>
   2 |   <v-container>
   3 |     <v-card>
   4 |       <v-card-title class="text-h5 py-4 d-flex align-center">
   5 |         Server Plans
   6 |         <v-chip 
   7 |           class="ml-2" 
   8 |           color="primary" 
   9 |           size="small"
  10 |         >
  11 |           Subsidiary: {{ selectedSite?.code || 'IE' }}
  12 |         </v-chip>
  13 |         <v-spacer />
  14 |         <div class="d-flex flex-column align-end mr-4">
  15 |           <div 
  16 |             v-if="lastRefreshTime"
  17 |             class="text-caption text-right mb-1"
  18 |           >
  19 |             Last updated: {{ formatRefreshTime(lastRefreshTime) }}
  20 |             <v-chip 
  21 |               size="x-small" 
  22 |               :color="isFromCache ? 'amber' : 'success'" 
  23 |               class="ml-2"
  24 |             >
  25 |               {{ isFromCache ? 'Cache' : 'API' }}
  26 |             </v-chip>
  27 |           </div>
  28 |         </div>
  29 |         <v-btn
  30 |           color="primary"
  31 |           variant="elevated"
  32 |           prepend-icon="mdi-refresh"
  33 |           :loading="loading"
  34 |           @click="forceRefreshServers"
  35 |         >
  36 |           Refresh Servers
  37 |         </v-btn>
  38 |       </v-card-title>
  39 |       
  40 |       <v-card-text>
  41 |         <div v-if="loading">
  42 |           <v-progress-circular
  43 |             indeterminate
  44 |             color="primary"
  45 |           />
  46 |           <span class="ml-2">Loading server catalog...</span>
  47 |         </div>
  48 |         
  49 |         <v-alert
  50 |           v-else-if="serverError"
  51 |           type="error"
  52 |           title="Error"
  53 |           :text="serverError.message || 'Failed to load server catalog'"
  54 |         />
  55 |         
  56 |         <v-alert
  57 |           v-else-if="!serverCatalog || !serverCatalog.plans || serverCatalog.plans.length === 0"
  58 |           type="info"
  59 |           text="No server plans available"
  60 |         />
  61 |         
  62 |         <div v-else>
  63 |           <!-- Price Filter Section -->
  64 |           <v-card
  65 |             variant="outlined"
  66 |             class="mb-4 pa-4"
  67 |           >
  68 |             <v-card-title class="text-subtitle-1">
  69 |               <v-icon
  70 |                 icon="mdi-filter-variant"
  71 |                 color="primary"
  72 |                 class="mr-2"
  73 |               />
  74 |               Filter by Price Range
  75 |             </v-card-title>
  76 |             <v-card-text>
  77 |               <v-row align="center">
  78 |                 <v-col cols="12" md="4">
  79 |                   <v-text-field
  80 |                     v-model.number="priceFilter.min"
  81 |                     label="Min Price (€)"
  82 |                     type="number"
  83 |                     min="0"
  84 |                     density="compact"
  85 |                     variant="outlined"
  86 |                     prepend-inner-icon="mdi-currency-eur"
  87 |                     @input="filterServersByPrice"
  88 |                   />
  89 |                 </v-col>
  90 |                 <v-col cols="12" md="4">
  91 |                   <v-text-field
  92 |                     v-model.number="priceFilter.max"
  93 |                     label="Max Price (€)"
  94 |                     type="number"
  95 |                     min="0"
  96 |                     density="compact"
  97 |                     variant="outlined"
  98 |                     prepend-inner-icon="mdi-currency-eur"
  99 |                     @input="filterServersByPrice"
 100 |                   />
 101 |                 </v-col>
 102 |                 <v-col cols="12" md="4">
 103 |                   <v-btn
 104 |                     color="primary"
 105 |                     variant="tonal"
 106 |                     @click="clearPriceFilter"
 107 |                     block
 108 |                   >
 109 |                     <v-icon icon="mdi-filter-off" class="mr-2" />
 110 |                     Clear Filter
 111 |                   </v-btn>
 112 |                 </v-col>
 113 |               </v-row>
 114 |               <div v-if="filteredPlansCount !== null" class="text-caption mt-2">
 115 |                 Showing {{ filteredPlansCount }} of {{ totalPlansCount }} server plans
 116 |               </div>
 117 |             </v-card-text>
 118 |           </v-card>
 119 |           
 120 |           <!-- Manual Plan Code Input Button -->
 121 |           <v-card 
 122 |             variant="outlined" 
 123 |             class="mb-4 pa-4"
 124 |           >
 125 |             <v-card-title class="text-subtitle-1">
 126 |               <v-icon 
 127 |                 icon="mdi-keyboard" 
 128 |                 color="primary" 
 129 |                 class="mr-2" 
 130 |               />
 131 |               Manually Add Server by Plan Code
 132 |             </v-card-title>
 133 |             <v-card-text>
 134 |               <p class="text-body-2 mb-4">
 135 |                 If you know the exact OVH plan code for a server, you can manually add it to your cart.
 136 |               </p>
 137 |               <v-btn 
 138 |                 color="primary" 
 139 |                 variant="elevated" 
 140 |                 prepend-icon="mdi-plus"
 141 |                 @click="showManualPlanCodeDialog = true"
 142 |               >
 143 |                 Enter Plan Code
 144 |               </v-btn>
 145 |             </v-card-text>
 146 |           </v-card>
 147 |           
 148 |           <v-row>
 149 |             <v-col
 150 |               v-for="(plan, index) in filteredPlans"
 151 |               :key="index"
 152 |               cols="12"
 153 |               md="4"
 154 |             >
 155 |               <v-card class="h-100">
 156 |                 <v-card-title class="text-h6">
 157 |                   {{ plan.planCode || 'Server Plan' }}
 158 |                 </v-card-title>
 159 |                 <v-card-subtitle 
 160 |                   v-if="plan.invoiceName" 
 161 |                   class="text-subtitle-1 font-weight-bold"
 162 |                 >
 163 |                   {{ plan.invoiceName }}
 164 |                 </v-card-subtitle>
 165 |                 <v-card-subtitle v-else-if="plan.description">
 166 |                   {{ plan.description }}
 167 |                 </v-card-subtitle>
 168 |                 <v-card-text>
 169 |                   <v-list density="compact">
 170 |                     <!-- Family info -->
 171 |                     <v-list-item v-if="plan.family">
 172 |                       <template #prepend>
 173 |                         <v-icon 
 174 |                           icon="mdi-server" 
 175 |                           color="primary" 
 176 |                         />
 177 |                       </template>
 178 |                       <v-list-item-title>Family</v-list-item-title>
 179 |                       <v-list-item-subtitle>{{ plan.family }}</v-list-item-subtitle>
 180 |                     </v-list-item>
 181 |                     
 182 |                     <!-- Product type -->
 183 |                     <v-list-item v-if="plan.productType">
 184 |                       <template #prepend>
 185 |                         <v-icon 
 186 |                           icon="mdi-tag" 
 187 |                           color="primary" 
 188 |                         />
 189 |                       </template>
 190 |                       <v-list-item-title>Type</v-list-item-title>
 191 |                       <v-list-item-subtitle>{{ plan.productType }}</v-list-item-subtitle>
 192 |                     </v-list-item>
 193 | 
 194 |                     <!-- Memory info -->
 195 |                     <v-list-item v-if="getAddonInfo(plan, 'memory')">
 196 |                       <template #prepend>
 197 |                         <v-icon 
 198 |                           icon="mdi-memory" 
 199 |                           color="green" 
 200 |                         />
 201 |                       </template>
 202 |                       <v-list-item-title>Memory</v-list-item-title>
 203 |                       <v-list-item-subtitle>{{ getAddonInfo(plan, 'memory') }}</v-list-item-subtitle>
 204 |                     </v-list-item>
 205 | 
 206 |                     <!-- Storage info -->
 207 |                     <v-list-item v-if="getAddonInfo(plan, 'storage')">
 208 |                       <template #prepend>
 209 |                         <v-icon 
 210 |                           icon="mdi-harddisk" 
 211 |                           color="amber" 
 212 |                         />
 213 |                       </template>
 214 |                       <v-list-item-title>Storage</v-list-item-title>
 215 |                       <v-list-item-subtitle>{{ getAddonInfo(plan, 'storage') }}</v-list-item-subtitle>
 216 |                     </v-list-item>
 217 |                     
 218 |                     <!-- Bandwidth info -->
 219 |                     <v-list-item v-if="getAddonInfo(plan, 'bandwidth')">
 220 |                       <template #prepend>
 221 |                         <v-icon 
 222 |                           icon="mdi-speedometer" 
 223 |                           color="purple" 
 224 |                         />
 225 |                       </template>
 226 |                       <v-list-item-title>Bandwidth</v-list-item-title>
 227 |                       <v-list-item-subtitle>{{ getAddonInfo(plan, 'bandwidth') }}</v-list-item-subtitle>
 228 |                     </v-list-item>
 229 |                     
 230 |                     <!-- Price info -->
 231 |                     <!-- Price info -->
 232 |                     <v-list-item
 233 |                       v-for="(pricing, priceIndex) in plan.pricings || []"
 234 |                       :key="priceIndex"
 235 |                     >
 236 |                       <template #prepend>
 237 |                         <v-icon icon="mdi-currency-eur" color="primary" />
 238 |                       </template>
 239 |                       <v-list-item-title>{{ pricing.description }}</v-list-item-title>
 240 |                       <v-list-item-subtitle>{{ formatPricing(pricing) }}</v-list-item-subtitle>
 241 |                     </v-list-item>
 242 |                   </v-list>
 243 |                   
 244 |                   <v-chip-group 
 245 |                           v-if="plan.properties && plan.properties.length > 0"
 246 |                           class="mt-3"
 247 |                         >
 248 |                     <v-chip
 249 |                       v-for="(prop, propIndex) in plan.properties"
 250 |                       :key="propIndex"
 251 |                       size="small"
 252 |                       variant="outlined"
 253 |                       :color="getPropertyColor(prop.name)"
 254 |                     >
 255 |                       {{ prop.name }}: {{ prop.value }}
 256 |                     </v-chip>
 257 |                   </v-chip-group>
 258 |                   
 259 |                   <!-- Configuration options -->
 260 |                   <div v-if="plan.configurations && plan.configurations.length > 0" class="mt-4">
 261 |                     <v-list density="compact">
 262 |                       <v-list-subheader>Available Configurations</v-list-subheader>
 263 |                       
 264 |                       <v-list-item
 265 |                         v-for="(config, configIndex) in plan.configurations" 
 266 |                         :key="configIndex"
 267 |                       >
 268 |                         <template v-slot:prepend>
 269 |                           <v-chip
 270 |                             size="small"
 271 |                             :color="getPropertyColor(config.name)"
 272 |                             class="mr-2"
 273 |                           >
 274 |                             {{ formatAddonCode(config.name) }}
 275 |                           </v-chip>
 276 |                         </template>
 277 |                         
 278 |                         <v-list-item-title>{{ config.name }}</v-list-item-title>
 279 |                         
 280 |                         <v-list-item-subtitle>
 281 |                           <span class="text-caption">{{ config.isMandatory ? '(Required)' : '(Optional)' }}</span>
 282 |                           <div class="mt-1 text-caption" v-if="config.values && config.values.length > 0">
 283 |                             Options: {{ config.values.join(', ') }}
 284 |                           </div>
 285 |                         </v-list-item-subtitle>
 286 |                       </v-list-item>
 287 |                     </v-list>
 288 |                   </div>
 289 |                 </v-card-text>
 290 |                 <v-card-actions>
 291 |                   <v-btn
 292 |                     color="primary"
 293 |                     variant="text"
 294 |                     :loading="plan.addingToCart"
 295 |                     :disabled="!props.activeCartId || !plan.planCode"
 296 |                     @click="addServerToCart(plan)"
 297 |                   >
 298 |                     Add to Cart
 299 |                   </v-btn>
 300 |                   <v-btn
 301 |                     color="primary"
 302 |                     variant="text"
 303 |                     @click="showServerDetails(plan)"
 304 |                   >
 305 |                     View Details
 306 |                   </v-btn>
 307 |                 </v-card-actions>
 308 |               </v-card>
 309 |             </v-col>
 310 |           </v-row>
 311 |         </div>
 312 |       </v-card-text>
 313 |     </v-card>
 314 | 
 315 |     <!-- Manual Plan Code Dialog -->
 316 |     <v-dialog
 317 |       v-model="showManualPlanCodeDialog"
 318 |       max-width="500px"
 319 |     >
 320 |       <v-card>
 321 |         <v-card-title class="text-h5">
 322 |             Add Server by Plan Code
 323 |           </v-card-title>
 324 |         <v-card-text>
 325 |           <v-form @submit.prevent="addServerByPlanCode">
 326 |             <v-text-field
 327 |               v-model="manualPlanCode"
 328 |               label="Plan Code"
 329 |               hint="Enter the exact OVH plan code"
 330 |               persistent-hint
 331 |               :rules="[v => !!v || 'Plan code is required']"
 332 |               required
 333 |               class="mb-4"
 334 |             />
 335 |             
 336 |             <v-select
 337 |               v-model="manualDuration"
 338 |               :items="durations"
 339 |               item-title="text"
 340 |               item-value="value"
 341 |               label="Duration"
 342 |               hint="Select contract duration"
 343 |               persistent-hint
 344 |               class="mb-4"
 345 |             />
 346 |             
 347 |             <v-text-field
 348 |               v-model="manualQuantity"
 349 |               label="Quantity"
 350 |               type="number"
 351 |               min="1"
 352 |               hint="Number of items to add"
 353 |               persistent-hint
 354 |               :rules="[v => !!v && v > 0 || 'Quantity must be at least 1']"
 355 |               required
 356 |             />
 357 |           </v-form>
 358 |         </v-card-text>
 359 |         <v-card-actions>
 360 |           <v-spacer />
 361 |           <v-btn
 362 |             color="error"
 363 |             variant="text"
 364 |             @click="showManualPlanCodeDialog = false"
 365 |           >
 366 |             Cancel
 367 |           </v-btn>
 368 |           <v-btn
 369 |             color="success"
 370 |             variant="elevated"
 371 |             :loading="addingManualPlan"
 372 |             @click="addServerByPlanCode"
 373 |           >
 374 |             Add to Cart
 375 |           </v-btn>
 376 |         </v-card-actions>
 377 |       </v-card>
 378 |     </v-dialog>
 379 | 
 380 |     <!-- Server Details Dialog -->
 381 |     <v-dialog
 382 |       v-model="showServerDetailsDialog"
 383 |       max-width="600px"
 384 |     >
 385 |       <v-card v-if="selectedServer">
 386 |         <v-card-title class="text-h5">
 387 |           {{ selectedServer.planCode }}
 388 |           <v-chip
 389 |             v-if="selectedServer.family"
 390 |             size="small"
 391 |             color="primary"
 392 |             class="ml-2"
 393 |           >
 394 |             {{ selectedServer.family }}
 395 |           </v-chip>
 396 |         </v-card-title>
 397 |         <v-card-subtitle v-if="selectedServer.description">
 398 |           {{ selectedServer.description }}
 399 |         </v-card-subtitle>
 400 |         <v-card-text>
 401 |           <v-list density="compact">
 402 |             <v-list-item 
 403 |               v-for="(prop, index) in selectedServer.properties" 
 404 |               :key="index"
 405 |             >
 406 |               <v-list-item-title>{{ prop.name }}</v-list-item-title>
 407 |               <v-list-item-subtitle>{{ prop.value }}</v-list-item-subtitle>
 408 |             </v-list-item>
 409 |             <v-list-item v-if="getPlanPrice(selectedServer)">
 410 |               <v-list-item-title>Price</v-list-item-title>
 411 |               <v-list-item-subtitle>{{ getPlanPrice(selectedServer) }}</v-list-item-subtitle>
 412 |             </v-list-item>
 413 |           </v-list>
 414 | 
 415 |           <v-divider class="my-4" />
 416 |           
 417 |           <!-- Duration selection -->
 418 |           <v-select
 419 |             v-model="selectedDuration"
 420 |             :items="durations"
 421 |             item-title="text"
 422 |             item-value="value"
 423 |             label="Contract Duration"
 424 |             hint="Select your preferred contract duration"
 425 |             persistent-hint
 426 |             class="mb-4"
 427 |           />
 428 |         </v-card-text>
 429 |         <v-card-actions>
 430 |           <v-spacer />
 431 |           <v-btn
 432 |             color="primary"
 433 |             variant="text"
 434 |             @click="showServerDetailsDialog = false"
 435 |           >
 436 |             Close
 437 |           </v-btn>
 438 |           <v-btn
 439 |             color="success"
 440 |             variant="elevated"
 441 |             :loading="selectedServer.addingToCart"
 442 |             :disabled="!activeCartId || !selectedServer.planCode"
 443 |             @click="addSelectedServerToCart"
 444 |           >
 445 |             Add to Cart
 446 |           </v-btn>
 447 |         </v-card-actions>
 448 |       </v-card>
 449 |     </v-dialog>
 450 |   </v-container>
 451 | </template>
 452 | 
 453 | <script setup>
 454 | import { ref, onMounted, watch, computed } from 'vue';
 455 | import { useRouter } from 'vue-router';
 456 | 
 457 | // Props from parent component
 458 | const props = defineProps({
 459 |   apiToken: {
 460 |     type: String,
 461 |     required: false,
 462 |     default: ''
 463 |   },
 464 |   selectedSite: {
 465 |     type: Object,
 466 |     default: () => ({ code: 'IE' })
 467 |   },
 468 |   activeCartId: {
 469 |     type: String,
 470 |     default: ''
 471 |   }
 472 | });
 473 | 
 474 | // Emit events to parent
 475 | const emit = defineEmits([
 476 |   'refresh-cart-details',
 477 |   'show-success',
 478 |   'show-error'
 479 | ]);
 480 | 
 481 | // State
 482 | const loading = ref(false);
 483 | const serverError = ref(null);
 484 | const serverCatalog = ref({ plans: [] });
 485 | const showManualPlanCodeDialog = ref(false);
 486 | const addingManualPlan = ref(false);
 487 | const manualPlanCode = ref('');
 488 | const manualDuration = ref('P1M');
 489 | const manualQuantity = ref(1);
 490 | const showServerDetailsDialog = ref(false);
 491 | const selectedServer = ref(null);
 492 | const selectedDuration = ref('P1M');
 493 | const lastRefreshTime = ref(null); // 最后刷新时间
 494 | const isFromCache = ref(false); // 数据是否来自缓存
 495 | 
 496 | // Price filter state
 497 | const priceFilter = ref({
 498 |   min: null,
 499 |   max: null
 500 | });
 501 | 
 502 | // Durations list for selection
 503 | const durations = [
 504 |   { text: '1 Month', value: 'P1M' },
 505 |   { text: '3 Months', value: 'P3M' },
 506 |   { text: '6 Months', value: 'P6M' },
 507 |   { text: '12 Months', value: 'P1Y' },
 508 |   { text: '24 Months', value: 'P2Y' }
 509 | ];
 510 | 
 511 | // Function to get API endpoint
 512 | const getApiEndpoint = () => {
 513 |   return 'https://eu.api.ovh.com/v1';
 514 | };
 515 | 
 516 | // Function to extract addon family information
 517 | const getAddonInfo = (plan, familyName) => {
 518 |   if (!plan.addonFamilies || plan.addonFamilies.length === 0) {
 519 |     return null;
 520 |   }
 521 | 
 522 |   const family = plan.addonFamilies.find(f => f.name === familyName);
 523 |   if (!family) {
 524 |     return null;
 525 |   }
 526 | 
 527 |   // Return default addon if available, otherwise first addon
 528 |   const addonCode = family.default || (family.addons && family.addons.length > 0 ? family.addons[0] : null);
 529 |   if (!addonCode) {
 530 |     return null;
 531 |   }
 532 | 
 533 |   // Format the addon code for display
 534 |   return formatAddonCode(addonCode);
 535 | };
 536 | 
 537 | // Format addon codes to be more readable
 538 | const formatAddonCode = (code) => {
 539 |   // Replace hyphens with spaces
 540 |   let formatted = code.replace(/-/g, ' ');
 541 |   
 542 |   // Extract specific information based on patterns in the code
 543 |   if (code.includes('ram-')) {
 544 |     // Examples: ram-128g-ecc-2666-24sys -> 128GB ECC RAM
 545 |     const match = code.match(/ram-(\d+)g/);
 546 |     if (match && match[1]) {
 547 |       return `${match[1]}GB RAM`;
 548 |     }
 549 |   } else if (code.includes('bandwidth-')) {
 550 |     // Examples: bandwidth-500-24sys -> 500 Mbps
 551 |     const match = code.match(/bandwidth-(\d+)/);
 552 |     if (match && match[1]) {
 553 |       return `${match[1]} Mbps`;
 554 |     }
 555 |   } else if (code.includes('raid') && code.includes('nvme')) {
 556 |     // Extract storage size for NVMe drives
 557 |     const match = code.match(/-(\d+)nvme/);
 558 |     if (match && match[1]) {
 559 |       return `${match[1]}GB NVMe SSD`;
 560 |     }
 561 |   } else if (code.includes('raid') && code.includes('sa')) {
 562 |     // Extract storage size for SATA drives
 563 |     const match = code.match(/-(\d+)sa/);
 564 |     if (match && match[1]) {
 565 |       return `${match[1]}GB SATA Drive`;
 566 |     }
 567 |   }
 568 |   
 569 |   // If no specific pattern matched, return the cleaned up code
 570 |   return formatted;
 571 | };
 572 | 
 573 | // Function to get plan price
 574 | const getPlanPrice = (plan) => {
 575 |   if (!plan || !Array.isArray(plan.pricings) || plan.pricings.length === 0) {
 576 |     return 'Price not available';
 577 |   }
 578 |   
 579 |   const pricing = plan.pricings[0];
 580 |   
 581 |   // Price is a numeric value in the sample data (in micro units, need to convert to standard currency)
 582 |   if (typeof pricing.price === 'number') {
 583 |     // Convert from micro units (e.g., 2999000000) to standard currency (e.g., 29.99)
 584 |     const priceValue = (pricing.price / 100000000).toFixed(2);
 585 |     // Use EUR as default currency or customize based on your needs
 586 |     return `€${priceValue}`;
 587 |   }
 588 |   // Handle legacy format if present
 589 |   else if (pricing.price && typeof pricing.price === 'object') {
 590 |     return `${pricing.price.text || `${pricing.price.value} ${pricing.price.currencyCode || 'EUR'}`}`;
 591 |   }
 592 |   
 593 |   return 'Price not available';
 594 | };
 595 | 
 596 | // Function to get numeric price value for filtering
 597 | const getNumericPrice = (plan) => {
 598 |   if (!plan || !Array.isArray(plan.pricings) || plan.pricings.length === 0) {
 599 |     return null;
 600 |   }
 601 |   
 602 |   const pricing = plan.pricings.length > 1 ? plan.pricings[1] : plan.pricings[0];
 603 |   
 604 |   if (typeof pricing.price === 'number') {
 605 |     // Convert from micro units to standard currency
 606 |     return pricing.price / 100000000;
 607 |   }
 608 |   else if (pricing.price && typeof pricing.price === 'object' && pricing.price.value) {
 609 |     return parseFloat(pricing.price.value);
 610 |   }
 611 |   
 612 |   return null;
 613 | };
 614 | // Format a single pricing entry for display
 615 | const formatPricing = (pricing) => {
 616 |   let amountText = 'Price not available';
 617 |   if (typeof pricing.price === 'number') {
 618 |     const priceValue = (pricing.price / 100000000).toFixed(2);
 619 |     amountText = `€${priceValue}`;
 620 |   } else if (pricing.price && typeof pricing.price === 'object') {
 621 |     amountText = pricing.price.text || `${pricing.price.value} ${pricing.price.currencyCode || 'EUR'}`;
 622 |   }
 623 |   return `${pricing.description}: ${amountText}`;
 624 | };
 625 | 
 626 | // Computed property for filtered plans
 627 | const filteredPlans = computed(() => {
 628 |   if (!serverCatalog.value.plans) {
 629 |     return [];
 630 |   }
 631 |   
 632 |   // If no filter is set, return all plans
 633 |   if (priceFilter.value.min === null && priceFilter.value.max === null) {
 634 |     return serverCatalog.value.plans;
 635 |   }
 636 |   
 637 |   return serverCatalog.value.plans.filter(plan => {
 638 |     const price = getNumericPrice(plan);
 639 |     
 640 |     // Skip plans without valid price
 641 |     if (price === null) {
 642 |       return false;
 643 |     }
 644 |     
 645 |     // Check min price filter
 646 |     if (priceFilter.value.min !== null && price < priceFilter.value.min) {
 647 |       return false;
 648 |     }
 649 |     
 650 |     // Check max price filter
 651 |     if (priceFilter.value.max !== null && price > priceFilter.value.max) {
 652 |       return false;
 653 |     }
 654 |     
 655 |     return true;
 656 |   });
 657 | });
 658 | 
 659 | // Computed property for total plans count
 660 | const totalPlansCount = computed(() => {
 661 |   return serverCatalog.value.plans ? serverCatalog.value.plans.length : 0;
 662 | });
 663 | 
 664 | // Computed property for filtered plans count
 665 | const filteredPlansCount = computed(() => {
 666 |   return filteredPlans.value.length;
 667 | });
 668 | 
 669 | // Function to trigger filtering (called on input change)
 670 | const filterServersByPrice = () => {
 671 |   // The filtering is handled by the computed property automatically
 672 |   console.log(`Filtering servers with price range: €${priceFilter.value.min || 0} - €${priceFilter.value.max || '∞'}`);
 673 | };
 674 | 
 675 | // Function to clear price filter
 676 | const clearPriceFilter = () => {
 677 |   priceFilter.value.min = null;
 678 |   priceFilter.value.max = null;
 679 |   console.log('Price filter cleared');
 680 | };
 681 | 
 682 | // Function to get property color
 683 | const getPropertyColor = (propName) => {
 684 |   const colorMap = {
 685 |     'cpu': 'blue',
 686 |     'ram': 'green',
 687 |     'disk': 'amber',
 688 |     'storage': 'amber',
 689 |     'bandwidth': 'purple',
 690 |     'network': 'purple',
 691 |     'location': 'red',
 692 |     'region': 'red',
 693 |     'datacenter': 'red'
 694 |   };
 695 |   
 696 |   const key = Object.keys(colorMap).find(key => propName.toLowerCase().includes(key));
 697 |   return key ? colorMap[key] : 'grey';
 698 | };
 699 | 
 700 | // Constants for cache management
 701 | const SERVERS_CACHE_KEY = 'ovhcart_servers_cache';
 702 | const CACHE_EXPIRY_MS = 1000 * 60 * 60; // 1 hour cache duration
 703 | 
 704 | // Function to check if cache is valid
 705 | const isCacheValid = (cachedData) => {
 706 |   if (!cachedData || !cachedData.timestamp) return false;
 707 |   
 708 |   const currentTime = new Date().getTime();
 709 |   const cacheTime = cachedData.timestamp;
 710 |   
 711 |   // Check if cache is still within expiry period
 712 |   return (currentTime - cacheTime) < CACHE_EXPIRY_MS;
 713 | };
 714 | 
 715 | // Function to get cached server data
 716 | const getCachedServers = (subsidiaryCode) => {
 717 |   try {
 718 |     const cacheString = localStorage.getItem(SERVERS_CACHE_KEY);
 719 |     if (!cacheString) return null;
 720 |     
 721 |     const cache = JSON.parse(cacheString);
 722 |     
 723 |     // If subsidiary doesn't match cached subsidiary, don't use cache
 724 |     if (cache.subsidiaryCode !== subsidiaryCode) return null;
 725 |     
 726 |     // Check if cache is still valid
 727 |     if (!isCacheValid(cache)) {
 728 |       console.log('Server cache expired');
 729 |       return null;
 730 |     }
 731 |     
 732 |     console.log('Using cached server data');
 733 |     return cache.data;
 734 |   } catch (err) {
 735 |     console.error('Error reading server cache:', err);
 736 |     return null;
 737 |   }
 738 | };
 739 | 
 740 | // Function to save server data to cache
 741 | const cacheServerData = (data, subsidiaryCode) => {
 742 |   try {
 743 |     const cacheData = {
 744 |       data,
 745 |       subsidiaryCode,
 746 |       timestamp: new Date().getTime()
 747 |     };
 748 |     
 749 |     localStorage.setItem(SERVERS_CACHE_KEY, JSON.stringify(cacheData));
 750 |     console.log('Servers data cached successfully');
 751 |   } catch (err) {
 752 |     console.error('Error caching server data:', err);
 753 |   }
 754 | };
 755 | 
 756 | // Fetch servers from OVH API with optional cache bypass
 757 | const fetchServers = async (forceRefresh = false) => {
 758 |   loading.value = true;
 759 |   serverError.value = null;
 760 |   
 761 |   // Get the current subsidiary code from the selected site
 762 |   const subsidiaryCode = props.selectedSite ? props.selectedSite.code : 'IE';
 763 |   
 764 |   // Try to get data from cache first (unless force refresh is requested)
 765 |   if (!forceRefresh) {
 766 |     const cachedData = getCachedServers(subsidiaryCode);
 767 |     if (cachedData) {
 768 |       serverCatalog.value = cachedData;
 769 |       lastRefreshTime.value = new Date();
 770 |       isFromCache.value = true;
 771 |       loading.value = false;
 772 |       return;
 773 |     }
 774 |   }
 775 |   
 776 |   // Mark that we're loading from API, not cache
 777 |   isFromCache.value = false;
 778 |   
 779 |   try {
 780 |     const headers = {
 781 |       // 'Authorization': `Bearer ${props['api-token']}`,
 782 |       'Content-Type': 'application/json'
 783 |     };
 784 |     
 785 |     const apiEndpoint = getApiEndpoint();
 786 |     const response = await fetch(`${apiEndpoint}/order/catalog/public/eco?ovhSubsidiary=${subsidiaryCode}`, {
 787 |       headers
 788 |     });
 789 |     
 790 |     if (!response.ok) {
 791 |       throw new Error(`Failed to fetch server catalog: ${response.status}`);
 792 |     }
 793 |     
 794 |     const data = await response.json();
 795 |     
 796 |     // Initialize addingToCart property for each plan
 797 |     if (data.plans && data.plans.length > 0) {
 798 |       data.plans.forEach(plan => {
 799 |         plan.addingToCart = false;
 800 |       });
 801 |     }
 802 |     
 803 |     // Cache the server data
 804 |     cacheServerData(data, subsidiaryCode);
 805 |     
 806 |     serverCatalog.value = data;
 807 |     lastRefreshTime.value = new Date();
 808 |     console.log('Server catalog for subsidiary', subsidiaryCode, ':', data);
 809 |   } catch (err) {
 810 |     console.error('Error fetching server catalog:', err);
 811 |     serverError.value = err;
 812 |     showError(err.message);
 813 |   } finally {
 814 |     loading.value = false;
 815 |   }
 816 | };
 817 | 
 818 | // Show success notification
 819 | const showSuccess = (message) => {
 820 |   // Can be implemented with Vuetify snackbar if needed
 821 |   console.log('Success:', message);
 822 |   emit('show-success', message);
 823 | };
 824 | 
 825 | // Show error notification
 826 | const showError = (message) => {
 827 |   // Can be implemented with Vuetify snackbar if needed
 828 |   console.error('Error:', message);
 829 |   emit('show-error', message);
 830 | };
 831 | 
 832 | // Function to add server to cart
 833 | const addServerToCart = async (plan) => {
 834 |   if (!props.activeCartId || !plan.planCode) {
 835 |     showError('Cannot add server to cart. Please select an active cart first.');
 836 |     return;
 837 |   }
 838 |   
 839 |   // Set loading state for this specific plan
 840 |   if (plan) {
 841 |     plan.addingToCart = true;
 842 |   }
 843 |   
 844 |   try {
 845 |     const headers = {
 846 |       'Authorization': `Bearer ${props.apiToken}`,
 847 |       'Content-Type': 'application/json'
 848 |     };
 849 |     
 850 |     const apiEndpoint = getApiEndpoint();
 851 |     const url = `${apiEndpoint}/order/cart/${props.activeCartId}/eco`;
 852 |     
 853 |     console.log('Adding server to cart:', plan.planCode, 'URL:', url);
 854 |     
 855 |     const payload = {
 856 |       duration: selectedDuration.value,
 857 |       planCode: plan.planCode,
 858 |       pricingMode: "default",
 859 |       quantity: 1
 860 |     };
 861 |     
 862 |     const response = await fetch(url, {
 863 |       method: 'POST',
 864 |       headers,
 865 |       body: JSON.stringify(payload)
 866 |     });
 867 |     
 868 |     if (!response.ok) {
 869 |       const errorData = await response.json();
 870 |       throw new Error(`Failed to add server to cart: ${response.status} - ${errorData.message || JSON.stringify(errorData)}`);
 871 |     }
 872 |     
 873 |     const result = await response.json();
 874 |     showSuccess(`Added ${plan.planCode} to cart successfully!`);
 875 |     console.log('Server added to cart result:', result);
 876 |     
 877 |     // Notify parent to refresh cart details
 878 |     emit('refresh-cart-details');
 879 |     
 880 |     // Close the details dialog if it's open
 881 |     if (showServerDetailsDialog.value && selectedServer.value && selectedServer.value.planCode === plan.planCode) {
 882 |       showServerDetailsDialog.value = false;
 883 |     }
 884 |     
 885 |     return result;
 886 |   } catch (err) {
 887 |     console.error('Error adding server to cart:', err);
 888 |     showError(`Error adding server to cart: ${err.message}`);
 889 |     return null;
 890 |   } finally {
 891 |     // Reset loading state
 892 |     if (plan) {
 893 |       plan.addingToCart = false;
 894 |     }
 895 |   }
 896 | };
 897 | 
 898 | // Function to add the currently selected server to cart (from details dialog)
 899 | const addSelectedServerToCart = () => {
 900 |   if (selectedServer.value) {
 901 |     addServerToCart(selectedServer.value);
 902 |   }
 903 | };
 904 | 
 905 | // Router for navigation
 906 | const router = useRouter();
 907 | 
 908 | // Function to navigate to server plan details page
 909 | const showServerDetails = (plan) => {
 910 |   if (plan && plan.planCode) {
 911 |     router.push(`/plan/${plan.planCode}`);
 912 |   }
 913 | };
 914 | 
 915 | // Function to add server by manually entered plan code
 916 | const addServerByPlanCode = async () => {
 917 |   if (!props.activeCartId || !manualPlanCode.value) {
 918 |     showError('Cannot add server to cart. Please select an active cart first and enter a plan code.');
 919 |     return;
 920 |   }
 921 |   
 922 |   addingManualPlan.value = true;
 923 |   
 924 |   try {
 925 |     const headers = {
 926 |       'Authorization': `Bearer ${props.apiToken}`,
 927 |       'Content-Type': 'application/json'
 928 |     };
 929 |     
 930 |     const apiEndpoint = getApiEndpoint();
 931 |     const url = `${apiEndpoint}/order/cart/${props.activeCartId}/eco`;
 932 |     
 933 |     console.log('Adding manual plan to cart:', manualPlanCode.value, 'URL:', url);
 934 |     
 935 |     const payload = {
 936 |       duration: manualDuration.value,
 937 |       planCode: manualPlanCode.value,
 938 |       pricingMode: "default",
 939 |       quantity: parseInt(manualQuantity.value, 10) || 1
 940 |     };
 941 |     
 942 |     const response = await fetch(url, {
 943 |       method: 'POST',
 944 |       headers,
 945 |       body: JSON.stringify(payload)
 946 |     });
 947 |     
 948 |     if (!response.ok) {
 949 |       const errorData = await response.json();
 950 |       throw new Error(`Failed to add plan to cart: ${response.status} - ${errorData.message || JSON.stringify(errorData)}`);
 951 |     }
 952 |     
 953 |     const result = await response.json();
 954 |     showSuccess(`Added ${manualPlanCode.value} to cart successfully!`);
 955 |     console.log('Manual plan added to cart result:', result);
 956 |     
 957 |     // Notify parent to refresh cart details
 958 |     emit('refresh-cart-details');
 959 |     
 960 |     // Reset and close dialog
 961 |     manualPlanCode.value = '';
 962 |     manualDuration.value = 'P1M';
 963 |     manualQuantity.value = 1;
 964 |     showManualPlanCodeDialog.value = false;
 965 |     
 966 |     return result;
 967 |   } catch (err) {
 968 |     console.error('Error adding manual plan to cart:', err);
 969 |     showError(`Error adding plan to cart: ${err.message}`);
 970 |     return null;
 971 |   } finally {
 972 |     addingManualPlan.value = false;
 973 |   }
 974 | };
 975 | 
 976 | // Watch for site changes to refresh servers
 977 | watch(() => props.selectedSite, (newSite, oldSite) => {
 978 |   if (newSite?.code !== oldSite?.code) {
 979 |     console.log('Site changed, refreshing server catalog...');
 980 |     fetchServers();
 981 |   }
 982 | }, { deep: true });
 983 | 
 984 | // Format the refresh time in a user-friendly way
 985 | const formatRefreshTime = (date) => {
 986 |   if (!date) return '';
 987 |   
 988 |   // Get current date for comparison
 989 |   const now = new Date();
 990 |   const refreshDate = new Date(date);
 991 |   
 992 |   // If same day, just show time
 993 |   if (now.toDateString() === refreshDate.toDateString()) {
 994 |     return refreshDate.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
 995 |   }
 996 |   
 997 |   // Otherwise show date and time
 998 |   return refreshDate.toLocaleString([], { 
 999 |     month: 'short', 
1000 |     day: 'numeric',
1001 |     hour: '2-digit', 
1002 |     minute: '2-digit'
1003 |   });
1004 | };
1005 | 
1006 | // Force refresh servers (ignoring cache)
1007 | const forceRefreshServers = () => {
1008 |   console.log('Forcing refresh of server data from API');
1009 |   fetchServers(true);
1010 | };
1011 | 
1012 | // Fetch servers on component mount if we have a token
1013 | onMounted(() => {
1014 |   fetchServers();
1015 | });
1016 | </script>
1017 | 
1018 | <style scoped>
1019 | .h-100 {
1020 |   height: 100%;
1021 | }
1022 | </style>
1023 | 


--------------------------------------------------------------------------------
/src/pages/index.vue:
--------------------------------------------------------------------------------
   1 | <template>
   2 |   <v-container>
   3 |     <v-card>
   4 |       <v-card-title class="text-h4 font-weight-bold d-flex align-center">
   5 |         <v-icon icon="mdi-cart" color="primary" class="mr-2"></v-icon>
   6 |         OVH Cart
   7 |       </v-card-title>
   8 |       <v-tabs
   9 |         v-model="activeTab"
  10 |         bg-color="primary"
  11 |       >
  12 |         <v-tab
  13 |           v-for="tab in tabs"
  14 |           :key="tab.id"
  15 |           :value="tab.id"
  16 |         >
  17 |           <v-icon :icon="tab.icon" class="mr-2"></v-icon>
  18 |           {{ tab.name }}
  19 |         </v-tab>
  20 |       </v-tabs>
  21 | 
  22 |       <v-card-text>
  23 |         <v-window v-model="activeTab">
  24 |           <!-- Cart Tab -->
  25 |           <v-window-item value="cart">
  26 |             <v-card-title class="text-h5 py-4 d-flex align-center">
  27 |               Shopping Cart
  28 |               <v-spacer></v-spacer>
  29 |               <v-btn
  30 |                 color="success"
  31 |                 variant="elevated"
  32 |                 prepend-icon="mdi-cart-plus"
  33 |                 @click="createCart"
  34 |                 :loading="creatingCart"
  35 |                 :disabled="!apiToken"
  36 |               >
  37 |                 Create New Cart
  38 |               </v-btn>
  39 |             </v-card-title>
  40 |             <v-card-text>
  41 |               <div v-if="loading">
  42 |                 <v-progress-circular indeterminate color="primary"></v-progress-circular>
  43 |                 <span class="ml-2">Loading cart data...</span>
  44 |               </div>
  45 |               <v-alert
  46 |                 v-else-if="error"
  47 |                 type="error"
  48 |                 title="Error"
  49 |                 :text="error.message || 'Failed to load cart data'"
  50 |               ></v-alert>
  51 |               <v-alert
  52 |                 v-if="!activeCartId && !loading && cartItems.length > 0"
  53 |                 type="warning"
  54 |                 text="No active cart selected. Please select one from below."
  55 |                 class="mb-4"
  56 |               ></v-alert>
  57 | 
  58 |               <!-- Active Cart Section -->
  59 |               <div v-if="activeCartId && activeCartDetails" class="mb-6">
  60 |                 <v-card variant="outlined" class="mb-4">
  61 |                   <v-card-title>
  62 |                     <div class="d-flex align-center">
  63 |                       <span>Active Cart</span>
  64 |                       <v-chip
  65 |                         :color="activeCartDetails.readOnly ? 'error' : 'success'"
  66 |                         size="small"
  67 |                         class="ml-2"
  68 |                       >
  69 |                         {{ activeCartDetails.readOnly ? 'Read Only' : 'Active' }}
  70 |                       </v-chip>
  71 |                     </div>
  72 |                   </v-card-title>
  73 |                   <v-card-text>
  74 |                     <v-row>
  75 |                       <v-col cols="12" sm="6">
  76 |                         <v-list-item>
  77 |                           <template v-slot:prepend>
  78 |                             <v-icon icon="mdi-cart-outline" color="primary"></v-icon>
  79 |                           </template>
  80 |                           <v-list-item-title>Cart ID</v-list-item-title>
  81 |                           <v-list-item-subtitle>{{ activeCartDetails.cartId }}</v-list-item-subtitle>
  82 |                         </v-list-item>
  83 |                       </v-col>
  84 |                       <v-col cols="12" sm="6">
  85 |                         <v-list-item>
  86 |                           <template v-slot:prepend>
  87 |                             <v-icon icon="mdi-text-box-outline" color="primary"></v-icon>
  88 |                           </template>
  89 |                           <v-list-item-title>Description</v-list-item-title>
  90 |                           <v-list-item-subtitle>{{ activeCartDetails.description || 'No description' }}</v-list-item-subtitle>
  91 |                         </v-list-item>
  92 |                       </v-col>
  93 |                       <v-col cols="12" sm="6">
  94 |                         <v-list-item>
  95 |                           <template v-slot:prepend>
  96 |                             <v-icon icon="mdi-calendar-clock" color="primary"></v-icon>
  97 |                           </template>
  98 |                           <v-list-item-title>Expiration</v-list-item-title>
  99 |                           <v-list-item-subtitle>{{ formatDate(activeCartDetails.expire) }}</v-list-item-subtitle>
 100 |                         </v-list-item>
 101 |                       </v-col>
 102 |                       <v-col cols="12" sm="6">
 103 |                         <v-list-item>
 104 |                           <template v-slot:prepend>
 105 |                             <v-icon icon="mdi-package-variant-closed" color="primary"></v-icon>
 106 |                           </template>
 107 |                           <v-list-item-title>Items</v-list-item-title>
 108 |                           <v-list-item-subtitle>{{ activeCartDetails.items?.length || 0 }} items</v-list-item-subtitle>
 109 |                         </v-list-item>
 110 |                       </v-col>
 111 |                     </v-row>
 112 | 
 113 |                     <!-- Cart Items Section -->
 114 |                     <v-divider class="my-4"></v-divider>
 115 |                     <div v-if="activeCartDetails && activeCartDetails.items && activeCartDetails.items.length > 0">
 116 |                       <h3 class="text-subtitle-1 font-weight-bold mb-2">Cart Items</h3>
 117 |                       <v-card v-for="(itemId, index) in activeCartDetails.items" :key="index" class="mb-4" variant="outlined">
 118 |                         <v-card-item>
 119 |                           <v-card-title>
 120 |                             <div class="d-flex align-center">
 121 |                               <span>Item #{{ index + 1 }}</span>
 122 |                               <v-chip
 123 |                                 v-if="cartItemDetails[itemId]"
 124 |                                 :color="getItemStatusColor(cartItemDetails[itemId])"
 125 |                                 size="small"
 126 |                                 class="ml-2"
 127 |                               >
 128 |                                 {{ cartItemDetails[itemId]?.readOnly ? 'Read Only' : 'Active' }}
 129 |                               </v-chip>
 130 |                             </div>
 131 |                           </v-card-title>
 132 | 
 133 |                           <v-card-text>
 134 |                             <div v-if="!cartItemDetails[itemId]" class="d-flex align-center">
 135 |                               <v-progress-circular indeterminate size="20" width="2" color="primary" class="mr-2"></v-progress-circular>
 136 |                               <span>Loading item details...</span>
 137 |                             </div>
 138 | 
 139 |                             <v-row v-else>
 140 |                               <v-col cols="12" sm="6">
 141 |                                 <v-card-title>{{ cartItemDetails[itemId]?.description || cartItemDetails[itemId]?.planCode }}</v-card-title>
 142 |                                 <v-card-subtitle v-if="cartItemDetails[itemId]?.description && cartItemDetails[itemId]?.planCode">{{ cartItemDetails[itemId]?.planCode }}</v-card-subtitle>
 143 | 
 144 |                                 <v-chip
 145 |                                   v-if="cartItemDetails[itemId]?.settings?.quantity"
 146 |                                   color="primary"
 147 |                                   size="small"
 148 |                                   class="mt-2"
 149 |                                   prepend-icon="mdi-numeric"
 150 |                                 >
 151 |                                   Quantity: {{ cartItemDetails[itemId]?.settings?.quantity }}
 152 |                                 </v-chip>
 153 | 
 154 |                                 <v-list density="compact" class="mt-2">
 155 |                                   <v-list-item>
 156 |                                     <template v-slot:prepend>
 157 |                                       <v-icon icon="mdi-card-bulleted-outline" color="primary"></v-icon>
 158 |                                     </template>
 159 |                                     <v-list-item-title>Product</v-list-item-title>
 160 |                                     <v-list-item-subtitle>{{ getProductName(cartItemDetails[itemId]?.productId) }}</v-list-item-subtitle>
 161 |                                   </v-list-item>
 162 |                                   <v-list-item>
 163 |                                     <template v-slot:prepend>
 164 |                                       <v-icon icon="mdi-tag" color="primary"></v-icon>
 165 |                                     </template>
 166 |                                     <v-list-item-title>Plan Code</v-list-item-title>
 167 |                                     <v-list-item-subtitle>{{ cartItemDetails[itemId]?.settings?.planCode }}</v-list-item-subtitle>
 168 |                                   </v-list-item>
 169 |                                 </v-list>
 170 |                               </v-col>
 171 | 
 172 |                               <v-col cols="12" sm="6">
 173 |                                 <v-list density="compact">
 174 |                                   <v-list-item v-if="cartItemDetails[itemId]?.prices">
 175 |                                     <template v-slot:prepend>
 176 |                                       <v-icon icon="mdi-currency-eur" color="primary"></v-icon>
 177 |                                     </template>
 178 |                                     <v-list-item-title>Price</v-list-item-title>
 179 |                                     <v-list-item-subtitle>{{ getItemPrice(cartItemDetails[itemId]) }}</v-list-item-subtitle>
 180 |                                   </v-list-item>
 181 | 
 182 |                                   <v-list-item>
 183 |                                     <template v-slot:prepend>
 184 |                                       <v-icon icon="mdi-cog-outline" color="primary"></v-icon>
 185 |                                     </template>
 186 |                                     <v-list-item-title>Settings</v-list-item-title>
 187 |                                     <v-list-item-subtitle>{{ cartItemDetails[itemId]?.configurations?.length || 0 }} configurations</v-list-item-subtitle>
 188 |                                   </v-list-item>
 189 |                                 </v-list>
 190 |                               </v-col>
 191 |                             </v-row>
 192 | 
 193 |                             <!-- Pricing summary section if there are prices -->
 194 |                             <v-row>
 195 |                               <v-col v-if="cartItemDetails[itemId]?.prices && cartItemDetails[itemId]?.prices.length > 0" cols="12">
 196 |                                 <v-card variant="outlined" class="mt-2">
 197 |                                   <v-card-title class="text-subtitle-1">
 198 |                                     <v-icon icon="mdi-currency-eur" color="primary" class="mr-2"></v-icon>
 199 |                                     Pricing Summary
 200 |                                   </v-card-title>
 201 |                                   <v-card-text>
 202 |                                     <v-table density="compact">
 203 |                                       <thead>
 204 |                                         <tr>
 205 |                                           <th>Type</th>
 206 |                                           <th>Price</th>
 207 |                                         </tr>
 208 |                                       </thead>
 209 |                                       <tbody>
 210 |                                         <tr v-for="(priceItem, priceIndex) in cartItemDetails[itemId].prices" :key="priceIndex">
 211 |                                           <td>{{ priceItem.label }}</td>
 212 |                                           <td>{{ priceItem.price.text || `${priceItem.price.value} ${priceItem.price.currencyCode}` }}</td>
 213 |                                         </tr>
 214 |                                       </tbody>
 215 |                                     </v-table>
 216 |                                   </v-card-text>
 217 |                                 </v-card>
 218 |                               </v-col>
 219 | 
 220 |                               <!-- Datacenter Configuration -->
 221 |                               <v-col cols="12" class="mt-2">
 222 |                                 <v-card variant="outlined">
 223 |                                   <v-card-title class="text-subtitle-1">
 224 |                                     <v-icon icon="mdi-map-marker" color="primary" class="mr-2"></v-icon>
 225 |                                     Datacenter Configuration
 226 |                                   </v-card-title>
 227 |                                   <v-card-text>
 228 |                                     <v-select
 229 |                                       v-model="selectedDatacenters[itemId]"
 230 |                                       :items="availableDatacenters"
 231 |                                       item-title="name"
 232 |                                       item-value="code"
 233 |                                       label="Select Datacenter"
 234 |                                       hint="Choose the datacenter location for this item"
 235 |                                       persistent-hint
 236 |                                       :disabled="activeCartDetails.readOnly || configuringDatacenter[itemId]"
 237 |                                       class="mb-2"
 238 |                                     >
 239 |                                       <template v-slot:item="{ item, props }">
 240 |                                         <v-list-item v-bind="props">
 241 |                                           <template v-slot:prepend>
 242 |                                             <v-icon :icon="getDatacenterIcon(item.raw.code)" color="primary"></v-icon>
 243 |                                           </template>
 244 |                                           <v-list-item-title>{{ item.raw.name }}</v-list-item-title>
 245 |                                           <v-list-item-subtitle>{{ item.raw.code }}</v-list-item-subtitle>
 246 |                                         </v-list-item>
 247 |                                       </template>
 248 |                                     </v-select>
 249 | 
 250 |                                     <p class="text-caption mt-1">Current datacenter:
 251 |                                       <v-chip size="x-small" color="info" v-if="getItemDatacenter(itemId)">
 252 |                                         {{ getItemDatacenter(itemId) }}
 253 |                                       </v-chip>
 254 |                                       <span v-else>Not configured</span>
 255 |                                     </p>
 256 | 
 257 |                                     <v-btn
 258 |                                       color="primary"
 259 |                                       variant="tonal"
 260 |                                       size="small"
 261 |                                       class="mt-2"
 262 |                                       :loading="configuringDatacenter[itemId]"
 263 |                                       :disabled="!selectedDatacenters[itemId] || activeCartDetails.readOnly"
 264 |                                       @click="configureItemDatacenter(itemId, selectedDatacenters[itemId])"
 265 |                                     >
 266 |                                       Apply Datacenter
 267 |                                     </v-btn>
 268 |                                   </v-card-text>
 269 |                                 </v-card>
 270 |                               </v-col>
 271 | 
 272 |                               <!-- OS Configuration -->
 273 |                               <v-col cols="12" class="mt-2">
 274 |                                 <v-card variant="outlined">
 275 |                                   <v-card-title class="text-subtitle-1">
 276 |                                     <v-icon icon="mdi-server-network" color="primary" class="mr-2"></v-icon>
 277 |                                     Operating System Configuration
 278 |                                   </v-card-title>
 279 |                                   <v-card-text>
 280 |                                     <v-select
 281 |                                       v-model="selectedOS[itemId]"
 282 |                                       :items="availableOS"
 283 |                                       item-title="name"
 284 |                                       item-value="code"
 285 |                                       label="Select Operating System"
 286 |                                       hint="Choose the OS for this server"
 287 |                                       persistent-hint
 288 |                                       :disabled="activeCartDetails.readOnly || configuringOS[itemId]"
 289 |                                       class="mb-2"
 290 |                                     >
 291 |                                       <template v-slot:item="{ item, props }">
 292 |                                         <v-list-item v-bind="props">
 293 |                                           <template v-slot:prepend>
 294 |                                             <v-icon :icon="getOSIcon(item.raw.code)" color="primary"></v-icon>
 295 |                                           </template>
 296 |                                           <v-list-item-title>{{ item.raw.name }}</v-list-item-title>
 297 |                                           <v-list-item-subtitle>{{ item.raw.code }}</v-list-item-subtitle>
 298 |                                         </v-list-item>
 299 |                                       </template>
 300 |                                     </v-select>
 301 | 
 302 |                                     <p class="text-caption mt-1">Current OS:
 303 |                                       <v-chip size="x-small" color="info" v-if="getItemOS(itemId)">
 304 |                                         {{ getItemOS(itemId) }}
 305 |                                       </v-chip>
 306 |                                       <span v-else>Not configured</span>
 307 |                                     </p>
 308 | 
 309 |                                     <v-btn
 310 |                                       color="primary"
 311 |                                       variant="tonal"
 312 |                                       size="small"
 313 |                                       class="mt-2"
 314 |                                       :loading="configuringOS[itemId]"
 315 |                                       :disabled="!selectedOS[itemId] || activeCartDetails.readOnly"
 316 |                                       @click="configureItemOS(itemId, selectedOS[itemId])"
 317 |                                     >
 318 |                                       Apply OS
 319 |                                     </v-btn>
 320 |                                   </v-card-text>
 321 |                                 </v-card>
 322 |                               </v-col>
 323 | 
 324 |                               <!-- Configuration Details Section -->
 325 |                               <v-col cols="12">
 326 |                                 <v-card variant="outlined" class="mt-2">
 327 |                                   <v-card-title class="text-subtitle-1 d-flex align-center">
 328 |                                     <v-icon icon="mdi-cog" color="primary" class="mr-2"></v-icon>
 329 |                                     Configuration Details
 330 |                                     <v-spacer></v-spacer>
 331 |                                     <v-btn
 332 |                                       v-if="!activeCartDetails.readOnly"
 333 |                                       icon="mdi-refresh"
 334 |                                       variant="text"
 335 |                                       size="small"
 336 |                                       color="primary"
 337 |                                       @click="fetchActiveCartDetails"
 338 |                                       :loading="loadingActiveCart"
 339 |                                       :disabled="activeCartDetails.readOnly"
 340 |                                     ></v-btn>
 341 |                                   </v-card-title>
 342 |                                   <v-card-text>
 343 |                                     <div v-if="!cartItemDetails[itemId]?.configurationDetails || cartItemDetails[itemId]?.configurationDetails.length === 0">
 344 |                                       <v-alert
 345 |                                         type="info"
 346 |                                         density="compact"
 347 |                                         variant="tonal"
 348 |                                         text="No configurations found for this item."
 349 |                                         class="mb-2"
 350 |                                       ></v-alert>
 351 |                                     </div>
 352 |                                     <v-table v-else density="compact">
 353 |                                       <thead>
 354 |                                         <tr>
 355 |                                           <th>Configuration ID</th>
 356 |                                           <th>Label</th>
 357 |                                           <th>Value</th>
 358 |                                           <th v-if="!activeCartDetails.readOnly">Actions</th>
 359 |                                         </tr>
 360 |                                       </thead>
 361 |                                       <tbody>
 362 |                                         <tr v-for="(config, configIndex) in cartItemDetails[itemId].configurationDetails" :key="configIndex">
 363 |                                           <td>{{ config.id }}</td>
 364 |                                           <td>{{ config.label }}</td>
 365 |                                           <td>{{ config.value }}</td>
 366 |                                           <td v-if="!activeCartDetails.readOnly">
 367 |                                             <div class="d-flex">
 368 |                                               <v-btn
 369 |                                                 density="compact"
 370 |                                                 icon="mdi-pencil"
 371 |                                                 variant="text"
 372 |                                                 color="primary"
 373 |                                                 size="small"
 374 |                                                 @click="openConfigEditor(itemId, config)"
 375 |                                                 :disabled="editingConfiguration[itemId]"
 376 |                                                 class="mr-1"
 377 |                                               ></v-btn>
 378 |                                               <v-btn
 379 |                                                 density="compact"
 380 |                                                 icon="mdi-delete"
 381 |                                                 variant="text"
 382 |                                                 color="error"
 383 |                                                 size="small"
 384 |                                                 @click="openDeleteConfirmation(itemId, config)"
 385 |                                                 :disabled="editingConfiguration[itemId]"
 386 |                                               ></v-btn>
 387 |                                             </div>
 388 |                                           </td>
 389 |                                         </tr>
 390 |                                       </tbody>
 391 |                                     </v-table>
 392 | 
 393 |                                     <!-- Add new configuration section -->
 394 |                                     <div class="mt-4" v-if="!activeCartDetails.readOnly">
 395 |                                       <v-divider class="mb-2"></v-divider>
 396 |                                       <v-row>
 397 |                                         <v-col cols="12">
 398 |                                           <v-select
 399 |                                             v-model="newConfig.label"
 400 |                                             :items="commonConfigurations"
 401 |                                             label="Select Configuration Type"
 402 |                                             density="compact"
 403 |                                             class="mb-2"
 404 |                                             @update:model-value="handleConfigTypeChange"
 405 |                                           ></v-select>
 406 | 
 407 |                                           <v-alert
 408 |                                             v-if="configurationInfo[newConfig.label]"
 409 |                                             type="info"
 410 |                                             density="compact"
 411 |                                             variant="tonal"
 412 |                                             class="mb-2"
 413 |                                           >
 414 |                                             {{ configurationInfo[newConfig.label] }}
 415 |                                           </v-alert>
 416 |                                         </v-col>
 417 |                                         <v-col cols="12">
 418 |                                           <div class="d-flex align-center">
 419 |                                             <v-text-field
 420 |                                               v-if="!isInCommonConfigurations(newConfig.label)"
 421 |                                               v-model="newConfig.label"
 422 |                                               label="Custom Configuration Name"
 423 |                                               density="compact"
 424 |                                               class="mr-2"
 425 |                                               hide-details
 426 |                                             ></v-text-field>
 427 |                                             <v-text-field
 428 |                                               v-model="newConfig.value"
 429 |                                               label="Configuration Value"
 430 |                                               density="compact"
 431 |                                               class="mr-2"
 432 |                                               hide-details
 433 |                                             ></v-text-field>
 434 |                                             <v-btn
 435 |                                               color="success"
 436 |                                               size="small"
 437 |                                               density="compact"
 438 |                                               @click="addItemConfiguration(itemId, newConfig.label, newConfig.value)"
 439 |                                               :loading="addingConfiguration[itemId]"
 440 |                                               :disabled="!newConfig.label || !newConfig.value"
 441 |                                             >
 442 |                                               Add
 443 |                                             </v-btn>
 444 |                                           </div>
 445 |                                         </v-col>
 446 |                                       </v-row>
 447 |                                     </div>
 448 |                                   </v-card-text>
 449 |                                 </v-card>
 450 |                               </v-col>
 451 |                             </v-row>
 452 | 
 453 |                             <!-- Action buttons -->
 454 |                             <v-card-actions v-if="cartItemDetails[itemId]">
 455 |                               <v-btn
 456 |                                 color="error"
 457 |                                 variant="text"
 458 |                                 prepend-icon="mdi-delete"
 459 |                                 @click="removeItemFromCart(itemId)"
 460 |                                 :loading="deletingItems[itemId]"
 461 |                                 :disabled="activeCartDetails.readOnly"
 462 |                               >
 463 |                                 Remove
 464 |                               </v-btn>
 465 |                             </v-card-actions>
 466 |                           </v-card-text>
 467 |                         </v-card-item>
 468 |                       </v-card>
 469 |                     </div>
 470 |                     <div v-else>
 471 |                       <v-alert type="info" text="No items in this cart" class="mt-2"></v-alert>
 472 |                     </div>
 473 |                   </v-card-text>
 474 |                   <v-card-actions>
 475 |                     <v-btn
 476 |                       color="primary"
 477 |                       variant="text"
 478 |                       prepend-icon="mdi-refresh"
 479 |                       @click="fetchActiveCartDetails"
 480 |                       :loading="loadingActiveCart"
 481 |                     >
 482 |                       Refresh Cart Details
 483 |                     </v-btn>
 484 |                     <v-spacer></v-spacer>
 485 |                     <v-btn
 486 |                       color="success"
 487 |                       variant="elevated"
 488 |                       prepend-icon="mdi-cash-register"
 489 |                       @click="checkoutCart"
 490 |                       :loading="checkingOut"
 491 |                       :disabled="activeCartDetails.readOnly || !activeCartDetails.items || activeCartDetails.items.length === 0"
 492 |                     >
 493 |                       Checkout
 494 |                     </v-btn>
 495 |                     <v-btn
 496 |                       color="error"
 497 |                       variant="text"
 498 |                       prepend-icon="mdi-close-circle"
 499 |                       @click="clearActiveCart"
 500 |                       :disabled="activeCartDetails.readOnly"
 501 |                     >
 502 |                       Clear Active Cart
 503 |                     </v-btn>
 504 |                   </v-card-actions>
 505 |                 </v-card>
 506 |               </div>
 507 | 
 508 |               <!-- Available Carts -->
 509 |               <h3 class="text-subtitle-1 font-weight-bold mb-2">Available Carts</h3>
 510 |               <v-alert
 511 |                 v-if="cartItems.length === 0 && !loading"
 512 |                 type="info"
 513 |                 text="Your cart is empty"
 514 |                 class="mb-4"
 515 |               ></v-alert>
 516 |               <v-list v-else lines="three">
 517 |                 <v-list-item
 518 |                   v-for="(item, index) in cartItems"
 519 |                   :key="index"
 520 |                   :title="item.description || 'Cart Item'"
 521 |                   :subtitle="'ID: ' + item.cartId"
 522 |                   :active="activeCartId === item.cartId"
 523 |                   @click="setActiveCart(item.cartId)"
 524 |                 >
 525 |                   <template v-slot:prepend>
 526 |                     <v-chip
 527 |                       :color="item.readOnly ? 'error' : 'success'"
 528 |                       size="small"
 529 |                       class="text-caption"
 530 |                     >
 531 |                       {{ item.readOnly ? 'Read Only' : 'Active' }}
 532 |                     </v-chip>
 533 |                     <v-icon
 534 |                       v-if="activeCartId === item.cartId"
 535 |                       icon="mdi-check-circle"
 536 |                       color="primary"
 537 |                       class="ml-2"
 538 |                     ></v-icon>
 539 |                   </template>
 540 |                   <template v-slot:append>
 541 |                     <div class="d-flex align-center">
 542 |                       <span class="text-caption text-grey me-2">
 543 |                         Expires: {{ formatDate(item.expire) }}
 544 |                       </span>
 545 |                       <v-btn
 546 |                         icon="mdi-delete"
 547 |                         variant="text"
 548 |                         color="error"
 549 |                         density="compact"
 550 |                         @click="removeFromCart(item)"
 551 |                         :disabled="item.readOnly"
 552 |                       ></v-btn>
 553 |                     </div>
 554 |                   </template>
 555 |                 </v-list-item>
 556 |               </v-list>
 557 |             </v-card-text>
 558 |             <v-card-actions>
 559 |               <v-btn
 560 |                 color="primary"
 561 |                 variant="elevated"
 562 |                 prepend-icon="mdi-refresh"
 563 |                 @click="fetchCart"
 564 |                 :loading="loading"
 565 |                 :disabled="!apiToken"
 566 |               >
 567 |                 Refresh Cart
 568 |               </v-btn>
 569 |             </v-card-actions>
 570 |           </v-window-item>
 571 | 
 572 |           <!-- Servers Tab -->
 573 |           <v-window-item value="servers">
 574 |             <servers
 575 |               :api-token="apiToken"
 576 |               :selected-site="selectedSite"
 577 |               :active-cart-id="activeCartId"
 578 |               @refresh-cart-details="fetchActiveCartDetails"
 579 |               @show-success="showSuccess"
 580 |               @show-error="showError"
 581 |             />
 582 |           </v-window-item>
 583 | 
 584 |           <!-- User Profile Tab -->
 585 |           <v-window-item value="me">
 586 |             <me
 587 |               :api-token="apiToken"
 588 |             />
 589 |           </v-window-item>
 590 | 
 591 |           <!-- Settings Tab -->
 592 |           <v-window-item value="settings">
 593 |             <Settings
 594 |               v-model:api-token="apiToken"
 595 |               v-model:selected-site="selectedSite"
 596 |               @settings-saved="fetchCart"
 597 |             />
 598 |           </v-window-item>
 599 | 
 600 |           <!-- About Tab -->
 601 |           <v-window-item value="about">
 602 |             <v-card-title class="text-h5 py-4">About OVH Cart</v-card-title>
 603 |             <v-card-text>
 604 |               <v-card variant="outlined" class="mb-4">
 605 |                 <v-card-text>
 606 |                   <div class="d-flex align-center mb-4">
 607 |                     <v-icon icon="mdi-github" color="primary" size="large" class="mr-2"></v-icon>
 608 |                     <h3 class="text-h6">GitHub Repository</h3>
 609 |                   </div>
 610 |                   <p class="mb-2">OVH Cart is an open-source project hosted on GitHub.</p>
 611 |                   <v-btn
 612 |                     color="primary"
 613 |                     variant="outlined"
 614 |                     prepend-icon="mdi-github"
 615 |                     href="https://github.com/orvice/ovhcart"
 616 |                     target="_blank"
 617 |                   >
 618 |                     View on GitHub
 619 |                   </v-btn>
 620 |                 </v-card-text>
 621 |               </v-card>
 622 |             </v-card-text>
 623 |           </v-window-item>
 624 |         </v-window>
 625 |       </v-card-text>
 626 |     </v-card>
 627 | 
 628 |     <!-- Add the new components here -->
 629 |     <v-dialog
 630 |       v-model="showCreateCartDialog"
 631 |       max-width="600"
 632 |     >
 633 |       <v-card>
 634 |         <v-card-title class="text-h5">Create New Cart</v-card-title>
 635 |         <v-card-text>
 636 |           <v-form @submit.prevent="submitCreateCart">
 637 |             <v-text-field
 638 |               v-model="newCart.description"
 639 |               label="Description"
 640 |               hint="Enter a description for your new cart"
 641 |               persistent-hint
 642 |               :rules="[v => !!v || 'Description is required']"
 643 |               required
 644 |               class="mb-4"
 645 |             ></v-text-field>
 646 | 
 647 |             <v-select
 648 |               v-model="newCart.ovhSubsidiary"
 649 |               label="OVH Subsidiary"
 650 |               :items="subsidiaries"
 651 |               hint="Select OVH subsidiary"
 652 |               persistent-hint
 653 |               required
 654 |               class="mb-4"
 655 |             ></v-select>
 656 | 
 657 |             <v-text-field
 658 |               v-model="newCart.expire"
 659 |               label="Expiration"
 660 |               type="datetime-local"
 661 |               hint="Cart will expire at this date/time (format: yyyy-MM-ddThh:mm:ss)"
 662 |               persistent-hint
 663 |               required
 664 |               class="mb-4"
 665 |             ></v-text-field>
 666 | 
 667 |             <v-switch
 668 |               v-model="newCart.readOnly"
 669 |               label="Read Only"
 670 |               hint="Make this cart read-only"
 671 |               persistent-hint
 672 |             ></v-switch>
 673 |           </v-form>
 674 |         </v-card-text>
 675 |         <v-card-actions>
 676 |           <v-spacer></v-spacer>
 677 |           <v-btn
 678 |             color="error"
 679 |             variant="text"
 680 |             @click="showCreateCartDialog = false"
 681 |           >
 682 |             Cancel
 683 |           </v-btn>
 684 |           <v-btn
 685 |             color="success"
 686 |             variant="elevated"
 687 |             @click="submitCreateCart"
 688 |             :loading="creatingCart"
 689 |           >
 690 |             Create
 691 |           </v-btn>
 692 |         </v-card-actions>
 693 |       </v-card>
 694 |     </v-dialog>
 695 | 
 696 |     <v-dialog
 697 |       v-model="showManualPlanCodeDialog"
 698 |       max-width="500px"
 699 |     >
 700 |       <v-card>
 701 |         <v-card-title class="text-h5">Add Server by Plan Code</v-card-title>
 702 |         <v-card-text>
 703 |           <v-form @submit.prevent="addServerByPlanCode">
 704 |             <v-text-field
 705 |               v-model="manualPlanCode"
 706 |               label="Plan Code"
 707 |               hint="Enter the exact OVH plan code"
 708 |               persistent-hint
 709 |               :rules="[v => !!v || 'Plan code is required']"
 710 |               required
 711 |               class="mb-4"
 712 |             ></v-text-field>
 713 | 
 714 |             <v-select
 715 |               v-model="manualDuration"
 716 |               :items="durations"
 717 |               item-title="text"
 718 |               item-value="value"
 719 |               label="Duration"
 720 |               hint="Select contract duration"
 721 |               persistent-hint
 722 |               class="mb-4"
 723 |             ></v-select>
 724 | 
 725 |             <v-text-field
 726 |               v-model="manualQuantity"
 727 |               label="Quantity"
 728 |               type="number"
 729 |               min="1"
 730 |               hint="Number of items to add"
 731 |               persistent-hint
 732 |               :rules="[v => !!v && v > 0 || 'Quantity must be at least 1']"
 733 |               required
 734 |             ></v-text-field>
 735 |           </v-form>
 736 |         </v-card-text>
 737 |         <v-card-actions>
 738 |           <v-spacer></v-spacer>
 739 |           <v-btn
 740 |             color="error"
 741 |             variant="text"
 742 |             @click="showManualPlanCodeDialog = false"
 743 |           >
 744 |             Cancel
 745 |           </v-btn>
 746 |           <v-btn
 747 |             color="success"
 748 |             variant="elevated"
 749 |             :loading="addingManualPlan"
 750 |             @click="addServerByPlanCode"
 751 |           >
 752 |             Add to Cart
 753 |           </v-btn>
 754 |         </v-card-actions>
 755 |       </v-card>
 756 |     </v-dialog>
 757 | 
 758 |     <v-dialog
 759 |       v-model="showServerDetailsDialog"
 760 |       max-width="600"
 761 |     >
 762 |       <v-card>
 763 |         <v-card-title>Server Details</v-card-title>
 764 |         <v-card-text>
 765 |           <!-- Server details content -->
 766 |         </v-card-text>
 767 |       </v-card>
 768 |     </v-dialog>
 769 | 
 770 |     <v-dialog
 771 |       v-model="confirmDeleteDialog"
 772 |       max-width="400"
 773 |     >
 774 |       <v-card>
 775 |         <v-card-title>Confirm Deletion</v-card-title>
 776 |         <v-card-text>
 777 |           Are you sure you want to delete this configuration?
 778 |         </v-card-text>
 779 |         <v-card-actions>
 780 |           <v-btn
 781 |             color="error"
 782 |             @click="confirmDelete"
 783 |           >
 784 |             Delete
 785 |           </v-btn>
 786 |           <v-btn
 787 |             @click="confirmDeleteDialog = false"
 788 |           >
 789 |             Cancel
 790 |           </v-btn>
 791 |         </v-card-actions>
 792 |       </v-card>
 793 |     </v-dialog>
 794 | 
 795 |     <v-snackbar
 796 |       v-model="showSuccessSnackbar"
 797 |       :timeout="3000"
 798 |       color="success"
 799 |     >
 800 |       {{ successMessage }}
 801 |     </v-snackbar>
 802 | 
 803 |     <v-snackbar
 804 |       v-model="showErrorSnackbar"
 805 |       :timeout="3000"
 806 |       color="error"
 807 |     >
 808 |       {{ errorMessage }}
 809 |     </v-snackbar>
 810 | 
 811 |     <!-- After all other dialogs, add the checkout dialog -->
 812 |     <v-dialog
 813 |       v-model="showCheckoutDialog"
 814 |       max-width="500px"
 815 |     >
 816 |       <v-card>
 817 |         <v-card-title>
 818 |           <v-icon icon="mdi-check-circle" color="success" class="mr-2"></v-icon>
 819 |           Checkout Successful
 820 |         </v-card-title>
 821 |         <v-card-text>
 822 |           <div class="text-body-1 mb-4">
 823 |             Your cart has been successfully checked out. Please use the link below to complete your payment.
 824 |           </div>
 825 | 
 826 |           <v-alert
 827 |             type="info"
 828 |             variant="tonal"
 829 |             icon="mdi-information"
 830 |             class="mb-4"
 831 |           >
 832 |             After payment, your order will be processed and you will receive confirmation details.
 833 |           </v-alert>
 834 | 
 835 |           <v-card variant="outlined" class="pa-3 mb-4">
 836 |             <v-card-title class="text-subtitle-1 d-flex align-center">
 837 |               <v-icon icon="mdi-link" color="primary" class="mr-2"></v-icon>
 838 |               Payment URL
 839 |             </v-card-title>
 840 |             <v-card-text>
 841 |               <div class="d-flex align-center">
 842 |                 <v-text-field
 843 |                   v-model="checkoutUrl"
 844 |                   readonly
 845 |                   variant="outlined"
 846 |                   class="flex-grow-1 mr-2"
 847 |                   dense
 848 |                 ></v-text-field>
 849 |                 <v-btn
 850 |                   icon="mdi-content-copy"
 851 |                   size="small"
 852 |                   @click="copyToClipboard(checkoutUrl)"
 853 |                   title="Copy to clipboard"
 854 |                 ></v-btn>
 855 |               </div>
 856 |             </v-card-text>
 857 |           </v-card>
 858 |         </v-card-text>
 859 |         <v-card-actions>
 860 |           <v-spacer></v-spacer>
 861 |           <v-btn
 862 |             color="primary"
 863 |             variant="text"
 864 |             @click="showCheckoutDialog = false"
 865 |           >
 866 |             Close
 867 |           </v-btn>
 868 |           <v-btn
 869 |             color="success"
 870 |             variant="elevated"
 871 |             prepend-icon="mdi-open-in-new"
 872 |             :href="checkoutUrl"
 873 |             target="_blank"
 874 |           >
 875 |             Open Payment Page
 876 |           </v-btn>
 877 |         </v-card-actions>
 878 |       </v-card>
 879 |     </v-dialog>
 880 |   </v-container>
 881 | </template>
 882 | 
 883 | <script setup>
 884 | import { ref, onMounted, watch } from 'vue'
 885 | import Me from './Me.vue'
 886 | import Servers from './Servers.vue'
 887 | import Settings from './Settings.vue'
 888 | import { availableSites } from '../config/sites'
 889 | 
 890 | const tabs = [
 891 |   { id: 'cart', name: 'Shopping Cart', icon: 'mdi-cart' },
 892 |   { id: 'servers', name: 'Servers', icon: 'mdi-server' },
 893 |   { id: 'me', name: 'User Profile', icon: 'mdi-account' },
 894 |   { id: 'settings', name: 'Settings', icon: 'mdi-cog' },
 895 |   { id: 'about', name: 'About', icon: 'mdi-information' }
 896 | ]
 897 | 
 898 | const activeTab = ref('cart')
 899 | const cartItems = ref([])
 900 | const apiToken = ref('')
 901 | const loading = ref(false)
 902 | const error = ref(null)
 903 | 
 904 | // Active cart tracking
 905 | const activeCartId = ref(null)
 906 | const activeCartDetails = ref(null)
 907 | const loadingActiveCart = ref(false)
 908 | 
 909 | // Cart item details
 910 | const cartItemDetails = ref({});
 911 | const deletingItems = ref({});
 912 | 
 913 | // 用于跟踪项目详情加载状态
 914 | const loadingItemDetails = ref(false);
 915 | 
 916 | // 监听购物车ID变化，当ID变化时重置和获取购物车详情
 917 | watch(activeCartId, (newCartId) => {
 918 |   console.log('Active cart ID changed to:', newCartId);
 919 |   // 清空之前的购物车项目详情
 920 |   cartItemDetails.value = {};
 921 | 
 922 |   if (newCartId) {
 923 |     // 当有新的购物车ID时，获取详情
 924 |     fetchActiveCartDetails();
 925 |   } else {
 926 |     // 当购物车ID被清空时，重置相关状态
 927 |     activeCartDetails.value = null;
 928 |   }
 929 | });
 930 | 
 931 | // Create cart related refs
 932 | const showCreateCartDialog = ref(false)
 933 | const creatingCart = ref(false)
 934 | const newCart = ref({
 935 |   description: '',
 936 |   ovhSubsidiary: 'IE',
 937 |   readOnly: false,
 938 |   expire: getDefaultExpireDate()
 939 | })
 940 | 
 941 | // Date picker related refs
 942 | const showExpiryPicker = ref(false)
 943 | const showExpiryTimePicker = ref(false)
 944 | const expireDatePart = ref('')
 945 | const expireTimePart = ref('')
 946 | 
 947 | // Subsidiary options
 948 | const subsidiaries = ['EU', 'CA', 'US', 'IE']
 949 | 
 950 | 
 951 | 
 952 | // Snackbar notifications
 953 | const showSuccessSnackbar = ref(false)
 954 | const showErrorSnackbar = ref(false)
 955 | const successMessage = ref('')
 956 | const errorMessage = ref('')
 957 | 
 958 | // Server catalog data
 959 | const serverCatalog = ref(null)
 960 | const loadingServers = ref(false)
 961 | const serverError = ref(null)
 962 | const selectedServer = ref(null)
 963 | const showServerDetailsDialog = ref(false)
 964 | 
 965 | // Site selection
 966 | const selectedSite = ref(null)
 967 | 
 968 | // Theme selection
 969 | const selectedTheme = ref('auto')
 970 | 
 971 | // In the script section, add these variables
 972 | const selectedDuration = ref('P1M'); // Default to 1 month
 973 | const durations = [
 974 |   { value: 'P1M', text: '1 Month' },
 975 |   { value: 'P3M', text: '3 Months' },
 976 |   { value: 'P6M', text: '6 Months' },
 977 |   { value: 'P12M', text: '12 Months' }
 978 | ];
 979 | 
 980 | // Datacenter configuration
 981 | const selectedDatacenters = ref({});
 982 | const configuringDatacenter = ref({});
 983 | const availableDatacenters = [
 984 |   { code: 'bhs', name: 'Beauharnois, Canada' },
 985 |   { code: 'rbx', name: 'Roubaix, France' },
 986 |   { code: 'gra', name: 'Gravelines, France' },
 987 |   { code: 'fra', name: 'Frankfurt, Germany' }
 988 | ];
 989 | 
 990 | // OS configuration
 991 | const selectedOS = ref({});
 992 | const configuringOS = ref({});
 993 | const availableOS = [
 994 |   { code: 'none_64.en', name: 'No OS (64-bit)' }
 995 |   // More OS options can be added here when available
 996 | ];
 997 | 
 998 | // Configuration editing
 999 | const editingConfiguration = ref({});
1000 | const addingConfiguration = ref({});
1001 | const deleteConfigLoading = ref({});
1002 | const newConfig = ref({ label: '', value: '' });
1003 | const configEditorDialog = ref(false);
1004 | const currentEditConfig = ref({ itemId: null, config: null, newValue: '', configId: null });
1005 | 
1006 | // Common configurations
1007 | const commonConfigurations = [
1008 |   'dedicated_datacenter',
1009 |   'hostname',
1010 |   'storage_size',
1011 |   'cpu_count',
1012 |   'memory_size',
1013 |   'os_type',
1014 |   'network_type',
1015 |   'backup_option',
1016 |   'monitoring_level',
1017 |   'custom_configuration' // This will allow users to enter a custom configuration name
1018 | ];
1019 | 
1020 | // Configuration info descriptions
1021 | const configurationInfo = {
1022 |   'dedicated_datacenter': 'Set the datacenter where your server will be located (bhs, rbx, gra, fra).',
1023 |   'hostname': 'Set the hostname for your server, e.g., server1.example.com',
1024 |   'storage_size': 'Specify storage size in GB, e.g., 500',
1025 |   'cpu_count': 'Specify the number of CPU cores, e.g., 4',
1026 |   'memory_size': 'Specify RAM size in GB, e.g., 32',
1027 |   'os_type': 'Specify operating system, e.g., ubuntu20, centos8, windows2019',
1028 |   'network_type': 'Specify network configuration, e.g., public, private, hybrid',
1029 |   'backup_option': 'Specify backup option, e.g., daily, weekly, none',
1030 |   'monitoring_level': 'Specify monitoring level, e.g., basic, standard, premium'
1031 | };
1032 | 
1033 | // Available configurations
1034 | const loadingAvailableConfigurations = ref({});
1035 | const itemAvailableConfigurations = ref({});
1036 | 
1037 | // Add confirmation dialog refs
1038 | const confirmDeleteDialog = ref(false);
1039 | const configToDelete = ref({ itemId: null, configId: null, label: '' });
1040 | 
1041 | // On mounted, load saved site from localStorage
1042 | onMounted(() => {
1043 |   // Set default site first to avoid undefined errors
1044 |   selectedSite.value = availableSites.find(site => site.code === 'IE')
1045 | 
1046 |   const savedToken = localStorage.getItem('ovhApiToken')
1047 |   if (savedToken) {
1048 |     apiToken.value = savedToken
1049 | 
1050 |     // Load active cart ID
1051 |     const savedCartId = localStorage.getItem('ovhActiveCartId')
1052 |     if (savedCartId) {
1053 |       activeCartId.value = savedCartId
1054 |       fetchActiveCartDetails()
1055 |     }
1056 | 
1057 |     // Load saved site
1058 |     const savedSiteCode = localStorage.getItem('ovhSiteCode')
1059 |     if (savedSiteCode) {
1060 |       const foundSite = availableSites.find(site => site.code === savedSiteCode)
1061 |       if (foundSite) {
1062 |         selectedSite.value = foundSite
1063 |       }
1064 |     }
1065 | 
1066 |     // Load saved theme
1067 |     const savedTheme = localStorage.getItem('ovhTheme')
1068 |     if (savedTheme) {
1069 |       selectedTheme.value = savedTheme
1070 |       applyTheme(savedTheme)
1071 |     } else {
1072 |       // Default to auto theme
1073 |       applyTheme('auto')
1074 |     }
1075 | 
1076 |     fetchCart()
1077 |   }
1078 | })
1079 | 
1080 | // Function to format date
1081 | const formatDate = (dateString) => {
1082 |   if (!dateString) return 'N/A'
1083 |   const date = new Date(dateString)
1084 |   return date.toLocaleString()
1085 | }
1086 | 
1087 | // Function to show success notification
1088 | const showSuccess = (message) => {
1089 |   successMessage.value = message
1090 |   showSuccessSnackbar.value = true
1091 | }
1092 | 
1093 | // Function to show error notification
1094 | const showError = (message) => {
1095 |   errorMessage.value = message
1096 |   showErrorSnackbar.value = true
1097 | }
1098 | 
1099 | // Function to get API endpoint based on selected site
1100 | const getApiEndpoint = () => {
1101 |   // Always use eu.api.ovh.com regardless of site selection
1102 |   return 'https://eu.api.ovh.com/v1';
1103 | }
1104 | 
1105 | // Function to apply theme
1106 | const applyTheme = (theme) => {
1107 |   if (theme === 'auto') {
1108 |     // Check system preference
1109 |     const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
1110 |     document.documentElement.setAttribute('data-theme', prefersDark ? 'dark' : 'light')
1111 |   } else {
1112 |     // Apply specified theme
1113 |     document.documentElement.setAttribute('data-theme', theme)
1114 |   }
1115 | }
1116 | 
1117 | // Watch for theme changes to apply immediately
1118 | watch(selectedTheme, (newTheme) => {
1119 |   applyTheme(newTheme)
1120 | })
1121 | 
1122 | // Function to fetch cart data
1123 | const fetchCart = async () => {
1124 |   if (!apiToken.value) return
1125 | 
1126 |   loading.value = true
1127 |   error.value = null
1128 | 
1129 |   try {
1130 |     const headers = {
1131 |       'Authorization': `Bearer ${apiToken.value}`,
1132 |       'Content-Type': 'application/json'
1133 |     }
1134 | 
1135 |     // First, get the cart list
1136 |     const apiEndpoint = getApiEndpoint()
1137 |     const cartListResponse = await fetch(`${apiEndpoint}/order/cart`, {
1138 |       headers
1139 |     })
1140 | 
1141 |     if (!cartListResponse.ok) {
1142 |       throw new Error(`Failed to fetch cart list: ${cartListResponse.status}`)
1143 |     }
1144 | 
1145 |     const cartIds = await cartListResponse.json()
1146 | 
1147 |     // If there are carts, fetch details for each
1148 |     if (cartIds && cartIds.length) {
1149 |       const cartDetails = []
1150 | 
1151 |       for (const cartId of cartIds) {
1152 |         const cartDetailResponse = await fetch(`${apiEndpoint}/order/cart/${cartId}`, {
1153 |           headers
1154 |         })
1155 | 
1156 |         if (cartDetailResponse.ok) {
1157 |           const detail = await cartDetailResponse.json()
1158 |           cartDetails.push(detail)
1159 |         }
1160 |       }
1161 | 
1162 |       cartItems.value = cartDetails
1163 |     } else {
1164 |       cartItems.value = []
1165 |     }
1166 |   } catch (err) {
1167 |     console.error('Error fetching cart:', err)
1168 |     error.value = err
1169 |     showError(`Error fetching cart: ${err.message}`)
1170 |   } finally {
1171 |     loading.value = false
1172 |   }
1173 | }
1174 | 
1175 | const removeFromCart = (item) => {
1176 |   // Implement cart item removal functionality
1177 |   console.log('Remove item from cart:', item)
1178 | }
1179 | 
1180 | // Function to get default expire date (current time + 7 days) in proper format for datetime-local input
1181 | function getDefaultExpireDate() {
1182 |   const date = new Date();
1183 |   date.setDate(date.getDate() + 7);
1184 | 
1185 |   // Format as yyyy-MM-ddThh:mm:ss (compatible with datetime-local input)
1186 |   const year = date.getFullYear();
1187 |   const month = String(date.getMonth() + 1).padStart(2, '0');
1188 |   const day = String(date.getDate()).padStart(2, '0');
1189 |   const hours = String(date.getHours()).padStart(2, '0');
1190 |   const minutes = String(date.getMinutes()).padStart(2, '0');
1191 |   const seconds = String(date.getSeconds()).padStart(2, '0');
1192 | 
1193 |   return `${year}-${month}-${day}T${hours}:${minutes}:${seconds}`;
1194 | }
1195 | 
1196 | 
1197 | // Function to show create cart dialog
1198 | const createCart = () => {
1199 |   newCart.value = {
1200 |     description: '',
1201 |     ovhSubsidiary: selectedSite.value ? selectedSite.value.code : 'IE',
1202 |     readOnly: false,
1203 |     expire: getDefaultExpireDate() // This now returns properly formatted date string
1204 |   }
1205 | 
1206 |   showCreateCartDialog.value = true
1207 | }
1208 | 
1209 | // Function to submit new cart creation
1210 | const submitCreateCart = async () => {
1211 |   if (!apiToken.value) return;
1212 | 
1213 |   creatingCart.value = true;
1214 | 
1215 |   try {
1216 |     const headers = {
1217 |       'Authorization': `Bearer ${apiToken.value}`,
1218 |       'Content-Type': 'application/json'
1219 |     };
1220 | 
1221 |     // Convert the datetime-local input value to ISO 8601 format for the API
1222 |     let expireDate = new Date(newCart.value.expire);
1223 |     let expireISOString = expireDate.toISOString();
1224 | 
1225 |     const apiEndpoint = getApiEndpoint();
1226 |     const response = await fetch(`${apiEndpoint}/order/cart`, {
1227 |       method: 'POST',
1228 |       headers,
1229 |       body: JSON.stringify({
1230 |         ovhSubsidiary: newCart.value.ovhSubsidiary,
1231 |         description: newCart.value.description,
1232 |         readOnly: newCart.value.readOnly,
1233 |         expire: expireISOString // Use ISO string format for the API
1234 |       })
1235 |     });
1236 | 
1237 |     if (!response.ok) {
1238 |       const errorData = await response.json();
1239 |       throw new Error(`Failed to create cart: ${response.status} - ${errorData.message || JSON.stringify(errorData)}`);
1240 |     }
1241 | 
1242 |     const result = await response.json();
1243 | 
1244 |     // Store the cart ID in localStorage and set as active
1245 |     localStorage.setItem('ovhActiveCartId', result.cartId);
1246 |     activeCartId.value = result.cartId;
1247 |     activeCartDetails.value = result;
1248 | 
1249 |     showSuccess(`Cart created successfully! Cart ID: ${result.cartId}`);
1250 |     showCreateCartDialog.value = false;
1251 | 
1252 |     // Refresh cart data to include the new cart
1253 |     await fetchCart();
1254 |   } catch (err) {
1255 |     console.error('Error creating cart:', err);
1256 |     showError(`Error creating cart: ${err.message}`);
1257 |   } finally {
1258 |     creatingCart.value = false;
1259 |   }
1260 | }
1261 | 
1262 | // Function to set active cart
1263 | const setActiveCart = (cartId) => {
1264 |   activeCartId.value = cartId
1265 |   localStorage.setItem('ovhActiveCartId', cartId)
1266 |   fetchActiveCartDetails()
1267 |   showSuccess(`Cart ${cartId} set as active`)
1268 | }
1269 | 
1270 | // Function to clear active cart
1271 | const clearActiveCart = () => {
1272 |   activeCartId.value = null
1273 |   activeCartDetails.value = null
1274 |   localStorage.removeItem('ovhActiveCartId')
1275 |   showSuccess('Active cart cleared')
1276 | }
1277 | 
1278 | // Function to fetch active cart details
1279 | const fetchActiveCartDetails = async () => {
1280 |   if (!apiToken.value || !activeCartId.value) return
1281 | 
1282 |   loadingActiveCart.value = true
1283 | 
1284 |   try {
1285 |     const headers = {
1286 |       'Authorization': `Bearer ${apiToken.value}`,
1287 |       'Content-Type': 'application/json'
1288 |     }
1289 | 
1290 |     const apiEndpoint = getApiEndpoint()
1291 |     const response = await fetch(`${apiEndpoint}/order/cart/${activeCartId.value}`, {
1292 |       headers
1293 |     })
1294 | 
1295 |     if (!response.ok) {
1296 |       throw new Error(`Failed to fetch cart details: ${response.status}`)
1297 |     }
1298 | 
1299 |     const cartDetails = await response.json()
1300 |     activeCartDetails.value = cartDetails
1301 |     console.log('Active cart details:', cartDetails)
1302 | 
1303 |     // Fetch details for each item
1304 |     if (cartDetails.items && cartDetails.items.length > 0) {
1305 |       fetchCartItemDetails(cartDetails.items);
1306 |     }
1307 |   } catch (err) {
1308 |     console.error('Error fetching active cart details:', err)
1309 |     showError(`Error fetching active cart details: ${err.message}`)
1310 |     activeCartDetails.value = null
1311 |   } finally {
1312 |     loadingActiveCart.value = false
1313 |   }
1314 | }
1315 | 
1316 | // Function to fetch item details
1317 | const fetchCartItemDetails = async (itemIds) => {
1318 |   if (!apiToken.value || !activeCartId.value || !itemIds || itemIds.length === 0) return;
1319 | 
1320 |   loadingItemDetails.value = true;
1321 |   console.log('Fetching details for cart items:', itemIds);
1322 | 
1323 |   try {
1324 |     const headers = {
1325 |       'Authorization': `Bearer ${apiToken.value}`,
1326 |       'Content-Type': 'application/json'
1327 |     };
1328 | 
1329 |     const apiEndpoint = getApiEndpoint();
1330 | 
1331 |     // 初始化临时存储对象，确保Vue的响应式系统能够正确检测到所有变更
1332 |     const tempDetails = {};
1333 | 
1334 |     // Fetch details for each item in parallel
1335 |     const promises = itemIds.map(async (itemId) => {
1336 |       try {
1337 |         console.log(`Fetching details for item ${itemId}...`);
1338 |         const url = `${apiEndpoint}/order/cart/${activeCartId.value}/item/${itemId}`;
1339 |         const response = await fetch(url, { headers });
1340 | 
1341 |         if (!response.ok) {
1342 |           console.error(`Failed to fetch item ${itemId} details:`, response.status);
1343 |           tempDetails[itemId] = { error: `Failed to load: ${response.status}` };
1344 |           return;
1345 |         }
1346 | 
1347 |         const itemDetails = await response.json();
1348 |         console.log(`Received item ${itemId} details:`, itemDetails);
1349 | 
1350 |         // 存储到临时对象
1351 |         tempDetails[itemId] = itemDetails;
1352 | 
1353 |         // Fetch configuration details if configurations array exists
1354 |         if (itemDetails.configurations && Array.isArray(itemDetails.configurations) && itemDetails.configurations.length > 0) {
1355 |           // Store the configuration IDs
1356 |           const configIds = [...itemDetails.configurations];
1357 |           // Initialize configurations array to store detailed config objects
1358 |           tempDetails[itemId].configurationDetails = [];
1359 | 
1360 |           // Fetch each configuration detail
1361 |           const configPromises = configIds.map(async (configId) => {
1362 |             try {
1363 |               const configUrl = `${apiEndpoint}/order/cart/${activeCartId.value}/item/${itemId}/configuration/${configId}`;
1364 |               const configResponse = await fetch(configUrl, { headers });
1365 | 
1366 |               if (!configResponse.ok) {
1367 |                 console.error(`Failed to fetch configuration ${configId} details:`, configResponse.status);
1368 |                 return;
1369 |               }
1370 | 
1371 |               const configDetails = await configResponse.json();
1372 |               console.log(`Configuration ${configId} details:`, configDetails);
1373 | 
1374 |               // Add to the item's configuration details array
1375 |               tempDetails[itemId].configurationDetails.push(configDetails);
1376 |             } catch (err) {
1377 |               console.error(`Error fetching configuration ${configId} details:`, err);
1378 |             }
1379 |           });
1380 | 
1381 |           await Promise.all(configPromises);
1382 |         }
1383 |       } catch (err) {
1384 |         console.error(`Error fetching item ${itemId} details:`, err);
1385 |         tempDetails[itemId] = { error: err.message };
1386 |       }
1387 |     });
1388 | 
1389 |     // 等待所有Promise完成
1390 |     await Promise.all(promises);
1391 | 
1392 |     // 一次性将所有结果更新到响应式对象，确保Vue能正确响应变化
1393 |     cartItemDetails.value = { ...tempDetails };
1394 |     console.log('All cart item details loaded:', cartItemDetails.value);
1395 |   } catch (err) {
1396 |     console.error('Error in fetchCartItemDetails:', err);
1397 |     showError(`Error loading cart items: ${err.message}`);
1398 |   } finally {
1399 |     loadingItemDetails.value = false;
1400 |   }
1401 | }
1402 | 
1403 | // Function to remove item from cart
1404 | const removeItemFromCart = async (itemId) => {
1405 |   if (!apiToken.value || !activeCartId.value) return;
1406 | 
1407 |   deletingItems.value[itemId] = true;
1408 | 
1409 |   try {
1410 |     const headers = {
1411 |       'Authorization': `Bearer ${apiToken.value}`,
1412 |       'Content-Type': 'application/json'
1413 |     };
1414 | 
1415 |     const apiEndpoint = getApiEndpoint();
1416 |     const url = `${apiEndpoint}/order/cart/${activeCartId.value}/item/${itemId}`;
1417 | 
1418 |     const response = await fetch(url, {
1419 |       method: 'DELETE',
1420 |       headers
1421 |     });
1422 | 
1423 |     if (!response.ok) {
1424 |       throw new Error(`Failed to remove item: ${response.status}`);
1425 |     }
1426 | 
1427 |     showSuccess('Item removed from cart successfully');
1428 | 
1429 |     // Remove the item from cartItemDetails
1430 |     delete cartItemDetails.value[itemId];
1431 | 
1432 |     // Refresh cart details
1433 |     await fetchActiveCartDetails();
1434 |   } catch (err) {
1435 |     console.error('Error removing item from cart:', err);
1436 |     showError(`Error removing item from cart: ${err.message}`);
1437 |   } finally {
1438 |     deletingItems.value[itemId] = false;
1439 |   }
1440 | }
1441 | 
1442 | // Function to format duration string
1443 | const formatDuration = (duration) => {
1444 |   if (!duration) return 'N/A';
1445 | 
1446 |   // Convert ISO 8601 duration format to human-readable
1447 |   const regex = /P(?:(\d+)Y)?(?:(\d+)M)?(?:(\d+)D)?(?:T(?:(\d+)H)?(?:(\d+)M)?(?:(\d+)S)?)?/;
1448 |   const matches = duration.match(regex);
1449 | 
1450 |   if (!matches) return duration;
1451 | 
1452 |   const [, years, months, days, hours, minutes, seconds] = matches;
1453 |   const parts = [];
1454 | 
1455 |   if (years) parts.push(`${years} Year${years > 1 ? 's' : ''}`);
1456 |   if (months) parts.push(`${months} Month${months > 1 ? 's' : ''}`);
1457 |   if (days) parts.push(`${days} Day${days > 1 ? 's' : ''}`);
1458 |   if (hours) parts.push(`${hours} Hour${hours > 1 ? 's' : ''}`);
1459 |   if (minutes) parts.push(`${minutes} Minute${minutes > 1 ? 's' : ''}`);
1460 |   if (seconds) parts.push(`${seconds} Second${seconds > 1 ? 's' : ''}`);
1461 | 
1462 |   return parts.join(', ') || duration;
1463 | };
1464 | 
1465 | // Function to get item status color
1466 | const getItemStatusColor = (item) => {
1467 |   if (item?.readOnly) {
1468 |     return 'error';
1469 |   }
1470 |   return 'success';
1471 | };
1472 | 
1473 | // Function to get item price
1474 | const getItemPrice = (item) => {
1475 |   if (!item?.prices || item.prices.length === 0) {
1476 |     return 'Price not available';
1477 |   }
1478 | 
1479 |   // Try to find the total price first
1480 |   const totalPrice = item.prices.find(p => p.label === 'TOTAL');
1481 |   if (totalPrice && totalPrice.price) {
1482 |     return totalPrice.price.text || `${totalPrice.price.value} ${totalPrice.price.currencyCode}`;
1483 |   }
1484 | 
1485 |   // Fall back to the first price
1486 |   const firstPrice = item.prices[0];
1487 |   if (firstPrice && firstPrice.price) {
1488 |     return firstPrice.price.text || `${firstPrice.price.value} ${firstPrice.price.currencyCode}`;
1489 |   }
1490 | 
1491 |   return 'Price not available';
1492 | };
1493 | 
1494 | // Function to fetch server catalog
1495 | const fetchServers = async () => {
1496 |   if (!apiToken.value) return
1497 | 
1498 |   loadingServers.value = true
1499 |   serverError.value = null
1500 | 
1501 |   try {
1502 |     const headers = {
1503 |       'Authorization': `Bearer ${apiToken.value}`,
1504 |       'Content-Type': 'application/json'
1505 |     }
1506 | 
1507 |     // Get the current subsidiary code from the selected site
1508 |     const subsidiaryCode = selectedSite.value ? selectedSite.value.code : 'IE'
1509 | 
1510 |     const apiEndpoint = getApiEndpoint()
1511 |     const response = await fetch(`${apiEndpoint}/order/catalog/public/eco?ovhSubsidiary=${subsidiaryCode}`, {
1512 |       headers
1513 |     })
1514 | 
1515 |     if (!response.ok) {
1516 |       throw new Error(`Failed to fetch server catalog: ${response.status}`)
1517 |     }
1518 | 
1519 |     const data = await response.json()
1520 | 
1521 |     // Initialize addingToCart property for each plan
1522 |     if (data.plans && data.plans.length > 0) {
1523 |       data.plans.forEach(plan => {
1524 |         plan.addingToCart = false;
1525 |       });
1526 |     }
1527 | 
1528 |     serverCatalog.value = data
1529 |     console.log('Server catalog for subsidiary', subsidiaryCode, ':', data)
1530 |   } catch (err) {
1531 |     console.error('Error fetching server catalog:', err)
1532 |     serverError.value = err
1533 |     showError(`Error fetching server catalog: ${err.message}`)
1534 |   } finally {
1535 |     loadingServers.value = false
1536 |   }
1537 | }
1538 | 
1539 | // Watch for site changes to refresh servers if on servers tab
1540 | watch(selectedSite, (newSite, oldSite) => {
1541 |   if (newSite?.code !== oldSite?.code && activeTab.value === 'servers') {
1542 |     console.log('Site changed, refreshing server catalog...');
1543 |     fetchServers();
1544 |   }
1545 | });
1546 | 
1547 | // Function to get plan price
1548 | const getPlanPrice = (plan) => {
1549 |   if (!plan.pricings || plan.pricings.length === 0) {
1550 |     return 'Price not available'
1551 |   }
1552 | 
1553 |   const pricing = plan.pricings[0]
1554 |   if (pricing.price) {
1555 |     return `${pricing.price.text || `${pricing.price.value} ${pricing.price.currencyCode}`}`
1556 |   }
1557 | 
1558 |   return 'Price not available'
1559 | }
1560 | 
1561 | // Function to get property color
1562 | const getPropertyColor = (propName) => {
1563 |   const colorMap = {
1564 |     'cpu': 'blue',
1565 |     'ram': 'green',
1566 |     'disk': 'amber',
1567 |     'storage': 'amber',
1568 |     'bandwidth': 'purple',
1569 |     'network': 'purple',
1570 |     'location': 'red',
1571 |     'region': 'red',
1572 |     'datacenter': 'red'
1573 |   }
1574 | 
1575 |   const key = Object.keys(colorMap).find(key => propName.toLowerCase().includes(key))
1576 |   return key ? colorMap[key] : 'grey'
1577 | }
1578 | 
1579 | // Function to add server to cart
1580 | const addServerToCart = async (plan) => {
1581 |   if (!activeCartId.value || !plan.planCode) {
1582 |     showError('Cannot add server to cart. Please select an active cart first.')
1583 |     return
1584 |   }
1585 | 
1586 |   // Set loading state for this specific plan
1587 |   if (plan) {
1588 |     plan.addingToCart = true;
1589 |   }
1590 | 
1591 |   try {
1592 |     const headers = {
1593 |       'Authorization': `Bearer ${apiToken.value}`,
1594 |       'Content-Type': 'application/json'
1595 |     }
1596 | 
1597 |     const apiEndpoint = getApiEndpoint();
1598 |     const url = `${apiEndpoint}/order/cart/${activeCartId.value}/eco`;
1599 | 
1600 |     console.log('Adding server to cart:', plan.planCode, 'URL:', url);
1601 | 
1602 |     const payload = {
1603 |       duration: selectedDuration.value, // Use selected duration
1604 |       planCode: plan.planCode,
1605 |       pricingMode: "default",
1606 |       quantity: 1
1607 |     };
1608 | 
1609 |     const response = await fetch(url, {
1610 |       method: 'POST',
1611 |       headers,
1612 |       body: JSON.stringify(payload)
1613 |     });
1614 | 
1615 |     if (!response.ok) {
1616 |       const errorData = await response.json();
1617 |       throw new Error(`Failed to add server to cart: ${response.status} - ${errorData.message || JSON.stringify(errorData)}`);
1618 |     }
1619 | 
1620 |     const result = await response.json();
1621 |     showSuccess(`Added ${plan.planCode} to cart successfully!`);
1622 |     console.log('Server added to cart result:', result);
1623 | 
1624 |     // Refresh cart details
1625 |     await fetchActiveCartDetails();
1626 | 
1627 |     // Close the details dialog if it's open
1628 |     if (showServerDetailsDialog.value && selectedServer.value && selectedServer.value.planCode === plan.planCode) {
1629 |       showServerDetailsDialog.value = false;
1630 |     }
1631 | 
1632 |     return result;
1633 |   } catch (err) {
1634 |     console.error('Error adding server to cart:', err);
1635 |     showError(`Error adding server to cart: ${err.message}`);
1636 |     return null;
1637 |   } finally {
1638 |     // Reset loading state
1639 |     if (plan) {
1640 |       plan.addingToCart = false;
1641 |     }
1642 |   }
1643 | }
1644 | 
1645 | // Function to show server details
1646 | const showServerDetails = (plan) => {
1647 |   selectedServer.value = plan;
1648 |   selectedDuration.value = 'P1M'; // Reset to default 1 month
1649 |   showServerDetailsDialog.value = true;
1650 | }
1651 | 
1652 | // Fetch servers when token is available and tab is changed to servers
1653 | watch(activeTab, (newTab) => {
1654 |   if (newTab === 'servers' && apiToken.value && (!serverCatalog.value || serverCatalog.value.plans?.length === 0)) {
1655 |     fetchServers()
1656 |   }
1657 | });
1658 | 
1659 | // Function to get a readable product name from product ID
1660 | const getProductName = (productId) => {
1661 |   if (!productId) return 'N/A';
1662 | 
1663 |   const productMap = {
1664 |     'eco': 'Eco Server',
1665 |     'domain': 'Domain Name',
1666 |     'dedicated': 'Dedicated Server',
1667 |     'vps': 'Virtual Private Server',
1668 |     'cloud': 'Cloud Service',
1669 |     'hosting': 'Web Hosting'
1670 |   };
1671 | 
1672 |   return productMap[productId] || productId;
1673 | };
1674 | 
1675 | // Function to get datacenter icon based on code
1676 | const getDatacenterIcon = (code) => {
1677 |   const iconMap = {
1678 |     'bhs': 'mdi-map-marker-radius',
1679 |     'rbx': 'mdi-map-marker-radius',
1680 |     'gra': 'mdi-map-marker-radius',
1681 |     'fra': 'mdi-map-marker-radius'
1682 |   };
1683 | 
1684 |   return iconMap[code] || 'mdi-map-marker';
1685 | };
1686 | 
1687 | // Function to get the current datacenter for an item
1688 | const getItemDatacenter = (itemId) => {
1689 |   if (!cartItemDetails.value[itemId] || !cartItemDetails.value[itemId].configurations) {
1690 |     return null;
1691 |   }
1692 | 
1693 |   const datacenterConfig = cartItemDetails.value[itemId].configurations.find(
1694 |     config => config.label === 'dedicated_datacenter'
1695 |   );
1696 | 
1697 |   return datacenterConfig ? datacenterConfig.value : null;
1698 | };
1699 | 
1700 | // Function to configure datacenter for a cart item
1701 | const configureItemDatacenter = async (itemId, datacenterCode) => {
1702 |   if (!apiToken.value || !activeCartId.value || !itemId || !datacenterCode) {
1703 |     showError('Cannot configure datacenter. Missing required information.');
1704 |     return;
1705 |   }
1706 | 
1707 |   // Set loading state
1708 |   configuringDatacenter.value[itemId] = true;
1709 | 
1710 |   try {
1711 |     const headers = {
1712 |       'Authorization': `Bearer ${apiToken.value}`,
1713 |       'Content-Type': 'application/json'
1714 |     };
1715 | 
1716 |     const apiEndpoint = getApiEndpoint();
1717 |     const url = `${apiEndpoint}/order/cart/${activeCartId.value}/item/${itemId}/configuration`;
1718 | 
1719 |     const payload = {
1720 |       label: "dedicated_datacenter",
1721 |       value: datacenterCode
1722 |     };
1723 | 
1724 |     console.log(`Configuring datacenter for item ${itemId} to ${datacenterCode}:`, payload);
1725 | 
1726 |     const response = await fetch(url, {
1727 |       method: 'POST',
1728 |       headers,
1729 |       body: JSON.stringify(payload)
1730 |     });
1731 | 
1732 |     if (!response.ok) {
1733 |       const errorData = await response.json();
1734 |       throw new Error(`Failed to configure datacenter: ${response.status} - ${errorData.message || JSON.stringify(errorData)}`);
1735 |     }
1736 | 
1737 |     const result = await response.json();
1738 |     showSuccess(`Datacenter configured to ${datacenterCode} successfully!`);
1739 |     console.log('Datacenter configuration result:', result);
1740 | 
1741 |     // Refresh cart item details
1742 |     await fetchActiveCartDetails();
1743 | 
1744 |     return result;
1745 |   } catch (err) {
1746 |     console.error('Error configuring datacenter:', err);
1747 |     showError(`Error configuring datacenter: ${err.message}`);
1748 |     return null;
1749 |   } finally {
1750 |     // Reset loading state
1751 |     configuringDatacenter.value[itemId] = false;
1752 |   }
1753 | };
1754 | 
1755 | // Function to open the configuration editor dialog
1756 | const openConfigEditor = (itemId, config) => {
1757 |   currentEditConfig.value = {
1758 |     itemId: itemId,
1759 |     config: { ...config },
1760 |     newValue: config.value,
1761 |     configId: config.id
1762 |   };
1763 |   configEditorDialog.value = true;
1764 | };
1765 | 
1766 | // Function to update an item configuration
1767 | const updateItemConfiguration = async (itemId, label, value, configId = null) => {
1768 |   if (!apiToken.value || !activeCartId.value || !itemId) {
1769 |     showError('Cannot update configuration. Missing required information.');
1770 |     return;
1771 |   }
1772 | 
1773 |   // Set loading state
1774 |   editingConfiguration.value[itemId] = true;
1775 | 
1776 |   try {
1777 |     const headers = {
1778 |       'Authorization': `Bearer ${apiToken.value}`,
1779 |       'Content-Type': 'application/json'
1780 |     };
1781 | 
1782 |     const apiEndpoint = getApiEndpoint();
1783 |     let url;
1784 |     let method;
1785 | 
1786 |     // If configId is provided, update existing configuration
1787 |     if (configId) {
1788 |       url = `${apiEndpoint}/order/cart/${activeCartId.value}/item/${itemId}/configuration/${configId}`;
1789 |       method = 'PUT';
1790 |     } else {
1791 |       // Add new configuration
1792 |       url = `${apiEndpoint}/order/cart/${activeCartId.value}/item/${itemId}/configuration`;
1793 |       method = 'POST';
1794 |     }
1795 | 
1796 |     const payload = {
1797 |       label: label,
1798 |       value: value
1799 |     };
1800 | 
1801 |     console.log(`${configId ? 'Updating' : 'Adding'} configuration for item ${itemId}:`, payload);
1802 | 
1803 |     const response = await fetch(url, {
1804 |       method: method,
1805 |       headers,
1806 |       body: JSON.stringify(payload)
1807 |     });
1808 | 
1809 |     if (!response.ok) {
1810 |       const errorData = await response.json();
1811 |       throw new Error(`Failed to ${configId ? 'update' : 'add'} configuration: ${response.status} - ${errorData.message || JSON.stringify(errorData)}`);
1812 |     }
1813 | 
1814 |     const result = await response.json();
1815 |     showSuccess(`Configuration ${label} ${configId ? 'updated' : 'added'} successfully!`);
1816 |     console.log('Configuration update result:', result);
1817 | 
1818 |     // Refresh cart item details
1819 |     await fetchActiveCartDetails();
1820 | 
1821 |     // Reset the new config form
1822 |     if (label === newConfig.value.label) {
1823 |       newConfig.value = { label: '', value: '' };
1824 |     }
1825 | 
1826 |     // Close dialog if it was from the dialog
1827 |     configEditorDialog.value = false;
1828 | 
1829 |     return result;
1830 |   } catch (err) {
1831 |     console.error(`Error ${configId ? 'updating' : 'adding'} configuration:`, err);
1832 |     showError(`Error ${configId ? 'updating' : 'adding'} configuration: ${err.message}`);
1833 |     return null;
1834 |   } finally {
1835 |     // Reset loading state
1836 |     editingConfiguration.value[itemId] = false;
1837 |   }
1838 | };
1839 | 
1840 | // Function to add a new configuration to an item
1841 | const addItemConfiguration = async (itemId, label, value) => {
1842 |   if (!label || !value) {
1843 |     showError('Configuration name and value are required');
1844 |     return;
1845 |   }
1846 | 
1847 |   addingConfiguration.value[itemId] = true;
1848 | 
1849 |   try {
1850 |     await updateItemConfiguration(itemId, label, value);
1851 |     return true;
1852 |   } finally {
1853 |     addingConfiguration.value[itemId] = false;
1854 |   }
1855 | };
1856 | 
1857 | // Function to check if a configuration label is in the common configurations list
1858 | const isInCommonConfigurations = (label) => {
1859 |   return label !== 'custom_configuration' && commonConfigurations.includes(label);
1860 | };
1861 | 
1862 | // Function to handle configuration type change
1863 | const handleConfigTypeChange = (label) => {
1864 |   // If the user selects custom_configuration, empty the label field to allow custom input
1865 |   if (label === 'custom_configuration') {
1866 |     newConfig.value.label = '';
1867 |   }
1868 | 
1869 |   // Clear the value field when changing configuration type
1870 |   newConfig.value.value = '';
1871 | 
1872 |   // If selecting datacenter config, set default available values
1873 |   if (label === 'dedicated_datacenter') {
1874 |     // Auto-select the first datacenter in the dropdown
1875 |     if (availableDatacenters.length > 0) {
1876 |       selectedDatacenters.value[currentEditConfig.value.itemId] = availableDatacenters[0].code;
1877 |     }
1878 |   }
1879 | };
1880 | 
1881 | // Function to fetch available configurations for an item
1882 | const fetchItemAvailableConfigurations = async (itemId) => {
1883 |   if (!apiToken.value || !activeCartId.value || !itemId) {
1884 |     showError('Cannot fetch configurations. Missing required information.');
1885 |     return;
1886 |   }
1887 | 
1888 |   // Set loading state
1889 |   loadingAvailableConfigurations.value[itemId] = true;
1890 | 
1891 |   try {
1892 |     const headers = {
1893 |       'Authorization': `Bearer ${apiToken.value}`,
1894 |       'Content-Type': 'application/json'
1895 |     };
1896 | 
1897 |     const apiEndpoint = getApiEndpoint();
1898 |     const url = `${apiEndpoint}/order/cart/${activeCartId.value}/item/${itemId}/configurations`;
1899 | 
1900 |     console.log(`Fetching available configurations for item ${itemId}`);
1901 | 
1902 |     const response = await fetch(url, {
1903 |       method: 'GET',
1904 |       headers
1905 |     });
1906 | 
1907 |     if (!response.ok) {
1908 |       if (response.status === 404) {
1909 |         // No available configurations endpoint
1910 |         showInfo(`No additional configuration options available for this item.`);
1911 |         itemAvailableConfigurations.value[itemId] = [];
1912 |         return [];
1913 |       }
1914 | 
1915 |       const errorData = await response.json();
1916 |       throw new Error(`Failed to fetch configurations: ${response.status} - ${errorData.message || JSON.stringify(errorData)}`);
1917 |     }
1918 | 
1919 |     const result = await response.json();
1920 |     console.log('Available configurations:', result);
1921 | 
1922 |     // Store the available configurations
1923 |     itemAvailableConfigurations.value[itemId] = result;
1924 | 
1925 |     // If there are available configurations, update the common configurations list
1926 |     if (result && result.length > 0) {
1927 |       // Extract configuration labels and add them to commonConfigurations if not already present
1928 |       const configLabels = result.map(config => config.name || config.label);
1929 | 
1930 |       configLabels.forEach(label => {
1931 |         if (!commonConfigurations.includes(label)) {
1932 |           commonConfigurations.push(label);
1933 |         }
1934 |       });
1935 | 
1936 |       showSuccess(`Found ${result.length} available configuration options`);
1937 |     } else {
1938 |       showInfo('No additional configuration options available');
1939 |     }
1940 | 
1941 |     return result;
1942 |   } catch (err) {
1943 |     console.error('Error fetching configurations:', err);
1944 |     showError(`Error fetching configurations: ${err.message}`);
1945 |     return [];
1946 |   } finally {
1947 |     // Reset loading state
1948 |     loadingAvailableConfigurations.value[itemId] = false;
1949 |   }
1950 | };
1951 | 
1952 | // Function to show info notification
1953 | const showInfo = (message) => {
1954 |   // We can reuse the success snackbar but with a different color
1955 |   successMessage.value = message;
1956 |   // Create a temporary div to store the snackbar and change its color
1957 |   const tempDiv = document.createElement('div');
1958 |   tempDiv.innerHTML = `<style>.v-snackbar.info-snackbar .v-snackbar__wrapper { background-color: #2196F3 !important; }</style>`;
1959 |   document.body.appendChild(tempDiv);
1960 | 
1961 |   // Add the info class to the snackbar
1962 |   const snackbar = document.querySelector('.v-snackbar');
1963 |   if (snackbar) {
1964 |     snackbar.classList.add('info-snackbar');
1965 |   }
1966 | 
1967 |   showSuccessSnackbar.value = true;
1968 | 
1969 |   // Remove the style after the snackbar is closed
1970 |   setTimeout(() => {
1971 |     document.body.removeChild(tempDiv);
1972 |     if (snackbar) {
1973 |       snackbar.classList.remove('info-snackbar');
1974 |     }
1975 |   }, 3000);
1976 | };
1977 | 
1978 | // Function to delete a configuration
1979 | const deleteItemConfiguration = async (itemId, configId) => {
1980 |   if (!apiToken.value || !activeCartId.value || !itemId || !configId) {
1981 |     showError('Cannot delete configuration. Missing required information.');
1982 |     return;
1983 |   }
1984 | 
1985 |   // Set loading state for the specific config
1986 |   if (!deleteConfigLoading.value[itemId]) {
1987 |     deleteConfigLoading.value[itemId] = {};
1988 |   }
1989 |   deleteConfigLoading.value[itemId][configId] = true;
1990 | 
1991 |   try {
1992 |     const headers = {
1993 |       'Authorization': `Bearer ${apiToken.value}`,
1994 |       'Content-Type': 'application/json'
1995 |     };
1996 | 
1997 |     const apiEndpoint = getApiEndpoint();
1998 |     const url = `${apiEndpoint}/order/cart/${activeCartId.value}/item/${itemId}/configuration/${configId}`;
1999 | 
2000 |     console.log(`Deleting configuration ${configId} for item ${itemId}`);
2001 | 
2002 |     const response = await fetch(url, {
2003 |       method: 'DELETE',
2004 |       headers
2005 |     });
2006 | 
2007 |     if (!response.ok) {
2008 |       const errorData = await response.json();
2009 |       throw new Error(`Failed to delete configuration: ${response.status} - ${errorData.message || JSON.stringify(errorData)}`);
2010 |     }
2011 | 
2012 |     showSuccess('Configuration deleted successfully!');
2013 | 
2014 |     // Refresh cart item details
2015 |     await fetchActiveCartDetails();
2016 | 
2017 |     return true;
2018 |   } catch (err) {
2019 |     console.error('Error deleting configuration:', err);
2020 |     showError(`Error deleting configuration: ${err.message}`);
2021 |     return null;
2022 |   } finally {
2023 |     // Reset loading state
2024 |     if (deleteConfigLoading.value[itemId]) {
2025 |       deleteConfigLoading.value[itemId][configId] = false;
2026 |     }
2027 |   }
2028 | };
2029 | 
2030 | // Function to open the delete confirmation dialog
2031 | const openDeleteConfirmation = (itemId, config) => {
2032 |   configToDelete.value = {
2033 |     itemId: itemId,
2034 |     configId: config.id,
2035 |     label: config.label
2036 |   };
2037 |   confirmDeleteDialog.value = true;
2038 | };
2039 | 
2040 | // Function to confirm and process deletion
2041 | const confirmDelete = async () => {
2042 |   const { itemId, configId } = configToDelete.value;
2043 |   await deleteItemConfiguration(itemId, configId);
2044 |   confirmDeleteDialog.value = false;
2045 | };
2046 | 
2047 | // Function to get OS icon based on code
2048 | const getOSIcon = (code) => {
2049 |   const iconMap = {
2050 |     'none_64.en': 'mdi-minus-circle',
2051 |     'ubuntu': 'mdi-ubuntu',
2052 |     'windows': 'mdi-microsoft-windows',
2053 |     'centos': 'mdi-linux',
2054 |     'debian': 'mdi-debian'
2055 |   };
2056 | 
2057 |   // Check if code contains any of the keys
2058 |   for (const key in iconMap) {
2059 |     if (code.includes(key)) {
2060 |       return iconMap[key];
2061 |     }
2062 |   }
2063 | 
2064 |   return 'mdi-server-network';
2065 | };
2066 | 
2067 | // Function to get the current OS for an item
2068 | const getItemOS = (itemId) => {
2069 |   if (!cartItemDetails.value[itemId] || !cartItemDetails.value[itemId].configurationDetails) {
2070 |     return null;
2071 |   }
2072 | 
2073 |   const osConfig = cartItemDetails.value[itemId].configurationDetails.find(
2074 |     config => config.label === 'dedicated_os'
2075 |   );
2076 | 
2077 |   return osConfig ? osConfig.value : null;
2078 | };
2079 | 
2080 | // Function to configure OS for a cart item
2081 | const configureItemOS = async (itemId, osCode) => {
2082 |   if (!apiToken.value || !activeCartId.value || !itemId || !osCode) {
2083 |     showError('Cannot configure OS. Missing required information.');
2084 |     return;
2085 |   }
2086 | 
2087 |   // Set loading state
2088 |   configuringOS.value[itemId] = true;
2089 | 
2090 |   try {
2091 |     const headers = {
2092 |       'Authorization': `Bearer ${apiToken.value}`,
2093 |       'Content-Type': 'application/json'
2094 |     };
2095 | 
2096 |     const apiEndpoint = getApiEndpoint();
2097 |     const url = `${apiEndpoint}/order/cart/${activeCartId.value}/item/${itemId}/configuration`;
2098 | 
2099 |     const payload = {
2100 |       label: "dedicated_os",
2101 |       value: osCode
2102 |     };
2103 | 
2104 |     console.log(`Configuring OS for item ${itemId} to ${osCode}:`, payload);
2105 | 
2106 |     const response = await fetch(url, {
2107 |       method: 'POST',
2108 |       headers,
2109 |       body: JSON.stringify(payload)
2110 |     });
2111 | 
2112 |     if (!response.ok) {
2113 |       const errorData = await response.json();
2114 |       throw new Error(`Failed to configure OS: ${response.status} - ${errorData.message || JSON.stringify(errorData)}`);
2115 |     }
2116 | 
2117 |     const result = await response.json();
2118 |     showSuccess(`OS configured to ${osCode} successfully!`);
2119 |     console.log('OS configuration result:', result);
2120 | 
2121 |     // Refresh cart item details
2122 |     await fetchActiveCartDetails();
2123 | 
2124 |     return result;
2125 |   } catch (err) {
2126 |     console.error('Error configuring OS:', err);
2127 |     showError(`Error configuring OS: ${err.message}`);
2128 |     return null;
2129 |   } finally {
2130 |     // Reset loading state
2131 |     configuringOS.value[itemId] = false;
2132 |   }
2133 | };
2134 | 
2135 | // Manual plan code refs
2136 | const showManualPlanCodeDialog = ref(false);
2137 | const addingManualPlan = ref(false);
2138 | const manualPlanCode = ref('');
2139 | const manualDuration = ref('P1M');
2140 | const manualQuantity = ref(1);
2141 | 
2142 | // Function to add server to cart by manually entered plan code
2143 | const addServerByPlanCode = async () => {
2144 |   if (!activeCartId.value || !manualPlanCode.value || !manualDuration.value || !manualQuantity.value || manualQuantity.value < 1) {
2145 |     showError('Please enter a valid plan code, duration and quantity.');
2146 |     return;
2147 |   }
2148 | 
2149 |   addingManualPlan.value = true;
2150 | 
2151 |   try {
2152 |     const headers = {
2153 |       'Authorization': `Bearer ${apiToken.value}`,
2154 |       'Content-Type': 'application/json'
2155 |     };
2156 | 
2157 |     const apiEndpoint = getApiEndpoint();
2158 |     const url = `${apiEndpoint}/order/cart/${activeCartId.value}/eco`;
2159 | 
2160 |     console.log('Adding server to cart by manual plan code:', manualPlanCode.value, 'URL:', url);
2161 | 
2162 |     const payload = {
2163 |       duration: manualDuration.value,
2164 |       planCode: manualPlanCode.value,
2165 |       pricingMode: "default",
2166 |       quantity: parseInt(manualQuantity.value)
2167 |     };
2168 | 
2169 |     const response = await fetch(url, {
2170 |       method: 'POST',
2171 |       headers,
2172 |       body: JSON.stringify(payload)
2173 |     });
2174 | 
2175 |     if (!response.ok) {
2176 |       const errorData = await response.json();
2177 |       throw new Error(`Failed to add server to cart: ${response.status} - ${errorData.message || JSON.stringify(errorData)}`);
2178 |     }
2179 | 
2180 |     const result = await response.json();
2181 |     showSuccess(`Added ${manualPlanCode.value} to cart successfully!`);
2182 |     console.log('Manual server added to cart result:', result);
2183 | 
2184 |     // Reset form
2185 |     manualPlanCode.value = '';
2186 |     manualQuantity.value = 1;
2187 |     showManualPlanCodeDialog.value = false;
2188 | 
2189 |     // Refresh cart details
2190 |     await fetchActiveCartDetails();
2191 | 
2192 |     return result;
2193 |   } catch (err) {
2194 |     console.error('Error adding server to cart:', err);
2195 |     showError(`Error adding server to cart: ${err.message}`);
2196 |     return null;
2197 |   } finally {
2198 |     addingManualPlan.value = false;
2199 |   }
2200 | };
2201 | 
2202 | // Add checkout refs
2203 | const checkingOut = ref(false);
2204 | const checkoutUrl = ref(null);
2205 | const showCheckoutDialog = ref(false);
2206 | 
2207 | // Add checkout function
2208 | const checkoutCart = async () => {
2209 |   if (!apiToken.value || !activeCartId.value) {
2210 |     showError('Cannot checkout. No active cart selected.');
2211 |     return;
2212 |   }
2213 | 
2214 |   checkingOut.value = true;
2215 |   checkoutUrl.value = null;
2216 | 
2217 |   try {
2218 |     const headers = {
2219 |       'Authorization': `Bearer ${apiToken.value}`,
2220 |       'Content-Type': 'application/json'
2221 |     };
2222 | 
2223 |     const apiEndpoint = getApiEndpoint();
2224 | 
2225 |     // Step 1: Attempt to assign the cart (but continue even if it fails)
2226 |     console.log('Assigning cart before checkout:', activeCartId.value);
2227 |     try {
2228 |       const assignUrl = `${apiEndpoint}/order/cart/${activeCartId.value}/assign`;
2229 | 
2230 |       const assignResponse = await fetch(assignUrl, {
2231 |         method: 'POST',
2232 |         headers,
2233 |         body: JSON.stringify({})
2234 |       });
2235 | 
2236 |       if (!assignResponse.ok) {
2237 |         const errorData = await assignResponse.json();
2238 |         console.warn(`Cart assignment warning (continuing anyway): ${assignResponse.status} - ${errorData.message || JSON.stringify(errorData)}`);
2239 |       } else {
2240 |         console.log('Cart assignment successful');
2241 |       }
2242 |     } catch (assignError) {
2243 |       // Log the assign error but continue with checkout
2244 |       console.warn('Cart assignment failed (continuing anyway):', assignError.message);
2245 |     }
2246 | 
2247 |     // Step 2: Checkout the cart
2248 |     const checkoutUrl = `${apiEndpoint}/order/cart/${activeCartId.value}/checkout`;
2249 | 
2250 |     const checkoutPayload = {
2251 |       autoPayWithPreferredPaymentMethod: false,
2252 |       waiveRetractationPeriod: false
2253 |     };
2254 | 
2255 |     console.log('Checking out cart:', activeCartId.value, 'with payload:', checkoutPayload);
2256 | 
2257 |     const checkoutResponse = await fetch(checkoutUrl, {
2258 |       method: 'POST',
2259 |       headers,
2260 |       body: JSON.stringify(checkoutPayload)
2261 |     });
2262 | 
2263 |     if (!checkoutResponse.ok) {
2264 |       const errorData = await checkoutResponse.json();
2265 |       throw new Error(`Failed to checkout cart: ${checkoutResponse.status} - ${errorData.message || JSON.stringify(errorData)}`);
2266 |     }
2267 | 
2268 |     const checkoutResult = await checkoutResponse.json();
2269 |     console.log('Checkout successful:', checkoutResult);
2270 | 
2271 |     if (checkoutResult.url) {
2272 |       checkoutUrl.value = checkoutResult.url;
2273 |       showCheckoutDialog.value = true;
2274 |       showSuccess('Checkout successful! Please use the payment link to complete your order.');
2275 |     } else {
2276 |       showError('Checkout completed but no payment URL was provided.');
2277 |     }
2278 | 
2279 |     // Refresh cart list and details
2280 |     await fetchCart();
2281 | 
2282 |     return checkoutResult;
2283 |   } catch (err) {
2284 |     console.error('Error during checkout process:', err);
2285 |     showError(`Checkout error: ${err.message}`);
2286 |     return null;
2287 |   } finally {
2288 |     checkingOut.value = false;
2289 |   }
2290 | };
2291 | 
2292 | // Function to copy text to clipboard
2293 | const copyToClipboard = (text) => {
2294 |   if (!text) return;
2295 | 
2296 |   navigator.clipboard.writeText(text)
2297 |     .then(() => {
2298 |       showSuccess('URL copied to clipboard!');
2299 |     })
2300 |     .catch((err) => {
2301 |       console.error('Could not copy text: ', err);
2302 |       showError('Failed to copy URL');
2303 |     });
2304 | };
2305 | </script>
2306 | 


--------------------------------------------------------------------------------