feat: admin and book page

package-lock.json

@@ -20,6 +20,9 @@
         "vue3-datepicker": "^0.4.0"
       },
       "devDependencies": {
+        "@iconify-json/radix-icons": "^1.2.5",
+        "@iconify/vue": "^5.0.0",
+        "@nuxtjs/color-mode": "^3.5.2",
         "@vitejs/plugin-vue": "^6.0.1",
         "autoprefixer": "^10.4.20",
         "postcss": "^8.4.47",
@@ -1012,6 +1015,39 @@
         }
       }
     },
+    "node_modules/@iconify-json/radix-icons": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/@iconify-json/radix-icons/-/radix-icons-1.2.5.tgz",
+      "integrity": "sha512-HkUt+ydCivK/S/aFsgaiZRvs7zDEcO07PKkuEuu2EFBWCuC+Pi1mDdXPX0U3qjRr7JknmnoR4sAg53C+Ig35ow==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@iconify/types": "*"
+      }
+    },
+    "node_modules/@iconify/types": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
+      "integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@iconify/vue": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@iconify/vue/-/vue-5.0.0.tgz",
+      "integrity": "sha512-C+KuEWIF5nSBrobFJhT//JS87OZ++QDORB6f2q2Wm6fl2mueSTpFBeBsveK0KW9hWiZ4mNiPjsh6Zs4jjdROSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@iconify/types": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/cyberalien"
+      },
+      "peerDependencies": {
+        "vue": ">=3"
+      }
+    },
     "node_modules/@internationalized/date": {
       "version": "3.10.0",
       "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.10.0.tgz",
@@ -1128,6 +1164,109 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@nuxt/kit": {
+      "version": "3.19.3",
+      "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-3.19.3.tgz",
+      "integrity": "sha512-ze46EW5xW+UxDvinvPkYt2MzR355Az1lA3bpX8KDialgnCwr+IbkBij/udbUEC6ZFbidPkfK1eKl4ESN7gMY+w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "c12": "^3.3.0",
+        "consola": "^3.4.2",
+        "defu": "^6.1.4",
+        "destr": "^2.0.5",
+        "errx": "^0.1.0",
+        "exsolve": "^1.0.7",
+        "ignore": "^7.0.5",
+        "jiti": "^2.6.1",
+        "klona": "^2.0.6",
+        "knitwork": "^1.2.0",
+        "mlly": "^1.8.0",
+        "ohash": "^2.0.11",
+        "pathe": "^2.0.3",
+        "pkg-types": "^2.3.0",
+        "rc9": "^2.1.2",
+        "scule": "^1.3.0",
+        "semver": "^7.7.2",
+        "std-env": "^3.9.0",
+        "tinyglobby": "^0.2.15",
+        "ufo": "^1.6.1",
+        "unctx": "^2.4.1",
+        "unimport": "^5.4.1",
+        "untyped": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      }
+    },
+    "node_modules/@nuxt/kit/node_modules/jiti": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz",
+      "integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jiti": "lib/jiti-cli.mjs"
+      }
+    },
+    "node_modules/@nuxt/kit/node_modules/pkg-types": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-2.3.0.tgz",
+      "integrity": "sha512-SIqCzDRg0s9npO5XQ3tNZioRY1uK06lA41ynBC1YmFTmnY6FjUjVt6s4LoADmwoig1qqD0oK8h1p/8mlMx8Oig==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "confbox": "^0.2.2",
+        "exsolve": "^1.0.7",
+        "pathe": "^2.0.3"
+      }
+    },
+    "node_modules/@nuxt/kit/node_modules/semver": {
+      "version": "7.7.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
+      "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@nuxtjs/color-mode": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/@nuxtjs/color-mode/-/color-mode-3.5.2.tgz",
+      "integrity": "sha512-cC6RfgZh3guHBMLLjrBB2Uti5eUoGM9KyauOaYS9ETmxNWBMTvpgjvSiSJp1OFljIXPIqVTJ3xtJpSNZiO3ZaA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nuxt/kit": "^3.13.2",
+        "pathe": "^1.1.2",
+        "pkg-types": "^1.2.1",
+        "semver": "^7.6.3"
+      }
+    },
+    "node_modules/@nuxtjs/color-mode/node_modules/pathe": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-1.1.2.tgz",
+      "integrity": "sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@nuxtjs/color-mode/node_modules/semver": {
+      "version": "7.7.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
+      "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/@pkgjs/parseargs": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@@ -1805,6 +1944,19 @@
         "vue": "^3.5.0"
       }
     },
+    "node_modules/acorn": {
+      "version": "8.15.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
+      "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/ansi-regex": {
       "version": "6.2.2",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.2.tgz",
@@ -2036,6 +2188,87 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/c12": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/c12/-/c12-3.3.0.tgz",
+      "integrity": "sha512-K9ZkuyeJQeqLEyqldbYLG3wjqwpw4BVaAqvmxq3GYKK0b1A/yYQdIcJxkzAOWcNVWhJpRXAPfZFueekiY/L8Dw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chokidar": "^4.0.3",
+        "confbox": "^0.2.2",
+        "defu": "^6.1.4",
+        "dotenv": "^17.2.2",
+        "exsolve": "^1.0.7",
+        "giget": "^2.0.0",
+        "jiti": "^2.5.1",
+        "ohash": "^2.0.11",
+        "pathe": "^2.0.3",
+        "perfect-debounce": "^2.0.0",
+        "pkg-types": "^2.3.0",
+        "rc9": "^2.1.2"
+      },
+      "peerDependencies": {
+        "magicast": "^0.3.5"
+      },
+      "peerDependenciesMeta": {
+        "magicast": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/c12/node_modules/chokidar": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
+      "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "readdirp": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 14.16.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/c12/node_modules/jiti": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz",
+      "integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jiti": "lib/jiti-cli.mjs"
+      }
+    },
+    "node_modules/c12/node_modules/pkg-types": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-2.3.0.tgz",
+      "integrity": "sha512-SIqCzDRg0s9npO5XQ3tNZioRY1uK06lA41ynBC1YmFTmnY6FjUjVt6s4LoADmwoig1qqD0oK8h1p/8mlMx8Oig==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "confbox": "^0.2.2",
+        "exsolve": "^1.0.7",
+        "pathe": "^2.0.3"
+      }
+    },
+    "node_modules/c12/node_modules/readdirp": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
+      "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14.18.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
     "node_modules/camelcase-css": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
@@ -2102,6 +2335,16 @@
         "node": ">= 6"
       }
     },
+    "node_modules/citty": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/citty/-/citty-0.1.6.tgz",
+      "integrity": "sha512-tskPPKEs8D2KPafUypv2gxwJP8h/OaJmC82QQGGDQcHvXX43xF2VDACcJVmZ0EuSxkpO9Kc4MlrA3q0+FG58AQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "consola": "^3.2.3"
+      }
+    },
     "node_modules/class-variance-authority": {
       "version": "0.7.1",
       "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
@@ -2150,6 +2393,23 @@
         "node": ">= 6"
       }
     },
+    "node_modules/confbox": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/confbox/-/confbox-0.2.2.tgz",
+      "integrity": "sha512-1NB+BKqhtNipMsov4xI/NnhCKp9XG9NamYp5PVm9klAT0fsrNPjaFICsCFhNhwZJKNh7zB/3q8qXz0E9oaMNtQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/consola": {
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/consola/-/consola-3.4.2.tgz",
+      "integrity": "sha512-5IKcdX0nnYavi6G7TtOhwkYzyjfJlatbjMjuLSfE2kYT5pMDOilZ4OvMhi637CcDICTmz3wARPoyhqyX1Y+XvA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^14.18.0 || >=16.10.0"
+      }
+    },
     "node_modules/convert-source-map": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
@@ -2288,6 +2548,13 @@
       "integrity": "sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==",
       "license": "MIT"
     },
+    "node_modules/destr": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/destr/-/destr-2.0.5.tgz",
+      "integrity": "sha512-ugFTXCtDZunbzasqBxrK93Ik/DRYsO6S/fedkWEMKqt04xZ4csmnmwGDBAb07QWNaGMAmnTIemsYZCksjATwsA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -2300,6 +2567,19 @@
       "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
       "license": "MIT"
     },
+    "node_modules/dotenv": {
+      "version": "17.2.3",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-17.2.3.tgz",
+      "integrity": "sha512-JVUnt+DUIzu87TABbhPmNfVdBDt18BLOWjMUFJMSi/Qqg7NTYtabbvSNJGOJ7afbRuv9D/lngizHtP7QyLQ+9w==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
+      }
+    },
     "node_modules/eastasianwidth": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
@@ -2341,6 +2621,13 @@
         "url": "https://github.com/sponsors/antfu"
       }
     },
+    "node_modules/errx": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/errx/-/errx-0.1.0.tgz",
+      "integrity": "sha512-fZmsRiDNv07K6s2KkKFTiD2aIvECa7++PKyD5NC32tpRw46qZA3sOz+aM+/V9V0GDHxVTKLziveV4JhzBHDp9Q==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/esbuild": {
       "version": "0.25.10",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.10.tgz",
@@ -2393,6 +2680,19 @@
         "node": ">=6"
       }
     },
+    "node_modules/escape-string-regexp": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
+      "integrity": "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/estree-walker": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
@@ -2426,6 +2726,13 @@
         "url": "https://github.com/sindresorhus/execa?sponsor=1"
       }
     },
+    "node_modules/exsolve": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/exsolve/-/exsolve-1.0.7.tgz",
+      "integrity": "sha512-VO5fQUzZtI6C+vx4w/4BWJpg3s/5l+6pRQEHzFRM8WFi4XffSP1Z+4qi7GbjWbvRQEbdIco5mIMq+zX4rPuLrw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/fast-glob": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
@@ -2589,6 +2896,24 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/giget": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/giget/-/giget-2.0.0.tgz",
+      "integrity": "sha512-L5bGsVkxJbJgdnwyuheIunkGatUF/zssUoxxjACCseZYAVbaqdh9Tsmmlkl8vYan09H7sbvKt4pS8GqKLBrEzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "citty": "^0.1.6",
+        "consola": "^3.4.0",
+        "defu": "^6.1.4",
+        "node-fetch-native": "^1.6.6",
+        "nypm": "^0.6.0",
+        "pathe": "^2.0.3"
+      },
+      "bin": {
+        "giget": "dist/cli.mjs"
+      }
+    },
     "node_modules/glob": {
       "version": "10.4.5",
       "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
@@ -2650,6 +2975,16 @@
         "node": ">=18.18.0"
       }
     },
+    "node_modules/ignore": {
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.5.tgz",
+      "integrity": "sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
     "node_modules/is-binary-path": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -2883,6 +3218,23 @@
         "node": ">=6"
       }
     },
+    "node_modules/klona": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.6.tgz",
+      "integrity": "sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/knitwork": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/knitwork/-/knitwork-1.2.0.tgz",
+      "integrity": "sha512-xYSH7AvuQ6nXkq42x0v5S8/Iry+cfulBz/DJQzhIyESdLD7425jXsPy4vn5cCXU+HhRN2kVw51Vd1K6/By4BQg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/kolorist": {
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/kolorist/-/kolorist-1.8.0.tgz",
@@ -2908,6 +3260,36 @@
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
       "license": "MIT"
     },
+    "node_modules/local-pkg": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-1.1.2.tgz",
+      "integrity": "sha512-arhlxbFRmoQHl33a0Zkle/YWlmNwoyt6QNZEIJcqNbdrsix5Lvc4HyyI3EnwxTYlZYc32EbYrQ8SzEZ7dqgg9A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mlly": "^1.7.4",
+        "pkg-types": "^2.3.0",
+        "quansync": "^0.2.11"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/local-pkg/node_modules/pkg-types": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-2.3.0.tgz",
+      "integrity": "sha512-SIqCzDRg0s9npO5XQ3tNZioRY1uK06lA41ynBC1YmFTmnY6FjUjVt6s4LoADmwoig1qqD0oK8h1p/8mlMx8Oig==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "confbox": "^0.2.2",
+        "exsolve": "^1.0.7",
+        "pathe": "^2.0.3"
+      }
+    },
     "node_modules/lru-cache": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
@@ -3001,6 +3383,19 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/mlly": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.8.0.tgz",
+      "integrity": "sha512-l8D9ODSRWLe2KHJSifWGwBqpTZXIXTeo8mlKjY+E2HAakaTeNpqAyBZ8GSqLzHgw4XmHmC8whvpjJNMbFZN7/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "acorn": "^8.15.0",
+        "pathe": "^2.0.3",
+        "pkg-types": "^1.3.1",
+        "ufo": "^1.6.1"
+      }
+    },
     "node_modules/mrmime": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.1.tgz",
@@ -3047,6 +3442,13 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/node-fetch-native": {
+      "version": "1.6.7",
+      "resolved": "https://registry.npmjs.org/node-fetch-native/-/node-fetch-native-1.6.7.tgz",
+      "integrity": "sha512-g9yhqoedzIUm0nTnTqAQvueMPVOuIY16bqgAJJC8XOOubYFNwz6IER9qs0Gq2Xd0+CecCKFjtdDTMA4u4xG06Q==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/node-releases": {
       "version": "2.0.23",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.23.tgz",
@@ -3103,6 +3505,38 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/nypm": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/nypm/-/nypm-0.6.2.tgz",
+      "integrity": "sha512-7eM+hpOtrKrBDCh7Ypu2lJ9Z7PNZBdi/8AT3AX8xoCj43BBVHD0hPSTEvMtkMpfs8FCqBGhxB+uToIQimA111g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "citty": "^0.1.6",
+        "consola": "^3.4.2",
+        "pathe": "^2.0.3",
+        "pkg-types": "^2.3.0",
+        "tinyexec": "^1.0.1"
+      },
+      "bin": {
+        "nypm": "dist/cli.mjs"
+      },
+      "engines": {
+        "node": "^14.16.0 || >=16.10.0"
+      }
+    },
+    "node_modules/nypm/node_modules/pkg-types": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-2.3.0.tgz",
+      "integrity": "sha512-SIqCzDRg0s9npO5XQ3tNZioRY1uK06lA41ynBC1YmFTmnY6FjUjVt6s4LoADmwoig1qqD0oK8h1p/8mlMx8Oig==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "confbox": "^0.2.2",
+        "exsolve": "^1.0.7",
+        "pathe": "^2.0.3"
+      }
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -3253,6 +3687,25 @@
         "node": ">= 6"
       }
     },
+    "node_modules/pkg-types": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.3.1.tgz",
+      "integrity": "sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "confbox": "^0.1.8",
+        "mlly": "^1.7.4",
+        "pathe": "^2.0.1"
+      }
+    },
+    "node_modules/pkg-types/node_modules/confbox": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/confbox/-/confbox-0.1.8.tgz",
+      "integrity": "sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/postcss": {
       "version": "8.5.6",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
@@ -3426,6 +3879,23 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/quansync": {
+      "version": "0.2.11",
+      "resolved": "https://registry.npmjs.org/quansync/-/quansync-0.2.11.tgz",
+      "integrity": "sha512-AifT7QEbW9Nri4tAwR5M/uzpBuqfZf+zwaEM/QkzEjj7NBuFD2rBuy0K3dE+8wltbezDV7JMA0WfnCPYRSYbXA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/antfu"
+        },
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/sxzz"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -3446,6 +3916,17 @@
       ],
       "license": "MIT"
     },
+    "node_modules/rc9": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/rc9/-/rc9-2.1.2.tgz",
+      "integrity": "sha512-btXCnMmRIBINM2LDZoEmOogIZU7Qe7zn4BpomSKZ/ykbLObuBdvG+mFq11DL6fjH1DRwHhrlgtYWG96bJiC7Cg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "defu": "^6.1.4",
+        "destr": "^2.0.3"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -3651,6 +4132,13 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/scule": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/scule/-/scule-1.3.0.tgz",
+      "integrity": "sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/semver": {
       "version": "6.3.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
@@ -3728,6 +4216,13 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/std-env": {
+      "version": "3.9.0",
+      "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.9.0.tgz",
+      "integrity": "sha512-UGvjygr6F6tpH7o2qyqR6QYpwraIjKSdtzyBdyytFOHmPZY917kwdwLG0RbOjWOnKmnm3PeHjaoLLMie7kPLQw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/string-width": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
@@ -3837,6 +4332,26 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/strip-literal": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/strip-literal/-/strip-literal-3.1.0.tgz",
+      "integrity": "sha512-8r3mkIM/2+PpjHoOtiAW8Rg3jJLHaV7xPwG+YRGrv6FP0wwk/toTpATxWYOW0BKdWwl82VT2tFYi5DlROa0Mxg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "js-tokens": "^9.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/strip-literal/node_modules/js-tokens": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-9.0.1.tgz",
+      "integrity": "sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/sucrase": {
       "version": "3.35.0",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
@@ -3962,6 +4477,13 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/tinyexec": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-1.0.1.tgz",
+      "integrity": "sha512-5uC6DDlmeqiOwCPmK9jMSdOuZTh8bU39Ys6yidB+UTt5hfZUPGAypSgFRiEp+jbi9qH40BLDvy85jIU88wKSqw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.15",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
@@ -4013,6 +4535,36 @@
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
       "license": "0BSD"
     },
+    "node_modules/ufo": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.6.1.tgz",
+      "integrity": "sha512-9a4/uxlTWJ4+a5i0ooc1rU7C7YOw3wT+UGqdeNNHWnOF9qcMBgLRS+4IYUqbczewFx4mLEig6gawh7X6mFlEkA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/unctx": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/unctx/-/unctx-2.4.1.tgz",
+      "integrity": "sha512-AbaYw0Nm4mK4qjhns67C+kgxR2YWiwlDBPzxrN8h8C6VtAdCgditAY5Dezu3IJy4XVqAnbrXt9oQJvsn3fyozg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "acorn": "^8.14.0",
+        "estree-walker": "^3.0.3",
+        "magic-string": "^0.30.17",
+        "unplugin": "^2.1.0"
+      }
+    },
+    "node_modules/unctx/node_modules/estree-walker": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
+      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0"
+      }
+    },
     "node_modules/unicorn-magic": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/unicorn-magic/-/unicorn-magic-0.3.0.tgz",
@@ -4026,6 +4578,70 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/unimport": {
+      "version": "5.4.1",
+      "resolved": "https://registry.npmjs.org/unimport/-/unimport-5.4.1.tgz",
+      "integrity": "sha512-wMZ2JKUCleCK2zfRHeWcbrUHKXOC3SVBYkyn/wTGzh0THX6sT4hSjuKXxKANN4/WMbT6ZPM4JzcDcnhD2x9Bpg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "acorn": "^8.15.0",
+        "escape-string-regexp": "^5.0.0",
+        "estree-walker": "^3.0.3",
+        "local-pkg": "^1.1.2",
+        "magic-string": "^0.30.19",
+        "mlly": "^1.8.0",
+        "pathe": "^2.0.3",
+        "picomatch": "^4.0.3",
+        "pkg-types": "^2.3.0",
+        "scule": "^1.3.0",
+        "strip-literal": "^3.1.0",
+        "tinyglobby": "^0.2.15",
+        "unplugin": "^2.3.10",
+        "unplugin-utils": "^0.3.0"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      }
+    },
+    "node_modules/unimport/node_modules/estree-walker": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
+      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0"
+      }
+    },
+    "node_modules/unimport/node_modules/pkg-types": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-2.3.0.tgz",
+      "integrity": "sha512-SIqCzDRg0s9npO5XQ3tNZioRY1uK06lA41ynBC1YmFTmnY6FjUjVt6s4LoADmwoig1qqD0oK8h1p/8mlMx8Oig==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "confbox": "^0.2.2",
+        "exsolve": "^1.0.7",
+        "pathe": "^2.0.3"
+      }
+    },
+    "node_modules/unplugin": {
+      "version": "2.3.10",
+      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-2.3.10.tgz",
+      "integrity": "sha512-6NCPkv1ClwH+/BGE9QeoTIl09nuiAt0gS28nn1PvYXsGKRwM2TCbFA2QiilmehPDTXIe684k4rZI1yl3A1PCUw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/remapping": "^2.3.5",
+        "acorn": "^8.15.0",
+        "picomatch": "^4.0.3",
+        "webpack-virtual-modules": "^0.6.2"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      }
+    },
     "node_modules/unplugin-utils": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/unplugin-utils/-/unplugin-utils-0.3.1.tgz",
@@ -4043,6 +4659,33 @@
         "url": "https://github.com/sponsors/sxzz"
       }
     },
+    "node_modules/untyped": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/untyped/-/untyped-2.0.0.tgz",
+      "integrity": "sha512-nwNCjxJTjNuLCgFr42fEak5OcLuB3ecca+9ksPFNvtfYSLpjf+iJqSIaSnIile6ZPbKYxI5k2AfXqeopGudK/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "citty": "^0.1.6",
+        "defu": "^6.1.4",
+        "jiti": "^2.4.2",
+        "knitwork": "^1.2.0",
+        "scule": "^1.3.0"
+      },
+      "bin": {
+        "untyped": "dist/cli.mjs"
+      }
+    },
+    "node_modules/untyped/node_modules/jiti": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz",
+      "integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jiti": "lib/jiti-cli.mjs"
+      }
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz",
@@ -4313,6 +4956,13 @@
         "vue": "^3.0.0"
       }
     },
+    "node_modules/webpack-virtual-modules": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz",
+      "integrity": "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",

package.json

@@ -24,6 +24,9 @@
     "vue3-datepicker": "^0.4.0"
   },
   "devDependencies": {
+    "@iconify-json/radix-icons": "^1.2.5",
+    "@iconify/vue": "^5.0.0",
+    "@nuxtjs/color-mode": "^3.5.2",
     "@vitejs/plugin-vue": "^6.0.1",
     "autoprefixer": "^10.4.20",
     "postcss": "^8.4.47",

src/App.vue

@@ -6,10 +6,13 @@
           <img :src="logo" alt="AGEP" class="h-8 w-auto object-contain" />
           <RouterLink to="/" class="text-base font-semibold text-blue-700 hover:text-blue-800 hover:bg-transparent">Cargobikes</RouterLink>
         </div>
-        <nav class="flex items-center gap-4 text-sm">
+        <div class="flex items-center gap-4 text-sm">
+          <nav>
             <RouterLink to="/" class="text-blue-700 hover:text-blue-800 hover:bg-transparent">Réserver</RouterLink>
             <RouterLink to="/admin" class="text-blue-700 hover:text-blue-800 hover:bg-transparent">Admin</RouterLink>
           </nav>
+          <DarkMode/>
+        </div>
       </div>
     </header>
 
@@ -22,4 +25,5 @@
 <script setup>
 import { RouterLink, RouterView } from 'vue-router'
 import logo from '@/assets/logo-agep.png'
+import DarkMode from "@/components/DarkMode.vue";
 </script>

src/components/DarkMode.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+import { useColorMode } from '@vueuse/core'
+import { Button } from '@/components/ui/button'
+
+const mode = useColorMode()
+
+function toggle(){
+  if(mode.value === 'light'){
+    mode.value = 'dark'
+  } else {mode.value = 'light'}
+}
+</script>
+
+<template>
+    <Button variant="outline" @click="toggle()">
+      <Icon icon="radix-icons:moon" class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+      <Icon icon="radix-icons:sun" class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+      <span class="sr-only">Toggle theme</span>
+    </Button>
+</template>

src/components/DateTimePicker.vue

@@ -38,14 +38,17 @@ const normalizeMinute = (m) => {
 
 const toJsDate = (v) => {
   if (!v) return undefined
-  if (v instanceof Date) return new Date(v)
+  if (v instanceof Date) {
+    // Normalize to local date (strip timezone offset influence)
+    return new Date(v.getFullYear(), v.getMonth(), v.getDate())
+  }
   // handle @internationalized/date style objects
   if (typeof v === 'object' && v.year != null && v.month != null && v.day != null) {
     return new Date(v.year, v.month - 1, v.day)
   }
   // try parsing strings or other inputs
   const d = new Date(v)
-  if (!isNaN(d.getTime())) return d
+  if (!isNaN(d.getTime())) return new Date(d.getFullYear(), d.getMonth(), d.getDate())
   return undefined
 }
 
@@ -120,8 +123,8 @@ const ringMinutes = computed(() => [0, 15, 30, 45])
 
 const degHour = (h) => h * 30 + 270      // 360/12 = 30°
 const degMinute = (m) => m * 6 + 270     // 360/60 = 6°
-const outerRing = 90;
+const outerRing = 85;
-const innerRing = 65;
+const innerRing = 55;
 function transHour(h) {
   if (h==0) return innerRing;
   return h <= 12 ? outerRing : innerRing;

src/pages/AdminPage.vue

@@ -37,7 +37,14 @@
         <div v-if="bookings.length === 0" class="text-sm text-slate-500">Aucune réservation pour le moment.</div>
 
         <div v-else class="grid gap-3">
-          <div v-for="b in filtered" :key="b.id" class="rounded-lg border border-slate-200 p-3 grid gap-2">
+          <div
+            v-for="b in filtered"
+            :key="b.id"
+            :ref="el => setBookingRef(b.id, el)"
+            :id="`booking-${b.id}`"
+            class="rounded-lg border border-slate-200 p-3 grid gap-2"
+            :class="{ 'ring-2 ring-sky-400 border-sky-300': highlightId === b.id }"
+          >
             <div class="flex items-start justify-between gap-3">
               <div class="grid gap-1">
                 <div class="flex items-center gap-2">
@@ -140,9 +147,18 @@
                 <!-- Hour lines -->
                 <div v-for="h in hours" :key="h" class="h-12 border-b border-slate-100"></div>
                 <!-- Events -->
-                <div v-for="(ev, idx) in dayEvents[dayIdx]" :key="idx" class="absolute rounded-md text-[11px] leading-tight px-2 py-1 text-white shadow"
+                <div
+                  v-for="(ev, idx) in dayEvents[dayIdx]"
+                  :key="idx"
+                  class="absolute rounded-md text-[11px] leading-tight px-2 py-1 text-white shadow cursor-pointer"
                   :class="ev.status === 'pending' ? 'bg-amber-500' : 'bg-blue-600'"
-                     :style="eventStyle(ev)">
+                  :style="eventStyle(ev)"
+                  role="button"
+                  tabindex="0"
+                  @click="goToBooking(ev.id)"
+                  @keydown.enter.prevent="goToBooking(ev.id)"
+                  @keydown.space.prevent="goToBooking(ev.id)"
+                >
                   <div class="font-medium truncate">{{ ev.name }}</div>
                   <div class="opacity-90 truncate">{{ ev.timeLabel }}</div>
                 </div>
@@ -150,7 +166,7 @@
             </div>
           </div>
         </div>
-        <div class="text-xs text-slate-500">Les réservations refusées ne sont pas affichées dans le calendrier.</div>
+        <div class="text-xs text-slate-500">Seules les réservations acceptées sont affichées dans le calendrier.</div>
       </div>
     </div>
   </section>
@@ -178,11 +194,24 @@ const editForm = reactive({ bike_type: null })
 const selectedBike = ref('all')
 const calendarAnchor = ref(new Date())
 
+// Highlight and refs for booking cards
+const highlightId = ref(null)
+const bookingRefs = new Map()
+
 onMounted(async () => {
   await Promise.all([loadBikes(), loadBookings()])
   if (!selectedBike.value && bikes.value.length) selectedBike.value = bikes.value[0]
-  // Tick 'now' every minute for live status
   setInterval(() => { now.value = new Date() }, 60 * 1000)
+  // Deep-link: if a hash like #booking-123 is present, scroll to it
+  try {
+    const hash = typeof window !== 'undefined' ? window.location.hash : ''
+    const m = /^#booking-(\d+)$/.exec(hash || '')
+    if (m) {
+      const id = Number(m[1])
+      // delay to ensure refs are populated
+      setTimeout(() => goToBooking(id), 50)
+    }
+  } catch {}
 })
 
 async function loadBikes() {
@@ -235,15 +264,50 @@ function safeHHmm(timeStr) {
   return `${String(h).padStart(2,'0')}:${String(m).padStart(2,'0')}`
 }
 
+function isISODateString(s) { return typeof s === 'string' && /^\d{4}-\d{2}-\d{2}/.test(s) }
+function isFRDateString(s) { return typeof s === 'string' && /^\d{2}\/\d{2}\/\d{4}$/.test(s) }
+function toISOFromFR(s) {
+  const m = /^(\d{2})\/(\d{2})\/(\d{4})$/.exec(s || '')
+  if (!m) return ''
+  const dd = m[1], mm = m[2], yyyy = m[3]
+  return `${yyyy}-${mm}-${dd}`
+}
+function toFRFromISO(s) {
+  const m = /^(\d{4})-(\d{2})-(\d{2})/.exec(s || '')
+  if (!m) return ''
+  const yyyy = m[1], mm = m[2], dd = m[3]
+  return `${dd}/${mm}/${yyyy}`
+}
+function normalizeISO(dateStr) {
+  if (isISODateString(dateStr)) return dateStr.slice(0, 10)
+  if (isFRDateString(dateStr)) return toISOFromFR(dateStr)
+  const d = new Date(dateStr)
+  if (!isNaN(d.getTime())) {
+    const yyyy = d.getFullYear()
+    const mm = String(d.getMonth() + 1).padStart(2, '0')
+    const dd = String(d.getDate()).padStart(2, '0')
+    return `${yyyy}-${mm}-${dd}`
+  }
+  return ''
+}
+function formatDateLabel(dateStr) {
+  if (isFRDateString(dateStr)) return dateStr
+  if (isISODateString(dateStr)) return toFRFromISO(dateStr)
+  const d = new Date(dateStr)
+  if (!isNaN(d.getTime())) return formatDate(d)
+  return ''
+}
+
 function formatRange(b) {
-  // Use raw times to avoid TZ issues; still compute if same day
+  const isoS = normalizeISO(b.start_date)
-  const s = parseDateTime(b.start_date, b.start_time)
+  const isoE = normalizeISO(b.end_date)
-  const e = parseDateTime(b.end_date, b.end_time, true)
-  const sameDay = s.toDateString() === e.toDateString()
   const st = safeHHmm(b.start_time)
   const et = safeHHmm(b.end_time)
-  if (sameDay) return `${formatDate(s)} ${st} → ${et}`
+  const sameDay = isoS && isoE && isoS === isoE
-  return `${formatDate(s)} ${st} → ${formatDate(e)} ${et}`
+  const sLabel = formatDateLabel(b.start_date)
+  const eLabel = formatDateLabel(b.end_date)
+  if (sameDay) return `${sLabel} ${st} → ${et}`
+  return `${sLabel} ${st} → ${eLabel} ${et}`
 }
 
 function formatBikes(b) {
@@ -256,16 +320,36 @@ function formatBikes(b) {
 }
 
 function parseDateTime(dateStr, timeStr, end = false) {
-  // dateStr = 'YYYY-MM-DD', timeStr = 'HH:MM' or null
+  // Accept 'YYYY-MM-DD', 'YYYY-MM-DDTHH:mm:ssZ', 'DD/MM/YYYY', or Date
-  const [y, m, d] = (dateStr || '').split('-').map(Number)
+  let y, m, d
+  if (dateStr instanceof Date) {
+    y = dateStr.getFullYear(); m = dateStr.getMonth() + 1; d = dateStr.getDate()
+  } else if (typeof dateStr === 'string') {
+    const iso = /^(\d{4})-(\d{2})-(\d{2})/.exec(dateStr)
+    if (iso) { y = Number(iso[1]); m = Number(iso[2]); d = Number(iso[3]) }
+    else {
+      const fr = /^(\d{2})\/(\d{2})\/(\d{4})$/.exec(dateStr)
+      if (fr) { d = Number(fr[1]); m = Number(fr[2]); y = Number(fr[3]) }
+      else {
+        const dt = new Date(dateStr)
+        if (!isNaN(dt.getTime())) { y = dt.getFullYear(); m = dt.getMonth() + 1; d = dt.getDate() }
+      }
+    }
+  }
+  // Fallbacks
+  y = Number.isFinite(y) ? y : new Date().getFullYear()
+  m = Number.isFinite(m) ? m : 1
+  d = Number.isFinite(d) ? d : 1
+
   let h = 0, min = 0
-  if (timeStr && timeStr.includes(':')) {
+  if (timeStr && typeof timeStr === 'string' && timeStr.includes(':')) {
     const [hh, mm] = timeStr.split(':').map(Number)
-    h = hh; min = mm
+    h = Number.isFinite(hh) ? hh : 0
+    min = Number.isFinite(mm) ? mm : 0
   } else if (end) {
     h = 23; min = 59
   }
-  return new Date(y, (m || 1) - 1, d || 1, h, min, 0, 0)
+  return new Date(y, m - 1, d, h, min, 0, 0)
 }
 
 function formatDate(d) {
@@ -298,6 +382,44 @@ async function saveEdit(b) {
   }
 }
 
+// Actions: accept / refuse / restore / delete
+async function accept(b) {
+  try {
+    await api.updateBookingStatus(b.id, 'accepted')
+    await loadBookings()
+  } catch (e) {
+    error.value = `Erreur lors de l'acceptation (#${b.id}).`
+  }
+}
+
+async function refuse(b) {
+  try {
+    await api.updateBookingStatus(b.id, 'refused')
+    await loadBookings()
+  } catch (e) {
+    error.value = `Erreur lors du refus (#${b.id}).`
+  }
+}
+
+async function restore(b) {
+  try {
+    await api.updateBookingStatus(b.id, 'pending')
+    await loadBookings()
+  } catch (e) {
+    error.value = `Erreur lors de la restauration (#${b.id}).`
+  }
+}
+
+async function remove(b) {
+  try {
+    if (!confirm(`Supprimer la réservation #${b.id} ?`)) return
+    await api.deleteBooking(b.id)
+    await loadBookings()
+  } catch (e) {
+    error.value = `Erreur lors de la suppression (#${b.id}).`
+  }
+}
+
 // UI status helper for filtering
 function uiStatus(b) {
   if (b.status === 'refused') return 'refused'
@@ -346,6 +468,37 @@ function goToday() { calendarAnchor.value = new Date() }
 
 const gridTemplateDays = computed(() => ({ gridTemplateColumns: `80px repeat(7, minmax(0, 1fr))` }))
 
+function setBookingRef(id, el) {
+  if (el) bookingRefs.set(id, el)
+  else bookingRefs.delete(id)
+}
+function goToBooking(id) {
+  // Update URL hash for deep-linking
+  try { if (typeof window !== 'undefined') window.location.hash = `booking-${id}` } catch {}
+  // ensure the card exists (may be filtered out); switch filter to 'all' if needed
+  const has = bookingRefs.get(id)
+  if (!has) {
+    // temporarily switch to 'all' to ensure visibility
+    const prev = filter.value
+    filter.value = 'all'
+    // next tick-like delay
+    setTimeout(() => {
+      const el = bookingRefs.get(id)
+      if (el) {
+        el.scrollIntoView({ behavior: 'smooth', block: 'start' })
+        highlightId.value = id
+        setTimeout(() => { if (highlightId.value === id) highlightId.value = null }, 2500)
+      }
+      // restore previous filter after highlighting
+      setTimeout(() => { filter.value = prev }, 2800)
+    }, 0)
+    return
+  }
+  has.scrollIntoView({ behavior: 'smooth', block: 'start' })
+  highlightId.value = id
+  setTimeout(() => { if (highlightId.value === id) highlightId.value = null }, 2500)
+}
+
 const dayEvents = computed(() => {
   const map = Array.from({ length: 7 }, () => [])
   if (!selectedBike.value) return map
@@ -354,7 +507,8 @@ const dayEvents = computed(() => {
   const endOfWeek = new Date(weekStart.value)
   endOfWeek.setDate(endOfWeek.getDate() + 7)
 
-  const relevant = bookings.value.filter(b => b.status !== 'refused' && includesBike(b, selectedBike.value))
+  // Only accepted bookings appear on the calendar
+  const relevant = bookings.value.filter(b => b.status === 'accepted' && includesBike(b, selectedBike.value))
 
   for (const b of relevant) {
     const s = parseDateTime(b.start_date, b.start_time)
@@ -385,6 +539,7 @@ const dayEvents = computed(() => {
       if (botMin <= visStart || topMin >= visEnd) continue
 
       const ev = {
+        id: b.id,
         dayIdx: i,
         topMin,
         bottomMin: botMin,
@@ -399,7 +554,7 @@ const dayEvents = computed(() => {
   // Layout: simple column assignment to avoid overlap
   for (let i = 0; i < 7; i++) {
     const events = map[i].sort((a,b) => a.topMin - b.topMin)
-    const cols = [] // each col is last bottomMin
+    const cols = []
     for (const ev of events) {
       let placed = false
       for (let c = 0; c < cols.length; c++) {
@@ -431,7 +586,7 @@ function eventStyle(ev) {
 }
 </script>
 
-<!-- Status badge as a small sub-component to fix wrapping (whitespace-nowrap) -->
+<!-- Status badge component remains unchanged here -->
 <script>
 export default {
   name: 'AdminPage',
@@ -440,9 +595,34 @@ export default {
       props: { booking: { type: Object, required: true }, now: { type: Object, required: true } },
       methods: {
         parse(dateStr, timeStr, end = false) {
-          const [y,m,d] = (dateStr||'').split('-').map(Number)
+          let y, m, d
-          let h=0,min=0; if (timeStr && timeStr.includes(':')) { const [hh,mm]=timeStr.split(':').map(Number); h=hh; min=mm } else if (end) { h=23; min=59 }
+          if (dateStr instanceof Date) {
-          return new Date(y, (m||1)-1, d||1, h, min, 0, 0)
+            y = dateStr.getFullYear(); m = dateStr.getMonth() + 1; d = dateStr.getDate()
+          } else if (typeof dateStr === 'string') {
+            const iso = /^(\d{4})-(\d{2})-(\d{2})/.exec(dateStr)
+            if (iso) { y = Number(iso[1]); m = Number(iso[2]); d = Number(iso[3]) }
+            else {
+              const fr = /^(\d{2})\/(\d{2})\/(\d{4})$/.exec(dateStr)
+              if (fr) { d = Number(fr[1]); m = Number(fr[2]); y = Number(fr[3]) }
+              else {
+                const dt = new Date(dateStr)
+                if (!isNaN(dt.getTime())) { y = dt.getFullYear(); m = dt.getMonth() + 1; d = dt.getDate() }
+              }
+            }
+          }
+          y = Number.isFinite(y) ? y : new Date().getFullYear()
+          m = Number.isFinite(m) ? m : 1
+          d = Number.isFinite(d) ? d : 1
+
+          let h = 0, min = 0
+          if (timeStr && typeof timeStr === 'string' && timeStr.includes(':')) {
+            const [hh, mm] = timeStr.split(':').map(Number)
+            h = Number.isFinite(hh) ? hh : 0
+            min = Number.isFinite(mm) ? mm : 0
+          } else if (end) {
+            h = 23; min = 59
+          }
+          return new Date(y, m - 1, d, h, min, 0, 0)
         },
       },
       computed: {

src/pages/BookingPage.vue

@@ -15,9 +15,9 @@
           </div>
 
           <!-- Bike size/type as two columns of buttons (multi-select) -->
-          <div class="grid gap-2">
+          <div class="grid gap-5">
             <span class="label">Taille de vélo souhaitée</span>
-            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 items-start">
+            <div class="grid grid-cols-1 sm:grid-cols-2 gap-2 items-start">
               <div class="grid gap-2 self-start">
                 <div class="text-xs text-slate-500">Grands cargos</div>
                 <button
@@ -163,7 +163,7 @@ function toggleBike(b) {
 function buttonClass(b) {
   return isSelected(b)
     ? 'bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))] border-transparent'
-    : 'hover:bg-[hsl(var(--muted))]'
+    : 'hover:bg-[hsl(var(--selected))]'
 }
 
 function addEmail() { form.emails.push('') }