From 75c4785e3d92c0e52575d0d7a03651ef267db237 Mon Sep 17 00:00:00 2001
From: Antoine Pelletier <antoine.pelletier@epfl.ch>
Date: Mon, 13 Oct 2025 05:27:04 +0200
Subject: [PATCH] feat: admin and book page

---
 backend/server.js                             |  74 ++-
 components.json                               |  21 +
 package-lock.json                             | 449 +++++++++++----
 package.json                                  |  16 +-
 src/assets/main.css                           |  83 ++-
 src/components/DateTimePicker.vue             | 211 +++++++
 src/components/ui/button/Button.vue           |  23 +
 src/components/ui/button/index.js             |  36 ++
 src/components/ui/calendar/Calendar.vue       |  95 ++++
 src/components/ui/calendar/CalendarCell.vue   |  30 +
 .../ui/calendar/CalendarCellTrigger.vue       |  42 ++
 src/components/ui/calendar/CalendarGrid.vue   |  24 +
 .../ui/calendar/CalendarGridBody.vue          |  14 +
 .../ui/calendar/CalendarGridHead.vue          |  15 +
 .../ui/calendar/CalendarGridRow.vue           |  21 +
 .../ui/calendar/CalendarHeadCell.vue          |  29 +
 src/components/ui/calendar/CalendarHeader.vue |  26 +
 .../ui/calendar/CalendarHeading.vue           |  29 +
 .../ui/calendar/CalendarNextButton.vue        |  35 ++
 .../ui/calendar/CalendarPrevButton.vue        |  35 ++
 src/components/ui/calendar/index.js           |  12 +
 src/components/ui/popover/Popover.vue         |  18 +
 src/components/ui/popover/PopoverContent.vue  |  62 +++
 src/components/ui/popover/PopoverTrigger.vue  |  14 +
 src/components/ui/popover/index.js            |   4 +
 src/lib/utils.js                              |  13 +
 src/pages/AdminPage.vue                       | 519 +++++++++++++++---
 src/pages/BookingPage.vue                     | 231 ++++----
 src/services/api.js                           |  61 +-
 tailwind.config.js                            | 132 +++--
 30 files changed, 1966 insertions(+), 408 deletions(-)
 create mode 100644 components.json
 create mode 100644 src/components/DateTimePicker.vue
 create mode 100644 src/components/ui/button/Button.vue
 create mode 100644 src/components/ui/button/index.js
 create mode 100644 src/components/ui/calendar/Calendar.vue
 create mode 100644 src/components/ui/calendar/CalendarCell.vue
 create mode 100644 src/components/ui/calendar/CalendarCellTrigger.vue
 create mode 100644 src/components/ui/calendar/CalendarGrid.vue
 create mode 100644 src/components/ui/calendar/CalendarGridBody.vue
 create mode 100644 src/components/ui/calendar/CalendarGridHead.vue
 create mode 100644 src/components/ui/calendar/CalendarGridRow.vue
 create mode 100644 src/components/ui/calendar/CalendarHeadCell.vue
 create mode 100644 src/components/ui/calendar/CalendarHeader.vue
 create mode 100644 src/components/ui/calendar/CalendarHeading.vue
 create mode 100644 src/components/ui/calendar/CalendarNextButton.vue
 create mode 100644 src/components/ui/calendar/CalendarPrevButton.vue
 create mode 100644 src/components/ui/calendar/index.js
 create mode 100644 src/components/ui/popover/Popover.vue
 create mode 100644 src/components/ui/popover/PopoverContent.vue
 create mode 100644 src/components/ui/popover/PopoverTrigger.vue
 create mode 100644 src/components/ui/popover/index.js
 create mode 100644 src/lib/utils.js

diff --git a/backend/server.js b/backend/server.js
index e075728..d50df2b 100644
--- a/backend/server.js
+++ b/backend/server.js
@@ -31,9 +31,10 @@ app.post('/api/bookings', async (req, res) => {
       return res.status(400).json({ error: 'Missing fields' })
     }
 
-    const text = `INSERT INTO bookings(bike_type, bike_types, start_date, start_time, end_date, end_time, name, email)
-                  VALUES($1, $2, $3, $4, $5, $6, $7, $8) RETURNING *`
-    const values = [single, multi.length ? multi.join(',') : null, start_date, start_time || null, end_date, end_time || null, name, email]
+    // Explicitly set status to 'pending' to avoid relying solely on DB defaults
+    const text = `INSERT INTO bookings(bike_type, bike_types, start_date, start_time, end_date, end_time, name, email, status)
+                  VALUES($1, $2, $3, $4, $5, $6, $7, $8, $9) RETURNING *`
+    const values = [single, multi.length ? multi.join(',') : null, start_date, start_time || null, end_date, end_time || null, name, email, 'pending']
     const result = await pool.query(text, values)
     res.status(201).json({ booking: result.rows[0] })
   } catch (err) {
@@ -53,6 +54,66 @@ app.get('/api/bookings', async (req, res) => {
   }
 })
 
+// Update booking status
+app.patch('/api/bookings/:id/status', async (req, res) => {
+  try {
+    const id = Number(req.params.id)
+    if (!Number.isFinite(id)) return res.status(400).json({ error: 'Invalid id' })
+
+    const { status } = req.body || {}
+    const allowed = ['pending', 'accepted', 'refused']
+    if (!allowed.includes(status)) return res.status(400).json({ error: 'Invalid status' })
+
+    // Read current status to enforce immutability once accepted
+    const current = await pool.query('SELECT status FROM bookings WHERE id = $1', [id])
+    if (current.rowCount === 0) return res.status(404).json({ error: 'Booking not found' })
+    const curr = current.rows[0].status
+    if (curr === 'accepted' && status !== 'accepted') {
+      return res.status(400).json({ error: 'Accepted bookings cannot change status' })
+    }
+
+    const result = await pool.query('UPDATE bookings SET status = $1 WHERE id = $2 RETURNING *', [status, id])
+    if (result.rowCount === 0) return res.status(404).json({ error: 'Booking not found' })
+
+    res.json({ booking: result.rows[0] })
+  } catch (err) {
+    console.error(err)
+    res.status(500).json({ error: 'Server error' })
+  }
+})
+
+// Update booking fields (non-status)
+app.patch('/api/bookings/:id', async (req, res) => {
+  try {
+    const id = Number(req.params.id)
+    if (!Number.isFinite(id)) return res.status(400).json({ error: 'Invalid id' })
+
+    const allowed = ['bike_type', 'bike_types', 'start_date', 'start_time', 'end_date', 'end_time', 'name', 'email']
+    const entries = Object.entries(req.body || {}).filter(([k, v]) => allowed.includes(k))
+
+    if (entries.length === 0) return res.status(400).json({ error: 'No valid fields to update' })
+
+    // Build dynamic update
+    const sets = []
+    const values = []
+    for (let i = 0; i < entries.length; i++) {
+      const [k, v] = entries[i]
+      sets.push(`${k} = $${i + 1}`)
+      values.push(v)
+    }
+    values.push(id)
+
+    const sql = `UPDATE bookings SET ${sets.join(', ')} WHERE id = $${values.length} RETURNING *`
+    const result = await pool.query(sql, values)
+    if (result.rowCount === 0) return res.status(404).json({ error: 'Booking not found' })
+
+    res.json({ booking: result.rows[0] })
+  } catch (err) {
+    console.error(err)
+    res.status(500).json({ error: 'Server error' })
+  }
+})
+
 // Delete a booking by id
 app.delete('/api/bookings/:id', async (req, res) => {
   try {
@@ -82,6 +143,7 @@ async function ensureTables() {
       end_time TIME,
       name TEXT NOT NULL,
       email TEXT NOT NULL,
+      status TEXT NOT NULL DEFAULT 'pending',
       created_at TIMESTAMP WITH TIME ZONE DEFAULT now()
     );
   `
@@ -92,6 +154,12 @@ async function ensureTables() {
     await pool.query(`ALTER TABLE bookings ADD COLUMN IF NOT EXISTS start_time TIME;`)
     await pool.query(`ALTER TABLE bookings ADD COLUMN IF NOT EXISTS end_time TIME;`)
     await pool.query(`ALTER TABLE bookings ADD COLUMN IF NOT EXISTS bike_types TEXT;`)
+    await pool.query(`ALTER TABLE bookings ADD COLUMN IF NOT EXISTS status TEXT;`)
+    // Ensure default and not-null for status
+    await pool.query(`ALTER TABLE bookings ALTER COLUMN status SET DEFAULT 'pending';`)
+    await pool.query(`UPDATE bookings SET status = 'pending' WHERE status IS NULL;`)
+    await pool.query(`ALTER TABLE bookings ALTER COLUMN status SET NOT NULL;`)
+    // bike_type nullable for multi-type support
     await pool.query(`ALTER TABLE bookings ALTER COLUMN bike_type DROP NOT NULL;`)
     console.log('Database: bookings table is present (created/migrated if needed)')
   } catch (err) {
diff --git a/components.json b/components.json
new file mode 100644
index 0000000..7ca6044
--- /dev/null
+++ b/components.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://shadcn-vue.com/schema.json",
+  "style": "new-york",
+  "typescript": false,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/assets/main.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "composables": "@/composables"
+  },
+  "registries": {}
+}
diff --git a/package-lock.json b/package-lock.json
index 6a0223c..20da93d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,8 +8,16 @@
       "name": "agep-cargo",
       "version": "0.0.0",
       "dependencies": {
+        "@vueuse/core": "^13.9.0",
+        "class-variance-authority": "^0.7.1",
+        "clsx": "^2.1.1",
+        "lucide-vue-next": "^0.545.0",
+        "reka-ui": "^2.5.1",
+        "tailwind-merge": "^3.3.1",
+        "tailwindcss-animate": "^1.0.7",
         "vue": "^3.5.22",
-        "vue-router": "^4.2.1"
+        "vue-router": "^4.2.1",
+        "vue3-datepicker": "^0.4.0"
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^6.0.1",
@@ -27,7 +35,6 @@
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
       "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=10"
@@ -445,6 +452,15 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.28.4",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.4.tgz",
+      "integrity": "sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/template": {
       "version": "7.27.2",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.2.tgz",
@@ -934,11 +950,90 @@
         "node": ">=18"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.3.tgz",
+      "integrity": "sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.10"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.4.tgz",
+      "integrity": "sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/core": "^1.7.3",
+        "@floating-ui/utils": "^0.2.10"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.10",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.10.tgz",
+      "integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==",
+      "license": "MIT"
+    },
+    "node_modules/@floating-ui/vue": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/@floating-ui/vue/-/vue-1.1.9.tgz",
+      "integrity": "sha512-BfNqNW6KA83Nexspgb9DZuz578R7HT8MZw1CfK9I6Ah4QReNWEJsXWHN+SdmOVLNGmTPDi+fDT535Df5PzMLbQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/dom": "^1.7.4",
+        "@floating-ui/utils": "^0.2.10",
+        "vue-demi": ">=0.13.0"
+      }
+    },
+    "node_modules/@floating-ui/vue/node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@internationalized/date": {
+      "version": "3.10.0",
+      "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.10.0.tgz",
+      "integrity": "sha512-oxDR/NTEJ1k+UFVQElaNIk65E/Z83HK1z1WI3lQyhTtnNg4R5oVXaPzK3jcpKG8UHKDVuDQHzn+wsxSz8RP3aw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      }
+    },
+    "node_modules/@internationalized/number": {
+      "version": "3.6.5",
+      "resolved": "https://registry.npmjs.org/@internationalized/number/-/number-3.6.5.tgz",
+      "integrity": "sha512-6hY4Kl4HPBvtfS62asS/R22JzNNy8vi/Ssev7x6EobfCp+9QIB2hKvI2EtbdJ0VSQacxVNtqhE/NmF/NZ0gm6g==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      }
+    },
     "node_modules/@isaacs/cliui": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
       "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "string-width": "^5.1.2",
@@ -956,7 +1051,6 @@
       "version": "0.3.13",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
       "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.5.0",
@@ -978,7 +1072,6 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
       "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.0.0"
@@ -994,7 +1087,6 @@
       "version": "0.3.31",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
       "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.1.0",
@@ -1005,7 +1097,6 @@
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
       "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@nodelib/fs.stat": "2.0.5",
@@ -1019,7 +1110,6 @@
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
       "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 8"
@@ -1029,7 +1119,6 @@
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
       "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@nodelib/fs.scandir": "2.1.5",
@@ -1043,7 +1132,6 @@
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
       "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "engines": {
@@ -1392,6 +1480,41 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.17",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.17.tgz",
+      "integrity": "sha512-5IKx/Y13RsYd+sauPb2x+U/xZikHjolzfuDgTAl/Tdf3Q8rslRvC19NKDLgAJQ6wsqADk10ntlv08nPFw/gO/A==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.8.0"
+      }
+    },
+    "node_modules/@tanstack/virtual-core": {
+      "version": "3.13.12",
+      "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.13.12.tgz",
+      "integrity": "sha512-1YBOJfRHV4sXUmWsFSf5rQor4Ss82G8dQWLRbnk3GA4jeP8hQt1hxXh0tmflpC0dz3VgEv/1+qwPyLeWkQuPFA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/vue-virtual": {
+      "version": "3.13.12",
+      "resolved": "https://registry.npmjs.org/@tanstack/vue-virtual/-/vue-virtual-3.13.12.tgz",
+      "integrity": "sha512-vhF7kEU9EXWXh+HdAwKJ2m3xaOnTTmgcdXcF2pim8g4GvI7eRrk2YRuV5nUlZnd/NbCIX4/Ja2OZu5EjJL06Ww==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/virtual-core": "3.13.12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "vue": "^2.7.0 || ^3.0.0"
+      }
+    },
     "node_modules/@types/estree": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
@@ -1399,6 +1522,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/web-bluetooth": {
+      "version": "0.0.21",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.21.tgz",
+      "integrity": "sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==",
+      "license": "MIT"
+    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-6.0.1.tgz",
@@ -1638,11 +1767,48 @@
       "integrity": "sha512-F4yc6palwq3TT0u+FYf0Ns4Tfl9GRFURDN2gWG7L1ecIaS/4fCIuFOjMTnCyjsu/OK6vaDKLCrGAa+KvvH+h4w==",
       "license": "MIT"
     },
+    "node_modules/@vueuse/core": {
+      "version": "13.9.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-13.9.0.tgz",
+      "integrity": "sha512-ts3regBQyURfCE2BcytLqzm8+MmLlo5Ln/KLoxDVcsZ2gzIwVNnQpQOL/UKV8alUqjSZOlpFZcRNsLRqj+OzyA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.21",
+        "@vueuse/metadata": "13.9.0",
+        "@vueuse/shared": "13.9.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
+    "node_modules/@vueuse/metadata": {
+      "version": "13.9.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-13.9.0.tgz",
+      "integrity": "sha512-1AFRvuiGphfF7yWixZa0KwjYH8ulyjDCC0aFgrGRz8+P4kvDFSdXLVfTk5xAN9wEuD1J6z4/myMoYbnHoX07zg==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared": {
+      "version": "13.9.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-13.9.0.tgz",
+      "integrity": "sha512-e89uuTLMh0U5cZ9iDpEI2senqPGfbPRTHM/0AaQkcxnpqjkZqDYP8rpfm7edOz8s+pOCOROEy1PIveSW8+fL5g==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
     "node_modules/ansi-regex": {
       "version": "6.2.2",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.2.tgz",
       "integrity": "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -1655,7 +1821,6 @@
       "version": "6.2.3",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.3.tgz",
       "integrity": "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -1678,14 +1843,12 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
       "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/anymatch": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
       "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "normalize-path": "^3.0.0",
@@ -1699,7 +1862,6 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8.6"
@@ -1712,9 +1874,20 @@
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
       "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
-      "dev": true,
       "license": "MIT"
     },
+    "node_modules/aria-hidden": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.6.tgz",
+      "integrity": "sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/autoprefixer": {
       "version": "10.4.21",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.21.tgz",
@@ -1757,7 +1930,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/baseline-browser-mapping": {
@@ -1774,7 +1946,6 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
       "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -1797,7 +1968,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
       "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "balanced-match": "^1.0.0"
@@ -1807,7 +1977,6 @@
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
       "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "fill-range": "^7.1.1"
@@ -1871,7 +2040,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
       "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 6"
@@ -1902,7 +2070,6 @@
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
       "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "anymatch": "~3.1.2",
@@ -1927,7 +2094,6 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "is-glob": "^4.0.1"
@@ -1936,11 +2102,31 @@
         "node": ">= 6"
       }
     },
+    "node_modules/class-variance-authority": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
+      "integrity": "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "clsx": "^2.1.1"
+      },
+      "funding": {
+        "url": "https://polar.sh/cva"
+      }
+    },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "color-name": "~1.1.4"
@@ -1953,14 +2139,12 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/commander": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
       "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 6"
@@ -1993,7 +2177,6 @@
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
       "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "path-key": "^3.1.0",
@@ -2008,7 +2191,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
       "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
-      "dev": true,
       "license": "MIT",
       "bin": {
         "cssesc": "bin/cssesc"
@@ -2023,6 +2205,22 @@
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
       "license": "MIT"
     },
+    "node_modules/date-fns": {
+      "version": "2.30.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
+      "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.21.0"
+      },
+      "engines": {
+        "node": ">=0.11"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/date-fns"
+      }
+    },
     "node_modules/debug": {
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
@@ -2084,25 +2282,28 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/defu": {
+      "version": "6.1.4",
+      "resolved": "https://registry.npmjs.org/defu/-/defu-6.1.4.tgz",
+      "integrity": "sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==",
+      "license": "MIT"
+    },
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
       "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
-      "dev": true,
       "license": "Apache-2.0"
     },
     "node_modules/dlv": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
       "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/eastasianwidth": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
       "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/electron-to-chromium": {
@@ -2116,7 +2317,6 @@
       "version": "9.2.2",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
       "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/entities": {
@@ -2230,7 +2430,6 @@
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
       "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@nodelib/fs.stat": "^2.0.2",
@@ -2247,7 +2446,6 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "is-glob": "^4.0.1"
@@ -2260,7 +2458,6 @@
       "version": "1.19.1",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.19.1.tgz",
       "integrity": "sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "reusify": "^1.0.4"
@@ -2304,7 +2501,6 @@
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
       "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "to-regex-range": "^5.0.1"
@@ -2317,7 +2513,6 @@
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz",
       "integrity": "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "cross-spawn": "^7.0.6",
@@ -2348,7 +2543,6 @@
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
       "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
       "optional": true,
@@ -2363,7 +2557,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
       "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "dev": true,
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -2400,7 +2593,6 @@
       "version": "10.4.5",
       "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
       "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "foreground-child": "^3.1.0",
@@ -2421,7 +2613,6 @@
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
       "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "is-glob": "^4.0.3"
@@ -2434,7 +2625,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
       "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "function-bind": "^1.1.2"
@@ -2464,7 +2654,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
       "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "binary-extensions": "^2.0.0"
@@ -2477,7 +2666,6 @@
       "version": "2.16.1",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
       "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "hasown": "^2.0.2"
@@ -2509,7 +2697,6 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
       "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -2519,7 +2706,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
       "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -2529,7 +2715,6 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-extglob": "^2.1.1"
@@ -2561,7 +2746,6 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.12.0"
@@ -2639,14 +2823,12 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
-      "dev": true,
       "license": "ISC"
     },
     "node_modules/jackspeak": {
       "version": "3.4.3",
       "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
       "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
-      "dev": true,
       "license": "BlueOak-1.0.0",
       "dependencies": {
         "@isaacs/cliui": "^8.0.2"
@@ -2662,7 +2844,6 @@
       "version": "1.21.7",
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
       "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
-      "dev": true,
       "license": "MIT",
       "peer": true,
       "bin": {
@@ -2713,7 +2894,6 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
       "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=14"
@@ -2726,7 +2906,6 @@
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/lru-cache": {
@@ -2739,6 +2918,15 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-vue-next": {
+      "version": "0.545.0",
+      "resolved": "https://registry.npmjs.org/lucide-vue-next/-/lucide-vue-next-0.545.0.tgz",
+      "integrity": "sha512-UXOQYVdJ2dmwkC0jawC9D5efCw/vyogTKvPx7gJ8ZzhrDblcP5oUt44CyMgjX1WJX7gG5XxGdB5FrT/sYM637Q==",
+      "license": "ISC",
+      "peerDependencies": {
+        "vue": ">=3.0.1"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.19",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.19.tgz",
@@ -2752,7 +2940,6 @@
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
       "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 8"
@@ -2762,7 +2949,6 @@
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
       "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "braces": "^3.0.3",
@@ -2776,7 +2962,6 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8.6"
@@ -2789,7 +2974,6 @@
       "version": "9.0.5",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
       "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "brace-expansion": "^2.0.1"
@@ -2805,7 +2989,6 @@
       "version": "7.1.2",
       "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
       "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
-      "dev": true,
       "license": "ISC",
       "engines": {
         "node": ">=16 || 14 >=14.17"
@@ -2839,7 +3022,6 @@
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
       "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "any-promise": "^1.0.0",
@@ -2876,7 +3058,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
       "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -2926,7 +3107,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -2936,7 +3116,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
       "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 6"
@@ -2946,7 +3125,6 @@
       "version": "2.0.11",
       "resolved": "https://registry.npmjs.org/ohash/-/ohash-2.0.11.tgz",
       "integrity": "sha512-RdR9FQrFwNBNXAr4GixM8YaRZRJ5PUWbKYbE5eOsrwAjJW0q2REGcf79oYPsLyskQCZG1PLN+S/K1V00joZAoQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/open": {
@@ -2972,7 +3150,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
       "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
-      "dev": true,
       "license": "BlueOak-1.0.0"
     },
     "node_modules/parse-ms": {
@@ -2992,7 +3169,6 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
       "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -3002,14 +3178,12 @@
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/path-scurry": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
       "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
-      "dev": true,
       "license": "BlueOak-1.0.0",
       "dependencies": {
         "lru-cache": "^10.2.0",
@@ -3026,7 +3200,6 @@
       "version": "10.4.3",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
       "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
-      "dev": true,
       "license": "ISC"
     },
     "node_modules/pathe": {
@@ -3066,7 +3239,6 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
       "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -3076,7 +3248,6 @@
       "version": "4.0.7",
       "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.7.tgz",
       "integrity": "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 6"
@@ -3115,7 +3286,6 @@
       "version": "15.1.0",
       "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
       "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "postcss-value-parser": "^4.0.0",
@@ -3133,7 +3303,6 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.1.0.tgz",
       "integrity": "sha512-oIAOTqgIo7q2EOwbhb8UalYePMvYoIeRY2YKntdpFQXNosSu3vLrniGgmH9OKs/qAkfoj5oB3le/7mINW1LCfw==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -3159,7 +3328,6 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-6.0.1.tgz",
       "integrity": "sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -3202,7 +3370,6 @@
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
       "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -3228,7 +3395,6 @@
       "version": "6.1.2",
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
       "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "cssesc": "^3.0.0",
@@ -3242,7 +3408,6 @@
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/pretty-ms": {
@@ -3265,7 +3430,6 @@
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
       "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -3286,7 +3450,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
       "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "pify": "^2.3.0"
@@ -3296,7 +3459,6 @@
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
       "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "picomatch": "^2.2.1"
@@ -3309,7 +3471,6 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8.6"
@@ -3318,11 +3479,67 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/reka-ui": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/reka-ui/-/reka-ui-2.5.1.tgz",
+      "integrity": "sha512-QJGB3q21wQ1Kw28HhhNDpjfFe8qpePX1gK4FTBRd68XTh9aEnhR5bTJnlV0jxi8FBPh0xivZBeNFUc3jiGx7mQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/dom": "^1.6.13",
+        "@floating-ui/vue": "^1.1.6",
+        "@internationalized/date": "^3.5.0",
+        "@internationalized/number": "^3.5.0",
+        "@tanstack/vue-virtual": "^3.12.0",
+        "@vueuse/core": "^12.5.0",
+        "@vueuse/shared": "^12.5.0",
+        "aria-hidden": "^1.2.4",
+        "defu": "^6.1.4",
+        "ohash": "^2.0.11"
+      },
+      "peerDependencies": {
+        "vue": ">= 3.2.0"
+      }
+    },
+    "node_modules/reka-ui/node_modules/@vueuse/core": {
+      "version": "12.8.2",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-12.8.2.tgz",
+      "integrity": "sha512-HbvCmZdzAu3VGi/pWYm5Ut+Kd9mn1ZHnn4L5G8kOQTPs/IwIAmJoBrmYk2ckLArgMXZj0AW3n5CAejLUO+PhdQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.21",
+        "@vueuse/metadata": "12.8.2",
+        "@vueuse/shared": "12.8.2",
+        "vue": "^3.5.13"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/reka-ui/node_modules/@vueuse/metadata": {
+      "version": "12.8.2",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-12.8.2.tgz",
+      "integrity": "sha512-rAyLGEuoBJ/Il5AmFHiziCPdQzRt88VxR+Y/A/QhJ1EWtWqPBBAxTAFaSkviwEuOEZNtW8pvkPgoCZQ+HxqW1A==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/reka-ui/node_modules/@vueuse/shared": {
+      "version": "12.8.2",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-12.8.2.tgz",
+      "integrity": "sha512-dznP38YzxZoNloI0qpEfpkms8knDtaoQ6Y/sfS0L7Yki4zh40LFHEhur0odJC6xTHG5dxWVPiUWBXn+wCG2s5w==",
+      "license": "MIT",
+      "dependencies": {
+        "vue": "^3.5.13"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/resolve": {
       "version": "1.22.10",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
       "integrity": "sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-core-module": "^2.16.0",
@@ -3343,7 +3560,6 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
       "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "iojs": ">=1.0.0",
@@ -3416,7 +3632,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
       "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -3450,7 +3665,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
       "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "shebang-regex": "^3.0.0"
@@ -3463,7 +3677,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
       "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -3473,7 +3686,6 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
       "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
-      "dev": true,
       "license": "ISC",
       "engines": {
         "node": ">=14"
@@ -3520,7 +3732,6 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
       "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "eastasianwidth": "^0.2.0",
@@ -3539,7 +3750,6 @@
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
       "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "emoji-regex": "^8.0.0",
@@ -3554,7 +3764,6 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
       "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -3564,14 +3773,12 @@
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
       "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/string-width-cjs/node_modules/strip-ansi": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ansi-regex": "^5.0.1"
@@ -3584,7 +3791,6 @@
       "version": "7.1.2",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.2.tgz",
       "integrity": "sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ansi-regex": "^6.0.1"
@@ -3601,7 +3807,6 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ansi-regex": "^5.0.1"
@@ -3614,7 +3819,6 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
       "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -3637,7 +3841,6 @@
       "version": "3.35.0",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
       "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.2",
@@ -3673,7 +3876,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -3682,12 +3884,22 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/tailwind-merge": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.3.1.tgz",
+      "integrity": "sha512-gBXpgUm/3rp1lMZZrM/w7D8GKqshif0zAymAhbCyIt8KMe+0v9DQ7cdYLR4FHH/cKpdTXb+A/tKKU3eolfsI+g==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "3.4.18",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.18.tgz",
       "integrity": "sha512-6A2rnmW5xZMdw11LYjhcI5846rt9pbLSabY5XPxo+XWdxwZaFEn47Go4NzFiHu9sNNmr/kXivP1vStfvMaK1GQ==",
-      "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
         "arg": "^5.0.2",
@@ -3720,11 +3932,19 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/tailwindcss-animate": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz",
+      "integrity": "sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || insiders"
+      }
+    },
     "node_modules/thenify": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
       "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "any-promise": "^1.0.0"
@@ -3734,7 +3954,6 @@
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
       "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "thenify": ">= 3.1.0 < 4"
@@ -3764,7 +3983,6 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-number": "^7.0.0"
@@ -3787,9 +4005,14 @@
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
       "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
-      "dev": true,
       "license": "Apache-2.0"
     },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
     "node_modules/unicorn-magic": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/unicorn-magic/-/unicorn-magic-0.3.0.tgz",
@@ -3855,7 +4078,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/vite": {
@@ -4076,11 +4298,25 @@
         "vue": "^3.2.0"
       }
     },
+    "node_modules/vue3-datepicker": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/vue3-datepicker/-/vue3-datepicker-0.4.0.tgz",
+      "integrity": "sha512-o0/y4yuZZc0DXYhiAlX8Znrkm/zvkeYuyV9PUt0UAvwxkno2jqMS388jVUa9Ns+a2s2pOAAybyXo5uQ9YAIwVw==",
+      "license": "MIT",
+      "dependencies": {
+        "date-fns": "^2.22.1"
+      },
+      "engines": {
+        "node": ">=10.16.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
       "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "isexe": "^2.0.0"
@@ -4096,7 +4332,6 @@
       "version": "8.1.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
       "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ansi-styles": "^6.1.0",
@@ -4115,7 +4350,6 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
       "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ansi-styles": "^4.0.0",
@@ -4133,7 +4367,6 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
       "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -4143,7 +4376,6 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "color-convert": "^2.0.1"
@@ -4159,14 +4391,12 @@
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
       "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/wrap-ansi-cjs/node_modules/string-width": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
       "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "emoji-regex": "^8.0.0",
@@ -4181,7 +4411,6 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ansi-regex": "^5.0.1"
diff --git a/package.json b/package.json
index 805c446..965f584 100644
--- a/package.json
+++ b/package.json
@@ -12,15 +12,23 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@vueuse/core": "^13.9.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-vue-next": "^0.545.0",
+    "reka-ui": "^2.5.1",
+    "tailwind-merge": "^3.3.1",
+    "tailwindcss-animate": "^1.0.7",
     "vue": "^3.5.22",
-    "vue-router": "^4.2.1"
+    "vue-router": "^4.2.1",
+    "vue3-datepicker": "^0.4.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.1",
-    "vite": "^7.1.7",
-    "vite-plugin-vue-devtools": "^8.0.2",
     "autoprefixer": "^10.4.20",
     "postcss": "^8.4.47",
-    "tailwindcss": "^3.4.14"
+    "tailwindcss": "^3.4.14",
+    "vite": "^7.1.7",
+    "vite-plugin-vue-devtools": "^8.0.2"
   }
 }
diff --git a/src/assets/main.css b/src/assets/main.css
index 5f6f886..5a34d0f 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -21,6 +21,8 @@
   --secondary: 210 40% 96.1%;
   --secondary-foreground: 222.2 47.4% 11.2%;
 
+  --selected: 210 100% 96%;
+
   --muted: 210 40% 96.1%;
   --muted-foreground: 215.4 16.3% 46.9%;
 
@@ -53,6 +55,8 @@
   --secondary: 215 27.9% 16.9%;
   --secondary-foreground: 210 40% 98%;
 
+  --selected: 210 100% 96%;
+
   --muted: 215 27.9% 16.9%;
   --muted-foreground: 217.9 10.6% 64.9%;
 
@@ -68,7 +72,7 @@
 }
 
 /* App container helpers */
-.container { @apply mx-auto max-w-3xl px-4; }
+.container { @apply mx-auto max-w-6xl px-4; }
 .card { @apply rounded-lg border border-border bg-[hsl(var(--card))] text-[hsl(var(--card-foreground))] shadow-sm; }
 .card-header { @apply p-6 pb-3; }
 .card-title { @apply text-xl font-semibold leading-none tracking-tight; }
@@ -112,7 +116,80 @@ a,
   }
 
   #app {
-    /* keep a comfortable inner padding on wide screens */
-    padding: 1.5rem 2rem;
+    /* align header and main containers by removing extra app padding */
+    padding: 0;
+  }
+}
+
+
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --radius: 0.5rem;
+  }
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}
+
+@layer components {
+    .btn-outline.selected {
+        @apply bg-[hsl(var(--selected))] dark:bg-slate-700 border-slate-300;
+    }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
   }
 }
diff --git a/src/components/DateTimePicker.vue b/src/components/DateTimePicker.vue
new file mode 100644
index 0000000..172f69e
--- /dev/null
+++ b/src/components/DateTimePicker.vue
@@ -0,0 +1,211 @@
+<!-- ClockDateTimePicker.vue -->
+<script setup>
+import { ref, watch, computed } from "vue"
+import { CalendarIcon, Clock } from "lucide-vue-next"
+import { Button } from "@/components/ui/button"
+import { Calendar } from "@/components/ui/calendar"
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
+import { cn } from "@/lib/utils"
+
+const props = defineProps({
+  modelValue: { type: Date, default: null },
+  minuteStep: { type: Number, default: 5 },   // minute granularity (1..30)
+  locale: { type: String, default: "en-US" }, // for date formatting
+})
+
+const emit = defineEmits(["update:modelValue"])
+
+/* ---------- state ---------- */
+const date = ref(props.modelValue ? new Date(props.modelValue) : undefined) // Date | undefined
+const hour24 = ref(props.modelValue ? new Date(props.modelValue).getHours() : null) // 0..23 | null
+const minute = ref(props.modelValue ? new Date(props.modelValue).getMinutes() : 0)   // 0..59
+const showMinutes = ref(false)
+
+// store calendar library's internal date value separately to avoid type mismatch with JS Date
+const calendarDay = ref(null) // DateValue (from reka-ui) | null
+
+const dateOpen = ref(false)
+const timeOpen = ref(false)
+
+/* ---------- helpers ---------- */
+const two = (n) => (n < 10 ? "0" + n : String(n))
+
+const normalizeMinute = (m) => {
+  // enforce quarter-hours: 0,15,30,45 using floor
+  const val = Math.floor(Math.max(0, Math.min(59, Number(m) || 0)) / 15) * 15
+  return val
+}
+
+const toJsDate = (v) => {
+  if (!v) return undefined
+  if (v instanceof Date) return new Date(v)
+  // 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
+  return undefined
+}
+
+/* ---------- sync from v-model ---------- */
+watch(
+    () => props.modelValue,
+    (v) => {
+      if (!v) {
+        date.value = undefined
+        hour24.value = null
+        minute.value = 0
+        // do not try to coerce calendarDay when clearing
+        calendarDay.value = null
+        return
+      }
+      const d = new Date(v)
+      date.value = new Date(d) // clone for reactivity
+      hour24.value = d.getHours()
+      minute.value = normalizeMinute(d.getMinutes())
+      // leave calendarDay as-is; Calendar can render without controlled value
+    },
+    { immediate: true }
+)
+
+const df = computed(() => new Intl.DateTimeFormat(props.locale, { dateStyle: "long" }))
+const formattedDate = computed(() => (date.value ? df.value.format(date.value) : "Pick a date"))
+const formattedTime = computed(() => {
+  if (hour24.value == null) return "Pick a time"
+  return `${two(hour24.value)}:${two(minute.value)}`
+})
+
+/* Emit when both date & time are chosen */
+const maybeEmit = () => {
+  if (!date.value || hour24.value == null) return
+  const out = new Date(date.value)
+  out.setHours(hour24.value, minute.value, 0, 0)
+  emit("update:modelValue", out)
+}
+
+/* ---------- handlers ---------- */
+const onDateChange = (d) => {
+  // d is likely a DateValue from the calendar lib; convert to JS Date
+  const js = toJsDate(d)
+  date.value = js
+  // If no time yet, default to 00:00 so the date "registers"
+  if (hour24.value == null) {
+    hour24.value = 0
+    minute.value = 0
+  }
+  maybeEmit()
+  dateOpen.value = false
+}
+
+const selectHour24 = (h) => {
+  hour24.value = h
+  showMinutes.value = true
+  timeOpen.value = true
+  maybeEmit()
+}
+
+const selectMinute = (m) => {
+  minute.value = normalizeMinute(m)
+  showMinutes.value = false
+  maybeEmit()
+  timeOpen.value = false
+}
+
+/* ---------- rings & angles (0/00 at top) ---------- */
+const ringHours = computed(() => Array.from({ length: 24 }, (_, i) => i))
+// enforce quarter-hour steps only
+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 innerRing = 65;
+function transHour(h) {
+  if (h==0) return innerRing;
+  return h <= 12 ? outerRing : innerRing;
+}
+</script>
+
+<template>
+  <div class="flex flex-row items-center gap-3">
+    <!-- Date -->
+    <Popover v-model:open="dateOpen">
+      <PopoverTrigger as-child>
+        <Button
+            type="button"
+            variant="outline"
+            :class="cn('w-[280px] justify-start text-left font-normal', !date && 'text-muted-foreground')"
+        >
+          <CalendarIcon class="mr-2 h-4 w-4" />
+          {{ formattedDate }}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent class="z-50 w-auto p-0">
+        <Calendar
+            v-model="calendarDay"
+            mode="single"
+            :key="date?.toDateString?.() ?? 'empty'"
+            @update:modelValue="onDateChange"
+            initial-focus
+        />
+      </PopoverContent>
+    </Popover>
+
+    <!-- Time -->
+    <Popover v-model:open="timeOpen">
+      <PopoverTrigger as-child>
+        <Button
+            type="button"
+            variant="outline"
+            :class="cn('w-[280px] justify-start text-left font-normal', hour24 === null && 'text-muted-foreground')"
+        >
+          <Clock class="mr-2 h-4 w-4" />
+          {{ formattedTime }}
+        </Button>
+      </PopoverTrigger>
+
+      <PopoverContent class="z-50 w-[300px] flex flex-col items-center p-4">
+        <!-- Hour ring (0..23) with 00 at top -->
+        <div v-if="!showMinutes" class="relative w-[220px] h-[220px] flex items-center justify-center":style="{border: 'solid',borderRadius: '50%'}">
+          <div class="absolute text-lg font-semibold">
+            {{ hour24 ?? 'HH' }}
+          </div>
+          <div
+              v-for="h in ringHours"
+              :key="h"
+              @click="selectHour24(h)"
+              class="absolute flex items-center justify-center w-10 h-10 rounded-full cursor-pointer hover:bg-accent/50"
+              :class="h===hour24 && 'bg-accent text-accent-foreground'"
+              :style="{
+              transform: `rotate(${degHour(h)}deg) translate(${transHour(h)}px) rotate(-${degHour(h)}deg)`
+            }"
+          >
+            {{ h }}
+          </div>
+        </div>
+
+        <!-- Minute ring (00/15/30/45, 00 at top) -->
+        <div v-else class="relative w-[220px] h-[220px] flex items-center justify-center">
+          <div class="absolute text-lg font-semibold">{{ two(minute) }}</div>
+          <div
+              v-for="m in ringMinutes"
+              :key="m"
+              @click="selectMinute(m)"
+              class="absolute flex items-center justify-center w-10 h-10 rounded-full cursor-pointer hover:bg-accent/50"
+              :class="m===minute && 'bg-accent text-accent-foreground'"
+              :style="{
+              transform: `rotate(${degMinute(m)}deg) translate(${innerRing}px) rotate(-${degMinute(m)}deg)`
+            }"
+          >
+            {{ two(m) }}
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  </div>
+</template>
+
+<style scoped>
+ </style>
\ No newline at end of file
diff --git a/src/components/ui/button/Button.vue b/src/components/ui/button/Button.vue
new file mode 100644
index 0000000..a6d6776
--- /dev/null
+++ b/src/components/ui/button/Button.vue
@@ -0,0 +1,23 @@
+<script setup>
+import { Primitive } from "reka-ui";
+import { cn } from "@/lib/utils";
+import { buttonVariants } from ".";
+
+const props = defineProps({
+  variant: { type: null, required: false },
+  size: { type: null, required: false },
+  class: { type: null, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false, default: "button" },
+});
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    :as-child="asChild"
+    :class="cn(buttonVariants({ variant, size }), props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/src/components/ui/button/index.js b/src/components/ui/button/index.js
new file mode 100644
index 0000000..240f244
--- /dev/null
+++ b/src/components/ui/button/index.js
@@ -0,0 +1,36 @@
+import { cva } from "class-variance-authority";
+
+export { default as Button } from "./Button.vue";
+
+export const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        xs: "h-7 rounded px-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
diff --git a/src/components/ui/calendar/Calendar.vue b/src/components/ui/calendar/Calendar.vue
new file mode 100644
index 0000000..f3a7d82
--- /dev/null
+++ b/src/components/ui/calendar/Calendar.vue
@@ -0,0 +1,95 @@
+<script setup>
+import { reactiveOmit } from "@vueuse/core";
+import { CalendarRoot, useForwardPropsEmits } from "reka-ui";
+import { cn } from "@/lib/utils";
+import {
+  CalendarCell,
+  CalendarCellTrigger,
+  CalendarGrid,
+  CalendarGridBody,
+  CalendarGridHead,
+  CalendarGridRow,
+  CalendarHeadCell,
+  CalendarHeader,
+  CalendarHeading,
+  CalendarNextButton,
+  CalendarPrevButton,
+} from ".";
+
+const props = defineProps({
+  defaultValue: { type: null, required: false },
+  defaultPlaceholder: { type: null, required: false },
+  placeholder: { type: null, required: false },
+  pagedNavigation: { type: Boolean, required: false },
+  preventDeselect: { type: Boolean, required: false },
+  weekStartsOn: { type: Number, required: false },
+  weekdayFormat: { type: String, required: false },
+  calendarLabel: { type: String, required: false },
+  fixedWeeks: { type: Boolean, required: false },
+  maxValue: { type: null, required: false },
+  minValue: { type: null, required: false },
+  locale: { type: String, required: false },
+  numberOfMonths: { type: Number, required: false },
+  disabled: { type: Boolean, required: false },
+  readonly: { type: Boolean, required: false },
+  initialFocus: { type: Boolean, required: false },
+  isDateDisabled: { type: Function, required: false },
+  isDateUnavailable: { type: Function, required: false },
+  dir: { type: String, required: false },
+  nextPage: { type: Function, required: false },
+  prevPage: { type: Function, required: false },
+  modelValue: { type: null, required: false },
+  multiple: { type: Boolean, required: false },
+  disableDaysOutsideCurrentView: { type: Boolean, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: null, required: false },
+});
+
+const emits = defineEmits(["update:modelValue", "update:placeholder"]);
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <CalendarRoot
+    v-slot="{ grid, weekDays }"
+    :class="cn('p-3', props.class)"
+    v-bind="forwarded"
+  >
+    <CalendarHeader>
+      <CalendarPrevButton />
+      <CalendarHeading />
+      <CalendarNextButton />
+    </CalendarHeader>
+
+    <div class="flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0">
+      <CalendarGrid v-for="month in grid" :key="month.value.toString()">
+        <CalendarGridHead>
+          <CalendarGridRow>
+            <CalendarHeadCell v-for="day in weekDays" :key="day">
+              {{ day }}
+            </CalendarHeadCell>
+          </CalendarGridRow>
+        </CalendarGridHead>
+        <CalendarGridBody>
+          <CalendarGridRow
+            v-for="(weekDates, index) in month.rows"
+            :key="`weekDate-${index}`"
+            class="mt-2 w-full"
+          >
+            <CalendarCell
+              v-for="weekDate in weekDates"
+              :key="weekDate.toString()"
+              :date="weekDate"
+            >
+              <CalendarCellTrigger :day="weekDate" :month="month.value" />
+            </CalendarCell>
+          </CalendarGridRow>
+        </CalendarGridBody>
+      </CalendarGrid>
+    </div>
+  </CalendarRoot>
+</template>
diff --git a/src/components/ui/calendar/CalendarCell.vue b/src/components/ui/calendar/CalendarCell.vue
new file mode 100644
index 0000000..939a3e6
--- /dev/null
+++ b/src/components/ui/calendar/CalendarCell.vue
@@ -0,0 +1,30 @@
+<script setup>
+import { reactiveOmit } from "@vueuse/core";
+import { CalendarCell, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  date: { type: null, required: true },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: null, required: false },
+});
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <CalendarCell
+    :class="
+      cn(
+        'relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md [&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-view])]:bg-accent/50',
+        props.class,
+      )
+    "
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarCell>
+</template>
diff --git a/src/components/ui/calendar/CalendarCellTrigger.vue b/src/components/ui/calendar/CalendarCellTrigger.vue
new file mode 100644
index 0000000..63b90bd
--- /dev/null
+++ b/src/components/ui/calendar/CalendarCellTrigger.vue
@@ -0,0 +1,42 @@
+<script setup>
+import { reactiveOmit } from "@vueuse/core";
+import { CalendarCellTrigger, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
+import { buttonVariants } from '@/components/ui/button';
+
+const props = defineProps({
+  day: { type: null, required: true },
+  month: { type: null, required: true },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: null, required: false },
+});
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <CalendarCellTrigger
+    :class="
+      cn(
+        buttonVariants({ variant: 'ghost' }),
+        'h-8 w-8 p-0 font-normal',
+        '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',
+        // Selected
+        'data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:opacity-100 data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground',
+        // Disabled
+        'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',
+        // Unavailable
+        'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',
+        // Outside months
+        'data-[outside-view]:text-muted-foreground data-[outside-view]:opacity-50 [&[data-outside-view][data-selected]]:bg-accent/50 [&[data-outside-view][data-selected]]:text-muted-foreground [&[data-outside-view][data-selected]]:opacity-30',
+        props.class,
+      )
+    "
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarCellTrigger>
+</template>
diff --git a/src/components/ui/calendar/CalendarGrid.vue b/src/components/ui/calendar/CalendarGrid.vue
new file mode 100644
index 0000000..7765028
--- /dev/null
+++ b/src/components/ui/calendar/CalendarGrid.vue
@@ -0,0 +1,24 @@
+<script setup>
+import { reactiveOmit } from "@vueuse/core";
+import { CalendarGrid, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: null, required: false },
+});
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <CalendarGrid
+    :class="cn('w-full border-collapse space-y-1', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarGrid>
+</template>
diff --git a/src/components/ui/calendar/CalendarGridBody.vue b/src/components/ui/calendar/CalendarGridBody.vue
new file mode 100644
index 0000000..ee55203
--- /dev/null
+++ b/src/components/ui/calendar/CalendarGridBody.vue
@@ -0,0 +1,14 @@
+<script setup>
+import { CalendarGridBody } from "reka-ui";
+
+const props = defineProps({
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+});
+</script>
+
+<template>
+  <CalendarGridBody v-bind="props">
+    <slot />
+  </CalendarGridBody>
+</template>
diff --git a/src/components/ui/calendar/CalendarGridHead.vue b/src/components/ui/calendar/CalendarGridHead.vue
new file mode 100644
index 0000000..c16093c
--- /dev/null
+++ b/src/components/ui/calendar/CalendarGridHead.vue
@@ -0,0 +1,15 @@
+<script setup>
+import { CalendarGridHead } from "reka-ui";
+
+const props = defineProps({
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: null, required: false },
+});
+</script>
+
+<template>
+  <CalendarGridHead v-bind="props">
+    <slot />
+  </CalendarGridHead>
+</template>
diff --git a/src/components/ui/calendar/CalendarGridRow.vue b/src/components/ui/calendar/CalendarGridRow.vue
new file mode 100644
index 0000000..07af044
--- /dev/null
+++ b/src/components/ui/calendar/CalendarGridRow.vue
@@ -0,0 +1,21 @@
+<script setup>
+import { reactiveOmit } from "@vueuse/core";
+import { CalendarGridRow, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: null, required: false },
+});
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <CalendarGridRow :class="cn('flex', props.class)" v-bind="forwardedProps">
+    <slot />
+  </CalendarGridRow>
+</template>
diff --git a/src/components/ui/calendar/CalendarHeadCell.vue b/src/components/ui/calendar/CalendarHeadCell.vue
new file mode 100644
index 0000000..fade3e0
--- /dev/null
+++ b/src/components/ui/calendar/CalendarHeadCell.vue
@@ -0,0 +1,29 @@
+<script setup>
+import { reactiveOmit } from "@vueuse/core";
+import { CalendarHeadCell, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: null, required: false },
+});
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <CalendarHeadCell
+    :class="
+      cn(
+        'w-8 rounded-md text-[0.8rem] font-normal text-muted-foreground',
+        props.class,
+      )
+    "
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarHeadCell>
+</template>
diff --git a/src/components/ui/calendar/CalendarHeader.vue b/src/components/ui/calendar/CalendarHeader.vue
new file mode 100644
index 0000000..3d7b286
--- /dev/null
+++ b/src/components/ui/calendar/CalendarHeader.vue
@@ -0,0 +1,26 @@
+<script setup>
+import { reactiveOmit } from "@vueuse/core";
+import { CalendarHeader, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: null, required: false },
+});
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <CalendarHeader
+    :class="
+      cn('relative flex w-full items-center justify-between pt-1', props.class)
+    "
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarHeader>
+</template>
diff --git a/src/components/ui/calendar/CalendarHeading.vue b/src/components/ui/calendar/CalendarHeading.vue
new file mode 100644
index 0000000..581a1c6
--- /dev/null
+++ b/src/components/ui/calendar/CalendarHeading.vue
@@ -0,0 +1,29 @@
+<script setup>
+import { reactiveOmit } from "@vueuse/core";
+import { CalendarHeading, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: null, required: false },
+});
+
+defineSlots();
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <CalendarHeading
+    v-slot="{ headingValue }"
+    :class="cn('text-sm font-medium', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot :heading-value>
+      {{ headingValue }}
+    </slot>
+  </CalendarHeading>
+</template>
diff --git a/src/components/ui/calendar/CalendarNextButton.vue b/src/components/ui/calendar/CalendarNextButton.vue
new file mode 100644
index 0000000..e56d5d1
--- /dev/null
+++ b/src/components/ui/calendar/CalendarNextButton.vue
@@ -0,0 +1,35 @@
+<script setup>
+import { reactiveOmit } from "@vueuse/core";
+import { ChevronRight } from "lucide-vue-next";
+import { CalendarNext, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
+import { buttonVariants } from '@/components/ui/button';
+
+const props = defineProps({
+  nextPage: { type: Function, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: null, required: false },
+});
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <CalendarNext
+    :class="
+      cn(
+        buttonVariants({ variant: 'outline' }),
+        'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+        props.class,
+      )
+    "
+    v-bind="forwardedProps"
+  >
+    <slot>
+      <ChevronRight class="h-4 w-4" />
+    </slot>
+  </CalendarNext>
+</template>
diff --git a/src/components/ui/calendar/CalendarPrevButton.vue b/src/components/ui/calendar/CalendarPrevButton.vue
new file mode 100644
index 0000000..bee70a9
--- /dev/null
+++ b/src/components/ui/calendar/CalendarPrevButton.vue
@@ -0,0 +1,35 @@
+<script setup>
+import { reactiveOmit } from "@vueuse/core";
+import { ChevronLeft } from "lucide-vue-next";
+import { CalendarPrev, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
+import { buttonVariants } from '@/components/ui/button';
+
+const props = defineProps({
+  prevPage: { type: Function, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: null, required: false },
+});
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <CalendarPrev
+    :class="
+      cn(
+        buttonVariants({ variant: 'outline' }),
+        'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+        props.class,
+      )
+    "
+    v-bind="forwardedProps"
+  >
+    <slot>
+      <ChevronLeft class="h-4 w-4" />
+    </slot>
+  </CalendarPrev>
+</template>
diff --git a/src/components/ui/calendar/index.js b/src/components/ui/calendar/index.js
new file mode 100644
index 0000000..f5e9b7e
--- /dev/null
+++ b/src/components/ui/calendar/index.js
@@ -0,0 +1,12 @@
+export { default as Calendar } from "./Calendar.vue";
+export { default as CalendarCell } from "./CalendarCell.vue";
+export { default as CalendarCellTrigger } from "./CalendarCellTrigger.vue";
+export { default as CalendarGrid } from "./CalendarGrid.vue";
+export { default as CalendarGridBody } from "./CalendarGridBody.vue";
+export { default as CalendarGridHead } from "./CalendarGridHead.vue";
+export { default as CalendarGridRow } from "./CalendarGridRow.vue";
+export { default as CalendarHeadCell } from "./CalendarHeadCell.vue";
+export { default as CalendarHeader } from "./CalendarHeader.vue";
+export { default as CalendarHeading } from "./CalendarHeading.vue";
+export { default as CalendarNextButton } from "./CalendarNextButton.vue";
+export { default as CalendarPrevButton } from "./CalendarPrevButton.vue";
diff --git a/src/components/ui/popover/Popover.vue b/src/components/ui/popover/Popover.vue
new file mode 100644
index 0000000..a5210da
--- /dev/null
+++ b/src/components/ui/popover/Popover.vue
@@ -0,0 +1,18 @@
+<script setup>
+import { PopoverRoot, useForwardPropsEmits } from "reka-ui";
+
+const props = defineProps({
+  defaultOpen: { type: Boolean, required: false },
+  open: { type: Boolean, required: false },
+  modal: { type: Boolean, required: false },
+});
+const emits = defineEmits(["update:open"]);
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <PopoverRoot v-bind="forwarded">
+    <slot />
+  </PopoverRoot>
+</template>
diff --git a/src/components/ui/popover/PopoverContent.vue b/src/components/ui/popover/PopoverContent.vue
new file mode 100644
index 0000000..789014f
--- /dev/null
+++ b/src/components/ui/popover/PopoverContent.vue
@@ -0,0 +1,62 @@
+<script setup>
+import { reactiveOmit } from "@vueuse/core";
+import { PopoverContent, PopoverPortal, useForwardPropsEmits } from "reka-ui";
+import { cn } from "@/lib/utils";
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = defineProps({
+  forceMount: { type: Boolean, required: false },
+  side: { type: null, required: false },
+  sideOffset: { type: Number, required: false, default: 4 },
+  sideFlip: { type: Boolean, required: false },
+  align: { type: null, required: false, default: "center" },
+  alignOffset: { type: Number, required: false },
+  alignFlip: { type: Boolean, required: false },
+  avoidCollisions: { type: Boolean, required: false },
+  collisionBoundary: { type: null, required: false },
+  collisionPadding: { type: [Number, Object], required: false },
+  arrowPadding: { type: Number, required: false },
+  sticky: { type: String, required: false },
+  hideWhenDetached: { type: Boolean, required: false },
+  positionStrategy: { type: String, required: false },
+  updatePositionStrategy: { type: String, required: false },
+  disableUpdateOnLayoutShift: { type: Boolean, required: false },
+  prioritizePosition: { type: Boolean, required: false },
+  reference: { type: null, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  disableOutsidePointerEvents: { type: Boolean, required: false },
+  class: { type: null, required: false },
+});
+const emits = defineEmits([
+  "escapeKeyDown",
+  "pointerDownOutside",
+  "focusOutside",
+  "interactOutside",
+  "openAutoFocus",
+  "closeAutoFocus",
+]);
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <PopoverPortal>
+    <PopoverContent
+      v-bind="{ ...forwarded, ...$attrs }"
+      :class="
+        cn(
+          'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </PopoverContent>
+  </PopoverPortal>
+</template>
diff --git a/src/components/ui/popover/PopoverTrigger.vue b/src/components/ui/popover/PopoverTrigger.vue
new file mode 100644
index 0000000..ed1cdee
--- /dev/null
+++ b/src/components/ui/popover/PopoverTrigger.vue
@@ -0,0 +1,14 @@
+<script setup>
+import { PopoverTrigger } from "reka-ui";
+
+const props = defineProps({
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+});
+</script>
+
+<template>
+  <PopoverTrigger v-bind="props">
+    <slot />
+  </PopoverTrigger>
+</template>
diff --git a/src/components/ui/popover/index.js b/src/components/ui/popover/index.js
new file mode 100644
index 0000000..ce5130a
--- /dev/null
+++ b/src/components/ui/popover/index.js
@@ -0,0 +1,4 @@
+export { default as Popover } from "./Popover.vue";
+export { default as PopoverContent } from "./PopoverContent.vue";
+export { default as PopoverTrigger } from "./PopoverTrigger.vue";
+export { PopoverAnchor } from "reka-ui";
diff --git a/src/lib/utils.js b/src/lib/utils.js
new file mode 100644
index 0000000..5924575
--- /dev/null
+++ b/src/lib/utils.js
@@ -0,0 +1,13 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+export function valueUpdater(updaterOrValue, ref) {
+  ref.value =
+    typeof updaterOrValue === "function"
+      ? updaterOrValue(ref.value)
+      : updaterOrValue;
+}
diff --git a/src/pages/AdminPage.vue b/src/pages/AdminPage.vue
index 0ca32d9..49b87f4 100644
--- a/src/pages/AdminPage.vue
+++ b/src/pages/AdminPage.vue
@@ -1,123 +1,472 @@
 <template>
   <section class="grid gap-6">
+    <!-- Header -->
     <div class="card">
-      <div class="card-header flex items-center justify-between">
-        <div>
-          <h1 class="card-title">Administration</h1>
-          <p class="text-sm text-slate-500">Gérer les réservations et les cargos.</p>
+      <div class="card-header">
+        <h1 class="card-title">Administration des réservations</h1>
+        <p class="text-sm text-slate-500">Validez, refusez, modifiez les réservations et visualisez les plannings par cargobike.</p>
+      </div>
+      <div class="card-content">
+        <div class="flex flex-wrap items-center gap-3">
+          <button class="btn h-9 px-3" @click="refresh" :disabled="loading">{{ loading ? 'Rafraîchissement…' : 'Rafraîchir' }}</button>
+          <span class="text-xs text-slate-500" v-if="lastLoaded">Dernier chargement: {{ formatDateTime(lastLoaded) }}</span>
+          <span class="text-xs text-red-600" v-if="error">{{ error }}</span>
         </div>
-        <div class="flex gap-2">
-          <button class="btn btn-secondary" @click="load">Rafraîchir</button>
+      </div>
+    </div>
+
+    <!-- List of bookings -->
+    <div class="card">
+      <div class="card-header">
+        <div class="flex items-center justify-between gap-4">
+          <h2 class="card-title">Réservations</h2>
+          <div class="flex items-center gap-2">
+            <label class="text-xs text-slate-500">Filtrer</label>
+            <select v-model="filter" class="input h-9 w-[160px]">
+              <option value="all">Toutes</option>
+              <option value="pending">En attente</option>
+              <option value="accepted">Acceptées</option>
+              <option value="ongoing">En cours</option>
+              <option value="archived">Archivées</option>
+              <option value="refused">Refusées</option>
+            </select>
+          </div>
         </div>
       </div>
       <div class="card-content">
-        <div v-if="error" class="text-sm text-red-700 mb-3">{{ error }}</div>
-        <div class="overflow-x-auto">
-          <table class="w-full text-sm">
-            <thead class="text-left text-slate-500">
-              <tr>
-                <th class="py-2 pr-4">#</th>
-                <th class="py-2 pr-4">Association</th>
-                <th class="py-2 pr-4">Taille(s)</th>
-                <th class="py-2 pr-4">Période</th>
-                <th class="py-2 pr-4">Emails</th>
-                <th class="py-2 pr-4">Créé</th>
-                <th class="py-2 pr-0 text-right">Actions</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="b in bookings" :key="b.id" class="border-t border-border">
-                <td class="py-2 pr-4">{{ b.id }}</td>
-                <td class="py-2 pr-4">{{ b.name }}</td>
-                <td class="py-2 pr-4">
-                  <template v-if="sizes(b).length">
-                    <span v-for="(sz, i) in sizes(b)" :key="i" class="inline-flex items-center rounded border border-border px-2 py-0.5 mr-1 mb-1">
-                      {{ sz }}
-                    </span>
-                  </template>
-                  <template v-else>
-                    <span class="text-slate-500">—</span>
-                  </template>
-                </td>
-                <td class="py-2 pr-4">
-                  <span>{{ fmtDate(b.start_date) }}<span v-if="b.start_time"> {{ b.start_time.slice(0,5) }}</span></span>
-                  <span class="mx-1">→</span>
-                  <span>{{ fmtDate(b.end_date) }}<span v-if="b.end_time"> {{ b.end_time.slice(0,5) }}</span></span>
-                </td>
-                <td class="py-2 pr-4">
-                  <span v-for="(em, i) in splitEmails(b.email)" :key="i" class="inline-flex items-center rounded border border-border px-2 py-0.5 mr-1 mb-1">
-                    {{ em }}
-                  </span>
-                </td>
-                <td class="py-2 pr-4">{{ fmtDateTime(b.created_at) }}</td>
-                <td class="py-2 pr-0 text-right">
-                  <button class="btn btn-outline h-8 px-3" @click="remove(b.id)" :disabled="busyIds.has(b.id)">Supprimer</button>
-                </td>
-              </tr>
-              <tr v-if="!loading && bookings.length === 0">
-                <td colspan="7" class="py-4 text-center text-slate-500">Aucune réservation pour le moment.</td>
-              </tr>
-            </tbody>
-          </table>
+        <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 class="flex items-start justify-between gap-3">
+              <div class="grid gap-1">
+                <div class="flex items-center gap-2">
+                  <span class="font-medium">#{{ b.id }}</span>
+                  <StatusBadge :booking="b" :now="now" />
+                </div>
+                <div class="text-sm">
+                  <span class="font-medium">Association:</span>
+                  <span class="ml-1">{{ b.name }}</span>
+                </div>
+                <div class="text-xs text-slate-500">Email(s): {{ b.email }}</div>
+                <div class="text-xs text-slate-600">
+                  <span class="font-medium">Période:</span>
+                  <span class="ml-1">{{ formatRange(b) }}</span>
+                </div>
+                <div class="text-xs text-slate-600">
+                  <span class="font-medium">Cargobike(s):</span>
+                  <span class="ml-1">{{ formatBikes(b) }}</span>
+                </div>
+              </div>
+
+              <div class="grid gap-2 justify-items-end min-w-[220px]">
+                <div class="flex flex-wrap gap-2 justify-end">
+                  <button class="btn btn-secondary h-8 px-3" @click="startEdit(b)">Modifier</button>
+                  <button class="btn btn-outline h-8 px-3" :disabled="b.status==='accepted'" @click="accept(b)" v-if="b.status!=='accepted'">Accepter</button>
+                  <button class="btn btn-outline h-8 px-3" :disabled="b.status==='accepted'" @click="refuse(b)" v-if="b.status!=='accepted'">Refuser</button>
+                  <button class="btn btn-outline h-8 px-3" v-if="b.status==='refused'" @click="restore(b)">Restaurer</button>
+                  <button class="btn btn-outline h-8 px-3" @click="remove(b)">Supprimer</button>
+                </div>
+                <div class="text-xs text-slate-500">Créée le {{ formatDateTime(new Date(b.created_at)) }}</div>
+              </div>
+            </div>
+
+            <!-- Inline edit row -->
+            <div v-if="editingId === b.id" class="rounded-md bg-slate-50 p-3 border border-slate-200">
+              <div class="grid sm:grid-cols-[1fr_auto] gap-3 items-end">
+                <div class="grid gap-2">
+                  <label class="label">Attribuer un cargobike</label>
+                  <select v-model="editForm.bike_type" class="input h-9">
+                    <option :value="null">— Non défini —</option>
+                    <option v-for="t in bikes" :key="t" :value="t">{{ t }}</option>
+                  </select>
+                  <p class="helper text-xs text-slate-500">Astuce: pour un choix multiple, utilisez la page de réservation; ici on affecte un seul vélo.</p>
+                </div>
+                <div class="flex gap-2">
+                  <button class="btn h-9 px-3" @click="saveEdit(b)">Enregistrer</button>
+                  <button class="btn btn-secondary h-9 px-3" @click="cancelEdit">Annuler</button>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
+
+    <!-- Calendar per cargobike -->
+    <div class="card">
+      <div class="card-header">
+        <div class="flex flex-wrap items-center gap-3 justify-between">
+          <h2 class="card-title">Calendrier par cargobike</h2>
+          <div class="flex flex-wrap items-center gap-2">
+            <label class="text-xs text-slate-500">Cargobike</label>
+            <select v-model="selectedBike" class="input h-9 w-[160px]">
+              <option value="all">Tous</option>
+              <option v-for="t in bikes" :key="t" :value="t">{{ t }}</option>
+            </select>
+          </div>
+        </div>
+      </div>
+      <div class="card-content grid gap-3">
+        <div class="flex flex-wrap items-center gap-2">
+          <button class="btn btn-outline h-8 px-3" @click="prevWeek">Semaine -</button>
+          <button class="btn btn-outline h-8 px-3" @click="nextWeek">Semaine +</button>
+          <button class="btn btn-secondary h-8 px-3" @click="goToday">Aujourd’hui</button>
+          <div class="text-sm text-slate-600 ml-2">Semaine du {{ formatDate(weekStart) }} au {{ formatDate(weekEnd) }}</div>
+        </div>
+
+        <!-- Week grid -->
+        <div class="overflow-auto border border-slate-200 rounded-md">
+          <div class="min-w-[900px]">
+            <!-- Header row: days -->
+            <div class="grid" :style="gridTemplateDays">
+              <div class="sticky left-0 bg-white z-10 border-b border-slate-200 p-2 text-xs text-slate-500">Heure</div>
+              <div v-for="(d, idx) in weekDays" :key="idx" class="border-b border-l border-slate-200 p-2 text-xs font-medium text-slate-700">
+                {{ weekdayShort(d) }} {{ d.getDate() }}/{{ (d.getMonth()+1).toString().padStart(2,'0') }}
+              </div>
+            </div>
+
+            <!-- Body: hours + day columns -->
+            <div class="grid" :style="gridTemplateDays">
+              <!-- Hours rail -->
+              <div class="sticky left-0 bg-white z-10 border-r border-slate-200">
+                <div v-for="h in hours" :key="h" class="h-12 border-b border-slate-100 px-2 text-[11px] text-slate-500 flex items-start pt-1">
+                  {{ h.toString().padStart(2,'0') }}:00
+                </div>
+              </div>
+
+              <!-- Day columns -->
+              <div v-for="(d, dayIdx) in weekDays" :key="dayIdx" class="relative border-l border-slate-200" :data-date="d.toISOString()">
+                <!-- 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"
+                     :class="ev.status === 'pending' ? 'bg-amber-500' : 'bg-blue-600'"
+                     :style="eventStyle(ev)">
+                  <div class="font-medium truncate">{{ ev.name }}</div>
+                  <div class="opacity-90 truncate">{{ ev.timeLabel }}</div>
+                </div>
+              </div>
+            </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>
+    </div>
   </section>
 </template>
 
 <script setup>
-import { onMounted, ref } from 'vue'
+import { ref, reactive, computed, onMounted } from 'vue'
 import { api } from '@/services/api'
 
 const bookings = ref([])
+const bikes = ref([])
 const loading = ref(false)
 const error = ref('')
-const busyIds = ref(new Set())
+const lastLoaded = ref(null)
+const now = ref(new Date())
 
-function fmtDate(d) {
-  if (!d) return ''
-  const s = String(d).slice(0, 10) // YYYY-MM-DD
-  const [y, m, dd] = s.split('-')
-  return `${dd}/${m}/${y}`
-}
-function fmtDateTime(dt) {
-  if (!dt) return ''
-  const s = String(dt).replace('T', ' ').slice(0, 16) // YYYY-MM-DD HH:MM
-  const [date, hm] = s.split(' ')
-  return `${fmtDate(date)} ${hm}`
-}
-function splitEmails(s) { return s ? String(s).split(',').map(x => x.trim()).filter(Boolean) : [] }
-function sizes(b) {
-  const multi = b.bike_types ? String(b.bike_types).split(',').map(x => x.trim()).filter(Boolean) : []
-  if (multi.length) return multi
-  return b.bike_type != null ? [String(b.bike_type)] : []
+// Filter for the list
+const filter = ref('all')
+
+// Editing state
+const editingId = ref(null)
+const editForm = reactive({ bike_type: null })
+
+// Calendar state
+const selectedBike = ref('all')
+const calendarAnchor = ref(new Date())
+
+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)
+})
+
+async function loadBikes() {
+  try {
+    bikes.value = await api.getBikes()
+  } catch (e) {
+    error.value = `Erreur chargement vélos: ${e?.message || e}`
+  }
 }
 
-async function load() {
+async function loadBookings() {
   loading.value = true
   error.value = ''
   try {
     bookings.value = await api.listBookings()
+    lastLoaded.value = new Date()
   } catch (e) {
-    error.value = 'Impossible de charger les réservations.'
+    error.value = `Impossible de charger les réservations. ${e?.message || ''}`
   } finally {
     loading.value = false
   }
 }
 
-async function remove(id) {
-  if (!confirm('Supprimer cette réservation ?')) return
-  busyIds.value.add(id)
+function refresh() { return loadBookings() }
+
+function getSingleBikeType(b) {
+  const val = b?.bike_type
+  return typeof val === 'number' && Number.isFinite(val) ? val : null
+}
+
+function getMultiBikeTypes(b) {
+  if (typeof b?.bike_types === 'string' && b.bike_types.trim()) {
+    return b.bike_types.split(',').map(s => Number(s.trim())).filter(n => Number.isFinite(n))
+  }
+  return []
+}
+
+function includesBike(b, bike) {
+  if (bike === 'all') return true
+  const single = getSingleBikeType(b)
+  const multi = getMultiBikeTypes(b)
+  if (single !== null) return single === bike
+  if (multi.length) return multi.includes(bike)
+  return false
+}
+
+function safeHHmm(timeStr) {
+  if (!timeStr || typeof timeStr !== 'string') return ''
+  const [h = '00', m = '00'] = timeStr.split(':')
+  return `${String(h).padStart(2,'0')}:${String(m).padStart(2,'0')}`
+}
+
+function formatRange(b) {
+  // Use raw times to avoid TZ issues; still compute if same day
+  const s = parseDateTime(b.start_date, b.start_time)
+  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}`
+  return `${formatDate(s)} ${st} → ${formatDate(e)} ${et}`
+}
+
+function formatBikes(b) {
+  const parts = []
+  const single = getSingleBikeType(b)
+  if (single !== null) parts.push(String(single))
+  const multi = getMultiBikeTypes(b).map(n => String(n))
+  parts.push(...multi)
+  return parts.length ? parts.join(', ') : '—'
+}
+
+function parseDateTime(dateStr, timeStr, end = false) {
+  // dateStr = 'YYYY-MM-DD', timeStr = 'HH:MM' or null
+  const [y, m, d] = (dateStr || '').split('-').map(Number)
+  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
+  }
+  return new Date(y, (m || 1) - 1, d || 1, h, min, 0, 0)
+}
+
+function formatDate(d) {
+  const dd = String(d.getDate()).padStart(2, '0')
+  const mm = String(d.getMonth() + 1).padStart(2, '0')
+  const yyyy = d.getFullYear()
+  return `${dd}/${mm}/${yyyy}`
+}
+function formatTime(d) {
+  const h = String(d.getHours()).padStart(2, '0')
+  const m = String(d.getMinutes()).padStart(2, '0')
+  return `${h}:${m}`
+}
+function formatDateTime(d) { return `${formatDate(d)} ${formatTime(d)}` }
+
+function startEdit(b) {
+  editingId.value = b.id
+  const bt = getSingleBikeType(b)
+  editForm.bike_type = bt !== null ? bt : null
+}
+function cancelEdit() { editingId.value = null }
+async function saveEdit(b) {
   try {
-    await api.deleteBooking(id)
-    bookings.value = bookings.value.filter(b => b.id !== id)
+    const payload = { bike_type: editForm.bike_type, bike_types: null }
+    await api.updateBooking(b.id, payload)
+    editingId.value = null
+    await loadBookings()
   } catch (e) {
-    alert('Échec de la suppression')
-  } finally {
-    busyIds.value.delete(id)
-    busyIds.value = new Set(busyIds.value)
+    alert('Échec de la mise à jour.')
   }
 }
 
-onMounted(load)
+// UI status helper for filtering
+function uiStatus(b) {
+  if (b.status === 'refused') return 'refused'
+  const s = parseDateTime(b.start_date, b.start_time)
+  const e = parseDateTime(b.end_date, b.end_time, true)
+  const n = now.value
+  if (b.status === 'accepted') {
+    if (n < s) return 'accepted'
+    if (n >= s && n <= e) return 'ongoing'
+    if (n > e) return 'archived'
+  }
+  return 'pending'
+}
+
+// The filtered list used by the template
+const filtered = computed(() => {
+  if (filter.value === 'all') return bookings.value
+  if (filter.value === 'archived') return bookings.value.filter(b => uiStatus(b) === 'archived' || b.status === 'refused')
+  if (filter.value === 'refused') return bookings.value.filter(b => b.status === 'refused')
+  return bookings.value.filter(b => uiStatus(b) === filter.value)
+})
+
+// Calendar computed
+const hours = Array.from({ length: 17 }, (_, i) => i + 6) // 06:00 -> 22:00
+const weekStart = computed(() => {
+  const d = new Date(calendarAnchor.value)
+  const day = d.getDay() || 7 // 1..7, Monday=1
+  const start = new Date(d)
+  start.setDate(d.getDate() - (day - 1))
+  start.setHours(0,0,0,0)
+  return start
+})
+const weekDays = computed(() => Array.from({ length: 7 }, (_, i) => new Date(weekStart.value.getFullYear(), weekStart.value.getMonth(), weekStart.value.getDate() + i)))
+const weekEnd = computed(() => {
+  const end = new Date(weekStart.value)
+  end.setDate(end.getDate() + 6)
+  return end
+})
+function weekdayShort(d) {
+  return ['Lun','Mar','Mer','Jeu','Ven','Sam','Dim'][((d.getDay()||7)-1)]
+}
+
+function prevWeek() { const d = new Date(calendarAnchor.value); d.setDate(d.getDate() - 7); calendarAnchor.value = d }
+function nextWeek() { const d = new Date(calendarAnchor.value); d.setDate(d.getDate() + 7); calendarAnchor.value = d }
+function goToday() { calendarAnchor.value = new Date() }
+
+const gridTemplateDays = computed(() => ({ gridTemplateColumns: `80px repeat(7, minmax(0, 1fr))` }))
+
+const dayEvents = computed(() => {
+  const map = Array.from({ length: 7 }, () => [])
+  if (!selectedBike.value) return map
+
+  const startOfWeek = new Date(weekStart.value)
+  const endOfWeek = new Date(weekStart.value)
+  endOfWeek.setDate(endOfWeek.getDate() + 7)
+
+  const relevant = bookings.value.filter(b => b.status !== 'refused' && includesBike(b, selectedBike.value))
+
+  for (const b of relevant) {
+    const s = parseDateTime(b.start_date, b.start_time)
+    const e = parseDateTime(b.end_date, b.end_time, true)
+    // Skip if no overlap with the week
+    if (e <= startOfWeek || s >= endOfWeek) continue
+
+    for (let i = 0; i < 7; i++) {
+      const day = new Date(weekStart.value)
+      day.setDate(day.getDate() + i)
+      const dayStart = new Date(day)
+      dayStart.setHours(0,0,0,0)
+      const dayEnd = new Date(day)
+      dayEnd.setHours(23,59,59,999)
+
+      const segStart = new Date(Math.max(s.getTime(), dayStart.getTime()))
+      const segEnd = new Date(Math.min(e.getTime(), dayEnd.getTime()))
+      if (segEnd <= segStart) continue
+
+      const startMin = segStart.getHours() * 60 + segStart.getMinutes()
+      const endMin = segEnd.getHours() * 60 + segEnd.getMinutes()
+
+      // Restrict to visible hour range
+      const visStart = 6 * 60
+      const visEnd = 22 * 60
+      const topMin = Math.max(startMin, visStart)
+      const botMin = Math.min(endMin, visEnd)
+      if (botMin <= visStart || topMin >= visEnd) continue
+
+      const ev = {
+        dayIdx: i,
+        topMin,
+        bottomMin: botMin,
+        status: b.status,
+        name: b.name,
+        timeLabel: `${String(segStart.getHours()).padStart(2,'0')}:${String(segStart.getMinutes()).padStart(2,'0')} → ${String(segEnd.getHours()).padStart(2,'0')}:${String(segEnd.getMinutes()).padStart(2,'0')}`
+      }
+      map[i].push(ev)
+    }
+  }
+
+  // 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
+    for (const ev of events) {
+      let placed = false
+      for (let c = 0; c < cols.length; c++) {
+        if (ev.topMin >= cols[c]) { ev.col = c; cols[c] = ev.bottomMin; placed = true; break }
+      }
+      if (!placed) { ev.col = cols.length; cols.push(ev.bottomMin) }
+    }
+    const count = Math.max(1, cols.length)
+    for (const ev of events) ev.colCount = count
+  }
+
+  return map
+})
+
+function eventStyle(ev) {
+  const pxPerMin = 12 / 15 // 48px per hour → 0.8px per minute; Wait: 12*4=48; yes 0.8
+  const top = (ev.topMin - 6*60) * pxPerMin
+  const height = Math.max(18, (ev.bottomMin - ev.topMin) * pxPerMin)
+  const widthPct = 100 / ev.colCount
+  const leftPct = ev.col * widthPct
+  return {
+    top: top + 'px',
+    height: height + 'px',
+    left: leftPct + '%',
+    width: `calc(${widthPct}% - 4px)`,
+    marginLeft: '2px',
+    marginRight: '2px',
+  }
+}
 </script>
+
+<!-- Status badge as a small sub-component to fix wrapping (whitespace-nowrap) -->
+<script>
+export default {
+  name: 'AdminPage',
+  components: {
+    StatusBadge: {
+      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 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 }
+          return new Date(y, (m||1)-1, d||1, h, min, 0, 0)
+        },
+      },
+      computed: {
+        ui() {
+          const b = this.booking
+          if (b.status === 'refused') return { key: 'archived', label: 'Archivé', cls: 'bg-slate-200 text-slate-700' }
+          const s = this.parse(b.start_date, b.start_time)
+          const e = this.parse(b.end_date, b.end_time, true)
+          const n = this.now
+          if (b.status === 'accepted') {
+            if (n < s) return { key: 'accepted', label: 'Accepté', cls: 'bg-emerald-100 text-emerald-700' }
+            if (n >= s && n <= e) return { key: 'ongoing', label: 'En cours', cls: 'bg-blue-100 text-blue-700' }
+            if (n > e) return { key: 'archived', label: 'Archivé', cls: 'bg-slate-200 text-slate-700' }
+          }
+          return { key: 'pending', label: 'En attente', cls: 'bg-amber-100 text-amber-800' }
+        }
+      },
+      template: `<span class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium whitespace-nowrap" :class="ui.cls">{{ ui.label }}</span>`
+    }
+  }
+}
+</script>
+
+<style scoped>
+/***** simple card/inputs if not present *****/
+/* This page reuses utility classes from BookingPage (btn, input, card). */
+</style>
diff --git a/src/pages/BookingPage.vue b/src/pages/BookingPage.vue
index 32cd11b..9702ecd 100644
--- a/src/pages/BookingPage.vue
+++ b/src/pages/BookingPage.vue
@@ -20,11 +20,15 @@
             <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 items-start">
               <div class="grid gap-2 self-start">
                 <div class="text-xs text-slate-500">Grands cargos</div>
-                <button v-for="b in bigBikes" :key="b" type="button"
-                        class="btn-outline h-10 rounded-md w-full text-left px-4"
-                        :class="buttonClass(b)"
-                        :aria-pressed="isSelected(b)"
-                        @click="toggleBike(b)">
+                <button
+                    v-for="b in bigBikes"
+                    :key="b"
+                    type="button"
+                    class="btn-outline h-10 rounded-md w-full text-left px-4"
+                    :class="[buttonClass(b), { selected: isSelected(b) }]"
+                    :aria-pressed="isSelected(b)"
+                    @click="toggleBike(b)"
+                >
                   {{ b }}
                 </button>
               </div>
@@ -32,7 +36,7 @@
                 <div class="text-xs text-slate-500">Petits cargos</div>
                 <button v-for="b in smallBikes" :key="b" type="button"
                         class="btn-outline h-10 rounded-md w-full text-left px-4"
-                        :class="buttonClass(b)"
+                        :class="[buttonClass(b), { selected: isSelected(b) }]"
                         :aria-pressed="isSelected(b)"
                         @click="toggleBike(b)">
                   {{ b }}
@@ -43,77 +47,18 @@
             <p v-if="errors.bikeTypes" class="helper text-red-600">{{ errors.bikeTypes }}</p>
           </div>
 
-          <!-- Period (separate date + 24h time selects) -->
-          <div class="grid gap-4">
-            <div class="grid gap-3 md:grid-cols-2">
-              <div class="grid gap-2">
-                <label class="label">Date de début (jj/mm/aaaa)</label>
-                <div class="flex gap-2">
-                  <select v-model="form.startDay" class="select" aria-label="Jour de début">
-                    <option value="" disabled>JJ</option>
-                    <option v-for="d in startDays" :key="`sd-${d}`" :value="d">{{ d }}</option>
-                  </select>
-                  <select v-model="form.startMonth" class="select" aria-label="Mois de début">
-                    <option value="" disabled>MM</option>
-                    <option v-for="m in months" :key="`sm-${m}`" :value="m">{{ m }}</option>
-                  </select>
-                  <select v-model="form.startYear" class="select" aria-label="Année de début">
-                    <option value="" disabled>AAAA</option>
-                    <option v-for="y in years" :key="`sy-${y}`" :value="String(y)">{{ y }}</option>
-                  </select>
-                </div>
-                <p v-if="errors.startDate" class="helper text-red-600">{{ errors.startDate }}</p>
-              </div>
-              <div class="grid gap-2">
-                <label class="label">Heure de début</label>
-                <div class="flex gap-2">
-                  <select v-model="form.startHour" class="select" aria-label="Heure de début (heures)">
-                    <option value="" disabled>HH</option>
-                    <option v-for="h in hours" :key="h" :value="h">{{ h }}</option>
-                  </select>
-                  <span class="self-center">:</span>
-                  <select v-model="form.startMinute" class="select" aria-label="Heure de début (minutes)">
-                    <option value="" disabled>MM</option>
-                    <option v-for="m in minutes" :key="m" :value="m">{{ m }}</option>
-                  </select>
-                </div>
-              </div>
-            </div>
-            <div class="grid gap-3 md:grid-cols-2">
-              <div class="grid gap-2">
-                <label class="label">Date de fin (jj/mm/aaaa)</label>
-                <div class="flex gap-2">
-                  <select v-model="form.endDay" class="select" aria-label="Jour de fin">
-                    <option value="" disabled>JJ</option>
-                    <option v-for="d in endDays" :key="`ed-${d}`" :value="d">{{ d }}</option>
-                  </select>
-                  <select v-model="form.endMonth" class="select" aria-label="Mois de fin">
-                    <option value="" disabled>MM</option>
-                    <option v-for="m in months" :key="`em-${m}`" :value="m">{{ m }}</option>
-                  </select>
-                  <select v-model="form.endYear" class="select" aria-label="Année de fin">
-                    <option value="" disabled>AAAA</option>
-                    <option v-for="y in years" :key="`ey-${y}`" :value="String(y)">{{ y }}</option>
-                  </select>
-                </div>
-                <p v-if="errors.endDate" class="helper text-red-600">{{ errors.endDate }}</p>
-              </div>
-              <div class="grid gap-2">
-                <label class="label">Heure de fin</label>
-                <div class="flex gap-2">
-                  <select v-model="form.endHour" class="select" aria-label="Heure de fin (heures)">
-                    <option value="" disabled>HH</option>
-                    <option v-for="h in hours" :key="`eh-${h}`" :value="h">{{ h }}</option>
-                  </select>
-                  <span class="self-center">:</span>
-                  <select v-model="form.endMinute" class="select" aria-label="Heure de fin (minutes)">
-                    <option value="" disabled>MM</option>
-                    <option v-for="m in minutes" :key="`em-${m}`" :value="m">{{ m }}</option>
-                  </select>
-                </div>
-                <p v-if="errors.time" class="helper text-red-600">{{ errors.time }}</p>
-              </div>
-            </div>
+          <!-- Period: start -->
+          <div class="grid gap-2">
+            <span class="label">Début de la réservation</span>
+            <DateTimePicker v-model="startPicked" :use24h="true" :minute-step="5" locale="fr-FR" />
+            <p v-if="errors.start" class="helper text-red-600">{{ errors.start }}</p>
+          </div>
+
+          <!-- Period: end -->
+          <div class="grid gap-2">
+            <span class="label">Fin de la réservation</span>
+            <DateTimePicker v-model="endPicked" :use24h="true" :minute-step="5" locale="fr-FR" />
+            <p v-if="errors.end" class="helper text-red-600">{{ errors.end }}</p>
           </div>
 
           <!-- Linka Go emails (multiple) -->
@@ -149,11 +94,9 @@
 </template>
 
 <script setup>
-import { reactive, ref, computed } from 'vue'
+import { reactive, ref, watch } from 'vue'
 import { api } from '@/services/api'
-
-const hours = Array.from({ length: 24 }, (_, i) => String(i).padStart(2, '0'))
-const minutes = ['00', '15', '30', '45']
+import DateTimePicker from '@/components/DateTimePicker.vue'
 
 const bigBikes = [1000, 2000]
 const smallBikes = [3000, 4000, 5000]
@@ -164,52 +107,62 @@ const status = reactive({ success: false, message: '', error: '' })
 const form = reactive({
   association: '',
   bikeTypes: [],
-  startDate: '',
-  startHour: '',
-  startMinute: '',
-  endDate: '',
-  endHour: '',
-  endMinute: '',
+  startDate: null,   // Date|null
+  startTime: '',     // 'HH:mm'
+  endDate: null,     // Date|null
+  endTime: '',       // 'HH:mm'
   emails: [''],
 })
 
+// New: picked DateTime values bound to the DateTimePicker components
+const startPicked = ref(null)      // Date|null
+const endPicked = ref(null)        // Date|null
+
+function formatHHmm(d) {
+  if (!(d instanceof Date)) return ''
+  const h = String(d.getHours()).padStart(2, '0')
+  const m = String(d.getMinutes()).padStart(2, '0')
+  return `${h}:${m}`
+}
+
+// Sync picked DateTime to existing form fields
+watch(startPicked, (d) => {
+  if (d instanceof Date) {
+    form.startDate = new Date(d)
+    form.startTime = formatHHmm(d)
+  } else {
+    form.startDate = null
+    form.startTime = ''
+  }
+})
+
+watch(endPicked, (d) => {
+  if (d instanceof Date) {
+    form.endDate = new Date(d)
+    form.endTime = formatHHmm(d)
+  } else {
+    form.endDate = null
+    form.endTime = ''
+  }
+})
+
 const errors = reactive({
   association: '',
   bikeTypes: '',
-  startDate: '',
-  endDate: '',
-  time: '',
+  start: '',
+  end: '',
   emails: '',
 })
 
-const years = computed(() => {
-  const y = new Date().getFullYear()
-  return [y, y + 1, y + 2]
-})
-const months = Array.from({ length: 12 }, (_, i) => String(i + 1).padStart(2, '0'))
-function daysInMonth(year, month) {
-  if (!year || !month) return 31
-  return new Date(Number(year), Number(month), 0).getDate()
-}
-const startDays = computed(() => {
-  const n = daysInMonth(form.startYear, form.startMonth)
-  return Array.from({ length: n }, (_, i) => String(i + 1).padStart(2, '0'))
-})
-const endDays = computed(() => {
-  const n = daysInMonth(form.endYear, form.endMonth)
-  return Array.from({ length: n }, (_, i) => String(i + 1).padStart(2, '0'))
-})
-
 function isSelected(b) { return form.bikeTypes.includes(b) }
 function toggleBike(b) {
   const i = form.bikeTypes.indexOf(b)
   if (i >= 0) form.bikeTypes.splice(i, 1)
   else form.bikeTypes.push(b)
 }
-
 function buttonClass(b) {
   return isSelected(b)
-    ? 'bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))] border-transparent ring-2 ring-[hsl(var(--ring))]'
+    ? 'bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))] border-transparent'
     : 'hover:bg-[hsl(var(--muted))]'
 }
 
@@ -218,40 +171,41 @@ function removeEmail(idx) { if (form.emails.length > 1) form.emails.splice(idx,
 
 function resetForm() {
   Object.assign(form, {
-    association: '', bikeTypes: [], startDate: '', startHour: '', startMinute: '', endDate: '', endHour: '', endMinute: '', emails: ['']
+    association: '', bikeTypes: [], startDate: null, startTime: '', endDate: null, endTime: '', emails: ['']
   })
+  // Also reset pickers
+  startPicked.value = null
+  endPicked.value = null
   Object.keys(errors).forEach(k => errors[k] = '')
   Object.assign(status, { success: false, message: '', error: '' })
 }
 
-function asISO(y, m, d) {
-  if (!y || !m || !d) return ''
-  return `${y}-${m}-${d}`
-}
-function isDateValid(y, m, d) {
-  if (!y || !m || !d) return false
-  const dd = Number(d), mm = Number(m), yy = Number(y)
-  const dt = new Date(yy, mm - 1, dd)
-  return dt.getFullYear() === yy && dt.getMonth() === mm - 1 && dt.getDate() === dd
+function toISODate(d) {
+  if (!(d instanceof Date)) return ''
+  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}`
 }
 
 function validate() {
   Object.keys(errors).forEach(k => errors[k] = '')
   let ok = true
-  if (!form.association || form.association.length < 2) { errors.association = 'Renseignez le nom de l’association.'; ok = false }
+  if (!form.association || form.association.length < 2) { errors.association = "Renseignez le nom de l’association."; ok = false }
   if (!form.bikeTypes.length) { errors.bikeTypes = 'Sélectionnez au moins un vélo.'; ok = false }
-  if (!isDateValid(form.startYear, form.startMonth, form.startDay)) { errors.startDate = 'Sélectionnez une date de début valide (jj/mm/aaaa).'; ok = false }
-  if (!isDateValid(form.endYear, form.endMonth, form.endDay)) { errors.endDate = 'Sélectionnez une date de fin valide (jj/mm/aaaa).'; ok = false }
-  if (!form.startHour || !form.startMinute || !form.endHour || !form.endMinute) { errors.time = 'Renseignez les heures de début et de fin.'; ok = false }
+  if (!form.startDate) { errors.start = 'Sélectionnez une date de début.'; ok = false }
+  if (!form.endDate) { errors.end = 'Sélectionnez une date de fin.'; ok = false }
+  const [sh, sm] = (form.startTime || '').split(':')
+  const [eh, em] = (form.endTime || '').split(':')
+  if (!sh || !sm) { errors.start = 'Renseignez l’heure de début (24h).'; ok = false }
+  if (!eh || !em) { errors.end = 'Renseignez l’heure de fin (24h).'; ok = false }
+
   if (ok) {
-    const startISO = asISO(form.startYear, form.startMonth, form.startDay)
-    const endISO = asISO(form.endYear, form.endMonth, form.endDay)
-    if (endISO < startISO) { errors.endDate = 'La date de fin doit être après la date de début.'; ok = false }
-    if (endISO === startISO) {
-      const s = Number(form.startHour) * 60 + Number(form.startMinute)
-      const e = Number(form.endHour) * 60 + Number(form.endMinute)
-      if (e <= s) { errors.time = 'Heure de fin après l’heure de début requise.'; ok = false }
-    }
+    const s = new Date(form.startDate)
+    s.setHours(Number(sh), Number(sm), 0, 0)
+    const e = new Date(form.endDate)
+    e.setHours(Number(eh), Number(em), 0, 0)
+    if (e <= s) { errors.end = 'La fin doit être après le début.'; ok = false }
   }
   const validEmails = form.emails.map(e => e.trim()).filter(Boolean)
   if (validEmails.length === 0) { errors.emails = 'Renseignez au moins une adresse e‑mail.'; ok = false }
@@ -266,15 +220,16 @@ async function onSubmit() {
   status.error = ''
   status.message = ''
   try {
-    const emailStr = form.emails.map(e => e.trim()).filter(Boolean).join(',')
+    const [sh, sm] = form.startTime.split(':')
+    const [eh, em] = form.endTime.split(':')
     const payload = {
       bike_types: [...form.bikeTypes],
-      start_date: asISO(form.startYear, form.startMonth, form.startDay),
-      start_time: `${form.startHour}:${form.startMinute}`,
-      end_date: asISO(form.endYear, form.endMonth, form.endDay),
-      end_time: `${form.endHour}:${form.endMinute}`,
+      start_date: toISODate(form.startDate),
+      start_time: `${sh}:${sm}`,
+      end_date: toISODate(form.endDate),
+      end_time: `${eh}:${em}`,
       name: form.association,
-      email: emailStr,
+      email: form.emails.map(e => e.trim()).filter(Boolean).join(','),
     }
     const booking = await api.createBooking(payload)
     status.success = true
diff --git a/src/services/api.js b/src/services/api.js
index 0e10597..26f0801 100644
--- a/src/services/api.js
+++ b/src/services/api.js
@@ -1,22 +1,62 @@
+const API_BASE = typeof import.meta !== 'undefined' && import.meta.env && import.meta.env.VITE_API_BASE ? import.meta.env.VITE_API_BASE : ''
+
+async function doFetch(path, init) {
+  const primaryUrl = API_BASE + path
+  try {
+    const res = await fetch(primaryUrl, init)
+    if (!res.ok) throw Object.assign(new Error(await safeText(res)), { status: res.status })
+    return res
+  } catch (e) {
+    // Localhost/LAN fallback for preview when no API_BASE is set
+    if (!API_BASE && typeof window !== 'undefined') {
+      try {
+        const proto = window.location.protocol === 'https:' ? 'https:' : 'http:'
+        const host = window.location.hostname
+        const fallbackUrl = `${proto}//${host}:3000${path}`
+        const res2 = await fetch(fallbackUrl, init)
+        if (!res2.ok) throw Object.assign(new Error(await safeText(res2)), { status: res2.status })
+        return res2
+      } catch (e2) {
+        // As a last attempt, try localhost explicitly (useful when host is a raw IP)
+        try {
+          const proto2 = window.location.protocol === 'https:' ? 'https:' : 'http:'
+          const res3 = await fetch(`${proto2}//localhost:3000${path}`, init)
+          if (!res3.ok) throw Object.assign(new Error(await safeText(res3)), { status: res3.status })
+          return res3
+        } catch (e3) {
+          throw e3
+        }
+      }
+    }
+    throw e
+  }
+}
+
 export async function apiGet(path) {
-  const res = await fetch(path)
-  if (!res.ok) throw new Error(await safeText(res))
+  const res = await doFetch(path, {})
   return res.json()
 }
 
 export async function apiPost(path, body) {
-  const res = await fetch(path, {
+  const res = await doFetch(path, {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify(body),
   })
-  if (!res.ok) throw new Error(await safeText(res))
+  return res.json()
+}
+
+export async function apiPatch(path, body) {
+  const res = await doFetch(path, {
+    method: 'PATCH',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  })
   return res.json()
 }
 
 export async function apiDelete(path) {
-  const res = await fetch(path, { method: 'DELETE' })
-  if (!res.ok) throw new Error(await safeText(res))
+  const res = await doFetch(path, { method: 'DELETE' })
   return res.json()
 }
 
@@ -39,6 +79,13 @@ export const api = {
   },
   async deleteBooking(id) {
     return apiDelete(`/api/bookings/${id}`)
+  },
+  async updateBookingStatus(id, status) {
+    const { booking } = await apiPatch(`/api/bookings/${id}/status`, { status })
+    return booking
+  },
+  async updateBooking(id, payload) {
+    const { booking } = await apiPatch(`/api/bookings/${id}`, payload)
+    return booking
   }
 }
-
diff --git a/tailwind.config.js b/tailwind.config.js
index 2b045d9..21e8eff 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,67 +1,83 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  content: [
+    darkMode: ['class'],
+    content: [
     './index.html',
     './src/**/*.{vue,js,ts,jsx,tsx}',
   ],
   theme: {
-    extend: {
-      colors: {
-        border: 'hsl(var(--border))',
-        input: 'hsl(var(--input))',
-        ring: 'hsl(var(--ring))',
-        background: 'hsl(var(--background))',
-        foreground: 'hsl(var(--foreground))',
-        primary: {
-          DEFAULT: 'hsl(var(--primary))',
-          foreground: 'hsl(var(--primary-foreground))',
-        },
-        secondary: {
-          DEFAULT: 'hsl(var(--secondary))',
-          foreground: 'hsl(var(--secondary-foreground))',
-        },
-        destructive: {
-          DEFAULT: 'hsl(var(--destructive))',
-          foreground: 'hsl(var(--destructive-foreground))',
-        },
-        muted: {
-          DEFAULT: 'hsl(var(--muted))',
-          foreground: 'hsl(var(--muted-foreground))',
-        },
-        accent: {
-          DEFAULT: 'hsl(var(--accent))',
-          foreground: 'hsl(var(--accent-foreground))',
-        },
-        popover: {
-          DEFAULT: 'hsl(var(--popover))',
-          foreground: 'hsl(var(--popover-foreground))',
-        },
-        card: {
-          DEFAULT: 'hsl(var(--card))',
-          foreground: 'hsl(var(--card-foreground))',
-        },
-      },
-      borderRadius: {
-        lg: 'var(--radius)',
-        md: 'calc(var(--radius) - 2px)',
-        sm: 'calc(var(--radius) - 4px)',
-      },
-      keyframes: {
-        'accordion-down': {
-          from: { height: 0 },
-          to: { height: 'var(--radix-accordion-content-height)' },
-        },
-        'accordion-up': {
-          from: { height: 'var(--radix-accordion-content-height)' },
-          to: { height: 0 },
-        },
-      },
-      animation: {
-        'accordion-down': 'accordion-down 0.2s ease-out',
-        'accordion-up': 'accordion-up 0.2s ease-out',
-      },
-    },
+  	extend: {
+  		colors: {
+  			border: 'hsl(var(--border))',
+  			input: 'hsl(var(--input))',
+  			ring: 'hsl(var(--ring))',
+  			background: 'hsl(var(--background))',
+  			foreground: 'hsl(var(--foreground))',
+  			primary: {
+  				DEFAULT: 'hsl(var(--primary))',
+  				foreground: 'hsl(var(--primary-foreground))'
+  			},
+  			secondary: {
+  				DEFAULT: 'hsl(var(--secondary))',
+  				foreground: 'hsl(var(--secondary-foreground))'
+  			},
+  			destructive: {
+  				DEFAULT: 'hsl(var(--destructive))',
+  				foreground: 'hsl(var(--destructive-foreground))'
+  			},
+  			muted: {
+  				DEFAULT: 'hsl(var(--muted))',
+  				foreground: 'hsl(var(--muted-foreground))'
+  			},
+  			accent: {
+  				DEFAULT: 'hsl(var(--accent))',
+  				foreground: 'hsl(var(--accent-foreground))'
+  			},
+  			popover: {
+  				DEFAULT: 'hsl(var(--popover))',
+  				foreground: 'hsl(var(--popover-foreground))'
+  			},
+  			card: {
+  				DEFAULT: 'hsl(var(--card))',
+  				foreground: 'hsl(var(--card-foreground))'
+  			},
+  			chart: {
+  				'1': 'hsl(var(--chart-1))',
+  				'2': 'hsl(var(--chart-2))',
+  				'3': 'hsl(var(--chart-3))',
+  				'4': 'hsl(var(--chart-4))',
+  				'5': 'hsl(var(--chart-5))'
+  			}
+  		},
+  		borderRadius: {
+  			lg: 'var(--radius)',
+  			md: 'calc(var(--radius) - 2px)',
+  			sm: 'calc(var(--radius) - 4px)'
+  		},
+  		keyframes: {
+  			'accordion-down': {
+  				from: {
+  					height: 0
+  				},
+  				to: {
+  					height: 'var(--radix-accordion-content-height)'
+  				}
+  			},
+  			'accordion-up': {
+  				from: {
+  					height: 'var(--radix-accordion-content-height)'
+  				},
+  				to: {
+  					height: 0
+  				}
+  			}
+  		},
+  		animation: {
+  			'accordion-down': 'accordion-down 0.2s ease-out',
+  			'accordion-up': 'accordion-up 0.2s ease-out'
+  		}
+  	}
   },
-  plugins: [],
+  plugins: [require("tailwindcss-animate")],
 }