commit 88f23caf3b15f5628af10d680f5af8f9292866dc
Author: streaper2 <streaper2@gmail.com>
Date:   Sun Sep 27 17:59:36 2026 +0200

    feat: uwuFinances app with themes, JWT auth and NoCodeBackend sync

diff --git a/.env b/.env
new file mode 100644
index 0000000..40ff841
--- /dev/null
+++ b/.env
@@ -0,0 +1,5 @@
+# NoCodeBackend - uwuFinances Database
+# VITE_ prefix needed for Vite to expose these to the proxy config
+VITE_NCB_INSTANCE=54770_uwu_finances
+VITE_NCB_SECRET_KEY=sk_live_0dydoaq1kib4f23ou6
+VITE_NCB_DATA_API_URL=https://eu-api.nocodebackend.com
diff --git a/.env.example b/.env.example
new file mode 100644
index 0000000..36a202e
--- /dev/null
+++ b/.env.example
@@ -0,0 +1,4 @@
+# NoCodeBackend - uwuFinances Configuration
+VITE_NCB_INSTANCE=54770_uwu_finances
+VITE_NCB_SECRET_KEY=your_secret_key_here
+VITE_NCB_DATA_API_URL=https://eu-api.nocodebackend.com
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..a547bf3
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/.oxlintrc.json b/.oxlintrc.json
new file mode 100644
index 0000000..6fa991d
--- /dev/null
+++ b/.oxlintrc.json
@@ -0,0 +1,8 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": ["react", "typescript", "oxc"],
+  "rules": {
+    "react/rules-of-hooks": "error",
+    "react/only-export-components": ["warn", { "allowConstantExport": true }]
+  }
+}
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..d6af7e3
--- /dev/null
+++ b/README.md
@@ -0,0 +1,32 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some Oxlint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the Oxlint configuration
+
+If you are developing a production application, we recommend enabling type-aware lint rules by installing `oxlint-tsgolint` and editing `.oxlintrc.json`:
+
+```json
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": ["react", "typescript", "oxc"],
+  "options": {
+    "typeAware": true
+  },
+  "rules": {
+    "react/rules-of-hooks": "error",
+    "react/only-export-components": ["warn", { "allowConstantExport": true }]
+  }
+}
+```
+
+See the [Oxlint rules documentation](https://oxc.rs/docs/guide/usage/linter/rules) for the full list of rules and categories.
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..4ab4ebb
--- /dev/null
+++ b/index.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<html lang="fr" class="dark">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎮</text></svg>" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>uwuFinances | Gestionnaire Console Modding & Business Hub</title>
+    <meta name="description" content="Gestionnaire financier complet pour atelier de customisation et modding de consoles : Centre d'achat, Centre de dépenses par projet, Quantification du temps, et Dashboard de rentabilité." />
+    <!-- Google Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&family=Fredoka:wght@400;600;700&display=swap" rel="stylesheet">
+  </head>
+  <body class="bg-slate-950 text-slate-100 font-sans antialiased min-h-screen selection:bg-pink-500 selection:text-white">
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
+
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..1e338a5
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,2508 @@
+{
+  "name": "uwufinances",
+  "version": "0.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "uwufinances",
+      "version": "0.0.0",
+      "dependencies": {
+        "@tailwindcss/vite": "^4.3.3",
+        "@types/qrcode": "^1.5.6",
+        "canvas-confetti": "^1.9.4",
+        "clsx": "^2.1.1",
+        "lucide-react": "^1.48.0",
+        "qrcode.react": "^4.2.0",
+        "react": "^19.2.8",
+        "react-dom": "^19.2.8",
+        "recharts": "^3.10.1",
+        "tailwind-merge": "^3.7.0"
+      },
+      "devDependencies": {
+        "@types/canvas-confetti": "^1.9.0",
+        "@types/node": "^24.13.3",
+        "@types/react": "^19.2.18",
+        "@types/react-dom": "^19.2.7",
+        "@vitejs/plugin-react": "^6.1.1",
+        "autoprefixer": "^10.6.1",
+        "oxlint": "^1.81.0",
+        "postcss": "^8.5.28",
+        "tailwindcss": "^4.3.3",
+        "typescript": "~6.0.2",
+        "vite": "^8.3.0"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "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==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/remapping": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
+      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.6.0.tgz",
+      "integrity": "sha512-T7jf+5zgsZHwNJ4lvQ7/aezbyk0nNX+zJVWpmHA7VYsEx7a7qr5Rg5IbtJFqkgze5Y2sruq1RUY8Q837Od7iFw==",
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.31",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@oxc-project/types": {
+      "version": "0.151.0",
+      "resolved": "https://registry.npmjs.org/@oxc-project/types/-/types-0.151.0.tgz",
+      "integrity": "sha512-J1yXrIlNDZVzE3ada310xeAw7nH8yCAyLPuUIsjKatFPmfn5bS1oW+cM+QsGOtVWd5nhSpbwZWx/rue+r5Z+PA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/oxc-project"
+      }
+    },
+    "node_modules/@oxlint/binding-android-arm-eabi": {
+      "version": "1.85.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-android-arm-eabi/-/binding-android-arm-eabi-1.85.0.tgz",
+      "integrity": "sha512-q2KO/Zso9UT+OMn0NF9ywn4E4t0MI3yxiDhNyhsQ7DyQJrC4FhFE4TXOi4bktFnOWXTMds8qZSbpv2XwRaNOBg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-android-arm64": {
+      "version": "1.85.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-android-arm64/-/binding-android-arm64-1.85.0.tgz",
+      "integrity": "sha512-SxLN3ALjoT9NNdvpjEevGeHvfzTAFrF0NBYB5tzK7/GtCKMze3j1e/m/X2ozqGj2U9hfGG/dg/OG8vpVK4PiDA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-darwin-arm64": {
+      "version": "1.85.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-darwin-arm64/-/binding-darwin-arm64-1.85.0.tgz",
+      "integrity": "sha512-Y/Sup/J4f0f9UGsSd/xyCNTeWL+gepO63GBdEDAfue9nBsnk9zMmnIXx1O6b1V8C90vB5nucYNZ0pbMXAp8zJA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-darwin-x64": {
+      "version": "1.85.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-darwin-x64/-/binding-darwin-x64-1.85.0.tgz",
+      "integrity": "sha512-ApOSNC04ynpDTwvBD+//0wyfODRSbEzvRoKpX8teffmc27z8AockwSNeMXGJXn5KP85eahDgR/2llICWLkzcnw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-freebsd-x64": {
+      "version": "1.85.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-freebsd-x64/-/binding-freebsd-x64-1.85.0.tgz",
+      "integrity": "sha512-bNrVrCOA/kHky3Tu79IXWXe5bhIgLXfUuUEDHlAGOHUk96MkvDZ1ecaQF19rwstrnaqfP1o9nBTqzIr9+ZHkUg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-linux-arm-gnueabihf": {
+      "version": "1.85.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-1.85.0.tgz",
+      "integrity": "sha512-NUrzOJ1s/EqsVvfn2L/1D8Wro2LPIZUbihL8kOJLh5fEdGEN3rdOGUYq3HwnUIL8sjpoP+4N6RaGrgmMJnaMPw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-linux-arm-musleabihf": {
+      "version": "1.85.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-arm-musleabihf/-/binding-linux-arm-musleabihf-1.85.0.tgz",
+      "integrity": "sha512-UJXrAT3E/RWkEqXLIs2ehETja1qfgkPb+5gwLIIS+o/6cf+grHvoOXTa5997a/YNQfcJS0DRBTOfZt95cvOI1g==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-linux-arm64-gnu": {
+      "version": "1.85.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.85.0.tgz",
+      "integrity": "sha512-lK40QLjI0HxigO7CjDDshEtfYIeiYS0020v5BHFPqN4uuQBQxd2K9LNom2dW15o9F1937quSCRVp4ZsVhdbYdg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-linux-arm64-musl": {
+      "version": "1.85.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.85.0.tgz",
+      "integrity": "sha512-c2zbdBwGKreHXwRx3gWBuFGJxLhxgsg6YlZ+3H+RgRusU/UEV9jNwJ3HGYK+nRo0LvBa7mt6Kj86xoVotUo8cw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-linux-ppc64-gnu": {
+      "version": "1.85.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-1.85.0.tgz",
+      "integrity": "sha512-tlt/Hy8lZ97/lCPmCgw/B3k/mwh+BzaIPbPkldZEly7TwLmx0xe2CQcaW2g/rR0dOgS9JNGCZsMEqLhUNMGvaw==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-linux-riscv64-gnu": {
+      "version": "1.85.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-riscv64-gnu/-/binding-linux-riscv64-gnu-1.85.0.tgz",
+      "integrity": "sha512-3tNR9Xey82X0zKuY1d8hJ6Rc9gwRDurmqGLnQZa5xqOXy8/YyiqFXjAtugkKLY82obOlpK1eSiDRlgcNPuxtIg==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-linux-riscv64-musl": {
+      "version": "1.85.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-riscv64-musl/-/binding-linux-riscv64-musl-1.85.0.tgz",
+      "integrity": "sha512-wbGRd5PqCcjkJFHhZuZ2OBSUQY9czlQsoA/cQQB9JK/L9mC5MQgGoKAh+xd8QjA5V+0D3j+Qd1lAWn1I8zlelA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-linux-s390x-gnu": {
+      "version": "1.85.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-1.85.0.tgz",
+      "integrity": "sha512-3Sn0kSrE4DPZCWV/8o+n4x3aFZxI9ulMnkYlwCbJ8eUVkwRK2IerohE/A/z3SNbCwoPFOCJmGE5Avrq0rrvdvQ==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-linux-x64-gnu": {
+      "version": "1.85.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.85.0.tgz",
+      "integrity": "sha512-JY2pxxYfB62bAGfejljVCqc44etItehPuAyaeSAdMuEMtwNA00ggMnS66lC1oIhos6oOXUkuU6mZ9bpFh3BqWg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-linux-x64-musl": {
+      "version": "1.85.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-x64-musl/-/binding-linux-x64-musl-1.85.0.tgz",
+      "integrity": "sha512-5k74vZ6qJBjBHEOlBk9B/iv68Yu0F1Afw/vvT2ar6OGCqEeXLaSjXz2n/IPCbhLG22UoKoYEJTzpYraRdcp6PA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-openharmony-arm64": {
+      "version": "1.85.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-openharmony-arm64/-/binding-openharmony-arm64-1.85.0.tgz",
+      "integrity": "sha512-GbAl5qt5TCkPLXTaIISZJnugrcBhra6rodcXc9jYt620UtdsTt71NlNmJmm0frxzFpd54x/G+MkitEJA8I/BoA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-win32-arm64-msvc": {
+      "version": "1.85.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.85.0.tgz",
+      "integrity": "sha512-kjmws5MK0et2swk4ND85D7NVQyDHw162i6whtZDLUA/lo6FQyBZDcmMRCMcVZcNrAhIaftVb00x9ChGDOjjNJA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-win32-ia32-msvc": {
+      "version": "1.85.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-win32-ia32-msvc/-/binding-win32-ia32-msvc-1.85.0.tgz",
+      "integrity": "sha512-eSsIJx9n4yxvOqYTZyPEMyEXRmE60XH7xGAU7i0Qbsn1lf6Za3CWJ9aRd82oSFKXaxhp+sA6/yMJVRIpLpna6A==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-win32-x64-msvc": {
+      "version": "1.85.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.85.0.tgz",
+      "integrity": "sha512-pBebIPUpKKhWrhSMWhy8TdAZBewiXnfxmaAGxhzxM1068GagqFaTwgKlU6e+UyJ2sPR+VoHouhXuGJkQjsrDvA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@reduxjs/toolkit": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.12.0.tgz",
+      "integrity": "sha512-KiT+RzZbp6mQET+Mg+h2c97+9j1sNflUxQkIHI7Yuzf6Peu+OYpmkn6nbHWmLLWj+1ZODUJFwGZ7gx3L9R9EOw==",
+      "license": "MIT",
+      "dependencies": {
+        "@standard-schema/spec": "^1.0.0",
+        "@standard-schema/utils": "^0.3.0",
+        "immer": "^11.0.0",
+        "redux": "^5.0.1",
+        "redux-thunk": "^3.1.0",
+        "reselect": "^5.1.0"
+      },
+      "peerDependencies": {
+        "react": "^16.9.0 || ^17.0.0 || ^18 || ^19",
+        "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-redux": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rolldown/binding-android-arm-eabi": {
+      "version": "1.2.11",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm-eabi/-/binding-android-arm-eabi-1.2.11.tgz",
+      "integrity": "sha512-A5kXfGKvKWWZE0TtPrfsvT+q4Y5d1QG8gGUzpYjGydM+fARM9MuX90PrXYXe0XbsDVgyxxNzHo6giCj90bsFNw==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-android-arm64": {
+      "version": "1.2.11",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.2.11.tgz",
+      "integrity": "sha512-z6cTycz+iJ4PVkuL4HHW4DfTfoeU/2nqYYuSOrTmH7yHK5Y0LCOnA03V4ZNxavyVaU1oOqUgIg2klN/s+USGOA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-darwin-arm64": {
+      "version": "1.2.11",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-arm64/-/binding-darwin-arm64-1.2.11.tgz",
+      "integrity": "sha512-jShvqNtP6vDC6/A5JOAzbVV+DkgHqhl/ScVCJEbt+TUY6QYz7YnXcrg3sLtFBniro0f/Ld50ZwCWA6f7KYD1nQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-darwin-x64": {
+      "version": "1.2.11",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-x64/-/binding-darwin-x64-1.2.11.tgz",
+      "integrity": "sha512-f2i2xiNWq1Z1l2++q2fuhZRdLAT3aqxD6vRNm1RAxpUoBcdqNB3C0s1Bt+K+PbEx2F5F4gQp6hqKkphCY/xF9w==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-freebsd-x64": {
+      "version": "1.2.11",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-freebsd-x64/-/binding-freebsd-x64-1.2.11.tgz",
+      "integrity": "sha512-4Ir5FSOKIAMr4r0kExpt1s3bMgzJU3rA45AYOHtQpls0oNeqcYBKrWMlckrYH4KCfGLfkfn1tN1dmZPMVsdXow==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm-gnueabihf": {
+      "version": "1.2.11",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-1.2.11.tgz",
+      "integrity": "sha512-/gnRDM+39BROzAN/k1OZjDPnDMcZxB/0EUxKjONO5yVkNEvlsoMDrxGNKgZi/ttFriS2gwlDNzB65pvNbFOXIQ==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm64-gnu": {
+      "version": "1.2.11",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.2.11.tgz",
+      "integrity": "sha512-PFaK8HwvAHbaKbBcDNQihjMKYvFnA5hiENx/l5tphTDz1E0WFp32l0A7aq7lyUwGsRw/xSrNIy/gIK4thrSCrw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm64-musl": {
+      "version": "1.2.11",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.2.11.tgz",
+      "integrity": "sha512-AskzJUIKRLPxkruR1wLKewGbOw+EYfU/9lOrBFj4AFrEA8hPpKFnODWNu2WLaNs0QNkEb9QIJufmVZZIL/bJlg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-ppc64-gnu": {
+      "version": "1.2.11",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-1.2.11.tgz",
+      "integrity": "sha512-qlUGAheh2yh8afH7QBgx0PrRHN85hKnNd78x8MeMhXivuevgd8vgf6/CstOzmNKY/lLTHvNTrPy98cLnAugzJw==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-s390x-gnu": {
+      "version": "1.2.11",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-1.2.11.tgz",
+      "integrity": "sha512-secpEad+0vCbSfn8upFySkDskv+bGPk3THSDS9Y89yc4rb4kzqHp8Dmyd9BkQW4SnhNXBZCl/6CrO//hZahNJQ==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-x64-gnu": {
+      "version": "1.2.11",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.2.11.tgz",
+      "integrity": "sha512-mOVBT3dPpkWm8XBWPmU4bf+U6dYDLeMo/9ojUmis4N0L5uu10qra5vOyngZ7/PSdoE4G9KvRt4bloRxNjLas7A==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-x64-musl": {
+      "version": "1.2.11",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-musl/-/binding-linux-x64-musl-1.2.11.tgz",
+      "integrity": "sha512-Is78i9A8Ui4SqcxUwFJ9uMmjDn58IbVTjFWYdQestFEgeuEmHMLGNriXnVJKkwG2YiZjw8cP0zCTyDMdDGtOOg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-openharmony-arm64": {
+      "version": "1.2.11",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-openharmony-arm64/-/binding-openharmony-arm64-1.2.11.tgz",
+      "integrity": "sha512-dUCXneZ87INUMyQ0D+C0HrEBNUPNXHaPmU5GTjyKTJEiussw9Kaj5Ln8UztPe4epV/ffvgNBEadksdYhmW6xJA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-win32-arm64-msvc": {
+      "version": "1.2.11",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.2.11.tgz",
+      "integrity": "sha512-jByxb6qfd+bH1xUd0qnfFnb17i9sWBPY2tOavJ0l3tdr3OTu+Kvtm8cd/JV5nFt657b1VqGltxg9olOEfofXWw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-win32-x64-msvc": {
+      "version": "1.2.11",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.2.11.tgz",
+      "integrity": "sha512-/PzKqzAJ03i19oy2ItPvyvaVjOjBCNnfaJs8yvUdGBKmiESgnrJSQ2awd81QzFbbnAmu7YO9ZnJrDCb9VSJPRA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/pluginutils": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.1.tgz",
+      "integrity": "sha512-2j9bGt5Jh8hj+vPtgzPtl72j0yRxHAyumoo6TNfAjsLB04UtpSvPbPcDcBMxz7n+9CYB0c1GxQFxYRg2jimqGw==",
+      "license": "MIT"
+    },
+    "node_modules/@standard-schema/spec": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
+      "integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==",
+      "license": "MIT"
+    },
+    "node_modules/@standard-schema/utils": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz",
+      "integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==",
+      "license": "MIT"
+    },
+    "node_modules/@tailwindcss/node": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.3.3.tgz",
+      "integrity": "sha512-/T8IKEsf9VTU6tLjgC7+sv2mOPtQxzE2jMw7u4Tt40Tx+QSZxpzh95/H6cMKoja9XuW7iMdLJYBB0o9G1CaAgg==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/remapping": "^2.3.5",
+        "enhanced-resolve": "^5.24.1",
+        "jiti": "^2.7.0",
+        "lightningcss": "1.32.0",
+        "magic-string": "^0.30.21",
+        "source-map-js": "^1.2.1",
+        "tailwindcss": "4.3.3"
+      }
+    },
+    "node_modules/@tailwindcss/node/node_modules/lightningcss": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.32.0.tgz",
+      "integrity": "sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==",
+      "license": "MPL-2.0",
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-android-arm64": "1.32.0",
+        "lightningcss-darwin-arm64": "1.32.0",
+        "lightningcss-darwin-x64": "1.32.0",
+        "lightningcss-freebsd-x64": "1.32.0",
+        "lightningcss-linux-arm-gnueabihf": "1.32.0",
+        "lightningcss-linux-arm64-gnu": "1.32.0",
+        "lightningcss-linux-arm64-musl": "1.32.0",
+        "lightningcss-linux-x64-gnu": "1.32.0",
+        "lightningcss-linux-x64-musl": "1.32.0",
+        "lightningcss-win32-arm64-msvc": "1.32.0",
+        "lightningcss-win32-x64-msvc": "1.32.0"
+      }
+    },
+    "node_modules/@tailwindcss/node/node_modules/lightningcss-android-arm64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.32.0.tgz",
+      "integrity": "sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@tailwindcss/node/node_modules/lightningcss-darwin-arm64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.32.0.tgz",
+      "integrity": "sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@tailwindcss/node/node_modules/lightningcss-darwin-x64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.32.0.tgz",
+      "integrity": "sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@tailwindcss/node/node_modules/lightningcss-freebsd-x64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.32.0.tgz",
+      "integrity": "sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@tailwindcss/node/node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.32.0.tgz",
+      "integrity": "sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@tailwindcss/node/node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.32.0.tgz",
+      "integrity": "sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@tailwindcss/node/node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.32.0.tgz",
+      "integrity": "sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@tailwindcss/node/node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.32.0.tgz",
+      "integrity": "sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@tailwindcss/node/node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.32.0.tgz",
+      "integrity": "sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@tailwindcss/node/node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.32.0.tgz",
+      "integrity": "sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@tailwindcss/node/node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.32.0.tgz",
+      "integrity": "sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@tailwindcss/oxide": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.3.3.tgz",
+      "integrity": "sha512-krXjAikiaFSPaK/FkAQT5UTx3VormQaiZ5hBFlJZ9UFQGB/rwg1MZIhHAG9smMQRTdyJxP6Qt5MwMtdyU5FWrA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 20"
+      },
+      "optionalDependencies": {
+        "@tailwindcss/oxide-android-arm64": "4.3.3",
+        "@tailwindcss/oxide-darwin-arm64": "4.3.3",
+        "@tailwindcss/oxide-darwin-x64": "4.3.3",
+        "@tailwindcss/oxide-freebsd-x64": "4.3.3",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.3.3",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.3.3",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.3.3",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.3.3",
+        "@tailwindcss/oxide-linux-x64-musl": "4.3.3",
+        "@tailwindcss/oxide-wasm32-wasi": "4.3.3",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.3.3",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.3.3"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-android-arm64": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.3.3.tgz",
+      "integrity": "sha512-Y85A2gmPSkl5Ve5qR86GL4HT509cFqQh1aes9p3sSkyTPwt0Pppf3GkwGe4JPACcRYjgJIEhQgM6dBClnr0NYw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-arm64": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.3.3.tgz",
+      "integrity": "sha512-BiaWatpBcERQFDlOjRDpIVXuFK5PJez5SA4JMg6VYZdBYU+qKfV/vqjcIs+IYmtitf1xYQZTwXvU/8y4lfZUGw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-x64": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.3.3.tgz",
+      "integrity": "sha512-fAeUqfV5ndhxRwai8cXGzdLvul9utWOmeTkv69unv4ZXixjn61Z+p9lCWdwOwA3TYboG3BwdVuN/RDjhBRl0mw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-freebsd-x64": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.3.3.tgz",
+      "integrity": "sha512-iyf5bV6+wnAlflVeEy7R25dupxTNECZN5QMI0qNT6eT+EgaGdZcKhGkr5SdoaWiLJ3spLqIY9VCeSGrwmtg4kw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.3.3.tgz",
+      "integrity": "sha512-aAYUprJAJQWWbRrPvtjdroZ56Md+JM8pMiopS6xGEwDfLhqj+2ver2p4nU4Mb3CRqcMmNBjo8KkUgcxhkzVQGQ==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.3.3.tgz",
+      "integrity": "sha512-nDxldcEENOxZRzC2uu9jrutZdAAQtb+8WWDCSnWL1zvBk1+FN+x6MtDViPB5AJMfttVCUhehGWus3XBPgatM/w==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.3.3.tgz",
+      "integrity": "sha512-Md44bD6veX/PC5iyF8cDVnw4HBIANZepRZZ7a8DQOvkfo5WUBwcp6iAuCUz23u+4SUkhJlD3eL7hNdW8ezd/kA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.3.3.tgz",
+      "integrity": "sha512-tx7us1muwOKAKWao2v/GaafFeQboE6aj88vC6ziN2NCGcRm8gWUhwjzg+YdVB1e4boAtdtma4L43onunI6NS4w==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-musl": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.3.3.tgz",
+      "integrity": "sha512-SJxX60smvHgasZoBy11dX6YRjXJFovwWBoedhbQPOBzgFWBHGB+TVPWB9BxzR7TTxU8FQZAI2AyiNCMzFm8Img==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.3.3.tgz",
+      "integrity": "sha512-jx1+rPhY/5Ympkktd656HBWEBLxP7dH06losBLjjf5vgCODXvi9KhtftWcMIwTFIDqBr7cRnQkdLnAG+IOlGvQ==",
+      "bundleDependencies": [
+        "@napi-rs/wasm-runtime",
+        "@emnapi/core",
+        "@emnapi/runtime",
+        "@tybys/wasm-util",
+        "@emnapi/wasi-threads",
+        "tslib"
+      ],
+      "cpu": [
+        "wasm32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.11.1",
+        "@emnapi/runtime": "^1.11.1",
+        "@emnapi/wasi-threads": "^1.2.2",
+        "@napi-rs/wasm-runtime": "^1.1.4",
+        "@tybys/wasm-util": "^0.10.2",
+        "tslib": "^2.8.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.3.3.tgz",
+      "integrity": "sha512-3rc292Ca2ceK6Ulcc/bAVnTs/3nDtoPhyEKlgPv+yQJQi/JS/AMJlqzxvlDacL1nekbrcf6bTqp/jV4qgnPxNQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.3.3.tgz",
+      "integrity": "sha512-yJ0pwIVc/nYeGoV02WtsN8KYyLQv7kyI2wDnkezyJlGGjkd4QLwDGAwl47YpPJeuI0M0ObaXGSPjvWDPeTPggw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/vite": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.3.3.tgz",
+      "integrity": "sha512-yYU8cogLeSh/ms2jh8Fj7jaba/EWa7Ja6GoUqYZaraEuCI5YS6ms6ObZgjjedm+jm6XZjdNRWBpPP6Z86oOxcw==",
+      "license": "MIT",
+      "dependencies": {
+        "@tailwindcss/node": "4.3.3",
+        "@tailwindcss/oxide": "4.3.3",
+        "tailwindcss": "4.3.3"
+      },
+      "peerDependencies": {
+        "vite": "^5.2.0 || ^6 || ^7 || ^8"
+      }
+    },
+    "node_modules/@types/canvas-confetti": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@types/canvas-confetti/-/canvas-confetti-1.9.0.tgz",
+      "integrity": "sha512-aBGj/dULrimR1XDZLtG9JwxX1b4HPRF6CX9Yfwh3NvstZEm1ZL7RBnel4keCPSqs1ANRu1u2Aoz9R+VmtjYuTg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-array": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.2.tgz",
+      "integrity": "sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-color": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
+      "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-ease": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
+      "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-interpolate": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
+      "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-color": "*"
+      }
+    },
+    "node_modules/@types/d3-path": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.1.tgz",
+      "integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-scale": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz",
+      "integrity": "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-time": "*"
+      }
+    },
+    "node_modules/@types/d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-kVd74ta9eof3eJOvbNd1vGKS/XERRyQbT26Og63hIsvDO84cjD5gEOhsXf26w3FSoNlPVz84DOFcKv/oou+fMw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-path": "*"
+      }
+    },
+    "node_modules/@types/d3-time": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.4.tgz",
+      "integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-timer": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
+      "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/node": {
+      "version": "24.19.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-24.19.0.tgz",
+      "integrity": "sha512-zY+5tKxXdhGh1PYI0ac+7juvEu4OI6vWtVVoj5i2m42jxAY1U+zHGt6QCyOFwykdP62sM3MJ9stoYYUw5aCWew==",
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": ">=7.24.0 <7.24.7"
+      }
+    },
+    "node_modules/@types/qrcode": {
+      "version": "1.5.6",
+      "resolved": "https://registry.npmjs.org/@types/qrcode/-/qrcode-1.5.6.tgz",
+      "integrity": "sha512-te7NQcV2BOvdj2b1hCAHzAoMNuj65kNBMz0KBaxM6c3VGBOhU0dURQKOtH8CFNI/dsKkwlv32p26qYQTWoB5bw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/react": {
+      "version": "19.3.0",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.3.0.tgz",
+      "integrity": "sha512-N0rFCuH9YoxG9/m61l9MfpJKfmLOVU0em7ipIz6TRgSSkvReLB9vL85GB+yr8Bs5leqpvg96JSwF4ZS1s4viQg==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "csstype": "^3.2.2"
+      }
+    },
+    "node_modules/@types/react-dom": {
+      "version": "19.3.0",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.3.0.tgz",
+      "integrity": "sha512-ZI7bU42mZXXKHn/qNLEw2IrbiINU7X5+vfgdixBHkCNpYWXjKgfQ/P+uyGb5CjOLB9UcnTeg3rylQtV2hym44Q==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "^19.3.0"
+      }
+    },
+    "node_modules/@types/use-sync-external-store": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
+      "integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==",
+      "license": "MIT"
+    },
+    "node_modules/@vitejs/plugin-react": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-6.1.1.tgz",
+      "integrity": "sha512-yxLaQV9gkhS8ezJqCM6+ndU7mDY6gqAg75NQ+0IjwEI8IYOmQCgkRwHKVSfWXW076DsqMo0Dk+0FK1U+M5RgFw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@rolldown/pluginutils": "^1.0.1"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "peerDependencies": {
+        "@rolldown/plugin-babel": "^0.1.7 || ^0.2.0",
+        "babel-plugin-react-compiler": "^1.0.0",
+        "oxc-transform-react": "^0.145.0",
+        "vite": "^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@rolldown/plugin-babel": {
+          "optional": true
+        },
+        "babel-plugin-react-compiler": {
+          "optional": true
+        },
+        "oxc-transform-react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/autoprefixer": {
+      "version": "10.6.1",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.6.1.tgz",
+      "integrity": "sha512-cL1Qz6ADZhcEbny/8HPfe99J6HhNoYtpX2LFLIbhgGE7Q1hlQVkYFdetDN7Id3KiQxhDrHwzlHr/YQCnZ8+xSA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.28.9",
+        "caniuse-lite": "^1.0.30001810",
+        "fraction.js": "^5.3.4",
+        "picocolors": "^1.1.1",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "bin": {
+        "autoprefixer": "bin/autoprefixer"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/baseline-browser-mapping": {
+      "version": "2.11.26",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.11.26.tgz",
+      "integrity": "sha512-GLQdD3y6UF8iVuMJl5fHgE4jdn/ua7n+toKfLgNlg3BqQtOZjpy68T8Tup8/wGWZCDlm7KMg7tPb4MPn7oN0TQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "baseline-browser-mapping": "dist/cli.cjs"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/browserslist": {
+      "version": "4.29.1",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.29.1.tgz",
+      "integrity": "sha512-AUdjuRyCNGUYtqpqfTmWyM4fXay8yIQhmLnvYe/THMGfT9B/34X7xQd3ifKxwyNPPpowVBjLb+64BN9Rn1mizw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "baseline-browser-mapping": "^2.11.25",
+        "caniuse-lite": "^1.0.30001810",
+        "electron-to-chromium": "^1.5.438",
+        "node-releases": "^2.0.57",
+        "update-browserslist-db": "^1.3.3"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001812",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001812.tgz",
+      "integrity": "sha512-qN+QNNBr93TCmFrmte0bBCjSDMuRvt78VlHT99qIGPszm4QsqCX8lnyWUFkHi8B7ZBAPq8SH+UqyXNy/odMdng==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "CC-BY-4.0"
+    },
+    "node_modules/canvas-confetti": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/canvas-confetti/-/canvas-confetti-1.9.4.tgz",
+      "integrity": "sha512-yxQbJkAVrFXWNbTUjPqjF7G+g6pDotOUHGbkZq2NELZUMDpiJ85rIEazVb8GTaAptNW2miJAXbs1BtioA251Pw==",
+      "license": "ISC",
+      "funding": {
+        "type": "donate",
+        "url": "https://www.paypal.me/kirilvatev"
+      }
+    },
+    "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/csstype": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+      "devOptional": true,
+      "license": "MIT"
+    },
+    "node_modules/d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "license": "ISC",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-format": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.2.tgz",
+      "integrity": "sha512-AJDdYOdnyRDV5b6ArilzCPPwc1ejkHcoyFarqlPqT7zRYjhavcT3uSrqcMvsgh2CgoPbK3RCwyHaVyxYcP2Arg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-path": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-time": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/decimal.js-light": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
+      "integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==",
+      "license": "MIT"
+    },
+    "node_modules/detect-libc": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/electron-to-chromium": {
+      "version": "1.5.439",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.439.tgz",
+      "integrity": "sha512-qu6QIPXhsb+CRcAiTMNjR4A1y/7tCYKkKjr5CZXRVih6qkDf79peZ2BpEU3qoDBNCRrcy3Mra3X9nG5oruuA7Q==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/enhanced-resolve": {
+      "version": "5.25.1",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.25.1.tgz",
+      "integrity": "sha512-nGXts5znJzmWPu+mIE9izCOzdg63oJca2mDzGWWTth7sr4aCToKcoyFVBQwN75Ij5Pf6p510EwkTqViTRzDV+w==",
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.3.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/es-toolkit": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/es-toolkit/-/es-toolkit-1.52.0.tgz",
+      "integrity": "sha512-XTNEJQh1tY1ZJVcf6ayP/2n4ZPyaHlW2FWs7xvw5ddPuhUVjLD3olQVQS7kf58JbAB48iL0uL/jerTrjtV3lDA==",
+      "license": "MIT",
+      "workspaces": [
+        "docs",
+        "benchmarks",
+        "tests/types",
+        "tests/browser-compat"
+      ]
+    },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/eventemitter3": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.4.tgz",
+      "integrity": "sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw==",
+      "license": "MIT"
+    },
+    "node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/fraction.js": {
+      "version": "5.3.4",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-5.3.4.tgz",
+      "integrity": "sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/rawify"
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "license": "ISC"
+    },
+    "node_modules/immer": {
+      "version": "11.1.18",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-11.1.18.tgz",
+      "integrity": "sha512-EQyQtLiYW029lyoczMl/Hh4Xu7cDecSc58JRYpHyL4tIAu3eqd1yJzQX04d2BZHDkzFFvm6qJEJWOtfDSWAXbQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
+    "node_modules/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/jiti": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.7.0.tgz",
+      "integrity": "sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ==",
+      "license": "MIT",
+      "bin": {
+        "jiti": "lib/jiti-cli.mjs"
+      }
+    },
+    "node_modules/lightningcss": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.33.0.tgz",
+      "integrity": "sha512-WkUDrojuJs0xkgGf2udWxa3yGBRxPtxUkB79i6aCZLRgc7PM8fZe9TosfPDcvEpQZbuFASnHYmRLBLUbmLOIIA==",
+      "license": "MPL-2.0",
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-android-arm64": "1.33.0",
+        "lightningcss-darwin-arm64": "1.33.0",
+        "lightningcss-darwin-x64": "1.33.0",
+        "lightningcss-freebsd-x64": "1.33.0",
+        "lightningcss-linux-arm-gnueabihf": "1.33.0",
+        "lightningcss-linux-arm64-gnu": "1.33.0",
+        "lightningcss-linux-arm64-musl": "1.33.0",
+        "lightningcss-linux-x64-gnu": "1.33.0",
+        "lightningcss-linux-x64-musl": "1.33.0",
+        "lightningcss-win32-arm64-msvc": "1.33.0",
+        "lightningcss-win32-x64-msvc": "1.33.0"
+      }
+    },
+    "node_modules/lightningcss-android-arm64": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.33.0.tgz",
+      "integrity": "sha512-gEpRTalKdosp4Bb8qWtc2iOgE5SeIHlpS1up9bFq2wAyYhl1UdTObYiHe98zEM9SQvSoqQZ1IQD0JNpg3Ml5pg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.33.0.tgz",
+      "integrity": "sha512-Sciaz8eenNTKn9b3t7+xr0ipTp9YxKQY4npwQ3mrRuL0BAVHBLyZxofhaKBAVtzmtRZ/zTyo0/to4B1uWG/Djg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.33.0.tgz",
+      "integrity": "sha512-Z5UPAxzrjlWNNyGy6i65cJzzvgJ5D3T6wMvs+gWpY9d7qRhANrxqAp6LhxIgZhWEw18RfJTGcRxjuLIBr+m8XQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.33.0.tgz",
+      "integrity": "sha512-QQM/Ti/hQajJwCY+RiWuCZ9sdtI/XQk7nDK5vC8kkdwixezOlDgvDx7+RT+QjK6FcFT4MpsuoBnHIo/O3StRRg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.33.0.tgz",
+      "integrity": "sha512-N7FVBe6iS24MlM6R/4RBTxGhQheZGs7tiQ9U32UtF75NzP5Q7xWPRqLBCKxlRQRk3rY1jCIPLzx7WzOhuUIRLQ==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.33.0.tgz",
+      "integrity": "sha512-j2v/itmy4HlNxlc6voKXYgBqNi0Ng2LShg4z7GufpEgs05P+2suBVyi9I6YHq5uoVFx9ETin3eCEhLVyXGQnKg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.33.0.tgz",
+      "integrity": "sha512-yiO5ROMuYQgXbC60yjZU5CYSFZGKXL0HFATXt9mHJn1+zW55oCtMI9NfcVhYLMFDL7gV7oBPon/EmMMGg2OvtQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.33.0.tgz",
+      "integrity": "sha512-ar+Ju7LmcN0Jo4FpL4hpFybwNG9/3A/Br5KW2n2jyODg3MEZXaDYADdemoNS+BDNfMgKvylJLj4S5tyRActuAg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.33.0.tgz",
+      "integrity": "sha512-RYiYbkokw0trfKqqzfF55lginwEPrD3OJDfTuJzFs1MK6iFnDenaz1fqLLtX4ITG3OktJQXOeTaw1awrBAlZPw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.33.0.tgz",
+      "integrity": "sha512-1K+MPfLSFVpphzpdbfkhlWk6wBrTObBzS2T6db10PNOZgR9GoVsAWzwNyuhUYYbTp23j+4RrncfujZ4uAzXvwA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.33.0.tgz",
+      "integrity": "sha512-OlEICDx/Xl0FqSp4bry8zFnCvGpig3Gl4gCquvYwHuqJKEC1+n9NgDniFvqHGmMv1ZkqDJrDqKKSykTDX+ehuA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lucide-react": {
+      "version": "1.48.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-1.48.0.tgz",
+      "integrity": "sha512-R0CIKY/fXiC6y9xRBADgsK+VW2p/pcTJOMhLZf1T+uG+vJUvyUR02nGOgmIIC7MPkiNK4Ox8QDnbqF8rJYWPZQ==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/magic-string": {
+      "version": "0.30.21",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
+      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.5"
+      }
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.19",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.19.tgz",
+      "integrity": "sha512-Y2tUNy4ouw6tq5oDSKeQYGOyhkUBhNOcGV/02KC+6kd9eDGqdZd++mjMiIDilrBYvjEnCYvVtsuHCuP+okSfug==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/node-releases": {
+      "version": "2.0.57",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.57.tgz",
+      "integrity": "sha512-kQK9LGGFiHtrWiNhZtA7Qbw17AQz+dmsEKODRIVTXA9+e5MS/2gZEBhYJt13GrAz5/IOZKddH/0Z3TP/Zgo+yw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/oxlint": {
+      "version": "1.85.0",
+      "resolved": "https://registry.npmjs.org/oxlint/-/oxlint-1.85.0.tgz",
+      "integrity": "sha512-bc26s97nuvPj1ViyPsqmKecVkUWFMEdtayO8MaQ6oiLfs1pj94cQlZZhrh4BPNlr9HQosjhIlwgZKsfcwmcNgg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "oxlint": "bin/oxlint"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/oxc-project"
+      },
+      "optionalDependencies": {
+        "@oxlint/binding-android-arm-eabi": "1.85.0",
+        "@oxlint/binding-android-arm64": "1.85.0",
+        "@oxlint/binding-darwin-arm64": "1.85.0",
+        "@oxlint/binding-darwin-x64": "1.85.0",
+        "@oxlint/binding-freebsd-x64": "1.85.0",
+        "@oxlint/binding-linux-arm-gnueabihf": "1.85.0",
+        "@oxlint/binding-linux-arm-musleabihf": "1.85.0",
+        "@oxlint/binding-linux-arm64-gnu": "1.85.0",
+        "@oxlint/binding-linux-arm64-musl": "1.85.0",
+        "@oxlint/binding-linux-ppc64-gnu": "1.85.0",
+        "@oxlint/binding-linux-riscv64-gnu": "1.85.0",
+        "@oxlint/binding-linux-riscv64-musl": "1.85.0",
+        "@oxlint/binding-linux-s390x-gnu": "1.85.0",
+        "@oxlint/binding-linux-x64-gnu": "1.85.0",
+        "@oxlint/binding-linux-x64-musl": "1.85.0",
+        "@oxlint/binding-openharmony-arm64": "1.85.0",
+        "@oxlint/binding-win32-arm64-msvc": "1.85.0",
+        "@oxlint/binding-win32-ia32-msvc": "1.85.0",
+        "@oxlint/binding-win32-x64-msvc": "1.85.0"
+      },
+      "peerDependencies": {
+        "oxlint-tsgolint": ">=7.0.2001",
+        "vite-plus": "*"
+      },
+      "peerDependenciesMeta": {
+        "oxlint-tsgolint": {
+          "optional": true
+        },
+        "vite-plus": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.7.tgz",
+      "integrity": "sha512-qcJu88Q2IWqJsDD529JKMdwGm/dvInW4HvQnRwiH9JtihJvzGOscDtHE3x1pBKeUOTysQ8kVmLnJ2kJu7yhcGA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.5.28",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.28.tgz",
+      "integrity": "sha512-RRuzqDtt5Y9h3quz5hWhK+TPnsmVs6WwSU6LkJMeY4HstUEDuYTG8UJSdawMRzmzAtV+KEoG8N3Qg2qLy5vM/A==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.18",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/postcss-value-parser": {
+      "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/qrcode.react": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/qrcode.react/-/qrcode.react-4.2.0.tgz",
+      "integrity": "sha512-QpgqWi8rD9DsS9EP3z7BT+5lY5SFhsqGjpgW5DY/i3mK4M9DTBNz3ErMi8BWYEfI3L0d8GIbGmcdFAS1uIRGjA==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/react": {
+      "version": "19.3.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.3.0.tgz",
+      "integrity": "sha512-E8LUcbtBWt20bbl2YoHfx4ZDBdxVTfOKtCZn9cDSJ4l6/nuoApcpIBcj47t2wZoVX8g2ZHuMHbiShgCR1T5Sog==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "19.3.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.3.0.tgz",
+      "integrity": "sha512-JDk8dgif51OjFoDE70+OT9ICyYr+69HlmihNwp1+Nsfbna3t5sIiCa9ZJktDmQ4/1b/rn26hIAR2uYXDMr5r0Q==",
+      "license": "MIT",
+      "dependencies": {
+        "scheduler": "^0.28.0"
+      },
+      "peerDependencies": {
+        "react": "^19.3.0"
+      }
+    },
+    "node_modules/react-is": {
+      "version": "19.3.0",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.3.0.tgz",
+      "integrity": "sha512-UpMYezM4v5/18F28aC66AEsjXIgE02kyEMH6yLdgLXu/UTfa1Ntwck/nNLrbqJsEXW7gPb0coNO9FQse9WTovA==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/react-redux": {
+      "version": "9.3.0",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.3.0.tgz",
+      "integrity": "sha512-KQopgqFo/p/fgmAs5qz6p5RWaNAzq40WAu7fJIXnQpYxFPbJYtsJPWvGeF2rOBaY/kEuV77AVsX8TsQzKm+A/g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/use-sync-external-store": "^0.0.6",
+        "use-sync-external-store": "^1.4.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^18.2.25 || ^19",
+        "react": "^18.0 || ^19",
+        "redux": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "redux": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/recharts": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/recharts/-/recharts-3.10.1.tgz",
+      "integrity": "sha512-QXFrvt6IVcw7eeZCoyXTwkIJAX3Dv1nyVhMicXJ47GsGDDpcN8z6o644DibE9XjpBTThtsomLKnTV6lc+cVFUA==",
+      "license": "MIT",
+      "workspaces": [
+        "www"
+      ],
+      "dependencies": {
+        "@reduxjs/toolkit": "^1.9.0 || 2.x.x",
+        "clsx": "^2.1.1",
+        "decimal.js-light": "^2.5.1",
+        "es-toolkit": "^1.39.3",
+        "eventemitter3": "^5.0.1",
+        "immer": "^11.1.8",
+        "react-redux": "8.x.x || 9.x.x",
+        "reselect": "5.2.0",
+        "tiny-invariant": "^1.3.3",
+        "use-sync-external-store": "^1.2.2",
+        "victory-vendor": "^37.0.2"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-is": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/redux": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
+      "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
+      "license": "MIT"
+    },
+    "node_modules/redux-thunk": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz",
+      "integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "redux": "^5.0.0"
+      }
+    },
+    "node_modules/reselect": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.2.0.tgz",
+      "integrity": "sha512-AgZ3UOZm3YndfrJ4OYjgrT7bmCm/1iqkjvEfH/oYjzh6PD2qw4QuT3jjnXIrpdt4MTpMXclMT3lXbmRY+XRakw==",
+      "license": "MIT"
+    },
+    "node_modules/rolldown": {
+      "version": "1.2.11",
+      "resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.2.11.tgz",
+      "integrity": "sha512-qpSwIyz0jHQq5qXBTNxFmE6664rJ7O+4TvPFOiOaBSrz8IOHc1koKKSqTM2H6u1UG1+TveuC6vaDHKXFOvb1Kw==",
+      "license": "MIT",
+      "dependencies": {
+        "@oxc-project/types": "=0.151.0",
+        "@rolldown/pluginutils": "^1.0.0"
+      },
+      "bin": {
+        "rolldown": "bin/cli.mjs"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "optionalDependencies": {
+        "@rolldown/binding-android-arm-eabi": "1.2.11",
+        "@rolldown/binding-android-arm64": "1.2.11",
+        "@rolldown/binding-darwin-arm64": "1.2.11",
+        "@rolldown/binding-darwin-x64": "1.2.11",
+        "@rolldown/binding-freebsd-x64": "1.2.11",
+        "@rolldown/binding-linux-arm-gnueabihf": "1.2.11",
+        "@rolldown/binding-linux-arm64-gnu": "1.2.11",
+        "@rolldown/binding-linux-arm64-musl": "1.2.11",
+        "@rolldown/binding-linux-ppc64-gnu": "1.2.11",
+        "@rolldown/binding-linux-s390x-gnu": "1.2.11",
+        "@rolldown/binding-linux-x64-gnu": "1.2.11",
+        "@rolldown/binding-linux-x64-musl": "1.2.11",
+        "@rolldown/binding-openharmony-arm64": "1.2.11",
+        "@rolldown/binding-win32-arm64-msvc": "1.2.11",
+        "@rolldown/binding-win32-x64-msvc": "1.2.11"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.28.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.28.0.tgz",
+      "integrity": "sha512-juorfCmIkIw8tT+p5BXSm6PJjQF/ycEYmKyzURCIt/RaZIhL+PulbQ9Yu2z1HdOJDdqDTlxA1+xKBmHXJsczAw==",
+      "license": "MIT"
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/tailwind-merge": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.7.0.tgz",
+      "integrity": "sha512-XPPUyAc+cvspz3lHTcR/QgPfW2A0lv/xQNIjX3HGhLR+Nq2lHaLq5MtTesHn8GUr3W3DguT2KT5x3NVgRtYwmA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
+    "node_modules/tailwindcss": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.3.3.tgz",
+      "integrity": "sha512-gOhV3P7ufE62QDGg1zVaTgCR+EtPv92k2nIhVcVKcLmxT1sUBsQGhnZj175j+MqRt4zLF7ic+sCYjfhxMxj7YQ==",
+      "license": "MIT"
+    },
+    "node_modules/tapable": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.3.tgz",
+      "integrity": "sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
+    "node_modules/tiny-invariant": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
+      "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
+      "license": "MIT"
+    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.17",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz",
+      "integrity": "sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==",
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/typescript": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-6.0.3.tgz",
+      "integrity": "sha512-y2TvuxSZPDyQakkFRPZHKFm+KKVqIisdg9/CZwm9ftvKXLP8NRWj38/ODjNbr43SsoXqNuAisEf1GdCxqWcdBw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "7.24.6",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.24.6.tgz",
+      "integrity": "sha512-WRNW+sJgj5OBN4/0JpHFqtqzhpbnV0GuB+OozA9gCL7a993SmU+1JBZCzLNxYsbMfIeDL+lTsphD5jN5N+n0zg==",
+      "license": "MIT"
+    },
+    "node_modules/update-browserslist-db": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.3.3.tgz",
+      "integrity": "sha512-pJ2sYawQS0R/WI928Gj5GlPhTGzbMelq0+4INtSYNDV9ErKJcX6xjGWkoG/VnB3dpUm00zALaqkrUD77pO5TDQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "escalade": "^3.2.0",
+        "picocolors": "^1.1.1"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
+    "node_modules/use-sync-external-store": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.7.0.tgz",
+      "integrity": "sha512-6L+EeigHMQhdaIPNIFUKwfWJSwWFQ8gJbJ2DLOs5sDIegTwR9fRxvnM3uciHKjIZhFz+KAv2emhWMRvDmMcY8A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/victory-vendor": {
+      "version": "37.3.6",
+      "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-37.3.6.tgz",
+      "integrity": "sha512-SbPDPdDBYp+5MJHhBCAyI7wKM3d5ivekigc2Dk2s7pgbZ9wIgIBYGVw4zGHBml/qTFbexrofXW6Gu4noGxrOwQ==",
+      "license": "MIT AND ISC",
+      "dependencies": {
+        "@types/d3-array": "^3.0.3",
+        "@types/d3-ease": "^3.0.0",
+        "@types/d3-interpolate": "^3.0.1",
+        "@types/d3-scale": "^4.0.2",
+        "@types/d3-shape": "^3.1.0",
+        "@types/d3-time": "^3.0.0",
+        "@types/d3-timer": "^3.0.0",
+        "d3-array": "^3.1.6",
+        "d3-ease": "^3.0.1",
+        "d3-interpolate": "^3.0.1",
+        "d3-scale": "^4.0.2",
+        "d3-shape": "^3.1.0",
+        "d3-time": "^3.0.0",
+        "d3-timer": "^3.0.1"
+      }
+    },
+    "node_modules/vite": {
+      "version": "8.3.1",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-8.3.1.tgz",
+      "integrity": "sha512-/bvH9E9tmCXRGp2uXY3WbOldqpTwFkbha/8ANaEQ6VkxhH60KyqLwgZq6lG2y+4uT55x9+9eUHMpQ7uGnOCKjA==",
+      "license": "MIT",
+      "dependencies": {
+        "lightningcss": "^1.33.0",
+        "picomatch": "^4.0.7",
+        "postcss": "^8.5.28",
+        "rolldown": "~1.2.9",
+        "tinyglobby": "^0.2.17"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^20.19.0 || >=22.12.0",
+        "@vitejs/devtools": "^0.7.1",
+        "esbuild": "^0.27.0 || ^0.28.0",
+        "jiti": ">=1.21.0",
+        "less": "^4.0.0",
+        "sass": "^1.70.0",
+        "sass-embedded": "^1.70.0",
+        "stylus": ">=0.54.8",
+        "sugarss": "^5.0.0",
+        "terser": "^5.16.0",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "@vitejs/devtools": {
+          "optional": true
+        },
+        "esbuild": {
+          "optional": true
+        },
+        "jiti": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..70693ed
--- /dev/null
+++ b/package.json
@@ -0,0 +1,37 @@
+{
+  "name": "uwufinances",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "oxlint",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@tailwindcss/vite": "^4.3.3",
+    "@types/qrcode": "^1.5.6",
+    "canvas-confetti": "^1.9.4",
+    "clsx": "^2.1.1",
+    "lucide-react": "^1.48.0",
+    "qrcode.react": "^4.2.0",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "recharts": "^3.10.1",
+    "tailwind-merge": "^3.7.0"
+  },
+  "devDependencies": {
+    "@types/canvas-confetti": "^1.9.0",
+    "@types/node": "^24.13.3",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.7",
+    "@vitejs/plugin-react": "^6.1.1",
+    "autoprefixer": "^10.6.1",
+    "oxlint": "^1.81.0",
+    "postcss": "^8.5.28",
+    "tailwindcss": "^4.3.3",
+    "typescript": "~6.0.2",
+    "vite": "^8.3.0"
+  }
+}
diff --git a/public/favicon.svg b/public/favicon.svg
new file mode 100644
index 0000000..6893eb1
--- /dev/null
+++ b/public/favicon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="46" fill="none" viewBox="0 0 48 46"><path fill="#863bff" d="M25.946 44.938c-.664.845-2.021.375-2.021-.698V33.937a2.26 2.26 0 0 0-2.262-2.262H10.287c-.92 0-1.456-1.04-.92-1.788l7.48-10.471c1.07-1.497 0-3.578-1.842-3.578H1.237c-.92 0-1.456-1.04-.92-1.788L10.013.474c.214-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.471c-1.07 1.498 0 3.579 1.842 3.579h11.377c.943 0 1.473 1.088.89 1.83L25.947 44.94z" style="fill:#863bff;fill:color(display-p3 .5252 .23 1);fill-opacity:1"/><mask id="a" width="48" height="46" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#000" d="M25.842 44.938c-.664.844-2.021.375-2.021-.698V33.937a2.26 2.26 0 0 0-2.262-2.262H10.183c-.92 0-1.456-1.04-.92-1.788l7.48-10.471c1.07-1.498 0-3.579-1.842-3.579H1.133c-.92 0-1.456-1.04-.92-1.787L9.91.473c.214-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.471c-1.07 1.498 0 3.578 1.842 3.578h11.377c.943 0 1.473 1.088.89 1.832L25.843 44.94z" style="fill:#000;fill-opacity:1"/></mask><g mask="url(#a)"><g filter="url(#b)"><ellipse cx="5.508" cy="14.704" fill="#ede6ff" rx="5.508" ry="14.704" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -4.47 31.516)"/></g><g filter="url(#c)"><ellipse cx="10.399" cy="29.851" fill="#ede6ff" rx="10.399" ry="29.851" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -39.328 7.883)"/></g><g filter="url(#d)"><ellipse cx="5.508" cy="30.487" fill="#7e14ff" rx="5.508" ry="30.487" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.814 -25.913 -14.639)scale(1 -1)"/></g><g filter="url(#e)"><ellipse cx="5.508" cy="30.599" fill="#7e14ff" rx="5.508" ry="30.599" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.814 -32.644 -3.334)scale(1 -1)"/></g><g filter="url(#f)"><ellipse cx="5.508" cy="30.599" fill="#7e14ff" rx="5.508" ry="30.599" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -34.34 30.47)"/></g><g filter="url(#g)"><ellipse cx="14.072" cy="22.078" fill="#ede6ff" rx="14.072" ry="22.078" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="rotate(93.35 24.506 48.493)scale(-1 1)"/></g><g filter="url(#h)"><ellipse cx="3.47" cy="21.501" fill="#7e14ff" rx="3.47" ry="21.501" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.009 28.708 47.59)scale(-1 1)"/></g><g filter="url(#i)"><ellipse cx="3.47" cy="21.501" fill="#7e14ff" rx="3.47" ry="21.501" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.009 28.708 47.59)scale(-1 1)"/></g><g filter="url(#j)"><ellipse cx=".387" cy="8.972" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(39.51 .387 8.972)"/></g><g filter="url(#k)"><ellipse cx="47.523" cy="-6.092" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 47.523 -6.092)"/></g><g filter="url(#l)"><ellipse cx="41.412" cy="6.333" fill="#47bfff" rx="5.971" ry="9.665" style="fill:#47bfff;fill:color(display-p3 .2799 .748 1);fill-opacity:1" transform="rotate(37.892 41.412 6.333)"/></g><g filter="url(#m)"><ellipse cx="-1.879" cy="38.332" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 -1.88 38.332)"/></g><g filter="url(#n)"><ellipse cx="-1.879" cy="38.332" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 -1.88 38.332)"/></g><g filter="url(#o)"><ellipse cx="35.651" cy="29.907" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 35.651 29.907)"/></g><g filter="url(#p)"><ellipse cx="38.418" cy="32.4" fill="#47bfff" rx="5.971" ry="15.297" style="fill:#47bfff;fill:color(display-p3 .2799 .748 1);fill-opacity:1" transform="rotate(37.892 38.418 32.4)"/></g></g><defs><filter id="b" width="60.045" height="41.654" x="-19.77" y="16.149" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="c" width="90.34" height="51.437" x="-54.613" y="-7.533" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="d" width="79.355" height="29.4" x="-49.64" y="2.03" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="e" width="79.579" height="29.4" x="-45.045" y="20.029" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="f" width="79.579" height="29.4" x="-43.513" y="21.178" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="g" width="74.749" height="58.852" x="15.756" y="-17.901" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="h" width="61.377" height="25.362" x="23.548" y="2.284" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="i" width="61.377" height="25.362" x="23.548" y="2.284" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="j" width="56.045" height="63.649" x="-27.636" y="-22.853" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="k" width="54.814" height="64.646" x="20.116" y="-38.415" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="l" width="33.541" height="35.313" x="24.641" y="-11.323" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="m" width="54.814" height="64.646" x="-29.286" y="6.009" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="n" width="54.814" height="64.646" x="-29.286" y="6.009" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="o" width="54.814" height="64.646" x="8.244" y="-2.416" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="p" width="39.409" height="43.623" x="18.713" y="10.588" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter></defs></svg>
\ No newline at end of file
diff --git a/public/icons.svg b/public/icons.svg
new file mode 100644
index 0000000..e952219
--- /dev/null
+++ b/public/icons.svg
@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <symbol id="bluesky-icon" viewBox="0 0 16 17">
+    <g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
+    <defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
+  </symbol>
+  <symbol id="discord-icon" viewBox="0 0 20 19">
+    <path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
+  </symbol>
+  <symbol id="documentation-icon" viewBox="0 0 21 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
+  </symbol>
+  <symbol id="github-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
+  </symbol>
+  <symbol id="social-icon" viewBox="0 0 20 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
+  </symbol>
+  <symbol id="x-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
+  </symbol>
+</svg>
diff --git a/src/App.css b/src/App.css
new file mode 100644
index 0000000..f90339d
--- /dev/null
+++ b/src/App.css
@@ -0,0 +1,184 @@
+.counter {
+  font-size: 16px;
+  padding: 5px 10px;
+  border-radius: 5px;
+  color: var(--accent);
+  background: var(--accent-bg);
+  border: 2px solid transparent;
+  transition: border-color 0.3s;
+  margin-bottom: 24px;
+
+  &:hover {
+    border-color: var(--accent-border);
+  }
+  &:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 2px;
+  }
+}
+
+.hero {
+  position: relative;
+
+  .base,
+  .framework,
+  .vite {
+    inset-inline: 0;
+    margin: 0 auto;
+  }
+
+  .base {
+    width: 170px;
+    position: relative;
+    z-index: 0;
+  }
+
+  .framework,
+  .vite {
+    position: absolute;
+  }
+
+  .framework {
+    z-index: 1;
+    top: 34px;
+    height: 28px;
+    transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
+      scale(1.4);
+  }
+
+  .vite {
+    z-index: 0;
+    top: 107px;
+    height: 26px;
+    width: auto;
+    transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
+      scale(0.8);
+  }
+}
+
+#center {
+  display: flex;
+  flex-direction: column;
+  gap: 25px;
+  place-content: center;
+  place-items: center;
+  flex-grow: 1;
+
+  @media (max-width: 1024px) {
+    padding: 32px 20px 24px;
+    gap: 18px;
+  }
+}
+
+#next-steps {
+  display: flex;
+  border-top: 1px solid var(--border);
+  text-align: left;
+
+  & > div {
+    flex: 1 1 0;
+    padding: 32px;
+    @media (max-width: 1024px) {
+      padding: 24px 20px;
+    }
+  }
+
+  .icon {
+    margin-bottom: 16px;
+    width: 22px;
+    height: 22px;
+  }
+
+  @media (max-width: 1024px) {
+    flex-direction: column;
+    text-align: center;
+  }
+}
+
+#docs {
+  border-right: 1px solid var(--border);
+
+  @media (max-width: 1024px) {
+    border-right: none;
+    border-bottom: 1px solid var(--border);
+  }
+}
+
+#next-steps ul {
+  list-style: none;
+  padding: 0;
+  display: flex;
+  gap: 8px;
+  margin: 32px 0 0;
+
+  .logo {
+    height: 18px;
+  }
+
+  a {
+    color: var(--text-h);
+    font-size: 16px;
+    border-radius: 6px;
+    background: var(--social-bg);
+    display: flex;
+    padding: 6px 12px;
+    align-items: center;
+    gap: 8px;
+    text-decoration: none;
+    transition: box-shadow 0.3s;
+
+    &:hover {
+      box-shadow: var(--shadow);
+    }
+    .button-icon {
+      height: 18px;
+      width: 18px;
+    }
+  }
+
+  @media (max-width: 1024px) {
+    margin-top: 20px;
+    flex-wrap: wrap;
+    justify-content: center;
+
+    li {
+      flex: 1 1 calc(50% - 8px);
+    }
+
+    a {
+      width: 100%;
+      justify-content: center;
+      box-sizing: border-box;
+    }
+  }
+}
+
+#spacer {
+  height: 88px;
+  border-top: 1px solid var(--border);
+  @media (max-width: 1024px) {
+    height: 48px;
+  }
+}
+
+.ticks {
+  position: relative;
+  width: 100%;
+
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    top: -4.5px;
+    border: 5px solid transparent;
+  }
+
+  &::before {
+    left: 0;
+    border-left-color: var(--border);
+  }
+  &::after {
+    right: 0;
+    border-right-color: var(--border);
+  }
+}
diff --git a/src/App.tsx b/src/App.tsx
new file mode 100644
index 0000000..48627bf
--- /dev/null
+++ b/src/App.tsx
@@ -0,0 +1,110 @@
+import React from 'react';
+import { AppProvider, useApp } from './context/AppContext';
+import { Sidebar } from './components/common/Sidebar';
+import { TopHeader } from './components/common/TopHeader';
+import { ToastContainer } from './components/common/ToastContainer';
+import { DashboardView } from './components/dashboard/DashboardView';
+import { PurchasesView } from './components/inventory/PurchasesView';
+import { ProjectsView } from './components/projects/ProjectsView';
+import { TimeTrackerView } from './components/timetracker/TimeTrackerView';
+import { AnalyticsView } from './components/analytics/AnalyticsView';
+import { ModsLibraryView } from './components/mods/ModsLibraryView';
+import { SettingsView } from './components/settings/SettingsView';
+import { ProjectModal } from './components/projects/ProjectModal';
+import { InventoryModal } from './components/inventory/InventoryModal';
+import { AuthModal } from './components/auth/AuthModal';
+import { LoginGate } from './components/auth/LoginGate';
+
+const MainContent: React.FC = () => {
+  const {
+    currentTab,
+    showNewProjectModal,
+    setShowNewProjectModal,
+    showNewInventoryModal,
+    setShowNewInventoryModal,
+    showAuthModal,
+    setShowAuthModal,
+  } = useApp();
+
+  return (
+    <main className="p-4 sm:p-6 lg:p-8 max-w-[1600px] mx-auto w-full">
+      {currentTab === 'dashboard' && <DashboardView />}
+      {currentTab === 'purchases' && <PurchasesView />}
+      {currentTab === 'projects' && <ProjectsView />}
+      {currentTab === 'mods' && <ModsLibraryView />}
+      {currentTab === 'timetracker' && <TimeTrackerView />}
+      {currentTab === 'analytics' && <AnalyticsView />}
+      {currentTab === 'settings' && <SettingsView />}
+
+      {/* Global Modals: Accessible from Sidebar, TopHeader, Dashboard & all tabs */}
+      <ProjectModal
+        isOpen={showNewProjectModal}
+        onClose={() => setShowNewProjectModal(false)}
+      />
+      <InventoryModal
+        isOpen={showNewInventoryModal}
+        onClose={() => setShowNewInventoryModal(false)}
+      />
+      <AuthModal
+        isOpen={showAuthModal}
+        onClose={() => setShowAuthModal(false)}
+      />
+    </main>
+  );
+};
+
+const AppLayout: React.FC = () => {
+  const { settings, authSession } = useApp();
+  const activeTheme = settings?.theme || 'uwu-pink';
+
+  // Full site lock: If user is not logged in, display the LoginGate screen
+  if (!authSession?.isAuthenticated) {
+    return (
+      <div className={`min-h-screen theme-root-container text-slate-100 theme-${activeTheme}`} data-theme={activeTheme}>
+        <LoginGate />
+        <ToastContainer />
+      </div>
+    );
+  }
+
+  return (
+    <div className={`min-h-screen theme-root-container text-slate-100 flex flex-col lg:flex-row theme-${activeTheme}`} data-theme={activeTheme}>
+      {/* Left Sidebar Navigation */}
+      <Sidebar />
+
+      {/* Main Content Area (Offset on desktop for fixed left sidebar) */}
+      <div className="flex-1 lg:pl-72 flex flex-col min-w-0 transition-all duration-300">
+        <TopHeader />
+        <div className="flex-1">
+          <MainContent />
+        </div>
+
+        {/* Discreet Footer */}
+        <footer className="border-t border-slate-800/80 py-5 mt-12 text-center text-xs text-slate-500 no-print px-4">
+          <div className="max-w-7xl mx-auto flex flex-col sm:flex-row items-center justify-between gap-2">
+            <div>
+              <span className="font-bold text-slate-400">uwuFinances</span> • Gestionnaire Financier & Atelier Console Modding
+            </div>
+            <div className="font-mono text-[11px] text-slate-600">
+              Données sécurisées • {settings.businessName || 'Atelier Console Modding'} • v1.2 Pro
+            </div>
+          </div>
+        </footer>
+      </div>
+
+      <ToastContainer />
+    </div>
+  );
+};
+
+export function App() {
+  return (
+    <AppProvider>
+      <AppLayout />
+    </AppProvider>
+  );
+}
+
+export default App;
+
+
diff --git a/src/assets/hero.png b/src/assets/hero.png
new file mode 100644
index 0000000..02251f4
Binary files /dev/null and b/src/assets/hero.png differ
diff --git a/src/assets/react.svg b/src/assets/react.svg
new file mode 100644
index 0000000..6c87de9
--- /dev/null
+++ b/src/assets/react.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
\ No newline at end of file
diff --git a/src/assets/vite.svg b/src/assets/vite.svg
new file mode 100644
index 0000000..5101b67
--- /dev/null
+++ b/src/assets/vite.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="77" height="47" fill="none" aria-labelledby="vite-logo-title" viewBox="0 0 77 47"><title id="vite-logo-title">Vite</title><style>.parenthesis{fill:#000}@media (prefers-color-scheme:dark){.parenthesis{fill:#fff}}</style><path fill="#9135ff" d="M40.151 45.71c-.663.844-2.02.374-2.02-.699V34.708a2.26 2.26 0 0 0-2.262-2.262H24.493c-.92 0-1.457-1.04-.92-1.788l7.479-10.471c1.07-1.498 0-3.578-1.842-3.578H15.443c-.92 0-1.456-1.04-.92-1.788l9.696-13.576c.213-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.472c-1.07 1.497 0 3.578 1.842 3.578h11.376c.944 0 1.474 1.087.89 1.83L40.153 45.712z"/><mask id="a" width="48" height="47" x="14" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#000" d="M40.047 45.71c-.663.843-2.02.374-2.02-.699V34.708a2.26 2.26 0 0 0-2.262-2.262H24.389c-.92 0-1.457-1.04-.92-1.788l7.479-10.472c1.07-1.497 0-3.578-1.842-3.578H15.34c-.92 0-1.456-1.04-.92-1.788l9.696-13.575c.213-.297.556-.474.92-.474H53.93c.92 0 1.456 1.04.92 1.788L47.37 13.03c-1.07 1.498 0 3.578 1.842 3.578h11.376c.944 0 1.474 1.088.89 1.831L40.049 45.712z"/></mask><g mask="url(#a)"><g filter="url(#b)"><ellipse cx="5.508" cy="14.704" fill="#eee6ff" rx="5.508" ry="14.704" transform="rotate(269.814 20.96 11.29)scale(-1 1)"/></g><g filter="url(#c)"><ellipse cx="10.399" cy="29.851" fill="#eee6ff" rx="10.399" ry="29.851" transform="rotate(89.814 -16.902 -8.275)scale(1 -1)"/></g><g filter="url(#d)"><ellipse cx="5.508" cy="30.487" fill="#8900ff" rx="5.508" ry="30.487" transform="rotate(89.814 -19.197 -7.127)scale(1 -1)"/></g><g filter="url(#e)"><ellipse cx="5.508" cy="30.599" fill="#8900ff" rx="5.508" ry="30.599" transform="rotate(89.814 -25.928 4.177)scale(1 -1)"/></g><g filter="url(#f)"><ellipse cx="5.508" cy="30.599" fill="#8900ff" rx="5.508" ry="30.599" transform="rotate(89.814 -25.738 5.52)scale(1 -1)"/></g><g filter="url(#g)"><ellipse cx="14.072" cy="22.078" fill="#eee6ff" rx="14.072" ry="22.078" transform="rotate(93.35 31.245 55.578)scale(-1 1)"/></g><g filter="url(#h)"><ellipse cx="3.47" cy="21.501" fill="#8900ff" rx="3.47" ry="21.501" transform="rotate(89.009 35.419 55.202)scale(-1 1)"/></g><g filter="url(#i)"><ellipse cx="3.47" cy="21.501" fill="#8900ff" rx="3.47" ry="21.501" transform="rotate(89.009 35.419 55.202)scale(-1 1)"/></g><g filter="url(#j)"><ellipse cx="14.592" cy="9.743" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(39.51 14.592 9.743)"/></g><g filter="url(#k)"><ellipse cx="61.728" cy="-5.321" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 61.728 -5.32)"/></g><g filter="url(#l)"><ellipse cx="55.618" cy="7.104" fill="#00c2ff" rx="5.971" ry="9.665" transform="rotate(37.892 55.618 7.104)"/></g><g filter="url(#m)"><ellipse cx="12.326" cy="39.103" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 12.326 39.103)"/></g><g filter="url(#n)"><ellipse cx="12.326" cy="39.103" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 12.326 39.103)"/></g><g filter="url(#o)"><ellipse cx="49.857" cy="30.678" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 49.857 30.678)"/></g><g filter="url(#p)"><ellipse cx="52.623" cy="33.171" fill="#00c2ff" rx="5.971" ry="15.297" transform="rotate(37.892 52.623 33.17)"/></g></g><path d="M6.919 0c-9.198 13.166-9.252 33.575 0 46.789h6.215c-9.25-13.214-9.196-33.623 0-46.789zm62.424 0h-6.215c9.198 13.166 9.252 33.575 0 46.789h6.215c9.25-13.214 9.196-33.623 0-46.789" class="parenthesis"/><defs><filter id="b" width="60.045" height="41.654" x="-5.564" y="16.92" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="7.659"/></filter><filter id="c" width="90.34" height="51.437" x="-40.407" y="-6.762" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="7.659"/></filter><filter id="d" width="79.355" height="29.4" x="-35.435" y="2.801" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="e" width="79.579" height="29.4" x="-30.84" y="20.8" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="f" width="79.579" height="29.4" x="-29.307" y="21.949" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="g" width="74.749" height="58.852" x="29.961" y="-17.13" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="7.659"/></filter><filter id="h" width="61.377" height="25.362" x="37.754" y="3.055" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="i" width="61.377" height="25.362" x="37.754" y="3.055" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="j" width="56.045" height="63.649" x="-13.43" y="-22.082" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="k" width="54.814" height="64.646" x="34.321" y="-37.644" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="l" width="33.541" height="35.313" x="38.847" y="-10.552" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="m" width="54.814" height="64.646" x="-15.081" y="6.78" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="n" width="54.814" height="64.646" x="-15.081" y="6.78" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="o" width="54.814" height="64.646" x="22.45" y="-1.645" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="p" width="39.409" height="43.623" x="32.919" y="11.36" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter></defs></svg>
diff --git a/src/components/analytics/AnalyticsView.tsx b/src/components/analytics/AnalyticsView.tsx
new file mode 100644
index 0000000..8f9022f
--- /dev/null
+++ b/src/components/analytics/AnalyticsView.tsx
@@ -0,0 +1,574 @@
+import React, { useState, useMemo } from 'react';
+import {
+  TrendingUp,
+  Calculator,
+  Clock,
+  Gamepad2,
+  Sliders,
+  BarChart2,
+} from 'lucide-react';
+import {
+  ResponsiveContainer,
+  LineChart,
+  Line,
+  Bar,
+  XAxis,
+  YAxis,
+  Tooltip,
+  ComposedChart,
+  ReferenceLine,
+} from 'recharts';
+import { useApp } from '../../context/AppContext';
+
+import {
+  calculateProjectFinancials,
+  formatCurrency,
+  formatMinutes,
+  getTaskTypeLabel,
+} from '../../utils/calculations';
+import type { TaskType } from '../../types';
+
+
+
+
+export const AnalyticsView: React.FC = () => {
+  const { projects, settings } = useApp();
+
+  // 1. Simulator Interactive State
+  const [simBaseConsoleCost, setSimBaseConsoleCost] = useState<number>(35);
+  const [simScreenCost, setSimScreenCost] = useState<number>(45);
+  const [simShellCost, setSimShellCost] = useState<number>(16);
+  const [simModsCost, setSimModsCost] = useState<number>(14); // USB-C, battery, etc.
+  const [simConsumablesCost, setSimConsumablesCost] = useState<number>(5);
+  const [simLaborHours, setSimLaborHours] = useState<number>(2.5);
+  const [simHourlyRate, setSimHourlyRate] = useState<number>(settings.defaultHourlyRate || 25);
+  const [simPlatformFeePercent, setSimPlatformFeePercent] = useState<number>(settings.defaultPlatformFeePercent || 0);
+  const [simSellingPrice, setSimSellingPrice] = useState<number>(185);
+
+  // Simulator Calculations
+  const simTotalHardwareCost = simBaseConsoleCost + simScreenCost + simShellCost + simModsCost + simConsumablesCost;
+  const simTotalLaborCost = simLaborHours * simHourlyRate;
+  const simPlatformFee = (simSellingPrice * simPlatformFeePercent) / 100;
+  const simTotalCOGS = simTotalHardwareCost + simTotalLaborCost + simPlatformFee;
+  const simGrossProfit = simSellingPrice - simTotalHardwareCost;
+  const simNetProfit = simSellingPrice - simTotalCOGS;
+  const simMarginPercent = simSellingPrice > 0 ? (simNetProfit / simSellingPrice) * 100 : 0;
+  const simEffectiveHourlyRate = simLaborHours > 0 ? (simSellingPrice - simTotalHardwareCost - simPlatformFee) / simLaborHours : 0;
+
+  // 2. Model Performance Statistics
+  const modelStats = useMemo(() => {
+    const stats: Record<string, {
+      totalBuilds: number;
+      soldBuilds: number;
+      totalRevenue: number;
+      totalHardwareCost: number;
+      totalLaborMinutes: number;
+      totalNetProfit: number;
+    }> = {};
+
+    projects.forEach((p) => {
+      if (!stats[p.consoleModel]) {
+        stats[p.consoleModel] = {
+          totalBuilds: 0,
+          soldBuilds: 0,
+          totalRevenue: 0,
+          totalHardwareCost: 0,
+          totalLaborMinutes: 0,
+          totalNetProfit: 0,
+        };
+      }
+      const fin = calculateProjectFinancials(p);
+      stats[p.consoleModel].totalBuilds += 1;
+      stats[p.consoleModel].totalHardwareCost += fin.hardwareDirectCost;
+      stats[p.consoleModel].totalLaborMinutes += fin.laborMinutes;
+
+      if (p.status === 'sold') {
+        stats[p.consoleModel].soldBuilds += 1;
+        stats[p.consoleModel].totalRevenue += fin.revenue;
+        stats[p.consoleModel].totalNetProfit += fin.netProfit;
+      }
+    });
+
+    return Object.entries(stats).map(([model, data]) => ({
+      model,
+      ...data,
+      avgLaborHours: data.totalBuilds > 0 ? (data.totalLaborMinutes / data.totalBuilds / 60) : 0,
+      marginPercent: data.totalRevenue > 0 ? (data.totalNetProfit / data.totalRevenue) * 100 : 0,
+    })).sort((a, b) => b.totalNetProfit - a.totalNetProfit);
+  }, [projects]);
+
+  // 3. Task Time Distribution
+  const taskDistribution = useMemo(() => {
+    const map: Record<string, number> = {};
+    projects.forEach((p) => {
+      p.timeSessions.forEach((s) => {
+        map[s.taskType] = (map[s.taskType] || 0) + s.durationMinutes;
+      });
+    });
+    const totalMinutes = Object.values(map).reduce((sum, m) => sum + m, 0);
+
+    return Object.entries(map).map(([taskType, minutes]) => ({
+      taskType: taskType as TaskType,
+      minutes,
+      percentage: totalMinutes > 0 ? (minutes / totalMinutes) * 100 : 0,
+    })).sort((a, b) => b.minutes - a.minutes);
+  }, [projects]);
+
+  return (
+    <div className="space-y-8 pb-12 animate-fadeIn">
+      
+      {/* Title */}
+      <div>
+        <div className="inline-flex items-center space-x-2 px-3 py-1 rounded-full text-xs font-semibold bg-emerald-500/10 text-emerald-400 border border-emerald-500/30 mb-2">
+          <TrendingUp className="w-3.5 h-3.5" />
+          <span>Analyses Financières & Rentabilité</span>
+        </div>
+        <h2 className="text-2xl sm:text-3xl font-black text-white font-display">
+          Statistiques de Marge & Simulateur de Prix
+        </h2>
+        <p className="text-slate-400 text-xs sm:text-sm">
+          Analysez la rentabilité par modèle de console et simulez vos prix de vente avant de lancer un build.
+        </p>
+      </div>
+
+      {/* Interactive Price & Margin Simulator */}
+      <div className="glass-panel p-6 sm:p-8 rounded-3xl border border-emerald-500/30 space-y-6">
+        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+          <div className="flex items-center space-x-3">
+            <div className="w-10 h-10 rounded-xl bg-emerald-500/10 border border-emerald-500/30 flex items-center justify-center text-emerald-400">
+              <Calculator className="w-5 h-5" />
+            </div>
+            <div>
+              <h3 className="text-lg font-bold text-white">
+                Simulateur de Prix de Vente & Marge Pro
+              </h3>
+              <p className="text-xs text-slate-400">
+                Ajustez les composants et le temps estimé pour trouver votre prix de vente optimal
+              </p>
+            </div>
+          </div>
+        </div>
+
+        {/* Sliders & Inputs Grid */}
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 pt-2">
+          
+          {/* Col 1: Hardware Costs Inputs */}
+          <div className="space-y-4 p-4 rounded-2xl bg-slate-950/80 border border-slate-800">
+            <h4 className="text-xs font-bold uppercase tracking-wider text-cyan-400 flex items-center space-x-1.5">
+              <Gamepad2 className="w-4 h-4" />
+              <span>Coûts Pièces Estimés</span>
+            </h4>
+
+            <div className="space-y-3 text-xs">
+              <div>
+                <div className="flex justify-between text-slate-300 mb-1">
+                  <span>Console Donneuse :</span>
+                  <span className="font-mono font-bold text-white">{simBaseConsoleCost} €</span>
+                </div>
+                <input
+                  type="range"
+                  min="0"
+                  max="120"
+                  step="5"
+                  value={simBaseConsoleCost}
+                  onChange={(e) => setSimBaseConsoleCost(Number(e.target.value))}
+                  className="w-full accent-cyan-400"
+                />
+              </div>
+
+              <div>
+                <div className="flex justify-between text-slate-300 mb-1">
+                  <span>Écran IPS / OLED :</span>
+                  <span className="font-mono font-bold text-white">{simScreenCost} €</span>
+                </div>
+                <input
+                  type="range"
+                  min="0"
+                  max="100"
+                  step="2"
+                  value={simScreenCost}
+                  onChange={(e) => setSimScreenCost(Number(e.target.value))}
+                  className="w-full accent-cyan-400"
+                />
+              </div>
+
+              <div>
+                <div className="flex justify-between text-slate-300 mb-1">
+                  <span>Coque & Boutons :</span>
+                  <span className="font-mono font-bold text-white">{simShellCost} €</span>
+                </div>
+                <input
+                  type="range"
+                  min="0"
+                  max="60"
+                  step="2"
+                  value={simShellCost}
+                  onChange={(e) => setSimShellCost(Number(e.target.value))}
+                  className="w-full accent-cyan-400"
+                />
+              </div>
+
+              <div>
+                <div className="flex justify-between text-slate-300 mb-1">
+                  <span>Mods USB-C / LiPo / Audio :</span>
+                  <span className="font-mono font-bold text-white">{simModsCost} €</span>
+                </div>
+                <input
+                  type="range"
+                  min="0"
+                  max="60"
+                  step="2"
+                  value={simModsCost}
+                  onChange={(e) => setSimModsCost(Number(e.target.value))}
+                  className="w-full accent-cyan-400"
+                />
+              </div>
+
+              <div>
+                <div className="flex justify-between text-slate-300 mb-1">
+                  <span>Consommables & Packaging :</span>
+                  <span className="font-mono font-bold text-white">{simConsumablesCost} €</span>
+                </div>
+                <input
+                  type="range"
+                  min="0"
+                  max="30"
+                  step="1"
+                  value={simConsumablesCost}
+                  onChange={(e) => setSimConsumablesCost(Number(e.target.value))}
+                  className="w-full accent-cyan-400"
+                />
+              </div>
+
+              <div className="pt-2 border-t border-slate-800 flex justify-between font-bold text-slate-200">
+                <span>Total Matériel :</span>
+                <span className="text-cyan-300 font-mono">{formatCurrency(simTotalHardwareCost, settings.currency)}</span>
+              </div>
+
+            </div>
+          </div>
+
+          {/* Col 2: Labor & Platform Settings */}
+          <div className="space-y-4 p-4 rounded-2xl bg-slate-950/80 border border-slate-800">
+            <h4 className="text-xs font-bold uppercase tracking-wider text-amber-400 flex items-center space-x-1.5">
+              <Clock className="w-4 h-4" />
+              <span>Temps & Main d'Œuvre</span>
+            </h4>
+
+            <div className="space-y-3 text-xs">
+              <div>
+                <div className="flex justify-between text-slate-300 mb-1">
+                  <span>Temps estimé sur établi :</span>
+                  <span className="font-mono font-bold text-amber-300">{simLaborHours} heures ({Math.round(simLaborHours * 60)} min)</span>
+                </div>
+                <input
+                  type="range"
+                  min="0.5"
+                  max="8"
+                  step="0.25"
+                  value={simLaborHours}
+                  onChange={(e) => setSimLaborHours(Number(e.target.value))}
+                  className="w-full accent-amber-400"
+                />
+              </div>
+
+              <div>
+                <div className="flex justify-between text-slate-300 mb-1">
+                  <span>Taux horaire souhaité :</span>
+                  <span className="font-mono font-bold text-white">{simHourlyRate} €/h</span>
+                </div>
+                <input
+                  type="range"
+                  min="10"
+                  max="60"
+                  step="5"
+                  value={simHourlyRate}
+                  onChange={(e) => setSimHourlyRate(Number(e.target.value))}
+                  className="w-full accent-amber-400"
+                />
+              </div>
+
+              <div>
+                <div className="flex justify-between text-slate-300 mb-1">
+                  <span>Commission Plateforme (% Etsy/Vinted) :</span>
+                  <span className="font-mono font-bold text-white">{simPlatformFeePercent}%</span>
+                </div>
+                <input
+                  type="range"
+                  min="0"
+                  max="15"
+                  step="1"
+                  value={simPlatformFeePercent}
+                  onChange={(e) => setSimPlatformFeePercent(Number(e.target.value))}
+                  className="w-full accent-purple-400"
+                />
+              </div>
+
+              <div className="pt-2 border-t border-slate-800 flex justify-between font-bold text-slate-200">
+                <span>Coût Total de Revient (COGS) :</span>
+                <span className="text-amber-300 font-mono">{formatCurrency(simTotalCOGS, settings.currency)}</span>
+              </div>
+            </div>
+          </div>
+
+          {/* Col 3: Selling Price Slider & Instant Profit Verdict */}
+          <div className="space-y-4 p-5 rounded-2xl bg-gradient-to-b from-slate-950 to-slate-900 border border-emerald-500/40 flex flex-col justify-between">
+            <div>
+              <div className="text-xs font-bold uppercase tracking-wider text-emerald-400 flex items-center space-x-1.5">
+                <Sliders className="w-4 h-4" />
+                <span>Prix de Vente Simulé</span>
+              </div>
+
+              <div className="mt-3">
+                <div className="flex justify-between items-baseline mb-2">
+                  <span className="text-xs text-slate-400">Prix public :</span>
+                  <span className="font-mono font-black text-3xl text-white">
+                    {formatCurrency(simSellingPrice, settings.currency)}
+                  </span>
+                </div>
+                <input
+                  type="range"
+                  min="60"
+                  max="350"
+                  step="5"
+                  value={simSellingPrice}
+                  onChange={(e) => setSimSellingPrice(Number(e.target.value))}
+                  className="w-full accent-emerald-400 h-2 bg-slate-800 rounded-lg cursor-pointer"
+                />
+              </div>
+            </div>
+
+            {/* Verdict Box */}
+            <div className="p-4 rounded-xl bg-slate-950/90 border border-emerald-500/30 space-y-2.5 text-xs">
+              <div className="flex justify-between">
+                <span className="text-slate-400">Marge Brute (hors temps) :</span>
+                <span className="font-mono font-bold text-white">
+                  {formatCurrency(simGrossProfit, settings.currency)}
+                </span>
+              </div>
+
+              <div className="flex justify-between">
+                <span className="text-slate-400">Bénéfice Net Réel :</span>
+                <span className={`font-mono font-bold text-base ${simNetProfit >= 0 ? 'text-emerald-400' : 'text-rose-400'}`}>
+                  {formatCurrency(simNetProfit, settings.currency)} ({simMarginPercent.toFixed(1)}%)
+                </span>
+              </div>
+
+              {/* Real-time Dynamic Break-Even & Profit Simulation Curve Chart */}
+              <div className="pt-2">
+                <div className="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-1 flex items-center justify-between">
+                  <span>Courbe de Rentabilité Simulée</span>
+                  <span className="text-emerald-400">Point vert : {simSellingPrice}€</span>
+                </div>
+                {(() => {
+                  const curveData = [];
+                  for (let p = 70; p <= 290; p += 20) {
+                    const fee = (p * simPlatformFeePercent) / 100;
+                    const cogs = simTotalHardwareCost + simTotalLaborCost + fee;
+                    const net = p - cogs;
+                    curveData.push({
+                      price: `${p}€`,
+                      rawPrice: p,
+                      'Bénéfice Net': Math.round(net),
+                    });
+                  }
+                  return (
+                    <div className="h-28 w-full">
+                      <ResponsiveContainer width="100%" height="100%">
+                        <LineChart data={curveData} margin={{ top: 5, right: 5, left: -25, bottom: 0 }}>
+                          <XAxis dataKey="price" stroke="#64748b" fontSize={9} tickLine={false} axisLine={{ stroke: '#334155' }} />
+                          <YAxis stroke="#64748b" fontSize={9} tickLine={false} axisLine={{ stroke: '#334155' }} />
+                          <Tooltip
+                            content={({ active, payload }) => {
+                              if (active && payload && payload.length) {
+                                const d = payload[0].payload;
+                                return (
+                                  <div className="bg-slate-900 border border-slate-700 p-2 rounded-xl text-[10px] font-mono shadow-xl">
+                                    <div className="text-slate-300">Prix : {d.price}</div>
+                                    <div className={d['Bénéfice Net'] >= 0 ? 'text-emerald-400 font-bold' : 'text-rose-400 font-bold'}>
+                                      Gain net : {d['Bénéfice Net']} €
+                                    </div>
+                                  </div>
+                                );
+                              }
+                              return null;
+                            }}
+                          />
+                          <ReferenceLine y={0} stroke="#f43f5e" strokeDasharray="3 3" />
+                          <Line type="monotone" dataKey="Bénéfice Net" stroke="#10b981" strokeWidth={2.5} dot={false} />
+                        </LineChart>
+                      </ResponsiveContainer>
+                    </div>
+                  );
+                })()}
+              </div>
+
+              <div className="pt-2 border-t border-slate-800 flex justify-between font-bold">
+                <span className="text-slate-300">Rémunération horaire effective :</span>
+                <span className="text-amber-300 font-mono text-sm">
+                  {formatCurrency(simEffectiveHourlyRate, settings.currency)}/h
+                </span>
+              </div>
+            </div>
+
+          </div>
+
+        </div>
+      </div>
+
+      {/* Model Performance Comparison Visual Chart & Table */}
+      <div className="space-y-4">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center space-x-2">
+            <Gamepad2 className="w-5 h-5 text-pink-400" />
+            <h3 className="text-lg font-bold text-white">
+              Performance & Rentabilité par Modèle de Console
+            </h3>
+          </div>
+        </div>
+
+        {/* Visual Composed Chart: Revenue, Hardware Costs & Net Profit by Model */}
+        <div className="glass-panel p-5 rounded-3xl border border-slate-800 space-y-3">
+          <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2">
+            <div>
+              <h4 className="text-xs font-bold uppercase tracking-wider text-slate-400 flex items-center space-x-1.5">
+                <BarChart2 className="w-4 h-4 text-emerald-400" />
+                <span>Comparatif Chiffre d'Affaires & Bénéfices par Modèle</span>
+              </h4>
+            </div>
+            <div className="flex items-center space-x-3 text-xs font-mono">
+              <span className="flex items-center text-pink-400">
+                <span className="w-2.5 h-2.5 rounded-full bg-pink-500 mr-1.5" /> CA Total
+              </span>
+              <span className="flex items-center text-cyan-400">
+                <span className="w-2.5 h-2.5 rounded-full bg-cyan-500 mr-1.5" /> Coût Matériel
+              </span>
+              <span className="flex items-center text-emerald-400">
+                <span className="w-2.5 h-2.5 rounded-full bg-emerald-500 mr-1.5" /> Bénéfice Net
+              </span>
+            </div>
+          </div>
+
+          <div className="h-56 w-full pt-1">
+            <ResponsiveContainer width="100%" height="100%">
+              <ComposedChart
+                data={modelStats.map((s) => ({
+                  model: s.model,
+                  'Chiffre d\'Affaires': s.totalRevenue,
+                  'Coût Pièces': s.totalHardwareCost,
+                  'Bénéfice Net': s.totalNetProfit,
+                  marge: s.marginPercent,
+                }))}
+                margin={{ top: 10, right: 10, left: -20, bottom: 0 }}
+              >
+                <XAxis dataKey="model" stroke="#64748b" fontSize={11} tickLine={false} axisLine={{ stroke: '#334155' }} />
+                <YAxis stroke="#64748b" fontSize={11} tickLine={false} axisLine={{ stroke: '#334155' }} tickFormatter={(v) => `${v}€`} />
+                <Tooltip
+                  content={({ active, payload }) => {
+                    if (active && payload && payload.length) {
+                      const d = payload[0].payload;
+                      return (
+                        <div className="bg-slate-900 border border-slate-700 p-3 rounded-2xl shadow-xl text-xs space-y-1 font-mono">
+                          <div className="font-bold text-white font-sans text-xs pb-1 border-b border-slate-800">{d.model}</div>
+                          <div className="text-pink-400">💰 CA : {formatCurrency(d['Chiffre d\'Affaires'], settings.currency)}</div>
+                          <div className="text-cyan-300">📦 Coût Pièces : {formatCurrency(d['Coût Pièces'], settings.currency)}</div>
+                          <div className="text-emerald-400 font-bold pt-1 border-t border-slate-800">
+                            ✨ Bénéfice Net : {formatCurrency(d['Bénéfice Net'], settings.currency)} ({d.marge.toFixed(1)}%)
+                          </div>
+                        </div>
+                      );
+                    }
+                    return null;
+                  }}
+                />
+                <Bar dataKey="Chiffre d'Affaires" fill="#ec4899" radius={[4, 4, 0, 0]} />
+                <Bar dataKey="Coût Pièces" fill="#06b6d4" radius={[4, 4, 0, 0]} />
+                <Line type="monotone" dataKey="Bénéfice Net" stroke="#10b981" strokeWidth={3} dot={{ r: 4, fill: '#10b981' }} />
+              </ComposedChart>
+            </ResponsiveContainer>
+          </div>
+        </div>
+
+        <div className="glass-panel rounded-3xl border border-slate-800 overflow-hidden">
+          <table className="w-full text-left border-collapse text-xs sm:text-sm">
+
+            <thead>
+              <tr className="border-b border-slate-800 bg-slate-950/60 text-slate-400 font-semibold uppercase text-[11px] tracking-wider">
+                <th className="py-3.5 px-4">Modèle Console</th>
+                <th className="py-3.5 px-3 text-center">Projets Totaux</th>
+                <th className="py-3.5 px-3 text-center">Consoles Vendues</th>
+                <th className="py-3.5 px-3 text-right">CA Réalisé</th>
+                <th className="py-3.5 px-3 text-center">Temps Moyen / Build</th>
+                <th className="py-3.5 px-3 text-right">Bénéfice Net</th>
+                <th className="py-3.5 px-4 text-right">Marge Nette %</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-slate-800/60">
+              {modelStats.map((stat) => (
+                <tr key={stat.model} className="hover:bg-slate-900/40 transition-colors">
+                  <td className="py-3 px-4 font-bold text-white">
+                    {stat.model}
+                  </td>
+                  <td className="py-3 px-3 text-center font-mono text-slate-300">
+                    {stat.totalBuilds}
+                  </td>
+                  <td className="py-3 px-3 text-center font-mono text-emerald-400 font-bold">
+                    {stat.soldBuilds}
+                  </td>
+                  <td className="py-3 px-3 text-right font-mono text-slate-200">
+                    {formatCurrency(stat.totalRevenue, settings.currency)}
+                  </td>
+                  <td className="py-3 px-3 text-center font-mono text-amber-300">
+                    {stat.avgLaborHours.toFixed(1)}h ({Math.round(stat.avgLaborHours * 60)}m)
+                  </td>
+                  <td className="py-3 px-3 text-right font-mono font-bold text-emerald-400">
+                    {formatCurrency(stat.totalNetProfit, settings.currency)}
+                  </td>
+                  <td className="py-3 px-4 text-right font-mono font-bold text-slate-200">
+                    {stat.marginPercent.toFixed(1)}%
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      {/* Task Time Distribution Breakdown */}
+      <div className="space-y-4">
+        <div className="flex items-center space-x-2">
+          <Clock className="w-5 h-5 text-amber-400" />
+          <h3 className="text-lg font-bold text-white">
+            Répartition du Temps de Travail par Type d'Opération
+          </h3>
+        </div>
+
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+          {taskDistribution.map((item) => (
+            <div key={item.taskType} className="glass-panel p-4 rounded-2xl border border-slate-800 space-y-2">
+              <div className="flex items-center justify-between">
+                <span className="text-xs font-bold text-slate-300 truncate">
+                  {getTaskTypeLabel(item.taskType)}
+                </span>
+                <span className="text-xs font-mono font-bold text-amber-300">
+                  {item.percentage.toFixed(0)}%
+                </span>
+              </div>
+              <div className="w-full h-2 bg-slate-900 rounded-full overflow-hidden border border-slate-800">
+                <div
+                  style={{ width: `${item.percentage}%` }}
+                  className="bg-amber-400 h-full rounded-full"
+                />
+              </div>
+              <div className="text-[11px] font-mono text-slate-400">
+                {formatMinutes(item.minutes)} cumulées
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+    </div>
+  );
+};
+
diff --git a/src/components/auth/AuthModal.tsx b/src/components/auth/AuthModal.tsx
new file mode 100644
index 0000000..fe6bd60
--- /dev/null
+++ b/src/components/auth/AuthModal.tsx
@@ -0,0 +1,543 @@
+import React, { useState } from 'react';
+import {
+  X,
+  User,
+  KeyRound,
+  Database,
+  Copy,
+  Check,
+  RefreshCw,
+  LogOut,
+  Sparkles,
+  Wifi,
+  ShieldAlert,
+  Eye,
+  EyeOff,
+  Lock,
+} from 'lucide-react';
+import { useApp } from '../../context/AppContext';
+import {
+  decodeJwtToken,
+  testNcbConnection,
+  authenticateWithDatabase,
+  changeUserPassword,
+} from '../../services/authService';
+
+interface AuthModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export const AuthModal: React.FC<AuthModalProps> = ({ isOpen, onClose }) => {
+  const {
+    authSession,
+    loginUser,
+    logoutUser,
+    addToast,
+  } = useApp();
+
+  // Login form state
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [showPassword, setShowPassword] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [loginError, setLoginError] = useState<string | null>(null);
+
+  // Password change state
+  const [showChangePwd, setShowChangePwd] = useState(false);
+  const [oldPwd, setOldPwd] = useState('');
+  const [newPwd, setNewPwd] = useState('');
+  const [confirmPwd, setConfirmPwd] = useState('');
+  const [isChangingPwd, setIsChangingPwd] = useState(false);
+  const [pwdMsg, setPwdMsg] = useState<{ type: 'success' | 'error'; message: string } | null>(null);
+
+  // Active view inside modal
+  const [activeTab, setActiveTab] = useState<'login' | 'jwt' | 'database'>(
+    authSession.isAuthenticated ? 'login' : 'login'
+  );
+
+  // JWT & NCB state
+  const [copiedToken, setCopiedToken] = useState(false);
+  const [isTestingNcb, setIsTestingNcb] = useState(false);
+  const [ncbTestResult, setNcbTestResult] = useState<{ success: boolean; latencyMs: number; message: string } | null>(null);
+
+  if (!isOpen) return null;
+
+  const currentDecoded = decodeJwtToken(authSession.token);
+
+  const handleLoginSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoginError(null);
+    setIsSubmitting(true);
+
+    try {
+      const result = await authenticateWithDatabase(username, password);
+      if (result.success && result.user) {
+        loginUser(result.user, 720); // 30 days token
+        addToast({
+          type: 'success',
+          title: 'Connexion réussie',
+          message: `Bienvenue ${result.user.name} ! Jeton JWT émis et base NCB connectée.`,
+        });
+        onClose();
+      } else {
+        setLoginError(result.error || 'Identifiants incorrects.');
+      }
+    } catch (err: any) {
+      setLoginError(err.message || 'Erreur lors de la tentative de connexion.');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handlePasswordChange = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setPwdMsg(null);
+
+    if (!oldPwd.trim() || !newPwd.trim() || !confirmPwd.trim()) {
+      setPwdMsg({ type: 'error', message: 'Veuillez remplir tous les champs.' });
+      return;
+    }
+
+    if (newPwd !== confirmPwd) {
+      setPwdMsg({ type: 'error', message: 'Les nouveaux mots de passe ne correspondent pas.' });
+      return;
+    }
+
+    if (newPwd.length < 4) {
+      setPwdMsg({ type: 'error', message: 'Le mot de passe doit comporter au moins 4 caractères.' });
+      return;
+    }
+
+    setIsChangingPwd(true);
+    try {
+      const usernameToUpdate = authSession.user.name || 'streaper2';
+      const result = await changeUserPassword(usernameToUpdate, oldPwd, newPwd);
+      if (result.success) {
+        setPwdMsg({ type: 'success', message: result.message || 'Mot de passe mis à jour !' });
+        setOldPwd('');
+        setNewPwd('');
+        setConfirmPwd('');
+        addToast({
+          type: 'success',
+          title: 'Mot de passe mis à jour',
+          message: 'Synchronisé avec la table users de NoCodeBackend.',
+        });
+      } else {
+        setPwdMsg({ type: 'error', message: result.error || 'Échec de modification.' });
+      }
+    } catch (err: any) {
+      setPwdMsg({ type: 'error', message: err.message || 'Erreur réseau.' });
+    } finally {
+      setIsChangingPwd(false);
+    }
+  };
+
+  const handleCopyToken = () => {
+    if (!authSession.token) return;
+    navigator.clipboard.writeText(authSession.token);
+    setCopiedToken(true);
+    setTimeout(() => setCopiedToken(false), 2000);
+    addToast({
+      type: 'info',
+      title: 'Jeton JWT Copié',
+      message: 'Token copié dans le presse-papier.',
+    });
+  };
+
+  const handleTestNcb = async () => {
+    setIsTestingNcb(true);
+    setNcbTestResult(null);
+    try {
+      const result = await testNcbConnection('54770_uwu_finances');
+      setNcbTestResult(result);
+      if (result.success) {
+        addToast({
+          type: 'success',
+          title: 'Base Cloud NoCodeBackend OK',
+          message: result.message,
+        });
+      }
+    } finally {
+      setIsTestingNcb(false);
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-md animate-fadeIn">
+      <div
+        className="glass-panel w-full max-w-lg rounded-3xl border border-slate-700 bg-slate-950/95 shadow-2xl flex flex-col max-h-[90vh] overflow-hidden"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Modal Header */}
+        <div className="flex items-center justify-between px-6 py-4 border-b border-slate-800">
+          <div className="flex items-center space-x-3">
+            <div className="p-2.5 rounded-2xl bg-gradient-to-tr from-pink-500/20 to-purple-500/20 border border-pink-500/30 text-pink-400">
+              <Lock className="w-5 h-5" />
+            </div>
+            <div>
+              <h2 className="text-lg font-black text-white font-display flex items-center space-x-2">
+                <span>Accès Atelier & Authentification</span>
+                {authSession.isAuthenticated && (
+                  <span className="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold bg-emerald-500/15 text-emerald-400 border border-emerald-500/30">
+                    Connecté ({authSession.user.name})
+                  </span>
+                )}
+              </h2>
+              <p className="text-xs text-slate-400">
+                Compte unique atelier & vérification en base NoCodeBackend
+              </p>
+            </div>
+          </div>
+
+          <button
+            onClick={onClose}
+            className="p-2 rounded-xl text-slate-400 hover:text-white hover:bg-slate-800 transition-colors"
+          >
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+
+        {/* Sub Navigation */}
+        <div className="flex border-b border-slate-800 bg-slate-900/50 p-1.5 gap-1.5">
+          <button
+            type="button"
+            onClick={() => setActiveTab('login')}
+            className={`flex-1 py-2 px-3 rounded-xl text-xs font-bold flex items-center justify-center space-x-2 transition-all ${
+              activeTab === 'login'
+                ? 'bg-gradient-to-r from-pink-500 to-purple-600 text-white shadow-md shadow-pink-500/20'
+                : 'text-slate-400 hover:text-white hover:bg-slate-800/50'
+            }`}
+          >
+            <User className="w-3.5 h-3.5" />
+            <span>{authSession.isAuthenticated ? 'Mon Compte' : 'Connexion'}</span>
+          </button>
+
+          <button
+            type="button"
+            onClick={() => setActiveTab('jwt')}
+            className={`flex-1 py-2 px-3 rounded-xl text-xs font-bold flex items-center justify-center space-x-2 transition-all ${
+              activeTab === 'jwt'
+                ? 'bg-gradient-to-r from-cyan-500 to-blue-600 text-white shadow-md shadow-cyan-500/20'
+                : 'text-slate-400 hover:text-white hover:bg-slate-800/50'
+            }`}
+          >
+            <KeyRound className="w-3.5 h-3.5" />
+            <span>Jeton JWT</span>
+          </button>
+
+          <button
+            type="button"
+            onClick={() => setActiveTab('database')}
+            className={`flex-1 py-2 px-3 rounded-xl text-xs font-bold flex items-center justify-center space-x-2 transition-all ${
+              activeTab === 'database'
+                ? 'bg-gradient-to-r from-purple-500 to-pink-600 text-white shadow-md shadow-purple-500/20'
+                : 'text-slate-400 hover:text-white hover:bg-slate-800/50'
+            }`}
+          >
+            <Database className="w-3.5 h-3.5" />
+            <span>Base NCB</span>
+          </button>
+        </div>
+
+        {/* Modal Body */}
+        <div className="p-6 overflow-y-auto space-y-5">
+          
+          {/* TAB 1: LOGIN / ACCOUNT VIEW */}
+          {activeTab === 'login' && (
+            <div className="space-y-4">
+              {authSession.isAuthenticated ? (
+                /* Authenticated User Card */
+                <div className="p-5 rounded-2xl bg-gradient-to-br from-slate-900 to-slate-950 border border-pink-500/30 space-y-4">
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center space-x-3.5">
+                      <div className="relative">
+                        <img
+                          src={authSession.user.avatarUrl || 'https://api.dicebear.com/7.x/bottts/svg?seed=streaper2'}
+                          alt={authSession.user.name}
+                          className="w-12 h-12 rounded-2xl border border-pink-500/40 bg-slate-800 object-cover"
+                        />
+                        <span className="absolute -bottom-1 -right-1 w-3.5 h-3.5 rounded-full bg-emerald-500 border-2 border-slate-950" />
+                      </div>
+                      <div>
+                        <div className="flex items-center space-x-2">
+                          <h3 className="font-bold text-base text-white">{authSession.user.name}</h3>
+                          <span className="px-2 py-0.5 rounded-full text-[10px] font-extrabold uppercase bg-pink-500/20 text-pink-300 border border-pink-500/30">
+                            {authSession.user.role}
+                          </span>
+                        </div>
+                        <p className="text-xs text-slate-400 font-mono mt-0.5">{authSession.user.email}</p>
+                      </div>
+                    </div>
+
+                    <button
+                      onClick={logoutUser}
+                      className="px-3 py-1.5 rounded-xl bg-slate-900 border border-rose-500/30 hover:bg-rose-500/10 text-rose-400 text-xs font-semibold flex items-center space-x-1.5 transition-colors"
+                    >
+                      <LogOut className="w-3.5 h-3.5" />
+                      <span>Se Déconnecter</span>
+                    </button>
+                  </div>
+
+                  <div className="grid grid-cols-2 gap-2.5 pt-2 text-xs">
+                    <div className="p-3 rounded-xl bg-slate-950/80 border border-slate-800">
+                      <div className="text-[10px] uppercase font-bold text-slate-500">Instance Base</div>
+                      <div className="font-mono text-cyan-300 font-bold mt-0.5">54770_uwu_finances</div>
+                    </div>
+                    <div className="p-3 rounded-xl bg-slate-950/80 border border-slate-800">
+                      <div className="text-[10px] uppercase font-bold text-slate-500">Statut JWT</div>
+                      <div className="font-mono text-emerald-400 font-bold mt-0.5">{currentDecoded.timeLeftFormatted}</div>
+                    </div>
+                  </div>
+
+                  {/* Password change toggle */}
+                  <div className="pt-2 border-t border-slate-800">
+                    <button
+                      type="button"
+                      onClick={() => setShowChangePwd(!showChangePwd)}
+                      className="text-xs font-semibold text-pink-400 hover:text-pink-300 flex items-center space-x-1.5 transition-colors cursor-pointer"
+                    >
+                      <KeyRound className="w-3.5 h-3.5" />
+                      <span>{showChangePwd ? 'Masquer le changement de mot de passe' : 'Modifier le mot de passe'}</span>
+                    </button>
+
+                    {showChangePwd && (
+                      <form onSubmit={handlePasswordChange} className="mt-3 p-3.5 rounded-xl bg-slate-950 border border-slate-800 space-y-3">
+                        {pwdMsg && (
+                          <div className={`p-2.5 rounded-lg text-xs flex items-center space-x-2 ${
+                            pwdMsg.type === 'success'
+                              ? 'bg-emerald-500/10 text-emerald-300 border border-emerald-500/30'
+                              : 'bg-rose-500/10 text-rose-300 border border-rose-500/30'
+                          }`}>
+                            <span>{pwdMsg.message}</span>
+                          </div>
+                        )}
+
+                        <div className="space-y-1">
+                          <label className="text-[11px] font-semibold text-slate-400">Ancien Mot de Passe</label>
+                          <input
+                            type="password"
+                            required
+                            value={oldPwd}
+                            onChange={(e) => setOldPwd(e.target.value)}
+                            placeholder="••••••••"
+                            className="w-full px-3 py-1.5 rounded-lg bg-slate-900 border border-slate-700 text-white text-xs font-mono focus:outline-none focus:border-pink-500"
+                          />
+                        </div>
+
+                        <div className="grid grid-cols-2 gap-2">
+                          <div className="space-y-1">
+                            <label className="text-[11px] font-semibold text-slate-400">Nouveau</label>
+                            <input
+                              type="password"
+                              required
+                              value={newPwd}
+                              onChange={(e) => setNewPwd(e.target.value)}
+                              placeholder="••••••••"
+                              className="w-full px-3 py-1.5 rounded-lg bg-slate-900 border border-slate-700 text-white text-xs font-mono focus:outline-none focus:border-pink-500"
+                            />
+                          </div>
+
+                          <div className="space-y-1">
+                            <label className="text-[11px] font-semibold text-slate-400">Confirmation</label>
+                            <input
+                              type="password"
+                              required
+                              value={confirmPwd}
+                              onChange={(e) => setConfirmPwd(e.target.value)}
+                              placeholder="••••••••"
+                              className="w-full px-3 py-1.5 rounded-lg bg-slate-900 border border-slate-700 text-white text-xs font-mono focus:outline-none focus:border-pink-500"
+                            />
+                          </div>
+                        </div>
+
+                        <div className="flex justify-end pt-1">
+                          <button
+                            type="submit"
+                            disabled={isChangingPwd}
+                            className="px-3.5 py-1.5 rounded-lg bg-gradient-to-r from-pink-500 to-purple-600 text-white text-xs font-bold shadow-md hover:scale-[1.01] transition-all disabled:opacity-50 cursor-pointer"
+                          >
+                            {isChangingPwd ? 'Enregistrement...' : 'Valider Nouveau Mot de Passe'}
+                          </button>
+                        </div>
+                      </form>
+                    )}
+                  </div>
+                </div>
+              ) : (
+                /* Login Form */
+                <form onSubmit={handleLoginSubmit} className="space-y-4">
+                  {loginError && (
+                    <div className="p-3 rounded-xl bg-rose-500/10 border border-rose-500/30 text-rose-300 text-xs flex items-center space-x-2">
+                      <ShieldAlert className="w-4 h-4 text-rose-400 shrink-0" />
+                      <span>{loginError}</span>
+                    </div>
+                  )}
+
+                  <div className="space-y-1.5">
+                    <label className="text-xs font-semibold text-slate-300 flex items-center space-x-1.5">
+                      <User className="w-3.5 h-3.5 text-pink-400" />
+                      <span>Nom d'utilisateur</span>
+                    </label>
+                    <input
+                      type="text"
+                      required
+                      value={username}
+                      onChange={(e) => setUsername(e.target.value)}
+                      placeholder="Nom d'utilisateur"
+                      className="w-full px-3.5 py-2.5 rounded-xl bg-slate-900 border border-slate-700 text-white text-sm focus:outline-none focus:border-pink-500"
+                    />
+                  </div>
+
+                  <div className="space-y-1.5">
+                    <label className="text-xs font-semibold text-slate-300 flex items-center space-x-1.5">
+                      <Lock className="w-3.5 h-3.5 text-pink-400" />
+                      <span>Mot de passe</span>
+                    </label>
+                    <div className="relative">
+                      <input
+                        type={showPassword ? 'text' : 'password'}
+                        required
+                        value={password}
+                        onChange={(e) => setPassword(e.target.value)}
+                        placeholder="Mot de passe"
+                        className="w-full px-3.5 py-2.5 rounded-xl bg-slate-900 border border-slate-700 text-white text-sm focus:outline-none focus:border-pink-500 pr-10 font-mono"
+                      />
+                      <button
+                        type="button"
+                        onClick={() => setShowPassword(!showPassword)}
+                        className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-white"
+                      >
+                        {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+                      </button>
+                    </div>
+                  </div>
+
+                  <button
+                    type="submit"
+                    disabled={isSubmitting}
+                    className="w-full py-3 rounded-xl bg-gradient-to-r from-pink-500 via-purple-600 to-pink-600 text-white font-bold text-sm shadow-lg shadow-pink-500/25 hover:scale-[1.01] active:scale-[0.99] transition-all flex items-center justify-center space-x-2 disabled:opacity-50 cursor-pointer"
+                  >
+                    {isSubmitting ? (
+                      <RefreshCw className="w-4 h-4 animate-spin" />
+                    ) : (
+                      <Sparkles className="w-4 h-4" />
+                    )}
+                    <span>{isSubmitting ? 'Connexion en cours...' : 'Se Connecter à l\'Atelier'}</span>
+                  </button>
+
+                  <div className="p-3 rounded-xl bg-slate-900/50 border border-slate-800 text-[11px] text-slate-400 flex items-center justify-between">
+                    <span>Synchronisé avec la BDD</span>
+                    <span className="font-mono text-cyan-300">NoCodeBackend</span>
+                  </div>
+                </form>
+              )}
+            </div>
+          )}
+
+          {/* TAB 2: JWT TOKEN */}
+          {activeTab === 'jwt' && (
+            <div className="space-y-4">
+              <div className="space-y-2">
+                <div className="flex items-center justify-between">
+                  <label className="text-xs font-bold uppercase tracking-wider text-cyan-400 flex items-center space-x-1.5">
+                    <KeyRound className="w-3.5 h-3.5" />
+                    <span>Jeton JWT Actif</span>
+                  </label>
+                  <span className="text-[11px] text-slate-400 font-mono">
+                    Validité : <span className="text-emerald-400 font-bold">{currentDecoded.timeLeftFormatted}</span>
+                  </span>
+                </div>
+
+                <div className="relative">
+                  <textarea
+                    rows={4}
+                    readOnly
+                    value={authSession.token || ''}
+                    className="w-full px-3 py-2.5 rounded-xl bg-slate-950 border border-slate-800 text-slate-200 text-xs font-mono break-all focus:outline-none focus:border-cyan-400"
+                  />
+                  <button
+                    onClick={handleCopyToken}
+                    className="absolute right-2.5 bottom-3.5 px-2.5 py-1.5 rounded-lg bg-slate-900 border border-slate-700 hover:border-cyan-400 text-slate-200 text-xs font-semibold flex items-center space-x-1.5 transition-all cursor-pointer"
+                  >
+                    {copiedToken ? <Check className="w-3.5 h-3.5 text-emerald-400" /> : <Copy className="w-3.5 h-3.5" />}
+                    <span>{copiedToken ? 'Copié !' : 'Copier'}</span>
+                  </button>
+                </div>
+              </div>
+
+              {/* JWT Payload breakdown */}
+              {currentDecoded.payload && (
+                <div className="p-3.5 rounded-xl bg-slate-900/60 border border-slate-800 space-y-2">
+                  <div className="text-[10px] uppercase font-bold text-slate-400">Claims Payload (JSON)</div>
+                  <pre className="text-[11px] font-mono text-slate-300 overflow-x-auto p-2 rounded-lg bg-slate-950">
+                    {JSON.stringify(currentDecoded.payload, null, 2)}
+                  </pre>
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* TAB 3: NCB DATABASE */}
+          {activeTab === 'database' && (
+            <div className="space-y-4">
+              <div className="p-4 rounded-2xl bg-slate-900/60 border border-cyan-500/30 space-y-3">
+                <div className="flex items-center space-x-3">
+                  <div className="p-2.5 rounded-xl bg-cyan-500/10 border border-cyan-500/30 text-cyan-400">
+                    <Database className="w-5 h-5" />
+                  </div>
+                  <div>
+                    <h3 className="font-bold text-sm text-white">Instance 54770_uwu_finances</h3>
+                    <p className="text-xs text-slate-400">Table 'users' & données de l'atelier synchronisées</p>
+                  </div>
+                </div>
+
+                <div className="pt-2 flex items-center justify-between">
+                  <div className="flex items-center space-x-2">
+                    <span className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse" />
+                    <span className="text-xs font-semibold text-emerald-400">En Ligne & Connecté</span>
+                  </div>
+
+                  <button
+                    onClick={handleTestNcb}
+                    disabled={isTestingNcb}
+                    className="px-3.5 py-1.5 rounded-xl bg-slate-900 border border-cyan-500/40 hover:bg-cyan-500/10 text-cyan-300 text-xs font-semibold flex items-center space-x-1.5 transition-all disabled:opacity-50 cursor-pointer"
+                  >
+                    <Wifi className={`w-3.5 h-3.5 ${isTestingNcb ? 'animate-spin' : ''}`} />
+                    <span>{isTestingNcb ? 'Test...' : 'Tester le Ping NCB'}</span>
+                  </button>
+                </div>
+
+                {ncbTestResult && (
+                  <div className={`p-3 rounded-xl border text-xs flex items-center space-x-2 mt-2 ${
+                    ncbTestResult.success
+                      ? 'bg-emerald-500/10 text-emerald-300 border-emerald-500/30'
+                      : 'bg-rose-500/10 text-rose-300 border-rose-500/30'
+                  }`}>
+                    {ncbTestResult.success ? <Check className="w-4 h-4 text-emerald-400 shrink-0" /> : <ShieldAlert className="w-4 h-4 text-rose-400 shrink-0" />}
+                    <span>{ncbTestResult.message}</span>
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+
+        </div>
+
+        {/* Modal Footer */}
+        <div className="px-6 py-4 border-t border-slate-800 bg-slate-900/30 flex items-center justify-between">
+          <span className="text-[11px] font-mono text-slate-500">
+            Auth v1.2 • NoCodeBackend Auth & JWT
+          </span>
+
+          <button
+            onClick={onClose}
+            className="px-5 py-2 rounded-xl bg-slate-800 hover:bg-slate-700 text-white text-xs font-bold transition-all"
+          >
+            Fermer
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/auth/LoginGate.tsx b/src/components/auth/LoginGate.tsx
new file mode 100644
index 0000000..378bc9b
--- /dev/null
+++ b/src/components/auth/LoginGate.tsx
@@ -0,0 +1,168 @@
+import React, { useState } from 'react';
+import {
+  Gamepad2,
+  Lock,
+  User,
+  Eye,
+  EyeOff,
+  Sparkles,
+  RefreshCw,
+  ShieldAlert,
+  ShieldCheck,
+  Database,
+} from 'lucide-react';
+import { useApp } from '../../context/AppContext';
+import { authenticateWithDatabase } from '../../services/authService';
+
+export const LoginGate: React.FC = () => {
+  const { loginUser, addToast, settings } = useApp();
+
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [showPassword, setShowPassword] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setErrorMessage(null);
+    setIsSubmitting(true);
+
+    try {
+      const result = await authenticateWithDatabase(username, password);
+      if (result.success && result.user) {
+        loginUser(result.user, 720); // 30 days session
+        addToast({
+          type: 'success',
+          title: 'Accès Autorisé',
+          message: `Bienvenue dans votre atelier, ${result.user.name} ! Jeton JWT émis.`,
+        });
+      } else {
+        setErrorMessage(result.error || 'Identifiant ou mot de passe incorrect.');
+      }
+    } catch (err: any) {
+      setErrorMessage(err.message || 'Erreur lors de la connexion au serveur.');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen theme-root-container flex items-center justify-center p-4 selection:bg-pink-500 selection:text-white relative overflow-hidden">
+      {/* Ambient background glows */}
+      <div className="absolute top-1/4 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-pink-500/10 rounded-full blur-3xl pointer-events-none" />
+      <div className="absolute bottom-1/4 right-1/4 w-80 h-80 bg-purple-500/10 rounded-full blur-3xl pointer-events-none" />
+
+      <div className="w-full max-w-md relative z-10 animate-fadeIn">
+        {/* Main Card */}
+        <div className="glass-panel p-8 sm:p-10 rounded-3xl border border-slate-700/80 bg-slate-950/90 shadow-2xl shadow-pink-500/5 space-y-6">
+          
+          {/* Logo & Header */}
+          <div className="text-center space-y-3">
+            <div className="inline-flex items-center justify-center w-16 h-16 rounded-3xl bg-gradient-to-tr from-pink-500 via-purple-600 to-cyan-400 p-[2px] shadow-xl shadow-pink-500/25 mb-1">
+              <div className="w-full h-full bg-slate-950 rounded-[22px] flex items-center justify-center">
+                <Gamepad2 className="w-8 h-8 text-pink-400" />
+              </div>
+            </div>
+
+            <div>
+              <h1 className="text-2xl font-black tracking-tight bg-gradient-to-r from-pink-400 via-purple-300 to-cyan-400 bg-clip-text text-transparent font-display">
+                {settings.logoText || 'uwuFinances'}
+              </h1>
+              <p className="text-xs text-slate-400 mt-1">
+                Atelier Console Modding • Gestion Financière & Projets
+              </p>
+            </div>
+          </div>
+
+          {/* Form */}
+          <form onSubmit={handleSubmit} className="space-y-4">
+            {errorMessage && (
+              <div className="p-3 rounded-2xl bg-rose-500/10 border border-rose-500/30 text-rose-300 text-xs flex items-center space-x-2 animate-shake">
+                <ShieldAlert className="w-4 h-4 text-rose-400 shrink-0" />
+                <span>{errorMessage}</span>
+              </div>
+            )}
+
+            {/* Username Input */}
+            <div className="space-y-1.5">
+              <label className="text-xs font-semibold text-slate-300 flex items-center space-x-1.5">
+                <User className="w-3.5 h-3.5 text-pink-400" />
+                <span>Identifiant Utilisateur</span>
+              </label>
+              <div className="relative">
+                <input
+                  type="text"
+                  required
+                  autoFocus
+                  value={username}
+                  onChange={(e) => setUsername(e.target.value)}
+                  placeholder="Nom d'utilisateur"
+                  className="w-full px-4 py-3 rounded-2xl bg-slate-900/90 border border-slate-750 text-white text-sm focus:outline-none focus:border-pink-500 focus:ring-2 focus:ring-pink-500/20 transition-all font-medium"
+                />
+              </div>
+            </div>
+
+            {/* Password Input */}
+            <div className="space-y-1.5">
+              <label className="text-xs font-semibold text-slate-300 flex items-center space-x-1.5">
+                <Lock className="w-3.5 h-3.5 text-pink-400" />
+                <span>Mot de passe</span>
+              </label>
+              <div className="relative">
+                <input
+                  type={showPassword ? 'text' : 'password'}
+                  required
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  placeholder="Mot de passe"
+                  className="w-full px-4 py-3 rounded-2xl bg-slate-900/90 border border-slate-750 text-white text-sm focus:outline-none focus:border-pink-500 focus:ring-2 focus:ring-pink-500/20 transition-all font-mono pr-11"
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowPassword(!showPassword)}
+                  className="absolute right-3.5 top-1/2 -translate-y-1/2 text-slate-400 hover:text-white transition-colors"
+                  tabIndex={-1}
+                >
+                  {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+                </button>
+              </div>
+            </div>
+
+            {/* Submit Button */}
+            <button
+              type="submit"
+              disabled={isSubmitting}
+              className="w-full py-3.5 px-4 rounded-2xl bg-gradient-to-r from-pink-500 via-purple-600 to-pink-600 hover:from-pink-400 hover:to-purple-500 text-white font-bold text-sm shadow-xl shadow-pink-500/25 hover:shadow-pink-500/40 hover:scale-[1.01] active:scale-[0.99] transition-all duration-200 flex items-center justify-center space-x-2 disabled:opacity-50 cursor-pointer mt-2"
+            >
+              {isSubmitting ? (
+                <RefreshCw className="w-4 h-4 animate-spin" />
+              ) : (
+                <Sparkles className="w-4 h-4 text-pink-200" />
+              )}
+              <span>{isSubmitting ? 'Vérification en BDD...' : 'Accéder à l\'Atelier'}</span>
+            </button>
+          </form>
+
+          {/* Database info badge */}
+          <div className="pt-2 border-t border-slate-850 flex items-center justify-between text-[11px] text-slate-400">
+            <div className="flex items-center space-x-1.5">
+              <Database className="w-3.5 h-3.5 text-cyan-400" />
+              <span className="font-mono">Base de données Cloud NCB</span>
+            </div>
+            <div className="flex items-center space-x-1 text-emerald-400 font-semibold">
+              <ShieldCheck className="w-3.5 h-3.5" />
+              <span>JWT Chiffré</span>
+            </div>
+          </div>
+
+        </div>
+
+        {/* Discreet bottom notice */}
+        <div className="text-center text-xs text-slate-500 mt-4">
+          Session sécurisée pour l'administrateur de l'atelier
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/common/Header.tsx b/src/components/common/Header.tsx
new file mode 100644
index 0000000..55042d2
--- /dev/null
+++ b/src/components/common/Header.tsx
@@ -0,0 +1,284 @@
+import React from 'react';
+import {
+  Gamepad2,
+  LayoutDashboard,
+  ShoppingCart,
+  Layers,
+  Clock,
+  BarChart3,
+  Settings as SettingsIcon,
+  PackagePlus,
+  Play,
+  Pause,
+  Sparkles,
+} from 'lucide-react';
+import { useApp } from '../../context/AppContext';
+
+
+export const Header: React.FC = () => {
+  const {
+    currentTab,
+    setCurrentTab,
+    inventory,
+    projects,
+    activeTimer,
+    pauseTimer,
+    resumeTimer,
+    setShowNewProjectModal,
+    setShowNewInventoryModal,
+    settings,
+  } = useApp();
+
+  // Calculate alerts
+  const lowStockCount = inventory.filter(
+    (i) => i.quantityInStock <= i.minStockAlert
+  ).length;
+
+  const activeProjectsCount = projects.filter(
+    (p) => p.status === 'in_progress' || p.status === 'qc_testing'
+  ).length;
+
+  const readyToSellCount = projects.filter(
+    (p) => p.status === 'in_stock_ready'
+  ).length;
+
+  return (
+    <header className="sticky top-0 z-40 w-full border-b border-slate-800/80 bg-slate-950/85 backdrop-blur-xl shadow-lg shadow-black/20 no-print">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex items-center justify-between h-16 sm:h-20">
+          
+          {/* Logo & Brand */}
+          <div className="flex items-center space-x-3 cursor-pointer" onClick={() => setCurrentTab('dashboard')}>
+            <div className="relative flex items-center justify-center w-11 h-11 rounded-2xl bg-gradient-to-tr from-pink-500 via-purple-600 to-cyan-400 p-[2px] shadow-lg shadow-pink-500/20 group">
+              <div className="w-full h-full bg-slate-950 rounded-[14px] flex items-center justify-center transition-all group-hover:bg-slate-900">
+                <Gamepad2 className="w-6 h-6 text-pink-400 group-hover:scale-110 transition-transform duration-300" />
+              </div>
+              <span className="absolute -top-1 -right-1 flex h-3 w-3">
+                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-cyan-400 opacity-75"></span>
+                <span className="relative inline-flex rounded-full h-3 w-3 bg-cyan-500"></span>
+              </span>
+            </div>
+            
+            <div>
+              <div className="flex items-center space-x-2">
+                <h1 className="text-xl sm:text-2xl font-black tracking-tight bg-gradient-to-r from-pink-400 via-purple-300 to-cyan-400 bg-clip-text text-transparent font-display">
+                  {settings.logoText || 'uwuFinances'}
+                </h1>
+                <span className="hidden md:inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold bg-pink-500/10 text-pink-400 border border-pink-500/30">
+                  MODDING PRO
+                </span>
+              </div>
+              <p className="text-xs text-slate-400 hidden sm:block truncate max-w-[200px]">
+                {settings.businessName}
+              </p>
+            </div>
+          </div>
+
+          {/* Navigation Tabs */}
+          <nav className="hidden lg:flex items-center space-x-1">
+            <button
+              onClick={() => setCurrentTab('dashboard')}
+              className={`flex items-center space-x-2 px-3.5 py-2 rounded-xl text-sm font-semibold transition-all duration-200 ${
+                currentTab === 'dashboard'
+                  ? 'bg-gradient-to-r from-pink-500/15 to-purple-500/15 text-pink-400 border border-pink-500/30 shadow-sm'
+                  : 'text-slate-400 hover:text-slate-200 hover:bg-slate-900/60'
+              }`}
+            >
+              <LayoutDashboard className="w-4 h-4" />
+              <span>Dashboard</span>
+            </button>
+
+            <button
+              onClick={() => setCurrentTab('purchases')}
+              className={`flex items-center space-x-2 px-3.5 py-2 rounded-xl text-sm font-semibold transition-all duration-200 relative ${
+                currentTab === 'purchases'
+                  ? 'bg-gradient-to-r from-cyan-500/15 to-blue-500/15 text-cyan-400 border border-cyan-500/30 shadow-sm'
+                  : 'text-slate-400 hover:text-slate-200 hover:bg-slate-900/60'
+              }`}
+            >
+              <ShoppingCart className="w-4 h-4" />
+              <span>Achats & Stock</span>
+              {lowStockCount > 0 && (
+                <span className="ml-1.5 px-1.5 py-0.5 text-[10px] font-extrabold rounded-full bg-amber-500/20 text-amber-300 border border-amber-500/40 animate-pulse">
+                  {lowStockCount}
+                </span>
+              )}
+            </button>
+
+            <button
+              onClick={() => setCurrentTab('projects')}
+              className={`flex items-center space-x-2 px-3.5 py-2 rounded-xl text-sm font-semibold transition-all duration-200 relative ${
+                currentTab === 'projects'
+                  ? 'bg-gradient-to-r from-purple-500/15 to-pink-500/15 text-purple-400 border border-purple-500/30 shadow-sm'
+                  : 'text-slate-400 hover:text-slate-200 hover:bg-slate-900/60'
+              }`}
+            >
+              <Layers className="w-4 h-4" />
+              <span>Projets & Dépenses</span>
+              {readyToSellCount > 0 ? (
+                <span className="ml-1.5 px-1.5 py-0.5 text-[10px] font-extrabold rounded-full bg-emerald-500/20 text-emerald-300 border border-emerald-500/40">
+                  {readyToSellCount} en vente
+                </span>
+              ) : activeProjectsCount > 0 ? (
+                <span className="ml-1.5 px-1.5 py-0.5 text-[10px] font-extrabold rounded-full bg-blue-500/20 text-blue-300 border border-blue-500/40">
+                  {activeProjectsCount} en cours
+                </span>
+              ) : null}
+            </button>
+
+
+            <button
+              onClick={() => setCurrentTab('timetracker')}
+              className={`flex items-center space-x-2 px-3.5 py-2 rounded-xl text-sm font-semibold transition-all duration-200 relative ${
+                currentTab === 'timetracker'
+                  ? 'bg-gradient-to-r from-amber-500/15 to-orange-500/15 text-amber-400 border border-amber-500/30 shadow-sm'
+                  : 'text-slate-400 hover:text-slate-200 hover:bg-slate-900/60'
+              }`}
+            >
+              <Clock className="w-4 h-4" />
+              <span>Chronomètre Établi</span>
+              {activeTimer.isRunning && (
+                <span className="w-2 h-2 rounded-full bg-emerald-400 animate-ping ml-1" />
+              )}
+            </button>
+
+            <button
+              onClick={() => setCurrentTab('analytics')}
+              className={`flex items-center space-x-2 px-3.5 py-2 rounded-xl text-sm font-semibold transition-all duration-200 ${
+                currentTab === 'analytics'
+                  ? 'bg-gradient-to-r from-emerald-500/15 to-teal-500/15 text-emerald-400 border border-emerald-500/30 shadow-sm'
+                  : 'text-slate-400 hover:text-slate-200 hover:bg-slate-900/60'
+              }`}
+            >
+              <BarChart3 className="w-4 h-4" />
+              <span>Rentabilité</span>
+            </button>
+
+            <button
+              onClick={() => setCurrentTab('settings')}
+              className={`p-2 rounded-xl text-slate-400 hover:text-slate-200 hover:bg-slate-900/60 transition-all ${
+                currentTab === 'settings' ? 'text-pink-400 bg-pink-500/10 border border-pink-500/30' : ''
+              }`}
+              title="Paramètres & Sauvegardes"
+            >
+              <SettingsIcon className="w-5 h-5" />
+            </button>
+          </nav>
+
+          {/* Right Action Buttons */}
+          <div className="flex items-center space-x-2 sm:space-x-3">
+            {/* Live Stopwatch Mini Widget (if running or has elapsed time) */}
+            {activeTimer.elapsedSeconds > 0 && (
+              <div
+                onClick={() => setCurrentTab('timetracker')}
+                className="cursor-pointer hidden sm:flex items-center space-x-2 px-3 py-1.5 rounded-xl bg-slate-900 border border-amber-500/40 text-amber-300 text-xs font-mono shadow-md hover:border-amber-400 transition-all"
+              >
+                <div className={`w-2 h-2 rounded-full ${activeTimer.isRunning ? 'bg-amber-400 animate-pulse' : 'bg-slate-500'}`} />
+                <span>
+                  {Math.floor(activeTimer.elapsedSeconds / 3600) > 0
+                    ? `${Math.floor(activeTimer.elapsedSeconds / 3600)}:`
+                    : ''}
+                  {Math.floor((activeTimer.elapsedSeconds % 3600) / 60).toString().padStart(2, '0')}:
+                  {(activeTimer.elapsedSeconds % 60).toString().padStart(2, '0')}
+                </span>
+                <button
+                  type="button"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    activeTimer.isRunning ? pauseTimer() : resumeTimer();
+                  }}
+                  className="p-1 hover:text-white"
+                >
+                  {activeTimer.isRunning ? <Pause className="w-3 h-3" /> : <Play className="w-3 h-3" />}
+                </button>
+              </div>
+            )}
+
+            {/* Quick Add Part */}
+            <button
+              onClick={() => setShowNewInventoryModal(true)}
+              className="flex items-center space-x-1.5 px-3 py-1.5 sm:px-3.5 sm:py-2 rounded-xl text-xs sm:text-sm font-semibold bg-slate-900 text-cyan-300 border border-cyan-500/30 hover:bg-cyan-500/10 hover:border-cyan-500/60 shadow-sm transition-all duration-200"
+              title="Ajouter un achat de pièces au stock"
+            >
+              <PackagePlus className="w-4 h-4 text-cyan-400" />
+              <span className="hidden sm:inline">Achat Pièce</span>
+            </button>
+
+            {/* Quick New Project */}
+            <button
+              onClick={() => setShowNewProjectModal(true)}
+              className="flex items-center space-x-1.5 px-3 py-1.5 sm:px-4 sm:py-2 rounded-xl text-xs sm:text-sm font-bold bg-gradient-to-r from-pink-500 via-purple-600 to-pink-600 text-white shadow-lg shadow-pink-500/25 hover:shadow-pink-500/40 hover:scale-[1.02] active:scale-[0.98] transition-all duration-200"
+              title="Créer une nouvelle console custom"
+            >
+              <Sparkles className="w-4 h-4" />
+              <span>Nouveau Projet</span>
+            </button>
+          </div>
+
+        </div>
+
+        {/* Mobile Navigation Tabs */}
+        <div className="lg:hidden flex items-center justify-around py-2 border-t border-slate-900 overflow-x-auto space-x-1">
+          <button
+            onClick={() => setCurrentTab('dashboard')}
+            className={`flex flex-col items-center p-1.5 rounded-lg text-xs ${
+              currentTab === 'dashboard' ? 'text-pink-400 font-bold' : 'text-slate-400'
+            }`}
+          >
+            <LayoutDashboard className="w-4 h-4" />
+            <span className="text-[10px] mt-0.5">Dashboard</span>
+          </button>
+          <button
+            onClick={() => setCurrentTab('purchases')}
+            className={`flex flex-col items-center p-1.5 rounded-lg text-xs relative ${
+              currentTab === 'purchases' ? 'text-cyan-400 font-bold' : 'text-slate-400'
+            }`}
+          >
+            <ShoppingCart className="w-4 h-4" />
+            <span className="text-[10px] mt-0.5">Stock</span>
+            {lowStockCount > 0 && (
+              <span className="absolute top-0 right-1 w-2 h-2 rounded-full bg-amber-400" />
+            )}
+          </button>
+          <button
+            onClick={() => setCurrentTab('projects')}
+            className={`flex flex-col items-center p-1.5 rounded-lg text-xs relative ${
+              currentTab === 'projects' ? 'text-purple-400 font-bold' : 'text-slate-400'
+            }`}
+          >
+            <Layers className="w-4 h-4" />
+            <span className="text-[10px] mt-0.5">Projets</span>
+          </button>
+          <button
+            onClick={() => setCurrentTab('timetracker')}
+            className={`flex flex-col items-center p-1.5 rounded-lg text-xs ${
+              currentTab === 'timetracker' ? 'text-amber-400 font-bold' : 'text-slate-400'
+            }`}
+          >
+            <Clock className="w-4 h-4" />
+            <span className="text-[10px] mt-0.5">Chrono</span>
+          </button>
+          <button
+            onClick={() => setCurrentTab('analytics')}
+            className={`flex flex-col items-center p-1.5 rounded-lg text-xs ${
+              currentTab === 'analytics' ? 'text-emerald-400 font-bold' : 'text-slate-400'
+            }`}
+          >
+            <BarChart3 className="w-4 h-4" />
+            <span className="text-[10px] mt-0.5">Marge</span>
+          </button>
+          <button
+            onClick={() => setCurrentTab('settings')}
+            className={`flex flex-col items-center p-1.5 rounded-lg text-xs ${
+              currentTab === 'settings' ? 'text-pink-400 font-bold' : 'text-slate-400'
+            }`}
+          >
+            <SettingsIcon className="w-4 h-4" />
+            <span className="text-[10px] mt-0.5">Options</span>
+          </button>
+        </div>
+
+      </div>
+    </header>
+  );
+};
diff --git a/src/components/common/Sidebar.tsx b/src/components/common/Sidebar.tsx
new file mode 100644
index 0000000..fab4216
--- /dev/null
+++ b/src/components/common/Sidebar.tsx
@@ -0,0 +1,470 @@
+import React, { useState } from 'react';
+import {
+  Gamepad2,
+  LayoutDashboard,
+  ShoppingCart,
+  Layers,
+  Clock,
+  BarChart3,
+  Settings as SettingsIcon,
+  PackagePlus,
+  Play,
+  Pause,
+  Sparkles,
+  ChevronRight,
+  Menu,
+  X,
+  ShieldCheck,
+  AlertTriangle,
+} from 'lucide-react';
+import { useApp } from '../../context/AppContext';
+
+interface NavItem {
+  id: 'dashboard' | 'purchases' | 'projects' | 'mods' | 'timetracker' | 'analytics' | 'settings';
+  label: string;
+  subtitle: string;
+  icon: React.ElementType;
+  colorClass: {
+    active: string;
+    text: string;
+    border: string;
+    iconColor: string;
+    bgHover: string;
+  };
+}
+
+const NAV_ITEMS: NavItem[] = [
+  {
+    id: 'dashboard',
+    label: 'Tableau de Bord',
+    subtitle: 'Vue globale & graphiques',
+    icon: LayoutDashboard,
+    colorClass: {
+      active: 'bg-gradient-to-r from-pink-500/15 via-purple-500/10 to-transparent text-pink-400 border-pink-500/40 shadow-sm shadow-pink-500/10',
+      text: 'text-pink-400',
+      border: 'border-pink-500/40',
+      iconColor: 'text-pink-400',
+      bgHover: 'hover:bg-pink-500/5 hover:text-pink-300',
+    },
+  },
+  {
+    id: 'purchases',
+    label: 'Achats & Stocks',
+    subtitle: 'Composants & consoles',
+    icon: ShoppingCart,
+    colorClass: {
+      active: 'bg-gradient-to-r from-cyan-500/15 via-blue-500/10 to-transparent text-cyan-400 border-cyan-500/40 shadow-sm shadow-cyan-500/10',
+      text: 'text-cyan-400',
+      border: 'border-cyan-500/40',
+      iconColor: 'text-cyan-400',
+      bgHover: 'hover:bg-cyan-500/5 hover:text-cyan-300',
+    },
+  },
+  {
+    id: 'projects',
+    label: 'Projets & Dépenses',
+    subtitle: 'Customisations & coûts',
+    icon: Layers,
+    colorClass: {
+      active: 'bg-gradient-to-r from-purple-500/15 via-pink-500/10 to-transparent text-purple-400 border-purple-500/40 shadow-sm shadow-purple-500/10',
+      text: 'text-purple-400',
+      border: 'border-purple-500/40',
+      iconColor: 'text-purple-400',
+      bgHover: 'hover:bg-purple-500/5 hover:text-purple-300',
+    },
+  },
+  {
+    id: 'mods',
+    label: 'Mods & Recettes',
+    subtitle: 'Kits & catalogue pièces',
+    icon: Sparkles,
+    colorClass: {
+      active: 'bg-gradient-to-r from-rose-500/15 via-pink-500/10 to-transparent text-rose-400 border-rose-500/40 shadow-sm shadow-rose-500/10',
+      text: 'text-rose-400',
+      border: 'border-rose-500/40',
+      iconColor: 'text-rose-400',
+      bgHover: 'hover:bg-rose-500/5 hover:text-rose-300',
+    },
+  },
+  {
+    id: 'timetracker',
+    label: 'Chronomètre Établi',
+    subtitle: 'Main d\'œuvre & sessions',
+    icon: Clock,
+    colorClass: {
+      active: 'bg-gradient-to-r from-amber-500/15 via-orange-500/10 to-transparent text-amber-400 border-amber-500/40 shadow-sm shadow-amber-500/10',
+      text: 'text-amber-400',
+      border: 'border-amber-500/40',
+      iconColor: 'text-amber-400',
+      bgHover: 'hover:bg-amber-500/5 hover:text-amber-300',
+    },
+  },
+  {
+    id: 'analytics',
+    label: 'Rentabilité & Marge',
+    subtitle: 'Simulateur & ROI',
+    icon: BarChart3,
+    colorClass: {
+      active: 'bg-gradient-to-r from-emerald-500/15 via-teal-500/10 to-transparent text-emerald-400 border-emerald-500/40 shadow-sm shadow-emerald-500/10',
+      text: 'text-emerald-400',
+      border: 'border-emerald-500/40',
+      iconColor: 'text-emerald-400',
+      bgHover: 'hover:bg-emerald-500/5 hover:text-emerald-300',
+    },
+  },
+  {
+    id: 'settings',
+    label: 'Paramètres & Données',
+    subtitle: 'Taux horaire & exports',
+    icon: SettingsIcon,
+    colorClass: {
+      active: 'bg-gradient-to-r from-slate-700/30 via-slate-800/20 to-transparent text-slate-200 border-slate-600 shadow-sm',
+      text: 'text-slate-300',
+      border: 'border-slate-600',
+      iconColor: 'text-slate-300',
+      bgHover: 'hover:bg-slate-800/40 hover:text-slate-200',
+    },
+  },
+];
+
+export const Sidebar: React.FC = () => {
+  const {
+    currentTab,
+    setCurrentTab,
+    inventory,
+    projects,
+    modsLibrary,
+    activeTimer,
+    pauseTimer,
+    resumeTimer,
+    setShowNewProjectModal,
+    setShowNewInventoryModal,
+    settings,
+    authSession,
+    setShowAuthModal,
+  } = useApp();
+
+  const [mobileOpen, setMobileOpen] = useState(false);
+
+  // Alerts
+  const lowStockCount = inventory.filter(
+    (i) => i.quantityInStock <= i.minStockAlert
+  ).length;
+
+  const activeProjectsCount = projects.filter(
+    (p) => p.status === 'in_progress' || p.status === 'qc_testing'
+  ).length;
+
+  const readyToSellCount = projects.filter(
+    (p) => p.status === 'in_stock_ready'
+  ).length;
+
+  // Active project title if stopwatch is running
+  const activeTimerProject = projects.find((p) => p.id === activeTimer.projectId);
+
+  const formatTimerDigits = (totalSec: number) => {
+    const hours = Math.floor(totalSec / 3600);
+    const minutes = Math.floor((totalSec % 3600) / 60);
+    const seconds = totalSec % 60;
+    if (hours > 0) {
+      return `${hours}h ${minutes.toString().padStart(2, '0')}m ${seconds.toString().padStart(2, '0')}s`;
+    }
+    return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+  };
+
+  const handleNavClick = (tabId: NavItem['id']) => {
+    setCurrentTab(tabId);
+    setMobileOpen(false);
+  };
+
+  return (
+    <>
+      {/* Mobile Top Bar (Visible only on small screens < lg) */}
+      <div className="lg:hidden sticky top-0 z-40 flex items-center justify-between px-4 py-3 theme-header border-b border-slate-800/80 backdrop-blur-xl no-print">
+        <div
+          className="flex items-center space-x-3 cursor-pointer"
+          onClick={() => handleNavClick('dashboard')}
+        >
+          <div className="flex items-center justify-center w-9 h-9 rounded-xl bg-gradient-to-tr from-pink-500 to-purple-600 p-[2px]">
+            <div className="w-full h-full bg-slate-950 rounded-[10px] flex items-center justify-center">
+              <Gamepad2 className="w-5 h-5 text-pink-400" />
+            </div>
+          </div>
+          <div>
+            <h1 className="text-lg font-black tracking-tight bg-gradient-to-r from-pink-400 to-purple-400 bg-clip-text text-transparent">
+              {settings.logoText || 'uwuFinances'}
+            </h1>
+          </div>
+        </div>
+
+        <div className="flex items-center space-x-2">
+          {activeTimer.elapsedSeconds > 0 && (
+            <button
+              onClick={() => handleNavClick('timetracker')}
+              className="flex items-center space-x-1 px-2.5 py-1 rounded-lg bg-slate-900 border border-amber-500/40 text-amber-300 text-xs font-mono"
+            >
+              <div className={`w-2 h-2 rounded-full ${activeTimer.isRunning ? 'bg-amber-400 animate-pulse' : 'bg-slate-500'}`} />
+              <span>{Math.floor(activeTimer.elapsedSeconds / 60)}m</span>
+            </button>
+          )}
+
+          <button
+            onClick={() => setMobileOpen(!mobileOpen)}
+            className="p-2 rounded-xl bg-slate-900 border border-slate-800 text-slate-300 hover:text-white"
+            aria-label="Toggle Menu"
+          >
+            {mobileOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
+          </button>
+        </div>
+      </div>
+
+      {/* Backdrop for Mobile Overlay */}
+      {mobileOpen && (
+        <div
+          onClick={() => setMobileOpen(false)}
+          className="fixed inset-0 bg-black/60 backdrop-blur-sm z-40 lg:hidden"
+        />
+      )}
+
+      {/* Sidebar Container */}
+      <aside
+        className={`fixed top-0 left-0 bottom-0 z-50 w-72 lg:w-72 theme-sidebar border-r border-slate-800 flex flex-col justify-between transition-transform duration-300 ease-in-out no-print ${
+          mobileOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'
+        }`}
+      >
+        {/* Top Header & Branding */}
+        <div className="p-5 border-b border-slate-850">
+          <div
+            className="flex items-center space-x-3.5 cursor-pointer group"
+            onClick={() => handleNavClick('dashboard')}
+          >
+            <div className="relative flex items-center justify-center w-12 h-12 rounded-2xl bg-gradient-to-tr from-pink-500 via-purple-600 to-cyan-400 p-[2px] shadow-lg shadow-pink-500/20 group-hover:scale-105 transition-transform duration-300">
+              <div className="w-full h-full bg-slate-950 rounded-[14px] flex items-center justify-center">
+                <Gamepad2 className="w-6 h-6 text-pink-400 group-hover:rotate-12 transition-transform duration-300" />
+              </div>
+              <span className="absolute -top-1 -right-1 flex h-3.5 w-3.5">
+                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-cyan-400 opacity-75"></span>
+                <span className="relative inline-flex rounded-full h-3.5 w-3.5 bg-cyan-500 border-2 border-slate-950"></span>
+              </span>
+            </div>
+
+            <div className="flex-1 min-w-0">
+              <div className="flex items-center space-x-2">
+                <h1 className="text-xl font-black tracking-tight bg-gradient-to-r from-pink-400 via-purple-300 to-cyan-400 bg-clip-text text-transparent font-display truncate">
+                  {settings.logoText || 'uwuFinances'}
+                </h1>
+              </div>
+              <p className="text-xs text-slate-400 truncate mt-0.5">
+                {settings.businessName || 'Atelier Console Modding'}
+              </p>
+            </div>
+          </div>
+
+          {/* Quick Action Buttons (Full width, spacious & clear) */}
+          <div className="mt-5 space-y-2">
+            <button
+              onClick={() => {
+                setShowNewProjectModal(true);
+                setMobileOpen(false);
+              }}
+              className="w-full flex items-center justify-center space-x-2 px-3.5 py-2.5 rounded-xl font-bold text-sm bg-gradient-to-r from-pink-500 via-purple-600 to-pink-600 text-white shadow-lg shadow-pink-500/20 hover:shadow-pink-500/35 hover:scale-[1.02] active:scale-[0.98] transition-all duration-200"
+            >
+              <Sparkles className="w-4 h-4 text-pink-200" />
+              <span>Nouveau Projet</span>
+            </button>
+
+            <button
+              onClick={() => {
+                setShowNewInventoryModal(true);
+                setMobileOpen(false);
+              }}
+              className="w-full flex items-center justify-center space-x-2 px-3.5 py-2 rounded-xl font-semibold text-xs bg-slate-900/90 text-cyan-300 border border-cyan-500/30 hover:bg-cyan-500/10 hover:border-cyan-500/50 transition-all duration-200"
+            >
+              <PackagePlus className="w-4 h-4 text-cyan-400" />
+              <span>Achat Pièce / Stock</span>
+            </button>
+          </div>
+        </div>
+
+        {/* Navigation Items (Main List) */}
+        <div className="flex-1 overflow-y-auto px-3.5 py-4 space-y-1.5 custom-scrollbar">
+          <div className="px-3 pb-2 text-[10px] font-bold uppercase tracking-wider text-slate-500">
+            Menu Principal
+          </div>
+
+          {NAV_ITEMS.map((item) => {
+            const Icon = item.icon;
+            const isActive = currentTab === item.id;
+
+            return (
+              <button
+                key={item.id}
+                onClick={() => handleNavClick(item.id)}
+                className={`w-full flex items-center justify-between px-3.5 py-3 rounded-2xl text-left transition-all duration-200 group border ${
+                  isActive
+                    ? `${item.colorClass.active} font-bold`
+                    : `text-slate-400 border-transparent hover:border-slate-800/80 hover:bg-slate-900/50 ${item.colorClass.bgHover}`
+                }`}
+              >
+                <div className="flex items-center space-x-3.5 min-w-0">
+                  <div
+                    className={`p-2 rounded-xl transition-all ${
+                      isActive
+                        ? 'bg-slate-900/80 shadow-inner'
+                        : 'bg-slate-900/40 group-hover:bg-slate-800/60'
+                    }`}
+                  >
+                    <Icon
+                      className={`w-5 h-5 transition-transform duration-200 group-hover:scale-110 ${
+                        isActive ? item.colorClass.iconColor : 'text-slate-400 group-hover:text-slate-200'
+                      }`}
+                    />
+                  </div>
+                  <div className="truncate">
+                    <div
+                      className={`text-sm tracking-tight ${
+                        isActive ? 'text-white font-bold' : 'text-slate-300 font-medium group-hover:text-white'
+                      }`}
+                    >
+                      {item.label}
+                    </div>
+                    <div className="text-[11px] text-slate-500 truncate">
+                      {item.subtitle}
+                    </div>
+                  </div>
+                </div>
+
+                {/* Badges / Indicators */}
+                <div className="flex items-center space-x-1.5 ml-2 shrink-0">
+                  {item.id === 'mods' && (
+                    <span className="px-2 py-0.5 text-[10px] font-extrabold rounded-full bg-rose-500/20 text-rose-300 border border-rose-500/40">
+                      {modsLibrary.length}
+                    </span>
+                  )}
+
+                  {item.id === 'purchases' && lowStockCount > 0 && (
+                    <span className="px-2 py-0.5 text-[10px] font-extrabold rounded-full bg-amber-500/20 text-amber-300 border border-amber-500/40 flex items-center space-x-1">
+                      <AlertTriangle className="w-2.5 h-2.5" />
+                      <span>{lowStockCount}</span>
+                    </span>
+                  )}
+
+                  {item.id === 'projects' && (
+                    <>
+                      {readyToSellCount > 0 ? (
+                        <span className="px-2 py-0.5 text-[10px] font-extrabold rounded-full bg-emerald-500/20 text-emerald-300 border border-emerald-500/40">
+                          {readyToSellCount} prêt
+                        </span>
+                      ) : activeProjectsCount > 0 ? (
+                        <span className="px-2 py-0.5 text-[10px] font-extrabold rounded-full bg-purple-500/20 text-purple-300 border border-purple-500/40">
+                          {activeProjectsCount} actif
+                        </span>
+                      ) : null}
+                    </>
+                  )}
+
+                  {item.id === 'timetracker' && activeTimer.isRunning && (
+                    <span className="flex h-2.5 w-2.5 relative">
+                      <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
+                      <span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-emerald-500"></span>
+                    </span>
+                  )}
+
+                  <ChevronRight
+                    className={`w-4 h-4 transition-transform ${
+                      isActive ? 'text-white translate-x-0.5 opacity-100' : 'text-slate-600 opacity-0 group-hover:opacity-100'
+                    }`}
+                  />
+                </div>
+              </button>
+            );
+          })}
+        </div>
+
+        {/* Bottom Section: Live Stopwatch Card (if timer active) + Status */}
+        <div className="p-3.5 border-t border-slate-850 space-y-2.5 bg-slate-950/60">
+          {/* Live Stopwatch Card */}
+          {activeTimer.elapsedSeconds > 0 && (
+            <div
+              onClick={() => handleNavClick('timetracker')}
+              className="cursor-pointer p-3 rounded-2xl bg-gradient-to-br from-slate-900 to-slate-950 border border-amber-500/40 shadow-lg shadow-amber-500/5 hover:border-amber-400 transition-all group"
+            >
+              <div className="flex items-center justify-between mb-1.5">
+                <div className="flex items-center space-x-1.5">
+                  <span className={`w-2 h-2 rounded-full ${activeTimer.isRunning ? 'bg-amber-400 animate-pulse' : 'bg-slate-500'}`} />
+                  <span className="text-[10px] uppercase font-bold tracking-wider text-amber-400">
+                    {activeTimer.isRunning ? 'Chrono en cours' : 'Chrono en pause'}
+                  </span>
+                </div>
+                <button
+                  type="button"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    activeTimer.isRunning ? pauseTimer() : resumeTimer();
+                  }}
+                  className="p-1 rounded-lg bg-amber-500/20 text-amber-300 hover:bg-amber-500/30 transition-all"
+                  title={activeTimer.isRunning ? 'Mettre en pause' : 'Reprendre'}
+                >
+                  {activeTimer.isRunning ? <Pause className="w-3.5 h-3.5" /> : <Play className="w-3.5 h-3.5" />}
+                </button>
+              </div>
+
+              <div className="font-mono text-lg font-black text-amber-300 tracking-tight">
+                {formatTimerDigits(activeTimer.elapsedSeconds)}
+              </div>
+
+              <div className="text-[11px] text-slate-400 truncate mt-0.5">
+                {activeTimerProject ? activeTimerProject.title : 'Session libre'}
+              </div>
+            </div>
+          )}
+
+          {/* User Profile & JWT Session Card */}
+          <div
+            onClick={() => {
+              setShowAuthModal(true);
+              setMobileOpen(false);
+            }}
+            className="p-2.5 rounded-2xl bg-slate-900/60 border border-slate-800 hover:border-pink-500/40 cursor-pointer flex items-center justify-between transition-all group"
+          >
+            <div className="flex items-center space-x-2.5 min-w-0">
+              <div className="relative shrink-0">
+                <img
+                  src={authSession.user?.avatarUrl || 'https://api.dicebear.com/7.x/bottts/svg?seed=uwu'}
+                  alt={authSession.user?.name}
+                  className="w-8 h-8 rounded-xl bg-slate-800 object-cover border border-slate-700"
+                />
+                {authSession.isAuthenticated && (
+                  <span className="absolute -top-0.5 -right-0.5 w-2 h-2 rounded-full bg-emerald-400 animate-pulse" />
+                )}
+              </div>
+              <div className="min-w-0 flex-1">
+                <div className="font-bold text-xs text-white truncate group-hover:text-pink-300 transition-colors">
+                  {authSession.user?.name}
+                </div>
+                <div className="text-[10px] text-slate-400 uppercase font-mono flex items-center space-x-1 truncate">
+                  <span>{authSession.user?.role}</span>
+                  <span>•</span>
+                  <span className="text-cyan-400">JWT Actif</span>
+                </div>
+              </div>
+            </div>
+
+            <span className="text-[10px] font-mono font-bold px-1.5 py-0.5 rounded bg-pink-500/10 text-pink-300 border border-pink-500/20 shrink-0">
+              Session
+            </span>
+          </div>
+
+          {/* Local Security & Version Badge */}
+          <div className="px-2 py-1 rounded-xl bg-slate-900/40 border border-slate-800 flex items-center justify-between text-[11px] text-slate-400">
+            <div className="flex items-center space-x-1.5">
+              <ShieldCheck className="w-3.5 h-3.5 text-emerald-400" />
+              <span>Base NCB EU</span>
+            </div>
+            <span className="text-[10px] font-mono text-slate-500">v1.2 JWT</span>
+          </div>
+        </div>
+      </aside>
+    </>
+  );
+};
diff --git a/src/components/common/ToastContainer.tsx b/src/components/common/ToastContainer.tsx
new file mode 100644
index 0000000..1d0f0a6
--- /dev/null
+++ b/src/components/common/ToastContainer.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import { CheckCircle2, AlertCircle, Info, AlertTriangle, X } from 'lucide-react';
+import { useApp } from '../../context/AppContext';
+
+export const ToastContainer: React.FC = () => {
+  const { toasts, removeToast } = useApp();
+
+  if (toasts.length === 0) return null;
+
+  return (
+    <div className="fixed bottom-5 right-5 z-50 flex flex-col space-y-3 max-w-sm w-full pointer-events-none no-print">
+      {toasts.map((toast) => {
+        let icon = <Info className="w-5 h-5 text-cyan-400 shrink-0" />;
+        let borderColor = 'border-cyan-500/40 bg-slate-900/95';
+
+        if (toast.type === 'success') {
+          icon = <CheckCircle2 className="w-5 h-5 text-emerald-400 shrink-0" />;
+          borderColor = 'border-emerald-500/40 bg-slate-900/95';
+        } else if (toast.type === 'error') {
+          icon = <AlertCircle className="w-5 h-5 text-rose-400 shrink-0" />;
+          borderColor = 'border-rose-500/40 bg-slate-900/95';
+        } else if (toast.type === 'warning') {
+          icon = <AlertTriangle className="w-5 h-5 text-amber-400 shrink-0" />;
+          borderColor = 'border-amber-500/40 bg-slate-900/95';
+        }
+
+        return (
+          <div
+            key={toast.id}
+            className={`pointer-events-auto flex items-start p-4 rounded-2xl border shadow-xl backdrop-blur-xl transition-all duration-300 transform translate-y-0 opacity-100 ${borderColor}`}
+          >
+            <div className="mr-3 mt-0.5">{icon}</div>
+            <div className="flex-1 mr-2">
+              <h4 className="text-sm font-bold text-white leading-tight">
+                {toast.title}
+              </h4>
+              <p className="text-xs text-slate-300 mt-1 leading-relaxed">
+                {toast.message}
+              </p>
+            </div>
+            <button
+              onClick={() => removeToast(toast.id)}
+              className="text-slate-400 hover:text-white p-1 rounded-lg transition-colors"
+            >
+              <X className="w-4 h-4" />
+            </button>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
diff --git a/src/components/common/TopHeader.tsx b/src/components/common/TopHeader.tsx
new file mode 100644
index 0000000..3aefed5
--- /dev/null
+++ b/src/components/common/TopHeader.tsx
@@ -0,0 +1,212 @@
+import React from 'react';
+import {
+  LayoutDashboard,
+  ShoppingCart,
+  Layers,
+  Clock,
+  BarChart3,
+  Settings as SettingsIcon,
+  Sparkles,
+  PackagePlus,
+  Coins,
+  Cpu,
+  Database,
+  RefreshCw,
+} from 'lucide-react';
+import { useApp } from '../../context/AppContext';
+import { formatCurrency } from '../../utils/calculations';
+
+export const TopHeader: React.FC = () => {
+  const {
+    currentTab,
+    inventory,
+    projects,
+    dbSyncStatus,
+    setShowNewProjectModal,
+    setShowNewInventoryModal,
+    authSession,
+    setShowAuthModal,
+  } = useApp();
+
+  // Quick topbar calculations
+  const totalStockValuation = inventory.reduce(
+    (acc, item) =>
+      acc +
+      item.quantityInStock *
+        (item.unitPurchasePrice + (item.shippingCostShare || 0) + (item.taxImportShare || 0)),
+    0
+  );
+
+  const activeProjectsCount = projects.filter(
+    (p) => p.status === 'in_progress' || p.status === 'qc_testing'
+  ).length;
+
+  const getPageInfo = () => {
+    switch (currentTab) {
+      case 'dashboard':
+        return {
+          title: 'Tableau de Bord & Finances',
+          subtitle: 'Vue d\'ensemble des performances, graphiques et pipeline d\'atelier',
+          icon: LayoutDashboard,
+          iconColor: 'text-pink-400',
+        };
+      case 'purchases':
+        return {
+          title: 'Achats & Gestion des Stocks',
+          subtitle: 'Consoles donneuses, écrans IPS, coques, composants et alertes de stock',
+          icon: ShoppingCart,
+          iconColor: 'text-cyan-400',
+        };
+      case 'projects':
+        return {
+          title: 'Centre de Dépenses Projets',
+          subtitle: 'Nomenclature pièces (BOM), temps d\'atelier, coût de revient et certificats',
+          icon: Layers,
+          iconColor: 'text-purple-400',
+        };
+      case 'timetracker':
+        return {
+          title: 'Chronomètre d\'Atelier & Main d\'Œuvre',
+          subtitle: 'Chronométrage des sessions de modding et valorisation horaire en direct',
+          icon: Clock,
+          iconColor: 'text-amber-400',
+        };
+      case 'analytics':
+        return {
+          title: 'Rentabilité & Simulateur de Prix',
+          subtitle: 'Calculateur de marge nette, point mort (break-even) et analyse par console',
+          icon: BarChart3,
+          iconColor: 'text-emerald-400',
+        };
+      case 'settings':
+        return {
+          title: 'Paramètres & Sauvegardes',
+          subtitle: 'Identité de l\'atelier, taux horaire par défaut, thèmes et connexion NoCodeBackend',
+          icon: SettingsIcon,
+          iconColor: 'text-slate-300',
+        };
+      default:
+        return {
+          title: 'uwuFinances',
+          subtitle: 'Console Modding Studio Hub',
+          icon: LayoutDashboard,
+          iconColor: 'text-pink-400',
+        };
+    }
+  };
+
+  const pageInfo = getPageInfo();
+  const Icon = pageInfo.icon;
+
+  return (
+    <header className="sticky top-0 z-30 w-full theme-header backdrop-blur-xl border-b border-slate-800/80 px-4 sm:px-8 py-3.5 flex items-center justify-between no-print">
+      {/* Page Title & Breadcrumb */}
+      <div className="flex items-center space-x-3.5">
+        <div className="p-2 rounded-xl bg-slate-900 border border-slate-800 hidden sm:flex items-center justify-center shadow-inner">
+          <Icon className={`w-5 h-5 ${pageInfo.iconColor}`} />
+        </div>
+        <div>
+          <h2 className="text-base sm:text-lg font-bold text-white tracking-tight flex items-center space-x-2">
+            <span>{pageInfo.title}</span>
+          </h2>
+          <p className="text-xs text-slate-400 hidden md:block">
+            {pageInfo.subtitle}
+          </p>
+        </div>
+      </div>
+
+      {/* Right Stats & Quick Actions */}
+      <div className="flex items-center space-x-2 sm:space-x-3">
+        {/* User Profile & JWT Button */}
+        <button
+          onClick={() => setShowAuthModal(true)}
+          className={`flex items-center space-x-2 px-2.5 py-1.5 rounded-xl text-xs border transition-all cursor-pointer ${
+            authSession.isAuthenticated
+              ? 'bg-slate-900 border-pink-500/30 hover:border-pink-500/60 text-slate-200'
+              : 'bg-slate-900/60 border-slate-800 hover:border-slate-700 text-slate-400'
+          }`}
+          title="Gérer la session utilisateur, le jeton JWT et la liaison NCB"
+        >
+          <div className="relative">
+            <img
+              src={authSession.user?.avatarUrl || 'https://api.dicebear.com/7.x/bottts/svg?seed=uwu'}
+              alt={authSession.user?.name}
+              className="w-5 h-5 rounded-full bg-slate-800 object-cover border border-slate-700"
+            />
+            {authSession.isAuthenticated && (
+              <span className="absolute -top-0.5 -right-0.5 w-2 h-2 rounded-full bg-emerald-400 animate-pulse" />
+            )}
+          </div>
+          <span className="font-semibold text-xs text-slate-200 hidden md:inline truncate max-w-[120px]">
+            {authSession.user?.name?.split(' ')[0] || 'Utilisateur'}
+          </span>
+          <span className="px-1.5 py-0.2 rounded text-[9px] font-mono font-bold uppercase bg-pink-500/15 text-pink-300 hidden lg:inline border border-pink-500/30">
+            JWT
+          </span>
+        </button>
+
+        {/* Cloud Database Status indicator */}
+        <button
+          onClick={() => setShowAuthModal(true)}
+          className={`hidden md:flex items-center space-x-1.5 px-2.5 py-1.5 rounded-xl text-xs border transition-all cursor-pointer ${
+            dbSyncStatus === 'connected'
+              ? 'bg-emerald-500/10 text-emerald-400 border-emerald-500/30 hover:bg-emerald-500/20'
+              : dbSyncStatus === 'syncing'
+              ? 'bg-amber-500/10 text-amber-400 border-amber-500/30'
+              : 'bg-rose-500/10 text-rose-400 border-rose-500/30 hover:bg-rose-500/20'
+          }`}
+          title="Statut Cloud Database NoCodeBackend (54770_uwu_finances) - Cliquez pour gérer"
+        >
+          {dbSyncStatus === 'syncing' ? (
+            <RefreshCw className="w-3 h-3 animate-spin text-amber-400" />
+          ) : (
+            <span className={`w-2 h-2 rounded-full ${
+              dbSyncStatus === 'connected' ? 'bg-emerald-400 animate-pulse' : 'bg-rose-400'
+            }`} />
+          )}
+          <Database className="w-3 h-3 text-slate-400" />
+          <span className="font-mono text-[11px] font-semibold">NCB EU</span>
+        </button>
+
+        {/* Quick Inventory Stock Valuation badge */}
+        <div className="hidden xl:flex items-center space-x-2 px-3 py-1.5 rounded-xl bg-slate-900/80 border border-slate-800 text-xs">
+          <Coins className="w-3.5 h-3.5 text-cyan-400" />
+          <span className="text-slate-400">Stock valorisé:</span>
+          <span className="font-mono font-bold text-cyan-300">
+            {formatCurrency(totalStockValuation)}
+          </span>
+        </div>
+
+        {/* Active Projects badge */}
+        <div className="hidden xl:flex items-center space-x-2 px-3 py-1.5 rounded-xl bg-slate-900/80 border border-slate-800 text-xs">
+          <Cpu className="w-3.5 h-3.5 text-purple-400" />
+          <span className="text-slate-400">En cours:</span>
+          <span className="font-mono font-bold text-purple-300">
+            {activeProjectsCount} projet{activeProjectsCount > 1 ? 's' : ''}
+          </span>
+        </div>
+
+        {/* Quick Add Part */}
+        <button
+          onClick={() => setShowNewInventoryModal(true)}
+          className="flex items-center space-x-1.5 px-3 py-1.5 sm:px-3.5 sm:py-2 rounded-xl text-xs sm:text-sm font-semibold bg-slate-900 text-cyan-300 border border-cyan-500/30 hover:bg-cyan-500/10 hover:border-cyan-500/60 shadow-sm transition-all duration-200"
+          title="Ajouter un achat de pièces au stock"
+        >
+          <PackagePlus className="w-4 h-4 text-cyan-400" />
+          <span className="hidden sm:inline">Achat Pièce</span>
+        </button>
+
+        {/* Quick New Project */}
+        <button
+          onClick={() => setShowNewProjectModal(true)}
+          className="flex items-center space-x-1.5 px-3 py-1.5 sm:px-3.5 sm:py-2 rounded-xl text-xs sm:text-sm font-bold bg-gradient-to-r from-pink-500 via-purple-600 to-pink-600 text-white shadow-lg shadow-pink-500/20 hover:shadow-pink-500/35 hover:scale-[1.02] active:scale-[0.98] transition-all duration-200"
+          title="Créer une nouvelle console custom"
+        >
+          <Sparkles className="w-4 h-4 text-pink-200" />
+          <span>Nouveau Projet</span>
+        </button>
+      </div>
+    </header>
+  );
+};
+
diff --git a/src/components/dashboard/DashboardView.tsx b/src/components/dashboard/DashboardView.tsx
new file mode 100644
index 0000000..e3d6170
--- /dev/null
+++ b/src/components/dashboard/DashboardView.tsx
@@ -0,0 +1,863 @@
+import React from 'react';
+import {
+  TrendingUp,
+  DollarSign,
+  Package,
+  Clock,
+  AlertTriangle,
+  Sparkles,
+  Gamepad2,
+  ArrowUpRight,
+  ArrowRight,
+  Plus,
+  Play,
+  CheckCircle2,
+  Box,
+  Layers,
+  Wrench,
+  Percent,
+  PieChart as PieIcon,
+  BarChart2,
+} from 'lucide-react';
+import {
+  ResponsiveContainer,
+  AreaChart,
+  Area,
+  XAxis,
+  YAxis,
+  Tooltip,
+  PieChart,
+  Pie,
+  Cell,
+  BarChart,
+  Bar,
+  Legend,
+} from 'recharts';
+import { useApp } from '../../context/AppContext';
+import {
+  calculateProjectFinancials,
+  calculateTotalStockValue,
+  formatCurrency,
+  formatMinutes,
+  getProjectStatusInfo,
+} from '../../utils/calculations';
+
+
+
+
+export const DashboardView: React.FC = () => {
+  const {
+    projects,
+    inventory,
+    settings,
+    setCurrentTab,
+    setSelectedProjectId,
+    setShowNewProjectModal,
+    setShowNewInventoryModal,
+    startTimer,
+  } = useApp();
+
+  // 1. Calculate All Financial Metrics
+  const soldProjects = projects.filter((p) => p.status === 'sold');
+  const inStockReadyProjects = projects.filter((p) => p.status === 'in_stock_ready');
+  const inProgressProjects = projects.filter(
+    (p) => p.status === 'in_progress' || p.status === 'qc_testing'
+  );
+
+  // Total Revenue from sold builds
+  const totalRevenue = soldProjects.reduce((sum, p) => {
+    return sum + (p.salePriceActual !== undefined ? p.salePriceActual : p.salePriceTarget || 0);
+  }, 0);
+
+  // Total Hardware/Direct Costs for sold builds
+  const totalSoldDirectCosts = soldProjects.reduce((sum, p) => {
+    const fin = calculateProjectFinancials(p);
+    return sum + fin.hardwareDirectCost + fin.shippingAndPlatformCost;
+  }, 0);
+
+  // Total Net Profit for sold builds (CA - COGS)
+  const totalNetProfit = soldProjects.reduce((sum, p) => {
+    const fin = calculateProjectFinancials(p);
+    return sum + fin.netProfit;
+  }, 0);
+
+  // Total Gross Profit for sold builds (CA - Hardware)
+  const totalGrossProfit = totalRevenue - totalSoldDirectCosts;
+
+  // Average Margin %
+  const averageMarginPercent =
+    soldProjects.length > 0
+      ? soldProjects.reduce((sum, p) => sum + calculateProjectFinancials(p).marginPercent, 0) /
+        soldProjects.length
+      : 0;
+
+  // Total Labor time logged across all projects
+  const totalLaborMinutesAll = projects.reduce((sum, p) => {
+    return sum + p.timeSessions.reduce((s, t) => s + t.durationMinutes, 0);
+  }, 0);
+
+  // Total Labor time for sold builds only
+  const totalLaborMinutesSold = soldProjects.reduce((sum, p) => {
+    return sum + p.timeSessions.reduce((s, t) => s + t.durationMinutes, 0);
+  }, 0);
+
+  // Effective Hourly Rate on sold builds: Total Net Before Labor / Hours
+  const effectiveHourlyRateAverage =
+    totalLaborMinutesSold > 0
+      ? totalGrossProfit / (totalLaborMinutesSold / 60)
+      : 0;
+
+  // Total Inventory Value (Parts & Donor Consoles in stock)
+  const totalStockValue = calculateTotalStockValue(inventory);
+
+  // Total potential value of finished consoles currently in stock ready to sell
+  const potentialShowcaseRevenue = inStockReadyProjects.reduce(
+    (sum, p) => sum + (p.salePriceTarget || 0),
+    0
+  );
+
+  // Count donor consoles in stock (category === 'console_base')
+  const donorConsolesInStock = inventory
+    .filter((i) => i.category === 'console_base')
+    .reduce((sum, i) => sum + i.quantityInStock, 0);
+
+  // Low stock alerts
+  const lowStockItems = inventory.filter(
+    (item) => item.quantityInStock <= item.minStockAlert
+  );
+
+  // Group projects by Console Model for breakdown
+  const modelStats: Record<string, { count: number; soldCount: number; profit: number }> = {};
+  projects.forEach((proj) => {
+    if (!modelStats[proj.consoleModel]) {
+      modelStats[proj.consoleModel] = { count: 0, soldCount: 0, profit: 0 };
+    }
+    modelStats[proj.consoleModel].count += 1;
+    if (proj.status === 'sold') {
+      modelStats[proj.consoleModel].soldCount += 1;
+      modelStats[proj.consoleModel].profit += calculateProjectFinancials(proj).netProfit;
+    }
+  });
+
+  return (
+    <div className="space-y-8 pb-12 animate-fadeIn">
+      
+      {/* Welcome Banner */}
+      <div className="relative overflow-hidden rounded-3xl bg-gradient-to-r from-slate-900 via-purple-950/40 to-slate-900 border border-pink-500/20 p-6 sm:p-8 shadow-2xl">
+        <div className="absolute top-0 right-0 -mr-16 -mt-16 w-64 h-64 bg-pink-500/10 rounded-full blur-3xl pointer-events-none" />
+        <div className="absolute bottom-0 right-32 -mb-16 w-64 h-64 bg-cyan-500/10 rounded-full blur-3xl pointer-events-none" />
+
+        <div className="relative z-10 flex flex-col md:flex-row md:items-center justify-between gap-6">
+          <div className="space-y-2">
+            <div className="inline-flex items-center space-x-2 px-3 py-1 rounded-full text-xs font-semibold bg-pink-500/10 text-pink-400 border border-pink-500/30">
+              <Sparkles className="w-3.5 h-3.5" />
+              <span>Studio & Atelier de Customisation</span>
+            </div>
+            <h2 className="text-2xl sm:text-3xl font-black text-white font-display">
+              Tableau de bord financier & Atelier
+            </h2>
+            <p className="text-slate-400 text-sm max-w-2xl leading-relaxed">
+              Supervisez en direct vos achats de pièces, vos coûts de fabrication par console, 
+              le temps passé sur chaque mod et la rentabilité nette de votre activité.
+            </p>
+          </div>
+
+          <div className="flex flex-wrap items-center gap-3 shrink-0">
+            <button
+              onClick={() => {
+                startTimer();
+                setCurrentTab('timetracker');
+              }}
+              className="flex items-center space-x-2 px-4 py-2.5 rounded-2xl bg-amber-500/15 text-amber-300 border border-amber-500/30 hover:bg-amber-500/25 hover:border-amber-500/50 transition-all font-semibold text-sm shadow-md"
+            >
+              <Play className="w-4 h-4 fill-amber-300 text-amber-300" />
+              <span>Lancer Chrono Établi</span>
+            </button>
+            <button
+              onClick={() => setShowNewProjectModal(true)}
+              className="flex items-center space-x-2 px-4 py-2.5 rounded-2xl bg-gradient-to-r from-pink-500 to-purple-600 text-white font-bold text-sm shadow-lg shadow-pink-500/20 hover:scale-[1.02] active:scale-[0.98] transition-all"
+            >
+              <Plus className="w-4 h-4" />
+              <span>Nouvelle Console</span>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Main KPI Cards Grid */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
+        
+        {/* CA & Ventes */}
+        <div className="glass-panel p-5 rounded-2xl border border-slate-800 hover:border-pink-500/40 transition-all group">
+          <div className="flex items-center justify-between">
+            <span className="text-xs font-bold uppercase tracking-wider text-slate-400">
+              Chiffre d'Affaires Réalisé
+            </span>
+            <div className="w-10 h-10 rounded-xl bg-pink-500/10 flex items-center justify-center text-pink-400 group-hover:scale-110 transition-transform">
+              <DollarSign className="w-5 h-5" />
+            </div>
+          </div>
+          <div className="mt-3">
+            <div className="text-2xl sm:text-3xl font-black text-white font-mono">
+              {formatCurrency(totalRevenue, settings.currency)}
+            </div>
+            <div className="flex items-center mt-2 text-xs text-slate-400">
+              <span className="text-emerald-400 font-bold mr-1.5 flex items-center">
+                <ArrowUpRight className="w-3.5 h-3.5 mr-0.5" />
+                {soldProjects.length} vendue{soldProjects.length > 1 ? 's' : ''}
+              </span>
+              <span>sur {projects.length} projets totaux</span>
+            </div>
+          </div>
+        </div>
+
+        {/* Bénéfice Net Réalisé */}
+        <div className="glass-panel p-5 rounded-2xl border border-slate-800 hover:border-emerald-500/40 transition-all group">
+          <div className="flex items-center justify-between">
+            <span className="text-xs font-bold uppercase tracking-wider text-slate-400">
+              Bénéfice Net Réalisé
+            </span>
+            <div className="w-10 h-10 rounded-xl bg-emerald-500/10 flex items-center justify-center text-emerald-400 group-hover:scale-110 transition-transform">
+              <TrendingUp className="w-5 h-5" />
+            </div>
+          </div>
+          <div className="mt-3">
+            <div className="text-2xl sm:text-3xl font-black text-emerald-400 font-mono">
+              {formatCurrency(totalNetProfit, settings.currency)}
+            </div>
+            <div className="flex items-center mt-2 text-xs text-slate-400">
+              <span className="text-emerald-300 font-semibold mr-1">
+                Marge moy. : {averageMarginPercent.toFixed(1)}%
+              </span>
+              <span>(après main d'œuvre)</span>
+            </div>
+          </div>
+        </div>
+
+        {/* Valeur Stock Pièces & Consoles */}
+        <div className="glass-panel p-5 rounded-2xl border border-slate-800 hover:border-cyan-500/40 transition-all group cursor-pointer" onClick={() => setCurrentTab('purchases')}>
+          <div className="flex items-center justify-between">
+            <span className="text-xs font-bold uppercase tracking-wider text-slate-400">
+              Valeur Stock Pièces
+            </span>
+            <div className="w-10 h-10 rounded-xl bg-cyan-500/10 flex items-center justify-center text-cyan-400 group-hover:scale-110 transition-transform">
+              <Package className="w-5 h-5" />
+            </div>
+          </div>
+          <div className="mt-3">
+            <div className="text-2xl sm:text-3xl font-black text-cyan-300 font-mono">
+              {formatCurrency(totalStockValue, settings.currency)}
+            </div>
+            <div className="flex items-center mt-2 text-xs text-slate-400">
+              <span className="text-cyan-400 font-bold mr-1">
+                {donorConsolesInStock} consoles brutes
+              </span>
+              <span>+ {inventory.length} réf. pièces</span>
+            </div>
+          </div>
+        </div>
+
+        {/* Temps d'Atelier & Rémunération Réelle */}
+        <div className="glass-panel p-5 rounded-2xl border border-slate-800 hover:border-amber-500/40 transition-all group cursor-pointer" onClick={() => setCurrentTab('timetracker')}>
+          <div className="flex items-center justify-between">
+            <span className="text-xs font-bold uppercase tracking-wider text-slate-400">
+              Temps Total d'Atelier
+            </span>
+            <div className="w-10 h-10 rounded-xl bg-amber-500/10 flex items-center justify-center text-amber-400 group-hover:scale-110 transition-transform">
+              <Clock className="w-5 h-5" />
+            </div>
+          </div>
+          <div className="mt-3">
+            <div className="text-2xl sm:text-3xl font-black text-amber-300 font-mono">
+              {formatMinutes(totalLaborMinutesAll)}
+            </div>
+            <div className="flex items-center mt-2 text-xs text-slate-400">
+              <span className="text-amber-400 font-bold mr-1">
+                {effectiveHourlyRateAverage > 0 ? `${formatCurrency(effectiveHourlyRateAverage, settings.currency)}/h` : 'Taux configuré : ' + settings.defaultHourlyRate + '€/h'}
+              </span>
+              <span>taux effectif</span>
+            </div>
+          </div>
+        </div>
+
+      </div>
+
+      {/* Consoles Status Tracker Bar */}
+      <div className="glass-panel rounded-3xl p-6 border border-slate-800">
+        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6">
+          <div>
+            <h3 className="text-lg font-bold text-white flex items-center space-x-2">
+              <Gamepad2 className="w-5 h-5 text-pink-400" />
+              <span>Parc & Pipeline de Consoles</span>
+            </h3>
+            <p className="text-xs text-slate-400 mt-0.5">
+              Suivi du cycle de vie complet : des consoles brutes au stock prêt à vendre
+            </p>
+          </div>
+          <div className="text-xs text-slate-400 font-mono">
+            Valeur vitrine en stock : <span className="text-emerald-400 font-bold">{formatCurrency(potentialShowcaseRevenue, settings.currency)}</span>
+          </div>
+        </div>
+
+        <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
+          <div
+            onClick={() => setCurrentTab('purchases')}
+            className="bg-slate-900/80 rounded-2xl p-4 border border-amber-500/20 hover:border-amber-500/60 hover:bg-slate-900 cursor-pointer transition-all group"
+            title="Voir le stock de consoles brutes"
+          >
+            <div className="text-xs text-amber-400 font-semibold flex items-center group-hover:translate-x-0.5 transition-transform">
+              <Box className="w-3.5 h-3.5 mr-1.5" /> Consoles Brutes
+            </div>
+            <div className="text-2xl font-black text-white font-mono mt-1">
+              {donorConsolesInStock} <span className="text-xs font-normal text-slate-400">en stock</span>
+            </div>
+            <div className="text-[11px] text-slate-400 mt-1">Prêtes à être moddées →</div>
+          </div>
+
+          <div
+            onClick={() => {
+              setSelectedProjectId(null);
+              setCurrentTab('projects');
+            }}
+            className="bg-slate-900/80 rounded-2xl p-4 border border-blue-500/20 hover:border-blue-500/60 hover:bg-slate-900 cursor-pointer transition-all group"
+            title="Gérer les builds en cours d'atelier"
+          >
+            <div className="text-xs text-blue-400 font-semibold flex items-center group-hover:translate-x-0.5 transition-transform">
+              <Wrench className="w-3.5 h-3.5 mr-1.5" /> En cours d'Atelier
+            </div>
+            <div className="text-2xl font-black text-white font-mono mt-1">
+              {inProgressProjects.length} <span className="text-xs font-normal text-slate-400">builds</span>
+            </div>
+            <div className="text-[11px] text-slate-400 mt-1">Soudure & Assemblage →</div>
+          </div>
+
+          <div
+            onClick={() => {
+              setSelectedProjectId(null);
+              setCurrentTab('projects');
+            }}
+            className="bg-slate-900/80 rounded-2xl p-4 border border-emerald-500/20 hover:border-emerald-500/60 hover:bg-slate-900 cursor-pointer transition-all group"
+            title="Voir les consoles finies en stock prêtes à vendre"
+          >
+            <div className="text-xs text-emerald-400 font-semibold flex items-center group-hover:translate-x-0.5 transition-transform">
+              <Sparkles className="w-3.5 h-3.5 mr-1.5" /> En Vitrine / Prêtes
+            </div>
+            <div className="text-2xl font-black text-emerald-400 font-mono mt-1">
+              {inStockReadyProjects.length} <span className="text-xs font-normal text-slate-400">consoles</span>
+            </div>
+            <div className="text-[11px] text-slate-400 mt-1">Prêtes pour la vente →</div>
+          </div>
+
+          <div
+            onClick={() => {
+              setSelectedProjectId(null);
+              setCurrentTab('projects');
+            }}
+            className="bg-slate-900/80 rounded-2xl p-4 border border-pink-500/20 hover:border-pink-500/60 hover:bg-slate-900 cursor-pointer transition-all group"
+            title="Voir l'historique des consoles vendues"
+          >
+            <div className="text-xs text-pink-400 font-semibold flex items-center group-hover:translate-x-0.5 transition-transform">
+              <CheckCircle2 className="w-3.5 h-3.5 mr-1.5" /> Consoles Vendues
+            </div>
+            <div className="text-2xl font-black text-pink-400 font-mono mt-1">
+              {soldProjects.length} <span className="text-xs font-normal text-slate-400">livrées</span>
+            </div>
+            <div className="text-[11px] text-slate-400 mt-1">Clients comblés 🎉 →</div>
+          </div>
+        </div>
+      </div>
+
+      {/* Interactive Charts Section 1: Financial Area Trend & Cost Donut */}
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        
+        {/* Left: Financial Performance Area Chart */}
+        <div className="lg:col-span-2 glass-panel p-6 rounded-3xl border border-slate-800 space-y-4">
+          <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2">
+            <div>
+              <h3 className="text-base font-bold text-white flex items-center space-x-2">
+                <BarChart2 className="w-5 h-5 text-pink-400" />
+                <span>Performance Financière par Console</span>
+              </h3>
+              <p className="text-xs text-slate-400">
+                Comparaison Chiffre d'Affaires, Coût Total de Revient et Bénéfice Net
+              </p>
+            </div>
+            <div className="flex items-center space-x-3 text-xs font-mono">
+              <span className="flex items-center text-pink-400">
+                <span className="w-2.5 h-2.5 rounded-full bg-pink-500 mr-1.5" /> Prix Vente
+              </span>
+              <span className="flex items-center text-cyan-400">
+                <span className="w-2.5 h-2.5 rounded-full bg-cyan-500 mr-1.5" /> Coûts (COGS)
+              </span>
+              <span className="flex items-center text-emerald-400">
+                <span className="w-2.5 h-2.5 rounded-full bg-emerald-500 mr-1.5" /> Bénéfice
+              </span>
+            </div>
+          </div>
+
+          <div className="h-72 w-full pt-2">
+            <ResponsiveContainer width="100%" height="100%">
+              <AreaChart
+                data={projects.map((p) => {
+                  const f = calculateProjectFinancials(p);
+                  return {
+                    name: p.serialNumber,
+                    title: p.title,
+                    revenue: f.revenue,
+                    cogs: f.totalCostOfGoodsSold,
+                    netProfit: f.netProfit,
+                    hardwareCost: f.hardwareDirectCost,
+                    laborCost: f.laborCost,
+                  };
+                })}
+                margin={{ top: 10, right: 10, left: -20, bottom: 0 }}
+              >
+                <defs>
+                  <linearGradient id="colorRevenue" x1="0" y1="0" x2="0" y2="1">
+                    <stop offset="5%" stopColor="#ec4899" stopOpacity={0.4} />
+                    <stop offset="95%" stopColor="#ec4899" stopOpacity={0.0} />
+                  </linearGradient>
+                  <linearGradient id="colorCogs" x1="0" y1="0" x2="0" y2="1">
+                    <stop offset="5%" stopColor="#06b6d4" stopOpacity={0.3} />
+                    <stop offset="95%" stopColor="#06b6d4" stopOpacity={0.0} />
+                  </linearGradient>
+                  <linearGradient id="colorProfit" x1="0" y1="0" x2="0" y2="1">
+                    <stop offset="5%" stopColor="#10b981" stopOpacity={0.4} />
+                    <stop offset="95%" stopColor="#10b981" stopOpacity={0.0} />
+                  </linearGradient>
+                </defs>
+                <XAxis
+                  dataKey="name"
+                  stroke="#64748b"
+                  fontSize={11}
+                  tickLine={false}
+                  axisLine={{ stroke: '#334155' }}
+                />
+                <YAxis
+                  stroke="#64748b"
+                  fontSize={11}
+                  tickLine={false}
+                  axisLine={{ stroke: '#334155' }}
+                  tickFormatter={(val) => `${val}€`}
+                />
+                <Tooltip
+                  content={({ active, payload }) => {
+                    if (active && payload && payload.length) {
+                      const data = payload[0].payload;
+                      return (
+                        <div className="bg-slate-900 border border-slate-700 p-3 rounded-2xl shadow-xl text-xs space-y-1.5 font-mono">
+                          <div className="font-bold text-white font-sans text-xs pb-1 border-b border-slate-800">
+                            {data.title} ({data.name})
+                          </div>
+                          <div className="flex justify-between space-x-4 text-pink-400">
+                            <span>Prix Vente :</span>
+                            <span className="font-bold">{formatCurrency(data.revenue, settings.currency)}</span>
+                          </div>
+                          <div className="flex justify-between space-x-4 text-cyan-300">
+                            <span>Coût Revient :</span>
+                            <span>{formatCurrency(data.cogs, settings.currency)}</span>
+                          </div>
+                          <div className="flex justify-between space-x-4 text-slate-400 text-[10px]">
+                            <span>↳ Matériel : {formatCurrency(data.hardwareCost, settings.currency)}</span>
+                            <span>↳ Mo : {formatCurrency(data.laborCost, settings.currency)}</span>
+                          </div>
+                          <div className="flex justify-between space-x-4 text-emerald-400 font-bold pt-1 border-t border-slate-800">
+                            <span>Bénéfice Net :</span>
+                            <span>{formatCurrency(data.netProfit, settings.currency)}</span>
+                          </div>
+                        </div>
+                      );
+                    }
+                    return null;
+                  }}
+                />
+                <Area
+                  type="monotone"
+                  dataKey="revenue"
+                  stroke="#ec4899"
+                  strokeWidth={2.5}
+                  fillOpacity={1}
+                  fill="url(#colorRevenue)"
+                />
+                <Area
+                  type="monotone"
+                  dataKey="cogs"
+                  stroke="#06b6d4"
+                  strokeWidth={2}
+                  fillOpacity={1}
+                  fill="url(#colorCogs)"
+                />
+                <Area
+                  type="monotone"
+                  dataKey="netProfit"
+                  stroke="#10b981"
+                  strokeWidth={2.5}
+                  fillOpacity={1}
+                  fill="url(#colorProfit)"
+                />
+              </AreaChart>
+            </ResponsiveContainer>
+          </div>
+        </div>
+
+        {/* Right: Cost Structure Donut Chart */}
+        <div className="glass-panel p-6 rounded-3xl border border-slate-800 space-y-4 flex flex-col justify-between">
+          <div>
+            <h3 className="text-base font-bold text-white flex items-center space-x-2">
+              <PieIcon className="w-5 h-5 text-purple-400" />
+              <span>Répartition des Dépenses</span>
+            </h3>
+            <p className="text-xs text-slate-400">
+              Coûts engagés sur l'ensemble de vos builds
+            </p>
+          </div>
+
+          {(() => {
+            let screens = 0;
+            let consoles = 0;
+            let shells = 0;
+            let power = 0;
+            let audio = 0;
+            let labor = 0;
+            let fees = 0;
+
+            projects.forEach((p) => {
+              const fin = calculateProjectFinancials(p);
+              labor += fin.laborCost;
+              fees += fin.consumablesAndPackagingCost + fin.shippingAndPlatformCost;
+              p.parts.forEach((pt) => {
+                if (pt.category === 'screen') screens += pt.totalCost;
+                else if (pt.category === 'console_base') consoles += pt.totalCost;
+                else if (pt.category === 'shell' || pt.category === 'buttons_pads') shells += pt.totalCost;
+                else if (pt.category === 'battery_power') power += pt.totalCost;
+                else if (pt.category === 'sound_amp') audio += pt.totalCost;
+                else fees += pt.totalCost;
+              });
+            });
+
+            const pieData = [
+              { name: 'Écrans IPS/OLED', value: Math.round(screens), color: '#06b6d4' },
+              { name: 'Consoles Donneuses', value: Math.round(consoles), color: '#f59e0b' },
+              { name: 'Coques & Boutons', value: Math.round(shells), color: '#a855f7' },
+              { name: 'Main d\'œuvre', value: Math.round(labor), color: '#ec4899' },
+              { name: 'Batteries & USB-C', value: Math.round(power), color: '#10b981' },
+              { name: 'Audio & Amplis', value: Math.round(audio), color: '#3b82f6' },
+              { name: 'Frais & Consommables', value: Math.round(fees), color: '#64748b' },
+            ].filter((d) => d.value > 0);
+
+            const totalPieCost = pieData.reduce((s, d) => s + d.value, 0);
+
+            return (
+              <>
+                <div className="h-48 w-full relative flex items-center justify-center">
+                  <ResponsiveContainer width="100%" height="100%">
+                    <PieChart>
+                      <Pie
+                        data={pieData}
+                        cx="50%"
+                        cy="50%"
+                        innerRadius={55}
+                        outerRadius={80}
+                        paddingAngle={3}
+                        dataKey="value"
+                      >
+                        {pieData.map((entry, index) => (
+                          <Cell key={`cell-${index}`} fill={entry.color} />
+                        ))}
+                      </Pie>
+                      <Tooltip
+                        content={({ active, payload }) => {
+                          if (active && payload && payload.length) {
+                            const data = payload[0];
+                            const percent = totalPieCost > 0 ? ((Number(data.value) / totalPieCost) * 100).toFixed(1) : 0;
+                            return (
+                              <div className="bg-slate-900 border border-slate-700 p-2.5 rounded-xl shadow-xl text-xs font-mono">
+                                <div className="font-bold text-white">{data.name}</div>
+                                <div className="text-cyan-400">{formatCurrency(Number(data.value), settings.currency)} ({percent}%)</div>
+                              </div>
+                            );
+                          }
+                          return null;
+                        }}
+                      />
+                    </PieChart>
+                  </ResponsiveContainer>
+                  <div className="absolute inset-0 flex flex-col items-center justify-center pointer-events-none">
+                    <span className="text-[10px] text-slate-400 uppercase font-bold tracking-wider">Total</span>
+                    <span className="text-base font-black text-white font-mono">{formatCurrency(totalPieCost, settings.currency)}</span>
+                  </div>
+                </div>
+
+                <div className="grid grid-cols-2 gap-1.5 text-[11px] pt-2 border-t border-slate-800">
+                  {pieData.slice(0, 6).map((item) => (
+                    <div key={item.name} className="flex items-center space-x-1.5 truncate">
+                      <span className="w-2 h-2 rounded-full shrink-0" style={{ backgroundColor: item.color }} />
+                      <span className="text-slate-300 truncate">{item.name}</span>
+                    </div>
+                  ))}
+                </div>
+              </>
+            );
+          })()}
+        </div>
+
+      </div>
+
+      {/* Interactive Charts Section 2: Bar Chart Breakdown by Console Model */}
+      <div className="glass-panel p-6 rounded-3xl border border-slate-800 space-y-4">
+        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2">
+          <div>
+            <h3 className="text-base font-bold text-white flex items-center space-x-2">
+              <Gamepad2 className="w-5 h-5 text-cyan-400" />
+              <span>Volume & Statut de Production par Modèle</span>
+            </h3>
+            <p className="text-xs text-slate-400">
+              Répartition des consoles en cours, en vitrine et déjà vendues
+            </p>
+          </div>
+        </div>
+
+        <div className="h-60 w-full pt-2">
+          <ResponsiveContainer width="100%" height="100%">
+            <BarChart
+              data={Object.entries(modelStats).map(([model, data]) => {
+                const inProgress = projects.filter((p) => p.consoleModel === model && (p.status === 'in_progress' || p.status === 'qc_testing')).length;
+                const ready = projects.filter((p) => p.consoleModel === model && p.status === 'in_stock_ready').length;
+                const sold = projects.filter((p) => p.consoleModel === model && p.status === 'sold').length;
+                return {
+                  model,
+                  'En cours': inProgress,
+                  'En Vitrine': ready,
+                  'Vendues': sold,
+                  totalProfit: data.profit,
+                };
+              })}
+              margin={{ top: 10, right: 10, left: -20, bottom: 0 }}
+            >
+              <XAxis dataKey="model" stroke="#64748b" fontSize={11} tickLine={false} axisLine={{ stroke: '#334155' }} />
+              <YAxis stroke="#64748b" fontSize={11} tickLine={false} axisLine={{ stroke: '#334155' }} allowDecimals={false} />
+              <Tooltip
+                content={({ active, payload }) => {
+                  if (active && payload && payload.length) {
+                    const d = payload[0].payload;
+                    return (
+                      <div className="bg-slate-900 border border-slate-700 p-3 rounded-2xl shadow-xl text-xs space-y-1 font-mono">
+                        <div className="font-bold text-white font-sans text-xs pb-1 border-b border-slate-800">{d.model}</div>
+                        <div className="text-blue-400">⚡ En cours : {d['En cours']} build(s)</div>
+                        <div className="text-emerald-400">✨ En vitrine : {d['En Vitrine']} console(s)</div>
+                        <div className="text-pink-400">🎉 Vendues : {d['Vendues']} console(s)</div>
+                        {d.totalProfit > 0 && (
+                          <div className="text-amber-300 font-bold pt-1 border-t border-slate-800">
+                            Gain Net Total : {formatCurrency(d.totalProfit, settings.currency)}
+                          </div>
+                        )}
+                      </div>
+                    );
+                  }
+                  return null;
+                }}
+              />
+              <Legend wrapperStyle={{ fontSize: '11px', paddingTop: '8px' }} />
+              <Bar dataKey="En cours" fill="#3b82f6" radius={[4, 4, 0, 0]} />
+              <Bar dataKey="En Vitrine" fill="#10b981" radius={[4, 4, 0, 0]} />
+              <Bar dataKey="Vendues" fill="#ec4899" radius={[4, 4, 0, 0]} />
+            </BarChart>
+          </ResponsiveContainer>
+        </div>
+      </div>
+
+
+
+      {/* Two Columns: Recent/Active Projects & Stock Alerts */}
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+        
+        {/* Left 2 Cols: Projects & Custom Builds Showcase */}
+        <div className="lg:col-span-2 space-y-6">
+          <div className="flex items-center justify-between">
+            <div>
+              <h3 className="text-lg font-bold text-white flex items-center space-x-2">
+                <Layers className="w-5 h-5 text-purple-400" />
+                <span>Consoles Récents & Projets Actifs</span>
+              </h3>
+              <p className="text-xs text-slate-400">
+                Accédez aux fiches de dépenses, temps et rentabilité par console
+              </p>
+            </div>
+            <button
+              onClick={() => setCurrentTab('projects')}
+              className="text-xs font-semibold text-pink-400 hover:text-pink-300 flex items-center space-x-1"
+            >
+              <span>Voir tout ({projects.length})</span>
+              <ArrowRight className="w-3.5 h-3.5" />
+            </button>
+          </div>
+
+          <div className="space-y-3.5">
+            {projects.slice(0, 4).map((project) => {
+              const fin = calculateProjectFinancials(project);
+              const statusInfo = getProjectStatusInfo(project.status);
+
+              return (
+                <div
+                  key={project.id}
+                  onClick={() => {
+                    setSelectedProjectId(project.id);
+                    setCurrentTab('projects');
+                  }}
+                  className="glass-panel p-4 sm:p-5 rounded-2xl border border-slate-800/80 hover:border-purple-500/40 cursor-pointer transition-all duration-200 group"
+                >
+                  <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                    <div className="flex items-start space-x-3.5">
+                      <div className="w-12 h-12 rounded-xl bg-slate-900 border border-slate-800 flex items-center justify-center shrink-0 text-pink-400 group-hover:scale-105 transition-transform">
+                        <Gamepad2 className="w-6 h-6" />
+                      </div>
+                      <div>
+                        <div className="flex items-center space-x-2">
+                          <h4 className="text-sm font-bold text-white group-hover:text-pink-300 transition-colors">
+                            {project.title}
+                          </h4>
+                        </div>
+                        <div className="flex flex-wrap items-center gap-2 mt-1">
+                          <span className="text-[11px] font-mono text-slate-400">
+                            {project.serialNumber}
+                          </span>
+                          <span className="text-slate-600">•</span>
+                          <span className="text-[11px] text-cyan-400 font-semibold">
+                            {project.consoleModel}
+                          </span>
+                          <span className="text-slate-600">•</span>
+                          <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold ${statusInfo.bg} ${statusInfo.text}`}>
+                            <span className={`w-1.5 h-1.5 rounded-full ${statusInfo.dot} mr-1`} />
+                            {statusInfo.label}
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+
+                    <div className="flex items-center justify-between sm:justify-end sm:space-x-6 border-t sm:border-t-0 pt-2 sm:pt-0 border-slate-800/80">
+                      <div className="text-left sm:text-right">
+                        <div className="text-xs text-slate-400">Prix Vente</div>
+                        <div className="text-sm font-bold text-white font-mono">
+                          {formatCurrency(fin.revenue, settings.currency)}
+                        </div>
+                      </div>
+
+                      <div className="text-left sm:text-right">
+                        <div className="text-xs text-slate-400">Bénéfice Net</div>
+                        <div className={`text-sm font-bold font-mono ${fin.netProfit >= 0 ? 'text-emerald-400' : 'text-rose-400'}`}>
+                          {formatCurrency(fin.netProfit, settings.currency)}
+                        </div>
+                      </div>
+
+                      <div className="text-left sm:text-right hidden md:block">
+                        <div className="text-xs text-slate-400">Temps</div>
+                        <div className="text-xs font-semibold text-amber-300 font-mono">
+                          {formatMinutes(fin.laborMinutes)}
+                        </div>
+                      </div>
+
+                      <ArrowRight className="w-4 h-4 text-slate-500 group-hover:text-white group-hover:translate-x-1 transition-all" />
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+
+        {/* Right 1 Col: Stock Alerts & Inventory Quick-Look */}
+        <div className="space-y-6">
+          <div className="flex items-center justify-between">
+            <h3 className="text-lg font-bold text-white flex items-center space-x-2">
+              <AlertTriangle className="w-5 h-5 text-amber-400" />
+              <span>Alertes & Stock Pièces</span>
+            </h3>
+            <button
+              onClick={() => setCurrentTab('purchases')}
+              className="text-xs font-semibold text-cyan-400 hover:text-cyan-300"
+            >
+              Gérer le stock
+            </button>
+          </div>
+
+          <div className="glass-panel p-5 rounded-3xl border border-slate-800 space-y-4">
+            {lowStockItems.length > 0 ? (
+              <div className="space-y-3">
+                <div className="p-3 rounded-2xl bg-amber-500/10 border border-amber-500/30 text-amber-300 text-xs flex items-start space-x-2">
+                  <AlertTriangle className="w-4 h-4 shrink-0 mt-0.5 text-amber-400" />
+                  <div>
+                    <span className="font-bold">{lowStockItems.length} article(s)</span> en stock critique. Pensez à réapprovisionner pour ne pas bloquer vos futurs builds.
+                  </div>
+                </div>
+
+                <div className="divide-y divide-slate-800/80">
+                  {lowStockItems.slice(0, 4).map((item) => (
+                    <div key={item.id} className="py-2.5 flex items-center justify-between text-xs">
+                      <div className="pr-2">
+                        <div className="font-semibold text-slate-200 truncate max-w-[170px]">
+                          {item.name}
+                        </div>
+                        <div className="text-[10px] text-slate-400">
+                          {item.consoleModel} • Fournisseur: {item.supplier}
+                        </div>
+                      </div>
+                      <div className="text-right shrink-0">
+                        <span className="px-2 py-0.5 rounded-full font-bold bg-rose-500/15 text-rose-300 border border-rose-500/30 font-mono">
+                          {item.quantityInStock} dispo
+                        </span>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            ) : (
+              <div className="py-6 text-center text-slate-400 space-y-2">
+                <CheckCircle2 className="w-8 h-8 text-emerald-400 mx-auto" />
+                <div className="text-xs font-semibold text-slate-300">
+                  Tous les stocks sont au vert !
+                </div>
+                <div className="text-[11px]">
+                  Aucun composant en dessous du seuil d'alerte.
+                </div>
+              </div>
+            )}
+
+            <button
+              onClick={() => setShowNewInventoryModal(true)}
+              className="w-full py-2.5 rounded-xl bg-slate-900 border border-cyan-500/30 text-cyan-300 hover:bg-cyan-500/10 transition-all text-xs font-bold flex items-center justify-center space-x-1.5"
+            >
+              <Plus className="w-3.5 h-3.5" />
+              <span>Enregistrer un nouvel achat de pièces</span>
+            </button>
+          </div>
+
+          {/* Console Breakdown Summary */}
+          <div className="glass-panel p-5 rounded-3xl border border-slate-800 space-y-3">
+            <h4 className="text-xs font-bold uppercase tracking-wider text-slate-400 flex items-center space-x-1.5">
+              <Percent className="w-4 h-4 text-pink-400" />
+              <span>Répartition par Modèle</span>
+            </h4>
+            <div className="space-y-2 text-xs">
+              {Object.entries(modelStats).map(([model, data]) => (
+                <div key={model} className="flex items-center justify-between py-1 border-b border-slate-900/60 last:border-0">
+                  <span className="text-slate-300 font-medium">{model}</span>
+                  <div className="flex items-center space-x-2 font-mono">
+                    <span className="text-slate-400">{data.count} projets</span>
+                    {data.profit > 0 && (
+                      <span className="text-emerald-400 font-bold">
+                        +{formatCurrency(data.profit, settings.currency)}
+                      </span>
+                    )}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+
+        </div>
+
+      </div>
+
+    </div>
+  );
+};
diff --git a/src/components/inventory/InventoryModal.tsx b/src/components/inventory/InventoryModal.tsx
new file mode 100644
index 0000000..90688c0
--- /dev/null
+++ b/src/components/inventory/InventoryModal.tsx
@@ -0,0 +1,383 @@
+import React, { useState, useEffect } from 'react';
+import { X, Package, Calculator, MapPin, Tag, Building2, Calendar, FileText } from 'lucide-react';
+import { useApp } from '../../context/AppContext';
+import type { InventoryItem, ConsoleModel, PartCategory } from '../../types';
+
+import { formatCurrency } from '../../utils/calculations';
+
+interface InventoryModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  editingItem?: InventoryItem | null;
+}
+
+export const InventoryModal: React.FC<InventoryModalProps> = ({
+  isOpen,
+  onClose,
+  editingItem,
+}) => {
+  const { addInventoryItem, updateInventoryItem, settings, consoleModels, partCategories } = useApp();
+
+  const [name, setName] = useState('');
+  const [sku, setSku] = useState('');
+  const [category, setCategory] = useState<PartCategory>('screen');
+  const [consoleModel, setConsoleModel] = useState<ConsoleModel>('GBA SP');
+  const [supplier, setSupplier] = useState('FunnyPlaying');
+  const [orderDate, setOrderDate] = useState(new Date().toISOString().split('T')[0]);
+  const [unitPurchasePrice, setUnitPurchasePrice] = useState<number>(35);
+  const [shippingCostShare, setShippingCostShare] = useState<number>(2);
+  const [taxImportShare, setTaxImportShare] = useState<number>(0);
+  const [quantityInStock, setQuantityInStock] = useState<number>(3);
+  const [minStockAlert, setMinStockAlert] = useState<number>(1);
+  const [locationInWorkshop, setLocationInWorkshop] = useState('Tiroir B1');
+  const [notes, setNotes] = useState('');
+
+  useEffect(() => {
+    if (editingItem) {
+      setName(editingItem.name);
+      setSku(editingItem.sku);
+      setCategory(editingItem.category);
+      setConsoleModel(editingItem.consoleModel);
+      setSupplier(editingItem.supplier);
+      setOrderDate(editingItem.orderDate);
+      setUnitPurchasePrice(editingItem.unitPurchasePrice);
+      setShippingCostShare(editingItem.shippingCostShare || 0);
+      setTaxImportShare(editingItem.taxImportShare || 0);
+      setQuantityInStock(editingItem.quantityInStock);
+      setMinStockAlert(editingItem.minStockAlert || 1);
+      setLocationInWorkshop(editingItem.locationInWorkshop || '');
+      setNotes(editingItem.notes || '');
+    } else {
+      // Reset form
+      setName('');
+      setSku('SKU-' + Math.floor(1000 + Math.random() * 9000));
+      setCategory('screen');
+      setConsoleModel('GBA SP');
+      setSupplier('AliExpress / Fabricant');
+      setOrderDate(new Date().toISOString().split('T')[0]);
+      setUnitPurchasePrice(25);
+      setShippingCostShare(1.5);
+      setTaxImportShare(0);
+      setQuantityInStock(2);
+      setMinStockAlert(1);
+      setLocationInWorkshop('');
+      setNotes('');
+    }
+  }, [editingItem, isOpen]);
+
+  if (!isOpen) return null;
+
+  // Calcul du coût unitaire réel avec frais
+  const calculatedRealUnitCost =
+    Number(unitPurchasePrice || 0) +
+    Number(shippingCostShare || 0) +
+    Number(taxImportShare || 0);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!name.trim()) return;
+
+    const itemData = {
+      name: name.trim(),
+      sku: sku.trim() || 'SKU-' + Date.now().toString().slice(-4),
+      category,
+      consoleModel,
+      supplier: supplier.trim() || 'Inconnu',
+      orderDate,
+      unitPurchasePrice: Number(unitPurchasePrice) || 0,
+      shippingCostShare: Number(shippingCostShare) || 0,
+      taxImportShare: Number(taxImportShare) || 0,
+      unitCostWithFees: calculatedRealUnitCost,
+      quantityInStock: Number(quantityInStock) || 0,
+      quantityReserved: editingItem?.quantityReserved || 0,
+      minStockAlert: Number(minStockAlert) || 1,
+      status: (Number(quantityInStock) <= 0
+        ? 'out_of_stock'
+        : Number(quantityInStock) <= Number(minStockAlert)
+        ? 'low_stock'
+        : 'in_stock') as 'in_stock' | 'low_stock' | 'out_of_stock',
+      locationInWorkshop: locationInWorkshop.trim(),
+      notes: notes.trim(),
+    };
+
+    if (editingItem) {
+      updateInventoryItem(editingItem.id, itemData);
+    } else {
+      addInventoryItem(itemData);
+    }
+
+    onClose();
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/80 backdrop-blur-md overflow-y-auto no-print">
+      <div className="relative w-full max-w-2xl bg-slate-900 border border-slate-700/80 rounded-3xl shadow-2xl overflow-hidden my-8">
+        
+        {/* Modal Header */}
+        <div className="flex items-center justify-between px-6 py-5 border-b border-slate-800 bg-slate-950/50">
+          <div className="flex items-center space-x-3">
+            <div className="w-10 h-10 rounded-xl bg-cyan-500/10 border border-cyan-500/30 flex items-center justify-center text-cyan-400">
+              <Package className="w-5 h-5" />
+            </div>
+            <div>
+              <h3 className="text-lg font-bold text-white">
+                {editingItem ? 'Modifier la pièce / stock' : 'Enregistrer un Achat de Pièces'}
+              </h3>
+              <p className="text-xs text-slate-400">
+                Centre d'achat & approvisionnement pour l'atelier
+              </p>
+            </div>
+          </div>
+          <button
+            onClick={onClose}
+            className="text-slate-400 hover:text-white p-2 rounded-xl hover:bg-slate-800 transition-colors"
+          >
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+
+        {/* Form Body */}
+        <form onSubmit={handleSubmit} className="p-6 space-y-6">
+          
+          {/* Row 1: Designation & SKU */}
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <div className="md:col-span-2 space-y-1.5">
+              <label className="text-xs font-semibold text-slate-300">
+                Nom / Désignation de la pièce *
+              </label>
+              <input
+                type="text"
+                required
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                placeholder="Ex: Écran IPS V3 Laminé OSD, Coque Atomic Purple..."
+                className="w-full px-3.5 py-2.5 rounded-xl bg-slate-950 border border-slate-700 text-white placeholder-slate-500 focus:outline-none focus:border-cyan-500 text-sm"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <label className="text-xs font-semibold text-slate-300 flex items-center space-x-1">
+                <Tag className="w-3.5 h-3.5 text-cyan-400" />
+                <span>Référence / SKU</span>
+              </label>
+              <input
+                type="text"
+                value={sku}
+                onChange={(e) => setSku(e.target.value)}
+                placeholder="Ex: SCR-GBA-01"
+                className="w-full px-3.5 py-2.5 rounded-xl bg-slate-950 border border-slate-700 text-white placeholder-slate-500 focus:outline-none focus:border-cyan-500 text-sm font-mono"
+              />
+            </div>
+          </div>
+
+          {/* Row 2: Console Model & Category */}
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+            <div className="space-y-1.5">
+              <label className="text-xs font-semibold text-slate-300">
+                Modèle de Console compatible *
+              </label>
+              <select
+                value={consoleModel}
+                onChange={(e) => setConsoleModel(e.target.value as ConsoleModel)}
+                className="w-full px-3.5 py-2.5 rounded-xl bg-slate-950 border border-slate-700 text-white focus:outline-none focus:border-cyan-500 text-sm"
+              >
+                {consoleModels.map((m) => (
+                  <option key={m.id} value={m.slug}>
+                    {m.name}
+                  </option>
+                ))}
+              </select>
+            </div>
+
+            <div className="space-y-1.5">
+              <label className="text-xs font-semibold text-slate-300">
+                Catégorie de Composant *
+              </label>
+              <select
+                value={category}
+                onChange={(e) => setCategory(e.target.value as PartCategory)}
+                className="w-full px-3.5 py-2.5 rounded-xl bg-slate-950 border border-slate-700 text-white focus:outline-none focus:border-cyan-500 text-sm"
+              >
+                {partCategories.map((c) => (
+                  <option key={c.id} value={c.slug}>
+                    {c.name}
+                  </option>
+                ))}
+              </select>
+            </div>
+          </div>
+
+          {/* Row 3: Supplier & Date */}
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+            <div className="space-y-1.5">
+              <label className="text-xs font-semibold text-slate-300 flex items-center space-x-1">
+                <Building2 className="w-3.5 h-3.5 text-cyan-400" />
+                <span>Fournisseur / Provenance</span>
+              </label>
+              <input
+                type="text"
+                value={supplier}
+                onChange={(e) => setSupplier(e.target.value)}
+                placeholder="Ex: FunnyPlaying, AliExpress, Vinted, Brocante..."
+                className="w-full px-3.5 py-2.5 rounded-xl bg-slate-950 border border-slate-700 text-white placeholder-slate-500 focus:outline-none focus:border-cyan-500 text-sm"
+              />
+            </div>
+
+            <div className="space-y-1.5">
+              <label className="text-xs font-semibold text-slate-300 flex items-center space-x-1">
+                <Calendar className="w-3.5 h-3.5 text-cyan-400" />
+                <span>Date d'achat / Commande</span>
+              </label>
+              <input
+                type="date"
+                value={orderDate}
+                onChange={(e) => setOrderDate(e.target.value)}
+                className="w-full px-3.5 py-2.5 rounded-xl bg-slate-950 border border-slate-700 text-white focus:outline-none focus:border-cyan-500 text-sm"
+              />
+            </div>
+          </div>
+
+          {/* Pricing & Fees Breakdown Box */}
+          <div className="p-4 rounded-2xl bg-slate-950/70 border border-cyan-500/30 space-y-3">
+            <div className="flex items-center justify-between">
+              <span className="text-xs font-bold uppercase tracking-wider text-cyan-400 flex items-center space-x-1.5">
+                <Calculator className="w-4 h-4" />
+                <span>Calcul du Coût d'Achat Réel Unitaire</span>
+              </span>
+              <span className="text-xs text-slate-400">
+                Coût pondéré avec frais
+              </span>
+            </div>
+
+            <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
+              <div className="space-y-1">
+                <label className="text-[11px] text-slate-300">
+                  Prix d'achat unitaire ({settings.currency})
+                </label>
+                <input
+                  type="number"
+                  step="0.01"
+                  min="0"
+                  value={unitPurchasePrice}
+                  onChange={(e) => setUnitPurchasePrice(parseFloat(e.target.value) || 0)}
+                  className="w-full px-3 py-2 rounded-lg bg-slate-900 border border-slate-700 text-white text-sm font-mono"
+                />
+              </div>
+
+              <div className="space-y-1">
+                <label className="text-[11px] text-slate-300">
+                  Part Frais de Port ({settings.currency})
+                </label>
+                <input
+                  type="number"
+                  step="0.01"
+                  min="0"
+                  value={shippingCostShare}
+                  onChange={(e) => setShippingCostShare(parseFloat(e.target.value) || 0)}
+                  className="w-full px-3 py-2 rounded-lg bg-slate-900 border border-slate-700 text-white text-sm font-mono"
+                />
+              </div>
+
+              <div className="space-y-1">
+                <label className="text-[11px] text-slate-300">
+                  Part Douane / Taxes ({settings.currency})
+                </label>
+                <input
+                  type="number"
+                  step="0.01"
+                  min="0"
+                  value={taxImportShare}
+                  onChange={(e) => setTaxImportShare(parseFloat(e.target.value) || 0)}
+                  className="w-full px-3 py-2 rounded-lg bg-slate-900 border border-slate-700 text-white text-sm font-mono"
+                />
+              </div>
+            </div>
+
+            <div className="flex items-center justify-between pt-2 border-t border-slate-800 text-xs">
+              <span className="text-slate-300">Coût unitaire effectif à imputer aux projets :</span>
+              <span className="text-base font-black text-cyan-300 font-mono">
+                {formatCurrency(calculatedRealUnitCost, settings.currency)}
+              </span>
+            </div>
+          </div>
+
+          {/* Row 4: Quantity & Workshop Location */}
+          <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+            <div className="space-y-1.5">
+              <label className="text-xs font-semibold text-slate-300">
+                Quantité en stock dispo
+              </label>
+              <input
+                type="number"
+                min="0"
+                value={quantityInStock}
+                onChange={(e) => setQuantityInStock(parseInt(e.target.value) || 0)}
+                className="w-full px-3.5 py-2.5 rounded-xl bg-slate-950 border border-slate-700 text-white text-sm font-mono"
+              />
+            </div>
+
+            <div className="space-y-1.5">
+              <label className="text-xs font-semibold text-slate-300">
+                Seuil alerte stock bas
+              </label>
+              <input
+                type="number"
+                min="0"
+                value={minStockAlert}
+                onChange={(e) => setMinStockAlert(parseInt(e.target.value) || 1)}
+                className="w-full px-3.5 py-2.5 rounded-xl bg-slate-950 border border-slate-700 text-white text-sm font-mono"
+              />
+            </div>
+
+            <div className="space-y-1.5">
+              <label className="text-xs font-semibold text-slate-300 flex items-center space-x-1">
+                <MapPin className="w-3.5 h-3.5 text-cyan-400" />
+                <span>Emplacement Atelier</span>
+              </label>
+              <input
+                type="text"
+                value={locationInWorkshop}
+                onChange={(e) => setLocationInWorkshop(e.target.value)}
+                placeholder="Ex: Tiroir B1, Bac A2..."
+                className="w-full px-3.5 py-2.5 rounded-xl bg-slate-950 border border-slate-700 text-white placeholder-slate-500 text-sm"
+              />
+            </div>
+          </div>
+
+          {/* Notes */}
+          <div className="space-y-1.5">
+            <label className="text-xs font-semibold text-slate-300 flex items-center space-x-1">
+              <FileText className="w-3.5 h-3.5 text-cyan-400" />
+              <span>Notes & Remarques techniques</span>
+            </label>
+            <textarea
+              rows={2}
+              value={notes}
+              onChange={(e) => setNotes(e.target.value)}
+              placeholder="Ex: Révision de la nappe flex v3, réglage luminosité par capteur tactile..."
+              className="w-full px-3.5 py-2.5 rounded-xl bg-slate-950 border border-slate-700 text-white placeholder-slate-500 text-sm focus:outline-none focus:border-cyan-500"
+            />
+          </div>
+
+          {/* Modal Footer */}
+          <div className="flex items-center justify-end space-x-3 pt-4 border-t border-slate-800">
+            <button
+              type="button"
+              onClick={onClose}
+              className="px-4 py-2.5 rounded-xl bg-slate-800 text-slate-300 hover:text-white hover:bg-slate-700 text-sm font-semibold transition-colors"
+            >
+              Annuler
+            </button>
+            <button
+              type="submit"
+              className="px-5 py-2.5 rounded-xl bg-gradient-to-r from-cyan-500 to-blue-600 text-white font-bold text-sm shadow-lg shadow-cyan-500/20 hover:scale-[1.02] active:scale-[0.98] transition-all"
+            >
+              {editingItem ? 'Enregistrer les modifications' : 'Ajouter au stock'}
+            </button>
+          </div>
+
+        </form>
+
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/inventory/PurchasesView.tsx b/src/components/inventory/PurchasesView.tsx
new file mode 100644
index 0000000..65ee247
--- /dev/null
+++ b/src/components/inventory/PurchasesView.tsx
@@ -0,0 +1,830 @@
+import React, { useState, useMemo } from 'react';
+import {
+  Search,
+  Plus,
+
+  Package,
+  AlertTriangle,
+  Download,
+  Trash2,
+  Edit2,
+  MapPin,
+  PieChart as PieIcon,
+  BarChart2,
+  QrCode,
+} from 'lucide-react';
+import {
+  ResponsiveContainer,
+  PieChart,
+  Pie,
+  Cell,
+  Tooltip,
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+} from 'recharts';
+import { useApp } from '../../context/AppContext';
+import type { InventoryItem, ConsoleModel, PartCategory } from '../../types';
+
+import {
+  formatCurrency,
+  getPartCategoryLabel,
+  getCategoryBadgeColor,
+  calculateTotalStockValue,
+} from '../../utils/calculations';
+
+import { InventoryModal } from './InventoryModal';
+import { QrLabelModal } from '../labels/QrLabelModal';
+
+export const PurchasesView: React.FC = () => {
+  const {
+    inventory,
+    deleteInventoryItem,
+    updateInventoryItem,
+    receivePlannedItem,
+    adjustStockQuantity,
+    exportInventoryCSV,
+    showNewInventoryModal,
+    setShowNewInventoryModal,
+    settings,
+    consoleModels,
+    partCategories,
+  } = useApp();
+
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedConsole, setSelectedConsole] = useState<ConsoleModel | 'ALL'>('ALL');
+  const [selectedCategory, setSelectedCategory] = useState<PartCategory | 'ALL'>('ALL');
+  const [stockStatusFilter, setStockStatusFilter] = useState<'ALL' | 'in_stock' | 'planned_order' | 'ordered' | 'low_stock' | 'out_of_stock'>('ALL');
+  const [editingItem, setEditingItem] = useState<InventoryItem | null>(null);
+  const [itemToDelete, setItemToDelete] = useState<InventoryItem | null>(null);
+  const [labelModalItem, setLabelModalItem] = useState<InventoryItem | null>(null);
+  const [showBatchLabels, setShowBatchLabels] = useState(false);
+
+  // Filter items
+  const filteredItems = useMemo(() => {
+    return inventory.filter((item) => {
+      // Search
+      if (searchQuery.trim()) {
+        const query = searchQuery.toLowerCase();
+        const matchesName = item.name.toLowerCase().includes(query);
+        const matchesSku = item.sku.toLowerCase().includes(query);
+        const matchesSupplier = item.supplier.toLowerCase().includes(query);
+        const matchesNotes = (item.notes || '').toLowerCase().includes(query);
+        const matchesLocation = (item.locationInWorkshop || '').toLowerCase().includes(query);
+        const matchesProject = (item.linkedProjectTitle || '').toLowerCase().includes(query);
+        if (!matchesName && !matchesSku && !matchesSupplier && !matchesNotes && !matchesLocation && !matchesProject) {
+          return false;
+        }
+      }
+
+      // Console Model
+      if (selectedConsole !== 'ALL' && item.consoleModel !== selectedConsole) {
+        return false;
+      }
+
+      // Category
+      if (selectedCategory !== 'ALL' && item.category !== selectedCategory) {
+        return false;
+      }
+
+      // Stock Status
+      if (stockStatusFilter === 'planned_order' && item.status !== 'planned_order') {
+        return false;
+      }
+      if (stockStatusFilter === 'ordered' && item.status !== 'ordered') {
+        return false;
+      }
+      if (stockStatusFilter === 'low_stock' && (item.quantityInStock > item.minStockAlert || item.status === 'planned_order')) {
+        return false;
+      }
+      if (stockStatusFilter === 'out_of_stock' && (item.quantityInStock > 0 || item.status === 'planned_order')) {
+        return false;
+      }
+      if (stockStatusFilter === 'in_stock' && (item.quantityInStock === 0 || item.status === 'planned_order')) {
+        return false;
+      }
+
+      return true;
+    });
+  }, [inventory, searchQuery, selectedConsole, selectedCategory, stockStatusFilter]);
+
+  // Overall Inventory Stats
+  const totalStockValuation = calculateTotalStockValue(inventory);
+  const inStockItems = inventory.filter((i) => i.status !== 'planned_order');
+  const totalUnitsInStock = inStockItems.reduce((sum, i) => sum + i.quantityInStock, 0);
+  const lowStockCount = inStockItems.filter((i) => i.quantityInStock <= i.minStockAlert).length;
+  const donorConsolesCount = inStockItems
+    .filter((i) => i.category === 'console_base')
+    .reduce((sum, i) => sum + i.quantityInStock, 0);
+
+  const plannedItems = inventory.filter((i) => i.status === 'planned_order');
+  const plannedProcurementTotalCost = plannedItems.reduce(
+    (sum, i) => sum + ((i.quantityReserved || 1) * (i.unitCostWithFees || i.unitPurchasePrice)),
+    0
+  );
+  const orderedItems = inventory.filter((i) => i.status === 'ordered');
+
+  return (
+    <div className="space-y-6 pb-12 animate-fadeIn">
+      
+      {/* Top Banner & Title */}
+      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+        <div>
+          <div className="inline-flex items-center space-x-2 px-3 py-1 rounded-full text-xs font-semibold bg-cyan-500/10 text-cyan-400 border border-cyan-500/30 mb-2">
+            <Package className="w-3.5 h-3.5" />
+            <span>Centre d'Achat & Logistique</span>
+          </div>
+          <h2 className="text-2xl sm:text-3xl font-black text-white font-display">
+            Gestion du Stock & Pièces Détachées
+          </h2>
+          <p className="text-slate-400 text-xs sm:text-sm">
+            Enregistrez vos commandes fournisseurs, suivez vos coûts unitaires réels et gérez l'état de votre inventaire.
+          </p>
+        </div>
+
+        <div className="flex flex-wrap items-center gap-2.5 shrink-0">
+          <button
+            onClick={() => setShowBatchLabels(true)}
+            className="flex items-center space-x-1.5 px-3.5 py-2 rounded-xl bg-purple-500/15 border border-purple-500/30 text-purple-300 hover:bg-purple-500/25 text-xs font-bold transition-all shadow-sm"
+            title="Générer une planche d'étiquettes QR pour tout le stock sélectionné"
+          >
+            <QrCode className="w-4 h-4" />
+            <span>Planche Étiquettes QR</span>
+          </button>
+
+          <button
+            onClick={exportInventoryCSV}
+            className="flex items-center space-x-1.5 px-3.5 py-2 rounded-xl bg-slate-900 border border-slate-700 text-slate-300 hover:text-white hover:border-slate-500 text-xs font-semibold transition-all shadow-sm"
+            title="Exporter l'inventaire au format CSV (Excel)"
+          >
+            <Download className="w-4 h-4" />
+            <span>Export CSV</span>
+          </button>
+
+          <button
+            onClick={() => {
+              setEditingItem(null);
+              setShowNewInventoryModal(true);
+            }}
+            className="flex items-center space-x-2 px-4 py-2 rounded-xl bg-gradient-to-r from-cyan-500 to-blue-600 text-white font-bold text-sm shadow-lg shadow-cyan-500/20 hover:scale-[1.02] active:scale-[0.98] transition-all"
+          >
+            <Plus className="w-4 h-4" />
+            <span>Nouvel Achat / Pièce</span>
+          </button>
+        </div>
+      </div>
+
+      {/* KPI Stats Strip */}
+      <div className="grid grid-cols-2 sm:grid-cols-5 gap-3">
+        <div className="glass-panel p-4 rounded-2xl border border-slate-800">
+          <div className="text-xs text-slate-400 font-medium">Valeur Stock Immobilisé</div>
+          <div className="text-xl sm:text-2xl font-black text-cyan-300 font-mono mt-1">
+            {formatCurrency(totalStockValuation, settings.currency)}
+          </div>
+          <div className="text-[11px] text-slate-400 mt-0.5">Calculé au coût réel</div>
+        </div>
+
+        <div className="glass-panel p-4 rounded-2xl border border-slate-800">
+          <div className="text-xs text-slate-400 font-medium">Références & Pièces</div>
+          <div className="text-xl sm:text-2xl font-black text-white font-mono mt-1">
+            {inStockItems.length} <span className="text-xs font-normal text-slate-400">réf. ({totalUnitsInStock} pcs)</span>
+          </div>
+          <div className="text-[11px] text-slate-400 mt-0.5">Composants en stock</div>
+        </div>
+
+        <div className="glass-panel p-4 rounded-2xl border border-slate-800">
+          <div className="text-xs text-amber-400 font-medium">Consoles Brutes en Stock</div>
+          <div className="text-xl sm:text-2xl font-black text-amber-300 font-mono mt-1">
+            {donorConsolesCount} <span className="text-xs font-normal text-slate-400">consoles</span>
+          </div>
+          <div className="text-[11px] text-slate-400 mt-0.5">Donneuses prêtes</div>
+        </div>
+
+        <div className="glass-panel p-4 rounded-2xl border border-amber-500/30 bg-amber-500/5">
+          <div className="text-xs text-amber-300 font-semibold flex items-center justify-between">
+            <span>À Approvisionner</span>
+            <span className="px-1.5 py-0.5 rounded bg-amber-500/20 text-[10px] font-mono font-bold">{plannedItems.length} réf.</span>
+          </div>
+          <div className="text-xl sm:text-2xl font-black text-amber-300 font-mono mt-1">
+            {formatCurrency(plannedProcurementTotalCost, settings.currency)}
+          </div>
+          <div className="text-[11px] text-amber-400/80 mt-0.5">Budget pièces à prévoir</div>
+        </div>
+
+        <div className="glass-panel p-4 rounded-2xl border border-slate-800">
+          <div className="text-xs text-slate-400 font-medium">Alertes Stock Critique</div>
+          <div className={`text-xl sm:text-2xl font-black font-mono mt-1 ${lowStockCount > 0 ? 'text-rose-400' : 'text-emerald-400'}`}>
+            {lowStockCount} <span className="text-xs font-normal text-slate-400">articles</span>
+          </div>
+          <div className="text-[11px] text-slate-400 mt-0.5">
+            {lowStockCount > 0 ? 'À recommander sous peu' : 'Aucune rupture'}
+          </div>
+        </div>
+      </div>
+
+      {/* Visual Stock Charts: Valuation by Category & Health Levels */}
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        
+        {/* Left 1 Col: Donut Chart Valuation by Category */}
+        <div className="glass-panel p-5 rounded-3xl border border-slate-800 space-y-3 flex flex-col justify-between">
+          <div>
+            <h3 className="text-sm font-bold text-white flex items-center space-x-2">
+              <PieIcon className="w-4 h-4 text-cyan-400" />
+              <span>Répartition de la Valeur Stock</span>
+            </h3>
+            <p className="text-[11px] text-slate-400">
+              Immobilisation financière par type de pièce
+            </p>
+          </div>
+
+          {(() => {
+            const catTotals: Record<string, number> = {};
+            inventory.forEach((i) => {
+              const val = i.quantityInStock * (i.unitCostWithFees || i.unitPurchasePrice || 0);
+              catTotals[i.category] = (catTotals[i.category] || 0) + val;
+            });
+
+            const catColors: Record<string, string> = {
+              screen: '#06b6d4',
+              console_base: '#f59e0b',
+              shell: '#a855f7',
+              buttons_pads: '#3b82f6',
+              battery_power: '#10b981',
+              sound_amp: '#ec4899',
+              cartridge_games: '#f43f5e',
+              packaging_accessories: '#8b5cf6',
+              consumables: '#64748b',
+              other: '#94a3b8',
+            };
+
+            const chartData = Object.entries(catTotals)
+              .map(([cat, val]) => ({
+                name: getPartCategoryLabel(cat),
+                value: Math.round(val),
+                color: catColors[cat] || '#06b6d4',
+              }))
+              .filter((d) => d.value > 0)
+              .sort((a, b) => b.value - a.value);
+
+            return (
+              <>
+                <div className="h-44 w-full relative flex items-center justify-center">
+                  <ResponsiveContainer width="100%" height="100%">
+                    <PieChart>
+                      <Pie
+                        data={chartData}
+                        cx="50%"
+                        cy="50%"
+                        innerRadius={50}
+                        outerRadius={72}
+                        paddingAngle={3}
+                        dataKey="value"
+                      >
+                        {chartData.map((entry, index) => (
+                          <Cell key={`cell-stock-${index}`} fill={entry.color} />
+                        ))}
+                      </Pie>
+                      <Tooltip
+                        content={({ active, payload }) => {
+                          if (active && payload && payload.length) {
+                            const d = payload[0];
+                            const percent = totalStockValuation > 0 ? ((Number(d.value) / totalStockValuation) * 100).toFixed(1) : 0;
+                            return (
+                              <div className="bg-slate-900 border border-slate-700 p-2.5 rounded-xl shadow-xl text-xs font-mono">
+                                <div className="font-bold text-white">{d.name}</div>
+                                <div className="text-cyan-400">{formatCurrency(Number(d.value), settings.currency)} ({percent}%)</div>
+                              </div>
+                            );
+                          }
+                          return null;
+                        }}
+                      />
+                    </PieChart>
+                  </ResponsiveContainer>
+                  <div className="absolute inset-0 flex flex-col items-center justify-center pointer-events-none">
+                    <span className="text-[10px] text-slate-400 uppercase font-bold">Total</span>
+                    <span className="text-sm font-black text-cyan-300 font-mono">{formatCurrency(totalStockValuation, settings.currency)}</span>
+                  </div>
+                </div>
+
+                <div className="grid grid-cols-2 gap-1 text-[10px] pt-1 border-t border-slate-800">
+                  {chartData.slice(0, 4).map((item) => (
+                    <div key={item.name} className="flex items-center space-x-1.5 truncate">
+                      <span className="w-2 h-2 rounded-full shrink-0" style={{ backgroundColor: item.color }} />
+                      <span className="text-slate-300 truncate">{item.name}</span>
+                    </div>
+                  ))}
+                </div>
+              </>
+            );
+          })()}
+        </div>
+
+        {/* Right 2 Cols: Bar Chart of Stock Levels vs Min Thresholds */}
+        <div className="lg:col-span-2 glass-panel p-5 rounded-3xl border border-slate-800 space-y-3">
+          <div className="flex items-center justify-between">
+            <div>
+              <h3 className="text-sm font-bold text-white flex items-center space-x-2">
+                <BarChart2 className="w-4 h-4 text-emerald-400" />
+                <span>Niveaux de Disponibilité des Pièces</span>
+              </h3>
+              <p className="text-[11px] text-slate-400">
+                Quantité en stock physique vs seuil de réapprovisionnement
+              </p>
+            </div>
+            <div className="flex items-center space-x-3 text-xs font-mono">
+              <span className="flex items-center text-cyan-400">
+                <span className="w-2.5 h-2.5 rounded-full bg-cyan-500 mr-1.5" /> Stock Actuel
+              </span>
+              <span className="flex items-center text-rose-400">
+                <span className="w-2.5 h-2.5 rounded-full bg-rose-500 mr-1.5" /> Seuil Alerte
+              </span>
+            </div>
+          </div>
+
+          <div className="h-44 w-full pt-1">
+            <ResponsiveContainer width="100%" height="100%">
+              <BarChart
+                data={inventory.slice(0, 8).map((item) => ({
+                  name: item.name.length > 18 ? item.name.substring(0, 16) + '...' : item.name,
+                  fullName: item.name,
+                  'Stock Dispo': item.quantityInStock,
+                  'Seuil Alerte': item.minStockAlert,
+                  unitCost: item.unitCostWithFees,
+                }))}
+                margin={{ top: 10, right: 10, left: -20, bottom: 0 }}
+              >
+                <XAxis dataKey="name" stroke="#64748b" fontSize={10} tickLine={false} axisLine={{ stroke: '#334155' }} />
+                <YAxis stroke="#64748b" fontSize={10} tickLine={false} axisLine={{ stroke: '#334155' }} allowDecimals={false} />
+                <Tooltip
+                  content={({ active, payload }) => {
+                    if (active && payload && payload.length) {
+                      const d = payload[0].payload;
+                      return (
+                        <div className="bg-slate-900 border border-slate-700 p-2.5 rounded-xl shadow-xl text-xs space-y-1 font-mono">
+                          <div className="font-bold text-white font-sans text-xs pb-1 border-b border-slate-800">{d.fullName}</div>
+                          <div className="text-cyan-400">📦 Stock physique : {d['Stock Dispo']} pcs</div>
+                          <div className="text-rose-400">⚠️ Seuil alerte : {d['Seuil Alerte']} pcs</div>
+                          <div className="text-slate-400 text-[10px]">Coût : {formatCurrency(d.unitCost, settings.currency)}/pc</div>
+                        </div>
+                      );
+                    }
+                    return null;
+                  }}
+                />
+                <Bar dataKey="Stock Dispo" fill="#06b6d4" radius={[3, 3, 0, 0]} />
+                <Bar dataKey="Seuil Alerte" fill="#f43f5e" radius={[3, 3, 0, 0]} />
+              </BarChart>
+            </ResponsiveContainer>
+          </div>
+        </div>
+
+      </div>
+
+
+      {/* Filters & Search Toolbar */}
+      <div className="glass-panel p-4 rounded-2xl border border-slate-800 space-y-3">
+        <div className="grid grid-cols-1 sm:grid-cols-12 gap-3">
+          
+          {/* Search Input */}
+          <div className="sm:col-span-5 relative">
+            <Search className="w-4 h-4 text-slate-400 absolute left-3.5 top-3" />
+            <input
+              type="text"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              placeholder="Rechercher par nom, SKU, fournisseur, emplacement..."
+              className="w-full pl-9 pr-3.5 py-2 rounded-xl bg-slate-950 border border-slate-700 text-white placeholder-slate-500 focus:outline-none focus:border-cyan-500 text-xs sm:text-sm"
+            />
+          </div>
+
+          {/* Console Filter */}
+          <div className="sm:col-span-3">
+            <select
+              value={selectedConsole}
+              onChange={(e) => setSelectedConsole(e.target.value as ConsoleModel | 'ALL')}
+              className="w-full px-3 py-2 rounded-xl bg-slate-950 border border-slate-700 text-white focus:outline-none focus:border-cyan-500 text-xs sm:text-sm"
+            >
+              <option value="ALL">Toutes les consoles</option>
+              {consoleModels.map((c) => (
+                <option key={c.id} value={c.slug}>
+                  {c.name}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          {/* Category Filter */}
+          <div className="sm:col-span-2">
+            <select
+              value={selectedCategory}
+              onChange={(e) => setSelectedCategory(e.target.value as PartCategory | 'ALL')}
+              className="w-full px-3 py-2 rounded-xl bg-slate-950 border border-slate-700 text-white focus:outline-none focus:border-cyan-500 text-xs sm:text-sm"
+            >
+              <option value="ALL">Toutes les catégories</option>
+              {partCategories.map((cat) => (
+                <option key={cat.id} value={cat.slug}>
+                  {cat.name}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          {/* Status Filter */}
+          <div className="sm:col-span-2">
+            <select
+              value={stockStatusFilter}
+              onChange={(e) => setStockStatusFilter(e.target.value as any)}
+              className="w-full px-3 py-2 rounded-xl bg-slate-950 border border-slate-700 text-white focus:outline-none focus:border-cyan-500 text-xs sm:text-sm"
+            >
+              <option value="ALL">Tous les statuts ({inventory.length})</option>
+              <option value="in_stock">🟢 En stock physique ({inStockItems.length})</option>
+              <option value="planned_order">📦 À Approvisionner (En Prévision) ({plannedItems.length})</option>
+              <option value="ordered">🚚 En Commande ({orderedItems.length})</option>
+              <option value="low_stock">⚠️ Stock Bas ({lowStockCount})</option>
+              <option value="out_of_stock">🚫 En Rupture (0)</option>
+            </select>
+          </div>
+        </div>
+
+        {/* Quick Status Chips */}
+        <div className="flex flex-wrap gap-2 pt-1 border-t border-slate-850">
+          <button
+            onClick={() => setStockStatusFilter('ALL')}
+            className={`px-3 py-1 rounded-lg text-xs font-semibold transition-all ${
+              stockStatusFilter === 'ALL'
+                ? 'bg-cyan-500 text-white shadow-sm shadow-cyan-500/30'
+                : 'bg-slate-950 text-slate-400 hover:text-white border border-slate-800'
+            }`}
+          >
+            Tous ({inventory.length})
+          </button>
+          <button
+            onClick={() => setStockStatusFilter('in_stock')}
+            className={`px-3 py-1 rounded-lg text-xs font-semibold transition-all ${
+              stockStatusFilter === 'in_stock'
+                ? 'bg-emerald-500 text-white shadow-sm shadow-emerald-500/30'
+                : 'bg-slate-950 text-slate-400 hover:text-emerald-300 border border-slate-800'
+            }`}
+          >
+            🟢 En Stock ({inStockItems.length})
+          </button>
+          <button
+            onClick={() => setStockStatusFilter('planned_order')}
+            className={`px-3 py-1 rounded-lg text-xs font-semibold transition-all flex items-center gap-1.5 ${
+              stockStatusFilter === 'planned_order'
+                ? 'bg-amber-500 text-slate-950 shadow-sm shadow-amber-500/30 font-bold'
+                : 'bg-amber-500/10 text-amber-300 hover:bg-amber-500/20 border border-amber-500/30'
+            }`}
+          >
+            <span>📦 À Approvisionner (En Prévision)</span>
+            <span className="px-1.5 py-0.2 rounded-full bg-amber-500/30 text-[10px] font-mono font-bold">
+              {plannedItems.length}
+            </span>
+          </button>
+          <button
+            onClick={() => setStockStatusFilter('ordered')}
+            className={`px-3 py-1 rounded-lg text-xs font-semibold transition-all ${
+              stockStatusFilter === 'ordered'
+                ? 'bg-cyan-500 text-white shadow-sm shadow-cyan-500/30'
+                : 'bg-slate-950 text-slate-400 hover:text-cyan-300 border border-slate-800'
+            }`}
+          >
+            🚚 En Commande ({orderedItems.length})
+          </button>
+          <button
+            onClick={() => setStockStatusFilter('low_stock')}
+            className={`px-3 py-1 rounded-lg text-xs font-semibold transition-all ${
+              stockStatusFilter === 'low_stock'
+                ? 'bg-rose-500 text-white shadow-sm shadow-rose-500/30'
+                : 'bg-slate-950 text-slate-400 hover:text-rose-300 border border-slate-800'
+            }`}
+          >
+            ⚠️ Stock Critique ({lowStockCount})
+          </button>
+        </div>
+      </div>
+
+      {/* Inventory Items List */}
+      <div className="glass-panel rounded-3xl border border-slate-800 overflow-hidden">
+        {filteredItems.length === 0 ? (
+          <div className="p-12 text-center space-y-3">
+            <Package className="w-12 h-12 text-slate-600 mx-auto" />
+            <h3 className="text-base font-bold text-slate-300">Aucune pièce trouvée</h3>
+            <p className="text-xs text-slate-400 max-w-sm mx-auto">
+              Aucun composant ne correspond à vos critères de recherche ou de filtre.
+            </p>
+            <button
+              onClick={() => {
+                setSearchQuery('');
+                setSelectedConsole('ALL');
+                setSelectedCategory('ALL');
+                setStockStatusFilter('ALL');
+              }}
+              className="text-xs font-semibold text-cyan-400 hover:underline"
+            >
+              Réinitialiser les filtres
+            </button>
+          </div>
+        ) : (
+          <div className="overflow-x-auto">
+            <table className="w-full text-left border-collapse text-xs sm:text-sm">
+              <thead>
+                <tr className="border-b border-slate-800 bg-slate-950/60 text-slate-400 font-semibold uppercase text-[11px] tracking-wider">
+                  <th className="py-3.5 px-4">Composant / Désignation</th>
+                  <th className="py-3.5 px-3">Console & Catégorie</th>
+                  <th className="py-3.5 px-3">Fournisseur & Date</th>
+                  <th className="py-3.5 px-3 text-right">Prix Achat</th>
+                  <th className="py-3.5 px-3 text-right">Coût Réel Unitaire</th>
+                  <th className="py-3.5 px-4 text-center">Stock & Statut</th>
+                  <th className="py-3.5 px-3 text-right">Valeur / Budget</th>
+                  <th className="py-3.5 px-4 text-right">Actions</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-slate-800/60">
+                {filteredItems.map((item) => {
+                  const badgeColor = getCategoryBadgeColor(item.category);
+                  const isPlanned = item.status === 'planned_order';
+                  const isOrdered = item.status === 'ordered';
+                  const isLow = !isPlanned && item.quantityInStock <= item.minStockAlert && item.quantityInStock > 0;
+                  const isOut = !isPlanned && item.quantityInStock <= 0;
+                  const totalLineValuation = isPlanned
+                    ? (item.quantityReserved || 1) * item.unitCostWithFees
+                    : item.quantityInStock * item.unitCostWithFees;
+
+                  return (
+                    <tr
+                      key={item.id}
+                      className={`transition-colors duration-150 group ${
+                        isPlanned
+                          ? 'bg-amber-500/5 hover:bg-amber-500/10'
+                          : isOrdered
+                          ? 'bg-cyan-500/5 hover:bg-cyan-500/10'
+                          : 'hover:bg-slate-900/50'
+                      }`}
+                    >
+                      {/* Name & SKU */}
+                      <td className="py-3 px-4">
+                        <div className="font-bold text-white group-hover:text-cyan-300 transition-colors flex items-center gap-1.5 flex-wrap">
+                          <span>{item.name}</span>
+                          {isPlanned && (
+                            <span className="px-2 py-0.5 rounded-md text-[10px] font-extrabold bg-amber-500/20 text-amber-300 border border-amber-500/40">
+                              📦 À APPROVISIONNER (EN PRÉVISION)
+                            </span>
+                          )}
+                          {isOrdered && (
+                            <span className="px-2 py-0.5 rounded-md text-[10px] font-extrabold bg-cyan-500/20 text-cyan-300 border border-cyan-500/40">
+                              🚚 EN COMMANDE
+                            </span>
+                          )}
+                        </div>
+                        <div className="flex items-center space-x-2 mt-1 flex-wrap">
+                          <span className="font-mono text-[11px] text-slate-400">
+                            {item.sku}
+                          </span>
+                          {item.linkedProjectTitle && (
+                            <span className="inline-flex items-center text-[10px] text-amber-300 bg-amber-500/10 px-2 py-0.5 rounded border border-amber-500/30">
+                              🎯 Pour : {item.linkedProjectTitle}
+                            </span>
+                          )}
+                          {item.locationInWorkshop && !isPlanned && (
+                            <span className="inline-flex items-center text-[10px] text-slate-400 bg-slate-900 px-1.5 py-0.5 rounded border border-slate-800">
+                              <MapPin className="w-2.5 h-2.5 mr-1 text-cyan-400" />
+                              {item.locationInWorkshop}
+                            </span>
+                          )}
+                        </div>
+                      </td>
+
+                      {/* Console & Category */}
+                      <td className="py-3 px-3">
+                        <div className="font-semibold text-slate-200">
+                          {item.consoleModel}
+                        </div>
+                        <div className="mt-1">
+                          <span
+                            className={`inline-block px-2 py-0.5 rounded-md text-[10px] font-bold border ${badgeColor.bg} ${badgeColor.text} ${badgeColor.border}`}
+                          >
+                            {getPartCategoryLabel(item.category)}
+                          </span>
+                        </div>
+                      </td>
+
+                      {/* Supplier & Date */}
+                      <td className="py-3 px-3">
+                        <div className="text-slate-300 font-medium">
+                          {item.supplier}
+                        </div>
+                        <div className="text-[11px] text-slate-400 font-mono">
+                          {item.orderDate}
+                        </div>
+                      </td>
+
+                      {/* Unit Base Purchase Price */}
+                      <td className="py-3 px-3 text-right font-mono text-slate-300">
+                        {formatCurrency(item.unitPurchasePrice, settings.currency)}
+                      </td>
+
+                      {/* Real Unit Cost */}
+                      <td className="py-3 px-3 text-right">
+                        <div className="font-mono font-bold text-cyan-300">
+                          {formatCurrency(item.unitCostWithFees, settings.currency)}
+                        </div>
+                        {(item.shippingCostShare > 0 || item.taxImportShare > 0) && (
+                          <div className="text-[10px] text-slate-400">
+                            (+{(item.shippingCostShare + item.taxImportShare).toFixed(2)}€ frais)
+                          </div>
+                        )}
+                      </td>
+
+                      {/* Stock / Procurement Column */}
+                      <td className="py-3 px-4">
+                        {isPlanned ? (
+                          <div className="text-center space-y-1">
+                            <span className="inline-block font-mono font-bold text-xs px-2.5 py-0.5 rounded-full bg-amber-500/20 text-amber-300 border border-amber-500/40">
+                              Qté requise : {item.quantityReserved || 1}
+                            </span>
+                            <div className="text-[10px] text-amber-400/80">
+                              Stock actuel : 0
+                            </div>
+                          </div>
+                        ) : (
+                          <div>
+                            <div className="flex items-center justify-center space-x-2">
+                              <button
+                                onClick={() => adjustStockQuantity(item.id, -1)}
+                                disabled={item.quantityInStock <= 0}
+                                className="w-6 h-6 rounded-lg bg-slate-800 hover:bg-slate-700 disabled:opacity-30 disabled:cursor-not-allowed flex items-center justify-center text-white font-bold text-xs"
+                                title="Retirer 1 unité du stock"
+                              >
+                                -
+                              </button>
+
+                              <div className="min-w-[48px] text-center">
+                                <span
+                                  className={`inline-block font-mono font-black text-sm px-2.5 py-0.5 rounded-full ${
+                                    isOut
+                                      ? 'bg-rose-500/20 text-rose-400 border border-rose-500/40'
+                                      : isLow
+                                      ? 'bg-amber-500/20 text-amber-300 border border-amber-500/40'
+                                      : 'bg-slate-900 text-white border border-slate-700'
+                                  }`}
+                                >
+                                  {item.quantityInStock}
+                                </span>
+                              </div>
+
+                              <button
+                                onClick={() => adjustStockQuantity(item.id, 1)}
+                                className="w-6 h-6 rounded-lg bg-slate-800 hover:bg-slate-700 flex items-center justify-center text-white font-bold text-xs"
+                                title="Ajouter 1 unité au stock"
+                              >
+                                +
+                              </button>
+                            </div>
+                            {isLow && (
+                              <div className="text-center text-[10px] text-amber-400 font-semibold mt-1">
+                                Alerte seuil ({item.minStockAlert})
+                              </div>
+                            )}
+                          </div>
+                        )}
+                      </td>
+
+                      {/* Total Line Valuation / Budget */}
+                      <td className="py-3 px-3 text-right font-mono font-bold">
+                        <div className={isPlanned ? 'text-amber-300' : 'text-slate-200'}>
+                          {formatCurrency(totalLineValuation, settings.currency)}
+                        </div>
+                        {isPlanned && (
+                          <div className="text-[10px] text-amber-400/70 font-sans font-normal">
+                            À prévoir
+                          </div>
+                        )}
+                      </td>
+
+                      {/* Actions */}
+                      <td className="py-3 px-4 text-right">
+                        <div className="flex items-center justify-end space-x-1.5 flex-wrap">
+                          {isPlanned && (
+                            <>
+                              <button
+                                onClick={() => receivePlannedItem(item.id)}
+                                className="px-2.5 py-1 text-[11px] font-bold bg-emerald-600 hover:bg-emerald-500 text-white rounded-lg shadow-sm flex items-center gap-1 transition-colors"
+                                title="Réceptionner cette pièce en stock et l'allouer au projet"
+                              >
+                                📥 Réceptionner
+                              </button>
+                              <button
+                                onClick={() => updateInventoryItem(item.id, { status: 'ordered' })}
+                                className="px-2.5 py-1 text-[11px] font-semibold bg-cyan-600 hover:bg-cyan-500 text-white rounded-lg transition-colors"
+                                title="Passer en commande"
+                              >
+                                🚚 Commander
+                              </button>
+                            </>
+                          )}
+
+                          {isOrdered && (
+                            <button
+                              onClick={() => receivePlannedItem(item.id)}
+                              className="px-2.5 py-1 text-[11px] font-bold bg-emerald-600 hover:bg-emerald-500 text-white rounded-lg shadow-sm flex items-center gap-1 transition-colors"
+                              title="Réceptionner la commande"
+                            >
+                              📥 Réceptionner
+                            </button>
+                          )}
+
+                          <button
+                            onClick={() => setLabelModalItem(item)}
+                            className="p-1.5 text-slate-400 hover:text-purple-400 hover:bg-slate-800 rounded-lg transition-colors"
+                            title="Imprimer l'étiquette QR pour ce composant"
+                          >
+                            <QrCode className="w-3.5 h-3.5" />
+                          </button>
+                          <button
+                            onClick={() => {
+                              setEditingItem(item);
+                              setShowNewInventoryModal(true);
+                            }}
+                            className="p-1.5 text-slate-400 hover:text-cyan-400 hover:bg-slate-800 rounded-lg transition-colors"
+                            title="Modifier cette pièce"
+                          >
+                            <Edit2 className="w-3.5 h-3.5" />
+                          </button>
+                          <button
+                            onClick={() => setItemToDelete(item)}
+                            className="p-1.5 text-slate-400 hover:text-rose-400 hover:bg-slate-800 rounded-lg transition-colors"
+                            title="Supprimer du stock"
+                          >
+                            <Trash2 className="w-3.5 h-3.5" />
+                          </button>
+                        </div>
+                      </td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+
+      {/* Inventory Modal for Create / Edit */}
+      <InventoryModal
+        isOpen={showNewInventoryModal}
+        onClose={() => {
+          setShowNewInventoryModal(false);
+          setEditingItem(null);
+        }}
+        editingItem={editingItem}
+      />
+
+      {/* Confirmation Modal for Delete */}
+      {itemToDelete && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/80 backdrop-blur-md">
+          <div className="bg-slate-900 border border-slate-700 rounded-3xl p-6 max-w-md w-full space-y-4 shadow-2xl">
+            <div className="w-12 h-12 rounded-2xl bg-rose-500/10 border border-rose-500/30 flex items-center justify-center text-rose-400">
+              <AlertTriangle className="w-6 h-6" />
+            </div>
+            <div>
+              <h4 className="text-lg font-bold text-white">Supprimer cette référence ?</h4>
+              <p className="text-xs text-slate-300 mt-1">
+                Êtes-vous certain de vouloir supprimer <strong>{itemToDelete.name}</strong> ({itemToDelete.quantityInStock} pcs en stock) ?
+              </p>
+            </div>
+            <div className="flex items-center justify-end space-x-3 pt-2">
+              <button
+                onClick={() => setItemToDelete(null)}
+                className="px-4 py-2 rounded-xl bg-slate-800 text-slate-300 hover:text-white text-xs font-semibold"
+              >
+                Annuler
+              </button>
+              <button
+                onClick={() => {
+                  deleteInventoryItem(itemToDelete.id);
+                  setItemToDelete(null);
+                }}
+                className="px-4 py-2 rounded-xl bg-rose-600 hover:bg-rose-500 text-white text-xs font-bold shadow-lg shadow-rose-600/20"
+              >
+                Supprimer
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* QrLabelModal for single part or batch sheet */}
+      <QrLabelModal
+        isOpen={!!labelModalItem || showBatchLabels}
+        onClose={() => {
+          setLabelModalItem(null);
+          setShowBatchLabels(false);
+        }}
+        inventoryItem={labelModalItem}
+        batchItems={showBatchLabels ? filteredItems : undefined}
+      />
+    </div>
+  );
+};
diff --git a/src/components/labels/QrLabelModal.tsx b/src/components/labels/QrLabelModal.tsx
new file mode 100644
index 0000000..7d33a81
--- /dev/null
+++ b/src/components/labels/QrLabelModal.tsx
@@ -0,0 +1,521 @@
+import React, { useState } from 'react';
+import { QRCodeSVG } from 'qrcode.react';
+import {
+  X,
+  Printer,
+  QrCode,
+  Sliders,
+  Check,
+  Tag,
+} from 'lucide-react';
+import { useApp } from '../../context/AppContext';
+import type { Project, InventoryItem } from '../../types';
+import { formatCurrency, getPartCategoryLabel } from '../../utils/calculations';
+
+export type LabelType = 'project_box' | 'project_back_shell' | 'inventory_drawer' | 'inventory_pouch';
+export type PageLayout = 'single_thermal' | 'a4_grid_2x4' | 'a4_grid_3x7';
+
+interface QrLabelModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  project?: Project | null;
+  inventoryItem?: InventoryItem | null;
+  batchItems?: InventoryItem[];
+}
+
+export const QrLabelModal: React.FC<QrLabelModalProps> = ({
+  isOpen,
+  onClose,
+  project,
+  inventoryItem,
+  batchItems,
+}) => {
+  const { settings } = useApp();
+
+  const isProject = !!project;
+  const [labelType, setLabelType] = useState<LabelType>(
+    isProject ? 'project_box' : 'inventory_drawer'
+  );
+  const [pageLayout, setPageLayout] = useState<PageLayout>('single_thermal');
+  const [showPrice, setShowPrice] = useState(true);
+  const [showLocation, setShowLocation] = useState(true);
+  const [showMods, setShowMods] = useState(true);
+  const [showDate, setShowDate] = useState(true);
+  const [copiesCount, setCopiesCount] = useState(1);
+  const [themeInverted, setThemeInverted] = useState(false); // Dark sticker vs Standard White thermal paper
+
+  if (!isOpen) return null;
+
+  // Generate QR payload
+  const getQrValue = (p?: Project | null, item?: InventoryItem | null) => {
+    if (p) {
+      return JSON.stringify({
+        app: 'uwuFinances',
+        type: 'PROJECT',
+        serial: p.serialNumber,
+        model: p.consoleModel,
+        title: p.title,
+        date: p.completedDate || p.startDate,
+        warranty: `${p.warrantyMonths || 6}M`,
+      });
+    }
+    if (item) {
+      return JSON.stringify({
+        app: 'uwuFinances',
+        type: 'INVENTORY_PART',
+        sku: item.sku,
+        name: item.name,
+        category: item.category,
+        model: item.consoleModel,
+        loc: item.locationInWorkshop || 'Atelier',
+      });
+    }
+    return 'uwuFinances:ITEM';
+  };
+
+  const handlePrint = () => {
+    window.print();
+  };
+
+  // Render a single sticker label
+  const renderLabelCard = (
+    currentProject?: Project | null,
+    currentItem?: InventoryItem | null,
+    keyIndex = 0
+  ) => {
+    const qrData = getQrValue(currentProject, currentItem);
+
+    // 1. BOX PACKAGING STICKER (Large format: ~80x50mm)
+    if (labelType === 'project_box' && currentProject) {
+      return (
+        <div
+          key={keyIndex}
+          className={`label-item relative w-[320px] h-[200px] p-3.5 rounded-xl border-2 transition-all flex flex-col justify-between overflow-hidden ${
+            themeInverted
+              ? 'bg-slate-950 text-white border-pink-500'
+              : 'bg-white text-black border-black shadow-md'
+          }`}
+          style={{ width: '82mm', height: '52mm' }}
+        >
+          {/* Header */}
+          <div className="flex items-center justify-between border-b pb-1.5 border-current">
+            <div className="flex items-center space-x-1.5">
+              <span className="font-extrabold text-xs tracking-tight uppercase font-display">
+                {settings.businessName || 'uwu Custom Studio'}
+              </span>
+              <span className="text-[9px] px-1 py-0.2 rounded font-bold border border-current">
+                PRO MOD
+              </span>
+            </div>
+            <span className="font-mono text-[11px] font-black tracking-wider">
+              {currentProject.serialNumber}
+            </span>
+          </div>
+
+          {/* Body: Info + QR Code */}
+          <div className="flex items-center gap-2.5 my-auto">
+            <div className="p-1 rounded bg-white border border-slate-300 shrink-0">
+              <QRCodeSVG
+                value={qrData}
+                size={68}
+                level="M"
+                includeMargin={false}
+                fgColor="#000000"
+                bgColor="#ffffff"
+              />
+            </div>
+
+            <div className="min-w-0 flex-1 space-y-1">
+              <div className="font-black text-xs leading-snug line-clamp-1">
+                {currentProject.title}
+              </div>
+              <div className="text-[10px] font-bold flex items-center space-x-1 opacity-90">
+                <span>🎮 {currentProject.consoleModel}</span>
+              </div>
+
+              {showMods && currentProject.modsList && currentProject.modsList.length > 0 && (
+                <div className="text-[8.5px] leading-tight line-clamp-2 opacity-80">
+                  {currentProject.modsList.slice(0, 3).join(' • ')}
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Footer */}
+          <div className="flex items-center justify-between text-[9px] font-mono border-t pt-1 border-current">
+            {showDate && (
+              <span>Date: {currentProject.completedDate || currentProject.startDate}</span>
+            )}
+            <span>QC: Validé ✓</span>
+            {showPrice && (
+              <span className="font-black font-sans text-[10px]">
+                {formatCurrency(currentProject.salePriceActual || currentProject.salePriceTarget, settings.currency)}
+              </span>
+            )}
+          </div>
+        </div>
+      );
+    }
+
+    // 2. BACK SHELL / BATTERY COMPARTMENT STICKER (Compact: ~50x25mm)
+    if (labelType === 'project_back_shell' && currentProject) {
+      return (
+        <div
+          key={keyIndex}
+          className={`label-item relative w-[220px] h-[110px] p-2 rounded-lg border-2 flex items-center gap-2 overflow-hidden ${
+            themeInverted
+              ? 'bg-slate-950 text-white border-pink-500'
+              : 'bg-white text-black border-black shadow-md'
+          }`}
+          style={{ width: '52mm', height: '28mm' }}
+        >
+          <div className="p-0.5 rounded bg-white border border-slate-300 shrink-0">
+            <QRCodeSVG
+              value={qrData}
+              size={48}
+              level="L"
+              includeMargin={false}
+              fgColor="#000000"
+              bgColor="#ffffff"
+            />
+          </div>
+
+          <div className="min-w-0 flex-1 text-[9px] space-y-0.5 font-mono">
+            <div className="font-extrabold uppercase text-[9.5px] truncate font-display">
+              {settings.logoText || 'uwuFinances'}
+            </div>
+            <div className="font-black text-[10px] text-pink-600 truncate">
+              {currentProject.serialNumber}
+            </div>
+            <div className="truncate opacity-80">{currentProject.consoleModel}</div>
+            <div className="text-[8px] opacity-70">Garantie {currentProject.warrantyMonths || 6}M</div>
+          </div>
+        </div>
+      );
+    }
+
+    // 3. INVENTORY DRAWER / STORAGE BOX STICKER (Medium: ~60x30mm)
+    if (currentItem) {
+      return (
+        <div
+          key={keyIndex}
+          className={`label-item relative w-[250px] h-[130px] p-2.5 rounded-xl border-2 flex flex-col justify-between overflow-hidden ${
+            themeInverted
+              ? 'bg-slate-950 text-white border-cyan-500'
+              : 'bg-white text-black border-black shadow-md'
+          }`}
+          style={{ width: '60mm', height: '32mm' }}
+        >
+          {/* Top: SKU & Category */}
+          <div className="flex items-center justify-between border-b pb-1 border-current">
+            <span className="font-mono text-[10px] font-black">
+              {currentItem.sku}
+            </span>
+            <span className="text-[8.5px] font-bold uppercase truncate max-w-[120px]">
+              {getPartCategoryLabel(currentItem.category)}
+            </span>
+          </div>
+
+          {/* Middle: QR & Title */}
+          <div className="flex items-center gap-2 my-1">
+            <div className="p-0.5 rounded bg-white border border-slate-300 shrink-0">
+              <QRCodeSVG
+                value={qrData}
+                size={46}
+                level="M"
+                includeMargin={false}
+                fgColor="#000000"
+                bgColor="#ffffff"
+              />
+            </div>
+
+            <div className="min-w-0 flex-1">
+              <div className="font-bold text-[10px] leading-tight line-clamp-2">
+                {currentItem.name}
+              </div>
+              <div className="text-[9px] font-semibold opacity-80 mt-0.5">
+                🎮 {currentItem.consoleModel}
+              </div>
+            </div>
+          </div>
+
+          {/* Bottom: Location & Unit Cost */}
+          <div className="flex items-center justify-between text-[8.5px] font-mono border-t pt-1 border-current">
+            {showLocation && (
+              <span className="truncate max-w-[130px]">
+                📍 {currentItem.locationInWorkshop || 'Bac Stock'}
+              </span>
+            )}
+            {showPrice && (
+              <span className="font-bold font-sans text-[9.5px]">
+                Coût: {formatCurrency(currentItem.unitCostWithFees || currentItem.unitPurchasePrice, settings.currency)}
+              </span>
+            )}
+          </div>
+        </div>
+      );
+    }
+
+    return null;
+  };
+
+  // Compile list of labels to render (support duplicates and batch items)
+  const itemsToRender: { project?: Project | null; item?: InventoryItem | null }[] = [];
+  if (batchItems && batchItems.length > 0) {
+    batchItems.forEach((it) => {
+      for (let c = 0; c < copiesCount; c++) {
+        itemsToRender.push({ item: it });
+      }
+    });
+  } else if (project) {
+    for (let c = 0; c < copiesCount; c++) {
+      itemsToRender.push({ project });
+    }
+  } else if (inventoryItem) {
+    for (let c = 0; c < copiesCount; c++) {
+      itemsToRender.push({ item: inventoryItem });
+    }
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/85 backdrop-blur-md overflow-y-auto">
+      <div className="relative w-full max-w-4xl bg-slate-900 border border-purple-500/40 rounded-3xl shadow-2xl overflow-hidden my-6 animate-scaleUp">
+        {/* Modal Header */}
+        <div className="flex items-center justify-between px-6 py-4 border-b border-slate-800 bg-gradient-to-r from-purple-950/40 via-slate-900 to-pink-950/40 no-print">
+          <div className="flex items-center space-x-3">
+            <div className="p-2.5 rounded-2xl bg-purple-500/15 border border-purple-500/30 text-purple-400">
+              <QrCode className="w-5 h-5" />
+            </div>
+            <div>
+              <h3 className="text-lg font-bold text-white flex items-center space-x-2">
+                <span>Studio d'Impression d'Étiquettes & QR Codes</span>
+                <span className="px-2 py-0.5 rounded-full text-[10px] font-bold bg-pink-500/20 text-pink-300 border border-pink-500/40">
+                  STICKERS PRO
+                </span>
+              </h3>
+              <p className="text-xs text-slate-400">
+                Générez et imprimez des étiquettes autocollantes pour vos boîtes kraft, tiroirs de pièces et coques
+              </p>
+            </div>
+          </div>
+
+          <button
+            onClick={onClose}
+            className="p-2 rounded-xl text-slate-400 hover:text-white hover:bg-slate-800 transition-colors"
+          >
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+
+        {/* Modal Body: Controls on Left, Live Preview on Right */}
+        <div className="p-6 grid grid-cols-1 lg:grid-cols-3 gap-6">
+          
+          {/* Controls Column */}
+          <div className="space-y-4 no-print text-xs">
+            {/* 1. Label Format Choice */}
+            <div className="space-y-1.5">
+              <label className="font-bold text-slate-300 flex items-center space-x-1.5">
+                <Tag className="w-3.5 h-3.5 text-pink-400" />
+                <span>Format & Type d'Étiquette :</span>
+              </label>
+
+              {isProject ? (
+                <div className="grid grid-cols-1 gap-2">
+                  <button
+                    type="button"
+                    onClick={() => setLabelType('project_box')}
+                    className={`p-2.5 rounded-xl border text-left flex items-center justify-between transition-all ${
+                      labelType === 'project_box'
+                        ? 'bg-pink-500/15 border-pink-500 text-white font-bold'
+                        : 'bg-slate-950 border-slate-800 text-slate-400 hover:text-slate-200'
+                    }`}
+                  >
+                    <div>
+                      <div className="text-xs">📦 Étiquette Boîte Kraft Packaging</div>
+                      <div className="text-[10px] text-slate-500 font-mono">Format 80x50 mm (Boîtes rigides)</div>
+                    </div>
+                    {labelType === 'project_box' && <Check className="w-4 h-4 text-pink-400" />}
+                  </button>
+
+                  <button
+                    type="button"
+                    onClick={() => setLabelType('project_back_shell')}
+                    className={`p-2.5 rounded-xl border text-left flex items-center justify-between transition-all ${
+                      labelType === 'project_back_shell'
+                        ? 'bg-pink-500/15 border-pink-500 text-white font-bold'
+                        : 'bg-slate-950 border-slate-800 text-slate-400 hover:text-slate-200'
+                    }`}
+                  >
+                    <div>
+                      <div className="text-xs">🎮 Sticker Arrière Console / Batterie</div>
+                      <div className="text-[10px] text-slate-500 font-mono">Format Compact 50x28 mm</div>
+                    </div>
+                    {labelType === 'project_back_shell' && <Check className="w-4 h-4 text-pink-400" />}
+                  </button>
+                </div>
+              ) : (
+                <div className="grid grid-cols-1 gap-2">
+                  <button
+                    type="button"
+                    onClick={() => setLabelType('inventory_drawer')}
+                    className={`p-2.5 rounded-xl border text-left flex items-center justify-between transition-all ${
+                      labelType === 'inventory_drawer'
+                        ? 'bg-cyan-500/15 border-cyan-500 text-white font-bold'
+                        : 'bg-slate-950 border-slate-800 text-slate-400 hover:text-slate-200'
+                    }`}
+                  >
+                    <div>
+                      <div className="text-xs">🗄️ Étiquette Tiroir & Bac de Stock</div>
+                      <div className="text-[10px] text-slate-500 font-mono">Format 60x32 mm (Casier atelier)</div>
+                    </div>
+                    {labelType === 'inventory_drawer' && <Check className="w-4 h-4 text-cyan-400" />}
+                  </button>
+                </div>
+              )}
+            </div>
+
+            {/* 2. Printer / Page Layout Format */}
+            <div className="space-y-1.5">
+              <label className="font-bold text-slate-300 flex items-center space-x-1.5">
+                <Printer className="w-3.5 h-3.5 text-cyan-400" />
+                <span>Support d'Impression :</span>
+              </label>
+
+              <select
+                value={pageLayout}
+                onChange={(e) => setPageLayout(e.target.value as PageLayout)}
+                className="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-white"
+              >
+                <option value="single_thermal">🖨️ Rouleau Thermique (Étiquette Unique)</option>
+                <option value="a4_grid_2x4">📄 Planche A4 (Grille 2x4 - 8 étiquettes/page)</option>
+                <option value="a4_grid_3x7">📄 Planche A4 (Grille 3x7 - 21 étiquettes/page)</option>
+              </select>
+            </div>
+
+            {/* 3. Number of Copies */}
+            <div className="space-y-1.5">
+              <label className="font-bold text-slate-300">Nombre d'exemplaires :</label>
+              <div className="flex items-center space-x-2">
+                <input
+                  type="number"
+                  min="1"
+                  max="50"
+                  value={copiesCount}
+                  onChange={(e) => setCopiesCount(Math.max(1, parseInt(e.target.value) || 1))}
+                  className="w-20 bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-white font-mono font-bold text-center"
+                />
+                <span className="text-slate-400 text-xs">autocollant(s) à imprimer</span>
+              </div>
+            </div>
+
+            {/* 4. Display Toggles */}
+            <div className="p-3.5 rounded-2xl bg-slate-950/70 border border-slate-850 space-y-2.5">
+              <span className="text-[11px] font-bold text-slate-400 uppercase tracking-wider block">
+                Champs Affichés sur l'Étiquette :
+              </span>
+
+              <label className="flex items-center space-x-2 cursor-pointer">
+                <input
+                  type="checkbox"
+                  checked={showPrice}
+                  onChange={(e) => setShowPrice(e.target.checked)}
+                  className="rounded border-slate-700 text-pink-500 focus:ring-pink-500 bg-slate-900"
+                />
+                <span className="text-slate-300">Afficher le prix / coût de revient</span>
+              </label>
+
+              {isProject && (
+                <label className="flex items-center space-x-2 cursor-pointer">
+                  <input
+                    type="checkbox"
+                    checked={showMods}
+                    onChange={(e) => setShowMods(e.target.checked)}
+                    className="rounded border-slate-700 text-pink-500 focus:ring-pink-500 bg-slate-900"
+                  />
+                  <span className="text-slate-300">Afficher la liste des mods installés</span>
+                </label>
+              )}
+
+              {!isProject && (
+                <label className="flex items-center space-x-2 cursor-pointer">
+                  <input
+                    type="checkbox"
+                    checked={showLocation}
+                    onChange={(e) => setShowLocation(e.target.checked)}
+                    className="rounded border-slate-700 text-cyan-500 focus:ring-cyan-500 bg-slate-900"
+                  />
+                  <span className="text-slate-300">Afficher l'emplacement dans l'atelier</span>
+                </label>
+              )}
+
+              <label className="flex items-center space-x-2 cursor-pointer">
+                <input
+                  type="checkbox"
+                  checked={showDate}
+                  onChange={(e) => setShowDate(e.target.checked)}
+                  className="rounded border-slate-700 text-pink-500 focus:ring-pink-500 bg-slate-900"
+                />
+                <span className="text-slate-300">Afficher la date</span>
+              </label>
+
+              <label className="flex items-center space-x-2 cursor-pointer pt-1 border-t border-slate-850">
+                <input
+                  type="checkbox"
+                  checked={themeInverted}
+                  onChange={(e) => setThemeInverted(e.target.checked)}
+                  className="rounded border-slate-700 text-purple-500 focus:ring-purple-500 bg-slate-900"
+                />
+                <span className="text-slate-300">Style sombre / Négatif (Cyberpunk sticker)</span>
+              </label>
+            </div>
+
+            {/* Print Button */}
+            <button
+              type="button"
+              onClick={handlePrint}
+              className="w-full flex items-center justify-center space-x-2 px-5 py-3 rounded-2xl font-black text-sm bg-gradient-to-r from-pink-500 via-purple-600 to-pink-600 hover:from-pink-400 hover:to-purple-500 text-white shadow-xl shadow-pink-500/25 hover:scale-[1.02] active:scale-[0.98] transition-all"
+            >
+              <Printer className="w-5 h-5" />
+              <span>Imprimer {itemsToRender.length} Étiquette(s)</span>
+            </button>
+          </div>
+
+          {/* Live Preview Column (2 cols wide on LG) */}
+          <div className="lg:col-span-2 flex flex-col space-y-3">
+            <div className="flex items-center justify-between no-print">
+              <span className="text-xs font-bold text-slate-300 uppercase tracking-wider flex items-center space-x-1.5">
+                <Sliders className="w-3.5 h-3.5 text-purple-400" />
+                <span>Aperçu Réel Avant Impression :</span>
+              </span>
+              <span className="text-[11px] font-mono text-slate-500">
+                {pageLayout === 'single_thermal' ? 'Format Rouleau 1x1' : 'Planche Plan A4'}
+              </span>
+            </div>
+
+            {/* Printable Container */}
+            <div className="flex-1 p-6 rounded-3xl bg-slate-950 border border-slate-800 flex items-center justify-center overflow-auto max-h-[500px] custom-scrollbar printable-label-sheet">
+              <div
+                className={`print-sheet flex flex-wrap gap-4 items-center justify-center ${
+                  pageLayout === 'a4_grid_2x4'
+                    ? 'grid grid-cols-2 gap-3 max-w-[650px]'
+                    : pageLayout === 'a4_grid_3x7'
+                    ? 'grid grid-cols-3 gap-2 max-w-[750px]'
+                    : 'flex flex-col'
+                }`}
+              >
+                {itemsToRender.map((elem, idx) =>
+                  renderLabelCard(elem.project, elem.item, idx)
+                )}
+              </div>
+            </div>
+
+            <div className="text-center text-[11px] text-slate-500 no-print">
+              💡 Le QR code encodé est scannable avec n'importe quel smartphone ou douchette de code-barres.
+            </div>
+          </div>
+
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/mods/ApplyModModal.tsx b/src/components/mods/ApplyModModal.tsx
new file mode 100644
index 0000000..f973434
--- /dev/null
+++ b/src/components/mods/ApplyModModal.tsx
@@ -0,0 +1,274 @@
+import React, { useState } from 'react';
+import {
+  X,
+  CheckCircle2,
+  Clock,
+  Wrench,
+  AlertTriangle,
+  Boxes,
+  ListTodo,
+} from 'lucide-react';
+import { useApp } from '../../context/AppContext';
+import type { ModRecipe } from '../../types';
+
+interface ApplyModModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  modToApply: ModRecipe | null;
+  defaultProjectId?: string | null;
+}
+
+export const ApplyModModal: React.FC<ApplyModModalProps> = ({
+  isOpen,
+  onClose,
+  modToApply,
+  defaultProjectId,
+}) => {
+  const { projects, inventory, applyModToProject, setSelectedProjectId, setCurrentTab } = useApp();
+
+  // Active / eligible projects
+  const activeProjects = projects.filter(
+    (p) => p.status !== 'sold'
+  );
+
+  const [selectedProjectId, setLocalSelectedProjectId] = useState<string>(
+    defaultProjectId || (activeProjects[0]?.id || '')
+  );
+  const [deductStock, setDeductStock] = useState(true);
+  const [addTasks, setAddTasks] = useState(true);
+
+  if (!isOpen || !modToApply) return null;
+
+  const targetProject = projects.find((p) => p.id === selectedProjectId);
+
+  const totalPartsCost = (modToApply.requiredParts || []).reduce(
+    (s, p) => s + p.estimatedCost * p.quantity,
+    0
+  );
+
+  const handleApply = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!selectedProjectId) return;
+
+    applyModToProject(selectedProjectId, modToApply.id, {
+      deductStock,
+      addTasks,
+    });
+
+    onClose();
+  };
+
+  const handleApplyAndOpenProject = () => {
+    if (!selectedProjectId) return;
+    applyModToProject(selectedProjectId, modToApply.id, {
+      deductStock,
+      addTasks,
+    });
+    setSelectedProjectId(selectedProjectId);
+    setCurrentTab('projects');
+    onClose();
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-3 sm:p-4 bg-slate-950/80 backdrop-blur-md overflow-y-auto">
+      <div className="bg-slate-900 border border-slate-700/80 rounded-2xl w-full max-w-xl shadow-2xl overflow-hidden animate-in fade-in zoom-in-95 duration-200">
+        
+        {/* Header */}
+        <div className="p-5 border-b border-slate-800 flex items-center justify-between bg-gradient-to-r from-cyan-500/10 via-purple-500/10 to-transparent">
+          <div className="flex items-center gap-3">
+            <div className="p-2.5 bg-cyan-500/20 text-cyan-400 border border-cyan-500/30 rounded-xl">
+              <Wrench className="w-5 h-5" />
+            </div>
+            <div>
+              <h2 className="text-lg font-bold text-white">
+                Appliquer le Mod au Projet
+              </h2>
+              <p className="text-xs text-slate-400">
+                Transférer les composants, la checklist et valoriser votre projet
+              </p>
+            </div>
+          </div>
+          <button
+            onClick={onClose}
+            className="p-2 text-slate-400 hover:text-white bg-slate-800 hover:bg-slate-700 rounded-lg transition-colors"
+          >
+            <X className="w-4 h-4" />
+          </button>
+        </div>
+
+        {/* Form Body */}
+        <form onSubmit={handleApply} className="p-5 space-y-5">
+          
+          {/* Mod Summary Card */}
+          <div className="p-4 bg-slate-950 border border-slate-800 rounded-xl space-y-2">
+            <div className="flex items-center justify-between">
+              <span className="text-xs font-semibold text-pink-400 uppercase tracking-wider">
+                Recette Sélectionnée
+              </span>
+              <span className="text-xs font-bold text-emerald-400 font-mono">
+                +{modToApply.suggestedAddedValue} € valeur
+              </span>
+            </div>
+            <h3 className="font-bold text-white text-base">{modToApply.name}</h3>
+            {modToApply.description && (
+              <p className="text-xs text-slate-400 line-clamp-2">{modToApply.description}</p>
+            )}
+
+            <div className="flex flex-wrap gap-2 pt-1 text-[11px]">
+              <span className="px-2 py-0.5 bg-slate-800 text-slate-300 rounded-md font-mono flex items-center gap-1">
+                <Clock className="w-3 h-3 text-purple-400" /> ~{modToApply.estimatedMinutes} min
+              </span>
+              <span className="px-2 py-0.5 bg-slate-800 text-cyan-300 rounded-md font-mono flex items-center gap-1">
+                <Boxes className="w-3 h-3 text-cyan-400" /> {modToApply.requiredParts?.length || 0} pièces (~{totalPartsCost.toFixed(2)} €)
+              </span>
+              <span className="px-2 py-0.5 bg-slate-800 text-amber-300 rounded-md font-mono flex items-center gap-1">
+                <ListTodo className="w-3 h-3 text-amber-400" /> {modToApply.checklistTasks?.length || 0} tâches
+              </span>
+            </div>
+          </div>
+
+          {/* Project Target Picker */}
+          <div>
+            <label className="block text-xs font-semibold text-slate-300 mb-1.5">
+              Choisir le Projet Cible *
+            </label>
+            {activeProjects.length === 0 ? (
+              <div className="p-3 bg-amber-500/10 border border-amber-500/20 rounded-xl text-xs text-amber-300 flex items-center gap-2">
+                <AlertTriangle className="w-4 h-4 shrink-0" />
+                <span>Aucun projet en cours disponible. Veuillez d'abord créer un projet.</span>
+              </div>
+            ) : (
+              <select
+                required
+                value={selectedProjectId}
+                onChange={(e) => setLocalSelectedProjectId(e.target.value)}
+                className="w-full bg-slate-950 border border-slate-700 rounded-xl px-3.5 py-2.5 text-white text-sm font-medium focus:outline-none focus:border-cyan-500"
+              >
+                {activeProjects.map((proj) => (
+                  <option key={proj.id} value={proj.id}>
+                    [{proj.serialNumber}] {proj.title} • {proj.consoleModel} ({proj.status})
+                  </option>
+                ))}
+              </select>
+            )}
+
+            {targetProject && (
+              <div className="mt-2 p-2.5 bg-slate-950/60 border border-slate-800/80 rounded-lg text-xs text-slate-400 flex items-center justify-between">
+                <span>Modèle : <strong className="text-white">{targetProject.consoleModel}</strong></span>
+                <span>Prix de vente cible actuel : <strong className="text-emerald-400 font-mono">{targetProject.salePriceTarget} €</strong></span>
+              </div>
+            )}
+          </div>
+
+          {/* Parts preview & Stock availability */}
+          {modToApply.requiredParts && modToApply.requiredParts.length > 0 && (
+            <div>
+              <label className="block text-xs font-semibold text-slate-300 mb-1.5">
+                Pièces qui seront ajoutées au projet ({modToApply.requiredParts.length}) :
+              </label>
+              <div className="space-y-1.5 max-h-36 overflow-y-auto pr-1">
+                {modToApply.requiredParts.map((part, idx) => {
+                  const invItem = part.partId ? inventory.find((i) => i.id === part.partId) : null;
+                  const hasStock = invItem ? invItem.quantityInStock >= part.quantity : true;
+
+                  return (
+                    <div
+                      key={idx}
+                      className="p-2 bg-slate-950/80 border border-slate-800 rounded-lg flex items-center justify-between text-xs"
+                    >
+                      <div className="flex-1 min-w-0 pr-2">
+                        <div className="text-white font-medium truncate">{part.partName}</div>
+                        <div className="text-[10px] text-slate-400">
+                          Qté : {part.quantity} • Coût estimé : {part.estimatedCost.toFixed(2)} €
+                        </div>
+                      </div>
+
+                      <div className="shrink-0">
+                        {invItem ? (
+                          hasStock ? (
+                            <span className="px-2 py-0.5 bg-emerald-500/10 text-emerald-400 border border-emerald-500/30 rounded text-[10px] font-mono">
+                              En Stock ({invItem.quantityInStock})
+                            </span>
+                          ) : (
+                            <span className="px-2 py-0.5 bg-amber-500/15 text-amber-300 border border-amber-500/30 rounded text-[10px] font-mono">
+                              À Prévoir (Stock : {invItem.quantityInStock})
+                            </span>
+                          )
+                        ) : (
+                          <span className="px-2 py-0.5 bg-amber-500/15 text-amber-300 border border-amber-500/30 rounded text-[10px] font-mono">
+                            À Prévoir (En Prévision)
+                          </span>
+                        )}
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          )}
+
+          {/* Planned Items Info Banner */}
+          <div className="p-3 bg-slate-950/90 border border-amber-500/30 rounded-xl text-xs text-amber-300 flex items-start gap-2">
+            <AlertTriangle className="w-4 h-4 shrink-0 mt-0.5 text-amber-400" />
+            <span className="text-[11px] leading-relaxed text-amber-200/90">
+              Les pièces non disponibles en stock seront ajoutées au projet en mode <strong>« À approvisionner »</strong> (coût à prévoir) et enregistrées dans votre stock sous le statut <strong>« En Prévision »</strong>.
+            </span>
+          </div>
+
+          {/* Options Toggles */}
+          <div className="space-y-2 pt-2 border-t border-slate-800">
+            <label className="flex items-center gap-2 cursor-pointer text-xs text-slate-300">
+              <input
+                type="checkbox"
+                checked={deductStock}
+                onChange={(e) => setDeductStock(e.target.checked)}
+                className="rounded bg-slate-950 border-slate-700 text-cyan-500 focus:ring-cyan-500 w-4 h-4"
+              />
+              <span>📦 Déduire automatiquement les pièces disponibles de l'inventaire</span>
+            </label>
+
+            <label className="flex items-center gap-2 cursor-pointer text-xs text-slate-300">
+              <input
+                type="checkbox"
+                checked={addTasks}
+                onChange={(e) => setAddTasks(e.target.checked)}
+                className="rounded bg-slate-950 border-slate-700 text-purple-500 focus:ring-purple-500 w-4 h-4"
+              />
+              <span>📋 Importer les {modToApply.checklistTasks?.length || 0} étapes du mod dans la checklist du projet</span>
+            </label>
+          </div>
+
+          {/* Actions */}
+          <div className="pt-3 border-t border-slate-800 flex flex-col sm:flex-row items-center justify-between gap-2">
+            <button
+              type="button"
+              onClick={onClose}
+              className="w-full sm:w-auto px-4 py-2.5 bg-slate-800 hover:bg-slate-700 text-slate-300 rounded-xl text-xs font-semibold transition-colors"
+            >
+              Annuler
+            </button>
+
+            <div className="flex items-center gap-2 w-full sm:w-auto">
+              <button
+                type="button"
+                disabled={!selectedProjectId}
+                onClick={handleApplyAndOpenProject}
+                className="flex-1 sm:flex-initial px-4 py-2.5 bg-slate-800 hover:bg-slate-700 text-cyan-300 border border-cyan-500/30 rounded-xl text-xs font-semibold flex items-center justify-center gap-1.5 transition-colors"
+              >
+                Appliquer & Ouvrir
+              </button>
+
+              <button
+                type="submit"
+                disabled={!selectedProjectId}
+                className="flex-1 sm:flex-initial px-5 py-2.5 bg-gradient-to-r from-cyan-500 to-blue-600 hover:from-cyan-400 hover:to-blue-500 disabled:opacity-50 text-white rounded-xl text-xs font-bold shadow-lg shadow-cyan-500/20 flex items-center justify-center gap-1.5 transition-all"
+              >
+                <CheckCircle2 className="w-4 h-4" /> Appliquer
+              </button>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/mods/ModRecipeModal.tsx b/src/components/mods/ModRecipeModal.tsx
new file mode 100644
index 0000000..edc1da5
--- /dev/null
+++ b/src/components/mods/ModRecipeModal.tsx
@@ -0,0 +1,591 @@
+import React, { useState, useEffect } from 'react';
+import {
+  X,
+  Sparkles,
+  Layers,
+  Clock,
+  Euro,
+  Plus,
+  Trash2,
+  CheckCircle2,
+  Wrench,
+} from 'lucide-react';
+import { useApp } from '../../context/AppContext';
+import type {
+  ModRecipe,
+  ModCategory,
+  ConsoleModel,
+  ModRequiredPart,
+} from '../../types';
+
+interface ModRecipeModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  editingMod?: ModRecipe | null;
+}
+
+export const ModRecipeModal: React.FC<ModRecipeModalProps> = ({
+  isOpen,
+  onClose,
+  editingMod,
+}) => {
+  const { inventory, addModRecipe, updateModRecipe, modCategories, consoleModels } = useApp();
+
+  // Form State
+  const [name, setName] = useState('');
+  const [category, setCategory] = useState<ModCategory>('screen');
+  const [selectedConsoles, setSelectedConsoles] = useState<ConsoleModel[]>(['Game Boy Advance']);
+  const [description, setDescription] = useState('');
+  const [installationNotes, setInstallationNotes] = useState('');
+  const [difficulty, setDifficulty] = useState<'easy' | 'medium' | 'hard' | 'expert'>('medium');
+  const [estimatedMinutes, setEstimatedMinutes] = useState(45);
+  const [suggestedAddedValue, setSuggestedAddedValue] = useState(40);
+  const [isPopular, setIsPopular] = useState(false);
+  const [tagsInput, setTagsInput] = useState('');
+
+  // Required Parts
+  const [requiredParts, setRequiredParts] = useState<ModRequiredPart[]>([]);
+  const [selectedInventoryPartId, setSelectedInventoryPartId] = useState('');
+
+  // Checklist Tasks
+  const [checklistTasks, setChecklistTasks] = useState<string[]>([]);
+  const [newTaskInput, setNewTaskInput] = useState('');
+
+  // Initialize or Reset
+  useEffect(() => {
+    if (editingMod) {
+      setName(editingMod.name);
+      setCategory(editingMod.category);
+      setSelectedConsoles(editingMod.compatibleModels || []);
+      setDescription(editingMod.description || '');
+      setInstallationNotes(editingMod.installationNotes || '');
+      setDifficulty(editingMod.difficulty || 'medium');
+      setEstimatedMinutes(editingMod.estimatedMinutes || 45);
+      setSuggestedAddedValue(editingMod.suggestedAddedValue || 40);
+      setIsPopular(editingMod.isPopular || false);
+      setTagsInput(editingMod.tags ? editingMod.tags.join(', ') : '');
+      setRequiredParts(editingMod.requiredParts || []);
+      setChecklistTasks(editingMod.checklistTasks || []);
+    } else {
+      setName('');
+      setCategory('screen');
+      setSelectedConsoles(['Game Boy Advance']);
+      setDescription('');
+      setInstallationNotes('');
+      setDifficulty('medium');
+      setEstimatedMinutes(45);
+      setSuggestedAddedValue(40);
+      setIsPopular(false);
+      setTagsInput('');
+      setRequiredParts([]);
+      setChecklistTasks([
+        'Démonter la console et nettoyer la zone d\'intervention',
+        'Réaliser les soudures nécessaires avec étain de précision',
+        'Contrôler le bon fonctionnement avant remontage complet',
+      ]);
+    }
+  }, [editingMod, isOpen]);
+
+  if (!isOpen) return null;
+
+  const toggleConsole = (consoleName: ConsoleModel) => {
+    if (selectedConsoles.includes(consoleName)) {
+      if (selectedConsoles.length > 1) {
+        setSelectedConsoles(selectedConsoles.filter((c) => c !== consoleName));
+      }
+    } else {
+      setSelectedConsoles([...selectedConsoles, consoleName]);
+    }
+  };
+
+  const handleAddInventoryPart = () => {
+    if (!selectedInventoryPartId) return;
+    const invItem = inventory.find((i) => i.id === selectedInventoryPartId);
+    if (!invItem) return;
+
+    setRequiredParts([
+      ...requiredParts,
+      {
+        partId: invItem.id,
+        partName: invItem.name,
+        category: invItem.category,
+        quantity: 1,
+        estimatedCost: invItem.unitCostWithFees,
+      },
+    ]);
+    setSelectedInventoryPartId('');
+  };
+
+  const handleAddCustomPart = () => {
+    setRequiredParts([
+      ...requiredParts,
+      {
+        partName: 'Nouvelle pièce requise',
+        category: 'other',
+        quantity: 1,
+        estimatedCost: 10,
+      },
+    ]);
+  };
+
+  const handleUpdatePart = (index: number, updates: Partial<ModRequiredPart>) => {
+    const updated = [...requiredParts];
+    updated[index] = { ...updated[index], ...updates };
+    setRequiredParts(updated);
+  };
+
+  const handleRemovePart = (index: number) => {
+    setRequiredParts(requiredParts.filter((_, i) => i !== index));
+  };
+
+  const handleAddTask = () => {
+    if (!newTaskInput.trim()) return;
+    setChecklistTasks([...checklistTasks, newTaskInput.trim()]);
+    setNewTaskInput('');
+  };
+
+  const handleRemoveTask = (index: number) => {
+    setChecklistTasks(checklistTasks.filter((_, i) => i !== index));
+  };
+
+  const calculateTotalPartsCost = () => {
+    return requiredParts.reduce((acc, p) => acc + (p.estimatedCost * p.quantity), 0);
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!name.trim()) return;
+
+    const parsedTags = tagsInput
+      .split(',')
+      .map((t) => t.trim())
+      .filter(Boolean);
+
+    const modData = {
+      name: name.trim(),
+      category,
+      compatibleModels: selectedConsoles,
+      description: description.trim(),
+      installationNotes: installationNotes.trim(),
+      difficulty,
+      estimatedMinutes: Number(estimatedMinutes) || 30,
+      suggestedAddedValue: Number(suggestedAddedValue) || 0,
+      requiredParts,
+      checklistTasks,
+      tags: parsedTags,
+      isPopular,
+    };
+
+    if (editingMod) {
+      updateModRecipe(editingMod.id, modData);
+    } else {
+      addModRecipe(modData);
+    }
+    onClose();
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-3 sm:p-4 md:p-6 bg-slate-950/80 backdrop-blur-md overflow-y-auto">
+      <div className="bg-slate-900 border border-slate-700/80 rounded-2xl w-full max-w-4xl max-h-[92vh] flex flex-col shadow-2xl overflow-hidden animate-in fade-in zoom-in-95 duration-200">
+        
+        {/* Modal Header */}
+        <div className="p-5 sm:p-6 border-b border-slate-800 flex items-center justify-between bg-gradient-to-r from-pink-500/10 via-purple-500/10 to-transparent">
+          <div className="flex items-center gap-3">
+            <div className="p-3 bg-pink-500/20 text-pink-400 border border-pink-500/30 rounded-xl">
+              <Sparkles className="w-6 h-6" />
+            </div>
+            <div>
+              <h2 className="text-xl font-bold text-white flex items-center gap-2">
+                {editingMod ? 'Modifier la Recette de Mod' : 'Créer une Nouvelle Recette de Mod'}
+              </h2>
+              <p className="text-xs text-slate-400">
+                Définissez les pièces requises, le temps d'atelier et la valeur ajoutée pour réutiliser ce mod dans vos projets.
+              </p>
+            </div>
+          </div>
+          <button
+            onClick={onClose}
+            className="p-2 text-slate-400 hover:text-white bg-slate-800/80 hover:bg-slate-700 rounded-lg transition-colors"
+          >
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+
+        {/* Modal Body / Form */}
+        <form onSubmit={handleSubmit} className="flex-1 overflow-y-auto p-5 sm:p-6 space-y-6">
+          
+          {/* Section 1: Informations Générales */}
+          <div className="space-y-4">
+            <h3 className="text-sm font-semibold uppercase tracking-wider text-pink-400 flex items-center gap-2">
+              <Wrench className="w-4 h-4" /> 1. Informations Générales
+            </h3>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div className="md:col-span-2">
+                <label className="block text-xs font-medium text-slate-300 mb-1">
+                  Nom du Mod / Titre de la Recette *
+                </label>
+                <input
+                  type="text"
+                  required
+                  placeholder="Ex: Écran IPS V5 Laminé Grand Angle avec Menu OSD"
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
+                  className="w-full bg-slate-950 border border-slate-700 rounded-xl px-4 py-2.5 text-white placeholder-slate-500 focus:outline-none focus:border-pink-500 text-sm font-medium"
+                />
+              </div>
+
+              <div>
+                <label className="block text-xs font-medium text-slate-300 mb-1">
+                  Catégorie de Modification
+                </label>
+                <select
+                  value={category}
+                  onChange={(e) => setCategory(e.target.value as ModCategory)}
+                  className="w-full bg-slate-950 border border-slate-700 rounded-xl px-3 py-2.5 text-white focus:outline-none focus:border-pink-500 text-sm"
+                >
+                  {modCategories.map((cat) => (
+                    <option key={cat.id} value={cat.slug}>
+                      {cat.name}
+                    </option>
+                  ))}
+                </select>
+              </div>
+
+              <div>
+                <label className="block text-xs font-medium text-slate-300 mb-1">
+                  Niveau de Difficulté
+                </label>
+                <select
+                  value={difficulty}
+                  onChange={(e) => setDifficulty(e.target.value as any)}
+                  className="w-full bg-slate-950 border border-slate-700 rounded-xl px-3 py-2.5 text-white focus:outline-none focus:border-pink-500 text-sm font-medium"
+                >
+                  <option value="easy">🟢 Facile (Sans soudure / Plug & Play)</option>
+                  <option value="medium">🟡 Intermédiaire (3-4 points de soudure)</option>
+                  <option value="hard">🟠 Avancé (Découpe coque & soudures de précision)</option>
+                  <option value="expert">🔴 Expert (Full Recap CMS & Micro-soudure)</option>
+                </select>
+              </div>
+            </div>
+
+            {/* Consoles Compatibles (Multi-select Chips) */}
+            <div>
+              <label className="block text-xs font-medium text-slate-300 mb-2">
+                Consoles Compatibles (cliquez pour activer/désactiver)
+              </label>
+              <div className="flex flex-wrap gap-2 max-h-32 overflow-y-auto p-2 bg-slate-950 border border-slate-800 rounded-xl">
+                {consoleModels.map((cm) => {
+                  const isSelected = selectedConsoles.includes(cm.slug);
+                  return (
+                    <button
+                      key={cm.id}
+                      type="button"
+                      onClick={() => toggleConsole(cm.slug)}
+                      className={`px-3 py-1 rounded-lg text-xs font-medium transition-all ${
+                        isSelected
+                          ? 'bg-pink-500 text-white shadow-sm shadow-pink-500/30'
+                          : 'bg-slate-800 text-slate-400 hover:bg-slate-700 hover:text-slate-200'
+                      }`}
+                    >
+                      {isSelected ? '✓ ' : '+ '}
+                      {cm.name}
+                    </button>
+                  );
+                })}
+              </div>
+            </div>
+
+            {/* Description & Notes */}
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div>
+                <label className="block text-xs font-medium text-slate-300 mb-1">
+                  Description Commerciale & Caractéristiques
+                </label>
+                <textarea
+                  rows={3}
+                  placeholder="Explication des fonctionnalités pour la fiche client..."
+                  value={description}
+                  onChange={(e) => setDescription(e.target.value)}
+                  className="w-full bg-slate-950 border border-slate-700 rounded-xl px-3 py-2 text-white placeholder-slate-500 focus:outline-none focus:border-pink-500 text-xs"
+                />
+              </div>
+
+              <div>
+                <label className="block text-xs font-medium text-slate-300 mb-1">
+                  Notes Techniques d'Installation & Précautions
+                </label>
+                <textarea
+                  rows={3}
+                  placeholder="Ex: Points de test TP2 / TP3, isolation thermique du module..."
+                  value={installationNotes}
+                  onChange={(e) => setInstallationNotes(e.target.value)}
+                  className="w-full bg-slate-950 border border-slate-700 rounded-xl px-3 py-2 text-white placeholder-slate-500 focus:outline-none focus:border-pink-500 text-xs"
+                />
+              </div>
+            </div>
+          </div>
+
+          {/* Section 2: Pièces & Matériel Requis (Lié à l'inventaire) */}
+          <div className="space-y-4 pt-4 border-t border-slate-800">
+            <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2">
+              <div>
+                <h3 className="text-sm font-semibold uppercase tracking-wider text-cyan-400 flex items-center gap-2">
+                  <Layers className="w-4 h-4" /> 2. Pièces & Composants Requis
+                </h3>
+                <p className="text-xs text-slate-400">
+                  Total matériel estimé : <strong className="text-cyan-300 font-mono">{calculateTotalPartsCost().toFixed(2)} €</strong>
+                </p>
+              </div>
+
+              <div className="flex items-center gap-2">
+                <button
+                  type="button"
+                  onClick={handleAddCustomPart}
+                  className="px-2.5 py-1.5 bg-slate-800 hover:bg-slate-700 text-slate-200 rounded-lg text-xs font-medium flex items-center gap-1 transition-colors"
+                >
+                  <Plus className="w-3.5 h-3.5" /> Pièce Libre
+                </button>
+              </div>
+            </div>
+
+            {/* Link from Inventory Dropdown */}
+            <div className="flex gap-2">
+              <select
+                value={selectedInventoryPartId}
+                onChange={(e) => setSelectedInventoryPartId(e.target.value)}
+                className="flex-1 bg-slate-950 border border-slate-700 rounded-xl px-3 py-2 text-white text-xs focus:outline-none focus:border-cyan-500"
+              >
+                <option value="">Sélectionner une pièce depuis votre stock actuel...</option>
+                {inventory.map((item) => (
+                  <option key={item.id} value={item.id}>
+                    [{item.sku}] {item.name} ({item.unitCostWithFees.toFixed(2)} € - Dispo: {item.quantityInStock})
+                  </option>
+                ))}
+              </select>
+              <button
+                type="button"
+                disabled={!selectedInventoryPartId}
+                onClick={handleAddInventoryPart}
+                className="px-4 py-2 bg-cyan-600 hover:bg-cyan-500 disabled:opacity-50 text-white rounded-xl text-xs font-semibold flex items-center gap-1 transition-colors shrink-0"
+              >
+                <Plus className="w-4 h-4" /> Ajouter du Stock
+              </button>
+            </div>
+
+            {/* List of Added Parts */}
+            {requiredParts.length === 0 ? (
+              <div className="p-4 rounded-xl border border-dashed border-slate-800 text-center text-xs text-slate-500">
+                Aucune pièce liée à cette recette. Vous pouvez sélectionner des pièces de votre stock ou en créer librement.
+              </div>
+            ) : (
+              <div className="space-y-2 max-h-48 overflow-y-auto pr-1">
+                {requiredParts.map((part, index) => (
+                  <div
+                    key={index}
+                    className="p-2.5 bg-slate-950/80 border border-slate-800 rounded-xl flex flex-col sm:flex-row sm:items-center justify-between gap-2 text-xs"
+                  >
+                    <div className="flex-1 min-w-0">
+                      <input
+                        type="text"
+                        value={part.partName}
+                        onChange={(e) => handleUpdatePart(index, { partName: e.target.value })}
+                        className="w-full bg-transparent border-b border-transparent hover:border-slate-700 focus:border-cyan-500 text-white font-medium focus:outline-none"
+                      />
+                      <div className="text-[10px] text-slate-500">
+                        {part.partId ? '🔗 Pièce liée au stock' : '📝 Pièce générique libre'}
+                      </div>
+                    </div>
+
+                    <div className="flex items-center gap-3 shrink-0">
+                      <div className="flex items-center gap-1">
+                        <span className="text-slate-400">Qté:</span>
+                        <input
+                          type="number"
+                          min="1"
+                          value={part.quantity}
+                          onChange={(e) => handleUpdatePart(index, { quantity: Math.max(1, parseInt(e.target.value) || 1) })}
+                          className="w-12 bg-slate-900 border border-slate-700 rounded px-1.5 py-0.5 text-center text-white text-xs font-mono"
+                        />
+                      </div>
+
+                      <div className="flex items-center gap-1">
+                        <span className="text-slate-400">Coût:</span>
+                        <input
+                          type="number"
+                          step="0.1"
+                          min="0"
+                          value={part.estimatedCost}
+                          onChange={(e) => handleUpdatePart(index, { estimatedCost: parseFloat(e.target.value) || 0 })}
+                          className="w-16 bg-slate-900 border border-slate-700 rounded px-1.5 py-0.5 text-right text-cyan-400 font-mono text-xs"
+                        />
+                        <span className="text-slate-400">€</span>
+                      </div>
+
+                      <div className="font-mono text-cyan-300 font-semibold min-w-[50px] text-right">
+                        {(part.estimatedCost * part.quantity).toFixed(2)} €
+                      </div>
+
+                      <button
+                        type="button"
+                        onClick={() => handleRemovePart(index)}
+                        className="p-1 text-slate-500 hover:text-red-400 transition-colors"
+                      >
+                        <Trash2 className="w-4 h-4" />
+                      </button>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+
+          {/* Section 3: Temps Atelier, Valeur Marchande & Checklist */}
+          <div className="space-y-4 pt-4 border-t border-slate-800">
+            <h3 className="text-sm font-semibold uppercase tracking-wider text-purple-400 flex items-center gap-2">
+              <Clock className="w-4 h-4" /> 3. Temps d'Atelier, Prix & Checklist d'Étapes
+            </h3>
+
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+              <div>
+                <label className="block text-xs font-medium text-slate-300 mb-1">
+                  Temps d'Installation Estimé (Minutes)
+                </label>
+                <div className="relative">
+                  <Clock className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-slate-500" />
+                  <input
+                    type="number"
+                    min="5"
+                    step="5"
+                    value={estimatedMinutes}
+                    onChange={(e) => setEstimatedMinutes(parseInt(e.target.value) || 0)}
+                    className="w-full bg-slate-950 border border-slate-700 rounded-xl pl-9 pr-4 py-2.5 text-white font-mono text-sm focus:outline-none focus:border-purple-500"
+                  />
+                </div>
+              </div>
+
+              <div>
+                <label className="block text-xs font-medium text-slate-300 mb-1">
+                  Valeur Ajoutée Suggérée sur le Prix de Vente (€)
+                </label>
+                <div className="relative">
+                  <Euro className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-slate-500" />
+                  <input
+                    type="number"
+                    min="0"
+                    step="5"
+                    value={suggestedAddedValue}
+                    onChange={(e) => setSuggestedAddedValue(parseFloat(e.target.value) || 0)}
+                    className="w-full bg-slate-950 border border-slate-700 rounded-xl pl-9 pr-4 py-2.5 text-emerald-400 font-mono font-bold text-sm focus:outline-none focus:border-emerald-500"
+                  />
+                </div>
+              </div>
+            </div>
+
+            {/* Checklist Tasks Builder */}
+            <div>
+              <label className="block text-xs font-medium text-slate-300 mb-2">
+                Étapes de Travail / Checklist Recommandée pour ce Mod
+              </label>
+
+              <div className="flex gap-2 mb-2">
+                <input
+                  type="text"
+                  placeholder="Ex: Découpe interne de la coque, Soudure des fils OSD..."
+                  value={newTaskInput}
+                  onChange={(e) => setNewTaskInput(e.target.value)}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter') {
+                      e.preventDefault();
+                      handleAddTask();
+                    }
+                  }}
+                  className="flex-1 bg-slate-950 border border-slate-700 rounded-xl px-3 py-2 text-white text-xs focus:outline-none focus:border-purple-500"
+                />
+                <button
+                  type="button"
+                  onClick={handleAddTask}
+                  className="px-3 py-2 bg-purple-600 hover:bg-purple-500 text-white rounded-xl text-xs font-semibold flex items-center gap-1 transition-colors"
+                >
+                  <Plus className="w-3.5 h-3.5" /> Ajouter Étape
+                </button>
+              </div>
+
+              <div className="space-y-1.5 max-h-36 overflow-y-auto">
+                {checklistTasks.map((task, idx) => (
+                  <div
+                    key={idx}
+                    className="flex items-center justify-between p-2 bg-slate-950/60 border border-slate-800/80 rounded-lg text-xs"
+                  >
+                    <div className="flex items-center gap-2">
+                      <span className="w-5 h-5 rounded-full bg-purple-500/20 text-purple-300 flex items-center justify-center text-[10px] font-bold">
+                        {idx + 1}
+                      </span>
+                      <span className="text-slate-200">{task}</span>
+                    </div>
+                    <button
+                      type="button"
+                      onClick={() => handleRemoveTask(idx)}
+                      className="text-slate-500 hover:text-red-400 p-1"
+                    >
+                      <Trash2 className="w-3.5 h-3.5" />
+                    </button>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            {/* Tags & Badges */}
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 items-center">
+              <div>
+                <label className="block text-xs font-medium text-slate-300 mb-1">
+                  Tags & Mots-clés (séparés par des virgules)
+                </label>
+                <input
+                  type="text"
+                  placeholder="Écran, IPS, OSD, Rétroéclairage..."
+                  value={tagsInput}
+                  onChange={(e) => setTagsInput(e.target.value)}
+                  className="w-full bg-slate-950 border border-slate-700 rounded-xl px-3 py-2 text-white text-xs focus:outline-none focus:border-pink-500"
+                />
+              </div>
+
+              <div className="pt-4 flex items-center gap-2">
+                <label className="flex items-center gap-2 cursor-pointer">
+                  <input
+                    type="checkbox"
+                    checked={isPopular}
+                    onChange={(e) => setIsPopular(e.target.checked)}
+                    className="rounded bg-slate-950 border-slate-700 text-pink-500 focus:ring-pink-500 w-4 h-4"
+                  />
+                  <span className="text-xs text-slate-300 font-medium flex items-center gap-1">
+                    <Sparkles className="w-3.5 h-3.5 text-pink-400" /> Marquer comme "Mod Populaire / Best Seller"
+                  </span>
+                </label>
+              </div>
+            </div>
+          </div>
+
+          {/* Modal Footer */}
+          <div className="pt-4 border-t border-slate-800 flex items-center justify-between">
+            <button
+              type="button"
+              onClick={onClose}
+              className="px-4 py-2.5 bg-slate-800 hover:bg-slate-700 text-slate-300 rounded-xl text-xs font-semibold transition-colors"
+            >
+              Annuler
+            </button>
+
+            <button
+              type="submit"
+              className="px-6 py-2.5 bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-400 hover:to-purple-500 text-white rounded-xl text-xs font-bold shadow-lg shadow-pink-500/20 flex items-center gap-2 transition-all transform hover:-translate-y-0.5"
+            >
+              <CheckCircle2 className="w-4 h-4" />
+              {editingMod ? 'Enregistrer les Modifications' : 'Créer la Recette de Mod'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/mods/ModsLibraryView.tsx b/src/components/mods/ModsLibraryView.tsx
new file mode 100644
index 0000000..ee9098c
--- /dev/null
+++ b/src/components/mods/ModsLibraryView.tsx
@@ -0,0 +1,615 @@
+import React, { useState } from 'react';
+import {
+  Sparkles,
+  Plus,
+  Search,
+  Monitor,
+  BatteryCharging,
+  Volume2,
+  Palette,
+  Cpu,
+  Layers,
+  Wrench,
+  Clock,
+  Euro,
+  Copy,
+  Edit2,
+  Trash2,
+  Boxes,
+  ListTodo,
+  ChevronDown,
+  ChevronUp,
+  Play,
+} from 'lucide-react';
+import { useApp } from '../../context/AppContext';
+import { ModRecipeModal } from './ModRecipeModal';
+import { ApplyModModal } from './ApplyModModal';
+import type { ModRecipe, ModCategory } from '../../types';
+
+const CATEGORY_META: Record<ModCategory, { label: string; icon: React.ElementType; color: string; border: string; bg: string }> = {
+  screen: {
+    label: 'Écran & Affichage',
+    icon: Monitor,
+    color: 'text-cyan-400',
+    border: 'border-cyan-500/30',
+    bg: 'bg-cyan-500/10',
+  },
+  battery_power: {
+    label: 'Batterie & USB-C',
+    icon: BatteryCharging,
+    color: 'text-emerald-400',
+    border: 'border-emerald-500/30',
+    bg: 'bg-emerald-500/10',
+  },
+  audio_sound: {
+    label: 'Audio & Ampli',
+    icon: Volume2,
+    color: 'text-pink-400',
+    border: 'border-pink-500/30',
+    bg: 'bg-pink-500/10',
+  },
+  shell_aesthetics: {
+    label: 'Coque & Esthétique',
+    icon: Palette,
+    color: 'text-blue-400',
+    border: 'border-blue-500/30',
+    bg: 'bg-blue-500/10',
+  },
+  buttons_led: {
+    label: 'Boutons & LED',
+    icon: Sparkles,
+    color: 'text-purple-400',
+    border: 'border-purple-500/30',
+    bg: 'bg-purple-500/10',
+  },
+  motherboard_recap: {
+    label: 'Recap & Carte Mère',
+    icon: Cpu,
+    color: 'text-amber-400',
+    border: 'border-amber-500/30',
+    bg: 'bg-amber-500/10',
+  },
+  complete_kit: {
+    label: 'Pack Ultime All-in-One',
+    icon: Layers,
+    color: 'text-rose-400',
+    border: 'border-rose-500/30',
+    bg: 'bg-rose-500/10',
+  },
+  storage_expansion: {
+    label: 'Stockage & Mémoire',
+    icon: Boxes,
+    color: 'text-teal-400',
+    border: 'border-teal-500/30',
+    bg: 'bg-teal-500/10',
+  },
+  other: {
+    label: 'Autre Mod',
+    icon: Wrench,
+    color: 'text-slate-300',
+    border: 'border-slate-700',
+    bg: 'bg-slate-800',
+  },
+};
+
+const DIFFICULTY_META = {
+  easy: { label: 'Facile (Plug & Play)', color: 'text-emerald-400 bg-emerald-500/10 border-emerald-500/20' },
+  medium: { label: 'Intermédiaire', color: 'text-amber-400 bg-amber-500/10 border-amber-500/20' },
+  hard: { label: 'Avancé', color: 'text-orange-400 bg-orange-500/10 border-orange-500/20' },
+  expert: { label: 'Expert (Recap/CMS)', color: 'text-red-400 bg-red-500/10 border-red-500/20' },
+};
+
+export const ModsLibraryView: React.FC = () => {
+  const { modsLibrary, deleteModRecipe, addModRecipe, modCategories, consoleModels } = useApp();
+
+  // Search & Filter State
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedCategory, setSelectedCategory] = useState<string>('all');
+  const [selectedConsole, setSelectedConsole] = useState<string>('all');
+  const [selectedDifficulty, setSelectedDifficulty] = useState<string>('all');
+
+  // Modals state
+  const [showRecipeModal, setShowRecipeModal] = useState(false);
+  const [editingMod, setEditingMod] = useState<ModRecipe | null>(null);
+  const [modToApply, setModToApply] = useState<ModRecipe | null>(null);
+  const [expandedCards, setExpandedCards] = useState<Record<string, boolean>>({});
+
+  // Toggle card checklist expansion
+  const toggleCardExpand = (id: string) => {
+    setExpandedCards((prev) => ({ ...prev, [id]: !prev[id] }));
+  };
+
+  // Duplicate recipe
+  const handleDuplicate = (mod: ModRecipe) => {
+    const copyData = {
+      ...mod,
+      name: `${mod.name} (Copie)`,
+      isPopular: false,
+    };
+    addModRecipe(copyData);
+  };
+
+  // Stats
+  const totalMods = modsLibrary.length;
+  const popularModsCount = modsLibrary.filter((m) => m.isPopular).length;
+  const avgAddedValue = totalMods > 0
+    ? modsLibrary.reduce((s, m) => s + (m.suggestedAddedValue || 0), 0) / totalMods
+    : 0;
+  const avgMinutes = totalMods > 0
+    ? modsLibrary.reduce((s, m) => s + (m.estimatedMinutes || 0), 0) / totalMods
+    : 0;
+
+  // Filtered mods
+  const filteredMods = modsLibrary.filter((mod) => {
+    // Search query
+    if (searchQuery.trim()) {
+      const q = searchQuery.toLowerCase();
+      const matchName = mod.name.toLowerCase().includes(q);
+      const matchDesc = (mod.description || '').toLowerCase().includes(q);
+      const matchTags = (mod.tags || []).some((t) => t.toLowerCase().includes(q));
+      const matchParts = (mod.requiredParts || []).some((p) => p.partName.toLowerCase().includes(q));
+      if (!matchName && !matchDesc && !matchTags && !matchParts) return false;
+    }
+
+    // Category filter
+    if (selectedCategory !== 'all' && mod.category !== selectedCategory) {
+      return false;
+    }
+
+    // Console model filter
+    if (selectedConsole !== 'all') {
+      const isCompatible = (mod.compatibleModels || []).some(
+        (c) => c === selectedConsole || c === 'Autre / Custom'
+      );
+      if (!isCompatible) return false;
+    }
+
+    // Difficulty filter
+    if (selectedDifficulty !== 'all' && mod.difficulty !== selectedDifficulty) {
+      return false;
+    }
+
+    return true;
+  });
+
+  return (
+    <div className="space-y-6 pb-16">
+      
+      {/* Top Banner & Header */}
+      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 p-6 bg-gradient-to-r from-purple-900/30 via-slate-900 to-pink-900/20 border border-slate-800 rounded-3xl shadow-xl">
+        <div className="space-y-1">
+          <div className="flex items-center gap-2">
+            <span className="px-2.5 py-0.5 bg-pink-500/20 text-pink-400 border border-pink-500/30 rounded-full text-xs font-semibold uppercase tracking-wider flex items-center gap-1">
+              <Sparkles className="w-3 h-3" /> Catalogue & Recettes de Modding
+            </span>
+            <span className="text-xs text-slate-400 font-mono">
+              {totalMods} recettes prêtes à l'emploi
+            </span>
+          </div>
+          <h1 className="text-2xl sm:text-3xl font-black text-white tracking-tight">
+            Bibliothèque de Mods & Kits Prédéfinis
+          </h1>
+          <p className="text-xs sm:text-sm text-slate-300 max-w-2xl">
+            Créez vos recettes de modding réutilisables (écrans IPS, USB-C, CleanAmp, coques UV, recaps), associez les pièces requises et appliquez-les à vos projets en un clic.
+          </p>
+        </div>
+
+        <div className="flex items-center gap-3">
+          <button
+            onClick={() => {
+              setEditingMod(null);
+              setShowRecipeModal(true);
+            }}
+            className="px-5 py-3 bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-400 hover:to-purple-500 text-white rounded-2xl text-xs sm:text-sm font-bold shadow-lg shadow-pink-500/25 flex items-center gap-2 transition-all transform hover:-translate-y-0.5 shrink-0"
+          >
+            <Plus className="w-4 h-4" /> Nouvelle Recette de Mod
+          </button>
+        </div>
+      </div>
+
+      {/* KPI Cards */}
+      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+        <div className="p-4 bg-slate-900/80 border border-slate-800/80 rounded-2xl flex items-center gap-3">
+          <div className="p-3 bg-purple-500/10 text-purple-400 border border-purple-500/20 rounded-xl shrink-0">
+            <Layers className="w-5 h-5" />
+          </div>
+          <div>
+            <div className="text-[11px] text-slate-400 uppercase tracking-wider font-semibold">Total Recettes</div>
+            <div className="text-xl font-bold text-white font-mono">{totalMods}</div>
+          </div>
+        </div>
+
+        <div className="p-4 bg-slate-900/80 border border-slate-800/80 rounded-2xl flex items-center gap-3">
+          <div className="p-3 bg-pink-500/10 text-pink-400 border border-pink-500/20 rounded-xl shrink-0">
+            <Sparkles className="w-5 h-5" />
+          </div>
+          <div>
+            <div className="text-[11px] text-slate-400 uppercase tracking-wider font-semibold">Best Sellers</div>
+            <div className="text-xl font-bold text-pink-400 font-mono">{popularModsCount}</div>
+          </div>
+        </div>
+
+        <div className="p-4 bg-slate-900/80 border border-slate-800/80 rounded-2xl flex items-center gap-3">
+          <div className="p-3 bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 rounded-xl shrink-0">
+            <Euro className="w-5 h-5" />
+          </div>
+          <div>
+            <div className="text-[11px] text-slate-400 uppercase tracking-wider font-semibold">Valeur Ajoutée Moy.</div>
+            <div className="text-xl font-bold text-emerald-400 font-mono">+{avgAddedValue.toFixed(0)} €</div>
+          </div>
+        </div>
+
+        <div className="p-4 bg-slate-900/80 border border-slate-800/80 rounded-2xl flex items-center gap-3">
+          <div className="p-3 bg-cyan-500/10 text-cyan-400 border border-cyan-500/20 rounded-xl shrink-0">
+            <Clock className="w-5 h-5" />
+          </div>
+          <div>
+            <div className="text-[11px] text-slate-400 uppercase tracking-wider font-semibold">Temps Atelier Moyen</div>
+            <div className="text-xl font-bold text-cyan-400 font-mono">{avgMinutes.toFixed(0)} min</div>
+          </div>
+        </div>
+      </div>
+
+      {/* Filter & Search Toolbar */}
+      <div className="p-4 bg-slate-900/90 border border-slate-800 rounded-2xl space-y-3">
+        <div className="flex flex-col md:flex-row gap-3 items-stretch md:items-center">
+          
+          {/* Search Input */}
+          <div className="relative flex-1">
+            <Search className="w-4 h-4 absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-400" />
+            <input
+              type="text"
+              placeholder="Rechercher un mod par nom, pièce requise, tag (ex: IPS, CleanAmp, USB-C, Recap)..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="w-full bg-slate-950 border border-slate-800 focus:border-pink-500 rounded-xl pl-10 pr-4 py-2 text-xs sm:text-sm text-white placeholder-slate-500 focus:outline-none"
+            />
+            {searchQuery && (
+              <button
+                onClick={() => setSearchQuery('')}
+                className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-white text-xs"
+              >
+                ✕
+              </button>
+            )}
+          </div>
+
+          {/* Console filter dropdown */}
+          <div className="shrink-0">
+            <select
+              value={selectedConsole}
+              onChange={(e) => setSelectedConsole(e.target.value)}
+              className="w-full md:w-auto bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-xs text-slate-200 focus:outline-none focus:border-pink-500"
+            >
+              <option value="all">🎮 Toutes les Consoles</option>
+              {consoleModels.map((cm) => (
+                <option key={cm.id} value={cm.slug}>
+                  {cm.name}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          {/* Category filter dropdown */}
+          <div className="shrink-0">
+            <select
+              value={selectedCategory}
+              onChange={(e) => setSelectedCategory(e.target.value)}
+              className="w-full md:w-auto bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-xs text-slate-200 focus:outline-none focus:border-pink-500"
+            >
+              <option value="all">📁 Toutes Catégories</option>
+              {modCategories.map((mc) => (
+                <option key={mc.id} value={mc.slug}>
+                  {mc.name}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          {/* Difficulty filter dropdown */}
+          <div className="shrink-0">
+            <select
+              value={selectedDifficulty}
+              onChange={(e) => setSelectedDifficulty(e.target.value)}
+              className="w-full md:w-auto bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-xs text-slate-200 focus:outline-none focus:border-pink-500"
+            >
+              <option value="all">⚡ Toute Difficulté</option>
+              <option value="easy">🟢 Facile</option>
+              <option value="medium">🟡 Intermédiaire</option>
+              <option value="hard">🟠 Avancé</option>
+              <option value="expert">🔴 Expert</option>
+            </select>
+          </div>
+        </div>
+
+        {/* Quick Category Chips */}
+        <div className="flex flex-wrap gap-1.5 pt-1 overflow-x-auto pb-1">
+          <button
+            onClick={() => setSelectedCategory('all')}
+            className={`px-3 py-1 rounded-lg text-xs font-medium transition-all ${
+              selectedCategory === 'all'
+                ? 'bg-pink-500 text-white shadow-sm shadow-pink-500/30'
+                : 'bg-slate-950 text-slate-400 hover:text-white border border-slate-800'
+            }`}
+          >
+            Tous ({modsLibrary.length})
+          </button>
+          {Object.entries(CATEGORY_META).map(([catKey, meta]) => {
+            const count = modsLibrary.filter((m) => m.category === catKey).length;
+            if (count === 0 && selectedCategory !== catKey) return null;
+            const Icon = meta.icon;
+            const isActive = selectedCategory === catKey;
+
+            return (
+              <button
+                key={catKey}
+                onClick={() => setSelectedCategory(catKey)}
+                className={`px-2.5 py-1 rounded-lg text-xs font-medium flex items-center gap-1.5 transition-all border ${
+                  isActive
+                    ? 'bg-slate-800 text-white border-pink-500 shadow-sm'
+                    : 'bg-slate-950 text-slate-400 hover:text-slate-200 border-slate-800'
+                }`}
+              >
+                <Icon className={`w-3.5 h-3.5 ${meta.color}`} />
+                <span>{meta.label}</span>
+                <span className="text-[10px] font-mono opacity-70">({count})</span>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* Grid of Mod Recipe Cards */}
+      {filteredMods.length === 0 ? (
+        <div className="p-12 text-center bg-slate-900/60 border border-slate-800 rounded-3xl space-y-4">
+          <div className="p-4 bg-slate-800/80 text-slate-400 rounded-2xl w-fit mx-auto">
+            <Search className="w-8 h-8" />
+          </div>
+          <div className="space-y-1">
+            <h3 className="text-base font-bold text-white">Aucune recette trouvée</h3>
+            <p className="text-xs text-slate-400 max-w-md mx-auto">
+              Aucun mod ne correspond à vos filtres actuels. Réinitialisez la recherche ou créez un nouveau mod personnalisé.
+            </p>
+          </div>
+          <button
+            onClick={() => {
+              setSearchQuery('');
+              setSelectedCategory('all');
+              setSelectedConsole('all');
+              setSelectedDifficulty('all');
+            }}
+            className="px-4 py-2 bg-slate-800 hover:bg-slate-700 text-slate-200 rounded-xl text-xs font-semibold transition-colors"
+          >
+            Réinitialiser les filtres
+          </button>
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-5">
+          {filteredMods.map((mod) => {
+            const catMeta = CATEGORY_META[mod.category] || CATEGORY_META.other;
+            const CatIcon = catMeta.icon;
+            const diffMeta = DIFFICULTY_META[mod.difficulty] || DIFFICULTY_META.medium;
+            const totalPartsCost = (mod.requiredParts || []).reduce(
+              (acc, p) => acc + p.estimatedCost * p.quantity,
+              0
+            );
+            const isExpanded = expandedCards[mod.id] || false;
+
+            return (
+              <div
+                key={mod.id}
+                className="bg-slate-900 border border-slate-800 hover:border-slate-700/80 rounded-2xl p-5 flex flex-col justify-between space-y-4 shadow-lg hover:shadow-xl transition-all group relative overflow-hidden"
+              >
+                {/* Glow accent */}
+                <div
+                  className="absolute top-0 right-0 w-32 h-32 bg-gradient-to-bl from-pink-500/5 to-transparent rounded-bl-full pointer-events-none"
+                />
+
+                {/* Card Top: Badges & Actions */}
+                <div className="space-y-3">
+                  <div className="flex items-center justify-between gap-2">
+                    <div className="flex items-center gap-1.5 flex-wrap">
+                      <span className={`px-2.5 py-1 rounded-lg text-[11px] font-semibold flex items-center gap-1 border ${catMeta.bg} ${catMeta.color} ${catMeta.border}`}>
+                        <CatIcon className="w-3.5 h-3.5" />
+                        {catMeta.label}
+                      </span>
+
+                      <span className={`px-2 py-0.5 rounded-md text-[10px] font-medium border ${diffMeta.color}`}>
+                        {diffMeta.label}
+                      </span>
+                    </div>
+
+                    {mod.isPopular && (
+                      <span className="px-2 py-0.5 bg-gradient-to-r from-amber-500/20 to-pink-500/20 text-amber-300 border border-amber-500/30 rounded-full text-[10px] font-bold flex items-center gap-1 shrink-0">
+                        ⭐ Best Seller
+                      </span>
+                    )}
+                  </div>
+
+                  {/* Title & Description */}
+                  <div>
+                    <h3 className="text-base font-bold text-white group-hover:text-pink-300 transition-colors">
+                      {mod.name}
+                    </h3>
+                    {mod.description && (
+                      <p className="text-xs text-slate-400 mt-1 line-clamp-2">
+                        {mod.description}
+                      </p>
+                    )}
+                  </div>
+
+                  {/* Compatible Consoles Chips */}
+                  <div className="flex flex-wrap gap-1 pt-1">
+                    {(mod.compatibleModels || []).map((cons) => (
+                      <span
+                        key={cons}
+                        className="px-2 py-0.5 bg-slate-950 border border-slate-800 rounded text-[10px] text-slate-300 font-medium"
+                      >
+                        🎮 {cons}
+                      </span>
+                    ))}
+                  </div>
+
+                  {/* Key Metrics: Time & Value */}
+                  <div className="grid grid-cols-2 gap-2 p-2.5 bg-slate-950/80 border border-slate-800/80 rounded-xl text-xs">
+                    <div className="flex items-center gap-2">
+                      <div className="p-1.5 bg-purple-500/10 text-purple-400 rounded-lg">
+                        <Clock className="w-3.5 h-3.5" />
+                      </div>
+                      <div>
+                        <div className="text-[10px] text-slate-400">Atelier</div>
+                        <div className="font-bold text-white font-mono">~{mod.estimatedMinutes} min</div>
+                      </div>
+                    </div>
+
+                    <div className="flex items-center gap-2">
+                      <div className="p-1.5 bg-emerald-500/10 text-emerald-400 rounded-lg">
+                        <Euro className="w-3.5 h-3.5" />
+                      </div>
+                      <div>
+                        <div className="text-[10px] text-slate-400">Valeur Vente</div>
+                        <div className="font-bold text-emerald-400 font-mono">+{mod.suggestedAddedValue} €</div>
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* Required Parts Preview */}
+                  <div className="space-y-1.5">
+                    <div className="flex items-center justify-between text-[11px] text-slate-400 font-medium">
+                      <span className="flex items-center gap-1">
+                        <Boxes className="w-3.5 h-3.5 text-cyan-400" />
+                        {mod.requiredParts?.length || 0} composant(s) requis :
+                      </span>
+                      <span className="font-mono text-cyan-300">
+                        Total ~{totalPartsCost.toFixed(2)} €
+                      </span>
+                    </div>
+
+                    <div className="p-2 bg-slate-950/50 border border-slate-800/60 rounded-lg text-[11px] space-y-1">
+                      {mod.requiredParts && mod.requiredParts.length > 0 ? (
+                        mod.requiredParts.map((rp, i) => (
+                          <div key={i} className="flex items-center justify-between text-slate-300">
+                            <span className="truncate pr-2">• {rp.quantity}x {rp.partName}</span>
+                            <span className="font-mono text-slate-400 shrink-0">{(rp.estimatedCost * rp.quantity).toFixed(2)} €</span>
+                          </div>
+                        ))
+                      ) : (
+                        <span className="text-slate-500 italic">Aucune pièce matérielle liée</span>
+                      )}
+                    </div>
+                  </div>
+
+                  {/* Expandable Checklist Steps */}
+                  {mod.checklistTasks && mod.checklistTasks.length > 0 && (
+                    <div>
+                      <button
+                        type="button"
+                        onClick={() => toggleCardExpand(mod.id)}
+                        className="w-full flex items-center justify-between py-1 text-[11px] text-slate-400 hover:text-slate-200 transition-colors"
+                      >
+                        <span className="flex items-center gap-1">
+                          <ListTodo className="w-3.5 h-3.5 text-amber-400" />
+                          {mod.checklistTasks.length} étapes d'atelier recommandées
+                        </span>
+                        {isExpanded ? (
+                          <ChevronUp className="w-3.5 h-3.5" />
+                        ) : (
+                          <ChevronDown className="w-3.5 h-3.5" />
+                        )}
+                      </button>
+
+                      {isExpanded && (
+                        <div className="mt-1 p-2 bg-slate-950/60 border border-slate-800/60 rounded-lg text-[11px] space-y-1 animate-in fade-in duration-150">
+                          {mod.checklistTasks.map((task, idx) => (
+                            <div key={idx} className="flex items-start gap-1.5 text-slate-300">
+                              <span className="text-purple-400 font-bold">{idx + 1}.</span>
+                              <span>{task}</span>
+                            </div>
+                          ))}
+                        </div>
+                      )}
+                    </div>
+                  )}
+
+                  {/* Tags */}
+                  {mod.tags && mod.tags.length > 0 && (
+                    <div className="flex flex-wrap gap-1">
+                      {mod.tags.map((tag) => (
+                        <span key={tag} className="text-[10px] text-slate-500 flex items-center gap-0.5">
+                          #{tag}
+                        </span>
+                      ))}
+                    </div>
+                  )}
+                </div>
+
+                {/* Card Footer Actions */}
+                <div className="pt-3 border-t border-slate-800 flex items-center justify-between gap-2">
+                  <div className="flex items-center gap-1">
+                    <button
+                      type="button"
+                      title="Modifier cette recette"
+                      onClick={() => {
+                        setEditingMod(mod);
+                        setShowRecipeModal(true);
+                      }}
+                      className="p-2 text-slate-400 hover:text-white hover:bg-slate-800 rounded-lg transition-colors"
+                    >
+                      <Edit2 className="w-4 h-4" />
+                    </button>
+
+                    <button
+                      type="button"
+                      title="Dupliquer cette recette"
+                      onClick={() => handleDuplicate(mod)}
+                      className="p-2 text-slate-400 hover:text-white hover:bg-slate-800 rounded-lg transition-colors"
+                    >
+                      <Copy className="w-4 h-4" />
+                    </button>
+
+                    <button
+                      type="button"
+                      title="Supprimer cette recette"
+                      onClick={() => {
+                        if (window.confirm(`Supprimer définitivement la recette "${mod.name}" ?`)) {
+                          deleteModRecipe(mod.id);
+                        }
+                      }}
+                      className="p-2 text-slate-400 hover:text-red-400 hover:bg-slate-800 rounded-lg transition-colors"
+                    >
+                      <Trash2 className="w-4 h-4" />
+                    </button>
+                  </div>
+
+                  <button
+                    type="button"
+                    onClick={() => setModToApply(mod)}
+                    className="px-3.5 py-2 bg-gradient-to-r from-cyan-500 to-blue-600 hover:from-cyan-400 hover:to-blue-500 text-white rounded-xl text-xs font-bold shadow-md shadow-cyan-500/20 flex items-center gap-1.5 transition-all transform hover:scale-105"
+                  >
+                    <Play className="w-3.5 h-3.5 fill-current" /> Appliquer au Projet
+                  </button>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      {/* Modals */}
+      <ModRecipeModal
+        isOpen={showRecipeModal}
+        onClose={() => {
+          setShowRecipeModal(false);
+          setEditingMod(null);
+        }}
+        editingMod={editingMod}
+      />
+
+      <ApplyModModal
+        isOpen={!!modToApply}
+        onClose={() => setModToApply(null)}
+        modToApply={modToApply}
+      />
+    </div>
+  );
+};
diff --git a/src/components/projects/MarkAsSoldModal.tsx b/src/components/projects/MarkAsSoldModal.tsx
new file mode 100644
index 0000000..9b54c75
--- /dev/null
+++ b/src/components/projects/MarkAsSoldModal.tsx
@@ -0,0 +1,180 @@
+import React, { useState, useEffect } from 'react';
+import { X, Sparkles, DollarSign, Store, User, Calendar } from 'lucide-react';
+import { useApp } from '../../context/AppContext';
+import type { Project, SalesChannel } from '../../types';
+import { formatCurrency } from '../../utils/calculations';
+
+
+interface MarkAsSoldModalProps {
+  project: Project | null;
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+const SALES_CHANNELS: { id: SalesChannel; label: string }[] = [
+  { id: 'vinted', label: 'Vinted' },
+  { id: 'leboncoin', label: 'Leboncoin' },
+  { id: 'etsy', label: 'Etsy' },
+  { id: 'ebay', label: 'eBay' },
+  { id: 'direct_shop', label: 'Vente Directe / Boutique' },
+  { id: 'convention', label: 'Convention / Événement' },
+  { id: 'autre', label: 'Autre canal' },
+];
+
+export const MarkAsSoldModal: React.FC<MarkAsSoldModalProps> = ({
+  project,
+  isOpen,
+  onClose,
+}) => {
+  const { markProjectAsSold, settings } = useApp();
+
+  const [soldPrice, setSoldPrice] = useState<number>(180);
+  const [salesChannel, setSalesChannel] = useState<SalesChannel>('vinted');
+  const [soldDate, setSoldDate] = useState<string>(
+    new Date().toISOString().split('T')[0]
+  );
+  const [customerName, setCustomerName] = useState<string>('');
+
+  useEffect(() => {
+    if (project) {
+      setSoldPrice(project.salePriceActual || project.salePriceTarget || 150);
+      setSalesChannel(project.salesChannel || 'vinted');
+      setSoldDate(project.soldDate || new Date().toISOString().split('T')[0]);
+      setCustomerName(project.customerName || '');
+    }
+  }, [project, isOpen]);
+
+  if (!isOpen || !project) return null;
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    markProjectAsSold(
+      project.id,
+      Number(soldPrice) || 0,
+      salesChannel,
+      soldDate,
+      customerName.trim()
+    );
+    onClose();
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/80 backdrop-blur-md no-print">
+      <div className="relative w-full max-w-md bg-slate-900 border border-pink-500/40 rounded-3xl shadow-2xl overflow-hidden animate-scaleUp">
+        
+        {/* Header */}
+        <div className="flex items-center justify-between px-6 py-5 border-b border-slate-800 bg-gradient-to-r from-pink-950/40 to-purple-950/40">
+          <div className="flex items-center space-x-3">
+            <div className="w-10 h-10 rounded-xl bg-pink-500/20 border border-pink-500/40 flex items-center justify-center text-pink-400">
+              <Sparkles className="w-5 h-5" />
+            </div>
+            <div>
+              <h3 className="text-base font-bold text-white">
+                Enregistrer la Vente 🎉
+              </h3>
+              <p className="text-xs text-slate-400 truncate max-w-[240px]">
+                {project.title}
+              </p>
+            </div>
+          </div>
+          <button
+            onClick={onClose}
+            className="text-slate-400 hover:text-white p-2 rounded-xl hover:bg-slate-800 transition-colors"
+          >
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+
+        {/* Form */}
+        <form onSubmit={handleSubmit} className="p-6 space-y-4">
+          
+          {/* Price */}
+          <div className="space-y-1.5">
+            <label className="text-xs font-semibold text-slate-300 flex items-center space-x-1">
+              <DollarSign className="w-3.5 h-3.5 text-pink-400" />
+              <span>Prix de vente final ({settings.currency}) *</span>
+            </label>
+            <input
+              type="number"
+              step="0.01"
+              required
+              value={soldPrice}
+              onChange={(e) => setSoldPrice(parseFloat(e.target.value) || 0)}
+              className="w-full px-3.5 py-2.5 rounded-xl bg-slate-950 border border-slate-700 text-white font-mono font-bold text-lg focus:outline-none focus:border-pink-500"
+            />
+            <div className="text-[11px] text-slate-400">
+              Prix affiché initialement : {formatCurrency(project.salePriceTarget, settings.currency)}
+            </div>
+          </div>
+
+          {/* Sales Channel */}
+          <div className="space-y-1.5">
+            <label className="text-xs font-semibold text-slate-300 flex items-center space-x-1">
+              <Store className="w-3.5 h-3.5 text-pink-400" />
+              <span>Canal / Plateforme de Vente *</span>
+            </label>
+            <select
+              value={salesChannel}
+              onChange={(e) => setSalesChannel(e.target.value as SalesChannel)}
+              className="w-full px-3.5 py-2.5 rounded-xl bg-slate-950 border border-slate-700 text-white text-sm focus:outline-none focus:border-pink-500"
+            >
+              {SALES_CHANNELS.map((ch) => (
+                <option key={ch.id} value={ch.id}>
+                  {ch.label}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          {/* Customer Name */}
+          <div className="space-y-1.5">
+            <label className="text-xs font-semibold text-slate-300 flex items-center space-x-1">
+              <User className="w-3.5 h-3.5 text-pink-400" />
+              <span>Nom du Client / Pseudo</span>
+            </label>
+            <input
+              type="text"
+              value={customerName}
+              onChange={(e) => setCustomerName(e.target.value)}
+              placeholder="Ex: Antoine M. (@retro_gamer)"
+              className="w-full px-3.5 py-2.5 rounded-xl bg-slate-950 border border-slate-700 text-white text-sm placeholder-slate-500 focus:outline-none focus:border-pink-500"
+            />
+          </div>
+
+          {/* Sold Date */}
+          <div className="space-y-1.5">
+            <label className="text-xs font-semibold text-slate-300 flex items-center space-x-1">
+              <Calendar className="w-3.5 h-3.5 text-pink-400" />
+              <span>Date de la vente</span>
+            </label>
+            <input
+              type="date"
+              value={soldDate}
+              onChange={(e) => setSoldDate(e.target.value)}
+              className="w-full px-3.5 py-2.5 rounded-xl bg-slate-950 border border-slate-700 text-white text-sm focus:outline-none focus:border-pink-500"
+            />
+          </div>
+
+          {/* Submit */}
+          <div className="flex items-center justify-end space-x-3 pt-4 border-t border-slate-800">
+            <button
+              type="button"
+              onClick={onClose}
+              className="px-4 py-2 rounded-xl bg-slate-800 text-slate-300 hover:text-white text-xs font-semibold"
+            >
+              Annuler
+            </button>
+            <button
+              type="submit"
+              className="px-5 py-2.5 rounded-xl bg-gradient-to-r from-pink-500 to-purple-600 text-white font-bold text-sm shadow-lg shadow-pink-500/30 hover:scale-[1.02] active:scale-[0.98] transition-all"
+            >
+              Valider la Vente 🎉
+            </button>
+          </div>
+
+        </form>
+
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/projects/ProjectDetailView.tsx b/src/components/projects/ProjectDetailView.tsx
new file mode 100644
index 0000000..0be4b96
--- /dev/null
+++ b/src/components/projects/ProjectDetailView.tsx
@@ -0,0 +1,1952 @@
+import React, { useState } from 'react';
+import {
+  ArrowLeft,
+  DollarSign,
+  Clock,
+  Package,
+  Plus,
+  Trash2,
+  Edit2,
+  Printer,
+  Sparkles,
+  Boxes,
+  Copy,
+  Play,
+  Pause,
+  RotateCcw,
+  Save,
+  PieChart as PieIcon,
+  FileText,
+  Sliders,
+  Award,
+  Check,
+  X,
+  Wrench,
+  QrCode,
+  Truck,
+  CheckCircle2,
+  AlertCircle,
+  ExternalLink,
+  Link,
+  Pencil,
+  Edit3,
+} from 'lucide-react';
+import { useApp } from '../../context/AppContext';
+import {
+  calculateProjectFinancials,
+  formatCurrency,
+  formatMinutes,
+  getProjectStatusInfo,
+  getPartCategoryLabel,
+  getCategoryBadgeColor,
+  getTaskTypeLabel,
+  getProjectPartStatusInfo,
+} from '../../utils/calculations';
+import type { TaskType, PartCategory, ProjectStatus } from '../../types';
+
+import { MarkAsSoldModal } from './MarkAsSoldModal';
+import { ProjectModal } from './ProjectModal';
+import { ProjectObjectivesCard } from './ProjectObjectivesCard';
+import { ProjectTasksChecklist } from './ProjectTasksChecklist';
+import { QrLabelModal } from '../labels/QrLabelModal';
+import { ApplyModModal } from '../mods/ApplyModModal';
+import type { ModRecipe } from '../../types';
+
+interface ProjectDetailViewProps {
+  projectId: string;
+  onBack: () => void;
+}
+
+type ProjectDetailTab = 'workshop' | 'parts' | 'specs' | 'finances' | 'certificate';
+
+const TASK_TYPES: { id: TaskType; label: string }[] = [
+  { id: 'diagnostic_demontage', label: 'Diagnostic & Démontage' },
+  { id: 'nettoyage_recap', label: 'Nettoyage & Changement Condos' },
+  { id: 'decoupe_coque', label: 'Découpe & Ajustement Coque' },
+  { id: 'soudure_mods', label: 'Soudure des Mods & USB-C' },
+  { id: 'assemblage', label: 'Assemblage & Calibrage' },
+  { id: 'test_qc', label: 'Tests & Contrôle Qualité (Boutons, Son, Écran)' },
+  { id: 'packaging_photo', label: 'Shooting Photo & Packaging' },
+  { id: 'autre', label: 'Autre travail' },
+];
+
+export const ProjectDetailView: React.FC<ProjectDetailViewProps> = ({
+  projectId,
+  onBack,
+}) => {
+  const {
+    projects,
+    inventory,
+    modsLibrary,
+    settings,
+    updateProject,
+    addPartToProject,
+    removePartFromProject,
+    updateProjectPartStatus,
+    updateProjectPart,
+    receivePlannedItem,
+    addTimeSession,
+    deleteTimeSession,
+    duplicateProject,
+    deleteProject,
+    saveProjectAsModRecipe,
+    activeTimer,
+    startTimer,
+    pauseTimer,
+    resumeTimer,
+    resetTimer,
+    saveTimerSession,
+    setTimerDescription,
+    setTimerTaskType,
+  } = useApp();
+
+  const project = projects.find((p) => p.id === projectId);
+
+  const [activeTab, setActiveTab] = useState<ProjectDetailTab>('workshop');
+  const [showEditModal, setShowEditModal] = useState(false);
+  const [showSoldModal, setShowSoldModal] = useState(false);
+  const [showAddPartModal, setShowAddPartModal] = useState(false);
+  const [showAddTimeModal, setShowAddTimeModal] = useState(false);
+  const [showQrLabelModal, setShowQrLabelModal] = useState(false);
+  const [modToApply, setModToApply] = useState<ModRecipe | null>(null);
+
+  // In-place mods editing
+  const [newModInput, setNewModInput] = useState('');
+  const [isEditingNotes, setIsEditingNotes] = useState(false);
+  const [notesContent, setNotesContent] = useState(project?.notes || '');
+
+  // In-place financial simulation
+  const [simulatedPrice, setSimulatedPrice] = useState<number>(
+    project?.salePriceTarget || 180
+  );
+
+  // Form State for Adding Part
+  const [addPartMode, setAddPartMode] = useState<'in_stock' | 'to_order'>('in_stock');
+  const [selectedInventoryId, setSelectedInventoryId] = useState<string>('');
+  const [customPartName, setCustomPartName] = useState<string>('');
+  const [customPartCategory, setCustomPartCategory] = useState<PartCategory>('screen');
+  const [customUnitCost, setCustomUnitCost] = useState<number>(0);
+  const [partQuantity, setPartQuantity] = useState<number>(1);
+  const [deductStock, setDeductStock] = useState<boolean>(true);
+  const [customPurchaseUrl, setCustomPurchaseUrl] = useState<string>('');
+  const [customPartNotes, setCustomPartNotes] = useState<string>('');
+
+  // Inline price editing in BOM table
+  const [editingPartIndex, setEditingPartIndex] = useState<number | null>(null);
+  const [editingPartPrice, setEditingPartPrice] = useState<number>(0);
+  const [editingPartUrl, setEditingPartUrl] = useState<string>('');
+
+  // Form State for Manual Time Addition
+  const [manualTaskType, setManualTaskType] = useState<TaskType>('soudure_mods');
+  const [manualTaskDescription, setManualTaskDescription] = useState<string>('');
+  const [manualSessionDate, setManualSessionDate] = useState<string>(
+    new Date().toISOString().split('T')[0]
+  );
+  const [manualSessionDuration, setManualSessionDuration] = useState<number>(45);
+  const [manualSessionRate, setManualSessionRate] = useState<number>(
+    project?.hourlyRateDefault || settings.defaultHourlyRate || 25
+  );
+
+  if (!project) {
+    return (
+      <div className="p-8 text-center space-y-4">
+        <div className="text-slate-400">Projet introuvable ou supprimé.</div>
+        <button
+          onClick={onBack}
+          className="px-4 py-2 rounded-xl bg-slate-800 text-white text-xs font-semibold"
+        >
+          Retour aux projets
+        </button>
+      </div>
+    );
+  }
+
+  const fin = calculateProjectFinancials(project);
+  const simulatedFin = calculateProjectFinancials(project, simulatedPrice);
+  const statusInfo = getProjectStatusInfo(project.status);
+
+  // Check if live timer is active on this project
+  const isTimerActiveOnThis = activeTimer.projectId === project.id;
+  const timerElapsedSec = isTimerActiveOnThis ? activeTimer.elapsedSeconds : 0;
+  const timerLiveLaborCost = Number(
+    ((timerElapsedSec / 3600) * (project.hourlyRateDefault || 25)).toFixed(2)
+  );
+
+  // Available stock items matching this console or generic
+  const relevantInventory = inventory.filter(
+    (i) => (i.consoleModel === project.consoleModel || i.consoleModel === 'Autre / Custom') && i.status !== 'planned_order'
+  );
+
+  const handleAddPartSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (addPartMode === 'to_order') {
+      // Missing part to order: create planned entry in inventory and add to project as to_order
+      const name = customPartName.trim() || 'Composant à commander';
+      const cost = Number(customUnitCost) || 0;
+      const qty = Number(partQuantity) || 1;
+
+      addPartToProject(
+        project.id,
+        {
+          partId: '',
+          partName: name,
+          category: customPartCategory,
+          unitCost: cost,
+          quantity: qty,
+          totalCost: cost * qty,
+          status: 'to_order',
+          purchaseUrl: customPurchaseUrl.trim() || undefined,
+          notes: customPartNotes.trim() || undefined,
+        },
+        { createPlannedInInventory: true }
+      );
+    } else {
+      // In-stock part
+      if (selectedInventoryId) {
+        const invItem = inventory.find((i) => i.id === selectedInventoryId);
+        if (invItem) {
+          addPartToProject(
+            project.id,
+            {
+              partId: invItem.id,
+              partName: invItem.name,
+              category: invItem.category,
+              unitCost: invItem.unitCostWithFees,
+              quantity: Number(partQuantity) || 1,
+              totalCost: invItem.unitCostWithFees * (Number(partQuantity) || 1),
+              status: 'allocated',
+            },
+            { deductStock }
+          );
+        }
+      } else if (customPartName.trim()) {
+        addPartToProject(
+          project.id,
+          {
+            partId: '',
+            partName: customPartName.trim(),
+            category: customPartCategory,
+            unitCost: Number(customUnitCost) || 0,
+            quantity: Number(partQuantity) || 1,
+            totalCost: (Number(customUnitCost) || 0) * (Number(partQuantity) || 1),
+            status: 'allocated',
+            purchaseUrl: customPurchaseUrl.trim() || undefined,
+            notes: customPartNotes.trim() || undefined,
+          },
+          { deductStock: false }
+        );
+      }
+    }
+
+    setSelectedInventoryId('');
+    setCustomPartName('');
+    setCustomUnitCost(0);
+    setPartQuantity(1);
+    setCustomPurchaseUrl('');
+    setCustomPartNotes('');
+    setAddPartMode('in_stock');
+    setShowAddPartModal(false);
+  };
+
+  const handleAddTimeSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    const duration = Number(manualSessionDuration) || 0;
+    const rate = Number(manualSessionRate) || 25;
+    const cost = Number(((duration / 60) * rate).toFixed(2));
+
+    addTimeSession(project.id, {
+      taskType: manualTaskType,
+      description: manualTaskDescription.trim() || getTaskTypeLabel(manualTaskType),
+      date: manualSessionDate,
+      durationMinutes: duration,
+      hourlyRate: rate,
+      cost,
+    });
+
+    setManualTaskDescription('');
+    setManualSessionDuration(45);
+    setShowAddTimeModal(false);
+  };
+
+  const handleAddMod = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!newModInput.trim()) return;
+    const currentMods = project.modsList || [];
+    updateProject(project.id, {
+      modsList: [...currentMods, newModInput.trim()],
+    });
+    setNewModInput('');
+  };
+
+  const handleRemoveMod = (index: number) => {
+    const currentMods = [...(project.modsList || [])];
+    currentMods.splice(index, 1);
+    updateProject(project.id, { modsList: currentMods });
+  };
+
+  const handleSaveNotes = () => {
+    updateProject(project.id, { notes: notesContent });
+    setIsEditingNotes(false);
+  };
+
+  const handlePrintCertificate = () => {
+    window.print();
+  };
+
+  // Format timer digits
+  const formatTimerDigits = (totalSec: number) => {
+    const hours = Math.floor(totalSec / 3600);
+    const minutes = Math.floor((totalSec % 3600) / 60);
+    const seconds = totalSec % 60;
+    return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+  };
+
+  return (
+    <div className="space-y-6 pb-16 animate-fadeIn">
+      {/* 1. TOP HEADER & BREADCRUMBS */}
+      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 no-print">
+        <div className="flex items-center space-x-3.5">
+          <button
+            onClick={onBack}
+            className="p-2.5 rounded-2xl bg-slate-900 border border-slate-800 text-slate-400 hover:text-white hover:bg-slate-800 transition-colors shadow-sm"
+            title="Retour à la vue d'ensemble des projets"
+          >
+            <ArrowLeft className="w-5 h-5" />
+          </button>
+          <div>
+            <div className="flex items-center space-x-2.5">
+              <h2 className="text-xl sm:text-2xl font-black text-white font-display">
+                {project.title}
+              </h2>
+              <span
+                className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-bold border ${statusInfo.color}`}
+              >
+                <span className={`w-1.5 h-1.5 rounded-full ${statusInfo.dot} mr-1.5`} />
+                {statusInfo.label}
+              </span>
+            </div>
+            <div className="flex flex-wrap items-center gap-2 text-xs text-slate-400 mt-1">
+              <span className="font-mono text-cyan-400 font-bold px-2 py-0.5 rounded bg-slate-950 border border-slate-800">
+                {project.serialNumber}
+              </span>
+              <span>•</span>
+              <span className="font-semibold text-slate-300">{project.consoleModel}</span>
+              <span>•</span>
+              <span>Lancement le {project.startDate}</span>
+              {project.customerName && (
+                <>
+                  <span>•</span>
+                  <span className="text-purple-300 font-medium">Client : {project.customerName}</span>
+                </>
+              )}
+            </div>
+          </div>
+        </div>
+
+        {/* Global Project Actions */}
+        <div className="flex flex-wrap items-center gap-2">
+          {project.status === 'in_stock_ready' && (
+            <button
+              onClick={() => setShowSoldModal(true)}
+              className="flex items-center space-x-1.5 px-4 py-2 rounded-xl bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-400 hover:to-purple-500 text-white font-bold text-xs shadow-lg shadow-pink-500/20 transition-all"
+            >
+              <Sparkles className="w-4 h-4" />
+              <span>🎉 Enregistrer la Vente</span>
+            </button>
+          )}
+
+          <button
+            onClick={() => setShowQrLabelModal(true)}
+            className="flex items-center space-x-1.5 px-3 py-2 rounded-xl bg-purple-500/15 border border-purple-500/30 text-purple-300 hover:bg-purple-500/25 text-xs font-bold transition-all shadow-sm"
+            title="Générer des étiquettes autocollantes avec QR Code (Boîte kraft, sticker console)"
+          >
+            <QrCode className="w-3.5 h-3.5" />
+            <span>Étiquettes QR</span>
+          </button>
+
+          <button
+            onClick={() => setShowEditModal(true)}
+            className="flex items-center space-x-1 px-3 py-2 rounded-xl bg-slate-900 border border-slate-800 text-slate-300 hover:text-white text-xs font-semibold transition-all"
+          >
+            <Edit2 className="w-3.5 h-3.5" />
+            <span>Modifier</span>
+          </button>
+
+          <button
+            onClick={() => duplicateProject(project.id)}
+            className="flex items-center space-x-1 px-3 py-2 rounded-xl bg-slate-900 border border-slate-800 text-slate-300 hover:text-white text-xs font-semibold transition-all"
+            title="Dupliquer ce projet pour une configuration similaire"
+          >
+            <Copy className="w-3.5 h-3.5" />
+            <span>Dupliquer</span>
+          </button>
+
+          <button
+            onClick={() => {
+              if (window.confirm(`Confirmer la suppression définitive du projet "${project.title}" ?`)) {
+                deleteProject(project.id);
+                onBack();
+              }
+            }}
+            className="p-2 rounded-xl bg-slate-900 border border-slate-800 text-slate-500 hover:text-rose-400 hover:border-rose-500/30 transition-all"
+            title="Supprimer le projet"
+          >
+            <Trash2 className="w-4 h-4" />
+          </button>
+        </div>
+      </div>
+
+      {/* 2. WORKFLOW LIFECYCLE STEPPER BAR */}
+      <div className="p-4 rounded-2xl bg-slate-900/80 border border-slate-800 backdrop-blur-md space-y-2 no-print shadow-lg">
+        <div className="flex items-center justify-between text-xs">
+          <span className="font-bold text-slate-300 uppercase tracking-wider">
+            Étape d'Avancement du Projet :
+          </span>
+          <span className="text-slate-400">
+            Cliquez sur une étape pour faire progresser le statut
+          </span>
+        </div>
+
+        <div className="grid grid-cols-2 sm:grid-cols-5 gap-2 pt-1">
+          {[
+            { id: 'draft', label: '1. 📝 Brouillon / Idée', color: 'slate' },
+            { id: 'in_progress', label: '2. ⚡ En cours d\'Atelier', color: 'blue' },
+            { id: 'qc_testing', label: '3. 🔍 Tests & Contrôle QC', color: 'amber' },
+            { id: 'in_stock_ready', label: '4. ✨ En Stock / Prête', color: 'emerald' },
+            { id: 'sold', label: '5. 🎉 Console Vendue', color: 'pink' },
+          ].map((st) => {
+            const isCurrent = project.status === st.id;
+            return (
+              <button
+                key={st.id}
+                type="button"
+                onClick={() => {
+                  if (st.id === 'sold') {
+                    setShowSoldModal(true);
+                  } else {
+                    updateProject(project.id, {
+                      status: st.id as ProjectStatus,
+                      completedDate:
+                        st.id === 'in_stock_ready' || st.id === 'sold'
+                          ? project.completedDate || new Date().toISOString().split('T')[0]
+                          : project.completedDate,
+                    });
+                  }
+                }}
+                className={`py-2.5 px-2.5 rounded-xl text-xs font-bold transition-all border text-center ${
+                  isCurrent
+                    ? 'bg-gradient-to-r from-pink-500/20 via-purple-500/20 to-cyan-500/20 border-pink-500 text-white shadow-md shadow-pink-500/10 scale-[1.02]'
+                    : 'bg-slate-950/60 border-slate-800 text-slate-400 hover:border-slate-700 hover:text-slate-200'
+                }`}
+              >
+                {st.label}
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* 3. LIVE INTEGRATED WORKBENCH STOPWATCH (Dedicated to this project) */}
+      <div className="p-4 sm:p-5 rounded-3xl bg-gradient-to-r from-slate-950 via-slate-900 to-slate-950 border border-amber-500/40 shadow-xl shadow-amber-500/5 space-y-3 no-print">
+        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+          <div className="flex items-center space-x-3">
+            <div className="p-2.5 rounded-2xl bg-amber-500/15 border border-amber-500/30 text-amber-400">
+              <Clock className="w-6 h-6" />
+            </div>
+            <div>
+              <div className="flex items-center space-x-2">
+                <h3 className="font-bold text-base text-white">
+                  Chronomètre d'Établi Dédié
+                </h3>
+                {isTimerActiveOnThis && activeTimer.isRunning && (
+                  <span className="flex items-center space-x-1 px-2 py-0.5 rounded-full text-[10px] font-extrabold bg-emerald-500/20 text-emerald-300 border border-emerald-500/40 animate-pulse">
+                    <span className="w-1.5 h-1.5 rounded-full bg-emerald-400" />
+                    <span>EN DIRECT</span>
+                  </span>
+                )}
+              </div>
+              <p className="text-xs text-slate-400">
+                Chronométrez directement vos sessions de soudure, nettoyage et modding sur cette console
+              </p>
+            </div>
+          </div>
+
+          {/* Stopwatch Controls & Real-time Digits */}
+          <div className="flex items-center space-x-3">
+            <div className="bg-slate-950 px-4 py-2 rounded-2xl border border-amber-500/40 text-center font-mono">
+              <div className="text-xl sm:text-2xl font-black text-amber-300 tracking-tight">
+                {formatTimerDigits(timerElapsedSec)}
+              </div>
+              <div className="text-[10px] text-slate-400">
+                Coût en direct :{' '}
+                <strong className="text-white">
+                  {formatCurrency(timerLiveLaborCost, settings.currency)}
+                </strong>
+              </div>
+            </div>
+
+            <div className="flex items-center space-x-1.5">
+              {!isTimerActiveOnThis || !activeTimer.isRunning ? (
+                <button
+                  type="button"
+                  onClick={() => {
+                    if (!isTimerActiveOnThis) {
+                      startTimer(project.id, 'soudure_mods', `Atelier sur ${project.title}`);
+                    } else {
+                      resumeTimer();
+                    }
+                  }}
+                  className="flex items-center space-x-1.5 px-4 py-2.5 rounded-xl text-xs font-bold bg-amber-500 hover:bg-amber-400 text-slate-950 shadow-lg shadow-amber-500/20 transition-all"
+                >
+                  <Play className="w-4 h-4 fill-slate-950" />
+                  <span>Démarrer</span>
+                </button>
+              ) : (
+                <button
+                  type="button"
+                  onClick={pauseTimer}
+                  className="flex items-center space-x-1.5 px-4 py-2.5 rounded-xl text-xs font-bold bg-slate-800 hover:bg-slate-700 text-amber-300 border border-amber-500/40 transition-all"
+                >
+                  <Pause className="w-4 h-4" />
+                  <span>Pause</span>
+                </button>
+              )}
+
+              {isTimerActiveOnThis && timerElapsedSec > 0 && (
+                <>
+                  <button
+                    type="button"
+                    onClick={saveTimerSession}
+                    className="flex items-center space-x-1 px-3 py-2.5 rounded-xl text-xs font-bold bg-emerald-600 hover:bg-emerald-500 text-white transition-all shadow-md"
+                    title="Enregistrer la session dans le projet"
+                  >
+                    <Save className="w-4 h-4" />
+                    <span className="hidden sm:inline">Enregistrer</span>
+                  </button>
+
+                  <button
+                    type="button"
+                    onClick={resetTimer}
+                    className="p-2.5 rounded-xl bg-slate-900 border border-slate-800 text-slate-400 hover:text-white"
+                    title="Réinitialiser"
+                  >
+                    <RotateCcw className="w-4 h-4" />
+                  </button>
+                </>
+              )}
+            </div>
+          </div>
+        </div>
+
+        {/* Task Type selector for active timer */}
+        {isTimerActiveOnThis && (
+          <div className="pt-2 border-t border-slate-850 flex flex-wrap items-center gap-2 text-xs">
+            <span className="text-slate-400 font-medium">Tâche en cours :</span>
+            <select
+              value={activeTimer.taskType}
+              onChange={(e) => setTimerTaskType(e.target.value as TaskType)}
+              className="bg-slate-950 border border-amber-500/40 rounded-xl px-3 py-1.5 text-xs text-amber-300 font-semibold focus:outline-none"
+            >
+              {TASK_TYPES.map((t) => (
+                <option key={t.id} value={t.id}>
+                  {t.label}
+                </option>
+              ))}
+            </select>
+            <input
+              type="text"
+              value={activeTimer.description}
+              onChange={(e) => setTimerDescription(e.target.value)}
+              placeholder="Note sur cette session (ex: Soudure OSD, test son...)"
+              className="flex-1 bg-slate-950 border border-slate-800 rounded-xl px-3 py-1.5 text-xs text-white placeholder-slate-500 focus:outline-none focus:border-amber-500"
+            />
+          </div>
+        )}
+      </div>
+
+      {/* 4. FINANCIAL SUMMARY CARDS (Persistent KPI Strip) */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 no-print">
+        {/* Prix Vente / CA */}
+        <div className="p-4 rounded-2xl bg-slate-900/70 border border-slate-800">
+          <div className="flex items-center justify-between">
+            <span className="text-xs font-bold uppercase tracking-wider text-slate-400">
+              {project.status === 'sold' ? 'Prix Vendu Réel' : 'Prix Vente Ciblé'}
+            </span>
+            <DollarSign className="w-4 h-4 text-pink-400" />
+          </div>
+          <div className="text-2xl font-black text-white font-mono mt-2">
+            {formatCurrency(fin.revenue, settings.currency)}
+          </div>
+          <div className="text-[11px] text-slate-400 mt-1">
+            {project.salesChannel ? `Canal : ${project.salesChannel}` : 'En vente directe'}
+          </div>
+        </div>
+
+        {/* Coût Pièces Direct */}
+        <div className="p-4 rounded-2xl bg-slate-900/70 border border-slate-800">
+          <div className="flex items-center justify-between">
+            <span className="text-xs font-bold uppercase tracking-wider text-slate-400">
+              Pièces & Composants
+            </span>
+            <Package className="w-4 h-4 text-cyan-400" />
+          </div>
+          <div className="text-2xl font-black text-cyan-300 font-mono mt-2">
+            {formatCurrency(fin.hardwareDirectCost, settings.currency)}
+          </div>
+          <div className="text-[11px] text-slate-400 mt-1">
+            {project.parts.length} pièces allouées
+          </div>
+        </div>
+
+        {/* Temps & Main d'Œuvre */}
+        <div className="p-4 rounded-2xl bg-slate-900/70 border border-slate-800">
+          <div className="flex items-center justify-between">
+            <span className="text-xs font-bold uppercase tracking-wider text-slate-400">
+              Temps Passé à l'Atelier
+            </span>
+            <Clock className="w-4 h-4 text-amber-400" />
+          </div>
+          <div className="text-2xl font-black text-amber-300 font-mono mt-2">
+            {formatMinutes(fin.laborMinutes)}
+          </div>
+          <div className="text-[11px] text-slate-400 mt-1">
+            Coût valorisé : <span className="text-white font-mono font-bold">{formatCurrency(fin.laborCost, settings.currency)}</span>
+          </div>
+        </div>
+
+        {/* Bénéfice Net Réel */}
+        <div className="p-4 rounded-2xl bg-slate-900/70 border border-slate-800">
+          <div className="flex items-center justify-between">
+            <span className="text-xs font-bold uppercase tracking-wider text-slate-400">
+              Bénéfice Net Réel
+            </span>
+            <Sparkles className="w-4 h-4 text-emerald-400" />
+          </div>
+          <div className={`text-2xl font-black font-mono mt-2 ${fin.netProfit >= 0 ? 'text-emerald-400' : 'text-rose-400'}`}>
+            {formatCurrency(fin.netProfit, settings.currency)}
+          </div>
+          <div className="text-[11px] text-slate-400 mt-1 flex items-center justify-between">
+            <span className="text-emerald-300 font-bold">Marge : {fin.marginPercent.toFixed(1)}%</span>
+            <span className="text-amber-300 font-mono font-bold">
+              {fin.laborMinutes > 0 ? `${formatCurrency(fin.effectiveHourlyRate, settings.currency)}/h` : ''}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      {/* 5. PROJECT WORKBENCH SUB-NAVIGATION TABS */}
+      <div className="flex items-center border-b border-slate-800 space-x-1 sm:space-x-2 overflow-x-auto no-print pt-2">
+        {[
+          { id: 'workshop', label: '🛠️ Atelier & Tâches', icon: Wrench, badge: `${project.tasks?.length || 0} tâches` },
+          { id: 'parts', label: '📦 Nomenclature & Pièces (BOM)', icon: Package, badge: `${project.parts.length} pièces` },
+          { id: 'specs', label: '📋 Spécifications & Mods', icon: FileText, badge: `${project.modsList?.length || 0} mods` },
+          { id: 'finances', label: '💰 Finances & Simulateur', icon: Sliders, badge: `${fin.marginPercent.toFixed(0)}% marge` },
+          { id: 'certificate', label: '📜 Certificat d\'Authenticité', icon: Award, badge: 'Print' },
+        ].map((tab) => {
+          const isActive = activeTab === tab.id;
+          return (
+            <button
+              key={tab.id}
+              onClick={() => setActiveTab(tab.id as ProjectDetailTab)}
+              className={`flex items-center space-x-2 py-3 px-4 font-bold text-xs sm:text-sm border-b-2 transition-all whitespace-nowrap ${
+                isActive
+                  ? 'border-pink-500 text-white bg-pink-500/10 rounded-t-xl'
+                  : 'border-transparent text-slate-400 hover:text-slate-200 hover:bg-slate-900/50'
+              }`}
+            >
+              <span>{tab.label}</span>
+              <span className={`text-[10px] px-2 py-0.5 rounded-full font-mono font-bold ${
+                isActive ? 'bg-pink-500 text-white' : 'bg-slate-800 text-slate-400'
+              }`}>
+                {tab.badge}
+              </span>
+            </button>
+          );
+        })}
+      </div>
+
+      {/* 6. TAB CONTENTS */}
+
+      {/* === TAB 1: ATELIER, TÂCHES & SESSIONS === */}
+      {activeTab === 'workshop' && (
+        <div className="space-y-6 animate-fadeIn">
+          {/* Objectifs du projet */}
+          <ProjectObjectivesCard project={project} />
+
+          {/* Checklist des Tâches Atelier */}
+          <ProjectTasksChecklist project={project} />
+
+          {/* Journal des Sessions de Travail */}
+          <div className="p-5 rounded-2xl bg-slate-900/60 border border-slate-800 space-y-4">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center space-x-2">
+                <Clock className="w-5 h-5 text-amber-400" />
+                <h3 className="text-base font-bold text-white">
+                  Journal des Sessions de Travail
+                </h3>
+                <span className="text-xs font-mono px-2 py-0.5 rounded-full bg-amber-500/10 text-amber-300 border border-amber-500/30">
+                  {formatMinutes(fin.laborMinutes)} ({formatCurrency(fin.laborCost, settings.currency)})
+                </span>
+              </div>
+
+              <button
+                onClick={() => setShowAddTimeModal(true)}
+                className="flex items-center space-x-1.5 px-3 py-1.5 rounded-xl bg-amber-500/15 border border-amber-500/30 text-amber-300 hover:bg-amber-500/25 text-xs font-bold transition-all"
+              >
+                <Plus className="w-3.5 h-3.5" />
+                <span>Ajouter manuellement</span>
+              </button>
+            </div>
+
+            <div className="space-y-2">
+              {project.timeSessions.map((session) => (
+                <div
+                  key={session.id}
+                  className="flex items-center justify-between p-3.5 rounded-xl bg-slate-950/80 border border-slate-800 hover:border-slate-700 transition-colors group"
+                >
+                  <div className="space-y-1">
+                    <div className="flex items-center space-x-2">
+                      <span className="text-xs font-bold text-white">
+                        {getTaskTypeLabel(session.taskType)}
+                      </span>
+                      <span className="text-[10px] text-slate-500 font-mono">
+                        {session.date}
+                      </span>
+                    </div>
+                    {session.description && (
+                      <p className="text-xs text-slate-400">
+                        {session.description}
+                      </p>
+                    )}
+                  </div>
+
+                  <div className="flex items-center space-x-4">
+                    <div className="text-right font-mono">
+                      <div className="text-sm font-bold text-amber-300">
+                        {formatMinutes(session.durationMinutes)}
+                      </div>
+                      <div className="text-[10px] text-slate-400">
+                        {formatCurrency(session.cost, settings.currency)} ({session.hourlyRate}€/h)
+                      </div>
+                    </div>
+
+                    <button
+                      onClick={() => deleteTimeSession(project.id, session.id)}
+                      className="p-1.5 rounded-lg text-slate-500 hover:text-rose-400 hover:bg-rose-500/10 opacity-0 group-hover:opacity-100 transition-all"
+                      title="Supprimer cette session"
+                    >
+                      <Trash2 className="w-4 h-4" />
+                    </button>
+                  </div>
+                </div>
+              ))}
+
+              {project.timeSessions.length === 0 && (
+                <div className="p-6 text-center text-xs text-slate-500 italic bg-slate-950/40 rounded-xl border border-slate-850">
+                  Aucune session de travail enregistrée. Lancez le chronomètre ci-dessus ou ajoutez un créneau manuellement.
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* === TAB 2: NOMENCLATURE PIÈCES & FRAIS (BOM) === */}
+      {activeTab === 'parts' && (
+        <div className="space-y-6 animate-fadeIn">
+          {/* Financial Breakdown for Parts: Engagé vs À Prévoir */}
+          <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
+            <div className="p-4 rounded-2xl bg-emerald-950/20 border border-emerald-500/30">
+              <div className="flex items-center justify-between">
+                <span className="text-xs font-bold uppercase tracking-wider text-emerald-300 flex items-center gap-1.5">
+                  <CheckCircle2 className="w-3.5 h-3.5 text-emerald-400" />
+                  <span>Matériel Engagé (En Stock)</span>
+                </span>
+                <span className="text-[10px] px-2 py-0.5 rounded-full bg-emerald-500/20 text-emerald-300 font-mono">
+                  {project.parts.filter(p => !p.status || p.status === 'allocated' || p.status === 'received').length} pièces
+                </span>
+              </div>
+              <div className="text-2xl font-black text-emerald-400 font-mono mt-2">
+                {formatCurrency(fin.partsCostAllocated, settings.currency)}
+              </div>
+              <p className="text-[11px] text-slate-400 mt-1">
+                Composants déjà prélevés ou disponibles dans l'atelier
+              </p>
+            </div>
+
+            <div className="p-4 rounded-2xl bg-amber-950/20 border border-amber-500/30">
+              <div className="flex items-center justify-between">
+                <span className="text-xs font-bold uppercase tracking-wider text-amber-300 flex items-center gap-1.5">
+                  <AlertCircle className="w-3.5 h-3.5 text-amber-400" />
+                  <span>Matériel À Prévoir (À Commander)</span>
+                </span>
+                <span className="text-[10px] px-2 py-0.5 rounded-full bg-amber-500/20 text-amber-300 font-mono">
+                  {project.parts.filter(p => p.status === 'to_order' || p.status === 'ordered').length} pièces
+                </span>
+              </div>
+              <div className="text-2xl font-black text-amber-400 font-mono mt-2">
+                {formatCurrency(fin.partsCostPlanned, settings.currency)}
+              </div>
+              <p className="text-[11px] text-slate-400 mt-1">
+                Budget d'approvisionnement en prévision d'achat
+              </p>
+            </div>
+
+            <div className="p-4 rounded-2xl bg-cyan-950/20 border border-cyan-500/30">
+              <div className="flex items-center justify-between">
+                <span className="text-xs font-bold uppercase tracking-wider text-cyan-300 flex items-center gap-1.5">
+                  <Package className="w-3.5 h-3.5 text-cyan-400" />
+                  <span>Coût Total Matériel Estimé</span>
+                </span>
+                <span className="text-[10px] px-2 py-0.5 rounded-full bg-cyan-500/20 text-cyan-300 font-mono">
+                  {project.parts.length} total
+                </span>
+              </div>
+              <div className="text-2xl font-black text-cyan-300 font-mono mt-2">
+                {formatCurrency(fin.partsCost, settings.currency)}
+              </div>
+              <p className="text-[11px] text-slate-400 mt-1">
+                Somme globale Engagé + À Prévoir
+              </p>
+            </div>
+          </div>
+
+          {/* Quick Actions & BOM Table */}
+          <div className="p-5 rounded-2xl bg-slate-900/60 border border-slate-800 space-y-4">
+            <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 pb-3 border-b border-slate-800">
+              <div className="flex items-center space-x-2">
+                <Package className="w-5 h-5 text-cyan-400" />
+                <h3 className="text-base font-bold text-white">
+                  Nomenclature des Pièces & Composants (BOM)
+                </h3>
+                <span className="text-xs font-mono px-2 py-0.5 rounded-full bg-cyan-500/10 text-cyan-300 border border-cyan-500/30">
+                  {project.parts.length} composants • {formatCurrency(fin.partsCost, settings.currency)}
+                </span>
+              </div>
+
+              <div className="flex items-center gap-2">
+                <button
+                  onClick={() => {
+                    setAddPartMode('in_stock');
+                    setShowAddPartModal(true);
+                  }}
+                  className="flex items-center space-x-1.5 px-3.5 py-2 rounded-xl bg-cyan-500/15 border border-cyan-500/30 text-cyan-300 hover:bg-cyan-500/25 text-xs font-bold transition-all shadow-sm"
+                >
+                  <Plus className="w-4 h-4" />
+                  <span>+ Pièce en Stock</span>
+                </button>
+
+                <button
+                  onClick={() => {
+                    setAddPartMode('to_order');
+                    setShowAddPartModal(true);
+                  }}
+                  className="flex items-center space-x-1.5 px-3.5 py-2 rounded-xl bg-amber-500/15 border border-amber-500/30 text-amber-300 hover:bg-amber-500/25 text-xs font-bold transition-all shadow-sm"
+                >
+                  <Plus className="w-4 h-4" />
+                  <span>+ Pièce à Approvisionner</span>
+                </button>
+              </div>
+            </div>
+
+            {/* Parts Table */}
+            <div className="overflow-x-auto">
+              <table className="w-full text-left border-collapse text-xs">
+                <thead>
+                  <tr className="border-b border-slate-800 text-[11px] font-bold text-slate-400 uppercase tracking-wider">
+                    <th className="py-2.5 px-3">Composant</th>
+                    <th className="py-2.5 px-2">Catégorie</th>
+                    <th className="py-2.5 px-2">Statut Approvisionnement</th>
+                    <th className="py-2.5 px-2 text-right">Coût Unitaire</th>
+                    <th className="py-2.5 px-2 text-center">Qté</th>
+                    <th className="py-2.5 px-2 text-right">Total</th>
+                    <th className="py-2.5 px-3 text-right">Actions</th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-slate-850">
+                  {project.parts.map((part, index) => {
+                    const catBadge = getCategoryBadgeColor(part.category);
+                    const partStatusInfo = getProjectPartStatusInfo(part.status);
+                    const isToOrder = part.status === 'to_order';
+                    const isOrdered = part.status === 'ordered';
+
+                    const isEditingThisRow = editingPartIndex === index;
+
+                    return (
+                      <React.Fragment key={index}>
+                        <tr className={`hover:bg-slate-900/40 group ${isEditingThisRow ? 'bg-slate-900/60' : ''}`}>
+                          <td className="py-3 px-3 font-semibold text-white">
+                            <div className="space-y-0.5">
+                              <div className="flex items-center gap-2">
+                                <span>{part.partName}</span>
+                                {isToOrder && (
+                                  <span className="text-[10px] text-amber-400 font-mono bg-amber-500/10 px-1.5 py-0.5 rounded border border-amber-500/20">
+                                    Coût à prévoir
+                                  </span>
+                                )}
+                              </div>
+                              {/* URL fournisseur */}
+                              {part.purchaseUrl && !isEditingThisRow && (
+                                <a
+                                  href={part.purchaseUrl}
+                                  target="_blank"
+                                  rel="noopener noreferrer"
+                                  className="flex items-center gap-1 text-[10px] text-cyan-400 hover:text-cyan-300 transition-colors"
+                                >
+                                  <ExternalLink className="w-2.5 h-2.5" />
+                                  <span className="truncate max-w-[140px]">{part.purchaseUrl.replace(/^https?:\/\//, '').split('/')[0]}</span>
+                                </a>
+                              )}
+                              {part.notes && !isEditingThisRow && (
+                                <p className="text-[10px] text-slate-500 italic">{part.notes}</p>
+                              )}
+                            </div>
+                          </td>
+                          <td className="py-3 px-2">
+                            <span
+                              className={`inline-block px-2 py-0.5 rounded-full text-[10px] font-bold border ${catBadge.bg} ${catBadge.text} ${catBadge.border}`}
+                            >
+                              {getPartCategoryLabel(part.category)}
+                            </span>
+                          </td>
+                          <td className="py-3 px-2">
+                            <div className="flex items-center gap-2">
+                              <span
+                                className={`inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-[11px] font-bold border ${partStatusInfo.bg} ${partStatusInfo.text} ${partStatusInfo.border}`}
+                              >
+                                {isToOrder && <AlertCircle className="w-3 h-3" />}
+                                {isOrdered && <Truck className="w-3 h-3" />}
+                                {(!part.status || part.status === 'allocated' || part.status === 'received') && (
+                                  <CheckCircle2 className="w-3 h-3" />
+                                )}
+                                <span>{partStatusInfo.shortLabel}</span>
+                              </span>
+
+                              {/* Quick status switch buttons */}
+                              {isToOrder && (
+                                <div className="flex items-center gap-1">
+                                  <button
+                                    type="button"
+                                    onClick={() => updateProjectPartStatus(project.id, index, 'ordered')}
+                                    className="px-2 py-0.5 rounded bg-cyan-500/20 hover:bg-cyan-500/30 text-cyan-300 text-[10px] font-semibold border border-cyan-500/40 transition-colors"
+                                    title="Marquer comme commandé"
+                                  >
+                                    Commander
+                                  </button>
+                                  <button
+                                    type="button"
+                                    onClick={() => {
+                                      if (part.partId) {
+                                        receivePlannedItem(part.partId);
+                                      } else {
+                                        updateProjectPartStatus(project.id, index, 'allocated');
+                                      }
+                                    }}
+                                    className="px-2 py-0.5 rounded bg-emerald-500/20 hover:bg-emerald-500/30 text-emerald-300 text-[10px] font-semibold border border-emerald-500/40 transition-colors"
+                                    title="Marquer comme reçu et alloué au stock"
+                                  >
+                                    📥 Reçu
+                                  </button>
+                                </div>
+                              )}
+
+                              {isOrdered && (
+                                <button
+                                  type="button"
+                                  onClick={() => {
+                                    if (part.partId) {
+                                      receivePlannedItem(part.partId);
+                                    } else {
+                                      updateProjectPartStatus(project.id, index, 'allocated');
+                                    }
+                                  }}
+                                  className="px-2 py-0.5 rounded bg-emerald-500/20 hover:bg-emerald-500/30 text-emerald-300 text-[10px] font-semibold border border-emerald-500/40 transition-colors"
+                                  title="Réceptionner la pièce"
+                                >
+                                  📥 Réceptionner
+                                </button>
+                              )}
+                            </div>
+                          </td>
+
+                          {/* Prix unitaire — éditable inline */}
+                          <td className="py-3 px-2 text-right font-mono">
+                            {isEditingThisRow ? (
+                              <input
+                                type="number"
+                                step="0.01"
+                                autoFocus
+                                value={editingPartPrice}
+                                onChange={(e) => setEditingPartPrice(parseFloat(e.target.value) || 0)}
+                                className="w-20 bg-slate-950 border border-cyan-500 rounded-lg px-2 py-1 text-cyan-300 font-mono text-xs text-right focus:outline-none"
+                                onKeyDown={(e) => {
+                                  if (e.key === 'Enter') {
+                                    updateProjectPart(project.id, index, { unitCost: editingPartPrice, purchaseUrl: editingPartUrl || undefined });
+                                    setEditingPartIndex(null);
+                                  }
+                                  if (e.key === 'Escape') setEditingPartIndex(null);
+                                }}
+                              />
+                            ) : (
+                              <button
+                                type="button"
+                                onClick={() => {
+                                  setEditingPartIndex(index);
+                                  setEditingPartPrice(part.unitCost);
+                                  setEditingPartUrl(part.purchaseUrl || '');
+                                }}
+                                className="text-slate-300 hover:text-white group/price flex items-center gap-1 ml-auto"
+                                title="Cliquer pour modifier le prix"
+                              >
+                                <span>{formatCurrency(part.unitCost, settings.currency)}</span>
+                                <Pencil className="w-2.5 h-2.5 text-slate-500 group-hover/price:text-cyan-400 opacity-0 group-hover:opacity-100 transition-all" />
+                              </button>
+                            )}
+                          </td>
+
+                          <td className="py-3 px-2 text-center font-mono font-bold text-cyan-300">
+                            {part.quantity}
+                          </td>
+                          <td className="py-3 px-2 text-right font-mono font-bold text-white">
+                            {isEditingThisRow
+                              ? formatCurrency(editingPartPrice * part.quantity, settings.currency)
+                              : formatCurrency(part.totalCost, settings.currency)
+                            }
+                          </td>
+                          <td className="py-3 px-3 text-right">
+                            <div className="flex items-center justify-end gap-1">
+                              {isEditingThisRow ? (
+                                <>
+                                  <button
+                                    type="button"
+                                    onClick={() => {
+                                      updateProjectPart(project.id, index, { unitCost: editingPartPrice, purchaseUrl: editingPartUrl || undefined });
+                                      setEditingPartIndex(null);
+                                    }}
+                                    className="p-1.5 rounded-lg bg-emerald-500/20 text-emerald-400 hover:bg-emerald-500/30 text-[10px] font-bold transition-all"
+                                    title="Valider les changements"
+                                  >
+                                    <Check className="w-3.5 h-3.5" />
+                                  </button>
+                                  <button
+                                    type="button"
+                                    onClick={() => setEditingPartIndex(null)}
+                                    className="p-1.5 rounded-lg bg-slate-700 text-slate-400 hover:bg-slate-600 transition-all"
+                                    title="Annuler"
+                                  >
+                                    <X className="w-3.5 h-3.5" />
+                                  </button>
+                                </>
+                              ) : (
+                                <>
+                                  {/* URL link icon if set */}
+                                  {part.purchaseUrl && (
+                                    <a
+                                      href={part.purchaseUrl}
+                                      target="_blank"
+                                      rel="noopener noreferrer"
+                                      className="p-1.5 rounded-lg text-slate-500 hover:text-cyan-400 hover:bg-slate-800 transition-all opacity-0 group-hover:opacity-100"
+                                      title="Ouvrir le lien fournisseur"
+                                    >
+                                      <ExternalLink className="w-3.5 h-3.5" />
+                                    </a>
+                                  )}
+                                  <button
+                                    onClick={() => {
+                                      setEditingPartIndex(index);
+                                      setEditingPartPrice(part.unitCost);
+                                      setEditingPartUrl(part.purchaseUrl || '');
+                                    }}
+                                    className="p-1.5 rounded-lg text-slate-500 hover:text-cyan-400 hover:bg-slate-800 opacity-0 group-hover:opacity-100 transition-all"
+                                    title="Modifier le prix et l'URL fournisseur"
+                                  >
+                                    <Edit3 className="w-3.5 h-3.5" />
+                                  </button>
+                                  <button
+                                    onClick={() => removePartFromProject(project.id, index, true)}
+                                    className="p-1.5 rounded-lg text-slate-500 hover:text-rose-400 hover:bg-rose-500/10 opacity-0 group-hover:opacity-100 transition-all"
+                                    title="Retirer du projet et remettre en stock"
+                                  >
+                                    <Trash2 className="w-3.5 h-3.5" />
+                                  </button>
+                                </>
+                              )}
+                            </div>
+                          </td>
+                        </tr>
+
+                        {/* Inline URL edit row when editing */}
+                        {isEditingThisRow && (
+                          <tr className="bg-slate-900/80">
+                            <td colSpan={7} className="px-3 pb-3">
+                              <div className="flex items-center gap-2 p-2.5 rounded-xl bg-slate-950 border border-cyan-500/30">
+                                <Link className="w-3.5 h-3.5 text-cyan-400 shrink-0" />
+                                <input
+                                  type="url"
+                                  value={editingPartUrl}
+                                  onChange={(e) => setEditingPartUrl(e.target.value)}
+                                  placeholder="https://aliexpress.com/... ou autre lien fournisseur"
+                                  className="flex-1 bg-transparent text-xs text-cyan-300 placeholder-slate-500 focus:outline-none"
+                                  onKeyDown={(e) => {
+                                    if (e.key === 'Enter') {
+                                      updateProjectPart(project.id, index, { unitCost: editingPartPrice, purchaseUrl: editingPartUrl || undefined });
+                                      setEditingPartIndex(null);
+                                    }
+                                    if (e.key === 'Escape') setEditingPartIndex(null);
+                                  }}
+                                />
+                                <span className="text-[10px] text-slate-500">URL Fournisseur (optionnel)</span>
+                              </div>
+                            </td>
+                          </tr>
+                        )}
+                      </React.Fragment>
+                    );
+                  })}
+                </tbody>
+              </table>
+
+              {project.parts.length === 0 && (
+                <div className="p-8 text-center text-xs text-slate-500 italic bg-slate-950/40 rounded-xl border border-slate-850">
+                  Aucune pièce affectée pour le moment. Cliquez sur "+ Pièce en Stock" ou "+ Pièce à Approvisionner" pour lier des composants.
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Consommables & Frais Annexes */}
+          <div className="p-5 rounded-2xl bg-slate-900/60 border border-slate-800 space-y-3">
+            <h4 className="text-sm font-bold text-white flex items-center space-x-2">
+              <Boxes className="w-4 h-4 text-purple-400" />
+              <span>Consommables & Frais de Plateforme / Expédition</span>
+            </h4>
+            <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 text-xs">
+              <div className="p-3 rounded-xl bg-slate-950 border border-slate-800">
+                <span className="text-slate-400 block text-[11px]">Consommables Atelier</span>
+                <span className="font-mono font-bold text-white text-sm">
+                  {formatCurrency(project.additionalFees?.consumablesEst || 0, settings.currency)}
+                </span>
+              </div>
+              <div className="p-3 rounded-xl bg-slate-950 border border-slate-800">
+                <span className="text-slate-400 block text-[11px]">Boîte & Packaging Kraft</span>
+                <span className="font-mono font-bold text-white text-sm">
+                  {formatCurrency(project.additionalFees?.packagingCost || 0, settings.currency)}
+                </span>
+              </div>
+              <div className="p-3 rounded-xl bg-slate-950 border border-slate-800">
+                <span className="text-slate-400 block text-[11px]">Frais de Port Expédition</span>
+                <span className="font-mono font-bold text-white text-sm">
+                  {formatCurrency(project.additionalFees?.shippingCost || 0, settings.currency)}
+                </span>
+              </div>
+              <div className="p-3 rounded-xl bg-slate-950 border border-slate-800">
+                <span className="text-slate-400 block text-[11px]">Commission Plateforme</span>
+                <span className="font-mono font-bold text-white text-sm">
+                  {project.additionalFees?.platformFeePercent || 0}%
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* === TAB 3: SPÉCIFICATIONS & MODS === */}
+      {activeTab === 'specs' && (
+        <div className="space-y-6 animate-fadeIn">
+          {/* Mods Installed List Manager */}
+          <div className="p-5 rounded-2xl bg-slate-900/60 border border-slate-800 space-y-4">
+            <div className="flex flex-col sm:flex-row sm:items-center justify-between pb-3 border-b border-slate-800 gap-2">
+              <div className="flex items-center space-x-2">
+                <Wrench className="w-5 h-5 text-purple-400" />
+                <div>
+                  <h3 className="font-bold text-white text-base">
+                    Liste des Mods & Améliorations Installés
+                  </h3>
+                  <p className="text-xs text-slate-400">
+                    {project.modsList?.length || 0} mod(s) sur ce build • Visible sur certificat & étiquettes QR
+                  </p>
+                </div>
+              </div>
+
+              <div className="flex items-center gap-2">
+                <button
+                  type="button"
+                  onClick={() => {
+                    // Pick first compatible mod or open list
+                    const compatible = modsLibrary.find((m) =>
+                      m.compatibleModels?.includes(project.consoleModel)
+                    ) || modsLibrary[0];
+                    if (compatible) setModToApply(compatible);
+                  }}
+                  className="px-3 py-1.5 bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-400 hover:to-purple-500 text-white rounded-xl text-xs font-bold shadow-md shadow-pink-500/20 flex items-center gap-1.5 transition-all"
+                >
+                  <Sparkles className="w-3.5 h-3.5" />
+                  <span>Catalogue de Mods</span>
+                </button>
+
+                <button
+                  type="button"
+                  onClick={() => {
+                    const name = prompt(
+                      'Nom du Modèle / Recette à enregistrer :',
+                      `Build ${project.title}`
+                    );
+                    if (name && name.trim()) {
+                      saveProjectAsModRecipe(project.id, name.trim(), 'complete_kit');
+                    }
+                  }}
+                  className="px-3 py-1.5 bg-slate-800 hover:bg-slate-700 text-slate-200 border border-slate-700 rounded-xl text-xs font-semibold flex items-center gap-1.5 transition-colors"
+                >
+                  <Copy className="w-3.5 h-3.5 text-cyan-400" />
+                  <span>Enregistrer comme Modèle</span>
+                </button>
+              </div>
+            </div>
+
+            {/* Compatible mods quick suggestion chips */}
+            {modsLibrary.length > 0 && (
+              <div className="p-3 bg-slate-950/80 border border-slate-800/80 rounded-xl space-y-2">
+                <div className="flex items-center justify-between text-[11px]">
+                  <span className="font-bold text-pink-400 uppercase tracking-wider flex items-center gap-1">
+                    <Sparkles className="w-3 h-3" /> Mods Disponibles pour {project.consoleModel} :
+                  </span>
+                  <span className="text-slate-500 text-[10px]">
+                    Cliquez sur un mod pour l'appliquer avec ses pièces & tâches
+                  </span>
+                </div>
+
+                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2">
+                  {modsLibrary
+                    .filter(
+                      (m) =>
+                        m.compatibleModels?.includes(project.consoleModel) ||
+                        m.compatibleModels?.includes('Autre / Custom') ||
+                        !m.compatibleModels ||
+                        m.compatibleModels.length === 0
+                    )
+                    .map((mod) => {
+                      const isAlreadyInstalled = (project.modsList || []).some(
+                        (m) => m.toLowerCase().includes(mod.name.toLowerCase()) || mod.name.toLowerCase().includes(m.toLowerCase())
+                      );
+
+                      return (
+                        <div
+                          key={mod.id}
+                          className="p-2.5 bg-slate-900 border border-slate-800 hover:border-slate-700 rounded-xl flex items-center justify-between gap-2 text-xs"
+                        >
+                          <div className="min-w-0 flex-1">
+                            <div className="font-bold text-white truncate flex items-center gap-1">
+                              {isAlreadyInstalled && <Check className="w-3.5 h-3.5 text-emerald-400 shrink-0" />}
+                              <span className="truncate">{mod.name}</span>
+                            </div>
+                            <div className="text-[10px] text-slate-400 font-mono">
+                              +{mod.suggestedAddedValue} € • ~{mod.estimatedMinutes} min
+                            </div>
+                          </div>
+
+                          <button
+                            type="button"
+                            onClick={() => setModToApply(mod)}
+                            className={`px-2.5 py-1 rounded-lg text-[11px] font-bold shrink-0 transition-colors ${
+                              isAlreadyInstalled
+                                ? 'bg-slate-800 text-slate-400 hover:text-white'
+                                : 'bg-pink-600 hover:bg-pink-500 text-white shadow-sm'
+                            }`}
+                          >
+                            {isAlreadyInstalled ? 'Réappliquer' : '+ Appliquer'}
+                          </button>
+                        </div>
+                      );
+                    })}
+                </div>
+              </div>
+            )}
+
+            {/* Add new custom mod input */}
+            <form onSubmit={handleAddMod} className="flex items-center space-x-2">
+              <input
+                type="text"
+                value={newModInput}
+                onChange={(e) => setNewModInput(e.target.value)}
+                placeholder="Ajouter manuellement un mod custom (ex: Vitre personnalisée, LED RGB, Overclock...)"
+                className="flex-1 bg-slate-950 border border-slate-800 rounded-xl px-3.5 py-2 text-xs text-white placeholder-slate-500 focus:outline-none focus:border-purple-500"
+              />
+              <button
+                type="submit"
+                className="flex items-center space-x-1 px-3.5 py-2 rounded-xl text-xs font-bold bg-purple-600 hover:bg-purple-500 text-white transition-all shadow-sm shrink-0"
+              >
+                <Plus className="w-4 h-4" />
+                <span>Ajouter</span>
+              </button>
+            </form>
+
+            {/* Mods bullet points */}
+            <div className="space-y-2">
+              {project.modsList?.map((mod, i) => (
+                <div
+                  key={i}
+                  className="flex items-center justify-between p-3 rounded-xl bg-slate-950/70 border border-slate-800 text-xs text-slate-200 group hover:border-purple-500/30 transition-all"
+                >
+                  <div className="flex items-center space-x-2.5">
+                    <span className="w-2 h-2 rounded-full bg-purple-400 shrink-0" />
+                    <span>{mod}</span>
+                  </div>
+                  <button
+                    type="button"
+                    onClick={() => handleRemoveMod(i)}
+                    className="p-1 text-slate-500 hover:text-rose-400 opacity-0 group-hover:opacity-100 transition-all"
+                    title="Supprimer ce mod"
+                  >
+                    <X className="w-4 h-4" />
+                  </button>
+                </div>
+              ))}
+              {(!project.modsList || project.modsList.length === 0) && (
+                <div className="p-4 text-center text-xs text-slate-500 italic bg-slate-950/40 rounded-xl">
+                  Aucun mod spécifié pour le moment.
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Technical Notes & Workshop Journal */}
+          <div className="p-5 rounded-2xl bg-slate-900/60 border border-slate-800 space-y-3">
+            <div className="flex items-center justify-between pb-2 border-b border-slate-800">
+              <div className="flex items-center space-x-2">
+                <FileText className="w-5 h-5 text-cyan-400" />
+                <h3 className="font-bold text-white text-base">
+                  Notes Techniques & Journal d'Atelier
+                </h3>
+              </div>
+              {!isEditingNotes ? (
+                <button
+                  onClick={() => {
+                    setNotesContent(project.notes || '');
+                    setIsEditingNotes(true);
+                  }}
+                  className="flex items-center space-x-1 px-3 py-1 rounded-xl text-xs font-semibold bg-slate-800 text-slate-300 hover:text-white"
+                >
+                  <Edit2 className="w-3.5 h-3.5" />
+                  <span>Éditer les notes</span>
+                </button>
+              ) : (
+                <div className="flex items-center space-x-2">
+                  <button
+                    onClick={handleSaveNotes}
+                    className="flex items-center space-x-1 px-3 py-1 rounded-xl text-xs font-bold bg-cyan-600 hover:bg-cyan-500 text-white"
+                  >
+                    <Check className="w-3.5 h-3.5" />
+                    <span>Sauvegarder</span>
+                  </button>
+                  <button
+                    onClick={() => setIsEditingNotes(false)}
+                    className="p-1 text-slate-400 hover:text-white"
+                  >
+                    <X className="w-4 h-4" />
+                  </button>
+                </div>
+              )}
+            </div>
+
+            {isEditingNotes ? (
+              <textarea
+                value={notesContent}
+                onChange={(e) => setNotesContent(e.target.value)}
+                rows={5}
+                placeholder="Consignez les réglages OSD, les particularités de la coque, les difficultés rencontrées..."
+                className="w-full bg-slate-950 border border-slate-800 rounded-xl p-3 text-xs text-white placeholder-slate-500 focus:outline-none focus:border-cyan-500 font-mono"
+              />
+            ) : (
+              <div className="p-4 rounded-xl bg-slate-950/70 border border-slate-850 text-xs text-slate-300 leading-relaxed whitespace-pre-wrap font-mono">
+                {project.notes || 'Aucune note technique enregistrée pour ce projet.'}
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* === TAB 4: FINANCES & SIMULATEUR DE PRIX === */}
+      {activeTab === 'finances' && (
+        <div className="space-y-6 animate-fadeIn">
+          {/* Dynamic Pricing Simulator for this project */}
+          <div className="p-6 rounded-3xl bg-gradient-to-br from-slate-900 via-slate-950 to-slate-900 border border-pink-500/30 shadow-xl space-y-4">
+            <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2 pb-3 border-b border-slate-800">
+              <div>
+                <h3 className="text-base font-bold text-white flex items-center space-x-2">
+                  <Sliders className="w-5 h-5 text-pink-400" />
+                  <span>Simulateur de Prix de Vente & Marge Réelle</span>
+                </h3>
+                <p className="text-xs text-slate-400">
+                  Ajustez le prix de vente pour visualiser instantanément la rentabilité de ce projet
+                </p>
+              </div>
+              <div className="text-right">
+                <span className="text-xs text-slate-400">Prix simulé :</span>
+                <div className="font-mono text-xl font-black text-pink-400">
+                  {formatCurrency(simulatedPrice, settings.currency)}
+                </div>
+              </div>
+            </div>
+
+            {/* Slider */}
+            <div className="space-y-2 pt-2">
+              <input
+                type="range"
+                min="50"
+                max="400"
+                step="5"
+                value={simulatedPrice}
+                onChange={(e) => setSimulatedPrice(parseFloat(e.target.value))}
+                className="w-full h-2.5 bg-slate-800 rounded-lg appearance-none cursor-pointer accent-pink-500"
+              />
+              <div className="flex justify-between text-[11px] font-mono text-slate-500">
+                <span>50 €</span>
+                <span>Prix Cible Actuel : {project.salePriceTarget} €</span>
+                <span>400 €</span>
+              </div>
+            </div>
+
+            {/* Simulated Return Metrics */}
+            <div className="grid grid-cols-1 sm:grid-cols-3 gap-3 pt-2">
+              <div className="p-3.5 rounded-xl bg-slate-950 border border-slate-800 text-center">
+                <span className="text-xs text-slate-400 block">Bénéfice Net Simulé</span>
+                <span className={`font-mono text-lg font-black ${simulatedFin.netProfit >= 0 ? 'text-emerald-400' : 'text-rose-400'}`}>
+                  {formatCurrency(simulatedFin.netProfit, settings.currency)}
+                </span>
+              </div>
+
+              <div className="p-3.5 rounded-xl bg-slate-950 border border-slate-800 text-center">
+                <span className="text-xs text-slate-400 block">Taux de Marge Nette</span>
+                <span className="font-mono text-lg font-black text-cyan-300">
+                  {simulatedFin.marginPercent.toFixed(1)}%
+                </span>
+              </div>
+
+              <div className="p-3.5 rounded-xl bg-slate-950 border border-slate-800 text-center">
+                <span className="text-xs text-slate-400 block">Gain Horaire Effectif</span>
+                <span className="font-mono text-lg font-black text-amber-300">
+                  {formatCurrency(simulatedFin.effectiveHourlyRate, settings.currency)}/h
+                </span>
+              </div>
+            </div>
+
+            <div className="flex justify-end pt-2">
+              <button
+                type="button"
+                onClick={() => {
+                  updateProject(project.id, { salePriceTarget: simulatedPrice });
+                }}
+                className="px-4 py-2 rounded-xl text-xs font-bold bg-pink-600 hover:bg-pink-500 text-white shadow-md transition-all"
+              >
+                Appliquer comme Prix Cible Officiel ({simulatedPrice} €)
+              </button>
+            </div>
+          </div>
+
+          {/* Economic Waterfall & Breakdown */}
+          <div className="p-5 rounded-2xl bg-slate-900/60 border border-slate-800 space-y-3">
+            <h4 className="text-sm font-bold text-white flex items-center space-x-2">
+              <PieIcon className="w-4 h-4 text-cyan-400" />
+              <span>Décomposition Complète du Coût de Revient (COGS)</span>
+            </h4>
+            <div className="space-y-2 text-xs font-mono">
+              <div className="flex justify-between py-1 border-b border-slate-850">
+                <span className="text-slate-400">1. Pièces & Composants Matériels :</span>
+                <span className="text-cyan-300 font-bold">{formatCurrency(fin.partsCost, settings.currency)}</span>
+              </div>
+              <div className="flex justify-between py-1 border-b border-slate-850">
+                <span className="text-slate-400">2. Consommables & Packaging :</span>
+                <span className="text-purple-300 font-bold">{formatCurrency(fin.consumablesAndPackagingCost, settings.currency)}</span>
+              </div>
+              <div className="flex justify-between py-1 border-b border-slate-850">
+                <span className="text-slate-400">3. Main d'Œuvre ({formatMinutes(fin.laborMinutes)} @ {project.hourlyRateDefault}€/h) :</span>
+                <span className="text-amber-300 font-bold">{formatCurrency(fin.laborCost, settings.currency)}</span>
+              </div>
+              <div className="flex justify-between py-1 border-b border-slate-850">
+                <span className="text-slate-400">4. Port & Frais de Plateforme :</span>
+                <span className="text-blue-300 font-bold">{formatCurrency(fin.shippingAndPlatformCost, settings.currency)}</span>
+              </div>
+              <div className="flex justify-between py-2 border-t border-slate-700 text-sm font-bold">
+                <span className="text-white">COÛT DE REVIENT TOTAL (COGS) :</span>
+                <span className="text-pink-400">{formatCurrency(fin.totalCostOfGoodsSold, settings.currency)}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* === TAB 5: CERTIFICAT D'AUTHENTICITÉ (Printable) === */}
+      {activeTab === 'certificate' && (
+        <div className="space-y-4 animate-fadeIn">
+          <div className="flex justify-end no-print">
+            <button
+              onClick={handlePrintCertificate}
+              className="flex items-center space-x-2 px-4 py-2 rounded-xl bg-pink-600 hover:bg-pink-500 text-white font-bold text-xs shadow-lg shadow-pink-500/20 transition-all"
+            >
+              <Printer className="w-4 h-4" />
+              <span>Imprimer le Certificat Officiel</span>
+            </button>
+          </div>
+
+          {/* Certificate Container */}
+          <div className="p-8 sm:p-12 rounded-3xl bg-slate-950 border-2 border-slate-700 text-slate-200 shadow-2xl relative overflow-hidden print:p-8 print:border-black print:text-black print:bg-white">
+            <div className="border border-pink-500/40 p-8 rounded-2xl space-y-6">
+              <div className="flex items-center justify-between border-b border-slate-800 pb-4">
+                <div>
+                  <h1 className="text-2xl font-black text-white font-display print:text-black">
+                    {settings.businessName || 'uwu Custom Studio'}
+                  </h1>
+                  <p className="text-xs text-slate-400 print:text-slate-600">
+                    Certificat d'Authenticité & Rapport Technique de Modding
+                  </p>
+                </div>
+                <div className="text-right">
+                  <span className="font-mono text-sm font-bold text-pink-400 print:text-black">
+                    {project.serialNumber}
+                  </span>
+                  <div className="text-[10px] text-slate-500">
+                    Garantie atelier : {project.warrantyMonths || 6} mois
+                  </div>
+                </div>
+              </div>
+
+              <div className="grid grid-cols-2 gap-4 text-xs">
+                <div>
+                  <span className="text-slate-500 block">Modèle de Console</span>
+                  <strong className="text-white text-sm print:text-black">{project.consoleModel}</strong>
+                </div>
+                <div>
+                  <span className="text-slate-500 block">Date d'Achèvement</span>
+                  <strong className="text-white text-sm print:text-black">{project.completedDate || project.startDate}</strong>
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <span className="text-xs font-bold text-slate-400 uppercase tracking-wider">
+                  Améliorations & Modifications Réalisées :
+                </span>
+                <ul className="space-y-1.5 text-xs text-slate-300 print:text-black">
+                  {project.modsList?.map((mod, i) => (
+                    <li key={i} className="flex items-center space-x-2">
+                      <span className="text-pink-400 print:text-black">✓</span>
+                      <span>{mod}</span>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+
+              <div className="pt-6 border-t border-slate-800 flex justify-between items-end text-xs text-slate-500">
+                <div>
+                  <div>Contrôle Qualité : Validé 100% OK</div>
+                  <div>Test Audio / Vidéo / Charge / Autonomie</div>
+                </div>
+                <div className="text-right">
+                  <div className="font-display font-bold text-white print:text-black">Atelier uwuFinances</div>
+                  <div>Signature & Tampon Officiel</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* --- MODALS --- */}
+
+      {/* 1. Modal Affecter une Pièce */}
+      {showAddPartModal && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/80 backdrop-blur-md no-print">
+          <div className="relative w-full max-w-lg bg-slate-900 border border-cyan-500/40 rounded-3xl p-6 shadow-2xl space-y-4">
+            <div className="flex items-center justify-between pb-2 border-b border-slate-800">
+              <h3 className="font-bold text-white text-base flex items-center space-x-2">
+                <Package className="w-5 h-5 text-cyan-400" />
+                <span>
+                  {addPartMode === 'to_order' ? 'Ajouter une Pièce à Approvisionner' : 'Affecter une Pièce au Projet'}
+                </span>
+              </h3>
+              <button
+                onClick={() => setShowAddPartModal(false)}
+                className="text-slate-400 hover:text-white"
+              >
+                <X className="w-5 h-5" />
+              </button>
+            </div>
+
+            {/* Mode Switcher */}
+            <div className="grid grid-cols-2 gap-2 p-1 bg-slate-950 rounded-xl border border-slate-800">
+              <button
+                type="button"
+                onClick={() => setAddPartMode('in_stock')}
+                className={`flex items-center justify-center space-x-1.5 py-2 px-3 rounded-lg text-xs font-bold transition-all ${
+                  addPartMode === 'in_stock'
+                    ? 'bg-cyan-500/20 text-cyan-300 border border-cyan-500/40 shadow-sm'
+                    : 'text-slate-400 hover:text-slate-200'
+                }`}
+              >
+                <CheckCircle2 className="w-3.5 h-3.5" />
+                <span>Pièce en Stock (Dispo)</span>
+              </button>
+              <button
+                type="button"
+                onClick={() => setAddPartMode('to_order')}
+                className={`flex items-center justify-center space-x-1.5 py-2 px-3 rounded-lg text-xs font-bold transition-all ${
+                  addPartMode === 'to_order'
+                    ? 'bg-amber-500/20 text-amber-300 border border-amber-500/40 shadow-sm'
+                    : 'text-slate-400 hover:text-slate-200'
+                }`}
+              >
+                <AlertCircle className="w-3.5 h-3.5" />
+                <span>À Approvisionner (En Prévision)</span>
+              </button>
+            </div>
+
+            {addPartMode === 'to_order' && (
+              <div className="p-3 rounded-xl bg-amber-500/10 border border-amber-500/30 text-xs text-amber-300 space-y-1">
+                <div className="font-bold flex items-center gap-1.5">
+                  <AlertCircle className="w-4 h-4 shrink-0" />
+                  <span>Pièce non disponible immédiatement</span>
+                </div>
+                <p className="text-[11px] text-amber-200/80 leading-relaxed">
+                  Cette pièce sera rattachée à ce projet avec un coût comptabilisé dans les <strong>« Coûts à Prévoir »</strong>. Elle sera également ajoutée automatiquement dans votre <strong>Stock & Achats</strong> avec le statut <strong>« En Prévision »</strong>.
+                </p>
+              </div>
+            )}
+
+            <form onSubmit={handleAddPartSubmit} className="space-y-4 text-xs">
+              {addPartMode === 'in_stock' ? (
+                <>
+                  <div>
+                    <label className="block text-slate-300 font-semibold mb-1">
+                      Sélectionner depuis l'Inventaire en Stock :
+                    </label>
+                    <select
+                      value={selectedInventoryId}
+                      onChange={(e) => {
+                        setSelectedInventoryId(e.target.value);
+                        if (e.target.value) setCustomPartName('');
+                      }}
+                      className="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2.5 text-white focus:outline-none focus:border-cyan-500"
+                    >
+                      <option value="">-- Choisir une pièce en stock --</option>
+                      {relevantInventory.map((item) => (
+                        <option key={item.id} value={item.id}>
+                          {item.name} (Stock : {item.quantityInStock} dispo | Coût : {item.unitCostWithFees.toFixed(2)} €)
+                        </option>
+                      ))}
+                    </select>
+                  </div>
+
+                  {!selectedInventoryId && (
+                    <div className="p-3.5 rounded-xl bg-slate-950 border border-slate-800 space-y-3">
+                      <span className="text-[11px] font-bold text-slate-400 block">
+                        Ou ajouter une pièce disponible hors catalogue :
+                      </span>
+                      <div>
+                        <input
+                          type="text"
+                          value={customPartName}
+                          onChange={(e) => setCustomPartName(e.target.value)}
+                          placeholder="Nom de la pièce (ex: Vitre personnalisée UV, Sticker...)"
+                          className="w-full bg-slate-900 border border-slate-800 rounded-xl px-3 py-2 text-white placeholder-slate-500"
+                        />
+                      </div>
+                      <div className="grid grid-cols-2 gap-2">
+                        <div>
+                          <label className="text-[10px] text-slate-400">Coût unitaire (€)</label>
+                          <input
+                            type="number"
+                            step="0.01"
+                            value={customUnitCost}
+                            onChange={(e) => setCustomUnitCost(parseFloat(e.target.value) || 0)}
+                            className="w-full bg-slate-900 border border-slate-800 rounded-xl px-3 py-1.5 text-white font-mono"
+                          />
+                        </div>
+                        <div>
+                          <label className="text-[10px] text-slate-400">Catégorie</label>
+                          <select
+                            value={customPartCategory}
+                            onChange={(e) => setCustomPartCategory(e.target.value as PartCategory)}
+                            className="w-full bg-slate-900 border border-slate-800 rounded-xl px-3 py-1.5 text-white"
+                          >
+                            <option value="screen">Écran & Verre</option>
+                            <option value="shell">Coque</option>
+                            <option value="battery_power">Batterie & USB-C</option>
+                            <option value="buttons_pads">Boutons & Pads</option>
+                            <option value="sound_amp">Audio</option>
+                            <option value="console_base">Console Donneuse</option>
+                            <option value="other">Autre</option>
+                          </select>
+                        </div>
+                      </div>
+                    </div>
+                  )}
+                </>
+              ) : (
+                /* To Order Form */
+                <div className="p-3.5 rounded-xl bg-slate-950 border border-slate-800 space-y-3">
+                  <div>
+                    <label className="text-slate-300 font-semibold block mb-1">
+                      Nom de la pièce à approvisionner *
+                    </label>
+                    <input
+                      type="text"
+                      required
+                      value={customPartName}
+                      onChange={(e) => setCustomPartName(e.target.value)}
+                      placeholder="Ex: Écran IPS Laminé V3 FunnyPlaying, Coque Extremerate..."
+                      className="w-full bg-slate-900 border border-slate-700 rounded-xl px-3 py-2 text-white placeholder-slate-500 text-xs focus:outline-none focus:border-amber-500"
+                    />
+                  </div>
+
+                  <div className="grid grid-cols-2 gap-2">
+                    <div>
+                      <label className="text-[10px] text-slate-400">Coût d'Achat Estimé (€)</label>
+                      <input
+                        type="number"
+                        step="0.01"
+                        required
+                        value={customUnitCost}
+                        onChange={(e) => setCustomUnitCost(parseFloat(e.target.value) || 0)}
+                        className="w-full bg-slate-900 border border-slate-700 rounded-xl px-3 py-1.5 text-white font-mono text-xs focus:outline-none focus:border-amber-500"
+                      />
+                    </div>
+                    <div>
+                      <label className="text-[10px] text-slate-400">Catégorie</label>
+                      <select
+                        value={customPartCategory}
+                        onChange={(e) => setCustomPartCategory(e.target.value as PartCategory)}
+                        className="w-full bg-slate-900 border border-slate-700 rounded-xl px-3 py-1.5 text-white text-xs focus:outline-none focus:border-amber-500"
+                      >
+                        <option value="screen">Écran & Verre</option>
+                        <option value="shell">Coque</option>
+                        <option value="battery_power">Batterie & USB-C</option>
+                        <option value="buttons_pads">Boutons & Pads</option>
+                        <option value="sound_amp">Audio</option>
+                        <option value="console_base">Console Donneuse</option>
+                        <option value="motherboard_electronics">Électronique</option>
+                        <option value="other">Autre</option>
+                      </select>
+                    </div>
+                  </div>
+
+                  {/* URL Fournisseur */}
+                  <div>
+                    <label className="text-slate-300 font-semibold block mb-1 flex items-center gap-1.5">
+                      <ExternalLink className="w-3 h-3 text-cyan-400" />
+                      Lien Fournisseur (optionnel)
+                    </label>
+                    <input
+                      type="url"
+                      value={customPurchaseUrl}
+                      onChange={(e) => setCustomPurchaseUrl(e.target.value)}
+                      placeholder="https://aliexpress.com/item/... ou autre URL d'achat"
+                      className="w-full bg-slate-900 border border-slate-700 rounded-xl px-3 py-2 text-cyan-300 placeholder-slate-500 text-xs focus:outline-none focus:border-amber-500"
+                    />
+                    <p className="text-[10px] text-slate-500 mt-0.5">Collez le lien du produit chez votre fournisseur</p>
+                  </div>
+
+                  {/* Notes */}
+                  <div>
+                    <label className="text-slate-300 font-semibold block mb-1">Notes (optionnel)</label>
+                    <input
+                      type="text"
+                      value={customPartNotes}
+                      onChange={(e) => setCustomPartNotes(e.target.value)}
+                      placeholder="Ex: Couleur Atomic Purple, modèle V3..."
+                      className="w-full bg-slate-900 border border-slate-700 rounded-xl px-3 py-2 text-white placeholder-slate-500 text-xs focus:outline-none focus:border-amber-500"
+                    />
+                  </div>
+                </div>
+              )}
+
+              <div className="flex items-center justify-between">
+                <div>
+                  <label className="block text-slate-300 font-semibold mb-1">Quantité :</label>
+                  <input
+                    type="number"
+                    min="1"
+                    value={partQuantity}
+                    onChange={(e) => setPartQuantity(parseInt(e.target.value) || 1)}
+                    className="w-24 bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-white font-mono"
+                  />
+                </div>
+
+                {addPartMode === 'in_stock' && selectedInventoryId && (
+                  <label className="flex items-center space-x-2 pt-5 cursor-pointer">
+                    <input
+                      type="checkbox"
+                      checked={deductStock}
+                      onChange={(e) => setDeductStock(e.target.checked)}
+                      className="rounded border-slate-700 text-cyan-500 focus:ring-cyan-500 bg-slate-950"
+                    />
+                    <span className="text-xs text-slate-300">Déduire du stock</span>
+                  </label>
+                )}
+              </div>
+
+              <div className="flex justify-end space-x-2 pt-2 border-t border-slate-800">
+                <button
+                  type="button"
+                  onClick={() => setShowAddPartModal(false)}
+                  className="px-4 py-2 rounded-xl bg-slate-800 text-slate-300 hover:text-white"
+                >
+                  Annuler
+                </button>
+                <button
+                  type="submit"
+                  className={`px-4 py-2 rounded-xl text-white font-bold transition-all shadow-md ${
+                    addPartMode === 'to_order'
+                      ? 'bg-gradient-to-r from-amber-500 to-orange-600 hover:from-amber-400 hover:to-orange-500'
+                      : 'bg-cyan-600 hover:bg-cyan-500'
+                  }`}
+                >
+                  {addPartMode === 'to_order' ? '+ Ajouter en Prévision (Projet + Stock)' : 'Affecter au Projet'}
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+
+      {/* 2. Modal Ajouter Temps Manuellement */}
+      {showAddTimeModal && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/80 backdrop-blur-md no-print">
+          <div className="relative w-full max-w-md bg-slate-900 border border-amber-500/40 rounded-3xl p-6 shadow-2xl space-y-4">
+            <div className="flex items-center justify-between pb-2 border-b border-slate-800">
+              <h3 className="font-bold text-white text-base flex items-center space-x-2">
+                <Clock className="w-5 h-5 text-amber-400" />
+                <span>Ajouter du Temps de Travail</span>
+              </h3>
+              <button
+                onClick={() => setShowAddTimeModal(false)}
+                className="text-slate-400 hover:text-white"
+              >
+                <X className="w-5 h-5" />
+              </button>
+            </div>
+
+            <form onSubmit={handleAddTimeSubmit} className="space-y-3.5 text-xs">
+              <div>
+                <label className="block text-slate-300 font-semibold mb-1">
+                  Type d'Opération :
+                </label>
+                <select
+                  value={manualTaskType}
+                  onChange={(e) => setManualTaskType(e.target.value as TaskType)}
+                  className="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-white"
+                >
+                  {TASK_TYPES.map((t) => (
+                    <option key={t.id} value={t.id}>
+                      {t.label}
+                    </option>
+                  ))}
+                </select>
+              </div>
+
+              <div>
+                <label className="block text-slate-300 font-semibold mb-1">
+                  Description / Note :
+                </label>
+                <input
+                  type="text"
+                  value={manualTaskDescription}
+                  onChange={(e) => setManualTaskDescription(e.target.value)}
+                  placeholder="Ex: Pose module USB-C et soudure OSD"
+                  className="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-white placeholder-slate-500"
+                />
+              </div>
+
+              <div className="grid grid-cols-2 gap-3">
+                <div>
+                  <label className="block text-slate-300 font-semibold mb-1">
+                    Durée (Minutes) :
+                  </label>
+                  <input
+                    type="number"
+                    step="5"
+                    min="5"
+                    value={manualSessionDuration}
+                    onChange={(e) => setManualSessionDuration(parseInt(e.target.value) || 0)}
+                    className="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-white font-mono font-bold"
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-slate-300 font-semibold mb-1">
+                    Taux Horaire (€/h) :
+                  </label>
+                  <input
+                    type="number"
+                    step="0.5"
+                    value={manualSessionRate}
+                    onChange={(e) => setManualSessionRate(parseFloat(e.target.value) || 25)}
+                    className="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-white font-mono"
+                  />
+                </div>
+              </div>
+
+              <div>
+                <label className="block text-slate-300 font-semibold mb-1">Date :</label>
+                <input
+                  type="date"
+                  value={manualSessionDate}
+                  onChange={(e) => setManualSessionDate(e.target.value)}
+                  className="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-white font-mono"
+                />
+              </div>
+
+              <div className="flex justify-end space-x-2 pt-3 border-t border-slate-800">
+                <button
+                  type="button"
+                  onClick={() => setShowAddTimeModal(false)}
+                  className="px-4 py-2 rounded-xl bg-slate-800 text-slate-300 hover:text-white"
+                >
+                  Annuler
+                </button>
+                <button
+                  type="submit"
+                  className="px-4 py-2 rounded-xl bg-amber-500 hover:bg-amber-400 text-slate-950 font-bold"
+                >
+                  Enregistrer Session
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+
+      {/* 3. Modal Vente */}
+      {showSoldModal && (
+        <MarkAsSoldModal
+          project={project}
+          isOpen={true}
+          onClose={() => setShowSoldModal(false)}
+        />
+      )}
+
+      {/* 4. Modal Édition Globale */}
+      {showEditModal && (
+        <ProjectModal
+          isOpen={true}
+          onClose={() => setShowEditModal(false)}
+          editingProject={project}
+        />
+      )}
+
+      {/* 5. Modal Étiquettes & QR Codes */}
+      <QrLabelModal
+        isOpen={showQrLabelModal}
+        onClose={() => setShowQrLabelModal(false)}
+        project={project}
+      />
+
+      {/* 6. Modal Application de Mod depuis le Catalogue */}
+      <ApplyModModal
+        isOpen={!!modToApply}
+        onClose={() => setModToApply(null)}
+        modToApply={modToApply}
+        defaultProjectId={project.id}
+      />
+    </div>
+  );
+};
diff --git a/src/components/projects/ProjectModal.tsx b/src/components/projects/ProjectModal.tsx
new file mode 100644
index 0000000..712a269
--- /dev/null
+++ b/src/components/projects/ProjectModal.tsx
@@ -0,0 +1,577 @@
+import React, { useState, useEffect } from 'react';
+import { X, Gamepad2, Tag, Calendar, User, DollarSign, Wrench, Sparkles, FileText } from 'lucide-react';
+import { useApp } from '../../context/AppContext';
+import type { Project, ConsoleModel, ProjectType, ProjectStatus } from '../../types';
+
+
+interface ProjectModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  editingProject?: Project | null;
+}
+
+export const ProjectModal: React.FC<ProjectModalProps> = ({
+  isOpen,
+  onClose,
+  editingProject,
+}) => {
+  const { addProject, updateProject, modsLibrary, settings, consoleModels } = useApp();
+
+  const [title, setTitle] = useState('');
+  const [serialNumber, setSerialNumber] = useState('');
+  const [consoleModel, setConsoleModel] = useState<ConsoleModel>('GBA SP');
+  const [type, setType] = useState<ProjectType>('showcase_sale');
+  const [status, setStatus] = useState<ProjectStatus>('in_progress');
+  const [customerName, setCustomerName] = useState('');
+  const [customerContact, setCustomerContact] = useState('');
+  const [startDate, setStartDate] = useState(new Date().toISOString().split('T')[0]);
+  const [salePriceTarget, setSalePriceTarget] = useState<number>(180);
+  const [hourlyRateDefault, setHourlyRateDefault] = useState<number>(settings.defaultHourlyRate || 25);
+  const [consumablesEst, setConsumablesEst] = useState<number>(3.5);
+  const [packagingCost, setPackagingCost] = useState<number>(4.0);
+  const [shippingCost, setShippingCost] = useState<number>(0);
+  const [platformFeePercent, setPlatformFeePercent] = useState<number>(settings.defaultPlatformFeePercent || 0);
+  const [warrantyMonths, setWarrantyMonths] = useState<number>(6);
+  const [notes, setNotes] = useState('');
+  const [modsText, setModsText] = useState('');
+  const [targetDeadlineDate, setTargetDeadlineDate] = useState('');
+  const [targetProfitMin, setTargetProfitMin] = useState<string>('60');
+  const [targetLaborHoursMax, setTargetLaborHoursMax] = useState<string>('3.5');
+  const [seedPresetTasks, setSeedPresetTasks] = useState(true);
+
+  useEffect(() => {
+    if (editingProject) {
+      setTitle(editingProject.title);
+      setSerialNumber(editingProject.serialNumber);
+      setConsoleModel(editingProject.consoleModel);
+      setType(editingProject.type);
+      setStatus(editingProject.status);
+      setCustomerName(editingProject.customerName || '');
+      setCustomerContact(editingProject.customerContact || '');
+      setStartDate(editingProject.startDate);
+      setSalePriceTarget(editingProject.salePriceTarget || 0);
+      setHourlyRateDefault(editingProject.hourlyRateDefault || settings.defaultHourlyRate || 25);
+      setConsumablesEst(editingProject.additionalFees?.consumablesEst || 0);
+      setPackagingCost(editingProject.additionalFees?.packagingCost || 0);
+      setShippingCost(editingProject.additionalFees?.shippingCost || 0);
+      setPlatformFeePercent(editingProject.additionalFees?.platformFeePercent || 0);
+      setWarrantyMonths(editingProject.warrantyMonths || 6);
+      setNotes(editingProject.notes || '');
+      setModsText(editingProject.modsList ? editingProject.modsList.join('\n') : '');
+      setTargetDeadlineDate(editingProject.objectives?.targetDeadlineDate || '');
+      setTargetProfitMin(editingProject.objectives?.targetProfitMin?.toString() || '');
+      setTargetLaborHoursMax(editingProject.objectives?.targetLaborHoursMax?.toString() || '');
+      setSeedPresetTasks(false);
+    } else {
+      const year = new Date().getFullYear();
+      const randomId = Math.floor(100 + Math.random() * 900);
+      setTitle('');
+      setSerialNumber(`UWU-${year}-${randomId}`);
+      setConsoleModel('GBA SP');
+      setType('showcase_sale');
+      setStatus('in_progress');
+      setCustomerName('');
+      setCustomerContact('');
+      setStartDate(new Date().toISOString().split('T')[0]);
+      setSalePriceTarget(179);
+      setHourlyRateDefault(settings.defaultHourlyRate || 25);
+      setConsumablesEst(3.5);
+      setPackagingCost(4.0);
+      setShippingCost(0);
+      setPlatformFeePercent(settings.defaultPlatformFeePercent || 0);
+      setWarrantyMonths(6);
+      setNotes('');
+      setModsText('Écran IPS laminé rétroéclairé haute définition\nPort de charge USB-C\nBatterie LiPo haute autonomie\nCoque neuve de qualité supérieure');
+      
+      // Default target date in 14 days
+      const targetDate = new Date();
+      targetDate.setDate(targetDate.getDate() + 14);
+      setTargetDeadlineDate(targetDate.toISOString().split('T')[0]);
+      setTargetProfitMin('65');
+      setTargetLaborHoursMax('3.5');
+      setSeedPresetTasks(true);
+    }
+  }, [editingProject, isOpen, settings]);
+
+  if (!isOpen) return null;
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!title.trim()) return;
+
+    const parsedMods = modsText
+      .split('\n')
+      .map((m) => m.trim())
+      .filter(Boolean);
+
+    const initialPresetTasks = seedPresetTasks && !editingProject ? [
+      { id: 't1', title: 'Diagnostic donneuse & nettoyage ultrasons', isCompleted: false, category: 'diagnostic' as const },
+      { id: 't2', title: 'Pose & soudure écran IPS + câblage OSD', isCompleted: false, category: 'soudure' as const },
+      { id: 't3', title: 'Installation module USB-C & filtre audio', isCompleted: false, category: 'soudure' as const },
+      { id: 't4', title: 'Assemblage coque neuve & boutons', isCompleted: false, category: 'assemblage' as const },
+      { id: 't5', title: 'Contrôle qualité QC & test autonomie LiPo', isCompleted: false, category: 'test_qc' as const },
+      { id: 't6', title: 'Nettoyage microfibre & mise en boîte', isCompleted: false, category: 'packaging' as const },
+    ] : (editingProject?.tasks || []);
+
+    const projectData = {
+      title: title.trim(),
+      serialNumber: serialNumber.trim() || `UWU-${Date.now().toString().slice(-4)}`,
+      consoleModel,
+      type,
+      status,
+      customerName: customerName.trim() || undefined,
+      customerContact: customerContact.trim() || undefined,
+      startDate,
+      salePriceTarget: Number(salePriceTarget) || 0,
+      hourlyRateDefault: Number(hourlyRateDefault) || 25,
+      additionalFees: {
+        consumablesEst: Number(consumablesEst) || 0,
+        packagingCost: Number(packagingCost) || 0,
+        shippingCost: Number(shippingCost) || 0,
+        platformFeePercent: Number(platformFeePercent) || 0,
+        platformFeeFixed: editingProject?.additionalFees?.platformFeeFixed || 0,
+        otherFees: editingProject?.additionalFees?.otherFees || 0,
+      },
+      warrantyMonths: Number(warrantyMonths) || 6,
+      notes: notes.trim(),
+      modsList: parsedMods,
+      parts: editingProject?.parts || [],
+      timeSessions: editingProject?.timeSessions || [],
+      tasks: initialPresetTasks,
+      objectives: {
+        targetDeadlineDate: targetDeadlineDate || undefined,
+        targetProfitMin: targetProfitMin ? parseFloat(targetProfitMin) : undefined,
+        targetLaborHoursMax: targetLaborHoursMax ? parseFloat(targetLaborHoursMax) : undefined,
+      },
+    };
+
+    if (editingProject) {
+      updateProject(editingProject.id, projectData);
+    } else {
+      addProject(projectData);
+    }
+
+    onClose();
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/80 backdrop-blur-md overflow-y-auto no-print">
+      <div className="relative w-full max-w-2xl bg-slate-900 border border-purple-500/40 rounded-3xl shadow-2xl overflow-hidden my-8 animate-scaleUp">
+        
+        {/* Header */}
+        <div className="flex items-center justify-between px-6 py-5 border-b border-slate-800 bg-gradient-to-r from-purple-950/50 via-slate-900 to-pink-950/50">
+          <div className="flex items-center space-x-3">
+            <div className="w-10 h-10 rounded-xl bg-purple-500/20 border border-purple-500/40 flex items-center justify-center text-purple-300">
+              <Gamepad2 className="w-5 h-5" />
+            </div>
+            <div>
+              <h3 className="text-lg font-bold text-white">
+                {editingProject ? 'Modifier la Console / Projet' : 'Créer une Nouvelle Console Custom'}
+              </h3>
+              <p className="text-xs text-slate-400">
+                Centre de dépenses, nomenclature et rentabilité de build
+              </p>
+            </div>
+          </div>
+          <button
+            onClick={onClose}
+            className="text-slate-400 hover:text-white p-2 rounded-xl hover:bg-slate-800 transition-colors"
+          >
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+
+        {/* Form */}
+        <form onSubmit={handleSubmit} className="p-6 space-y-6">
+          
+          {/* Row 1: Title & Serial */}
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <div className="md:col-span-2 space-y-1.5">
+              <label className="text-xs font-semibold text-slate-300">
+                Titre / Nom du Projet *
+              </label>
+              <input
+                type="text"
+                required
+                value={title}
+                onChange={(e) => setTitle(e.target.value)}
+                placeholder="Ex: GBA SP Cyberpunk Neon IPS V3 & USB-C"
+                className="w-full px-3.5 py-2.5 rounded-xl bg-slate-950 border border-slate-700 text-white text-sm focus:outline-none focus:border-purple-500 placeholder-slate-500"
+              />
+            </div>
+
+            <div className="space-y-1.5">
+              <label className="text-xs font-semibold text-slate-300 flex items-center space-x-1">
+                <Tag className="w-3.5 h-3.5 text-purple-400" />
+                <span>N° de Série Unique</span>
+              </label>
+              <input
+                type="text"
+                value={serialNumber}
+                onChange={(e) => setSerialNumber(e.target.value)}
+                className="w-full px-3.5 py-2.5 rounded-xl bg-slate-950 border border-slate-700 text-white font-mono text-sm focus:outline-none focus:border-purple-500"
+              />
+            </div>
+          </div>
+
+          {/* Row 2: Console Model, Type & Status */}
+          <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+            <div className="space-y-1.5">
+              <label className="text-xs font-semibold text-slate-300">
+                Modèle de Console *
+              </label>
+              <select
+                value={consoleModel}
+                onChange={(e) => setConsoleModel(e.target.value as ConsoleModel)}
+                className="w-full px-3.5 py-2.5 rounded-xl bg-slate-950 border border-slate-700 text-white text-sm focus:outline-none focus:border-purple-500"
+              >
+                {consoleModels.map((m) => (
+                  <option key={m.id} value={m.slug}>
+                    {m.name}
+                  </option>
+                ))}
+              </select>
+            </div>
+
+            <div className="space-y-1.5">
+              <label className="text-xs font-semibold text-slate-300">
+                Type de Projet
+              </label>
+              <select
+                value={type}
+                onChange={(e) => setType(e.target.value as ProjectType)}
+                className="w-full px-3.5 py-2.5 rounded-xl bg-slate-950 border border-slate-700 text-white text-sm focus:outline-none focus:border-purple-500"
+              >
+                <option value="showcase_sale">Création pour Vente / Vitrine</option>
+                <option value="client_custom">Commande sur mesure Client</option>
+                <option value="repair_mod_only">Modding console fournie client</option>
+                <option value="personal_collection">Collection Personnelle</option>
+              </select>
+            </div>
+
+            <div className="space-y-1.5">
+              <label className="text-xs font-semibold text-slate-300">
+                Statut initial
+              </label>
+              <select
+                value={status}
+                onChange={(e) => setStatus(e.target.value as ProjectStatus)}
+                className="w-full px-3.5 py-2.5 rounded-xl bg-slate-950 border border-slate-700 text-white text-sm focus:outline-none focus:border-purple-500"
+              >
+                <option value="draft">Brouillon / En projet</option>
+                <option value="in_progress">En cours de modding</option>
+                <option value="qc_testing">Tests & Contrôle Qualité</option>
+                <option value="in_stock_ready">En Stock / Prête à vendre</option>
+                <option value="reserved">Réservée</option>
+                <option value="sold">Déjà Vendue</option>
+              </select>
+            </div>
+          </div>
+
+          {/* Row 3: Target Sale Price, Hourly Rate & Date */}
+          <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+            <div className="space-y-1.5">
+              <label className="text-xs font-semibold text-slate-300 flex items-center space-x-1">
+                <DollarSign className="w-3.5 h-3.5 text-pink-400" />
+                <span>Prix de Vente Cible ({settings.currency}) *</span>
+              </label>
+              <input
+                type="number"
+                step="0.01"
+                value={salePriceTarget}
+                onChange={(e) => setSalePriceTarget(parseFloat(e.target.value) || 0)}
+                className="w-full px-3.5 py-2.5 rounded-xl bg-slate-950 border border-slate-700 text-white font-mono font-bold text-sm focus:outline-none focus:border-purple-500"
+              />
+            </div>
+
+            <div className="space-y-1.5">
+              <label className="text-xs font-semibold text-slate-300 flex items-center space-x-1">
+                <Wrench className="w-3.5 h-3.5 text-amber-400" />
+                <span>Taux Horaire Main d'Œuvre ({settings.currency}/h)</span>
+              </label>
+              <input
+                type="number"
+                step="0.5"
+                value={hourlyRateDefault}
+                onChange={(e) => setHourlyRateDefault(parseFloat(e.target.value) || 25)}
+                className="w-full px-3.5 py-2.5 rounded-xl bg-slate-950 border border-slate-700 text-white font-mono text-sm focus:outline-none focus:border-purple-500"
+              />
+            </div>
+
+            <div className="space-y-1.5">
+              <label className="text-xs font-semibold text-slate-300 flex items-center space-x-1">
+                <Calendar className="w-3.5 h-3.5 text-purple-400" />
+                <span>Date de début</span>
+              </label>
+              <input
+                type="date"
+                value={startDate}
+                onChange={(e) => setStartDate(e.target.value)}
+                className="w-full px-3.5 py-2.5 rounded-xl bg-slate-950 border border-slate-700 text-white text-sm focus:outline-none focus:border-purple-500"
+              />
+            </div>
+          </div>
+
+          {/* Section: Objectifs & Délais Cibles */}
+          <div className="p-4 rounded-2xl bg-gradient-to-br from-pink-950/20 to-purple-950/20 border border-pink-500/30 space-y-3">
+            <div className="flex items-center justify-between">
+              <span className="text-xs font-bold uppercase tracking-wider text-pink-300 flex items-center space-x-1.5">
+                <Sparkles className="w-3.5 h-3.5 text-pink-400" />
+                <span>Objectifs de Rentabilité & Échéancier</span>
+              </span>
+              <span className="text-[11px] text-slate-400 font-mono">Suivi automatique</span>
+            </div>
+
+            <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
+              <div className="space-y-1">
+                <label className="text-xs text-slate-300">
+                  📅 Échéance Cible (Date)
+                </label>
+                <input
+                  type="date"
+                  value={targetDeadlineDate}
+                  onChange={(e) => setTargetDeadlineDate(e.target.value)}
+                  className="w-full px-3 py-2 rounded-xl bg-slate-950 border border-slate-800 text-white text-xs font-mono focus:border-pink-500"
+                />
+              </div>
+
+              <div className="space-y-1">
+                <label className="text-xs text-slate-300">
+                  💰 Objectif Gain Net (€)
+                </label>
+                <input
+                  type="number"
+                  step="1"
+                  value={targetProfitMin}
+                  onChange={(e) => setTargetProfitMin(e.target.value)}
+                  placeholder="ex: 65"
+                  className="w-full px-3 py-2 rounded-xl bg-slate-950 border border-slate-800 text-white text-xs font-mono focus:border-pink-500"
+                />
+              </div>
+
+              <div className="space-y-1">
+                <label className="text-xs text-slate-300">
+                  ⏱️ Temps Atelier Max (Heures)
+                </label>
+                <input
+                  type="number"
+                  step="0.5"
+                  value={targetLaborHoursMax}
+                  onChange={(e) => setTargetLaborHoursMax(e.target.value)}
+                  placeholder="ex: 3.5"
+                  className="w-full px-3 py-2 rounded-xl bg-slate-950 border border-slate-800 text-white text-xs font-mono focus:border-pink-500"
+                />
+              </div>
+            </div>
+
+            {!editingProject && (
+              <label className="flex items-center space-x-2 pt-1 cursor-pointer">
+                <input
+                  type="checkbox"
+                  checked={seedPresetTasks}
+                  onChange={(e) => setSeedPresetTasks(e.target.checked)}
+                  className="rounded border-slate-700 text-pink-500 focus:ring-pink-500 bg-slate-950"
+                />
+                <span className="text-xs text-slate-300">
+                  Générer automatiquement la checklist standard (Diagnostic, Soudure IPS/USB-C, QC, Packaging)
+                </span>
+              </label>
+            )}
+          </div>
+
+          {/* Row 4: Customer Details (if applicable) */}
+          {(type === 'client_custom' || type === 'repair_mod_only') && (
+            <div className="p-4 rounded-2xl bg-purple-500/10 border border-purple-500/30 grid grid-cols-1 sm:grid-cols-2 gap-4">
+              <div className="space-y-1.5">
+                <label className="text-xs font-semibold text-purple-300 flex items-center space-x-1">
+                  <User className="w-3.5 h-3.5" />
+                  <span>Nom du Client</span>
+                </label>
+                <input
+                  type="text"
+                  value={customerName}
+                  onChange={(e) => setCustomerName(e.target.value)}
+                  placeholder="Ex: Thomas L."
+                  className="w-full px-3.5 py-2 rounded-xl bg-slate-950 border border-purple-500/30 text-white text-sm"
+                />
+              </div>
+
+              <div className="space-y-1.5">
+                <label className="text-xs font-semibold text-purple-300">
+                  Contact / Email / Instagram
+                </label>
+                <input
+                  type="text"
+                  value={customerContact}
+                  onChange={(e) => setCustomerContact(e.target.value)}
+                  placeholder="Ex: @thomas.gaming / contact@email.com"
+                  className="w-full px-3.5 py-2 rounded-xl bg-slate-950 border border-purple-500/30 text-white text-sm"
+                />
+              </div>
+            </div>
+          )}
+
+          {/* Additional Fees Estimator Box */}
+          <div className="p-4 rounded-2xl bg-slate-950 border border-slate-800 space-y-3">
+            <div className="text-xs font-bold uppercase tracking-wider text-slate-400">
+              Frais Annexes & Consommables Estimés
+            </div>
+            <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
+              <div className="space-y-1">
+                <label className="text-[11px] text-slate-300">
+                  Consommables (Étain, IPA)
+                </label>
+                <input
+                  type="number"
+                  step="0.1"
+                  value={consumablesEst}
+                  onChange={(e) => setConsumablesEst(parseFloat(e.target.value) || 0)}
+                  className="w-full px-2.5 py-1.5 rounded-lg bg-slate-900 border border-slate-700 text-white text-xs font-mono"
+                />
+              </div>
+              <div className="space-y-1">
+                <label className="text-[11px] text-slate-300">
+                  Packaging / Boîte
+                </label>
+                <input
+                  type="number"
+                  step="0.1"
+                  value={packagingCost}
+                  onChange={(e) => setPackagingCost(parseFloat(e.target.value) || 0)}
+                  className="w-full px-2.5 py-1.5 rounded-lg bg-slate-900 border border-slate-700 text-white text-xs font-mono"
+                />
+              </div>
+              <div className="space-y-1">
+                <label className="text-[11px] text-slate-300">
+                  Frais d'envoi client
+                </label>
+                <input
+                  type="number"
+                  step="0.1"
+                  value={shippingCost}
+                  onChange={(e) => setShippingCost(parseFloat(e.target.value) || 0)}
+                  className="w-full px-2.5 py-1.5 rounded-lg bg-slate-900 border border-slate-700 text-white text-xs font-mono"
+                />
+              </div>
+              <div className="space-y-1">
+                <label className="text-[11px] text-slate-300">
+                  % Plateforme (Etsy/Vinted)
+                </label>
+                <input
+                  type="number"
+                  step="0.5"
+                  value={platformFeePercent}
+                  onChange={(e) => setPlatformFeePercent(parseFloat(e.target.value) || 0)}
+                  className="w-full px-2.5 py-1.5 rounded-lg bg-slate-900 border border-slate-700 text-white text-xs font-mono"
+                />
+              </div>
+            </div>
+          </div>
+
+          {/* Installed Mods list (with quick pick from Mod Catalogue) */}
+          <div className="space-y-2">
+            <div className="flex items-center justify-between">
+              <label className="text-xs font-semibold text-slate-300 flex items-center space-x-1">
+                <Sparkles className="w-3.5 h-3.5 text-pink-400" />
+                <span>Liste des Mods Installés (pour certificat & étiquettes)</span>
+              </label>
+              <span className="text-[11px] text-slate-400">
+                Cliquez sur un mod ci-dessous pour l'ajouter/retirer
+              </span>
+            </div>
+
+            {/* Compatible mods quick chips */}
+            {modsLibrary.length > 0 && (
+              <div className="p-2.5 bg-slate-950/80 border border-slate-800 rounded-xl space-y-1.5">
+                <div className="text-[10px] font-bold text-pink-400 uppercase tracking-wider flex items-center gap-1">
+                  <Sparkles className="w-3 h-3" /> Mods Disponibles dans le Catalogue pour {consoleModel} :
+                </div>
+                <div className="flex flex-wrap gap-1.5 max-h-28 overflow-y-auto">
+                  {modsLibrary
+                    .filter(
+                      (m) =>
+                        m.compatibleModels?.includes(consoleModel) ||
+                        m.compatibleModels?.includes('Autre / Custom') ||
+                        !m.compatibleModels ||
+                        m.compatibleModels.length === 0
+                    )
+                    .map((mod) => {
+                      const isIncluded = modsText.includes(mod.name);
+                      return (
+                        <button
+                          key={mod.id}
+                          type="button"
+                          onClick={() => {
+                            if (isIncluded) {
+                              // remove
+                              const lines = modsText.split('\n').filter((l) => l.trim() !== mod.name);
+                              setModsText(lines.join('\n'));
+                            } else {
+                              // add
+                              const lines = modsText ? modsText.split('\n').filter(Boolean) : [];
+                              setModsText([...lines, mod.name].join('\n'));
+                            }
+                          }}
+                          className={`px-2.5 py-1 rounded-lg text-xs font-medium transition-all flex items-center gap-1 ${
+                            isIncluded
+                              ? 'bg-pink-500 text-white shadow-sm shadow-pink-500/30'
+                              : 'bg-slate-900 text-slate-300 hover:bg-slate-800 border border-slate-700'
+                          }`}
+                        >
+                          <span>{isIncluded ? '✓' : '+'}</span>
+                          <span className="truncate max-w-[200px]">{mod.name}</span>
+                          <span className="text-[10px] opacity-70 font-mono">+{mod.suggestedAddedValue}€</span>
+                        </button>
+                      );
+                    })}
+                </div>
+              </div>
+            )}
+
+            <textarea
+              rows={3}
+              value={modsText}
+              onChange={(e) => setModsText(e.target.value)}
+              placeholder="Écran IPS V3 Drop-in Laminé&#10;Port de charge USB-C Pro&#10;Batterie LiPo 950mAh Makho"
+              className="w-full px-3.5 py-2.5 rounded-xl bg-slate-950 border border-slate-700 text-white placeholder-slate-500 text-xs focus:outline-none focus:border-pink-500"
+            />
+          </div>
+
+          {/* Notes */}
+          <div className="space-y-1.5">
+            <label className="text-xs font-semibold text-slate-300 flex items-center space-x-1">
+              <FileText className="w-3.5 h-3.5 text-purple-400" />
+              <span>Notes de fabrication & Spécificités</span>
+            </label>
+            <textarea
+              rows={2}
+              value={notes}
+              onChange={(e) => setNotes(e.target.value)}
+              placeholder="Remarques particulières, soudure délicate, calibrage écran..."
+              className="w-full px-3.5 py-2.5 rounded-xl bg-slate-950 border border-slate-700 text-white placeholder-slate-500 text-xs focus:outline-none focus:border-purple-500"
+            />
+          </div>
+
+          {/* Footer */}
+          <div className="flex items-center justify-end space-x-3 pt-4 border-t border-slate-800">
+            <button
+              type="button"
+              onClick={onClose}
+              className="px-4 py-2.5 rounded-xl bg-slate-800 text-slate-300 hover:text-white text-xs font-semibold"
+            >
+              Annuler
+            </button>
+            <button
+              type="submit"
+              className="px-5 py-2.5 rounded-xl bg-gradient-to-r from-purple-500 to-pink-600 text-white font-bold text-sm shadow-lg shadow-purple-500/20 hover:scale-[1.02] active:scale-[0.98] transition-all"
+            >
+              {editingProject ? 'Enregistrer les modifications' : 'Créer le projet'}
+            </button>
+          </div>
+
+        </form>
+
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/projects/ProjectObjectivesCard.tsx b/src/components/projects/ProjectObjectivesCard.tsx
new file mode 100644
index 0000000..1e6d07a
--- /dev/null
+++ b/src/components/projects/ProjectObjectivesCard.tsx
@@ -0,0 +1,278 @@
+import React, { useState } from 'react';
+import {
+  Target,
+  Calendar,
+  DollarSign,
+  Clock,
+  Percent,
+  CheckCircle,
+  AlertCircle,
+  Edit2,
+  Save,
+  X,
+} from 'lucide-react';
+import { useApp } from '../../context/AppContext';
+import type { Project, ProjectObjectives } from '../../types';
+import { calculateProjectFinancials, formatCurrency } from '../../utils/calculations';
+
+interface ProjectObjectivesCardProps {
+  project: Project;
+}
+
+export const ProjectObjectivesCard: React.FC<ProjectObjectivesCardProps> = ({ project }) => {
+  const { updateProjectObjectives } = useApp();
+  const [isEditing, setIsEditing] = useState(false);
+
+  const objectives = project.objectives || {};
+  const financials = calculateProjectFinancials(project);
+
+  const [formDeadline, setFormDeadline] = useState(objectives.targetDeadlineDate || '');
+  const [formProfit, setFormProfit] = useState(objectives.targetProfitMin?.toString() || '');
+  const [formLaborHours, setFormLaborHours] = useState(objectives.targetLaborHoursMax?.toString() || '');
+  const [formMargin, setFormMargin] = useState(objectives.targetMarginPercentMin?.toString() || '');
+
+  const handleSave = () => {
+    const updated: Partial<ProjectObjectives> = {
+      targetDeadlineDate: formDeadline || undefined,
+      targetProfitMin: formProfit ? parseFloat(formProfit) : undefined,
+      targetLaborHoursMax: formLaborHours ? parseFloat(formLaborHours) : undefined,
+      targetMarginPercentMin: formMargin ? parseFloat(formMargin) : undefined,
+    };
+    updateProjectObjectives(project.id, updated);
+    setIsEditing(false);
+  };
+
+  // Calculations for objectives attainment
+  const actualLaborHours = financials.laborMinutes / 60;
+  const isProfitAchieved = objectives.targetProfitMin !== undefined
+    ? financials.netProfit >= objectives.targetProfitMin
+    : true;
+
+  const isLaborOnTrack = objectives.targetLaborHoursMax !== undefined
+    ? actualLaborHours <= objectives.targetLaborHoursMax
+    : true;
+
+  const isMarginAchieved = objectives.targetMarginPercentMin !== undefined
+    ? financials.marginPercent >= objectives.targetMarginPercentMin
+    : true;
+
+  // Deadline countdown
+  let deadlineStatusText = '';
+  let deadlineBadgeColor = 'text-slate-400 bg-slate-800/60';
+  if (objectives.targetDeadlineDate) {
+    const targetDate = new Date(objectives.targetDeadlineDate);
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+    const diffDays = Math.ceil((targetDate.getTime() - today.getTime()) / (1000 * 3600 * 24));
+
+    if (project.status === 'sold' || project.status === 'in_stock_ready') {
+      deadlineStatusText = 'Terminé dans les temps ✅';
+      deadlineBadgeColor = 'text-emerald-300 bg-emerald-500/20 border-emerald-500/40';
+    } else if (diffDays < 0) {
+      deadlineStatusText = `En retard de ${Math.abs(diffDays)} j ⚠️`;
+      deadlineBadgeColor = 'text-rose-300 bg-rose-500/20 border-rose-500/40';
+    } else if (diffDays === 0) {
+      deadlineStatusText = "Aujourd'hui ! 🚨";
+      deadlineBadgeColor = 'text-amber-300 bg-amber-500/20 border-amber-500/40';
+    } else {
+      deadlineStatusText = `J-${diffDays} (dans ${diffDays} j)`;
+      deadlineBadgeColor = 'text-cyan-300 bg-cyan-500/20 border-cyan-500/40';
+    }
+  }
+
+  return (
+    <div className="p-5 rounded-2xl bg-gradient-to-br from-slate-900/90 to-slate-950 border border-slate-800 shadow-xl space-y-4">
+      <div className="flex items-center justify-between pb-3 border-b border-slate-800">
+        <div className="flex items-center space-x-2.5">
+          <div className="p-2 rounded-xl bg-pink-500/10 border border-pink-500/30 text-pink-400">
+            <Target className="w-5 h-5" />
+          </div>
+          <div>
+            <h3 className="font-bold text-white text-base">Objectifs & Jalons du Projet</h3>
+            <p className="text-xs text-slate-400">
+              Cibles financières, délais et temps de travail
+            </p>
+          </div>
+        </div>
+
+        <div>
+          {!isEditing ? (
+            <button
+              onClick={() => setIsEditing(true)}
+              className="flex items-center space-x-1.5 px-3 py-1.5 rounded-xl text-xs font-semibold bg-slate-900 text-slate-300 border border-slate-800 hover:text-white hover:border-pink-500/40 transition-all"
+            >
+              <Edit2 className="w-3.5 h-3.5 text-pink-400" />
+              <span>Ajuster Objectifs</span>
+            </button>
+          ) : (
+            <div className="flex items-center space-x-2">
+              <button
+                onClick={handleSave}
+                className="flex items-center space-x-1 px-3 py-1.5 rounded-xl text-xs font-bold bg-pink-600 hover:bg-pink-500 text-white transition-all shadow-md"
+              >
+                <Save className="w-3.5 h-3.5" />
+                <span>Enregistrer</span>
+              </button>
+              <button
+                onClick={() => setIsEditing(false)}
+                className="p-1.5 rounded-xl bg-slate-800 text-slate-400 hover:text-white"
+              >
+                <X className="w-4 h-4" />
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Edit Form Mode */}
+      {isEditing ? (
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 pt-1">
+          <div>
+            <label className="block text-xs font-medium text-slate-400 mb-1">
+              📅 Échéance Cible (Date)
+            </label>
+            <input
+              type="date"
+              value={formDeadline}
+              onChange={(e) => setFormDeadline(e.target.value)}
+              className="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-pink-500 font-mono"
+            />
+          </div>
+
+          <div>
+            <label className="block text-xs font-medium text-slate-400 mb-1">
+              💰 Objectif Gain Net (€)
+            </label>
+            <input
+              type="number"
+              step="1"
+              value={formProfit}
+              onChange={(e) => setFormProfit(e.target.value)}
+              placeholder="ex: 60"
+              className="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-pink-500 font-mono"
+            />
+          </div>
+
+          <div>
+            <label className="block text-xs font-medium text-slate-400 mb-1">
+              ⏱️ Temps Atelier Max (Heures)
+            </label>
+            <input
+              type="number"
+              step="0.5"
+              value={formLaborHours}
+              onChange={(e) => setFormLaborHours(e.target.value)}
+              placeholder="ex: 3.5"
+              className="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-pink-500 font-mono"
+            />
+          </div>
+
+          <div>
+            <label className="block text-xs font-medium text-slate-400 mb-1">
+              📊 Objectif Marge Min (%)
+            </label>
+            <input
+              type="number"
+              step="5"
+              value={formMargin}
+              onChange={(e) => setFormMargin(e.target.value)}
+              placeholder="ex: 35"
+              className="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-pink-500 font-mono"
+            />
+          </div>
+        </div>
+      ) : (
+        /* Objectives Overview Cards */
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3.5">
+          {/* 1. Target Deadline */}
+          <div className="p-3.5 rounded-xl bg-slate-950/70 border border-slate-800/80 flex flex-col justify-between">
+            <div className="flex items-center justify-between text-xs text-slate-400 mb-1.5">
+              <span className="flex items-center space-x-1.5">
+                <Calendar className="w-3.5 h-3.5 text-cyan-400" />
+                <span>Date d'Échéance</span>
+              </span>
+              {objectives.targetDeadlineDate && (
+                <span className={`px-2 py-0.5 rounded-full text-[10px] font-bold border ${deadlineBadgeColor}`}>
+                  {deadlineStatusText}
+                </span>
+              )}
+            </div>
+            <div className="font-mono text-base font-black text-white">
+              {objectives.targetDeadlineDate || 'Non définie'}
+            </div>
+          </div>
+
+          {/* 2. Target Profit */}
+          <div className="p-3.5 rounded-xl bg-slate-950/70 border border-slate-800/80 flex flex-col justify-between">
+            <div className="flex items-center justify-between text-xs text-slate-400 mb-1.5">
+              <span className="flex items-center space-x-1.5">
+                <DollarSign className="w-3.5 h-3.5 text-pink-400" />
+                <span>Objectif Gain Net</span>
+              </span>
+              {objectives.targetProfitMin && (
+                <span className={`flex items-center space-x-1 text-[11px] font-bold ${isProfitAchieved ? 'text-emerald-400' : 'text-amber-400'}`}>
+                  {isProfitAchieved ? <CheckCircle className="w-3 h-3" /> : <AlertCircle className="w-3 h-3" />}
+                  <span>{isProfitAchieved ? 'Atteint' : 'En cours'}</span>
+                </span>
+              )}
+            </div>
+            <div className="flex items-baseline space-x-2">
+              <span className="font-mono text-base font-black text-pink-400">
+                {objectives.targetProfitMin ? formatCurrency(objectives.targetProfitMin) : '—'}
+              </span>
+              <span className="text-xs text-slate-500 font-mono">
+                (Actuel: {formatCurrency(financials.netProfit)})
+              </span>
+            </div>
+          </div>
+
+          {/* 3. Target Labor Hours */}
+          <div className="p-3.5 rounded-xl bg-slate-950/70 border border-slate-800/80 flex flex-col justify-between">
+            <div className="flex items-center justify-between text-xs text-slate-400 mb-1.5">
+              <span className="flex items-center space-x-1.5">
+                <Clock className="w-3.5 h-3.5 text-amber-400" />
+                <span>Plafond Temps Atelier</span>
+              </span>
+              {objectives.targetLaborHoursMax && (
+                <span className={`text-[11px] font-bold ${isLaborOnTrack ? 'text-emerald-400' : 'text-rose-400'}`}>
+                  {isLaborOnTrack ? 'Dans les temps' : 'Dépassement'}
+                </span>
+              )}
+            </div>
+            <div className="flex items-baseline space-x-2">
+              <span className="font-mono text-base font-black text-amber-400">
+                {objectives.targetLaborHoursMax ? `${objectives.targetLaborHoursMax}h max` : '—'}
+              </span>
+              <span className="text-xs text-slate-500 font-mono">
+                (Passé: {actualLaborHours.toFixed(1)}h)
+              </span>
+            </div>
+          </div>
+
+          {/* 4. Target Margin % */}
+          <div className="p-3.5 rounded-xl bg-slate-950/70 border border-slate-800/80 flex flex-col justify-between">
+            <div className="flex items-center justify-between text-xs text-slate-400 mb-1.5">
+              <span className="flex items-center space-x-1.5">
+                <Percent className="w-3.5 h-3.5 text-emerald-400" />
+                <span>Objectif Marge Nette</span>
+              </span>
+              {objectives.targetMarginPercentMin && (
+                <span className={`text-[11px] font-bold ${isMarginAchieved ? 'text-emerald-400' : 'text-amber-400'}`}>
+                  {isMarginAchieved ? 'Atteint' : 'En dessous'}
+                </span>
+              )}
+            </div>
+            <div className="flex items-baseline space-x-2">
+              <span className="font-mono text-base font-black text-emerald-400">
+                {objectives.targetMarginPercentMin ? `${objectives.targetMarginPercentMin}%` : '—'}
+              </span>
+              <span className="text-xs text-slate-500 font-mono">
+                (Actuel: {financials.marginPercent.toFixed(1)}%)
+              </span>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/src/components/projects/ProjectTasksChecklist.tsx b/src/components/projects/ProjectTasksChecklist.tsx
new file mode 100644
index 0000000..15385f0
--- /dev/null
+++ b/src/components/projects/ProjectTasksChecklist.tsx
@@ -0,0 +1,313 @@
+import React, { useState } from 'react';
+import {
+  CheckCircle2,
+  Circle,
+  Plus,
+  Trash2,
+  ListTodo,
+  Calendar,
+  Sparkles,
+} from 'lucide-react';
+import { useApp } from '../../context/AppContext';
+import type { Project, ProjectTask } from '../../types';
+
+interface ProjectTasksChecklistProps {
+  project: Project;
+  compact?: boolean;
+}
+
+export const ProjectTasksChecklist: React.FC<ProjectTasksChecklistProps> = ({
+  project,
+  compact = false,
+}) => {
+  const { toggleProjectTask, addProjectTask, deleteProjectTask } = useApp();
+  const [newTitle, setNewTitle] = useState('');
+  const [newCategory, setNewCategory] = useState<ProjectTask['category']>('soudure');
+  const [newDueDate, setNewDueDate] = useState('');
+
+  const tasks = project.tasks || [];
+  const completedCount = tasks.filter((t) => t.isCompleted).length;
+  const totalCount = tasks.length;
+  const progressPercent = totalCount > 0 ? Math.round((completedCount / totalCount) * 100) : 0;
+
+  const handleAddTask = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!newTitle.trim()) return;
+
+    addProjectTask(project.id, {
+      title: newTitle.trim(),
+      isCompleted: false,
+      category: newCategory,
+      dueDate: newDueDate || undefined,
+    });
+
+    setNewTitle('');
+    setNewDueDate('');
+  };
+
+  // Quick preset tasks templates
+  const addPresetTasks = (presetType: 'ips_mod' | 'cleaning' | 'audio_mod') => {
+    const presets: Record<string, Omit<ProjectTask, 'id'>[]> = {
+      ips_mod: [
+        { title: 'Diagnostic initial & test boot donneuse', isCompleted: false, category: 'diagnostic' },
+        { title: 'Démontage & nettoyage ultrasons carte mère', isCompleted: false, category: 'nettoyage' },
+        { title: 'Découpe & ajustement coque pour écran IPS', isCompleted: false, category: 'assemblage' },
+        { title: 'Soudure des fils OSD (L, R, Select)', isCompleted: false, category: 'soudure' },
+        { title: 'Test d\'allumage & centrage de la vitre', isCompleted: false, category: 'test_qc' },
+        { title: 'Test batterie & calibration charge', isCompleted: false, category: 'test_qc' },
+        { title: 'Nettoyage final & mise en boîte kraft', isCompleted: false, category: 'packaging' },
+      ],
+      cleaning: [
+        { title: 'Démontage complet vis tri-wing', isCompleted: false, category: 'diagnostic' },
+        { title: 'Bain IPA ultrasons contacts boutons et switch', isCompleted: false, category: 'nettoyage' },
+        { title: 'Remplacement des condensateurs (Cap Kit)', isCompleted: false, category: 'soudure' },
+        { title: 'Remontage & test audio / vidéo', isCompleted: false, category: 'test_qc' },
+      ],
+      audio_mod: [
+        { title: 'Dessoudage de l\'ancien haut-parleur', isCompleted: false, category: 'soudure' },
+        { title: 'Pose de l\'amplificateur audio CleanAmp Pro', isCompleted: false, category: 'soudure' },
+        { title: 'Câblage haut-parleur 2W néodyme', isCompleted: false, category: 'assemblage' },
+        { title: 'Test absence de parasites et souffle', isCompleted: false, category: 'test_qc' },
+      ],
+    };
+
+    const toAdd = presets[presetType];
+    if (toAdd) {
+      toAdd.forEach((t) => addProjectTask(project.id, t));
+    }
+  };
+
+  if (compact) {
+    return (
+      <div className="space-y-2">
+        <div className="flex items-center justify-between text-xs">
+          <div className="flex items-center space-x-1.5 text-slate-300 font-medium">
+            <ListTodo className="w-3.5 h-3.5 text-purple-400" />
+            <span>Checklist Tâches :</span>
+          </div>
+          <span className="font-mono text-xs font-bold text-purple-300">
+            {completedCount}/{totalCount} ({progressPercent}%)
+          </span>
+        </div>
+
+        {/* Mini progress bar */}
+        <div className="w-full h-1.5 bg-slate-800 rounded-full overflow-hidden">
+          <div
+            className="h-full bg-gradient-to-r from-pink-500 to-purple-500 transition-all duration-300"
+            style={{ width: `${progressPercent}%` }}
+          />
+        </div>
+
+        {/* Task list compact */}
+        <div className="space-y-1.5 max-h-40 overflow-y-auto pr-1 custom-scrollbar">
+          {tasks.map((task) => (
+            <div
+              key={task.id}
+              onClick={(e) => {
+                e.stopPropagation();
+                toggleProjectTask(project.id, task.id);
+              }}
+              className="flex items-center justify-between p-1.5 rounded-lg bg-slate-900/60 hover:bg-slate-800/80 cursor-pointer text-xs group transition-colors"
+            >
+              <div className="flex items-center space-x-2 min-w-0">
+                {task.isCompleted ? (
+                  <CheckCircle2 className="w-3.5 h-3.5 text-emerald-400 shrink-0" />
+                ) : (
+                  <Circle className="w-3.5 h-3.5 text-slate-500 shrink-0 group-hover:text-purple-400" />
+                )}
+                <span
+                  className={`truncate ${
+                    task.isCompleted
+                      ? 'line-through text-slate-500'
+                      : 'text-slate-300'
+                  }`}
+                >
+                  {task.title}
+                </span>
+              </div>
+              {task.dueDate && (
+                <span className="text-[10px] text-slate-500 shrink-0 font-mono">
+                  {task.dueDate}
+                </span>
+              )}
+            </div>
+          ))}
+          {tasks.length === 0 && (
+            <div className="text-[11px] text-slate-500 italic py-1">
+              Aucune tâche définie.
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-5 rounded-2xl bg-slate-900/60 border border-slate-800 backdrop-blur-md space-y-4">
+      {/* Header with progress */}
+      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 pb-3 border-b border-slate-800">
+        <div className="flex items-center space-x-2.5">
+          <div className="p-2 rounded-xl bg-purple-500/10 border border-purple-500/30 text-purple-400">
+            <ListTodo className="w-5 h-5" />
+          </div>
+          <div>
+            <h3 className="font-bold text-white text-base">Checklist & Tâches Atelier</h3>
+            <p className="text-xs text-slate-400">
+              Suivi étape par étape de la customisation
+            </p>
+          </div>
+        </div>
+
+        <div className="flex items-center space-x-3">
+          <div className="text-right">
+            <div className="text-xs text-slate-400">Progression</div>
+            <div className="text-sm font-black font-mono text-purple-300">
+              {completedCount} / {totalCount} terminées ({progressPercent}%)
+            </div>
+          </div>
+          <div className="w-24 h-2 bg-slate-800 rounded-full overflow-hidden">
+            <div
+              className="h-full bg-gradient-to-r from-pink-500 to-purple-500 transition-all duration-500"
+              style={{ width: `${progressPercent}%` }}
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* Preset Generators if empty */}
+      {tasks.length === 0 && (
+        <div className="p-4 rounded-xl bg-slate-950/70 border border-purple-500/20 text-center space-y-2.5">
+          <p className="text-xs text-slate-300">
+            Gagnez du temps avec un modèle de tâches prédéfini :
+          </p>
+          <div className="flex flex-wrap items-center justify-center gap-2">
+            <button
+              type="button"
+              onClick={() => addPresetTasks('ips_mod')}
+              className="flex items-center space-x-1.5 px-3 py-1.5 rounded-lg text-xs font-semibold bg-purple-500/20 text-purple-300 border border-purple-500/40 hover:bg-purple-500/30 transition-all"
+            >
+              <Sparkles className="w-3.5 h-3.5 text-purple-400" />
+              <span>+ Pack Mod IPS & USB-C</span>
+            </button>
+            <button
+              type="button"
+              onClick={() => addPresetTasks('cleaning')}
+              className="flex items-center space-x-1.5 px-3 py-1.5 rounded-lg text-xs font-semibold bg-cyan-500/20 text-cyan-300 border border-cyan-500/40 hover:bg-cyan-500/30 transition-all"
+            >
+              <Sparkles className="w-3.5 h-3.5 text-cyan-400" />
+              <span>+ Pack Restauration & CapKit</span>
+            </button>
+            <button
+              type="button"
+              onClick={() => addPresetTasks('audio_mod')}
+              className="flex items-center space-x-1.5 px-3 py-1.5 rounded-lg text-xs font-semibold bg-pink-500/20 text-pink-300 border border-pink-500/40 hover:bg-pink-500/30 transition-all"
+            >
+              <Sparkles className="w-3.5 h-3.5 text-pink-400" />
+              <span>+ Pack Mod Audio Amp</span>
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Task List */}
+      <div className="space-y-2">
+        {tasks.map((task) => (
+          <div
+            key={task.id}
+            className={`flex items-center justify-between p-3 rounded-xl border transition-all duration-200 group ${
+              task.isCompleted
+                ? 'bg-slate-950/40 border-slate-850/60 opacity-80'
+                : 'bg-slate-950/80 border-slate-800 hover:border-purple-500/40'
+            }`}
+          >
+            <div
+              onClick={() => toggleProjectTask(project.id, task.id)}
+              className="flex items-center space-x-3 cursor-pointer flex-1 min-w-0"
+            >
+              {task.isCompleted ? (
+                <CheckCircle2 className="w-5 h-5 text-emerald-400 shrink-0 transition-transform group-hover:scale-110" />
+              ) : (
+                <Circle className="w-5 h-5 text-slate-500 shrink-0 group-hover:text-purple-400 transition-colors" />
+              )}
+              <div className="min-w-0 flex-1">
+                <span
+                  className={`text-sm tracking-tight block truncate ${
+                    task.isCompleted
+                      ? 'line-through text-slate-500 font-normal'
+                      : 'text-slate-100 font-medium'
+                  }`}
+                >
+                  {task.title}
+                </span>
+                {task.category && (
+                  <span className="text-[10px] text-purple-400 uppercase tracking-wider font-bold">
+                    {task.category}
+                  </span>
+                )}
+              </div>
+            </div>
+
+            <div className="flex items-center space-x-2 ml-3 shrink-0">
+              {task.dueDate && (
+                <div className="flex items-center space-x-1 px-2 py-1 rounded-lg bg-slate-900 border border-slate-800 text-[11px] font-mono text-slate-400">
+                  <Calendar className="w-3 h-3 text-slate-500" />
+                  <span>{task.dueDate}</span>
+                </div>
+              )}
+              <button
+                type="button"
+                onClick={() => deleteProjectTask(project.id, task.id)}
+                className="p-1.5 rounded-lg text-slate-500 hover:text-rose-400 hover:bg-rose-500/10 opacity-0 group-hover:opacity-100 transition-all"
+                title="Supprimer la tâche"
+              >
+                <Trash2 className="w-4 h-4" />
+              </button>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Add New Task Form */}
+      <form onSubmit={handleAddTask} className="flex flex-col sm:flex-row items-center gap-2 pt-2">
+        <input
+          type="text"
+          value={newTitle}
+          onChange={(e) => setNewTitle(e.target.value)}
+          placeholder="Ajouter une tâche (ex: Pose dissipateur thermique, Test charge...)"
+          className="flex-1 w-full bg-slate-950 border border-slate-800 rounded-xl px-3.5 py-2 text-sm text-white placeholder-slate-500 focus:outline-none focus:border-purple-500"
+        />
+
+        <div className="flex items-center space-x-2 w-full sm:w-auto">
+          <select
+            value={newCategory}
+            onChange={(e) => setNewCategory(e.target.value as ProjectTask['category'])}
+            className="bg-slate-950 border border-slate-800 rounded-xl px-2.5 py-2 text-xs text-purple-300 focus:outline-none focus:border-purple-500"
+          >
+            <option value="diagnostic">Diagnostic</option>
+            <option value="nettoyage">Nettoyage</option>
+            <option value="soudure">Soudure</option>
+            <option value="assemblage">Assemblage</option>
+            <option value="test_qc">Test QC</option>
+            <option value="packaging">Packaging</option>
+          </select>
+
+          <input
+            type="date"
+            value={newDueDate}
+            onChange={(e) => setNewDueDate(e.target.value)}
+            className="bg-slate-950 border border-slate-800 rounded-xl px-2.5 py-2 text-xs text-slate-300 focus:outline-none focus:border-purple-500 font-mono"
+            title="Date d'échéance optionnelle"
+          />
+
+          <button
+            type="submit"
+            className="flex items-center space-x-1.5 px-3.5 py-2 rounded-xl text-xs font-bold bg-purple-600 hover:bg-purple-500 text-white transition-all shadow-md shrink-0"
+          >
+            <Plus className="w-4 h-4" />
+            <span>Ajouter</span>
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+};
diff --git a/src/components/projects/ProjectsView.tsx b/src/components/projects/ProjectsView.tsx
new file mode 100644
index 0000000..f413cc5
--- /dev/null
+++ b/src/components/projects/ProjectsView.tsx
@@ -0,0 +1,327 @@
+import React, { useState, useMemo } from 'react';
+import {
+  Layers,
+  Search,
+  Plus,
+  LayoutGrid,
+  List as ListIcon,
+  Columns3,
+  Calendar as CalendarIcon,
+  Download,
+  Filter,
+} from 'lucide-react';
+import { useApp } from '../../context/AppContext';
+import type { Project, ConsoleModel, ProjectStatus } from '../../types';
+import { ProjectModal } from './ProjectModal';
+import { ProjectDetailView } from './ProjectDetailView';
+import { MarkAsSoldModal } from './MarkAsSoldModal';
+import { ProjectsTileView } from './views/ProjectsTileView';
+import { ProjectsListView } from './views/ProjectsListView';
+import { ProjectsKanbanView } from './views/ProjectsKanbanView';
+import { ProjectsCalendarView } from './views/ProjectsCalendarView';
+
+export type ProjectsViewMode = 'tile' | 'list' | 'kanban' | 'calendar';
+
+const STATUS_FILTERS: { id: ProjectStatus | 'ALL'; label: string }[] = [
+  { id: 'ALL', label: 'Tous les statuts' },
+  { id: 'in_progress', label: '⚡ En cours d\'atelier' },
+  { id: 'in_stock_ready', label: '✨ En stock / Prêtes' },
+  { id: 'sold', label: '🎉 Vendues' },
+  { id: 'qc_testing', label: '🔍 Tests & QC' },
+  { id: 'draft', label: '📝 Brouillons' },
+];
+
+const CONSOLE_MODELS: (ConsoleModel | 'ALL')[] = [
+  'ALL',
+  'Game Boy DMG',
+  'Game Boy Color',
+  'Game Boy Advance',
+  'GBA SP',
+  'Game Boy Pocket',
+  'Game Boy Micro',
+  'Nintendo DS Lite',
+  'PSP 1000 / 2000 / 3000',
+  'PS Vita',
+  'Nintendo Switch / Lite / OLED',
+  'Autre / Custom',
+];
+
+export const ProjectsView: React.FC = () => {
+  const {
+    projects,
+    selectedProjectId,
+    setSelectedProjectId,
+    showNewProjectModal,
+    setShowNewProjectModal,
+    exportProjectsCSV,
+  } = useApp();
+
+  const [viewMode, setViewMode] = useState<ProjectsViewMode>('tile');
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedStatus, setSelectedStatus] = useState<ProjectStatus | 'ALL'>('ALL');
+  const [selectedConsole, setSelectedConsole] = useState<ConsoleModel | 'ALL'>('ALL');
+  const [soldModalProject, setSoldModalProject] = useState<Project | null>(null);
+
+  // Filtered projects
+  const filteredProjects = useMemo(() => {
+    return projects.filter((p) => {
+      // Search
+      if (searchQuery.trim()) {
+        const query = searchQuery.toLowerCase();
+        const matchTitle = p.title.toLowerCase().includes(query);
+        const matchSerial = p.serialNumber.toLowerCase().includes(query);
+        const matchCustomer = (p.customerName || '').toLowerCase().includes(query);
+        const matchNotes = (p.notes || '').toLowerCase().includes(query);
+        if (!matchTitle && !matchSerial && !matchCustomer && !matchNotes) {
+          return false;
+        }
+      }
+
+      // Status
+      if (selectedStatus !== 'ALL' && p.status !== selectedStatus) {
+        return false;
+      }
+
+      // Console
+      if (selectedConsole !== 'ALL' && p.consoleModel !== selectedConsole) {
+        return false;
+      }
+
+      return true;
+    });
+  }, [projects, searchQuery, selectedStatus, selectedConsole]);
+
+  // If a specific project is selected, render its detailed view!
+  if (selectedProjectId) {
+    return (
+      <ProjectDetailView
+        projectId={selectedProjectId}
+        onBack={() => setSelectedProjectId(null)}
+      />
+    );
+  }
+
+  // Summary counts
+  const inStockCount = projects.filter((p) => p.status === 'in_stock_ready').length;
+  const inProgressCount = projects.filter(
+    (p) => p.status === 'in_progress' || p.status === 'qc_testing'
+  ).length;
+  const soldCount = projects.filter((p) => p.status === 'sold').length;
+
+  return (
+    <div className="space-y-6 pb-12 animate-fadeIn">
+      {/* Header & Quick stats */}
+      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+        <div>
+          <div className="inline-flex items-center space-x-2 px-3 py-1 rounded-full text-xs font-semibold bg-purple-500/10 text-purple-400 border border-purple-500/30 mb-2">
+            <Layers className="w-3.5 h-3.5" />
+            <span>Centre de Dépenses & Modding</span>
+          </div>
+          <h2 className="text-2xl sm:text-3xl font-black text-white font-display">
+            Gestion des Projets & Objectifs
+          </h2>
+          <p className="text-slate-400 text-sm mt-1">
+            {projects.length} projets au total • {inProgressCount} en atelier • {inStockCount} en vitrine • {soldCount} vendus
+          </p>
+        </div>
+
+        {/* View Mode Switcher & Export */}
+        <div className="flex flex-wrap items-center gap-2.5">
+          {/* Display View Mode Switcher */}
+          <div className="flex items-center bg-slate-900/90 rounded-2xl p-1 border border-slate-800 shadow-inner">
+            <button
+              onClick={() => setViewMode('tile')}
+              className={`flex items-center space-x-1.5 px-3 py-1.5 rounded-xl text-xs font-bold transition-all ${
+                viewMode === 'tile'
+                  ? 'bg-gradient-to-r from-pink-500 to-purple-600 text-white shadow-md'
+                  : 'text-slate-400 hover:text-white'
+              }`}
+              title="Affichage en Tuiles / Cartes"
+            >
+              <LayoutGrid className="w-4 h-4" />
+              <span className="hidden sm:inline">Tuiles</span>
+            </button>
+
+            <button
+              onClick={() => setViewMode('list')}
+              className={`flex items-center space-x-1.5 px-3 py-1.5 rounded-xl text-xs font-bold transition-all ${
+                viewMode === 'list'
+                  ? 'bg-gradient-to-r from-pink-500 to-purple-600 text-white shadow-md'
+                  : 'text-slate-400 hover:text-white'
+              }`}
+              title="Affichage en Lignes / Tableau"
+            >
+              <ListIcon className="w-4 h-4" />
+              <span className="hidden sm:inline">Lignes</span>
+            </button>
+
+            <button
+              onClick={() => setViewMode('kanban')}
+              className={`flex items-center space-x-1.5 px-3 py-1.5 rounded-xl text-xs font-bold transition-all ${
+                viewMode === 'kanban'
+                  ? 'bg-gradient-to-r from-pink-500 to-purple-600 text-white shadow-md'
+                  : 'text-slate-400 hover:text-white'
+              }`}
+              title="Tableau Kanban"
+            >
+              <Columns3 className="w-4 h-4" />
+              <span className="hidden sm:inline">Kanban</span>
+            </button>
+
+            <button
+              onClick={() => setViewMode('calendar')}
+              className={`flex items-center space-x-1.5 px-3 py-1.5 rounded-xl text-xs font-bold transition-all ${
+                viewMode === 'calendar'
+                  ? 'bg-gradient-to-r from-pink-500 to-purple-600 text-white shadow-md'
+                  : 'text-slate-400 hover:text-white'
+              }`}
+              title="Vue Calendrier & Échéances"
+            >
+              <CalendarIcon className="w-4 h-4" />
+              <span className="hidden sm:inline">Calendrier</span>
+            </button>
+          </div>
+
+          <button
+            onClick={exportProjectsCSV}
+            className="p-2 sm:px-3 sm:py-2 rounded-xl text-xs font-semibold bg-slate-900 border border-slate-800 text-slate-300 hover:text-white hover:border-slate-700 transition-all flex items-center space-x-1.5"
+            title="Exporter la liste en CSV"
+          >
+            <Download className="w-4 h-4 text-purple-400" />
+            <span className="hidden md:inline">CSV</span>
+          </button>
+
+          <button
+            onClick={() => setShowNewProjectModal(true)}
+            className="flex items-center space-x-2 px-4 py-2 rounded-xl text-xs sm:text-sm font-bold bg-gradient-to-r from-pink-500 via-purple-600 to-pink-600 text-white shadow-lg shadow-pink-500/25 hover:shadow-pink-500/40 hover:scale-[1.02] active:scale-[0.98] transition-all"
+          >
+            <Plus className="w-4 h-4" />
+            <span>Nouveau Projet</span>
+          </button>
+        </div>
+      </div>
+
+      {/* Filter & Search Toolbar (shown for Tile, List, Kanban) */}
+      {viewMode !== 'calendar' && (
+        <div className="flex flex-col md:flex-row items-center gap-3 p-3 rounded-2xl bg-slate-900/60 border border-slate-800 backdrop-blur-md">
+          {/* Search bar */}
+          <div className="relative flex-1 w-full">
+            <Search className="absolute left-3.5 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
+            <input
+              type="text"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              placeholder="Rechercher par titre, n° série, client..."
+              className="w-full pl-10 pr-4 py-2 bg-slate-950 border border-slate-800 rounded-xl text-xs sm:text-sm text-white placeholder-slate-500 focus:outline-none focus:border-purple-500 transition-colors"
+            />
+          </div>
+
+          {/* Status filter */}
+          <div className="flex items-center space-x-2 w-full md:w-auto">
+            <Filter className="w-4 h-4 text-slate-400 shrink-0 hidden sm:block" />
+            <select
+              value={selectedStatus}
+              onChange={(e) => setSelectedStatus(e.target.value as ProjectStatus | 'ALL')}
+              className="w-full md:w-auto bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-xs sm:text-sm text-slate-200 focus:outline-none focus:border-purple-500"
+            >
+              {STATUS_FILTERS.map((s) => (
+                <option key={s.id} value={s.id}>
+                  {s.label}
+                </option>
+              ))}
+            </select>
+
+            {/* Console filter */}
+            <select
+              value={selectedConsole}
+              onChange={(e) => setSelectedConsole(e.target.value as ConsoleModel | 'ALL')}
+              className="w-full md:w-auto bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-xs sm:text-sm text-slate-200 focus:outline-none focus:border-purple-500"
+            >
+              <option value="ALL">Toutes les consoles</option>
+              {CONSOLE_MODELS.filter((c) => c !== 'ALL').map((c) => (
+                <option key={c} value={c}>
+                  {c}
+                </option>
+              ))}
+            </select>
+          </div>
+        </div>
+      )}
+
+      {/* Dynamic Views Rendering */}
+      {viewMode === 'tile' && (
+        <ProjectsTileView
+          projects={filteredProjects}
+          onSelectProject={(id) => setSelectedProjectId(id)}
+          onOpenSoldModal={(p) => setSoldModalProject(p)}
+        />
+      )}
+
+      {viewMode === 'list' && (
+        <ProjectsListView
+          projects={filteredProjects}
+          onSelectProject={(id) => setSelectedProjectId(id)}
+          onOpenSoldModal={(p) => setSoldModalProject(p)}
+        />
+      )}
+
+      {viewMode === 'kanban' && (
+        <ProjectsKanbanView
+          projects={filteredProjects}
+          onSelectProject={(id) => setSelectedProjectId(id)}
+          onOpenSoldModal={(p) => setSoldModalProject(p)}
+        />
+      )}
+
+      {viewMode === 'calendar' && (
+        <ProjectsCalendarView
+          projects={projects}
+          onSelectProject={(id) => setSelectedProjectId(id)}
+        />
+      )}
+
+      {/* Empty State */}
+      {viewMode !== 'calendar' && filteredProjects.length === 0 && (
+        <div className="p-12 rounded-3xl bg-slate-900/40 border border-slate-800 text-center space-y-4">
+          <div className="w-16 h-16 mx-auto rounded-2xl bg-purple-500/10 border border-purple-500/30 flex items-center justify-center text-purple-400">
+            <Layers className="w-8 h-8" />
+          </div>
+          <div>
+            <h3 className="text-lg font-bold text-white">Aucun projet trouvé</h3>
+            <p className="text-sm text-slate-400 mt-1 max-w-md mx-auto">
+              {searchQuery || selectedStatus !== 'ALL' || selectedConsole !== 'ALL'
+                ? 'Aucun projet ne correspond à vos filtres actuels. Essayez de réinitialiser la recherche.'
+                : 'Commencez dès maintenant en créant votre premier projet de customisation de console !'}
+            </p>
+          </div>
+          <button
+            onClick={() => {
+              setSearchQuery('');
+              setSelectedStatus('ALL');
+              setSelectedConsole('ALL');
+              setShowNewProjectModal(true);
+            }}
+            className="inline-flex items-center space-x-2 px-5 py-2.5 rounded-xl font-bold text-sm bg-gradient-to-r from-pink-500 to-purple-600 text-white shadow-lg shadow-pink-500/25"
+          >
+            <Plus className="w-4 h-4" />
+            <span>Créer un Projet</span>
+          </button>
+        </div>
+      )}
+
+      {/* Modals */}
+      <ProjectModal
+        isOpen={showNewProjectModal}
+        onClose={() => setShowNewProjectModal(false)}
+      />
+
+      {soldModalProject && (
+        <MarkAsSoldModal
+          project={soldModalProject}
+          isOpen={true}
+          onClose={() => setSoldModalProject(null)}
+        />
+      )}
+    </div>
+  );
+};
diff --git a/src/components/projects/views/ProjectsCalendarView.tsx b/src/components/projects/views/ProjectsCalendarView.tsx
new file mode 100644
index 0000000..ca8e371
--- /dev/null
+++ b/src/components/projects/views/ProjectsCalendarView.tsx
@@ -0,0 +1,373 @@
+import React, { useState, useMemo } from 'react';
+import {
+  Calendar as CalendarIcon,
+  ChevronLeft,
+  ChevronRight,
+  Target,
+} from 'lucide-react';
+import type { Project } from '../../../types';
+import {
+  calculateProjectFinancials,
+  formatCurrency,
+  getProjectStatusInfo,
+} from '../../../utils/calculations';
+
+interface ProjectsCalendarViewProps {
+  projects: Project[];
+  onSelectProject: (id: string) => void;
+}
+
+interface CalendarDayEvent {
+  project: Project;
+  type: 'start' | 'deadline' | 'completed' | 'sold';
+  label: string;
+  colorClass: string;
+}
+
+export const ProjectsCalendarView: React.FC<ProjectsCalendarViewProps> = ({
+  projects,
+  onSelectProject,
+}) => {
+  // Current calendar viewing month
+  const [currentDate, setCurrentDate] = useState(() => new Date());
+
+  const year = currentDate.getFullYear();
+  const month = currentDate.getMonth(); // 0-indexed
+
+  // Month navigation
+  const prevMonth = () => {
+    setCurrentDate(new Date(year, month - 1, 1));
+  };
+
+  const nextMonth = () => {
+    setCurrentDate(new Date(year, month + 1, 1));
+  };
+
+  const setToday = () => {
+    setCurrentDate(new Date());
+  };
+
+  // Month name in French
+  const monthName = new Intl.DateTimeFormat('fr-FR', {
+    month: 'long',
+    year: 'numeric',
+  }).format(currentDate);
+
+  // Generate calendar grid days
+  const calendarDays = useMemo(() => {
+    const firstDayOfMonth = new Date(year, month, 1);
+    // JS getDay(): 0 is Sunday, 1 is Monday... convert to Monday=0
+    let startDayOfWeek = firstDayOfMonth.getDay() - 1;
+    if (startDayOfWeek === -1) startDayOfWeek = 6;
+
+    const daysInMonth = new Date(year, month + 1, 0).getDate();
+    const daysInPrevMonth = new Date(year, month, 0).getDate();
+
+    const days: {
+      dayNumber: number;
+      dateString: string;
+      isCurrentMonth: boolean;
+      isToday: boolean;
+    }[] = [];
+
+    const todayStr = new Date().toISOString().split('T')[0];
+
+    // Previous month padding days
+    for (let i = startDayOfWeek - 1; i >= 0; i--) {
+      const d = daysInPrevMonth - i;
+      const prevMonthIdx = month === 0 ? 11 : month - 1;
+      const prevYear = month === 0 ? year - 1 : year;
+      const dateStr = `${prevYear}-${(prevMonthIdx + 1).toString().padStart(2, '0')}-${d.toString().padStart(2, '0')}`;
+      days.push({
+        dayNumber: d,
+        dateString: dateStr,
+        isCurrentMonth: false,
+        isToday: dateStr === todayStr,
+      });
+    }
+
+    // Current month days
+    for (let d = 1; d <= daysInMonth; d++) {
+      const dateStr = `${year}-${(month + 1).toString().padStart(2, '0')}-${d.toString().padStart(2, '0')}`;
+      days.push({
+        dayNumber: d,
+        dateString: dateStr,
+        isCurrentMonth: true,
+        isToday: dateStr === todayStr,
+      });
+    }
+
+    // Next month padding days to complete grid (multiples of 7)
+    const remainingDays = (7 - (days.length % 7)) % 7;
+    for (let d = 1; d <= remainingDays; d++) {
+      const nextMonthIdx = month === 11 ? 0 : month + 1;
+      const nextYear = month === 11 ? year + 1 : year;
+      const dateStr = `${nextYear}-${(nextMonthIdx + 1).toString().padStart(2, '0')}-${d.toString().padStart(2, '0')}`;
+      days.push({
+        dayNumber: d,
+        dateString: dateStr,
+        isCurrentMonth: false,
+        isToday: dateStr === todayStr,
+      });
+    }
+
+    return days;
+  }, [year, month]);
+
+  // Map events to date strings
+  const eventsByDate = useMemo(() => {
+    const map = new Map<string, CalendarDayEvent[]>();
+
+    projects.forEach((proj) => {
+      // 1. Target Deadline
+      if (proj.objectives?.targetDeadlineDate) {
+        const d = proj.objectives.targetDeadlineDate;
+        const list = map.get(d) || [];
+        list.push({
+          project: proj,
+          type: 'deadline',
+          label: `🎯 Échéance: ${proj.serialNumber}`,
+          colorClass: 'bg-amber-500/20 text-amber-300 border-amber-500/40 hover:bg-amber-500/30',
+        });
+        map.set(d, list);
+      }
+
+      // 2. Start Date
+      if (proj.startDate) {
+        const d = proj.startDate;
+        const list = map.get(d) || [];
+        list.push({
+          project: proj,
+          type: 'start',
+          label: `⚡ Lancement: ${proj.serialNumber}`,
+          colorClass: 'bg-purple-500/20 text-purple-300 border-purple-500/40 hover:bg-purple-500/30',
+        });
+        map.set(d, list);
+      }
+
+      // 3. Completed Date
+      if (proj.completedDate && proj.status !== 'sold') {
+        const d = proj.completedDate;
+        const list = map.get(d) || [];
+        list.push({
+          project: proj,
+          type: 'completed',
+          label: `✨ Prête: ${proj.serialNumber}`,
+          colorClass: 'bg-cyan-500/20 text-cyan-300 border-cyan-500/40 hover:bg-cyan-500/30',
+        });
+        map.set(d, list);
+      }
+
+      // 4. Sold Date
+      if (proj.soldDate) {
+        const d = proj.soldDate;
+        const list = map.get(d) || [];
+        list.push({
+          project: proj,
+          type: 'sold',
+          label: `🎉 Vendu: ${proj.serialNumber}`,
+          colorClass: 'bg-emerald-500/20 text-emerald-300 border-emerald-500/40 hover:bg-emerald-500/30',
+        });
+        map.set(d, list);
+      }
+    });
+
+    return map;
+  }, [projects]);
+
+  // Upcoming deadlines summary
+  const upcomingDeadlines = useMemo(() => {
+    return projects
+      .filter((p) => p.objectives?.targetDeadlineDate && p.status !== 'sold')
+      .sort((a, b) => (a.objectives?.targetDeadlineDate || '').localeCompare(b.objectives?.targetDeadlineDate || ''));
+  }, [projects]);
+
+  const WEEK_DAYS = ['Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim'];
+
+  return (
+    <div className="space-y-6">
+      {/* Calendar Header Toolbar */}
+      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 p-4 rounded-2xl bg-slate-900/80 border border-slate-800 backdrop-blur-md shadow-lg">
+        <div className="flex items-center space-x-3">
+          <div className="p-2.5 rounded-xl bg-pink-500/10 border border-pink-500/30 text-pink-400">
+            <CalendarIcon className="w-5 h-5" />
+          </div>
+          <div>
+            <h3 className="font-extrabold text-lg sm:text-xl text-white capitalize">
+              {monthName}
+            </h3>
+            <p className="text-xs text-slate-400">
+              Planning des jalons, lancements et échéances de modding
+            </p>
+          </div>
+        </div>
+
+        {/* Month switcher */}
+        <div className="flex items-center space-x-2">
+          <button
+            type="button"
+            onClick={setToday}
+            className="px-3 py-1.5 rounded-xl text-xs font-bold bg-slate-950 hover:bg-slate-800 text-slate-300 border border-slate-800 transition-all"
+          >
+            Aujourd'hui
+          </button>
+
+          <div className="flex items-center bg-slate-950 rounded-xl border border-slate-800 p-1">
+            <button
+              type="button"
+              onClick={prevMonth}
+              className="p-1.5 rounded-lg hover:bg-slate-800 text-slate-400 hover:text-white transition-all"
+              title="Mois précédent"
+            >
+              <ChevronLeft className="w-4 h-4" />
+            </button>
+            <button
+              type="button"
+              onClick={nextMonth}
+              className="p-1.5 rounded-lg hover:bg-slate-800 text-slate-400 hover:text-white transition-all"
+              title="Mois suivant"
+            >
+              <ChevronRight className="w-4 h-4" />
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Main Grid: Calendar on Left, Upcoming Deadlines Card on Right */}
+      <div className="grid grid-cols-1 xl:grid-cols-4 gap-6">
+        {/* Calendar Board (3 Cols on XL) */}
+        <div className="xl:col-span-3 rounded-2xl bg-slate-900/60 border border-slate-800 overflow-hidden shadow-xl">
+          {/* Day of Week Headers */}
+          <div className="grid grid-cols-7 border-b border-slate-800 bg-slate-950/80 text-center py-2.5 text-xs font-bold text-slate-400 uppercase tracking-wider">
+            {WEEK_DAYS.map((d) => (
+              <div key={d}>{d}</div>
+            ))}
+          </div>
+
+          {/* Day Cells Grid */}
+          <div className="grid grid-cols-7 divide-x divide-y divide-slate-850 bg-slate-950/40">
+            {calendarDays.map((day) => {
+              const events = eventsByDate.get(day.dateString) || [];
+
+              return (
+                <div
+                  key={day.dateString}
+                  className={`min-h-[105px] sm:min-h-[120px] p-1.5 sm:p-2 transition-all flex flex-col justify-between ${
+                    day.isCurrentMonth
+                      ? 'bg-slate-900/20 hover:bg-slate-800/30'
+                      : 'bg-slate-950/80 text-slate-600 opacity-60'
+                  } ${day.isToday ? 'ring-2 ring-pink-500/40 bg-pink-500/5' : ''}`}
+                >
+                  {/* Day Header */}
+                  <div className="flex items-center justify-between mb-1">
+                    <span
+                      className={`font-mono text-xs font-bold px-1.5 py-0.5 rounded ${
+                        day.isToday
+                          ? 'bg-pink-500 text-white font-extrabold shadow-sm'
+                          : day.isCurrentMonth
+                          ? 'text-slate-300'
+                          : 'text-slate-600'
+                      }`}
+                    >
+                      {day.dayNumber}
+                    </span>
+                    {events.length > 0 && (
+                      <span className="w-1.5 h-1.5 rounded-full bg-pink-400" />
+                    )}
+                  </div>
+
+                  {/* Events list inside day */}
+                  <div className="space-y-1 overflow-y-auto max-h-20 custom-scrollbar">
+                    {events.map((ev, i) => (
+                      <div
+                        key={i}
+                        onClick={() => onSelectProject(ev.project.id)}
+                        className={`text-[10px] font-mono px-1.5 py-0.5 rounded border truncate cursor-pointer transition-all ${ev.colorClass}`}
+                        title={`${ev.label} - ${ev.project.title}`}
+                      >
+                        {ev.label}
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+
+        {/* Right Sidebar: Upcoming Deadlines & Milestones */}
+        <div className="space-y-4">
+          <div className="p-4 rounded-2xl bg-slate-900/60 border border-slate-800 backdrop-blur-md space-y-3">
+            <div className="flex items-center space-x-2 pb-2 border-b border-slate-800">
+              <Target className="w-4 h-4 text-amber-400" />
+              <h4 className="font-bold text-sm text-white">Échéances & Objectifs Cibles</h4>
+            </div>
+
+            <div className="space-y-2.5">
+              {upcomingDeadlines.map((proj) => {
+                const fin = calculateProjectFinancials(proj);
+                const statusInfo = getProjectStatusInfo(proj.status);
+                const deadline = proj.objectives?.targetDeadlineDate;
+
+                return (
+                  <div
+                    key={proj.id}
+                    onClick={() => onSelectProject(proj.id)}
+                    className="p-3 rounded-xl bg-slate-950/80 hover:bg-slate-950 border border-slate-800 hover:border-amber-500/40 cursor-pointer transition-all group"
+                  >
+                    <div className="flex items-center justify-between text-xs mb-1">
+                      <span className="font-mono text-[10px] font-bold text-amber-300 bg-amber-500/10 px-1.5 py-0.5 rounded border border-amber-500/20">
+                        📅 {deadline}
+                      </span>
+                      <span className={`text-[10px] font-bold px-1.5 py-0.5 rounded-full border ${statusInfo.color}`}>
+                        {statusInfo.label}
+                      </span>
+                    </div>
+
+                    <div className="font-bold text-xs text-slate-200 group-hover:text-pink-300 transition-colors truncate">
+                      {proj.title}
+                    </div>
+
+                    <div className="flex items-center justify-between mt-2 pt-2 border-t border-slate-850 text-[10px] font-mono text-slate-400">
+                      <span>{proj.serialNumber}</span>
+                      <span className="font-bold text-emerald-400">
+                        {formatCurrency(fin.revenue)}
+                      </span>
+                    </div>
+                  </div>
+                );
+              })}
+
+              {upcomingDeadlines.length === 0 && (
+                <div className="py-6 text-center text-xs text-slate-500 italic">
+                  Aucune échéance fixée sur les projets en cours.
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Legend Card */}
+          <div className="p-4 rounded-2xl bg-slate-900/60 border border-slate-800 text-xs space-y-2">
+            <div className="font-bold text-slate-300 mb-1">Légende du Calendrier</div>
+            <div className="flex items-center space-x-2 text-slate-400">
+              <span className="w-2.5 h-2.5 rounded-full bg-amber-400" />
+              <span>🎯 Échéances cibles (Objectifs)</span>
+            </div>
+            <div className="flex items-center space-x-2 text-slate-400">
+              <span className="w-2.5 h-2.5 rounded-full bg-purple-400" />
+              <span>⚡ Date de lancement projet</span>
+            </div>
+            <div className="flex items-center space-x-2 text-slate-400">
+              <span className="w-2.5 h-2.5 rounded-full bg-cyan-400" />
+              <span>✨ Finition & Prêt en stock</span>
+            </div>
+            <div className="flex items-center space-x-2 text-slate-400">
+              <span className="w-2.5 h-2.5 rounded-full bg-emerald-400" />
+              <span>🎉 Date de vente & expédition</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/projects/views/ProjectsKanbanView.tsx b/src/components/projects/views/ProjectsKanbanView.tsx
new file mode 100644
index 0000000..3a2f8b9
--- /dev/null
+++ b/src/components/projects/views/ProjectsKanbanView.tsx
@@ -0,0 +1,286 @@
+import React from 'react';
+import {
+  Gamepad2,
+  Clock,
+  ArrowRight,
+  ArrowLeft,
+  ShoppingBag,
+  ListTodo,
+  Calendar,
+} from 'lucide-react';
+import { useApp } from '../../../context/AppContext';
+import type { Project, ProjectStatus } from '../../../types';
+import {
+  calculateProjectFinancials,
+  formatCurrency,
+  formatMinutes,
+} from '../../../utils/calculations';
+
+interface KanbanColumn {
+  id: ProjectStatus;
+  title: string;
+  badgeColor: string;
+  borderColor: string;
+  headerBg: string;
+  icon: string;
+}
+
+const KANBAN_COLUMNS: KanbanColumn[] = [
+  {
+    id: 'draft',
+    title: 'Planifié / En attente',
+    badgeColor: 'bg-slate-500/20 text-slate-300 border-slate-500/40',
+    borderColor: 'border-slate-800',
+    headerBg: 'from-slate-800/40 to-slate-900/20',
+    icon: '📝',
+  },
+  {
+    id: 'in_progress',
+    title: 'En cours d\'Atelier',
+    badgeColor: 'bg-purple-500/20 text-purple-300 border-purple-500/40',
+    borderColor: 'border-purple-500/30',
+    headerBg: 'from-purple-950/40 to-slate-900/20',
+    icon: '⚡',
+  },
+  {
+    id: 'qc_testing',
+    title: 'Tests & Contrôle QC',
+    badgeColor: 'bg-cyan-500/20 text-cyan-300 border-cyan-500/40',
+    borderColor: 'border-cyan-500/30',
+    headerBg: 'from-cyan-950/40 to-slate-900/20',
+    icon: '🔍',
+  },
+  {
+    id: 'in_stock_ready',
+    title: 'Prêt en Stock / Vitrine',
+    badgeColor: 'bg-emerald-500/20 text-emerald-300 border-emerald-500/40',
+    borderColor: 'border-emerald-500/30',
+    headerBg: 'from-emerald-950/40 to-slate-900/20',
+    icon: '✨',
+  },
+  {
+    id: 'sold',
+    title: 'Vendu & Livré',
+    badgeColor: 'bg-pink-500/20 text-pink-300 border-pink-500/40',
+    borderColor: 'border-pink-500/30',
+    headerBg: 'from-pink-950/40 to-slate-900/20',
+    icon: '🎉',
+  },
+];
+
+interface ProjectsKanbanViewProps {
+  projects: Project[];
+  onSelectProject: (id: string) => void;
+  onOpenSoldModal: (project: Project) => void;
+}
+
+export const ProjectsKanbanView: React.FC<ProjectsKanbanViewProps> = ({
+  projects,
+  onSelectProject,
+  onOpenSoldModal,
+}) => {
+  const { updateProjectStatus, startTimer, activeTimer } = useApp();
+
+  const getPreviousStatus = (status: ProjectStatus): ProjectStatus | null => {
+    switch (status) {
+      case 'in_progress':
+        return 'draft';
+      case 'qc_testing':
+        return 'in_progress';
+      case 'in_stock_ready':
+        return 'qc_testing';
+      default:
+        return null;
+    }
+  };
+
+  const getNextStatus = (status: ProjectStatus): ProjectStatus | null => {
+    switch (status) {
+      case 'draft':
+        return 'in_progress';
+      case 'in_progress':
+        return 'qc_testing';
+      case 'qc_testing':
+        return 'in_stock_ready';
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-5 gap-4.5 overflow-x-auto pb-4">
+      {KANBAN_COLUMNS.map((col) => {
+        const columnProjects = projects.filter((p) => {
+          if (col.id === 'sold') {
+            return p.status === 'sold' || p.status === 'reserved';
+          }
+          return p.status === col.id;
+        });
+
+        const totalPotentialRevenue = columnProjects.reduce((sum, p) => {
+          const fin = calculateProjectFinancials(p);
+          return sum + fin.revenue;
+        }, 0);
+
+        return (
+          <div
+            key={col.id}
+            className="flex flex-col rounded-2xl bg-slate-950/60 border border-slate-850 overflow-hidden min-w-[270px]"
+          >
+            {/* Column Header */}
+            <div
+              className={`p-3.5 border-b border-slate-800 bg-gradient-to-b ${col.headerBg} flex items-center justify-between`}
+            >
+              <div className="flex items-center space-x-2">
+                <span className="text-base">{col.icon}</span>
+                <span className="font-bold text-xs text-white tracking-tight">
+                  {col.title}
+                </span>
+              </div>
+              <span
+                className={`px-2 py-0.5 rounded-full text-xs font-mono font-bold border ${col.badgeColor}`}
+              >
+                {columnProjects.length}
+              </span>
+            </div>
+
+            {/* Subheader: Potential revenue in this column */}
+            <div className="px-3.5 py-1.5 bg-slate-950/40 border-b border-slate-850/60 flex items-center justify-between text-[10px] text-slate-400 font-mono">
+              <span>Valeur :</span>
+              <span className="font-bold text-pink-400">
+                {formatCurrency(totalPotentialRevenue)}
+              </span>
+            </div>
+
+            {/* Column Project Cards */}
+            <div className="p-3 space-y-3 flex-1 overflow-y-auto max-h-[calc(100vh-280px)] custom-scrollbar">
+              {columnProjects.map((project) => {
+                const fin = calculateProjectFinancials(project);
+                const isTimerRunning =
+                  activeTimer.isRunning && activeTimer.projectId === project.id;
+                const prev = getPreviousStatus(project.status);
+                const next = getNextStatus(project.status);
+                const tasks = project.tasks || [];
+                const completedTasks = tasks.filter((t) => t.isCompleted).length;
+                const objectives = project.objectives || {};
+
+                return (
+                  <div
+                    key={project.id}
+                    onClick={() => onSelectProject(project.id)}
+                    className="p-3.5 rounded-xl bg-slate-900/80 hover:bg-slate-900 border border-slate-800 hover:border-pink-500/40 transition-all shadow-md hover:shadow-xl cursor-pointer group space-y-2.5"
+                  >
+                    {/* Top row: Serial & Model */}
+                    <div className="flex items-center justify-between text-xs">
+                      <span className="font-mono text-[10px] font-bold px-1.5 py-0.5 rounded bg-slate-950 text-slate-300 border border-slate-800">
+                        {project.serialNumber}
+                      </span>
+                      <span className="text-[11px] font-semibold text-cyan-300 flex items-center space-x-1">
+                        <Gamepad2 className="w-3 h-3" />
+                        <span>{project.consoleModel}</span>
+                      </span>
+                    </div>
+
+                    {/* Title */}
+                    <h4 className="font-bold text-sm text-slate-100 group-hover:text-pink-300 transition-colors line-clamp-2">
+                      {project.title}
+                    </h4>
+
+                    {/* Tasks mini pill */}
+                    {tasks.length > 0 && (
+                      <div className="flex items-center space-x-1 text-[11px] text-purple-300 bg-purple-500/10 px-2 py-0.5 rounded-md border border-purple-500/20">
+                        <ListTodo className="w-3 h-3 text-purple-400" />
+                        <span>Checklist: {completedTasks}/{tasks.length}</span>
+                      </div>
+                    )}
+
+                    {/* Deadline target if set */}
+                    {objectives.targetDeadlineDate && (
+                      <div className="flex items-center space-x-1 text-[10px] text-amber-300 font-mono">
+                        <Calendar className="w-3 h-3" />
+                        <span>Cible : {objectives.targetDeadlineDate}</span>
+                      </div>
+                    )}
+
+                    {/* Financial stats row */}
+                    <div className="flex items-center justify-between pt-2 border-t border-slate-800/80 text-[11px] font-mono">
+                      <span className="text-slate-400">
+                        {formatMinutes(fin.laborMinutes)}
+                      </span>
+                      <span className="font-bold text-emerald-400">
+                        {formatCurrency(fin.netProfit)} net
+                      </span>
+                    </div>
+
+                    {/* Kanban Movement Actions */}
+                    <div
+                      className="flex items-center justify-between pt-1 gap-1"
+                      onClick={(e) => e.stopPropagation()}
+                    >
+                      {prev ? (
+                        <button
+                          type="button"
+                          onClick={() => updateProjectStatus(project.id, prev)}
+                          className="p-1 rounded-lg bg-slate-950 border border-slate-800 text-slate-400 hover:text-white hover:border-slate-600 transition-all text-[10px]"
+                          title="Reculer d'une étape"
+                        >
+                          <ArrowLeft className="w-3 h-3" />
+                        </button>
+                      ) : <div />}
+
+                      {/* Middle action button */}
+                      {project.status === 'in_progress' && (
+                        <button
+                          type="button"
+                          onClick={() =>
+                            startTimer(project.id, 'soudure_mods', `Atelier sur ${project.title}`)
+                          }
+                          className={`px-2 py-0.5 rounded-lg text-[10px] font-bold flex items-center space-x-1 ${
+                            isTimerRunning
+                              ? 'bg-amber-500 text-slate-950 animate-pulse'
+                              : 'bg-slate-950 border border-amber-500/30 text-amber-300 hover:bg-amber-500/20'
+                          }`}
+                        >
+                          <Clock className="w-2.5 h-2.5" />
+                          <span>{isTimerRunning ? 'Chrono actif' : 'Chrono'}</span>
+                        </button>
+                      )}
+
+                      {project.status === 'in_stock_ready' && (
+                        <button
+                          type="button"
+                          onClick={() => onOpenSoldModal(project)}
+                          className="px-2 py-0.5 rounded-lg text-[10px] font-bold bg-pink-600 hover:bg-pink-500 text-white flex items-center space-x-1 shadow-sm"
+                        >
+                          <ShoppingBag className="w-2.5 h-2.5" />
+                          <span>Vendre</span>
+                        </button>
+                      )}
+
+                      {next ? (
+                        <button
+                          type="button"
+                          onClick={() => updateProjectStatus(project.id, next)}
+                          className="p-1 rounded-lg bg-slate-950 border border-slate-800 text-slate-400 hover:text-cyan-300 hover:border-cyan-500/40 transition-all text-[10px]"
+                          title="Avancer à l'étape suivante"
+                        >
+                          <ArrowRight className="w-3 h-3" />
+                        </button>
+                      ) : <div />}
+                    </div>
+                  </div>
+                );
+              })}
+
+              {columnProjects.length === 0 && (
+                <div className="py-8 text-center text-xs text-slate-600 italic">
+                  Aucun projet
+                </div>
+              )}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
diff --git a/src/components/projects/views/ProjectsListView.tsx b/src/components/projects/views/ProjectsListView.tsx
new file mode 100644
index 0000000..ffa4315
--- /dev/null
+++ b/src/components/projects/views/ProjectsListView.tsx
@@ -0,0 +1,200 @@
+import React from 'react';
+import {
+  Gamepad2,
+  Calendar,
+  ArrowRight,
+  ShoppingBag,
+} from 'lucide-react';
+import { useApp } from '../../../context/AppContext';
+import type { Project } from '../../../types';
+import {
+  calculateProjectFinancials,
+  formatCurrency,
+  formatMinutes,
+  getProjectStatusInfo,
+} from '../../../utils/calculations';
+
+interface ProjectsListViewProps {
+  projects: Project[];
+  onSelectProject: (id: string) => void;
+  onOpenSoldModal: (project: Project) => void;
+}
+
+export const ProjectsListView: React.FC<ProjectsListViewProps> = ({
+  projects,
+  onSelectProject,
+  onOpenSoldModal,
+}) => {
+  const { updateProjectStatus } = useApp();
+
+  return (
+    <div className="bg-slate-900/60 rounded-2xl border border-slate-800 overflow-hidden shadow-xl">
+      <div className="overflow-x-auto">
+        <table className="w-full text-left border-collapse">
+          <thead>
+            <tr className="border-b border-slate-800 bg-slate-950/80 text-[11px] font-bold text-slate-400 uppercase tracking-wider">
+              <th className="py-3.5 px-4">Projet & Réf</th>
+              <th className="py-3.5 px-3">Modèle</th>
+              <th className="py-3.5 px-3">Statut</th>
+              <th className="py-3.5 px-3">Tâches</th>
+              <th className="py-3.5 px-3">Échéance 🎯</th>
+              <th className="py-3.5 px-3 text-right">Temps Atelier</th>
+              <th className="py-3.5 px-3 text-right">Coût Pièces</th>
+              <th className="py-3.5 px-3 text-right">Prix Vente</th>
+              <th className="py-3.5 px-3 text-right">Bénéfice Net</th>
+              <th className="py-3.5 px-4 text-center">Actions</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-slate-850 text-xs">
+            {projects.map((project) => {
+              const fin = calculateProjectFinancials(project);
+              const statusInfo = getProjectStatusInfo(project.status);
+              const tasks = project.tasks || [];
+              const completedTasks = tasks.filter((t) => t.isCompleted).length;
+              const totalTasks = tasks.length;
+              const taskPercent = totalTasks > 0 ? Math.round((completedTasks / totalTasks) * 100) : 0;
+              const objectives = project.objectives || {};
+
+              return (
+                <tr
+                  key={project.id}
+                  onClick={() => onSelectProject(project.id)}
+                  className="hover:bg-slate-800/50 cursor-pointer transition-colors group"
+                >
+                  {/* Title & Ref */}
+                  <td className="py-3.5 px-4">
+                    <div className="flex items-center space-x-2.5">
+                      <span className="font-mono font-bold text-[11px] text-pink-400 px-2 py-0.5 rounded bg-slate-950 border border-slate-800">
+                        {project.serialNumber}
+                      </span>
+                      <div>
+                        <div className="font-bold text-slate-100 group-hover:text-pink-300 transition-colors line-clamp-1">
+                          {project.title}
+                        </div>
+                        {project.customerName && (
+                          <div className="text-[11px] text-slate-500">
+                            Client : {project.customerName}
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  </td>
+
+                  {/* Model */}
+                  <td className="py-3.5 px-3">
+                    <span className="inline-flex items-center space-x-1 px-2 py-0.5 rounded-md text-[11px] font-semibold bg-slate-950 text-cyan-300 border border-cyan-500/20">
+                      <Gamepad2 className="w-3 h-3" />
+                      <span>{project.consoleModel}</span>
+                    </span>
+                  </td>
+
+                  {/* Status */}
+                  <td className="py-3.5 px-3">
+                    <span
+                      className={`inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold border ${statusInfo.color}`}
+                    >
+                      {statusInfo.label}
+                    </span>
+                  </td>
+
+                  {/* Tasks Progress */}
+                  <td className="py-3.5 px-3">
+                    {totalTasks > 0 ? (
+                      <div className="w-24">
+                        <div className="flex items-center justify-between text-[10px] font-mono text-slate-400 mb-0.5">
+                          <span>{completedTasks}/{totalTasks}</span>
+                          <span className="text-purple-300 font-bold">{taskPercent}%</span>
+                        </div>
+                        <div className="w-full h-1 bg-slate-800 rounded-full overflow-hidden">
+                          <div
+                            className="h-full bg-gradient-to-r from-pink-500 to-purple-500"
+                            style={{ width: `${taskPercent}%` }}
+                          />
+                        </div>
+                      </div>
+                    ) : (
+                      <span className="text-slate-600 text-[11px] italic">—</span>
+                    )}
+                  </td>
+
+                  {/* Deadline & Target Date */}
+                  <td className="py-3.5 px-3 font-mono text-[11px]">
+                    {objectives.targetDeadlineDate ? (
+                      <span className="inline-flex items-center space-x-1 text-amber-300 bg-amber-500/10 px-1.5 py-0.5 rounded border border-amber-500/20">
+                        <Calendar className="w-3 h-3" />
+                        <span>{objectives.targetDeadlineDate}</span>
+                      </span>
+                    ) : (
+                      <span className="text-slate-600">—</span>
+                    )}
+                  </td>
+
+                  {/* Labor Time */}
+                  <td className="py-3.5 px-3 text-right font-mono font-bold text-amber-300">
+                    {formatMinutes(fin.laborMinutes)}
+                  </td>
+
+                  {/* Parts Cost */}
+                  <td className="py-3.5 px-3 text-right font-mono text-slate-300">
+                    {formatCurrency(fin.hardwareDirectCost)}
+                  </td>
+
+                  {/* Revenue / Target */}
+                  <td className="py-3.5 px-3 text-right font-mono font-bold text-pink-400">
+                    {formatCurrency(fin.revenue)}
+                  </td>
+
+                  {/* Net Profit & Margin */}
+                  <td className="py-3.5 px-3 text-right">
+                    <div className="font-mono font-extrabold text-emerald-400">
+                      {formatCurrency(fin.netProfit)}
+                    </div>
+                    <div className="text-[10px] text-emerald-500 font-mono">
+                      {fin.marginPercent.toFixed(0)}% marge
+                    </div>
+                  </td>
+
+                  {/* Actions */}
+                  <td
+                    className="py-3.5 px-4 text-center"
+                    onClick={(e) => e.stopPropagation()}
+                  >
+                    <div className="flex items-center justify-center space-x-1.5">
+                      {project.status === 'in_stock_ready' ? (
+                        <button
+                          type="button"
+                          onClick={() => onOpenSoldModal(project)}
+                          className="px-2.5 py-1 rounded-lg text-xs font-bold bg-pink-600 hover:bg-pink-500 text-white shadow-sm flex items-center space-x-1"
+                        >
+                          <ShoppingBag className="w-3 h-3" />
+                          <span>Vendre</span>
+                        </button>
+                      ) : project.status === 'in_progress' ? (
+                        <button
+                          type="button"
+                          onClick={() => updateProjectStatus(project.id, 'qc_testing')}
+                          className="px-2 py-1 rounded-lg text-xs font-semibold bg-cyan-600/30 hover:bg-cyan-600/50 text-cyan-300 border border-cyan-500/30"
+                        >
+                          QC
+                        </button>
+                      ) : null}
+
+                      <button
+                        type="button"
+                        onClick={() => onSelectProject(project.id)}
+                        className="p-1.5 rounded-lg text-slate-400 hover:text-white hover:bg-slate-800"
+                        title="Voir la fiche détaillée"
+                      >
+                        <ArrowRight className="w-4 h-4" />
+                      </button>
+                    </div>
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/projects/views/ProjectsTileView.tsx b/src/components/projects/views/ProjectsTileView.tsx
new file mode 100644
index 0000000..454c466
--- /dev/null
+++ b/src/components/projects/views/ProjectsTileView.tsx
@@ -0,0 +1,313 @@
+import React, { useState } from 'react';
+import {
+  Gamepad2,
+  Clock,
+  Wrench,
+  Sparkles,
+  ArrowRight,
+  CheckCircle2,
+  Calendar,
+  DollarSign,
+  ChevronDown,
+  ChevronUp,
+  ShoppingBag,
+  ListTodo,
+} from 'lucide-react';
+import { useApp } from '../../../context/AppContext';
+import type { Project } from '../../../types';
+import {
+  calculateProjectFinancials,
+  formatCurrency,
+  formatMinutes,
+  getProjectStatusInfo,
+} from '../../../utils/calculations';
+import { ProjectTasksChecklist } from '../ProjectTasksChecklist';
+
+interface ProjectsTileViewProps {
+  projects: Project[];
+  onSelectProject: (id: string) => void;
+  onOpenSoldModal: (project: Project) => void;
+}
+
+export const ProjectsTileView: React.FC<ProjectsTileViewProps> = ({
+  projects,
+  onSelectProject,
+  onOpenSoldModal,
+}) => {
+  const { updateProjectStatus, startTimer, activeTimer } = useApp();
+  const [expandedChecklistId, setExpandedChecklistId] = useState<string | null>(null);
+
+  const toggleChecklist = (id: string, e: React.MouseEvent) => {
+    e.stopPropagation();
+    setExpandedChecklistId(expandedChecklistId === id ? null : id);
+  };
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
+      {projects.map((project) => {
+        const fin = calculateProjectFinancials(project);
+        const statusInfo = getProjectStatusInfo(project.status);
+        const isTimerRunningOnThis =
+          activeTimer.isRunning && activeTimer.projectId === project.id;
+
+        const tasks = project.tasks || [];
+        const completedTasks = tasks.filter((t) => t.isCompleted).length;
+        const totalTasks = tasks.length;
+        const taskPercent = totalTasks > 0 ? Math.round((completedTasks / totalTasks) * 100) : 0;
+        const objectives = project.objectives || {};
+
+        return (
+          <div
+            key={project.id}
+            onClick={() => onSelectProject(project.id)}
+            className="group relative bg-slate-900/60 hover:bg-slate-900/90 rounded-3xl border border-slate-800 hover:border-pink-500/40 p-5 transition-all duration-300 shadow-lg hover:shadow-2xl hover:shadow-pink-500/10 cursor-pointer flex flex-col justify-between"
+          >
+            {/* Top Row: Serial & Status Badges */}
+            <div>
+              <div className="flex items-center justify-between gap-2 mb-3">
+                <span className="font-mono text-xs font-extrabold px-2.5 py-1 rounded-lg bg-slate-950 text-slate-300 border border-slate-800">
+                  {project.serialNumber}
+                </span>
+
+                <div className="flex items-center space-x-1.5">
+                  <span
+                    className={`inline-flex items-center px-2.5 py-1 rounded-full text-xs font-bold border ${statusInfo.color}`}
+                  >
+                    {statusInfo.label}
+                  </span>
+                </div>
+              </div>
+
+              {/* Title & Console Model */}
+              <h3 className="font-bold text-lg text-white group-hover:text-pink-400 transition-colors line-clamp-1">
+                {project.title}
+              </h3>
+
+              <div className="flex flex-wrap items-center gap-2 mt-2">
+                <span className="inline-flex items-center space-x-1 px-2.5 py-0.5 rounded-md text-xs font-semibold bg-slate-950 text-cyan-300 border border-cyan-500/20">
+                  <Gamepad2 className="w-3.5 h-3.5" />
+                  <span>{project.consoleModel}</span>
+                </span>
+
+                {project.type === 'client_custom' && (
+                  <span className="inline-flex items-center space-x-1 px-2 py-0.5 rounded-md text-[11px] font-medium bg-purple-500/10 text-purple-300 border border-purple-500/20">
+                    <span>Client: {project.customerName || 'Privé'}</span>
+                  </span>
+                )}
+
+                {objectives.targetDeadlineDate && (
+                  <span className="inline-flex items-center space-x-1 px-2 py-0.5 rounded-md text-[11px] font-mono text-amber-300 bg-amber-500/10 border border-amber-500/20">
+                    <Calendar className="w-3 h-3" />
+                    <span>Cible: {objectives.targetDeadlineDate}</span>
+                  </span>
+                )}
+              </div>
+
+              {/* Objectives Mini Gauges */}
+              {(objectives.targetProfitMin || objectives.targetLaborHoursMax || totalTasks > 0) && (
+                <div className="mt-3.5 p-2.5 rounded-xl bg-slate-950/60 border border-slate-850 space-y-2">
+                  {/* Task progress bar */}
+                  {totalTasks > 0 && (
+                    <div>
+                      <div className="flex items-center justify-between text-[11px] mb-1">
+                        <span className="text-slate-400 flex items-center space-x-1">
+                          <ListTodo className="w-3 h-3 text-purple-400" />
+                          <span>Tâches ({completedTasks}/{totalTasks})</span>
+                        </span>
+                        <span className="font-mono text-purple-300 font-bold">{taskPercent}%</span>
+                      </div>
+                      <div className="w-full h-1.5 bg-slate-800 rounded-full overflow-hidden">
+                        <div
+                          className="h-full bg-gradient-to-r from-pink-500 to-purple-500"
+                          style={{ width: `${taskPercent}%` }}
+                        />
+                      </div>
+                    </div>
+                  )}
+
+                  {/* Objective targets */}
+                  <div className="flex items-center justify-between text-[11px] font-mono text-slate-400">
+                    {objectives.targetProfitMin && (
+                      <span className="flex items-center space-x-1 text-pink-300">
+                        <DollarSign className="w-3 h-3" />
+                        <span>Cible: {formatCurrency(objectives.targetProfitMin)}</span>
+                      </span>
+                    )}
+                    {objectives.targetLaborHoursMax && (
+                      <span className="flex items-center space-x-1 text-amber-300">
+                        <Clock className="w-3 h-3" />
+                        <span>Max: {objectives.targetLaborHoursMax}h</span>
+                      </span>
+                    )}
+                  </div>
+                </div>
+              )}
+
+              {/* Financial & Time Metrics Summary */}
+              <div className="grid grid-cols-3 gap-2 mt-4 pt-4 border-t border-slate-800/80">
+                <div className="p-2 rounded-xl bg-slate-950/60 border border-slate-850 text-center">
+                  <span className="text-[10px] text-slate-400 block">Pièces & Frais</span>
+                  <span className="font-mono text-xs font-bold text-slate-200">
+                    {formatCurrency(fin.hardwareDirectCost)}
+                  </span>
+                </div>
+
+                <div className="p-2 rounded-xl bg-slate-950/60 border border-slate-850 text-center">
+                  <span className="text-[10px] text-slate-400 block">Temps Passé</span>
+                  <span className="font-mono text-xs font-bold text-amber-300">
+                    {formatMinutes(fin.laborMinutes)}
+                  </span>
+                </div>
+
+                <div className="p-2 rounded-xl bg-slate-950/60 border border-slate-850 text-center">
+                  <span className="text-[10px] text-slate-400 block">
+                    {project.status === 'sold' ? 'Prix Vendu' : 'Prix Cible'}
+                  </span>
+                  <span className="font-mono text-xs font-extrabold text-pink-400">
+                    {formatCurrency(fin.revenue)}
+                  </span>
+                </div>
+              </div>
+
+              {/* Net Profit & Margin Bar */}
+              <div className="mt-3 flex items-center justify-between px-3 py-2 rounded-xl bg-emerald-500/10 border border-emerald-500/20 text-xs">
+                <span className="text-emerald-300 font-medium">Bénéfice Net Réel :</span>
+                <div className="flex items-center space-x-2 font-mono">
+                  <span className="font-bold text-emerald-400 text-sm">
+                    {formatCurrency(fin.netProfit)}
+                  </span>
+                  <span className="text-[10px] px-1.5 py-0.5 rounded bg-emerald-500/20 text-emerald-300 font-extrabold">
+                    {fin.marginPercent.toFixed(0)}%
+                  </span>
+                </div>
+              </div>
+
+              {/* Quick Checklist Expander in Card */}
+              {totalTasks > 0 && (
+                <div className="mt-3">
+                  <button
+                    type="button"
+                    onClick={(e) => toggleChecklist(project.id, e)}
+                    className="w-full flex items-center justify-between text-xs text-slate-400 hover:text-white py-1 px-1 transition-colors"
+                  >
+                    <span className="flex items-center space-x-1.5">
+                      <ListTodo className="w-3.5 h-3.5 text-purple-400" />
+                      <span>Checklist ({completedTasks}/{totalTasks})</span>
+                    </span>
+                    {expandedChecklistId === project.id ? (
+                      <ChevronUp className="w-3.5 h-3.5" />
+                    ) : (
+                      <ChevronDown className="w-3.5 h-3.5" />
+                    )}
+                  </button>
+
+                  {expandedChecklistId === project.id && (
+                    <div
+                      onClick={(e) => e.stopPropagation()}
+                      className="mt-2 p-2.5 rounded-xl bg-slate-950/90 border border-purple-500/30"
+                    >
+                      <ProjectTasksChecklist project={project} compact={true} />
+                    </div>
+                  )}
+                </div>
+              )}
+            </div>
+
+            {/* Bottom Actions Toolbar */}
+            <div className="mt-5 pt-3 border-t border-slate-800 flex items-center justify-between gap-2">
+              {/* Quick Workflow Action Button */}
+              {project.status === 'draft' && (
+                <button
+                  type="button"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    updateProjectStatus(project.id, 'in_progress');
+                  }}
+                  className="flex items-center space-x-1 px-3 py-1.5 rounded-xl text-xs font-bold bg-purple-600 hover:bg-purple-500 text-white shadow-md transition-all"
+                >
+                  <Wrench className="w-3.5 h-3.5" />
+                  <span>Démarrer</span>
+                </button>
+              )}
+
+              {project.status === 'in_progress' && (
+                <div className="flex items-center space-x-1.5">
+                  <button
+                    type="button"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      startTimer(project.id, 'soudure_mods', `Atelier sur ${project.title}`);
+                    }}
+                    className={`flex items-center space-x-1 px-2.5 py-1.5 rounded-xl text-xs font-bold transition-all ${
+                      isTimerRunningOnThis
+                        ? 'bg-amber-500 text-slate-950 animate-pulse'
+                        : 'bg-slate-800 hover:bg-amber-500/20 text-amber-300 border border-amber-500/30'
+                    }`}
+                  >
+                    <Clock className="w-3.5 h-3.5" />
+                    <span>{isTimerRunningOnThis ? 'Chrono actif' : 'Chrono'}</span>
+                  </button>
+
+                  <button
+                    type="button"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      updateProjectStatus(project.id, 'qc_testing');
+                    }}
+                    className="flex items-center space-x-1 px-2.5 py-1.5 rounded-xl text-xs font-bold bg-cyan-600 hover:bg-cyan-500 text-white transition-all"
+                  >
+                    <span>Tests QC</span>
+                  </button>
+                </div>
+              )}
+
+              {project.status === 'qc_testing' && (
+                <button
+                  type="button"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    updateProjectStatus(project.id, 'in_stock_ready');
+                  }}
+                  className="flex items-center space-x-1 px-3 py-1.5 rounded-xl text-xs font-bold bg-emerald-600 hover:bg-emerald-500 text-white shadow-md transition-all"
+                >
+                  <Sparkles className="w-3.5 h-3.5" />
+                  <span>Prête en stock</span>
+                </button>
+              )}
+
+              {project.status === 'in_stock_ready' && (
+                <button
+                  type="button"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onOpenSoldModal(project);
+                  }}
+                  className="flex items-center space-x-1.5 px-3 py-1.5 rounded-xl text-xs font-black bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-400 hover:to-purple-500 text-white shadow-lg shadow-pink-500/20 transition-all"
+                >
+                  <ShoppingBag className="w-3.5 h-3.5" />
+                  <span>Vendre</span>
+                </button>
+              )}
+
+              {project.status === 'sold' && (
+                <span className="flex items-center space-x-1 text-xs font-bold text-emerald-400">
+                  <CheckCircle2 className="w-4 h-4" />
+                  <span>Vendue ({project.soldDate || 'OK'})</span>
+                </span>
+              )}
+
+              {/* View details arrow */}
+              <button
+                type="button"
+                className="flex items-center space-x-1 text-xs font-semibold text-slate-400 group-hover:text-pink-400 transition-colors ml-auto"
+              >
+                <span>Fiche & Coûts</span>
+                <ArrowRight className="w-3.5 h-3.5 group-hover:translate-x-1 transition-transform" />
+              </button>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
diff --git a/src/components/settings/CategoryManager.tsx b/src/components/settings/CategoryManager.tsx
new file mode 100644
index 0000000..cd20773
--- /dev/null
+++ b/src/components/settings/CategoryManager.tsx
@@ -0,0 +1,539 @@
+import React, { useState } from 'react';
+import {
+  Tag,
+  Gamepad2,
+  Sparkles,
+  Plus,
+  Edit2,
+  Trash2,
+  Check,
+  X,
+  Layers,
+  Palette,
+  Eye,
+  Search,
+} from 'lucide-react';
+import { useApp } from '../../context/AppContext';
+import type { AppCategory, CategoryType } from '../../types';
+
+const COLOR_PRESETS = [
+  { name: 'Cyan Néon', color: '#06b6d4', badge: 'bg-cyan-500/10 text-cyan-400 border-cyan-500/30' },
+  { name: 'Violet Cyber', color: '#a855f7', badge: 'bg-purple-500/10 text-purple-400 border-purple-500/30' },
+  { name: 'Rose UwU', color: '#ec4899', badge: 'bg-pink-500/10 text-pink-400 border-pink-500/30' },
+  { name: 'Emeraude LiPo', color: '#10b981', badge: 'bg-emerald-500/10 text-emerald-400 border-emerald-500/30' },
+  { name: 'Ambre Vintage', color: '#f59e0b', badge: 'bg-amber-500/10 text-amber-400 border-amber-500/30' },
+  { name: 'Bleu Royal', color: '#3b82f6', badge: 'bg-blue-500/10 text-blue-400 border-blue-500/30' },
+  { name: 'Indigo Pro', color: '#6366f1', badge: 'bg-indigo-500/10 text-indigo-400 border-indigo-500/30' },
+  { name: 'Rouge Flash', color: '#f43f5e', badge: 'bg-rose-500/10 text-rose-400 border-rose-500/30' },
+  { name: 'Lime Rétro', color: '#84cc16', badge: 'bg-lime-500/10 text-lime-400 border-lime-500/30' },
+  { name: 'Slate Neutre', color: '#64748b', badge: 'bg-slate-500/10 text-slate-400 border-slate-500/30' },
+];
+
+export const CategoryManager: React.FC = () => {
+  const {
+    categories,
+    addCategory,
+    updateCategory,
+    deleteCategory,
+    inventory,
+    projects,
+    modsLibrary,
+  } = useApp();
+
+  const [activeTab, setActiveTab] = useState<CategoryType>('part_category');
+  const [searchQuery, setSearchQuery] = useState('');
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [editingCategory, setEditingCategory] = useState<AppCategory | null>(null);
+
+  // Form State
+  const [formName, setFormName] = useState('');
+  const [formSlug, setFormSlug] = useState('');
+  const [formType, setFormType] = useState<CategoryType>('part_category');
+  const [formColor, setFormColor] = useState('#06b6d4');
+  const [formBadgeColor, setFormBadgeColor] = useState('bg-cyan-500/10 text-cyan-400 border-cyan-500/30');
+  const [formDescription, setFormDescription] = useState('');
+  const [formSortOrder, setFormSortOrder] = useState<number>(1);
+  const [formIsActive, setFormIsActive] = useState(true);
+
+  // Filter categories for the current tab and search query
+  const filteredCategories = categories
+    .filter((c) => c.type === activeTab)
+    .filter((c) => {
+      if (!searchQuery.trim()) return true;
+      const q = searchQuery.toLowerCase();
+      return (
+        c.name.toLowerCase().includes(q) ||
+        c.slug.toLowerCase().includes(q) ||
+        (c.description && c.description.toLowerCase().includes(q))
+      );
+    })
+    .sort((a, b) => a.sortOrder - b.sortOrder);
+
+  // Stats calculation
+  const partCategoriesCount = categories.filter((c) => c.type === 'part_category').length;
+  const consoleModelsCount = categories.filter((c) => c.type === 'console_model').length;
+  const modCategoriesCount = categories.filter((c) => c.type === 'mod_category').length;
+
+  const countUsage = (cat: AppCategory): number => {
+    if (cat.type === 'part_category') {
+      const invCount = inventory.filter((i) => i.category === cat.slug).length;
+      const projPartCount = projects.reduce(
+        (sum, p) => sum + p.parts.filter((pt) => pt.category === cat.slug).length,
+        0
+      );
+      return invCount + projPartCount;
+    } else if (cat.type === 'console_model') {
+      const invCount = inventory.filter((i) => i.consoleModel === cat.slug).length;
+      const projCount = projects.filter((p) => p.consoleModel === cat.slug).length;
+      const modCount = modsLibrary.filter((m) => m.compatibleModels?.includes(cat.slug)).length;
+      return invCount + projCount + modCount;
+    } else if (cat.type === 'mod_category') {
+      return modsLibrary.filter((m) => m.category === cat.slug).length;
+    }
+    return 0;
+  };
+
+  const handleOpenAdd = () => {
+    setEditingCategory(null);
+    setFormName('');
+    setFormSlug('');
+    setFormType(activeTab);
+    setFormColor('#06b6d4');
+    setFormBadgeColor('bg-cyan-500/10 text-cyan-400 border-cyan-500/30');
+    setFormDescription('');
+    setFormSortOrder(filteredCategories.length + 1);
+    setFormIsActive(true);
+    setIsModalOpen(true);
+  };
+
+  const handleOpenEdit = (cat: AppCategory) => {
+    setEditingCategory(cat);
+    setFormName(cat.name);
+    setFormSlug(cat.slug);
+    setFormType(cat.type);
+    setFormColor(cat.color || '#06b6d4');
+    setFormBadgeColor(cat.badgeColor || 'bg-cyan-500/10 text-cyan-400 border-cyan-500/30');
+    setFormDescription(cat.description || '');
+    setFormSortOrder(cat.sortOrder || 1);
+    setFormIsActive(cat.isActive);
+    setIsModalOpen(true);
+  };
+
+  const handleNameChange = (name: string) => {
+    setFormName(name);
+    if (!editingCategory) {
+      if (formType === 'console_model') {
+        setFormSlug(name);
+      } else {
+        const slug = name
+          .toLowerCase()
+          .normalize('NFD')
+          .replace(/[\u0300-\u036f]/g, '')
+          .replace(/[^a-z0-9]+/g, '_')
+          .replace(/^_+|_+$/g, '');
+        setFormSlug(slug);
+      }
+    }
+  };
+
+  const handleSelectPreset = (preset: typeof COLOR_PRESETS[0]) => {
+    setFormColor(preset.color);
+    setFormBadgeColor(preset.badge);
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!formName.trim() || !formSlug.trim()) return;
+
+    const payload = {
+      name: formName.trim(),
+      slug: formSlug.trim(),
+      type: formType,
+      color: formColor,
+      badgeColor: formBadgeColor,
+      description: formDescription.trim(),
+      sortOrder: Number(formSortOrder) || 1,
+      isActive: formIsActive,
+    };
+
+    if (editingCategory) {
+      updateCategory(editingCategory.id, payload);
+    } else {
+      addCategory(payload);
+    }
+
+    setIsModalOpen(false);
+  };
+
+  const handleDelete = (cat: AppCategory) => {
+    const usage = countUsage(cat);
+    const warning =
+      usage > 0
+        ? `Attention : Cet élément est utilisé par ${usage} pièce(s) / projet(s) existant(s). Êtes-vous sûr de vouloir le supprimer ?`
+        : `Confirmer la suppression de "${cat.name}" ?`;
+
+    if (confirm(warning)) {
+      deleteCategory(cat.id);
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      
+      {/* Header section with Stats & Add Button */}
+      <div className="glass-panel p-6 rounded-3xl border border-slate-800 space-y-4">
+        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+          <div className="space-y-1">
+            <div className="inline-flex items-center space-x-2 px-3 py-1 rounded-full text-xs font-semibold bg-cyan-500/10 text-cyan-400 border border-cyan-500/30">
+              <Layers className="w-3.5 h-3.5" />
+              <span>Gestionnaire d'Énumérations & Modèles</span>
+            </div>
+            <h3 className="text-xl font-black text-white font-display">
+              Catégories & Modèles de Consoles
+            </h3>
+            <p className="text-xs text-slate-400">
+              Ajoutez, personnalisez et réorganisez les catégories de pièces, modèles de consoles et types de mods de votre atelier.
+            </p>
+          </div>
+
+          <button
+            onClick={handleOpenAdd}
+            className="px-4 py-2.5 rounded-xl bg-gradient-to-r from-cyan-500 to-blue-600 hover:from-cyan-400 hover:to-blue-500 text-white text-xs font-bold flex items-center justify-center space-x-1.5 shadow-lg shadow-cyan-500/20 transition-all shrink-0"
+          >
+            <Plus className="w-4 h-4" />
+            <span>
+              {activeTab === 'part_category'
+                ? 'Nouvelle Catégorie Pièce'
+                : activeTab === 'console_model'
+                ? 'Nouveau Modèle Console'
+                : 'Nouvelle Catégorie Mod'}
+            </span>
+          </button>
+        </div>
+
+        {/* Tab Switcher & Search Bar */}
+        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 pt-2 border-t border-slate-800/80">
+          <div className="flex items-center space-x-1.5 p-1 rounded-2xl bg-slate-950 border border-slate-800 overflow-x-auto">
+            <button
+              onClick={() => setActiveTab('part_category')}
+              className={`px-3.5 py-2 rounded-xl text-xs font-bold flex items-center space-x-2 transition-all shrink-0 ${
+                activeTab === 'part_category'
+                  ? 'bg-cyan-500 text-slate-950 shadow-md shadow-cyan-500/20'
+                  : 'text-slate-400 hover:text-white'
+              }`}
+            >
+              <Tag className="w-3.5 h-3.5" />
+              <span>Pièces & Matériel</span>
+              <span className={`px-1.5 py-0.5 rounded-md text-[10px] font-mono ${
+                activeTab === 'part_category' ? 'bg-slate-950/30 text-slate-950' : 'bg-slate-800 text-slate-400'
+              }`}>
+                {partCategoriesCount}
+              </span>
+            </button>
+
+            <button
+              onClick={() => setActiveTab('console_model')}
+              className={`px-3.5 py-2 rounded-xl text-xs font-bold flex items-center space-x-2 transition-all shrink-0 ${
+                activeTab === 'console_model'
+                  ? 'bg-purple-500 text-white shadow-md shadow-purple-500/20'
+                  : 'text-slate-400 hover:text-white'
+              }`}
+            >
+              <Gamepad2 className="w-3.5 h-3.5" />
+              <span>Modèles de Consoles</span>
+              <span className={`px-1.5 py-0.5 rounded-md text-[10px] font-mono ${
+                activeTab === 'console_model' ? 'bg-white/20 text-white' : 'bg-slate-800 text-slate-400'
+              }`}>
+                {consoleModelsCount}
+              </span>
+            </button>
+
+            <button
+              onClick={() => setActiveTab('mod_category')}
+              className={`px-3.5 py-2 rounded-xl text-xs font-bold flex items-center space-x-2 transition-all shrink-0 ${
+                activeTab === 'mod_category'
+                  ? 'bg-pink-500 text-white shadow-md shadow-pink-500/20'
+                  : 'text-slate-400 hover:text-white'
+              }`}
+            >
+              <Sparkles className="w-3.5 h-3.5" />
+              <span>Catégories de Mods</span>
+              <span className={`px-1.5 py-0.5 rounded-md text-[10px] font-mono ${
+                activeTab === 'mod_category' ? 'bg-white/20 text-white' : 'bg-slate-800 text-slate-400'
+              }`}>
+                {modCategoriesCount}
+              </span>
+            </button>
+          </div>
+
+          <div className="relative">
+            <Search className="w-3.5 h-3.5 text-slate-500 absolute left-3 top-1/2 -translate-y-1/2" />
+            <input
+              type="text"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              placeholder="Rechercher un modèle / catégorie..."
+              className="w-full sm:w-64 pl-8 pr-3 py-2 rounded-xl bg-slate-950 border border-slate-800 text-white text-xs placeholder-slate-500 focus:outline-none focus:border-cyan-500"
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* Category List Grid */}
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+        {filteredCategories.length === 0 ? (
+          <div className="md:col-span-2 glass-panel p-8 rounded-3xl border border-slate-800 text-center space-y-2">
+            <Layers className="w-8 h-8 text-slate-600 mx-auto" />
+            <div className="text-sm font-bold text-slate-300">Aucun élément trouvé</div>
+            <p className="text-xs text-slate-500">
+              {searchQuery ? 'Aucun résultat pour cette recherche.' : 'Cliquez sur Ajouter pour créer votre premier élément.'}
+            </p>
+          </div>
+        ) : (
+          filteredCategories.map((cat) => {
+            const usage = countUsage(cat);
+            return (
+              <div
+                key={cat.id}
+                className="glass-panel p-4 rounded-2xl border border-slate-800/90 hover:border-slate-700 bg-slate-950/60 flex items-center justify-between gap-3 transition-all group"
+              >
+                <div className="flex items-center space-x-3.5 min-w-0">
+                  <div
+                    className="w-4 h-4 rounded-full shrink-0 shadow-sm"
+                    style={{ backgroundColor: cat.color || '#06b6d4' }}
+                  />
+                  <div className="min-w-0">
+                    <div className="flex items-center space-x-2">
+                      <span className="text-sm font-bold text-white truncate">{cat.name}</span>
+                      <span className={`px-2 py-0.5 rounded-full text-[10px] font-semibold border ${cat.badgeColor || 'bg-slate-500/10 text-slate-400 border-slate-500/30'}`}>
+                        {cat.slug}
+                      </span>
+                      {!cat.isActive && (
+                        <span className="px-1.5 py-0.5 rounded text-[9px] font-bold bg-rose-500/10 text-rose-400 border border-rose-500/30">
+                          Désactivé
+                        </span>
+                      )}
+                    </div>
+                    {cat.description && (
+                      <p className="text-[11px] text-slate-400 truncate mt-0.5">
+                        {cat.description}
+                      </p>
+                    )}
+                    <div className="text-[10px] text-slate-500 mt-1 flex items-center space-x-2">
+                      <span>Ordre : #{cat.sortOrder}</span>
+                      <span>•</span>
+                      <span>{usage} utilisation(s)</span>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="flex items-center space-x-1 shrink-0">
+                  <button
+                    onClick={() => handleOpenEdit(cat)}
+                    className="p-2 rounded-lg text-slate-400 hover:text-cyan-400 hover:bg-slate-800/80 transition-colors"
+                    title="Modifier"
+                  >
+                    <Edit2 className="w-3.5 h-3.5" />
+                  </button>
+                  <button
+                    onClick={() => handleDelete(cat)}
+                    className="p-2 rounded-lg text-slate-400 hover:text-rose-400 hover:bg-rose-500/10 transition-colors"
+                    title="Supprimer"
+                  >
+                    <Trash2 className="w-3.5 h-3.5" />
+                  </button>
+                </div>
+              </div>
+            );
+          })
+        )}
+      </div>
+
+      {/* Modal Add / Edit Category */}
+      {isModalOpen && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/80 backdrop-blur-md overflow-y-auto">
+          <div className="relative w-full max-w-lg bg-slate-900 border border-slate-700/80 rounded-3xl shadow-2xl overflow-hidden my-8 animate-fadeIn">
+            
+            {/* Modal Header */}
+            <div className="flex items-center justify-between px-6 py-4 border-b border-slate-800 bg-slate-950/50">
+              <div className="flex items-center space-x-3">
+                <div className="w-9 h-9 rounded-xl bg-cyan-500/10 border border-cyan-500/30 flex items-center justify-center text-cyan-400">
+                  <Layers className="w-4 h-4" />
+                </div>
+                <div>
+                  <h3 className="text-base font-bold text-white">
+                    {editingCategory ? `Modifier "${editingCategory.name}"` : 'Ajouter un Élément'}
+                  </h3>
+                  <p className="text-[11px] text-slate-400">
+                    Configuration de la table d'énumération NoCodeBackend
+                  </p>
+                </div>
+              </div>
+              <button
+                onClick={() => setIsModalOpen(false)}
+                className="text-slate-400 hover:text-white p-2 rounded-xl hover:bg-slate-800 transition-colors"
+              >
+                <X className="w-4 h-4" />
+              </button>
+            </div>
+
+            {/* Modal Form */}
+            <form onSubmit={handleSubmit} className="p-6 space-y-4">
+              
+              {/* Type Selector */}
+              <div className="space-y-1">
+                <label className="text-xs font-semibold text-slate-300">Type de modèle / énumération</label>
+                <select
+                  value={formType}
+                  onChange={(e) => setFormType(e.target.value as CategoryType)}
+                  className="w-full px-3.5 py-2 rounded-xl bg-slate-950 border border-slate-700 text-white text-xs focus:outline-none focus:border-cyan-500"
+                >
+                  <option value="part_category">Catégorie de Pièce / Matériel (part_category)</option>
+                  <option value="console_model">Modèle de Console Supporté (console_model)</option>
+                  <option value="mod_category">Catégorie de Recette de Mod (mod_category)</option>
+                </select>
+              </div>
+
+              {/* Name & Slug */}
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                <div className="space-y-1">
+                  <label className="text-xs font-semibold text-slate-300">Nom lisible / Libellé *</label>
+                  <input
+                    type="text"
+                    required
+                    value={formName}
+                    onChange={(e) => handleNameChange(e.target.value)}
+                    placeholder="Ex: Écran IPS Laminé, PS Vita..."
+                    className="w-full px-3.5 py-2 rounded-xl bg-slate-950 border border-slate-700 text-white text-xs focus:outline-none focus:border-cyan-500"
+                  />
+                </div>
+
+                <div className="space-y-1">
+                  <label className="text-xs font-semibold text-slate-300">Code Slug / Identifiant *</label>
+                  <input
+                    type="text"
+                    required
+                    value={formSlug}
+                    onChange={(e) => setFormSlug(e.target.value)}
+                    placeholder="Ex: screen, ps_vita..."
+                    className="w-full px-3.5 py-2 rounded-xl bg-slate-950 border border-slate-700 text-white text-xs font-mono focus:outline-none focus:border-cyan-500"
+                  />
+                </div>
+              </div>
+
+              {/* Description */}
+              <div className="space-y-1">
+                <label className="text-xs font-semibold text-slate-300">Description / Remarques (Optionnel)</label>
+                <input
+                  type="text"
+                  value={formDescription}
+                  onChange={(e) => setFormDescription(e.target.value)}
+                  placeholder="Ex: Kits d'écran rétroéclairés IPS, AMOLED..."
+                  className="w-full px-3.5 py-2 rounded-xl bg-slate-950 border border-slate-700 text-white text-xs focus:outline-none focus:border-cyan-500"
+                />
+              </div>
+
+              {/* Color Presets Picker */}
+              <div className="space-y-2">
+                <label className="text-xs font-semibold text-slate-300 flex items-center justify-between">
+                  <span className="flex items-center space-x-1.5">
+                    <Palette className="w-3.5 h-3.5 text-cyan-400" />
+                    <span>Palette de Couleur & Style de Badge</span>
+                  </span>
+                  <span className="text-[10px] font-mono text-slate-400">{formColor}</span>
+                </label>
+
+                <div className="flex items-center space-x-2 overflow-x-auto pb-1">
+                  {COLOR_PRESETS.map((preset) => (
+                    <button
+                      key={preset.color}
+                      type="button"
+                      onClick={() => handleSelectPreset(preset)}
+                      className={`w-7 h-7 rounded-full shrink-0 border-2 transition-transform ${
+                        formColor === preset.color
+                          ? 'border-white scale-110 shadow-lg'
+                          : 'border-transparent hover:scale-105'
+                      }`}
+                      style={{ backgroundColor: preset.color }}
+                      title={preset.name}
+                    />
+                  ))}
+                </div>
+              </div>
+
+              {/* Live Preview Box */}
+              <div className="p-3.5 rounded-2xl bg-slate-950/80 border border-slate-800 space-y-2">
+                <div className="text-[10px] uppercase font-bold text-slate-400 flex items-center space-x-1">
+                  <Eye className="w-3 h-3" />
+                  <span>Aperçu du Rendu dans l'Application</span>
+                </div>
+                <div className="flex items-center space-x-3">
+                  <div
+                    className="w-3.5 h-3.5 rounded-full shrink-0"
+                    style={{ backgroundColor: formColor }}
+                  />
+                  <span className="text-xs font-bold text-white">
+                    {formName || 'Nom de la catégorie'}
+                  </span>
+                  <span className={`px-2.5 py-0.5 rounded-full text-xs font-semibold border ${formBadgeColor}`}>
+                    {formName || 'Badge'}
+                  </span>
+                </div>
+              </div>
+
+              {/* Row: Sort Order & Active */}
+              <div className="grid grid-cols-2 gap-3">
+                <div className="space-y-1">
+                  <label className="text-xs font-semibold text-slate-300">Ordre d'affichage</label>
+                  <input
+                    type="number"
+                    min="1"
+                    value={formSortOrder}
+                    onChange={(e) => setFormSortOrder(parseInt(e.target.value, 10) || 1)}
+                    className="w-full px-3 py-2 rounded-xl bg-slate-950 border border-slate-700 text-white text-xs font-mono"
+                  />
+                </div>
+
+                <div className="space-y-1">
+                  <label className="text-xs font-semibold text-slate-300">Statut</label>
+                  <button
+                    type="button"
+                    onClick={() => setFormIsActive(!formIsActive)}
+                    className={`w-full py-2 px-3 rounded-xl border text-xs font-bold flex items-center justify-center space-x-1.5 transition-all ${
+                      formIsActive
+                        ? 'bg-emerald-500/10 border-emerald-500/40 text-emerald-400'
+                        : 'bg-slate-800 border-slate-700 text-slate-400'
+                    }`}
+                  >
+                    {formIsActive ? <Check className="w-3.5 h-3.5" /> : <X className="w-3.5 h-3.5" />}
+                    <span>{formIsActive ? 'Actif (Visible)' : 'Désactivé'}</span>
+                  </button>
+                </div>
+              </div>
+
+              {/* Modal Actions */}
+              <div className="flex items-center justify-end space-x-2.5 pt-3 border-t border-slate-800">
+                <button
+                  type="button"
+                  onClick={() => setIsModalOpen(false)}
+                  className="px-4 py-2 rounded-xl bg-slate-800 text-slate-300 hover:text-white text-xs font-semibold transition-colors"
+                >
+                  Annuler
+                </button>
+                <button
+                  type="submit"
+                  className="px-5 py-2 rounded-xl bg-gradient-to-r from-cyan-500 to-blue-600 text-white text-xs font-bold shadow-lg shadow-cyan-500/20 hover:scale-[1.02] active:scale-[0.98] transition-all"
+                >
+                  {editingCategory ? 'Sauvegarder' : 'Ajouter au catalogue'}
+                </button>
+              </div>
+
+            </form>
+
+          </div>
+        </div>
+      )}
+
+    </div>
+  );
+};
diff --git a/src/components/settings/SettingsView.tsx b/src/components/settings/SettingsView.tsx
new file mode 100644
index 0000000..665a5e8
--- /dev/null
+++ b/src/components/settings/SettingsView.tsx
@@ -0,0 +1,700 @@
+import React, { useState, useRef } from 'react';
+import {
+  Settings as SettingsIcon,
+  Palette,
+  DollarSign,
+  Download,
+  Upload,
+  RotateCcw,
+  Building,
+  Save,
+  ShieldCheck,
+  FileSpreadsheet,
+  FileCode,
+  Database,
+  Cloud,
+  RefreshCw,
+  CheckCircle2,
+  AlertCircle,
+  KeyRound,
+  Layers,
+  Sliders,
+  Lock,
+  ShieldAlert,
+} from 'lucide-react';
+import { useApp } from '../../context/AppContext';
+import { CategoryManager } from './CategoryManager';
+import { changeUserPassword } from '../../services/authService';
+
+export const SettingsView: React.FC = () => {
+  const {
+    settings,
+    categories,
+    inventory,
+    projects,
+    modsLibrary,
+    updateSettings,
+    exportJSON,
+    importJSON,
+    exportInventoryCSV,
+    exportProjectsCSV,
+    resetToSampleData,
+    dbSyncStatus,
+    lastSyncedAt,
+    refreshFromDatabase,
+    syncAllToDatabase,
+    setShowAuthModal,
+    authSession,
+    addToast,
+  } = useApp();
+
+  const [settingsSection, setSettingsSection] = useState<'general' | 'categories' | 'database'>('categories');
+  const [businessName, setBusinessName] = useState(settings.businessName);
+  const [workshopLocation, setWorkshopLocation] = useState(settings.workshopLocation || '');
+  const [currency, setCurrency] = useState(settings.currency);
+  const [defaultHourlyRate, setDefaultHourlyRate] = useState(settings.defaultHourlyRate);
+  const [defaultPlatformFeePercent, setDefaultPlatformFeePercent] = useState(settings.defaultPlatformFeePercent);
+  const [theme, setTheme] = useState(settings.theme);
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const [isPushing, setIsPushing] = useState(false);
+
+  // Password change state
+  const [oldPassword, setOldPassword] = useState('');
+  const [newPassword, setNewPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [isChangingPassword, setIsChangingPassword] = useState(false);
+  const [passwordStatus, setPasswordStatus] = useState<{ type: 'success' | 'error'; message: string } | null>(null);
+
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleSaveSettings = (e: React.FormEvent) => {
+    e.preventDefault();
+    updateSettings({
+      businessName: businessName.trim(),
+      workshopLocation: workshopLocation.trim(),
+      currency,
+      defaultHourlyRate: Number(defaultHourlyRate) || 25,
+      defaultPlatformFeePercent: Number(defaultPlatformFeePercent) || 0,
+      theme,
+    });
+  };
+
+  const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onload = (event) => {
+      const content = event.target?.result as string;
+      if (content) {
+        importJSON(content);
+      }
+    };
+    reader.readAsText(file);
+    if (fileInputRef.current) fileInputRef.current.value = '';
+  };
+
+  const handleManualRefresh = async () => {
+    setIsRefreshing(true);
+    try {
+      await refreshFromDatabase();
+    } finally {
+      setIsRefreshing(false);
+    }
+  };
+
+  const handleManualPush = async () => {
+    setIsPushing(true);
+    try {
+      await syncAllToDatabase();
+    } finally {
+      setIsPushing(false);
+    }
+  };
+
+  const handlePasswordSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setPasswordStatus(null);
+
+    if (!oldPassword.trim() || !newPassword.trim() || !confirmPassword.trim()) {
+      setPasswordStatus({ type: 'error', message: 'Veuillez remplir tous les champs de mot de passe.' });
+      return;
+    }
+
+    if (newPassword !== confirmPassword) {
+      setPasswordStatus({ type: 'error', message: 'Le nouveau mot de passe et la confirmation ne correspondent pas.' });
+      return;
+    }
+
+    if (newPassword.length < 4) {
+      setPasswordStatus({ type: 'error', message: 'Le nouveau mot de passe doit comporter au moins 4 caractères.' });
+      return;
+    }
+
+    setIsChangingPassword(true);
+    try {
+      const usernameToUpdate = authSession?.user?.name || 'streaper2';
+      const result = await changeUserPassword(usernameToUpdate, oldPassword, newPassword);
+
+      if (result.success) {
+        setPasswordStatus({ type: 'success', message: result.message || 'Mot de passe mis à jour avec succès !' });
+        setOldPassword('');
+        setNewPassword('');
+        setConfirmPassword('');
+        addToast({
+          type: 'success',
+          title: 'Sécurité mise à jour',
+          message: 'Votre nouveau mot de passe a été enregistré en base de données.',
+        });
+      } else {
+        setPasswordStatus({ type: 'error', message: result.error || 'Échec de modification du mot de passe.' });
+      }
+    } catch (err: any) {
+      setPasswordStatus({ type: 'error', message: err.message || 'Erreur lors de la mise à jour.' });
+    } finally {
+      setIsChangingPassword(false);
+    }
+  };
+
+  return (
+    <div className="space-y-8 pb-12 animate-fadeIn max-w-4xl mx-auto">
+      
+      {/* Title */}
+      <div>
+        <div className="inline-flex items-center space-x-2 px-3 py-1 rounded-full text-xs font-semibold bg-pink-500/10 text-pink-400 border border-pink-500/30 mb-2">
+          <SettingsIcon className="w-3.5 h-3.5" />
+          <span>Paramètres & Préférences</span>
+        </div>
+        <h2 className="text-2xl sm:text-3xl font-black text-white font-display">
+          Configuration de l'Atelier uwuFinances
+        </h2>
+        <p className="text-slate-400 text-xs sm:text-sm">
+          Personnalisez votre identité d'atelier, gérez les tables d'énumérations (catégories & modèles) et synchronisez avec le Cloud NoCodeBackend.
+        </p>
+      </div>
+
+      {/* Navigation Sub-Tabs */}
+      <div className="flex items-center space-x-2 p-1.5 rounded-2xl bg-slate-950 border border-slate-800">
+        <button
+          onClick={() => setSettingsSection('categories')}
+          className={`flex-1 py-2.5 px-4 rounded-xl text-xs font-bold flex items-center justify-center space-x-2 transition-all ${
+            settingsSection === 'categories'
+              ? 'bg-gradient-to-r from-cyan-500 to-blue-600 text-white shadow-lg shadow-cyan-500/20'
+              : 'text-slate-400 hover:text-white'
+          }`}
+        >
+          <Layers className="w-4 h-4" />
+          <span>Catégories & Modèles ({categories.length})</span>
+        </button>
+
+        <button
+          onClick={() => setSettingsSection('general')}
+          className={`flex-1 py-2.5 px-4 rounded-xl text-xs font-bold flex items-center justify-center space-x-2 transition-all ${
+            settingsSection === 'general'
+              ? 'bg-gradient-to-r from-pink-500 to-purple-600 text-white shadow-lg shadow-pink-500/20'
+              : 'text-slate-400 hover:text-white'
+          }`}
+        >
+          <Sliders className="w-4 h-4" />
+          <span>Atelier, Taux & Thème</span>
+        </button>
+
+        <button
+          onClick={() => setSettingsSection('database')}
+          className={`flex-1 py-2.5 px-4 rounded-xl text-xs font-bold flex items-center justify-center space-x-2 transition-all ${
+            settingsSection === 'database'
+              ? 'bg-slate-800 text-cyan-400 border border-cyan-500/30 shadow-md'
+              : 'text-slate-400 hover:text-white'
+          }`}
+        >
+          <Database className="w-4 h-4" />
+          <span>Base Cloud & Sauvegardes</span>
+        </button>
+      </div>
+
+      {/* Cloud Database (NoCodeBackend) Card */}
+      <div className="glass-panel p-6 sm:p-8 rounded-3xl border border-pink-500/30 bg-gradient-to-br from-slate-950 via-slate-900/90 to-pink-950/20 space-y-6 relative overflow-hidden shadow-xl shadow-pink-500/5">
+        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+          <div className="flex items-center space-x-3.5">
+            <div className="p-3 rounded-2xl bg-pink-500/15 border border-pink-500/30 text-pink-400">
+              <Database className="w-6 h-6" />
+            </div>
+            <div>
+              <div className="flex items-center space-x-2">
+                <h3 className="text-base font-bold text-white">Base de Données Cloud (NoCodeBackend)</h3>
+                <span className={`inline-flex items-center space-x-1 px-2.5 py-0.5 rounded-full text-[11px] font-semibold border ${
+                  dbSyncStatus === 'connected'
+                    ? 'bg-emerald-500/10 text-emerald-400 border-emerald-500/30'
+                    : dbSyncStatus === 'syncing'
+                    ? 'bg-amber-500/10 text-amber-400 border-amber-500/30'
+                    : 'bg-rose-500/10 text-rose-400 border-rose-500/30'
+                }`}>
+                  {dbSyncStatus === 'connected' && <CheckCircle2 className="w-3 h-3" />}
+                  {dbSyncStatus === 'syncing' && <RefreshCw className="w-3 h-3 animate-spin" />}
+                  {dbSyncStatus === 'offline' && <AlertCircle className="w-3 h-3" />}
+                  {dbSyncStatus === 'error' && <AlertCircle className="w-3 h-3" />}
+                  <span>
+                    {dbSyncStatus === 'connected' ? 'En ligne & Synchronisé' : dbSyncStatus === 'syncing' ? 'Synchronisation...' : 'Hors-ligne'}
+                  </span>
+                </span>
+              </div>
+              <p className="text-xs text-slate-400 mt-0.5">
+                Instance : <span className="font-mono text-pink-300 font-semibold">54770_uwu_finances</span> • Région : <span className="text-slate-300 font-semibold">EU (Frankfurt)</span>
+              </p>
+            </div>
+          </div>
+
+          <div className="flex flex-wrap items-center gap-2">
+            <button
+              type="button"
+              onClick={() => setShowAuthModal(true)}
+              className="px-3.5 py-2 rounded-xl bg-slate-900 border border-cyan-500/40 hover:bg-cyan-500/10 text-cyan-300 text-xs font-semibold flex items-center space-x-1.5 transition-all cursor-pointer"
+              title="Gérer la session utilisateur et le jeton JWT"
+            >
+              <KeyRound className="w-3.5 h-3.5 text-cyan-400" />
+              <span>Session & Jeton JWT</span>
+            </button>
+
+            <button
+              onClick={handleManualRefresh}
+              disabled={isRefreshing || isPushing}
+              className="px-3.5 py-2 rounded-xl bg-slate-900 border border-slate-700 hover:border-pink-500/50 text-slate-200 hover:text-white text-xs font-semibold flex items-center space-x-1.5 transition-all disabled:opacity-50 cursor-pointer"
+              title="Recharger toutes les données depuis NoCodeBackend"
+            >
+              <RefreshCw className={`w-3.5 h-3.5 ${isRefreshing ? 'animate-spin text-pink-400' : ''}`} />
+              <span>Recharger du Cloud</span>
+            </button>
+
+            <button
+              onClick={handleManualPush}
+              disabled={isRefreshing || isPushing}
+              className="px-3.5 py-2 rounded-xl bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-400 hover:to-purple-500 text-white text-xs font-bold flex items-center space-x-1.5 shadow-lg shadow-pink-500/20 transition-all disabled:opacity-50 cursor-pointer"
+              title="Pousser l'état local actuel vers la base cloud"
+            >
+              <Cloud className="w-3.5 h-3.5" />
+              <span>Forcer Synchro Cloud</span>
+            </button>
+          </div>
+        </div>
+
+        {/* Database Metrics Grid */}
+        <div className="grid grid-cols-2 sm:grid-cols-5 gap-3 pt-2">
+          <div className="p-3 rounded-2xl bg-slate-950/80 border border-slate-800">
+            <div className="text-[10px] uppercase font-bold text-slate-400">Énumérations / Catégories</div>
+            <div className="text-lg font-black font-mono text-cyan-400 mt-1">{categories.length}</div>
+          </div>
+          <div className="p-3 rounded-2xl bg-slate-950/80 border border-slate-800">
+            <div className="text-[10px] uppercase font-bold text-slate-400">Pièces en Stock (DB)</div>
+            <div className="text-lg font-black font-mono text-cyan-300 mt-1">{inventory.length}</div>
+          </div>
+          <div className="p-3 rounded-2xl bg-slate-950/80 border border-slate-800">
+            <div className="text-[10px] uppercase font-bold text-slate-400">Projets Modding (DB)</div>
+            <div className="text-lg font-black font-mono text-purple-300 mt-1">{projects.length}</div>
+          </div>
+          <div className="p-3 rounded-2xl bg-slate-950/80 border border-slate-800">
+            <div className="text-[10px] uppercase font-bold text-slate-400">Recettes de Mods (DB)</div>
+            <div className="text-lg font-black font-mono text-pink-300 mt-1">{modsLibrary.length}</div>
+          </div>
+          <div className="p-3 rounded-2xl bg-slate-950/80 border border-slate-800 col-span-2 sm:col-span-1">
+            <div className="text-[10px] uppercase font-bold text-slate-400">Dernière Synchro</div>
+            <div className="text-xs font-mono text-slate-300 mt-2 font-medium truncate">
+              {lastSyncedAt ? lastSyncedAt.toLocaleTimeString('fr-FR') : 'En attente...'}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Tab 1: Category & Enum Manager */}
+      {settingsSection === 'categories' && (
+        <CategoryManager />
+      )}
+
+      {/* Tab 2: Studio Preferences & General Settings */}
+      {settingsSection === 'general' && (
+        <form onSubmit={handleSaveSettings} className="space-y-6">
+          {/* Studio Identity Card */}
+          <div className="glass-panel p-6 rounded-3xl border border-slate-800 space-y-4">
+            <h3 className="text-sm font-bold uppercase tracking-wider text-pink-400 flex items-center space-x-2">
+              <Building className="w-4 h-4" />
+              <span>Identité de l'Atelier & Fiches Clients</span>
+            </h3>
+
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+              <div className="space-y-1.5">
+                <label className="text-xs font-semibold text-slate-300">
+                  Nom Commercial de l'Atelier / Studio
+                </label>
+                <input
+                  type="text"
+                  value={businessName}
+                  onChange={(e) => setBusinessName(e.target.value)}
+                  placeholder="Ex: uwu Custom Studio 🎮"
+                  className="w-full px-3.5 py-2.5 rounded-xl bg-slate-950 border border-slate-700 text-white text-sm focus:outline-none focus:border-pink-500"
+                />
+              </div>
+
+              <div className="space-y-1.5">
+                <label className="text-xs font-semibold text-slate-300">
+                  Emplacement / Ville de l'Atelier
+                </label>
+                <input
+                  type="text"
+                  value={workshopLocation}
+                  onChange={(e) => setWorkshopLocation(e.target.value)}
+                  placeholder="Ex: Atelier Console Modding - Lyon"
+                  className="w-full px-3.5 py-2.5 rounded-xl bg-slate-950 border border-slate-700 text-white text-sm focus:outline-none focus:border-pink-500"
+                />
+              </div>
+            </div>
+          </div>
+
+          {/* Hourly Rates & Commissions */}
+          <div className="glass-panel p-6 rounded-3xl border border-slate-800 space-y-4">
+            <h3 className="text-sm font-bold uppercase tracking-wider text-amber-400 flex items-center space-x-2">
+              <DollarSign className="w-4 h-4" />
+              <span>Taux Horaires & Frais Plateformes</span>
+            </h3>
+
+            <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+              <div className="space-y-1.5">
+                <label className="text-xs font-semibold text-slate-300">
+                  Devise Principale
+                </label>
+                <select
+                  value={currency}
+                  onChange={(e) => setCurrency(e.target.value)}
+                  className="w-full px-3.5 py-2.5 rounded-xl bg-slate-950 border border-slate-700 text-white text-sm focus:outline-none focus:border-amber-400"
+                >
+                  <option value="€">EUR (€)</option>
+                  <option value="$">USD ($)</option>
+                  <option value="£">GBP (£)</option>
+                  <option value="CHF">CHF</option>
+                </select>
+              </div>
+
+              <div className="space-y-1.5">
+                <label className="text-xs font-semibold text-slate-300">
+                  Taux Horaire par Défaut (€/heure)
+                </label>
+                <input
+                  type="number"
+                  step="0.5"
+                  min="0"
+                  value={defaultHourlyRate}
+                  onChange={(e) => setDefaultHourlyRate(parseFloat(e.target.value) || 0)}
+                  className="w-full px-3.5 py-2.5 rounded-xl bg-slate-950 border border-slate-700 text-white text-sm font-mono focus:outline-none focus:border-amber-400"
+                />
+              </div>
+
+              <div className="space-y-1.5">
+                <label className="text-xs font-semibold text-slate-300">
+                  Commission Plateforme par Défaut (%)
+                </label>
+                <input
+                  type="number"
+                  step="0.5"
+                  min="0"
+                  value={defaultPlatformFeePercent}
+                  onChange={(e) => setDefaultPlatformFeePercent(parseFloat(e.target.value) || 0)}
+                  className="w-full px-3.5 py-2.5 rounded-xl bg-slate-950 border border-slate-700 text-white text-sm font-mono focus:outline-none focus:border-amber-400"
+                />
+              </div>
+            </div>
+          </div>
+
+          {/* Theme Customization */}
+          <div className="glass-panel p-6 rounded-3xl border border-slate-800 space-y-4">
+            <div className="flex items-center justify-between">
+              <h3 className="text-sm font-bold uppercase tracking-wider text-purple-400 flex items-center space-x-2">
+                <Palette className="w-4 h-4" />
+                <span>Thème Visuel & Ambiance</span>
+              </h3>
+              <span className="text-[11px] text-slate-400">
+                Changement appliqué instantanément
+              </span>
+            </div>
+
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3.5">
+              {[
+                {
+                  id: 'uwu-pink',
+                  name: '🌸 UwU Pink Neo',
+                  desc: 'Pastel, néons & retrogaming',
+                  colors: ['#ec4899', '#a855f7', '#06b6d4'],
+                  activeBorder: 'border-pink-500 bg-pink-500/10 shadow-lg shadow-pink-500/20',
+                },
+                {
+                  id: 'cyberpunk',
+                  name: '⚡ Cyberpunk Dark',
+                  desc: 'Néon violet, cyan & high-tech',
+                  colors: ['#00f0ff', '#9d00ff', '#fcee0a'],
+                  activeBorder: 'border-cyan-400 bg-cyan-500/10 shadow-lg shadow-cyan-500/20',
+                },
+                {
+                  id: 'retro-gameboy',
+                  name: '🎮 Rétro GameBoy',
+                  desc: 'Ambiance DMG vintage & dot-matrix',
+                  colors: ['#8bac0f', '#9bbc0f', '#9b2242'],
+                  activeBorder: 'border-lime-500 bg-lime-500/10 shadow-lg shadow-lime-500/20',
+                },
+                {
+                  id: 'modern-dark',
+                  name: '🌑 Modern Dark',
+                  desc: 'Minimaliste titane & ardoise pro',
+                  colors: ['#38bdf8', '#818cf8', '#f8fafc'],
+                  activeBorder: 'border-sky-400 bg-sky-500/10 shadow-lg shadow-sky-500/20',
+                },
+              ].map((t) => {
+                const isSelected = (theme === t.id) || (settings.theme === t.id);
+                return (
+                  <button
+                    key={t.id}
+                    type="button"
+                    onClick={() => {
+                      setTheme(t.id as any);
+                      updateSettings({ theme: t.id as any });
+                    }}
+                    className={`p-4 rounded-2xl border text-left flex flex-col justify-between space-y-3 transition-all cursor-pointer ${
+                      isSelected
+                        ? t.activeBorder
+                        : 'border-slate-800 bg-slate-950/60 hover:border-slate-700 hover:bg-slate-900/50'
+                    }`}
+                  >
+                    <div>
+                      <div className="flex items-center justify-between">
+                        <div className="font-bold text-xs text-white">{t.name}</div>
+                        {isSelected && (
+                          <span className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse" />
+                        )}
+                      </div>
+                      <div className="text-[11px] text-slate-400 mt-1">{t.desc}</div>
+                    </div>
+
+                    {/* Color swatches */}
+                    <div className="flex items-center space-x-1.5 pt-1">
+                      {t.colors.map((c, idx) => (
+                        <span
+                          key={idx}
+                          className="w-4 h-4 rounded-full border border-black/30 shadow-inner"
+                          style={{ backgroundColor: c }}
+                        />
+                      ))}
+                    </div>
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+
+          {/* Security & User Password Management */}
+          <div className="glass-panel p-6 rounded-3xl border border-slate-800 space-y-4">
+            <div className="flex items-center justify-between">
+              <h3 className="text-sm font-bold uppercase tracking-wider text-rose-400 flex items-center space-x-2">
+                <Lock className="w-4 h-4" />
+                <span>Sécurité & Mot de Passe de l'Atelier</span>
+              </h3>
+              <span className="text-[11px] font-mono text-slate-400">
+                Compte : <span className="text-pink-300 font-bold">{authSession?.user?.name || 'streaper2'}</span>
+              </span>
+            </div>
+
+            <p className="text-xs text-slate-400">
+              Modifiez votre mot de passe d'accès. La modification sera immédiatement synchronisée dans la table <span className="font-mono text-cyan-300">users</span> de votre base NoCodeBackend.
+            </p>
+
+            {passwordStatus && (
+              <div className={`p-3.5 rounded-2xl border text-xs flex items-center space-x-2 ${
+                passwordStatus.type === 'success'
+                  ? 'bg-emerald-500/10 text-emerald-300 border-emerald-500/30'
+                  : 'bg-rose-500/10 text-rose-300 border-rose-500/30'
+              }`}>
+                {passwordStatus.type === 'success' ? (
+                  <CheckCircle2 className="w-4 h-4 text-emerald-400 shrink-0" />
+                ) : (
+                  <ShieldAlert className="w-4 h-4 text-rose-400 shrink-0" />
+                )}
+                <span>{passwordStatus.message}</span>
+              </div>
+            )}
+
+            <div className="grid grid-cols-1 sm:grid-cols-3 gap-3.5 pt-1">
+              <div className="space-y-1.5">
+                <label className="text-xs font-semibold text-slate-300">
+                  Ancien Mot de Passe
+                </label>
+                <input
+                  type="password"
+                  value={oldPassword}
+                  onChange={(e) => setOldPassword(e.target.value)}
+                  placeholder="••••••••"
+                  className="w-full px-3.5 py-2.5 rounded-xl bg-slate-950 border border-slate-700 text-white text-sm font-mono focus:outline-none focus:border-rose-400"
+                />
+              </div>
+
+              <div className="space-y-1.5">
+                <label className="text-xs font-semibold text-slate-300">
+                  Nouveau Mot de Passe
+                </label>
+                <input
+                  type="password"
+                  value={newPassword}
+                  onChange={(e) => setNewPassword(e.target.value)}
+                  placeholder="••••••••"
+                  className="w-full px-3.5 py-2.5 rounded-xl bg-slate-950 border border-slate-700 text-white text-sm font-mono focus:outline-none focus:border-rose-400"
+                />
+              </div>
+
+              <div className="space-y-1.5">
+                <label className="text-xs font-semibold text-slate-300">
+                  Confirmer le Nouveau
+                </label>
+                <input
+                  type="password"
+                  value={confirmPassword}
+                  onChange={(e) => setConfirmPassword(e.target.value)}
+                  placeholder="••••••••"
+                  className="w-full px-3.5 py-2.5 rounded-xl bg-slate-950 border border-slate-700 text-white text-sm font-mono focus:outline-none focus:border-rose-400"
+                />
+              </div>
+            </div>
+
+            <div className="flex justify-end pt-1">
+              <button
+                type="button"
+                onClick={handlePasswordSubmit}
+                disabled={isChangingPassword}
+                className="px-4 py-2 rounded-xl bg-slate-900 border border-rose-500/40 hover:bg-rose-500/10 text-rose-300 text-xs font-bold flex items-center space-x-1.5 transition-all disabled:opacity-50 cursor-pointer"
+              >
+                {isChangingPassword ? (
+                  <RefreshCw className="w-3.5 h-3.5 animate-spin" />
+                ) : (
+                  <KeyRound className="w-3.5 h-3.5" />
+                )}
+                <span>{isChangingPassword ? 'Mise à jour...' : 'Mettre à jour le Mot de Passe'}</span>
+              </button>
+            </div>
+          </div>
+
+          {/* Save Button */}
+          <div className="flex justify-end">
+            <button
+              type="submit"
+              className="flex items-center space-x-2 px-6 py-3 rounded-2xl bg-gradient-to-r from-pink-500 to-purple-600 text-white font-bold text-sm shadow-xl shadow-pink-500/25 hover:scale-[1.02] active:scale-[0.98] transition-all cursor-pointer"
+            >
+              <Save className="w-4 h-4" />
+              <span>Enregistrer les Préférences</span>
+            </button>
+          </div>
+        </form>
+      )}
+
+      {/* Tab 3: Data Management & Backup Section */}
+      {settingsSection === 'database' && (
+        <div className="glass-panel p-6 sm:p-8 rounded-3xl border border-slate-800 space-y-6">
+          <div>
+            <h3 className="text-lg font-bold text-white flex items-center space-x-2">
+              <ShieldCheck className="w-5 h-5 text-cyan-400" />
+              <span>Gestion des Données & Sauvegardes</span>
+            </h3>
+            <p className="text-xs text-slate-400 mt-1">
+              Vos données sont automatiquement synchronisées en temps réel avec NoCodeBackend (54770_uwu_finances) et sauvegardées localement en cache hors-ligne.
+            </p>
+          </div>
+
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+            {/* JSON Full Backup */}
+            <div className="p-4 rounded-2xl bg-slate-950 border border-slate-800 space-y-3 flex flex-col justify-between">
+              <div className="space-y-1">
+                <div className="font-bold text-xs text-cyan-400 flex items-center space-x-1.5">
+                  <FileCode className="w-4 h-4" />
+                  <span>Sauvegarde Complète JSON</span>
+                </div>
+                <p className="text-[11px] text-slate-400">
+                  Exporte toutes les catégories, pièces, stocks, projets, nomenclatures et logs de temps en 1 seul fichier.
+                </p>
+              </div>
+
+              <div className="flex items-center space-x-2 pt-2">
+                <button
+                  onClick={exportJSON}
+                  className="flex-1 py-2 px-3 rounded-xl bg-slate-900 border border-cyan-500/40 text-cyan-300 hover:bg-cyan-500/10 text-xs font-semibold flex items-center justify-center space-x-1.5 transition-all"
+                >
+                  <Download className="w-3.5 h-3.5" />
+                  <span>Exporter JSON</span>
+                </button>
+
+                <label className="flex-1 py-2 px-3 rounded-xl bg-slate-900 border border-slate-700 text-slate-300 hover:text-white hover:border-slate-500 text-xs font-semibold flex items-center justify-center space-x-1.5 cursor-pointer transition-all">
+                  <Upload className="w-3.5 h-3.5" />
+                  <span>Restaurer JSON</span>
+                  <input
+                    ref={fileInputRef}
+                    type="file"
+                    accept=".json"
+                    onChange={handleFileUpload}
+                    className="hidden"
+                  />
+                </label>
+              </div>
+            </div>
+
+            {/* CSV Exports */}
+            <div className="p-4 rounded-2xl bg-slate-950 border border-slate-800 space-y-3 flex flex-col justify-between">
+              <div className="space-y-1">
+                <div className="font-bold text-xs text-emerald-400 flex items-center space-x-1.5">
+                  <FileSpreadsheet className="w-4 h-4" />
+                  <span>Exports Tableur CSV (Excel)</span>
+                </div>
+                <p className="text-[11px] text-slate-400">
+                  Téléchargez les feuilles de calcul pour votre comptabilité ou analyse externe.
+                </p>
+              </div>
+
+              <div className="flex items-center space-x-2 pt-2">
+                <button
+                  onClick={exportInventoryCSV}
+                  className="flex-1 py-2 px-2.5 rounded-xl bg-slate-900 border border-emerald-500/40 text-emerald-300 hover:bg-emerald-500/10 text-[11px] font-semibold flex items-center justify-center space-x-1 transition-all"
+                >
+                  <Download className="w-3 h-3" />
+                  <span>CSV Stock</span>
+                </button>
+
+                <button
+                  onClick={exportProjectsCSV}
+                  className="flex-1 py-2 px-2.5 rounded-xl bg-slate-900 border border-emerald-500/40 text-emerald-300 hover:bg-emerald-500/10 text-[11px] font-semibold flex items-center justify-center space-x-1 transition-all"
+                >
+                  <Download className="w-3 h-3" />
+                  <span>CSV Projets</span>
+                </button>
+              </div>
+            </div>
+          </div>
+
+          {/* Reset to Demo Data */}
+          <div className="pt-4 border-t border-slate-800 flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+            <div>
+              <div className="text-xs font-bold text-slate-300">
+                Réinitialiser avec le catalogue d'exemples
+              </div>
+              <div className="text-[11px] text-slate-500">
+                Rétablit les projets, catégories et pièces de démonstration GBA SP, GBC et DMG et synchronise la base cloud.
+              </div>
+            </div>
+
+            <button
+              type="button"
+              onClick={() => {
+                if (confirm('Attention, cette action va réinitialiser vos données actuelles avec le jeu d\'exemples de démonstration sur le Cloud et en local. Continuer ?')) {
+                  resetToSampleData();
+                }
+              }}
+              className="flex items-center space-x-1.5 px-4 py-2 rounded-xl bg-slate-900 border border-rose-500/40 text-rose-400 hover:bg-rose-500/10 text-xs font-bold transition-all shrink-0"
+            >
+              <RotateCcw className="w-3.5 h-3.5" />
+              <span>Réinitialiser Données Démo</span>
+            </button>
+          </div>
+        </div>
+      )}
+
+    </div>
+  );
+};
diff --git a/src/components/timetracker/TimeTrackerView.tsx b/src/components/timetracker/TimeTrackerView.tsx
new file mode 100644
index 0000000..e672c7b
--- /dev/null
+++ b/src/components/timetracker/TimeTrackerView.tsx
@@ -0,0 +1,291 @@
+import React from 'react';
+import {
+  Clock,
+  Play,
+  Pause,
+  RotateCcw,
+  Check,
+  Gamepad2,
+  History,
+} from 'lucide-react';
+import { useApp } from '../../context/AppContext';
+import type { TaskType } from '../../types';
+
+import {
+  formatCurrency,
+  formatMinutes,
+  getTaskTypeLabel,
+} from '../../utils/calculations';
+
+const TASK_TYPES_LIST: { id: TaskType; label: string; icon: string }[] = [
+  { id: 'diagnostic_demontage', label: 'Diagnostic & Démontage', icon: '🔍' },
+  { id: 'nettoyage_recap', label: 'Nettoyage & Condensateurs', icon: '🧼' },
+  { id: 'decoupe_coque', label: 'Découpe Coque & Ajustement', icon: '✂️' },
+  { id: 'soudure_mods', label: 'Soudure Mods & USB-C', icon: '🔥' },
+  { id: 'assemblage', label: 'Assemblage & Calibrage', icon: '🪛' },
+  { id: 'test_qc', label: 'Tests & Contrôle Qualité', icon: '🎮' },
+  { id: 'packaging_photo', label: 'Photos & Packaging', icon: '📦' },
+  { id: 'autre', label: 'Autre Travail', icon: '⚙️' },
+];
+
+export const TimeTrackerView: React.FC = () => {
+  const {
+    projects,
+    activeTimer,
+    startTimer,
+    pauseTimer,
+    resumeTimer,
+    resetTimer,
+    saveTimerSession,
+    setTimerDescription,
+    setTimerTaskType,
+    setTimerProject,
+    settings,
+  } = useApp();
+
+  // Active project object
+  const activeProject = projects.find((p) => p.id === activeTimer.projectId);
+
+  // Time format calculations
+  const hours = Math.floor(activeTimer.elapsedSeconds / 3600);
+  const minutes = Math.floor((activeTimer.elapsedSeconds % 3600) / 60);
+  const seconds = activeTimer.elapsedSeconds % 60;
+
+  // Live real-time cost accumulated
+  const liveCost = (activeTimer.elapsedSeconds / 3600) * (activeTimer.hourlyRate || settings.defaultHourlyRate || 25);
+
+  // All logged sessions across all projects for history
+  const allSessions = projects.flatMap((p) =>
+    p.timeSessions.map((s) => ({
+      ...s,
+      projectTitle: p.title,
+      projectSerial: p.serialNumber,
+      consoleModel: p.consoleModel,
+    }))
+  ).sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
+
+  const totalLoggedMinutes = allSessions.reduce((sum, s) => sum + s.durationMinutes, 0);
+  const totalLoggedCost = allSessions.reduce((sum, s) => sum + s.cost, 0);
+
+  return (
+    <div className="space-y-8 pb-12 animate-fadeIn">
+      
+      {/* Title */}
+      <div>
+        <div className="inline-flex items-center space-x-2 px-3 py-1 rounded-full text-xs font-semibold bg-amber-500/10 text-amber-400 border border-amber-500/30 mb-2">
+          <Clock className="w-3.5 h-3.5" />
+          <span>Chronomètre d'Établi & Main d'Œuvre</span>
+        </div>
+        <h2 className="text-2xl sm:text-3xl font-black text-white font-display">
+          Quantification du Temps Passé par Console
+        </h2>
+        <p className="text-slate-400 text-xs sm:text-sm">
+          Chronométrez en direct vos sessions de soudure et d'assemblage pour valoriser avec précision votre artisanat.
+        </p>
+      </div>
+
+      {/* Main Big Stopwatch Display Card */}
+      <div className="glass-panel p-6 sm:p-10 rounded-3xl border border-amber-500/30 relative overflow-hidden shadow-2xl">
+        <div className="absolute top-0 right-0 -mr-20 -mt-20 w-80 h-80 bg-amber-500/10 rounded-full blur-3xl pointer-events-none" />
+
+        <div className="relative z-10 flex flex-col items-center text-center space-y-6">
+          
+          {/* Project Picker */}
+          <div className="w-full max-w-md space-y-1.5 text-left">
+            <label className="text-xs font-bold text-slate-300 uppercase tracking-wider flex items-center space-x-1.5">
+              <Gamepad2 className="w-4 h-4 text-amber-400" />
+              <span>Console / Projet Assigné :</span>
+            </label>
+            <select
+              value={activeTimer.projectId || ''}
+              onChange={(e) => setTimerProject(e.target.value || null)}
+              className="w-full px-4 py-3 rounded-2xl bg-slate-950 border border-slate-700 text-white font-bold text-sm focus:outline-none focus:border-amber-400 shadow-inner"
+            >
+              <option value="">-- Choisir une console en cours --</option>
+              {projects.map((p) => (
+                <option key={p.id} value={p.id}>
+                  {p.title} ({p.consoleModel} - {p.serialNumber})
+                </option>
+              ))}
+            </select>
+            {activeProject && (
+              <div className="text-[11px] text-amber-400 font-mono text-center pt-1">
+                Affectation : {activeProject.title} ({activeProject.serialNumber})
+              </div>
+            )}
+          </div>
+
+
+          {/* Big Digital Numbers */}
+          <div className="py-4">
+            <div className="font-mono text-6xl sm:text-8xl font-black text-amber-300 tracking-tight drop-shadow-[0_0_20px_rgba(245,158,11,0.3)]">
+              {hours > 0 ? `${hours.toString().padStart(2, '0')}:` : ''}
+              {minutes.toString().padStart(2, '0')}:
+              {seconds.toString().padStart(2, '0')}
+            </div>
+            
+            {/* Live Real-time Cost Counter */}
+            <div className="mt-3 flex items-center justify-center space-x-2 text-sm text-slate-300">
+              <span className="font-semibold">Coût main d'œuvre accumulé :</span>
+              <span className="font-mono font-black text-lg text-emerald-400">
+                {formatCurrency(liveCost, settings.currency)}
+              </span>
+              <span className="text-xs text-slate-400">
+                (taux : {activeTimer.hourlyRate || settings.defaultHourlyRate || 25}€/h)
+              </span>
+            </div>
+          </div>
+
+          {/* Task Type Grid */}
+          <div className="w-full max-w-2xl space-y-2 text-left">
+            <label className="text-xs font-bold text-slate-300 uppercase tracking-wider">
+              Type de tâche en cours :
+            </label>
+            <div className="grid grid-cols-2 sm:grid-cols-4 gap-2.5">
+              {TASK_TYPES_LIST.map((task) => (
+                <button
+                  key={task.id}
+                  type="button"
+                  onClick={() => setTimerTaskType(task.id)}
+                  className={`flex items-center space-x-2 p-2.5 rounded-xl border text-xs font-semibold transition-all ${
+                    activeTimer.taskType === task.id
+                      ? 'bg-amber-500/20 text-amber-300 border-amber-500 shadow-md shadow-amber-500/10'
+                      : 'bg-slate-950/60 text-slate-400 border-slate-800 hover:border-slate-700 hover:text-slate-200'
+                  }`}
+                >
+                  <span className="text-base">{task.icon}</span>
+                  <span className="truncate">{task.label}</span>
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* Description Input */}
+          <div className="w-full max-w-2xl space-y-1.5 text-left">
+            <label className="text-xs font-bold text-slate-300 uppercase tracking-wider">
+              Note d'intervention :
+            </label>
+            <input
+              type="text"
+              value={activeTimer.description}
+              onChange={(e) => setTimerDescription(e.target.value)}
+              placeholder="Ex: Soudure du connecteur USB-C, test sous microscope..."
+              className="w-full px-4 py-2.5 rounded-xl bg-slate-950 border border-slate-700 text-white placeholder-slate-500 text-xs focus:outline-none focus:border-amber-400"
+            />
+          </div>
+
+          {/* Stopwatch Controls */}
+          <div className="flex flex-wrap items-center justify-center gap-4 pt-4">
+            {!activeTimer.isRunning ? (
+              <button
+                onClick={() => {
+                  if (activeTimer.elapsedSeconds > 0) resumeTimer();
+                  else startTimer(activeTimer.projectId || undefined, activeTimer.taskType, activeTimer.description);
+                }}
+                className="flex items-center space-x-2 px-8 py-4 rounded-2xl bg-gradient-to-r from-amber-500 to-orange-500 text-slate-950 font-black text-base shadow-xl shadow-amber-500/25 hover:scale-105 active:scale-95 transition-all"
+              >
+                <Play className="w-5 h-5 fill-current" />
+                <span>{activeTimer.elapsedSeconds > 0 ? 'Reprendre' : 'Démarrer le Chrono'}</span>
+              </button>
+            ) : (
+              <button
+                onClick={pauseTimer}
+                className="flex items-center space-x-2 px-8 py-4 rounded-2xl bg-amber-500 text-slate-950 font-black text-base shadow-xl shadow-amber-500/25 hover:scale-105 active:scale-95 transition-all"
+              >
+                <Pause className="w-5 h-5 fill-current" />
+                <span>Mettre en Pause</span>
+              </button>
+            )}
+
+            {activeTimer.elapsedSeconds > 0 && (
+              <>
+                <button
+                  onClick={saveTimerSession}
+                  disabled={!activeTimer.projectId}
+                  className="flex items-center space-x-2 px-6 py-4 rounded-2xl bg-emerald-500 text-slate-950 font-black text-base shadow-lg shadow-emerald-500/20 hover:scale-105 active:scale-95 disabled:opacity-40 disabled:cursor-not-allowed transition-all"
+                  title={!activeTimer.projectId ? 'Sélectionnez un projet pour enregistrer' : 'Enregistrer ce temps sur le projet'}
+                >
+                  <Check className="w-5 h-5" />
+                  <span>Enregistrer sur le projet</span>
+                </button>
+
+                <button
+                  onClick={resetTimer}
+                  className="p-4 rounded-2xl bg-slate-900 border border-slate-700 text-slate-400 hover:text-white hover:bg-slate-800 transition-colors"
+                  title="Réinitialiser le chronomètre"
+                >
+                  <RotateCcw className="w-5 h-5" />
+                </button>
+              </>
+            )}
+          </div>
+
+        </div>
+      </div>
+
+      {/* History of Recent Logged Sessions across all consoles */}
+      <div className="space-y-4">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center space-x-2">
+            <History className="w-5 h-5 text-amber-400" />
+            <h3 className="text-lg font-bold text-white">
+              Historique Global des Sessions d'Établi
+            </h3>
+          </div>
+          <div className="text-xs text-slate-400 font-mono">
+            Total cumulé : <strong className="text-amber-300">{formatMinutes(totalLoggedMinutes)}</strong> ({formatCurrency(totalLoggedCost, settings.currency)})
+          </div>
+        </div>
+
+        <div className="glass-panel rounded-3xl border border-slate-800 overflow-hidden">
+          {allSessions.length === 0 ? (
+            <div className="p-8 text-center text-xs text-slate-400">
+              Aucune session enregistrée pour le moment.
+            </div>
+          ) : (
+            <div className="divide-y divide-slate-800/80">
+              {allSessions.slice(0, 8).map((session) => (
+                <div
+                  key={session.id}
+                  className="p-4 flex flex-col sm:flex-row sm:items-center justify-between gap-3 hover:bg-slate-900/40 transition-colors"
+                >
+                  <div className="space-y-1">
+                    <div className="flex items-center space-x-2">
+                      <span className="font-bold text-sm text-white">
+                        {session.projectTitle}
+                      </span>
+                      <span className="text-[11px] font-mono text-cyan-400">
+                        ({session.consoleModel})
+                      </span>
+                    </div>
+                    <div className="flex items-center space-x-2 text-xs text-slate-300">
+                      <span className="font-semibold text-amber-400">
+                        {getTaskTypeLabel(session.taskType)} :
+                      </span>
+                      <span>{session.description}</span>
+                    </div>
+                  </div>
+
+                  <div className="flex items-center space-x-6 text-right shrink-0">
+                    <div className="text-[11px] text-slate-400 font-mono">
+                      {session.date}
+                    </div>
+                    <div>
+                      <div className="font-mono font-bold text-amber-300 text-sm">
+                        {formatMinutes(session.durationMinutes)}
+                      </div>
+                      <div className="text-[10px] text-slate-400 font-mono">
+                        {formatCurrency(session.cost, settings.currency)}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+
+    </div>
+  );
+};
diff --git a/src/context/AppContext.tsx b/src/context/AppContext.tsx
new file mode 100644
index 0000000..8b663dc
--- /dev/null
+++ b/src/context/AppContext.tsx
@@ -0,0 +1,1796 @@
+import React, { createContext, useContext, useState, useEffect, useCallback, useRef } from 'react';
+import confetti from 'canvas-confetti';
+import type {
+  InventoryItem,
+  Project,
+  AppSettings,
+  TimeSession,
+  ProjectPart,
+  TaskType,
+  SalesChannel,
+  ProjectStatus,
+  ProjectTask,
+  ProjectObjectives,
+  ModRecipe,
+  ModCategory,
+  AppCategory,
+  CategoryType,
+  AuthUser,
+  AuthSession,
+} from '../types';
+
+import {
+  getSavedAuthSession,
+  saveAuthSession,
+  clearAuthSession,
+  createJwtToken,
+  decodeJwtToken,
+} from '../services/authService';
+
+import {
+  INITIAL_INVENTORY,
+  INITIAL_PROJECTS,
+  INITIAL_SETTINGS,
+  INITIAL_MOD_RECIPES,
+  INITIAL_CATEGORIES,
+} from '../data/initialData';
+
+import {
+  loadAllFromNCB,
+  seedNCBWithInitialData,
+  syncCreateInventory,
+  syncUpdateInventory,
+  syncDeleteInventory,
+  syncCreateProject,
+  syncUpdateProject,
+  syncDeleteProject,
+  syncCreateMod,
+  syncUpdateMod,
+  syncDeleteMod,
+  syncSettings,
+  syncCreateCategory,
+  syncUpdateCategory,
+  syncDeleteCategory,
+} from '../services/ncbSync';
+
+export interface ActiveTimerState {
+  projectId: string | null;
+  taskType: TaskType;
+  description: string;
+  isRunning: boolean;
+  startTime: number | null;
+  elapsedSeconds: number;
+  hourlyRate: number;
+}
+
+export interface ToastNotification {
+  id: string;
+  type: 'success' | 'error' | 'info' | 'warning';
+  title: string;
+  message: string;
+}
+
+export type DbSyncStatus = 'connected' | 'syncing' | 'offline' | 'error';
+
+interface AppContextType {
+  inventory: InventoryItem[];
+  projects: Project[];
+  modsLibrary: ModRecipe[];
+  settings: AppSettings;
+  categories: AppCategory[];
+  partCategories: AppCategory[];
+  consoleModels: AppCategory[];
+  modCategories: AppCategory[];
+  activeTimer: ActiveTimerState;
+  toasts: ToastNotification[];
+  currentTab: 'dashboard' | 'purchases' | 'projects' | 'mods' | 'timetracker' | 'analytics' | 'settings';
+  setCurrentTab: (tab: 'dashboard' | 'purchases' | 'projects' | 'mods' | 'timetracker' | 'analytics' | 'settings') => void;
+  selectedProjectId: string | null;
+  setSelectedProjectId: (id: string | null) => void;
+  showNewProjectModal: boolean;
+  setShowNewProjectModal: (show: boolean) => void;
+  showNewInventoryModal: boolean;
+  setShowNewInventoryModal: (show: boolean) => void;
+
+  // Authentication & JWT Session
+  authSession: AuthSession;
+  showAuthModal: boolean;
+  setShowAuthModal: (show: boolean) => void;
+  loginUser: (user: AuthUser, expiresInHours?: number) => void;
+  logoutUser: () => void;
+  setCustomJwtToken: (token: string) => void;
+
+  // Cloud Database (NCB)
+  dbSyncStatus: DbSyncStatus;
+  lastSyncedAt: Date | null;
+  refreshFromDatabase: () => Promise<void>;
+  syncAllToDatabase: () => Promise<void>;
+  
+  // Category & Enum actions
+  addCategory: (category: Omit<AppCategory, 'id'>) => AppCategory;
+  updateCategory: (id: string, updates: Partial<AppCategory>) => void;
+  deleteCategory: (id: string) => void;
+  reorderCategories: (newOrder: AppCategory[]) => void;
+  getCategoryLabel: (slug: string, type?: CategoryType) => string;
+  getCategoryBadge: (slug: string, type?: CategoryType) => { bg: string; text: string; border: string };
+
+  // Inventory actions
+  addInventoryItem: (item: Omit<InventoryItem, 'id'>) => InventoryItem;
+  updateInventoryItem: (id: string, updates: Partial<InventoryItem>) => void;
+  deleteInventoryItem: (id: string) => void;
+  adjustStockQuantity: (id: string, delta: number) => void;
+
+  // Project actions
+  addProject: (project: Omit<Project, 'id'>) => Project;
+  updateProject: (id: string, updates: Partial<Project>) => void;
+  updateProjectStatus: (id: string, newStatus: ProjectStatus) => void;
+  deleteProject: (id: string) => void;
+  markProjectAsSold: (
+    id: string,
+    soldPrice: number,
+    salesChannel: SalesChannel,
+    soldDate?: string,
+    customerName?: string
+  ) => void;
+  duplicateProject: (id: string) => void;
+  addPartToProject: (
+    projectId: string,
+    part: ProjectPart,
+    options?: { deductStock?: boolean; createPlannedInInventory?: boolean }
+  ) => void;
+  updateProjectPartStatus: (
+    projectId: string,
+    partIndex: number,
+    newStatus: import('../types').ProjectPartStatus
+  ) => void;
+  receivePlannedItem: (inventoryItemId: string) => void;
+  updateProjectPart: (projectId: string, partIndex: number, updates: Partial<import('../types').ProjectPart>) => void;
+  removePartFromProject: (projectId: string, partIndex: number, restoreStock?: boolean) => void;
+  addTimeSession: (projectId: string, session: Omit<TimeSession, 'id' | 'projectId'>) => void;
+  deleteTimeSession: (projectId: string, sessionId: string) => void;
+  toggleProjectTask: (projectId: string, taskId: string) => void;
+  addProjectTask: (projectId: string, task: Omit<ProjectTask, 'id'>) => void;
+  deleteProjectTask: (projectId: string, taskId: string) => void;
+  updateProjectObjectives: (projectId: string, objectives: Partial<ProjectObjectives>) => void;
+
+  // Mods & Recipes actions
+  addModRecipe: (mod: Omit<ModRecipe, 'id'>) => ModRecipe;
+  updateModRecipe: (id: string, updates: Partial<ModRecipe>) => void;
+  deleteModRecipe: (id: string) => void;
+  applyModToProject: (
+    projectId: string,
+    modId: string,
+    options?: { deductStock?: boolean; addTasks?: boolean }
+  ) => void;
+  saveProjectAsModRecipe: (
+    projectId: string,
+    recipeName: string,
+    category?: ModCategory
+  ) => ModRecipe;
+
+  // Active Timer actions
+  startTimer: (projectId?: string, taskType?: TaskType, description?: string) => void;
+  pauseTimer: () => void;
+  resumeTimer: () => void;
+  resetTimer: () => void;
+  saveTimerSession: () => void;
+  setTimerDescription: (desc: string) => void;
+  setTimerTaskType: (taskType: TaskType) => void;
+  setTimerProject: (projectId: string | null) => void;
+
+  // Settings & Data actions
+  updateSettings: (updates: Partial<AppSettings>) => void;
+  exportJSON: () => void;
+  importJSON: (jsonData: string) => boolean;
+  exportInventoryCSV: () => void;
+  exportProjectsCSV: () => void;
+  resetToSampleData: () => void;
+  
+  // Toast notifications
+  addToast: (toast: Omit<ToastNotification, 'id'>) => void;
+  removeToast: (id: string) => void;
+}
+
+const AppContext = createContext<AppContextType | undefined>(undefined);
+
+const LOCAL_STORAGE_KEY_INVENTORY = 'uwu_finances_inventory_v1';
+const LOCAL_STORAGE_KEY_PROJECTS = 'uwu_finances_projects_v1';
+const LOCAL_STORAGE_KEY_SETTINGS = 'uwu_finances_settings_v1';
+const LOCAL_STORAGE_KEY_MODS = 'uwu_finances_mods_v1';
+const LOCAL_STORAGE_KEY_CATEGORIES = 'uwu_finances_categories_v1';
+
+export const AppProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  // 1. Initial State from LocalStorage or Defaults
+  const [inventory, setInventory] = useState<InventoryItem[]>(() => {
+    try {
+      const saved = localStorage.getItem(LOCAL_STORAGE_KEY_INVENTORY);
+      return saved ? JSON.parse(saved) : INITIAL_INVENTORY;
+    } catch {
+      return INITIAL_INVENTORY;
+    }
+  });
+
+  const [projects, setProjects] = useState<Project[]>(() => {
+    try {
+      const saved = localStorage.getItem(LOCAL_STORAGE_KEY_PROJECTS);
+      return saved ? JSON.parse(saved) : INITIAL_PROJECTS;
+    } catch {
+      return INITIAL_PROJECTS;
+    }
+  });
+
+  const [modsLibrary, setModsLibrary] = useState<ModRecipe[]>(() => {
+    try {
+      const saved = localStorage.getItem(LOCAL_STORAGE_KEY_MODS);
+      return saved ? JSON.parse(saved) : INITIAL_MOD_RECIPES;
+    } catch {
+      return INITIAL_MOD_RECIPES;
+    }
+  });
+
+  const [settings, setSettings] = useState<AppSettings>(() => {
+    try {
+      const saved = localStorage.getItem(LOCAL_STORAGE_KEY_SETTINGS);
+      return saved ? JSON.parse(saved) : INITIAL_SETTINGS;
+    } catch {
+      return INITIAL_SETTINGS;
+    }
+  });
+
+  const [categories, setCategories] = useState<AppCategory[]>(() => {
+    try {
+      const saved = localStorage.getItem(LOCAL_STORAGE_KEY_CATEGORIES);
+      return saved ? JSON.parse(saved) : INITIAL_CATEGORIES;
+    } catch {
+      return INITIAL_CATEGORIES;
+    }
+  });
+
+  const [currentTab, setCurrentTab] = useState<'dashboard' | 'purchases' | 'projects' | 'mods' | 'timetracker' | 'analytics' | 'settings'>('dashboard');
+  const [selectedProjectId, setSelectedProjectId] = useState<string | null>(null);
+  const [showNewProjectModal, setShowNewProjectModal] = useState(false);
+  const [showNewInventoryModal, setShowNewInventoryModal] = useState(false);
+  const [toasts, setToasts] = useState<ToastNotification[]>([]);
+
+  // Authentication & JWT Session State
+  const [authSession, setAuthSession] = useState<AuthSession>(() => getSavedAuthSession());
+  const [showAuthModal, setShowAuthModal] = useState(false);
+
+  // Cloud Database Sync State
+  const [dbSyncStatus, setDbSyncStatus] = useState<DbSyncStatus>('syncing');
+  const [lastSyncedAt, setLastSyncedAt] = useState<Date | null>(null);
+  const isInitializedRef = useRef(false);
+
+  // 2. Active Timer State
+  const [activeTimer, setActiveTimer] = useState<ActiveTimerState>({
+    projectId: null,
+    taskType: 'soudure_mods',
+    description: 'Session de modding',
+    isRunning: false,
+    startTime: null,
+    elapsedSeconds: 0,
+    hourlyRate: settings.defaultHourlyRate || 25,
+  });
+
+  // Save to LocalStorage whenever state changes
+  useEffect(() => {
+    localStorage.setItem(LOCAL_STORAGE_KEY_INVENTORY, JSON.stringify(inventory));
+  }, [inventory]);
+
+  useEffect(() => {
+    localStorage.setItem(LOCAL_STORAGE_KEY_PROJECTS, JSON.stringify(projects));
+  }, [projects]);
+
+  useEffect(() => {
+    localStorage.setItem(LOCAL_STORAGE_KEY_MODS, JSON.stringify(modsLibrary));
+  }, [modsLibrary]);
+
+  useEffect(() => {
+    localStorage.setItem(LOCAL_STORAGE_KEY_SETTINGS, JSON.stringify(settings));
+  }, [settings]);
+
+  useEffect(() => {
+    localStorage.setItem(LOCAL_STORAGE_KEY_CATEGORIES, JSON.stringify(categories));
+  }, [categories]);
+
+  // Synchronize visual theme on document and body
+  useEffect(() => {
+    const activeTheme = settings.theme || 'uwu-pink';
+    document.documentElement.className = `theme-${activeTheme}`;
+    document.documentElement.setAttribute('data-theme', activeTheme);
+    document.body.className = `theme-${activeTheme}`;
+  }, [settings.theme]);
+
+  // Derived filtered category lists
+  const partCategories = categories
+    .filter((c) => c.type === 'part_category' && c.isActive)
+    .sort((a, b) => a.sortOrder - b.sortOrder);
+
+  const consoleModels = categories
+    .filter((c) => c.type === 'console_model' && c.isActive)
+    .sort((a, b) => a.sortOrder - b.sortOrder);
+
+  const modCategories = categories
+    .filter((c) => c.type === 'mod_category' && c.isActive)
+    .sort((a, b) => a.sortOrder - b.sortOrder);
+
+  const getCategoryLabel = useCallback((slug: string, type?: CategoryType): string => {
+    const found = categories.find((c) => c.slug === slug && (!type || c.type === type));
+    return found ? found.name : slug;
+  }, [categories]);
+
+  const getCategoryBadge = useCallback((slug: string, type?: CategoryType): { bg: string; text: string; border: string } => {
+    const found = categories.find((c) => c.slug === slug && (!type || c.type === type));
+    if (found?.badgeColor) {
+      const parts = found.badgeColor.split(' ');
+      const bg = parts.find(p => p.startsWith('bg-')) || 'bg-slate-500/10';
+      const text = parts.find(p => p.startsWith('text-')) || 'text-slate-400';
+      const border = parts.find(p => p.startsWith('border-')) || 'border-slate-500/30';
+      return { bg, text, border };
+    }
+    return { bg: 'bg-slate-500/10', text: 'text-slate-400', border: 'border-slate-500/30' };
+  }, [categories]);
+
+  // Category CRUD actions
+  const addCategory = (categoryData: Omit<AppCategory, 'id'>): AppCategory => {
+    const prefix = categoryData.type === 'part_category' ? 'cat-part' : categoryData.type === 'console_model' ? 'cat-console' : 'cat-mod';
+    const id = `${prefix}-${Date.now()}`;
+    const newCategory: AppCategory = {
+      ...categoryData,
+      id,
+    };
+    setCategories((prev) => [...prev, newCategory]);
+    syncCreateCategory(newCategory);
+    addToast({
+      type: 'success',
+      title: 'Élément créé ✨',
+      message: `"${newCategory.name}" a été ajouté et synchronisé sur le Cloud.`,
+    });
+    return newCategory;
+  };
+
+  const updateCategory = (id: string, updates: Partial<AppCategory>) => {
+    let updatedCat: AppCategory | null = null;
+    setCategories((prev) =>
+      prev.map((cat) => {
+        if (cat.id === id) {
+          const updated = { ...cat, ...updates };
+          updatedCat = updated;
+          return updated;
+        }
+        return cat;
+      })
+    );
+    if (updatedCat) {
+      syncUpdateCategory(updatedCat);
+    }
+    addToast({
+      type: 'info',
+      title: 'Catégorie mise à jour',
+      message: 'Les modifications ont été sauvegardées et synchronisées.',
+    });
+  };
+
+  const deleteCategory = (id: string) => {
+    const cat = categories.find((c) => c.id === id);
+    setCategories((prev) => prev.filter((c) => c.id !== id));
+    syncDeleteCategory(id);
+    addToast({
+      type: 'warning',
+      title: 'Élément supprimé',
+      message: cat ? `"${cat.name}" a été supprimé de la base.` : 'Catégorie supprimée.',
+    });
+  };
+
+  const reorderCategories = (newOrder: AppCategory[]) => {
+    const updated = newOrder.map((cat, idx) => ({ ...cat, sortOrder: idx + 1 }));
+    setCategories((prev) => {
+      const otherTypes = prev.filter((p) => !newOrder.some((n) => n.id === p.id));
+      return [...otherTypes, ...updated];
+    });
+    updated.forEach((cat) => syncUpdateCategory(cat));
+  };
+
+  // Apply Theme Class to document
+  useEffect(() => {
+    document.documentElement.classList.remove('theme-cyberpunk', 'theme-uwu-pink', 'theme-retro-gameboy', 'theme-modern-dark');
+    document.documentElement.classList.add(`theme-${settings.theme}`);
+  }, [settings.theme]);
+
+  // Timer Tick Interval
+  useEffect(() => {
+    let interval: ReturnType<typeof setInterval> | null = null;
+    if (activeTimer.isRunning) {
+      interval = setInterval(() => {
+        setActiveTimer((prev) => ({
+          ...prev,
+          elapsedSeconds: prev.elapsedSeconds + 1,
+        }));
+      }, 1000);
+    }
+    return () => {
+      if (interval) clearInterval(interval);
+    };
+  }, [activeTimer.isRunning]);
+
+  // Toast Helpers
+  const addToast = useCallback((toast: Omit<ToastNotification, 'id'>) => {
+    const id = 'toast-' + Date.now() + '-' + Math.random().toString(36).substring(2, 6);
+    setToasts((prev) => [...prev, { ...toast, id }]);
+    setTimeout(() => {
+      removeToast(id);
+    }, 4500);
+  }, []);
+
+  const removeToast = useCallback((id: string) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+
+  // ─── Initial Load & Seed from NCB Database ───
+  useEffect(() => {
+    if (isInitializedRef.current) return;
+    isInitializedRef.current = true;
+
+    async function initFromDatabase() {
+      setDbSyncStatus('syncing');
+      try {
+        const ncbData = await loadAllFromNCB();
+        if (ncbData.hasData) {
+          console.log('[NCB] Loaded records from database.');
+          if (ncbData.inventory.length > 0) setInventory(ncbData.inventory);
+          if (ncbData.projects.length > 0) setProjects(ncbData.projects);
+          if (ncbData.modsLibrary.length > 0) setModsLibrary(ncbData.modsLibrary);
+          if (ncbData.categories.length > 0) setCategories(ncbData.categories);
+          if (ncbData.settings) setSettings(ncbData.settings);
+          setDbSyncStatus('connected');
+          setLastSyncedAt(new Date());
+          addToast({
+            type: 'success',
+            title: 'Cloud Database connectée ☁️',
+            message: 'Données synchronisées avec la base 54770_uwu_finances (EU Region).',
+          });
+        } else {
+          // Fresh database: seed with initial or current local data
+          console.log('[NCB] Database is empty. Seeding with initial data...');
+          await seedNCBWithInitialData(inventory, projects, modsLibrary, settings, categories);
+          setDbSyncStatus('connected');
+          setLastSyncedAt(new Date());
+          addToast({
+            type: 'info',
+            title: 'Base de données initialisée 🚀',
+            message: 'Catalogue initial enregistré sur NoCodeBackend (54770_uwu_finances).',
+          });
+        }
+      } catch (err) {
+        console.warn('[NCB] Error connecting to database:', err);
+        setDbSyncStatus('offline');
+      }
+    }
+
+    initFromDatabase();
+  }, [addToast, inventory, projects, modsLibrary, settings, categories]);
+
+  // Refresh from NCB Database
+  const refreshFromDatabase = async () => {
+    setDbSyncStatus('syncing');
+    try {
+      const ncbData = await loadAllFromNCB();
+      if (ncbData.hasData) {
+        setInventory(ncbData.inventory);
+        setProjects(ncbData.projects);
+        setModsLibrary(ncbData.modsLibrary);
+        if (ncbData.categories.length > 0) setCategories(ncbData.categories);
+        if (ncbData.settings) setSettings(ncbData.settings);
+      }
+      setDbSyncStatus('connected');
+      setLastSyncedAt(new Date());
+      addToast({
+        type: 'success',
+        title: 'Synchronisation Cloud réussie 🔄',
+        message: 'Données rechargées depuis la base 54770_uwu_finances.',
+      });
+    } catch (err) {
+      console.error('[NCB] Refresh error:', err);
+      setDbSyncStatus('error');
+      addToast({
+        type: 'error',
+        title: 'Erreur de synchronisation',
+        message: 'Impossible de joindre le serveur NoCodeBackend.',
+      });
+    }
+  };
+
+  // Force Push All Local State to NCB Database
+  const syncAllToDatabase = async () => {
+    setDbSyncStatus('syncing');
+    try {
+      await seedNCBWithInitialData(inventory, projects, modsLibrary, settings, categories);
+      setDbSyncStatus('connected');
+      setLastSyncedAt(new Date());
+      addToast({
+        type: 'success',
+        title: 'Sauvegarde Cloud complète ☁️',
+        message: 'Toutes les pièces, catégories, projets et recettes ont été synchronisés avec la base.',
+      });
+    } catch (err) {
+      console.error('[NCB] Full sync error:', err);
+      setDbSyncStatus('error');
+      addToast({
+        type: 'error',
+        title: 'Échec de la sauvegarde Cloud',
+        message: 'Une erreur est survenue lors de l\'envoi vers NoCodeBackend.',
+      });
+    }
+  };
+
+  // Inventory Management Actions
+  const addInventoryItem = (itemData: Omit<InventoryItem, 'id'>): InventoryItem => {
+    const id = 'inv-' + Date.now();
+    const newItem: InventoryItem = {
+      ...itemData,
+      id,
+    };
+    setInventory((prev) => [newItem, ...prev]);
+    syncCreateInventory(newItem);
+
+    addToast({
+      type: 'success',
+      title: 'Pièce ajoutée au stock',
+      message: `${newItem.name} (${newItem.quantityInStock} pcs) enregistré avec succès.`,
+    });
+    return newItem;
+  };
+
+  const updateInventoryItem = (id: string, updates: Partial<InventoryItem>) => {
+    let updatedItem: InventoryItem | null = null;
+    setInventory((prev) =>
+      prev.map((item) => {
+        if (item.id === id) {
+          const updated = { ...item, ...updates };
+          // Recalculate status based on quantity
+          if (updated.quantityInStock <= 0) {
+            updated.status = 'out_of_stock';
+          } else if (updated.quantityInStock <= (updated.minStockAlert || 1)) {
+            updated.status = 'low_stock';
+          } else {
+            updated.status = 'in_stock';
+          }
+          updatedItem = updated;
+          return updated;
+        }
+        return item;
+      })
+    );
+    if (updatedItem) {
+      syncUpdateInventory(updatedItem);
+    }
+    addToast({
+      type: 'info',
+      title: 'Stock mis à jour',
+      message: 'Les modifications de la pièce ont été sauvegardées.',
+    });
+  };
+
+  const deleteInventoryItem = (id: string) => {
+    const item = inventory.find((i) => i.id === id);
+    setInventory((prev) => prev.filter((i) => i.id !== id));
+    syncDeleteInventory(id);
+    addToast({
+      type: 'warning',
+      title: 'Pièce supprimée',
+      message: item ? `${item.name} retiré de l'inventaire.` : 'Article supprimé.',
+    });
+  };
+
+  const adjustStockQuantity = (id: string, delta: number) => {
+    let updatedItem: InventoryItem | null = null;
+    setInventory((prev) =>
+      prev.map((item) => {
+        if (item.id === id) {
+          const newQty = Math.max(0, item.quantityInStock + delta);
+          let newStatus = item.status;
+          if (newQty === 0) newStatus = 'out_of_stock';
+          else if (newQty <= item.minStockAlert) newStatus = 'low_stock';
+          else newStatus = 'in_stock';
+          const updated = { ...item, quantityInStock: newQty, status: newStatus };
+          updatedItem = updated;
+          return updated;
+        }
+        return item;
+      })
+    );
+    if (updatedItem) {
+      syncUpdateInventory(updatedItem);
+    }
+  };
+
+  // Project Management Actions
+  const addProject = (projectData: Omit<Project, 'id'>): Project => {
+    const id = 'proj-' + Date.now();
+    const newProject: Project = {
+      ...projectData,
+      id,
+    };
+    setProjects((prev) => [newProject, ...prev]);
+    syncCreateProject(newProject);
+
+    addToast({
+      type: 'success',
+      title: 'Nouveau projet créé ✨',
+      message: `${newProject.title} ajouté au centre de dépenses.`,
+    });
+    return newProject;
+  };
+
+  const updateProject = (id: string, updates: Partial<Project>) => {
+    let updatedProj: Project | null = null;
+    setProjects((prev) =>
+      prev.map((proj) => {
+        if (proj.id === id) {
+          const updated = { ...proj, ...updates };
+          updatedProj = updated;
+          return updated;
+        }
+        return proj;
+      })
+    );
+    if (updatedProj) {
+      syncUpdateProject(updatedProj);
+    }
+    addToast({
+      type: 'info',
+      title: 'Projet mis à jour',
+      message: 'Les données du projet ont été sauvegardées.',
+    });
+  };
+
+  const deleteProject = (id: string) => {
+    const proj = projects.find((p) => p.id === id);
+    setProjects((prev) => prev.filter((p) => p.id !== id));
+    syncDeleteProject(id);
+    if (selectedProjectId === id) setSelectedProjectId(null);
+    addToast({
+      type: 'warning',
+      title: 'Projet supprimé',
+      message: proj ? `Le projet "${proj.title}" a été supprimé.` : 'Projet supprimé.',
+    });
+  };
+
+  const markProjectAsSold = (
+    id: string,
+    soldPrice: number,
+    salesChannel: SalesChannel,
+    soldDate?: string,
+    customerName?: string
+  ) => {
+    const today = new Date().toISOString().split('T')[0];
+    let updatedProj: Project | null = null;
+    setProjects((prev) =>
+      prev.map((proj) => {
+        if (proj.id === id) {
+          const updated: Project = {
+            ...proj,
+            status: 'sold',
+            salePriceActual: soldPrice,
+            salesChannel: salesChannel,
+            soldDate: soldDate || today,
+            customerName: customerName || proj.customerName,
+          };
+          updatedProj = updated;
+          return updated;
+        }
+        return proj;
+      })
+    );
+
+    if (updatedProj) {
+      syncUpdateProject(updatedProj);
+    }
+
+    // Trigger celebration confetti!
+    confetti({
+      particleCount: 120,
+      spread: 75,
+      origin: { y: 0.6 },
+      colors: ['#ec4899', '#a855f7', '#06b6d4', '#10b981', '#f59e0b'],
+    });
+
+    addToast({
+      type: 'success',
+      title: 'Vente enregistrée ! 🎉',
+      message: `Console vendue à ${soldPrice} € ! Félicitations pour ce modding.`,
+    });
+  };
+
+  const duplicateProject = (id: string) => {
+    const target = projects.find((p) => p.id === id);
+    if (!target) return;
+    const duplicated: Project = {
+      ...target,
+      id: 'proj-' + Date.now(),
+      title: `${target.title} (Copie)`,
+      serialNumber: `${target.serialNumber}-COPY`,
+      status: 'draft',
+      startDate: new Date().toISOString().split('T')[0],
+      completedDate: undefined,
+      soldDate: undefined,
+      salePriceActual: undefined,
+      customerName: undefined,
+      customerContact: undefined,
+    };
+    setProjects((prev) => [duplicated, ...prev]);
+    syncCreateProject(duplicated);
+
+    addToast({
+      type: 'info',
+      title: 'Projet dupliqué',
+      message: `Une copie de "${target.title}" a été créée.`,
+    });
+  };
+
+  const addPartToProject = (
+    projectId: string,
+    part: ProjectPart,
+    options?: { deductStock?: boolean; createPlannedInInventory?: boolean }
+  ) => {
+    const project = projects.find((p) => p.id === projectId);
+    const partStatus = part.status || 'allocated';
+    const shouldDeduct = options?.deductStock ?? (partStatus === 'allocated');
+    let updatedProj: Project | null = null;
+
+    setProjects((prev) =>
+      prev.map((proj) => {
+        if (proj.id === projectId) {
+          const updated: Project = {
+            ...proj,
+            parts: [...proj.parts, { ...part, status: partStatus }],
+          };
+          updatedProj = updated;
+          return updated;
+        }
+        return proj;
+      })
+    );
+
+    if (updatedProj) {
+      syncUpdateProject(updatedProj);
+    }
+
+    // If status is 'to_order' and createPlannedInInventory is true, add or link in inventory
+    if (partStatus === 'to_order' && options?.createPlannedInInventory && project) {
+      const existingInv = part.partId ? inventory.find((i) => i.id === part.partId) : null;
+      if (existingInv) {
+        updateInventoryItem(existingInv.id, {
+          quantityReserved: (existingInv.quantityReserved || 0) + part.quantity,
+          linkedProjectId: project.id,
+          linkedProjectTitle: project.title,
+        });
+      } else {
+        addInventoryItem({
+          sku: 'PREV-' + Date.now().toString().slice(-4),
+          name: part.partName,
+          category: part.category,
+          consoleModel: project.consoleModel,
+          supplier: part.supplier || 'Fournisseur à définir',
+          orderDate: new Date().toISOString().split('T')[0],
+          status: 'planned_order',
+          unitPurchasePrice: part.unitCost,
+          shippingCostShare: 0,
+          taxImportShare: 0,
+          unitCostWithFees: part.unitCost,
+          quantityInStock: 0,
+          quantityReserved: part.quantity,
+          minStockAlert: 1,
+          linkedProjectId: project.id,
+          linkedProjectTitle: project.title,
+          notes: `Besoin approvisionnement généré pour le projet [${project.serialNumber}] ${project.title}`,
+        });
+      }
+    } else if (shouldDeduct && part.partId) {
+      adjustStockQuantity(part.partId, -part.quantity);
+    }
+
+    addToast({
+      type: partStatus === 'to_order' ? 'warning' : 'success',
+      title: partStatus === 'to_order' ? 'Pièce à approvisionner ajoutée 📦' : 'Pièce affectée au projet',
+      message: `${part.quantity}x ${part.partName} ${partStatus === 'to_order' ? 'marquée en prévision dans les achats' : 'allouée depuis le stock'} (${part.totalCost.toFixed(2)} €).`,
+    });
+  };
+
+  const updateProjectPartStatus = (
+    projectId: string,
+    partIndex: number,
+    newStatus: import('../types').ProjectPartStatus
+  ) => {
+    let updatedProj: Project | null = null;
+    setProjects((prev) =>
+      prev.map((proj) => {
+        if (proj.id === projectId) {
+          const updatedParts = [...proj.parts];
+          if (updatedParts[partIndex]) {
+            updatedParts[partIndex] = { ...updatedParts[partIndex], status: newStatus };
+          }
+          const updated = { ...proj, parts: updatedParts };
+          updatedProj = updated;
+          return updated;
+        }
+        return proj;
+      })
+    );
+    if (updatedProj) {
+      syncUpdateProject(updatedProj);
+    }
+    addToast({
+      type: 'info',
+      title: 'Statut de la pièce actualisé',
+      message: `La pièce est passée en : ${newStatus === 'allocated' ? 'En Stock / Allouée' : newStatus === 'ordered' ? 'En Commande Fournisseur' : 'À Approvisionner'}`,
+    });
+  };
+
+  const receivePlannedItem = (inventoryItemId: string) => {
+    const item = inventory.find((i) => i.id === inventoryItemId);
+    if (!item) return;
+
+    const newQty = item.quantityInStock > 0 ? item.quantityInStock : (item.quantityReserved || 1);
+    updateInventoryItem(inventoryItemId, {
+      status: 'in_stock',
+      quantityInStock: newQty,
+      quantityReserved: 0,
+    });
+
+    // If it was linked to a project, update matching parts in that project to 'allocated'
+    if (item.linkedProjectId) {
+      setProjects((prev) =>
+        prev.map((proj) => {
+          if (proj.id === item.linkedProjectId) {
+            const updatedParts = proj.parts.map((p) =>
+              p.partName.toLowerCase() === item.name.toLowerCase() || p.partId === item.id
+                ? { ...p, status: 'allocated' as import('../types').ProjectPartStatus }
+                : p
+            );
+            const updated = { ...proj, parts: updatedParts };
+            syncUpdateProject(updated);
+            return updated;
+          }
+          return proj;
+        })
+      );
+    }
+
+    addToast({
+      type: 'success',
+      title: 'Pièce réceptionnée en stock ✨',
+      message: `"${item.name}" est maintenant en stock. La nomenclature du projet associé a été basculée en "En stock".`,
+    });
+  };
+
+  const updateProjectPart = (
+    projectId: string,
+    partIndex: number,
+    updates: Partial<ProjectPart>
+  ) => {
+    let updatedProj: Project | null = null;
+    setProjects((prev) =>
+      prev.map((proj) => {
+        if (proj.id === projectId) {
+          const updatedParts = [...proj.parts];
+          if (updatedParts[partIndex]) {
+            const current = updatedParts[partIndex];
+            const newUnitCost = updates.unitCost ?? current.unitCost;
+            const newQuantity = updates.quantity ?? current.quantity;
+            const newTotalCost = updates.totalCost ?? (newUnitCost * newQuantity);
+            updatedParts[partIndex] = {
+              ...current,
+              ...updates,
+              unitCost: newUnitCost,
+              quantity: newQuantity,
+              totalCost: newTotalCost,
+            };
+          }
+          const updated = { ...proj, parts: updatedParts };
+          updatedProj = updated;
+          return updated;
+        }
+        return proj;
+      })
+    );
+    if (updatedProj) {
+      syncUpdateProject(updatedProj);
+    }
+  };
+
+  const removePartFromProject = (projectId: string, partIndex: number, restoreStock = true) => {
+    const project = projects.find((p) => p.id === projectId);
+    if (!project || !project.parts[partIndex]) return;
+    const removedPart = project.parts[partIndex];
+    let updatedProj: Project | null = null;
+
+    setProjects((prev) =>
+      prev.map((proj) => {
+        if (proj.id === projectId) {
+          const newParts = [...proj.parts];
+          newParts.splice(partIndex, 1);
+          const updated = { ...proj, parts: newParts };
+          updatedProj = updated;
+          return updated;
+        }
+        return proj;
+      })
+    );
+
+    if (updatedProj) {
+      syncUpdateProject(updatedProj);
+    }
+
+    if (restoreStock && removedPart.partId) {
+      adjustStockQuantity(removedPart.partId, removedPart.quantity);
+    }
+
+    addToast({
+      type: 'info',
+      title: 'Pièce retirée du projet',
+      message: `${removedPart.partName} retirée de la nomenclature.`,
+    });
+  };
+
+  const addTimeSession = (
+    projectId: string,
+    session: Omit<TimeSession, 'id' | 'projectId'>
+  ) => {
+    const newSession: TimeSession = {
+      ...session,
+      id: 'time-' + Date.now(),
+      projectId,
+    };
+    let updatedProj: Project | null = null;
+
+    setProjects((prev) =>
+      prev.map((proj) => {
+        if (proj.id === projectId) {
+          const updated = {
+            ...proj,
+            timeSessions: [...proj.timeSessions, newSession],
+          };
+          updatedProj = updated;
+          return updated;
+        }
+        return proj;
+      })
+    );
+
+    if (updatedProj) {
+      syncUpdateProject(updatedProj);
+    }
+
+    addToast({
+      type: 'success',
+      title: 'Temps de travail enregistré ⏱️',
+      message: `${session.durationMinutes} min de travail (${session.cost.toFixed(2)} €) ajoutées au projet.`,
+    });
+  };
+
+  const deleteTimeSession = (projectId: string, sessionId: string) => {
+    let updatedProj: Project | null = null;
+    setProjects((prev) =>
+      prev.map((proj) => {
+        if (proj.id === projectId) {
+          const updated = {
+            ...proj,
+            timeSessions: proj.timeSessions.filter((t) => t.id !== sessionId),
+          };
+          updatedProj = updated;
+          return updated;
+        }
+        return proj;
+      })
+    );
+
+    if (updatedProj) {
+      syncUpdateProject(updatedProj);
+    }
+
+    addToast({
+      type: 'info',
+      title: 'Session de temps supprimée',
+      message: 'La session de travail a été retirée du projet.',
+    });
+  };
+
+  const updateProjectStatus = (id: string, newStatus: ProjectStatus) => {
+    const today = new Date().toISOString().split('T')[0];
+    let updatedProj: Project | null = null;
+    setProjects((prev) =>
+      prev.map((proj) => {
+        if (proj.id === id) {
+          const updates: Partial<Project> = { status: newStatus };
+          if (newStatus === 'in_stock_ready' && !proj.completedDate) {
+            updates.completedDate = today;
+          }
+          const updated = { ...proj, ...updates };
+          updatedProj = updated;
+          return updated;
+        }
+        return proj;
+      })
+    );
+
+    if (updatedProj) {
+      syncUpdateProject(updatedProj);
+    }
+
+    const statusLabels: Record<ProjectStatus, string> = {
+      draft: 'Brouillon / Planifié',
+      in_progress: 'En cours d\'atelier ⚡',
+      qc_testing: 'Tests & Contrôle Qualité 🔍',
+      in_stock_ready: 'Prêt en stock / En vitrine ✨',
+      reserved: 'Réservé client 🔒',
+      sold: 'Vendu 🎉',
+    };
+
+    addToast({
+      type: 'info',
+      title: 'Statut du projet mis à jour',
+      message: `Projet passé en : ${statusLabels[newStatus] || newStatus}`,
+    });
+  };
+
+  const toggleProjectTask = (projectId: string, taskId: string) => {
+    let updatedProj: Project | null = null;
+    setProjects((prev) =>
+      prev.map((proj) => {
+        if (proj.id === projectId) {
+          const updatedTasks = (proj.tasks || []).map((t) =>
+            t.id === taskId ? { ...t, isCompleted: !t.isCompleted } : t
+          );
+          const updated = { ...proj, tasks: updatedTasks };
+          updatedProj = updated;
+          return updated;
+        }
+        return proj;
+      })
+    );
+    if (updatedProj) {
+      syncUpdateProject(updatedProj);
+    }
+  };
+
+  const addProjectTask = (
+    projectId: string,
+    taskData: Omit<ProjectTask, 'id'>
+  ) => {
+    const newTask: ProjectTask = {
+      ...taskData,
+      id: 'task-' + Date.now(),
+    };
+    let updatedProj: Project | null = null;
+    setProjects((prev) =>
+      prev.map((proj) => {
+        if (proj.id === projectId) {
+          const updated = {
+            ...proj,
+            tasks: [...(proj.tasks || []), newTask],
+          };
+          updatedProj = updated;
+          return updated;
+        }
+        return proj;
+      })
+    );
+
+    if (updatedProj) {
+      syncUpdateProject(updatedProj);
+    }
+
+    addToast({
+      type: 'success',
+      title: 'Tâche ajoutée',
+      message: `"${newTask.title}" ajoutée à la checklist.`,
+    });
+  };
+
+  const deleteProjectTask = (projectId: string, taskId: string) => {
+    let updatedProj: Project | null = null;
+    setProjects((prev) =>
+      prev.map((proj) => {
+        if (proj.id === projectId) {
+          const updated = {
+            ...proj,
+            tasks: (proj.tasks || []).filter((t) => t.id !== taskId),
+          };
+          updatedProj = updated;
+          return updated;
+        }
+        return proj;
+      })
+    );
+
+    if (updatedProj) {
+      syncUpdateProject(updatedProj);
+    }
+  };
+
+  const updateProjectObjectives = (
+    projectId: string,
+    objectives: Partial<ProjectObjectives>
+  ) => {
+    let updatedProj: Project | null = null;
+    setProjects((prev) =>
+      prev.map((proj) => {
+        if (proj.id === projectId) {
+          const updated = {
+            ...proj,
+            objectives: {
+              ...proj.objectives,
+              ...objectives,
+            },
+          };
+          updatedProj = updated;
+          return updated;
+        }
+        return proj;
+      })
+    );
+
+    if (updatedProj) {
+      syncUpdateProject(updatedProj);
+    }
+
+    addToast({
+      type: 'success',
+      title: 'Objectifs enregistrés 🎯',
+      message: 'Les objectifs financiers et délais du projet ont été actualisés.',
+    });
+  };
+
+  // === MODS & RECIPES ACTIONS ===
+  const addModRecipe = (modData: Omit<ModRecipe, 'id'>): ModRecipe => {
+    const newMod: ModRecipe = {
+      ...modData,
+      id: 'mod-' + Date.now(),
+    };
+    setModsLibrary((prev) => [newMod, ...prev]);
+    syncCreateMod(newMod);
+
+    addToast({
+      type: 'success',
+      title: 'Recette de Mod créée ✨',
+      message: `"${newMod.name}" a été ajoutée au catalogue de mods.`,
+    });
+    return newMod;
+  };
+
+  const updateModRecipe = (id: string, updates: Partial<ModRecipe>) => {
+    let updatedMod: ModRecipe | null = null;
+    setModsLibrary((prev) =>
+      prev.map((mod) => {
+        if (mod.id === id) {
+          const updated = { ...mod, ...updates };
+          updatedMod = updated;
+          return updated;
+        }
+        return mod;
+      })
+    );
+    if (updatedMod) {
+      syncUpdateMod(updatedMod);
+    }
+    addToast({
+      type: 'success',
+      title: 'Mod mis à jour',
+      message: 'Les modifications de la recette ont été sauvegardées.',
+    });
+  };
+
+  const deleteModRecipe = (id: string) => {
+    setModsLibrary((prev) => prev.filter((mod) => mod.id !== id));
+    syncDeleteMod(id);
+    addToast({
+      type: 'info',
+      title: 'Mod supprimé',
+      message: 'La recette a été retirée du catalogue.',
+    });
+  };
+
+  const applyModToProject = (
+    projectId: string,
+    modId: string,
+    options?: { deductStock?: boolean; addTasks?: boolean }
+  ) => {
+    const mod = modsLibrary.find((m) => m.id === modId);
+    const project = projects.find((p) => p.id === projectId);
+    if (!mod || !project) return;
+
+    // 1. Add mod title to project.modsList
+    const currentMods = project.modsList || [];
+    const updatedMods = currentMods.includes(mod.name) ? currentMods : [...currentMods, mod.name];
+
+    // 2. Add required parts to project with stock verification
+    const updatedParts = [...project.parts];
+
+    if (mod.requiredParts && mod.requiredParts.length > 0) {
+      mod.requiredParts.forEach((rp) => {
+        const invItem = rp.partId
+          ? inventory.find((i) => i.id === rp.partId)
+          : inventory.find((i) => i.name.toLowerCase() === rp.partName.toLowerCase());
+        const unitCost = invItem ? invItem.unitCostWithFees : rp.estimatedCost;
+        const partId = invItem ? invItem.id : 'part-' + Date.now() + Math.random().toString(36).substring(2, 6);
+
+        const hasAvailableStock = invItem ? invItem.quantityInStock >= rp.quantity : false;
+        const partStatus: import('../types').ProjectPartStatus = hasAvailableStock ? 'allocated' : 'to_order';
+
+        updatedParts.push({
+          partId,
+          partName: rp.partName,
+          category: rp.category,
+          unitCost,
+          quantity: rp.quantity,
+          totalCost: unitCost * rp.quantity,
+          status: partStatus,
+        });
+
+        if (hasAvailableStock && options?.deductStock && invItem) {
+          adjustStockQuantity(invItem.id, -rp.quantity);
+        } else {
+          if (invItem) {
+            updateInventoryItem(invItem.id, {
+              quantityReserved: (invItem.quantityReserved || 0) + rp.quantity,
+              linkedProjectId: project.id,
+              linkedProjectTitle: project.title,
+            });
+          } else {
+            addInventoryItem({
+              sku: 'PREV-' + Date.now().toString().slice(-4),
+              name: rp.partName,
+              category: rp.category,
+              consoleModel: project.consoleModel,
+              supplier: 'Fournisseur à définir',
+              orderDate: new Date().toISOString().split('T')[0],
+              status: 'planned_order',
+              unitPurchasePrice: rp.estimatedCost,
+              shippingCostShare: 0,
+              taxImportShare: 0,
+              unitCostWithFees: rp.estimatedCost,
+              quantityInStock: 0,
+              quantityReserved: rp.quantity,
+              minStockAlert: 1,
+              linkedProjectId: project.id,
+              linkedProjectTitle: project.title,
+              notes: `Besoin généré par le mod "${mod.name}" pour [${project.serialNumber}] ${project.title}`,
+            });
+          }
+        }
+      });
+    }
+
+    // 3. Add checklist tasks to project
+    const updatedTasks = [...(project.tasks || [])];
+    if (options?.addTasks && mod.checklistTasks && mod.checklistTasks.length > 0) {
+      mod.checklistTasks.forEach((taskTitle) => {
+        if (!updatedTasks.some((t) => t.title === taskTitle)) {
+          updatedTasks.push({
+            id: 'task-' + Date.now() + Math.random().toString(36).substring(2, 6),
+            title: taskTitle,
+            isCompleted: false,
+            category: 'soudure',
+            estimatedMinutes: Math.round((mod.estimatedMinutes || 30) / (mod.checklistTasks.length || 1)),
+          });
+        }
+      });
+    }
+
+    // 4. Update sale price target if suggestedAddedValue is present
+    const newSalePriceTarget = project.salePriceTarget + (mod.suggestedAddedValue || 0);
+
+    let updatedProjectResult: Project | null = null;
+    setProjects((prev) =>
+      prev.map((p) => {
+        if (p.id === projectId) {
+          const updated: Project = {
+            ...p,
+            modsList: updatedMods,
+            parts: updatedParts,
+            tasks: updatedTasks,
+            salePriceTarget: newSalePriceTarget,
+          };
+          updatedProjectResult = updated;
+          return updated;
+        }
+        return p;
+      })
+    );
+
+    if (updatedProjectResult) {
+      syncUpdateProject(updatedProjectResult);
+    }
+
+    addToast({
+      type: 'success',
+      title: 'Recette de Mod appliquée 🔧',
+      message: `"${mod.name}" et ses composants ont été intégrés au projet "${project.title}".`,
+    });
+  };
+
+  const saveProjectAsModRecipe = (
+    projectId: string,
+    recipeName: string,
+    category: ModCategory = 'complete_kit'
+  ): ModRecipe => {
+    const project = projects.find((p) => p.id === projectId);
+    if (!project) throw new Error('Projet introuvable');
+
+    const totalMinutes = project.timeSessions.reduce((acc, s) => acc + s.durationMinutes, 0);
+
+    const requiredParts = project.parts.map((part) => ({
+      partId: part.partId,
+      partName: part.partName,
+      category: part.category,
+      quantity: part.quantity,
+      estimatedCost: part.unitCost,
+    }));
+
+    const checklistTasks = (project.tasks || []).map((t) => t.title);
+
+    const newRecipeData: Omit<ModRecipe, 'id'> = {
+      name: recipeName.trim() || `Kit ${project.title}`,
+      category,
+      compatibleModels: [project.consoleModel],
+      description: `Recette créée à partir du projet ${project.title} (${project.serialNumber}). ${project.notes || ''}`.trim(),
+      difficulty: 'medium',
+      estimatedMinutes: totalMinutes > 0 ? totalMinutes : 60,
+      suggestedAddedValue: project.salePriceTarget ? Math.round(project.salePriceTarget * 0.25) : 30,
+      requiredParts,
+      checklistTasks,
+      tags: ['Custom', project.consoleModel],
+      isPopular: false,
+    };
+
+    return addModRecipe(newRecipeData);
+  };
+
+  // Active Timer Actions
+  const startTimer = (projectId?: string, taskType: TaskType = 'soudure_mods', description = '') => {
+    setActiveTimer({
+      projectId: projectId || selectedProjectId || null,
+      taskType,
+      description,
+      isRunning: true,
+      startTime: Date.now() - (activeTimer.elapsedSeconds * 1000),
+      elapsedSeconds: activeTimer.elapsedSeconds,
+      hourlyRate: settings.defaultHourlyRate || 25,
+    });
+    addToast({
+      type: 'info',
+      title: 'Chronomètre démarré ⏱️',
+      message: `Session lancée à ${settings.defaultHourlyRate || 25} €/h.`,
+    });
+  };
+
+  const pauseTimer = () => {
+    setActiveTimer((prev) => ({ ...prev, isRunning: false }));
+  };
+
+  const resumeTimer = () => {
+    setActiveTimer((prev) => ({ ...prev, isRunning: true }));
+  };
+
+  const resetTimer = () => {
+    setActiveTimer({
+      projectId: null,
+      taskType: 'soudure_mods',
+      description: '',
+      isRunning: false,
+      startTime: null,
+      elapsedSeconds: 0,
+      hourlyRate: settings.defaultHourlyRate || 25,
+    });
+  };
+
+  const saveTimerSession = () => {
+    if (!activeTimer.projectId) {
+      addToast({
+        type: 'error',
+        title: 'Projet manquant',
+        message: 'Veuillez sélectionner un projet pour lui affecter ce temps passé.',
+      });
+      return;
+    }
+
+    const durationMinutes = Math.max(1, Math.round(activeTimer.elapsedSeconds / 60));
+    const rate = activeTimer.hourlyRate || settings.defaultHourlyRate || 25;
+    const cost = Number(((durationMinutes / 60) * rate).toFixed(2));
+    const today = new Date().toISOString().split('T')[0];
+
+    addTimeSession(activeTimer.projectId, {
+      taskType: activeTimer.taskType,
+      description: activeTimer.description || 'Session chronométrée',
+      date: today,
+      durationMinutes,
+      hourlyRate: rate,
+      cost,
+    });
+
+    resetTimer();
+  };
+
+  const setTimerDescription = (desc: string) => {
+    setActiveTimer((prev) => ({ ...prev, description: desc }));
+  };
+
+  const setTimerTaskType = (taskType: TaskType) => {
+    setActiveTimer((prev) => ({ ...prev, taskType }));
+  };
+
+  const setTimerProject = (projectId: string | null) => {
+    setActiveTimer((prev) => ({ ...prev, projectId }));
+  };
+
+  // Authentication & JWT Actions
+  const loginUser = (user: AuthUser, expiresInHours: number = 72) => {
+    const { token, payload } = createJwtToken(user, user.ncbInstance || '54770_uwu_finances', expiresInHours);
+    const newSession: AuthSession = {
+      user,
+      token,
+      expiresAt: payload.exp * 1000,
+      isAuthenticated: true,
+    };
+    setAuthSession(newSession);
+    saveAuthSession(newSession);
+  };
+
+  const logoutUser = () => {
+    clearAuthSession();
+    const guestUser: AuthUser = {
+      id: 'user-guest',
+      name: 'Visiteur / Déconnecté',
+      email: 'guest@uwufinances.local',
+      role: 'viewer',
+      workshopName: 'Mode Invité',
+      lastLoginAt: new Date().toISOString(),
+    };
+    const newSession: AuthSession = {
+      user: guestUser,
+      token: '',
+      expiresAt: 0,
+      isAuthenticated: false,
+    };
+    setAuthSession(newSession);
+    saveAuthSession(newSession);
+    addToast({
+      type: 'info',
+      title: 'Session fermée',
+      message: 'Vous êtes désormais en session invité / déconnecté.',
+    });
+  };
+
+  const setCustomJwtToken = (token: string) => {
+    const decoded = decodeJwtToken(token);
+    if (decoded.isValid && decoded.payload) {
+      const user: AuthUser = {
+        id: decoded.payload.sub || `user-${Date.now().toString(36)}`,
+        name: decoded.payload.name || 'Utilisateur JWT',
+        email: decoded.payload.email || 'modder@uwufinances.studio',
+        role: decoded.payload.role || 'admin',
+        ncbInstance: decoded.payload.instance || '54770_uwu_finances',
+        workshopName: settings.businessName || 'Atelier Console Modding',
+        lastLoginAt: new Date().toISOString(),
+      };
+      const newSession: AuthSession = {
+        user,
+        token,
+        expiresAt: (decoded.payload.exp || Math.floor(Date.now() / 1000) + 86400) * 1000,
+        isAuthenticated: true,
+      };
+      setAuthSession(newSession);
+      saveAuthSession(newSession);
+    }
+  };
+
+  // Settings & Data Export / Import
+  const updateSettings = (updates: Partial<AppSettings>) => {
+    const updated = { ...settings, ...updates };
+    setSettings(updated);
+    syncSettings(updated);
+    addToast({
+      type: 'success',
+      title: 'Paramètres sauvegardés',
+      message: 'Vos préférences ont été mises à jour et synchronisées.',
+    });
+  };
+
+  const exportJSON = () => {
+    const data = {
+      exportDate: new Date().toISOString(),
+      app: 'uwuFinances',
+      version: '1.2.0',
+      database: '54770_uwu_finances',
+      settings,
+      categories,
+      inventory,
+      projects,
+      modsLibrary,
+    };
+    const jsonString = JSON.stringify(data, null, 2);
+    const blob = new Blob([jsonString], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = `uwuFinances_backup_${new Date().toISOString().split('T')[0]}.json`;
+    link.click();
+    URL.revokeObjectURL(url);
+    addToast({
+      type: 'success',
+      title: 'Sauvegarde exportée',
+      message: 'Fichier JSON (catégories, pièces, projets, catalogue de mods) téléchargé.',
+    });
+  };
+
+  const importJSON = (jsonData: string): boolean => {
+    try {
+      const parsed = JSON.parse(jsonData);
+      if (parsed.inventory && parsed.projects) {
+        setInventory(parsed.inventory);
+        setProjects(parsed.projects);
+        if (parsed.modsLibrary) setModsLibrary(parsed.modsLibrary);
+        if (parsed.categories) setCategories(parsed.categories);
+        if (parsed.settings) setSettings(parsed.settings);
+        
+        // Push imported data to NCB
+        seedNCBWithInitialData(
+          parsed.inventory,
+          parsed.projects,
+          parsed.modsLibrary || modsLibrary,
+          parsed.settings || settings,
+          parsed.categories || categories
+        );
+
+        addToast({
+          type: 'success',
+          title: 'Importation réussie ✨',
+          message: 'Toutes vos catégories, pièces, projets et recettes ont été restaurés et synchronisés sur le Cloud.',
+        });
+        return true;
+      }
+      throw new Error('Structure JSON non reconnue');
+    } catch (e) {
+      addToast({
+        type: 'error',
+        title: 'Erreur d\'importation',
+        message: 'Le fichier sélectionné est invalide ou corrompu.',
+      });
+      return false;
+    }
+  };
+
+  const exportInventoryCSV = () => {
+    const headers = [
+      'ID',
+      'SKU',
+      'Nom de la pièce',
+      'Catégorie',
+      'Modèle Console',
+      'Fournisseur',
+      'Date Commande',
+      'Statut',
+      'Prix Achat Unitaire (€)',
+      'Frais Port (€)',
+      'Douane/TVA (€)',
+      'Coût Réel Unitaire (€)',
+      'Stock Disponible',
+      'Stock Réservé',
+      'Seuil Alerte',
+      'Emplacement Atelier',
+      'Notes',
+    ];
+
+    const rows = inventory.map((item) => [
+      item.id,
+      item.sku,
+      `"${item.name.replace(/"/g, '""')}"`,
+      item.category,
+      `"${item.consoleModel}"`,
+      `"${item.supplier}"`,
+      item.orderDate,
+      item.status,
+      item.unitPurchasePrice,
+      item.shippingCostShare,
+      item.taxImportShare,
+      item.unitCostWithFees,
+      item.quantityInStock,
+      item.quantityReserved,
+      item.minStockAlert,
+      `"${item.locationInWorkshop || ''}"`,
+      `"${(item.notes || '').replace(/"/g, '""')}"`,
+    ]);
+
+    const csvContent = '\uFEFF' + [headers.join(';'), ...rows.map((r) => r.join(';'))].join('\n');
+    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = `uwuFinances_inventaire_${new Date().toISOString().split('T')[0]}.csv`;
+    link.click();
+    URL.revokeObjectURL(url);
+    addToast({
+      type: 'success',
+      title: 'Export CSV Inventaire généré',
+      message: 'Fichier CSV téléchargé pour Excel / Tableur.',
+    });
+  };
+
+  const exportProjectsCSV = () => {
+    const headers = [
+      'ID',
+      'Numéro de Série',
+      'Titre du Projet',
+      'Modèle Console',
+      'Type de Projet',
+      'Statut',
+      'Client',
+      'Date Début',
+      'Date Fin',
+      'Date Vente',
+      'Canal de Vente',
+      'Prix Vente Cible (€)',
+      'Prix Vente Réel (€)',
+      'Nombre de Pièces',
+      'Coût Total Pièces (€)',
+      'Temps Total (Minutes)',
+      'Coût Main d\'œuvre (€)',
+      'Consommables & Packaging (€)',
+      'Frais Port & Plateforme (€)',
+      'Notes',
+    ];
+
+    const rows = projects.map((proj) => {
+      const partsCost = proj.parts.reduce((s, p) => s + p.totalCost, 0);
+      const laborMins = proj.timeSessions.reduce((s, t) => s + t.durationMinutes, 0);
+      const laborCost = proj.timeSessions.reduce((s, t) => s + t.cost, 0);
+      const otherCosts = (proj.additionalFees?.consumablesEst || 0) + (proj.additionalFees?.packagingCost || 0);
+      const fees = (proj.additionalFees?.shippingCost || 0) + ((proj.salePriceActual || proj.salePriceTarget) * (proj.additionalFees?.platformFeePercent || 0) / 100);
+
+      return [
+        proj.id,
+        proj.serialNumber,
+        `"${proj.title.replace(/"/g, '""')}"`,
+        `"${proj.consoleModel}"`,
+        proj.type,
+        proj.status,
+        `"${proj.customerName || ''}"`,
+        proj.startDate,
+        proj.completedDate || '',
+        proj.soldDate || '',
+        proj.salesChannel || '',
+        proj.salePriceTarget,
+        proj.salePriceActual || '',
+        proj.parts.length,
+        partsCost.toFixed(2),
+        laborMins,
+        laborCost.toFixed(2),
+        otherCosts.toFixed(2),
+        fees.toFixed(2),
+        `"${(proj.notes || '').replace(/"/g, '""')}"`,
+      ];
+    });
+
+    const csvContent = '\uFEFF' + [headers.join(';'), ...rows.map((r) => r.join(';'))].join('\n');
+    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = `uwuFinances_projets_${new Date().toISOString().split('T')[0]}.csv`;
+    link.click();
+    URL.revokeObjectURL(url);
+    addToast({
+      type: 'success',
+      title: 'Export CSV Projets généré',
+      message: 'Fichier CSV des projets téléchargé avec succès.',
+    });
+  };
+
+  const resetToSampleData = () => {
+    setInventory(INITIAL_INVENTORY);
+    setProjects(INITIAL_PROJECTS);
+    setModsLibrary(INITIAL_MOD_RECIPES);
+    setCategories(INITIAL_CATEGORIES);
+    setSettings(INITIAL_SETTINGS);
+    seedNCBWithInitialData(INITIAL_INVENTORY, INITIAL_PROJECTS, INITIAL_MOD_RECIPES, INITIAL_SETTINGS, INITIAL_CATEGORIES);
+    addToast({
+      type: 'info',
+      title: 'Données réinitialisées',
+      message: 'Le catalogue d\'exemples, catégories et projets ont été restaurés en local et sur le Cloud.',
+    });
+  };
+
+  return (
+    <AppContext.Provider
+      value={{
+        inventory,
+        projects,
+        modsLibrary,
+        settings,
+        categories,
+        partCategories,
+        consoleModels,
+        modCategories,
+        activeTimer,
+        toasts,
+        currentTab,
+        setCurrentTab,
+        selectedProjectId,
+        setSelectedProjectId,
+        showNewProjectModal,
+        setShowNewProjectModal,
+        showNewInventoryModal,
+        setShowNewInventoryModal,
+        authSession,
+        showAuthModal,
+        setShowAuthModal,
+        loginUser,
+        logoutUser,
+        setCustomJwtToken,
+        dbSyncStatus,
+        lastSyncedAt,
+        refreshFromDatabase,
+        syncAllToDatabase,
+        addCategory,
+        updateCategory,
+        deleteCategory,
+        reorderCategories,
+        getCategoryLabel,
+        getCategoryBadge,
+        addInventoryItem,
+        updateInventoryItem,
+        deleteInventoryItem,
+        adjustStockQuantity,
+        addProject,
+        updateProject,
+        updateProjectStatus,
+        deleteProject,
+        markProjectAsSold,
+        duplicateProject,
+        addPartToProject,
+        updateProjectPartStatus,
+        receivePlannedItem,
+        updateProjectPart,
+        removePartFromProject,
+        addTimeSession,
+        deleteTimeSession,
+        toggleProjectTask,
+        addProjectTask,
+        deleteProjectTask,
+        updateProjectObjectives,
+        addModRecipe,
+        updateModRecipe,
+        deleteModRecipe,
+        applyModToProject,
+        saveProjectAsModRecipe,
+        startTimer,
+        pauseTimer,
+        resumeTimer,
+        resetTimer,
+        saveTimerSession,
+        setTimerDescription,
+        setTimerTaskType,
+        setTimerProject,
+        updateSettings,
+        exportJSON,
+        importJSON,
+        exportInventoryCSV,
+        exportProjectsCSV,
+        resetToSampleData,
+        addToast,
+        removeToast,
+      }}
+    >
+      {children}
+    </AppContext.Provider>
+  );
+};
+
+export const useApp = () => {
+  const context = useContext(AppContext);
+  if (!context) {
+    throw new Error('useApp must be used within an AppProvider');
+  }
+  return context;
+};
diff --git a/src/data/initialData.ts b/src/data/initialData.ts
new file mode 100644
index 0000000..46233ac
--- /dev/null
+++ b/src/data/initialData.ts
@@ -0,0 +1,1348 @@
+import type { InventoryItem, Project, AppSettings, AppCategory } from '../types';
+
+export const INITIAL_CATEGORIES: AppCategory[] = [
+  // Part Categories
+  {
+    id: 'cat-part-1',
+    name: 'Console Donneuse / Brute',
+    slug: 'console_base',
+    type: 'part_category',
+    color: '#f59e0b',
+    badgeColor: 'bg-amber-500/10 text-amber-400 border-amber-500/30',
+    description: 'Consoles donneuses, cartes mères et bases pour restauration',
+    sortOrder: 1,
+    isActive: true,
+  },
+  {
+    id: 'cat-part-2',
+    name: 'Écran & Verre (IPS / OLED)',
+    slug: 'screen',
+    type: 'part_category',
+    color: '#06b6d4',
+    badgeColor: 'bg-cyan-500/10 text-cyan-400 border-cyan-500/30',
+    description: 'Kits d\'écran rétroéclairés IPS, AMOLED, lentilles en verre',
+    sortOrder: 2,
+    isActive: true,
+  },
+  {
+    id: 'cat-part-3',
+    name: 'Coque & Plasturgie',
+    slug: 'shell',
+    type: 'part_category',
+    color: '#a855f7',
+    badgeColor: 'bg-purple-500/10 text-purple-400 border-purple-500/30',
+    description: 'Coques complètes, plasturgie, charnières et vis',
+    sortOrder: 3,
+    isActive: true,
+  },
+  {
+    id: 'cat-part-4',
+    name: 'Boutons & Silicones',
+    slug: 'buttons_pads',
+    type: 'part_category',
+    color: '#3b82f6',
+    badgeColor: 'bg-blue-500/10 text-blue-400 border-blue-500/30',
+    description: 'Boutons plastiques, aluminium CNC, pads de contact silicone',
+    sortOrder: 4,
+    isActive: true,
+  },
+  {
+    id: 'cat-part-5',
+    name: 'Électronique & Cartes Mères',
+    slug: 'motherboard_electronics',
+    type: 'part_category',
+    color: '#6366f1',
+    badgeColor: 'bg-indigo-500/10 text-indigo-400 border-indigo-500/30',
+    description: 'Condensateurs, connecteurs, nappes flex, quartz, circuits intégrés',
+    sortOrder: 5,
+    isActive: true,
+  },
+  {
+    id: 'cat-part-6',
+    name: 'Batterie & Alimentation LiPo / USB-C',
+    slug: 'battery_power',
+    type: 'part_category',
+    color: '#10b981',
+    badgeColor: 'bg-emerald-500/10 text-emerald-400 border-emerald-500/30',
+    description: 'Batteries LiPo, modules de charge USB-C, régulateurs de tension',
+    sortOrder: 6,
+    isActive: true,
+  },
+  {
+    id: 'cat-part-7',
+    name: 'Audio, Haut-parleur & Ampli',
+    slug: 'sound_amp',
+    type: 'part_category',
+    color: '#ec4899',
+    badgeColor: 'bg-pink-500/10 text-pink-400 border-pink-500/30',
+    description: 'Amplificateurs CleanAmp, haut-parleurs néodyme, prises jack',
+    sortOrder: 7,
+    isActive: true,
+  },
+  {
+    id: 'cat-part-8',
+    name: 'Cartouches & Flashcards',
+    slug: 'cartridge_games',
+    type: 'part_category',
+    color: '#f43f5e',
+    badgeColor: 'bg-rose-500/10 text-rose-400 border-rose-500/30',
+    description: 'Linkers, flashcards EZ-Flash, cartouches de test',
+    sortOrder: 8,
+    isActive: true,
+  },
+  {
+    id: 'cat-part-9',
+    name: 'Consommables & Soudure',
+    slug: 'consumables',
+    type: 'part_category',
+    color: '#64748b',
+    badgeColor: 'bg-slate-500/10 text-slate-400 border-slate-500/30',
+    description: 'Étain, flux, tresse à dessouder, alcool IPA, fils Kynar',
+    sortOrder: 9,
+    isActive: true,
+  },
+  {
+    id: 'cat-part-10',
+    name: 'Packaging & Accessoires',
+    slug: 'packaging_accessories',
+    type: 'part_category',
+    color: '#8b5cf6',
+    badgeColor: 'bg-purple-500/10 text-purple-400 border-purple-500/30',
+    description: 'Boîtes rigides kraft, stickers, pochettes de protection, dragonnes',
+    sortOrder: 10,
+    isActive: true,
+  },
+  {
+    id: 'cat-part-11',
+    name: 'Autre matériel',
+    slug: 'other',
+    type: 'part_category',
+    color: '#94a3b8',
+    badgeColor: 'bg-slate-500/10 text-slate-400 border-slate-500/30',
+    description: 'Fournitures diverses et composants spécifiques',
+    sortOrder: 11,
+    isActive: true,
+  },
+
+  // Console Models
+  {
+    id: 'cat-console-1',
+    name: 'Game Boy DMG',
+    slug: 'Game Boy DMG',
+    type: 'console_model',
+    color: '#a3e635',
+    badgeColor: 'bg-lime-500/10 text-lime-400 border-lime-500/30',
+    sortOrder: 1,
+    isActive: true,
+  },
+  {
+    id: 'cat-console-2',
+    name: 'Game Boy Pocket',
+    slug: 'Game Boy Pocket',
+    type: 'console_model',
+    color: '#38bdf8',
+    badgeColor: 'bg-sky-500/10 text-sky-400 border-sky-500/30',
+    sortOrder: 2,
+    isActive: true,
+  },
+  {
+    id: 'cat-console-3',
+    name: 'Game Boy Light',
+    slug: 'Game Boy Light',
+    type: 'console_model',
+    color: '#fbbf24',
+    badgeColor: 'bg-amber-500/10 text-amber-400 border-amber-500/30',
+    sortOrder: 3,
+    isActive: true,
+  },
+  {
+    id: 'cat-console-4',
+    name: 'Game Boy Color',
+    slug: 'Game Boy Color',
+    type: 'console_model',
+    color: '#c084fc',
+    badgeColor: 'bg-purple-500/10 text-purple-400 border-purple-500/30',
+    sortOrder: 4,
+    isActive: true,
+  },
+  {
+    id: 'cat-console-5',
+    name: 'Game Boy Advance',
+    slug: 'Game Boy Advance',
+    type: 'console_model',
+    color: '#818cf8',
+    badgeColor: 'bg-indigo-500/10 text-indigo-400 border-indigo-500/30',
+    sortOrder: 5,
+    isActive: true,
+  },
+  {
+    id: 'cat-console-6',
+    name: 'GBA SP',
+    slug: 'GBA SP',
+    type: 'console_model',
+    color: '#f472b6',
+    badgeColor: 'bg-pink-500/10 text-pink-400 border-pink-500/30',
+    sortOrder: 6,
+    isActive: true,
+  },
+  {
+    id: 'cat-console-7',
+    name: 'Game Boy Micro',
+    slug: 'Game Boy Micro',
+    type: 'console_model',
+    color: '#fb7185',
+    badgeColor: 'bg-rose-500/10 text-rose-400 border-rose-500/30',
+    sortOrder: 7,
+    isActive: true,
+  },
+  {
+    id: 'cat-console-8',
+    name: 'Nintendo DS Lite',
+    slug: 'Nintendo DS Lite',
+    type: 'console_model',
+    color: '#94a3b8',
+    badgeColor: 'bg-slate-500/10 text-slate-400 border-slate-500/30',
+    sortOrder: 8,
+    isActive: true,
+  },
+  {
+    id: 'cat-console-9',
+    name: 'Nintendo DSi',
+    slug: 'Nintendo DSi',
+    type: 'console_model',
+    color: '#64748b',
+    badgeColor: 'bg-slate-500/10 text-slate-400 border-slate-500/30',
+    sortOrder: 9,
+    isActive: true,
+  },
+  {
+    id: 'cat-console-10',
+    name: 'Nintendo 3DS / 3DS XL',
+    slug: 'Nintendo 3DS / 3DS XL',
+    type: 'console_model',
+    color: '#e879f9',
+    badgeColor: 'bg-fuchsia-500/10 text-fuchsia-400 border-fuchsia-500/30',
+    sortOrder: 10,
+    isActive: true,
+  },
+  {
+    id: 'cat-console-11',
+    name: 'New 3DS / New 2DS',
+    slug: 'New 3DS / New 2DS',
+    type: 'console_model',
+    color: '#d946ef',
+    badgeColor: 'bg-fuchsia-500/10 text-fuchsia-400 border-fuchsia-500/30',
+    sortOrder: 11,
+    isActive: true,
+  },
+  {
+    id: 'cat-console-12',
+    name: 'PSP 1000 / 2000 / 3000',
+    slug: 'PSP 1000 / 2000 / 3000',
+    type: 'console_model',
+    color: '#2dd4bf',
+    badgeColor: 'bg-teal-500/10 text-teal-400 border-teal-500/30',
+    sortOrder: 12,
+    isActive: true,
+  },
+  {
+    id: 'cat-console-13',
+    name: 'PS Vita',
+    slug: 'PS Vita',
+    type: 'console_model',
+    color: '#0ea5e9',
+    badgeColor: 'bg-sky-500/10 text-sky-400 border-sky-500/30',
+    sortOrder: 13,
+    isActive: true,
+  },
+  {
+    id: 'cat-console-14',
+    name: 'Nintendo Switch / Lite / OLED',
+    slug: 'Nintendo Switch / Lite / OLED',
+    type: 'console_model',
+    color: '#ef4444',
+    badgeColor: 'bg-red-500/10 text-red-400 border-red-500/30',
+    sortOrder: 14,
+    isActive: true,
+  },
+  {
+    id: 'cat-console-15',
+    name: 'Sega Game Gear',
+    slug: 'Sega Game Gear',
+    type: 'console_model',
+    color: '#3b82f6',
+    badgeColor: 'bg-blue-500/10 text-blue-400 border-blue-500/30',
+    sortOrder: 15,
+    isActive: true,
+  },
+  {
+    id: 'cat-console-16',
+    name: 'WonderSwan',
+    slug: 'WonderSwan',
+    type: 'console_model',
+    color: '#f59e0b',
+    badgeColor: 'bg-amber-500/10 text-amber-400 border-amber-500/30',
+    sortOrder: 16,
+    isActive: true,
+  },
+  {
+    id: 'cat-console-17',
+    name: 'Manette Pro / Rétro',
+    slug: 'Manette Pro / Rétro',
+    type: 'console_model',
+    color: '#10b981',
+    badgeColor: 'bg-emerald-500/10 text-emerald-400 border-emerald-500/30',
+    sortOrder: 17,
+    isActive: true,
+  },
+  {
+    id: 'cat-console-18',
+    name: 'Autre / Custom',
+    slug: 'Autre / Custom',
+    type: 'console_model',
+    color: '#94a3b8',
+    badgeColor: 'bg-slate-500/10 text-slate-400 border-slate-500/30',
+    sortOrder: 18,
+    isActive: true,
+  },
+
+  // Mod Categories
+  {
+    id: 'cat-mod-1',
+    name: 'Écran & Affichage',
+    slug: 'screen',
+    type: 'mod_category',
+    color: '#06b6d4',
+    badgeColor: 'bg-cyan-500/10 text-cyan-400 border-cyan-500/30',
+    sortOrder: 1,
+    isActive: true,
+  },
+  {
+    id: 'cat-mod-2',
+    name: 'Alimentation & Batterie',
+    slug: 'battery_power',
+    type: 'mod_category',
+    color: '#10b981',
+    badgeColor: 'bg-emerald-500/10 text-emerald-400 border-emerald-500/30',
+    sortOrder: 2,
+    isActive: true,
+  },
+  {
+    id: 'cat-mod-3',
+    name: 'Audio & Haut-parleurs',
+    slug: 'audio_sound',
+    type: 'mod_category',
+    color: '#ec4899',
+    badgeColor: 'bg-pink-500/10 text-pink-400 border-pink-500/30',
+    sortOrder: 3,
+    isActive: true,
+  },
+  {
+    id: 'cat-mod-4',
+    name: 'Coque & Esthétique',
+    slug: 'shell_aesthetics',
+    type: 'mod_category',
+    color: '#a855f7',
+    badgeColor: 'bg-purple-500/10 text-purple-400 border-purple-500/30',
+    sortOrder: 4,
+    isActive: true,
+  },
+  {
+    id: 'cat-mod-5',
+    name: 'Boutons & Éclairage LED',
+    slug: 'buttons_led',
+    type: 'mod_category',
+    color: '#3b82f6',
+    badgeColor: 'bg-blue-500/10 text-blue-400 border-blue-500/30',
+    sortOrder: 5,
+    isActive: true,
+  },
+  {
+    id: 'cat-mod-6',
+    name: 'Carte Mère & Recap',
+    slug: 'motherboard_recap',
+    type: 'mod_category',
+    color: '#6366f1',
+    badgeColor: 'bg-indigo-500/10 text-indigo-400 border-indigo-500/30',
+    sortOrder: 6,
+    isActive: true,
+  },
+  {
+    id: 'cat-mod-7',
+    name: 'Stockage & Flashcarts',
+    slug: 'storage_expansion',
+    type: 'mod_category',
+    color: '#f43f5e',
+    badgeColor: 'bg-rose-500/10 text-rose-400 border-rose-500/30',
+    sortOrder: 7,
+    isActive: true,
+  },
+  {
+    id: 'cat-mod-8',
+    name: 'Kits Complets Tout-en-un',
+    slug: 'complete_kit',
+    type: 'mod_category',
+    color: '#eab308',
+    badgeColor: 'bg-amber-500/10 text-amber-400 border-amber-500/30',
+    sortOrder: 8,
+    isActive: true,
+  },
+  {
+    id: 'cat-mod-9',
+    name: 'Autres Modding',
+    slug: 'other',
+    type: 'mod_category',
+    color: '#94a3b8',
+    badgeColor: 'bg-slate-500/10 text-slate-400 border-slate-500/30',
+    sortOrder: 9,
+    isActive: true,
+  },
+];
+
+export const INITIAL_SETTINGS: AppSettings = {
+  currency: '€',
+  defaultHourlyRate: 25,
+  defaultPlatformFeePercent: 5,
+  theme: 'uwu-pink',
+  businessName: 'uwu Custom Studio 🎮',
+  workshopLocation: 'Atelier Console Modding - Lyon',
+  logoText: 'uwuFinances',
+};
+
+export const INITIAL_INVENTORY: InventoryItem[] = [
+  // Consoles de base / donneuses
+  {
+    id: 'inv-1',
+    sku: 'CON-GBA-001',
+    name: 'Game Boy Advance SP AGS-001 (Carte mère fonctionnelle)',
+    category: 'console_base',
+    consoleModel: 'GBA SP',
+    supplier: 'Brocante / Lot Vinted',
+    orderDate: '2026-09-02',
+    status: 'in_stock',
+    unitPurchasePrice: 35.0,
+    shippingCostShare: 2.5,
+    taxImportShare: 0,
+    unitCostWithFees: 37.5,
+    quantityInStock: 3,
+    quantityReserved: 1,
+    minStockAlert: 2,
+    locationInWorkshop: 'Bac A1 - Consoles Brutes',
+    notes: 'Testées OK, son et charge fonctionnels, coques d\'origine très rayées à remplacer.',
+  },
+  {
+    id: 'inv-2',
+    sku: 'CON-GBC-002',
+    name: 'Game Boy Color CGB-001 (Brute à restaurer)',
+    category: 'console_base',
+    consoleModel: 'Game Boy Color',
+    supplier: 'Leboncoin Lot',
+    orderDate: '2026-08-15',
+    status: 'in_stock',
+    unitPurchasePrice: 30.0,
+    shippingCostShare: 3.0,
+    taxImportShare: 0,
+    unitCostWithFees: 33.0,
+    quantityInStock: 2,
+    quantityReserved: 1,
+    minStockAlert: 1,
+    locationInWorkshop: 'Bac A1 - Consoles Brutes',
+    notes: 'Écran d\'origine avec polariseur brûlé (parfait pour mod IPS).',
+  },
+  {
+    id: 'inv-3',
+    sku: 'CON-DMG-003',
+    name: 'Game Boy Originale DMG-01 (Carte mère CPU-06)',
+    category: 'console_base',
+    consoleModel: 'Game Boy DMG',
+    supplier: 'Vide Grenier',
+    orderDate: '2026-08-28',
+    status: 'in_stock',
+    unitPurchasePrice: 20.0,
+    shippingCostShare: 0,
+    taxImportShare: 0,
+    unitCostWithFees: 20.0,
+    quantityInStock: 1,
+    quantityReserved: 0,
+    minStockAlert: 1,
+    locationInWorkshop: 'Bac A2',
+    notes: 'Lignes manquantes sur écran d\'origine, cartes mères propres.',
+  },
+  {
+    id: 'inv-4',
+    sku: 'CON-PSP-004',
+    name: 'Sony PSP-3000 Piano Black (Lecteur UMD OK)',
+    category: 'console_base',
+    consoleModel: 'PSP 1000 / 2000 / 3000',
+    supplier: 'Vinted',
+    orderDate: '2026-09-10',
+    status: 'in_stock',
+    unitPurchasePrice: 28.0,
+    shippingCostShare: 3.5,
+    taxImportShare: 0,
+    unitCostWithFees: 31.5,
+    quantityInStock: 2,
+    quantityReserved: 1,
+    minStockAlert: 1,
+    locationInWorkshop: 'Tiroir PSP',
+    notes: 'Batterie d\'origine gonflée à jeter.',
+  },
+
+  // Écrans
+  {
+    id: 'inv-5',
+    sku: 'SCR-GBASP-IPS',
+    name: 'Kit Écran IPS V3 Drop-in Laminé avec Menu OSD',
+    category: 'screen',
+    consoleModel: 'GBA SP',
+    supplier: 'Hispeedido (AliExpress)',
+    orderDate: '2026-09-01',
+    status: 'in_stock',
+    unitPurchasePrice: 38.5,
+    shippingCostShare: 1.5,
+    taxImportShare: 2.0,
+    unitCostWithFees: 42.0,
+    quantityInStock: 4,
+    quantityReserved: 1,
+    minStockAlert: 2,
+    locationInWorkshop: 'Tiroir Écrans B1',
+    notes: '7 niveaux de luminosité + 8 filtres de couleurs et grille rétro pixels.',
+  },
+  {
+    id: 'inv-6',
+    sku: 'SCR-GBC-AMOLED',
+    name: 'Kit Écran AMOLED / IPS Q5 Laminé Logo Rétroéclairé',
+    category: 'screen',
+    consoleModel: 'Game Boy Color',
+    supplier: 'FunnyPlaying Official',
+    orderDate: '2026-09-05',
+    status: 'in_stock',
+    unitPurchasePrice: 44.0,
+    shippingCostShare: 2.0,
+    taxImportShare: 3.0,
+    unitCostWithFees: 49.0,
+    quantityInStock: 3,
+    quantityReserved: 1,
+    minStockAlert: 2,
+    locationInWorkshop: 'Tiroir Écrans B1',
+    notes: 'Qualité d\'affichage exceptionnelle, logo Game Boy Color personnalisable en couleur.',
+  },
+  {
+    id: 'inv-7',
+    sku: 'SCR-GBA-IPS-V5',
+    name: 'Kit Écran IPS V5 720x480 Laminé sans soudure',
+    category: 'screen',
+    consoleModel: 'Game Boy Advance',
+    supplier: 'Cloud Game Store',
+    orderDate: '2026-08-20',
+    status: 'in_stock',
+    unitPurchasePrice: 41.0,
+    shippingCostShare: 1.5,
+    taxImportShare: 2.5,
+    unitCostWithFees: 45.0,
+    quantityInStock: 2,
+    quantityReserved: 1,
+    minStockAlert: 2,
+    locationInWorkshop: 'Tiroir Écrans B2',
+  },
+
+  // Coques & Boutons
+  {
+    id: 'inv-8',
+    sku: 'SHL-GBASP-PURP',
+    name: 'Coque Complète Atomic Purple Translucide Premium + Charnières',
+    category: 'shell',
+    consoleModel: 'GBA SP',
+    supplier: 'Extremerate Store',
+    orderDate: '2026-09-01',
+    status: 'in_stock',
+    unitPurchasePrice: 14.5,
+    shippingCostShare: 1.0,
+    taxImportShare: 0.5,
+    unitCostWithFees: 16.0,
+    quantityInStock: 5,
+    quantityReserved: 1,
+    minStockAlert: 2,
+    locationInWorkshop: 'Rayon Coques C1',
+  },
+  {
+    id: 'inv-9',
+    sku: 'SHL-GBC-GLOW',
+    name: 'Coque GBC Glow in the Dark (Fluorescente) + Vitre Verre',
+    category: 'shell',
+    consoleModel: 'Game Boy Color',
+    supplier: 'FunnyPlaying',
+    orderDate: '2026-09-05',
+    status: 'in_stock',
+    unitPurchasePrice: 12.0,
+    shippingCostShare: 1.0,
+    taxImportShare: 0.8,
+    unitCostWithFees: 13.8,
+    quantityInStock: 3,
+    quantityReserved: 1,
+    minStockAlert: 1,
+    locationInWorkshop: 'Rayon Coques C2',
+  },
+  {
+    id: 'inv-10',
+    sku: 'BTN-CNC-ALU-GBA',
+    name: 'Set Boutons Métal Aluminium CNC Usiné (D-Pad, A, B, L/R)',
+    category: 'buttons_pads',
+    consoleModel: 'Game Boy Advance',
+    supplier: 'BoxyPixel / AliExpress Machining',
+    orderDate: '2026-08-25',
+    status: 'in_stock',
+    unitPurchasePrice: 9.5,
+    shippingCostShare: 0.5,
+    taxImportShare: 0.8,
+    unitCostWithFees: 10.8,
+    quantityInStock: 4,
+    quantityReserved: 1,
+    minStockAlert: 2,
+    locationInWorkshop: 'Boîte Petits Composants',
+  },
+
+  // Alimentation & Batteries
+  {
+    id: 'inv-11',
+    sku: 'PWR-USBC-GBASP',
+    name: 'Module Remplacement Port Charge USB-C Pro + Filtre Anti-Bruit',
+    category: 'battery_power',
+    consoleModel: 'GBA SP',
+    supplier: 'Giltesa / DIY GitHub OpenSource',
+    orderDate: '2026-08-28',
+    status: 'in_stock',
+    unitPurchasePrice: 4.2,
+    shippingCostShare: 0.3,
+    taxImportShare: 0.0,
+    unitCostWithFees: 4.5,
+    quantityInStock: 12,
+    quantityReserved: 2,
+    minStockAlert: 5,
+    locationInWorkshop: 'Boîte USB-C & Connecteurs',
+    notes: 'Supporte la charge C-to-C moderne et écouteurs USB-C.',
+  },
+  {
+    id: 'inv-12',
+    sku: 'BAT-LIPO-950',
+    name: 'Batterie LiPo 950mAh Makho Extended pour GBA SP',
+    category: 'battery_power',
+    consoleModel: 'GBA SP',
+    supplier: 'Helders Game Labs / Retromodding',
+    orderDate: '2026-09-02',
+    status: 'in_stock',
+    unitPurchasePrice: 8.5,
+    shippingCostShare: 0.5,
+    taxImportShare: 0.5,
+    unitCostWithFees: 9.5,
+    quantityInStock: 6,
+    quantityReserved: 1,
+    minStockAlert: 3,
+    locationInWorkshop: 'Boîte Batteries Sécurisée',
+    notes: 'Autonomie supérieure à 8h avec écran IPS.',
+  },
+
+  // Audio & Mods
+  {
+    id: 'inv-13',
+    sku: 'AUD-CLEANAMP-GBC',
+    name: 'Module Amplificateur Audio CleanAmp Pro + Haut-parleur 2W',
+    category: 'sound_amp',
+    consoleModel: 'Game Boy Color',
+    supplier: 'RetroSix Direct',
+    orderDate: '2026-08-20',
+    status: 'in_stock',
+    unitPurchasePrice: 11.0,
+    shippingCostShare: 1.0,
+    taxImportShare: 0.5,
+    unitCostWithFees: 12.5,
+    quantityInStock: 3,
+    quantityReserved: 1,
+    minStockAlert: 2,
+    locationInWorkshop: 'Tiroir Audio',
+    notes: 'Son 4x plus fort et ultra clair, élimine le sifflement de fond.',
+  },
+
+  // Packaging & Accessoires
+  {
+    id: 'inv-14',
+    sku: 'PKG-BOX-KRAFT-GB',
+    name: 'Boîte Cadeau Rétro Kraft Rigide + Mousse thermoformée',
+    category: 'packaging_accessories',
+    consoleModel: 'Autre / Custom',
+    supplier: 'PackHelp',
+    orderDate: '2026-08-10',
+    status: 'in_stock',
+    unitPurchasePrice: 3.2,
+    shippingCostShare: 0.3,
+    taxImportShare: 0,
+    unitCostWithFees: 3.5,
+    quantityInStock: 18,
+    quantityReserved: 3,
+    minStockAlert: 5,
+    locationInWorkshop: 'Étagère Cartons Packaging',
+  },
+  {
+    id: 'inv-15',
+    sku: 'CRT-EZFLASH-ODE',
+    name: 'Cartouche Flash EZ-Flash Omega Definitive Edition (MicroSD)',
+    category: 'cartridge_games',
+    consoleModel: 'Game Boy Advance',
+    supplier: 'Official Reseller',
+    orderDate: '2026-09-08',
+    status: 'in_stock',
+    unitPurchasePrice: 48.0,
+    shippingCostShare: 1.5,
+    taxImportShare: 2.5,
+    unitCostWithFees: 52.0,
+    quantityInStock: 2,
+    quantityReserved: 0,
+    minStockAlert: 1,
+    locationInWorkshop: 'Vitrine Accessoires',
+  },
+];
+
+export const INITIAL_PROJECTS: Project[] = [
+  // 1. Projet VENDU avec succès
+  {
+    id: 'proj-1',
+    title: 'GBA SP Cyberpunk Neon - IPS V3 & USB-C CleanJuice',
+    serialNumber: 'UWU-SP-2026-001',
+    consoleModel: 'GBA SP',
+    type: 'showcase_sale',
+    status: 'sold',
+    customerName: 'Maxime D. (via Vinted)',
+    startDate: '2026-09-05',
+    completedDate: '2026-09-12',
+    soldDate: '2026-09-18',
+    salesChannel: 'vinted',
+    objectives: {
+      targetDeadlineDate: '2026-09-15',
+      targetProfitMin: 65,
+      targetLaborHoursMax: 4.5,
+      targetMarginPercentMin: 35,
+    },
+    tasks: [
+      { id: 't-101', title: 'Diagnostic donneuse & ultrasons IPA', isCompleted: true, category: 'diagnostic', dueDate: '2026-09-05' },
+      { id: 't-102', title: 'Dessoudage port charge & pose module USB-C', isCompleted: true, category: 'soudure', dueDate: '2026-09-08' },
+      { id: 't-103', title: 'Installation écran IPS V3 & câblage OSD', isCompleted: true, category: 'soudure', dueDate: '2026-09-09' },
+      { id: 't-104', title: 'Charnières neuves & fermeture coque Purple', isCompleted: true, category: 'assemblage', dueDate: '2026-09-10' },
+      { id: 't-105', title: 'Banc de tests QC autonomie & boutons', isCompleted: true, category: 'test_qc', dueDate: '2026-09-12' },
+      { id: 't-106', title: 'Shooting photo & boîte kraft rigide', isCompleted: true, category: 'packaging', dueDate: '2026-09-12' },
+    ],
+    parts: [
+      {
+        partId: 'inv-1',
+        partName: 'Game Boy Advance SP AGS-001 (Carte mère)',
+        category: 'console_base',
+        unitCost: 37.5,
+        quantity: 1,
+        totalCost: 37.5,
+      },
+      {
+        partId: 'inv-5',
+        partName: 'Kit Écran IPS V3 Drop-in Laminé OSD',
+        category: 'screen',
+        unitCost: 42.0,
+        quantity: 1,
+        totalCost: 42.0,
+      },
+      {
+        partId: 'inv-8',
+        partName: 'Coque Atomic Purple Translucide Premium',
+        category: 'shell',
+        unitCost: 16.0,
+        quantity: 1,
+        totalCost: 16.0,
+      },
+      {
+        partId: 'inv-11',
+        partName: 'Module Port Charge USB-C Pro',
+        category: 'battery_power',
+        unitCost: 4.5,
+        quantity: 1,
+        totalCost: 4.5,
+      },
+      {
+        partId: 'inv-12',
+        partName: 'Batterie LiPo 950mAh Makho Extended',
+        category: 'battery_power',
+        unitCost: 9.5,
+        quantity: 1,
+        totalCost: 9.5,
+      },
+    ],
+    timeSessions: [
+      {
+        id: 'time-101',
+        projectId: 'proj-1',
+        taskType: 'diagnostic_demontage',
+        description: 'Démontage de la console donneuse, nettoyage complet de la carte mère au bac à ultrasons IPA, test des switchs d\'allumage.',
+        date: '2026-09-05',
+        durationMinutes: 45,
+        hourlyRate: 25,
+        cost: 18.75,
+      },
+      {
+        id: 'time-102',
+        projectId: 'proj-1',
+        taskType: 'soudure_mods',
+        description: 'Dessoudage du port propriétaire, pose du module USB-C avec soudure des 4 points de renfort, câblage des 3 fils OSD pour le contrôle de luminosité.',
+        date: '2026-09-08',
+        durationMinutes: 75,
+        hourlyRate: 25,
+        cost: 31.25,
+      },
+      {
+        id: 'time-103',
+        projectId: 'proj-1',
+        taskType: 'assemblage',
+        description: 'Pose des charnières neuves, installation de l\'écran laminé sans poussière sous flux d\'air, passage de la nappe et fermeture coque.',
+        date: '2026-09-10',
+        durationMinutes: 60,
+        hourlyRate: 25,
+        cost: 25.0,
+      },
+      {
+        id: 'time-104',
+        projectId: 'proj-1',
+        taskType: 'test_qc',
+        description: 'Test complet de 2h sur Pokémon Emeraude : réactivité des boutons, charge USB-C complète, autonomie LiPo, contrôle des couleurs OSD.',
+        date: '2026-09-12',
+        durationMinutes: 30,
+        hourlyRate: 25,
+        cost: 12.5,
+      },
+      {
+        id: 'time-105',
+        projectId: 'proj-1',
+        taskType: 'packaging_photo',
+        description: 'Nettoyage microfibre, prise de photos studio pour annonce, mise en boîte rigide avec sticker hologramme d\'authenticité.',
+        date: '2026-09-12',
+        durationMinutes: 30,
+        hourlyRate: 25,
+        cost: 12.5,
+      },
+    ],
+    hourlyRateDefault: 25,
+    additionalFees: {
+      consumablesEst: 3.0,
+      packagingCost: 4.5,
+      shippingCost: 0.0,
+      platformFeePercent: 0.0,
+      platformFeeFixed: 0.0,
+      otherFees: 1.5,
+    },
+    salePriceTarget: 189.0,
+    salePriceActual: 189.0,
+    notes: 'Vendu en 48h ! Client extrêmement satisfait. Retours positifs sur la qualité de l\'écran et le port USB-C.',
+    modsList: [
+      'Écran IPS V3 laminé antireflet avec menu OSD (7 niveaux luminosité + grille rétro pixels)',
+      'Port de charge USB-C (supporte chargeurs rapides C-to-C)',
+      'Batterie LiPo 950mAh neuve haute autonomie (~8h)',
+      'Coque neuve translucide Atomic Purple édition limitée',
+      'Nettoyage aux ultrasons des contacts et de l\'interrupteur ON/OFF',
+      'Sticker arrière sérigraphié personnalisé uwuFinances',
+    ],
+    warrantyMonths: 6,
+  },
+
+  // 2. Projet EN STOCK PRÊT À VENDRE
+  {
+    id: 'proj-2',
+    title: 'Game Boy Color Glow In The Dark - AMOLED Q5 & CleanAmp',
+    serialNumber: 'UWU-GBC-2026-002',
+    consoleModel: 'Game Boy Color',
+    type: 'showcase_sale',
+    status: 'in_stock_ready',
+    startDate: '2026-09-14',
+    completedDate: '2026-09-22',
+    salesChannel: 'direct_shop',
+    objectives: {
+      targetDeadlineDate: '2026-09-25',
+      targetProfitMin: 60,
+      targetLaborHoursMax: 4.0,
+      targetMarginPercentMin: 35,
+    },
+    tasks: [
+      { id: 't-201', title: 'Recap complet condensateurs CMS Panasonic', isCompleted: true, category: 'soudure', dueDate: '2026-09-14' },
+      { id: 't-202', title: 'Installation CleanAmp 2W & haut-parleur néodyme', isCompleted: true, category: 'soudure', dueDate: '2026-09-16' },
+      { id: 't-203', title: 'Pose kit AMOLED Q5 & capteurs tactiles', isCompleted: true, category: 'soudure', dueDate: '2026-09-18' },
+      { id: 't-204', title: 'Assemblage coque phosphorescente Glow in Dark', isCompleted: true, category: 'assemblage', dueDate: '2026-09-20' },
+      { id: 't-205', title: 'Tests QC & vérification luminescence nuit', isCompleted: true, category: 'test_qc', dueDate: '2026-09-22' },
+    ],
+    parts: [
+      {
+        partId: 'inv-2',
+        partName: 'Game Boy Color CGB-001 (Carte mère)',
+        category: 'console_base',
+        unitCost: 33.0,
+        quantity: 1,
+        totalCost: 33.0,
+      },
+      {
+        partId: 'inv-6',
+        partName: 'Kit Écran AMOLED / IPS Q5 Laminé Logo Rétroéclairé',
+        category: 'screen',
+        unitCost: 49.0,
+        quantity: 1,
+        totalCost: 49.0,
+      },
+      {
+        partId: 'inv-9',
+        partName: 'Coque GBC Glow in the Dark (Fluorescente)',
+        category: 'shell',
+        unitCost: 13.8,
+        quantity: 1,
+        totalCost: 13.8,
+      },
+      {
+        partId: 'inv-13',
+        partName: 'Module Amplificateur Audio CleanAmp Pro + Haut-parleur 2W',
+        category: 'sound_amp',
+        unitCost: 12.5,
+        quantity: 1,
+        totalCost: 12.5,
+      },
+    ],
+    timeSessions: [
+      {
+        id: 'time-201',
+        projectId: 'proj-2',
+        taskType: 'diagnostic_demontage',
+        description: 'Démontage GBC donneuse, recap des condensateurs électrolytiques par des condensateurs neufs CMS Panasonic longue durée.',
+        date: '2026-09-14',
+        durationMinutes: 60,
+        hourlyRate: 25,
+        cost: 25.0,
+      },
+      {
+        id: 'time-202',
+        projectId: 'proj-2',
+        taskType: 'soudure_mods',
+        description: 'Installation CleanAmp 2W, pontage audio sans parasite, soudure du fil de rétroéclairage logo GBC et capteurs tactiles de luminosité.',
+        date: '2026-09-16',
+        durationMinutes: 90,
+        hourlyRate: 25,
+        cost: 37.5,
+      },
+      {
+        id: 'time-203',
+        projectId: 'proj-2',
+        taskType: 'assemblage',
+        description: 'Assemblage minutieux dans la coque luminescente, alignement de l\'écran AMOLED et calibrage de la molette de volume.',
+        date: '2026-09-20',
+        durationMinutes: 45,
+        hourlyRate: 25,
+        cost: 18.75,
+      },
+      {
+        id: 'time-204',
+        projectId: 'proj-2',
+        taskType: 'test_qc',
+        description: 'Banc d\'essai sonore et contraste, vérification de l\'effet phosphorescent dans le noir total.',
+        date: '2026-09-22',
+        durationMinutes: 30,
+        hourlyRate: 25,
+        cost: 12.5,
+      },
+    ],
+    hourlyRateDefault: 25,
+    additionalFees: {
+      consumablesEst: 4.0,
+      packagingCost: 4.0,
+      shippingCost: 6.5,
+      platformFeePercent: 0.0,
+      platformFeeFixed: 0.0,
+      otherFees: 2.0,
+    },
+    salePriceTarget: 179.0,
+    notes: 'Exemplaire exceptionnel ! La coque brille intensément en vert néon dans le noir et le son CleanAmp 2W est bluffant de netteté.',
+    modsList: [
+      'Écran AMOLED / IPS Q5 laminé haute résolution avec logo GAME BOY COLOR rétroéclairé multicolore',
+      'Full Recap : Remplacement de tous les condensateurs par des modèles neufs de haute précision',
+      'Module son CleanAmp Pro + Haut-parleur 2W blindé haute fidélité',
+      'Coque phosphorescente spéciale "Glow in the Dark" ultra luminescente',
+      'Capteurs tactiles invisibles sous la coque pour réglage instantané de la luminosité et des palettes',
+    ],
+    warrantyMonths: 12,
+  },
+
+  // 3. Projet EN COURS DE FABRICATION
+  {
+    id: 'proj-3',
+    title: 'Game Boy Advance - Super Famicom Edition (IPS V5 + CNC Buttons)',
+    serialNumber: 'UWU-GBA-2026-003',
+    consoleModel: 'Game Boy Advance',
+    type: 'client_custom',
+    status: 'in_progress',
+    customerName: 'Thomas L. (Commande sur mesure)',
+    customerContact: 'thomas.mod@email.com',
+    startDate: '2026-09-24',
+    objectives: {
+      targetDeadlineDate: '2026-10-04',
+      targetProfitMin: 70,
+      targetLaborHoursMax: 3.5,
+      targetMarginPercentMin: 35,
+    },
+    tasks: [
+      { id: 't-301', title: 'Désoxydation potentiomètre volume & slot cartouche', isCompleted: true, category: 'diagnostic', dueDate: '2026-09-24' },
+      { id: 't-302', title: 'Soudure kit batterie rechargeable USB-C', isCompleted: true, category: 'soudure', dueDate: '2026-09-25' },
+      { id: 't-303', title: 'Installation écran IPS V5 720x480 & centrage', isCompleted: false, category: 'soudure', dueDate: '2026-09-28' },
+      { id: 't-304', title: 'Montage boutons aluminium CNC Super Famicom', isCompleted: false, category: 'assemblage', dueDate: '2026-09-30' },
+      { id: 't-305', title: 'Tests QC finaux & certification d\'authenticité', isCompleted: false, category: 'test_qc', dueDate: '2026-10-03' },
+    ],
+    parts: [
+      {
+        partId: 'inv-1',
+        partName: 'GBA Carte Mère donneuse révisée',
+        category: 'console_base',
+        unitCost: 37.5,
+        quantity: 1,
+        totalCost: 37.5,
+      },
+      {
+        partId: 'inv-7',
+        partName: 'Kit Écran IPS V5 720x480 Laminé',
+        category: 'screen',
+        unitCost: 45.0,
+        quantity: 1,
+        totalCost: 45.0,
+      },
+      {
+        partId: 'inv-10',
+        partName: 'Set Boutons Métal Aluminium CNC Usiné',
+        category: 'buttons_pads',
+        unitCost: 10.8,
+        quantity: 1,
+        totalCost: 10.8,
+      },
+      {
+        partId: 'inv-11',
+        partName: 'Module Port Charge USB-C Pro',
+        category: 'battery_power',
+        unitCost: 4.5,
+        quantity: 1,
+        totalCost: 4.5,
+      },
+    ],
+    timeSessions: [
+      {
+        id: 'time-301',
+        projectId: 'proj-3',
+        taskType: 'diagnostic_demontage',
+        description: 'Nettoyage carte mère, désoxydation potentiomètre de volume et slot cartouche.',
+        date: '2026-09-24',
+        durationMinutes: 40,
+        hourlyRate: 25,
+        cost: 16.67,
+      },
+      {
+        id: 'time-302',
+        projectId: 'proj-3',
+        taskType: 'soudure_mods',
+        description: 'Soudure du kit batterie rechargeable USB-C et test sous tension stabilisée.',
+        date: '2026-09-25',
+        durationMinutes: 50,
+        hourlyRate: 25,
+        cost: 20.83,
+      },
+    ],
+    hourlyRateDefault: 25,
+    additionalFees: {
+      consumablesEst: 3.5,
+      packagingCost: 4.0,
+      shippingCost: 7.0,
+      platformFeePercent: 0,
+      platformFeeFixed: 0,
+      otherFees: 0,
+    },
+    salePriceTarget: 195.0,
+    notes: 'Commande personnalisée pour client régulier. Thème Super Famicom gris/rouge/bleu/jaune/vert.',
+    modsList: [
+      'Écran IPS V5 HD 720x480 grand angle avec 15 niveaux de brillance',
+      'Boutons métalliques CNC anodisés aux couleurs Super Famicom',
+      'Batterie LiPo interne rechargeable par câble USB-C',
+      'Vitre de protection en verre trempé inrayable',
+    ],
+    warrantyMonths: 12,
+  },
+];
+
+export const INITIAL_MOD_RECIPES: import('../types').ModRecipe[] = [
+  {
+    id: 'mod-1',
+    name: 'Écran IPS V5 Laminé Grand Angle avec Menu OSD',
+    category: 'screen',
+    compatibleModels: ['Game Boy Advance', 'GBA SP', 'Game Boy Color'],
+    description: 'Écran rétroéclairé IPS haute fidélité avec palette de couleurs personnalisable, filtres rétro (scanlines), et réglage de la luminosité via menu OSD à l\'écran.',
+    installationNotes: 'Nécessite la soudure de 3 fils (L, R, Select) sur les points de test de la carte mère pour activer le menu OSD. Utiliser une panne fine.',
+    difficulty: 'medium',
+    estimatedMinutes: 45,
+    suggestedAddedValue: 55,
+    requiredParts: [
+      {
+        partId: 'inv-6',
+        partName: 'Kit Écran IPS V5 720x480 OSD Laminé avec nappe 32/40 pins',
+        category: 'screen',
+        quantity: 1,
+        estimatedCost: 44.5,
+      },
+      {
+        partName: 'Fils de soudure Kynar AWG30 (3 brins)',
+        category: 'consumables',
+        quantity: 1,
+        estimatedCost: 0.5,
+      },
+    ],
+    checklistTasks: [
+      'Vérifier la révision de la carte mère (32 pins vs 40 pins)',
+      'Découper légèrement le contour interne de la coque si non-prédécoupée',
+      'Souder les fils OSD (L, R, Select) sur les points TP2, TP3 et TP9',
+      'Nettoyer le flux de soudure à l\'alcool isopropylique 99.9%',
+      'Tester les 15 niveaux de brillance et les modes de grilles rétro',
+    ],
+    tags: ['Écran', 'IPS', 'OSD', 'Best Seller'],
+    badgeColor: '#06b6d4',
+    isPopular: true,
+  },
+  {
+    id: 'mod-2',
+    name: 'Module Alimentation USB-C & Batterie LiPo 1800mAh',
+    category: 'battery_power',
+    compatibleModels: ['Game Boy Advance', 'Game Boy Color', 'Game Boy DMG'],
+    description: 'Remplacement des piles AA par une batterie Lithium-Polymère rechargeable via port USB-C moderne avec protection contre les surcharges, surchauffes et décharges profondes.',
+    installationNotes: 'Retirer les lamelles de contact piles d\'origine. Insérer le cache trappe pile avec découpe USB-C ajustée au laser.',
+    difficulty: 'easy',
+    estimatedMinutes: 25,
+    suggestedAddedValue: 40,
+    requiredParts: [
+      {
+        partId: 'inv-12',
+        partName: 'Module USB-C CleanJuice & Batterie LiPo 1800mAh',
+        category: 'battery_power',
+        quantity: 1,
+        estimatedCost: 19.5,
+      },
+    ],
+    checklistTasks: [
+      'Retirer délicatement les connecteurs de piles métalliques',
+      'Souder les câbles d\'alimentation +/- sur les pastilles BT+ et BT-',
+      'Tester la charge USB-C (LED rouge = en charge, LED bleue = 100%)',
+      'Ajuster la trappe à piles avec découpe USB-C sans forcer',
+    ],
+    tags: ['Batterie', 'USB-C', 'Confort'],
+    badgeColor: '#10b981',
+    isPopular: true,
+  },
+  {
+    id: 'mod-3',
+    name: 'Amplificateur Audio CleanAmp Pro + HP Néodyme 2W',
+    category: 'audio_sound',
+    compatibleModels: ['Game Boy Advance', 'GBA SP', 'Game Boy Color', 'Game Boy DMG'],
+    description: 'Ampli audio numérique classe D haute efficacité offrant un gain de puissance sonore ×4 avec filtrage anti-souffle et restitution des basses fréquences.',
+    installationNotes: 'Nécessite le remplacement du haut-parleur d\'origine par une membrane néodyme haute fidélité.',
+    difficulty: 'medium',
+    estimatedMinutes: 35,
+    suggestedAddedValue: 30,
+    requiredParts: [
+      {
+        partId: 'inv-13',
+        partName: 'Amplificateur Audio CleanAmp Pro Class D & Filtre Anti-Bruit',
+        category: 'sound_amp',
+        quantity: 1,
+        estimatedCost: 11.5,
+      },
+      {
+        partId: 'inv-14',
+        partName: 'Haut-parleur Neodyme Haute Puissance 2W 8 Ohms',
+        category: 'sound_amp',
+        quantity: 1,
+        estimatedCost: 4.5,
+      },
+    ],
+    checklistTasks: [
+      'Dessouder l\'ancien haut-parleur à membrane papier',
+      'Positionner le module CleanAmp et souder les 4 points audio',
+      'Souder le nouveau haut-parleur néodyme 2W',
+      'Tester le son au volume max et vérifier l\'absence de distorsion',
+      'Vérifier la coupure automatique lors de l\'insertion d\'écouteurs jack',
+    ],
+    tags: ['Audio', 'CleanAmp', 'Basses'],
+    badgeColor: '#ec4899',
+    isPopular: true,
+  },
+  {
+    id: 'mod-4',
+    name: 'Kit Boutons LED RGB Réactifs Multicolores',
+    category: 'buttons_led',
+    compatibleModels: ['Game Boy Advance', 'Game Boy Color', 'GBA SP'],
+    description: 'PCB flexible avec LED RGB CMS sous chaque bouton et touche directionnelle. Modes d\'éclairage animés (respiration, arc-en-ciel, flash à l\'appui) contrôlables par combinaison de touches.',
+    installationNotes: 'Utiliser des boutons et pads en silicone transparents ou translucides pour diffuser la lumière uniformément.',
+    difficulty: 'hard',
+    estimatedMinutes: 50,
+    suggestedAddedValue: 35,
+    requiredParts: [
+      {
+        partName: 'Nappe PCB Flexible LED RGB pour GBA / GBC',
+        category: 'motherboard_electronics',
+        quantity: 1,
+        estimatedCost: 14.0,
+      },
+      {
+        partName: 'Jeu de pads silicone transparents haute réactivité',
+        category: 'buttons_pads',
+        quantity: 1,
+        estimatedCost: 3.5,
+      },
+    ],
+    checklistTasks: [
+      'Placer la nappe flexible sous les contacts boutons de la carte mère',
+      'Souder les points d\'alimentation 3.3V et masse GND',
+      'Souder les points de signaux A, B, D-Pad, Start, Select',
+      'Tester le changement de modes RGB via combinaison A+B+Select',
+    ],
+    tags: ['RGB', 'LED', 'Custom'],
+    badgeColor: '#a855f7',
+    isPopular: false,
+  },
+  {
+    id: 'mod-5',
+    name: 'Full Recap Condensateurs Électrolytiques / Céramique Faible ESR',
+    category: 'motherboard_recap',
+    compatibleModels: ['Sega Game Gear', 'Game Boy DMG', 'Game Boy Pocket', 'Game Boy Color', 'GBA SP'],
+    description: 'Remplacement complet de l\'ensemble des vieux condensateurs électrolytiques dégradés par des condensateurs neufs SMD Tantale / Céramique longue durée. Résout les problèmes de son faible, écran sombre ou extinction inopinée.',
+    installationNotes: 'Essentiel sur 100% des Sega Game Gear et Game Boy Pocket. Nettoyer soigneusement les coulures d\'acide électrolytique avant ressoudage.',
+    difficulty: 'hard',
+    estimatedMinutes: 60,
+    suggestedAddedValue: 45,
+    requiredParts: [
+      {
+        partName: 'Kit Condensateurs SMD Tantale / Céramique Faible ESR',
+        category: 'motherboard_electronics',
+        quantity: 1,
+        estimatedCost: 6.5,
+      },
+    ],
+    checklistTasks: [
+      'Dessouder les condensateurs d\'origine à la pince et à la tresse',
+      'Nettoyer et neutraliser les coulures d\'acide au vinaigre blanc puis IPA',
+      'Étamer proprement les pastilles de cuivre',
+      'Souder les nouveaux condensateurs en respectant scrupuleusement les polarités +/-',
+      'Mesurer les tensions des rails 5V et 34V au multimètre',
+    ],
+    tags: ['Restauration', 'Recap', 'Fiabilité', 'Indispensable'],
+    badgeColor: '#f59e0b',
+    isPopular: true,
+  },
+  {
+    id: 'mod-6',
+    name: 'Coque Sur-Mesure UV Print + Boutons Aluminium CNC Anodisés',
+    category: 'shell_aesthetics',
+    compatibleModels: ['Game Boy Advance', 'GBA SP', 'Game Boy Color', 'Game Boy DMG', 'Nintendo DS Lite'],
+    description: 'Coque ABS haute densité moulée avec impression UV résistante aux rayures et boutons taillés dans la masse en aluminium CNC anodisé pour un toucher premium exceptionnel.',
+    installationNotes: 'Fourni avec vitre en verre trempé inrayable sérigraphiée et visserie neuve tri-wing / cruciforme.',
+    difficulty: 'easy',
+    estimatedMinutes: 30,
+    suggestedAddedValue: 50,
+    requiredParts: [
+      {
+        partId: 'inv-8',
+        partName: 'Coque Complète Transparente "Atomic Purple" Edition Custom',
+        category: 'shell',
+        quantity: 1,
+        estimatedCost: 14.5,
+      },
+      {
+        partId: 'inv-10',
+        partName: 'Jeu de Boutons Métalliques Aluminium CNC Violet Anodisé',
+        category: 'buttons_pads',
+        quantity: 1,
+        estimatedCost: 10.0,
+      },
+      {
+        partId: 'inv-11',
+        partName: 'Vitre de Protection en Verre Trempé Holographique',
+        category: 'screen',
+        quantity: 1,
+        estimatedCost: 3.8,
+      },
+    ],
+    checklistTasks: [
+      'Transférer la carte mère dans la nouvelle coque',
+      'Installer les boutons aluminium avec pads silicone neufs',
+      'Poser la vitre en verre trempé en milieu sans poussière',
+      'Serrer la visserie sans forcer pour ne pas foirer le pas de vis plastique',
+    ],
+    tags: ['Esthétique', 'CNC', 'Premium', 'Verre Trempé'],
+    badgeColor: '#3b82f6',
+    isPopular: true,
+  },
+  {
+    id: 'mod-7',
+    name: 'Pack Ultime Cyberpunk GBA (Écran IPS + USB-C + CleanAmp + Boutons CNC)',
+    category: 'complete_kit',
+    compatibleModels: ['Game Boy Advance'],
+    description: 'Le modding complet le plus demandé : Écran IPS V5 grand angle, Alimentation Batterie USB-C 1800mAh, Amplificateur audio CleanAmp Pro avec HP 2W et Coque Custom UV avec boutons aluminium.',
+    installationNotes: 'Pack tout-en-un offrant le meilleur rapport temps passé / marge nette.',
+    difficulty: 'expert',
+    estimatedMinutes: 110,
+    suggestedAddedValue: 140,
+    requiredParts: [
+      {
+        partId: 'inv-6',
+        partName: 'Kit Écran IPS V5 720x480 OSD Laminé avec nappe',
+        category: 'screen',
+        quantity: 1,
+        estimatedCost: 44.5,
+      },
+      {
+        partId: 'inv-12',
+        partName: 'Module USB-C CleanJuice & Batterie LiPo 1800mAh',
+        category: 'battery_power',
+        quantity: 1,
+        estimatedCost: 19.5,
+      },
+      {
+        partId: 'inv-13',
+        partName: 'Amplificateur Audio CleanAmp Pro Class D',
+        category: 'sound_amp',
+        quantity: 1,
+        estimatedCost: 11.5,
+      },
+      {
+        partId: 'inv-14',
+        partName: 'Haut-parleur Neodyme Haute Puissance 2W',
+        category: 'sound_amp',
+        quantity: 1,
+        estimatedCost: 4.5,
+      },
+      {
+        partId: 'inv-8',
+        partName: 'Coque Complète Transparente Custom',
+        category: 'shell',
+        quantity: 1,
+        estimatedCost: 14.5,
+      },
+      {
+        partId: 'inv-10',
+        partName: 'Jeu de Boutons Métalliques Aluminium CNC',
+        category: 'buttons_pads',
+        quantity: 1,
+        estimatedCost: 10.0,
+      },
+    ],
+    checklistTasks: [
+      'Diagnostic complet et nettoyage désoxydant carte mère',
+      'Installation et soudure du kit écran IPS V5 OSD',
+      'Installation de l\'amplificateur CleanAmp et HP 2W',
+      'Intégration du module batterie USB-C LiPo 1800mAh',
+      'Montage dans la coque custom avec boutons CNC aluminium',
+      'Contrôle qualité 100% : son, charge, brillance, réactivité touches',
+    ],
+    tags: ['All-in-One', 'Ultime', 'Cyberpunk', 'Haut de Gamme'],
+    badgeColor: '#e11d48',
+    isPopular: true,
+  },
+];
+
diff --git a/src/index.css b/src/index.css
new file mode 100644
index 0000000..e7a31e3
--- /dev/null
+++ b/src/index.css
@@ -0,0 +1,327 @@
+@import "tailwindcss";
+
+@layer base {
+  :root,
+  .theme-uwu-pink,
+  [data-theme="uwu-pink"] {
+    --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
+    --font-mono: 'JetBrains Mono', monospace;
+    --font-display: 'Fredoka', cursive, sans-serif;
+
+    /* Theme colors */
+    --app-bg: #090d16;
+    --app-bg-radial: radial-gradient(ellipse 80% 70% at 50% -10%, rgba(236, 72, 153, 0.15), rgba(168, 85, 247, 0.08) 40%, rgba(9, 13, 22, 0) 80%), #090d16;
+    --panel-bg: rgba(15, 23, 42, 0.75);
+    --panel-border: rgba(236, 72, 153, 0.18);
+    --panel-border-hover: rgba(236, 72, 153, 0.45);
+    --panel-hover-shadow: 0 8px 32px 0 rgba(236, 72, 153, 0.15);
+    --sidebar-bg: #0b0f19;
+    --sidebar-border: rgba(255, 255, 255, 0.08);
+    --header-bg: rgba(11, 15, 25, 0.85);
+    --accent-primary: #ec4899;
+    --accent-secondary: #a855f7;
+    --accent-tertiary: #06b6d4;
+    --accent-gradient: linear-gradient(135deg, #ec4899 0%, #a855f7 50%, #ec4899 100%);
+    --glow-color: rgba(236, 72, 153, 0.35);
+    --selection-bg: #ec4899;
+    --selection-text: #ffffff;
+    --text-heading: #fbcfe8;
+    --scrollbar-track: rgba(15, 23, 42, 0.6);
+    --scrollbar-thumb: rgba(236, 72, 153, 0.4);
+    --scrollbar-thumb-hover: rgba(236, 72, 153, 0.8);
+  }
+
+  .theme-cyberpunk,
+  [data-theme="cyberpunk"] {
+    --app-bg: #05060f;
+    --app-bg-radial: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(0, 240, 255, 0.14), rgba(157, 0, 255, 0.1) 40%, rgba(5, 6, 15, 0) 80%), #05060f;
+    --panel-bg: rgba(10, 11, 26, 0.82);
+    --panel-border: rgba(0, 240, 255, 0.22);
+    --panel-border-hover: rgba(0, 240, 255, 0.65);
+    --panel-hover-shadow: 0 8px 32px 0 rgba(0, 240, 255, 0.25);
+    --sidebar-bg: #070814;
+    --sidebar-border: rgba(0, 240, 255, 0.18);
+    --header-bg: rgba(7, 8, 20, 0.9);
+    --accent-primary: #00f0ff;
+    --accent-secondary: #9d00ff;
+    --accent-tertiary: #fcee0a;
+    --accent-gradient: linear-gradient(135deg, #00f0ff 0%, #9d00ff 50%, #ff0055 100%);
+    --glow-color: rgba(0, 240, 255, 0.45);
+    --selection-bg: #00f0ff;
+    --selection-text: #05060f;
+    --text-heading: #00f0ff;
+    --scrollbar-track: rgba(7, 8, 20, 0.7);
+    --scrollbar-thumb: rgba(0, 240, 255, 0.4);
+    --scrollbar-thumb-hover: rgba(0, 240, 255, 0.85);
+  }
+
+  .theme-retro-gameboy,
+  [data-theme="retro-gameboy"] {
+    --app-bg: #0e150e;
+    --app-bg-radial: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(139, 172, 15, 0.14), rgba(48, 98, 48, 0.1) 50%, rgba(14, 21, 14, 0) 80%), #0e150e;
+    --panel-bg: rgba(18, 26, 18, 0.88);
+    --panel-border: rgba(139, 172, 15, 0.25);
+    --panel-border-hover: rgba(155, 188, 15, 0.6);
+    --panel-hover-shadow: 0 8px 32px 0 rgba(139, 172, 15, 0.22);
+    --sidebar-bg: #101810;
+    --sidebar-border: rgba(139, 172, 15, 0.2);
+    --header-bg: rgba(16, 24, 16, 0.92);
+    --accent-primary: #8bac0f;
+    --accent-secondary: #9bbc0f;
+    --accent-tertiary: #9b2242;
+    --accent-gradient: linear-gradient(135deg, #8bac0f 0%, #9bbc0f 50%, #306230 100%);
+    --glow-color: rgba(139, 172, 15, 0.4);
+    --selection-bg: #8bac0f;
+    --selection-text: #0f380f;
+    --text-heading: #9bbc0f;
+    --scrollbar-track: rgba(16, 24, 16, 0.7);
+    --scrollbar-thumb: rgba(139, 172, 15, 0.4);
+    --scrollbar-thumb-hover: rgba(155, 188, 15, 0.85);
+  }
+
+  .theme-modern-dark,
+  [data-theme="modern-dark"] {
+    --app-bg: #08090d;
+    --app-bg-radial: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(56, 189, 248, 0.08), rgba(99, 102, 241, 0.04) 50%, rgba(8, 9, 13, 0) 80%), #08090d;
+    --panel-bg: rgba(15, 18, 26, 0.88);
+    --panel-border: rgba(255, 255, 255, 0.1);
+    --panel-border-hover: rgba(56, 189, 248, 0.45);
+    --panel-hover-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
+    --sidebar-bg: #0d0f17;
+    --sidebar-border: rgba(255, 255, 255, 0.08);
+    --header-bg: rgba(13, 15, 23, 0.94);
+    --accent-primary: #38bdf8;
+    --accent-secondary: #818cf8;
+    --accent-tertiary: #f8fafc;
+    --accent-gradient: linear-gradient(135deg, #38bdf8 0%, #818cf8 50%, #6366f1 100%);
+    --glow-color: rgba(56, 189, 248, 0.3);
+    --selection-bg: #38bdf8;
+    --selection-text: #08090d;
+    --text-heading: #f8fafc;
+    --scrollbar-track: rgba(13, 15, 23, 0.7);
+    --scrollbar-thumb: rgba(148, 163, 184, 0.3);
+    --scrollbar-thumb-hover: rgba(56, 189, 248, 0.7);
+  }
+
+  body {
+    font-family: var(--font-sans);
+    background-color: var(--app-bg);
+    background-image: var(--app-bg-radial);
+    background-attachment: fixed;
+    color: #f1f5f9;
+    min-height: 100vh;
+  }
+}
+
+/* Text selections themed */
+::selection {
+  background-color: var(--selection-bg);
+  color: var(--selection-text);
+}
+
+/* Custom styles and themes */
+.font-display {
+  font-family: 'Fredoka', cursive, sans-serif;
+}
+
+.font-mono {
+  font-family: 'JetBrains Mono', monospace;
+}
+
+/* Custom themed scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--scrollbar-track);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--scrollbar-thumb);
+  border-radius: 9999px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--scrollbar-thumb-hover);
+}
+
+/* Dynamic Glassmorphism helpers using CSS vars */
+.glass-panel {
+  background: var(--panel-bg);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border: 1px solid var(--panel-border);
+}
+
+.glass-panel-hover:hover {
+  border-color: var(--panel-border-hover);
+  box-shadow: var(--panel-hover-shadow);
+}
+
+/* Theme scoped app shell helpers */
+.theme-root-container {
+  background-color: var(--app-bg);
+  background-image: var(--app-bg-radial);
+  background-attachment: fixed;
+}
+
+.theme-sidebar {
+  background-color: var(--sidebar-bg) !important;
+  border-color: var(--sidebar-border) !important;
+}
+
+.theme-header {
+  background-color: var(--header-bg) !important;
+  border-color: var(--sidebar-border) !important;
+}
+
+/* Cyberpunk theme specific enhancements */
+.theme-cyberpunk .bg-slate-950 {
+  background-color: #05060f !important;
+}
+.theme-cyberpunk .border-slate-800,
+.theme-cyberpunk .border-slate-850 {
+  border-color: rgba(0, 240, 255, 0.18) !important;
+}
+.theme-cyberpunk .text-pink-400 {
+  color: #00f0ff !important;
+}
+.theme-cyberpunk .bg-pink-500\/10,
+.theme-cyberpunk .bg-pink-500\/15 {
+  background-color: rgba(0, 240, 255, 0.12) !important;
+}
+.theme-cyberpunk .border-pink-500\/30,
+.theme-cyberpunk .border-pink-500\/40 {
+  border-color: rgba(0, 240, 255, 0.35) !important;
+}
+.theme-cyberpunk .from-pink-500 {
+  --tw-gradient-from: #00f0ff var(--tw-gradient-from-position) !important;
+}
+.theme-cyberpunk .to-purple-600,
+.theme-cyberpunk .to-purple-500 {
+  --tw-gradient-to: #9d00ff var(--tw-gradient-to-position) !important;
+}
+
+/* Retro GameBoy theme specific enhancements */
+.theme-retro-gameboy .bg-slate-950 {
+  background-color: #0e150e !important;
+}
+.theme-retro-gameboy .border-slate-800,
+.theme-retro-gameboy .border-slate-850 {
+  border-color: rgba(139, 172, 15, 0.22) !important;
+}
+.theme-retro-gameboy .text-pink-400,
+.theme-retro-gameboy .text-cyan-400 {
+  color: #9bbc0f !important;
+}
+.theme-retro-gameboy .text-pink-300,
+.theme-retro-gameboy .text-cyan-300 {
+  color: #cadc9f !important;
+}
+.theme-retro-gameboy .bg-pink-500\/10,
+.theme-retro-gameboy .bg-cyan-500\/10 {
+  background-color: rgba(139, 172, 15, 0.15) !important;
+}
+.theme-retro-gameboy .border-pink-500\/30,
+.theme-retro-gameboy .border-cyan-500\/30 {
+  border-color: rgba(139, 172, 15, 0.35) !important;
+}
+.theme-retro-gameboy .from-pink-500,
+.theme-retro-gameboy .from-cyan-500 {
+  --tw-gradient-from: #8bac0f var(--tw-gradient-from-position) !important;
+}
+.theme-retro-gameboy .to-purple-600,
+.theme-retro-gameboy .to-blue-600 {
+  --tw-gradient-to: #306230 var(--tw-gradient-to-position) !important;
+}
+
+/* Modern Dark theme specific enhancements */
+.theme-modern-dark .bg-slate-950 {
+  background-color: #08090d !important;
+}
+.theme-modern-dark .border-slate-800,
+.theme-modern-dark .border-slate-850 {
+  border-color: rgba(255, 255, 255, 0.08) !important;
+}
+.theme-modern-dark .text-pink-400 {
+  color: #38bdf8 !important;
+}
+.theme-modern-dark .bg-pink-500\/10 {
+  background-color: rgba(56, 189, 248, 0.1) !important;
+}
+.theme-modern-dark .border-pink-500\/30 {
+  border-color: rgba(56, 189, 248, 0.3) !important;
+}
+.theme-modern-dark .from-pink-500 {
+  --tw-gradient-from: #38bdf8 var(--tw-gradient-from-position) !important;
+}
+.theme-modern-dark .to-purple-600 {
+  --tw-gradient-to: #6366f1 var(--tw-gradient-to-position) !important;
+}
+
+/* Glow effects */
+.glow-pink {
+  box-shadow: 0 0 25px -5px var(--glow-color);
+}
+
+.glow-cyan {
+  box-shadow: 0 0 25px -5px rgba(6, 182, 212, 0.35);
+}
+
+.glow-purple {
+  box-shadow: 0 0 25px -5px rgba(168, 85, 247, 0.35);
+}
+
+/* Pulse animation for active timer */
+@keyframes pulse-ring {
+  0% {
+    transform: scale(0.95);
+    opacity: 0.8;
+  }
+  50% {
+    transform: scale(1.08);
+    opacity: 0.3;
+  }
+  100% {
+    transform: scale(0.95);
+    opacity: 0.8;
+  }
+}
+
+.animate-pulse-ring {
+  animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+/* Print formatting for build certificate / build sheet */
+@media print {
+  body {
+    background: white !important;
+    color: black !important;
+  }
+  .no-print {
+    display: none !important;
+  }
+  .print-only {
+    display: block !important;
+  }
+  .glass-panel {
+    background: white !important;
+    border: 1px solid #ccc !important;
+    box-shadow: none !important;
+    color: black !important;
+  }
+  .printable-label-sheet {
+    background: white !important;
+    border: none !important;
+    padding: 0 !important;
+    max-height: none !important;
+    overflow: visible !important;
+  }
+  .label-item {
+    page-break-inside: avoid;
+    break-inside: avoid;
+    box-shadow: none !important;
+  }
+}
diff --git a/src/main.tsx b/src/main.tsx
new file mode 100644
index 0000000..bef5202
--- /dev/null
+++ b/src/main.tsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)
diff --git a/src/services/authService.ts b/src/services/authService.ts
new file mode 100644
index 0000000..130103b
--- /dev/null
+++ b/src/services/authService.ts
@@ -0,0 +1,375 @@
+import type { AuthUser, AuthSession, JwtPayload } from '../types';
+import { ncbUsers } from './ncbApi';
+
+const STORAGE_KEY_AUTH = 'uwu_auth_session_v1';
+const JWT_SECRET_SIGNATURE_KEY = 'uwuFinances_jwt_modding_secret_2026';
+
+// Primary registered user credentials in Database (NoCodeBackend)
+export const DEFAULT_ADMIN_USER: AuthUser = {
+  id: 'user_streaper2',
+  name: 'streaper2',
+  email: 'streaper2@uwufinances.studio',
+  role: 'admin',
+  workshopName: 'uwu Custom Studio 🎮',
+  ncbInstance: '54770_uwu_finances',
+  avatarUrl: 'https://api.dicebear.com/7.x/bottts/svg?seed=streaper2',
+  lastLoginAt: new Date().toISOString(),
+};
+
+export const GUEST_UNAUTHENTICATED_SESSION: AuthSession = {
+  user: {
+    id: '',
+    name: '',
+    email: '',
+    role: 'viewer',
+    lastLoginAt: '',
+  },
+  token: '',
+  expiresAt: 0,
+  isAuthenticated: false,
+};
+
+// Helper for Base64 URL Encoding / Decoding
+export function base64UrlEncode(str: string): string {
+  try {
+    const utf8Bytes = new TextEncoder().encode(str);
+    let binary = '';
+    utf8Bytes.forEach((byte) => (binary += String.fromCharCode(byte)));
+    return btoa(binary)
+      .replace(/\+/g, '-')
+      .replace(/\//g, '_')
+      .replace(/=+$/, '');
+  } catch {
+    return btoa(unescape(encodeURIComponent(str)))
+      .replace(/\+/g, '-')
+      .replace(/\//g, '_')
+      .replace(/=+$/, '');
+  }
+}
+
+export function base64UrlDecode(str: string): string {
+  try {
+    let base64 = str.replace(/-/g, '+').replace(/_/g, '/');
+    while (base64.length % 4) {
+      base64 += '=';
+    }
+    const binary = atob(base64);
+    const bytes = new Uint8Array(binary.length);
+    for (let i = 0; i < binary.length; i++) {
+      bytes[i] = binary.charCodeAt(i);
+    }
+    return new TextDecoder().decode(bytes);
+  } catch {
+    return '';
+  }
+}
+
+// Simple deterministic signature mock (for browser client-side JWTs)
+function generateMockSignature(headerB64: string, payloadB64: string, secret: string): string {
+  const data = `${headerB64}.${payloadB64}.${secret}`;
+  let hash = 0;
+  for (let i = 0; i < data.length; i++) {
+    const char = data.charCodeAt(i);
+    hash = ((hash << 5) - hash) + char;
+    hash |= 0;
+  }
+  return base64UrlEncode(`sig_${Math.abs(hash).toString(36)}_${Date.now().toString(36)}`);
+}
+
+/**
+ * Creates a standard RFC 7519 compliant JWT string
+ */
+export function createJwtToken(
+  user: AuthUser,
+  instance: string = '54770_uwu_finances',
+  expiresInHours: number = 720 // Default 30 days
+): { token: string; payload: JwtPayload } {
+  const header = {
+    alg: 'HS256',
+    typ: 'JWT',
+  };
+
+  const now = Math.floor(Date.now() / 1000);
+  const exp = now + expiresInHours * 3600;
+
+  const payload: JwtPayload = {
+    sub: user.id,
+    name: user.name,
+    email: user.email,
+    role: user.role,
+    instance: instance || '54770_uwu_finances',
+    iat: now,
+    exp,
+    iss: 'uwuFinances-ncb-auth',
+  };
+
+  const headerB64 = base64UrlEncode(JSON.stringify(header));
+  const payloadB64 = base64UrlEncode(JSON.stringify(payload));
+  const signatureB64 = generateMockSignature(headerB64, payloadB64, JWT_SECRET_SIGNATURE_KEY);
+
+  const token = `${headerB64}.${payloadB64}.${signatureB64}`;
+
+  return { token, payload };
+}
+
+/**
+ * Decodes and parses a JWT token string
+ */
+export function decodeJwtToken(token: string): {
+  header: Record<string, unknown> | null;
+  payload: JwtPayload | null;
+  isValid: boolean;
+  isExpired: boolean;
+  timeLeftFormatted: string;
+} {
+  if (!token || typeof token !== 'string') {
+    return { header: null, payload: null, isValid: false, isExpired: true, timeLeftFormatted: 'Invalide' };
+  }
+
+  const parts = token.trim().split('.');
+  if (parts.length < 2) {
+    return { header: null, payload: null, isValid: false, isExpired: true, timeLeftFormatted: 'Format invalide' };
+  }
+
+  try {
+    const headerJson = base64UrlDecode(parts[0]);
+    const payloadJson = base64UrlDecode(parts[1]);
+
+    const header = JSON.parse(headerJson);
+    const payload = JSON.parse(payloadJson) as JwtPayload;
+
+    const now = Math.floor(Date.now() / 1000);
+    const isExpired = payload.exp ? payload.exp < now : false;
+
+    let timeLeftFormatted = 'Jamais';
+    if (payload.exp) {
+      const diffSec = payload.exp - now;
+      if (diffSec <= 0) {
+        timeLeftFormatted = 'Expiré';
+      } else if (diffSec < 3600) {
+        timeLeftFormatted = `${Math.floor(diffSec / 60)} min restantes`;
+      } else if (diffSec < 86400) {
+        timeLeftFormatted = `${Math.floor(diffSec / 3600)}h restantes`;
+      } else {
+        timeLeftFormatted = `${Math.floor(diffSec / 86400)} jours restants`;
+      }
+    }
+
+    return {
+      header,
+      payload,
+      isValid: true,
+      isExpired,
+      timeLeftFormatted,
+    };
+  } catch {
+    return { header: null, payload: null, isValid: false, isExpired: true, timeLeftFormatted: 'Erreur décodage' };
+  }
+}
+
+/**
+ * Authenticates against NoCodeBackend Database (`users` table)
+ * Expected credentials: username: streaper2, password: Kency1313 (or updated password)
+ */
+export async function authenticateWithDatabase(
+  usernameInput: string,
+  passwordInput: string
+): Promise<{ success: boolean; user?: AuthUser; error?: string }> {
+  const cleanUsername = usernameInput.trim();
+  const cleanPassword = passwordInput.trim();
+
+  if (!cleanUsername || !cleanPassword) {
+    return { success: false, error: 'Veuillez saisir votre nom d\'utilisateur et mot de passe.' };
+  }
+
+  try {
+    // 1. Check in NoCodeBackend database table 'users'
+    const dbUsers = await ncbUsers.getAll();
+    const matchedUser = dbUsers.find(
+      (u) =>
+        String(u.username || '').toLowerCase() === cleanUsername.toLowerCase() &&
+        String(u.password || '') === cleanPassword
+    );
+
+    if (matchedUser) {
+      const user: AuthUser = {
+        id: String(matchedUser.id || 'user_streaper2'),
+        name: String(matchedUser.username || cleanUsername),
+        email: String(matchedUser.email || `${cleanUsername}@uwufinances.studio`),
+        role: (matchedUser.role as any) || 'admin',
+        workshopName: 'uwu Custom Studio 🎮',
+        ncbInstance: '54770_uwu_finances',
+        avatarUrl: String(matchedUser.avatar_url || `https://api.dicebear.com/7.x/bottts/svg?seed=${cleanUsername}`),
+        lastLoginAt: new Date().toISOString(),
+      };
+      return { success: true, user };
+    }
+  } catch (err) {
+    console.warn('NCB users query failed, checking cached/fallback credentials', err);
+  }
+
+  // 2. Direct secure fallback verification for initial streaper2 / Kency1313
+  if (cleanUsername === 'streaper2' && cleanPassword === 'Kency1313') {
+    return {
+      success: true,
+      user: {
+        ...DEFAULT_ADMIN_USER,
+        lastLoginAt: new Date().toISOString(),
+      },
+    };
+  }
+
+  return {
+    success: false,
+    error: 'Identifiant ou mot de passe incorrect. Vérifiez vos accès.',
+  };
+}
+
+/**
+ * Changes user password in NoCodeBackend Database (`users` table)
+ */
+export async function changeUserPassword(
+  username: string,
+  oldPasswordInput: string,
+  newPasswordInput: string
+): Promise<{ success: boolean; message?: string; error?: string }> {
+  const cleanUsername = username.trim();
+  const cleanOldPassword = oldPasswordInput.trim();
+  const cleanNewPassword = newPasswordInput.trim();
+
+  if (!cleanOldPassword || !cleanNewPassword) {
+    return { success: false, error: 'Tous les champs de mot de passe sont requis.' };
+  }
+
+  if (cleanNewPassword.length < 4) {
+    return { success: false, error: 'Le nouveau mot de passe doit contenir au minimum 4 caractères.' };
+  }
+
+  try {
+    const dbUsers = await ncbUsers.getAll();
+    const matchedUser = dbUsers.find(
+      (u) =>
+        String(u.username || '').toLowerCase() === cleanUsername.toLowerCase() &&
+        String(u.password || '') === cleanOldPassword
+    );
+
+    if (!matchedUser) {
+      // Check fallback password for streaper2
+      if (cleanUsername === 'streaper2' && cleanOldPassword === 'Kency1313') {
+        // Try creating / updating in DB
+        try {
+          await ncbUsers.create({
+            id: 'user_streaper2',
+            username: 'streaper2',
+            password: cleanNewPassword,
+            email: 'streaper2@uwufinances.studio',
+            role: 'admin',
+            avatar_url: 'https://api.dicebear.com/7.x/bottts/svg?seed=streaper2',
+          });
+        } catch {
+          await ncbUsers.update('user_streaper2', { password: cleanNewPassword });
+        }
+        return { success: true, message: 'Mot de passe mis à jour avec succès en base de données !' };
+      }
+      return { success: false, error: 'L\'ancien mot de passe saisi est incorrect.' };
+    }
+
+    // Update in DB
+    await ncbUsers.update(String(matchedUser.id), { password: cleanNewPassword });
+    return { success: true, message: 'Votre mot de passe a été modifié et synchronisé sur NoCodeBackend !' };
+  } catch (err: any) {
+    return { success: false, error: `Erreur lors de la mise à jour en BDD: ${err.message || 'Échec réseau'}` };
+  }
+}
+
+/**
+ * Session persistence helpers
+ * Returns GUEST_UNAUTHENTICATED_SESSION if not logged in or session is expired.
+ * WILL NOT automatically auto-login on refresh if user logged out!
+ */
+export function getSavedAuthSession(): AuthSession {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY_AUTH);
+    if (raw) {
+      const parsed: AuthSession = JSON.parse(raw);
+      if (parsed && parsed.isAuthenticated && parsed.token) {
+        const decoded = decodeJwtToken(parsed.token);
+        if (decoded.isValid && !decoded.isExpired) {
+          return parsed;
+        }
+      }
+    }
+  } catch {
+    // Ignore error
+  }
+
+  // Not logged in by default
+  return GUEST_UNAUTHENTICATED_SESSION;
+}
+
+export function saveAuthSession(session: AuthSession): void {
+  try {
+    localStorage.setItem(STORAGE_KEY_AUTH, JSON.stringify(session));
+  } catch (err) {
+    console.warn('Failed to persist auth session to localStorage', err);
+  }
+}
+
+export function clearAuthSession(): void {
+  try {
+    localStorage.removeItem(STORAGE_KEY_AUTH);
+  } catch (err) {
+    console.warn('Failed to clear auth session', err);
+  }
+}
+
+/**
+ * Test connectivity with NoCodeBackend instance
+ */
+export async function testNcbConnection(
+  instance: string = '54770_uwu_finances',
+  customKey?: string
+): Promise<{ success: boolean; latencyMs: number; message: string }> {
+  const start = performance.now();
+  try {
+    const endpoint = import.meta.env.DEV
+      ? `/api/ncb/read/categories?limit=1&Instance=${encodeURIComponent(instance)}`
+      : `https://eu-api.nocodebackend.com/read/categories?limit=1&Instance=${encodeURIComponent(instance)}`;
+
+    const headers: Record<string, string> = {
+      'Content-Type': 'application/json',
+    };
+
+    if (customKey) {
+      headers['Authorization'] = `Bearer ${customKey}`;
+    }
+
+    const res = await fetch(endpoint, {
+      method: 'GET',
+      headers,
+    });
+
+    const latencyMs = Math.round(performance.now() - start);
+
+    if (res.ok) {
+      return {
+        success: true,
+        latencyMs,
+        message: `Connecté avec succès à NoCodeBackend (Instance ${instance}) en ${latencyMs}ms.`,
+      };
+    } else {
+      return {
+        success: false,
+        latencyMs,
+        message: `Erreur API NCB [${res.status}]: ${res.statusText}`,
+      };
+    }
+  } catch (err: any) {
+    const latencyMs = Math.round(performance.now() - start);
+    return {
+      success: false,
+      latencyMs,
+      message: `Impossible de joindre le serveur NoCodeBackend: ${err.message || 'Erreur réseau'}`,
+    };
+  }
+}
diff --git a/src/services/ncbApi.ts b/src/services/ncbApi.ts
new file mode 100644
index 0000000..3a2d35d
--- /dev/null
+++ b/src/services/ncbApi.ts
@@ -0,0 +1,188 @@
+/**
+ * NCB (NoCodeBackend) API Service
+ * Database: 54770_uwu_finances (EU Region)
+ *
+ * All calls go through /api/ncb proxy (defined in vite.config.ts)
+ * which injects the Authorization header server-side.
+ */
+
+const NCB_INSTANCE = (import.meta.env.VITE_NCB_INSTANCE as string) || '54770_uwu_finances';
+
+// Base URL — proxied through Vite dev server in dev, direct in prod
+const BASE = import.meta.env.DEV
+  ? '/api/ncb'
+  : (import.meta.env.VITE_NCB_DATA_API_URL as string || 'https://eu-api.nocodebackend.com');
+
+type HttpMethod = 'GET' | 'POST' | 'PUT' | 'DELETE';
+
+interface NCBRequestOptions {
+  method?: HttpMethod;
+  body?: Record<string, unknown>;
+  params?: Record<string, string | number>;
+}
+
+export async function ncbRequest<T>(
+  path: string,
+  options: NCBRequestOptions = {}
+): Promise<T> {
+  const { method = 'GET', body, params } = options;
+
+  // Build full URL
+  const baseOrigin = typeof window !== 'undefined' ? window.location.origin : 'http://localhost:5173';
+  const url = new URL(path.startsWith('http') ? path : `${BASE}/${path.replace(/^\//, '')}`, baseOrigin);
+  url.searchParams.set('Instance', NCB_INSTANCE);
+
+  if (params) {
+    Object.entries(params).forEach(([k, v]) => {
+      if (v !== undefined && v !== null) {
+        url.searchParams.set(k, String(v));
+      }
+    });
+  }
+
+  const headers: Record<string, string> = {
+    'Content-Type': 'application/json',
+  };
+
+  // Attach session JWT token if user is authenticated
+  try {
+    const rawSession = localStorage.getItem('uwu_auth_session_v1');
+    if (rawSession) {
+      const parsed = JSON.parse(rawSession);
+      if (parsed?.token) {
+        headers['X-JWT-Token'] = parsed.token;
+      }
+    }
+  } catch {
+    // Ignore localStorage parse errors
+  }
+
+  // In production, inject secret key directly
+  if (!import.meta.env.DEV) {
+    const secretKey = import.meta.env.VITE_NCB_SECRET_KEY;
+    if (secretKey) {
+      headers['Authorization'] = `Bearer ${secretKey}`;
+    }
+    headers['X-Database-Instance'] = NCB_INSTANCE;
+  }
+
+  const res = await fetch(url.toString(), {
+    method,
+    headers,
+    body: body ? JSON.stringify(body) : undefined,
+  });
+
+  if (!res.ok) {
+    const errText = await res.text();
+    throw new Error(`NCB API Error [${res.status}] on ${path}: ${errText}`);
+  }
+
+  return res.json() as Promise<T>;
+}
+
+// ─────────────────────────────────────────────
+// Generic CRUD helpers
+// ─────────────────────────────────────────────
+
+export async function ncbGetAll<T>(table: string, extra?: Record<string, string | number>): Promise<T[]> {
+  const params: Record<string, string | number> = { limit: 500, ...(extra || {}) };
+  const data = await ncbRequest<{ data?: T[]; status?: string }>(`read/${table}`, { params });
+  return data.data ?? [];
+}
+
+export async function ncbGetOne<T>(table: string, id: string): Promise<T | null> {
+  try {
+    const data = await ncbRequest<{ data?: T; status?: string }>(`read/${table}/${id}`);
+    return data.data ?? null;
+  } catch {
+    return null;
+  }
+}
+
+export async function ncbCreate<T extends Record<string, unknown>>(table: string, record: T): Promise<T> {
+  await ncbRequest(`create/${table}`, { method: 'POST', body: record });
+  return record;
+}
+
+export async function ncbUpdate<T extends Record<string, unknown>>(table: string, id: string, updates: Partial<T>): Promise<void> {
+  await ncbRequest(`update/${table}/${id}`, { method: 'PUT', body: updates as Record<string, unknown> });
+}
+
+export async function ncbDelete(table: string, id: string): Promise<void> {
+  await ncbRequest(`delete/${table}/${id}`, { method: 'DELETE' });
+}
+
+// ─────────────────────────────────────────────
+// Typed helpers per entity
+// ─────────────────────────────────────────────
+
+export const ncbInventory = {
+  getAll: () => ncbGetAll<Record<string, unknown>>('inventory_items'),
+  create: (data: Record<string, unknown>) => ncbCreate('inventory_items', data),
+  update: (id: string, data: Partial<Record<string, unknown>>) => ncbUpdate('inventory_items', id, data),
+  delete: (id: string) => ncbDelete('inventory_items', id),
+};
+
+export const ncbProjects = {
+  getAll: () => ncbGetAll<Record<string, unknown>>('projects'),
+  create: (data: Record<string, unknown>) => ncbCreate('projects', data),
+  update: (id: string, data: Partial<Record<string, unknown>>) => ncbUpdate('projects', id, data),
+  delete: (id: string) => ncbDelete('projects', id),
+};
+
+export const ncbProjectParts = {
+  getAll: (projectId?: string) =>
+    ncbGetAll<Record<string, unknown>>('project_parts', projectId ? { project_id: projectId } : {}),
+  create: (data: Record<string, unknown>) => ncbCreate('project_parts', data),
+  update: (id: string, data: Partial<Record<string, unknown>>) => ncbUpdate('project_parts', id, data),
+  delete: (id: string) => ncbDelete('project_parts', id),
+};
+
+export const ncbProjectTasks = {
+  getAll: (projectId?: string) =>
+    ncbGetAll<Record<string, unknown>>('project_tasks', projectId ? { project_id: projectId } : {}),
+  create: (data: Record<string, unknown>) => ncbCreate('project_tasks', data),
+  update: (id: string, data: Partial<Record<string, unknown>>) => ncbUpdate('project_tasks', id, data),
+  delete: (id: string) => ncbDelete('project_tasks', id),
+};
+
+export const ncbTimeSessions = {
+  getAll: (projectId?: string) =>
+    ncbGetAll<Record<string, unknown>>('time_sessions', projectId ? { project_id: projectId } : {}),
+  create: (data: Record<string, unknown>) => ncbCreate('time_sessions', data),
+  update: (id: string, data: Partial<Record<string, unknown>>) => ncbUpdate('time_sessions', id, data),
+  delete: (id: string) => ncbDelete('time_sessions', id),
+};
+
+export const ncbModsLibrary = {
+  getAll: () => ncbGetAll<Record<string, unknown>>('mods_library'),
+  create: (data: Record<string, unknown>) => ncbCreate('mods_library', data),
+  update: (id: string, data: Partial<Record<string, unknown>>) => ncbUpdate('mods_library', id, data),
+  delete: (id: string) => ncbDelete('mods_library', id),
+};
+
+export const ncbSettings = {
+  get: () => ncbGetAll<Record<string, unknown>>('app_settings'),
+  upsert: async (id: string, data: Record<string, unknown>) => {
+    try {
+      await ncbUpdate('app_settings', id, data);
+    } catch {
+      await ncbCreate('app_settings', { id, ...data });
+    }
+  },
+};
+
+export const ncbCategories = {
+  getAll: () => ncbGetAll<Record<string, unknown>>('categories'),
+  create: (data: Record<string, unknown>) => ncbCreate('categories', data),
+  update: (id: string, data: Partial<Record<string, unknown>>) => ncbUpdate('categories', id, data),
+  delete: (id: string) => ncbDelete('categories', id),
+};
+
+export const ncbUsers = {
+  getAll: () => ncbGetAll<Record<string, unknown>>('users'),
+  getOne: (id: string) => ncbGetOne<Record<string, unknown>>('users', id),
+  create: (data: Record<string, unknown>) => ncbCreate('users', data),
+  update: (id: string, data: Partial<Record<string, unknown>>) => ncbUpdate('users', id, data),
+};
+
diff --git a/src/services/ncbSync.ts b/src/services/ncbSync.ts
new file mode 100644
index 0000000..54790c3
--- /dev/null
+++ b/src/services/ncbSync.ts
@@ -0,0 +1,592 @@
+/**
+ * NCB Sync Service
+ * Handles bidirectional sync between the app state and NoCodeBackend database (54770_uwu_finances).
+ *
+ * Strategy:
+ * - On load: fetch all data from NCB, merge with localStorage (NCB authoritative if data present)
+ * - If NCB is fresh/empty: automatically seed NCB from local/initial data
+ * - On mutations: asynchronously write to NCB immediately (optimistic update in React state)
+ * - On error: fall back to localStorage gracefully
+ */
+
+import type {
+  InventoryItem,
+  Project,
+  ProjectPart,
+  ProjectTask,
+  TimeSession,
+  ModRecipe,
+  AppSettings,
+  AppCategory,
+} from '../types';
+
+import {
+  ncbInventory,
+  ncbProjects,
+  ncbProjectParts,
+  ncbProjectTasks,
+  ncbTimeSessions,
+  ncbModsLibrary,
+  ncbSettings,
+  ncbCategories,
+} from './ncbApi';
+
+// ─────────────────────────────────────────────
+// Mapping helpers: DB snake_case ↔ App camelCase
+// ─────────────────────────────────────────────
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type AnyRecord = Record<string, any>;
+
+function safeJsonParse<T>(jsonStr: unknown, fallback: T): T {
+  if (typeof jsonStr !== 'string') return fallback;
+  try {
+    return JSON.parse(jsonStr) as T;
+  } catch {
+    return fallback;
+  }
+}
+
+export function toInventoryItem(row: AnyRecord): InventoryItem {
+  return {
+    id: String(row.id),
+    sku: String(row.sku || ''),
+    name: String(row.name || ''),
+    category: row.category,
+    consoleModel: row.console_model,
+    supplier: String(row.supplier || ''),
+    orderDate: String(row.order_date || ''),
+    status: row.status || 'in_stock',
+    unitPurchasePrice: parseFloat(row.unit_purchase_price) || 0,
+    shippingCostShare: parseFloat(row.shipping_cost_share) || 0,
+    taxImportShare: parseFloat(row.tax_import_share) || 0,
+    unitCostWithFees: parseFloat(row.unit_cost_with_fees) || 0,
+    quantityInStock: parseInt(row.quantity_in_stock, 10) || 0,
+    quantityReserved: parseInt(row.quantity_reserved, 10) || 0,
+    minStockAlert: parseInt(row.min_stock_alert, 10) || 1,
+    notes: row.notes || undefined,
+    imageUrl: row.image_url || undefined,
+    locationInWorkshop: row.location_in_workshop || undefined,
+    linkedProjectId: row.linked_project_id || undefined,
+    linkedProjectTitle: row.linked_project_title || undefined,
+  };
+}
+
+export function fromInventoryItem(item: InventoryItem): AnyRecord {
+  return {
+    id: item.id,
+    sku: item.sku || '',
+    name: item.name || '',
+    category: item.category || 'other',
+    console_model: item.consoleModel || 'Autre / Custom',
+    supplier: item.supplier || '',
+    order_date: item.orderDate || '',
+    status: item.status || 'in_stock',
+    unit_purchase_price: item.unitPurchasePrice || 0,
+    shipping_cost_share: item.shippingCostShare || 0,
+    tax_import_share: item.taxImportShare || 0,
+    unit_cost_with_fees: item.unitCostWithFees || 0,
+    quantity_in_stock: item.quantityInStock || 0,
+    quantity_reserved: item.quantityReserved || 0,
+    min_stock_alert: item.minStockAlert || 1,
+    notes: item.notes || null,
+    image_url: item.imageUrl || null,
+    location_in_workshop: item.locationInWorkshop || null,
+    linked_project_id: item.linkedProjectId || null,
+    linked_project_title: item.linkedProjectTitle || null,
+  };
+}
+
+export function toProject(
+  row: AnyRecord,
+  parts: ProjectPart[] = [],
+  tasks: ProjectTask[] = [],
+  timeSessions: TimeSession[] = []
+): Project {
+  return {
+    id: String(row.id),
+    title: String(row.title || ''),
+    serialNumber: String(row.serial_number || ''),
+    consoleModel: row.console_model || 'Game Boy Advance',
+    type: row.type || 'showcase_sale',
+    status: row.status || 'draft',
+    customerName: row.customer_name || undefined,
+    customerContact: row.customer_contact || undefined,
+    startDate: row.start_date || '',
+    completedDate: row.completed_date || undefined,
+    soldDate: row.sold_date || undefined,
+    salePriceTarget: parseFloat(row.sale_price_target) || 0,
+    salePriceActual: row.sale_price_actual !== null && row.sale_price_actual !== undefined
+      ? parseFloat(row.sale_price_actual)
+      : undefined,
+    salesChannel: row.sales_channel || undefined,
+    hourlyRateDefault: parseFloat(row.hourly_rate_default) || 25,
+    modsList: safeJsonParse<string[]>(row.mods_list, []),
+    objectives: row.objectives ? safeJsonParse(row.objectives, undefined) : undefined,
+    additionalFees: row.additional_fees ? safeJsonParse(row.additional_fees, {
+      consumablesEst: 0,
+      packagingCost: 0,
+      shippingCost: 0,
+      platformFeePercent: 0,
+      platformFeeFixed: 0,
+      otherFees: 0,
+    }) : {
+      consumablesEst: 3,
+      packagingCost: 2,
+      shippingCost: 0,
+      platformFeePercent: 5,
+      platformFeeFixed: 0,
+      otherFees: 0,
+    },
+    notes: row.notes || '',
+    photoUrl: row.image_url || undefined,
+    warrantyMonths: row.warranty_months ? parseInt(row.warranty_months, 10) : undefined,
+    parts,
+    tasks,
+    timeSessions,
+  };
+}
+
+export function fromProject(project: Project): AnyRecord {
+  return {
+    id: project.id,
+    title: project.title,
+    serial_number: project.serialNumber || '',
+    console_model: project.consoleModel,
+    type: project.type,
+    status: project.status,
+    customer_name: project.customerName || null,
+    customer_contact: project.customerContact || null,
+    start_date: project.startDate || '',
+    completed_date: project.completedDate || null,
+    sold_date: project.soldDate || null,
+    sale_price_target: project.salePriceTarget || 0,
+    sale_price_actual: project.salePriceActual ?? null,
+    sales_channel: project.salesChannel || null,
+    hourly_rate_default: project.hourlyRateDefault || 25,
+    mods_list: JSON.stringify(project.modsList || []),
+    objectives: project.objectives ? JSON.stringify(project.objectives) : null,
+    additional_fees: project.additionalFees ? JSON.stringify(project.additionalFees) : null,
+    notes: project.notes || null,
+    image_url: project.photoUrl || null,
+    warranty_months: project.warrantyMonths || 0,
+  };
+}
+
+export function toProjectPart(row: AnyRecord): ProjectPart {
+  return {
+    partId: row.part_id || '',
+    partName: row.part_name || '',
+    category: row.category || 'other',
+    unitCost: parseFloat(row.unit_cost) || 0,
+    quantity: parseInt(row.quantity, 10) || 1,
+    totalCost: parseFloat(row.total_cost) || 0,
+    status: row.status || 'allocated',
+    supplier: row.supplier || undefined,
+    expectedDeliveryDate: row.expected_delivery_date || undefined,
+    purchaseUrl: row.purchase_url || undefined,
+    notes: row.notes || undefined,
+  };
+}
+
+export function toProjectTask(row: AnyRecord): ProjectTask {
+  return {
+    id: String(row.id),
+    title: String(row.title || ''),
+    isCompleted: Boolean(row.is_completed),
+    dueDate: row.due_date || undefined,
+    estimatedMinutes: row.estimated_minutes ? parseInt(row.estimated_minutes, 10) : undefined,
+    category: row.category || undefined,
+  };
+}
+
+export function toTimeSession(row: AnyRecord): TimeSession {
+  return {
+    id: String(row.id),
+    projectId: String(row.project_id),
+    taskType: row.task_type || 'soudure_mods',
+    description: String(row.description || ''),
+    date: String(row.session_date || ''),
+    durationMinutes: parseInt(row.duration_minutes, 10) || 0,
+    hourlyRate: parseFloat(row.hourly_rate) || 25,
+    cost: parseFloat(row.cost) || 0,
+  };
+}
+
+export function toModRecipe(row: AnyRecord): ModRecipe {
+  return {
+    id: String(row.id),
+    name: String(row.name || ''),
+    category: row.category || 'other',
+    compatibleModels: safeJsonParse(row.compatible_models, []),
+    description: String(row.description || ''),
+    installationNotes: row.installation_notes || undefined,
+    difficulty: row.difficulty || 'medium',
+    estimatedMinutes: parseInt(row.estimated_minutes, 10) || 60,
+    suggestedAddedValue: parseFloat(row.suggested_added_value) || 0,
+    requiredParts: safeJsonParse(row.required_parts, []),
+    checklistTasks: safeJsonParse(row.checklist_tasks, []),
+    tags: row.tags ? safeJsonParse(row.tags, undefined) : undefined,
+    badgeColor: row.badge_color || undefined,
+    isPopular: Boolean(row.is_popular),
+  };
+}
+
+export function fromModRecipe(mod: ModRecipe): AnyRecord {
+  return {
+    id: mod.id,
+    name: mod.name,
+    category: mod.category,
+    compatible_models: JSON.stringify(mod.compatibleModels || []),
+    description: mod.description || '',
+    installation_notes: mod.installationNotes || null,
+    difficulty: mod.difficulty,
+    estimated_minutes: mod.estimatedMinutes || 60,
+    suggested_added_value: mod.suggestedAddedValue || 0,
+    required_parts: JSON.stringify(mod.requiredParts || []),
+    checklist_tasks: JSON.stringify(mod.checklistTasks || []),
+    tags: mod.tags ? JSON.stringify(mod.tags) : null,
+    badge_color: mod.badgeColor || null,
+    is_popular: mod.isPopular ? 1 : 0,
+  };
+}
+
+export function toAppSettings(row: AnyRecord): AppSettings {
+  return {
+    currency: row.currency || '€',
+    defaultHourlyRate: parseFloat(row.default_hourly_rate) || 25,
+    defaultPlatformFeePercent: parseFloat(row.default_platform_fee_percent) || 5,
+    theme: row.theme || 'uwu-pink',
+    businessName: row.business_name || 'uwu Custom Studio 🎮',
+    workshopLocation: row.workshop_location || 'Atelier Console Modding - Lyon',
+    logoText: row.logo_text || 'uwuFinances',
+  };
+}
+
+export function fromAppSettings(s: AppSettings): AnyRecord {
+  return {
+    id: 'default',
+    currency: s.currency,
+    default_hourly_rate: s.defaultHourlyRate,
+    default_platform_fee_percent: s.defaultPlatformFeePercent,
+    theme: s.theme,
+    business_name: s.businessName,
+    workshop_location: s.workshopLocation,
+    logo_text: s.logoText,
+  };
+}
+
+export function toAppCategory(row: AnyRecord): AppCategory {
+  return {
+    id: String(row.id),
+    name: String(row.name || ''),
+    slug: String(row.slug || ''),
+    type: (row.type as any) || 'part_category',
+    color: row.color || undefined,
+    badgeColor: row.badge_color || undefined,
+    icon: row.icon || undefined,
+    description: row.description || undefined,
+    sortOrder: parseInt(row.sort_order, 10) || 0,
+    isActive: row.is_active !== 0 && row.is_active !== false,
+  };
+}
+
+export function fromAppCategory(c: AppCategory): AnyRecord {
+  return {
+    id: c.id,
+    name: c.name,
+    slug: c.slug,
+    type: c.type,
+    color: c.color || null,
+    badge_color: c.badgeColor || null,
+    icon: c.icon || null,
+    description: c.description || null,
+    sort_order: c.sortOrder || 0,
+    is_active: c.isActive ? 1 : 0,
+  };
+}
+
+// ─────────────────────────────────────────────
+// Sync Controller
+// ─────────────────────────────────────────────
+
+let syncEnabled = true;
+
+export function enableSync() {
+  syncEnabled = true;
+}
+
+export function disableSync() {
+  syncEnabled = false;
+}
+
+/** Load all data from NCB — call on app init */
+export async function loadAllFromNCB(): Promise<{
+  inventory: InventoryItem[];
+  projects: Project[];
+  modsLibrary: ModRecipe[];
+  settings: AppSettings | null;
+  categories: AppCategory[];
+  hasData: boolean;
+}> {
+  try {
+    const [invRows, projRows, partRows, taskRows, sessionRows, modsRows, settingsRows, catRows] = await Promise.all([
+      ncbInventory.getAll(),
+      ncbProjects.getAll(),
+      ncbProjectParts.getAll(),
+      ncbProjectTasks.getAll(),
+      ncbTimeSessions.getAll(),
+      ncbModsLibrary.getAll(),
+      ncbSettings.get(),
+      ncbCategories.getAll(),
+    ]);
+
+    const inventory = invRows.map(toInventoryItem);
+
+    const projects = projRows.map((pRow) => {
+      const pid = String(pRow.id);
+      const parts = partRows.filter((r) => String(r.project_id) === pid).map(toProjectPart);
+      const tasks = taskRows.filter((r) => String(r.project_id) === pid).map(toProjectTask);
+      const sessions = sessionRows.filter((r) => String(r.project_id) === pid).map(toTimeSession);
+      return toProject(pRow, parts, tasks, sessions);
+    });
+
+    const modsLibrary = modsRows.map(toModRecipe);
+
+    const categories = catRows.map(toAppCategory);
+
+    let settings: AppSettings | null = null;
+    if (settingsRows.length > 0) {
+      settings = toAppSettings(settingsRows[0]);
+    }
+
+    const hasData = inventory.length > 0 || projects.length > 0 || modsLibrary.length > 0 || categories.length > 0;
+
+    return { inventory, projects, modsLibrary, settings, categories, hasData };
+  } catch (err) {
+    console.warn('[NCB] Failed to load data from NCB, using local fallback:', err);
+    return { inventory: [], projects: [], modsLibrary: [], settings: null, categories: [], hasData: false };
+  }
+}
+
+/** Seed NCB database with initial or local data if database is empty */
+export async function seedNCBWithInitialData(
+  inventory: InventoryItem[],
+  projects: Project[],
+  modsLibrary: ModRecipe[],
+  settings: AppSettings,
+  categories: AppCategory[] = []
+): Promise<void> {
+  try {
+    console.log('[NCB] Seeding database with initial data...');
+
+    // 1. Settings
+    await ncbSettings.upsert('default', fromAppSettings(settings));
+
+    // 2. Categories
+    for (const cat of categories) {
+      await ncbCategories.create(fromAppCategory(cat));
+    }
+
+    // 3. Inventory
+    for (const item of inventory) {
+      await ncbInventory.create(fromInventoryItem(item));
+    }
+
+    // 4. Mods Library
+    for (const mod of modsLibrary) {
+      await ncbModsLibrary.create(fromModRecipe(mod));
+    }
+
+    // 5. Projects (including parts, tasks, sessions)
+    for (const proj of projects) {
+      await ncbProjects.create(fromProject(proj));
+      for (let i = 0; i < proj.parts.length; i++) {
+        const p = proj.parts[i];
+        await ncbProjectParts.create({
+          id: `${proj.id}-part-${i}-${Date.now()}`,
+          project_id: proj.id,
+          part_id: p.partId || null,
+          part_name: p.partName,
+          category: p.category,
+          unit_cost: p.unitCost,
+          quantity: p.quantity,
+          total_cost: p.totalCost,
+          status: p.status || 'allocated',
+          supplier: p.supplier || null,
+          purchase_url: p.purchaseUrl || null,
+          notes: p.notes || null,
+          sort_order: i,
+        });
+      }
+      for (let i = 0; i < (proj.tasks || []).length; i++) {
+        const t = proj.tasks![i];
+        await ncbProjectTasks.create({
+          id: t.id || `${proj.id}-task-${i}`,
+          project_id: proj.id,
+          title: t.title,
+          is_completed: t.isCompleted ? 1 : 0,
+          due_date: t.dueDate || null,
+          estimated_minutes: t.estimatedMinutes || null,
+          category: t.category || null,
+          sort_order: i,
+        });
+      }
+      for (const s of proj.timeSessions || []) {
+        await ncbTimeSessions.create({
+          id: s.id,
+          project_id: proj.id,
+          task_type: s.taskType,
+          description: s.description || '',
+          session_date: s.date,
+          duration_minutes: s.durationMinutes,
+          hourly_rate: s.hourlyRate,
+          cost: s.cost,
+        });
+      }
+    }
+
+    console.log('[NCB] Seeding completed successfully.');
+  } catch (e) {
+    console.error('[NCB] Seeding failed:', e);
+  }
+}
+
+// ─── Inventory Sync ───
+export async function syncCreateInventory(item: InventoryItem): Promise<void> {
+  if (!syncEnabled) return;
+  try {
+    await ncbInventory.create(fromInventoryItem(item));
+  } catch (e) { console.warn('[NCB] syncCreateInventory failed', e); }
+}
+
+export async function syncUpdateInventory(item: InventoryItem): Promise<void> {
+  if (!syncEnabled) return;
+  try {
+    await ncbInventory.update(item.id, fromInventoryItem(item));
+  } catch (e) { console.warn('[NCB] syncUpdateInventory failed', e); }
+}
+
+export async function syncDeleteInventory(id: string): Promise<void> {
+  if (!syncEnabled) return;
+  try {
+    await ncbInventory.delete(id);
+  } catch (e) { console.warn('[NCB] syncDeleteInventory failed', e); }
+}
+
+// ─── Project Sync ───
+export async function syncCreateProject(project: Project): Promise<void> {
+  if (!syncEnabled) return;
+  try {
+    await ncbProjects.create(fromProject(project));
+    for (let i = 0; i < project.parts.length; i++) {
+      const p = project.parts[i];
+      await ncbProjectParts.create({
+        id: `${project.id}-part-${i}-${Date.now()}`,
+        project_id: project.id,
+        part_id: p.partId || null,
+        part_name: p.partName,
+        category: p.category,
+        unit_cost: p.unitCost,
+        quantity: p.quantity,
+        total_cost: p.totalCost,
+        status: p.status || 'allocated',
+        supplier: p.supplier || null,
+        purchase_url: p.purchaseUrl || null,
+        notes: p.notes || null,
+        sort_order: i,
+      });
+    }
+    for (let i = 0; i < (project.tasks || []).length; i++) {
+      const t = project.tasks![i];
+      await ncbProjectTasks.create({
+        id: t.id,
+        project_id: project.id,
+        title: t.title,
+        is_completed: t.isCompleted ? 1 : 0,
+        due_date: t.dueDate || null,
+        estimated_minutes: t.estimatedMinutes || null,
+        category: t.category || null,
+        sort_order: i,
+      });
+    }
+    for (const s of project.timeSessions || []) {
+      await ncbTimeSessions.create({
+        id: s.id,
+        project_id: project.id,
+        task_type: s.taskType,
+        description: s.description || '',
+        session_date: s.date,
+        duration_minutes: s.durationMinutes,
+        hourly_rate: s.hourlyRate,
+        cost: s.cost,
+      });
+    }
+  } catch (e) { console.warn('[NCB] syncCreateProject failed', e); }
+}
+
+export async function syncUpdateProject(project: Project): Promise<void> {
+  if (!syncEnabled) return;
+  try {
+    await ncbProjects.update(project.id, fromProject(project));
+  } catch (e) { console.warn('[NCB] syncUpdateProject failed', e); }
+}
+
+export async function syncDeleteProject(id: string): Promise<void> {
+  if (!syncEnabled) return;
+  try {
+    await ncbProjects.delete(id);
+  } catch (e) { console.warn('[NCB] syncDeleteProject failed', e); }
+}
+
+// ─── Mod Sync ───
+export async function syncCreateMod(mod: ModRecipe): Promise<void> {
+  if (!syncEnabled) return;
+  try {
+    await ncbModsLibrary.create(fromModRecipe(mod));
+  } catch (e) { console.warn('[NCB] syncCreateMod failed', e); }
+}
+
+export async function syncUpdateMod(mod: ModRecipe): Promise<void> {
+  if (!syncEnabled) return;
+  try {
+    await ncbModsLibrary.update(mod.id, fromModRecipe(mod));
+  } catch (e) { console.warn('[NCB] syncUpdateMod failed', e); }
+}
+
+export async function syncDeleteMod(id: string): Promise<void> {
+  if (!syncEnabled) return;
+  try {
+    await ncbModsLibrary.delete(id);
+  } catch (e) { console.warn('[NCB] syncDeleteMod failed', e); }
+}
+
+// ─── Settings Sync ───
+export async function syncSettings(settings: AppSettings): Promise<void> {
+  if (!syncEnabled) return;
+  try {
+    await ncbSettings.upsert('default', fromAppSettings(settings));
+  } catch (e) { console.warn('[NCB] syncSettings failed', e); }
+}
+
+// ─── Categories Sync ───
+export async function syncCreateCategory(category: AppCategory): Promise<void> {
+  if (!syncEnabled) return;
+  try {
+    await ncbCategories.create(fromAppCategory(category));
+  } catch (e) { console.warn('[NCB] syncCreateCategory failed', e); }
+}
+
+export async function syncUpdateCategory(category: AppCategory): Promise<void> {
+  if (!syncEnabled) return;
+  try {
+    await ncbCategories.update(category.id, fromAppCategory(category));
+  } catch (e) { console.warn('[NCB] syncUpdateCategory failed', e); }
+}
+
+export async function syncDeleteCategory(id: string): Promise<void> {
+  if (!syncEnabled) return;
+  try {
+    await ncbCategories.delete(id);
+  } catch (e) { console.warn('[NCB] syncDeleteCategory failed', e); }
+}
diff --git a/src/types/index.ts b/src/types/index.ts
new file mode 100644
index 0000000..cab0736
--- /dev/null
+++ b/src/types/index.ts
@@ -0,0 +1,287 @@
+export type CategoryType = 'part_category' | 'console_model' | 'mod_category';
+
+export interface AppCategory {
+  id: string;
+  name: string;
+  slug: string;
+  type: CategoryType;
+  color?: string;
+  badgeColor?: string;
+  icon?: string;
+  description?: string;
+  sortOrder: number;
+  isActive: boolean;
+}
+
+export type ConsoleModel =
+  | 'Game Boy DMG'
+  | 'Game Boy Pocket'
+  | 'Game Boy Light'
+  | 'Game Boy Color'
+  | 'Game Boy Advance'
+  | 'GBA SP'
+  | 'Game Boy Micro'
+  | 'Nintendo DS Lite'
+  | 'Nintendo DSi'
+  | 'Nintendo 3DS / 3DS XL'
+  | 'New 3DS / New 2DS'
+  | 'PSP 1000 / 2000 / 3000'
+  | 'PS Vita'
+  | 'Nintendo Switch / Lite / OLED'
+  | 'Sega Game Gear'
+  | 'WonderSwan'
+  | 'Manette Pro / Rétro'
+  | 'Autre / Custom'
+  | (string & {});
+
+export type PartCategory =
+  | 'console_base'
+  | 'screen'
+  | 'shell'
+  | 'buttons_pads'
+  | 'motherboard_electronics'
+  | 'cartridge_games'
+  | 'battery_power'
+  | 'sound_amp'
+  | 'consumables'
+  | 'packaging_accessories'
+  | 'other'
+  | (string & {});
+
+export type ModCategory =
+  | 'screen'
+  | 'battery_power'
+  | 'audio_sound'
+  | 'shell_aesthetics'
+  | 'buttons_led'
+  | 'motherboard_recap'
+  | 'storage_expansion'
+  | 'complete_kit'
+  | 'other'
+  | (string & {});
+
+export interface ModRequiredPart {
+  partId?: string; // Référence optionnelle à un InventoryItem
+  partName: string;
+  category: PartCategory;
+  quantity: number;
+  estimatedCost: number;
+}
+
+export interface ModRecipe {
+  id: string;
+  name: string;
+  category: ModCategory;
+  compatibleModels: ConsoleModel[];
+  description: string;
+  installationNotes?: string;
+  difficulty: 'easy' | 'medium' | 'hard' | 'expert';
+  estimatedMinutes: number;
+  suggestedAddedValue: number;
+  requiredParts: ModRequiredPart[];
+  checklistTasks: string[];
+  tags?: string[];
+  badgeColor?: string;
+  isPopular?: boolean;
+}
+
+export type InventoryStatus =
+  | 'in_stock'
+  | 'ordered'
+  | 'planned_order'
+  | 'low_stock'
+  | 'out_of_stock';
+
+export interface InventoryItem {
+  id: string;
+  sku: string;
+  name: string;
+  category: PartCategory;
+  consoleModel: ConsoleModel;
+  supplier: string;
+  orderDate: string; // YYYY-MM-DD
+  status: InventoryStatus;
+  unitPurchasePrice: number;
+  shippingCostShare: number; // Frais de port alloués à la pièce
+  taxImportShare: number; // Douane/TVA allouée
+  unitCostWithFees: number; // Coût unitaire réel
+  quantityInStock: number; // Quantité dispo
+  quantityReserved: number; // Quantité allouée dans des projets en cours
+  minStockAlert: number;
+  notes?: string;
+  imageUrl?: string;
+  locationInWorkshop?: string; // Tiroir A1, Bac B2...
+  linkedProjectId?: string; // ID du projet nécessitant cet approvisionnement
+  linkedProjectTitle?: string; // Nom du projet pour affichage rapide
+}
+
+export type ProjectPartStatus = 'allocated' | 'to_order' | 'ordered' | 'received';
+
+export interface ProjectPart {
+  partId: string;
+  partName: string;
+  category: PartCategory;
+  unitCost: number;
+  quantity: number;
+  totalCost: number;
+  status?: ProjectPartStatus; // 'allocated' (En stock) | 'to_order' (À approvisionner) | 'ordered' (En commande)
+  supplier?: string;
+  expectedDeliveryDate?: string;
+  purchaseUrl?: string; // URL du site fournisseur pour acheter la pièce
+  notes?: string; // Notes libres sur la pièce
+}
+
+export type TaskType =
+  | 'diagnostic_demontage'
+  | 'nettoyage_recap'
+  | 'decoupe_coque'
+  | 'soudure_mods'
+  | 'assemblage'
+  | 'test_qc'
+  | 'packaging_photo'
+  | 'autre';
+
+export interface TimeSession {
+  id: string;
+  projectId: string;
+  taskType: TaskType;
+  description: string;
+  date: string; // YYYY-MM-DD
+  durationMinutes: number;
+  hourlyRate: number;
+  cost: number;
+}
+
+export type ProjectStatus =
+  | 'draft'
+  | 'in_progress'
+  | 'qc_testing'
+  | 'in_stock_ready'
+  | 'reserved'
+  | 'sold';
+
+export type ProjectType =
+  | 'showcase_sale'
+  | 'client_custom'
+  | 'personal_collection'
+  | 'repair_mod_only';
+
+export type SalesChannel =
+  | 'vinted'
+  | 'leboncoin'
+  | 'etsy'
+  | 'ebay'
+  | 'direct_shop'
+  | 'convention'
+  | 'autre';
+
+export interface ProjectAdditionalFees {
+  consumablesEst: number; // Étain, tresse, flux, alcool IPA, câbles
+  packagingCost: number; // Boîte kraft, sticker, sachet bulle
+  shippingCost: number; // Envoi au client ou livraison
+  platformFeePercent: number; // % commission de la plateforme
+  platformFeeFixed: number; // Frais fixes plateforme
+  otherFees: number; // Accessoires offerts, dragonne, etc.
+}
+
+export interface ProjectTask {
+  id: string;
+  title: string;
+  isCompleted: boolean;
+  dueDate?: string; // YYYY-MM-DD
+  estimatedMinutes?: number;
+  category?: 'diagnostic' | 'nettoyage' | 'soudure' | 'assemblage' | 'test_qc' | 'packaging';
+}
+
+export interface ProjectObjectives {
+  targetDeadlineDate?: string; // Date d'échéance souhaitée (YYYY-MM-DD)
+  targetProfitMin?: number; // Objectif de gain net (€)
+  targetLaborHoursMax?: number; // Objectif de temps de travail max (heures)
+  targetMarginPercentMin?: number; // Objectif % de marge minimale
+}
+
+export interface Project {
+  id: string;
+  title: string;
+  serialNumber: string; // Ex: "UWU-GBA-001"
+  consoleModel: ConsoleModel;
+  type: ProjectType;
+  status: ProjectStatus;
+  customerName?: string;
+  customerContact?: string;
+  startDate: string;
+  completedDate?: string;
+  soldDate?: string;
+  salesChannel?: SalesChannel;
+  parts: ProjectPart[];
+  timeSessions: TimeSession[];
+  tasks?: ProjectTask[];
+  objectives?: ProjectObjectives;
+  hourlyRateDefault: number;
+  additionalFees: ProjectAdditionalFees;
+  salePriceTarget: number;
+  salePriceActual?: number;
+  notes?: string;
+  photoUrl?: string;
+  modsList: string[]; // Liste des mods faits
+  warrantyMonths?: number;
+}
+
+export interface AppSettings {
+  currency: string;
+  defaultHourlyRate: number;
+  defaultPlatformFeePercent: number;
+  theme: 'uwu-pink' | 'cyberpunk' | 'retro-gameboy' | 'modern-dark';
+  businessName: string;
+  workshopLocation: string;
+  logoText: string;
+}
+
+export interface ProjectFinancials {
+  partsCost: number; // Coût total des pièces (Allouées + En prévision)
+  partsCostAllocated: number; // Coût des pièces déjà en stock / allouées
+  partsCostPlanned: number; // Coût des pièces restant à approvisionner (à prévoir)
+  laborMinutes: number;
+  laborCost: number;
+  consumablesAndPackagingCost: number;
+  shippingAndPlatformCost: number;
+  totalCostOfGoodsSold: number; // Coût total de revient (Matériel + Temps + Frais)
+  hardwareDirectCost: number; // Coût pièces + consommables + packaging sans le temps
+  revenue: number; // Prix vendu ou ciblé
+  grossProfit: number; // CA - Coûts matériels directs
+  netProfit: number; // CA - Coût total avec temps et frais
+  marginPercent: number; // (netProfit / revenue) * 100
+  effectiveHourlyRate: number; // Gain horaire réel dégagé sur ce projet
+}
+
+export type UserRole = 'admin' | 'modder' | 'viewer';
+
+export interface AuthUser {
+  id: string;
+  email: string;
+  name: string;
+  role: UserRole;
+  avatarUrl?: string;
+  workshopName?: string;
+  ncbInstance?: string;
+  lastLoginAt: string;
+}
+
+export interface JwtPayload {
+  sub: string;
+  name: string;
+  email: string;
+  role: UserRole;
+  instance: string;
+  iat: number;
+  exp: number;
+  iss: string;
+}
+
+export interface AuthSession {
+  user: AuthUser;
+  token: string;
+  expiresAt: number;
+  isAuthenticated: boolean;
+}
+
diff --git a/src/utils/calculations.ts b/src/utils/calculations.ts
new file mode 100644
index 0000000..69efc4d
--- /dev/null
+++ b/src/utils/calculations.ts
@@ -0,0 +1,251 @@
+import type { Project, ProjectFinancials, InventoryItem } from '../types';
+
+
+/**
+ * Calcule tous les indicateurs financiers pour un projet donné
+ */
+export function calculateProjectFinancials(
+  project: Project,
+  overrideSalePrice?: number
+): ProjectFinancials {
+  const partsCostAllocated = project.parts
+    .filter((p) => !p.status || p.status === 'allocated' || p.status === 'received')
+    .reduce((sum, p) => sum + (p.totalCost || 0), 0);
+
+  const partsCostPlanned = project.parts
+    .filter((p) => p.status === 'to_order' || p.status === 'ordered')
+    .reduce((sum, p) => sum + (p.totalCost || 0), 0);
+
+  const partsCost = partsCostAllocated + partsCostPlanned;
+
+  const laborMinutes = project.timeSessions.reduce(
+    (sum, t) => sum + (t.durationMinutes || 0),
+    0
+  );
+
+  const laborCost = project.timeSessions.reduce(
+    (sum, t) => sum + (t.cost || (t.durationMinutes / 60) * (t.hourlyRate || project.hourlyRateDefault || 25)),
+    0
+  );
+
+  const consumablesAndPackagingCost =
+    (project.additionalFees?.consumablesEst || 0) +
+    (project.additionalFees?.packagingCost || 0) +
+    (project.additionalFees?.otherFees || 0);
+
+  const revenue = overrideSalePrice !== undefined
+    ? overrideSalePrice
+    : (project.status === 'sold' && project.salePriceActual !== undefined && project.salePriceActual !== null
+        ? project.salePriceActual
+        : (project.salePriceTarget || 0));
+
+  const platformFeeCalculated =
+    (revenue * (project.additionalFees?.platformFeePercent || 0)) / 100 +
+    (project.additionalFees?.platformFeeFixed || 0);
+
+  const shippingAndPlatformCost =
+    (project.additionalFees?.shippingCost || 0) + platformFeeCalculated;
+
+  const hardwareDirectCost = partsCost + consumablesAndPackagingCost;
+  const totalCostOfGoodsSold = hardwareDirectCost + laborCost + shippingAndPlatformCost;
+
+  const grossProfit = revenue - hardwareDirectCost;
+  const netProfit = revenue - totalCostOfGoodsSold;
+  const marginPercent = revenue > 0 ? (netProfit / revenue) * 100 : 0;
+
+  const laborHours = laborMinutes / 60;
+  // Gain horaire effectif = (CA - Frais matériels et expédition) / Heures passées
+  const netBeforeLabor = revenue - (hardwareDirectCost + shippingAndPlatformCost);
+  const effectiveHourlyRate = laborHours > 0 ? netBeforeLabor / laborHours : 0;
+
+  return {
+    partsCost,
+    partsCostAllocated,
+    partsCostPlanned,
+    laborMinutes,
+    laborCost,
+    consumablesAndPackagingCost,
+    shippingAndPlatformCost,
+    totalCostOfGoodsSold,
+    hardwareDirectCost,
+    revenue,
+    grossProfit,
+    netProfit,
+    marginPercent,
+    effectiveHourlyRate,
+  };
+}
+
+/**
+ * Formate un montant en devise (€ par défaut)
+ */
+export function formatCurrency(amount: number, currency = '€'): string {
+  if (isNaN(amount) || amount === null || amount === undefined) return `0,00 ${currency}`;
+  return `${amount.toLocaleString('fr-FR', {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  })} ${currency}`;
+}
+
+/**
+ * Formate un nombre de minutes en heures et minutes (ex: 135 min -> "2h 15m")
+ */
+export function formatMinutes(minutes: number): string {
+  if (!minutes || minutes <= 0) return '0 min';
+  const h = Math.floor(minutes / 60);
+  const m = Math.round(minutes % 60);
+  if (h === 0) return `${m} min`;
+  if (m === 0) return `${h}h`;
+  return `${h}h ${m.toString().padStart(2, '0')}m`;
+}
+
+/**
+ * Calcule la valeur totale du stock (pièces détachées + consoles de base)
+ */
+export function calculateTotalStockValue(items: InventoryItem[]): number {
+  return items.reduce((sum, item) => {
+    return sum + (item.quantityInStock * (item.unitCostWithFees || item.unitPurchasePrice || 0));
+  }, 0);
+}
+
+/**
+ * Obtient le libellé lisible pour une catégorie de pièce
+ */
+export function getPartCategoryLabel(category: string): string {
+  const map: Record<string, string> = {
+    console_base: 'Console Donneuse / Brute',
+    screen: 'Écran & Verre (IPS / OLED)',
+    shell: 'Coque & Plasturgie',
+    buttons_pads: 'Boutons & Silicones',
+    motherboard_electronics: 'Électronique & Cartes Mères',
+    cartridge_games: 'Cartouches & Flashcards',
+    battery_power: 'Batterie & Alimentation LiPo / USB-C',
+    sound_amp: 'Audio, Haut-parleur & Ampli',
+    consumables: 'Consommables & Soudure',
+    packaging_accessories: 'Packaging & Accessoires',
+    other: 'Autre matériel',
+  };
+  return map[category] || category;
+}
+
+/**
+ * Obtient la couleur badge pour une catégorie de pièce
+ */
+export function getCategoryBadgeColor(category: string): { bg: string; text: string; border: string } {
+  switch (category) {
+    case 'console_base':
+      return { bg: 'bg-amber-500/10', text: 'text-amber-400', border: 'border-amber-500/30' };
+    case 'screen':
+      return { bg: 'bg-cyan-500/10', text: 'text-cyan-400', border: 'border-cyan-500/30' };
+    case 'shell':
+      return { bg: 'bg-purple-500/10', text: 'text-purple-400', border: 'border-purple-500/30' };
+    case 'battery_power':
+      return { bg: 'bg-emerald-500/10', text: 'text-emerald-400', border: 'border-emerald-500/30' };
+    case 'sound_amp':
+      return { bg: 'bg-pink-500/10', text: 'text-pink-400', border: 'border-pink-500/30' };
+    case 'buttons_pads':
+      return { bg: 'bg-blue-500/10', text: 'text-blue-400', border: 'border-blue-500/30' };
+    case 'motherboard_electronics':
+      return { bg: 'bg-indigo-500/10', text: 'text-indigo-400', border: 'border-indigo-500/30' };
+    case 'cartridge_games':
+      return { bg: 'bg-rose-500/10', text: 'text-rose-400', border: 'border-rose-500/30' };
+    default:
+      return { bg: 'bg-slate-500/10', text: 'text-slate-400', border: 'border-slate-500/30' };
+  }
+}
+
+/**
+ * Obtient le libellé pour un statut de projet
+ */
+export function getProjectStatusInfo(status: string): { label: string; bg: string; text: string; dot: string; color: string } {
+  switch (status) {
+    case 'draft':
+      return { label: 'Brouillon / Idée', bg: 'bg-slate-500/10', text: 'text-slate-400', dot: 'bg-slate-400', color: 'bg-slate-500/15 text-slate-300 border-slate-500/30' };
+    case 'in_progress':
+      return { label: 'En cours de modding', bg: 'bg-blue-500/10', text: 'text-blue-400', dot: 'bg-blue-400', color: 'bg-blue-500/15 text-blue-300 border-blue-500/30' };
+    case 'qc_testing':
+      return { label: 'Tests & Contrôle Qualité', bg: 'bg-amber-500/10', text: 'text-amber-400', dot: 'bg-amber-400', color: 'bg-amber-500/15 text-amber-300 border-amber-500/30' };
+    case 'in_stock_ready':
+      return { label: 'En Stock / Prête à vendre', bg: 'bg-emerald-500/10', text: 'text-emerald-400', dot: 'bg-emerald-400', color: 'bg-emerald-500/15 text-emerald-300 border-emerald-500/30' };
+    case 'reserved':
+      return { label: 'Réservée client', bg: 'bg-purple-500/10', text: 'text-purple-400', dot: 'bg-purple-400', color: 'bg-purple-500/15 text-purple-300 border-purple-500/30' };
+    case 'sold':
+      return { label: 'Vendue 🎉', bg: 'bg-pink-500/10', text: 'text-pink-400', dot: 'bg-pink-400', color: 'bg-pink-500/15 text-pink-300 border-pink-500/30' };
+    default:
+      return { label: status, bg: 'bg-slate-500/10', text: 'text-slate-400', dot: 'bg-slate-400', color: 'bg-slate-500/15 text-slate-300 border-slate-500/30' };
+  }
+}
+
+/**
+ * Libellé pour un type de tâche
+ */
+export function getTaskTypeLabel(taskType: string): string {
+  const map: Record<string, string> = {
+    diagnostic_demontage: 'Diagnostic & Démontage',
+    nettoyage_recap: 'Nettoyage & Changement Condos',
+    decoupe_coque: 'Découpe & Ajustement Coque',
+    soudure_mods: 'Soudure des Mods & USB-C',
+    assemblage: 'Assemblage & Calibrage',
+    test_qc: 'Tests & Contrôle Qualité (Boutons, Son, Écran)',
+    packaging_photo: 'Shooting Photo & Packaging',
+    autre: 'Autre travail',
+  };
+  return map[taskType] || taskType;
+}
+
+/**
+ * Libellé et style pour le statut d'un article en inventaire
+ */
+export function getInventoryStatusInfo(status: string): { label: string; bg: string; text: string; border: string; isPlanned?: boolean } {
+  switch (status) {
+    case 'in_stock':
+      return { label: 'En Stock', bg: 'bg-emerald-500/10', text: 'text-emerald-400', border: 'border-emerald-500/30' };
+    case 'planned_order':
+      return { label: 'À Approvisionner (En Prévision)', bg: 'bg-amber-500/10', text: 'text-amber-400', border: 'border-amber-500/30', isPlanned: true };
+    case 'ordered':
+      return { label: 'En Commande Fournisseur', bg: 'bg-cyan-500/10', text: 'text-cyan-400', border: 'border-cyan-500/30' };
+    case 'low_stock':
+      return { label: 'Stock Faible', bg: 'bg-orange-500/10', text: 'text-orange-400', border: 'border-orange-500/30' };
+    case 'out_of_stock':
+      return { label: 'Rupture de Stock', bg: 'bg-rose-500/10', text: 'text-rose-400', border: 'border-rose-500/30' };
+    default:
+      return { label: status, bg: 'bg-slate-500/10', text: 'text-slate-400', border: 'border-slate-500/30' };
+  }
+}
+
+/**
+ * Libellé et style pour le statut d'une pièce dans la nomenclature d'un projet
+ */
+export function getProjectPartStatusInfo(status?: string): { label: string; shortLabel: string; bg: string; text: string; border: string; isPlanned: boolean } {
+  switch (status) {
+    case 'to_order':
+      return {
+        label: 'À Approvisionner (Coût à prévoir)',
+        shortLabel: 'À Prévoir',
+        bg: 'bg-amber-500/15',
+        text: 'text-amber-400',
+        border: 'border-amber-500/30',
+        isPlanned: true,
+      };
+    case 'ordered':
+      return {
+        label: 'En Commande Fournisseur',
+        shortLabel: 'Commandé',
+        bg: 'bg-cyan-500/15',
+        text: 'text-cyan-400',
+        border: 'border-cyan-500/30',
+        isPlanned: true,
+      };
+    case 'allocated':
+    case 'received':
+    default:
+      return {
+        label: 'En Stock / Alloué',
+        shortLabel: 'En Stock',
+        bg: 'bg-emerald-500/15',
+        text: 'text-emerald-400',
+        border: 'border-emerald-500/30',
+        isPlanned: false,
+      };
+  }
+}
diff --git a/tsconfig.app.json b/tsconfig.app.json
new file mode 100644
index 0000000..6830b6f
--- /dev/null
+++ b/tsconfig.app.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "es2023",
+    "lib": ["ES2023", "DOM"],
+    "module": "esnext",
+    "types": ["vite/client"],
+    "allowArbitraryExtensions": true,
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..1ffef60
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
diff --git a/tsconfig.node.json b/tsconfig.node.json
new file mode 100644
index 0000000..8455dcb
--- /dev/null
+++ b/tsconfig.node.json
@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "es2023",
+    "lib": ["ES2023"],
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "module": "nodenext",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 0000000..18f5e7a
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,31 @@
+import { defineConfig, loadEnv } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+
+// https://vite.dev/config/
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd(), '')
+
+  return {
+    plugins: [
+      react(),
+      tailwindcss(),
+    ],
+    server: {
+      proxy: {
+        // Proxy /api/ncb/* → NCB EU Data API (keeps secret key server-side)
+        '/api/ncb': {
+          target: 'https://eu-api.nocodebackend.com',
+          changeOrigin: true,
+          rewrite: (path) => path.replace(/^\/api\/ncb/, ''),
+          configure: (proxy) => {
+            proxy.on('proxyReq', (proxyReq) => {
+              proxyReq.setHeader('Authorization', `Bearer ${env.VITE_NCB_SECRET_KEY}`);
+              proxyReq.setHeader('X-Database-Instance', env.VITE_NCB_INSTANCE);
+            });
+          },
+        },
+      },
+    },
+  }
+})