diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md
new file mode 100644
index 000000000..e3ec23d73
--- /dev/null
+++ b/.github/copilot-instructions.md
@@ -0,0 +1,81 @@
+# Copilot instructions for this repo
+
+Short, repo-specific rules so AI agents can be productive immediately.
+
+## Big picture
+- App: Next.js 14 (App Router) under `javascript-version/` using MUI + Tailwind. Tailwind preflight is disabled and styles are scoped with `important: '#__next'` (`tailwind.config.cjs`).
+- Dashboard composition: `Providers` → `AuthGuard` → `LayoutWrapper` → `VerticalLayout` (Navigation/Navbar/Footer) → page. See `src/app/(dashboard)/layout.jsx`, `src/components/AuthGuard.jsx`.
+- Path aliases from `jsconfig.json`: `@/*`, `@core/*`, `@layouts/*`, `@menu/*`, `@assets/*`, `@components/*`, `@configs/*`, `@views/*`.
+
+## Dev workflow
+- Install: pnpm recommended. Postinstall builds Iconify CSS (`src/assets/iconify-icons/bundle-icons-css.cjs`).
+- Run: `pnpm dev` (Windows fallback `npm run dev:win`), Build: `pnpm build`, Start: `pnpm start`, Lint/Format: `pnpm lint`, `pnpm lint:fix`, `pnpm format`.
+- Dev suppresses Node deprecation warnings via `NODE_OPTIONS=--no-deprecation` in scripts.
+
+## Routing, auth, and storage
+- Public auth routes live in `src/app/(blank-layout-pages)/*` (login/register/forgot-password). Protected app is under `src/app/(dashboard)/*` and uses `AuthGuard`.
+- Login: `POST /api/auth/login` then persist `access_token` and `user` to `localStorage` (remember me) or `sessionStorage`. Redirects to `next` query or `/` (`src/views/Login.jsx`).
+- Guard: checks token, calls `GET /api/auth/me` with 5s timeout; on 401 it clears both storages and redirects to `/login?next=<pathname>`, on network/timeout it redirects to `/error?code=network|timeout`.
+
+## Backend access and base paths
+- Rewrites: `/api/:path*` → backend (default `http://localhost:3001/api/:path*`). Edit `javascript-version/next.config.mjs`.
+- Subpath deploys: set `BASEPATH`; client builds absolute URLs with `process.env.NEXT_PUBLIC_BASE_PATH || ''` and still requests `/api/...`.
+- Legacy parts inventory uses `process.env.NEXT_PUBLIC_API_BASE` for its own API base (see `src/app/(dashboard)/parts-inventory/page.jsx`).
+
+## Legacy integration patterns
+- Iframe wrapper: `src/app/(dashboard)/production-management/page.jsx` renders `public/production-management/生産数管理ページ.html` via `<iframe>`. To add more, drop HTML under `public/<dir>/file.html` and set `src="/<dir>/<file>.html"`.
+- Bridging non-React UI: parts inventory boots a legacy app with `initPartsInventoryApp()`, sets `window.API_BASE`, waits for `pi:modal-ready`, and tears down via `window.__piAppTeardown`. MUI dialogs are bridged with `ModalBridge`.
+
+## Theming and layout
+- Providers: `src/components/Providers.jsx` wires `@core/contexts`, `@menu/contexts`, and `ThemeProvider`; includes `UpgradeToProButton`.
+- Navigation: `@components/layout/vertical/*` with defaults in `@menu/defaultConfigs.js`. Tailwind plugin at `src/@core/tailwind/plugin`.
+
+## Dark modeの使い方（MUI + Tailwind）
+- 仕組みの全体像
+  - テーマ状態は `SettingsProvider`（`src/@core/contexts/settingsContext.jsx`）で管理され、`mode: 'light' | 'dark'` が Cookie（`themeConfig.settingsCookieName` = `materio-mui-next-free-demo`）に保存されます。
+  - `Providers`（`src/components/Providers.jsx`）は SSR で `getSettingsFromCookie()`/`getMode()` を使って初期モードを取得し、MUI の `CssVarsProvider` を包む `ThemeProvider`（`src/components/theme/index.jsx`）へ渡します。これにより初回レンダリング時のちらつきや水和ミスマッチを回避します。
+  - `ModeChanger`（`src/components/theme/ModeChanger.jsx`）が `useColorScheme()` により MUI のモードを反映します。
+
+- 既存のトグル UI を使う（最短）
+  - ヘッダー用のモード切替が用意されています: `src/components/layout/shared/ModeDropdown.jsx`。
+  - 内部では `useSettings()` の `updateSettings({ mode: 'light' | 'dark' })` を呼び出し、Cookie と状態が同期されます。追加の配線は不要です。
+
+- 任意の場所にトグルを置く（再利用パターン）
+  - 任意のコンポーネントで以下の要領で切り替え可能です。
+    - `const { settings, updateSettings } = useSettings()`
+    - `updateSettings({ mode: settings.mode === 'dark' ? 'light' : 'dark' })`
+  - Cookieに保存されるため、ページ遷移やSSRでも設定が保持されます。
+
+- コンポーネント側のスタイルの当て方（MUI）
+  - MUIコンポーネントはモードに応じて自動で配色が切り替わります。カスタムCSSや`SxProps`では `useTheme()` で `theme.palette`（例: `text.primary`, `background.default`）を参照してください。
+  - プライマリカラーは `src/components/theme/index.jsx` で `primaryColorConfig` を `lighten`/`darken` と共に各モードへ適用済みです。
+
+- Tailwind の dark ユーティリティを併用したい場合（任意）
+  - 既定では Tailwind の `dark:` 変種は未構成です。Tailwind 側でも明暗を使いたい場合は：
+    1) `javascript-version/tailwind.config.cjs` に `darkMode: 'class'` を追加。
+  2) MUI のモードと Tailwind の `.dark` クラスを同期する小さなブリッジを作成し、`document.documentElement`（html）に `.dark` を付与/除去します（Next.js のルート要素 id="__next" より上位に付けるのが重要。Tailwind の dark 変種は html もしくは body に .dark が付与されていれば適用されます）。
+    3) そのブリッジは `ThemeProvider` の子としてマウントしてください（`Providers.jsx` で `ThemeProvider` 内に配置）。
+  - 参考実装（概略）
+    - `const { settings } = useSettings(); useEffect(() => { const root = document.documentElement; settings.mode === 'dark' ? root.classList.add('dark') : root.classList.remove('dark'); }, [settings.mode]);`
+  - これで `className="dark:bg-gray-900"` のような Tailwind の `dark:` 変種をMUIのモードと一致させて使えます。
+
+- よくある落とし穴
+  - `mode` を直接 `localStorage` 等に保存しないこと（既存の Cookie ベースと二重管理になるため）。`useSettings().updateSettings` を必ず使う。
+  - Tailwind の `.dark` クラスは Next.js のルート要素（id="__next"）ではなく html（または body）に付けること。Tailwind の `important` 設定の影響で、ルート配下のユーティリティを安定して適用できます。
+  - `themeConfig.mode` を変更しただけでは開発中は反映されません。カスタマイザのリセット（Cookie初期化）またはブラウザのストレージから対象Cookieを削除してからリロードしてください（`src/configs/themeConfig.js` のコメント参照）。
+
+## Examples
+- Protected page: add `src/app/(dashboard)/your-page/page.jsx` (inherits Providers/Layout/Guard automatically).
+- Public page: add `src/app/(blank-layout-pages)/your-page/page.jsx`.
+- Backend call pattern:
+  `await fetch(`${process.env.NEXT_PUBLIC_BASE_PATH || ''}/api/your/endpoint`, { headers: { Authorization: \`Bearer ${token}\` } })`
+
+## Gotchas
+- Changing rewrites/basePath requires restarting the dev server.
+- When `basePath` is set, prefix asset and iframe URLs (or compute with `NEXT_PUBLIC_BASE_PATH`).
+- Ensure storage keys are exactly `access_token` and `user` to interoperate with `AuthGuard` and pages.
+
+—
+Open questions to confirm with the team:
+- Standardize `NEXT_PUBLIC_BASE_PATH` vs `NEXT_PUBLIC_API_BASE` for legacy areas; both appear today.
+- Confirm the shape of auth/user responses for `/api/auth/login` and `/api/auth/me` to keep storage in sync.
\ No newline at end of file
diff --git a/.github/instructions/custom.instructions.md b/.github/instructions/custom.instructions.md
new file mode 100644
index 000000000..05e475b26
--- /dev/null
+++ b/.github/instructions/custom.instructions.md
@@ -0,0 +1,51 @@
+---
+applyTo: '**'
+---
+
+* コードのコメントは全部日本語で書いて。
+* コードのコメントはギャル語ではなく普通の噛み砕かれた日本語説明してね。
+* コードの解説はギャル語でわかりやすく噛み砕いて説明してね。
+* 生成するコードはプロジェクトの既存のスタイルと一貫性を保ってね。
+* 大学NWではプロキシサーバが使われています。NWを使う際はユーザーに大学内NWなのかその他のNWなのかを確認して。
+* 大学NWは"10.100.200.2:8080"、その他のNWはプロキシを外してください。
+* コードを改修する際、元々あったコメントを削除しないでください。
+
+* コメントルール（学習＆実用ハイブリッド版）
+  - **関数やクラスの説明：** 日本語で丁寧に。ファイルの役割も冒頭に記載。
+  - **ロジックの解説：** 複雑な部分はステップごとに説明。「なぜこの書き方なのか」という理由も添える。
+  - **命名と補足：** 変数・定数名はわかりやすく。意図が伝わりにくい場合はコメントで補足。
+  - **I/Oの明文化：** 引数が何で、戻り値が何を意味するのかを明確に書く（JSDocやDocstring形式だとさらによし）。
+  - **視認性アップ：** 説明が長くなる場合は `========` などの区切り線でブロック分けする。
+  - **垂直整列の徹底：** JSDocやDocstringを書くときは、説明文（- や : 以降）の開始位置を、そのブロック内で一番長い行に合わせてスペースで垂直に揃えてください。
+  - **実装ステップの言語化：** 関数内部の処理が複雑な場合　3〜5つ程度のブロックに分け、各ブロックの冒頭に「何をしているか」を日本語でコメントして。
+  - **「なぜ」の強制記述：** if文の分岐や、計算式など「なぜその条件なのか」「なぜその数値なのか」という意図を必ず添えて。
+
+コメント例
+```javascript
+/*
+======== ファイル概要 ========
+単一カメラのプレビュー画像とステータスラベルをカード表示するプレゼンテーション層。
+フォールバック画像や事後/事前撮影URLの補完もここで吸収する。
+*/
+```
+
+```javascript
+/**
+ * カメラ1台分のカード。画像読み込み失敗時はフォールバックを順に試す。
+ * @param {object} props          - コンポーネント引数。
+ * @param {string} props.name     - カメラ表示名。
+ * @param {string} props.status   - 判定ステータス。
+ * @param {boolean} props.isSingle - 単独表示かどうか。
+ * @param {string} props.imagePath - 元画像パス。
+ * @returns {JSX.Element}          プレビュー付きのカメラカード。
+ */
+```
+
+```javascript
+// ======== 処理ステップ: レイアウト判定 → タイル描画 → ダミー補完 ========
+  // 1. レイアウト判定ではcol数とダミー枠を算出し、グリッドの視認性を維持する。
+  // 2. タイル描画ではCameraTileへ名前/状態/画像を渡して統一表示させる。
+  // 3. ダミー補完は画像欠損時の空枠を説明するため、ユーザーが未設置カメラだと分かるようにする。
+```
+
+Provide project context and coding guidelines that AI should follow when generating code, answering questions, or reviewing changes.
\ No newline at end of file
diff --git a/.vscode/setting.json b/.vscode/setting.json
new file mode 100644
index 000000000..f40e2b6ff
--- /dev/null
+++ b/.vscode/setting.json
@@ -0,0 +1,4 @@
+{
+  "editor.tabSize": 2,
+  "editor.detectIndentation": false
+}
\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 000000000..29f42c905
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "idf.pythonInstallPath": "C:\\Espressif\\tools\\idf-python\\3.11.2\\python.exe"
+}
\ No newline at end of file
diff --git a/README.md b/README.md
index d069fe9b5..af2cdaf4f 100644
--- a/README.md
+++ b/README.md
@@ -8,11 +8,11 @@
 
 <h1 align="center">
    <a href="https://themeselection.com/item/materio-free-mui-nextjs-admin-template" target="_blank" align="center">
-      Materio - Free MUI NextJS Admin Template
+      Materio - 無料 MUI NextJS 管理画面テンプレート
    </a>
 </h1>
 
-<p align="center">Most Powerful & Comprehensive Free MUI NextJS Admin Dashboard Template built for developers!</p>
+<p align="center">開発者向けの最もパワフルで包括的な無料MUI NextJS管理ダッシュボードテンプレート！</p>
 
 <p align="center">
    <a href="https://github.com/themeselection/materio-mui-nextjs-admin-template-free/blob/main/LICENSE">
@@ -29,165 +29,208 @@
 
 <kbd>[![Materio - Free MUI NextJS Admin Template Demo Screenshot](https://cdn.themeselection.com/ts-assets/materio/materio-mui-nextjs-admin-template-free/marketing/materio-mui-nextjs-admin-template-free-github.png)](https://themeselection.com/item/materio-free-mui-nextjs-admin-template)</kbd>
 
-## Introduction 🚀
+## はじめに 🚀
 
-If you're a developer looking for the most Powerful & comprehensive [Free MUI NextJS Admin Dashboard Template](https://themeselection.com/item/materio-free-mui-nextjs-admin-template) built for developers, rich with features, and highly customizable, look no further than Materio. We've followed the highest industry standards to bring you the very best admin template that is not only easy to use but highly scalable. Offering ultimate convenience and flexibility, you'll be able to build whatever application you want with very little hassle.
+開発者向けで、最もパワフルかつ包括的な[無料MUI NextJS管理ダッシュボードテンプレート](https://themeselection.com/item/materio-free-mui-nextjs-admin-template)をお探しなら、Materioが最適です。業界最高水準に従い、使いやすく、拡張性の高い最高の管理画面テンプレートを提供します。究極の利便性と柔軟性を備えており、手間なくどんなアプリケーションも構築できます。
 
-Build premium quality applications with ease. Use one of the most innovative [NextJS admin templates](https://themeselection.com/item/category/next-js-admin-template) to create eye-catching, high-quality WebApps. Your apps will be completely responsive, ensuring they'll look stunning and function flawlessly on desktops, tablets, and mobile devices.
+高品質なアプリケーションを簡単に構築できます。革新的な[NextJS管理テンプレート](https://themeselection.com/item/category/next-js-admin-template)を使って、魅力的で高品質なWebアプリを作成しましょう。完全レスポンシブ対応で、デスクトップ・タブレット・モバイルでも美しく動作します。
 
-Materio provides a template with TypeScript and JavaScript.
+MaterioはTypeScript版とJavaScript版のテンプレートを提供しています。
 
-[View Demo](https://demos.themeselection.com/materio-mui-nextjs-admin-template-free/demo)
+[デモを見る](https://demos.themeselection.com/materio-mui-nextjs-admin-template-free/demo)
 
-## Features 📋
+## 特徴 📋
 
-- ⚡ [Next.js](https://nextjs.org) with App Router support
-- 💎 Integrated with [MUI](https://mui.com) & [Tailwind CSS](https://tailwindcss.com)
-- ✅ [TypeScript](https://www.typescriptlang.org) & JavaScript Support
-- 📏 Linter with [ESLint](https://eslint.org)
-- 💖 Code Formatter with [Prettier](https://prettier.io)
-- 🗂 VSCode configuration: Settings, Extensions and Custom Snippets
-- 💡 Absolute Imports with aliases
-- ☕ Minify HTML & CSS
-- 💨 Live reload
-- ✅ Cache busting
-- 🛠️ Easy to customize
-- 😎 SEO-friendly
-- 🚀 Production-ready
+- ⚡ [Next.js](https://nextjs.org)（App Router対応）
+- 💎 [MUI](https://mui.com) & [Tailwind CSS](https://tailwindcss.com) 統合
+- ✅ [TypeScript](https://www.typescriptlang.org) & JavaScript対応
+- 📏 [ESLint](https://eslint.org)によるリント
+- 💖 [Prettier](https://prettier.io)によるコード整形
+- 🗂 VSCode設定: 設定、拡張機能、カスタムスニペット
+- 💡 エイリアスによる絶対インポート
+- ☕ HTML & CSSの最小化
+- 💨 ライブリロード
+- ✅ キャッシュバスティング
+- 🛠️ カスタマイズが簡単
+- 😎 SEO対応
+- 🚀 本番運用準備済み
 
-## Requirements ✅
+## 必要要件 ✅
 
-- Node.js LTS version (not current version)
+- Node.js LTSバージョン（最新版ではなくLTS）
 - npm
 
-## Installation ⚒️
+## インストール方法 ⚒️
 
-Installing and running the template is super easy in Materio, please follow these steps and you should be ready to rock 🤘:
+Materioのインストールと実行はとても簡単です。以下の手順に従ってください。
 
-1. Make sure you have installed Node.js (LTS). If Node.js is already installed in your system, make sure the installed version is LTS (and not the latest version)
-2. Navigate to the `typescript-version` or `javascript-version` folder and run the following command to install our local dependencies listed in the `package.json` file. You can use `pnpm`, `yarn` or `npm` as per your preference
+1. Node.js（LTS）をインストールしてください。すでにインストール済みの場合は、LTSバージョンであることを確認してください。
+2. `typescript-version` または `javascript-version` フォルダに移動し、`package.json`に記載されたローカル依存関係をインストールします。`pnpm`、`yarn`、`npm`のいずれかを使用できます。
 
-   > It is recommended to use pnpm for better dependency management
+   > 依存関係管理の観点から、pnpmの使用を推奨します。
 
    ```bash
-   # For pnpm (recommended)
+   # pnpm（推奨）
    pnpm install
 
-   # For yarn
+   # yarn
    yarn install
 
-   # For npm
+   # npm
    npm install
    ```
 
-3. Rename the `.env.example` file to `.env` file
-4. Now, you are ready to start the server with the help of the command shown below. Open [http://localhost:3000](http://localhost:3000) to check your development 🚀.
+3. `.env.example`ファイルを`.env`にリネームしてください。
+4. 下記コマンドでサーバーを起動できます。[http://localhost:3000](http://localhost:3000)で開発環境を確認できます。
 
    ```bash
-   # For pnpm (recommended)
+   # pnpm（推奨）
    pnpm dev
 
-   # For yarn
+   # yarn
    yarn dev
 
-   # For npm
+   # npm
    npm run dev
    ```
 
-## What's Included 📦
-
-- Layouts
-  - Blank
-  - Full
-  - Boxed
-- Dashboard
-- Pages
-  - Account Settings
-  - Login
-  - Register
-  - Forgot Password
-  - Error
-  - Under Maintenance
-- Iconify Icons
-- Basic Cards
-- Form Layouts
-
-## What's in Premium Version 💎
-
-| Materio Free Version        | Materio Premium Version       |
+## ビルドと本番起動手順 🏗️
+
+開発が完了したら、以下のコマンドで本番用ビルドと起動ができます。
+
+```bash
+# コードのリントと自動修正
+pnpm lint --fix
+
+# 本番用ビルド
+pnpm build
+
+# 本番サーバーの起動
+pnpm start
+```
+
+- `pnpm build` で最適化された本番用ファイルが生成されます。
+- `pnpm start` で本番サーバーが起動し、通常は [http://localhost:3000](http://localhost:3000) でアプリケーションが利用可能になります。
+
+## 含まれるもの 📦
+
+- レイアウト
+  - ブランク
+  - フル
+  - ボックス
+- ダッシュボード
+- ページ
+  - アカウント設定
+  - ログイン
+  - 登録
+  - パスワード再設定
+  - エラー
+  - メンテナンス中
+- Iconifyアイコン
+- 基本カード
+- フォームレイアウト
+
+## プレミアム版の内容 💎
+
+| Materio 無料版        | Materio プレミアム版       |
 | ----------------------------------------------- | :------------------------------------------------ |
-| [Demo](https://demos.themeselection.com/materio-mui-nextjs-admin-template-free/demo) | [Demo](https://demos.themeselection.com/materio-mui-nextjs-admin-template/demo-1)  |
-| [Download](https://themeselection.com/item/materio-free-mui-nextjs-admin-template)   | [Purchase](https://themeselection.com/item/materio-free-mui-nextjs-admin-template) |
-| Single vertical menu                 | Vertical (+ vertical collapsed) & Horizontal menu                   |
-| Default skin                         | Default, bordered & semi-dark skin                                  |
-| 1 simple dashboard                   | 5 niche dashboards                                                  |
-| -                                    | 10 Applications including eCommerce, academy, email, chat, calendar, invoice, kanban, etc. |
-| Simple form layouts                  | Advanced form layouts, form validation & form wizard                |
-| Basic cards                          | Basic, advanced, statistics, charts, gamification & action cards    |
-| -                                    | Quick search - quickly navigate between pages (with hotkey support) |
-| Basic tables                         | Advanced tables                                                     |
-| 1 chart library                      | 2 chart libraries                                                   |
-| 6 pages                              | 35+ pages                                                           |
-| Simple navbar & footer               | Multiple navbar & footer options                                    |
-| -                                    | Authentication using NextAuth                                       |
-| -                                    | RTL (right-to-left) support                                         |
+| [デモ](https://demos.themeselection.com/materio-mui-nextjs-admin-template-free/demo) | [デモ](https://demos.themeselection.com/materio-mui-nextjs-admin-template/demo-1)  |
+| [ダウンロード](https://themeselection.com/item/materio-free-mui-nextjs-admin-template)   | [購入](https://themeselection.com/item/materio-free-mui-nextjs-admin-template) |
+| シングル縦型メニュー                 | 縦型（折りたたみ対応）＆横型メニュー                   |
+| デフォルトスキン                         | デフォルト、ボーダー付き、セミダークスキン                                  |
+| 1つのシンプルなダッシュボード                   | 5つのニッチなダッシュボード                                                  |
+| -                                    | 10のアプリ（eコマース、アカデミー、メール、チャット、カレンダー、請求書、カンバン等） |
+| シンプルなフォームレイアウト                  | 高度なフォームレイアウト、バリデーション、ウィザード                |
+| 基本カード                          | 基本、アドバンス、統計、チャート、ゲーミフィケーション、アクションカード    |
+| -                                    | クイックサーチ（ホットキー対応） |
+| 基本テーブル                         | 高度なテーブル                                                     |
+| 1つのチャートライブラリ                      | 2つのチャートライブラリ                                                   |
+| 6ページ                              | 35+ページ                                                           |
+| シンプルなナビバー＆フッター               | 複数のナビバー＆フッターオプション                                    |
+| -                                    | NextAuthによる認証                                       |
+| -                                    | RTL（右から左）対応                                         |
 | -                                    | Redux toolkit                                                       |
-| -                                    | Multi-lingual support                                               |
-| -                                    | Starter-kit                                                         |
-| -                                    | Customizer drawer to check options in live app                      |
-| Limited customization                | Endless customization possibilities                                 |
-| Regular support                      | Priority support                                                    |
+| -                                    | 多言語対応                                               |
+| -                                    | スターターキット                                                         |
+| -                                    | カスタマイザードロワーでライブアプリのオプション確認                      |
+| 限定的なカスタマイズ                | 無限のカスタマイズ可能                                 |
+| 通常サポート                      | 優先サポート                                                    |
+
+## ドキュメント 📜
+
+ライブ[ドキュメント](https://demos.themeselection.com/materio-mui-nextjs-admin-template/documentation)をご覧ください。
+
+## デプロイ 🚀
+
+[デプロイ手順](https://demos.themeselection.com/materio-mui-nextjs-admin-template/documentation/docs/guide/deployment)もご参照ください。
+
+## APIアドレス（バックエンド）の変更方法 🔧
+
+フロントエンドからは `/api/...` にリクエストします。実際のバックエンドURLへの振り分けは `next.config.mjs` の `rewrites` で行っています。バックエンドのアドレスを変更したい場合は、以下を編集してください。
+
+- 対象ファイル: `javascript-version/next.config.mjs`
+- 該当箇所（例）:
 
-## Documentation 📜
+```js
+async rewrites() {
+   return [
+      {
+         source: '/api/:path*',
+         destination: 'http://localhost:3001/api/:path*' // ← ここをバックエンドのURLに変更
+      }
+   ]
+}
+```
 
-Check out our live [Documentation](https://demos.themeselection.com/materio-mui-nextjs-admin-template/documentation)
+編集後は開発サーバーを再起動してください（設定は再起動時に反映されます）。
 
-## Deployment 🚀
+補足:
 
-Check out our [Deployment docs](https://demos.themeselection.com/materio-mui-nextjs-admin-template/documentation/docs/guide/deployment)
+- クライアントコードは `/api/...` にアクセスするだけで、CORS 設定を意識せずに Next.js がバックエンドへプロキシします。
+- アプリをサブパス配下で配信する場合は、`next.config.mjs` の `basePath` または `.env` の `BASEPATH` を設定してください。クライアント側では `NEXT_PUBLIC_BASE_PATH` を参照しており、`/api/...` の手前に自動で付与されます。
 
-## Browser Support 🖥️
+## 対応ブラウザ 🖥️
 
 ![chrome](https://github.com/nuxt/nuxt/assets/47495003/bbb6d7b0-2db6-4af4-abdc-a73de71dd287)
 &nbsp;&nbsp;![firefox](https://github.com/nuxt/nuxt/assets/47495003/bca1f2d0-d597-453b-8525-5c94e36bfc33)
 &nbsp;&nbsp;![safari](https://github.com/nuxt/nuxt/assets/47495003/8ecbb395-78fb-40fb-bb59-7301bf8a7e5d)
 &nbsp;&nbsp;![Microsoft Edge](https://github.com/nuxt/nuxt/assets/47495003/f945821b-0cbd-464d-8103-824d4d5c4e9a)
 
-*_It also supports other browser which implemented latest CSS standards_
+*_最新のCSS標準に対応した他のブラウザもサポートしています_
 
-## Contributing 🦸
+## コントリビューション 🦸
 
-Contribution are always welcome and recommended! Here is how:
+貢献はいつでも歓迎です！方法は以下の通りです。
 
-* Fork the repository ([here is the guide](https://docs.github.com/en/get-started/quickstart/fork-a-repo)).
-* Clone to your machine `git clone https://github.com/YOUR_USERNAME/REPO_NAME` Make your changes
-* Create a pull request
+* リポジトリをフォーク（[ガイドはこちら](https://docs.github.com/en/get-started/quickstart/fork-a-repo)）
+* 自分のマシンにクローン `git clone https://github.com/YOUR_USERNAME/REPO_NAME` して変更を加える
+* プルリクエストを作成
 
-### Contribution Requirements 🧰
+### 貢献の条件 🧰
 
-* When you contribute, you agree to give a non-exclusive license to ThemeSelection to use that contribution in any context as we (ThemeSelection) see appropriate.
-* If you use content provided by another party, it must be appropriately licensed using an open source license.
-* Contributions are only accepted through Github pull requests.
-* Finally, contributed code must work in all supported browsers (see above for browser support).
+* 貢献することで、ThemeSelectionがその貢献をあらゆる文脈で使用する非独占的ライセンスを与えることに同意したものとみなします。
+* 他者のコンテンツを使用する場合は、オープンソースライセンスで適切にライセンスされている必要があります。
+* 貢献はGitHubのプルリクエスト経由のみ受け付けます。
+* 最後に、貢献したコードはすべてのサポートブラウザで動作する必要があります（上記参照）。
 
-## Changelog 📆
+## 変更履歴 📆
 
-Please refer to the [CHANGELOG](CHANGELOG.md) file. We will add a detailed release notes to each new release.
+各リリースの詳細なリリースノートは[CHANGELOG](CHANGELOG.md)ファイルをご参照ください。
 
-## Support 🧑🏻‍💻
+## サポート 🧑🏻‍💻
 
-For free products, enjoy community support via GitHub issues. Upgrade to Premium for dedicated support from our expert team.
+無料製品はGitHub Issuesでコミュニティサポートを提供しています。プレミアム版では専門チームによる専用サポートが受けられます。
 
-## License &copy;
+## ライセンス &copy;
 
 - Copyright © [ThemeSelection](https://themeselection.com/)
-- Licensed under [MIT](LICENSE)
-- All our free items are Open Source and licensed under MIT. You can use our free items for personal as well as commercial purposes. We just need an attribution from your end. Copy the below link and paste it at the footer of your web application or project.
+- [MIT](LICENSE) ライセンス
+- すべての無料アイテムはMITライセンスのオープンソースです。個人・商用問わずご利用いただけます。ご利用の際は、下記のリンクをフッター等に記載してください。
    ```html
   <a href="https://themeselection.com/">ThemeSelection</a>
    ```
 
-## Also Available In
+## 他にも提供中
 
 <p>
    <!-- Figma -->
@@ -210,28 +253,28 @@ For free products, enjoy community support via GitHub issues. Upgrade to Premium
    <a href="https://themeselection.com/item/materio-vuetify-nuxtjs-admin-template" target="_blank"><picture><source width="auto" height="74px" media="(prefers-color-scheme: dark)" srcset="https://github.com/microsoft/vscode/assets/47495003/d9d3cf2e-4dc5-49fe-b146-b80ef010cb57"><source width="auto" height="74px" media="(prefers-color-scheme: light)" srcset="https://github.com/microsoft/vscode/assets/47495003/f18ba562-6bba-4a55-83ac-962ecefa636f"><img width="auto" height="74px" alt="nuxt" src="https://github.com/microsoft/vscode/assets/47495003/f18ba562-6bba-4a55-83ac-962ecefa636f"></picture></img></a>&nbsp;&nbsp;
 </p>
 
-## Looking For Premium Admin Templates ?? 👀
+## プレミアム管理画面テンプレートをお探しですか？ 👀
 
-**[ThemeSelection](https://themeselection.com/)** provides Selected high quality, modern design, professional and easy-to-use **Fully Coded Dashboard Templates & UI Kits** to create your applications faster!
+**[ThemeSelection](https://themeselection.com/)** では、厳選された高品質・モダンデザイン・プロフェッショナルで使いやすい**完全コーディング済みダッシュボードテンプレート＆UIキット**を提供しています！
 
-- [Bootstrap Admin Templates](https://themeselection.com/item/category/bootstrap-admin-template/)
-- [VueJS Admin Templates](https://themeselection.com/item/category/vuejs-admin-templates/)
-- [Laravel Admin Templates](https://themeselection.com/item/category/laravel-admin-templates/)
-- [Django Admin Templates](https://themeselection.com/item/category/django-admin-template/)
-- [React (NextJS) Admin Templates](https://themeselection.com/item/category/next-js-admin-template/)
-- [ASP.Net Core Admin Templates](https://themeselection.com/item/category/asp-net-dashboard/)
-- [Free UI Kits](https://themeselection.com/item/category/free-ui-kits/) 
+- [Bootstrap管理画面テンプレート](https://themeselection.com/item/category/bootstrap-admin-template/)
+- [VueJS管理画面テンプレート](https://themeselection.com/item/category/vuejs-admin-templates/)
+- [Laravel管理画面テンプレート](https://themeselection.com/item/category/laravel-admin-templates/)
+- [Django管理画面テンプレート](https://themeselection.com/item/category/django-admin-template/)
+- [React (NextJS) 管理画面テンプレート](https://themeselection.com/item/category/next-js-admin-template/)
+- [ASP.Net Core管理画面テンプレート](https://themeselection.com/item/category/asp-net-dashboard/)
+- [無料UIキット](https://themeselection.com/item/category/free-ui-kits/) 
 
-If you want to [Download Free Admin Templates](https://themeselection.com/item/category/free-admin-templates/) like Materio then do visit [ThemeSelection](https://themeselection.com/).
+[無料管理画面テンプレート](https://themeselection.com/item/category/free-admin-templates/)をダウンロードしたい場合は[ThemeSelection](https://themeselection.com/)をご覧ください。
 
-## Useful Links 🎁
+## 便利なリンク 🎁
 
-* [Vue CheatSheet](https://vue-cheatsheet.themeselection.com/)
-* [Freebies](https://themeselection.com/item/category/free-admin-templates/)
-* [Download Free Admin Templates](https://themeselection.com/item/category/free-admin-templates/)
-* [Bootstrap 5 CheatSheet](https://bootstrap-cheatsheet.themeselection.com/)
+* [Vue チートシート](https://vue-cheatsheet.themeselection.com/)
+* [フリービー](https://themeselection.com/item/category/free-admin-templates/)
+* [無料管理画面テンプレートのダウンロード](https://themeselection.com/item/category/free-admin-templates/)
+* [Bootstrap 5 チートシート](https://bootstrap-cheatsheet.themeselection.com/)
 
-## Social Media :earth_africa:
+## ソーシャルメディア :earth_africa:
 
 - [Twitter](https://twitter.com/Theme_Selection)
 - [Facebook](https://www.facebook.com/ThemeSelections/)
diff --git "a/docs/API\350\250\255\350\250\210/PLC,Jetson\351\200\232\344\277\241.html" "b/docs/API\350\250\255\350\250\210/PLC,Jetson\351\200\232\344\277\241.html"
new file mode 100644
index 000000000..33cdb3929
--- /dev/null
+++ "b/docs/API\350\250\255\350\250\210/PLC,Jetson\351\200\232\344\277\241.html"
@@ -0,0 +1,1111 @@
+<!DOCTYPE html>
+<html lang="ja">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>生産数管理API設計書 (タイムスタンプ改善版)</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic" crossorigin>
+    <link
+        href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;700&display=swap"
+        rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/vs2015.min.css">
+        <script src="../sidebar.js" defer></script>
+    <style>
+        body {
+            font-family: 'Inter', 'Noto Sans JP', sans-serif;
+        }
+
+        .method-badge {
+            font-size: 0.8rem;
+            font-weight: 700;
+            padding: 0.2em 0.6em;
+            border-radius: 0.25rem;
+            color: white;
+            display: inline-block;
+            width: 80px;
+            text-align: center;
+        }
+
+        .get {
+            background-color: #3b82f6;
+        }
+
+        .post {
+            background-color: #22c55e;
+        }
+
+        .put {
+            background-color: #f97316;
+        }
+
+        .delete {
+            background-color: #ef4444;
+        }
+
+        pre code.hljs {
+            padding: 1rem;
+            border-radius: 0.5rem;
+            font-size: 0.875rem;
+        }
+
+        /* Copy button */
+        .code-block-wrapper {
+            position: relative;
+        }
+
+        .copy-btn {
+            position: absolute;
+            top: 4px;
+            right: 6px;
+            background: rgba(51, 65, 85, .85);
+            color: #f1f5f9;
+            font-size: 12px;
+            font-weight: 600;
+            padding: 6px 12px 6px 10px;
+            border-radius: 8px;
+            cursor: pointer;
+            line-height: 1;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            backdrop-filter: blur(2px);
+            border: 1px solid rgba(255, 255, 255, .08);
+            transition: transform .16s ease, box-shadow .22s ease, background-color .25s ease;
+            box-shadow: 0 2px 6px -2px rgba(15, 23, 42, .35);
+        }
+
+        .copy-btn svg {
+            width: 16px;
+            height: 16px;
+        }
+
+        .copy-btn:hover {
+            background: rgba(71, 85, 105, .92);
+            transform: translateY(-2px);
+            box-shadow: 0 6px 14px -4px rgba(15, 23, 42, .45);
+        }
+
+        .copy-btn:active {
+            transform: translateY(0);
+            box-shadow: 0 3px 8px -4px rgba(15, 23, 42, .4);
+        }
+
+        .copy-btn.copied {
+            background: linear-gradient(135deg, #16a34a 0%, #15803d 70%);
+        }
+
+        .copy-btn.copied svg {
+            animation: pop .4s ease;
+        }
+
+        @keyframes pop {
+            0% {
+                transform: scale(.6) rotate(-20deg);
+            }
+
+            60% {
+                transform: scale(1.15);
+            }
+
+            100% {
+                transform: scale(1);
+            }
+        }
+    </style>
+</head>
+
+<body class="bg-slate-50 text-slate-800">
+
+    <div class="container mx-auto p-4 sm:p-6 lg:p-8 max-w-7xl">
+        <header class="mb-8">
+            <div class="flex items-center justify-between mb-4">
+                <div class="flex items-center space-x-4">
+                    <svg class="w-12 h-12 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M13 10V3L4 14h7v7l9-11h-7z"></path>
+                    </svg>
+                    <h1 class="text-4xl font-bold text-slate-900">PLC,Jetson通信API 設計書()</h1>
+                </div>
+                <a href="../index.html"
+                    class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition-colors">
+                    ← トップページに戻る
+                </a>
+            </div>
+            <div class="mt-4 p-4 bg-indigo-100 border-l-4 border-indigo-500 text-indigo-700 rounded-r-lg">
+                <p class="font-bold">対象: Jetsonからのファイルの送信</p>
+                <p class="text-sm mt-1">このドキュメントは、PLCや画像検査プログラムからの信号をDBに格納するためのAPI仕様を定義します。</p>
+            </div>
+        </header>
+
+        <div class="space-y-12">
+
+            <section id="sse-overview">
+                <h2 class="text-2xl font-bold border-b-2 border-indigo-500 pb-2 mb-4">SSE通知の概要</h2>
+                <div class="bg-white p-6 rounded-lg shadow-md">
+                    <p class="text-sm mb-4">各APIの処理完了時に、フロントエンドへリアルタイム通知を送るためのサーバー送信イベント (SSE) を実装しました。</p>
+                    <div class="p-4 bg-slate-900 text-slate-100 rounded-lg">
+                        <p class="text-sm font-semibold mb-2">イベントペイロードの共通フォーマット</p>
+                        <pre><code class="language-json">{
+    "ivent": "<イベント名>",
+    "message": "<日本語メッセージ>"
+}</code></pre>
+                        <p class="text-xs text-slate-300 mt-2">ペイロードはイベント名とメッセージのみを含みます。追加情報が必要な場合は該当エンドポイントを GET してください。</p>
+                    </div>
+                    <h3 class="text-lg font-semibold mt-6 mb-2">イベントと対応API</h3>
+                    <table class="w-full text-left border-collapse text-sm">
+                        <thead>
+                            <tr>
+                                <th class="border-b-2 p-2">イベント名</th>
+                                <th class="border-b-2 p-2">対象API</th>
+                                <th class="border-b-2 p-2">トリガー条件</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td class="border-b p-2 font-mono">sse:connected</td>
+                                <td class="border-b p-2">SSEクライアントが接続（または再接続）したとき</td>
+                                <td class="border-b p-2">接続確立時に送信されるハンドシェイク用イベント</td>
+                            </tr>
+                            <tr>
+                                <td class="border-b p-2 font-mono">plc:logReceived</td>
+                                <td class="border-b p-2"><a href="#post-plc-data" class="text-indigo-600 underline">POST /api/ingress/plc</a></td>
+                                <td class="border-b p-2">PLC ログを受け付けて永続化した直後</td>
+                            </tr>
+                            <tr>
+                                <td class="border-b p-2 font-mono">machine:started</td>
+                                <td class="border-b p-2"><a href="#start-machine" class="text-indigo-600 underline">POST /api/machines/{id}/start</a></td>
+                                <td class="border-b p-2">機械の稼働開始を記録した直後</td>
+                            </tr>
+                            <tr>
+                                <td class="border-b p-2 font-mono">production:lotIncremented</td>
+                                <td class="border-b p-2"><a href="#increment-production" class="text-indigo-600 underline">POST /api/machines/{id}/increment-production</a></td>
+                                <td class="border-b p-2">生産数を +1 し、lot_id を進めた直後</td>
+                            </tr>
+                            <tr>
+                                <td class="border-b p-2 font-mono">inspection:imageUploaded</td>
+                                <td class="border-b p-2"><a href="#post-before-inspection-image" class="text-indigo-600 underline">POST /api/ingress/inspection/{lot_id}</a></td>
+                                <td class="border-b p-2">【A層】検査前画像を受信して保存した直後</td>
+                            </tr>
+                            <tr>
+                                <td class="border-b p-2 font-mono">inspection:resultUpdated</td>
+                                <td class="border-b p-2"><a href="#put-after-inspection-data" class="text-indigo-600 underline">PUT /api/ingress/inspection/result/{filename}</a></td>
+                                <td class="border-b p-2">【A層】検査後データを更新し終えた直後</td>
+                            </tr>
+                            <tr>
+                                <td class="border-b p-2 font-mono">inspection:batchUploaded</td>
+                                <td class="border-b p-2"><a href="#post-before-inspection-image2" class="text-indigo-600 underline">POST /api/ingress/inspection/batch/{lot_id}</a></td>
+                                <td class="border-b p-2">【ばねどめ】ロット単位の一括登録が完了した直後</td>
+                            </tr>
+                            <tr>
+                                <td class="border-b p-2 font-mono">inspection:lotReset</td>
+                                <td class="border-b p-2"><a href="#reset-inspection-status" class="text-indigo-600 underline">POST /api/ingress/inspection/{lot_id}/reset</a></td>
+                                <td class="border-b p-2">ロットを再検査待ちへ戻した直後</td>
+                            </tr>
+                            <tr>
+                                <td class="border-b p-2 font-mono">inspection:lotDeleted</td>
+                                <td class="border-b p-2"><a href="#delete-lot" class="text-indigo-600 underline">DELETE /api/ingress/inspection/{lot_id}</a></td>
+                                <td class="border-b p-2">ロットと付随リソースを削除した直後</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                    <p class="text-xs text-slate-500 mt-4">バックエンドの全イベント一覧は <code>docs/API設計/sse-events.md</code> を参照してください。</p>
+                </div>
+            </section>
+
+            <!-- 1. 機械系DB設計 -->
+            <section id="db-design">
+                <h2 class="text-2xl font-bold border-b-2 border-indigo-500 pb-2 mb-4">1. 機械系DB設計</h2>
+                <div class="bg-white p-6 rounded-lg shadow-md">
+                    <h3 class="text-lg font-semibold mt-6 mb-2">machine_logs（機械エラーログ）</h3>
+                    <pre><code class="language-sql">CREATE TABLE machine_logs (
+    log_id SERIAL PRIMARY KEY,                                           -- ログID
+    machine_name VARCHAR(100) NOT NULL,                                  -- 対象機械NAME
+    timestamp TIMESTAMP DEFAULT CURRENT_TIMESTAMP,                       -- 発生時刻
+    log_type VARCHAR(10) CHECK (log_type IN ('error','warning','info')), -- 種別
+    title VARCHAR(100) NOT NULL,                                         -- ログタイトル（コード + 概要）
+    message TEXT,                                                        -- 詳細メッセージ
+    
+);</code></pre>
+                    <div class="mt-2 text-sm text-slate-600">
+                        <p>POST <code>/api/ingress/plc</code> で受け取る各種ログ情報をこのテーブルに保存します。</p>
+                    </div>
+                </div>
+            </section>
+
+            <!-- 2. 画像系DB設計 -->
+            <section id="image-db-design">
+                <h2 class="text-2xl font-bold border-b-2 border-indigo-500 pb-2 mb-4">2. 画像系DB設計</h2>
+                <div class="bg-white p-6 rounded-lg shadow-md">
+                    <p class="mb-4">画像系データはセクション・ロット・カメラショットの3階層で管理します。以下はテーブル定義例です。</p>
+
+                    <h3 class="text-lg font-semibold mt-4 mb-2">inspection_sections（セクション正規化）</h3>
+                    <pre><code class="language-sql">CREATE TABLE inspection_sections (
+    section_id SERIAL PRIMARY KEY,                       -- セクションID（内部連番）
+    section_code VARCHAR(32) UNIQUE NOT NULL,            -- セクション内部コード（例: 'spring', 'alayer'）
+    section_name VARCHAR(64) NOT NULL                    -- セクション表示名（例: 'バネ留め', 'A層検査'）
+);</code></pre>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">inspection_lots（ロット/製品ID）</h3>
+                    <pre><code class="language-sql">CREATE TABLE inspection_lots (
+    id BIGSERIAL PRIMARY KEY,                                       -- ロット内部ID（連番）
+    lot_id VARCHAR(64) NOT NULL,                                    -- ロットID（製品ID等、例: 'MAT-10001'）
+    section_code VARCHAR(32) NOT NULL,                              -- セクション内部コード（例: 'spring'）
+    captured_at TIMESTAMP WITH TIME ZONE NOT NULL,                  -- 検査代表時刻（最初/最後のいずれか）
+    UNIQUE (lot_id)                                                 -- ロットIDは一意
+);</code></pre>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">inspection_camera_shots（カメラショット）</h3>
+                    <pre><code class="language-sql">CREATE TABLE inspection_camera_shots (
+    id BIGSERIAL PRIMARY KEY,                                                   -- ショット内部ID（連番）
+    lot_id_ref BIGINT NOT NULL REFERENCES inspection_lots(id) ON DELETE CASCADE,-- ロット参照ID
+    camera_id VARCHAR(64) NOT NULL,                                             -- カメラID（例: 'B-spring01', 'A-main01'）
+    status VARCHAR(16) NOT NULL CHECK (status IN ('PASS','FAIL','MISSING')),    -- 判定ステータス
+    details TEXT NULL,                                                          -- 不良理由等（PASS時はNULL推奨）
+    image_path TEXT NULL,                                                       -- 画像パス（MISSING時はNULL可）
+    shot_seq INT NOT NULL DEFAULT 1,                                            -- 同一カメラ内の通番（1..n）
+    captured_at TIMESTAMP WITH TIME ZONE NULL                                   -- ショット撮影時刻
+);</code></pre>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">インデックス例</h3>
+                    <pre><code class="language-sql">CREATE INDEX idx_lots_section_date ON inspection_lots (section_code, date(captured_at) DESC, captured_at DESC); -- セクション＋日付検索用
+CREATE INDEX idx_shots_lot ON inspection_camera_shots (lot_id_ref);                                             -- ロット単位検索用
+CREATE INDEX idx_shots_camera ON inspection_camera_shots (camera_id);                                           -- カメラ単位検索用
+</code></pre>
+                </div>
+            </section>
+
+            <!-- 3. PLC情報送信 -->
+            <section id="post-plc-data">
+                <h2 class="text-2xl font-bold border-b-2 border-indigo-500 pb-2 mb-4">3. PLCログ情報送信 (PLC通信JETSON → サーバー)
+                </h2>
+                <div class="bg-white p-6 rounded-lg shadow-md">
+                    <div class="flex items-center space-x-4 mb-4">
+                        <span class="method-badge post">POST</span>
+                        <span class="font-mono text-lg font-semibold">/api/ingress/plc</span>
+                        <span class="bg-orange-500 text-white px-3 py-1 rounded-full text-sm font-bold">優先度: A</span>
+                    </div>
+                    <p class="mb-4">生産機械 (PLC)
+                        からの様々な情報をサーバーに送信するための汎用APIです。エラー、起動通知、消耗品（ホックリングなど）の残量警告など、あらゆる種類のログをこのエンドポイントで受け付けます。</p>
+                    <h3 class="text-lg font-semibold mt-6 mb-2">リクエストボディ</h3>
+                    <p class="text-sm mb-2">送信する情報の種類に応じて <code>log_type</code> を使い分けます。（例: <code>info</code>,
+                        <code>warning</code>, <code>error</code>）
+                    </p>
+                    <pre><code class="language-json">{
+    "timestamp": "2025-07-15T10:15:32Z",
+    "machine_name":"半自動バネどめ機",
+    "log_type": "error",
+    "title": "E-102: トルク過負荷",
+    "message": "モーターの負荷が規定値を超えました。"
+}</code></pre>
+                    <h3 class="text-lg font-semibold mt-6 mb-2">成功レスポンス (202 Accepted)</h3>
+                    <p class="text-sm">サーバーはデータを受領すると即座に受付応答を返し、バックグラウンドで処理を継続します。そのため、ステータスコードは
+                        <code>202 Accepted</code> が適切です。
+                    </p>
+                    <pre><code class="language-json">{
+    "message": "データを受け付けました。処理を開始します。"
+}</code></pre>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">SSEイベント</h3>
+                    <p class="text-sm mb-2">ログを受け付けると <code>plc:logReceived</code> を配信し、監視UIへ反映させます。</p>
+                    <pre><code class="language-json">{
+    "ivent": "plc:logReceived",
+    "message": "PLCログが受信されました"
+}</code></pre>
+                    <p class="text-xs text-slate-600 mt-2">イベントは要約のみを通知するため、詳細表示時は最新ログを再取得してください。</p>
+                </div>
+            </section>
+
+            <!-- 4. 機械の稼働開始 -->
+            <section id="start-machine">
+                <h2 class="text-2xl font-bold border-b-2 border-indigo-500 pb-2 mb-4">4. 機械の稼働開始</h2>
+                <div class="bg-white p-6 rounded-lg shadow-md">
+                    <div class="flex items-center space-x-4 mb-4">
+                        <span class="method-badge post">POST</span>
+                        <span class="font-mono text-lg font-semibold">/api/machines/{id}/start</span>
+                        <span class="bg-orange-500 text-white px-3 py-1 rounded-full text-sm font-bold">優先度: B</span>
+                    </div>
+                    <p class="mb-4">機械の稼働を開始したときに呼ぶAPI。開始時刻を記録するのに使う</p>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">成功レスポンス (200 OK)</h3>
+                    <pre><code class="language-json">{
+    "started_at": "2025-07-15T08:00:00Z"
+}</code></pre>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">SSEイベント</h3>
+                    <p class="text-sm mb-2">稼働開始を登録すると <code>machine:started</code> を配信してダッシュボードへ通知します。</p>
+                    <pre><code class="language-json">{
+    "ivent": "machine:started",
+    "message": "機械の稼働が開始されました"
+}</code></pre>
+                    <p class="text-xs text-slate-600 mt-2">稼働状況の最新情報が必要な場合は対象機械の状態 API を再取得してください。</p>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">エラーレスポンス (404 Not Found)</h3>
+                    <pre><code class="language-json">{
+    "error": "Machine not found"
+}</code></pre>
+                </div>
+            </section>
+
+            <!-- 5. 生産数をインクリメント -->
+            <section id="increment-production">
+                <h2 class="text-2xl font-bold border-b-2 border-indigo-500 pb-2 mb-4">5. 生産数をインクリメント（lot_idも加算）</h2>
+                <div class="bg-white p-6 rounded-lg shadow-md">
+                    <div class="flex items-center space-x-4 mb-4">
+                        <span class="method-badge post">POST</span>
+                        <span
+                            class="font-mono text-lg font-semibold">/api/machines/{id}/increment-production?section={section}</span>
+                        <span class="bg-orange-500 text-white px-3 py-1 rounded-full text-sm font-bold">優先度: A</span>
+                    </div>
+                    <p class="mb-4">製品が1個完成するたびに、このAPIを呼び出して <strong>機械の当日累計</strong> を +1
+                        します。<br>追加で、<strong>指定した検査セクション（section）</strong>で現在生産中の <code>lot_id</code> の
+                        <strong>lot_id</strong> も +1 します。</p>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">クエリパラメータ（section は必須）</h3>
+                    <table class="w-full text-left border-collapse">
+                        <thead>
+                            <tr>
+                                <th class="border-b-2 p-2">パラメータ</th>
+                                <th class="border-b-2 p-2">説明</th>
+                                <th class="border-b-2 p-2">例</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td class="border-b p-2 font-mono">section（必須）</td>
+                                <td class="border-b p-2">検査セクション（内部コード）。許可値: <code>spring</code>（バネ留め）,
+                                    <code>alayer</code>（A層）。</td>
+                                <td class="border-b p-2 font-mono">?section=spring / ?section=alayer</td>
+                            </tr>
+                        </tbody>
+                    </table>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">成功レスポンス (200 OK)</h3>
+                    <pre><code class="language-json">{
+    "today_production_count": 1521,
+    "lot_id": "MAT-00123",
+}</code></pre>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">SSEイベント</h3>
+                    <p class="text-sm mb-2">成功時にリアルタイム通知 <code>production:lotIncremented</code> を配信します。</p>
+                    <pre><code class="language-json">{
+    "ivent": "production:lotIncremented",
+    "message": "生産数がインクリメントされました"
+}</code></pre>
+                    <p class="text-xs text-slate-600 mt-2">最新状況が必要な場合は該当エンドポイントを再度 GET してください。</p>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">エラーレスポンス</h3>
+                    <p class="text-sm mb-1">400 Bad Request（<code>section</code> が未指定または不正な値）</p>
+                    <pre><code class="language-json">{
+    "error": "Bad Request",
+    "details": [
+        "クエリパラメータ 'section' は必須です（spring または alayer を指定してください）。"
+    ]
+}</code></pre>
+                    <p class="text-sm mb-1">404 Not Found（指定された <code>id</code> の機械が存在しない）</p>
+                    <pre><code class="language-json">{
+    "error": "Machine not found"
+}</code></pre>
+                    <p class="text-sm mb-1">409 Conflict（指定セクションに現在生産中のロットが存在しない）</p>
+                    <pre><code class="language-json">{
+    "error": "No active lot",
+    "details": "指定セクションに現在生産中のロットがありません。"
+}</code></pre>
+                </div>
+            </section>
+
+            <!-- 6. 検査前画像の送信 -->
+            <section id="post-before-inspection-image">
+                <h2 class="text-2xl font-bold border-b-2 border-indigo-500 pb-2 mb-4">6.
+                    【検査前】画像アップロード（lot_id指定・単発）(A層検査用)</h2>
+                <div class="bg-white p-6 rounded-lg shadow-md">
+                    <div class="flex items-center space-x-4 mb-4">
+                        <span class="method-badge post">POST</span>
+                        <span class="font-mono text-lg font-semibold">/api/ingress/inspection/{lot_id}</span>
+                        <span class="bg-teal-500 text-white px-3 py-1 rounded-full text-sm font-bold">特に重要</span>
+                    </div>
+                    <p class="mb-4">
+                        Jetson から <strong>1枚の検査前画像</strong> をアップロードします。<br>
+                        <strong>lot_id はサーバー側で採番</strong> されます。検査機は
+                        <code>/api/ingress/inspection/current-lot?section={section}</code> で取得した lot_id を本APIの
+                        <strong>パスパラメータ</strong> <code>{lot_id}</code> に指定してください。
+                    </p>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">lot_id のルールについて</h3>
+                    <div class="p-4 bg-indigo-100 border-l-4 border-indigo-500 text-indigo-700 rounded-r-lg mb-4">
+                        <p class="font-bold">ロットIDの命名規則</p>
+                        <p class="text-sm mt-1">lot_id はサーバー側で採番されます（生産数インクリメントのフローで作成/更新）。検査機は <code>current-lot</code>
+                            API で参照して利用してください。</p>
+                        <ul class="list-disc list-inside mt-2 text-sm font-mono">
+                            <li><code>spring</code>（バネ留め）系 → 例: <code>MAT-00001</code>, <code>MAT-00002</code>, ...</li>
+                            <li><code>alayer</code>（A層検査）系 → 例: <code>LOLL-00001</code>, <code>LOLL-00002</code>, ...
+                            </li>
+                        </ul>
+                    </div>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">画像ファイルの保存ルール</h3>
+                    <div class="p-4 bg-green-100 border-l-4 border-green-500 text-green-700 rounded-r-lg mb-4">
+                        <p class="font-bold">ファイル名はサーバーが自動で決定します</p>
+                        <p class="text-sm mt-1">
+                            受け取った
+                            <code>lot_id</code>（パス）とメタデータ（<code>camera_id</code>・<code>4K_seq</code>・<code>FHD_seq</code>）からファイル名を生成します。検査後更新のキーとして利用します。
+                        </p>
+                        <p class="text-sm mt-2 font-mono bg-green-200 p-2 rounded">
+                            <strong>フォーマット:</strong> {lot_id}_{camera_id}_{4K_seq}_{FHD_seq}.png<br>
+                            <strong>保存先フォルダ:</strong> g3-webapp-back-2025/var/imageDB/beforeTest/<br>
+                            <strong>保存例:</strong>
+                            g3-webapp-back-2025/var/imageDB/beforeTest/MAT-00125_B-spring01_A-4_D-5.png
+                        </p>
+                        <p class="text-xs text-slate-600 mt-2">
+                            2025-12 メモ: 物理保存先を <code>g3-webapp-back-2025/var/imageDB</code> に移動しました（従来は
+                            <code>public/imageDB</code>）。URL 生成の遅延対策です。
+                        </p>
+                    </div>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">リクエスト形式</h3>
+                    <p class="text-sm mb-2"><code>multipart/form-data</code>
+                        で、JSONデータと画像を一緒に送ってください（<strong>単発アップロード</strong>）。</p>
+                    <ul class="list-disc list-inside text-sm space-y-1 mb-4">
+                        <li>パート1: <code>metadata</code> — JSON（<code>camera_id</code>, <code>section_code</code>,
+                            <code>4K_seq</code>, <code>FHD_seq</code> など）</li>
+                        <li>パート2: <code>image</code> — 検査前の画像ファイル（PNG推奨）</li>
+                    </ul>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2"><code>metadata</code> パートのJSON例</h3>
+                    <p class="text-sm mb-2">1回のアップロードにつき 1 ショット分の情報を送ります（<code>shot_seq</code> は廃止）。</p>
+                    <div class="code-block-wrapper">
+                        <pre><code class="language-json">{
+    "section_code": "spring",
+    "camera_id": "B-spring01",
+    "4K_seq": "A-4",
+    "FHD_seq": "D-5",
+    "captured_at": "2025-09-12T05:09:02Z"
+}</code></pre>
+                    </div>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">Pythonでの送信コード例</h3>
+                    <div class="code-block-wrapper">
+                        <pre><code class="language-python">
+import requests
+import json
+
+lot_id = "MAT-00125"
+url = f"http://10.100.54.170:3001/api/ingress/inspection/{lot_id}"
+
+metadata = {
+    "section_code": "spring",
+    "camera_id": "B-spring01",
+    "4K_seq": "A-4",
+    "FHD_seq": "D-5",
+    "captured_at": "2025-09-12T05:09:02Z"
+}
+
+files = {
+    'metadata': (None, json.dumps(metadata), 'application/json'),
+    'image': ("before.png", open('/path/to/before.png', 'rb'), 'image/png')
+}
+
+resp = requests.post(url, files=files, timeout=10)
+print(f"ステータスコード: {resp.status_code}")
+print("レスポンス:", resp.json())
+</code></pre>
+                    </div>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">成功レスポンス (201 Created)</h3>
+                    <p class="text-sm">
+                        登録に成功すると、サーバーから <code>lot_id</code> と生成された <code>filename</code>（検査前画像のファイル名）が返却されます。
+                    </p>
+                    <pre><code class="language-json">{
+    "message": "検査前画像を登録しました",
+    "lot_id": "MAT-00125",
+    "filename": "MAT-00125_B-spring01_A-4_D-5.png"
+}</code></pre>
+                    <h3 class="text-lg font-semibold mt-6 mb-2">SSEイベント</h3>
+                    <p class="text-sm mb-2">登録完了後に <code>inspection:imageUploaded</code> を即時通知します。</p>
+                    <pre><code class="language-json">{
+    "ivent": "inspection:imageUploaded",
+    "message": "検査前画像がアップロードされました"
+}</code></pre>
+                    <p class="text-xs text-slate-600 mt-2">イベントは要約情報のみを保持するため、必要に応じて検査データを再取得してください。</p>
+                </div>
+            </section>
+
+            <!-- 7. 検査後データと画像の送信 -->
+            <section id="put-after-inspection-data">
+                <h2 class="text-2xl font-bold border-b-2 border-orange-500 pb-2 mb-4">7.
+                    【検査後】結果と画像の送信（filename指定・単発）（A層検査用）</h2>
+                <div class="bg-white p-6 rounded-lg shadow-md">
+                    <div class="flex items-center space-x-4 mb-4">
+                        <span class="method-badge put">PUT</span>
+                        <span class="font-mono text-lg font-semibold">/api/ingress/inspection/result/{filename}</span>
+                        <span class="bg-pink-500 text-white px-3 py-1 rounded-full text-sm font-bold">これも特に重要</span>
+                    </div>
+                    <p class="mb-4">
+                        検査が完了したら、その結果（OK/NGなど）と、任意で <strong>検査後画像</strong> を単発で送信します。<br>
+                        対象は <strong>パスの {filename}</strong> で特定します（例: <code>MAT-00123_B-spring01_A-4_D-5.png</code>）。
+                    </p>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">画像ファイルの保存ルール</h3>
+                    <div class="p-4 bg-sky-100 border-l-4 border-sky-500 text-sky-700 rounded-r-lg mb-4">
+                        <p class="font-bold">検査前と同じファイル名（拡張子 .png）で別フォルダに保存</p>
+                        <p class="text-sm mt-1">
+                            検査後の画像は検査前と同一の命名ルールで、別フォルダに保存します。ビフォーアフターの対応が明確になります。
+                        </p>
+                        <p class="text-sm mt-2 font-mono bg-sky-200 p-2 rounded">
+                            <strong>保存先フォルダ:</strong> g3-webapp-back-2025/var/imageDB/afterTest/<br>
+                            <strong>保存例:</strong>
+                            g3-webapp-back-2025/var/imageDB/afterTest/MAT-00123_B-spring01_A-4_D-5.png
+                        </p>
+                    </div>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">リクエスト形式</h3>
+                    <p class="text-sm mb-2"><code>multipart/form-data</code> で、JSONデータと画像を同時に送信します。</p>
+                    <ul class="list-disc list-inside text-sm space-y-1 mb-4">
+                        <li>パート1: <code>metadata</code> — 検査結果のJSON（<strong>必須: <code>status</code></strong>、任意:
+                            <code>details</code>, <code>captured_at</code>）</li>
+                        <li>パート2: <code>image</code> — 検査後の画像ファイル（任意、PNG推奨）</li>
+                    </ul>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2"><code>metadata</code> パートのJSON例</h3>
+                    <p class="text-sm mb-2">検査結果の詳細を JSON で送ります（<code>shot_seq</code> は廃止）。</p>
+                    <div class="code-block-wrapper">
+                        <pre><code class="language-json">{
+    "status": "FAIL",
+    "details": "傷あり",
+    "captured_at": "2025-09-12T05:12:45Z"
+}</code></pre>
+                    </div>
+                    <p class="text-xs text-slate-600 mt-2">
+                        2025-12 メモ: 検査機から送信する <code>status</code> は <strong>PASS</strong> または <strong>FAIL</strong>
+                        のみを想定しています。未検査ショットはサーバー側で自動的に <code>MISSING</code> を付与するため、クライアントで <code>MISSING</code>
+                        を送る必要はありません。
+                    </p>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">Pythonでの送信コード例</h3>
+                    <div class="code-block-wrapper">
+                        <pre><code class="language-python">
+import requests
+import json
+import datetime
+
+filename = 'MAT-00123_B-spring01_A-4_D-5.png'
+url = f"http://10.100.54.170:3001/api/ingress/inspection/result/{filename}"
+
+metadata = {
+    "status": "FAIL",
+    "details": "傷あり",
+    "captured_at": datetime.datetime.now(datetime.timezone.utc).isoformat()
+}
+
+files = {
+    'metadata': (None, json.dumps(metadata), 'application/json'),
+    'image': ("after.png", open('/path/to/after.png', 'rb'), 'image/png')
+}
+
+resp = requests.put(url, files=files, timeout=10)
+print(f"ステータスコード: {resp.status_code}")
+print("レスポンス:", resp.json())
+                        </code></pre>
+                    </div>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">成功レスポンス (200 OK)</h3>
+                    <p class="text-sm">データ更新が成功すると、サーバーから処理完了を示す応答が返ります。</p>
+                    <pre><code class="language-json">{
+    "message": "検査結果を更新しました",
+    "filename": "MAT-00123_B-spring01_A-4_D-5.png"
+}</code></pre>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">SSEイベント</h3>
+                    <p class="text-sm mb-2">更新成功後は <code>inspection:resultUpdated</code> を配信してクライアントへ通知します。</p>
+                    <pre><code class="language-json">{
+    "ivent": "inspection:resultUpdated",
+    "message": "検査結果が更新されました"
+}</code></pre>
+                    <p class="text-xs text-slate-600 mt-2">追加データが必要なときは対象ロットの詳細を GET してください。</p>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">エラーレスポンス (404 Not Found)</h3>
+                    <p class="text-sm">対象の検査前データが見つからない場合に返ります。</p>
+                    <pre><code class="language-json">{
+    "error": "Not Found",
+    "details": "指定された lot_id / camera_id / 4K_seq / FHD_seq に一致する検査前データが見つかりません。"
+}</code></pre>
+                </div>
+            </section>
+
+            <!-- 7. 画像のアクセス方法 -->
+            <section id="get-image-direct">
+                <h2 class="text-2xl font-bold border-b-2 border-indigo-500 pb-2 mb-4">8. 画像のアクセス方法</h2>
+                <div class="bg-white p-6 rounded-lg shadow-md">
+                    <div class="flex items-center space-x-4 mb-4">
+                        <span class="method-badge get">GET</span>
+                        <span class="font-mono text-lg font-semibold">/imageDB/{test_type}/{filename}</span>
+                    </div>
+                    <p class="mb-4">
+                        サーバー側で画像保存フォルダ (例: <code>var/imageDB</code>・旧 <code>public/imageDB</code>)
+                        を静的ファイルとして公開することで、画像に直接アクセスできます。<br>
+                        検査前後の画像は、同じファイル名で <code>beforeTest</code> と <code>afterTest</code>
+                        ディレクトリに保存されているため、パスを切り替えるだけで両方を確認できます。
+                    </p>
+                    <h3 class="text-lg font-semibold mt-6 mb-2">アクセスURLの例</h3>
+                    <p class="text-sm mb-2">ファイル名は <code>{lot_id}_{camera_id}_{4K_seq}_{FHD_seq}.png</code> の形式です。</p>
+                    <pre><code class="language-plaintext">http://10.100.54.170:3001/imageDB/beforeTest/MAT-00123_B-spring01_A-4_D-5.png
+http://10.100.54.170:3001/imageDB/afterTest/MAT-00123_B-spring01_A-4_D-5.png</code></pre>
+                </div>
+            </section>
+
+            <!-- 8. 未検査ロットIDと画像ファイルパスの取得（読み取り専用・最小） -->
+            <section id="get-uninspected-lot-ids">
+                <h2 class="text-2xl font-bold border-b-2 border-indigo-500 pb-2 mb-4">9.
+                    未検査ロットIDと画像ファイルパスの取得（Jetson用／副作用なし）</h2>
+                <div class="bg-white p-6 rounded-lg shadow-md">
+                    <div class="flex items-center space-x-4 mb-4">
+                        <span class="method-badge get">GET</span>
+                        <span class="font-mono text-lg font-semibold">/api/ingress/inspection/uninspected-lot-ids</span>
+                        <span class="bg-sky-500 text-white px-3 py-1 rounded-full text-sm font-bold">最小仕様（ID +
+                            ファイルパス）</span>
+                    </div>
+
+                    <p class="mb-4">Jetson に <strong>未検査の lot_id と、そのロットに紐づく画像ファイルパス</strong>
+                        を返します。読み取り専用で、予約・ロック・状態変更などの副作用は一切ありません。</p>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">クエリパラメータ（section は必須）</h3>
+                    <table class="w-full text-left border-collapse">
+                        <thead>
+                            <tr>
+                                <th class="border-b-2 p-2">パラメータ</th>
+                                <th class="border-b-2 p-2">説明</th>
+                                <th class="border-b-2 p-2">例</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td class="border-b p-2 font-mono">section（必須）</td>
+                                <td class="border-b p-2">検査セクション（内部コード）。例: <code>spring</code>（バネ留め）,
+                                    <code>alayer</code>（A層）。
+                                </td>
+                                <td class="border-b p-2 font-mono">?section=spring</td>
+                            </tr>
+                        </tbody>
+                    </table>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">レスポンス</h3>
+                    <p class="text-sm mb-2">200 OK（最小構成） — 各ロットごとに <code>lot_id</code> とそのロットに紐づく画像ファイルパス配列を返します。</p>
+                    <pre><code class="language-json">{
+    "lots": [
+    {
+        "lot_id": "MAT-00123",
+        "image_paths": [
+        "/imageDB/beforeTest/MAT-00123_B-spring01_A-4_D-5.png",
+        "/imageDB/beforeTest/MAT-00123_B-spring02_A-4_D-5.png"
+        ]
+    },
+    {
+        "lot_id": "MAT-00124",
+        "image_paths": [
+        "/imageDB/beforeTest/MAT-00124_B-spring01_A-7_D-3.png"
+        ]
+    }
+    ]
+}</code></pre>
+
+                    <p class="text-sm mt-4 mb-1">400 Bad Request（<code>section</code> が指定されていない場合）</p>
+                    <pre><code class="language-json">{
+    "error": "Bad Request",
+    "details": [
+    "クエリパラメータ 'section' は必須です。"
+    ]
+}</code></pre>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">返却ポリシー</h3>
+                    <ul class="list-disc list-inside text-sm space-y-1">
+                        <li>読み取り専用。サーバー側で予約・ロック・状態変更は行いません。</li>
+                        <li>返却される情報はサーバーが把握する「未検査」状態のスナップショットです（ID とファイルパス）。</li>
+                        <li>各エントリはオブジェクト形式で、<code>lot_id</code> と <code>image_paths</code>（配列）を含みます。画像がない場合は空配列になります。
+                        </li>
+                        <li>並び順は作成日時の昇順（古い未検査から）。</li>
+                        <li>返却されるファイルパスはサーバーの公開パス（相対パスまたは絶対URL）。Jetson 側でアクセスする場合、<code>NEXT_PUBLIC_BASE_PATH</code>
+                            相当の接頭辞が必要な場合があります — 配置環境に合わせて利用してください。</li>
+                        <li><code>section</code> は必須。指定セクションのみを返します。</li>
+                    </ul>
+                </div>
+            </section>
+
+            <!-- 10. 検査結果一括登録(ばねどめ検査用) -->
+            <section id="post-before-inspection-image2">
+                <h2 class="text-2xl font-bold border-b-2 border-indigo-500 pb-2 mb-4">10. 検査結果一括登録(ばねどめ検査用)</h2>
+                <div class="bg-white p-6 rounded-lg shadow-md">
+                    <div class="flex items-center space-x-4 mb-4">
+                        <span class="method-badge post">POST</span>
+                        <span class="font-mono text-lg font-semibold">/api/ingress/inspection/batch/{lot_id}</span>
+                        <span class="bg-teal-500 text-white px-3 py-1 rounded-full text-sm font-bold">特に重要</span>
+                    </div>
+                    <p class="mb-4">
+                        6,7のAPIを一つにまとめたもの｡ lot_idを指定してそこに検査結果を書き込みます｡
+                    </p>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">リクエスト形式</h3>
+                    <p class="text-sm mb-2"><code>multipart/form-data</code> で、JSONデータと画像を同時に送信します。</p>
+                    <ul class="list-disc list-inside text-sm space-y-1 mb-4">
+                        <li>パート1: <code>metadata</code> というキーで、検査結果のJSONを送る。</li>
+                        <li>パート2: <code>beforeImage</code> というキーで、検査前の画像ファイルを送る。</li>
+                        <li>パート3: <code>afterImage</code> というキーで、検査後の画像ファイルを送る。</li>
+                    </ul>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2"><code>metadata</code> パートのJSON例</h3>
+                    <p class="text-sm mb-2">1ロットに関する全カメラショットの情報を、shots 配列にまとめて格納します。</p>
+                    <div class="code-block-wrapper">
+                        <pre><code class="language-json">{
+    "lot_id": "MAT-00123",
+    "section_code": "spring",
+    "camera_id": "B-spring01",
+    "status": "FAIL",
+    "details": "固定不良",
+    "shot_seq": 1
+}</code></pre>
+                    </div>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">Pythonでの送信コード例</h3>
+                    <div class="code-block-wrapper">
+                        <pre><code class="language-python">
+import requests
+import json
+import datetime
+
+lot_id = "MAT-00123"
+url = f"http://10.100.54.170:3001/api/ingress/inspection/{lot_id}"
+
+# 送信するメタデータを作成（ロット全体のショット配列）
+metadata = {
+    "lot_id": "MAT-00123",
+    "section_code": "spring",
+    "camera_id": "B-spring01",
+    "status": "FAIL",
+    "details": "固定不良",
+    "shot_seq": 1
+}
+
+# multipart/form-data で metadata + 検査前/後の画像を同時送信
+files = {
+    "metadata": (None, json.dumps(metadata), "application/json"),
+    "beforeImage": (f"{lot_id}_before.jpg", open("/path/to/before.jpg", "rb"), "image/jpeg"),
+    "afterImage": (f"{lot_id}_after.jpg", open("/path/to/after.jpg", "rb"), "image/jpeg"),
+}
+
+response = requests.post(url, files=files, timeout=10)
+
+print(f"ステータスコード: {response.status_code}")
+try:
+    print("レスポンス:", response.json())
+except Exception:
+    print("レスポンス:", response.text)
+</code></pre>
+                    </div>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">成功レスポンス (201 Created)</h3>
+                    <p class="text-sm">
+                        データ登録が成功すると、サーバーから新しい <code>lot_id</code> とサーバー側で付与した <code>filename</code> が返却されます。このファイル名は後続処理で使用するため、確実に保持してください。
+                    </p>
+                    <pre><code class="language-json">{
+    "message": "検査結果を登録しました",
+    "lot_id": "MAT-00125",
+    "filename": "MAT-00125_B-spring01_1.jpg"
+}</code></pre>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">SSEイベント</h3>
+                    <p class="text-sm mb-2">一括登録が完了すると <code>inspection:batchUploaded</code> を配信します。</p>
+                    <pre><code class="language-json">{
+    "ivent": "inspection:batchUploaded",
+    "message": "検査結果が一括で登録されました"
+}</code></pre>
+                    <p class="text-xs text-slate-600 mt-2">必要に応じて最新の検査結果を GET し、詳細情報を取得してください。</p>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">エラーレスポンス (404 Not Found)</h3>
+                    <pre><code class="language-json">{
+    "error": "Not Found",
+    "details": "指定された lot_id が見つかりません。"
+}</code></pre>
+                </div>
+
+            </section>
+
+            <!-- 11. 現在生産中の lot_id を取得（最小） -->
+            <section id="get-current-lot-id">
+                <h2 class="text-2xl font-bold border-b-2 border-indigo-500 pb-2 mb-4">11. 現在生産中の lot_id を取得</h2>
+                <div class="bg-white p-6 rounded-lg shadow-md">
+                    <div class="flex items-center space-x-4 mb-4">
+                        <span class="method-badge get">GET</span>
+                        <span
+                            class="font-mono text-lg font-semibold">/api/ingress/inspection/current-lot?section={section}</span>
+                        <span class="bg-sky-500 text-white px-3 py-1 rounded-full text-sm font-bold">最小仕様</span>
+                    </div>
+
+                    <p class="mb-4">生産機械での現在生産中（進行中）のロットIDを <strong>1 件だけ</strong>
+                        返します。<strong>指定した検査セクション（section）</strong>ごとに検索します。読み取り専用で副作用はありません。</p>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">クエリパラメータ（section は必須）</h3>
+                    <table class="w-full text-left border-collapse">
+                        <thead>
+                            <tr>
+                                <th class="border-b-2 p-2">パラメータ</th>
+                                <th class="border-b-2 p-2">説明</th>
+                                <th class="border-b-2 p-2">例</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td class="border-b p-2 font-mono">section（必須）</td>
+                                <td class="border-b p-2">検査セクション（内部コード）。許可値: <code>spring</code>（バネ留め）,
+                                    <code>alayer</code>（A層）。</td>
+                                <td class="border-b p-2 font-mono">?section=spring / ?section=alayer</td>
+                            </tr>
+                        </tbody>
+                    </table>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">レスポンス</h3>
+                    <p class="text-sm mb-2">200 OK — 指定セクションで現在生産中のロットがある場合</p>
+                    <pre><code class="language-json">{
+    "lot_id": "MAT-00123"
+}</code></pre>
+
+                    <p class="text-sm mb-2">204 NG — 指定セクションに現在生産中のロットがない場合</p>
+                    <pre><code class="language-json">{
+    "message": "現在生産しているロットはありません｡"
+}</code></pre>
+
+                    <p class="text-sm mt-4 mb-1">400 Bad Request（<code>section</code> が未指定または不正な値の場合）</p>
+                    <pre><code class="language-json">{
+    "error": "Bad Request",
+    "details": [
+        "クエリパラメータ 'section' は必須です（spring または alayer を指定してください）。"
+    ]
+}</code></pre>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">備考</h3>
+                    <ul class="list-disc list-inside text-sm space-y-1">
+                        <li>読み取り専用。サーバー側で予約・ロック・状態変更は行いません。</li>
+                        <li><code>section</code> は必須。指定セクションのみを対象にします（許可: <code>spring</code>, <code>alayer</code>）。
+                        </li>
+                        <li>戻り値は最小限で <code>lot_id</code> のみです（追加情報は将来拡張）。</li>
+                    </ul>
+                </div>
+            </section>
+
+            <!-- 12. 検査ステータスのリセット -->
+            <section id="reset-inspection-status">
+                <h2 class="text-2xl font-bold border-b-2 border-indigo-500 pb-2 mb-4">12.
+                    検査ステータスのリセット（lot内ショットを一括MISSING化）</h2>
+                <div class="bg-white p-6 rounded-lg shadow-md">
+                    <div class="flex items-center space-x-4 mb-4">
+                        <span class="method-badge post">POST</span>
+                        <span class="font-mono text-lg font-semibold">/api/ingress/inspection/{lot_id}/reset</span>
+                        <span class="bg-rose-500 text-white px-3 py-1 rounded-full text-sm font-bold">再検査の初期化</span>
+                    </div>
+
+                    <p class="mb-4">指定した <code>lot_id</code> に紐づくショットのうち、現在 <code>MISSING</code> 以外のステータスになっている行だけを
+                        <code>MISSING</code> に戻し、<code>details</code> をクリアして再検査待ちの状態へまとめて戻します。</p>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">パスパラメータ</h3>
+                    <table class="w-full text-left border-collapse">
+                        <thead>
+                            <tr>
+                                <th class="border-b-2 p-2">パラメータ</th>
+                                <th class="border-b-2 p-2">説明</th>
+                                <th class="border-b-2 p-2">例</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td class="border-b p-2 font-mono">lot_id（必須）</td>
+                                <td class="border-b p-2">検査対象となるロットID。内部の <code>inspection_lots.id</code> に変換して処理します。
+                                </td>
+                                <td class="border-b p-2 font-mono">
+                                    /api/ingress/inspection/<strong>MAT-00125</strong>/reset</td>
+                            </tr>
+                        </tbody>
+                    </table>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">処理フロー</h3>
+                    <ol class="list-decimal list-inside text-sm space-y-1">
+                        <li>受け取った <code>lot_id</code> から <code>inspection_lots</code> を検索し、内部ID
+                            (<code>lot_id_ref</code>) を取得。</li>
+                        <li>該当ロットに紐づく <code>inspection_camera_shots</code> のうち、<code>status</code> が
+                            <code>MISSING</code> 以外の行のみを更新。</li>
+                        <li>更新対象の行を <code>status = 'MISSING'</code>, <code>details = NULL</code> にセットし、更新件数をレスポンスで返却。
+                        </li>
+                        <li>リセット対象となったショットのうち、検査後画像 (<code>var/imageDB/afterTest/{filename}</code>・公開URLは
+                            <code>/imageDB/afterTest/{filename}</code>) が存在するものは物理ファイルも削除。検査前画像は保持し、再検査で再利用できるようにする。
+                        </li>
+                    </ol>
+                    <p class="text-sm mt-2 text-slate-600">※ すでに全ショットが <code>MISSING</code> の場合は更新件数 0 のまま成功レスポンスになります。
+                    </p>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">成功レスポンス (200 OK)</h3>
+                    <pre><code class="language-json">{
+    "message": "検査ステータスをリセットしました。",
+    "lot_id": "MAT-00125",
+    "updated_count": 18
+}</code></pre>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">SSEイベント</h3>
+                    <p class="text-sm mb-2">リセット完了後に <code>inspection:lotReset</code> を通知します。</p>
+                    <pre><code class="language-json">{
+    "ivent": "inspection:lotReset",
+    "message": "検査ロットがリセットされました"
+}</code></pre>
+                    <p class="text-xs text-slate-600 mt-2">更新後のショット一覧を反映する場合はロット詳細を再取得してください。</p>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">エラーレスポンス</h3>
+                    <p class="text-sm mb-1">404 Not Found（指定された <code>lot_id</code> が存在しない）</p>
+                    <pre><code class="language-json">{
+    "error": "Not Found",
+    "details": "指定された lot_id (MAT-09999) が見つかりません。"
+}</code></pre>
+
+                    <p class="text-sm mt-4 mb-1">500 Internal Server Error（DB例外など想定外エラー）</p>
+                    <pre><code class="language-json">{
+    "error": "Internal Server Error",
+    "details": "エラー内容"
+}</code></pre>
+                </div>
+            </section>
+
+            <!-- 13. ロットの完全削除 -->
+            <section id="delete-lot">
+                <h2 class="text-2xl font-bold border-b-2 border-indigo-500 pb-2 mb-4">13. 特定ロットの削除（DB + 画像ファイル）</h2>
+                <div class="bg-white p-6 rounded-lg shadow-md">
+                    <div class="flex items-center space-x-4 mb-4">
+                        <span class="method-badge delete">DELETE</span>
+                        <span class="font-mono text-lg font-semibold">/api/ingress/inspection/{lot_id}</span>
+                        <span class="bg-red-600 text-white px-3 py-1 rounded-full text-sm font-bold">危険操作</span>
+                    </div>
+
+                    <p class="mb-4">指定したロットをシステムから完全に削除します。DB上の <code>inspection_camera_shots</code> と
+                        <code>inspection_lots</code> を消去し、対応する検査前後画像も <code>var/imageDB/beforeTest</code> および
+                        <code>var/imageDB/afterTest</code>（公開URLは
+                        <code>/imageDB/*</code>）から除去します。誤実行防止のため、基本的には管理UIからのみ呼び出す想定です。</p>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">パスパラメータ</h3>
+                    <table class="w-full text-left border-collapse">
+                        <thead>
+                            <tr>
+                                <th class="border-b-2 p-2">パラメータ</th>
+                                <th class="border-b-2 p-2">説明</th>
+                                <th class="border-b-2 p-2">例</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td class="border-b p-2 font-mono">lot_id（必須）</td>
+                                <td class="border-b p-2">削除対象ロットのID。内部IDを引いてから削除を実施。</td>
+                                <td class="border-b p-2 font-mono">/api/ingress/inspection/<strong>MAT-00110</strong>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">処理フロー</h3>
+                    <ol class="list-decimal list-inside text-sm space-y-1">
+                        <li><code>inspection_lots</code> から <code>lot_id</code> に一致する行を検索。存在しない場合は 404 を返す。</li>
+                        <li>トランザクションを開始し、該当する <code>inspection_camera_shots</code> を削除後、親ロット
+                            (<code>inspection_lots</code>) を削除。</li>
+                        <li>削除対象ショット一覧からファイル名を導出し、<code>var/imageDB/beforeTest/{filename}</code> と
+                            <code>var/imageDB/afterTest/{filename}</code>（公開URLは <code>/imageDB/*</code>）の物理ファイルを順次削除。
+                        </li>
+                        <li>DB・ファイルどちらかでエラーが起きた場合はロールバックし 500 を返す。</li>
+                    </ol>
+                    <p class="text-sm mt-2 text-slate-600">※ before/after いずれかのファイルが存在しなくても API 自体は成功扱い（削除件数を別途返却）とします。
+                    </p>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">成功レスポンス (200 OK)</h3>
+                    <pre><code class="language-json">{
+    "message": "ロット MAT-00110 を削除しました。"
+}</code></pre>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">SSEイベント</h3>
+                    <p class="text-sm mb-2">削除成功時に <code>inspection:lotDeleted</code> を配信して他クライアントへ同期します。</p>
+                    <pre><code class="language-json">{
+    "ivent": "inspection:lotDeleted",
+    "message": "検査ロットが削除されました"
+}</code></pre>
+                    <p class="text-xs text-slate-600 mt-2">依存画面は通知を受けたら一覧を再取得してください。</p>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">エラーレスポンス</h3>
+                    <p class="text-sm mb-1">404 Not Found（指定ロットが存在しない）</p>
+                    <pre><code class="language-json">{
+    "error": "Not Found",
+    "details": "指定された lot_id (MAT-09999) が見つかりません。"
+}</code></pre>
+
+                    <p class="text-sm mt-4 mb-1">500 Internal Server Error（削除処理で想定外エラー）</p>
+                    <pre><code class="language-json">{
+    "error": "Internal Server Error",
+    "details": "ファイル削除中にエラーが発生しました。"
+}</code></pre>
+
+                    <div class="mt-6 p-4 bg-amber-50 border-l-4 border-amber-500 text-amber-700 rounded-r-lg">
+                        <p class="font-semibold">利用上の注意</p>
+                        <ul class="list-disc list-inside text-sm space-y-1 mt-2">
+                            <li>復元不可。削除前に監査ログを残すこと。</li>
+                            <li>関連レポート等で参照される場合は別途連携テーブルの整合性にも注意。</li>
+                        </ul>
+                    </div>
+                </div>
+            </section>
+        </div>
+
+        <footer class="text-center text-slate-500 mt-12 py-4">
+            &copy; 2024 API Design by Gemini. All Rights Reserved.
+        </footer>
+    </div>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+    <script>
+        hljs.highlightAll();
+        (function () {
+            const blocks = document.querySelectorAll('pre code');
+            blocks.forEach(code => {
+                const pre = code.parentElement;
+                if (!pre.classList.contains('code-block-wrapper')) pre.classList.add('code-block-wrapper');
+                if (pre.querySelector('.copy-btn')) return;
+                const btn = document.createElement('button');
+                btn.type = 'button';
+                btn.className = 'copy-btn';
+                btn.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg><span>Copy</span>';
+                btn.addEventListener('click', async () => {
+                    const raw = code.innerText.replace(/\n+$/, '');
+                    try {
+                        await navigator.clipboard.writeText(raw);
+                        btn.classList.add('copied');
+                        const original = btn.innerHTML;
+                        btn.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg><span>Copied!</span>';
+                        setTimeout(() => { btn.classList.remove('copied'); btn.innerHTML = original; }, 1800);
+                    } catch (e) {
+                        try {
+                            const textarea = document.createElement('textarea');
+                            textarea.value = raw;
+                            document.body.appendChild(textarea);
+                            textarea.select();
+                            document.execCommand('copy');
+                            document.body.removeChild(textarea);
+
+                            btn.classList.add('copied');
+                            const original = btn.innerHTML;
+                            btn.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg><span>Copied!</span>';
+                            setTimeout(() => { btn.classList.remove('copied'); btn.innerHTML = original; }, 1800);
+                        } catch (err) {
+                            btn.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg><span style="color:#fee2e2">Failed</span>';
+                            setTimeout(() => { btn.innerHTML = '<span>Copy</span>'; }, 2000);
+                        }
+                    }
+                });
+                pre.appendChild(btn);
+            });
+        })();
+    </script>
+
+
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/docs/API\350\250\255\350\250\210/sse-events.md" "b/docs/API\350\250\255\350\250\210/sse-events.md"
new file mode 100644
index 000000000..32c4333fc
--- /dev/null
+++ "b/docs/API\350\250\255\350\250\210/sse-events.md"
@@ -0,0 +1,123 @@
+# SSE イベント一覧
+
+バックエンドの各 API から配信されるサーバー送信イベント (SSE) は、リアルタイム通知としてイベント名と日本語メッセージのみを持つミニマルなペイロードに統一されました。詳細なデータが必要な場合は、該当リソースを再度 GET で取得してください。
+
+各イベントの共通フォーマット:
+
+```json
+{
+  "ivent": "<イベント名>",
+  "message": "<日本語メッセージ>"
+}
+```
+
+## 接続確立
+
+```json
+{
+  "ivent": "sse:connected",
+  "message": "SSE 接続が確立されました"
+}
+```
+
+## PLCイベント
+
+### PLCログ受信
+`POST /api/ingress/plc`
+
+```json
+{
+  "ivent": "plc:logReceived",
+  "message": "PLCログが受信されました"
+}
+```
+
+## 機械イベント
+
+### 機械稼働開始
+`POST /api/machines/{id}/start`
+
+```json
+{
+  "ivent": "machine:started",
+  "message": "機械の稼働が開始されました"
+}
+```
+
+## 検査系イベント
+
+### 検査前画像アップロード
+`POST /api/ingress/inspection/{lot_id}`
+
+```json
+{
+  "ivent": "inspection:imageUploaded",
+  "message": "検査前画像がアップロードされました"
+}
+```
+
+### 検査ロット初期登録
+`POST /api/ingress/inspection`
+
+```json
+{
+  "ivent": "inspection:lotCreated",
+  "message": "検査ロットが新規登録されました"
+}
+```
+
+### 検査結果一括登録
+`POST /api/ingress/inspection/batch/{lot_id}`
+
+```json
+{
+  "ivent": "inspection:batchUploaded",
+  "message": "検査結果が一括で登録されました"
+}
+```
+
+### 検査結果更新（単発）
+`PUT /api/ingress/inspection/result/{filename}`
+
+```json
+{
+  "ivent": "inspection:resultUpdated",
+  "message": "検査結果が更新されました"
+}
+```
+
+### 検査リセット
+`POST /api/ingress/inspection/{lot_id}/reset`
+
+```json
+{
+  "ivent": "inspection:lotReset",
+  "message": "検査ロットがリセットされました"
+}
+```
+
+### 検査ロット削除
+`DELETE /api/ingress/inspection/{lot_id}`
+
+```json
+{
+  "ivent": "inspection:lotDeleted",
+  "message": "検査ロットが削除されました"
+}
+```
+
+## 生産系イベント
+
+### 生産インクリメント
+`POST /api/machines/{id}/increment-production`
+
+```json
+{
+  "ivent": "production:lotIncremented",
+  "message": "生産数がインクリメントされました"
+}
+```
+
+---
+
+各イベントで詳細情報が必要になった場合は、最新状態を取得するために該当エンドポイントへ GET リクエストを送信してください。
diff --git "a/docs/API\350\250\255\350\250\210/\343\203\255\343\202\260\343\202\244\343\203\263\343\203\273\350\252\215\350\250\274\347\263\273.html" "b/docs/API\350\250\255\350\250\210/\343\203\255\343\202\260\343\202\244\343\203\263\343\203\273\350\252\215\350\250\274\347\263\273.html"
new file mode 100644
index 000000000..71f24b8be
--- /dev/null
+++ "b/docs/API\350\250\255\350\250\210/\343\203\255\343\202\260\343\202\244\343\203\263\343\203\273\350\252\215\350\250\274\347\263\273.html"
@@ -0,0 +1,342 @@
+<!DOCTYPE html>
+<html lang="ja">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>認証・アカウント作成 API設計書</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <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=Inter:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;700&display=swap"
+        rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/vs2015.min.css">
+    <script src="../sidebar.js" defer></script>
+    <style>
+        body {
+            font-family: 'Inter', 'Noto Sans JP', sans-serif;
+        }
+
+        .method-badge {
+            font-size: 0.8rem;
+            font-weight: 700;
+            padding: 0.2em 0.6em;
+            border-radius: 0.25rem;
+            color: white;
+            display: inline-block;
+            width: 80px;
+            text-align: center;
+        }
+
+        .post {
+            background-color: #22c55e;
+        }
+
+        .get {
+            background-color: #3b82f6;
+        }
+
+        pre code.hljs {
+            padding: 1rem;
+            border-radius: 0.5rem;
+            font-size: 0.875rem;
+        }
+        /* language-http が highlight.js で着色されない場合のフォールバック */
+        pre code.language-http:not(.hljs) {
+            display:block;
+            padding: 1rem;
+            border-radius: 0.5rem;
+            background:#1e293b; /* slate-800 */
+            color:#e2e8f0; /* slate-200 */
+            font-size: 0.875rem;
+            line-height:1.4;
+            font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+            position:relative;
+        }
+        pre code.language-http:not(.hljs)::before {
+            content:'HTTP';
+            position:absolute;
+            top:6px; right:10px;
+            font-size:10px;
+            letter-spacing:.5px;
+            background:#334155;
+            color:#cbd5e1;
+            padding:2px 6px;
+            border-radius:4px;
+        }
+        /* Copy button */
+        .code-block-wrapper { position: relative; }
+        .copy-btn {
+            position: absolute;
+            top: 4px;
+            right: 6px;
+            background: rgba(51,65,85,.85); /* slate-600 */
+            color: #f1f5f9; /* slate-50 */
+            font-size: 12px;
+            font-weight: 600;
+            padding: 6px 12px 6px 10px;
+            border-radius: 8px;
+            cursor: pointer;
+            line-height: 1;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            backdrop-filter: blur(2px);
+            border: 1px solid rgba(255,255,255,.08);
+            transition: transform .16s ease, box-shadow .22s ease, background-color .25s ease;
+            box-shadow: 0 2px 6px -2px rgba(15,23,42,.35);
+        }
+        .copy-btn svg { width: 16px; height: 16px; }
+        .copy-btn:hover { background: rgba(71,85,105,.92); transform: translateY(-2px); box-shadow:0 6px 14px -4px rgba(15,23,42,.45); }
+        .copy-btn:active { transform: translateY(0); box-shadow:0 3px 8px -4px rgba(15,23,42,.4); }
+        .copy-btn.copied { background: linear-gradient(135deg,#16a34a 0%,#15803d 70%); }
+        .copy-btn.copied svg { animation: pop .4s ease; }
+        @keyframes pop { 0%{transform:scale(.6) rotate(-20deg);} 60%{transform:scale(1.15);} 100%{transform:scale(1);} }
+    </style>
+</head>
+
+<body class="bg-slate-50 text-slate-800">
+
+    <div class="container mx-auto p-4 sm:p-6 lg:p-8">
+        <header class="mb-8">
+            <div class="flex items-center justify-between mb-4">
+                <div class="flex items-center space-x-4">
+                    <svg class="w-12 h-12 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z">
+                        </path>
+                    </svg>
+                    <h1 class="text-4xl font-bold text-slate-900">認証・アカウント作成 API 設計書</h1>
+                </div>
+            </div>
+            <div class="mt-4 p-4 bg-indigo-100 border-l-4 border-indigo-500 text-indigo-700 rounded-r-lg">
+                <p class="font-bold">対象ページ: 全てのページのログイン・ログアウト・アカウント作成機能</p>
+                <p class="text-sm mt-1">このドキュメントは、アプリケーション全体の認証機能を実装するためのAPI仕様を定義します。</p>
+            </div>
+        </header>
+
+        <div class="space-y-12">
+
+            <!-- 0. DB設計 -->
+            <section id="db-design">
+                <h2 class="text-2xl font-bold border-b-2 border-indigo-500 pb-2 mb-4">0. DB設計</h2>
+                <div class="bg-white p-6 rounded-lg shadow-md">
+                    <p class="mb-4">認証まわりは以下の3テーブルが基本です。ユーザーは <code>employees</code> に格納し、権限や担当ラインは列で管理します（将来的に正規化する場合は <code>roles</code> / <code>production_lines</code> の参照に切替）。</p>
+
+                    <h3 class="text-lg font-semibold mt-4 mb-2">roles（権限マスタ）</h3>
+                    <pre><code class="language-sql">CREATE TABLE roles (
+    role_id SERIAL PRIMARY KEY,            -- 自動採番
+    role_name VARCHAR(50) UNIQUE NOT NULL  -- 権限名（例:"管理者"や"一般"）
+);</code></pre>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">production_lines（ラインマスタ）</h3>
+                    <pre><code class="language-sql">CREATE TABLE production_lines (
+    line_id SERIAL PRIMARY KEY,            -- 自動採番
+    line_name VARCHAR(100) UNIQUE NOT NULL -- ライン名（例:"ラインA"や"ラインB"）
+);</code></pre>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">employees（ユーザー）</h3>
+                    <pre><code class="language-sql">CREATE TABLE employees (
+    employee_id SERIAL PRIMARY KEY,               -- 自動採番
+    employee_name VARCHAR(100) NOT NULL,          -- 氏名
+    employee_user_id VARCHAR(50) UNIQUE NOT NULL, -- ログインID
+    employee_password VARCHAR(255) NOT NULL,      -- パスワード（ハッシュ推奨）
+    employee_is_active BOOLEAN DEFAULT TRUE,      -- 有効/無効
+    employee_role_id INTEGER NOT NULL,           -- 権限ID（roles.role_id）
+    employee_line_id INTEGER NOT NULL,           -- 担当ラインID（production_lines.line_id）
+    employee_special_notes TEXT,                  -- 特記事項
+    employee_color_code CHAR(6)                   -- カラーコード（例:"FF0000"）
+    -- 将来的に roles / production_lines と外部キーで結ぶなら以下を有効化
+    -- ,FOREIGN KEY (employee_role_name) REFERENCES roles(role_name)
+    -- ,FOREIGN KEY (employee_line_name) REFERENCES production_lines(line_name)
+);</code></pre>
+
+                    <p class="mt-3 text-sm text-slate-600">レスポンス例にある <code>user</code> オブジェクトは <code>employees</code> からの抽出です。ハッシュ化とユニーク制約のエラー処理（409）を合わせて実装してください。</p>
+                </div>
+            </section>
+
+            <!-- 1. ログイン -->
+            <section id="login">
+                <h2 class="text-2xl font-bold border-b-2 border-indigo-500 pb-2 mb-4">1. ログイン</h2>
+                <div class="bg-white p-6 rounded-lg shadow-md">
+                    <div class="flex items-center space-x-4 mb-4">
+                        <span class="method-badge post">POST</span>
+                        <span class="font-mono text-lg font-semibold">/api/auth/login</span>
+                        <span class="bg-red-500 text-white px-3 py-1 rounded-full text-sm font-bold">優先度: S</span>
+                    </div>
+                    <p class="mb-4">ユーザーIDとパスワードを送信し、ユーザーを認証するAPIです。成功すると、後続の通信で使用するアクセストークンが返却されます。</p>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">リクエストボディ</h3>
+                    <pre><code class="language-json">{
+    "employee_user_id": "hana.kato",
+    "password": "P@ssw0rd2025"
+}</code></pre>
+                    <p class="text-xs text-slate-500 mt-2">※ アカウント作成（register）サンプルと同じ値に統一。コピペしてそのまま試せるようにしています。</p>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">成功レスポンス (200 OK)</h3>
+                    <p class="text-sm mb-2">アクセストークンとログインしたユーザーの情報を返します。このトークンはフロントエンドで保存し、認証が必要なAPIを呼び出す際にヘッダーへ付与してください。
+                    </p>
+                    <pre><code class="language-json">{
+    "access_token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbXBsb3llZV9pZCI6NCwiZW1wbG95ZWVfdXNlcl9pZCI6InIub3NoaXlhbWEiLCJyb2xlX2lkIjoxLCJyb2xlX25hbWUiOiLnrqHnkIbogIUiLCJpc19hZG1pbiI6dHJ1ZSwiaWF0IjoxNzU5Mjk2NDEzLCJleHAiOjE3NTk5MDEyMTN9.-_8-eCEvD4O9sS_val5rlZRzxh7BXIUYATdQrgEnPRg",
+    "user": {
+        "employee_id": 4,
+        "employee_name": "押山 凜太朗",
+        "role_id": 1,
+        "role_name": "管理者",
+        "is_admin": true
+    }
+}</code></pre>
+                    <h3 class="text-lg font-semibold mt-6 mb-2">エラーレスポンス (401 Unauthorized)</h3>
+                    <pre><code class="language-json">{
+    "error": "Invalid user ID or password"
+}</code></pre>
+                </div>
+            </section>
+
+            <!-- 2. アカウント作成 -->
+            <section id="register">
+                <h2 class="text-2xl font-bold border-b-2 border-indigo-500 pb-2 mb-4">2. アカウント作成</h2>
+                <div class="bg-white p-6 rounded-lg shadow-md">
+                    <div class="flex items-center space-x-4 mb-4">
+                        <span class="method-badge post">POST</span>
+                        <span class="font-mono text-lg font-semibold">/api/auth/register</span>
+                        <span class="bg-red-500 text-white px-3 py-1 rounded-full text-sm font-bold">優先度: S</span>
+                    </div>
+                    <p class="mb-4">新しい従業員アカウントを作成するAPIです。ユーザーIDやパスワード、氏名などの情報を送信します。成功すると、新規に作成されたユーザー情報が返却されます。</p>
+                    <h3 class="text-lg font-semibold mt-6 mb-2">リクエストボディ</h3>
+                    <pre><code class="language-json">{
+    "employee_user_id": "hana.kato",
+    "password": "P@ssw0rd2025",
+    "employee_name": "加藤花",
+    "employee_role_id": 2,
+    "employee_line_id": 1,
+    "employee_special_notes": "夜勤中心",
+    "employee_color_code": "FF8800"
+}</code></pre>
+                    <h3 class="text-lg font-semibold mt-6 mb-2">成功レスポンス (201 Created)</h3>
+                    <p class="text-sm mb-2">ユーザー登録が成功したメッセージと、作成されたユーザー情報を返します。（パスワードは返却しません。）</p>
+                    <pre><code class="language-json">{
+    "message": "ユーザー登録が完了しました",
+    "user": {
+        "employee_id": 6,
+        "employee_user_id": "tanaka.misaki",
+        "employee_name": "田中 美咲"
+    }
+}</code></pre>
+                    <h3 class="text-lg font-semibold mt-6 mb-2">エラーレスポンス (400 Bad Request)</h3>
+                    <p class="text-sm mb-2">ユーザーID、パスワード、氏名のいずれかが不足している場合にこのエラーを返します。</p>
+                    <pre><code class="language-json">{
+    "error": "必要な情報が不足しています"
+}</code></pre>
+                    <h3 class="text-lg font-semibold mt-6 mb-2">エラーレスポンス (409 Conflict)</h3>
+                    <p class="text-sm mb-2">送信された `employee_user_id` が既に使用されている場合に返すエラーです。</p>
+                    <pre><code class="language-json">{
+    "error": "そのユーザーIDは既に使用されています"
+}</code></pre>
+                </div>
+            </section>
+
+            <!-- 3. ログアウト -->
+            <section id="logout">
+                <h2 class="text-2xl font-bold border-b-2 border-indigo-500 pb-2 mb-4">3. ログアウト</h2>
+                <div class="bg-white p-6 rounded-lg shadow-md">
+                    <div class="flex items-center space-x-4 mb-4">
+                        <span class="method-badge post">POST</span>
+                        <span class="font-mono text-lg font-semibold">/api/auth/logout</span>
+                        <span class="bg-red-500 text-white px-3 py-1 rounded-full text-sm font-bold">優先度: S</span>
+                    </div>
+                    <p class="mb-4">サーバー側でセッションを無効にするためのAPIです。このエンドポイントを呼び出す際は、ログイン時に受け取ったアクセストークンをヘッダーに付与して送信する必要があります。</p>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">リクエストヘッダー</h3>
+                    <pre><code class="language-http" data-type="header">Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...</code></pre>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">成功レスポンス (200 OK)</h3>
+                    <pre><code class="language-json">{
+    "message": "Successfully logged out"
+}</code></pre>
+                </div>
+            </section>
+
+            <!-- 4. ログイン状態チェック -->
+            <section id="check-session">
+                <h2 class="text-2xl font-bold border-b-2 border-indigo-500 pb-2 mb-4">4. ログイン状態チェック</h2>
+                <div class="bg-white p-6 rounded-lg shadow-md">
+                    <div class="flex items-center space-x-4 mb-4">
+                        <span class="method-badge get">GET</span>
+                        <span class="font-mono text-lg font-semibold">/api/auth/me</span>
+                        <span class="bg-orange-500 text-white px-3 py-1 rounded-full text-sm font-bold">優先度: A</span>
+                    </div>
+                    <p class="mb-4">ユーザーが今ログインしてるか確認するためのAPI。ページをリロードしたときとかに、セッションが有効かチェックするのに使うと便利</p>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">リクエストヘッダー</h3>
+                    <pre><code class="language-http">Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...</code></pre>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">成功レスポンス (200 OK)</h3>
+                    <p class="text-sm mb-2">トークンが有効なら、ログインしてるユーザーの情報を返す。</p>
+                    <pre><code class="language-json">{
+    "employee_id": 4,
+    "employee_name": "押山 凜太朗",
+    "role_id": 1,
+    "role_name": "管理者",
+    "is_admin": true,
+    "employee_color_code": "84CC16"
+}</code></pre>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">エラーレスポンス (401 Unauthorized)</h3>
+                    <p class="text-sm mb-2">トークンが無効、または期限切れの場合はこのエラーを返します。その際はログイン画面へ遷移させる処理を実装してください。</p>
+                    <pre><code class="language-json">{
+    "error": "Unauthorized"
+}</code></pre>
+                </div>
+            </section>
+        </div>
+
+        <footer class="text-center text-slate-500 mt-12 py-4">
+            &copy; 2024 API Design by Gemini. All Rights Reserved.
+        </footer>
+    </div>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+    <script>
+        hljs.highlightAll();
+        // language-http が未ハイライトの場合は手動で .hljs を付与して共通スタイル適用
+        document.querySelectorAll('code.language-http').forEach(el=>{
+            if(!el.classList.contains('hljs')){
+                el.classList.add('hljs');
+            }
+        });
+        // Add copy buttons to JSON / HTTP / SQL code blocks
+        (function() {
+            const blocks = document.querySelectorAll('pre code.language-json, pre code.language-http, pre code.language-sql');
+            blocks.forEach(code => {
+                const pre = code.parentElement;
+                if (!pre.classList.contains('code-block-wrapper')) {
+                    pre.classList.add('code-block-wrapper');
+                }
+                // Avoid duplicate buttons
+                if (pre.querySelector('.copy-btn')) return;
+                const btn = document.createElement('button');
+                btn.type = 'button';
+                btn.className = 'copy-btn';
+        btn.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg><span>Copy</span>';
+                btn.addEventListener('click', async () => {
+                    const raw = code.innerText.replace(/\n+$/, '');
+                    try {
+                        await navigator.clipboard.writeText(raw);
+                        btn.classList.add('copied');
+            const original = btn.innerHTML;
+            btn.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg><span>Copied!</span>';
+            setTimeout(() => { btn.classList.remove('copied'); btn.innerHTML = original; }, 1800);
+                    } catch (e) {
+            btn.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg><span style="color:#fee2e2">Failed</span>';
+            setTimeout(() => { btn.classList.remove('copied'); btn.innerHTML = original; }, 2000);
+                    }
+                });
+                pre.appendChild(btn);
+            });
+        })();
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/docs/API\350\250\255\350\250\210/\344\273\212\346\227\245\343\201\256\343\201\212\343\201\227\343\202\211\343\201\233.html" "b/docs/API\350\250\255\350\250\210/\344\273\212\346\227\245\343\201\256\343\201\212\343\201\227\343\202\211\343\201\233.html"
new file mode 100644
index 000000000..9e742473d
--- /dev/null
+++ "b/docs/API\350\250\255\350\250\210/\344\273\212\346\227\245\343\201\256\343\201\212\343\201\227\343\202\211\343\201\233.html"
@@ -0,0 +1,163 @@
+<!DOCTYPE html>
+<html lang="ja">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>今日のお知らせAPI設計書</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <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=Inter:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;700&display=swap"
+        rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/vs2015.min.css">
+    <script src="../sidebar.js" defer></script>
+    <style>
+        body {
+            font-family: 'Inter', 'Noto Sans JP', sans-serif;
+        }
+
+        .method-badge {
+            font-size: 0.8rem;
+            font-weight: 700;
+            padding: 0.2em 0.6em;
+            border-radius: 0.25rem;
+            color: white;
+            display: inline-block;
+            width: 80px;
+            text-align: center;
+        }
+
+        .get {
+            background-color: #3b82f6;
+        }
+
+        .post {
+            background-color: #22c55e;
+        }
+
+        .put {
+            background-color: #f97316;
+        }
+
+        .delete {
+            background-color: #ef4444;
+        }
+
+        /* highlight.js用のスタイルを調整 */
+        pre code.hljs {
+            padding: 1rem;
+            border-radius: 0.5rem;
+            font-size: 0.875rem;
+        }
+        /* Copy button (お手本のHTMLから流用) */
+        .code-block-wrapper { position: relative; }
+        .copy-btn { position:absolute; top:4px; right:6px; background:rgba(51,65,85,.85); color:#f1f5f9; font-size:12px; font-weight:600; padding:6px 12px 6px 10px; border-radius:8px; cursor:pointer; line-height:1; display:flex; align-items:center; gap:6px; backdrop-filter:blur(2px); border:1px solid rgba(255,255,255,.08); transition:transform .16s, box-shadow .22s, background-color .25s; box-shadow:0 2px 6px -2px rgba(15,23,42,.35);} .copy-btn svg{width:16px;height:16px;} .copy-btn:hover{background:rgba(71,85,105,.92); transform:translateY(-2px); box-shadow:0 6px 14px -4px rgba(15,23,42,.45);} .copy-btn:active{transform:translateY(0); box-shadow:0 3px 8px -4px rgba(15,23,42,.4);} .copy-btn.copied{background:linear-gradient(135deg,#16a34a 0%,#15803d 70%);} .copy-btn.copied svg{animation:pop .4s ease;} @keyframes pop{0%{transform:scale(.6) rotate(-20deg);}60%{transform:scale(1.15);}100%{transform:scale(1);}}
+    </style>
+</head>
+
+<body class="bg-slate-50 text-slate-800">
+
+    <div class="container mx-auto p-4 sm:p-6 lg:p-8">
+        <header class="mb-8">
+            <div class="flex items-center justify-between mb-4">
+                <div class="flex items-center space-x-4">
+                    <svg class="w-12 h-12 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.144-6.002H3a1 1 0 01-1-1v-4a1 1 0 011-1h2.539l2.144-6.002a1.76 1.76 0 013.417.592zM19 5.882V19.24a1.76 1.76 0 003.417.592l2.144-6.002H27a1 1 0 001-1v-4a1 1 0 00-1-1h-2.539l-2.144-6.002a1.76 1.76 0 00-3.417.592z"></path>
+                    </svg>
+                    <h1 class="text-4xl font-bold text-slate-900">今日のお知らせAPI 設計書</h1>
+                </div>
+            </div>
+            <div class="mt-4 p-4 bg-indigo-100 border-l-4 border-indigo-500 text-indigo-700 rounded-r-lg">
+                <p class="font-bold">対象ページ: ダッシュボード（トップページ）</p>
+                <p class="text-sm mt-1">このドキュメントは、ダッシュボードの「今日のお知らせ」機能のAPI仕様を定義します。</p>
+            </div>
+            <p class="mt-4 text-lg text-slate-600">これベースで開発ヨロ！</p>
+        </header>
+
+        <div class="space-y-12">
+
+            <section id="db-design">
+                <h2 class="text-2xl font-bold border-b-2 border-indigo-500 pb-2 mb-4">0. DB設計</h2>
+                <div class="bg-white p-6 rounded-lg shadow-md">
+                    <p class="mb-4">お知らせ機能は、単一のレコード（行）だけを持つシンプルなテーブルで管理します。</p>
+
+                    <h3 class="text-lg font-semibold mt-4 mb-2">today_message（お知らせテーブル）</h3>
+                    <pre><code class="language-sql">CREATE TABLE today_message (
+    message_id INT PRIMARY KEY DEFAULT 1,       -- 常にID=1のレコードだけを使う
+    content TEXT,                               -- お知らせの本文
+    priority INT DEFAULT 1,                       -- 重要度 (1:低い, 2:普通, 3:高い)
+    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP -- 最終更新日時
+);</code></pre>
+                    <p class="mt-3 text-sm text-slate-600">※DBには数値(INT)で保存し、APIがレスポンスする際に「低い」などの文字列に変換します。</p>
+                    <p class="mt-2 text-sm text-slate-600">※サーバー起動時やAPI側で、ID=1のレコードが存在しない場合のみ作成（INSERT）する処理を推奨します。</p>
+                </div>
+            </section>
+
+            <section id="get-notification">
+                <h2 class="text-2xl font-bold border-b-2 border-indigo-500 pb-2 mb-4">1. お知らせ取得</h2>
+                <div class="bg-white p-6 rounded-lg shadow-md">
+                    <div class="flex items-center space-x-4 mb-4">
+                        <span class="method-badge get">GET</span>
+                        <span class="font-mono text-lg font-semibold">/api/message</span>
+                        <span class="bg-red-500 text-white px-3 py-1 rounded-full text-sm font-bold">優先度: S</span>
+                    </div>
+                    <p class="mb-4">現在設定されている「今日のお知らせ」の内容をGETするAPI。</p>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">クエリパラメータ</h3>
+                    <p>なし。</p>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">成功レスポンス (200 OK)</h3>
+                    <pre><code class="language-json">{
+    "content": "qwer",
+    "priority": "低い",
+    "updated_at": "2025-10-27T15:00:00+09:00"
+}</code></pre>
+                    </div>
+            </section>
+
+            <section id="update-notification">
+                <h2 class="text-2xl font-bold border-b-2 border-indigo-500 pb-2 mb-4">2. お知らせ更新</h2>
+                <div class="bg-white p-6 rounded-lg shadow-md">
+                    <div class="flex items-center space-x-4 mb-4">
+                        <span class="method-badge put">PUT</span>
+                        <span class="font-mono text-lg font-semibold">/api/message</span>
+                        <span class="bg-red-500 text-white px-3 py-1 rounded-full text-sm font-bold">優先度: S</span>
+                    </div>
+                    <p class="mb-4">お知らせの内容を更新（上書き）するAPIです。リソースが「ID=1」で固定されているため、PUT で全体を更新する構成としています。</p>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">リクエストボディ</h3>
+                    <p class="text-sm mb-2">※リクエスト（送信）時は、数値（1:低い, 2:普通, 3:高い）で送ることを推奨します。</p>
+                    <pre><code class="language-json">{
+    "content": "新しいお知らせのテキストです。",
+    "priority": 3
+}</code></pre>
+                    <h3 class="text-lg font-semibold mt-6 mb-2">成功レスポンス (200 OK)</h3>
+                    <p class="text-sm mb-2">更新が成功すると、最新のデータが返却されます。</p>
+                    <pre><code class="language-json">{
+    "content": "新しいお知らせのテキストです。",
+    "priority": "高い",
+    "updated_at": "2025-10-27T15:05:00+09:00"
+}</code></pre>
+                    </div>
+            </section>
+
+        </div>
+
+        <footer class="text-center text-slate-500 mt-12 py-4">
+            &copy; 2024 API Design by Gemini. All Rights Reserved.
+        </footer>
+    </div>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+    <script>
+        // ページ内のすべてのコードにハイライトを適用
+        hljs.highlightAll();
+    </script>
+    <script>
+        (function(){ const blocks=document.querySelectorAll('pre code.language-json, pre code.language-http, pre code.language-sql'); blocks.forEach(code=>{ const pre=code.parentElement; if(!pre.classList.contains('code-block-wrapper')) pre.classList.add('code-block-wrapper'); if(pre.querySelector('.copy-btn')) return; const btn=document.createElement('button'); btn.type='button'; btn.className='copy-btn'; btn.innerHTML='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg><span>Copy</span>'; btn.addEventListener('click',async()=>{ const raw=code.innerText.replace(/\n+$/,''); try{ await navigator.clipboard.writeText(raw); btn.classList.add('copied'); const original=btn.innerHTML; btn.innerHTML='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg><span>Copied!</span>'; setTimeout(()=>{btn.classList.remove('copied'); btn.innerHTML=original;},1800);}catch(e){ btn.innerHTML='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg><span style="color:#fee2e2">Failed</span>'; setTimeout(()=>{btn.innerHTML='Copy';},2000);} }); pre.appendChild(btn); }); })();
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/docs/API\350\250\255\350\250\210/\345\267\245\345\240\264\350\250\255\345\256\232.html" "b/docs/API\350\250\255\350\250\210/\345\267\245\345\240\264\350\250\255\345\256\232.html"
new file mode 100644
index 000000000..c59fd6d1b
--- /dev/null
+++ "b/docs/API\350\250\255\350\250\210/\345\267\245\345\240\264\350\250\255\345\256\232.html"
@@ -0,0 +1,370 @@
+<!DOCTYPE html>
+<html lang="ja">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>工場設定API設計書</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <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=Inter:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;700&display=swap"
+        rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/vs2015.min.css">
+    <script src="../sidebar.js" defer></script>
+    <style>
+        body {
+            font-family: 'Inter', 'Noto Sans JP', sans-serif;
+        }
+
+        .method-badge {
+            font-size: 0.8rem;
+            font-weight: 700;
+            padding: 0.2em 0.6em;
+            border-radius: 0.25rem;
+            color: white;
+            display: inline-block;
+            width: 80px;
+            text-align: center;
+        }
+
+        .get {
+            background-color: #3b82f6;
+        }
+
+        .post {
+            background-color: #22c55e;
+        }
+
+        .put {
+            background-color: #f97316;
+        }
+
+        .delete {
+            background-color: #ef4444;
+        }
+
+        pre code.hljs {
+            padding: 1rem;
+            border-radius: 0.5rem;
+            font-size: 0.875rem;
+        }
+
+        .code-block-wrapper {
+            position: relative;
+        }
+
+        .copy-btn {
+            position: absolute;
+            top: 4px;
+            right: 6px;
+            background: rgba(51, 65, 85, .85);
+            color: #f1f5f9;
+            font-size: 12px;
+            font-weight: 600;
+            padding: 6px 12px 6px 10px;
+            border-radius: 8px;
+            cursor: pointer;
+            line-height: 1;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            backdrop-filter: blur(2px);
+            border: 1px solid rgba(255, 255, 255, .08);
+            transition: transform .16s, box-shadow .22s, background-color .25s;
+            box-shadow: 0 2px 6px -2px rgba(15, 23, 42, .35);
+        }
+
+        .copy-btn svg {
+            width: 16px;
+            height: 16px;
+        }
+
+        .copy-btn:hover {
+            background: rgba(71, 85, 105, .92);
+            transform: translateY(-2px);
+            box-shadow: 0 6px 14px -4px rgba(15, 23, 42, .45);
+        }
+
+        .copy-btn:active {
+            transform: translateY(0);
+            box-shadow: 0 3px 8px -4px rgba(15, 23, 42, .4);
+        }
+
+        .copy-btn.copied {
+            background: linear-gradient(135deg, #16a34a 0%, #15803d 70%);
+        }
+
+        .copy-btn.copied svg {
+            animation: pop .4s ease;
+        }
+
+        @keyframes pop {
+            0% {
+                transform: scale(.6) rotate(-20deg);
+            }
+
+            60% {
+                transform: scale(1.15);
+            }
+
+            100% {
+                transform: scale(1);
+            }
+        }
+    </style>
+</head>
+
+<body class="bg-slate-50 text-slate-800">
+
+    <div class="container mx-auto p-4 sm:p-6 lg:p-8">
+        <header class="mb-8">
+            <div class="flex items-center justify-between mb-4">
+                <div class="flex items-center space-x-4">
+                    <svg class="w-12 h-12 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                    </svg>
+                    <h1 class="text-4xl font-bold text-slate-900">工場設定API 設計書</h1>
+                </div>
+                <a href="../index.html"
+                    class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition-colors">
+                    ← トップページに戻る
+                </a>
+            </div>
+            <div class="mt-4 p-4 bg-gray-100 border-l-4 border-gray-500 text-gray-700 rounded-r-lg">
+                <p class="font-bold">対象ページ: 工場設定ページ</p>
+                <p class="text-sm mt-1">このドキュメントは、「工場設定ページ」で利用するマスターデータ（権限、生産ライン）を管理するためのAPI仕様を定義します。</p>
+            </div>
+        </header>
+
+        <div class="space-y-12">
+
+            <!-- 0. DB設計 -->
+            <section id="db-design">
+                <h2 class="text-2xl font-bold border-b-2 border-gray-500 pb-2 mb-4">0. DB設計</h2>
+                <div class="bg-white p-6 rounded-lg shadow-md">
+                    <p class="mb-4">このAPIは以下のマスターテーブルを操作します。</p>
+
+                    <h3 class="text-lg font-semibold mt-4 mb-2">roles（権限マスタ）</h3>
+                    <pre><code class="language-sql">-- PostgreSQL 例: 管理者かどうかを boolean で管理（true=管理者, false=一般従業員）
+CREATE TABLE roles (
+        role_id SERIAL PRIMARY KEY,
+        role_name VARCHAR(50) UNIQUE NOT NULL,
+        is_admin BOOLEAN NOT NULL DEFAULT FALSE
+);</code></pre>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">production_lines（ラインマスタ）</h3>
+                    <pre><code class="language-sql">CREATE TABLE production_lines (
+    line_id SERIAL PRIMARY KEY,
+    line_name VARCHAR(100) UNIQUE NOT NULL
+);</code></pre>
+                </div>
+            </section>
+
+            <!-- 1. 権限種別API -->
+            <section id="roles-api">
+                <h2 class="text-2xl font-bold border-b-2 border-gray-500 pb-2 mb-4">1. 権限種別 (Roles) API</h2>
+
+                <!-- 1.1 権限一覧取得 -->
+                <div id="get-roles" class="bg-white p-6 rounded-lg shadow-md mb-8">
+                    <h3 class="text-xl font-bold text-slate-800 mb-4">1.1 権限一覧取得</h3>
+                    <div class="flex items-center space-x-4 mb-4">
+                        <span class="method-badge get">GET</span>
+                        <span class="font-mono text-lg font-semibold">/api/roles</span>
+                    </div>
+                    <p class="mb-4">登録されているすべてのロール（ロール名 + is_admin）を一覧で取得します。is_admin=true は「管理者」、false は「一般従業員」を表します。
+                    </p>
+                    <h4 class="text-lg font-semibold mt-6 mb-2">成功レスポンス (200 OK)</h4>
+                    <pre><code class="language-json">[
+    { "role_id": 1, "role_name": "管理画面運用", "is_admin": true },
+    { "role_id": 2, "role_name": "閲覧のみ", "is_admin": false },
+    { "role_id": 3, "role_name": "検査業務", "is_admin": false }
+]</code></pre>
+                </div>
+
+                <!-- 1.2 権限追加 -->
+                <div id="create-role" class="bg-white p-6 rounded-lg shadow-md mb-8">
+                    <h3 class="text-xl font-bold text-slate-800 mb-4">1.2 権限追加</h3>
+                    <div class="flex items-center space-x-4 mb-4">
+                        <span class="method-badge post">POST</span>
+                        <span class="font-mono text-lg font-semibold">/api/roles</span>
+                    </div>
+                    <p class="mb-4">新しいロールを登録します（ロール名は自由入力、is_admin は true/false の二択）。</p>
+                    <h4 class="text-lg font-semibold mt-6 mb-2">リクエストボディ</h4>
+                    <pre><code class="language-json">{
+    "role_name": "閲覧のみ",
+    "is_admin": false // 省略時は false
+}</code></pre>
+                    <h4 class="text-lg font-semibold mt-6 mb-2">成功レスポンス (201 Created)</h4>
+                    <pre><code class="language-json">{
+    "role_id": 4,
+    "role_name": "閲覧のみ",
+    "is_admin": false
+}</code></pre>
+                </div>
+
+                <!-- 1.4 権限更新（ロール名/種別の変更） -->
+                <div id="update-role" class="bg-white p-6 rounded-lg shadow-md mb-8">
+                    <h3 class="text-xl font-bold text-slate-800 mb-4">1.4 権限更新</h3>
+                    <div class="flex items-center space-x-4 mb-4">
+                        <span class="method-badge put">PUT</span>
+                        <span class="font-mono text-lg font-semibold">/api/roles/{id}</span>
+                    </div>
+                    <p class="mb-4">指定ロールの「ロール名」または「is_admin（管理者かどうか）」を更新します。</p>
+                    <h4 class="text-lg font-semibold mt-6 mb-2">リクエストボディ（どちらか、または両方）</h4>
+                    <pre><code class="language-json">{
+    "role_name": "検査リーダー",
+    "is_admin": true // boolean
+}</code></pre>
+                    <h4 class="text-lg font-semibold mt-6 mb-2">成功レスポンス (200 OK)</h4>
+                    <pre><code class="language-json">{
+    "role_id": 3,
+    "role_name": "検査リーダー",
+    "is_admin": true
+}</code></pre>
+                    <div class="mt-4 text-sm text-slate-600">
+                        <p>バリデーション:</p>
+                        <ul class="list-disc ml-5 mt-1">
+                            <li>role_name は重複不可（409 Conflict）</li>
+                            <li>is_admin は boolean 以外（null/文字列など）は 400 Bad Request</li>
+                            <li>対象が存在しない場合は 404 Not Found</li>
+                        </ul>
+                    </div>
+                </div>
+
+                <!-- 1.5 種別トグル（UIのワンクリック切替用） -->
+                <div id="toggle-role-type" class="bg-white p-6 rounded-lg shadow-md">
+                    <h3 class="text-xl font-bold text-slate-800 mb-4">1.5 is_admin トグル</h3>
+                    <div class="flex items-center space-x-4 mb-4">
+                        <span class="method-badge put">PATCH</span>
+                        <span class="font-mono text-lg font-semibold">/api/roles/{id}/toggle</span>
+                    </div>
+                    <p class="mb-4">is_admin を true と false の間でトグルします。</p>
+                    <h4 class="text-lg font-semibold mt-6 mb-2">成功レスポンス (200 OK)</h4>
+                    <pre><code class="language-json">{
+    "role_id": 2,
+    "role_name": "閲覧のみ",
+    "is_admin": true
+}</code></pre>
+                    <div class="mt-4 text-sm text-slate-600">
+                        <p>備考: UIの「押すたびに変わる」要求に対応する軽量API。PUTでも同様の更新は可能。</p>
+                    </div>
+                </div>
+
+            </section>
+            <!-- 1.3 権限削除 -->
+            <div id="delete-role" class="bg-white p-6 rounded-lg shadow-md">
+                <h3 class="text-xl font-bold text-slate-800 mb-4">1.3 権限削除</h3>
+                <div class="flex items-center space-x-4 mb-4">
+                    <span class="method-badge delete">DELETE</span>
+                    <span class="font-mono text-lg font-semibold">/api/roles/{id}</span>
+                </div>
+                <p class="mb-4">指定されたIDのロールを削除します。</p>
+                <h4 class="text-lg font-semibold mt-6 mb-2">成功レスポンス (204 No Content)</h4>
+                <p>削除が成功した場合、ボディには何も返されません。</p>
+                <div class="mt-4 text-sm text-slate-600">
+                    <p>注意:</p>
+                    <ul class="list-disc ml-5 mt-1">
+                        <li>ユーザーが紐づく等で削除不可の場合は 409 Conflict を返す（例: 外部キー制約違反）</li>
+                        <li>必要に応じてソフトデリート（is_deleted）で運用</li>
+                    </ul>
+                </div>
+            </div>
+            
+
+            <!-- 2. 工場ラインAPI -->
+            <section id="lines-api">
+                <h2 class="text-2xl font-bold border-b-2 border-gray-500 pb-2 mb-4">2. 工場ライン (Production Lines) API</h2>
+
+                <!-- 2.1 ライン一覧取得 -->
+                <div id="get-lines" class="bg-white p-6 rounded-lg shadow-md mb-8">
+                    <h3 class="text-xl font-bold text-slate-800 mb-4">2.1 ライン一覧取得</h3>
+                    <div class="flex items-center space-x-4 mb-4">
+                        <span class="method-badge get">GET</span>
+                        <span class="font-mono text-lg font-semibold">/api/lines</span>
+                    </div>
+                    <p class="mb-4">登録されているすべての工場ラインを一覧で取得します。</p>
+                    <h4 class="text-lg font-semibold mt-6 mb-2">成功レスポンス (200 OK)</h4>
+                    <pre><code class="language-json">[
+    { "line_id": 1, "line_name": "Aライン (組立)" },
+    { "line_id": 2, "line_name": "Bライン (塗装)" },
+    { "line_id": 3, "line_name": "検査ライン" }
+]</code></pre>
+                </div>
+
+                <!-- 2.2 ライン追加 -->
+                <div id="create-line" class="bg-white p-6 rounded-lg shadow-md mb-8">
+                    <h3 class="text-xl font-bold text-slate-800 mb-4">2.2 ライン追加</h3>
+                    <div class="flex items-center space-x-4 mb-4">
+                        <span class="method-badge post">POST</span>
+                        <span class="font-mono text-lg font-semibold">/api/lines</span>
+                    </div>
+                    <p class="mb-4">新しい工場ラインを登録します。</p>
+                    <h4 class="text-lg font-semibold mt-6 mb-2">リクエストボディ</h4>
+                    <pre><code class="language-json">{
+    "line_name": "Cライン (梱包)"
+}</code></pre>
+                    <h4 class="text-lg font-semibold mt-6 mb-2">成功レスポンス (201 Created)</h4>
+                    <pre><code class="language-json">{
+    "line_id": 4,
+    "line_name": "Cライン (梱包)"
+}</code></pre>
+                </div>
+
+                <!-- 2.3 ライン名更新 -->
+                <div id="update-line" class="bg-white p-6 rounded-lg shadow-md mb-8">
+                    <h3 class="text-xl font-bold text-slate-800 mb-4">2.3 ライン名更新</h3>
+                    <div class="flex items-center space-x-4 mb-4">
+                        <span class="method-badge put">PUT</span>
+                        <span class="font-mono text-lg font-semibold">/api/lines/{id}</span>
+                    </div>
+                    <p class="mb-4">指定されたIDの工場ラインの名前を更新します。</p>
+                    <h4 class="text-lg font-semibold mt-6 mb-2">リクエストボディ</h4>
+                    <pre><code class="language-json">{
+    "line_name": "Dライン (最終検査)"
+}</code></pre>
+                    <h4 class="text-lg font-semibold mt-6 mb-2">成功レスポンス (200 OK)</h4>
+                    <pre><code class="language-json">{
+    "line_id": 2,
+    "line_name": "Dライン (最終検査)"
+}</code></pre>
+                    <div class="mt-4 text-sm text-slate-600">
+                        <p>バリデーション:</p>
+                        <ul class="list-disc ml-5 mt-1">
+                            <li>line_name は重複不可（409 Conflict）</li>
+                            <li>対象が存在しない場合は 404 Not Found</li>
+                        </ul>
+                    </div>
+                </div>
+
+                <!-- 2.4 ライン削除 -->
+                <div id="delete-line" class="bg-white p-6 rounded-lg shadow-md">
+                    <h3 class="text-xl font-bold text-slate-800 mb-4">2.4 ライン削除</h3>
+                    <div class="flex items-center space-x-4 mb-4">
+                        <span class="method-badge delete">DELETE</span>
+                        <span class="font-mono text-lg font-semibold">/api/lines/{id}</span>
+                    </div>
+                    <p class="mb-4">指定されたIDの工場ラインを削除します。</p>
+                    <h4 class="text-lg font-semibold mt-6 mb-2">成功レスポンス (204 No Content)</h4>
+                    <p>削除が成功した場合、ボディには何も返されません。</p>
+                </div>
+            </section>
+
+        </div>
+
+        <footer class="text-center text-slate-500 mt-12 py-4">
+            &copy; 2024 API Design by Gemini. All Rights Reserved.
+        </footer>
+    </div>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+    <script>hljs.highlightAll();</script>
+    <script>
+        (function () { const blocks = document.querySelectorAll('pre code.language-json, pre code.language-sql'); blocks.forEach(code => { const pre = code.parentElement; if (!pre.classList.contains('code-block-wrapper')) pre.classList.add('code-block-wrapper'); if (pre.querySelector('.copy-btn')) return; const btn = document.createElement('button'); btn.type = 'button'; btn.className = 'copy-btn'; btn.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg><span>Copy</span>'; btn.addEventListener('click', async () => { const raw = code.innerText.replace(/\n+$/, ''); try { await navigator.clipboard.writeText(raw); btn.classList.add('copied'); const original = btn.innerHTML; btn.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg><span>Copied!</span>'; setTimeout(() => { btn.classList.remove('copied'); btn.innerHTML = original; }, 1800); } catch (e) { btn.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg><span style="color:#fee2e2">Failed</span>'; setTimeout(() => { btn.innerHTML = 'Copy'; }, 2000); } }); pre.appendChild(btn); }); })();
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/docs/API\350\250\255\350\250\210/\345\276\223\346\245\255\345\223\241\343\203\252\343\202\271\343\203\210\343\203\232\343\203\274\343\202\270.html" "b/docs/API\350\250\255\350\250\210/\345\276\223\346\245\255\345\223\241\343\203\252\343\202\271\343\203\210\343\203\232\343\203\274\343\202\270.html"
new file mode 100644
index 000000000..373dda622
--- /dev/null
+++ "b/docs/API\350\250\255\350\250\210/\345\276\223\346\245\255\345\223\241\343\203\252\343\202\271\343\203\210\343\203\232\343\203\274\343\202\270.html"
@@ -0,0 +1,324 @@
+<!DOCTYPE html>
+<html lang="ja">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>従業員管理API設計書</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <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=Inter:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;700&display=swap"
+        rel="stylesheet">
+    <!-- highlight.jsのCSS (VSCode風テーマ) を追加 -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/vs2015.min.css">
+    <script src="../sidebar.js" defer></script>
+    <style>
+        body {
+            font-family: 'Inter', 'Noto Sans JP', sans-serif;
+        }
+
+        .method-badge {
+            font-size: 0.8rem;
+            font-weight: 700;
+            padding: 0.2em 0.6em;
+            border-radius: 0.25rem;
+            color: white;
+            display: inline-block;
+            width: 80px;
+            text-align: center;
+        }
+
+        .get {
+            background-color: #3b82f6;
+        }
+
+        .post {
+            background-color: #22c55e;
+        }
+
+        .put {
+            background-color: #f97316;
+        }
+
+        .delete {
+            background-color: #ef4444;
+        }
+
+        /* highlight.js用のスタイルを調整 */
+        pre code.hljs {
+            padding: 1rem;
+            border-radius: 0.5rem;
+            font-size: 0.875rem;
+        }
+    /* Copy button */
+    .code-block-wrapper { position: relative; }
+    .copy-btn { position:absolute; top:4px; right:6px; background:rgba(51,65,85,.85); color:#f1f5f9; font-size:12px; font-weight:600; padding:6px 12px 6px 10px; border-radius:8px; cursor:pointer; line-height:1; display:flex; align-items:center; gap:6px; backdrop-filter:blur(2px); border:1px solid rgba(255,255,255,.08); transition:transform .16s, box-shadow .22s, background-color .25s; box-shadow:0 2px 6px -2px rgba(15,23,42,.35);} .copy-btn svg{width:16px;height:16px;} .copy-btn:hover{background:rgba(71,85,105,.92); transform:translateY(-2px); box-shadow:0 6px 14px -4px rgba(15,23,42,.45);} .copy-btn:active{transform:translateY(0); box-shadow:0 3px 8px -4px rgba(15,23,42,.4);} .copy-btn.copied{background:linear-gradient(135deg,#16a34a 0%,#15803d 70%);} .copy-btn.copied svg{animation:pop .4s ease;} @keyframes pop{0%{transform:scale(.6) rotate(-20deg);}60%{transform:scale(1.15);}100%{transform:scale(1);}}
+    </style>
+</head>
+
+<body class="bg-slate-50 text-slate-800">
+
+    <div class="container mx-auto p-4 sm:p-6 lg:p-8">
+        <header class="mb-8">
+            <div class="flex items-center justify-between mb-4">
+                <div class="flex items-center space-x-4">
+                    <svg class="w-12 h-12 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z"></path>
+                    </svg>
+                    <h1 class="text-4xl font-bold text-slate-900">従業員管理API 設計書</h1>
+                </div>
+                <a href="../index.html" class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition-colors">
+                    ← トップページに戻る
+                </a>
+            </div>
+            <div class="mt-4 p-4 bg-indigo-100 border-l-4 border-indigo-500 text-indigo-700 rounded-r-lg">
+                <p class="font-bold">対象ページ: 従業員名簿ページ</p>
+                <p class="text-sm mt-1">このドキュメントは、「従業員名簿ページ」のフロントエンドとバックエンドを連携させるためのAPI仕様を定義します。</p>
+            </div>
+            <p class="mt-4 text-lg text-slate-600">これベースで開発ヨロ！</p>
+        </header>
+
+        <div class="space-y-12">
+
+            <!-- 0. DB設計 -->
+            <section id="db-design">
+                <h2 class="text-2xl font-bold border-b-2 border-indigo-500 pb-2 mb-4">0. DB設計</h2>
+                <div class="bg-white p-6 rounded-lg shadow-md">
+                    <p class="mb-4">従業員一覧は以下のテーブルをベースにしています。</p>
+
+                    <h3 class="text-lg font-semibold mt-4 mb-2">roles（権限マスタ）</h3>
+                    <pre><code class="language-sql">CREATE TABLE roles (
+    role_id SERIAL PRIMARY KEY,            -- 自動採番
+    role_name VARCHAR(50) UNIQUE NOT NULL,  -- 権限名(例:"管理者"や"一般")
+    is_admin BOOLEAN NOT NULL DEFAULT FALSE --追加 09/25
+);</code></pre>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">production_lines（ラインマスタ）</h3>
+                    <pre><code class="language-sql">CREATE TABLE production_lines (
+    line_id SERIAL PRIMARY KEY,
+    line_name VARCHAR(100) UNIQUE NOT NULL
+);</code></pre>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">employees（従業員）</h3>
+                    <pre><code class="language-sql">CREATE TABLE employees (
+    employee_id SERIAL PRIMARY KEY,
+    employee_name VARCHAR(100) NOT NULL,
+    employee_user_id VARCHAR(50) UNIQUE NOT NULL,
+    employee_password VARCHAR(255) NOT NULL,
+    employee_is_active BOOLEAN DEFAULT TRUE,
+    employee_role_name VARCHAR(50) NOT NULL,
+    employee_line_name VARCHAR(50) NOT NULL,
+    employee_special_notes TEXT,
+    employee_color_code CHAR(6)
+);</code></pre>
+
+                    <p class="mt-3 text-sm text-slate-600">検索パラメータ（name_like, line_name, is_active）は <code>employees</code> の列を対象に絞り込みます。</p>
+                </div>
+            </section>
+
+            <!-- 1. 従業員一覧取得 -->
+            <section id="get-employees">
+                <h2 class="text-2xl font-bold border-b-2 border-indigo-500 pb-2 mb-4">1. 従業員一覧取得</h2>
+                <div class="bg-white p-6 rounded-lg shadow-md">
+                    <div class="flex items-center space-x-4 mb-4">
+                        <span class="method-badge get">GET</span>
+                        <span class="font-mono text-lg font-semibold">/api/employees</span>
+                        <span class="bg-red-500 text-white px-3 py-1 rounded-full text-sm font-bold">優先度: S</span>
+                    </div>
+                    <p class="mb-4">従業員のリストをまとめて取得するAPIです。検索フィルターにも対応します。</p>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">クエリパラメータ (絞り込み検索)</h3>
+                    <table class="w-full text-left border-collapse">
+                        <thead>
+                            <tr>
+                                <th class="border-b-2 p-2">パラメータ</th>
+                                <th class="border-b-2 p-2">説明</th>
+                                <th class="border-b-2 p-2">例</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td class="border-b p-2 font-mono">name_like</td>
+                                <td class="border-b p-2">氏名での部分一致検索。</td>
+                                <td class="border-b p-2 font-mono">?name_like=山田</td>
+                            </tr>
+                            <tr>
+                                <td class="border-b p-2 font-mono">line_name</td>
+                                <td class="border-b p-2">担当ラインのIDで絞り込み。</td>
+                                <td class="border-b p-2 font-mono">?line_name=組立</td>
+                            </tr>
+                            <tr>
+                                <td class="border-b p-2 font-mono">is_active</td>
+                                <td class="border-b p-2">在籍状況で絞り込み (true: 在籍中, false: 退職済)。</td>
+                                <td class="border-b p-2 font-mono">?is_active=true</td>
+                            </tr>
+                        </tbody>
+                    </table>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">成功レスポンス (200 OK)</h3>
+                    <pre><code class="language-json">[
+    {
+        "employee_id": 1,
+        "employee_name": "山田 太郎",
+        "employee_user_id": "t.yamada",
+        "is_active": true,
+        "role_name": "リーダー",
+        "line_name": "組立",
+        "special_notes": "フォークリフト免許保持",
+        "color_code": "a3a8e6"
+    },
+    {
+        "employee_id": 2,
+        "employee_name": "佐藤 花子",
+        "employee_user_id": "h.sato",
+        "is_active": true,
+        "role_name": "スタッフ",
+        "line_name": "塗装",
+        "special_notes": "色彩検定2級",
+        "color_code": "e6a3c8"
+    }
+]</code></pre>
+                </div>
+            </section>
+
+            <!-- 2. 特定の従業員取得 -->
+            <section id="get-employee-by-id">
+                <h2 class="text-2xl font-bold border-b-2 border-indigo-500 pb-2 mb-4">2. 特定の従業員取得</h2>
+                <div class="bg-white p-6 rounded-lg shadow-md">
+                    <div class="flex items-center space-x-4 mb-4">
+                        <span class="method-badge get">GET</span>
+                        <span class="font-mono text-lg font-semibold">/api/employees/{id}</span>
+                        <span class="bg-red-500 text-white px-3 py-1 rounded-full text-sm font-bold">優先度: S</span>
+                    </div>
+                    <p class="mb-4">ID を指定して、特定の従業員1人の詳細情報を取得します。</p>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">成功レスポンス (200 OK)</h3>
+                    <pre><code class="language-json">{
+    "employee_id": 1,
+    "employee_name": "山田 太郎",
+    "employee_user_id": "t.yamada",
+    "is_active": true,
+    "role_name": "リーダー",
+    "line_name": "組立",
+    "special_notes": "フォークリフト免許保持",
+    "color_code": "a3a8e6"
+}</code></pre>
+                    <h3 class="text-lg font-semibold mt-6 mb-2">エラーレスポンス (404 Not Found)</h3>
+                    <pre><code class="language-json">{
+    "error": "Employee not found"
+}</code></pre>
+                </div>
+            </section>
+
+            <!-- 3. 従業員追加 -->
+            <section id="create-employee">
+                <h2 class="text-2xl font-bold border-b-2 border-indigo-500 pb-2 mb-4">3. 従業員追加</h2>
+                <div class="bg-white p-6 rounded-lg shadow-md">
+                    <div class="flex items-center space-x-4 mb-4">
+                        <span class="method-badge post">POST</span>
+                        <span class="font-mono text-lg font-semibold">/api/employees</span>
+                        <span class="bg-red-500 text-white px-3 py-1 rounded-full text-sm font-bold">優先度: S</span>
+                    </div>
+                    <p class="mb-4">新しい従業員を登録するためのAPIです。データは JSON 形式で送信します。</p>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">リクエストボディ</h3>
+                    <pre><code class="language-json">{
+    "employee_name": "鈴木 次郎",
+    "employee_user_id": "j.suzuki",
+    "password": "secure_password_123",
+    "role_id": 2,
+    "line_id": 1,
+    "color_code": "a3e6c8",
+    "special_notes": "新人"
+}</code></pre>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">成功レスポンス (201 Created)</h3>
+                    <p class="text-sm mb-2">登録が成功すると、ID が付与された従業員データが返却されます。</p>
+                    <pre><code class="language-json">{
+    "employee_id": 3,
+    "employee_name": "鈴木 次郎",
+    "employee_user_id": "j.suzuki",
+    "is_active": true,
+    "role_id": 2,
+    "line_id": 1,
+    "special_notes": "新人",
+    "color_code": "a3e6c8"
+}</code></pre>
+                </div>
+            </section>
+
+            <!-- 4. 従業員情報更新 -->
+            <section id="update-employee">
+                <h2 class="text-2xl font-bold border-b-2 border-indigo-500 pb-2 mb-4">4. 従業員情報更新</h2>
+                <div class="bg-white p-6 rounded-lg shadow-md">
+                    <div class="flex items-center space-x-4 mb-4">
+                        <span class="method-badge put">PUT</span>
+                        <span class="font-mono text-lg font-semibold">/api/employees/{id}</span>
+                        <span class="bg-orange-500 text-white px-3 py-1 rounded-full text-sm font-bold">優先度: A</span>
+                    </div>
+                    <p class="mb-4">IDで指定した従業員の情報を全件更新します。部分更新は PATCH が適切ですが、本設計では単純化のため PUT を利用します。</p>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">リクエストボディ</h3>
+                    <pre><code class="language-json">{
+    "employee_name": "鈴木 次郎",
+    "employee_user_id": "j.suzuki",
+    "password": null,
+    "role_id": 1,
+    "line_id": 2,
+    "is_active": true,
+    "color_code": "a3e6c8",
+    "special_notes": "検査のプロ"
+}</code></pre>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">成功レスポンス (200 OK)</h3>
+                    <pre><code class="language-json">{
+    "employee_id": 3,
+    "employee_name": "鈴木 次郎",
+    "employee_user_id": "j.suzuki",
+    "is_active": true,
+    "role_id": 1,
+    "line_id": 2,
+    "special_notes": "検査のプロ",
+    "color_code": "a3e6c8"
+}</code></pre>
+                </div>
+            </section>
+
+            <!-- 5. 従業員削除 -->
+            <section id="delete-employee">
+                <h2 class="text-2xl font-bold border-b-2 border-indigo-500 pb-2 mb-4">5. 従業員削除</h2>
+                <div class="bg-white p-6 rounded-lg shadow-md">
+                    <div class="flex items-center space-x-4 mb-4">
+                        <span class="method-badge delete">DELETE</span>
+                        <span class="font-mono text-lg font-semibold">/api/employees/{id}</span>
+                        <span class="bg-red-500 text-white px-3 py-1 rounded-full text-sm font-bold">優先度: S</span>
+                    </div>
+                    <p class="mb-4">
+                        IDで指定した従業員を削除します。実際には `is_active` を false にする論理削除の方が安全ですが、本設計では暫定的に物理削除を前提としています。
+                    </p>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">成功レスポンス (204 No Content)</h3>
+                    <p>削除が成功した場合、レスポンスボディは空となります。</p>
+                </div>
+            </section>
+        </div>
+
+        <footer class="text-center text-slate-500 mt-12 py-4">
+            &copy; 2024 API Design by Gemini. All Rights Reserved.
+        </footer>
+    </div>
+
+    <!-- highlight.jsのスクリプトを追加 -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+    <script>
+        // ページ内のすべてのコードにハイライトを適用
+        hljs.highlightAll();
+    </script>
+    <script>
+        (function(){ const blocks=document.querySelectorAll('pre code.language-json, pre code.language-http, pre code.language-sql'); blocks.forEach(code=>{ const pre=code.parentElement; if(!pre.classList.contains('code-block-wrapper')) pre.classList.add('code-block-wrapper'); if(pre.querySelector('.copy-btn')) return; const btn=document.createElement('button'); btn.type='button'; btn.className='copy-btn'; btn.innerHTML='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg><span>Copy</span>'; btn.addEventListener('click',async()=>{ const raw=code.innerText.replace(/\n+$/,''); try{ await navigator.clipboard.writeText(raw); btn.classList.add('copied'); const original=btn.innerHTML; btn.innerHTML='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg><span>Copied!</span>'; setTimeout(()=>{btn.classList.remove('copied'); btn.innerHTML=original;},1800);}catch(e){ btn.innerHTML='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg><span style="color:#fee2e2">Failed</span>'; setTimeout(()=>{btn.innerHTML='Copy';},2000);} }); pre.appendChild(btn); }); })();
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/docs/API\350\250\255\350\250\210/\346\227\245\345\240\261.html" "b/docs/API\350\250\255\350\250\210/\346\227\245\345\240\261.html"
new file mode 100644
index 000000000..02f4541c2
--- /dev/null
+++ "b/docs/API\350\250\255\350\250\210/\346\227\245\345\240\261.html"
@@ -0,0 +1,298 @@
+<!DOCTYPE html>
+<html lang="ja">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>日報管理API設計書</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <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=Inter:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;700&display=swap"
+        rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/vs2015.min.css">
+    <script src="../sidebar.js" defer></script>
+    <style>
+        body {
+            font-family: 'Inter', 'Noto Sans JP', sans-serif;
+        }
+
+        .method-badge {
+            font-size: 0.8rem;
+            font-weight: 700;
+            padding: 0.2em 0.6em;
+            border-radius: 0.25rem;
+            color: white;
+            display: inline-block;
+            width: 80px;
+            text-align: center;
+        }
+
+        .get {
+            background-color: #3b82f6;
+        }
+
+        .post {
+            background-color: #22c55e;
+        }
+
+        .put {
+            background-color: #f97316;
+        }
+
+        .delete {
+            background-color: #ef4444;
+        }
+
+        /* highlight.js用のスタイルを調整 */
+        pre code.hljs {
+            padding: 1rem;
+            border-radius: 0.5rem;
+            font-size: 0.875rem;
+        }
+        /* Copy button (お手本のHTMLから流用) */
+        .code-block-wrapper { position: relative; }
+        .copy-btn { position:absolute; top:4px; right:6px; background:rgba(51,65,85,.85); color:#f1f5f9; font-size:12px; font-weight:600; padding:6px 12px 6px 10px; border-radius:8px; cursor:pointer; line-height:1; display:flex; align-items:center; gap:6px; backdrop-filter:blur(2px); border:1px solid rgba(255,255,255,.08); transition:transform .16s, box-shadow .22s, background-color .25s; box-shadow:0 2px 6px -2px rgba(15,23,42,.35);} .copy-btn svg{width:16px;height:16px;} .copy-btn:hover{background:rgba(71,85,105,.92); transform:translateY(-2px); box-shadow:0 6px 14px -4px rgba(15,23,42,.45);} .copy-btn:active{transform:translateY(0); box-shadow:0 3px 8px -4px rgba(15,23,42,.4);} .copy-btn.copied{background:linear-gradient(135deg,#16a34a 0%,#15803d 70%);} .copy-btn.copied svg{animation:pop .4s ease;} @keyframes pop{0%{transform:scale(.6) rotate(-20deg);}60%{transform:scale(1.15);}100%{transform:scale(1);}}
+    </style>
+</head>
+
+<body class="bg-slate-50 text-slate-800">
+
+    <div class="container mx-auto p-4 sm:p-6 lg:p-8">
+        <header class="mb-8">
+            <div class="flex items-center justify-between mb-4">
+                <div class="flex items-center space-x-4">
+                    <svg class="w-12 h-12 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
+                    </svg>
+                    <h1 class="text-4xl font-bold text-slate-900">日報管理API 設計書</h1>
+                </div>
+            </div>
+            <div class="mt-4 p-4 bg-indigo-100 border-l-4 border-indigo-500 text-indigo-700 rounded-r-lg">
+                <p class="font-bold">対象ページ: 日報一覧ページ、日報入力ページ</p>
+                <p class="text-sm mt-1">このドキュメントは、従業員の日報を管理（CRUD）するためのAPI仕様を定義します。</p>
+            </div>
+            <p class="mt-4 text-lg text-slate-600">これベースで開発ヨロ！</p>
+        </header>
+
+        <div class="space-y-12">
+
+            <section id="db-design">
+                <h2 class="text-2xl font-bold border-b-2 border-indigo-500 pb-2 mb-4">0. DB設計</h2>
+                <div class="bg-white p-6 rounded-lg shadow-md">
+                    <p class="mb-4">日報データは、`employees` テーブルと `production_lines` テーブルを参照します。</p>
+
+                    <h3 class="text-lg font-semibold mt-4 mb-2">daily_reports（日報テーブル）</h3>
+                    <pre><code class="language-sql">CREATE TABLE daily_reports (
+    report_id SERIAL PRIMARY KEY,                   -- 日報ID (自動採番)
+    employee_id INT NOT NULL,                     -- 従業員ID (FK)
+    line_id INT NOT NULL,                         -- ラインID (FK)
+    report_date DATE NOT NULL,                      -- 報告日 (例: '2025-11-05')
+    notes TEXT,                                   -- 備考・特記事項 (日記内容)
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, -- 作成日時
+    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, -- 更新日時
+
+    FOREIGN KEY (employee_id) REFERENCES employees (employee_id),
+    FOREIGN KEY (line_id) REFERENCES production_lines (line_id)
+);</code></pre>
+                </div>
+            </section>
+
+            <section id="get-reports">
+                <h2 class="text-2xl font-bold border-b-2 border-indigo-500 pb-2 mb-4">1. 日報一覧取得</h2>
+                <div class="bg-white p-6 rounded-lg shadow-md">
+                    <div class="flex items-center space-x-4 mb-4">
+                        <span class="method-badge get">GET</span>
+                        <span class="font-mono text-lg font-semibold">/api/reports</span>
+                        <span class="bg-red-500 text-white px-3 py-1 rounded-full text-sm font-bold">優先度: S</span>
+                    </div>
+                    <p class="mb-4">日報のリストをまとめて取得するAPI。検索フィルターも使えるようにします。</p>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">クエリパラメータ (絞り込み検索)</h3>
+                    <table class="w-full text-left border-collapse">
+                        <thead>
+                            <tr>
+                                <th class="border-b-2 p-2">パラメータ</th>
+                                <th class="border-b-2 p-2">説明</th>
+                                <th class="border-b-2 p-2">例</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td class="border-b p-2 font-mono">employee_name</td>
+                                <td class="border-b p-2">従業員名（部分一致）で絞り込み。</td>
+                                <td class="border-b p-2 font-mono">?employee_name=山田</td>
+                            </tr>
+                            <tr>
+                                <td class="border-b p-2 font-mono">line_name</td>
+                                <td class="border-b p-2">ライン名（部分一致）で絞り込み。</td>
+                                <td class="border-b p-2 font-mono">?line_name=組立</td>
+                            </tr>
+                            <tr>
+                                <td class="border-b p-2 font-mono">start_date</td>
+                                <td class="border-b p-2">期間検索（開始日）。 `report_date` がこの日以降。</td>
+                                <td class="border-b p-2 font-mono">?start_date=2025-11-01</td>
+                            </tr>
+                            <tr>
+                                <td class="border-b p-2 font-mono">end_date</td>
+                                <td class="border-b p-2">期間検索（終了日）。 `report_date` がこの日以前。</td>
+                                <td class="border-b p-2 font-mono">?end_date=2025-11-30</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                    <h3 class="text-lg font-semibold mt-6 mb-2">成功レスポンス (200 OK)</h3>
+                    <p class="text-sm mb-2">※従業員名(employee_name)とライン名(line_name)は、API側でJOINして返します。</p>
+                    <pre><code class="language-json">[
+    {
+        "report_id": 1,
+        "employee_id": 12,
+        "employee_name": "山田 太郎",
+        "line_id": 1,
+        "line_name": "組立ラインA",
+        "report_date": "2025-11-05",
+        "notes": "材料Aの供給が一時停止したため、午後から別作業。",
+        "updated_at": "2025-11-05T17:30:00+09:00"
+    },
+    {
+        "report_id": 2,
+        "employee_id": 15,
+        "employee_name": "佐藤 花子",
+        "line_id": 2,
+        "line_name": "塗装ラインB",
+        "report_date": "2025-11-05",
+        "notes": "塗料ノズルの定期清掃実施。特に問題なし。",
+        "updated_at": "2025-11-05T17:35:00+09:00"
+    }
+]</code></pre>
+                </div>
+            </section>
+
+            <section id="get-report-by-id">
+                <h2 class="text-2xl font-bold border-b-2 border-indigo-500 pb-2 mb-4">2. 特定の日報取得</h2>
+                <div class="bg-white p-6 rounded-lg shadow-md">
+                    <div class="flex items-center space-x-4 mb-4">
+                        <span class="method-badge get">GET</span>
+                        <span class="font-mono text-lg font-semibold">/api/reports/{id}</span>
+                        <span class="bg-red-500 text-white px-3 py-1 rounded-full text-sm font-bold">優先度: S</span>
+                    </div>
+                    <p class="mb-4">IDを指定して、特定の日報1件の詳細情報をGETする。</p>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">成功レスポンス (200 OK)</h3>
+                    <pre><code class="language-json">{
+    "report_id": 1,
+    "employee_id": 12,
+    "employee_name": "山田 太郎",
+    "line_id": 1,
+    "line_name": "組立ラインA",
+    "report_date": "2025-11-05",
+    "notes": "材料Aの供給が一時停止したため、午後から別作業。",
+    "updated_at": "2025-11-05T17:30:00+09:00"
+}</code></pre>
+                    <h3 class="text-lg font-semibold mt-6 mb-2">エラーレスポンス (404 Not Found)</h3>
+                    <pre><code class="language-json">{
+    "message": "日報が見つかりません"
+}</code></pre>
+                </div>
+            </section>
+
+            <section id="create-report">
+                <h2 class="text-2xl font-bold border-b-2 border-indigo-500 pb-2 mb-4">3. 日報追加</h2>
+                <div class="bg-white p-6 rounded-lg shadow-md">
+                    <div class="flex items-center space-x-4 mb-4">
+                        <span class="method-badge post">POST</span>
+                        <span class="font-mono text-lg font-semibold">/api/reports</span>
+                        <span class="bg-red-500 text-white px-3 py-1 rounded-full text-sm font-bold">優先度: S</span>
+                    </div>
+                    <p class="mb-4">新しい日報を登録するためのAPIです。データは JSON 形式で送信します。</p>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">リクエストボディ</h3>
+                    <pre><code class="language-json">{
+    "employee_id": 12,
+    "line_id": 1,
+    "report_date": "2025-11-06",
+    "notes": "本日は通常通り作業完了。"
+}</code></pre>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">成功レスポンス (201 Created)</h3>
+                    <p class="text-sm mb-2">登録が成功すると、ID が付与された日報データ（JOIN 済み）が返却されます。</p>
+                    <pre><code class="language-json">{
+    "report_id": 3,
+    "employee_id": 12,
+    "employee_name": "山田 太郎",
+    "line_id": 1,
+    "line_name": "組立ラインA",
+    "report_date": "2025-11-06",
+    "notes": "本日は通常通り作業完了。",
+    "updated_at": "2025-11-06T17:31:00+09:00"
+}</code></pre>
+                </div>
+            </section>
+
+            <section id="update-report">
+                <h2 class="text-2xl font-bold border-b-2 border-indigo-500 pb-2 mb-4">4. 日報情報更新</h2>
+                <div class="bg-white p-6 rounded-lg shadow-md">
+                    <div class="flex items-center space-x-4 mb-4">
+                        <span class="method-badge put">PUT</span>
+                        <span class="font-mono text-lg font-semibold">/api/reports/{id}</span>
+                        <span class="bg-orange-500 text-white px-3 py-1 rounded-full text-sm font-bold">優先度: A</span>
+                    </div>
+                    <p class="mb-4">ID で指定した日報の情報を全件更新します。</p>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">リクエストボディ</h3>
+                    <pre><code class="language-json">{
+    "employee_id": 12,
+    "line_id": 1,
+    "report_date": "2025-11-06",
+    "notes": "本日は通常通り作業完了。\n追記：B部品の在庫確認実施。"
+}</code></pre>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">成功レスポンス (200 OK)</h3>
+                    <pre><code class="language-json">{
+    "report_id": 3,
+    "employee_id": 12,
+    "employee_name": "山田 太郎",
+    "line_id": 1,
+    "line_name": "組立ラインA",
+    "report_date": "2025-11-06",
+    "notes": "本日は通常通り作業完了。\n追記：B部品の在庫確認実施。",
+    "updated_at": "2025-11-06T18:00:00+09:00"
+}</code></pre>
+                </div>
+            </section>
+
+            <section id="delete-report">
+                <h2 class="text-2xl font-bold border-b-2 border-indigo-500 pb-2 mb-4">5. 日報削除</h2>
+                <div class="bg-white p-6 rounded-lg shadow-md">
+                    <div class="flex items-center space-x-4 mb-4">
+                        <span class="method-badge delete">DELETE</span>
+                        <span class="font-mono text-lg font-semibold">/api/reports/{id}</span>
+                        <span class="bg-orange-500 text-white px-3 py-1 rounded-full text-sm font-bold">優先度: A</span>
+                    </div>
+                    <p class="mb-4">
+                        IDで指定した日報を削除する。従業員APIと同様、物理削除で設計。
+                    </p>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">成功レスポンス (204 No Content)</h3>
+                    <p>削除が成功したら、ボディには何も返ってこない。</p>
+                </div>
+            </section>
+
+        </div>
+
+        <footer class="text-center text-slate-500 mt-12 py-4">
+            &copy; 2024 API Design by Gemini. All Rights Reserved.
+        </footer>
+    </div>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+    <script>
+        // ページ内のすべてのコードにハイライトを適用
+        hljs.highlightAll();
+    </script>
+    <script>
+        (function(){ const blocks=document.querySelectorAll('pre code.language-json, pre code.language-http, pre code.language-sql'); blocks.forEach(code=>{ const pre=code.parentElement; if(!pre.classList.contains('code-block-wrapper')) pre.classList.add('code-block-wrapper'); if(pre.querySelector('.copy-btn')) return; const btn=document.createElement('button'); btn.type='button'; btn.className='copy-btn'; btn.innerHTML='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg><span>Copy</span>'; btn.addEventListener('click',async()=>{ const raw=code.innerText.replace(/\n+$/,''); try{ await navigator.clipboard.writeText(raw); btn.classList.add('copied'); const original=btn.innerHTML; btn.innerHTML='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg><span>Copied!</span>'; setTimeout(()=>{btn.classList.remove('copied'); btn.innerHTML=original;},1800);}catch(e){ btn.innerHTML='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg><span style="color:#fee2e2">Failed</span>'; setTimeout(()=>{btn.innerHTML='Copy';},2000);} }); pre.appendChild(btn); }); })();
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/docs/API\350\250\255\350\250\210/\347\224\237\347\224\243\346\225\260\347\256\241\347\220\206\343\203\232\343\203\274\343\202\270.html" "b/docs/API\350\250\255\350\250\210/\347\224\237\347\224\243\346\225\260\347\256\241\347\220\206\343\203\232\343\203\274\343\202\270.html"
new file mode 100644
index 000000000..b179a6e03
--- /dev/null
+++ "b/docs/API\350\250\255\350\250\210/\347\224\237\347\224\243\346\225\260\347\256\241\347\220\206\343\203\232\343\203\274\343\202\270.html"
@@ -0,0 +1,214 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>生産数管理API設計書</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <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=Inter:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/vs2015.min.css">
+    <script src="../sidebar.js" defer></script>
+    <style>
+        body {
+            font-family: 'Inter', 'Noto Sans JP', sans-serif;
+        }
+        .method-badge {
+            font-size: 0.8rem;
+            font-weight: 700;
+            padding: 0.2em 0.6em;
+            border-radius: 0.25rem;
+            color: white;
+            display: inline-block;
+            width: 80px;
+            text-align: center;
+        }
+        .get { background-color: #3b82f6; }
+        .post { background-color: #22c55e; }
+        
+        pre code.hljs {
+            padding: 1rem;
+            border-radius: 0.5rem;
+            font-size: 0.875rem;
+        }
+    /* Copy button */
+    .code-block-wrapper { position: relative; }
+    .copy-btn { position:absolute; top:4px; right:6px; background:rgba(51,65,85,.85); color:#f1f5f9; font-size:12px; font-weight:600; padding:6px 12px 6px 10px; border-radius:8px; cursor:pointer; line-height:1; display:flex; align-items:center; gap:6px; backdrop-filter:blur(2px); border:1px solid rgba(255,255,255,.08); transition:transform .16s, box-shadow .22s, background-color .25s ease; box-shadow:0 2px 6px -2px rgba(15,23,42,.35);} .copy-btn svg{width:16px;height:16px;} .copy-btn:hover{background:rgba(71,85,105,.92); transform:translateY(-2px); box-shadow:0 6px 14px -4px rgba(15,23,42,.45);} .copy-btn:active{transform:translateY(0); box-shadow:0 3px 8px -4px rgba(15,23,42,.4);} .copy-btn.copied{background:linear-gradient(135deg,#16a34a 0%,#15803d 70%);} .copy-btn.copied svg{animation:pop .4s ease;} @keyframes pop{0%{transform:scale(.6) rotate(-20deg);}60%{transform:scale(1.15);}100%{transform:scale(1);}}
+    </style>
+</head>
+<body class="bg-slate-50 text-slate-800">
+
+    <div class="container mx-auto p-4 sm:p-6 lg:p-8">
+        <header class="mb-8">
+            <div class="flex items-center justify-between mb-4">
+                <div class="flex items-center space-x-4">
+                    <svg class="w-12 h-12 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
+                    </svg>
+                    <h1 class="text-4xl font-bold text-slate-900">生産数管理API 設計書</h1>
+                </div>
+                <a href="../index.html" class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition-colors">
+                    ← トップページに戻る
+                </a>
+            </div>
+            <div class="mt-4 p-4 bg-indigo-100 border-l-4 border-indigo-500 text-indigo-700 rounded-r-lg">
+                <p class="font-bold">対象ページ: 生産数管理ページ</p>
+                <p class="text-sm mt-1">このドキュメントは、「生産数管理ページ」のグラフや表を表示するためのAPI仕様を定義します。</p>
+            </div>
+        </header>
+
+        <div class="space-y-12">
+
+            <!-- 0. DB設計 -->
+            <section id="db-design">
+                <h2 class="text-2xl font-bold border-b-2 border-indigo-500 pb-2 mb-4">0. DB設計</h2>
+                <div class="bg-white p-6 rounded-lg shadow-md">
+                    <p class="mb-4">生産実績の集計・一覧は <code>production_reports</code> を基本とします。</p>
+                    <pre><code class="language-sql">CREATE TABLE production_reports (
+    prodreport_id SERIAL PRIMARY KEY,              -- 自動採番
+    prodreport_date DATE NOT NULL,                 -- 日付
+    prodreport_product_name VARCHAR(100) NOT NULL, -- 製品名
+    prodreport_plan_quantity INT NOT NULL,         -- 計画数量
+    prodreport_actual_quantity INT NOT NULL,       -- 実績数量
+    prodreport_achievement_rate DECIMAL(5,2),      -- 達成率（例: 95.00）
+    prodreport_defective_quantity INT NOT NULL,    -- 不良数
+    prodreport_employee_id INT,                    -- 担当者ID
+    prodreport_remarks TEXT,                       -- 備考
+    FOREIGN KEY (prodreport_employee_id) REFERENCES employees(employee_id)
+);</code></pre>
+                    <p class="mt-2 text-sm text-slate-600">担当者名の表示は <code>employees</code> とJOINして取得します。性能要件に応じてインデックス（<code>prodreport_date</code>, <code>prodreport_product_name</code> など）を検討してください。</p>
+                </div>
+            </section>
+
+            <!-- 1. 生産サマリーデータ取得 -->
+            <section id="get-summary">
+                <h2 class="text-2xl font-bold border-b-2 border-indigo-500 pb-2 mb-4">1. 生産サマリーデータ取得</h2>
+                <div class="bg-white p-6 rounded-lg shadow-md">
+                    <div class="flex items-center space-x-4 mb-4">
+                        <span class="method-badge get">GET</span>
+                        <span class="font-mono text-lg font-semibold">/api/production/summary</span>
+                        <span class="bg-yellow-500 text-white px-3 py-1 rounded-full text-sm font-bold">優先度: B</span>
+                    </div>
+                    <p class="mb-4">グラフや当日の進捗など、画面の上部で利用するデータをまとめて取得するAPIです。単一リクエストで主要指標を表示できるため効率的です。</p>
+                    
+                    <h3 class="text-lg font-semibold mt-6 mb-2">クエリパラメータ</h3>
+                    <table class="w-full text-left border-collapse">
+                        <thead>
+                            <tr>
+                                <th class="border-b-2 p-2">パラメータ</th>
+                                <th class="border-b-2 p-2">説明</th>
+                                <th class="border-b-2 p-2">例</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td class="border-b p-2 font-mono">period</td>
+                                <td class="border-b p-2">グラフの表示期間を指定する (`week` or `month`)。</td>
+                                <td class="border-b p-2 font-mono">?period=week</td>
+                            </tr>
+                        </tbody>
+                    </table>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">成功レスポンス (200 OK)</h3>
+                    <pre><code class="language-json">{
+    "today_summary": {
+        "plan": 4500,
+        "actual": 4520
+    },
+    "period_summary": {
+        "total_actual": 25860,
+        "total_defective": 228,
+        "yield_rate": 99.1,
+        "defective_reasons": [
+            { "reason": "傷", "count": 110 },
+            { "reason": "寸法不良", "count": 57 },
+            { "reason": "塗装ムラ", "count": 35 },
+            { "reason": "異物混入", "count": 26 }
+        ]
+    },
+    "daily_trends": [
+        { "date": "2025-07-29", "plan": 3000, "actual": 2960, "defective": 35 },
+        { "date": "2025-07-30", "plan": 3500, "actual": 3510, "defective": 20 },
+        { "date": "2025-07-31", "plan": 4000, "actual": 4050, "defective": 45 },
+        { "date": "2025-08-01", "plan": 4000, "actual": 3950, "defective": 30 },
+        { "date": "2025-08-02", "plan": 2500, "actual": 2480, "defective": 5 },
+        { "date": "2025-08-03", "plan": 4000, "actual": 4010, "defective": 40 },
+        { "date": "2025-08-04", "plan": 4500, "actual": 4520, "defective": 68 }
+    ]
+}</code></pre>
+                </div>
+            </section>
+
+            <!-- 2. 生産レポート一覧の取得 -->
+            <section id="get-reports">
+                <h2 class="text-2xl font-bold border-b-2 border-indigo-500 pb-2 mb-4">2. 生産レポート一覧の取得</h2>
+                <div class="bg-white p-6 rounded-lg shadow-md">
+                    <div class="flex items-center space-x-4 mb-4">
+                        <span class="method-badge get">GET</span>
+                        <span class="font-mono text-lg font-semibold">/api/production/reports</span>
+                        <span class="bg-yellow-500 text-white px-3 py-1 rounded-full text-sm font-bold">優先度: B</span>
+                    </div>
+                    <p class="mb-4">ページ下部のテーブルに表示する、詳しい生産レポートのリストを取得するAPI。</p>
+                     <h3 class="text-lg font-semibold mt-6 mb-2">クエリパラメータ</h3>
+                    <table class="w-full text-left border-collapse">
+                        <thead>
+                            <tr>
+                                <th class="border-b-2 p-2">パラメータ</th>
+                                <th class="border-b-2 p-2">説明</th>
+                                <th class="border-b-2 p-2">例</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td class="border-b p-2 font-mono">date</td>
+                                <td class="border-b p-2">日付 (YYYY-MM-DD形式)。</td>
+                                <td class="border-b p-2 font-mono">?date=2025-08-04</td>
+                            </tr>
+                            <tr>
+                                <td class="border-b p-2 font-mono">product_name</td>
+                                <td class="border-b p-2">製品名での部分一致検索。</td>
+                                <td class="border-b p-2 font-mono">?product_name=A-102</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                    <h3 class="text-lg font-semibold mt-6 mb-2">成功レスポンス (200 OK)</h3>
+                    <pre><code class="language-json">[
+    {
+        "id": 101,
+        "date": "2025-08-04",
+        "product_name": "製品A-102",
+        "plan": 2000,
+        "actual": 1980,
+        "achievement_rate": 99.0,
+        "defective": 35,
+        "employee_name": "山田 太郎"
+    },
+    {
+        "id": 102,
+        "date": "2025-08-04",
+        "product_name": "製品C-301",
+        "plan": 1500,
+        "actual": 1450,
+        "achievement_rate": 96.67,
+        "defective": 21,
+        "employee_name": "佐藤 花子"
+    }
+]</code></pre>
+                </div>
+            </section>
+
+        <footer class="text-center text-slate-500 mt-12 py-4">
+            &copy; 2024 API Design by Gemini. All Rights Reserved.
+        </footer>
+    </div>
+    
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+    <script>
+        hljs.highlightAll();
+    </script>
+    <script>
+        (function(){ const blocks=document.querySelectorAll('pre code.language-json, pre code.language-http, pre code.language-sql'); blocks.forEach(code=>{ const pre=code.parentElement; if(!pre.classList.contains('code-block-wrapper')) pre.classList.add('code-block-wrapper'); if(pre.querySelector('.copy-btn')) return; const btn=document.createElement('button'); btn.type='button'; btn.className='copy-btn'; btn.innerHTML='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg><span>Copy</span>'; btn.addEventListener('click',async()=>{ const raw=code.innerText.replace(/\n+$/,''); try{ await navigator.clipboard.writeText(raw); btn.classList.add('copied'); const original=btn.innerHTML; btn.innerHTML='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg><span>Copied!</span>'; setTimeout(()=>{btn.classList.remove('copied'); btn.innerHTML=original;},1800);}catch(e){ btn.innerHTML='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg><span style="color:#fee2e2">Failed</span>'; setTimeout(()=>{btn.innerHTML='Copy';},2000);} }); pre.appendChild(btn); }); })();
+    </script>
+</body>
+</html>
diff --git "a/docs/API\350\250\255\350\250\210/\347\224\237\347\224\243\346\251\237\346\242\260\343\202\271\343\203\206\343\203\274\343\202\277\343\202\271.html" "b/docs/API\350\250\255\350\250\210/\347\224\237\347\224\243\346\251\237\346\242\260\343\202\271\343\203\206\343\203\274\343\202\277\343\202\271.html"
new file mode 100644
index 000000000..ff8735fe0
--- /dev/null
+++ "b/docs/API\350\250\255\350\250\210/\347\224\237\347\224\243\346\251\237\346\242\260\343\202\271\343\203\206\343\203\274\343\202\277\343\202\271.html"
@@ -0,0 +1,430 @@
+<!DOCTYPE html>
+<html lang="ja">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>生産機械状況API設計書</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <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=Inter:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;700&display=swap"
+        rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/vs2015.min.css">
+    <script src="../sidebar.js" defer></script>
+    <style>
+        body {
+            font-family: 'Inter', 'Noto Sans JP', sans-serif;
+        }
+
+        .method-badge {
+            font-size: 0.8rem;
+            font-weight: 700;
+            padding: 0.2em 0.6em;
+            border-radius: 0.25rem;
+            color: white;
+            display: inline-block;
+            width: 80px;
+            text-align: center;
+        }
+
+        .get { background-color: #3b82f6; }
+        .post { background-color: #22c55e; }
+        .put { background-color: #f97316; }
+        .delete { background-color: #ef4444; }
+
+        .websocket {
+            background-color: #9333ea; /* purple */
+        }
+
+        pre code.hljs {
+            padding: 1rem;
+            border-radius: 0.5rem;
+            font-size: 0.875rem;
+        }
+    /* Copy button */
+    .code-block-wrapper { position: relative; }
+    .copy-btn { position:absolute; top:4px; right:6px; background:rgba(51,65,85,.85); color:#f1f5f9; font-size:12px; font-weight:600; padding:6px 12px 6px 10px; border-radius:8px; cursor:pointer; line-height:1; display:flex; align-items:center; gap:6px; backdrop-filter:blur(2px); border:1px solid rgba(255,255,255,.08); transition:transform .16s, box-shadow .22s, background-color .25s; box-shadow:0 2px 6px -2px rgba(15,23,42,.35);} .copy-btn svg{width:16px;height:16px;} .copy-btn:hover{background:rgba(71,85,105,.92); transform:translateY(-2px); box-shadow:0 6px 14px -4px rgba(15,23,42,.45);} .copy-btn:active{transform:translateY(0); box-shadow:0 3px 8px -4px rgba(15,23,42,.4);} .copy-btn.copied{background:linear-gradient(135deg,#16a34a 0%,#15803d 70%);} .copy-btn.copied svg{animation:pop .4s ease;} @keyframes pop{0%{transform:scale(.6) rotate(-20deg);}60%{transform:scale(1.15);}100%{transform:scale(1);}}
+    </style>
+</head>
+
+<body class="bg-slate-50 text-slate-800">
+
+    <div class="container mx-auto p-4 sm:p-6 lg:p-8">
+        <header class="mb-8">
+            <div class="flex items-center justify-between mb-4">
+                <div class="flex items-center space-x-4">
+                    <svg class="w-12 h-12 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
+                    </svg>
+                    <h1 class="text-4xl font-bold text-slate-900">生産機械状況API 設計書</h1>
+                </div>
+                <a href="../index.html" class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition-colors">
+                    ← トップページに戻る
+                </a>
+            </div>
+            <div class="mt-4 p-4 bg-indigo-100 border-l-4 border-indigo-500 text-indigo-700 rounded-r-lg">
+                <p class="font-bold">対象ページ: 生産機械状況ページ</p>
+                <p class="text-sm mt-1">このドキュメントは、「生産機械状況ページ」のフロントエンドとバックエンドを連携させるためのAPI仕様を定義します。</p>
+            </div>
+        </header>
+
+        <div class="space-y-12">
+
+            <!-- 0. DB設計 -->
+            <section id="db-design">
+                <h2 class="text-2xl font-bold border-b-2 border-indigo-500 pb-2 mb-4">0. DB設計</h2>
+                <div class="bg-white p-6 rounded-lg shadow-md">
+                    <p class="mb-4">このページは機械マスタ、状態、ログの3テーブルを想定します。</p>
+
+                    <h3 class="text-lg font-semibold mt-4 mb-2">machines（機械マスタ）</h3>
+                    <pre><code class="language-sql">CREATE TABLE machines (
+    machine_id SERIAL PRIMARY KEY,            -- 主キー: 機械ID
+    machine_name VARCHAR(100) UNIQUE NOT NULL -- 機械名称（ユニーク）
+);</code></pre>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">machine_status（機械状態）</h3>
+                    <pre><code class="language-sql">CREATE TABLE machine_status (
+    machine_status_id SERIAL PRIMARY KEY,                        -- 主キー
+    machine_data_time TIMESTAMP DEFAULT CURRENT_TIMESTAMP,       -- 状態記録時刻
+    machine_id INT NOT NULL,                                     -- 対象機械ID（machines.machine_id）
+    machine_start_time TIMESTAMP NULL,                           -- 機械の起動時刻（稼働開始のタイムスタンプ）
+    today_production_count INT DEFAULT 0,                        -- 今日の累計生産数
+    machine_last_inspection DATE,                                -- 最終点検日
+    inspection_interval_days INT DEFAULT 90 NOT NULL             -- 点検間隔（日数）
+    -- ,FOREIGN KEY (machine_id) REFERENCES machines(machine_id) -- 必要なら制約を有効化
+);</code></pre>
+                    <div class="mt-2 text-sm text-slate-600">稼働時間は <code>started_at</code> 等の元データから計算配信する設計でもOKです。</div>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">machine_logs（機械エラーログ）</h3>
+                    <pre><code class="language-sql">CREATE TABLE machine_logs (
+    log_id SERIAL PRIMARY KEY,                                           -- ログID
+    machine_name VARCHAR(100) NOT NULL,                                  -- 対象機械NAME
+    unit_id INT NULL,                                                    -- 対象ユニットID (任意)
+    timestamp TIMESTAMP DEFAULT CURRENT_TIMESTAMP,                       -- 発生時刻
+    log_type VARCHAR(10) CHECK (log_type IN ('error','warning','info')), -- 種別
+    title VARCHAR(100) NOT NULL,                                         -- ログタイトル（コード + 概要）
+    message TEXT                                                         -- 詳細メッセージ
+);</code></pre>
+                </div>
+            </section>
+
+            <!-- 1. 機械の基本情報・稼働データ取得 -->
+            <section id="get-machine-status">
+                <h2 class="text-2xl font-bold border-b-2 border-indigo-500 pb-2 mb-4">1. 機械の基本情報・稼働データ取得</h2>
+                <div class="bg-white p-6 rounded-lg shadow-md">
+                    <div class="flex items-center space-x-4 mb-4">
+                        <span class="method-badge get">GET</span>
+                        <span class="font-mono text-lg font-semibold">/api/machines/{id}</span>
+                        <span class="bg-orange-500 text-white px-3 py-1 rounded-full text-sm font-bold">優先度: A</span>
+                    </div>
+                    <p class="mb-4">ID で指定した機械の基本的な情報と、その日の稼働データをまとめて取得するAPIです。ページを開いた際の初期表示で利用します。</p>
+
+                    <div class="mt-4 p-4 bg-amber-100 border-l-4 border-amber-500 text-amber-700 rounded-r-lg">
+                        <p class="font-bold">設計メモ: 稼働時間の扱い</p>
+                        <ul class="list-disc pl-6 text-sm mt-2">
+                            <li>稼働秒数 (today_uptime_seconds) をDBに逐次保存しない。毎秒更新が必要となり負荷が高いため。</li>
+                            <li>代わりに「今日の起動日時」(<span class="font-mono">started_at</span>) を保存し、稼働時間は <span class="font-mono">started_at</span> と現在時刻の差分で算出する。</li>
+                            <li>フロントは表示更新時に差分を計算するか、バックエンド/WSが算出した値を返してもOK。いずれもソースは <span class="font-mono">started_at</span>。</li>
+                        </ul>
+                    </div>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">成功レスポンス (200 OK)</h3>
+<!-- 機械の基本情報・稼働データ取得APIの成功レスポンス例 -->
+<pre><code class="language-json">{
+    "machine_id": 1,                          // 機械ID
+    "machine_name": "半自動表層バネどめ機",     // 機械名称
+    "started_at": "2025-10-01T10:04:56Z",     // 今日の起動日時（ISO8601形式）
+    "today_uptime_seconds": 13714,            // 今日の稼働秒数（起動からの経過秒数）
+    "today_uptime_hms": "03:48:34",           // 今日の稼働時間（hh:mm:ss形式）
+    "today_production_count": 4,              // 今日の累計生産数
+    "last_inspection_date": "2025-10-01",     // 最終点検日
+    "next_inspection_date": "2025-10-11",     // 次回点検日
+    "inspection_interval_days": 10            // 点検間隔（日数）
+}</code></pre>
+                    <h3 class="text-lg font-semibold mt-6 mb-2">エラーレスポンス (404 Not Found)</h3>
+                    <pre><code class="language-json">{
+    "error": "Machine not found"
+}</code></pre>
+                </div>
+            </section>
+
+            <!-- 2. 機械のエラーログ取得 -->
+            <section id="get-logs">
+                <h2 class="text-2xl font-bold border-b-2 border-indigo-500 pb-2 mb-4">2. 機械のエラーログ取得</h2>
+                <div class="bg-white p-6 rounded-lg shadow-md">
+                    <div class="flex items-center space-x-4 mb-4">
+                        <span class="method-badge get">GET</span>
+                        <span class="font-mono text-lg font-semibold">/api/machines/{id}/logs</span>
+                        <span class="bg-orange-500 text-white px-3 py-1 rounded-full text-sm font-bold">優先度: A</span>
+                    </div>
+                    <p class="mb-4">指定した機械のエラーログを取得します。日付やログの種類で絞り込めるように設計します。</p>
+
+                    <div class="mt-4 p-4 bg-sky-100 border-l-4 border-sky-500 text-sky-800 rounded-r-lg">
+                        <p class="font-bold">設計メモ: エラーコード体系</p>
+                        <ul class="list-disc pl-6 text-sm mt-2">
+                            <li>コードは <span class="font-mono">E-xxx</span>（error）, <span class="font-mono">W-xxx</span>（warning）, <span class="font-mono">I-xxx</span>（info）で表記し、<span class="font-mono">title</span> は「<span class="font-mono">コード: 概要</span>」の形式で返す。</li>
+                            <li>サーバーは <span class="font-mono">log_type</span> と <span class="font-mono">title</span> のコード接頭辞を整合させる（例: <span class="font-mono">E-001</span> なら <span class="font-mono">log_type: "error"</span>）。</li>
+                            <li><span class="font-mono">unit_id</span> は対象がない場合 <span class="font-mono">null</span> にする（空文字 "" は使わない）。</li>
+                        </ul>
+                    </div>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">エラーコード一覧</h3>
+                    <div class="overflow-x-auto">
+                        <table class="w-full text-left border-collapse">
+                            <thead>
+                                <tr>
+                                    <th class="border-b-2 p-2">コード</th>
+                                    <th class="border-b-2 p-2">ログ種別</th>
+                                    <th class="border-b-2 p-2">タイトル</th>
+                                    <th class="border-b-2 p-2">説明</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td class="border-b p-2 font-mono">E-001</td>
+                                    <td class="border-b p-2"><span class="method-badge get" style="background-color:#ef4444">error</span></td>
+                                    <td class="border-b p-2">非常停止ボタン作動</td>
+                                    <td class="border-b p-2">非常停止が検知され、機械が即時停止。</td>
+                                </tr>
+                                <tr>
+                                    <td class="border-b p-2 font-mono">E-002</td>
+                                    <td class="border-b p-2"><span class="method-badge get" style="background-color:#ef4444">error</span></td>
+                                    <td class="border-b p-2">残弾数 致命的低下</td>
+                                    <td class="border-b p-2">弾数が致命的に少なく、運転継続不可。</td>
+                                </tr>
+                                <tr>
+                                    <td class="border-b p-2 font-mono">E-003</td>
+                                    <td class="border-b p-2"><span class="method-badge get" style="background-color:#ef4444">error</span></td>
+                                    <td class="border-b p-2">点検時期 超過</td>
+                                    <td class="border-b p-2">DBで管理する点検期限を超過。安全のため停止。</td>
+                                </tr>
+                                <tr>
+                                    <td class="border-b p-2 font-mono">E-099</td>
+                                    <td class="border-b p-2"><span class="method-badge get" style="background-color:#ef4444">error</span></td>
+                                    <td class="border-b p-2">その他 致命的停止エラー</td>
+                                    <td class="border-b p-2">上記以外の致命的な停止原因（PLCからの致命アラーム等）。</td>
+                                </tr>
+                                <tr>
+                                    <td class="border-b p-2 font-mono">W-001</td>
+                                    <td class="border-b p-2"><span class="method-badge get" style="background-color:#f59e0b">warning</span></td>
+                                    <td class="border-b p-2">残弾数 低下</td>
+                                    <td class="border-b p-2">弾数が少なく、補充推奨。</td>
+                                </tr>
+                                <tr>
+                                    <td class="border-b p-2 font-mono">W-002</td>
+                                    <td class="border-b p-2"><span class="method-badge get" style="background-color:#f59e0b">warning</span></td>
+                                    <td class="border-b p-2">点検時期 間近</td>
+                                    <td class="border-b p-2">DBで管理する点検期限が近い。計画調整推奨。</td>
+                                </tr>
+                                <tr>
+                                    <td class="border-b p-2 font-mono">W-099</td>
+                                    <td class="border-b p-2"><span class="method-badge get" style="background-color:#f59e0b">warning</span></td>
+                                    <td class="border-b p-2">その他 軽微なエラー</td>
+                                    <td class="border-b p-2">停止を伴わない軽微な異常。</td>
+                                </tr>
+                                <tr>
+                                    <td class="border-b p-2 font-mono">I-001</td>
+                                    <td class="border-b p-2"><span class="method-badge get" style="background-color:#10b981">info</span></td>
+                                    <td class="border-b p-2">生産機械 通電（JETSON検知）</td>
+                                    <td class="border-b p-2">機械の通電（電源ON）を検知。</td>
+                                </tr>
+                                <tr>
+                                    <td class="border-b p-2 font-mono">I-002</td>
+                                    <td class="border-b p-2"><span class="method-badge get" style="background-color:#10b981">info</span></td>
+                                    <td class="border-b p-2">PLC スタンバイ</td>
+                                    <td class="border-b p-2">PLCが待機状態になったことを通知。</td>
+                                </tr>
+                                <tr>
+                                    <td class="border-b p-2 font-mono">I-003</td>
+                                    <td class="border-b p-2"><span class="method-badge get" style="background-color:#10b981">info</span></td>
+                                    <td class="border-b p-2">生産機械 シャットダウン（JETSON検知）</td>
+                                    <td class="border-b p-2">機械の電源OFF（シャットダウン）を検知。</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">クエリパラメータ</h3>
+                    <table class="w-full text-left border-collapse">
+                        <thead>
+                            <tr>
+                                <th class="border-b-2 p-2">パラメータ</th>
+                                <th class="border-b-2 p-2">説明</th>
+                                <th class="border-b-2 p-2">例</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td class="border-b p-2 font-mono">date</td>
+                                <td class="border-b p-2">対象の日付 (YYYY-MM-DD形式)。指定しない場合はすべて。</td>
+                                <td class="border-b p-2 font-mono">?date=2025-07-15</td>
+                            </tr>
+                            <tr>
+                                <td class="border-b p-2 font-mono">type</td>
+                                <td class="border-b p-2">ログの種類 (`error`, `warning`, `info`)。指定しない場合はすべて。</td>
+                                <td class="border-b p-2 font-mono">?type=error</td>
+                            </tr>
+                             <tr>
+                                <td class="border-b p-2 font-mono">page</td>
+                                <td class="border-b p-2">ページ番号。</td>
+                                <td class="border-b p-2 font-mono">?page=1</td>
+                            </tr>
+                            <tr>
+                                <td class="border-b p-2 font-mono">limit</td>
+                                <td class="border-b p-2">1ページあたりの件数。</td>
+                                <td class="border-b p-2 font-mono">?limit=20</td>
+                            </tr>
+                        </tbody>
+                    </table>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">成功レスポンス (200 OK)</h3>
+                    <pre><code class="language-json">{
+    "total_pages": 1,
+    "current_page": 1,
+    "logs": [
+        {
+            "log_id": 501,
+            "unit_id": 1,
+            "timestamp": "2025-07-15T10:15:32Z",
+            "log_type": "error",
+            "title": "E-001: 非常停止ボタン作動",
+            "message": "オペレーターにより緊急停止されました。"
+        },
+        {
+            "log_id": 500,
+            "unit_id": 3,
+            "timestamp": "2025-07-15T09:30:11Z",
+            "log_type": "warning",
+            "title": "W-001: 残弾数低下",
+            "message": "ホッグリングの残弾数が少なくなっています｡"
+        },
+        {
+            "log_id": 499,
+            "unit_id": null,
+            "timestamp": "2025-07-15T08:00:05Z",
+            "log_type": "info",
+            "title": "I-001: 生産機械 通電（JETSON検知）",
+            "message": ""
+        }
+    ]
+}</code></pre>
+                </div>
+            </section>
+
+            <!-- 3. リアルタイム機械状況 -->
+            <section id="realtime">
+                <h2 class="text-2xl font-bold border-b-2 border-indigo-500 pb-2 mb-4">3. リアルタイム機械状況 (WebSocket)</h2>
+                <div class="bg-white p-6 rounded-lg shadow-md">
+                    <div class="flex items-center space-x-4 mb-4">
+                        <span class="method-badge websocket">WebSocket</span>
+                        <span class="font-mono text-lg font-semibold">/ws/machines/{id}</span>
+                        <span class="bg-gray-500 text-white px-3 py-1 rounded-full text-sm font-bold">優先度: C</span>
+                    </div>
+                    <p class="mb-4">機械のステータスや稼働データ、新しいログをリアルタイムでフロントエンドへ配信するための WebSocket 通信です。これにより画面を自動更新でき、鮮度の高い情報を提供できます。</p>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">サーバーから送信されるメッセージ</h3>
+                    <p class="text-sm mb-2">イベントの種類 (`event`) によって、送信されるデータ (`data`) の内容が変わります。</p>
+
+                    <h4 class="font-semibold mt-4 mb-2">イベント: `status_update` (ステータス更新)</h4>
+                    <pre><code class="language-json">{
+    "event": "status_update",
+    "data": {
+        "status": "異常あり",
+        "today_uptime_seconds": 30360,
+        "today_production_count": 1521
+    }
+}</code></pre>
+                    <p class="text-xs text-slate-600 mt-2">注: <span class="font-mono">today_uptime_seconds</span> はDBに保存せず、初回GETで取得した <span class="font-mono">started_at</span> と現在時刻の差分から算出すること（サーバーで算出して配信する場合も、元データは <span class="font-mono">started_at</span>）。</p>
+
+                    <h4 class="font-semibold mt-4 mb-2">イベント: `new_log` (新規ログ発生)</h4>
+                    <pre><code class="language-json">{
+    "event": "new_log",
+    "data": {
+        "log_id": 502,
+        "timestamp": "2025-07-15T10:16:00Z",
+        "log_type": "error",
+        "title": "E-001: 非常停止ボタン作動",
+        "message": "オペレーターにより緊急停止されました。"
+    }
+}</code></pre>
+                </div>
+            </section>
+            
+
+                        <!-- 6. 点検間隔の変更 -->
+            <section id="update-inspection-interval">
+                <h2 class="text-2xl font-bold border-b-2 border-indigo-500 pb-2 mb-4">6. 点検間隔の変更</h2>
+                <div class="bg-white p-6 rounded-lg shadow-md">
+                    <div class="flex items-center space-x-4 mb-4">
+                        <span class="method-badge put">PUT</span>
+                        <span class="font-mono text-lg font-semibold">/api/machines/{id}/inspection-interval</span>
+                        <span class="bg-yellow-500 text-white px-3 py-1 rounded-full text-sm font-bold">優先度: B</span>
+                    </div>
+                    <p class="mb-4">機械の点検間隔（何日ごとに点検するか）を変更するためのAPIです。「90日ごと」など柔軟な設定が可能です。</p>
+            
+                    <h3 class="text-lg font-semibold mt-6 mb-2">リクエストボディ</h3>
+                    <pre><code class="language-json">{
+    "interval_days": 120
+}</code></pre>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">成功レスポンス (200 OK)</h3>
+                    <p class="text-sm mb-2">変更後の点検間隔と、それに基づいて再計算された次回点検日を返却します。</p>
+                    <pre><code class="language-json">{
+    "machine_id": 1,
+    "inspection_interval_days": 120,
+    "next_inspection_date": "2025-10-13"
+}</code></pre>
+            
+                    <h3 class="text-lg font-semibold mt-6 mb-2">エラーレスポンス (400 Bad Request)</h3>
+                    <pre><code class="language-json">{
+    "error": "Invalid interval_days provided"
+}</code></pre>
+                </div>
+            </section>
+
+            <!-- 7. 点検の完了 -->
+            <section id="complete-inspection">
+                <h2 class="text-2xl font-bold border-b-2 border-indigo-500 pb-2 mb-4">7. 点検の完了</h2>
+                <div class="bg-white p-6 rounded-lg shadow-md">
+                    <div class="flex items-center space-x-4 mb-4">
+                        <span class="method-badge post">POST</span>
+                        <span class="font-mono text-lg font-semibold">/api/machines/{id}/complete-inspection</span>
+                        <span class="bg-yellow-500 text-white px-3 py-1 rounded-full text-sm font-bold">優先度: B</span>
+                    </div>
+                    <p class="mb-4">点検完了時にこのAPIを呼び出すと、最終点検日が当日の日付に更新されます。これにより次回点検日も自動計算され、運用負荷を軽減できます。</p>
+            
+                    <h3 class="text-lg font-semibold mt-6 mb-2">成功レスポンス (200 OK)</h3>
+                     <p class="text-sm mb-2">更新後の最終点検日と次回点検日を返却します。</p>
+                    <pre><code class="language-json">{
+    "machine_id": 1,
+    "last_inspection_date": "2025-09-30",
+    "next_inspection_date": "2025-12-29"
+}</code></pre>
+            
+                    <h3 class="text-lg font-semibold mt-6 mb-2">エラーレスポンス (404 Not Found)</h3>
+                    <pre><code class="language-json">{
+    "error": "Machine not found"
+}</code></pre>
+                </div>
+            </section>
+
+        </div>
+
+        <footer class="text-center text-slate-500 mt-12 py-4">
+            &copy; 2024 API Design by Gemini. All Rights Reserved.
+        </footer>
+    </div>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+    <script>
+        hljs.highlightAll();
+    </script>
+    <script>
+        (function(){ const blocks=document.querySelectorAll('pre code.language-json, pre code.language-http, pre code.language-sql'); blocks.forEach(code=>{ const pre=code.parentElement; if(!pre.classList.contains('code-block-wrapper')) pre.classList.add('code-block-wrapper'); if(pre.querySelector('.copy-btn')) return; const btn=document.createElement('button'); btn.type='button'; btn.className='copy-btn'; btn.innerHTML='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg><span>Copy</span>'; btn.addEventListener('click',async()=>{ const raw=code.innerText.replace(/\n+$/,''); try{ await navigator.clipboard.writeText(raw); btn.classList.add('copied'); const original=btn.innerHTML; btn.innerHTML='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg><span>Copied!</span>'; setTimeout(()=>{btn.classList.remove('copied'); btn.innerHTML=original;},1800);}catch(e){ btn.innerHTML='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg><span style="color:#fee2e2">Failed</span>'; setTimeout(()=>{btn.innerHTML='Copy';},2000);} }); pre.appendChild(btn); }); })();
+    </script>
+</body>
+
+</html>
diff --git "a/docs/API\350\250\255\350\250\210/\347\224\273\345\203\217\346\244\234\346\237\273\343\202\271\343\203\206\343\203\274\343\202\277\343\202\271.html" "b/docs/API\350\250\255\350\250\210/\347\224\273\345\203\217\346\244\234\346\237\273\343\202\271\343\203\206\343\203\274\343\202\277\343\202\271.html"
new file mode 100644
index 000000000..92a44bdaa
--- /dev/null
+++ "b/docs/API\350\250\255\350\250\210/\347\224\273\345\203\217\346\244\234\346\237\273\343\202\271\343\203\206\343\203\274\343\202\277\343\202\271.html"
@@ -0,0 +1,793 @@
+<!DOCTYPE html>
+<html lang="ja">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>画像検査API設計書（なんとまた仕様変更）</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <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=Inter:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;700&display=swap"
+        rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/vs2015.min.css">
+    <script src="../sidebar.js" defer></script>
+    <style>
+        body {
+            font-family: 'Inter', 'Noto Sans JP', sans-serif;
+        }
+
+        .method-badge {
+            font-size: 0.8rem;
+            font-weight: 700;
+            padding: 0.2em 0.6em;
+            border-radius: 0.25rem;
+            color: white;
+            display: inline-block;
+            width: 80px;
+            text-align: center;
+        }
+
+        .get {
+            background-color: #3b82f6;
+        }
+
+        .websocket {
+            background-color: #9333ea;
+        }
+
+        pre code.hljs {
+            padding: 1rem;
+            border-radius: 0.5rem;
+            font-size: 0.875rem;
+        }
+
+        /* Copy button */
+        .code-block-wrapper {
+            position: relative;
+        }
+
+        .copy-btn {
+            position: absolute;
+            top: 4px;
+            right: 6px;
+            background: rgba(51, 65, 85, .85);
+            color: #f1f5f9;
+            font-size: 12px;
+            font-weight: 600;
+            padding: 6px 12px 6px 10px;
+            border-radius: 8px;
+            cursor: pointer;
+            line-height: 1;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            backdrop-filter: blur(2px);
+            border: 1px solid rgba(255, 255, 255, .08);
+            transition: transform .16s, box-shadow .22s, background-color .25s;
+            box-shadow: 0 2px 6px -2px rgba(15, 23, 42, .35);
+        }
+
+        .copy-btn svg {
+            width: 16px;
+            height: 16px;
+        }
+
+        .copy-btn:hover {
+            background: rgba(71, 85, 105, .92);
+            transform: translateY(-2px);
+            box-shadow: 0 6px 14px -4px rgba(15, 23, 42, .45);
+        }
+
+        .copy-btn:active {
+            transform: translateY(0);
+            box-shadow: 0 3px 8px -4px rgba(15, 23, 42, .4);
+        }
+
+        .copy-btn.copied {
+            background: linear-gradient(135deg, #16a34a 0%, #15803d 70%);
+        }
+
+        .copy-btn.copied svg {
+            animation: pop .4s ease;
+        }
+
+        @keyframes pop {
+            0% {
+                transform: scale(.6) rotate(-20deg);
+            }
+
+            60% {
+                transform: scale(1.15);
+            }
+
+            100% {
+                transform: scale(1);
+            }
+        }
+    </style>
+</head>
+
+<body class="bg-slate-50 text-slate-800">
+
+    <div class="container mx-auto p-4 sm:p-6 lg:p-8">
+        <header class="mb-8">
+            <div class="flex items-center justify-between mb-4">
+                <div class="flex items-center space-x-4">
+                    <svg class="w-12 h-12 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z">
+                        </path>
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"></path>
+                    </svg>
+                    <h1 class="text-4xl font-bold text-slate-900">画像検査API 設計書（Re:仕様変更）</h1>
+                </div>
+                <a href="../index.html"
+                    class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition-colors">
+                    ← トップページに戻る
+                </a>
+            </div>
+            <div class="mt-4 p-4 bg-indigo-100 border-l-4 border-indigo-500 text-indigo-700 rounded-r-lg">
+                <p class="font-bold">対象ページ: 画像検査ステータス</p>
+                <p class="text-sm mt-1">このドキュメントは、「画像検査ステータス」ページの最新フロント実装に合わせたAPI/DB設計を定義します。WebSocket は廃止し、<strong>軽量な
+                        GET ポーリング</strong>で変更検知→ フロントは必要なデータを GET で再取得する方式に変更しました。</p>
+            </div>
+        </header>
+
+        <div class="space-y-12">
+
+            <!-- 0. 改訂概要 -->
+            <section id="changelog" class="mb-12">
+                <h2 class="text-2xl font-bold border-b-2 border-indigo-500 pb-2 mb-4">改訂概要</h2>
+                <div class="bg-white p-6 rounded-lg shadow-md space-y-3 text-slate-700">
+                    <ul class="list-disc pl-6 space-y-1">
+                        <li>リアルタイム更新: WebSocket →
+                            <strong>軽量GETポーリング</strong>に変更（サーバは直近イベントID/名前を公開。フロントは数秒おきに比較し、変化時のみデータAPIを再取得）。</li>
+                        <li>DBスキーマ: 単一テーブルから <strong>ロット</strong>＋<strong>カメラショット</strong>
+                            の2層構造へ再設計。1ロット内の同一カメラの複数ショットを保存可能。</li>
+                        <li>API整備: クエリは <code>section</code> と <code>date</code> を基本に統一。<code>summary</code> と
+                            <code>lots</code> を中核に、任意で <code>lot-shots</code> や <code>dates</code> を追加。</li>
+                        <li>ショット詳細: 4K / FHD ごとにエンドポイントを分割し、<code>c4k_seq</code>（DB 列:
+                            <code>c4k_seq</code>）・<code>fhd_seq</code> で新たな撮影シーケンスを識別。</li>
+                        <li>ステータス表記: サーバは <code>PASS/FAIL</code> を返却。フロントの UI 表示（OK/NG 等）はフロント側でマッピング。</li>
+                        <li>画像命名: <code>{lot_id}_{camera_id}-{seq}.jpg</code> を推奨（例:
+                            <code>MAT-10001_B-spring01-02.jpg</code>）。</li>
+                    </ul>
+                </div>
+            </section>
+
+            <section id="camera-config" class="mb-12">
+                <h2 class="text-2xl font-bold border-b-2 border-indigo-500 pb-2 mb-4">カメラ構成と命名規則</h2>
+                <div class="bg-white p-6 rounded-lg shadow-md">
+                    <p class="mb-6 text-slate-600">
+                        検査システムは複数のカメラで構成されます。各カメラには、その物理的な位置と役割を示す一意のIDが割り当てられます。カメラIDは通常、<code>{層}-{役割}-{番号}</code>
+                        という形式で命名されます。
+                    </p>
+                    <div class="flex justify-center items-center p-4 border border-slate-200 rounded-lg bg-slate-50">
+                        <svg viewBox="0 0 600 350" xmlns="http://www.w3.org/2000/svg" class="w-full max-w-lg">
+                            <style>
+                                .title {
+                                    font-size: 28px;
+                                    font-weight: bold;
+                                    font-family: 'Noto Sans JP', sans-serif;
+                                    fill: #334155;
+                                }
+
+                                .label {
+                                    font-size: 18px;
+                                    font-family: 'Inter', sans-serif;
+                                    fill: #1e293b;
+                                }
+
+                                .camera-body {
+                                    fill: #f1f5f9;
+                                    stroke: #475569;
+                                    stroke-width: 4;
+                                }
+
+                                .camera-lens {
+                                    fill: #94a3b8;
+                                    stroke: #475569;
+                                    stroke-width: 3;
+                                }
+
+                                .mattress {
+                                    fill: #e2e8f0;
+                                    stroke: #94a3b8;
+                                    stroke-width: 2;
+                                }
+
+                                .line {
+                                    stroke: #64748b;
+                                    stroke-width: 2;
+                                }
+                            </style>
+                            <text x="300" y="40" text-anchor="middle" class="title">A層検査カメラ</text>
+
+                            <!-- Mattress -->
+                            <path d="M 100 270 L 150 240 L 450 240 L 500 270 L 450 300 L 150 300 Z" class="mattress" />
+                            <text x="300" y="280" text-anchor="middle" class="label"
+                                style="font-size: 22px;">マットレス</text>
+
+                            <!-- Center Camera: A-main01 -->
+                            <g transform="translate(275, 100)">
+                                <rect x="0" y="0" width="50" height="70" rx="5" class="camera-body" />
+                                <path d="M 10 70 L 40 70 L 45 85 L 5 85 Z" class="camera-lens" />
+                                <line x1="25" y1="0" x2="25" y2="-20" class="line" />
+                                <!-- <line x1="25" y2="-20" x2="150" y2="-20" class="line" /> -->
+                                <text x="-15" y="-30" class="label">A-main01</text>
+                            </g>
+
+                            <!-- Left Camera: A-stitch01 -->
+                            <g transform="translate(120, 150) rotate(-30)">
+                                <rect x="0" y="0" width="40" height="60" rx="5" class="camera-body" />
+                                <path d="M 5 60 L 35 60 L 40 75 L 0 75 Z" class="camera-lens" />
+                                <line x1="20" y1="0" x2="20" y2="-20" class="line" />
+                                <!-- <line x1="20" y2="-20" x2="120" y2="-20" class="line" /> -->
+                                <text x="-100" y="20" class="label" transform="rotate(30)">A-stitch01</text>
+                            </g>
+
+                            <!-- Right Camera: A-stitch02 -->
+                            <g transform="translate(480, 150) rotate(30)">
+                                <rect x="-40" y="0" width="40" height="60" rx="5" class="camera-body" />
+                                <path d="M -35 60 L -5 60 L 0 75 L -40 75 Z" class="camera-lens" />
+                                <line x1="-20" y1="0" x2="-20" y2="-20" class="line" />
+                                <text x="100" y="20" class="label" text-anchor="end"
+                                    transform="rotate(-30)">A-stitch02</text>
+                            </g>
+                        </svg>
+                    </div>
+
+                    <!-- バネどめ検査カメラ構成図 -->
+                    <div
+                        class="mt-8 flex justify-center items-center p-4 border border-slate-200 rounded-lg bg-slate-50">
+                        <svg viewBox="0 0 700 400" xmlns="http://www.w3.org/2000/svg" class="w-full max-w-3xl">
+                            <g transform="translate(50, 0)">
+                                <style>
+                                    .title {
+                                        font-size: 28px;
+                                        font-weight: bold;
+                                        font-family: 'Noto Sans JP', sans-serif;
+                                        fill: #3730a3;
+                                    }
+
+                                    .label {
+                                        font-size: 16px;
+                                        font-family: 'Inter', sans-serif;
+                                        fill: #312e81;
+                                    }
+
+                                    .camera-box {
+                                        fill: #e0e7ff;
+                                        stroke: #4338ca;
+                                        stroke-width: 6;
+                                        rx: 20;
+                                    }
+
+                                    .camera-label {
+                                        font-size: 24px;
+                                        font-weight: bold;
+                                        fill: #4338ca;
+                                        text-anchor: middle;
+                                        dominant-baseline: central;
+                                    }
+
+                                    .center-box {
+                                        fill: #e0e7ff;
+                                        stroke: #4338ca;
+                                        stroke-width: 6;
+                                        rx: 20;
+                                    }
+
+                                    .center-label {
+                                        font-size: 26px;
+                                        font-weight: bold;
+                                        fill: #4338ca;
+                                        text-anchor: middle;
+                                        dominant-baseline: central;
+                                    }
+
+                                    .line {
+                                        stroke: #4f46e5;
+                                        stroke-width: 2;
+                                    }
+                                </style>
+                                <text x="300" y="40" text-anchor="middle" class="title">バネどめ検査カメラ</text>
+
+                                <!-- Center Box -->
+                                <rect x="120" y="180" width="360" height="150" class="center-box" />
+                                <text x="300" y="255" class="center-label">押し上げ部</text>
+
+                                <!-- Camera 1 (Left) -->
+                                <g>
+                                    <rect x="40" y="160" width="70" height="190" class="camera-box" />
+                                    <text x="75" y="255" class="camera-label">1</text>
+                                    <!-- <line x1="40" y1="255" x2="-20" y2="255" class="line" /> -->
+                                    <text x="115" y="380" text-anchor="end" class="label">B-spring01</text>
+                                </g>
+
+                                <!-- Camera 2 (Top-Left) -->
+                                <g>
+                                    <rect x="140" y="90" width="150" height="70" class="camera-box" />
+                                    <text x="215" y="125" class="camera-label">2</text>
+                                    <line x1="215" y1="90" x2="215" y2="70" class="line" />
+                                    <line x1="215" y1="70" x2="120" y2="70" class="line" />
+                                    <text x="110" y="70" text-anchor="end" class="label">B-spring02</text>
+                                </g>
+
+                                <!-- Camera 3 (Top-Right) -->
+                                <g>
+                                    <rect x="310" y="90" width="150" height="70" class="camera-box" />
+                                    <text x="385" y="125" class="camera-label">3</text>
+                                    <line x1="385" y1="90" x2="385" y2="70" class="line" />
+                                    <line x1="385" y1="70" x2="480" y2="70" class="line" />
+                                    <text x="490" y="70" class="label">B-spring03</text>
+                                </g>
+
+                                <!-- Camera 4 (Right) -->
+                                <g>
+                                    <rect x="490" y="160" width="70" height="190" class="camera-box" />
+                                    <text x="525" y="255" class="camera-label">4</text>
+                                    <!-- <line x1="560" y1="255" x2="620" y2="255" class="line" /> -->
+                                    <text x="480" y="380" class="label">B-spring04</text>
+                                </g>
+                            </g>
+                        </svg>
+                    </div>
+                </div>
+            </section>
+
+            <!-- 1. データベーススキーマ -->
+            <section id="db-schema">
+                <h2 class="text-2xl font-bold border-b-2 border-indigo-500 pb-2 mb-4">1. データベーススキーマ（刷新）</h2>
+                <div class="bg-white p-6 rounded-lg shadow-md">
+                    <p class="mb-4 text-slate-600">PostgreSQLを想定。1ロット内で同一カメラの複数ショットを保持し、ロット単位の集計を容易にします。</p>
+                    <div class="code-block-wrapper">
+                        <pre><code class="language-sql">
+-- ロット（製品ID等に相当）
+CREATE TABLE inspection_lots (
+    id BIGSERIAL PRIMARY KEY,                                       -- ロット内部ID（連番）
+    lot_id VARCHAR(64) NOT NULL,                                    -- ロットID（製品ID等、例: 'MAT-10001'）
+    section_code VARCHAR(32) NOT NULL,                              -- セクション内部コード（例: 'spring'）
+    captured_at TIMESTAMP WITH TIME ZONE NOT NULL,                  -- 検査代表時刻（最初/最後のいずれか）
+    UNIQUE (lot_id)                                                 -- ロットIDは一意
+);
+
+-- カメラショット（1ロット内で複数可、同一camera_idで複数行OK）
+CREATE TABLE inspection_camera_shots (
+    id BIGSERIAL PRIMARY KEY,                                                   -- ショット内部ID（連番）
+    lot_id_ref BIGINT NOT NULL REFERENCES inspection_lots(id) ON DELETE CASCADE,-- ロット参照ID
+    camera_id VARCHAR(64) NOT NULL,                                             -- カメラID（例: 'B-spring01', 'A-main01'）
+    c4k_seq VARCHAR(32) NULL,                                                   -- 4K撮影シーケンスID（例: "A-4"｜JSONキー: "c4k_seq"）
+    fhd_seq VARCHAR(32) NULL,                                                   -- FHD撮影シーケンスID（例: "D-5"）
+    status VARCHAR(16) NOT NULL CHECK (status IN ('PASS','FAIL','MISSING')),    -- 判定ステータス
+    details TEXT NULL,                                                          -- 不良理由等（PASS時はNULL推奨）
+    image_path TEXT NULL,                                                       -- 画像パス（MISSING時はNULL可）
+    shot_seq INT NULL,                                                          -- 同一カメラ内の通番（1..n）※4K/FHD毎に任意
+    captured_at TIMESTAMP WITH TIME ZONE NULL                                   -- ショット撮影時刻
+);
+</code></pre>
+                    </div>
+                    <p class="mt-2 text-sm text-slate-600">備考:
+                        ロットの総合判定はビューやアプリ側で算出（<strong>同一camera_idで1つでもFAILがあればNG</strong> ルール）。4K/FHD 系列は DB 上では
+                        <code>c4k_seq</code>・<code>fhd_seq</code> で保持し、API レイヤでは
+                        <code>c4k_seq</code>・<code>fhd_seq</code> として返却します。必要ならマテリアライズドビューやトリガで日次集計を保持。</p>
+                </div>
+            </section>
+
+            <!-- 2. 検査サマリー取得 -->
+            <section id="api-summary">
+                <h2 class="text-2xl font-bold border-b-2 border-indigo-500 pb-2 mb-4">2. 検査サマリー取得</h2>
+                <div class="bg-white p-6 rounded-lg shadow-md">
+                    <div class="flex items-center space-x-4 mb-4">
+                        <span class="method-badge get">GET</span>
+                        <span class="font-mono text-lg font-semibold">/api/inspections/summary</span>
+                        <span class="bg-orange-500 text-white px-3 py-1 rounded-full text-sm font-bold">優先度: A</span>
+                    </div>
+                    <p class="mb-4">指定したセクション＋日付の検査サマリー（総数、良品/不良品数、不良原因）を取得します。ダッシュボードの統計表示で使用。</p>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">クエリパラメータ</h3>
+                    <table class="w-full text-left border-collapse">
+                        <thead>
+                            <tr>
+                                <th class="border-b-2 p-2">パラメータ</th>
+                                <th class="border-b-2 p-2">説明</th>
+                                <th class="border-b-2 p-2">例</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td class="border-b p-2 font-mono">section</td>
+                                <td class="border-b p-2">検査セクション（内部コード）。例: <code>spring</code>（バネ留め）,
+                                    <code>alayer</code>（A層）。</td>
+                                <td class="border-b p-2 font-mono">?section=alayer</td>
+                            </tr>
+                            <tr>
+                                <td class="border-b p-2 font-mono">date</td>
+                                <td class="border-b p-2">対象の日付 (YYYY-MM-DD形式)。指定しない場合は本日。</td>
+                                <td class="border-b p-2 font-mono">?date=2024-07-15</td>
+                            </tr>
+                        </tbody>
+                    </table>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">成功レスポンス (200 OK)</h3>
+                    <pre><code class="language-json">{
+  "section": "alayer",
+  "date": "2025-10-01",
+  "total_count": 150,
+  "pass_count": 145,
+  "fail_count": 5,
+  "pass_rate": 97,
+  "fail_reasons": [
+    { "reason": "位置ずれ", "count": 3 },
+    { "reason": "糸ほつれ", "count": 1 },
+    { "reason": "異物混入", "count": 1 }
+  ]
+}</code></pre>
+                </div>
+            </section>
+
+            <!-- 3. 検査ロット取得 -->
+            <section id="get-logs">
+                <h2 class="text-2xl font-bold border-b-2 border-indigo-500 pb-2 mb-4">3. 検査ロット取得</h2>
+                <div class="bg-white p-6 rounded-lg shadow-md">
+                    <div class="flex items-center space-x-4 mb-4">
+                        <span class="method-badge get">GET</span>
+                        <span class="font-mono text-lg font-semibold">/api/inspections/lots</span>
+                        <span class="bg-orange-500 text-white px-3 py-1 rounded-full text-sm font-bold">優先度: A</span>
+                    </div>
+                    <p class="mb-4">
+                        ロット単位で検査結果を取得。各ロットはセクション内の全撮影結果を内包し、ページネーション対応。セクションに応じて集約単位が変わります。
+                        <strong>spring</strong> など従来通りのセクションはカメラ単位で <code>cameras</code> を返し、<strong>同一camera_idで1つでもFAILがあればロットNG</strong>。<br>
+                        <strong>alayer</strong> セクションは代わりに 4K シーケンス単位で <code>four_k_sequences</code> を返し、<strong>同一<code>c4k_seq</code>のいずれかがFAILならそのシーケンス全体をFAIL</strong>、シーケンスに1つでも FAIL があればロットも FAIL です。<br>
+                        さらに <strong>代表ファイルパス</strong>（通常はそのロットで最初に撮れた画像）をフルパスで返却し、フロントはカードや一覧のサムネイルとして利用できます。パスは検査後画像が存在するかで切り替え:<code>/imageDB/afterTest//{fileName}</code>（検査後あり）/<code>/imageDB/beforeTest//{fileName}</code>（検査前のみ）。</p>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">クエリパラメータ</h3>
+                    <table class="w-full text-left border-collapse">
+                        <thead>
+                            <tr>
+                                <th class="border-b-2 p-2">パラメータ</th>
+                                <th class="border-b-2 p-2">説明</th>
+                                <th class="border-b-2 p-2">例</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td class="border-b p-2 font-mono">section</td>
+                                <td class="border-b p-2">検査セクション（内部コード）。例: <code>spring</code>（バネ留め）,
+                                    <code>alayer</code>（A層）。</td>
+                                <td class="border-b p-2 font-mono">?section=spring</td>
+                            </tr>
+                            <tr>
+                                <td class="border-b p-2 font-mono">date</td>
+                                <td class="border-b p-2">対象の日付 (YYYY-MM-DD形式)。指定しない場合は本日。</td>
+                                <td class="border-b p-2 font-mono">?date=2025-10-01</td>
+                            </tr>
+                            <tr>
+                                <td class="border-b p-2 font-mono">page</td>
+                                <td class="border-b p-2">ページ番号。</td>
+                                <td class="border-b p-2 font-mono">?page=1</td>
+                            </tr>
+                            <tr>
+                                <td class="border-b p-2 font-mono">limit</td>
+                                <td class="border-b p-2">1ページあたりの件数。</td>
+                                <td class="border-b p-2 font-mono">?limit=50</td>
+                            </tr>
+                        </tbody>
+                    </table>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">成功レスポンス (200 OK)</h3>
+                    <pre><code class="language-json">{
+    "total_pages": 1,
+    "current_page": 1,
+    "lots": [
+        {
+            "lot_id": "MAT-10001",                      // ロットID（製品ID等に相当）
+            "section": "spring",                        // spring 系は従来どおり camera 単位
+            "captured_at": "2025-10-01T17:47:53.427Z",  // 代表時刻（最初/最後のいずれかでOK）
+            "pass": false,                               // 全カメラ PASS のときのみ true
+            "representative_image": "/imageDB/beforeTest//MAT-10001_B-spring01_A-1_A-1.png", // 検査前のみ存在時のフルパス
+            "cameras": [
+                { "camera_id": "B-spring01", "status": "FAIL"},
+                { "camera_id": "B-spring02", "status": "FAIL"},
+                { "camera_id": "B-spring03", "status": "PASS"},
+                { "camera_id": "B-spring04", "status": "PASS"}
+            ]
+        },
+        {
+            "lot_id": "LOLL-10001",                      // ロットID（製品ID等に相当）
+            "section": "alayer",                        // alayer は 4K シーケンス単位
+            "captured_at": "2025-10-01T17:47:53.427Z",
+            "pass": false,                               // 4K シーケンスのいずれかが FAIL なら false
+            "representative_image": "/imageDB/afterTest//LOLL-10001_A-main01_A-1_A-1.png", // 検査後画像がある場合
+            "four_k_sequences": [
+                { "c4k_seq": "A-1", "status": "FAIL" },
+                { "c4k_seq": "A-2", "status": "PASS" }
+            ]
+        }
+    ]
+}</code></pre>
+
+                    <div class="mt-4 text-sm text-slate-600 space-y-2">
+                        <p>備考:</p>
+                        <ul class="list-disc pl-6 space-y-1">
+                            <li>spring 系セクションなどは従来どおり <code>cameras</code> 配列を返す。<code>alayer</code> は <code>four_k_sequences</code> 配列のみ返し、シーケンス単位の FAIL を判定する。</li>
+                            <li>シーケンスの判定は同一 <code>c4k_seq</code> 内に FAIL が1つでもあれば当該シーケンスを FAIL とみなす。<code>alayer</code> ロットの <code>pass</code> は配列中に FAIL が存在するかで決まる。</li>
+                            <li>フロントは <code>camera_id</code> や <code>c4k_seq</code> をそのまま表示（別名は不要）。</li>
+                            <li>ステータスは <code>PASS/FAIL</code> を返す。UI上の <code>OK/NG</code> などはフロント側で変換。</li>
+                            <li><code>representative_image</code> は指定ロット内の最初に撮影されたショットのフルパス（該当なしは <code>null</code>）を返す。検査後画像があるときは <code>/imageDB/afterTest//</code> ルート、検査前しか無い場合は <code>/imageDB/beforeTest//</code> ルートを必ず使用する。</li>
+                            <li>画像ファイル名は <strong>lot_id</strong> と <strong>camera_id</strong> を含め、通番を付与する形式を推奨:
+                                <code>{lot_id}_{camera_id}-{seq}.jpg</code>（例:
+                                <code>MAT-10001_B-spring01-02.jpg</code>）。</li>
+                        </ul>
+                    </div>
+                </div>
+            </section>
+
+            <!-- 3.1 ロット詳細（ショット一覧） -->
+            <section id="lot-shots">
+                <h2 class="text-2xl font-bold border-b-2 border-indigo-500 pb-2 mb-4">3.1 ロット詳細（ショット一覧）ばねどめ検査用</h2>
+                <div class="bg-white p-6 rounded-lg shadow-md">
+                    <div class="flex items-center space-x-4 mb-4">
+                        <span class="method-badge get">GET</span>
+                        <span class="font-mono text-lg font-semibold">/api/inspections/lots/{lot_id}/shots</span>
+                        <span class="bg-slate-500 text-white px-3 py-1 rounded-full text-sm font-bold">任意</span>
+                    </div>
+                    <p class="mb-4">ロット内の全ショットを返却します（同一カメラ複数ショットあり）。詳細モーダル等で使用。</p>
+                    <h3 class="text-lg font-semibold mt-6 mb-2">パスパラメータ</h3>
+                    <table class="w-full text-left border-collapse">
+                        <thead>
+                            <tr>
+                                <th class="border-b-2 p-2">パラメータ</th>
+                                <th class="border-b-2 p-2">説明</th>
+                                <th class="border-b-2 p-2">例</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td class="border-b p-2 font-mono">lot_id</td>
+                                <td class="border-b p-2">対象ロットID（パスで指定）</td>
+                                <td class="border-b p-2 font-mono">/api/inspections/lots/MAT-10001/shots</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                    <h3 class="text-lg font-semibold mt-6 mb-2">成功レスポンス</h3>
+                    <pre><code class="language-json">{
+  "lot_id": "MAT-10001",
+  "shots": [
+    { "camera_id": "B-spring01", "status": "FAIL", "details": "角度規定外", "image_path": "MAT-10001_B-spring01-01.jpg" },
+    { "camera_id": "B-spring01", "status": "PASS", "details": null, "image_path": "MAT-10001_B-spring01-02.jpg" },
+    { "camera_id": "B-spring02", "status": "PASS", "details": null, "image_path": "MAT-10001_B-spring02-01.jpg" }
+  ]
+}</code></pre>
+                </div>
+            </section>
+
+            <!-- 3.1 ロット詳細（ショット一覧 4K / FHD） -->
+            <section id="lot-shots">
+                <h2 class="text-2xl font-bold border-b-2 border-indigo-500 pb-2 mb-4">3.1 ロット詳細（ショット一覧: 4K / FHD）A層検査用
+                </h2>
+                <div class="bg-white p-6 rounded-lg shadow-md space-y-8">
+                    <p class="text-slate-600">ショット一覧は <strong>撮影種別（4K/FHD）ごとにエンドポイントを分離</strong> しました。UI
+                        では必要な種別のみリクエストし、各ショットの <code>c4k_seq</code>（DB列: <code>c4k_seq</code>）/ <code>fhd_seq</code>
+                        を用いて表示順や紐付けを制御します。</p>
+
+                    <div>
+                        <div class="flex items-center space-x-4 mb-4">
+                            <span class="method-badge get">GET</span>
+                            <span class="font-mono text-lg font-semibold">/api/inspections/lots/{lot_id}/shots/4K</span>
+                            <span class="bg-slate-500 text-white px-3 py-1 rounded-full text-sm font-bold">任意</span>
+                        </div>
+                        <p class="mb-4">指定ロットの 4K ショットのみを返却します。4K シーケンス（<code>c4k_seq</code>）単位で <strong>重複を排除</strong>
+                            し、同一 <code>c4k_seq</code> を持つ行が複数あっても API では 1 件として返却します（最新ショット等、実装側で優先順位を定義）。</p>
+                        <h3 class="text-lg font-semibold mt-6 mb-2">パスパラメータ</h3>
+                        <table class="w-full text-left border-collapse">
+                            <thead>
+                                <tr>
+                                    <th class="border-b-2 p-2">パラメータ</th>
+                                    <th class="border-b-2 p-2">説明</th>
+                                    <th class="border-b-2 p-2">例</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td class="border-b p-2 font-mono">lot_id</td>
+                                    <td class="border-b p-2">対象ロットID（パスで指定）</td>
+                                    <td class="border-b p-2 font-mono">/api/inspections/lots/MAT-10001/shots/4K</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                        <h3 class="text-lg font-semibold mt-6 mb-2">成功レスポンス例</h3>
+                        <pre><code class="language-json">{
+    "lot_id": "MAT-10001",
+    "summary": {
+        "total": 2,
+        "ok_count": 1,
+        "ng_count": 1,
+        "ok_rate": 50,
+        "ng_rate": 50
+    },
+    "shots": [
+        {
+            "camera_id": "B-spring01",
+            "c4k_seq": "A-4",
+            "shot_seq": 2,
+            "status": "PASS",
+            "details": null,
+            "image_path": "MAT-10001_B-spring01-4k-02.jpg"
+        },
+        {
+            "camera_id": "B-spring01",
+            "c4k_seq": "A-5",
+            "shot_seq": 1,
+            "status": "FAIL",
+            "details": "角度規定外",
+            "image_path": "MAT-10001_B-spring01-4k-03.jpg"
+        }
+    ]
+}</code></pre>
+                    </div>
+
+                    <div>
+                        <div class="flex items-center space-x-4 mb-4">
+                            <span class="method-badge get">GET</span>
+                            <span
+                                class="font-mono text-lg font-semibold">/api/inspections/lots/{lot_id}/shots/FHD/{c4k_seq}</span>
+                            <span class="bg-slate-500 text-white px-3 py-1 rounded-full text-sm font-bold">任意</span>
+                        </div>
+                        <p class="mb-4">指定ロット内で、<strong>特定の <code>c4k_seq</code> に紐づく FHD ショットのみ</strong> を返却します。4K
+                            詳細ビューから FHD 連番を掘り下げる用途を想定しています。</p>
+                        <h3 class="text-lg font-semibold mt-6 mb-2">パスパラメータ</h3>
+                        <table class="w-full text-left border-collapse">
+                            <thead>
+                                <tr>
+                                    <th class="border-b-2 p-2">パラメータ</th>
+                                    <th class="border-b-2 p-2">説明</th>
+                                    <th class="border-b-2 p-2">例</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td class="border-b p-2 font-mono">lot_id</td>
+                                    <td class="border-b p-2">対象ロットID（パスで指定）</td>
+                                    <td class="border-b p-2 font-mono">/api/inspections/lots/MAT-10001/shots/FHD/A-4
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td class="border-b p-2 font-mono">c4k_seq</td>
+                                    <td class="border-b p-2">連動させたい 4K シーケンスID。該当する FHD ショットのみを抽出。</td>
+                                    <td class="border-b p-2 font-mono">/api/inspections/lots/MAT-10001/shots/FHD/A-4
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                        <h3 class="text-lg font-semibold mt-6 mb-2">成功レスポンス例</h3>
+                        <pre><code class="language-json">{
+  "lot_id": "MAT-10001",
+  "c4k_seq": "A-4",
+  "summary": {
+    "total": 2,
+    "ok_count": 1,
+    "ng_count": 1,
+    "ok_rate": 50,
+    "ng_rate": 50
+  },
+
+  "shots": [
+    {
+      "camera_id": "B-spring02",
+      "fhd_seq": "D-5",
+      "shot_seq": null,
+      "status": "PASS",
+      "details": null,
+      "image_path": "MAT-10001_B-spring02-fhd-01.jpg"
+    },
+    {
+      "camera_id": "B-spring02",
+      "fhd_seq": "D-5",
+      "shot_seq": 2,
+      "status": "FAIL",
+      "details": "位置ずれ",
+      "image_path": "MAT-10001_B-spring02-fhd-02.jpg"
+    }
+  ]
+}</code></pre>
+                    </div>
+
+                    <div class="text-sm text-slate-600 space-y-1">
+                        <p>備考:</p>
+                        <ul class="list-disc pl-6 space-y-1">
+                            <li>4K シーケンスは DB 上は <code>c4k_seq</code>、API レスポンスでは <code>c4k_seq</code> として返します。FHD シーケンスは
+                                <code>fhd_seq</code> のままです。該当しないショットでは NULL を返して構いません。</li>
+                            <li>4K エンドポイントは <code>c4k_seq</code> ごとにユニークなショットのみ返却するため、クライアント側で重複除外を行う必要はありません。</li>
+                            <li><code>shot_seq</code> はカメラ＋種別の任意通番。旧 API 互換のため NULL 許容。</li>
+                            <li>4K/FHD を両方表示する UI は <code>/shots/4K</code> で候補を表示し、選択された <code>c4k_seq</code> を使って
+                                <code>/shots/FHD/{c4k_seq}</code> を呼び出す作りにすると整合を保ちやすいです。</li>
+                        </ul>
+                    </div>
+                </div>
+            </section>
+
+            <!-- 3.2 利用可能日付一覧 -->
+            <section id="available-dates">
+                <h2 class="text-2xl font-bold border-b-2 border-indigo-500 pb-2 mb-4">3.2 利用可能日付一覧</h2>
+                <div class="bg-white p-6 rounded-lg shadow-md">
+                    <div class="flex items-center space-x-4 mb-4">
+                        <span class="method-badge get">GET</span>
+                        <span class="font-mono text-lg font-semibold">/api/inspections/sections/{section}/dates</span>
+                        <span class="bg-slate-500 text-white px-3 py-1 rounded-full text-sm font-bold">任意</span>
+                    </div>
+                    <p class="mb-4">指定セクションのデータが存在する日付一覧（降順）を返します。</p>
+                    <h3 class="text-lg font-semibold mt-6 mb-2">パスパラメータ</h3>
+                    <table class="w-full text-left border-collapse">
+                        <thead>
+                            <tr>
+                                <th class="border-b-2 p-2">パラメータ</th>
+                                <th class="border-b-2 p-2">説明</th>
+                                <th class="border-b-2 p-2">例</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td class="border-b p-2 font-mono">section</td>
+                                <td class="border-b p-2">検査セクション（内部コード）</td>
+                                <td class="border-b p-2 font-mono">/api/inspections/sections/spring/dates</td>
+                            </tr>
+                        </tbody>
+                    </table>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">成功レスポンス</h3>
+                    <pre><code class="language-json">{
+  "section": "spring",
+  "dates": ["2025-10-02", "2025-10-01", "2025-09-30"]
+}</code></pre>
+                </div>
+            </section>
+
+            <!-- 4. 変更検知（シンプルGETポーリング） -->
+            <section id="realtime-polling">
+                <h2 class="text-2xl font-bold border-b-2 border-indigo-500 pb-2 mb-4">4. 変更検知（シンプルGETポーリング）</h2>
+                <div class="bg-white p-6 rounded-lg shadow-md space-y-6">
+                    <div>
+                        <div class="flex items-center space-x-4 mb-4">
+                            <span class="method-badge get">GET</span>
+                            <span class="font-mono text-lg font-semibold">/api/inspections/events/latest</span>
+                            <span class="bg-orange-500 text-white px-3 py-1 rounded-full text-sm font-bold">優先度:
+                                A</span>
+                        </div>
+                        <p class="mb-4">直近の変更イベントの情報を返します。フロントは数秒おきにポーリングし、値が変化した時だけ <code>/summary</code> や
+                            <code>/lots</code> を再取得します。</p>
+                        <h3 class="text-lg font-semibold mt-6 mb-2">レスポンス</h3>
+                        <pre><code class="language-json">{ "event": "lots.changed" }</code></pre>
+                    </div>
+
+
+
+                    <div>
+                        <h3 class="text-lg font-semibold">フロント側の利用例</h3>
+                        <ul class="list-disc pl-6 text-slate-700 text-sm space-y-2">
+                            <li>間隔: 2〜5秒程度（環境と要件に合わせる）</li>
+                            <li>検知: 直近取得した値と比較し、変更ありのみデータAPIを再取得</li>
+                            <li>負荷対策: 連続変化時はデバウンス/スロットリングを実施</li>
+                        </ul>
+                    </div>
+                </div>
+            </section>
+        </div>
+        <footer class="text-center text-slate-500 mt-12 py-4">
+            &copy; 2025 API Design. All Rights Reserved.
+        </footer>
+    </div>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+    <script>
+        hljs.highlightAll();
+    </script>
+    <script>
+        (function () { const blocks = document.querySelectorAll('pre code.language-json, pre code.language-http, pre code.language-sql'); blocks.forEach(code => { const pre = code.parentElement; if (!pre.classList.contains('code-block-wrapper')) pre.classList.add('code-block-wrapper'); if (pre.querySelector('.copy-btn')) return; const btn = document.createElement('button'); btn.type = 'button'; btn.className = 'copy-btn'; btn.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg><span>Copy</span>'; btn.addEventListener('click', async () => { const raw = code.innerText.replace(/\n+$/, ''); try { await navigator.clipboard.writeText(raw); btn.classList.add('copied'); const original = btn.innerHTML; btn.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg><span>Copied!</span>'; setTimeout(() => { btn.classList.remove('copied'); btn.innerHTML = original; }, 1800); } catch (e) { btn.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg><span style="color:#fee2e2">Failed</span>'; setTimeout(() => { btn.innerHTML = 'Copy'; }, 2000); } }); pre.appendChild(btn); }); })();
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/docs/API\350\250\255\350\250\210/\350\243\275\351\200\240\345\207\272\350\215\267\346\214\207\347\244\272.html" "b/docs/API\350\250\255\350\250\210/\350\243\275\351\200\240\345\207\272\350\215\267\346\214\207\347\244\272.html"
new file mode 100644
index 000000000..d617b1eee
--- /dev/null
+++ "b/docs/API\350\250\255\350\250\210/\350\243\275\351\200\240\345\207\272\350\215\267\346\214\207\347\244\272.html"
@@ -0,0 +1,338 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>製造出荷指示API設計書</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <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=Inter:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/vs2015.min.css">
+    <script src="../sidebar.js" defer></script>
+    <style>
+        body {
+            font-family: 'Inter', 'Noto Sans JP', sans-serif;
+        }
+        .method-badge {
+            font-size: 0.8rem;
+            font-weight: 700;
+            padding: 0.2em 0.6em;
+            border-radius: 0.25rem;
+            color: white;
+            display: inline-block;
+            width: 80px;
+            text-align: center;
+        }
+        .get { background-color: #3b82f6; }
+        .post { background-color: #22c55e; }
+        .put { background-color: #f97316; }
+        .delete { background-color: #ef4444; }
+        
+        pre code.hljs {
+            padding: 1rem;
+            border-radius: 0.5rem;
+            font-size: 0.875rem;
+        }
+    /* Copy button */
+    .code-block-wrapper { position: relative; }
+    .copy-btn { position:absolute; top:4px; right:6px; background:rgba(51,65,85,.85); color:#f1f5f9; font-size:12px; font-weight:600; padding:6px 12px 6px 10px; border-radius:8px; cursor:pointer; line-height:1; display:flex; align-items:center; gap:6px; backdrop-filter:blur(2px); border:1px solid rgba(255,255,255,.08); transition:transform .16s, box-shadow .22s, background-color .25s ease; box-shadow:0 2px 6px -2px rgba(15,23,42,.35);} .copy-btn svg{width:16px;height:16px;} .copy-btn:hover{background:rgba(71,85,105,.92); transform:translateY(-2px); box-shadow:0 6px 14px -4px rgba(15,23,42,.45);} .copy-btn:active{transform:translateY(0); box-shadow:0 3px 8px -4px rgba(15,23,42,.4);} .copy-btn.copied{background:linear-gradient(135deg,#16a34a 0%,#15803d 70%);} .copy-btn.copied svg{animation:pop .4s ease;} @keyframes pop{0%{transform:scale(.6) rotate(-20deg);}60%{transform:scale(1.15);}100%{transform:scale(1);}}
+    </style>
+</head>
+<body class="bg-slate-50 text-slate-800">
+
+    <div class="container mx-auto p-4 sm:p-6 lg:p-8">
+        <header class="mb-8">
+            <div class="flex items-center justify-between mb-4">
+                <div class="flex items-center space-x-4">
+                    <svg class="w-12 h-12 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
+                    </svg>
+                    <h1 class="text-4xl font-bold text-slate-900">製造出荷指示API 設計書</h1>
+                </div>
+                <a href="../index.html" class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition-colors">
+                    ← トップページに戻る
+                </a>
+            </div>
+            <div class="mt-4 p-4 bg-indigo-100 border-l-4 border-indigo-500 text-indigo-700 rounded-r-lg">
+                <p class="font-bold">対象ページ: 製造出荷指示周知ページ</p>
+                <p class="text-sm mt-1">このドキュメントは、「製造出荷指示周知ページ」の機能を実装するためのAPI仕様を定義します。</p>
+            </div>
+        </header>
+
+        <div class="space-y-12">
+
+            <!-- 0. DB設計 -->
+            <section id="db-design">
+                <h2 class="text-2xl font-bold border-b-2 border-indigo-500 pb-2 mb-4">0. DB設計</h2>
+                <div class="bg-white p-6 rounded-lg shadow-md">
+                    <p class="mb-4">出荷指示は優先度・ラインを参照する通知テーブルで管理します。</p>
+
+                    <h3 class="text-lg font-semibold mt-4 mb-2">priorities（優先度マスタ）</h3>
+                    <pre><code class="language-sql">CREATE TABLE priorities (
+    priority_id SERIAL PRIMARY KEY,
+    priority_label VARCHAR(20) UNIQUE NOT NULL
+);</code></pre>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">production_lines（ラインマスタ）</h3>
+                    <pre><code class="language-sql">CREATE TABLE production_lines (
+    line_id SERIAL PRIMARY KEY,
+    line_name VARCHAR(100) UNIQUE NOT NULL
+);</code></pre>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">notifications（製造出荷指示）</h3>
+                    <pre><code class="language-sql">CREATE TABLE notifications (
+    notification_id SERIAL PRIMARY KEY,
+    notification_data_time TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+    notification_line_id INT NOT NULL,
+    notification_quantity INT NOT NULL,
+    notification_item_name VARCHAR(50),
+    notification_item_size VARCHAR(50),
+    notification_color VARCHAR(50),
+    notification_spring_type VARCHAR(50),
+    notification_accessories VARCHAR(50),
+    notification_delivery_method VARCHAR(50),
+    notification_delivery_address VARCHAR(100),
+    notification_delivery_company VARCHAR(50),
+    notification_remarks TEXT,
+    notification_priority_id INT NOT NULL,
+    FOREIGN KEY (notification_line_id) REFERENCES production_lines(line_id),
+    FOREIGN KEY (notification_priority_id) REFERENCES priorities(priority_id)
+);</code></pre>
+                    <p class="mt-2 text-sm text-slate-600">検索用に <code>notification_data_time</code>, <code>notification_line_id</code>, <code>notification_priority_id</code> へのインデックス付与を検討してください。</p>
+                </div>
+            </section>
+
+            <!-- 1. 指示一覧の取得 -->
+            <section id="get-instructions">
+                <h2 class="text-2xl font-bold border-b-2 border-indigo-500 pb-2 mb-4">1. 指示一覧の取得</h2>
+                <div class="bg-white p-6 rounded-lg shadow-md">
+                    <div class="flex items-center space-x-4 mb-4">
+                        <span class="method-badge get">GET</span>
+                        <span class="font-mono text-lg font-semibold">/api/instructions</span>
+                        <span class="bg-yellow-500 text-white px-3 py-1 rounded-full text-sm font-bold">優先度: B</span>
+                    </div>
+                    <p class="mb-4">製造指示のリストをまとめて取得するAPIです。絞り込み検索にも対応しています。</p>
+                    
+                    <h3 class="text-lg font-semibold mt-6 mb-2">クエリパラメータ (絞り込み検索)</h3>
+                    <table class="w-full text-left border-collapse">
+                        <thead>
+                            <tr>
+                                <th class="border-b-2 p-2">パラメータ</th>
+                                <th class="border-b-2 p-2">説明</th>
+                                <th class="border-b-2 p-2">例</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td class="border-b p-2 font-mono">q</td>
+                                <td class="border-b p-2">品名、配送先、備考などでのフリーワード検索。</td>
+                                <td class="border-b p-2 font-mono">?q=西川仕様</td>
+                            </tr>
+                            <tr>
+                                <td class="border-b p-2 font-mono">line</td>
+                                <td class="border-b p-2">担当ラインでの絞り込み。</td>
+                                <td class="border-b p-2 font-mono">?line=マット</td>
+                            </tr>
+                            <tr>
+                                <td class="border-b p-2 font-mono">is_completed</td>
+                                <td class="border-b p-2">完了状態で絞り込み (true: 完了, false: 未完了)。</td>
+                                <td class="border-b p-2 font-mono">?is_completed=false</td>
+                            </tr>
+                            <tr>
+                                <td class="border-b p-2 font-mono">date</td>
+                                <td class="border-b p-2">作成日で絞り込み。YYYY-MM-DDで指定。</td>
+                                <td class="border-b p-2 font-mono">?date=2025-08-01</td>
+                            </tr>
+                        </tbody>
+                    </table>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">成功レスポンス (200 OK)</h3>
+                    <pre><code class="language-json">[
+    {
+        "id": 1,
+        "line": "マット",
+        "product_name": "マット",
+        "size": "1200x1950x240 / SD",
+        "color": "GM/BE",
+        "spring_type": "1.9",
+        "included_items": "西川仕様 / 西川アイロンシール",
+        "shipping_method": "匠",
+        "destination": "フラワー / ホテル / 両面張り",
+        "remarks": "至急対応",
+        "quantity": 1,
+        "is_completed": false,
+        "created_at": "2025-08-04T10:00:00Z"
+    },
+    {
+        "id": 2,
+        "line": "ボトム",
+        "product_name": "サポート",
+        "size": "80巾",
+        "color": "5col",
+        "spring_type": null,
+        "included_items": null,
+        "shipping_method": null,
+        "destination": "福岡県小郡",
+        "remarks": "アマゾン直送便",
+        "quantity": 1,
+        "is_completed": true,
+        "created_at": "2025-08-03T15:30:00Z"
+    }
+]</code></pre>
+                </div>
+            </section>
+
+            <!-- 2. 新規指示の作成 -->
+            <section id="create-instruction">
+                <h2 class="text-2xl font-bold border-b-2 border-indigo-500 pb-2 mb-4">2. 新規指示の作成</h2>
+                <div class="bg-white p-6 rounded-lg shadow-md">
+                    <div class="flex items-center space-x-4 mb-4">
+                        <span class="method-badge post">POST</span>
+                        <span class="font-mono text-lg font-semibold">/api/instructions</span>
+                        <span class="bg-yellow-500 text-white px-3 py-1 rounded-full text-sm font-bold">優先度: B</span>
+                    </div>
+                    <p class="mb-4">新しい製造指示を登録するためのAPIです。モーダルで入力したデータを JSON 形式で送信します。</p>
+                    
+                    <h3 class="text-lg font-semibold mt-6 mb-2">リクエストボディ</h3>
+                    <pre><code class="language-json">{
+    "line": "マット",
+    "product_name": "新作マット",
+    "size": "1400x1950x300 / D",
+    "quantity": 2,
+    "remarks": "サンプル生産"
+}</code></pre>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">成功レスポンス (201 Created)</h3>
+                    <p class="text-sm mb-2">登録が成功すると、ID が付与された指示データが返却されます。</p>
+                    <pre><code class="language-json">{
+    "id": 3,
+    "line": "マット",
+    "product_name": "新作マット",
+    "size": "1400x1950x300 / D",
+    "color": null,
+    "spring_type": null,
+    "included_items": null,
+    "shipping_method": null,
+    "destination": null,
+    "remarks": "サンプル生産",
+    "quantity": 2,
+    "is_completed": false,
+    "created_at": "2025-08-04T11:00:00Z"
+}</code></pre>
+                </div>
+            </section>
+
+            <!-- 3. 指示の更新 -->
+            <section id="update-instruction">
+                <h2 class="text-2xl font-bold border-b-2 border-indigo-500 pb-2 mb-4">3. 指示の更新</h2>
+                <div class="bg-white p-6 rounded-lg shadow-md">
+                    <div class="flex items-center space-x-4 mb-4">
+                        <span class="method-badge put">PUT</span>
+                        <span class="font-mono text-lg font-semibold">/api/instructions/{id}</span>
+                        <span class="bg-yellow-500 text-white px-3 py-1 rounded-full text-sm font-bold">優先度: B</span>
+                    </div>
+                    <p class="mb-4">ID で指定した指示の情報を更新します。編集モーダルでの保存や完了トグルの操作で利用します。</p>
+                    
+                    <h4 class="text-lg font-semibold mt-6 mb-2">リクエストボディ (完了状態の更新)</h4>
+                    <pre><code class="language-json">{
+    "is_completed": true
+}</code></pre>
+
+                    <h4 class="text-lg font-semibold mt-6 mb-2">リクエストボディ (内容の編集)</h4>
+                    <pre><code class="language-json">{
+    "quantity": 3,
+    "remarks": "至急対応！3個に変更"
+}</code></pre>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">成功レスポンス (200 OK)</h3>
+                    <pre><code class="language-json">{
+    "id": 1,
+    "line": "マット",
+    "product_name": "マット",
+    "remarks": "至急対応！3個に変更",
+    "quantity": 3,
+    "is_completed": true,
+    "created_at": "2025-08-04T10:00:00Z"
+    // ... 他のフィールド
+}</code></pre>
+                </div>
+            </section>
+
+            <!-- 4. 指示の削除 -->
+            <section id="delete-instruction">
+                <h2 class="text-2xl font-bold border-b-2 border-indigo-500 pb-2 mb-4">4. 指示の削除</h2>
+                <div class="bg-white p-6 rounded-lg shadow-md">
+                    <div class="flex items-center space-x-4 mb-4">
+                        <span class="method-badge delete">DELETE</span>
+                        <span class="font-mono text-lg font-semibold">/api/instructions/{id}</span>
+                        <span class="bg-yellow-500 text-white px-3 py-1 rounded-full text-sm font-bold">優先度: B</span>
+                    </div>
+                    <p class="mb-4">IDで指定した指示を削除する。間違って作っちゃったときとかに使う想定！</p>
+                    
+                    <h3 class="text-lg font-semibold mt-6 mb-2">成功レスポンス (204 No Content)</h3>
+                    <p>削除が成功したら、ボディには何も返ってこないのがお約束。</p>
+                </div>
+            </section>
+
+            <!-- 5. 利用可能な日付の取得 -->
+            <section id="available-dates">
+                <h2 class="text-2xl font-bold border-b-2 border-indigo-500 pb-2 mb-4">5. 利用可能な日付の取得</h2>
+                <div class="bg-white p-6 rounded-lg shadow-md">
+                    <div class="flex items-center space-x-4 mb-4">
+                        <span class="method-badge get">GET</span>
+                        <span class="font-mono text-lg font-semibold">/api/instructions/available-dates</span>
+                        <span class="bg-yellow-500 text-white px-3 py-1 rounded-full text-sm font-bold">優先度: B</span>
+                    </div>
+                    <p class="mb-4">一覧の絞り込み用に、指示が存在する「日付」の候補だけを返すAPI。カレンダーや日付セレクタの候補生成に使います。</p>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">クエリパラメータ</h3>
+                    <table class="w-full text-left border-collapse">
+                        <thead>
+                            <tr>
+                                <th class="border-b-2 p-2">パラメータ</th>
+                                <th class="border-b-2 p-2">説明</th>
+                                <th class="border-b-2 p-2">例</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td class="border-b p-2 font-mono">limit</td>
+                                <td class="border-b p-2">返す日付件数の上限。未指定なら上限なし。</td>
+                                <td class="border-b p-2 font-mono">?limit=30</td>
+                            </tr>
+                        </tbody>
+                    </table>
+
+                    <h3 class="text-lg font-semibold mt-6 mb-2">成功レスポンス (200 OK)</h3>
+                    <pre><code class="language-json">[
+    "2025-08-01",
+    "2025-08-03",
+    "2025-08-04"
+]</code></pre>
+
+                    <div class="mt-4 p-3 bg-slate-100 rounded-md text-slate-700 text-sm">
+                        <ul class="list-disc ml-5 space-y-1">
+                            <li>日付はサーバー側タイムゾーンで日単位に正規化されます（既定: Asia/Tokyo）。</li>
+                            <li>内部実装の例: <span class="font-mono">DATE(notification_data_time)</span> で日付を抽出し、<span class="font-mono">GROUP BY</span> して重複排除。</li>
+                            <li>UI ではこの結果をそのまま日付ピッカーの候補に流用できます。</li>
+                        </ul>
+                    </div>
+                </div>
+            </section>
+        </div>
+
+        <footer class="text-center text-slate-500 mt-12 py-4">
+            &copy; 2024 API Design by Gemini. All Rights Reserved.
+        </footer>
+    </div>
+    
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+    <script>
+        hljs.highlightAll();
+    </script>
+    <script>
+        (function(){ const blocks=document.querySelectorAll('pre code.language-json, pre code.language-http, pre code.language-sql'); blocks.forEach(code=>{ const pre=code.parentElement; if(!pre.classList.contains('code-block-wrapper')) pre.classList.add('code-block-wrapper'); if(pre.querySelector('.copy-btn')) return; const btn=document.createElement('button'); btn.type='button'; btn.className='copy-btn'; btn.innerHTML='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg><span>Copy</span>'; btn.addEventListener('click',async()=>{ const raw=code.innerText.replace(/\n+$/,''); try{ await navigator.clipboard.writeText(raw); btn.classList.add('copied'); const original=btn.innerHTML; btn.innerHTML='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg><span>Copied!</span>'; setTimeout(()=>{btn.classList.remove('copied'); btn.innerHTML=original;},1800);}catch(e){ btn.innerHTML='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg><span style="color:#fee2e2">Failed</span>'; setTimeout(()=>{btn.innerHTML='Copy';},2000);} }); pre.appendChild(btn); }); })();
+    </script>
+</body>
+</html>
diff --git "a/docs/API\350\250\255\350\250\210/\351\203\250\345\223\201\345\234\250\345\272\253\347\256\241\347\220\206.html" "b/docs/API\350\250\255\350\250\210/\351\203\250\345\223\201\345\234\250\345\272\253\347\256\241\347\220\206.html"
new file mode 100644
index 000000000..5403b1c40
--- /dev/null
+++ "b/docs/API\350\250\255\350\250\210/\351\203\250\345\223\201\345\234\250\345\272\253\347\256\241\347\220\206.html"
@@ -0,0 +1,412 @@
+<!DOCTYPE html>
+<html lang="ja">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>部品在庫管理API設計書 (改訂版)</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <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=Inter:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;700&display=swap"
+        rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/vs2015.min.css">
+    <script src="../sidebar.js" defer></script>
+    <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
+    <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
+    <style>
+        body {
+            font-family: 'Inter', 'Noto Sans JP', sans-serif;
+        }
+
+        .method-badge {
+            font-size: 0.8rem;
+            font-weight: 700;
+            padding: 0.2em 0.6em;
+            border-radius: 0.25rem;
+            color: white;
+            display: inline-block;
+            width: 80px;
+            text-align: center;
+        }
+
+        .get {
+            background-color: #3b82f6;
+        }
+
+        .post {
+            background-color: #22c55e;
+        }
+
+        .put {
+            background-color: #f97316;
+        }
+
+        .delete {
+            background-color: #ef4444;
+        }
+
+        pre code.hljs {
+            padding: 1rem;
+            border-radius: 0.5rem;
+            font-size: 0.875rem;
+        }
+    /* Copy button */
+    .code-block-wrapper { position: relative; }
+    .copy-btn { position:absolute; top:4px; right:6px; background:rgba(51,65,85,.85); color:#f1f5f9; font-size:12px; font-weight:600; padding:6px 12px 6px 10px; border-radius:8px; cursor:pointer; line-height:1; display:flex; align-items:center; gap:6px; backdrop-filter:blur(2px); border:1px solid rgba(255,255,255,.08); transition:transform .16s, box-shadow .22s, background-color .25s ease; box-shadow:0 2px 6px -2px rgba(15,23,42,.35);} .copy-btn svg{width:16px;height:16px;} .copy-btn:hover{background:rgba(71,85,105,.92); transform:translateY(-2px); box-shadow:0 6px 14px -4px rgba(15,23,42,.45);} .copy-btn:active{transform:translateY(0); box-shadow:0 3px 8px -4px rgba(15,23,42,.4);} .copy-btn.copied{background:linear-gradient(135deg,#16a34a 0%,#15803d 70%);} .copy-btn.copied svg{animation:pop .4s ease;} @keyframes pop{0%{transform:scale(.6) rotate(-20deg);}60%{transform:scale(1.15);}100%{transform:scale(1);}}
+
+        section h2 {
+            display: flex;
+            align-items: center;
+            font-size: 1.5rem;
+            /* 2xl */
+            font-weight: 700;
+            /* bold */
+            border-bottom-width: 2px;
+            border-color: #6366f1;
+            /* indigo-500 */
+            padding-bottom: 0.5rem;
+            /* pb-2 */
+            margin-bottom: 1rem;
+            /* mb-4 */
+        }
+
+        section h2 ion-icon {
+            margin-right: 0.75rem;
+            /* mr-3 */
+            font-size: 1.8rem;
+            color: #6366f1;
+            /* indigo-500 */
+        }
+    </style>
+</head>
+
+<body class="bg-slate-50 text-slate-800">
+
+    <div class="container mx-auto p-4 sm:p-6 lg:p-8">
+        <header class="mb-8">
+            <div class="flex items-center justify-between mb-4">
+                <div class="flex items-center space-x-4">
+                    <ion-icon name="server-outline" class="w-12 h-12 text-indigo-600"></ion-icon>
+                    <h1 class="text-4xl font-bold text-slate-900">部品在庫管理API 設計書</h1>
+                </div>
+                <a href="#" class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition-colors">
+                    ← 管理画面に戻る
+                </a>
+            </div>
+            <div class="mt-4 p-4 bg-indigo-100 border-l-4 border-indigo-500 text-indigo-700 rounded-r-lg">
+                <p class="font-bold">対象ページ: 部品在庫管理ページ</p>
+                <p class="text-sm mt-1">このドキュメントは、「部品在庫管理ページ」の機能を実装するためのAPI仕様を定義します。箱IDは廃止しています。</p>
+            </div>
+        </header>
+
+        <div class="space-y-12">
+
+            <!-- DB設計 -->
+            <section id="db-design">
+                <h2><ion-icon name="hardware-chip-outline"></ion-icon>1. DB設計</h2>
+                <div class="bg-white p-6 rounded-lg shadow-md">
+                    <p class="mb-4">DB 設計は以下のとおりです。シンプルな構成としています。</p>
+                    <h4 class="text-lg font-semibold mt-6 mb-2">racks (棚) テーブル</h4>
+                    <pre><code class="language-sql">CREATE TABLE racks (
+    -- 棚のID、自動で番号が振られる
+    rack_id SERIAL PRIMARY KEY,
+    -- 棚の名前 (例: スプリング・小物資材ラック)
+    rack_name VARCHAR(255) NOT NULL UNIQUE,
+    -- 棚の行数 (A, B, C...)
+    rows INT NOT NULL CHECK (rows > 0),
+    -- 棚の列数 (1, 2, 3...)
+    cols INT NOT NULL CHECK (cols > 0)
+);</code></pre>
+                    <h4 class="text-lg font-semibold mt-6 mb-2">slots (スロット/箱) テーブル</h4>
+                    <pre><code class="language-sql">CREATE TABLE slots (
+    -- スロットのID、これも自動
+    slot_id SERIAL PRIMARY KEY,
+    -- どの棚に属してるかのID
+    rack_id INT NOT NULL,
+    -- 場所を示す識別子 (例: 'A-1', 'C-4')
+    slot_identifier VARCHAR(10) NOT NULL,
+
+    -- ↓部品が入ってるときだけ値が入る↓
+    part_name VARCHAR(255),
+    part_model_number VARCHAR(100),
+    quantity INT CHECK (quantity >= 0),
+    color_code VARCHAR(7),
+
+    -- 同じ棚の同じ場所に2個は置けないようにする設定
+    UNIQUE (rack_id, slot_identifier),
+    -- 存在しない棚には部品を置けないようにする設定
+    FOREIGN KEY (rack_id) REFERENCES racks(rack_id) ON DELETE CASCADE
+);</code></pre>
+                </div>
+            </section>
+
+            <!-- 棚 (Rack) API -->
+            <section id="api-racks">
+                <h2><ion-icon name="grid-outline"></ion-icon>2. 棚 (Rack) API</h2>
+
+                <div class="bg-white p-6 rounded-lg shadow-md mb-6">
+                    <h3 class="text-xl font-bold mb-3 text-slate-700">2.1. 棚一覧の取得</h3>
+                    <div class="flex items-center space-x-4 mb-4">
+                        <span class="method-badge get">GET</span>
+                        <span class="font-mono text-lg font-semibold">/api/racks</span>
+                    </div>
+                    <p>登録されている棚の一覧を取得するAPIです。左側のラック一覧を表示する際に利用します。</p>
+                    <h4 class="text-lg font-semibold mt-6 mb-2">成功レスポンス (200 OK)</h4>
+                    <pre><code class="language-json">[
+    {
+        "rack_id": 1,
+        "rack_name": "スプリング・小物資材ラック",
+        "rows": 3,
+        "cols": 4
+    },
+    {
+        "rack_id": 2,
+        "rack_name": "ウレタンフォーム保管棚",
+        "rows": 3,
+        "cols": 6
+    }
+]</code></pre>
+                </div>
+
+                <div class="bg-white p-6 rounded-lg shadow-md mb-6">
+                    <h3 class="text-xl font-bold mb-3 text-slate-700">2.2. 特定の棚の詳細取得</h3>
+                    <div class="flex items-center space-x-4 mb-4">
+                        <span class="method-badge get">GET</span>
+                        <span class="font-mono text-lg font-semibold">/api/racks/{rack_id}</span>
+                    </div>
+                    <p>指定した棚の詳細情報を取得します。内部に格納されている部品（スロット）の情報もまとめて取得できます。</p>
+                    <h4 class="text-lg font-semibold mt-6 mb-2">成功レスポンス (200 OK)</h4>
+                    <pre><code class="language-json">{
+    "rack_id": 1,
+    "rack_name": "スプリング・小物資材ラック",
+    "rows": 3,
+    "cols": 4,
+    "slots": {
+        "A-1": { "part_name": "ポケットコイル (シングル)", "part_model_number": "PC-S-H20", "quantity": 25, "color_code": "4A90E2" },
+        "A-2": { "part_name": "ポケットコイル (シングル)", "part_model_number": "PC-S-H20", "quantity": 25, "color_code": "4A90E2" },
+        "A-3": null,
+        "A-4": { "part_name": "ボンネルコイル (セミダブル)", "part_model_number": "BC-SD-H18", "quantity": 20, "color_code": "50E3C2" },
+        "B-1": { "part_name": "コーナーガード", "part_model_number": "CG-STD", "quantity": 500, "color_code": "9B9B9B" }
+        // ...以下続く
+    }
+}</code></pre>
+                </div>
+
+                <div class="bg-white p-6 rounded-lg shadow-md mb-6">
+                    <h3 class="text-xl font-bold mb-3 text-slate-700">2.3. 新規ラックの作成</h3>
+                    <div class="flex items-center space-x-4 mb-4">
+                        <span class="method-badge post">POST</span>
+                        <span class="font-mono text-lg font-semibold">/api/racks</span>
+                    </div>
+                    <p>新しい棚（ラック）を追加するときのAPIです。名前とサイズを指定して POST します。</p>
+                    <h4 class="text-lg font-semibold mt-6 mb-2">リクエストボディ</h4>
+                    <pre><code class="language-json">{
+    "rack_name": "生地・充填材ラック",
+    "rows": 2,
+    "cols": 3
+}</code></pre>
+                    <h4 class="text-lg font-semibold mt-6 mb-2">成功レスポンス (201 Created)</h4>
+                    <pre><code class="language-json">{
+    "rack_id": 3,
+    "rack_name": "生地・充填材ラック",
+    "rows": 2,
+    "cols": 3,
+    "message": "新しいラックが作成されました。"
+}</code></pre>
+                </div>
+
+                <div class="bg-white p-6 rounded-lg shadow-md">
+                    <h3 class="text-xl font-bold mb-3 text-slate-700">2.4. ラックの削除</h3>
+                    <div class="flex items-center space-x-4 mb-4">
+                        <span class="method-badge delete">DELETE</span>
+                        <span class="font-mono text-lg font-semibold">/api/racks/{rack_id}</span>
+                    </div>
+                    <p>不要になった棚を削除するAPIです。URL で ID を指定して実行します。</p>
+                    <h4 class="text-lg font-semibold mt-6 mb-2">成功レスポンス (200 OK)</h4>
+                    <pre><code class="language-json">{
+    "message": "ラック「スプリング・小物資材ラック」を削除しました。"
+}</code></pre>
+                </div>
+            </section>
+
+            <!-- 箱 (Box/Part) API -->
+            <section id="api-boxes">
+                <h2><ion-icon name="cube-outline"></ion-icon>3. 箱 (Box/Part) API</h2>
+
+                <div class="bg-white p-6 rounded-lg shadow-md mb-6">
+                    <h3 class="text-xl font-bold mb-3 text-slate-700">3.1. 新規部品の格納</h3>
+                    <div class="flex items-center space-x-4 mb-4">
+                        <span class="method-badge post">POST</span>
+                        <span
+                            class="font-mono text-lg font-semibold">/api/racks/{rack_id}/slots/{slot_identifier}</span>
+                    </div>
+                    <p>空のスロットに新しい箱を格納するときに利用します。`slot_identifier` は `A-1` のような形式です。</p>
+                    <h4 class="text-lg font-semibold mt-6 mb-2">リクエストボディ</h4>
+                    <pre><code class="language-json">{
+    "part_name": "ラテックスフォーム 40mm (D)",
+    "part_model_number": "LTX-T40-D",
+    "quantity": 20,
+    "color_code": "F8E71C"
+}</code></pre>
+                    <h4 class="text-lg font-semibold mt-6 mb-2">成功レスポンス (201 Created)</h4>
+                    <pre><code class="language-json">{
+    "message": "A-1に部品を格納しました。",
+    "slot": {
+        "slot_identifier": "A-1",
+        "part_name": "ラテックスフォーム 40mm (D)",
+        "part_model_number": "LTX-T40-D",
+        "quantity": 20,
+        "color_code": "F8E71C"
+    }
+}</code></pre>
+                </div>
+
+                <div class="bg-white p-6 rounded-lg shadow-md mb-6">
+                    <h3 class="text-xl font-bold mb-3 text-slate-700">3.2. 部品情報の編集</h3>
+                    <div class="flex items-center space-x-4 mb-4">
+                        <span class="method-badge put">PUT</span>
+                        <span
+                            class="font-mono text-lg font-semibold">/api/racks/{rack_id}/slots/{slot_identifier}</span>
+                    </div>
+                    <p>既存箱の情報を編集するときは PUT を使用します。数量変更やカラー変更などに対応します。</p>
+                    <h4 class="text-lg font-semibold mt-6 mb-2">リクエストボディ</h4>
+                    <pre><code class="language-json">{
+    "part_name": "【改】ラテックスフォーム 40mm (D)",
+    "part_model_number": "LTX-T40-D-rev2",
+    "quantity": 25,
+    "color_code": "4A90E2"
+}</code></pre>
+                    <h4 class="text-lg font-semibold mt-6 mb-2">成功レスポンス (200 OK)</h4>
+                    <pre><code class="language-json">{
+    "message": "A-1の部品情報を更新しました。",
+    "slot": {
+        "slot_identifier": "A-1",
+        "part_name": "【改】ラテックスフォーム 40mm (D)",
+        "part_model_number": "LTX-T40-D-rev2",
+        "quantity": 25,
+        "color_code": "4A90E2"
+    }
+}</code></pre>
+                </div>
+
+                <div class="bg-white p-6 rounded-lg shadow-md mb-6">
+                    <h3 class="text-xl font-bold mb-3 text-slate-700">3.3. 部品の削除</h3>
+                    <div class="flex items-center space-x-4 mb-4">
+                        <span class="method-badge delete">DELETE</span>
+                        <span
+                            class="font-mono text-lg font-semibold">/api/racks/{rack_id}/slots/{slot_identifier}</span>
+                    </div>
+                    <p>棚から箱を削除する（＝スロットを空にする）ときに使うAPI。</p>
+                    <h4 class="text-lg font-semibold mt-6 mb-2">成功レスポンス (200 OK)</h4>
+                    <pre><code class="language-json">{
+    "message": "A-1の部品を削除しました。"
+}</code></pre>
+                </div>
+
+                <div class="bg-white p-6 rounded-lg shadow-md mb-6">
+                    <h3 class="text-xl font-bold mb-3 text-slate-700">3.4. 部品の移動</h3>
+                    <div class="flex items-center space-x-4 mb-4">
+                        <span class="method-badge post">POST</span>
+                        <span class="font-mono text-lg font-semibold">/api/racks/move/</span>
+                    </div>
+                    <p>箱を別の場所に移動するAPI。移動元と移動先の情報を送る！</p>
+                    <h4 class="text-lg font-semibold mt-6 mb-2">リクエストボディ</h4>
+                    <pre><code class="language-json">{
+    "from_rack_id": 1,
+    "from_slot_identifier": "A-1",
+    "to_rack_id": 1,
+    "to_slot_identifier": "C-3"
+}</code></pre>
+                    <h4 class="text-lg font-semibold mt-6 mb-2">成功レスポンス (200 OK)</h4>
+                    <pre><code class="language-json">{
+    "message": "部品を A-1 から C-3 へ移動しました。"
+}</code></pre>
+                    <div
+                        class="mt-8 p-4 bg-yellow-50 border-l-4 border-yellow-500 text-yellow-800 rounded-r-lg space-y-4">
+                        <div>
+                            <p class="text-sm">{rack_id}では、データのやり取りはしない。全てリクエストJSONで完結させるものとする。</p>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="bg-white p-6 rounded-lg shadow-md">
+                    <h3 class="text-xl font-bold mb-3 text-slate-700">3.5. 部品の使用</h3>
+                    <div class="flex items-center space-x-4 mb-4">
+                        <span class="method-badge post">POST</span>
+                        <span
+                            class="font-mono text-lg font-semibold">/api/racks/{rack_id}/slots/{slot_identifier}/use</span>
+                    </div>
+                    <p>部品を使用した際に在庫数を減らすためのAPIです。「何個使用したか」をサーバーへ伝えます。</p>
+                    <h4 class="text-lg font-semibold mt-6 mb-2">リクエストボディ</h4>
+                    <pre><code class="language-json">{
+    "quantity_to_use": 5
+}</code></pre>
+                    <h4 class="text-lg font-semibold mt-6 mb-2">成功レスポンス (200 OK)</h4>
+                    <pre><code class="language-json">{
+    "message": "部品を5個使用しました。",
+    "remaining_quantity": 20
+}</code></pre>
+                    <div class="mt-8 p-4 bg-sky-50 border-l-4 border-sky-500 text-sky-800 rounded-r-lg">
+                        <p class="text-sm">使用後の在庫が 0 個になった場合、サーバー側で自動的にそのスロットを空状態として扱います。</p>
+                    </div>
+                </div>
+
+            </section>
+
+            <!-- QRコード -->
+            <section id="qr-handling">
+                <h2><ion-icon name="qr-code-outline"></ion-icon>4. 棚QRコード仕様</h2>
+                <div class="bg-white p-6 rounded-lg shadow-md">
+                    <p class="mb-4">QR コードは「棚 QR」の 1 種類とし、入庫と出庫の双方に対応します。</p>
+
+                    <h4 class="text-lg font-semibold mt-6 mb-2">棚QRコードのデータ構造</h4>
+                    <p class="text-sm mb-4">棚の各場所に貼る QR コードは、スキャンすると以下の JSON 文字列を取得できるようにします。</p>
+                    <pre><code class="language-json">{
+    "type": "rack_slot",
+    "rack_id": 1,
+    "slot_identifier": "A-1"
+}</code></pre>
+
+                    <div
+                        class="mt-8 p-4 bg-yellow-50 border-l-4 border-yellow-500 text-yellow-800 rounded-r-lg space-y-4">
+                        <div>
+                            <h4 class="font-bold text-lg">【補足】QR入庫の流れ</h4>
+                            <ul class="mt-2 list-disc list-inside space-y-1 text-sm">
+                                <li>1. モーダルで新しい部品の情報を入力します。</li>
+                                <li>2. カメラで配置したい場所の「棚 QR コード」をスキャンします。</li>
+                                <li>3. スキャン結果から棚の位置（例: `rack_id: 1`, `slot_identifier: 'A-1'`）を取得します。</li>
+                                <li>4. API (`POST /api/racks/1/slots/A-1`) を呼び出し、入力した部品情報をサーバーへ送信して格納を完了します。</li>
+                            </ul>
+                        </div>
+                        <div>
+                            <h4 class="font-bold text-lg">【補足】QR出庫の流れ</h4>
+                            <ul class="mt-2 list-disc list-inside space-y-1 text-sm">
+                                <li>1. FAB メニューから「QR 出庫」を選択します。</li>
+                                <li>2. カメラで出庫対象の棚に貼付された「棚 QR コード」をスキャンします。</li>
+                                <li>3. スキャン結果を基にアプリが対象スロットの部品情報を表示します。</li>
+                                <li>4. 「部品を使用」モーダルで使用した数量を入力します。</li>
+                                <li>5. API (`POST /api/racks/1/slots/A-1/use`) を呼び出し、サーバー側の在庫数を更新して完了します。</li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </div>
+
+        <footer class="text-center text-slate-500 mt-12 py-4">
+            &copy; 2024 API Design by Gemini. All Rights Reserved.
+        </footer>
+    </div>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+    <script>
+        hljs.highlightAll();
+    </script>
+    <script>
+        (function(){ const blocks=document.querySelectorAll('pre code.language-json, pre code.language-http, pre code.language-sql'); blocks.forEach(code=>{ const pre=code.parentElement; if(!pre.classList.contains('code-block-wrapper')) pre.classList.add('code-block-wrapper'); if(pre.querySelector('.copy-btn')) return; const btn=document.createElement('button'); btn.type='button'; btn.className='copy-btn'; btn.innerHTML='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg><span>Copy</span>'; btn.addEventListener('click',async()=>{ const raw=code.innerText.replace(/\n+$/,''); try{ await navigator.clipboard.writeText(raw); btn.classList.add('copied'); const original=btn.innerHTML; btn.innerHTML='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg><span>Copied!</span>'; setTimeout(()=>{btn.classList.remove('copied'); btn.innerHTML=original;},1800);}catch(e){ btn.innerHTML='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg><span style="color:#fee2e2">Failed</span>'; setTimeout(()=>{btn.innerHTML='Copy';},2000);} }); pre.appendChild(btn); }); })();
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/docs/SQL/SQL\343\201\253\345\205\245\343\202\213\343\202\263\343\203\236\343\203\263\343\203\211.txt" "b/docs/SQL/SQL\343\201\253\345\205\245\343\202\213\343\202\263\343\203\236\343\203\263\343\203\211.txt"
new file mode 100644
index 000000000..ab5b90d59
--- /dev/null
+++ "b/docs/SQL/SQL\343\201\253\345\205\245\343\202\213\343\202\263\343\203\236\343\203\263\343\203\211.txt"
@@ -0,0 +1,12 @@
+docker exec -it g3-postgres psql -U postgres -d g3db
+
+docker exec -it g3-postgres psql -U oshiyama -d g3db
+
+docker exec -it g3-postgres psql -U nakamura -d g3db
+
+docker exec -it g3-postgres psql -U kose -d g3db
+
+pass: g3
+
+Thunder Clientウィンドウ起動
+>Thunder Client: New Request
\ No newline at end of file
diff --git a/docs/SQL/create.sql b/docs/SQL/create.sql
new file mode 100644
index 000000000..ed3234f08
--- /dev/null
+++ b/docs/SQL/create.sql
@@ -0,0 +1,183 @@
+-- 【Role (権限) マスタ化】
+CREATE TABLE roles (
+    role_id SERIAL PRIMARY KEY,            -- 自動採番
+    role_name VARCHAR(50) UNIQUE NOT NULL  -- 権限名(例:"管理者"や"一般")
+);
+
+-- 【Production Line (担当ライン) マスタ化】
+CREATE TABLE production_lines (
+    line_id SERIAL PRIMARY KEY,            -- 自動採番
+    line_name VARCHAR(100) UNIQUE NOT NULL -- ライン名(例:"ラインA"や"ラインB")
+);
+
+-- 【Employee ID (従業員ID) で統一管理】
+CREATE TABLE employees (
+    employee_id SERIAL PRIMARY KEY,               -- 自動採番
+    employee_name VARCHAR(100) NOT NULL,          -- 名前（フルネーム）
+    employee_user_id VARCHAR(50) UNIQUE NOT NULL, -- ユーザーID(ログイン用、一意)
+    employee_password VARCHAR(255) NOT NULL,      -- パスワード(ハッシュ保存推奨)
+    employee_is_active BOOLEAN DEFAULT TRUE,      -- 有効/無効フラグ(TRUE=有効)
+    employee_role_name VARCHAR(50) NOT NULL,      -- 権限名
+    employee_line_name VARCHAR(50) NOT NULL,      -- 担当ライン名
+    employee_special_notes TEXT,                  -- 特記事項（メモなど）
+    employee_color_code CHAR(6)                   -- カラーコード（例:"FF0000"）
+    --FOREIGN KEY (employee_role_name) REFERENCES roles(role_id),
+    --FOREIGN KEY (employee_line_name) REFERENCES production_lines(line_id)
+);
+
+-- 【Reports(日報)】
+CREATE TABLE reports (
+    report_id SERIAL PRIMARY KEY,            -- 自動採番
+    report_employee_id INT NOT NULL,         -- 担当者ID（employeesテーブルの外部キー）
+    report_date DATE NOT NULL,               -- 日付（対象の日報日）
+    report_product_name VARCHAR(100),        -- 製品名（任意）
+    report_line_id INT NOT NULL,             -- 担当ラインID（production_linesテーブルの外部キー）
+    report_production_result INT,            -- 生産結果（数量）
+    report_today_work TEXT,                  -- 本日の作業内容
+    report_memo TEXT,                        -- メモ・備考
+    FOREIGN KEY (report_employee_id) REFERENCES employees(employee_id),
+    FOREIGN KEY (report_line_id) REFERENCES production_lines(line_id)
+);
+
+-- 【Notification Priority (優先度) マスタ化】
+CREATE TABLE priorities (
+    priority_id SERIAL PRIMARY KEY,           -- 優先度ID（自動採番）
+    priority_label VARCHAR(20) UNIQUE NOT NULL -- 優先度ラベル（例: "至急対応", "通常対応"）
+);
+
+-- 【Notifications(生産目標通知)】
+CREATE TABLE notifications (
+    notification_id SERIAL PRIMARY KEY,         -- 通知ID（自動採番）
+    notification_data_time TIMESTAMP DEFAULT CURRENT_TIMESTAMP,  -- 通知日時（自動設定）
+    notification_line_id INT NOT NULL,          -- 担当ラインID（外部キー）
+    notification_quantity INT NOT NULL,         -- 生産数量
+    notification_item_name VARCHAR(50),         -- 品名
+    notification_item_size VARCHAR(50),         -- サイズ
+    notification_color VARCHAR(50),             -- カラー
+    notification_spring_type VARCHAR(50),       -- バネタイプ
+    notification_accessories VARCHAR(50),       -- 同梱品
+    notification_delivery_method VARCHAR(50),   -- 配送方法
+    notification_delivery_address VARCHAR(100), -- 配送先住所
+    notification_delivery_company VARCHAR(50),  -- 配送会社名
+    notification_remarks TEXT,                  -- 備考
+    notification_priority_id INT NOT NULL,      -- 優先度ID（外部キー）
+    FOREIGN KEY (notification_line_id) REFERENCES production_lines(line_id),
+    FOREIGN KEY (notification_priority_id) REFERENCES priorities(priority_id)
+);
+
+-- 【Machine Name (機械名) マスタ化】
+CREATE TABLE machines (
+    machine_id SERIAL PRIMARY KEY,             -- 機械ID（自動採番）
+    machine_name VARCHAR(100) UNIQUE NOT NULL  -- 機械名（例: "生産機Mk-I"）
+);
+
+-- 【Machine Status(生産機械状況)】
+CREATE TABLE machine_status (
+    machine_status_id SERIAL PRIMARY KEY,
+    machine_data_time TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+    machine_id INT NOT NULL,
+    status VARCHAR(20) NOT NULL CHECK (status IN ('稼働中','停止中','異常あり','メンテ中')),
+    today_uptime_seconds INT DEFAULT 0,
+    today_production_count INT DEFAULT 0,
+    machine_last_inspection DATE,
+    next_inspection_date DATE
+    --FOREIGN KEY (machine_id) REFERENCES machines(machine_id)
+);
+-- 【Machine Logs（機械エラーログ履歴）】
+CREATE TABLE machine_logs (
+    log_id SERIAL PRIMARY KEY,
+    machine_id INT NOT NULL,
+    timestamp TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+    log_type VARCHAR(10) CHECK (log_type IN ('error','warning','info')),
+    title VARCHAR(100) NOT NULL,
+    message TEXT,
+    FOREIGN KEY (machine_id) REFERENCES machines(machine_id)
+);
+
+
+--【画像検査テーブル】
+CREATE TABLE inspection_results (
+    inspection_id SERIAL PRIMARY KEY,                                   -- 自動採番
+    inspection_camera_id VARCHAR(50) NOT NULL,                          -- カメラ名
+    inspection_product_id VARCHAR(50) NOT NULL,                         -- 製品名
+    inspection_result VARCHAR(50) NULL,                                 -- 検査結果（良品、不良など）
+    inspection_reason TEXT NULL,                                        -- 問題点詳細
+    inspection_image_path TEXT NOT NULL,                                -- 検査画像パス
+    inspection_captured_time TIMESTAMP DEFAULT CURRENT_TIMESTAMP,       -- 撮影日時
+    inspection_inspected_time TIMESTAMP NULL DEFAULT CURRENT_TIMESTAMP -- 検査日時
+);
+
+--【ホックリング残数・生産数テーブル】
+CREATE TABLE machine_production (
+    machine_prod_id SERIAL PRIMARY KEY,                             -- 生産データID（自動採番）
+    machine_prod_captured_time TIMESTAMP DEFAULT CURRENT_TIMESTAMP, -- 記録日時
+    machine_prod_hook_remaining INT NOT NULL,                       -- ホックリング残数
+    machine_prod_count INT NOT NULL                                 -- 生産数
+);
+
+-- 【生産数管理テーブル】
+CREATE TABLE production_reports (
+    prodreport_id SERIAL PRIMARY KEY,              -- 自動採番
+    prodreport_date DATE NOT NULL,                 -- 日付
+    prodreport_product_name VARCHAR(100) NOT NULL, -- 製品名
+    prodreport_plan_quantity INT NOT NULL,         -- 計画数量
+    prodreport_actual_quantity INT NOT NULL,       -- 実績数量
+    prodreport_achievement_rate DECIMAL(5,2),      -- 達成率（例: 95.00）
+    prodreport_defective_quantity INT NOT NULL,    -- 不良数
+    prodreport_employee_id INT,                    -- 担当者ID（employeesテーブルの外部キー）
+    prodreport_remarks TEXT,                       -- 備考
+    FOREIGN KEY (prodreport_employee_id) REFERENCES employees(employee_id)
+);
+
+
+--【部品在庫管理(棚ver)テーブル】
+CREATE TABLE racks (
+    rack_id SERIAL PRIMARY KEY,             -- 棚のID、自動で番号が振られる
+    rack_name VARCHAR(255) NOT NULL UNIQUE, -- 棚の名前 (例: スプリング・小物資材ラック)
+    rows INT NOT NULL CHECK (rows > 0),     -- 棚の行数 (1, 2, 3...)
+    cols INT NOT NULL CHECK (cols > 0)      -- 棚の列数 (1, 2, 3...)
+);
+
+--【部品在庫管理(部品情報ver)テーブル】
+CREATE TABLE slots (
+    slot_id SERIAL PRIMARY KEY,                                       -- スロットのID、これも自動
+    rack_id INT NOT NULL,                                             -- どの棚に属してるかのID
+    slot_identifier VARCHAR(10) NOT NULL,                             -- 場所を示す識別子 (例: 'A-1', 'C-4')
+    part_name VARCHAR(255),                                           -- ↓部品が入ってるときだけ値が入る↓
+    part_model_number VARCHAR(100),
+    quantity INT CHECK (quantity >= 0),
+    color_code VARCHAR(7),
+    UNIQUE (rack_id, slot_identifier),                                -- 同じ棚の同じ場所に2個は置けないようにする設定
+    FOREIGN KEY (rack_id) REFERENCES racks(rack_id) ON DELETE CASCADE -- 存在しない棚には部品を置けないようにする設定
+);
+
+
+
+
+
+
+
+
+
+--以下廃棄？--
+
+-- 【racks テーブル（棚マスタ）】
+--CREATE TABLE racks (
+    --rack_id SERIAL PRIMARY KEY,              -- レコードID（自動連番）
+    --rack_name VARCHAR(100) UNIQUE NOT NULL,  -- 棚の名前（例: "A-1棚"）
+    --rack_location VARCHAR(255) NOT NULL,     -- 保管場所（例: "第1倉庫 A-1列"）
+    --rack_qr_path VARCHAR(255)                -- QRコード画像パス
+--);
+
+-- 【parts_inventory テーブル（部品在庫）】
+--CREATE TABLE parts_inventory (
+    --parts_id SERIAL PRIMARY KEY,                 -- 部品在庫ID（自動連番）
+    --parts_rack_id INT NOT NULL,                  -- 棚ID（外部キー）
+    --parts_name VARCHAR(100) NOT NULL,            -- 部品名
+    --parts_number VARCHAR(100) NOT NULL,          -- 部品型番
+    --parts_quantity INT NOT NULL DEFAULT 0,       -- 部品個数
+    --parts_qr_path VARCHAR(255),                  -- 出庫用QRコード画像パス
+    --parts_updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+    --FOREIGN KEY (parts_rack_id) REFERENCES racks(rack_id) -- 外部キー制約
+--);
+
diff --git a/docs/SQL/delete.sql b/docs/SQL/delete.sql
new file mode 100644
index 000000000..5a180f4e9
--- /dev/null
+++ b/docs/SQL/delete.sql
@@ -0,0 +1,15 @@
+DROP TABLE
+  reports,
+  notifications,
+  machine_status,
+  production_reports,
+  parts_inventory,
+  inspection_results,
+  machine_production,
+  employees,
+  machines,
+  racks,
+  roles,
+  production_lines,
+  priorities
+CASCADE;
\ No newline at end of file
diff --git a/docs/SQL/setup_for_ubuntu.md b/docs/SQL/setup_for_ubuntu.md
new file mode 100644
index 000000000..697eae10d
--- /dev/null
+++ b/docs/SQL/setup_for_ubuntu.md
@@ -0,0 +1,139 @@
+# Ubuntu で PostgreSQL をセットアップして本プロジェクト用 DB を構築する
+
+この手順では、Ubuntu 上に PostgreSQL をインストールし、本プロジェクトの接続情報に合わせて「ユーザー: `nakamura` / パスワード: `g3`、データベース: `g3db`」を用意します。
+
+> 想定環境: Ubuntu 22.04/24.04 系、PostgreSQL 14 〜 16
+
+## 1. PostgreSQL のインストール
+
+```bash
+# パッケージ更新
+sudo apt update
+
+# PostgreSQL と拡張(サーバ/クライアント/追加ツール)をインストール
+sudo apt install -y postgresql postgresql-contrib
+
+# バージョン確認（任意）
+psql --version
+```
+
+## 2. サービス起動と初期状態確認
+
+```bash
+# サービス起動（通常は自動起動済み）
+sudo systemctl enable --now postgresql
+
+# ステータス確認
+sudo systemctl status postgresql --no-pager
+```
+
+## 3. DB ユーザー/DB 作成と基本設定
+
+以下のSQLを一括実行します。リポジトリのルートで実行してください。
+
+```bash
+sudo -u postgres psql -f SQL/setup_for_ubuntu.sql
+```
+
+実行される内容:
+- ロール `nakamura` の作成/更新（ログイン権限・パスワード `g3`）
+- DB `g3db` の作成（未作成時のみ）
+- タイムゾーンを `Asia/Tokyo` に設定
+- `public` スキーマの所有者/権限を `nakamura` に設定
+- `SQL/create.sql`（スキーマ）と `SQL/testdata.sql`（サンプルデータ）を適用
+
+### (任意) OS の Linux ユーザーも作成する場合
+`pg_hba.conf` を `peer` 認証にする運用や、サービス実行ユーザーを作っておきたい場合は、OS の `nakamura` ユーザーも作成しておくと便利です。
+
+```bash
+# UID/GID 自動採番、ホームディレクトリ付きで作成
+sudo adduser --disabled-password --gecos "" nakamura
+
+# 必要に応じてパスワードを設定（DBのパスワードとは別物）
+# 例1) 対話的に設定（推奨）
+sudo passwd nakamura
+
+# サービス実行ユーザーとして使う場合、sudo 付与は慎重に検討
+# sudo usermod -aG sudo nakamura
+```
+
+OSユーザーを作成した場合、`pg_hba.conf` を `peer`/`ident` などへ切り替えると、OSユーザー=DBユーザーの紐付けでパスワード無し接続も可能です（セキュリティ/運用方針に合わせて設定してください）。
+
+#### 品質チェックを回避して OS パスワードを『g3』に固定する
+開発用途などでどうしても弱いパスワードを設定したい場合は、`pam_pwquality` の辞書チェックを通さずに暗号化済みパスワードを直接適用します。
+
+```bash
+# OpenSSL が未インストールなら導入
+sudo apt update && sudo apt install -y openssl
+
+# 'g3' を SHA-512 でハッシュ化して環境変数に格納
+HASH=$(openssl passwd -6 'g3')
+
+# 暗号化済み(-e)として chpasswd に適用（品質チェックを回避）
+echo "nakamura:$HASH" | sudo chpasswd -e
+```
+
+注意: セキュリティ上は非推奨です。本番やインターネットに露出する環境では使用しないでください。
+
+## 4. リモート接続の許可（必要な場合）
+
+LAN など他ホストから接続したい場合は PostgreSQL サーバ設定を変更します。
+
+```bash
+# 設定ファイルの場所確認（例: 16 の場合）
+PG_MAJOR=$(psql -V | awk '{print $3}' | cut -d. -f1)
+CONF_DIR="/etc/postgresql/${PG_MAJOR}/main"
+
+echo $CONF_DIR
+```
+
+- `postgresql.conf` の `listen_addresses` を `'*'` に設定
+
+```bash
+sudo sed -i "s/^#\?listen_addresses.*/listen_addresses = '*' /" "$CONF_DIR/postgresql.conf"
+```
+
+- `pg_hba.conf` に接続許可を追加（例: 192.168.0.0/16 からの md5 認証を許可）
+
+```bash
+echo "host    all             all             192.168.0.0/16        md5" | sudo tee -a "$CONF_DIR/pg_hba.conf"
+```
+
+- サービス再起動
+
+```bash
+sudo systemctl restart postgresql
+```
+
+## 5. 接続確認
+
+ローカル/リモートいずれでも、以下で接続を確認できます。
+
+```bash
+psql -h 192.168.0.20 -U nakamura -d g3db
+# パスワード: g3
+```
+
+SQLが通ることを確認:
+
+```sql
+SELECT current_database(), current_user, current_setting('timezone');
+SELECT COUNT(*) FROM employees;  -- スキーマ適用済みなら実行可
+```
+
+## 6. Next.js からの接続（参考）
+
+アプリ側の接続先はネットワークIP自動判定で切り替わります。
+- 192.168.x.x のサーバ上で実行 → `192.168.0.20:5432`
+- 10.x.x.x のサーバ上で実行 → `10.100.54.170:5432`
+
+該当コード: `src/lib/db.js`
+
+## トラブルシュート
+
+- `psql: error: connection to server ... refused` → ファイアウォール/`listen_addresses`/ポート5432開放を確認
+- `password authentication failed` → ユーザー/パスワード/`pg_hba.conf` の方式が `md5` か確認
+- `relation "employees" does not exist` → `SQL/create.sql` の適用漏れ。`setup_for_ubuntu.sql` を再実行
+
+---
+以上で、Ubuntu 上に本プロジェクトの DB 環境が整います。必要に応じてパラメータ（`shared_buffers` など）をチューニングしてください。
\ No newline at end of file
diff --git a/docs/SQL/setup_for_ubuntu.sql b/docs/SQL/setup_for_ubuntu.sql
new file mode 100644
index 000000000..a901702e0
--- /dev/null
+++ b/docs/SQL/setup_for_ubuntu.sql
@@ -0,0 +1,67 @@
+-- setup_for_ubuntu.sql
+-- Ubuntu上で本プロジェクト用のPostgreSQL環境を準備します。
+-- 目的: ユーザー nakamura / パスワード g3、データベース g3db を作成し、
+--       タイムゾーン等の基本設定、スキーマ・権限付与、スキーマ/テストデータ投入を行う。
+-- 実行方法(リポジトリのルートで実行):
+--   sudo -u postgres psql -f SQL/setup_for_ubuntu.sql
+-- 事前条件: PostgreSQL がインストール済みで、postgresユーザーで psql を実行できること。
+
+\set ON_ERROR_STOP on
+SET client_min_messages TO WARNING;
+
+\echo '== 0) 既存DBセッション終了とDB/ロールの破棄(存在すれば)'
+DO $$
+BEGIN
+  -- 既存の g3db がある場合は接続セッションを切断
+  IF EXISTS (SELECT 1 FROM pg_database WHERE datname = 'g3db') THEN
+    PERFORM pg_terminate_backend(pid)
+    FROM pg_stat_activity
+    WHERE datname = 'g3db'
+      AND pid <> pg_backend_pid();
+  END IF;
+END $$;
+
+-- 既存のDB/ロールを削除（無ければ無視）
+DROP DATABASE IF EXISTS g3db;
+DROP ROLE IF EXISTS nakamura;
+
+\echo '== 1) ロール(nakamura)の新規作成(真っ白)'
+-- 必要最小限のログインユーザーとして作成（SUPERUSER等は付与しない）
+CREATE ROLE nakamura LOGIN PASSWORD 'g3';
+
+\echo '== 2) データベース(g3db)の新規作成(真っ白)'
+-- CREATE DATABASE はトランザクション外コマンド
+CREATE DATABASE g3db OWNER nakamura TEMPLATE template0 ENCODING 'UTF8';
+
+\echo '== 3) データベースの基本設定(タイムゾーン)'
+ALTER DATABASE g3db SET timezone TO 'Asia/Tokyo';
+
+\echo '== 4) g3db に接続'
+\connect g3db
+
+\echo '== 5) public スキーマの所有者/権限設定'
+ALTER SCHEMA public OWNER TO nakamura;
+GRANT USAGE, CREATE ON SCHEMA public TO nakamura;
+-- 既存オブジェクトに対する権限
+GRANT ALL PRIVILEGES ON ALL TABLES    IN SCHEMA public TO nakamura;
+GRANT ALL PRIVILEGES ON ALL SEQUENCES IN SCHEMA public TO nakamura;
+GRANT ALL PRIVILEGES ON ALL FUNCTIONS IN SCHEMA public TO nakamura;
+-- 以後作成されるオブジェクトのデフォルト権限
+ALTER DEFAULT PRIVILEGES IN SCHEMA public GRANT ALL ON TABLES    TO nakamura;
+ALTER DEFAULT PRIVILEGES IN SCHEMA public GRANT ALL ON SEQUENCES TO nakamura;
+ALTER DEFAULT PRIVILEGES IN SCHEMA public GRANT ALL ON FUNCTIONS TO nakamura;
+
+\echo '== 6) スキーマ作成(SQL/create.sql)の読み込み'
+\i SQL/create.sql
+
+\echo '== 7) テストデータ(SQL/testdata.sql)の読み込み(任意)'
+-- 必要に応じてコメント解除して実行
+\i SQL/testdata.sql
+
+\echo '== 完了: Ubuntu向けDBセットアップが正常に終了しました'
+
+-- 補足: リモートからの接続が必要な場合は、PostgreSQL設定も必要です。
+--   - /etc/postgresql/<version>/main/postgresql.conf の listen_addresses を '*' へ
+--   - /etc/postgresql/<version>/main/pg_hba.conf に接続元の許可行を追加 (例: host all all 192.168.0.0/16 md5)
+--   - その後、sudo systemctl restart postgresql
+--   これらはSQLでは設定できないため、OS側の設定で対応してください。
\ No newline at end of file
diff --git a/docs/SQL/testdata.sql b/docs/SQL/testdata.sql
new file mode 100644
index 000000000..b72706541
--- /dev/null
+++ b/docs/SQL/testdata.sql
@@ -0,0 +1,109 @@
+-- roles (権限) テーブルへの仮データ挿入
+INSERT INTO roles (role_name) VALUES
+('管理者'),
+('一般'),
+('リーダー'),
+('研修生'),
+('スタッフ');
+
+-- production_lines (担当ライン) テーブルへの仮データ挿入
+INSERT INTO production_lines (line_name) VALUES
+('組立'),
+('塗装'),
+('検査'),
+('梱包'),
+('特殊');
+
+-- employees (従業員) テーブルへの仮データ挿入
+-- パスワードは実際にはハッシュ化して保存してください
+INSERT INTO employees (employee_name, employee_user_id, employee_password, employee_is_active, employee_role_name, employee_line_name, employee_special_notes, employee_color_code) VALUES
+('山田 太郎', 't.yamada', 'password123', TRUE, 'リーダー', '組立', 'フォークリフト免許保持', 'a3a8e6'),
+('佐藤 花子', 'h.sato', 'password123', TRUE, 'スタッフ', '塗装', '色彩検定2級', 'e6a3c8');
+
+-- reports (日報) テーブルへの仮データ挿入
+INSERT INTO reports (report_employee_id, report_date, report_product_name, report_line_id, report_production_result, report_today_work, report_memo) VALUES
+(1, '2025-07-24', 'システム保守', 1, NULL, 'サーバーの定期メンテナンスを実施。', '特に問題なし。'),
+(2, '2025-07-24', '製品A', 1, 155, '製品Aの組立作業。', '部品の供給がスムーズだった。'),
+(3, '2025-07-24', '製品B', 2, 210, '製品Bの塗装作業。', '新人への指導を実施。'),
+(4, '2025-07-24', '製品C', 3, 500, '製品Cの外観検査。', '軽微な傷を2件発見。'),
+(5, '2025-07-24', '製品D', 4, 300, '製品Dの梱包および出荷準備。', '梱包材が残りわずか。');
+
+-- priorities (優先度) テーブルへの仮データ挿入
+INSERT INTO priorities (priority_label) VALUES
+('至急対応'),
+('通常対応'),
+('高'),
+('中'),
+('低');
+
+-- notifications (生産目標通知) テーブルへの仮データ挿入
+INSERT INTO notifications (notification_line_id, notification_quantity, notification_item_name, notification_item_size, notification_color, notification_spring_type, notification_accessories, notification_delivery_method, notification_delivery_address, notification_delivery_company, notification_remarks, notification_priority_id) VALUES
+(1, 500, 'フックリングV2', 'M', 'シルバー', '標準バネ', '説明書A', '通常便', '東京都千代田区1-1-1', 'ABC運送', '7月末納期厳守', 1),
+(2, 1000, '装飾パネル', 'L', 'ブラック', NULL, '取付ネジセット', 'チャーター便', '大阪府大阪市北区2-2-2', 'XYZ物流', NULL, 2),
+(3, 2500, '検査キット', 'S', 'クリア', NULL, NULL, '通常便', '愛知県名古屋市中区3-3-3', '東海運輸', '割れ物注意', 3),
+(4, 800, '梱包箱セット', 'M', '茶', NULL, '緩衝材', '定期便', '福岡県福岡市博多区4-4-4', '九州急便', NULL, 4),
+(1, 1200, 'フックリングV3', 'M', 'ゴールド', '強化バネ', '説明書B', '航空便', '北海道札幌市中央区5-5-5', '北国空輸', '至急オーダー', 1);
+
+-- machines (機械名) テーブルへの仮データ挿入
+INSERT INTO machines (machine_name) VALUES
+('プレス機Mk-I'),
+('自動塗装機-02'),
+('画像検査装置-Z'),
+('自動梱包機-X1'),
+('特殊加工機-α');
+
+-- machine_status (生産機械状況) テーブルへの仮データ挿入
+INSERT INTO machine_status (
+  machine_id, status, machine_last_inspection
+)
+VALUES
+(1, '稼働中', '2025-07-01'),
+(2, '停止中', '2025-07-20'),
+(3, '稼働中', '2025-06-15'),
+(4, '異常あり', '2025-05-10'),
+(5, 'メンテ中', '2025-07-22');
+
+-- 【machine_logs（機械エラーログ履歴）】テスト用データ挿入
+INSERT INTO machine_logs (machine_id, log_type, title, message, timestamp)
+VALUES
+(1, 'error',   'E-102: トルク過負荷',           'モーターの負荷が規定値を超えました。', '2025-07-15 10:15:32'),
+(1, 'warning', 'W-05: 潤滑油低下',               '潤滑油が規定レベルを下回っています。', '2025-07-15 09:30:11'),
+(1, 'info',    'I-001: 起動シーケンス完了',       '',                                  '2025-07-15 08:00:05');
+
+
+-- inspection_results (検査画像) テーブルへの仮データ挿入
+INSERT INTO inspection_results (inspection_status, inspection_trouble_info, inspection_image_path) VALUES
+('PASS', NULL, '/images/inspection/20250901_01.jpg'),
+('FAIL', '位置ずれ', '/images/inspection/20250901_02.jpg');
+
+
+
+-- machine_production (ホックリング残数・生産数) テーブルへの仮データ挿入
+INSERT INTO machine_production (machine_prod_hook_remaining, machine_prod_count) VALUES
+(5000, 10250),
+(4850, 10400),
+(4700, 10550),
+(4550, 10700),
+(4400, 10850);
+
+-- production_reports (生産数管理) テーブルへの仮データ挿入
+INSERT INTO production_reports (prodreport_date, prodreport_product_name, prodreport_plan_quantity, prodreport_actual_quantity, prodreport_achievement_rate, prodreport_defective_quantity, prodreport_employee_id, prodreport_remarks) VALUES
+('2025-07-23', '製品A', 300, 270, 90.00, 5, 2, '材料の入荷遅れにより計画未達。'),
+('2025-07-23', '製品B', 200, 200, 100.00, 2, 3, '計画通り完了。'),
+('2025-07-24', '製品A', 300, 310, 103.33, 3, 2, '計画を上回って生産。'),
+('2025-07-24', '製品B', 200, 195, 97.50, 1, 3, '塗料のトラブルで一時停止。'),
+('2025-07-24', '製品C', 500, 500, 100.00, 2, 4, '検査完了。');
+
+
+
+--棚作成
+INSERT INTO racks (rack_name, rows, cols) VALUES
+('スプリング・小物資材ラック', 3, 4);
+
+--上記rack_id=1('スプリング・小物資材ラック')に部品追加
+INSERT INTO slots (rack_id, slot_identifier, part_name, part_model_number, quantity, color_code) VALUES
+(1, 'A-1', 'ポケットコイル', 'PC-S-H20', 25, '#FF5733');
+
+--空スロット用
+INSERT INTO slots (rack_id, slot_identifier)VALUES
+(1, 'A-2');
\ No newline at end of file
diff --git a/docs/index.html b/docs/index.html
new file mode 100644
index 000000000..73936374f
--- /dev/null
+++ b/docs/index.html
@@ -0,0 +1,656 @@
+<!DOCTYPE html>
+<html lang="ja">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>API設計書 - トップページ</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <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=Inter:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;700&display=swap"
+        rel="stylesheet">
+    <script src="https://unpkg.com/heroicons@2.0.18/24/outline/esm/index.js"></script>
+    <script src="sidebar.js" defer></script>
+    <style>
+        body {
+            font-family: 'Inter', 'Noto Sans JP', sans-serif;
+        }
+
+        .api-card {
+            transition: all 0.3s ease;
+            text-decoration: none;
+            color: inherit;
+            display: block;
+        }
+
+        .api-card:hover {
+            transform: translateY(-4px);
+            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+        }
+
+        .method-badge {
+            font-size: 0.7rem;
+            font-weight: 700;
+            padding: 0.15em 0.5em;
+            border-radius: 0.25rem;
+            color: white;
+            display: inline-block;
+            width: 60px;
+            text-align: center;
+        }
+
+        .get { background-color: #3b82f6; }
+        .post { background-color: #22c55e; }
+        .put { background-color: #f97316; }
+        .delete { background-color: #ef4444; }
+        .websocket { background-color: #9333ea; }
+    </style>
+</head>
+
+<body class="bg-slate-50 text-slate-800">
+
+    <div class="container mx-auto p-4 sm:p-6 lg:p-8">
+        <header class="mb-12 text-center">
+            <h1 class="text-5xl font-bold text-slate-900 mb-4">API設計書</h1>
+            <div class="max-w-3xl mx-auto">
+                <p class="text-xl text-slate-600 mb-6">
+                    製造管理システムのフロントエンドとバックエンドを連携させるためのAPI仕様書
+                </p>
+                <div class="p-6 bg-gradient-to-r from-indigo-100 to-purple-100 border-l-4 border-indigo-500 text-indigo-700 rounded-lg">
+                    <p class="font-bold text-lg mb-2">📋 設計書の構成</p>
+                    <p class="text-sm">各ページの機能に応じて、必要なAPIエンドポイントとリクエスト/レスポンス形式を定義しています。</p>
+                </div>
+            </div>
+        </header>
+
+        <div class="mb-12 p-6 bg-white rounded-lg shadow-md border border-slate-200">
+            <h2 class="text-2xl font-bold text-slate-900 mb-4">関連リンク</h2>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-center">
+                <a href="https://docs.google.com/spreadsheets/d/1pnXHkgMfV0NFhZOiv1bbli-hKbWklDPdHapWW3xhdgU/edit?usp=sharing" target="_blank" rel="noopener noreferrer" class="block p-4 bg-green-100 rounded-lg hover:bg-green-200 transition-colors group">
+                    <h3 class="font-bold text-green-800">📝 タスク管理シート</h3>
+                    <p class="text-sm text-green-700 mt-1">Google スプレッドシート</p>
+                </a>
+                <a href="https://github.com/sabiaka/G3_webapp_front_2025" target="_blank" rel="noopener noreferrer" class="block p-4 bg-gray-800 rounded-lg hover:bg-gray-700 transition-colors group">
+                    <h3 class="font-bold text-white">💻 フロントエンドリポジトリ</h3>
+                    <p class="text-sm text-gray-300 mt-1">GitHub (Next.js)</p>
+                </a>
+                <a href="https://github.com/sabiaka/G3_webapp_back_2025" target="_blank" rel="noopener noreferrer" class="block p-4 bg-gray-800 rounded-lg hover:bg-gray-700 transition-colors group">
+                    <h3 class="font-bold text-white">🗄️ バックエンドリポジトリ</h3>
+                    <p class="text-sm text-gray-300 mt-1">GitHub (NestJS)</p>
+                </a>
+            </div>
+        </div>
+
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            
+            <!-- 認証系 -->
+            <a href="API設計/ログイン・認証系.html" class="api-card group block bg-white p-6 rounded-lg shadow-md border border-slate-200 cursor-pointer focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
+                <div class="flex items-center justify-between mb-4">
+                    <div class="flex items-center space-x-3">
+                        <svg class="w-8 h-8 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"></path>
+                        </svg>
+                        <h3 class="text-xl font-bold text-slate-900">認証・ログイン</h3>
+                    </div>
+                    <span class="method-badge post">POST</span>
+                </div>
+                <p class="text-slate-600 mb-4">ログイン・ログアウト・セッション管理のAPI仕様</p>
+                <div class="space-y-2 text-sm text-slate-500 mb-4">
+                    <div>• ログイン認証</div>
+                    <div>• ログアウト処理</div>
+                    <div>• セッション確認</div>
+                </div>
+                <span class="mt-2 inline-flex bg-indigo-600 text-white px-4 py-2 rounded-lg transition-colors group-hover:bg-indigo-700">
+                    詳細を見る →
+                </span>
+            </a>
+
+            <!-- 生産数管理 -->
+            <a href="API設計/生産数管理ページ.html" class="api-card group block bg-white p-6 rounded-lg shadow-md border border-slate-200 cursor-pointer focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
+                <div class="flex items-center justify-between mb-4">
+                    <div class="flex items-center space-x-3">
+                        <svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
+                        </svg>
+                        <h3 class="text-xl font-bold text-slate-900">生産数管理</h3>
+                    </div>
+                    <div class="flex space-x-1">
+                        <span class="method-badge get">GET</span>
+                        <span class="method-badge post">POST</span>
+                    </div>
+                </div>
+                <p class="text-slate-600 mb-4">生産実績の取得とPLC・検査機からのデータ受信</p>
+                <div class="space-y-2 text-sm text-slate-500 mb-4">
+                    <div>• 生産サマリー取得</div>
+                    <div>• PLC情報受信</div>
+                    <div>• 検査結果受信</div>
+                </div>
+                <span class="mt-2 inline-flex bg-indigo-600 text-white px-4 py-2 rounded-lg transition-colors group-hover:bg-indigo-700">
+                    詳細を見る →
+                </span>
+            </a>
+
+            <!-- 画像検査ステータス -->
+            <a href="API設計/画像検査ステータス.html" class="api-card group block bg-white p-6 rounded-lg shadow-md border border-slate-200 cursor-pointer focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
+                <div class="flex items-center justify-between mb-4">
+                    <div class="flex items-center space-x-3">
+                        <svg class="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"></path>
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"></path>
+                        </svg>
+                        <h3 class="text-xl font-bold text-slate-900">画像検査ステータス</h3>
+                    </div>
+                    <div class="flex space-x-1">
+                        <span class="method-badge get">GET</span>
+                        <span class="method-badge websocket">WS</span>
+                    </div>
+                </div>
+                <p class="text-slate-600 mb-4">画像検査結果の取得とリアルタイム更新</p>
+                <div class="space-y-2 text-sm text-slate-500 mb-4">
+                    <div>• 検査サマリー取得</div>
+                    <div>• 検査ログ取得</div>
+                    <div>• リアルタイム更新</div>
+                </div>
+                <span class="mt-2 inline-flex bg-indigo-600 text-white px-4 py-2 rounded-lg transition-colors group-hover:bg-indigo-700">
+                    詳細を見る →
+                </span>
+            </a>
+
+            <!-- 従業員管理 -->
+            <a href="API設計/従業員リストページ.html" class="api-card group block bg-white p-6 rounded-lg shadow-md border border-slate-200 cursor-pointer focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
+                <div class="flex items-center justify-between mb-4">
+                    <div class="flex items-center space-x-3">
+                        <svg class="w-8 h-8 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z"></path>
+                        </svg>
+                        <h3 class="text-xl font-bold text-slate-900">従業員管理</h3>
+                    </div>
+                    <div class="flex space-x-1">
+                        <span class="method-badge get">GET</span>
+                        <span class="method-badge post">POST</span>
+                        <span class="method-badge put">PUT</span>
+                        <span class="method-badge delete">DEL</span>
+                    </div>
+                </div>
+                <p class="text-slate-600 mb-4">従業員情報のCRUD操作</p>
+                <div class="space-y-2 text-sm text-slate-500 mb-4">
+                    <div>• 従業員一覧取得</div>
+                    <div>• 従業員追加・編集</div>
+                    <div>• 従業員削除</div>
+                </div>
+                <span class="mt-2 inline-flex bg-indigo-600 text-white px-4 py-2 rounded-lg transition-colors group-hover:bg-indigo-700">
+                    詳細を見る →
+                </span>
+            </a>
+
+            <!-- 生産機械ステータス -->
+            <a href="API設計/生産機械ステータス.html" class="api-card group block bg-white p-6 rounded-lg shadow-md border border-slate-200 cursor-pointer focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
+                <div class="flex items-center justify-between mb-4">
+                    <div class="flex items-center space-x-3">
+                        <svg class="w-8 h-8 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
+                        </svg>
+                        <h3 class="text-xl font-bold text-slate-900">生産機械ステータス</h3>
+                    </div>
+                    <div class="flex space-x-1">
+                        <span class="method-badge get">GET</span>
+                        <span class="method-badge websocket">WS</span>
+                    </div>
+                </div>
+                <p class="text-slate-600 mb-4">機械の稼働状況とエラーログの監視</p>
+                <div class="space-y-2 text-sm text-slate-500 mb-4">
+                    <div>• 機械情報取得</div>
+                    <div>• エラーログ取得</div>
+                    <div>• リアルタイム監視</div>
+                </div>
+                <span class="mt-2 inline-flex bg-indigo-600 text-white px-4 py-2 rounded-lg transition-colors group-hover:bg-indigo-700">
+                    詳細を見る →
+                </span>
+            </a>
+
+            <!-- 製造出荷指示 -->
+            <a href="API設計/製造出荷指示.html" class="api-card group block bg-white p-6 rounded-lg shadow-md border border-slate-200 cursor-pointer focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
+                <div class="flex items-center justify-between mb-4">
+                    <div class="flex items-center space-x-3">
+                        <svg class="w-8 h-8 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
+                        </svg>
+                        <h3 class="text-xl font-bold text-slate-900">製造出荷指示</h3>
+                    </div>
+                    <div class="flex space-x-1">
+                        <span class="method-badge get">GET</span>
+                        <span class="method-badge post">POST</span>
+                        <span class="method-badge put">PUT</span>
+                        <span class="method-badge delete">DEL</span>
+                    </div>
+                </div>
+                <p class="text-slate-600 mb-4">製造指示の管理と出荷指示の処理</p>
+                <div class="space-y-2 text-sm text-slate-500 mb-4">
+                    <div>• 指示一覧取得</div>
+                    <div>• 指示作成・編集</div>
+                    <div>• 指示削除</div>
+                </div>
+                <span class="mt-2 inline-flex bg-indigo-600 text-white px-4 py-2 rounded-lg transition-colors group-hover:bg-indigo-700">
+                    詳細を見る →
+                </span>
+            </a>
+
+            <!-- 部品在庫管理 -->
+            <a href="API設計/部品在庫管理.html" class="api-card group block bg-white p-6 rounded-lg shadow-md border border-slate-200 cursor-pointer focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
+                <div class="flex items-center justify-between mb-4">
+                    <div class="flex items-center space-x-3">
+                        <svg class="w-8 h-8 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path>
+                        </svg>
+                        <h3 class="text-xl font-bold text-slate-900">部品在庫管理</h3>
+                    </div>
+                    <div class="flex space-x-1">
+                        <span class="method-badge get">GET</span>
+                        <span class="method-badge post">POST</span>
+                        <span class="method-badge put">PUT</span>
+                    </div>
+                </div>
+                <p class="text-slate-600 mb-4">部品の在庫管理とQRコードによる入出庫</p>
+                <div class="space-y-2 text-sm text-slate-500 mb-4">
+                    <div>• ラック情報取得</div>
+                    <div>• 部品検索・移動</div>
+                    <div>• QRコード処理</div>
+                </div>
+                <span class="mt-2 inline-flex bg-indigo-600 text-white px-4 py-2 rounded-lg transition-colors group-hover:bg-indigo-700">
+                    詳細を見る →
+                </span>
+            </a>
+
+            <!-- PLC・Jetson通信 -->
+            <a href="API設計/PLC,Jetson通信.html" class="api-card group block bg-white p-6 rounded-lg shadow-md border border-slate-200 cursor-pointer focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
+                <div class="flex items-center justify-between mb-4">
+                    <div class="flex items-center space-x-3">
+                        <svg class="w-8 h-8 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
+                        </svg>
+                        <h3 class="text-xl font-bold text-slate-900">PLC・Jetson通信</h3>
+                    </div>
+                    <span class="method-badge post">POST</span>
+                </div>
+                <p class="text-slate-600 mb-4">生産機械と画像検査システムからのデータ受信</p>
+                <div class="space-y-2 text-sm text-slate-500 mb-4">
+                    <div>• PLC情報送信</div>
+                    <div>• 画像検査結果送信</div>
+                    <div>• リアルタイムデータ</div>
+                </div>
+                <span class="mt-2 inline-flex bg-indigo-600 text-white px-4 py-2 rounded-lg transition-colors group-hover:bg-indigo-700">
+                    詳細を見る →
+                </span>
+            </a>
+
+            <!-- 工場設定 -->
+            <a href="API設計/工場設定.html" class="api-card group block bg-white p-6 rounded-lg shadow-md border border-slate-200 cursor-pointer focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
+                <div class="flex items-center justify-between mb-4">
+                    <div class="flex items-center space-x-3">
+                        <svg class="w-8 h-8 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
+                        </svg>
+                        <h3 class="text-xl font-bold text-slate-900">工場設定</h3>
+                    </div>
+                    <div class="flex space-x-1">
+                        <span class="method-badge get">GET</span>
+                        <span class="method-badge post">POST</span>
+                        <span class="method-badge delete">DEL</span>
+                    </div>
+                </div>
+                <p class="text-slate-600 mb-4">権限やラインなど、工場全体のマスターデータを管理します。</p>
+                <div class="space-y-2 text-sm text-slate-500 mb-4">
+                    <div>• 権限種別管理</div>
+                    <div>• 工場ライン管理</div>
+                </div>
+                <span class="mt-2 inline-flex bg-indigo-600 text-white px-4 py-2 rounded-lg transition-colors group-hover:bg-indigo-700">
+                    詳細を見る →
+                </span>
+            </a>
+
+            <!-- 今日のおしらせ -->
+            <a href="API設計/今日のおしらせ.html" class="api-card group block bg-white p-6 rounded-lg shadow-md border border-slate-200 cursor-pointer focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
+                <div class="flex items-center justify-between mb-4">
+                    <div class="flex items-center space-x-3">
+                        <svg class="w-8 h-8 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
+                        </svg>
+                        <h3 class="text-xl font-bold text-slate-900">今日のおしらせ</h3>
+                    </div>
+                    <div class="flex space-x-1">
+                        <span class="method-badge get">GET</span>
+                        <span class="method-badge put">PUT</span>
+                    </div>
+                </div>
+                <p class="text-slate-600 mb-4">今日の予定やお知らせを表示します。</p>
+                <div class="space-y-2 text-sm text-slate-500 mb-4">
+                    <div>• お知らせ取得</div>
+                    <div>• お知らせ更新</div>
+                </div>
+                <span class="mt-2 inline-flex bg-indigo-600 text-white px-4 py-2 rounded-lg transition-colors group-hover:bg-indigo-700">
+                    詳細を見る →
+                </span>
+            </a>
+
+<!-- 日報 -->
+            <a href="API設計/日報.html" class="api-card group block bg-white p-6 rounded-lg shadow-md border border-slate-200 cursor-pointer focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
+                <div class="flex items-center justify-between mb-4">
+                    <div class="flex items-center space-x-3">
+                        <svg class="w-8 h-8 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
+                        </svg>
+                        <h3 class="text-xl font-bold text-slate-900">日報</h3>
+                    </div>
+                    <div class="flex space-x-1">
+                        <span class="method-badge get">GET</span>
+                        <span class="method-badge post">POST</span>
+                        <span class="method-badge put">PUT</span>
+                        <span class="method-badge delete">DELETE</span>
+                    </div>
+                </div>
+                <p class="text-slate-600 mb-4">日報の作成、更新を行う</p>
+                <div class="space-y-2 text-sm text-slate-500 mb-4">
+                    <div>• 日報一覧取得</div>
+                    <div>• 特定の日報取得</div>
+                    <div>• 日報追加</div>
+                    <div>• 特定の日報取得</div>
+                    <div>• 日報削除</div>
+                </div>
+                <span class="mt-2 inline-flex bg-indigo-600 text-white px-4 py-2 rounded-lg transition-colors group-hover:bg-indigo-700">
+                    詳細を見る →
+                </span>
+            </a>
+
+
+
+
+        </div>
+
+        <!-- 画面構成設計セクション -->
+        <div class="mt-20 mb-12">
+            <h2 class="text-3xl font-bold text-slate-900 mb-8 text-center">画面構成設計</h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                
+                <!-- トップページ -->
+                <a href="画面構成設計/トップページ.html" class="api-card group block bg-white p-6 rounded-lg shadow-md border border-slate-200 cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
+                    <div class="flex items-center justify-between mb-4">
+                        <div class="flex items-center space-x-3">
+                            <svg class="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
+                            </svg>
+                            <h3 class="text-xl font-bold text-slate-900">トップページ</h3>
+                        </div>
+                    </div>
+                    <p class="text-slate-600 mb-4">システム全体の概要とナビゲーション</p>
+                    <div class="space-y-2 text-sm text-slate-500 mb-4">
+                        <div>• ダッシュボード表示</div>
+                        <div>• メニューナビゲーション</div>
+                        <div>• システム概要</div>
+                    </div>
+                    <span class="mt-2 inline-flex bg-blue-600 text-white px-4 py-2 rounded-lg transition-colors group-hover:bg-blue-700">
+                        詳細を見る →
+                    </span>
+                </a>
+
+                <!-- 生産数管理ページ -->
+                <a href="画面構成設計/生産数管理ページ.html" class="api-card group block bg-white p-6 rounded-lg shadow-md border border-slate-200 cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
+                    <div class="flex items-center justify-between mb-4">
+                        <div class="flex items-center space-x-3">
+                            <svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
+                            </svg>
+                            <h3 class="text-xl font-bold text-slate-900">生産数管理ページ</h3>
+                        </div>
+                    </div>
+                    <p class="text-slate-600 mb-4">生産実績の表示と管理</p>
+                    <div class="space-y-2 text-sm text-slate-500 mb-4">
+                        <div>• 生産サマリー表示</div>
+                        <div>• 実績データ管理</div>
+                        <div>• グラフ・チャート</div>
+                    </div>
+                    <span class="mt-2 inline-flex bg-blue-600 text-white px-4 py-2 rounded-lg transition-colors group-hover:bg-blue-700">
+                        詳細を見る →
+                    </span>
+                </a>
+
+                <!-- 画像検査ステータス -->
+                <a href="画面構成設計/画像検査ステータス.html" class="api-card group block bg-white p-6 rounded-lg shadow-md border border-slate-200 cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
+                    <div class="flex items-center justify-between mb-4">
+                        <div class="flex items-center space-x-3">
+                            <svg class="w-8 h-8 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"></path>
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"></path>
+                            </svg>
+                            <h3 class="text-xl font-bold text-slate-900">画像検査ステータス</h3>
+                        </div>
+                    </div>
+                    <p class="text-slate-600 mb-4">画像検査結果の表示と監視</p>
+                    <div class="space-y-2 text-sm text-slate-500 mb-4">
+                        <div>• 検査結果表示</div>
+                        <div>• リアルタイム更新</div>
+                        <div>• エラー監視</div>
+                    </div>
+                    <span class="mt-2 inline-flex bg-blue-600 text-white px-4 py-2 rounded-lg transition-colors group-hover:bg-blue-700">
+                        詳細を見る →
+                    </span>
+                </a>
+
+                <!-- 従業員名簿ページ -->
+                <a href="画面構成設計/従業員名簿ページ.html" class="api-card group block bg-white p-6 rounded-lg shadow-md border border-slate-200 cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
+                    <div class="flex items-center justify-between mb-4">
+                        <div class="flex items-center space-x-3">
+                            <svg class="w-8 h-8 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z"></path>
+                            </svg>
+                            <h3 class="text-xl font-bold text-slate-900">従業員名簿ページ</h3>
+                        </div>
+                    </div>
+                    <p class="text-slate-600 mb-4">従業員情報の管理と表示</p>
+                    <div class="space-y-2 text-sm text-slate-500 mb-4">
+                        <div>• 従業員一覧表示</div>
+                        <div>• 情報編集・追加</div>
+                        <div>• 検索・フィルタ</div>
+                    </div>
+                    <span class="mt-2 inline-flex bg-blue-600 text-white px-4 py-2 rounded-lg transition-colors group-hover:bg-blue-700">
+                        詳細を見る →
+                    </span>
+                </a>
+
+                <!-- 生産機械ステータス -->
+                <a href="画面構成設計/生産機械ステータス.html" class="api-card group block bg-white p-6 rounded-lg shadow-md border border-slate-200 cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
+                    <div class="flex items-center justify-between mb-4">
+                        <div class="flex items-center space-x-3">
+                            <svg class="w-8 h-8 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
+                            </svg>
+                            <h3 class="text-xl font-bold text-slate-900">生産機械ステータス</h3>
+                        </div>
+                    </div>
+                    <p class="text-slate-600 mb-4">機械の稼働状況とエラー監視</p>
+                    <div class="space-y-2 text-sm text-slate-500 mb-4">
+                        <div>• 機械情報表示</div>
+                        <div>• エラーログ表示</div>
+                        <div>• リアルタイム監視</div>
+                    </div>
+                    <span class="mt-2 inline-flex bg-blue-600 text-white px-4 py-2 rounded-lg transition-colors group-hover:bg-blue-700">
+                        詳細を見る →
+                    </span>
+                </a>
+
+                <!-- 製造出荷指示周知ページ -->
+                <a href="画面構成設計/製造出荷指示周知ページ.html" class="api-card group block bg-white p-6 rounded-lg shadow-md border border-slate-200 cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
+                    <div class="flex items-center justify-between mb-4">
+                        <div class="flex items-center space-x-3">
+                            <svg class="w-8 h-8 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
+                            </svg>
+                            <h3 class="text-xl font-bold text-slate-900">製造出荷指示周知</h3>
+                        </div>
+                    </div>
+                    <p class="text-slate-600 mb-4">製造指示と出荷指示の管理</p>
+                    <div class="space-y-2 text-sm text-slate-500 mb-4">
+                        <div>• 指示一覧表示</div>
+                        <div>• 指示作成・編集</div>
+                        <div>• 進捗管理</div>
+                    </div>
+                    <span class="mt-2 inline-flex bg-blue-600 text-white px-4 py-2 rounded-lg transition-colors group-hover:bg-blue-700">
+                        詳細を見る →
+                    </span>
+                </a>
+
+                <!-- 部品在庫管理 -->
+                <a href="画面構成設計/部品在庫管理.html" class="api-card group block bg-white p-6 rounded-lg shadow-md border border-slate-200 cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
+                    <div class="flex items-center justify-between mb-4">
+                        <div class="flex items-center space-x-3">
+                            <svg class="w-8 h-8 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path>
+                            </svg>
+                            <h3 class="text-xl font-bold text-slate-900">部品在庫管理</h3>
+                        </div>
+                    </div>
+                    <p class="text-slate-600 mb-4">部品の在庫管理とQRコード処理</p>
+                    <div class="space-y-2 text-sm text-slate-500 mb-4">
+                        <div>• ラック情報表示</div>
+                        <div>• 部品検索・移動</div>
+                        <div>• QRコード処理</div>
+                    </div>
+                    <span class="mt-2 inline-flex bg-blue-600 text-white px-4 py-2 rounded-lg transition-colors group-hover:bg-blue-700">
+                        詳細を見る →
+                    </span>
+                </a>
+
+                <!-- 生産機械サイネージ -->
+                <a href="画面構成設計/生産機械サイネージ.html" class="api-card group block bg-white p-6 rounded-lg shadow-md border border-slate-200 cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
+                    <div class="flex items-center justify-between mb-4">
+                        <div class="flex items-center space-x-3">
+                            <svg class="w-8 h-8 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
+                            </svg>
+                            <h3 class="text-xl font-bold text-slate-900">生産機械サイネージ</h3>
+                        </div>
+                    </div>
+                    <p class="text-slate-600 mb-4">生産現場での情報表示</p>
+                    <div class="space-y-2 text-sm text-slate-500 mb-4">
+                        <div>• 生産状況表示</div>
+                        <div>• アラート表示</div>
+                        <div>• 現場情報</div>
+                    </div>
+                    <span class="mt-2 inline-flex bg-blue-600 text-white px-4 py-2 rounded-lg transition-colors group-hover:bg-blue-700">
+                        詳細を見る →
+                    </span>
+                </a>
+
+                <!-- 日報一覧ページ -->
+                <a href="画面構成設計/日報一覧ページ.html" class="api-card group block bg-white p-6 rounded-lg shadow-md border border-slate-200 cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
+                    <div class="flex items-center justify-between mb-4">
+                        <div class="flex items-center space-x-3">
+                            <svg class="w-8 h-8 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
+                            </svg>
+                            <h3 class="text-xl font-bold text-slate-900">日報一覧ページ</h3>
+                        </div>
+                    </div>
+                    <p class="text-slate-600 mb-4">日報の管理と表示</p>
+                    <div class="space-y-2 text-sm text-slate-500 mb-4">
+                        <div>• 日報一覧表示</div>
+                        <div>• 日報作成・編集</div>
+                        <div>• 検索・フィルタ</div>
+                    </div>
+                    <span class="mt-2 inline-flex bg-blue-600 text-white px-4 py-2 rounded-lg transition-colors group-hover:bg-blue-700">
+                        詳細を見る →
+                    </span>
+                </a>
+
+                <!-- 工場設定ページ -->
+                <a href="画面構成設計/工場設定.html" class="api-card group block bg-white p-6 rounded-lg shadow-md border border-slate-200 cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
+                    <div class="flex items-center justify-between mb-4">
+                        <div class="flex items-center space-x-3">
+                            <svg class="w-8 h-8 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
+                            </svg>
+                            <h3 class="text-xl font-bold text-slate-900">工場設定ページ</h3>
+                        </div>
+                    </div>
+                    <p class="text-slate-600 mb-4">権限やラインなど工場全体の設定</p>
+                    <div class="space-y-2 text-sm text-slate-500 mb-4">
+                        <div>• 権限種別管理</div>
+                        <div>• 工場ライン管理</div>
+                        <div>• その他設定</div>
+                    </div>
+                    <span class="mt-2 inline-flex bg-blue-600 text-white px-4 py-2 rounded-lg transition-colors group-hover:bg-blue-700">
+                        詳細を見る →
+                    </span>
+                </a>
+
+            </div>
+        </div>
+
+        <!-- 補足Tipsセクション -->
+        <div class="mt-20 mb-12">
+            <h2 class="text-3xl font-bold text-slate-900 mb-8 text-center">補足Tips</h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                
+                <!-- 認証のやり方 -->
+                <a href="補足Tips/認証のやり方.html" class="api-card group block bg-white p-6 rounded-lg shadow-md border border-slate-200 cursor-pointer focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2">
+                    <div class="flex items-center justify-between mb-4">
+                        <div class="flex items-center space-x-3">
+                            <svg class="w-8 h-8 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"></path>
+                            </svg>
+                            <h3 class="text-xl font-bold text-slate-900">認証のやり方</h3>
+                        </div>
+                    </div>
+                    <p class="text-slate-600 mb-4">認証システムの実装方法とベストプラクティス</p>
+                    <div class="space-y-2 text-sm text-slate-500 mb-4">
+                        <div>• 認証フロー設計</div>
+                        <div>• セキュリティ対策</div>
+                        <div>• 実装例</div>
+                    </div>
+                    <span class="mt-2 inline-flex bg-emerald-600 text-white px-4 py-2 rounded-lg transition-colors group-hover:bg-emerald-700">
+                        詳細を見る →
+                    </span>
+                </a>
+
+                <!-- QRコード設計 -->
+                <a href="補足Tips/QRコード設計.html" class="api-card group block bg-white p-8 rounded-lg shadow-md border border-slate-200 cursor-pointer focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2">
+                    <div class="flex items-center justify-between mb-4">
+                        <div class="flex items-center space-x-3">
+                            <svg class="w-8 h-8 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"></path>
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"></path>
+                            </svg>
+                            <h3 class="text-xl font-bold text-slate-900">QRコード設計</h3>
+                        </div>
+                    </div>
+                    <p class="text-slate-600 mb-4">QRコードの設計と実装方法</p>
+                    <div class="space-y-2 text-sm text-slate-500 mb-4">
+                        <div>• QRコード仕様</div>
+                        <div>• データ形式</div>
+                        <div>• 実装例</div>
+                    </div>
+                    <span class="mt-2 inline-flex bg-emerald-600 text-white px-4 py-2 rounded-lg transition-colors group-hover:bg-emerald-700">
+                        詳細を見る →
+                    </span>
+                </a>
+
+            </div>
+        </div>
+
+        <footer class="text-center text-slate-500 mt-16 py-8 border-t border-slate-200">
+            <p class="text-lg font-semibold mb-2">API設計書</p>
+            <p class="text-sm">製造管理システムのフロントエンド開発のためのAPI仕様</p>
+            <p class="text-xs mt-4">&copy; 2024 API Design by Gemini. All Rights Reserved.</p>
+        </footer>
+    </div>
+
+</body>
+
+</html>
diff --git a/docs/sidebar.js b/docs/sidebar.js
new file mode 100644
index 000000000..b34062ea0
--- /dev/null
+++ b/docs/sidebar.js
@@ -0,0 +1,297 @@
+(function() {
+  const ready = typeof document !== 'undefined';
+  if (!ready) return;
+
+  const build = function() {
+    const selectors = ['[data-docs-content]', 'main', 'body > .container', 'body > div.container'];
+    let contentRoot = null;
+    for (let i = 0; i < selectors.length; i += 1) {
+      const candidate = document.querySelector(selectors[i]);
+      if (candidate) {
+        contentRoot = candidate;
+        break;
+      }
+    }
+
+    if (!contentRoot) return;
+
+    const headings = Array.prototype.slice.call(contentRoot.querySelectorAll('h2'));
+    const navItems = [];
+
+    headings.forEach(function(heading, index) {
+      if (!heading || !heading.textContent) return;
+      if (heading.closest('aside, nav, .docs-side-nav, footer')) return;
+
+      const label = heading.textContent.trim();
+      if (!label) return;
+
+      let target = heading.closest('section');
+      if (!target || !contentRoot.contains(target)) {
+        target = heading;
+      }
+
+      let id = target.id || heading.id;
+      if (!id) {
+        const slugSource = label.toLowerCase();
+        const slug = slugSource.replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '');
+        id = slug || 'section-' + (index + 1);
+        target.id = id;
+        if (!target.id) heading.id = id;
+      }
+
+      navItems.push({ id: id, label: label, element: target });
+    });
+
+    if (!navItems.length) return;
+
+    document.body.classList.add('docs-has-nav');
+
+    const parentNode = contentRoot.parentElement;
+    const nav = document.createElement('nav');
+    nav.className = 'docs-side-nav';
+    nav.setAttribute('aria-label', 'ページ目次');
+    nav.innerHTML = '' +
+      '<div class="docs-side-nav__header">' +
+      '  <span class="docs-side-nav__title">ページ目次</span>' +
+      '  <button type="button" class="docs-side-nav__close" aria-label="メニューを閉じる">' +
+      '    <span aria-hidden="true">×</span>' +
+      '  </button>' +
+      '</div>' +
+      '<ol class="docs-side-nav__list"></ol>';
+
+    const list = nav.querySelector('.docs-side-nav__list');
+    navItems.forEach(function(item) {
+      const li = document.createElement('li');
+      li.className = 'docs-side-nav__item';
+      const link = document.createElement('a');
+      link.className = 'docs-side-nav__link';
+      link.setAttribute('href', '#' + item.id);
+      link.textContent = item.label;
+      li.appendChild(link);
+      list.appendChild(li);
+    });
+
+    if (parentNode) {
+      parentNode.insertBefore(nav, contentRoot);
+    } else {
+      document.body.insertBefore(nav, document.body.firstChild);
+    }
+
+    const overlay = document.createElement('div');
+    overlay.className = 'docs-nav-overlay';
+    document.body.appendChild(overlay);
+
+    const toggle = document.createElement('button');
+    toggle.type = 'button';
+    toggle.className = 'docs-nav-mobile-toggle';
+    toggle.setAttribute('aria-label', '目次を開く');
+    toggle.innerHTML = '<span class="docs-nav-mobile-toggle__icon">☰</span><span>目次</span>';
+    document.body.appendChild(toggle);
+
+    const closeButton = nav.querySelector('.docs-side-nav__close');
+
+    const style = document.createElement('style');
+    style.textContent = `
+      body.docs-has-nav { box-sizing: border-box; }
+      .docs-side-nav { position: fixed; top: 5.75rem; left: 1.25rem; width: 15.5rem; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 0.75rem; padding: 1.5rem; box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12); max-height: calc(100vh - 6.5rem); overflow-y: auto; transition: transform 0.25s ease, opacity 0.25s ease; z-index: 60; }
+      .docs-side-nav__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
+      .docs-side-nav__title { font-weight: 700; font-size: 1rem; color: #1f2937; }
+      .docs-side-nav__close { display: none; border: none; background: #e0e7ff; color: #1f2937; font-size: 1.5rem; line-height: 1; padding: 0.25rem 0.65rem; border-radius: 0.5rem; cursor: pointer; transition: background-color 0.2s ease; }
+      .docs-side-nav__close:hover { background: #c7d2fe; }
+      .docs-side-nav__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
+      .docs-side-nav__link { display: block; text-decoration: none; color: #475569; font-size: 0.95rem; padding: 0.5rem 0.75rem; border-radius: 0.5rem; transition: background-color 0.2s ease, color 0.2s ease, padding-left 0.2s ease; }
+      .docs-side-nav__link:hover { background-color: #edf2ff; color: #3730a3; padding-left: 1rem; }
+      .docs-side-nav__link.is-active { background: linear-gradient(135deg, #6366f1 0%, #4338ca 100%); color: #ffffff; box-shadow: 0 6px 18px rgba(79, 70, 229, 0.35); }
+      .docs-nav-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; z-index: 50; }
+      .docs-nav-overlay.is-active { opacity: 1; pointer-events: auto; }
+      .docs-nav-mobile-toggle { position: fixed; top: 1.25rem; left: 1.25rem; display: flex; gap: 0.5rem; align-items: center; border-radius: 9999px; padding: 0.65rem 1.1rem; border: none; color: #ffffff; background: linear-gradient(135deg, #4f46e5 0%, #4338ca 90%); box-shadow: 0 12px 28px rgba(67, 56, 202, 0.35); font-weight: 600; cursor: pointer; z-index: 70; transition: transform 0.2s ease, box-shadow 0.2s ease; }
+      .docs-nav-mobile-toggle:hover { transform: translateY(-2px); box-shadow: 0 18px 32px rgba(67, 56, 202, 0.45); }
+      .docs-nav-mobile-toggle__icon { font-size: 1.25rem; line-height: 1; }
+      @media (max-width: 1023px) {
+        body.docs-has-nav { padding-left: 0; padding-right: 0; }
+        .docs-side-nav { top: 0; left: 0; width: 18rem; max-height: 100vh; height: 100vh; border-radius: 0; border: none; box-shadow: 0 24px 48px rgba(15, 23, 42, 0.35); transform: translateX(-110%); opacity: 0; pointer-events: none; }
+        .docs-side-nav.is-open { transform: translateX(0); opacity: 1; pointer-events: auto; }
+        .docs-side-nav__close { display: inline-flex; }
+      }
+      @media (min-width: 1024px) {
+        body.docs-has-nav { padding-left: 18rem; padding-right: 2rem; }
+        .docs-nav-mobile-toggle { display: none; }
+        .docs-nav-overlay { display: none; }
+        .docs-side-nav { transform: none; opacity: 1; pointer-events: auto; }
+      }
+    `;
+    document.head.appendChild(style);
+
+    const openNav = function() {
+      nav.classList.add('is-open');
+      overlay.classList.add('is-active');
+    };
+
+    const closeNav = function() {
+      nav.classList.remove('is-open');
+      overlay.classList.remove('is-active');
+    };
+
+    toggle.addEventListener('click', function() {
+      if (nav.classList.contains('is-open')) {
+        closeNav();
+      } else {
+        openNav();
+      }
+    });
+
+    overlay.addEventListener('click', closeNav);
+    closeButton.addEventListener('click', closeNav);
+
+    const mediaQuery = window.matchMedia('(min-width: 1024px)');
+    const handleMediaChange = function(e) {
+      if (e.matches) {
+        closeNav();
+      }
+    };
+    if (mediaQuery.addEventListener) {
+      mediaQuery.addEventListener('change', handleMediaChange);
+    } else if (mediaQuery.addListener) {
+      mediaQuery.addListener(handleMediaChange);
+    }
+
+    const listLinks = Array.prototype.slice.call(nav.querySelectorAll('.docs-side-nav__link'));
+    let isProgrammaticScroll = false;
+
+    const setActiveLink = function(id) {
+      listLinks.forEach(function(link) {
+        if (link.getAttribute('href') === '#' + id) {
+          link.classList.add('is-active');
+        } else {
+          link.classList.remove('is-active');
+        }
+      });
+    };
+
+    const syncActiveToScrollPosition = function() {
+      const offsetMobile = 72;
+      const offsetDesktop = 32;
+      const offset = mediaQuery.matches ? offsetDesktop : offsetMobile;
+      const targetY = window.scrollY + offset + 1;
+      let bestId = null;
+      let bestDelta = Number.POSITIVE_INFINITY;
+
+      navItems.forEach(function(item) {
+        const element = item.element;
+        if (!element) return;
+        const absoluteTop = element.getBoundingClientRect().top + window.scrollY;
+        const delta = Math.abs(absoluteTop - targetY);
+        if (delta < bestDelta) {
+          bestDelta = delta;
+          bestId = item.id;
+        }
+      });
+
+      if (bestId) {
+        setActiveLink(bestId);
+      }
+    };
+
+    let scrollSyncFrame = null;
+    const scheduleScrollSync = function() {
+      if (scrollSyncFrame !== null) {
+        cancelAnimationFrame(scrollSyncFrame);
+        scrollSyncFrame = null;
+      }
+
+      let stableFrames = 0;
+      let lastPosition = window.scrollY;
+      const maxFrames = 240; // ~4s at 60fps safeguard
+      let frameCount = 0;
+
+      const step = function() {
+        frameCount += 1;
+        const currentPosition = window.scrollY;
+        if (Math.abs(currentPosition - lastPosition) < 0.5) {
+          stableFrames += 1;
+          if (stableFrames >= 6) {
+            syncActiveToScrollPosition();
+            isProgrammaticScroll = false;
+            scrollSyncFrame = null;
+            return;
+          }
+        } else {
+          stableFrames = 0;
+          lastPosition = currentPosition;
+        }
+
+        if (frameCount >= maxFrames) {
+          syncActiveToScrollPosition();
+          isProgrammaticScroll = false;
+          scrollSyncFrame = null;
+          return;
+        }
+
+        scrollSyncFrame = requestAnimationFrame(step);
+      };
+
+      scrollSyncFrame = requestAnimationFrame(step);
+    };
+
+    const scrollToSection = function(targetId) {
+      const target = document.getElementById(targetId);
+      if (!target) {
+        isProgrammaticScroll = false;
+        return;
+      }
+      const rect = target.getBoundingClientRect();
+      const offsetMobile = 72;
+      const offsetDesktop = 32;
+      const offset = mediaQuery.matches ? offsetDesktop : offsetMobile;
+      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+      window.scrollTo({
+        top: rect.top + scrollTop - offset,
+        behavior: 'smooth'
+      });
+    };
+
+    listLinks.forEach(function(link) {
+      link.addEventListener('click', function(event) {
+        event.preventDefault();
+        const id = link.getAttribute('href').slice(1);
+        isProgrammaticScroll = true;
+        scrollToSection(id);
+        setActiveLink(id);
+        scheduleScrollSync();
+        closeNav();
+      });
+    });
+
+    const observer = new IntersectionObserver(function(entries) {
+      entries.forEach(function(entry) {
+        if (entry.isIntersecting && !isProgrammaticScroll) {
+          const currentId = entry.target.id;
+          if (currentId) {
+            setActiveLink(currentId);
+          }
+        }
+      });
+    }, {
+      rootMargin: '-40% 0px -55% 0px',
+      threshold: 0.1
+    });
+
+    navItems.forEach(function(item) {
+      observer.observe(item.element);
+    });
+
+    if (navItems[0] && navItems[0].id) {
+      setActiveLink(navItems[0].id);
+    }
+
+    window.addEventListener('beforeunload', function() {
+      closeNav();
+    });
+  };
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', build);
+  } else {
+    build();
+  }
+})();
diff --git "a/docs/\347\224\273\351\235\242\346\247\213\346\210\220\350\250\255\350\250\210/images/image.png" "b/docs/\347\224\273\351\235\242\346\247\213\346\210\220\350\250\255\350\250\210/images/image.png"
new file mode 100644
index 000000000..a96ccade5
Binary files /dev/null and "b/docs/\347\224\273\351\235\242\346\247\213\346\210\220\350\250\255\350\250\210/images/image.png" differ
diff --git "a/docs/\347\224\273\351\235\242\346\247\213\346\210\220\350\250\255\350\250\210/readme.md" "b/docs/\347\224\273\351\235\242\346\247\213\346\210\220\350\250\255\350\250\210/readme.md"
new file mode 100644
index 000000000..504875020
--- /dev/null
+++ "b/docs/\347\224\273\351\235\242\346\247\213\346\210\220\350\250\255\350\250\210/readme.md"
@@ -0,0 +1,32 @@
+# 生産管理システム サイトマップ
+
+## サイト全体構成
+
+```
+トップページ.html
+├─ 日報一覧ページ.html         ：日報の一覧・入力・AI清書
+├─ 従業員名簿ページ.html       ：従業員情報の閲覧・管理
+├─ 画像検査ステータス.html     ：画像検査のリアルタイム状況・ログ
+├─ 製造出荷指示周知ページ.html ：製造・出荷指示の周知・管理
+├─ 製造指示・画像検査モニター.html ：サイネージ用モニター（工場現場向け大画面）
+```
+
+## 各ページの説明
+
+- **トップページ.html**
+  - 各機能へのダッシュボード。全体状況や各種メニューにアクセスできます。
+
+- **日報一覧ページ.html**
+  - 日報の一覧表示、検索、日報の新規入力やAIによる清書が可能です。
+
+- **従業員名簿ページ.html**
+  - 従業員の情報を一覧・検索・追加・編集できます。
+
+- **画像検査ステータス.html**
+  - 画像検査のリアルタイム状況や検査ログを確認できます。
+
+- **製造出荷指示周知ページ.html**
+  - 製造・出荷指示の一覧、フィルタ、完了管理、指示の追加・編集ができます。
+
+- **製造指示・画像検査モニター.html**
+  - サイネージ用の大画面表示。現場向けに製造指示や画像検査状況をリアルタイムで表示します。 
\ No newline at end of file
diff --git "a/docs/\347\224\273\351\235\242\346\247\213\346\210\220\350\250\255\350\250\210/scss/alart.scss" "b/docs/\347\224\273\351\235\242\346\247\213\346\210\220\350\250\255\350\250\210/scss/alart.scss"
new file mode 100644
index 000000000..a1c753241
--- /dev/null
+++ "b/docs/\347\224\273\351\235\242\346\247\213\346\210\220\350\250\255\350\250\210/scss/alart.scss"
@@ -0,0 +1,61 @@
+@import "compass/css3";
+
+$border: dotted 10px black;
+
+body {
+  padding: 0;
+  margin: 0;
+  background-size: 120% auto;
+  background-image: url(http://www.zekefilm.org/wp-content/uploads/2013/07/Neon-Genesis-1.jpg);
+}
+
+.eva-warning {
+  margin-top: 10%;
+  background-color: red;
+  overflow: hidden;
+  box-shadow: 0 0 10px black;
+  opacity: 0.75;
+  
+  &:before, &:after {
+    float: left;
+    clear: both;
+    content: ' ';
+    width: 100%;
+    background-color: red;
+    box-shadow: 0 0 0 1px black;
+  }
+  
+  &:before {
+    border-top: $border;
+    transform: skew(-50deg);
+    padding-bottom: 1px;
+  }
+  
+  &:after {
+    border-bottom: $border;
+    transform: skew(50deg);
+    padding-top: 1px;
+  }
+}
+
+.eva-warning__message {
+  margin: 0;
+  padding: 0;
+  text-align: center;
+  text-transform: uppercase;
+  font-weight: bold;
+  font-family: Arial, Helvetica;
+  font-size: 2.5em;
+  animation: blink 1s infinite;
+}
+
+@keyframes blink {
+  25% {
+    color: transparent;
+    background-color: red;
+  }
+  
+  50% {
+    background-color: black; 
+  }
+}
\ No newline at end of file
diff --git "a/docs/\347\224\273\351\235\242\346\247\213\346\210\220\350\250\255\350\250\210/\343\203\207\343\203\274\343\202\277\343\203\231\343\203\274\343\202\271(\346\255\243\350\246\217\345\214\226\343\201\231\343\202\213\343\201\252\343\202\211...).txt" "b/docs/\347\224\273\351\235\242\346\247\213\346\210\220\350\250\255\350\250\210/\343\203\207\343\203\274\343\202\277\343\203\231\343\203\274\343\202\271(\346\255\243\350\246\217\345\214\226\343\201\231\343\202\213\343\201\252\343\202\211...).txt"
new file mode 100644
index 000000000..3f5d9d757
--- /dev/null
+++ "b/docs/\347\224\273\351\235\242\346\247\213\346\210\220\350\250\255\350\250\210/\343\203\207\343\203\274\343\202\277\343\203\231\343\203\274\343\202\271(\346\255\243\350\246\217\345\214\226\343\201\231\343\202\213\343\201\252\343\202\211...).txt"
@@ -0,0 +1,150 @@
+ 【Role (権限) マスタ化】
+CREATE TABLE roles (
+    role_id INT AUTO_INCREMENT PRIMARY KEY,            -- 一意の権限ID（自動採番）
+    role_name VARCHAR(50) UNIQUE NOT NULL               -- 権限名（例: "管理者", "一般"）
+);
+
+ 【Production Line (担当ライン) マスタ化】
+CREATE TABLE production_lines (
+    line_id INT AUTO_INCREMENT PRIMARY KEY,            -- 一意のラインID（自動採番）
+    line_name VARCHAR(100) UNIQUE NOT NULL              -- ライン名（例: "ラインA", "ラインB"）
+);
+
+ 【Employee ID (従業員ID) で統一管理】
+CREATE TABLE employees (
+    employee_id INT AUTO_INCREMENT PRIMARY KEY,         -- 従業員ID（自動採番）
+    employee_name VARCHAR(100) NOT NULL,                 -- 名前（フルネーム）
+    employee_user_id VARCHAR(50) UNIQUE NOT NULL,        -- ユーザーID（ログイン用、一意）
+    employee_password VARCHAR(255) NOT NULL,             -- パスワード（ハッシュ保存推奨）
+    employee_is_active BOOLEAN DEFAULT TRUE,             -- 有効/無効フラグ（TRUE=有効）
+    employee_role_id INT,                                 -- 権限ID（rolesテーブルの外部キー）
+    employee_line_id INT,                                 -- 担当ラインID（production_linesテーブルの外部キー）
+    employee_special_notes TEXT,                          -- 特記事項（任意のメモなど）
+    employee_color_code CHAR(6),                          -- カラーコード（例: "FF0000"）
+    FOREIGN KEY (employee_role_id) REFERENCES roles(role_id),
+    FOREIGN KEY (employee_line_id) REFERENCES production_lines(line_id)
+);
+
+ 【Reports(日報)】
+CREATE TABLE reports (
+    report_id INT AUTO_INCREMENT PRIMARY KEY,            -- レポートID（自動採番）
+    report_employee_id INT NOT NULL,                      -- 担当者ID（employeesテーブルの外部キー）
+    report_date DATE NOT NULL,                            -- 日付（対象の日報日）
+    report_product_name VARCHAR(100),                     -- 製品名（任意）
+    report_line_id INT NOT NULL,                          -- 担当ラインID（production_linesテーブルの外部キー）
+    report_production_result INT,                         -- 生産結果（数量）
+    report_today_work TEXT,                               -- 本日の作業内容
+    report_memo TEXT,                                     -- メモ・備考
+    FOREIGN KEY (report_employee_id) REFERENCES employees(employee_id),
+    FOREIGN KEY (report_line_id) REFERENCES production_lines(line_id)
+);
+
+ 【Notification Priority (優先度) マスタ化】
+CREATE TABLE priorities (
+    priority_id INT AUTO_INCREMENT PRIMARY KEY,           -- 優先度ID（自動採番）
+    priority_label VARCHAR(20) UNIQUE NOT NULL             -- 優先度ラベル（例: "至急対応", "通常対応"）
+);
+
+ 【Notifications(生産目標通知)】
+CREATE TABLE notifications (
+    notification_id INT AUTO_INCREMENT PRIMARY KEY,       -- 通知ID（自動採番）
+    notification_data_time DATETIME DEFAULT CURRENT_TIMESTAMP,  -- 通知日時（自動設定）
+    notification_line_id INT NOT NULL,                     -- 担当ラインID（外部キー）
+    notification_quantity INT NOT NULL,                    -- 生産数量
+    notification_item_name VARCHAR(50),                    -- 品名
+    notification_item_size VARCHAR(50),                    -- サイズ
+    notification_color VARCHAR(50),                         -- カラー
+    notification_spring_type VARCHAR(50),                  -- バネタイプ
+    notification_accessories VARCHAR(50),                  -- 同梱品
+    notification_delivery_method VARCHAR(50),              -- 配送方法
+    notification_delivery_address VARCHAR(100),            -- 配送先住所
+    notification_delivery_company VARCHAR(50),             -- 配送会社名
+    notification_remarks TEXT,                              -- 備考
+    notification_priority_id INT NOT NULL,                  -- 優先度ID（外部キー）
+    FOREIGN KEY (notification_line_id) REFERENCES production_lines(line_id),
+    FOREIGN KEY (notification_priority_id) REFERENCES priorities(priority_id)
+);
+
+ 【Machine Name (機械名) マスタ化】
+CREATE TABLE machines (
+    machine_id INT AUTO_INCREMENT PRIMARY KEY,             -- 機械ID（自動採番）
+    machine_name VARCHAR(100) UNIQUE NOT NULL              -- 機械名（例: "生産機Mk-I"）
+);
+
+ 【Machine Status(生産機械状況)】
+CREATE TABLE machine_status (
+    machine_status_id INT AUTO_INCREMENT PRIMARY KEY,      -- 状態ID（自動採番）
+    machine_data_time DATETIME DEFAULT CURRENT_TIMESTAMP,   -- 状態記録日時
+    machine_id INT NOT NULL,                                -- 機械ID（machinesテーブルの外部キー）
+    machine_status ENUM('稼働中', '停止中', '異常あり', 'メンテ中') NOT NULL,  -- 状態をENUM型で限定
+    machine_trouble_info TEXT,                              -- 不具合情報
+    machine_last_inspection DATE,                           -- 最終点検日
+    FOREIGN KEY (machine_id) REFERENCES machines(machine_id)
+);
+
+
+ 【Inspection Images (検査画像) の分離構造(必要に応じて)】
+CREATE TABLE inspection_results (
+    inspection_id INT AUTO_INCREMENT PRIMARY KEY,           -- 検査ID（自動採番）
+    inspection_image_path TEXT NOT NULL,                     -- 検査画像パス
+    inspection_captured_time DATETIME DEFAULT CURRENT_TIMESTAMP, -- 撮影日時
+    inspection_status VARCHAR(50) NOT NULL,                  -- 検査結果（良品、不良など）
+    inspection_trouble_info TEXT                              -- 問題点詳細
+);
+
+ 【Machine Production(ホックリング残数・生産数)】
+CREATE TABLE machine_production (
+    machine_prod_id INT AUTO_INCREMENT PRIMARY KEY,          -- 生産データID（自動採番）
+    machine_prod_captured_time DATETIME DEFAULT CURRENT_TIMESTAMP, -- 記録日時
+    machine_prod_hook_remaining INT NOT NULL,                 -- ホックリング残数
+    machine_prod_count INT NOT NULL                            -- 生産数
+);
+
+ 【Production Report(生産数管理)】
+CREATE TABLE production_reports (
+    prodreport_id INT AUTO_INCREMENT PRIMARY KEY,             -- 生産レポートID（自動採番）
+    prodreport_date DATE NOT NULL,                             -- 日付
+    prodreport_product_name VARCHAR(100) NOT NULL,            -- 製品名
+    prodreport_plan_quantity INT NOT NULL,                     -- 計画数量
+    prodreport_actual_quantity INT NOT NULL,                   -- 実績数量
+    prodreport_achievement_rate DECIMAL(5,2),                  -- 達成率（例: 95.00）
+    prodreport_defective_quantity INT NOT NULL,                -- 不良数
+    prodreport_employee_id INT,                                -- 担当者ID（employeesテーブルの外部キー）
+    prodreport_remarks TEXT,                                   -- 備考
+    FOREIGN KEY (prodreport_employee_id) REFERENCES employees(employee_id)
+);
+
+
+/*
+ * ===============================================================
+ * 【racks テーブル】→【rack_slots テーブル】(棚の場所マスター) に変更！
+ * これで「どの棚の、どの場所か」を管理できるようになったよ！
+ * ===============================================================
+ */
+CREATE TABLE rack_slots (
+    slot_id INT AUTO_INCREMENT PRIMARY KEY,         -- 場所のID（自動連番）
+    rack_name VARCHAR(100) NOT NULL,                -- 棚自体の名前（例: "メッシュラック #1"）
+    slot_name VARCHAR(50) NOT NULL,                 -- 場所の名前（例: "A-1", "A-2"）
+    UNIQUE (rack_name, slot_name)                   -- 棚の名前と場所の名前の組み合わせはユニークに！
+);
+
+/*
+ * ===============================================================
+ * 【parts_inventory テーブル】→【part_boxes テーブル】(部品の箱マスター) に変更！
+ * これで「どの箱が、どの場所にあるか」を管理できるようになったよ！
+ * ===============================================================
+ */
+CREATE TABLE part_boxes (
+    id INT AUTO_INCREMENT PRIMARY KEY,              -- 箱の内部ID（自動連番）★これがBOX IDの元ネタ！
+    box_id VARCHAR(50) UNIQUE NOT NULL,             -- 箱のID（例: "BOX-101"）★QRコードに入るID！
+    part_name VARCHAR(100) NOT NULL,                -- 部品名
+    part_model_number VARCHAR(100),                 -- 部品型番（任意入力なのでNULLを許可！）
+    quantity INT NOT NULL DEFAULT 0,                -- 部品個数
+    slot_id INT,                                    -- 保管場所のID（rack_slotsテーブルの外部キー）
+    created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+    updated_at DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
+
+    FOREIGN KEY (slot_id) REFERENCES rack_slots(slot_id) -- 外部キー制約
+);
+
+
diff --git "a/docs/\347\224\273\351\235\242\346\247\213\346\210\220\350\250\255\350\250\210/\343\203\210\343\203\203\343\203\227\343\203\232\343\203\274\343\202\270.html" "b/docs/\347\224\273\351\235\242\346\247\213\346\210\220\350\250\255\350\250\210/\343\203\210\343\203\203\343\203\227\343\203\232\343\203\274\343\202\270.html"
new file mode 100644
index 000000000..04ab75099
--- /dev/null
+++ "b/docs/\347\224\273\351\235\242\346\247\213\346\210\220\350\250\255\350\250\210/\343\203\210\343\203\203\343\203\227\343\203\232\343\203\274\343\202\270.html"
@@ -0,0 +1,317 @@
+<!DOCTYPE html>
+<html lang="ja">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>生産管理システム ダッシュボード</title>
+    <!-- Tailwind CSSを読み込む -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Google Fonts (Inter) を読み込む -->
+    <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=Inter:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;700&display=swap"
+        rel="stylesheet">
+    <!-- Ioniconsを読み込む -->
+    <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
+    <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
+    <style>
+        /* フォント設定 */
+        body {
+            font-family: 'Inter', 'Noto Sans JP', sans-serif;
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
+        }
+
+        /* スクロールバーのスタイル（任意） */
+        ::-webkit-scrollbar {
+            width: 8px;
+        }
+
+        ::-webkit-scrollbar-track {
+            background: #f1f5f9;
+        }
+
+        ::-webkit-scrollbar-thumb {
+            background: #94a3b8;
+            border-radius: 4px;
+        }
+
+        ::-webkit-scrollbar-thumb:hover {
+            background: #64748b;
+        }
+
+        /* アニメーション */
+        .fade-in {
+            animation: fadeIn 0.5s ease-in-out forwards;
+        }
+
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+                transform: translateY(10px);
+            }
+
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+    </style>
+</head>
+
+<body class="bg-gray-100 text-gray-800">
+
+    <div class="flex flex-col min-h-screen">
+
+        <!-- ヘッダー -->
+        <header class="bg-white shadow-md sticky top-0 z-20">
+            <div class="container mx-auto px-4 sm:px-6 lg:px-8">
+                <div class="flex items-center justify-between h-16">
+                    <!-- ロゴとタイトル -->
+                    <div class="flex items-center space-x-4">
+                        <div class="bg-indigo-600 p-2 rounded-lg">
+                            <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none"
+                                viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                    d="M12 18h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
+                            </svg>
+                        </div>
+                        <h1 class="text-xl font-bold text-gray-900">生産管理システム</h1>
+                    </div>
+                    <!-- ユーザー情報とログアウト -->
+                    <div class="flex items-center space-x-4">
+                        <div class="text-right hidden sm:block">
+                            <p class="text-sm font-medium">ようこそ、<span class="font-bold">山田 太郎</span> さん</p>
+                            <p class="text-xs text-gray-500">従業員ID: 12345</p>
+                        </div>
+                        <button
+                            class="flex items-center justify-center bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded-lg transition duration-300 ease-in-out transform hover:scale-105">
+                            <ion-icon name="log-out-outline" class="mr-2 text-xl"></ion-icon>
+                            ログアウト
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </header>
+
+        <!-- メインコンテンツ -->
+        <main class="flex-grow container mx-auto p-4 sm:p-6 lg:p-8">
+
+            <!-- リアルタイムモニタリング -->
+            <div class="mb-8">
+                <h2 class="text-2xl font-bold mb-4 fade-in">リアルタイムモニタリング</h2>
+                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                    <!-- 生産状況カード -->
+                    <a href="生産数管理ページ.html"
+                        class="fade-in group bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 hover:scale-[1.03] p-6 flex flex-col justify-between"
+                        style="animation-delay: 0.1s;">
+                        <div>
+                            <div class="flex justify-between items-start mb-4">
+                                <h4 class="text-lg font-bold">生産進捗</h4>
+                                <div class="bg-indigo-100 p-3 rounded-full">
+                                    <ion-icon name="trending-up-outline" class="text-indigo-500 text-2xl"></ion-icon>
+                                </div>
+                            </div>
+                            <div class="flex items-end space-x-2">
+                                <span class="text-4xl font-bold text-indigo-600">1,250</span>
+                                <span class="text-lg text-gray-500">/ 2,000 個</span>
+                            </div>
+                            <div class="mt-3">
+                                <div class="w-full bg-gray-200 rounded-full h-2.5">
+                                    <div class="bg-indigo-600 h-2.5 rounded-full" style="width: 62.5%"></div>
+                                </div>
+                                <p class="text-right text-sm mt-1 font-bold text-indigo-600">達成率: 62.5%</p>
+                            </div>
+                        </div>
+                        <div class="text-right mt-4 text-sm font-semibold text-indigo-600 group-hover:underline">
+                            詳細を見る &rarr;
+                        </div>
+                    </a>
+
+                    <!-- 機械稼働状況カード -->
+                    <a href="生産機械ステータス.html"
+                        class="fade-in group bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 hover:scale-[1.03] p-6 flex flex-col justify-between"
+                        style="animation-delay: 0.2s;">
+                        <div>
+                            <div class="flex justify-between items-start mb-4">
+                                <h4 class="text-lg font-bold">機械稼働ステータス</h4>
+                                <div class="bg-slate-100 p-3 rounded-full">
+                                    <ion-icon name="hardware-chip-outline" class="text-slate-500 text-2xl"></ion-icon>
+                                </div>
+                            </div>
+                            <div class="space-y-2">
+                                <div class="flex items-center justify-between text-sm"><span class="text-gray-600">プレス機
+                                        #1</span><span
+                                        class="font-semibold px-2 py-0.5 rounded-full bg-green-100 text-green-800">正常</span>
+                                </div>
+                                <div class="flex items-center justify-between text-sm"><span class="text-gray-600">組立ライン
+                                        #A</span><span
+                                        class="font-semibold px-2 py-0.5 rounded-full bg-green-100 text-green-800">正常</span>
+                                </div>
+                                <div class="flex items-center justify-between text-sm"><span class="text-gray-600">塗装ブース
+                                        #2</span><span
+                                        class="font-semibold px-2 py-0.5 rounded-full bg-yellow-100 text-yellow-800">待機中</span>
+                                </div>
+                                <div class="flex items-center justify-between text-sm"><span class="text-gray-600">検査機
+                                        #1</span><span
+                                        class="font-semibold px-2 py-0.5 rounded-full bg-red-100 text-red-800">エラー</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="text-right mt-4 text-sm font-semibold text-slate-600 group-hover:underline">
+                            詳細を見る &rarr;
+                        </div>
+                    </a>
+
+                    <!-- 画像検査状況カード -->
+                    <a href="画像検査ステータス.html"
+                        class="fade-in group bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 hover:scale-[1.03] p-6 flex flex-col justify-between"
+                        style="animation-delay: 0.3s;">
+                        <div>
+                            <div class="flex justify-between items-start mb-4">
+                                <h4 class="text-lg font-bold">画像検査ステータス</h4>
+                                <div class="bg-teal-100 p-3 rounded-full">
+                                    <ion-icon name="camera-outline" class="text-teal-500 text-2xl"></ion-icon>
+                                </div>
+                            </div>
+                            <div class="flex items-center justify-center space-x-6">
+                                <div class="relative w-24 h-24">
+                                    <svg class="w-full h-full" viewBox="0 0 36 36">
+                                        <path class="text-gray-200"
+                                            d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
+                                            fill="none" stroke="currentColor" stroke-width="3" />
+                                        <path class="text-teal-500" stroke-dasharray="95, 100"
+                                            d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
+                                            fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" />
+                                    </svg>
+                                    <div class="absolute inset-0 flex flex-col items-center justify-center"><span
+                                            class="text-2xl font-bold">95%</span><span class="text-xs">良品率</span></div>
+                                </div>
+                                <div class="text-sm space-y-1">
+                                    <p>検査総数: 1,280</p>
+                                    <p class="text-teal-600 font-semibold">良品: 1,216</p>
+                                    <p class="text-red-600 font-semibold">不良: 64</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="text-right mt-4 text-sm font-semibold text-teal-600 group-hover:underline">
+                            詳細を見る &rarr;
+                        </div>
+                    </a>
+                </div>
+            </div>
+
+            <!-- 機能メニュー -->
+            <div class="mb-8">
+                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+                    <!-- 製造出荷指示 -->
+                    <a href="製造出荷指示周知ページ.html"
+                        class="fade-in group bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 hover:scale-[1.03] p-6 flex items-center"
+                        style="animation-delay: 0.4s;">
+                        <div class="bg-orange-100 p-4 rounded-full mr-5"><ion-icon name="list-outline"
+                                class="text-orange-500 text-3xl"></ion-icon></div>
+                        <div>
+                            <h3 class="text-lg font-bold">製造出荷指示</h3>
+                            <p class="text-sm text-gray-500">本日の製造・出荷指示を確認</p>
+                        </div>
+                    </a>
+                    <!-- 日報入力 -->
+                    <a href="日報一覧ページ.html"
+                        class="fade-in group bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 hover:scale-[1.03] p-6 flex items-center"
+                        style="animation-delay: 0.5s;">
+                        <div class="bg-sky-100 p-4 rounded-full mr-5"><ion-icon name="create-outline"
+                                class="text-sky-500 text-3xl"></ion-icon></div>
+                        <div>
+                            <h3 class="text-lg font-bold">日報システム</h3>
+                            <p class="text-sm text-gray-500">作業記録の入力・確認</p>
+                        </div>
+                    </a>
+                    <!-- 在庫管理 -->
+                    <a href="部品在庫管理.html"
+                        class="fade-in group bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 hover:scale-[1.03] p-6 flex items-center"
+                        style="animation-delay: 0.6s;">
+                        <div class="bg-green-100 p-4 rounded-full mr-5"><ion-icon name="cube-outline"
+                                class="text-green-500 text-3xl"></ion-icon></div>
+                        <div>
+                            <h3 class="text-lg font-bold">部品在庫管理</h3>
+                            <p class="text-sm text-gray-500">QRコードで入出庫</p>
+                        </div>
+                    </a>
+                </div>
+            </div>
+
+            <!-- 生産目標と管理者メニュー -->
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+                <!-- 生産目標（従業員向け） -->
+                <div class="fade-in bg-white rounded-xl shadow-lg p-6 lg:col-span-2" style="animation-delay: 0.7s;">
+                    <div class="flex justify-between items-center mb-3">
+                        <h3 class="text-xl font-bold">本日のタスク</h3>
+                        <a href="製造出荷指示周知ページ.html"
+                            class="text-sm font-semibold text-indigo-600 hover:underline">すべての指示を見る &rarr;</a>
+                    </div>
+                    <!-- 指示カードリスト -->
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                        <!-- サンプル指示 1 -->
+                        <div class="bg-gray-50 p-4 rounded-lg flex flex-col justify-between">
+                            <div>
+                                <span
+                                    class="px-2 py-1 text-xs font-semibold rounded-full bg-cyan-100 text-cyan-800">マット</span>
+                                <p class="font-bold mt-2">マット <span class="text-sm text-gray-600 font-normal">/
+                                        1200x1950x240</span></p>
+                                <p class="text-xs text-red-600 font-bold mt-1">至急対応</p>
+                            </div>
+                            <div class="text-right mt-2">
+                                <p class="text-gray-500 text-sm">数量</p>
+                                <p class="text-2xl font-bold text-indigo-600">1</p>
+                            </div>
+                        </div>
+                        <!-- サンプル指示 2 -->
+                        <div class="bg-gray-50 p-4 rounded-lg flex flex-col justify-between">
+                            <div>
+                                <span
+                                    class="px-2 py-1 text-xs font-semibold rounded-full bg-orange-100 text-orange-800">ボトム</span>
+                                <p class="font-bold mt-2">サポート <span class="text-sm text-gray-600 font-normal">/
+                                        80巾</span></p>
+                                <p class="text-xs text-gray-500 mt-1">アマゾン直送便</p>
+                            </div>
+                            <div class="text-right mt-2">
+                                <p class="text-gray-500 text-sm">数量</p>
+                                <p class="text-2xl font-bold text-indigo-600">1</p>
+                            </div>
+                        </div>
+                        <!-- もし指示がない場合 -->
+                        <!-- <p class="md:col-span-2 text-center text-gray-500 py-4">現在、優先度の高い指示はありません。</p> -->
+                    </div>
+                </div>
+
+                <!-- 管理者向け機能 -->
+                <div class="fade-in bg-white rounded-xl shadow-lg p-6 lg:col-span-1" style="animation-delay: 0.8s;">
+                    <div class="flex items-center mb-4">
+                        <div class="bg-gray-700 p-2 rounded-full mr-3"><ion-icon name="keypad-outline"
+                                class="text-white text-2xl"></ion-icon></div>
+                        <h3 class="text-lg font-bold">管理者メニュー</h3>
+                    </div>
+                    <div class="space-y-3">
+                        <a href="従業員名簿ページ.html"
+                            class="block w-full text-left bg-gray-100 hover:bg-gray-200 p-3 rounded-lg transition-all duration-200 hover:translate-x-1">従業員名簿の管理</a>
+                        <a href="生産機械サイネージ.html"
+                            class="block w-full text-left bg-gray-100 hover:bg-gray-200 p-3 rounded-lg transition-all duration-200 hover:translate-x-1">サイネージ用モニター</a>
+                    </div>
+                </div>
+            </div>
+        </main>
+
+        <!-- フッター -->
+        <footer class="bg-white mt-8 py-4 px-4 sm:px-6 lg:px-8 border-t border-gray-200">
+            <div class="text-center text-sm text-gray-500">
+                &copy; 2024 生産管理システム. All Rights Reserved.
+            </div>
+        </footer>
+
+    </div>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/docs/\347\224\273\351\235\242\346\247\213\346\210\220\350\250\255\350\250\210/\345\267\245\345\240\264\350\250\255\345\256\232.html" "b/docs/\347\224\273\351\235\242\346\247\213\346\210\220\350\250\255\350\250\210/\345\267\245\345\240\264\350\250\255\345\256\232.html"
new file mode 100644
index 000000000..8b6fd7d20
--- /dev/null
+++ "b/docs/\347\224\273\351\235\242\346\247\213\346\210\220\350\250\255\350\250\210/\345\267\245\345\240\264\350\250\255\345\256\232.html"
@@ -0,0 +1,469 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>工場設定</title>
+    <!-- Tailwind CSSを読み込む -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Google Fonts (Inter) を読み込む -->
+    <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=Inter:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;700&display=swap" rel="stylesheet">
+    <!-- Ioniconsを読み込む -->
+    <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
+    <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
+    <style>
+        /* フォント設定 */
+        body {
+            font-family: 'Inter', 'Noto Sans JP', sans-serif;
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
+        }
+        .fade-in {
+            animation: fadeIn 0.5s ease-in-out forwards;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+    </style>
+</head>
+<body class="bg-gray-100 text-gray-800">
+
+    <div class="flex flex-col min-h-screen">
+
+        <!-- ヘッダー -->
+        <header class="bg-white shadow-md sticky top-0 z-20">
+            <div class="container mx-auto px-4 sm:px-6 lg:px-8">
+                <div class="flex items-center justify-between h-16">
+                    <div class="flex items-center space-x-4">
+                        <div class="bg-indigo-600 p-2 rounded-lg">
+                            <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+                                <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                            </svg>
+                        </div>
+                        <h1 class="text-xl font-bold text-gray-900">工場設定</h1>
+                    </div>
+                    <div class="flex items-center space-x-4">
+                        <a href="トップページ.html" class="text-sm font-medium text-indigo-600 hover:text-indigo-800">&larr; ダッシュボードに戻る</a>
+                        <button class="flex items-center justify-center bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded-lg transition duration-300 ease-in-out transform hover:scale-105">
+                            <ion-icon name="log-out-outline" class="mr-2 text-xl"></ion-icon>
+                            ログアウト
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </header>
+
+        <!-- メインコンテンツ -->
+        <main class="flex-grow container mx-auto p-4 sm:p-6 lg:p-8">
+            
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+
+                <!-- 権限種別管理 -->
+                <div class="bg-white p-6 rounded-xl shadow-md fade-in">
+                    <h2 class="text-lg font-bold text-gray-900 mb-4 border-b pb-2 flex items-center gap-2">
+                        <span class="inline-flex h-8 w-8 items-center justify-center rounded-lg bg-indigo-50 text-indigo-600">
+                            <ion-icon name="shield-checkmark-outline" class="text-2xl"></ion-icon>
+                        </span>
+                        <span>権限種別管理</span>
+                    </h2>
+                    <div class="space-y-4">
+                        <div id="roles-list" class="space-y-2">
+                            <!-- 権限リストはJSで動的に生成 -->
+                        </div>
+                        <div class="flex items-center gap-2 pt-2">
+                            <input type="text" id="new-role-input" class="focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="ロール名を入力 (例: 閲覧のみ)">
+                            <button type="button" id="new-role-type-toggle" class="px-3 py-2 border rounded-md text-sm bg-gray-50 text-gray-700 border-gray-200 hover:bg-gray-100 transition">
+                                <span class="inline-flex items-center gap-1">
+                                    <ion-icon name="person-outline" class="text-base"></ion-icon>
+                                    <span>一般従業員</span>
+                                </span>
+                            </button>
+                            <button id="add-role-button" class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded-md transition duration-300">
+                                <ion-icon name="add-outline" class="text-xl"></ion-icon>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- 工場ライン管理 -->
+                <div class="bg-white p-6 rounded-xl shadow-md fade-in" style="animation-delay: 0.1s;">
+                    <h2 class="text-lg font-bold text-gray-900 mb-4 border-b pb-2 flex items-center gap-2">
+                        <span class="inline-flex h-8 w-8 items-center justify-center rounded-lg bg-emerald-50 text-emerald-600">
+                            <!-- ベルトコンベア風アイコン -->
+                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-6 w-6">
+                                <rect x="3" y="14" width="18" height="4" rx="2"></rect>
+                                <circle cx="7" cy="18" r="1.5"></circle>
+                                <circle cx="17" cy="18" r="1.5"></circle>
+                                <rect x="6" y="8" width="4" height="4" rx="1"></rect>
+                                <rect x="12" y="8" width="4" height="4" rx="1"></rect>
+                            </svg>
+                        </span>
+                        <span>工場ライン管理</span>
+                    </h2>
+                    <div class="space-y-4">
+                        <div id="lines-list" class="space-y-2">
+                            <!-- 工場ラインリストはJSで動的に生成 -->
+                        </div>
+                        <div class="flex space-x-2 pt-2">
+                            <input type="text" id="new-line-input" class="focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="新しいライン名 (例: Cライン)">
+                            <button id="add-line-button" class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded-md transition duration-300">
+                                <ion-icon name="add-outline" class="text-xl"></ion-icon>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+
+        </main>
+
+        <!-- フッター -->
+        <footer class="bg-white mt-8 py-4 px-4 sm:px-6 lg:px-8 border-t border-gray-200">
+            <div class="text-center text-sm text-gray-500">
+                &copy; 2024 生産管理システム. All Rights Reserved.
+            </div>
+        </footer>
+
+    </div>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            // --- サンプルデータ ---
+            const permissionTypes = ['管理者', '一般従業員'];
+            let roles = [
+                { name: '管理画面運用', type: '管理者' },
+                { name: '閲覧のみ', type: '一般従業員' }
+            ];
+            let lines = ['Aライン (組立)', 'Bライン (塗装)', '検査ライン'];
+
+            // --- DOM要素 ---
+            const rolesList = document.getElementById('roles-list');
+            const newRoleInput = document.getElementById('new-role-input');
+            const newRoleTypeToggle = document.getElementById('new-role-type-toggle');
+            let newRoleType = '一般従業員';
+
+            const updateNewRoleTypeButton = () => {
+                const isAdmin = newRoleType === '管理者';
+                newRoleTypeToggle.className = `w-44 justify-center px-3 py-2 border rounded-md text-sm transition ${isAdmin ? 'bg-indigo-50 text-indigo-700 border-indigo-200 hover:bg-indigo-100' : 'bg-gray-50 text-gray-700 border-gray-200 hover:bg-gray-100'}`;
+                newRoleTypeToggle.innerHTML = `<span class="inline-flex items-center justify-center gap-1">${isAdmin
+                    ? '<ion-icon name="shield-checkmark-outline" class="text-base"></ion-icon><span>管理者</span>'
+                    : '<ion-icon name="person-outline" class="text-base"></ion-icon><span>一般従業員</span>'}</span>`;
+            };
+            if (newRoleTypeToggle) {
+                newRoleTypeToggle.addEventListener('click', () => {
+                    newRoleType = newRoleType === '管理者' ? '一般従業員' : '管理者';
+                    updateNewRoleTypeButton();
+                });
+                updateNewRoleTypeButton();
+            }
+            const addRoleButton = document.getElementById('add-role-button');
+
+            const linesList = document.getElementById('lines-list');
+            const newLineInput = document.getElementById('new-line-input');
+            const addLineButton = document.getElementById('add-line-button');
+
+            // --- ライン行生成（クリック編集対応） ---
+            const createLineItem = (index) => {
+                const div = document.createElement('div');
+                div.className = 'flex items-center justify-between bg-gray-50 p-3 rounded-md';
+
+                const left = document.createElement('div');
+                left.className = 'flex items-center';
+
+                const iconWrap = document.createElement('span');
+                iconWrap.className = 'inline-flex h-8 w-8 items-center justify-center rounded-md bg-white text-gray-500 mr-3';
+                // ベルトコンベアSVG
+                const svgNS = 'http://www.w3.org/2000/svg';
+                const svg = document.createElementNS(svgNS, 'svg');
+                svg.setAttribute('viewBox', '0 0 24 24');
+                svg.setAttribute('fill', 'none');
+                svg.setAttribute('stroke', 'currentColor');
+                svg.setAttribute('stroke-width', '2');
+                svg.setAttribute('stroke-linecap', 'round');
+                svg.setAttribute('stroke-linejoin', 'round');
+                svg.setAttribute('class', 'h-5 w-5');
+                const rectBelt = document.createElementNS(svgNS, 'rect');
+                rectBelt.setAttribute('x', '3'); rectBelt.setAttribute('y', '14'); rectBelt.setAttribute('width', '18'); rectBelt.setAttribute('height', '4'); rectBelt.setAttribute('rx', '2');
+                const wheel1 = document.createElementNS(svgNS, 'circle'); wheel1.setAttribute('cx', '7'); wheel1.setAttribute('cy', '18'); wheel1.setAttribute('r', '1.5');
+                const wheel2 = document.createElementNS(svgNS, 'circle'); wheel2.setAttribute('cx', '17'); wheel2.setAttribute('cy', '18'); wheel2.setAttribute('r', '1.5');
+                const box1 = document.createElementNS(svgNS, 'rect'); box1.setAttribute('x', '6'); box1.setAttribute('y', '8'); box1.setAttribute('width', '4'); box1.setAttribute('height', '4'); box1.setAttribute('rx', '1');
+                const box2 = document.createElementNS(svgNS, 'rect'); box2.setAttribute('x', '12'); box2.setAttribute('y', '8'); box2.setAttribute('width', '4'); box2.setAttribute('height', '4'); box2.setAttribute('rx', '1');
+                svg.appendChild(rectBelt); svg.appendChild(wheel1); svg.appendChild(wheel2); svg.appendChild(box1); svg.appendChild(box2);
+                iconWrap.appendChild(svg);
+
+                const nameSpan = document.createElement('span');
+                nameSpan.className = 'text-gray-700 cursor-text';
+                nameSpan.textContent = lines[index];
+
+                const nameInput = document.createElement('input');
+                nameInput.type = 'text';
+                nameInput.className = 'hidden text-gray-800 focus:ring-indigo-500 focus:border-indigo-500 border border-gray-300 rounded-md text-sm px-2 py-1';
+                nameInput.placeholder = 'ライン名';
+
+                left.appendChild(iconWrap);
+                left.appendChild(nameSpan);
+                left.appendChild(nameInput);
+
+                const buttonsDiv = document.createElement('div');
+                buttonsDiv.className = 'flex items-center gap-2';
+
+                const editButton = document.createElement('button');
+                editButton.className = 'text-gray-400 hover:text-indigo-500 transition';
+                editButton.innerHTML = '<ion-icon name="pencil-outline" class="text-lg"></ion-icon>';
+
+                const deleteButton = document.createElement('button');
+                deleteButton.className = 'text-gray-400 hover:text-red-500 transition';
+                deleteButton.innerHTML = '<ion-icon name="trash-outline" class="text-xl"></ion-icon>';
+
+                const saveButton = document.createElement('button');
+                saveButton.className = 'hidden text-gray-400 hover:text-green-500 transition';
+                saveButton.innerHTML = '<ion-icon name="checkmark-outline" class="text-xl"></ion-icon>';
+
+                const cancelButton = document.createElement('button');
+                cancelButton.className = 'hidden text-gray-400 hover:text-red-500 transition';
+                cancelButton.innerHTML = '<ion-icon name="close-outline" class="text-xl"></ion-icon>';
+
+                buttonsDiv.appendChild(editButton);
+                buttonsDiv.appendChild(deleteButton);
+                buttonsDiv.appendChild(saveButton);
+                buttonsDiv.appendChild(cancelButton);
+
+                deleteButton.onclick = () => {
+                    lines.splice(index, 1);
+                    renderLines();
+                };
+
+                // --- 編集モードのロジック ---
+                let editing = false;
+                const enterEdit = () => {
+                    if (editing) return;
+                    editing = true;
+                    nameInput.value = lines[index];
+                    nameSpan.classList.add('hidden');
+                    nameInput.classList.remove('hidden');
+                    editButton.classList.add('hidden');
+                    deleteButton.classList.add('hidden');
+                    saveButton.classList.remove('hidden');
+                    cancelButton.classList.remove('hidden');
+                    setTimeout(() => { nameInput.focus(); nameInput.select(); }, 0);
+                };
+
+                const exitEdit = () => {
+                    editing = false;
+                    nameSpan.classList.remove('hidden');
+                    nameInput.classList.add('hidden');
+                    editButton.classList.remove('hidden');
+                    deleteButton.classList.remove('hidden');
+                    saveButton.classList.add('hidden');
+                    cancelButton.classList.add('hidden');
+                };
+
+                const saveEdit = () => {
+                    const newName = nameInput.value.trim();
+                    if (!newName) { exitEdit(); return; }
+                    const duplicate = lines.some((l, i) => i !== index && l === newName);
+                    if (duplicate) { exitEdit(); return; } // 重複は保存しない
+                    lines[index] = newName;
+                    nameSpan.textContent = newName;
+                    exitEdit();
+                };
+
+                editButton.addEventListener('click', enterEdit);
+                cancelButton.addEventListener('click', exitEdit);
+                saveButton.addEventListener('click', saveEdit);
+
+                nameInput.addEventListener('keydown', (e) => {
+                    if (e.key === 'Enter') saveEdit();
+                    if (e.key === 'Escape') exitEdit();
+                });
+                nameInput.addEventListener('blur', exitEdit);
+
+                div.appendChild(left);
+                div.appendChild(buttonsDiv);
+                return div;
+            };
+
+            // --- 権限管理 ---
+            const createRoleItem = (role) => {
+                const div = document.createElement('div');
+                div.className = 'flex items-center justify-between bg-gray-50 p-3 rounded-md';
+
+                // 左側: アイコン + ロール名
+                const left = document.createElement('div');
+                left.className = 'flex items-center';
+
+                const iconWrap = document.createElement('span');
+                iconWrap.className = 'inline-flex h-8 w-8 items-center justify-center rounded-md bg-white text-gray-500 mr-3';
+                const icon = document.createElement('ion-icon');
+                icon.setAttribute('name', 'shield-outline');
+                icon.className = 'text-xl';
+                iconWrap.appendChild(icon);
+
+                const nameSpan = document.createElement('span');
+                nameSpan.className = 'text-gray-800 font-medium';
+                nameSpan.textContent = role.name;
+
+                // 編集用インプット（初期は非表示）
+                const nameInput = document.createElement('input');
+                nameInput.type = 'text';
+                nameInput.className = 'hidden text-gray-800 font-medium focus:ring-indigo-500 focus:border-indigo-500 border border-gray-300 rounded-md text-sm px-2 py-1';
+                nameInput.placeholder = 'ロール名';
+
+                left.appendChild(iconWrap);
+                left.appendChild(nameSpan);
+                left.appendChild(nameInput);
+
+                // 右側: 種別トグル + ボタン
+                const right = document.createElement('div');
+                right.className = 'flex items-center gap-3';
+
+                const typeToggle = document.createElement('button');
+                typeToggle.type = 'button';
+                const applyTypeStyle = () => {
+                    const isAdmin = role.type === '管理者';
+                    typeToggle.className = `w-32 justify-center px-3 py-1.5 border rounded-md text-sm transition ${isAdmin ? 'bg-indigo-50 text-indigo-700 border-indigo-200 hover:bg-indigo-100' : 'bg-gray-50 text-gray-700 border-gray-200 hover:bg-gray-100'}`;
+                    typeToggle.innerHTML = isAdmin
+                        ? '<span class="inline-flex items-center justify-center gap-1"><ion-icon name="shield-checkmark-outline" class="text-base"></ion-icon><span>管理者</span></span>'
+                        : '<span class="inline-flex items-center justify-center gap-1"><ion-icon name="person-outline" class="text-base"></ion-icon><span>一般従業員</span></span>';
+                };
+                typeToggle.addEventListener('click', () => {
+                    role.type = role.type === '管理者' ? '一般従業員' : '管理者';
+                    applyTypeStyle();
+                });
+                applyTypeStyle();
+
+                const buttonsDiv = document.createElement('div');
+                buttonsDiv.className = 'flex items-center gap-2';
+
+                const editButton = document.createElement('button');
+                editButton.className = 'text-gray-400 hover:text-indigo-500 transition';
+                editButton.innerHTML = '<ion-icon name="pencil-outline" class="text-lg"></ion-icon>';
+
+                const deleteButton = document.createElement('button');
+                deleteButton.className = 'text-gray-400 hover:text-red-500 transition';
+                deleteButton.innerHTML = '<ion-icon name="trash-outline" class="text-xl"></ion-icon>';
+
+                const saveButton = document.createElement('button');
+                saveButton.className = 'hidden text-gray-400 hover:text-green-500 transition';
+                saveButton.innerHTML = '<ion-icon name="checkmark-outline" class="text-xl"></ion-icon>';
+
+                const cancelButton = document.createElement('button');
+                cancelButton.className = 'hidden text-gray-400 hover:text-red-500 transition';
+                cancelButton.innerHTML = '<ion-icon name="close-outline" class="text-xl"></ion-icon>';
+
+                buttonsDiv.appendChild(editButton);
+                buttonsDiv.appendChild(deleteButton);
+                buttonsDiv.appendChild(saveButton);
+                buttonsDiv.appendChild(cancelButton);
+
+                // --- 編集モードのロジック ---
+                let editing = false;
+                const enterEdit = () => {
+                    if (editing) return;
+                    editing = true;
+                    nameInput.value = role.name;
+                    nameSpan.classList.add('hidden');
+                    nameInput.classList.remove('hidden');
+                    typeToggle.classList.add('hidden');
+                    editButton.classList.add('hidden');
+                    deleteButton.classList.add('hidden');
+                    saveButton.classList.remove('hidden');
+                    cancelButton.classList.remove('hidden');
+                    setTimeout(() => { nameInput.focus(); nameInput.select(); }, 0);
+                };
+
+                const exitEdit = () => {
+                    editing = false;
+                    nameSpan.classList.remove('hidden');
+                    nameInput.classList.add('hidden');
+                    typeToggle.classList.remove('hidden');
+                    editButton.classList.remove('hidden');
+                    deleteButton.classList.remove('hidden');
+                    saveButton.classList.add('hidden');
+                    cancelButton.classList.add('hidden');
+                };
+
+                const saveEdit = () => {
+                    const newName = nameInput.value.trim();
+                    if (!newName) { exitEdit(); return; }
+                    const duplicate = roles.some(r => r !== role && r.name === newName);
+                    if (duplicate) { exitEdit(); return; }
+                    role.name = newName;
+                    nameSpan.textContent = newName;
+                    exitEdit();
+                };
+
+                editButton.addEventListener('click', enterEdit);
+                cancelButton.addEventListener('click', exitEdit);
+                saveButton.addEventListener('click', saveEdit);
+
+                nameInput.addEventListener('keydown', (e) => {
+                    if (e.key === 'Enter') saveEdit();
+                    if (e.key === 'Escape') exitEdit();
+                });
+                nameInput.addEventListener('blur', exitEdit);
+
+                deleteButton.onclick = () => {
+                    roles = roles.filter(r => r !== role);
+                    renderRoles();
+                };
+
+                right.appendChild(typeToggle);
+                right.appendChild(buttonsDiv);
+
+                div.appendChild(left);
+                div.appendChild(right);
+                return div;
+            };
+
+            const renderRoles = () => {
+                rolesList.innerHTML = '';
+                roles.forEach(role => {
+                    const item = createRoleItem(role);
+                    rolesList.appendChild(item);
+                });
+            };
+
+            addRoleButton.addEventListener('click', () => {
+                const name = newRoleInput.value.trim();
+                const type = newRoleType;
+                const exists = roles.some(r => r.name === name);
+                if (name && !exists) {
+                    roles.push({ name, type });
+                    renderRoles();
+                    newRoleInput.value = '';
+                    newRoleType = '一般従業員';
+                    updateNewRoleTypeButton();
+                }
+            });
+
+            // --- 工場ライン管理 ---
+            const renderLines = () => {
+                linesList.innerHTML = '';
+                for (let i = 0; i < lines.length; i++) {
+                    const item = createLineItem(i);
+                    linesList.appendChild(item);
+                }
+            };
+
+            addLineButton.addEventListener('click', () => {
+                const newLine = newLineInput.value.trim();
+                if (newLine && !lines.includes(newLine)) {
+                    lines.push(newLine);
+                    renderLines();
+                    newLineInput.value = '';
+                }
+            });
+
+            // --- 初期化 ---
+            renderRoles();
+            renderLines();
+        });
+    </script>
+
+</body>
+</html>
diff --git "a/docs/\347\224\273\351\235\242\346\247\213\346\210\220\350\250\255\350\250\210/\345\276\223\346\245\255\345\223\241\345\220\215\347\260\277\343\203\232\343\203\274\343\202\270.html" "b/docs/\347\224\273\351\235\242\346\247\213\346\210\220\350\250\255\350\250\210/\345\276\223\346\245\255\345\223\241\345\220\215\347\260\277\343\203\232\343\203\274\343\202\270.html"
new file mode 100644
index 000000000..db3e5133f
--- /dev/null
+++ "b/docs/\347\224\273\351\235\242\346\247\213\346\210\220\350\250\255\350\250\210/\345\276\223\346\245\255\345\223\241\345\220\215\347\260\277\343\203\232\343\203\274\343\202\270.html"
@@ -0,0 +1,392 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>従業員名簿</title>
+    <!-- Tailwind CSSを読み込む -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Google Fonts (Inter) を読み込む -->
+    <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=Inter:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;700&display=swap" rel="stylesheet">
+    <!-- Ioniconsを読み込む -->
+    <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
+    <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
+    <style>
+        /* フォント設定 */
+        body {
+            font-family: 'Inter', 'Noto Sans JP', sans-serif;
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
+        }
+        /* スクロールバーのスタイル（任意） */
+        ::-webkit-scrollbar {
+            width: 8px;
+        }
+        ::-webkit-scrollbar-track {
+            background: #f1f5f9;
+        }
+        ::-webkit-scrollbar-thumb {
+            background: #94a3b8;
+            border-radius: 4px;
+        }
+        ::-webkit-scrollbar-thumb:hover {
+            background: #64748b;
+        }
+        /* アニメーション */
+        .fade-in {
+            animation: fadeIn 0.5s ease-in-out forwards;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .modal-enter {
+            animation: modal-enter-animation 0.3s ease-out forwards;
+        }
+        @keyframes modal-enter-animation {
+            from { opacity: 0; transform: scale(0.95); }
+            to { opacity: 1; transform: scale(1); }
+        }
+    </style>
+</head>
+<body class="bg-gray-100 text-gray-800">
+
+    <div class="flex flex-col min-h-screen">
+
+        <!-- ヘッダー -->
+        <header class="bg-white shadow-md sticky top-0 z-20">
+            <div class="container mx-auto px-4 sm:px-6 lg:px-8">
+                <div class="flex items-center justify-between h-16">
+                    <div class="flex items-center space-x-4">
+                        <div class="bg-indigo-600 p-2 rounded-lg">
+                            <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
+                            </svg>
+                        </div>
+                        <h1 class="text-xl font-bold text-gray-900">従業員名簿</h1>
+                    </div>
+                    <div class="flex items-center space-x-4">
+                        <a href="トップページ.html" class="text-sm font-medium text-indigo-600 hover:text-indigo-800">&larr; ダッシュボードに戻る</a>
+                        <button class="flex items-center justify-center bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded-lg transition duration-300 ease-in-out transform hover:scale-105">
+                            <ion-icon name="log-out-outline" class="mr-2 text-xl"></ion-icon>
+                            ログアウト
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </header>
+
+        <!-- メインコンテンツ -->
+        <main class="flex-grow container mx-auto p-4 sm:p-6 lg:p-8">
+            
+            <!-- 検索・フィルターバー -->
+            <div class="bg-white p-4 rounded-xl shadow-md mb-6">
+                <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4">
+                    <div class="md:col-span-1 lg:col-span-2">
+                        <label for="search" class="block text-sm font-medium text-gray-700">氏名で検索</label>
+                        <div class="mt-1 relative rounded-md shadow-sm">
+                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                                <ion-icon name="search-outline" class="text-gray-400"></ion-icon>
+                            </div>
+                            <input type="text" id="search" class="focus:ring-indigo-500 focus:border-indigo-500 block w-full pl-10 sm:text-sm border-gray-300 rounded-md" placeholder="山田 太郎">
+                        </div>
+                    </div>
+                    <div>
+                        <label for="department" class="block text-sm font-medium text-gray-700">担当</label>
+                        <select id="department" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
+                            <option value="all">すべて</option>
+                            <option value="組立">組立</option>
+                            <option value="塗装">塗装</option>
+                            <option value="検査">検査</option>
+                            <option value="管理">管理</option>
+                        </select>
+                    </div>
+                    <div>
+                        <label for="status" class="block text-sm font-medium text-gray-700">在籍状況</label>
+                        <select id="status" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
+                            <option value="all">すべて</option>
+                            <option value="在籍中">在籍中</option>
+                            <option value="退職済">退職済</option>
+                        </select>
+                    </div>
+                </div>
+            </div>
+
+            <!-- 従業員リスト -->
+            <div id="employee-list" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+                <!-- 従業員カードはJSで動的に生成・管理することを想定 -->
+            </div>
+            <div id="no-results" class="hidden text-center py-12">
+                <ion-icon name="sad-outline" class="text-5xl text-gray-400 mx-auto"></ion-icon>
+                <p class="mt-4 text-lg font-medium text-gray-600">該当する従業員が見つかりませんでした。</p>
+                <p class="text-sm text-gray-500">検索条件を変更して、もう一度お試しください。</p>
+            </div>
+        </main>
+
+        <!-- フッター -->
+        <footer class="bg-white mt-8 py-4 px-4 sm:px-6 lg:px-8 border-t border-gray-200">
+            <div class="text-center text-sm text-gray-500">
+                &copy; 2024 生産管理システム. All Rights Reserved.
+            </div>
+        </footer>
+
+        <!-- フローティング追加ボタン -->
+        <button id="add-employee-button" class="fixed bottom-8 right-8 bg-indigo-600 hover:bg-indigo-700 text-white w-16 h-16 rounded-full shadow-lg flex items-center justify-center transition-transform transform hover:scale-110 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 z-10">
+            <ion-icon name="add-outline" class="text-4xl"></ion-icon>
+        </button>
+
+    </div>
+
+    <!-- 従業員追加・編集モーダル -->
+    <div id="employee-modal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-75 flex items-center justify-center z-30 p-4">
+        <div id="modal-content" class="bg-white rounded-xl shadow-2xl w-full max-w-3xl modal-enter">
+            <div class="p-6 border-b border-gray-200 flex justify-between items-center">
+                <h2 class="text-xl font-bold">従業員追加・編集</h2>
+                <button id="modal-close-button" class="text-gray-400 hover:text-gray-600">
+                    <ion-icon name="close-outline" class="text-3xl"></ion-icon>
+                </button>
+            </div>
+            <div class="p-6">
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                    <!-- 左側: アイコンプレビューとカラーピッカー -->
+                    <div class="md:col-span-1 flex flex-col items-center">
+                        <div id="icon-preview" class="w-32 h-32 rounded-full flex items-center justify-center text-white text-5xl font-bold mb-4" style="background-color: #4f46e5;">
+                            <span id="icon-initials">押山</span>
+                        </div>
+                        <p class="text-center font-bold text-lg" id="preview-name">押山 漢太朗</p>
+                        <p class="text-center text-sm text-gray-500" id="preview-id">r.oshiyama</p>
+                        <div class="mt-6 w-full">
+                            <label class="block text-sm font-medium text-gray-700 mb-2">色を選択</label>
+                            <div id="color-palette" class="grid grid-cols-8 gap-2">
+                                <!-- カラーパレットの色はJSで設定 -->
+                            </div>
+                        </div>
+                    </div>
+                    <!-- 右側: 入力フォーム -->
+                    <div class="md:col-span-2 grid grid-cols-2 gap-x-6 gap-y-4">
+                        <div>
+                            <label for="form-name" class="block text-sm font-medium text-gray-700">名前 (フルネーム)</label>
+                            <input type="text" id="form-name" value="押山 漢太朗" class="mt-1 w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
+                        </div>
+                        <div>
+                            <label for="form-role" class="block text-sm font-medium text-gray-700">役職</label>
+                            <input type="text" id="form-role" value="一般" class="mt-1 w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
+                        </div>
+                        <div>
+                            <label for="form-id" class="block text-sm font-medium text-gray-700">ID</label>
+                            <input type="text" id="form-id" value="r.oshiyama" class="mt-1 w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
+                        </div>
+                        <div>
+                            <label for="form-line" class="block text-sm font-medium text-gray-700">担当ライン</label>
+                            <input type="text" id="form-line" value="B層ばねどめ" class="mt-1 w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
+                        </div>
+                        <div>
+                            <label for="form-password" class="block text-sm font-medium text-gray-700">パスワード</label>
+                            <input type="password" id="form-password" value="******" class="mt-1 w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
+                        </div>
+                        <div>
+                             <label for="form-status" class="block text-sm font-medium text-gray-700">在籍状況</label>
+                             <select id="form-status" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
+                                <option>在籍中</option>
+                                <option>退職済</option>
+                             </select>
+                        </div>
+                        <div class="col-span-2">
+                            <label for="form-notes" class="block text-sm font-medium text-gray-700">特記事項</label>
+                            <textarea id="form-notes" rows="3" class="mt-1 w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">とくになし</textarea>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="p-6 bg-gray-50 rounded-b-xl flex justify-end space-x-4">
+                <button id="modal-cancel-button" class="px-6 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">キャンセル</button>
+                <button id="modal-save-button" class="px-6 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">保存</button>
+            </div>
+        </div>
+    </div>
+
+
+    <script>
+        // --- サンプルデータ ---
+        const initialEmployees = [
+            { id: '12345', name: '山田 太郎', department: '組立', role: 'リーダー', status: '在籍中', notes: 'フォークリフト免許保持', iconColor: '#a3a8e6' },
+            { id: '12346', name: '佐藤 花子', department: '塗装', role: 'スタッフ', status: '在籍中', notes: '色彩検定2級', iconColor: '#e6a3c8' },
+            { id: '12347', name: '鈴木 一郎', department: '検査', role: '主任', status: '在籍中', notes: '-', iconColor: '#a3e6c8' },
+            { id: '10001', name: '高橋 次郎', department: '管理', role: '部長', status: '在籍中', notes: '-', iconColor: '#e6dca3' },
+            { id: '12348', name: '田中 三郎', department: '組立', role: 'スタッフ', status: '退職済', notes: '2024/03/31付', iconColor: '#b0b0b0' },
+            { id: '12349', name: '渡辺 直美', department: '検査', role: 'スタッフ', status: '在籍中', notes: '新人研修中', iconColor: '#e6a3a3' },
+        ];
+
+        // --- DOM要素 ---
+        const employeeListContainer = document.getElementById('employee-list');
+        const searchInput = document.getElementById('search');
+        const departmentSelect = document.getElementById('department');
+        const statusSelect = document.getElementById('status');
+        const noResultsMessage = document.getElementById('no-results');
+        
+        // モーダル関連のDOM要素
+        const modal = document.getElementById('employee-modal');
+        const modalContent = document.getElementById('modal-content');
+        const openModalButton = document.getElementById('add-employee-button');
+        const closeModalButton = document.getElementById('modal-close-button');
+        const cancelButton = document.getElementById('modal-cancel-button');
+        
+        // モーダルフォームの要素
+        const iconPreview = document.getElementById('icon-preview');
+        const iconInitials = document.getElementById('icon-initials');
+        const previewName = document.getElementById('preview-name');
+        const previewId = document.getElementById('preview-id');
+        const colorPalette = document.getElementById('color-palette');
+        const formName = document.getElementById('form-name');
+        const formId = document.getElementById('form-id');
+
+        // --- 関数 ---
+
+        /** 従業員カードを生成して表示する */
+        function renderEmployeeCard(employee) {
+            const initials = employee.name.split(' ').map(n => n[0]).join('').substring(0, 2);
+            const isRetired = employee.status === '退職済';
+            const cardOpacity = isRetired ? 'opacity-60' : '';
+
+            return `
+                <div class="employee-card fade-in bg-white rounded-xl shadow-md p-5 flex flex-col relative" data-name="${employee.name}" data-department="${employee.department}" data-status="${employee.status}">
+                    <div class="absolute top-2 right-2">
+                        <button class="dropdown-button text-gray-400 hover:text-gray-600 focus:outline-none p-2 rounded-full hover:bg-gray-100">
+                            <ion-icon name="ellipsis-vertical-outline" class="text-xl"></ion-icon>
+                        </button>
+                        <div class="dropdown-menu hidden absolute right-0 mt-2 w-32 bg-white rounded-md shadow-lg z-10 ring-1 ring-black ring-opacity-5">
+                            <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">編集</a>
+                            <a href="#" class="block px-4 py-2 text-sm text-red-600 hover:bg-gray-100">削除</a>
+                        </div>
+                    </div>
+                    <div class="flex items-center mb-4 ${cardOpacity}">
+                        <div class="h-16 w-16 rounded-full object-cover mr-4 flex-shrink-0 flex items-center justify-center text-white text-2xl font-bold" style="background-color: ${employee.iconColor};">
+                           ${initials}
+                        </div>
+                        <div>
+                            <h3 class="text-lg font-bold ${isRetired ? 'text-gray-500' : 'text-gray-900'}">${employee.name}</h3>
+                            <p class="text-sm ${isRetired ? 'text-gray-400' : 'text-gray-500'}">ID: ${employee.id}</p>
+                        </div>
+                    </div>
+                    <div class="space-y-2 text-sm flex-grow ${cardOpacity}">
+                        <p><strong class="w-16 inline-block">担当:</strong> <span class="font-medium ${isRetired ? 'text-gray-500' : 'text-indigo-700'}">${employee.department}</span></p>
+                        <p><strong class="w-16 inline-block">役職:</strong> ${employee.role}</p>
+                        <p><strong class="w-16 inline-block">在籍状況:</strong> <span class="font-semibold px-2 py-0.5 rounded-full ${isRetired ? 'bg-gray-200 text-gray-600' : 'bg-green-100 text-green-800'}">${employee.status}</span></p>
+                        <p><strong class="w-16 inline-block">備考:</strong> ${employee.notes}</p>
+                    </div>
+                </div>
+            `;
+        }
+
+        /** 全従業員をリスト表示し、フィルターを適用する */
+        function displayEmployees() {
+            const searchTerm = searchInput.value.toLowerCase();
+            const departmentFilter = departmentSelect.value;
+            const statusFilter = statusSelect.value;
+            
+            employeeListContainer.innerHTML = '';
+            let visibleCount = 0;
+
+            initialEmployees.forEach(employee => {
+                const nameMatch = employee.name.toLowerCase().includes(searchTerm);
+                const departmentMatch = departmentFilter === 'all' || employee.department === departmentFilter;
+                const statusMatch = statusFilter === 'all' || employee.status === statusFilter;
+
+                if (nameMatch && departmentMatch && statusMatch) {
+                    employeeListContainer.innerHTML += renderEmployeeCard(employee);
+                    visibleCount++;
+                }
+            });
+
+            noResultsMessage.style.display = visibleCount === 0 ? 'block' : 'none';
+            addDropdownEventListeners();
+        }
+
+        /** ドロップダウンメニューのイベントリスナーを追加 */
+        function addDropdownEventListeners() {
+            document.querySelectorAll('.dropdown-button').forEach(button => {
+                button.addEventListener('click', function(event) {
+                    event.stopPropagation();
+                    const menu = this.nextElementSibling;
+                    // 他のメニューを閉じる
+                    document.querySelectorAll('.dropdown-menu').forEach(m => {
+                        if (m !== menu) m.classList.add('hidden');
+                    });
+                    menu.classList.toggle('hidden');
+                });
+            });
+        }
+        
+        /** モーダルを開く */
+        function openModal() {
+            modal.classList.remove('hidden');
+        }
+
+        /** モーダルを閉じる */
+        function closeModal() {
+            modal.classList.add('hidden');
+        }
+
+        /** カラーパレットを生成 */
+        function setupColorPalette() {
+            const colors = ['#ef4444', '#f97316', '#f59e0b', '#84cc16', '#22c55e', '#10b981', '#14b8a6', '#06b6d4', '#0ea5e9', '#3b82f6', '#6366f1', '#8b5cf6', '#a855f7', '#d946ef', '#ec4899', '#f43f5e'];
+            colorPalette.innerHTML = colors.map(color => 
+                `<div class="h-6 w-6 rounded-full cursor-pointer" style="background-color: ${color};" data-color="${color}"></div>`
+            ).join('');
+        }
+
+        /** モーダルのプレビューを更新 */
+        function updatePreview() {
+            const name = formName.value;
+            const id = formId.value;
+            const initials = name.split(' ').map(n => n[0]).join('').substring(0, 2);
+            
+            iconInitials.textContent = initials || '？';
+            previewName.textContent = name || '氏名';
+            previewId.textContent = id || 'ID';
+        }
+
+        // --- イベントリスナー ---
+        
+        // フィルター
+        searchInput.addEventListener('input', displayEmployees);
+        departmentSelect.addEventListener('change', displayEmployees);
+        statusSelect.addEventListener('change', displayEmployees);
+
+        // モーダル
+        openModalButton.addEventListener('click', openModal);
+        closeModalButton.addEventListener('click', closeModal);
+        cancelButton.addEventListener('click', closeModal);
+        modal.addEventListener('click', (e) => {
+            if (e.target === modal) {
+                closeModal();
+            }
+        });
+
+        // モーダル内プレビュー
+        formName.addEventListener('input', updatePreview);
+        formId.addEventListener('input', updatePreview);
+        colorPalette.addEventListener('click', (e) => {
+            if (e.target.dataset.color) {
+                iconPreview.style.backgroundColor = e.target.dataset.color;
+            }
+        });
+
+        // ドキュメント全体クリックでドロップダウンを閉じる
+        document.addEventListener('click', () => {
+            document.querySelectorAll('.dropdown-menu').forEach(menu => menu.classList.add('hidden'));
+        });
+
+        // --- 初期化 ---
+        document.addEventListener('DOMContentLoaded', () => {
+            displayEmployees();
+            setupColorPalette();
+            updatePreview();
+        });
+
+    </script>
+
+</body>
+</html>
diff --git "a/docs/\347\224\273\351\235\242\346\247\213\346\210\220\350\250\255\350\250\210/\346\227\245\345\240\261\344\270\200\350\246\247\343\203\232\343\203\274\343\202\270.html" "b/docs/\347\224\273\351\235\242\346\247\213\346\210\220\350\250\255\350\250\210/\346\227\245\345\240\261\344\270\200\350\246\247\343\203\232\343\203\274\343\202\270.html"
new file mode 100644
index 000000000..02ada74d7
--- /dev/null
+++ "b/docs/\347\224\273\351\235\242\346\247\213\346\210\220\350\250\255\350\250\210/\346\227\245\345\240\261\344\270\200\350\246\247\343\203\232\343\203\274\343\202\270.html"
@@ -0,0 +1,355 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>日報一覧</title>
+    <!-- Tailwind CSSを読み込む -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Google Fonts (Inter) を読み込む -->
+    <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=Inter:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;700&display=swap" rel="stylesheet">
+    <!-- Ioniconsを読み込む -->
+    <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
+    <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
+    <style>
+        /* フォント設定 */
+        body {
+            font-family: 'Inter', 'Noto Sans JP', sans-serif;
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
+        }
+        /* スクロールバーのスタイル（任意） */
+        ::-webkit-scrollbar {
+            width: 8px;
+        }
+        ::-webkit-scrollbar-track {
+            background: #f1f5f9;
+        }
+        ::-webkit-scrollbar-thumb {
+            background: #94a3b8;
+            border-radius: 4px;
+        }
+        ::-webkit-scrollbar-thumb:hover {
+            background: #64748b;
+        }
+        /* アニメーション */
+        .fade-in {
+            animation: fadeIn 0.5s ease-in-out forwards;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .modal-enter {
+            animation: modal-enter-animation 0.3s ease-out forwards;
+        }
+        @keyframes modal-enter-animation {
+            from { opacity: 0; transform: scale(0.95); }
+            to { opacity: 1; transform: scale(1); }
+        }
+        /* line-clamp for multiline text truncation */
+        .line-clamp-2 {
+            overflow: hidden;
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            line-clamp: 2;
+        }
+        /* スピナーアニメーション */
+        .spinner {
+            animation: spin 1s linear infinite;
+        }
+        @keyframes spin {
+            from { transform: rotate(0deg); }
+            to { transform: rotate(360deg); }
+        }
+    </style>
+</head>
+<body class="bg-gray-100 text-gray-800">
+
+    <div class="flex flex-col min-h-screen">
+
+        <!-- ヘッダー -->
+        <header class="bg-white shadow-md sticky top-0 z-20">
+            <div class="container mx-auto px-4 sm:px-6 lg:px-8">
+                <div class="flex items-center justify-between h-16">
+                    <div class="flex items-center space-x-4">
+                        <div class="bg-indigo-600 p-2 rounded-lg">
+                           <ion-icon name="document-text-outline" class="text-white text-2xl"></ion-icon>
+                        </div>
+                        <h1 class="text-xl font-bold text-gray-900">日報一覧</h1>
+                    </div>
+                    <div class="flex items-center space-x-4">
+                        <a href="トップページ.html" class="text-sm font-medium text-indigo-600 hover:text-indigo-800">&larr; ダッシュボードに戻る</a>
+                        <button class="flex items-center justify-center bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded-lg transition duration-300 ease-in-out transform hover:scale-105">
+                            <ion-icon name="log-out-outline" class="mr-2 text-xl"></ion-icon>
+                            ログアウト
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </header>
+
+        <!-- メインコンテンツ -->
+        <main class="flex-grow container mx-auto p-4 sm:p-6 lg:p-8">
+            
+            <!-- 検索・フィルターバー -->
+            <div class="bg-white p-4 rounded-xl shadow-md mb-6">
+                <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4">
+                    <div class="lg:col-span-2">
+                        <label for="search-user" class="block text-sm font-medium text-gray-700">担当者</label>
+                        <input type="text" id="search-user" class="mt-1 w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" placeholder="山田 太郎">
+                    </div>
+                    <div>
+                        <label for="search-date" class="block text-sm font-medium text-gray-700">日付</label>
+                        <input type="date" id="search-date" class="mt-1 w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
+                    </div>
+                    <div>
+                        <label for="search-product" class="block text-sm font-medium text-gray-700">製品名</label>
+                        <input type="text" id="search-product" class="mt-1 w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" placeholder="製品A-102">
+                    </div>
+                </div>
+            </div>
+
+            <!-- 日報リスト -->
+            <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6">
+                
+                <!-- サンプル日報 1 -->
+                <div class="fade-in bg-white rounded-xl shadow-md p-5 flex flex-col group hover:shadow-xl transition-shadow duration-300">
+                    <div class="flex items-center mb-4 pb-4 border-b">
+                        <div class="h-12 w-12 rounded-full flex-shrink-0 flex items-center justify-center text-white text-xl font-bold mr-4" style="background-color: #a3a8e6;">YT</div>
+                        <div>
+                            <h3 class="font-bold text-gray-900">山田 太郎</h3>
+                            <p class="text-sm text-gray-500">2024年7月8日 (月)</p>
+                        </div>
+                    </div>
+                    <div class="text-sm flex-grow space-y-3">
+                        <p><strong class="w-20 inline-block text-gray-500">製品名:</strong> <span class="font-semibold">製品A-102</span></p>
+                        <p><strong class="w-20 inline-block text-gray-500">生産実績:</strong> <span class="font-semibold">1,050 個</span></p>
+                        <div>
+                            <strong class="inline-block text-gray-500 mb-1">作業内容:</strong>
+                            <p class="text-gray-600 line-clamp-2">組立作業。途中、部品B-5の供給が遅れるトラブルがあったが、他ラインの協力により30分で復旧した。</p>
+                        </div>
+                    </div>
+                    <button class="mt-4 text-sm font-bold text-indigo-600 text-right group-hover:underline">詳細を見る &rarr;</button>
+                </div>
+
+                <!-- サンプル日報 2 -->
+                <div class="fade-in bg-white rounded-xl shadow-md p-5 flex flex-col group hover:shadow-xl transition-shadow duration-300" style="animation-delay: 0.05s;">
+                    <div class="flex items-center mb-4 pb-4 border-b">
+                        <div class="h-12 w-12 rounded-full flex-shrink-0 flex items-center justify-center text-white text-xl font-bold mr-4" style="background-color: #e6a3c8;">SH</div>
+                        <div>
+                            <h3 class="font-bold text-gray-900">佐藤 花子</h3>
+                            <p class="text-sm text-gray-500">2024年7月8日 (月)</p>
+                        </div>
+                    </div>
+                    <div class="text-sm flex-grow space-y-3">
+                        <p><strong class="w-20 inline-block text-gray-500">製品名:</strong> <span class="font-semibold">製品C-301</span></p>
+                        <p><strong class="w-20 inline-block text-gray-500">生産実績:</strong> <span class="font-semibold">800 個</span></p>
+                        <div>
+                            <strong class="inline-block text-gray-500 mb-1">作業内容:</strong>
+                            <p class="text-gray-600 line-clamp-2">一次塗装を担当。塗料の粘度調整に時間を要したが、マニュアル通りの品質を確保。</p>
+                        </div>
+                    </div>
+                    <button class="mt-4 text-sm font-bold text-indigo-600 text-right group-hover:underline">詳細を見る &rarr;</button>
+                </div>
+                
+                <!-- サンプル日報 3 -->
+                <div class="fade-in bg-white rounded-xl shadow-md p-5 flex flex-col group hover:shadow-xl transition-shadow duration-300" style="animation-delay: 0.1s;">
+                    <div class="flex items-center mb-4 pb-4 border-b">
+                        <div class="h-12 w-12 rounded-full flex-shrink-0 flex items-center justify-center text-white text-xl font-bold mr-4" style="background-color: #a3e6c8;">SI</div>
+                        <div>
+                            <h3 class="font-bold text-gray-900">鈴木 一郎</h3>
+                            <p class="text-sm text-gray-500">2024年7月8日 (月)</p>
+                        </div>
+                    </div>
+                     <div class="text-sm flex-grow space-y-3">
+                        <p><strong class="w-20 inline-block text-gray-500">製品名:</strong> <span class="font-semibold">製品A-102</span></p>
+                        <p><strong class="w-20 inline-block text-gray-500">生産実績:</strong> <span class="font-semibold">1,040 / 1,050 (良品/検査数)</span></p>
+                        <div>
+                            <strong class="inline-block text-gray-500 mb-1">作業内容:</strong>
+                            <p class="text-gray-600 line-clamp-2">検査機#1のエラー対応。センサーの汚れが原因と判明し、清掃後は正常に稼働。</p>
+                        </div>
+                    </div>
+                    <button class="mt-4 text-sm font-bold text-indigo-600 text-right group-hover:underline">詳細を見る &rarr;</button>
+                </div>
+            </div>
+        </main>
+
+        <!-- フッター -->
+        <footer class="bg-white mt-8 py-4 px-4 sm:px-6 lg:px-8 border-t border-gray-200">
+            <div class="text-center text-sm text-gray-500">
+                &copy; 2024 生産管理システム. All Rights Reserved.
+            </div>
+        </footer>
+
+        <!-- フローティング追加ボタン -->
+        <button id="add-report-button" class="fixed bottom-8 right-8 bg-indigo-600 hover:bg-indigo-700 text-white w-16 h-16 rounded-full shadow-lg flex items-center justify-center transition-transform transform hover:scale-110 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 z-10">
+            <ion-icon name="create-outline" class="text-3xl"></ion-icon>
+        </button>
+    </div>
+
+    <!-- 日報追加・編集モーダル -->
+    <div id="report-modal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-75 flex items-center justify-center z-30 p-4">
+        <div class="bg-white rounded-xl shadow-2xl w-full max-w-2xl modal-enter">
+            <div class="p-6 border-b border-gray-200 flex justify-between items-center">
+                <h2 class="text-xl font-bold">日報入力</h2>
+                <button id="modal-close-button" class="text-gray-400 hover:text-gray-600">
+                    <ion-icon name="close-outline" class="text-3xl"></ion-icon>
+                </button>
+            </div>
+            <div class="p-6 max-h-[70vh] overflow-y-auto">
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <div>
+                        <label for="form-user" class="block text-sm font-medium text-gray-700">担当者</label>
+                        <input type="text" id="form-user" value="山田 太郎" class="mt-1 w-full bg-gray-100 border-gray-300 rounded-md shadow-sm" readonly>
+                    </div>
+                     <div>
+                        <label for="form-date" class="block text-sm font-medium text-gray-700">日付</label>
+                        <input type="date" id="form-date" class="mt-1 w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
+                    </div>
+                    <div>
+                        <label for="form-product-name" class="block text-sm font-medium text-gray-700">製品名</label>
+                        <input type="text" id="form-product-name" placeholder="製品A-102" class="mt-1 w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
+                    </div>
+                    <div>
+                        <label for="form-production-count" class="block text-sm font-medium text-gray-700">生産実績数</label>
+                        <input type="number" id="form-production-count" placeholder="1050" class="mt-1 w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
+                    </div>
+                    <div class="col-span-1 md:col-span-2">
+                        <div class="flex justify-between items-center">
+                            <label for="form-today-work" class="block text-sm font-medium text-gray-700">今日の作業内容</label>
+                            <button id="ai-format-work-button" class="text-sm text-indigo-600 font-semibold hover:text-indigo-800 flex items-center">
+                                <span class="mr-1">✨</span> AIで清書
+                                <ion-icon id="ai-work-spinner" name="sync-outline" class="hidden ml-2 spinner"></ion-icon>
+                            </button>
+                        </div>
+                        <textarea id="form-today-work" rows="5" class="mt-1 w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" placeholder="箇条書きでOK！&#10;例：&#10;・製品A-102の組立&#10;・部品B-5の供給遅れ（30分ロス）&#10;・1050個完了"></textarea>
+                    </div>
+                     <div class="col-span-1 md:col-span-2">
+                        <div class="flex justify-between items-center">
+                            <label for="form-memo" class="block text-sm font-medium text-gray-700">メモ</label>
+                            <button id="ai-format-memo-button" class="text-sm text-indigo-600 font-semibold hover:text-indigo-800 flex items-center">
+                                <span class="mr-1">✨</span> AIで清書
+                                <ion-icon id="ai-memo-spinner" name="sync-outline" class="hidden ml-2 spinner"></ion-icon>
+                            </button>
+                        </div>
+                        <textarea id="form-memo" rows="3" class="mt-1 w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" placeholder="気づいた点、改善提案など"></textarea>
+                    </div>
+                </div>
+            </div>
+            <div class="p-6 bg-gray-50 rounded-b-xl flex justify-end space-x-4">
+                <button id="modal-cancel-button" class="px-6 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">キャンセル</button>
+                <button id="modal-save-button" class="px-6 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">保存</button>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // モーダル関連のロジック
+        const reportModal = document.getElementById('report-modal');
+        const openModalButton = document.getElementById('add-report-button');
+        const closeModalButton = document.getElementById('modal-close-button');
+        const cancelButton = document.getElementById('modal-cancel-button');
+
+        function openModal() {
+            reportModal.classList.remove('hidden');
+        }
+
+        function closeModal() {
+            reportModal.classList.add('hidden');
+        }
+
+        openModalButton.addEventListener('click', openModal);
+        closeModalButton.addEventListener('click', closeModal);
+        cancelButton.addEventListener('click', closeModal);
+        reportModal.addEventListener('click', (e) => {
+            if (e.target === reportModal) {
+                closeModal();
+            }
+        });
+        
+        // 今日の日付をセット
+        document.getElementById('form-date').valueAsDate = new Date();
+
+        // --- Gemini API 連携 ---
+        const aiFormatWorkButton = document.getElementById('ai-format-work-button');
+        const aiFormatMemoButton = document.getElementById('ai-format-memo-button');
+        const workTextarea = document.getElementById('form-today-work');
+        const memoTextarea = document.getElementById('form-memo');
+        const workSpinner = document.getElementById('ai-work-spinner');
+        const memoSpinner = document.getElementById('ai-memo-spinner');
+
+        /**
+         * Gemini APIを呼び出してテキストを清書する
+         * @param {string} textToFormat - 清書する元のテキスト
+         * @param {HTMLTextAreaElement} targetTextarea - 結果を反映するテキストエリア
+         * @param {HTMLElement} spinner - ローディング表示用のスピナー要素
+         */
+        async function formatTextWithAI(textToFormat, targetTextarea, spinner) {
+            if (!textToFormat.trim()) {
+                alert('テキストが入力されていません。');
+                return;
+            }
+
+            // スピナーを表示し、ボタンを無効化
+            spinner.classList.remove('hidden');
+            targetTextarea.disabled = true;
+            aiFormatWorkButton.disabled = true;
+            aiFormatMemoButton.disabled = true;
+
+            const prompt = `あなたは工場の優秀なアシスタントです。以下の作業メモを、丁寧で分かりやすい日報の文章に清書してください。箇条書きは自然な文章にまとめ、専門用語は適切に使用してください。報告として簡潔かつ要点を押さえた文章を生成してください。\n\n--- 入力メモ ---\n${textToFormat}\n\n--- 清書後 ---\n`;
+            
+            try {
+                let chatHistory = [];
+                chatHistory.push({ role: "user", parts: [{ text: prompt }] });
+                const payload = { contents: chatHistory };
+                const apiKey = ""; // APIキーはCanvas環境で自動的に提供されます
+                const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent?key=${apiKey}`;
+                
+                const response = await fetch(apiUrl, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(payload)
+                });
+                
+                if (!response.ok) {
+                    throw new Error(`APIエラー: ${response.status}`);
+                }
+                
+                const result = await response.json();
+                
+                if (result.candidates && result.candidates.length > 0 &&
+                    result.candidates[0].content && result.candidates[0].content.parts &&
+                    result.candidates[0].content.parts.length > 0) {
+                    const formattedText = result.candidates[0].content.parts[0].text;
+                    targetTextarea.value = formattedText;
+                } else {
+                    throw new Error('AIからの応答が予期した形式ではありません。');
+                }
+
+            } catch (error) {
+                console.error("AIによる清書中にエラーが発生しました:", error);
+                alert("AIによる清書に失敗しました。しばらくしてからもう一度お試しください。");
+            } finally {
+                // スピナーを非表示にし、ボタンを有効化
+                spinner.classList.add('hidden');
+                targetTextarea.disabled = false;
+                aiFormatWorkButton.disabled = false;
+                aiFormatMemoButton.disabled = false;
+            }
+        }
+
+        aiFormatWorkButton.addEventListener('click', () => {
+            formatTextWithAI(workTextarea.value, workTextarea, workSpinner);
+        });
+
+        aiFormatMemoButton.addEventListener('click', () => {
+            formatTextWithAI(memoTextarea.value, memoTextarea, memoSpinner);
+        });
+
+    </script>
+
+</body>
+</html>
diff --git "a/docs/\347\224\273\351\235\242\346\247\213\346\210\220\350\250\255\350\250\210/\347\224\237\347\224\243\346\225\260\347\256\241\347\220\206\343\203\232\343\203\274\343\202\270.html" "b/docs/\347\224\273\351\235\242\346\247\213\346\210\220\350\250\255\350\250\210/\347\224\237\347\224\243\346\225\260\347\256\241\347\220\206\343\203\232\343\203\274\343\202\270.html"
new file mode 100644
index 000000000..58fa8ee59
--- /dev/null
+++ "b/docs/\347\224\273\351\235\242\346\247\213\346\210\220\350\250\255\350\250\210/\347\224\237\347\224\243\346\225\260\347\256\241\347\220\206\343\203\232\343\203\274\343\202\270.html"
@@ -0,0 +1,485 @@
+<!DOCTYPE html>
+<html lang="ja">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>生産数管理</title>
+    <!-- Tailwind CSSを読み込む -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Google Fonts (Inter) を読み込む -->
+    <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=Inter:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;700&display=swap"
+        rel="stylesheet">
+    <!-- Ioniconsを読み込む -->
+    <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
+    <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
+    <style>
+        /* フォント設定 */
+        body {
+            font-family: 'Inter', 'Noto Sans JP', sans-serif;
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
+        }
+
+        /* スクロールバーのスタイル（任意） */
+        ::-webkit-scrollbar {
+            width: 8px;
+        }
+
+        ::-webkit-scrollbar-track {
+            background: #f1f5f9;
+        }
+
+        ::-webkit-scrollbar-thumb {
+            background: #94a3b8;
+            border-radius: 4px;
+        }
+
+        ::-webkit-scrollbar-thumb:hover {
+            background: #64748b;
+        }
+
+        /* アニメーション */
+        .fade-in {
+            animation: fadeIn 0.5s ease-in-out forwards;
+        }
+
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+                transform: translateY(10px);
+            }
+
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        .bar-grow {
+            animation: grow 0.5s ease-out forwards;
+            transform-origin: bottom;
+        }
+
+        @keyframes grow {
+            from {
+                transform: scaleY(0);
+            }
+
+            to {
+                transform: scaleY(1);
+            }
+        }
+
+        .chart-line {
+            stroke-dasharray: 1000;
+            stroke-dashoffset: 1000;
+            animation: dash 1.5s ease-out forwards;
+        }
+
+        @keyframes dash {
+            to {
+                stroke-dashoffset: 0;
+            }
+        }
+    </style>
+</head>
+
+<body class="bg-gray-100 text-gray-800">
+
+    <div class="flex flex-col min-h-screen">
+
+        <!-- ヘッダー -->
+        <header class="bg-white shadow-md sticky top-0 z-20">
+            <div class="container mx-auto px-4 sm:px-6 lg:px-8">
+                <div class="flex items-center justify-between h-16">
+                    <div class="flex items-center space-x-4">
+                        <div class="bg-indigo-600 p-2 rounded-lg">
+                            <ion-icon name="stats-chart-outline" class="text-white text-2xl"></ion-icon>
+                        </div>
+                        <h1 class="text-xl font-bold text-gray-900">生産数管理</h1>
+                    </div>
+                    <div class="flex items-center space-x-4">
+                        <a href="#" class="text-sm font-medium text-indigo-600 hover:text-indigo-800">&larr;
+                            ダッシュボードに戻る</a>
+                        <button
+                            class="flex items-center justify-center bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded-lg transition duration-300 ease-in-out transform hover:scale-105">
+                            <ion-icon name="log-out-outline" class="mr-2 text-xl"></ion-icon>
+                            ログアウト
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </header>
+
+        <!-- メインコンテンツ -->
+        <main class="flex-grow container mx-auto p-4 sm:p-6 lg:p-8">
+
+            <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
+                <!-- 左側コンテンツ -->
+                <div class="lg:col-span-3 flex flex-col gap-6">
+                    <!-- 生産推移グラフ -->
+                    <div class="bg-white p-6 rounded-xl shadow-md fade-in flex-grow flex flex-col">
+                        <div class="flex justify-between items-center mb-4">
+                            <h2 class="text-2xl font-bold">生産推移</h2>
+                            <div id="chart-toggle" class="flex space-x-1 bg-gray-200 p-1 rounded-lg">
+                                <button data-period="week"
+                                    class="chart-btn bg-white text-indigo-600 px-3 py-1 rounded-md text-sm font-semibold">週間</button>
+                                <button data-period="month"
+                                    class="chart-btn text-gray-600 px-3 py-1 rounded-md text-sm font-semibold">月間</button>
+                            </div>
+                        </div>
+                        <div class="flex justify-end items-center space-x-4 text-sm mb-2">
+                            <div class="flex items-center">
+                                <div class="w-3 h-3 bg-sky-300 rounded-sm mr-2"></div>計画数
+                            </div>
+                            <div class="flex items-center">
+                                <div class="w-3 h-3 bg-indigo-500 rounded-sm mr-2"></div>実績数
+                            </div>
+                            <div class="flex items-center">
+                                <div class="w-3 h-1 bg-red-500 mr-2"></div>不良率
+                            </div>
+                        </div>
+                        <div id="combo-chart-container" class="mt-4 relative flex-grow min-h-[20rem]">
+                            <!-- SVGグラフはJSで描画 -->
+                        </div>
+                    </div>
+                    <!-- 下段グラフ -->
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                        <div class="bg-white rounded-xl shadow-md p-6 fade-in">
+                            <h3 class="font-bold mb-2 text-lg">期間内 良品率</h3>
+                            <div class="flex items-center">
+                                <div id="yield-chart-container" class="relative w-32 h-32 flex-shrink-0"></div>
+                                <div class="ml-6">
+                                    <p class="text-sm"><span class="font-semibold">総生産数:</span> <span
+                                            id="yield-total">0</span></p>
+                                    <p class="text-sm"><span class="font-semibold">不良品:</span> <span id="yield-fail"
+                                            class="text-red-600">0</span></p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="bg-white rounded-xl shadow-md p-6 fade-in">
+                            <h3 class="font-bold mb-2 text-lg">期間内 不良品内訳</h3>
+                            <div id="fail-reasons-container" class="space-y-3 text-sm">
+                                <!-- 不良品内訳はJSで描画 -->
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!-- 右側: 今日の進捗 -->
+                <div class="lg:col-span-1 bg-white p-6 rounded-xl shadow-md fade-in flex flex-col">
+                    <h2 class="text-2xl font-bold mb-4 flex-shrink-0">今日の進捗</h2>
+                    <!-- PC表示 (縦長) -->
+                    <div class="hidden lg:flex flex-col items-center justify-between flex-grow pt-4">
+                        <div class="text-center w-full">
+                            <p class="text-lg font-semibold">生産計画</p>
+                            <p id="today-plan-lg" class="text-4xl font-bold">0</p>
+                        </div>
+                        <div class="relative w-20 flex-grow bg-gray-200 rounded-full my-4">
+                            <div id="today-progress-bar-lg"
+                                class="absolute bottom-0 w-full bg-gradient-to-t from-blue-500 to-cyan-400 rounded-full transition-all duration-500"
+                                style="height: 0%;"></div>
+                        </div>
+                        <div id="today-progress-text-lg" class="text-5xl font-bold mb-4">0%</div>
+                        <div class="text-center w-full">
+                            <p class="text-lg font-semibold">実績</p>
+                            <p id="today-actual-lg" class="text-4xl font-bold text-indigo-600">0</p>
+                        </div>
+                    </div>
+                    <!-- スマホ表示 (横長) -->
+                    <div class="lg:hidden">
+                        <div class="flex justify-between items-baseline mb-2">
+                            <div>
+                                <p class="font-semibold">実績</p>
+                                <p id="today-actual-sm" class="text-2xl font-bold text-indigo-600">0</p>
+                            </div>
+                            <div>
+                                <p class="text-right font-semibold">計画</p>
+                                <p id="today-plan-sm" class="text-2xl font-bold">0</p>
+                            </div>
+                        </div>
+                        <div class="w-full bg-gray-200 rounded-full h-6">
+                            <div id="today-progress-bar-sm"
+                                class="bg-gradient-to-r from-blue-500 to-cyan-400 h-6 rounded-full text-center text-white font-bold flex items-center justify-center"
+                                style="width: 0%;">
+                                <span id="today-progress-text-sm">0%</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- テーブル -->
+            <div class="mt-6 bg-white rounded-xl shadow-md p-6 fade-in" style="animation-delay: 0.1s;">
+                <div class="flex flex-col md:flex-row justify-between items-center mb-4">
+                    <h2 class="text-2xl font-bold">生産レポート一覧</h2>
+                    <div class="flex items-center space-x-2 mt-4 md:mt-0">
+                        <input type="date" id="filter-date" class="border-gray-300 rounded-md shadow-sm">
+                        <input type="text" id="filter-name" placeholder="製品名で検索"
+                            class="border-gray-300 rounded-md shadow-sm">
+                    </div>
+                </div>
+
+                <div class="overflow-x-auto">
+                    <table class="w-full text-sm text-left">
+                        <thead class="text-xs text-gray-700 uppercase bg-gray-50">
+                            <tr>
+                                <th class="px-6 py-3">日付</th>
+                                <th class="px-6 py-3">製品名</th>
+                                <th class="px-6 py-3">計画数</th>
+                                <th class="px-6 py-3">実績数</th>
+                                <th class="px-6 py-3 min-w-[200px]">達成率</th>
+                                <th class="px-6 py-3">不良数</th>
+                                <th class="px-6 py-3">担当者</th>
+                            </tr>
+                        </thead>
+                        <tbody id="report-table-body"></tbody>
+                    </table>
+                    <div id="no-results" class="hidden text-center py-12">
+                        <ion-icon name="sad-outline" class="text-5xl text-gray-400 mx-auto"></ion-icon>
+                        <p class="mt-4 text-lg font-medium text-gray-600">該当するレポートが見つかりませんでした。</p>
+                    </div>
+                </div>
+            </div>
+
+        </main>
+    </div>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            const sampleData = [
+                { date: '2025-08-04', name: '製品A-102', plan: 2000, actual: 1980, defective: 35, employee: '山田 太郎', defective_details: [{ reason: '傷', count: 20 }, { reason: '寸法不良', count: 15 }] },
+                { date: '2025-08-04', name: '製品C-301', plan: 1500, actual: 1450, defective: 21, employee: '佐藤 花子', defective_details: [{ reason: '塗装ムラ', count: 15 }, { reason: '異物混入', count: 6 }] },
+                { date: '2025-08-04', name: '製品B-205', plan: 1000, actual: 1090, defective: 12, employee: '鈴木 一郎', defective_details: [{ reason: '傷', count: 12 }] },
+                { date: '2025-08-03', name: '製品A-102', plan: 2000, actual: 2010, defective: 40, employee: '山田 太郎', defective_details: [{ reason: '傷', count: 25 }, { reason: '寸法不良', count: 15 }] },
+                { date: '2025-08-02', name: '製品D-401', plan: 500, actual: 480, defective: 5, employee: '高橋 次郎', defective_details: [{ reason: '傷', count: 5 }] },
+                { date: '2025-08-01', name: '製品A-102', plan: 2000, actual: 1950, defective: 30, employee: '山田 太郎', defective_details: [{ reason: '傷', count: 18 }, { reason: '寸法不良', count: 12 }] },
+                { date: '2025-07-31', name: '製品A-102', plan: 2000, actual: 2050, defective: 45, employee: '山田 太郎', defective_details: [{ reason: '傷', count: 30 }, { reason: '寸法不良', count: 15 }] },
+                { date: '2025-07-30', name: '製品C-301', plan: 1500, actual: 1510, defective: 20, employee: '佐藤 花子', defective_details: [{ reason: '塗装ムラ', count: 20 }] },
+                { date: '2025-07-29', name: '製品B-205', plan: 1000, actual: 980, defective: 15, employee: '鈴木 一郎', defective_details: [{ reason: '傷', count: 15 }] },
+            ];
+
+            const tableBody = document.getElementById('report-table-body');
+            const filterDate = document.getElementById('filter-date');
+            const filterName = document.getElementById('filter-name');
+            const noResultsDiv = document.getElementById('no-results');
+            const chartToggle = document.getElementById('chart-toggle');
+
+            function renderTable(data) {
+                tableBody.innerHTML = '';
+                if (data.length === 0) {
+                    noResultsDiv.style.display = 'block';
+                    return;
+                }
+                noResultsDiv.style.display = 'none';
+
+                data.forEach(item => {
+                    const achievementRate = ((item.actual / item.plan) * 100).toFixed(2);
+                    const defectiveRate = item.actual > 0 ? ((item.defective / item.actual) * 100).toFixed(2) : 0;
+
+                    let rateColor = 'bg-green-500';
+                    if (achievementRate < 90) rateColor = 'bg-red-500';
+                    else if (achievementRate < 100) rateColor = 'bg-yellow-500';
+
+                    const row = `
+                        <tr class="report-row bg-white border-b" data-date="${item.date}" data-name="${item.name.toLowerCase()}">
+                            <td class="px-6 py-4 font-medium">${item.date}</td>
+                            <td class="px-6 py-4 font-bold">${item.name}</td>
+                            <td class="px-6 py-4">${item.plan.toLocaleString()}</td>
+                            <td class="px-6 py-4 font-semibold">${item.actual.toLocaleString()}</td>
+                            <td class="px-6 py-4">
+                                <div class="flex items-center">
+                                    <div class="w-full bg-gray-200 rounded-full h-4 mr-2"><div class="${rateColor} h-4 rounded-full" style="width: ${Math.min(achievementRate, 100)}%"></div></div>
+                                    <span class="font-bold w-16 text-right">${achievementRate}%</span>
+                                </div>
+                            </td>
+                            <td class="px-6 py-4">
+                                <span class="${defectiveRate > 2 ? 'text-red-600 font-bold' : ''}">${item.defective.toLocaleString()}</span>
+                                <span class="text-xs text-gray-500"> (${defectiveRate}%)</span>
+                            </td>
+                            <td class="px-6 py-4">${item.employee}</td>
+                        </tr>`;
+                    tableBody.innerHTML += row;
+                });
+            }
+
+            function filterData() {
+                const dateValue = filterDate.value;
+                const nameValue = filterName.value.toLowerCase();
+
+                const filteredData = sampleData.filter(item => {
+                    const dateMatch = !dateValue || item.date === dateValue;
+                    const nameMatch = item.name.toLowerCase().includes(nameValue);
+                    return dateMatch && nameMatch;
+                });
+
+                renderTable(filteredData);
+            }
+
+            function createDonutChart(containerId, percentage, colorClass) {
+                const container = document.getElementById(containerId);
+                const strokeDasharray = `${percentage}, 100`;
+                container.innerHTML = `
+                    <svg class="w-full h-full" viewBox="0 0 36 36">
+                        <path class="text-gray-200" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="currentColor" stroke-width="3.8" />
+                        <path class="${colorClass}" stroke-dasharray="${strokeDasharray}" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="currentColor" stroke-width="3.8" stroke-linecap="round" />
+                    </svg>
+                    <div class="absolute inset-0 flex flex-col items-center justify-center">
+                        <span class="text-3xl font-bold">${percentage.toFixed(1)}%</span>
+                    </div>
+                `;
+            }
+
+            function renderCharts(period = 'week') {
+                const today = new Date('2025-08-04');
+                const todayString = today.toISOString().split('T')[0];
+                let dataForChart = [];
+
+                if (period === 'week') {
+                    const oneWeekAgo = new Date(today);
+                    oneWeekAgo.setDate(today.getDate() - 6);
+                    dataForChart = sampleData.filter(d => new Date(d.date) >= oneWeekAgo && new Date(d.date) <= today);
+                } else { // month
+                    const oneMonthAgo = new Date(today);
+                    oneMonthAgo.setMonth(today.getMonth() - 1);
+                    dataForChart = sampleData.filter(d => new Date(d.date) >= oneMonthAgo && new Date(d.date) <= today);
+                }
+
+                // 複合グラフ
+                const groupedData = dataForChart.reduce((acc, curr) => {
+                    const date = curr.date;
+                    if (!acc[date]) {
+                        acc[date] = { plan: 0, actual: 0, defective: 0 };
+                    }
+                    acc[date].plan += curr.plan;
+                    acc[date].actual += curr.actual;
+                    acc[date].defective += curr.defective;
+                    return acc;
+                }, {});
+
+                const sortedDates = Object.keys(groupedData).sort((a, b) => new Date(a) - new Date(b));
+                const maxVal = Math.max(...Object.values(groupedData).map(d => Math.max(d.plan, d.actual)));
+                const maxDefectiveRate = Math.max(...Object.values(groupedData).map(d => d.actual > 0 ? (d.defective / d.actual * 100) : 0)) || 10;
+
+                const comboChartContainer = document.getElementById('combo-chart-container');
+                const width = comboChartContainer.clientWidth;
+                const height = comboChartContainer.clientHeight;
+                const padding = 40;
+
+                const bars = sortedDates.map((date, i) => {
+                    const x = (i / sortedDates.length) * (width - padding) + (padding / 2);
+                    const barWidth = (width - padding) / sortedDates.length * 0.6;
+
+                    const planHeight = (groupedData[date].plan / maxVal) * (height - padding * 2);
+                    const actualHeight = (groupedData[date].actual / maxVal) * (height - padding * 2);
+
+                    return `
+                        <rect x="${x - barWidth / 2}" y="${height - padding - planHeight}" width="${barWidth / 2}" height="${planHeight}" fill="#7dd3fc" class="bar-grow" />
+                        <rect x="${x}" y="${height - padding - actualHeight}" width="${barWidth / 2}" height="${actualHeight}" fill="#6366f1" class="bar-grow" />
+                    `;
+                }).join('');
+
+                const pointsDefective = sortedDates.map((date, i) => {
+                    const x = (i / sortedDates.length) * (width - padding) + (padding / 2);
+                    const rate = groupedData[date].actual > 0 ? (groupedData[date].defective / groupedData[date].actual * 100) : 0;
+                    const y = height - (rate / maxDefectiveRate * (height - padding * 2)) - padding;
+                    return `${x},${y}`;
+                }).join(' ');
+
+                const labels = sortedDates.map((date, i) => {
+                    const x = (i / sortedDates.length) * (width - padding) + (padding / 2);
+                    const dateObj = new Date(date);
+                    const label = `${dateObj.getMonth() + 1}/${dateObj.getDate()}`;
+                    return `<text x="${x}" y="${height - 25}" text-anchor="middle" font-size="12" fill="#6b7280">${label}</text>`;
+                }).join('');
+
+                comboChartContainer.innerHTML = `
+                    <svg width="100%" height="100%" viewBox="0 0 ${width} ${height}">
+                        <g class="bars">${bars}</g>
+                        <polyline class="chart-line" fill="none" stroke="#ef4444" stroke-width="3" points="${pointsDefective}" />
+                        <g class="labels">${labels}</g>
+                        <line x1="${padding}" y1="${height - padding}" x2="${width - padding}" y2="${height - padding}" stroke="#e5e7eb" />
+                        <text x="${width - padding + 5}" y="${padding}" font-size="12" fill="#ef4444">${maxDefectiveRate.toFixed(0)}%</text>
+                        <text x="${width - padding + 5}" y="${height - padding}" font-size="12" fill="#ef4444">0%</text>
+                    </svg>`;
+
+                // ドーナツグラフと不良品内訳
+                const totalActual = dataForChart.reduce((sum, d) => sum + d.actual, 0);
+                const totalDefective = dataForChart.reduce((sum, d) => sum + d.defective, 0);
+                const totalPass = totalActual - totalDefective;
+                const yieldRate = totalActual > 0 ? (totalPass / totalActual) * 100 : 0;
+
+                createDonutChart('yield-chart-container', yieldRate, 'text-green-500');
+                document.getElementById('yield-total').textContent = totalActual.toLocaleString();
+                document.getElementById('yield-fail').textContent = totalDefective.toLocaleString();
+
+                // 不良品内訳
+                const failReasonsContainer = document.getElementById('fail-reasons-container');
+                if (totalDefective > 0) {
+                    const reasonCounts = dataForChart.flatMap(d => d.defective_details || []).reduce((acc, curr) => {
+                        acc[curr.reason] = (acc[curr.reason] || 0) + curr.count;
+                        return acc;
+                    }, {});
+                    const sortedReasons = Object.entries(reasonCounts).sort(([, a], [, b]) => b - a);
+                    failReasonsContainer.innerHTML = sortedReasons.map(([reason, count]) => {
+                        const percentage = ((count / totalDefective) * 100).toFixed(0);
+                        return `
+                            <div>
+                                <div class="flex justify-between mb-1">
+                                    <span class="font-medium text-gray-700">${reason}</span>
+                                    <span class="text-gray-500">${count}件</span>
+                                </div>
+                                <div class="w-full bg-gray-200 rounded-full h-2.5">
+                                    <div class="bg-red-500 h-2.5 rounded-full" style="width: ${percentage}%"></div>
+                                </div>
+                            </div>
+                        `;
+                    }).join('');
+                } else {
+                    failReasonsContainer.innerHTML = `<p class="text-gray-500 text-center">不良品はありませんでした。</p>`;
+                }
+
+                // 本日の進捗グラフ
+                const todayData = sampleData.filter(d => d.date === todayString);
+                const todayPlan = todayData.reduce((sum, d) => sum + d.plan, 0);
+                const todayActual = todayData.reduce((sum, d) => sum + d.actual, 0);
+                const todayProgress = todayPlan > 0 ? (todayActual / todayPlan) * 100 : 0;
+
+                document.getElementById('today-progress-bar-lg').style.height = `${Math.min(todayProgress, 100)}%`;
+                document.getElementById('today-progress-text-lg').textContent = `${todayProgress.toFixed(1)}%`;
+                document.getElementById('today-plan-lg').textContent = todayPlan.toLocaleString();
+                document.getElementById('today-actual-lg').textContent = todayActual.toLocaleString();
+
+                document.getElementById('today-progress-bar-sm').style.width = `${Math.min(todayProgress, 100)}%`;
+                document.getElementById('today-progress-text-sm').textContent = `${todayProgress.toFixed(1)}%`;
+                document.getElementById('today-plan-sm').textContent = todayPlan.toLocaleString();
+                document.getElementById('today-actual-sm').textContent = todayActual.toLocaleString();
+            }
+
+            chartToggle.addEventListener('click', (e) => {
+                if (e.target.tagName === 'BUTTON') {
+                    chartToggle.querySelectorAll('button').forEach(btn => {
+                        btn.classList.remove('bg-white', 'text-indigo-600');
+                        btn.classList.add('text-gray-600');
+                    });
+                    e.target.classList.add('bg-white', 'text-indigo-600');
+                    e.target.classList.remove('text-gray-600');
+                    renderCharts(e.target.dataset.period);
+                }
+            });
+
+            filterDate.addEventListener('input', filterData);
+            filterName.addEventListener('input', filterData);
+
+            // 初期表示
+            renderTable(sampleData);
+            setTimeout(() => renderCharts('week'), 100);
+        });
+    </script>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/docs/\347\224\273\351\235\242\346\247\213\346\210\220\350\250\255\350\250\210/\347\224\237\347\224\243\346\251\237\346\242\260\343\202\265\343\202\244\343\203\215\343\203\274\343\202\270.html" "b/docs/\347\224\273\351\235\242\346\247\213\346\210\220\350\250\255\350\250\210/\347\224\237\347\224\243\346\251\237\346\242\260\343\202\265\343\202\244\343\203\215\343\203\274\343\202\270.html"
new file mode 100644
index 000000000..a4c9975d8
--- /dev/null
+++ "b/docs/\347\224\273\351\235\242\346\247\213\346\210\220\350\250\255\350\250\210/\347\224\237\347\224\243\346\251\237\346\242\260\343\202\265\343\202\244\343\203\215\343\203\274\343\202\270.html"
@@ -0,0 +1,261 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <!-- 5分ごとに自動でページをリフレッシュ -->
+    <meta http-equiv="refresh" content="300">
+    <title>工場ダッシュボード</title>
+    <!-- Tailwind CSSを読み込む -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Google Fonts (Inter) を読み込む -->
+    <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=Inter:wght@400;500;600;700;900&family=Noto+Sans+JP:wght@400;500;700;900&display=swap" rel="stylesheet">
+    <!-- Ioniconsを読み込む -->
+    <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
+    <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
+    <style>
+        /* フォント設定 */
+        body {
+            font-family: 'Inter', 'Noto Sans JP', sans-serif;
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
+            /* スクロールバーを非表示にする */
+            overflow: hidden;
+        }
+        /* エヴァ風アラートのアニメーション */
+        .alert-bg {
+            background-image: repeating-linear-gradient(-45deg, #f59e0b, #f59e0b 25px, #1f2937 25px, #1f2937 50px);
+        }
+        .alert-flash {
+            animation: flash 1s infinite;
+        }
+        @keyframes flash {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.5; }
+        }
+    </style>
+</head>
+<body class="bg-gray-900 text-white h-screen flex flex-col">
+
+    <!-- ヘッダー: 時計とタイトル -->
+    <header class="p-4 md:p-6 flex-shrink-0">
+        <div class="flex justify-between items-center">
+            <div class="flex items-center space-x-6">
+                <h1 class="text-5xl font-black tracking-wider">工場ダッシュボード</h1>
+                <!-- デバッグ用ボタン -->
+                <div class="flex items-center space-x-2 pt-2">
+                    <button id="debug-error-btn" class="bg-red-500 hover:bg-red-600 text-white text-xs px-3 py-1 rounded-md">デバッグ: エラー発生</button>
+                    <button id="debug-warning-btn" class="bg-yellow-500 hover:bg-yellow-600 text-black text-xs px-3 py-1 rounded-md">デバッグ: 警告発生</button>
+                    <button id="debug-normal-btn" class="bg-green-500 hover:bg-green-600 text-white text-xs px-3 py-1 rounded-md">デバッグ: 正常化</button>
+                </div>
+            </div>
+            <div id="clock" class="text-5xl font-bold text-right">
+                <p id="time" class="tracking-widest">11:52</p>
+                <p id="date" class="text-2xl mt-1">2025/07/14 (Mon)</p>
+            </div>
+        </div>
+    </header>
+
+    <!-- メインコンテンツ: 2カラムレイアウト -->
+    <main class="flex-grow grid grid-cols-1 xl:grid-cols-2 gap-6 p-4 md:p-6 overflow-hidden">
+        
+        <!-- 左カラム: 生産機械状況 -->
+        <div class="flex flex-col overflow-hidden bg-gray-800 rounded-2xl p-6">
+            <h2 class="text-4xl font-bold mb-4 flex-shrink-0">機械状況</h2>
+            <div class="flex-grow flex flex-col space-y-6">
+                <!-- 機械名とステータス -->
+                <div class="flex justify-between items-center">
+                    <h3 class="text-3xl font-bold">自動表層バネどめ機</h3>
+                    <span id="machine-status" class="px-4 py-2 text-xl font-semibold rounded-full bg-green-500 text-green-900">正常</span>
+                </div>
+                <!-- データグリッド -->
+                <div class="grid grid-cols-2 gap-4 text-center">
+                    <div class="bg-gray-900 p-4 rounded-lg">
+                        <p class="text-lg text-gray-400">本日の稼働時間</p>
+                        <p class="text-5xl font-black">8<span class="text-3xl">h</span> 25<span class="text-3xl">m</span></p>
+                    </div>
+                    <div class="bg-gray-900 p-4 rounded-lg">
+                        <p class="text-lg text-gray-400">本日の生産数</p>
+                        <p class="text-5xl font-black">1,520</p>
+                    </div>
+                    <div class="bg-gray-900 p-4 rounded-lg">
+                        <p class="text-lg text-gray-400">最終点検日</p>
+                        <p class="text-4xl font-bold">2024/06/15</p>
+                    </div>
+                    <div class="bg-gray-900 p-4 rounded-lg">
+                        <p class="text-lg text-gray-400">次回点検日</p>
+                        <p class="text-4xl font-bold">2024/09/15</p>
+                    </div>
+                </div>
+                <!-- エラーログ -->
+                <div class="flex-grow flex flex-col overflow-hidden">
+                    <h3 class="text-2xl font-bold mb-2">最新エラーログ</h3>
+                    <div id="error-log-list" class="space-y-2 text-lg overflow-y-auto">
+                        <div class="flex justify-between items-center bg-gray-900 p-3 rounded-md">
+                            <div><p class="font-semibold text-gray-300">I-001: 起動シーケンス完了</p></div>
+                            <span class="text-sm text-gray-400 whitespace-nowrap">08:00:05</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- 右カラム: 画像検査ステータス -->
+        <div class="flex flex-col overflow-hidden bg-gray-800 rounded-2xl p-6">
+            <h2 class="text-4xl font-bold mb-4 flex-shrink-0">画像検査</h2>
+            <div class="flex-grow flex flex-col space-y-6">
+                <!-- 全体ステータス -->
+                <div class="text-center">
+                    <p class="text-2xl text-green-400 font-bold">システム正常</p>
+                    <div class="w-full bg-gray-700 rounded-full h-2.5 mt-2"><div class="bg-green-500 h-2.5 rounded-full" style="width: 100%"></div></div>
+                </div>
+                <!-- ライブカメラフィード -->
+                <div class="bg-black rounded-lg aspect-video flex items-center justify-center"><p class="text-gray-500 text-lg">LIVE CAMERA FEED</p></div>
+                <!-- 主要メトリクス -->
+                <div class="grid grid-cols-2 gap-4 text-center">
+                    <div class="bg-gray-900 p-4 rounded-lg"><p class="text-lg text-gray-400">良品率</p><p class="text-5xl font-black text-green-400">99.8%</p></div>
+                    <div class="bg-gray-900 p-4 rounded-lg"><p class="text-lg text-gray-400">検査総数</p><p class="text-5xl font-black">1,250</p></div>
+                </div>
+                <!-- ログ -->
+                <div class="flex-grow overflow-y-auto">
+                    <h3 class="text-2xl font-bold mb-2">最新検査ログ</h3>
+                    <div class="space-y-2 text-lg">
+                        <div class="flex justify-between items-center bg-gray-900 p-3 rounded-md"><p>ID: A-102-1250</p><p>11:55:12</p><span class="font-bold text-green-400">PASS</span></div>
+                        <div class="flex justify-between items-center bg-gray-900 p-3 rounded-md"><p>ID: A-102-1249</p><p>11:55:08</p><span class="font-bold text-green-400">PASS</span></div>
+                        <div class="flex justify-between items-center bg-red-900/50 p-3 rounded-md"><p>ID: A-102-1248</p><p>11:55:04</p><span class="font-bold text-red-400">FAIL</span></div>
+                        <div class="flex justify-between items-center bg-gray-900 p-3 rounded-md"><p>ID: A-102-1247</p><p>11:55:01</p><span class="font-bold text-green-400">PASS</span></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <!-- エヴァ風アラート画面 -->
+    <div id="evangelion-alert" class="hidden fixed inset-0 bg-black/80 z-50 flex items-center justify-center p-4">
+        <div class="alert-bg w-full h-full absolute inset-0 opacity-20"></div>
+        <div class="text-center z-10">
+            <h2 class="text-9xl md:text-[12rem] font-black text-red-500 alert-flash tracking-widest" style="line-height: 1;">警告</h2>
+            <div class="mt-8 bg-black/80 p-6 rounded-lg border-4 border-yellow-400">
+                <p id="alert-error-code" class="text-6xl font-bold text-yellow-400">モータートルク異常</p>
+                <p id="alert-error-message" class="text-3xl mt-4 text-white">モーターの負荷が規定値を超えました。</p>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // 時計の表示を更新する関数
+        function updateClock() {
+            const now = new Date();
+            const timeElement = document.getElementById('time');
+            const dateElement = document.getElementById('date');
+            
+            const hours = String(now.getHours()).padStart(2, '0');
+            const minutes = String(now.getMinutes()).padStart(2, '0');
+            const seconds = String(now.getSeconds()).padStart(2, '0');
+            
+            const year = now.getFullYear();
+            const month = String(now.getMonth() + 1).padStart(2, '0');
+            const day = String(now.getDate()).padStart(2, '0');
+            const week = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'][now.getDay()];
+
+            timeElement.textContent = `${hours}:${minutes}`;
+            dateElement.textContent = `${year}/${month}/${day} (${week})`;
+            
+            return `${hours}:${minutes}:${seconds}`;
+        }
+
+        // 1秒ごとに時計を更新
+        setInterval(updateClock, 1000);
+        updateClock();
+        
+        // エヴァ風アラートのロジック
+        const alertScreen = document.getElementById('evangelion-alert');
+        const alertErrorCode = document.getElementById('alert-error-code');
+        const alertErrorMessage = document.getElementById('alert-error-message');
+        const errorLogList = document.getElementById('error-log-list');
+        const machineStatus = document.getElementById('machine-status');
+
+        function showErrorAlert(code, message) {
+            alertErrorCode.textContent = code;
+            alertErrorMessage.textContent = message;
+            alertScreen.classList.remove('hidden');
+
+            // 5秒後にアラートを非表示
+            setTimeout(() => {
+                alertScreen.classList.add('hidden');
+            }, 5000);
+        }
+
+        function addErrorLog(code, message, type) {
+            const time = updateClock();
+            let bgColor, textColor, titleColor;
+
+            if (type === 'error') {
+                bgColor = 'bg-red-900/50';
+                textColor = 'text-red-400';
+                titleColor = 'text-red-300';
+            } else if (type === 'warning') {
+                bgColor = 'bg-yellow-900/50';
+                textColor = 'text-yellow-400';
+                titleColor = 'text-yellow-300';
+            } else { // info
+                bgColor = 'bg-gray-900';
+                textColor = 'text-gray-400';
+                titleColor = 'text-gray-300';
+            }
+
+            const logEntry = `
+                <div class="flex justify-between items-center ${bgColor} p-3 rounded-md">
+                    <div>
+                        <p class="font-semibold ${titleColor}">${code}</p>
+                        ${message ? `<p class="text-sm ${textColor}">${message}</p>` : ''}
+                    </div>
+                    <span class="text-sm text-gray-400 whitespace-nowrap">${time}</span>
+                </div>
+            `;
+            errorLogList.insertAdjacentHTML('afterbegin', logEntry);
+        }
+
+        // エラー発生のシミュレーション用データ
+        const sampleErrors = [
+            { code: 'モータートルク異常', message: 'モーターの負荷が規定値を超えました。', type: 'error' },
+            { code: 'フェンス内異物検知', message: '安全フェンス内で異物を検知しました。', type: 'error' },
+            { code: '非常停止ボタン取り扱い', message: '非常停止ボタンが押されました。', type: 'warning' }
+        ];
+
+        // デバッグ用ボタンのイベントリスナー
+        const debugErrorBtn = document.getElementById('debug-error-btn');
+        const debugWarningBtn = document.getElementById('debug-warning-btn');
+        const debugNormalBtn = document.getElementById('debug-normal-btn');
+
+        debugErrorBtn.addEventListener('click', () => {
+            const error = sampleErrors.filter(e => e.type === 'error')[Math.floor(Math.random() * 2)];
+            if (error) {
+                machineStatus.textContent = 'エラー';
+                machineStatus.className = 'px-4 py-2 text-xl font-semibold rounded-full bg-red-500 text-red-900';
+                addErrorLog(error.code, error.message, error.type);
+                showErrorAlert(error.code, error.message);
+            }
+        });
+
+        debugWarningBtn.addEventListener('click', () => {
+            const warning = sampleErrors.find(e => e.type === 'warning');
+            if (warning) {
+                machineStatus.textContent = '警告';
+                machineStatus.className = 'px-4 py-2 text-xl font-semibold rounded-full bg-yellow-500 text-yellow-900';
+                addErrorLog(warning.code, warning.message, warning.type);
+            }
+        });
+        
+        debugNormalBtn.addEventListener('click', () => {
+             machineStatus.textContent = '正常';
+             machineStatus.className = 'px-4 py-2 text-xl font-semibold rounded-full bg-green-500 text-green-900';
+             addErrorLog('I-003: 状態リセット', '手動で正常状態に復帰しました。', 'info');
+        });
+
+    </script>
+
+</body>
+</html>
diff --git "a/docs/\347\224\273\351\235\242\346\247\213\346\210\220\350\250\255\350\250\210/\347\224\237\347\224\243\346\251\237\346\242\260\343\202\271\343\203\206\343\203\274\343\202\277\343\202\271.html" "b/docs/\347\224\273\351\235\242\346\247\213\346\210\220\350\250\255\350\250\210/\347\224\237\347\224\243\346\251\237\346\242\260\343\202\271\343\203\206\343\203\274\343\202\277\343\202\271.html"
new file mode 100644
index 000000000..a66f4bc9e
--- /dev/null
+++ "b/docs/\347\224\273\351\235\242\346\247\213\346\210\220\350\250\255\350\250\210/\347\224\237\347\224\243\346\251\237\346\242\260\343\202\271\343\203\206\343\203\274\343\202\277\343\202\271.html"
@@ -0,0 +1,210 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>生産機械状況</title>
+    <!-- Tailwind CSSを読み込む -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Google Fonts (Inter) を読み込む -->
+    <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=Inter:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;700&display=swap" rel="stylesheet">
+    <!-- Ioniconsを読み込む -->
+    <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
+    <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
+    <style>
+        /* フォント設定 */
+        body {
+            font-family: 'Inter', 'Noto Sans JP', sans-serif;
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
+        }
+        /* スクロールバーのスタイル（任意） */
+        ::-webkit-scrollbar {
+            width: 8px;
+        }
+        ::-webkit-scrollbar-track {
+            background: #f1f5f9;
+        }
+        ::-webkit-scrollbar-thumb {
+            background: #94a3b8;
+            border-radius: 4px;
+        }
+        ::-webkit-scrollbar-thumb:hover {
+            background: #64748b;
+        }
+        /* アニメーション */
+        .fade-in {
+            animation: fadeIn 0.5s ease-in-out forwards;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+    </style>
+</head>
+<body class="bg-gray-100 text-gray-800">
+
+    <div class="flex flex-col min-h-screen">
+
+        <!-- ヘッダー -->
+        <header class="bg-white shadow-md sticky top-0 z-20">
+            <div class="container mx-auto px-4 sm:px-6 lg:px-8">
+                <div class="flex items-center justify-between h-16">
+                    <div class="flex items-center space-x-4">
+                        <div class="bg-indigo-600 p-2 rounded-lg">
+                           <ion-icon name="hardware-chip-outline" class="text-white text-2xl"></ion-icon>
+                        </div>
+                        <h1 class="text-xl font-bold text-gray-900">生産機械状況</h1>
+                    </div>
+                    <div class="flex items-center space-x-4">
+                        <a href="トップページ.html" class="text-sm font-medium text-indigo-600 hover:text-indigo-800">&larr; ダッシュボードに戻る</a>
+                        <button class="flex items-center justify-center bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded-lg transition duration-300 ease-in-out transform hover:scale-105">
+                            <ion-icon name="log-out-outline" class="mr-2 text-xl"></ion-icon>
+                            ログアウト
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </header>
+
+        <!-- メインコンテンツ -->
+        <main class="flex-grow container mx-auto p-4 sm:p-6 lg:p-8">
+            
+            <div class="bg-white rounded-xl shadow-md p-6 lg:p-8">
+                <div class="grid grid-cols-1 lg:grid-cols-5 gap-8">
+                    
+                    <!-- 左カラム: 機械画像とステータス -->
+                    <div class="lg:col-span-2 fade-in">
+                        <h2 class="text-3xl font-bold mb-4">自動表層バネどめ機</h2>
+                        <div class="bg-gray-200 rounded-lg overflow-hidden mb-4">
+                            <img src="images/image.png" alt="自動表層バネどめ機の画像" class="w-full h-auto object-cover">
+                        </div>
+                        <div id="machine-status-badge" class="p-4 rounded-lg text-center bg-green-100 text-green-800">
+                            <p class="text-2xl font-bold">正常に稼働中</p>
+                        </div>
+                    </div>
+
+                    <!-- 右カラム: 詳細情報とログ -->
+                    <div class="lg:col-span-3 fade-in" style="animation-delay: 0.1s;">
+                        <h3 class="text-2xl font-bold mb-4">稼働データ</h3>
+                        <!-- データグリッド -->
+                        <div class="grid grid-cols-2 md:grid-cols-2 gap-4 mb-8">
+                            <div class="bg-gray-50 p-4 rounded-lg">
+                                <p class="text-sm text-gray-500">本日の稼働時間</p>
+                                <p class="text-3xl font-bold">8<span class="text-xl">時間</span> 25<span class="text-xl">分</span></p>
+                            </div>
+                            <div class="bg-gray-50 p-4 rounded-lg">
+                                <p class="text-sm text-gray-500">本日の生産数</p>
+                                <p class="text-3xl font-bold">1,520 <span class="text-xl">個</span></p>
+                            </div>
+                            <div class="bg-gray-50 p-4 rounded-lg">
+                                <p class="text-sm text-gray-500">最終点検日</p>
+                                <p class="text-3xl font-bold">2024/06/15</p>
+                            </div>
+                            <div class="bg-gray-50 p-4 rounded-lg">
+                                <p class="text-sm text-gray-500">次回点検日</p>
+                                <p class="text-3xl font-bold">2024/09/15</p>
+                            </div>
+                        </div>
+
+                        <!-- エラーログ -->
+                        <div>
+                            <div class="flex flex-col md:flex-row justify-between items-center mb-4">
+                                <h3 class="text-2xl font-bold">エラーログ</h3>
+                                <!-- ログフィルター -->
+                                <div class="flex items-center space-x-2 mt-4 md:mt-0">
+                                    <input type="date" id="log-date-filter" class="w-full border-gray-300 rounded-md shadow-sm text-sm">
+                                    <select id="log-type-filter" class="w-full border-gray-300 rounded-md shadow-sm text-sm">
+                                        <option value="すべて">すべて</option>
+                                        <option value="エラー">エラー</option>
+                                        <option value="警告">警告</option>
+                                        <option value="情報">情報</option>
+                                    </select>
+                                </div>
+                            </div>
+                            <div id="log-list" class="space-y-3 max-h-64 overflow-y-auto pr-2">
+                                <!-- エラーログ: サンプル1 -->
+                                <div class="log-item bg-red-50 p-3 rounded-md flex justify-between items-center" data-date="2025-07-15" data-type="エラー">
+                                    <div><p class="font-semibold text-red-800">E-102: トルク過負荷</p><p class="text-xs text-red-600">モーターの負荷が規定値を超えました。</p></div>
+                                    <span class="text-sm text-gray-500 whitespace-nowrap">10:15:32</span>
+                                </div>
+                                <!-- エラーログ: サンプル2 -->
+                                <div class="log-item bg-yellow-50 p-3 rounded-md flex justify-between items-center" data-date="2025-07-15" data-type="警告">
+                                    <div><p class="font-semibold text-yellow-800">W-05: 潤滑油低下</p><p class="text-xs text-yellow-600">潤滑油が規定レベルを下回っています。</p></div>
+                                    <span class="text-sm text-gray-500 whitespace-nowrap">09:30:11</span>
+                                </div>
+                                <!-- エラーログ: サンプル3 -->
+                                <div class="log-item bg-gray-100 p-3 rounded-md flex justify-between items-center" data-date="2025-07-15" data-type="情報">
+                                    <div><p class="font-semibold text-gray-800">I-001: 起動シーケンス完了</p></div>
+                                    <span class="text-sm text-gray-500 whitespace-nowrap">08:00:05</span>
+                                </div>
+                                <!-- 追加サンプル -->
+                                <div class="log-item bg-red-50 p-3 rounded-md flex justify-between items-center" data-date="2025-07-14" data-type="エラー">
+                                    <div><p class="font-semibold text-red-800">E-201: センサー接続エラー</p><p class="text-xs text-red-600">センサー#3との通信がタイムアウトしました。</p></div>
+                                    <span class="text-sm text-gray-500 whitespace-nowrap">2025/07/14 15:45:01</span>
+                                </div>
+                                <div class="log-item bg-yellow-50 p-3 rounded-md flex justify-between items-center" data-date="2025-07-14" data-type="警告">
+                                    <div><p class="font-semibold text-yellow-800">W-02: フィルター交換時期</p><p class="text-xs text-yellow-600">エアフィルターの交換を推奨します。</p></div>
+                                    <span class="text-sm text-gray-500 whitespace-nowrap">2025/07/14 11:20:45</span>
+                                </div>
+                                <div class="log-item bg-gray-100 p-3 rounded-md flex justify-between items-center" data-date="2025-07-14" data-type="情報">
+                                    <div><p class="font-semibold text-gray-800">I-002: 生産完了 (Lot-24B)</p></div>
+                                    <span class="text-sm text-gray-500 whitespace-nowrap">2025/07/14 17:30:00</span>
+                                </div>
+                            </div>
+                             <div id="no-log-results" class="hidden text-center py-12">
+                                <ion-icon name="sad-outline" class="text-5xl text-gray-400 mx-auto"></ion-icon>
+                                <p class="mt-4 text-lg font-medium text-gray-600">該当するログが見つかりませんでした。</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+
+        <!-- フッター -->
+        <footer class="bg-white mt-8 py-4 px-4 sm:px-6 lg:px-8 border-t border-gray-200">
+            <div class="text-center text-sm text-gray-500">
+                &copy; 2024 生産管理システム. All Rights Reserved.
+            </div>
+        </footer>
+
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            const dateFilter = document.getElementById('log-date-filter');
+            const typeFilter = document.getElementById('log-type-filter');
+            const logItems = document.querySelectorAll('.log-item');
+            const noResultsDiv = document.getElementById('no-log-results');
+
+            function filterLogs() {
+                const dateValue = dateFilter.value;
+                const typeValue = typeFilter.value;
+                let visibleCount = 0;
+
+                logItems.forEach(item => {
+                    const itemDate = item.dataset.date;
+                    const itemType = item.dataset.type;
+
+                    const dateMatch = !dateValue || itemDate === dateValue;
+                    const typeMatch = typeValue === 'すべて' || itemType === typeValue;
+
+                    if (dateMatch && typeMatch) {
+                        item.style.display = 'flex';
+                        visibleCount++;
+                    } else {
+                        item.style.display = 'none';
+                    }
+                });
+                
+                noResultsDiv.style.display = visibleCount === 0 ? 'block' : 'none';
+            }
+
+            dateFilter.addEventListener('input', filterLogs);
+            typeFilter.addEventListener('change', filterLogs);
+        });
+    </script>
+</body>
+</html>
diff --git "a/docs/\347\224\273\351\235\242\346\247\213\346\210\220\350\250\255\350\250\210/\347\224\273\345\203\217\346\244\234\346\237\273\343\202\271\343\203\206\343\203\274\343\202\277\343\202\271.html" "b/docs/\347\224\273\351\235\242\346\247\213\346\210\220\350\250\255\350\250\210/\347\224\273\345\203\217\346\244\234\346\237\273\343\202\271\343\203\206\343\203\274\343\202\277\343\202\271.html"
new file mode 100644
index 000000000..261a6b29d
--- /dev/null
+++ "b/docs/\347\224\273\351\235\242\346\247\213\346\210\220\350\250\255\350\250\210/\347\224\273\345\203\217\346\244\234\346\237\273\343\202\271\343\203\206\343\203\274\343\202\277\343\202\271.html"
@@ -0,0 +1,339 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>画像検査ステータス</title>
+    <!-- Tailwind CSSを読み込む -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Google Fonts (Inter) を読み込む -->
+    <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=Inter:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;700&display=swap" rel="stylesheet">
+    <!-- Ioniconsを読み込む -->
+    <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
+    <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
+    <style>
+        /* フォント設定 */
+        body {
+            font-family: 'Inter', 'Noto Sans JP', sans-serif;
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
+        }
+        /* スクロールバーのスタイル（任意） */
+        ::-webkit-scrollbar {
+            width: 8px;
+        }
+        ::-webkit-scrollbar-track {
+            background: #f1f5f9;
+        }
+        ::-webkit-scrollbar-thumb {
+            background: #94a3b8;
+            border-radius: 4px;
+        }
+        ::-webkit-scrollbar-thumb:hover {
+            background: #64748b;
+        }
+        /* アニメーション */
+        .fade-in {
+            animation: fadeIn 0.5s ease-in-out forwards;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        /* アクティブなタブのスタイル */
+        .active-tab {
+            border-color: #4f46e5; /* indigo-600 */
+            background-color: #eef2ff; /* indigo-50 */
+            color: #4338ca; /* indigo-700 */
+            font-weight: 600;
+        }
+    </style>
+</head>
+<body class="bg-gray-100 text-gray-800">
+
+    <div class="flex flex-col min-h-screen">
+
+        <!-- ヘッダー -->
+        <header class="bg-white shadow-md sticky top-0 z-20">
+            <div class="container mx-auto px-4 sm:px-6 lg:px-8">
+                <div class="flex items-center justify-between h-16">
+                    <div class="flex items-center space-x-4">
+                        <div class="bg-indigo-600 p-2 rounded-lg">
+                           <ion-icon name="camera-outline" class="text-white text-2xl"></ion-icon>
+                        </div>
+                        <h1 class="text-xl font-bold text-gray-900">画像検査ステータス</h1>
+                    </div>
+                    <div class="flex items-center space-x-4">
+                        <a href="トップページ.html" class="text-sm font-medium text-indigo-600 hover:text-indigo-800">&larr; ダッシュボードに戻る</a>
+                        <button class="flex items-center justify-center bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded-lg transition duration-300 ease-in-out transform hover:scale-105">
+                            <ion-icon name="log-out-outline" class="mr-2 text-xl"></ion-icon>
+                            ログアウト
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </header>
+
+        <!-- メインコンテンツ -->
+        <main class="flex-grow container mx-auto p-4 sm:p-6 lg:p-8">
+            
+            <!-- タブナビゲーション -->
+            <div class="mb-6">
+                <div class="border-b border-gray-200">
+                    <nav id="tabs" class="-mb-px flex space-x-8" aria-label="Tabs">
+                        <button data-tab="tab-all" class="tab-button active-tab whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">全体表示</button>
+                        <button data-tab="tab-spring" class="tab-button text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">バネ留め検査</button>
+                        <button data-tab="tab-alayer" class="tab-button text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">A層検査</button>
+                    </nav>
+                </div>
+            </div>
+
+            <!-- タブコンテンツ -->
+            <div id="tab-contents">
+                <!-- 全体表示タブ -->
+                <div id="tab-all" class="tab-panel">
+                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                        <!-- バネ留め検査 -->
+                        <div class="bg-white rounded-xl shadow-md p-6 fade-in">
+                            <h2 class="text-xl font-bold mb-4">リアルタイム監視: バネ留め検査</h2>
+                            <div class="bg-black rounded-lg aspect-video flex items-center justify-center mb-4">
+                                <p class="text-gray-500 text-lg">SPRING FASTENER - LIVE FEED</p>
+                            </div>
+                            <div class="border-t pt-4">
+                                <h3 class="text-lg font-bold text-gray-600 mb-2">最新の検査結果</h3>
+                                <div id="latest-result-spring-all" class="bg-gray-50 rounded-lg p-4 flex items-center justify-between"></div>
+                            </div>
+                        </div>
+                        <!-- A層検査 -->
+                        <div class="bg-white rounded-xl shadow-md p-6 fade-in" style="animation-delay: 0.1s;">
+                            <h2 class="text-xl font-bold mb-4">リアルタイム監視: A層検査</h2>
+                            <div class="bg-black rounded-lg aspect-video flex items-center justify-center mb-4">
+                                <p class="text-gray-500 text-lg">A-LAYER - LIVE FEED</p>
+                            </div>
+                            <div class="border-t pt-4">
+                                <h3 class="text-lg font-bold text-gray-600 mb-2">最新の検査結果</h3>
+                                <div id="latest-result-alayer-all" class="bg-gray-50 rounded-lg p-4 flex items-center justify-between"></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- バネ留め検査タブ -->
+                <div id="tab-spring" class="tab-panel hidden">
+                    <div class="grid grid-cols-1 lg:grid-cols-5 gap-6">
+                        <div class="lg:col-span-3 bg-white rounded-xl shadow-md p-6">
+                            <h2 class="text-xl font-bold mb-4">リアルタイム監視: バネ留め検査</h2>
+                            <div class="bg-black rounded-lg aspect-video flex items-center justify-center mb-4"><p class="text-gray-500 text-lg">SPRING FASTENER - LIVE FEED</p></div>
+                            <div class="border-t pt-4"><h3 class="text-lg font-bold text-gray-600 mb-2">最新の検査結果</h3><div id="latest-result-spring-tab" class="bg-gray-50 rounded-lg p-4 flex items-center justify-between"></div></div>
+                        </div>
+                        <div class="lg:col-span-2 bg-white rounded-xl shadow-md p-6 space-y-6">
+                            <div>
+                                <h2 class="text-xl font-bold mb-2">本日のサマリー</h2>
+                                <div class="flex justify-center mb-4"><div id="chart-spring" class="relative w-40 h-40"></div></div>
+                                <div class="grid grid-cols-3 gap-4 text-center">
+                                    <div class="bg-gray-50 p-3 rounded-lg"><p class="text-sm text-gray-500">検査総数</p><p id="total-spring" class="text-2xl font-bold">0</p></div>
+                                    <div class="bg-gray-50 p-3 rounded-lg"><p class="text-sm text-gray-500">良品</p><p id="pass-spring" class="text-2xl font-bold text-green-600">0</p></div>
+                                    <div class="bg-gray-50 p-3 rounded-lg"><p class="text-sm text-gray-500">不良品</p><p id="fail-spring" class="text-2xl font-bold text-red-600">0</p></div>
+                                </div>
+                            </div>
+                            <div class="border-t pt-4">
+                                <h3 class="text-lg font-bold mb-2">不良原因</h3>
+                                <div id="fail-reasons-spring" class="space-y-3 text-sm"></div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mt-6 bg-white rounded-xl shadow-md p-6">
+                         <h2 class="text-xl font-bold mb-4">バネ留め検査 ログ</h2>
+                         <div class="overflow-x-auto max-h-[40vh]"><table class="w-full text-sm text-left"><thead class="text-xs text-gray-700 uppercase bg-gray-50 sticky top-0"><tr><th class="px-6 py-3">日時</th><th class="px-6 py-3">製品ID</th><th class="px-6 py-3">結果</th><th class="px-6 py-3">詳細</th></tr></thead><tbody id="log-table-spring"></tbody></table></div>
+                    </div>
+                </div>
+
+                <!-- A層検査タブ -->
+                <div id="tab-alayer" class="tab-panel hidden">
+                    <div class="grid grid-cols-1 lg:grid-cols-5 gap-6">
+                        <div class="lg:col-span-3 bg-white rounded-xl shadow-md p-6">
+                            <h2 class="text-xl font-bold mb-4">リアルタイム監視: A層検査</h2>
+                            <div class="bg-black rounded-lg aspect-video flex items-center justify-center mb-4"><p class="text-gray-500 text-lg">A-LAYER - LIVE FEED</p></div>
+                            <div class="border-t pt-4"><h3 class="text-lg font-bold text-gray-600 mb-2">最新の検査結果</h3><div id="latest-result-alayer-tab" class="bg-gray-50 rounded-lg p-4 flex items-center justify-between"></div></div>
+                        </div>
+                        <div class="lg:col-span-2 bg-white rounded-xl shadow-md p-6 space-y-6">
+                             <div>
+                                <h2 class="text-xl font-bold mb-2">本日のサマリー</h2>
+                                <div class="flex justify-center mb-4"><div id="chart-alayer" class="relative w-40 h-40"></div></div>
+                                <div class="grid grid-cols-3 gap-4 text-center">
+                                    <div class="bg-gray-50 p-3 rounded-lg"><p class="text-sm text-gray-500">検査総数</p><p id="total-alayer" class="text-2xl font-bold">0</p></div>
+                                    <div class="bg-gray-50 p-3 rounded-lg"><p class="text-sm text-gray-500">良品</p><p id="pass-alayer" class="text-2xl font-bold text-green-600">0</p></div>
+                                    <div class="bg-gray-50 p-3 rounded-lg"><p class="text-sm text-gray-500">不良品</p><p id="fail-alayer" class="text-2xl font-bold text-red-600">0</p></div>
+                                </div>
+                            </div>
+                            <div class="border-t pt-4">
+                                <h3 class="text-lg font-bold mb-2">不良原因</h3>
+                                <div id="fail-reasons-alayer" class="space-y-3 text-sm"></div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mt-6 bg-white rounded-xl shadow-md p-6">
+                         <h2 class="text-xl font-bold mb-4">A層検査 ログ</h2>
+                         <div class="overflow-x-auto max-h-[40vh]"><table class="w-full text-sm text-left"><thead class="text-xs text-gray-700 uppercase bg-gray-50 sticky top-0"><tr><th class="px-6 py-3">日時</th><th class="px-6 py-3">製品ID</th><th class="px-6 py-3">結果</th><th class="px-6 py-3">詳細</th></tr></thead><tbody id="log-table-alayer"></tbody></table></div>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </div>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            const sampleLogs = [
+                { time: '10:18:12', camera: 'バネ留め', id: 'SPRING-001', status: 'PASS', details: '-', date: '2024-07-15' },
+                { time: '10:18:08', camera: 'A層', id: 'A-102-1249', status: 'PASS', details: '-', date: '2024-07-15' },
+                { time: '10:18:04', camera: 'A層', id: 'A-102-1248', status: 'FAIL', details: '傷あり', date: '2024-07-15' },
+                { time: '10:17:59', camera: 'バネ留め', id: 'SPRING-002', status: 'PASS', details: '-', date: '2024-07-15' },
+                { time: '10:17:51', camera: 'A層', id: 'B-201-0015', status: 'PASS', details: '-', date: '2024-07-15' },
+                { time: '10:17:48', camera: 'バネ留め', id: 'SPRING-003', status: 'FAIL', details: '位置ずれ', date: '2024-07-15' },
+                { time: '10:16:55', camera: 'A層', id: 'C-301-0512', status: 'FAIL', details: '異物混入', date: '2024-07-15' },
+                { time: '10:16:51', camera: 'バネ留め', id: 'SPRING-004', status: 'PASS', details: '-', date: '2024-07-15' },
+                { time: '10:15:48', camera: 'バネ留め', id: 'SPRING-005', status: 'FAIL', details: '位置ずれ', date: '2024-07-15' },
+                { time: '10:15:04', camera: 'A層', id: 'A-102-1247', status: 'FAIL', details: '傷あり', date: '2024-07-15' },
+            ];
+
+            function createLogHtml(log) {
+                const statusClass = log.status === 'PASS' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800';
+                return `
+                    <tr class="bg-white border-b">
+                        <td class="px-6 py-4">${log.time}</td>
+                        <td class="px-6 py-4 font-medium">${log.id}</td>
+                        <td class="px-6 py-4"><span class="font-semibold px-2 py-1 rounded-full ${statusClass}">${log.status}</span></td>
+                        <td class="px-6 py-4">${log.details}</td>
+                    </tr>
+                `;
+            }
+
+            function populateLogTables() {
+                const springLogBody = document.getElementById('log-table-spring');
+                const alayerLogBody = document.getElementById('log-table-alayer');
+                springLogBody.innerHTML = sampleLogs.filter(log => log.camera === 'バネ留め').map(createLogHtml).join('');
+                alayerLogBody.innerHTML = sampleLogs.filter(log => log.camera === 'A層').map(createLogHtml).join('');
+            }
+            
+            function updateLatestResult(cameraType, containerId) {
+                const latestResultContainer = document.getElementById(containerId);
+                const latestLog = sampleLogs.find(log => log.camera === cameraType);
+                
+                if (!latestLog) {
+                    latestResultContainer.innerHTML = `<p class="text-gray-500">本日の検査データはありません。</p>`;
+                    return;
+                }
+
+                const { time, id, status, details } = latestLog;
+                let statusColorClass = status === 'PASS' ? 'text-green-600' : 'text-red-600';
+                let statusIcon = status === 'PASS' ? 'checkmark-circle' : 'close-circle';
+
+                latestResultContainer.innerHTML = `
+                    <div class="flex-grow">
+                        <p class="text-sm text-gray-500">${time}</p>
+                        <p class="text-2xl font-bold">${id}</p>
+                        ${details !== '-' ? `<p class="text-sm text-red-600 mt-1">${details}</p>` : ''}
+                    </div>
+                    <div class="text-right">
+                        <p class="text-4xl font-bold ${statusColorClass} flex items-center">
+                            <ion-icon name="${statusIcon}" class="mr-2"></ion-icon>
+                            ${status}
+                        </p>
+                    </div>
+                `;
+            }
+            
+            function createDonutChart(containerId, percentage) {
+                const container = document.getElementById(containerId);
+                const strokeDasharray = `${percentage}, 100`;
+                container.innerHTML = `
+                    <svg class="w-full h-full" viewBox="0 0 36 36">
+                        <path class="text-red-200" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="currentColor" stroke-width="3.8" />
+                        <path class="text-green-500" stroke-dasharray="${strokeDasharray}" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="currentColor" stroke-width="3.8" stroke-linecap="round" />
+                    </svg>
+                    <div class="absolute inset-0 flex flex-col items-center justify-center">
+                        <span class="text-4xl font-bold">${percentage}%</span>
+                        <span class="text-sm text-gray-500">良品率</span>
+                    </div>
+                `;
+            }
+
+            function updateFailReasons(cameraType, containerId) {
+                const container = document.getElementById(containerId);
+                const failLogs = sampleLogs.filter(log => log.camera === cameraType && log.status === 'FAIL');
+                if (failLogs.length === 0) {
+                    container.innerHTML = `<p class="text-gray-500">本日の不良品はありません。</p>`;
+                    return;
+                }
+                
+                const reasonCounts = failLogs.reduce((acc, log) => {
+                    acc[log.details] = (acc[log.details] || 0) + 1;
+                    return acc;
+                }, {});
+
+                const sortedReasons = Object.entries(reasonCounts).sort(([,a],[,b]) => b-a);
+                
+                container.innerHTML = sortedReasons.map(([reason, count]) => {
+                    const percentage = ((count / failLogs.length) * 100).toFixed(0);
+                    return `
+                        <div>
+                            <div class="flex justify-between mb-1">
+                                <span class="font-medium text-gray-700">${reason}</span>
+                                <span class="text-gray-500">${count}件</span>
+                            </div>
+                            <div class="w-full bg-gray-200 rounded-full h-2.5">
+                                <div class="bg-red-500 h-2.5 rounded-full" style="width: ${percentage}%"></div>
+                            </div>
+                        </div>
+                    `;
+                }).join('');
+            }
+
+            function updateSummaries() {
+                const cameraTypes = ['spring', 'alayer'];
+                cameraTypes.forEach(type => {
+                    const cameraName = type === 'spring' ? 'バネ留め' : 'A層';
+                    const logs = sampleLogs.filter(log => log.camera === cameraName);
+                    const total = logs.length;
+                    const fail = logs.filter(l => l.status === 'FAIL').length;
+                    const pass = total - fail;
+                    const passRate = total > 0 ? ((pass / total) * 100).toFixed(1) : 100;
+                    
+                    document.getElementById(`total-${type}`).textContent = total;
+                    document.getElementById(`pass-${type}`).textContent = pass;
+                    document.getElementById(`fail-${type}`).textContent = fail;
+                    createDonutChart(`chart-${type}`, passRate);
+                    updateFailReasons(cameraName, `fail-reasons-${type}`);
+                });
+            }
+
+            // タブ切り替えのロジック
+            const tabsContainer = document.getElementById('tabs');
+            const tabPanels = document.querySelectorAll('.tab-panel');
+            tabsContainer.addEventListener('click', (e) => {
+                if (e.target.classList.contains('tab-button')) {
+                    tabsContainer.querySelectorAll('.tab-button').forEach(button => {
+                        button.classList.remove('active-tab');
+                        button.classList.add('text-gray-500', 'hover:text-gray-700', 'hover:border-gray-300');
+                    });
+                    e.target.classList.add('active-tab');
+                    e.target.classList.remove('text-gray-500', 'hover:text-gray-700', 'hover:border-gray-300');
+                    tabPanels.forEach(panel => panel.classList.add('hidden'));
+                    document.getElementById(e.target.dataset.tab).classList.remove('hidden');
+                }
+            });
+
+            // 初期表示
+            populateLogTables();
+            updateLatestResult('バネ留め', 'latest-result-spring-all');
+            updateLatestResult('A層', 'latest-result-alayer-all');
+            updateLatestResult('バネ留め', 'latest-result-spring-tab');
+            updateLatestResult('A層', 'latest-result-alayer-tab');
+            updateSummaries();
+        });
+    </script>
+
+</body>
+</html>
diff --git "a/docs/\347\224\273\351\235\242\346\247\213\346\210\220\350\250\255\350\250\210/\350\243\275\351\200\240\345\207\272\350\215\267\346\214\207\347\244\272\345\221\250\347\237\245\343\203\232\343\203\274\343\202\270.html" "b/docs/\347\224\273\351\235\242\346\247\213\346\210\220\350\250\255\350\250\210/\350\243\275\351\200\240\345\207\272\350\215\267\346\214\207\347\244\272\345\221\250\347\237\245\343\203\232\343\203\274\343\202\270.html"
new file mode 100644
index 000000000..781519510
--- /dev/null
+++ "b/docs/\347\224\273\351\235\242\346\247\213\346\210\220\350\250\255\350\250\210/\350\243\275\351\200\240\345\207\272\350\215\267\346\214\207\347\244\272\345\221\250\347\237\245\343\203\232\343\203\274\343\202\270.html"
@@ -0,0 +1,525 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>製造出荷指示</title>
+    <!-- Tailwind CSSを読み込む -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Google Fonts (Inter) を読み込む -->
+    <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=Inter:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;700&display=swap" rel="stylesheet">
+    <!-- Ioniconsを読み込む -->
+    <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
+    <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
+    <style>
+        /* フォント設定 */
+        body {
+            font-family: 'Inter', 'Noto Sans JP', sans-serif;
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
+        }
+        /* スクロールバーのスタイル（任意） */
+        ::-webkit-scrollbar {
+            width: 8px;
+            height: 8px;
+        }
+        ::-webkit-scrollbar-track {
+            background: #f1f5f9;
+        }
+        ::-webkit-scrollbar-thumb {
+            background: #94a3b8;
+            border-radius: 4px;
+        }
+        ::-webkit-scrollbar-thumb:hover {
+            background: #64748b;
+        }
+        /* アニメーション */
+        .fade-in {
+            animation: fadeIn 0.5s ease-in-out forwards;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .modal-enter {
+            animation: modal-enter-animation 0.3s ease-out forwards;
+        }
+        @keyframes modal-enter-animation {
+            from { opacity: 0; transform: scale(0.95); }
+            to { opacity: 1; transform: scale(1); }
+        }
+        /* 完了カードのスタイル */
+        .completed-card {
+            opacity: 0.6;
+        }
+        /* 文字サイズ拡大用のスタイル */
+        .text-large h1, .text-large h2, .text-large h3, .text-large h4,
+        .text-large p, .text-large div, .text-large span, .text-large label,
+        .text-large button, .text-large select, .text-large input {
+             font-size: 1.1em !important;
+        }
+        .text-large .text-2xl { font-size: 1.75rem !important; }
+        .text-large .text-xl { font-size: 1.4rem !important; }
+        .text-large .text-sm { font-size: 1rem !important; }
+
+    </style>
+</head>
+<body class="bg-gray-100 text-gray-800">
+
+    <div class="flex flex-col min-h-screen">
+
+        <!-- ヘッダー -->
+        <header class="bg-white shadow-md sticky top-0 z-20">
+            <div class="container mx-auto px-4 sm:px-6 lg:px-8">
+                <div class="flex items-center justify-between h-16">
+                    <div class="flex items-center space-x-4">
+                        <div class="bg-indigo-600 p-2 rounded-lg">
+                           <ion-icon name="list-outline" class="text-white text-2xl"></ion-icon>
+                        </div>
+                        <h1 class="text-xl font-bold text-gray-900">製造出荷指示</h1>
+                    </div>
+                    <div class="flex items-center space-x-4">
+                        <!-- 文字サイズ変更スイッチ -->
+                        <div class="flex items-center space-x-2">
+                            <ion-icon name="text-outline" class="text-xl text-gray-500"></ion-icon>
+                            <label for="font-size-toggle" class="flex items-center cursor-pointer">
+                                <div class="relative">
+                                    <input type="checkbox" id="font-size-toggle" class="hidden">
+                                    <div class="toggle-bg w-12 h-7 bg-gray-200 rounded-full shadow-inner transition-colors duration-300"></div>
+                                    <div class="dot absolute w-5 h-5 bg-white rounded-full shadow left-1 top-1 transition-transform duration-300"></div>
+                                </div>
+                            </label>
+                        </div>
+                        <div class="h-6 w-px bg-gray-200"></div>
+                        <a href="トップページ.html" class="text-sm font-medium text-indigo-600 hover:text-indigo-800">&larr; ダッシュボードに戻る</a>
+                        <button class="flex items-center justify-center bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded-lg transition duration-300 ease-in-out transform hover:scale-105">
+                            <ion-icon name="log-out-outline" class="mr-2 text-xl"></ion-icon>
+                            ログアウト
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </header>
+
+        <!-- メインコンテンツ -->
+        <main class="flex-grow container mx-auto p-4 sm:p-6 lg:p-8">
+            
+            <!-- フィルターバー -->
+            <div class="bg-white p-4 rounded-xl shadow-md mb-6">
+                 <div class="grid grid-cols-1 md:grid-cols-3 gap-4 items-end">
+                    <div class="md:col-span-1">
+                        <label for="filter-text" class="block text-sm font-medium text-gray-700">品名 / 配送先 / 備考</label>
+                        <input type="text" id="filter-text" class="mt-1 w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" placeholder="マット, 西川仕様, 至急など">
+                    </div>
+                    <div>
+                        <label for="filter-line" class="block text-sm font-medium text-gray-700">担当ライン</label>
+                        <select id="filter-line" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
+                            <option value="すべて">すべて</option>
+                            <option>マット</option>
+                            <option>ボトム</option>
+                            <option>その他</option>
+                        </select>
+                    </div>
+                    <div>
+                        <label for="filter-completed" class="block text-sm font-medium text-gray-700">完了状態</label>
+                         <select id="filter-completed" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
+                            <option value="すべて">すべて</option>
+                            <option value="not-completed">未完了のみ</option>
+                            <option value="completed">完了のみ</option>
+                        </select>
+                    </div>
+                </div>
+            </div>
+
+            <!-- 指示カードリスト -->
+            <div id="instruction-card-list" class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
+                <!-- サンプルデータ 1 -->
+                <div class="instruction-card fade-in bg-white rounded-xl shadow-md flex flex-col transition-all duration-300" data-line="マット" data-content="マット 1200x1950x240 sd gm/be 1.9 西川仕様 西川アイロンシール 匠 フラワー ホテル 両面張り 至急対応">
+                    <div class="p-5 border-b border-gray-200 flex justify-between items-start">
+                        <div>
+                            <span class="px-3 py-1 text-sm font-semibold rounded-full bg-cyan-100 text-cyan-800">マット</span>
+                            <h3 class="text-xl font-bold text-gray-900 mt-2">マット <span class="text-base text-gray-600 font-normal">/ 1200x1950x240 / SD</span></h3>
+                        </div>
+                        <div class="text-right flex-shrink-0">
+                            <label class="flex items-center cursor-pointer">
+                                <div class="relative">
+                                    <input type="checkbox" class="completion-checkbox hidden">
+                                    <div class="toggle-bg w-12 h-7 bg-gray-200 rounded-full shadow-inner transition-colors duration-300"></div>
+                                    <div class="dot absolute w-5 h-5 bg-white rounded-full shadow left-1 top-1 transition-transform duration-300"></div>
+                                </div>
+                                <div class="ml-3 text-gray-700 font-semibold text-sm">完了</div>
+                            </label>
+                        </div>
+                    </div>
+                    <div class="p-5 flex-grow space-y-4 text-sm">
+                        <div>
+                            <h4 class="font-bold text-gray-500 mb-2">仕様</h4>
+                            <div class="space-y-1">
+                                <div class="flex"><p class="w-20 text-gray-500 shrink-0">カラー:</p><p class="font-medium text-gray-800">GM/BE</p></div>
+                                <div class="flex"><p class="w-20 text-gray-500 shrink-0">バネ:</p><p class="font-medium text-gray-800">1.9</p></div>
+                                <div class="flex"><p class="w-20 text-gray-500 shrink-0">同梱品:</p><p class="font-medium text-gray-800">西川仕様 / 西川アイロンシール</p></div>
+                            </div>
+                        </div>
+                         <div>
+                            <h4 class="font-bold text-gray-500 mb-2">配送情報</h4>
+                            <div class="space-y-1">
+                                <div class="flex"><p class="w-20 text-gray-500 shrink-0">配送方法:</p><p class="font-medium text-gray-800">匠</p></div>
+                                <div class="flex"><p class="w-20 text-gray-500 shrink-0">配送先:</p><p class="font-medium text-gray-800">フラワー / ホテル / 両面張り</p></div>
+                                <div class="flex"><p class="w-20 text-gray-500 shrink-0">備考:</p><p class="font-bold text-red-600">至急対応</p></div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="p-5 bg-gray-50 rounded-b-xl flex justify-between items-center">
+                        <div>
+                            <span class="text-gray-500">数量:</span>
+                            <span class="text-2xl font-bold text-indigo-600">1</span>
+                        </div>
+                        <button class="font-medium text-indigo-600 hover:underline flex items-center">
+                            編集 <ion-icon name="create-outline" class="ml-1"></ion-icon>
+                        </button>
+                    </div>
+                </div>
+                <!-- サンプルデータ 2 -->
+                <div class="instruction-card fade-in bg-white rounded-xl shadow-md flex flex-col transition-all duration-300 completed-card" style="animation-delay: 0.05s;" data-line="マット" data-content="マット 1200x1950x200 平 gm/be 1.9 路線 グリーン ホテル仕上">
+                    <div class="p-5 border-b border-gray-200 flex justify-between items-start">
+                        <div>
+                            <span class="px-3 py-1 text-sm font-semibold rounded-full bg-cyan-100 text-cyan-800">マット</span>
+                            <h3 class="text-xl font-bold text-gray-900 mt-2">マット <span class="text-base text-gray-600 font-normal">/ 1200x1950x200 / 平</span></h3>
+                        </div>
+                        <div class="text-right flex-shrink-0">
+                             <label class="flex items-center cursor-pointer">
+                                <div class="relative">
+                                    <input type="checkbox" class="completion-checkbox hidden" checked>
+                                    <div class="toggle-bg w-12 h-7 bg-indigo-500 rounded-full shadow-inner transition-colors duration-300"></div>
+                                    <div class="dot absolute w-5 h-5 bg-white rounded-full shadow left-1 top-1 transition-transform duration-300 translate-x-full"></div>
+                                </div>
+                                <div class="ml-3 text-gray-700 font-semibold text-sm">完了</div>
+                            </label>
+                        </div>
+                    </div>
+                     <div class="p-5 flex-grow space-y-4 text-sm">
+                        <div>
+                            <h4 class="font-bold text-gray-500 mb-2">仕様</h4>
+                            <div class="space-y-1">
+                                <div class="flex"><p class="w-20 text-gray-500 shrink-0">カラー:</p><p class="font-medium text-gray-800">GM/BE</p></div>
+                                <div class="flex"><p class="w-20 text-gray-500 shrink-0">バネ:</p><p class="font-medium text-gray-800">1.9</p></div>
+                            </div>
+                        </div>
+                         <div>
+                            <h4 class="font-bold text-gray-500 mb-2">配送情報</h4>
+                            <div class="space-y-1">
+                                <div class="flex"><p class="w-20 text-gray-500 shrink-0">配送方法:</p><p class="font-medium text-gray-800">路線</p></div>
+                                <div class="flex"><p class="w-20 text-gray-500 shrink-0">配送先:</p><p class="font-medium text-gray-800">グリーン / ホテル仕上</p></div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="p-5 bg-gray-50 rounded-b-xl flex justify-between items-center">
+                        <div>
+                            <span class="text-gray-500">数量:</span>
+                            <span class="text-2xl font-bold text-indigo-600">1</span>
+                        </div>
+                        <button class="font-medium text-indigo-600 hover:underline flex items-center">
+                            編集 <ion-icon name="create-outline" class="ml-1"></ion-icon>
+                        </button>
+                    </div>
+                </div>
+                <!-- サンプルデータ 3 -->
+                <div class="instruction-card fade-in bg-white rounded-xl shadow-md flex flex-col transition-all duration-300" style="animation-delay: 0.1s;" data-line="ボトム" data-content="サポート 80巾 5col 福岡県小郡 アマゾン アマゾン直送便">
+                    <div class="p-5 border-b border-gray-200 flex justify-between items-start">
+                        <div>
+                            <span class="px-3 py-1 text-sm font-semibold rounded-full bg-orange-100 text-orange-800">ボトム</span>
+                            <h3 class="text-xl font-bold text-gray-900 mt-2">サポート <span class="text-base text-gray-600 font-normal">/ 80巾</span></h3>
+                        </div>
+                        <div class="text-right flex-shrink-0">
+                           <label class="flex items-center cursor-pointer">
+                                <div class="relative">
+                                    <input type="checkbox" class="completion-checkbox hidden">
+                                    <div class="toggle-bg w-12 h-7 bg-gray-200 rounded-full shadow-inner transition-colors duration-300"></div>
+                                    <div class="dot absolute w-5 h-5 bg-white rounded-full shadow left-1 top-1 transition-transform duration-300"></div>
+                                </div>
+                                <div class="ml-3 text-gray-700 font-semibold text-sm">完了</div>
+                            </label>
+                        </div>
+                    </div>
+                     <div class="p-5 flex-grow space-y-4 text-sm">
+                        <div>
+                            <h4 class="font-bold text-gray-500 mb-2">仕様</h4>
+                            <div class="space-y-1">
+                                <div class="flex"><p class="w-20 text-gray-500 shrink-0">カラー:</p><p class="font-medium text-gray-800">5col</p></div>
+                            </div>
+                        </div>
+                         <div>
+                            <h4 class="font-bold text-gray-500 mb-2">配送情報</h4>
+                            <div class="space-y-1">
+                                <div class="flex"><p class="w-20 text-gray-500 shrink-0">配送先:</p><p class="font-medium text-gray-800">福岡県小郡</p></div>
+                                <div class="flex"><p class="w-20 text-gray-500 shrink-0">備考:</p><p class="font-medium text-gray-800">アマゾン直送便</p></div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="p-5 bg-gray-50 rounded-b-xl flex justify-between items-center">
+                        <div>
+                            <span class="text-gray-500">数量:</span>
+                            <span class="text-2xl font-bold text-indigo-600">1</span>
+                        </div>
+                        <button class="font-medium text-indigo-600 hover:underline flex items-center">
+                            編集 <ion-icon name="create-outline" class="ml-1"></ion-icon>
+                        </button>
+                    </div>
+                </div>
+                <!-- サンプルデータ 4 -->
+                <div class="instruction-card fade-in bg-white rounded-xl shadow-md flex flex-col transition-all duration-300" style="animation-delay: 0.15s;" data-line="その他" data-content="ピロー スタンダード white 保証書 路線 サンプル出荷">
+                    <div class="p-5 border-b border-gray-200 flex justify-between items-start">
+                        <div>
+                            <span class="px-3 py-1 text-sm font-semibold rounded-full bg-gray-200 text-gray-800">その他</span>
+                            <h3 class="text-xl font-bold text-gray-900 mt-2">ピロー <span class="text-base text-gray-600 font-normal">/ スタンダード</span></h3>
+                        </div>
+                        <div class="text-right flex-shrink-0">
+                           <label class="flex items-center cursor-pointer">
+                                <div class="relative">
+                                    <input type="checkbox" class="completion-checkbox hidden">
+                                    <div class="toggle-bg w-12 h-7 bg-gray-200 rounded-full shadow-inner transition-colors duration-300"></div>
+                                    <div class="dot absolute w-5 h-5 bg-white rounded-full shadow left-1 top-1 transition-transform duration-300"></div>
+                                </div>
+                                <div class="ml-3 text-gray-700 font-semibold text-sm">完了</div>
+                            </label>
+                        </div>
+                    </div>
+                     <div class="p-5 flex-grow space-y-4 text-sm">
+                        <div>
+                            <h4 class="font-bold text-gray-500 mb-2">仕様</h4>
+                            <div class="space-y-1">
+                                <div class="flex"><p class="w-20 text-gray-500 shrink-0">カラー:</p><p class="font-medium text-gray-800">White</p></div>
+                                <div class="flex"><p class="w-20 text-gray-500 shrink-0">同梱品:</p><p class="font-medium text-gray-800">保証書</p></div>
+                            </div>
+                        </div>
+                         <div>
+                            <h4 class="font-bold text-gray-500 mb-2">配送情報</h4>
+                             <div class="space-y-1">
+                               <div class="flex"><p class="w-20 text-gray-500 shrink-0">配送方法:</p><p class="font-medium text-gray-800">路線</p></div>
+                               <div class="flex"><p class="w-20 text-gray-500 shrink-0">備考:</p><p class="font-medium text-gray-800">サンプル出荷</p></div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="p-5 bg-gray-50 rounded-b-xl flex justify-between items-center">
+                        <div>
+                            <span class="text-gray-500">数量:</span>
+                            <span class="text-2xl font-bold text-indigo-600">5</span>
+                        </div>
+                        <button class="font-medium text-indigo-600 hover:underline flex items-center">
+                            編集 <ion-icon name="create-outline" class="ml-1"></ion-icon>
+                        </button>
+                    </div>
+                </div>
+            </div>
+            <div id="no-results" class="hidden text-center py-12">
+                <ion-icon name="sad-outline" class="text-5xl text-gray-400 mx-auto"></ion-icon>
+                <p class="mt-4 text-lg font-medium text-gray-600">該当する指示が見つかりませんでした。</p>
+                <p class="text-sm text-gray-500">検索条件を変更して、もう一度お試しください。</p>
+            </div>
+        </main>
+
+        <!-- フッター -->
+        <footer class="bg-white mt-8 py-4 px-4 sm:px-6 lg:px-8 border-t border-gray-200">
+            <div class="text-center text-sm text-gray-500">
+                &copy; 2024 生産管理システム. All Rights Reserved.
+            </div>
+        </footer>
+
+        <!-- フローティング追加ボタン -->
+        <button id="add-instruction-button" class="fixed bottom-8 right-8 bg-indigo-600 hover:bg-indigo-700 text-white w-16 h-16 rounded-full shadow-lg flex items-center justify-center transition-transform transform hover:scale-110 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 z-10">
+            <ion-icon name="add-outline" class="text-4xl"></ion-icon>
+        </button>
+
+    </div>
+
+    <!-- 追加・編集モーダル -->
+    <div id="instruction-modal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-75 flex items-center justify-center z-30 p-4">
+        <div class="bg-white rounded-xl shadow-2xl w-full max-w-3xl modal-enter">
+            <div class="p-6 border-b border-gray-200 flex justify-between items-center">
+                <h2 class="text-xl font-bold">新規 製造指示</h2>
+                <button id="modal-close-button" class="text-gray-400 hover:text-gray-600">
+                    <ion-icon name="close-outline" class="text-3xl"></ion-icon>
+                </button>
+            </div>
+            <form id="instruction-form">
+                <div class="p-6 max-h-[70vh] overflow-y-auto">
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-4">
+                        <div>
+                            <label for="form-line" class="block text-sm font-medium text-gray-700">担当ライン</label>
+                            <select id="form-line" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
+                                <option>マット</option>
+                                <option>ボトム</option>
+                                <option>その他</option>
+                            </select>
+                        </div>
+                        <div>
+                            <label for="form-quantity" class="block text-sm font-medium text-gray-700">数量</label>
+                            <input type="number" id="form-quantity" value="1" class="mt-1 w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
+                        </div>
+                        <div class="md:col-span-2">
+                            <label for="form-product-name" class="block text-sm font-medium text-gray-700">品名</label>
+                            <input type="text" id="form-product-name" placeholder="例: マット" class="mt-1 w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
+                        </div>
+                        <div>
+                            <label for="form-size" class="block text-sm font-medium text-gray-700">サイズ</label>
+                            <input type="text" id="form-size" placeholder="例: 1200x1950x240 / SD" class="mt-1 w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
+                        </div>
+                        <div>
+                            <label for="form-color" class="block text-sm font-medium text-gray-700">カラー</label>
+                            <input type="text" id="form-color" placeholder="例: GM/BE" class="mt-1 w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
+                        </div>
+                         <div>
+                            <label for="form-spring" class="block text-sm font-medium text-gray-700">バネ</label>
+                            <input type="text" id="form-spring" placeholder="例: 1.9" class="mt-1 w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
+                        </div>
+                        <div>
+                            <label for="form-included-items" class="block text-sm font-medium text-gray-700">同梱品</label>
+                            <input type="text" id="form-included-items" placeholder="例: 西川仕様" class="mt-1 w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
+                        </div>
+                        <div>
+                            <label for="form-shipping-method" class="block text-sm font-medium text-gray-700">配送方法</label>
+                            <input type="text" id="form-shipping-method" placeholder="例: 匠" class="mt-1 w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
+                        </div>
+                         <div>
+                            <label for="form-destination" class="block text-sm font-medium text-gray-700">配送先</label>
+                            <input type="text" id="form-destination" placeholder="例: フラワー / ホテル" class="mt-1 w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
+                        </div>
+                        <div class="md:col-span-2">
+                            <label for="form-remarks" class="block text-sm font-medium text-gray-700">備考</label>
+                            <textarea id="form-remarks" rows="2" class="mt-1 w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" placeholder="特記事項など"></textarea>
+                        </div>
+                    </div>
+                </div>
+                <div class="p-6 bg-gray-50 rounded-b-xl flex justify-end space-x-4">
+                    <button type="button" id="modal-cancel-button" class="px-6 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">キャンセル</button>
+                    <button type="submit" id="modal-save-button" class="px-6 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">保存</button>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            const cardList = document.getElementById('instruction-card-list');
+            const fontSizeToggle = document.getElementById('font-size-toggle');
+            const rootElement = document.documentElement;
+
+            const filterTextInput = document.getElementById('filter-text');
+            const filterLineSelect = document.getElementById('filter-line');
+            const filterCompletedSelect = document.getElementById('filter-completed');
+            
+            const modal = document.getElementById('instruction-modal');
+            const openModalButton = document.getElementById('add-instruction-button');
+            const closeModalButton = document.getElementById('modal-close-button');
+            const cancelButton = document.getElementById('modal-cancel-button');
+            const instructionForm = document.getElementById('instruction-form');
+            const noResultsDiv = document.getElementById('no-results');
+
+            function filterCards() {
+                const textFilter = filterTextInput.value.toLowerCase();
+                const lineFilter = filterLineSelect.value;
+                const completedFilter = filterCompletedSelect.value;
+                const instructionCards = document.querySelectorAll('.instruction-card');
+                let visibleCount = 0;
+
+                instructionCards.forEach(card => {
+                    const content = card.dataset.content.toLowerCase();
+                    const line = card.dataset.line;
+                    const isCompleted = card.classList.contains('completed-card');
+
+                    const textMatch = content.includes(textFilter);
+                    const lineMatch = lineFilter === 'すべて' || line === lineFilter;
+                    
+                    let completedMatch = true;
+                    if (completedFilter === 'completed') {
+                        completedMatch = isCompleted;
+                    } else if (completedFilter === 'not-completed') {
+                        completedMatch = !isCompleted;
+                    }
+
+                    if (textMatch && lineMatch && completedMatch) {
+                        card.style.display = 'flex';
+                        visibleCount++;
+                    } else {
+                        card.style.display = 'none';
+                    }
+                });
+
+                noResultsDiv.style.display = visibleCount === 0 ? 'block' : 'none';
+            }
+
+            filterTextInput.addEventListener('input', filterCards);
+            filterLineSelect.addEventListener('change', filterCards);
+            filterCompletedSelect.addEventListener('change', filterCards);
+
+            cardList.addEventListener('change', (event) => {
+                const checkbox = event.target;
+                if (checkbox.classList.contains('completion-checkbox')) {
+                    const card = checkbox.closest('.instruction-card');
+                    const toggleBg = checkbox.nextElementSibling;
+                    const dot = toggleBg.nextElementSibling;
+
+                    if (checkbox.checked) {
+                        card.classList.add('completed-card');
+                        toggleBg.classList.remove('bg-gray-200');
+                        toggleBg.classList.add('bg-indigo-500');
+                        dot.classList.add('translate-x-full');
+                    } else {
+                        card.classList.remove('completed-card');
+                        toggleBg.classList.add('bg-gray-200');
+                        toggleBg.classList.remove('bg-indigo-500');
+                        dot.classList.remove('translate-x-full');
+                    }
+                    filterCards();
+                }
+            });
+
+            fontSizeToggle.addEventListener('change', (event) => {
+                const toggleBg = event.target.nextElementSibling;
+                const dot = toggleBg.nextElementSibling;
+
+                if(event.target.checked) {
+                    rootElement.classList.add('text-large');
+                    toggleBg.classList.remove('bg-gray-200');
+                    toggleBg.classList.add('bg-indigo-500');
+                    dot.classList.add('translate-x-full');
+                } else {
+                    rootElement.classList.remove('text-large');
+                    toggleBg.classList.add('bg-gray-200');
+                    toggleBg.classList.remove('bg-indigo-500');
+                    dot.classList.remove('translate-x-full');
+                }
+            });
+
+            // モーダル関連の処理
+            function openModal() { modal.classList.remove('hidden'); }
+            function closeModal() { modal.classList.add('hidden'); }
+
+            openModalButton.addEventListener('click', openModal);
+            closeModalButton.addEventListener('click', closeModal);
+            cancelButton.addEventListener('click', closeModal);
+            modal.addEventListener('click', (e) => {
+                if (e.target === modal) {
+                    closeModal();
+                }
+            });
+
+            instructionForm.addEventListener('submit', (e) => {
+                e.preventDefault();
+                // ここでデータを保存する処理を実装します。
+                // 今回はコンソールにログを出力するだけにします。
+                const formData = new FormData(instructionForm);
+                const data = Object.fromEntries(formData.entries());
+                console.log('保存データ:', data);
+                alert('新しい指示が保存されました！(コンソールを確認)');
+                // 実際にはここで新しいカードをDOMに追加する処理も必要
+                closeModal();
+                instructionForm.reset();
+            });
+        });
+    </script>
+
+</body>
+</html>
diff --git "a/docs/\347\224\273\351\235\242\346\247\213\346\210\220\350\250\255\350\250\210/\351\203\250\345\223\201\345\234\250\345\272\253\347\256\241\347\220\206.html" "b/docs/\347\224\273\351\235\242\346\247\213\346\210\220\350\250\255\350\250\210/\351\203\250\345\223\201\345\234\250\345\272\253\347\256\241\347\220\206.html"
new file mode 100644
index 000000000..a98c4e69a
--- /dev/null
+++ "b/docs/\347\224\273\351\235\242\346\247\213\346\210\220\350\250\255\350\250\210/\351\203\250\345\223\201\345\234\250\345\272\253\347\256\241\347\220\206.html"
@@ -0,0 +1,1094 @@
+<!DOCTYPE html>
+<html lang="ja">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>部品在庫管理</title>
+    <!-- Tailwind CSSを読み込む -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Google Fonts (Inter) を読み込む -->
+    <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=Inter:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;700&display=swap"
+        rel="stylesheet">
+    <!-- Ioniconsを読み込む -->
+    <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
+    <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
+    <style>
+        /* フォント設定 */
+        body {
+            font-family: 'Inter', 'Noto Sans JP', sans-serif;
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
+        }
+
+        /* スクロールバーのスタイル（任意） */
+        ::-webkit-scrollbar {
+            width: 8px;
+            height: 8px;
+            /* 横スクロールバーの高さ */
+        }
+
+        ::-webkit-scrollbar-track {
+            background: #f1f5f9;
+        }
+
+        ::-webkit-scrollbar-thumb {
+            background: #94a3b8;
+            border-radius: 4px;
+        }
+
+        ::-webkit-scrollbar-thumb:hover {
+            background: #64748b;
+        }
+
+        /* アニメーション */
+        .fade-in {
+            animation: fadeIn 0.5s ease-in-out forwards;
+        }
+
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+                transform: translateY(10px);
+            }
+
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        .modal-enter {
+            animation: modal-enter-animation 0.3s ease-out forwards;
+        }
+
+        @keyframes modal-enter-animation {
+            from {
+                opacity: 0;
+                transform: scale(0.95);
+            }
+
+            to {
+                opacity: 1;
+                transform: scale(1);
+            }
+        }
+
+        /* 選択されたスロットのスタイル */
+        .selected-slot {
+            outline: 4px solid #4f46e5;
+            /* indigo-600 */
+            transform: scale(1.02);
+        }
+
+        /* 検索でハイライトされたスロットのスタイル */
+        .highlight-slot {
+            animation: pulse 1.5s infinite;
+        }
+
+        @keyframes pulse {
+
+            0%,
+            100% {
+                box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.7);
+            }
+
+            50% {
+                box-shadow: 0 0 0 10px rgba(99, 102, 241, 0);
+            }
+        }
+
+        /* 移動モードのスタイル */
+        .move-mode-empty {
+            background-color: #d1fae5 !important;
+            /* green-100 */
+            outline: 2px dashed #10b981;
+            /* green-500 */
+        }
+
+        .move-mode-origin {
+            animation: pulse-red 1.5s infinite;
+        }
+
+        @keyframes pulse-red {
+
+            0%,
+            100% {
+                box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
+            }
+
+            50% {
+                box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
+            }
+        }
+
+        /* QRスキャナーの点滅アニメーション */
+        .scanner-line {
+            animation: scan 2s linear infinite;
+        }
+
+        @keyframes scan {
+
+            0%,
+            100% {
+                top: 0;
+            }
+
+            50% {
+                top: 100%;
+            }
+        }
+
+        /* FABメニューアイテムのアニメーション */
+        .fab-item {
+            transform: scale(0);
+            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+
+        /* ヘッダーハイライトのスタイル */
+        .header-highlight {
+            background-color: #c7d2fe;
+            /* indigo-200 */
+            color: #3730a3;
+            /* indigo-800 */
+        }
+    </style>
+</head>
+
+<body class="bg-slate-100 text-gray-800">
+
+    <div class="flex flex-col min-h-screen">
+
+        <!-- ヘッダー -->
+        <header class="bg-white shadow-md sticky top-0 z-30">
+            <div class="container mx-auto px-4 sm:px-6 lg:px-8">
+                <div class="flex items-center justify-between h-16">
+                    <div class="flex items-center space-x-4">
+                        <div class="bg-indigo-600 p-2 rounded-lg">
+                            <ion-icon name="cube-outline" class="text-white text-2xl"></ion-icon>
+                        </div>
+                        <h1 class="text-xl font-bold text-gray-900">部品在庫管理</h1>
+                    </div>
+                    <div class="flex items-center space-x-4">
+                        <a href="#" class="text-sm font-medium text-indigo-600 hover:text-indigo-800">&larr;
+                            ダッシュボードに戻る</a>
+                        <button
+                            class="flex items-center justify-center bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded-lg transition duration-300 ease-in-out transform hover:scale-105">
+                            <ion-icon name="log-out-outline" class="mr-2 text-xl"></ion-icon>
+                            ログアウト
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </header>
+
+        <!-- メインコンテンツ -->
+        <main class="flex-grow container mx-auto p-4 sm:p-6 lg:p-8">
+            <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
+                <!-- 左カラム: ラック選択 -->
+                <aside class="lg:col-span-1 bg-white rounded-xl shadow-md p-4">
+                    <h2 class="text-lg font-bold mb-4 border-b pb-2">ラック一覧</h2>
+                    <ul id="rack-list" class="space-y-2">
+                        <!-- ラックリストはJSで動的に生成 -->
+                    </ul>
+                </aside>
+
+                <!-- 右カラム: ラック表示と詳細 -->
+                <div class="lg:col-span-3 grid grid-cols-1 lg:grid-cols-3 gap-8">
+                    <!-- メッシュラック -->
+                    <div class="lg:col-span-2">
+                        <div class="flex items-center justify-between mb-4">
+                            <h2 id="rack-name" class="text-2xl font-bold"></h2>
+                            <button id="bulk-qr-btn"
+                                class="flex items-center bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-3 rounded-lg text-sm transition-transform transform hover:scale-105">
+                                <ion-icon name="print-outline" class="mr-2"></ion-icon>
+                                一括QR生成
+                            </button>
+                        </div>
+                        <div class="overflow-x-auto bg-white p-2 pl-0 rounded-xl shadow-md">
+                            <div id="rack-display-area" class="min-w-max">
+                                <!-- JS will build the labeled grid here -->
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- 詳細と操作 -->
+                    <div class="lg:col-span-1">
+                        <div class="bg-white rounded-xl shadow-md p-6 sticky top-24">
+                            <h2 class="text-2xl font-bold mb-4">情報・操作</h2>
+                            <!-- 検索 -->
+                            <div class="mb-6">
+                                <label for="search-parts" class="block text-sm font-medium text-gray-700">部品を検索</label>
+                                <div class="mt-1 relative rounded-md shadow-sm">
+                                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                                        <ion-icon name="search-outline" class="text-gray-400"></ion-icon>
+                                    </div>
+                                    <input type="text" id="search-parts"
+                                        class="focus:ring-indigo-500 focus:border-indigo-500 block w-full pl-10 sm:text-sm border-gray-300 rounded-md"
+                                        placeholder="部品名 or 型番">
+                                </div>
+                            </div>
+                            <!-- 詳細表示 -->
+                            <div id="details-panel">
+                                <div class="text-center text-gray-500 py-10">
+                                    <ion-icon name="grid-outline" class="text-5xl mx-auto"></ion-icon>
+                                    <p class="mt-2">ラックの場所を選択して詳細を表示</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </div>
+
+    <!-- フローティングアクションボタン (FAB) -->
+    <div class="fixed bottom-8 right-8 z-20" id="fab-container">
+        <!-- FABメニュー -->
+        <div id="fab-menu" class="flex flex-col items-end space-y-3 mb-3">
+            <button id="add-rack-btn" data-tooltip="新しいラックを作成"
+                class="fab-item flex items-center bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-3 rounded-full shadow-lg">
+                <ion-icon name="add-circle-outline" class="text-xl"></ion-icon>
+                <span class="ml-2 text-sm">ラック作成</span>
+            </button>
+            <button id="qr-stock-in-btn" data-tooltip="QR入庫"
+                class="fab-item flex items-center bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-3 rounded-full shadow-lg">
+                <ion-icon name="qr-code-outline" class="text-xl"></ion-icon>
+                <span class="ml-2 text-sm">QR入庫</span>
+            </button>
+        </div>
+        <!-- メインFAB -->
+        <button id="fab-main"
+            class="w-16 h-16 flex items-center justify-center bg-indigo-600 hover:bg-indigo-700 text-white font-bold rounded-full shadow-lg transition-transform transform hover:scale-110">
+            <ion-icon id="fab-icon" name="add-outline" class="text-4xl transition-transform duration-300"></ion-icon>
+        </button>
+    </div>
+
+
+    <!-- モーダル -->
+    <div id="modal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-75 flex items-center justify-center z-40 p-4">
+        <div id="modal-content" class="bg-white rounded-xl shadow-2xl w-full max-w-md modal-enter">
+            <!-- モーダルの中身はJSで動的に生成 -->
+        </div>
+    </div>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            // =============================
+            // 画面ロジック概要
+            // - ダミーAPIデータをアプリ内部形式へ変換
+            // - 左: ラック一覧 / 右: ラックメッシュ + 詳細パネル
+            // - 操作: 部品使用・格納・移動、棚QR表示、棚QR一括生成
+            // - モーダルは openModal/closeModal で共通管理
+            // =============================
+
+            // APIから返ってくるであろうサンプルデータ
+            const mockApiData = [
+                {
+                    "rack_id": 1,
+                    "rack_name": "スプリング・小物資材ラック",
+                    "slots": [
+                        { "slot_id": "A-1", "part": { "part_name": "ポケットコイル (シングル)", "part_model_number": "PC-S-H20", "quantity": 25, "color_code": "4A90E2" } },
+                        { "slot_id": "A-2", "part": { "part_name": "ポケットコイル (シングル)", "part_model_number": "PC-S-H20", "quantity": 25, "color_code": "4A90E2" } },
+                        { "slot_id": "A-3", "part": null },
+                        { "slot_id": "A-4", "part": { "part_name": "ボンネルコイル (セミダブル)", "part_model_number": "BC-SD-H18", "quantity": 20, "color_code": "50E3C2" } },
+                        { "slot_id": "B-1", "part": { "part_name": "コーナーガード", "part_model_number": "CG-STD", "quantity": 500, "color_code": "9B9B9B" } },
+                        { "slot_id": "B-2", "part": { "part_name": "製品ラベルセット", "part_model_number": "LBL-PREMIUM", "quantity": 1000, "color_code": "F5A623" } },
+                        { "slot_id": "B-3", "part": null },
+                        { "slot_id": "B-4", "part": { "part_name": "強化縫製糸 (白)", "part_model_number": "THD-W-HV", "quantity": 50, "color_code": "E9E9E9" } },
+                        { "slot_id": "C-1", "part": null },
+                        { "slot_id": "C-2", "part": { "part_name": "ボンネルコイル (セミダブル)", "part_model_number": "BC-SD-H18", "quantity": 20, "color_code": "50E3C2" } },
+                        { "slot_id": "C-3", "part": null },
+                        { "slot_id": "C-4", "part": { "part_name": "ジッパー (200cm)", "part_model_number": "ZIP-200", "quantity": 150, "color_code": "D0021B" } },
+                    ]
+                },
+                {
+                    "rack_id": 2,
+                    "rack_name": "ウレタンフォーム保管棚",
+                    "slots": [
+                        { "slot_id": "A-1", "part": { "part_name": "低反発ウレタン 20mm (S)", "part_model_number": "MF-T20-S", "quantity": 40, "color_code": "4A90E2" } },
+                        { "slot_id": "A-2", "part": { "part_name": "低反発ウレタン 20mm (S)", "part_model_number": "MF-T20-S", "quantity": 40, "color_code": "4A90E2" } },
+                        { "slot_id": "A-3", "part": { "part_name": "高反発ウレタン 30mm (S)", "part_model_number": "HR-T30-S", "quantity": 40, "color_code": "7ED321" } },
+                        { "slot_id": "A-4", "part": { "part_name": "高反発ウレタン 30mm (S)", "part_model_number": "HR-T30-S", "quantity": 40, "color_code": "7ED321" } },
+                        { "slot_id": "A-5", "part": null },
+                        { "slot_id": "A-6", "part": null },
+                        { "slot_id": "B-1", "part": { "part_name": "低反発ウレタン 20mm (SD)", "part_model_number": "MF-T20-SD", "quantity": 30, "color_code": "4A90E2" } },
+                        { "slot_id": "B-2", "part": { "part_name": "低反発ウレタン 20mm (SD)", "part_model_number": "MF-T20-SD", "quantity": 30, "color_code": "4A90E2" } },
+                        { "slot_id": "B-3", "part": { "part_name": "高反発ウレタン 30mm (SD)", "part_model_number": "HR-T30-SD", "quantity": 30, "color_code": "7ED321" } },
+                        { "slot_id": "B-4", "part": { "part_name": "高反発ウレタン 30mm (SD)", "part_model_number": "HR-T30-SD", "quantity": 30, "color_code": "7ED321" } },
+                        { "slot_id": "B-5", "part": null },
+                        { "slot_id": "B-6", "part": null },
+                        { "slot_id": "C-1", "part": { "part_name": "ラテックスフォーム 40mm (D)", "part_model_number": "LTX-T40-D", "quantity": 20, "color_code": "F8E71C" } },
+                        { "slot_id": "C-2", "part": null },
+                        { "slot_id": "C-3", "part": null },
+                        { "slot_id": "C-4", "part": null },
+                        { "slot_id": "C-5", "part": null },
+                        { "slot_id": "C-6", "part": null },
+                    ]
+                },
+                {
+                    "rack_id": 3,
+                    "rack_name": "生地・充填材ラック",
+                    "slots": [
+                        { "slot_id": "A-1", "part": { "part_name": "ニット生地 (クール)", "part_model_number": "FAB-KN-COOL", "quantity": 15, "color_code": "BD10E0" } },
+                        { "slot_id": "A-2", "part": { "part_name": "ニット生地 (オーガニック)", "part_model_number": "FAB-KN-OGN", "quantity": 15, "color_code": "BD10E0" } },
+                        { "slot_id": "A-3", "part": null },
+                        { "slot_id": "B-1", "part": { "part_name": "フェルトパッド (ハード)", "part_model_number": "FLT-HD-S", "quantity": 200, "color_code": "9B9B9B" } },
+                        { "slot_id": "B-2", "part": { "part_name": "フェルトパッド (ハード)", "part_model_number": "FLT-HD-S", "quantity": 200, "color_code": "9B9B9B" } },
+                        { "slot_id": "B-3", "part": { "part_name": "フェルトパッド (ソフト)", "part_model_number": "FLT-SF-S", "quantity": 200, "color_code": "4A4A4A" } },
+                    ]
+                }
+            ];
+
+            // APIデータをアプリ内部で使いやすい形式に変換する関数
+            function transformApiDataToAppData(apiData) {
+                return apiData.map(rack => {
+                    const slotsObject = {};
+                    let maxRow = 0;
+                    let maxCol = 0;
+
+                    if (rack.slots) {
+                        rack.slots.forEach(slot => {
+                            if (slot.part) {
+                                slotsObject[slot.slot_id] = {
+                                    partName: slot.part.part_name,
+                                    partModelNumber: slot.part.part_model_number,
+                                    quantity: slot.part.quantity,
+                                    color: slot.part.color_code
+                                };
+                            } else {
+                                slotsObject[slot.slot_id] = null;
+                            }
+                            const [rowChar, colNumStr] = slot.slot_id.split('-');
+                            const rowNum = rowChar.charCodeAt(0) - 64;
+                            const colNum = parseInt(colNumStr);
+                            if (rowNum > maxRow) maxRow = rowNum;
+                            if (colNum > maxCol) maxCol = colNum;
+                        });
+                    }
+
+                    return {
+                        id: `rack-${rack.rack_id}`,
+                        name: rack.rack_name,
+                        rows: maxRow,
+                        cols: maxCol,
+                        slots: slotsObject
+                    };
+                });
+            }
+
+            // ===== アプリ全体の状態 =====
+            let racks = transformApiDataToAppData(mockApiData);
+            let currentRackId = racks.length > 0 ? racks[0].id : null;
+            let selectedSlotId = null;
+            let isMoveMode = false;
+            let moveOriginSlotId = null;
+
+            // ===== DOM参照の取得 =====
+            const rackNameEl = document.getElementById('rack-name');
+            const rackListEl = document.getElementById('rack-list');
+            const detailsPanel = document.getElementById('details-panel');
+            const searchInput = document.getElementById('search-parts');
+            const modal = document.getElementById('modal');
+            const modalContent = document.getElementById('modal-content');
+            const bulkQrBtn = document.getElementById('bulk-qr-btn');
+            const fabMain = document.getElementById('fab-main');
+            const fabIcon = document.getElementById('fab-icon');
+            const fabMenuItems = document.querySelectorAll('.fab-item');
+
+            // 初期描画
+            function renderApp() {
+                renderRackList();
+                renderCurrentRack();
+                updateDetails(null);
+            }
+
+            // ラック一覧の描画
+            function renderRackList() {
+                rackListEl.innerHTML = '';
+                racks.forEach(rack => {
+                    const li = document.createElement('li');
+                    li.className = 'group relative';
+                    li.innerHTML = `
+                        <a href="#" data-rack-id="${rack.id}" class="rack-list-item flex items-center justify-between py-2 pl-2 pr-10 rounded-lg transition-colors duration-200 ${rack.id === currentRackId ? 'bg-indigo-100 text-indigo-700 font-bold' : 'hover:bg-gray-100'}">
+                            <span class="truncate pr-4">${rack.name}</span>
+                            <span class="text-xs text-gray-500 flex-shrink-0">${rack.rows}x${rack.cols}</span>
+                        </a>
+                        <button data-action="delete-rack" data-rack-id="${rack.id}" data-rack-name="${rack.name}" class="absolute right-2 top-1/2 -translate-y-1/2 p-1 rounded-full text-gray-400 hover:bg-red-100 hover:text-red-600 opacity-0 group-hover:opacity-100 transition-opacity">
+                            <ion-icon name="trash-outline" class="pointer-events-none"></ion-icon>
+                        </button>
+                    `;
+                    rackListEl.appendChild(li);
+                });
+            }
+
+            // メッシュラックの描画
+            function renderCurrentRack() {
+                const rackDisplayArea = document.getElementById('rack-display-area');
+                rackDisplayArea.innerHTML = '';
+                const currentRack = racks.find(r => r.id === currentRackId);
+
+                if (!currentRack) {
+                    rackNameEl.textContent = 'ラックがありません';
+                    rackDisplayArea.innerHTML = '<p class="text-center text-gray-500 p-10">右下のボタンから新しいラックを作成してください。</p>';
+                    bulkQrBtn.classList.add('hidden');
+                    return;
+                }
+
+                bulkQrBtn.classList.remove('hidden');
+                rackNameEl.textContent = currentRack.name;
+
+                const layoutContainer = document.createElement('div');
+                layoutContainer.className = 'grid bg-white';
+                layoutContainer.style.gridTemplateColumns = 'auto 1fr';
+                layoutContainer.style.gridTemplateRows = 'auto 1fr';
+
+                const corner = document.createElement('div');
+                corner.className = 'w-12 h-8 sticky left-0 top-0 z-20 bg-white';
+                layoutContainer.appendChild(corner);
+
+                const colHeadersContainer = document.createElement('div');
+                colHeadersContainer.className = 'grid sticky top-0 z-10 bg-white';
+                colHeadersContainer.style.gridTemplateColumns = `repeat(${currentRack.cols}, 9rem)`;
+                colHeadersContainer.style.gap = '1rem';
+                colHeadersContainer.style.paddingLeft = '1rem';
+                for (let c = 1; c <= currentRack.cols; c++) {
+                    const header = document.createElement('div');
+                    header.className = 'h-8 flex items-end justify-center font-bold text-gray-500 rounded-md transition-colors duration-200';
+                    header.textContent = c;
+                    if (selectedSlotId && selectedSlotId.split('-')[1] == c) {
+                        header.classList.add('header-highlight');
+                    }
+                    colHeadersContainer.appendChild(header);
+                }
+                layoutContainer.appendChild(colHeadersContainer);
+
+                const rowHeadersContainer = document.createElement('div');
+                rowHeadersContainer.className = 'grid sticky left-0 bg-white z-10';
+                rowHeadersContainer.style.gridTemplateRows = `repeat(${currentRack.rows}, 9rem)`;
+                rowHeadersContainer.style.gap = '1rem';
+                rowHeadersContainer.style.paddingTop = '1rem';
+                for (let r = 1; r <= currentRack.rows; r++) {
+                    const rowChar = String.fromCharCode(64 + r);
+                    const header = document.createElement('div');
+                    header.className = 'w-12 flex items-center justify-center font-bold text-gray-500 rounded-md transition-colors duration-200';
+                    header.textContent = rowChar;
+                    if (selectedSlotId && selectedSlotId.split('-')[0] === rowChar) {
+                        header.classList.add('header-highlight');
+                    }
+                    rowHeadersContainer.appendChild(header);
+                }
+                layoutContainer.appendChild(rowHeadersContainer);
+
+                const rackContainer = document.createElement('div');
+                rackContainer.id = 'mesh-rack';
+                rackContainer.className = 'grid gap-4 bg-gray-200 p-4 rounded-xl shadow-inner';
+                rackContainer.style.gridTemplateColumns = `repeat(${currentRack.cols}, 9rem)`;
+                rackContainer.style.gridTemplateRows = `repeat(${currentRack.rows}, 9rem)`;
+
+                for (let r = 1; r <= currentRack.rows; r++) {
+                    const rowChar = String.fromCharCode(64 + r);
+                    for (let c = 1; c <= currentRack.cols; c++) {
+                        const slotId = `${rowChar}-${c}`;
+                        const part = currentRack.slots[slotId];
+                        const slot = document.createElement('div');
+                        slot.id = `slot-${slotId}`;
+                        slot.dataset.slotId = slotId;
+                        slot.className = 'rack-slot aspect-square bg-gray-300/50 rounded-lg flex flex-col justify-between p-2 cursor-pointer transition-all duration-300 hover:bg-gray-300';
+                        let content = `<div class="text-sm font-bold text-gray-500">${slotId}</div>`;
+                        if (part) {
+                            slot.classList.add('bg-white', 'shadow');
+                            content += `
+                                <div class="text-center overflow-hidden min-w-0">
+                                    <div class="w-full h-4 rounded-full mb-2" style="background-color: #${part.color};"></div>
+                                    <p class="font-bold text-gray-800 text-sm truncate">${part.partName}</p>
+                                    <p class="text-xs text-gray-500 truncate">${part.partModelNumber || ''}</p>
+                                </div>
+                                <div class="text-right text-lg font-bold">${part.quantity}</div>`;
+                        } else if (isMoveMode) {
+                            slot.classList.add('move-mode-empty');
+                        }
+                        slot.innerHTML = content;
+                        rackContainer.appendChild(slot);
+                    }
+                }
+                layoutContainer.appendChild(rackContainer);
+                rackDisplayArea.appendChild(layoutContainer);
+
+                if (selectedSlotId) {
+                    const selectedEl = document.getElementById(`slot-${selectedSlotId}`);
+                    if (selectedEl) selectedEl.classList.add('selected-slot');
+                }
+                if (isMoveMode && moveOriginSlotId) {
+                    const originEl = document.getElementById(`slot-${moveOriginSlotId}`);
+                    if (originEl) originEl.classList.add('move-mode-origin');
+                }
+            }
+
+            // 詳細パネルの更新
+            function updateDetails(slotId) {
+                selectedSlotId = slotId;
+                const currentRack = racks.find(r => r.id === currentRackId);
+                let content = '';
+
+                if (!currentRack) {
+                    detailsPanel.innerHTML = '<div class="text-center text-gray-500 py-10"><ion-icon name="grid-outline" class="text-5xl mx-auto"></ion-icon><p class="mt-2">ラックを選択してください</p></div>';
+                    renderCurrentRack();
+                    return;
+                }
+
+                const part = slotId ? currentRack.slots[slotId] : null;
+
+                if (part) {
+                    content = `
+                        <div class="fade-in">
+                            <div class="flex items-center mb-4"><div class="w-4 h-4 rounded-full mr-3" style="background-color: #${part.color};"></div><h3 class="text-xl font-bold">${part.partName}</h3></div>
+                            <div class="space-y-2 text-sm">
+                                <p><strong class="w-24 inline-block text-gray-500">部品型番:</strong> ${part.partModelNumber || 'N/A'}</p>
+                                <p><strong class="w-24 inline-block text-gray-500">現在庫数:</strong> <span class="text-2xl font-bold">${part.quantity}</span></p>
+                                <p><strong class="w-24 inline-block text-gray-500">保管場所:</strong> <span class="text-lg font-bold">${currentRack.name} / ${slotId}</span></p>
+                            </div>
+                            <div class="mt-6 border-t pt-4 space-y-2">
+                                <button data-action="use" data-slot-id="${slotId}" class="w-full bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700">部品を使用</button>
+                                <button data-action="move" data-slot-id="${slotId}" class="w-full bg-gray-200 text-gray-800 px-4 py-2 rounded-md hover:bg-gray-300">箱を移動</button>
+                                <div class="grid grid-cols-2 gap-2">
+                                  <button data-action="edit" data-slot-id="${slotId}" class="w-full bg-gray-200 text-gray-800 px-4 py-2 rounded-md hover:bg-gray-300 flex items-center justify-center"><ion-icon name="pencil-outline" class="mr-2"></ion-icon>編集</button>
+                                  <button data-action="delete" data-slot-id="${slotId}" class="w-full bg-red-100 text-red-700 px-4 py-2 rounded-md hover:bg-red-200 flex items-center justify-center"><ion-icon name="trash-bin-outline" class="mr-2"></ion-icon>削除</button>
+                                </div>
+                                <hr class="my-2"/>
+                                <button data-action="show-shelf-qr" data-slot-id="${slotId}" class="w-full bg-gray-200 text-gray-800 px-4 py-2 rounded-md hover:bg-gray-300 flex items-center justify-center"><ion-icon name="grid-outline" class="mr-2"></ion-icon>棚QRコードを生成</button>
+                            </div>
+                        </div>`;
+                } else if (slotId) {
+                    content = `
+                        <div class="fade-in text-center py-6">
+                            <p class="text-lg font-bold mb-2">場所: ${currentRack.name} / ${slotId}</p>
+                            <ion-icon name="archive-outline" class="text-5xl text-gray-400 mx-auto"></ion-icon>
+                            <p class="mt-2 text-gray-500">この場所は空です</p>
+                            <div class="mt-6 space-y-2">
+                                <button data-action="store" data-slot-id="${slotId}" class="w-full bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700">新しい箱を格納</button>
+                                <button data-action="show-shelf-qr" data-slot-id="${slotId}" class="w-full bg-gray-200 text-gray-800 px-4 py-2 rounded-md hover:bg-gray-300 flex items-center justify-center"><ion-icon name="grid-outline" class="mr-2"></ion-icon>棚QRコードを生成</button>
+                            </div>
+                        </div>`;
+                } else {
+                    content = `
+                        <div class="text-center text-gray-500 py-10">
+                            <ion-icon name="grid-outline" class="text-5xl mx-auto"></ion-icon>
+                            <p class="mt-2">ラックの場所を選択して詳細を表示</p>
+                        </div>`;
+                }
+                detailsPanel.innerHTML = content;
+                renderCurrentRack();
+            }
+
+            // モーダル表示/非表示
+            function openModal(content) {
+                modalContent.innerHTML = content;
+                modal.classList.remove('hidden');
+            }
+
+            function closeModal() {
+                modal.classList.add('hidden');
+                modalContent.innerHTML = '';
+            }
+
+            // ラック作成モーダル
+            function showAddRackModal() {
+                openModal(`
+                    <form id="add-rack-form" class="p-6 space-y-4">
+                        <h3 class="text-lg font-bold">新しいラックを作成</h3>
+                        <div>
+                            <label for="new-rack-name" class="text-sm">ラック名</label>
+                            <input id="new-rack-name" name="rackName" required class="w-full border-gray-300 rounded-md mt-1" placeholder="例: A棟-3F-スチール棚">
+                        </div>
+                        <div class="grid grid-cols-2 gap-4">
+                            <div>
+                                <label for="new-rack-rows" class="text-sm">縦 (行数)</label>
+                                <input id="new-rack-rows" name="rows" type="number" min="1" max="26" required class="w-full border-gray-300 rounded-md mt-1" value="5">
+                            </div>
+                            <div>
+                                <label for="new-rack-cols" class="text-sm">横 (列数)</label>
+                                <input id="new-rack-cols" name="cols" type="number" min="1" max="50" required class="w-full border-gray-300 rounded-md mt-1" value="5">
+                            </div>
+                        </div>
+                    </form>
+                    <div class="p-4 bg-gray-50 flex justify-end space-x-2">
+                        <button id="cancel-btn" class="px-4 py-2 bg-gray-200 text-gray-800 rounded-md">キャンセル</button>
+                        <button id="confirm-add-rack-btn" type="submit" form="add-rack-form" class="px-4 py-2 bg-indigo-600 text-white rounded-md">作成</button>
+                    </div>`);
+
+                document.getElementById('add-rack-form').onsubmit = (e) => {
+                    e.preventDefault();
+                    const formData = new FormData(e.target);
+                    const newRack = {
+                        id: `rack-${Date.now()}`,
+                        name: formData.get('rackName'),
+                        rows: parseInt(formData.get('rows')),
+                        cols: parseInt(formData.get('cols')),
+                        slots: {}
+                    };
+                    racks.push(newRack);
+                    currentRackId = newRack.id;
+                    renderApp();
+                    closeModal();
+                };
+                document.getElementById('cancel-btn').onclick = closeModal;
+            }
+
+            // ラック削除モーダル
+            function showDeleteRackModal(rackId, rackName) {
+                const rackToDelete = racks.find(r => r.id === rackId);
+                const hasParts = Object.values(rackToDelete.slots).some(slot => slot !== null);
+                const warningMessage = hasParts ? '<p class="text-red-600 bg-red-100 p-3 rounded-lg text-sm mt-4"><ion-icon name="warning-outline" class="mr-2"></ion-icon>このラックには部品が保管されています。削除すると部品情報も失われます。</p>' : '';
+
+                openModal(`
+                    <div class="p-6">
+                        <h3 class="text-lg font-bold">ラックの削除</h3>
+                        <p class="mt-2 text-sm text-gray-600">本当に「<strong class="text-gray-900">${rackName}</strong>」を削除しますか？<br>この操作は取り消せません。</p>
+                        ${warningMessage}
+                    </div>
+                    <div class="p-4 bg-gray-50 flex justify-end space-x-2">
+                        <button id="cancel-btn" class="px-4 py-2 bg-gray-200 text-gray-800 rounded-md">キャンセル</button>
+                        <button id="confirm-delete-btn" class="px-4 py-2 bg-red-600 text-white rounded-md">削除</button>
+                    </div>`);
+
+                document.getElementById('confirm-delete-btn').onclick = () => {
+                    racks = racks.filter(r => r.id !== rackId);
+                    if (currentRackId === rackId) {
+                        currentRackId = racks.length > 0 ? racks[0].id : null;
+                    }
+                    renderApp();
+                    closeModal();
+                };
+                document.getElementById('cancel-btn').onclick = closeModal;
+            }
+
+            // 部品使用モーダル
+            function showUsePartModal(slotId) {
+                const currentRack = racks.find(r => r.id === currentRackId);
+                const part = currentRack.slots[slotId];
+                openModal(`
+                    <div class="p-6"><h3 class="text-lg font-bold mb-4">「${part.partName}」を使用</h3>
+                        <p class="text-sm mb-2">使用する数量を入力してください。(現在庫: ${part.quantity})</p>
+                        <input id="use-quantity" type="number" min="1" max="${part.quantity}" class="w-full border-gray-300 rounded-md" placeholder="数量">
+                    </div>
+                    <div class="p-4 bg-gray-50 flex justify-end space-x-2">
+                        <button id="cancel-btn" class="px-4 py-2 bg-gray-200 text-gray-800 rounded-md">キャンセル</button>
+                        <button id="confirm-use-btn" class="px-4 py-2 bg-indigo-600 text-white rounded-md">確定</button>
+                    </div>`);
+
+                document.getElementById('confirm-use-btn').onclick = () => {
+                    const quantity = parseInt(document.getElementById('use-quantity').value);
+                    if (quantity > 0 && quantity <= part.quantity) {
+                        part.quantity -= quantity;
+                        if (part.quantity === 0) {
+                            currentRack.slots[slotId] = null;
+                        }
+                        updateDetails(slotId);
+                        closeModal();
+                    } else {
+                        alert('正しい数量を入力してください。');
+                    }
+                };
+                document.getElementById('cancel-btn').onclick = closeModal;
+            }
+
+            // 箱の削除モーダルを追加
+            function showDeletePartModal(slotId) {
+                const currentRack = racks.find(r => r.id === currentRackId);
+                const part = currentRack.slots[slotId];
+                openModal(`
+                    <div class="p-6">
+                        <h3 class="text-lg font-bold">箱の削除</h3>
+                        <p class="mt-2 text-sm text-gray-600">本当に「<strong class="text-gray-900">${part.partName}</strong>」を棚から削除しますか？</p>
+                        <p class="text-red-600 bg-red-100 p-3 rounded-lg text-sm mt-4"><ion-icon name="warning-outline" class="mr-2"></ion-icon>この操作は取り消せません。</p>
+                    </div>
+                    <div class="p-4 bg-gray-50 flex justify-end space-x-2">
+                        <button id="cancel-btn" class="px-4 py-2 bg-gray-200 text-gray-800 rounded-md">キャンセル</button>
+                        <button id="confirm-delete-part-btn" class="px-4 py-2 bg-red-600 text-white rounded-md">削除</button>
+                    </div>`);
+
+                document.getElementById('confirm-delete-part-btn').onclick = () => {
+                    currentRack.slots[slotId] = null;
+                    updateDetails(slotId);
+                    closeModal();
+                };
+                document.getElementById('cancel-btn').onclick = closeModal;
+            }
+
+            // 箱の編集モーダルを追加
+            function showEditPartModal(slotId) {
+                const currentRack = racks.find(r => r.id === currentRackId);
+                const part = currentRack.slots[slotId];
+                const colorPalette = ['4A90E2', '50E3C2', 'F5A623', 'D0021B', '9013FE', '7ED321', 'F8E71C', 'BD10E0', '4A4A4A', 'E9E9E9'];
+
+                let colorPaletteHtml = colorPalette.map(color => `
+                    <button type="button" data-color="${color}" class="color-swatch w-8 h-8 rounded-full border-2" style="background-color: #${color};"></button>
+                `).join('');
+
+                openModal(`
+                    <style>
+                        .color-swatch.selected {
+                            outline: 2px solid #4f46e5;
+                            outline-offset: 2px;
+                        }
+                    </style>
+                    <form id="edit-part-form" class="p-6 space-y-4">
+                        <h3 class="text-lg font-bold">箱の情報を編集</h3>
+                        <div>
+                            <label class="text-sm">部品名</label>
+                            <input name="partName" required class="w-full border-gray-300 rounded-md mt-1" value="${part.partName}">
+                        </div>
+                        <div>
+                            <label class="text-sm">部品型番 (任意)</label>
+                            <input name="partModelNumber" class="w-full border-gray-300 rounded-md mt-1" value="${part.partModelNumber || ''}">
+                        </div>
+                        <div>
+                            <label class="text-sm">数量</label>
+                            <input name="quantity" type="number" min="0" required class="w-full border-gray-300 rounded-md mt-1" value="${part.quantity}">
+                        </div>
+                        <div>
+                            <label class="text-sm">カラーラベル</label>
+                            <div id="color-palette" class="flex flex-wrap gap-2 mt-1">${colorPaletteHtml}</div>
+                            <input type="hidden" name="color" value="${part.color}">
+                        </div>
+                    </form>
+                    <div class="p-4 bg-gray-50 flex justify-end space-x-2">
+                        <button id="cancel-btn" class="px-4 py-2 bg-gray-200 text-gray-800 rounded-md">キャンセル</button>
+                        <button id="confirm-edit-part-btn" type="submit" form="edit-part-form" class="px-4 py-2 bg-indigo-600 text-white rounded-md">保存</button>
+                    </div>`);
+                
+                const colorPaletteEl = document.getElementById('color-palette');
+                const hiddenColorInput = document.querySelector('input[name="color"]');
+
+                // Set initial selected color
+                const initialColorEl = colorPaletteEl.querySelector(`[data-color="${part.color.toUpperCase()}"]`);
+                if (initialColorEl) {
+                    initialColorEl.classList.add('selected');
+                }
+                
+                // Handle color selection
+                colorPaletteEl.addEventListener('click', e => {
+                    const swatch = e.target.closest('.color-swatch');
+                    if (!swatch) return;
+                    
+                    // Update UI
+                    colorPaletteEl.querySelector('.selected')?.classList.remove('selected');
+                    swatch.classList.add('selected');
+
+                    // Update hidden input
+                    hiddenColorInput.value = swatch.dataset.color;
+                });
+
+                document.getElementById('edit-part-form').onsubmit = (e) => {
+                    e.preventDefault();
+                    const formData = new FormData(e.target);
+                    const newQuantity = parseInt(formData.get('quantity'));
+
+                    if(newQuantity === 0) {
+                        // 数量が0になったら削除
+                        currentRack.slots[slotId] = null;
+                    } else {
+                        part.partName = formData.get('partName');
+                        part.partModelNumber = formData.get('partModelNumber');
+                        part.quantity = newQuantity;
+                        part.color = formData.get('color'); // 色を更新
+                    }
+                    
+                    updateDetails(slotId);
+                    closeModal();
+                };
+                document.getElementById('cancel-btn').onclick = closeModal;
+            }
+
+
+            // 新規格納モーダル
+            function showStorePartModal(callback) {
+                openModal(`
+                    <form id="store-form" class="p-6 space-y-4">
+                        <h3 class="text-lg font-bold">新しい部品の情報を入力</h3>
+                        <div><label class="text-sm">部品名</label><input name="partName" required class="w-full border-gray-300 rounded-md mt-1"></div>
+                        <div><label class="text-sm">部品型番 (任意)</label><input name="partModelNumber" class="w-full border-gray-300 rounded-md mt-1"></div>
+                        <div><label class="text-sm">数量</label><input name="quantity" type="number" min="1" required class="w-full border-gray-300 rounded-md mt-1"></div>
+                    </form>
+                    <div class="p-4 bg-gray-50 flex justify-end space-x-2">
+                        <button id="cancel-btn" class="px-4 py-2 bg-gray-200 text-gray-800 rounded-md">キャンセル</button>
+                        <button id="confirm-store-btn" type="submit" form="store-form" class="px-4 py-2 bg-indigo-600 text-white rounded-md">棚をスキャンして格納</button>
+                    </div>`);
+
+                document.getElementById('store-form').onsubmit = (e) => {
+                    e.preventDefault();
+                    const formData = new FormData(e.target);
+                    const newPart = {
+                        partName: formData.get('partName'),
+                        partModelNumber: formData.get('partModelNumber'),
+                        quantity: parseInt(formData.get('quantity')),
+                        color: ['4A90E2', '50E3C2', 'F5A623', 'D0021B', '9013FE'][Math.floor(Math.random() * 5)]
+                    };
+                    callback(newPart);
+                };
+                document.getElementById('cancel-btn').onclick = closeModal;
+            }
+
+            // QRスキャナーモーダル
+            function showQrScannerModal(title, instruction, onScan) {
+                openModal(`
+                    <div class="p-6 text-center">
+                        <h3 class="text-xl font-bold mb-4">${title}</h3>
+                        <div class="grid grid-cols-2 gap-4 items-center">
+                            <div class="text-center">
+                            <ion-icon name="grid-outline" class="text-6xl text-gray-400 mx-auto"></ion-icon>
+                            <p class="mt-2 font-semibold">${instruction}</p>
+                            </div>
+                            <div class="bg-black aspect-square rounded-lg flex items-center justify-center relative overflow-hidden">
+                            <p class="text-gray-500">カメラ入力</p>
+                            <div class="scanner-line absolute left-0 h-1 bg-red-500 w-full"></div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="p-4 bg-gray-50 flex justify-end space-x-2">
+                        <button id="cancel-btn" class="px-4 py-2 bg-gray-200 text-gray-800 rounded-md">キャンセル</button>
+                    </div>`);
+
+                setTimeout(() => onScan(), 2000);
+                document.getElementById('cancel-btn').onclick = closeModal;
+            }
+
+            // 棚QR表示モーダル
+            function showShelfQrModal(slotId) {
+                const currentRack = racks.find(r => r.id === currentRackId);
+                if (!currentRack) return;
+                const rackNumericId = parseInt(String(currentRack.id).replace(/[^0-9]/g, ''), 10);
+                const payload = {
+                    type: 'rack_slot',
+                    rack_id: Number.isFinite(rackNumericId) ? rackNumericId : currentRack.id,
+                    slot_identifier: slotId
+                };
+                const qrData = encodeURIComponent(JSON.stringify(payload));
+        openModal(`
+                    <div class="p-6 text-center">
+                        <h3 class="text-lg font-bold mb-2">棚QRコード</h3>
+                        <p class="text-sm text-gray-600 mb-4">このQRコードを印刷して棚の<br><strong>${slotId}</strong>の場所に貼り付けてください。</p>
+            <img src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${qrData}" alt="QR Code" class="mx-auto border-4">
+                        <p class="mt-2 font-semibold">${currentRack.name}</p>
+                        <p class="text-xs text-gray-500">場所: ${slotId}</p>
+                    </div>
+                    <div class="p-4 bg-gray-50 flex justify-end space-x-2">
+                        <button id="cancel-btn" class="px-4 py-2 bg-gray-200 text-gray-800 rounded-md">閉じる</button>
+                        <button id="print-btn" class="px-4 py-2 bg-indigo-600 text-white rounded-md">印刷</button>
+                    </div>`);
+                document.getElementById('print-btn').onclick = () => console.log('印刷処理を実行 (ダミー)');
+                document.getElementById('cancel-btn').onclick = closeModal;
+            }
+
+            // 棚QR一括生成モーダル
+            function showBulkShelfQrModal(rack) {
+                let qrGridHtml = '';
+                for (let r = 1; r <= rack.rows; r++) {
+                    const rowChar = String.fromCharCode(64 + r);
+                    for (let c = 1; c <= rack.cols; c++) {
+                        const slotId = `${rowChar}-${c}`;
+                        const rackNumericId = parseInt(String(rack.id).replace(/[^0-9]/g, ''), 10);
+                        const payload = {
+                            type: 'rack_slot',
+                            rack_id: Number.isFinite(rackNumericId) ? rackNumericId : rack.id,
+                            slot_identifier: slotId
+                        };
+                        const qrData = encodeURIComponent(JSON.stringify(payload));
+                        qrGridHtml += `
+                            <div class="qr-item border rounded-md p-2 flex flex-col items-center justify-center bg-white">
+                <img src="https://api.qrserver.com/v1/create-qr-code/?size=100x100&data=${qrData}" alt="QR Code" class="mx-auto">
+                                <p class="mt-2 font-bold text-center text-sm">${rack.name}</p>
+                                <p class="font-mono text-center text-lg">${slotId}</p>
+                            </div>`;
+                    }
+                }
+                const modalHtml = `
+                    <style>
+                        #printable-qrs { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
+                        @media print {
+                            body > *:not(#modal-content) { display: none !important; }
+                            #modal, #modal > div { display: block !important; position: static !important; background: none !important; width: 100% !important; height: auto !important; max-width: 100% !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; }
+                            .modal-header, .modal-footer { display: none !important; }
+                            #printable-qrs { grid-template-columns: repeat(${rack.cols}, 1fr); max-height: none !important; overflow: visible !important; }
+                        }
+                    </style>
+                    <div class="p-6 modal-header">
+                        <h3 class="text-lg font-bold mb-2">棚QRコード一括生成</h3>
+                        <p class="text-sm text-gray-600">「${rack.name}」のすべての棚QRコードです。印刷して貼り付けてください。</p>
+                    </div>
+                    <div id="printable-qrs" class="p-4 max-h-[60vh] overflow-y-auto bg-gray-100">${qrGridHtml}</div>
+                    <div class="p-4 bg-gray-50 flex justify-end space-x-2 modal-footer">
+                        <button id="cancel-btn" class="px-4 py-2 bg-gray-200 text-gray-800 rounded-md">閉じる</button>
+                        <button id="print-btn" class="px-4 py-2 bg-indigo-600 text-white rounded-md">印刷</button>
+                    </div>`;
+                openModal(modalHtml);
+                modalContent.classList.remove('max-w-md');
+                modalContent.classList.add('max-w-4xl');
+                document.getElementById('print-btn').onclick = () => window.print();
+                document.getElementById('cancel-btn').onclick = () => {
+                    modalContent.classList.add('max-w-md');
+                    modalContent.classList.remove('max-w-4xl');
+                    closeModal();
+                };
+            }
+
+            // FABメニューの開閉
+            fabMain.addEventListener('click', () => {
+                const isExpanded = fabMain.getAttribute('aria-expanded') === 'true';
+                fabMain.setAttribute('aria-expanded', !isExpanded);
+                fabIcon.classList.toggle('rotate-45');
+                if (!isExpanded) {
+                    fabMenuItems.forEach((item, index) => {
+                        item.style.transitionDelay = `${index * 40}ms`;
+                        item.style.transform = 'scale(1)';
+                    });
+                } else {
+                    fabMenuItems.forEach(item => { item.style.transform = 'scale(0)'; });
+                }
+            });
+
+            // FAB: ラック作成
+            document.getElementById('add-rack-btn').addEventListener('click', showAddRackModal);
+
+            // FAB: QR入庫フロー
+            document.getElementById('qr-stock-in-btn').addEventListener('click', () => {
+                showStorePartModal((newPart) => {
+                    showQrScannerModal('QR入庫', '棚QRコードを読み取ってください', () => {
+                        const currentRack = racks.find(r => r.id === currentRackId);
+                        if (!currentRack) {
+                            console.error('対象のラックが見つかりません。');
+                            closeModal();
+                            return;
+                        }
+                        
+                        let emptySlot = null;
+                        for (let r = 1; r <= currentRack.rows; r++) {
+                            const rowChar = String.fromCharCode(64 + r);
+                            for (let c = 1; c <= currentRack.cols; c++) {
+                                const slotId = `${rowChar}-${c}`;
+                                if (!currentRack.slots[slotId]) {
+                                    emptySlot = slotId;
+                                    break;
+                                }
+                            }
+                            if (emptySlot) break;
+                        }
+
+                        if (emptySlot) {
+                            currentRack.slots[emptySlot] = newPart;
+                            updateDetails(emptySlot);
+                            closeModal();
+                        } else {
+                            closeModal();
+                            console.error('現在のラックに空きがありません。');
+                        }
+                    });
+                });
+            });
+
+            // 一括QR生成ボタン
+            bulkQrBtn.addEventListener('click', () => {
+                const currentRack = racks.find(r => r.id === currentRackId);
+                if (currentRack) showBulkShelfQrModal(currentRack);
+            });
+
+            // ラック一覧のクリック処理
+            rackListEl.addEventListener('click', e => {
+                const link = e.target.closest('.rack-list-item');
+                if (link) {
+                    e.preventDefault();
+                    currentRackId = link.dataset.rackId;
+                    selectedSlotId = null;
+                    isMoveMode = false;
+                    renderApp();
+                }
+                const deleteBtn = e.target.closest('[data-action="delete-rack"]');
+                if (deleteBtn) {
+                    showDeleteRackModal(deleteBtn.dataset.rackId, deleteBtn.dataset.rackName);
+                }
+            });
+
+            // 詳細パネルのボタン操作
+            detailsPanel.addEventListener('click', e => {
+                const button = e.target.closest('button');
+                if (!button) return;
+
+                const { action, slotId } = button.dataset;
+                const currentRack = racks.find(r => r.id === currentRackId);
+                if (!currentRack) return;
+
+                switch (action) {
+                    case 'use': showUsePartModal(slotId); break;
+                    case 'store': showStorePartModal((newPart) => {
+                        currentRack.slots[slotId] = newPart;
+                        updateDetails(slotId);
+                        closeModal();
+                    }); break;
+                    case 'move':
+                        isMoveMode = true;
+                        moveOriginSlotId = slotId;
+                        detailsPanel.innerHTML = `<div class="fade-in text-center py-10"><ion-icon name="move-outline" class="text-5xl text-indigo-500 mx-auto"></ion-icon><p class="mt-2 font-bold">移動先の空き場所を選択してください</p><p class="text-sm text-gray-500">(移動元: ${slotId})</p><button id="cancel-move-btn" class="mt-4 text-sm text-red-600">移動をキャンセル</button></div>`;
+                        document.getElementById('cancel-move-btn').onclick = () => {
+                            isMoveMode = false;
+                            moveOriginSlotId = null;
+                            updateDetails(slotId);
+                        };
+                        renderCurrentRack();
+                        break;
+                    case 'show-shelf-qr': showShelfQrModal(slotId); break;
+                    case 'edit': showEditPartModal(slotId); break;
+                    case 'delete': showDeletePartModal(slotId); break;
+                }
+            });
+
+            // メッシュラックのクリック処理
+            document.body.addEventListener('click', (e) => {
+                const rackDisplayArea = document.getElementById('rack-display-area');
+                if (rackDisplayArea && rackDisplayArea.contains(e.target)) {
+                    const slotEl = e.target.closest('.rack-slot');
+                    if (!slotEl) return;
+                    const clickedSlotId = slotEl.dataset.slotId;
+                    const currentRack = racks.find(r => r.id === currentRackId);
+                    if (!currentRack) return;
+
+                    if (isMoveMode) {
+                        if (!currentRack.slots[clickedSlotId] && clickedSlotId !== moveOriginSlotId) {
+                            currentRack.slots[clickedSlotId] = currentRack.slots[moveOriginSlotId];
+                            currentRack.slots[moveOriginSlotId] = null;
+                            isMoveMode = false;
+                            moveOriginSlotId = null;
+                            updateDetails(clickedSlotId);
+                        }
+                    } else {
+                        updateDetails(clickedSlotId);
+                    }
+                }
+            });
+
+            // 部品検索
+            searchInput.addEventListener('input', () => {
+                const searchTerm = searchInput.value.toLowerCase();
+                document.querySelectorAll('.rack-slot').forEach(slot => {
+                    slot.classList.remove('highlight-slot');
+                    const currentRack = racks.find(r => r.id === currentRackId);
+                    if (!currentRack || searchTerm.length < 2) return;
+                    const part = currentRack.slots[slot.dataset.slotId];
+                    if (part && (part.partName.toLowerCase().includes(searchTerm) || (part.partModelNumber && part.partModelNumber.toLowerCase().includes(searchTerm)))) {
+                        slot.classList.add('highlight-slot');
+                    }
+                });
+            });
+
+            // 初期レンダリング
+            renderApp();
+        });
+    </script>
+
+</body>
+
+</html>
+
diff --git "a/docs/\350\243\234\350\266\263Tips/QR\343\202\263\343\203\274\343\203\211\350\250\255\350\250\210.html" "b/docs/\350\243\234\350\266\263Tips/QR\343\202\263\343\203\274\343\203\211\350\250\255\350\250\210.html"
new file mode 100644
index 000000000..0e3f5d31a
--- /dev/null
+++ "b/docs/\350\243\234\350\266\263Tips/QR\343\202\263\343\203\274\343\203\211\350\250\255\350\250\210.html"
@@ -0,0 +1,147 @@
+<!DOCTYPE html>
+<html lang="ja">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>QRコードデータ設計書</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <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=Inter:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;700;900&display=swap"
+        rel="stylesheet">
+    <!-- Ioniconsを読み込む -->
+    <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
+    <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/vs2015.min.css">
+    <style>
+        body {
+            font-family: 'Inter', 'Noto Sans JP', sans-serif;
+        }
+
+        pre code.hljs {
+            padding: 1rem;
+            border-radius: 0.5rem;
+            font-size: 0.875rem;
+        }
+    </style>
+</head>
+
+<body class="bg-slate-50 text-slate-800">
+
+    <div class="container mx-auto p-4 sm:p-6 lg:p-8">
+        <header class="mb-8 text-center">
+            <h1 class="text-4xl font-black text-slate-900 tracking-wide">QRコード設計、これでカンペキ！</h1>
+            <p class="mt-2 text-lg text-slate-600">部品と棚のQRコードの中身、どうすりゃイケてるか全部まとめといたよん！</p>
+        </header>
+
+        <div class="space-y-12">
+
+            <!-- 1. QRコード設計の考え方 -->
+            <section id="concept">
+                <h2 class="text-2xl font-bold border-b-2 border-pink-500 pb-2 mb-4 flex items-center">
+                    <ion-icon name="bulb-outline" class="mr-3 text-2xl text-pink-500"></ion-icon>
+                    QRコード設計の考え方 ✨
+                </h2>
+                <div class="bg-white p-6 rounded-lg shadow-md">
+                    <p class="mb-4">QRコードの中身はただの文字列！だから、後からサーバーで「これ、なんのQRだっけ？」ってならないように、分かりやすいルールで作っとくのがマジ大事！そこで最強なのが…
+                    </p>
+                    <div class="p-4 bg-indigo-100 border-l-4 border-indigo-500 text-indigo-800 rounded-r-lg">
+                        <h3 class="font-bold text-lg">JSON形式でデータを入れる！</h3>
+                        <p class="mt-2">なんでJSONがいいかって？</p>
+                        <ul class="mt-2 list-disc list-inside space-y-1 text-sm">
+                            <li><span class="font-semibold">自己紹介してくれる！</span> データに`"type":
+                                "part_box"`みたいに名前を付けておけるから、サーバー側で「あ、これは部品のQRね！」って一発でわかる！</li>
+                            <li><span class="font-semibold">将来の拡張に強い！</span>
+                                もし後から「ロット番号も入れたい！」ってなっても、JSONに項目を追加するだけでOK！ちょー柔軟！</li>
+                        </ul>
+                    </div>
+                </div>
+            </section>
+
+            <!-- 2. 部品QRコード -->
+            <section id="part-qr">
+                <h2 class="text-2xl font-bold border-b-2 border-cyan-500 pb-2 mb-4 flex items-center">
+                    <ion-icon name="cube-outline" class="mr-3 text-2xl text-cyan-500"></ion-icon>
+                    【部品QRコード】の具体的な中身
+                </h2>
+                <div class="bg-white p-6 rounded-lg shadow-md">
+                    <p class="mb-4">部品の箱に貼るQRコードは、こんな感じのJSONデータにしとくのがおすすめ！</p>
+                    <pre><code class="language-json">{
+  "type": "part_box",
+  "box_id": "BOX-101",
+  "part_model_number": "SP-A-001",
+  "part_name": "スプリング A"
+}</code></pre>
+                    <div class="mt-4 space-y-3">
+                        <p><strong class="font-mono text-purple-600">"type":
+                                "part_box"</strong><br>これは「部品の箱」のQRコードだよ！ってことを示すおまじない。棚のQRと区別するために必須！</p>
+                        <p><strong class="font-mono text-purple-600">"box_id": "BOX-101"</strong><br><span
+                                class="font-bold text-red-500">これが一番大事！</span>
+                            世界に一つだけの、その箱のID！サーバーはこれをキーにして、在庫数とか詳しい情報を探すよ。</p>
+                        <p><strong class="font-mono text-purple-600">"part_model_number",
+                                "part_name"</strong><br>これはオマケだけど、入れとくと神！もし現場でスマホのカメラでQR読んだとき、IDだけじゃなく品名も表示されたら、分かりやすさ爆上がりじゃない？
+                        </p>
+                    </div>
+                </div>
+            </section>
+
+            <!-- 3. BOX IDのルール -->
+            <section id="box-id-rule">
+                <h2 class="text-2xl font-bold border-b-2 border-red-500 pb-2 mb-4 flex items-center">
+                    <ion-icon name="shield-checkmark-outline" class="mr-3 text-2xl text-red-500"></ion-icon>
+                    【BOX ID】の新しい神ルール！
+                </h2>
+                <div class="bg-white p-6 rounded-lg shadow-md">
+                    <p class="mb-4">`box_id`は世界で一つだけのIDにしなきゃだけど、部品型番は任意入力…。そんなときの最強ルールがこれ！</p>
+                    <div class="p-4 bg-red-50 border-l-4 border-red-500 text-red-800 rounded-r-lg">
+                        <h3 class="font-bold text-lg">BOX - [データベースの自動採番ID]</h3>
+                    </div>
+                    <p class="mt-4">どゆこと？って感じだよね！これは、サーバー側でこーゆー動きをするってこと！👇</p>
+                    <ol class="mt-4 list-decimal list-inside space-y-2">
+                        <li>新しい部品を登録するとき、まずサーバーのデータベースに部品情報を保存する。</li>
+                        <li>そんとき、データベースが自動で「101番」「102番」みたいに、<span class="font-bold">絶対にかぶらない番号（自動採番ID）</span>を振ってくれる。
+                        </li>
+                        <li>その番号を使って、BOX IDを<code class="bg-gray-200 px-2 py-1 rounded">BOX-101</code>みたいに作る！</li>
+                    </ol>
+                    <p class="mt-4 font-bold text-green-600">
+                        このやり方なら、部品型番を入力しなくても、IDが絶対にかぶらないし、IDも短くて分かりやすいから、マジで最強！ちょーおすすめ！</p>
+                </div>
+            </section>
+
+            <!-- 4. 棚QRコード -->
+            <section id="rack-qr">
+                <h2 class="text-2xl font-bold border-b-2 border-green-500 pb-2 mb-4 flex items-center">
+                    <ion-icon name="grid-outline" class="mr-3 text-2xl text-green-500"></ion-icon>
+                    【棚QRコード】の具体的な中身
+                </h2>
+                <div class="bg-white p-6 rounded-lg shadow-md">
+                    <p class="mb-4">棚の各スロット（場所）に貼るQRコードは、こっちは前と同じでOK！</p>
+                    <pre><code class="language-json">{
+  "type": "rack_slot",
+  "rack_id": 1,
+  "slot_id": "A-1"
+}</code></pre>
+                    <div class="mt-4 space-y-3">
+                        <p><strong class="font-mono text-purple-600">"type":
+                                "rack_slot"</strong><br>これは「棚の場所」のQRコードだよ！って示すおまじない。</p>
+                        <p><strong class="font-mono text-purple-600">"rack_id": 1</strong><br>どの棚（ラック全体）かを示すID。</p>
+                        <p><strong class="font-mono text-purple-600">"slot_id": "A-1"</strong><br>その棚の中の、どの場所かを示すID。</p>
+                    </div>
+                </div>
+            </section>
+        </div>
+
+        <footer class="text-center text-slate-500 mt-12 py-4">
+            &copy; 2024 API Design by Gemini. All Rights Reserved.
+        </footer>
+    </div>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+    <script>
+        hljs.highlightAll();
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/docs/\350\243\234\350\266\263Tips/\343\203\207\343\202\243\343\203\254\343\202\257\343\203\210\343\203\252\346\247\213\351\200\240\350\247\243\346\236\220\347\265\220\346\236\234.html" "b/docs/\350\243\234\350\266\263Tips/\343\203\207\343\202\243\343\203\254\343\202\257\343\203\210\343\203\252\346\247\213\351\200\240\350\247\243\346\236\220\347\265\220\346\236\234.html"
new file mode 100644
index 000000000..0b34c434c
--- /dev/null
+++ "b/docs/\350\243\234\350\266\263Tips/\343\203\207\343\202\243\343\203\254\343\202\257\343\203\210\343\203\252\346\247\213\351\200\240\350\247\243\346\236\220\347\265\220\346\236\234.html"
@@ -0,0 +1,547 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>G3 Webapp Front 2025 - ディレクトリ構造解析結果</title>
+    <!-- Tailwind CSSを読み込む -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Google Fonts (Inter) を読み込む -->
+    <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=Inter:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;700&display=swap" rel="stylesheet">
+    <style>
+        /* カスタムスタイル */
+        body {
+            font-family: 'Inter', 'Noto Sans JP', sans-serif;
+            background-color: #111827; /* ダークグレーの背景 */
+        }
+        .glass-card {
+            background: rgba(31, 41, 55, 0.5); /* 半透明のカード背景 */
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        .gradient-text {
+            background: linear-gradient(90deg, #a78bfa, #f472b6);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+    </style>
+</head>
+<body class="bg-gray-900 text-gray-200">
+
+    <div class="container mx-auto p-4 sm:p-6 lg:p-8">
+
+        <!-- ヘッダーセクション -->
+        <header class="text-center mb-12">
+            <h1 class="text-4xl sm:text-5xl font-bold gradient-text mb-2">
+                G3 Webapp Front 2025
+            </h1>
+            <p class="text-lg text-gray-400">ディレクトリ構造解析結果</p>
+        </header>
+
+        <main class="space-y-8">
+
+            <!-- プロジェクト概要 -->
+            <section class="glass-card rounded-2xl p-6">
+                <h2 class="flex items-center text-2xl font-bold mb-4 text-gray-100">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-3 text-purple-400"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path></svg>
+                    プロジェクト概要
+                </h2>
+                <p class="text-gray-300">
+                    このサイトは <strong class="text-cyan-400">Next.js 14</strong> を使用した <strong class="text-cyan-400">React ベースの Web アプリケーション</strong> で、企業向けの管理システムやダッシュボードアプリケーションに適した設計となっています。
+                </p>
+            </section>
+
+            <!-- 主要技術スタック -->
+            <section class="glass-card rounded-2xl p-6">
+                <h2 class="flex items-center text-2xl font-bold mb-6 text-gray-100">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-3 text-pink-400"><path d="M12 20V10"></path><path d="M18 20V4"></path><path d="M6 20V16"></path></svg>
+                    主要技術スタック
+                </h2>
+                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+                    <div class="bg-gray-800/60 p-4 rounded-lg"><strong>フロントエンド:</strong> React 18 + Next.js 14</div>
+                    <div class="bg-gray-800/60 p-4 rounded-lg"><strong>UI フレームワーク:</strong> Material-UI (MUI) v5</div>
+                    <div class="bg-gray-800/60 p-4 rounded-lg"><strong>スタイリング:</strong> Tailwind CSS + PostCSS</div>
+                    <div class="bg-gray-800/60 p-4 rounded-lg"><strong>アイコン:</strong> Iconify</div>
+                    <div class="bg-gray-800/60 p-4 rounded-lg"><strong>チャート:</strong> ApexCharts</div>
+                    <div class="bg-gray-800/60 p-4 rounded-lg"><strong>開発ツール:</strong> ESLint, Prettier, Stylelint</div>
+                </div>
+            </section>
+
+            <!-- ディレクトリ構造 -->
+            <section class="glass-card rounded-2xl p-6">
+                <h2 class="flex items-center text-2xl font-bold mb-6 text-gray-100">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-3 text-green-400"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>
+                    ディレクトリ構造
+                </h2>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <div>
+                        <h3 class="font-semibold text-lg mb-2 text-purple-300">ルートディレクトリ</h3>
+                        <pre class="bg-gray-900 rounded-lg p-4 text-sm font-mono overflow-x-auto"><code><span class="text-purple-400">javascript-version/</span>
+├── 📁 <span class="text-purple-400">.next/</span>
+├── 📁 <span class="text-purple-400">node_modules/</span>
+├── 📁 <span class="text-purple-400">src/</span>
+├── 📁 <span class="text-purple-400">public/</span>
+├── 📄 <span class="text-gray-400">package.json</span>
+├── 📄 <span class="text-gray-400">next.config.mjs</span>
+├── 📄 <span class="text-gray-400">tailwind.config.js</span>
+└── 📄 <span class="text-gray-400">.eslintrc.js</span></code></pre>
+                    </div>
+                    <div>
+                        <h3 class="font-semibold text-lg mb-2 text-purple-300">src/app/ - App Router</h3>
+                        <pre class="bg-gray-900 rounded-lg p-4 text-sm font-mono overflow-x-auto"><code><span class="text-purple-400">app/</span>
+├── 📄 <span class="text-gray-400">layout.jsx</span>
+├── 📁 <span class="text-purple-400">(dashboard)/</span>
+│   ├── 📄 <span class="text-gray-400">page.jsx</span>
+│   └── 📁 <span class="text-purple-400">account-settings/</span>
+├── 📁 <span class="text-purple-400">(blank-layout-pages)/</span>
+│   ├── 📁 <span class="text-purple-400">login/</span>
+│   └── 📁 <span class="text-purple-400">register/</span>
+└── 📁 <span class="text-purple-400">[...not-found]/</span></code></pre>
+                    </div>
+                    <div>
+                        <h3 class="font-semibold text-lg mb-2 text-purple-300">src/@core/ - コア機能</h3>
+                        <pre class="bg-gray-900 rounded-lg p-4 text-sm font-mono overflow-x-auto"><code><span class="text-purple-400">@core/</span>
+├── 📁 <span class="text-purple-400">components/</span>
+│   ├── 📁 <span class="text-purple-400">mui/</span>
+│   │   ├── 📄 <span class="text-gray-400">Avatar.jsx</span>
+│   │   └── 📄 <span class="text-gray-400">IconButton.jsx</span>
+│   └── 📁 <span class="text-purple-400">option-menu/</span>
+│       └── 📄 <span class="text-gray-400">index.jsx</span>
+├── 📁 <span class="text-purple-400">contexts/</span>
+│   └── 📄 <span class="text-gray-400">settingsContext.jsx</span>
+├── 📁 <span class="text-purple-400">hooks/</span>
+│   ├── 📄 <span class="text-gray-400">useImageVariant.js</span>
+│   ├── 📄 <span class="text-gray-400">useObjectCookie.js</span>
+│   └── 📄 <span class="text-gray-400">useSettings.jsx</span>
+├── 📁 <span class="text-purple-400">theme/</span>
+│   ├── 📁 <span class="text-purple-400">overrides/</span>
+│   │   └── 📄 <span class="text-gray-400">[37個のMUIコンポーネントオーバーライド]</span>
+│   ├── 📄 <span class="text-gray-400">colorSchemes.js</span>
+│   ├── 📄 <span class="text-gray-400">customShadows.js</span>
+│   ├── 📄 <span class="text-gray-400">index.js</span>
+│   ├── 📄 <span class="text-gray-400">shadows.js</span>
+│   ├── 📄 <span class="text-gray-400">spacing.js</span>
+│   └── 📄 <span class="text-gray-400">typography.js</span>
+├── 📁 <span class="text-purple-400">utils/</span>
+│   └── 📄 <span class="text-gray-400">serverHelpers.js</span>
+├── 📁 <span class="text-purple-400">svg/</span>
+│   └── 📄 <span class="text-gray-400">Logo.jsx</span>
+├── 📁 <span class="text-purple-400">tailwind/</span>
+│   └── 📄 <span class="text-gray-400">plugin.js</span>
+└── 📁 <span class="text-purple-400">styles/</span>
+    ├── 📁 <span class="text-purple-400">vertical/</span>
+    │   ├── 📄 <span class="text-gray-400">navigationCustomStyles.js</span>
+    │   ├── 📄 <span class="text-gray-400">menuItemStyles.js</span>
+    │   └── 📄 <span class="text-gray-400">menuSectionStyles.js</span>
+    ├── 📄 <span class="text-gray-400">stepper.js</span>
+    └── 📄 <span class="text-gray-400">table.module.css</span></code></pre>
+                    </div>
+                    <div>
+                        <h3 class="font-semibold text-lg mb-2 text-purple-300">src/@layouts/ - レイアウト管理</h3>
+                        <pre class="bg-gray-900 rounded-lg p-4 text-sm font-mono overflow-x-auto"><code><span class="text-purple-400">@layouts/</span>
+├── 📁 <span class="text-purple-400">components/</span>
+│   └── 📁 <span class="text-purple-400">vertical/</span>
+│       ├── 📄 <span class="text-gray-400">Footer.jsx</span>
+│       ├── 📄 <span class="text-gray-400">LayoutContent.jsx</span>
+│       └── 📄 <span class="text-gray-400">Navbar.jsx</span>
+├── 📁 <span class="text-purple-400">styles/</span>
+│   ├── 📁 <span class="text-purple-400">shared/</span>
+│   │   └── 📄 <span class="text-gray-400">StyledMain.jsx</span>
+│   └── 📁 <span class="text-purple-400">vertical/</span>
+│       ├── 📄 <span class="text-gray-400">StyledFooter.jsx</span>
+│       └── 📄 <span class="text-gray-400">StyledHeader.jsx</span>
+├── 📁 <span class="text-purple-400">utils/</span>
+│   └── 📄 <span class="text-gray-400">layoutClasses.js</span>
+├── 📄 <span class="text-gray-400">BlankLayout.jsx</span>
+├── 📄 <span class="text-gray-400">LayoutWrapper.jsx</span>
+└── 📄 <span class="text-gray-400">VerticalLayout.jsx</span></code></pre>
+                    </div>
+                    <div>
+                        <h3 class="font-semibold text-lg mb-2 text-purple-300">src/views/ - ページビュー</h3>
+                        <pre class="bg-gray-900 rounded-lg p-4 text-sm font-mono overflow-x-auto"><code><span class="text-purple-400">views/</span>
+├── 📁 <span class="text-purple-400">dashboard/</span>
+├── 📁 <span class="text-purple-400">account-settings/</span>
+├── 📄 <span class="text-gray-400">Login.jsx</span>
+└── 📄 <span class="text-gray-400">Register.jsx</span></code></pre>
+                    </div>
+                </div>
+            </section>
+
+            <!-- @core/ ディレクトリ詳細説明 -->
+            <section class="glass-card rounded-2xl p-6">
+                <h2 class="flex items-center text-2xl font-bold mb-6 text-gray-100">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-3 text-blue-400"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"></path></svg>
+                    @core/ ディレクトリ詳細説明
+                </h2>
+                
+                <div class="space-y-6">
+                    <!-- components/ -->
+                    <div class="bg-gray-800/60 p-4 rounded-lg">
+                        <h3 class="text-lg font-semibold text-purple-300 mb-3">📁 components/ - カスタムコンポーネント</h3>
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                            <div>
+                                <h4 class="font-medium text-cyan-300 mb-2">mui/ - Material-UI拡張</h4>
+                                <ul class="text-sm text-gray-300 space-y-1">
+                                    <li><strong>Avatar.jsx:</strong> カスタマイズ可能なアバターコンポーネント（スキン、カラー、サイズ対応）</li>
+                                    <li><strong>IconButton.jsx:</strong> アイコンボタンのカスタム実装</li>
+                                </ul>
+                            </div>
+                            <div>
+                                <h4 class="font-medium text-cyan-300 mb-2">option-menu/ - オプションメニュー</h4>
+                                <ul class="text-sm text-gray-300 space-y-1">
+                                    <li><strong>index.jsx:</strong> ドロップダウンメニューやオプション選択UI</li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- contexts/ -->
+                    <div class="bg-gray-800/60 p-4 rounded-lg">
+                        <h3 class="text-lg font-semibold text-purple-300 mb-3">📁 contexts/ - React Context</h3>
+                        <div>
+                            <h4 class="font-medium text-cyan-300 mb-2">settingsContext.jsx</h4>
+                            <p class="text-sm text-gray-300 mb-2">アプリケーション全体の設定管理（テーマ、モード等）を提供するReact Context</p>
+                            <ul class="text-sm text-gray-300 space-y-1">
+                                <li>• テーマ設定の状態管理</li>
+                                <li>• Cookie ベースの設定永続化</li>
+                                <li>• ページ固有設定の一時管理</li>
+                                <li>• 設定変更の追跡機能</li>
+                            </ul>
+                        </div>
+                    </div>
+
+                    <!-- hooks/ -->
+                    <div class="bg-gray-800/60 p-4 rounded-lg">
+                        <h3 class="text-lg font-semibold text-purple-300 mb-3">📁 hooks/ - カスタムReact Hooks</h3>
+                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                            <div>
+                                <h4 class="font-medium text-cyan-300 mb-2">useSettings.jsx</h4>
+                                <p class="text-sm text-gray-300">SettingsContextを使用するためのカスタムフック</p>
+                            </div>
+                            <div>
+                                <h4 class="font-medium text-cyan-300 mb-2">useObjectCookie.js</h4>
+                                <p class="text-sm text-gray-300">オブジェクト形式のCookie管理フック</p>
+                            </div>
+                            <div>
+                                <h4 class="font-medium text-cyan-300 mb-2">useImageVariant.js</h4>
+                                <p class="text-sm text-gray-300">画像バリアント（ダーク/ライト）の管理フック</p>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- theme/ -->
+                    <div class="bg-gray-800/60 p-4 rounded-lg">
+                        <h3 class="text-lg font-semibold text-purple-300 mb-3">📁 theme/ - テーマシステム</h3>
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                            <div>
+                                <h4 class="font-medium text-cyan-300 mb-2">メインファイル</h4>
+                                <ul class="text-sm text-gray-300 space-y-1">
+                                    <li><strong>index.js:</strong> テーマのメイン設定（MUI + Inter フォント）</li>
+                                    <li><strong>colorSchemes.js:</strong> ダーク/ライトモードのカラーパレット</li>
+                                    <li><strong>typography.js:</strong> フォント設定とタイポグラフィ</li>
+                                    <li><strong>shadows.js:</strong> シャドウ効果の定義</li>
+                                    <li><strong>spacing.js:</strong> スペーシングシステム</li>
+                                </ul>
+                            </div>
+                            <div>
+                                <h4 class="font-medium text-cyan-300 mb-2">overrides/ - MUIオーバーライド</h4>
+                                <p class="text-sm text-gray-300 mb-2">37個のMUIコンポーネントのカスタマイズ</p>
+                                <ul class="text-sm text-gray-300 space-y-1">
+                                    <li>• Button, Card, Dialog</li>
+                                    <li>• Form components (Input, Select)</li>
+                                    <li>• Navigation (Menu, Tabs)</li>
+                                    <li>• Feedback (Alert, Snackbar)</li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- utils/ -->
+                    <div class="bg-gray-800/60 p-4 rounded-lg">
+                        <h3 class="text-lg font-semibold text-purple-300 mb-3">📁 utils/ - ユーティリティ関数</h3>
+                        <div>
+                            <h4 class="font-medium text-cyan-300 mb-2">serverHelpers.js</h4>
+                            <p class="text-sm text-gray-300 mb-2">サーバーサイドでの設定取得ヘルパー関数</p>
+                            <ul class="text-sm text-gray-300 space-y-1">
+                                <li>• Cookie からの設定読み取り</li>
+                                <li>• テーマモードの取得</li>
+                                <li>• システムモードの判定</li>
+                            </ul>
+                        </div>
+                    </div>
+
+                    <!-- svg/ -->
+                    <div class="bg-gray-800/60 p-4 rounded-lg">
+                        <h3 class="text-lg font-semibold text-purple-300 mb-3">📁 svg/ - SVGコンポーネント</h3>
+                        <div>
+                            <h4 class="font-medium text-cyan-300 mb-2">Logo.jsx</h4>
+                            <p class="text-sm text-gray-300">アプリケーションのロゴSVGコンポーネント（レスポンシブ対応）</p>
+                        </div>
+                    </div>
+
+                    <!-- tailwind/ -->
+                    <div class="bg-gray-800/60 p-4 rounded-lg">
+                        <h3 class="text-lg font-semibold text-purple-300 mb-3">📁 tailwind/ - Tailwind CSS設定</h3>
+                        <div>
+                            <h4 class="font-medium text-cyan-300 mb-2">plugin.js</h4>
+                            <p class="text-sm text-gray-300 mb-2">Tailwind CSSとMUIの統合プラグイン</p>
+                            <ul class="text-sm text-gray-300 space-y-1">
+                                <li>• MUIテーマ変数のTailwind統合</li>
+                                <li>• カスタムカラーシステム</li>
+                                <li>• レスポンシブブレークポイント</li>
+                                <li>• カスタムシャドウとz-index</li>
+                            </ul>
+                        </div>
+                    </div>
+
+                    <!-- styles/ -->
+                    <div class="bg-gray-800/60 p-4 rounded-lg">
+                        <h3 class="text-lg font-semibold text-purple-300 mb-3">📁 styles/ - スタイル定義</h3>
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                            <div>
+                                <h4 class="font-medium text-cyan-300 mb-2">メインファイル</h4>
+                                <ul class="text-sm text-gray-300 space-y-1">
+                                    <li><strong>stepper.js:</strong> ステッパーコンポーネントのスタイル</li>
+                                    <li><strong>table.module.css:</strong> テーブルのCSSモジュール</li>
+                                </ul>
+                            </div>
+                            <div>
+                                <h4 class="font-medium text-cyan-300 mb-2">vertical/ - 垂直レイアウト</h4>
+                                <ul class="text-sm text-gray-300 space-y-1">
+                                    <li><strong>navigationCustomStyles.js:</strong> ナビゲーションのカスタムスタイル</li>
+                                    <li><strong>menuItemStyles.js:</strong> メニューアイテムのスタイル</li>
+                                    <li><strong>menuSectionStyles.js:</strong> メニューセクションのスタイル</li>
+                                </ul>
+                            </div>
+                        </div>
+                                         </div>
+                 </div>
+             </section>
+
+             <!-- @layouts/ ディレクトリ詳細説明 -->
+             <section class="glass-card rounded-2xl p-6">
+                 <h2 class="flex items-center text-2xl font-bold mb-6 text-gray-100">
+                     <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-3 text-indigo-400"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="9" y1="9" x2="9" y2="9"></line><line x1="15" y1="9" x2="15" y2="9"></line><line x1="9" y1="15" x2="9" y2="15"></line><line x1="15" y1="15" x2="15" y2="15"></line></svg>
+                     @layouts/ ディレクトリ詳細説明
+                 </h2>
+                 
+                 <div class="space-y-6">
+                     <!-- メインレイアウトファイル -->
+                     <div class="bg-gray-800/60 p-4 rounded-lg">
+                         <h3 class="text-lg font-semibold text-purple-300 mb-3">📄 メインレイアウトファイル</h3>
+                         <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                             <div>
+                                 <h4 class="font-medium text-cyan-300 mb-2">LayoutWrapper.jsx</h4>
+                                 <p class="text-sm text-gray-300 mb-2">レイアウトの共通ラッパーコンポーネント</p>
+                                 <ul class="text-sm text-gray-300 space-y-1">
+                                     <li>• 垂直レイアウトの基本構造</li>
+                                     <li>• Flexbox レイアウト管理</li>
+                                 </ul>
+                             </div>
+                             <div>
+                                 <h4 class="font-medium text-cyan-300 mb-2">VerticalLayout.jsx</h4>
+                                 <p class="text-sm text-gray-300 mb-2">垂直レイアウトのメインコンポーネント</p>
+                                 <ul class="text-sm text-gray-300 space-y-1">
+                                     <li>• ナビゲーション、ヘッダー、フッター配置</li>
+                                     <li>• レスポンシブ対応</li>
+                                     <li>• コンテンツエリア管理</li>
+                                 </ul>
+                             </div>
+                             <div>
+                                 <h4 class="font-medium text-cyan-300 mb-2">BlankLayout.jsx</h4>
+                                 <p class="text-sm text-gray-300 mb-2">シンプルな空白レイアウト</p>
+                                 <ul class="text-sm text-gray-300 space-y-1">
+                                     <li>• ログインページ等で使用</li>
+                                     <li>• 最小限のスタイリング</li>
+                                 </ul>
+                             </div>
+                         </div>
+                     </div>
+
+                     <!-- components/ -->
+                     <div class="bg-gray-800/60 p-4 rounded-lg">
+                         <h3 class="text-lg font-semibold text-purple-300 mb-3">📁 components/ - レイアウトコンポーネント</h3>
+                         <div>
+                             <h4 class="font-medium text-cyan-300 mb-2">vertical/ - 垂直レイアウトコンポーネント</h4>
+                             <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                                 <div>
+                                     <h5 class="font-medium text-green-300 mb-1">Navbar.jsx</h5>
+                                     <p class="text-sm text-gray-300 mb-2">ヘッダーナビゲーションコンポーネント</p>
+                                     <ul class="text-sm text-gray-300 space-y-1">
+                                         <li>• ヘッダー固定/分離モード</li>
+                                         <li>• コンパクトモード対応</li>
+                                         <li>• カスタムスタイル上書き</li>
+                                     </ul>
+                                 </div>
+                                 <div>
+                                     <h5 class="font-medium text-green-300 mb-1">Footer.jsx</h5>
+                                     <p class="text-sm text-gray-300 mb-2">フッターコンポーネント</p>
+                                     <ul class="text-sm text-gray-300 space-y-1">
+                                         <li>• フッター固定/分離モード</li>
+                                         <li>• コンパクトモード対応</li>
+                                         <li>• レスポンシブ対応</li>
+                                     </ul>
+                                 </div>
+                                 <div>
+                                     <h5 class="font-medium text-green-300 mb-1">LayoutContent.jsx</h5>
+                                     <p class="text-sm text-gray-300 mb-2">メインコンテンツエリア</p>
+                                     <ul class="text-sm text-gray-300 space-y-1">
+                                         <li>• ページコンテンツ表示</li>
+                                         <li>• コンパクトモード</li>
+                                         <li>• Flexbox レイアウト</li>
+                                     </ul>
+                                 </div>
+                             </div>
+                         </div>
+                     </div>
+
+                     <!-- styles/ -->
+                     <div class="bg-gray-800/60 p-4 rounded-lg">
+                         <h3 class="text-lg font-semibold text-purple-300 mb-3">📁 styles/ - スタイル定義</h3>
+                         <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                             <div>
+                                 <h4 class="font-medium text-cyan-300 mb-2">shared/ - 共有スタイル</h4>
+                                 <ul class="text-sm text-gray-300 space-y-1">
+                                     <li><strong>StyledMain.jsx:</strong> メインコンテンツエリアのスタイル（Emotion）</li>
+                                     <li>• レイアウトパディング設定</li>
+                                     <li>• コンパクトモード対応</li>
+                                     <li>• 最大幅制限</li>
+                                 </ul>
+                             </div>
+                             <div>
+                                 <h4 class="font-medium text-cyan-300 mb-2">vertical/ - 垂直レイアウトスタイル</h4>
+                                 <ul class="text-sm text-gray-300 space-y-1">
+                                     <li><strong>StyledHeader.jsx:</strong> ヘッダーのスタイル定義</li>
+                                     <li>• ヘッダー高さ設定</li>
+                                     <li>• ナビゲーションバー配置</li>
+                                     <li><strong>StyledFooter.jsx:</strong> フッターのスタイル定義</li>
+                                     <li>• フッター配置とパディング</li>
+                                 </ul>
+                             </div>
+                         </div>
+                     </div>
+
+                     <!-- utils/ -->
+                     <div class="bg-gray-800/60 p-4 rounded-lg">
+                         <h3 class="text-lg font-semibold text-purple-300 mb-3">📁 utils/ - ユーティリティ</h3>
+                         <div>
+                             <h4 class="font-medium text-cyan-300 mb-2">layoutClasses.js</h4>
+                             <p class="text-sm text-gray-300 mb-2">レイアウト用CSSクラス定義</p>
+                             <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                                 <div>
+                                     <h5 class="font-medium text-green-300 mb-1">垂直レイアウトクラス</h5>
+                                     <ul class="text-sm text-gray-300 space-y-1">
+                                         <li>• ルート、コンテンツラッパー</li>
+                                         <li>• ヘッダー/フッター（固定/分離）</li>
+                                         <li>• ナビゲーション、コンテンツ</li>
+                                         <li>• コンパクトモード対応</li>
+                                     </ul>
+                                 </div>
+                                 <div>
+                                     <h5 class="font-medium text-green-300 mb-1">空白レイアウトクラス</h5>
+                                     <ul class="text-sm text-gray-300 space-y-1">
+                                         <li>• シンプルなルートクラス</li>
+                                         <li>• 最小限のスタイリング</li>
+                                     </ul>
+                                 </div>
+                             </div>
+                         </div>
+                     </div>
+
+                     <!-- レイアウトシステムの特徴 -->
+                     <div class="bg-gray-800/60 p-4 rounded-lg">
+                         <h3 class="text-lg font-semibold text-purple-300 mb-3">🎯 レイアウトシステムの特徴</h3>
+                         <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+                             <div class="bg-gray-700/60 p-3 rounded-lg">
+                                 <div class="text-sm font-medium text-cyan-300 mb-1">モジュラー設計</div>
+                                 <div class="text-xs text-gray-300">コンポーネント単位での組み合わせ</div>
+                             </div>
+                             <div class="bg-gray-700/60 p-3 rounded-lg">
+                                 <div class="text-sm font-medium text-cyan-300 mb-1">レスポンシブ対応</div>
+                                 <div class="text-xs text-gray-300">モバイル・デスクトップ対応</div>
+                             </div>
+                             <div class="bg-gray-700/60 p-3 rounded-lg">
+                                 <div class="text-sm font-medium text-cyan-300 mb-1">テーマ統合</div>
+                                 <div class="text-xs text-gray-300">MUIテーマとの連携</div>
+                             </div>
+                             <div class="bg-gray-700/60 p-3 rounded-lg">
+                                 <div class="text-sm font-medium text-cyan-300 mb-1">カスタマイズ可能</div>
+                                 <div class="text-xs text-gray-300">スタイル上書き機能</div>
+                             </div>
+                             <div class="bg-gray-700/60 p-3 rounded-lg">
+                                 <div class="text-sm font-medium text-cyan-300 mb-1">パフォーマンス最適化</div>
+                                 <div class="text-xs text-gray-300">効率的なレンダリング</div>
+                             </div>
+                             <div class="bg-gray-700/60 p-3 rounded-lg">
+                                 <div class="text-sm font-medium text-cyan-300 mb-1">アクセシビリティ</div>
+                                 <div class="text-xs text-gray-300">セマンティックHTML</div>
+                             </div>
+                         </div>
+                     </div>
+                 </div>
+             </section>
+
+             <!-- アプリケーションの特徴 -->
+            <section class="glass-card rounded-2xl p-6">
+                <h2 class="flex items-center text-2xl font-bold mb-6 text-gray-100">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-3 text-yellow-400"><path d="M12.5 22h-1a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h1a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2z"></path><path d="M16.5 2h1a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2h-1"></path><path d="M8.5 2h-1a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h1"></path></svg>
+                    アプリケーションの特徴
+                </h2>
+                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 text-center">
+                    <div class="bg-gray-800/60 p-5 rounded-lg">
+                        <div class="text-lg font-semibold text-purple-300 mb-2">モダンなアーキテクチャ</div>
+                        <div class="text-sm text-gray-300">@core/ による分離された設計</div>
+                    </div>
+                    <div class="bg-gray-800/60 p-5 rounded-lg">
+                        <div class="text-lg font-semibold text-purple-300 mb-2">コンポーネントベース</div>
+                        <div class="text-sm text-gray-300">再利用可能なUIコンポーネント</div>
+                    </div>
+                    <div class="bg-gray-800/60 p-5 rounded-lg">
+                        <div class="text-lg font-semibold text-purple-300 mb-2">レスポンシブデザイン</div>
+                        <div class="text-sm text-gray-300">Tailwind CSS統合</div>
+                    </div>
+                    <div class="bg-gray-800/60 p-5 rounded-lg">
+                        <div class="text-lg font-semibold text-purple-300 mb-2">テーマシステム</div>
+                        <div class="text-sm text-gray-300">ダーク/ライトモード対応</div>
+                    </div>
+                    <div class="bg-gray-800/60 p-5 rounded-lg">
+                        <div class="text-lg font-semibold text-purple-300 mb-2">状態管理</div>
+                        <div class="text-sm text-gray-300">React Context + Hooks</div>
+                    </div>
+                    <div class="bg-gray-800/60 p-5 rounded-lg">
+                        <div class="text-lg font-semibold text-purple-300 mb-2">豊富なUI</div>
+                        <div class="text-sm text-gray-300">MUI + カスタムコンポーネント</div>
+                    </div>
+                </div>
+            </section>
+            
+            <!-- 開発・ビルドコマンド -->
+            <section class="glass-card rounded-2xl p-6">
+                <h2 class="flex items-center text-2xl font-bold mb-6 text-gray-100">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-3 text-red-400"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg>
+                    開発・ビルドコマンド
+                </h2>
+                <div class="bg-black rounded-md p-4 font-mono text-sm overflow-x-auto">
+                    <p class="mb-2"><span class="text-green-400"># 開発サーバー起動</span></p>
+                    <p class="mb-4"><span class="text-white">$</span> npm run dev</p>
+                    <p class="mb-2"><span class="text-green-400"># プロダクションビルド</span></p>
+                    <p class="mb-4"><span class="text-white">$</span> npm run build</p>
+                    <p class="mb-2"><span class="text-green-400"># コード品質チェック & フォーマット</span></p>
+                    <p><span class="text-white">$</span> npm run lint</p>
+                    <p><span class="text-white">$</span> npm run format</p>
+                </div>
+            </section>
+
+        </main>
+
+        <!-- フッター -->
+        <footer class="text-center text-gray-500 text-sm mt-12">
+            <p>📅 解析日時: 2025年 | 🏢 G3 Webapp Front 2025 プロジェクト</p>
+        </footer>
+
+    </div>
+
+</body>
+</html>
diff --git "a/docs/\350\243\234\350\266\263Tips/\350\252\215\350\250\274\343\201\256\343\202\204\343\202\212\346\226\271.html" "b/docs/\350\243\234\350\266\263Tips/\350\252\215\350\250\274\343\201\256\343\202\204\343\202\212\346\226\271.html"
new file mode 100644
index 000000000..595ebb600
--- /dev/null
+++ "b/docs/\350\243\234\350\266\263Tips/\350\252\215\350\250\274\343\201\256\343\202\204\343\202\212\346\226\271.html"
@@ -0,0 +1,220 @@
+<!DOCTYPE html>
+<html lang="ja">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>認証・API通信の知見まとめ</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <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=Inter:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;700&display=swap"
+        rel="stylesheet">
+    <!-- Ioniconsを読み込む -->
+    <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
+    <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
+    <style>
+        body {
+            font-family: 'Inter', 'Noto Sans JP', sans-serif;
+        }
+    </style>
+</head>
+
+<body class="bg-slate-50 text-slate-800">
+
+    <div class="container mx-auto p-4 sm:p-6 lg:p-8">
+        <header class="mb-8 text-center">
+            <h1 class="text-4xl font-bold text-slate-900">認証とAPI通信、完全理解しよ！💖</h1>
+            <p class="mt-2 text-lg text-slate-600">アクセストークンからHTTPメソッド、WebSocketまで、大事なこと全部まとめといたよん！</p>
+        </header>
+
+        <div class="space-y-12">
+
+            <!-- 1. アクセストークン、どこに保存する？ -->
+            <section id="token-storage">
+                <h2 class="text-2xl font-bold border-b-2 border-pink-500 pb-2 mb-4 flex items-center">
+                    <ion-icon name="key-outline" class="mr-3 text-2xl text-pink-500"></ion-icon>
+                    1. アクセストークン、どこに保存する？
+                </h2>
+                <div class="bg-white p-6 rounded-lg shadow-md">
+                    <p class="mb-6">ログインしたらもらえる「アクセストークン」。これ、フロントのどこに保存しとくのがイケてるのか？って話。選択肢は主に2つ！</p>
+
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                        <!-- HttpOnly Cookie -->
+                        <div class="border-2 border-green-500 rounded-lg p-4 bg-green-50">
+                            <h3 class="text-xl font-bold text-green-800 mb-2">🏆 HttpOnly Cookie (こっちが優勝！)</h3>
+                            <p class="text-green-700">サーバー側で設定する特別なCookie。JavaScriptから盗み見できないから、セキュリティ的にマジ最強！</p>
+                            <ul class="mt-4 space-y-2 text-sm">
+                                <li class="flex items-start"><span class="text-green-500 mr-2">✔</span> 悪意のあるスクリプト攻撃
+                                    (XSS) にちょー強い！</li>
+                                <li class="flex items-start"><span class="text-green-500 mr-2">✔</span> プロはこっちを使ってること多め。
+                                </li>
+                                <li class="flex items-start"><span class="text-gray-500 mr-2">⚠</span> サーバー側の設定がちょい必要。
+                                </li>
+                            </ul>
+                        </div>
+                        <!-- localStorage -->
+                        <div class="border rounded-lg p-4 bg-gray-50">
+                            <h3 class="text-xl font-bold text-gray-800 mb-2">🤔 localStorage (お手軽だけど…)</h3>
+                            <p class="text-gray-700">ブラウザにサクッとデータを保存できる機能。実装は楽だけど、セキュリティ面がちょい心配かも。</p>
+                            <ul class="mt-4 space-y-2 text-sm">
+                                <li class="flex items-start"><span class="text-green-500 mr-2">✔</span>
+                                    JavaScriptで読み書きが超かんたん！</li>
+                                <li class="flex items-start"><span class="text-red-500 mr-2">❌</span>
+                                    XSS攻撃でトークンが盗まれるリスクがある。</li>
+                                <li class="flex items-start"><span class="text-red-500 mr-2">❌</span> 大事な情報は入れないのがお約束。
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                    <div class="mt-6 p-4 bg-indigo-100 text-indigo-800 rounded-lg">
+                        <p class="font-bold">結論：セキュリティをガチるなら、めんどくさくても `HttpOnly Cookie` を使うのが絶対おすすめ！</p>
+                    </div>
+                </div>
+            </section>
+
+            <!-- 2. API通信の流れ -->
+            <section id="api-flow">
+                <h2 class="text-2xl font-bold border-b-2 border-cyan-500 pb-2 mb-4 flex items-center">
+                    <ion-icon name="git-compare-outline" class="mr-3 text-2xl text-cyan-500"></ion-icon>
+                    2. API通信のウラ側、こーなってる！
+                </h2>
+                <div class="bg-white p-6 rounded-lg shadow-md">
+                    <p class="mb-6">「毎回API叩くたびに認証？」って思うかもだけど、実はそーじゃない！アクセストークンは「通行証」みたいなもん。一回もらっちゃえば、あとはそれを見せるだけ！</p>
+
+                    <ol class="space-y-4">
+                        <li class="flex items-start">
+                            <div
+                                class="flex-shrink-0 bg-cyan-500 text-white w-8 h-8 rounded-full flex items-center justify-center font-bold mr-4">
+                                1</div>
+                            <div>
+                                <h4 class="font-bold">ログイン (最初の一回だけ！)</h4>
+                                <p class="text-sm text-gray-600">IDとパスワードで `/api/auth/login` を叩く。ここで本人確認！</p>
+                            </div>
+                        </li>
+                        <li class="flex items-start">
+                            <div
+                                class="flex-shrink-0 bg-cyan-500 text-white w-8 h-8 rounded-full flex items-center justify-center font-bold mr-4">
+                                2</div>
+                            <div>
+                                <h4 class="font-bold">「通行証」をGET！</h4>
+                                <p class="text-sm text-gray-600">認証が成功したら、サーバーから「アクセストークン (通行証)」がもらえる。これをフロントで大事に保存しとく。
+                                </p>
+                            </div>
+                        </li>
+                        <li class="flex items-start">
+                            <div
+                                class="flex-shrink-0 bg-cyan-500 text-white w-8 h-8 rounded-full flex items-center justify-center font-bold mr-4">
+                                3</div>
+                            <div>
+                                <h4 class="font-bold">APIを叩く (通行証を見せる！)</h4>
+                                <p class="text-sm text-gray-600">認証が必要なAPI (従業員リスト取得とか) を叩くとき、リクエストヘッダーに「Authorization:
+                                    Bearer [通行証]」を付けて送る。</p>
+                            </div>
+                        </li>
+                        <li class="flex items-start">
+                            <div
+                                class="flex-shrink-0 bg-cyan-500 text-white w-8 h-8 rounded-full flex items-center justify-center font-bold mr-4">
+                                4</div>
+                            <div>
+                                <h4 class="font-bold">サーバーがチェック → OK！</h4>
+                                <p class="text-sm text-gray-600">サーバーは通行証を見て「お、有効なやつね！OK！」って判断して、データを返してくれる。</p>
+                            </div>
+                        </li>
+                    </ol>
+                </div>
+            </section>
+
+            <!-- 3. フロントエンド実装の流れ -->
+            <section id="frontend-impl">
+                <h2 class="text-2xl font-bold border-b-2 border-purple-500 pb-2 mb-4 flex items-center">
+                    <ion-icon name="code-slash-outline" class="mr-3 text-2xl text-purple-500"></ion-icon>
+                    3. じゃ、フロントはどう書くの？
+                </h2>
+                <div class="bg-white p-6 rounded-lg shadow-md">
+                    <p class="mb-6">以上のことをふまえて、フロントエンドの実装はこんな感じの流れでやるとイケてる！</p>
+                    <ul class="list-disc list-inside space-y-3">
+                        <li><span class="font-bold">ログイン処理:</span> ユーザーが入力したID/パスで `/api/auth/login` を叩く。</li>
+                        <li><span class="font-bold">トークン保存:</span> 返ってきたアクセストークンを `HttpOnly Cookie` に保存してもらう (サーバー側で設定)。
+                        </li>
+                        <li><span class="font-bold">API通信設定:</span> `axios` みたいなライブラリで、全てのリクエストに自動で `Authorization`
+                            ヘッダーが付くように設定しとくと神。</li>
+                        <li><span class="font-bold">ログイン状態維持:</span> ページをリロードしたとき、`/api/auth/me`
+                            を叩いてログイン状態をチェック。ダメだったらログイン画面に強制送還！</li>
+                        <li><span class="font-bold">ログアウト処理:</span> ログアウトボタンが押されたら `/api/auth/logout`
+                            を叩く。成功したら、フロント側でもログイン状態を解除する。</li>
+                    </ul>
+                </div>
+            </section>
+
+            <!-- 4. HTTPメソッドってなに？ -->
+            <section id="http-methods">
+                <h2 class="text-2xl font-bold border-b-2 border-orange-500 pb-2 mb-4 flex items-center">
+                    <ion-icon name="rocket-outline" class="mr-3 text-2xl text-orange-500"></ion-icon>
+                    4. GET, POST… HTTPメソッドってなに？
+                </h2>
+                <div class="bg-white p-6 rounded-lg shadow-md">
+                    <p class="mb-6">APIを叩くときに指定する `GET` とか `POST` とかっていうのは、「サーバーに何をさせたいか」を伝えるための命令みたいなもん！代表的なやつを覚えとけばOK！
+                    </p>
+                    <div class="space-y-4">
+                        <!-- GET -->
+                        <div class="p-4 border-l-4 border-blue-500 bg-blue-50 rounded-r-lg">
+                            <h4 class="font-bold text-lg text-blue-800">GET: 「これちょーだい！」 (取得)</h4>
+                            <p class="text-sm text-blue-700 mt-1">サーバーから情報を<span
+                                    class="font-bold">もらう</span>ときに使う。例：従業員リストの表示、特定の商品情報の表示とか。見るだけだから、データが変わることはないよ。
+                            </p>
+                        </div>
+                        <!-- POST -->
+                        <div class="p-4 border-l-4 border-green-500 bg-green-50 rounded-r-lg">
+                            <h4 class="font-bold text-lg text-green-800">POST: 「これ追加しといて！」 (新規作成)</h4>
+                            <p class="text-sm text-green-700 mt-1">サーバーに新しいデータを<span
+                                    class="font-bold">作る</span>ときにお願いする。例：新しい従業員の登録、ブログの新規投稿とか。</p>
+                        </div>
+                        <!-- PUT -->
+                        <div class="p-4 border-l-4 border-yellow-500 bg-yellow-50 rounded-r-lg">
+                            <h4 class="font-bold text-lg text-yellow-800">PUT: 「これで全部上書きしといて！」 (更新)</h4>
+                            <p class="text-sm text-yellow-700 mt-1">既存のデータを<span
+                                    class="font-bold">まるっと全部</span>新しい情報に置き換えるときに使う。例：従業員情報の全体的な変更とか。</p>
+                        </div>
+                        <!-- DELETE -->
+                        <div class="p-4 border-l-4 border-red-500 bg-red-50 rounded-r-lg">
+                            <h4 class="font-bold text-lg text-red-800">DELETE: 「これ消しといて！」 (削除)</h4>
+                            <p class="text-sm text-red-700 mt-1">データを<span
+                                    class="font-bold">消す</span>ときにお願いする。そのまんまだね！例：従業員の削除、投稿の削除とか。</p>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <!-- 5. WebSocketってなに？ -->
+            <section id="websocket">
+                <h2 class="text-2xl font-bold border-b-2 border-teal-500 pb-2 mb-4 flex items-center">
+                    <ion-icon name="flash-outline" class="mr-3 text-2xl text-teal-500"></ion-icon>
+                    5. リアルタイム通信の神！WebSocketって何？
+                </h2>
+                <div class="bg-white p-6 rounded-lg shadow-md">
+                    <p class="mb-6">機械の状況とか、検査結果をリアルタイムで画面に反映したいときに出てくるのがこいつ！HTTP通信とはちょっと違う、特別な通信方法だよ。</p>
+                    <div class="p-4 border-l-4 border-teal-500 bg-teal-50 rounded-r-lg">
+                        <h4 class="font-bold text-lg text-teal-800">WebSocket: 「ずっと電話繋いどこ！」 (双方向通信)</h4>
+                        <p class="text-sm text-teal-700 mt-1">普通のHTTP通信が「手紙のやり取り（一回ずつ完結）」だとしたら、WebSocketは<span
+                                class="font-bold">「ずーっと繋ぎっぱなしの電話」</span>みたいな感じ！</p>
+                        <ul class="mt-3 list-disc list-inside space-y-2 text-sm text-teal-700">
+                            <li>一回接続したら、サーバーからもフロントからも、好きなタイミングでデータを送りあえる！</li>
+                            <li>だから、サーバー側で「あ、新しい検査結果でた！」ってなったら、すぐにフロントに教えられる。</li>
+                            <li>チャットアプリとか、リアルタイムのゲームとか、株価の更新とか、そーゆーので使われてるイケてる技術！</li>
+                        </ul>
+                    </div>
+                </div>
+            </section>
+
+        </div>
+
+        <footer class="text-center text-slate-500 mt-12 py-4">
+            &copy; 2024 API Design by Gemini. All Rights Reserved.
+        </footer>
+    </div>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/javascript-version/.env.example b/javascript-version/.env.example
deleted file mode 100644
index fdb8d2728..000000000
--- a/javascript-version/.env.example
+++ /dev/null
@@ -1,8 +0,0 @@
-# -----------------------------------------------------------------------------
-# App
-# -----------------------------------------------------------------------------
-BASEPATH=
-NEXT_PUBLIC_APP_URL=http://localhost:3000${BASEPATH}
-NEXT_PUBLIC_DOCS_URL=https://demos.themeselection.com/materio-mui-nextjs-admin-template/documentation
-NEXT_PUBLIC_PRO_URL=https://demos.themeselection.com/materio-mui-nextjs-admin-template/demo-1
-NEXT_PUBLIC_REPO_NAME=materio-mui-nextjs-admin-template-free
diff --git a/javascript-version/jsconfig.json b/javascript-version/jsconfig.json
index 5c18ba335..c054db00e 100644
--- a/javascript-version/jsconfig.json
+++ b/javascript-version/jsconfig.json
@@ -47,10 +47,10 @@
   },
   "include": [
     "next.config.mjs",
-    "tailwind.config.js",
+    "tailwind.config.cjs",
     "**/*.js",
     "**/*.jsx"
-  ],
+, "src/assets/iconify-icons/bundle-icons-css.cjs"  ],
   "exclude": [
     "node_modules"
   ]
diff --git a/javascript-version/next.config.mjs b/javascript-version/next.config.mjs
index 83bdc8219..0e20ad4a1 100644
--- a/javascript-version/next.config.mjs
+++ b/javascript-version/next.config.mjs
@@ -1,6 +1,26 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  basePath: process.env.BASEPATH
+  basePath: process.env.BASEPATH,
+  env: {
+    NEXT_PUBLIC_PRO_URL: process.env.NEXT_PUBLIC_PRO_URL || 'https://themeselection.com',
+    NEXT_PUBLIC_DOCS_URL: process.env.NEXT_PUBLIC_DOCS_URL || 'https://demos.themeselection.com',
+  NEXT_PUBLIC_REPO_NAME: process.env.NEXT_PUBLIC_REPO_NAME || 'materio-mui-react-nextjs-admin-template-free',
+  NEXT_PUBLIC_BASE_PATH: process.env.BASEPATH || '',
+  // プロキシ環境での外部フォント取得を抑止（必要時は true を明示設定）
+  NEXT_PUBLIC_ENABLE_GOOGLE_FONTS: process.env.NEXT_PUBLIC_ENABLE_GOOGLE_FONTS || 'false'
+  },
+  async rewrites() {
+    return [
+      {
+        source: '/api/:path*',
+        // destination: 'http://10.100.54.170:3000/api/:path*'
+        destination: 'http://localhost:3001/api/:path*'
+      }
+    ]
+  }
+  // NOTE: experimental.suppressDeprecationWarnings は Next.js 14 では無効なため削除しました。
+  // Node の DeprecationWarning を抑止したい場合は既に package.json の dev スクリプトで
+  // NODE_OPTIONS=--no-deprecation を付けているので追加対応不要です。
 }
 
 export default nextConfig
diff --git a/javascript-version/package-lock.json b/javascript-version/package-lock.json
new file mode 100644
index 000000000..444a639dc
--- /dev/null
+++ b/javascript-version/package-lock.json
@@ -0,0 +1,9830 @@
+{
+  "name": "next-app-test",
+  "version": "0.1.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "next-app-test",
+      "version": "0.1.0",
+      "hasInstallScript": true,
+      "license": "Commercial",
+      "dependencies": {
+        "@emotion/cache": "^11.11.0",
+        "@emotion/react": "^11.11.4",
+        "@emotion/styled": "^11.11.5",
+        "@mui/lab": "5.0.0-alpha.170",
+        "@mui/material": "^5.15.19",
+        "@mui/material-nextjs": "^5.15.11",
+        "apexcharts": "^3.49.1",
+        "classnames": "^2.5.1",
+        "next": "^14.2.3",
+        "react": "^18.3.1",
+        "react-apexcharts": "^1.4.1",
+        "react-dom": "^18.3.1",
+        "react-perfect-scrollbar": "^1.5.8",
+        "react-use": "^17.5.0",
+        "server-only": "^0.0.1"
+      },
+      "devDependencies": {
+        "@iconify/json": "^2.2.218",
+        "@iconify/tools": "^4.0.4",
+        "@iconify/utils": "^2.1.24",
+        "autoprefixer": "^10.4.19",
+        "eslint": "^8.57.0",
+        "eslint-config-next": "^14.2.3",
+        "eslint-config-prettier": "^9.1.0",
+        "eslint-plugin-import": "^2.29.1",
+        "postcss": "^8.4.38",
+        "postcss-styled-syntax": "^0.6.4",
+        "prettier": "^3.3.2",
+        "stylelint": "^16.6.1",
+        "stylelint-use-logical-spec": "^5.0.1",
+        "tailwindcss": "^3.4.4",
+        "tailwindcss-logical": "^3.0.1",
+        "tsx": "^4.15.2"
+      }
+    },
+    "node_modules/@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@antfu/install-pkg": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@antfu/install-pkg/-/install-pkg-1.1.0.tgz",
+      "integrity": "sha512-MGQsmw10ZyI+EJo45CdSER4zEb+p31LpDAFp2Z3gkSd1yqVZGi0Ebx++YTEMonJy4oChEMLsxZ64j8FH6sSqtQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "package-manager-detector": "^1.3.0",
+        "tinyexec": "^1.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@antfu/utils": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/@antfu/utils/-/utils-8.1.1.tgz",
+      "integrity": "sha512-Mex9nXf9vR6AhcXmMrlz/HVgYYZpVGJ6YlPgwl7UnaFpnshXs6EK/oa5Gpf3CzENMjkvEx2tQtntGnb7UtSTOQ==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@babel/code-frame": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz",
+      "integrity": "sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.27.1",
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/generator": {
+      "version": "7.28.3",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.28.3.tgz",
+      "integrity": "sha512-3lSpxGgvnmZznmBkCRnVREPUFJv2wrv9iAoFDvADJc0ypmdOxdUtcLeBgBJ6zE0PMeTKnxeQzyk0xTBq4Ep7zw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.28.3",
+        "@babel/types": "^7.28.2",
+        "@jridgewell/gen-mapping": "^0.3.12",
+        "@jridgewell/trace-mapping": "^0.3.28",
+        "jsesc": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-globals": {
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.28.0.tgz",
+      "integrity": "sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-imports": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.27.1.tgz",
+      "integrity": "sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/traverse": "^7.27.1",
+        "@babel/types": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
+      "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.27.1.tgz",
+      "integrity": "sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.28.3",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.3.tgz",
+      "integrity": "sha512-7+Ey1mAgYqFAx2h0RuoxcQT5+MlG3GTV0TQrgr7/ZliKsm/MNDxVVutlWaziMq7wJNAz8MTqz55XLpWvva6StA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.28.2"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/runtime": {
+      "version": "7.28.3",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.3.tgz",
+      "integrity": "sha512-9uIQ10o0WGdpP6GDhXcdOJPJuDgFtIDtN/9+ArJQ2NAfAmiuhTQdzkaTGR33v43GYS2UrSA0eX2pPPHoFVvpxA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/template": {
+      "version": "7.27.2",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.2.tgz",
+      "integrity": "sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.27.1",
+        "@babel/parser": "^7.27.2",
+        "@babel/types": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse": {
+      "version": "7.28.3",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.28.3.tgz",
+      "integrity": "sha512-7w4kZYHneL3A6NP2nxzHvT3HCZ7puDZZjFMqDpBPECub79sTtSO5CGXDkKrTQq8ksAwfD/XI2MRFX23njdDaIQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.27.1",
+        "@babel/generator": "^7.28.3",
+        "@babel/helper-globals": "^7.28.0",
+        "@babel/parser": "^7.28.3",
+        "@babel/template": "^7.27.2",
+        "@babel/types": "^7.28.2",
+        "debug": "^4.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.28.2",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.2.tgz",
+      "integrity": "sha512-ruv7Ae4J5dUYULmeXw1gmb7rYRz57OWCPM57pHojnLq/3Z1CK2lNSLTCVjxVk1F/TZHwOZZrOWi0ur95BbLxNQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.27.1",
+        "@babel/helper-validator-identifier": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@csstools/css-parser-algorithms": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-3.0.5.tgz",
+      "integrity": "sha512-DaDeUkXZKjdGhgYaHNJTV9pV7Y9B3b644jCLs9Upc3VeNGg6LWARAT6O+Q+/COo+2gg/bM5rhpMAtf70WqfBdQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@csstools/css-tokenizer": "^3.0.4"
+      }
+    },
+    "node_modules/@csstools/css-tokenizer": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-3.0.4.tgz",
+      "integrity": "sha512-Vd/9EVDiu6PPJt9yAh6roZP6El1xHrdvIVGjyBsHR0RYwNHgL7FJPyIIW4fANJNG6FtyZfvlRPpFI4ZM/lubvw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@csstools/media-query-list-parser": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-4.0.3.tgz",
+      "integrity": "sha512-HAYH7d3TLRHDOUQK4mZKf9k9Ph/m8Akstg66ywKR4SFAigjs3yBiUeZtFxywiTm5moZMAp/5W/ZuFnNXXYLuuQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^3.0.5",
+        "@csstools/css-tokenizer": "^3.0.4"
+      }
+    },
+    "node_modules/@csstools/selector-specificity": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-5.0.0.tgz",
+      "integrity": "sha512-PCqQV3c4CoVm3kdPhyeZ07VmBRdH2EpMFA/pd9OASpOEC3aXNGoqPDAZ80D0cLpMBxnmk0+yNhGsEx31hq7Gtw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT-0",
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "postcss-selector-parser": "^7.0.0"
+      }
+    },
+    "node_modules/@dual-bundle/import-meta-resolve": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@dual-bundle/import-meta-resolve/-/import-meta-resolve-4.1.0.tgz",
+      "integrity": "sha512-+nxncfwHM5SgAtrVzgpzJOI1ol0PkumhVo469KCf9lUi21IGcY90G98VuHm9VRrUypmAzawAHO9bs6hqeADaVg==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/@emnapi/core": {
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.4.5.tgz",
+      "integrity": "sha512-XsLw1dEOpkSX/WucdqUhPWP7hDxSvZiY+fsUC14h+FtQ2Ifni4znbBt8punRX+Uj2JG/uDb8nEHVKvrVlvdZ5Q==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/wasi-threads": "1.0.4",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@emnapi/runtime": {
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.4.5.tgz",
+      "integrity": "sha512-++LApOtY0pEEz1zrd9vy1/zXVaVJJ/EbAF3u0fXIzPJEDtnITsBGbbK0EkM72amhl/R5b+5xx0Y/QhcVOpuulg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@emnapi/wasi-threads": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.0.4.tgz",
+      "integrity": "sha512-PJR+bOmMOPH8AtcTGAyYNiuJ3/Fcoj2XN/gBEWzDIKh254XO+mM9XoXHk5GNEhodxeMznbg7BlRojVbKN+gC6g==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@emotion/babel-plugin": {
+      "version": "11.13.5",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.13.5.tgz",
+      "integrity": "sha512-pxHCpT2ex+0q+HH91/zsdHkw/lXd468DIN2zvfvLtPKLLMo6gQj7oLObq8PhkrxOZb/gGCq03S3Z7PDhS8pduQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.16.7",
+        "@babel/runtime": "^7.18.3",
+        "@emotion/hash": "^0.9.2",
+        "@emotion/memoize": "^0.9.0",
+        "@emotion/serialize": "^1.3.3",
+        "babel-plugin-macros": "^3.1.0",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^4.0.0",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/cache": {
+      "version": "11.14.0",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.14.0.tgz",
+      "integrity": "sha512-L/B1lc/TViYk4DcpGxtAVbx0ZyiKM5ktoIyafGkH6zg/tj+mA+NE//aPYKG0k8kCHSHVJrpLpcAlOBEXQ3SavA==",
+      "license": "MIT",
+      "dependencies": {
+        "@emotion/memoize": "^0.9.0",
+        "@emotion/sheet": "^1.4.0",
+        "@emotion/utils": "^1.4.2",
+        "@emotion/weak-memoize": "^0.4.0",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/hash": {
+      "version": "0.9.2",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.2.tgz",
+      "integrity": "sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/is-prop-valid": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.3.1.tgz",
+      "integrity": "sha512-/ACwoqx7XQi9knQs/G0qKvv5teDMhD7bXYns9N/wM8ah8iNb8jZ2uNO0YOgiq2o2poIvVtJS2YALasQuMSQ7Kw==",
+      "license": "MIT",
+      "dependencies": {
+        "@emotion/memoize": "^0.9.0"
+      }
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz",
+      "integrity": "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/react": {
+      "version": "11.14.0",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.14.0.tgz",
+      "integrity": "sha512-O000MLDBDdk/EohJPFUqvnp4qnHeYkVP5B0xEG0D/L7cOKP9kefu2DXn8dj74cQfsEzUqh+sr1RzFqiL1o+PpA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.13.5",
+        "@emotion/cache": "^11.14.0",
+        "@emotion/serialize": "^1.3.3",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.2.0",
+        "@emotion/utils": "^1.4.2",
+        "@emotion/weak-memoize": "^0.4.0",
+        "hoist-non-react-statics": "^3.3.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/serialize": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.3.3.tgz",
+      "integrity": "sha512-EISGqt7sSNWHGI76hC7x1CksiXPahbxEOrC5RjmFRJTqLyEK9/9hZvBbiYn70dw4wuwMKiEMCUlR6ZXTSWQqxA==",
+      "license": "MIT",
+      "dependencies": {
+        "@emotion/hash": "^0.9.2",
+        "@emotion/memoize": "^0.9.0",
+        "@emotion/unitless": "^0.10.0",
+        "@emotion/utils": "^1.4.2",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@emotion/sheet": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.4.0.tgz",
+      "integrity": "sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/styled": {
+      "version": "11.14.1",
+      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.14.1.tgz",
+      "integrity": "sha512-qEEJt42DuToa3gurlH4Qqc1kVpNq8wO8cJtDzU46TjlzWjDlsVyevtYCRijVq3SrHsROS+gVQ8Fnea108GnKzw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.13.5",
+        "@emotion/is-prop-valid": "^1.3.0",
+        "@emotion/serialize": "^1.3.3",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.2.0",
+        "@emotion/utils": "^1.4.2"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.0.0-rc.0",
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/unitless": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.10.0.tgz",
+      "integrity": "sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/use-insertion-effect-with-fallbacks": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.2.0.tgz",
+      "integrity": "sha512-yJMtVdH59sxi/aVJBpk9FQq+OR8ll5GT8oWd57UpeaKEVGab41JWaCFA7FRLoMLloOZF/c/wsPoe+bfGmRKgDg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@emotion/utils": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.4.2.tgz",
+      "integrity": "sha512-3vLclRofFziIa3J2wDh9jjbkUz9qk5Vi3IZ/FSTKViB0k+ef0fPV7dYrUIugbgupYDx7v9ud/SjrtEP8Y4xLoA==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/weak-memoize": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.4.0.tgz",
+      "integrity": "sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==",
+      "license": "MIT"
+    },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.9.tgz",
+      "integrity": "sha512-OaGtL73Jck6pBKjNIe24BnFE6agGl+6KxDtTfHhy1HmhthfKouEcOhqpSL64K4/0WCtbKFLOdzD/44cJ4k9opA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.25.9.tgz",
+      "integrity": "sha512-5WNI1DaMtxQ7t7B6xa572XMXpHAaI/9Hnhk8lcxF4zVN4xstUgTlvuGDorBguKEnZO70qwEcLpfifMLoxiPqHQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.25.9.tgz",
+      "integrity": "sha512-IDrddSmpSv51ftWslJMvl3Q2ZT98fUSL2/rlUXuVqRXHCs5EUF1/f+jbjF5+NG9UffUDMCiTyh8iec7u8RlTLg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.25.9.tgz",
+      "integrity": "sha512-I853iMZ1hWZdNllhVZKm34f4wErd4lMyeV7BLzEExGEIZYsOzqDWDf+y082izYUE8gtJnYHdeDpN/6tUdwvfiw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.25.9.tgz",
+      "integrity": "sha512-XIpIDMAjOELi/9PB30vEbVMs3GV1v2zkkPnuyRRURbhqjyzIINwj+nbQATh4H9GxUgH1kFsEyQMxwiLFKUS6Rg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.25.9.tgz",
+      "integrity": "sha512-jhHfBzjYTA1IQu8VyrjCX4ApJDnH+ez+IYVEoJHeqJm9VhG9Dh2BYaJritkYK3vMaXrf7Ogr/0MQ8/MeIefsPQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.9.tgz",
+      "integrity": "sha512-z93DmbnY6fX9+KdD4Ue/H6sYs+bhFQJNCPZsi4XWJoYblUqT06MQUdBCpcSfuiN72AbqeBFu5LVQTjfXDE2A6Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.25.9.tgz",
+      "integrity": "sha512-mrKX6H/vOyo5v71YfXWJxLVxgy1kyt1MQaD8wZJgJfG4gq4DpQGpgTB74e5yBeQdyMTbgxp0YtNj7NuHN0PoZg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.25.9.tgz",
+      "integrity": "sha512-HBU2Xv78SMgaydBmdor38lg8YDnFKSARg1Q6AT0/y2ezUAKiZvc211RDFHlEZRFNRVhcMamiToo7bDx3VEOYQw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.25.9.tgz",
+      "integrity": "sha512-BlB7bIcLT3G26urh5Dmse7fiLmLXnRlopw4s8DalgZ8ef79Jj4aUcYbk90g8iCa2467HX8SAIidbL7gsqXHdRw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.25.9.tgz",
+      "integrity": "sha512-e7S3MOJPZGp2QW6AK6+Ly81rC7oOSerQ+P8L0ta4FhVi+/j/v2yZzx5CqqDaWjtPFfYz21Vi1S0auHrap3Ma3A==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.25.9.tgz",
+      "integrity": "sha512-Sbe10Bnn0oUAB2AalYztvGcK+o6YFFA/9829PhOCUS9vkJElXGdphz0A3DbMdP8gmKkqPmPcMJmJOrI3VYB1JQ==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.25.9.tgz",
+      "integrity": "sha512-YcM5br0mVyZw2jcQeLIkhWtKPeVfAerES5PvOzaDxVtIyZ2NUBZKNLjC5z3/fUlDgT6w89VsxP2qzNipOaaDyA==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.25.9.tgz",
+      "integrity": "sha512-++0HQvasdo20JytyDpFvQtNrEsAgNG2CY1CLMwGXfFTKGBGQT3bOeLSYE2l1fYdvML5KUuwn9Z8L1EWe2tzs1w==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.25.9.tgz",
+      "integrity": "sha512-uNIBa279Y3fkjV+2cUjx36xkx7eSjb8IvnL01eXUKXez/CBHNRw5ekCGMPM0BcmqBxBcdgUWuUXmVWwm4CH9kg==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.25.9.tgz",
+      "integrity": "sha512-Mfiphvp3MjC/lctb+7D287Xw1DGzqJPb/J2aHHcHxflUo+8tmN/6d4k6I2yFR7BVo5/g7x2Monq4+Yew0EHRIA==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.25.9.tgz",
+      "integrity": "sha512-iSwByxzRe48YVkmpbgoxVzn76BXjlYFXC7NvLYq+b+kDjyyk30J0JY47DIn8z1MO3K0oSl9fZoRmZPQI4Hklzg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-arm64": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.9.tgz",
+      "integrity": "sha512-9jNJl6FqaUG+COdQMjSCGW4QiMHH88xWbvZ+kRVblZsWrkXlABuGdFJ1E9L7HK+T0Yqd4akKNa/lO0+jDxQD4Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.25.9.tgz",
+      "integrity": "sha512-RLLdkflmqRG8KanPGOU7Rpg829ZHu8nFy5Pqdi9U01VYtG9Y0zOG6Vr2z4/S+/3zIyOxiK6cCeYNWOFR9QP87g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-arm64": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.9.tgz",
+      "integrity": "sha512-YaFBlPGeDasft5IIM+CQAhJAqS3St3nJzDEgsgFixcfZeyGPCd6eJBWzke5piZuZ7CtL656eOSYKk4Ls2C0FRQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.25.9.tgz",
+      "integrity": "sha512-1MkgTCuvMGWuqVtAvkpkXFmtL8XhWy+j4jaSO2wxfJtilVCi0ZE37b8uOdMItIHz4I6z1bWWtEX4CJwcKYLcuA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openharmony-arm64": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.25.9.tgz",
+      "integrity": "sha512-4Xd0xNiMVXKh6Fa7HEJQbrpP3m3DDn43jKxMjxLLRjWnRsfxjORYJlXPO4JNcXtOyfajXorRKY9NkOpTHptErg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.25.9.tgz",
+      "integrity": "sha512-WjH4s6hzo00nNezhp3wFIAfmGZ8U7KtrJNlFMRKxiI9mxEK1scOMAaa9i4crUtu+tBr+0IN6JCuAcSBJZfnphw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.25.9.tgz",
+      "integrity": "sha512-mGFrVJHmZiRqmP8xFOc6b84/7xa5y5YvR1x8djzXpJBSv/UsNK6aqec+6JDjConTgvvQefdGhFDAs2DLAds6gQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.25.9.tgz",
+      "integrity": "sha512-b33gLVU2k11nVx1OhX3C8QQP6UHQK4ZtN56oFWvVXvz2VkDoe6fbG8TOgHFxEvqeqohmRnIHe5A1+HADk4OQww==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.9.tgz",
+      "integrity": "sha512-PPOl1mi6lpLNQxnGoyAfschAodRFYXJ+9fs6WHXz7CSWKbOqiMZsubC+BQsVKuul+3vKLuwTHsS2c2y9EoKwxQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@eslint-community/eslint-utils": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.7.0.tgz",
+      "integrity": "sha512-dyybb3AcajC7uha6CvhdVRJqaKyn7w2YKqKyAN37NKYgZT36w+iRb0Dymmc5qEJ549c/S31cMMSFd75bteCpCw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "eslint-visitor-keys": "^3.4.3"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
+      }
+    },
+    "node_modules/@eslint-community/regexpp": {
+      "version": "4.12.1",
+      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.1.tgz",
+      "integrity": "sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
+      }
+    },
+    "node_modules/@eslint/eslintrc": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.4.tgz",
+      "integrity": "sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ajv": "^6.12.4",
+        "debug": "^4.3.2",
+        "espree": "^9.6.0",
+        "globals": "^13.19.0",
+        "ignore": "^5.2.0",
+        "import-fresh": "^3.2.1",
+        "js-yaml": "^4.1.0",
+        "minimatch": "^3.1.2",
+        "strip-json-comments": "^3.1.1"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@eslint/eslintrc/node_modules/globals": {
+      "version": "13.24.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
+      "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "type-fest": "^0.20.2"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@eslint/js": {
+      "version": "8.57.1",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.57.1.tgz",
+      "integrity": "sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      }
+    },
+    "node_modules/@floating-ui/core": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.3.tgz",
+      "integrity": "sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.10"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.4.tgz",
+      "integrity": "sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/core": "^1.7.3",
+        "@floating-ui/utils": "^0.2.10"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.6.tgz",
+      "integrity": "sha512-4JX6rEatQEvlmgU80wZyq9RT96HZJa88q8hp0pBd+LrczeDI4o6uA2M+uvxngVHo4Ihr8uibXxH6+70zhAFrVw==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/dom": "^1.7.4"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.10",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.10.tgz",
+      "integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==",
+      "license": "MIT"
+    },
+    "node_modules/@humanwhocodes/config-array": {
+      "version": "0.13.0",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz",
+      "integrity": "sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw==",
+      "deprecated": "Use @eslint/config-array instead",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@humanwhocodes/object-schema": "^2.0.3",
+        "debug": "^4.3.1",
+        "minimatch": "^3.0.5"
+      },
+      "engines": {
+        "node": ">=10.10.0"
+      }
+    },
+    "node_modules/@humanwhocodes/module-importer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
+      "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=12.22"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
+    "node_modules/@humanwhocodes/object-schema": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz",
+      "integrity": "sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==",
+      "deprecated": "Use @eslint/object-schema instead",
+      "dev": true,
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@iconify/json": {
+      "version": "2.2.378",
+      "resolved": "https://registry.npmjs.org/@iconify/json/-/json-2.2.378.tgz",
+      "integrity": "sha512-mgz/rZVUIwq3btynvlHdUwrZbcb3KUSH97ehpOOq+t8hxTBsIwkkZf1ZgLaseNCSz1OrA+pcULsPDVl3h2odQg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@iconify/types": "*",
+        "pathe": "^1.1.2"
+      }
+    },
+    "node_modules/@iconify/tools": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@iconify/tools/-/tools-4.1.2.tgz",
+      "integrity": "sha512-q6NzLQYEN9zkDfcyBqD3vItHcZw97w/s++3H3TBxUORr57EfHxj6tOW6fyufDjMq+Vl56WXWaPx1csBPYlI5CA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@iconify/types": "^2.0.0",
+        "@iconify/utils": "^2.3.0",
+        "@types/tar": "^6.1.13",
+        "axios": "^1.8.3",
+        "cheerio": "1.0.0",
+        "domhandler": "^5.0.3",
+        "extract-zip": "^2.0.1",
+        "local-pkg": "^0.5.1",
+        "pathe": "^1.1.2",
+        "svgo": "^3.3.2",
+        "tar": "^6.2.1"
+      }
+    },
+    "node_modules/@iconify/types": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
+      "integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@iconify/utils": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@iconify/utils/-/utils-2.3.0.tgz",
+      "integrity": "sha512-GmQ78prtwYW6EtzXRU1rY+KwOKfz32PD7iJh6Iyqw68GiKuoZ2A6pRtzWONz5VQJbp50mEjXh/7NkumtrAgRKA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@antfu/install-pkg": "^1.0.0",
+        "@antfu/utils": "^8.1.0",
+        "@iconify/types": "^2.0.0",
+        "debug": "^4.4.0",
+        "globals": "^15.14.0",
+        "kolorist": "^1.8.0",
+        "local-pkg": "^1.0.0",
+        "mlly": "^1.7.4"
+      }
+    },
+    "node_modules/@iconify/utils/node_modules/confbox": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/confbox/-/confbox-0.2.2.tgz",
+      "integrity": "sha512-1NB+BKqhtNipMsov4xI/NnhCKp9XG9NamYp5PVm9klAT0fsrNPjaFICsCFhNhwZJKNh7zB/3q8qXz0E9oaMNtQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@iconify/utils/node_modules/local-pkg": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-1.1.2.tgz",
+      "integrity": "sha512-arhlxbFRmoQHl33a0Zkle/YWlmNwoyt6QNZEIJcqNbdrsix5Lvc4HyyI3EnwxTYlZYc32EbYrQ8SzEZ7dqgg9A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mlly": "^1.7.4",
+        "pkg-types": "^2.3.0",
+        "quansync": "^0.2.11"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@iconify/utils/node_modules/pathe": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
+      "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@iconify/utils/node_modules/pkg-types": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-2.3.0.tgz",
+      "integrity": "sha512-SIqCzDRg0s9npO5XQ3tNZioRY1uK06lA41ynBC1YmFTmnY6FjUjVt6s4LoADmwoig1qqD0oK8h1p/8mlMx8Oig==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "confbox": "^0.2.2",
+        "exsolve": "^1.0.7",
+        "pathe": "^2.0.3"
+      }
+    },
+    "node_modules/@isaacs/cliui": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
+      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^5.1.2",
+        "string-width-cjs": "npm:string-width@^4.2.0",
+        "strip-ansi": "^7.0.1",
+        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
+        "wrap-ansi": "^8.1.0",
+        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/ansi-regex": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.0.tgz",
+      "integrity": "sha512-TKY5pyBkHyADOPYlRT9Lx6F544mPl0vS5Ew7BJ45hA08Q+t3GjbueLliBWN3sMICk6+y7HdyxSzC4bWS8baBdg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "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/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.5.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.30",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.30.tgz",
+      "integrity": "sha512-GQ7Nw5G2lTu/BtHTKfXhKHok2WGetd4XYcVKGx00SjAk8GMwgJM3zr6zORiPGuOE+/vkc90KtTosSSvaCjKb2Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@keyv/serialize": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@keyv/serialize/-/serialize-1.1.0.tgz",
+      "integrity": "sha512-RlDgexML7Z63Q8BSaqhXdCYNBy/JQnqYIwxofUrNLGCblOMHp+xux2Q8nLMLlPpgHQPoU0Do8Z6btCpRBEqZ8g==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@mui/base": {
+      "version": "5.0.0-beta.40",
+      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.40.tgz",
+      "integrity": "sha512-I/lGHztkCzvwlXpjD2+SNmvNQvB4227xBXhISPjEaJUXGImOQ9f3D2Yj/T3KasSI/h0MLWy74X0J6clhPmsRbQ==",
+      "deprecated": "This package has been replaced by @base-ui-components/react",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@floating-ui/react-dom": "^2.0.8",
+        "@mui/types": "^7.2.14",
+        "@mui/utils": "^5.15.14",
+        "@popperjs/core": "^2.11.8",
+        "clsx": "^2.1.0",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/core-downloads-tracker": {
+      "version": "5.18.0",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.18.0.tgz",
+      "integrity": "sha512-jbhwoQ1AY200PSSOrNXmrFCaSDSJWP7qk6urkTmIirvRXDROkqe+QwcLlUiw/PrREwsIF/vm3/dAXvjlMHF0RA==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      }
+    },
+    "node_modules/@mui/lab": {
+      "version": "5.0.0-alpha.170",
+      "resolved": "https://registry.npmjs.org/@mui/lab/-/lab-5.0.0-alpha.170.tgz",
+      "integrity": "sha512-0bDVECGmrNjd3+bLdcLiwYZ0O4HP5j5WSQm5DV6iA/Z9kr8O6AnvZ1bv9ImQbbX7Gj3pX4o43EKwCutj3EQxQg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@mui/base": "5.0.0-beta.40",
+        "@mui/system": "^5.15.15",
+        "@mui/types": "^7.2.14",
+        "@mui/utils": "^5.15.14",
+        "clsx": "^2.1.0",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@mui/material": ">=5.15.0",
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/material": {
+      "version": "5.18.0",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.18.0.tgz",
+      "integrity": "sha512-bbH/HaJZpFtXGvWg3TsBWG4eyt3gah3E7nCNU8GLyRjVoWcA91Vm/T+sjHfUcwgJSw9iLtucfHBoq+qW/T30aA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@mui/core-downloads-tracker": "^5.18.0",
+        "@mui/system": "^5.18.0",
+        "@mui/types": "~7.2.15",
+        "@mui/utils": "^5.17.1",
+        "@popperjs/core": "^2.11.8",
+        "@types/react-transition-group": "^4.4.10",
+        "clsx": "^2.1.0",
+        "csstype": "^3.1.3",
+        "prop-types": "^15.8.1",
+        "react-is": "^19.0.0",
+        "react-transition-group": "^4.4.5"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/material-nextjs": {
+      "version": "5.18.0",
+      "resolved": "https://registry.npmjs.org/@mui/material-nextjs/-/material-nextjs-5.18.0.tgz",
+      "integrity": "sha512-LPmUAW+xlAF1pJqYe80X238k+PqPJxjnbk/akBGDRlG3PjSafc6VbKabcr71ogTOmW4aqj7Lj6LM+YESJzYzbA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/cache": "^11.11.0",
+        "@emotion/server": "^11.11.0",
+        "@mui/material": "^5.0.0",
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "next": "^13.0.0 || ^14.0.0 || ^15.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/cache": {
+          "optional": true
+        },
+        "@emotion/server": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/material/node_modules/@mui/types": {
+      "version": "7.2.24",
+      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.24.tgz",
+      "integrity": "sha512-3c8tRt/CbWZ+pEg7QpSwbdxOk36EfmhbKf6AGZsD1EcLDLTSZoxxJ86FVtcjxvjuhdyBiWKSTGZFaXCnidO2kw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/private-theming": {
+      "version": "5.17.1",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.17.1.tgz",
+      "integrity": "sha512-XMxU0NTYcKqdsG8LRmSoxERPXwMbp16sIXPcLVgLGII/bVNagX0xaheWAwFv8+zDK7tI3ajllkuD3GZZE++ICQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@mui/utils": "^5.17.1",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/styled-engine": {
+      "version": "5.18.0",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.18.0.tgz",
+      "integrity": "sha512-BN/vKV/O6uaQh2z5rXV+MBlVrEkwoS/TK75rFQ2mjxA7+NBo8qtTAOA4UaM0XeJfn7kh2wZ+xQw2HAx0u+TiBg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@emotion/cache": "^11.13.5",
+        "@emotion/serialize": "^1.3.3",
+        "csstype": "^3.1.3",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.4.1",
+        "@emotion/styled": "^11.3.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/system": {
+      "version": "5.18.0",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.18.0.tgz",
+      "integrity": "sha512-ojZGVcRWqWhu557cdO3pWHloIGJdzVtxs3rk0F9L+x55LsUjcMUVkEhiF7E4TMxZoF9MmIHGGs0ZX3FDLAf0Xw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@mui/private-theming": "^5.17.1",
+        "@mui/styled-engine": "^5.18.0",
+        "@mui/types": "~7.2.15",
+        "@mui/utils": "^5.17.1",
+        "clsx": "^2.1.0",
+        "csstype": "^3.1.3",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/system/node_modules/@mui/types": {
+      "version": "7.2.24",
+      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.24.tgz",
+      "integrity": "sha512-3c8tRt/CbWZ+pEg7QpSwbdxOk36EfmhbKf6AGZsD1EcLDLTSZoxxJ86FVtcjxvjuhdyBiWKSTGZFaXCnidO2kw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/types": {
+      "version": "7.4.5",
+      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.4.5.tgz",
+      "integrity": "sha512-ZPwlAOE3e8C0piCKbaabwrqZbW4QvWz0uapVPWya7fYj6PeDkl5sSJmomT7wjOcZGPB48G/a6Ubidqreptxz4g==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.2"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/utils": {
+      "version": "5.17.1",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.17.1.tgz",
+      "integrity": "sha512-jEZ8FTqInt2WzxDV8bhImWBqeQRD99c/id/fq83H0ER9tFl+sfZlaAoCdznGvbSQQ9ividMxqSV2c7cC1vBcQg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@mui/types": "~7.2.15",
+        "@types/prop-types": "^15.7.12",
+        "clsx": "^2.1.1",
+        "prop-types": "^15.8.1",
+        "react-is": "^19.0.0"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/utils/node_modules/@mui/types": {
+      "version": "7.2.24",
+      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.24.tgz",
+      "integrity": "sha512-3c8tRt/CbWZ+pEg7QpSwbdxOk36EfmhbKf6AGZsD1EcLDLTSZoxxJ86FVtcjxvjuhdyBiWKSTGZFaXCnidO2kw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@napi-rs/wasm-runtime": {
+      "version": "0.2.12",
+      "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-0.2.12.tgz",
+      "integrity": "sha512-ZVWUcfwY4E/yPitQJl481FjFo3K22D6qF0DuFH6Y/nbnE11GY5uguDxZMGXPQ8WQ0128MXQD7TnfHyK4oWoIJQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.4.3",
+        "@emnapi/runtime": "^1.4.3",
+        "@tybys/wasm-util": "^0.10.0"
+      }
+    },
+    "node_modules/@next/env": {
+      "version": "14.2.32",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.32.tgz",
+      "integrity": "sha512-n9mQdigI6iZ/DF6pCTwMKeWgF2e8lg7qgt5M7HXMLtyhZYMnf/u905M18sSpPmHL9MKp9JHo56C6jrD2EvWxng==",
+      "license": "MIT"
+    },
+    "node_modules/@next/eslint-plugin-next": {
+      "version": "14.2.32",
+      "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-14.2.32.tgz",
+      "integrity": "sha512-tyZMX8g4cWg/uPW4NxiJK13t62Pab47SKGJGVZJa6YtFwtfrXovH4j1n9tdpRdXW03PGQBugYEVGM7OhWfytdA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "glob": "10.3.10"
+      }
+    },
+    "node_modules/@next/swc-darwin-arm64": {
+      "version": "14.2.32",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.32.tgz",
+      "integrity": "sha512-osHXveM70zC+ilfuFa/2W6a1XQxJTvEhzEycnjUaVE8kpUS09lDpiDDX2YLdyFCzoUbvbo5r0X1Kp4MllIOShw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-darwin-x64": {
+      "version": "14.2.32",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.32.tgz",
+      "integrity": "sha512-P9NpCAJuOiaHHpqtrCNncjqtSBi1f6QUdHK/+dNabBIXB2RUFWL19TY1Hkhu74OvyNQEYEzzMJCMQk5agjw1Qg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-gnu": {
+      "version": "14.2.32",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.32.tgz",
+      "integrity": "sha512-v7JaO0oXXt6d+cFjrrKqYnR2ubrD+JYP7nQVRZgeo5uNE5hkCpWnHmXm9vy3g6foMO8SPwL0P3MPw1c+BjbAzA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-musl": {
+      "version": "14.2.32",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.32.tgz",
+      "integrity": "sha512-tA6sIKShXtSJBTH88i0DRd6I9n3ZTirmwpwAqH5zdJoQF7/wlJXR8DkPmKwYl5mFWhEKr5IIa3LfpMW9RRwKmQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-gnu": {
+      "version": "14.2.32",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.32.tgz",
+      "integrity": "sha512-7S1GY4TdnlGVIdeXXKQdDkfDysoIVFMD0lJuVVMeb3eoVjrknQ0JNN7wFlhCvea0hEk0Sd4D1hedVChDKfV2jw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-musl": {
+      "version": "14.2.32",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.32.tgz",
+      "integrity": "sha512-OHHC81P4tirVa6Awk6eCQ6RBfWl8HpFsZtfEkMpJ5GjPsJ3nhPe6wKAJUZ/piC8sszUkAgv3fLflgzPStIwfWg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-arm64-msvc": {
+      "version": "14.2.32",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.32.tgz",
+      "integrity": "sha512-rORQjXsAFeX6TLYJrCG5yoIDj+NKq31Rqwn8Wpn/bkPNy5rTHvOXkW8mLFonItS7QC6M+1JIIcLe+vOCTOYpvg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-ia32-msvc": {
+      "version": "14.2.32",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.32.tgz",
+      "integrity": "sha512-jHUeDPVHrgFltqoAqDB6g6OStNnFxnc7Aks3p0KE0FbwAvRg6qWKYF5mSTdCTxA3axoSAUwxYdILzXJfUwlHhA==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-x64-msvc": {
+      "version": "14.2.32",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.32.tgz",
+      "integrity": "sha512-2N0lSoU4GjfLSO50wvKpMQgKd4HdI2UHEhQPPPnlgfBJlOgJxkjpkYBqzk08f1gItBB6xF/n+ykso2hgxuydsA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nolyfill/is-core-module": {
+      "version": "1.0.39",
+      "resolved": "https://registry.npmjs.org/@nolyfill/is-core-module/-/is-core-module-1.0.39.tgz",
+      "integrity": "sha512-nn5ozdjYQpUCZlWGuxcJY/KpxkWQs4DcbMCmKojjyrYDEAGy4Ce19NN4v5MduafTwJlbKc99UA8YhSVqq9yPZA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.4.0"
+      }
+    },
+    "node_modules/@pkgjs/parseargs": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
+      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
+    "node_modules/@rtsao/scc": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
+      "integrity": "sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@rushstack/eslint-patch": {
+      "version": "1.12.0",
+      "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.12.0.tgz",
+      "integrity": "sha512-5EwMtOqvJMMa3HbmxLlF74e+3/HhwBTMcvt3nqVJgGCozO6hzIPOBlwm8mGVNR9SN2IJpxSnlxczyDjcn7qIyw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@swc/counter": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz",
+      "integrity": "sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.5.tgz",
+      "integrity": "sha512-KGYxvIOXcceOAbEk4bi/dVLEK9z8sZ0uBB3Il5b1rhfClSpcX0yfRO0KmTkqR2cnQDymwLB+25ZyMzICg/cm/A==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/counter": "^0.1.3",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@trysound/sax": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
+      "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/@tybys/wasm-util": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.0.tgz",
+      "integrity": "sha512-VyyPYFlOMNylG45GoAe0xDoLwWuowvf92F9kySqzYh8vmYm7D2u4iUJKa1tOUpS70Ku13ASrOkS4ScXFsTaCNQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@types/js-cookie": {
+      "version": "2.2.7",
+      "resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-2.2.7.tgz",
+      "integrity": "sha512-aLkWa0C0vO5b4Sr798E26QgOkss68Un0bLjs7u9qxzPT5CG+8DuNTffWES58YzJs3hrVAOs1wonycqEBqNJubA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/json5": {
+      "version": "0.0.29",
+      "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
+      "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/node": {
+      "version": "24.3.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-24.3.0.tgz",
+      "integrity": "sha512-aPTXCrfwnDLj4VvXrm+UUCQjNEvJgNA8s5F1cvwQU+3KNltTOkBm1j30uNLyqqPNe7gE3KFzImYoZEfLhp4Yow==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~7.10.0"
+      }
+    },
+    "node_modules/@types/parse-json": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz",
+      "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/prop-types": {
+      "version": "15.7.15",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
+      "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/react-transition-group": {
+      "version": "4.4.12",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.12.tgz",
+      "integrity": "sha512-8TV6R3h2j7a91c+1DXdJi3Syo69zzIZbz7Lg5tORM5LEJG7X/E6a1V3drRyBRZq7/utz7A+c4OgYLiLcYGHG6w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*"
+      }
+    },
+    "node_modules/@types/tar": {
+      "version": "6.1.13",
+      "resolved": "https://registry.npmjs.org/@types/tar/-/tar-6.1.13.tgz",
+      "integrity": "sha512-IznnlmU5f4WcGTh2ltRu/Ijpmk8wiWXfF0VA4s+HPjHZgvFggk1YaIkbo5krX/zUCzWF8N/l4+W/LNxnvAJ8nw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*",
+        "minipass": "^4.0.0"
+      }
+    },
+    "node_modules/@types/yauzl": {
+      "version": "2.10.3",
+      "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.3.tgz",
+      "integrity": "sha512-oJoftv0LSuaDZE3Le4DbKX+KS9G36NzOeSap90UIK0yMA/NhKJhqlSGtNDORNRaIbQfzjXDrQa0ytJ6mNRGz/Q==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@typescript-eslint/eslint-plugin": {
+      "version": "8.41.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.41.0.tgz",
+      "integrity": "sha512-8fz6oa6wEKZrhXWro/S3n2eRJqlRcIa6SlDh59FXJ5Wp5XRZ8B9ixpJDcjadHq47hMx0u+HW6SNa6LjJQ6NLtw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/regexpp": "^4.10.0",
+        "@typescript-eslint/scope-manager": "8.41.0",
+        "@typescript-eslint/type-utils": "8.41.0",
+        "@typescript-eslint/utils": "8.41.0",
+        "@typescript-eslint/visitor-keys": "8.41.0",
+        "graphemer": "^1.4.0",
+        "ignore": "^7.0.0",
+        "natural-compare": "^1.4.0",
+        "ts-api-utils": "^2.1.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "@typescript-eslint/parser": "^8.41.0",
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/eslint-plugin/node_modules/ignore": {
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.5.tgz",
+      "integrity": "sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/@typescript-eslint/parser": {
+      "version": "8.41.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.41.0.tgz",
+      "integrity": "sha512-gTtSdWX9xiMPA/7MV9STjJOOYtWwIJIYxkQxnSV1U3xcE+mnJSH3f6zI0RYP+ew66WSlZ5ed+h0VCxsvdC1jJg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/scope-manager": "8.41.0",
+        "@typescript-eslint/types": "8.41.0",
+        "@typescript-eslint/typescript-estree": "8.41.0",
+        "@typescript-eslint/visitor-keys": "8.41.0",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/project-service": {
+      "version": "8.41.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.41.0.tgz",
+      "integrity": "sha512-b8V9SdGBQzQdjJ/IO3eDifGpDBJfvrNTp2QD9P2BeqWTGrRibgfgIlBSw6z3b6R7dPzg752tOs4u/7yCLxksSQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/tsconfig-utils": "^8.41.0",
+        "@typescript-eslint/types": "^8.41.0",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/scope-manager": {
+      "version": "8.41.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.41.0.tgz",
+      "integrity": "sha512-n6m05bXn/Cd6DZDGyrpXrELCPVaTnLdPToyhBoFkLIMznRUQUEQdSp96s/pcWSQdqOhrgR1mzJ+yItK7T+WPMQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.41.0",
+        "@typescript-eslint/visitor-keys": "8.41.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/tsconfig-utils": {
+      "version": "8.41.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.41.0.tgz",
+      "integrity": "sha512-TDhxYFPUYRFxFhuU5hTIJk+auzM/wKvWgoNYOPcOf6i4ReYlOoYN8q1dV5kOTjNQNJgzWN3TUUQMtlLOcUgdUw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/type-utils": {
+      "version": "8.41.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.41.0.tgz",
+      "integrity": "sha512-63qt1h91vg3KsjVVonFJWjgSK7pZHSQFKH6uwqxAH9bBrsyRhO6ONoKyXxyVBzG1lJnFAJcKAcxLS54N1ee1OQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.41.0",
+        "@typescript-eslint/typescript-estree": "8.41.0",
+        "@typescript-eslint/utils": "8.41.0",
+        "debug": "^4.3.4",
+        "ts-api-utils": "^2.1.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/types": {
+      "version": "8.41.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.41.0.tgz",
+      "integrity": "sha512-9EwxsWdVqh42afLbHP90n2VdHaWU/oWgbH2P0CfcNfdKL7CuKpwMQGjwev56vWu9cSKU7FWSu6r9zck6CVfnag==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree": {
+      "version": "8.41.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.41.0.tgz",
+      "integrity": "sha512-D43UwUYJmGhuwHfY7MtNKRZMmfd8+p/eNSfFe6tH5mbVDto+VQCayeAt35rOx3Cs6wxD16DQtIKw/YXxt5E0UQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/project-service": "8.41.0",
+        "@typescript-eslint/tsconfig-utils": "8.41.0",
+        "@typescript-eslint/types": "8.41.0",
+        "@typescript-eslint/visitor-keys": "8.41.0",
+        "debug": "^4.3.4",
+        "fast-glob": "^3.3.2",
+        "is-glob": "^4.0.3",
+        "minimatch": "^9.0.4",
+        "semver": "^7.6.0",
+        "ts-api-utils": "^2.1.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@typescript-eslint/utils": {
+      "version": "8.41.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.41.0.tgz",
+      "integrity": "sha512-udbCVstxZ5jiPIXrdH+BZWnPatjlYwJuJkDA4Tbo3WyYLh8NvB+h/bKeSZHDOFKfphsZYJQqaFtLeXEqurQn1A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.7.0",
+        "@typescript-eslint/scope-manager": "8.41.0",
+        "@typescript-eslint/types": "8.41.0",
+        "@typescript-eslint/typescript-estree": "8.41.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/visitor-keys": {
+      "version": "8.41.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.41.0.tgz",
+      "integrity": "sha512-+GeGMebMCy0elMNg67LRNoVnUFPIm37iu5CmHESVx56/9Jsfdpsvbv605DQ81Pi/x11IdKUsS5nzgTYbCQU9fg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.41.0",
+        "eslint-visitor-keys": "^4.2.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/visitor-keys/node_modules/eslint-visitor-keys": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
+      "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@ungap/structured-clone": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.3.0.tgz",
+      "integrity": "sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/@unrs/resolver-binding-android-arm-eabi": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-android-arm-eabi/-/resolver-binding-android-arm-eabi-1.11.1.tgz",
+      "integrity": "sha512-ppLRUgHVaGRWUx0R0Ut06Mjo9gBaBkg3v/8AxusGLhsIotbBLuRk51rAzqLC8gq6NyyAojEXglNjzf6R948DNw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-android-arm64": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-android-arm64/-/resolver-binding-android-arm64-1.11.1.tgz",
+      "integrity": "sha512-lCxkVtb4wp1v+EoN+HjIG9cIIzPkX5OtM03pQYkG+U5O/wL53LC4QbIeazgiKqluGeVEeBlZahHalCaBvU1a2g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-darwin-arm64": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-darwin-arm64/-/resolver-binding-darwin-arm64-1.11.1.tgz",
+      "integrity": "sha512-gPVA1UjRu1Y/IsB/dQEsp2V1pm44Of6+LWvbLc9SDk1c2KhhDRDBUkQCYVWe6f26uJb3fOK8saWMgtX8IrMk3g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-darwin-x64": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-darwin-x64/-/resolver-binding-darwin-x64-1.11.1.tgz",
+      "integrity": "sha512-cFzP7rWKd3lZaCsDze07QX1SC24lO8mPty9vdP+YVa3MGdVgPmFc59317b2ioXtgCMKGiCLxJ4HQs62oz6GfRQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-freebsd-x64": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-freebsd-x64/-/resolver-binding-freebsd-x64-1.11.1.tgz",
+      "integrity": "sha512-fqtGgak3zX4DCB6PFpsH5+Kmt/8CIi4Bry4rb1ho6Av2QHTREM+47y282Uqiu3ZRF5IQioJQ5qWRV6jduA+iGw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-arm-gnueabihf": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm-gnueabihf/-/resolver-binding-linux-arm-gnueabihf-1.11.1.tgz",
+      "integrity": "sha512-u92mvlcYtp9MRKmP+ZvMmtPN34+/3lMHlyMj7wXJDeXxuM0Vgzz0+PPJNsro1m3IZPYChIkn944wW8TYgGKFHw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-arm-musleabihf": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm-musleabihf/-/resolver-binding-linux-arm-musleabihf-1.11.1.tgz",
+      "integrity": "sha512-cINaoY2z7LVCrfHkIcmvj7osTOtm6VVT16b5oQdS4beibX2SYBwgYLmqhBjA1t51CarSaBuX5YNsWLjsqfW5Cw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-arm64-gnu": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm64-gnu/-/resolver-binding-linux-arm64-gnu-1.11.1.tgz",
+      "integrity": "sha512-34gw7PjDGB9JgePJEmhEqBhWvCiiWCuXsL9hYphDF7crW7UgI05gyBAi6MF58uGcMOiOqSJ2ybEeCvHcq0BCmQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-arm64-musl": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm64-musl/-/resolver-binding-linux-arm64-musl-1.11.1.tgz",
+      "integrity": "sha512-RyMIx6Uf53hhOtJDIamSbTskA99sPHS96wxVE/bJtePJJtpdKGXO1wY90oRdXuYOGOTuqjT8ACccMc4K6QmT3w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-ppc64-gnu": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-ppc64-gnu/-/resolver-binding-linux-ppc64-gnu-1.11.1.tgz",
+      "integrity": "sha512-D8Vae74A4/a+mZH0FbOkFJL9DSK2R6TFPC9M+jCWYia/q2einCubX10pecpDiTmkJVUH+y8K3BZClycD8nCShA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-riscv64-gnu": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-riscv64-gnu/-/resolver-binding-linux-riscv64-gnu-1.11.1.tgz",
+      "integrity": "sha512-frxL4OrzOWVVsOc96+V3aqTIQl1O2TjgExV4EKgRY09AJ9leZpEg8Ak9phadbuX0BA4k8U5qtvMSQQGGmaJqcQ==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-riscv64-musl": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-riscv64-musl/-/resolver-binding-linux-riscv64-musl-1.11.1.tgz",
+      "integrity": "sha512-mJ5vuDaIZ+l/acv01sHoXfpnyrNKOk/3aDoEdLO/Xtn9HuZlDD6jKxHlkN8ZhWyLJsRBxfv9GYM2utQ1SChKew==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-s390x-gnu": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-s390x-gnu/-/resolver-binding-linux-s390x-gnu-1.11.1.tgz",
+      "integrity": "sha512-kELo8ebBVtb9sA7rMe1Cph4QHreByhaZ2QEADd9NzIQsYNQpt9UkM9iqr2lhGr5afh885d/cB5QeTXSbZHTYPg==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-x64-gnu": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-x64-gnu/-/resolver-binding-linux-x64-gnu-1.11.1.tgz",
+      "integrity": "sha512-C3ZAHugKgovV5YvAMsxhq0gtXuwESUKc5MhEtjBpLoHPLYM+iuwSj3lflFwK3DPm68660rZ7G8BMcwSro7hD5w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-x64-musl": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-x64-musl/-/resolver-binding-linux-x64-musl-1.11.1.tgz",
+      "integrity": "sha512-rV0YSoyhK2nZ4vEswT/QwqzqQXw5I6CjoaYMOX0TqBlWhojUf8P94mvI7nuJTeaCkkds3QE4+zS8Ko+GdXuZtA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-wasm32-wasi": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-wasm32-wasi/-/resolver-binding-wasm32-wasi-1.11.1.tgz",
+      "integrity": "sha512-5u4RkfxJm+Ng7IWgkzi3qrFOvLvQYnPBmjmZQ8+szTK/b31fQCnleNl1GgEt7nIsZRIf5PLhPwT0WM+q45x/UQ==",
+      "cpu": [
+        "wasm32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@napi-rs/wasm-runtime": "^0.2.11"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@unrs/resolver-binding-win32-arm64-msvc": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-arm64-msvc/-/resolver-binding-win32-arm64-msvc-1.11.1.tgz",
+      "integrity": "sha512-nRcz5Il4ln0kMhfL8S3hLkxI85BXs3o8EYoattsJNdsX4YUU89iOkVn7g0VHSRxFuVMdM4Q1jEpIId1Ihim/Uw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-win32-ia32-msvc": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-ia32-msvc/-/resolver-binding-win32-ia32-msvc-1.11.1.tgz",
+      "integrity": "sha512-DCEI6t5i1NmAZp6pFonpD5m7i6aFrpofcp4LA2i8IIq60Jyo28hamKBxNrZcyOwVOZkgsRp9O2sXWBWP8MnvIQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-win32-x64-msvc": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-x64-msvc/-/resolver-binding-win32-x64-msvc-1.11.1.tgz",
+      "integrity": "sha512-lrW200hZdbfRtztbygyaq/6jP6AKE8qQN2KvPcJ+x7wiD038YtnYtZ82IMNJ69GJibV7bwL3y9FgK+5w/pYt6g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@xobotyi/scrollbar-width": {
+      "version": "1.9.5",
+      "resolved": "https://registry.npmjs.org/@xobotyi/scrollbar-width/-/scrollbar-width-1.9.5.tgz",
+      "integrity": "sha512-N8tkAACJx2ww8vFMneJmaAgmjAG1tnVBZJRLRcx061tmsLRZHSEZSLuGWnwPtunsSLvSqXQ2wfp7Mgqg1I+2dQ==",
+      "license": "MIT"
+    },
+    "node_modules/@yr/monotone-cubic-spline": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@yr/monotone-cubic-spline/-/monotone-cubic-spline-1.0.3.tgz",
+      "integrity": "sha512-FQXkOta0XBSUPHndIKON2Y9JeQz5ZeMqLYZVVK93FliNBFm7LNMIZmY6FrMEB9XPcDbE2bekMbZD6kzDkxwYjA==",
+      "license": "MIT"
+    },
+    "node_modules/acorn": {
+      "version": "8.15.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
+      "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/acorn-jsx": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
+    "node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/any-promise": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/apexcharts": {
+      "version": "3.54.1",
+      "resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.54.1.tgz",
+      "integrity": "sha512-E4et0h/J1U3r3EwS/WlqJCQIbepKbp6wGUmaAwJOMjHUP4Ci0gxanLa7FR3okx6p9coi4st6J853/Cb1NP0vpA==",
+      "license": "MIT",
+      "dependencies": {
+        "@yr/monotone-cubic-spline": "^1.0.3",
+        "svg.draggable.js": "^2.2.2",
+        "svg.easing.js": "^2.0.0",
+        "svg.filter.js": "^2.0.2",
+        "svg.pathmorphing.js": "^0.1.3",
+        "svg.resize.js": "^1.4.3",
+        "svg.select.js": "^3.0.1"
+      }
+    },
+    "node_modules/arg": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "dev": true,
+      "license": "Python-2.0"
+    },
+    "node_modules/aria-query": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz",
+      "integrity": "sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/array-buffer-byte-length": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.2.tgz",
+      "integrity": "sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "is-array-buffer": "^3.0.5"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array-includes": {
+      "version": "3.1.9",
+      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.9.tgz",
+      "integrity": "sha512-FmeCCAenzH0KH381SPT5FZmiA/TmpndpcaShhfgEN9eCVjnFBqq3l1xrI42y8+PPLI6hypzou4GXw00WHmPBLQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.24.0",
+        "es-object-atoms": "^1.1.1",
+        "get-intrinsic": "^1.3.0",
+        "is-string": "^1.1.1",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array-union": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
+      "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/array.prototype.findlast": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/array.prototype.findlast/-/array.prototype.findlast-1.2.5.tgz",
+      "integrity": "sha512-CVvd6FHg1Z3POpBLxO6E6zr+rSKEQ9L6rZHAaY7lLfhKsWYUBBOuMs0e9o24oopj6H+geRCX0YJ+TJLBK2eHyQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.findlastindex": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.6.tgz",
+      "integrity": "sha512-F/TKATkzseUExPlfvmwQKGITM3DGTK+vkAsCZoDc5daVygbJBnjEUCbgkAvVFsgfXfX4YIqZ/27G3k3tdXrTxQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.9",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "es-shim-unscopables": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.flat": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.3.tgz",
+      "integrity": "sha512-rwG/ja1neyLqCuGZ5YYrznA62D4mZXg0i1cIskIUKSiqF3Cje9/wXAls9B9s1Wa2fomMsIv8czB8jZcPmxCXFg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.flatmap": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.3.tgz",
+      "integrity": "sha512-Y7Wt51eKJSyi80hFrJCePGGNo5ktJCslFuboqJsbf57CCPcm5zztluPlc4/aD8sWsKvlwatezpV4U1efk8kpjg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.tosorted": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/array.prototype.tosorted/-/array.prototype.tosorted-1.1.4.tgz",
+      "integrity": "sha512-p6Fx8B7b7ZhL/gmUsAy0D15WhvDccw3mnGNbZpi3pmeJdxtWsj2jEaI4Y6oo3XiHfzuSgPwKc04MYt6KgvC/wA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.3",
+        "es-errors": "^1.3.0",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/arraybuffer.prototype.slice": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.4.tgz",
+      "integrity": "sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-buffer-byte-length": "^1.0.1",
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "is-array-buffer": "^3.0.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/ast-types-flow": {
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.8.tgz",
+      "integrity": "sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/astral-regex": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-2.0.0.tgz",
+      "integrity": "sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/async-function": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/async-function/-/async-function-1.0.0.tgz",
+      "integrity": "sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/autoprefixer": {
+      "version": "10.4.21",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.21.tgz",
+      "integrity": "sha512-O+A6LWV5LDHSJD3LjHYoNi4VLsj/Whi7k6zG12xTYaU4cQ8oxQGckXNX8cRHK5yOZ/ppVHe0ZBXGzSV9jXdVbQ==",
+      "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.24.4",
+        "caniuse-lite": "^1.0.30001702",
+        "fraction.js": "^4.3.7",
+        "normalize-range": "^0.1.2",
+        "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/available-typed-arrays": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
+      "integrity": "sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "possible-typed-array-names": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/axe-core": {
+      "version": "4.10.3",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.10.3.tgz",
+      "integrity": "sha512-Xm7bpRXnDSX2YE2YFfBk2FnF0ep6tmG7xPh8iHee8MIcrgq762Nkce856dYtJYLkuIoYZvGfTs/PbZhideTcEg==",
+      "dev": true,
+      "license": "MPL-2.0",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/axios": {
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.11.0.tgz",
+      "integrity": "sha512-1Lx3WLFQWm3ooKDYZD1eXmoGO9fxYQjrycfHFC8P0sCfQVXyROp0p9PFWBehewBOdCwHc+f/b8I0fMto5eSfwA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.4",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
+    "node_modules/axobject-query": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
+      "integrity": "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/babel-plugin-macros": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
+      "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "cosmiconfig": "^7.0.0",
+        "resolve": "^1.19.0"
+      },
+      "engines": {
+        "node": ">=10",
+        "npm": ">=6"
+      }
+    },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/binary-extensions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/boolbase": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+      "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/brace-expansion": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/browserslist": {
+      "version": "4.25.3",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.25.3.tgz",
+      "integrity": "sha512-cDGv1kkDI4/0e5yON9yM5G/0A5u8sf5TnmdX5C9qHzI9PPu++sQ9zjm1k9NiOrf3riY4OkK0zSGqfvJyJsgCBQ==",
+      "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": {
+        "caniuse-lite": "^1.0.30001735",
+        "electron-to-chromium": "^1.5.204",
+        "node-releases": "^2.0.19",
+        "update-browserslist-db": "^1.1.3"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
+    "node_modules/buffer-crc32": {
+      "version": "0.2.13",
+      "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
+      "integrity": "sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/busboy": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
+      "integrity": "sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==",
+      "dependencies": {
+        "streamsearch": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=10.16.0"
+      }
+    },
+    "node_modules/cacheable": {
+      "version": "1.10.4",
+      "resolved": "https://registry.npmjs.org/cacheable/-/cacheable-1.10.4.tgz",
+      "integrity": "sha512-Gd7ccIUkZ9TE2odLQVS+PDjIvQCdJKUlLdJRVvZu0aipj07Qfx+XIej7hhDrKGGoIxV5m5fT/kOJNJPQhQneRg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hookified": "^1.11.0",
+        "keyv": "^5.5.0"
+      }
+    },
+    "node_modules/cacheable/node_modules/keyv": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/keyv/-/keyv-5.5.0.tgz",
+      "integrity": "sha512-QG7qR2tijh1ftOvClut4YKKg1iW6cx3GZsKoGyJPxHkGWK9oJhG9P3j5deP0QQOGDowBMVQFaP+Vm4NpGYvmIQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@keyv/serialize": "^1.1.0"
+      }
+    },
+    "node_modules/call-bind": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.8.tgz",
+      "integrity": "sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.0",
+        "es-define-property": "^1.0.0",
+        "get-intrinsic": "^1.2.4",
+        "set-function-length": "^1.2.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/call-bound": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
+      "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "get-intrinsic": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001737",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001737.tgz",
+      "integrity": "sha512-BiloLiXtQNrY5UyF0+1nSJLXUENuhka2pzy2Fx5pGxqavdrxSCW4U6Pn/PoG3Efspi2frRbHpBV2XsrPE6EDlw==",
+      "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/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/cheerio": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0.tgz",
+      "integrity": "sha512-quS9HgjQpdaXOvsZz82Oz7uxtXiy6UIsIQcpBj7HRw2M63Skasm9qlDocAM7jNuaxdhpPU7c4kJN+gA5MCu4ww==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cheerio-select": "^2.1.0",
+        "dom-serializer": "^2.0.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.1.0",
+        "encoding-sniffer": "^0.2.0",
+        "htmlparser2": "^9.1.0",
+        "parse5": "^7.1.2",
+        "parse5-htmlparser2-tree-adapter": "^7.0.0",
+        "parse5-parser-stream": "^7.1.2",
+        "undici": "^6.19.5",
+        "whatwg-mimetype": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=18.17"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/cheerio?sponsor=1"
+      }
+    },
+    "node_modules/cheerio-select": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/cheerio-select/-/cheerio-select-2.1.0.tgz",
+      "integrity": "sha512-9v9kG0LvzrlcungtnJtpGNxY+fzECQKhK4EGJX2vByejiMX84MFNQw4UxPJl3bFbTMw+Dfs37XaIkCwTZfLh4g==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-select": "^5.1.0",
+        "css-what": "^6.1.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/chokidar/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/chownr": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
+      "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/classnames": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==",
+      "license": "MIT"
+    },
+    "node_modules/client-only": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
+      "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
+      "license": "MIT"
+    },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/colord": {
+      "version": "2.9.3",
+      "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz",
+      "integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/confbox": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/confbox/-/confbox-0.1.8.tgz",
+      "integrity": "sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/convert-source-map": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
+      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
+      "license": "MIT"
+    },
+    "node_modules/copy-to-clipboard": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz",
+      "integrity": "sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==",
+      "license": "MIT",
+      "dependencies": {
+        "toggle-selection": "^1.0.6"
+      }
+    },
+    "node_modules/cosmiconfig": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
+      "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/parse-json": "^4.0.0",
+        "import-fresh": "^3.2.1",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0",
+        "yaml": "^1.10.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/cross-spawn": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/css-functions-list": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/css-functions-list/-/css-functions-list-3.2.3.tgz",
+      "integrity": "sha512-IQOkD3hbR5KrN93MtcYuad6YPuTSUhntLHDuLEbFWE+ff2/XSZNdZG+LcbbIW5AXKg/WFIfYItIzVoHngHXZzA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12 || >=16"
+      }
+    },
+    "node_modules/css-in-js-utils": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/css-in-js-utils/-/css-in-js-utils-3.1.0.tgz",
+      "integrity": "sha512-fJAcud6B3rRu+KHYk+Bwf+WFL2MDCJJ1XG9x137tJQ0xYxor7XziQtuGFbWNdqrvF4Tk26O3H73nfVqXt/fW1A==",
+      "license": "MIT",
+      "dependencies": {
+        "hyphenate-style-name": "^1.0.3"
+      }
+    },
+    "node_modules/css-select": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.2.2.tgz",
+      "integrity": "sha512-TizTzUddG/xYLA3NXodFM0fSbNizXjOKhqiQQwvhlspadZokn1KDy0NZFS0wuEubIYAV5/c1/lAr0TaaFXEXzw==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-what": "^6.1.0",
+        "domhandler": "^5.0.2",
+        "domutils": "^3.0.1",
+        "nth-check": "^2.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/css-tree": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
+      "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==",
+      "license": "MIT",
+      "dependencies": {
+        "mdn-data": "2.0.14",
+        "source-map": "^0.6.1"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/css-tree/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/css-what": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.2.2.tgz",
+      "integrity": "sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">= 6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/csso": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz",
+      "integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "css-tree": "~2.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
+        "npm": ">=7.0.0"
+      }
+    },
+    "node_modules/csso/node_modules/css-tree": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz",
+      "integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mdn-data": "2.0.28",
+        "source-map-js": "^1.0.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
+        "npm": ">=7.0.0"
+      }
+    },
+    "node_modules/csso/node_modules/mdn-data": {
+      "version": "2.0.28",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz",
+      "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==",
+      "dev": true,
+      "license": "CC0-1.0"
+    },
+    "node_modules/csstype": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+      "license": "MIT"
+    },
+    "node_modules/damerau-levenshtein": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
+      "integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==",
+      "dev": true,
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/data-view-buffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.2.tgz",
+      "integrity": "sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/data-view-byte-length": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/data-view-byte-length/-/data-view-byte-length-1.0.2.tgz",
+      "integrity": "sha512-tuhGbE6CfTM9+5ANGf+oQb72Ky/0+s3xKUpHvShfiz2RxMFgFPjsXuRLBVMtvMs15awe45SRb83D6wH4ew6wlQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/inspect-js"
+      }
+    },
+    "node_modules/data-view-byte-offset": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/data-view-byte-offset/-/data-view-byte-offset-1.0.1.tgz",
+      "integrity": "sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/debug": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
+      "integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/deep-is": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
+      "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/define-data-property": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
+      "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/define-properties": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz",
+      "integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.0.1",
+        "has-property-descriptors": "^1.0.0",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/didyoumean": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/dir-glob": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
+      "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "path-type": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/doctrine": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
+      "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "esutils": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/dom-serializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/domelementtype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "domelementtype": "^2.3.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/domutils": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.2.2.tgz",
+      "integrity": "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/eastasianwidth": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
+      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/electron-to-chromium": {
+      "version": "1.5.209",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.209.tgz",
+      "integrity": "sha512-Xoz0uMrim9ZETCQt8UgM5FxQF9+imA7PBpokoGcZloA1uw2LeHzTlip5cb5KOAsXZLjh/moN2vReN3ZjJmjI9A==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/encoding-sniffer": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/encoding-sniffer/-/encoding-sniffer-0.2.1.tgz",
+      "integrity": "sha512-5gvq20T6vfpekVtqrYQsSCFZ1wEg5+wW0/QaZMWkFr6BqD3NfKs0rLCx4rrVlSWJeZb5NBJgVLswK/w2MWU+Gw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "iconv-lite": "^0.6.3",
+        "whatwg-encoding": "^3.1.1"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/encoding-sniffer?sponsor=1"
+      }
+    },
+    "node_modules/end-of-stream": {
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.5.tgz",
+      "integrity": "sha512-ooEGc6HP26xXq/N+GCGOT0JKCLDGrq2bQUZrQ7gyrJiZANJ/8YDTxTpQBXGMn+WbIQXNVpyWymm7KYVICQnyOg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "once": "^1.4.0"
+      }
+    },
+    "node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/env-paths": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz",
+      "integrity": "sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/error-ex": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
+      "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
+      "license": "MIT",
+      "dependencies": {
+        "is-arrayish": "^0.2.1"
+      }
+    },
+    "node_modules/error-stack-parser": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/error-stack-parser/-/error-stack-parser-2.1.4.tgz",
+      "integrity": "sha512-Sk5V6wVazPhq5MhpO+AUxJn5x7XSXGl1R93Vn7i+zS15KDVxQijejNCrz8340/2bgLBjR9GtEG8ZVKONDjcqGQ==",
+      "license": "MIT",
+      "dependencies": {
+        "stackframe": "^1.3.4"
+      }
+    },
+    "node_modules/es-abstract": {
+      "version": "1.24.0",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.24.0.tgz",
+      "integrity": "sha512-WSzPgsdLtTcQwm4CROfS5ju2Wa1QQcVeT37jFjYzdFz1r9ahadC8B8/a4qxJxM+09F18iumCdRmlr96ZYkQvEg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-buffer-byte-length": "^1.0.2",
+        "arraybuffer.prototype.slice": "^1.0.4",
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "data-view-buffer": "^1.0.2",
+        "data-view-byte-length": "^1.0.2",
+        "data-view-byte-offset": "^1.0.1",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "es-set-tostringtag": "^2.1.0",
+        "es-to-primitive": "^1.3.0",
+        "function.prototype.name": "^1.1.8",
+        "get-intrinsic": "^1.3.0",
+        "get-proto": "^1.0.1",
+        "get-symbol-description": "^1.1.0",
+        "globalthis": "^1.0.4",
+        "gopd": "^1.2.0",
+        "has-property-descriptors": "^1.0.2",
+        "has-proto": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "internal-slot": "^1.1.0",
+        "is-array-buffer": "^3.0.5",
+        "is-callable": "^1.2.7",
+        "is-data-view": "^1.0.2",
+        "is-negative-zero": "^2.0.3",
+        "is-regex": "^1.2.1",
+        "is-set": "^2.0.3",
+        "is-shared-array-buffer": "^1.0.4",
+        "is-string": "^1.1.1",
+        "is-typed-array": "^1.1.15",
+        "is-weakref": "^1.1.1",
+        "math-intrinsics": "^1.1.0",
+        "object-inspect": "^1.13.4",
+        "object-keys": "^1.1.1",
+        "object.assign": "^4.1.7",
+        "own-keys": "^1.0.1",
+        "regexp.prototype.flags": "^1.5.4",
+        "safe-array-concat": "^1.1.3",
+        "safe-push-apply": "^1.0.0",
+        "safe-regex-test": "^1.1.0",
+        "set-proto": "^1.0.0",
+        "stop-iteration-iterator": "^1.1.0",
+        "string.prototype.trim": "^1.2.10",
+        "string.prototype.trimend": "^1.0.9",
+        "string.prototype.trimstart": "^1.0.8",
+        "typed-array-buffer": "^1.0.3",
+        "typed-array-byte-length": "^1.0.3",
+        "typed-array-byte-offset": "^1.0.4",
+        "typed-array-length": "^1.0.7",
+        "unbox-primitive": "^1.1.0",
+        "which-typed-array": "^1.1.19"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/es-define-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-iterator-helpers": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/es-iterator-helpers/-/es-iterator-helpers-1.2.1.tgz",
+      "integrity": "sha512-uDn+FE1yrDzyC0pCo961B2IHbdM8y/ACZsKD4dG6WqrjV53BADjwa7D+1aom2rsNVfLyDgU/eigvlJGJ08OQ4w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.6",
+        "es-errors": "^1.3.0",
+        "es-set-tostringtag": "^2.0.3",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.6",
+        "globalthis": "^1.0.4",
+        "gopd": "^1.2.0",
+        "has-property-descriptors": "^1.0.2",
+        "has-proto": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "internal-slot": "^1.1.0",
+        "iterator.prototype": "^1.1.4",
+        "safe-array-concat": "^1.1.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-object-atoms": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
+      "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-set-tostringtag": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
+      "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-shim-unscopables": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.1.0.tgz",
+      "integrity": "sha512-d9T8ucsEhh8Bi1woXCf+TIKDIROLG5WCkxg8geBCbvk22kzwC5G2OnXVMO6FUsvQlgUUXQ2itephWDLqDzbeCw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-to-primitive": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.3.0.tgz",
+      "integrity": "sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-callable": "^1.2.7",
+        "is-date-object": "^1.0.5",
+        "is-symbol": "^1.0.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/esbuild": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.9.tgz",
+      "integrity": "sha512-CRbODhYyQx3qp7ZEwzxOk4JBqmD/seJrzPa/cGjY1VtIn5E09Oi9/dB4JwctnfZ8Q8iT7rioVv5k/FNT/uf54g==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.25.9",
+        "@esbuild/android-arm": "0.25.9",
+        "@esbuild/android-arm64": "0.25.9",
+        "@esbuild/android-x64": "0.25.9",
+        "@esbuild/darwin-arm64": "0.25.9",
+        "@esbuild/darwin-x64": "0.25.9",
+        "@esbuild/freebsd-arm64": "0.25.9",
+        "@esbuild/freebsd-x64": "0.25.9",
+        "@esbuild/linux-arm": "0.25.9",
+        "@esbuild/linux-arm64": "0.25.9",
+        "@esbuild/linux-ia32": "0.25.9",
+        "@esbuild/linux-loong64": "0.25.9",
+        "@esbuild/linux-mips64el": "0.25.9",
+        "@esbuild/linux-ppc64": "0.25.9",
+        "@esbuild/linux-riscv64": "0.25.9",
+        "@esbuild/linux-s390x": "0.25.9",
+        "@esbuild/linux-x64": "0.25.9",
+        "@esbuild/netbsd-arm64": "0.25.9",
+        "@esbuild/netbsd-x64": "0.25.9",
+        "@esbuild/openbsd-arm64": "0.25.9",
+        "@esbuild/openbsd-x64": "0.25.9",
+        "@esbuild/openharmony-arm64": "0.25.9",
+        "@esbuild/sunos-x64": "0.25.9",
+        "@esbuild/win32-arm64": "0.25.9",
+        "@esbuild/win32-ia32": "0.25.9",
+        "@esbuild/win32-x64": "0.25.9"
+      }
+    },
+    "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/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/eslint": {
+      "version": "8.57.1",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.1.tgz",
+      "integrity": "sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==",
+      "deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.2.0",
+        "@eslint-community/regexpp": "^4.6.1",
+        "@eslint/eslintrc": "^2.1.4",
+        "@eslint/js": "8.57.1",
+        "@humanwhocodes/config-array": "^0.13.0",
+        "@humanwhocodes/module-importer": "^1.0.1",
+        "@nodelib/fs.walk": "^1.2.8",
+        "@ungap/structured-clone": "^1.2.0",
+        "ajv": "^6.12.4",
+        "chalk": "^4.0.0",
+        "cross-spawn": "^7.0.2",
+        "debug": "^4.3.2",
+        "doctrine": "^3.0.0",
+        "escape-string-regexp": "^4.0.0",
+        "eslint-scope": "^7.2.2",
+        "eslint-visitor-keys": "^3.4.3",
+        "espree": "^9.6.1",
+        "esquery": "^1.4.2",
+        "esutils": "^2.0.2",
+        "fast-deep-equal": "^3.1.3",
+        "file-entry-cache": "^6.0.1",
+        "find-up": "^5.0.0",
+        "glob-parent": "^6.0.2",
+        "globals": "^13.19.0",
+        "graphemer": "^1.4.0",
+        "ignore": "^5.2.0",
+        "imurmurhash": "^0.1.4",
+        "is-glob": "^4.0.0",
+        "is-path-inside": "^3.0.3",
+        "js-yaml": "^4.1.0",
+        "json-stable-stringify-without-jsonify": "^1.0.1",
+        "levn": "^0.4.1",
+        "lodash.merge": "^4.6.2",
+        "minimatch": "^3.1.2",
+        "natural-compare": "^1.4.0",
+        "optionator": "^0.9.3",
+        "strip-ansi": "^6.0.1",
+        "text-table": "^0.2.0"
+      },
+      "bin": {
+        "eslint": "bin/eslint.js"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint-config-next": {
+      "version": "14.2.32",
+      "resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-14.2.32.tgz",
+      "integrity": "sha512-mP/NmYtDBsKlKIOBnH+CW+pYeyR3wBhE+26DAqQ0/aRtEBeTEjgY2wAFUugUELkTLmrX6PpuMSSTpOhz7j9kdQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@next/eslint-plugin-next": "14.2.32",
+        "@rushstack/eslint-patch": "^1.3.3",
+        "@typescript-eslint/eslint-plugin": "^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0",
+        "@typescript-eslint/parser": "^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0",
+        "eslint-import-resolver-node": "^0.3.6",
+        "eslint-import-resolver-typescript": "^3.5.2",
+        "eslint-plugin-import": "^2.28.1",
+        "eslint-plugin-jsx-a11y": "^6.7.1",
+        "eslint-plugin-react": "^7.33.2",
+        "eslint-plugin-react-hooks": "^4.5.0 || 5.0.0-canary-7118f5dd7-20230705"
+      },
+      "peerDependencies": {
+        "eslint": "^7.23.0 || ^8.0.0",
+        "typescript": ">=3.3.1"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-config-prettier": {
+      "version": "9.1.2",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-9.1.2.tgz",
+      "integrity": "sha512-iI1f+D2ViGn+uvv5HuHVUamg8ll4tN+JRHGc6IJi4TP9Kl976C57fzPXgseXNs8v0iA8aSJpHsTWjDb9QJamGQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "eslint-config-prettier": "bin/cli.js"
+      },
+      "peerDependencies": {
+        "eslint": ">=7.0.0"
+      }
+    },
+    "node_modules/eslint-import-resolver-node": {
+      "version": "0.3.9",
+      "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.9.tgz",
+      "integrity": "sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^3.2.7",
+        "is-core-module": "^2.13.0",
+        "resolve": "^1.22.4"
+      }
+    },
+    "node_modules/eslint-import-resolver-node/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
+    "node_modules/eslint-import-resolver-typescript": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-3.10.1.tgz",
+      "integrity": "sha512-A1rHYb06zjMGAxdLSkN2fXPBwuSaQ0iO5M/hdyS0Ajj1VBaRp0sPD3dn1FhME3c/JluGFbwSxyCfqdSbtQLAHQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "@nolyfill/is-core-module": "1.0.39",
+        "debug": "^4.4.0",
+        "get-tsconfig": "^4.10.0",
+        "is-bun-module": "^2.0.0",
+        "stable-hash": "^0.0.5",
+        "tinyglobby": "^0.2.13",
+        "unrs-resolver": "^1.6.2"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint-import-resolver-typescript"
+      },
+      "peerDependencies": {
+        "eslint": "*",
+        "eslint-plugin-import": "*",
+        "eslint-plugin-import-x": "*"
+      },
+      "peerDependenciesMeta": {
+        "eslint-plugin-import": {
+          "optional": true
+        },
+        "eslint-plugin-import-x": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-module-utils": {
+      "version": "2.12.1",
+      "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.12.1.tgz",
+      "integrity": "sha512-L8jSWTze7K2mTg0vos/RuLRS5soomksDPoJLXIslC7c8Wmut3bx7CPpJijDcBZtxQ5lrbUdM+s0OlNbz0DCDNw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^3.2.7"
+      },
+      "engines": {
+        "node": ">=4"
+      },
+      "peerDependenciesMeta": {
+        "eslint": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-module-utils/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
+    "node_modules/eslint-plugin-import": {
+      "version": "2.32.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.32.0.tgz",
+      "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@rtsao/scc": "^1.1.0",
+        "array-includes": "^3.1.9",
+        "array.prototype.findlastindex": "^1.2.6",
+        "array.prototype.flat": "^1.3.3",
+        "array.prototype.flatmap": "^1.3.3",
+        "debug": "^3.2.7",
+        "doctrine": "^2.1.0",
+        "eslint-import-resolver-node": "^0.3.9",
+        "eslint-module-utils": "^2.12.1",
+        "hasown": "^2.0.2",
+        "is-core-module": "^2.16.1",
+        "is-glob": "^4.0.3",
+        "minimatch": "^3.1.2",
+        "object.fromentries": "^2.0.8",
+        "object.groupby": "^1.0.3",
+        "object.values": "^1.2.1",
+        "semver": "^6.3.1",
+        "string.prototype.trimend": "^1.0.9",
+        "tsconfig-paths": "^3.15.0"
+      },
+      "engines": {
+        "node": ">=4"
+      },
+      "peerDependencies": {
+        "eslint": "^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8 || ^9"
+      }
+    },
+    "node_modules/eslint-plugin-import/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
+    "node_modules/eslint-plugin-import/node_modules/doctrine": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
+      "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "esutils": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/eslint-plugin-import/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/eslint-plugin-jsx-a11y": {
+      "version": "6.10.2",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.10.2.tgz",
+      "integrity": "sha512-scB3nz4WmG75pV8+3eRUQOHZlNSUhFNq37xnpgRkCCELU3XMvXAxLk1eqWWyE22Ki4Q01Fnsw9BA3cJHDPgn2Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "aria-query": "^5.3.2",
+        "array-includes": "^3.1.8",
+        "array.prototype.flatmap": "^1.3.2",
+        "ast-types-flow": "^0.0.8",
+        "axe-core": "^4.10.0",
+        "axobject-query": "^4.1.0",
+        "damerau-levenshtein": "^1.0.8",
+        "emoji-regex": "^9.2.2",
+        "hasown": "^2.0.2",
+        "jsx-ast-utils": "^3.3.5",
+        "language-tags": "^1.0.9",
+        "minimatch": "^3.1.2",
+        "object.fromentries": "^2.0.8",
+        "safe-regex-test": "^1.0.3",
+        "string.prototype.includes": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependencies": {
+        "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9"
+      }
+    },
+    "node_modules/eslint-plugin-react": {
+      "version": "7.37.5",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.37.5.tgz",
+      "integrity": "sha512-Qteup0SqU15kdocexFNAJMvCJEfa2xUKNV4CC1xsVMrIIqEy3SQ/rqyxCWNzfrd3/ldy6HMlD2e0JDVpDg2qIA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-includes": "^3.1.8",
+        "array.prototype.findlast": "^1.2.5",
+        "array.prototype.flatmap": "^1.3.3",
+        "array.prototype.tosorted": "^1.1.4",
+        "doctrine": "^2.1.0",
+        "es-iterator-helpers": "^1.2.1",
+        "estraverse": "^5.3.0",
+        "hasown": "^2.0.2",
+        "jsx-ast-utils": "^2.4.1 || ^3.0.0",
+        "minimatch": "^3.1.2",
+        "object.entries": "^1.1.9",
+        "object.fromentries": "^2.0.8",
+        "object.values": "^1.2.1",
+        "prop-types": "^15.8.1",
+        "resolve": "^2.0.0-next.5",
+        "semver": "^6.3.1",
+        "string.prototype.matchall": "^4.0.12",
+        "string.prototype.repeat": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      },
+      "peerDependencies": {
+        "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7"
+      }
+    },
+    "node_modules/eslint-plugin-react-hooks": {
+      "version": "5.0.0-canary-7118f5dd7-20230705",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-5.0.0-canary-7118f5dd7-20230705.tgz",
+      "integrity": "sha512-AZYbMo/NW9chdL7vk6HQzQhT+PvTAEVqWk9ziruUoW2kAOcN5qNyelv70e0F1VNQAbvutOC9oc+xfWycI9FxDw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0"
+      }
+    },
+    "node_modules/eslint-plugin-react/node_modules/doctrine": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
+      "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "esutils": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/eslint-plugin-react/node_modules/resolve": {
+      "version": "2.0.0-next.5",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.5.tgz",
+      "integrity": "sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-core-module": "^2.13.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/eslint-plugin-react/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/eslint-scope": {
+      "version": "7.2.2",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",
+      "integrity": "sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint-visitor-keys": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint/node_modules/globals": {
+      "version": "13.24.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
+      "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "type-fest": "^0.20.2"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/espree": {
+      "version": "9.6.1",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz",
+      "integrity": "sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "acorn": "^8.9.0",
+        "acorn-jsx": "^5.3.2",
+        "eslint-visitor-keys": "^3.4.1"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/esquery": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.6.0.tgz",
+      "integrity": "sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "estraverse": "^5.1.0"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/esrecurse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/esutils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/exsolve": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/exsolve/-/exsolve-1.0.7.tgz",
+      "integrity": "sha512-VO5fQUzZtI6C+vx4w/4BWJpg3s/5l+6pRQEHzFRM8WFi4XffSP1Z+4qi7GbjWbvRQEbdIco5mIMq+zX4rPuLrw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/extract-zip": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-2.0.1.tgz",
+      "integrity": "sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "debug": "^4.1.1",
+        "get-stream": "^5.1.0",
+        "yauzl": "^2.10.0"
+      },
+      "bin": {
+        "extract-zip": "cli.js"
+      },
+      "engines": {
+        "node": ">= 10.17.0"
+      },
+      "optionalDependencies": {
+        "@types/yauzl": "^2.9.1"
+      }
+    },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "license": "MIT"
+    },
+    "node_modules/fast-glob": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
+      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.8"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/fast-glob/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/fast-json-stable-stringify": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fast-levenshtein": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
+      "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fast-shallow-equal": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fast-shallow-equal/-/fast-shallow-equal-1.0.0.tgz",
+      "integrity": "sha512-HPtaa38cPgWvaCFmRNhlc6NG7pv6NUHqjPgVAkWGoB9mQMwYB27/K0CvOM5Czy+qpT3e8XJ6Q4aPAnzpNpzNaw=="
+    },
+    "node_modules/fast-uri": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.1.0.tgz",
+      "integrity": "sha512-iPeeDKJSWf4IEOasVVrknXpaBV0IApz/gp7S2bb7Z4Lljbl2MGJRqInZiUrQwV16cpzw/D3S5j5Julj/gT52AA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fastify"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fastify"
+        }
+      ],
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/fastest-levenshtein": {
+      "version": "1.0.16",
+      "resolved": "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.16.tgz",
+      "integrity": "sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4.9.1"
+      }
+    },
+    "node_modules/fastest-stable-stringify": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/fastest-stable-stringify/-/fastest-stable-stringify-2.0.2.tgz",
+      "integrity": "sha512-bijHueCGd0LqqNK9b5oCMHc0MluJAx0cwqASgbWMvkO01lCYgIhacVRLcaDz3QnyYIRNJRDwMb41VuT6pHJ91Q==",
+      "license": "MIT"
+    },
+    "node_modules/fastq": {
+      "version": "1.19.1",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.19.1.tgz",
+      "integrity": "sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "node_modules/fd-slicer": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz",
+      "integrity": "sha512-cE1qsB/VwyQozZ+q1dGxR8LBYNZeofhEdUNGSMbQD3Gw2lAzX9Zb3uIU6Ebc/Fmyjo9AWWfnn0AUCHqtevs/8g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "pend": "~1.2.0"
+      }
+    },
+    "node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/file-entry-cache": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
+      "integrity": "sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "flat-cache": "^3.0.4"
+      },
+      "engines": {
+        "node": "^10.12.0 || >=12.0.0"
+      }
+    },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==",
+      "license": "MIT"
+    },
+    "node_modules/find-up": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+      "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "locate-path": "^6.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/flat-cache": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.2.0.tgz",
+      "integrity": "sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "flatted": "^3.2.9",
+        "keyv": "^4.5.3",
+        "rimraf": "^3.0.2"
+      },
+      "engines": {
+        "node": "^10.12.0 || >=12.0.0"
+      }
+    },
+    "node_modules/flatted": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.3.tgz",
+      "integrity": "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/follow-redirects": {
+      "version": "1.15.11",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.11.tgz",
+      "integrity": "sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/for-each": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.5.tgz",
+      "integrity": "sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-callable": "^1.2.7"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/foreground-child": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz",
+      "integrity": "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "cross-spawn": "^7.0.6",
+        "signal-exit": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/form-data": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.4.tgz",
+      "integrity": "sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "es-set-tostringtag": "^2.1.0",
+        "hasown": "^2.0.2",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/fraction.js": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
+      "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "patreon",
+        "url": "https://github.com/sponsors/rawify"
+      }
+    },
+    "node_modules/fs-minipass": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz",
+      "integrity": "sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "minipass": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/fs-minipass/node_modules/minipass": {
+      "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/function.prototype.name": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.8.tgz",
+      "integrity": "sha512-e5iwyodOHhbMr/yNrc7fDYG4qlbIvI5gajyzPnb5TCwyhjApznQh1BMFou9b30SevY43gCJKXycoCBjMbsuW0Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "functions-have-names": "^1.2.3",
+        "hasown": "^2.0.2",
+        "is-callable": "^1.2.7"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/functions-have-names": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
+      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-intrinsic": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "function-bind": "^1.1.2",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/get-stream": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz",
+      "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "pump": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/get-symbol-description": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.1.0.tgz",
+      "integrity": "sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-tsconfig": {
+      "version": "4.10.1",
+      "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.10.1.tgz",
+      "integrity": "sha512-auHyJ4AgMz7vgS8Hp3N6HXSmlMdUyhSUrfBF16w153rxtLIEOE+HGqaBppczZvnHLqQJfiHotCYpNhl0lUROFQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "resolve-pkg-maps": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/privatenumber/get-tsconfig?sponsor=1"
+      }
+    },
+    "node_modules/glob": {
+      "version": "10.3.10",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.10.tgz",
+      "integrity": "sha512-fa46+tv1Ak0UPK1TOy/pZrIybNNt4HCv7SDzwyfiOZkvZLEbjsZkJBPtDHVshZjbecAoAGSC20MjLDG/qr679g==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^2.3.5",
+        "minimatch": "^9.0.1",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0",
+        "path-scurry": "^1.10.1"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/glob/node_modules/brace-expansion": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/glob/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/glob/node_modules/minipass": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/global-modules": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/global-modules/-/global-modules-2.0.0.tgz",
+      "integrity": "sha512-NGbfmJBp9x8IxyJSd1P+otYK8vonoJactOogrVfFRIAEY1ukil8RSKDz2Yo7wh1oihl51l/r6W4epkeKJHqL8A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "global-prefix": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/global-prefix": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-3.0.0.tgz",
+      "integrity": "sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ini": "^1.3.5",
+        "kind-of": "^6.0.2",
+        "which": "^1.3.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/global-prefix/node_modules/which": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
+      "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "which": "bin/which"
+      }
+    },
+    "node_modules/globals": {
+      "version": "15.15.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-15.15.0.tgz",
+      "integrity": "sha512-7ACyT3wmyp3I61S4fG682L0VA2RGD9otkqGJIwNUMF1SWUombIIk+af1unuDYgMm082aHYwD+mzJvv9Iu8dsgg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/globalthis": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/globalthis/-/globalthis-1.0.4.tgz",
+      "integrity": "sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-properties": "^1.2.1",
+        "gopd": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/globby": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
+      "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-union": "^2.1.0",
+        "dir-glob": "^3.0.1",
+        "fast-glob": "^3.2.9",
+        "ignore": "^5.2.0",
+        "merge2": "^1.4.1",
+        "slash": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/globjoin": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/globjoin/-/globjoin-0.1.4.tgz",
+      "integrity": "sha512-xYfnw62CKG8nLkZBfWbhWwDw02CHty86jfPcc2cr3ZfeuK9ysoVPPEUxf21bAD/rWAgk52SuBrLJlefNy8mvFg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/gopd": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "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/graphemer": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
+      "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/has-bigints": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.1.0.tgz",
+      "integrity": "sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/has-property-descriptors": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
+      "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-define-property": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-proto": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.2.0.tgz",
+      "integrity": "sha512-KIL7eQPfHQRC8+XluaIw7BHUwwqL19bQn4hzNgdr+1wXoU0KKj6rufu47lhY7KbJR2C6T6+PfyN0Ea7wkSS+qQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-symbols": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
+    "node_modules/hoist-non-react-statics/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "license": "MIT"
+    },
+    "node_modules/hookified": {
+      "version": "1.12.0",
+      "resolved": "https://registry.npmjs.org/hookified/-/hookified-1.12.0.tgz",
+      "integrity": "sha512-hMr1Y9TCLshScrBbV2QxJ9BROddxZ12MX9KsCtuGGy/3SmmN5H1PllKerrVlSotur9dlE8hmUKAOSa3WDzsZmQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/html-tags": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.3.1.tgz",
+      "integrity": "sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/htmlparser2": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-9.1.0.tgz",
+      "integrity": "sha512-5zfg6mHUoaer/97TxnGpxmbR7zJtPwIYFMZ/H5ucTlPZhKvtum05yiPK3Mgai3a0DyVxv7qYqoweaEd2nrYQzQ==",
+      "dev": true,
+      "funding": [
+        "https://github.com/fb55/htmlparser2?sponsor=1",
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.1.0",
+        "entities": "^4.5.0"
+      }
+    },
+    "node_modules/hyphenate-style-name": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.1.0.tgz",
+      "integrity": "sha512-WDC/ui2VVRrz3jOVi+XtjqkDjiVjTtFaAGiW37k6b+ohyQ5wYDOGkvCZa8+H0nx3gyvv0+BST9xuOgIyGQ00gw==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/ignore": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
+      "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/import-fresh": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
+      "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
+      "license": "MIT",
+      "dependencies": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/imurmurhash": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
+      "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8.19"
+      }
+    },
+    "node_modules/ini": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
+      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/inline-style-prefixer": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-7.0.1.tgz",
+      "integrity": "sha512-lhYo5qNTQp3EvSSp3sRvXMbVQTLrvGV6DycRMJ5dm2BLMiJ30wpXKdDdgX+GmJZ5uQMucwRKHamXSst3Sj/Giw==",
+      "license": "MIT",
+      "dependencies": {
+        "css-in-js-utils": "^3.1.0"
+      }
+    },
+    "node_modules/internal-slot": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.1.0.tgz",
+      "integrity": "sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "hasown": "^2.0.2",
+        "side-channel": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/is-array-buffer": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz",
+      "integrity": "sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "get-intrinsic": "^1.2.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-arrayish": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
+      "license": "MIT"
+    },
+    "node_modules/is-async-function": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-async-function/-/is-async-function-2.1.1.tgz",
+      "integrity": "sha512-9dgM/cZBnNvjzaMYHVoxxfPj2QXt22Ev7SuuPrs+xav0ukGB0S6d4ydZdEiM48kLx5kDV+QBPrpVnFyefL8kkQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "async-function": "^1.0.0",
+        "call-bound": "^1.0.3",
+        "get-proto": "^1.0.1",
+        "has-tostringtag": "^1.0.2",
+        "safe-regex-test": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-bigint": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.1.0.tgz",
+      "integrity": "sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-bigints": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-boolean-object": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.2.2.tgz",
+      "integrity": "sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-bun-module": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-bun-module/-/is-bun-module-2.0.0.tgz",
+      "integrity": "sha512-gNCGbnnnnFAUGKeZ9PdbyeGYJqewpmc2aKHUEMO5nQPWU9lOmv7jcmQIv+qHD8fXW6W7qfuCwX4rY9LNRjXrkQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "semver": "^7.7.1"
+      }
+    },
+    "node_modules/is-callable": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
+      "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-core-module": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
+      "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
+      "license": "MIT",
+      "dependencies": {
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-data-view": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-data-view/-/is-data-view-1.0.2.tgz",
+      "integrity": "sha512-RKtWF8pGmS87i2D6gqQu/l7EYRlVdfzemCJN/P3UOs//x1QE7mfhvzHIApBTRf7axvT6DMGwSwBXYCT0nfB9xw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "get-intrinsic": "^1.2.6",
+        "is-typed-array": "^1.1.13"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-date-object": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.1.0.tgz",
+      "integrity": "sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-finalizationregistry": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-finalizationregistry/-/is-finalizationregistry-1.1.1.tgz",
+      "integrity": "sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-generator-function": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.1.0.tgz",
+      "integrity": "sha512-nPUB5km40q9e8UfN/Zc24eLlzdSf9OfKByBw9CIdw4H1giPMeA0OIJvbchsCu4npfI2QcMVBsGEBHKZ7wLTWmQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "get-proto": "^1.0.0",
+        "has-tostringtag": "^1.0.2",
+        "safe-regex-test": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-map": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.3.tgz",
+      "integrity": "sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-negative-zero": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.3.tgz",
+      "integrity": "sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/is-number-object": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.1.1.tgz",
+      "integrity": "sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-path-inside": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
+      "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-plain-object": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
+      "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-regex": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.1.tgz",
+      "integrity": "sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "gopd": "^1.2.0",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-set": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-set/-/is-set-2.0.3.tgz",
+      "integrity": "sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-shared-array-buffer": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.4.tgz",
+      "integrity": "sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-string": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.1.1.tgz",
+      "integrity": "sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-symbol": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.1.1.tgz",
+      "integrity": "sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "has-symbols": "^1.1.0",
+        "safe-regex-test": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-typed-array": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.15.tgz",
+      "integrity": "sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "which-typed-array": "^1.1.16"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-weakmap": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.2.tgz",
+      "integrity": "sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-weakref": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.1.1.tgz",
+      "integrity": "sha512-6i9mGWSlqzNMEqpCp93KwRS1uUOodk2OJ6b+sq7ZPDSy2WuI5NFIxp/254TytR8ftefexkWn5xNiHUNpPOfSew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-weakset": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/is-weakset/-/is-weakset-2.0.4.tgz",
+      "integrity": "sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "get-intrinsic": "^1.2.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/isarray": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
+      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/iterator.prototype": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/iterator.prototype/-/iterator.prototype-1.1.5.tgz",
+      "integrity": "sha512-H0dkQoCa3b2VEeKQBOxFph+JAbcrQdE7KC0UkqwpLmv2EC4P41QXP+rqo9wYodACiG5/WM5s9oDApTU8utwj9g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.6",
+        "get-proto": "^1.0.0",
+        "has-symbols": "^1.1.0",
+        "set-function-name": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/jackspeak": {
+      "version": "2.3.6",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-2.3.6.tgz",
+      "integrity": "sha512-N3yCS/NegsOBokc8GAdM8UcmfsKiSS8cipheD/nivzr700H+nsMOxJjQnvwOcRYVuFkdH0wGUvW2WbXGmrZGbQ==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "@isaacs/cliui": "^8.0.2"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      },
+      "optionalDependencies": {
+        "@pkgjs/parseargs": "^0.11.0"
+      }
+    },
+    "node_modules/jiti": {
+      "version": "1.21.7",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
+      "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jiti": "bin/jiti.js"
+      }
+    },
+    "node_modules/js-cookie": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz",
+      "integrity": "sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ==",
+      "license": "MIT"
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "license": "MIT"
+    },
+    "node_modules/js-yaml": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/jsesc": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
+      "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
+      "license": "MIT",
+      "bin": {
+        "jsesc": "bin/jsesc"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/json-buffer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
+      "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json-parse-even-better-errors": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
+      "license": "MIT"
+    },
+    "node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json-stable-stringify-without-jsonify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
+      "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json5": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+      "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "minimist": "^1.2.0"
+      },
+      "bin": {
+        "json5": "lib/cli.js"
+      }
+    },
+    "node_modules/jsx-ast-utils": {
+      "version": "3.3.5",
+      "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz",
+      "integrity": "sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-includes": "^3.1.6",
+        "array.prototype.flat": "^1.3.1",
+        "object.assign": "^4.1.4",
+        "object.values": "^1.1.6"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/keyv": {
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
+      "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "json-buffer": "3.0.1"
+      }
+    },
+    "node_modules/kind-of": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
+      "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/known-css-properties": {
+      "version": "0.37.0",
+      "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.37.0.tgz",
+      "integrity": "sha512-JCDrsP4Z1Sb9JwG0aJ8Eo2r7k4Ou5MwmThS/6lcIe1ICyb7UBJKGRIUUdqc2ASdE/42lgz6zFUnzAIhtXnBVrQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/kolorist": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/kolorist/-/kolorist-1.8.0.tgz",
+      "integrity": "sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/language-subtag-registry": {
+      "version": "0.3.23",
+      "resolved": "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.23.tgz",
+      "integrity": "sha512-0K65Lea881pHotoGEa5gDlMxt3pctLi2RplBb7Ezh4rRdLEOtgi7n4EwK9lamnUCkKBqaeKRVebTq6BAxSkpXQ==",
+      "dev": true,
+      "license": "CC0-1.0"
+    },
+    "node_modules/language-tags": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/language-tags/-/language-tags-1.0.9.tgz",
+      "integrity": "sha512-MbjN408fEndfiQXbFQ1vnd+1NoLDsnQW41410oQBXiyXDMYH5z505juWa4KUE1LqxRC7DgOgZDbKLxHIwm27hA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "language-subtag-registry": "^0.3.20"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/levn": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
+      "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "prelude-ls": "^1.2.1",
+        "type-check": "~0.4.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/lilconfig": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
+      "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antonk52"
+      }
+    },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "license": "MIT"
+    },
+    "node_modules/local-pkg": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-0.5.1.tgz",
+      "integrity": "sha512-9rrA30MRRP3gBD3HTGnC6cDFpaE1kVDWxWgqWJUN0RvDNAo+Nz/9GxB+nHOH0ifbVFy0hSA1V6vFDvnx54lTEQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mlly": "^1.7.3",
+        "pkg-types": "^1.2.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/locate-path": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/lodash.truncate": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/lodash.truncate/-/lodash.truncate-4.4.2.tgz",
+      "integrity": "sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
+    "node_modules/lru-cache": {
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
+      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/mathml-tag-names": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz",
+      "integrity": "sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/mdn-data": {
+      "version": "2.0.14",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
+      "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==",
+      "license": "CC0-1.0"
+    },
+    "node_modules/meow": {
+      "version": "13.2.0",
+      "resolved": "https://registry.npmjs.org/meow/-/meow-13.2.0.tgz",
+      "integrity": "sha512-pxQJQzB6djGPXh08dacEloMFopsOqGVRKFPYvPOt9XDZ1HasbgDZA74CJGreSU4G3Ak7EFJGoiH2auq+yXISgA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/minimist": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/minipass": {
+      "version": "4.2.8",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-4.2.8.tgz",
+      "integrity": "sha512-fNzuVyifolSLFL4NzpF+wEF4qrgqaaKX0haXPQEdQ7NKAN+WecoKMHV09YcuL/DHxrUsYQOK3MiuDf7Ip2OXfQ==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/minizlib": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-2.1.2.tgz",
+      "integrity": "sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "minipass": "^3.0.0",
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/minizlib/node_modules/minipass": {
+      "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/mkdirp": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
+      "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "mkdirp": "bin/cmd.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/mlly": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.8.0.tgz",
+      "integrity": "sha512-l8D9ODSRWLe2KHJSifWGwBqpTZXIXTeo8mlKjY+E2HAakaTeNpqAyBZ8GSqLzHgw4XmHmC8whvpjJNMbFZN7/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "acorn": "^8.15.0",
+        "pathe": "^2.0.3",
+        "pkg-types": "^1.3.1",
+        "ufo": "^1.6.1"
+      }
+    },
+    "node_modules/mlly/node_modules/pathe": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
+      "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "license": "MIT"
+    },
+    "node_modules/mz": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0",
+        "object-assign": "^4.0.1",
+        "thenify-all": "^1.0.0"
+      }
+    },
+    "node_modules/nano-css": {
+      "version": "5.6.2",
+      "resolved": "https://registry.npmjs.org/nano-css/-/nano-css-5.6.2.tgz",
+      "integrity": "sha512-+6bHaC8dSDGALM1HJjOHVXpuastdu2xFoZlC77Jh4cg+33Zcgm+Gxd+1xsnpZK14eyHObSp82+ll5y3SX75liw==",
+      "license": "Unlicense",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.4.15",
+        "css-tree": "^1.1.2",
+        "csstype": "^3.1.2",
+        "fastest-stable-stringify": "^2.0.2",
+        "inline-style-prefixer": "^7.0.1",
+        "rtl-css-js": "^1.16.1",
+        "stacktrace-js": "^2.0.2",
+        "stylis": "^4.3.0"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-dom": "*"
+      }
+    },
+    "node_modules/nano-css/node_modules/stylis": {
+      "version": "4.3.6",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.6.tgz",
+      "integrity": "sha512-yQ3rwFWRfwNUY7H5vpU0wfdkNSnvnJinhF9830Swlaxl03zsOjCfmX0ugac+3LtK0lYSgwL/KXc8oYL3mG4YFQ==",
+      "license": "MIT"
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "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/napi-postinstall": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/napi-postinstall/-/napi-postinstall-0.3.3.tgz",
+      "integrity": "sha512-uTp172LLXSxuSYHv/kou+f6KW3SMppU9ivthaVTXian9sOt3XM/zHYHpRZiLgQoxeWfYUnslNWQHF1+G71xcow==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "napi-postinstall": "lib/cli.js"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/napi-postinstall"
+      }
+    },
+    "node_modules/natural-compare": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
+      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/next": {
+      "version": "14.2.32",
+      "resolved": "https://registry.npmjs.org/next/-/next-14.2.32.tgz",
+      "integrity": "sha512-fg5g0GZ7/nFc09X8wLe6pNSU8cLWbLRG3TZzPJ1BJvi2s9m7eF991se67wliM9kR5yLHRkyGKU49MMx58s3LJg==",
+      "license": "MIT",
+      "dependencies": {
+        "@next/env": "14.2.32",
+        "@swc/helpers": "0.5.5",
+        "busboy": "1.6.0",
+        "caniuse-lite": "^1.0.30001579",
+        "graceful-fs": "^4.2.11",
+        "postcss": "8.4.31",
+        "styled-jsx": "5.1.1"
+      },
+      "bin": {
+        "next": "dist/bin/next"
+      },
+      "engines": {
+        "node": ">=18.17.0"
+      },
+      "optionalDependencies": {
+        "@next/swc-darwin-arm64": "14.2.32",
+        "@next/swc-darwin-x64": "14.2.32",
+        "@next/swc-linux-arm64-gnu": "14.2.32",
+        "@next/swc-linux-arm64-musl": "14.2.32",
+        "@next/swc-linux-x64-gnu": "14.2.32",
+        "@next/swc-linux-x64-musl": "14.2.32",
+        "@next/swc-win32-arm64-msvc": "14.2.32",
+        "@next/swc-win32-ia32-msvc": "14.2.32",
+        "@next/swc-win32-x64-msvc": "14.2.32"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": "^1.1.0",
+        "@playwright/test": "^1.41.2",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "sass": "^1.3.0"
+      },
+      "peerDependenciesMeta": {
+        "@opentelemetry/api": {
+          "optional": true
+        },
+        "@playwright/test": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/next/node_modules/postcss": {
+      "version": "8.4.31",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
+      "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.6",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/node-releases": {
+      "version": "2.0.19",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz",
+      "integrity": "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/normalize-range": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
+      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/nth-check": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
+      "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "boolbase": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/nth-check?sponsor=1"
+      }
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-hash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/object-inspect": {
+      "version": "1.13.4",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
+      "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object-keys": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
+      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/object.assign": {
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.7.tgz",
+      "integrity": "sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0",
+        "has-symbols": "^1.1.0",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object.entries": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.9.tgz",
+      "integrity": "sha512-8u/hfXFRBD1O0hPUjioLhoWFHRmt6tKA4/vZPyckBr18l1KE9uHrFaFaUi8MDRTpi4uak2goyPTSNJLXX2k2Hw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/object.fromentries": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.8.tgz",
+      "integrity": "sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object.groupby": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/object.groupby/-/object.groupby-1.0.3.tgz",
+      "integrity": "sha512-+Lhy3TQTuzXI5hevh8sBGqbmurHbbIjAi0Z4S63nthVLmLxfbj4T54a4CfZrXIrt9iP4mVAPYMo/v99taj3wjQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/object.values": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.2.1.tgz",
+      "integrity": "sha512-gXah6aZrcUxjWg2zR2MwouP2eHlCBzdV4pygudehaKXSGW4v2AsRQUK+lwwXhii6KFZcunEnmSUoYp5CXibxtA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "wrappy": "1"
+      }
+    },
+    "node_modules/optionator": {
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
+      "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "deep-is": "^0.1.3",
+        "fast-levenshtein": "^2.0.6",
+        "levn": "^0.4.1",
+        "prelude-ls": "^1.2.1",
+        "type-check": "^0.4.0",
+        "word-wrap": "^1.2.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/own-keys": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/own-keys/-/own-keys-1.0.1.tgz",
+      "integrity": "sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "get-intrinsic": "^1.2.6",
+        "object-keys": "^1.1.1",
+        "safe-push-apply": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/p-limit": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "yocto-queue": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-locate": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+      "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-limit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/package-manager-detector": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/package-manager-detector/-/package-manager-detector-1.3.0.tgz",
+      "integrity": "sha512-ZsEbbZORsyHuO00lY1kV3/t72yp6Ysay6Pd17ZAlNGuGwmWDLCJxFpRs0IzfXfj1o4icJOkUEioexFHzyPurSQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "license": "MIT",
+      "dependencies": {
+        "callsites": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/parse-json": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.0.0",
+        "error-ex": "^1.3.1",
+        "json-parse-even-better-errors": "^2.3.0",
+        "lines-and-columns": "^1.1.6"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/parse5": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.3.0.tgz",
+      "integrity": "sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "entities": "^6.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
+    "node_modules/parse5-htmlparser2-tree-adapter": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-7.1.0.tgz",
+      "integrity": "sha512-ruw5xyKs6lrpo9x9rCZqZZnIUntICjQAd0Wsmp396Ul9lN/h+ifgVV1x1gZHi8euej6wTfpqX8j+BFQxF0NS/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "domhandler": "^5.0.3",
+        "parse5": "^7.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
+    "node_modules/parse5-parser-stream": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/parse5-parser-stream/-/parse5-parser-stream-7.1.2.tgz",
+      "integrity": "sha512-JyeQc9iwFLn5TbvvqACIF/VXG6abODeB3Fwmv/TGdLk2LfbWkaySGY72at4+Ty7EkPZj854u4CrICqNk2qIbow==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "parse5": "^7.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
+    "node_modules/parse5/node_modules/entities": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
+      "integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "license": "MIT"
+    },
+    "node_modules/path-scurry": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
+      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "lru-cache": "^10.2.0",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/path-scurry/node_modules/minipass": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/path-type": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/pathe": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-1.1.2.tgz",
+      "integrity": "sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/pend": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
+      "integrity": "sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/perfect-scrollbar": {
+      "version": "1.5.6",
+      "resolved": "https://registry.npmjs.org/perfect-scrollbar/-/perfect-scrollbar-1.5.6.tgz",
+      "integrity": "sha512-rixgxw3SxyJbCaSpo1n35A/fwI1r2rdwMKOTCg/AcG+xOEyZcE8UHVjpZMFCVImzsFoCZeJTT+M/rdEIQYO2nw==",
+      "license": "MIT"
+    },
+    "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": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/pirates": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.7.tgz",
+      "integrity": "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/pkg-types": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.3.1.tgz",
+      "integrity": "sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "confbox": "^0.1.8",
+        "mlly": "^1.7.4",
+        "pathe": "^2.0.1"
+      }
+    },
+    "node_modules/pkg-types/node_modules/pathe": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
+      "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/possible-typed-array-names": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz",
+      "integrity": "sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.5.6",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
+      "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
+      "dev": true,
+      "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.11",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/postcss-import": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
+      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
+    "node_modules/postcss-js": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
+      "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "camelcase-css": "^2.0.1"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >= 16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.21"
+      }
+    },
+    "node_modules/postcss-load-config": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
+      "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "lilconfig": "^3.0.0",
+        "yaml": "^2.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      },
+      "peerDependencies": {
+        "postcss": ">=8.0.9",
+        "ts-node": ">=9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "postcss": {
+          "optional": true
+        },
+        "ts-node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/postcss-load-config/node_modules/yaml": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.1.tgz",
+      "integrity": "sha512-lcYcMxX2PO9XMGvAJkJ3OsNMw+/7FKes7/hgerGUYWIoWu5j/+YQqcZr5JnPZWzOsEBgMbSbiSTn/dv/69Mkpw==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "yaml": "bin.mjs"
+      },
+      "engines": {
+        "node": ">= 14.6"
+      }
+    },
+    "node_modules/postcss-nested": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
+      "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "postcss-selector-parser": "^6.1.1"
+      },
+      "engines": {
+        "node": ">=12.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
+      }
+    },
+    "node_modules/postcss-nested/node_modules/postcss-selector-parser": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
+      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-resolve-nested-selector": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/postcss-resolve-nested-selector/-/postcss-resolve-nested-selector-0.1.6.tgz",
+      "integrity": "sha512-0sglIs9Wmkzbr8lQwEyIzlDOOC9bGmfVKcJTaxv3vMmd3uo4o4DerC3En0bnmgceeql9BfC8hRkp7cg0fjdVqw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/postcss-safe-parser": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-7.0.1.tgz",
+      "integrity": "sha512-0AioNCJZ2DPYz5ABT6bddIqlhgwhpHZ/l65YAYo0BCIn0xiDpsnTHz0gnoTGk0OXZW0JRs+cDwL8u/teRdz+8A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss-safe-parser"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.31"
+      }
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz",
+      "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-styled-syntax": {
+      "version": "0.6.4",
+      "resolved": "https://registry.npmjs.org/postcss-styled-syntax/-/postcss-styled-syntax-0.6.4.tgz",
+      "integrity": "sha512-uWiLn+9rKgIghUYmTHvXMR6MnyPULMe9Gv3bV537Fg4FH6CA6cn21WMjKss2Qb98LUhT847tKfnRGG3FhSOgUQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "typescript": "^5.3.3"
+      },
+      "engines": {
+        "node": ">=14.17"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.21"
+      }
+    },
+    "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/prelude-ls": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
+      "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/prettier": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.6.2.tgz",
+      "integrity": "sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
+    "node_modules/prop-types/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "license": "MIT"
+    },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/pump": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.3.tgz",
+      "integrity": "sha512-todwxLMY7/heScKmntwQG8CXVkWUOdYxIvY2s0VWAAMh/nd8SoYiRaKjlr7+iCs984f2P8zvrfWcDDYVb73NfA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "end-of-stream": "^1.1.0",
+        "once": "^1.3.1"
+      }
+    },
+    "node_modules/punycode": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
+      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/quansync": {
+      "version": "0.2.11",
+      "resolved": "https://registry.npmjs.org/quansync/-/quansync-0.2.11.tgz",
+      "integrity": "sha512-AifT7QEbW9Nri4tAwR5M/uzpBuqfZf+zwaEM/QkzEjj7NBuFD2rBuy0K3dE+8wltbezDV7JMA0WfnCPYRSYbXA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/antfu"
+        },
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/sxzz"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/quick-lru": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz",
+      "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/react": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-apexcharts": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/react-apexcharts/-/react-apexcharts-1.7.0.tgz",
+      "integrity": "sha512-03oScKJyNLRf0Oe+ihJxFZliBQM9vW3UWwomVn4YVRTN1jsIR58dLWt0v1sb8RwJVHDMbeHiKQueM0KGpn7nOA==",
+      "license": "MIT",
+      "dependencies": {
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "apexcharts": ">=4.0.0",
+        "react": ">=0.13"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
+      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.23.2"
+      },
+      "peerDependencies": {
+        "react": "^18.3.1"
+      }
+    },
+    "node_modules/react-is": {
+      "version": "19.1.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.1.1.tgz",
+      "integrity": "sha512-tr41fA15Vn8p4X9ntI+yCyeGSf1TlYaY5vlTZfQmeLBrFo3psOPX6HhTDnFNL9uj3EhP0KAQ80cugCl4b4BERA==",
+      "license": "MIT"
+    },
+    "node_modules/react-perfect-scrollbar": {
+      "version": "1.5.8",
+      "resolved": "https://registry.npmjs.org/react-perfect-scrollbar/-/react-perfect-scrollbar-1.5.8.tgz",
+      "integrity": "sha512-bQ46m70gp/HJtiBOF3gRzBISSZn8FFGNxznTdmTG8AAwpxG1bJCyn7shrgjEvGSQ5FJEafVEiosY+ccER11OSA==",
+      "license": "MIT",
+      "dependencies": {
+        "perfect-scrollbar": "^1.5.0",
+        "prop-types": "^15.6.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.3.3",
+        "react-dom": ">=16.3.3"
+      }
+    },
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
+    "node_modules/react-universal-interface": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/react-universal-interface/-/react-universal-interface-0.6.2.tgz",
+      "integrity": "sha512-dg8yXdcQmvgR13RIlZbTRQOoUrDciFVoSBZILwjE2LFISxZZ8loVJKAkuzswl5js8BHda79bIb2b84ehU8IjXw==",
+      "peerDependencies": {
+        "react": "*",
+        "tslib": "*"
+      }
+    },
+    "node_modules/react-use": {
+      "version": "17.6.0",
+      "resolved": "https://registry.npmjs.org/react-use/-/react-use-17.6.0.tgz",
+      "integrity": "sha512-OmedEScUMKFfzn1Ir8dBxiLLSOzhKe/dPZwVxcujweSj45aNM7BEGPb9BEVIgVEqEXx6f3/TsXzwIktNgUR02g==",
+      "license": "Unlicense",
+      "dependencies": {
+        "@types/js-cookie": "^2.2.6",
+        "@xobotyi/scrollbar-width": "^1.9.5",
+        "copy-to-clipboard": "^3.3.1",
+        "fast-deep-equal": "^3.1.3",
+        "fast-shallow-equal": "^1.0.0",
+        "js-cookie": "^2.2.1",
+        "nano-css": "^5.6.2",
+        "react-universal-interface": "^0.6.2",
+        "resize-observer-polyfill": "^1.5.1",
+        "screenfull": "^5.1.0",
+        "set-harmonic-interval": "^1.0.1",
+        "throttle-debounce": "^3.0.1",
+        "ts-easing": "^0.2.0",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-dom": "*"
+      }
+    },
+    "node_modules/read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "pify": "^2.3.0"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/reflect.getprototypeof": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
+      "integrity": "sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.9",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.7",
+        "get-proto": "^1.0.1",
+        "which-builtin-type": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/regexp.prototype.flags": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.4.tgz",
+      "integrity": "sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-errors": "^1.3.0",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "set-function-name": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/require-from-string": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
+      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==",
+      "license": "MIT"
+    },
+    "node_modules/resolve": {
+      "version": "1.22.10",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
+      "integrity": "sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==",
+      "license": "MIT",
+      "dependencies": {
+        "is-core-module": "^2.16.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/resolve-pkg-maps": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz",
+      "integrity": "sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1"
+      }
+    },
+    "node_modules/reusify": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
+      "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/rimraf": {
+      "version": "5.0.10",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-5.0.10.tgz",
+      "integrity": "sha512-l0OE8wL34P4nJH/H2ffoaniAokM2qSmrtXHmlpvYr5AVVX8msAyW0l8NVJFDxlSK4u3Uh/f41cQheDVdnYijwQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "glob": "^10.3.7"
+      },
+      "bin": {
+        "rimraf": "dist/esm/bin.mjs"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/rtl-css-js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/rtl-css-js/-/rtl-css-js-1.16.1.tgz",
+      "integrity": "sha512-lRQgou1mu19e+Ya0LsTvKrVJ5TYUbqCVPAiImX3UfLTenarvPUl1QFdvu5Z3PYmHT9RCcwIfbjRQBntExyj3Zg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.1.2"
+      }
+    },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
+    "node_modules/safe-array-concat": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.3.tgz",
+      "integrity": "sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.2",
+        "get-intrinsic": "^1.2.6",
+        "has-symbols": "^1.1.0",
+        "isarray": "^2.0.5"
+      },
+      "engines": {
+        "node": ">=0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/safe-push-apply": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/safe-push-apply/-/safe-push-apply-1.0.0.tgz",
+      "integrity": "sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "isarray": "^2.0.5"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/safe-regex-test": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.1.0.tgz",
+      "integrity": "sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "is-regex": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/scheduler": {
+      "version": "0.23.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      }
+    },
+    "node_modules/screenfull": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/screenfull/-/screenfull-5.2.0.tgz",
+      "integrity": "sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/semver": {
+      "version": "7.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
+      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/server-only": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/server-only/-/server-only-0.0.1.tgz",
+      "integrity": "sha512-qepMx2JxAa5jjfzxG79yPPq+8BuFToHd1hm7kI+Z4zAq1ftQiP7HcxMhDDItrbtwVeLg/cY2JnKnrcFkmiswNA==",
+      "license": "MIT"
+    },
+    "node_modules/set-function-length": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
+      "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.4",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/set-function-name": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/set-function-name/-/set-function-name-2.0.2.tgz",
+      "integrity": "sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "functions-have-names": "^1.2.3",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/set-harmonic-interval": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/set-harmonic-interval/-/set-harmonic-interval-1.0.1.tgz",
+      "integrity": "sha512-AhICkFV84tBP1aWqPwLZqFvAwqEoVA9kxNMniGEUvzOlm4vLmOFLiTT3UZ6bziJTy4bOVpzWGTfSCbmaayGx8g==",
+      "license": "Unlicense",
+      "engines": {
+        "node": ">=6.9"
+      }
+    },
+    "node_modules/set-proto": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/set-proto/-/set-proto-1.0.0.tgz",
+      "integrity": "sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/side-channel": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
+      "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3",
+        "side-channel-list": "^1.0.0",
+        "side-channel-map": "^1.0.1",
+        "side-channel-weakmap": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-list": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz",
+      "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-map": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
+      "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-weakmap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
+      "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3",
+        "side-channel-map": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/slash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/slice-ansi": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-4.0.0.tgz",
+      "integrity": "sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "astral-regex": "^2.0.0",
+        "is-fullwidth-code-point": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/slice-ansi?sponsor=1"
+      }
+    },
+    "node_modules/source-map": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+      "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "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/stable-hash": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/stable-hash/-/stable-hash-0.0.5.tgz",
+      "integrity": "sha512-+L3ccpzibovGXFK+Ap/f8LOS0ahMrHTf3xu7mMLSpEGU0EO9ucaysSylKo9eRDFNhWve/y275iPmIZ4z39a9iA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/stack-generator": {
+      "version": "2.0.10",
+      "resolved": "https://registry.npmjs.org/stack-generator/-/stack-generator-2.0.10.tgz",
+      "integrity": "sha512-mwnua/hkqM6pF4k8SnmZ2zfETsRUpWXREfA/goT8SLCV4iOFa4bzOX2nDipWAZFPTjLvQB82f5yaodMVhK0yJQ==",
+      "license": "MIT",
+      "dependencies": {
+        "stackframe": "^1.3.4"
+      }
+    },
+    "node_modules/stackframe": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.3.4.tgz",
+      "integrity": "sha512-oeVtt7eWQS+Na6F//S4kJ2K2VbRlS9D43mAlMyVpVWovy9o+jfgH8O9agzANzaiLjclA0oYzUXEM4PurhSUChw==",
+      "license": "MIT"
+    },
+    "node_modules/stacktrace-gps": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/stacktrace-gps/-/stacktrace-gps-3.1.2.tgz",
+      "integrity": "sha512-GcUgbO4Jsqqg6RxfyTHFiPxdPqF+3LFmQhm7MgCuYQOYuWyqxo5pwRPz5d/u6/WYJdEnWfK4r+jGbyD8TSggXQ==",
+      "license": "MIT",
+      "dependencies": {
+        "source-map": "0.5.6",
+        "stackframe": "^1.3.4"
+      }
+    },
+    "node_modules/stacktrace-gps/node_modules/source-map": {
+      "version": "0.5.6",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz",
+      "integrity": "sha512-MjZkVp0NHr5+TPihLcadqnlVoGIoWo4IBHptutGh9wI3ttUYvCG26HkSuDi+K6lsZ25syXJXcctwgyVCt//xqA==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/stacktrace-js": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/stacktrace-js/-/stacktrace-js-2.0.2.tgz",
+      "integrity": "sha512-Je5vBeY4S1r/RnLydLl0TBTi3F2qdfWmYsGvtfZgEI+SCprPppaIhQf5nGcal4gI4cGpCV/duLcAzT1np6sQqg==",
+      "license": "MIT",
+      "dependencies": {
+        "error-stack-parser": "^2.0.6",
+        "stack-generator": "^2.0.5",
+        "stacktrace-gps": "^3.0.4"
+      }
+    },
+    "node_modules/stop-iteration-iterator": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.1.0.tgz",
+      "integrity": "sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "internal-slot": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/streamsearch": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
+      "integrity": "sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/string-width": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "eastasianwidth": "^0.2.0",
+        "emoji-regex": "^9.2.2",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/string-width-cjs": {
+      "name": "string-width",
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width-cjs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/string-width/node_modules/ansi-regex": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.0.tgz",
+      "integrity": "sha512-TKY5pyBkHyADOPYlRT9Lx6F544mPl0vS5Ew7BJ45hA08Q+t3GjbueLliBWN3sMICk6+y7HdyxSzC4bWS8baBdg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/string-width/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/string.prototype.includes": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/string.prototype.includes/-/string.prototype.includes-2.0.1.tgz",
+      "integrity": "sha512-o7+c9bW6zpAdJHTtujeePODAhkuicdAryFsfVKwA+wGw89wJ4GTY484WTucM9hLtDEOpOvI+aHnzqnC5lHp4Rg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/string.prototype.matchall": {
+      "version": "4.0.12",
+      "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.12.tgz",
+      "integrity": "sha512-6CC9uyBL+/48dYizRf7H7VAYCMCNTBeM78x/VTUe9bFEaxBepPJDa1Ow99LqI/1yF7kuy7Q3cQsYMrcjGUcskA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.6",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.6",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "internal-slot": "^1.1.0",
+        "regexp.prototype.flags": "^1.5.3",
+        "set-function-name": "^2.0.2",
+        "side-channel": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.repeat": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/string.prototype.repeat/-/string.prototype.repeat-1.0.0.tgz",
+      "integrity": "sha512-0u/TldDbKD8bFCQ/4f5+mNRrXwZ8hg2w7ZR8wa16e8z9XpePWl3eGEcUD0OXpEH/VJH/2G3gjUtR3ZOiBe2S/w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.17.5"
+      }
+    },
+    "node_modules/string.prototype.trim": {
+      "version": "1.2.10",
+      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.10.tgz",
+      "integrity": "sha512-Rs66F0P/1kedk5lyYyH9uBzuiI/kNRmwJAR9quK6VOtIpZ2G+hMZd+HQbbv25MgCA6gEffoMZYxlTod4WcdrKA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.2",
+        "define-data-property": "^1.1.4",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-object-atoms": "^1.0.0",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.trimend": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.9.tgz",
+      "integrity": "sha512-G7Ok5C6E/j4SGfyLCloXTrngQIQU3PWtXGst3yM7Bea9FRURf1S42ZHlZZtsNque2FN2PoUhfZXYLNWwEr4dLQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.2",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.trimstart": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.8.tgz",
+      "integrity": "sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi-cjs": {
+      "name": "strip-ansi",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-bom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
+      "integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/strip-json-comments": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+      "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/styled-jsx": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.1.tgz",
+      "integrity": "sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==",
+      "license": "MIT",
+      "dependencies": {
+        "client-only": "0.0.1"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0 || 17.x.x || ^18.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        },
+        "babel-plugin-macros": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/stylelint": {
+      "version": "16.23.1",
+      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-16.23.1.tgz",
+      "integrity": "sha512-dNvDTsKV1U2YtiUDfe9d2gp902veFeo3ecCWdGlmLm2WFrAV0+L5LoOj/qHSBABQwMsZPJwfC4bf39mQm1S5zw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/stylelint"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/stylelint"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@csstools/css-parser-algorithms": "^3.0.5",
+        "@csstools/css-tokenizer": "^3.0.4",
+        "@csstools/media-query-list-parser": "^4.0.3",
+        "@csstools/selector-specificity": "^5.0.0",
+        "@dual-bundle/import-meta-resolve": "^4.1.0",
+        "balanced-match": "^2.0.0",
+        "colord": "^2.9.3",
+        "cosmiconfig": "^9.0.0",
+        "css-functions-list": "^3.2.3",
+        "css-tree": "^3.1.0",
+        "debug": "^4.4.1",
+        "fast-glob": "^3.3.3",
+        "fastest-levenshtein": "^1.0.16",
+        "file-entry-cache": "^10.1.3",
+        "global-modules": "^2.0.0",
+        "globby": "^11.1.0",
+        "globjoin": "^0.1.4",
+        "html-tags": "^3.3.1",
+        "ignore": "^7.0.5",
+        "imurmurhash": "^0.1.4",
+        "is-plain-object": "^5.0.0",
+        "known-css-properties": "^0.37.0",
+        "mathml-tag-names": "^2.1.3",
+        "meow": "^13.2.0",
+        "micromatch": "^4.0.8",
+        "normalize-path": "^3.0.0",
+        "picocolors": "^1.1.1",
+        "postcss": "^8.5.6",
+        "postcss-resolve-nested-selector": "^0.1.6",
+        "postcss-safe-parser": "^7.0.1",
+        "postcss-selector-parser": "^7.1.0",
+        "postcss-value-parser": "^4.2.0",
+        "resolve-from": "^5.0.0",
+        "string-width": "^4.2.3",
+        "supports-hyperlinks": "^3.2.0",
+        "svg-tags": "^1.0.0",
+        "table": "^6.9.0",
+        "write-file-atomic": "^5.0.1"
+      },
+      "bin": {
+        "stylelint": "bin/stylelint.mjs"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      }
+    },
+    "node_modules/stylelint-use-logical-spec": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/stylelint-use-logical-spec/-/stylelint-use-logical-spec-5.0.1.tgz",
+      "integrity": "sha512-UfLB4LW6iG4r3cXxjxkiHQrFyhWFqt8FpNNngD+TyvgMWSokk5TYwTvBHS3atUvZhOogllTOe/PUrGE+4z84AA==",
+      "dev": true,
+      "license": "CC0-1.0",
+      "engines": {
+        "node": ">=8.0.0"
+      },
+      "peerDependencies": {
+        "stylelint": ">=11 < 17"
+      }
+    },
+    "node_modules/stylelint/node_modules/balanced-match": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-2.0.0.tgz",
+      "integrity": "sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/stylelint/node_modules/cosmiconfig": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-9.0.0.tgz",
+      "integrity": "sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "env-paths": "^2.2.1",
+        "import-fresh": "^3.3.0",
+        "js-yaml": "^4.1.0",
+        "parse-json": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/d-fischer"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.9.5"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/stylelint/node_modules/css-tree": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-3.1.0.tgz",
+      "integrity": "sha512-0eW44TGN5SQXU1mWSkKwFstI/22X2bG1nYzZTYMAWjylYURhse752YgbE4Cx46AC+bAvI+/dYTPRk1LqSUnu6w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mdn-data": "2.12.2",
+        "source-map-js": "^1.0.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+      }
+    },
+    "node_modules/stylelint/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/stylelint/node_modules/file-entry-cache": {
+      "version": "10.1.4",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-10.1.4.tgz",
+      "integrity": "sha512-5XRUFc0WTtUbjfGzEwXc42tiGxQHBmtbUG1h9L2apu4SulCGN3Hqm//9D6FAolf8MYNL7f/YlJl9vy08pj5JuA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "flat-cache": "^6.1.13"
+      }
+    },
+    "node_modules/stylelint/node_modules/flat-cache": {
+      "version": "6.1.13",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-6.1.13.tgz",
+      "integrity": "sha512-gmtS2PaUjSPa4zjObEIn4WWliKyZzYljgxODBfxugpK6q6HU9ClXzgCJ+nlcPKY9Bt090ypTOLIFWkV0jbKFjw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cacheable": "^1.10.4",
+        "flatted": "^3.3.3",
+        "hookified": "^1.11.0"
+      }
+    },
+    "node_modules/stylelint/node_modules/ignore": {
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.5.tgz",
+      "integrity": "sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/stylelint/node_modules/mdn-data": {
+      "version": "2.12.2",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.12.2.tgz",
+      "integrity": "sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==",
+      "dev": true,
+      "license": "CC0-1.0"
+    },
+    "node_modules/stylelint/node_modules/resolve-from": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
+      "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/stylelint/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/stylis": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
+      "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==",
+      "license": "MIT"
+    },
+    "node_modules/sucrase": {
+      "version": "3.35.0",
+      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
+      "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "commander": "^4.0.0",
+        "glob": "^10.3.10",
+        "lines-and-columns": "^1.1.6",
+        "mz": "^2.7.0",
+        "pirates": "^4.0.1",
+        "ts-interface-checker": "^0.1.9"
+      },
+      "bin": {
+        "sucrase": "bin/sucrase",
+        "sucrase-node": "bin/sucrase-node"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/sucrase/node_modules/commander": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/supports-hyperlinks": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/supports-hyperlinks/-/supports-hyperlinks-3.2.0.tgz",
+      "integrity": "sha512-zFObLMyZeEwzAoKCyu1B91U79K2t7ApXuQfo8OuxwXLDgcKxuwM+YvcbIhm6QWqz7mHUH1TVytR1PwVVjEuMig==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0",
+        "supports-color": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=14.18"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-hyperlinks?sponsor=1"
+      }
+    },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/svg-tags": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/svg-tags/-/svg-tags-1.0.0.tgz",
+      "integrity": "sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==",
+      "dev": true
+    },
+    "node_modules/svg.draggable.js": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/svg.draggable.js/-/svg.draggable.js-2.2.2.tgz",
+      "integrity": "sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==",
+      "license": "MIT",
+      "dependencies": {
+        "svg.js": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/svg.easing.js": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/svg.easing.js/-/svg.easing.js-2.0.0.tgz",
+      "integrity": "sha512-//ctPdJMGy22YoYGV+3HEfHbm6/69LJUTAqI2/5qBvaNHZ9uUFVC82B0Pl299HzgH13rKrBgi4+XyXXyVWWthA==",
+      "license": "MIT",
+      "dependencies": {
+        "svg.js": ">=2.3.x"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/svg.filter.js": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/svg.filter.js/-/svg.filter.js-2.0.2.tgz",
+      "integrity": "sha512-xkGBwU+dKBzqg5PtilaTb0EYPqPfJ9Q6saVldX+5vCRy31P6TlRCP3U9NxH3HEufkKkpNgdTLBJnmhDHeTqAkw==",
+      "license": "MIT",
+      "dependencies": {
+        "svg.js": "^2.2.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/svg.js": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/svg.js/-/svg.js-2.7.1.tgz",
+      "integrity": "sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA==",
+      "license": "MIT"
+    },
+    "node_modules/svg.pathmorphing.js": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/svg.pathmorphing.js/-/svg.pathmorphing.js-0.1.3.tgz",
+      "integrity": "sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==",
+      "license": "MIT",
+      "dependencies": {
+        "svg.js": "^2.4.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/svg.resize.js": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/svg.resize.js/-/svg.resize.js-1.4.3.tgz",
+      "integrity": "sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==",
+      "license": "MIT",
+      "dependencies": {
+        "svg.js": "^2.6.5",
+        "svg.select.js": "^2.1.2"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/svg.resize.js/node_modules/svg.select.js": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-2.1.2.tgz",
+      "integrity": "sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==",
+      "license": "MIT",
+      "dependencies": {
+        "svg.js": "^2.2.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/svg.select.js": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-3.0.1.tgz",
+      "integrity": "sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==",
+      "license": "MIT",
+      "dependencies": {
+        "svg.js": "^2.6.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/svgo": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/svgo/-/svgo-3.3.2.tgz",
+      "integrity": "sha512-OoohrmuUlBs8B8o6MB2Aevn+pRIH9zDALSR+6hhqVfa6fRwG/Qw9VUMSMW9VNg2CFc/MTIfabtdOVl9ODIJjpw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@trysound/sax": "0.2.0",
+        "commander": "^7.2.0",
+        "css-select": "^5.1.0",
+        "css-tree": "^2.3.1",
+        "css-what": "^6.1.0",
+        "csso": "^5.0.5",
+        "picocolors": "^1.0.0"
+      },
+      "bin": {
+        "svgo": "bin/svgo"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/svgo"
+      }
+    },
+    "node_modules/svgo/node_modules/css-tree": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
+      "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mdn-data": "2.0.30",
+        "source-map-js": "^1.0.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+      }
+    },
+    "node_modules/svgo/node_modules/mdn-data": {
+      "version": "2.0.30",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
+      "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
+      "dev": true,
+      "license": "CC0-1.0"
+    },
+    "node_modules/table": {
+      "version": "6.9.0",
+      "resolved": "https://registry.npmjs.org/table/-/table-6.9.0.tgz",
+      "integrity": "sha512-9kY+CygyYM6j02t5YFHbNz2FN5QmYGv9zAjVp4lCDjlCw7amdckXlEt/bjMhUIfj4ThGRE4gCUH5+yGnNuPo5A==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "ajv": "^8.0.1",
+        "lodash.truncate": "^4.4.2",
+        "slice-ansi": "^4.0.0",
+        "string-width": "^4.2.3",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/table/node_modules/ajv": {
+      "version": "8.17.1",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
+      "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3",
+        "fast-uri": "^3.0.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/table/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/table/node_modules/json-schema-traverse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/table/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/tailwindcss": {
+      "version": "3.4.17",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz",
+      "integrity": "sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "arg": "^5.0.2",
+        "chokidar": "^3.6.0",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.3.2",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "jiti": "^1.21.6",
+        "lilconfig": "^3.1.3",
+        "micromatch": "^4.0.8",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.1.1",
+        "postcss": "^8.4.47",
+        "postcss-import": "^15.1.0",
+        "postcss-js": "^4.0.1",
+        "postcss-load-config": "^4.0.2",
+        "postcss-nested": "^6.2.0",
+        "postcss-selector-parser": "^6.1.2",
+        "resolve": "^1.22.8",
+        "sucrase": "^3.35.0"
+      },
+      "bin": {
+        "tailwind": "lib/cli.js",
+        "tailwindcss": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/tailwindcss-logical": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/tailwindcss-logical/-/tailwindcss-logical-3.0.1.tgz",
+      "integrity": "sha512-mv585RJfzS/Cu9Rpl2M5H+JSOdU3qjLHzKMtg63oD5lXfehRJpldbEqll20Obvlexq0Cmyg86l7cmb/I5hEutg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "tailwindcss": "3.3.1"
+      }
+    },
+    "node_modules/tailwindcss-logical/node_modules/lilconfig": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
+      "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/tailwindcss-logical/node_modules/postcss-import": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-14.1.0.tgz",
+      "integrity": "sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
+    "node_modules/tailwindcss-logical/node_modules/postcss-load-config": {
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz",
+      "integrity": "sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "lilconfig": "^2.0.5",
+        "yaml": "^1.10.2"
+      },
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": ">=8.0.9",
+        "ts-node": ">=9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "postcss": {
+          "optional": true
+        },
+        "ts-node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/tailwindcss-logical/node_modules/postcss-nested": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.0.tgz",
+      "integrity": "sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.10"
+      },
+      "engines": {
+        "node": ">=12.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
+      }
+    },
+    "node_modules/tailwindcss-logical/node_modules/postcss-selector-parser": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
+      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/tailwindcss-logical/node_modules/tailwindcss": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.1.tgz",
+      "integrity": "sha512-Vkiouc41d4CEq0ujXl6oiGFQ7bA3WEhUZdTgXAhtKxSy49OmKs8rEfQmupsfF0IGW8fv2iQkp1EVUuapCFrZ9g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "arg": "^5.0.2",
+        "chokidar": "^3.5.3",
+        "color-name": "^1.1.4",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.2.12",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "jiti": "^1.17.2",
+        "lilconfig": "^2.0.6",
+        "micromatch": "^4.0.5",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.0.0",
+        "postcss": "^8.0.9",
+        "postcss-import": "^14.1.0",
+        "postcss-js": "^4.0.0",
+        "postcss-load-config": "^3.1.4",
+        "postcss-nested": "6.0.0",
+        "postcss-selector-parser": "^6.0.11",
+        "postcss-value-parser": "^4.2.0",
+        "quick-lru": "^5.1.1",
+        "resolve": "^1.22.1",
+        "sucrase": "^3.29.0"
+      },
+      "bin": {
+        "tailwind": "lib/cli.js",
+        "tailwindcss": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=12.13.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.9"
+      }
+    },
+    "node_modules/tailwindcss/node_modules/postcss-selector-parser": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
+      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/tar": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-6.2.1.tgz",
+      "integrity": "sha512-DZ4yORTwrbTj/7MZYq2w+/ZFdI6OZ/f9SFHR+71gIVUZhOQPHzVCLpvRnPgyaMpfWxxk/4ONva3GQSyNIKRv6A==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "chownr": "^2.0.0",
+        "fs-minipass": "^2.0.0",
+        "minipass": "^5.0.0",
+        "minizlib": "^2.1.1",
+        "mkdirp": "^1.0.3",
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/tar/node_modules/minipass": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-5.0.0.tgz",
+      "integrity": "sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/text-table": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
+      "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/thenify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0"
+      }
+    },
+    "node_modules/thenify-all": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "thenify": ">= 3.1.0 < 4"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/throttle-debounce": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-3.0.1.tgz",
+      "integrity": "sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/tinyexec": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-1.0.1.tgz",
+      "integrity": "sha512-5uC6DDlmeqiOwCPmK9jMSdOuZTh8bU39Ys6yidB+UTt5hfZUPGAypSgFRiEp+jbi9qH40BLDvy85jIU88wKSqw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.14",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.14.tgz",
+      "integrity": "sha512-tX5e7OM1HnYr2+a2C/4V0htOcSQcoSTH9KgJnVvNm5zm/cyEWKJ7j7YutsH9CxMdtOkkLFy2AHrMci9IM8IPZQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.4.4",
+        "picomatch": "^4.0.2"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/tinyglobby/node_modules/picomatch": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
+      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/toggle-selection": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
+      "integrity": "sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==",
+      "license": "MIT"
+    },
+    "node_modules/ts-api-utils": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.1.0.tgz",
+      "integrity": "sha512-CUgTZL1irw8u29bzrOD/nH85jqyc74D6SshFgujOIA7osm2Rz7dYH77agkx7H4FBNxDq7Cjf+IjaX/8zwFW+ZQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.12"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4"
+      }
+    },
+    "node_modules/ts-easing": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/ts-easing/-/ts-easing-0.2.0.tgz",
+      "integrity": "sha512-Z86EW+fFFh/IFB1fqQ3/+7Zpf9t2ebOAxNI/V6Wo7r5gqiqtxmgTlQ1qbqQcjLKYeSHPTsEmvlJUDg/EuL0uHQ==",
+      "license": "Unlicense"
+    },
+    "node_modules/ts-interface-checker": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/tsconfig-paths": {
+      "version": "3.15.0",
+      "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz",
+      "integrity": "sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/json5": "^0.0.29",
+        "json5": "^1.0.2",
+        "minimist": "^1.2.6",
+        "strip-bom": "^3.0.0"
+      }
+    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
+    "node_modules/tsx": {
+      "version": "4.20.5",
+      "resolved": "https://registry.npmjs.org/tsx/-/tsx-4.20.5.tgz",
+      "integrity": "sha512-+wKjMNU9w/EaQayHXb7WA7ZaHY6hN8WgfvHNQ3t1PnU91/7O8TcTnIhCDYTZwnt8JsO9IBqZ30Ln1r7pPF52Aw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "esbuild": "~0.25.0",
+        "get-tsconfig": "^4.7.5"
+      },
+      "bin": {
+        "tsx": "dist/cli.mjs"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      }
+    },
+    "node_modules/type-check": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
+      "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "prelude-ls": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/type-fest": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
+      "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
+      "dev": true,
+      "license": "(MIT OR CC0-1.0)",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/typed-array-buffer": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.3.tgz",
+      "integrity": "sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "is-typed-array": "^1.1.14"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/typed-array-byte-length": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-length/-/typed-array-byte-length-1.0.3.tgz",
+      "integrity": "sha512-BaXgOuIxz8n8pIq3e7Atg/7s+DpiYrxn4vdot3w9KbnBhcRQq6o3xemQdIfynqSeXeDrF32x+WvfzmOjPiY9lg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "for-each": "^0.3.3",
+        "gopd": "^1.2.0",
+        "has-proto": "^1.2.0",
+        "is-typed-array": "^1.1.14"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/typed-array-byte-offset": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-offset/-/typed-array-byte-offset-1.0.4.tgz",
+      "integrity": "sha512-bTlAFB/FBYMcuX81gbL4OcpH5PmlFHqlCCpAl8AlEzMz5k53oNDvN8p1PNOWLEmI2x4orp3raOFB51tv9X+MFQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "for-each": "^0.3.3",
+        "gopd": "^1.2.0",
+        "has-proto": "^1.2.0",
+        "is-typed-array": "^1.1.15",
+        "reflect.getprototypeof": "^1.0.9"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/typed-array-length": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.7.tgz",
+      "integrity": "sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "for-each": "^0.3.3",
+        "gopd": "^1.0.1",
+        "is-typed-array": "^1.1.13",
+        "possible-typed-array-names": "^1.0.0",
+        "reflect.getprototypeof": "^1.0.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/typescript": {
+      "version": "5.9.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.2.tgz",
+      "integrity": "sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/ufo": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.6.1.tgz",
+      "integrity": "sha512-9a4/uxlTWJ4+a5i0ooc1rU7C7YOw3wT+UGqdeNNHWnOF9qcMBgLRS+4IYUqbczewFx4mLEig6gawh7X6mFlEkA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/unbox-primitive": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.1.0.tgz",
+      "integrity": "sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-bigints": "^1.0.2",
+        "has-symbols": "^1.1.0",
+        "which-boxed-primitive": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/undici": {
+      "version": "6.21.3",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-6.21.3.tgz",
+      "integrity": "sha512-gBLkYIlEnSp8pFbT64yFgGE6UIB9tAkhukC23PmMDCe5Nd+cRqKxSjw5y54MK2AZMgZfJWMaNE4nYUHgi1XEOw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.17"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "7.10.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.10.0.tgz",
+      "integrity": "sha512-t5Fy/nfn+14LuOc2KNYg75vZqClpAiqscVvMygNnlsHBFpSXdJaYtXMcdNLpl/Qvc3P2cB3s6lOV51nqsFq4ag==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/unrs-resolver": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/unrs-resolver/-/unrs-resolver-1.11.1.tgz",
+      "integrity": "sha512-bSjt9pjaEBnNiGgc9rUiHGKv5l4/TGzDmYw3RhnkJGtLhbnnA/5qJj7x3dNDCRx/PJxu774LlH8lCOlB4hEfKg==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "dependencies": {
+        "napi-postinstall": "^0.3.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/unrs-resolver"
+      },
+      "optionalDependencies": {
+        "@unrs/resolver-binding-android-arm-eabi": "1.11.1",
+        "@unrs/resolver-binding-android-arm64": "1.11.1",
+        "@unrs/resolver-binding-darwin-arm64": "1.11.1",
+        "@unrs/resolver-binding-darwin-x64": "1.11.1",
+        "@unrs/resolver-binding-freebsd-x64": "1.11.1",
+        "@unrs/resolver-binding-linux-arm-gnueabihf": "1.11.1",
+        "@unrs/resolver-binding-linux-arm-musleabihf": "1.11.1",
+        "@unrs/resolver-binding-linux-arm64-gnu": "1.11.1",
+        "@unrs/resolver-binding-linux-arm64-musl": "1.11.1",
+        "@unrs/resolver-binding-linux-ppc64-gnu": "1.11.1",
+        "@unrs/resolver-binding-linux-riscv64-gnu": "1.11.1",
+        "@unrs/resolver-binding-linux-riscv64-musl": "1.11.1",
+        "@unrs/resolver-binding-linux-s390x-gnu": "1.11.1",
+        "@unrs/resolver-binding-linux-x64-gnu": "1.11.1",
+        "@unrs/resolver-binding-linux-x64-musl": "1.11.1",
+        "@unrs/resolver-binding-wasm32-wasi": "1.11.1",
+        "@unrs/resolver-binding-win32-arm64-msvc": "1.11.1",
+        "@unrs/resolver-binding-win32-ia32-msvc": "1.11.1",
+        "@unrs/resolver-binding-win32-x64-msvc": "1.11.1"
+      }
+    },
+    "node_modules/update-browserslist-db": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz",
+      "integrity": "sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==",
+      "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/uri-js": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
+      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "punycode": "^2.1.0"
+      }
+    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/whatwg-encoding": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-3.1.1.tgz",
+      "integrity": "sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "iconv-lite": "0.6.3"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/whatwg-mimetype": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-4.0.0.tgz",
+      "integrity": "sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "node-which": "bin/node-which"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/which-boxed-primitive": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.1.1.tgz",
+      "integrity": "sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-bigint": "^1.1.0",
+        "is-boolean-object": "^1.2.1",
+        "is-number-object": "^1.1.1",
+        "is-string": "^1.1.1",
+        "is-symbol": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-builtin-type": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/which-builtin-type/-/which-builtin-type-1.2.1.tgz",
+      "integrity": "sha512-6iBczoX+kDQ7a3+YJBnh3T+KZRxM/iYNPXicqk66/Qfm1b93iu+yOImkg0zHbj5LNOcNv1TEADiZ0xa34B4q6Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "function.prototype.name": "^1.1.6",
+        "has-tostringtag": "^1.0.2",
+        "is-async-function": "^2.0.0",
+        "is-date-object": "^1.1.0",
+        "is-finalizationregistry": "^1.1.0",
+        "is-generator-function": "^1.0.10",
+        "is-regex": "^1.2.1",
+        "is-weakref": "^1.0.2",
+        "isarray": "^2.0.5",
+        "which-boxed-primitive": "^1.1.0",
+        "which-collection": "^1.0.2",
+        "which-typed-array": "^1.1.16"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-collection": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/which-collection/-/which-collection-1.0.2.tgz",
+      "integrity": "sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-map": "^2.0.3",
+        "is-set": "^2.0.3",
+        "is-weakmap": "^2.0.2",
+        "is-weakset": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-typed-array": {
+      "version": "1.1.19",
+      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.19.tgz",
+      "integrity": "sha512-rEvr90Bck4WZt9HHFC4DJMsjvu7x+r6bImz0/BrbWb7A2djJ8hnZMrWnHo9F8ssv0OMErasDhftrfROTyqSDrw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "for-each": "^0.3.5",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/word-wrap": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
+      "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/wrap-ansi": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
+      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^6.1.0",
+        "string-width": "^5.0.1",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs": {
+      "name": "wrap-ansi",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/ansi-regex": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.0.tgz",
+      "integrity": "sha512-TKY5pyBkHyADOPYlRT9Lx6F544mPl0vS5Ew7BJ45hA08Q+t3GjbueLliBWN3sMICk6+y7HdyxSzC4bWS8baBdg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/ansi-styles": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
+      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/write-file-atomic": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-5.0.1.tgz",
+      "integrity": "sha512-+QU2zd6OTD8XWIJCbffaiQeH9U73qIqafo1x6V1snCWYGJf6cVE0cDR4D8xRzcEnfI21IFrUPzPGtcPf8AC+Rw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "imurmurhash": "^0.1.4",
+        "signal-exit": "^4.0.1"
+      },
+      "engines": {
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+      }
+    },
+    "node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/yaml": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/yauzl": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.10.0.tgz",
+      "integrity": "sha512-p4a9I6X6nu6IhoGmBqAcbJy1mlC4j27vEPZX9F4L4/vZT3Lyq1VkFHw/V/PUcB9Buo+DG3iHkT0x3Qya58zc3g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "buffer-crc32": "~0.2.3",
+        "fd-slicer": "~1.1.0"
+      }
+    },
+    "node_modules/yocto-queue": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
+      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    }
+  }
+}
diff --git a/javascript-version/package.json b/javascript-version/package.json
index ce7eddabf..bf44faf21 100644
--- a/javascript-version/package.json
+++ b/javascript-version/package.json
@@ -4,23 +4,26 @@
   "license": "Commercial",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "cross-env NODE_OPTIONS=--no-deprecation NEXT_TELEMETRY_DISABLED=1 next dev",
+    "dev:win": "set NODE_OPTIONS=--no-deprecation && set NEXT_TELEMETRY_DISABLED=1 && next dev",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
     "lint:fix": "next lint --fix",
     "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\"",
-    "build:icons": "tsx src/assets/iconify-icons/bundle-icons-css.js",
+    "build:icons": "node src/assets/iconify-icons/bundle-icons-css.cjs",
     "postinstall": "npm run build:icons"
   },
   "dependencies": {
     "@emotion/cache": "^11.11.0",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
+    "@mui/icons-material": "^7.3.1",
     "@mui/lab": "5.0.0-alpha.170",
     "@mui/material": "^5.15.19",
     "@mui/material-nextjs": "^5.15.11",
     "apexcharts": "^3.49.1",
+    "canvas-confetti": "^1.9.3",
     "classnames": "^2.5.1",
     "next": "^14.2.3",
     "react": "^18.3.1",
@@ -28,13 +31,15 @@
     "react-dom": "^18.3.1",
     "react-perfect-scrollbar": "^1.5.8",
     "react-use": "^17.5.0",
-    "server-only": "^0.0.1"
+    "server-only": "^0.0.1",
+    "jsqr": "^1.4.0"
   },
   "devDependencies": {
     "@iconify/json": "^2.2.218",
     "@iconify/tools": "^4.0.4",
     "@iconify/utils": "^2.1.24",
     "autoprefixer": "^10.4.19",
+    "cross-env": "^10.0.0",
     "eslint": "^8.57.0",
     "eslint-config-next": "^14.2.3",
     "eslint-config-prettier": "^9.1.0",
diff --git a/javascript-version/pnpm-lock.yaml b/javascript-version/pnpm-lock.yaml
index 1649da902..662df5ed7 100644
--- a/javascript-version/pnpm-lock.yaml
+++ b/javascript-version/pnpm-lock.yaml
@@ -20,6 +20,9 @@ importers:
       '@emotion/styled':
         specifier: ^11.11.5
         version: 11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)
+      '@mui/icons-material':
+        specifier: ^7.3.1
+        version: 7.3.1(@mui/material@5.15.20(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)
       '@mui/lab':
         specifier: 5.0.0-alpha.170
         version: 5.0.0-alpha.170(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@5.15.20(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -32,9 +35,15 @@ importers:
       apexcharts:
         specifier: ^3.49.1
         version: 3.49.1
+      canvas-confetti:
+        specifier: ^1.9.3
+        version: 1.9.3
       classnames:
         specifier: ^2.5.1
         version: 2.5.1
+      jsqr:
+        specifier: ^1.4.0
+        version: 1.4.0
       next:
         specifier: ^14.2.3
         version: 14.2.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -69,6 +78,9 @@ importers:
       autoprefixer:
         specifier: ^10.4.19
         version: 10.4.19(postcss@8.4.38)
+      cross-env:
+        specifier: ^10.0.0
+        version: 10.0.0
       eslint:
         specifier: ^8.57.0
         version: 8.57.0
@@ -167,6 +179,10 @@ packages:
     resolution: {integrity: sha512-UwgBRMjJP+xv857DCngvqXI3Iq6J4v0wXmwc6sapg+zyhbwmQX67LUEFrkK5tbyJ30jGuG3ZvWpBiB9LCy1kWw==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/runtime@7.28.3':
+    resolution: {integrity: sha512-9uIQ10o0WGdpP6GDhXcdOJPJuDgFtIDtN/9+ArJQ2NAfAmiuhTQdzkaTGR33v43GYS2UrSA0eX2pPPHoFVvpxA==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/template@7.24.7':
     resolution: {integrity: sha512-jYqfPrU9JTF0PmPy1tLYHW4Mp4KlgxJD9l2nP9fD6yT/ICi554DmrWBAEYpIelzjHf1msDP3PxJIRt/nFNfBig==}
     engines: {node: '>=6.9.0'}
@@ -259,6 +275,9 @@ packages:
   '@emotion/weak-memoize@0.3.1':
     resolution: {integrity: sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww==}
 
+  '@epic-web/invariant@1.0.0':
+    resolution: {integrity: sha512-lrTPqgvfFQtR/eY/qkIzp98OGdNJu0m5ji3q/nJI8v3SXkRKEnWiOxMmbvcSoAIzv/cGiuvRy57k4suKQSAdwA==}
+
   '@esbuild/aix-ppc64@0.21.5':
     resolution: {integrity: sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==}
     engines: {node: '>=12'}
@@ -491,6 +510,17 @@ packages:
   '@mui/core-downloads-tracker@5.15.20':
     resolution: {integrity: sha512-DoL2ppgldL16utL8nNyj/P12f8mCNdx/Hb/AJnX9rLY4b52hCMIx1kH83pbXQ6uMy6n54M3StmEbvSGoj2OFuA==}
 
+  '@mui/icons-material@7.3.1':
+    resolution: {integrity: sha512-upzCtG6awpL6noEZlJ5Z01khZ9VnLNLaj7tb6iPbN6G97eYfUTs8e9OyPKy3rEms3VQWmVBfri7jzeaRxdFIzA==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      '@mui/material': ^7.3.1
+      '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
+      react: ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@mui/lab@5.0.0-alpha.170':
     resolution: {integrity: sha512-0bDVECGmrNjd3+bLdcLiwYZ0O4HP5j5WSQm5DV6iA/Z9kr8O6AnvZ1bv9ImQbbX7Gj3pX4o43EKwCutj3EQxQg==}
     engines: {node: '>=12.0.0'}
@@ -939,6 +969,9 @@ packages:
   caniuse-lite@1.0.30001636:
     resolution: {integrity: sha512-bMg2vmr8XBsbL6Lr0UHXy/21m84FTxDLWn2FSqMd5PrlbMxwJlQnC2YWYxVgp66PZE+BBNF2jYQUBKCo1FDeZg==}
 
+  canvas-confetti@1.9.3:
+    resolution: {integrity: sha512-rFfTURMvmVEX1gyXFgn5QMn81bYk70qa0HLzcIOSVEyl57n6o9ItHeBtUSWdvKAPY0xlvBHno4/v3QPrT83q9g==}
+
   chalk@2.4.2:
     resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==}
     engines: {node: '>=4'}
@@ -1025,10 +1058,19 @@ packages:
       typescript:
         optional: true
 
+  cross-env@10.0.0:
+    resolution: {integrity: sha512-aU8qlEK/nHYtVuN4p7UQgAwVljzMg8hB4YK5ThRqD2l/ziSnryncPNn7bMLt5cFYsKVKBh8HqLqyCoTupEUu7Q==}
+    engines: {node: '>=20'}
+    hasBin: true
+
   cross-spawn@7.0.3:
     resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
     engines: {node: '>= 8'}
 
+  cross-spawn@7.0.6:
+    resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
+    engines: {node: '>= 8'}
+
   css-functions-list@3.2.2:
     resolution: {integrity: sha512-c+N0v6wbKVxTu5gOBBFkr9BEdBWaqqjQeiJ8QvSRIJOf+UxlJh930m8e6/WNeODIK0mYLFkoONrnj16i2EcvfQ==}
     engines: {node: '>=12 || >=16'}
@@ -1769,6 +1811,9 @@ packages:
     resolution: {integrity: sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==}
     hasBin: true
 
+  jsqr@1.4.0:
+    resolution: {integrity: sha512-dxLob7q65Xg2DvstYkRpkYtmKm2sPJ9oFhrhmudT1dZvNFFTlroai3AWSpLey/w5vMcLBXRgOJsbXpdN9HzU/A==}
+
   jsx-ast-utils@3.3.5:
     resolution: {integrity: sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==}
     engines: {node: '>=4.0'}
@@ -2793,6 +2838,8 @@ snapshots:
     dependencies:
       regenerator-runtime: 0.14.1
 
+  '@babel/runtime@7.28.3': {}
+
   '@babel/template@7.24.7':
     dependencies:
       '@babel/code-frame': 7.24.7
@@ -2920,6 +2967,8 @@ snapshots:
 
   '@emotion/weak-memoize@0.3.1': {}
 
+  '@epic-web/invariant@1.0.0': {}
+
   '@esbuild/aix-ppc64@0.21.5':
     optional: true
 
@@ -3118,6 +3167,14 @@ snapshots:
 
   '@mui/core-downloads-tracker@5.15.20': {}
 
+  '@mui/icons-material@7.3.1(@mui/material@5.15.20(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.28.3
+      '@mui/material': 5.15.20(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.3
+
   '@mui/lab@5.0.0-alpha.170(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@5.15.20(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.24.7
@@ -3575,6 +3632,8 @@ snapshots:
 
   caniuse-lite@1.0.30001636: {}
 
+  canvas-confetti@1.9.3: {}
+
   chalk@2.4.2:
     dependencies:
       ansi-styles: 3.2.1
@@ -3674,12 +3733,23 @@ snapshots:
     optionalDependencies:
       typescript: 5.4.5
 
+  cross-env@10.0.0:
+    dependencies:
+      '@epic-web/invariant': 1.0.0
+      cross-spawn: 7.0.6
+
   cross-spawn@7.0.3:
     dependencies:
       path-key: 3.1.1
       shebang-command: 2.0.0
       which: 2.0.2
 
+  cross-spawn@7.0.6:
+    dependencies:
+      path-key: 3.1.1
+      shebang-command: 2.0.0
+      which: 2.0.2
+
   css-functions-list@3.2.2: {}
 
   css-in-js-utils@3.1.0:
@@ -3964,7 +4034,7 @@ snapshots:
       '@typescript-eslint/parser': 7.2.0(eslint@8.57.0)(typescript@5.4.5)
       eslint: 8.57.0
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0)
+      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0)
       eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)
       eslint-plugin-jsx-a11y: 6.8.0(eslint@8.57.0)
       eslint-plugin-react: 7.34.2(eslint@8.57.0)
@@ -3987,12 +4057,12 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0):
+  eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0):
     dependencies:
       debug: 4.3.5
       enhanced-resolve: 5.17.0
       eslint: 8.57.0
-      eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0)
+      eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0)
       eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)
       fast-glob: 3.3.2
       get-tsconfig: 4.7.5
@@ -4004,14 +4074,14 @@ snapshots:
       - eslint-import-resolver-webpack
       - supports-color
 
-  eslint-module-utils@2.8.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0):
+  eslint-module-utils@2.8.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
       '@typescript-eslint/parser': 7.2.0(eslint@8.57.0)(typescript@5.4.5)
       eslint: 8.57.0
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0)
+      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0)
     transitivePeerDependencies:
       - supports-color
 
@@ -4025,7 +4095,7 @@ snapshots:
       doctrine: 2.1.0
       eslint: 8.57.0
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0)
+      eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0)
       hasown: 2.0.2
       is-core-module: 2.13.1
       is-glob: 4.0.3
@@ -4580,6 +4650,8 @@ snapshots:
     dependencies:
       minimist: 1.2.8
 
+  jsqr@1.4.0: {}
+
   jsx-ast-utils@3.3.5:
     dependencies:
       array-includes: 3.1.8
diff --git a/javascript-version/public/images/pages/CameraNotFound.png b/javascript-version/public/images/pages/CameraNotFound.png
new file mode 100644
index 000000000..83176ae33
Binary files /dev/null and b/javascript-version/public/images/pages/CameraNotFound.png differ
diff --git "a/javascript-version/public/images/pages/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210 2025-12-22 164112.png" "b/javascript-version/public/images/pages/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210 2025-12-22 164112.png"
new file mode 100644
index 000000000..ef8cdb005
Binary files /dev/null and "b/javascript-version/public/images/pages/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210 2025-12-22 164112.png" differ
diff --git a/javascript-version/public/images/projectpic/image.png b/javascript-version/public/images/projectpic/image.png
new file mode 100644
index 000000000..a96ccade5
Binary files /dev/null and b/javascript-version/public/images/projectpic/image.png differ
diff --git a/javascript-version/public/machine-signage/machine-api.js b/javascript-version/public/machine-signage/machine-api.js
new file mode 100644
index 000000000..04282fe9d
--- /dev/null
+++ b/javascript-version/public/machine-signage/machine-api.js
@@ -0,0 +1,166 @@
+/*
+ * Machine API client for legacy signage pages
+ * - Fetches /api/machines/{id} (id defaults to 1)
+ * - Exposes a global `window.MachineAPI` UMD-style for easy use in plain HTML
+ * - Includes 5s timeout and basic error handling
+ *
+ * Usage in HTML:
+ *   <script src="/machine-signage/machine-api.js"></script>
+ *   <script>
+ *     MachineAPI.getMachine().then(console.log).catch(console.error)
+ *   </script>
+ */
+(function (global) {
+    'use strict';
+
+    var DEFAULT_ID = 1;
+    var DEFAULT_TIMEOUT_MS = 5000; // 5 seconds
+
+    /**
+     * Build API URL. Per repo rules, clients still request `/api/...` even with basePath.
+     * @param {number|string} id
+     * @returns {string}
+     */
+    function buildUrl(id) {
+        return '/api/machines/' + String(id);
+    }
+
+    /**
+     * Build logs API URL: /api/machines/{id}/logs?page=1&limit=10
+     * @param {number|string} id
+     * @param {{ page?: number, limit?: number }} [params]
+     * @returns {string}
+     */
+    function buildLogsUrl(id, params) {
+        params = params || {};
+        var page = params.page == null ? 1 : params.page;
+        var limit = params.limit == null ? 10 : params.limit;
+        return '/api/machines/' + String(id) + '/logs?page=' + encodeURIComponent(String(page)) + '&limit=' + encodeURIComponent(String(limit));
+    }
+
+    // Inspection APIs
+    function buildCurrentLotUrl() {
+        return '/api/ingress/inspection/current-lot';
+    }
+
+    function buildLotShotsUrl(lotId) {
+        return '/api/inspections/lots/' + encodeURIComponent(String(lotId)) + '/shots';
+    }
+
+    /**
+     * Fetch JSON with timeout and helpful errors
+     * @param {string} url
+     * @param {number} timeoutMs
+     * @returns {Promise<any>}
+     */
+    function fetchJson(url, timeoutMs) {
+        var controller = new AbortController();
+        var timer = setTimeout(function () { controller.abort(); }, timeoutMs);
+
+        return fetch(url, { signal: controller.signal, headers: { 'Accept': 'application/json' } })
+            .then(function (res) {
+                clearTimeout(timer);
+                if (!res.ok) {
+                    var err = new Error('API error: ' + res.status + ' ' + res.statusText);
+                    err.status = res.status;
+                    throw err;
+                }
+                return res.json();
+            })
+            .catch(function (err) {
+                // Normalize AbortError to a clearer message
+                if (err && (err.name === 'AbortError' || err.code === 'ABORT_ERR')) {
+                    var e = new Error('API timeout after ' + timeoutMs + 'ms');
+                    e.code = 'TIMEOUT';
+                    throw e;
+                }
+                throw err;
+            });
+    }
+
+    /**
+     * Get machine data
+     * レスポンス例:
+     * {
+     *   "machine_id": 1,
+     *   "machine_name": "半自動表層バネどめ機",
+     *   "started_at": "2025-10-01T10:04:56Z",
+     *   "today_uptime_seconds": 48650,
+     *   "today_uptime_hms": "13:30:50",
+     *   "today_production_count": 19,
+     *   "last_inspection_date": "2025-10-24",
+     *   "next_inspection_date": "2026-01-22",
+     *   "inspection_interval_days": 90
+     * }
+     * @param {number} [id=1]
+     * @param {{ timeoutMs?: number }} [opts]
+     * @returns {Promise<object>}
+     */
+    function getMachine(id, opts) {
+        if (id == null) id = DEFAULT_ID;
+        opts = opts || {};
+        var timeoutMs = typeof opts.timeoutMs === 'number' ? opts.timeoutMs : DEFAULT_TIMEOUT_MS;
+        var url = buildUrl(id);
+        return fetchJson(url, timeoutMs);
+    }
+
+    /**
+     * Get machine logs
+     * レスポンス例はユーザー提供に準拠（{ total_pages, current_page, logs: [...] }）
+     * @param {number} [id=1]
+     * @param {{ page?: number, limit?: number, timeoutMs?: number }} [opts]
+     * @returns {Promise<{ total_pages:number, current_page:number, logs:Array<any> }>}
+     */
+    function getMachineLogs(id, opts) {
+        if (id == null) id = DEFAULT_ID;
+        opts = opts || {};
+        var timeoutMs = typeof opts.timeoutMs === 'number' ? opts.timeoutMs : DEFAULT_TIMEOUT_MS;
+        var url = buildLogsUrl(id, { page: opts.page == null ? 1 : opts.page, limit: opts.limit == null ? 10 : opts.limit });
+        return fetchJson(url, timeoutMs);
+    }
+
+    /**
+     * Get current lot id for inspections
+     * returns: { lot_id: string }
+     */
+    function getCurrentLot(opts) {
+        opts = opts || {};
+        var timeoutMs = typeof opts.timeoutMs === 'number' ? opts.timeoutMs : DEFAULT_TIMEOUT_MS;
+        var url = buildCurrentLotUrl();
+        return fetchJson(url, timeoutMs);
+    }
+
+    /**
+     * Get lot shots detail
+     * returns: {
+     *   lot_id: string,
+     *   captured_at?: string, // ISO-8601 タイムスタンプ (仕様追加)
+     *   shots: Array<{ camera_id:string, status:string, details?:string|null, image_path?:string }>
+     * }
+     */
+    function getLotShots(lotId, opts) {
+        opts = opts || {};
+        var timeoutMs = typeof opts.timeoutMs === 'number' ? opts.timeoutMs : DEFAULT_TIMEOUT_MS;
+        var url = buildLotShotsUrl(lotId);
+        return fetchJson(url, timeoutMs);
+    }
+
+    // Minimal utility: safe accessor for h:m:s formatting if needed later
+    function secondsToHMS(seconds) {
+        seconds = Math.max(0, Math.floor(Number(seconds) || 0));
+        var h = Math.floor(seconds / 3600);
+        var m = Math.floor((seconds % 3600) / 60);
+        var s = seconds % 60;
+        function pad(n) { return (n < 10 ? '0' : '') + n; }
+        return pad(h) + ':' + pad(m) + ':' + pad(s);
+    }
+
+    // UMD-style export
+    var api = { getMachine: getMachine, getMachineLogs: getMachineLogs, getCurrentLot: getCurrentLot, getLotShots: getLotShots, _secondsToHMS: secondsToHMS };
+
+    if (typeof module !== 'undefined' && module.exports) {
+        module.exports = api;
+    } else {
+        global.MachineAPI = api;
+    }
+})(typeof window !== 'undefined' ? window : this);
diff --git a/javascript-version/public/machine-signage/signage.js b/javascript-version/public/machine-signage/signage.js
new file mode 100644
index 000000000..8d8477b3f
--- /dev/null
+++ b/javascript-version/public/machine-signage/signage.js
@@ -0,0 +1,474 @@
+(function () {
+    // ---------- Utilities ----------
+    function $(id) {
+        return document.getElementById(id);
+    }
+    function setText(id, text) {
+        var el = $(id);
+        if (el) el.textContent = text;
+    }
+    function setHTML(id, html) {
+        var el = $(id);
+        if (el) el.innerHTML = html;
+    }
+    function pad2(n) {
+        n = Number(n) || 0;
+        return (n < 10 ? '0' : '') + Math.floor(n);
+    }
+    function formatDateYMD(iso) {
+        if (!iso) return '--/--/--';
+        return String(iso).replace(/-/g, '/');
+    }
+    function formatNumber(n) {
+        var num = Number(n) || 0;
+        try {
+            return num.toLocaleString('ja-JP');
+        } catch (e) {
+            return String(num);
+        }
+    }
+    function formatHMFromSeconds(seconds) {
+        var sec = Math.max(0, Math.floor(Number(seconds) || 0));
+        var d = Math.floor(sec / 86400);
+        var h = Math.floor((sec % 86400) / 3600);
+        var m = Math.floor((sec % 3600) / 60);
+        var s = sec % 60;
+        var parts = [];
+        if (d) parts.push(d + '<span class="text-3xl">d</span>');
+        parts.push(h + '<span class="text-3xl">h</span>');
+        parts.push(m + '<span class="text-3xl">m</span>');
+        parts.push('<span class="text-2xl">' + String(s).padStart(2, '0') + '</span><span class="text-2xl">s</span>');
+        return parts.join(' ');
+    }
+
+    // ---------- Clock ----------
+    function updateClock() {
+        const n = new Date();
+        const t = $('time');
+        const e = $('date');
+        const hh = String(n.getHours()).padStart(2, '0');
+        const mm = String(n.getMinutes()).padStart(2, '0');
+        const ss = String(n.getSeconds()).padStart(2, '0');
+        const y = n.getFullYear();
+        const mo = String(n.getMonth() + 1).padStart(2, '0');
+        const d = String(n.getDate()).padStart(2, '0');
+        const wk = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'][n.getDay()];
+        if (t) t.textContent = `${hh}:${mm}`;
+        if (e) e.textContent = `${y}/${mo}/${d} (${wk})`;
+        return `${hh}:${mm}:${ss}`;
+    }
+    setInterval(updateClock, 1000);
+    updateClock();
+
+    // ---------- Machine left panel (API) ----------
+    var uptimeTimer = null;
+    function startUptimeSince(startIso) {
+        var startMs = Date.parse(startIso);
+        if (!isFinite(startMs)) return;
+        function tick() {
+            var diffSec = Math.max(0, Math.floor((Date.now() - startMs) / 1000));
+            var h = Math.floor(diffSec / 3600);
+            var m = Math.floor((diffSec % 3600) / 60);
+            var s = diffSec % 60;
+            setText('uptime-since-start', '起動から: ' + pad2(h) + ':' + pad2(m) + ':' + pad2(s));
+            setHTML('today-uptime', formatHMFromSeconds(diffSec));
+        }
+        try { if (uptimeTimer) clearInterval(uptimeTimer); } catch (e) { }
+        tick();
+        uptimeTimer = setInterval(tick, 1000);
+    }
+
+    if (window.MachineAPI && typeof window.MachineAPI.getMachine === 'function') {
+        window.MachineAPI.getMachine(1, { timeoutMs: 5000 })
+            .then(function (data) {
+                if (data && typeof data === 'object') {
+                    if (data.machine_name) setText('machine-name', data.machine_name);
+                    if (data.today_production_count != null) setText('today-production-count', formatNumber(data.today_production_count));
+                    if (data.last_inspection_date) setText('last-inspection-date', formatDateYMD(data.last_inspection_date));
+                    if (data.next_inspection_date) setText('next-inspection-date', formatDateYMD(data.next_inspection_date));
+                    if (data.started_at) startUptimeSince(data.started_at);
+                }
+            })
+            .catch(function (err) {
+                console.warn('Machine data fetch failed:', err && (err.message || err));
+                try {
+                    var list = $('error-log-list');
+                    if (list) {
+                        var now = new Date();
+                        var ts = String(now.getHours()).padStart(2, '0') + ':' + String(now.getMinutes()).padStart(2, '0') + ':' + String(now.getSeconds()).padStart(2, '0');
+                        list.insertAdjacentHTML('afterbegin',
+                            '<div class="flex justify-between items-center bg-yellow-900/50 p-3 rounded-md">' +
+                            '<div><p class="font-semibold text-yellow-300">W-API: 機械情報の取得に失敗</p>' +
+                            '<p class="text-sm text-yellow-400">' + (err && err.code === 'TIMEOUT' ? 'タイムアウトしました。' : 'ネットワーク/サーバーエラー。') + '</p></div>' +
+                            '<span class="text-sm text-gray-400 whitespace-nowrap">' + ts + '</span></div>'
+                        );
+                    }
+                } catch (e) { /* noop */ }
+            });
+    }
+
+    // ---------- Alert & Error logs ----------
+    const alertScreen = $('evangelion-alert');
+    const alertErrorCode = $('alert-error-code');
+    const alertErrorMessage = $('alert-error-message');
+    const errorLogList = $('error-log-list');
+    const machineStatus = $('machine-status');
+
+    function showErrorAlert(title, message) {
+        if (!alertScreen) return;
+        if (alertErrorCode) alertErrorCode.textContent = title;
+        if (alertErrorMessage) alertErrorMessage.textContent = message;
+        alertScreen.classList.remove('hidden');
+        setTimeout(function () { alertScreen.classList.add('hidden'); }, 5000);
+    }
+
+    function addErrorLog(code, message, type, timeOverride) {
+        const now = timeOverride || updateClock();
+        let bg, accent, titleCls;
+        if (type === 'error') {
+            bg = 'bg-red-900/50'; accent = 'text-red-400'; titleCls = 'text-red-300';
+        } else if (type === 'warning') {
+            bg = 'bg-yellow-900/50'; accent = 'text-yellow-400'; titleCls = 'text-yellow-300';
+        } else {
+            bg = 'bg-gray-900'; accent = 'text-gray-400'; titleCls = 'text-gray-300';
+        }
+        const row = '\n<div class="flex justify-between items-center ' + bg + ' p-3 rounded-md">\n' +
+            '  <div>\n' +
+            '    <p class="font-semibold ' + titleCls + '">' + code + '</p>\n' +
+            (message ? ('    <p class="text-sm ' + accent + '">' + message + '</p>') : '') +
+            '  </div>\n' +
+            '  <span class="text-sm text-gray-400 whitespace-nowrap">' + now + '</span>\n' +
+            '</div>';
+        if (errorLogList) errorLogList.insertAdjacentHTML('afterbegin', row);
+    }
+
+    const sampleErrors = [
+        { code: 'モータートルク異常', message: 'モーターの負荷が規定値を超えました。', type: 'error' },
+        { code: 'フェンス内異物検知', message: '安全フェンス内で異物を検知しました。', type: 'error' },
+        { code: '非常停止ボタン取り扱い', message: '非常停止ボタンが押されました。', type: 'warning' }
+    ];
+
+    const debugErrorBtn = $('debug-error-btn');
+    const debugWarningBtn = $('debug-warning-btn');
+    const debugNormalBtn = $('debug-normal-btn');
+
+    if (debugErrorBtn) debugErrorBtn.addEventListener('click', function () {
+        const e = sampleErrors.filter(function (x) { return x.type === 'error'; })[Math.floor(Math.random() * 2)];
+        if (!e) return;
+        if (machineStatus) {
+            machineStatus.textContent = 'エラー';
+            machineStatus.className = 'px-4 py-2 text-xl font-semibold rounded-full bg-red-500 text-red-900';
+        }
+        addErrorLog(e.code, e.message, e.type);
+        showErrorAlert(e.code, e.message);
+        setOverallInspectionStatus('FAIL');
+        // ついでにランダムに1台だけFAILに
+        setTileStatus(Math.ceil(Math.random() * 4), 'FAIL');
+    });
+
+    if (debugWarningBtn) debugWarningBtn.addEventListener('click', function () {
+        const e = sampleErrors.find(function (x) { return x.type === 'warning'; });
+        if (!e) return;
+        if (machineStatus) {
+            machineStatus.textContent = '警告';
+            machineStatus.className = 'px-4 py-2 text-xl font-semibold rounded-full bg-yellow-500 text-yellow-900';
+        }
+        addErrorLog(e.code, e.message, e.type);
+    });
+
+    if (debugNormalBtn) debugNormalBtn.addEventListener('click', function () {
+        if (machineStatus) {
+            machineStatus.textContent = '正常';
+            machineStatus.className = 'px-4 py-2 text-xl font-semibold rounded-full bg-green-500 text-green-900';
+        }
+        addErrorLog('I-003: 状態リセット', '手動で正常状態に復帰しました。', 'info');
+        setOverallInspectionStatus('PASS');
+        for (var i = 1; i <= 4; i++) setTileStatus(i, 'PASS');
+    });
+
+    // ---------- Inspection Status (overall + per tile) ----------
+    function setOverallInspectionStatus(status) {
+        var el = $('inspection-status');
+        if (!el) return;
+        var isPass = String(status).toUpperCase() === 'PASS';
+        el.textContent = isPass ? 'PASS' : 'FAIL';
+        el.classList.remove('text-green-400', 'text-red-400');
+        el.classList.add(isPass ? 'text-green-400' : 'text-red-400');
+    }
+
+    function setTileStatus(index, status) {
+        var badge = $('cam' + index + '-badge');
+        if (!badge) return;
+        var isPass = String(status).toUpperCase() === 'PASS';
+        badge.className = 'absolute top-3 right-4 flex items-center gap-1 px-3 py-1 rounded-full ' +
+            (isPass ? 'bg-green-500 text-green-900' : 'bg-red-500 text-red-900') + ' text-sm font-bold';
+        badge.innerHTML = '<ion-icon name="' + (isPass ? 'checkmark-circle' : 'close-circle') + '" class="text-xl"></ion-icon>' +
+            (isPass ? ' PASS' : ' FAIL');
+    }
+
+    function updateInspectionInfo(rotId, timeStr) {
+        if (rotId != null) setText('rot-id', String(rotId));
+        if (timeStr != null) setText('inspection-time', String(timeStr));
+    }
+
+    // 初期表示: 検査時間を現在時刻に、全台PASS
+    (function initInspectionDefaults() {
+        var now = new Date();
+        var hh = String(now.getHours()).padStart(2, '0');
+        var mm = String(now.getMinutes()).padStart(2, '0');
+        var ss = String(now.getSeconds()).padStart(2, '0');
+        setText('inspection-time', hh + ':' + mm + ':' + ss);
+        for (var i = 1; i <= 4; i++) setTileStatus(i, 'PASS');
+        setOverallInspectionStatus('PASS');
+    })();
+
+    // ---------- Machine logs (API) ----------
+    function isoToHMS(iso) {
+        if (!iso) return '--:--:--';
+        try {
+            var d = new Date(iso);
+            var hh = String(d.getHours()).padStart(2, '0');
+            var mm = String(d.getMinutes()).padStart(2, '0');
+            var ss = String(d.getSeconds()).padStart(2, '0');
+            return hh + ':' + mm + ':' + ss;
+        } catch (e) {
+            return '--:--:--';
+        }
+    }
+
+    function setMachineStatusBadge(kind) {
+        if (!machineStatus) return;
+        if (kind === 'error') {
+            machineStatus.textContent = 'エラー';
+            machineStatus.className = 'px-4 py-2 text-xl font-semibold rounded-full bg-red-500 text-red-900';
+        } else if (kind === 'warning') {
+            machineStatus.textContent = '警告';
+            machineStatus.className = 'px-4 py-2 text-xl font-semibold rounded-full bg-yellow-500 text-yellow-900';
+        } else {
+            machineStatus.textContent = '正常';
+            machineStatus.className = 'px-4 py-2 text-xl font-semibold rounded-full bg-green-500 text-green-900';
+        }
+    }
+
+    function resetToNormalFromStandby() {
+        // 機械バッジと検査全体/各タイルを正常化
+        setMachineStatusBadge('info');
+        setOverallInspectionStatus('PASS');
+        for (var i = 1; i <= 4; i++) setTileStatus(i, 'PASS');
+    }
+
+    function renderLogs(logs) {
+        if (!errorLogList) return;
+        // 既存をクリアし、API順序（最新→古い）を維持して描画
+        errorLogList.innerHTML = '';
+        for (var i = 0; i < logs.length; i++) {
+            var lg = logs[i] || {};
+            var type = lg.log_type || 'info';
+            var title = lg.title || '';
+            var msg = lg.message || '';
+            var ts = isoToHMS(lg.timestamp);
+            // 末尾に追加して順序を保つ
+            let bg, accent, titleCls;
+            if (type === 'error') {
+                bg = 'bg-red-900/50'; accent = 'text-red-400'; titleCls = 'text-red-300';
+            } else if (type === 'warning') {
+                bg = 'bg-yellow-900/50'; accent = 'text-yellow-400'; titleCls = 'text-yellow-300';
+            } else {
+                bg = 'bg-gray-900'; accent = 'text-gray-400'; titleCls = 'text-gray-300';
+            }
+            var row = '\n<div class="flex justify-between items-center ' + bg + ' p-3 rounded-md">\n' +
+                '  <div>\n' +
+                '    <p class="font-semibold ' + titleCls + '">' + title + '</p>\n' +
+                (msg ? ('    <p class="text-sm ' + accent + '">' + msg + '</p>') : '') +
+                '  </div>\n' +
+                '  <span class="text-sm text-gray-400 whitespace-nowrap">' + ts + '</span>\n' +
+                '</div>';
+            errorLogList.insertAdjacentHTML('beforeend', row);
+        }
+
+        // 先頭ログの種類に応じてバッジ更新
+        var top = logs && logs[0];
+        if (top) {
+            var t = (top.log_type || 'info').toLowerCase();
+            // I-002: PLC スタンバイが先頭に来たら即リセット
+            if (t === 'info' && typeof top.title === 'string' && top.title.trim().indexOf('I-002') === 0) {
+                resetToNormalFromStandby();
+            } else {
+                setMachineStatusBadge(t);
+            }
+        }
+    }
+
+    if (window.MachineAPI && typeof window.MachineAPI.getMachineLogs === 'function') {
+        window.MachineAPI.getMachineLogs(1, { page: 1, limit: 10, timeoutMs: 5000 })
+            .then(function (resp) {
+                if (!resp || !Array.isArray(resp.logs)) return;
+                renderLogs(resp.logs);
+            })
+            .catch(function (err) {
+                console.warn('Machine logs fetch failed:', err && (err.message || err));
+                try {
+                    var list = $('error-log-list');
+                    if (list) {
+                        var now = new Date();
+                        var ts = String(now.getHours()).padStart(2, '0') + ':' + String(now.getMinutes()).padStart(2, '0') + ':' + String(now.getSeconds()).padStart(2, '0');
+                        list.insertAdjacentHTML('afterbegin',
+                            '<div class="flex justify-between items-center bg-yellow-900/50 p-3 rounded-md">' +
+                            '<div><p class="font-semibold text-yellow-300">W-API: ログの取得に失敗</p>' +
+                            '<p class="text-sm text-yellow-400">' + (err && err.code === 'TIMEOUT' ? 'タイムアウトしました。' : 'ネットワーク/サーバーエラー。') + '</p></div>' +
+                            '<span class="text-sm text-gray-400 whitespace-nowrap">' + ts + '</span></div>'
+                        );
+                    }
+                } catch (e) { /* noop */ }
+            });
+    }
+
+    // ---------- Inspection (images & results) API ----------
+    // Camera order and mapping (DOM id cam1..4 <-> camera_id)
+    var CAMERA_IDS = ['B-spring01', 'B-spring02', 'B-spring03', 'B-spring04'];
+    var CAMERA_ID_TO_INDEX = (function () {
+        var m = {};
+        for (var i = 0; i < CAMERA_IDS.length; i++) m[CAMERA_IDS[i]] = i + 1;
+        return m;
+    })();
+
+    function ensureReasonBadge(index) {
+        var cam = $('cam' + index);
+        if (!cam) return null;
+        var id = 'cam' + index + '-reason';
+        var el = $(id);
+        if (!el) {
+            el = document.createElement('span');
+            el.id = id;
+            el.className = 'absolute bottom-3 right-4 flex items-center gap-1 px-3 py-1 rounded-full bg-red-500 text-red-900 text-xs font-bold shadow-lg';
+            el.style.maxWidth = '75%';
+            el.style.whiteSpace = 'nowrap';
+            el.style.textOverflow = 'ellipsis';
+            el.style.overflow = 'hidden';
+            cam.appendChild(el);
+        }
+        return el;
+    }
+
+    function hideReasonBadge(index) {
+        var el = $('cam' + index + '-reason');
+        if (el) el.remove();
+    }
+
+    function setTileImage(index, url) {
+        var cam = $('cam' + index);
+        if (!cam) return;
+        if (url) {
+            cam.style.backgroundImage = 'url("' + url.replace(/"/g, '%22') + '")';
+            cam.style.backgroundSize = 'cover';
+            cam.style.backgroundPosition = 'center';
+            cam.style.backgroundRepeat = 'no-repeat';
+        } else {
+            cam.style.backgroundImage = '';
+        }
+    }
+
+    function buildInspectionImageUrl(imagePath) {
+        if (!imagePath) return '';
+        // NOTE: サーバー側の画像公開パスに合わせて必要なら調整
+        // 仮: /api/inspections/images/{image_path}
+        return '/api/inspections/images/' + encodeURIComponent(String(imagePath));
+    }
+
+    function applyShots(lotId, shots, capturedAtIso) {
+        // 最新ショット（同じ camera_id は最後の要素を「最新」とみなす）
+        var latest = {};
+        for (var i = 0; i < shots.length; i++) {
+            var s = shots[i] || {};
+            if (!s.camera_id) continue;
+            latest[s.camera_id] = s;
+        }
+
+        var allPass = true;
+        for (var j = 0; j < CAMERA_IDS.length; j++) {
+            var camId = CAMERA_IDS[j];
+            var idx = j + 1;
+            var entry = latest[camId];
+            if (!entry) continue; // 情報なしは変更しない
+
+            var status = String(entry.status || 'PASS').toUpperCase();
+            var imageUrl = buildInspectionImageUrl(entry.image_path);
+            var details = entry.details || '';
+
+            setTileImage(idx, imageUrl);
+            setTileStatus(idx, status);
+
+            if (status === 'FAIL') {
+                allPass = false;
+                if (details) {
+                    var badge = ensureReasonBadge(idx);
+                    if (badge) badge.textContent = details;
+                } else {
+                    hideReasonBadge(idx);
+                }
+            } else {
+                hideReasonBadge(idx);
+            }
+        }
+
+        setOverallInspectionStatus(allPass ? 'PASS' : 'FAIL');
+        // rot_id と 時刻を更新（APIの captured_at を優先的に使用）
+        var timeStr;
+        if (capturedAtIso) {
+            timeStr = isoToHMS(capturedAtIso);
+        } else {
+            var now = new Date();
+            var hh = String(now.getHours()).padStart(2, '0');
+            var mm = String(now.getMinutes()).padStart(2, '0');
+            var ss = String(now.getSeconds()).padStart(2, '0');
+            timeStr = hh + ':' + mm + ':' + ss;
+        }
+        updateInspectionInfo(lotId || '', timeStr);
+    }
+
+    function loadInspectionCurrent() {
+        if (!(window.MachineAPI && typeof window.MachineAPI.getCurrentLot === 'function' && typeof window.MachineAPI.getLotShots === 'function')) {
+            return;
+        }
+        window.MachineAPI.getCurrentLot({ timeoutMs: 5000 })
+            .then(function (res) {
+                if (!res || !res.lot_id) throw new Error('No lot_id');
+                var lotId = res.lot_id;
+                return window.MachineAPI.getLotShots(lotId, { timeoutMs: 5000 })
+                    .then(function (detail) { return { lotId: lotId, detail: detail }; });
+            })
+            .then(function (bundle) {
+                var lotId = bundle.lotId;
+                var detail = bundle.detail || {};
+                var shots = Array.isArray(detail.shots) ? detail.shots : [];
+                var capturedAt = detail.captured_at; // 仕様変更で追加
+                applyShots(lotId, shots, capturedAt);
+            })
+            .catch(function (err) {
+                console.warn('Inspection data fetch failed:', err && (err.message || err));
+                try {
+                    var list = $('error-log-list');
+                    if (list) {
+                        var now = new Date();
+                        var ts = String(now.getHours()).padStart(2, '0') + ':' + String(now.getMinutes()).padStart(2, '0') + ':' + String(now.getSeconds()).padStart(2, '0');
+                        list.insertAdjacentHTML('afterbegin',
+                            '<div class="flex justify-between items-center bg-yellow-900/50 p-3 rounded-md">' +
+                            '<div><p class="font-semibold text-yellow-300">W-API: 検査情報の取得に失敗</p>' +
+                            '<p class="text-sm text-yellow-400">' + (err && err.code === 'TIMEOUT' ? 'タイムアウトしました。' : 'ネットワーク/サーバーエラー。') + '</p></div>' +
+                            '<span class="text-sm text-gray-400 whitespace-nowrap">' + ts + '</span></div>'
+                        );
+                    }
+                } catch (e) { /* noop */ }
+            });
+    }
+
+    // 初回読み込み
+    loadInspectionCurrent();
+
+    // expose small API for future integration
+    window.Signage = {
+        setOverallInspectionStatus: setOverallInspectionStatus,
+        setTileStatus: setTileStatus,
+        updateInspectionInfo: updateInspectionInfo,
+    };
+})();
diff --git "a/javascript-version/public/machine-signage/\347\224\237\347\224\243\346\251\237\346\242\260\343\202\265\343\202\244\343\203\215\343\203\274\343\202\270.html" "b/javascript-version/public/machine-signage/\347\224\237\347\224\243\346\251\237\346\242\260\343\202\265\343\202\244\343\203\215\343\203\274\343\202\270.html"
new file mode 100644
index 000000000..02dad5acb
--- /dev/null
+++ "b/javascript-version/public/machine-signage/\347\224\237\347\224\243\346\251\237\346\242\260\343\202\265\343\202\244\343\203\215\343\203\274\343\202\270.html"
@@ -0,0 +1,186 @@
+<!DOCTYPE html>
+<html lang="ja">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <!-- 5分ごとに自動リフレッシュ -->
+    <meta http-equiv="refresh" content="300" />
+    <title>工場ダッシュボード - サイネージ</title>
+    <!-- Tailwind CSS CDN -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- 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=Inter:wght@400;500;600;700;900&family=Noto+Sans+JP:wght@400;500;700;900&display=swap"
+        rel="stylesheet" />
+    <!-- Ionicons -->
+    <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
+    <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
+    <style>
+        body {
+            font-family: 'Inter', 'Noto Sans JP', sans-serif;
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
+            overflow: hidden;
+        }
+
+        .alert-bg {
+            background-image: repeating-linear-gradient(-45deg, #f59e0b, #f59e0b 25px, #1f2937 25px, #1f2937 50px);
+        }
+
+        .alert-flash {
+            animation: flash 1s infinite;
+        }
+
+        @keyframes flash {
+
+            0%,
+            100% {
+                opacity: 1;
+            }
+
+            50% {
+                opacity: .5;
+            }
+        }
+    </style>
+</head>
+
+<body class="bg-gray-900 text-white h-screen flex flex-col">
+    <header class="p-4 md:p-6 flex-shrink-0">
+        <div class="flex justify-between items-center">
+            <div class="flex items-center space-x-6">
+                <h1 class="text-5xl font-black tracking-wider">工場ダッシュボード</h1>
+                <div class="flex items-center space-x-2 pt-2">
+                    <button id="debug-error-btn"
+                        class="bg-red-500 hover:bg-red-600 text-white text-xs px-3 py-1 rounded-md">デバッグ: エラー発生</button>
+                    <button id="debug-warning-btn"
+                        class="bg-yellow-500 hover:bg-yellow-600 text-black text-xs px-3 py-1 rounded-md">デバッグ:
+                        警告発生</button>
+                    <button id="debug-normal-btn"
+                        class="bg-green-500 hover:bg-green-600 text-white text-xs px-3 py-1 rounded-md">デバッグ:
+                        正常化</button>
+                </div>
+            </div>
+            <div id="clock" class="text-5xl font-bold text-right">
+                <p id="time" class="tracking-widest">--:--</p>
+                <p id="date" class="text-2xl mt-1">----/--/-- (--)</p>
+            </div>
+        </div>
+    </header>
+    <main class="flex-grow grid grid-cols-1 xl:grid-cols-2 gap-6 p-4 md:p-6 overflow-hidden">
+        <div class="flex flex-col overflow-hidden bg-gray-800 rounded-2xl p-6">
+            <h2 class="text-4xl font-bold mb-4 flex-shrink-0">機械状況</h2>
+            <div class="flex-grow flex flex-col space-y-6">
+                <div class="flex justify-between items-center">
+                    <h3 id="machine-name" class="text-3xl font-bold">自動表層バネどめ機</h3>
+                    <span id="machine-status"
+                        class="px-4 py-2 text-xl font-semibold rounded-full bg-green-500 text-green-900">正常</span>
+                </div>
+                <div class="grid grid-cols-2 gap-4 text-center">
+                    <div class="bg-gray-900 p-4 rounded-lg">
+                        <p class="text-lg text-gray-400">本日の稼働時間</p>
+                        <p id="today-uptime" class="text-5xl font-black">8<span class="text-3xl">h</span> 25<span
+                                class="text-3xl">m</span></p>
+                    </div>
+                    <div class="bg-gray-900 p-4 rounded-lg">
+                        <p class="text-lg text-gray-400">本日の生産数</p>
+                        <p id="today-production-count" class="text-5xl font-black">1,520</p>
+                    </div>
+                    <div class="bg-gray-900 p-4 rounded-lg">
+                        <p class="text-lg text-gray-400">最終点検日</p>
+                        <p id="last-inspection-date" class="text-4xl font-bold">2024/06/15</p>
+                    </div>
+                    <div class="bg-gray-900 p-4 rounded-lg">
+                        <p class="text-lg text-gray-400">次回点検日</p>
+                        <p id="next-inspection-date" class="text-4xl font-bold">2024/09/15</p>
+                    </div>
+                </div>
+                <div class="flex-grow flex flex-col overflow-hidden">
+                    <h3 class="text-2xl font-bold mb-2">最新エラーログ</h3>
+                    <div id="error-log-list" class="space-y-2 text-lg overflow-y-auto">
+                        <div class="flex justify-between items-center bg-gray-900 p-3 rounded-md">
+                            <div>
+                                <p class="font-semibold text-gray-300">I-001: 起動シーケンス完了</p>
+                            </div>
+                            <span class="text-sm text-gray-400 whitespace-nowrap">08:00:05</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="flex flex-col overflow-hidden bg-gray-800 rounded-2xl p-6">
+            <h2 class="text-4xl font-bold mb-4 flex-shrink-0">画像検査</h2>
+            <div class="flex-grow flex flex-col space-y-6">
+                <!-- 全体判定（PASS/FAIL） -->
+                <div class="text-center">
+                    <p id="inspection-status" class="text-5xl font-black text-green-400">PASS</p>
+                </div>
+
+                <!-- 4分割カメラ表示 -->
+                <div class="grid grid-cols-2 gap-4">
+                    <div id="cam1" class="bg-black rounded-lg aspect-video relative overflow-hidden">
+                        <span class="absolute top-3 left-4 text-lg font-semibold text-gray-300">B-spring01</span>
+                        <span id="cam1-badge" class="absolute top-3 right-4 flex items-center gap-1 px-3 py-1 rounded-full bg-green-500 text-green-900 text-sm font-bold">
+                            <ion-icon name="checkmark-circle" class="text-xl"></ion-icon>
+                            PASS
+                        </span>
+                    </div>
+                    <div id="cam2" class="bg-black rounded-lg aspect-video relative overflow-hidden">
+                        <span class="absolute top-3 left-4 text-lg font-semibold text-gray-300">B-spring02</span>
+                        <span id="cam2-badge" class="absolute top-3 right-4 flex items-center gap-1 px-3 py-1 rounded-full bg-green-500 text-green-900 text-sm font-bold">
+                            <ion-icon name="checkmark-circle" class="text-xl"></ion-icon>
+                            PASS
+                        </span>
+                    </div>
+                    <div id="cam3" class="bg-black rounded-lg aspect-video relative overflow-hidden">
+                        <span class="absolute top-3 left-4 text-lg font-semibold text-gray-300">B-spring03</span>
+                        <span id="cam3-badge" class="absolute top-3 right-4 flex items-center gap-1 px-3 py-1 rounded-full bg-green-500 text-green-900 text-sm font-bold">
+                            <ion-icon name="checkmark-circle" class="text-xl"></ion-icon>
+                            PASS
+                        </span>
+                    </div>
+                    <div id="cam4" class="bg-black rounded-lg aspect-video relative overflow-hidden">
+                        <span class="absolute top-3 left-4 text-lg font-semibold text-gray-300">B-spring04</span>
+                        <span id="cam4-badge" class="absolute top-3 right-4 flex items-center gap-1 px-3 py-1 rounded-full bg-green-500 text-green-900 text-sm font-bold">
+                            <ion-icon name="checkmark-circle" class="text-xl"></ion-icon>
+                            PASS
+                        </span>
+                    </div>
+                </div>
+
+                <!-- rot_id と 検査時間 -->
+                <div class="mt-2 bg-gray-900 p-4 rounded-lg grid grid-cols-2 gap-4 text-center">
+                    <div>
+                        <p class="text-lg text-gray-400">rot_id</p>
+                        <p id="rot-id" class="text-4xl font-bold">MAT-10025</p>
+                    </div>
+                    <div>
+                        <p class="text-lg text-gray-400">検査時間</p>
+                        <p id="inspection-time" class="text-4xl font-bold">--:--:--</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+    <div id="evangelion-alert" class="hidden fixed inset-0 bg-black/80 z-50 flex items-center justify-center p-4">
+        <div class="alert-bg w-full h-full absolute inset-0 opacity-20"></div>
+        <div class="text-center z-10">
+            <h2 class="text-9xl md:text-[12rem] font-black text-red-500 alert-flash tracking-widest"
+                style="line-height:1;">警告</h2>
+            <div class="mt-8 bg-black/80 p-6 rounded-lg border-4 border-yellow-400">
+                <p id="alert-error-code" class="text-6xl font-bold text-yellow-400">モータートルク異常</p>
+                <p id="alert-error-message" class="text-3xl mt-4 text-white">モーターの負荷が規定値を超えました。</p>
+            </div>
+        </div>
+    </div>
+
+
+    <!-- API client (relative path to support basePath) -->
+    <script src="machine-api.js"></script>
+    <script src="signage.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/javascript-version/public/parts-inventory/\351\203\250\345\223\201\345\234\250\345\272\253\347\256\241\347\220\206.html" "b/javascript-version/public/parts-inventory/\351\203\250\345\223\201\345\234\250\345\272\253\347\256\241\347\220\206.html"
new file mode 100644
index 000000000..a213b8ec4
--- /dev/null
+++ "b/javascript-version/public/parts-inventory/\351\203\250\345\223\201\345\234\250\345\272\253\347\256\241\347\220\206.html"
@@ -0,0 +1,1406 @@
+<!DOCTYPE html>
+<html lang="ja">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>部品在庫管理</title>
+    <!-- Tailwind CSSを読み込む -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Google Fonts (Inter) を読み込む -->
+    <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=Inter:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;700&display=swap"
+        rel="stylesheet">
+    <!-- Ioniconsを読み込む -->
+    <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
+    <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
+    <style>
+        /* フォント設定 */
+        body {
+            font-family: 'Inter', 'Noto Sans JP', sans-serif;
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
+        }
+
+        /* スクロールバーのスタイル（任意） */
+        ::-webkit-scrollbar {
+            width: 8px;
+            height: 8px;
+            /* 横スクロールバーの高さ */
+        }
+
+        ::-webkit-scrollbar-track {
+            background: #F4F5FA;
+        }
+
+        ::-webkit-scrollbar-thumb {
+            background: #94a3b8;
+            border-radius: 4px;
+        }
+
+        ::-webkit-scrollbar-thumb:hover {
+            background: #64748b;
+        }
+
+        /* アニメーション */
+        .fade-in {
+            animation: fadeIn 0.5s ease-in-out forwards;
+        }
+
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+                transform: translateY(10px);
+            }
+
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        .modal-enter {
+            animation: modal-enter-animation 0.3s ease-out forwards;
+        }
+
+        @keyframes modal-enter-animation {
+            from {
+                opacity: 0;
+                transform: scale(0.95);
+            }
+
+            to {
+                opacity: 1;
+                transform: scale(1);
+            }
+        }
+
+        /* 選択されたスロットのスタイル */
+        .selected-slot {
+            outline: 4px solid #4f46e5;
+            /* indigo-600 */
+            transform: scale(1.02);
+        }
+
+        /* 検索でハイライトされたスロットのスタイル */
+        .highlight-slot {
+            animation: pulse 1.5s infinite;
+        }
+
+        @keyframes pulse {
+
+            0%,
+            100% {
+                box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.7);
+            }
+
+            50% {
+                box-shadow: 0 0 0 10px rgba(99, 102, 241, 0);
+            }
+        }
+
+        /* 移動モードのスタイル */
+        .move-mode-empty {
+            background-color: #d1fae5 !important;
+            /* green-100 */
+            outline: 2px dashed #10b981;
+            /* green-500 */
+        }
+
+        .move-mode-origin {
+            animation: pulse-red 1.5s infinite;
+        }
+
+        @keyframes pulse-red {
+
+            0%,
+            100% {
+                box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
+            }
+
+            50% {
+                box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
+            }
+        }
+
+        /* QRスキャナーの点滅アニメーション */
+        .scanner-line {
+            animation: scan 2s linear infinite;
+        }
+
+        @keyframes scan {
+
+            0%,
+            100% {
+                top: 0;
+            }
+
+            50% {
+                top: 100%;
+            }
+        }
+
+        /* FABメニューアイテムのアニメーション */
+        .fab-item {
+            transform: scale(0);
+            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+
+        /* ヘッダーハイライトのスタイル */
+        .header-highlight {
+            background-color: #c7d2fe;
+            /* indigo-200 */
+            color: #3730a3;
+            /* indigo-800 */
+        }
+    </style>
+</head>
+
+<body class="bg-slate-100 text-gray-800">
+
+    <div class="flex flex-col min-h-screen">
+
+        <!-- メインコンテンツ -->
+        <main class="w-full p-4 sm:p-6 lg:p-8">
+            <div class="flex flex-col gap-6">
+                <!-- タブ形式のラック選択 -->
+                <div>
+                    <div class="border-b border-gray-200">
+                        <nav id="rack-tabs" class="-mb-px flex space-x-6 overflow-x-auto" aria-label="Tabs">
+                            <!-- ラックタブはJSで動的に生成 -->
+                        </nav>
+                    </div>
+                </div>
+
+                <!-- ラック表示と詳細 -->
+                <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+                    <!-- メッシュラック -->
+                    <div class="lg:col-span-2">
+                        <div class="flex items-center justify-between mb-4">
+                            <h2 id="rack-name" class="text-2xl font-bold"></h2>
+                            <button id="bulk-qr-btn"
+                                class="flex items-center bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-3 rounded-lg text-sm transition-transform transform hover:scale-105">
+                                <ion-icon name="print-outline" class="mr-2"></ion-icon>
+                                一括QR生成
+                            </button>
+                        </div>
+                        <div class="overflow-x-auto bg-white p-2 pl-0 rounded-xl shadow-md">
+                            <div id="rack-display-area" class="min-w-max">
+                                <!-- JS will build the labeled grid here -->
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- 詳細と操作 -->
+                    <div class="lg:col-span-1">
+                        <div class="bg-white rounded-xl shadow-md p-6 sticky top-24">
+                            <h2 class="text-2xl font-bold mb-4">情報・操作</h2>
+                            <!-- 検索 -->
+                            <div class="mb-6">
+                                <label for="search-parts" class="block text-sm font-medium text-gray-700 mb-2">部品を検索</label>
+                                <div class="relative">
+                                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                                        <ion-icon name="search-outline" class="text-gray-400"></ion-icon>
+                                    </div>
+                                    <input type="text" id="search-parts"
+                                        class="bg-gray-100 focus:bg-white focus:ring-indigo-500 focus:border-indigo-500 block w-full pl-10 p-3 text-base border-gray-300 rounded-lg"
+                                        placeholder="部品名 or 型番">
+                                </div>
+                            </div>
+                            <!-- 詳細表示 -->
+                            <div id="details-panel">
+                                <div class="text-center text-gray-500 py-10">
+                                    <ion-icon name="grid-outline" class="text-5xl mx-auto"></ion-icon>
+                                    <p class="mt-2">ラックの場所を選択して詳細を表示</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </div>
+
+    <!-- フローティングアクションボタン (FAB) -->
+    <!-- FAB コンテナ: 位置を少し上へ (元: bottom-8)。環境により余白を確保するため安全領域も考慮 -->
+    <div class="fixed right-8 z-20" id="fab-container" style="bottom: calc(env(safe-area-inset-bottom, 0px) + 6rem);">
+        <!-- FABメニュー -->
+        <div id="fab-menu" class="flex flex-col items-end space-y-3 mb-3">
+            <button id="add-rack-btn" data-tooltip="新しいラックを作成"
+                class="fab-item flex items-center bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-3 rounded-full shadow-lg">
+                <ion-icon name="add-circle-outline" class="text-xl"></ion-icon>
+                <span class="ml-2 text-sm">ラック作成</span>
+            </button>
+            <button id="qr-stock-in-btn" data-tooltip="QR入庫"
+                class="fab-item flex items-center bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-3 rounded-full shadow-lg">
+                <ion-icon name="qr-code-outline" class="text-xl"></ion-icon>
+                <span class="ml-2 text-sm">QR入庫</span>
+            </button>
+            <button id="qr-stock-out-btn" data-tooltip="QR出庫"
+                class="fab-item flex items-center bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-3 rounded-full shadow-lg">
+                <ion-icon name="qr-code-outline" class="text-xl"></ion-icon>
+                <span class="ml-2 text-sm">QR出庫</span>
+            </button>
+        </div>
+        <!-- メインFAB -->
+        <button id="fab-main"
+            class="w-16 h-16 flex items-center justify-center bg-indigo-600 hover:bg-indigo-700 text-white font-bold rounded-full shadow-lg transition-transform transform hover:scale-110">
+            <ion-icon id="fab-icon" name="add-outline" class="text-4xl transition-transform duration-300"></ion-icon>
+        </button>
+    </div>
+
+
+    <!-- モーダル -->
+    <div id="modal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-75 flex items-center justify-center z-40 p-4">
+        <div id="modal-content" class="bg-white rounded-xl shadow-2xl w-full max-w-md modal-enter">
+            <!-- モーダルの中身はJSで動的に生成 -->
+        </div>
+    </div>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            // =============================
+            // 画面ロジック概要
+            // - レイアウトをサイドバーからタブ形式に変更
+            // - ダミーAPIデータをアプリ内部形式へ変換
+            // - 上部: ラック選択タブ / 下部: ラックメッシュ + 詳細パネル
+            // - 操作: 部品使用・格納・移動、棚QR表示、棚QR一括生成
+            // - モーダルは openModal/closeModal で共通管理
+            // =============================
+
+            // APIから返ってくるであろうサンプルデータ (フェールバック用)
+            const mockApiData = [
+                {
+                    "rack_id": 1,
+                    "rack_name": "スプリング・小物資材ラック",
+                    "slots": [
+                        { "slot_id": "A-1", "part": { "part_name": "ポケットコイル (シングル)", "part_model_number": "PC-S-H20", "quantity": 25, "color_code": "4A90E2" } },
+                        { "slot_id": "A-2", "part": { "part_name": "ポケットコイル (シングル)", "part_model_number": "PC-S-H20", "quantity": 25, "color_code": "4A90E2" } },
+                        { "slot_id": "A-3", "part": null },
+                        { "slot_id": "A-4", "part": { "part_name": "ボンネルコイル (セミダブル)", "part_model_number": "BC-SD-H18", "quantity": 20, "color_code": "50E3C2" } },
+                        { "slot_id": "B-1", "part": { "part_name": "コーナーガード", "part_model_number": "CG-STD", "quantity": 500, "color_code": "9B9B9B" } },
+                        { "slot_id": "B-2", "part": { "part_name": "製品ラベルセット", "part_model_number": "LBL-PREMIUM", "quantity": 1000, "color_code": "F5A623" } },
+                        { "slot_id": "B-3", "part": null },
+                        { "slot_id": "B-4", "part": { "part_name": "強化縫製糸 (白)", "part_model_number": "THD-W-HV", "quantity": 50, "color_code": "E9E9E9" } },
+                        { "slot_id": "C-1", "part": null },
+                        { "slot_id": "C-2", "part": { "part_name": "ボンネルコイル (セミダブル)", "part_model_number": "BC-SD-H18", "quantity": 20, "color_code": "50E3C2" } },
+                        { "slot_id": "C-3", "part": null },
+                        { "slot_id": "C-4", "part": { "part_name": "ジッパー (200cm)", "part_model_number": "ZIP-200", "quantity": 150, "color_code": "D0021B" } },
+                    ]
+                },
+                {
+                    "rack_id": 2,
+                    "rack_name": "ウレタンフォーム保管棚",
+                    "slots": [
+                        { "slot_id": "A-1", "part": { "part_name": "低反発ウレタン 20mm (S)", "part_model_number": "MF-T20-S", "quantity": 40, "color_code": "4A90E2" } },
+                        { "slot_id": "A-2", "part": { "part_name": "低反発ウレタン 20mm (S)", "part_model_number": "MF-T20-S", "quantity": 40, "color_code": "4A90E2" } },
+                        { "slot_id": "A-3", "part": { "part_name": "高反発ウレタン 30mm (S)", "part_model_number": "HR-T30-S", "quantity": 40, "color_code": "7ED321" } },
+                        { "slot_id": "A-4", "part": { "part_name": "高反発ウレタン 30mm (S)", "part_model_number": "HR-T30-S", "quantity": 40, "color_code": "7ED321" } },
+                        { "slot_id": "A-5", "part": null },
+                        { "slot_id": "A-6", "part": null },
+                        { "slot_id": "B-1", "part": { "part_name": "低反発ウレタン 20mm (SD)", "part_model_number": "MF-T20-SD", "quantity": 30, "color_code": "4A90E2" } },
+                        { "slot_id": "B-2", "part": { "part_name": "低反発ウレタン 20mm (SD)", "part_model_number": "MF-T20-SD", "quantity": 30, "color_code": "4A90E2" } },
+                        { "slot_id": "B-3", "part": { "part_name": "高反発ウレタン 30mm (SD)", "part_model_number": "HR-T30-SD", "quantity": 30, "color_code": "7ED321" } },
+                        { "slot_id": "B-4", "part": { "part_name": "高反発ウレタン 30mm (SD)", "part_model_number": "HR-T30-SD", "quantity": 30, "color_code": "7ED321" } },
+                        { "slot_id": "B-5", "part": null },
+                        { "slot_id": "B-6", "part": null },
+                        { "slot_id": "C-1", "part": { "part_name": "ラテックスフォーム 40mm (D)", "part_model_number": "LTX-T40-D", "quantity": 20, "color_code": "F8E71C" } },
+                        { "slot_id": "C-2", "part": null },
+                        { "slot_id": "C-3", "part": null },
+                        { "slot_id": "C-4", "part": null },
+                        { "slot_id": "C-5", "part": null },
+                        { "slot_id": "C-6", "part": null },
+                    ]
+                },
+                {
+                    "rack_id": 3,
+                    "rack_name": "生地・充填材ラック",
+                    "slots": [
+                        { "slot_id": "A-1", "part": { "part_name": "ニット生地 (クール)", "part_model_number": "FAB-KN-COOL", "quantity": 15, "color_code": "BD10E0" } },
+                        { "slot_id": "A-2", "part": { "part_name": "ニット生地 (オーガニック)", "part_model_number": "FAB-KN-OGN", "quantity": 15, "color_code": "BD10E0" } },
+                        { "slot_id": "A-3", "part": null },
+                        { "slot_id": "B-1", "part": { "part_name": "フェルトパッド (ハード)", "part_model_number": "FLT-HD-S", "quantity": 200, "color_code": "9B9B9B" } },
+                        { "slot_id": "B-2", "part": { "part_name": "フェルトパッド (ハード)", "part_model_number": "FLT-HD-S", "quantity": 200, "color_code": "9B9B9B" } },
+                        { "slot_id": "B-3", "part": { "part_name": "フェルトパッド (ソフト)", "part_model_number": "FLT-SF-S", "quantity": 200, "color_code": "4A4A4A" } },
+                    ]
+                }
+            ];
+
+            // 表示用サニタイズ: null/undefined/文字列"null"等は空文字へ
+            function s(v, fallback = '') {
+                if (v === null || v === undefined) return fallback;
+                if (v === 'null' || v === 'undefined') return fallback;
+                return String(v);
+            }
+
+            // APIエンドポイントのベースURL
+            // 優先度: URLクエリ ?apiBase= → window.API_BASE → 同一オリジン(空文字)
+            const apiBase = (new URLSearchParams(location.search)).get('apiBase') || window.API_BASE || '';
+
+            // ラック内部ID("rack-1")から数値IDを取り出すヘルパー
+            function getRackNumericId(rack) {
+                if (!rack) return null;
+                const id = parseInt(String(rack.id).replace(/[^0-9]/g, ''), 10);
+                return Number.isFinite(id) ? id : null;
+            }
+
+            // APIのslotレスポンスをアプリ内部形式に変換
+            function mapApiSlotToAppPart(slot) {
+                if (!slot) return null;
+                return {
+                    partName: slot.part_name,
+                    partModelNumber: slot.part_model_number || '',
+                    quantity: slot.quantity,
+                    color: (slot.color_code || '').toString().replace(/^#/, '')
+                };
+            }
+
+            // 汎用fetch(JSON)ヘルパー
+            async function fetchJson(url, options = {}) {
+                const res = await fetch(url, options);
+                if (!res.ok) {
+                    const txt = await res.text().catch(() => '');
+                    throw new Error(`HTTP ${res.status} ${res.statusText} - ${txt}`);
+                }
+                return res.json();
+            }
+
+            // ラック一覧 + 各ラック詳細(スロット)を取得
+            async function loadRacksFromApi() {
+                const list = await fetchJson(`${apiBase}/api/racks`);
+                // 並列で詳細取得
+                const racksWithDetails = await Promise.all(
+                    list.map(async (rack) => {
+                        try {
+                            const detail = await fetchJson(`${apiBase}/api/racks/${rack.rack_id}`);
+                            // API設計では slots は { 'A-1': {...} | null } のオブジェクトなので配列に変換
+                            const slotsObj = detail.slots || {};
+                            const slotsArr = Object.entries(slotsObj).map(([slotId, part]) => ({
+                                slot_id: slotId,
+                                part: part
+                                    ? {
+                                        part_name: part.part_name,
+                                        part_model_number: part.part_model_number,
+                                        quantity: part.quantity,
+                                        color_code: part.color_code
+                                    }
+                                    : null
+                            }));
+                            return {
+                                rack_id: detail.rack_id,
+                                rack_name: detail.rack_name,
+                                rows: detail.rows,
+                                cols: detail.cols,
+                                slots: slotsArr
+                            };
+                        } catch (e) {
+                            console.error('ラック詳細取得に失敗:', rack.rack_id, e);
+                            // 詳細が取得できない場合は最低限の情報で返す
+                            return {
+                                rack_id: rack.rack_id,
+                                rack_name: rack.rack_name,
+                                rows: rack.rows,
+                                cols: rack.cols,
+                                slots: []
+                            };
+                        }
+                    })
+                );
+                return racksWithDetails;
+            }
+
+            // APIデータをアプリ内部で使いやすい形式に変換する関数
+            function transformApiDataToAppData(apiData) {
+                return apiData.map(rack => {
+                    const slotsObject = {};
+                    let maxRow = rack.rows || 0;
+                    let maxCol = rack.cols || 0;
+
+                    if (rack.slots) {
+                        rack.slots.forEach(slot => {
+                            if (slot.part) {
+                                slotsObject[slot.slot_id] = {
+                                    partName: slot.part.part_name,
+                                    partModelNumber: slot.part.part_model_number,
+                                    quantity: slot.part.quantity,
+                                    color: slot.part.color_code
+                                };
+                            }
+                            // rows/cols がAPI側で未提供の場合のみ補完
+                            if (!rack.rows || !rack.cols) {
+                                const [rowChar, colNumStr] = slot.slot_id.split('-');
+                                const rowNum = rowChar.charCodeAt(0) - 64;
+                                const colNum = parseInt(colNumStr);
+                                if (rowNum > maxRow) maxRow = rowNum;
+                                if (colNum > maxCol) maxCol = colNum;
+                            }
+                        });
+                    }
+
+                    return {
+                        id: `rack-${rack.rack_id}`,
+                        name: rack.rack_name,
+                        rows: maxRow,
+                        cols: maxCol,
+                        slots: slotsObject
+                    };
+                });
+            }
+
+            // ===== アプリ全体の状態 =====
+            let racks = [];
+            let currentRackId = null;
+            let selectedSlotId = null;
+            let isMoveMode = false;
+            let moveOriginSlotId = null;
+
+            // ===== DOM参照の取得 =====
+            const rackNameEl = document.getElementById('rack-name');
+            const rackTabsEl = document.getElementById('rack-tabs');
+            const detailsPanel = document.getElementById('details-panel');
+            const searchInput = document.getElementById('search-parts');
+            const modal = document.getElementById('modal');
+            const modalContent = document.getElementById('modal-content');
+            const bulkQrBtn = document.getElementById('bulk-qr-btn');
+            const fabMain = document.getElementById('fab-main');
+            const fabIcon = document.getElementById('fab-icon');
+            const fabMenuItems = document.querySelectorAll('.fab-item');
+
+            // 初期描画
+            function renderApp() {
+                renderRackTabs();
+                renderCurrentRack();
+                updateDetails(null);
+            }
+
+            // ラックタブの描画
+            function renderRackTabs() {
+                rackTabsEl.innerHTML = '';
+                racks.forEach(rack => {
+                    const a = document.createElement('a');
+                    a.href = '#';
+                    a.dataset.rackId = rack.id;
+                    a.className = `rack-tab-item group whitespace-nowrap flex items-center py-3 px-1 border-b-2 font-medium text-sm transition-colors duration-200 ${rack.id === currentRackId ? 'border-indigo-500 text-indigo-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'}`;
+                    a.innerHTML = `
+                        <ion-icon name="server-outline" class="mr-2 text-lg"></ion-icon>
+                        <span class="truncate">${rack.name}</span>
+                        <button data-action="delete-rack" data-rack-id="${rack.id}" data-rack-name="${rack.name}" class="ml-3 p-1 rounded-full text-gray-400 hover:bg-red-100 hover:text-red-600 opacity-0 group-hover:opacity-100 transition-opacity">
+                            <ion-icon name="trash-outline" class="pointer-events-none"></ion-icon>
+                        </button>
+                    `;
+                    rackTabsEl.appendChild(a);
+                });
+            }
+
+            // メッシュラックの描画
+            function renderCurrentRack() {
+                const rackDisplayArea = document.getElementById('rack-display-area');
+                rackDisplayArea.innerHTML = '';
+                const currentRack = racks.find(r => r.id === currentRackId);
+
+                if (!currentRack) {
+                    rackNameEl.textContent = 'ラックがありません';
+                    rackDisplayArea.innerHTML = '<p class="text-center text-gray-500 p-10">右下のボタンから新しいラックを作成してください。</p>';
+                    bulkQrBtn.classList.add('hidden');
+                    return;
+                }
+
+                bulkQrBtn.classList.remove('hidden');
+                rackNameEl.textContent = currentRack.name;
+
+                const layoutContainer = document.createElement('div');
+                layoutContainer.className = 'grid bg-white';
+                layoutContainer.style.gridTemplateColumns = 'auto 1fr';
+                layoutContainer.style.gridTemplateRows = 'auto 1fr';
+
+                const corner = document.createElement('div');
+                corner.className = 'w-12 h-8 sticky left-0 top-0 z-20 bg-white';
+                layoutContainer.appendChild(corner);
+
+                const colHeadersContainer = document.createElement('div');
+                colHeadersContainer.className = 'grid sticky top-0 z-10 bg-white';
+                colHeadersContainer.style.gridTemplateColumns = `repeat(${currentRack.cols}, 9rem)`;
+                colHeadersContainer.style.gap = '1rem';
+                colHeadersContainer.style.paddingLeft = '1rem';
+                for (let c = 1; c <= currentRack.cols; c++) {
+                    const header = document.createElement('div');
+                    header.className = 'h-8 flex items-end justify-center font-bold text-gray-500 rounded-md transition-colors duration-200';
+                    header.textContent = c;
+                    if (selectedSlotId && selectedSlotId.split('-')[1] == c) {
+                        header.classList.add('header-highlight');
+                    }
+                    colHeadersContainer.appendChild(header);
+                }
+                layoutContainer.appendChild(colHeadersContainer);
+
+                const rowHeadersContainer = document.createElement('div');
+                rowHeadersContainer.className = 'grid sticky left-0 bg-white z-10';
+                rowHeadersContainer.style.gridTemplateRows = `repeat(${currentRack.rows}, 9rem)`;
+                rowHeadersContainer.style.gap = '1rem';
+                rowHeadersContainer.style.paddingTop = '1rem';
+                for (let r = 1; r <= currentRack.rows; r++) {
+                    const rowChar = String.fromCharCode(64 + r);
+                    const header = document.createElement('div');
+                    header.className = 'w-12 flex items-center justify-center font-bold text-gray-500 rounded-md transition-colors duration-200';
+                    header.textContent = rowChar;
+                    if (selectedSlotId && selectedSlotId.split('-')[0] === rowChar) {
+                        header.classList.add('header-highlight');
+                    }
+                    rowHeadersContainer.appendChild(header);
+                }
+                layoutContainer.appendChild(rowHeadersContainer);
+
+                const rackContainer = document.createElement('div');
+                rackContainer.id = 'mesh-rack';
+                rackContainer.className = 'grid gap-4 bg-gray-200 p-4 rounded-xl shadow-inner';
+                rackContainer.style.gridTemplateColumns = `repeat(${currentRack.cols}, 9rem)`;
+                rackContainer.style.gridTemplateRows = `repeat(${currentRack.rows}, 9rem)`;
+
+                for (let r = 1; r <= currentRack.rows; r++) {
+                    const rowChar = String.fromCharCode(64 + r);
+                    for (let c = 1; c <= currentRack.cols; c++) {
+                        const slotId = `${rowChar}-${c}`;
+                        const part = currentRack.slots[slotId];
+                        const slot = document.createElement('div');
+                        slot.id = `slot-${slotId}`;
+                        slot.dataset.slotId = slotId;
+                        slot.className = 'rack-slot aspect-square bg-gray-300/50 rounded-lg flex flex-col justify-between p-2 cursor-pointer transition-all duration-300 hover:bg-gray-300';
+                        let content = `<div class="text-sm font-bold text-gray-500">${slotId}</div>`;
+                        if (part) {
+                            slot.classList.add('bg-white', 'shadow');
+                            content += `
+                                <div class="text-center overflow-hidden min-w-0">
+                                    <div class="w-full h-4 rounded-full mb-2" style="background-color: ${part.color ? '#' + part.color : '#e5e7eb'};"></div>
+                                    <p class="font-bold text-gray-800 text-sm truncate">${s(part.partName)}</p>
+                                    <p class="text-xs text-gray-500 truncate">${s(part.partModelNumber, '')}</p>
+                                </div>
+                                <div class="text-right text-lg font-bold">${part.quantity}</div>`;
+                        } else if (isMoveMode) {
+                            slot.classList.add('move-mode-empty');
+                        }
+                        slot.innerHTML = content;
+                        rackContainer.appendChild(slot);
+                    }
+                }
+                layoutContainer.appendChild(rackContainer);
+                rackDisplayArea.appendChild(layoutContainer);
+
+                if (selectedSlotId) {
+                    const selectedEl = document.getElementById(`slot-${selectedSlotId}`);
+                    if (selectedEl) selectedEl.classList.add('selected-slot');
+                }
+                if (isMoveMode && moveOriginSlotId) {
+                    const originEl = document.getElementById(`slot-${moveOriginSlotId}`);
+                    if (originEl) originEl.classList.add('move-mode-origin');
+                }
+            }
+
+            // 詳細パネルの更新
+            function updateDetails(slotId) {
+                selectedSlotId = slotId;
+                const currentRack = racks.find(r => r.id === currentRackId);
+                let content = '';
+
+                if (!currentRack) {
+                    detailsPanel.innerHTML = '<div class="text-center text-gray-500 py-10"><ion-icon name="grid-outline" class="text-5xl mx-auto"></ion-icon><p class="mt-2">ラックを選択してください</p></div>';
+                    renderCurrentRack();
+                    return;
+                }
+
+                const part = slotId ? currentRack.slots[slotId] : null;
+
+                if (part) {
+                    content = `
+                        <div class="fade-in">
+                            <div class="flex items-center mb-4"><div class="w-4 h-4 rounded-full mr-3" style="background-color: ${part.color ? '#' + part.color : '#e5e7eb'};"></div><h3 class="text-xl font-bold">${s(part.partName)}</h3></div>
+                            <div class="space-y-2 text-sm">
+                                <p><strong class="w-24 inline-block text-gray-500">部品型番:</strong> ${s(part.partModelNumber, 'N/A')}</p>
+                                <p><strong class="w-24 inline-block text-gray-500">現在庫数:</strong> <span class="text-2xl font-bold">${part.quantity}</span></p>
+                                <p><strong class="w-24 inline-block text-gray-500">保管場所:</strong> <span class="text-lg font-bold">${currentRack.name} / ${slotId}</span></p>
+                            </div>
+                            <div class="mt-6 border-t pt-4 space-y-2">
+                                <button data-action="use" data-slot-id="${slotId}" class="w-full bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700">部品を使用</button>
+                                <button data-action="move" data-slot-id="${slotId}" class="w-full bg-gray-200 text-gray-800 px-4 py-2 rounded-md hover:bg-gray-300">箱を移動</button>
+                                <div class="grid grid-cols-2 gap-2">
+                                  <button data-action="edit" data-slot-id="${slotId}" class="w-full bg-gray-200 text-gray-800 px-4 py-2 rounded-md hover:bg-gray-300 flex items-center justify-center"><ion-icon name="pencil-outline" class="mr-2"></ion-icon>編集</button>
+                                  <button data-action="delete" data-slot-id="${slotId}" class="w-full bg-red-100 text-red-700 px-4 py-2 rounded-md hover:bg-red-200 flex items-center justify-center"><ion-icon name="trash-bin-outline" class="mr-2"></ion-icon>削除</button>
+                                </div>
+                                <hr class="my-2"/>
+                                <button data-action="show-shelf-qr" data-slot-id="${slotId}" class="w-full bg-gray-200 text-gray-800 px-4 py-2 rounded-md hover:bg-gray-300 flex items-center justify-center"><ion-icon name="grid-outline" class="mr-2"></ion-icon>棚QRコードを生成</button>
+                            </div>
+                        </div>`;
+                } else if (slotId) {
+                    content = `
+                        <div class="fade-in text-center py-6">
+                            <p class="text-lg font-bold mb-2">場所: ${currentRack.name} / ${slotId}</p>
+                            <ion-icon name="archive-outline" class="text-5xl text-gray-400 mx-auto"></ion-icon>
+                            <p class="mt-2 text-gray-500">この場所は空です</p>
+                            <div class="mt-6 space-y-2">
+                                <button data-action="store" data-slot-id="${slotId}" class="w-full bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700">新しい箱を格納</button>
+                                <button data-action="show-shelf-qr" data-slot-id="${slotId}" class="w-full bg-gray-200 text-gray-800 px-4 py-2 rounded-md hover:bg-gray-300 flex items-center justify-center"><ion-icon name="grid-outline" class="mr-2"></ion-icon>棚QRコードを生成</button>
+                            </div>
+                        </div>`;
+                } else {
+                    content = `
+                        <div class="text-center text-gray-500 py-10">
+                            <ion-icon name="grid-outline" class="text-5xl mx-auto"></ion-icon>
+                            <p class="mt-2">ラックの場所を選択して詳細を表示</p>
+                        </div>`;
+                }
+                detailsPanel.innerHTML = content;
+                renderCurrentRack();
+            }
+
+            // モーダル表示/非表示
+            function openModal(content) {
+                modalContent.innerHTML = content;
+                modal.classList.remove('hidden');
+            }
+
+            function closeModal() {
+                modal.classList.add('hidden');
+                modalContent.innerHTML = '';
+            }
+
+            // ラック作成モーダル
+            function showAddRackModal() {
+                openModal(`
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold mb-4 text-center">新しいラックを作成</h3>
+                        <form id="add-rack-form" class="space-y-4">
+                            <div>
+                                <label for="new-rack-name" class="text-sm font-medium text-gray-700">ラック名</label>
+                                <input id="new-rack-name" name="rackName" required class="w-full bg-gray-100 focus:bg-white border-gray-300 rounded-md mt-1 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 p-3" placeholder="例: A棟-3F-スチール棚">
+                            </div>
+                            <div class="grid grid-cols-2 gap-4">
+                                <div>
+                                    <label for="new-rack-rows" class="text-sm font-medium text-gray-700">縦 (行数)</label>
+                                    <input id="new-rack-rows" name="rows" type="number" min="1" max="26" required class="w-full bg-gray-100 focus:bg-white border-gray-300 rounded-md mt-1 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 p-3" value="5">
+                                </div>
+                                <div>
+                                    <label for="new-rack-cols" class="text-sm font-medium text-gray-700">横 (列数)</label>
+                                    <input id="new-rack-cols" name="cols" type="number" min="1" max="50" required class="w-full bg-gray-100 focus:bg-white border-gray-300 rounded-md mt-1 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 p-3" value="5">
+                                </div>
+                            </div>
+                        </form>
+                    </div>
+                    <div class="p-4 bg-gray-100 flex justify-end space-x-2 rounded-b-xl">
+                        <button id="cancel-btn" class="px-4 py-2 bg-gray-200 text-gray-800 rounded-md hover:bg-gray-300">キャンセル</button>
+                        <button id="confirm-add-rack-btn" type="submit" form="add-rack-form" class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700">作成</button>
+                    </div>`);
+                document.getElementById('add-rack-form').onsubmit = async (e) => {
+                    e.preventDefault();
+                    const formData = new FormData(e.target);
+                    const payload = {
+                        rack_name: formData.get('rackName'),
+                        rows: Number(formData.get('rows')),
+                        cols: Number(formData.get('cols'))
+                    };
+                    try {
+                        const created = await fetchJson(`${apiBase}/api/racks`, {
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json' },
+                            body: JSON.stringify(payload)
+                        });
+                        // 内部形式へ
+                        const newRack = {
+                            id: `rack-${created.rack_id}`,
+                            name: created.rack_name || payload.rack_name,
+                            rows: created.rows || payload.rows,
+                            cols: created.cols || payload.cols,
+                            slots: {}
+                        };
+                        racks.push(newRack);
+                        currentRackId = newRack.id;
+                        renderApp();
+                        closeModal();
+                    } catch (err) {
+                        console.error('ラック作成に失敗', err);
+                        alert('ラックの作成に失敗しました。サーバーの状態を確認してください。');
+                    }
+                };
+                document.getElementById('cancel-btn').onclick = closeModal;
+            }
+
+            // ラック削除モーダル
+            function showDeleteRackModal(rackId, rackName) {
+                const rackToDelete = racks.find(r => r.id === rackId);
+                const hasParts = Object.values(rackToDelete.slots).some(slot => slot !== null);
+                const warningMessage = hasParts ? '<p class="text-red-600 bg-red-100 p-3 rounded-lg text-sm mt-4"><ion-icon name="warning-outline" class="mr-2"></ion-icon>このラックには部品が保管されています。削除すると部品情報も失われます。</p>' : '';
+
+                openModal(`
+                    <div class="p-6">
+                        <h3 class="text-lg font-bold">ラックの削除</h3>
+                        <p class="mt-2 text-sm text-gray-600">本当に「<strong class="text-gray-900">${rackName}</strong>」を削除しますか？<br>この操作は取り消せません。</p>
+                        ${warningMessage}
+                    </div>
+                    <div class="p-4 bg-gray-50 flex justify-end space-x-2 rounded-b-xl">
+                        <button id="cancel-btn" class="px-4 py-2 bg-gray-200 text-gray-800 rounded-md hover:bg-gray-300">キャンセル</button>
+                        <button id="confirm-delete-btn" class="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700">削除</button>
+                    </div>`);
+
+                document.getElementById('confirm-delete-btn').onclick = async () => {
+                    try {
+                        // 内部ID("rack-1")から数値IDへ
+                        const rackNumericId = parseInt(String(rackId).replace(/[^0-9]/g, ''), 10);
+                        if (!Number.isFinite(rackNumericId)) throw new Error('無効なrack_id');
+                        await fetchJson(`${apiBase}/api/racks/${rackNumericId}`, { method: 'DELETE' });
+                        racks = racks.filter(r => r.id !== rackId);
+                        if (currentRackId === rackId) {
+                            currentRackId = racks.length > 0 ? racks[0].id : null;
+                        }
+                        renderApp();
+                        closeModal();
+                    } catch (err) {
+                        console.error('ラック削除に失敗', err);
+                        alert('ラックの削除に失敗しました。サーバーの状態を確認してください。');
+                    }
+                };
+                document.getElementById('cancel-btn').onclick = closeModal;
+            }
+
+            // 部品使用モーダル
+            function showUsePartModal(slotId) {
+                const currentRack = racks.find(r => r.id === currentRackId);
+                const part = currentRack.slots[slotId];
+                openModal(`
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold mb-2 text-center">「${s(part.partName)}」を使用</h3>
+                        <div class="p-4 rounded-lg">
+                            <label for="use-quantity" class="block text-sm font-medium text-gray-700">使用する数量</label>
+                            <p class="text-xs text-gray-500 mb-2">(現在庫: ${part.quantity})</p>
+                            <input id="use-quantity" type="number" min="1" max="${part.quantity}" class="w-full bg-gray-100 focus:bg-white border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 p-3" placeholder="数量を入力">
+                            <p id="use-error" class="mt-2 text-sm text-red-600 hidden"></p>
+                        </div>
+                    </div>
+                    <div class="p-4 bg-gray-100 flex justify-end space-x-2 rounded-b-xl">
+                        <button id="cancel-btn" class="px-4 py-2 bg-gray-200 text-gray-800 rounded-md hover:bg-gray-300">キャンセル</button>
+                        <button id="confirm-use-btn" class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700">確定</button>
+                    </div>`);
+
+                const qtyInput = document.getElementById('use-quantity');
+                const errEl = document.getElementById('use-error');
+                const confirmBtn = document.getElementById('confirm-use-btn');
+
+                function showErrorMsg(msg) {
+                    errEl.textContent = msg;
+                    errEl.classList.remove('hidden');
+                }
+                function hideErrorMsg() {
+                    errEl.textContent = '';
+                    errEl.classList.add('hidden');
+                }
+                function validateUseInput() {
+                    const v = parseInt(qtyInput.value);
+                    if (!Number.isFinite(v) || v < 1) {
+                        showErrorMsg('1以上の数量を入力してください。');
+                        confirmBtn.disabled = true;
+                        return false;
+                    }
+                    if (v > part.quantity) {
+                        showErrorMsg(`現在庫数(${part.quantity})を超えています。`);
+                        confirmBtn.disabled = true;
+                        return false;
+                    }
+                    hideErrorMsg();
+                    confirmBtn.disabled = false;
+                    return true;
+                }
+
+                qtyInput.addEventListener('input', validateUseInput);
+                validateUseInput();
+
+                document.getElementById('confirm-use-btn').onclick = async () => {
+                    if (!validateUseInput()) { qtyInput.focus(); return; }
+                    const quantity = parseInt(qtyInput.value);
+                    const rackNumericId = getRackNumericId(currentRack);
+                    if (!Number.isFinite(rackNumericId)) {
+                        alert('ラックIDの解決に失敗しました');
+                        return;
+                    }
+                    try {
+                        const res = await fetchJson(`${apiBase}/api/racks/${rackNumericId}/slots/${encodeURIComponent(slotId)}/use`, {
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json' },
+                            body: JSON.stringify({ quantity_to_use: quantity })
+                        });
+                        const remain = Number(res.remaining_quantity);
+                        if (Number.isFinite(remain)) {
+                            if (remain <= 0) {
+                                currentRack.slots[slotId] = null;
+                            } else {
+                                part.quantity = remain;
+                            }
+                        } else {
+                            part.quantity -= quantity;
+                            if (part.quantity <= 0) currentRack.slots[slotId] = null;
+                        }
+                        updateDetails(slotId);
+                        closeModal();
+                    } catch (err) {
+                        console.error('使用APIに失敗', err);
+                        alert('部品の使用に失敗しました。サーバーの状態を確認してください。');
+                    }
+                };
+                document.getElementById('cancel-btn').onclick = closeModal;
+            }
+
+            // 箱の削除モーダルを追加
+            function showDeletePartModal(slotId) {
+                const currentRack = racks.find(r => r.id === currentRackId);
+                const part = currentRack.slots[slotId];
+                openModal(`
+                    <div class="p-6">
+                        <h3 class="text-lg font-bold">箱の削除</h3>
+                        <p class="mt-2 text-sm text-gray-600">本当に「<strong class="text-gray-900">${s(part.partName)}</strong>」を棚から削除しますか？</p>
+                        <p class="text-red-600 bg-red-100 p-3 rounded-lg text-sm mt-4"><ion-icon name="warning-outline" class="mr-2"></ion-icon>この操作は取り消せません。</p>
+                    </div>
+                    <div class="p-4 bg-gray-50 flex justify-end space-x-2 rounded-b-xl">
+                        <button id="cancel-btn" class="px-4 py-2 bg-gray-200 text-gray-800 rounded-md hover:bg-gray-300">キャンセル</button>
+                        <button id="confirm-delete-part-btn" class="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700">削除</button>
+                    </div>`);
+
+                document.getElementById('confirm-delete-part-btn').onclick = async () => {
+                    const rackNumericId = getRackNumericId(currentRack);
+                    if (!Number.isFinite(rackNumericId)) {
+                        alert('ラックIDの解決に失敗しました');
+                        return;
+                    }
+                    try {
+                        await fetchJson(`${apiBase}/api/racks/${rackNumericId}/slots/${encodeURIComponent(slotId)}`, { method: 'DELETE' });
+                        currentRack.slots[slotId] = null;
+                        updateDetails(slotId);
+                        closeModal();
+                    } catch (err) {
+                        console.error('部品削除に失敗', err);
+                        alert('部品の削除に失敗しました。サーバーの状態を確認してください。');
+                    }
+                };
+                document.getElementById('cancel-btn').onclick = closeModal;
+            }
+
+            // 箱の編集モーダルを追加
+            function showEditPartModal(slotId) {
+                const currentRack = racks.find(r => r.id === currentRackId);
+                const part = currentRack.slots[slotId];
+                const colorPalette = ['4A90E2', '50E3C2', 'F5A623', 'D0021B', '9013FE', '7ED321', 'F8E71C', 'BD10E0', '4A4A4A', 'E9E9E9'];
+
+                let colorPaletteHtml = colorPalette.map(color => `
+                    <button type="button" data-color="${color}" class="color-swatch w-8 h-8 rounded-full border-2" style="background-color: #${color};"></button>
+                `).join('');
+
+                openModal(`
+                    <style>
+                        .color-swatch.selected {
+                            outline: 2px solid #4f46e5;
+                            outline-offset: 2px;
+                        }
+                    </style>
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold mb-4 text-center">箱の情報を編集</h3>
+                        <form id="edit-part-form" class="space-y-4">
+                            <div>
+                                <label class="text-sm font-medium text-gray-700">部品名</label>
+                                <input name="partName" required class="w-full bg-gray-100 focus:bg-white border-gray-300 rounded-md mt-1 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 p-3" value="${s(part.partName)}">
+                            </div>
+                            <div>
+                                <label class="text-sm font-medium text-gray-700">部品型番 (任意)</label>
+                                <input name="partModelNumber" class="w-full bg-gray-100 focus:bg-white border-gray-300 rounded-md mt-1 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 p-3" value="${s(part.partModelNumber, '')}">
+                            </div>
+                            <div>
+                                <label class="text-sm font-medium text-gray-700">数量</label>
+                                <input name="quantity" type="number" min="0" required class="w-full bg-gray-100 focus:bg-white border-gray-300 rounded-md mt-1 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 p-3" value="${part.quantity}">
+                            </div>
+                            <div>
+                                <label class="text-sm font-medium text-gray-700">カラーラベル</label>
+                                <div id="color-palette" class="flex flex-wrap gap-2 mt-2 p-2 bg-white rounded-md">${colorPaletteHtml}</div>
+                                <input type="hidden" name="color" value="${s(part.color, '')}">
+                            </div>
+                        </form>
+                    </div>
+                    <div class="p-4 bg-gray-100 flex justify-end space-x-2 rounded-b-xl">
+                        <button id="cancel-btn" class="px-4 py-2 bg-gray-200 text-gray-800 rounded-md hover:bg-gray-300">キャンセル</button>
+                        <button id="confirm-edit-part-btn" type="submit" form="edit-part-form" class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700">保存</button>
+                    </div>`);
+                
+                const colorPaletteEl = document.getElementById('color-palette');
+                const hiddenColorInput = document.querySelector('input[name="color"]');
+
+                // Set initial selected color
+                const initialColor = (part.color || '').toString().toUpperCase();
+                const initialColorEl = initialColor ? colorPaletteEl.querySelector(`[data-color="${initialColor}"]`) : null;
+                if (initialColorEl) {
+                    initialColorEl.classList.add('selected');
+                }
+                
+                // Handle color selection
+                colorPaletteEl.addEventListener('click', e => {
+                    const swatch = e.target.closest('.color-swatch');
+                    if (!swatch) return;
+                    
+                    // Update UI
+                    colorPaletteEl.querySelector('.selected')?.classList.remove('selected');
+                    swatch.classList.add('selected');
+
+                    // Update hidden input
+                    hiddenColorInput.value = swatch.dataset.color;
+                });
+
+                document.getElementById('edit-part-form').onsubmit = async (e) => {
+                    e.preventDefault();
+                    const formData = new FormData(e.target);
+                    const newQuantity = parseInt(formData.get('quantity'));
+                    const rackNumericId = getRackNumericId(currentRack);
+                    if (!Number.isFinite(rackNumericId)) {
+                        alert('ラックIDの解決に失敗しました');
+                        return;
+                    }
+
+                    if (newQuantity === 0) {
+                        try {
+                            await fetchJson(`${apiBase}/api/racks/${rackNumericId}/slots/${encodeURIComponent(slotId)}`, { method: 'DELETE' });
+                            currentRack.slots[slotId] = null;
+                            updateDetails(slotId);
+                            closeModal();
+                        } catch (err) {
+                            console.error('部品削除(数量0)に失敗', err);
+                            alert('削除に失敗しました。サーバーをご確認ください。');
+                        }
+                        return;
+                    }
+
+                    const body = {
+                        part_name: formData.get('partName'),
+                        part_model_number: (formData.get('partModelNumber') || '').toString().trim() || null,
+                        quantity: newQuantity,
+                        color_code: (formData.get('color') || '').toString().replace(/^#/, '') || null
+                    };
+
+                    try {
+                        const res = await fetchJson(`${apiBase}/api/racks/${rackNumericId}/slots/${encodeURIComponent(slotId)}`, {
+                            method: 'PUT',
+                            headers: { 'Content-Type': 'application/json' },
+                            body: JSON.stringify(body)
+                        });
+                        const saved = res.slot || body;
+                        currentRack.slots[slotId] = mapApiSlotToAppPart(saved);
+                        updateDetails(slotId);
+                        closeModal();
+                    } catch (err) {
+                        console.error('部品更新に失敗', err);
+                        alert('更新に失敗しました。サーバーの状態を確認してください。');
+                    }
+                };
+                document.getElementById('cancel-btn').onclick = closeModal;
+            }
+
+
+            // 新規格納モーダル
+            function showStorePartModal(callback) {
+                openModal(`
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold mb-4 text-center">新しい部品の情報を入力</h3>
+                        <form id="store-form" class="space-y-4">
+                            <div><label class="text-sm font-medium text-gray-700">部品名</label><input name="partName" required class="w-full bg-gray-100 focus:bg-white border-gray-300 rounded-md mt-1 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 p-3"></div>
+                            <div><label class="text-sm font-medium text-gray-700">部品型番 (任意)</label><input name="partModelNumber" class="w-full bg-gray-100 focus:bg-white border-gray-300 rounded-md mt-1 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 p-3"></div>
+                            <div><label class="text-sm font-medium text-gray-700">数量</label><input name="quantity" type="number" min="1" required class="w-full bg-gray-100 focus:bg-white border-gray-300 rounded-md mt-1 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 p-3"></div>
+                        </form>
+                    </div>
+                    <div class="p-4 bg-gray-100 flex justify-end space-x-2 rounded-b-xl">
+                        <button id="cancel-btn" class="px-4 py-2 bg-gray-200 text-gray-800 rounded-md hover:bg-gray-300">キャンセル</button>
+                        <button id="confirm-store-btn" type="submit" form="store-form" class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700">棚をスキャンして格納</button>
+                    </div>`);
+
+                document.getElementById('store-form').onsubmit = (e) => {
+                    e.preventDefault();
+                    const formData = new FormData(e.target);
+                    const newPart = {
+                        partName: formData.get('partName'),
+                        partModelNumber: formData.get('partModelNumber'),
+                        quantity: parseInt(formData.get('quantity')),
+                        color: ['4A90E2', '50E3C2', 'F5A623', 'D0021B', '9013FE'][Math.floor(Math.random() * 5)]
+                    };
+                    callback(newPart);
+                };
+                document.getElementById('cancel-btn').onclick = closeModal;
+            }
+
+            // QRスキャナーモーダル
+            function showQrScannerModal(title, instruction, onScan) {
+                openModal(`
+                    <div class="p-6 text-center">
+                        <h3 class="text-xl font-bold mb-4">${title}</h3>
+                        <div class="grid grid-cols-2 gap-4 items-center">
+                            <div class="text-center">
+                            <ion-icon name="grid-outline" class="text-6xl text-gray-400 mx-auto"></ion-icon>
+                            <p class="mt-2 font-semibold">${instruction}</p>
+                            </div>
+                            <div class="bg-black aspect-square rounded-lg flex items-center justify-center relative overflow-hidden">
+                            <p class="text-gray-500">カメラ入力</p>
+                            <div class="scanner-line absolute left-0 h-1 bg-red-500 w-full"></div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="p-4 bg-gray-50 flex justify-end space-x-2 rounded-b-xl">
+                        <button id="cancel-btn" class="px-4 py-2 bg-gray-200 text-gray-800 rounded-md hover:bg-gray-300">キャンセル</button>
+                    </div>`);
+
+                setTimeout(() => onScan(), 2000);
+                document.getElementById('cancel-btn').onclick = closeModal;
+            }
+
+            // 棚QR表示モーダル
+            function showShelfQrModal(slotId) {
+                const currentRack = racks.find(r => r.id === currentRackId);
+                if (!currentRack) return;
+                const rackNumericId = parseInt(String(currentRack.id).replace(/[^0-9]/g, ''), 10);
+                const payload = {
+                    type: 'rack_slot',
+                    rack_id: Number.isFinite(rackNumericId) ? rackNumericId : currentRack.id,
+                    slot_identifier: slotId
+                };
+                const qrData = encodeURIComponent(JSON.stringify(payload));
+        openModal(`
+                    <div class="p-6 text-center">
+                        <h3 class="text-lg font-bold mb-2">棚QRコード</h3>
+                        <p class="text-sm text-gray-600 mb-4">このQRコードを印刷して棚の<br><strong>${slotId}</strong>の場所に貼り付けてください。</p>
+            <img src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${qrData}" alt="QR Code" class="mx-auto border-4">
+                        <p class="mt-2 font-semibold">${currentRack.name}</p>
+                        <p class="text-xs text-gray-500">場所: ${slotId}</p>
+                    </div>
+                    <div class="p-4 bg-gray-50 flex justify-end space-x-2 rounded-b-xl">
+                        <button id="cancel-btn" class="px-4 py-2 bg-gray-200 text-gray-800 rounded-md hover:bg-gray-300">閉じる</button>
+                        <button id="print-btn" class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700">印刷</button>
+                    </div>`);
+                document.getElementById('print-btn').onclick = () => console.log('印刷処理を実行 (ダミー)');
+                document.getElementById('cancel-btn').onclick = closeModal;
+            }
+
+            // 棚QR一括生成モーダル
+            function showBulkShelfQrModal(rack) {
+                let qrGridHtml = '';
+                for (let r = 1; r <= rack.rows; r++) {
+                    const rowChar = String.fromCharCode(64 + r);
+                    for (let c = 1; c <= rack.cols; c++) {
+                        const slotId = `${rowChar}-${c}`;
+                        const rackNumericId = parseInt(String(rack.id).replace(/[^0-9]/g, ''), 10);
+                        const payload = {
+                            type: 'rack_slot',
+                            rack_id: Number.isFinite(rackNumericId) ? rackNumericId : rack.id,
+                            slot_identifier: slotId
+                        };
+                        const qrData = encodeURIComponent(JSON.stringify(payload));
+                        qrGridHtml += `
+                            <div class="qr-item border rounded-md p-2 flex flex-col items-center justify-center bg-white">
+                <img src="https://api.qrserver.com/v1/create-qr-code/?size=100x100&data=${qrData}" alt="QR Code" class="mx-auto">
+                                <p class="mt-2 font-bold text-center text-sm">${rack.name}</p>
+                                <p class="font-mono text-center text-lg">${slotId}</p>
+                            </div>`;
+                    }
+                }
+                const modalHtml = `
+                    <style>
+                        #printable-qrs { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
+                        @media print {
+                            body > *:not(#modal-content) { display: none !important; }
+                            #modal, #modal > div { display: block !important; position: static !important; background: none !important; width: 100% !important; height: auto !important; max-width: 100% !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; }
+                            .modal-header, .modal-footer { display: none !important; }
+                            #printable-qrs { grid-template-columns: repeat(${rack.cols}, 1fr); max-height: none !important; overflow: visible !important; }
+                        }
+                    </style>
+                    <div class="p-6 modal-header">
+                        <h3 class="text-lg font-bold mb-2">棚QRコード一括生成</h3>
+                        <p class="text-sm text-gray-600">「${rack.name}」のすべての棚QRコードです。印刷して貼り付けてください。</p>
+                    </div>
+                    <div id="printable-qrs" class="p-4 max-h-[60vh] overflow-y-auto bg-gray-100">${qrGridHtml}</div>
+                    <div class="p-4 bg-gray-50 flex justify-end space-x-2 modal-footer rounded-b-xl">
+                        <button id="cancel-btn" class="px-4 py-2 bg-gray-200 text-gray-800 rounded-md hover:bg-gray-300">閉じる</button>
+                        <button id="print-btn" class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700">印刷</button>
+                    </div>`;
+                openModal(modalHtml);
+                modalContent.classList.remove('max-w-md');
+                modalContent.classList.add('max-w-4xl');
+                document.getElementById('print-btn').onclick = () => window.print();
+                document.getElementById('cancel-btn').onclick = () => {
+                    modalContent.classList.add('max-w-md');
+                    modalContent.classList.remove('max-w-4xl');
+                    closeModal();
+                };
+            }
+
+            // FABメニューの開閉
+            fabMain.addEventListener('click', () => {
+                const isExpanded = fabMain.getAttribute('aria-expanded') === 'true';
+                fabMain.setAttribute('aria-expanded', !isExpanded);
+                fabIcon.classList.toggle('rotate-45');
+                if (!isExpanded) {
+                    fabMenuItems.forEach((item, index) => {
+                        item.style.transitionDelay = `${index * 40}ms`;
+                        item.style.transform = 'scale(1)';
+                    });
+                } else {
+                    fabMenuItems.forEach(item => { item.style.transform = 'scale(0)'; });
+                }
+            });
+
+            // FAB: ラック作成
+            document.getElementById('add-rack-btn').addEventListener('click', showAddRackModal);
+
+            // FAB: QR入庫フロー
+            document.getElementById('qr-stock-in-btn').addEventListener('click', () => {
+                showStorePartModal((newPart) => {
+                    showQrScannerModal('QR入庫', '棚QRコードを読み取ってください', async () => {
+                        const currentRack = racks.find(r => r.id === currentRackId);
+                        if (!currentRack) {
+                            console.error('対象のラックが見つかりません。');
+                            closeModal();
+                            return;
+                        }
+                        
+                        let emptySlot = null;
+                        for (let r = 1; r <= currentRack.rows; r++) {
+                            const rowChar = String.fromCharCode(64 + r);
+                            for (let c = 1; c <= currentRack.cols; c++) {
+                                const slotId = `${rowChar}-${c}`;
+                                if (!currentRack.slots[slotId]) {
+                                    emptySlot = slotId;
+                                    break;
+                                }
+                            }
+                            if (emptySlot) break;
+                        }
+
+                        if (!emptySlot) {
+                            closeModal();
+                            console.error('現在のラックに空きがありません。');
+                            return;
+                        }
+
+                        const rackNumericId = getRackNumericId(currentRack);
+                        if (!Number.isFinite(rackNumericId)) {
+                            alert('ラックIDの解決に失敗しました');
+                            return;
+                        }
+                        const body = {
+                            part_name: newPart.partName,
+                            part_model_number: (newPart.partModelNumber || '').toString().trim() || null,
+                            quantity: newPart.quantity,
+                            color_code: (newPart.color || '').toString().replace(/^#/, '') || null
+                        };
+                        try {
+                            const res = await fetchJson(`${apiBase}/api/racks/${rackNumericId}/slots/${encodeURIComponent(emptySlot)}`, {
+                                method: 'POST',
+                                headers: { 'Content-Type': 'application/json' },
+                                body: JSON.stringify(body)
+                            });
+                            const saved = res.slot || body;
+                            currentRack.slots[emptySlot] = mapApiSlotToAppPart(saved);
+                            updateDetails(emptySlot);
+                            closeModal();
+                        } catch (err) {
+                            console.error('部品の格納に失敗', err);
+                            alert('格納に失敗しました。サーバーの状態を確認してください。');
+                        }
+                    });
+                });
+            });
+
+            // FAB: QR出庫フロー
+            document.getElementById('qr-stock-out-btn').addEventListener('click', () => {
+                showQrScannerModal('QR出庫', '出庫する棚QRコードを読み取ってください', async () => {
+                    const currentRack = racks.find(r => r.id === currentRackId);
+                    if (!currentRack) {
+                        console.error('対象のラックが見つかりません。');
+                        closeModal();
+                        return;
+                    }
+                    // 擬似的に、先頭の在庫ありスロットをスキャン結果とする
+                    let targetSlot = null;
+                    outer: for (let r = 1; r <= currentRack.rows; r++) {
+                        const rowChar = String.fromCharCode(64 + r);
+                        for (let c = 1; c <= currentRack.cols; c++) {
+                            const slotId = `${rowChar}-${c}`;
+                            if (currentRack.slots[slotId]) { targetSlot = slotId; break outer; }
+                        }
+                    }
+                    closeModal();
+                    if (!targetSlot) {
+                        alert('このラックに出庫可能な部品が見つかりません。');
+                        return;
+                    }
+                    updateDetails(targetSlot);
+                    // 詳細パネルが更新された直後に使用モーダルを開く
+                    showUsePartModal(targetSlot);
+                });
+            });
+
+            // 一括QR生成ボタン
+            bulkQrBtn.addEventListener('click', () => {
+                const currentRack = racks.find(r => r.id === currentRackId);
+                if (currentRack) showBulkShelfQrModal(currentRack);
+            });
+
+            // ラックタブのクリック処理
+            rackTabsEl.addEventListener('click', e => {
+                e.preventDefault();
+                const tab = e.target.closest('.rack-tab-item');
+                const deleteBtn = e.target.closest('[data-action="delete-rack"]');
+
+                if (deleteBtn) {
+                    showDeleteRackModal(deleteBtn.dataset.rackId, deleteBtn.dataset.rackName);
+                } else if (tab) {
+                    currentRackId = tab.dataset.rackId;
+                    selectedSlotId = null;
+                    isMoveMode = false;
+                    renderApp();
+                }
+            });
+
+            // 詳細パネルのボタン操作
+            detailsPanel.addEventListener('click', e => {
+                const button = e.target.closest('button');
+                if (!button) return;
+
+                const { action, slotId } = button.dataset;
+                const currentRack = racks.find(r => r.id === currentRackId);
+                if (!currentRack) return;
+
+                switch (action) {
+                    case 'use': showUsePartModal(slotId); break;
+                    case 'store': showStorePartModal(async (newPart) => {
+                        const rackNumericId = getRackNumericId(currentRack);
+                        if (!Number.isFinite(rackNumericId)) {
+                            alert('ラックIDの解決に失敗しました');
+                            return;
+                        }
+                        const body = {
+                            part_name: newPart.partName,
+                            part_model_number: (newPart.partModelNumber || '').toString().trim() || null,
+                            quantity: newPart.quantity,
+                            color_code: (newPart.color || '').toString().replace(/^#/, '') || null
+                        };
+                        try {
+                            const res = await fetchJson(`${apiBase}/api/racks/${rackNumericId}/slots/${encodeURIComponent(slotId)}`, {
+                                method: 'POST',
+                                headers: { 'Content-Type': 'application/json' },
+                                body: JSON.stringify(body)
+                            });
+                            const saved = res.slot || body;
+                            currentRack.slots[slotId] = mapApiSlotToAppPart(saved);
+                            updateDetails(slotId);
+                            closeModal();
+                        } catch (err) {
+                            console.error('部品の格納に失敗', err);
+                            alert('格納に失敗しました。スロットが空か、サーバーの状態をご確認ください。');
+                        }
+                    }); break;
+                    case 'move':
+                        isMoveMode = true;
+                        moveOriginSlotId = slotId;
+                        detailsPanel.innerHTML = `<div class="fade-in text-center py-10"><ion-icon name="move-outline" class="text-5xl text-indigo-500 mx-auto"></ion-icon><p class="mt-2 font-bold">移動先の空き場所を選択してください</p><p class="text-sm text-gray-500">(移動元: ${slotId})</p><button id="cancel-move-btn" class="mt-4 text-sm text-red-600">移動をキャンセル</button></div>`;
+                        document.getElementById('cancel-move-btn').onclick = () => {
+                            isMoveMode = false;
+                            moveOriginSlotId = null;
+                            updateDetails(slotId);
+                        };
+                        renderCurrentRack();
+                        break;
+                    case 'show-shelf-qr': showShelfQrModal(slotId); break;
+                    case 'edit': showEditPartModal(slotId); break;
+                    case 'delete': showDeletePartModal(slotId); break;
+                }
+            });
+
+            // メッシュラックのクリック処理
+            document.body.addEventListener('click', (e) => {
+                const rackDisplayArea = document.getElementById('rack-display-area');
+                if (rackDisplayArea && rackDisplayArea.contains(e.target)) {
+                    const slotEl = e.target.closest('.rack-slot');
+                    if (!slotEl) return;
+                    const clickedSlotId = slotEl.dataset.slotId;
+                    const currentRack = racks.find(r => r.id === currentRackId);
+                    if (!currentRack) return;
+
+                    if (isMoveMode) {
+                        if (!currentRack.slots[clickedSlotId] && clickedSlotId !== moveOriginSlotId) {
+                            const rackNumericId = getRackNumericId(currentRack);
+                            if (!Number.isFinite(rackNumericId)) {
+                                alert('ラックIDの解決に失敗しました');
+                                return;
+                            }
+                            // サーバーに移動リクエスト
+                            (async () => {
+                                try {
+                                    await fetchJson(`${apiBase}/api/racks/move`, {
+                                        method: 'POST',
+                                        headers: { 'Content-Type': 'application/json' },
+                                        body: JSON.stringify({
+                                            from_rack_id: rackNumericId,
+                                            from_slot_identifier: moveOriginSlotId,
+                                            to_rack_id: rackNumericId,
+                                            to_slot_identifier: clickedSlotId
+                                        })
+                                    });
+                                    currentRack.slots[clickedSlotId] = currentRack.slots[moveOriginSlotId];
+                                    currentRack.slots[moveOriginSlotId] = null;
+                                    isMoveMode = false;
+                                    moveOriginSlotId = null;
+                                    updateDetails(clickedSlotId);
+                                } catch (err) {
+                                    console.error('移動に失敗', err);
+                                    alert('移動に失敗しました。スロットの状態やサーバーをご確認ください。');
+                                }
+                            })();
+                        }
+                    } else {
+                        updateDetails(clickedSlotId);
+                    }
+                }
+            });
+
+            // 部品検索
+            searchInput.addEventListener('input', () => {
+                const searchTerm = searchInput.value.toLowerCase();
+                document.querySelectorAll('.rack-slot').forEach(slot => {
+                    slot.classList.remove('highlight-slot');
+                    const currentRack = racks.find(r => r.id === currentRackId);
+                    if (!currentRack || searchTerm.length < 2) return;
+                    const part = currentRack.slots[slot.dataset.slotId];
+                    if (part && (part.partName.toLowerCase().includes(searchTerm) || (part.partModelNumber && part.partModelNumber.toLowerCase().includes(searchTerm)))) {
+                        slot.classList.add('highlight-slot');
+                    }
+                });
+            });
+
+            // モーダルの黒い背景クリックで閉じる
+            modal.addEventListener('click', (e) => {
+                if (e.target === modal) {
+                    closeModal();
+                }
+            });
+
+            // 初期データロード → レンダリング
+            (async function init() {
+                // 簡易ローディング表示
+                const rackNameEl = document.getElementById('rack-name');
+                rackNameEl.textContent = '読み込み中...';
+                try {
+                    const apiData = await loadRacksFromApi();
+                    racks = transformApiDataToAppData(apiData);
+                    currentRackId = racks.length > 0 ? racks[0].id : null;
+                } catch (e) {
+                    console.error('APIからのデータ取得に失敗したため、モックデータを使用します。', e);
+                    racks = transformApiDataToAppData(mockApiData);
+                    currentRackId = racks.length > 0 ? racks[0].id : null;
+                }
+                renderApp();
+            })();
+        });
+    </script>
+
+</body>
+
+</html>
+
diff --git "a/javascript-version/public/production-management/\347\224\237\347\224\243\346\225\260\347\256\241\347\220\206\343\203\232\343\203\274\343\202\270.html" "b/javascript-version/public/production-management/\347\224\237\347\224\243\346\225\260\347\256\241\347\220\206\343\203\232\343\203\274\343\202\270.html"
new file mode 100644
index 000000000..e30150ee7
--- /dev/null
+++ "b/javascript-version/public/production-management/\347\224\237\347\224\243\346\225\260\347\256\241\347\220\206\343\203\232\343\203\274\343\202\270.html"
@@ -0,0 +1,462 @@
+<!DOCTYPE html>
+<html lang="ja">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>生産数管理</title>
+    <!-- Tailwind CSSを読み込む -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Google Fonts (Inter) を読み込む -->
+    <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=Inter:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;700&display=swap"
+        rel="stylesheet">
+    <!-- Ioniconsを読み込む -->
+    <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
+    <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
+    <style>
+        /* フォント設定 */
+        body {
+            font-family: 'Inter', 'Noto Sans JP', sans-serif;
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
+        }
+
+        /* スクロールバーのスタイル（任意） */
+        ::-webkit-scrollbar {
+            width: 8px;
+        }
+
+        ::-webkit-scrollbar-track {
+            background: #F4F5FA;
+        }
+
+        ::-webkit-scrollbar-thumb {
+            background: #94a3b8;
+            border-radius: 4px;
+        }
+
+        ::-webkit-scrollbar-thumb:hover {
+            background: #64748b;
+        }
+
+        /* アニメーション */
+        .fade-in {
+            animation: fadeIn 0.5s ease-in-out forwards;
+        }
+
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+                transform: translateY(10px);
+            }
+
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        .bar-grow {
+            animation: grow 0.5s ease-out forwards;
+            transform-origin: bottom;
+        }
+
+        @keyframes grow {
+            from {
+                transform: scaleY(0);
+            }
+
+            to {
+                transform: scaleY(1);
+            }
+        }
+
+        .chart-line {
+            stroke-dasharray: 1000;
+            stroke-dashoffset: 1000;
+            animation: dash 1.5s ease-out forwards;
+        }
+
+        @keyframes dash {
+            to {
+                stroke-dashoffset: 0;
+            }
+        }
+    </style>
+</head>
+
+<body class="bg-gray-100 text-gray-800">
+
+    <div class="flex flex-col min-h-screen">
+
+        <!-- メインコンテンツ -->
+        <main class="flex-grow container mx-auto p-4 sm:p-6 lg:p-8">
+
+            <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
+                <!-- 左側コンテンツ -->
+                <div class="lg:col-span-3 flex flex-col gap-6">
+                    <!-- 生産推移グラフ -->
+                    <div class="bg-white p-6 rounded-xl shadow-md fade-in flex-grow flex flex-col">
+                        <div class="flex justify-between items-center mb-4">
+                            <h2 class="text-2xl font-bold">生産推移</h2>
+                            <div id="chart-toggle" class="flex space-x-1 bg-gray-200 p-1 rounded-lg">
+                                <button data-period="week"
+                                    class="chart-btn bg-white text-indigo-600 px-3 py-1 rounded-md text-sm font-semibold">週間</button>
+                                <button data-period="month"
+                                    class="chart-btn text-gray-600 px-3 py-1 rounded-md text-sm font-semibold">月間</button>
+                            </div>
+                        </div>
+                        <div class="flex justify-end items-center space-x-4 text-sm mb-2">
+                            <div class="flex items-center">
+                                <div class="w-3 h-3 bg-sky-300 rounded-sm mr-2"></div>計画数
+                            </div>
+                            <div class="flex items-center">
+                                <div class="w-3 h-3 bg-indigo-500 rounded-sm mr-2"></div>実績数
+                            </div>
+                            <div class="flex items-center">
+                                <div class="w-3 h-1 bg-red-500 mr-2"></div>不良率
+                            </div>
+                        </div>
+                        <div id="combo-chart-container" class="mt-4 relative flex-grow min-h-[20rem]">
+                            <!-- SVGグラフはJSで描画 -->
+                        </div>
+                    </div>
+                    <!-- 下段グラフ -->
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                        <div class="bg-white rounded-xl shadow-md p-6 fade-in">
+                            <h3 class="font-bold mb-2 text-lg">期間内 良品率</h3>
+                            <div class="flex items-center">
+                                <div id="yield-chart-container" class="relative w-32 h-32 flex-shrink-0"></div>
+                                <div class="ml-6">
+                                    <p class="text-sm"><span class="font-semibold">総生産数:</span> <span
+                                            id="yield-total">0</span></p>
+                                    <p class="text-sm"><span class="font-semibold">不良品:</span> <span id="yield-fail"
+                                            class="text-red-600">0</span></p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="bg-white rounded-xl shadow-md p-6 fade-in">
+                            <h3 class="font-bold mb-2 text-lg">期間内 不良品内訳</h3>
+                            <div id="fail-reasons-container" class="space-y-3 text-sm">
+                                <!-- 不良品内訳はJSで描画 -->
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!-- 右側: 今日の進捗 -->
+                <div class="lg:col-span-1 bg-white p-6 rounded-xl shadow-md fade-in flex flex-col">
+                    <h2 class="text-2xl font-bold mb-4 flex-shrink-0">今日の進捗</h2>
+                    <!-- PC表示 (縦長) -->
+                    <div class="hidden lg:flex flex-col items-center justify-between flex-grow pt-4">
+                        <div class="text-center w-full">
+                            <p class="text-lg font-semibold">生産計画</p>
+                            <p id="today-plan-lg" class="text-4xl font-bold">0</p>
+                        </div>
+                        <div class="relative w-20 flex-grow bg-gray-200 rounded-full my-4">
+                            <div id="today-progress-bar-lg"
+                                class="absolute bottom-0 w-full bg-gradient-to-t from-blue-500 to-cyan-400 rounded-full transition-all duration-500"
+                                style="height: 0%;"></div>
+                        </div>
+                        <div id="today-progress-text-lg" class="text-5xl font-bold mb-4">0%</div>
+                        <div class="text-center w-full">
+                            <p class="text-lg font-semibold">実績</p>
+                            <p id="today-actual-lg" class="text-4xl font-bold text-indigo-600">0</p>
+                        </div>
+                    </div>
+                    <!-- スマホ表示 (横長) -->
+                    <div class="lg:hidden">
+                        <div class="flex justify-between items-baseline mb-2">
+                            <div>
+                                <p class="font-semibold">実績</p>
+                                <p id="today-actual-sm" class="text-2xl font-bold text-indigo-600">0</p>
+                            </div>
+                            <div>
+                                <p class="text-right font-semibold">計画</p>
+                                <p id="today-plan-sm" class="text-2xl font-bold">0</p>
+                            </div>
+                        </div>
+                        <div class="w-full bg-gray-200 rounded-full h-6">
+                            <div id="today-progress-bar-sm"
+                                class="bg-gradient-to-r from-blue-500 to-cyan-400 h-6 rounded-full text-center text-white font-bold flex items-center justify-center"
+                                style="width: 0%;">
+                                <span id="today-progress-text-sm">0%</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- テーブル -->
+            <div class="mt-6 bg-white rounded-xl shadow-md p-6 fade-in" style="animation-delay: 0.1s;">
+                <div class="flex flex-col md:flex-row justify-between items-center mb-4">
+                    <h2 class="text-2xl font-bold">生産レポート一覧</h2>
+                    <div class="flex items-center space-x-2 mt-4 md:mt-0">
+                        <input type="date" id="filter-date" class="border-gray-300 rounded-md shadow-sm">
+                        <input type="text" id="filter-name" placeholder="製品名で検索"
+                            class="border-gray-300 rounded-md shadow-sm">
+                    </div>
+                </div>
+
+                <div class="overflow-x-auto">
+                    <table class="w-full text-sm text-left">
+                        <thead class="text-xs text-gray-700 uppercase bg-gray-50">
+                            <tr>
+                                <th class="px-6 py-3">日付</th>
+                                <th class="px-6 py-3">製品名</th>
+                                <th class="px-6 py-3">計画数</th>
+                                <th class="px-6 py-3">実績数</th>
+                                <th class="px-6 py-3 min-w-[200px]">達成率</th>
+                                <th class="px-6 py-3">不良数</th>
+                                <th class="px-6 py-3">担当者</th>
+                            </tr>
+                        </thead>
+                        <tbody id="report-table-body"></tbody>
+                    </table>
+                    <div id="no-results" class="hidden text-center py-12">
+                        <ion-icon name="sad-outline" class="text-5xl text-gray-400 mx-auto"></ion-icon>
+                        <p class="mt-4 text-lg font-medium text-gray-600">該当するレポートが見つかりませんでした。</p>
+                    </div>
+                </div>
+            </div>
+
+        </main>
+    </div>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            const sampleData = [
+                { date: '2025-08-04', name: '製品A-102', plan: 2000, actual: 1980, defective: 35, employee: '山田 太郎', defective_details: [{ reason: '傷', count: 20 }, { reason: '寸法不良', count: 15 }] },
+                { date: '2025-08-04', name: '製品C-301', plan: 1500, actual: 1450, defective: 21, employee: '佐藤 花子', defective_details: [{ reason: '塗装ムラ', count: 15 }, { reason: '異物混入', count: 6 }] },
+                { date: '2025-08-04', name: '製品B-205', plan: 1000, actual: 1090, defective: 12, employee: '鈴木 一郎', defective_details: [{ reason: '傷', count: 12 }] },
+                { date: '2025-08-03', name: '製品A-102', plan: 2000, actual: 2010, defective: 40, employee: '山田 太郎', defective_details: [{ reason: '傷', count: 25 }, { reason: '寸法不良', count: 15 }] },
+                { date: '2025-08-02', name: '製品D-401', plan: 500, actual: 480, defective: 5, employee: '高橋 次郎', defective_details: [{ reason: '傷', count: 5 }] },
+                { date: '2025-08-01', name: '製品A-102', plan: 2000, actual: 1950, defective: 30, employee: '山田 太郎', defective_details: [{ reason: '傷', count: 18 }, { reason: '寸法不良', count: 12 }] },
+                { date: '2025-07-31', name: '製品A-102', plan: 2000, actual: 2050, defective: 45, employee: '山田 太郎', defective_details: [{ reason: '傷', count: 30 }, { reason: '寸法不良', count: 15 }] },
+                { date: '2025-07-30', name: '製品C-301', plan: 1500, actual: 1510, defective: 20, employee: '佐藤 花子', defective_details: [{ reason: '塗装ムラ', count: 20 }] },
+                { date: '2025-07-29', name: '製品B-205', plan: 1000, actual: 980, defective: 15, employee: '鈴木 一郎', defective_details: [{ reason: '傷', count: 15 }] },
+            ];
+
+            const tableBody = document.getElementById('report-table-body');
+            const filterDate = document.getElementById('filter-date');
+            const filterName = document.getElementById('filter-name');
+            const noResultsDiv = document.getElementById('no-results');
+            const chartToggle = document.getElementById('chart-toggle');
+
+            function renderTable(data) {
+                tableBody.innerHTML = '';
+                if (data.length === 0) {
+                    noResultsDiv.style.display = 'block';
+                    return;
+                }
+                noResultsDiv.style.display = 'none';
+
+                data.forEach(item => {
+                    const achievementRate = ((item.actual / item.plan) * 100).toFixed(2);
+                    const defectiveRate = item.actual > 0 ? ((item.defective / item.actual) * 100).toFixed(2) : 0;
+
+                    let rateColor = 'bg-green-500';
+                    if (achievementRate < 90) rateColor = 'bg-red-500';
+                    else if (achievementRate < 100) rateColor = 'bg-yellow-500';
+
+                    const row = `
+                        <tr class="report-row bg-white border-b" data-date="${item.date}" data-name="${item.name.toLowerCase()}">
+                            <td class="px-6 py-4 font-medium">${item.date}</td>
+                            <td class="px-6 py-4 font-bold">${item.name}</td>
+                            <td class="px-6 py-4">${item.plan.toLocaleString()}</td>
+                            <td class="px-6 py-4 font-semibold">${item.actual.toLocaleString()}</td>
+                            <td class="px-6 py-4">
+                                <div class="flex items-center">
+                                    <div class="w-full bg-gray-200 rounded-full h-4 mr-2"><div class="${rateColor} h-4 rounded-full" style="width: ${Math.min(achievementRate, 100)}%"></div></div>
+                                    <span class="font-bold w-16 text-right">${achievementRate}%</span>
+                                </div>
+                            </td>
+                            <td class="px-6 py-4">
+                                <span class="${defectiveRate > 2 ? 'text-red-600 font-bold' : ''}">${item.defective.toLocaleString()}</span>
+                                <span class="text-xs text-gray-500"> (${defectiveRate}%)</span>
+                            </td>
+                            <td class="px-6 py-4">${item.employee}</td>
+                        </tr>`;
+                    tableBody.innerHTML += row;
+                });
+            }
+
+            function filterData() {
+                const dateValue = filterDate.value;
+                const nameValue = filterName.value.toLowerCase();
+
+                const filteredData = sampleData.filter(item => {
+                    const dateMatch = !dateValue || item.date === dateValue;
+                    const nameMatch = item.name.toLowerCase().includes(nameValue);
+                    return dateMatch && nameMatch;
+                });
+
+                renderTable(filteredData);
+            }
+
+            function createDonutChart(containerId, percentage, colorClass) {
+                const container = document.getElementById(containerId);
+                const strokeDasharray = `${percentage}, 100`;
+                container.innerHTML = `
+                    <svg class="w-full h-full" viewBox="0 0 36 36">
+                        <path class="text-gray-200" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="currentColor" stroke-width="3.8" />
+                        <path class="${colorClass}" stroke-dasharray="${strokeDasharray}" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="currentColor" stroke-width="3.8" stroke-linecap="round" />
+                    </svg>
+                    <div class="absolute inset-0 flex flex-col items-center justify-center">
+                        <span class="text-3xl font-bold">${percentage.toFixed(1)}%</span>
+                    </div>
+                `;
+            }
+
+            function renderCharts(period = 'week') {
+                const today = new Date('2025-08-04');
+                const todayString = today.toISOString().split('T')[0];
+                let dataForChart = [];
+
+                if (period === 'week') {
+                    const oneWeekAgo = new Date(today);
+                    oneWeekAgo.setDate(today.getDate() - 6);
+                    dataForChart = sampleData.filter(d => new Date(d.date) >= oneWeekAgo && new Date(d.date) <= today);
+                } else { // month
+                    const oneMonthAgo = new Date(today);
+                    oneMonthAgo.setMonth(today.getMonth() - 1);
+                    dataForChart = sampleData.filter(d => new Date(d.date) >= oneMonthAgo && new Date(d.date) <= today);
+                }
+
+                // 複合グラフ
+                const groupedData = dataForChart.reduce((acc, curr) => {
+                    const date = curr.date;
+                    if (!acc[date]) {
+                        acc[date] = { plan: 0, actual: 0, defective: 0 };
+                    }
+                    acc[date].plan += curr.plan;
+                    acc[date].actual += curr.actual;
+                    acc[date].defective += curr.defective;
+                    return acc;
+                }, {});
+
+                const sortedDates = Object.keys(groupedData).sort((a, b) => new Date(a) - new Date(b));
+                const maxVal = Math.max(...Object.values(groupedData).map(d => Math.max(d.plan, d.actual)));
+                const maxDefectiveRate = Math.max(...Object.values(groupedData).map(d => d.actual > 0 ? (d.defective / d.actual * 100) : 0)) || 10;
+
+                const comboChartContainer = document.getElementById('combo-chart-container');
+                const width = comboChartContainer.clientWidth;
+                const height = comboChartContainer.clientHeight;
+                const padding = 40;
+
+                const bars = sortedDates.map((date, i) => {
+                    const x = (i / sortedDates.length) * (width - padding) + (padding / 2);
+                    const barWidth = (width - padding) / sortedDates.length * 0.6;
+
+                    const planHeight = (groupedData[date].plan / maxVal) * (height - padding * 2);
+                    const actualHeight = (groupedData[date].actual / maxVal) * (height - padding * 2);
+
+                    return `
+                        <rect x="${x - barWidth / 2}" y="${height - padding - planHeight}" width="${barWidth / 2}" height="${planHeight}" fill="#7dd3fc" class="bar-grow" />
+                        <rect x="${x}" y="${height - padding - actualHeight}" width="${barWidth / 2}" height="${actualHeight}" fill="#6366f1" class="bar-grow" />
+                    `;
+                }).join('');
+
+                const pointsDefective = sortedDates.map((date, i) => {
+                    const x = (i / sortedDates.length) * (width - padding) + (padding / 2);
+                    const rate = groupedData[date].actual > 0 ? (groupedData[date].defective / groupedData[date].actual * 100) : 0;
+                    const y = height - (rate / maxDefectiveRate * (height - padding * 2)) - padding;
+                    return `${x},${y}`;
+                }).join(' ');
+
+                const labels = sortedDates.map((date, i) => {
+                    const x = (i / sortedDates.length) * (width - padding) + (padding / 2);
+                    const dateObj = new Date(date);
+                    const label = `${dateObj.getMonth() + 1}/${dateObj.getDate()}`;
+                    return `<text x="${x}" y="${height - 25}" text-anchor="middle" font-size="12" fill="#6b7280">${label}</text>`;
+                }).join('');
+
+                comboChartContainer.innerHTML = `
+                    <svg width="100%" height="100%" viewBox="0 0 ${width} ${height}">
+                        <g class="bars">${bars}</g>
+                        <polyline class="chart-line" fill="none" stroke="#ef4444" stroke-width="3" points="${pointsDefective}" />
+                        <g class="labels">${labels}</g>
+                        <line x1="${padding}" y1="${height - padding}" x2="${width - padding}" y2="${height - padding}" stroke="#e5e7eb" />
+                        <text x="${width - padding + 5}" y="${padding}" font-size="12" fill="#ef4444">${maxDefectiveRate.toFixed(0)}%</text>
+                        <text x="${width - padding + 5}" y="${height - padding}" font-size="12" fill="#ef4444">0%</text>
+                    </svg>`;
+
+                // ドーナツグラフと不良品内訳
+                const totalActual = dataForChart.reduce((sum, d) => sum + d.actual, 0);
+                const totalDefective = dataForChart.reduce((sum, d) => sum + d.defective, 0);
+                const totalPass = totalActual - totalDefective;
+                const yieldRate = totalActual > 0 ? (totalPass / totalActual) * 100 : 0;
+
+                createDonutChart('yield-chart-container', yieldRate, 'text-green-500');
+                document.getElementById('yield-total').textContent = totalActual.toLocaleString();
+                document.getElementById('yield-fail').textContent = totalDefective.toLocaleString();
+
+                // 不良品内訳
+                const failReasonsContainer = document.getElementById('fail-reasons-container');
+                if (totalDefective > 0) {
+                    const reasonCounts = dataForChart.flatMap(d => d.defective_details || []).reduce((acc, curr) => {
+                        acc[curr.reason] = (acc[curr.reason] || 0) + curr.count;
+                        return acc;
+                    }, {});
+                    const sortedReasons = Object.entries(reasonCounts).sort(([, a], [, b]) => b - a);
+                    failReasonsContainer.innerHTML = sortedReasons.map(([reason, count]) => {
+                        const percentage = ((count / totalDefective) * 100).toFixed(0);
+                        return `
+                            <div>
+                                <div class="flex justify-between mb-1">
+                                    <span class="font-medium text-gray-700">${reason}</span>
+                                    <span class="text-gray-500">${count}件</span>
+                                </div>
+                                <div class="w-full bg-gray-200 rounded-full h-2.5">
+                                    <div class="bg-red-500 h-2.5 rounded-full" style="width: ${percentage}%"></div>
+                                </div>
+                            </div>
+                        `;
+                    }).join('');
+                } else {
+                    failReasonsContainer.innerHTML = `<p class="text-gray-500 text-center">不良品はありませんでした。</p>`;
+                }
+
+                // 本日の進捗グラフ
+                const todayData = sampleData.filter(d => d.date === todayString);
+                const todayPlan = todayData.reduce((sum, d) => sum + d.plan, 0);
+                const todayActual = todayData.reduce((sum, d) => sum + d.actual, 0);
+                const todayProgress = todayPlan > 0 ? (todayActual / todayPlan) * 100 : 0;
+
+                document.getElementById('today-progress-bar-lg').style.height = `${Math.min(todayProgress, 100)}%`;
+                document.getElementById('today-progress-text-lg').textContent = `${todayProgress.toFixed(1)}%`;
+                document.getElementById('today-plan-lg').textContent = todayPlan.toLocaleString();
+                document.getElementById('today-actual-lg').textContent = todayActual.toLocaleString();
+
+                document.getElementById('today-progress-bar-sm').style.width = `${Math.min(todayProgress, 100)}%`;
+                document.getElementById('today-progress-text-sm').textContent = `${todayProgress.toFixed(1)}%`;
+                document.getElementById('today-plan-sm').textContent = todayPlan.toLocaleString();
+                document.getElementById('today-actual-sm').textContent = todayActual.toLocaleString();
+            }
+
+            chartToggle.addEventListener('click', (e) => {
+                if (e.target.tagName === 'BUTTON') {
+                    chartToggle.querySelectorAll('button').forEach(btn => {
+                        btn.classList.remove('bg-white', 'text-indigo-600');
+                        btn.classList.add('text-gray-600');
+                    });
+                    e.target.classList.add('bg-white', 'text-indigo-600');
+                    e.target.classList.remove('text-gray-600');
+                    renderCharts(e.target.dataset.period);
+                }
+            });
+
+            filterDate.addEventListener('input', filterData);
+            filterName.addEventListener('input', filterData);
+
+            // 初期表示
+            renderTable(sampleData);
+            setTimeout(() => renderCharts('week'), 100);
+        });
+    </script>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/javascript-version/public/top/\343\203\210\343\203\203\343\203\227\343\203\232\343\203\274\343\202\270.html" "b/javascript-version/public/top/\343\203\210\343\203\203\343\203\227\343\203\232\343\203\274\343\202\270.html"
new file mode 100644
index 000000000..241a9892e
--- /dev/null
+++ "b/javascript-version/public/top/\343\203\210\343\203\203\343\203\227\343\203\232\343\203\274\343\202\270.html"
@@ -0,0 +1,278 @@
+<!DOCTYPE html>
+<html lang="ja">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>生産管理システム ダッシュボード</title>
+    <!-- Tailwind CSSを読み込む -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Google Fonts (Inter) を読み込む -->
+    <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=Inter:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;700&display=swap"
+        rel="stylesheet">
+    <!-- Ioniconsを読み込む -->
+    <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
+    <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
+    <style>
+        /* フォント設定 */
+        body {
+            font-family: 'Inter', 'Noto Sans JP', sans-serif;
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
+        }
+
+        /* スクロールバーのスタイル（任意） */
+        ::-webkit-scrollbar {
+            width: 8px;
+        }
+
+        ::-webkit-scrollbar-track {
+            background: #f1f5f9;
+        }
+
+        ::-webkit-scrollbar-thumb {
+            background: #94a3b8;
+            border-radius: 4px;
+        }
+
+        ::-webkit-scrollbar-thumb:hover {
+            background: #64748b;
+        }
+
+        /* アニメーション */
+        .fade-in {
+            animation: fadeIn 0.5s ease-in-out forwards;
+        }
+
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+                transform: translateY(10px);
+            }
+
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+    </style>
+</head>
+
+<body class="bg-gray-100 text-gray-800">
+
+    <div class="flex flex-col min-h-screen">
+
+        <!-- メインコンテンツ -->
+        <main class="flex-grow container mx-auto p-4 sm:p-6 lg:p-8">
+
+            <!-- リアルタイムモニタリング -->
+            <div class="mb-8">
+                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                    <!-- 生産状況カード -->
+                    <a href="生産数管理ページ.html"
+                        class="fade-in group bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 hover:scale-[1.03] p-6 flex flex-col justify-between"
+                        style="animation-delay: 0.1s;">
+                        <div>
+                            <div class="flex justify-between items-start mb-4">
+                                <h4 class="text-lg font-bold">生産進捗</h4>
+                                <div class="bg-indigo-100 p-3 rounded-full">
+                                    <ion-icon name="trending-up-outline" class="text-indigo-500 text-2xl"></ion-icon>
+                                </div>
+                            </div>
+                            <div class="flex items-end space-x-2">
+                                <span class="text-4xl font-bold text-indigo-600">1,250</span>
+                                <span class="text-lg text-gray-500">/ 2,000 個</span>
+                            </div>
+                            <div class="mt-3">
+                                <div class="w-full bg-gray-200 rounded-full h-2.5">
+                                    <div class="bg-indigo-600 h-2.5 rounded-full" style="width: 62.5%"></div>
+                                </div>
+                                <p class="text-right text-sm mt-1 font-bold text-indigo-600">達成率: 62.5%</p>
+                            </div>
+                        </div>
+                        <div class="text-right mt-4 text-sm font-semibold text-indigo-600 group-hover:underline">
+                            詳細を見る &rarr;
+                        </div>
+                    </a>
+
+                    <!-- 機械稼働状況カード -->
+                    <a href="生産機械ステータス.html"
+                        class="fade-in group bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 hover:scale-[1.03] p-6 flex flex-col justify-between"
+                        style="animation-delay: 0.2s;">
+                        <div>
+                            <div class="flex justify-between items-start mb-4">
+                                <h4 class="text-lg font-bold">機械稼働ステータス</h4>
+                                <div class="bg-slate-100 p-3 rounded-full">
+                                    <ion-icon name="hardware-chip-outline" class="text-slate-500 text-2xl"></ion-icon>
+                                </div>
+                            </div>
+                            <div class="space-y-2">
+                                <div class="flex items-center justify-between text-sm"><span class="text-gray-600">プレス機
+                                        #1</span><span
+                                        class="font-semibold px-2 py-0.5 rounded-full bg-green-100 text-green-800">正常</span>
+                                </div>
+                                <div class="flex items-center justify-between text-sm"><span class="text-gray-600">組立ライン
+                                        #A</span><span
+                                        class="font-semibold px-2 py-0.5 rounded-full bg-green-100 text-green-800">正常</span>
+                                </div>
+                                <div class="flex items-center justify-between text-sm"><span class="text-gray-600">塗装ブース
+                                        #2</span><span
+                                        class="font-semibold px-2 py-0.5 rounded-full bg-yellow-100 text-yellow-800">待機中</span>
+                                </div>
+                                <div class="flex items-center justify-between text-sm"><span class="text-gray-600">検査機
+                                        #1</span><span
+                                        class="font-semibold px-2 py-0.5 rounded-full bg-red-100 text-red-800">エラー</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="text-right mt-4 text-sm font-semibold text-slate-600 group-hover:underline">
+                            詳細を見る &rarr;
+                        </div>
+                    </a>
+
+                    <!-- 画像検査状況カード -->
+                    <a href="画像検査ステータス.html"
+                        class="fade-in group bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 hover:scale-[1.03] p-6 flex flex-col justify-between"
+                        style="animation-delay: 0.3s;">
+                        <div>
+                            <div class="flex justify-between items-start mb-4">
+                                <h4 class="text-lg font-bold">画像検査ステータス</h4>
+                                <div class="bg-teal-100 p-3 rounded-full">
+                                    <ion-icon name="camera-outline" class="text-teal-500 text-2xl"></ion-icon>
+                                </div>
+                            </div>
+                            <div class="flex items-center justify-center space-x-6">
+                                <div class="relative w-24 h-24">
+                                    <svg class="w-full h-full" viewBox="0 0 36 36">
+                                        <path class="text-gray-200"
+                                            d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
+                                            fill="none" stroke="currentColor" stroke-width="3" />
+                                        <path class="text-teal-500" stroke-dasharray="95, 100"
+                                            d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
+                                            fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" />
+                                    </svg>
+                                    <div class="absolute inset-0 flex flex-col items-center justify-center"><span
+                                            class="text-2xl font-bold">95%</span><span class="text-xs">良品率</span></div>
+                                </div>
+                                <div class="text-sm space-y-1">
+                                    <p>検査総数: 1,280</p>
+                                    <p class="text-teal-600 font-semibold">良品: 1,216</p>
+                                    <p class="text-red-600 font-semibold">不良: 64</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="text-right mt-4 text-sm font-semibold text-teal-600 group-hover:underline">
+                            詳細を見る &rarr;
+                        </div>
+                    </a>
+                </div>
+            </div>
+
+            <!-- 機能メニュー -->
+            <div class="mb-8">
+                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+                    <!-- 製造出荷指示 -->
+                    <a href="製造出荷指示周知ページ.html"
+                        class="fade-in group bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 hover:scale-[1.03] p-6 flex items-center"
+                        style="animation-delay: 0.4s;">
+                        <div class="bg-orange-100 p-4 rounded-full mr-5"><ion-icon name="list-outline"
+                                class="text-orange-500 text-3xl"></ion-icon></div>
+                        <div>
+                            <h3 class="text-lg font-bold">製造出荷指示</h3>
+                            <p class="text-sm text-gray-500">本日の製造・出荷指示を確認</p>
+                        </div>
+                    </a>
+                    <!-- 日報入力 -->
+                    <a href="日報一覧ページ.html"
+                        class="fade-in group bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 hover:scale-[1.03] p-6 flex items-center"
+                        style="animation-delay: 0.5s;">
+                        <div class="bg-sky-100 p-4 rounded-full mr-5"><ion-icon name="create-outline"
+                                class="text-sky-500 text-3xl"></ion-icon></div>
+                        <div>
+                            <h3 class="text-lg font-bold">日報システム</h3>
+                            <p class="text-sm text-gray-500">作業記録の入力・確認</p>
+                        </div>
+                    </a>
+                    <!-- 在庫管理 -->
+                    <a href="部品在庫管理.html"
+                        class="fade-in group bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 hover:scale-[1.03] p-6 flex items-center"
+                        style="animation-delay: 0.6s;">
+                        <div class="bg-green-100 p-4 rounded-full mr-5"><ion-icon name="cube-outline"
+                                class="text-green-500 text-3xl"></ion-icon></div>
+                        <div>
+                            <h3 class="text-lg font-bold">部品在庫管理</h3>
+                            <p class="text-sm text-gray-500">QRコードで入出庫</p>
+                        </div>
+                    </a>
+                </div>
+            </div>
+
+            <!-- 生産目標と管理者メニュー -->
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+                <!-- 生産目標（従業員向け） -->
+                <div class="fade-in bg-white rounded-xl shadow-lg p-6 lg:col-span-2" style="animation-delay: 0.7s;">
+                    <div class="flex justify-between items-center mb-3">
+                        <h3 class="text-xl font-bold">本日のタスク</h3>
+                        <a href="製造出荷指示周知ページ.html"
+                            class="text-sm font-semibold text-indigo-600 hover:underline">すべての指示を見る &rarr;</a>
+                    </div>
+                    <!-- 指示カードリスト -->
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                        <!-- サンプル指示 1 -->
+                        <div class="bg-gray-50 p-4 rounded-lg flex flex-col justify-between">
+                            <div>
+                                <span
+                                    class="px-2 py-1 text-xs font-semibold rounded-full bg-cyan-100 text-cyan-800">マット</span>
+                                <p class="font-bold mt-2">マット <span class="text-sm text-gray-600 font-normal">/
+                                        1200x1950x240</span></p>
+                                <p class="text-xs text-red-600 font-bold mt-1">至急対応</p>
+                            </div>
+                            <div class="text-right mt-2">
+                                <p class="text-gray-500 text-sm">数量</p>
+                                <p class="text-2xl font-bold text-indigo-600">1</p>
+                            </div>
+                        </div>
+                        <!-- サンプル指示 2 -->
+                        <div class="bg-gray-50 p-4 rounded-lg flex flex-col justify-between">
+                            <div>
+                                <span
+                                    class="px-2 py-1 text-xs font-semibold rounded-full bg-orange-100 text-orange-800">ボトム</span>
+                                <p class="font-bold mt-2">サポート <span class="text-sm text-gray-600 font-normal">/
+                                        80巾</span></p>
+                                <p class="text-xs text-gray-500 mt-1">アマゾン直送便</p>
+                            </div>
+                            <div class="text-right mt-2">
+                                <p class="text-gray-500 text-sm">数量</p>
+                                <p class="text-2xl font-bold text-indigo-600">1</p>
+                            </div>
+                        </div>
+                        <!-- もし指示がない場合 -->
+                        <!-- <p class="md:col-span-2 text-center text-gray-500 py-4">現在、優先度の高い指示はありません。</p> -->
+                    </div>
+                </div>
+
+                <!-- 管理者向け機能 -->
+                <div class="fade-in bg-white rounded-xl shadow-lg p-6 lg:col-span-1" style="animation-delay: 0.8s;">
+                    <div class="flex items-center mb-4">
+                        <div class="bg-gray-700 p-2 rounded-full mr-3"><ion-icon name="keypad-outline"
+                                class="text-white text-2xl"></ion-icon></div>
+                        <h3 class="text-lg font-bold">管理者メニュー</h3>
+                    </div>
+                    <div class="space-y-3">
+                        <a href="従業員名簿ページ.html"
+                            class="block w-full text-left bg-gray-100 hover:bg-gray-200 p-3 rounded-lg transition-all duration-200 hover:translate-x-1">従業員名簿の管理</a>
+                        <a href="生産機械サイネージ.html"
+                            class="block w-full text-left bg-gray-100 hover:bg-gray-200 p-3 rounded-lg transition-all duration-200 hover:translate-x-1">サイネージ用モニター</a>
+                    </div>
+                </div>
+            </div>
+        </main>
+
+    </div>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/javascript-version/src/@core/hooks/useAuthMe.js b/javascript-version/src/@core/hooks/useAuthMe.js
new file mode 100644
index 000000000..a1b1d38ec
--- /dev/null
+++ b/javascript-version/src/@core/hooks/useAuthMe.js
@@ -0,0 +1,41 @@
+import { useCallback, useEffect, useState } from 'react'
+import { fetchMeCached } from '@/utils/auth/meClient'
+
+// 認証ユーザー情報を取得し、is_admin を返す共通フック
+// 戻り値: { user, isAdmin, loading, error, refresh }
+export default function useAuthMe() {
+    const [user, setUser] = useState(null)
+    const [loading, setLoading] = useState(true)
+    const [error, setError] = useState(null)
+    const [tick, setTick] = useState(0)
+
+    const refresh = useCallback(() => setTick(t => t + 1), [])
+
+    useEffect(() => {
+        const run = async () => {
+            setLoading(true)
+            setError(null)
+
+            try {
+                const data = await fetchMeCached({ timeoutMs: 5000, force: tick > 0 })
+                setUser(data || null)
+            } catch (e) {
+                if (e && e.status === 401) {
+                    setUser(null)
+                } else {
+                    setError(e)
+                }
+            } finally {
+                setLoading(false)
+            }
+        }
+
+        run()
+        
+        return () => {}
+    }, [tick])
+
+    const isAdmin = !!user?.is_admin
+
+    return { user, isAdmin, loading, error, refresh }
+}
diff --git a/javascript-version/src/@core/svg/Logo.jsx b/javascript-version/src/@core/svg/Logo.jsx
index b1ac61486..5273317ec 100644
--- a/javascript-version/src/@core/svg/Logo.jsx
+++ b/javascript-version/src/@core/svg/Logo.jsx
@@ -1,72 +1,64 @@
+/*
+======== ファイル概要 ========
+プロジェクト全体で利用するブランドロゴSVGコンポーネント。
+シグネチャのSリボンだけを重ね、ブランドカラーのグラデーションをcurrentColorと調和させる。
+*/
+
+/**
+ * カスタムロゴのSVGコンポーネント。
+ * @param   {object}       props - SVG属性を透過的に受け取る引数。
+ * @returns {JSX.Element}        - カスタムロゴのSVG要素。
+ */
 const Logo = props => {
   return (
-    <svg width='1.2658em' height='1em' viewBox='0 0 100 79' fill='none' xmlns='http://www.w3.org/2000/svg' {...props}>
-      <path
-        fillRule='evenodd'
-        clipRule='evenodd'
-        d='M4.92008 0.501904L22.662 11.4573C23.614 12.0451 24.1936 13.0844 24.1936 14.2036V64.2521C24.1936 65.3871 23.5976 66.4387 22.6241 67.0214L4.8822 77.6429C3.35344 78.5581 1.37254 78.0602 0.457741 76.5307C0.158194 76.0299 0 75.4572 0 74.8736V3.24818C0 1.46582 1.44424 0.0209274 3.22581 0.0209274C3.82422 0.0209274 4.41085 0.18746 4.92008 0.501904Z'
-        fill='currentColor'
-      />
-      <path
-        opacity='0.077704'
-        fillRule='evenodd'
-        clipRule='evenodd'
-        d='M0 26.1063L24.1936 39.9852V53.5915L0 26.1063Z'
-        fill='black'
-      />
-      <path
-        opacity='0.077704'
-        fillRule='evenodd'
-        clipRule='evenodd'
-        d='M0 26.1063L24.1936 39.6319V47.9438L0 26.1063Z'
-        fill='black'
-      />
-      <path
-        fillRule='evenodd'
-        clipRule='evenodd'
-        d='M95.084 0.489601L77.3421 11.4083C76.3878 11.9956 75.8064 13.0362 75.8064 14.1571V64.2526C75.8064 65.3875 76.4024 66.4391 77.3759 67.0219L95.1178 77.6433C96.6466 78.5585 98.6275 78.0606 99.5423 76.5312C99.8418 76.0303 100 75.4576 100 74.874V3.23842C100 1.45605 98.5558 0.0111618 96.7742 0.0111618C96.1774 0.0111618 95.5923 0.176782 95.084 0.489601Z'
-        fill='currentColor'
-      />
-      <path
-        opacity='0.077704'
-        fillRule='evenodd'
-        clipRule='evenodd'
-        d='M100 26.1063L75.8064 39.956V54.0023L100 26.1063Z'
-        fill='black'
-      />
-      <path
-        opacity='0.077704'
-        fillRule='evenodd'
-        clipRule='evenodd'
-        d='M100 26.1063L75.8064 39.6199V48.3546L100 26.1063Z'
-        fill='black'
-      />
-      <path
-        fillRule='evenodd'
-        clipRule='evenodd'
-        d='M4.91149 0.475694L50 28.123V54.7479L0 26.0986V3.22726C0 1.44489 1.44424 0 3.22581 0C3.8208 0 4.4042 0.164633 4.91149 0.475694Z'
-        fill='currentColor'
-      />
-      <path
-        fillRule='evenodd'
-        clipRule='evenodd'
-        d='M4.91149 0.475694L50 28.123V54.7479L0 26.0986V3.22726C0 1.44489 1.44424 0 3.22581 0C3.8208 0 4.4042 0.164633 4.91149 0.475694Z'
-        fill='white'
-        fillOpacity='0.15'
-      />
-      <path
-        fillRule='evenodd'
-        clipRule='evenodd'
-        d='M95.0885 0.475694L50 28.123V54.7479L100 26.0986V3.22726C100 1.44489 98.5558 0 96.7742 0C96.1792 0 95.5958 0.164633 95.0885 0.475694Z'
-        fill='currentColor'
-      />
-      <path
-        fillRule='evenodd'
-        clipRule='evenodd'
-        d='M95.0885 0.475694L50 28.123V54.7479L100 26.0986V3.22726C100 1.44489 98.5558 0 96.7742 0C96.1792 0 95.5958 0.164633 95.0885 0.475694Z'
-        fill='white'
-        fillOpacity='0.3'
-      />
+    <svg width='1.8em' height='1.6em' viewBox='200 120 620 760' fill='none' xmlns='http://www.w3.org/2000/svg' {...props}>
+      <g fill='currentColor'>
+        <rect x='208.5' y='774.5' width='559' height='76' rx='38' ry='38' fill='#9366F4' />
+        <path
+          d='M767.49 812.38C767.49 833.36 750.37 850.53 729.44 850.53H559.22L388.99 774.23H729.43C739.89 774.23 749.41 778.53 756.31 785.43C763.2 792.35 767.49 801.89 767.49 812.38Z'
+          fill='#804AF6'
+        />
+        <path
+          d='M501.5 671.19V753.98L233.64 636.71C215.02 628.56 206.45 606.65 214.61 588.03L215.38 586.27C223.53 567.65 245.44 559.08 264.06 567.23L501.5 671.19Z'
+          fill='#9366F4'
+        />
+        <path
+          d='M764.44 826.65L763.66 828.42C755.51 847.04 733.6 855.6 714.98 847.45L501.5 753.98V671.19L745.4 777.97C764.02 786.12 772.59 808.03 764.44 826.65Z'
+          fill='#AF8AFF'
+        />
+
+        <path
+          d='M767.49 596.38C767.49 617.36 750.37 634.53 729.44 634.53H559.22L388.99 558.23H729.43C739.89 558.23 749.41 562.53 756.31 569.43C763.2 576.35 767.49 585.89 767.49 596.38Z'
+          fill='#804AF6'
+        />
+        <path
+          d='M501.5 455.19V537.98L233.64 420.71C215.02 412.56 206.45 390.65 214.61 372.03L215.38 370.27C223.53 351.65 245.44 343.08 264.06 351.23L501.5 455.19Z'
+          fill='#9366F4'
+        />
+        <path
+          d='M764.44 610.65L763.66 612.42C755.51 631.04 733.6 639.6 714.98 631.45L501.5 537.98V455.19L745.4 561.97C764.02 570.12 772.59 592.03 764.44 610.65Z'
+          fill='#AF8AFF'
+        />
+
+        <path
+          d='M767.49 380.38C767.49 401.36 750.37 418.53 729.44 418.53H559.22L388.99 342.23H729.43C739.89 342.23 749.41 346.53 756.31 353.43C763.2 360.35 767.49 369.89 767.49 380.38Z'
+          fill='#804AF6'
+        />
+        <path
+          d='M501.5 239.19V321.98L233.64 204.71C215.02 196.56 206.45 174.65 214.61 156.03L215.38 154.27C223.53 135.65 245.44 127.08 264.06 135.23L501.5 239.19Z'
+          fill='#9366F4'
+        />
+        <path
+          d='M764.44 394.65L763.66 396.42C755.51 415.04 733.6 423.6 714.98 415.45L501.5 321.98V239.19L745.4 345.97C764.02 354.12 772.59 376.03 764.44 394.65Z'
+          fill='#AF8AFF'
+        />
+
+        <path
+          d='M766.79 170C766.79 190.9 749.7 208 728.81 208H715.07L543.7 132H728.81C739.26 132 748.75 136.28 755.64 143.16C762.52 150.05 766.79 159.55 766.79 170Z'
+          fill='#AF8AFF'
+        />
+        <polygon points='715.07 208 558.91 208 389 132 543.7 132 715.07 208' fill='#804AF6' />
+      </g>
     </svg>
   )
 }
diff --git a/javascript-version/src/@core/svg/icon_App Icon Main - 1024x1024.svg b/javascript-version/src/@core/svg/icon_App Icon Main - 1024x1024.svg
new file mode 100644
index 000000000..c483b198a
--- /dev/null
+++ b/javascript-version/src/@core/svg/icon_App Icon Main - 1024x1024.svg	
@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="App_Icon_Kit_A" data-name="App Icon Kit A" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #9366f4;
+      }
+
+      .cls-2 {
+        fill: #804af6;
+      }
+
+      .cls-3 {
+        fill: #af8aff;
+      }
+    </style>
+  </defs>
+  <g id="_レイヤー_7" data-name="レイヤー 7">
+    <g id="_3" data-name="3">
+      <rect class="cls-1" x="208.5" y="774.5" width="559" height="76" rx="38" ry="38"/>
+      <path class="cls-2" d="M767.49,812.38c0,20.98-17.12,38.15-38.05,38.15h-170.22l-170.22-76.3h340.44c10.46,0,19.98,4.3,26.88,11.2,6.89,6.92,11.17,16.46,11.17,26.95Z"/>
+      <path class="cls-1" d="M501.5,671.19v82.79l-267.86-117.27c-18.62-8.15-27.19-30.06-19.03-48.68l.77-1.76c8.15-18.62,30.06-27.19,48.68-19.04l237.44,103.96Z"/>
+      <path class="cls-3" d="M764.44,826.65l-.78,1.77c-8.15,18.62-30.06,27.18-48.68,19.03l-213.48-93.47v-82.79l243.9,106.78c18.62,8.15,27.19,30.06,19.04,48.68Z"/>
+    </g>
+    <g id="_2" data-name="2">
+      <path class="cls-2" d="M767.49,596.38c0,20.98-17.12,38.15-38.05,38.15h-170.22l-170.22-76.3h340.44c10.46,0,19.98,4.3,26.88,11.2,6.89,6.92,11.17,16.46,11.17,26.95Z"/>
+      <path class="cls-1" d="M501.5,455.19v82.79l-267.86-117.27c-18.62-8.15-27.19-30.06-19.03-48.68l.77-1.76c8.15-18.62,30.06-27.19,48.68-19.04l237.44,103.96Z"/>
+      <path class="cls-3" d="M764.44,610.65l-.78,1.77c-8.15,18.62-30.06,27.18-48.68,19.03l-213.48-93.47v-82.79l243.9,106.78c18.62,8.15,27.19,30.06,19.04,48.68Z"/>
+    </g>
+    <g id="_1" data-name="1">
+      <path class="cls-2" d="M767.49,380.38c0,20.98-17.12,38.15-38.05,38.15h-170.22l-170.22-76.3h340.44c10.46,0,19.98,4.3,26.88,11.2,6.89,6.92,11.17,16.46,11.17,26.95Z"/>
+      <path class="cls-1" d="M501.5,239.19v82.79l-267.86-117.27c-18.62-8.15-27.19-30.06-19.03-48.68l.77-1.76c8.15-18.62,30.06-27.19,48.68-19.04l237.44,103.96Z"/>
+      <path class="cls-3" d="M764.44,394.65l-.78,1.77c-8.15,18.62-30.06,27.18-48.68,19.03l-213.48-93.47v-82.79l243.9,106.78c18.62,8.15,27.19,30.06,19.04,48.68Z"/>
+    </g>
+    <g id="top">
+      <path class="cls-3" d="M766.79,170c0,20.9-17.09,38-37.98,38h-13.74l-171.37-76h185.11c10.45,0,19.94,4.28,26.83,11.16,6.88,6.89,11.15,16.39,11.15,26.84Z"/>
+      <polygon class="cls-2" points="715.07 208 558.91 208 389 132 543.7 132 715.07 208"/>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/javascript-version/src/@core/theme/index.js b/javascript-version/src/@core/theme/index.js
index ae54fbed1..89d605838 100644
--- a/javascript-version/src/@core/theme/index.js
+++ b/javascript-version/src/@core/theme/index.js
@@ -1,5 +1,8 @@
-// Next Imports
-import { Inter } from 'next/font/google'
+// Note:
+// Google Fonts を next/font/google で取得すると開発サーバー起動時やビルド時に
+// Node 側から外部ネットワークへフェッチが発生します。
+// プロキシ環境下では失敗しやすいため、ここでは next/font/google の使用を避け、
+// ローカル指定のフォントファミリーに切り替えます。
 
 // Theme Options Imports
 import overrides from './overrides'
@@ -9,7 +12,22 @@ import shadows from './shadows'
 import customShadows from './customShadows'
 import typography from './typography'
 
-const inter = Inter({ subsets: ['latin'], weight: ['300', '400', '500', '600', '700', '800', '900'] })
+// 外部フェッチを伴わない安全なフォントファミリーを定義
+// （必要に応じてグローバル <link> で Google Fonts を読み込めばブラウザー側で適用されます）
+const safeInterFontFamily = [
+  'Inter',
+  'Noto Sans JP',
+  'sans-serif',
+  '-apple-system',
+  'BlinkMacSystemFont',
+  '"Segoe UI"',
+  'Roboto',
+  '"Helvetica Neue"',
+  'Arial',
+  '"Apple Color Emoji"',
+  '"Segoe UI Emoji"',
+  '"Segoe UI Symbol"'
+].join(',')
 
 const theme = (mode, direction) => {
   return {
@@ -28,7 +46,9 @@ const theme = (mode, direction) => {
       }
     },
     shadows: shadows(mode),
-    typography: typography(inter.style.fontFamily),
+
+  // next/font を使わずにフォントファミリーを直接指定
+  typography: typography(safeInterFontFamily),
     customShadows: customShadows(mode),
     mainColorChannels: {
       light: '46 38 61',
diff --git a/javascript-version/src/app/(blank-layout-pages)/error/page.jsx b/javascript-version/src/app/(blank-layout-pages)/error/page.jsx
index 52e48c63f..4a5967af3 100644
--- a/javascript-version/src/app/(blank-layout-pages)/error/page.jsx
+++ b/javascript-version/src/app/(blank-layout-pages)/error/page.jsx
@@ -1,14 +1,16 @@
 // Component Imports
-import NotFound from '@views/NotFound'
+import ErrorClient from './pageClient'
 
 // Server Action Imports
 import { getServerMode } from '@core/utils/serverHelpers'
 
-const Error = () => {
+const Error = ({ searchParams }) => {
   // Vars
   const mode = getServerMode()
+  const code = searchParams?.code || null
+  const from = searchParams?.from || null
 
-  return <NotFound mode={mode} />
+  return <ErrorClient mode={mode} code={code} from={from} />
 }
 
 export default Error
diff --git a/javascript-version/src/app/(blank-layout-pages)/error/pageClient.jsx b/javascript-version/src/app/(blank-layout-pages)/error/pageClient.jsx
new file mode 100644
index 000000000..03f6a2b53
--- /dev/null
+++ b/javascript-version/src/app/(blank-layout-pages)/error/pageClient.jsx
@@ -0,0 +1,7 @@
+'use client'
+
+import ErrorView from '@views/Error'
+
+export default function ErrorClient(props) {
+  return <ErrorView {...props} />
+}
diff --git a/javascript-version/src/app/(dashboard)/account-settings/page.jsx b/javascript-version/src/app/(dashboard)/account-settings/page.jsx
index 5be61184f..b47a717af 100644
--- a/javascript-version/src/app/(dashboard)/account-settings/page.jsx
+++ b/javascript-version/src/app/(dashboard)/account-settings/page.jsx
@@ -1,22 +1,42 @@
-// Next Imports
-import dynamic from 'next/dynamic'
+'use client'
 
-// Component Imports
-import AccountSettings from '@views/account-settings'
+/*
+======== ファイル概要 ========
+アカウント設定画面のページコンポーネントを定義するファイル。
+タブごとの内容コンポーネントを取りまとめてベースレイアウトへ渡す役目を持つ。
+*/
 
-const AccountTab = dynamic(() => import('@views/account-settings/account'))
-const NotificationsTab = dynamic(() => import('@views/account-settings/notifications'))
-const ConnectionsTab = dynamic(() => import('@views/account-settings/connections'))
+// View Imports
+import AccountSettings from '@views/account-settings'
+import Account from '@views/account-settings/account'
+import Notifications from '@views/account-settings/notifications'
+import Connections from '@views/account-settings/connections'
 
-// Vars
-const tabContentList = () => ({
-  account: <AccountTab />,
-  notifications: <NotificationsTab />,
-  connections: <ConnectionsTab />
-})
+/**
+ * アカウント設定ページ全体をまとめるエントリーポイント。
+ * @returns {JSX.Element} アカウント設定画面のレイアウトに必要なタブ群を返すページコンポーネント。
+ */
+export default function AccountSettingsPage() {
+  // ======== 処理ステップ: タブ内容の準備 → ベースレイアウトへ受け渡し ========
+  // 1. タブ内容の準備では各タブのコンポーネントを紐づけて、タブ切り替え時に適切なビューが表示されるようにする。
+  // 2. ベースレイアウトへ受け渡しでは上記のマッピングをAccountSettingsへ渡し、共通レイアウト内でレンダリングを統一する。
+  const tabContentList = {
+    /**
+     * アカウント情報を編集するタブ。
+     * Accountコンポーネントは個人情報のフォーム群を扱うため、ここに紐づけている。
+     */
+    account: <Account />,
+    /**
+     * 通知設定を調整するタブ。
+     * Notificationsコンポーネント側で通知チャネルの状態管理を行うため、このキーと結びつけている。
+     */
+    notifications: <Notifications />,
+    /**
+     * 外部サービス連携状況を表示するタブ。
+     * Connectionsコンポーネントが連携リストの描画と操作を担うので、このタブから呼び出す。
+     */
+    connections: <Connections />
+  }
 
-const AccountSettingsPage = () => {
-  return <AccountSettings tabContentList={tabContentList()} />
+  return <AccountSettings tabContentList={tabContentList} />
 }
-
-export default AccountSettingsPage
diff --git a/javascript-version/src/app/(dashboard)/card-basic/page.jsx b/javascript-version/src/app/(dashboard)/card-basic/page.jsx
deleted file mode 100644
index 876dbbc5b..000000000
--- a/javascript-version/src/app/(dashboard)/card-basic/page.jsx
+++ /dev/null
@@ -1,87 +0,0 @@
-// MUI Imports
-import Grid from '@mui/material/Grid'
-import Typography from '@mui/material/Typography'
-import Divider from '@mui/material/Divider'
-
-// Components Imports
-import CardInfluencingInfluencerWithImg from '@views/card-basic/CardInfluencingInfluencerWithImg'
-import CardUser from '@views/card-basic/CardUser'
-import CardWithCollapse from '@views/card-basic/CardWithCollapse'
-import CardMobile from '@views/card-basic/CardMobile'
-import CardHorizontalRatings from '@views/card-basic/CardHorizontalRatings'
-import CardWatch from '@views/card-basic/CardWatch'
-import CardLifetimeMembership from '@views/card-basic/CardLifetimeMembership'
-import CardInfluencingInfluencer from '@views/card-basic/CardInfluencingInfluencer'
-import CardVerticalRatings from '@views/card-basic/CardVerticalRatings'
-import CardSupport from '@views/card-basic/CardSupport'
-import CardWithTabs from '@views/card-basic/CardWithTabs'
-import CardWithTabsCenter from '@views/card-basic/CardWithTabsCenter'
-import CardTwitter from '@views/card-basic/CardTwitter'
-import CardFacebook from '@views/card-basic/CardFacebook'
-import CardLinkedIn from '@views/card-basic/CardLinkedIn'
-
-const CardBasic = () => {
-  return (
-    <Grid container spacing={6}>
-      <Grid item xs={12}>
-        <Typography variant='h3'>Basic Cards</Typography>
-        <Divider />
-      </Grid>
-      <Grid item xs={12} sm={6} md={4}>
-        <CardInfluencingInfluencerWithImg />
-      </Grid>
-      <Grid item xs={12} sm={6} md={4}>
-        <CardUser />
-      </Grid>
-      <Grid item xs={12} sm={6} md={4}>
-        <CardWithCollapse />
-      </Grid>
-      <Grid item xs={12} sm={6}>
-        <CardMobile />
-      </Grid>
-      <Grid item xs={12} sm={6}>
-        <CardHorizontalRatings />
-      </Grid>
-      <Grid item xs={12} sm={6} md={4}>
-        <CardWatch />
-      </Grid>
-      <Grid item xs={12} md={8}>
-        <CardLifetimeMembership />
-      </Grid>
-      <Grid item xs={12} sm={6} md={4}>
-        <CardInfluencingInfluencer />
-      </Grid>
-      <Grid item xs={12} sm={6} md={4}>
-        <CardVerticalRatings />
-      </Grid>
-      <Grid item xs={12} sm={6} md={4}>
-        <CardSupport />
-      </Grid>
-      <Grid item xs={12}>
-        <Typography variant='h3'>Navigation Cards</Typography>
-        <Divider />
-      </Grid>
-      <Grid item xs={12} md={6}>
-        <CardWithTabs />
-      </Grid>
-      <Grid item xs={12} md={6}>
-        <CardWithTabsCenter />
-      </Grid>
-      <Grid item xs={12}>
-        <Typography variant='h3'>Solid Cards</Typography>
-        <Divider />
-      </Grid>
-      <Grid item xs={12} sm={6} md={4}>
-        <CardTwitter />
-      </Grid>
-      <Grid item xs={12} sm={6} md={4}>
-        <CardFacebook />
-      </Grid>
-      <Grid item xs={12} sm={6} md={4}>
-        <CardLinkedIn />
-      </Grid>
-    </Grid>
-  )
-}
-
-export default CardBasic
diff --git a/javascript-version/src/app/(dashboard)/daily-reports/components/DeleteConfirmModal.jsx b/javascript-version/src/app/(dashboard)/daily-reports/components/DeleteConfirmModal.jsx
new file mode 100644
index 000000000..b960a3363
--- /dev/null
+++ b/javascript-version/src/app/(dashboard)/daily-reports/components/DeleteConfirmModal.jsx
@@ -0,0 +1,101 @@
+/*
+======== ファイル概要 ========
+日報削除の最終確認モーダルを描画するコンポーネントを定義する。
+ダイアログの見た目とボタン操作を統一して、呼び出し元に結果を返す役割を担う。
+*/
+
+import Dialog from '@mui/material/Dialog';
+import DialogTitle from '@mui/material/DialogTitle';
+import DialogContent from '@mui/material/DialogContent';
+import DialogActions from '@mui/material/DialogActions';
+import Button from '@mui/material/Button';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import IconButton from '@mui/material/IconButton';
+import CloseIcon from '@mui/icons-material/Close';
+import WarningAmberRoundedIcon from '@mui/icons-material/WarningAmberRounded';
+
+/**
+ * 日報削除時にユーザーへ確認を促すモーダル。
+ * @param {boolean} open          - モーダルの開閉状態。
+ * @param {Function} onClose      - キャンセル押下時や外側クリック時のクローズ処理。
+ * @param {Function} onConfirm    - 削除実行ボタン押下時のコールバック。
+ * @returns {JSX.Element}         - 警告メッセージ付きの確認ダイアログ。
+ */
+export default function DeleteConfirmModal({ open, onClose, onConfirm }) {
+  return (
+    <Dialog 
+      open={open} 
+      onClose={onClose}
+      fullWidth
+      maxWidth="sm"
+      PaperProps={{
+        sx: { borderRadius: 2, p: 1 } // 全体の角丸と余白
+      }}
+    >
+      {/* タイトルと閉じるボタン */}
+      <DialogTitle sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', pb: 1 }}>
+        <Typography variant="h6" fontWeight="bold" color="text.primary">
+          日報の削除
+        </Typography>
+        <IconButton onClick={onClose} size="small">
+          <CloseIcon />
+        </IconButton>
+      </DialogTitle>
+      
+      <DialogContent sx={{ pb: 3 }}>
+        <Typography sx={{ mb: 3, color: 'text.secondary' }}>
+          本当にこの日報データを削除しますか？<br />
+          この操作は取り消せません。
+        </Typography>
+
+        {/* 赤色の警告ボックス */}
+        <Box 
+          sx={{ 
+            bgcolor: '#fee2e2', // 薄い赤背景
+            color: '#b91c1c',   // 濃い赤文字
+            p: 2, 
+            borderRadius: 1,
+            display: 'flex',
+            alignItems: 'start',
+            gap: 1.5,
+            border: '1px solid #fecaca'
+          }}
+        >
+          <WarningAmberRoundedIcon sx={{ fontSize: 24, mt: 0.2 }} />
+          <Typography variant="body2" sx={{ fontWeight: 500 }}>
+            削除するとデータは完全に失われ、元に戻すことはできません。
+            十分に確認してから実行してください。
+          </Typography>
+        </Box>
+      </DialogContent>
+
+      <DialogActions sx={{ px: 3, pb: 2 }}>
+        {/* キャンセルボタン (グレー) */}
+        <Button 
+          onClick={onClose} 
+          variant="contained"
+          sx={{ 
+            bgcolor: '#e5e7eb', 
+            color: '#374151',
+            fontWeight: 'bold',
+            boxShadow: 'none',
+            '&:hover': { bgcolor: '#d1d5db' }
+          }}
+        >
+          キャンセル
+        </Button>
+
+        {/* 削除ボタン (赤) */}
+        <Button 
+          onClick={onConfirm} 
+          variant="contained" 
+          color="error"
+          sx={{ fontWeight: 'bold', boxShadow: 'none' }}
+        >
+          削除
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}
\ No newline at end of file
diff --git a/javascript-version/src/app/(dashboard)/daily-reports/components/ReportCard.jsx b/javascript-version/src/app/(dashboard)/daily-reports/components/ReportCard.jsx
new file mode 100644
index 000000000..2c6a151af
--- /dev/null
+++ b/javascript-version/src/app/(dashboard)/daily-reports/components/ReportCard.jsx
@@ -0,0 +1,168 @@
+/*
+======== ファイル概要 ========
+日報カードの見た目と操作をまとめたプレゼンテーションコンポーネントを提供する。
+閲覧・編集・削除ボタンの表示可否を制御しつつ、カードレイアウトを統一する。
+*/
+
+import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
+import CardActions from '@mui/material/CardActions';
+import CardContent from '@mui/material/CardContent';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
+import IconButton from '@mui/material/IconButton';
+import DeleteIcon from '@mui/icons-material/Delete';
+import EditIcon from '@mui/icons-material/Edit';
+
+/**
+ * 日付文字列を日本語ローカライズした表記へ変換する。
+ * @param {string} dateStr        - ISO形式などの元日付文字列。
+ * @returns {string}              - 表示用に整形された日付文字列。
+ */
+const dateFormatter = (dateStr) => {
+  if (!dateStr) return '';
+  const date = new Date(dateStr);
+  if (isNaN(date.getTime())) return dateStr;
+  return date.toLocaleDateString('ja-JP', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+    weekday: 'short',
+  });
+};
+
+// ★ currentUser, isAdmin を受け取る
+/**
+ * 日報一覧で1件分の概要を表示するカード。
+ * @param {object} report                  - 表示対象の日報データ。
+ * @param {Function} onViewDetail          - 詳細モーダルを開くためのハンドラー。
+ * @param {Function} onDelete              - 削除処理を要求するハンドラー。
+ * @param {Function} onEdit                - 編集モーダルを開くためのハンドラー。
+ * @param {object} currentUser             - ログイン中ユーザー情報。権限判定に用いる。
+ * @param {boolean} isAdmin                - 管理者権限の有無。
+ * @returns {JSX.Element}                  - 権限に応じた操作ボタン付きカード。
+ */
+export default function ReportCard({ report, onViewDetail, onDelete, onEdit, currentUser, isAdmin }) {
+  const handleDetailClick = () => {
+    if (onViewDetail) onViewDetail(report);
+  };
+
+  // --- 権限チェックロジック ---
+  
+  // 自分が作成した日報かどうか (安全のため文字列化して比較)
+  const isOwner = currentUser?.employee_id && 
+                  String(currentUser.employee_id) === String(report.employee_id);
+
+  // 編集できるか？ (管理者 または 本人)
+  const canEdit = isAdmin || isOwner;
+
+  // 削除できるか？ (管理者のみ)
+  const canDelete = isAdmin;
+
+  return (
+    <Card
+      sx={{
+        borderRadius: 3,
+        boxShadow: 3,
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        transition: 'box-shadow 0.3s',
+        '&:hover': { boxShadow: 8 },
+      }}
+    >
+      <CardContent sx={{ flexGrow: 1 }}>
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            mb: 2,
+            pb: 2,
+            borderBottom: '1px solid',
+            borderColor: 'grey.200',
+          }}
+        >
+          <Box
+            sx={{
+              width: 48,
+              height: 48,
+              borderRadius: '50%',
+              bgcolor: report.avatarColor || '#ccc',
+              color: '#fff',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              fontWeight: 'bold',
+              fontSize: 22,
+              mr: 2,
+            }}
+          >
+            {report.avatarText}
+          </Box>
+          <Box>
+            <Typography fontWeight="bold" color="text.primary">
+              {report.user}
+            </Typography>
+            <Typography variant="body2" color="text.secondary">
+              {dateFormatter(report.date)}
+            </Typography>
+          </Box>
+        </Box>
+        <Box sx={{ fontSize: 15, color: 'text.secondary', mb: 1 }}>
+          <strong style={{ width: 60, display: 'inline-block', color: '#6b7280' }}>
+            製品名:
+          </strong>{' '}
+          <span style={{ fontWeight: 600 }}>{report.product}</span>
+        </Box>
+        
+        <Box sx={{ mt: 1 }}>
+          <strong style={{ color: '#6b7280', marginBottom: 4, display: 'inline-block' }}>
+            作業内容:
+          </strong>
+          <Typography
+            variant="body2"
+            color="text.secondary"
+            sx={{
+              display: '-webkit-box',
+              WebkitLineClamp: 2,
+              WebkitBoxOrient: 'vertical',
+              overflow: 'hidden',
+            }}
+          >
+            {report.work}
+          </Typography>
+        </Box>
+      </CardContent>
+      <CardActions sx={{ justifyContent: 'space-between', px: 2, pb: 2 }}>
+        <Box>
+           {/* ★ 編集ボタン: 管理者 OR 本人のみ表示 */}
+           {canEdit && (
+             <IconButton 
+              aria-label="edit" 
+              color="primary" 
+              onClick={() => onEdit(report)}
+              sx={{ mr: 1 }}
+            >
+              <EditIcon />
+            </IconButton>
+           )}
+
+          {/* ★ 削除ボタン: 管理者のみ表示 */}
+          {canDelete && (
+            <IconButton 
+              aria-label="delete" 
+              color="error" 
+              onClick={() => onDelete(report.id)}
+            >
+              <DeleteIcon />
+            </IconButton>
+          )}
+        </Box>
+
+        <Button size="small" color="primary" sx={{ fontWeight: 'bold' }} onClick={handleDetailClick}>
+          詳細を見る &rarr;
+        </Button>
+      </CardActions>
+    </Card>
+  );
+}
\ No newline at end of file
diff --git a/javascript-version/src/app/(dashboard)/daily-reports/components/ReportDetailModal.jsx b/javascript-version/src/app/(dashboard)/daily-reports/components/ReportDetailModal.jsx
new file mode 100644
index 000000000..d0644e140
--- /dev/null
+++ b/javascript-version/src/app/(dashboard)/daily-reports/components/ReportDetailModal.jsx
@@ -0,0 +1,108 @@
+/*
+======== ファイル概要 ========
+日報の詳細をポップアップで確認するモーダルコンポーネントを定義する。
+ヘッダーから本文まで統一したスタイルで日次報告の内容を表示する。
+*/
+
+import Dialog from '@mui/material/Dialog';
+import DialogTitle from '@mui/material/DialogTitle';
+import DialogContent from '@mui/material/DialogContent';
+import DialogActions from '@mui/material/DialogActions';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+import Divider from '@mui/material/Divider';
+import Chip from '@mui/material/Chip';
+
+/**
+ * 日報の詳細情報をモーダル表示するコンポーネント。
+ * @param {boolean} open          - モーダルの開閉状態。
+ * @param {Function} onClose      - 閉じる操作を通知するコールバック。
+ * @param {object|null} report    - 表示対象の日報データ。null時は描画しない。
+ * @returns {JSX.Element|null}    - 詳細情報を表示するダイアログ、対象が無ければnull。
+ */
+export default function ReportDetailModal({ open, onClose, report }) {
+  if (!report) return null; // データ未設定時にモーダルを空描画させず安全にスキップする。
+
+  return (
+    <Dialog open={open} onClose={onClose} fullWidth maxWidth="sm">
+      <DialogTitle sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+        {/* アバターを表示 */}
+        <Box
+          sx={{
+            width: 40,
+            height: 40,
+            borderRadius: '50%',
+            bgcolor: report.avatarColor || '#ccc',
+            color: '#fff',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            fontSize: 16,
+            fontWeight: 'bold',
+          }}
+        >
+          {report.avatarText}
+        </Box>
+        <Box>
+          <Typography variant="h6" component="div" sx={{ lineHeight: 1.2 }}>
+            {report.user}
+          </Typography>
+          <Typography variant="caption" color="text.secondary">
+            ID: {report.id}
+          </Typography>
+        </Box>
+      </DialogTitle>
+      
+      <Divider />
+
+      <DialogContent>
+        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+          
+          {/* ★修正: 日付にもボックススタイルを適用 */}
+          <Box sx={{ bgcolor: '#f9fafb', p: 2, borderRadius: 2 }}>
+            <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 0.5 }}>
+              日付
+            </Typography>
+            <Typography variant="body1" fontWeight="500">
+              {report.date} 
+            </Typography>
+          </Box>
+
+          {/* ★修正: ライン・製品名にもボックススタイルを適用 */}
+          <Box sx={{ bgcolor: '#f9fafb', p: 2, borderRadius: 2 }}>
+            <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 1 }}>
+              担当ライン / 製品
+            </Typography>
+            <Box>
+              <Chip 
+                label={report.product} 
+                color="primary" 
+                variant="outlined" 
+                size="small" 
+                sx={{ bgcolor: 'white' }} 
+              />
+            </Box>
+          </Box>
+
+          {/* 作業内容 (ここは既存のまま) */}
+          <Box sx={{ bgcolor: '#f9fafb', p: 2, borderRadius: 2 }}>
+            <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 1 }}>
+              作業内容・報告事項
+            </Typography>
+            <Typography variant="body2" sx={{ whiteSpace: 'pre-wrap' }}>
+              {report.work}
+            </Typography>
+          </Box>
+
+        </Box>
+      </DialogContent>
+
+      <DialogActions>
+        <Button onClick={onClose} color="primary">
+          閉じる
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}
\ No newline at end of file
diff --git a/javascript-version/src/app/(dashboard)/daily-reports/components/ReportFilter.jsx b/javascript-version/src/app/(dashboard)/daily-reports/components/ReportFilter.jsx
new file mode 100644
index 000000000..9038bfaaa
--- /dev/null
+++ b/javascript-version/src/app/(dashboard)/daily-reports/components/ReportFilter.jsx
@@ -0,0 +1,98 @@
+/*
+======== ファイル概要 ========
+日報一覧の検索条件入力エリアを提供し、検索値とソート順変更をハンドラーへ通知するコンポーネントを定義する。
+*/
+
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import Grid from '@mui/material/Grid';
+import TextField from '@mui/material/TextField';
+// ★ 追加インポート
+import FormControl from '@mui/material/FormControl';
+import Select from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
+import InputLabel from '@mui/material/InputLabel';
+
+/**
+ * 日報一覧用の検索フォームと並び替えをまとめたフィルターコンポーネント。
+ * @param {string} searchUser         - 担当者名の検索キーワード。
+ * @param {string} searchDate         - 指定日での絞り込み値。
+ * @param {string} searchProduct      - 製品名の検索キーワード。
+ * @param {string} sortOrder          - 並び順識別子。
+ * @param {Function} onChange         - フィルタ入力変更時に呼ばれるハンドラー。
+ * @param {Function} onSortChange     - 並び順変更時に呼ばれるハンドラー。
+ * @returns {JSX.Element}             - 4カラム構成のフィルタフォーム。
+ */
+export default function ReportFilter({ 
+  searchUser, 
+  searchDate, 
+  searchProduct, 
+  sortOrder,       // ★追加: ソート状態を受け取る
+  onChange, 
+  onSortChange     // ★追加: ソート変更関数を受け取る
+}) {
+  return (
+    <Card sx={{ mb: 4, borderRadius: 3, boxShadow: 3 }}>
+      <CardContent>
+        <Grid container spacing={2}>
+          
+          {/* 1. 担当者 (幅を 3/12 に変更) */}
+          <Grid item xs={12} sm={6} md={3}>
+            <TextField
+              label="担当者"
+              value={searchUser}
+              onChange={event => onChange('searchUser', event.target.value)}
+              fullWidth
+              size="small"
+              placeholder="山田 太郎"
+              variant="outlined"
+            />
+          </Grid>
+
+          {/* 2. 日付 (幅を 3/12 に変更) */}
+          <Grid item xs={12} sm={6} md={3}>
+            <TextField
+              label="日付"
+              type="date"
+              value={searchDate}
+              onChange={event => onChange('searchDate', event.target.value)}
+              fullWidth
+              size="small"
+              InputLabelProps={{ shrink: true }}
+              variant="outlined"
+            />
+          </Grid>
+
+          {/* 3. 製品名 (幅を 3/12 に変更) */}
+          <Grid item xs={12} sm={6} md={3}>
+            <TextField
+              label="製品名"
+              value={searchProduct}
+              onChange={event => onChange('searchProduct', event.target.value)}
+              fullWidth
+              size="small"
+              placeholder="製品A-102"
+              variant="outlined"
+            />
+          </Grid>
+
+          {/* 4. 並び替え (★ここに追加！) */}
+          <Grid item xs={12} sm={6} md={3}>
+            <FormControl fullWidth size="small" variant="outlined">
+              <InputLabel>並び替え</InputLabel>
+              <Select
+                value={sortOrder}
+                label="並び替え"
+                onChange={(e) => onSortChange(e.target.value)}
+              >
+                <MenuItem value="date_desc">日付が新しい順</MenuItem>
+                <MenuItem value="date_asc">日付が古い順</MenuItem>
+              </Select>
+            </FormControl>
+          </Grid>
+
+        </Grid>
+      </CardContent>
+    </Card>
+  );
+}
\ No newline at end of file
diff --git a/javascript-version/src/app/(dashboard)/daily-reports/components/ReportList.jsx b/javascript-version/src/app/(dashboard)/daily-reports/components/ReportList.jsx
new file mode 100644
index 000000000..9cf0ee683
--- /dev/null
+++ b/javascript-version/src/app/(dashboard)/daily-reports/components/ReportList.jsx
@@ -0,0 +1,38 @@
+/*
+======== ファイル概要 ========
+日報カードのリスト表示を担うグリッドレイアウトコンポーネントを提供する。
+*/
+
+import Grid from '@mui/material/Grid';
+import ReportCard from './ReportCard';
+
+// ★ currentUser, isAdmin を受け取る
+/**
+ * 日報カード群をグリッドレイアウトで描画するコンテナ。
+ * @param {Array<object>} reports         - 表示する日報データ配列。
+ * @param {Function} onDelete             - 削除要求を処理するハンドラー。
+ * @param {Function} onViewDetail         - 詳細モーダルを開くハンドラー。
+ * @param {Function} onEdit               - 編集モーダルを開くハンドラー。
+ * @param {object} currentUser            - ログインユーザー情報。ReportCardへ透過。
+ * @param {boolean} isAdmin               - 管理者権限の有無。
+ * @returns {JSX.Element}                 - 日報カードを並べたグリッド。
+ */
+export default function ReportList({ reports, onDelete, onViewDetail, onEdit, currentUser, isAdmin }) {
+  return (
+    <Grid container spacing={3}>
+      {reports.map((report) => (
+        <Grid item xs={12} sm={6} md={4} key={report.id}>
+          <ReportCard 
+            report={report} 
+            onDelete={onDelete}
+            onViewDetail={onViewDetail}
+            onEdit={onEdit}
+            // ★ カードに渡す
+            currentUser={currentUser}
+            isAdmin={isAdmin}
+          /> 
+        </Grid>
+      ))}
+    </Grid>
+  );
+}
\ No newline at end of file
diff --git a/javascript-version/src/app/(dashboard)/daily-reports/components/ReportModal.jsx b/javascript-version/src/app/(dashboard)/daily-reports/components/ReportModal.jsx
new file mode 100644
index 000000000..eb808ba55
--- /dev/null
+++ b/javascript-version/src/app/(dashboard)/daily-reports/components/ReportModal.jsx
@@ -0,0 +1,189 @@
+/*
+======== ファイル概要 ========
+日報の登録・編集フォームをモーダル表示し、入力値をAPI送信用に整形して親へ返すコンポーネントを定義する。
+*/
+
+import { useState, useEffect } from 'react';
+import Dialog from '@mui/material/Dialog';
+import DialogTitle from '@mui/material/DialogTitle';
+import DialogContent from '@mui/material/DialogContent';
+import DialogActions from '@mui/material/DialogActions';
+import Button from '@mui/material/Button';
+import TextField from '@mui/material/TextField';
+import MenuItem from '@mui/material/MenuItem';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+
+// ★修正: 正しいパスに変更しました
+import useAuthMe from '@core/hooks/useAuthMe';
+
+/**
+ * 日報の新規登録または編集を行うモーダルフォーム。
+ * @param {boolean} open                - モーダルの開閉状態。
+ * @param {Function} onClose            - モーダルを閉じるためのコールバック。
+ * @param {Function} onSubmit           - 入力内容を親へ送信するコールバック。
+ * @param {object|null} initialData     - 編集時の初期値。新規時はnull想定。
+ * @returns {JSX.Element}               - 入力フォーム付きのモーダル。
+ */
+export default function ReportModal({ open, onClose, onSubmit, initialData }) {
+  // ログインユーザー情報を取得
+  const { user } = useAuthMe();
+
+  // ======== 処理ステップ: 入力状態の初期化 → マスタ取得 → 初期値設定 ========
+  // 1. 入力状態の初期化では登録と編集のどちらでも使える空フォームを用意し、開閉に依存しない状態を維持する。
+  // 2. マスタ取得ではライン情報のみフェッチして選択肢を最新化する。モーダルが開いている間だけ取得し無駄なリクエストを避ける。
+  // 3. 初期値設定では編集時は既存値、新規時は利用者の情報を自動反映させ、入力の手間を減らす。
+  const [formData, setFormData] = useState({
+    employee_id: '',
+    line_id: '',
+    report_date: new Date().toISOString().split('T')[0],
+    notes: ''
+  });
+
+  const [lineList, setLineList] = useState([]);
+
+  // 編集モード判定
+  const isEditMode = Boolean(initialData);
+
+  // マスタデータ取得 (ライン一覧のみ)
+  useEffect(() => {
+    if (open) {
+      const fetchMasters = async () => {
+        try {
+          const lineRes = await fetch('/api/lines');      
+          if (lineRes.ok) {
+            const data = await lineRes.json();
+            setLineList(Array.isArray(data) ? data : (data.lines || []));
+          }
+        } catch (error) {
+          console.error('マスタデータ取得エラー:', error);
+        }
+      };
+      fetchMasters();
+    }
+  }, [open]);
+
+  // フォーム初期値の設定
+  useEffect(() => {
+    if (open) {
+      if (initialData) {
+        // --- 編集モード ---
+        setFormData({
+            employee_id: initialData.employee_id || '',
+            line_id: initialData.line_id || '',
+            report_date: initialData.date ? initialData.date.split('T')[0] : '',
+            notes: initialData.work || '' 
+        });
+      } else {
+        // --- 新規登録モード ---
+        // ログインユーザーのIDを自動セット
+        // user.employee_id がなければ user.id を使う
+        const currentUserId = user?.employee_id || user?.id || '';
+        
+        setFormData({
+          employee_id: currentUserId, 
+          line_id: '',
+          report_date: new Date().toISOString().split('T')[0],
+          notes: ''
+        });
+      }
+    }
+  }, [open, initialData, user]);
+
+  const handleChange = (e) => {
+    setFormData({ ...formData, [e.target.name]: e.target.value });
+  };
+
+  /**
+   * フォーム送信時の入力チェックと親コンポーネントへの通知を実施する。
+   * 必須項目が欠ける状態ではAPIエラーになるため、事前にアラートで防ぐ。
+   */
+  const handleSubmit = () => {
+    if (!formData.employee_id || !formData.line_id || !formData.report_date) {
+      // API仕様で必須となっている3項目が欠けると422エラーになるため、送信前にブロックする。
+      alert('担当者情報、日付、製品名は必須です');
+      return;
+    }
+    onSubmit(formData);
+    onClose();
+  };
+
+  // 表示する担当者名
+  const displayUserName = isEditMode 
+    ? initialData?.user // 編集時は元データの名前
+    : (user?.employee_name || user?.name || user?.username || '読み込み中...');
+
+  return (
+    <Dialog open={open} onClose={onClose} fullWidth maxWidth="sm">
+      <DialogTitle sx={{ fontWeight: 'bold' }}>
+        {isEditMode ? '日報の編集' : '日報の新規登録'}
+      </DialogTitle>
+      <DialogContent>
+        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3, mt: 1 }}>
+          
+          {/* 日付 */}
+          <TextField
+            label="日付"
+            type="date"
+            name="report_date"
+            value={formData.report_date}
+            onChange={handleChange}
+            fullWidth
+            InputLabelProps={{ shrink: true }}
+          />
+
+          {/* 担当者 (自動入力表示) */}
+          <Box sx={{ p: 2, bgcolor: '#f5f5f5', borderRadius: 1 }}>
+            <Typography variant="caption" color="text.secondary">
+              担当者 (自動入力)
+            </Typography>
+            <Typography variant="body1" fontWeight="bold">
+              {displayUserName}
+            </Typography>
+          </Box>
+
+          {/* 製品名 (ライン) */}
+          <TextField
+            select
+            label="製品名 (ライン)"
+            name="line_id"
+            value={formData.line_id}
+            onChange={handleChange}
+            fullWidth
+          >
+             {lineList.length === 0 && <MenuItem disabled>読み込み中...</MenuItem>}
+             {lineList.map((line) => (
+              <MenuItem key={line.line_id} value={line.line_id}>
+                {line.line_name}
+              </MenuItem>
+            ))}
+          </TextField>
+
+          {/* 作業内容 */}
+          <TextField
+            label="作業内容"
+            name="notes"
+            value={formData.notes}
+            onChange={handleChange}
+            multiline
+            rows={4}
+            fullWidth
+            placeholder="本日の作業内容..."
+          />
+        </Box>
+      </DialogContent>
+      <DialogActions sx={{ p: 3 }}>
+        <Button onClick={onClose} color="inherit">キャンセル</Button>
+        <Button 
+          onClick={handleSubmit} 
+          variant="contained" 
+          color="primary"
+          // IDがセットされるまでボタンを押せないようにする
+          disabled={!formData.employee_id}
+        >
+          {isEditMode ? '更新する' : '登録する'}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}
\ No newline at end of file
diff --git a/javascript-version/src/app/(dashboard)/daily-reports/page.jsx b/javascript-version/src/app/(dashboard)/daily-reports/page.jsx
new file mode 100644
index 000000000..4bc215d60
--- /dev/null
+++ b/javascript-version/src/app/(dashboard)/daily-reports/page.jsx
@@ -0,0 +1,293 @@
+"use client";
+
+/*
+======== ファイル概要 ========
+日報一覧ページのトップレベルコンポーネントを定義するファイル。
+API連携で日報データを取得・更新しつつ、フィルタやモーダルを含むUI全体の状態を集中管理する。
+*/
+
+import { useCallback, useEffect, useState } from 'react';
+import Box from '@mui/material/Box';
+import IconButton from '@mui/material/IconButton';
+import AddIcon from '@mui/icons-material/Add';
+
+import ReportFilter from './components/ReportFilter';
+import ReportList from './components/ReportList';
+import ReportModal from './components/ReportModal';
+import ReportDetailModal from './components/ReportDetailModal';
+import DeleteConfirmModal from './components/DeleteConfirmModal';
+
+// ★権限管理フック
+import useAuthMe from '@core/hooks/useAuthMe';
+
+/**
+ * 日報一覧ページを描画し、一覧と各種モーダルを制御するコンポーネント。
+ * @returns {JSX.Element} 日報のフィルタ・一覧・各種モーダルをまとめたダッシュボード画面。
+ */
+export default function DailyReportsPage() {
+  // ★ 権限情報を取得
+  const { user, isAdmin } = useAuthMe();
+
+  // ======== 処理ステップ: 一覧状態の初期化 → モーダル状態の初期化 → フィルタ条件の保持 ========
+  // 1. 一覧状態の初期化ではUIに描画する日報データとロード状態を確保し、非同期処理の結果を反映できるようにする。
+  // 2. モーダル状態の初期化では各モーダルの開閉を個別に扱い、同時表示を防ぐための管理を行う。
+  // 3. フィルタ条件の保持では検索フォームと同期させるための条件値をまとめ、APIパラメータ生成を容易にする。
+  const [uiReports, setUiReports] = useState([]); 
+  const [loading, setLoading] = useState(true);
+  
+  // モーダル管理
+  const [open, setOpen] = useState(false);             // 登録・編集
+  const [detailOpen, setDetailOpen] = useState(false); // 詳細
+  const [deleteOpen, setDeleteOpen] = useState(false); // 削除
+
+  // 選択データ管理
+  const [selectedReport, setSelectedReport] = useState(null); // 詳細用
+  const [deleteTargetId, setDeleteTargetId] = useState(null); // 削除用
+  const [editingReport, setEditingReport] = useState(null);   // 編集用
+
+  const [filters, setFilters] = useState({
+    employee_name: '',
+    date: '',         
+    product: ''       
+  });
+  const [sortOrder, setSortOrder] = useState('date_desc');
+
+  /**
+   * 文字列から安定したカラーコードを算出するユーティリティ。
+   * @param {string} string         - 元になる文字列。社員名など識別子を渡す。
+   * @returns {string}              - #RRGGBB形式のカラーコード。表示上の個別色を維持するために利用。
+   */
+  const stringToColor = useCallback((string) => {
+    let hash = 0;
+    for (let i = 0; i < string.length; i++) {
+      hash = string.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    const c = (hash & 0x00ffffff).toString(16).toUpperCase();
+    return '#' + '00000'.substring(0, 6 - c.length) + c;
+  }, []);
+
+  // --- 1. データ取得 (GET) ---
+  /**
+   * APIから日報データを取得してUIで扱いやすい形式へ整形する。
+   * フィルタ・並び替え条件に応じてクエリを組み立てる。
+   */
+  const fetchReports = useCallback(async () => {
+    try {
+      setLoading(true);
+      const params = new URLSearchParams();
+      
+      if (filters.employee_name) params.set('employee_name', filters.employee_name);
+      if (filters.date) params.set('start_date', filters.date);
+      if (filters.product) params.set('line_name', filters.product);
+      params.set('sort', sortOrder);
+
+      const res = await fetch(`/api/reports?${params.toString()}`);
+      if (!res.ok) throw new Error('Fetch failed'); // APIが失敗した場合は例外にしてリトライ契機を作る。
+
+      const rawData = await res.json();
+      const dataArray = rawData.reports || (Array.isArray(rawData) ? rawData : []);
+
+      // データ整形
+      const formattedData = dataArray.map((item) => ({
+        id: item.report_id,
+        // ★権限判定のために employee_id が必須
+        employee_id: item.employee_id, 
+        line_id: item.line_id,
+        
+        // 表示用データ
+        user: item.employee_name,        
+        date: item.report_date,
+        product: item.line_name,         
+        result: '--- 個', 
+        work: item.notes || '',          
+        avatarColor: stringToColor(item.employee_name || ''), 
+        avatarText: (item.employee_name || '??').slice(0, 2)
+      }));
+
+      setUiReports(formattedData);
+    } catch (error) {
+      console.error('取得エラー:', error);
+      setUiReports([]);
+    } finally {
+      setLoading(false);
+    }
+  }, [filters, sortOrder, stringToColor]);
+
+  // --- 2. 削除処理 (DELETE) ---
+  const handleClickDelete = (id) => {
+    setDeleteTargetId(id);
+    setDeleteOpen(true);
+  };
+
+  /**
+   * 削除確認モーダルからの確定操作でAPIに削除リクエストを送る。
+   * 成功後は一覧を最新化してモーダルを閉じる。
+   */
+  const executeDelete = async () => {
+    if (!deleteTargetId) return;
+    try {
+      const res = await fetch(`/api/reports/${deleteTargetId}`, { method: 'DELETE' });
+      if (!res.ok) throw new Error('Delete failed'); // サーバーエラー時は利用者に再試行を促す必要があるため例外にする。
+      await fetchReports();
+      setDeleteOpen(false);
+      setDeleteTargetId(null);
+    } catch (error) {
+      alert('削除に失敗しました');
+    }
+  };
+
+  // --- 3. 新規登録 (POST) ---
+  /**
+   * 日報の新規登録フォーム送信時にAPIへPOSTする。
+   * バリデーションエラーをレスポンスから受け取り、利用者へ伝える。
+   * @param {object} formData       - 入力フォームで収集した日報情報。
+   */
+  const handleAdd = async (formData) => {
+    try {
+      const res = await fetch('/api/reports', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(formData),
+      });
+
+      if (!res.ok) {
+        const err = await res.json();
+        alert(err.message || '登録に失敗しました');
+        return;
+      }
+      await fetchReports();
+      setOpen(false); 
+    } catch (error) {
+      console.error('登録エラー:', error);
+      alert('通信エラーが発生しました');
+    }
+  };
+
+  // --- 4. 更新処理 (PUT) ---
+  /**
+   * 既存日報の更新フォーム送信時にAPIへPUTする。
+   * 編集対象が未選択の場合は処理を避ける。
+   * @param {object} formData       - フォームで編集した日報情報。
+   */
+  const handleUpdate = async (formData) => {
+    if (!editingReport) return;
+    try {
+      const res = await fetch(`/api/reports/${editingReport.id}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(formData),
+      });
+
+      if (!res.ok) throw new Error('Update failed'); // 失敗時はモーダルを閉じずに再入力を促すため例外にする。
+      
+      await fetchReports();
+      setOpen(false);
+      setEditingReport(null);
+    } catch (error) {
+      alert('更新に失敗しました');
+    }
+  };
+
+  /**
+   * 一覧カードから編集ボタンを押されたときに対象データをモーダルへセットする。
+   * @param {object} report         - 編集対象の日報データ。
+   */
+  const handleEditClick = (report) => {
+    setEditingReport(report);
+    setOpen(true);
+  };
+
+  /**
+   * 一覧カードから詳細ボタンを押されたときに詳細モーダルを開く。
+   * @param {object} report         - 詳細表示したい日報データ。
+   */
+  const handleViewDetail = (report) => {
+    setSelectedReport(report);
+    setDetailOpen(true);
+  };
+
+  /**
+   * 検索フォームからの変更を内部フィルタ状態に反映する。
+   * keyによって対象フィールドを切り替え、APIクエリ生成時の条件になる。
+   * @param {string} key            - フィルタ項目の識別子。
+   * @param {string} value          - 入力された値。
+   */
+  const handleFilterChange = (key, value) => {
+    setFilters((prev) => {
+      const newFilters = { ...prev };
+      if (key === 'searchUser') newFilters.employee_name = value;
+      if (key === 'searchDate') newFilters.date = value;
+      if (key === 'searchProduct') newFilters.product = value; // ライン名でフィルタするため別キーに変換。
+      return newFilters;
+    });
+  };
+
+  // ======== 処理ステップ: 初期レンダリング → データ取得トリガー設定 ========
+  // 1. 初期レンダリングではuseEffect内で500msのディレイを置くことで入力途中の無駄なAPI呼び出しを抑制する。
+  // 2. データ取得トリガー設定ではフィルタが更新されるたびにfetchReportsを呼び出して一覧を最新状態に保つ。
+  useEffect(() => {
+    const timer = setTimeout(() => fetchReports(), 500);
+    return () => clearTimeout(timer);
+  }, [fetchReports]);
+
+  return (
+    <Box sx={{ p: 3, pb: 10 }}>
+      <ReportFilter 
+        searchUser={filters.employee_name}
+        searchDate={filters.date}
+        searchProduct={filters.product}
+        sortOrder={sortOrder}
+        onChange={handleFilterChange} 
+        onSortChange={setSortOrder}
+      />
+
+      {loading ? (
+        <Box sx={{ textAlign: 'center', mt: 4 }}>読み込み中...</Box>
+      ) : (
+        <ReportList 
+          reports={uiReports} 
+          onDelete={handleClickDelete}
+          onViewDetail={handleViewDetail} 
+          onEdit={handleEditClick}
+          // ★ここで権限情報をリストへ渡す
+          currentUser={user}
+          isAdmin={isAdmin}
+        />
+      )}
+
+      <IconButton 
+        sx={{ 
+          position: 'fixed', bottom: 40, right: 40, zIndex: 1000,
+          bgcolor: 'primary.main', color: 'white', 
+          '&:hover': { bgcolor: 'primary.dark' },
+          width: 64, height: 64, boxShadow: 6
+        }}
+        onClick={() => {
+          setEditingReport(null);
+          setOpen(true);
+        }}
+      >
+        <AddIcon sx={{ fontSize: 32 }} />
+      </IconButton>
+
+      <ReportModal 
+        open={open} 
+        onClose={() => { setOpen(false); setEditingReport(null); }} 
+        onSubmit={editingReport ? handleUpdate : handleAdd} 
+        initialData={editingReport}
+      />
+
+      <ReportDetailModal
+        open={detailOpen}
+        onClose={() => setDetailOpen(false)}
+        report={selectedReport}
+      />
+
+      <DeleteConfirmModal 
+        open={deleteOpen}
+        onClose={() => setDeleteOpen(false)}
+        onConfirm={executeDelete}
+      />
+    </Box>
+  );
+}
\ No newline at end of file
diff --git a/javascript-version/src/app/(dashboard)/employee-list/README.md b/javascript-version/src/app/(dashboard)/employee-list/README.md
new file mode 100644
index 000000000..551747e67
--- /dev/null
+++ b/javascript-version/src/app/(dashboard)/employee-list/README.md
@@ -0,0 +1,69 @@
+# Employee List — ドキュメント（現状版）
+
+従業員名簿ページ一式はこのフォルダ配下にまとまっています。ページ直下構成のため、インポートは相対パスで統一しています。
+
+## フォルダ構成
+
+- `page.jsx` — ページ本体（レイアウトと配線）
+- `components/` — 見た目用コンポーネント
+  - `EmployeeCard.jsx` — 従業員カード表示（編集メニュー呼び出し）
+  - `EmployeeFormDialog.jsx` — 追加/編集ダイアログ（アバター色選択含む）
+  - `FiltersBar.jsx` — 検索/部署/在籍状況のフィルタバー
+- `utils/`
+  - `api.js` — 認証ヘッダ・色コードユーティリティ（ensureHash/stripHash）
+
+## 役割（ざっくり）
+
+- `page.jsx`
+  - 画面の土台。フィルタ状態、一覧、モーダル開閉、メニュー開閉など UI 状態を持つ
+  - データは API から直接取得し、`EmployeeCard` に表示用データを渡す
+  - 追加/編集/削除はモーダルとメニュー経由で実行
+
+- `components/*`
+  - `EmployeeCard.jsx`: 名前・ID・担当・役職・在籍状況・備考の表示。編集メニュー（権限があれば）
+  - `EmployeeFormDialog.jsx`: フォームダイアログ。役割/ライン/在籍状況の選択、アイコン色の選択、パスワード入力の表示切替
+  - `FiltersBar.jsx`: 検索テキスト、担当ライン、在籍状況のフィルタ UI
+
+- `utils/api.js`
+  - `getAuthHeaders()`: localStorage/sessionStorage のトークンから Authorization ヘッダを生成
+  - `ensureHash(hex)`: `#` 付きに正規化
+  - `stripHash(hex)`: `#` を除去
+
+## インポート方針（重要）
+
+- 本ページ配下は相対パスで統一しています。
+  - 例: `./components/EmployeeCard`, `./components/FiltersBar`, `./utils/api`
+- なお、プロジェクト全体では `@/*` エイリアスが使えますが、employee-list 配下は移動に強い構成のため相対パス運用に寄せています。
+
+## API 連携
+
+- ベースパス: `${process.env.NEXT_PUBLIC_BASE_PATH || ''}/api/...`
+- 認証: `Authorization: Bearer <token>`（`utils/api.js` の `getAuthHeaders` 利用）
+- 使用エンドポイント（想定）
+  - GET `/api/roles` — 役割マスタ取得
+  - GET `/api/lines` — ラインマスタ取得
+  - GET `/api/employees` — 従業員一覧取得（クエリ: `name_like`/`line_name`/`is_active`）
+  - POST `/api/employees` — 追加
+  - PUT `/api/employees/{employee_id}` — 更新
+  - DELETE `/api/employees/{employee_id}` — 削除
+
+## 動作メモ
+
+- 検索は 350ms デバウンスで再取得
+- 在籍状況は API の `is_active` から '在籍中'/'退職済' へマッピング
+- 役割/ラインはマスタ API で取得し、未選択時の扱いを UI 側で補完
+
+## よくあるつまずき（対処）
+
+- 認証エラーで一覧が取得できない
+  - 対処: ログイン後、トークンが localStorage または sessionStorage に入っているか確認
+- 色コードで `#` の有無による色表示の不一致
+  - 対処: 表示系は `ensureHash`、送信系は `stripHash` を利用
+- ページ移動やフォルダ整理後の import エラー
+  - 対処: 相対パスが合っているか確認し、必要なら Next の開発サーバーを再起動
+
+## 触りたいときの目安
+
+- 画面の配置やボタンを増やす → `page.jsx`
+- API の取り回し / バリデーション → `page.jsx` と `utils/api.js`
+- 見た目だけ直したい → `components/*`
diff --git a/javascript-version/src/app/(dashboard)/employee-list/components/EmployeeCard.jsx b/javascript-version/src/app/(dashboard)/employee-list/components/EmployeeCard.jsx
new file mode 100644
index 000000000..a12679911
--- /dev/null
+++ b/javascript-version/src/app/(dashboard)/employee-list/components/EmployeeCard.jsx
@@ -0,0 +1,79 @@
+"use client"
+
+/*
+======== ファイル概要 ========
+単一従業員カードのプレゼンテーション層。各種属性を強調色付きで表示し、編集メニュー操作を提供する。
+*/
+
+import Card from '@mui/material/Card'
+import CardContent from '@mui/material/CardContent'
+import Typography from '@mui/material/Typography'
+import Avatar from '@mui/material/Avatar'
+import IconButton from '@mui/material/IconButton'
+import MoreVertIcon from '@mui/icons-material/MoreVert'
+
+/**
+ * 氏名からカード用の頭文字を抜き出す。
+ * @param {string} name - フルネーム。
+ * @returns {string}    - 先頭語。空なら空文字。
+ */
+function getInitials(name) {
+  const parts = String(name || '').trim().split(/\s+/)
+
+  return parts[0] || ''
+}
+
+/**
+ * 従業員情報をカード形式で表示するコンポーネント。
+ * @param {object}   props             - コンポーネント引数。
+ * @param {object}   props.employee    - 表示対象の従業員データ。
+ * @param {Function} props.onMenuClick - メニュークリック時のハンドラ。
+ * @param {boolean}  props.canEdit     - 編集操作を許可するか否か。
+ * @returns {JSX.Element}              - 従業員カード。
+ */
+const EmployeeCard = ({ employee, onMenuClick, canEdit }) => {
+  const isRetired = employee.status === '退職済' // 退職済みは視覚的に弱めて現役との区別を付ける。
+
+  return (
+    <Card sx={{ borderRadius: 3, boxShadow: 2, opacity: isRetired ? 0.6 : 1, position: 'relative' }}>
+      {canEdit ? (
+        <IconButton
+          size='small'
+          sx={{ position: 'absolute', top: 8, right: 8 }}
+          onClick={e => onMenuClick(e, employee)}
+        >
+          <MoreVertIcon fontSize='small' />
+        </IconButton>
+      ) : null}
+      <CardContent>
+        <div style={{ display: 'flex', alignItems: 'center', marginBottom: 16 }}>
+          <Avatar
+            sx={{
+              width: 56,
+              height: 56,
+              marginRight: 2,
+              bgcolor: employee.iconColor,
+              fontWeight: 700,
+              fontSize: 24,
+              color: '#fff'
+            }}
+          >
+            {getInitials(employee.name)}
+          </Avatar>
+          <div>
+            <Typography variant='h6' sx={{ fontWeight: 700, color: isRetired ? 'text.disabled' : 'text.primary' }}>{employee.name}</Typography>
+            <Typography variant='body2' color='text.secondary'>ID: {employee.id}</Typography>
+          </div>
+        </div>
+        <Typography variant='body2'><b>担当:</b> <span style={{ color: isRetired ? '#888' : '#6366f1', fontWeight: 500 }}>{employee.department}</span></Typography>
+        <Typography variant='body2'><b>役職:</b> {employee.role}</Typography>
+        <Typography variant='body2'>
+          <b>在籍状況:</b> <span style={{ background: isRetired ? '#f3f4f6' : '#bbf7d0', color: isRetired ? '#888' : '#15803d', borderRadius: 8, padding: '2px 10px', fontWeight: 600, fontSize: 13 }}>{employee.status}</span>
+        </Typography>
+        <Typography variant='body2'><b>備考:</b> {employee.notes}</Typography>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default EmployeeCard
diff --git a/javascript-version/src/app/(dashboard)/employee-list/components/EmployeeFormDialog.jsx b/javascript-version/src/app/(dashboard)/employee-list/components/EmployeeFormDialog.jsx
new file mode 100644
index 000000000..fef62914b
--- /dev/null
+++ b/javascript-version/src/app/(dashboard)/employee-list/components/EmployeeFormDialog.jsx
@@ -0,0 +1,300 @@
+"use client"
+
+/*
+======== ファイル概要 ========
+従業員情報の追加・編集モーダル。フォーム入力、配色選択、パスワードトグルをまとめて提供する。
+*/
+
+import { useMemo } from 'react'
+
+import Dialog from '@mui/material/Dialog'
+import DialogTitle from '@mui/material/DialogTitle'
+import DialogContent from '@mui/material/DialogContent'
+import DialogActions from '@mui/material/DialogActions'
+import Button from '@mui/material/Button'
+import Grid from '@mui/material/Grid'
+import Avatar from '@mui/material/Avatar'
+import Typography from '@mui/material/Typography'
+import TextField from '@mui/material/TextField'
+import MenuItem from '@mui/material/MenuItem'
+import InputAdornment from '@mui/material/InputAdornment'
+import IconButton from '@mui/material/IconButton'
+
+const basePalette = ['#ef4444', '#f97316', '#f59e0b', '#84cc16', '#22c55e', '#10b981', '#14b8a6', '#06b6d4', '#0ea5e9', '#3b82f6', '#6366f1', '#8b5cf6', '#a855f7', '#d946ef', '#ec4899', '#f43f5e']
+const palette = Array.from(new Set([...basePalette, '#FF8800'])) // 既定色にブランドカラーを追加しつつ重複を除外する。
+
+const statusOptions = [
+  { value: '在籍中', label: '在籍中' },
+  { value: '退職済', label: '退職済' }
+]
+
+/**
+ * 従業員の追加・編集用フォームダイアログ。
+ * @param {object}    props                     - コンポーネント引数。
+ * @param {boolean}   props.open                - ダイアログ開閉状態。
+ * @param {Function}  props.onClose             - ダイアログを閉じるハンドラ。
+ * @param {object}    props.form                - フォーム値。
+ * @param {Function}  props.setForm             - フォーム更新関数。
+ * @param {Array}     props.roles               - 役割一覧。
+ * @param {Array}     props.lines               - ライン一覧。
+ * @param {boolean}   props.loadingRoles        - 役割一覧取得中か。
+ * @param {boolean}   props.loadingLines        - ライン一覧取得中か。
+ * @param {boolean}   props.isPasswordShown     - パスワード表示状態。
+ * @param {Function}  props.togglePasswordShown - パスワード表示切替。
+ * @param {Function}  props.onSave              - 保存ハンドラ。
+ * @param {Array}     props.employees           - 既存従業員一覧。
+ * @returns {JSX.Element}                       - 従業員フォームダイアログ。
+ */
+const EmployeeFormDialog = ({
+  open,
+  onClose,
+  form,
+  setForm,
+  roles,
+  lines,
+  loadingRoles,
+  loadingLines,
+  isPasswordShown,
+  togglePasswordShown,
+  onSave,
+  employees
+}) => {
+  /**
+   * 姓名からダイアログ表示用の氏名を生成する。
+   * @param {string} ln - 姓。
+   * @param {string} fn - 名。
+   * @returns {string}  - 氏名表示用文字列。
+   */
+  const getDisplayName = (ln, fn) => {
+    const l = String(ln || '').trim()
+    const f = String(fn || '').trim()
+
+    if (!l && !f) return '氏名'
+
+    return f ? `${l} ${f}` : l
+  }
+
+  /**
+   * アバター表示用のテキストを生成する。
+   * @param {string} ln - 姓。
+   * @param {string} fn - 名。
+   * @returns {string}  - 3 文字以内の表示テキスト。
+   */
+  const getAvatarText = (ln, fn) => {
+    const base = String(ln || fn || '氏名').trim()
+
+    if (!base) return '氏名'
+
+    return base.slice(0, 3)
+  }
+
+  /**
+   * 入力値をフォームステートへ反映する。
+   * @param {import('react').ChangeEvent<HTMLInputElement | HTMLTextAreaElement>} e - 入力イベント。
+   * @returns {void}
+   */
+  const handleFormChange = e => {
+    const { name, value } = e.target
+
+    if (name === 'roleId' || name === 'lineId') {
+      const v = value === '' ? '' : (typeof value === 'number' ? value : Number(value)) // 数値 API に合わせるため文字列を数値へ揃える。
+
+      setForm(prev => ({ ...prev, [name]: v }))
+    } else {
+      setForm(prev => ({ ...prev, [name]: value }))
+    }
+  }
+
+  const title = useMemo(() => (
+    form.employeeUserId && employees?.some(e => e.id === form.employeeUserId) ? '従業員編集' : '従業員追加'
+  ), [form.employeeUserId, employees]) // 既存 ID と照合してダイアログタイトルを自動切替する。
+
+  return (
+    <Dialog open={open} onClose={onClose} maxWidth='md' fullWidth>
+      <DialogTitle>{title}</DialogTitle>
+      <DialogContent>
+        <Grid container spacing={3} sx={{ mt: 1 }}>
+          <Grid item xs={12} md={4}>
+            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+              <Avatar
+                sx={{
+                  width: 80,
+                  height: 80,
+                  bgcolor: form.iconColor,
+                  fontSize: 36,
+                  fontWeight: 700,
+                  mb: 2,
+                  color: '#fff'
+                }}
+              >
+                {getAvatarText(form.lastName, form.firstName)}
+              </Avatar>
+              <Typography variant='subtitle1' sx={{ fontWeight: 700 }}>{getDisplayName(form.lastName, form.firstName)}</Typography>
+              <Typography variant='body2' color='text.secondary'>{form.employeeUserId || 'ID'}</Typography>
+              <div style={{ marginTop: 24, width: '100%' }}>
+                <Typography variant='body2' sx={{ mb: 1 }}>色を選択</Typography>
+                <Grid container spacing={1}>
+                  {palette.map(color => (
+                    <Grid item xs={2} key={color}>
+                      <div
+                        onClick={() => setForm(prev => ({ ...prev, iconColor: color }))}
+                        style={{ background: color, width: 24, height: 24, borderRadius: '50%', cursor: 'pointer', border: form.iconColor === color ? '2px solid #6366f1' : '2px solid #fff', boxShadow: '0 0 0 1px rgba(0,0,0,0.08)' }}
+                      />
+                    </Grid>
+                  ))}
+                </Grid>
+              </div>
+            </div>
+          </Grid>
+          <Grid item xs={12} md={8}>
+            <Grid container spacing={2}>
+              <Grid item xs={12} sm={6}>
+                <TextField
+                  autoFocus
+                  fullWidth
+                  label='ユーザーID'
+                  placeholder='hana.kato'
+                  name='employeeUserId'
+                  value={form.employeeUserId}
+                  onChange={handleFormChange}
+                  sx={{ mb: 2 }}
+                />
+              </Grid>
+              <Grid item xs={12} sm={3}>
+                <TextField
+                  fullWidth
+                  label='姓'
+                  placeholder='加藤'
+                  name='lastName'
+                  value={form.lastName}
+                  onChange={handleFormChange}
+                  sx={{ mb: 2 }}
+                />
+              </Grid>
+              <Grid item xs={12} sm={3}>
+                <TextField
+                  fullWidth
+                  label='名'
+                  placeholder='花'
+                  name='firstName'
+                  value={form.firstName}
+                  onChange={handleFormChange}
+                  sx={{ mb: 2 }}
+                />
+              </Grid>
+              <Grid item xs={12}>
+                <TextField
+                  fullWidth
+                  label='パスワード'
+                  type={isPasswordShown ? 'text' : 'password'}
+                  name='password'
+                  value={form.password}
+                  onChange={handleFormChange}
+                  sx={{ mb: 2 }}
+                  InputProps={{
+                    endAdornment: (
+                      <InputAdornment position='end'>
+                        <IconButton
+                          size='small'
+                          edge='end'
+                          onClick={togglePasswordShown}
+                          onMouseDown={e => e.preventDefault()}
+                        >
+                          <i className={isPasswordShown ? 'ri-eye-off-line' : 'ri-eye-line'} />
+                        </IconButton>
+                      </InputAdornment>
+                    )
+                  }}
+                />
+              </Grid>
+              <Grid item xs={12} sm={4}>
+                <TextField
+                  fullWidth
+                  select
+                  label='役割'
+                  name='roleId'
+                  value={form.roleId === '' ? '' : form.roleId}
+                  onChange={handleFormChange}
+                  disabled={loadingRoles || roles.length === 0}
+                  SelectProps={{ MenuProps: { disablePortal: true } }}
+                  sx={{ mb: 2 }}
+                >
+                  {loadingRoles ? (
+                    <MenuItem value='' disabled>読み込み中…</MenuItem>
+                  ) : (
+                    roles.map(role => (
+                      <MenuItem key={role?.role_id ?? role?.role_name} value={role?.role_id}>
+                        {role?.role_name}{role?.is_admin ? '（管理者）' : ''}
+                      </MenuItem>
+                    ))
+                  )}
+                </TextField>
+              </Grid>
+              <Grid item xs={12} sm={4}>
+                <TextField
+                  fullWidth
+                  select
+                  label='担当ライン'
+                  name='lineId'
+                  value={form.lineId === '' ? '' : form.lineId}
+                  onChange={handleFormChange}
+                  disabled={loadingLines}
+                  SelectProps={{ MenuProps: { disablePortal: true } }}
+                  helperText={(!loadingLines && lines.length === 0) ? 'ラインが未登録です。管理画面から追加してください。' : '　'}
+                  sx={{ mb: 2 }}
+                >
+                  <MenuItem value=''>未選択</MenuItem>
+                  {loadingLines ? (
+                    <MenuItem value='' disabled>読み込み中…</MenuItem>
+                  ) : (
+                    lines.map(line => (
+                      <MenuItem key={line?.line_id ?? line?.line_name} value={line?.line_id}>
+                        {line?.line_name}
+                      </MenuItem>
+                    ))
+                  )}
+                </TextField>
+              </Grid>
+              <Grid item xs={12} sm={4}>
+                <TextField
+                  fullWidth
+                  select
+                  label='在籍状況'
+                  name='status'
+                  value={form.status}
+                  onChange={handleFormChange}
+                  SelectProps={{ MenuProps: { disablePortal: true } }}
+                  helperText='　'
+                  sx={{ mb: 2 }}
+                >
+                  {statusOptions.map(opt => (
+                    <MenuItem key={opt.value} value={opt.value}>{opt.label}</MenuItem>
+                  ))}
+                </TextField>
+              </Grid>
+              <Grid item xs={12}>
+                <TextField
+                  fullWidth
+                  label='特記事項'
+                  placeholder='夜勤中心 など'
+                  name='specialNotes'
+                  value={form.specialNotes}
+                  onChange={handleFormChange}
+                  multiline
+                  minRows={2}
+                  sx={{ mb: 2 }}
+                />
+              </Grid>
+            </Grid>
+          </Grid>
+        </Grid>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose}>キャンセル</Button>
+        <Button onClick={onSave} variant='contained'>保存</Button>
+      </DialogActions>
+    </Dialog>
+  )
+}
+
+export default EmployeeFormDialog
diff --git a/javascript-version/src/app/(dashboard)/employee-list/components/FiltersBar.jsx b/javascript-version/src/app/(dashboard)/employee-list/components/FiltersBar.jsx
new file mode 100644
index 000000000..dc70df9ab
--- /dev/null
+++ b/javascript-version/src/app/(dashboard)/employee-list/components/FiltersBar.jsx
@@ -0,0 +1,90 @@
+"use client"
+
+/*
+======== ファイル概要 ========
+従業員名簿の検索・フィルタ操作バー。キーワード・部署・在籍ステータスをまとめて選択させる。
+*/
+
+import Card from '@mui/material/Card'
+import CardContent from '@mui/material/CardContent'
+import Grid from '@mui/material/Grid'
+import TextField from '@mui/material/TextField'
+import Select from '@mui/material/Select'
+import MenuItem from '@mui/material/MenuItem'
+import InputAdornment from '@mui/material/InputAdornment'
+import FormControl from '@mui/material/FormControl'
+import InputLabel from '@mui/material/InputLabel'
+
+/**
+ * 従業員一覧の検索・フィルタ入力 UI。
+ * @param {object}   props                    - コンポーネント引数。
+ * @param {string}   props.search             - 氏名検索ワード。
+ * @param {Function} props.setSearch          - 氏名検索ワード更新関数。
+ * @param {string}   props.department         - 部署フィルタ値。
+ * @param {Function} props.setDepartment      - 部署フィルタ更新関数。
+ * @param {string}   props.status             - 在籍ステータスフィルタ値。
+ * @param {Function} props.setStatus          - 在籍ステータス更新関数。
+ * @param {Array}    props.departmentOptions  - 部署セレクトの選択肢。
+ * @param {Array}    props.statusOptions      - ステータスセレクトの選択肢。
+ * @returns {JSX.Element}                     - フィルタ入力 UI。
+ */
+const FiltersBar = ({ search, setSearch, department, setDepartment, status, setStatus, departmentOptions, statusOptions }) => {
+  return (
+    <Card sx={{ mb: 4, borderRadius: 3, boxShadow: 1 }}>
+      <CardContent>
+        <Grid container spacing={2}>
+          <Grid item xs={12} md={5}>
+            <TextField
+              fullWidth
+              label='氏名で検索'
+              size='small'
+              value={search}
+              onChange={e => setSearch(e.target.value)}
+              InputProps={{
+                startAdornment: (
+                  <InputAdornment position='start'>
+                    <span className='ri-search-line' />
+                  </InputAdornment>
+                )
+              }}
+            />
+          </Grid>
+          <Grid item xs={6} md={3}>
+            <FormControl fullWidth size='small'>
+              <InputLabel id='filter-dept-label'>所属部署</InputLabel>
+              <Select
+                labelId='filter-dept-label'
+                id='filter-dept'
+                label='所属部署'
+                value={department}
+                onChange={e => setDepartment(e.target.value)}
+              >
+                {departmentOptions.map(opt => (
+                  <MenuItem key={opt.value} value={opt.value}>{opt.label}</MenuItem>
+                ))}
+              </Select>
+            </FormControl>
+          </Grid>
+          <Grid item xs={6} md={2}>
+            <FormControl fullWidth size='small'>
+              <InputLabel id='filter-status-label'>在籍状況</InputLabel>
+              <Select
+                labelId='filter-status-label'
+                id='filter-status'
+                label='在籍状況'
+                value={status}
+                onChange={e => setStatus(e.target.value)}
+              >
+                {statusOptions.map(opt => (
+                  <MenuItem key={opt.value} value={opt.value}>{opt.label}</MenuItem>
+                ))}
+              </Select>
+            </FormControl>
+          </Grid>
+        </Grid>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default FiltersBar
diff --git a/javascript-version/src/app/(dashboard)/employee-list/page.jsx b/javascript-version/src/app/(dashboard)/employee-list/page.jsx
new file mode 100644
index 000000000..2b394902c
--- /dev/null
+++ b/javascript-version/src/app/(dashboard)/employee-list/page.jsx
@@ -0,0 +1,564 @@
+"use client"
+
+/*
+======== ファイル概要 ========
+従業員名簿ページのクライアントコンポーネント。検索・フィルタ・CRUD 操作を統合し、API 呼び出しと UI 更新を橋渡しする。
+*/
+
+import { useState, useEffect, useMemo, useRef } from 'react'
+
+import Grid from '@mui/material/Grid'
+import Card from '@mui/material/Card'
+import CardContent from '@mui/material/CardContent'
+import Typography from '@mui/material/Typography'
+import Fab from '@mui/material/Fab'
+import Menu from '@mui/material/Menu'
+import MenuItem from '@mui/material/MenuItem'
+import Snackbar from '@mui/material/Snackbar'
+import Alert from '@mui/material/Alert'
+import AddIcon from '@mui/icons-material/Add'
+
+import useAuthMe from '@core/hooks/useAuthMe'
+
+import EmployeeCard from './components/EmployeeCard'
+import FiltersBar from './components/FiltersBar'
+import EmployeeFormDialog from './components/EmployeeFormDialog'
+import { getAuthHeaders, ensureHash, stripHash } from './utils/api'
+
+const statusOptions = [
+  { value: 'all', label: 'すべて' },
+  { value: '在籍中', label: '在籍中' },
+  { value: '退職済', label: '退職済' }
+]
+
+/**
+ * 氏名を「姓 名」形式に整形するためのユーティリティ。
+ * @param {string} ln         - 姓。空文字の場合は名のみを返す。
+ * @param {string} fn         - 名。空文字の場合は姓のみを返す。
+ * @returns {string}          - スペース区切りの氏名。両方空なら空文字。
+ */
+const getDisplayName = (ln, fn) => {
+  const l = String(ln || '').trim()
+  const f = String(fn || '').trim()
+
+  if (!l && !f) return ''
+
+  return f ? `${l} ${f}` : l
+}
+
+/**
+ * 従業員名簿のトップレベルコンポーネント。
+ * @returns {JSX.Element} - 従業員カードと管理用ダイアログを含む UI ツリー。
+ */
+const EmployeeList = () => {
+  const [employees, setEmployees] = useState([])
+  const [employeesLoading, setEmployeesLoading] = useState(false)
+  const [employeesError, setEmployeesError] = useState(null)
+  const [search, setSearch] = useState('')
+  const [department, setDepartment] = useState('all')
+  const [status, setStatus] = useState('all')
+  const [menuAnchor, setMenuAnchor] = useState(null)
+  const [selectedEmployee, setSelectedEmployee] = useState(null)
+  const [modalOpen, setModalOpen] = useState(false)
+  const { isAdmin } = useAuthMe()
+  const apiBase = process.env.NEXT_PUBLIC_BASE_PATH || ''
+  const debounceTimer = useRef(null)
+
+  // Register と同様のフォーム構成
+  const [form, setForm] = useState({
+    employeeUserId: '',
+    lastName: '',
+    firstName: '',
+    password: '',
+    roleId: '', // number | ''
+    lineId: '', // number | ''
+    status: '在籍中',
+    specialNotes: '',
+    iconColor: '#FF8800'
+  })
+
+  // Password 表示切替
+  const [isPasswordShown, setIsPasswordShown] = useState(false)
+
+  /**
+   * パスワード表示状態を切り替える。入力確認の利便性向上が目的。
+   * @returns {void}
+   */
+  const handleClickShowPassword = () => setIsPasswordShown(s => !s)
+
+  // マスタ（役割／ライン）
+  const [roles, setRoles] = useState([])
+  const [lines, setLines] = useState([])
+  const [loadingRoles, setLoadingRoles] = useState(true)
+  const [loadingLines, setLoadingLines] = useState(true)
+  const [editingEmployeeId, setEditingEmployeeId] = useState(null) // numeric employee_id for PUT/DELETE
+
+  // サーバー側でフィルタ済みを取得するため、そのまま表示
+  const filtered = employees
+
+  // スナックバー（通知）
+  const [snackbar, setSnackbar] = useState({ open: false, message: '', severity: 'success' })
+  /**
+   * 操作結果をスナックバーで表示する。
+  * @param {string}                                    message              - 表示する本文。
+  * @param {import('@mui/material').AlertColor} [severity='success']        - スナックバーのステータス色。
+   * @returns {void}
+   */
+  const showSnack = (message, severity = 'success') => setSnackbar({ open: true, message, severity })
+
+  /**
+   * スナックバーを閉じる。
+   * @returns {void}
+   */
+  const closeSnack = () => setSnackbar(s => ({ ...s, open: false }))
+
+  // メニュー
+  /**
+   * メニュー表示用に対象従業員とアンカー要素を記録する。
+   * @param {import('react').MouseEvent<HTMLButtonElement>} e         - クリックイベント。
+   * @param {object}                                      employee         - 操作対象の従業員。
+   * @returns {void}
+   */
+  const handleMenuClick = (e, employee) => {
+    setMenuAnchor(e.currentTarget)
+    setSelectedEmployee(employee)
+  }
+
+  /**
+   * メニュー表示状態と選択中従業員を初期化する。
+   * @returns {void}
+   */
+  const handleMenuClose = () => {
+    setMenuAnchor(null)
+    setSelectedEmployee(null)
+  }
+
+  // モーダル
+  /**
+   * 追加用モーダルを初期値で開く。
+   * @returns {void}
+   */
+  const openAddModal = () => {
+    if (!isAdmin) return
+    setForm(prev => ({
+      employeeUserId: '',
+      lastName: '',
+      firstName: '',
+      password: '',
+      roleId: roles.length > 0 ? (roles.find(r => r?.role_name === '一般')?.role_id ?? roles[0]?.role_id ?? '') : '',
+      lineId: '',
+      status: '在籍中',
+      specialNotes: '',
+      iconColor: '#FF8800'
+    }))
+    setIsPasswordShown(false)
+    setEditingEmployeeId(null)
+    setModalOpen(true)
+  }
+
+  /**
+   * 編集用モーダルを既存従業員値で開く。
+   * @returns {void}
+   */
+  const openEditModal = () => {
+    if (!isAdmin) return
+
+    if (selectedEmployee) {
+      // 氏名を姓/名に分割（最初のスペースで分割）
+      const name = String(selectedEmployee.name || '').trim()
+      const [ln, ...rest] = name.split(/\s+/)
+      const fn = rest.join(' ')
+
+      // 役割ID/ラインID を名称から推測
+      const roleId = roles.find(r => r?.role_name === selectedEmployee.role)?.role_id ?? ''
+      const lineId = lines.find(l => l?.line_name === selectedEmployee.department)?.line_id ?? ''
+
+      setForm({
+        employeeUserId: selectedEmployee.id || '',
+        lastName: ln || '',
+        firstName: fn || '',
+        password: '', // 既存編集では未入力
+        roleId: roleId === 0 ? 0 : roleId || '',
+        lineId: lineId === 0 ? 0 : lineId || '',
+        status: selectedEmployee.status || '在籍中',
+        specialNotes: selectedEmployee.notes || '',
+        iconColor: selectedEmployee.iconColor || '#FF8800'
+      })
+      setIsPasswordShown(false)
+      setEditingEmployeeId(selectedEmployee.employeeId ?? null)
+      setModalOpen(true)
+      handleMenuClose()
+    }
+  }
+
+  /**
+   * モーダルを閉じる。
+   * @returns {void}
+   */
+  const closeModal = () => setModalOpen(false)
+
+  // フォーム
+  /**
+   * フォーム入力をステートへ反映する。
+   * @param {import('react').ChangeEvent<HTMLInputElement | HTMLTextAreaElement>} e - 入力イベント。
+   * @returns {void}
+   */
+  const handleFormChange = e => {
+    const { name, value } = e.target
+
+    if (name === 'roleId' || name === 'lineId') {
+      const v = value === '' ? '' : (typeof value === 'number' ? value : Number(value))
+
+      setForm(prev => ({ ...prev, [name]: v }))
+    } else {
+      setForm(prev => ({ ...prev, [name]: value }))
+    }
+  }
+
+  // 保存
+  /**
+   * フォームデータを API に送信し従業員を保存する。
+   * @returns {Promise<void>} - 保存完了後は一覧を再取得する。
+   */
+  const handleSave = async () => {
+    if (!isAdmin) return
+
+    // 最小バリデーション
+    const requiredOk = form.employeeUserId && form.lastName && form.firstName
+    const rolesOk = roles.length > 0 ? (form.roleId !== '' && form.roleId !== null && form.roleId !== undefined) : true
+
+    if (!requiredOk || !rolesOk) return // API 側で 400 を返す前に早期離脱し、フィードバック遅延を防ぐため。
+
+    const displayName = getDisplayName(form.lastName, form.firstName)
+
+    const payload = {
+      employee_name: displayName,
+      employee_user_id: form.employeeUserId,
+      password: form.password ? form.password : (editingEmployeeId ? null : ''),
+      role_id: form.roleId,
+
+      // line_id は未選択時は送らない
+      ...(form.lineId === '' ? {} : { line_id: form.lineId }),
+      color_code: stripHash(form.iconColor || '#FF8800'),
+      special_notes: form.specialNotes || '',
+
+      // 在籍状況
+      ...(typeof form.status === 'string' ? { is_active: form.status === '在籍中' } : {})
+    }
+
+    // ======== 処理ステップ: バリデーション確認 → API 呼び出し → 一覧更新 ========
+    // 1. バリデーション確認では API で弾かれる前に必須入力をチェックし、ユーザー体験の悪化を防ぐ。
+    // 2. API 呼び出しは PUT/POST を分岐し、既存編集時はパスワードを空送信しない理由を明示する。
+    // 3. 一覧更新で再フェッチしダイアログを閉じ、最新状態を即座に反映させる。
+
+    try {
+      const headers = { 'Content-Type': 'application/json', ...getAuthHeaders() }
+
+      if (editingEmployeeId) {
+        // 更新（PUT）
+        const res = await fetch(`${apiBase}/api/employees/${editingEmployeeId}`, {
+          method: 'PUT',
+          headers,
+          body: JSON.stringify(payload)
+        })
+
+        if (!res.ok) throw new Error(`PUT /employees/${editingEmployeeId} ${res.status}`)
+      } else {
+        // 追加（POST）: password 必須
+        if (!form.password) throw new Error('パスワードを入力してください') // 新規作成時は認証に必要となるため必須扱い。
+
+        const res = await fetch(`${apiBase}/api/employees`, {
+          method: 'POST',
+          headers,
+          body: JSON.stringify(payload)
+        })
+
+        if (!res.ok) throw new Error(`POST /employees ${res.status}`)
+      }
+
+
+      // 再取得
+      await fetchEmployees()
+      setModalOpen(false)
+      showSnack(editingEmployeeId ? '従業員情報を更新しました' : '従業員を追加しました', 'success')
+    } catch (e) {
+      console.error(e)
+      const msg = e?.message || String(e)
+
+      showSnack(`保存に失敗しました: ${msg}`, 'error')
+    }
+  }
+
+  // 削除
+  /**
+   * 選択中の従業員を削除する。
+   * @returns {Promise<void>} - 削除後に一覧を再取得し通知する。
+   */
+  const handleDelete = async () => {
+    if (!isAdmin) return
+    if (!selectedEmployee?.employeeId) return
+
+    // ======== 処理ステップ: API 呼び出し → 一覧再取得 → 通知とクリーンアップ ========
+    // 1. API 呼び出しで認証ヘッダーを添付し、204 No Content も成功として扱う。
+    // 2. 一覧再取得で UI を同期させ、削除済みカードが残る問題を防ぐ。
+    // 3. 通知とクリーンアップで結果を共有しメニューを閉じる。
+
+    try {
+      const headers = { ...getAuthHeaders() }
+      const res = await fetch(`${apiBase}/api/employees/${selectedEmployee.employeeId}`, { method: 'DELETE', headers })
+
+      if (!res.ok && res.status !== 204) throw new Error(`DELETE /employees/${selectedEmployee.employeeId} ${res.status}`)
+      await fetchEmployees()
+      showSnack('従業員を削除しました', 'success')
+    } catch (e) {
+      console.error(e)
+      const msg = e?.message || String(e)
+
+      showSnack(`削除に失敗しました: ${msg}`, 'error')
+    } finally {
+      handleMenuClose()
+    }
+  }
+
+  // UI パレットはフォームダイアログ内に移動
+
+  // マスタ取得（ロール／ライン）
+  useEffect(() => {
+    // ======== 処理ステップ: AbortController 準備 → ロール取得 → ライン取得 → クリーンアップ ========
+    // 1. AbortController 準備でアンマウント時に通信を中断し、不要な警告を避ける。
+    // 2. ロール取得でモーダルのセレクト初期値を整え、手入力の手間を省く。
+    // 3. ライン取得で部署セレクトとフィルタ候補を揃え、整合性を保つ。
+    // 4. クリーンアップで fetch を中断し、メモリリークを防ぐ。
+    const ac = new AbortController()
+
+    const headers = { ...getAuthHeaders() }
+
+      // Roles
+      ;(async () => {
+        try {
+          setLoadingRoles(true)
+          const res = await fetch(`${apiBase}/api/roles`, { signal: ac.signal, headers })
+
+          if (res.ok) {
+            const data = await res.json()
+            const list = Array.isArray(data) ? data : (Array.isArray(data?.roles) ? data.roles : [])
+
+            setRoles(list)
+
+            // 既存選択を優先し、なければ「一般」→先頭→空
+            setForm(prev => {
+              const keep = prev.roleId
+
+              if ((keep || keep === 0) && list.some(r => r?.role_id === keep)) return prev
+              const general = list.find(r => r?.role_name === '一般')?.role_id
+
+              return { ...prev, roleId: general ?? list[0]?.role_id ?? '' }
+            })
+          } else {
+            setRoles([])
+          }
+        } catch (e) {
+          setRoles([])
+        } finally {
+          setLoadingRoles(false)
+        }
+      })()
+
+      // Lines
+      ;(async () => {
+        try {
+          setLoadingLines(true)
+          const res = await fetch(`${apiBase}/api/lines`, { signal: ac.signal, headers })
+
+          if (res.ok) {
+            const data = await res.json()
+            const list = Array.isArray(data) ? data : (Array.isArray(data?.lines) ? data.lines : [])
+
+            setLines(list)
+
+            // 既存選択がリストにない場合は空
+            setForm(prev => {
+              const keep = prev.lineId
+
+              if ((keep || keep === 0) && list.some(l => l?.line_id === keep)) return prev
+
+              return { ...prev, lineId: '' }
+            })
+          } else {
+            setLines([])
+          }
+        } catch (e) {
+          setLines([])
+        } finally {
+          setLoadingLines(false)
+        }
+      })()
+
+    return () => ac.abort()
+  }, [apiBase])
+
+  /**
+   * 部署（ライン）フィルタの選択肢を生成する。
+   * @returns {Array<{ value: string, label: string }>} - セレクトボックス用のオプション。
+   */
+  const departmentOptions = useMemo(() => {
+    const opts = [{ value: 'all', label: 'すべて' }]
+
+    lines.forEach(l => {
+      if (l?.line_name) opts.push({ value: l.line_name, label: l.line_name })
+    })
+
+    return opts
+  }, [lines])
+
+  /**
+   * API レスポンスを UI 表示用オブジェクトへ整形する。
+   * @param {object} apiItem - API から取得した従業員データ。
+   * @returns {object}       - カード描画用の整形済みデータ。
+   */
+  const mapEmployee = apiItem => ({
+    employeeId: apiItem?.employee_id,
+    id: apiItem?.employee_user_id, // 表示用ID
+    employeeUserId: apiItem?.employee_user_id,
+    name: apiItem?.employee_name,
+    department: apiItem?.line_name || '',
+    role: apiItem?.role_name || '',
+    status: apiItem?.is_active ? '在籍中' : '退職済',
+    notes: apiItem?.special_notes || '',
+    iconColor: ensureHash(apiItem?.color_code)
+  })
+
+  /**
+   * 検索条件に合わせて従業員一覧を取得する。
+   * @returns {Promise<void>} - 取得結果をステートへ反映する。
+   */
+  const fetchEmployees = async () => {
+    const headers = { ...getAuthHeaders() }
+    const sp = new URLSearchParams()
+
+    if (search?.trim()) sp.set('name_like', search.trim())
+    if (department !== 'all') sp.set('line_name', department)
+    if (status !== 'all') sp.set('is_active', String(status === '在籍中'))
+    const url = `${apiBase}/api/employees${sp.toString() ? `?${sp.toString()}` : ''}`
+
+    try {
+      setEmployeesLoading(true)
+      setEmployeesError(null)
+      const res = await fetch(url, { headers })
+
+      if (!res.ok) throw new Error(`GET /employees ${res.status}`)
+      const data = await res.json()
+
+      const list = Array.isArray(data)
+        ? data
+        : (Array.isArray(data?.employees) ? data.employees : [])
+
+      setEmployees(list.map(mapEmployee))
+    } catch (e) {
+      console.error(e)
+      setEmployeesError(e)
+      setEmployees([])
+      showSnack('従業員の取得に失敗しました。時間をおいて再度お試しください。', 'error')
+    } finally {
+      setEmployeesLoading(false)
+    }
+  }
+
+  // フィルタ変更時に再取得（検索はデバウンス）
+  useEffect(() => {
+    // ======== 処理ステップ: タイマー初期化 → API 呼び出し予約 → タイマー掃除 ========
+    // 1. タイマー初期化で連続入力による過剰呼び出しを防ぐ。
+    // 2. API 呼び出し予約で 350ms 後に fetch を実行し、検索体験を滑らかにする。
+    // 3. タイマー掃除で依存変更・アンマウント時の不要実行を抑える。
+    if (debounceTimer.current) clearTimeout(debounceTimer.current)
+    debounceTimer.current = setTimeout(() => {
+      fetchEmployees()
+    }, 350)
+
+    return () => {
+      if (debounceTimer.current) clearTimeout(debounceTimer.current)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [search, department, status])
+
+  return (
+    <>
+      <Typography variant='h4' sx={{ mb: 4, fontWeight: 700 }}>従業員名簿</Typography>
+
+      <FiltersBar
+        search={search}
+        setSearch={setSearch}
+        department={department}
+        setDepartment={setDepartment}
+        status={status}
+        setStatus={setStatus}
+        departmentOptions={departmentOptions}
+        statusOptions={statusOptions}
+      />
+
+      {/* 従業員リスト（カードグリッド） */}
+      <Grid container spacing={3}>
+        {filtered.length === 0 ? (
+          <Grid item xs={12}>
+            <Card sx={{ p: 4, textAlign: 'center', borderRadius: 3 }}>
+              <Typography variant='h6' color='text.secondary' sx={{ mb: 1 }}>
+                {employeesLoading ? '読み込み中…' : '該当する従業員が見つかりませんでした。'}
+              </Typography>
+              <Typography variant='body2' color='text.disabled'>
+                {employeesError ? 'データの取得に失敗しました。時間をおいて再度お試しください。' : '検索条件を変更して、もう一度お試しください。'}
+              </Typography>
+            </Card>
+          </Grid>
+        ) : (
+          filtered.map(emp => (
+            <Grid item xs={12} sm={6} md={4} lg={3} key={emp.id}>
+              <EmployeeCard employee={emp} onMenuClick={handleMenuClick} canEdit={isAdmin} />
+            </Grid>
+          ))
+        )}
+      </Grid>
+
+      {/* フローティング追加ボタン */}
+      {isAdmin ? (
+        <Fab color='primary' aria-label='add' sx={{ position: 'fixed', bottom: 32, right: 32, zIndex: 1000 }} onClick={openAddModal}>
+          <AddIcon fontSize='large' />
+        </Fab>
+      ) : null}
+
+      {/* ドロップダウンメニュー */}
+      <Menu anchorEl={menuAnchor} open={Boolean(menuAnchor)} onClose={handleMenuClose}>
+        <MenuItem onClick={openEditModal} disabled={!isAdmin}>編集</MenuItem>
+        <MenuItem onClick={handleDelete} disabled={!isAdmin} sx={{ color: !isAdmin ? undefined : 'error.main' }}>削除</MenuItem>
+      </Menu>
+
+      <EmployeeFormDialog
+        open={modalOpen}
+        onClose={closeModal}
+        form={form}
+        setForm={setForm}
+        roles={roles}
+        lines={lines}
+        loadingRoles={loadingRoles}
+        loadingLines={loadingLines}
+        isPasswordShown={isPasswordShown}
+        togglePasswordShown={handleClickShowPassword}
+        onSave={handleSave}
+        employees={employees}
+      />
+
+      {/* 通知スナックバー */}
+      <Snackbar
+        open={snackbar.open}
+        autoHideDuration={3000}
+        onClose={closeSnack}
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
+      >
+        <Alert onClose={closeSnack} severity={snackbar.severity} sx={{ width: '100%' }}>
+          {snackbar.message}
+        </Alert>
+      </Snackbar>
+    </>
+  )
+}
+
+export default EmployeeList
diff --git a/javascript-version/src/app/(dashboard)/employee-list/utils/api.js b/javascript-version/src/app/(dashboard)/employee-list/utils/api.js
new file mode 100644
index 000000000..f329cb7df
--- /dev/null
+++ b/javascript-version/src/app/(dashboard)/employee-list/utils/api.js
@@ -0,0 +1,39 @@
+/*
+======== ファイル概要 ========
+従業員名簿機能で使う API ユーティリティ集。トークン取得やカラーコード整形をまとめる。
+*/
+
+/**
+ * ローカル保存済みのアクセストークンを取得する。
+ * @returns {string} - 現在ログイン中のトークン。未ログイン時は空文字。
+ */
+export const getToken = () =>
+  (typeof window !== 'undefined' && (window.localStorage.getItem('access_token') || window.sessionStorage.getItem('access_token'))) || ''
+
+/**
+ * API 呼び出し用の認証ヘッダーを生成する。
+ * @returns {Record<string, string>} - Authorization ヘッダー。トークン未取得時は空オブジェクト。
+ */
+export const getAuthHeaders = () => {
+  const token = getToken()
+
+  return token ? { Authorization: `Bearer ${token}` } : {} // トークンが未取得なら未認証 API と同等に扱う。
+}
+
+/**
+ * カラーコードにハッシュを付与して正規化する。
+ * @param {string} hex - 6 桁または # 付きカラーコード。
+ * @returns {string}   - ハッシュ付きのカラーコード。
+ */
+export const ensureHash = hex => {
+  if (!hex) return '#999999'
+
+  return String(hex).startsWith('#') ? String(hex) : `#${hex}`
+}
+
+/**
+ * 先頭のハッシュを取り除いたカラーコードを返す。
+ * @param {string} hex - ハッシュ付きまたはなしのカラーコード。
+ * @returns {string}   - ハッシュなしのカラーコード。
+ */
+export const stripHash = hex => (hex || '').replace(/^#/, '')
diff --git a/javascript-version/src/app/(dashboard)/ez-menu/page.jsx b/javascript-version/src/app/(dashboard)/ez-menu/page.jsx
new file mode 100644
index 000000000..5038b4dfa
--- /dev/null
+++ b/javascript-version/src/app/(dashboard)/ez-menu/page.jsx
@@ -0,0 +1,261 @@
+"use client";
+
+/*
+======== ファイル概要 ========
+工場ダッシュボード向けの簡易メニュー画面。お知らせのローカル保存と主要機能へのショートカットカードをまとめて提供する。
+*/
+
+// React Imports
+import { useEffect, useState } from "react";
+
+// Next Imports
+import Link from "@/components/Link";
+
+// MUI Imports
+import Grid from "@mui/material/Grid";
+import Card from "@mui/material/Card";
+import CardHeader from "@mui/material/CardHeader";
+import CardActionArea from "@mui/material/CardActionArea";
+import CardContent from "@mui/material/CardContent";
+import Typography from "@mui/material/Typography";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import Dialog from "@mui/material/Dialog";
+import DialogTitle from "@mui/material/DialogTitle";
+import DialogContent from "@mui/material/DialogContent";
+import DialogActions from "@mui/material/DialogActions";
+import TextField from "@mui/material/TextField";
+
+// Icons
+import CreateOutlinedIcon from "@mui/icons-material/CreateOutlined";
+import ListAltOutlinedIcon from "@mui/icons-material/ListAltOutlined";
+import Inventory2OutlinedIcon from "@mui/icons-material/Inventory2Outlined";
+import TrendingUpIcon from "@mui/icons-material/TrendingUp";
+import HardwareIcon from "@mui/icons-material/Hardware";
+import CameraAltOutlinedIcon from "@mui/icons-material/CameraAltOutlined";
+
+/**
+ * EZ メニューのトップページコンポーネント。
+ * @returns {JSX.Element} - お知らせカードと主要機能へのリンクカード群をまとめたグリッド。
+ */
+const EzMenuPage = () => {
+	// 今日のお知らせ（ローカル保存共有）
+	const STORAGE_KEY = "dashboard_notice_v1";
+	const [notice, setNotice] = useState(
+		"本日の安全第一。午後は来客予定があります。\n17:00 までに作業場の整理整頓をお願いします。"
+	);
+	const [isEditOpen, setIsEditOpen] = useState(false);
+	const [draft, setDraft] = useState("");
+
+	useEffect(() => {
+		// ======== 処理ステップ: 初回読込 → localStorage 取得 → ステート反映 ========
+		// 1. 初回読込ではブラウザ環境かを確認し SSR 実行時の参照エラーを防ぐ。
+		// 2. localStorage 取得で前回編集内容を読み出し、複数ユーザーの共有 PC でも内容を継続させる。
+		// 3. ステート反映で空文字を避け、表示テキストが消えないようにガードする。
+		try {
+			const saved = typeof window !== "undefined" ? window.localStorage.getItem(STORAGE_KEY) : null;
+			if (saved && saved.trim().length > 0) setNotice(saved);
+		} catch (e) {
+			// ignore
+		}
+	}, []);
+
+	/**
+	 * 編集モーダルを開くためのハンドラ。
+	 * @returns {void}
+	 */
+	const openEdit = () => {
+		setDraft(notice);
+		setIsEditOpen(true);
+	};
+
+	/**
+	 * 編集モーダルを閉じる。
+	 * @returns {void}
+	 */
+	const closeEdit = () => setIsEditOpen(false);
+
+	/**
+	 * 編集したお知らせを保存する。
+	 * @returns {void}
+	 */
+	const saveEdit = () => {
+		const v = draft?.trim() ?? "";
+		setNotice(v);
+		try {
+			if (typeof window !== "undefined") window.localStorage.setItem(STORAGE_KEY, v); // ローカル保持でページ更新しても内容が残る。
+		} catch (e) {}
+		setIsEditOpen(false);
+	};
+
+	return (
+		<Grid container spacing={6} sx={{ mt: 0 }}>
+			{/* お知らせ（大きめ表示） */}
+			<Grid item xs={12}>
+				<Card>
+					<CardHeader
+						title="今日のお知らせ"
+						action={
+							<Button variant="outlined" size="small" startIcon={<CreateOutlinedIcon />} onClick={openEdit}>
+								編集
+							</Button>
+						}
+					/>
+					<CardContent>
+						<Typography variant="h6" sx={{ whiteSpace: 'pre-wrap', lineHeight: 1.7 }}>
+							{notice && notice.length > 0 ? notice : "（お知らせは未設定です）"}
+						</Typography>
+						<Typography variant="caption" color="text.secondary" sx={{ display: 'block', mt: 2 }}>
+							ブラウザに保存されます。全員共通にする場合はAPI保存に切替えてください。
+						</Typography>
+					</CardContent>
+				</Card>
+			</Grid>
+
+			{/* 大きなクイックボタン（スマホ操作を想定） */}
+			<Grid item xs={12}>
+				<Grid container spacing={4}>
+							{/* 製造出荷指示 */}
+										<Grid item xs={12} sm={6} md={4}>
+						<Card sx={{ height: '100%' }}>
+							<CardActionArea component={Link} href="/shipping-instructions" sx={{ height: '100%' }}>
+										<CardContent sx={{ py: 5, minHeight: 200, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 2 }}>
+									<Box sx={{ bgcolor: 'warning.main', color: 'common.white', width: 88, height: 88, borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+										<ListAltOutlinedIcon sx={{ fontSize: 44 }} />
+									</Box>
+									<Typography variant="h5" fontWeight={700} textAlign="center">
+										製造出荷指示
+									</Typography>
+								</CardContent>
+							</CardActionArea>
+						</Card>
+					</Grid>
+
+					{/* 日報システム */}
+										<Grid item xs={12} sm={6} md={4}>
+						<Card sx={{ height: '100%' }}>
+							<CardActionArea component={Link} href="/daily-reports" sx={{ height: '100%' }}>
+														<CardContent sx={{ py: 5, minHeight: 200, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 2 }}>
+									<Box sx={{ bgcolor: 'info.main', color: 'common.white', width: 88, height: 88, borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+										<CreateOutlinedIcon sx={{ fontSize: 44 }} />
+									</Box>
+									<Typography variant="h5" fontWeight={700} textAlign="center">
+										日報システム
+									</Typography>
+								</CardContent>
+							</CardActionArea>
+						</Card>
+					</Grid>
+
+					{/* 部品在庫管理 */}
+										<Grid item xs={12} sm={6} md={4}>
+						<Card sx={{ height: '100%' }}>
+							<CardActionArea component={Link} href="/parts-inventory" sx={{ height: '100%' }}>
+														<CardContent sx={{ py: 5, minHeight: 200, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 2 }}>
+									<Box sx={{ bgcolor: 'success.main', color: 'common.white', width: 88, height: 88, borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+										<Inventory2OutlinedIcon sx={{ fontSize: 44 }} />
+									</Box>
+									<Typography variant="h5" fontWeight={700} textAlign="center">
+										部品在庫管理
+									</Typography>
+								</CardContent>
+							</CardActionArea>
+						</Card>
+					</Grid>
+				</Grid>
+
+												{/* KPI/タスクへのリンクボタン */}
+												<Grid item xs={12} sx={{ mt: 4 }}>
+							<Grid container spacing={4}>
+								{/* 生産進捗 */}
+								<Grid item xs={12} sm={6} md={3}>
+									<Card sx={{ height: '100%' }}>
+										<CardActionArea component={Link} href="/production-management" sx={{ height: '100%' }}>
+																	<CardContent sx={{ py: 5, minHeight: 200, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 2 }}>
+												<Box sx={{ bgcolor: 'primary.main', color: 'common.white', width: 88, height: 88, borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+													<TrendingUpIcon sx={{ fontSize: 44 }} />
+												</Box>
+												<Typography variant="h6" fontWeight={700} textAlign="center">
+													生産進捗
+												</Typography>
+											</CardContent>
+										</CardActionArea>
+									</Card>
+								</Grid>
+
+								{/* 直近エラーログ */}
+								<Grid item xs={12} sm={6} md={3}>
+									<Card sx={{ height: '100%' }}>
+										<CardActionArea component={Link} href="/machine-status" sx={{ height: '100%' }}>
+																	<CardContent sx={{ py: 5, minHeight: 200, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 2 }}>
+												<Box sx={{ bgcolor: 'error.main', color: 'common.white', width: 88, height: 88, borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+													<HardwareIcon sx={{ fontSize: 44 }} />
+												</Box>
+												<Typography variant="h6" fontWeight={700} textAlign="center">
+													直近エラーログ
+												</Typography>
+											</CardContent>
+										</CardActionArea>
+									</Card>
+								</Grid>
+
+								{/* 画像検査ステータス */}
+								<Grid item xs={12} sm={6} md={3}>
+									<Card sx={{ height: '100%' }}>
+										<CardActionArea component={Link} href="/image-inspection" sx={{ height: '100%' }}>
+																	<CardContent sx={{ py: 5, minHeight: 200, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 2 }}>
+												<Box sx={{ bgcolor: 'info.main', color: 'common.white', width: 88, height: 88, borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+													<CameraAltOutlinedIcon sx={{ fontSize: 44 }} />
+												</Box>
+												<Typography variant="h6" fontWeight={700} textAlign="center">
+													画像検査ステータス
+												</Typography>
+											</CardContent>
+										</CardActionArea>
+									</Card>
+								</Grid>
+
+								{/* 本日のタスク */}
+								<Grid item xs={12} sm={6} md={3}>
+									<Card sx={{ height: '100%' }}>
+										<CardActionArea component={Link} href="/shipping-instructions" sx={{ height: '100%' }}>
+																	<CardContent sx={{ py: 5, minHeight: 200, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 2 }}>
+												<Box sx={{ bgcolor: 'warning.main', color: 'common.white', width: 88, height: 88, borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+													<ListAltOutlinedIcon sx={{ fontSize: 44 }} />
+												</Box>
+												<Typography variant="h6" fontWeight={700} textAlign="center">
+													本日のタスク
+												</Typography>
+											</CardContent>
+										</CardActionArea>
+									</Card>
+								</Grid>
+							</Grid>
+						</Grid>
+			</Grid>
+
+			{/* 編集モーダル */}
+			<Dialog open={isEditOpen} onClose={closeEdit} fullWidth maxWidth="sm">
+				<DialogTitle>お知らせの編集</DialogTitle>
+				<DialogContent>
+					<TextField
+						autoFocus
+						fullWidth
+						multiline
+						minRows={6}
+						value={draft}
+						onChange={(e) => setDraft(e.target.value)}
+						placeholder="例）午後は来客あり。14時からラインBの点検を実施します。"
+					/>
+				</DialogContent>
+				<DialogActions>
+					<Button onClick={closeEdit} color="inherit">キャンセル</Button>
+					<Button onClick={saveEdit} variant="contained">保存</Button>
+				</DialogActions>
+			</Dialog>
+		</Grid>
+	);
+};
+
+export default EzMenuPage;
+
diff --git a/javascript-version/src/app/(dashboard)/factory-settings/page.jsx b/javascript-version/src/app/(dashboard)/factory-settings/page.jsx
new file mode 100644
index 000000000..b3b3c2b45
--- /dev/null
+++ b/javascript-version/src/app/(dashboard)/factory-settings/page.jsx
@@ -0,0 +1,692 @@
+"use client"
+
+/*
+======== ファイル概要 ========
+工場設定ページ。権限ロールと生産ラインを管理し、API 経由で CRUD 操作とローカル UI を同期させる。
+*/
+
+import { useEffect, useMemo, useState, useCallback } from 'react'
+
+
+// MUI Components
+import Box from '@mui/material/Box'
+import Grid from '@mui/material/Grid'
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+import Typography from '@mui/material/Typography'
+import TextField from '@mui/material/TextField'
+import Button from '@mui/material/Button'
+import IconButton from '@mui/material/IconButton'
+import Stack from '@mui/material/Stack'
+import Avatar from '@mui/material/Avatar'
+import Divider from '@mui/material/Divider'
+import Snackbar from '@mui/material/Snackbar'
+import Alert from '@mui/material/Alert'
+
+// MUI Icons
+import AdminPanelSettingsOutlinedIcon from '@mui/icons-material/AdminPanelSettingsOutlined'
+import PersonOutlineOutlinedIcon from '@mui/icons-material/PersonOutlineOutlined'
+import ShieldOutlinedIcon from '@mui/icons-material/ShieldOutlined'
+import EditOutlinedIcon from '@mui/icons-material/EditOutlined'
+import DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined'
+import CheckOutlinedIcon from '@mui/icons-material/CheckOutlined'
+import CloseOutlinedIcon from '@mui/icons-material/CloseOutlined'
+import PrecisionManufacturingOutlinedIcon from '@mui/icons-material/PrecisionManufacturingOutlined'
+
+import useAuthMe from '@core/hooks/useAuthMe'
+
+// 型の簡易表現
+const ADMIN = '管理者'
+const MEMBER = '一般従業員'
+
+// API ヘルパー
+/**
+ * ブラウザストレージからアクセストークンを取得する。
+ * @returns {string | null} - 発見したトークン。未ログイン時は null。
+ */
+function getToken() {
+	if (typeof window === 'undefined') return null
+
+	try {
+		return (
+			window.localStorage.getItem('access_token') ||
+			window.sessionStorage.getItem('access_token') ||
+			null
+		)
+	} catch {
+		return null
+	}
+}
+
+/**
+ * 認証ヘッダー付きでバックエンド API を叩く共通関数。
+ * @param {string} path                              - /api から始まるリクエストパス。
+ * @param {object} [options={}]                      - fetch オプション。
+ * @param {string} [options.method='GET']            - HTTP メソッド。
+ * @param {object} [options.body]                    - JSON 化するリクエストボディ。
+ * @param {object} [options.headers]                 - 追加ヘッダー。認証ヘッダーより後にマージされる。
+ * @returns {Promise<any>}                           - JSON レスポンス。204 の場合は null。
+ * @throws {Error & { status?: number, payload?: any }} - ステータスやレスポンスを含む例外。
+ */
+async function api(path, { method = 'GET', body, headers } = {}) {
+	const token = getToken()
+	const base = process.env.NEXT_PUBLIC_BASE_PATH || ''
+
+	const res = await fetch(`${base}${path}`, {
+		method,
+		headers: {
+			...(body ? { 'Content-Type': 'application/json' } : {}),
+			...(token ? { Authorization: `Bearer ${token}` } : {}),
+			...headers,
+		},
+		body: body ? JSON.stringify(body) : undefined,
+	})
+
+	if (!res.ok) {
+		let payload = null
+
+		try {
+			payload = await res.json()
+		} catch {
+			try {
+				payload = await res.text()
+			} catch {
+				payload = null
+			}
+		}
+
+		const err = new Error('Request failed')
+
+		err.status = res.status
+		err.payload = payload
+		throw err
+	}
+
+	if (res.status === 204) return null
+
+	return res.json()
+}
+
+/**
+ * 権限ロール 1 件分の表示と編集インタラクションを司るアイテム。
+ * @param {object}   props           - コンポーネント引数。
+ * @param {object}   props.role      - 表示対象のロール情報。
+ * @param {Function} props.onUpdate  - ロール更新時に親へ通知するコールバック。
+ * @param {Function} props.onDelete  - ロール削除要求を親へ伝えるコールバック。
+ * @param {boolean}  props.canEdit   - 編集操作の可否。
+ * @returns {JSX.Element}            - ロール設定用のカード要素。
+ */
+function RoleItem({ role, onUpdate, onDelete, canEdit }) {
+	const [editing, setEditing] = useState(false)
+	const [nameDraft, setNameDraft] = useState(role.name)
+
+	const isAdminType = role.type === ADMIN
+
+	// 管理者種別ボタンでタイプを切り替える。実際の更新は親に委譲する。
+	const handleToggleType = () => {
+		if (!canEdit) return
+		const nextType = isAdminType ? MEMBER : ADMIN
+
+		onUpdate({ ...role, type: nextType })
+	}
+
+	// 編集開始時は元の名前を一度ドラフトに取り込み直す。
+	const startEdit = () => {
+		if (!canEdit) return
+		setNameDraft(role.name)
+		setEditing(true)
+	}
+
+	// 取り消し時は UI を元に戻し、誤編集を防ぐ。
+	const cancelEdit = () => {
+		setEditing(false)
+		setNameDraft(role.name)
+	}
+
+	// ======== 処理ステップ: 入力トリム → 変更有無判定 → 更新通知 ========
+	// 1. 入力トリムで余分な空白を除去し、同一名重複による API エラーを抑える。
+	// 2. 変更有無判定で noop 更新を省き、不要なリクエストを避ける。
+	// 3. 更新通知で親に委譲し、API 呼び出しとステート同期を一箇所にまとめる。
+	const saveEdit = () => {
+		const trimmed = nameDraft.trim()
+
+		if (!trimmed) return cancelEdit()
+		if (trimmed === role.name) return cancelEdit()
+		onUpdate({ ...role, name: trimmed })
+		setEditing(false)
+	}
+
+	return (
+		<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', bgcolor: 'action.hover', borderRadius: 1, p: 1.5 }}>
+			<Stack direction="row" spacing={1.5} alignItems="center">
+				<Avatar variant="rounded" sx={{ bgcolor: 'background.paper', color: 'text.secondary', boxShadow: 0 }}>
+					<ShieldOutlinedIcon fontSize="small" />
+				</Avatar>
+				{!editing ? (
+					<Typography className="text-gray-800" fontWeight={600}>{role.name}</Typography>
+				) : (
+					<TextField
+						size="small"
+						value={nameDraft}
+						onChange={e => setNameDraft(e.target.value)}
+						onKeyDown={e => {
+							if (e.key === 'Enter') saveEdit()
+							if (e.key === 'Escape') cancelEdit()
+						}}
+						onBlur={cancelEdit}
+						placeholder="ロール名"
+					/>
+				)}
+			</Stack>
+
+			<Stack direction="row" spacing={1.5} alignItems="center">
+				{!editing && (
+					<Button
+						onClick={handleToggleType}
+						size="small"
+						variant="outlined"
+						color={isAdminType ? 'primary' : 'inherit'}
+						startIcon={isAdminType ? <AdminPanelSettingsOutlinedIcon /> : <PersonOutlineOutlinedIcon />}
+						sx={{ minWidth: 120 }}
+						disabled={!canEdit}
+					>
+						{isAdminType ? ADMIN : MEMBER}
+					</Button>
+				)}
+
+				{!editing ? (
+					<Stack direction="row" spacing={0.5}>
+						{canEdit && (
+							<IconButton size="small" color="default" onClick={startEdit}>
+								<EditOutlinedIcon fontSize="small" />
+							</IconButton>
+						)}
+						{canEdit && (
+							<IconButton size="small" color="error" onClick={onDelete}>
+								<DeleteOutlineOutlinedIcon fontSize="small" />
+							</IconButton>
+						)}
+					</Stack>
+				) : (
+					<Stack direction="row" spacing={0.5}>
+						<IconButton size="small" color="success" onClick={saveEdit}>
+							<CheckOutlinedIcon fontSize="small" />
+						</IconButton>
+						<IconButton size="small" color="error" onClick={cancelEdit}>
+							<CloseOutlinedIcon fontSize="small" />
+						</IconButton>
+					</Stack>
+				)}
+			</Stack>
+		</Box>
+	)
+}
+
+/**
+ * ライン情報 1 件分の表示と改名/削除を制御するアイテム。
+ * @param {object}   props          - コンポーネント引数。
+ * @param {object}   props.line     - 表示対象ライン。
+ * @param {Function} props.onRename - 名前変更時に親へ渡すハンドラ。
+ * @param {Function} props.onDelete - 削除要求を親へ伝えるハンドラ。
+ * @param {boolean}  props.canEdit  - 編集可否。
+ * @returns {JSX.Element}           - ライン設定 UI。
+ */
+function LineItem({ line, onRename, onDelete, canEdit }) {
+	const [editing, setEditing] = useState(false)
+	const [draft, setDraft] = useState(line.name)
+
+	// 編集開始時は現在値を改めてコピーし、別ライン名の上書きを防ぐ。
+	const startEdit = () => {
+		if (!canEdit) return
+		setDraft(line.name)
+		setEditing(true)
+	}
+
+	// キャンセルではドラフトを元へ戻し、フォーム残留を避ける。
+	const cancelEdit = () => {
+		setEditing(false)
+		setDraft(line.name)
+	}
+
+	// ======== 処理ステップ: 入力トリム → 変更判定 → 親コールバック ========
+	// 1. 入力トリムで余白を除去し、重複判定の正確さを担保する。
+	// 2. 変更判定で同一名なら即キャンセルし、不必要な API 呼び出しを抑制する。
+	// 3. 親コールバックへ渡して API 側で最終確定する。
+	const saveEdit = () => {
+		const trimmed = draft.trim()
+
+		if (!trimmed) return cancelEdit()
+		if (trimmed === line.name) return cancelEdit()
+		onRename(trimmed)
+		setEditing(false)
+	}
+
+	return (
+		<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', bgcolor: 'action.hover', borderRadius: 1, p: 1.5 }}>
+			<Stack direction="row" spacing={1.5} alignItems="center">
+				<Avatar variant="rounded" sx={{ bgcolor: 'background.paper', color: 'text.secondary', boxShadow: 0 }}>
+					<PrecisionManufacturingOutlinedIcon fontSize="small" />
+				</Avatar>
+				{!editing ? (
+					<Typography className="text-gray-700">{line.name}</Typography>
+				) : (
+					<TextField
+						size="small"
+						value={draft}
+						onChange={e => setDraft(e.target.value)}
+						onKeyDown={e => {
+							if (e.key === 'Enter') saveEdit()
+							if (e.key === 'Escape') cancelEdit()
+						}}
+						onBlur={cancelEdit}
+						placeholder="ライン名"
+					/>
+				)}
+			</Stack>
+
+			{!editing ? (
+				<Stack direction="row" spacing={0.5}>
+					{canEdit && (
+						<IconButton size="small" color="default" onClick={startEdit}>
+							<EditOutlinedIcon fontSize="small" />
+						</IconButton>
+					)}
+					{canEdit && (
+						<IconButton size="small" color="error" onClick={onDelete}>
+							<DeleteOutlineOutlinedIcon fontSize="small" />
+						</IconButton>
+					)}
+				</Stack>
+			) : (
+				<Stack direction="row" spacing={0.5}>
+					<IconButton size="small" color="success" onClick={saveEdit}>
+						<CheckOutlinedIcon fontSize="small" />
+					</IconButton>
+					<IconButton size="small" color="error" onClick={cancelEdit}>
+						<CloseOutlinedIcon fontSize="small" />
+					</IconButton>
+				</Stack>
+			)}
+		</Box>
+	)
+}
+
+/**
+ * 工場設定ページのメインコンポーネント。
+ * @returns {JSX.Element} - 権限種別と工場ラインの管理 UI。
+ */
+export default function FactorySettingsPage() {
+	// --- ステート ---
+	const { isAdmin } = useAuthMe()
+	const [roles, setRoles] = useState([])
+	const [newRoleName, setNewRoleName] = useState('')
+	const [newRoleType, setNewRoleType] = useState(MEMBER)
+	const [rolesLoading, setRolesLoading] = useState(false)
+
+	const [lines, setLines] = useState([]) // { id, name }
+	const [newLineName, setNewLineName] = useState('')
+	const [linesLoading, setLinesLoading] = useState(false)
+
+	const [snack, setSnack] = useState({ open: false, severity: 'info', message: '' })
+
+	/**
+	 * トースト通知を開くヘルパー。
+	 * @param {string} message                                             - 表示する本文。
+	 * @param {import('@mui/material').AlertColor} [severity='info']        - 表示色。
+	 * @returns {void}
+	 */
+	const openSnack = useCallback((message, severity = 'info') => setSnack({ open: true, message, severity }), [])
+
+	/**
+	 * トースト通知を閉じるヘルパー。
+	 * @returns {void}
+	 */
+	const closeSnack = useCallback(() => setSnack(s => ({ ...s, open: false })), [])
+
+	const roleNames = useMemo(() => new Set(roles.map(r => r.name)), [roles])
+	const lineNames = useMemo(() => new Set(lines.map(l => l.name)), [lines])
+
+	// --- 初期ロード ---
+	useEffect(() => {
+		// ======== 処理ステップ: 役割取得 → ライン取得 → クリーンアップ ========
+		// 1. 役割取得では管理者区別を明確にして UI の制御を整える。
+		// 2. ライン取得でフィルタ候補と表示一覧を揃え、フォーム初期値の整合性を保つ。
+		// 3. どちらも個別の非同期関数にして、失敗時に片方だけでも結果を出せるようにする。
+		;
+
+		(async () => {
+			setRolesLoading(true)
+
+			try {
+				const data = await api('/api/roles')
+
+				setRoles(
+					(Array.isArray(data) ? data : []).map(r => ({ id: r.role_id, name: r.role_name, type: r.is_admin ? ADMIN : MEMBER }))
+				)
+			} catch (e) {
+				openSnack(`権限一覧の取得に失敗しました (${e.status || ''})`, 'error')
+			} finally {
+				setRolesLoading(false)
+			}
+		})()
+
+		;(async () => {
+			setLinesLoading(true)
+
+			try {
+				const data = await api('/api/lines')
+
+				setLines((Array.isArray(data) ? data : []).map(l => ({ id: l.line_id, name: l.line_name })))
+			} catch (e) {
+				openSnack(`ライン一覧の取得に失敗しました (${e.status || ''})`, 'error')
+			} finally {
+				setLinesLoading(false)
+			}
+		})()
+	}, [openSnack])
+
+	// --- 役割 CRUD ---
+	const addRole = async () => {
+		// 管理者以外には書き込みを許さないため即ガードする。
+		if (!isAdmin) {
+			openSnack('権限がありません（管理者のみ操作可能）', 'warning')
+			return
+		}
+
+		const name = newRoleName.trim()
+
+		// 空文字は API でも拒否されるため早期終了で UX を保つ。
+		if (!name) return
+
+		// 名前重複はサーバーで 409 になるため、事前に弾いてメッセージを明示する。
+		if (roleNames.has(name)) {
+			openSnack('同じロール名が既に存在します', 'warning')
+			return
+		}
+
+		// ======== 処理ステップ: API 送信 → ステート更新 → フォーム初期化 ========
+		// 1. API 送信で確定させ、作成 ID を受け取る。
+		// 2. ステート更新でローカル一覧へ即反映し、ページリロードを不要にする。
+		// 3. フォーム初期化で連続入力しやすくする。
+		try {
+			const created = await api('/api/roles', {
+				method: 'POST',
+				body: { role_name: name, is_admin: newRoleType === ADMIN },
+			})
+
+			setRoles(prev => [...prev, { id: created.role_id, name: created.role_name, type: created.is_admin ? ADMIN : MEMBER }])
+			setNewRoleName('')
+			setNewRoleType(MEMBER)
+			openSnack('ロールを追加しました', 'success')
+		} catch (e) {
+			if (e.status === 409) openSnack('ロール名が重複しています', 'warning')
+			else openSnack('ロールの追加に失敗しました', 'error')
+		}
+	}
+
+	const updateRole = async updated => {
+		// 管理者のみ更新できるため、UI からも保護する。
+		if (!isAdmin) {
+			openSnack('権限がありません（管理者のみ操作可能）', 'warning')
+			return
+		}
+
+		const original = roles.find(r => r.id === updated.id)
+
+		if (!original) return
+		const body = {}
+
+		// フィールド差分だけ送信し、不要な更新を避ける。
+		if (updated.name !== original.name) body.role_name = updated.name
+		if (updated.type !== original.type) body.is_admin = updated.type === ADMIN
+		if (Object.keys(body).length === 0) return
+
+		// ======== 処理ステップ: API 更新 → ステート差し替え → 通知 ========
+		// 1. API 更新で確定させ、最新値を受け取る。
+		// 2. ステート差し替えで対象のみ更新し、再描画コストを抑える。
+		// 3. 通知で完了を知らせ、ユーザーの安心感を高める。
+		try {
+			const res = await api(`/api/roles/${updated.id}`, { method: 'PUT', body })
+			const mapped = { id: res.role_id, name: res.role_name, type: res.is_admin ? ADMIN : MEMBER }
+
+			setRoles(prev => prev.map(r => (r.id === mapped.id ? mapped : r)))
+			openSnack('ロールを更新しました', 'success')
+		} catch (e) {
+			if (e.status === 404) openSnack('対象のロールが見つかりません', 'warning')
+			else if (e.status === 409) openSnack('ロール名が重複しています', 'warning')
+			else openSnack('ロールの更新に失敗しました', 'error')
+		}
+	}
+
+	const deleteRole = async id => {
+		// 削除も管理者専用のため即ガード。
+		if (!isAdmin) {
+			openSnack('権限がありません（管理者のみ操作可能）', 'warning')
+			return
+		}
+
+		// ======== 処理ステップ: API 削除 → ローカル除去 → 通知 ========
+		// 1. API 削除でサーバー状態を先に確定させる。
+		// 2. ローカル除去で UI を同期し、残骸表示を防ぐ。
+		// 3. 通知で結果を共有し、関連制約時の警告をわかりやすくする。
+		try {
+			await api(`/api/roles/${id}`, { method: 'DELETE' })
+			setRoles(prev => prev.filter(r => r.id !== id))
+			openSnack('ロールを削除しました', 'success')
+		} catch (e) {
+			if (e.status === 409) openSnack('関連データがあり削除できません', 'warning')
+			else openSnack('ロールの削除に失敗しました', 'error')
+		}
+	}
+
+	// --- ライン CRUD ---
+	const addLine = async () => {
+		// 管理者のみライン構成を変更できる。
+		if (!isAdmin) {
+			openSnack('権限がありません（管理者のみ操作可能）', 'warning')
+			return
+		}
+
+		const name = newLineName.trim()
+
+		// 空文字を送ると API エラーになるため早期離脱。
+		if (!name) return
+
+		// 事前重複チェックで 409 を未然に防ぎ、即フィードバックを返す。
+		if (lineNames.has(name)) {
+			openSnack('同じライン名が既に存在します', 'warning')
+			return
+		}
+
+		// ======== 処理ステップ: API 追加 → ステート更新 → 入力リセット ========
+		try {
+			const created = await api('/api/lines', { method: 'POST', body: { line_name: name } })
+
+			setLines(prev => [...prev, { id: created.line_id, name: created.line_name }])
+			setNewLineName('')
+			openSnack('ラインを追加しました', 'success')
+		} catch (e) {
+			if (e.status === 409) openSnack('ライン名が重複しています', 'warning')
+			else openSnack('ラインの追加に失敗しました', 'error')
+		}
+	}
+
+	const renameLine = async (id, newName) => {
+		// 閲覧権限では改名できないためガード。
+		if (!isAdmin) {
+			openSnack('権限がありません（管理者のみ操作可能）', 'warning')
+			return
+		}
+
+		if (!newName) return
+
+		// 既存ラインと同名にしないことで情報齟齬を避ける。
+		if (lineNames.has(newName)) {
+			openSnack('同じライン名が既に存在します', 'warning')
+			return
+		}
+
+		// ======== 処理ステップ: API 更新 → ステート置換 → 通知 ========
+		try {
+			const res = await api(`/api/lines/${id}`, { method: 'PUT', body: { line_name: newName } })
+
+			setLines(prev => prev.map(l => (l.id === id ? { id: res.line_id, name: res.line_name } : l)))
+			openSnack('ライン名を更新しました', 'success')
+		} catch (e) {
+			if (e.status === 404) openSnack('対象のラインが見つかりません', 'warning')
+			else if (e.status === 409) openSnack('ライン名が重複しています', 'warning')
+			else openSnack('ライン名の更新に失敗しました', 'error')
+		}
+	}
+
+	const deleteLine = async id => {
+		// 管理権限がない場合は API を呼ばない。
+		if (!isAdmin) {
+			openSnack('権限がありません（管理者のみ操作可能）', 'warning')
+			return
+		}
+
+		// ======== 処理ステップ: API 削除 → 一覧同期 → 通知 ========
+		try {
+			await api(`/api/lines/${id}`, { method: 'DELETE' })
+			setLines(prev => prev.filter(l => l.id !== id))
+			openSnack('ラインを削除しました', 'success')
+		} catch (e) {
+			openSnack('ラインの削除に失敗しました', 'error')
+		}
+	}
+
+	return (
+		<Box className="container mx-auto p-4 sm:p-6 lg:p-8">
+			<Grid container spacing={6}>
+				{/* 権限種別管理 */}
+				<Grid item xs={12} md={6}>
+					<Card>
+						<CardHeader
+											avatar={
+												<Avatar sx={theme => ({ bgcolor: theme.palette.primary.main, color: theme.palette.primary.contrastText })}>
+													<AdminPanelSettingsOutlinedIcon />
+												</Avatar>
+											}
+							title={<Typography fontWeight={700}>権限種別管理</Typography>}
+						/>
+						<Divider />
+						<CardContent>
+							<Stack spacing={1.25}>
+								{roles.map(role => (
+									<RoleItem
+										key={role.id}
+										role={role}
+										onUpdate={updateRole}
+										onDelete={() => deleteRole(role.id)}
+										canEdit={isAdmin}
+									/>
+								))}
+							</Stack>
+
+											<Stack
+												direction="row"
+												spacing={1.5}
+												mt={3}
+												alignItems="center"
+												sx={{ flexWrap: { xs: 'wrap', sm: 'nowrap' } }}
+											>
+												<TextField
+													size="small"
+													label="ロール名を入力"
+													placeholder="例: 閲覧のみ"
+													value={newRoleName}
+													onChange={e => setNewRoleName(e.target.value)}
+													onKeyDown={e => {
+														if (e.key === 'Enter') addRole()
+													}}
+													sx={{ flexGrow: 1, minWidth: { xs: '100%', sm: 240 } }}
+													disabled={!isAdmin}
+												/>
+												<Button
+													variant="outlined"
+													color={newRoleType === ADMIN ? 'primary' : 'inherit'}
+													startIcon={newRoleType === ADMIN ? <AdminPanelSettingsOutlinedIcon /> : <PersonOutlineOutlinedIcon />}
+													onClick={() => setNewRoleType(prev => (prev === ADMIN ? MEMBER : ADMIN))}
+													sx={{ minWidth: { xs: '100%', sm: 140 }, flexShrink: 0, whiteSpace: 'nowrap' }}
+													disabled={!isAdmin}
+												>
+													{newRoleType}
+												</Button>
+												<Button variant="contained" onClick={addRole} sx={{ minWidth: { xs: '100%', sm: 96 }, flexShrink: 0, whiteSpace: 'nowrap' }} disabled={!isAdmin}>
+													追加
+												</Button>
+											</Stack>
+						</CardContent>
+					</Card>
+				</Grid>
+
+				{/* 工場ライン管理 */}
+				<Grid item xs={12} md={6}>
+					<Card>
+						<CardHeader
+											avatar={
+												<Avatar sx={theme => ({ bgcolor: theme.palette.success.main, color: theme.palette.success.contrastText })}>
+													<PrecisionManufacturingOutlinedIcon />
+												</Avatar>
+											}
+							title={<Typography fontWeight={700}>工場ライン管理</Typography>}
+						/>
+						<Divider />
+						<CardContent>
+							<Stack spacing={1.25}>
+								{lines.map((line) => (
+									<LineItem
+										key={line.id}
+										line={line}
+										onRename={newName => renameLine(line.id, newName)}
+										onDelete={() => deleteLine(line.id)}
+										canEdit={isAdmin}
+									/>
+								))}
+							</Stack>
+
+											<Stack
+												direction="row"
+												spacing={1.5}
+												mt={3}
+												alignItems="center"
+												sx={{ flexWrap: { xs: 'wrap', sm: 'nowrap' } }}
+											>
+												<TextField
+													size="small"
+													label="新しいライン名"
+													placeholder="例: Cライン"
+													value={newLineName}
+													onChange={e => setNewLineName(e.target.value)}
+													onKeyDown={e => {
+														if (e.key === 'Enter') addLine()
+													}}
+													sx={{ flexGrow: 1, minWidth: { xs: '100%', sm: 240 } }}
+													disabled={!isAdmin}
+												/>
+												<Button variant="contained" onClick={addLine} sx={{ minWidth: { xs: '100%', sm: 96 }, flexShrink: 0, whiteSpace: 'nowrap' }} disabled={!isAdmin}>
+													追加
+												</Button>
+											</Stack>
+						</CardContent>
+					</Card>
+				</Grid>
+			</Grid>
+
+			{!isAdmin && (
+				<Box sx={{ mt: 3 }}>
+					<Alert severity="info" variant="outlined">現在は閲覧専用です。編集するには管理者権限でサインインしてください。</Alert>
+				</Box>
+			)}
+
+				<Snackbar open={snack.open} autoHideDuration={3000} onClose={closeSnack} anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}>
+					<Alert onClose={closeSnack} severity={snack.severity} sx={{ width: '100%' }}>
+						{snack.message}
+					</Alert>
+				</Snackbar>
+		</Box>
+	)
+}
+
diff --git a/javascript-version/src/app/(dashboard)/form-layouts/page.jsx b/javascript-version/src/app/(dashboard)/form-layouts/page.jsx
deleted file mode 100644
index aa5848e16..000000000
--- a/javascript-version/src/app/(dashboard)/form-layouts/page.jsx
+++ /dev/null
@@ -1,25 +0,0 @@
-// MUI Imports
-import Grid from '@mui/material/Grid'
-
-// Component Imports
-import FormLayoutsBasic from '@views/form-layouts/FormLayoutsBasic'
-import FormLayoutsIcon from '@views/form-layouts/FormLayoutsIcons'
-import FormLayoutsAlignment from '@views/form-layouts/FormLayoutsAlignment'
-
-const FormLayouts = () => {
-  return (
-    <Grid container spacing={6}>
-      <Grid item xs={12} md={6}>
-        <FormLayoutsBasic />
-      </Grid>
-      <Grid item xs={12} md={6}>
-        <FormLayoutsIcon />
-      </Grid>
-      <Grid item xs={12}>
-        <FormLayoutsAlignment />
-      </Grid>
-    </Grid>
-  )
-}
-
-export default FormLayouts
diff --git a/javascript-version/src/app/(dashboard)/image-inspection/components/charts/DonutChart.jsx b/javascript-version/src/app/(dashboard)/image-inspection/components/charts/DonutChart.jsx
new file mode 100644
index 000000000..67710ef07
--- /dev/null
+++ b/javascript-version/src/app/(dashboard)/image-inspection/components/charts/DonutChart.jsx
@@ -0,0 +1,76 @@
+/*
+======== ファイル概要 ========
+検査結果の良品率を円形ドーナツチャートで提示するための専用コンポーネント。
+検査ビュー内で単体部品として利用し、良品率の視覚的な把握を助ける。
+*/
+
+import Box from '@mui/material/Box'
+import Typography from '@mui/material/Typography'
+import { useTheme } from '@mui/material/styles'
+
+/**
+ * 良品率の割合を受け取り、ドーナツチャートとして描画する。
+ * @param {object} props                - コンポーネントの引数。
+ * @param {number} props.percentage     - 0〜100の良品率。数値が高いほど緑の弧が長くなる。
+ * @param {number} [props.size=160]     - SVGの一辺の長さ。視認性確保のためデフォルト値を持たせている。
+ * @returns {JSX.Element}                良品率を中央テキスト付きのドーナツチャートとして表示する要素。
+ */
+const DonutChart = ({ percentage, size = 160 }) => {
+    const theme = useTheme()
+    // SVGの半径や円周を計算してstrokeDasharrayに使う
+    // ======== 処理ステップ: 円周計算で割合を可視化 ========
+    // 内側に余白を持たせて円の半径を決め、円周からstrokeDasharrayを割り出すことで割合に応じた弧長を描く。
+    const radius = (size - 20) / 2
+    const circumference = 2 * Math.PI * radius
+    const strokeDasharray = `${(percentage / 100) * circumference} ${circumference}`
+    // 成否の描画色はテーマから取得して、ダーク/ライト両方で一貫性を保つ理由はテーマ依存色に合わせてUIが破綻しないようにするため。
+    const bgStroke = theme.palette.divider
+    const fgStroke = theme.palette.success.main
+
+    return (
+        <Box sx={{ position: 'relative', width: size, height: size }}>
+            <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
+                {/* 背景側のドーナツを描いて全体の形状を示す。意図として割合が欠損しても基準円が見えるようにする。 */}
+                <circle
+                    cx={size / 2}
+                    cy={size / 2}
+                    r={radius}
+                    fill="none"
+                    stroke={bgStroke}
+                    strokeWidth="8"
+                />
+                {/* 良品率を表す進捗用ドーナツで割合に応じた長さにする。-90度回転して12時スタートに揃える。 */}
+                <circle
+                    cx={size / 2}
+                    cy={size / 2}
+                    r={radius}
+                    fill="none"
+                    stroke={fgStroke}
+                    strokeWidth="8"
+                    strokeDasharray={strokeDasharray}
+                    strokeLinecap="round"
+                    transform={`rotate(-90 ${size / 2} ${size / 2})`}
+                />
+            </svg>
+            {/* 中央に良品率のテキストを重ねて数値とラベルを提示する */}
+            <Box
+                sx={{
+                    position: 'absolute',
+                    top: '50%',
+                    left: '50%',
+                    transform: 'translate(-50%, -50%)',
+                    textAlign: 'center',
+                }}
+            >
+                <Typography variant="h3" component="div" fontWeight="bold" color="primary">
+                    {percentage}%
+                </Typography>
+                <Typography variant="body2" color="text.secondary">
+                    良品率
+                </Typography>
+            </Box>
+        </Box>
+    )
+}
+
+export default DonutChart
diff --git a/javascript-version/src/app/(dashboard)/image-inspection/components/grid/CameraGrid.jsx b/javascript-version/src/app/(dashboard)/image-inspection/components/grid/CameraGrid.jsx
new file mode 100644
index 000000000..9012f15cc
--- /dev/null
+++ b/javascript-version/src/app/(dashboard)/image-inspection/components/grid/CameraGrid.jsx
@@ -0,0 +1,81 @@
+/*
+======== ファイル概要 ========
+カメラごとのプレビュー画像と稼働ステータスをグリッドで並べる表示レイヤー。
+呼び出し元から受け取ったカメラ名配列と状態マップを元にレスポンシブに描画する。
+*/
+
+import Grid from '@mui/material/Grid'
+import Box from '@mui/material/Box'
+
+import CameraTile from './CameraTile'
+
+/**
+ * カメラ一覧をカード状に並べ、欠番があっても見やすく扱うグリッド。
+ * @param {object} props                             - プロパティ集合。
+ * @param {string[]} props.cameraNames               - 表示するカメラ名称の配列。
+ * @param {Object.<string, string>} props.statusByName - カメラ名→判定ステータスのマップ。
+ * @param {Object.<string, string>} props.imageByName  - カメラ名→画像パスのマップ。
+ * @returns {JSX.Element}                              CameraTile を並べたグリッド。
+ */
+const CameraGrid = ({ cameraNames = [], statusByName, imageByName = {} }) => {
+  const uniqueNames = Array.from(new Set((cameraNames || []).filter(Boolean)))
+  const isSingleCamera = uniqueNames.length === 1
+  // 3台のときも2x2(=4枠)で表示するため、ダミー枠を追加する。空白を作ることで視線移動が一定になり情報量を揃えられるため。
+  const needsDummy = !isSingleCamera && uniqueNames.length === 3
+  // 3台の場合は四角形レイアウトになるようダミー枠を挿入
+  const items = needsDummy ? [...uniqueNames, '__dummy__'] : uniqueNames
+  const isTwoCols = items.length >= 4 || items.length === 3 // 3台時も2列に固定してカード縦横比を保つ。
+
+  const basePath = process.env.NEXT_PUBLIC_BASE_PATH || ''
+  const dummyImg = `${basePath}/images/pages/CameraNotFound.png`
+
+  // ======== 処理ステップ: レイアウト判定 → タイル描画 → ダミー補完 ========
+  // 1. レイアウト判定ではcol数とダミー枠を算出し、グリッドの視認性を維持する。
+  // 2. タイル描画ではCameraTileへ名前/状態/画像を渡して統一表示させる。
+  // 3. ダミー補完は画像欠損時の空枠を説明するため、ユーザーが未設置カメラだと分かるようにする。
+  return (
+    <Grid container spacing={2} sx={{ mb: 2 }}>
+      {items.map((name, i) => {
+        const rawStatus = statusByName?.[name]
+        const resolvedStatus = typeof rawStatus === 'string' && rawStatus.trim() ? rawStatus : 'MISSING'
+
+        const imagePath = name === '__dummy__' ? null : imageByName?.[name]
+
+        return (
+          <Grid
+            item
+            xs={12}
+            sm={isSingleCamera ? 12 : 6}
+            md={isSingleCamera ? 12 : isTwoCols ? 6 : 4}
+            key={i}
+          >
+            {name === '__dummy__' ? (
+              <Box
+                sx={{
+                  bgcolor: 'grey.900',
+                  borderRadius: 2,
+                  aspectRatio: '16/9',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  overflow: 'hidden',
+                }}
+              >
+                <img
+                  src={dummyImg}
+                  alt="placeholder"
+                  draggable={false}
+                  style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+                />
+              </Box>
+            ) : (
+              <CameraTile name={name} status={resolvedStatus} isSingle={isSingleCamera} imagePath={imagePath} />
+            )}
+          </Grid>
+        )
+      })}
+    </Grid>
+  )
+}
+
+export default CameraGrid
diff --git a/javascript-version/src/app/(dashboard)/image-inspection/components/grid/CameraTile.jsx b/javascript-version/src/app/(dashboard)/image-inspection/components/grid/CameraTile.jsx
new file mode 100644
index 000000000..560e33074
--- /dev/null
+++ b/javascript-version/src/app/(dashboard)/image-inspection/components/grid/CameraTile.jsx
@@ -0,0 +1,191 @@
+/*
+======== ファイル概要 ========
+単一カメラのプレビュー画像とステータスラベルをカード表示するプレゼンテーション層。
+フォールバック画像や事後/事前撮影URLの補完もここで吸収する。
+*/
+
+import { useCallback, useMemo } from 'react'
+
+import Box from '@mui/material/Box'
+import Chip from '@mui/material/Chip'
+import Typography from '@mui/material/Typography'
+
+import { getFallbackImageBase, toAfterTestUrl, toBeforeTestUrl, toImageUrl } from '../../utils/imageUrl'
+
+const fallbackImageBase = getFallbackImageBase()
+const basePath = process.env.NEXT_PUBLIC_BASE_PATH || ''
+const FALLBACK_IMG = `${basePath}/images/pages/CameraNotFound.png`
+
+/**
+ * 画像パスに混在するバックスラッシュや余計なスラッシュを吸収して
+ * APIから届く相対/絶対パスを正規化する。
+ * @param {string} path - 元の画像パス。
+ * @returns {string|null} 正規化済みのパス。空なら null。
+ */
+const normalizeRelativePath = path => {
+  if (!path) return null
+  const trimmed = String(path).trim()
+  if (!trimmed) return null
+  const sanitized = trimmed.replace(/\\/g, '/')
+  if (/^https?:\/\//i.test(sanitized)) {
+    const [protocol, rest] = sanitized.split('://')
+    if (!rest) return sanitized
+    const cleanedRest = rest.replace(/\/{3,}/g, '//')
+    return `${protocol}://${cleanedRest}`
+  }
+  const withLeading = sanitized.startsWith('/') ? sanitized : `/${sanitized}`
+  return withLeading.replace(/\/{3,}/g, '//')
+}
+
+/**
+ * OK/NGなどの表記ゆれをPASS/FAILへ丸め込む。
+ * @param {string} status - 生ステータス文字列。
+ * @returns {string}      正規化済みステータス。
+ * 
+ * 【Note】最初から仕様決めとかないからこういうよくわかんない関数必要になるねんて
+ */
+const normalizeStatusLabel = status => {
+  const normalized = (status || '').toString().trim().toUpperCase()
+  if (!normalized) return ''
+  if (normalized === 'OK') return 'PASS'
+  if (normalized === 'NG') return 'FAIL'
+  return normalized
+}
+
+/**
+ * カメラ1台分のカード。画像読み込み失敗時はフォールバックを順に試す。
+ * @param {object} props          - コンポーネント引数。
+ * @param {string} props.name     - カメラ表示名。
+ * @param {string} props.status   - 判定ステータス。
+ * @param {boolean} props.isSingle - 単独表示かどうか。
+ * @param {string} props.imagePath - 元画像パス。
+ * @returns {JSX.Element}          プレビュー付きのカメラカード。
+ */
+const CameraTile = ({ name, status = 'PASS', isSingle = false, imagePath }) => {
+  const canonicalStatus = normalizeStatusLabel(status)
+  const normalizedStatus = canonicalStatus || (status || '').toString().trim().toUpperCase() || 'UNKNOWN'
+
+  const chipColor = normalizedStatus === 'PASS'
+    ? 'success'
+    : normalizedStatus === 'MISSING'
+      ? 'warning'
+      : normalizedStatus === 'UNKNOWN'
+        ? 'default'
+        : 'error'
+
+  const label = normalizedStatus
+
+  /**
+   * ステータスとパスから最適なURL組み合わせを決め、フォールバックも用意する。
+   * 画像DBの before/after を切り替えることで撮影タイミングに即した参照先を選ぶ。
+   * @returns {{primary: string, fallback: string}} 読み込み順のURLセット。
+   */
+  const buildImageSources = useCallback(() => {
+    const normalizedPath = normalizeRelativePath(imagePath)
+    if (!normalizedPath) {
+      return { primary: FALLBACK_IMG, fallback: '' }
+    }
+
+    const hasFallbackBase = Boolean(fallbackImageBase)
+
+    const buildPair = builder => {
+      const primaryCandidate = builder(normalizedPath)
+      const fallbackCandidate = hasFallbackBase ? builder(normalizedPath, { base: fallbackImageBase }) : ''
+      return { primary: primaryCandidate, fallback: fallbackCandidate }
+    }
+
+    const ensureUrl = pair => {
+      if (pair.primary) return pair
+      const primaryCandidate = toImageUrl(normalizedPath)
+      const fallbackCandidate = hasFallbackBase ? toImageUrl(normalizedPath, { base: fallbackImageBase }) : ''
+      return { primary: primaryCandidate, fallback: fallbackCandidate }
+    }
+
+    const hasExplicitRoot = normalizedPath.includes('/imageDB/') || /^https?:\/\//i.test(normalizedPath)
+    if (hasExplicitRoot) {
+      const primaryCandidate = toImageUrl(normalizedPath)
+      const fallbackCandidate = hasFallbackBase ? toImageUrl(normalizedPath, { base: fallbackImageBase }) : ''
+      const primary = primaryCandidate || FALLBACK_IMG
+      const fallback = fallbackCandidate && fallbackCandidate !== primary ? fallbackCandidate : ''
+      return { primary, fallback }
+    }
+
+    let pair
+    if (normalizedStatus === 'MISSING') {
+      pair = ensureUrl(buildPair((path, options) => toBeforeTestUrl(path, options)))
+    } else if (normalizedStatus === 'PASS' || normalizedStatus === 'FAIL') {
+      pair = ensureUrl(buildPair((path, options) => toAfterTestUrl(path, options)))
+    } else {
+      pair = ensureUrl(buildPair((path, options) => toImageUrl(path, options)))
+    }
+
+    const primary = pair.primary || FALLBACK_IMG
+    const fallback = pair.fallback && pair.fallback !== primary ? pair.fallback : ''
+    return { primary, fallback }
+  }, [imagePath, normalizedStatus])
+
+  const imageSources = useMemo(() => buildImageSources(), [buildImageSources])
+
+  /**
+   * 画像読み込み失敗時にフォールバックを段階的に試す。最終手段は固定のノーフォト画像。
+   * @param {React.SyntheticEvent<HTMLImageElement>} event - onErrorイベント。
+   */
+  const handleImageError = useCallback((event) => {
+    const target = event.currentTarget
+    if (imageSources.fallback && !target.dataset.fallbackTried) {
+      target.dataset.fallbackTried = 'true'
+      target.src = imageSources.fallback
+    } else if (target.src !== FALLBACK_IMG) {
+      target.src = FALLBACK_IMG
+    }
+  }, [imageSources.fallback])
+
+  // 描画
+  // ======== 処理ステップ: ソース算出 → フォールバック制御 → オーバーレイ描画 ========
+  // 1. buildImageSourcesで最適なURLを決めておき、描画時に確実に同じ順序で利用する。
+  // 2. handleImageErrorでロード失敗時にフォールバックへ切り替え、最後の砦としてFALLBACK_IMGを使う。
+  // 3. オーバーレイ描画では名前とステータスを同じ位置に出し、どの画像か即座に理解できるようにする。
+  return (
+    <Box
+      sx={{
+        position: 'relative',
+        borderRadius: 2,
+        aspectRatio: '16/9',
+        overflow: 'hidden',
+      }}
+    >
+      <img
+        src={imageSources.primary}
+        alt={imagePath ? `${name} latest capture` : 'placeholder'}
+        onError={handleImageError}
+        draggable={false}
+        style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+      />
+      <Box
+        sx={{
+          position: 'absolute',
+          inset: 0,
+          display: 'flex',
+          alignItems: 'flex-end',
+          justifyContent: 'space-between',
+          px: isSingle ? 4 : 2,
+          py: isSingle ? 3 : 1.5,
+          background: theme => `linear-gradient(to top, ${theme.palette.grey[900]}dd 0%, transparent 60%)`,
+        }}
+      >
+        <Typography color="common.white" fontWeight={600} variant={isSingle ? 'h5' : 'body1'} sx={{ textShadow: '0 1px 2px rgba(0,0,0,0.6)' }}>
+          {name}
+        </Typography>
+        <Chip
+          label={label}
+          size={isSingle ? 'medium' : 'small'}
+          color={chipColor}
+          variant="filled"
+          sx={{ fontSize: isSingle ? '1rem' : '0.75rem', fontWeight: 600 }}
+        />
+      </Box>
+    </Box>
+  )
+}
+
+export default CameraTile
diff --git a/javascript-version/src/app/(dashboard)/image-inspection/components/lightbox/ImageLightbox.jsx b/javascript-version/src/app/(dashboard)/image-inspection/components/lightbox/ImageLightbox.jsx
new file mode 100644
index 000000000..2d7aa97cd
--- /dev/null
+++ b/javascript-version/src/app/(dashboard)/image-inspection/components/lightbox/ImageLightbox.jsx
@@ -0,0 +1,379 @@
+/*
+======== ファイル概要 ========
+拡大画像をフルスクリーンで表示し、ズーム/パン/ホイール移動を提供するライトボックス実装。
+質検モーダルから共通で呼び出され、詳細確認の体験を統一する。
+*/
+
+import { useEffect, useRef, useState } from 'react'
+
+import { keyframes } from '@mui/system'
+import Box from '@mui/material/Box'
+
+/**
+ * ImageLightbox
+ * - 前面オーバーレイで画像を表示
+ * - クリックで 拡大/縮小 トグル
+ * - 拡大中はドラッグでパン可能（手のひらツール風）
+ */
+const basePath = process.env.NEXT_PUBLIC_BASE_PATH || ''
+const FALLBACK_IMG = `${basePath}/images/pages/CameraNotFound.png`
+
+/**
+ * ライトボックス本体。マウス操作によるズーム・パンを制御し、フォールバック画像も管理する。
+ * @param {object} props                - プロパティ集合。
+ * @param {boolean} props.open          - オーバーレイ表示フラグ。
+ * @param {string} props.src            - メイン画像URL。
+ * @param {string} [props.fallbackSrc]  - メイン失敗時に試す代替URL。
+ * @param {string} [props.alt='image']  - 代替テキスト。
+ * @param {Function} props.onClose      - 閉じるトリガー。
+ * @returns {JSX.Element|null}           表示状態に応じたライトボックス。
+ */
+const ImageLightbox = ({ open, src, fallbackSrc, alt = 'image', onClose }) => {
+  const containerRef = useRef(null)
+  const imgRef = useRef(null)
+  const [scale, setScale] = useState(1) // 1: フィット, >1: 拡大
+  const [offset, setOffset] = useState({ x: 0, y: 0 })
+  const [viewport, setViewport] = useState({ w: 0, h: 0 })
+  const [baseSize, setBaseSize] = useState({ w: 0, h: 0 })
+  const dragState = useRef({ dragging: false, startX: 0, startY: 0, originX: 0, originY: 0 })
+  const [imgNatural, setImgNatural] = useState({ w: 0, h: 0 })
+  const [imgSrc, setImgSrc] = useState(src || FALLBACK_IMG)
+  const [dragging, setDragging] = useState(false)
+  const [fallbackTried, setFallbackTried] = useState(false)
+  const suppressClickRef = useRef(false)
+  const moveRaf = useRef(0)
+  const [animatePopIn, setAnimatePopIn] = useState(false)
+
+  useEffect(() => {
+    if (open) {
+      setScale(1)
+      setOffset({ x: 0, y: 0 })
+      setImgSrc(src || FALLBACK_IMG)
+      setFallbackTried(false)
+      setImgNatural({ w: 0, h: 0 })
+      setBaseSize({ w: 0, h: 0 })
+      setAnimatePopIn(true)
+    }
+  }, [open, src, fallbackSrc])
+
+  useEffect(() => {
+    if (!open) return
+
+    const updateViewport = () => {
+      const rect = containerRef.current?.getBoundingClientRect()
+      setViewport({
+        w: rect?.width || window.innerWidth,
+        h: rect?.height || window.innerHeight,
+      })
+    }
+
+    updateViewport()
+    window.addEventListener('resize', updateViewport)
+
+    return () => window.removeEventListener('resize', updateViewport)
+  }, [open])
+
+  useEffect(() => {
+    if (!open) return
+    const timer = setTimeout(() => setAnimatePopIn(false), 380)
+    return () => clearTimeout(timer)
+  }, [open])
+
+  useEffect(() => {
+    if (!open || !imgNatural.w || !imgNatural.h || !viewport.w || !viewport.h) return
+
+    const maxWidth = viewport.w * 0.95
+    const maxHeight = viewport.h * 0.9
+    const ratio = Math.min(maxWidth / imgNatural.w, maxHeight / imgNatural.h, 1)
+
+    setBaseSize({
+      w: imgNatural.w * ratio,
+      h: imgNatural.h * ratio,
+    })
+  }, [open, imgNatural, viewport])
+
+  useEffect(() => {
+    const onKey = e => {
+      if (!open) return
+      if (e.key === 'Escape') onClose?.()
+    }
+
+    window.addEventListener('keydown', onKey)
+
+    return () => window.removeEventListener('keydown', onKey)
+  }, [open, onClose])
+
+  /**
+   * オフセットがビューポート外に飛びすぎないよう両端を制限する。
+   * @param {number} val - 対象値。
+   * @param {number} min - 下限。
+   * @param {number} max - 上限。
+   * @returns {number}   範囲内へ収めた値。
+   */
+  const clamp = (val, min, max) => Math.max(min, Math.min(max, val))
+
+  useEffect(() => {
+    if (!open) return
+
+    const frameWidth = baseSize.w * scale
+    const frameHeight = baseSize.h * scale
+
+    if (!frameWidth || !frameHeight || !viewport.w || !viewport.h) return
+
+    const maxX = Math.max(0, (frameWidth - viewport.w) / 2)
+    const maxY = Math.max(0, (frameHeight - viewport.h) / 2)
+
+    setOffset(prev => {
+      const nextX = clamp(prev.x, -maxX, maxX)
+      const nextY = clamp(prev.y, -maxY, maxY)
+
+      if (nextX === prev.x && nextY === prev.y) return prev
+
+      return { x: nextX, y: nextY }
+    })
+  }, [open, baseSize, viewport, scale])
+
+  /**
+   * 拡大中のフレームでホイールスクロールを使ったパン操作を提供する。
+   * @param {WheelEvent} e - ホイールイベント。
+   */
+  const handleWheel = e => {
+    if (!open) return
+    e.preventDefault()
+
+    if (scale <= 1 || !viewport.w || !viewport.h || !baseSize.w || !baseSize.h) return
+
+    const frameWidth = baseSize.w * scale
+    const frameHeight = baseSize.h * scale
+    const maxX = Math.max(0, (frameWidth - viewport.w) / 2)
+    const maxY = Math.max(0, (frameHeight - viewport.h) / 2)
+
+    setOffset(prev => {
+      const nextX = clamp(prev.x - e.deltaX, -maxX, maxX)
+      const nextY = clamp(prev.y - e.deltaY, -maxY, maxY)
+
+      if (nextX === prev.x && nextY === prev.y) return prev
+
+      suppressClickRef.current = true
+
+      return { x: nextX, y: nextY }
+    })
+  }
+
+  /**
+   * 拡大時のみドラッグ開始を許可し、開始座標を保持する。
+   * @param {MouseEvent} e - マウスダウンイベント。
+   */
+  const handleMouseDown = e => {
+    // ブラウザのデフォルト画像ドラッグや選択を抑止
+    e.preventDefault()
+    suppressClickRef.current = false
+    if (scale <= 1) return
+    dragState.current = {
+      dragging: true,
+      startX: e.clientX,
+      startY: e.clientY,
+      originX: offset.x,
+      originY: offset.y,
+    }
+    setDragging(true)
+  }
+
+  /**
+   * ドラッグ中の平行移動をRafでまとめて反映する。
+   * @param {MouseEvent} e - マウスムーブイベント。
+   */
+  const handleMouseMove = e => {
+    if (!dragState.current.dragging) return
+    const dx = e.clientX - dragState.current.startX
+    const dy = e.clientY - dragState.current.startY
+    const next = { x: dragState.current.originX + dx, y: dragState.current.originY + dy }
+
+    if (Math.abs(dx) + Math.abs(dy) > 3) suppressClickRef.current = true
+    if (viewport.w && viewport.h && baseSize.w && baseSize.h) {
+      const frameWidth = baseSize.w * scale
+      const frameHeight = baseSize.h * scale
+      const maxX = Math.max(0, (frameWidth - viewport.w) / 2)
+      const maxY = Math.max(0, (frameHeight - viewport.h) / 2)
+
+      next.x = clamp(next.x, -maxX, maxX)
+      next.y = clamp(next.y, -maxY, maxY)
+    }
+
+    if (!moveRaf.current) {
+      moveRaf.current = requestAnimationFrame(() => {
+        setOffset(next)
+        moveRaf.current = 0
+      })
+    }
+  }
+
+  /**
+   * ドラッグ終了時にフラグとRafをリセットする。
+   */
+  const handleMouseUp = () => {
+    dragState.current.dragging = false
+    setDragging(false)
+
+    if (moveRaf.current) {
+      cancelAnimationFrame(moveRaf.current)
+      moveRaf.current = 0
+    }
+  }
+
+  /**
+   * 画像クリックでフィット⇔拡大をトグル。背景クリックならクローズ。
+   * @param {MouseEvent} e - クリックイベント。
+   */
+  const toggleZoom = e => {
+    if (e.target === containerRef.current) {
+      onClose?.()
+      return
+    }
+
+    if (suppressClickRef.current) {
+      // ドラッグ直後のクリック抑制
+      suppressClickRef.current = false
+      return
+    }
+
+    setScale(prev => (prev > 1 ? 1 : 2))
+    setOffset({ x: 0, y: 0 })
+  }
+
+  const onImgLoad = () => {
+    if (!imgRef.current) return
+    const img = imgRef.current
+
+    setImgNatural({ w: img.naturalWidth, h: img.naturalHeight })
+  }
+
+  useEffect(() => () => {
+    if (moveRaf.current) cancelAnimationFrame(moveRaf.current)
+  }, [])
+
+  /**
+   * メイン→フォールバック→固定画像の順に差し替える。
+   */
+  const handleImgError = () => {
+    if (fallbackSrc && !fallbackTried) {
+      setFallbackTried(true)
+      setImgSrc(fallbackSrc)
+    } else if (imgSrc !== FALLBACK_IMG) {
+      setImgSrc(FALLBACK_IMG)
+    }
+  }
+
+  if (!open) return null
+
+  // アニメーション（うにょん拡大 + 背景フェード）
+  const fadeIn = keyframes`
+    0% { opacity: 0 }
+    100% { opacity: 1 }
+  `
+
+  const popIn = keyframes`
+    0% { transform: scale(0.85); opacity: 0.6 }
+    60% { transform: scale(1.03); opacity: 1 }
+    100% { transform: scale(1) }
+  `
+
+  const popWrapperStyles = {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    animation: animatePopIn ? `${popIn} 360ms cubic-bezier(.2,.8,.2,1) both` : 'none',
+    willChange: animatePopIn ? 'transform' : undefined,
+  }
+  const frameStyles = {
+    position: 'relative',
+    borderRadius: 2,
+    boxShadow: 24,
+    bgcolor: 'black',
+    overflow: 'hidden',
+    willChange: 'transform',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    transformOrigin: 'center center',
+    transform: `scale(${scale})`,
+    transition: dragging ? 'none' : 'transform 220ms cubic-bezier(.2,.8,.2,1)',
+    ...(baseSize.w && baseSize.h
+      ? {
+          width: baseSize.w,
+          height: baseSize.h,
+        }
+      : {
+          maxWidth: '95vw',
+          maxHeight: '90vh',
+        }),
+  }
+
+  // ======== 処理ステップ: オーバーレイ表示 → オフセット適用 → フレーム描画 ========
+  // 1. オーバーレイではEscapeやクリックで閉じられるようイベントをまとめて設定する。
+  // 2. オフセット適用ではパン位置をtranslateへ反映し、ズーム倍率との整合を保つ。
+  // 3. フレーム描画ではimgタグをcontainで収め、pointerEventsを無効にしてドラッグ操作を優先する。
+  return (
+    <Box
+      ref={containerRef}
+      onClick={toggleZoom}
+      onWheel={handleWheel}
+      onMouseDown={handleMouseDown}
+      onMouseMove={handleMouseMove}
+      onMouseUp={handleMouseUp}
+      onMouseLeave={handleMouseUp}
+      onDragStart={e => e.preventDefault()}
+      sx={{
+        position: 'fixed',
+        inset: 0,
+        zIndex: theme => theme.zIndex.modal + 1,
+        bgcolor: 'rgba(0,0,0,0.6)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        cursor: dragging ? 'grabbing' : (scale > 1 ? 'grab' : 'zoom-in'),
+
+        // 背景フェード
+        opacity: 0,
+        animation: `${fadeIn} 180ms ease-out forwards`,
+        userSelect: 'none',
+      }}
+      aria-modal
+      role="dialog"
+    >
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          transform: `translate(${offset.x}px, ${offset.y}px)`,
+          transition: dragging ? 'none' : 'transform 180ms ease',
+          willChange: 'transform',
+        }}
+      >
+        <Box sx={popWrapperStyles}>
+          <Box sx={frameStyles}>
+            <img
+              ref={imgRef}
+              src={imgSrc}
+              alt={alt}
+              onLoad={onImgLoad}
+              onError={handleImgError}
+              draggable={false}
+              style={{
+                display: 'block',
+                width: '100%',
+                height: '100%',
+                objectFit: 'contain',
+                userSelect: 'none',
+                pointerEvents: 'none',
+              }}
+            />
+          </Box>
+        </Box>
+      </Box>
+    </Box>
+  )
+}
+
+export default ImageLightbox
diff --git a/javascript-version/src/app/(dashboard)/image-inspection/components/lots/LotCard.jsx b/javascript-version/src/app/(dashboard)/image-inspection/components/lots/LotCard.jsx
new file mode 100644
index 000000000..0e3b6e3d8
--- /dev/null
+++ b/javascript-version/src/app/(dashboard)/image-inspection/components/lots/LotCard.jsx
@@ -0,0 +1,329 @@
+/*
+======== ファイル概要 ========
+ロットの代表画像とカメラ判定をカード形式で表示し、詳細モーダル起動の入り口となるコンポーネント。
+カメラ数が多い場合のサマリ表示や不良詳細の強調も担う。
+*/
+
+import { useCallback, useEffect, useMemo, useState } from 'react'
+
+import Box from '@mui/material/Box'
+import Card from '@mui/material/Card'
+import CardActionArea from '@mui/material/CardActionArea'
+import CardContent from '@mui/material/CardContent'
+import Chip from '@mui/material/Chip'
+import Button from '@mui/material/Button'
+import Typography from '@mui/material/Typography'
+
+import { getFallbackImageBase, toImageUrl } from '../../utils/imageUrl'
+
+const fallbackImageBase = getFallbackImageBase()
+const basePath = process.env.NEXT_PUBLIC_BASE_PATH || ''
+const FALLBACK_IMG = `${basePath}/images/pages/CameraNotFound.png`
+const SUMMARY_THRESHOLD = 8
+
+/**
+ * APIから返る相対/絶対パスの表記ゆれを正規化して画像URLに利用しやすくする。
+ * @param {string} path - 元の画像パス。
+ * @returns {string|null} 正規化済みパス。
+ */
+const normalizeRelativePath = path => {
+  if (!path) return null
+  const trimmed = String(path).trim()
+  if (!trimmed) return null
+  const sanitized = trimmed.replace(/\\/g, '/')
+  if (/^https?:\/\//i.test(sanitized)) {
+    const [protocol, rest] = sanitized.split('://')
+    if (!rest) return sanitized
+    const cleanedRest = rest.replace(/\/{3,}/g, '//')
+    return `${protocol}://${cleanedRest}`
+  }
+  const withLeading = sanitized.startsWith('/') ? sanitized : `/${sanitized}`
+  return withLeading.replace(/\/{3,}/g, '//')
+}
+
+/**
+ * OK/NG といった別表記を PASS/FAIL/MISSING へ揃える。
+ * @param {string} status - 判定文字列。
+ * @returns {string}      正規化結果。
+ */
+const normalizeStatusLabel = status => {
+  const normalized = (status || '').toString().trim().toUpperCase()
+  if (!normalized) return ''
+  if (normalized === 'OK') return 'PASS'
+  if (normalized === 'NG') return 'FAIL'
+  return normalized
+}
+
+/**
+ * ステータスに応じて MUI Chip のカラートークンを決定する。
+ * @param {string} status - 判定文字列。
+ * @returns {'success'|'error'|'warning'|'default'} 色指定。
+ */
+const getChipColor = status => {
+  const normalized = normalizeStatusLabel(status)
+  if (normalized === 'PASS') return 'success'
+  if (normalized === 'FAIL') return 'error'
+  if (normalized === 'MISSING') return 'warning'
+  return 'default'
+}
+
+/**
+ * 並び替え用の優先度を返す。不良系を先に並べたいときに使用。
+ * @param {string} status - 判定文字列。
+ * @returns {number}      小さいほど優先。
+ */
+const getStatusPriority = status => {
+  const normalized = normalizeStatusLabel(status)
+  if (normalized === 'FAIL') return 0
+  if (normalized === 'MISSING') return 1
+  if (normalized === 'PASS') return 2
+  if (normalized === 'UNKNOWN') return 3
+  return 4
+}
+
+/**
+ * カメラ/シーケンスに紐づく最適な表示名を推定する。
+ * @param {object} item - カメラ情報。
+ * @param {number} index - 配列インデックス（フォールバック用）。
+ * @returns {string} 表示名。
+ */
+const resolveDisplayName = (item, index) => {
+  const candidates = [item?.name, item?.label, item?.camera_id, item?.cameraId, item?.rawSequence]
+  for (const candidate of candidates) {
+    if (candidate === undefined || candidate === null) continue
+    const text = String(candidate).trim()
+    if (!text || text === '-' || text === '--') continue
+    return text
+  }
+  return `#${index + 1}`
+}
+
+/**
+ * ロット概要カード。代表画像、ロット情報、カメラ判定をまとめて表示する。
+ * @param {object} props             - コンポーネント引数。
+ * @param {object} props.lot         - ロットデータ。
+ * @param {string} [props.lotStatus] - 全体判定。
+ * @param {Function} props.onOpen    - クリック時のモーダルオープンハンドラ。
+ * @param {boolean} [props.isActive] - 選択中スタイルを出すかどうか。
+ * @returns {JSX.Element|null}        レイアウト済みカード。
+ */
+const LotCard = ({
+  lot,
+  lotStatus,
+  onOpen,
+  isActive = false,
+}) => {
+  const cameraList = useMemo(() => {
+    if (!lot || !Array.isArray(lot.cameras)) return []
+    return lot.cameras
+  }, [lot])
+  const shouldSummarize = cameraList.length > SUMMARY_THRESHOLD
+  const [showAllCameras, setShowAllCameras] = useState(false)
+  const showDetailedView = !shouldSummarize || showAllCameras
+
+  useEffect(() => {
+    setShowAllCameras(false)
+  }, [lot?.lotId])
+
+  /**
+   * 代表画像のURLセットを生成し、フォールバックを確保する。
+   * @param {string} path - APIから受け取った画像パス。
+   * @returns {{primary: string, fallback: string}} 表示用URL。
+   */
+  const buildImageSources = useCallback((path) => {
+    const normalized = normalizeRelativePath(path)
+    if (!normalized) return { primary: FALLBACK_IMG, fallback: '' }
+    const primary = toImageUrl(normalized)
+    const fallback = fallbackImageBase ? toImageUrl(normalized, { base: fallbackImageBase }) : ''
+    return {
+      primary: primary || FALLBACK_IMG,
+      fallback: fallback && fallback !== primary ? fallback : '',
+    }
+  }, [])
+
+  /**
+   * 画像失敗時にフォールバック→固定画像の順で差し替える。
+   * @param {React.SyntheticEvent<HTMLImageElement>} event - onErrorイベント。
+   * @param {string} fallbackSrc                          - 第二候補URL。
+   */
+  const handleImageError = (event, fallbackSrc) => {
+    const target = event.currentTarget
+    if (fallbackSrc && !target.dataset.fallbackTried) {
+      target.dataset.fallbackTried = 'true'
+      target.src = fallbackSrc
+    } else if (target.src !== FALLBACK_IMG) {
+      target.src = FALLBACK_IMG
+    }
+  }
+
+  const representativeSources = useMemo(
+    () => buildImageSources(lot?.representativeImage),
+    [buildImageSources, lot?.representativeImage],
+  )
+
+  const cameraStatusSummary = useMemo(() => {
+    if (!shouldSummarize) return []
+    const summaryMap = new Map()
+
+    cameraList.forEach(camera => {
+      const rawLabel = camera?.status ?? 'UNKNOWN'
+      const normalized = normalizeStatusLabel(rawLabel) || 'UNKNOWN'
+      const displayLabel = normalized
+      const current = summaryMap.get(normalized)
+
+      if (current) {
+        current.count += 1
+      } else {
+        summaryMap.set(normalized, {
+          normalized,
+          displayLabel,
+          count: 1,
+        })
+      }
+    })
+
+    return Array.from(summaryMap.values()).sort((a, b) => {
+      const priorityDiff = getStatusPriority(a.normalized) - getStatusPriority(b.normalized)
+      if (priorityDiff !== 0) return priorityDiff
+      if (b.count !== a.count) return b.count - a.count
+      return a.displayLabel.localeCompare(b.displayLabel)
+    })
+  }, [cameraList, shouldSummarize])
+
+  const problematicDetails = useMemo(() => {
+    return cameraList.reduce((accumulator, camera, index) => {
+      const normalizedStatus = normalizeStatusLabel(camera.status)
+      if (normalizedStatus !== 'PASS' && camera.details && camera.details !== '-') {
+        accumulator.push({ camera, index, status: normalizedStatus })
+      }
+      return accumulator
+    }, [])
+  }, [cameraList])
+
+  if (!lot) return null
+
+  const normalizedLotStatus = (lotStatus || '').toString().trim().toUpperCase()
+  const chipColor = normalizedLotStatus === 'PASS'
+    ? 'success'
+    : normalizedLotStatus === 'FAIL'
+      ? 'error'
+      : normalizedLotStatus === 'MISSING'
+        ? 'warning'
+        : 'default'
+  const lotStatusLabel = normalizedLotStatus || '-'
+
+  // ======== 処理ステップ: 代表画像 → 判定概要 → 詳細チップ ========
+  // 1. 代表画像ではhandleImageErrorを紐付けて通信エラー時の視覚欠損を防ぐ。
+  // 2. 判定概要ブロックでロットID・総合結果・要約チップを表示し、問題箇所を一目で把握させる。
+  // 3. 詳細チップ/不良詳細を展開し、showAllCamerasを切り替えて情報量を制御する。
+  return (
+    <Card
+      variant="outlined"
+      sx={{
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        borderColor: isActive ? 'primary.main' : undefined,
+        boxShadow: isActive ? theme => `0 0 0 1px ${theme.palette.primary.main}` : undefined,
+      }}
+    >
+      <CardActionArea
+        sx={{ height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'stretch' }}
+        onClick={onOpen}
+      >
+        <Box
+          sx={{
+            position: 'relative',
+            aspectRatio: '16/9',
+            bgcolor: theme => (theme.palette.mode === 'dark' ? 'grey.900' : 'grey.200'),
+            overflow: 'hidden',
+          }}
+        >
+          <img
+            src={representativeSources.primary}
+            alt={lot.representativeImage ? `${lot.lotId} representative` : 'placeholder'}
+            onError={e => handleImageError(e, representativeSources.fallback)}
+            style={{ width: '100%', height: '100%', objectFit: 'cover', pointerEvents: 'none', userSelect: 'none' }}
+            draggable={false}
+          />
+        </Box>
+        <CardContent sx={{ display: 'flex', flexDirection: 'column', gap: 2, flexGrow: 1, width: '100%' }}>
+          <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', flexWrap: 'wrap', gap: 1.5 }}>
+            <Box>
+              <Typography variant="caption" color="text.secondary">
+                {lot.date} {lot.time}
+              </Typography>
+              <Typography variant="h6" fontWeight="bold">
+                {lot.lotId}
+              </Typography>
+            </Box>
+            <Chip label={lotStatusLabel} color={chipColor} size="small" variant="filled" />
+          </Box>
+          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+            <Typography variant="caption" color="text.secondary">
+              判定要素
+            </Typography>
+            {shouldSummarize && (
+              <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
+                {cameraStatusSummary.map(summary => (
+                  <Chip
+                    key={summary.normalized}
+                    label={`${summary.displayLabel}: ${summary.count}件`}
+                    size="small"
+                    color={getChipColor(summary.displayLabel)}
+                    variant={summary.normalized === 'PASS' ? 'outlined' : 'filled'}
+                  />
+                ))}
+              </Box>
+            )}
+            {showDetailedView && (
+              <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
+                {cameraList.map((camera, index) => {
+                  const normalizedCameraStatus = normalizeStatusLabel(camera.status) || 'UNKNOWN'
+                  const label = resolveDisplayName(camera, index)
+                  const statusLabel = normalizedCameraStatus || 'UNKNOWN'
+
+                  return (
+                    <Chip
+                      key={`${label}-${index}`}
+                      label={`${label}: ${statusLabel}`}
+                      size="small"
+                      color={getChipColor(statusLabel)}
+                      variant={normalizedCameraStatus === 'PASS' ? 'outlined' : 'filled'}
+                    />
+                  )
+                })}
+              </Box>
+            )}
+            {shouldSummarize && (
+              <Button
+                size="small"
+                variant="text"
+                onClick={() => setShowAllCameras(prev => !prev)}
+                sx={{ alignSelf: 'flex-start', mt: 1, px: 0 }}
+              >
+                {showAllCameras ? '概要に戻す' : `詳細を見る (${cameraList.length}項目)`}
+              </Button>
+            )}
+            {showDetailedView && problematicDetails.length > 0 && (
+              <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
+                {problematicDetails.map(({ camera, index, status }) => {
+                  const detailColor = status === 'MISSING' ? 'warning.main' : 'error.main'
+                  const label = resolveDisplayName(camera, index)
+
+                  return (
+                    <Typography key={`${label}-${index}-detail`} variant="caption" color={detailColor}>
+                      {label}: {camera.details}
+                    </Typography>
+                  )
+                })}
+              </Box>
+            )}
+          </Box>
+        </CardContent>
+      </CardActionArea>
+    </Card>
+  )
+}
+
+export default LotCard
diff --git a/javascript-version/src/app/(dashboard)/image-inspection/components/lots/LotInfoSection.jsx b/javascript-version/src/app/(dashboard)/image-inspection/components/lots/LotInfoSection.jsx
new file mode 100644
index 000000000..2f1bf11bc
--- /dev/null
+++ b/javascript-version/src/app/(dashboard)/image-inspection/components/lots/LotInfoSection.jsx
@@ -0,0 +1,257 @@
+/*
+======== ファイル概要 ========
+ロット詳細モーダル内で代表画像プレビュー、サマリー、判定チップをまとめて表示する情報ブロック。
+サマリーの折り畳みや追加サマリーもここで一括制御する。
+*/
+
+import { useCallback, useEffect, useMemo, useState } from 'react'
+
+import Box from '@mui/material/Box'
+import Chip from '@mui/material/Chip'
+import Divider from '@mui/material/Divider'
+import Typography from '@mui/material/Typography'
+import Button from '@mui/material/Button'
+
+import ShotsSummaryBlock from './ShotsSummaryBlock'
+import { normalizeShotSummary } from '../../utils/summaryUtils'
+
+/**
+ * カメラ/シーケンスの表示名を推測する。
+ * @param {object} item - カメラ情報。
+ * @param {number} index - フォールバック用インデックス。
+ * @returns {string} 表示名。
+ */
+const resolveDisplayName = (item, index) => {
+  const candidates = [item?.name, item?.label, item?.camera_id, item?.cameraId, item?.rawSequence]
+  for (const candidate of candidates) {
+    if (candidate === undefined || candidate === null) continue
+    const text = String(candidate).trim()
+    if (!text || text === '-' || text === '--') continue
+    return text
+  }
+  return `#${index + 1}`
+}
+
+const SUMMARY_THRESHOLD = 8
+
+/**
+ * OK/NGを含む判定をPASS/FAILへ揃える。
+ * @param {string} status - 判定。
+ * @returns {string}      正規化結果。
+ */
+const normalizeStatusLabel = status => {
+  const normalized = (status || '').toString().trim().toUpperCase()
+  if (!normalized) return ''
+  if (normalized === 'OK') return 'PASS'
+  if (normalized === 'NG') return 'FAIL'
+  return normalized
+}
+
+/**
+ * サマリーチップを FAIL→MISSING→PASS の順に並べるための優先度。
+ * @param {string} status - 判定。
+ * @returns {number}      並び替え用数値。
+ */
+const getStatusPriority = status => {
+  const normalized = normalizeStatusLabel(status)
+  if (normalized === 'FAIL') return 0
+  if (normalized === 'MISSING') return 1
+  if (normalized === 'PASS') return 2
+  if (normalized === 'UNKNOWN') return 3
+  return 4
+}
+
+/**
+ * ロット情報セクション。代表画像、サマリー、判定チップをまとめたモジュール。
+ * @param {object} props                           - プロパティ集合。
+ * @param {object} props.lot                       - 対象ロット。
+ * @param {{primary:string,fallback:string}} props.representativeSources - プレビュー用URL。
+ * @param {Function} props.handleImageError        - 画像エラー時の処理。
+ * @param {Function} props.setLightbox             - ライトボックス制御関数。
+ * @param {Function} props.getChipColor            - ステータス別カラー取得関数。
+ * @param {Array}   [props.statusItems]            - 明示的に表示するステータス配列。
+ * @param {object}  [props.summary]                - サマリー数値。
+ * @param {Array}   [props.summaryItems]           - サマリー生成用の元配列。
+ * @param {string}  [props.summaryLabel='検査サマリー'] - メインサマリーの見出し。
+ * @param {Array}   [props.additionalSummaries=[]] - 追加サマリー。
+ * @returns {JSX.Element|null}                      レイアウト済みセクション。
+ */
+const LotInfoSection = ({
+  lot,
+  representativeSources,
+  handleImageError,
+  setLightbox,
+  getChipColor,
+  statusItems,
+  summary,
+  summaryItems,
+  summaryLabel = '検査サマリー',
+  additionalSummaries = [],
+}) => {
+  const chips = useMemo(() => {
+    if (Array.isArray(statusItems) && statusItems.length > 0) return statusItems
+    if (lot && Array.isArray(lot.cameras)) return lot.cameras
+    return []
+  }, [lot, statusItems])
+
+  const normalizedAdditionalSummaries = useMemo(
+    () => (Array.isArray(additionalSummaries) ? additionalSummaries : []),
+    [additionalSummaries],
+  )
+
+  const shouldSummarize = chips.length > SUMMARY_THRESHOLD
+  const [showAllChips, setShowAllChips] = useState(false)
+  const showDetailedChips = !shouldSummarize || showAllChips
+
+  useEffect(() => {
+    setShowAllChips(false)
+  }, [lot?.lotId])
+
+  const chipSummary = useMemo(() => {
+    if (!shouldSummarize) return []
+    const summaryMap = new Map()
+
+    chips.forEach(item => {
+      const statusValue = item?.status ?? 'UNKNOWN'
+      const normalized = normalizeStatusLabel(statusValue) || 'UNKNOWN'
+      const displayLabel = normalized
+      const existing = summaryMap.get(normalized)
+
+      if (existing) {
+        existing.count += 1
+      } else {
+        summaryMap.set(normalized, {
+          normalized,
+          displayLabel,
+          count: 1,
+        })
+      }
+    })
+
+    return Array.from(summaryMap.values()).sort((a, b) => {
+      const priorityDiff = getStatusPriority(a.normalized) - getStatusPriority(b.normalized)
+      if (priorityDiff !== 0) return priorityDiff
+      if (b.count !== a.count) return b.count - a.count
+      return a.displayLabel.localeCompare(b.displayLabel)
+    })
+  }, [chips, shouldSummarize])
+
+  const previewSources = useMemo(
+    () => representativeSources || { primary: '', fallback: '' },
+    [representativeSources],
+  )
+
+  const handlePreview = useCallback(() => {
+    if (!setLightbox || !lot) return
+    setLightbox({
+      open: true,
+      src: previewSources.primary,
+      fallback: previewSources.fallback,
+      alt: lot.representativeImage ? `${lot.lotId} representative` : 'placeholder',
+    })
+  }, [lot, previewSources, setLightbox])
+
+  if (!lot) return null
+
+  const summaryBlocks = []
+  const primaryFallbackItems = Array.isArray(summaryItems) ? summaryItems : chips
+  const primarySummary = normalizeShotSummary(summary, primaryFallbackItems)
+  if (primarySummary) {
+    summaryBlocks.push({ label: summaryLabel, data: primarySummary })
+  }
+
+  normalizedAdditionalSummaries.forEach((entry, index) => {
+    const resolved = normalizeShotSummary(entry?.summary, entry?.items)
+    if (resolved) {
+      summaryBlocks.push({ label: entry?.label || `サマリー${index + 1}`, data: resolved })
+    }
+  })
+
+  // ======== 処理ステップ: プレビュー → サマリー → 判定チップ ========
+  // 1. プレビュー画像はライトボックスと連動させ、代表画像の拡大確認を容易にする。
+  // 2. サマリーではprimarySummaryと追加サマリーを横並びで描画し、ショット種別ごとの傾向を比較しやすくする。
+  // 3. 判定チップでは概要→詳細→問題箇所ボタンの順にレイヤー化し、必要なときだけ詳細表示する理由は情報過多を避けるため。
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+      <Box
+        sx={{
+          width: '100%',
+          aspectRatio: '16/9',
+          borderRadius: 2,
+          overflow: 'hidden',
+          bgcolor: theme => (theme.palette.mode === 'dark' ? 'grey.900' : 'grey.200'),
+          cursor: 'zoom-in',
+        }}
+        onClick={handlePreview}
+      >
+        <img
+          src={previewSources.primary}
+          alt={lot.representativeImage ? `${lot.lotId} representative` : 'placeholder'}
+          onError={e => handleImageError(e, previewSources.fallback)}
+          draggable={false}
+          style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+        />
+      </Box>
+
+      {summaryBlocks.length > 0 && (
+        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
+          {summaryBlocks.map((block, index) => (
+            <ShotsSummaryBlock key={block.label || index} title={block.label} summary={block.data} />
+          ))}
+        </Box>
+      )}
+
+      <Divider flexItem />
+
+      <Box>
+        <Typography variant="subtitle2" color="text.secondary" gutterBottom>
+          判定要素
+        </Typography>
+        {shouldSummarize && (
+          <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1, mb: showDetailedChips ? 1.5 : 0 }}>
+            {chipSummary.map(summary => (
+              <Chip
+                key={summary.normalized}
+                label={`${summary.displayLabel}: ${summary.count}件`}
+                size="small"
+                color={getChipColor(summary.displayLabel)}
+                variant={summary.normalized === 'PASS' ? 'outlined' : 'filled'}
+              />
+            ))}
+          </Box>
+        )}
+        {showDetailedChips && (
+          <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
+            {chips.map((item, index) => {
+              const normalizedStatus = normalizeStatusLabel(item?.status) || 'UNKNOWN'
+              const label = resolveDisplayName(item, index)
+              const statusLabel = normalizedStatus || 'UNKNOWN'
+
+              return (
+                <Chip
+                  key={`${label}-${index}`}
+                  label={`${label}: ${statusLabel}`}
+                  size="small"
+                  color={getChipColor(statusLabel)}
+                  variant={normalizedStatus === 'PASS' ? 'outlined' : 'filled'}
+                />
+              )
+            })}
+          </Box>
+        )}
+        {shouldSummarize && (
+          <Button
+            size="small"
+            variant="text"
+            onClick={() => setShowAllChips(prev => !prev)}
+            sx={{ mt: 1.5, px: 0 }}
+          >
+            {showAllChips ? '概要に戻す' : `詳細を見る (${chips.length}項目)`}
+          </Button>
+        )}
+      </Box>
+    </Box>
+  )
+}
+
+export default LotInfoSection
diff --git a/javascript-version/src/app/(dashboard)/image-inspection/components/lots/SectionSummary.jsx b/javascript-version/src/app/(dashboard)/image-inspection/components/lots/SectionSummary.jsx
new file mode 100644
index 000000000..c9cef78de
--- /dev/null
+++ b/javascript-version/src/app/(dashboard)/image-inspection/components/lots/SectionSummary.jsx
@@ -0,0 +1,216 @@
+/*
+======== ファイル概要 ========
+セクションカード内で最新ロットの全体結果とカメラ別チップを一覧表示するサマリー行。
+カメラ数が多い場合は概要→詳細の切り替えも担う。
+*/
+
+import { useEffect, useMemo, useState } from 'react'
+
+import Box from '@mui/material/Box'
+import Chip from '@mui/material/Chip'
+import Typography from '@mui/material/Typography'
+import Button from '@mui/material/Button'
+
+/**
+ * 判定文字列のゆれを吸収して PASS/FAIL/MISSING に統一する。
+ * @param {string} status - 判定。
+ * @returns {string}      正規化済み判定。
+ */
+const normalizeStatus = status => {
+  const normalized = (status || '').toString().trim().toUpperCase()
+  if (!normalized) return ''
+  if (normalized === 'OK') return 'PASS'
+  if (normalized === 'NG') return 'FAIL'
+  return normalized
+}
+
+/**
+ * ステータスに応じたChipカラーを返す。
+ * @param {string} status - 判定。
+ * @returns {'success'|'error'|'warning'|'default'} カラーキー。
+ */
+const cameraChipColor = status => {
+  const normalized = normalizeStatus(status)
+  if (normalized === 'PASS') return 'success'
+  if (normalized === 'FAIL') return 'error'
+  if (normalized === 'MISSING') return 'warning'
+  return 'default'
+}
+
+const SUMMARY_THRESHOLD = 8
+
+/**
+ * FAIL優先で概要チップを並べ替えるための数値。
+ * @param {string} status - 判定。
+ * @returns {number}      並び順。
+ */
+const getStatusPriority = status => {
+  const normalized = normalizeStatus(status)
+  if (normalized === 'FAIL') return 0
+  if (normalized === 'MISSING') return 1
+  if (normalized === 'PASS') return 2
+  if (normalized === 'UNKNOWN') return 3
+  return 4
+}
+
+/**
+ * カメラ/シーケンス名のフォールバックを決める。
+ * @param {object} item - カメラ情報。
+ * @param {number} index - 配列位置。
+ * @returns {string} 表示名。
+ */
+const resolveDisplayName = (item, index) => {
+  const candidates = [item?.name, item?.label, item?.camera_id, item?.cameraId, item?.rawSequence]
+  for (const candidate of candidates) {
+    if (candidate === undefined || candidate === null) continue
+    const text = String(candidate).trim()
+    if (!text || text === '-' || text === '--') continue
+    return text
+  }
+  return `#${index + 1}`
+}
+
+/**
+ * 最新ロットサマリー。左に時刻/ロットID、右に結果とチップ一覧を表示。
+ * @param {object} props            - プロパティ集合。
+ * @param {object} props.latestLot  - 対象ロット。
+ * @param {string} props.lotStatus  - ロット全体ステータス。
+ * @returns {JSX.Element}            サマリー行。
+ */
+const SectionSummary = ({ latestLot, lotStatus }) => {
+  const cameraList = useMemo(() => {
+    if (latestLot && Array.isArray(latestLot.cameras)) return latestLot.cameras
+    return []
+  }, [latestLot])
+
+  const shouldSummarize = cameraList.length > SUMMARY_THRESHOLD
+  const [showAllChips, setShowAllChips] = useState(false)
+  const showDetailedChips = !shouldSummarize || showAllChips
+
+  useEffect(() => {
+    setShowAllChips(false)
+  }, [latestLot?.lotId])
+
+  const normalizedLotStatus = normalizeStatus(lotStatus)
+  const lotStatusColor = normalizedLotStatus === 'PASS'
+    ? 'success.main'
+    : normalizedLotStatus === 'FAIL'
+      ? 'error.main'
+      : normalizedLotStatus === 'MISSING'
+        ? 'warning.main'
+        : 'text.secondary'
+
+  const failedCams = cameraList.filter(c => normalizeStatus(c.status) !== 'PASS')
+
+  const chipSummary = useMemo(() => {
+    if (!shouldSummarize) return []
+    const summaryMap = new Map()
+
+    cameraList.forEach(item => {
+      const statusValue = item?.status ?? 'UNKNOWN'
+      const normalized = normalizeStatus(statusValue) || 'UNKNOWN'
+      const displayLabel = normalized
+      const existing = summaryMap.get(normalized)
+
+      if (existing) {
+        existing.count += 1
+      } else {
+        summaryMap.set(normalized, {
+          normalized,
+          displayLabel,
+          count: 1,
+        })
+      }
+    })
+
+    return Array.from(summaryMap.values()).sort((a, b) => {
+      const priorityDiff = getStatusPriority(a.normalized) - getStatusPriority(b.normalized)
+      if (priorityDiff !== 0) return priorityDiff
+      if (b.count !== a.count) return b.count - a.count
+      return a.displayLabel.localeCompare(b.displayLabel)
+    })
+  }, [cameraList, shouldSummarize])
+
+  if (!latestLot) return <Typography color="text.secondary">本日のロットデータはありません。</Typography>
+
+  // ======== 処理ステップ: 左ブロックで時間情報 → 右ブロックで判定/チップ → 詳細ボタン ========
+  // 1. 左ブロックに時間・ロットIDを置くことで、どの結果か瞬時に遡れる。
+  // 2. 右ブロックではサマリー/詳細チップをFlexで折り返し、結果種別ごとに色分けする。
+  // 3. 詳細ボタンでshowAllChipsを切り替え、PASSが多い場合でもUIが崩れないようにする。
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        gap: 2,
+
+        // 親は折り返さず左右を1行に固定。右側内部のチップのみ折り返す
+        flexWrap: 'nowrap',
+      }}
+    >
+      {/* 左側: 固定幅寄りにして過度に広がらない */}
+      <Box sx={{ flex: '0 0 auto', minWidth: 220 }}>
+        <Typography variant="body2" color="text.secondary">{latestLot.time}</Typography>
+        <Typography variant="h5" fontWeight="bold">{latestLot.lotId}</Typography>
+        {['FAIL', 'MISSING'].includes(normalizedLotStatus) && failedCams.length > 0 && (
+          <Typography variant="body2" color={normalizedLotStatus === 'FAIL' ? 'error.main' : 'warning.main'} sx={{ mt: 0.5 }}>
+            {normalizedLotStatus === 'FAIL' ? '不良' : '要確認'}: {failedCams.map((c, index) => {
+              const label = resolveDisplayName(c, index)
+              const detailText = c?.details && c.details !== '-' ? `（${c.details}）` : ''
+              return `${label}${detailText}`
+            }).join('、')}
+          </Typography>
+        )}
+      </Box>
+      {/* 右側: 余白を受け持ち、内部でチップのみ折り返し */}
+      <Box sx={{ textAlign: 'right', flex: '1 1 0', minWidth: 0 }}>
+        <Typography variant="h4" fontWeight="bold" color={lotStatusColor}>
+          {normalizedLotStatus || '-'}
+        </Typography>
+        {shouldSummarize && (
+          <Box sx={{ display: 'flex', gap: 1, mt: 1, justifyContent: 'flex-end', flexWrap: 'wrap', maxWidth: '100%' }}>
+            {chipSummary.map(summary => (
+              <Chip
+                key={summary.normalized}
+                label={`${summary.displayLabel}: ${summary.count}件`}
+                size="small"
+                color={cameraChipColor(summary.displayLabel)}
+                variant={summary.normalized === 'PASS' ? 'outlined' : 'filled'}
+              />
+            ))}
+          </Box>
+        )}
+        {showDetailedChips && (
+          <Box sx={{ display: 'flex', gap: 1, mt: shouldSummarize ? 1 : 1, justifyContent: 'flex-end', flexWrap: 'wrap', maxWidth: '100%' }}>
+            {cameraList.map((c, i) => {
+              const label = resolveDisplayName(c, i)
+              const statusLabel = normalizeStatus(c?.status) || 'UNKNOWN'
+              return (
+                <Chip
+                  key={`${label}-${i}`}
+                  label={`${label}: ${statusLabel}`}
+                  size="small"
+                  color={cameraChipColor(statusLabel)}
+                  variant={statusLabel === 'PASS' ? 'outlined' : 'filled'}
+                />
+              )
+            })}
+          </Box>
+        )}
+        {shouldSummarize && (
+          <Button
+            size="small"
+            variant="text"
+            onClick={() => setShowAllChips(prev => !prev)}
+            sx={{ mt: 1, px: 0 }}
+          >
+            {showAllChips ? '概要に戻す' : `詳細を見る (${cameraList.length}項目)`}
+          </Button>
+        )}
+      </Box>
+    </Box>
+  )
+}
+
+export default SectionSummary
diff --git a/javascript-version/src/app/(dashboard)/image-inspection/components/lots/ShotsSummaryBlock.jsx b/javascript-version/src/app/(dashboard)/image-inspection/components/lots/ShotsSummaryBlock.jsx
new file mode 100644
index 000000000..fffacb34e
--- /dev/null
+++ b/javascript-version/src/app/(dashboard)/image-inspection/components/lots/ShotsSummaryBlock.jsx
@@ -0,0 +1,113 @@
+/*
+======== ファイル概要 ========
+ショットサマリーをカード状に表示し、総数/良品/不良/進捗バーをひとまとめにする表示ブロック。
+*/
+
+import Box from '@mui/material/Box'
+import Grid from '@mui/material/Grid'
+import LinearProgress from '@mui/material/LinearProgress'
+import Typography from '@mui/material/Typography'
+
+import { alpha } from '@mui/material/styles'
+
+import SurfaceBox from '@/components/surface/SurfaceBox'
+
+/**
+ * 0〜100の範囲に収めた整数パーセンテージを返す。
+ * @param {number} value - 元の値。
+ * @returns {number}     端数切り捨て済みパーセント。
+ */
+const clampPercent = value => {
+  const num = typeof value === 'number' ? value : Number(value)
+  if (!Number.isFinite(num)) return 0
+  if (num < 0) return 0
+  if (num > 100) return 100
+  return Math.round(num)
+}
+
+/**
+ * 撮影サマリーをタイルで表示する。
+ * @param {object} props           - プロパティ集合。
+ * @param {string} [props.title]   - セクションタイトル。
+ * @param {object} props.summary   - total/pass/fail/率を含むオブジェクト。
+ * @returns {JSX.Element|null}      表示内容。
+ */
+const ShotsSummaryBlock = ({ title, summary }) => {
+  if (!summary) return null
+
+  const total = Number.isFinite(summary.total) ? summary.total : 0
+  const okCount = Number.isFinite(summary.okCount) ? summary.okCount : 0
+  const ngCount = Number.isFinite(summary.ngCount) ? summary.ngCount : Math.max(total - okCount, 0)
+  const okRate = clampPercent(summary.okRate)
+  const ngRate = clampPercent(summary.ngRate ?? 100 - okRate)
+
+  // ======== 処理ステップ: KPIカード → 進捗バー → 比率テキスト ========
+  // 1. KPIカードで総数/良品/不良を個別ボックスに分け、数値の比較をしやすくする。
+  // 2. 進捗バーは良率をバーの長さで示し、不良率には背景色を使ってコントラストを取る。
+  // 3. 比率テキストで最終的なパーセンテージを示し、バー見ただけでは分からない正確値を補う。
+  return (
+    <Box sx={{ '& + &': { mt: 3 } }}>
+      {title ? (
+        <Typography variant="subtitle2" color="text.secondary" gutterBottom>
+          {title}
+        </Typography>
+      ) : null}
+      <Grid container spacing={1.5}>
+        <Grid item xs={4}>
+          <SurfaceBox variant="soft" sx={{ p: 1.5, borderRadius: 1 }}>
+            <Typography variant="caption" color="text.secondary">
+              総枚数
+            </Typography>
+            <Typography variant="h6" fontWeight="bold">
+              {total}
+            </Typography>
+          </SurfaceBox>
+        </Grid>
+        <Grid item xs={4}>
+          <SurfaceBox variant="soft" sx={{ p: 1.5, borderRadius: 1 }}>
+            <Typography variant="caption" color="text.secondary">
+              良品画像
+            </Typography>
+            <Typography variant="h6" fontWeight="bold" color="success.main">
+              {okCount}
+            </Typography>
+          </SurfaceBox>
+        </Grid>
+        <Grid item xs={4}>
+          <SurfaceBox variant="soft" sx={{ p: 1.5, borderRadius: 1 }}>
+            <Typography variant="caption" color="text.secondary">
+              不良画像
+            </Typography>
+            <Typography variant="h6" fontWeight="bold" color="error.main">
+              {ngCount}
+            </Typography>
+          </SurfaceBox>
+        </Grid>
+      </Grid>
+      <Box sx={{ mt: 2 }}>
+        <LinearProgress
+          variant="determinate"
+          value={okRate}
+          sx={theme => ({
+            height: 8,
+            borderRadius: 4,
+            bgcolor: alpha(theme.palette.error.main, theme.palette.mode === 'dark' ? 0.5 : 0.2),
+            '& .MuiLinearProgress-bar': {
+              backgroundColor: theme.palette.success.main,
+            },
+          })}
+        />
+        <Box sx={{ display: 'flex', justifyContent: 'space-between', mt: 1 }}>
+          <Typography variant="caption" color="success.main">
+            良率 {okRate}%
+          </Typography>
+          <Typography variant="caption" color="error.main">
+            不良率 {ngRate}%
+          </Typography>
+        </Box>
+      </Box>
+    </Box>
+  )
+}
+
+export default ShotsSummaryBlock
diff --git a/javascript-version/src/app/(dashboard)/image-inspection/components/modals/ALayerLotDetailModal.jsx b/javascript-version/src/app/(dashboard)/image-inspection/components/modals/ALayerLotDetailModal.jsx
new file mode 100644
index 000000000..f501e9923
--- /dev/null
+++ b/javascript-version/src/app/(dashboard)/image-inspection/components/modals/ALayerLotDetailModal.jsx
@@ -0,0 +1,791 @@
+/*
+======== ファイル概要 ========
+A層ロットの詳細をモーダルで表示し、4K/FHD撮影マップや代表画像・サマリーを統合的に扱う。
+シーケンス座標の補完や画像フォールバックも含めた高機能モーダル実装。
+*/
+
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+
+import Box from '@mui/material/Box'
+import Button from '@mui/material/Button'
+import Chip from '@mui/material/Chip'
+import Dialog from '@mui/material/Dialog'
+import DialogActions from '@mui/material/DialogActions'
+import DialogContent from '@mui/material/DialogContent'
+import DialogTitle from '@mui/material/DialogTitle'
+import Typography from '@mui/material/Typography'
+
+import { getFallbackImageBase, toAfterTestUrl, toBeforeTestUrl, toImageUrl } from '../../utils/imageUrl'
+import { normalizeShotSummary } from '../../utils/summaryUtils'
+import FourKMapSection from './FourKMapSection'
+import LotInfoSection from '../lots/LotInfoSection'
+
+const fallbackImageBase = getFallbackImageBase()
+const basePath = process.env.NEXT_PUBLIC_BASE_PATH || ''
+const FALLBACK_IMG = `${basePath}/images/pages/CameraNotFound.png`
+const MIN_GRID_ROWS = 5
+const MIN_GRID_COLS = 4
+
+/**
+ * 画像パス文字列から余分なスラッシュを取り除き、絶対/相対を正規化する。
+ * @param {string} path - 元のパス。
+ * @returns {string|null} 正規化結果。
+ */
+const normalizeRelativePath = path => {
+  if (!path) return null
+  const trimmed = String(path).trim()
+  if (!trimmed) return null
+  if (/^https?:\/\//i.test(trimmed)) return trimmed
+  const cleaned = trimmed.replace(/\/{2,}/g, '/')
+  return cleaned.startsWith('/') ? cleaned : `/${cleaned}`
+}
+
+/**
+ * OK/NGのような表記をPASS/FAIL/MISSINGへ統一する。
+ * @param {string} status - 判定。
+ * @returns {string}      正規化結果。
+ */
+const normalizeStatusLabel = status => {
+  const normalized = (status || '').toString().trim().toUpperCase()
+  if (normalized === 'OK') return 'PASS'
+  if (normalized === 'NG') return 'FAIL'
+  return normalized
+}
+
+/**
+ * ロット全体のChipカラーを算出する。
+ * @param {string} status - 判定。
+ * @returns {'success'|'error'|'warning'|'default'} 色キー。
+ */
+const getLotStatusColor = status => {
+  const normalized = normalizeStatusLabel(status)
+  if (normalized === 'PASS') return 'success'
+  if (normalized === 'FAIL') return 'error'
+  if (normalized === 'MISSING') return 'warning'
+  return 'default'
+}
+
+/**
+ * 個別チップ表示用のカラーを返す。
+ * @param {string} status - 判定。
+ * @returns {'success'|'error'|'warning'|'default'} 色キー。
+ */
+const getChipColor = status => {
+  const normalized = normalizeStatusLabel(status)
+  if (normalized === 'PASS') return 'success'
+  if (normalized === 'FAIL') return 'error'
+  if (normalized === 'MISSING') return 'warning'
+  return 'default'
+}
+
+/**
+ * ショットカードに使う色指定を返す。
+ * @param {string} status - 判定。
+ * @returns {'success'|'error'|'warning'|'default'} 色キー。
+ */
+const getShotStatusColor = status => {
+  const normalized = normalizeStatusLabel(status)
+  if (normalized === 'PASS') return 'success'
+  if (normalized === 'FAIL') return 'error'
+  if (normalized === 'MISSING') return 'warning'
+  return 'default'
+}
+
+/**
+ * Excel風の列記法(A,B...AA)を0始まりインデックスへ変換する。
+ * @param {string} letters - 行ラベル。
+ * @returns {number}        0始まりインデックス。
+ */
+const toRowIndex = letters => {
+  return letters.split('').reduce((acc, char) => acc * 26 + (char.charCodeAt(0) - 64), 0) - 1
+}
+
+/**
+ * 0始まりインデックスをExcel風ラベルへ戻す。
+ * @param {number} index - 行インデックス。
+ * @returns {string}      ラベル文字列。
+ */
+const fromRowIndex = index => {
+  if (!Number.isFinite(index) || index < 0) return ''
+  let value = Math.floor(index) + 1
+  let label = ''
+
+  while (value > 0) {
+    const remainder = (value - 1) % 26
+    label = String.fromCharCode(65 + remainder) + label
+    value = Math.floor((value - 1) / 26)
+  }
+
+  return label
+}
+
+/**
+ * A-12 のようなシーケンスを構造化情報へ分解する。
+ * @param {string} value - 元の表記。
+ * @returns {object|null} 行列ラベルとインデックスを含む情報。
+ */
+const parseShotSequence = value => {
+  if (!value) return null
+  const raw = String(value).trim().toUpperCase()
+  if (!raw) return null
+  const match = raw.match(/^([A-Z]+)[-_]?(\d+)$/)
+  if (!match) return null
+  const [, rowLabel, colLabelRaw] = match
+  const colNumber = parseInt(colLabelRaw, 10)
+  if (!Number.isFinite(colNumber) || colNumber <= 0) return null
+  const rowIndex = toRowIndex(rowLabel)
+  if (rowIndex < 0) return null
+  return {
+    raw,
+    label: `${rowLabel}-${colNumber}`,
+    rowLabel,
+    colLabel: String(colNumber),
+    rowIndex,
+    colIndex: colNumber - 1,
+  }
+}
+
+/**
+ * 実データがスカスカな場合でも一定行数のグリッドを保つために不足分を補完する。
+ * @param {Array} currentRows - 既存行。
+ * @param {number} [minCount=MIN_GRID_ROWS] - 最低行数。
+ * @returns {Array} 補完後行配列。
+ */
+const ensureRowCoverage = (currentRows, minCount = MIN_GRID_ROWS) => {
+  if (currentRows.length === 0) {
+    const baseRows = []
+    for (let idx = 0; idx < minCount; idx += 1) {
+      baseRows.push({ label: fromRowIndex(idx), index: idx, placeholder: true })
+    }
+    return baseRows
+  }
+
+  const rowsByIndex = new Map(currentRows.map(row => [row.index, row]))
+  const startIndex = currentRows[0].index
+  const maxIndex = currentRows[currentRows.length - 1].index
+  let endIndex = Math.max(maxIndex, startIndex + minCount - 1)
+  const result = []
+
+  for (let idx = startIndex; idx <= endIndex; idx += 1) {
+    const existing = rowsByIndex.get(idx)
+    if (existing) {
+      result.push(existing)
+    } else {
+      result.push({ label: fromRowIndex(idx), index: idx, placeholder: true })
+    }
+  }
+
+  while (result.length < minCount) {
+    endIndex += 1
+    result.push({ label: fromRowIndex(endIndex), index: endIndex, placeholder: true })
+  }
+
+  return result
+}
+
+/**
+ * 列方向の不足を補完して均一なマップを保つ。
+ * @param {Array} currentCols - 既存列。
+ * @param {number} [minCount=MIN_GRID_COLS] - 最低列数。
+ * @returns {Array} 補完後列配列。
+ */
+const ensureColCoverage = (currentCols, minCount = MIN_GRID_COLS) => {
+  if (currentCols.length === 0) {
+    const baseCols = []
+    for (let idx = 0; idx < minCount; idx += 1) {
+      baseCols.push({ label: String(idx + 1), index: idx, placeholder: true })
+    }
+    return baseCols
+  }
+
+  const colsByIndex = new Map(currentCols.map(col => [col.index, col]))
+  const startIndex = currentCols[0].index
+  const maxIndex = currentCols[currentCols.length - 1].index
+  let endIndex = Math.max(maxIndex, startIndex + minCount - 1)
+  const result = []
+
+  for (let idx = startIndex; idx <= endIndex; idx += 1) {
+    const existing = colsByIndex.get(idx)
+    if (existing) {
+      result.push(existing)
+    } else {
+      result.push({ label: String(idx + 1), index: idx, placeholder: true })
+    }
+  }
+
+  while (result.length < minCount) {
+    endIndex += 1
+    result.push({ label: String(endIndex + 1), index: endIndex, placeholder: true })
+  }
+
+  return result
+}
+
+/**
+ * ショット配列から行列ラベルおよびセル構造を生成する。
+ * @param {Array} shots - 撮影結果配列。
+ * @param {object} [options] - シーケンス抽出方法など。
+ * @returns {object} rows/cols/cells を含む構造体。
+ */
+const buildGridStructure = (shots, options = {}) => {
+  const {
+    sequenceExtractor = shot => shot?.['c4k_seq'] ?? shot?.four_k_seq ?? shot?.seq,
+    minRows = MIN_GRID_ROWS,
+    minCols = MIN_GRID_COLS,
+  } = options
+
+  const entries = (shots || [])
+    .map(shot => {
+      const seqValue = sequenceExtractor(shot)
+      const parsed = parseShotSequence(seqValue)
+      if (!parsed) return null
+      return { shot, sequence: parsed }
+    })
+    .filter(Boolean)
+
+  const rowMap = new Map()
+  const colMap = new Map()
+  const cellMap = new Map()
+
+  entries.forEach(({ sequence, shot }) => {
+    if (!rowMap.has(sequence.rowLabel)) {
+      rowMap.set(sequence.rowLabel, { label: sequence.rowLabel, index: sequence.rowIndex })
+    }
+    if (!colMap.has(sequence.colLabel)) {
+      colMap.set(sequence.colLabel, { label: sequence.colLabel, index: sequence.colIndex })
+    }
+    const existing = cellMap.get(sequence.label)
+    if (existing) {
+      existing.shots.push(shot)
+    } else {
+      cellMap.set(sequence.label, { sequence, shots: [shot] })
+    }
+  })
+
+  let rows = Array.from(rowMap.values()).sort((a, b) => a.index - b.index)
+  let cols = Array.from(colMap.values()).sort((a, b) => a.index - b.index)
+
+  rows = ensureRowCoverage(rows, minRows)
+  cols = ensureColCoverage(cols, minCols)
+
+  const cells = []
+  cells.push({ type: 'corner', key: 'corner' })
+  cols.forEach(col => {
+    cells.push({ type: 'colHeader', key: `col-${col.label}`, col })
+  })
+  rows.forEach(row => {
+    cells.push({ type: 'rowHeader', key: `row-${row.label}`, row })
+    cols.forEach(col => {
+      const label = `${row.label}-${col.label}`
+      const entry = cellMap.get(label) || null
+      cells.push({ type: 'cell', key: `cell-${label}`, row, col, entry })
+    })
+  })
+
+  return {
+    rows,
+    cols,
+    cells,
+    hasEntries: entries.length > 0,
+  }
+}
+
+const STATUS_PRIORITY = ['FAIL', 'MISSING', 'PASS']
+/**
+ * FAIL優先で複数ショットから代表画像を選定する。
+ * @param {Array} shots - ショット配列。
+ * @returns {object|null} 代表ショット。
+ */
+const pickRepresentativeShot = shots => {
+  if (!Array.isArray(shots) || shots.length === 0) return null
+  const normalized = shots
+    .map(shot => {
+      const status = normalizeStatusLabel(shot?.status)
+      const priority = STATUS_PRIORITY.indexOf(status)
+      return {
+        shot,
+        priority: priority >= 0 ? priority : STATUS_PRIORITY.length,
+      }
+    })
+    .sort((a, b) => a.priority - b.priority)
+
+  return normalized[0]?.shot || shots[0]
+}
+
+/**
+ * A層ロット詳細モーダル。4K/FHDマップ、代表画像、サマリー、ショット読み込みを統合する。
+ * @param {object} props                      - プロパティ集合。
+ * @param {boolean} props.open                - モーダル開閉。
+ * @param {object} props.lot                  - ロット情報。
+ * @param {string} props.lotStatus            - ロット判定。
+ * @param {Array} props.shots4k               - 4Kショット配列。
+ * @param {string} [props.shotsStatus='success'] - 4Kデータ取得状態。
+ * @param {object} [props.shots4kSummary]     - 4Kサマリーデータ。
+ * @param {Function} props.onClose            - 閉じるハンドラ。
+ * @param {Function} props.setLightbox        - ライトボックス制御。
+ * @returns {JSX.Element|null}                 モーダル要素。
+ */
+const ALayerLotDetailModal = ({ open, lot, lotStatus, shots4k, shotsStatus = 'success', shots4kSummary, onClose, setLightbox }) => {
+  const normalizedLotStatus = (lotStatus || '').toString().trim().toUpperCase()
+  const sequenceStatusItems = useMemo(() => {
+    if (!Array.isArray(shots4k) || shots4k.length === 0) return []
+
+    const priorityOf = status => {
+      const normalized = normalizeStatusLabel(status)
+      const index = STATUS_PRIORITY.indexOf(normalized)
+      return index >= 0 ? index : STATUS_PRIORITY.length
+    }
+
+    const groups = new Map()
+
+    shots4k.forEach(shot => {
+      const seqRaw = shot?.['c4k_seq'] ?? shot?.four_k_seq ?? shot?.seq ?? ''
+      const parsedSequence = parseShotSequence(seqRaw)
+      const labelSource = parsedSequence?.label || (typeof seqRaw === 'string' && seqRaw.trim()) || shot?.camera_id || '-'
+      const label = labelSource || '-'
+      const normalizedStatus = normalizeStatusLabel(shot?.status) || 'UNKNOWN'
+      const detail = shot?.details && shot.details !== '-' ? shot.details : ''
+
+      const existing = groups.get(label)
+      if (!existing) {
+        groups.set(label, {
+          name: label,
+          status: normalizedStatus,
+          priority: priorityOf(normalizedStatus),
+          details: detail ? [detail] : [],
+        })
+      } else {
+        const currentPriority = existing.priority
+        const nextPriority = priorityOf(normalizedStatus)
+        if (nextPriority < currentPriority) {
+          existing.status = normalizedStatus
+          existing.priority = nextPriority
+        }
+        if (detail && !existing.details.includes(detail)) {
+          existing.details.push(detail)
+        }
+      }
+    })
+
+    return Array.from(groups.values())
+      .sort((a, b) => a.name.localeCompare(b.name, undefined, { numeric: true, sensitivity: 'base' }))
+      .map(item => ({
+        name: item.name,
+        status: item.status,
+        details: item.details[0] || '',
+      }))
+  }, [shots4k])
+  const buildImageSources = useCallback((path) => {
+    const normalized = normalizeRelativePath(path)
+    if (!normalized) return { primary: FALLBACK_IMG, fallback: '' }
+    const primary = toImageUrl(normalized)
+    const fallback = fallbackImageBase ? toImageUrl(normalized, { base: fallbackImageBase }) : ''
+    return {
+      primary: primary || FALLBACK_IMG,
+      fallback: fallback && fallback !== primary ? fallback : '',
+    }
+  }, [])
+
+  const buildShotSources = useCallback((shot) => {
+    if (!shot) return { primary: FALLBACK_IMG, fallback: '' }
+    const normalized = normalizeRelativePath(shot.image_path)
+    if (!normalized) return { primary: FALLBACK_IMG, fallback: '' }
+    const status = (shot.status || '').toString().toUpperCase()
+    const hasFallbackBase = Boolean(fallbackImageBase)
+
+    const buildPair = builder => {
+      const primaryCandidate = builder(normalized)
+      const fallbackCandidate = hasFallbackBase ? builder(normalized, { base: fallbackImageBase }) : ''
+      return { primary: primaryCandidate, fallback: fallbackCandidate }
+    }
+
+    const ensureUrl = pair => {
+      if (pair.primary) return pair
+      return buildPair((path, options) => toImageUrl(path, options))
+    }
+
+    let pair
+    if (status === 'MISSING') {
+      pair = ensureUrl(buildPair((path, options) => toBeforeTestUrl(path, options)))
+    } else if (status === 'PASS' || status === 'FAIL') {
+      pair = ensureUrl(buildPair((path, options) => toAfterTestUrl(path, options)))
+    } else {
+      pair = ensureUrl(buildPair((path, options) => toImageUrl(path, options)))
+    }
+
+    const primary = pair.primary || FALLBACK_IMG
+    const fallback = pair.fallback && pair.fallback !== primary ? pair.fallback : ''
+
+    return { primary, fallback }
+  }, [])
+
+  const handleImageError = (event, fallbackSrc) => {
+    const target = event.currentTarget
+    if (fallbackSrc && !target.dataset.fallbackTried) {
+      target.dataset.fallbackTried = 'true'
+      target.src = fallbackSrc
+    } else if (target.src !== FALLBACK_IMG) {
+      target.src = FALLBACK_IMG
+    }
+  }
+
+  const representativeSources = useMemo(
+    () => buildImageSources(lot?.representativeImage),
+    [buildImageSources, lot?.representativeImage],
+  )
+
+  const gridStructure = useMemo(
+    () => buildGridStructure(shots4k, { sequenceExtractor: shot => shot?.['c4k_seq'] ?? shot?.four_k_seq ?? shot?.seq }),
+    [shots4k],
+  )
+
+  const [selectedSequence, setSelectedSequence] = useState(null)
+  const [fhdShots, setFhdShots] = useState([])
+  const [fhdStatus, setFhdStatus] = useState('idle')
+  const [fhdError, setFhdError] = useState('')
+  const [fhdSummary, setFhdSummary] = useState(null)
+  const fhdCacheRef = useRef(new Map())
+  const fhdAbortRef = useRef(null)
+
+  const fhdGridStructure = useMemo(
+    () => buildGridStructure(fhdShots, { sequenceExtractor: shot => shot?.fhd_seq ?? shot?.seq }),
+    [fhdShots],
+  )
+
+  const normalizedShotsStatus = useMemo(() => {
+    if (shotsStatus === 'error') return 'error'
+    if (Array.isArray(shots4k) && shots4k.length > 0) return 'success'
+    if (shotsStatus === 'success') return 'success'
+    if (shotsStatus === 'loading') return 'loading'
+    return 'loading'
+  }, [shotsStatus, shots4k])
+
+  const normalizedFhdStatus = useMemo(() => {
+    if (!selectedSequence) return 'idle'
+    if (fhdStatus === 'error') return 'error'
+    if (Array.isArray(fhdShots) && fhdShots.length > 0) return 'success'
+    if (fhdStatus === 'success') return 'success'
+    if (fhdStatus === 'loading') return 'loading'
+    return 'loading'
+  }, [selectedSequence, fhdStatus, fhdShots])
+
+  const handleResetFhdState = useCallback(() => {
+    setSelectedSequence(null)
+    setFhdShots([])
+    setFhdStatus('idle')
+    setFhdError('')
+    setFhdSummary(null)
+    if (fhdAbortRef.current) {
+      fhdAbortRef.current.abort()
+      fhdAbortRef.current = null
+    }
+  }, [])
+
+  useEffect(() => {
+    if (!open) {
+      handleResetFhdState()
+    }
+  }, [open, handleResetFhdState])
+
+  useEffect(() => {
+    fhdCacheRef.current = new Map()
+    handleResetFhdState()
+  }, [lot?.lotId, handleResetFhdState])
+
+  useEffect(() => () => {
+    if (fhdAbortRef.current) {
+      fhdAbortRef.current.abort()
+      fhdAbortRef.current = null
+    }
+  }, [])
+
+  useEffect(() => {
+    if (!open) return
+
+    if (shots4k == null) {
+      console.error('[ALayerLotDetailModal] shots4k が null または undefined です', {
+        lotId: lot?.lotId,
+        shots4k,
+      })
+      return
+    }
+
+    if (!Array.isArray(shots4k)) {
+      console.error('[ALayerLotDetailModal] shots4k は配列ではありません', {
+        lotId: lot?.lotId,
+        type: typeof shots4k,
+        shots4k,
+      })
+      return
+    }
+
+    if (shots4k.length === 0) {
+      console.warn('[ALayerLotDetailModal] shots4k 配列が空です', {
+        lotId: lot?.lotId,
+      })
+      return
+    }
+
+    if (Array.isArray(shots4k) && shots4k.length > 0 && !gridStructure.hasEntries) {
+      const invalidShots = shots4k
+        .map(shot => {
+          const seqValue = shot?.['c4k_seq'] ?? shot?.four_k_seq ?? shot?.seq
+          const parsed = parseShotSequence(seqValue)
+          if (parsed) return null
+          return {
+            seqValue,
+            shot,
+          }
+        })
+        .filter(Boolean)
+
+      console.error('[ALayerLotDetailModal] 4K グリッド構造の構築に失敗しました', {
+        lotId: lot?.lotId,
+        shotsCount: shots4k.length,
+        invalidShotCount: invalidShots.length,
+        invalidShots,
+      })
+    }
+  }, [open, shots4k, lot?.lotId, gridStructure.hasEntries])
+
+  useEffect(() => {
+    if (!selectedSequence || !lot?.lotId) return
+
+    const sequenceLabel = selectedSequence.label
+    if (!sequenceLabel) return
+
+    const cacheKey = `${lot.lotId}::${sequenceLabel}`
+    const cached = fhdCacheRef.current.get(cacheKey)
+    if (cached) {
+      setFhdShots(cached.shots)
+      setFhdStatus('success')
+      setFhdError('')
+      setFhdSummary(cached.summary || normalizeShotSummary(null, cached.shots))
+      return
+    }
+
+    const base = process.env.NEXT_PUBLIC_BASE_PATH || ''
+    const controller = new AbortController()
+    if (fhdAbortRef.current) {
+      fhdAbortRef.current.abort()
+    }
+    fhdAbortRef.current = controller
+
+    const fetchFhdShots = async () => {
+      try {
+        setFhdStatus('loading')
+        setFhdError('')
+        setFhdShots([])
+        setFhdSummary(null)
+        const res = await fetch(
+          `${base}/api/inspections/lots/${encodeURIComponent(lot.lotId)}/shots/FHD/${encodeURIComponent(sequenceLabel)}`,
+          { signal: controller.signal },
+        )
+        if (!res.ok) {
+          throw new Error(`HTTP ${res.status}`)
+        }
+        const data = await res.json()
+        const shots = Array.isArray(data?.shots) ? data.shots : []
+        const summary = normalizeShotSummary(data?.summary, shots)
+        setFhdShots(shots)
+        setFhdStatus('success')
+        setFhdSummary(summary)
+        fhdCacheRef.current.set(cacheKey, { shots, summary, fetchedAt: Date.now() })
+      } catch (error) {
+        if (controller.signal.aborted) return
+        console.error('[ALayerLotDetailModal] FHD ショットの取得に失敗しました', {
+          lotId: lot?.lotId,
+          sequence: sequenceLabel,
+          error,
+        })
+        setFhdStatus('error')
+        setFhdError(error?.message || '不明なエラー')
+        setFhdShots([])
+        setFhdSummary(null)
+      } finally {
+        if (fhdAbortRef.current === controller) {
+          fhdAbortRef.current = null
+        }
+      }
+    }
+
+    fetchFhdShots()
+
+    return () => {
+      controller.abort()
+    }
+  }, [selectedSequence, lot?.lotId])
+
+  useEffect(() => {
+    if (!selectedSequence || normalizedFhdStatus !== 'success') return
+    const invalidFhdShots = (fhdShots || [])
+      .map(shot => {
+        const parsed = parseShotSequence(shot?.fhd_seq ?? shot?.seq)
+        if (parsed) return null
+        return { shot }
+      })
+      .filter(Boolean)
+
+    if (invalidFhdShots.length > 0) {
+      console.warn('[ALayerLotDetailModal] FHD グリッド構築で無効なシーケンスが検出されました', {
+        lotId: lot?.lotId,
+        sequence: selectedSequence.label,
+        count: invalidFhdShots.length,
+        invalidFhdShots,
+      })
+    }
+  }, [selectedSequence, normalizedFhdStatus, fhdShots, lot?.lotId])
+
+  const isShowingFhd = Boolean(selectedSequence)
+  const activeMapStructure = isShowingFhd ? fhdGridStructure : gridStructure
+  const activeStatus = isShowingFhd ? normalizedFhdStatus : normalizedShotsStatus
+  const selectedFourKShot = selectedSequence ? pickRepresentativeShot(selectedSequence.shots || []) : null
+  const fhdSubtitle = useMemo(() => {
+    if (!selectedSequence) return ''
+    const parts = [`4Kシーケンス: ${selectedSequence.label}`]
+    if (selectedFourKShot?.camera_id) parts.push(`カメラ: ${selectedFourKShot.camera_id}`)
+    if (selectedFourKShot?.status) parts.push(`結果: ${selectedFourKShot.status}`)
+    if (Array.isArray(selectedSequence.shots) && selectedSequence.shots.length > 1) {
+      parts.push(`4K撮影枚数: ${selectedSequence.shots.length}`)
+    }
+    return parts.join(' / ')
+  }, [selectedSequence, selectedFourKShot])
+
+  const lotSummaryForDisplay = useMemo(
+    () => normalizeShotSummary(shots4kSummary, shots4k),
+    [shots4kSummary, shots4k],
+  )
+
+  const fhdSummaryForDisplay = useMemo(
+    () => normalizeShotSummary(fhdSummary, fhdShots),
+    [fhdSummary, fhdShots],
+  )
+
+  const lotInfoSummaryLabel = useMemo(() => {
+    if (isShowingFhd) {
+      return selectedSequence ? `FHDサマリー（${selectedSequence.label}）` : 'FHDサマリー'
+    }
+    return '4Kサマリー'
+  }, [isShowingFhd, selectedSequence])
+
+  const lotInfoSummary = isShowingFhd ? fhdSummaryForDisplay : lotSummaryForDisplay
+  const lotInfoSummaryItems = isShowingFhd ? fhdShots : shots4k
+
+  const handleSelectSequence = useCallback((entry) => {
+    if (!entry?.sequence) return
+    setSelectedSequence(prev => {
+      if (prev?.label === entry.sequence.label) return prev
+      return {
+        label: entry.sequence.label,
+        sequence: entry.sequence,
+        shots: Array.isArray(entry.shots) ? entry.shots : [],
+      }
+    })
+  }, [])
+
+  const handleBackToMap = useCallback(() => {
+    handleResetFhdState()
+  }, [handleResetFhdState])
+
+  // ======== 描画ガード ========
+  // ロット情報が取得できない場合はヘッダやサマリーの前提が崩れるため描画を打ち切る
+  if (!lot) return null
+
+  return (
+    // ======== モーダル全体の骨組みを構築 ========
+    // fullWidth + maxWidth="xl" で詳細パネルと撮影マップを横並びに見せる
+    <Dialog open={open} onClose={onClose} fullWidth maxWidth="xl">
+      <DialogTitle>
+        <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 2 }}>
+          <Box>
+            <Typography variant="caption" color="text.secondary">
+              {lot.date} {lot.time}
+            </Typography>
+            <Typography variant="h5" fontWeight="bold">
+              {lot.lotId}
+            </Typography>
+          </Box>
+          <Chip label={normalizedLotStatus || '-'} color={getLotStatusColor(normalizedLotStatus)} size="small" variant="filled" />
+        </Box>
+      </DialogTitle>
+      {/* ======== 本文は2カラム構成 ======== */}
+      {/* 左列はLot情報、右列は4K/FHDマップを担保するため余白や高さを厳密に制御 */}
+      <DialogContent
+        dividers
+        sx={{
+          p: 0,
+        }}
+      >
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: { xs: 'column', md: 'row' },
+            alignItems: 'stretch',
+            gap: { xs: 4, md: 6 },
+            p: { xs: 4, md: 6 },
+            height: { md: '70vh' },
+            boxSizing: 'border-box',
+          }}
+        >
+          {/* ======== 左列: Lot概要とサマリー ======== */}
+          <Box
+            sx={{
+              flexBasis: { md: '40%' },
+              flexShrink: 0,
+              alignSelf: 'flex-start',
+            }}
+          >
+            <LotInfoSection
+              lot={lot}
+              representativeSources={representativeSources}
+              handleImageError={handleImageError}
+              setLightbox={setLightbox}
+              getChipColor={getChipColor}
+              statusItems={sequenceStatusItems}
+              summary={lotInfoSummary}
+              summaryItems={lotInfoSummaryItems}
+              summaryLabel={lotInfoSummaryLabel}
+            />
+          </Box>
+
+          {/* ======== 右列: 撮影マップビュー ======== */}
+          <Box
+            sx={{
+              flexGrow: 1,
+              minHeight: 0,
+              overflowY: { xs: 'visible', md: 'auto' },
+              pr: { md: 1 },
+            }}
+          >
+            {/* FHD表示時は戻りボタンや字幕を付与し、4K時はシーケンス選択を許可 */}
+            <FourKMapSection
+              title={isShowingFhd ? 'FHD 撮影マップ' : '4K 撮影マップ'}
+              subtitle={isShowingFhd ? fhdSubtitle : undefined}
+              status={activeStatus}
+              loadingMessage={isShowingFhd ? 'FHDデータを取得中です…' : '詳細データを取得中です…'}
+              errorMessage={isShowingFhd ? (fhdError ? `FHDデータの取得に失敗しました: ${fhdError}` : 'FHDデータの取得に失敗しました。') : '詳細データの取得に失敗しました。'}
+              emptyMessage={isShowingFhd ? '該当するFHDショットがありません。' : '該当する4Kショットがありません。'}
+              placeholderLabel={isShowingFhd ? '未取得' : '未取得'}
+              gridStructure={activeMapStructure}
+              buildShotSources={buildShotSources}
+              getShotStatusColor={getShotStatusColor}
+              handleImageError={handleImageError}
+              setLightbox={setLightbox}
+              onSelectSequence={isShowingFhd ? undefined : handleSelectSequence}
+              selectedSequenceLabel={selectedSequence?.label}
+              onBack={isShowingFhd ? handleBackToMap : undefined}
+              highlightSelected={!isShowingFhd}
+            />
+          </Box>
+        </Box>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose} color="inherit">
+          閉じる
+        </Button>
+      </DialogActions>
+    </Dialog>
+  )
+}
+
+export default ALayerLotDetailModal
diff --git a/javascript-version/src/app/(dashboard)/image-inspection/components/modals/FourKMapSection.jsx b/javascript-version/src/app/(dashboard)/image-inspection/components/modals/FourKMapSection.jsx
new file mode 100644
index 000000000..e7a32474d
--- /dev/null
+++ b/javascript-version/src/app/(dashboard)/image-inspection/components/modals/FourKMapSection.jsx
@@ -0,0 +1,416 @@
+/*
+======== ファイル概要 ========
+4K/FHD撮影マップをグリッド表示し、シーケンスごとの画像プレビューや選択操作を提供するセクション。
+*/
+
+import Alert from '@mui/material/Alert'
+import Box from '@mui/material/Box'
+import Button from '@mui/material/Button'
+import Chip from '@mui/material/Chip'
+import CircularProgress from '@mui/material/CircularProgress'
+import IconButton from '@mui/material/IconButton'
+import Tooltip from '@mui/material/Tooltip'
+import Typography from '@mui/material/Typography'
+
+import ZoomInIcon from '@mui/icons-material/ZoomIn'
+
+const SQUARE_ASPECT_RATIO = '1 / 1'
+const STATUS_PRIORITY = ['FAIL', 'MISSING', 'PASS']
+
+/**
+ * FAIL→MISSING→PASSの優先度で代表ショットを選定する。
+ * @param {Array} shots - シーケンス内ショット群。
+ * @returns {object|null} 代表ショット。
+ */
+const pickDisplayShot = shots => {
+  if (!Array.isArray(shots) || shots.length === 0) return null
+  const prioritized = shots
+    .map(shot => {
+      const status = (shot?.status || '').toString().toUpperCase()
+      const priorityIndex = STATUS_PRIORITY.indexOf(status)
+      return {
+        shot,
+        priority: priorityIndex >= 0 ? priorityIndex : STATUS_PRIORITY.length,
+      }
+    })
+    .sort((a, b) => a.priority - b.priority)
+
+  return prioritized[0]?.shot || shots[0]
+}
+
+/**
+ * 撮影マップ表示コンポーネント。読み込み/エラー/空状態もここでさばく。
+ * @param {object} props                        - プロパティ集合。
+ * @param {string} [props.title='4K 撮影マップ'] - セクションタイトル。
+ * @param {string} [props.subtitle]             - サブタイトル。
+ * @param {'success'|'loading'|'error'|'idle'} props.status - データ取得状態。
+ * @param {string} [props.loadingMessage]       - ローディング時の文言。
+ * @param {string} [props.errorMessage]         - エラー文言。
+ * @param {string} [props.emptyMessage]         - データ無し時の文言。
+ * @param {string} [props.placeholderLabel]     - 未取得セルの表示。
+ * @param {object} props.gridStructure          - buildGridStructureで生成した構造。
+ * @param {Function} props.buildShotSources     - 画像URLを返す関数。
+ * @param {Function} props.getShotStatusColor   - ステータス別カラー関数。
+ * @param {Function} props.handleImageError     - 画像エラー処理。
+ * @param {Function} [props.setLightbox]        - ライトボックス制御。
+ * @param {Function} [props.onSelectSequence]   - セルクリック時のハンドラ。
+ * @param {string} [props.selectedSequenceLabel]- 選択中シーケンス。
+ * @param {Function} [props.onBack]             - 戻るボタンハンドラ。
+ * @param {boolean} [props.highlightSelected=true] - 選択中セル強調フラグ。
+ * @returns {JSX.Element}                          グリッド表示ブロック。
+ */
+const FourKMapSection = ({
+  title = '4K 撮影マップ',
+  subtitle,
+  status = 'success',
+  loadingMessage = '詳細データを取得中です…',
+  errorMessage = 'データの取得に失敗しました。',
+  emptyMessage = '該当するデータがありません。',
+  placeholderLabel = '未取得',
+  gridStructure,
+  buildShotSources,
+  getShotStatusColor,
+  handleImageError,
+  setLightbox,
+  onSelectSequence,
+  selectedSequenceLabel,
+  onBack,
+  highlightSelected = true,
+}) => {
+  const canPreview = Boolean(setLightbox)
+
+  const handlePreview = (sources, alt) => {
+    if (!setLightbox) return
+    setLightbox({
+      open: true,
+      src: sources.primary,
+      fallback: sources.fallback,
+      alt,
+    })
+  }
+
+  const columnCount = Array.isArray(gridStructure?.cols) ? gridStructure.cols.length : 0
+  const cells = Array.isArray(gridStructure?.cells) ? gridStructure.cells : []
+  const hasEntries = Boolean(gridStructure?.hasEntries)
+
+  const renderContent = () => {
+    if (status === 'error') {
+      return <Alert severity="error">{errorMessage}</Alert>
+    }
+
+    const isLoading = status === 'loading' || status === 'idle'
+    if (isLoading) {
+      return (
+        <Box
+          sx={{
+            flexGrow: 1,
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: 2,
+            color: 'text.secondary',
+          }}
+        >
+          <CircularProgress size={24} thickness={5} />
+          <Typography variant="body2" color="text.secondary">
+            {loadingMessage}
+          </Typography>
+        </Box>
+      )
+    }
+
+    if (!cells.length || columnCount === 0) {
+      return (
+        <Typography variant="body2" color="text.secondary">
+          {emptyMessage}
+        </Typography>
+      )
+    }
+
+    return (
+      <Box sx={{ overflowX: 'auto', flexGrow: 1 }}>
+        {!hasEntries && (
+          <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
+            {emptyMessage}
+          </Typography>
+        )}
+        <Box
+          sx={{
+            display: 'grid',
+            gridTemplateColumns: `80px repeat(${columnCount}, minmax(160px, 1fr))`,
+            gap: 2,
+            alignItems: 'stretch',
+            minWidth: `${80 + columnCount * 180}px`,
+          }}
+        >
+          {cells.map(cell => {
+            if (cell.type === 'corner') {
+              return <Box key={cell.key} />
+            }
+
+            if (cell.type === 'colHeader') {
+              return (
+                <Box key={cell.key} sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+                  <Typography variant="subtitle2" fontWeight="bold">
+                    {cell.col.label}
+                  </Typography>
+                </Box>
+              )
+            }
+
+            if (cell.type === 'rowHeader') {
+              return (
+                <Box key={cell.key} sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+                  <Typography variant="subtitle2" fontWeight="bold">
+                    {cell.row.label}
+                  </Typography>
+                </Box>
+              )
+            }
+
+            const entry = cell.entry
+            if (!entry) {
+              return (
+                <Box
+                  key={cell.key}
+                  sx={{
+                    position: 'relative',
+                    width: '100%',
+                    aspectRatio: SQUARE_ASPECT_RATIO,
+                    cursor: onSelectSequence ? 'not-allowed' : 'default',
+                  }}
+                >
+                  <Box
+                    sx={{
+                      position: 'absolute',
+                      inset: 0,
+                      border: theme => `1px dashed ${theme.palette.divider}`,
+                      borderRadius: 2,
+                      p: 1.5,
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      bgcolor: theme => (theme.palette.mode === 'dark' ? 'grey.900' : 'grey.100'),
+                    }}
+                  >
+                    <Typography variant="caption" color="text.secondary">
+                      {placeholderLabel}
+                    </Typography>
+                  </Box>
+                </Box>
+              )
+            }
+
+            const displayShot = pickDisplayShot(entry.shots)
+            const sequence = entry.sequence
+            const isActive = Boolean(highlightSelected && selectedSequenceLabel && sequence?.label === selectedSequenceLabel)
+            const handleCellClick = () => {
+              if (!onSelectSequence) return
+              onSelectSequence(entry)
+            }
+
+            if (!displayShot) {
+              return (
+                <Box
+                  key={cell.key}
+                  sx={{
+                    position: 'relative',
+                    width: '100%',
+                    aspectRatio: SQUARE_ASPECT_RATIO,
+                    cursor: onSelectSequence ? 'pointer' : 'default',
+                  }}
+                  onClick={handleCellClick}
+                >
+                  <Box
+                    sx={{
+                      position: 'absolute',
+                      inset: 0,
+                      border: theme => `1px dashed ${theme.palette.divider}`,
+                      borderRadius: 2,
+                      p: 1.5,
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      bgcolor: theme => (theme.palette.mode === 'dark' ? 'grey.900' : 'grey.100'),
+                    }}
+                  >
+                    <Typography variant="caption" color="text.secondary">
+                      {placeholderLabel}
+                    </Typography>
+                  </Box>
+                </Box>
+              )
+            }
+
+            const sources = buildShotSources(displayShot)
+            const statusColor = getShotStatusColor(displayShot.status)
+            const metaParts = []
+            if (displayShot.camera_id) metaParts.push(`CAM: ${displayShot.camera_id}`)
+            if (displayShot.shot_seq != null) metaParts.push(`${displayShot.shot_seq}枚目`)
+            if (Array.isArray(entry.shots) && entry.shots.length > 1) metaParts.push(`全${entry.shots.length}枚`)
+            const metaLine = metaParts.join(' / ')
+            const altText = displayShot.image_path || sequence.label
+            const chipLabel = Array.isArray(entry.shots) && entry.shots.length > 1
+              ? `${displayShot.status || '-'} / ${entry.shots.length}枚`
+              : displayShot.status || '-'
+            const statusesSummary = Array.isArray(entry.shots)
+              ? entry.shots.map(s => s?.status || '-').join(', ')
+              : ''
+
+            const chipComponent = (
+              <Chip size="small" label={chipLabel} color={statusColor} variant="outlined" />
+            )
+
+            const shouldPreviewOnImageClick = !onSelectSequence && canPreview
+
+            return (
+              <Box
+                key={cell.key}
+                sx={{
+                  position: 'relative',
+                  width: '100%',
+                  aspectRatio: SQUARE_ASPECT_RATIO,
+                  cursor: onSelectSequence ? 'pointer' : 'default',
+                }}
+                onClick={handleCellClick}
+              >
+                <Box
+                  sx={{
+                    position: 'absolute',
+                    inset: 0,
+                    border: theme => `1px solid ${theme.palette.divider}`,
+                    borderColor: theme => (isActive ? theme.palette.primary.main : theme.palette.divider),
+                    borderRadius: 2,
+                    p: 1.5,
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: 1,
+                    bgcolor: theme => (theme.palette.mode === 'dark' ? 'grey.900' : 'grey.50'),
+                    boxShadow: theme => (isActive ? `0 0 0 2px ${theme.palette.primary.main}` : 'none'),
+                    transition: theme => theme.transitions.create(['border-color', 'box-shadow', 'transform'], {
+                      duration: theme.transitions.duration.shortest,
+                    }),
+                    '&:hover': onSelectSequence && highlightSelected
+                      ? {
+                          borderColor: theme => theme.palette.primary.main,
+                          boxShadow: theme => `0 0 0 2px ${theme.palette.primary.main}, ${theme.shadows[2]}`,
+                          transform: 'translateY(-1px)',
+                        }
+                      : undefined,
+                  }}
+                >
+                  <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 1 }}>
+                    <Typography variant="body2" fontWeight="bold">
+                      {sequence.label}
+                    </Typography>
+                    {Array.isArray(entry.shots) && entry.shots.length > 1 ? (
+                      <Tooltip title={`内訳: ${statusesSummary}`} arrow>
+                        <span>{chipComponent}</span>
+                      </Tooltip>
+                    ) : (
+                      chipComponent
+                    )}
+                  </Box>
+                  <Tooltip title={displayShot.image_path || 'ファイルパス未登録'} enterDelay={300} arrow>
+                    <Box
+                      sx={{
+                        position: 'relative',
+                        flexGrow: 1,
+                        minHeight: 0,
+                        borderRadius: 1,
+                        overflow: 'hidden',
+                        bgcolor: theme => (theme.palette.mode === 'dark' ? 'grey.800' : 'grey.200'),
+                        cursor: shouldPreviewOnImageClick ? 'zoom-in' : onSelectSequence ? 'pointer' : 'default',
+                      }}
+                      onClick={shouldPreviewOnImageClick ? (event => {
+                        event.stopPropagation()
+                        handlePreview(sources, altText)
+                      }) : undefined}
+                    >
+                      <img
+                        src={sources.primary}
+                        alt={altText}
+                        onError={e => handleImageError(e, sources.fallback)}
+                        draggable={false}
+                        style={{
+                          width: '100%',
+                          height: '100%',
+                          objectFit: 'cover',
+                          objectPosition: 'center',
+                        }}
+                      />
+                      {canPreview && (
+                        <IconButton
+                          size="small"
+                          sx={{
+                            position: 'absolute',
+                            top: 4,
+                            right: 4,
+                            bgcolor: theme => (theme.palette.mode === 'dark' ? 'rgba(0,0,0,0.4)' : 'rgba(255,255,255,0.7)'),
+                            '&:hover': {
+                              bgcolor: theme => (theme.palette.mode === 'dark' ? 'rgba(0,0,0,0.6)' : 'rgba(255,255,255,0.9)'),
+                            },
+                          }}
+                          onClick={event => {
+                            event.stopPropagation()
+                            handlePreview(sources, altText)
+                          }}
+                        >
+                          <ZoomInIcon fontSize="inherit" />
+                        </IconButton>
+                      )}
+                    </Box>
+                  </Tooltip>
+                  {displayShot.details && (
+                    <Typography variant="caption" color="error.main">
+                      {displayShot.details}
+                    </Typography>
+                  )}
+                  {metaLine && (
+                    <Typography variant="caption" color="text.secondary" sx={{ wordBreak: 'break-all' }}>
+                      {metaLine}
+                    </Typography>
+                  )}
+                </Box>
+              </Box>
+            )
+          })}
+        </Box>
+      </Box>
+    )
+  }
+
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, height: '100%' }}>
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: { xs: 'column', sm: 'row' },
+          alignItems: { xs: 'flex-start', sm: 'center' },
+          justifyContent: 'space-between',
+          gap: 2,
+        }}
+      >
+        <Box>
+          <Typography variant="h6" gutterBottom sx={{ mb: 0 }}>
+            {title}
+          </Typography>
+          {subtitle && (
+            <Typography variant="body2" color="text.secondary">
+              {subtitle}
+            </Typography>
+          )}
+        </Box>
+        {onBack && (
+          <Button size="small" color="primary" onClick={onBack} variant="outlined">
+            4Kマップに戻る
+          </Button>
+        )}
+      </Box>
+      {renderContent()}
+    </Box>
+  )
+}
+
+export default FourKMapSection
diff --git a/javascript-version/src/app/(dashboard)/image-inspection/components/modals/SpringLotDetailModal.jsx b/javascript-version/src/app/(dashboard)/image-inspection/components/modals/SpringLotDetailModal.jsx
new file mode 100644
index 000000000..4ce812aff
--- /dev/null
+++ b/javascript-version/src/app/(dashboard)/image-inspection/components/modals/SpringLotDetailModal.jsx
@@ -0,0 +1,371 @@
+// バネどめ検査 ロット詳細モーダル（ラベル位置統一・色変化対応版）
+
+import { useCallback, useEffect, useMemo, useState } from 'react'
+
+import Box from '@mui/material/Box'
+import Button from '@mui/material/Button'
+import Chip from '@mui/material/Chip'
+import Dialog from '@mui/material/Dialog'
+import DialogActions from '@mui/material/DialogActions'
+import DialogContent from '@mui/material/DialogContent'
+import DialogTitle from '@mui/material/DialogTitle'
+import Table from '@mui/material/Table'
+import TableBody from '@mui/material/TableBody'
+import TableCell from '@mui/material/TableCell'
+import TableHead from '@mui/material/TableHead'
+import TableRow from '@mui/material/TableRow'
+import Typography from '@mui/material/Typography'
+import { useTheme } from '@mui/material/styles'
+
+import { getFallbackImageBase, toAfterTestUrl, toBeforeTestUrl, toImageUrl } from '../../utils/imageUrl'
+import ShotsSummaryBlock from '../lots/ShotsSummaryBlock'
+import { normalizeShotSummary } from '../../utils/summaryUtils'
+
+const fallbackImageBase = getFallbackImageBase()
+const basePath = process.env.NEXT_PUBLIC_BASE_PATH || ''
+const FALLBACK_IMG = `${basePath}/images/pages/CameraNotFound.png`
+
+/**
+ * 画像パスの表記ゆれを取り除き、URL生成に使える形へ整える。
+ * @param {string} path - 元のパス。
+ * @returns {string|null} 正規化結果。
+ */
+const normalizeRelativePath = path => {
+  if (!path) return null
+  const trimmed = String(path).trim()
+  if (!trimmed) return null
+  const sanitized = trimmed.replace(/\\/g, '/')
+  if (/^https?:\/\//i.test(sanitized)) {
+    const [protocol, rest] = sanitized.split('://')
+    if (!rest) return sanitized
+    const cleanedRest = rest.replace(/\/{3,}/g, '//')
+    return `${protocol}://${cleanedRest}`
+  }
+  const withLeading = sanitized.startsWith('/') ? sanitized : `/${sanitized}`
+  return withLeading.replace(/\/{3,}/g, '//')
+}
+
+/**
+ * ステータスに応じたMUI Chipカラーを返す。
+ * @param {string} status - 判定。
+ * @returns {'success'|'error'|'warning'|'default'} 色指定。
+ */
+const getChipColor = status => {
+  const normalized = (status || '').toString().trim().toUpperCase()
+  if (normalized === 'OK' || normalized === 'PASS') return 'success'
+  if (normalized === 'NG' || normalized === 'FAIL') return 'error'
+  if (normalized === 'MISSING') return 'warning'
+  return 'default'
+}
+
+/**
+ * ロットヘッダー用Chipカラーを計算する。
+ * @param {string} status - 判定。
+ * @returns {'success'|'error'|'warning'|'default'} 色。
+ */
+const getLotStatusColor = status => {
+  const normalized = (status || '').toString().trim().toUpperCase()
+  if (normalized === 'PASS') return 'success'
+  if (normalized === 'FAIL') return 'error'
+  if (normalized === 'MISSING') return 'warning'
+  return 'default'
+}
+
+/**
+ * 撮影履歴テーブル内のChipカラーを選ぶ。
+ * @param {string} status - 判定。
+ * @returns {'success'|'error'|'warning'|'default'} 色。
+ */
+const getShotStatusColor = status => {
+  const normalized = (status || '').toString().toUpperCase()
+  if (normalized === 'PASS') return 'success'
+  if (normalized === 'FAIL') return 'error'
+  if (normalized === 'MISSING') return 'warning'
+  return 'default'
+}
+
+const SpringLotDetailModal = ({ open, lot, lotStatus, shotsByCamera, shotsStatus, lotSummary, onClose, setLightbox }) => {
+  const theme = useTheme();
+  const normalizedLotStatus = (lotStatus || '').toString().trim().toUpperCase()
+  const [showTable, setShowTable] = useState(false)
+  const [filterCamera, setFilterCamera] = useState(null)
+
+  // 各カメラの判定結果をマップ化
+  const cameraStatusMap = useMemo(() => {
+    const map = {};
+    (lot?.cameras || []).forEach(cam => {
+      const normalizedName = cam.name.replace(/(\d+)$/, (match) => match.padStart(2, '0'));
+      const status = (cam.status || '').toString().trim().toUpperCase();
+      map[normalizedName] = status === 'OK' ? 'PASS' : status === 'NG' ? 'FAIL' : status;
+    });
+    return map;
+  }, [lot?.cameras]);
+
+  const buildImageSources = useCallback((path) => {
+    const normalized = normalizeRelativePath(path)
+    if (!normalized) return { primary: FALLBACK_IMG, fallback: '' }
+    const primary = toImageUrl(normalized)
+    const fallback = fallbackImageBase ? toImageUrl(normalized, { base: fallbackImageBase }) : ''
+    return {
+      primary: primary || FALLBACK_IMG,
+      fallback: fallback && fallback !== primary ? fallback : '',
+    }
+  }, [])
+
+  /**
+   * ショットの状態に応じてbefore/afterのどちらを参照するかを決定する。
+   * @param {object} shot - ショット情報。
+   * @returns {{primary: string, fallback: string}} 表示URL。
+   */
+  const buildShotSources = useCallback((shot) => {
+    if (!shot) return { primary: FALLBACK_IMG, fallback: '' }
+    const normalized = normalizeRelativePath(shot.image_path)
+    if (!normalized) return { primary: FALLBACK_IMG, fallback: '' }
+    const status = (shot.status || '').toString().toUpperCase()
+    const hasFallbackBase = Boolean(fallbackImageBase)
+
+    const buildPair = builder => {
+      const primaryCandidate = builder(normalized)
+      const fallbackCandidate = hasFallbackBase ? builder(normalized, { base: fallbackImageBase }) : ''
+      return { primary: primaryCandidate, fallback: fallbackCandidate }
+    }
+
+    const ensureUrl = pair => {
+      if (pair.primary) return pair
+      return buildPair((path, options) => toImageUrl(path, options))
+    }
+
+    let pair
+    if (status === 'MISSING') {
+      pair = ensureUrl(buildPair((path, options) => toBeforeTestUrl(path, options)))
+    } else if (status === 'PASS' || status === 'FAIL') {
+      pair = ensureUrl(buildPair((path, options) => toAfterTestUrl(path, options)))
+    } else {
+      pair = ensureUrl(buildPair((path, options) => toImageUrl(path, options)))
+    }
+
+    const primary = pair.primary || FALLBACK_IMG
+    const fallback = pair.fallback && pair.fallback !== primary ? pair.fallback : ''
+
+    return { primary, fallback }
+  }, [])
+
+  /**
+   * 画像の読み込み失敗時、フォールバック→固定画像の順に差し替える。
+   * @param {React.SyntheticEvent<HTMLImageElement>} event - onErrorイベント。
+   * @param {string} fallbackSrc                          - フォールバックURL。
+   */
+  const handleImageError = (event, fallbackSrc) => {
+    const target = event.currentTarget
+    if (fallbackSrc && !target.dataset.fallbackTried) {
+      target.dataset.fallbackTried = 'true'
+      target.src = fallbackSrc
+    } else if (target.src !== FALLBACK_IMG) {
+      target.src = FALLBACK_IMG
+    }
+  }
+
+  const representativeSources = useMemo(
+    () => buildImageSources(lot?.representativeImage),
+    [buildImageSources, lot?.representativeImage],
+  )
+
+  const shotEntries = useMemo(
+    () => Object.entries(shotsByCamera || {}).map(([key, shots]) => [key, Array.isArray(shots) ? shots : []]),
+    [shotsByCamera],
+  )
+
+  const filteredShotEntries = useMemo(() => {
+    if (!filterCamera) return shotEntries
+    const toStandard = (name) => name.trim().replace(/(\d+)$/, (match) => match.padStart(2, '0'))
+    const target = toStandard(filterCamera)
+    return shotEntries.filter(([key]) => toStandard(key) === target)
+  }, [shotEntries, filterCamera])
+
+  const flattenedShots = useMemo(() => {
+    return Object.values(shotsByCamera || {}).reduce((acc, value) => {
+      if (Array.isArray(value)) acc.push(...value)
+      return acc
+    }, [])
+  }, [shotsByCamera])
+
+  const normalizedLotSummary = useMemo(
+    () => normalizeShotSummary(lotSummary, flattenedShots),
+    [lotSummary, flattenedShots],
+  )
+
+  const hasShotEntries = shotEntries.length > 0
+
+  useEffect(() => {
+    if (!open) {
+      setShowTable(false)
+      setFilterCamera(null)
+    }
+  }, [open])
+
+  const handleCameraClick = (e, cameraName) => {
+    if (e) e.stopPropagation();
+    if (!hasShotEntries) return
+    setFilterCamera(cameraName)
+    setShowTable(true)
+  }
+
+  if (!lot) return null
+
+  return (
+    <Dialog open={open} onClose={onClose} fullWidth maxWidth="xl">
+      <DialogTitle>
+        <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 2 }}>
+          <Box>
+            <Typography variant="caption" color="text.secondary">{lot.date} {lot.time}</Typography>
+            <Typography variant="h5" fontWeight="bold">{lot.lotId}</Typography>
+          </Box>
+          <Chip label={normalizedLotStatus || '-'} color={getLotStatusColor(normalizedLotStatus)} size="small" variant="filled" />
+        </Box>
+      </DialogTitle>
+      <DialogContent dividers sx={{ p: 0 }}>
+        <Box sx={{ display: 'flex', flexDirection: { xs: 'column', md: 'row' }, alignItems: 'stretch', gap: { xs: 4, md: 6 }, p: { xs: 4, md: 6 }, boxSizing: 'border-box', height: { md: '70vh' } }}>
+          <Box sx={{ flexBasis: { md: '40%' }, flexShrink: 0, display: 'flex', flexDirection: 'column', gap: 4, position: { md: 'sticky' }, top: { md: 24 } }}>
+            <Box sx={{ width: '100%', aspectRatio: '16/9', borderRadius: 2, overflow: 'hidden', bgcolor: theme => (theme.palette.mode === 'dark' ? 'grey.900' : 'grey.200'), cursor: 'zoom-in' }}
+              onClick={() => {
+                if (setLightbox) {
+                  setLightbox({ open: true, src: representativeSources.primary, fallback: representativeSources.fallback, alt: lot.representativeImage ? `${lot.lotId} representative` : 'placeholder' })
+                }
+              }}
+            >
+              <img src={representativeSources.primary} alt={lot.representativeImage ? `${lot.lotId} representative` : 'placeholder'} onError={e => handleImageError(e, representativeSources.fallback)} draggable={false} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
+            </Box>
+            {normalizedLotSummary && <ShotsSummaryBlock title="検査サマリー" summary={normalizedLotSummary} />}
+            <Box>
+              <Typography variant="subtitle2" color="text.secondary" gutterBottom>判定要素</Typography>
+              <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
+                {(lot.cameras || []).map((camera, index) => {
+                  const normalizedName = camera.name.replace(/(\d+)$/, (match) => match.padStart(2, '0'));
+                  const status = cameraStatusMap[normalizedName] || 'UNKNOWN';
+                  const isPass = status === 'PASS';
+
+                  return (
+                    <Chip key={`${camera.name}-${index}`} label={`${normalizedName}: ${status}`} size="small" color={getChipColor(status)} variant={isPass ? 'outlined' : 'filled'}
+                      onClick={(e) => handleCameraClick(e, normalizedName)}
+                      sx={{ cursor: 'pointer', border: filterCamera === normalizedName ? '2px solid' : 'none' }}
+                    />
+                  )
+                })}
+              </Box>
+            </Box>
+          </Box>
+
+          <Box sx={{ flexGrow: 1, minHeight: 0 }}>
+            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, height: '100%' }}>
+              <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 2 }}>
+                <Typography variant="h6" gutterBottom sx={{ mb: 0 }}>
+                  撮影・検査履歴 {filterCamera ? <Chip label={filterCamera} size="small" color="primary" sx={{ ml: 1 }} /> : ''}
+                </Typography>
+                {showTable && (
+                  <Button size="small" variant="outlined" onClick={() => { setShowTable(false); setFilterCamera(null); }}>
+                    図に戻る / 全表示
+                  </Button>
+                )}
+              </Box>
+              <Box sx={{ flexGrow: 1, minHeight: 0, overflowY: { xs: 'visible', md: 'auto' } }}>
+                {showTable ? (
+                  <Table size="small" aria-label="lot shots table" stickyHeader>
+                    <TableHead>
+                      <TableRow>
+                        <TableCell>カメラ/シーケンス</TableCell>
+                        <TableCell>結果</TableCell>
+                        <TableCell>詳細</TableCell>
+                        <TableCell align="right">画像</TableCell>
+                      </TableRow>
+                    </TableHead>
+                    <TableBody>
+                      {filteredShotEntries.flatMap(([key, shots]) =>
+                        shots.map((shot, idx) => {
+                          const sources = buildShotSources(shot)
+                          const statusColor = getShotStatusColor(shot.status)
+                          return (
+                            <TableRow key={`${key}-${idx}`}>
+                              <TableCell sx={{ fontWeight: 500 }}>{key}</TableCell>
+                              <TableCell><Chip label={shot.status || '-'} size="small" color={statusColor} /></TableCell>
+                              <TableCell>{shot.details || '-'}</TableCell>
+                              <TableCell align="right" sx={{ width: 240 }}>
+                                <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 0.5 }}>
+                                  <Typography variant="caption" color="text.secondary" sx={{ maxWidth: '100%', wordBreak: 'break-all', textAlign: 'right' }}>{shot.image_path || '-'}</Typography>
+                                  <Box sx={{ width: 140, aspectRatio: '16/9', borderRadius: 1, overflow: 'hidden', bgcolor: theme => (theme.palette.mode === 'dark' ? 'grey.900' : 'grey.200'), cursor: 'zoom-in' }}
+                                    onClick={() => { if (setLightbox) setLightbox({ open: true, src: sources.primary, fallback: sources.fallback, alt: shot.image_path || 'shot' }) }}
+                                  >
+                                    <img src={sources.primary} alt={shot.image_path || 'shot'} onError={e => handleImageError(e, sources.fallback)} draggable={false} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
+                                  </Box>
+                                </Box>
+                              </TableCell>
+                            </TableRow>
+                          )
+                        })
+                      )}
+                    </TableBody>
+                  </Table>
+                ) : (
+                  <Box sx={{ height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 2 }}>
+                    <Box sx={{ width: '100%', maxWidth: 880, bgcolor: 'background.paper', borderRadius: 2, boxShadow: theme => theme.shadows[4], border: theme => `1px solid ${theme.palette.divider}`, p: 2, '& svg': { width: '100%', height: 'auto' } }}>
+                      <svg viewBox="0 0 700 400" xmlns="http://www.w3.org/2000/svg">
+                        <style>{`
+                          .camera-group { cursor: pointer; transition: all 0.2s ease; }
+                          .camera-group:hover { filter: brightness(0.9); }
+                          .camera-box { stroke-width: 6; rx: 20; }
+                          .camera-label { font-size: 32px; font-weight: bold; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
+                          
+                          .status-pass .camera-box { fill: #edf7ed; stroke: #4caf50; }
+                          .status-pass .camera-label { fill: #2e7d32; }
+                          .status-fail .camera-box { fill: #fdeded; stroke: #f44336; }
+                          .status-fail .camera-label { fill: #d32f2f; }
+                          .status-missing .camera-box { fill: #fff4e5; stroke: #ff9800; }
+                          .status-missing .camera-label { fill: #ed6c02; }
+                          .status-default .camera-box { fill: #f5f5f5; stroke: #bdbdbd; }
+                          
+                          .active .camera-box { stroke-width: 10 !important; }
+                        `}</style>
+                        <g transform="translate(50, 0)">
+                          <text x="300" y="40" textAnchor="middle" style={{ fontSize: '28px', fontWeight: 'bold', fill: '#3730a3' }}>バネどめ検査カメラ</text>
+                          
+                          <g className="camera-group" onClick={(e) => handleCameraClick(e, null)}>
+                            <rect x="120" y="180" width="360" height="150" style={{ fill: '#f8fafc', stroke: '#cbd5e1', strokeWidth: 2, rx: 20 }} />
+                            <text x="300" y="255" textAnchor="middle" style={{ fontSize: '26px', fontWeight: 'bold', fill: '#64748b', pointerEvents: 'none' }}>押し上げ部 (全表示)</text>
+                          </g>
+
+                          {['01', '02', '03', '04'].map((num, i) => {
+                            const name = `B-spring${num}`;
+                            const status = cameraStatusMap[name] || 'DEFAULT';
+                            const statusClass = `status-${status.toLowerCase()}`;
+                            const xPos = [40, 140, 310, 490][i];
+                            const yPos = [160, 90, 90, 160][i];
+                            const width = [70, 150, 150, 70][i];
+                            const height = [190, 70, 70, 190][i];
+                            const labelX = [75, 215, 385, 525][i];
+                            const labelY = [255, 125, 125, 255][i];
+
+                            return (
+                              <g key={name} className={`camera-group ${statusClass} ${filterCamera === name ? 'active' : ''}`} onClick={(e) => handleCameraClick(e, name)}>
+                                <rect x={xPos} y={yPos} width={width} height={height} className="camera-box" />
+                                <text x={labelX} y={labelY} className="camera-label">{i + 1}</text>
+                                {/* 【修正点】yPos - 15 に統一して、すべてのラベルをボタンの上に配置 */}
+                                <text x={labelX} y={yPos - 15} textAnchor="middle" style={{ fontSize: '14px', fill: '#475569', fontWeight: 'bold' }}>{name}</text>
+                              </g>
+                            )
+                          })}
+                        </g>
+                      </svg>
+                    </Box>
+                    <Typography variant="body2" color="text.secondary" textAlign="center">数字をクリックするとそのカメラの詳細を表示します</Typography>
+                  </Box>
+                )}
+              </Box>
+            </Box>
+          </Box>
+        </Box>
+      </DialogContent>
+      <DialogActions><Button onClick={onClose} color="inherit">閉じる</Button></DialogActions>
+    </Dialog>
+  )
+}
+
+export default SpringLotDetailModal
\ No newline at end of file
diff --git a/javascript-version/src/app/(dashboard)/image-inspection/components/sections/SectionTab.jsx b/javascript-version/src/app/(dashboard)/image-inspection/components/sections/SectionTab.jsx
new file mode 100644
index 000000000..6a3a5ff69
--- /dev/null
+++ b/javascript-version/src/app/(dashboard)/image-inspection/components/sections/SectionTab.jsx
@@ -0,0 +1,484 @@
+/*
+======== ファイル概要 ========
+検査セクション単位のカード、統計、ロット履歴、モーダル開閉をまとめて扱うタブ用コンポーネント。
+URL選択状態やAPIからの統計情報もここで橋渡しする。
+*/
+
+import { useEffect, useMemo, useRef, useState } from 'react'
+
+import Grid from '@mui/material/Grid'
+import Card from '@mui/material/Card'
+import CardContent from '@mui/material/CardContent'
+import Typography from '@mui/material/Typography'
+import Box from '@mui/material/Box'
+import LinearProgress from '@mui/material/LinearProgress'
+import IconButton from '@mui/material/IconButton'
+import TextField from '@mui/material/TextField'
+
+import ChevronLeftIcon from '@mui/icons-material/ChevronLeft'
+import ChevronRightIcon from '@mui/icons-material/ChevronRight'
+
+import DonutChart from '../charts/DonutChart'
+import ImageLightbox from '../lightbox/ImageLightbox'
+import SectionSummary from '../lots/SectionSummary'
+import CameraGrid from '../grid/CameraGrid'
+import LotCard from '../lots/LotCard'
+import SpringLotDetailModal from '../modals/SpringLotDetailModal'
+import ALayerLotDetailModal from '../modals/ALayerLotDetailModal'
+import { SECTION_CONFIG } from '../../utils/sectionConfig'
+import SurfaceBox from '@/components/surface/SurfaceBox'
+
+/**
+ * セクション別ダッシュボードタブ。最新統計、カメラグリッド、ロットカード群を描画し、
+ * ロット詳細モーダルの制御まで担当する。
+ * @param {object} props                                - プロパティ集合。
+ * @param {string} props.section                        - 対象セクション名。
+ * @param {Function} props.getSectionLots               - 日付別ロット取得関数。
+ * @param {Function} props.getLotStatus                 - ロット判定取得関数。
+ * @param {Function} props.getLotShotsStatus            - ショット取得状態参照関数。
+ * @param {Function} props.getLotShotsByCamera          - カメラ別ショット取得関数。
+ * @param {Function} props.getLotShots                  - ショット配列取得関数。
+ * @param {Function} props.ensureLotShotsLoaded         - ショット読み込み要求関数。
+ * @param {Function} props.getSectionStats              - 日付別統計取得関数。
+ * @param {Function} props.getFailReasons               - 不良内訳取得関数。
+ * @param {object}   props.lightbox                     - ライトボックス状態。
+ * @param {Function} props.setLightbox                  - ライトボックス更新関数。
+ * @param {Function} props.getLatestLot                 - 最新ロット取得関数。
+ * @param {Function} props.getAvailableDates            - ロット日一覧取得関数。
+ * @param {string}   [props.selectedLotId]              - 選択中ロットID。
+ * @param {object}   [props.selectedLotInfo]            - 選択中ロット詳細。
+ * @param {Function} [props.onOpenLot]                  - ロットオープン時のハンドラ。
+ * @param {Function} [props.onCloseLot]                 - ロットクローズ時のハンドラ。
+ * @param {Function} props.getLotShotsSummary           - サマリー取得関数。
+ * @returns {JSX.Element}                                セクションタブ内容。
+ */
+const SectionTab = ({
+  section,
+  getSectionLots,
+  getLotStatus,
+  getLotShotsStatus,
+  getLotShotsByCamera,
+  getLotShots,
+  ensureLotShotsLoaded,
+  getSectionStats,
+  getFailReasons,
+  lightbox,
+  setLightbox,
+  getLatestLot,
+  getAvailableDates,
+  selectedLotId,
+  selectedLotInfo,
+  onOpenLot,
+  onCloseLot,
+  getLotShotsSummary,
+}) => {
+  // 日付切替（セクション別に）
+  const availableDatesRaw = useMemo(() => getAvailableDates(section) || [], [getAvailableDates, section])
+  const availableDates = useMemo(() => {
+    if (selectedLotInfo?.section === section && selectedLotInfo.date) {
+      const set = new Set([selectedLotInfo.date, ...availableDatesRaw])
+      return Array.from(set).sort((a, b) => (a < b ? 1 : a > b ? -1 : 0))
+    }
+    return availableDatesRaw
+  }, [availableDatesRaw, selectedLotInfo, section])
+
+  const [selectedDateIndex, setSelectedDateIndex] = useState(0)
+  const [manualDate, setManualDate] = useState('')
+  const selectedDate = manualDate || (availableDates[selectedDateIndex] || undefined)
+
+  const [isModalOpen, setIsModalOpen] = useState(false)
+  const [currentModalLotId, setCurrentModalLotId] = useState(null)
+  const [localLotSnapshot, setLocalLotSnapshot] = useState(null)
+  const prevSelectedLotIdRef = useRef(selectedLotId)
+
+  useEffect(() => {
+    if (!manualDate) return
+    const idx = availableDates.indexOf(manualDate)
+    if (idx >= 0 && idx !== selectedDateIndex) {
+      setSelectedDateIndex(idx)
+    }
+  }, [manualDate, availableDates, selectedDateIndex])
+
+  useEffect(() => {
+    const maxIndex = Math.max(availableDates.length - 1, 0)
+    if (selectedDateIndex > maxIndex) {
+      setSelectedDateIndex(maxIndex)
+    }
+  }, [availableDates, selectedDateIndex])
+
+  useEffect(() => {
+    if (!selectedLotInfo) return
+    if (selectedLotInfo.section !== section) return
+    if (!selectedLotInfo.date) return
+    setManualDate(prev => (prev === selectedLotInfo.date ? prev : selectedLotInfo.date))
+  }, [selectedLotInfo, section])
+
+  const goPrevDate = () => {
+    setManualDate('')
+    setSelectedDateIndex(i => Math.min(i + 1, Math.max(availableDates.length - 1, 0)))
+  }
+
+  const goNextDate = () => {
+    setManualDate('')
+    setSelectedDateIndex(i => Math.max(i - 1, 0))
+  }
+
+  const canGoPrev = selectedDateIndex < (availableDates.length - 1)
+  const canGoNext = selectedDateIndex > 0
+
+  const latestLotForSection = getLatestLot(section)
+  const latestLotStatus = latestLotForSection ? getLotStatus(latestLotForSection) : undefined
+  const latestDate = latestLotForSection?.date
+  const statsLatest = getSectionStats(section, latestDate)
+  const failReasonsLatest = getFailReasons(section, latestDate)
+
+  const cameraNamesForGrid = useMemo(() => {
+    const fallback = SECTION_CONFIG[section]?.cameras || []
+    if (section === 'A層') {
+      return fallback
+    }
+    const fromLatest = Array.from(new Set((latestLotForSection?.cameras || []).map(cam => cam?.name).filter(Boolean)))
+    return fromLatest.length ? fromLatest : fallback
+  }, [latestLotForSection, section])
+
+  const statusByNameForGrid = useMemo(() => {
+    if (section === 'A層') {
+      const fallback = SECTION_CONFIG[section]?.cameras || []
+      const normalizedLotStatus = (latestLotStatus || '').toString().trim().toUpperCase()
+      const statusForCamera = (() => {
+        if (normalizedLotStatus === 'PASS') return 'PASS'
+        if (normalizedLotStatus === 'FAIL') return 'FAIL'
+        if (normalizedLotStatus === 'MISSING') return 'MISSING'
+        if (normalizedLotStatus === 'OK') return 'PASS'
+        if (normalizedLotStatus === 'NG') return 'FAIL'
+        return normalizedLotStatus || ''
+      })()
+      if (!statusForCamera) return {}
+      return Object.fromEntries(fallback.map(name => [name, statusForCamera]))
+    }
+
+    const entries = (latestLotForSection?.cameras || [])
+      .filter(cam => cam?.name)
+      .map(cam => [cam.name, cam.status])
+    return Object.fromEntries(entries)
+  }, [latestLotForSection, latestLotStatus, section])
+
+  const imageByNameForGrid = useMemo(() => {
+    if (!latestLotForSection) return {}
+    if (section === 'A層') {
+      const representative = latestLotForSection.representativeImage
+      if (!representative) return {}
+      return Object.fromEntries((cameraNamesForGrid || []).map(name => [name, representative]))
+    }
+    const entries = (latestLotForSection.cameras || [])
+      .filter(cam => cam?.name && cam?.image_path)
+      .map(cam => [cam.name, cam.image_path])
+    if (entries.length > 0) return Object.fromEntries(entries)
+    if (latestLotForSection.representativeImage) {
+      return Object.fromEntries((cameraNamesForGrid || []).map(name => [name, latestLotForSection.representativeImage]))
+    }
+    return {}
+  }, [latestLotForSection, section, cameraNamesForGrid])
+
+  const sectionLots = useMemo(() => {
+    const baseLots = getSectionLots(section, selectedDate) || []
+    if (selectedLotInfo && selectedLotInfo.section === section) {
+      const matchesDate = !selectedDate || selectedLotInfo.date === selectedDate
+      const exists = baseLots.some(l => l.lotId === selectedLotInfo.lotId)
+      if (matchesDate && !exists) {
+        return [...baseLots, selectedLotInfo].sort((a, b) => b.timestamp - a.timestamp)
+      }
+    }
+    return baseLots
+  }, [getSectionLots, section, selectedDate, selectedLotInfo])
+
+  const selectedLot = useMemo(
+    () => {
+      const fromList = (sectionLots || []).find(lot => lot.lotId === selectedLotId)
+      if (fromList) return fromList
+      if (selectedLotInfo && selectedLotInfo.section === section && selectedLotInfo.lotId === selectedLotId) {
+        return selectedLotInfo
+      }
+      return null
+    },
+    [sectionLots, selectedLotId, selectedLotInfo, section],
+  )
+
+  const activeLot = useMemo(() => {
+    if (selectedLot && selectedLot.section === section) return selectedLot
+    if (!currentModalLotId) return null
+    const fromSection = (sectionLots || []).find(lot => lot.lotId === currentModalLotId)
+    if (fromSection) return fromSection
+    if (selectedLotInfo && selectedLotInfo.section === section && selectedLotInfo.lotId === currentModalLotId) {
+      return selectedLotInfo
+    }
+    if (localLotSnapshot && localLotSnapshot.lotId === currentModalLotId) return localLotSnapshot
+    return null
+  }, [selectedLot, section, currentModalLotId, sectionLots, selectedLotInfo, localLotSnapshot])
+
+  useEffect(() => {
+    if (!selectedLot || selectedLot.section !== section) return
+    if (currentModalLotId && selectedLot.lotId !== currentModalLotId) return
+    setLocalLotSnapshot(prev => (prev && prev.lotId === selectedLot.lotId ? prev : selectedLot))
+  }, [selectedLot, section, currentModalLotId])
+
+  useEffect(() => {
+    // Close modal when URL loses the lot parameter (e.g., via back navigation).
+    const prevSelectedLotId = prevSelectedLotIdRef.current
+
+    if (!selectedLotId && prevSelectedLotId) {
+      if (isModalOpen) setIsModalOpen(false)
+      if (currentModalLotId) setCurrentModalLotId(null)
+      if (localLotSnapshot) setLocalLotSnapshot(null)
+    }
+
+    prevSelectedLotIdRef.current = selectedLotId
+  }, [selectedLotId, isModalOpen, currentModalLotId, localLotSnapshot])
+
+  useEffect(() => {
+    if (!isModalOpen || !currentModalLotId || !ensureLotShotsLoaded) return
+    if (section === 'A層') {
+      ensureLotShotsLoaded(currentModalLotId, { type: '4K' })
+    } else {
+      ensureLotShotsLoaded(currentModalLotId)
+    }
+  }, [isModalOpen, currentModalLotId, section, ensureLotShotsLoaded])
+
+  const modalLotId = currentModalLotId || (activeLot ? activeLot.lotId : null)
+
+  const lotShotsStatus = useMemo(() => {
+    if (!getLotShotsStatus || !modalLotId) return 'idle'
+    return section === 'A層'
+      ? getLotShotsStatus(modalLotId, { type: '4K' })
+      : getLotShotsStatus(modalLotId)
+  }, [getLotShotsStatus, modalLotId, section])
+
+  const selectedLotStatus = activeLot ? getLotStatus(activeLot) : undefined
+
+  const selectedLotShotsByCamera = useMemo(() => {
+    if (!modalLotId || section === 'A層') return {}
+    return getLotShotsByCamera(modalLotId)
+  }, [modalLotId, section, getLotShotsByCamera])
+
+  const selectedLotShots4K = useMemo(() => {
+    if (!modalLotId || section !== 'A層') return []
+    return getLotShots(modalLotId, { type: '4K' })
+  }, [modalLotId, section, getLotShots])
+
+  const selectedLotShotsSummary = useMemo(() => {
+    if (!modalLotId) return null
+    return getLotShotsSummary(modalLotId)
+  }, [modalLotId, getLotShotsSummary])
+
+  const selectedLotShots4KSummary = useMemo(() => {
+    if (!modalLotId || section !== 'A層') return null
+    return getLotShotsSummary(modalLotId, { type: '4K' })
+  }, [modalLotId, section, getLotShotsSummary])
+
+  const handleOpenLot = lot => {
+    setIsModalOpen(true)
+    setCurrentModalLotId(lot.lotId)
+    setLocalLotSnapshot(lot)
+    onOpenLot?.(lot)
+    if (!ensureLotShotsLoaded) return
+    if (section === 'A層') {
+      ensureLotShotsLoaded(lot.lotId, { type: '4K' })
+    } else {
+      ensureLotShotsLoaded(lot.lotId)
+    }
+  }
+
+  const handleCloseLotModal = () => {
+    const lotIdToClose = modalLotId
+    setIsModalOpen(false)
+    setCurrentModalLotId(null)
+    setLocalLotSnapshot(null)
+    onCloseLot?.()
+  }
+
+  return (
+    <>
+      <Grid container spacing={3}>
+        <Grid item xs={12} lg={8} sx={{ display: 'flex' }}>
+          <Card sx={{ height: '100%', display: 'flex', flexDirection: 'column', width: '100%' }}>
+            <CardContent>
+              <Typography variant="h6" gutterBottom>
+                最新ログ: {section}検査（{cameraNamesForGrid.length}カメラ）
+              </Typography>
+              
+              {/* ▼削除した行の跡地 (何も表示しない) */}
+              
+              {cameraNamesForGrid.length === 0 ? (
+                <Typography color="text.secondary">カメラ構成が取得できません。</Typography>
+              ) : (
+                <CameraGrid cameraNames={cameraNamesForGrid} statusByName={statusByNameForGrid} imageByName={imageByNameForGrid} />
+              )}
+              <Box sx={{ borderTop: 1, borderColor: 'divider', pt: 2 }}>
+                <Typography variant="subtitle1" color="text.secondary" gutterBottom>
+                  最新の画像判定
+                </Typography>
+                <SectionSummary latestLot={latestLotForSection} lotStatus={latestLotStatus} />
+              </Box>
+            </CardContent>
+          </Card>
+        </Grid>
+        <Grid item xs={12} lg={4} sx={{ display: 'flex' }}>
+          <Card sx={{ height: '100%', display: 'flex', flexDirection: 'column', width: '100%' }}>
+            <CardContent sx={{ '& > * + *': { mt: 3 } }}>
+              <Box>
+                {/* 右側のサマリータイトルは残します */}
+                <Typography variant="h6" gutterBottom>
+  {/* availableDates[0] (APIが返す最新日) を表示するように修正 */}
+  サマリー（最新日{availableDates[0] ? `: ${availableDates[0]}` : ''}）
+</Typography>
+                <Box sx={{ display: 'flex', justifyContent: 'center', mb: 2 }}>
+                  <DonutChart percentage={statsLatest.passRate} />
+                </Box>
+                <Grid container spacing={2}>
+                  <Grid item xs={4}>
+                    <SurfaceBox variant="soft" sx={{ p: 1.5, borderRadius: 1, textAlign: 'center' }}>
+                      <Typography variant="body2" color="text.secondary">画像総数</Typography>
+                      <Typography variant="h4" fontWeight="bold">{statsLatest.total}</Typography>
+                    </SurfaceBox>
+                  </Grid>
+                  <Grid item xs={4}>
+                    <SurfaceBox variant="soft" sx={{ p: 1.5, borderRadius: 1, textAlign: 'center' }}>
+                      <Typography variant="body2" color="text.secondary">良品画像</Typography>
+                      <Typography variant="h4" fontWeight="bold" color="success.main">{statsLatest.pass}</Typography>
+                    </SurfaceBox>
+                  </Grid>
+                  <Grid item xs={4}>
+                    <SurfaceBox variant="soft" sx={{ p: 1.5, borderRadius: 1, textAlign:  'center' }}>
+                      <Typography variant="body2" color="text.secondary">不良品画像</Typography>
+                      <Typography variant="h4" fontWeight="bold" color="error.main">{statsLatest.fail}</Typography>
+                    </SurfaceBox>
+                  </Grid>
+                </Grid>
+              </Box>
+              <Box sx={{ borderTop: 1, borderColor: 'divider', pt: 2 }}>
+                <Typography variant="h6" gutterBottom>
+                  不良原因
+                </Typography>
+                {failReasonsLatest.length === 0 ? (
+                  <Typography color="text.secondary">本日の不良品はありません。</Typography>
+                ) : (
+                  <Box sx={{ '& > * + *': { mt: 2 } }}>
+                    {failReasonsLatest.map((reason, index) => (
+                      <Box key={index}>
+                        <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 1 }}>
+                          <Typography variant="body2" fontWeight="medium">
+                            {reason.reason}
+                          </Typography>
+                          <Typography variant="body2" color="text.secondary">
+                            {reason.count}件
+                          </Typography>
+                        </Box>
+                        <LinearProgress
+                          variant="determinate"
+                          value={reason.percentage}
+                          sx={{ height: 8, borderRadius: 4 }}
+                        />
+                      </Box>
+                    ))}
+                  </Box>
+                )}
+              </Box>
+            </CardContent>
+          </Card>
+        </Grid>
+      </Grid>
+      <Box sx={{ mt: 3 }}>
+        <Card>
+          <CardContent>
+            <Typography variant="h6" gutterBottom>
+              {section}検査 ロットログ（{selectedDate || '全日'}）
+            </Typography>
+            {/* 日付ナビゲーション */}
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 2, flexWrap: 'wrap' }}>
+              <IconButton size="small" onClick={goPrevDate} disabled={!canGoPrev} aria-label="prev date">
+                <ChevronLeftIcon />
+              </IconButton>
+              <TextField
+                type="date"
+                size="small"
+                value={selectedDate || ''}
+                onChange={(e) => {
+                  const v = e.target.value
+
+                  setManualDate(v)
+                  const idx = availableDates.indexOf(v)
+
+                  if (idx >= 0) setSelectedDateIndex(idx)
+                }}
+                inputProps={{ max: availableDates[0] || undefined }}
+                sx={{ minWidth: 160 }}
+              />
+              <IconButton size="small" onClick={goNextDate} disabled={!canGoNext} aria-label="next date">
+                <ChevronRightIcon />
+              </IconButton>
+              <Box sx={{ flex: 1 }} />
+              {availableDates.length > 0 && (
+                <Typography variant="caption" color="text.secondary">
+                  {selectedDateIndex + 1}/{availableDates.length}
+                </Typography>
+              )}
+            </Box>
+            <Box>
+              {sectionLots.length === 0 ? (
+                <Typography variant="body2" color="text.secondary" sx={{ py: 4, textAlign: 'center' }}>
+                  表示できるロットがありません。
+                </Typography>
+              ) : (
+                <Grid container spacing={2}>
+                  {sectionLots.map(lot => (
+                    <Grid item xs={12} md={6} xl={4} key={lot.lotId}>
+                      <LotCard
+                        lot={lot}
+                        lotStatus={getLotStatus(lot)}
+                        onOpen={() => handleOpenLot(lot)}
+                        isActive={modalLotId === lot.lotId}
+                      />
+                    </Grid>
+                  ))}
+                </Grid>
+              )}
+            </Box>
+          </CardContent>
+        </Card>
+      </Box>
+      {section === 'A層' ? (
+        <ALayerLotDetailModal
+          open={isModalOpen && Boolean(activeLot)}
+          lot={activeLot}
+          lotStatus={selectedLotStatus}
+          shots4k={selectedLotShots4K}
+          shotsStatus={lotShotsStatus}
+          shots4kSummary={selectedLotShots4KSummary}
+          onClose={handleCloseLotModal}
+          setLightbox={setLightbox}
+        />
+      ) : (
+        <SpringLotDetailModal
+          open={isModalOpen && Boolean(activeLot)}
+          lot={activeLot}
+          lotStatus={selectedLotStatus}
+          shotsByCamera={selectedLotShotsByCamera}
+          shotsStatus={lotShotsStatus}
+          lotSummary={selectedLotShotsSummary}
+          onClose={handleCloseLotModal}
+          setLightbox={setLightbox}
+        />
+      )}
+      {/* Lightbox */}
+      <ImageLightbox
+        open={lightbox.open}
+        src={lightbox.src}
+        fallbackSrc={lightbox.fallback}
+        alt={lightbox.alt}
+        onClose={() => setLightbox({ open: false, src: '', fallback: '', alt: '' })}
+      />
+    </>
+  )
+}
+
+export default SectionTab
\ No newline at end of file
diff --git a/javascript-version/src/app/(dashboard)/image-inspection/data/sampleLots.js b/javascript-version/src/app/(dashboard)/image-inspection/data/sampleLots.js
new file mode 100644
index 000000000..a124b76fc
--- /dev/null
+++ b/javascript-version/src/app/(dashboard)/image-inspection/data/sampleLots.js
@@ -0,0 +1,191 @@
+/*
+======== ファイル概要 ========
+APIレスポンスを模したサンプルロットデータセット。開発時のモックソースとして利用する。
+*/
+
+/**
+ * representative_image が欠如している場合に最初のカメラ画像から生成する。
+ * @param {object} lot - ロットエントリ。
+ * @returns {object}   representative_imageを補完したロット。
+ */
+const withRepresentativeImage = lot => {
+  if (lot.representative_image) return lot
+  const firstImage = lot.cameras && lot.cameras.length > 0 ? lot.cameras[0].image_path : null
+  if (!firstImage) return lot
+  const cleaned = firstImage.replace(/\\/g, '/')
+  const normalizedPath = cleaned.replace(/\/{2,}/g, '/')
+  const normalized = normalizedPath.startsWith('/imageDB/')
+    ? normalizedPath
+    : `/imageDB/beforeTest/${normalizedPath.replace(/^\/+/, '')}`
+  return {
+    ...lot,
+    representative_image: normalized,
+  }
+}
+
+export const SAMPLE_LOTS = {
+  total_pages: 1,
+  current_page: 1,
+  lots: [
+    // --- 2025-09-30 分 ---
+    {
+      lot_id: 'MAT-09030-01',
+      section: 'バネ留め',
+      captured_at: '2025-09-30T09:15:12.000Z',
+      pass: true,
+      cameras: [
+        { camera_id: 'B-spring01', status: 'PASS', details: null, image_path: 'MAT-09030-01_B-spring01-01.jpg' },
+        { camera_id: 'B-spring02', status: 'PASS', details: null, image_path: 'MAT-09030-01_B-spring02-01.jpg' },
+        { camera_id: 'B-spring03', status: 'PASS', details: null, image_path: 'MAT-09030-01_B-spring03-01.jpg' },
+        { camera_id: 'B-spring04', status: 'PASS', details: null, image_path: 'MAT-09030-01_B-spring04-01.jpg' }
+      ],
+    },
+    {
+      lot_id: 'MAT-09030-02',
+      section: 'バネ留め',
+      captured_at: '2025-09-30T10:45:45.000Z',
+      pass: false,
+      cameras: [
+        { camera_id: 'B-spring01', status: 'FAIL', details: 'バネ外れ', image_path: 'MAT-09030-02_B-spring01-01.jpg' },
+        { camera_id: 'B-spring02', status: 'PASS', details: null, image_path: 'MAT-09030-02_B-spring02-01.jpg' },
+        { camera_id: 'B-spring03', status: 'PASS', details: null, image_path: 'MAT-09030-02_B-spring03-01.jpg' },
+        { camera_id: 'B-spring04', status: 'PASS', details: null, image_path: 'MAT-09030-02_B-spring04-01.jpg' }
+      ],
+    },
+    {
+      lot_id: 'LOLL-09030-01',
+      section: 'A層検査',
+      captured_at: '2025-09-30T11:05:30.000Z',
+      pass: false,
+      cameras: [
+        { camera_id: 'A-main01', status: 'FAIL', details: 'A層ヨゴレ', image_path: 'LOLL-09030-01_A-main01-01.jpg' },
+      ],
+    },
+    {
+      lot_id: 'LOLL-09030-02',
+      section: 'A層検査',
+      captured_at: '2025-09-30T13:22:10.000Z',
+      pass: true,
+      cameras: [
+        { camera_id: 'A-main01', status: 'PASS', details: null, image_path: 'LOLL-09030-02_A-main01-01.jpg' },
+      ],
+    },
+
+    {
+      lot_id: 'MAT-10001',
+      section: 'バネ留め',
+      captured_at: '2025-10-01T17:47:53.427Z',
+      pass: false,
+      cameras: [
+        { camera_id: 'B-spring01', status: 'FAIL', details: 'バネ取り付け角度規定外', image_path: 'MAT-10001_B-spring01-01.jpg' },
+        { camera_id: 'B-spring01', status: 'PASS', details: null, image_path: 'MAT-10001_B-spring01-02.jpg' },
+        { camera_id: 'B-spring02', status: 'FAIL', details: 'バネ取り付け角度規定外', image_path: 'MAT-10001_B-spring02-01.jpg' },
+        { camera_id: 'B-spring02', status: 'PASS', details: null, image_path: 'MAT-10001_B-spring02-02.jpg' },
+        { camera_id: 'B-spring03', status: 'PASS', details: null, image_path: 'MAT-10001_B-spring03-01.jpg' },
+        { camera_id: 'B-spring03', status: 'PASS', details: null, image_path: 'MAT-10001_B-spring03-02.jpg' },
+        { camera_id: 'B-spring04', status: 'PASS', details: null, image_path: 'MAT-10001_B-spring04-01.jpg' },
+        { camera_id: 'B-spring04', status: 'PASS', details: null, image_path: 'MAT-10001_B-spring04-02.jpg' }
+      ],
+    },
+    {
+      lot_id: 'MAT-10002',
+      section: 'バネ留め',
+      captured_at: '2025-10-01T17:50:12.123Z',
+      pass: true,
+      cameras: [
+        { camera_id: 'B-spring01', status: 'PASS', details: null, image_path: 'MAT-10002_B-spring01-01.jpg' },
+        { camera_id: 'B-spring02', status: 'PASS', details: null, image_path: 'MAT-10002_B-spring02-01.jpg' },
+        { camera_id: 'B-spring03', status: 'PASS', details: null, image_path: 'MAT-10002_B-spring03-01.jpg' },
+        { camera_id: 'B-spring04', status: 'PASS', details: null, image_path: 'MAT-10002_B-spring04-01.jpg' }
+      ],
+    },
+    {
+      lot_id: 'MAT-10003',
+      section: 'バネ留め',
+      captured_at: '2025-10-01T17:52:30.555Z',
+      pass: false,
+      cameras: [
+        { camera_id: 'B-spring01', status: 'FAIL', details: 'バネ外れ', image_path: 'MAT-10003_B-spring01-01.jpg' },
+        { camera_id: 'B-spring02', status: 'PASS', details: null, image_path: 'MAT-10003_B-spring02-01.jpg' },
+        { camera_id: 'B-spring03', status: 'PASS', details: null, image_path: 'MAT-10003_B-spring03-01.jpg' },
+        { camera_id: 'B-spring04', status: 'PASS', details: null, image_path: 'MAT-10003_B-spring04-01.jpg' }
+      ],
+    },
+    {
+      lot_id: 'LOLL-10001',
+      section: 'A層検査',
+      captured_at: '2025-10-01T17:47:53.427Z',
+      pass: false,
+      cameras: [
+        { camera_id: 'A-main01', status: 'FAIL', details: 'A層ヨゴレ', image_path: 'LOLL-10001_A-main01-01.jpg' },
+        { camera_id: 'A-main01', status: 'FAIL', details: 'ゴミ付着', image_path: 'LOLL-10001_A-main01-02.jpg' },
+        { camera_id: 'A-main01', status: 'PASS', details: null, image_path: 'LOLL-10001_A-main01-03.jpg' },
+        { camera_id: 'A-main01', status: 'PASS', details: null, image_path: 'LOLL-10001_A-main01-04.jpg' },
+      ],
+    },
+    {
+      lot_id: 'LOLL-10002',
+      section: 'A層検査',
+      captured_at: '2025-10-01T17:49:10.789Z',
+      pass: true,
+      cameras: [
+        { camera_id: 'A-main01', status: 'PASS', details: null, image_path: 'LOLL-10002_A-main01-01.jpg' },
+      ],
+    },
+    {
+      lot_id: 'LOLL-10003',
+      section: 'A層検査',
+      captured_at: '2025-10-01T17:51:05.321Z',
+      pass: false,
+      cameras: [
+        { camera_id: 'A-main01', status: 'FAIL', details: 'A層ヨゴレ', image_path: 'LOLL-10003_A-main01-01.jpg' },
+      ],
+    },
+
+    // --- 2025-10-02 分 ---
+    {
+      lot_id: 'MAT-10002-01',
+      section: 'バネ留め',
+      captured_at: '2025-10-02T01:10:00.000Z',
+      pass: true,
+      cameras: [
+        { camera_id: 'B-spring01', status: 'PASS', details: null, image_path: 'MAT-10002-01_B-spring01-01.jpg' },
+        { camera_id: 'B-spring02', status: 'PASS', details: null, image_path: 'MAT-10002-01_B-spring02-01.jpg' },
+        { camera_id: 'B-spring03', status: 'PASS', details: null, image_path: 'MAT-10002-01_B-spring03-01.jpg' },
+        { camera_id: 'B-spring04', status: 'PASS', details: null, image_path: 'MAT-10002-01_B-spring04-01.jpg' }
+      ],
+    },
+    {
+      lot_id: 'MAT-10002-02',
+      section: 'バネ留め',
+      captured_at: '2025-10-02T03:30:45.000Z',
+      pass: false,
+      cameras: [
+        { camera_id: 'B-spring01', status: 'PASS', details: null, image_path: 'MAT-10002-02_B-spring01-01.jpg' },
+        { camera_id: 'B-spring02', status: 'FAIL', details: 'バネ取り付け角度規定外', image_path: 'MAT-10002-02_B-spring02-01.jpg' },
+        { camera_id: 'B-spring03', status: 'PASS', details: null, image_path: 'MAT-10002-02_B-spring03-01.jpg' },
+        { camera_id: 'B-spring04', status: 'PASS', details: null, image_path: 'MAT-10002-02_B-spring04-01.jpg' }
+      ],
+    },
+    {
+      lot_id: 'LOLL-10002-01',
+      section: 'A層検査',
+      captured_at: '2025-10-02T04:00:00.000Z',
+      pass: true,
+      cameras: [
+        { camera_id: 'A-main01', status: 'PASS', details: null, image_path: 'LOLL-10002-01_A-main01-01.jpg' },
+      ],
+    },
+    {
+      lot_id: 'LOLL-10002-02',
+      section: 'A層検査',
+      captured_at: '2025-10-02T05:45:15.000Z',
+      pass: false,
+      cameras: [
+        { camera_id: 'A-main01', status: 'FAIL', details: 'ゴミ付着', image_path: 'LOLL-10002-02_A-main01-01.jpg' },
+      ],
+    },
+  ].map(withRepresentativeImage),
+}
+
+export default SAMPLE_LOTS
diff --git a/javascript-version/src/app/(dashboard)/image-inspection/data/sampleSummaries.js b/javascript-version/src/app/(dashboard)/image-inspection/data/sampleSummaries.js
new file mode 100644
index 000000000..2fddf2a3d
--- /dev/null
+++ b/javascript-version/src/app/(dashboard)/image-inspection/data/sampleSummaries.js
@@ -0,0 +1,49 @@
+/*
+======== ファイル概要 ========
+サマリーAPIのレスポンス形式を模したモックデータ。キーは `${sectionCode}|${date}` で管理する。
+*/
+
+export const SAMPLE_SUMMARIES = {
+  // ユーザー指定のサンプル
+  'alayer|2025-10-14': {
+    section: 'alayer',
+    date: '2025-10-14',
+    total_count: 150,
+    pass_count: 145,
+    fail_count: 5,
+    pass_rate: 97,
+    fail_reasons: [
+      { reason: '位置ずれ', count: 3 },
+      { reason: '糸ほつれ', count: 1 },
+      { reason: '異物混入', count: 1 }
+    ]
+  },
+  'spring|2025-10-14': {
+    section: 'spring',
+    date: '2025-10-14',
+    total_count: 180,
+    pass_count: 171,
+    fail_count: 9,
+    pass_rate: 95,
+    fail_reasons: [
+      { reason: 'バネ外れ', count: 5 },
+      { reason: '角度規定外', count: 3 },
+      { reason: '部品欠品', count: 1 }
+    ]
+  }
+
+  // 追加サンプルを入れたい場合は以下に追記してください（例）
+  // 'spring|2025-10-01': {
+  //   section: 'spring',
+  //   date: '2025-10-01',
+  //   total_count: 120,
+  //   pass_count: 118,
+  //   fail_count: 2,
+  //   pass_rate: 98,
+  //   fail_reasons: [
+  //     { reason: 'バネ外れ', count: 2 }
+  //   ]
+  // }
+}
+
+export default SAMPLE_SUMMARIES
diff --git a/javascript-version/src/app/(dashboard)/image-inspection/hooks/useLotsData.js b/javascript-version/src/app/(dashboard)/image-inspection/hooks/useLotsData.js
new file mode 100644
index 000000000..7ae3aa258
--- /dev/null
+++ b/javascript-version/src/app/(dashboard)/image-inspection/hooks/useLotsData.js
@@ -0,0 +1,844 @@
+/*
+======== ファイル概要 ========
+画像検査ロット関連のデータ取得・キャッシュ・整形を担うカスタムフック。
+ダミーデータからAPIへの移行を見据え、トグルで動作を切り替えられる。
+*/
+
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { SAMPLE_SUMMARIES } from '../data/sampleSummaries'
+import { SAMPLE_LOTS } from '../data/sampleLots'
+import { mapStatusApiToUi, normalizeShotSummary } from '../utils/summaryUtils'
+
+// 簡易トグル: trueでAPIを叩いてサマリー（総数/良品/不良/不良理由）を取得
+const USE_API_SUMMARY = true;
+// ロットログ（一覧）もAPIに切り替えるトグル
+const USE_API_LOTS = true;
+
+// 表示名 => 内部コード（APIのsectionクエリ）
+const SECTION_TO_CODE = {
+  'バネ留め': 'spring',
+  'A層': 'alayer'
+}
+
+const CODE_TO_SECTION = Object.fromEntries(Object.entries(SECTION_TO_CODE).map(([display, code]) => [code, display]))
+
+/**
+ * 現在日時を YYYY-MM-DD 文字列で返す。
+ * @returns {string} 日付文字列。
+ */
+const todayYMD = () => {
+  const d = new Date()
+  const pad = n => String(n).padStart(2, '0')
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
+}
+
+/**
+ * キャッシュキーで利用する日付表現を決める。未指定時は 'LATEST'。
+ * @param {string|null|undefined} value - 入力日付。
+ * @returns {string}                      正規化キー。
+ */
+const resolveDateKey = value => {
+  if (value === null || value === undefined) return 'LATEST'
+  if (typeof value === 'string') {
+    const trimmed = value.trim()
+    return trimmed ? trimmed : 'LATEST'
+  }
+  return value ? value : 'LATEST'
+}
+
+/**
+ * セクションやロット種別ごとのキャッシュキーを生成する。
+ * @param {string} prefix - 先頭識別子。
+ * @param {string|null} date - 日付。
+ * @returns {string} キー文字列。
+ */
+const buildCacheKey = (prefix, date) => `${prefix}|${resolveDateKey(date)}`
+
+/**
+ * API由来の画像パスのスラッシュを整え、先頭スラッシュを付けて返す。
+ * @param {string} path - 元のパス。
+ * @returns {string|null} 正規化結果。
+ */
+const normalizeImagePath = path => {
+  if (!path) return null
+  const trimmed = String(path).trim()
+  if (!trimmed) return null
+  const sanitized = trimmed.replace(/\\/g, '/')
+  if (/^https?:\/\//i.test(sanitized)) {
+    const [protocol, rest] = sanitized.split('://')
+    if (!rest) return sanitized
+    const cleanedRest = rest.replace(/\/{3,}/g, '//')
+    return `${protocol}://${cleanedRest}`
+  }
+  const withLeading = sanitized.startsWith('/') ? sanitized : `/${sanitized}`
+  return withLeading.replace(/\/{3,}/g, '//')
+}
+
+const SHOT_DEFAULT_TYPE = 'DEFAULT'
+
+/**
+ * ショット種別を大文字化し、未指定時は DEFAULT に揃える。
+ * @param {string} type - 入力種別。
+ * @returns {string}     正規化種別。
+ */
+const normalizeShotType = type => {
+  if (!type) return SHOT_DEFAULT_TYPE
+  const normalized = String(type).trim()
+  return normalized ? normalized.toUpperCase() : SHOT_DEFAULT_TYPE
+}
+
+/**
+ * ロットIDとショットタイプからキャッシュキーを生成する。
+ * @param {string} lotId   - ロットID。
+ * @param {string} shotType - ショットタイプ。
+ * @returns {string}        キー。
+ */
+const buildShotCacheKey = (lotId, shotType) => `${lotId}|${normalizeShotType(shotType)}`
+
+/**
+ * APIのセクションコードを表示名へ戻し、末尾の「検査」を除去する。
+ * @param {string} section - セクション文字列。
+ * @returns {string}        表示名。
+ */
+const normalizeSection = section => {
+  if (!section) return section
+  const mapped = CODE_TO_SECTION[section] || section
+  return mapped.replace(/検査$/, '')
+}
+
+/**
+ * ISO日時を HH:MM:SS へ整形する。
+ * @param {string} iso - ISO8601文字列。
+ * @returns {string}    時刻文字列。
+ */
+const toHHMMSS = iso => {
+  try {
+    const d = new Date(iso)
+    const pad = n => String(n).padStart(2, '0')
+    return `${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`
+  } catch {
+    return ''
+  }
+}
+
+/**
+ * ISO日時を YYYY-MM-DD へ整形する。
+ * @param {string} iso - ISO8601文字列。
+ * @returns {string}    日付文字列。
+ */
+const toYMD = iso => {
+  try {
+    const d = new Date(iso)
+    const pad = n => String(n).padStart(2, '0')
+    return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
+  } catch {
+    return ''
+  }
+}
+
+/**
+ * 4K/FHDシーケンス表記から見やすいラベルを導出する。
+ * @param {string} value - 元文字列。
+ * @returns {string}      表示ラベル。
+ */
+const deriveSequenceLabel = value => {
+  if (!value) return ''
+  const raw = String(value).trim()
+  if (!raw) return ''
+  const match = raw.match(/^([A-Za-z]+)[-_]?(\d+)$/)
+  if (match) {
+    const [, rowRaw, colRaw] = match
+    const row = rowRaw.toUpperCase()
+    const col = parseInt(colRaw, 10)
+    if (Number.isFinite(col) && col > 0) {
+      return `${row}-${col}`
+    }
+  }
+  return raw
+}
+
+/**
+ * カメラ配列をIDごとにまとめ、FAIL優先で状態を保持する。
+ * @param {Array} cameras - カメラ配列。
+ * @returns {Array}        集約結果。
+ */
+const aggregateCameras = cameras => {
+  const byId = new Map()
+
+  for (const raw of cameras || []) {
+    const cameraId = raw?.camera_id || raw?.cameraId || raw?.name
+    if (!cameraId) continue
+    const statusUi = mapStatusApiToUi(raw?.status)
+    const detailTextRaw = typeof raw?.details === 'string' ? raw.details.trim() : ''
+    const details = detailTextRaw || '-'
+    const imagePath = raw?.image_path || null
+    const prev = byId.get(cameraId)
+
+    if (!prev) {
+      byId.set(cameraId, {
+        name: cameraId,
+        status: statusUi,
+        rawStatus: raw?.status ?? '',
+        details,
+        image_path: imagePath,
+        type: 'camera',
+      })
+    } else {
+      const nextIsFail = statusUi !== 'PASS'
+      const prevIsFail = prev.status !== 'PASS'
+
+      if (nextIsFail && !prevIsFail) {
+        prev.status = statusUi
+        prev.rawStatus = raw?.status ?? prev.rawStatus
+        if (details !== '-' || prev.details === '-' || !prev.details) {
+          prev.details = details
+        }
+        prev.image_path = imagePath || prev.image_path
+      }
+    }
+  }
+
+  return Array.from(byId.values())
+}
+
+/**
+ * 4Kシーケンス配列をUI用フォーマットへ変換する。
+ * @param {Array} sequences - 4K配列。
+ * @returns {Array}          整形済み配列。
+ */
+const mapFourKSequences = sequences => (sequences || []).map(seq => {
+  const rawSequence = seq?.['4k_seq'] ?? seq?.['c4k_seq'] ?? seq?.four_k_seq ?? seq?.seq ?? ''
+  const label = deriveSequenceLabel(rawSequence)
+  const statusUi = mapStatusApiToUi(seq?.status)
+  const detailTextRaw = typeof seq?.details === 'string' ? seq.details.trim() : ''
+  const detailText = detailTextRaw || '-'
+
+  return {
+    name: label || seq?.camera_id || rawSequence || '-',
+    label: label || seq?.camera_id || rawSequence || '-',
+    status: statusUi,
+    rawStatus: seq?.status ?? '',
+    details: detailText,
+    type: 'sequence',
+    rawSequence: rawSequence || '',
+  }
+})
+
+/**
+ * 画像検査ロット関連の各種取得APIを隠蔽し、UI層向けの操作関数を提供するカスタムフック。
+ * キャッシュやフェッチ制御、ダミーデータ fallback を一箇所で管理する。
+ * @returns {object} ロット/統計/ショット取得のための関数群。
+ */
+export const useLotsData = () => {
+  // API仕様に合わせたダミー応答（将来は fetch で置き換え）
+  const [apiPayload] = useState(SAMPLE_LOTS)
+
+  // ---- サマリー(API) キャッシュ ----
+  // key: `${sectionCode}|${date}` または `${sectionCode}|LATEST`
+  const [summaryCache, setSummaryCache] = useState({})
+
+  // ▼ 修正: dateが未指定(null/undefined)ならクエリに含めない（API側の最新自動取得に任せる）
+  /**
+   * サマリーAPIを叩き、セクション×日付の集計を取得する。
+   * @param {string} sectionDisplayName - 表示名（例: バネ留め）。
+   * @param {string} [date]             - YYYY-MM-DD。省略で最新。
+   * @returns {Promise<object>}          APIレスポンス。
+   */
+  const fetchSummary = async (sectionDisplayName, date) => {
+    const sectionCode = SECTION_TO_CODE[sectionDisplayName]
+    if (!sectionCode) return Promise.reject(new Error(`Unknown section: ${sectionDisplayName}`))
+    
+    // dateが無い場合は 'LATEST' をキーにする
+    const cacheKey = `${sectionCode}|${date || 'LATEST'}`
+
+    if (summaryCache[cacheKey]) return summaryCache[cacheKey]
+
+    const base = process.env.NEXT_PUBLIC_BASE_PATH || ''
+    
+    // クエリパラメータの構築
+    const params = { section: sectionCode }
+    if (date) {
+      params.date = date
+    }
+    // dateがない場合はパラメータに含めない -> APIが最新を返す
+    
+    const qs = new URLSearchParams(params).toString()
+    const res = await fetch(`${base}/api/inspections/summary?${qs}`)
+    if (!res.ok) throw new Error(`Failed to fetch summary ${res.status}`)
+    const data = await res.json()
+
+    setSummaryCache(prev => ({ ...prev, [cacheKey]: data }))
+    return data
+  }
+
+  // ローカル計算による API レスポンス形のサマリー生成
+  /**
+   * APIが未設定/エラーの場合のローカルサマリーを計算する。
+   * @param {string} sectionDisplayName - セクション表示名。
+   * @param {string} [date]             - 対象日付。
+   * @returns {object}                   疑似APIレスポンス。
+   */
+  const buildLocalSummary = (sectionDisplayName, date) => {
+    const sectionCode = SECTION_TO_CODE[sectionDisplayName]
+    const ymd = date || todayYMD()
+    const sampleKey = `${sectionCode}|${ymd}`
+    // 1) サンプルサマリーがあれば最優先で返す
+    if (SAMPLE_SUMMARIES[sampleKey]) return SAMPLE_SUMMARIES[sampleKey]
+    const lots = getSectionLots(sectionDisplayName, ymd)
+    const total = lots.length
+    const pass = lots.filter(l => getLotStatus(l) === 'PASS').length
+    const fail = total - pass
+    const passRate = total > 0 ? Math.round((pass / total) * 100) : 100
+
+    const failedCameras = lots.flatMap(l => l.cameras.filter(c => mapStatusApiToUi(c.status) !== 'PASS' && c.details && c.details !== '-'))
+    const reasonCounts = failedCameras.reduce((acc, c) => {
+      acc[c.details] = (acc[c.details] || 0) + 1
+      return acc
+    }, {})
+    const failReasons = Object.entries(reasonCounts)
+      .map(([reason, count]) => ({ reason, count }))
+      .sort((a, b) => b.count - a.count)
+
+    return {
+      section: sectionCode,
+      date: ymd,
+      total_count: total,
+      pass_count: pass,
+      fail_count: fail,
+      pass_rate: passRate,
+      fail_reasons: failReasons
+    }
+  }
+
+  // ---- アダプト層：APIデータ => 既存UI互換データ ----
+  /**
+   * APIロットをUIで扱いやすい構造へ変換する。
+   * @param {object} lot - APIレスポンスロット。
+   * @returns {object}    UI向けロット。
+   */
+  const adaptLotToUi = useCallback((lot) => {
+    const sectionDisplay = normalizeSection(lot.section)
+    const overallStatus = typeof lot.pass === 'boolean' ? (lot.pass ? 'PASS' : 'FAIL') : undefined
+    const cameraLikeItems = Array.isArray(lot.four_k_sequences) && lot.four_k_sequences.length > 0
+      ? mapFourKSequences(lot.four_k_sequences)
+      : aggregateCameras(lot.cameras)
+
+    return {
+      time: toHHMMSS(lot.captured_at),
+      date: toYMD(lot.captured_at),
+      timestamp: new Date(lot.captured_at).getTime(),
+      section: sectionDisplay,
+      sectionCode: typeof lot.section === 'string' ? lot.section : undefined,
+      lotId: lot.lot_id,
+      cameras: cameraLikeItems,
+      overallStatus,
+      representativeImage: normalizeImagePath(lot.representative_image),
+    }
+  }, [])
+
+  // セクションごとに時刻降順で整形したUI向けロット配列（サンプルデータベース）
+  const uiLots = useMemo(() => {
+    const lots = (apiPayload?.lots || []).map(adaptLotToUi)
+    // captured_at 降順
+    return lots.sort((a, b) => b.timestamp - a.timestamp)
+  }, [adaptLotToUi, apiPayload])
+
+  useEffect(() => {
+    if (!uiLots.length) return
+    setLotUiIndex(prev => {
+      const next = { ...prev }
+      let changed = false
+      for (const lot of uiLots) {
+        if (next[lot.lotId] !== lot) {
+          next[lot.lotId] = lot
+          changed = true
+        }
+      }
+      return changed ? next : prev
+    })
+  }, [uiLots])
+
+  // ---- ロット一覧(API) 対応 ----
+  // raw: APIの返却をページ結合して保存、ui: アダプト済み配列
+  const [lotsRawCache, setLotsRawCache] = useState({}) 
+  const [lotsUiCache, setLotsUiCache] = useState({})   
+  const [lotRawIndex, setLotRawIndex] = useState({})   
+  const [lotUiIndex, setLotUiIndex] = useState({})     
+  const [lotShotsCache, setLotShotsCache] = useState({}) 
+  const [lotShotsStatus, setLotShotsStatus] = useState({}) 
+  const [datesCache, setDatesCache] = useState({})      
+
+  // in-flight guards
+  const inFlightSummaryRef = useRef(new Set()) 
+  const inFlightLotsRef = useRef(new Set())    
+  const inFlightShotsRef = useRef(new Set())   
+  const inFlightDatesRef = useRef(new Set())   
+  const inFlightLotDetailRef = useRef(new Set()) 
+
+  /**
+   * 指定セクションのロット一覧をページングしながら全件取得する。
+   * @param {string} sectionDisplayName - セクション表示名。
+   * @param {string|null} date          - 日付（nullで最新）。
+   * @param {number} [limit=200]        - 1ページ当たりアイテム数。
+   * @returns {Promise<Array|undefined>} 取得済みUIロット配列。
+   */
+  const fetchLotsAllPages = async (sectionDisplayName, date, limit = 200) => {
+    const sectionCode = SECTION_TO_CODE[sectionDisplayName]
+    if (!sectionCode) throw new Error(`Unknown section: ${sectionDisplayName}`)
+    const dateKey = resolveDateKey(date)
+    const hasDate = dateKey !== 'LATEST'
+    const cacheKeyRaw = buildCacheKey(sectionCode, date)
+    const cacheKeyUi = buildCacheKey(sectionDisplayName, date)
+    if (lotsRawCache[cacheKeyRaw] && lotsUiCache[cacheKeyUi]) return lotsUiCache[cacheKeyUi]
+    if (inFlightLotsRef.current.has(cacheKeyRaw)) return undefined
+    inFlightLotsRef.current.add(cacheKeyRaw)
+
+    const base = process.env.NEXT_PUBLIC_BASE_PATH || ''
+    let page = 1
+    let totalPages = 1
+    const allLots = []
+
+    while (page <= totalPages) {
+      const params = { section: sectionCode, page: String(page), limit: String(limit ?? 200) }
+      if (hasDate) params.date = dateKey
+      const qs = new URLSearchParams(params).toString()
+      const res = await fetch(`${base}/api/inspections/lots?${qs}`)
+      if (!res.ok) throw new Error(`Failed to fetch lots ${res.status}`)
+      const data = await res.json()
+      totalPages = Number(data.total_pages || 1)
+      page = Number(data.current_page || page) + 1
+      if (Array.isArray(data.lots)) allLots.push(...data.lots)
+    }
+
+    const rawJoined = { total_pages: totalPages, current_page: 1, lots: allLots }
+    setLotsRawCache(prev => ({ ...prev, [cacheKeyRaw]: rawJoined }))
+
+    setLotRawIndex(prev => {
+      const next = { ...prev }
+      for (const l of allLots) next[l.lot_id] = l
+      return next
+    })
+
+    const adapted = (allLots || []).map(adaptLotToUi).sort((a, b) => b.timestamp - a.timestamp)
+    setLotsUiCache(prev => ({ ...prev, [cacheKeyUi]: adapted }))
+    setLotUiIndex(prev => {
+      const next = { ...prev }
+      let changed = false
+      for (const lot of adapted) {
+        if (next[lot.lotId] !== lot) {
+          next[lot.lotId] = lot
+          changed = true
+        }
+      }
+      return changed ? next : prev
+    })
+    if (adapted.length) {
+      const uniqueDates = Array.from(new Set(adapted.map(l => l.date).filter(Boolean)))
+      if (uniqueDates.length) {
+        setDatesCache(prev => {
+          const existing = prev[sectionDisplayName] || []
+          const merged = Array.from(new Set([...existing, ...uniqueDates]))
+            .sort((a, b) => (a < b ? 1 : a > b ? -1 : 0))
+          return merged.length === existing.length && merged.every((d, idx) => d === existing[idx]) ? prev : { ...prev, [sectionDisplayName]: merged }
+        })
+      }
+    }
+
+    if (!hasDate) {
+      setLotsUiCache(prev => {
+        const latestKey = buildCacheKey(sectionDisplayName, null)
+        if (latestKey === cacheKeyUi) return prev
+        return { ...prev, [latestKey]: adapted }
+      })
+      setLotsRawCache(prev => {
+        const latestKey = buildCacheKey(sectionCode, null)
+        if (latestKey === cacheKeyRaw) return prev
+        return { ...prev, [latestKey]: rawJoined }
+      })
+    }
+
+    inFlightLotsRef.current.delete(cacheKeyRaw)
+    return adapted
+  }
+
+  /**
+   * セクション毎にロットデータが存在する日付一覧を取得する。
+   * @param {string} sectionDisplayName - セクション表示名。
+   * @returns {Promise<Array|undefined>} 取得済み日付配列。
+   */
+  const fetchAvailableDates = async (sectionDisplayName) => {
+    const sectionCode = SECTION_TO_CODE[sectionDisplayName]
+    if (!sectionCode) throw new Error(`Unknown section: ${sectionDisplayName}`)
+    if (datesCache[sectionDisplayName]) return datesCache[sectionDisplayName]
+    if (inFlightDatesRef.current.has(sectionDisplayName)) return undefined
+    inFlightDatesRef.current.add(sectionDisplayName)
+
+    try {
+      const base = process.env.NEXT_PUBLIC_BASE_PATH || ''
+      const res = await fetch(`${base}/api/inspections/sections/${encodeURIComponent(sectionCode)}/dates`)
+      if (!res.ok) throw new Error(`Failed to fetch dates ${res.status}`)
+      const data = await res.json()
+      const dates = Array.isArray(data?.dates) ? data.dates : []
+      setDatesCache(prev => ({ ...prev, [sectionDisplayName]: dates }))
+      return dates
+    } finally {
+      inFlightDatesRef.current.delete(sectionDisplayName)
+    }
+  }
+
+  /**
+   * セクションと日付を指定してロット配列を取得する。未キャッシュならフェッチをトリガー。
+   * @param {string} section - 表示名。
+   * @param {string} [date]  - YYYY-MM-DD。
+   * @returns {Array}         UIロット配列。
+   */
+  const getSectionLots = (section, date) => {
+    const normalized = normalizeSection(section)
+    const normalizedDateInput = typeof date === 'string' ? date.trim() : date
+    const hasExplicitDate = Boolean(normalizedDateInput)
+    const resolvedDate = hasExplicitDate ? normalizedDateInput : null
+
+    if (USE_API_LOTS) {
+      const cacheKeyUi = buildCacheKey(section, resolvedDate)
+      const cached = lotsUiCache[cacheKeyUi]
+      if (cached) return cached
+      fetchLotsAllPages(section, resolvedDate).catch(() => { })
+      const filtered = uiLots.filter(l => l.section === normalized)
+      if (hasExplicitDate) return filtered.filter(l => l.date === resolvedDate)
+      return filtered.sort((a, b) => b.timestamp - a.timestamp)
+    }
+
+    const filtered = uiLots.filter(l => l.section === normalized)
+    if (hasExplicitDate) return filtered.filter(l => l.date === resolvedDate)
+    return filtered.sort((a, b) => b.timestamp - a.timestamp)
+  }
+
+  const normalizeUiStatus = value => {
+    const normalized = (value || '').toString().trim().toUpperCase()
+    if (normalized === 'OK') return 'PASS'
+    if (normalized === 'NG') return 'FAIL'
+    return normalized
+  }
+
+  const getLotStatus = lot => {
+    if (!lot) return 'UNKNOWN'
+
+    const overallStatus = normalizeUiStatus(lot.overallStatus)
+    const cameraStatuses = (lot.cameras || []).map(camera => normalizeUiStatus(camera.status))
+
+    if (cameraStatuses.includes('FAIL') || overallStatus === 'FAIL') return 'FAIL'
+    if (cameraStatuses.includes('MISSING') || overallStatus === 'MISSING') return 'MISSING'
+    if (overallStatus === 'PASS') return 'PASS'
+
+    if (cameraStatuses.length === 0) return overallStatus || 'UNKNOWN'
+
+    if (cameraStatuses.every(status => status === 'PASS')) return 'PASS'
+
+    if (cameraStatuses.some(status => status)) return 'FAIL'
+
+    return 'UNKNOWN'
+  }
+
+  // 同期API: UI互換のため、最新取得済みのAPI値を返却し、未取得ならリクエストを発火してローカル計算をフォールバック
+  const [latestSummary, setLatestSummary] = useState({}) // key: `${section}|${date}` -> { total_count, pass_count, ... }
+
+  // ▼ 修正: dateを指定してデータを取得（未指定ならLATESTとして扱う）
+  const primeSummary = (section, date) => {
+    // dateが無い場合は 'LATEST' をキーにする
+    const key = `${section}|${date || 'LATEST'}`
+
+    if (latestSummary[key]) return
+    if (inFlightSummaryRef.current.has(key)) return
+
+    if (USE_API_SUMMARY) {
+      inFlightSummaryRef.current.add(key)
+      // dateがnull/undefinedならそのまま渡す（fetchSummary側で処理）
+      fetchSummary(section, date)
+        .then(data => setLatestSummary(prev => ({ ...prev, [key]: data })))
+        .catch(() => { /* サイレント失敗 */ })
+        .finally(() => { inFlightSummaryRef.current.delete(key) })
+    } else {
+      const local = buildLocalSummary(section, date)
+      setLatestSummary(prev => ({ ...prev, [key]: local }))
+    }
+  }
+
+  // ▼ 修正: date引数を無視せず、渡された日付（またはundefined）を使うように変更
+// 修正前と修正後の違い： return オブジェクトに date: api.date を追加しました
+  const getSectionStats = (section, date) => {
+    // 引数のdateを使う（指定なしならLATEST）
+    const key = `${section}|${date || 'LATEST'}`
+    
+    let api = latestSummary[key]
+    if (!api) {
+      primeSummary(section, date)
+      if (!USE_API_SUMMARY) api = buildLocalSummary(section, date)
+    }
+    if (api) {
+      return {
+        total: api.total_count ?? 0,
+        pass: api.pass_count ?? 0,
+        fail: api.fail_count ?? 0,
+        passRate: api.pass_rate ?? (api.total_count ? Math.round((api.pass_count / api.total_count) * 100) : 100),
+        date: api.date // ★ここを追加！APIが返した日付情報をUIに渡す
+      }
+    }
+    // 最後の保険: 空
+    return { total: 0, pass: 0, fail: 0, passRate: 100, date: null }
+  }
+
+  // ▼ 修正: こちらも同様に date引数を使うように変更
+  const getFailReasons = (section, date) => {
+    const key = `${section}|${date || 'LATEST'}`
+    
+    let api = latestSummary[key]
+    if (!api) {
+      primeSummary(section, date)
+      if (!USE_API_SUMMARY) api = buildLocalSummary(section, date)
+    }
+    if (api && Array.isArray(api.fail_reasons)) {
+      const total = api.fail_reasons.reduce((s, r) => s + (r.count || 0), 0) || 0
+      return api.fail_reasons.map(r => ({
+        reason: r.reason,
+        count: r.count,
+        percentage: total ? Math.round((r.count / total) * 100) : 0
+      }))
+    }
+    return []
+  }
+
+  const getLatestLot = (section, date) => getSectionLots(section, date)[0] || null
+
+  // 利用可能な日付一覧（降順）
+  const getAvailableDates = (section) => {
+    if (USE_API_LOTS) {
+      const cached = datesCache[section]
+      if (cached) return cached
+      fetchAvailableDates(section).catch(() => { })
+    }
+    const lots = getSectionLots(section)
+    const set = new Set(lots.map(l => l.date))
+    return Array.from(set).sort((a, b) => (a < b ? 1 : a > b ? -1 : 0))
+  }
+
+  // ---- 詳細表示向けヘルパ ----
+  const getLotShots = (lotId, options = {}) => {
+    const shotTypeNormalized = normalizeShotType(options?.type)
+    if (USE_API_LOTS) {
+      const cached = lotShotsCache[buildShotCacheKey(lotId, shotTypeNormalized)]
+      return Array.isArray(cached?.shots) ? cached.shots : []
+    }
+    const lot = (apiPayload?.lots || []).find(l => l.lot_id === lotId)
+    if (!lot) return []
+
+    if (shotTypeNormalized === '4K') {
+      const sequences = Array.isArray(lot.four_k_sequences) ? lot.four_k_sequences : []
+      const normalizedSequences = sequences.map(seq => {
+        const sequenceValue = seq?.['4k_seq'] ?? seq?.['c4k_seq'] ?? seq?.four_k_seq ?? seq?.seq ?? null
+        return {
+          ...seq,
+          image_path: seq?.image_path ? normalizeImagePath(seq.image_path) : seq?.image_path,
+          ['4k_seq']: sequenceValue,
+          ['c4k_seq']: seq?.['c4k_seq'] ?? seq?.four_k_seq ?? seq?.seq ?? null,
+          four_k_seq: seq?.four_k_seq ?? sequenceValue,
+        }
+      })
+      return normalizedSequences
+    }
+
+    if (shotTypeNormalized !== SHOT_DEFAULT_TYPE) return []
+
+    return (lot.cameras || []).map(c => ({
+      camera_id: c.camera_id,
+      status: c.status,
+      details: c.details,
+      image_path: c.image_path,
+    }))
+  }
+
+  const getLotShotsSummary = (lotId, options = {}) => {
+    if (!lotId) return null
+    const shotTypeNormalized = normalizeShotType(options?.type)
+    if (USE_API_LOTS) {
+      const cached = lotShotsCache[buildShotCacheKey(lotId, shotTypeNormalized)]
+      if (cached) return cached.summary || normalizeShotSummary(null, cached.shots)
+      return null
+    }
+    const shots = getLotShots(lotId, options)
+    return normalizeShotSummary(null, shots)
+  }
+
+  const ensureLotShotsLoaded = async (lotId, options = {}) => {
+    if (!USE_API_LOTS) return
+    if (!lotId) return
+    const shotTypeNormalized = normalizeShotType(options?.type)
+    const cacheKey = buildShotCacheKey(lotId, shotTypeNormalized)
+    if (lotShotsCache[cacheKey]) {
+      setLotShotsStatus(prev => (prev[cacheKey] === 'success' ? prev : { ...prev, [cacheKey]: 'success' }))
+      return
+    }
+    if (inFlightShotsRef.current.has(cacheKey)) return
+    inFlightShotsRef.current.add(cacheKey)
+    setLotShotsStatus(prev => (prev[cacheKey] === 'loading' ? prev : { ...prev, [cacheKey]: 'loading' }))
+    try {
+      const base = process.env.NEXT_PUBLIC_BASE_PATH || ''
+      const typeSegment = shotTypeNormalized === SHOT_DEFAULT_TYPE ? '' : `/${encodeURIComponent(shotTypeNormalized)}`
+      const res = await fetch(`${base}/api/inspections/lots/${encodeURIComponent(lotId)}/shots${typeSegment}`)
+      if (!res.ok) throw new Error(`Failed to fetch shots ${res.status}`)
+      const data = await res.json()
+      const shots = Array.isArray(data?.shots) ? data.shots : []
+      const summary = normalizeShotSummary(data?.summary, shots)
+      setLotShotsCache(prev => ({ ...prev, [cacheKey]: { shots, summary } }))
+      setLotShotsStatus(prev => ({ ...prev, [cacheKey]: 'success' }))
+    } catch {
+      setLotShotsStatus(prev => ({ ...prev, [cacheKey]: 'error' }))
+    } finally {
+      inFlightShotsRef.current.delete(cacheKey)
+    }
+  }
+
+  const getLotShotsStatus = (lotId, options = {}) => {
+    if (!lotId) return 'idle'
+    const shotTypeNormalized = normalizeShotType(options?.type)
+    const cacheKey = buildShotCacheKey(lotId, shotTypeNormalized)
+    if (!USE_API_LOTS) {
+      const lot = (apiPayload?.lots || []).find(l => l.lot_id === lotId)
+      if (!lot) return 'idle'
+      if (shotTypeNormalized === '4K') {
+        const sequences = Array.isArray(lot.four_k_sequences) ? lot.four_k_sequences : []
+        return sequences.length > 0 ? 'success' : 'success'
+      }
+      if (shotTypeNormalized !== SHOT_DEFAULT_TYPE) return 'success'
+      const cameras = Array.isArray(lot.cameras) ? lot.cameras : []
+      return cameras.length > 0 ? 'success' : 'success'
+    }
+    return lotShotsStatus[cacheKey] || (lotShotsCache[cacheKey] ? 'success' : 'idle')
+  }
+
+  const getLotShotsByCamera = (lotId, options = {}) => {
+    const shots = getLotShots(lotId, options)
+
+    const grouped = shots.reduce((acc, s) => {
+      const key = s?.camera_id || s?.cameraId || s?.['4k_seq'] || s?.['c4k_seq'] || s?.four_k_seq || 'unknown'
+      if (!acc[key]) acc[key] = []
+      acc[key].push(s)
+      return acc
+    }, {})
+
+    return grouped
+  }
+
+  const ensureLotLoaded = useCallback(async (lotId) => {
+    if (!lotId) return null
+    if (!USE_API_LOTS) {
+      return uiLots.find(l => l.lotId === lotId) || null
+    }
+    if (lotUiIndex[lotId]) return lotUiIndex[lotId]
+    if (lotRawIndex[lotId]) {
+      const adapted = adaptLotToUi(lotRawIndex[lotId])
+      setLotUiIndex(prev => {
+        const prevLot = prev[lotId]
+        if (prevLot && prevLot.timestamp === adapted.timestamp) return prev
+        return { ...prev, [lotId]: adapted }
+      })
+      return adapted
+    }
+    if (inFlightLotDetailRef.current.has(lotId)) return null
+    inFlightLotDetailRef.current.add(lotId)
+    try {
+      const base = process.env.NEXT_PUBLIC_BASE_PATH || ''
+      const res = await fetch(`${base}/api/inspections/lots/${encodeURIComponent(lotId)}`)
+      if (!res.ok) throw new Error(`Failed to fetch lot ${res.status}`)
+      const data = await res.json()
+      const rawLot = data?.lot || data
+      if (!rawLot || !rawLot.lot_id) return null
+
+      setLotRawIndex(prev => ({ ...prev, [rawLot.lot_id]: rawLot }))
+
+      const adapted = adaptLotToUi(rawLot)
+      setLotUiIndex(prev => ({ ...prev, [adapted.lotId]: adapted }))
+
+      const sectionName = adapted.section
+      const date = adapted.date
+
+      if (sectionName && date) {
+        const cacheKeyUi = `${sectionName}|${date}`
+        setLotsUiCache(prev => {
+          const existing = prev[cacheKeyUi] || []
+          if (existing.some(l => l.lotId === adapted.lotId)) return prev
+          const updated = [...existing, adapted].sort((a, b) => b.timestamp - a.timestamp)
+          return { ...prev, [cacheKeyUi]: updated }
+        })
+
+        setDatesCache(prev => {
+          const prevDates = prev[sectionName] || []
+          if (prevDates.includes(date)) return prev
+          const nextDates = [...prevDates, date].sort((a, b) => (a < b ? 1 : a > b ? -1 : 0))
+          return { ...prev, [sectionName]: nextDates }
+        })
+      }
+
+      return adapted
+    } catch {
+      return null
+    } finally {
+      inFlightLotDetailRef.current.delete(lotId)
+    }
+  }, [adaptLotToUi, lotRawIndex, lotUiIndex, uiLots])
+
+  const getLotById = useCallback((lotId) => {
+    if (!lotId) return null
+    if (lotUiIndex[lotId]) return lotUiIndex[lotId]
+    if (lotRawIndex[lotId]) return adaptLotToUi(lotRawIndex[lotId])
+    return uiLots.find(l => l.lotId === lotId) || null
+  }, [adaptLotToUi, lotUiIndex, lotRawIndex, uiLots])
+
+  // 初期プリフェッチ（APIモード時）
+  useEffect(() => {
+    const sections = Object.keys(SECTION_TO_CODE)
+    
+    // ▼ 修正: サマリーは「最新(date=null)」をデフォルトで取得するように変更
+    sections.forEach(sec => {
+      // dateなし（LATEST）でプリフェッチ
+      const key = `${sec}|LATEST`
+      if (!latestSummary[key] && !inFlightSummaryRef.current.has(key)) primeSummary(sec, null)
+    })
+
+    if (USE_API_LOTS) {
+      sections.forEach(sec => {
+        const code = SECTION_TO_CODE[sec]
+        const rawKey = buildCacheKey(code, null)
+        const uiKey = buildCacheKey(sec, null)
+        if (!lotsRawCache[rawKey] && !lotsUiCache[uiKey] && !inFlightLotsRef.current.has(rawKey)) {
+          fetchLotsAllPages(sec, null).catch(() => { })
+        }
+      })
+      // 利用可能日付もプリフェッチ
+      sections.forEach(sec => {
+        if (!datesCache[sec] && !inFlightDatesRef.current.has(sec)) fetchAvailableDates(sec).catch(() => { })
+      })
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [latestSummary, lotsRawCache, lotsUiCache, datesCache])
+
+  return {
+    // 既存UIが参照する互換データ
+    lotsData: uiLots,
+
+    // 必要であれば生API形も公開（将来の統合向け）
+    apiPayload,
+    getSectionLots,
+    getLotStatus,
+    getSectionStats,
+    getFailReasons,
+    getLatestLot,
+    getAvailableDates,
+    getLotShots,
+    getLotShotsByCamera,
+    getLotShotsStatus,
+    getLotShotsSummary,
+    getLotById,
+    ensureLotLoaded,
+    ensureLotShotsLoaded,
+  }
+}
\ No newline at end of file
diff --git a/javascript-version/src/app/(dashboard)/image-inspection/page.jsx b/javascript-version/src/app/(dashboard)/image-inspection/page.jsx
new file mode 100644
index 000000000..2f0b3bcc8
--- /dev/null
+++ b/javascript-version/src/app/(dashboard)/image-inspection/page.jsx
@@ -0,0 +1,338 @@
+'use client'
+
+/*
+======== ファイル概要 ========
+画像検査ダッシュボード全体のページエントリ。タブによるセクション切替や
+最新ロットの概要表示、ロット詳細モーダルの状態管理を担っている。
+*/
+
+// React Imports
+import { useEffect, useMemo, useState } from 'react'
+
+import { usePathname, useRouter, useSearchParams } from 'next/navigation'
+
+// MUI Imports
+import Grid from '@mui/material/Grid'
+import Card from '@mui/material/Card'
+import CardActionArea from '@mui/material/CardActionArea'
+import CardContent from '@mui/material/CardContent'
+import Typography from '@mui/material/Typography'
+import Tabs from '@mui/material/Tabs'
+import Tab from '@mui/material/Tab'
+import Box from '@mui/material/Box'
+import { styled } from '@mui/material/styles'
+
+// データ取得用カスタムフック
+import { useLotsData } from './hooks/useLotsData'
+
+// セクションごとのタブ・カメラグリッド・サマリー表示用コンポーネント
+import SectionTab from './components/sections/SectionTab'
+import CameraGrid from './components/grid/CameraGrid'
+import SectionSummary from './components/lots/SectionSummary'
+
+// セクション設定（カメラ構成など）
+import { SECTION_CONFIG } from './utils/sectionConfig'
+
+// タブのスタイル定義
+const StyledTab = styled(Tab)(({ theme }) => ({
+  textTransform: 'none',
+  fontWeight: 600,
+  fontSize: '0.875rem',
+  minHeight: 48,
+  '&.Mui-selected': {
+    color: theme.palette.primary.main,
+    borderBottom: `2px solid ${theme.palette.primary.main}`,
+    backgroundColor: theme.palette.primary.light + '20',
+  },
+}))
+
+// タブ全体のスタイル定義
+const StyledTabs = styled(Tabs)(({ theme }) => ({
+  borderBottom: `1px solid ${theme.palette.divider}`,
+  '& .MuiTabs-indicator': {
+    display: 'none',
+  },
+}))
+
+const SECTION_TAB_INDEX = {
+  overview: 0,
+  'バネ留め': 1,
+  'A層': 2,
+}
+
+// メインコンポーネント
+/**
+ * 画像検査モジュールの全体ページ。URLクエリとセクションタブの状態を同期し、
+ * ロットカードやサマリーの表示を統括する。
+ * @returns {JSX.Element} 画像検査ダッシュボード全体のレイアウト。
+ */
+const ImageInspection = () => {
+  // 現在選択中のタブインデックス
+  const [activeTab, setActiveTab] = useState(0)
+  const [syncedLotIdForTab, setSyncedLotIdForTab] = useState(null)
+
+  // 検査ロット関連のデータ取得・操作関数
+  const {
+    getSectionLots,
+    getLotStatus,
+    getSectionStats,
+    getFailReasons,
+    getLatestLot,
+    getLotShotsByCamera,
+    getLotShots,
+    getLotShotsStatus,
+    getLotShotsSummary,
+    getAvailableDates,
+    ensureLotShotsLoaded,
+    getLotById,
+    ensureLotLoaded,
+  } = useLotsData()
+
+  const router = useRouter()
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+  const selectedLotId = searchParams.get('lot')
+
+  // ======== 処理ステップ: 初期フェッチとタブ同期 ========
+  // 1. URLにlotクエリがあれば該当ロットを確実にロードする。
+  // 2. ロード済みロットのセクションに合わせてタブを強制同期する。意図としてUXの混乱を避ける。
+  useEffect(() => {
+    if (!selectedLotId) return
+    ensureLotLoaded(selectedLotId)
+  }, [selectedLotId, ensureLotLoaded])
+
+  const selectedLotInfo = useMemo(() => getLotById(selectedLotId), [getLotById, selectedLotId])
+
+  useEffect(() => {
+    if (!selectedLotInfo) {
+      if (syncedLotIdForTab !== null) setSyncedLotIdForTab(null)
+      return
+    }
+
+    const targetIndex = SECTION_TAB_INDEX[selectedLotInfo.section]
+    if (typeof targetIndex !== 'number') return
+
+    if (syncedLotIdForTab === selectedLotInfo.lotId) return
+
+    setActiveTab(targetIndex)
+    setSyncedLotIdForTab(selectedLotInfo.lotId)
+  }, [selectedLotInfo, syncedLotIdForTab])
+
+  const handleSectionCardClick = sectionKey => {
+    const targetIndex = SECTION_TAB_INDEX[sectionKey]
+    if (typeof targetIndex !== 'number') return
+    if (targetIndex === activeTab) return
+    setActiveTab(targetIndex)
+  }
+
+  /**
+   * クエリパラメータの lot 指定と内部状態を同期する。
+   * @param {string|null} lotId - 選択したロットID。null の場合はクエリを削除する。
+   */
+  const updateUrlWithLot = lotId => {
+    const currentLot = searchParams.get('lot')
+    const params = new URLSearchParams(searchParams.toString())
+
+    if (lotId) {
+      if (currentLot === lotId) return
+      params.set('lot', lotId)
+    } else {
+      if (!currentLot) return
+      params.delete('lot')
+    }
+
+    const queryString = params.toString()
+    const url = queryString ? `${pathname}?${queryString}` : pathname
+    router.push(url, { scroll: false })
+  }
+
+  const handleOpenLot = lot => {
+    ensureLotLoaded?.(lot.lotId)
+    updateUrlWithLot(lot.lotId)
+  }
+
+  const handleCloseLot = () => {
+    updateUrlWithLot(null)
+  }
+
+  // 画像拡大表示用ライトボックス状態
+  const [lightbox, setLightbox] = useState({ open: false, src: '', fallback: '', alt: '' })
+
+  // タブ切り替え時の処理
+  const handleTabChange = (event, newValue) => {
+    setActiveTab(newValue)
+  }
+
+  // 「全体表示」タブの内容
+  /**
+   * 全体表示タブでは最新ロットから推測した各セクションのリアルタイムカードを描画する。
+   * @returns {JSX.Element} グリッド状に並んだセクション概要カード群。
+   */
+  const renderOverviewTab = () => {
+    const renderRealtimeCard = sectionKey => {
+      const latest = getLatestLot(sectionKey)
+      const lotStatus = latest ? getLotStatus(latest) : undefined
+      const fallbackNames = SECTION_CONFIG[sectionKey]?.cameras || []
+
+      const cameraNames = (() => {
+        if (sectionKey === 'A層') {
+          return fallbackNames
+        }
+        const dynamicNames = Array.from(new Set((latest?.cameras || []).map(cam => cam?.name).filter(Boolean)))
+        return dynamicNames.length ? dynamicNames : fallbackNames
+      })()
+
+      const statusByName = (() => {
+        if (sectionKey === 'A層') {
+          const normalizedLotStatus = (lotStatus || '').toString().trim().toUpperCase()
+          const mappedStatus = (() => {
+            if (normalizedLotStatus === 'PASS') return 'PASS'
+            if (normalizedLotStatus === 'FAIL') return 'FAIL'
+            if (normalizedLotStatus === 'MISSING') return 'MISSING'
+            if (normalizedLotStatus === 'OK') return 'PASS'
+            if (normalizedLotStatus === 'NG') return 'FAIL'
+            return normalizedLotStatus || ''
+          })()
+          if (!mappedStatus) return {}
+          return Object.fromEntries(fallbackNames.map(name => [name, mappedStatus]))
+        }
+        const entries = (latest?.cameras || [])
+          .filter(cam => cam?.name)
+          .map(cam => [cam.name, cam.status])
+        return Object.fromEntries(entries)
+      })()
+
+      const imageByName = (() => {
+        if (!latest) return {}
+        if (sectionKey === 'A層') {
+          const representative = latest.representativeImage
+          if (!representative) return {}
+          return Object.fromEntries((cameraNames || []).map(name => [name, representative]))
+        }
+        const entries = (latest.cameras || [])
+          .filter(cam => cam?.name && cam?.image_path)
+          .map(cam => [cam.name, cam.image_path])
+        if (entries.length > 0) return Object.fromEntries(entries)
+        if (latest.representativeImage) {
+          return Object.fromEntries((cameraNames || []).map(name => [name, latest.representativeImage]))
+        }
+        return {}
+      })()
+
+      const cameraCount = cameraNames.length
+      const title = `${sectionKey}検査`
+
+      return (
+        <Grid item xs={12} lg={6} sx={{ display: 'flex' }} key={sectionKey}>
+          <Card sx={{ height: '100%', display: 'flex', flexDirection: 'column', width: '100%' }}>
+            <CardActionArea
+              sx={{
+                height: '100%',
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'stretch',
+                transition: theme => theme.transitions.create(['transform', 'box-shadow'], {
+                  duration: theme.transitions.duration.shortest,
+                }),
+                '&:hover': {
+                  transform: 'translateY(-4px)',
+                  boxShadow: theme => theme.shadows[4],
+                },
+                '&:focus-visible': {
+                  transform: 'translateY(-4px)',
+                  boxShadow: theme => theme.shadows[4],
+                },
+              }}
+              onClick={() => handleSectionCardClick(sectionKey)}
+            >
+              <CardContent sx={{ flexGrow: 1 }}>
+                <Typography variant="h6" gutterBottom>
+                  最新ログ: {title}（{cameraCount}カメラ）
+                </Typography>
+                {cameraNames.length === 0 ? (
+                  <Typography color="text.secondary">カメラ構成が取得できません。</Typography>
+                ) : (
+                  <CameraGrid
+                    cameraNames={cameraNames}
+                    statusByName={statusByName}
+    /**
+     * クエリパラメータにlotを付け替えてURLと状態を同期する。
+     * @param {string|null} lotId - 選択中ロットID。nullならクエリを削除する。
+     */
+                    imageByName={imageByName}
+                  />
+                )}
+                <Box sx={{ borderTop: 1, borderColor: 'divider', pt: 2 }}>
+                  <Typography variant="subtitle1" color="text.secondary" gutterBottom>
+                    最新の画像判定
+                  </Typography>
+                  <SectionSummary latestLot={latest} lotStatus={lotStatus} />
+                </Box>
+              </CardContent>
+            </CardActionArea>
+          </Card>
+        </Grid>
+      )
+    }
+
+    return (
+      <Grid container spacing={3}>
+        {['バネ留め', 'A層'].map(renderRealtimeCard)}
+      </Grid>
+    )
+  }
+
+  // 各セクションタブの内容（propsで必要な関数や状態を渡す）
+  /**
+   * セクションごとの詳細タブを描画し、必要なデータフェッチ関数とライトボックス状態を橋渡しする。
+   * @param {string} section - 表示対象の検査セクション名。
+   * @returns {JSX.Element} SectionTab コンポーネント。
+   */
+  const renderSectionTab = (section) => (
+    <SectionTab
+      section={section}
+      getSectionLots={getSectionLots}
+      getLotStatus={getLotStatus}
+      getLotShotsByCamera={getLotShotsByCamera}
+      getLotShots={getLotShots}
+      getLotShotsStatus={getLotShotsStatus}
+      getLotShotsSummary={getLotShotsSummary}
+      ensureLotShotsLoaded={ensureLotShotsLoaded}
+      getSectionStats={getSectionStats}
+      getFailReasons={getFailReasons}
+      lightbox={lightbox}
+      setLightbox={setLightbox}
+      getLatestLot={getLatestLot}
+      getAvailableDates={getAvailableDates}
+      selectedLotId={selectedLotId}
+      selectedLotInfo={selectedLotInfo}
+      onOpenLot={handleOpenLot}
+      onCloseLot={handleCloseLot}
+    />
+  )
+
+  // レンダリング
+  return (
+    <Box sx={{ p: 3 }}>
+      <Grid container spacing={3}>
+        {/* タブナビゲーション */}
+        <Grid item xs={12}>
+          <StyledTabs value={activeTab} onChange={handleTabChange}>
+            <StyledTab label="全体表示" />
+            <StyledTab label="バネ留め検査" />
+            <StyledTab label="A層検査" />
+          </StyledTabs>
+        </Grid>
+        {/* タブコンテンツ */}
+        <Grid item xs={12}>
+          {activeTab === 0 && renderOverviewTab()}
+          {activeTab === 1 && renderSectionTab('バネ留め')}
+          {activeTab === 2 && renderSectionTab('A層')}
+        </Grid>
+      </Grid>
+    </Box>
+  )
+}
+
+// デフォルトエクスポート
+export default ImageInspection
diff --git a/javascript-version/src/app/(dashboard)/image-inspection/utils/imageUrl.js b/javascript-version/src/app/(dashboard)/image-inspection/utils/imageUrl.js
new file mode 100644
index 000000000..18b3f2f90
--- /dev/null
+++ b/javascript-version/src/app/(dashboard)/image-inspection/utils/imageUrl.js
@@ -0,0 +1,95 @@
+/*
+======== ファイル概要 ========
+画像パスを現在ホストの3001番ポートへマッピングするためのURLユーティリティ群。
+before/after撮影の自動切り替えも提供する。
+*/
+
+const stripTrailingSlash = value => (value || '').replace(/\/$/, '')
+
+const ensureProtocol = value => {
+  if (!value) return ''
+  return /^https?:\/\//i.test(value) ? value : `http://${value}`
+}
+
+const normalizeBase = value => {
+  const trimmed = stripTrailingSlash((value || '').trim())
+  if (!trimmed) return ''
+  return stripTrailingSlash(ensureProtocol(trimmed))
+}
+
+/**
+ * ベースURLを決定する。環境変数での上書きがなければ実行中ホスト:3001を参照。
+ * @returns {string} ベースURL。
+ */
+export const getImageBase = () => {
+  const override = normalizeBase(process.env.NEXT_PUBLIC_IMAGE_BASE)
+  if (override) return override
+  if (typeof window !== 'undefined') return `http://${window.location.hostname}:3001`
+  // SSR等ウィンドウ未定義時のフォールバック
+  return 'http://localhost:3001'
+}
+
+const FALLBACK_DEFAULT_BASE = 'http://10.100.54.170:3001'
+
+/**
+ * フォールバック用のベースURLを返す。環境変数未設定時は固定IPを使う。
+ * @returns {string} フォールバックベース。
+ */
+export const getFallbackImageBase = () => normalizeBase(process.env.NEXT_PUBLIC_IMAGE_FALLBACK_BASE) || FALLBACK_DEFAULT_BASE
+
+const buildUrlWithBase = (p, base) => {
+  if (!p) return ''
+  if (/^https?:\/\//i.test(p)) return p
+  const resolvedBase = stripTrailingSlash(base || '')
+  if (!resolvedBase) return p
+  return p.startsWith('/') ? `${resolvedBase}${p}` : `${resolvedBase}/${p}`
+}
+
+/**
+ * 任意のパス/URLを、指定ベース or 現在ホストを基点にした絶対URLへ変換する。
+ * @param {string} p - 元のパス。
+ * @param {object} [options]
+ * @param {string} [options.base] - ベースURLを強制指定したい場合。
+ * @returns {string}               完全URL。
+ */
+export const toImageUrl = (p, options = {}) => buildUrlWithBase(p, options.base || getImageBase())
+
+export default toImageUrl
+
+/**
+ * beforeTest階層の画像URLを生成する。
+ * @param {string} p          - 元のパス/URL。
+ * @param {object} [options]
+ * @param {string} [options.base] - ベースURLの上書き。
+ * @returns {string}               完全URLまたは空文字。
+ */
+export const toBeforeTestUrl = (p, options = {}) => {
+  /*
+  ======== ロジック説明 ========
+  beforeTest ディレクトリは検査前の基準画像を指すため、ファイル名が取れた場合のみ貼り付ける。
+  */
+  const fname = (p || '').split('/').pop() || ''
+  if (!fname) return ''
+  const base = stripTrailingSlash(options.base || getImageBase())
+  if (!base) return ''
+  return `${base}/imageDB/beforeTest/${fname}`
+}
+
+/**
+ * afterTest階層の画像URLを生成する。
+ * @param {string} p          - 元のパス/URL。
+ * @param {object} [options]
+ * @param {string} [options.base] - ベースURL。
+ * @returns {string}               完全URLまたは空文字。
+ */
+export const toAfterTestUrl = (p, options = {}) => {
+  /*
+  ======== ロジック説明 ========
+  afterTest 側は検査後の画像を格納するため、ファイル名を抽出できない場合は空文字でエラーを避ける。
+  */
+  const fname = (p || '').split('/').pop() || ''
+  if (!fname) return ''
+  const base = stripTrailingSlash(options.base || getImageBase())
+  if (!base) return ''
+  return `${base}/imageDB/afterTest/${fname}`
+}
diff --git a/javascript-version/src/app/(dashboard)/image-inspection/utils/sectionConfig.js b/javascript-version/src/app/(dashboard)/image-inspection/utils/sectionConfig.js
new file mode 100644
index 000000000..961989d44
--- /dev/null
+++ b/javascript-version/src/app/(dashboard)/image-inspection/utils/sectionConfig.js
@@ -0,0 +1,14 @@
+/*
+======== ファイル概要 ========
+セクション名ごとにどのカメラが存在するかを定義した設定モジュール。
+*/
+/**
+ * セクション名→カメラ配列の定義。
+ * @type {Record<string, {cameras: string[]}>}
+ */
+export const SECTION_CONFIG = {
+    'バネ留め': { cameras: ['B-spring01', 'B-spring02', 'B-spring03', 'B-spring04'] },
+    'A層': { cameras: ['A-main01'] },
+}
+
+export const SECTIONS = Object.keys(SECTION_CONFIG)
diff --git a/javascript-version/src/app/(dashboard)/image-inspection/utils/summaryUtils.js b/javascript-version/src/app/(dashboard)/image-inspection/utils/summaryUtils.js
new file mode 100644
index 000000000..9772eab6a
--- /dev/null
+++ b/javascript-version/src/app/(dashboard)/image-inspection/utils/summaryUtils.js
@@ -0,0 +1,177 @@
+/*
+======== ファイル概要 ========
+ショットサマリーや判定文字列の正規化など、画像検査で共通利用する計算ユーティリティ。
+*/
+
+/**
+ * 0〜100の範囲内に丸めた整数パーセンテージを返す。
+ * @param {number} value - 元の値。
+ * @returns {number}     整数パーセント。
+ */
+const clampPercent = value => {
+  const num = typeof value === 'number' ? value : Number(value)
+  if (!Number.isFinite(num)) return 0
+  if (num < 0) return 0
+  if (num > 100) return 100
+  return Math.round(num)
+}
+
+/**
+ * 有限な数値であれば数値として返し、そうでなければ null。
+ * @param {*} value - 任意値。
+ * @returns {number|null} 有限数値。
+ */
+const toFiniteNumber = value => {
+  if (typeof value === 'number') return Number.isFinite(value) ? value : null
+  if (value == null) return null
+  const num = Number(value)
+  return Number.isFinite(num) ? num : null
+}
+
+/**
+ * 判定文字列を PASS/FAIL/MISSING に揃える下準備を行う。
+ * @param {string} status - 判定。
+ * @returns {string}      正規化結果。
+ */
+const canonicalizeStatus = status => {
+  const normalized = (status || '').toString().trim().toUpperCase()
+  if (!normalized) return ''
+  if (normalized === 'OK') return 'PASS'
+  if (normalized === 'NG') return 'FAIL'
+  return normalized
+}
+
+/**
+ * APIの生ステータスをUI表示用へ変換する。
+ * @param {string} status - 判定。
+ * @returns {string}      表示用文字列。
+ */
+export const mapStatusApiToUi = status => {
+  const canonical = canonicalizeStatus(status)
+  return canonical || '-'
+}
+
+/**
+ * ショット配列から総数/良品/不良/率を計算する。
+ * @param {Array} shots - ショット配列。
+ * @returns {object|null} サマリー。
+ */
+export const computeShotSummary = shots => {
+  const list = Array.isArray(shots) ? shots : []
+  if (list.length === 0) return null
+
+  let total = 0
+  let passCount = 0
+
+  list.forEach(item => {
+    total += 1
+    const status = mapStatusApiToUi(item?.status)
+    if (status === 'PASS') passCount += 1
+  })
+
+  const failCount = Math.max(total - passCount, 0)
+  const passRate = total ? Math.round((passCount / total) * 100) : 0
+  const failRate = total ? Math.max(0, Math.min(100, 100 - passRate)) : 0
+
+  return {
+    total,
+    passCount,
+    failCount,
+    passRate,
+    failRate,
+    // legacy aliases (to be deprecated once UI is updated)
+    okCount: passCount,
+    ngCount: failCount,
+    okRate: passRate,
+    ngRate: failRate,
+  }
+}
+
+/**
+ * API/ローカルサマリーの表記ゆれを吸収し、UIが期待するフォーマットへ揃える。
+ * @param {object} rawSummary    - サマリー候補。
+ * @param {Array} fallbackShots  - ショット配列。
+ * @returns {object|null}         正規化済みサマリー。
+ */
+export const normalizeShotSummary = (rawSummary, fallbackShots) => {
+  if (!rawSummary || typeof rawSummary !== 'object') {
+    return computeShotSummary(fallbackShots)
+  }
+
+  const totalRaw = toFiniteNumber(rawSummary.total ?? rawSummary.total_count ?? rawSummary.totalCount)
+  const passRaw = toFiniteNumber(rawSummary.pass_count ?? rawSummary.ok_count ?? rawSummary.passCount ?? rawSummary.okCount)
+  const failRaw = toFiniteNumber(rawSummary.fail_count ?? rawSummary.ng_count ?? rawSummary.failCount ?? rawSummary.ngCount)
+
+  let total = totalRaw
+  let passCount = passRaw
+  let failCount = failRaw
+
+  if (!Number.isFinite(total)) {
+    if (Number.isFinite(passCount) && Number.isFinite(failCount)) {
+      total = passCount + failCount
+    } else if (Number.isFinite(passCount)) {
+      total = passCount + Math.max(toFiniteNumber(rawSummary.missing_count) ?? 0, 0)
+    } else if (Number.isFinite(failCount)) {
+      total = failCount + Math.max(toFiniteNumber(rawSummary.missing_count) ?? 0, 0)
+    } else if (Array.isArray(fallbackShots)) {
+      total = fallbackShots.length
+    } else {
+      total = 0
+    }
+  }
+
+  if (!Number.isFinite(passCount)) {
+    if (Number.isFinite(failCount) && Number.isFinite(total)) {
+      passCount = Math.max(total - failCount, 0)
+    } else if (Array.isArray(fallbackShots)) {
+      const computed = computeShotSummary(fallbackShots)
+      passCount = computed?.passCount ?? computed?.okCount ?? 0
+      if (!Number.isFinite(failCount)) failCount = computed?.failCount ?? computed?.ngCount ?? 0
+      if (!Number.isFinite(total)) total = computed?.total ?? 0
+    } else {
+      passCount = 0
+    }
+  }
+
+  if (!Number.isFinite(failCount)) {
+    if (Number.isFinite(total) && Number.isFinite(passCount)) {
+      failCount = Math.max(total - passCount, 0)
+    } else {
+      failCount = 0
+    }
+  }
+
+  let passRate = toFiniteNumber(rawSummary.pass_rate ?? rawSummary.ok_rate ?? rawSummary.passRate ?? rawSummary.okRate)
+  if (!Number.isFinite(passRate) && Number.isFinite(total) && total > 0 && Number.isFinite(passCount)) {
+    passRate = (passCount / total) * 100
+  }
+
+  let failRate = toFiniteNumber(rawSummary.fail_rate ?? rawSummary.ng_rate ?? rawSummary.failRate ?? rawSummary.ngRate)
+  if (!Number.isFinite(failRate)) {
+    if (Number.isFinite(passRate)) {
+      failRate = 100 - passRate
+    } else if (Number.isFinite(total) && total > 0 && Number.isFinite(failCount)) {
+      failRate = (failCount / total) * 100
+    }
+  }
+
+  const safeTotal = Number.isFinite(total) ? Math.max(Math.round(total), 0) : 0
+  const safePass = Number.isFinite(passCount) ? Math.max(Math.round(passCount), 0) : 0
+  const safeFail = Number.isFinite(failCount) ? Math.max(Math.round(failCount), 0) : 0
+
+  const safePassRate = clampPercent(passRate)
+  const safeFailRate = clampPercent(failRate)
+
+  return {
+    total: safeTotal,
+    passCount: safePass,
+    failCount: safeFail,
+    passRate: safePassRate,
+    failRate: safeFailRate,
+    // legacy aliases (to be deprecated once UI is updated)
+    okCount: safePass,
+    ngCount: safeFail,
+    okRate: safePassRate,
+    ngRate: safeFailRate,
+  }
+}
diff --git a/javascript-version/src/app/(dashboard)/layout.jsx b/javascript-version/src/app/(dashboard)/layout.jsx
index ad306e9ac..793324515 100644
--- a/javascript-version/src/app/(dashboard)/layout.jsx
+++ b/javascript-version/src/app/(dashboard)/layout.jsx
@@ -1,6 +1,7 @@
 // Layout Imports
 import LayoutWrapper from '@layouts/LayoutWrapper'
 import VerticalLayout from '@layouts/VerticalLayout'
+import AuthGuard from '@components/AuthGuard'
 
 // Component Imports
 import Providers from '@components/Providers'
@@ -14,13 +15,15 @@ const Layout = async ({ children }) => {
 
   return (
     <Providers direction={direction}>
-      <LayoutWrapper
-        verticalLayout={
-          <VerticalLayout navigation={<Navigation />} navbar={<Navbar />} footer={<VerticalFooter />}>
-            {children}
-          </VerticalLayout>
-        }
-      />
+      <AuthGuard>
+        <LayoutWrapper
+          verticalLayout={
+            <VerticalLayout navigation={<Navigation />} navbar={<Navbar />} footer={<VerticalFooter />}>
+              {children}
+            </VerticalLayout>
+          }
+        />
+      </AuthGuard>
     </Providers>
   )
 }
diff --git a/javascript-version/src/app/(dashboard)/machine-status/README.md b/javascript-version/src/app/(dashboard)/machine-status/README.md
new file mode 100644
index 000000000..2cec97222
--- /dev/null
+++ b/javascript-version/src/app/(dashboard)/machine-status/README.md
@@ -0,0 +1,66 @@
+# Machine Status — ドキュメント（現状版）
+
+このフォルダ配下にページ本体・UI コンポーネント・フック・ユーティリティをまとめています。ページ直下に置き換え済みのため、インポートは相対パスで統一しています。
+
+## フォルダ構成
+
+- `page.jsx` — 画面本体（レイアウトと配線）
+- `components/` — 見た目用コンポーネント
+  - `UnitStatusLamps.jsx`
+  - `ErrorLogList.jsx`
+  - `InspectionDialogs.jsx`
+- `hooks/` — データ取得とロジック
+  - `useMachineInfo.js`
+  - `useMachineLogs.js`
+- `utils/`
+  - `date.js` — 日付/時間ユーティリティ
+
+## 役割（ざっくり）
+
+- `page.jsx`
+  - 画面の土台。UI の最小限の状態（ログのフィルタ、ダイアログ開閉、スナックバー）を持つ
+  - データはフックから受け取り、見た目用コンポーネントに渡す
+
+- `useMachineInfo.js`
+  - 機械の基本情報（名前・今日の稼働時間/生産数など）を取得
+  - 稼働時間は API 応答を起点に 1 秒ごとにカウントアップ（`started_at` が妥当ならそれを優先）
+  - 点検関連（最終点検日、点検間隔、次回日付）を管理
+  - API は `GET /api/machines/{id}` を想定（Next.js の rewrite 経由）。
+
+- `useMachineLogs.js`
+  - ログ取得（`GET /api/machines/{id}/logs`）と表示用加工（整形・ソート）
+  - ユニットごとの状態（正常/残弾わずか/残弾なし/エラー/停止中/不明）を推定
+  - 全体（大ランプ）用の状態ラベルも算出
+
+- `components/*`
+  - `UnitStatusLamps.jsx`: Unit1〜4 のランプとラベル表示のみ
+  - `ErrorLogList.jsx`: ログ一覧の表示のみ（フィルタは親で実施）
+  - `InspectionDialogs.jsx`: 点検ダイアログ一式（点検・点検間隔）
+
+- `utils/date.js`
+  - 提供関数: `parseYmdSlash`, `parseYmd`, `formatYmdSlash`, `secondsToHMS`, `daysDiff`, `addDays`
+
+## インポート方針（重要）
+
+- 本ページ配下は相対パスで統一しています。
+  - 例: `./components/UnitStatusLamps`, `./hooks/useMachineInfo`, `./utils/date`
+- なお、プロジェクト全体では `@/*` エイリアスが使えますが、machine-status 配下は移動に強い構成のため相対パス運用に寄せています。
+
+## 動作メモ
+
+- ベースパス: クライアントからの API 呼び出しは `${process.env.NEXT_PUBLIC_BASE_PATH || ''}/api/...` を利用（サブパス配備に対応）。
+- 認証トークン: `localStorage` または `sessionStorage` から参照し、`Authorization: Bearer <token>` を付与（存在時）。
+- ルーティング: このページは `(dashboard)` 配下なので `AuthGuard` の保護対象です。
+
+## よくあるつまずき（対処）
+
+- エラー: `ENOENT ... src/components/machine-status/utils/date.js` など、古いパス参照でビルド失敗
+  - 対処: インポートを現行の相対パス（`./utils/date` 等）に修正
+  - それでも直らない場合は開発サーバーを再起動（必要なら `.next` キャッシュ削除）
+
+## 触りたいときの目安
+
+- 画面の配置やボタンを増やす → `page.jsx`
+- API の取り回し / ロジック修正 → `hooks/useMachineInfo.js` or `hooks/useMachineLogs.js`
+- 見た目だけ直したい → `components/UnitStatusLamps.jsx` / `components/ErrorLogList.jsx` / `components/InspectionDialogs.jsx`
+- 日付の書式や変換を変えたい → `utils/date.js`
\ No newline at end of file
diff --git a/javascript-version/src/app/(dashboard)/machine-status/components/ErrorLogList.jsx b/javascript-version/src/app/(dashboard)/machine-status/components/ErrorLogList.jsx
new file mode 100644
index 000000000..3551a888a
--- /dev/null
+++ b/javascript-version/src/app/(dashboard)/machine-status/components/ErrorLogList.jsx
@@ -0,0 +1,88 @@
+'use client'
+
+/*
+======== ファイル概要 ========
+エラーログをリスト表示するコンポーネント。件数ゼロ時の空表示とスクロール制御を担う。
+*/
+
+import Box from '@mui/material/Box'
+import Typography from '@mui/material/Typography'
+import Chip from '@mui/material/Chip'
+
+/**
+ * ログ配列をカードスタイルで表示する。
+ * @param   {object}   props                 - コンポーネント引数。
+ * @param   {object[]} props.logs            - ログ要素の配列。
+ * @param   {string}   [props.maxHeight]     - リスト最大高さ。指定時はスクロール可能にする。
+ * @param   {string}   [props.emptyMessage]  - ログが空のときに表示する文言。
+ * @returns {JSX.Element}                    - ログ一覧のJSX要素。
+ */
+export function ErrorLogList({ logs, maxHeight, emptyMessage = '該当するログが見つかりませんでした。' }) {
+    // ======== 表示ステップ: 空表示 → ログカード描画の順で分岐 ========
+    return (
+        <Box sx={{ flex: 1, overflowY: 'auto', minHeight: 0, ...(maxHeight ? { maxHeight } : {}) }}>
+            {logs.length === 0 ? (
+                <Box textAlign='center' py={6} color='text.secondary'>
+                    <Box component='span' className='material-icons' sx={{ fontSize: 48, color: 'text.disabled' }}>sentiment_dissatisfied</Box>
+                    <Typography variant='body1' mt={2}>{emptyMessage}</Typography>
+                </Box>
+            ) : (
+                logs.map((log, idx) => (
+                    <Box
+                        key={idx}
+                        display='flex'
+                        alignItems={{ xs: 'flex-start', sm: 'center' }}
+                        justifyContent='space-between'
+                        sx={{
+                                                    // 種類ごとに背景色を変えて視認性を確保する
+                          bgcolor: (theme) => (
+                            log.color === 'error'
+                              ? 'var(--mui-palette-error-lightOpacity)'
+                              : log.color === 'warning'
+                              ? 'var(--mui-palette-warning-lightOpacity)'
+                              : log.color === 'info'
+                              ? 'var(--mui-palette-info-lightOpacity)'
+                              : theme.palette.action.hover
+                          )
+                        }}
+                        borderRadius={2}
+                        px={2}
+                        py={1.5}
+                        mb={1.5}
+                    >
+                        <Box pr={2}>
+                            <Typography fontWeight='bold' color={
+                                log.color === 'error' ? 'error.main' :
+                                    log.color === 'warning' ? 'warning.main' :
+                                        log.color === 'default' ? 'text.primary' : 'info.main'
+                            }>
+                                {log.code}: {log.title}
+                            </Typography>
+                            {log.desc && (
+                                <Typography variant='caption' color={
+                                    log.color === 'error' ? 'error.dark' :
+                                        log.color === 'warning' ? 'warning.dark' :
+                                            'text.secondary'
+                                }>
+                                    {log.desc}
+                                </Typography>
+                            )}
+                            <Box mt={0.5}>
+                                <Chip
+                                    size='small'
+                                    label={log.unitId ? `Unit${log.unitId}` : '全体'}
+                                    color={log.unitId ? 'primary' : 'default'}
+                                    variant={log.unitId ? 'filled' : 'outlined'}
+                                    sx={{ height: 20, '& .MuiChip-label': { px: 1, fontSize: 11 } }}
+                                />
+                            </Box>
+                        </Box>
+                        <Typography variant='body2' color='text.secondary' whiteSpace='nowrap'>
+                            {log.date.replace(/-/g, '/')} {log.time}
+                        </Typography>
+                    </Box>
+                ))
+            )}
+        </Box>
+    )
+}
diff --git a/javascript-version/src/app/(dashboard)/machine-status/components/InspectionDialogs.jsx b/javascript-version/src/app/(dashboard)/machine-status/components/InspectionDialogs.jsx
new file mode 100644
index 000000000..6bd10a0e6
--- /dev/null
+++ b/javascript-version/src/app/(dashboard)/machine-status/components/InspectionDialogs.jsx
@@ -0,0 +1,186 @@
+'use client'
+
+/*
+======== ファイル概要 ========
+点検進捗入力と点検周期変更のダイアログコンポーネント群。ローカルストレージとAPI連携のUI層を提供する。
+*/
+
+import { useEffect, useMemo, useState } from 'react'
+
+import Dialog from '@mui/material/Dialog'
+import DialogTitle from '@mui/material/DialogTitle'
+import DialogContent from '@mui/material/DialogContent'
+import DialogActions from '@mui/material/DialogActions'
+import Typography from '@mui/material/Typography'
+import Button from '@mui/material/Button'
+import FormGroup from '@mui/material/FormGroup'
+import FormControlLabel from '@mui/material/FormControlLabel'
+import Checkbox from '@mui/material/Checkbox'
+import TextField from '@mui/material/TextField'
+import Box from '@mui/material/Box'
+
+import { formatYmdSlash } from '../utils/date'
+
+/**
+ * 点検チェックリストを表示し、完了操作を親へ通知する。
+ * @param   {object}    props            - コンポーネント引数。
+ * @param   {boolean}   props.open       - ダイアログ開閉フラグ。
+ * @param   {Function}  props.onClose    - 閉じる時のハンドラー。
+ * @param   {Function}  props.onComplete - 点検完了時のハンドラー。
+ * @returns {JSX.Element}                - 点検ダイアログのJSX要素。
+ */
+export function InspectionDialog({ open, onClose, onComplete }) {
+    const STORAGE_KEY = 'machine-status:inspection-progress'
+
+    const inspectionItems = useMemo(() => [
+        { id: 'chk1', label: '安全カバーに異常なし' },
+        { id: 'chk2', label: '非常停止ボタンの動作確認' },
+        { id: 'chk3', label: '潤滑油レベル適正' },
+        { id: 'chk4', label: 'センサー清掃済み' },
+        { id: 'chk5', label: 'ボルト・ナットの緩みなし' },
+    ], [])
+
+    const [checkedMap, setCheckedMap] = useState({})
+    // ======== 初期化ステップ: ダイアログ開時に進捗を復元 ========
+    useEffect(() => {
+        if (open) {
+            // 開いたときにローカルストレージから復元（なければ初期化）
+            let stored = {}
+
+            try {
+                const raw = typeof window !== 'undefined' ? localStorage.getItem(STORAGE_KEY) : null
+
+                if (raw) stored = JSON.parse(raw) || {}
+            } catch (e) {
+                stored = {}
+            }
+
+            const init = {}
+
+            inspectionItems.forEach((it) => { init[it.id] = Boolean(stored[it.id]) })
+            setCheckedMap(init)
+        }
+    }, [open, inspectionItems])
+
+    const allChecked = inspectionItems.length > 0 && inspectionItems.every((it) => checkedMap[it.id])
+
+    const persist = (map) => {
+        try {
+            if (typeof window !== 'undefined') localStorage.setItem(STORAGE_KEY, JSON.stringify(map))
+        } catch (e) {
+            // 書き込み失敗はUIに影響しないため黙殺（ignore write errors）
+        }
+    }
+
+    const toggleCheck = (id) => setCheckedMap((prev) => {
+        const next = { ...prev, [id]: !prev[id] }
+
+        persist(next)
+
+        return next
+    })
+
+    const checkAll = () => {
+        const m = {}
+
+        inspectionItems.forEach((it) => { m[it.id] = true })
+        setCheckedMap(m)
+        persist(m)
+    }
+
+    const resetProgress = () => {
+        const m = {}
+
+        inspectionItems.forEach((it) => { m[it.id] = false })
+        setCheckedMap(m)
+
+        try {
+            if (typeof window !== 'undefined') localStorage.removeItem(STORAGE_KEY)
+        } catch (e) {
+            // 削除失敗も無害なのでそのまま（ignore）
+        }
+    }
+
+    const handleComplete = () => {
+        // 進捗クリアは親で成功時に実施する（API連携時の失敗に備える）
+        onComplete()
+    }
+
+    // ======== 描画ステップ: チェックリストと操作ボタンの提示 ========
+    return (
+        <Dialog open={open} onClose={onClose} fullWidth maxWidth='sm'>
+            <DialogTitle>点検</DialogTitle>
+            <DialogContent dividers>
+                <Typography variant='body2' color='text.secondary' mb={2}>
+                    ダミーの点検項目です。すべてチェックしてから「点検完了」を押してください。
+                </Typography>
+                <FormGroup>
+                    {inspectionItems.map((item) => (
+                        <FormControlLabel
+                            key={item.id}
+                            control={<Checkbox checked={!!checkedMap[item.id]} onChange={() => toggleCheck(item.id)} />}
+                            label={item.label}
+                        />
+                    ))}
+                </FormGroup>
+                <Box mt={1}>
+                    <Button size='small' onClick={checkAll}>すべてチェック</Button>
+                    <Button size='small' color='secondary' onClick={resetProgress} sx={{ ml: 1 }}>進捗をリセット</Button>
+                </Box>
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={onClose}>キャンセル</Button>
+                <Button variant='contained' onClick={handleComplete} disabled={!allChecked}>点検完了</Button>
+            </DialogActions>
+        </Dialog>
+    )
+}
+
+/**
+ * 点検周期を入力させるためのダイアログ。
+ * @param   {object}    props                     - コンポーネント引数。
+ * @param   {boolean}   props.open                - ダイアログ開閉フラグ。
+ * @param   {Function}  props.onClose             - 閉じる時のハンドラー。
+ * @param   {number}    props.value               - 現在の点検間隔（日）。
+ * @param   {Function}  props.onChange            - 値変更ハンドラー。
+ * @param   {Date}      props.nextInspectionDate  - 次回点検日。
+ * @param   {Function}  props.onSave              - 保存ハンドラー。
+ * @param   {boolean}   [props.saving=false]      - 保存処理中フラグ。
+ * @returns {JSX.Element}                         - 点検期間ダイアログのJSX要素。
+ */
+export function IntervalDialog({ open, onClose, value, onChange, nextInspectionDate, onSave, saving = false }) {
+    // ======== 描画ステップ: 入力 → 次回日表示 → 操作ボタン ========
+    return (
+        <Dialog open={open} onClose={onClose} fullWidth maxWidth='xs'>
+            <DialogTitle>点検期間の変更</DialogTitle>
+            <DialogContent dividers>
+                <Typography variant='body2' color='text.secondary' mb={2}>
+                    何日ごとに点検を行うかを設定できます（フロントのみ・ダミー）。
+                </Typography>
+                <TextField
+                    type='number'
+                    label='点検間隔（日）'
+                    value={value}
+                    onChange={(e) => {
+                        const v = Math.max(1, Number(e.target.value || 1))
+
+                        onChange(v)
+                    }}
+                    inputProps={{ min: 1 }}
+                    fullWidth
+                />
+                <Box mt={2}>
+                    <Typography variant='caption' color='text.secondary'>
+                        次回点検日: {formatYmdSlash(nextInspectionDate)}
+                    </Typography>
+                </Box>
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={onClose}>キャンセル</Button>
+                <Button variant='contained' onClick={() => (onSave ? onSave(value) : onClose())} disabled={saving}>
+                    {saving ? '保存中…' : '保存'}
+                </Button>
+            </DialogActions>
+        </Dialog>
+    )
+}
diff --git a/javascript-version/src/app/(dashboard)/machine-status/components/UnitStatusLamps.jsx b/javascript-version/src/app/(dashboard)/machine-status/components/UnitStatusLamps.jsx
new file mode 100644
index 000000000..2b35af599
--- /dev/null
+++ b/javascript-version/src/app/(dashboard)/machine-status/components/UnitStatusLamps.jsx
@@ -0,0 +1,73 @@
+'use client'
+
+/*
+======== ファイル概要 ========
+ユニットごとの稼働ランプを一覧表示するプレゼンテーションコンポーネント。色とラベルを渡されたステータスから動的に決定する。
+*/
+
+import Box from '@mui/material/Box'
+import Grid from '@mui/material/Grid'
+import Typography from '@mui/material/Typography'
+import SurfaceBox from '@/components/surface/SurfaceBox'
+
+const unitLampColorMap = {
+    残弾わずか: 'warning',
+    残弾なし: 'error',
+    正常稼働: 'success',
+    エラー: 'error',
+    不明: 'default',
+    停止中: 'default',
+}
+
+/**
+ * 4ユニット分の状態をランプ形式で描画する。
+ * @param   {object} props              - コンポーネント引数。
+ * @param   {object} props.unitStatuses - Unit1〜Unit4の状態マップ。
+ * @returns {JSX.Element}               - ユニット一覧のJSX要素。
+ */
+export function UnitStatusLamps({ unitStatuses }) {
+    // ======== 描画ステップ: 各ユニットをランプ付きカードに成形 ========
+    return (
+        <Box mb={2}>
+            <Typography variant='subtitle2' color='text.secondary' mb={1}>
+                ユニット ステータス
+            </Typography>
+            <Grid container spacing={1.5}>
+                {['Unit1', 'Unit2', 'Unit3', 'Unit4'].map((unit) => (
+                    <Grid item xs={6} key={unit}>
+                        <SurfaceBox
+                            variant='soft'
+                            display='flex'
+                            alignItems='center'
+                            justifyContent='flex-start'
+                            p={1.25}
+                            borderRadius={1.5}
+                            sx={{ border: (theme) => `1px solid ${theme.palette.divider}` }}
+                        >
+                            <Box display='flex' alignItems='center' gap={1.25}>
+                                <Typography variant='body2' fontWeight={600} minWidth={48}>
+                                    {unit}
+                                </Typography>
+                                <Box display='flex' alignItems='center' gap={0.75}>
+                                    <Box
+                                        sx={{
+                                            width: 10,
+                                            height: 10,
+                                            borderRadius: '50%',
+                                            bgcolor: (theme) =>
+                                                theme.palette[unitLampColorMap[unitStatuses[unit]]]?.main || theme.palette.text.disabled,
+                                            boxShadow: (theme) => `0 0 0 2px ${theme.palette.background.paper}`,
+                                        }}
+                                    />
+                                    <Typography variant='caption' color='text.secondary'>
+                                        {unitStatuses[unit]}
+                                    </Typography>
+                                </Box>
+                            </Box>
+                        </SurfaceBox>
+                    </Grid>
+                ))}
+            </Grid>
+        </Box>
+    )
+}
diff --git a/javascript-version/src/app/(dashboard)/machine-status/hooks/useMachineInfo.js b/javascript-version/src/app/(dashboard)/machine-status/hooks/useMachineInfo.js
new file mode 100644
index 000000000..045f8948c
--- /dev/null
+++ b/javascript-version/src/app/(dashboard)/machine-status/hooks/useMachineInfo.js
@@ -0,0 +1,201 @@
+'use client'
+
+/*
+======== ファイル概要 ========
+機械の基礎情報を取得し、点検日や稼働時間の派生状態を管理するカスタムフック。
+*/
+
+import { useEffect, useMemo, useRef, useState } from 'react'
+
+import { addDays, daysDiff, parseYmd, parseYmdSlash } from '../utils/date'
+
+const defaultInfo = {
+    name: '機械名をここに表示',
+    todayWorkTime: 'HH-MM-SS',
+    todayProduction: '不明',
+    lastInspection: 'YY-MM-DD',
+    nextInspection: 'YY-MM-DD',
+}
+
+/**
+ * 機械APIから情報を取得し、点検日などの派生値を計算する。
+ * @param   {string} machineId   - 取得対象の機械ID（APIのURLに使用）。
+ * @returns {object}             - 画面表示に必要な機械情報と更新関数の集合。
+ */
+export function useMachineInfo(machineId) {
+    // ======== 状態定義: APIレスポンスと派生値を管理 ========
+    const [machineName, setMachineName] = useState(defaultInfo.name)
+    const [todayUptimeHms, setTodayUptimeHms] = useState(null)
+    const [todayProductionCount, setTodayProductionCount] = useState(null)
+    const [machineDataLoading, setMachineDataLoading] = useState(false)
+    const [machineDataError, setMachineDataError] = useState('')
+
+    const [uptimeSeconds, setUptimeSeconds] = useState(null)
+    const uptimeAnchorRef = useRef({ mode: 'base', startedAt: null, baseSeconds: 0, baseTs: 0 })
+
+    const initialLastInspection = useMemo(() => parseYmdSlash(defaultInfo.lastInspection) || new Date(), [])
+
+    const initialIntervalDays = useMemo(() => {
+        const last = parseYmdSlash(defaultInfo.lastInspection)
+        const next = parseYmdSlash(defaultInfo.nextInspection)
+
+        if (last && next) {
+            const diff = daysDiff(new Date(last), new Date(next))
+
+            if (Number.isFinite(diff) && diff > 0) return diff // API仕様上90日が既定だが、差分が取れればその値を優先
+        }
+
+        return 90
+    }, [])
+
+    const [lastInspectionDate, setLastInspectionDate] = useState(initialLastInspection)
+    const [inspectionIntervalDays, setInspectionIntervalDays] = useState(initialIntervalDays)
+    const nextInspectionDate = useMemo(() => addDays(lastInspectionDate, inspectionIntervalDays), [lastInspectionDate, inspectionIntervalDays])
+
+    // ======== 副作用: 機械情報をAPIから取得 ========
+    useEffect(() => {
+        const controller = new AbortController()
+
+        // started_atが複数フォーマットで返る想定に備えて柔軟に解釈する
+        const tryParseStartedAt = (s) => {
+            if (!s || typeof s !== 'string') return null
+            let d = new Date(s)
+
+            if (!isNaN(d.getTime())) return d
+            let fixed = s.replace(/([A-Za-z]{3})T([A-Za-z]{3})/, '$1 $2')
+
+            fixed = fixed.replace(/\+\d{2}:\d{2}$/, '')
+            d = new Date(fixed)
+            if (!isNaN(d.getTime())) return d
+
+            return null
+        }
+
+        const fetchMachine = async () => {
+            try {
+                setMachineDataLoading(true)
+                setMachineDataError('')
+                const base = process.env.NEXT_PUBLIC_BASE_PATH || ''
+
+                const token =
+                    (typeof window !== 'undefined' && (localStorage.getItem('access_token') || sessionStorage.getItem('access_token'))) || ''
+
+                const url = `${base}/api/machines/${encodeURIComponent(machineId)}`
+
+                const res = await fetch(url, {
+                    method: 'GET',
+                    headers: { 'Content-Type': 'application/json', ...(token ? { Authorization: `Bearer ${token}` } : {}) },
+                    signal: controller.signal,
+                })
+
+                // 異常応答は画面側でダミーデータに切り替えるため例外として扱う
+                if (!res.ok) throw new Error(`Failed to fetch machine: ${res.status}`)
+                const data = await res.json()
+
+                if (data?.machine_name) setMachineName(data.machine_name)
+                if (data?.today_uptime_hms) setTodayUptimeHms(data.today_uptime_hms)
+                if (typeof data?.today_production_count === 'number') setTodayProductionCount(data.today_production_count)
+
+                if (data?.last_inspection_date) {
+                    const d = parseYmd(data.last_inspection_date)
+
+                    if (d) setLastInspectionDate(d)
+                }
+
+                if (Number.isFinite(Number(data?.inspection_interval_days))) {
+                    setInspectionIntervalDays(Number(data.inspection_interval_days))
+                }
+
+                const parsedStart = tryParseStartedAt(data?.started_at)
+                const apiSec = Number.isFinite(Number(data?.today_uptime_seconds)) ? Number(data.today_uptime_seconds) : null
+                const now = Date.now()
+                const startMs = parsedStart?.getTime?.()
+
+                // started_at が未来時刻の場合はAPI値の方が信頼できるため、ズレ許容（5秒）内のみ開始時刻基準を採用
+                // Use 'start' mode only when started_at is not in the future (allow tiny skew up to 5s)
+                if (parsedStart && startMs <= now + 5000) {
+                    const secFromStart = Math.max(0, Math.floor((now - startMs) / 1000))
+                    const initial = apiSec != null ? Math.max(secFromStart, apiSec) : secFromStart
+
+                    setUptimeSeconds(initial)
+                    uptimeAnchorRef.current = { mode: 'start', startedAt: parsedStart, baseSeconds: initial, baseTs: now }
+                } else if (apiSec != null) {
+                    setUptimeSeconds(apiSec)
+                    uptimeAnchorRef.current = { mode: 'base', startedAt: null, baseSeconds: apiSec, baseTs: now }
+                } else if (data?.today_uptime_hms) {
+                    const m = String(data.today_uptime_hms).match(/^(\d{1,2}):(\d{2}):(\d{2})$/)
+
+                    if (m) {
+                        const hh = Number(m[1]), mm = Number(m[2]), ss = Number(m[3])
+                        const sec = hh * 3600 + mm * 60 + ss
+
+                        setUptimeSeconds(sec)
+                        uptimeAnchorRef.current = { mode: 'base', startedAt: null, baseSeconds: sec, baseTs: now }
+                    }
+                }
+            } catch (e) {
+                const msg = String(e?.message || '')
+
+                if (e?.name === 'AbortError' || msg.toLowerCase().includes('abort')) {
+                    // 開発モードの二重fetchなどで発生する中断は問題ないため握りつぶす（ignore abort in dev/strict mode）
+                } else {
+                    setMachineDataError('機械情報の取得に失敗しました。ダミー情報を表示しています。')
+                }
+            } finally {
+                setMachineDataLoading(false)
+            }
+        }
+
+        fetchMachine()
+
+        return () => {
+            controller.abort()
+        }
+    }, [machineId])
+
+    // ======== 副作用: 稼働秒数のカウントアップ ========
+    useEffect(() => {
+        // API 応答前でも見た目が止まらないよう、最低限のブートストラップ
+        // baseTs が未設定なら「今」を基準に 0 秒からスタート
+        if (uptimeAnchorRef.current.mode === 'base' && uptimeAnchorRef.current.baseTs === 0) {
+            uptimeAnchorRef.current = { ...uptimeAnchorRef.current, baseTs: Date.now() }
+            setUptimeSeconds((prev) => (prev == null ? 0 : prev))
+        }
+
+        const tick = () => {
+            const now = Date.now()
+            const anchor = uptimeAnchorRef.current
+
+            if (anchor.mode === 'start' && anchor.startedAt instanceof Date) {
+                const sec = Math.max(0, Math.floor((now - anchor.startedAt.getTime()) / 1000))
+
+                setUptimeSeconds((prev) => (prev != null ? Math.max(sec, prev) : sec))
+            } else if (anchor.mode === 'base' && anchor.baseTs > 0) {
+                const elapsed = Math.floor((now - anchor.baseTs) / 1000)
+
+                setUptimeSeconds(anchor.baseSeconds + Math.max(0, elapsed))
+            }
+        }
+
+        const id = setInterval(tick, 1000)
+
+        return () => {
+            clearInterval(id)
+        }
+    }, [])
+
+    return {
+        machineName,
+        todayUptimeHms,
+        todayProductionCount,
+        machineDataLoading,
+        machineDataError,
+        uptimeSeconds,
+        setLastInspectionDate,
+        lastInspectionDate,
+        inspectionIntervalDays,
+        setInspectionIntervalDays,
+        nextInspectionDate,
+        defaultInfo,
+    }
+}
diff --git a/javascript-version/src/app/(dashboard)/machine-status/hooks/useMachineLogs.js b/javascript-version/src/app/(dashboard)/machine-status/hooks/useMachineLogs.js
new file mode 100644
index 000000000..78a16a642
--- /dev/null
+++ b/javascript-version/src/app/(dashboard)/machine-status/hooks/useMachineLogs.js
@@ -0,0 +1,314 @@
+'use client'
+
+/*
+======== ファイル概要 ========
+エラーログAPIを取得し、UI向けの整形やユニット毎の状態推定を行うカスタムフック群。
+*/
+
+import { useEffect, useMemo, useState } from 'react'
+
+// サンプルフォールバック
+const errorLogSample = [
+    { type: 'エラー', code: 'E-102', title: 'トルク過負荷', desc: 'モーターの負荷が規定値を超えました。', date: '2025-07-15', time: '10:15:32', color: 'error' },
+    { type: '警告', code: 'W-05', title: '潤滑油低下', desc: '潤滑油が規定レベルを下回っています。', date: '2025-07-15', time: '09:30:11', color: 'warning' },
+    { type: '情報', code: 'I-001', title: '起動シーケンス完了', desc: '', date: '2025-07-15', time: '08:00:05', color: 'default' },
+    { type: 'エラー', code: 'E-201', title: 'センサー接続エラー', desc: 'センサー#3との通信がタイムアウトしました。', date: '2025-07-14', time: '15:45:01', color: 'error' },
+    { type: '警告', code: 'W-02', title: 'フィルター交換時期', desc: 'エアフィルターの交換を推奨します。', date: '2025-07-14', time: '11:20:45', color: 'warning' },
+    { type: '情報', code: 'I-002', title: '生産完了 (Lot-24B)', desc: '', date: '2025-07-14', time: '17:30:00', color: 'default' },
+]
+
+const mapColor = (t) => (t === 'error' ? 'error' : t === 'warning' ? 'warning' : 'default')
+const mapTypeJp = (t) => (t === 'error' ? 'エラー' : t === 'warning' ? '警告' : '情報')
+
+/**
+ * ログAPIを取得し、画面表示用に整形する。
+ * @param   {string} machineId   - 取得対象の機械ID。
+ * @returns {object}             - 整形済みログ・状態推定値・通信状態。
+ */
+export function useMachineLogs(machineId) {
+    const [apiLogs, setApiLogs] = useState([])
+    const [loading, setLoading] = useState(false)
+    const [fetchError, setFetchError] = useState('')
+    const [isFallbackData, setIsFallbackData] = useState(false)
+
+    // ======== 副作用: ログ一覧の取得 ========
+    useEffect(() => {
+        const controller = new AbortController()
+
+        const fetchLogs = async () => {
+            try {
+                setLoading(true)
+                setFetchError('')
+                const base = process.env.NEXT_PUBLIC_BASE_PATH || ''
+
+                const token =
+                    (typeof window !== 'undefined' && (localStorage.getItem('access_token') || sessionStorage.getItem('access_token'))) || ''
+
+                const qs = new URLSearchParams()
+
+                qs.set('page', '1')
+                qs.set('limit', '200')
+                const url = `${base}/api/machines/${encodeURIComponent(machineId)}/logs?${qs.toString()}`
+
+                const res = await fetch(url, {
+                    method: 'GET',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        ...(token ? { Authorization: `Bearer ${token}` } : {}),
+                    },
+                    signal: controller.signal,
+                })
+
+                // エラー応答は上位でフォールバック表示に切り替えたいので例外化する
+                if (!res.ok) throw new Error(`Failed to fetch logs: ${res.status}`)
+                const data = await res.json()
+                const logs = Array.isArray(data?.logs) ? data.logs : []
+
+                setApiLogs(logs)
+                setIsFallbackData(false)
+            } catch (err) {
+                setFetchError('ログの取得に失敗しました。サンプルデータで表示しています。')
+
+                const fallback = errorLogSample.map((s, idx) => ({
+                    log_id: 1000 + idx,
+                    unit_id: null,
+                    timestamp: `${s.date}T${s.time}Z`,
+                    log_type: s.color === 'error' ? 'error' : s.color === 'warning' ? 'warning' : 'info',
+                    title: `${s.code}: ${s.title}`,
+                    message: s.desc || '',
+                }))
+
+                setApiLogs(fallback)
+                setIsFallbackData(true)
+            } finally {
+                setLoading(false)
+            }
+        }
+
+        fetchLogs()
+
+        return () => controller.abort()
+    }, [machineId])
+
+    // ======== 加工処理: APIレスポンスをUI向けに整形 ========
+    const processedLogs = useMemo(() => {
+        const toDateOnly = (iso) => {
+            try {
+                const d = new Date(iso)
+                const y = d.getFullYear()
+                const m = String(d.getMonth() + 1).padStart(2, '0')
+                const da = String(d.getDate()).padStart(2, '0')
+
+                return `${y}-${m}-${da}`
+            } catch {
+                return ''
+            }
+        }
+
+        const toTime = (iso) => {
+            try {
+                const d = new Date(iso)
+                const hh = String(d.getHours()).padStart(2, '0')
+                const mm = String(d.getMinutes()).padStart(2, '0')
+                const ss = String(d.getSeconds()).padStart(2, '0')
+
+                return `${hh}:${mm}:${ss}`
+            } catch {
+                return ''
+            }
+        }
+
+        return apiLogs
+            .slice()
+            .sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp))
+            .map((l) => {
+                const code = (l.title || '').split(':')[0] || ''
+
+                return {
+                    type: mapTypeJp(l.log_type),
+                    code,
+                    title: (l.title || '').split(':').slice(1).join(':').trim() || l.title || '',
+                    desc: l.message || '',
+                    date: toDateOnly(l.timestamp),
+                    time: toTime(l.timestamp),
+                    color: mapColor(l.log_type),
+                    unitId: l.unit_id,
+                }
+            })
+    }, [apiLogs])
+
+    // ユニット/グローバルステータス推定
+    const { unitStatuses, globalStatusLabel } = useUnitAndGlobalStatus(apiLogs, fetchError)
+
+    return { apiLogs, processedLogs, loading, fetchError, isFallbackData, unitStatuses, globalStatusLabel }
+}
+
+/**
+ * ログ内容からユニット毎と全体の状態を推定する。
+ * @param   {object[]} apiLogs     - APIから取得した生ログ配列。
+ * @param   {string}   fetchError  - 取得失敗時のエラーメッセージ。
+ * @returns {object}              - ユニットステータスと全体ステータスラベル。
+ */
+export function useUnitAndGlobalStatus(apiLogs, fetchError) {
+    const [unitStatuses, setUnitStatuses] = useState({ Unit1: '正常稼働', Unit2: '正常稼働', Unit3: '正常稼働', Unit4: '正常稼働' })
+    const [globalStatusLabel, setGlobalStatusLabel] = useState('正常稼働')
+
+    // ======== 副作用: ログから最新状態を推定 ========
+    useEffect(() => {
+        // 取得に失敗してログが空の場合は、状態が不明であることをUIに伝える
+        if (fetchError && (!apiLogs || apiLogs.length === 0)) {
+            setUnitStatuses({ Unit1: '不明', Unit2: '不明', Unit3: '不明', Unit4: '不明' })
+            setGlobalStatusLabel('不明')
+            
+            return
+        }
+
+        const extractCode = (title) => {
+            const m = (title || '').match(/([A-Z]-\d{3})/)
+
+            return m?.[1] || ''
+        }
+
+        const codeToStatus = {
+            'E-001': '正常稼働',
+            'E-002': '残弾なし',
+            'E-003': 'エラー',
+            'E-099': 'エラー',
+            'W-001': '残弾わずか',
+            'W-002': '残弾わずか',
+            'W-099': '残弾わずか',
+            'I-001': '正常稼働',
+            'I-002': '正常稼働',
+            'I-003': '停止中',
+        }
+
+        const determineStatusFromLog = (l) => {
+            if (!l) return '正常稼働'
+            const code = extractCode(l.title)
+
+            if (code && codeToStatus[code]) return codeToStatus[code]
+            if (l.log_type === 'error') return 'エラー'
+            if (l.log_type === 'warning') return '残弾わずか'
+
+            return '正常稼働'
+        }
+
+        const latestByUnit = { 1: null, 2: null, 3: null, 4: null }
+
+        apiLogs.forEach((l) => {
+            if (l.unit_id == null) return
+            if (!(l.unit_id in latestByUnit)) return
+
+            if (!latestByUnit[l.unit_id] || new Date(l.timestamp) > new Date(latestByUnit[l.unit_id].timestamp)) {
+                latestByUnit[l.unit_id] = l
+            }
+        })
+        let latestI002Ts = null
+
+        apiLogs.forEach((l) => {
+            const c = extractCode(l.title)
+
+            if (c === 'I-002') {
+                const ts = new Date(l.timestamp)
+
+                if (!latestI002Ts || ts > latestI002Ts) latestI002Ts = ts
+            }
+        })
+        let latestGlobalShutdownTs = null
+
+        apiLogs.forEach((l) => {
+            if (l.unit_id != null) return
+            const c = extractCode(l.title)
+
+            if (c === 'I-003') {
+                const ts = new Date(l.timestamp)
+
+                if (!latestGlobalShutdownTs || ts > latestGlobalShutdownTs) latestGlobalShutdownTs = ts
+            }
+        })
+
+        const calcWithResetRule = (unitIdx) => {
+            const latest = latestByUnit[unitIdx]
+            let status = determineStatusFromLog(latest)
+
+            // 最新の「補充完了(I-002)」ログが後続にある場合は残弾アラートを解除する
+            if (latest && latestI002Ts && (status === '残弾なし' || status === '残弾わずか')) {
+                const unitTs = new Date(latest.timestamp)
+
+                if (latestI002Ts > unitTs) status = '正常稼働'
+            }
+
+            return status
+        }
+
+        let next = {
+            Unit1: calcWithResetRule(1),
+            Unit2: calcWithResetRule(2),
+            Unit3: calcWithResetRule(3),
+            Unit4: calcWithResetRule(4),
+        }
+
+        // 最新記録が全体停止(I-003)の場合は停止扱いを上書きする
+        if (latestGlobalShutdownTs && (!latestI002Ts || latestI002Ts <= latestGlobalShutdownTs)) {
+            const overrideIfBeforeShutdown = (unitIdx, key) => {
+                const latest = latestByUnit[unitIdx]
+                const unitTs = latest ? new Date(latest.timestamp) : null
+
+                if (!unitTs || unitTs <= latestGlobalShutdownTs) {
+                    next[key] = '停止中'
+                }
+            }
+
+            overrideIfBeforeShutdown(1, 'Unit1')
+            overrideIfBeforeShutdown(2, 'Unit2')
+            overrideIfBeforeShutdown(3, 'Unit3')
+            overrideIfBeforeShutdown(4, 'Unit4')
+        }
+
+        const vals = Object.values(next)
+        const allEmpty = vals.every((v) => !v)
+
+        // 何の情報も得られなかった場合は「不明」とし、UIで異常を知らせる
+        if (allEmpty) {
+            next = { Unit1: '不明', Unit2: '不明', Unit3: '不明', Unit4: '不明' }
+        }
+
+        setUnitStatuses(next)
+
+        let latestGlobal = null
+
+        apiLogs.forEach((l) => {
+            if (l.unit_id != null) return
+
+            if (!latestGlobal || new Date(l.timestamp) > new Date(latestGlobal.timestamp)) {
+                latestGlobal = l
+            }
+        })
+
+        let globalLabel = '正常稼働'
+
+        if (latestGlobal) {
+            // 全体ログの最新値からダッシュボード表示用のラベルに変換する
+            let gs = determineStatusFromLog(latestGlobal)
+
+            if (latestI002Ts && (gs === '残弾なし' || gs === '残弾わずか')) {
+                const gts = new Date(latestGlobal.timestamp)
+
+                if (latestI002Ts > gts) gs = '正常稼働'
+            }
+
+            // UIラベルは「エラー」「警告」などに丸めて一貫性を持たせる
+            if (gs === 'エラー' || gs === '残弾なし') globalLabel = 'エラー'
+            else if (gs === '残弾わずか') globalLabel = '警告'
+            else if (gs === '不明') globalLabel = '不明'
+            else if (gs === '停止中') globalLabel = '停止中'
+            else globalLabel = '正常稼働'
+        } else if (fetchError && (!apiLogs || apiLogs.length === 0)) {
+            globalLabel = '不明'
+        }
+
+        setGlobalStatusLabel(globalLabel)
+    }, [apiLogs, fetchError])
+
+    return { unitStatuses, globalStatusLabel }
+}
diff --git a/javascript-version/src/app/(dashboard)/machine-status/page.jsx b/javascript-version/src/app/(dashboard)/machine-status/page.jsx
new file mode 100644
index 000000000..5bbdcb7af
--- /dev/null
+++ b/javascript-version/src/app/(dashboard)/machine-status/page.jsx
@@ -0,0 +1,390 @@
+'use client'
+
+/*
+======== ファイル概要 ========
+機械ステータス管理ページ。APIで取得した機械情報とエラーログを集約し、点検操作やフィルタリング付きで可視化する。
+*/
+
+import { useEffect, useMemo, useRef, useState } from 'react'
+
+import Grid from '@mui/material/Grid'
+import Card from '@mui/material/Card'
+import CardContent from '@mui/material/CardContent'
+import Typography from '@mui/material/Typography'
+import Chip from '@mui/material/Chip'
+import Box from '@mui/material/Box'
+import TextField from '@mui/material/TextField'
+import MenuItem from '@mui/material/MenuItem'
+import Divider from '@mui/material/Divider'
+import CircularProgress from '@mui/material/CircularProgress'
+import Button from '@mui/material/Button'
+import Snackbar from '@mui/material/Snackbar'
+import Alert from '@mui/material/Alert'
+import SurfaceBox from '@/components/surface/SurfaceBox'
+
+import { UnitStatusLamps } from './components/UnitStatusLamps'
+import { ErrorLogList } from './components/ErrorLogList'
+import { InspectionDialog, IntervalDialog } from './components/InspectionDialogs'
+import { useMachineInfo } from './hooks/useMachineInfo'
+import { useMachineLogs } from './hooks/useMachineLogs'
+import { formatYmdSlash, secondsToHMS } from './utils/date'
+
+const machineInfo = { image: '/images/projectpic/image.png' }
+
+/**
+ * 機械ごとの稼働状況とログをまとめて表示するページコンポーネント。
+ * @returns {JSX.Element}                           完成したページのJSX要素。
+ */
+const MachineStatus = () => {
+  // APIの{id}は固定でこの機械名を使用
+  const machineId = '半自動表層バネどめ機'
+
+  const [logType, setLogType] = useState('すべて')
+  const [logDate, setLogDate] = useState('')
+
+  // ======== 状態管理: 機械情報の取得結果を保持 ========
+  // --- 機械基本情報（/api/machines/{id}） ---
+  const {
+    machineName,
+    todayUptimeHms,
+    todayProductionCount,
+    machineDataLoading,
+    machineDataError,
+    uptimeSeconds,
+    setLastInspectionDate,
+    lastInspectionDate,
+    inspectionIntervalDays,
+    setInspectionIntervalDays,
+    nextInspectionDate,
+    defaultInfo,
+  } = useMachineInfo(machineId)
+
+  // ======== 状態管理: ログ情報の取得結果を保持 ========
+  const { processedLogs, loading, fetchError, isFallbackData, unitStatuses, globalStatusLabel } = useMachineLogs(machineId)
+
+  // ダイアログ管理
+  const [openInspection, setOpenInspection] = useState(false)
+  const [openInterval, setOpenInterval] = useState(false)
+  const [savingInterval, setSavingInterval] = useState(false)
+  const [completingInspection, setCompletingInspection] = useState(false)
+
+  // スナックバー
+  const [snackbar, setSnackbar] = useState({ open: false, message: '', severity: 'success' })
+  const showSnack = (message, severity = 'success') => setSnackbar({ open: true, message, severity })
+  const closeSnack = () => setSnackbar(s => ({ ...s, open: false }))
+
+  // ======== フィルタリング: ログを種類と日付で絞り込み ========
+  // フィルタ適用
+  const filteredLogs = useMemo(() => {
+    return processedLogs.filter((log) => {
+      const typeMatch = logType === 'すべて' || log.type === logType // 「すべて」の場合は全件通す
+      const dateMatch = !logDate || log.date === logDate            // 未指定時は日付条件を無効化する
+
+      return typeMatch && dateMatch
+    })
+  }, [processedLogs, logType, logDate])
+
+  // ======== レイアウト制御: ログリスト高さの固定 ========
+  // ログリストの初期高さを固定して、以降はスクロールに切り替え（縦に伸びない）
+  const logListRef = useRef(null)
+  const [logListMaxHeight, setLogListMaxHeight] = useState(null)
+
+  useEffect(() => {
+    // DOM参照が未確定、またはすでに初期高さが決まっている場合は再計測しない
+    if (!logListRef.current || logListMaxHeight != null) return
+
+    // 次フレームで計測して初期高さをロック
+    const rAF = requestAnimationFrame(() => {
+      const h = logListRef.current?.getBoundingClientRect().height
+
+      if (h && h > 0) setLogListMaxHeight(h)
+    })
+
+    return () => cancelAnimationFrame(rAF)
+  }, [logListMaxHeight])
+
+  // ======== レイアウト制御: 左カラムと右カラムの高さ同期 ========
+  // 左カラム(Card)の高さを監視して右カラムに反映
+  const leftCardRef = useRef(null)
+  const [leftCardHeight, setLeftCardHeight] = useState(null)
+
+  useEffect(() => {
+    // ResizeObserver が存在しない環境では同期不可のため早期リターン
+    if (!leftCardRef.current || typeof ResizeObserver === 'undefined') return
+
+    const ro = new ResizeObserver(entries => {
+      const entry = entries[0]
+
+      // エントリが欠落しているケースは無視して安全側に倒す
+      if (!entry) return
+      const h = entry.contentRect.height
+
+      if (h && h > 0) setLeftCardHeight(h)
+    })
+
+    ro.observe(leftCardRef.current)
+
+    return () => ro.disconnect()
+  }, [])
+
+  // ======== 集約処理: ユニット毎の状態から全体ラベルを決定 ========
+  // ここから描画
+
+  // ユニット状態から全体ステータスを集約（優先度: エラー > 警告 > 不明 > 正常）
+  const overallStatus = useMemo(() => {
+    const values = [...Object.values(unitStatuses), globalStatusLabel]
+    const hasError = values.some(v => v === 'エラー' || v === '残弾なし')   // クリティカル停止は最優先で通知したい
+    const hasWarn = values.some(v => v === '残弾わずか')                   // 材料残量など注意喚起は次点で扱う
+    const hasUnknown = values.some(v => v === '不明')                      // 状態不明は運用判断が必要なため第三優先
+    const hasStopped = values.some(v => v === '停止中')                    // 停止中は運転再開の検討が必要
+
+    if (hasError) return { label: 'エラー', color: 'error' }
+    if (hasStopped) return { label: '停止中', color: 'default' }
+    if (hasWarn) return { label: '警告', color: 'warning' }
+    if (hasUnknown) return { label: '不明', color: 'default' }
+
+    return { label: '正常に稼働中', color: 'success' }
+  }, [unitStatuses, globalStatusLabel])
+
+  return (
+    <>
+      <Grid container spacing={6}>
+        {/* タイトル・戻るリンク */}
+        {/* <Typography variant='h4' sx={{ mb: 0, fontWeight: 700 }}>生産機械ステータス</Typography> */}
+
+        {/* 2カラムレイアウト */}
+        <Grid item xs={12}>
+          <Grid container spacing={4}>
+            {/* 左カラム: 機械画像・状態 */}
+            <Grid item xs={12} md={5}>
+            <Card ref={leftCardRef} sx={{ mb: 4, height: '100%' }}>
+              <CardContent>
+                <Typography variant='h6' fontWeight='bold' mb={2}>{machineName}</Typography>
+                <SurfaceBox
+                  variant='paper'
+                  sx={{
+                    width: '100%',
+                    borderRadius: 2,
+                    overflow: 'hidden',
+                    mb: 2
+                  }}
+                >
+                  <img
+                    src={machineInfo.image}
+                    alt={machineName}
+                    style={{ width: '100%', height: 'auto', objectFit: 'cover' }}
+                  />
+                </SurfaceBox>
+                <UnitStatusLamps unitStatuses={unitStatuses} />
+                <Chip
+                  label={overallStatus.label}
+                  color={overallStatus.color}
+                  sx={{ width: '100%', fontSize: 18, py: 2, fontWeight: 'bold' }}
+                />
+              </CardContent>
+            </Card>
+          </Grid>
+
+          {/* 右カラム: 稼働データ・エラーログ */}
+          <Grid item xs={12} md={7} sx={{ display: 'flex', flexDirection: 'column', height: '100%', ...(leftCardHeight ? { height: leftCardHeight } : {}) }}>
+            <Card sx={{ mb: 4 }}>
+              <CardContent>
+                <Box display='flex' alignItems='center' justifyContent='space-between' mb={2} gap={2}>
+                  <Typography variant='h6' fontWeight='bold'>稼働データ</Typography>
+                  <Box display='flex' gap={1} flexWrap='wrap'>
+                    <Button variant='contained' color='primary' onClick={() => setOpenInspection(true)}>
+                      点検
+                    </Button>
+                    <Button variant='outlined' color='secondary' onClick={() => setOpenInterval(true)}>
+                      点検期間変更
+                    </Button>
+                    {machineDataLoading && <CircularProgress size={18} />}
+                  </Box>
+                </Box>
+                <Grid container spacing={2} mb={2}>
+                  <Grid item xs={6} sm={3}>
+                    <SurfaceBox variant='soft' p={2} borderRadius={2} textAlign='center'>
+                      <Typography variant='body2' color='text.secondary'>本日の稼働時間</Typography>
+                      <Typography variant='h5' fontWeight='bold'>
+                        {uptimeSeconds != null ? secondsToHMS(uptimeSeconds) : (todayUptimeHms || defaultInfo.todayWorkTime)}
+                      </Typography>
+                    </SurfaceBox>
+                  </Grid>
+                  <Grid item xs={6} sm={3}>
+                    <SurfaceBox variant='soft' p={2} borderRadius={2} textAlign='center'>
+                      <Typography variant='body2' color='text.secondary'>本日の生産数</Typography>
+                      <Typography variant='h5' fontWeight='bold'>
+                        {todayProductionCount != null ? `${todayProductionCount.toLocaleString()}個` : defaultInfo.todayProduction}
+                      </Typography>
+                    </SurfaceBox>
+                  </Grid>
+                  <Grid item xs={6} sm={3}>
+                    <SurfaceBox variant='soft' p={2} borderRadius={2} textAlign='center'>
+                      <Typography variant='body2' color='text.secondary'>最終点検日</Typography>
+                      <Typography variant='h5' fontWeight='bold'>{formatYmdSlash(lastInspectionDate)}</Typography>
+                    </SurfaceBox>
+                  </Grid>
+                  <Grid item xs={6} sm={3}>
+                    <SurfaceBox variant='soft' p={2} borderRadius={2} textAlign='center'>
+                      <Typography variant='body2' color='text.secondary'>次回点検日</Typography>
+                      <Typography variant='h5' fontWeight='bold'>{formatYmdSlash(nextInspectionDate)}</Typography>
+                    </SurfaceBox>
+                  </Grid>
+                </Grid>
+                {machineDataError && (
+                  <Typography variant='caption' color='warning.main'>
+                    {machineDataError}
+                  </Typography>
+                )}
+              </CardContent>
+            </Card>
+
+            {/* エラーログ */}
+            <Card sx={{ flex: 1, display: 'flex', minHeight: 0 }}>
+              <CardContent sx={{ display: 'flex', flexDirection: 'column', flex: 1, minHeight: 0 }}>
+                <Box display='flex' flexDirection={{ xs: 'column', sm: 'row' }} justifyContent='space-between' alignItems={{ xs: 'flex-start', sm: 'center' }} mb={2} gap={2}>
+                  <Typography variant='h6' fontWeight='bold'>エラーログ</Typography>
+                  <Box display='flex' gap={2} alignItems='center'>
+                    <TextField
+                      type='date'
+                      size='small'
+                      value={logDate}
+                      onChange={e => setLogDate(e.target.value)}
+                      sx={{ minWidth: 140 }}
+                    />
+                    <TextField
+                      select
+                      size='small'
+                      value={logType}
+                      onChange={e => setLogType(e.target.value)}
+                      sx={{ minWidth: 100 }}
+                    >
+                      <MenuItem value='すべて'>すべて</MenuItem>
+                      <MenuItem value='エラー'>エラー</MenuItem>
+                      <MenuItem value='警告'>警告</MenuItem>
+                      <MenuItem value='情報'>情報</MenuItem>
+                    </TextField>
+                    {loading && <CircularProgress size={20} />}
+                  </Box>
+                </Box>
+                {isFallbackData && (
+                  <Typography variant='caption' color='warning.main' sx={{ mb: 1 }}>
+                    {fetchError || 'ログの取得に失敗しました。サンプルデータで表示しています。'}
+                  </Typography>
+                )}
+                <Divider sx={{ mb: 2 }} />
+                <Box ref={logListRef} sx={{ flex: 1, minHeight: 0 }}>
+                  <ErrorLogList
+                    logs={filteredLogs}
+                    maxHeight={leftCardHeight ? `calc(${leftCardHeight}px - 140px)` : (logListMaxHeight || undefined)}
+                  />
+                </Box>
+              </CardContent>
+            </Card>
+          </Grid>
+        </Grid>
+      </Grid>
+    </Grid>
+
+      {/* 点検ダイアログ */}
+      <InspectionDialog
+        open={openInspection}
+        onClose={() => setOpenInspection(false)}
+        onComplete={async () => {
+          try {
+            setCompletingInspection(true)
+            const base = process.env.NEXT_PUBLIC_BASE_PATH || ''
+            const token = (typeof window !== 'undefined' && (localStorage.getItem('access_token') || sessionStorage.getItem('access_token'))) || ''
+
+            const res = await fetch(`${base}/api/machines/${encodeURIComponent(machineId)}/complete-inspection`, {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json', ...(token ? { Authorization: `Bearer ${token}` } : {}) },
+            })
+
+            if (!res.ok) {
+              const err = await res.json().catch(() => ({}))
+
+              throw new Error(err?.error || `Failed: ${res.status}`)
+            }
+
+            const data = await res.json()
+
+            if (data?.last_inspection_date) {
+              setLastInspectionDate(new Date(data.last_inspection_date))
+            } else {
+              setLastInspectionDate(new Date())
+            }
+
+            if (Number.isFinite(Number(data?.inspection_interval_days))) {
+              setInspectionIntervalDays(Number(data.inspection_interval_days))
+            }
+
+            // 成功時: 進捗クリア
+            try { if (typeof window !== 'undefined') localStorage.removeItem('machine-status:inspection-progress') } catch {}
+            showSnack('点検を記録しました', 'success')
+            setOpenInspection(false)
+          } catch (e) {
+            showSnack(`点検の記録に失敗しました: ${e?.message || e}`, 'error')
+          } finally {
+            setCompletingInspection(false)
+          }
+        }}
+      />
+
+      {/* 点検期間変更ダイアログ */}
+      <IntervalDialog
+        open={openInterval}
+        onClose={() => setOpenInterval(false)}
+        value={inspectionIntervalDays}
+        onChange={(v) => setInspectionIntervalDays(v)}
+        nextInspectionDate={nextInspectionDate}
+        saving={savingInterval}
+        onSave={async (newDays) => {
+          try {
+            setSavingInterval(true)
+            const base = process.env.NEXT_PUBLIC_BASE_PATH || ''
+            const token = (typeof window !== 'undefined' && (localStorage.getItem('access_token') || sessionStorage.getItem('access_token'))) || ''
+
+            const res = await fetch(`${base}/api/machines/${encodeURIComponent(machineId)}/inspection-interval`, {
+              method: 'PUT',
+              headers: { 'Content-Type': 'application/json', ...(token ? { Authorization: `Bearer ${token}` } : {}) },
+              body: JSON.stringify({ interval_days: Number(newDays) })
+            })
+
+            if (!res.ok) {
+              const err = await res.json().catch(() => ({}))
+
+              throw new Error(err?.error || `Failed: ${res.status}`)
+            }
+
+            const data = await res.json()
+
+            if (Number.isFinite(Number(data?.inspection_interval_days))) {
+              setInspectionIntervalDays(Number(data.inspection_interval_days))
+            }
+
+            if (data?.next_inspection_date) {
+              // setLastInspectionDate は不要。次回点検日は派生で再計算されるが、APIの値を優先したい場合は last を逆算ではなく直接 next を表示に使う設計に変更が必要。
+              // ここでは UI 仕様に合わせて interval 更新だけで派生計算を継続。
+            }
+
+            showSnack('点検間隔を変更しました', 'success')
+            setOpenInterval(false)
+          } catch (e) {
+            showSnack(`点検間隔の変更に失敗しました: ${e?.message || e}`, 'error')
+          } finally {
+            setSavingInterval(false)
+          }
+        }}
+      />
+
+      <Snackbar open={snackbar.open} autoHideDuration={3000} onClose={closeSnack} anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}>
+      <Alert onClose={closeSnack} severity={snackbar.severity} sx={{ width: '100%' }}>
+        {snackbar.message}
+      </Alert>
+      </Snackbar>
+    </>
+  )
+}
+
+export default MachineStatus
diff --git a/javascript-version/src/app/(dashboard)/machine-status/utils/date.js b/javascript-version/src/app/(dashboard)/machine-status/utils/date.js
new file mode 100644
index 000000000..47c639d93
--- /dev/null
+++ b/javascript-version/src/app/(dashboard)/machine-status/utils/date.js
@@ -0,0 +1,102 @@
+'use client'
+
+/*
+======== ファイル概要 ========
+機械ステータス画面で使用する日付・時間の変換ユーティリティ群。
+*/
+
+// 日付/時間ユーティリティ
+
+/**
+ * YYYY/MM/DD 形式の文字列を Date に変換する。
+ * @param   {string}    s          - 変換対象の文字列。
+ * @returns {Date|null}            - 成功時はDate、失敗時はnull。
+ */
+export const parseYmdSlash = (s) => {
+    const m = (s || '').match(/^(\d{4})\/(\d{1,2})\/(\d{1,2})$/)
+
+    if (!m) return null // フォーマット不一致の場合は変換できないため null
+    const y = Number(m[1])
+    const mo = Number(m[2]) - 1
+    const d = Number(m[3])
+    const dt = new Date(y, mo, d)
+
+    return isNaN(dt.getTime()) ? null : dt
+}
+
+/**
+ * YYYY-MM-DD あるいは他日付文字列を Date に変換する。
+ * @param   {string}    s          - 変換対象の文字列。
+ * @returns {Date|null}            - 成功時はDate、失敗時はnull。
+ */
+export const parseYmd = (s) => {
+    if (!s) return null
+
+    if (/^\d{4}-\d{1,2}-\d{1,2}$/.test(s)) {
+        const [y, m, d] = s.split('-').map(Number)
+        const dt = new Date(y, m - 1, d)
+
+        return isNaN(dt.getTime()) ? null : dt
+    }
+
+    const bySlash = parseYmdSlash(s)
+
+    if (bySlash) return bySlash
+    const dt = new Date(s)
+
+    return isNaN(dt.getTime()) ? null : dt
+}
+
+/**
+ * Date を YYYY/MM/DD 形式の文字列に整形する。
+ * @param   {Date}      d          - 整形対象の日付。
+ * @returns {string}               - フォーマット済み文字列。
+ */
+export const formatYmdSlash = (d) => {
+    const y = d.getFullYear()
+    const m = String(d.getMonth() + 1).padStart(2, '0')
+    const da = String(d.getDate()).padStart(2, '0')
+
+    return `${y}/${m}/${da}`
+}
+
+/**
+ * 秒数を HH:MM:SS 形式に変換する。
+ * @param   {number}   sec        - 変換対象の秒数。
+ * @returns {string}              - HH:MM:SS 形式の文字列。無効値時は空文字。
+ */
+export const secondsToHMS = (sec) => {
+    if (sec == null || !Number.isFinite(sec)) return ''
+    const s = Math.max(0, Math.floor(sec))
+    const hh = String(Math.floor(s / 3600)).padStart(2, '0')
+    const mm = String(Math.floor((s % 3600) / 60)).padStart(2, '0')
+    const ss = String(s % 60).padStart(2, '0')
+
+    return `${hh}:${mm}:${ss}`
+}
+
+/**
+ * 2つの日付の差（日数）を計算する。
+ * @param   {Date}     a          - 基準日。
+ * @param   {Date}     b          - 比較日。
+ * @returns {number}              - b - a の日数差。
+ */
+export const daysDiff = (a, b) => {
+    const MS = 24 * 60 * 60 * 1000
+
+    return Math.round((b.setHours(0, 0, 0, 0) - a.setHours(0, 0, 0, 0)) / MS)
+}
+
+/**
+ * 指定日付へ日数を加算する。
+ * @param   {Date}     d          - 基準日。
+ * @param   {number}   days       - 加算する日数。
+ * @returns {Date}                - 加算後の日付。
+ */
+export const addDays = (d, days) => {
+    const nd = new Date(d)
+
+    nd.setDate(nd.getDate() + days)
+
+    return nd
+}
diff --git a/javascript-version/src/app/(dashboard)/page.jsx b/javascript-version/src/app/(dashboard)/page.jsx
index ad7d44e07..4087fb592 100644
--- a/javascript-version/src/app/(dashboard)/page.jsx
+++ b/javascript-version/src/app/(dashboard)/page.jsx
@@ -1,76 +1,71 @@
+"use client";
+
 // MUI Imports
-import Grid from '@mui/material/Grid'
+import Grid from "@mui/material/Grid";
 
-// Components Imports
-import Award from '@views/dashboard/Award'
-import Transactions from '@views/dashboard/Transactions'
-import WeeklyOverview from '@views/dashboard/WeeklyOverview'
-import TotalEarning from '@views/dashboard/TotalEarning'
-import LineChart from '@views/dashboard/LineChart'
-import DistributedColumnChart from '@views/dashboard/DistributedColumnChart'
-import DepositWithdraw from '@views/dashboard/DepositWithdraw'
-import SalesByCountries from '@views/dashboard/SalesByCountries'
-import CardStatVertical from '@components/card-statistics/Vertical'
-import Table from '@views/dashboard/Table'
+// View Components (top dashboard)
+import NoticeCard from "@/views/dashboard/top/NoticeCard";
+import QuickLinksRow from "@/views/dashboard/top/QuickLinksRow";
+import ProductionProgressCard from "@/views/dashboard/top/ProductionProgressCard";
+import MachineErrorLogsCard from "@/views/dashboard/top/MachineErrorLogsCard";
+import ImageInspectionStatusCard from "@/views/dashboard/top/ImageInspectionStatusCard";
+import TodayTasksCard from "@/views/dashboard/top/TodayTasksCard";
+import AdminMenuCard from "@/views/dashboard/top/AdminMenuCard";
 
-const DashboardAnalytics = () => {
+// ダッシュボード（Materio + MUI 構成）
+const DashboardPage = () => {
   return (
-    <Grid container spacing={6}>
-      <Grid item xs={12} md={4}>
-        <Award />
-      </Grid>
-      <Grid item xs={12} md={8} lg={8}>
-        <Transactions />
-      </Grid>
-      <Grid item xs={12} md={6} lg={4}>
-        <WeeklyOverview />
-      </Grid>
-      <Grid item xs={12} md={6} lg={4}>
-        <TotalEarning />
-      </Grid>
-      <Grid item xs={12} md={6} lg={4}>
-        <Grid container spacing={6}>
-          <Grid item xs={12} sm={6}>
-            <LineChart />
+    <Grid container spacing={6} sx={{ mt: 0 }}>
+      {/* 今日のお知らせ + クイックボタン行（先頭） */}
+      <Grid item xs={12}>
+        <Grid container spacing={4} alignItems="stretch">
+          {/* お知らせカード */}
+          <Grid item xs={12} md={6} lg={6}>
+            <NoticeCard />
           </Grid>
-          <Grid item xs={12} sm={6}>
-            <CardStatVertical
-              title='Total Profit'
-              stats='$25.6k'
-              avatarIcon='ri-pie-chart-2-line'
-              avatarColor='secondary'
-              subtitle='Weekly Profit'
-              trendNumber='42%'
-              trend='positive'
-            />
+
+          {/* クイックリンク3枚 */}
+          <QuickLinksRow />
+        </Grid>
+      </Grid>
+      {/* KPIセクション */}
+      <Grid item xs={12}>
+        <Grid container spacing={4}>
+          {/* 生産進捗 */}
+          <Grid item xs={12} md={4}>
+            <ProductionProgressCard />
           </Grid>
-          <Grid item xs={12} sm={6}>
-            <CardStatVertical
-              stats='862'
-              trend='negative'
-              trendNumber='18%'
-              title='New Project'
-              subtitle='Yearly Project'
-              avatarColor='primary'
-              avatarIcon='ri-file-word-2-line'
-            />
+
+          {/* 機械稼働ステータス */}
+          <Grid item xs={12} md={4}>
+            <MachineErrorLogsCard />
           </Grid>
-          <Grid item xs={12} sm={6}>
-            <DistributedColumnChart />
+
+          {/* 画像検査ステータス */}
+          <Grid item xs={12} md={4}>
+            <ImageInspectionStatusCard />
           </Grid>
         </Grid>
       </Grid>
-      <Grid item xs={12} md={6} lg={4}>
-        <SalesByCountries />
-      </Grid>
-      <Grid item xs={12} lg={8}>
-        <DepositWithdraw />
-      </Grid>
+
+
+
+      {/* 生産目標/管理者メニュー */}
       <Grid item xs={12}>
-        <Table />
+        <Grid container spacing={4}>
+          {/* 本日のタスク */}
+          <Grid item xs={12} lg={8}>
+            <TodayTasksCard />
+          </Grid>
+
+          {/* 管理者メニュー */}
+          <Grid item xs={12} lg={4}>
+            <AdminMenuCard />
+          </Grid>
+        </Grid>
       </Grid>
     </Grid>
-  )
-}
+  );
+};
 
-export default DashboardAnalytics
+export default DashboardPage;
diff --git a/javascript-version/src/app/(dashboard)/parts-inventory/ModalBridge.jsx b/javascript-version/src/app/(dashboard)/parts-inventory/ModalBridge.jsx
new file mode 100644
index 000000000..cf488d8e8
--- /dev/null
+++ b/javascript-version/src/app/(dashboard)/parts-inventory/ModalBridge.jsx
@@ -0,0 +1,111 @@
+"use client";
+
+import { useEffect, useMemo, useState, useCallback } from 'react'
+
+import Dialog from '@mui/material/Dialog'
+import DialogTitle from '@mui/material/DialogTitle'
+import DialogContent from '@mui/material/DialogContent'
+import DialogActions from '@mui/material/DialogActions'
+import Button from '@mui/material/Button'
+import IconButton from '@mui/material/IconButton'
+import CloseIcon from '@mui/icons-material/Close'
+
+/*
+======== ファイル概要 ========
+レガシーHTML側から提供されるモーダルAPIをMUIダイアログへ委譲する受け皿。
+Reactコンポーネントとして常駐させ、windowに公開した関数経由で表示・非表示を制御する。
+*/
+
+// レガシーDOM文字列モーダルをMUIダイアログへ橋渡しするコンポーネント (Bridge for legacy DOM-string modals to Materio (MUI) Dialog)
+// window からの利用方法 (Usage from window):
+//   window.__pi_openModal({ title, html, actions: [{id,label,color}], onOpen, maxWidth })
+//   window.__pi_closeModal()
+
+/**
+ * レガシーUIからの命令を受け、MUIダイアログを表示する。
+ * @returns {JSX.Element}   レガシーアプリとReact側を接続するモーダルブリッジコンポーネント。
+ */
+export default function ModalBridge() {
+    const [open, setOpen] = useState(false)
+    const [title, setTitle] = useState('')
+    const [html, setHtml] = useState('')
+    const [actions, setActions] = useState([])
+    const [maxWidth, setMaxWidth] = useState('sm')
+    const [onOpen, setOnOpen] = useState(null)
+
+    // ======== 処理ステップ: グローバルAPI公開準備 → onOpenコールバック実行制御 ========
+    // 1. handleCloseでモーダル状態と内容をリセットし、レガシーの再呼び出しでも前回内容を引きずらないようにする。
+    // 2. useEffectでwindowに公開するAPIをセットし、React環境下でもレガシースクリプトをそのまま動かせるようにする。
+    // 3. 別のuseEffectでモーダル表示後のDOM確定タイミングに合わせてonOpenコールバックを呼び出す。
+
+    const handleClose = useCallback(() => {
+        setOpen(false)
+
+        // 念のため内容も空にして再利用時の表示崩れを防ぐ (also clear content for safety)
+        setTitle('')
+        setHtml('')
+        setActions([])
+        setOnOpen(null)
+    }, [])
+
+    useEffect(() => {
+        // グローバル関数をwindowへエクスポートし、レガシースクリプトから同一APIで呼び出せるようにする
+        window.__pi_openModal = ({ title = '', html = '', actions = [], maxWidth = 'sm', onOpen = null } = {}) => {
+            setTitle(title)
+            setHtml(html)
+            setActions(actions)
+            setMaxWidth(maxWidth)
+            setOnOpen(() => onOpen)
+            setOpen(true)
+        }
+
+        window.__pi_closeModal = handleClose
+
+        // ブリッジ準備が整ったことをレガシー側へ通知
+        window.__pi_modal_ready = true
+        try { window.dispatchEvent(new CustomEvent('pi:modal-ready')) } catch { }
+
+        
+return () => {
+            if (window.__pi_openModal === undefined) return
+            delete window.__pi_modal_ready
+            delete window.__pi_openModal
+            delete window.__pi_closeModal
+        }
+    }, [handleClose])
+
+    // コンテンツが挿入されダイアログが開いた後にonOpenを呼ぶ (call onOpen after content injected and dialog open)
+    useEffect(() => {
+        if (open && typeof onOpen === 'function') {
+            // DOM反映を待つために次フレームで実行する (next tick to ensure content in DOM)
+            const id = requestAnimationFrame(() => onOpen())
+
+            
+return () => cancelAnimationFrame(id)
+        }
+    }, [open, onOpen])
+
+    return (
+        <Dialog open={open} onClose={handleClose} fullWidth maxWidth={maxWidth} scroll='paper'>
+            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '8px 16px' }}>
+                <DialogTitle sx={{ p: 0 }}>{title}</DialogTitle>
+                <IconButton aria-label='close' onClick={handleClose} size='small'>
+                    <CloseIcon />
+                </IconButton>
+            </div>
+            <DialogContent dividers>
+                {/* eslint-disable-next-line react/no-danger */}
+                <div dangerouslySetInnerHTML={{ __html: html }} />
+            </DialogContent>
+            {actions?.length ? (
+                <DialogActions>
+                    {actions.map(a => (
+                        <Button key={a.id || a.label} color={a.color || 'primary'} variant={a.variant || 'contained'} onClick={() => a.onClick?.()}>
+                            {a.label}
+                        </Button>
+                    ))}
+                </DialogActions>
+            ) : null}
+        </Dialog>
+    )
+}
diff --git a/javascript-version/src/app/(dashboard)/parts-inventory/README.md b/javascript-version/src/app/(dashboard)/parts-inventory/README.md
new file mode 100644
index 000000000..2ab2eae06
--- /dev/null
+++ b/javascript-version/src/app/(dashboard)/parts-inventory/README.md
@@ -0,0 +1,160 @@
+# 部品在庫管理 (parts-inventory) 構成ガイド
+
+このディレクトリは、レガシー UI を Next.js ページ内でブリッジして動かす「部品在庫管理」機能です。2025-09 時点のリファクタで、ロジックを役割ごとに分割しました。本書は後から参画するメンバーが全体像と編集ポイントを素早く掴めるようにまとめています。
+
+## 概要
+- 技術スタック: Next.js 14 (App Router) + MUI ダイアログブリッジ + Tailwind。DOM 主体の命令的 UI を段階的にモジュール化。
+- ページエントリ: `page.jsx` が `ModalBridge` を設置し、準備完了のカスタムイベント後に `initPartsInventoryApp()` を呼び出します。
+- 大きな分割方針:
+  - UI描画: `lib/render.js`
+  - モーダルフロー: `lib/modals.js`
+  - API アクセス: `lib/api.js`
+  - ユーティリティ/変換: `lib/utils.js`
+  - 状態・イベント配線・初期ロード: `partsInventoryApp.js`
+
+## ファイル構成と責務
+- `page.jsx`
+  - useEffect で `window.API_BASE` を注入し、`pi:modal-ready` 待ち後に `initPartsInventoryApp()` 実行。
+  - 画面の静的コンテナ（タブ、グリッド表示領域、詳細パネル、FAB）を用意。
+  - React コンポーネント `ModalBridge` が MUI ダイアログを window 経由で操作できるようにブリッジ（`window.__pi_openModal` / `__pi_closeModal`）。
+
+- `partsInventoryApp.js`
+  - アプリのエントリ。以下を担当:
+    - 状態保持: `racks`, `currentRackId`, `selectedSlotId`, `isMoveMode`, `moveOriginSlotId` など。
+    - 初期ロード: ラック一覧＋詳細の取得、モックフォールバック、最終ラックの復元。
+    - イベント配線: タブ切替、FAB、詳細パネルの操作、グリッド（移動/選択）。
+    - 再描画: `renderRackTabs` / `renderCurrentRack` / `renderDetails` 呼び出し。
+    - サーバー同期: `refreshCurrentRackFromApi()` で現在ラックのスロットを最新化。
+  - モーダルの具体的な UI/業務フローは `lib/modals.js` に委譲します（本体は呼び出しとコンテキスト提供のみ）。
+
+- `lib/render.js`
+  - DOM 生成・差し替えのみを担当。
+  - 提供関数:
+    - `renderRackTabs(racks, currentRackId)`
+    - `renderCurrentRack(racks, currentRackId, selectedSlotId, isMoveMode, moveOriginSlotId)`
+    - `renderDetails(racks, currentRackId, slotId)`
+
+- `lib/api.js`
+  - API クライアント層。fetch の共通化と型揃え。
+  - 提供関数:
+    - `createApi(apiBase)`: `listRacks`, `getRack`, `createRack`, `deleteRack`, `createSlot`, `deleteSlot`, `upsertSlot`, `useSlot`, `moveSlot`
+    - `mapApiSlotToAppPart(slot)` : API 形→アプリ内形への 1 スロット変換
+
+- `lib/utils.js`
+  - 汎用ヘルパーとデータ変換。
+  - 主な関数:
+    - `s(value, fallback?)` サニタイズ/未定義ガード
+    - `getRackNumericId(rack|id)` ラックIDの数値化
+    - `createLastRackStorage(apiBase)` 最終ラックの保存/復元
+    - `transformApiDataToAppData(apiData)` API配列→内部表現への変換
+
+- `lib/modals.js`
+  - すべてのモーダル UI とビジネスフローを集約。
+  - ブリッジ: `openModalWithBridge`, `closeModal`, `showQrScannerModal`
+  - 業務モーダル:
+    - `showAddRackModal(ctx)` 新規ラック作成
+    - `showDeleteRackModal(ctx, rackId, rackName)` ラック削除
+    - `showUsePartModal(ctx, slotId, currentRack, part)` 使用
+    - `showDeletePartModal(ctx, slotId, currentRack, part)` 箱削除
+    - `showEditPartModal(ctx, slotId, currentRack, part)` 箱情報編集（数量0は削除）
+    - `showStorePartModal(callback)` 入庫フォーム（棚スキャンは呼び出し側）
+    - `showShelfQrModal(rack, slotId)` 単体棚QR表示
+    - `showBulkShelfQrModal(rack)` 棚QR一括生成
+
+## データモデル（内部表現）
+- ラック: `{ id: string, name: string, rows: number, cols: number, slots: Record<slotId, Part|null> }`
+- スロットID: `"A-1"` のように 行(A..Z) + "-" + 列番号
+- 部品(Part): `{ partName: string, partModelNumber?: string|null, quantity: number, color?: string|null }`
+- API→内部変換は `transformApiDataToAppData` と `mapApiSlotToAppPart` に集約。
+
+## 状態と再描画
+- 主要状態（`partsInventoryApp.js`）
+  - `racks`: 全ラックの内部表現
+  - `currentRackId`: 現在選択中ラック
+  - `selectedSlotId`: 詳細パネルに表示中のスロット
+  - `isMoveMode` / `moveOriginSlotId`: 移動モードの制御
+- 再描画タイミング
+  - タブや FAB 操作、詳細パネルのアクション後に `render*` を都度呼び分け。
+  - サーバー更新後は `refreshCurrentRackFromApi()` で同期→ `renderCurrentRack`/`updateDetails`。
+
+## モーダルコンテキスト（ctx）
+`lib/modals.js` の多くの関数は以下のコンテキストを受け取ります。
+
+```ts
+interface Ctx {
+  api: ReturnType<typeof createApi>;
+  racks: Rack[];
+  currentRackId: string | null;
+  setRacks(next: Rack[]): void;            // racks を差し替え
+  setCurrentRackId(id: string | null): void;
+  setLastRackId(id: string | null): void;  // localStorage 保存
+  renderApp(): void;                       // タブ/グリッド/詳細の初期描画セット
+  updateDetails(slotId: string | null): void;
+  refreshCurrentRackFromApi(): Promise<Rack|null>;
+  mapApiSlotToAppPart: typeof mapApiSlotToAppPart;
+}
+```
+
+`partsInventoryApp.js` 内で `getCtx()` としてこのオブジェクトを組み立て、各モーダル呼び出しに渡しています。
+
+## イベント配線（主な導線）
+- タブ（`#rack-tabs`）
+  - クリック: タブ切替、削除ボタンは `showDeleteRackModal(ctx, rackId, rackName)`
+- FAB
+  - 追加: `showAddRackModal(ctx)`
+  - QR入庫: `showStorePartModal()` → 入力確定後に `showQrScannerModal()` → 空き棚へ `api.createSlot(...)`
+  - QR出庫: `showQrScannerModal()` → 最初に見つかった在庫棚へ `showUsePartModal(...)`
+- 詳細パネル（`#details-panel`）のボタン
+  - 使用/格納/移動/編集/削除/棚QR の各アクションをハンドリング
+- グリッド（`#rack-display-area`）
+  - 通常: 最新同期→`updateDetails(slotId)`
+  - 移動モード: 空き棚クリックで `api.moveSlot(...)` → 同期→解除
+
+## API とベースパス
+- クライアントは `/api/...` にアクセス（Next.js rewrite 経由でバックエンドへ）。
+- このページでは `NEXT_PUBLIC_API_BASE` を `page.jsx` から `window.API_BASE` として注入しています。
+- 変更したい場合は `javascript-version/next.config.mjs` の rewrites と `.env` を参照（dev は再起動が必要）。
+
+## ライフサイクルとクリーンアップ
+- `ModalBridge` が読み込み完了すると `pi:modal-ready` を発火 → 以降 `__pi_openModal/__pi_closeModal` が利用可。
+- `initPartsInventoryApp()` は再入場を考慮し、前回のイベントリスナを `window.__piAppTeardown` で解除します。
+- モーダルを閉じた直後のゴーストクリック対策として、キャプチャ段階の pointer/mouse ガードを用意。
+
+## よくあるハマりどころ
+- render 内でイベントまでバインドしない
+  - ハンドラは必ず `partsInventoryApp.js`（一箇所）に集約。二重バインドやリーク防止のため。
+- ラックIDの数値化
+  - API 呼び出し前に `getRackNumericId()` を使用（`rack-12` → `12`）。
+- サーバー同期の抜け
+  - `createSlot/deleteSlot/upsert/ use/move` 後は極力 `refreshCurrentRackFromApi()` で最新化し、UI も再描画。
+
+## 機能拡張の指針
+- 新しいモーダルを追加する
+  1) `lib/modals.js` に UI/バリデーション/サーバー呼び出しを実装
+  2) `partsInventoryApp.js` でイベントからその関数を呼ぶ（必要なら `getCtx()` を渡す）
+- API の変更に追従する
+  - `lib/api.js` だけを更新し、呼び出し側は同じ関数名を使い続けられるようにする
+- レンダリングの仕様変更
+  - `lib/render.js` だけを編集。イベント配線は触らない
+
+## 簡易フロー図（テキスト）
+- 起動: page.jsx → ModalBridge → pi:modal-ready → initPartsInventoryApp()
+- 初期化: API から racks+details 取得 or モック → 状態セット → render*
+- 操作: イベント → 必要に応じてモーダル表示 → API 呼び出し → refresh → render/updateDetails
+
+## 動作確認のヒント
+- ローカル dev（pnpm 推奨）
+  - パッケージ管理はリポジトリルートの `javascript-version/package.json` 参照
+  - 既定スクリプト（Windows PowerShell）
+
+```powershell
+# 依存解決
+pnpm install
+# Dev サーバー起動
+pnpm dev
+```
+
+バックエンド API が未起動の場合はモックデータで表示されます（初期ラック3つ）。
+
+---
+改善提案や発見事項はこの README 末尾に追記していきましょう。特に API の返却形・エラー形の標準化が進んだ場合、`lib/api.js` と本書の対応部分を更新してください。
\ No newline at end of file
diff --git a/javascript-version/src/app/(dashboard)/parts-inventory/lib/api.js b/javascript-version/src/app/(dashboard)/parts-inventory/lib/api.js
new file mode 100644
index 000000000..4a58d893c
--- /dev/null
+++ b/javascript-version/src/app/(dashboard)/parts-inventory/lib/api.js
@@ -0,0 +1,112 @@
+/*
+======== ファイル概要 ========
+部品在庫APIとの通信を行う軽量クライアント。
+GET時のキャッシュ無効化や共通エラーハンドリングを備え、アプリ側からはモック/本番を意識せず呼び出せるようにする。
+*/
+
+// パーツ在庫向けAPIクライアント (API client for Parts Inventory)
+
+// GET 時にキャッシュをバイパスする JSON フェッチユーティリティ (Generic JSON fetch with cache-bypass for GET)
+/**
+ * JSONエンドポイントへアクセスし、GET時はタイムスタンプでキャッシュを回避する。
+ * @param {string} url            - リクエスト先URL。
+ * @param {object} [options={}]   - fetchに渡す追加オプション。
+ * @returns {Promise<any>}        - パース済みJSON、またはJSONでない場合はテキスト/ null。
+ */
+export async function fetchJson(url, options = {}) {
+  const opts = { ...options };
+  const method = (opts.method || 'GET').toUpperCase();
+  let finalUrl = url;
+
+  if (method === 'GET') {
+    finalUrl = url + (url.includes('?') ? '&' : '?') + `_=ts${Date.now()}`;
+    opts.cache = 'no-store';
+    opts.headers = { ...(opts.headers || {}), 'Cache-Control': 'no-cache' };
+  }
+
+  const res = await fetch(finalUrl, opts);
+
+  if (!res.ok) {
+    const txt = await res.text().catch(() => '');
+
+    throw new Error(`HTTP ${res.status} ${res.statusText} - ${txt}`);
+  }
+
+  const contentType = (res.headers.get('content-type') || '').toLowerCase();
+
+  if (res.status === 204) return null;
+
+  if (!contentType.includes('application/json')) {
+    const txt = await res.text().catch(() => '');
+
+    if (!txt) return null;
+    try { return JSON.parse(txt); } catch { return null; }
+  }
+
+  
+return res.json().catch(() => null);
+}
+
+/**
+ * APIベースURLを受け取り、在庫操作に必要なエンドポイント関数群を返す。
+ * @param {string} apiBase   - APIサーバーのルートURL。空文字なら同一オリジン。
+ * @returns {object}         - 各種REST操作を行うメソッドセット。
+ */
+export function createApi(apiBase) {
+  const base = apiBase || '';
+
+  
+return {
+    listRacks: () => fetchJson(`${base}/api/racks`),
+    getRack: rackId => fetchJson(`${base}/api/racks/${rackId}`),
+    createRack: payload => fetchJson(`${base}/api/racks`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(payload)
+    }),
+    deleteRack: rackId => fetchJson(`${base}/api/racks/${rackId}`, { method: 'DELETE' }),
+
+    upsertSlot: (rackId, slotId, body) => fetchJson(`${base}/api/racks/${rackId}/slots/${encodeURIComponent(slotId)}`, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(body)
+    }),
+    createSlot: (rackId, slotId, body) => fetchJson(`${base}/api/racks/${rackId}/slots/${encodeURIComponent(slotId)}`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(body)
+    }),
+    deleteSlot: (rackId, slotId) => fetchJson(`${base}/api/racks/${rackId}/slots/${encodeURIComponent(slotId)}`, { method: 'DELETE' }),
+    useSlot: (rackId, slotId, qty) => fetchJson(`${base}/api/racks/${rackId}/slots/${encodeURIComponent(slotId)}/use`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ quantity_to_use: qty })
+    }),
+    moveSlot: (fromRackId, fromSlotId, toRackId, toSlotId) => fetchJson(`${base}/api/racks/move/`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        from_rack_id: fromRackId,
+        from_slot_identifier: fromSlotId,
+        to_rack_id: toRackId,
+        to_slot_identifier: toSlotId
+      })
+    })
+  };
+}
+
+/**
+ * APIから返却されたスロット情報をアプリ内部の部品モデルへ変換する。
+ * @param {object|null} slot   - APIレスポンスのslotオブジェクト。
+ * @returns {object|null}      - アプリ内で扱いやすい部品情報。部品なしなら null。
+ */
+export function mapApiSlotToAppPart(slot) {
+  if (!slot) return null;
+  
+return {
+    partName: slot.part_name,
+    partModelNumber: slot.part_model_number || '',
+    quantity: slot.quantity,
+    color: (slot.color_code || '').toString().replace(/^#/, '')
+  };
+}
diff --git a/javascript-version/src/app/(dashboard)/parts-inventory/lib/modals.js b/javascript-version/src/app/(dashboard)/parts-inventory/lib/modals.js
new file mode 100644
index 000000000..d3079be67
--- /dev/null
+++ b/javascript-version/src/app/(dashboard)/parts-inventory/lib/modals.js
@@ -0,0 +1,600 @@
+/*
+======== ファイル概要 ========
+モーダル表示ロジックをまとめ、レガシーDOMとReactモーダルブリッジの間を仲介するヘルパー群。
+部品在庫アプリで利用する各種モーダルをここから呼び出す。
+*/
+
+// モーダル制御ヘルパー群 (Modal helpers bridged via ModalBridge React component)
+import { s, getRackNumericId } from './utils';
+import { startQrScanner } from './qrScanner';
+
+/**
+ * モーダルブリッジが公開する関数を通じてHTML文字列モーダルを開く。
+ * @param {object} [options={}]                     - モーダルの構成情報。
+ * @param {string} [options.title='']              - タイトル文字列。
+ * @param {string} [options.html='']               - 内容として埋め込むHTML文字列。
+ * @param {Array}  [options.actions=[]]            - ボタン定義配列。
+ * @param {string} [options.maxWidth='sm']         - MUI DialogのmaxWidth指定。
+ * @param {Function|null} [options.onOpen=null]    - 表示完了後に呼ばれるフック。
+ * @returns {void}
+ */
+export function openModalWithBridge({ title = '', html = '', actions = [], maxWidth = 'sm', onOpen = null } = {}) {
+  if (typeof window !== 'undefined' && typeof window.__pi_openModal === 'function') {
+    window.__pi_openModal({ title, html, actions, maxWidth, onOpen });
+  } else {
+    console.warn('Modal bridge not ready; falling back to alert');
+    alert('モーダルを開けません (Bridge未初期化)');
+  }
+}
+
+/**
+ * モーダルブリッジが提供するクローズ関数を呼び出す。
+ * @returns {void}
+ */
+export function closeModal() {
+  if (typeof window !== 'undefined' && typeof window.__pi_closeModal === 'function') window.__pi_closeModal();
+}
+
+/**
+ * QRコードスキャナー付きモーダルを表示し、読み取り結果をコールバックへ渡す。
+ * @param {string}   title         - モーダルタイトル。
+ * @param {string}   instruction   - ユーザーへの案内文。
+ * @param {Function} onScan        - 読み取り成功時に呼ばれるコールバック。
+ * @returns {void}
+ */
+export function showQrScannerModal(title, instruction, onScan) {
+  openModalWithBridge({
+    title,
+    html: `
+      <div class="p-6 text-center">
+        <div class="grid grid-cols-2 gap-4 items-start">
+          <div class="text-left">
+            <ion-icon name="grid-outline" class="text-6xl text-gray-400"></ion-icon>
+            <p class="mt-2 font-semibold">${s(instruction)}</p>
+            <p id="qr-error" class="mt-2 text-sm text-red-600 hidden"></p>
+          </div>
+          <div class="relative rounded-lg overflow-hidden bg-black aspect-square">
+            <video id="qr-video" autoplay playsinline class="absolute inset-0 w-full h-full object-cover"></video>
+            <canvas id="qr-canvas" class="absolute inset-0 w-full h-full pointer-events-none opacity-0"></canvas>
+            <div class="scanner-line absolute left-0 h-1 bg-red-500 w-full animate-pulse" style="top: 10%"></div>
+          </div>
+        </div>
+      </div>
+      <div class="p-4 bg-gray-50 flex justify-end space-x-2 rounded-b-xl">
+        <button id="cancel-btn" class="px-4 py-2 bg-gray-200 text-gray-800 rounded-md hover:bg-gray-300">キャンセル</button>
+      </div>` ,
+    onOpen: () => {
+      const video = document.getElementById('qr-video');
+      const canvas = document.getElementById('qr-canvas');
+      const errEl = document.getElementById('qr-error');
+
+      function showErr(msg) { if (!errEl) return; errEl.textContent = msg; errEl.classList.remove('hidden'); }
+
+      let stopScanner = null;
+
+      try {
+        stopScanner = startQrScanner({
+          videoEl: video,
+          canvasEl: canvas,
+          onDecode: data => {
+            let payload = null;
+            try { payload = JSON.parse(data); } catch { payload = { raw: data }; }
+            // 停止とクローズ後にコールバック
+            try { stopScanner && stopScanner(); } catch {}
+            closeModal();
+            try { onScan && onScan(payload); } catch (e) { console.warn('onScan callback error', e); }
+          },
+          onError: err => {
+            console.error('QRスキャナ初期化エラー', err);
+            showErr('カメラの起動に失敗しました。権限や接続状態をご確認ください。');
+          },
+          // 画面中央80%の正方形を検知範囲に設定（画面外や端の誤検知を低減）
+          roi: { x: 0.1, y: 0.1, width: 0.8, height: 0.8 }
+        });
+      } catch (e) {
+        console.error('QRスキャナ起動失敗', e);
+        showErr('QRスキャナを開始できませんでした。');
+      }
+
+      document.getElementById('cancel-btn').onclick = () => {
+        try { stopScanner && stopScanner(); } catch {}
+        closeModal();
+      };
+    }
+  });
+}
+
+/**
+ * 新しいラックを作成するモーダルを開き、完了後にアプリ状態を更新する。
+ * @param {object} ctx   - ラック作成時に利用するアプリケーションコンテキスト。
+ * @returns {void}
+ */
+// ラック追加モーダル (Add Rack)
+export function showAddRackModal(ctx) {
+  openModalWithBridge({
+    title: '新しいラックを作成',
+    html: `
+      <div class="p-6">
+        <form id="add-rack-form" class="space-y-4">
+          <div>
+            <label for="new-rack-name" class="text-sm font-medium text-gray-700">ラック名</label>
+            <input id="new-rack-name" name="rackName" required class="w-full bg-gray-100 focus:bg-white border-gray-300 rounded-md mt-1 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 p-3" placeholder="例: A棟-3F-スチール棚">
+          </div>
+          <div class="grid grid-cols-2 gap-4">
+            <div>
+              <label for="new-rack-rows" class="text-sm font-medium text-gray-700">縦 (行数)</label>
+              <input id="new-rack-rows" name="rows" type="number" min="1" max="26" required class="w-full bg-gray-100 focus:bg-white border-gray-300 rounded-md mt-1 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 p-3" value="5">
+            </div>
+            <div>
+              <label for="new-rack-cols" class="text-sm font-medium text-gray-700">横 (列数)</label>
+              <input id="new-rack-cols" name="cols" type="number" min="1" max="50" required class="w-full bg-gray-100 focus:bg-white border-gray-300 rounded-md mt-1 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 p-3" value="5">
+            </div>
+          </div>
+        </form>
+      </div>
+      <div class="p-4 bg-gray-100 flex justify-end space-x-2 rounded-b-xl">
+        <button id="cancel-btn" class="px-4 py-2 bg-gray-200 text-gray-800 rounded-md hover:bg-gray-300">キャンセル</button>
+        <button id="confirm-add-rack-btn" type="submit" form="add-rack-form" class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700">作成</button>
+      </div>`,
+    onOpen: () => {
+      document.getElementById('add-rack-form').onsubmit = async e => {
+        e.preventDefault();
+        const formData = new FormData(e.target);
+
+        const payload = {
+          rack_name: formData.get('rackName'),
+          rows: Number(formData.get('rows')),
+          cols: Number(formData.get('cols'))
+        };
+
+        try {
+          const created = await ctx.api.createRack(payload);
+
+          const newRack = {
+            id: `rack-${created.rack_id}`,
+            name: created.rack_name || payload.rack_name,
+            rows: created.rows || payload.rows,
+            cols: created.cols || payload.cols,
+            slots: {}
+          };
+
+          const next = ctx.racks.slice();
+
+          next.push(newRack);
+          ctx.setRacks(next);
+          ctx.setCurrentRackId(newRack.id);
+          ctx.setLastRackId(newRack.id);
+          ctx.renderApp();
+          closeModal();
+        } catch (err) {
+          console.error('ラック作成に失敗', err);
+          alert('ラックの作成に失敗しました。サーバーの状態を確認してください。');
+        }
+      };
+
+      document.getElementById('cancel-btn').onclick = closeModal;
+    }
+  });
+}
+
+/**
+ * ラック削除確認モーダルを表示し、承認時にAPI削除およびUI更新を行う。
+ * @param {object} ctx       - アプリケーションコンテキスト。
+ * @param {string} rackId    - 削除対象のラックID。
+ * @param {string} rackName  - 確認メッセージに表示するラック名。
+ * @returns {void}
+ */
+// ラック削除モーダル (Delete Rack)
+export function showDeleteRackModal(ctx, rackId, rackName) {
+  const rackToDelete = ctx.racks.find(r => r.id === rackId);
+  const hasParts = Object.values(rackToDelete?.slots || {}).some(slot => slot !== null);
+
+  const warningMessage = hasParts
+    ? '<p class="text-red-600 bg-red-100 p-3 rounded-lg text-sm mt-4"><ion-icon name="warning-outline" class="mr-2"></ion-icon>このラックには部品が保管されています。削除すると部品情報も失われます。</p>'
+    : '';
+
+  openModalWithBridge({
+    title: 'ラックの削除',
+    html: `
+      <div class="p-6">
+        <p class="mt-2 text-sm text-gray-600">本当に「<strong class="text-gray-900">${rackName}</strong>」を削除しますか？<br>この操作は取り消せません。</p>
+        ${warningMessage}
+      </div>
+      <div class="p-4 bg-gray-50 flex justify-end space-x-2 rounded-b-xl">
+        <button id="cancel-btn" class="px-4 py-2 bg-gray-200 text-gray-800 rounded-md hover:bg-gray-300">キャンセル</button>
+        <button id="confirm-delete-btn" class="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700">削除</button>
+      </div>`,
+    onOpen: () => {
+      document.getElementById('confirm-delete-btn').onclick = async () => {
+        try {
+          const rackNumericId = parseInt(String(rackId).replace(/[^0-9]/g, ''), 10);
+
+          if (!Number.isFinite(rackNumericId)) throw new Error('無効なrack_id');
+          await ctx.api.deleteRack(rackNumericId);
+          const next = ctx.racks.filter(r => r.id !== rackId);
+
+          ctx.setRacks(next);
+
+          if (ctx.currentRackId === rackId) {
+            ctx.setCurrentRackId(next.length > 0 ? next[0].id : null);
+          }
+
+          ctx.setLastRackId(ctx.currentRackId);
+          ctx.renderApp();
+          closeModal();
+        } catch (err) {
+          console.error('ラック削除に失敗', err);
+          alert('ラックの削除に失敗しました。サーバーの状態を確認してください。');
+        }
+      };
+
+      document.getElementById('cancel-btn').onclick = closeModal;
+    }
+  });
+}
+
+/**
+ * 部品使用モーダルを表示し、使用数量を入力させてAPIを呼び出す。
+ * @param {object} ctx             - アプリケーションコンテキスト。
+ * @param {string} slotId          - 操作対象の棚ID。
+ * @param {object} currentRack     - 現在表示中のラック情報。
+ * @param {object} part            - 現在棚に入っている部品情報。
+ * @returns {void}
+ */
+// 部品使用モーダル (Use Part)
+export function showUsePartModal(ctx, slotId, currentRack, part) {
+  openModalWithBridge({
+    title: `「${s(part.partName)}」を使用`,
+    html: `
+      <div class="p-6">
+        <div class="p-4 rounded-lg">
+          <label for="use-quantity" class="block text-sm font-medium text-gray-700">使用する数量</label>
+          <p class="text-xs text-gray-500 mb-2">(現在庫: ${part.quantity})</p>
+          <input id="use-quantity" type="number" min="1" max="${part.quantity}" class="w-full bg-gray-100 focus:bg-white border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 p-3" placeholder="数量を入力">
+          <p id="use-error" class="mt-2 text-sm text-red-600 hidden"></p>
+        </div>
+      </div>
+      <div class="p-4 bg-gray-100 flex justify-end space-x-2 rounded-b-xl">
+        <button id="cancel-btn" class="px-4 py-2 bg-gray-200 text-gray-800 rounded-md hover:bg-gray-300">キャンセル</button>
+        <button id="confirm-use-btn" class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700">確定</button>
+      </div>`,
+    onOpen: () => {
+      const qtyInput = document.getElementById('use-quantity');
+      const errEl = document.getElementById('use-error');
+      const confirmBtn = document.getElementById('confirm-use-btn');
+
+      function showErrorMsg(msg) { errEl.textContent = msg; errEl.classList.remove('hidden'); }
+
+      function hideErrorMsg() { errEl.textContent = ''; errEl.classList.add('hidden'); }
+
+      function validateUseInput() {
+        const v = parseInt(qtyInput.value);
+
+        if (!Number.isFinite(v) || v < 1) { showErrorMsg('1以上の数量を入力してください。'); confirmBtn.disabled = true; 
+
+return false; }
+
+        if (v > part.quantity) { showErrorMsg(`現在庫数(${part.quantity})を超えています。`); confirmBtn.disabled = true; 
+
+return false; }
+
+        hideErrorMsg(); confirmBtn.disabled = false; 
+
+return true;
+      }
+
+      qtyInput.addEventListener('input', validateUseInput);
+      validateUseInput();
+
+      document.getElementById('confirm-use-btn').onclick = async () => {
+        if (!validateUseInput()) { qtyInput.focus(); 
+
+return; }
+
+        const quantity = parseInt(qtyInput.value);
+        const rackNumericId = getRackNumericId(currentRack);
+
+        if (!Number.isFinite(rackNumericId)) { alert('ラックIDの解決に失敗しました'); 
+
+return; }
+
+        try {
+          const res = await ctx.api.useSlot(rackNumericId, slotId, quantity);
+          const remain = res && res.remaining_quantity != null ? Number(res.remaining_quantity) : NaN;
+
+          if (Number.isFinite(remain)) { if (remain <= 0) { currentRack.slots[slotId] = null; } else { part.quantity = remain; } }
+          else { part.quantity -= quantity; if (part.quantity <= 0) currentRack.slots[slotId] = null; }
+
+          closeModal();
+          setTimeout(() => ctx.updateDetails(slotId), 0);
+        } catch (err) {
+          console.error('使用APIに失敗', err);
+          alert('部品の使用に失敗しました。サーバーの状態を確認してください。');
+        }
+      };
+
+      document.getElementById('cancel-btn').onclick = closeModal;
+    }
+  });
+}
+
+/**
+ * 棚から部品を削除する確認モーダルを表示する。
+ * @param {object} ctx         - アプリケーションコンテキスト。
+ * @param {string} slotId      - 棚ID。
+ * @param {object} currentRack - 現在のラック情報。
+ * @param {object} part        - 削除対象の部品情報。
+ * @returns {void}
+ */
+// 部品削除モーダル (Delete Part)
+export function showDeletePartModal(ctx, slotId, currentRack, part) {
+  openModalWithBridge({
+    title: '箱の削除',
+    html: `
+      <div class="p-6">
+        <p class="mt-2 text-sm text-gray-600">本当に「<strong class="text-gray-900">${s(part.partName)}</strong>」を棚から削除しますか？</p>
+        <p class="text-red-600 bg-red-100 p-3 rounded-lg text-sm mt-4"><ion-icon name="warning-outline" class="mr-2"></ion-icon>この操作は取り消せません。</p>
+      </div>
+      <div class="p-4 bg-gray-50 flex justify-end space-x-2 rounded-b-xl">
+        <button id="cancel-btn" class="px-4 py-2 bg-gray-200 text-gray-800 rounded-md hover:bg-gray-300">キャンセル</button>
+        <button id="confirm-delete-part-btn" class="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700">削除</button>
+      </div>`,
+    onOpen: () => {
+      document.getElementById('confirm-delete-part-btn').onclick = async () => {
+        const rackNumericId = getRackNumericId(currentRack);
+
+        if (!Number.isFinite(rackNumericId)) { alert('ラックIDの解決に失敗しました'); 
+
+return; }
+
+        try {
+          await ctx.api.deleteSlot(rackNumericId, slotId);
+          currentRack.slots[slotId] = null;
+          closeModal();
+          setTimeout(() => ctx.updateDetails(slotId), 0);
+        } catch (err) {
+          console.error('部品削除に失敗', err);
+          alert('部品の削除に失敗しました。サーバーの状態を確認してください。');
+        }
+      };
+
+      document.getElementById('cancel-btn').onclick = closeModal;
+    }
+  });
+}
+
+/**
+ * 部品情報の編集モーダルを表示し、数量ゼロ時の削除分岐も担当する。
+ * @param {object} ctx         - アプリケーションコンテキスト。
+ * @param {string} slotId      - 棚ID。
+ * @param {object} currentRack - ラック情報。
+ * @param {object} part        - 編集対象の部品情報。
+ * @returns {void}
+ */
+// 部品編集モーダル (Edit Part)
+export function showEditPartModal(ctx, slotId, currentRack, part) {
+  const colorPalette = ['4A90E2', '50E3C2', 'F5A623', 'D0021B', '9013FE', '7ED321', 'F8E71C', 'BD10E0', '4A4A4A', 'E9E9E9'];
+  const colorPaletteHtml = colorPalette.map(color => `<button type="button" data-color="${color}" class="color-swatch w-8 h-8 rounded-full border-2" style="background-color: #${color};"></button>`).join('');
+
+  openModalWithBridge({
+    title: '箱の情報を編集',
+    html: `
+      <style>.color-swatch.selected { outline: 2px solid #4f46e5; outline-offset: 2px; }</style>
+      <div class="p-6">
+        <form id="edit-part-form" class="space-y-4">
+          <div>
+            <label class="text-sm font-medium text-gray-700">部品名</label>
+            <input name="partName" required class="w-full bg-gray-100 focus:bg-white border-gray-300 rounded-md mt-1 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 p-3" value="${s(part?.partName)}">
+          </div>
+          <div>
+            <label class="text-sm font-medium text-gray-700">部品型番 (任意)</label>
+            <input name="partModelNumber" class="w-full bg-gray-100 focus:bg-white border-gray-300 rounded-md mt-1 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 p-3" value="${s(part?.partModelNumber, '')}">
+          </div>
+          <div>
+            <label class="text-sm font-medium text-gray-700">数量</label>
+            <input name="quantity" type="number" min="0" required class="w-full bg-gray-100 focus:bg-white border-gray-300 rounded-md mt-1 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 p-3" value="${part?.quantity ?? ''}">
+          </div>
+          <div>
+            <label class="text-sm font-medium text-gray-700">カラーラベル</label>
+            <div id="color-palette" class="flex flex-wrap gap-2 mt-2 p-2 bg-white rounded-md">${colorPaletteHtml}</div>
+            <input type="hidden" name="color" value="${s(part?.color, '')}">
+          </div>
+        </form>
+      </div>
+      <div class="p-4 bg-gray-100 flex justify-end space-x-2 rounded-b-xl">
+        <button id="cancel-btn" class="px-4 py-2 bg-gray-200 text-gray-800 rounded-md hover:bg-gray-300">キャンセル</button>
+        <button id="confirm-edit-part-btn" type="submit" form="edit-part-form" class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700">保存</button>
+      </div>`,
+    onOpen: () => {
+      const colorPaletteEl = document.getElementById('color-palette');
+      const hiddenColorInput = document.querySelector('input[name="color"]');
+      const initialColor = ((part?.color) || '').toString().toUpperCase();
+      const initialColorEl = initialColor ? colorPaletteEl.querySelector(`[data-color="${initialColor}"]`) : null;
+
+      if (initialColorEl) initialColorEl.classList.add('selected');
+      colorPaletteEl.addEventListener('click', e => {
+        const swatch = e.target.closest('.color-swatch');
+
+        if (!swatch) return;
+        colorPaletteEl.querySelector('.selected')?.classList.remove('selected');
+        swatch.classList.add('selected');
+        hiddenColorInput.value = swatch.dataset.color;
+      });
+
+      document.getElementById('edit-part-form').onsubmit = async e => {
+        e.preventDefault();
+        const formData = new FormData(e.target);
+        const newQuantity = parseInt(formData.get('quantity'));
+        const rackNumericId = getRackNumericId(currentRack);
+
+        if (!Number.isFinite(rackNumericId)) { alert('ラックIDの解決に失敗しました'); 
+
+return; }
+
+        if (newQuantity === 0) {
+          try {
+            await ctx.api.deleteSlot(rackNumericId, slotId);
+            currentRack.slots[slotId] = null;
+            await ctx.refreshCurrentRackFromApi();
+            closeModal();
+            setTimeout(() => ctx.updateDetails(slotId), 0);
+          } catch (err) {
+            console.error('部品削除(数量0)に失敗', err);
+            alert('削除に失敗しました。サーバーをご確認ください。');
+          }
+
+          
+return;
+        }
+
+        const body = {
+          part_name: formData.get('partName'),
+          part_model_number: (formData.get('partModelNumber') || '').toString().trim() || null,
+          quantity: newQuantity,
+          color_code: (formData.get('color') || '').toString().replace(/^#/, '') || null
+        };
+
+        try {
+          const res = await ctx.api.upsertSlot(rackNumericId, slotId, body);
+          const saved = (res && res.slot) ? res.slot : body;
+
+          currentRack.slots[slotId] = ctx.mapApiSlotToAppPart(saved);
+          await ctx.refreshCurrentRackFromApi();
+          closeModal();
+          setTimeout(() => ctx.updateDetails(slotId), 0);
+        } catch (err) {
+          console.error('部品更新に失敗', err);
+          alert('更新に失敗しました。サーバーの状態を確認してください。');
+        }
+      };
+
+      document.getElementById('cancel-btn').onclick = closeModal;
+    }
+  });
+}
+
+/**
+ * 新規部品情報の入力フォームだけを提供するモーダルを表示する。
+ * @param {Function} callback                     - 入力確定後の処理コールバック。
+ * @param {object}   [options={}]                 - 表示オプション。
+ * @param {string}   [options.confirmLabel='棚をスキャンして格納'] - 確認ボタンのラベル。
+ * @returns {void}
+ */
+// 新規部品入力モーダル (Store new part form only, caller supplies callback)
+export function showStorePartModal(callback, { confirmLabel = '棚をスキャンして格納' } = {}) {
+  openModalWithBridge({
+    title: '新しい部品の情報を入力',
+    html: `
+      <div class="p-6">
+        <form id="store-form" class="space-y-4">
+          <div><label class="text-sm font-medium text-gray-700">部品名</label><input name="partName" required class="w-full bg-gray-100 focus:bg-white border-gray-300 rounded-md mt-1 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 p-3"></div>
+          <div><label class="text-sm font-medium text-gray-700">部品型番 (任意)</label><input name="partModelNumber" class="w-full bg-gray-100 focus:bg-white border-gray-300 rounded-md mt-1 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 p-3"></div>
+          <div><label class="text-sm font-medium text-gray-700">数量</label><input name="quantity" type="number" min="1" required class="w-full bg-gray-100 focus:bg-white border-gray-300 rounded-md mt-1 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 p-3"></div>
+        </form>
+      </div>
+      <div class="p-4 bg-gray-100 flex justify-end space-x-2 rounded-b-xl">
+        <button id="cancel-btn" class="px-4 py-2 bg-gray-200 text-gray-800 rounded-md hover:bg-gray-300">キャンセル</button>
+        <button id="confirm-store-btn" type="submit" form="store-form" class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700">${s(confirmLabel)}</button>
+      </div>`,
+    onOpen: () => {
+      document.getElementById('store-form').onsubmit = e => {
+        e.preventDefault();
+        const formData = new FormData(e.target);
+
+        const newPart = {
+          partName: formData.get('partName'),
+          partModelNumber: formData.get('partModelNumber'),
+          quantity: parseInt(formData.get('quantity')),
+          color: ['4A90E2', '50E3C2', 'F5A623', 'D0021B', '9013FE'][Math.floor(Math.random() * 5)]
+        };
+
+        callback(newPart);
+      };
+
+      document.getElementById('cancel-btn').onclick = closeModal;
+    }
+  });
+}
+
+/**
+ * 単一棚分のQRコードを表示するモーダルを開く。
+ * @param {object} rack   - 対象ラック情報。
+ * @param {string} slotId - 棚ID。
+ * @returns {void}
+ */
+// 棚QR表示モーダル (Shelf QR)
+export function showShelfQrModal(rack, slotId) {
+  const rackNumericId = parseInt(String(rack.id).replace(/[^0-9]/g, ''), 10);
+  const payload = { type: 'rack_slot', rack_id: Number.isFinite(rackNumericId) ? rackNumericId : rack.id, slot_identifier: slotId };
+  const qrData = encodeURIComponent(JSON.stringify(payload));
+
+  openModalWithBridge({
+    title: '棚QRコード',
+    html: `
+      <div class="p-6 text-center">
+        <p class="text-sm text-gray-600 mb-4">このQRコードを印刷して棚の<br><strong>${slotId}</strong>の場所に貼り付けてください。</p>
+        <img src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${qrData}" alt="QR Code" class="mx-auto border-4">
+        <p class="mt-2 font-semibold">${rack.name}</p>
+        <p class="text-xs text-gray-500">場所: ${slotId}</p>
+      </div>
+      <div class="p-4 bg-gray-50 flex justify-end space-x-2 rounded-b-xl">
+        <button id="cancel-btn" class="px-4 py-2 bg-gray-200 text-gray-800 rounded-md hover:bg-gray-300">閉じる</button>
+        <button id="print-btn" class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700">印刷</button>
+      </div>`,
+    onOpen: () => {
+      document.getElementById('print-btn').onclick = () => console.log('印刷処理を実行 (ダミー)');
+      document.getElementById('cancel-btn').onclick = closeModal;
+    }
+  });
+}
+
+/**
+ * ラック全体の棚QRコードを一覧生成し、印刷対応モーダルを表示する。
+ * @param {object} rack   - 対象ラック情報。
+ * @returns {void}
+ */
+// 棚QR一括モーダル (Bulk shelf QR)
+export function showBulkShelfQrModal(rack) {
+  let qrGridHtml = '';
+
+  for (let r = 1; r <= rack.rows; r++) {
+    const rowChar = String.fromCharCode(64 + r);
+
+    for (let c = 1; c <= rack.cols; c++) {
+      const slotId = `${rowChar}-${c}`;
+      const rackNumericId = parseInt(String(rack.id).replace(/[^0-9]/g, ''), 10);
+      const payload = { type: 'rack_slot', rack_id: Number.isFinite(rackNumericId) ? rackNumericId : rack.id, slot_identifier: slotId };
+      const qrData = encodeURIComponent(JSON.stringify(payload));
+
+      qrGridHtml += `
+        <div class="qr-item border rounded-md p-2 flex flex-col items-center justify-center bg-white">
+          <img src="https://api.qrserver.com/v1/create-qr-code/?size=100x100&data=${qrData}" alt="QR Code" class="mx-auto">
+          <p class="mt-2 font-bold text-center text-sm">${rack.name}</p>
+          <p class="font-mono text-center text-lg">${slotId}</p>
+        </div>`;
+    }
+  }
+
+  const modalHtml = `
+    <style>
+      #printable-qrs { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
+      @media print {
+        .modal-header, .modal-footer { display: none !important; }
+        #printable-qrs { grid-template-columns: repeat(${rack.cols}, 1fr); max-height: none !important; overflow: visible !important; }
+      }
+    </style>
+    <div class="p-6 modal-header">
+      <h3 class="text-lg font-bold mb-2">棚QRコード一括生成</h3>
+      <p class="text-sm text-gray-600">「${rack.name}」のすべての棚QRコードです。印刷して貼り付けてください。</p>
+    </div>
+    <div id="printable-qrs" class="p-4 max-h-[60vh] overflow-y-auto bg-gray-100">${qrGridHtml}</div>
+    <div class="p-4 bg-gray-50 flex justify-end space-x-2 modal-footer rounded-b-xl">
+      <button id="cancel-btn" class="px-4 py-2 bg-gray-200 text-gray-800 rounded-md hover:bg-gray-300">閉じる</button>
+      <button id="print-btn" class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700">印刷</button>
+    </div>`;
+
+  openModalWithBridge({ title: '棚QRコード一括生成', html: modalHtml, maxWidth: 'lg', onOpen: () => {
+    document.getElementById('print-btn').onclick = () => window.print();
+    document.getElementById('cancel-btn').onclick = () => closeModal();
+  }});
+}
diff --git a/javascript-version/src/app/(dashboard)/parts-inventory/lib/qrScanner.js b/javascript-version/src/app/(dashboard)/parts-inventory/lib/qrScanner.js
new file mode 100644
index 000000000..081b39a85
--- /dev/null
+++ b/javascript-version/src/app/(dashboard)/parts-inventory/lib/qrScanner.js
@@ -0,0 +1,134 @@
+/*
+======== ファイル概要 ========
+ブラウザのカメラを利用してQRコードをリアルタイムに読み取るためのユーティリティ。
+jsQRライブラリを用いてデコードし、停止用の関数を呼び出し元へ返す。
+*/
+
+// 軽量カメラ + QR デコード（jsQR を使用）
+// 起動すると停止用の関数を返します
+
+import jsQR from 'jsqr';
+
+/**
+ * 指定した <video> 要素上でカメラQRスキャナーを開始します。オプションでフレーム取得用の <canvas> を使用できます。
+ * 戻り値は stop() 関数（カメラとスキャンループを停止）です。
+ *
+ * オプション:
+ * - videoEl: HTMLVideoElement (必須)
+ * - canvasEl: HTMLCanvasElement (任意: パフォーマンス向上のため推奨)
+ * - onDecode: (string) => void (必須: デコード成功時に呼ばれる)
+ * - onError: (Error) => void (エラー時に呼ばれる)
+ * - constraints: MediaStreamConstraints.video (任意)
+ */
+export function startQrScanner({ videoEl, canvasEl, onDecode, onError, constraints, roi } = {}) {
+    // 必須チェックと環境チェック
+    if (!videoEl) throw new Error('videoEl is required');
+    if (typeof window === 'undefined' || !navigator?.mediaDevices?.getUserMedia) {
+        throw new Error('Camera API not available in this environment');
+    }
+
+    // 内部状態
+    let stream = null;
+    let rafId = null;
+    let active = true;
+    // canvas 要素（外部提供がなければ内部で生成）
+    const canvas = canvasEl || document.createElement('canvas');
+    // willReadFrequently を指定してピクセル読み取りを最適化
+    const ctx = canvas.getContext('2d', { willReadFrequently: true });
+
+    // ビデオ制約（指定がなければ背面カメラ優先・解像度目安を指定）
+    const videoConstraints = constraints || { facingMode: { ideal: 'environment' }, width: { ideal: 1280 }, height: { ideal: 720 } };
+
+    // 停止処理：アニメーションフレーム、トラック、video.srcObject を解除
+    function stop() {
+        active = false;
+        if (rafId) try { cancelAnimationFrame(rafId); } catch { }
+        if (stream) try { stream.getTracks().forEach(t => t.stop()); } catch { }
+        try { videoEl.srcObject = null; } catch { }
+    }
+
+    // ROI（検知範囲）をビデオピクセル座標に変換
+    function calcScanRect(w, h) {
+        // roi は 0..1 の正規化座標 { x, y, width, height }
+        if (roi && typeof roi === 'object') {
+            const nx = Math.max(0, Math.min(1, Number(roi.x ?? 0)));
+            const ny = Math.max(0, Math.min(1, Number(roi.y ?? 0)));
+            const nw = Math.max(0, Math.min(1 - nx, Number(roi.width ?? 1)));
+            const nh = Math.max(0, Math.min(1 - ny, Number(roi.height ?? 1)));
+            const x = Math.floor(nx * w);
+            const y = Math.floor(ny * h);
+            const ww = Math.max(1, Math.floor(nw * w));
+            const hh = Math.max(1, Math.floor(nh * h));
+            return { x, y, width: ww, height: hh };
+        }
+
+        // 既定: 画面中央の正方形（短辺の80%）
+        const size = Math.floor(Math.min(w, h) * 0.8);
+        const x = Math.floor((w - size) / 2);
+        const y = Math.floor((h - size) / 2);
+        return { x, y, width: size, height: size };
+    }
+
+    // 起動処理：カメラ取得→再生→ループでフレームを取り出してデコード
+    async function start() {
+        try {
+            // カメラストリーム取得
+            stream = await navigator.mediaDevices.getUserMedia({ video: videoConstraints, audio: false });
+            videoEl.srcObject = stream;
+            await videoEl.play();
+
+            // スキャンループ
+            const scan = () => {
+                if (!active) return;
+
+                const w = videoEl.videoWidth;
+                const h = videoEl.videoHeight;
+
+                if (w && h) {
+                    // canvas サイズをビデオと揃える
+                    if (canvas.width !== w) canvas.width = w;
+                    if (canvas.height !== h) canvas.height = h;
+
+                    // ビデオフレームを canvas に描画
+                    ctx.drawImage(videoEl, 0, 0, w, h);
+
+                    let imageData = null;
+                    try {
+                        // 検知範囲（ROI）のみをデコード対象にする
+                        const rect = calcScanRect(w, h);
+                        imageData = ctx.getImageData(rect.x, rect.y, rect.width, rect.height);
+                    } catch { /* 取得失敗時は次フレームへ */ }
+
+                    if (imageData) {
+                        // jsQR でデコードを試みる
+                        const code = jsQR(imageData.data, imageData.width, imageData.height, { inversionAttempts: 'dontInvert' });
+                        if (code && code.data) {
+                            // デコード成功時はコールバックを呼んで停止
+                            try {
+                                onDecode && onDecode(code.data);
+                            } finally {
+                                stop();
+
+                            }
+                            return;
+                        }
+                    }
+                }
+
+                // 継続して次フレームを処理
+                rafId = requestAnimationFrame(scan);
+            };
+
+            rafId = requestAnimationFrame(scan);
+        } catch (e) {
+            // 取得や再生でエラーが発生した場合は onError を呼んで停止
+            try { onError && onError(e); } catch { }
+            stop();
+        }
+    }
+
+    // 即時開始
+    start();
+    // 呼び出し元は返された stop 関数で停止可能
+    return stop;
+}
diff --git a/javascript-version/src/app/(dashboard)/parts-inventory/lib/render.js b/javascript-version/src/app/(dashboard)/parts-inventory/lib/render.js
new file mode 100644
index 000000000..4a9fb31ed
--- /dev/null
+++ b/javascript-version/src/app/(dashboard)/parts-inventory/lib/render.js
@@ -0,0 +1,228 @@
+/*
+======== ファイル概要 ========
+ラックタブ・メッシュ・詳細パネルといったDOM描画処理をまとめたレンダリング専用モジュール。
+主処理からDOM構築を切り離し、再描画とハイライト制御を担当する。
+*/
+
+import { s } from './utils';
+
+// ラックタブを描画する関数 (Renders tab headers)
+/**
+ * ラック一覧に基づきタブUIを生成・更新する。
+ * @param {Array}  racks          - 表示対象のラック配列。
+ * @param {string} currentRackId  - 現在アクティブなラックID。
+ * @returns {void}
+ */
+export function renderRackTabs(racks, currentRackId) {
+  const rackTabsEl = document.getElementById('rack-tabs');
+
+  if (!rackTabsEl) return;
+  rackTabsEl.innerHTML = '';
+  racks.forEach(rack => {
+    const a = document.createElement('a');
+
+    a.href = '#';
+    a.dataset.rackId = rack.id;
+    a.className = `rack-tab-item group whitespace-nowrap flex items-center py-3 px-1 border-b-2 font-medium text-sm transition-colors duration-200${rack.id === currentRackId ? ' active' : ''}`;
+    a.innerHTML = `
+      <ion-icon name="server-outline" class="mr-2 text-lg"></ion-icon>
+      <span class="truncate">${rack.name}</span>
+      <button data-action="delete-rack" data-rack-id="${rack.id}" data-rack-name="${rack.name}" class="ml-3 p-1 rounded-full text-gray-400 hover:bg-red-100 hover:text-red-600 opacity-0 group-hover:opacity-100 transition-opacity">
+        <ion-icon name="trash-outline" class="pointer-events-none"></ion-icon>
+      </button>`;
+    rackTabsEl.appendChild(a);
+  });
+}
+
+// 現在選択中ラックのメッシュを描画する関数 (Renders the grid of the currently selected rack)
+/**
+ * 選択中ラックのレイアウトとハイライト状態に基づいて棚グリッドを生成する。
+ * @param {Array}   racks             - 全ラック配列。
+ * @param {string}  currentRackId     - 現在のラックID。
+ * @param {string}  selectedSlotId    - 選択中の棚ID。
+ * @param {boolean} isMoveMode        - 移動モード中かどうか。
+ * @param {string}  moveOriginSlotId  - 移動元の棚ID。
+ * @returns {void}
+ */
+export function renderCurrentRack(racks, currentRackId, selectedSlotId, isMoveMode, moveOriginSlotId) {
+  const rackDisplayArea = document.getElementById('rack-display-area');
+  const rackNameEl = document.getElementById('rack-name');
+  const bulkQrBtn = document.getElementById('bulk-qr-btn');
+
+  if (!rackDisplayArea || !rackNameEl || !bulkQrBtn) return;
+
+  rackDisplayArea.innerHTML = '';
+  const currentRack = racks.find(r => r.id === currentRackId);
+
+  if (!currentRack) {
+    rackNameEl.textContent = 'ラックがありません';
+    rackDisplayArea.innerHTML = '<p class="text-center text-gray-500 p-10">右下のボタンから新しいラックを作成してください。</p>';
+    bulkQrBtn.classList.add('hidden');
+    
+return;
+  }
+
+  bulkQrBtn.classList.remove('hidden');
+  rackNameEl.textContent = currentRack.name;
+
+  const layoutContainer = document.createElement('div');
+
+  layoutContainer.className = 'grid pi-surface';
+  layoutContainer.style.gridTemplateColumns = 'auto 1fr';
+  layoutContainer.style.gridTemplateRows = 'auto 1fr';
+
+  const corner = document.createElement('div');
+
+  corner.className = 'w-12 h-8 sticky left-0 top-0 z-20 pi-surface';
+  layoutContainer.appendChild(corner);
+
+  const colHeadersContainer = document.createElement('div');
+
+  colHeadersContainer.className = 'grid sticky top-0 z-10 pi-surface';
+  colHeadersContainer.style.gridTemplateColumns = `repeat(${currentRack.cols}, 9rem)`;
+  colHeadersContainer.style.gap = '1rem';
+  colHeadersContainer.style.paddingLeft = '1rem';
+
+  for (let c = 1; c <= currentRack.cols; c++) {
+    const header = document.createElement('div');
+
+    header.className = 'h-8 flex items-end justify-center font-bold text-gray-500 rounded-md transition-colors duration-200';
+    header.textContent = c;
+    if (selectedSlotId && selectedSlotId.split('-')[1] == c) header.classList.add('header-highlight');
+    colHeadersContainer.appendChild(header);
+  }
+
+  layoutContainer.appendChild(colHeadersContainer);
+
+  const rowHeadersContainer = document.createElement('div');
+
+  rowHeadersContainer.className = 'grid sticky left-0 pi-surface z-10';
+  rowHeadersContainer.style.gridTemplateRows = `repeat(${currentRack.rows}, 9rem)`;
+  rowHeadersContainer.style.gap = '1rem';
+  rowHeadersContainer.style.paddingTop = '1rem';
+
+  for (let r = 1; r <= currentRack.rows; r++) {
+    const rowChar = String.fromCharCode(64 + r);
+    const header = document.createElement('div');
+
+    header.className = 'w-12 flex items-center justify-center font-bold text-gray-500 rounded-md transition-colors duration-200';
+    header.textContent = rowChar;
+    if (selectedSlotId && selectedSlotId.split('-')[0] === rowChar) header.classList.add('header-highlight');
+    rowHeadersContainer.appendChild(header);
+  }
+
+  layoutContainer.appendChild(rowHeadersContainer);
+
+  const rackContainer = document.createElement('div');
+
+  rackContainer.id = 'mesh-rack';
+  rackContainer.className = 'grid gap-4 bg-gray-200 p-4 rounded-xl shadow-inner';
+  rackContainer.style.gridTemplateColumns = `repeat(${currentRack.cols}, 9rem)`;
+  rackContainer.style.gridTemplateRows = `repeat(${currentRack.rows}, 9rem)`;
+
+  for (let r = 1; r <= currentRack.rows; r++) {
+    const rowChar = String.fromCharCode(64 + r);
+
+    for (let c = 1; c <= currentRack.cols; c++) {
+      const slotId = `${rowChar}-${c}`;
+      const part = currentRack.slots[slotId];
+      const slot = document.createElement('div');
+
+      slot.id = `slot-${slotId}`;
+      slot.dataset.slotId = slotId;
+      slot.className = 'rack-slot aspect-square bg-gray-300/50 rounded-lg flex flex-col justify-between p-2 cursor-pointer transition-all duration-300 hover:bg-gray-300';
+      let content = `<div class="text-sm font-bold text-gray-500">${slotId}</div>`;
+
+      if (part) {
+        content += `
+          <div class="text-center overflow-hidden min-w-0">
+            <div class="w-full h-4 rounded-full mb-2" style="background-color: ${part.color ? '#' + part.color : 'var(--mui-palette-divider)'};"></div>
+            <p class="font-bold text-gray-800 text-sm truncate">${s(part.partName)}</p>
+            <p class="text-xs text-gray-500 truncate">${s(part.partModelNumber, '')}</p>
+          </div>
+          <div class="text-right text-lg font-bold">${part.quantity}</div>`;
+      } else if (isMoveMode) {
+        slot.classList.add('move-mode-empty');
+      }
+
+      slot.innerHTML = content;
+      rackContainer.appendChild(slot);
+    }
+  }
+
+  layoutContainer.appendChild(rackContainer);
+  rackDisplayArea.appendChild(layoutContainer);
+
+  if (selectedSlotId) {
+    document.getElementById(`slot-${selectedSlotId}`)?.classList.add('selected-slot');
+  }
+
+  if (isMoveMode && moveOriginSlotId) {
+    document.getElementById(`slot-${moveOriginSlotId}`)?.classList.add('move-mode-origin');
+  }
+}
+
+// 詳細パネルを描画する関数 (Details panel)
+/**
+ * 詳細パネルに部品情報・操作ボタンを描画する。
+ * @param {Array}   racks         - 全ラック配列。
+ * @param {string}  currentRackId - 現在のラックID。
+ * @param {string}  slotId        - 詳細表示する棚ID。
+ * @returns {void}
+ */
+export function renderDetails(racks, currentRackId, slotId) {
+  const detailsPanel = document.getElementById('details-panel');
+
+  if (!detailsPanel) return;
+  const currentRack = racks.find(r => r.id === currentRackId);
+  let content = '';
+
+  if (!currentRack) {
+  detailsPanel.innerHTML = '<div class="text-center text-gray-500 py-10"><ion-icon name="grid-outline" class="text-5xl mx-auto"></ion-icon><p class="mt-2">ラックを選択してください</p></div>';
+    
+return;
+  }
+
+  const part = slotId ? currentRack.slots[slotId] : null;
+
+  if (part) {
+    content = `
+      <div class="fade-in">
+        <div class="flex items-center mb-4"><div class="w-4 h-4 rounded-full mr-3" style="background-color: ${part.color ? '#' + part.color : 'var(--mui-palette-divider)'};"></div><h3 class="text-xl font-bold">${s(part.partName)}</h3></div>
+        <div class="space-y-2 text-sm">
+          <p><strong class="w-24 inline-block text-gray-500">部品型番:</strong> ${s(part.partModelNumber, 'N/A')}</p>
+          <p><strong class="w-24 inline-block text-gray-500">現在庫数:</strong> <span class="text-2xl font-bold">${part.quantity}</span></p>
+          <p><strong class="w-24 inline-block text-gray-500">保管場所:</strong> <span class="text-lg font-bold">${currentRack.name} / ${slotId}</span></p>
+        </div>
+        <div class="mt-6 border-t pt-4 space-y-2">
+          <button data-action="use" data-slot-id="${slotId}" class="w-full bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700">部品を使用</button>
+          <button data-action="move" data-slot-id="${slotId}" class="w-full bg-gray-200 text-gray-800 px-4 py-2 rounded-md hover:bg-gray-300">箱を移動</button>
+          <div class="grid grid-cols-2 gap-2">
+            <button data-action="edit" data-slot-id="${slotId}" class="w-full bg-gray-200 text-gray-800 px-4 py-2 rounded-md hover:bg-gray-300 flex items-center justify-center"><ion-icon name="pencil-outline" class="mr-2"></ion-icon>編集</button>
+            <button data-action="delete" data-slot-id="${slotId}" class="w-full bg-red-100 text-red-700 px-4 py-2 rounded-md hover:bg-red-200 flex items-center justify-center"><ion-icon name="trash-bin-outline" class="mr-2"></ion-icon>削除</button>
+          </div>
+          <hr class="my-2"/>
+          <button data-action="show-shelf-qr" data-slot-id="${slotId}" class="w-full bg-gray-200 text-gray-800 px-4 py-2 rounded-md hover:bg-gray-300 flex items-center justify-center"><ion-icon name="grid-outline" class="mr-2"></ion-icon>棚QRコードを生成</button>
+        </div>
+      </div>`;
+  } else if (slotId) {
+    content = `
+      <div class="fade-in text-center py-6">
+        <p class="text-lg font-bold mb-2">場所: ${currentRack.name} / ${slotId}</p>
+        <ion-icon name="archive-outline" class="text-5xl text-gray-400 mx-auto"></ion-icon>
+        <p class="mt-2 text-gray-500">この場所は空です</p>
+        <div class="mt-6 space-y-2">
+          <button data-action="store" data-slot-id="${slotId}" class="w-full bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700">新しい箱を格納</button>
+          <button data-action="show-shelf-qr" data-slot-id="${slotId}" class="w-full bg-gray-200 text-gray-800 px-4 py-2 rounded-md hover:bg-gray-300 flex items-center justify-center"><ion-icon name="grid-outline" class="mr-2"></ion-icon>棚QRコードを生成</button>
+        </div>
+      </div>`;
+  } else {
+    content = `
+      <div class="text-center text-gray-500 py-10">
+        <ion-icon name="grid-outline" class="text-5xl mx-auto"></ion-icon>
+        <p class="mt-2">ラックの場所を選択して詳細を表示</p>
+      </div>`;
+  }
+
+  detailsPanel.innerHTML = content;
+}
diff --git a/javascript-version/src/app/(dashboard)/parts-inventory/lib/utils.js b/javascript-version/src/app/(dashboard)/parts-inventory/lib/utils.js
new file mode 100644
index 000000000..7ed02e2a4
--- /dev/null
+++ b/javascript-version/src/app/(dashboard)/parts-inventory/lib/utils.js
@@ -0,0 +1,103 @@
+/*
+======== ファイル概要 ========
+レガシー部品在庫アプリで再利用する文字列整形やID変換、ローカルストレージ補助関数を集約。
+描画やモーダルモジュールからの共通利用を想定している。
+*/
+
+// 部品在庫レガシーアプリ向けユーティリティ群 (Utility helpers for Parts Inventory legacy app)
+
+// 表示用のサニタイズ処理 (Sanitize for display)
+/**
+ * nullや文字列 "null" を空文字に揃えつつ、表示用の文字列に変換する。
+ * @param {any}    v               - 表示したい値。
+ * @param {string} [fallback='']   - 無効値の場合に返すフォールバック文字列。
+ * @returns {string}               - 表示用に整形された文字列。
+ */
+export function s(v, fallback = '') {
+  if (v === null || v === undefined) return fallback;
+  if (v === 'null' || v === 'undefined') return fallback;
+  
+return String(v);
+}
+
+// rack-1 のようなIDから数値のラックIDを取り出す (Extract numeric rack id from element/id like "rack-1")
+/**
+ * ラック要素やID文字列から数値部分のみを安全に抽出する。
+ * @param {string|object} rackLike   - idプロパティを持つオブジェクトまたは文字列ID。
+ * @returns {number|null}            - 数値ID。抽出できなければ null。
+ */
+export function getRackNumericId(rackLike) {
+  if (!rackLike) return null;
+  const id = parseInt(String(rackLike.id ?? rackLike).replace(/[^0-9]/g, ''), 10);
+
+  
+return Number.isFinite(id) ? id : null;
+}
+
+// 最後に開いたラックを記憶するストレージヘルパー (Last rack selection storage helpers, keyed by apiBase)
+/**
+ * APIベースURLごとに最後に閲覧したラックIDを保存・取得する関数を返す。
+ * @param {string} apiBase   - APIベースURL。ローカルストレージのキーに含めて環境差異を避ける。
+ * @returns {object}         - setLastRackId / getLastRackId を含む操作オブジェクト。
+ */
+export function createLastRackStorage(apiBase) {
+  const key = `pi:lastRackId:${apiBase || 'same-origin'}`;
+
+  const setLastRackId = id => {
+    try {
+      if (id) localStorage.setItem(key, id);
+      else localStorage.removeItem(key);
+    } catch {}
+  };
+
+  const getLastRackId = () => {
+    try { return localStorage.getItem(key); } catch { return null; }
+  };
+
+  
+return { setLastRackId, getLastRackId };
+}
+
+// APIレスポンスをアプリ内部のデータ構造へ変換する (Transform backend API data shape to internal app data shape)
+/**
+ * ラック配列のレスポンスをアプリで扱うプロパティ名へ変換する。
+ * @param {Array} apiData   - APIから返却されたラックデータ配列。
+ * @returns {Array}         - アプリ内部で利用するラックオブジェクト配列。
+ */
+export function transformApiDataToAppData(apiData) {
+  return apiData.map(rack => {
+    const slotsObject = {};
+    let maxRow = rack.rows || 0;
+    let maxCol = rack.cols || 0;
+
+    if (rack.slots) {
+      rack.slots.forEach(slot => {
+        if (slot.part) {
+          slotsObject[slot.slot_id] = {
+            partName: slot.part.part_name,
+            partModelNumber: slot.part.part_model_number,
+            quantity: slot.part.quantity,
+            color: slot.part.color_code
+          };
+        }
+
+        if (!rack.rows || !rack.cols) {
+          const [rowChar, colNumStr] = slot.slot_id.split('-');
+          const rowNum = rowChar.charCodeAt(0) - 64;
+          const colNum = parseInt(colNumStr);
+
+          if (rowNum > maxRow) maxRow = rowNum;
+          if (colNum > maxCol) maxCol = colNum;
+        }
+      });
+    }
+
+    return {
+      id: `rack-${rack.rack_id}`,
+      name: rack.rack_name,
+      rows: maxRow,
+      cols: maxCol,
+      slots: slotsObject
+    };
+  });
+}
diff --git a/javascript-version/src/app/(dashboard)/parts-inventory/page.jsx b/javascript-version/src/app/(dashboard)/parts-inventory/page.jsx
new file mode 100644
index 000000000..e529cbd92
--- /dev/null
+++ b/javascript-version/src/app/(dashboard)/parts-inventory/page.jsx
@@ -0,0 +1,189 @@
+"use client";
+
+import { useEffect } from 'react';
+
+import Script from 'next/script';
+
+import { initPartsInventoryApp } from './partsInventoryApp';
+import ModalBridge from './ModalBridge';
+
+/*
+======== ファイル概要 ========
+部品在庫レガシーアプリをNext.jsページ内にブートストラップするエントリーポイント。
+Google Fontsの読み込み制御や、モーダルブリッジの準備完了イベントを待って初期化を行う。
+*/
+
+/**
+ * 部品在庫ページのトップレベルコンポーネント。
+ * @returns {JSX.Element}   レガシーアプリのDOMを含むダッシュボードページ。
+ */
+const Page = () => {
+    const apiBase = process.env.NEXT_PUBLIC_API_BASE || '';
+    const enableGoogleFonts = process.env.NEXT_PUBLIC_ENABLE_GOOGLE_FONTS === 'true';
+
+    useEffect(() => {
+        // ======== 処理ステップ: window準備 → ブリッジ待機 → 後片付け ========
+        // 1. windowへAPIベースURLを渡してからレガシーアプリの初期化を呼び出す。
+        // 2. モーダルブリッジの準備イベントが未発火の場合はイベントリスナで待機し、準備完了後に初期化する。
+        // 3. ページアンマウント時はレガシー側のteardown関数が存在すれば確実に呼び出し、リスナも解除する。
+        const start = () => {
+            window.API_BASE = apiBase;
+            initPartsInventoryApp();
+        };
+
+        if (typeof window !== 'undefined' && window.__pi_modal_ready) {
+            start();
+        } else {
+            const onReady = () => {
+                window.removeEventListener('pi:modal-ready', onReady);
+                start();
+            };
+
+            window.addEventListener('pi:modal-ready', onReady);
+
+            
+return () => {
+                window.removeEventListener('pi:modal-ready', onReady);
+
+                if (typeof window !== 'undefined' && window.__piAppTeardown) {
+                    try { window.__piAppTeardown(); } catch { }
+                }
+            };
+        }
+
+        
+return () => {
+            if (typeof window !== 'undefined' && window.__piAppTeardown) {
+                try { window.__piAppTeardown(); } catch { }
+            }
+        };
+    }, [apiBase]);
+
+
+    return (
+        <div className="pi-root" style={{ minHeight: '100vh', marginTop: '-24px' }}>
+            {/* Google Fonts (proxy 環境では既定で無効。必要なら NEXT_PUBLIC_ENABLE_GOOGLE_FONTS=true を設定) */}
+            {enableGoogleFonts && (
+                <>
+                    <link rel="preconnect" href="https://fonts.googleapis.com" />
+                    <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
+                    <link
+                        href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;700&display=swap"
+                        rel="stylesheet"
+                    />
+                </>
+            )}
+
+            {/* Ionicons */}
+            <Script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js" />
+            <Script noModule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js" />
+
+            <div className="flex flex-col min-h-screen">
+                <main className="w-full p-4 sm:p-6 lg:p-8">
+                    <div className="flex flex-col gap-6">
+                        {/* タブ形式のラック選択 */}
+                        <div>
+                            <div className="border-b border-gray-200">
+                                <nav id="rack-tabs" className="-mb-px flex space-x-6 overflow-x-auto" aria-label="Tabs">
+                                    {/* JSで動的生成 */}
+                                </nav>
+                            </div>
+                        </div>
+
+                        {/* ラック表示と詳細 */}
+                        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+                            {/* メッシュラック */}
+                            <div className="lg:col-span-2">
+                                <div className="flex items-center justify-between mb-4">
+                                    <h2 id="rack-name" className="text-2xl font-bold"></h2>
+                                    <button
+                                        id="bulk-qr-btn"
+                                        className="flex items-center bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-3 rounded-lg text-sm transition-transform transform hover:scale-105"
+                                    >
+                                        <ion-icon name="print-outline" className="mr-2"></ion-icon>
+                                        一括QR生成
+                                    </button>
+                                </div>
+                                <div className="overflow-x-auto pi-surface p-2 pl-0 rounded-xl shadow-md">
+                                    <div id="rack-display-area" className="min-w-max">{/* JS will build the labeled grid here */}</div>
+                                </div>
+                            </div>
+
+                            {/* 詳細と操作 */}
+                            <div className="lg:col-span-1">
+                                <div className="pi-surface rounded-xl shadow-md p-6 sticky top-24">
+                                    <h2 className="text-2xl font-bold mb-4">情報・操作</h2>
+                                    {/* 検索 */}
+                                    <div className="mb-6">
+                                        <label htmlFor="search-parts" className="block text-sm font-medium text-gray-700 mb-2">
+                                            部品を検索
+                                        </label>
+                                        <div className="relative">
+                                            <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                                                <ion-icon name="search-outline" className="text-gray-400"></ion-icon>
+                                            </div>
+                                            <input
+                                                type="text"
+                                                id="search-parts"
+                                                className="bg-gray-100 focus:bg-white focus:ring-indigo-500 focus:border-indigo-500 block w-full pl-10 p-3 text-base border-gray-300 rounded-lg"
+                                                placeholder="部品名 or 型番"
+                                            />
+                                        </div>
+                                    </div>
+                                    {/* 詳細表示 */}
+                                    <div id="details-panel">
+                                        <div className="text-center text-gray-500 py-10">
+                                            <ion-icon name="grid-outline" className="text-5xl mx-auto"></ion-icon>
+                                            <p className="mt-2">ラックの場所を選択して詳細を表示</p>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </main>
+            </div>
+
+
+            <div className="fixed right-8 z-20" id="fab-container" style={{ bottom: 'calc(env(safe-area-inset-bottom, 0px) + 1.75rem)' }}>
+                <div id="fab-menu" className="flex flex-col items-end space-y-3 mb-3">
+                    <button
+                        id="add-rack-btn"
+                        data-tooltip="新しいラックを作成"
+                        className="fab-item flex items-center bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-3 rounded-full shadow-lg"
+                    >
+                        <ion-icon name="add-circle-outline" className="text-xl font-bold"></ion-icon>
+                        <span className="ml-2 text-sm">ラック作成</span>
+                    </button>
+                    <button
+                        id="qr-stock-in-btn"
+                        data-tooltip="QR入庫"
+                        className="fab-item flex items-center bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-3 rounded-full shadow-lg"
+                    >
+                        <ion-icon name="qr-code-outline" className="text-xl font-bold"></ion-icon>
+                        <span className="ml-2 text-sm">QR入庫</span>
+                    </button>
+                    <button
+                        id="qr-stock-out-btn"
+                        data-tooltip="QR出庫"
+                        className="fab-item flex items-center bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-3 rounded-full shadow-lg"
+                    >
+                        <ion-icon name="qr-code-outline" className="text-xl font-bold"></ion-icon>
+                        <span className="ml-2 text-sm">QR出庫</span>
+                    </button>
+                </div>
+                <button
+                    id="fab-main"
+                    className="w-16 h-16 flex items-center justify-center bg-indigo-600 hover:bg-indigo-700 text-white font-bold rounded-full shadow-lg transition-transform transform hover:scale-110"
+                >
+                    <ion-icon id="fab-icon" name="add-outline" className="transition-transform duration-300 font-bold" style={{ fontSize: '40px' }}></ion-icon>
+                </button>
+            </div>
+
+            {/* Materio/MUI Dialog bridge for legacy modals */}
+            <ModalBridge />
+        </div>
+    );
+};
+
+export default Page;
diff --git a/javascript-version/src/app/(dashboard)/parts-inventory/parts-inventory.css b/javascript-version/src/app/(dashboard)/parts-inventory/parts-inventory.css
new file mode 100644
index 000000000..a8dcd0fd0
--- /dev/null
+++ b/javascript-version/src/app/(dashboard)/parts-inventory/parts-inventory.css
@@ -0,0 +1,81 @@
+/* フォント設定 */
+body, .pi-root {
+  font-family: 'Inter', 'Noto Sans JP', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* テーマブリッジ: MUI CssVars の値を参照してレガシーUIを配色 */
+.pi-root {
+  background-color: var(--mui-palette-background-default);
+  color: var(--mui-palette-text-primary);
+}
+
+.pi-root .pi-surface {
+  background-color: var(--mui-palette-background-paper);
+  color: var(--mui-palette-text-primary);
+}
+
+/* Tailwind の bg-white をダーク対応の paper に寄せる（Tailwindは #__next でスコープされるため同等以上の特異性で上書き） */
+#__next .pi-root .bg-white { background-color: var(--mui-palette-background-paper); }
+/* ライト系グレー背景の近似（アクションホバー相当） */
+#__next .pi-root .bg-gray-200 { background-color: rgb(var(--mui-mainColorChannels-light) / 0.06); }
+#__next .pi-root .hover\:bg-gray-300:hover { background-color: rgb(var(--mui-mainColorChannels-light) / 0.08); }
+/* 半透明グレー（スロット背景の薄色） */
+#__next .pi-root .bg-gray-300\/50 { background-color: rgb(var(--mui-mainColorChannels-light) / 0.08); }
+
+/* 主要ボタンの色を MUI の primary に寄せる */
+.pi-root .bg-indigo-600 { background-color: var(--mui-palette-primary-main); }
+.pi-root .hover\:bg-indigo-700:hover { background-color: var(--mui-palette-primary-dark); }
+/* テキスト/ボーダーの indigo も primary に寄せる */
+.pi-root .text-indigo-600 { color: var(--mui-palette-primary-main); }
+.pi-root .border-indigo-500 { border-color: var(--mui-palette-primary-main); }
+.pi-root .hover\:border-gray-300:hover { border-color: var(--mui-palette-divider); }
+
+/* テキストのグレー系をテーマのテキスト色へ */
+.pi-root .text-gray-400 { color: var(--mui-palette-text-disabled); }
+.pi-root .text-gray-500 { color: var(--mui-palette-text-secondary); }
+.pi-root .text-gray-700, .pi-root .text-gray-800 { color: var(--mui-palette-text-primary); }
+
+/* エラー系の色をテーマへ */
+.pi-root .hover\:bg-red-100:hover, .pi-root .bg-red-100 { background-color: var(--mui-palette-error-lighterOpacity); }
+.pi-root .hover\:bg-red-200:hover { background-color: rgba(var(--mui-palette-error-mainChannel) / 0.18); }
+.pi-root .hover\:text-red-600:hover, .pi-root .text-red-700 { color: var(--mui-palette-error-main); }
+
+/* 明度の高い薄い面色が欲しい場合（必要に応じて使用） */
+.pi-root .pi-surface-soft { background-color: var(--mui-palette-primary-lightOpacity); }
+
+/* スクロールバー（テーマ追従） */
+::-webkit-scrollbar { width: 8px; height: 8px; }
+::-webkit-scrollbar-track { background: var(--mui-palette-background-default); }
+::-webkit-scrollbar-thumb { background: var(--mui-palette-divider); border-radius: 4px; }
+::-webkit-scrollbar-thumb:hover { background: rgba(var(--mui-mainColorChannels-light) / 0.4); }
+
+/* アニメーション */
+.fade-in { animation: fadeIn 0.5s ease-in-out forwards; }
+@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
+.modal-enter { animation: modal-enter-animation 0.3s ease-out forwards; }
+@keyframes modal-enter-animation { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
+
+/* スロット選択等（テーマ追従） */
+.selected-slot { outline: 4px solid var(--mui-palette-primary-main); transform: scale(1.02); }
+.highlight-slot { animation: pulse 1.5s infinite; }
+@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(var(--mui-palette-primary-mainChannel) / 0.7); } 50% { box-shadow: 0 0 0 10px rgba(var(--mui-palette-primary-mainChannel) / 0); } }
+.move-mode-empty { background-color: var(--mui-palette-success-lightOpacity) !important; outline: 2px dashed var(--mui-palette-success-main); }
+.move-mode-origin { animation: pulse-red 1.5s infinite; }
+@keyframes pulse-red { 0%,100% { box-shadow: 0 0 0 0 rgba(var(--mui-palette-error-mainChannel) / 0.7); } 50% { box-shadow: 0 0 0 10px rgba(var(--mui-palette-error-mainChannel) / 0); } }
+
+/* QRスキャナー */
+.scanner-line { animation: scan 2s linear infinite; }
+@keyframes scan { 0%,100% { top: 0; } 50% { top: 100%; } }
+
+/* FAB */
+.fab-item { transform: scale(0); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
+
+/* 見出しハイライト（テーマ追従） */
+.header-highlight { background-color: var(--mui-palette-primary-lighterOpacity); color: var(--mui-palette-primary-dark); }
+
+/* ラックタブ（テーマ追従） */
+.pi-root .rack-tab-item { color: var(--mui-palette-text-secondary); border-bottom-color: transparent; }
+.pi-root .rack-tab-item:hover { color: var(--mui-palette-text-primary); border-bottom-color: rgb(var(--mui-mainColorChannels-light) / 0.2); }
+.pi-root .rack-tab-item.active { color: var(--mui-palette-primary-main); border-bottom-color: var(--mui-palette-primary-main); }
diff --git a/javascript-version/src/app/(dashboard)/parts-inventory/partsInventoryApp.js b/javascript-version/src/app/(dashboard)/parts-inventory/partsInventoryApp.js
new file mode 100644
index 000000000..f5cf59bf8
--- /dev/null
+++ b/javascript-version/src/app/(dashboard)/parts-inventory/partsInventoryApp.js
@@ -0,0 +1,781 @@
+/*
+======== ファイル概要 ========
+レガシー部品在庫アプリのドキュメント内スクリプトをモジュール化し、Next.js動作に合わせて初期化・イベント制御を担当する。
+API取得・状態管理・DOM描画・モーダル操作を分離したサブモジュールを束ねている。
+*/
+
+// 既存の HTML 内 <script> のロジックを分割し、初期化関数をエクスポート
+import { s, getRackNumericId, createLastRackStorage, transformApiDataToAppData } from './lib/utils';
+import { createApi, mapApiSlotToAppPart } from './lib/api';
+import {
+    closeModal,
+    showQrScannerModal,
+    showAddRackModal,
+    showDeleteRackModal,
+    showUsePartModal,
+    showDeletePartModal,
+    showEditPartModal,
+    showStorePartModal,
+    showShelfQrModal,
+    showBulkShelfQrModal
+} from './lib/modals';
+import { renderRackTabs, renderCurrentRack, renderDetails } from './lib/render';
+
+/**
+ * レガシー部品在庫アプリ全体を初期化し、必要なイベントや状態を組み立てる。
+ * @returns {void}   戻り値なし。初期化完了後はDOMイベントへのバインドで継続的に動作する。
+ */
+export function initPartsInventoryApp() {
+    // 既存インスタンスがあればクリーンアップしてから再初期化（戻ってきた時の再描画用）
+    if (typeof window !== 'undefined' && window.__piAppTeardown) {
+        try { window.__piAppTeardown(); } catch (e) { console.debug('previous teardown failed', e); }
+        window.__piAppTeardown = undefined;
+    }
+
+    // =============================
+    // 画面ロジック概要
+    // - レイアウトをサイドバーからタブ形式に変更
+    // - ダミーAPIデータをアプリ内部形式へ変換
+    // - 上部: ラック選択タブ / 下部: ラックメッシュ + 詳細パネル
+    // - 操作: 部品使用・格納・移動、棚QR表示、棚QR一括生成
+    // - モーダルは openModal/closeModal で共通管理
+    // =============================
+
+    // APIから返ってくるであろうサンプルデータ (フェールバック用)
+    const mockApiData = [
+        {
+            rack_id: 1,
+            rack_name: 'スプリング・小物資材ラック',
+            slots: [
+                { slot_id: 'A-1', part: { part_name: 'ポケットコイル (シングル)', part_model_number: 'PC-S-H20', quantity: 25, color_code: '4A90E2' } },
+                { slot_id: 'A-2', part: { part_name: 'ポケットコイル (シングル)', part_model_number: 'PC-S-H20', quantity: 25, color_code: '4A90E2' } },
+                { slot_id: 'A-3', part: null },
+                { slot_id: 'A-4', part: { part_name: 'ボンネルコイル (セミダブル)', part_model_number: 'BC-SD-H18', quantity: 20, color_code: '50E3C2' } },
+                { slot_id: 'B-1', part: { part_name: 'コーナーガード', part_model_number: 'CG-STD', quantity: 500, color_code: '9B9B9B' } },
+                { slot_id: 'B-2', part: { part_name: '製品ラベルセット', part_model_number: 'LBL-PREMIUM', quantity: 1000, color_code: 'F5A623' } },
+                { slot_id: 'B-3', part: null },
+                { slot_id: 'B-4', part: { part_name: '強化縫製糸 (白)', part_model_number: 'THD-W-HV', quantity: 50, color_code: 'E9E9E9' } },
+                { slot_id: 'C-1', part: null },
+                { slot_id: 'C-2', part: { part_name: 'ボンネルコイル (セミダブル)', part_model_number: 'BC-SD-H18', quantity: 20, color_code: '50E3C2' } },
+                { slot_id: 'C-3', part: null },
+                { slot_id: 'C-4', part: { part_name: 'ジッパー (200cm)', part_model_number: 'ZIP-200', quantity: 150, color_code: 'D0021B' } }
+            ]
+        },
+        {
+            rack_id: 2,
+            rack_name: 'ウレタンフォーム保管棚',
+            slots: [
+                { slot_id: 'A-1', part: { part_name: '低反発ウレタン 20mm (S)', part_model_number: 'MF-T20-S', quantity: 40, color_code: '4A90E2' } },
+                { slot_id: 'A-2', part: { part_name: '低反発ウレタン 20mm (S)', part_model_number: 'MF-T20-S', quantity: 40, color_code: '4A90E2' } },
+                { slot_id: 'A-3', part: { part_name: '高反発ウレタン 30mm (S)', part_model_number: 'HR-T30-S', quantity: 40, color_code: '7ED321' } },
+                { slot_id: 'A-4', part: { part_name: '高反発ウレタン 30mm (S)', part_model_number: 'HR-T30-S', quantity: 40, color_code: '7ED321' } },
+                { slot_id: 'A-5', part: null },
+                { slot_id: 'A-6', part: null },
+                { slot_id: 'B-1', part: { part_name: '低反発ウレタン 20mm (SD)', part_model_number: 'MF-T20-SD', quantity: 30, color_code: '4A90E2' } },
+                { slot_id: 'B-2', part: { part_name: '低反発ウレタン 20mm (SD)', part_model_number: 'MF-T20-SD', quantity: 30, color_code: '4A90E2' } },
+                { slot_id: 'B-3', part: { part_name: '高反発ウレタン 30mm (SD)', part_model_number: 'HR-T30-SD', quantity: 30, color_code: '7ED321' } },
+                { slot_id: 'B-4', part: { part_name: '高反発ウレタン 30mm (SD)', part_model_number: 'HR-T30-SD', quantity: 30, color_code: '7ED321' } },
+                { slot_id: 'B-5', part: null },
+                { slot_id: 'B-6', part: null },
+                { slot_id: 'C-1', part: { part_name: 'ラテックスフォーム 40mm (D)', part_model_number: 'LTX-T40-D', quantity: 20, color_code: 'F8E71C' } },
+                { slot_id: 'C-2', part: null },
+                { slot_id: 'C-3', part: null },
+                { slot_id: 'C-4', part: null },
+                { slot_id: 'C-5', part: null },
+                { slot_id: 'C-6', part: null }
+            ]
+        },
+        {
+            rack_id: 3,
+            rack_name: '生地・充填材ラック',
+            slots: [
+                { slot_id: 'A-1', part: { part_name: 'ニット生地 (クール)', part_model_number: 'FAB-KN-COOL', quantity: 15, color_code: 'BD10E0' } },
+                { slot_id: 'A-2', part: { part_name: 'ニット生地 (オーガニック)', part_model_number: 'FAB-KN-OGN', quantity: 15, color_code: 'BD10E0' } },
+                { slot_id: 'A-3', part: null },
+                { slot_id: 'B-1', part: { part_name: 'フェルトパッド (ハード)', part_model_number: 'FLT-HD-S', quantity: 200, color_code: '9B9B9B' } },
+                { slot_id: 'B-2', part: { part_name: 'フェルトパッド (ハード)', part_model_number: 'FLT-HD-S', quantity: 200, color_code: '9B9B9B' } },
+                { slot_id: 'B-3', part: { part_name: 'フェルトパッド (ソフト)', part_model_number: 'FLT-SF-S', quantity: 200, color_code: '4A4A4A' } }
+            ]
+        }
+    ];
+
+    // APIエンドポイントのベースURL
+    // 優先度: URLクエリ ?apiBase= → window.API_BASE → 同一オリジン(空文字)
+    const apiBase = new URLSearchParams(location.search).get('apiBase') || window.API_BASE || '';
+    const api = createApi(apiBase);
+
+    // 最後に表示していたラックIDを保存/復元
+    const { setLastRackId, getLastRackId } = createLastRackStorage(apiBase);
+
+    /**
+     * ラック一覧と各ラックの詳細情報を取得し、UI描画しやすい形へまとめる。
+     * @returns {Promise<Array>}   ラックごとの詳細データ（行列・スロット情報を含む）配列。
+     */
+    async function loadRacksFromApi() {
+        const list = await api.listRacks();
+
+        const racksWithDetails = await Promise.all(
+            list.map(async rack => {
+                try {
+                    const detail = await api.getRack(rack.rack_id);
+                    const slotsObj = detail.slots || {};
+
+                    const slotsArr = Object.entries(slotsObj).map(([slotId, part]) => ({
+                        slot_id: slotId,
+                        part: part
+                            ? {
+                                part_name: part.part_name,
+                                part_model_number: part.part_model_number,
+                                quantity: part.quantity,
+                                color_code: part.color_code
+                            }
+                            : null
+                    }));
+
+                    
+return {
+                        rack_id: detail.rack_id,
+                        rack_name: detail.rack_name,
+                        rows: detail.rows,
+                        cols: detail.cols,
+                        slots: slotsArr
+                    };
+                } catch (e) {
+                    console.error('ラック詳細取得に失敗:', rack.rack_id, e);
+                    
+return {
+                        rack_id: rack.rack_id,
+                        rack_name: rack.rack_name,
+                        rows: rack.rows,
+                        cols: rack.cols,
+                        slots: []
+                    };
+                }
+            })
+        );
+
+        
+return racksWithDetails;
+    }
+
+    /**
+     * 現在選択中のラックをサーバーから再取得し、ローカル状態と描画を最新化する。
+     * @returns {Promise<object|null>}   同期後のラックオブジェクト。取得できなければ null。
+     */
+    async function refreshCurrentRackFromApi() {
+        const currentRack = racks.find(r => r.id === currentRackId);
+
+        if (!currentRack) return null;
+        const rackNumericId = getRackNumericId(currentRack);
+
+        if (!Number.isFinite(rackNumericId)) return null;
+
+        try {
+            const detail = await api.getRack(rackNumericId);
+            const slotsObj = detail?.slots || {};
+            const newSlots = {};
+
+            Object.entries(slotsObj).forEach(([slotId, part]) => {
+                newSlots[slotId] = part
+                    ? {
+                        partName: part.part_name,
+                        partModelNumber: part.part_model_number,
+                        quantity: part.quantity,
+                        color: part.color_code
+                    }
+                    : null;
+            });
+            currentRack.rows = detail.rows || currentRack.rows;
+            currentRack.cols = detail.cols || currentRack.cols;
+            currentRack.slots = newSlots; // 置き換えで同期
+            // メッシュも即時更新（詳細は呼び出し元でupdateDetailsを使う）
+            renderCurrentRack(racks, currentRackId, selectedSlotId, isMoveMode, moveOriginSlotId);
+            
+return currentRack;
+        } catch (e) {
+            console.warn('ラック再取得に失敗しました', e);
+            
+return null;
+        }
+    }
+
+    /**
+     * 指定スロットの部品が最新状態で存在するか検証し、必要に応じて再同期を行う。
+     * @param {string} slotId           - チェック対象の棚ID (例: A-1)。
+     * @returns {Promise<object>}       - { currentRack, part } を返却。部品が無い場合 part は null。
+     */
+    async function ensurePartInSlot(slotId) {
+        let currentRack = racks.find(r => r.id === currentRackId);
+        let part = currentRack && currentRack.slots ? currentRack.slots[slotId] : null;
+
+        if (part) return { currentRack, part };
+        await refreshCurrentRackFromApi();
+        currentRack = racks.find(r => r.id === currentRackId);
+        part = currentRack && currentRack.slots ? currentRack.slots[slotId] : null;
+        
+return { currentRack, part };
+    }
+
+    // ===== アプリ全体の状態 =====
+    let racks = [];
+    let currentRackId = null;
+    let selectedSlotId = null;
+    let isMoveMode = false;
+    let moveOriginSlotId = null;
+
+    // 移動 API の二重送信防止フラグ
+    let isPostingMove = false;
+
+    // モーダルを閉じた直後のゴーストクリック抑制用タイムスタンプ
+    let clickGuardUntil = 0;
+
+    /**
+     * モーダルモジュールに渡す現在のアプリ状態と操作群をまとめたコンテキストを生成する。
+     * @returns {object}   モーダル表示で必要となるAPIや状態操作関数の束。
+     */
+    const getCtx = () => ({
+        api,
+        racks,
+        currentRackId,
+        setRacks: next => { racks = next; },
+        setCurrentRackId: id => { currentRackId = id; },
+        setLastRackId,
+        renderApp,
+        updateDetails,
+        refreshCurrentRackFromApi,
+        mapApiSlotToAppPart
+    });
+
+    /**
+     * 移動モードのフラグと選択状態をリセットし、グリッドへ即時反映する。
+     * @returns {void}   描画のみ更新するため戻り値なし。
+     */
+    function exitMoveMode() {
+        if (isMoveMode || moveOriginSlotId) {
+            isMoveMode = false;
+            moveOriginSlotId = null;
+
+            // ハイライトなどを即時反映
+            renderCurrentRack(racks, currentRackId, selectedSlotId, isMoveMode, moveOriginSlotId);
+        }
+    }
+
+    // ===== DOM参照の取得 =====
+    const rackNameEl = document.getElementById('rack-name');
+    const rackTabsEl = document.getElementById('rack-tabs');
+    const detailsPanel = document.getElementById('details-panel');
+    const searchInput = document.getElementById('search-parts');
+
+    // MUIダイアログブリッジはReactコンポーネントModalBridgeが提供する (MUI Dialog bridge is provided by React component ModalBridge)
+    const bulkQrBtn = document.getElementById('bulk-qr-btn');
+    const fabMain = document.getElementById('fab-main');
+    const fabIcon = document.getElementById('fab-icon');
+    const fabMenuItems = document.querySelectorAll('.fab-item');
+
+    /**
+     * ラックタブ・グリッド・詳細パネルを一括で再描画する初期化兼リフレッシュ関数。
+     * @returns {void}
+     */
+    function renderApp() {
+    renderRackTabs(racks, currentRackId);
+        renderCurrentRack(racks, currentRackId, selectedSlotId, isMoveMode, moveOriginSlotId);
+        renderDetails(racks, currentRackId, null);
+    }
+
+    /**
+     * 現在選択しているスロット情報を更新し、詳細パネルとメッシュの強調表示を同期する。
+     * @param {string|null} slotId   - 選択した棚ID。未選択時は null。
+     * @returns {void}
+     */
+    function updateDetails(slotId) {
+        selectedSlotId = slotId;
+        renderDetails(racks, currentRackId, slotId);
+        renderCurrentRack(racks, currentRackId, selectedSlotId, isMoveMode, moveOriginSlotId);
+    }
+
+        // モーダル群は lib/modals.js に分離
+
+    // showDeleteRackModal: moved to module (以前のインライン実装を切り出し)
+
+    // showUsePartModal: moved to module (以前のインライン実装を切り出し)
+
+    // showDeletePartModal: moved to module (以前のインライン実装を切り出し)
+
+    // showEditPartModal: moved to module (以前のインライン実装を切り出し)
+
+    // showStorePartModal: moved to module (以前のインライン実装を切り出し)
+
+        // showQrScannerModal: moved to module (以前のインライン実装を切り出し)
+
+    // showShelfQrModal: moved to module (以前のインライン実装を切り出し)
+
+    // showBulkShelfQrModal: moved to module (以前のインライン実装を切り出し)
+
+    /**
+     * FABメニューのイベントを設定し、開閉アニメーションを制御する。
+     * @returns {boolean}   バインドに成功した場合は true、必要要素が無い場合は false。
+     */
+    const bindFabHandlers = () => {
+        const btn = document.getElementById('fab-main');
+        const icon = document.getElementById('fab-icon');
+        const items = document.querySelectorAll('.fab-item');
+
+        if (!btn || !icon) return false;
+
+        // 初期状態ではメニュー項目を隠す
+        items.forEach(item => {
+            item.style.transform = 'scale(0)';
+            item.style.transition = 'transform 150ms ease';
+        });
+
+        // 既存ハンドラを解除
+        if (typeof window !== 'undefined' && window.__piOnFabMainClick && window.__piFabMainEl) {
+            try { window.__piFabMainEl.removeEventListener('click', window.__piOnFabMainClick); } catch {}
+        }
+
+        const onClick = () => {
+            const isExpanded = btn.getAttribute('aria-expanded') === 'true';
+
+            btn.setAttribute('aria-expanded', (!isExpanded).toString());
+            icon.classList.toggle('rotate-45');
+
+            if (!isExpanded) {
+                items.forEach((item, index) => {
+                    item.style.transitionDelay = `${index * 40}ms`;
+                    item.style.transform = 'scale(1)';
+                });
+            } else {
+                items.forEach(item => {
+                    item.style.transform = 'scale(0)';
+                });
+            }
+        };
+
+        btn.addEventListener('click', onClick);
+
+        if (typeof window !== 'undefined') {
+            window.__piOnFabMainClick = onClick;
+            window.__piFabMainEl = btn;
+        }
+
+        
+return true;
+    };
+
+    if (!bindFabHandlers()) {
+        // 初期化タイミングのズレに備えて1フレーム後に再試行
+        setTimeout(bindFabHandlers, 0);
+    }
+
+    // FAB: ラック作成
+    document.getElementById('add-rack-btn')?.addEventListener('click', () => showAddRackModal(getCtx()));
+
+    // FAB: QR入庫（スキャンした棚に格納）
+    document.getElementById('qr-stock-in-btn')?.addEventListener('click', () => {
+        showStorePartModal(newPart => {
+            showQrScannerModal('QR入庫', '棚QRコードを読み取ってください', async payload => {
+                try {
+                    const { type, rack_id, slot_identifier } = payload || {};
+                    if (type !== 'rack_slot' || !rack_id || !slot_identifier) {
+                        alert('無効なQRコードです。棚QRコードを読み取ってください。');
+                        return;
+                    }
+
+                    const targetRack = racks.find(r => getRackNumericId(r) === Number(rack_id));
+                    if (!targetRack) { alert('該当のラックが見つかりません。'); return; }
+
+                    if (targetRack.slots[slot_identifier]) {
+                        alert('この棚はすでに使用中です。別の棚を読み取ってください。');
+                        return;
+                    }
+
+                    const rackNumericId = getRackNumericId(targetRack);
+                    if (!Number.isFinite(rackNumericId)) { alert('ラックIDの解決に失敗しました'); return; }
+
+                    const body = {
+                        part_name: newPart.partName,
+                        part_model_number: (newPart.partModelNumber || '').toString().trim() || null,
+                        quantity: newPart.quantity,
+                        color_code: (newPart.color || '').toString().replace(/^#/, '') || null
+                    };
+
+                    const res = await api.createSlot(rackNumericId, slot_identifier, body);
+                    const saved = (res && res.slot) ? res.slot : body;
+
+                    targetRack.slots[slot_identifier] = mapApiSlotToAppPart(saved);
+                    await refreshCurrentRackFromApi();
+
+                    if (currentRackId !== targetRack.id) {
+                        currentRackId = targetRack.id;
+                        setLastRackId(currentRackId);
+                        renderApp();
+                    }
+
+                    setTimeout(() => updateDetails(slot_identifier), 0);
+                } catch (err) {
+                    console.error('部品の格納に失敗', err);
+                    alert('格納に失敗しました。サーバーの状態を確認してください。');
+                }
+            });
+        });
+    });
+
+    // FAB: QR出庫（スキャンした棚から使用）
+    document.getElementById('qr-stock-out-btn')?.addEventListener('click', () => {
+        showQrScannerModal('QR出庫', '出庫する棚QRコードを読み取ってください', async payload => {
+            try {
+                const { type, rack_id, slot_identifier } = payload || {};
+                if (type !== 'rack_slot' || !rack_id || !slot_identifier) {
+                    alert('無効なQRコードです。棚QRコードを読み取ってください。');
+                    return;
+                }
+
+                const targetRack = racks.find(r => getRackNumericId(r) === Number(rack_id));
+                if (!targetRack) { alert('該当のラックが見つかりません。'); return; }
+
+                if (!targetRack.slots[slot_identifier]) {
+                    alert('この棚には出庫できる部品がありません。');
+                    return;
+                }
+
+                if (currentRackId !== targetRack.id) {
+                    currentRackId = targetRack.id;
+                    setLastRackId(currentRackId);
+                    renderApp();
+                }
+
+                updateDetails(slot_identifier);
+
+                (async () => {
+                    await refreshCurrentRackFromApi();
+                    const currentRack = racks.find(r => r.id === currentRackId);
+                    const part = currentRack?.slots?.[slot_identifier];
+                    if (!currentRack || !part) return;
+                    showUsePartModal(getCtx(), slot_identifier, currentRack, part);
+                })();
+            } catch (err) {
+                console.error('QR出庫処理に失敗', err);
+                alert('出庫処理に失敗しました。サーバーの状態を確認してください。');
+            }
+        });
+    });
+
+    // 一括QR生成
+    bulkQrBtn?.addEventListener('click', () => {
+        const currentRack = racks.find(r => r.id === currentRackId);
+
+        if (currentRack) showBulkShelfQrModal(currentRack);
+    });
+
+    // ラックタブのクリック
+    rackTabsEl?.addEventListener('click', e => {
+        e.preventDefault();
+        const tab = e.target.closest('.rack-tab-item');
+        const deleteBtn = e.target.closest('[data-action="delete-rack"]');
+
+        if (deleteBtn) {
+            showDeleteRackModal(getCtx(), deleteBtn.dataset.rackId, deleteBtn.dataset.rackName);
+        } else if (tab) {
+            currentRackId = tab.dataset.rackId;
+            setLastRackId(currentRackId);
+            selectedSlotId = null;
+            isMoveMode = false;
+            renderApp();
+        }
+    });
+
+    // 詳細パネルの操作
+    detailsPanel?.addEventListener('click', e => {
+        if (Date.now() < clickGuardUntil) {
+            e.preventDefault();
+            
+return;
+        }
+
+        const button = e.target.closest('button');
+
+        if (!button) return;
+        const { action, slotId } = button.dataset;
+        const currentRack = racks.find(r => r.id === currentRackId);
+
+        if (!currentRack) return;
+
+        switch (action) {
+            case 'use':
+                exitMoveMode();
+
+                (async () => {
+                    await refreshCurrentRackFromApi();
+                    const { currentRack, part } = await ensurePartInSlot(slotId);
+
+                    if (!currentRack || !part) { alert('対象の箱が見つかりませんでした。画面を最新状態に更新します。'); updateDetails(slotId); 
+
+return; }
+
+                    showUsePartModal(getCtx(), slotId, currentRack, part);
+                })();
+
+                break;
+            case 'store':
+                exitMoveMode();
+                showStorePartModal(async newPart => {
+                    const rackNumericId = getRackNumericId(currentRack);
+
+                    if (!Number.isFinite(rackNumericId)) {
+                        alert('ラックIDの解決に失敗しました');
+                        
+return;
+                    }
+
+                    const body = {
+                        part_name: newPart.partName,
+                        part_model_number: (newPart.partModelNumber || '').toString().trim() || null,
+                        quantity: newPart.quantity,
+                        color_code: (newPart.color || '').toString().replace(/^#/, '') || null
+                    };
+
+                    try {
+                        const res = await api.createSlot(rackNumericId, slotId, body);
+                        const saved = (res && res.slot) ? res.slot : body;
+
+                        currentRack.slots[slotId] = mapApiSlotToAppPart(saved);
+                        await refreshCurrentRackFromApi();
+                        closeModal();
+                        setTimeout(() => updateDetails(slotId), 0);
+                    } catch (err) {
+                        console.error('部品の格納に失敗', err);
+                        alert('格納に失敗しました。スロットが空か、サーバーの状態をご確認ください。');
+                    }
+                }, { confirmLabel: '格納' });
+                break;
+            case 'move':
+                isMoveMode = true;
+                moveOriginSlotId = slotId;
+                detailsPanel.innerHTML = `<div class="fade-in text-center py-10"><ion-icon name="move-outline" class="text-5xl text-indigo-500 mx-auto"></ion-icon><p class="mt-2 font-bold">移動先の空き場所を選択してください</p><p class="text-sm text-gray-500">(移動元: ${slotId})</p><button id="cancel-move-btn" class="mt-4 text-sm text-red-600">移動をキャンセル</button></div>`;
+
+                document.getElementById('cancel-move-btn').onclick = () => {
+                    isMoveMode = false;
+                    moveOriginSlotId = null;
+                    updateDetails(slotId);
+                };
+
+                renderCurrentRack(racks, currentRackId, selectedSlotId, isMoveMode, moveOriginSlotId);
+                break;
+            case 'show-shelf-qr':
+                exitMoveMode();
+
+                (async () => {
+                    await refreshCurrentRackFromApi();
+                    const currentRack2 = racks.find(r => r.id === currentRackId);
+
+                    if (!currentRack2) return;
+                    showShelfQrModal(currentRack2, slotId);
+                })();
+
+                break;
+            case 'edit':
+                exitMoveMode();
+
+                (async () => {
+                    await refreshCurrentRackFromApi();
+                    const { currentRack, part } = await ensurePartInSlot(slotId);
+
+                    if (!currentRack || !part) { alert('対象の箱が見つかりませんでした。画面を最新状態に更新します。'); updateDetails(slotId); 
+
+return; }
+
+                    showEditPartModal(getCtx(), slotId, currentRack, part);
+                })();
+
+                break;
+            case 'delete':
+                exitMoveMode();
+
+                (async () => {
+                    await refreshCurrentRackFromApi();
+                    const { currentRack, part } = await ensurePartInSlot(slotId);
+
+                    if (!currentRack || !part) { alert('対象の箱が見つかりませんでした。画面を最新状態に更新します。'); updateDetails(slotId); 
+
+return; }
+
+                    showDeletePartModal(getCtx(), slotId, currentRack, part);
+                })();
+
+                break;
+        }
+    });
+
+    // メッシュラックのクリック処理（移動/選択）
+    // 既存のグローバルクリックリスナを解除してから登録
+    if (typeof window !== 'undefined' && window.__piOnBodyClick) {
+        try { document.body.removeEventListener('click', window.__piOnBodyClick); } catch {}
+    }
+
+    const __onBodyClick = e => {
+        if (Date.now() < clickGuardUntil) {
+            e.preventDefault();
+            
+return;
+        }
+
+        const rackDisplayArea = document.getElementById('rack-display-area');
+
+        if (rackDisplayArea && rackDisplayArea.contains(e.target)) {
+            const slotEl = e.target.closest('.rack-slot');
+
+            if (!slotEl) return;
+            const clickedSlotId = slotEl.dataset.slotId;
+            const currentRack = racks.find(r => r.id === currentRackId);
+
+            if (!currentRack) return;
+
+            if (isMoveMode) {
+                if (!currentRack.slots[clickedSlotId] && clickedSlotId !== moveOriginSlotId) {
+                    const rackNumericId = getRackNumericId(currentRack);
+
+                    if (!Number.isFinite(rackNumericId)) {
+                        alert('ラックIDの解決に失敗しました');
+                        
+return;
+                    }
+
+                    if (isPostingMove) {
+                        // すでに送信中なら無視（ダブルクリック・二重リスナ対策）
+                        return;
+                    }
+
+                    (async () => {
+                        try {
+                            isPostingMove = true;
+                            await api.moveSlot(rackNumericId, moveOriginSlotId, rackNumericId, clickedSlotId);
+
+                            // サーバーが204や空レスを返してもここまで来たら成功として扱い、ローカル状態を更新
+                            currentRack.slots[clickedSlotId] = currentRack.slots[moveOriginSlotId];
+                            currentRack.slots[moveOriginSlotId] = null;
+
+                            // 念のためサーバーの最新状態で同期
+                            await refreshCurrentRackFromApi();
+                            isMoveMode = false;
+                            moveOriginSlotId = null;
+                            updateDetails(clickedSlotId);
+                            console.debug('部品移動: UI更新完了(同期済み)');
+                        } catch (err) {
+                            console.error('移動に失敗', err);
+                            alert('移動に失敗しました。スロットの状態やサーバーをご確認ください。');
+                        } finally {
+                            isPostingMove = false;
+                        }
+                    })();
+                }
+            } else {
+                // スロット選択時も最新化してから詳細更新
+                (async () => {
+                    await refreshCurrentRackFromApi();
+                    updateDetails(clickedSlotId);
+                })();
+            }
+        }
+    };
+
+    if (typeof window !== 'undefined') {
+        window.__piOnBodyClick = __onBodyClick;
+        document.body.addEventListener('click', window.__piOnBodyClick);
+
+
+        // クリックに先行するpointerdown/mousedownをキャプチャ段階で抑止（より確実）
+        const guarder = ev => {
+            if (Date.now() < clickGuardUntil) {
+                ev.stopPropagation();
+                ev.preventDefault();
+            }
+        };
+
+
+        // 保存してteardownで解除
+        window.__piPointerGuard = guarder;
+        document.addEventListener('pointerdown', guarder, true);
+        document.addEventListener('mousedown', guarder, true);
+    }
+
+    // teardown登録（戻り時のクリーンアップ用）
+    if (typeof window !== 'undefined') {
+        window.__piAppTeardown = () => {
+            if (window.__piOnBodyClick) {
+                try { document.body.removeEventListener('click', window.__piOnBodyClick); } catch {}
+                window.__piOnBodyClick = undefined;
+            }
+
+            if (window.__piOnFabMainClick && window.__piFabMainEl) {
+                try { window.__piFabMainEl.removeEventListener('click', window.__piOnFabMainClick); } catch {}
+                window.__piOnFabMainClick = undefined;
+                window.__piFabMainEl = undefined;
+            }
+
+            if (window.__piPointerGuard) {
+                try {
+                    document.removeEventListener('pointerdown', window.__piPointerGuard, true);
+                    document.removeEventListener('mousedown', window.__piPointerGuard, true);
+                } catch {}
+
+                window.__piPointerGuard = undefined;
+            }
+        };
+    }
+
+    // 部品検索
+    searchInput?.addEventListener('input', () => {
+        const searchTerm = searchInput.value.toLowerCase();
+
+        document.querySelectorAll('.rack-slot').forEach(slot => {
+            slot.classList.remove('highlight-slot');
+            const currentRack = racks.find(r => r.id === currentRackId);
+
+            if (!currentRack || searchTerm.length < 2) return;
+            const part = currentRack.slots[slot.dataset.slotId];
+
+            if (part) {
+                const nameLc = ((part.partName || '') + '').toLowerCase();
+                const modelLc = ((part.partModelNumber || '') + '').toLowerCase();
+
+                if (nameLc.includes(searchTerm) || modelLc.includes(searchTerm)) {
+                slot.classList.add('highlight-slot');
+                }
+            }
+        });
+    });
+
+    // モーダルの黒背景クリックで閉じる
+    // Backdrop click handled by MUI Dialog
+
+    // 初期データロード
+    (async function init() {
+        const rackNameEl2 = document.getElementById('rack-name');
+
+        if (rackNameEl2) rackNameEl2.textContent = '読み込み中...';
+
+        try {
+            const apiData = await loadRacksFromApi();
+
+            racks = transformApiDataToAppData(apiData);
+
+            // 保存されているラックIDが存在すれば復元、なければ先頭ラック
+            const savedId = getLastRackId();
+
+            currentRackId = (savedId && racks.some(r => r.id === savedId))
+                ? savedId
+                : (racks.length > 0 ? racks[0].id : null);
+        } catch (e) {
+            console.error('APIからのデータ取得に失敗したため、モックデータを使用します。', e);
+            racks = transformApiDataToAppData(mockApiData);
+            const savedId = getLastRackId();
+
+            currentRackId = (savedId && racks.some(r => r.id === savedId))
+                ? savedId
+                : (racks.length > 0 ? racks[0].id : null);
+        }
+
+        setLastRackId(currentRackId);
+        renderApp();
+    })();
+}
diff --git a/javascript-version/src/app/(dashboard)/production-management/page.jsx b/javascript-version/src/app/(dashboard)/production-management/page.jsx
new file mode 100644
index 000000000..499d3bcf5
--- /dev/null
+++ b/javascript-version/src/app/(dashboard)/production-management/page.jsx
@@ -0,0 +1,43 @@
+/*
+======== ファイル概要 ========
+生産数管理のレガシーHTMLをiframeで包んでダッシュボードに組み込むページ。
+フレームワーク側のレイアウト余白を相殺しつつ高さを100vhに固定して崩れを防いでいる。
+*/
+"use client";
+
+// このページは既存の静的HTML (public/parts-inventory/部品在庫管理.html) をそのまま iframe で表示します。
+// もし将来 React 化したい場合は、この iframe を外し HTML/JS をコンポーネントへ段階移行してください。
+
+/**
+ * 生産数管理の静的HTMLをiframeで表示する。
+ * @returns {JSX.Element} 生産数管理のレガシー画面をiframe越しに描画する要素。
+ */
+const IframePage = () => {
+    // ======== 処理ステップ: コンテナ調整 → レガシーHTML埋め込み ========
+    // 1. コンテナ調整ではレイアウトが持つパディングを打ち消し、iframeを縦いっぱいに広げるための箱を用意する。
+    // 2. レガシーHTML埋め込みでは静的HTMLをsrcとして指定し、その場しのぎではなく段階的移行の足場にする意図。
+    // レイアウト側で付与されている上部パディング/マージンを打ち消して余白を詰める
+    // (必要に応じて値を微調整: -24px -> -16px など)
+    return (
+        <div
+            style={{
+                height: '100vh',
+                minHeight: '100vh',
+                display: 'flex',
+                flexDirection: 'column',
+                marginTop: '-24px',
+                overflow: 'hidden', // 親でスクロールバーを出さない
+            }}
+        >
+            <iframe
+                title="部品在庫管理"
+                src="/production-management/生産数管理ページ.html"
+                // iframeはレガシーHTML中のスクリプト・フォーム送信が必要なため、必要最小限のsandbox権限を許可する。
+                style={{ width: '100%', height: '100vh', border: 0, display: 'block' }}
+                sandbox="allow-scripts allow-same-origin allow-popups allow-downloads allow-forms"
+            />
+        </div>
+    );
+};
+
+export default IframePage;
diff --git a/javascript-version/src/app/(dashboard)/shipping-instructions/components/CalendarModal.jsx b/javascript-version/src/app/(dashboard)/shipping-instructions/components/CalendarModal.jsx
new file mode 100644
index 000000000..bd0ecdfe3
--- /dev/null
+++ b/javascript-version/src/app/(dashboard)/shipping-instructions/components/CalendarModal.jsx
@@ -0,0 +1,59 @@
+/*
+======== ファイル概要 ========
+利用可能な指示日付を一覧から選択するモーダル。件数バッジ付きのリストで選択性を高めています。
+*/
+
+"use client"
+
+import Dialog from '@mui/material/Dialog'
+import DialogTitle from '@mui/material/DialogTitle'
+import DialogContent from '@mui/material/DialogContent'
+import DialogActions from '@mui/material/DialogActions'
+import Button from '@mui/material/Button'
+import List from '@mui/material/List'
+import ListItem from '@mui/material/ListItem'
+import ListItemButton from '@mui/material/ListItemButton'
+import ListItemText from '@mui/material/ListItemText'
+import Badge from '@mui/material/Badge'
+import Box from '@mui/material/Box'
+import Typography from '@mui/material/Typography'
+
+/**
+ * 日付選択モーダル。
+ * @param {object}   props                       - コンポーネント引数。
+ * @param {boolean}  props.open                  - モーダル開閉フラグ。
+ * @param {Function} props.onClose               - 閉じる操作のハンドラ。
+ * @param {Function} props.onSelect              - 日付選択時ハンドラ。
+ * @param {Array}    [props.items=[]]            - {date, count} の候補配列。
+ * @param {string}   props.selectedDate          - 現在選択中の日付。
+ * @returns {JSX.Element}                        - 日付リストを表示するダイアログ。
+ */
+// シンプルな一覧モーダル: 左に日付、右に件数バッジ。選択で onSelect(date) を呼ぶ
+export default function CalendarModal({ open, onClose, onSelect, items = [], selectedDate }) {
+  return (
+    <Dialog open={open} onClose={onClose} fullWidth maxWidth='xs'>
+      <DialogTitle>日付を選択</DialogTitle>
+      <DialogContent dividers sx={{ p: 0 }}>
+        {items.length === 0 ? (
+          <Box sx={{ p: 3 }}>
+            <Typography color='text.secondary'>候補日がありません</Typography>
+          </Box>
+        ) : (
+          <List dense disablePadding sx={{ maxHeight: 420, overflowY: 'auto' }}>
+            {items.map(({ date, count }) => (
+              <ListItem key={date} disablePadding>
+                <ListItemButton selected={selectedDate === date} onClick={() => onSelect?.(date)}>
+                  <ListItemText primary={date} />
+                  <Badge color='primary' badgeContent={typeof count === 'number' ? count : 0} sx={{ mr: 1 }} />
+                </ListItemButton>
+              </ListItem>
+            ))}
+          </List>
+        )}
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose} color='secondary'>閉じる</Button>
+      </DialogActions>
+    </Dialog>
+  )
+}
\ No newline at end of file
diff --git a/javascript-version/src/app/(dashboard)/shipping-instructions/components/ConfirmDeleteDialog.jsx b/javascript-version/src/app/(dashboard)/shipping-instructions/components/ConfirmDeleteDialog.jsx
new file mode 100644
index 000000000..e3f326466
--- /dev/null
+++ b/javascript-version/src/app/(dashboard)/shipping-instructions/components/ConfirmDeleteDialog.jsx
@@ -0,0 +1,39 @@
+/*
+======== ファイル概要 ========
+出荷指示を削除する前にユーザーへ最終確認を求めるダイアログ。対象名の表示にも対応します。
+*/
+
+// 削除確認ダイアログ
+
+import Dialog from '@mui/material/Dialog'
+import DialogTitle from '@mui/material/DialogTitle'
+import DialogContent from '@mui/material/DialogContent'
+import DialogActions from '@mui/material/DialogActions'
+import Typography from '@mui/material/Typography'
+import Button from '@mui/material/Button'
+
+/**
+ * 削除確認ダイアログ。
+ * @param {object}   props                 - コンポーネント引数。
+ * @param {boolean}  props.open            - ダイアログ表示フラグ。
+ * @param {Function} props.onCancel        - キャンセル時のハンドラ。
+ * @param {Function} props.onConfirm       - 削除確定時のハンドラ。
+ * @param {string}   [props.itemTitle]     - 確認メッセージに表示する対象名。
+ * @returns {JSX.Element}                  - 削除確認用のダイアログ。
+ */
+const ConfirmDeleteDialog = ({ open, onCancel, onConfirm, itemTitle }) => (
+  <Dialog open={open} onClose={onCancel}>
+    <DialogTitle>この指示を削除しますか？</DialogTitle>
+    <DialogContent>
+      <Typography>
+        {itemTitle ? `「${itemTitle}」を削除します。よろしいですか？` : 'この指示を削除します。よろしいですか？'}
+      </Typography>
+    </DialogContent>
+    <DialogActions>
+      <Button onClick={onCancel}>キャンセル</Button>
+      <Button onClick={onConfirm} color='error' variant='contained'>削除する</Button>
+    </DialogActions>
+  </Dialog>
+)
+
+export default ConfirmDeleteDialog
diff --git a/javascript-version/src/app/(dashboard)/shipping-instructions/components/ConfirmRevertDialog.jsx b/javascript-version/src/app/(dashboard)/shipping-instructions/components/ConfirmRevertDialog.jsx
new file mode 100644
index 000000000..05a8e203e
--- /dev/null
+++ b/javascript-version/src/app/(dashboard)/shipping-instructions/components/ConfirmRevertDialog.jsx
@@ -0,0 +1,36 @@
+/*
+======== ファイル概要 ========
+完了済み出荷指示を未完了へ戻す際に確認を促すダイアログ。ユーザーの誤操作を防ぐために利用します。
+*/
+
+// 完了を取り消すか聞くダイアログ
+
+import Dialog from '@mui/material/Dialog'
+import DialogTitle from '@mui/material/DialogTitle'
+import DialogContent from '@mui/material/DialogContent'
+import DialogActions from '@mui/material/DialogActions'
+import Typography from '@mui/material/Typography'
+import Button from '@mui/material/Button'
+
+/**
+ * 完了解除確認ダイアログ。
+ * @param {object}   props                 - コンポーネント引数。
+ * @param {boolean}  props.open            - ダイアログ表示フラグ。
+ * @param {Function} props.onCancel        - キャンセル押下時のハンドラ。
+ * @param {Function} props.onConfirm       - 未完了へ戻す確定ハンドラ。
+ * @returns {JSX.Element}                  - 確認用のダイアログ。
+ */
+const ConfirmRevertDialog = ({ open, onCancel, onConfirm }) => (
+  <Dialog open={open} onClose={onCancel}>
+    <DialogTitle>完了を取り消しますか？</DialogTitle>
+    <DialogContent>
+      <Typography>この指示を未完了に戻しますか？</Typography>
+    </DialogContent>
+    <DialogActions>
+      <Button onClick={onCancel}>キャンセル</Button>
+      <Button onClick={onConfirm} variant='contained'>未完了に戻す</Button>
+    </DialogActions>
+  </Dialog>
+)
+
+export default ConfirmRevertDialog
diff --git a/javascript-version/src/app/(dashboard)/shipping-instructions/components/FilterBar.jsx b/javascript-version/src/app/(dashboard)/shipping-instructions/components/FilterBar.jsx
new file mode 100644
index 000000000..3128c659f
--- /dev/null
+++ b/javascript-version/src/app/(dashboard)/shipping-instructions/components/FilterBar.jsx
@@ -0,0 +1,240 @@
+/*
+======== ファイル概要 ========
+製造出荷指示ページ上部のフィルターバー。日付ページングと検索条件のトグルを提供し、折りたたみセクション
+で詳細フィルタを制御します。UIコンポーネントは MUI を利用し、縦幅を抑えるレイアウトを意識していま
+す。
+*/
+
+"use client"
+
+import { useMemo, useState } from 'react'
+// フィルターバーのコンポーネント
+
+import Card from '@mui/material/Card'
+import CardContent from '@mui/material/CardContent'
+import Grid from '@mui/material/Grid'
+import TextField from '@mui/material/TextField'
+import Select from '@mui/material/Select'
+import MenuItem from '@mui/material/MenuItem'
+import InputAdornment from '@mui/material/InputAdornment'
+import FormControl from '@mui/material/FormControl'
+import InputLabel from '@mui/material/InputLabel'
+import Box from '@mui/material/Box'
+import IconButton from '@mui/material/IconButton'
+import Tooltip from '@mui/material/Tooltip'
+import Button from '@mui/material/Button'
+import Badge from '@mui/material/Badge'
+import Collapse from '@mui/material/Collapse'
+// Divider は縦幅最適化のため未使用に
+import NavigateBeforeIcon from '@mui/icons-material/NavigateBefore'
+import NavigateNextIcon from '@mui/icons-material/NavigateNext'
+import FilterListIcon from '@mui/icons-material/FilterList'
+import TodayIcon from '@mui/icons-material/Today'
+import CalendarMonthIcon from '@mui/icons-material/CalendarMonth'
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
+import ExpandLessIcon from '@mui/icons-material/ExpandLess'
+
+/**
+ * 出荷指示一覧を絞り込むフィルターバー。
+ * @param {object}      props                          - コンポーネント引数。
+ * @param {string}      props.search                   - フリーテキスト検索語。
+ * @param {Function}    props.onSearchChange           - 検索語変更時に呼び出すハンドラ。
+ * @param {string}      props.line                     - 選択中のライン値。
+ * @param {Function}    props.onLineChange             - ライン変更時に呼び出すハンドラ。
+ * @param {string}      props.completed                - 完了状態フィルタ。
+ * @param {Function}    props.onCompletedChange        - 完了状態変更時のハンドラ。
+ * @param {string}      props.date                     - 選択中日付 (YYYY-MM-DD)。
+ * @param {Function}    props.onDateChange             - 日付変更時のハンドラ。
+ * @param {Function}    props.onPrevDate               - 前日ボタン押下時のハンドラ。
+ * @param {Function}    props.onNextDate               - 翌日ボタン押下時のハンドラ。
+ * @param {boolean}     [props.canPrev=true]           - 前日へ移動可能かどうか。
+ * @param {boolean}     [props.canNext=true]           - 翌日へ移動可能かどうか。
+ * @param {Array}       props.lineOptions              - ライン選択肢の配列。
+ * @param {Array}       props.completedOptions         - 完了状態選択肢の配列。
+ * @param {boolean}     [props.loadingLines=false]     - ライン候補読み込み中フラグ。
+ * @param {Function}    props.onOpenCalendar           - カレンダーを開くハンドラ。
+ * @returns {JSX.Element}                              - フィルタ UI コンポーネント。
+ */
+const FilterBar = ({
+  search,
+  onSearchChange,
+  line,
+  onLineChange,
+  completed,
+  onCompletedChange,
+  date,
+  onDateChange,
+  onPrevDate,
+  onNextDate,
+  canPrev = true,
+  canNext = true,
+  lineOptions,
+  completedOptions,
+  loadingLines = false,
+  onOpenCalendar
+}) => {
+  // 折りたたみフィルターの表示切替
+  const [openMore, setOpenMore] = useState(false)
+
+  // 適用中フィルター数（デフォルト以外をカウント）
+  const activeCount = useMemo(() => {
+    let c = 0
+    if (search && String(search).trim().length > 0) c += 1
+    if (line && line !== 'すべて') c += 1
+    if (completed && completed !== 'all') c += 1
+    return c
+  }, [search, line, completed])
+
+  // ======== 処理ステップ: 日付操作 → 詳細フィルタ → 折りたたみ描画 ========
+  // 1. 日付ナビゲーションは左右ボタンと今日ボタンをまとめて配置し、操作距離を最小化している。
+  // 2. 検索語とライン/完了状態は Collapse 内に閉じ込め、高さを節約しつつ必要時のみ展開できる。
+  // 3. バッジでアクティブなフィルタ数を示し、ユーザーが条件の掛かり具合を即時認識できるようにした。
+
+  return (
+    <Card sx={{ mb: 2, borderRadius: 3, boxShadow: 1 }}>
+      <CardContent sx={{ py: 1.25, px: { xs: 1.5, sm: 2 } }}>
+        {/* 1行に日付ページング＋その他フィルターのトグルをまとめて縦幅を抑制 */}
+        <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 2, flexWrap: 'wrap' }}>
+          {/* 左側: 日付ページンググループ */}
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, flexWrap: 'wrap' }}>
+            <Tooltip title='前の日付'>
+              <span>
+                <IconButton color='primary' onClick={onPrevDate} disabled={!canPrev} aria-label='前の日付へ' sx={{ p: 1 }}>
+                  <NavigateBeforeIcon />
+                </IconButton>
+              </span>
+            </Tooltip>
+
+            <TextField
+              type='date'
+              size='small'
+              value={date || ''}
+              onChange={e => onDateChange(e.target.value)}
+              InputLabelProps={{ shrink: true }}
+              sx={{
+                '& input': { fontSize: 16, fontWeight: 600, py: 0.75, textAlign: 'center' },
+                minWidth: { xs: 200, sm: 220 }
+              }}
+            />
+
+            <Button
+              size='small'
+              variant='outlined'
+              color='secondary'
+              startIcon={<TodayIcon />}
+              onClick={() => {
+                const d = new Date()
+                const y = d.getFullYear()
+                const m = String(d.getMonth() + 1).padStart(2, '0')
+                const dd = String(d.getDate()).padStart(2, '0')
+                onDateChange?.(`${y}-${m}-${dd}`)
+              }}
+              aria-label='今日へ移動'
+              sx={{ textTransform: 'none' }}
+            >
+              今日
+            </Button>
+
+            <Tooltip title='日付一覧を開く'>
+              <span>
+                <IconButton color='secondary' onClick={onOpenCalendar} aria-label='日付一覧' sx={{ p: 1 }}>
+                  <CalendarMonthIcon />
+                </IconButton>
+              </span>
+            </Tooltip>
+
+            <Tooltip title='次の日付'>
+              <span>
+                <IconButton color='primary' onClick={onNextDate} disabled={!canNext} aria-label='次の日付へ' sx={{ p: 1 }}>
+                  <NavigateNextIcon />
+                </IconButton>
+              </span>
+            </Tooltip>
+          </Box>
+
+          {/* 右側: その他フィルタのトグルと状態表示 */}
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+            <Button
+              size='small'
+              variant='text'
+              startIcon={
+                <Badge color='primary' overlap='circular' badgeContent={activeCount > 0 ? activeCount : null}>
+                  <FilterListIcon />
+                </Badge>
+              }
+              endIcon={openMore ? <ExpandLessIcon /> : <ExpandMoreIcon />}
+              onClick={() => setOpenMore(v => !v)}
+              sx={{ textTransform: 'none' }}
+              aria-expanded={openMore}
+              aria-controls='more-filters'
+            >
+              フィルター
+            </Button>
+          </Box>
+        </Box>
+
+        <Collapse in={openMore} timeout='auto' unmountOnExit>
+          <Box id='more-filters' sx={{ mt: 1.25 }}>
+            <Grid container spacing={2} alignItems='flex-end'>
+              <Grid item xs={12} md={6}>
+                <TextField
+                  fullWidth
+                  label='品名 / 配送先 / 備考で検索'
+                  size='small'
+                  value={search}
+                  onChange={e => onSearchChange(e.target.value)}
+                  InputProps={{
+                    startAdornment: (
+                      <InputAdornment position='start'>
+                        <span className='ri-search-line' />
+                      </InputAdornment>
+                    )
+                  }}
+                />
+              </Grid>
+              <Grid item xs={6} md={3}>
+                <FormControl fullWidth size='small'>
+                  <InputLabel id='filter-line-label'>担当ライン</InputLabel>
+                  <Select
+                    labelId='filter-line-label'
+                    id='filter-line'
+                    label='担当ライン'
+                    value={line}
+                    onChange={e => onLineChange(e.target.value)}
+                    disabled={loadingLines}
+                  >
+                    {loadingLines ? (
+                      <MenuItem value={line} disabled>読み込み中…</MenuItem>
+                    ) : (
+                      lineOptions.map(opt => (
+                        <MenuItem key={opt.value} value={opt.value}>{opt.label}</MenuItem>
+                      ))
+                    )}
+                  </Select>
+                </FormControl>
+              </Grid>
+              <Grid item xs={6} md={3}>
+                <FormControl fullWidth size='small'>
+                  <InputLabel id='filter-completed-label'>完了状態</InputLabel>
+                  <Select
+                    labelId='filter-completed-label'
+                    id='filter-completed'
+                    label='完了状態'
+                    value={completed}
+                    onChange={e => onCompletedChange(e.target.value)}
+                  >
+                    {completedOptions.map(opt => (
+                      <MenuItem key={opt.value} value={opt.value}>{opt.label}</MenuItem>
+                    ))}
+                  </Select>
+                </FormControl>
+              </Grid>
+            </Grid>
+          </Box>
+        </Collapse>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default FilterBar
diff --git a/javascript-version/src/app/(dashboard)/shipping-instructions/components/InstructionModal.jsx b/javascript-version/src/app/(dashboard)/shipping-instructions/components/InstructionModal.jsx
new file mode 100644
index 000000000..7bdea3054
--- /dev/null
+++ b/javascript-version/src/app/(dashboard)/shipping-instructions/components/InstructionModal.jsx
@@ -0,0 +1,253 @@
+/*
+======== ファイル概要 ========
+出荷指示の新規作成・編集モーダル。入力フォームと即時プレビュー用のカードを左右に配置し、MUI ダイアログ
+で保存操作を提供します。
+*/
+
+// 入力フォームのコンポーネント
+
+import Dialog from '@mui/material/Dialog'
+import DialogTitle from '@mui/material/DialogTitle'
+import DialogContent from '@mui/material/DialogContent'
+import DialogActions from '@mui/material/DialogActions'
+import Grid from '@mui/material/Grid'
+import TextField from '@mui/material/TextField'
+import Select from '@mui/material/Select'
+import MenuItem from '@mui/material/MenuItem'
+import InputAdornment from '@mui/material/InputAdornment'
+import Button from '@mui/material/Button'
+
+import CategoryIcon from '@mui/icons-material/Category'
+import SquareFootIcon from '@mui/icons-material/SquareFoot'
+import Inventory2Icon from '@mui/icons-material/Inventory2'
+import NumbersIcon from '@mui/icons-material/Numbers'
+import PaletteIcon from '@mui/icons-material/Palette'
+import LocalShippingIcon from '@mui/icons-material/LocalShipping'
+import PlaceIcon from '@mui/icons-material/Place'
+import NotesIcon from '@mui/icons-material/Notes'
+import EventIcon from '@mui/icons-material/Event'
+
+import SpringIcon from './icons/SpringIcon'
+import ShippingInstructionCard from './ShippingInstructionCard'
+
+// date 入力用: Date/ISO/Offset から "YYYY-MM-DD" を生成
+function toDateLocalValue(value) {
+  if (!value) return ''
+  const d = new Date(value)
+  if (isNaN(d.getTime())) return ''
+  const pad = n => String(n).padStart(2, '0')
+  const yyyy = d.getFullYear()
+  const mm = pad(d.getMonth() + 1)
+  const dd = pad(d.getDate())
+  return `${yyyy}-${mm}-${dd}`
+}
+
+/**
+ * 出荷指示を作成・編集するモーダル。
+ * @param {object}        props                               - コンポーネント引数。
+ * @param {boolean}       props.open                          - モーダル開閉フラグ。
+ * @param {Function}      props.onClose                       - クローズ時ハンドラ。
+ * @param {Function}      props.onSave                        - 保存確定ハンドラ。
+ * @param {boolean}       props.editMode                      - 編集モードかどうか。
+ * @param {object}        props.form                          - 入力フォームの値。
+ * @param {Function}      props.onFormChange                  - フォーム入力変更ハンドラ。
+ * @param {Array}         props.lineOptions                   - 担当ラインの選択肢。
+ * @param {boolean}       [props.saving=false]                - 保存中フラグ。
+ * @returns {JSX.Element}                                     - フォームとプレビューを内包したモーダル。
+ */
+const InstructionModal = ({ open, onClose, onSave, editMode, form, onFormChange, lineOptions, saving = false }) => {
+  // プレビュー用のダミー指示データ（現在の入力値から組み立て）
+  const previewInstruction = {
+    id: form.id || 'preview',
+    line: form.line || 'その他',
+    title: [form.productName, form.size].filter(Boolean).join(' ').trim() || form.title || '',
+    productName: form.productName || '',
+    size: form.size || '',
+    color: form.color || '',
+    springType: form.springType || '',
+    includedItems: form.includedItems || form.note || '',
+    shippingMethod: form.shippingMethod || '',
+    destination: form.destination || '',
+    remarks: form.remarks || '',
+    note: form.note || '',
+    quantity: form.quantity ?? 1,
+    completed: form.completed || false,
+    createdAt: form.createdAt || null
+  }
+
+  // ======== 処理ステップ: プレビュー構築 → 入力配置 → アクション制御 ========
+  // 1. 入力値からカード表示に必要なフィールドを合成し、完成形を事前に確認できるようにする。
+  // 2. 左にプレビュー、右に入力という二列構成で視線移動を最小限に抑える。
+  // 3. 保存/キャンセルのボタンは DialogActions に集約し、保存中はボタンを無効化して二重送信を防ぐ。
+
+  return (
+    <Dialog open={open} onClose={onClose} maxWidth='md' fullWidth>
+      <DialogTitle>{editMode ? '指示編集' : '新規 製造指示'}</DialogTitle>
+      <DialogContent>
+        <Grid container spacing={3} sx={{ mt: 1 }}>
+          {/* 左: ライブプレビュー */}
+          <Grid item xs={12} md={5} sx={{ display: 'flex' }}>
+            <div style={{ width: '100%', pointerEvents: 'none' }}>
+              <ShippingInstructionCard
+                instruction={previewInstruction}
+                onToggleComplete={() => {}}
+                onEdit={() => {}}
+                onDelete={() => {}}
+              />
+            </div>
+          </Grid>
+
+          {/* 右: 入力フォーム */}
+          <Grid item xs={12} md={7}>
+            <Grid container spacing={2}>
+              <Grid item xs={12}>
+                <TextField
+                  label='品名'
+                  name='productName'
+                  value={form.productName}
+                  onChange={onFormChange}
+                  fullWidth
+                  size='small'
+                  sx={{ mb: 2 }}
+                  required
+                  InputProps={{ startAdornment: (<InputAdornment position='start'><CategoryIcon fontSize='small' /></InputAdornment>) }}
+                />
+              </Grid>
+              <Grid item xs={12} sm={6}>
+                <TextField
+                  label='サイズ'
+                  name='size'
+                  value={form.size}
+                  onChange={onFormChange}
+                  fullWidth
+                  size='small'
+                  sx={{ mb: 2 }}
+                  InputProps={{ startAdornment: (<InputAdornment position='start'><SquareFootIcon fontSize='small' /></InputAdornment>) }}
+                />
+              </Grid>
+              <Grid item xs={12} sm={6}>
+                <Select label='担当ライン' name='line' value={form.line} onChange={onFormChange} fullWidth size='small' sx={{ mb: 2 }}>
+                  {lineOptions.filter(opt => opt.value !== 'すべて').map(opt => (
+                    <MenuItem key={opt.value} value={opt.value}>{opt.label}</MenuItem>
+                  ))}
+                </Select>
+              </Grid>
+
+              <Grid item xs={12} sm={6}>
+                <TextField
+                  label='スプリング種別'
+                  name='springType'
+                  value={form.springType}
+                  onChange={onFormChange}
+                  fullWidth
+                  size='small'
+                  sx={{ mb: 2 }}
+                  InputProps={{ startAdornment: (<InputAdornment position='start'><SpringIcon sx={{ fontSize: 18 }} /></InputAdornment>) }}
+                />
+              </Grid>
+              <Grid item xs={12} sm={6}>
+                <TextField
+                  label='同梱物'
+                  name='includedItems'
+                  value={form.includedItems}
+                  onChange={onFormChange}
+                  fullWidth
+                  size='small'
+                  sx={{ mb: 2 }}
+                  InputProps={{ startAdornment: (<InputAdornment position='start'><Inventory2Icon fontSize='small' /></InputAdornment>) }}
+                />
+              </Grid>
+
+              <Grid item xs={12} sm={6}>
+                <TextField
+                  label='数量'
+                  name='quantity'
+                  type='number'
+                  inputProps={{ min: 1 }}
+                  value={form.quantity}
+                  onChange={onFormChange}
+                  fullWidth
+                  size='small'
+                  sx={{ mb: 2 }}
+                  InputProps={{ startAdornment: (<InputAdornment position='start'><NumbersIcon fontSize='small' /></InputAdornment>) }}
+                />
+              </Grid>
+              <Grid item xs={12} sm={6}>
+                <TextField
+                  label='色'
+                  name='color'
+                  value={form.color}
+                  onChange={onFormChange}
+                  fullWidth
+                  size='small'
+                  sx={{ mb: 2 }}
+                  InputProps={{ startAdornment: (<InputAdornment position='start'><PaletteIcon fontSize='small' /></InputAdornment>) }}
+                />
+              </Grid>
+
+              <Grid item xs={12} sm={6}>
+                <TextField
+                  label='配送方法'
+                  name='shippingMethod'
+                  value={form.shippingMethod}
+                  onChange={onFormChange}
+                  fullWidth
+                  size='small'
+                  sx={{ mb: 2 }}
+                  InputProps={{ startAdornment: (<InputAdornment position='start'><LocalShippingIcon fontSize='small' /></InputAdornment>) }}
+                />
+              </Grid>
+              <Grid item xs={12} sm={6}>
+                <TextField
+                  label='配送先'
+                  name='destination'
+                  value={form.destination}
+                  onChange={onFormChange}
+                  fullWidth
+                  size='small'
+                  sx={{ mb: 2 }}
+                  InputProps={{ startAdornment: (<InputAdornment position='start'><PlaceIcon fontSize='small' /></InputAdornment>) }}
+                />
+              </Grid>
+
+              <Grid item xs={12} sm={6}>
+                <TextField
+                  label='実施日付'
+                  name='createdAt'
+                  type='date'
+                  value={toDateLocalValue(form.createdAt) || ''}
+                  onChange={onFormChange}
+                  fullWidth
+                  size='small'
+                  sx={{ mb: 2 }}
+                  InputProps={{ startAdornment: (<InputAdornment position='start'><EventIcon fontSize='small' /></InputAdornment>) }}
+                />
+              </Grid>
+
+              <Grid item xs={12}>
+                <TextField
+                  label='備考'
+                  name='remarks'
+                  value={form.remarks}
+                  onChange={onFormChange}
+                  fullWidth
+                  size='small'
+                  multiline
+                  rows={2}
+                  sx={{ mb: 2 }}
+                  InputProps={{ startAdornment: (<InputAdornment position='start'><NotesIcon fontSize='small' /></InputAdornment>) }}
+                />
+              </Grid>
+            </Grid>
+          </Grid>
+        </Grid>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose} disabled={saving}>キャンセル</Button>
+        <Button onClick={onSave} variant='contained' disabled={saving}>{saving ? '保存中…' : '保存'}</Button>
+      </DialogActions>
+    </Dialog>
+  )
+}
+
+export default InstructionModal
diff --git a/javascript-version/src/app/(dashboard)/shipping-instructions/components/ShippingInstructionCard.jsx b/javascript-version/src/app/(dashboard)/shipping-instructions/components/ShippingInstructionCard.jsx
new file mode 100644
index 000000000..5c70daf32
--- /dev/null
+++ b/javascript-version/src/app/(dashboard)/shipping-instructions/components/ShippingInstructionCard.jsx
@@ -0,0 +1,306 @@
+/*
+======== ファイル概要 ========
+個別の出荷指示を表示するカードコンポーネント。完了トグル、編集/削除ボタン、仕様・配送情報の表示を担い
+ます。完了済みカードには視覚的なオーバーレイとライン別アクセントを適用しています。
+*/
+
+"use client"
+// カードのコンポーネント
+
+import Card from '@mui/material/Card'
+import Typography from '@mui/material/Typography'
+import Checkbox from '@mui/material/Checkbox'
+import Button from '@mui/material/Button'
+import Box from '@mui/material/Box'
+import Chip from '@mui/material/Chip'
+import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline'
+import CheckCircleIcon from '@mui/icons-material/CheckCircle'
+import RadioButtonUncheckedIcon from '@mui/icons-material/RadioButtonUnchecked'
+import EditOutlinedIcon from '@mui/icons-material/EditOutlined'
+import SquareFootIcon from '@mui/icons-material/SquareFoot'
+import PaletteIcon from '@mui/icons-material/Palette'
+import LocalShippingIcon from '@mui/icons-material/LocalShipping'
+import PlaceIcon from '@mui/icons-material/Place'
+import EventIcon from '@mui/icons-material/Event'
+import Inventory2Icon from '@mui/icons-material/Inventory2'
+import NotesIcon from '@mui/icons-material/Notes'
+import useAuthMe from '@core/hooks/useAuthMe'
+import SurfaceBox from '@/components/surface/SurfaceBox'
+
+import SpringIcon from './icons/SpringIcon'
+
+// カードの縦幅を揃えてレイアウト崩れを防ぐ最低高さ
+const cardMinHeight = 260
+
+// ライン種別ごとにアクセントカラーを割り当て、カード境界色に反映する関数
+const lineAccentKey = line => (line === 'マット' ? 'info' : line === 'ボトム' ? 'warning' : 'default')
+
+/**
+ * ライン表示用チップ。
+ * @param {{ line: string }} props - ライン名を受け取るプロップス。
+ * @returns {JSX.Element}          - ライン別に色調整したチップ。
+ */
+const LineChip = ({ line }) => (
+  <Chip
+    size='small'
+    label={line}
+    sx={{
+      px: 1.25,
+      fontWeight: 700,
+      bgcolor: theme => {
+        const key = lineAccentKey(line)
+        if (key === 'info') return 'var(--mui-palette-info-lightOpacity)'
+        if (key === 'warning') return 'var(--mui-palette-warning-lightOpacity)'
+        return theme.palette.action.hover
+      },
+      color: theme => {
+        const key = lineAccentKey(line)
+        if (key === 'info') return theme.palette.info.dark
+        if (key === 'warning') return theme.palette.warning.dark
+        return theme.palette.text.primary
+      }
+    }}
+  />
+)
+
+/**
+ * タイトル文字列をライン名とサブテキストに分割する補助。
+ * @param {string} title - カード表示用タイトル。
+ * @param {string} line  - ライン名。
+ * @returns {{main:string,sub:string}} - 見出しとサブタイトル。
+ */
+function splitTitle(title, line) {
+  if (!title) return { main: line, sub: '' }
+  if (title.startsWith(line)) {
+    return { main: line, sub: title.slice(line.length).trim() }
+  }
+  return { main: line, sub: title }
+}
+
+/**
+ * 出荷指示カード。
+ * @param {object}        props                           - コンポーネント引数。
+ * @param {object}        props.instruction               - 表示対象の指示データ。
+ * @param {Function}      props.onToggleComplete          - 完了トグル時のハンドラ。
+ * @param {Function}      props.onEdit                    - 編集ボタン押下時のハンドラ。
+ * @param {Function}      [props.onDelete]                - 削除ボタン押下時のハンドラ。
+ * @returns {JSX.Element}                                 - 完了状態と詳細情報を含むカード。
+ */
+const ShippingInstructionCard = ({ instruction, onToggleComplete, onEdit, onDelete }) => {
+  const { isAdmin } = useAuthMe()
+  const { main, sub } = splitTitle(instruction.title, instruction.line)
+
+  // ======== 処理ステップ: 完了トグル → 表示レイアウト → 管理操作 ========
+  // 1. カード全体をフォーカス可能にし、Enter/Spaceでも完了を切り替えられるようキーボード対応する。
+  // 2. ライン別アクセントと仕様/配送ブロックで情報を整理し、完了時は斜線と淡色背景で視認性を保つ。
+  // 3. 管理者のみ編集/削除を出し分け、クリック時はイベント伝播を止めて完了トグルと競合しないようにする。
+
+  const handleCardClick = e => {
+    if (!onToggleComplete) return
+    onToggleComplete(instruction.id, e && e.clientX, e && e.clientY)
+  }
+  const handleKeyDown = e => {
+    if (!onToggleComplete) return
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault()
+      onToggleComplete(instruction.id)
+    }
+  }
+
+  return (
+    <Card
+      className='fade-in'
+      sx={{
+        borderRadius: '12px',
+        boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
+        opacity: instruction.completed ? 0.95 : 1,
+        border: theme => `1px solid ${instruction.completed ? theme.palette.success.main : theme.palette.divider}`,
+        backgroundColor: theme => (instruction.completed ? 'var(--mui-palette-success-lightOpacity)' : theme.palette.background.paper),
+        minHeight: cardMinHeight,
+        height: '100%',
+        width: '100%',
+        minWidth: 0,
+        display: 'flex',
+        flexDirection: 'column',
+        transition: 'all 0.3s',
+        position: 'relative',
+          cursor: onToggleComplete ? 'pointer' : 'default',
+        '&:before': {
+          content: '""',
+          position: 'absolute',
+          left: 0,
+          top: 0,
+          bottom: 0,
+          width: '6px',
+          borderTopLeftRadius: '12px',
+          borderBottomLeftRadius: '12px',
+          backgroundColor: theme => (
+            instruction.completed
+              ? theme.palette.success.main
+              : (() => {
+                  const key = lineAccentKey(instruction.line)
+                  if (key === 'info') return theme.palette.info.main
+                  if (key === 'warning') return theme.palette.warning.main
+                  return theme.palette.divider
+                })()
+          )
+        },
+        '&:hover': {
+          boxShadow: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
+          transform: 'translateY(-4px)'
+        }
+      }}
+      onClick={handleCardClick}
+      onKeyDown={handleKeyDown}
+      role='button'
+      tabIndex={0}
+    >
+      {instruction.completed && (
+        <div className='absolute inset-0 pointer-events-none flex items-center justify-center'>
+          <CheckCircleIcon sx={{ fontSize: 140, color: 'var(--mui-palette-success-lightOpacity)' }} />
+        </div>
+      )}
+
+      <Box sx={{ p: 5, borderBottom: 1, borderColor: 'divider', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
+        <Box>
+          <LineChip line={instruction.line} />
+          <Typography
+            variant='h3'
+            sx={{
+              fontWeight: 800,
+              fontSize: 20,
+              color: 'text.primary',
+              mt: 1.5,
+              lineHeight: 1.3,
+              wordBreak: 'break-word',
+              overflowWrap: 'anywhere',
+              textDecoration: instruction.completed ? 'line-through' : 'none'
+            }}
+          >
+            {instruction.productName || main}
+            <Typography component='span' sx={{ fontSize: 15, color: 'text.secondary', fontWeight: 500, display: 'block', mt: 0.5, wordBreak: 'break-word', overflowWrap: 'anywhere' }}>
+              {instruction.size || sub}
+            </Typography>
+          </Typography>
+        </Box>
+        <Box sx={{ textAlign: 'right', flexShrink: 0, display: 'flex', alignItems: 'flex-start', gap: 3 }}>
+          <span
+            className='px-2.5 py-1 rounded-full text-xs font-bold select-none'
+            style={{
+              backgroundColor: instruction.completed ? 'var(--mui-palette-success-lightOpacity)' : 'transparent',
+              color: instruction.completed ? 'var(--mui-palette-success-dark)' : 'inherit',
+              border: instruction.completed ? '1px solid var(--mui-palette-success-main)' : '1px solid var(--mui-palette-divider)'
+            }}
+          >
+            {instruction.completed ? '完了' : '未完了'}
+          </span>
+          <Checkbox
+            checked={instruction.completed}
+            onClick={e => { if (!onToggleComplete) return; e.stopPropagation(); onToggleComplete(instruction.id, e.clientX, e.clientY) }}
+            onChange={() => { }}
+            icon={<RadioButtonUncheckedIcon />}
+            checkedIcon={<CheckCircleIcon />}
+            sx={{ p: 0, '&.Mui-checked': { color: 'success.main' } }}
+            inputProps={{ 'aria-label': '完了' }}
+          />
+        </Box>
+      </Box>
+
+      <Box sx={{ p: 5, flexGrow: 1 }} style={{ textDecoration: instruction.completed ? 'line-through' : 'none' }}>
+        <Box sx={{ mb: 3 }}>
+          <Typography variant='overline' sx={{ fontWeight: 700, color: 'text.secondary', letterSpacing: '0.08em' }}>仕様</Typography>
+          <Box sx={{ mt: 1 }}>
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+              <PaletteIcon sx={{ color: 'text.secondary', fontSize: 18 }} />
+              <Typography component='span' variant='body2' color='text.secondary' sx={{ width: 80, flexShrink: 0 }}>カラー:</Typography>
+              <Typography component='span' variant='body2' sx={{ fontWeight: 500 }}>{instruction.color || '-'}</Typography>
+            </Box>
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mt: 0.5 }}>
+              <SquareFootIcon sx={{ color: 'text.secondary', fontSize: 18 }} />
+              <Typography component='span' variant='body2' color='text.secondary' sx={{ width: 80, flexShrink: 0 }}>サイズ:</Typography>
+              <Typography component='span' variant='body2' sx={{ fontWeight: 500 }}>{instruction.size || '-'}</Typography>
+            </Box>
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mt: 0.5 }}>
+              <SpringIcon sx={{ color: 'text.secondary', fontSize: 18 }} />
+              <Typography component='span' variant='body2' color='text.secondary' sx={{ width: 80, flexShrink: 0 }}>スプリング:</Typography>
+              <Typography component='span' variant='body2' sx={{ fontWeight: 500 }}>{instruction.springType || '-'}</Typography>
+            </Box>
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mt: 0.5 }}>
+              <Inventory2Icon sx={{ color: 'text.secondary', fontSize: 18 }} />
+              <Typography component='span' variant='body2' color='text.secondary' sx={{ width: 80, flexShrink: 0 }}>同梱物:</Typography>
+              <Typography component='span' variant='body2' sx={{ fontWeight: 500 }}>{instruction.includedItems || instruction.note || '-'}</Typography>
+            </Box>
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mt: 0.5 }}>
+              <NotesIcon sx={{ color: 'text.secondary', fontSize: 18 }} />
+              <Typography component='span' variant='body2' color='text.secondary' sx={{ width: 80, flexShrink: 0 }}>備考:</Typography>
+              <Typography component='span' variant='body2' sx={{ fontWeight: 500 }}>{instruction.remarks || '-'}</Typography>
+            </Box>
+          </Box>
+        </Box>
+        <Box>
+          <Typography variant='overline' sx={{ fontWeight: 700, color: 'text.secondary', letterSpacing: '0.08em' }}>配送情報</Typography>
+          <Box sx={{ mt: 1 }}>
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+              <LocalShippingIcon sx={{ color: 'text.secondary', fontSize: 18 }} />
+              <Typography component='span' variant='body2' color='text.secondary' sx={{ width: 80, flexShrink: 0 }}>配送方法:</Typography>
+              <Typography component='span' variant='body2' sx={{ fontWeight: 500 }}>{instruction.shippingMethod || '-'}</Typography>
+            </Box>
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mt: 0.5 }}>
+              <PlaceIcon sx={{ color: 'text.secondary', fontSize: 18 }} />
+              <Typography component='span' variant='body2' color='text.secondary' sx={{ width: 80, flexShrink: 0 }}>配送先:</Typography>
+              <Typography component='span' variant='body2' sx={{ fontWeight: 500 }}>{instruction.destination || '-'}</Typography>
+            </Box>
+            {instruction.remarks && (
+              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mt: 0.5 }}>
+                <EventIcon sx={{ color: 'error.main', fontSize: 18 }} />
+                <Typography component='span' variant='body2' color='text.secondary' sx={{ width: 80, flexShrink: 0 }}>特記:</Typography>
+                <Typography component='span' variant='body2' sx={{ fontWeight: 700, color: 'error.main' }}>{instruction.remarks}</Typography>
+              </Box>
+            )}
+            {instruction.createdAt && (
+              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mt: 0.5 }}>
+                <EventIcon sx={{ fontSize: 18 }} />
+                <Typography variant='body2' color='text.secondary'>{new Date(instruction.createdAt).toLocaleString()}</Typography>
+              </Box>
+            )}
+          </Box>
+        </Box>
+      </Box>
+
+      <SurfaceBox variant='soft' sx={{ p: 4, borderBottomLeftRadius: '12px', borderBottomRightRadius: '12px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+        <Box sx={{ display: 'flex', alignItems: 'center', textDecoration: instruction.completed ? 'line-through' : 'none' }}>
+          <Typography component='span' sx={{ ml: 1, color: 'text.secondary', fontSize: 12, fontWeight: 700, lineHeight: 1 }}>数量:</Typography>
+          <Typography component='span' sx={{ ml: 0.75, mb: 0.375, color: instruction.completed ? 'success.main' : 'primary.main', fontSize: 25, fontWeight: 800 }}>
+            {instruction.quantity ?? '-'}
+          </Typography>
+        </Box>
+        {isAdmin && (
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+            <Button
+              variant='text'
+              size='small'
+              onClick={e => { e.stopPropagation(); onEdit(instruction) }}
+              startIcon={<EditOutlinedIcon />}
+              sx={{ color: 'primary.main', fontWeight: 600 }}
+            >
+              編集
+            </Button>
+            {onDelete && (
+              <Button
+                variant='text'
+                size='small'
+                onClick={e => { e.stopPropagation(); onDelete(instruction) }}
+                startIcon={<DeleteOutlineIcon />}
+                sx={{ color: 'error.main', fontWeight: 600 }}
+              >
+                削除
+              </Button>
+            )}
+          </Box>
+        )}
+      </SurfaceBox>
+    </Card>
+  )
+}
+
+export default ShippingInstructionCard
diff --git a/javascript-version/src/app/(dashboard)/shipping-instructions/components/conffeti/common.ts b/javascript-version/src/app/(dashboard)/shipping-instructions/components/conffeti/common.ts
new file mode 100644
index 000000000..2889407a0
--- /dev/null
+++ b/javascript-version/src/app/(dashboard)/shipping-instructions/components/conffeti/common.ts
@@ -0,0 +1,24 @@
+/*
+======== ファイル概要 ========
+confetti 演出用の共通ユーティリティ。DOM 要素の中心座標を取り出し、演出の発射位置に利用します。
+*/
+
+import React from 'react'
+
+/**
+ * 中心座標を取得する。
+ * RefObject の current が null である可能性を考慮して安全に扱います。
+ * @param {React.RefObject<HTMLButtonElement>} ref - 座標を取得したいボタン要素の参照。
+ * @returns {{centerX:number,centerY:number}}       - 画面上の中心座標。
+ */
+export function getCentralCoordinates(ref: React.RefObject<HTMLButtonElement>): { centerX: number, centerY: number } {
+  let x: number = 0
+  let y: number = 0
+  if (ref && ref.current) {
+    const rect = ref.current.getBoundingClientRect()
+    x = rect.x + rect.width / 2
+    y = rect.y + rect.height / 2
+    console.log('Center X:', x, 'Center Y:', y)
+  }
+  return { centerX: x, centerY: y }
+}
\ No newline at end of file
diff --git a/javascript-version/src/app/(dashboard)/shipping-instructions/components/conffeti/useEventConfetti.tsx b/javascript-version/src/app/(dashboard)/shipping-instructions/components/conffeti/useEventConfetti.tsx
new file mode 100644
index 000000000..0f03deb7c
--- /dev/null
+++ b/javascript-version/src/app/(dashboard)/shipping-instructions/components/conffeti/useEventConfetti.tsx
@@ -0,0 +1,143 @@
+'use client'
+
+/*
+======== ファイル概要 ========
+季節イベントに合わせた confetti 発火パターンを提供するカスタムフック。ボタン要素の位置から発射位置を算
+出し、テーマごとに色や射出角度を調整します。
+*/
+
+import confetti from 'canvas-confetti'
+import React, { useRef, useState } from 'react'
+
+/**
+ * イベント向け confetti 制御フック。
+ * @returns {{
+ *          christmasConfetti: React.RefObject<HTMLButtonElement>,
+ *          handleChristmasConfetti: () => void,
+ *          hallowinConfetti: React.RefObject<HTMLButtonElement>,
+ *          handleHallowinConfetti: () => void,
+ *          newYearConfetti: React.RefObject<HTMLButtonElement>,
+ *          handleNewYearConfetti: () => void
+ *        }} - ボタン参照と発火ハンドラ群。
+ */
+export default function useEventConfetti() {
+    // クリスマス用: 緑赤ベースで射出、樹形の Path を用意
+    const christmasConfetti = useRef<HTMLButtonElement>(null)
+    const handleChristmasConfetti = () => {
+        var triangle = confetti.shapeFromPath({ path: 'M0 10 L5 0 L10 10z' })
+        let centerX: number = 0
+        let centerY: number = 0
+        if (christmasConfetti.current) {
+            const rect = christmasConfetti.current!.getBoundingClientRect()
+            centerX = rect.x + rect.width / 2
+            centerY = rect.y + rect.height / 2
+            console.log('Center X:', centerX, 'Center Y:', centerY)
+        }
+        confetti({
+            // パーティクルの数（デフォルト50)
+            particleCount: 100,
+            // 発射角度(デフォルト90度)
+            angle: 90,
+            // 発射範囲(デフォルト45度)
+            spread: 90,
+            // 失速具合 デフォルト0.9
+            // decay: 0.8,
+            //重力 (0-1)
+            // gravity: 0.2,
+            // default:0 数値を上げると横に流れる
+            // drift: 0,
+            // default:false
+            // confettiが動く長さ (default: 200)
+            // ticks: 200,
+            origin: {
+                x: centerX / window.innerWidth,
+                y: centerY / window.innerHeight
+            },
+            // 紙吹雪の色を指定。配列でいくつも指定できる
+            colors: ['#165B33', '#BB2528', '#146B3A', '#EA4630'],
+            // 紙吹雪の形を指定
+            // shapes: ['square', triangle],
+            // 紙吹雪のサイズを指定
+            // scalar: 0.8,
+            // z-indexを指定(default:100)
+            zIndex: 100
+        })
+    }
+
+    // ハロウィン用: 濃色中心で ticks を伸ばし、夜祭り感を演出
+    const hallowinConfetti = useRef<HTMLButtonElement>(null)
+    const handleHallowinConfetti = () => {
+        let centerX: number = 0
+        let centerY: number = 0
+        if (hallowinConfetti.current) {
+            const rect = hallowinConfetti.current!.getBoundingClientRect()
+            centerX = rect.x + rect.width / 2
+            centerY = rect.y + rect.height / 2
+            console.log('Center X:', centerX, 'Center Y:', centerY)
+        }
+        confetti({
+            // パーティクルの数（デフォルト50)
+            particleCount: 100,
+            // 発射範囲(デフォルト45度)
+            spread: 90,
+            // confettiが動く長さ (default: 200)
+            ticks: 150,
+            // 紙吹雪の色を指定。配列でいくつも指定できる
+            colors: ['#f75f1c', '#ff9a00', '#000000', '#881ee4'],
+            // z-indexを指定(default:100)
+            origin: {
+                x: centerX / window.innerWidth,
+                y: centerY / window.innerHeight
+            },
+            zIndex: 100
+        })
+    }
+
+    // 年末年始用: 広範囲に撒いて華やかさを強調
+    const newYearConfetti = useRef<HTMLButtonElement>(null)
+    const handleNewYearConfetti = () => {
+        var triangle = confetti.shapeFromPath({ path: 'M0 10 L5 0 L10 10z' })
+        let centerX: number = 0
+        let centerY: number = 0
+        if (christmasConfetti.current) {
+            const rect = christmasConfetti.current!.getBoundingClientRect()
+            centerX = rect.x + rect.width / 2
+            centerY = rect.y + rect.height / 2
+            console.log('Center X:', centerX, 'Center Y:', centerY)
+        }
+        confetti({
+            // パーティクルの数（デフォルト50)
+            particleCount: 100,
+            // 発射角度(デフォルト90度)
+            angle: 90,
+            // 発射範囲(デフォルト45度)
+            spread: 130,
+            // 失速具合 デフォルト0.9
+            decay: 0.8,
+            //重力 (0-1)
+            gravity: 0.2,
+            // default:0 数値を上げると横に流れる
+            drift: 0,
+            // default:false
+            // confettiが動く長さ (default: 200)
+            ticks: 100,
+            origin: {
+                x: centerX / window.innerWidth,
+                y: centerY / window.innerHeight
+            },
+            // z-indexを指定(default:100)
+            zIndex: 100
+        })
+    }
+
+    // ======== 処理ステップ: 参照確保 → 座標算出 → 発火パラメータ設定 ========
+    // 1. 各イベントボタンの参照を useRef で確保し、クリック時に位置を計算する。
+    // 2. 取得した中心座標を window サイズで割り、canvas-confetti が要求する 0~1 の比率へ変換する。
+    // 3. パラメータはテーマごとに spread や colors を変え、演出の個性を出している。
+
+    return {
+        christmasConfetti, handleChristmasConfetti,
+        hallowinConfetti, handleHallowinConfetti,
+        newYearConfetti, handleNewYearConfetti
+    }
+}
\ No newline at end of file
diff --git a/javascript-version/src/app/(dashboard)/shipping-instructions/components/conffeti/useSmallConffeti.tsx b/javascript-version/src/app/(dashboard)/shipping-instructions/components/conffeti/useSmallConffeti.tsx
new file mode 100644
index 000000000..dee5584b1
--- /dev/null
+++ b/javascript-version/src/app/(dashboard)/shipping-instructions/components/conffeti/useSmallConffeti.tsx
@@ -0,0 +1,189 @@
+'use client'
+
+/*
+======== ファイル概要 ========
+小規模な confetti 演出パターンを集約したカスタムフック。演出の強度や広がりを細かく調整します。
+*/
+
+import confetti from 'canvas-confetti'
+import React, { useRef, useState } from 'react'
+import { getCentralCoordinates } from './common'
+
+/**
+ * 小規模演出向け confetti 制御フック。
+ * @returns {{
+ *          normalConfetti: React.RefObject<HTMLButtonElement>,
+ *          handleNormalConfetti: () => void,
+ *          allDirectionConfetti: React.RefObject<HTMLButtonElement>,
+ *          handleAllDirectionConfetti: () => void,
+ *          weakConfetti: React.RefObject<HTMLButtonElement>,
+ *          handleWeakConfetti: () => void,
+ *          slowConfetti: React.RefObject<HTMLButtonElement>,
+ *          handleSlowConfetti: () => void,
+ *          coloredConfetti: React.RefObject<HTMLButtonElement>,
+ *          handleColoredConfetti: () => void,
+ *          flashyConfetti: React.RefObject<HTMLButtonElement>,
+ *          handleFlashyConfetti: () => void
+ *        }} - ボタン参照とハンドラセット。
+ */
+export default function useSmallConffeti() {
+    const normalConfetti = useRef<HTMLButtonElement>(null)
+    const handleNormalConfetti = () => {
+        // 中心座標を取得
+        const { centerX, centerY } = getCentralCoordinates(normalConfetti)
+        confetti({
+            startVelocity: 30,
+            origin: {
+                x: centerX / window.innerWidth,
+                y: centerY / window.innerHeight
+            }
+        })
+    }
+
+    const weakConfetti = useRef<HTMLButtonElement>(null)
+    const handleWeakConfetti = () => {
+        // 中心座標を取得
+        const { centerX, centerY } = getCentralCoordinates(weakConfetti)
+        confetti({
+            // 発射速度 (default: 45)
+            startVelocity: 15,
+            // 発射範囲(デフォルト45度)
+            spread: 70,
+            ticks: 50,
+            origin: {
+                x: centerX / window.innerWidth,
+                y: centerY / window.innerHeight
+            }
+
+        })
+    }
+
+    const allDirectionConfetti = useRef<HTMLButtonElement>(null)
+    const handleAllDirectionConfetti = () => {
+        // 中心座標を取得
+        const { centerX, centerY } = getCentralCoordinates(allDirectionConfetti)
+        confetti({
+            // パーティクルの数（デフォルト50)
+            particleCount: 100,
+            // 発射角度(デフォルト90度)
+            angle: 90,
+            // 発射範囲(デフォルト45度)
+            spread: 360,
+            // 発射速度 (default: 45)
+            startVelocity: 20,
+            // 失速具合 デフォルト0.9
+            decay: 0.8,
+            //重力 (0-1)
+            gravity: 0.2,
+            // default:0 数値を上げると横に流れる
+            drift: 0,
+            // confettiが動く長さ (default: 200)
+            ticks: 100,
+            origin: {
+                x: centerX / window.innerWidth,
+                y: centerY / window.innerHeight
+            },
+            // z-indexを指定(default:100)
+            zIndex: 100
+        })
+    }
+
+    const slowConfetti = useRef<HTMLButtonElement>(null)
+    const handleSlowConfetti = () => {
+        // 中心座標を取得
+        const { centerX, centerY } = getCentralCoordinates(slowConfetti)
+        confetti({
+            // パーティクルの数（デフォルト50)
+            particleCount: 100,
+            // 発射角度(デフォルト90度)
+            angle: 90,
+            // 発射範囲(デフォルト45度)
+            spread: 130,
+            // 失速具合 デフォルト0.9
+            decay: 0.8,
+            //重力 (0-1)
+            gravity: 0.2,
+            // default:0 数値を上げると横に流れる
+            drift: 0,
+            // default:false
+            // confettiが動く長さ (default: 200)
+            ticks: 100,
+            origin: {
+                x: centerX / window.innerWidth,
+                y: centerY / window.innerHeight
+            },
+            // z-indexを指定(default:100)
+            zIndex: 100
+        })
+    }
+
+    const coloredConfetti = useRef<HTMLButtonElement>(null)
+    const handleColoredConfetti = () => {
+        // 中心座標を取得
+        const { centerX, centerY } = getCentralCoordinates(coloredConfetti)
+        confetti({
+            // パーティクルの数（デフォルト50)
+            particleCount: 100,
+            // 発射角度(デフォルト90度)
+            angle: 90,
+            // 発射範囲(デフォルト45度)
+            spread: 130,
+            // 失速具合 デフォルト0.9
+            decay: 0.8,
+            //重力 (0-1)
+            gravity: 0.2,
+            // default:0 数値を上げると横に流れる
+            drift: 0,
+            // confettiが動く長さ (default: 200)
+            ticks: 100,
+            origin: {
+                x: centerX / window.innerWidth,
+                y: centerY / window.innerHeight
+            },
+            // 紙吹雪の色を指定。配列でいくつも指定できる
+            colors: ['#ffffff', '#e74c3c'],
+            // 紙吹雪の形を指定
+            // shapes: ['square', triangle],
+            // 紙吹雪のサイズを指定
+            // scalar: 0.8,
+            // z-indexを指定(default:100)
+            zIndex: 100
+        })
+    }
+
+    const flashyConfetti = useRef<HTMLButtonElement>(null)
+    const handleFlashyConfetti = () => {
+        // 中心座標を取得
+        const { centerX, centerY } = getCentralCoordinates(flashyConfetti)
+        confetti({
+            // パーティクルの数（デフォルト50)
+            particleCount: 230,
+            // 発射範囲(デフォルト45度)
+            spread: 130,
+            // default:0 数値を上げると横に流れる
+            drift: 0,
+            // confettiが動く長さ (default: 200)
+            ticks: 100,
+            origin: {
+                x: centerX / window.innerWidth,
+                y: centerY / window.innerHeight
+            },
+            // z-indexを指定(default:100)
+            zIndex: 100
+        })
+    }
+
+    // ======== 処理ステップ: 座標取得 → confetti 設定 → バリエーション展開 ========
+    // 1. 各バリエーションごとに ref を保持し、クリック位置を正確に算出する。
+    // 2. 取得した座標を共通ユーティリティで正規化し、発射パラメータに利用する。
+    // 3. 速度・広がり・色調を変えることで、トリガー用途に応じた演出を提供する。
+
+    return {
+        normalConfetti, handleNormalConfetti,
+        allDirectionConfetti, handleAllDirectionConfetti,
+        weakConfetti, handleWeakConfetti,
+        slowConfetti, handleSlowConfetti,
+        coloredConfetti, handleColoredConfetti,
+        flashyConfetti, handleFlashyConfetti
+    }
+}
\ No newline at end of file
diff --git a/javascript-version/src/app/(dashboard)/shipping-instructions/components/conffeti/useTpoConfetti.tsx b/javascript-version/src/app/(dashboard)/shipping-instructions/components/conffeti/useTpoConfetti.tsx
new file mode 100644
index 000000000..407947232
--- /dev/null
+++ b/javascript-version/src/app/(dashboard)/shipping-instructions/components/conffeti/useTpoConfetti.tsx
@@ -0,0 +1,254 @@
+'use client'
+
+/*
+======== ファイル概要 ========
+状況に応じた confetti 演出（エラー通知・定期タスク完了など）をまとめたカスタムフック。演出意図に合わせ
+て色や重力を調整しています。
+*/
+
+import confetti from 'canvas-confetti'
+import React, { useRef, useState } from 'react'
+import { getCentralCoordinates } from './common'
+
+/**
+ * 状況別 TPO confetti 制御フック。
+ * @returns {{
+ *          batchErrorConfetti: React.RefObject<HTMLButtonElement>,
+ *          handleBatchErrorConfetti: () => void,
+ *          monthlyTaskCompletedConfetti: React.RefObject<HTMLButtonElement>,
+ *          handleMonthlyTaskCompletedConfetti: () => void,
+ *          yearlyTaskCompletedConfetti: React.RefObject<HTMLButtonElement>,
+ *          handleYearlyTaskCompletedConfetti: () => void,
+ *          gameFinishConfetti: React.RefObject<HTMLButtonElement>,
+ *          handleGameFinithConfetti: () => void,
+ *          goodButtonConfetti: React.RefObject<HTMLButtonElement>,
+ *          handleGoodButtonConfetti: () => void
+ *        }} - 参照とイベントハンドラの集合。
+ */
+export default function useTpoConfetti() {
+    const batchErrorConfetti = useRef<HTMLButtonElement>(null)
+    const handleBatchErrorConfetti = () => {
+        // 中心座標を取得
+        const { centerX, centerY } = getCentralCoordinates(batchErrorConfetti)
+        function shoot() {
+            confetti({
+                // パーティクルの数（デフォルト50)
+                particleCount: 200,
+                // 発射角度(デフォルト90度)
+                angle: 90,
+                // 発射範囲(デフォルト45度)
+                spread: 360,
+                // 失速具合 デフォルト0.9
+                decay: 1,
+                //重力 (0-1)
+                gravity: 0.0,
+                // confettiが動く長さ (default: 200)
+                ticks: 200,
+                origin: {
+                    x: centerX / window.innerWidth,
+                    y: centerY / window.innerHeight
+                },
+                // 紙吹雪の色を指定。配列でいくつも指定できる
+                colors: ['#a70000', '#ff0000', '#ff5252', '#ffbaba'],
+                // 紙吹雪のサイズを指定
+                scalar: 0.6,
+                // z-indexを指定(default:100)
+                zIndex: 100
+            })
+        }
+        shoot()
+        setTimeout(shoot, 200)
+    }
+
+    const monthlyTaskCompletedConfetti = useRef<HTMLButtonElement>(null)
+    const handleMonthlyTaskCompletedConfetti = () => {
+        var scalar = 2
+        var star1 = confetti.shapeFromText({ text: '⭐️', scalar })
+        var star2 = confetti.shapeFromText({ text: '✨', scalar })
+        // 中心座標を取得
+        const { centerX, centerY } = getCentralCoordinates(monthlyTaskCompletedConfetti)
+        function shoot() {
+            confetti({
+                // パーティクルの数（デフォルト50)
+                particleCount: 200,
+                // 発射角度(デフォルト90度)
+                angle: 90,
+                // 発射範囲(デフォルト45度)
+                spread: 360,
+                // 失速具合 デフォルト0.9
+                decay: 0.85,
+                //重力 (0-1)
+                gravity: 0.1,
+                // confettiが動く長さ (default: 200)
+                ticks: 200,
+                origin: {
+                    x: centerX / window.innerWidth,
+                    y: centerY / window.innerHeight
+                },
+                // 紙吹雪の色を指定。配列でいくつも指定できる
+                colors: ['#a70000', '#ff0000', '#ff5252', '#ffbaba'],
+                // 紙吹雪の形を指定
+                shapes: [star1, star2],
+                // 紙吹雪のサイズを指定
+                scalar: scalar,
+                // z-indexを指定(default:100)
+                zIndex: 100
+            })
+        }
+        shoot()
+        // setTimeout(shoot, 200);
+    }
+
+    const yearlyTaskCompletedConfetti = useRef<HTMLButtonElement>(null)
+    const handleYearlyTaskCompletedConfetti = () => {
+        var scalar = 2
+        var star1 = confetti.shapeFromText({ text: '⭐️', scalar })
+        var star2 = confetti.shapeFromText({ text: '✨', scalar })
+        // 中心座標を取得
+        const { centerX, centerY } = getCentralCoordinates(yearlyTaskCompletedConfetti)
+        function shoot() {
+            confetti({
+                // パーティクルの数（デフォルト50)
+                particleCount: 50,
+                // 発射角度(デフォルト90度)
+                angle: 90,
+                // 発射範囲(デフォルト45度)
+                spread: 90,
+                // 失速具合 デフォルト0.9
+                decay: 0.85,
+                //重力 (0-1)
+                gravity: 0.5,
+                // confettiが動く長さ (default: 200)
+                ticks: 200,
+                origin: {
+                    x: centerX / window.innerWidth,
+                    y: centerY / window.innerHeight
+                },
+                // 紙吹雪の色を指定。配列でいくつも指定できる
+                colors: ['#b78700', '#eeb600', '#fff71', '#f8da45'],
+                // z-indexを指定(default:100)
+                zIndex: 100
+            })
+        }
+        shoot()
+        setTimeout(shoot, 900)
+        setTimeout(shoot, 1800)
+    }
+
+    const gameFinishConfetti = useRef<HTMLButtonElement>(null)
+    const handleGameFinithConfetti = () => {
+        var scalar = 2
+        var star1 = confetti.shapeFromText({ text: '⭐️', scalar })
+        var star2 = confetti.shapeFromText({ text: '✨', scalar })
+        // 中心座標を取得
+        const { centerX, centerY } = getCentralCoordinates(gameFinishConfetti)
+        function shoot(param: { angle: number, decay: number }) {
+            confetti({
+                // パーティクルの数（デフォルト50)
+                particleCount: 30,
+                // 発射角度(デフォルト90度)
+                angle: param ? param.angle : 90,
+                // 発射範囲(デフォルト45度)
+                spread: 40,
+                // 失速具合 デフォルト0.9
+                decay: 0.85,
+                //重力 (0-1)
+                gravity: 0.5,
+                // confettiが動く長さ (default: 200)
+                ticks: 200,
+                origin: {
+                    x: centerX / window.innerWidth,
+                    y: centerY / window.innerHeight
+                },
+                // 紙吹雪の色を指定。配列でいくつも指定できる
+                colors: [
+                    //'#b78700', '#eeb600', '#fff71', '#f8da45',
+                    '#dcf2f1', '#7fc7d9', '#365486'],
+                // z-indexを指定(default:100)
+                zIndex: 100
+            })
+        }
+        shoot({ angle: 23, decay: 0.9 })
+        setTimeout(() => shoot({ angle: 90, decay: 0.8 }), 100)
+        setTimeout(() => shoot({ angle: 120, decay: 0.8 }), 200)
+        setTimeout(() => shoot({ angle: 150, decay: 0.8 }), 300)
+        setTimeout(() => shoot({ angle: 180, decay: 0.8 }), 400)
+        setTimeout(() => shoot({ angle: 210, decay: 0.8 }), 100)
+        setTimeout(() => shoot({ angle: 240, decay: 0.8 }), 200)
+        setTimeout(() => shoot({ angle: 270, decay: 0.8 }), 300)
+        setTimeout(() => shoot({ angle: 300, decay: 0.8 }), 400)
+        setTimeout(() => shoot({ angle: 330, decay: 0.8 }), 100)
+        setTimeout(() => shoot({ angle: 360, decay: 0.8 }), 200)
+        setTimeout(() => shoot({ angle: 0, decay: 0.8 }), 300)
+        setTimeout(() => shoot({ angle: 60, decay: 0.8 }), 400)
+    }
+
+    const goodButtonConfetti = useRef<HTMLButtonElement>(null)
+    const handleGoodButtonConfetti = () => {
+        var scalar = 2
+        var star1 = confetti.shapeFromText({ text: '⭐️', scalar })
+        var star2 = confetti.shapeFromText({ text: '✨', scalar })
+        // 中心座標を取得
+        const { centerX, centerY } = getCentralCoordinates(goodButtonConfetti)
+        var triangle = confetti.shapeFromPath({ path: 'M0 10 L5 0 L10 10z' })
+        function shoot(param: { angle: number, decay: number, ticks: number }) {
+            confetti({
+                // パーティクルの数（デフォルト50)
+                particleCount: 15,
+                // 発射角度(デフォルト90度)
+                angle: param ? param.angle : 90,
+                // 発射範囲(デフォルト45度)
+                spread: 360,
+                // 失速具合 デフォルト0.9
+                decay: 0.3,
+                //重力 (0-1)
+                gravity: 0,
+                // confettiが動く長さ (default: 200)
+                ticks: param.ticks,
+                origin: {
+                    x: centerX / window.innerWidth,
+                    y: centerY / window.innerHeight
+                },
+                // 紙吹雪の形を指定
+                shapes: [ triangle],
+                // 紙吹雪のサイズを指定
+                scalar: 0.8,
+                // 紙吹雪の色を指定。配列でいくつも指定できる
+                colors: [
+                    //'#b78700', '#eeb600', '#fff71', '#f8da45',
+                    '#ff0000', '#ff7676'],
+                // z-indexを指定(default:100)
+                zIndex: 100
+            })
+        }
+        // shoot({ angle: 23, decay: 0.9 });
+        setTimeout(() => shoot({ angle: 30, decay: 1, ticks: 50 }), 0)
+        setTimeout(() => shoot({ angle: 60, decay: 1, ticks: 30 }), 100)
+        setTimeout(() => shoot({ angle: 0, decay: 1, ticks: 30 }), 200)
+        //setTimeout(() => shoot({ angle: 90, decay: 0.1 }), 200);
+        // setTimeout(() => shoot({ angle: 120, decay: 0.1 }), 200);
+        // setTimeout(() => shoot({ angle: 150, decay: 0.1 }), 300);
+        // setTimeout(() => shoot({ angle: 180, decay: 0.8 }), 400);
+        // setTimeout(() => shoot({ angle: 210, decay: 0.8 }), 100);
+        // setTimeout(() => shoot({ angle: 240, decay: 0.8 }), 200);
+        // setTimeout(() => shoot({ angle: 270, decay: 0.8 }), 300);
+        // setTimeout(() => shoot({ angle: 300, decay: 0.8 }), 400);
+        // setTimeout(() => shoot({ angle: 330, decay: 0.8 }), 100);
+        // setTimeout(() => shoot({ angle: 360, decay: 0.8 }), 200);
+        // setTimeout(() => shoot({ angle: 0, decay: 0.8 }), 300);
+        // setTimeout(() => shoot({ angle: 60, decay: 0.8 }), 400);
+    }
+
+    // ======== 処理ステップ: 参照取得 → 状況別パターン構築 → 複数回射出 ========
+    // 1. イベント種別ごとに ref を保持し、クリック位置に合わせた confetti を放出する。
+    // 2. エラー通知は赤系・定期完了はスターを使用するなど、色と形状で意味合いを伝える。
+    // 3. setTimeout を組み合わせて連続的な演出を作り、達成感や警告度合いを表現する。
+
+    return {
+        batchErrorConfetti, handleBatchErrorConfetti,
+        monthlyTaskCompletedConfetti, handleMonthlyTaskCompletedConfetti,
+        yearlyTaskCompletedConfetti, handleYearlyTaskCompletedConfetti,
+        gameFinishConfetti, handleGameFinithConfetti,
+        goodButtonConfetti, handleGoodButtonConfetti
+    }
+}
\ No newline at end of file
diff --git a/javascript-version/src/app/(dashboard)/shipping-instructions/components/icons/SpringIcon.jsx b/javascript-version/src/app/(dashboard)/shipping-instructions/components/icons/SpringIcon.jsx
new file mode 100644
index 000000000..c786a28a6
--- /dev/null
+++ b/javascript-version/src/app/(dashboard)/shipping-instructions/components/icons/SpringIcon.jsx
@@ -0,0 +1,37 @@
+/*
+======== ファイル概要 ========
+スプリング（ばね）をモチーフにしたカスタム SVG アイコン。仕様表示で使用します。
+*/
+
+// オリジナルアイコン(スプリング)のコンポーネント
+
+import SvgIcon from '@mui/material/SvgIcon'
+
+// 縦向きのギザギザ線アイコン（コイル/バネ風）
+/**
+ * スプリングを表現するアイコン。
+ * @param {object} props - SvgIcon へそのまま渡すプロップス。
+ * @returns {JSX.Element} - 交互の折れ線でコイル感を出した SVG。
+ */
+const SpringIcon = props => (
+  <SvgIcon {...props} viewBox='0 0 24 24'>
+    <path
+      d='M7 4 L11 8 L7 12 L11 16 L7 20'
+      stroke='currentColor'
+      strokeWidth='2'
+      fill='none'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+    />
+    <path
+      d='M17 4 L13 8 L17 12 L13 16 L17 20'
+      stroke='currentColor'
+      strokeWidth='2'
+      fill='none'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+    />
+  </SvgIcon>
+)
+
+export default SpringIcon
diff --git a/javascript-version/src/app/(dashboard)/shipping-instructions/data/sampleInitialInstructions.js b/javascript-version/src/app/(dashboard)/shipping-instructions/data/sampleInitialInstructions.js
new file mode 100644
index 000000000..f0d16ad9d
--- /dev/null
+++ b/javascript-version/src/app/(dashboard)/shipping-instructions/data/sampleInitialInstructions.js
@@ -0,0 +1,154 @@
+/*
+======== ファイル概要 ========
+出荷指示画面のローカル動作用サンプルデータと選択肢定義。新しい API 形式に合わせたフィールド名を保持して
+います。
+*/
+
+// サンプルデータ: 新しいAPI仕様に合わせた形
+/**
+ * サンプル出荷指示。
+ * @type {Array<object>}
+ */
+export const initialInstructions = [
+    {
+        id: 1,                                          // 指示ID
+        line: 'ボトム',                                 // ライン名
+        product_name: '木枠',                           // 製品名
+        size: '1200x1950x170',                          // サイズ
+        color: 'こげ茶',                                // 色
+        spring_type: '2R/M8脚',                         // スプリング種類
+        included_items: '',                            // 同梱物
+        shipping_method: '㈱西',                        // 出荷方法
+        destination: 'フラワーホテル',                  // 出荷先
+        remarks: '',                                    // 備考
+        quantity: 1,                                    // 数量
+        is_completed: false,                            // 完了フラグ
+        created_at: '2025-04-23T10:00:00Z'              // 作成日時
+    },
+    {
+        id: 2, // 指示ID
+        line: 'ボトム', // ライン名
+        product_name: '木枠', // 製品名
+        size: '1200x1950x170', // サイズ
+        color: 'こげ茶', // 色
+        spring_type: '2R/M8脚', // スプリング種類
+        included_items: '', // 同梱物
+        shipping_method: '㈱濃', // 出荷方法
+        destination: 'グリーンホテル北上', // 出荷先
+        remarks: '', // 備考
+        quantity: 1, // 数量
+        is_completed: false, // 完了フラグ
+        created_at: '2025-04-23T15:30:00Z' // 作成日時
+    },
+    {
+        id: 3, // 指示ID
+        line: 'マット', // ライン名
+        product_name: 'マット', // 製品名
+        size: '1200x1950x200 SD', // サイズ
+        color: 'GMBE', // 色
+        spring_type: '平/1.9', // スプリング種類
+        included_items: '西川仕様 / 西川アイロンシール', // 同梱物
+        shipping_method: '西', // 出荷方法
+        destination: 'フラワーホテル / ㈱西川', // 出荷先
+        remarks: '', // 備考
+        quantity: 1, // 数量
+        is_completed: false, // 完了フラグ
+        created_at: '2025-04-23T15:30:00Z' // 作成日時
+    },
+    {
+        id: 4, // 指示ID
+        line: 'マット', // ライン名
+        product_name: 'マット', // 製品名
+        size: '1200x1950x200 SD', // サイズ
+        color: 'GMBE', // 色
+        spring_type: '平/1.9', // スプリング種類
+        included_items: '西川仕様 / 西川アイロンシール', // 同梱物
+        shipping_method: '㈱濃', // 出荷方法
+        destination: 'グリーンホテル北上 / ㈱西川', // 出荷先
+        remarks: '', // 備考
+        quantity: 1, // 数量
+        is_completed: false, // 完了フラグ
+        created_at: '2025-04-23T15:30:00Z' // 作成日時
+    },
+    {
+        id: 5, // 指示ID
+        line: 'マット', // ライン名
+        product_name: 'サポート', // 製品名
+        size: '80巾', // サイズ
+        color: '5cm', // 色
+        spring_type: '', // スプリング種類
+        included_items: '', // 同梱物
+        shipping_method: 'Amazon', // 出荷方法
+        destination: '福岡県 小都 / Amazon', // 出荷先
+        remarks: '', // 備考
+        quantity: 1, // 数量
+        is_completed: false, // 完了フラグ
+        created_at: '2025-04-23T15:30:00Z' // 作成日時
+    },
+    {
+        id: 6, // 指示ID
+        line: 'マット', // ライン名
+        product_name: '天の羽衣', // 製品名
+        size: '', // サイズ
+        color: '', // 色
+        spring_type: '', // スプリング種類
+        included_items: '', // 同梱物
+        shipping_method: '夜', // 出荷方法
+        destination: '名古屋 / Amazon / オアシス便', // 出荷先
+        remarks: '', // 備考
+        quantity: 2, // 数量
+        is_completed: false, // 完了フラグ
+        created_at: '2025-04-23T15:30:00Z' // 作成日時
+    },
+    {
+        id: 7, // 指示ID
+        line: 'マット', // ライン名
+        product_name: 'マット', // 製品名
+        size: '', // サイズ
+        color: '', // 色
+        spring_type: '', // スプリング種類
+        included_items: '', // 同梱物
+        shipping_method: '積', // 出荷方法
+        destination: '名古屋 / Amazon / オアシス便', // 出荷先
+        remarks: '', // 備考
+        quantity: 8, // 数量
+        is_completed: false, // 完了フラグ
+        created_at: '2025-04-23T15:30:00Z' // 作成日時
+    },
+    {
+        id: 8, // 指示ID
+        line: 'マット', // ライン名
+        product_name: '木枠', // 製品名
+        size: '', // サイズ
+        color: '', // 色
+        spring_type: '', // スプリング種類
+        included_items: '', // 同梱物
+        shipping_method: '', // 出荷方法
+        destination: '名古屋 / Amazon / オアシス便', // 出荷先
+        remarks: '', // 備考
+        quantity: 37, // 数量
+        is_completed: false, // 完了フラグ
+        created_at: '2025-04-23T15:30:00Z' // 作成日時
+    },
+]
+
+/**
+ * ライン選択肢。
+ * @type {Array<{value:string,label:string}>}
+ */
+export const lineOptions = [
+    { value: 'すべて', label: 'すべて' },
+    { value: 'マット', label: 'マット' },
+    { value: 'ボトム', label: 'ボトム' },
+    { value: 'その他', label: 'その他' },
+]
+
+/**
+ * 完了状態選択肢。
+ * @type {Array<{value:string,label:string}>}
+ */
+export const completedOptions = [
+    { value: 'all', label: 'すべて' },
+    { value: 'completed', label: '完了' },
+    { value: 'not-completed', label: '未完了' },
+]
diff --git a/javascript-version/src/app/(dashboard)/shipping-instructions/hooks/useShippingInstructions.js b/javascript-version/src/app/(dashboard)/shipping-instructions/hooks/useShippingInstructions.js
new file mode 100644
index 000000000..3af4e9562
--- /dev/null
+++ b/javascript-version/src/app/(dashboard)/shipping-instructions/hooks/useShippingInstructions.js
@@ -0,0 +1,744 @@
+/*
+======== ファイル概要 ========
+このファイルは「製造出荷指示」画面向けのカスタムフックを提供します。画面で必要となる状態管理、API 通
+信、フィルタリング、モーダル表示、レコードの作成/更新/削除、完了トグルといった一連の機能を集約してい
+ます。
+*/
+
+/**
+ * Instruction レコードの型定義（簡易）
+ * @typedef {Object} Instruction
+ * @property {string|number} id 一意なID
+ * @property {string} title 表示用のタイトル（productName+size の合成が入る場合あり）
+ * @property {string} [productName] 製品名
+ * @property {string} [size] サイズ
+ * @property {string} line ライン名
+ * @property {boolean} completed 完了フラグ
+ * @property {string} [remarks] 備考
+ * @property {string} [note] 備考（レガシー互換）
+ * @property {string} [color] 色
+ * @property {string} [shippingMethod] 出荷方法
+ * @property {string} [destination] 出荷先
+ * @property {string} [includedItems] 同梱物
+ * @property {string} [springType] バネ種別
+ * @property {number} [quantity] 数量
+ * @property {string} [createdAt] 作成日時のISO文字列（タイムゾーンオフセット付き推奨）
+ */
+
+/**
+ * フックの state セクション（呼び出し側が直接参照する読み書き状態）
+ * @typedef {Object} HookState
+ * @property {Instruction[]} instructions 表示中の指示リスト
+ * @property {('local'|'api')} dataSource データ取得元（ローカルデータ/サーバAPI）
+ * @property {boolean} loading 指示リストの取得中フラグ
+ * @property {string|null} error 直近の失敗メッセージ
+ * @property {string|null} lastFetchedAt 最終取得時刻（ISO文字列）
+ * @property {number} reloadTick 取得再実行のトリガー（インクリメント用）
+ * @property {string} search フリーテキスト検索
+ * @property {string} line ラインフィルタ（'すべて'で無効）
+ * @property {('all'|'completed'|'not-completed')} completed 完了状態フィルタ
+ * @property {string} date 日付フィルタ（YYYY-MM-DD）
+ * @property {boolean} modalOpen 編集/作成モーダルの開閉
+ * @property {Instruction} form フォーム入力値
+ * @property {boolean} editMode 編集モード（false の場合は新規作成）
+ * @property {boolean} saving 保存処理中
+ * @property {Array<any>} lines ライン候補（API `/api/lines` の生データ）
+ * @property {boolean} loadingLines ライン候補取得中
+ * @property {string[]} availableDates 選択可能日付の配列（YYYY-MM-DD）
+ * @property {{date:string,count:number|null}[]} availableDateItems 日付と件数の一覧
+ * @property {boolean} loadingDates 日付候補取得中
+ * @property {boolean} deleteOpen 削除確認モーダル開閉
+ * @property {boolean} deleting 削除処理中
+ * @property {Instruction|null} targetToDelete 削除対象
+ * @property {boolean} confirmOpen 完了解除の確認モーダル開閉
+ * @property {string|number|null} pendingToggleId 完了解除の保留対象ID
+ * @property {boolean} calendarOpen 日付選択モーダルの開閉
+ */
+
+/**
+ * 派生値（メモ化済）
+ * @typedef {Object} HookDerived
+ * @property {Instruction[]} filtered 表示用にフィルタ済みの指示
+ * @property {boolean} canPrev 前の日付へ移動可能か
+ * @property {boolean} canNext 次の日付へ移動可能か
+ */
+
+/**
+ * 呼び出し側が利用するアクション（イベントハンドラ）
+ * @typedef {Object} HookActions
+ * @property {(source:'local'|'api')=>void} setDataSource データソース切替
+ * @property {(v:string)=>void} setSearch 検索語設定
+ * @property {(v:string)=>void} setLine ライン設定
+ * @property {(v:'all'|'completed'|'not-completed')=>void} setCompleted 完了状態フィルタ設定
+ * @property {(v:string)=>void} setDate 日付設定（YYYY-MM-DD）
+ * @property {(v:boolean)=>void} setModalOpen 編集/作成モーダル開閉
+ * @property {(v:Instruction)=>void} setForm フォーム値の直接セット
+ * @property {(v:boolean)=>void} setEditMode 編集モード切替
+ * @property {(v:boolean)=>void} setDeleteOpen 削除モーダル開閉
+ * @property {(v:Instruction|null)=>void} setTargetToDelete 削除対象指定
+ * @property {()=>void} handlePrevDate 前日へ移動
+ * @property {()=>void} handleNextDate 翌日へ移動
+ * @property {(id:string|number,clientX?:number,clientY?:number)=>void} handleToggleComplete 完了トグル（未完了→完了は即時反映、完了→未完了は確認有り）
+ * @property {()=>void} confirmRevert 完了→未完了への確定（確認モーダルOK）
+ * @property {()=>void} cancelRevert 完了→未完了の取り消し（確認モーダルCancel）
+ * @property {(inst:Instruction)=>void} handleEdit 既存指示の編集開始
+ * @property {(inst:Instruction)=>void} handleRequestDelete 削除リクエスト（確認モーダルを開く）
+ * @property {()=>void} handleCancelDelete 削除のキャンセル
+ * @property {()=>Promise<void>} handleConfirmDelete 削除の確定
+ * @property {()=>void} handleAdd 新規作成モーダルを開く
+ * @property {()=>Promise<void>} handleSave 作成/更新の保存
+ * @property {(e:import('react').ChangeEvent<HTMLInputElement|HTMLTextAreaElement|HTMLSelectElement>)=>void} handleFormChange フォーム入力ハンドラ
+ * @property {(v:boolean)=>void} setCalendarOpen カレンダーモーダル開閉
+ */
+
+/**
+ * フックの戻り値
+ * @typedef {Object} UseShippingInstructionsReturn
+ * @property {HookState} state 画面にバインドする状態
+ * @property {HookDerived} derived 画面表示用の派生値
+ * @property {HookActions} actions イベントハンドラ群
+ */
+
+// 状態管理・API通信・フィルタリング・イベントハンドラをカスタムフック
+
+// 必要なReactフックや外部ライブラリをインポート
+import { useEffect, useMemo, useRef, useState } from 'react'
+import confetti from 'canvas-confetti'
+
+// ユーティリティ関数や初期データをインポート
+import { normalizeInstruction, formatLocalYmd, toOffsetIso, toLocalYmd } from '../utils'
+import { initialInstructions, lineOptions, completedOptions } from '../data/sampleInitialInstructions'
+
+/**
+ * 製造出荷指示の一覧・編集に必要な状態/処理をまとめたカスタムフック。
+ * - API バックエンド（/api/*）からの取得/作成/更新/削除
+ * - ローカル（モック）データでの動作
+ * - ライン/完了状態/日付/フリーテキストのフィルタリング
+ * - 編集/削除/完了トグルのイベントハンドリング
+ * を提供します。
+ *
+ * 注意:
+ * - dataSource が 'api' の場合のみネットワーク呼び出しを行います。
+ * - レスポンスフォーマットはユーティリティ `normalizeInstruction` で正規化してから利用します。
+ *
+ * @returns {UseShippingInstructionsReturn}
+ */
+export default function useShippingInstructions() {
+    // 状態管理用のuseStateフック
+    const [instructions, setInstructions] = useState(() => initialInstructions.map(normalizeInstruction)) // 指示データの状態を管理
+    const [dataSource, setDataSource] = useState('api') // データソースの選択 ('local' または 'api')
+    const [loading, setLoading] = useState(false) // ローディング状態
+    const [error, setError] = useState(null) // エラーメッセージ
+    const [lastFetchedAt, setLastFetchedAt] = useState(null) // 最後にデータを取得した日時
+    const [reloadTick, setReloadTick] = useState(0) // 再読み込み用のトリガー
+    const [search, setSearch] = useState('') // 検索キーワード
+    const [line, setLine] = useState('すべて') // ラインフィルター
+    const [completed, setCompleted] = useState('all') // 完了状態フィルター
+    const [date, setDate] = useState(() => formatLocalYmd()) // 日付フィルター
+    const initialDateRef = useRef(null)
+    if (initialDateRef.current === null) {
+        initialDateRef.current = date
+    }
+    const [modalOpen, setModalOpen] = useState(false) // モーダルの開閉状態
+    const [form, setForm] = useState({ id: '', productName: '', size: '', title: '', line: 'マット', completed: false, remarks: '', color: '', shippingMethod: '', destination: '', includedItems: '', springType: '', quantity: 1 }) // フォームデータ
+    const [editMode, setEditMode] = useState(false) // 編集モードのフラグ
+    const [saving, setSaving] = useState(false) // 保存中の状態
+
+    // ライン選択肢の状態管理
+    const [lines, setLines] = useState([]) // ラインの選択肢を管理
+    const [loadingLines, setLoadingLines] = useState(false) // ラインデータ取得中の状態
+
+    // 利用可能な日付の状態管理
+    const [availableDates, setAvailableDates] = useState([]) // 利用可能な日付のリスト
+    const [availableDateItems, setAvailableDateItems] = useState([]) // 日付とそのカウントを管理
+    const [loadingDates, setLoadingDates] = useState(false) // 日付データ取得中の状態
+
+    // 削除確認モーダルの状態管理
+    const [deleteOpen, setDeleteOpen] = useState(false) // 削除モーダルの開閉状態
+    const [deleting, setDeleting] = useState(false) // 削除処理中の状態
+    const [targetToDelete, setTargetToDelete] = useState(null) // 削除対象のデータ
+
+    // 完了状態の確認モーダルの状態管理
+    const [confirmOpen, setConfirmOpen] = useState(false) // 完了状態変更の確認モーダル
+    const [pendingToggleId, setPendingToggleId] = useState(null) // 完了状態変更対象のID
+
+    // データ取得用のuseEffect
+    // - dataSource が 'api' のとき、現在のフィルタ条件（検索, ライン, 完了状態, 日付）をクエリに変換し
+    //   /api/instructions に GET アクセスします。
+    // - レスポンスの配列（または data/items）を `normalizeInstruction` 経由で正規化します。
+    useEffect(() => {
+        if (dataSource !== 'api') {
+            // ローカルデータを使用する場合の処理
+            setError(null)
+            setLoading(false)
+            setInstructions(initialInstructions.map(normalizeInstruction))
+            setLines([])
+            return
+        }
+
+        const controller = new AbortController()
+        const run = async () => {
+            try {
+                setLoading(true)
+                setError(null)
+
+                // APIエンドポイントの構築
+                const base = process.env.NEXT_PUBLIC_BASE_PATH || ''
+                const params = new URLSearchParams()
+                if (search && search.trim()) params.set('q', search.trim())
+                if (line && line !== 'すべて') params.set('line', line)
+                if (completed === 'completed') params.set('is_completed', 'true')
+                else if (completed === 'not-completed') params.set('is_completed', 'false')
+                if (date) params.set('date', date)
+
+                const url = `${base}/api/instructions${params.toString() ? `?${params.toString()}` : ''}`
+                const res = await fetch(url, {
+                    method: 'GET',
+                    signal: controller.signal
+                })
+
+                if (!res.ok) {
+                    let detail = ''
+                    try { detail = (await res.text())?.slice(0, 200) } catch { }
+                    throw new Error(`APIエラー (${res.status}) ${detail}`)
+                }
+
+                const json = await res.json()
+                const list = Array.isArray(json) ? json : (json?.data || json?.items || [])
+                if (!Array.isArray(list)) throw new Error('APIのレスポンス形式が不正です')
+
+                setInstructions(list.map(normalizeInstruction)) // 正規化した指示データを状態にセット
+                setLastFetchedAt(new Date().toISOString()) // 最終取得日時を更新
+            } catch (e) {
+                if (e?.name === 'AbortError') return
+                setError(e?.message || 'データ取得に失敗しました')
+            } finally {
+                setLoading(false)
+            }
+        }
+
+        run()
+        return () => controller.abort()
+    }, [dataSource, reloadTick, search, line, completed, date])
+
+    // ライン選択肢を取得するuseEffect
+    // - `/api/lines` から候補を取得します。サーバーの応答形は一定でない可能性があるため、
+    //   配列または data/items のいずれかに対応しています。
+    useEffect(() => {
+        if (dataSource !== 'api') return
+        const controller = new AbortController()
+        const run = async () => {
+            try {
+                setLoadingLines(true)
+                const base = process.env.NEXT_PUBLIC_BASE_PATH || ''
+                const res = await fetch(`${base}/api/lines`, { method: 'GET', signal: controller.signal })
+                if (!res.ok) { setLines([]); return }
+                const json = await res.json()
+                const list = Array.isArray(json) ? json : (json?.data || json?.items || [])
+                setLines(Array.isArray(list) ? list : []) // ラインデータを状態にセット
+            } catch (e) {
+                if (e?.name === 'AbortError') return
+                setLines([])
+            } finally {
+                setLoadingLines(false)
+            }
+        }
+        run()
+        return () => controller.abort()
+    }, [dataSource])
+
+    // 利用可能な日付を取得するuseEffect
+    // - `/api/instructions/available-dates` から日付と件数を取得し、
+    //   [{ date: 'YYYY-MM-DD', count: number|null }, ...] の形式に正規化します。
+    useEffect(() => {
+        if (dataSource !== 'api') return
+        const controller = new AbortController()
+        const run = async () => {
+            try {
+                setLoadingDates(true)
+                const base = process.env.NEXT_PUBLIC_BASE_PATH || ''
+                const params = new URLSearchParams()
+                if (line && line !== 'すべて') params.set('line', line)
+                if (completed === 'completed') params.set('is_completed', 'true')
+                else if (completed === 'not-completed') params.set('is_completed', 'false')
+                params.set('order', 'asc')
+
+                const url = `${base}/api/instructions/available-dates${params.toString() ? `?${params.toString()}` : ''}`
+                const res = await fetch(url, { method: 'GET', signal: controller.signal })
+                if (!res.ok) { setAvailableDates([]); return }
+                const json = await res.json()
+                const list = Array.isArray(json) ? json : (json?.data || json?.items || [])
+                // 仕様変更対応: [{ date: 'YYYY-MM-DD', count: number }] を想定
+                const items = Array.isArray(list) ? list : []
+                const normalized = items.map(item => {
+                    if (typeof item === 'string') return { date: item, count: null }
+                    if (item && typeof item === 'object') return { date: String(item.date || ''), count: typeof item.count === 'number' ? item.count : null }
+                    return { date: '', count: null }
+                }).filter(i => i.date)
+                const asc = normalized.sort((a, b) => String(a.date).localeCompare(String(b.date)))
+                setAvailableDateItems(asc) // 正規化した日付データを状態にセット
+                setAvailableDates(asc.map(i => i.date)) // 日付リストを状態にセット
+            } catch (e) {
+                if (e?.name === 'AbortError') return
+                setAvailableDateItems([])
+                setAvailableDates([])
+            } finally {
+                setLoadingDates(false)
+            }
+        }
+        run()
+        return () => controller.abort()
+    }, [dataSource, line, completed, reloadTick])
+
+    // 初回表示時に、今日にもっとも近い利用可能日を自動選択（DB基準）
+    useEffect(() => {
+        if (dataSource !== 'api') return
+        if (!availableDateItems.length) return
+        if (date !== initialDateRef.current) return
+
+        const today = new Date()
+        today.setHours(0, 0, 0, 0)
+
+        const candidates = availableDateItems
+            .map(item => {
+                const candidateDate = item?.date
+                if (!candidateDate) return null
+                const parsed = new Date(`${candidateDate}T00:00:00`)
+                if (Number.isNaN(parsed.getTime())) return null
+                const time = parsed.getTime()
+                return {
+                    date: candidateDate,
+                    time,
+                    diff: Math.abs(time - today.getTime()),
+                    isFuture: time >= today.getTime()
+                }
+            })
+            .filter(Boolean)
+
+        if (!candidates.length) return
+
+        candidates.sort((a, b) => {
+            if (a.diff !== b.diff) return a.diff - b.diff
+            if (a.isFuture !== b.isFuture) return a.isFuture ? -1 : 1
+            if (a.isFuture) return a.time - b.time
+            return b.time - a.time
+        })
+
+        const closest = candidates[0]
+        if (closest && closest.date !== date) {
+            setDate(closest.date)
+        }
+    }, [availableDateItems, dataSource, date])
+
+    // 日付ナビゲーション
+    // - 現在の日付が availableDates に含まれない場合でも、
+    //   直近の前/後ろの日付へ移動できるように判定を行う。
+    //   例) availableDates = [01, 03], date = 02 のとき
+    //       prev = 01, next = 03 を有効にする。
+    const currentIndex = availableDates.findIndex(d => d === date)
+    let prevIndex = -1
+    let nextIndex = -1
+    if (currentIndex !== -1) {
+        // ちょうど一致
+        prevIndex = currentIndex - 1
+        nextIndex = currentIndex + 1
+    } else if (availableDates.length > 0 && date) {
+        // 挿入位置（初めて date より大きい位置）を探索し、そこを next とみなす
+        const firstGreaterIdx = availableDates.findIndex(d => String(d).localeCompare(String(date)) > 0)
+        if (firstGreaterIdx === -1) {
+            // すべて date 以下 → 最後が prev で next は無し
+            prevIndex = availableDates.length - 1
+            nextIndex = -1
+        } else {
+            // 見つかった位置が next、その一つ前が prev（存在すれば）
+            nextIndex = firstGreaterIdx
+            prevIndex = firstGreaterIdx - 1
+        }
+    }
+    const canPrev = prevIndex >= 0 && prevIndex < availableDates.length
+    const canNext = nextIndex >= 0 && nextIndex < availableDates.length
+    const handlePrevDate = () => { if (canPrev) setDate(availableDates[prevIndex]) }
+    const handleNextDate = () => { if (canNext) setDate(availableDates[nextIndex]) }
+
+    // ローカルデータモードではクライアント側でフィルタリング。
+    // APIモードではサーバから絞り込まれた結果が返る想定のため、そのまま表示します。
+    const filtered = useMemo(() => {
+        if (dataSource === 'api') return instructions
+        return instructions.filter(inst => {
+            const searchText = search.toLowerCase()
+            const textMatch = !searchText ||
+                inst.title.toLowerCase().includes(searchText) ||
+                (inst.destination && inst.destination.toLowerCase().includes(searchText)) ||
+                (inst.remarks && inst.remarks.toLowerCase().includes(searchText)) ||
+                (inst.note && inst.note.toLowerCase().includes(searchText))
+            const lineMatch = line === 'すべて' || inst.line === line
+            let completedMatch = true
+            if (completed === 'completed') completedMatch = inst.completed
+            else if (completed === 'not-completed') completedMatch = !inst.completed
+            const dateMatch = !date || (inst.createdAt && toLocalYmd(inst.createdAt).startsWith(date))
+            return textMatch && lineMatch && completedMatch && dateMatch
+        })
+    }, [dataSource, instructions, search, line, completed, date])
+
+    // 完了状態をサーバに反映する補助関数（失敗時はエラー表示とロールバック）
+    const updateCompletionOnServer = async (id, comp) => {
+        if (dataSource !== 'api' || !id) return
+        try {
+            setError(null)
+            const base = process.env.NEXT_PUBLIC_BASE_PATH || ''
+            const res = await fetch(`${base}/api/instructions/${encodeURIComponent(id)}`, {
+                method: 'PUT',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ is_completed: comp })
+            })
+            if (!res.ok) {
+                let detail = ''
+                try { detail = (await res.text())?.slice(0, 200) } catch { }
+                throw new Error(`更新に失敗しました (${res.status}) ${detail}`)
+            }
+            let updated = null
+            try { updated = await res.json() } catch { }
+            if (updated) {
+                setInstructions(prev => prev.map(inst => inst.id === id ? normalizeInstruction(updated) : inst))
+            }
+        } catch (e) {
+            setError(e?.message || '完了状態の更新に失敗しました')
+            setInstructions(prev => prev.map(inst => inst.id === id ? { ...inst, completed: !comp } : inst))
+        }
+    }
+
+    /**
+     * 完了トグルハンドラ。
+     * - 未完了→完了：即時にローカル反映し、紙吹雪アニメーションを再生。並行してサーバ更新。
+     * - 完了→未完了：安全のため確認モーダルを開き、確定は `confirmRevert` で行う。
+     * @param {string|number} id 変更対象ID
+     * @param {number} [clientX] クリック位置X（紙吹雪の原点補正に使用）
+     * @param {number} [clientY] クリック位置Y（紙吹雪の原点補正に使用）
+     */
+    const handleToggleComplete = (id, clientX, clientY) => {
+        const target = instructions.find(i => i.id === id)
+        if (!target) return
+        if (!target.completed) {
+            setInstructions(prev => prev.map(inst => inst.id === id ? { ...inst, completed: true } : inst))
+            let originX = 0.5
+            let originY = 0.2
+            if (typeof clientX === 'number' && typeof clientY === 'number') {
+                originX = Math.min(Math.max(clientX / window.innerWidth, 0), 1)
+                originY = Math.min(Math.max(clientY / window.innerHeight, 0), 1)
+            }
+            try { confetti({ particleCount: 150, spread: 80, origin: { x: originX, y: originY } }) } catch { }
+            updateCompletionOnServer(id, true)
+        } else {
+            setPendingToggleId(id)
+            setConfirmOpen(true)
+        }
+    }
+
+    // 完了→未完了の確定と取消（モーダル操作）
+    const confirmRevert = () => {
+        if (pendingToggleId == null) return
+        const id = pendingToggleId
+        // 先にローカルへ反映
+        setInstructions(prev => prev.map(inst => inst.id === id ? { ...inst, completed: false } : inst))
+        setPendingToggleId(null)
+        setConfirmOpen(false)
+        // サーバーへも反映（失敗時は updateCompletionOnServer 内でロールバック）
+        updateCompletionOnServer(id, false)
+    }
+    const cancelRevert = () => { setPendingToggleId(null); setConfirmOpen(false) }
+
+    // 編集開始・削除開始
+    const handleEdit = inst => { setForm(inst); setEditMode(true); setModalOpen(true) }
+    const handleRequestDelete = inst => { setTargetToDelete(inst); setDeleteOpen(true) }
+    const handleCancelDelete = () => { setTargetToDelete(null); setDeleteOpen(false) }
+
+    // 削除の確定（API/ローカルそれぞれに対応）
+    const handleConfirmDelete = async () => {
+        if (!targetToDelete) return
+        const id = targetToDelete.id
+        if (!id && dataSource === 'api') { setTargetToDelete(null); setDeleteOpen(false); return }
+        if (dataSource === 'api') {
+            try {
+                setDeleting(true)
+                setError(null)
+                const base = process.env.NEXT_PUBLIC_BASE_PATH || ''
+                const res = await fetch(`${base}/api/instructions/${encodeURIComponent(id)}`, { method: 'DELETE' })
+                if (!res.ok) {
+                    let detail = ''
+                    try { detail = (await res.text())?.slice(0, 200) } catch { }
+                    throw new Error(`削除に失敗しました (${res.status}) ${detail}`)
+                }
+                setInstructions(prev => prev.filter(i => i.id !== id))
+            } catch (e) {
+                setError(e?.message || '削除に失敗しました')
+            } finally {
+                setDeleting(false)
+                setTargetToDelete(null)
+                setDeleteOpen(false)
+            }
+        } else {
+            setInstructions(prev => prev.filter(i => i.id !== id))
+            setTargetToDelete(null)
+            setDeleteOpen(false)
+        }
+    }
+
+    // 新規追加開始（ライン初期値は API モード時に候補の先頭、ローカル時は 'マット'）
+    const handleAdd = () => {
+        const defaultLine = (dataSource === 'api' && lines?.length > 0)
+            ? (lines[0]?.line_name || '')
+            : 'マット'
+        setForm({ id: '', productName: '', size: '', title: '', line: defaultLine, completed: false, remarks: '', color: '', shippingMethod: '', destination: '', includedItems: '', springType: '', quantity: 1 })
+        setEditMode(false)
+        setModalOpen(true)
+    }
+
+    // 作成/更新の保存（API/ローカルに対応）
+    const handleSave = async () => {
+        if (!form.productName && !form.title) return
+        // 入力がproductName/sizeのときは表示用タイトルを合成
+        const computedTitle = form.productName ? ([form.productName, form.size].filter(Boolean).join(' ').trim()) : form.title
+        // createdAtはタイムゾーンオフセット付きISO文字列に揃える
+        const createdAtIso = toOffsetIso(form.createdAt) || toOffsetIso(new Date())
+
+        const toSave = {
+            ...form,
+            title: computedTitle,
+            productName: form.productName,
+            size: form.size,
+            springType: form.springType || null,
+            includedItems: form.includedItems || form.note || null,
+            shippingMethod: form.shippingMethod || null,
+            quantity: typeof form.quantity === 'number' ? form.quantity : Number(form.quantity || 0),
+            createdAt: createdAtIso
+        }
+
+        if (editMode) {
+            if (dataSource === 'api') {
+                try {
+                    setSaving(true)
+                    setError(null)
+                    const base = process.env.NEXT_PUBLIC_BASE_PATH || ''
+                    // 編集前の既存日付(YYYY-MM-DD) と フォームでの指定日付を保持
+                    const prevInst = instructions.find(i => i.id === form.id)
+                    const prevYmd = toLocalYmd(prevInst?.createdAt)
+                    const formYmd = toLocalYmd(toOffsetIso(form.createdAt))
+                    const payload = {
+                        line: form.line || 'その他',
+                        product_name: form.productName || form.title || '',
+                        size: form.size || '',
+                        quantity: typeof form.quantity === 'number' ? form.quantity : Number(form.quantity || 0),
+                        remarks: form.remarks || ''
+                    }
+                    if (form.color) payload.color = form.color
+                    if (form.springType) payload.spring_type = form.springType
+                    if (form.includedItems || form.note) payload.included_items = form.includedItems || form.note
+                    if (form.shippingMethod) payload.shipping_method = form.shippingMethod
+                    if (form.destination) payload.destination = form.destination
+                    if (createdAtIso) payload.created_at = createdAtIso
+
+                    const url = `${base}/api/instructions/${encodeURIComponent(form.id)}`
+                    if (process.env.NODE_ENV !== 'production') {
+                        console.log('[shipping-instructions][update] URL:', url)
+                        console.log('[shipping-instructions][update] payload:', payload)
+                    }
+                    const res = await fetch(url, {
+                        method: 'PUT',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify(payload)
+                    })
+                    if (process.env.NODE_ENV !== 'production') {
+                        console.log('[shipping-instructions][update] response status:', res.status)
+                    }
+                    if (!res.ok) {
+                        let detail = ''
+                        try { detail = (await res.text())?.slice(0, 200) } catch { }
+                        if (process.env.NODE_ENV !== 'production') {
+                            console.log('[shipping-instructions][update] error body:', detail)
+                        }
+                        throw new Error(`更新に失敗しました (${res.status}) ${detail}`)
+                    }
+                    let updated
+                    try { updated = await res.json() } catch { updated = null }
+                    if (process.env.NODE_ENV !== 'production') {
+                        console.log('[shipping-instructions][update] response body:', updated)
+                    }
+                    const normalized = updated ? normalizeInstruction(updated) : { ...toSave }
+                    setInstructions(prev => prev.map(inst => inst.id === form.id ? { ...inst, ...normalized } : inst))
+                    setModalOpen(false)
+                    // 編集時: ユーザーが日付を変更した場合のみ、その日付ページへ移動
+                    const newYmd = toLocalYmd(normalized.createdAt || createdAtIso)
+                    if (formYmd && formYmd !== prevYmd) {
+                        setDate(newYmd)
+                    }
+                    setReloadTick(t => t + 1)
+                } catch (e) {
+                    setError(e?.message || '更新に失敗しました')
+                } finally {
+                    setSaving(false)
+                }
+            } else {
+                const prevInst = instructions.find(i => i.id === form.id)
+                const prevYmd = toLocalYmd(prevInst?.createdAt)
+                const formYmd = toLocalYmd(toOffsetIso(form.createdAt))
+                const next = { ...toSave }
+                setInstructions(prev => prev.map(inst => inst.id === form.id ? { ...inst, ...next } : inst))
+                setModalOpen(false)
+                const newYmd = toLocalYmd(next.createdAt)
+                if (formYmd && formYmd !== prevYmd) {
+                    setDate(newYmd)
+                }
+            }
+        } else {
+            if (dataSource === 'api') {
+                try {
+                    setSaving(true)
+                    setError(null)
+                    const base = process.env.NEXT_PUBLIC_BASE_PATH || ''
+                    const payload = {
+                        line: form.line || 'その他',
+                        product_name: form.productName || form.title || '',
+                        size: form.size || '',
+                        quantity: typeof form.quantity === 'number' ? form.quantity : Number(form.quantity || 0),
+                        remarks: form.remarks || ''
+                    }
+                    if (form.color) payload.color = form.color
+                    if (form.springType) payload.spring_type = form.springType
+                    if (form.includedItems || form.note) payload.included_items = form.includedItems || form.note
+                    if (form.shippingMethod) payload.shipping_method = form.shippingMethod
+                    if (form.destination) payload.destination = form.destination
+                    if (createdAtIso) payload.created_at = createdAtIso
+                    const url = `${base}/api/instructions`
+                    if (process.env.NODE_ENV !== 'production') {
+                        console.log('[shipping-instructions][create] URL:', url)
+                        console.log('[shipping-instructions][create] payload:', payload)
+                    }
+
+                    const res = await fetch(url, {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify(payload)
+                    })
+                    if (process.env.NODE_ENV !== 'production') {
+                        console.log('[shipping-instructions][create] response status:', res.status)
+                    }
+                    if (!res.ok) {
+                        let detail = ''
+                        try { detail = (await res.text())?.slice(0, 200) } catch { }
+                        if (process.env.NODE_ENV !== 'production') {
+                            console.log('[shipping-instructions][create] error body:', detail)
+                        }
+                        throw new Error(`作成に失敗しました (${res.status}) ${detail}`)
+                    }
+                    const created = await res.json()
+                    if (process.env.NODE_ENV !== 'production') {
+                        console.log('[shipping-instructions][create] response body:', created)
+                    }
+                    let normalized = normalizeInstruction(created)
+
+                    // フォールバック: 作成時に任意項目が無視された場合、直後に PUT で差分を反映
+                    try {
+                        const patchPayload = {}
+                        // 送ったが null/不一致で戻ってきた項目のみパッチ
+                        if (payload.color && (created.color == null || created.color !== payload.color)) patchPayload.color = payload.color
+                        if (payload.spring_type && (created.spring_type == null || created.spring_type !== payload.spring_type)) patchPayload.spring_type = payload.spring_type
+                        if ((payload.included_items ?? null) && (created.included_items == null || created.included_items !== payload.included_items)) patchPayload.included_items = payload.included_items
+                        if (payload.shipping_method && (created.shipping_method == null || created.shipping_method !== payload.shipping_method)) patchPayload.shipping_method = payload.shipping_method
+                        if (payload.destination && (created.destination == null || created.destination !== payload.destination)) patchPayload.destination = payload.destination
+                        // created_at はUTCに正規化されて返る想定のためパッチ対象外
+
+                        const hasPatch = Object.keys(patchPayload).length > 0
+                        if (hasPatch) {
+                            const patchUrl = `${base}/api/instructions/${encodeURIComponent(created.id)}`
+                            if (process.env.NODE_ENV !== 'production') {
+                                console.log('[shipping-instructions][create->patch] URL:', patchUrl)
+                                console.log('[shipping-instructions][create->patch] payload:', patchPayload)
+                            }
+                            const patchRes = await fetch(patchUrl, {
+                                method: 'PUT',
+                                headers: { 'Content-Type': 'application/json' },
+                                body: JSON.stringify(patchPayload)
+                            })
+                            if (process.env.NODE_ENV !== 'production') {
+                                console.log('[shipping-instructions][create->patch] response status:', patchRes.status)
+                            }
+                            if (patchRes.ok) {
+                                let patched
+                                try { patched = await patchRes.json() } catch { patched = null }
+                                if (process.env.NODE_ENV !== 'production') {
+                                    console.log('[shipping-instructions][create->patch] response body:', patched)
+                                }
+                                if (patched) {
+                                    normalized = normalizeInstruction(patched)
+                                }
+                            } else {
+                                let patchDetail = ''
+                                try { patchDetail = (await patchRes.text())?.slice(0, 200) } catch {}
+                                if (process.env.NODE_ENV !== 'production') {
+                                    console.warn('[shipping-instructions][create->patch] failed:', patchDetail)
+                                }
+                            }
+                        }
+                    } catch (patchErr) {
+                        if (process.env.NODE_ENV !== 'production') {
+                            console.warn('[shipping-instructions][create->patch] error:', patchErr)
+                        }
+                    }
+
+                    setInstructions(prev => [...prev, normalized])
+                    setModalOpen(false)
+                    const ymd = toLocalYmd(normalized.createdAt || createdAtIso)
+                    if (ymd) setDate(ymd)
+                    setReloadTick(t => t + 1)
+                } catch (e) {
+                    if (process.env.NODE_ENV !== 'production') {
+                        console.error('[shipping-instructions][create] error:', e)
+                    }
+                    setError(e?.message || '作成に失敗しました')
+                } finally {
+                    setSaving(false)
+                }
+            } else {
+                const newId = Math.max(...instructions.map(i => i.id), 0) + 1
+                const added = { ...toSave, id: newId }
+                setInstructions(prev => [...prev, added])
+                setModalOpen(false)
+                const ymd = toLocalYmd(added.createdAt)
+                if (ymd) setDate(ymd)
+            }
+        }
+    }
+
+    /** フォームの共通 onChange ハンドラ（quantity は数値に正規化） */
+    const handleFormChange = e => {
+        const { name, value } = e.target
+        if (name === 'quantity') {
+            setForm(prev => ({ ...prev, [name]: value === '' ? '' : Number(value) }))
+            return
+        }
+        setForm(prev => ({ ...prev, [name]: value }))
+    }
+
+    // Calendar modal state
+    const [calendarOpen, setCalendarOpen] = useState(false)
+
+    return {
+        state: {
+            instructions, dataSource, loading, error, lastFetchedAt, reloadTick, search, line, completed, date,
+            modalOpen, form, editMode, saving, lines, loadingLines, availableDates, availableDateItems, loadingDates, deleteOpen, deleting, targetToDelete,
+            confirmOpen, pendingToggleId, calendarOpen
+        },
+        derived: {
+            filtered, canPrev, canNext
+        },
+        actions: {
+            setDataSource, setSearch, setLine, setCompleted, setDate, setModalOpen, setForm, setEditMode,
+            setDeleteOpen, setTargetToDelete,
+            handlePrevDate, handleNextDate,
+            handleToggleComplete, confirmRevert, cancelRevert,
+            handleEdit, handleRequestDelete, handleCancelDelete, handleConfirmDelete,
+            handleAdd, handleSave, handleFormChange,
+            setCalendarOpen
+        }
+    }
+}
\ No newline at end of file
diff --git a/javascript-version/src/app/(dashboard)/shipping-instructions/page.jsx b/javascript-version/src/app/(dashboard)/shipping-instructions/page.jsx
new file mode 100644
index 000000000..8f127157f
--- /dev/null
+++ b/javascript-version/src/app/(dashboard)/shipping-instructions/page.jsx
@@ -0,0 +1,132 @@
+/*
+======== ファイル概要 ========
+製造出荷指示一覧ページのトップレベルコンポーネント。フィルターバーと指示カード、各種モーダルを束ね
+ており、このファイルから useShippingInstructions フックの状態とアクションを UI へ受け渡します。
+*/
+
+'use client'
+
+import Grid from '@mui/material/Grid'
+import Card from '@mui/material/Card'
+import Typography from '@mui/material/Typography'
+import Fab from '@mui/material/Fab'
+import AddIcon from '@mui/icons-material/Add'
+import useAuthMe from '@core/hooks/useAuthMe'
+
+import FilterBar from './components/FilterBar'
+import ShippingInstructionCard from './components/ShippingInstructionCard'
+import InstructionModal from './components/InstructionModal'
+import ConfirmRevertDialog from './components/ConfirmRevertDialog'
+import ConfirmDeleteDialog from './components/ConfirmDeleteDialog'
+import CalendarModal from './components/CalendarModal'
+
+import useShippingInstructions from './hooks/useShippingInstructions'
+import { completedOptions, lineOptions } from './data/sampleInitialInstructions'
+
+/**
+ * 製造出荷指示一覧ページ。
+ * @returns {JSX.Element}                                  製造指示の一覧と操作モーダルを含むページ全体。
+ */
+const ShippingInstructions = () => {
+  const { isAdmin } = useAuthMe()
+  const { state, derived, actions } = useShippingInstructions()
+
+  const {
+    dataSource, search, line, completed, date, lines, loadingLines,
+    modalOpen, form, editMode, saving,
+    deleteOpen, targetToDelete,
+    confirmOpen,
+    calendarOpen,
+    availableDateItems
+  } = state
+
+  const { filtered, canPrev, canNext } = derived
+
+  const {
+    setSearch, setLine, setCompleted, setDate,
+    handlePrevDate, handleNextDate,
+    handleToggleComplete, handleEdit, handleRequestDelete,
+    handleAdd, handleSave, handleFormChange,
+    handleCancelDelete, handleConfirmDelete,
+    cancelRevert, confirmRevert,
+    setCalendarOpen
+  } = actions
+
+  // ======== 処理ステップ: フィルター反映 → カード一覧 → 管理モーダル群 ========
+  // 1. フィルタ条件をヘッダーにまとめ、ユーザーが検索条件を即座に操作できるようにする。
+  // 2. 絞り込み済みデータをカードとして並べ、ゼロ件時は案内カードでフォローする。
+  // 3. 追加・編集・削除・日付選択の各モーダルを末尾に配置し、状態変化を一元管理する。
+
+  return (
+    <>
+      <FilterBar
+        search={search}
+        onSearchChange={setSearch}
+        line={line}
+        onLineChange={setLine}
+        completed={completed}
+        onCompletedChange={setCompleted}
+        date={date}
+        onDateChange={setDate}
+        onPrevDate={handlePrevDate}
+        onNextDate={handleNextDate}
+        canPrev={canPrev}
+        canNext={canNext}
+        lineOptions={(dataSource === 'api'
+          ? [{ value: 'すべて', label: 'すべて' }, ...(lines?.map(l => ({ value: l.line_name, label: l.line_name })) || [])]
+          : lineOptions)}
+        completedOptions={completedOptions}
+        loadingLines={dataSource === 'api' ? loadingLines : false}
+        onOpenCalendar={() => setCalendarOpen(true)}
+      />
+
+      <Grid container spacing={3} alignItems='stretch'>
+        {filtered.length === 0 ? (
+          <Grid item xs={12}>
+            <Card sx={{ p: 4, textAlign: 'center', borderRadius: 3 }}>
+              <Typography variant='h6' color='text.secondary' sx={{ mb: 1 }}>該当する指示が見つかりませんでした。</Typography>
+              <Typography variant='body2' color='text.disabled'>検索条件を変更して、もう一度お試しください。</Typography>
+            </Card>
+          </Grid>
+        ) : (
+          filtered.map(inst => (
+            <Grid item xs={12} sm={6} md={4} xl={3} key={inst.id} sx={{ display: 'flex' }}>
+              <ShippingInstructionCard instruction={inst} onToggleComplete={handleToggleComplete} onEdit={handleEdit} onDelete={handleRequestDelete} />
+            </Grid>
+          ))
+        )}
+      </Grid>
+
+      {isAdmin && (
+        <Fab color='primary' aria-label='add' sx={{ position: 'fixed', bottom: 32, right: 32, zIndex: 1000 }} onClick={handleAdd}>
+          <AddIcon fontSize='large' />
+        </Fab>
+      )}
+
+      <InstructionModal
+        open={modalOpen}
+        onClose={() => actions.setModalOpen(false)}
+        onSave={handleSave}
+        editMode={editMode}
+        form={form}
+        onFormChange={handleFormChange}
+        lineOptions={(state.dataSource === 'api' ? (lines?.map(l => ({ value: l.line_name, label: l.line_name })) || []) : lineOptions)}
+        saving={saving}
+      />
+
+      <ConfirmRevertDialog open={confirmOpen} onCancel={cancelRevert} onConfirm={confirmRevert} />
+      <ConfirmDeleteDialog open={deleteOpen} onCancel={handleCancelDelete} onConfirm={handleConfirmDelete} itemTitle={targetToDelete?.title || targetToDelete?.productName} />
+
+      <CalendarModal
+        open={calendarOpen}
+        onClose={() => setCalendarOpen(false)}
+        onSelect={(d) => { setDate(d); setCalendarOpen(false) }}
+        items={availableDateItems}
+        selectedDate={date}
+      />
+    </>
+  )
+}
+
+export default ShippingInstructions
+
diff --git a/javascript-version/src/app/(dashboard)/shipping-instructions/utils/index.js b/javascript-version/src/app/(dashboard)/shipping-instructions/utils/index.js
new file mode 100644
index 000000000..9e414815e
--- /dev/null
+++ b/javascript-version/src/app/(dashboard)/shipping-instructions/utils/index.js
@@ -0,0 +1,108 @@
+/*
+======== ファイル概要 ========
+出荷指示データの正規化と日付フォーマット変換を担うユーティリティ群。API 応答のばらつきを吸収し、UI
+が扱いやすい形へ揃えます。
+*/
+
+// 共通ユーティリティ（正規化・日付関連）
+
+/**
+ * API のばらつきあるフィールドを UI で扱いやすい形に正規化する。
+ * @param {object} apiItem - API から受け取った指示レコード。
+ * @returns {object}       - 正規化後の指示レコード。
+ */
+export function normalizeInstruction(apiItem) {
+    const id = apiItem.id
+    const line = apiItem.line || apiItem.line_name || 'その他'
+
+    const productName = apiItem.product_name || apiItem.title || ''
+    const size = apiItem.size || apiItem.spec || ''
+    const title = [productName, size].filter(Boolean).join(' ').trim() || productName || apiItem.title || ''
+
+    const productNameField = productName
+    const sizeField = size
+    const springType = apiItem.spring_type || apiItem.springType || null
+    const includedItems = apiItem.included_items || apiItem.includedItems || null
+
+    const completed = typeof apiItem.is_completed === 'boolean' ? apiItem.is_completed : (apiItem.completed === true)
+
+    const color = apiItem.color || ''
+    const shippingMethod = apiItem.shipping_method || apiItem.shippingMethod || apiItem.shippingMethodName || ''
+    const destination = apiItem.destination || ''
+    const remarks = apiItem.remarks || ''
+    const note = apiItem.included_items || apiItem.note || ''
+    const quantity = typeof apiItem.quantity === 'number' ? apiItem.quantity : (apiItem.qty ? Number(apiItem.qty) : (apiItem.quantity || 0))
+    const createdAt = apiItem.created_at || apiItem.createdAt || null
+
+    return { id, line, title, completed, color, shippingMethod, destination, remarks, note, quantity, createdAt, productName: productNameField, size: sizeField, springType, includedItems }
+}
+
+/**
+ * ローカルタイムゾーンの YYYY-MM-DD を返す。
+ * @param {Date} [dateObj=new Date()] - 基準となる日付。
+ * @returns {string}                  - YYYY-MM-DD 形式。
+ */
+export function formatLocalYmd(dateObj = new Date()) {
+    const y = dateObj.getFullYear()
+    const m = String(dateObj.getMonth() + 1).padStart(2, '0')
+    const d = String(dateObj.getDate()).padStart(2, '0')
+    return `${y}-${m}-${d}`
+}
+
+/**
+ * datetime-local 文字列や Date/ISO をローカルオフセット付き ISO へ変換する。
+ * 例: 2025-10-17T10:30 -> 2025-10-17T10:30:00+09:00
+ * @param {string|Date} input - 変換対象。
+ * @returns {string|null}     - オフセット付き ISO。失敗時は null。
+ */
+export function toOffsetIso(input) {
+    if (!input) return null
+    let d
+    if (typeof input === 'string') {
+        if (/^\d{4}-\d{2}-\d{2}$/.test(input)) {
+            const [y, m, day] = input.split('-').map(Number)
+            d = new Date(y, (m || 1) - 1, day || 1, 0, 0, 0)
+        } else if (/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}$/.test(input)) {
+            d = new Date(input)
+        } else if (/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}$/.test(input)) {
+            d = new Date(input)
+        } else {
+            d = new Date(input)
+        }
+    } else {
+        d = new Date(input)
+    }
+    if (isNaN(d.getTime())) return null
+    const pad = n => String(n).padStart(2, '0')
+    const yyyy = d.getFullYear()
+    const mm = pad(d.getMonth() + 1)
+    const dd = pad(d.getDate())
+    const HH = pad(d.getHours())
+    const MM = pad(d.getMinutes())
+    const SS = pad(d.getSeconds())
+    const tzMin = -d.getTimezoneOffset()
+    const sign = tzMin >= 0 ? '+' : '-'
+    const abs = Math.abs(tzMin)
+    const tzh = pad(Math.floor(abs / 60))
+    const tzm = pad(abs % 60)
+    return `${yyyy}-${mm}-${dd}T${HH}:${MM}:${SS}${sign}${tzh}:${tzm}`
+}
+
+/**
+ * ISO 文字列や Date からローカルタイムゾーンの YYYY-MM-DD へ変換する。
+ * @param {string|Date} input - 変換対象。
+ * @returns {string}          - YYYY-MM-DD 形式。失敗時は空文字。
+ */
+export function toLocalYmd(input) {
+    if (!input) return ''
+    let d
+    if (typeof input === 'string') {
+        // すでに YYYY-MM-DD ならそのまま返す
+        if (/^\d{4}-\d{2}-\d{2}$/.test(input)) return input
+        d = new Date(input)
+    } else {
+        d = new Date(input)
+    }
+    if (isNaN(d.getTime())) return ''
+    return formatLocalYmd(d)
+}
\ No newline at end of file
diff --git a/javascript-version/src/app/(dashboard)/sse-monitoring/page.jsx b/javascript-version/src/app/(dashboard)/sse-monitoring/page.jsx
new file mode 100644
index 000000000..809078d0e
--- /dev/null
+++ b/javascript-version/src/app/(dashboard)/sse-monitoring/page.jsx
@@ -0,0 +1,489 @@
+'use client'
+
+/*
+======== ファイル概要 ========
+SSEで配信される検査イベントをリアルタイムで監視するためのページコンポーネント。
+接続状態の可視化・自動再接続・イベントログ表示までを一括で面倒見るよ。
+*/
+
+import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+
+import Alert from '@mui/material/Alert'
+import Box from '@mui/material/Box'
+import Button from '@mui/material/Button'
+import Card from '@mui/material/Card'
+import CardContent from '@mui/material/CardContent'
+import CardHeader from '@mui/material/CardHeader'
+import Chip from '@mui/material/Chip'
+import Divider from '@mui/material/Divider'
+import Grid from '@mui/material/Grid'
+import List from '@mui/material/List'
+import ListItem from '@mui/material/ListItem'
+import Stack from '@mui/material/Stack'
+import Typography from '@mui/material/Typography'
+
+const EVENT_STREAM_PATH = '/api/events'
+const DEFAULT_BACKEND_PORT = process.env.NEXT_PUBLIC_BACKEND_PORT || '3001'
+const CONFIG_BACKEND_HOST = process.env.NEXT_PUBLIC_BACKEND_HOST || null
+const CONFIG_BACKEND_PROTOCOL = process.env.NEXT_PUBLIC_BACKEND_PROTOCOL || null
+const CONFIG_API_BASE = process.env.NEXT_PUBLIC_API_BASE || null
+
+/**
+ * サーバー送信イベント(SSE)の購読を司るカスタムフックだよ。
+ * @param {object}   params              - フックに渡すパラメータ袋。
+ * @param {string}   params.streamUrl    - 監視対象のSSEエンドポイントURL。
+ * @param {Function} params.onEvent      - イベント受信時に呼ぶコールバック。
+ * @param {Function} params.onConnecting - 接続開始直前に呼ぶコールバック。
+ * @param {Function} params.onOpen       - 接続確立後に呼ぶコールバック。
+ * @param {Function} params.onError      - エラー発生時に呼ぶコールバック。
+ * @param {Function} params.onConnectionInfo - 接続関連の追加情報を渡すコールバック。
+ * @param {number}   params.retryToken   - 再接続トリガーとして使う外部カウンタ。
+ */
+const useInspectionEvents = ({
+  streamUrl,
+  onEvent,
+  onConnecting,
+  onOpen,
+  onError,
+  onConnectionInfo,
+  retryToken
+}) => {
+  useEffect(() => {
+    // ======== 処理ステップ: コールバック検査 → SSE生成 → イベント結線 → クリーンアップ ========
+    // 1. コールバックとURLが揃っていないと正常監視できないので即リターンで無用な接続を避ける。
+    if (!onEvent || !streamUrl) {
+      return undefined
+    }
+
+    // 2. 接続開始を親へ通知しローディング表示などを準備させる。
+    onConnecting?.()
+
+    let source
+
+    try {
+      // 3. withCredentialsを有効化してCookie認証が必要な環境にも対応してる。
+      source = new EventSource(streamUrl, { withCredentials: true })
+    } catch (error) {
+      console.error('SSE 初期化エラー', error)
+      onError?.(error)
+      onConnectionInfo?.({
+        streamUrl,
+        initializationFailed: true
+      })
+
+      return undefined
+    }
+
+    try {
+      // 4. EventSource内部のURLは文字列扱いなので、新たにURLオブジェクトで分解して接続先を可視化している。
+      const resolvedUrl = new URL(source.url)
+      const protocol = resolvedUrl.protocol.replace(':', '')
+      const defaultPort = protocol === 'https' ? '443' : protocol === 'http' ? '80' : null
+
+      onConnectionInfo?.({
+        streamUrl,
+        url: resolvedUrl.toString(),
+        origin: resolvedUrl.origin,
+        host: resolvedUrl.hostname,
+        port: resolvedUrl.port || null,
+        defaultPort,
+        protocol,
+        path: resolvedUrl.pathname + resolvedUrl.search,
+        withCredentials: source.withCredentials ?? true,
+        initializationFailed: false
+      })
+    } catch (error) {
+      onConnectionInfo?.({
+        streamUrl,
+        url: source.url,
+        withCredentials: source.withCredentials ?? true,
+        initializationFailed: false
+      })
+    }
+
+    source.onopen = () => {
+      // 接続復活がログに反映されるようタイムスタンプも共有するよ。
+      onOpen?.()
+      onConnectionInfo?.({
+        openedAt: new Date().toISOString(),
+        disconnectedAt: null
+      })
+    }
+
+    source.onmessage = event => {
+      // SSE本文はJSON前提だからparseしてから上位へ渡す。
+      try {
+        const data = JSON.parse(event.data)
+        onEvent(data)
+      } catch (error) {
+        console.error('イベント解析エラー', error)
+      }
+    }
+
+    source.onerror = error => {
+      // 一度エラーが起きると接続は基本閉じる想定。ここで即closeして再接続制御に委ねる。
+      console.error('SSE 接続エラー', error)
+      onError?.(error)
+      onConnectionInfo?.({
+        disconnectedAt: new Date().toISOString()
+      })
+      source.close()
+    }
+
+    return () => {
+      // クリーンアップでEventSourceを閉じてリークを防ぐ。
+      source?.close()
+    }
+  }, [streamUrl, onConnecting, onOpen, onEvent, onError, onConnectionInfo, retryToken])
+}
+
+const statusChipConfig = {
+  connecting: { label: '接続中', color: 'warning' },
+  open: { label: '受信中', color: 'success' },
+  retrying: { label: '再接続待機中', color: 'warning' },
+  error: { label: '切断', color: 'error' }
+}
+
+const SSEMonitoringPage = () => {
+  const basePath = process.env.NEXT_PUBLIC_BASE_PATH || ''
+  const [events, setEvents] = useState([])
+  const [status, setStatus] = useState('connecting')
+  const [errorMessage, setErrorMessage] = useState(null)
+  const [retryToken, setRetryToken] = useState(0)
+  const [connectionInfo, setConnectionInfo] = useState(null)
+  const [retryAttempt, setRetryAttempt] = useState(0)
+  const [nextRetryInMs, setNextRetryInMs] = useState(null)
+  const isClient = typeof window !== 'undefined'
+  const reconnectTimeoutRef = useRef(null)
+  const retryAttemptRef = useRef(0)
+
+  const streamUrl = useMemo(() => {
+    // ======== 処理ステップ: APIベース確認 → プロトコル・ホスト推定 → URL組み立て ========
+    // 1. NEXT_PUBLIC_API_BASE があればそちらを優先し、リバースプロキシ経由でも確実にアクセスできるようにする。
+    const trimmedApiBase = CONFIG_API_BASE ? CONFIG_API_BASE.replace(/\/$/, '') : null
+
+    if (trimmedApiBase) {
+      return `${trimmedApiBase}${EVENT_STREAM_PATH}`
+    }
+
+    // 2. プロトコルは環境変数 > window.location > http の順で決める。BFFやサブドメイン構成でも破綻しにくい。
+    const protocolSource = CONFIG_BACKEND_PROTOCOL
+      ? CONFIG_BACKEND_PROTOCOL.replace(/:/g, '')
+      : isClient
+        ? window.location.protocol.replace(':', '')
+        : 'http'
+
+    const protocol = (protocolSource || 'http').toLowerCase()
+
+    // 3. ホストは設定値が無いときブラウザホストを使って、ローカル/本番のどちらでも同じコードで動かす。
+    const host = CONFIG_BACKEND_HOST || (isClient ? window.location.hostname : 'localhost')
+
+    const portSegment = DEFAULT_BACKEND_PORT ? `:${DEFAULT_BACKEND_PORT}` : ''
+
+    return `${protocol}://${host}${portSegment}${EVENT_STREAM_PATH}`
+  }, [isClient])
+
+  const clearScheduledReconnect = useCallback(() => {
+    // 既存のタイマーを確実に消して多重再接続を防ぐ。
+    if (reconnectTimeoutRef.current) {
+      clearTimeout(reconnectTimeoutRef.current)
+      reconnectTimeoutRef.current = null
+    }
+    setNextRetryInMs(null)
+  }, [])
+
+  const scheduleReconnect = useCallback(() => {
+    clearScheduledReconnect()
+
+    retryAttemptRef.current += 1
+    setRetryAttempt(retryAttemptRef.current)
+
+    // Exponential backoff capped at 30 seconds keeps retry cadence sane even when the backend flaps
+    const baseDelay = 2000
+    const maxDelay = 30000
+    const computedDelay = Math.min(maxDelay, baseDelay * 2 ** (retryAttemptRef.current - 1))
+
+    setStatus('retrying')
+    setNextRetryInMs(computedDelay)
+
+    reconnectTimeoutRef.current = setTimeout(() => {
+      // setTimeout経由でretryTokenを更新するとuseEffectが再評価されて再接続が走る。
+      setRetryToken(token => token + 1)
+    }, computedDelay)
+  }, [clearScheduledReconnect])
+
+  const handleConnecting = useCallback(() => {
+    // 明示的にエラーメッセージを消してユーザーの混乱を防ぐ。
+    clearScheduledReconnect()
+    setStatus('connecting')
+    setErrorMessage(null)
+  }, [clearScheduledReconnect])
+
+  const handleOpen = useCallback(() => {
+    // 接続成功したら試行回数をリセットし、UIも正常状態へ戻す。
+    clearScheduledReconnect()
+    retryAttemptRef.current = 0
+    setRetryAttempt(0)
+    setStatus('open')
+    setErrorMessage(null)
+  }, [clearScheduledReconnect])
+
+  const handleEvent = useCallback(payload => {
+    // 最新イベントを先頭に積んで最大100件まで保持し、古いログが溢れすぎないようにする。
+    setEvents(prev => {
+      const eventEntry = {
+        id: `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
+        receivedAt: new Date().toISOString(),
+        payload
+      }
+
+      const next = [eventEntry, ...prev]
+
+      return next.slice(0, 100)
+    })
+  }, [])
+
+  const handleError = useCallback(() => {
+    // エラー時は再試行を誘発しつつ告知文を表示。
+    setStatus('error')
+    setErrorMessage('SSE接続でエラーが発生しました。ブラウザのコンソールログを確認してください。')
+    scheduleReconnect()
+  }, [scheduleReconnect])
+
+  const handleConnectionInfo = useCallback(update => {
+    // connectionInfoはオブジェクトをマージして履歴的な項目も残す。
+    setConnectionInfo(prev => ({ ...(prev || {}), ...update }))
+  }, [])
+
+  useInspectionEvents({
+    streamUrl,
+    onEvent: handleEvent,
+    onConnecting: handleConnecting,
+    onOpen: handleOpen,
+    onError: handleError,
+    onConnectionInfo: handleConnectionInfo,
+    retryToken
+  })
+
+  const latestEventTime = events[0]?.receivedAt
+
+  const formattedLatestEventTime = useMemo(() => {
+    if (!latestEventTime) {
+      return '未受信'
+    }
+
+    const date = new Date(latestEventTime)
+
+    return `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`
+  }, [latestEventTime])
+
+  const connectionDisplay = useMemo(() => {
+    // ======== 処理ステップ: フォールバック確保 → ラベル整形 → 表示用オブジェクト生成 ========
+    // ビルド時はwindowが無いからフォールバックを用意してSSRでも落ちないようにしているよ。
+    const hasWindow = typeof window !== 'undefined'
+    const fallbackHost = CONFIG_BACKEND_HOST || (hasWindow ? window.location.hostname : 'localhost')
+    const fallbackProtocol = CONFIG_BACKEND_PROTOCOL
+      ? CONFIG_BACKEND_PROTOCOL.replace(/:/g, '').toUpperCase()
+      : hasWindow
+        ? window.location.protocol.replace(':', '').toUpperCase()
+        : 'HTTP'
+
+    const protocolLabel = connectionInfo?.protocol
+      ? connectionInfo.protocol.toUpperCase()
+      : fallbackProtocol
+
+    const resolvedDefaultPort = connectionInfo?.defaultPort || (DEFAULT_BACKEND_PORT || '---')
+    const portLabel = connectionInfo?.port || (resolvedDefaultPort && resolvedDefaultPort !== '---' ? `${resolvedDefaultPort} (設定)` : '---')
+
+    const absoluteUrl = connectionInfo?.url || streamUrl || '-'
+    const openedAtLabel = connectionInfo?.openedAt ? new Date(connectionInfo.openedAt).toLocaleString() : '---'
+    const disconnectedAtLabel = connectionInfo?.disconnectedAt
+      ? new Date(connectionInfo.disconnectedAt).toLocaleString()
+      : '---'
+
+    return {
+      absoluteUrl,
+      relativeUrl: EVENT_STREAM_PATH,
+      host: connectionInfo?.host || fallbackHost,
+      port: portLabel,
+      protocol: protocolLabel,
+      withCredentialsLabel:
+        connectionInfo?.withCredentials === false
+          ? '無効 (Cookieを送信しません)'
+          : '有効 (Cookie/資格情報を送信)',
+      basePath: basePath || '(未設定)',
+      openedAt: openedAtLabel,
+      disconnectedAt: disconnectedAtLabel,
+      initializationFailed: connectionInfo?.initializationFailed === true
+    }
+  }, [connectionInfo, streamUrl, basePath])
+
+  const clearEvents = useCallback(() => {
+    setEvents([])
+  }, [])
+
+  const reconnect = useCallback(() => {
+    // 手動再接続では状態を初期化してからretryTokenを進める。
+    clearScheduledReconnect()
+    retryAttemptRef.current = 0
+    setRetryAttempt(0)
+    setStatus('connecting')
+    setRetryToken(token => token + 1)
+  }, [clearScheduledReconnect])
+
+  const statusChip = statusChipConfig[status] || statusChipConfig.connecting
+
+  useEffect(() => {
+    return () => {
+      if (reconnectTimeoutRef.current) {
+        // ページ離脱時にもタイマーが残らないようにクリーンアップ。
+        clearTimeout(reconnectTimeoutRef.current)
+      }
+    }
+  }, [])
+
+  const nextRetryLabel = useMemo(() => {
+    if (!retryAttempt || !nextRetryInMs) {
+      return null
+    }
+
+    const seconds = Math.ceil(nextRetryInMs / 1000)
+
+    return `自動再接続 ${retryAttempt} 回目: 約 ${seconds} 秒後に再試行します。`
+  }, [retryAttempt, nextRetryInMs])
+
+  return (
+    <Grid container spacing={6} sx={{ pb: 6 }}>
+      <Grid item xs={12}>
+        <Stack direction='row' justifyContent='space-between' alignItems='center' spacing={4} flexWrap='wrap' rowGap={2}>
+          <Box>
+            <Typography variant='h4' sx={{ mb: 1 }}>
+              SSE監視ページ
+            </Typography>
+            <Typography variant='body2' color='text.secondary'>
+              バックエンドが配信するサーバー送信イベントをリアルタイムにモニタリングします。
+            </Typography>
+          </Box>
+          <Stack direction='row' spacing={2} alignItems='center'>
+            <Chip color={statusChip.color} label={statusChip.label} />
+            <Typography variant='body2' color='text.secondary'>
+              最終受信: {formattedLatestEventTime}
+            </Typography>
+            <Button variant='outlined' onClick={reconnect}>
+              再接続
+            </Button>
+            <Button variant='outlined' color='secondary' onClick={clearEvents} disabled={events.length === 0}>
+              ログをクリア
+            </Button>
+          </Stack>
+        </Stack>
+        {nextRetryLabel ? (
+          <Typography variant='caption' color='text.secondary' sx={{ mt: 2, display: 'block' }}>
+            {nextRetryLabel}
+          </Typography>
+        ) : null}
+      </Grid>
+
+      {errorMessage ? (
+        <Grid item xs={12}>
+          <Alert severity='error'>{errorMessage}</Alert>
+        </Grid>
+      ) : null}
+
+      <Grid item xs={12} md={5}>
+        <Card>
+          <CardHeader title='接続情報' subheader='現在のSSE接続先の詳細を確認できます。' />
+          <CardContent>
+            <Stack spacing={3}>
+              {connectionDisplay.initializationFailed ? (
+                <Alert severity='warning'>SSEの初期化に失敗しました。接続設定を確認してください。</Alert>
+              ) : null}
+              <Stack spacing={0.5}>
+                <Typography variant='caption' color='text.secondary'>接続URL (絶対)</Typography>
+                <Typography variant='body2' sx={{ wordBreak: 'break-all' }}>{connectionDisplay.absoluteUrl}</Typography>
+              </Stack>
+              <Stack spacing={0.5}>
+                <Typography variant='caption' color='text.secondary'>SSEエンドポイント (相対)</Typography>
+                <Typography variant='body2' sx={{ wordBreak: 'break-all' }}>{connectionDisplay.relativeUrl}</Typography>
+              </Stack>
+              <Stack spacing={0.5}>
+                <Typography variant='caption' color='text.secondary'>サーバホスト (IP/ドメイン)</Typography>
+                <Typography variant='body2'>{connectionDisplay.host}</Typography>
+              </Stack>
+              <Stack spacing={0.5}>
+                <Typography variant='caption' color='text.secondary'>ポート</Typography>
+                <Typography variant='body2'>{connectionDisplay.port}</Typography>
+              </Stack>
+              <Stack spacing={0.5}>
+                <Typography variant='caption' color='text.secondary'>プロトコル</Typography>
+                <Typography variant='body2'>{connectionDisplay.protocol}</Typography>
+              </Stack>
+              <Stack spacing={0.5}>
+                <Typography variant='caption' color='text.secondary'>資格情報送信</Typography>
+                <Typography variant='body2'>{connectionDisplay.withCredentialsLabel}</Typography>
+              </Stack>
+              <Stack spacing={0.5}>
+                <Typography variant='caption' color='text.secondary'>接続確立 (最新)</Typography>
+                <Typography variant='body2'>{connectionDisplay.openedAt}</Typography>
+              </Stack>
+              <Stack spacing={0.5}>
+                <Typography variant='caption' color='text.secondary'>最終切断</Typography>
+                <Typography variant='body2'>{connectionDisplay.disconnectedAt}</Typography>
+              </Stack>
+              <Stack spacing={0.5}>
+                <Typography variant='caption' color='text.secondary'>ベースパス</Typography>
+                <Typography variant='body2'>{connectionDisplay.basePath}</Typography>
+              </Stack>
+            </Stack>
+          </CardContent>
+        </Card>
+      </Grid>
+
+      <Grid item xs={12} md={7}>
+        <Card>
+          <CardHeader title='イベントログ' subheader={`受信件数: ${events.length}`} />
+          <CardContent>
+            {events.length === 0 ? (
+              <Typography variant='body2' color='text.secondary'>
+                まだイベントを受信していません。イベントが届くとここに表示されます。
+              </Typography>
+            ) : (
+              <List disablePadding>
+                {events.map((event, index) => (
+                  <Fragment key={event.id}>
+                    <ListItem disableGutters alignItems='flex-start' sx={{ py: 3 }}>
+                      <Stack spacing={1} sx={{ width: '100%' }}>
+                        <Typography variant='caption' color='text.secondary'>
+                          受信時刻: {new Date(event.receivedAt).toLocaleString()}
+                        </Typography>
+                        <Box
+                          component='pre'
+                          sx={{
+                            m: 0,
+                            p: 2,
+                            borderRadius: 1,
+                            bgcolor: 'action.hover',
+                            fontFamily: 'monospace',
+                            fontSize: 13,
+                            lineHeight: 1.6,
+                            maxHeight: 240,
+                            overflow: 'auto'
+                          }}
+                        >
+                          {JSON.stringify(event.payload, null, 2)}
+                        </Box>
+                      </Stack>
+                    </ListItem>
+                    {index < events.length - 1 ? <Divider component='li' /> : null}
+                  </Fragment>
+                ))}
+              </List>
+            )}
+          </CardContent>
+        </Card>
+      </Grid>
+    </Grid>
+  )
+}
+
+export default SSEMonitoringPage
diff --git a/javascript-version/src/app/(dashboard)/template-guide/page.jsx b/javascript-version/src/app/(dashboard)/template-guide/page.jsx
new file mode 100644
index 000000000..5db3a4f4a
--- /dev/null
+++ b/javascript-version/src/app/(dashboard)/template-guide/page.jsx
@@ -0,0 +1,638 @@
+'use client'
+
+// React Imports
+import { useState } from 'react'
+
+// MUI Imports
+import Grid from '@mui/material/Grid'
+import Card from '@mui/material/Card'
+import CardContent from '@mui/material/CardContent'
+import Typography from '@mui/material/Typography'
+import Box from '@mui/material/Box'
+import Accordion from '@mui/material/Accordion'
+import AccordionSummary from '@mui/material/AccordionSummary'
+import AccordionDetails from '@mui/material/AccordionDetails'
+import Table from '@mui/material/Table'
+import TableBody from '@mui/material/TableBody'
+import TableCell from '@mui/material/TableCell'
+import TableContainer from '@mui/material/TableContainer'
+import TableHead from '@mui/material/TableHead'
+import TableRow from '@mui/material/TableRow'
+import Paper from '@mui/material/Paper'
+import Chip from '@mui/material/Chip'
+import Button from '@mui/material/Button'
+import TextField from '@mui/material/TextField'
+import Tabs from '@mui/material/Tabs'
+import Tab from '@mui/material/Tab'
+import ToggleButton from '@mui/material/ToggleButton'
+import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'
+import LinearProgress from '@mui/material/LinearProgress'
+import Avatar from '@mui/material/Avatar'
+import IconButton from '@mui/material/IconButton'
+import { styled } from '@mui/material/styles'
+
+// ExpandMoreIconの代わりにRemix Iconを使用
+
+// Custom styled components example
+const StyledTab = styled(Tab)(({ theme }) => ({
+  textTransform: 'none',
+  fontWeight: 600,
+  fontSize: '0.875rem',
+  '&.Mui-selected': {
+    color: theme.palette.primary.main,
+    borderBottom: `2px solid ${theme.palette.primary.main}`,
+    backgroundColor: theme.palette.primary.light + '20',
+  },
+}))
+
+const StyledToggleButton = styled(ToggleButton)(({ theme }) => ({
+  textTransform: 'none',
+  fontWeight: 600,
+  fontSize: '0.875rem',
+  '&.Mui-selected': {
+    backgroundColor: theme.palette.primary.main,
+    color: theme.palette.primary.contrastText,
+    '&:hover': {
+      backgroundColor: theme.palette.primary.dark,
+    },
+  },
+}))
+
+const TemplateGuide = () => {
+  const [activeTab, setActiveTab] = useState(0)
+
+  const handleTabChange = (event, newValue) => {
+    setActiveTab(newValue)
+  }
+
+  const muiComponents = [
+    {
+      category: 'レイアウト',
+      components: [
+        {
+          name: 'Grid',
+          description: 'レスポンシブなグリッドレイアウト',
+          usage: '<Grid container spacing={3}><Grid item xs={12} md={6}>...</Grid></Grid>',
+          props: 'container, item, xs, sm, md, lg, xl, spacing',
+          example: (
+            <Grid container spacing={2}>
+              <Grid item xs={12} md={6}>
+                <Box sx={{ p: 2, bgcolor: 'primary.light', color: 'white', borderRadius: 1 }}>
+                  xs=12, md=6
+                </Box>
+              </Grid>
+              <Grid item xs={12} md={6}>
+                <Box sx={{ p: 2, bgcolor: 'secondary.light', color: 'white', borderRadius: 1 }}>
+                  xs=12, md=6
+                </Box>
+              </Grid>
+            </Grid>
+          )
+        },
+        {
+          name: 'Box',
+          description: '汎用コンテナ（divの代わり）',
+          usage: '<Box sx={{ p: 2, bgcolor: "primary.main" }}>...</Box>',
+          props: 'sx, component, children',
+          example: (
+            <Box sx={{ p: 2, bgcolor: 'success.light', borderRadius: 1, textAlign: 'center' }}>
+              Box Component
+            </Box>
+          )
+        },
+        {
+          name: 'Card',
+          description: 'カード形式のコンテナ',
+          usage: '<Card><CardContent>...</CardContent></Card>',
+          props: 'variant, elevation, sx',
+          example: (
+            <Card variant="outlined">
+              <CardContent>
+                <Typography variant="h6">Card Example</Typography>
+                <Typography variant="body2">This is a card component</Typography>
+              </CardContent>
+            </Card>
+          )
+        }
+      ]
+    },
+    {
+      category: 'タイポグラフィ',
+      components: [
+        {
+          name: 'Typography',
+          description: 'テキスト表示用コンポーネント',
+          usage: '<Typography variant="h4">Title</Typography>',
+          props: 'variant, color, align, gutterBottom, fontWeight',
+          example: (
+            <Box>
+              <Typography variant="h4" gutterBottom>Heading 4</Typography>
+              <Typography variant="body1" color="text.secondary">Body text</Typography>
+              <Typography variant="h6" color="primary.main" fontWeight="bold">Colored text</Typography>
+            </Box>
+          )
+        }
+      ]
+    },
+    {
+      category: 'フォーム',
+      components: [
+        {
+          name: 'TextField',
+          description: 'テキスト入力フィールド',
+          usage: '<TextField label="Name" variant="outlined" size="small" />',
+          props: 'label, variant, size, fullWidth, type, value, onChange',
+          example: (
+            <TextField
+              label="Example Input"
+              variant="outlined"
+              size="small"
+              placeholder="Enter text here"
+            />
+          )
+        },
+        {
+          name: 'Button',
+          description: 'ボタンコンポーネント',
+          usage: '<Button variant="contained" color="primary">Click me</Button>',
+          props: 'variant, color, size, startIcon, endIcon, fullWidth',
+          example: (
+            <Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>
+              <Button variant="contained" color="primary">Primary</Button>
+              <Button variant="outlined" color="secondary">Secondary</Button>
+              <Button variant="text" color="success">Text</Button>
+            </Box>
+          )
+        }
+      ]
+    },
+    {
+      category: 'ナビゲーション',
+      components: [
+        {
+          name: 'Tabs',
+          description: 'タブナビゲーション',
+          usage: '<Tabs value={value} onChange={handleChange}><Tab label="Tab 1" /></Tabs>',
+          props: 'value, onChange, variant, orientation',
+          example: (
+            <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+              <Tabs value={activeTab} onChange={handleTabChange}>
+                <Tab label="Tab 1" />
+                <Tab label="Tab 2" />
+                <Tab label="Tab 3" />
+              </Tabs>
+            </Box>
+          )
+        },
+        {
+          name: 'ToggleButtonGroup',
+          description: 'トグルボタングループ',
+          usage: '<ToggleButtonGroup value={value} exclusive onChange={handleChange}><ToggleButton value="option1">Option 1</ToggleButton></ToggleButtonGroup>',
+          props: 'value, exclusive, onChange, size',
+          example: (
+            <ToggleButtonGroup value={activeTab} exclusive onChange={handleTabChange} size="small">
+              <ToggleButton value={0}>Option 1</ToggleButton>
+              <ToggleButton value={1}>Option 2</ToggleButton>
+              <ToggleButton value={2}>Option 3</ToggleButton>
+            </ToggleButtonGroup>
+          )
+        }
+      ]
+    },
+    {
+      category: 'データ表示',
+      components: [
+        {
+          name: 'Table',
+          description: 'テーブル表示',
+          usage: '<TableContainer><Table><TableHead><TableRow><TableCell>Header</TableCell></TableRow></TableHead><TableBody>...</TableBody></Table></TableContainer>',
+          props: 'size, stickyHeader',
+          example: (
+            <TableContainer component={Paper} variant="outlined" sx={{ maxHeight: 200 }}>
+              <Table stickyHeader size="small">
+                <TableHead>
+                  <TableRow>
+                    <TableCell>Name</TableCell>
+                    <TableCell>Value</TableCell>
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  <TableRow>
+                    <TableCell>Item 1</TableCell>
+                    <TableCell>100</TableCell>
+                  </TableRow>
+                  <TableRow>
+                    <TableCell>Item 2</TableCell>
+                    <TableCell>200</TableCell>
+                  </TableRow>
+                </TableBody>
+              </Table>
+            </TableContainer>
+          )
+        },
+        {
+          name: 'Chip',
+          description: '小さな情報表示用チップ',
+          usage: '<Chip label="Label" color="primary" size="small" />',
+          props: 'label, color, size, variant, icon',
+          example: (
+            <Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>
+              <Chip label="Success" color="success" size="small" />
+              <Chip label="Warning" color="warning" size="small" />
+              <Chip label="Error" color="error" size="small" />
+              <Chip label="Info" color="info" size="small" />
+            </Box>
+          )
+        },
+        {
+          name: 'LinearProgress',
+          description: 'プログレスバー',
+          usage: '<LinearProgress variant="determinate" value={75} />',
+          props: 'variant, value, color, sx',
+          example: (
+            <Box sx={{ width: '100%' }}>
+              <LinearProgress variant="determinate" value={75} sx={{ height: 8, borderRadius: 4 }} />
+              <Typography variant="body2" sx={{ mt: 1 }}>75% Complete</Typography>
+            </Box>
+          )
+        }
+      ]
+    },
+    {
+      category: 'アイコン・アバター',
+      components: [
+        {
+          name: 'Avatar',
+          description: 'ユーザーアバターやアイコン表示',
+          usage: '<Avatar src="/path/to/image.png" variant="rounded" />',
+          props: 'src, alt, variant, sx',
+          example: (
+            <Box sx={{ display: 'flex', gap: 2, alignItems: 'center' }}>
+              <Avatar sx={{ bgcolor: 'primary.main' }}>A</Avatar>
+              <Avatar src="/images/avatars/1.png" />
+              <Avatar variant="rounded" sx={{ bgcolor: 'secondary.main' }}>B</Avatar>
+            </Box>
+          )
+        },
+        {
+          name: 'IconButton',
+          description: 'アイコンボタン',
+          usage: '<IconButton size="small" color="primary"><Icon /></IconButton>',
+          props: 'size, color, disabled, onClick',
+          example: (
+            <Box sx={{ display: 'flex', gap: 1 }}>
+              <IconButton size="small" color="primary">
+                <span>👁️</span>
+              </IconButton>
+              <IconButton size="small" color="secondary">
+                <span>✏️</span>
+              </IconButton>
+              <IconButton size="small" color="error">
+                <span>🗑️</span>
+              </IconButton>
+            </Box>
+          )
+        }
+      ]
+    }
+  ]
+
+  const reactPatterns = [
+    {
+      category: '状態管理',
+      patterns: [
+        {
+          name: 'useState',
+          description: 'コンポーネントの状態を管理',
+          usage: 'const [value, setValue] = useState(initialValue)',
+          example: 'const [activeTab, setActiveTab] = useState(0)',
+          explanation: 'コンポーネント内で値を保持し、変更時に再レンダリングをトリガーします'
+        },
+        {
+          name: 'useEffect',
+          description: '副作用を実行（API呼び出し、イベントリスナーなど）',
+          usage: 'useEffect(() => { /* effect */ }, [dependencies])',
+          example: 'useEffect(() => { window.addEventListener("resize", handler); return () => window.removeEventListener("resize", handler); }, [])',
+          explanation: 'コンポーネントのマウント時、アンマウント時、依存関係の変更時に実行されます'
+        },
+        {
+          name: 'useRef',
+          description: 'DOM要素への参照を保持',
+          usage: 'const ref = useRef(null)',
+          example: 'const chartContainerRef = useRef(null)',
+          explanation: 'DOM要素に直接アクセスする必要がある場合に使用します'
+        }
+      ]
+    },
+    {
+      category: 'イベントハンドリング',
+      patterns: [
+        {
+          name: 'onChange Handler',
+          description: 'フォーム入力の変更を処理',
+          usage: 'onChange={(e) => setValue(e.target.value)}',
+          example: 'onChange={(e) => setFilterName(e.target.value)}',
+          explanation: '入力フィールドの値が変更されたときに状態を更新します'
+        },
+        {
+          name: 'onClick Handler',
+          description: 'クリックイベントを処理',
+          usage: 'onClick={() => handleClick()}',
+          example: 'onClick={() => setActiveTab(index)}',
+          explanation: 'ボタンやカードがクリックされたときの動作を定義します'
+        }
+      ]
+    },
+    {
+      category: '条件付きレンダリング',
+      patterns: [
+        {
+          name: 'Ternary Operator',
+          description: '条件に基づいて異なるコンテンツを表示',
+          usage: '{condition ? <ComponentA /> : <ComponentB />}',
+          example: '{isLoading ? <Spinner /> : <Content />}',
+          explanation: 'シンプルな条件分岐でコンポーネントを切り替えます'
+        },
+        {
+          name: 'Logical AND',
+          description: '条件が真の時のみコンポーネントを表示',
+          usage: '{condition && <Component />}',
+          example: '{user && <UserProfile user={user} />}',
+          explanation: '条件が真の時のみコンポーネントをレンダリングします'
+        },
+        {
+          name: 'Conditional Return',
+          description: '関数内で早期リターン',
+          usage: 'if (condition) return <Component />',
+          example: 'if (filteredData.length === 0) return <EmptyState />',
+          explanation: '特定の条件で異なるコンポーネントを返します'
+        }
+      ]
+    },
+    {
+      category: 'リストレンダリング',
+      patterns: [
+        {
+          name: 'map()',
+          description: '配列の要素をコンポーネントに変換',
+          usage: '{array.map((item, index) => <Component key={item.id} {...item} />)}',
+          example: '{filteredData.map((row, index) => <TableRow key={index}>...</TableRow>)}',
+          explanation: '配列の各要素をReactコンポーネントに変換して表示します'
+        },
+        {
+          name: 'filter()',
+          description: '配列を条件でフィルタリング',
+          usage: 'array.filter(item => condition)',
+          example: 'productionData.filter(d => d.date === today)',
+          explanation: '条件に合う要素のみを抽出して表示します'
+        }
+      ]
+    }
+  ]
+
+  const stylingExamples = [
+    {
+      category: 'sx prop',
+      examples: [
+        {
+          name: '基本的なスタイリング',
+          usage: 'sx={{ p: 2, bgcolor: "primary.main", color: "white" }}',
+          explanation: 'padding: 16px, background-color: primary.main, color: white'
+        },
+        {
+          name: 'レスポンシブデザイン',
+          usage: 'sx={{ display: { xs: "none", md: "block" } }}',
+          explanation: 'xs（モバイル）では非表示、md（タブレット以上）では表示'
+        },
+        {
+          name: 'レイアウト',
+          usage: 'sx={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}',
+          explanation: 'flexboxレイアウトで要素を中央揃え'
+        },
+        {
+          name: 'スペーシング',
+          usage: 'sx={{ "& > * + *": { mt: 2 } }}',
+          explanation: '子要素の間隔を2（16px）に設定'
+        }
+      ]
+    },
+    {
+      category: 'styled()',
+      examples: [
+        {
+          name: 'カスタムスタイル',
+          usage: 'const StyledButton = styled(Button)(({ theme }) => ({ /* styles */ }))',
+          explanation: '既存のMUIコンポーネントをカスタマイズ'
+        },
+        {
+          name: 'テーマ利用',
+          usage: 'color: theme.palette.primary.main',
+          explanation: 'MUIテーマの色やスペーシングを利用'
+        }
+      ]
+    }
+  ]
+
+  return (
+    <Box sx={{ p: 3 }}>
+      <Grid container spacing={3}>
+        <Grid item xs={12}>
+          <Typography variant="h4" gutterBottom>
+            MUI & React テンプレートガイド
+          </Typography>
+          <Typography variant="body1" color="text.secondary" paragraph>
+            このページでは、テンプレートで使用されているMUIコンポーネントとReactパターンの使い方を説明します。
+          </Typography>
+        </Grid>
+
+        {/* MUI Components */}
+        <Grid item xs={12}>
+          <Card>
+            <CardContent>
+              <Typography variant="h5" gutterBottom>
+                MUI コンポーネント一覧
+              </Typography>
+              {muiComponents.map((category, categoryIndex) => (
+                <Accordion key={categoryIndex}>
+                  <AccordionSummary expandIcon={<i className='ri-arrow-down-s-line' />}>
+                    <Typography variant="h6">{category.category}</Typography>
+                  </AccordionSummary>
+                  <AccordionDetails>
+                    <Grid container spacing={2}>
+                      {category.components.map((component, componentIndex) => (
+                        <Grid item xs={12} key={componentIndex}>
+                          <Card variant="outlined">
+                            <CardContent>
+                              <Typography variant="h6" color="primary" gutterBottom>
+                                {component.name}
+                              </Typography>
+                              <Typography variant="body2" color="text.secondary" paragraph>
+                                {component.description}
+                              </Typography>
+                              <Typography variant="body2" component="pre" sx={{ bgcolor: 'grey.100', p: 1, borderRadius: 1, fontSize: '0.75rem' }}>
+                                {component.usage}
+                              </Typography>
+                              <Typography variant="body2" sx={{ mt: 1 }}>
+                                <strong>主要なprops:</strong> {component.props}
+                              </Typography>
+                              <Box sx={{ mt: 2 }}>
+                                <Typography variant="body2" gutterBottom>
+                                  <strong>例:</strong>
+                                </Typography>
+                                {component.example}
+                              </Box>
+                            </CardContent>
+                          </Card>
+                        </Grid>
+                      ))}
+                    </Grid>
+                  </AccordionDetails>
+                </Accordion>
+              ))}
+            </CardContent>
+          </Card>
+        </Grid>
+
+        {/* React Patterns */}
+        <Grid item xs={12}>
+          <Card>
+            <CardContent>
+              <Typography variant="h5" gutterBottom>
+                React パターン一覧
+              </Typography>
+              {reactPatterns.map((category, categoryIndex) => (
+                <Accordion key={categoryIndex}>
+                  <AccordionSummary expandIcon={<i className='ri-arrow-down-s-line' />}>
+                    <Typography variant="h6">{category.category}</Typography>
+                  </AccordionSummary>
+                  <AccordionDetails>
+                    <Grid container spacing={2}>
+                      {category.patterns.map((pattern, patternIndex) => (
+                        <Grid item xs={12} key={patternIndex}>
+                          <Card variant="outlined">
+                            <CardContent>
+                              <Typography variant="h6" color="primary" gutterBottom>
+                                {pattern.name}
+                              </Typography>
+                              <Typography variant="body2" color="text.secondary" paragraph>
+                                {pattern.description}
+                              </Typography>
+                              <Typography variant="body2" component="pre" sx={{ bgcolor: 'grey.100', p: 1, borderRadius: 1, fontSize: '0.75rem' }}>
+                                {pattern.usage}
+                              </Typography>
+                              <Typography variant="body2" sx={{ mt: 1 }}>
+                                <strong>例:</strong> {pattern.example}
+                              </Typography>
+                              <Typography variant="body2" sx={{ mt: 1 }}>
+                                <strong>説明:</strong> {pattern.explanation}
+                              </Typography>
+                            </CardContent>
+                          </Card>
+                        </Grid>
+                      ))}
+                    </Grid>
+                  </AccordionDetails>
+                </Accordion>
+              ))}
+            </CardContent>
+          </Card>
+        </Grid>
+
+        {/* Styling Examples */}
+        <Grid item xs={12}>
+          <Card>
+            <CardContent>
+              <Typography variant="h5" gutterBottom>
+                スタイリング例
+              </Typography>
+              {stylingExamples.map((category, categoryIndex) => (
+                <Accordion key={categoryIndex}>
+                  <AccordionSummary expandIcon={<i className='ri-arrow-down-s-line' />}>
+                    <Typography variant="h6">{category.category}</Typography>
+                  </AccordionSummary>
+                  <AccordionDetails>
+                    <Grid container spacing={2}>
+                      {category.examples.map((example, exampleIndex) => (
+                        <Grid item xs={12} key={exampleIndex}>
+                          <Card variant="outlined">
+                            <CardContent>
+                              <Typography variant="h6" color="primary" gutterBottom>
+                                {example.name}
+                              </Typography>
+                              <Typography variant="body2" component="pre" sx={{ bgcolor: 'grey.100', p: 1, borderRadius: 1, fontSize: '0.75rem' }}>
+                                {example.usage}
+                              </Typography>
+                              <Typography variant="body2" sx={{ mt: 1 }}>
+                                <strong>説明:</strong> {example.explanation}
+                              </Typography>
+                            </CardContent>
+                          </Card>
+                        </Grid>
+                      ))}
+                    </Grid>
+                  </AccordionDetails>
+                </Accordion>
+              ))}
+            </CardContent>
+          </Card>
+        </Grid>
+
+        {/* Quick Reference Table */}
+        <Grid item xs={12}>
+          <Card>
+            <CardContent>
+              <Typography variant="h5" gutterBottom>
+                クイックリファレンス
+              </Typography>
+              <TableContainer component={Paper} variant="outlined">
+                <Table>
+                  <TableHead>
+                    <TableRow>
+                      <TableCell>コンポーネント</TableCell>
+                      <TableCell>用途</TableCell>
+                      <TableCell>よく使うprops</TableCell>
+                    </TableRow>
+                  </TableHead>
+                  <TableBody>
+                    <TableRow>
+                      <TableCell><strong>Grid</strong></TableCell>
+                      <TableCell>レスポンシブレイアウト</TableCell>
+                      <TableCell>container, item, xs, md, lg, spacing</TableCell>
+                    </TableRow>
+                    <TableRow>
+                      <TableCell><strong>Card</strong></TableCell>
+                      <TableCell>コンテンツのグループ化</TableCell>
+                      <TableCell>variant, elevation, sx</TableCell>
+                    </TableRow>
+                    <TableRow>
+                      <TableCell><strong>Typography</strong></TableCell>
+                      <TableCell>テキスト表示</TableCell>
+                      <TableCell>variant, color, align, gutterBottom</TableCell>
+                    </TableRow>
+                    <TableRow>
+                      <TableCell><strong>TextField</strong></TableCell>
+                      <TableCell>フォーム入力</TableCell>
+                      <TableCell>label, variant, size, fullWidth</TableCell>
+                    </TableRow>
+                    <TableRow>
+                      <TableCell><strong>Button</strong></TableCell>
+                      <TableCell>アクション実行</TableCell>
+                      <TableCell>variant, color, size, startIcon</TableCell>
+                    </TableRow>
+                    <TableRow>
+                      <TableCell><strong>Table</strong></TableCell>
+                      <TableCell>データ表示</TableCell>
+                      <TableCell>size, stickyHeader</TableCell>
+                    </TableRow>
+                  </TableBody>
+                </Table>
+              </TableContainer>
+            </CardContent>
+          </Card>
+        </Grid>
+      </Grid>
+    </Box>
+  )
+}
+
+export default TemplateGuide
diff --git a/javascript-version/src/app/(signage)/components/AlertOverlay.jsx b/javascript-version/src/app/(signage)/components/AlertOverlay.jsx
new file mode 100644
index 000000000..e8c0c68b4
--- /dev/null
+++ b/javascript-version/src/app/(signage)/components/AlertOverlay.jsx
@@ -0,0 +1,25 @@
+"use client"
+
+import Box from '@mui/material/Box'
+import Typography from '@mui/material/Typography'
+import Fade from '@mui/material/Fade'
+
+export default function AlertOverlay({ alert }) {
+  return (
+    <Fade in={alert.open} timeout={300} unmountOnExit>
+      <Box sx={{ position: 'fixed', inset: 0, bgcolor: 'rgba(0,0,0,0.8)', zIndex: 1300, display: 'flex', alignItems: 'center', justifyContent: 'center', p: 4 }}>
+        <Box sx={{ position: 'absolute', inset: 0, opacity: 0.2, backgroundImage: 'repeating-linear-gradient(-45deg, #f59e0b, #f59e0b 25px, #1f2937 25px, #1f2937 50px)' }} />
+        <Box sx={{ textAlign: 'center', zIndex: 1 }}>
+          <Typography variant='h1' fontWeight={900} color='error.main' sx={{ lineHeight: 1, animation: 'flash 1s infinite', fontSize: { xs: 72, md: 180 } }}>警告</Typography>
+          <Box sx={{ mt: 6, bgcolor: 'rgba(0,0,0,0.8)', p: 4, border: theme => `4px solid ${theme.palette.warning.main}`, borderRadius: 2 }}>
+            <Typography variant='h2' fontWeight={800} color='warning.main' sx={{ wordBreak: 'break-word' }}>{alert.title}</Typography>
+            <Typography variant='h4' mt={4} color='common.white'>{alert.message}</Typography>
+          </Box>
+        </Box>
+        <style jsx global>{`
+          @keyframes flash { 0%,100% { opacity: 1 } 50% { opacity: .5 } }
+        `}</style>
+      </Box>
+    </Fade>
+  )
+}
diff --git a/javascript-version/src/app/(signage)/components/DarkModeForcer.jsx b/javascript-version/src/app/(signage)/components/DarkModeForcer.jsx
new file mode 100644
index 000000000..c35ecb21f
--- /dev/null
+++ b/javascript-version/src/app/(signage)/components/DarkModeForcer.jsx
@@ -0,0 +1,32 @@
+"use client"
+
+import { useEffect, useRef } from 'react'
+import { useSettings } from '@core/hooks/useSettings'
+
+// サイネージ専用: ページ滞在中のみ一時的に dark モードへ変更し、離脱時に元設定へ戻す
+// React 18 StrictMode 下では mount->cleanup->mount の二重呼び出しによる高速点滅が発生するため
+// 初回の擬似アンマウント(cleanup)ではリセットをスキップし、2回目(実際の離脱)のみリセットする
+const DarkModeForcer = () => {
+  const { settings, updatePageSettings } = useSettings()
+  const cleanupCountRef = useRef(0)
+  const resetRef = useRef(null)
+
+  // 1度だけ適用: StrictMode でも effect 本体は2回実行されるが依存配列 [] で抑制し cleanup のみ2回呼ばれる
+  useEffect(() => {
+    if (settings.mode !== 'dark') {
+      resetRef.current = updatePageSettings({ mode: 'dark' })
+    }
+
+    return () => {
+      // StrictMode の最初の cleanup はスキップ（開発環境のみ）
+      cleanupCountRef.current += 1
+      if (process.env.NODE_ENV === 'development' && cleanupCountRef.current === 1) return
+      if (resetRef.current) resetRef.current()
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  return null
+}
+
+export default DarkModeForcer
diff --git a/javascript-version/src/app/(signage)/components/DebugControls.jsx b/javascript-version/src/app/(signage)/components/DebugControls.jsx
new file mode 100644
index 000000000..675548fda
--- /dev/null
+++ b/javascript-version/src/app/(signage)/components/DebugControls.jsx
@@ -0,0 +1,14 @@
+"use client"
+
+import Stack from '@mui/material/Stack'
+import Button from '@mui/material/Button'
+
+export default function DebugControls({ onError, onWarning, onNormal }) {
+  return (
+    <Stack direction='row' spacing={1.5} sx={{ pt: 1 }}>
+      <Button size='medium' variant='contained' color='error' onClick={onError} sx={{ fontSize: '1rem' }}>デバッグ: エラー発生</Button>
+      <Button size='medium' variant='contained' color='warning' onClick={onWarning} sx={{ fontSize: '1rem' }}>デバッグ: 警告発生</Button>
+      <Button size='medium' variant='contained' color='success' onClick={onNormal} sx={{ fontSize: '1rem' }}>デバッグ: 正常化</Button>
+    </Stack>
+  )
+}
diff --git a/javascript-version/src/app/(signage)/components/InspectionPanel.jsx b/javascript-version/src/app/(signage)/components/InspectionPanel.jsx
new file mode 100644
index 000000000..90acb247f
--- /dev/null
+++ b/javascript-version/src/app/(signage)/components/InspectionPanel.jsx
@@ -0,0 +1,78 @@
+"use client"
+
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+import Grid from '@mui/material/Grid'
+import Typography from '@mui/material/Typography'
+import Chip from '@mui/material/Chip'
+import Box from '@mui/material/Box'
+import Stack from '@mui/material/Stack'
+
+export default function InspectionPanel({ overallStatus, tiles }) {
+  // 全体文字の色
+  const getStatusColor = (status) => {
+    if (status === 'PASS') return 'success.main'
+    if (status === 'FAIL') return 'error.main'
+    return 'text.disabled' // グレー
+  }
+
+  // 表示する文字（PASS/FAIL以外は WAIT と表示する）
+  const getStatusText = (status) => {
+    if (status === 'PASS' || status === 'FAIL') return status
+    return 'WAIT' // 別の文字（待機中など）に変更可能
+  }
+
+  const getChipColor = (status) => {
+    if (status === 'PASS') return 'success'
+    if (status === 'FAIL') return 'error'
+    return 'default'
+  }
+
+  return (
+    <Card sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
+      <CardHeader 
+        sx={{ py: 2, px: 3 }}
+        title={
+          <Stack direction="row" alignItems="center" justifyContent="space-between">
+            <Typography variant='h4' fontWeight={700} sx={{ fontSize: { xs: '2.2rem', md: '2.4rem' } }}>
+              画像検査
+            </Typography>
+            <Typography 
+              variant='h3' 
+              fontWeight={900} 
+              color={getStatusColor(overallStatus)} 
+              sx={{ fontSize: { xs: '2.5rem', md: '3rem' }, lineHeight: 1, mr: 4 }}
+            >
+              {getStatusText(overallStatus)}
+            </Typography>
+          </Stack>
+        } 
+      />
+      <CardContent sx={{ pt: 0, pb: 2, display: 'flex', flexDirection: 'column', height: '100%', overflow: 'hidden' }}>
+        <Grid container spacing={1} sx={{ flexGrow: 1, minHeight: 0 }}>
+          {tiles.map((t, i) => (
+            <Grid item xs={6} key={i} sx={{ height: '50%' }}>
+              <Box sx={{ 
+                position: 'relative', borderRadius: 2, overflow: 'hidden', bgcolor: 'black',
+                width: '100%', height: '100%', border: '1px solid #333',
+                display: 'flex', alignItems: 'center', justifyContent: 'center'
+              }}>
+                {t.imageUrl && (
+                  <img src={t.imageUrl} alt={t.cameraId} style={{ width: '100%', height: '100%', objectFit: 'contain' }} onError={(e) => { e.target.style.display = 'none' }} />
+                )}
+                <Typography sx={{ position: 'absolute', top: 6, left: 8, bgcolor: 'rgba(0,0,0,0.6)', px: 0.8, py: 0.2, borderRadius: 1, fontSize: '0.9rem', zIndex: 2 }} variant='subtitle1' color='grey.300' fontWeight={600}>
+                  {t.cameraId}
+                </Typography>
+                <Chip size='small' color={getChipColor(t.status)} label={t.status} sx={{ position: 'absolute', top: 6, right: 8, fontWeight: 700, zIndex: 2 }} />
+                {t.failReason && (
+                  <Chip size='small' color={getChipColor(t.status)} variant='filled' label={t.failReason} sx={{ position: 'absolute', bottom: 6, right: 8, zIndex: 2, fontWeight: 700 }} />
+                )}
+              </Box>
+            </Grid>
+          ))}
+        </Grid>
+      </CardContent>
+    </Card>
+  )
+}
\ No newline at end of file
diff --git a/javascript-version/src/app/(signage)/components/MachineStatusPanel.jsx b/javascript-version/src/app/(signage)/components/MachineStatusPanel.jsx
new file mode 100644
index 000000000..34e345a46
--- /dev/null
+++ b/javascript-version/src/app/(signage)/components/MachineStatusPanel.jsx
@@ -0,0 +1,120 @@
+"use client"
+
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+import Grid from '@mui/material/Grid'
+import Typography from '@mui/material/Typography'
+import Chip from '@mui/material/Chip'
+import Stack from '@mui/material/Stack'
+import Box from '@mui/material/Box'
+import { alpha } from '@mui/material/styles'
+
+const pad2 = n => String(Math.max(0, Number(n) || 0)).padStart(2, '0')
+
+const UptimeRich = ({ seconds }) => {
+  const sec = Math.max(0, Math.floor(Number(seconds) || 0))
+  const d = Math.floor(sec / 86400)
+  const h = Math.floor((sec % 86400) / 3600)
+  const m = Math.floor((sec % 3600) / 60)
+  const s = sec % 60
+  return (
+    <Typography variant='h3' fontWeight={900}>
+      {d ? (<><b>{d}</b><Typography component='span' variant='h5'>d </Typography></>) : null}
+      <b>{h}</b><Typography component='span' variant='h5'>h </Typography>
+      <b>{m}</b><Typography component='span' variant='h5'>m </Typography>
+      <Typography component='span' variant='h5'>{String(s).padStart(2, '0')}</Typography>
+      <Typography component='span' variant='h5'>s</Typography>
+    </Typography>
+  )
+}
+
+const badgeColor = kind => kind === 'error' ? 'error' : kind === 'warning' ? 'warning' : 'success'
+const badgeLabel = kind => kind === 'error' ? 'エラー' : kind === 'warning' ? '警告' : '正常'
+
+export default function MachineStatusPanel({
+  machineName,
+  machineBadge,
+  todayUptimeSec,
+  todayProdCount,
+  logs,
+  formatNumber
+}) {
+  return (
+    <Card sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
+  <CardHeader title={<Typography variant='h4' fontWeight={700} sx={{ fontSize: { xs: '2.2rem', md: '2.4rem' } }}>機械状況</Typography>} />
+      <CardContent sx={{ pt: 0, display: 'flex', flexDirection: 'column', gap: 3, flexGrow: 1, minHeight: 0 }}>
+        <Stack direction='row' alignItems='center' justifyContent='space-between'>
+          <Typography variant='h5' fontWeight={700} sx={{ fontSize: { xs: '1.9rem', md: '2.1rem' } }}>{machineName}</Typography>
+          <Chip color={badgeColor(machineBadge)} label={badgeLabel(machineBadge)} sx={{ fontSize: 20, px: 1.5, py: 1 }} />
+        </Stack>
+
+        <Grid container spacing={3}>
+          <Grid item xs={12} sm={6}>
+            <Box sx={{ p: 3, bgcolor: 'background.default', borderRadius: 2 }}>
+              <Typography variant='body1' color='text.secondary' sx={{ fontSize: '1.1rem' }}>本日の稼働時間</Typography>
+              <UptimeRich seconds={todayUptimeSec} />
+            </Box>
+          </Grid>
+          <Grid item xs={12} sm={6}>
+            <Box sx={{ p: 3, bgcolor: 'background.default', borderRadius: 2 }}>
+              <Typography variant='body1' color='text.secondary' sx={{ fontSize: '1.1rem' }}>本日の生産数</Typography>
+              <Typography variant='h3' fontWeight={900}>{formatNumber(todayProdCount)}</Typography>
+            </Box>
+          </Grid>
+        </Grid>
+
+        <Box sx={{ display: 'flex', flexDirection: 'column', flexGrow: 1, minHeight: 0 }}>
+          <Typography variant='h6' fontWeight={700} sx={{ mb: 1, fontSize: { xs: '1.6rem', md: '1.7rem' } }}>最新エラーログ</Typography>
+          <Box sx={{ overflowY: 'auto', pr: 1, flexGrow: 1 }}>
+            {(!logs || logs.length === 0) && (
+              <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', p: 1.5, bgcolor: 'background.default', borderRadius: 1 }}>
+                <Typography variant='body1' color='text.primary' fontWeight={600}>I-001: 起動シーケンス完了</Typography>
+                <Typography variant='caption' color='text.secondary'>--:--:--</Typography>
+              </Box>
+            )}
+            {(logs || []).map((lg, idx) => {
+              const type = String(lg.log_type || 'info').toLowerCase()
+              const isError = type === 'error'
+              const isWarning = type === 'warning'
+              const bgColor = isError
+                ? (theme) => alpha(theme.palette.error.main, 0.15)
+                : isWarning
+                  ? (theme) => alpha(theme.palette.warning.main, 0.18)
+                  : 'background.default'
+              const titleColor = isError ? 'error.main' : isWarning ? 'warning.dark' : 'text.primary'
+              const msgColor = isError ? 'error.dark' : isWarning ? 'warning.main' : 'text.secondary'
+              let tsText = '--:--:--'
+              try {
+                const d = new Date(lg.timestamp)
+                tsText = `${pad2(d.getHours())}:${pad2(d.getMinutes())}:${pad2(d.getSeconds())}`
+              } catch {}
+              return (
+                <Box
+                  key={idx}
+                  sx={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    p: 1.5,
+                    bgcolor: bgColor,
+                    borderRadius: 1,
+                    mb: 1,
+                    border: '1px solid',
+                    borderColor: isError ? 'error.main' : isWarning ? 'warning.main' : 'divider'
+                  }}
+                >
+                  <Box>
+                    <Typography variant='body1' fontWeight={700} color={titleColor}>{lg.title || ''}</Typography>
+                    {lg.message ? <Typography variant='caption' color={msgColor}>{lg.message}</Typography> : null}
+                  </Box>
+                  <Typography variant='caption' color='text.secondary'>{tsText}</Typography>
+                </Box>
+              )
+            })}
+          </Box>
+        </Box>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/javascript-version/src/app/(signage)/components/SpringMapPanel.jsx b/javascript-version/src/app/(signage)/components/SpringMapPanel.jsx
new file mode 100644
index 000000000..aed614772
--- /dev/null
+++ b/javascript-version/src/app/(signage)/components/SpringMapPanel.jsx
@@ -0,0 +1,104 @@
+import Box from '@mui/material/Box'
+import Typography from '@mui/material/Typography'
+import Paper from '@mui/material/Paper'
+
+// 各バネのステータス表示用パーツ
+const SpringBox = ({ label, number, status }) => {
+  // 'ok' または 'PASS' なら緑色
+  const isOk = status === 'ok' || status === 'PASS'
+  // 'ng' または 'FAIL' なら赤色
+  const isNg = status === 'ng' || status === 'FAIL'
+  
+  const color = isOk ? '#00e676' : isNg ? '#ff5252' : '#757575'
+  const bgColor = isOk ? 'rgba(0, 230, 118, 0.1)' : isNg ? 'rgba(255, 82, 82, 0.1)' : 'rgba(255, 255, 255, 0.05)'
+
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', height: '100%' }}>
+      <Typography variant="subtitle2" sx={{ mb: 0.5, fontWeight: 'bold', color: 'text.secondary' }}>
+        {label}
+      </Typography>
+      <Paper
+        elevation={0}
+        sx={{
+          flexGrow: 1,
+          width: '100%',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          border: `3px solid ${color}`,
+          bgcolor: bgColor,
+          borderRadius: 3,
+          color: color,
+          minHeight: '80px',
+          transition: 'all 0.3s ease'
+        }}
+      >
+        <Typography variant="h3" fontWeight={900} sx={{ textShadow: `0 0 10px ${color}40` }}>
+          {number}
+        </Typography>
+      </Paper>
+    </Box>
+  )
+}
+
+const SpringMapPanel = ({ data }) => {
+  // dataプロップスがない場合のフォールバック（動作確認用）
+  const results = data || {
+    spring1: 'ok', spring2: 'ng', spring3: 'ok', spring4: 'ng', 
+  }
+
+  const TOP_SPACER_HEIGHT = '25%' 
+
+  return (
+    <Box sx={{ 
+      height: '100%', width: '100%', 
+      display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
+      bgcolor: 'background.paper', borderRadius: 2, p: 2
+    }}>
+      <Typography variant="h4" sx={{ color: 'text.primary', fontWeight: 'bold', mb: 4, letterSpacing: 1 }}>
+        バネどめ検査カメラ
+      </Typography>
+
+      <Box sx={{ display: 'flex', width: '100%', maxWidth: '900px', height: '100%', maxHeight: '500px', gap: 2 }}>
+        <Box sx={{ width: '20%', display: 'flex', flexDirection: 'column', gap: 2 }}>
+          <Box sx={{ height: TOP_SPACER_HEIGHT, transition: 'height 0.3s' }} /> 
+          <Box sx={{ flex: 1 }}>
+            <SpringBox label="B-spring01" number="1" status={results.spring1} />
+          </Box>
+        </Box>
+
+        <Box sx={{ display: 'flex', flexDirection: 'column', width: '60%', gap: 2 }}>
+          <Box sx={{ display: 'flex', gap: 2, height: '30%' }}>
+            <Box sx={{ flex: 1 }}>
+              <SpringBox label="B-spring02" number="2" status={results.spring2} />
+            </Box>
+            <Box sx={{ flex: 1 }}>
+              <SpringBox label="B-spring03" number="3" status={results.spring3} />
+            </Box>
+          </Box>
+          <Box sx={{ 
+            flex: 1, 
+            border: '2px dashed rgba(255, 255, 255, 0.2)', 
+            borderRadius: 3, 
+            bgcolor: 'rgba(0, 0, 0, 0.2)', 
+            display: 'flex', alignItems: 'center', justifyContent: 'center',
+            color: 'text.secondary'
+          }}>
+            <Typography variant="h5" fontWeight="bold" sx={{ opacity: 0.5 }}>
+              押し上げ部
+            </Typography>
+          </Box>
+        </Box>
+
+        <Box sx={{ width: '20%', display: 'flex', flexDirection: 'column', gap: 2 }}>
+          <Box sx={{ height: TOP_SPACER_HEIGHT, transition: 'height 0.3s' }} /> 
+          <Box sx={{ flex: 1 }}>
+            <SpringBox label="B-spring04" number="4" status={results.spring4} />
+          </Box>
+        </Box>
+      </Box>
+    </Box>
+  )
+}
+
+export default SpringMapPanel
\ No newline at end of file
diff --git a/javascript-version/src/app/(signage)/components/useSignageData.js b/javascript-version/src/app/(signage)/components/useSignageData.js
new file mode 100644
index 000000000..7f8f34405
--- /dev/null
+++ b/javascript-version/src/app/(signage)/components/useSignageData.js
@@ -0,0 +1,211 @@
+"use client"
+
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+
+const pad2 = n => String(Math.max(0, Number(n) || 0)).padStart(2, '0')
+const formatDateYMD = iso => (iso ? String(iso).replace(/-/g, '/') : '--/--/--')
+const formatNumber = n => {
+  const num = Number(n) || 0
+  try { return num.toLocaleString('ja-JP') } catch { return String(num) }
+}
+
+const CAMERA_IDS = ['B-spring01', 'B-spring02', 'B-spring03', 'B-spring04']
+
+const useAuthHeader = () => {
+  return useMemo(() => {
+    if (typeof window === 'undefined') return {}
+    try {
+      const token = localStorage.getItem('access_token') || sessionStorage.getItem('access_token')
+      return token ? { Authorization: `Bearer ${token}` } : {}
+    } catch {
+      return {}
+    }
+  }, [])
+}
+
+export default function useSignageData() {
+  const authHeader = useAuthHeader()
+
+  // --- States ---
+  const [clock, setClock] = useState({ time: '--:--', date: '----/--/-- (--)' })
+  const [machineName, setMachineName] = useState('自動表層バネどめ機')
+  const [todayProdCount, setTodayProdCount] = useState(0)
+  const [lastInspectionDate, setLastInspectionDate] = useState('')
+  const [nextInspectionDate, setNextInspectionDate] = useState('')
+  const [startedAt, setStartedAt] = useState(null)
+  const [todayUptimeSec, setTodayUptimeSec] = useState(0)
+  const [machineBadge, setMachineBadge] = useState('info')
+  const [logs, setLogs] = useState([])
+  const [overallStatus, setOverallStatus] = useState('WAIT')
+  const [rotId, setRotId] = useState('')
+  const [inspectionTime, setInspectionTime] = useState('--:--:--')
+  
+  const [tiles, setTiles] = useState(() => (
+    [1, 2, 3, 4].map(i => ({ index: i, cameraId: CAMERA_IDS[i - 1], status: '---', imageUrl: '', failReason: '' }))
+  ))
+  
+  const [alert, setAlert] = useState({ open: false, title: '', message: '' })
+  const alertTimerRef = useRef(null)
+
+  // --- API Helpers ---
+  const fetchJson = useCallback((url, timeoutMs = 5000) => {
+    const controller = new AbortController()
+    const timer = setTimeout(() => controller.abort(), timeoutMs)
+    return fetch(url, { signal: controller.signal, headers: { Accept: 'application/json', ...authHeader } })
+      .then(res => {
+        clearTimeout(timer)
+        if (!res.ok) throw new Error(`API error: ${res.status}`)
+        return res.json()
+      })
+      .catch(err => { throw err })
+  }, [authHeader])
+
+  const getMachine = useCallback((id = 1) => fetchJson(`/api/machines/${id}`), [fetchJson])
+  const getMachineLogs = useCallback((id = 1) => fetchJson(`/api/machines/${id}/logs?page=1&limit=10`), [fetchJson])
+  
+  const getLotsList = useCallback((limit = 5) => 
+    fetchJson(`/api/inspections/lots?section=spring&page=1&limit=${limit}`), [fetchJson])
+  
+  const getLotShots = useCallback((lotId) => 
+    fetchJson(`/api/inspections/lots/${encodeURIComponent(String(lotId))}/shots`), [fetchJson])
+  
+  const buildInspectionImageUrl = useCallback(imagePath => {
+    if (!imagePath) return ''
+    const imageBase = `http://10.100.54.170:3001`
+    const p = imagePath.replace(/\\/g, '/')
+    return p.startsWith('/') ? `${imageBase}${p}` : `${imageBase}/${p}`
+  }, [])
+
+  // --- Data Loaders ---
+  const loadMachine = useCallback(async () => {
+    try {
+      const data = await getMachine(1)
+      if (data?.machine_name) setMachineName(data.machine_name)
+      if (data?.today_production_count != null) setTodayProdCount(data.today_production_count)
+      if (data?.last_inspection_date) setLastInspectionDate(formatDateYMD(data.last_inspection_date))
+      if (data?.next_inspection_date) setNextInspectionDate(formatDateYMD(data.next_inspection_date))
+      if (data?.started_at) setStartedAt(data.started_at)
+    } catch (err) { console.error(err) }
+  }, [getMachine])
+
+  // ★重要：最新ログの並び順を確実に修正するロジック
+  const loadLogs = useCallback(async () => {
+    try {
+      const resp = await getMachineLogs(1)
+      let list = Array.isArray(resp?.logs) ? resp.logs : []
+      
+      // 同時刻のログがある場合、IDが大きい方を上にするソート処理を追加
+      list.sort((a, b) => {
+        const timeA = new Date(a.timestamp).getTime()
+        const timeB = new Date(b.timestamp).getTime()
+        
+        if (timeA !== timeB) {
+          return timeB - timeA // まずは時刻の降順
+        }
+        // 時刻が全く同じなら、IDの降順（後から入ったデータを上にする）
+        return (Number(b.log_id) || 0) - (Number(a.log_id) || 0)
+      })
+      
+      setLogs(list)
+    } catch (err) { console.error(err) }
+  }, [getMachineLogs])
+
+  const applyShots = useCallback((lotId, shots, capturedAtIso) => {
+    const latestByCam = {}
+    for (const s of shots || []) {
+      if (!s?.camera_id) continue
+      const normalizedId = s.camera_id.replace(/B-spring(\d+)/, (match, p1) => `B-spring${p1.padStart(2, '0')}`)
+      latestByCam[normalizedId] = s
+    }
+
+    let failFound = false
+    let reportedCount = 0
+
+    CAMERA_IDS.forEach(id => {
+      const entry = latestByCam[id]
+      if (entry) {
+        reportedCount++
+        if (String(entry.status || '').toUpperCase() === 'FAIL') failFound = true
+      }
+    })
+
+    if (failFound) setOverallStatus('FAIL')
+    else if (reportedCount === 0) setOverallStatus('WAIT')
+    else if (reportedCount === CAMERA_IDS.length) setOverallStatus('PASS')
+    else setOverallStatus('WAIT')
+
+    setTiles(prev => prev.map(t => {
+      const entry = latestByCam[t.cameraId]
+      if (!entry) return { ...t, status: '---', imageUrl: '', failReason: '' }
+      const status = String(entry.status || 'PASS').toUpperCase()
+      return { ...t, status, imageUrl: buildInspectionImageUrl(entry.image_path), failReason: entry.details || '' }
+    }))
+
+    const d = capturedAtIso ? new Date(capturedAtIso) : new Date()
+    setRotId(lotId || '')
+    setInspectionTime(`${pad2(d.getHours())}:${pad2(d.getMinutes())}:${pad2(d.getSeconds())}`)
+  }, [buildInspectionImageUrl])
+
+  const loadInspection = useCallback(async () => {
+    try {
+      const resp = await getLotsList(5)
+      const lots = resp?.lots || []
+      for (const lot of lots) {
+        const detail = await getLotShots(lot.lot_id)
+        const shots = Array.isArray(detail?.shots) ? detail.shots : []
+        if (shots.length > 0) {
+          applyShots(lot.lot_id, shots, detail?.captured_at)
+          return 
+        }
+      }
+      setRotId(lots[0]?.lot_id || '---')
+    } catch (err) { console.error(err) }
+  }, [getLotsList, getLotShots, applyShots])
+
+  // --- Actions ---
+  const addLog = useCallback((title, message, type) => {
+    const now = new Date(); const ts = now.toISOString()
+    setLogs(prev => [{ log_type: type, title, message, timestamp: ts }, ...prev])
+  }, [])
+
+  const showAlert = useCallback((title, message) => {
+    setAlert({ open: true, title, message })
+    if (alertTimerRef.current) clearTimeout(alertTimerRef.current)
+    alertTimerRef.current = setTimeout(() => setAlert({ open: false, title: '', message: '' }), 5000)
+  }, [])
+
+  const onDebugError = useCallback(() => {
+    setMachineBadge('error'); addLog('デバッグ', '異常', 'error'); showAlert('エラー', '異常検知')
+    setOverallStatus('FAIL'); setTiles(prev => prev.map(t => t.index === 1 ? { ...t, status: 'FAIL' } : t))
+  }, [addLog, showAlert])
+
+  const onDebugWarning = useCallback(() => {
+    setMachineBadge('warning'); addLog('デバッグ', '警告', 'warning')
+  }, [addLog])
+
+  const onDebugNormal = useCallback(() => {
+    setMachineBadge('info'); addLog('デバッグ', '正常復帰', 'info'); setOverallStatus('PASS')
+    setTiles(prev => prev.map(t => ({ ...t, status: 'PASS', failReason: '' })))
+  }, [addLog])
+
+  // --- Effects ---
+  useEffect(() => {
+    const tick = () => {
+      const n = new Date()
+      const hh = pad2(n.getHours()); const mm = pad2(n.getMinutes()); const y = n.getFullYear(); const mo = pad2(n.getMonth() + 1); const d = pad2(n.getDate())
+      const wk = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'][n.getDay()]
+      setClock({ time: `${hh}:${mm}`, date: `${y}/${mo}/${d} (${wk})` })
+      if (startedAt) setTodayUptimeSec(Math.max(0, Math.floor((Date.now() - Date.parse(startedAt)) / 1000)))
+    }
+    tick(); const t = setInterval(tick, 1000); return () => clearInterval(t)
+  }, [startedAt])
+
+  useEffect(() => {
+    loadMachine(); loadLogs(); loadInspection()
+    // 5秒ごとに更新してリアルタイム性を高める
+    const t = setInterval(() => { loadMachine(); loadLogs(); loadInspection() }, 5000)
+    return () => clearInterval(t)
+  }, [loadMachine, loadLogs, loadInspection])
+
+  return { clock, machineName, todayProdCount, lastInspectionDate, nextInspectionDate, todayUptimeSec, machineBadge, logs, overallStatus, rotId, inspectionTime, tiles, formatNumber, alert, onDebugError, onDebugWarning, onDebugNormal }
+}
\ No newline at end of file
diff --git a/javascript-version/src/app/(signage)/layout.jsx b/javascript-version/src/app/(signage)/layout.jsx
new file mode 100644
index 000000000..875a416ae
--- /dev/null
+++ b/javascript-version/src/app/(signage)/layout.jsx
@@ -0,0 +1,19 @@
+// フルスクリーン用途のレイアウト (サイネージ等)
+// URL には (signage) というグループ名は現れません。/machine-signage などは VerticalLayout を経由せずに表示されます。
+
+import Providers from '@components/Providers'
+// DarkModeForcer は Client Component に分離
+import DarkModeForcer from './components/DarkModeForcer'
+
+const Layout = ({ children }) => {
+  const direction = 'ltr'
+  return (
+    <Providers direction={direction}>
+      <DarkModeForcer />
+      {/* サイネージはログイン不要。AuthGuard を通さず常時公開 */}
+      <div style={{ width: '100vw', height: '100vh', overflow: 'hidden' }}>{children}</div>
+    </Providers>
+  )
+}
+
+export default Layout
diff --git a/javascript-version/src/app/(signage)/machine-signage/page.jsx b/javascript-version/src/app/(signage)/machine-signage/page.jsx
new file mode 100644
index 000000000..1b82007e9
--- /dev/null
+++ b/javascript-version/src/app/(signage)/machine-signage/page.jsx
@@ -0,0 +1,137 @@
+"use client"
+
+import { useState, useEffect, useMemo } from 'react'
+import Box from '@mui/material/Box'
+import Grid from '@mui/material/Grid'
+import Stack from '@mui/material/Stack'
+import Typography from '@mui/material/Typography'
+
+import useSignageData from '../components/useSignageData'
+import MachineStatusPanel from '../components/MachineStatusPanel'
+import InspectionPanel from '../components/InspectionPanel'
+import SpringMapPanel from '../components/SpringMapPanel'
+import DebugControls from '../components/DebugControls'
+import AlertOverlay from '../components/AlertOverlay'
+
+const SSE_URL = '/api/sse' 
+
+const Page = () => {
+  const data = useSignageData()
+  const [showMap, setShowMap] = useState(false)
+
+  // 【変更箇所】data.tiles からマップ用のデータオブジェクトを作成
+  const mapData = useMemo(() => {
+    return {
+      spring1: data.tiles.find(t => t.cameraId === 'B-spring01')?.status,
+      spring2: data.tiles.find(t => t.cameraId === 'B-spring02')?.status,
+      spring3: data.tiles.find(t => t.cameraId === 'B-spring03')?.status,
+      spring4: data.tiles.find(t => t.cameraId === 'B-spring04')?.status,
+    }
+  }, [data.tiles])
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setShowMap((prev) => !prev)
+    }, 10000)
+    return () => clearInterval(timer)
+  }, [])
+
+  useEffect(() => {
+    if (typeof window === 'undefined' || !window.EventSource) return
+    const eventSource = new EventSource(SSE_URL)
+
+    eventSource.addEventListener('sse:connected', (e) => {
+      console.log('SSE Connected')
+    })
+
+    const handleUpdate = (event) => {
+      console.log('New data received:', event.type)
+      // 必要に応じてここでデータの再取得を行う
+    }
+
+    eventSource.addEventListener('inspection:imageUploaded', handleUpdate)
+    eventSource.addEventListener('inspection:resultUpdated', handleUpdate)
+    eventSource.addEventListener('machine:started', handleUpdate)
+
+    return () => eventSource.close()
+  }, [])
+
+  return (
+    <Box sx={{ height: '100vh', display: 'flex', flexDirection: 'column', fontSize: '125%', overflow: 'hidden' }}>
+      <Box sx={{ px: 4, py: 3, flexShrink: 0 }}>
+        <Stack direction='row' alignItems='center' justifyContent='space-between'>
+          <Box>
+            <Typography variant='h3' fontWeight={900} letterSpacing={2} sx={{ fontSize: { xs: '2.75rem', md: '3.25rem' } }}>
+              工場ダッシュボード
+            </Typography>
+            <DebugControls onError={data.onDebugError} onWarning={data.onDebugWarning} onNormal={data.onDebugNormal} />
+          </Box>
+          <Box sx={{ textAlign: 'right' }}>
+            <Typography variant='h3' fontWeight={800} sx={{ fontSize: { xs: '2.75rem', md: '3.25rem' } }}>{data.clock.time}</Typography>
+            <Typography variant='h5' color='text.secondary' sx={{ fontSize: { xs: '1.75rem', md: '2rem' } }}>{data.clock.date}</Typography>
+          </Box>
+        </Stack>
+      </Box>
+
+      <Box sx={{ px: 4, pb: 4, flexGrow: 1, minHeight: 0, overflow: 'hidden' }}>
+        <Grid container spacing={4} sx={{ height: '100%' }}>
+          <Grid item xs={12} xl={4} sx={{ height: '100%' }}>
+            <MachineStatusPanel
+              machineName={data.machineName}
+              machineBadge={data.machineBadge}
+              todayUptimeSec={data.todayUptimeSec}
+              todayProdCount={data.todayProdCount}
+              logs={data.logs}
+              formatNumber={data.formatNumber}
+            />
+          </Grid>
+
+          <Grid item xs={12} xl={8} sx={{ height: '100%' }}>
+            <Stack spacing={4} sx={{ height: '100%' }}>
+              <Box sx={{ flexGrow: 1, minHeight: 0, position: 'relative', overflow: 'hidden' }}>
+                <Box sx={{ 
+                  position: 'absolute', top: 0, left: 0, width: '100%', height: '100%',
+                  opacity: showMap ? 0 : 1,
+                  transition: 'opacity 0.5s ease-in-out',
+                  pointerEvents: showMap ? 'none' : 'auto',
+                  zIndex: showMap ? 0 : 1
+                }}>
+                  <InspectionPanel overallStatus={data.overallStatus} tiles={data.tiles} />
+                </Box>
+
+                <Box sx={{ 
+                  position: 'absolute', top: 0, left: 0, width: '100%', height: '100%',
+                  opacity: showMap ? 1 : 0,
+                  transition: 'opacity 0.5s ease-in-out',
+                  zIndex: showMap ? 1 : 0
+                }}>
+                  {/* 【変更箇所】変換した本物のデータを渡す */}
+                  <SpringMapPanel data={mapData} />
+                </Box>
+              </Box>
+
+              <Grid container spacing={3} sx={{ flexShrink: 0 }}>
+                <Grid item xs={12} sm={6}>
+                  <Box sx={{ p: 3, bgcolor: 'background.paper', borderRadius: 2, textAlign: 'center' }}>
+                    <Typography variant='body1' color='text.secondary' sx={{ fontSize: '1.1rem' }}>rot_id</Typography>
+                    <Typography variant='h4' fontWeight={700} sx={{ fontSize: { xs: '2.2rem', md: '2.5rem' } }}>{data.rotId || '---'}</Typography>
+                  </Box>
+                </Grid>
+                <Grid item xs={12} sm={6}>
+                  <Box sx={{ p: 3, bgcolor: 'background.paper', borderRadius: 2, textAlign: 'center' }}>
+                    <Typography variant='body1' color='text.secondary' sx={{ fontSize: '1.1rem' }}>検査時間</Typography>
+                    <Typography variant='h4' fontWeight={700} sx={{ fontSize: { xs: '2.2rem', md: '2.5rem' } }}>{data.inspectionTime}</Typography>
+                  </Box>
+                </Grid>
+              </Grid>
+            </Stack>
+          </Grid>
+        </Grid>
+      </Box>
+
+      <AlertOverlay alert={data.alert} />
+    </Box>
+  )
+}
+
+export default Page
\ No newline at end of file
diff --git a/javascript-version/src/app/favicon.ico b/javascript-version/src/app/favicon.ico
index 91e6db8b3..0bd6aa95b 100644
Binary files a/javascript-version/src/app/favicon.ico and b/javascript-version/src/app/favicon.ico differ
diff --git a/javascript-version/src/app/layout.jsx b/javascript-version/src/app/layout.jsx
index ea7f39b0a..8b6dde2ee 100644
--- a/javascript-version/src/app/layout.jsx
+++ b/javascript-version/src/app/layout.jsx
@@ -3,14 +3,15 @@ import 'react-perfect-scrollbar/dist/css/styles.css'
 
 // Style Imports
 import '@/app/globals.css'
+import './(dashboard)/parts-inventory/parts-inventory.css'
 
 // Generated Icon CSS Imports
 import '@assets/iconify-icons/generated-icons.css'
 
 export const metadata = {
-  title: 'Demo: Materio - NextJS Dashboard Free',
+  title: 'MAT.io - 生産管理アプリケーション',
   description:
-    'Develop next-level web apps with Materio Dashboard Free - NextJS. Now, updated with lightning-fast routing powered by MUI and App router.'
+    '関東能力開発大学校 ボンネルコイルマットレス開発課題の生産管理Webアプリケーション'
 }
 
 const RootLayout = ({ children }) => {
diff --git a/javascript-version/src/assets/iconify-icons/bundle-icons-css.js b/javascript-version/src/assets/iconify-icons/bundle-icons-css.cjs
similarity index 95%
rename from javascript-version/src/assets/iconify-icons/bundle-icons-css.js
rename to javascript-version/src/assets/iconify-icons/bundle-icons-css.cjs
index eef4f01a6..a65cad280 100644
--- a/javascript-version/src/assets/iconify-icons/bundle-icons-css.js
+++ b/javascript-version/src/assets/iconify-icons/bundle-icons-css.cjs
@@ -10,12 +10,12 @@
  * This example uses Iconify Tools to import and clean up icons.
  * For Iconify Tools documentation visit https://docs.iconify.design/tools/tools2/
  */
-import { promises as fs } from 'node:fs'
-import { dirname, join } from 'node:path'
+const { promises: fs } = require('node:fs')
+const { dirname, join } = require('node:path')
 
 // Installation: npm install --save-dev @iconify/tools @iconify/utils @iconify/json @iconify/iconify
-import { cleanupSVG, importDirectory, isEmptyColor, parseColors, runSVGO } from '@iconify/tools'
-import { getIcons, getIconsCSS, stringToIcon } from '@iconify/utils'
+const { cleanupSVG, importDirectory, isEmptyColor, parseColors, runSVGO } = require('@iconify/tools')
+const { getIcons, getIconsCSS, stringToIcon } = require('@iconify/utils')
 
 const sources = {
   json: [
diff --git a/javascript-version/src/components/AuthGuard.jsx b/javascript-version/src/components/AuthGuard.jsx
new file mode 100644
index 000000000..269931cb8
--- /dev/null
+++ b/javascript-version/src/components/AuthGuard.jsx
@@ -0,0 +1,82 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+
+import { usePathname, useRouter } from 'next/navigation'
+import { fetchMeCached } from '@/utils/auth/meClient'
+
+// Client-side guard that checks access_token in storage and redirects to /login if missing
+export default function AuthGuard({ children }) {
+    const router = useRouter()
+    const pathname = usePathname()
+    const [authorized, setAuthorized] = useState(false)
+
+    useEffect(() => {
+        let isMounted = true
+
+        const redirectToLogin = () => {
+            const next = encodeURIComponent(pathname || '/')
+
+            router.replace(`/login?next=${next}`)
+        }
+
+        const clearAuth = () => {
+            try {
+                if (typeof window !== 'undefined') {
+                    window.localStorage.removeItem('access_token')
+                    window.localStorage.removeItem('user')
+                    window.sessionStorage.removeItem('access_token')
+                    window.sessionStorage.removeItem('user')
+                }
+            } catch {}
+        }
+
+        const redirectToError = (params = {}) => {
+            const search = new URLSearchParams({
+                from: pathname || '/',
+                ...Object.fromEntries(Object.entries(params).filter(([_, v]) => v != null))
+            }).toString()
+
+            router.replace(`/error?${search}`)
+        }
+
+        const checkAuth = async () => {
+            try {
+                const data = await fetchMeCached({ timeoutMs: 5000 })
+
+                if (!data) return redirectToLogin()
+
+                // Optionally refresh user info in storage for other consumers
+                try {
+                    if (typeof window !== 'undefined') {
+                        const useLocal = !!window.localStorage.getItem('access_token')
+                        const storage = useLocal ? window.localStorage : window.sessionStorage
+
+                        storage.setItem('user', JSON.stringify(data))
+                    }
+                } catch {}
+
+                if (isMounted) setAuthorized(true)
+            } catch (e) {
+                if (e && e.status === 401) {
+                    clearAuth()
+                    return redirectToLogin()
+                }
+
+                // Network/timeout error: redirect to error page
+                const isAbort = (e && typeof e === 'object' && 'name' in e && e.name === 'AbortError')
+                redirectToError({ code: isAbort ? 'timeout' : 'network' })
+            }
+        }
+
+        checkAuth()
+
+        return () => {
+            isMounted = false
+        }
+    }, [router, pathname])
+
+    if (!authorized) return null
+
+    return children
+}
diff --git a/javascript-version/src/components/layout/shared/Logo.jsx b/javascript-version/src/components/layout/shared/Logo.jsx
index 1f8e97ec4..5e980594b 100644
--- a/javascript-version/src/components/layout/shared/Logo.jsx
+++ b/javascript-version/src/components/layout/shared/Logo.jsx
@@ -16,7 +16,7 @@ const LogoText = styled.span`
   font-weight: 600;
   letter-spacing: 0.15px;
   text-transform: uppercase;
-  margin-inline-start: 10px;
+  margin-inline-start: 6px;
 `
 
 const Logo = ({ color }) => {
diff --git a/javascript-version/src/components/layout/shared/UserDropdown.jsx b/javascript-version/src/components/layout/shared/UserDropdown.jsx
index aa0a54cc2..cbc207843 100644
--- a/javascript-version/src/components/layout/shared/UserDropdown.jsx
+++ b/javascript-version/src/components/layout/shared/UserDropdown.jsx
@@ -1,7 +1,8 @@
-'use client'
+"use client"
 
 // React Imports
-import { useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
+import { fetchMeCached, invalidateMeCache } from '@/utils/auth/meClient'
 
 // Next Imports
 import { useRouter } from 'next/navigation'
@@ -30,9 +31,92 @@ const BadgeContentSpan = styled('span')({
   boxShadow: '0 0 0 2px var(--mui-palette-background-paper)'
 })
 
+// --- Avatar helpers ---------------------------------------------------------
+// Register に合わせた表示テキスト生成:
+// 1) スペース(半角/全角)や中点があれば先頭トークンを姓とみなす
+// 2) それ以外は連続する漢字ブロック(最長3文字)を姓とみなす
+// 3) 漢字がなければ先頭語から最大3文字
+// 4) 空なら『氏名』
+const getAvatarText = name => {
+  const raw = typeof name === 'string' ? name.trim() : ''
+
+  if (!raw) return '氏名'
+
+  // 分割候補: 半角/全角スペース, 中点
+  const token = raw.split(/[\t\s\u3000・]+/)[0]
+
+  if (token && token.length < raw.length) return token.slice(0, 3)
+
+  // 連続する漢字ブロックを抽出 (CJK統合漢字+拡張A)
+  const m = raw.match(/^[\u4E00-\u9FFF\u3400-\u4DBF]{1,3}/)
+
+  if (m) return m[0]
+
+  // 非漢字のみ: 先頭語から最大3文字
+  const firstWord = raw.split(/[\s\u3000]+/)[0]
+
+  
+return firstWord.slice(0, 3) || '氏名'
+}
+
+// 名前から安定したカラー(HSL)を生成
+const stringToHslColor = (str, s = 65, l = 48) => {
+  let hash = 0
+
+  for (let i = 0; i < (str || '').length; i++) {
+    hash = (hash << 5) - hash + str.charCodeAt(i)
+    hash |= 0
+  }
+
+  const hue = Math.abs(hash) % 360
+
+  
+return `hsl(${hue} ${s}% ${l}%)`
+}
+
+// ユーザーにカラーコード属性があればそれを優先
+const getUserColor = user => {
+  const c =
+    user?.employee_color_code ||
+    user?.color_code ||
+    user?.avatar_color ||
+    user?.profile_color ||
+    user?.bg_color ||
+    user?.color
+
+  if (typeof c === 'string' && c.trim()) {
+    // 先頭に#がないhexも許容
+    const v = c.trim()
+
+    if (/^#?[0-9a-fA-F]{6}$/.test(v)) return v.startsWith('#') ? v : `#${v}`
+    
+return v // hsl(...) / rgb(...), CSSカラー名など
+  }
+
+
+  // 名前から生成
+  const name = user?.employee_name || user?.name || user?.username || 'guest'
+
+  
+return stringToHslColor(name)
+}
+
+// Register の 80px 用 36/30/24 を 38px 用にスケール
+// 文字数に応じてフォントサイズを調整（38px円内）
+const getAvatarFontSize = text => {
+  const len = String(text || '').length
+
+  if (len <= 1) return 17
+  if (len === 2) return 14
+  
+return 12
+}
+
 const UserDropdown = () => {
   // States
   const [open, setOpen] = useState(false)
+  const [user, setUser] = useState(null)
+  const [loading, setLoading] = useState(true)
 
   // Refs
   const anchorRef = useRef(null)
@@ -40,6 +124,64 @@ const UserDropdown = () => {
   // Hooks
   const router = useRouter()
 
+  // Helpers
+  const getStoredToken = () => {
+    try {
+      if (typeof window === 'undefined') return null
+      
+return (
+        window.localStorage.getItem('access_token') ||
+        window.sessionStorage.getItem('access_token')
+      )
+    } catch {
+      return null
+    }
+  }
+
+  const clearStoredAuth = () => {
+    try {
+      if (typeof window !== 'undefined') {
+        window.localStorage.removeItem('access_token')
+        window.localStorage.removeItem('user')
+        window.sessionStorage.removeItem('access_token')
+        window.sessionStorage.removeItem('user')
+      }
+    } catch {}
+  }
+
+  // Fetch current user on mount
+  useEffect(() => {
+    let isMounted = true
+
+    const fetchMe = async () => {
+      setLoading(true)
+      const token = getStoredToken()
+      if (!token) {
+        setLoading(false)
+        return
+      }
+
+      try {
+        const data = await fetchMeCached({ timeoutMs: 5000 })
+        if (isMounted) setUser(data)
+      } catch (e) {
+        if (e && e.status === 401) {
+          clearStoredAuth()
+        }
+        // その他のネットワーク/タイムアウトなどは無視（UIはゲスト表示）
+      } finally {
+        if (isMounted) setLoading(false)
+      }
+    }
+
+    fetchMe()
+
+    
+return () => {
+      isMounted = false
+    }
+  }, [])
+
   const handleDropdownOpen = () => {
     !open ? setOpen(true) : setOpen(false)
   }
@@ -56,6 +198,24 @@ const UserDropdown = () => {
     setOpen(false)
   }
 
+  const handleLogout = async event => {
+    event?.preventDefault?.()
+    setOpen(false)
+
+    try {
+      const apiBase = process.env.NEXT_PUBLIC_BASE_PATH || ''
+
+      await fetch(`${apiBase}/api/auth/logout`, { method: 'POST', credentials: 'include' })
+    } catch (e) {
+      // ignore network errors; proceed to clear client state
+    }
+
+    clearStoredAuth()
+    invalidateMeCache()
+
+    router.replace('/login')
+  }
+
   return (
     <>
       <Badge
@@ -65,13 +225,25 @@ const UserDropdown = () => {
         anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
         className='mis-2'
       >
-        <Avatar
-          ref={anchorRef}
-          alt='John Doe'
-          src='/images/avatars/1.png'
-          onClick={handleDropdownOpen}
-          className='cursor-pointer bs-[38px] is-[38px]'
-        />
+        {(() => {
+          const displayName = user?.employee_name || user?.name || ''
+          const text = getAvatarText(displayName)
+          const bg = getUserColor(user)
+          const fontSize = getAvatarFontSize(text)
+
+          
+return (
+            <Avatar
+              ref={anchorRef}
+              alt={displayName || '氏名'}
+              onClick={handleDropdownOpen}
+              className='cursor-pointer bs-[38px] is-[38px]'
+              sx={{ bgcolor: bg, color: 'white', fontSize, fontWeight: 700 }}
+            >
+              {text}
+            </Avatar>
+          )
+        })()}
       </Badge>
       <Popper
         open={open}
@@ -92,26 +264,36 @@ const UserDropdown = () => {
               <ClickAwayListener onClickAway={e => handleDropdownClose(e)}>
                 <MenuList>
                   <div className='flex items-center plb-2 pli-4 gap-2' tabIndex={-1}>
-                    <Avatar alt='John Doe' src='/images/avatars/1.png' />
+                    {(() => {
+                      const displayName = user?.employee_name || user?.name || ''
+                      const text = getAvatarText(displayName)
+                      const bg = getUserColor(user)
+                      const fontSize = getAvatarFontSize(text)
+
+                      
+return (
+                        <Avatar alt={displayName || '氏名'} sx={{ bgcolor: bg, color: 'white', fontSize, fontWeight: 700 }}>
+                          {text}
+                        </Avatar>
+                      )
+                    })()}
                     <div className='flex items-start flex-col'>
                       <Typography className='font-medium' color='text.primary'>
-                        John Doe
+                        {user?.employee_name || (loading ? '読み込み中…' : 'ゲスト')}
+                      </Typography>
+                      <Typography variant='caption'>
+                        {user?.role_name || ''}
                       </Typography>
-                      <Typography variant='caption'>Admin</Typography>
                     </div>
                   </div>
                   <Divider className='mlb-1' />
-                  <MenuItem className='gap-3' onClick={e => handleDropdownClose(e)}>
+                  <MenuItem className='gap-3' onClick={e => handleDropdownClose(e, '/account-settings')}>
                     <i className='ri-user-3-line' />
-                    <Typography color='text.primary'>My Profile</Typography>
+                    <Typography color='text.primary'>マイプロフィール</Typography>
                   </MenuItem>
-                  <MenuItem className='gap-3' onClick={e => handleDropdownClose(e)}>
+                  <MenuItem className='gap-3' onClick={e => handleDropdownClose(e, '/factory-settings')}>
                     <i className='ri-settings-4-line' />
-                    <Typography color='text.primary'>Settings</Typography>
-                  </MenuItem>
-                  <MenuItem className='gap-3' onClick={e => handleDropdownClose(e)}>
-                    <i className='ri-money-dollar-circle-line' />
-                    <Typography color='text.primary'>Pricing</Typography>
+                    <Typography color='text.primary'>工場設定</Typography>
                   </MenuItem>
                   <MenuItem className='gap-3' onClick={e => handleDropdownClose(e)}>
                     <i className='ri-question-line' />
@@ -124,10 +306,10 @@ const UserDropdown = () => {
                       color='error'
                       size='small'
                       endIcon={<i className='ri-logout-box-r-line' />}
-                      onClick={e => handleDropdownClose(e, '/login')}
+                      onClick={handleLogout}
                       sx={{ '& .MuiButton-endIcon': { marginInlineStart: 1.5 } }}
                     >
-                      Logout
+                      ログアウト
                     </Button>
                   </div>
                 </MenuList>
diff --git a/javascript-version/src/components/layout/shared/search/index.jsx b/javascript-version/src/components/layout/shared/search/index.jsx
index e94e5a82b..f1e92099c 100644
--- a/javascript-version/src/components/layout/shared/search/index.jsx
+++ b/javascript-version/src/components/layout/shared/search/index.jsx
@@ -19,7 +19,8 @@ const NavSearch = () => {
       <IconButton className='text-textPrimary'>
         <i className='ri-search-line' />
       </IconButton>
-      <div className='whitespace-nowrap select-none text-textDisabled'>Search ⌘K</div>
+      <div className='whitespace-nowrap select-none text-textDisabled'>検索（未実装）
+      </div>
     </div>
   )
 }
diff --git a/javascript-version/src/components/layout/vertical/FooterContent.jsx b/javascript-version/src/components/layout/vertical/FooterContent.jsx
index 7a3edba4f..5a5f563cc 100644
--- a/javascript-version/src/components/layout/vertical/FooterContent.jsx
+++ b/javascript-version/src/components/layout/vertical/FooterContent.jsx
@@ -22,15 +22,15 @@ const FooterContent = () => {
     >
       <p>
         <span>{`© ${new Date().getFullYear()}, Made with `}</span>
-        <span>{`❤️`}</span>
+        <span>{``}</span>
         <span>{` by `}</span>
-        <Link href='https://themeselection.com' target='_blank' className='text-primary'>
-          ThemeSelection
+        <Link href='https://sabiaka.github.io/G3_webapp_front_2025/' target='_blank' className='text-primary'>
+          生産管理システム開発部 生産電子情報2025
         </Link>
       </p>
       {!isBreakpointReached && (
         <div className='flex items-center gap-4'>
-          <Link href='https://themeselection.com/license' target='_blank' className='text-primary'>
+          {/* <Link href='https://themeselection.com/license' target='_blank' className='text-primary'>
             License
           </Link>
           <Link href='https://themeselection.com' target='_blank' className='text-primary'>
@@ -45,7 +45,7 @@ const FooterContent = () => {
             className='text-primary'
           >
             Support
-          </Link>
+          </Link> */}
         </div>
       )}
     </div>
diff --git a/javascript-version/src/components/layout/vertical/NavbarContent.jsx b/javascript-version/src/components/layout/vertical/NavbarContent.jsx
index ced3bc919..d3c000db8 100644
--- a/javascript-version/src/components/layout/vertical/NavbarContent.jsx
+++ b/javascript-version/src/components/layout/vertical/NavbarContent.jsx
@@ -24,7 +24,7 @@ const NavbarContent = () => {
         <NavSearch />
       </div>
       <div className='flex items-center'>
-        <Link
+        {/* <Link
           className='flex mie-2'
           href={`https://github.com/themeselection/${process.env.NEXT_PUBLIC_REPO_NAME}`}
           target='_blank'
@@ -34,7 +34,7 @@ const NavbarContent = () => {
             alt='GitHub Repo stars'
             src={`https://img.shields.io/github/stars/themeselection/${process.env.NEXT_PUBLIC_REPO_NAME}`}
           />
-        </Link>
+        </Link> */}
         <ModeDropdown />
         <IconButton className='text-textPrimary'>
           <i className='ri-notification-2-line' />
diff --git a/javascript-version/src/components/layout/vertical/VerticalMenu.jsx b/javascript-version/src/components/layout/vertical/VerticalMenu.jsx
index 78fd21ae8..02110695b 100644
--- a/javascript-version/src/components/layout/vertical/VerticalMenu.jsx
+++ b/javascript-version/src/components/layout/vertical/VerticalMenu.jsx
@@ -1,20 +1,20 @@
-// MUI Imports
+// MUI インポート
 import Chip from '@mui/material/Chip'
 import { useTheme } from '@mui/material/styles'
 
-// Third-party Imports
+// サードパーティ インポート
 import PerfectScrollbar from 'react-perfect-scrollbar'
 
-// Component Imports
+// コンポーネント インポート
 import { Menu, SubMenu, MenuItem, MenuSection } from '@menu/vertical-menu'
 
-// Hook Imports
+// フック インポート
 import useVerticalNav from '@menu/hooks/useVerticalNav'
 
-// Styled Component Imports
+// スタイル付きコンポーネント インポート
 import StyledVerticalNavExpandIcon from '@menu/styles/vertical/StyledVerticalNavExpandIcon'
 
-// Style Imports
+// スタイル インポート
 import menuItemStyles from '@core/styles/vertical/menuItemStyles'
 import menuSectionStyles from '@core/styles/vertical/menuSectionStyles'
 
@@ -25,14 +25,12 @@ const RenderExpandIcon = ({ open, transitionDuration }) => (
 )
 
 const VerticalMenu = ({ scrollMenu }) => {
-  // Hooks
+  // フック
   const theme = useTheme()
   const { isBreakpointReached, transitionDuration } = useVerticalNav()
   const ScrollWrapper = isBreakpointReached ? 'div' : PerfectScrollbar
 
   return (
-    // eslint-disable-next-line lines-around-comment
-    /* Custom scrollbar instead of browser scroll, remove if you want browser scroll only */
     <ScrollWrapper
       {...(isBreakpointReached
         ? {
@@ -44,233 +42,56 @@ const VerticalMenu = ({ scrollMenu }) => {
             onScrollY: container => scrollMenu(container, true)
           })}
     >
-      {/* Incase you also want to scroll NavHeader to scroll with Vertical Menu, remove NavHeader from above and paste it below this comment */}
-      {/* Vertical Menu */}
       <Menu
         menuItemStyles={menuItemStyles(theme)}
         renderExpandIcon={({ open }) => <RenderExpandIcon open={open} transitionDuration={transitionDuration} />}
-        renderExpandedMenuItemIcon={{ icon: <i className='ri-circle-line' /> }}
+        renderExpandedMenuItemIcon={{ icon: <span style={{ fontSize: 10, lineHeight: 1 }}>•</span> }}
         menuSectionStyles={menuSectionStyles(theme)}
       >
-        <SubMenu
-          label='Dashboards'
-          icon={<i className='ri-home-smile-line' />}
-          suffix={<Chip label='5' size='small' color='error' />}
-        >
-          <MenuItem
-            href={`${process.env.NEXT_PUBLIC_PRO_URL}/dashboards/crm`}
-            suffix={<Chip label='Pro' size='small' color='primary' variant='tonal' />}
-            target='_blank'
-          >
-            CRM
+        <MenuItem href='/' icon={<span role='img' aria-label='home'>🏠</span>}>
+          トップページ
+        </MenuItem>
+        <MenuSection label='製造管理システム'>
+          <MenuItem href='/production-management' icon={<span role='img' aria-label='chart'>📊</span>}>
+            生産数管理
           </MenuItem>
-          <MenuItem href='/'>Analytics</MenuItem>
-          <MenuItem
-            href={`${process.env.NEXT_PUBLIC_PRO_URL}/dashboards/ecommerce`}
-            suffix={<Chip label='Pro' size='small' color='primary' variant='tonal' />}
-            target='_blank'
-          >
-            eCommerce
+          <MenuItem href='/image-inspection' icon={<span role='img' aria-label='camera'>📷</span>}>
+            画像検査ステータス
           </MenuItem>
-          <MenuItem
-            href={`${process.env.NEXT_PUBLIC_PRO_URL}/dashboards/academy`}
-            suffix={<Chip label='Pro' size='small' color='primary' variant='tonal' />}
-            target='_blank'
-          >
-            Academy
+          <MenuItem href='/employee-list' icon={<span role='img' aria-label='user'>👤</span>}>
+            従業員名簿
           </MenuItem>
-          <MenuItem
-            href={`${process.env.NEXT_PUBLIC_PRO_URL}/dashboards/logistics`}
-            suffix={<Chip label='Pro' size='small' color='primary' variant='tonal' />}
-            target='_blank'
-          >
-            Logistics
-          </MenuItem>
-        </SubMenu>
-        <SubMenu
-          label='Front Pages'
-          icon={<i className='ri-file-copy-line' />}
-          suffix={<Chip label='Pro' size='small' color='primary' variant='tonal' />}
-        >
-          <MenuItem href={`${process.env.NEXT_PUBLIC_PRO_URL}/front-pages/landing-page`} target='_blank'>
-            Landing
-          </MenuItem>
-          <MenuItem href={`${process.env.NEXT_PUBLIC_PRO_URL}/front-pages/pricing`} target='_blank'>
-            Pricing
+          <MenuItem href='/machine-status' icon={<span role='img' aria-label='cpu'>🖥️</span>}>
+            生産機械ステータス
           </MenuItem>
-          <MenuItem href={`${process.env.NEXT_PUBLIC_PRO_URL}/front-pages/payment`} target='_blank'>
-            Payment
+          <MenuItem href='/shipping-instructions' icon={<span role='img' aria-label='ship'>🚢</span>}>
+            製造出荷指示周知
           </MenuItem>
-          <MenuItem href={`${process.env.NEXT_PUBLIC_PRO_URL}/front-pages/checkout`} target='_blank'>
-            Checkout
+          <MenuItem href='/parts-inventory' icon={<span role='img' aria-label='inventory'>📦</span>}>
+            部品在庫管理
           </MenuItem>
-          <MenuItem href={`${process.env.NEXT_PUBLIC_PRO_URL}/front-pages/help-center`} target='_blank'>
-            Help Center
-          </MenuItem>
-        </SubMenu>
-        <MenuSection label='Apps & Pages'>
-          <MenuItem
-            href={`${process.env.NEXT_PUBLIC_PRO_URL}/apps/email`}
-            icon={<i className='ri-mail-open-line' />}
-            suffix={<Chip label='Pro' size='small' color='primary' variant='tonal' />}
-            target='_blank'
-          >
-            Email
-          </MenuItem>
-          <MenuItem
-            href={`${process.env.NEXT_PUBLIC_PRO_URL}/apps/chat`}
-            icon={<i className='ri-wechat-line' />}
-            suffix={<Chip label='Pro' size='small' color='primary' variant='tonal' />}
-            target='_blank'
-          >
-            Chat
-          </MenuItem>
-          <MenuItem
-            href={`${process.env.NEXT_PUBLIC_PRO_URL}/apps/calendar`}
-            icon={<i className='ri-calendar-line' />}
-            suffix={<Chip label='Pro' size='small' color='primary' variant='tonal' />}
-            target='_blank'
-          >
-            Calendar
-          </MenuItem>
-          <MenuItem
-            href={`${process.env.NEXT_PUBLIC_PRO_URL}/apps/kanban`}
-            icon={<i className='ri-drag-drop-line' />}
-            suffix={<Chip label='Pro' size='small' color='primary' variant='tonal' />}
-            target='_blank'
-          >
-            Kanban
-          </MenuItem>
-          <MenuItem href='/account-settings' icon={<i className='ri-user-settings-line' />}>
-            Account Settings
-          </MenuItem>
-          <SubMenu label='Auth Pages' icon={<i className='ri-shield-keyhole-line' />}>
-            <MenuItem href='/login' target='_blank'>
-              Login
-            </MenuItem>
-            <MenuItem href='/register' target='_blank'>
-              Register
-            </MenuItem>
-            <MenuItem href='/forgot-password' target='_blank'>
-              Forgot Password
-            </MenuItem>
-          </SubMenu>
-          <SubMenu label='Miscellaneous' icon={<i className='ri-question-line' />}>
-            <MenuItem href='/error' target='_blank'>
-              Error
-            </MenuItem>
-            <MenuItem href='/under-maintenance' target='_blank'>
-              Under Maintenance
-            </MenuItem>
-          </SubMenu>
-          <MenuItem href='/card-basic' icon={<i className='ri-bar-chart-box-line' />}>
-            Cards
+          <MenuItem href='/daily-reports' icon={<span role='img' aria-label='reports'>📝</span>}>
+            日報一覧
           </MenuItem>
         </MenuSection>
-        <MenuSection label='Forms & Tables'>
-          <MenuItem href='/form-layouts' icon={<i className='ri-layout-4-line' />}>
-            Form Layouts
+        <MenuSection label='その他のページ'>
+          <MenuItem href='/factory-settings' icon={<span role='img' aria-label='factory'>🏭</span>}>
+            工場設定
           </MenuItem>
           <MenuItem
-            href={`${process.env.NEXT_PUBLIC_PRO_URL}/forms/form-validation`}
-            icon={<i className='ri-checkbox-multiple-line' />}
-            suffix={<Chip label='Pro' size='small' color='primary' variant='tonal' />}
-            target='_blank'
+            href='/machine-signage'
+            icon={<span role='img' aria-label='display'>🖥️</span>}
           >
-            Form Validation
-          </MenuItem>
-          <MenuItem
-            href={`${process.env.NEXT_PUBLIC_PRO_URL}/forms/form-wizard`}
-            icon={<i className='ri-git-commit-line' />}
-            suffix={<Chip label='Pro' size='small' color='primary' variant='tonal' />}
-            target='_blank'
-          >
-            Form Wizard
-          </MenuItem>
-          <MenuItem
-            href={`${process.env.NEXT_PUBLIC_PRO_URL}/react-table`}
-            icon={<i className='ri-table-alt-line' />}
-            suffix={<Chip label='Pro' size='small' color='primary' variant='tonal' />}
-            target='_blank'
-          >
-            React Table
-          </MenuItem>
-          <MenuItem
-            href={`${process.env.NEXT_PUBLIC_DOCS_URL}/docs/user-interface/form-elements`}
-            icon={<i className='ri-radio-button-line' />}
-            suffix={<i className='ri-external-link-line text-xl' />}
-            target='_blank'
-          >
-            Form Elements
-          </MenuItem>
-          <MenuItem
-            href={`${process.env.NEXT_PUBLIC_DOCS_URL}/docs/user-interface/mui-table`}
-            icon={<i className='ri-table-2' />}
-            suffix={<i className='ri-external-link-line text-xl' />}
-            target='_blank'
-          >
-            MUI Tables
+            生産機械サイネージ
           </MenuItem>
         </MenuSection>
-        <MenuSection label='Misc'>
-          <MenuItem
-            href={`${process.env.NEXT_PUBLIC_DOCS_URL}/docs/user-interface/foundation`}
-            icon={<i className='ri-pantone-line' />}
-            suffix={<i className='ri-external-link-line text-xl' />}
-            target='_blank'
-          >
-            Foundation
-          </MenuItem>
-          <MenuItem
-            href={`${process.env.NEXT_PUBLIC_DOCS_URL}/docs/user-interface/components`}
-            icon={<i className='ri-toggle-line' />}
-            suffix={<i className='ri-external-link-line text-xl' />}
-            target='_blank'
-          >
-            Components
-          </MenuItem>
-          <MenuItem
-            href={`${process.env.NEXT_PUBLIC_DOCS_URL}/docs/menu-examples/overview`}
-            icon={<i className='ri-menu-search-line' />}
-            suffix={<i className='ri-external-link-line text-xl' />}
-            target='_blank'
-          >
-            Menu Examples
-          </MenuItem>
-          <MenuItem
-            href={`https://github.com/themeselection/${process.env.NEXT_PUBLIC_REPO_NAME}/issues`}
-            icon={<i className='ri-lifebuoy-line' />}
-            suffix={<i className='ri-external-link-line text-xl' />}
-            target='_blank'
-          >
-            Raise Support
+        <MenuSection label='デバッグ'>
+          <MenuItem href='http://10.100.54.170:4001/static/index.html' icon={<span role='img' aria-label='ssh'>🔐</span>}>
+            SSH接続ページ
           </MenuItem>
-          <MenuItem
-            href={process.env.NEXT_PUBLIC_DOCS_URL}
-            icon={<i className='ri-book-line' />}
-            suffix={<i className='ri-external-link-line text-xl' />}
-            target='_blank'
-          >
-            Documentation
+          <MenuItem href='/sse-monitoring' icon={<span role='img' aria-label='monitoring'>📡</span>}>
+            SSE監視ページ
           </MenuItem>
-          <SubMenu label='Others' icon={<i className='ri-more-line' />}>
-            <MenuItem suffix={<Chip label='New' size='small' color='info' />}>Item With Badge</MenuItem>
-            <MenuItem
-              href='https://themeselection.com'
-              target='_blank'
-              suffix={<i className='ri-external-link-line text-xl' />}
-            >
-              External Link
-            </MenuItem>
-            <SubMenu label='Menu Levels'>
-              <MenuItem>Menu Level 2</MenuItem>
-              <SubMenu label='Menu Level 2'>
-                <MenuItem>Menu Level 3</MenuItem>
-                <MenuItem>Menu Level 3</MenuItem>
-              </SubMenu>
-            </SubMenu>
-            <MenuItem disabled>Disabled Menu</MenuItem>
-          </SubMenu>
         </MenuSection>
       </Menu>
     </ScrollWrapper>
diff --git a/javascript-version/src/components/surface/SurfaceBox.jsx b/javascript-version/src/components/surface/SurfaceBox.jsx
new file mode 100644
index 000000000..39cca6b8e
--- /dev/null
+++ b/javascript-version/src/components/surface/SurfaceBox.jsx
@@ -0,0 +1,34 @@
+"use client"
+
+import { forwardRef } from 'react'
+import Box from '@mui/material/Box'
+
+// Variant mapping to a background token derived from the theme.
+const variantToBg = (theme, variant) => {
+  switch (variant) {
+    case 'paper':
+      return theme.palette.background.paper
+    case 'default':
+      return theme.palette.background.default
+    case 'soft':
+    default:
+      // Prefer custom surface color if provided by theme; fallback to grey scale.
+      return (
+        theme.palette?.customColors?.greyLightBg ||
+        (theme.palette.mode === 'dark' ? 'grey.900' : 'grey.50')
+      )
+  }
+}
+
+const SurfaceBox = forwardRef(function SurfaceBox(props, ref) {
+  const { variant = 'soft', sx, ...rest } = props
+  return (
+    <Box
+      ref={ref}
+      sx={{ bgcolor: theme => variantToBg(theme, variant), ...sx }}
+      {...rest}
+    />
+  )
+})
+
+export default SurfaceBox
diff --git a/javascript-version/src/components/theme/index.jsx b/javascript-version/src/components/theme/index.jsx
index 918809a6a..89c9d077d 100644
--- a/javascript-version/src/components/theme/index.jsx
+++ b/javascript-version/src/components/theme/index.jsx
@@ -19,6 +19,7 @@ import ModeChanger from './ModeChanger'
 
 // Config Imports
 import themeConfig from '@configs/themeConfig'
+import paletteOverrides from '@configs/paletteOverrides'
 import primaryColorConfig from '@configs/primaryColorConfig'
 
 // Hook Imports
@@ -44,7 +45,10 @@ const ThemeProvider = props => {
               main: primaryColorConfig[0].main,
               light: lighten(primaryColorConfig[0].main, 0.2),
               dark: darken(primaryColorConfig[0].main, 0.1)
-            }
+            },
+            // Optional background/surface overrides
+            ...(paletteOverrides?.light?.background ? { background: paletteOverrides.light.background } : {}),
+            ...(paletteOverrides?.light?.customColors ? { customColors: paletteOverrides.light.customColors } : {})
           }
         },
         dark: {
@@ -53,7 +57,10 @@ const ThemeProvider = props => {
               main: primaryColorConfig[0].main,
               light: lighten(primaryColorConfig[0].main, 0.2),
               dark: darken(primaryColorConfig[0].main, 0.1)
-            }
+            },
+            // Optional background/surface overrides
+            ...(paletteOverrides?.dark?.background ? { background: paletteOverrides.dark.background } : {}),
+            ...(paletteOverrides?.dark?.customColors ? { customColors: paletteOverrides.dark.customColors } : {})
           }
         }
       }
diff --git a/javascript-version/src/components/upgrade-to-pro-button/index.jsx b/javascript-version/src/components/upgrade-to-pro-button/index.jsx
index 7e82c9406..6c3743e57 100644
--- a/javascript-version/src/components/upgrade-to-pro-button/index.jsx
+++ b/javascript-version/src/components/upgrade-to-pro-button/index.jsx
@@ -53,7 +53,7 @@ const TooltipContent = () => {
 const UpgradeToProButton = () => {
   return (
     <div className={classnames(styles.wrapper, 'mui-fixed')}>
-      <Tooltip
+      {/* <Tooltip
         title={<TooltipContent />}
         placement='top-end'
         slotProps={{ tooltip: { style: { padding: 0, backgroundColor: 'transparent', maxInlineSize: 400 } } }}
@@ -67,7 +67,7 @@ const UpgradeToProButton = () => {
           Upgrade to Pro
           <span className={styles.buttonInner} />
         </a>
-      </Tooltip>
+      </Tooltip> */}
     </div>
   )
 }
diff --git a/javascript-version/src/configs/paletteOverrides.js b/javascript-version/src/configs/paletteOverrides.js
new file mode 100644
index 000000000..60a6f1847
--- /dev/null
+++ b/javascript-version/src/configs/paletteOverrides.js
@@ -0,0 +1,18 @@
+// Optional palette overrides to tune light/dark backgrounds and common surface colors.
+// Edit these values to change the overall dark/light background tone across the app.
+// Leave a field undefined to keep the template defaults from src/@core/theme/colorSchemes.js
+
+const paletteOverrides = {
+  light: {
+    // Example: override light mode backgrounds (keep defaults if you prefer)
+    // background: { default: '#F4F5FA', paper: '#FFFFFF' },
+    // customColors: { greyLightBg: '#FAFAFA' }
+  },
+  dark: {
+    // Align to template's purple-ish dark theme
+    background: { default: '#28243D', paper: '#312D4B' },
+    customColors: { greyLightBg: '#373350' }
+  }
+}
+
+export default paletteOverrides
diff --git a/javascript-version/src/configs/themeConfig.js b/javascript-version/src/configs/themeConfig.js
index 1ecfb86a1..2ff8e60e1 100644
--- a/javascript-version/src/configs/themeConfig.js
+++ b/javascript-version/src/configs/themeConfig.js
@@ -10,7 +10,7 @@
  * Another way is to clear the cookie from the browser's Application/Storage tab and then reload the page.
  */
 const themeConfig = {
-  templateName: 'Materio',
+  templateName: 'MAT.io',
   settingsCookieName: 'materio-mui-next-free-demo',
   mode: 'light', // 'light', 'dark'
   layoutPadding: 24, // Common padding for header, content, footer layout components (in px)
diff --git a/javascript-version/src/types/canvas-confetti.d.ts b/javascript-version/src/types/canvas-confetti.d.ts
new file mode 100644
index 000000000..d4e867d97
--- /dev/null
+++ b/javascript-version/src/types/canvas-confetti.d.ts
@@ -0,0 +1,13 @@
+declare module 'canvas-confetti' {
+  type Shape = any;
+
+  // default export is a function that also has helper functions as properties
+  function confetti(opts?: any): void;
+
+  namespace confetti {
+    function shapeFromText(opts: { text: string, scalar?: number}): Shape;
+    function shapeFromPath(opts: { path: string, scalar?: number}): Shape;
+  }
+
+  export default confetti;
+}
diff --git a/javascript-version/src/types/dailyReportTypes.ts b/javascript-version/src/types/dailyReportTypes.ts
new file mode 100644
index 000000000..d1d417e4d
--- /dev/null
+++ b/javascript-version/src/types/dailyReportTypes.ts
@@ -0,0 +1,19 @@
+// APIから返ってくるデータ（1件分）
+export type DailyReport = {
+  report_id: number
+  employee_id: number
+  employee_name: string
+  line_id: number
+  line_name: string     // UIの「製品名」として使用
+  report_date: string   // UIの「日付」として使用
+  notes: string | null  // UIの「作業内容」として使用
+  updated_at: string
+}
+
+// 新規作成・編集で送るデータ
+export type ReportFormData = {
+  employee_id: number | string
+  line_id: number | string
+  report_date: string
+  notes: string
+}
\ No newline at end of file
diff --git a/javascript-version/src/utils/auth/meClient.js b/javascript-version/src/utils/auth/meClient.js
new file mode 100644
index 000000000..5fcf7261a
--- /dev/null
+++ b/javascript-version/src/utils/auth/meClient.js
@@ -0,0 +1,85 @@
+// Lightweight client-side cache for GET /api/auth/me
+// - Dedupes concurrent calls by sharing a single in-flight Promise
+// - Caches the successful response for a short TTL
+// - Provides manual invalidation for logout or profile updates
+
+let inFlight = null
+let cache = null // { ts: number, data: any }
+
+const getNow = () => Date.now()
+
+const getStoredToken = () => {
+  try {
+    if (typeof window === 'undefined') return null
+    return (
+      window.localStorage.getItem('access_token') ||
+      window.sessionStorage.getItem('access_token')
+    )
+  } catch {
+    return null
+  }
+}
+
+export const invalidateMeCache = () => {
+  cache = null
+}
+
+export const seedMeCache = data => {
+  cache = { ts: getNow(), data }
+}
+
+export async function fetchMeCached(options = {}) {
+  const { force = false, timeoutMs } = options
+  const token = getStoredToken()
+  if (!token) return null
+
+  const ttl = (() => {
+    const v = Number(process.env.NEXT_PUBLIC_ME_TTL_MS)
+    return Number.isFinite(v) && v > 0 ? v : 60_000
+  })()
+
+  // Serve from cache if fresh and not forced
+  if (!force && cache && getNow() - cache.ts < ttl) {
+    return cache.data
+  }
+
+  // Share in-flight request if present
+  if (inFlight) return inFlight
+
+  const apiBase = process.env.NEXT_PUBLIC_BASE_PATH || ''
+
+  const controller = new AbortController()
+  let timeoutId
+  const ms = Number.isFinite(timeoutMs) ? timeoutMs : undefined
+  if (ms && ms > 0) timeoutId = setTimeout(() => controller.abort(), ms)
+
+  inFlight = fetch(`${apiBase}/api/auth/me`, {
+    headers: { Authorization: `Bearer ${token}` },
+    credentials: 'include',
+    signal: controller.signal
+  })
+    .then(async res => {
+      if (res.ok) {
+        const data = await res.json()
+        cache = { ts: getNow(), data }
+        return data
+      }
+      const err = new Error(`HTTP ${res.status}`)
+      err.status = res.status
+      throw err
+    })
+    .finally(() => {
+      if (timeoutId) clearTimeout(timeoutId)
+      inFlight = null
+    })
+
+  return inFlight
+}
+
+const meClient = {
+  fetchMeCached,
+  invalidateMeCache,
+  seedMeCache
+}
+
+export default meClient
diff --git a/javascript-version/src/views/Error.jsx b/javascript-version/src/views/Error.jsx
new file mode 100644
index 000000000..32bbd05d9
--- /dev/null
+++ b/javascript-version/src/views/Error.jsx
@@ -0,0 +1,72 @@
+'use client'
+
+import Link from 'next/link'
+
+import Button from '@mui/material/Button'
+import Typography from '@mui/material/Typography'
+
+import Illustrations from '@components/Illustrations'
+import { useImageVariant } from '@core/hooks/useImageVariant'
+
+export default function ErrorView({ mode, code: rawCode, from: rawFrom }) {
+  const darkImg = '/images/pages/misc-mask-dark.png'
+  const lightImg = '/images/pages/misc-mask-light.png'
+  const miscBackground = useImageVariant(mode, lightImg, darkImg)
+
+  const code = rawCode || 'unknown'
+  const from = typeof rawFrom === 'string' && rawFrom.startsWith('/') ? rawFrom : '/'
+
+  const titleMap = {
+    timeout: 'サーバーが応答しません',
+    network: 'ネットワークエラー',
+    unknown: 'エラーが発生しました'
+  }
+
+  const descriptionMap = {
+    timeout: '数秒待ちましたがバックエンドから応答がありません。少し時間をおいて再度お試しください。',
+    network: 'サーバーに接続できませんでした。ネットワークを確認して再度お試しください。',
+    unknown: '問題が発生しました。後ほどもう一度お試しください。'
+  }
+
+  const isHttpStatus = /^\d{3}$/.test(code)
+  const title = isHttpStatus ? `エラー ${code}` : (titleMap[code] || titleMap.unknown)
+
+  const description = isHttpStatus
+    ? 'バックエンドがエラーを返しました。時間をおいて再度お試しください。'
+    : (descriptionMap[code] || descriptionMap.unknown)
+
+  return (
+    <div className='flex items-center justify-center min-bs-[100dvh] relative p-6 overflow-x-hidden'>
+      <div className='flex items-center flex-col text-center gap-10'>
+        <div className='flex flex-col gap-2 is-[90vw] sm:is-[unset]'>
+          <Typography className='font-medium text-5xl sm:text-6xl' color='text.primary'>
+            {title}
+          </Typography>
+          <Typography>{description}</Typography>
+          {from && (
+            <Typography variant='body2' color='text.secondary'>
+              元のページ: {from}
+            </Typography>
+          )}
+        </div>
+        <img
+          alt='error-illustration'
+          src='/images/illustrations/characters/6.png'
+          className='object-cover bs-[340px] md:bs-[420px] lg:bs-[480px]'
+        />
+        <div className='flex gap-3'>
+          <Button href={from || '/'} component={Link} variant='contained'>
+            元のページへ戻る
+          </Button>
+          <Button href='/' component={Link} variant='outlined'>
+            ホーム
+          </Button>
+          <Button href='/login' component={Link} variant='outlined'>
+            ログイン
+          </Button>
+        </div>
+      </div>
+      <Illustrations maskImg={{ src: miscBackground }} />
+    </div>
+  )
+}
diff --git a/javascript-version/src/views/ForgotPassword.jsx b/javascript-version/src/views/ForgotPassword.jsx
index 27226fa31..705e0c93d 100644
--- a/javascript-version/src/views/ForgotPassword.jsx
+++ b/javascript-version/src/views/ForgotPassword.jsx
@@ -34,20 +34,16 @@ const ForgotPassword = ({ mode }) => {
           <Link href='/' className='flex justify-center items-center mbe-6'>
             <Logo />
           </Link>
-          <Typography variant='h4'>Forgot Password 🔒</Typography>
+          <Typography variant='h4'>パスワードをお忘れですか 🔒</Typography>
           <div className='flex flex-col gap-5'>
             <Typography className='mbs-1'>
-              Enter your email and we&#39;ll send you instructions to reset your password
+              パスワードを確認 ･ リセットするには、管理者にお問い合わせください。
             </Typography>
             <Form noValidate autoComplete='off' className='flex flex-col gap-5'>
-              <TextField autoFocus fullWidth label='Email' />
-              <Button fullWidth variant='contained' type='submit'>
-                Send reset link
-              </Button>
               <Typography className='flex justify-center items-center' color='primary'>
                 <Link href='/login' className='flex items-center'>
                   <DirectionalIcon ltrIconClass='ri-arrow-left-s-line' rtlIconClass='ri-arrow-right-s-line' />
-                  <span>Back to Login</span>
+                  <span>ログイン画面へ戻る</span>
                 </Link>
               </Typography>
             </Form>
diff --git a/javascript-version/src/views/Login.jsx b/javascript-version/src/views/Login.jsx
index 7064da7b4..bb00dd8ee 100644
--- a/javascript-version/src/views/Login.jsx
+++ b/javascript-version/src/views/Login.jsx
@@ -5,7 +5,7 @@ import { useState } from 'react'
 
 // Next Imports
 import Link from 'next/link'
-import { useRouter } from 'next/navigation'
+import { useRouter, useSearchParams } from 'next/navigation'
 
 // MUI Imports
 import Card from '@mui/material/Card'
@@ -18,6 +18,7 @@ import Checkbox from '@mui/material/Checkbox'
 import Button from '@mui/material/Button'
 import FormControlLabel from '@mui/material/FormControlLabel'
 import Divider from '@mui/material/Divider'
+import Alert from '@mui/material/Alert'
 
 // Component Imports
 import Logo from '@components/layout/shared/Logo'
@@ -32,6 +33,11 @@ import { useImageVariant } from '@core/hooks/useImageVariant'
 const Login = ({ mode }) => {
   // States
   const [isPasswordShown, setIsPasswordShown] = useState(false)
+  const [employeeUserId, setEmployeeUserId] = useState('')
+  const [password, setPassword] = useState('')
+  const [rememberMe, setRememberMe] = useState(false)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState('')
 
   // Vars
   const darkImg = '/images/pages/auth-v1-mask-dark.png'
@@ -39,12 +45,51 @@ const Login = ({ mode }) => {
 
   // Hooks
   const router = useRouter()
+  const searchParams = useSearchParams()
   const authBackground = useImageVariant(mode, lightImg, darkImg)
   const handleClickShowPassword = () => setIsPasswordShown(show => !show)
 
-  const handleSubmit = e => {
+  const handleSubmit = async e => {
     e.preventDefault()
-    router.push('/')
+    setError('')
+    setLoading(true)
+
+    try {
+      const apiBase = process.env.NEXT_PUBLIC_BASE_PATH || ''
+
+      const res = await fetch(`${apiBase}/api/auth/login`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ employee_user_id: employeeUserId, password })
+      })
+
+      if (res.ok) {
+        const data = await res.json()
+        const storage = rememberMe ? window.localStorage : window.sessionStorage
+
+        if (data?.access_token) storage.setItem('access_token', data.access_token)
+        if (data?.user) storage.setItem('user', JSON.stringify(data.user))
+  const next = searchParams?.get('next')
+
+  router.push(next || '/')
+      } else if (res.status === 401) {
+        let msg = 'ユーザーIDまたはパスワードが正しくありません'
+
+        try {
+          const err = await res.json()
+
+          if (err?.error) msg = err.error
+        } catch {}
+
+        setError(msg)
+      } else {
+        setError(`ログインに失敗しました (HTTP ${res.status})`)
+      }
+    } catch (err) {
+      setError('サーバーに接続できませんでした。ネットワークをご確認ください。')
+    } finally {
+      setLoading(false)
+    }
   }
 
   return (
@@ -56,16 +101,33 @@ const Login = ({ mode }) => {
           </Link>
           <div className='flex flex-col gap-5'>
             <div>
-              <Typography variant='h4'>{`Welcome to ${themeConfig.templateName}!👋🏻`}</Typography>
-              <Typography className='mbs-1'>Please sign-in to your account and start the adventure</Typography>
+              <Typography variant='h4'>{`${themeConfig.templateName} へようこそ！👋🏻`}</Typography>
+              <Typography className='mbs-1'>アカウントにサインインして始めましょう</Typography>
             </div>
             <form noValidate autoComplete='off' onSubmit={handleSubmit} className='flex flex-col gap-5'>
-              <TextField autoFocus fullWidth label='Email' />
+              {searchParams?.get('registered') === '1' ? (
+                <Alert severity='success'>アカウント登録が完了しました。ログインしてください。</Alert>
+              ) : null}
+              {error ? <Alert severity='error'>{error}</Alert> : null}
+              <TextField
+                autoFocus
+                fullWidth
+                label='ユーザーID'
+                placeholder='hana.kato'
+                value={employeeUserId}
+                onChange={e => setEmployeeUserId(e.target.value)}
+                disabled={loading}
+                autoComplete='username'
+              />
               <TextField
                 fullWidth
-                label='Password'
+                label='パスワード'
                 id='outlined-adornment-password'
                 type={isPasswordShown ? 'text' : 'password'}
+                value={password}
+                onChange={e => setPassword(e.target.value)}
+                disabled={loading}
+                autoComplete='current-password'
                 InputProps={{
                   endAdornment: (
                     <InputAdornment position='end'>
@@ -74,6 +136,7 @@ const Login = ({ mode }) => {
                         edge='end'
                         onClick={handleClickShowPassword}
                         onMouseDown={e => e.preventDefault()}
+                        disabled={loading}
                       >
                         <i className={isPasswordShown ? 'ri-eye-off-line' : 'ri-eye-line'} />
                       </IconButton>
@@ -82,21 +145,24 @@ const Login = ({ mode }) => {
                 }}
               />
               <div className='flex justify-between items-center gap-x-3 gap-y-1 flex-wrap'>
-                <FormControlLabel control={<Checkbox />} label='Remember me' />
+                <FormControlLabel
+                  control={<Checkbox checked={rememberMe} onChange={e => setRememberMe(e.target.checked)} disabled={loading} />}
+                  label='ログイン状態を保持する'
+                />
                 <Typography className='text-end' color='primary' component={Link} href='/forgot-password'>
-                  Forgot password?
+                  パスワードをお忘れですか？
                 </Typography>
               </div>
-              <Button fullWidth variant='contained' type='submit'>
-                Log In
+              <Button fullWidth variant='contained' type='submit' disabled={loading || !employeeUserId || !password}>
+                {loading ? 'ログイン中…' : 'ログイン'}
               </Button>
               <div className='flex justify-center items-center flex-wrap gap-2'>
-                <Typography>New on our platform?</Typography>
+                <Typography>はじめてご利用ですか？</Typography>
                 <Typography component={Link} href='/register' color='primary'>
-                  Create an account
+                  アカウント作成
                 </Typography>
               </div>
-              <Divider className='gap-3'>or</Divider>
+              <Divider className='gap-3'>または(未実装)</Divider>
               <div className='flex justify-center items-center gap-2'>
                 <IconButton size='small' className='text-facebook'>
                   <i className='ri-facebook-fill' />
diff --git a/javascript-version/src/views/Register.jsx b/javascript-version/src/views/Register.jsx
index 201f1337d..0d3b56dfd 100644
--- a/javascript-version/src/views/Register.jsx
+++ b/javascript-version/src/views/Register.jsx
@@ -1,10 +1,11 @@
 'use client'
 
 // React Imports
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 
 // Next Imports
 import Link from 'next/link'
+import { useRouter } from 'next/navigation'
 
 // MUI Imports
 import Card from '@mui/material/Card'
@@ -13,10 +14,12 @@ import Typography from '@mui/material/Typography'
 import TextField from '@mui/material/TextField'
 import IconButton from '@mui/material/IconButton'
 import InputAdornment from '@mui/material/InputAdornment'
-import Checkbox from '@mui/material/Checkbox'
 import Button from '@mui/material/Button'
-import FormControlLabel from '@mui/material/FormControlLabel'
 import Divider from '@mui/material/Divider'
+import Alert from '@mui/material/Alert'
+import MenuItem from '@mui/material/MenuItem'
+import Avatar from '@mui/material/Avatar'
+import Grid from '@mui/material/Grid'
 
 // Component Imports
 import Illustrations from '@components/Illustrations'
@@ -28,6 +31,22 @@ import { useImageVariant } from '@core/hooks/useImageVariant'
 const Register = ({ mode }) => {
   // States
   const [isPasswordShown, setIsPasswordShown] = useState(false)
+  const [employeeUserId, setEmployeeUserId] = useState('')
+  const [lastName, setLastName] = useState('')
+  const [firstName, setFirstName] = useState('')
+  const [password, setPassword] = useState('')
+  const [selectedRoleId, setSelectedRoleId] = useState('') // number or ''
+  const [selectedLineId, setSelectedLineId] = useState('') // number or ''
+  const [specialNotes, setSpecialNotes] = useState('')
+  const [colorCode, setColorCode] = useState('FF8800')
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState('')
+
+  // masters
+  const [roles, setRoles] = useState([])
+  const [lines, setLines] = useState([])
+  const [loadingRoles, setLoadingRoles] = useState(true)
+  const [loadingLines, setLoadingLines] = useState(true)
 
   // Vars
   const darkImg = '/images/pages/auth-v1-mask-dark.png'
@@ -35,61 +54,366 @@ const Register = ({ mode }) => {
 
   // Hooks
   const authBackground = useImageVariant(mode, lightImg, darkImg)
+  const router = useRouter()
   const handleClickShowPassword = () => setIsPasswordShown(show => !show)
 
+  const isValid = () => {
+    if (!employeeUserId || !lastName || !firstName || !password) return false
+
+    // 役割が取得できている場合は選択必須
+    if (roles.length > 0 && (selectedRoleId === '' || selectedRoleId === null || selectedRoleId === undefined)) return false
+    
+return true
+  }
+
+  const handleSubmit = async e => {
+    e.preventDefault()
+    if (!isValid()) return
+    setError('')
+    setLoading(true)
+
+    try {
+      const apiBase = process.env.NEXT_PUBLIC_BASE_PATH || ''
+
+      const res = await fetch(`${apiBase}/api/auth/register`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          employee_user_id: employeeUserId,
+          password,
+          employee_name: `${String(lastName || '').trim()}${(lastName && firstName) ? ' ' : ''}${String(firstName || '').trim()}`.trim(),
+          employee_role_id: selectedRoleId || undefined,
+          employee_line_id: (selectedLineId === '' ? undefined : selectedLineId),
+          employee_special_notes: specialNotes || undefined,
+          employee_color_code: colorCode || undefined
+        })
+      })
+
+      if (res.status === 201 || res.ok) {
+        router.push('/login?registered=1')
+      } else if (res.status === 400 || res.status === 409) {
+        try {
+          const err = await res.json()
+
+          setError(err?.error || `登録に失敗しました (HTTP ${res.status})`)
+        } catch {
+          setError(`登録に失敗しました (HTTP ${res.status})`)
+        }
+      } else {
+        setError(`登録に失敗しました (HTTP ${res.status})`)
+      }
+    } catch (err) {
+      setError('サーバーに接続できませんでした。ネットワークをご確認ください。')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  // マスタ取得（ロール／ライン）
+  useEffect(() => {
+    const ac = new AbortController()
+
+    const apiBase = process.env.NEXT_PUBLIC_BASE_PATH || ''
+
+    // Roles
+    ;(async () => {
+      try {
+        setLoadingRoles(true)
+        const res = await fetch(`${apiBase}/api/roles`, { signal: ac.signal })
+
+        if (res.ok) {
+          const data = await res.json()
+          const list = Array.isArray(data) ? data : []
+
+          setRoles(list)
+
+          // 既存選択を優先し、なければ「一般」→先頭→空（IDで管理）
+          setSelectedRoleId(prev => {
+            if ((prev || prev === 0) && list.some(r => r?.role_id === prev)) return prev
+            const general = list.find(r => r?.role_name === '一般')?.role_id
+
+            
+return general ?? list[0]?.role_id ?? ''
+          })
+        } else {
+          setRoles([])
+        }
+      } catch (err) {
+        setRoles([])
+      } finally {
+        setLoadingRoles(false)
+      }
+    })()
+
+    // Lines
+    ;(async () => {
+      try {
+        setLoadingLines(true)
+        const res = await fetch(`${apiBase}/api/lines`, { signal: ac.signal })
+
+        if (res.ok) {
+          const data = await res.json()
+          const list = Array.isArray(data) ? data : []
+
+          setLines(list)
+
+          // ラインは未選択を許容。既存選択がリストにない場合は空のまま。
+          setSelectedLineId(prev => ((prev || prev === 0) && list.some(l => l?.line_id === prev) ? prev : ''))
+        } else {
+          setLines([])
+        }
+      } catch (err) {
+        setLines([])
+      } finally {
+        setLoadingLines(false)
+      }
+    })()
+
+    return () => ac.abort()
+  }, [])
+
+  // カラーパレット（従業員編集ウィンドウに合わせた系統色 + 既定色 FF8800 を含む）
+  const basePalette = ['#ef4444', '#f97316', '#f59e0b', '#84cc16', '#22c55e', '#10b981', '#14b8a6', '#06b6d4', '#0ea5e9', '#3b82f6', '#6366f1', '#8b5cf6', '#a855f7', '#d946ef', '#ec4899', '#f43f5e']
+  const paletteColors = Array.from(new Set([...basePalette, '#FF8800']))
+
+  const getAvatarText = (ln, fn) => {
+    // 姓を優先、空なら名、それも空なら『氏名』
+    const base = String(ln || fn || '氏名').trim()
+
+    if (!base) return '氏名'
+    
+return base.slice(0, 3)
+  }
+
+  const getAvatarFontSize = text => {
+    const len = String(text || '').length
+
+
+    // 文字数に応じてフォントサイズを調整（80px円内）
+    if (len <= 1) return 36
+    if (len === 2) return 30
+    
+return 24
+  }
+
+  const getDisplayName = (ln, fn) => {
+    const l = String(ln || '').trim()
+    const f = String(fn || '').trim()
+
+    if (!l && !f) return '氏名'
+    
+return f ? `${l} ${f}` : l
+  }
+
   return (
     <div className='flex flex-col justify-center items-center min-bs-[100dvh] relative p-6'>
-      <Card className='flex flex-col sm:is-[450px]'>
+      <Card className='flex flex-col sm:is-[900px]'>
         <CardContent className='p-6 sm:!p-12'>
           <Link href='/' className='flex justify-center items-start mbe-6'>
             <Logo />
           </Link>
-          <Typography variant='h4'>Adventure starts here 🚀</Typography>
+          <Typography variant='h4' align='center'>ここから冒険が始まります 🚀</Typography>
           <div className='flex flex-col gap-5'>
-            <Typography className='mbs-1'>Make your app management easy and fun!</Typography>
-            <form noValidate autoComplete='off' onSubmit={e => e.preventDefault()} className='flex flex-col gap-5'>
-              <TextField autoFocus fullWidth label='Username' />
-              <TextField fullWidth label='Email' />
-              <TextField
-                fullWidth
-                label='Password'
-                type={isPasswordShown ? 'text' : 'password'}
-                InputProps={{
-                  endAdornment: (
-                    <InputAdornment position='end'>
-                      <IconButton
-                        size='small'
-                        edge='end'
-                        onClick={handleClickShowPassword}
-                        onMouseDown={e => e.preventDefault()}
+            <Typography className='mbs-1' align='center'>工場管理をもっと簡単で楽しく！</Typography>
+
+            <form noValidate autoComplete='off' onSubmit={handleSubmit} className='flex flex-col gap-5'>
+              {error ? <Alert severity='error'>{error}</Alert> : null}
+
+              <Grid container spacing={3}>
+                {/* 左カラム: プレビュー + カラー選択 */}
+                <Grid item xs={12} md={4}>
+                  <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+                    <Avatar
+                      sx={{ width: 80, height: 80, bgcolor: `#${colorCode}`, fontWeight: 700, mb: 1, color: '#fff', fontSize: getAvatarFontSize(getAvatarText(lastName, firstName)) }}
+                    >
+                      {getAvatarText(lastName, firstName)}
+                    </Avatar>
+                    <Typography variant='subtitle1' sx={{ fontWeight: 700 }} align='center'>{getDisplayName(lastName, firstName)}</Typography>
+                    <Typography variant='body2' color='text.secondary' align='center'>{employeeUserId || 'ID'}</Typography>
+                    <div style={{ marginTop: 16, width: '100%' }}>
+                      <Typography variant='body2' sx={{ mb: 1 }} align='center'>色を選択</Typography>
+                      <Grid container spacing={1}>
+                        {paletteColors.map(color => {
+                          const hex = color.replace('#', '').toUpperCase()
+                          const isActive = (`#${colorCode}`).toUpperCase() === color.toUpperCase()
+
+                          
+return (
+                            <Grid item xs={2} key={color}>
+                              <div
+                                onClick={() => !loading && setColorCode(hex)}
+                                style={{
+                                  background: color,
+                                  width: 24,
+                                  height: 24,
+                                  borderRadius: '50%',
+                                  cursor: loading ? 'not-allowed' : 'pointer',
+                                  border: isActive ? '2px solid #6366f1' : '2px solid #fff',
+                                  boxShadow: '0 0 0 1px rgba(0,0,0,0.08)'
+                                }}
+                                title={color}
+                                aria-label={`色 ${color}`}
+                              />
+                            </Grid>
+                          )
+                        })}
+                      </Grid>
+                    </div>
+                  </div>
+                </Grid>
+
+                {/* 右カラム: 入力群 */}
+                <Grid item xs={12} md={8}>
+                  <Grid container spacing={2}>
+                    <Grid item xs={12} sm={6}>
+                      <TextField
+                        autoFocus
+                        fullWidth
+                        label='ユーザーID'
+                        placeholder='hana.kato'
+                        value={employeeUserId}
+                        onChange={e => setEmployeeUserId(e.target.value)}
+                        disabled={loading}
+                      />
+                    </Grid>
+                    <Grid item xs={12} sm={3}>
+                      <TextField
+                        fullWidth
+                        label='姓'
+                        placeholder='加藤'
+                        value={lastName}
+                        onChange={e => setLastName(e.target.value)}
+                        disabled={loading}
+                      />
+                    </Grid>
+                    <Grid item xs={12} sm={3}>
+                      <TextField
+                        fullWidth
+                        label='名'
+                        placeholder='花'
+                        value={firstName}
+                        onChange={e => setFirstName(e.target.value)}
+                        disabled={loading}
+                      />
+                    </Grid>
+                    <Grid item xs={12}>
+                      <TextField
+                        fullWidth
+                        label='パスワード'
+                        type={isPasswordShown ? 'text' : 'password'}
+                        value={password}
+                        onChange={e => setPassword(e.target.value)}
+                        disabled={loading}
+                        InputProps={{
+                          endAdornment: (
+                            <InputAdornment position='end'>
+                              <IconButton
+                                size='small'
+                                edge='end'
+                                onClick={handleClickShowPassword}
+                                onMouseDown={e => e.preventDefault()}
+                                disabled={loading}
+                              >
+                                <i className={isPasswordShown ? 'ri-eye-off-line' : 'ri-eye-line'} />
+                              </IconButton>
+                            </InputAdornment>
+                          )
+                        }}
+                      />
+                    </Grid>
+                    <Grid item xs={12} sm={6}>
+                      <TextField
+                        fullWidth
+                        select
+                        label='役割'
+                        value={selectedRoleId === '' ? '' : selectedRoleId}
+                        onChange={e => {
+                          const v = e.target.value
+
+                          setSelectedRoleId(v === '' ? '' : (typeof v === 'number' ? v : Number(v)))
+                        }}
+                        disabled={loading || loadingRoles || roles.length === 0}
                       >
-                        <i className={isPasswordShown ? 'ri-eye-off-line' : 'ri-eye-line'} />
-                      </IconButton>
-                    </InputAdornment>
-                  )
-                }}
-              />
-              <FormControlLabel
-                control={<Checkbox />}
-                label={
-                  <>
-                    <span>I agree to </span>
-                    <Link className='text-primary' href='/' onClick={e => e.preventDefault()}>
-                      privacy policy & terms
-                    </Link>
-                  </>
-                }
-              />
-              <Button fullWidth variant='contained' type='submit'>
-                Sign Up
-              </Button>
-              <div className='flex justify-center items-center flex-wrap gap-2'>
-                <Typography>Already have an account?</Typography>
-                <Typography component={Link} href='/login' color='primary'>
-                  Sign in instead
-                </Typography>
+                        {loadingRoles ? (
+                          <MenuItem value='' disabled>
+                            読み込み中…
+                          </MenuItem>
+                        ) : (
+                          roles.map(role => (
+                            <MenuItem key={role?.role_id ?? role?.role_name} value={role?.role_id}>
+                              {role?.role_name}
+                              {role?.is_admin ? '（管理者）' : ''}
+                            </MenuItem>
+                          ))
+                        )}
+                      </TextField>
+                    </Grid>
+                    <Grid item xs={12} sm={6}>
+                      <TextField
+                        fullWidth
+                        select
+                        label='担当ライン'
+                        value={selectedLineId === '' ? '' : selectedLineId}
+                        onChange={e => {
+                          const v = e.target.value
+
+                          setSelectedLineId(v === '' ? '' : (typeof v === 'number' ? v : Number(v)))
+                        }}
+                        disabled={loading || loadingLines}
+                        SelectProps={{ MenuProps: { disablePortal: true } }}
+                        helperText={(!loadingLines && lines.length === 0) ? 'ラインが未登録です。管理画面から追加してください。' : '　'}
+                      >
+                        <MenuItem value=''>未選択</MenuItem>
+                        {loadingLines ? (
+                          <MenuItem value='' disabled>
+                            読み込み中…
+                          </MenuItem>
+                        ) : (
+                          lines.map(line => (
+                            <MenuItem key={line?.line_id ?? line?.line_name} value={line?.line_id}>
+                              {line?.line_name}
+                            </MenuItem>
+                          ))
+                        )}
+                      </TextField>
+                    </Grid>
+                    <Grid item xs={12}>
+                      <TextField
+                        fullWidth
+                        label='特記事項'
+                        placeholder='夜勤中心 など'
+                        value={specialNotes}
+                        onChange={e => setSpecialNotes(e.target.value)}
+                        disabled={loading}
+                        multiline
+                        minRows={2}
+                      />
+                    </Grid>
+                  </Grid>
+                </Grid>
+              </Grid>
+
+              <div className='flex flex-col items-center gap-2'>
+                <Grid item xs={12}>
+                  <Button
+                    fullWidth
+                    variant='contained'
+                    type='submit'
+                    disabled={loading || !isValid()}
+                    sx={{ maxWidth: 400, minWidth: 280, alignSelf: 'center' }}
+                  >
+                    {loading ? '作成中…' : 'アカウント作成'}
+                  </Button>
+                </Grid>
+
+                <div className='flex flex-row items-center justify-center gap-1'>
+                  <Typography align='center'>すでにアカウントをお持ちですか？</Typography>
+                  <Typography component={Link} href='/login' color='primary' align='center'>
+                    こちらからサインイン
+                  </Typography>
+                </div>
               </div>
-              <Divider className='gap-3'>Or</Divider>
+              <Divider className='gap-3'>または(未実装)</Divider>
               <div className='flex justify-center items-center gap-2'>
                 <IconButton size='small' className='text-facebook'>
                   <i className='ri-facebook-fill' />
diff --git a/javascript-version/src/views/account-settings/account/AccountDelete.jsx b/javascript-version/src/views/account-settings/account/AccountDelete.jsx
index e1f500591..4e935b163 100644
--- a/javascript-version/src/views/account-settings/account/AccountDelete.jsx
+++ b/javascript-version/src/views/account-settings/account/AccountDelete.jsx
@@ -1,3 +1,9 @@
+"use client"
+
+// React / Next
+import { useState } from 'react'
+import { useRouter } from 'next/navigation'
+
 // MUI Imports
 import Card from '@mui/material/Card'
 import CardHeader from '@mui/material/CardHeader'
@@ -5,17 +11,123 @@ import CardContent from '@mui/material/CardContent'
 import FormControlLabel from '@mui/material/FormControlLabel'
 import Checkbox from '@mui/material/Checkbox'
 import Button from '@mui/material/Button'
+import Dialog from '@mui/material/Dialog'
+import DialogTitle from '@mui/material/DialogTitle'
+import DialogContent from '@mui/material/DialogContent'
+import DialogContentText from '@mui/material/DialogContentText'
+import DialogActions from '@mui/material/DialogActions'
+import Snackbar from '@mui/material/Snackbar'
+import Alert from '@mui/material/Alert'
+
+// Hooks
+import useAuthMe from '@core/hooks/useAuthMe'
+
+// 認可ヘッダ（AccountDetails と同等の簡易版）
+const getAuthHeaders = () => {
+  try {
+    const token =
+      (typeof window !== 'undefined' && (window.localStorage.getItem('access_token') || window.sessionStorage.getItem('access_token'))) ||
+      ''
+    return token ? { Authorization: `Bearer ${token}` } : {}
+  } catch {
+    return {}
+  }
+}
 
 const AccountDelete = () => {
+  const apiBase = process.env.NEXT_PUBLIC_BASE_PATH || ''
+  const router = useRouter()
+  const { user } = useAuthMe()
+
+  const [consent, setConsent] = useState(false)
+  const [confirmOpen, setConfirmOpen] = useState(false)
+  const [deleting, setDeleting] = useState(false)
+  const [snack, setSnack] = useState({ open: false, message: '', severity: 'success' })
+
+  const clearAuthAndRedirect = () => {
+    try {
+      if (typeof window !== 'undefined') {
+        window.localStorage.removeItem('access_token')
+        window.localStorage.removeItem('user')
+        window.sessionStorage.removeItem('access_token')
+        window.sessionStorage.removeItem('user')
+      }
+    } catch {}
+    router.replace('/login')
+  }
+
+  const handleDelete = async () => {
+    if (!user?.employee_id) {
+      setSnack({ open: true, message: 'ユーザー情報が取得できませんでした。', severity: 'error' })
+      return
+    }
+    setDeleting(true)
+    try {
+      const headers = { ...getAuthHeaders() }
+      const res = await fetch(`${apiBase}/api/employees/${user.employee_id}`, { method: 'DELETE', headers })
+
+      if (res.ok) {
+        setSnack({ open: true, message: 'アカウントを削除しました。ログアウトします…', severity: 'success' })
+        setTimeout(() => clearAuthAndRedirect(), 400)
+        return
+      }
+
+      if (res.status === 401) {
+        // 権限切れでもログアウトへ
+        clearAuthAndRedirect()
+        return
+      }
+
+      let msg = `削除に失敗しました (HTTP ${res.status})`
+      try {
+        const data = await res.json()
+        if (data?.message) msg = data.message
+      } catch {}
+      setSnack({ open: true, message: msg, severity: 'error' })
+    } catch (e) {
+      const isAbort = e && typeof e === 'object' && e.name === 'AbortError'
+      setSnack({ open: true, message: isAbort ? '通信がタイムアウトしました。' : 'ネットワークエラーが発生しました。', severity: 'error' })
+    } finally {
+      setDeleting(false)
+      setConfirmOpen(false)
+    }
+  }
+
   return (
     <Card>
-      <CardHeader title='Delete Account' />
+      <CardHeader title='アカウントの削除' />
       <CardContent className='flex flex-col items-start gap-6'>
-        <FormControlLabel control={<Checkbox />} label='I confirm my account deactivation' />
-        <Button variant='contained' color='error' type='submit'>
-          Deactivate Account
+        <FormControlLabel control={<Checkbox checked={consent} onChange={e => setConsent(e.target.checked)} />} label='アカウントの無効化に同意します' />
+        <Button variant='contained' color='error' disabled={!consent || deleting} onClick={() => setConfirmOpen(true)}>
+          {deleting ? '削除中…' : 'アカウントを無効化'}
         </Button>
       </CardContent>
+
+      <Dialog open={confirmOpen} onClose={() => setConfirmOpen(false)}>
+        <DialogTitle>本当に無効化しますか？</DialogTitle>
+        <DialogContent>
+          <DialogContentText>
+            この操作は元に戻せません。アカウントを削除すると、直ちにログアウトされます。
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => setConfirmOpen(false)} disabled={deleting}>キャンセル</Button>
+          <Button color='error' onClick={handleDelete} disabled={deleting} autoFocus>
+            {deleting ? '削除中…' : '削除する'}
+          </Button>
+        </DialogActions>
+      </Dialog>
+
+      <Snackbar
+        open={snack.open}
+        autoHideDuration={3000}
+        onClose={() => setSnack(s => ({ ...s, open: false }))}
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
+      >
+        <Alert onClose={() => setSnack(s => ({ ...s, open: false }))} severity={snack.severity} sx={{ width: '100%' }}>
+          {snack.message}
+        </Alert>
+      </Snackbar>
     </Card>
   )
 }
diff --git a/javascript-version/src/views/account-settings/account/AccountDetails.jsx b/javascript-version/src/views/account-settings/account/AccountDetails.jsx
index 8bf0d4b4a..d10755a59 100644
--- a/javascript-version/src/views/account-settings/account/AccountDetails.jsx
+++ b/javascript-version/src/views/account-settings/account/AccountDetails.jsx
@@ -1,7 +1,7 @@
 'use client'
 
 // React Imports
-import { useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 
 // MUI Imports
 import Grid from '@mui/material/Grid'
@@ -10,273 +10,468 @@ import CardContent from '@mui/material/CardContent'
 import Button from '@mui/material/Button'
 import Typography from '@mui/material/Typography'
 import TextField from '@mui/material/TextField'
-import FormControl from '@mui/material/FormControl'
-import InputLabel from '@mui/material/InputLabel'
-import Select from '@mui/material/Select'
 import MenuItem from '@mui/material/MenuItem'
-import Chip from '@mui/material/Chip'
-
-// Vars
-const initialData = {
-  firstName: 'John',
-  lastName: 'Doe',
-  email: 'john.doe@example.com',
-  organization: 'ThemeSelection',
-  phoneNumber: '+1 (917) 543-9876',
-  address: '123 Main St, New York, NY 10001',
-  state: 'New York',
-  zipCode: '634880',
-  country: 'usa',
-  language: 'arabic',
-  timezone: 'gmt-12',
-  currency: 'usd'
+import InputAdornment from '@mui/material/InputAdornment'
+import IconButton from '@mui/material/IconButton'
+import Avatar from '@mui/material/Avatar'
+import Snackbar from '@mui/material/Snackbar'
+import Alert from '@mui/material/Alert'
+
+// Hooks
+import useAuthMe from '@core/hooks/useAuthMe'
+import { invalidateMeCache } from '@/utils/auth/meClient'
+
+// パレット（employee-list と同一仕様）
+const basePalette = ['#ef4444', '#f97316', '#f59e0b', '#84cc16', '#22c55e', '#10b981', '#14b8a6', '#06b6d4', '#0ea5e9', '#3b82f6', '#6366f1', '#8b5cf6', '#a855f7', '#d946ef', '#ec4899', '#f43f5e']
+const palette = Array.from(new Set([...basePalette, '#FF8800']))
+
+// 初期フォーム（employee-list に合わせる）
+const initialForm = {
+  employeeUserId: '',
+  lastName: '',
+  firstName: '',
+  password: '',
+  roleId: '',
+  lineId: '',
+  status: '在籍中',
+  specialNotes: '',
+  iconColor: '#FF8800'
 }
 
-const languageData = ['English', 'Arabic', 'French', 'German', 'Portuguese']
+// Avatar テキスト（姓優先で最大3文字）
+const getAvatarText = (ln, fn) => {
+  const base = String(ln || fn || '氏名').trim()
+  if (!base) return '氏名'
+  return base.slice(0, 3)
+}
 
-const AccountDetails = () => {
-  // States
-  const [formData, setFormData] = useState(initialData)
-  const [fileInput, setFileInput] = useState('')
-  const [imgSrc, setImgSrc] = useState('/images/avatars/1.png')
-  const [language, setLanguage] = useState(['English'])
-
-  const handleDelete = value => {
-    setLanguage(current => current.filter(item => item !== value))
+// 表示名（「姓 名」）
+const getDisplayName = (ln, fn) => {
+  const l = String(ln || '').trim()
+  const f = String(fn || '').trim()
+  if (!l && !f) return '氏名'
+  return f ? `${l} ${f}` : l
+}
+
+// #付きHEXへ正規化
+const ensureHash = v => {
+  const s = String(v || '').trim()
+  if (!s) return '#FF8800'
+  return s.startsWith('#') ? s : `#${s}`
+}
+
+// 認可ヘッダ（簡易版）
+const getAuthHeaders = () => {
+  try {
+    const token =
+      (typeof window !== 'undefined' && (window.localStorage.getItem('access_token') || window.sessionStorage.getItem('access_token'))) ||
+      ''
+    return token ? { Authorization: `Bearer ${token}` } : {}
+  } catch {
+    return {}
   }
+}
+
+const AccountDetails = () => {
+  const apiBase = process.env.NEXT_PUBLIC_BASE_PATH || ''
+
+  // 認証ユーザーから初期値を反映
+  const { user } = useAuthMe()
+
+  const [form, setForm] = useState(initialForm)
+  const [roles, setRoles] = useState([])
+  const [lines, setLines] = useState([])
+  const [loadingRoles, setLoadingRoles] = useState(true)
+  const [loadingLines, setLoadingLines] = useState(true)
+  const [isPasswordShown, setIsPasswordShown] = useState(false)
+  const [employeeInit, setEmployeeInit] = useState(null)
+  const [saving, setSaving] = useState(false)
+  const [snack, setSnack] = useState({ open: false, message: '', severity: 'success' })
+
+  // me から氏名とIDを流し込み（編集開始時の初期化）
+  useEffect(() => {
+    if (!user) return
+    const name = String(user?.employee_name || user?.name || '').trim()
+    // "姓 名" の想定で分割（最初の空白で区切る）
+    const [ln, ...rest] = name.split(/\s+/)
+    const fn = rest.join(' ')
+
+    setForm(prev => ({
+      ...prev,
+      employeeUserId: user?.employee_user_id || user?.id || '',
+      lastName: ln || '',
+      firstName: fn || '',
+      iconColor: user?.employee_color_code ? `#${String(user.employee_color_code).replace(/^#/, '')}` : prev.iconColor
+    }))
+  }, [user])
+
+  // 役割/ラインを取得（employee-list と同様のエンドポイント）
+  useEffect(() => {
+    const ac = new AbortController()
+    const headers = { ...getAuthHeaders() }
+
+    ;(async () => {
+      try {
+        setLoadingRoles(true)
+        const res = await fetch(`${apiBase}/api/roles`, { signal: ac.signal, headers })
+        if (res.ok) {
+          const data = await res.json()
+          const list = Array.isArray(data) ? data : (Array.isArray(data?.roles) ? data.roles : [])
+          setRoles(list)
+        } else {
+          setRoles([])
+        }
+      } catch {
+        setRoles([])
+      } finally {
+        setLoadingRoles(false)
+      }
+    })()
 
-  const handleChange = event => {
-    setLanguage(event.target.value)
+    ;(async () => {
+      try {
+        setLoadingLines(true)
+        const res = await fetch(`${apiBase}/api/lines`, { signal: ac.signal, headers })
+        if (res.ok) {
+          const data = await res.json()
+          const list = Array.isArray(data) ? data : (Array.isArray(data?.lines) ? data.lines : [])
+          setLines(list)
+        } else {
+          setLines([])
+        }
+      } catch {
+        setLines([])
+      } finally {
+        setLoadingLines(false)
+      }
+    })()
+
+    return () => ac.abort()
+  }, [apiBase])
+
+  const togglePasswordShown = () => setIsPasswordShown(s => !s)
+
+  const displayName = useMemo(() => getDisplayName(form.lastName, form.firstName), [form.lastName, form.firstName])
+  const avatarText = useMemo(() => getAvatarText(form.lastName, form.firstName), [form.lastName, form.firstName])
+
+  const handleFormChange = e => {
+    const { name, value } = e.target
+    if (name === 'roleId' || name === 'lineId') {
+      const v = value === '' ? '' : (typeof value === 'number' ? value : Number(value))
+      setForm(prev => ({ ...prev, [name]: v }))
+    } else {
+      setForm(prev => ({ ...prev, [name]: value }))
+    }
   }
 
-  const handleFormChange = (field, value) => {
-    setFormData({ ...formData, [field]: value })
+  const handleReset = () => setForm(initialForm)
+
+  const buildPayload = () => {
+    const name = getDisplayName(form.lastName, form.firstName)
+    return {
+      employee_name: name,
+      employee_user_id: form.employeeUserId || '',
+      password: form.password ? form.password : null,
+      role_id: form.roleId === '' ? null : form.roleId,
+      line_id: form.lineId === '' ? null : form.lineId,
+      is_active: form.status === '在籍中',
+      color_code: String(form.iconColor || '#FF8800').replace(/^#/, ''),
+      special_notes: form.specialNotes || ''
+    }
   }
 
-  const handleFileInputChange = file => {
-    const reader = new FileReader()
-    const { files } = file.target
+  const handleSave = async e => {
+    e?.preventDefault?.()
+    if (!user?.employee_id) {
+      setSnack({ open: true, message: 'ユーザー情報が取得できませんでした。', severity: 'error' })
+      return
+    }
+
+    // 簡易バリデーション
+    if (!form.employeeUserId) {
+      setSnack({ open: true, message: 'ユーザーIDを入力してください。', severity: 'warning' })
+      return
+    }
 
-    if (files && files.length !== 0) {
-      reader.onload = () => setImgSrc(reader.result)
-      reader.readAsDataURL(files[0])
+    setSaving(true)
+    try {
+      const headers = { 'Content-Type': 'application/json', ...getAuthHeaders() }
+      const res = await fetch(`${apiBase}/api/employees/${user.employee_id}`, {
+        method: 'PUT',
+        headers,
+        body: JSON.stringify(buildPayload())
+      })
 
-      if (reader.result !== null) {
-        setFileInput(reader.result)
+      if (!res.ok) {
+        let msg = `保存に失敗しました (HTTP ${res.status})`
+        try {
+          const data = await res.json()
+          if (data?.message) msg = data.message
+        } catch {}
+        setSnack({ open: true, message: msg, severity: 'error' })
+        return
       }
+
+      invalidateMeCache()
+      setSnack({ open: true, message: '変更を保存しました。', severity: 'success' })
+      setForm(prev => ({ ...prev, password: '' }))
+    } catch (e) {
+      const isAbort = e && typeof e === 'object' && e.name === 'AbortError'
+      setSnack({ open: true, message: isAbort ? '通信がタイムアウトしました。' : 'ネットワークエラーが発生しました。', severity: 'error' })
+    } finally {
+      setSaving(false)
     }
   }
 
-  const handleFileInputReset = () => {
-    setFileInput('')
-    setImgSrc('/images/avatars/1.png')
-  }
+
+  // 自分自身の従業員詳細を取得して初期値に反映
+  useEffect(() => {
+    if (!user?.employee_id) return
+    const ac = new AbortController()
+    const headers = { ...getAuthHeaders() }
+
+    ;(async () => {
+      try {
+        const res = await fetch(`${apiBase}/api/employees/${user.employee_id}`, { signal: ac.signal, headers })
+        if (!res.ok) return
+        const data = await res.json()
+
+        // 例のレスポンスを想定
+        // {
+        //   employee_id, employee_name, employee_user_id, is_active, role_name, line_name, special_notes, color_code
+        // }
+        const name = String(data?.employee_name || '').trim()
+        const [ln, ...rest] = name.split(/\s+/)
+        const fn = rest.join(' ')
+
+        setForm(prev => ({
+          ...prev,
+          employeeUserId: data?.employee_user_id || prev.employeeUserId,
+          lastName: ln || prev.lastName,
+          firstName: fn || prev.firstName,
+          status: data?.is_active ? '在籍中' : '退職済',
+          specialNotes: data?.special_notes || '',
+          iconColor: data?.color_code ? ensureHash(data.color_code) : prev.iconColor
+        }))
+
+        setEmployeeInit({
+          role_name: data?.role_name || '',
+          line_name: data?.line_name || ''
+        })
+      } catch {
+        // ignore
+      }
+    })()
+
+    return () => ac.abort()
+  }, [apiBase, user?.employee_id])
+
+  // 役割/ラインの名称からIDを初期設定（一覧が取得できてから反映）
+  useEffect(() => {
+    if (!employeeInit) return
+
+    setForm(prev => {
+      let next = { ...prev }
+
+      if (!prev.roleId && employeeInit.role_name && roles?.length) {
+        const r = roles.find(r => r?.role_name === employeeInit.role_name)
+        if (r && (r.role_id || r.role_id === 0)) next.roleId = r.role_id
+      }
+
+      if ((prev.lineId === '' || prev.lineId == null) && employeeInit.line_name && lines?.length) {
+        const l = lines.find(l => l?.line_name === employeeInit.line_name)
+        if (l && (l.line_id || l.line_id === 0)) next.lineId = l.line_id
+      }
+
+      return next
+    })
+  }, [employeeInit, roles, lines])
 
   return (
     <Card>
       <CardContent className='mbe-5'>
         <div className='flex max-sm:flex-col items-center gap-6'>
-          <img height={100} width={100} className='rounded' src={imgSrc} alt='Profile' />
-          <div className='flex flex-grow flex-col gap-4'>
-            <div className='flex flex-col sm:flex-row gap-4'>
-              <Button component='label' size='small' variant='contained' htmlFor='account-settings-upload-image'>
-                Upload New Photo
-                <input
-                  hidden
-                  type='file'
-                  value={fileInput}
-                  accept='image/png, image/jpeg'
-                  onChange={handleFileInputChange}
-                  id='account-settings-upload-image'
-                />
-              </Button>
-              <Button size='small' variant='outlined' color='error' onClick={handleFileInputReset}>
-                Reset
-              </Button>
-            </div>
-            <Typography>Allowed JPG, GIF or PNG. Max size of 800K</Typography>
+          <Avatar
+            sx={{ width: 80, height: 80, bgcolor: form.iconColor, fontSize: 36, fontWeight: 700, color: '#fff' }}
+            alt={displayName}
+          >
+            {avatarText}
+          </Avatar>
+          <div className='flex flex-col'>
+            <Typography variant='h6' className='font-bold'>{displayName}</Typography>
+            <Typography variant='body2' color='text.secondary'>{form.employeeUserId || 'ユーザーID'}</Typography>
+          </div>
+        </div>
+        <div className='mti-0 mbs-5'>
+          <Typography variant='body2' sx={{ mb: 1 }}>色を選択</Typography>
+          <div style={{ display: 'flex', gap: 8, overflowX: 'auto', paddingBottom: 4 }}>
+            {palette.map(color => (
+              <IconButton
+                key={color}
+                size='small'
+                onClick={() => setForm(prev => ({ ...prev, iconColor: color }))}
+                title={color}
+                sx={{
+                  width: 28,
+                  height: 28,
+                  padding: 0,
+                  borderRadius: '50%',
+                  border: form.iconColor === color ? '2px solid #6366f1' : '2px solid #fff',
+                  boxShadow: '0 0 0 1px rgba(0,0,0,0.08)',
+                  background: color,
+                  '&:hover': { background: color, opacity: 0.85 }
+                }}
+              />
+            ))}
           </div>
         </div>
       </CardContent>
       <CardContent>
-        <form onSubmit={e => e.preventDefault()}>
+  <form onSubmit={handleSave}>
           <Grid container spacing={5}>
             <Grid item xs={12} sm={6}>
               <TextField
                 fullWidth
-                label='First Name'
-                value={formData.firstName}
-                placeholder='John'
-                onChange={e => handleFormChange('firstName', e.target.value)}
+                label='ユーザーID'
+                placeholder='hana.kato'
+                name='employeeUserId'
+                value={form.employeeUserId}
+                onChange={handleFormChange}
               />
             </Grid>
-            <Grid item xs={12} sm={6}>
+            <Grid item xs={12} sm={3}>
               <TextField
                 fullWidth
-                label='Last Name'
-                value={formData.lastName}
-                placeholder='Doe'
-                onChange={e => handleFormChange('lastName', e.target.value)}
+                label='姓'
+                placeholder='加藤'
+                name='lastName'
+                value={form.lastName}
+                onChange={handleFormChange}
               />
             </Grid>
-            <Grid item xs={12} sm={6}>
+            <Grid item xs={12} sm={3}>
               <TextField
                 fullWidth
-                label='Email'
-                value={formData.email}
-                placeholder='john.doe@gmail.com'
-                onChange={e => handleFormChange('email', e.target.value)}
+                label='名'
+                placeholder='花'
+                name='firstName'
+                value={form.firstName}
+                onChange={handleFormChange}
               />
             </Grid>
-            <Grid item xs={12} sm={6}>
+            <Grid item xs={12}>
               <TextField
                 fullWidth
-                label='Organization'
-                value={formData.organization}
-                placeholder='ThemeSelection'
-                onChange={e => handleFormChange('organization', e.target.value)}
+                label='パスワード（変更時のみ）'
+                type={isPasswordShown ? 'text' : 'password'}
+                name='password'
+                value={form.password}
+                onChange={handleFormChange}
+                InputProps={{
+                  endAdornment: (
+                    <InputAdornment position='end'>
+                      <IconButton size='small' edge='end' onClick={togglePasswordShown} onMouseDown={e => e.preventDefault()}>
+                        <i className={isPasswordShown ? 'ri-eye-off-line' : 'ri-eye-line'} />
+                      </IconButton>
+                    </InputAdornment>
+                  )
+                }}
               />
             </Grid>
-            <Grid item xs={12} sm={6}>
+            <Grid item xs={12} sm={4}>
               <TextField
                 fullWidth
-                label='Phone Number'
-                value={formData.phoneNumber}
-                placeholder='+1 (234) 567-8901'
-                onChange={e => handleFormChange('phoneNumber', e.target.value)}
-              />
+                select
+                label='役割'
+                name='roleId'
+                value={form.roleId === '' ? '' : form.roleId}
+                onChange={handleFormChange}
+                disabled={loadingRoles || roles.length === 0}
+                SelectProps={{ MenuProps: { disablePortal: true } }}
+              >
+                {loadingRoles ? (
+                  <MenuItem value='' disabled>読み込み中…</MenuItem>
+                ) : (
+                  roles.map(role => (
+                    <MenuItem key={role?.role_id ?? role?.role_name} value={role?.role_id}>
+                      {role?.role_name}{role?.is_admin ? '（管理者）' : ''}
+                    </MenuItem>
+                  ))
+                )}
+              </TextField>
             </Grid>
-            <Grid item xs={12} sm={6}>
+            <Grid item xs={12} sm={4}>
               <TextField
                 fullWidth
-                label='Address'
-                value={formData.address}
-                placeholder='Address'
-                onChange={e => handleFormChange('address', e.target.value)}
-              />
+                select
+                label='担当ライン'
+                name='lineId'
+                value={form.lineId === '' ? '' : form.lineId}
+                onChange={handleFormChange}
+                disabled={loadingLines}
+                SelectProps={{ MenuProps: { disablePortal: true } }}
+                helperText={(!loadingLines && lines.length === 0) ? 'ラインが未登録です。管理画面から追加してください。' : '　'}
+              >
+                <MenuItem value=''>未選択</MenuItem>
+                {loadingLines ? (
+                  <MenuItem value='' disabled>読み込み中…</MenuItem>
+                ) : (
+                  lines.map(line => (
+                    <MenuItem key={line?.line_id ?? line?.line_name} value={line?.line_id}>
+                      {line?.line_name}
+                    </MenuItem>
+                  ))
+                )}
+              </TextField>
             </Grid>
-            <Grid item xs={12} sm={6}>
+            <Grid item xs={12} sm={4}>
               <TextField
                 fullWidth
-                label='State'
-                value={formData.state}
-                placeholder='New York'
-                onChange={e => handleFormChange('state', e.target.value)}
-              />
+                select
+                label='在籍状況'
+                name='status'
+                value={form.status}
+                onChange={handleFormChange}
+                SelectProps={{ MenuProps: { disablePortal: true } }}
+              >
+                <MenuItem value='在籍中'>在籍中</MenuItem>
+                <MenuItem value='退職済'>退職済</MenuItem>
+              </TextField>
             </Grid>
-            <Grid item xs={12} sm={6}>
+            <Grid item xs={12}>
               <TextField
                 fullWidth
-                type='number'
-                label='Zip Code'
-                value={formData.zipCode}
-                placeholder='123456'
-                onChange={e => handleFormChange('zipCode', e.target.value)}
+                label='特記事項'
+                placeholder='夜勤中心 など'
+                name='specialNotes'
+                value={form.specialNotes}
+                onChange={handleFormChange}
+                multiline
+                minRows={2}
               />
             </Grid>
-            <Grid item xs={12} sm={6}>
-              <FormControl fullWidth>
-                <InputLabel>Country</InputLabel>
-                <Select
-                  label='Country'
-                  value={formData.country}
-                  onChange={e => handleFormChange('country', e.target.value)}
-                >
-                  <MenuItem value='usa'>USA</MenuItem>
-                  <MenuItem value='uk'>UK</MenuItem>
-                  <MenuItem value='australia'>Australia</MenuItem>
-                  <MenuItem value='germany'>Germany</MenuItem>
-                </Select>
-              </FormControl>
-            </Grid>
-            <Grid item xs={12} sm={6}>
-              <FormControl fullWidth>
-                <InputLabel>Language</InputLabel>
-                <Select
-                  multiple
-                  label='Language'
-                  value={language}
-                  onChange={handleChange}
-                  renderValue={selected => (
-                    <div className='flex flex-wrap gap-2'>
-                      {selected.map(value => (
-                        <Chip
-                          key={value}
-                          clickable
-                          deleteIcon={
-                            <i className='ri-close-circle-fill' onMouseDown={event => event.stopPropagation()} />
-                          }
-                          size='small'
-                          label={value}
-                          onDelete={() => handleDelete(value)}
-                        />
-                      ))}
-                    </div>
-                  )}
-                >
-                  {languageData.map(name => (
-                    <MenuItem key={name} value={name}>
-                      {name}
-                    </MenuItem>
-                  ))}
-                </Select>
-              </FormControl>
-            </Grid>
-            <Grid item xs={12} sm={6}>
-              <FormControl fullWidth>
-                <InputLabel>TimeZone</InputLabel>
-                <Select
-                  label='TimeZone'
-                  value={formData.timezone}
-                  onChange={e => handleFormChange('timezone', e.target.value)}
-                  MenuProps={{ PaperProps: { style: { maxHeight: 250 } } }}
-                >
-                  <MenuItem value='gmt-12'>(GMT-12:00) International Date Line West</MenuItem>
-                  <MenuItem value='gmt-11'>(GMT-11:00) Midway Island, Samoa</MenuItem>
-                  <MenuItem value='gmt-10'>(GMT-10:00) Hawaii</MenuItem>
-                  <MenuItem value='gmt-09'>(GMT-09:00) Alaska</MenuItem>
-                  <MenuItem value='gmt-08'>(GMT-08:00) Pacific Time (US & Canada)</MenuItem>
-                  <MenuItem value='gmt-08-baja'>(GMT-08:00) Tijuana, Baja California</MenuItem>
-                  <MenuItem value='gmt-07'>(GMT-07:00) Chihuahua, La Paz, Mazatlan</MenuItem>
-                  <MenuItem value='gmt-07-mt'>(GMT-07:00) Mountain Time (US & Canada)</MenuItem>
-                  <MenuItem value='gmt-06'>(GMT-06:00) Central America</MenuItem>
-                  <MenuItem value='gmt-06-ct'>(GMT-06:00) Central Time (US & Canada)</MenuItem>
-                  <MenuItem value='gmt-06-mc'>(GMT-06:00) Guadalajara, Mexico City, Monterrey</MenuItem>
-                  <MenuItem value='gmt-06-sk'>(GMT-06:00) Saskatchewan</MenuItem>
-                  <MenuItem value='gmt-05'>(GMT-05:00) Bogota, Lima, Quito, Rio Branco</MenuItem>
-                  <MenuItem value='gmt-05-et'>(GMT-05:00) Eastern Time (US & Canada)</MenuItem>
-                  <MenuItem value='gmt-05-ind'>(GMT-05:00) Indiana (East)</MenuItem>
-                  <MenuItem value='gmt-04'>(GMT-04:00) Atlantic Time (Canada)</MenuItem>
-                  <MenuItem value='gmt-04-clp'>(GMT-04:00) Caracas, La Paz</MenuItem>
-                </Select>
-              </FormControl>
-            </Grid>
-            <Grid item xs={12} sm={6}>
-              <FormControl fullWidth>
-                <InputLabel>Currency</InputLabel>
-                <Select
-                  label='Currency'
-                  value={formData.currency}
-                  onChange={e => handleFormChange('currency', e.target.value)}
-                >
-                  <MenuItem value='usd'>USD</MenuItem>
-                  <MenuItem value='euro'>EUR</MenuItem>
-                  <MenuItem value='pound'>Pound</MenuItem>
-                  <MenuItem value='bitcoin'>Bitcoin</MenuItem>
-                </Select>
-              </FormControl>
-            </Grid>
             <Grid item xs={12} className='flex gap-4 flex-wrap'>
-              <Button variant='contained' type='submit'>
-                Save Changes
-              </Button>
-              <Button variant='outlined' type='reset' color='secondary' onClick={() => setFormData(initialData)}>
-                Reset
+              <Button variant='contained' type='submit' disabled={saving}>
+                {saving ? '保存中…' : '変更を保存'}
               </Button>
             </Grid>
           </Grid>
         </form>
       </CardContent>
+      <Snackbar
+        open={snack.open}
+        autoHideDuration={3000}
+        onClose={() => setSnack(s => ({ ...s, open: false }))}
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
+      >
+        <Alert
+          onClose={() => setSnack(s => ({ ...s, open: false }))}
+          severity={snack.severity}
+          sx={{ width: '100%' }}
+        >
+          {snack.message}
+        </Alert>
+      </Snackbar>
     </Card>
   )
 }
diff --git a/javascript-version/src/views/account-settings/connections/index.jsx b/javascript-version/src/views/account-settings/connections/index.jsx
index 6d2ea7d96..3a747aa67 100644
--- a/javascript-version/src/views/account-settings/connections/index.jsx
+++ b/javascript-version/src/views/account-settings/connections/index.jsx
@@ -18,30 +18,30 @@ const connectedAccountsArr = [
     checked: true,
     title: 'Google',
     logo: '/images/logos/google.png',
-    subtitle: 'Calendar and Contacts'
+    subtitle: 'カレンダーと連絡先'
   },
   {
     checked: false,
     title: 'Slack',
     logo: '/images/logos/slack.png',
-    subtitle: 'Communications'
+    subtitle: 'コミュニケーション'
   },
   {
     checked: true,
     title: 'Github',
     logo: '/images/logos/github.png',
-    subtitle: 'Manage your Git repositories'
+    subtitle: 'Git リポジトリの管理'
   },
   {
     checked: true,
     title: 'Mailchimp',
-    subtitle: 'Email marketing service',
+    subtitle: 'メールマーケティングサービス',
     logo: '/images/logos/mailchimp.png'
   },
   {
     title: 'Asana',
     checked: false,
-    subtitle: 'Task Communication',
+    subtitle: 'タスク連携',
     logo: '/images/logos/asana.png'
   }
 ]
@@ -84,8 +84,8 @@ const Connections = () => {
       <Grid container>
         <Grid item xs={12} md={6}>
           <CardHeader
-            title='Connected Accounts'
-            subheader='Display content from your connected accounts on your site'
+            title='接続済みアカウント'
+            subheader='接続済みアカウントのコンテンツをサイトに表示します'
           />
           <CardContent className='flex flex-col gap-4'>
             {connectedAccountsArr.map((item, index) => (
@@ -105,7 +105,7 @@ const Connections = () => {
           </CardContent>
         </Grid>
         <Grid item xs={12} md={6}>
-          <CardHeader title='Social Accounts' subheader='Display content from social accounts on your site' />
+          <CardHeader title='ソーシャルアカウント' subheader='ソーシャルアカウントのコンテンツをサイトに表示します' />
           <CardContent className='flex flex-col gap-4'>
             {socialAccountsArr.map((item, index) => (
               <div key={index} className='flex items-center justify-between gap-4'>
@@ -120,7 +120,7 @@ const Connections = () => {
                         {item.username}
                       </Typography>
                     ) : (
-                      <Typography variant='body2'>Not Connected</Typography>
+                      <Typography variant='body2'>未接続</Typography>
                     )}
                   </div>
                 </div>
diff --git a/javascript-version/src/views/account-settings/display/index.jsx b/javascript-version/src/views/account-settings/display/index.jsx
new file mode 100644
index 000000000..1e48dc029
--- /dev/null
+++ b/javascript-version/src/views/account-settings/display/index.jsx
@@ -0,0 +1,174 @@
+'use client'
+
+import { useState } from 'react'
+
+// MUI Imports
+import Grid from '@mui/material/Grid'
+import Typography from '@mui/material/Typography'
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+import FormGroup from '@mui/material/FormGroup'
+import FormControlLabel from '@mui/material/FormControlLabel'
+import Switch from '@mui/material/Switch'
+import FormControl from '@mui/material/FormControl'
+import InputLabel from '@mui/material/InputLabel'
+import Select from '@mui/material/Select'
+import MenuItem from '@mui/material/MenuItem'
+import Slider from '@mui/material/Slider'
+import Divider from '@mui/material/Divider'
+import Box from '@mui/material/Box'
+
+const DisplaySettings = () => {
+  const [easyMode, setEasyMode] = useState(false)
+  const [themeMode, setThemeMode] = useState('system')
+  const [colorPreset, setColorPreset] = useState('default')
+  const [fontSize, setFontSize] = useState('md')
+  const [density, setDensity] = useState('comfortable')
+  const [rowsPerPage, setRowsPerPage] = useState(10)
+  const [borderRadius, setBorderRadius] = useState(10)
+  const [reduceMotion, setReduceMotion] = useState(false)
+
+  return (
+    <Card>
+      <CardHeader
+        title='表示設定'
+        subheader='ここで UI の見た目を調整できます（ダミー設定のため保存は行われません）。'
+      />
+      <Divider />
+      <CardContent>
+        <Grid container spacing={6}>
+          <Grid item xs={12}>
+            <FormGroup>
+              <FormControlLabel
+                control={<Switch checked={easyMode} onChange={e => setEasyMode(e.target.checked)} />}
+                label='かんたんモード'
+              />
+              <Typography variant='body2' color='text.secondary' sx={{ ml: 5 }}>
+                UI を簡略化して主要機能のみを表示します。
+              </Typography>
+            </FormGroup>
+          </Grid>
+
+          <Grid item xs={12} md={6}>
+            <FormControl fullWidth>
+              <InputLabel id='theme-mode-label'>テーマ</InputLabel>
+              <Select
+                labelId='theme-mode-label'
+                label='テーマ'
+                value={themeMode}
+                onChange={e => setThemeMode(e.target.value)}
+              >
+                <MenuItem value='light'>ライト</MenuItem>
+                <MenuItem value='dark'>ダーク</MenuItem>
+                <MenuItem value='system'>システム</MenuItem>
+              </Select>
+            </FormControl>
+          </Grid>
+
+          <Grid item xs={12} md={6}>
+            <FormControl fullWidth>
+              <InputLabel id='color-preset-label'>配色プリセット</InputLabel>
+              <Select
+                labelId='color-preset-label'
+                label='配色プリセット'
+                value={colorPreset}
+                onChange={e => setColorPreset(e.target.value)}
+              >
+                <MenuItem value='default'>デフォルト</MenuItem>
+                <MenuItem value='blue'>ブルー系</MenuItem>
+                <MenuItem value='green'>グリーン系</MenuItem>
+                <MenuItem value='purple'>パープル系</MenuItem>
+                <MenuItem value='orange'>オレンジ系</MenuItem>
+              </Select>
+            </FormControl>
+          </Grid>
+
+          <Grid item xs={12} md={6}>
+            <FormControl fullWidth>
+              <InputLabel id='font-size-label'>フォントサイズ</InputLabel>
+              <Select
+                labelId='font-size-label'
+                label='フォントサイズ'
+                value={fontSize}
+                onChange={e => setFontSize(e.target.value)}
+              >
+                <MenuItem value='sm'>小</MenuItem>
+                <MenuItem value='md'>標準</MenuItem>
+                <MenuItem value='lg'>大</MenuItem>
+              </Select>
+            </FormControl>
+          </Grid>
+
+          <Grid item xs={12} md={6}>
+            <FormControl fullWidth>
+              <InputLabel id='density-label'>表示密度</InputLabel>
+              <Select
+                labelId='density-label'
+                label='表示密度'
+                value={density}
+                onChange={e => setDensity(e.target.value)}
+              >
+                <MenuItem value='comfortable'>快適</MenuItem>
+                <MenuItem value='compact'>コンパクト</MenuItem>
+              </Select>
+            </FormControl>
+          </Grid>
+
+          <Grid item xs={12} md={6}>
+            <FormControl fullWidth>
+              <InputLabel id='rows-label'>表の行数（1ページあたり）</InputLabel>
+              <Select
+                labelId='rows-label'
+                label='表の行数（1ページあたり）'
+                value={rowsPerPage}
+                onChange={e => setRowsPerPage(e.target.value)}
+              >
+                {[10, 25, 50, 100].map(n => (
+                  <MenuItem key={n} value={n}>
+                    {n}
+                  </MenuItem>
+                ))}
+              </Select>
+            </FormControl>
+          </Grid>
+
+          <Grid item xs={12} md={6}>
+            <Box>
+              <Typography gutterBottom>カードの角丸</Typography>
+              <Slider
+                value={borderRadius}
+                onChange={(_, v) => setBorderRadius(v)}
+                min={0}
+                max={24}
+                step={2}
+                valueLabelDisplay='auto'
+              />
+            </Box>
+          </Grid>
+
+          <Grid item xs={12}>
+            <FormGroup>
+              <FormControlLabel
+                control={<Switch checked={reduceMotion} onChange={e => setReduceMotion(e.target.checked)} />}
+                label='アニメーションを減らす'
+              />
+              <Typography variant='body2' color='text.secondary' sx={{ ml: 5 }}>
+                画面遷移や装飾的なアニメーションを最小限にします。
+              </Typography>
+            </FormGroup>
+          </Grid>
+
+          <Grid item xs={12}>
+            <Divider sx={{ my: 2 }} />
+            <Typography variant='caption' color='text.secondary'>
+              すべてダミー設定です。リロードすると元に戻ります。
+            </Typography>
+          </Grid>
+        </Grid>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default DisplaySettings
diff --git a/javascript-version/src/views/account-settings/index.jsx b/javascript-version/src/views/account-settings/index.jsx
index 3d7d27d96..804e1cc66 100644
--- a/javascript-version/src/views/account-settings/index.jsx
+++ b/javascript-version/src/views/account-settings/index.jsx
@@ -6,9 +6,11 @@ import { useState } from 'react'
 // MUI Imports
 import Grid from '@mui/material/Grid'
 import Tab from '@mui/material/Tab'
+import Typography from '@mui/material/Typography'
 import TabContext from '@mui/lab/TabContext'
 import TabList from '@mui/lab/TabList'
 import TabPanel from '@mui/lab/TabPanel'
+import DisplaySettings from './display'
 
 const AccountSettings = ({ tabContentList }) => {
   // States
@@ -23,19 +25,24 @@ const AccountSettings = ({ tabContentList }) => {
       <Grid container spacing={6}>
         <Grid item xs={12}>
           <TabList onChange={handleChange} variant='scrollable'>
-            <Tab label='Account' icon={<i className='ri-user-3-line' />} iconPosition='start' value='account' />
+            <Tab label='アカウント' icon={<i className='ri-user-3-line' />} iconPosition='start' value='account' />
+            <Tab label='表示設定' icon={<i className='ri-eye-line' />} iconPosition='start' value='display' />
             <Tab
-              label='Notifications'
+              label='通知'
               icon={<i className='ri-notification-3-line' />}
               iconPosition='start'
               value='notifications'
+              disabled
             />
-            <Tab label='Connections' icon={<i className='ri-link' />} iconPosition='start' value='connections' />
+            <Tab label='連携' icon={<i className='ri-link' />} iconPosition='start' value='connections' disabled />
           </TabList>
+          <Typography variant='body2' color='text.secondary' sx={{ mt: 2 }}>
+            「通知」「連携」タブは現在未実装のため、利用できません。
+          </Typography>
         </Grid>
         <Grid item xs={12}>
           <TabPanel value={activeTab} className='p-0'>
-            {tabContentList[activeTab]}
+            {activeTab === 'display' ? <DisplaySettings /> : tabContentList[activeTab]}
           </TabPanel>
         </Grid>
       </Grid>
diff --git a/javascript-version/src/views/account-settings/notifications/index.jsx b/javascript-version/src/views/account-settings/notifications/index.jsx
index 9a2e61879..b8ef3cb34 100644
--- a/javascript-version/src/views/account-settings/notifications/index.jsx
+++ b/javascript-version/src/views/account-settings/notifications/index.jsx
@@ -22,25 +22,25 @@ const tableData = [
     app: true,
     email: true,
     browser: true,
-    type: 'New for you'
+    type: 'あなた向けの新着'
   },
   {
     app: true,
     email: true,
     browser: true,
-    type: 'Account activity'
+    type: 'アカウントのアクティビティ'
   },
   {
     app: false,
     email: true,
     browser: true,
-    type: 'A new browser used to sign in'
+    type: '新しいブラウザでのサインイン'
   },
   {
     app: false,
     email: true,
     browser: false,
-    type: 'A new device is linked'
+    type: '新しいデバイスがリンクされました'
   }
 ]
 
@@ -48,11 +48,11 @@ const Notifications = () => {
   return (
     <Card>
       <CardHeader
-        title='Recent Devices'
+        title='最近のデバイス'
         subheader={
           <>
-            We need permission from your browser to show notifications.
-            <Link className='text-primary'> Request Permission</Link>
+            通知を表示するにはブラウザの許可が必要です。
+            <Link className='text-primary'> 許可をリクエスト</Link>
           </>
         }
       />
@@ -61,10 +61,10 @@ const Notifications = () => {
           <table className={tableStyles.table}>
             <thead>
               <tr>
-                <th>Type</th>
-                <th>Email</th>
-                <th>Browser</th>
-                <th>App</th>
+                <th>種類</th>
+                <th>メール</th>
+                <th>ブラウザ</th>
+                <th>アプリ</th>
               </tr>
             </thead>
             <tbody className='border-be'>
@@ -88,20 +88,20 @@ const Notifications = () => {
           </table>
         </div>
         <CardContent>
-          <Typography className='mbe-6 font-medium'>When should we send you notifications?</Typography>
+          <Typography className='mbe-6 font-medium'>通知を送信するタイミング</Typography>
           <Grid container spacing={6}>
             <Grid item xs={12} sm={6} md={4}>
               <Select fullWidth defaultValue='online'>
-                <MenuItem value='online'>Only when I&#39;m online</MenuItem>
-                <MenuItem value='anytime'>Anytime</MenuItem>
+                <MenuItem value='online'>オンラインのときのみ</MenuItem>
+                <MenuItem value='anytime'>常に</MenuItem>
               </Select>
             </Grid>
             <Grid item xs={12} className='flex gap-4 flex-wrap'>
               <Button variant='contained' type='submit'>
-                Save Changes
+                変更を保存
               </Button>
               <Button variant='outlined' color='secondary' type='reset'>
-                Reset
+                リセット
               </Button>
             </Grid>
           </Grid>
diff --git a/javascript-version/src/views/dashboard/LineChart.jsx b/javascript-version/src/views/dashboard/LineChart.jsx
index 49860eff5..3f6d6fed9 100644
--- a/javascript-version/src/views/dashboard/LineChart.jsx
+++ b/javascript-version/src/views/dashboard/LineChart.jsx
@@ -78,7 +78,7 @@ const LineChart = () => {
         <Typography variant='h4'>$86.4k</Typography>
         <AppReactApexCharts type='line' height={88} width='100%' options={options} series={series} />
         <Typography color='text.primary' className='font-medium text-center'>
-          Total Profit
+          総利益
         </Typography>
       </CardContent>
     </Card>
diff --git a/javascript-version/src/views/dashboard/top/AdminMenuCard.jsx b/javascript-version/src/views/dashboard/top/AdminMenuCard.jsx
new file mode 100644
index 000000000..64a967f4f
--- /dev/null
+++ b/javascript-version/src/views/dashboard/top/AdminMenuCard.jsx
@@ -0,0 +1,50 @@
+// 管理者メニューカード: ダッシュボード右側の管理者向け操作ボタン
+
+"use client";
+
+import Card from "@mui/material/Card";
+import CardHeader from "@mui/material/CardHeader";
+import CardContent from "@mui/material/CardContent";
+import Stack from "@mui/material/Stack";
+import Divider from "@mui/material/Divider";
+import Button from "@mui/material/Button";
+
+import GroupOutlinedIcon from "@mui/icons-material/GroupOutlined";
+import LiveTvOutlinedIcon from "@mui/icons-material/LiveTvOutlined";
+
+import Link from "@/components/Link";
+
+const AdminMenuCard = () => {
+  return (
+    <Card sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
+      <CardHeader title="管理者メニュー" />
+      <CardContent>
+        <Stack spacing={2}>
+          <Button
+            component={Link}
+            href="/employee-list"
+            variant="outlined"
+            color="inherit"
+            startIcon={<GroupOutlinedIcon />}
+            sx={{ justifyContent: 'flex-start' }}
+          >
+            従業員名簿の管理
+          </Button>
+          <Divider />
+          <Button
+            component={Link}
+            href="/machine-status"
+            variant="outlined"
+            color="inherit"
+            startIcon={<LiveTvOutlinedIcon />}
+            sx={{ justifyContent: 'flex-start' }}
+          >
+            サイネージ用モニター
+          </Button>
+        </Stack>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default AdminMenuCard;
diff --git a/javascript-version/src/views/dashboard/top/ImageInspectionStatusCard.jsx b/javascript-version/src/views/dashboard/top/ImageInspectionStatusCard.jsx
new file mode 100644
index 000000000..3f83ff38f
--- /dev/null
+++ b/javascript-version/src/views/dashboard/top/ImageInspectionStatusCard.jsx
@@ -0,0 +1,214 @@
+// 画像検査ステータスカード: 良品率の円グラフ表示 (セクション切替機能付き)
+
+"use client";
+
+// --- ▼ Reactフックを追加 ▼ ---
+import { useEffect, useState } from "react";
+
+import Card from "@mui/material/Card";
+import CardHeader from "@mui/material/CardHeader";
+import CardContent from "@mui/material/CardContent";
+import CardActionArea from "@mui/material/CardActionArea";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+
+// --- ▼ 切り替えボタン用のコンポーネントをインポート ▼ ---
+import ToggleButton from '@mui/material/ToggleButton';
+import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
+import Tooltip from '@mui/material/Tooltip'; // Tooltipのインポート
+
+import Link from "@/components/Link";
+
+const headerMinHeight = 80;
+
+// セクションコードから日本語の表示名に変換
+const getSectionName = (code) => {
+  switch (code) {
+    case 'spring':
+      return 'バネどめ機';
+    case 'alayer':
+      return 'A層検査';
+    default:
+      return code;
+  }
+};
+
+// 日付文字列 (YYYY-MM-DD) を短い形式 (M/D) に変換するヘルパー関数
+const formatDateShort = (dateStr) => {
+  if (!dateStr) return '';
+  try {
+    const [year, month, day] = dateStr.split('-');
+    // parseIntを使って 01月 -> 1月 のように変換
+    return `${parseInt(month, 10)}/${parseInt(day, 10)}`;
+  } catch (e) {
+    return '';
+  }
+};
+
+const ImageInspectionStatusCard = () => {
+  // --- ▼ Stateを定義 ▼ ---
+  const [inspectionData, setInspectionData] = useState(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState(null);
+  
+  // --- ▼ 新しいState: 現在選択中のセクションを管理 ▼ ---
+  // 初期値を 'alayer' (A層) に設定
+  const [currentSection, setCurrentSection] = useState('alayer');
+
+  // --- ▼ トグルボタンが押された時の処理 ▼ ---
+  const handleSectionChange = (event, newSection) => {
+    // ボタンが何も選択されなくなるのを防ぐ
+    if (newSection !== null) {
+      setCurrentSection(newSection);
+    }
+  };
+
+  // --- ▼ APIからデータを取得 (useEffect) ▼ ---
+  useEffect(() => {
+    const fetchStatus = async () => {
+      setIsLoading(true); // データを取得開始時にローディング中にする
+      setError(null);
+      try {
+        // APIを叩く (useLotsData修正によりAPI側で最新日付が自動選択される)
+        const res = await fetch(`/api/inspections/summary?section=${currentSection}`);
+        
+        if (!res.ok) {
+          throw new Error('検査ステータスの取得に失敗');
+        }
+        
+        const data = await res.json();
+        setInspectionData(data);
+
+      } catch (err) {
+        console.error(err);
+        setError(err.message);
+        setInspectionData(null);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    
+    fetchStatus();
+    
+  // currentSection が変わるたびに再取得
+  }, [currentSection]); 
+
+
+  // --- ▼ ローディング・エラー・成功時で表示を分ける ▼ ---
+  const renderContent = () => {
+    if (isLoading) {
+      return (
+        <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: 120 }}>
+          <Typography>読み込み中...</Typography>
+        </Box>
+      );
+    }
+
+    if (error) {
+      return (
+        <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: 120 }}>
+          <Typography color="error" variant="body2">{error}</Typography>
+        </Box>
+      );
+    }
+    
+    if (!inspectionData || inspectionData.total_count === 0) {
+      return (
+        <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: 120 }}>
+          <Typography color="text.secondary">本日の検査データはありません</Typography>
+        </Box>
+      );
+    }
+
+    // データ取得成功時の表示
+    const goodRate = inspectionData.pass_rate;
+
+    return (
+      <Box display="flex" alignItems="center" justifyContent="center" gap={2.5}>
+        <Box position="relative" width={120} height={120}>
+          <svg viewBox="0 0 36 36" width="120" height="120">
+            <path
+              d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
+              fill="none"
+              stroke="var(--mui-palette-action-disabledBackground)"
+              strokeWidth="3"
+            />
+            <path
+              strokeDasharray={`${goodRate}, 100`}
+              d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
+              fill="none"
+              stroke="var(--mui-palette-info-main)"
+              strokeWidth="3"
+              strokeLinecap="round"
+            />
+          </svg>
+          <Box sx={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', zIndex: 1 }}>
+            <Typography variant="h5" fontWeight={700}>{goodRate}%</Typography>
+            <Typography variant="caption">良品率</Typography>
+          </Box>
+        </Box>
+        <Box>
+          <Typography variant="body1">検査総数: {inspectionData.total_count.toLocaleString()}</Typography>
+          <Typography variant="body1" color="info.main" fontWeight={700}>良品画像: {inspectionData.pass_count.toLocaleString()}</Typography>
+          <Typography variant="body1" color="error.main" fontWeight={700}>不良画像: {inspectionData.fail_count.toLocaleString()}</Typography>
+        </Box>
+      </Box>
+    );
+  };
+
+  // タイトルに日付を追加するための準備
+  const dateLabel = (inspectionData?.date) 
+    ? ` (${formatDateShort(inspectionData.date)})` 
+    : '';
+
+  return (
+    <Card sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
+      
+      {/* --- ▼ CardHeader: タイトルとトグルボタン ▼ --- */}
+      <CardHeader
+        title={`画像検査ステータス${dateLabel}`} 
+        subheader={getSectionName(currentSection)} // 選択中のセクション名を表示
+        action={
+          <Tooltip title="表示セクション切り替え">
+            <ToggleButtonGroup
+              value={currentSection}
+              exclusive
+              onChange={handleSectionChange}
+              aria-label="セクション切り替え"
+              size="small"
+              sx={{ mr: 1 }} 
+            >
+              {/* ★変更点: A層を先に配置 */}
+              <ToggleButton value="alayer" aria-label="A層検査">
+                A層
+              </ToggleButton>
+              {/* ★変更点: バネを後に配置 */}
+              <ToggleButton value="spring" aria-label="バネどめ機">
+                バネ
+              </ToggleButton>
+            </ToggleButtonGroup>
+          </Tooltip>
+        }
+        sx={{ minHeight: headerMinHeight }}
+      />
+
+      <CardActionArea 
+        component={Link} 
+        href="/image-inspection"
+        sx={{ 
+          height: '100%', 
+          display: 'flex', 
+          flexDirection: 'column', 
+          alignItems: 'stretch',
+          flexGrow: 1 
+        }}
+      >
+        <CardContent sx={{ flexGrow: 1, display: 'flex', alignItems: 'center' }}>
+          {renderContent()}
+        </CardContent>
+      </CardActionArea>
+    </Card>
+  );
+};
+
+export default ImageInspectionStatusCard;
\ No newline at end of file
diff --git a/javascript-version/src/views/dashboard/top/MachineErrorLogsCard.jsx b/javascript-version/src/views/dashboard/top/MachineErrorLogsCard.jsx
new file mode 100644
index 000000000..c6273f4bc
--- /dev/null
+++ b/javascript-version/src/views/dashboard/top/MachineErrorLogsCard.jsx
@@ -0,0 +1,131 @@
+// 機械エラーログカード: 直近のエラー・警告・情報をリスト表示
+
+"use client";
+
+// --- ▼ Reactフックを追加 ▼ ---
+import { useEffect, useState } from "react";
+
+import Card from "@mui/material/Card";
+import CardHeader from "@mui/material/CardHeader";
+import CardContent from "@mui/material/CardContent";
+import CardActionArea from "@mui/material/CardActionArea";
+import Stack from "@mui/material/Stack";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import Chip from "@mui/material/Chip";
+
+import HardwareIcon from "@mui/icons-material/Hardware";
+import Link from "@/components/Link";
+
+const headerMinHeight = 80;
+
+// --- ▼ タイムスタンプをフォーマットする関数 ▼ ---
+// (例: "2025-07-15T10:15:32Z" -> "2025-07-15 10:15")
+const formatTimestamp = (isoString) => {
+  if (!isoString) return "時刻不明";
+  try {
+    const date = new Date(isoString);
+    // ja-JPロケール、日本時間（JST）で "YYYY-MM-DD HH:mm" 形式に
+    return new Intl.DateTimeFormat('ja-JP', {
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit',
+      hour: '2-digit',
+      minute: '2-digit',
+      timeZone: 'Asia/Tokyo' // タイムゾーンをJSTに指定
+    }).format(date).replace(/\//g, '-'); // スラッシュをハイフンに置換
+  } catch (error) {
+    console.error("Timestamp format error:", error);
+    return isoString; // エラー時は元の文字列を返す
+  }
+};
+
+
+const MachineErrorLogsCard = () => {
+  // --- ▼ Stateを定義 ▼ ---
+  // APIから取得したログ (data.logs) を格納する
+  const [logs, setLogs] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState(null);
+  
+  // --- ▼ APIからデータを取得 (useEffect) ▼ ---
+  useEffect(() => {
+    const fetchLogs = async () => {
+      setIsLoading(true);
+      setError(null);
+      try {
+        // 機械名 "半自動表層バネどめ機" をURLに含め、limit=3 を指定
+        const res = await fetch('/api/machines/半自動表層バネどめ機/logs?limit=3');
+
+        if (!res.ok) {
+          throw new Error('エラーログの取得に失敗しました');
+        }
+        const data = await res.json();
+        
+        // 取得した data.logs で state を更新
+        setLogs(data.logs || []);
+
+      } catch (err) {
+        console.error(err);
+        setError(err.message);
+        setLogs([]); // エラー時は空にする
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    fetchLogs();
+  }, []); // [] = ページ読み込み時に1回だけ実行
+
+
+  // --- ▼ ローディング・エラー・成功時で表示を分ける ▼ ---
+  const renderContent = () => {
+    if (isLoading) {
+      return <Typography sx={{ p: 2, textAlign: 'center' }}>読み込み中...</Typography>;
+    }
+
+    if (error) {
+      return <Typography color="error" sx={{ p: 2, textAlign: 'center' }}>{error}</Typography>;
+    }
+    
+    if (logs.length === 0) {
+      return <Typography sx={{ p: 2, textAlign: 'center' }}>直近のエラーログはありません</Typography>;
+    }
+
+    // データ取得成功時の表示
+    return (
+      <Stack spacing={1.5}>
+        {logs.map(log => (
+          <Box key={log.log_id} display="flex" alignItems="center" justifyContent="space-between">
+            <Box>
+              <Typography variant="caption" color="text.disabled">
+                {formatTimestamp(log.timestamp)} {/* ★フォーマット関数適用 */}
+              </Typography>
+              <Typography variant="body2" sx={{ mt: 0.5 }}>
+                {log.title} {/* ★APIの "title" を表示 */}
+              </Typography>
+            </Box>
+            
+            {/* ★APIの "log_type" に合わせてChipを表示 */}
+            {log.log_type === 'error' && <Chip label="重大" color="error" size="small" />}
+            {log.log_type === 'warning' && <Chip label="警告" color="warning" size="small" />}
+            {log.log_type === 'info' && <Chip label="情報" color="info" size="small" />}
+          </Box>
+        ))}
+      </Stack>
+    );
+  };
+
+  return (
+    <Card sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
+      <CardActionArea component={Link} href="/machine-status" sx={{ height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'stretch' }}>
+        <CardHeader title="半自動表層バネどめ機｜直近エラーログ" action={<HardwareIcon color="action" />} sx={{ minHeight: headerMinHeight }} />
+        {/* --- ▼ CardContent の中身を `renderContent()` に置き換え ▼ --- */}
+        <CardContent sx={{ flexGrow: 1 }}>
+          {renderContent()}
+        </CardContent>
+      </CardActionArea>
+    </Card>
+  );
+};
+
+export default MachineErrorLogsCard;
\ No newline at end of file
diff --git a/javascript-version/src/views/dashboard/top/NoticeCard.jsx b/javascript-version/src/views/dashboard/top/NoticeCard.jsx
new file mode 100644
index 000000000..901f22344
--- /dev/null
+++ b/javascript-version/src/views/dashboard/top/NoticeCard.jsx
@@ -0,0 +1,329 @@
+// 今日のお知らせカード: ダッシュボード先頭に表示されるお知らせ・連絡欄
+"use client";
+
+// React
+import { useEffect, useState } from "react";
+
+// MUI
+import Card from "@mui/material/Card";
+import CardHeader from "@mui/material/CardHeader";
+import CardContent from "@mui/material/CardContent";
+import Button from "@mui/material/Button";
+import Typography from "@mui/material/Typography";
+import Dialog from "@mui/material/Dialog";
+import DialogTitle from "@mui/material/DialogTitle";
+import DialogContent from "@mui/material/DialogContent";
+import DialogActions from "@mui/material/DialogActions";
+import TextField from "@mui/material/TextField";
+import Chip from "@mui/material/Chip";
+import FormControl from "@mui/material/FormControl";
+import FormLabel from "@mui/material/FormLabel";
+import RadioGroup from "@mui/material/RadioGroup";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import Radio from "@mui/material/Radio";
+import { alpha, useTheme } from "@mui/material/styles";
+import useAuthMe from "@core/hooks/useAuthMe";
+
+// Icons
+import CreateOutlinedIcon from "@mui/icons-material/CreateOutlined";
+
+// --- ▼ API・UI マッピング関数 ▼ ---
+
+/**
+ * APIレスポンス ( "高い" ) を UI内部状態 ( "important" ) に変換
+ * @param {string} apiPriority "低い" | "普通" | "高い"
+ * @returns {string} "normal" | "warning" | "important"
+ */
+const apiPriorityToUiPriority = (apiPriority) => {
+  switch (apiPriority) {
+    case "高い":
+      return "important";
+    case "普通":
+      return "warning";
+    case "低い":
+    default:
+      return "normal";
+  }
+};
+
+/**
+ * UI内部状態 ( "important" ) を APIリクエスト ( 3 ) に変換
+ * (API設計書: 1:低い, 2:普通, 3:高い)
+ * @param {string} uiPriority "normal" | "warning" | "important"
+ * @returns {number} 1 | 2 | 3
+ */
+const uiPriorityToApiPriority = (uiPriority) => {
+  switch (uiPriority) {
+    case "important":
+      return 3; // 高い
+    case "warning":
+      return 2; // 普通
+    case "normal":
+    default:
+      return 1; // 低い
+  }
+};
+
+// --- ▲ API・UI マッピング関数 ▲ ---
+
+
+// UI表示に使う内部の優先度値
+const PRIORITIES = {
+  important: { label: "重要" },
+  warning: { label: "注意" },
+  normal: { label: "通常" }
+};
+
+const NoticeCard = ({ height = 160 }) => {
+  // --- ▼ State 修正 ▼ ---
+  const [notice, setNotice] = useState(null); // APIから取得するため初期値 null
+  const [priority, setPriority] = useState("normal"); // 'important' | 'warning' | 'normal'
+  const [isEditOpen, setIsEditOpen] = useState(false);
+  const [draft, setDraft] = useState("");
+  const [draftPriority, setDraftPriority] = useState("normal");
+  const [updatedAt, setUpdatedAt] = useState(null); // ISO string
+  const [isLoading, setIsLoading] = useState(true); // ★ローディング状態を追加
+  // --- ▲ State 修正 ▲ ---
+  const theme = useTheme();
+  const { isAdmin } = useAuthMe();
+
+  // --- ▼ useEffect 修正 (GET /api/message) ▼ ---
+  useEffect(() => {
+    // ページ読み込み時にAPIからデータを取得
+    const fetchNotice = async () => {
+      setIsLoading(true);
+      try {
+        const res = await fetch('/api/message');
+        if (!res.ok) {
+          throw new Error('お知らせの取得に失敗しました');
+        }
+        const data = await res.json();
+
+        // 取得したデータで状態を更新
+        setNotice(data.content);
+        setPriority(apiPriorityToUiPriority(data.priority)); // マッピング関数を使用
+        setUpdatedAt(data.updated_at);
+
+      } catch (error) {
+        console.error(error);
+        // エラー時はデフォルト値を設定
+        setNotice("（お知らせの読み込みに失敗しました）");
+        setPriority("normal");
+        setUpdatedAt(null);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchNotice();
+  }, []); // [] は空のまま (マウント時に1回だけ実行)
+  // --- ▲ useEffect 修正 ▲ ---
+
+  const handleOpenEdit = () => {
+    setDraft(notice);
+    setDraftPriority(priority);
+    setIsEditOpen(true);
+  };
+  const handleCloseEdit = () => setIsEditOpen(false);
+
+  // --- ▼ handleSaveEdit 修正 (PUT /api/message) ▼ ---
+  const handleSaveEdit = async () => { // ★ async を追加
+    const value = draft?.trim() ?? "";
+    const apiPriorityValue = uiPriorityToApiPriority(draftPriority); // ★マッピング関数を使用
+
+    try {
+      const res = await fetch('/api/message', {
+        method: 'PUT',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          content: value,
+          priority: apiPriorityValue, // ★ 数値 (1, 2, 3) を送信
+        }),
+      });
+
+      if (!res.ok) {
+        // TODO: ユーザーにエラーを通知する (例: Snackbar)
+        console.error('更新失敗:', await res.text());
+        throw new Error('更新に失敗しました');
+      }
+
+      // APIからのレスポンス (更新後のデータ) を取得
+      const updatedData = await res.json();
+
+      // 画面の状態を更新
+      setNotice(updatedData.content);
+      setPriority(apiPriorityToUiPriority(updatedData.priority)); // マッピング関数を使用
+      setUpdatedAt(updatedData.updated_at);
+
+      setIsEditOpen(false); // ダイアログを閉じる
+
+    } catch (error) {
+      console.error(error);
+      // TODO: ユーザーにエラーを通知する
+      alert('更新に失敗しました。コンソールを確認してください。'); // alertの代わりにSnackbar推奨
+    }
+  };
+  // --- ▲ handleSaveEdit 修正 ▲ ---
+
+  // 重要度に応じてCardの見た目を切り替え
+  const getStylesByPriority = () => {
+    switch (priority) {
+      case "important":
+        return {
+          borderColor: theme.palette.error.main,
+          backgroundColor: alpha(theme.palette.error.main, 0.08),
+          leftStripe: theme.palette.error.main,
+          chipColor: "error"
+        };
+      case "warning":
+        return {
+          borderColor: theme.palette.warning.main,
+          backgroundColor: alpha(theme.palette.warning.main, 0.08),
+          leftStripe: theme.palette.warning.main,
+          chipColor: "warning"
+        };
+      default:
+        return {
+          borderColor: theme.palette.divider,
+          // 通常は白(紙色)に固定
+          backgroundColor: theme.palette.background.paper,
+          leftStripe: theme.palette.divider,
+          chipColor: "default"
+        };
+    }
+  };
+
+  const styles = getStylesByPriority();
+
+  const formatUpdatedAt = (iso) => {
+    if (!iso) return null;
+    try {
+      const d = new Date(iso);
+      return new Intl.DateTimeFormat('ja-JP', { dateStyle: 'medium', timeStyle: 'short' }).format(d);
+    } catch (_) {
+      return iso;
+    }
+  };
+
+  const subheader = updatedAt ? `最終更新: ${formatUpdatedAt(updatedAt)}` : undefined;
+
+  return (
+    <>
+      <Card
+        sx={{
+          height,
+          display: 'flex',
+          flexDirection: 'column',
+          borderWidth: 1,
+          borderStyle: 'solid',
+          borderColor: styles.borderColor,
+          bgcolor: styles.backgroundColor,
+          position: 'relative',
+          overflow: 'hidden',
+          // 管理者以外はクリック（タップ）でモーダルが開く
+          cursor: isAdmin ? 'default' : 'pointer'
+        }}
+        role="button"
+        aria-label="今日のお知らせを表示"
+        onClick={isAdmin ? undefined : handleOpenEdit} // 管理者はボタンのみ、他はカード全体
+      >
+        {/* 左端のストライプ */}
+        <span
+          aria-hidden
+          style={{
+            position: 'absolute',
+            left: 0,
+            top: 0,
+            width: 4,
+            height: '100%',
+            backgroundColor: styles.leftStripe
+          }}
+        />
+        <CardHeader
+          title={
+            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
+              今日のお知らせ
+              <Chip size="small" label={PRIORITIES[priority]?.label ?? '通常'} color={styles.chipColor} variant={priority === 'normal' ? 'outlined' : 'filled'} />
+            </span>
+          }
+          subheader={subheader}
+          action={
+            isAdmin ? (
+              <Button variant="outlined" size="small" startIcon={<CreateOutlinedIcon />} onClick={(e) => { e.stopPropagation(); handleOpenEdit(); }}>
+                編集
+              </Button>
+            ) : null
+          }
+        />
+        <CardContent sx={{ flexGrow: 1, overflow: 'auto' }}>
+          <Typography variant="body1" sx={{ whiteSpace: 'pre-wrap' }}>
+            {/* --- ▼ ローディング表示 修正 ▼ --- */}
+            {isLoading ? (
+              "読み込み中..."
+            ) : (
+              notice && notice.length > 0 ? notice : "（お知らせは未設定です）"
+            )}
+            {/* --- ▲ ローディング表示 修正 ▲ --- */}
+          </Typography>
+        </CardContent>
+      </Card>
+
+      <Dialog open={isEditOpen} onClose={handleCloseEdit} fullWidth maxWidth="sm">
+        <DialogTitle>お知らせの編集</DialogTitle>
+        <DialogContent>
+          {isAdmin ? (
+            <>
+              <TextField
+                autoFocus
+                fullWidth
+                multiline
+                minRows={6}
+                value={draft}
+                onChange={(e) => setDraft(e.target.value)}
+                placeholder="例）午後は来客あり。14時からラインBの点検を実施します。"
+              />
+              <div style={{ height: 12 }} />
+              <FormControl component="fieldset">
+                <FormLabel component="legend">重要度</FormLabel>
+                <RadioGroup
+                  row
+                  name="notice-priority"
+                  value={draftPriority}
+                  onChange={(e) => setDraftPriority(e.target.value)}
+                >
+                  <FormControlLabel value="important" control={<Radio color="error" />} label="重要" />
+                  <FormControlLabel value="warning" control={<Radio color="warning" />} label="注意" />
+                  <FormControlLabel value="normal" control={<Radio />} label="通常" />
+                </RadioGroup>
+              </FormControl>
+            </>
+          ) : (
+            <>
+              <div style={{ display:'inline-flex', alignItems:'center', gap:8, marginBottom:8 }}>
+                <span>重要度</span>
+                <Chip size="small" label={PRIORITIES[priority]?.label ?? '通常'} color={styles.chipColor} variant={priority === 'normal' ? 'outlined' : 'filled'} />
+              </div>
+              <Typography variant="body1" sx={{ whiteSpace: 'pre-wrap' }}>
+                {isLoading ? "読み込み中..." : (notice && notice.length > 0 ? notice : "（お知らせは未設定です）")}
+              </Typography>
+            </>
+          )}
+        </DialogContent>
+        <DialogActions>
+          {isAdmin ? (
+            <>
+              <Button onClick={handleCloseEdit} color="inherit">キャンセル</Button>
+              <Button onClick={handleSaveEdit} variant="contained">保存</Button>
+            </>
+          ) : (
+            <Button onClick={handleCloseEdit} variant="contained">閉じる</Button>
+          )}
+        </DialogActions>
+      </Dialog>
+    </>
+  );
+};
+
+export default NoticeCard;
\ No newline at end of file
diff --git a/javascript-version/src/views/dashboard/top/ProductionProgressCard.jsx b/javascript-version/src/views/dashboard/top/ProductionProgressCard.jsx
new file mode 100644
index 000000000..e03fbebd7
--- /dev/null
+++ b/javascript-version/src/views/dashboard/top/ProductionProgressCard.jsx
@@ -0,0 +1,138 @@
+// 生産進捗カード: KPI達成率のドーナツグラフ表示
+
+"use client";
+
+// --- ▼ Reactフックを追加 ▼ ---
+import { useEffect, useState } from "react";
+
+import Card from "@mui/material/Card";
+import CardHeader from "@mui/material/CardHeader";
+import CardContent from "@mui/material/CardContent";
+import CardActionArea from "@mui/material/CardActionArea";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+
+import TrendingUpIcon from "@mui/icons-material/TrendingUp";
+import Link from "@/components/Link";
+
+const headerMinHeight = 80;
+
+const ProductionProgressCard = () => {
+  // --- ▼ Stateを定義 ▼ ---
+  // APIの today_summary.actual と today_summary.plan を格納する
+  const [production, setProduction] = useState({ actual: 0, plan: 0 });
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  // --- ▼ 日付フォーマット ▼ ---
+  // 今日の日付を取得 (例: "11月6日")
+  const today = new Date();
+  const formattedDate = new Intl.DateTimeFormat('ja-JP', { month: 'numeric', day: 'numeric' }).format(today);
+
+  // --- ▼ APIからデータを取得 (useEffect) ▼ ---
+  useEffect(() => {
+    const fetchProgress = async () => {
+      setIsLoading(true);
+      setError(null);
+      try {
+        const res = await fetch('/api/production/summary');
+        if (!res.ok) {
+          throw new Error('進捗データの取得に失敗しました');
+        }
+        const data = await res.json();
+        
+        // 取得した today_summary の値で state を更新
+        setProduction({
+          actual: data.today_summary.actual,
+          plan: data.today_summary.plan
+        });
+      } catch (err) {
+        console.error(err);
+        setError(err.message);
+        setProduction({ actual: 0, plan: 0 }); // エラー時はリセット
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    fetchProgress();
+  }, []); // [] = ページ読み込み時に1回だけ実行
+
+  // --- ▼ 達成率を State から計算 ▼ ---
+  const kpiAchieve = (production.plan > 0)
+    ? Math.round((production.actual / production.plan) * 100)
+    : 0; // 目標が0の場合は0%とする (0除算エラー回避)
+
+
+  // --- ▼ ローディング・エラー・成功時で表示を分ける ▼ ---
+  const renderContent = () => {
+    if (isLoading) {
+      return (
+        <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: 120 }}>
+          <Typography>読み込み中...</Typography>
+        </Box>
+      );
+    }
+
+    if (error) {
+      return (
+        <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: 120 }}>
+          <Typography color="error" variant="body2">{error}</Typography>
+        </Box>
+      );
+    }
+
+    // データ取得成功時の表示 (元のJSX)
+    return (
+      <Box display="flex" alignItems="center" justifyContent="center" gap={2.5}>
+        <Box position="relative" width={120} height={120}>
+          <svg viewBox="0 0 36 36" width="120" height="120">
+            <path
+              d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
+              fill="none"
+              stroke="var(--mui-palette-action-disabledBackground)"
+              strokeWidth="3"
+            />
+            <path
+              strokeDasharray={`${kpiAchieve}, 100`}
+              d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
+              fill="none"
+              stroke="var(--mui-palette-primary-main)"
+              strokeWidth="3"
+              strokeLinecap="round"
+            />
+          </svg>
+          <Box sx={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', zIndex: 1 }}>
+            <Typography variant="h5" fontWeight={700}>{kpiAchieve}%</Typography>
+            <Typography variant="caption">達成率</Typography>
+          </Box>
+        </Box>
+        <Box>
+          {/* Stateの値を使うように変更 */}
+          <Typography variant="body1">現在: <Typography component="span" fontWeight={700} color="primary.main">{production.actual.toLocaleString()}</Typography> 個</Typography>
+          <Typography variant="body1">目標: {production.plan.toLocaleString()} 個</Typography>
+        </Box>
+      </Box>
+    );
+  };
+  
+  return (
+    <Card sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
+      <CardActionArea component={Link} href="/production-management" sx={{ height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'stretch' }}>
+        {/* --- ▼ CardHeader に subheader を追加 ▼ --- */}
+        <CardHeader
+          title="生産進捗"
+          subheader={`${formattedDate} (本日)`}
+          action={<TrendingUpIcon color="primary" />}
+          sx={{ minHeight: headerMinHeight }}
+        />
+        {/* --- ▲ CardHeader に subheader を追加 ▲ --- */}
+        
+        <CardContent>
+          {renderContent()}
+        </CardContent>
+      </CardActionArea>
+    </Card>
+  );
+};
+
+export default ProductionProgressCard;
\ No newline at end of file
diff --git a/javascript-version/src/views/dashboard/top/QuickLinkCard.jsx b/javascript-version/src/views/dashboard/top/QuickLinkCard.jsx
new file mode 100644
index 000000000..553012a1b
--- /dev/null
+++ b/javascript-version/src/views/dashboard/top/QuickLinkCard.jsx
@@ -0,0 +1,28 @@
+// クイックリンクカード: ダッシュボード上部のショートカットボタン用
+
+"use client";
+
+import Card from "@mui/material/Card";
+import CardActionArea from "@mui/material/CardActionArea";
+import CardContent from "@mui/material/CardContent";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+
+import Link from "@/components/Link";
+
+const QuickLinkCard = ({ href, color, icon, label }) => {
+  return (
+    <Card sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
+      <CardActionArea component={Link} href={href} sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
+        <CardContent sx={{ flexGrow: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 1.5, py: 3 }}>
+          <Box sx={{ bgcolor: color, color: 'common.white', width: 64, height: 64, borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+            {icon}
+          </Box>
+          <Typography variant="subtitle1" sx={{ fontWeight: 700, textAlign: 'center' }}>{label}</Typography>
+        </CardContent>
+      </CardActionArea>
+    </Card>
+  );
+};
+
+export default QuickLinkCard;
diff --git a/javascript-version/src/views/dashboard/top/QuickLinksRow.jsx b/javascript-version/src/views/dashboard/top/QuickLinksRow.jsx
new file mode 100644
index 000000000..1e5bc2d5f
--- /dev/null
+++ b/javascript-version/src/views/dashboard/top/QuickLinksRow.jsx
@@ -0,0 +1,44 @@
+// クイックリンク行: 3つのショートカットカードを横並びで表示
+
+"use client";
+
+import Grid from "@mui/material/Grid";
+
+import ListAltOutlinedIcon from "@mui/icons-material/ListAltOutlined";
+import CreateOutlinedIcon from "@mui/icons-material/CreateOutlined";
+import Inventory2OutlinedIcon from "@mui/icons-material/Inventory2Outlined";
+
+import QuickLinkCard from "./QuickLinkCard";
+
+const QuickLinksRow = () => {
+  return (
+    <>
+      <Grid item xs={12} sm={4} md={2} lg={2}>
+        <QuickLinkCard
+          href="/shipping-instructions"
+          color="warning.main"
+          icon={<ListAltOutlinedIcon sx={{ fontSize: 36 }} />}
+          label="製造出荷指示周知"
+        />
+      </Grid>
+      <Grid item xs={12} sm={4} md={2} lg={2}>
+        <QuickLinkCard
+          href="/daily-reports"
+          color="info.main"
+          icon={<CreateOutlinedIcon sx={{ fontSize: 36 }} />}
+          label="日報一覧"
+        />
+      </Grid>
+      <Grid item xs={12} sm={4} md={2} lg={2}>
+        <QuickLinkCard
+          href="/parts-inventory"
+          color="success.main"
+          icon={<Inventory2OutlinedIcon sx={{ fontSize: 36 }} />}
+          label="部品在庫管理"
+        />
+      </Grid>
+    </>
+  );
+};
+
+export default QuickLinksRow;
diff --git a/javascript-version/src/views/dashboard/top/TodayTasksCard.jsx b/javascript-version/src/views/dashboard/top/TodayTasksCard.jsx
new file mode 100644
index 000000000..e09344d44
--- /dev/null
+++ b/javascript-version/src/views/dashboard/top/TodayTasksCard.jsx
@@ -0,0 +1,197 @@
+// 本日のタスクカード: 当日対応すべき作業内容を表示
+
+"use client";
+
+// --- ▼ Reactフックを追加 ▼ ---
+import { useEffect, useState } from "react";
+
+import Card from "@mui/material/Card";
+import CardHeader from "@mui/material/CardHeader";
+import CardContent from "@mui/material/CardContent";
+import CardActionArea from "@mui/material/CardActionArea";
+import Grid from "@mui/material/Grid";
+import Box from "@mui/material/Box";
+import SurfaceBox from "@/components/surface/SurfaceBox";
+import Chip from "@mui/material/Chip";
+import Typography from "@mui/material/Typography";
+
+import Link from "@/components/Link";
+
+// --- ▼ ヘルパー関数 (コンポーネントの外) ▼ ---
+
+/**
+ * Chipの色をライン名から決定
+ * @param {string} lineName (例: "マット", "ボトム")
+ * @returns {string} muiのcolor
+ */
+const getChipColor = (lineName) => {
+  if (typeof lineName !== 'string') return 'default';
+  if (lineName.includes('ボトム')) return 'warning';
+  if (lineName.includes('マット')) return 'info';
+  return 'default'; // フォールバック
+};
+
+/**
+ * 備考欄の文字色を決定
+ * @param {string} remarks (例: "至急対応")
+ * @returns {string} muiのcolor
+ */
+const getRemarksColor = (remarks) => {
+  if (typeof remarks === 'string' && remarks.includes('至急')) return 'error.main';
+  return 'text.secondary';
+};
+
+/**
+ * 今日の日付を "YYYY-MM-DD" 形式で取得
+ * @returns {string}
+ */
+const getTodayDateString = () => {
+  const today = new Date();
+  const yyyy = today.getFullYear();
+  const mm = String(today.getMonth() + 1).padStart(2, '0'); // 月は0から始まるため+1
+  const dd = String(today.getDate()).padStart(2, '0');
+  return `${yyyy}-${mm}-${dd}`;
+};
+
+
+const TodayTasksCard = () => {
+  // --- ▼ Stateを定義 ▼ ---
+  // APIから取得したタスクを格納
+  const [tasks, setTasks] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  // --- ▼ APIからデータを取得 (useEffect) ▼ ---
+  useEffect(() => {
+    const fetchTasks = async () => {
+      setIsLoading(true);
+      setError(null);
+      
+      const todayDate = getTodayDateString(); // "YYYY-MM-DD"
+      
+      try {
+        // "本日" かつ "未完了" のタスクを取得
+        const res = await fetch(`/api/instructions?date=${todayDate}&is_completed=false`);
+        
+        if (!res.ok) {
+          throw new Error('タスクの取得に失敗しました');
+        }
+        
+        const data = await res.json(); // APIは配列 ( [...] ) を返す
+        
+        // 1. created_at (作成日時) の古い順 (昇順) にソート
+        const sortedData = data.sort((a, b) => {
+            if (a.created_at < b.created_at) return -1;
+            if (a.created_at > b.created_at) return 1;
+            return 0;
+        });
+
+        // 2. 上位6件 (横3 x 縦2) を取得
+        // ★変更点: 4 -> 6 に変更
+        const topTasks = sortedData.slice(0, 6);
+
+        setTasks(topTasks);
+
+      } catch (err) {
+        console.error(err);
+        setError(err.message);
+        setTasks([]); // エラー時は空にする
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    fetchTasks();
+  }, []); // [] = ページ読み込み時に1回だけ実行
+
+
+  // --- ▼ ローディング・エラー・成功時で表示を分ける ▼ ---
+  const renderContent = () => {
+    if (isLoading) {
+      return (
+        <Typography sx={{ p: 2, textAlign: 'center', color: 'text.secondary' }}>
+          読み込み中...
+        </Typography>
+      );
+    }
+
+    if (error) {
+      return (
+        <Typography color="error" sx={{ p: 2, textAlign: 'center' }}>
+          {error}
+        </Typography>
+      );
+    }
+    
+    if (tasks.length === 0) {
+      return (
+        <Typography sx={{ p: 2, textAlign: 'center', color: 'text.secondary' }}>
+          本日の未完了タスクはありません
+        </Typography>
+      );
+    }
+
+    // データ取得成功時の表示
+    return (
+      <Grid container spacing={2} alignItems="stretch">
+        {tasks.map((task) => (
+          // ★変更点: md={4} にすることで、1行に3つ (12 / 4 = 3) 並びます
+          <Grid item xs={12} md={4} key={task.id}>
+            <SurfaceBox
+              p={2}
+              borderRadius={2}
+              display="flex"
+              justifyContent="space-between"
+              alignItems="flex-start"
+              sx={{ height: '100%' }} // 高さを揃える
+              variant="soft"
+            >
+              <Box sx={{ flex: 1, minWidth: 0 }}>
+                <Chip 
+                    label={task.line} 
+                    color={getChipColor(task.line)} 
+                    size="small" 
+                    sx={{ mb: 1, height: 24, fontSize: '0.75rem' }} 
+                />
+                <Typography variant="body2" fontWeight={700} lineHeight={1.3} noWrap title={task.product_name}>
+                  {task.product_name} 
+                </Typography>
+                <Typography variant="caption" color="text.secondary" display="block" noWrap>
+                    {task.size || '-'}
+                </Typography>
+                
+                <Typography variant="caption" color={getRemarksColor(task.remarks)} fontWeight={600} mt={0.5} display="block" noWrap>
+                  {task.remarks || '（特記なし）'}
+                </Typography>
+              </Box>
+              
+              <Box textAlign="right" sx={{ flexShrink: 0, ml: 1.5, display: 'flex', flexDirection: 'column', alignItems: 'flex-end' }}>
+                <Typography variant="caption" color="text.secondary" sx={{ mb: -0.5 }}>数量</Typography>
+                <Typography variant="h5" color="primary.main" fontWeight={700}>
+                  {task.quantity}
+                </Typography>
+              </Box>
+            </SurfaceBox>
+          </Grid>
+        ))}
+      </Grid>
+    );
+  };
+
+  // 表示用の日付文字列を取得
+  const todayStr = getTodayDateString();
+
+  return (
+    <Card sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
+      <CardActionArea component={Link} href="/shipping-instructions" sx={{ height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'stretch' }}>
+        {/* タイトルに日付を含める */}
+        <CardHeader title={`本日のタスク (${todayStr})`} />
+        
+        <CardContent sx={{ flexGrow: 1 }}>
+          {renderContent()}
+        </CardContent>
+      </CardActionArea>
+    </Card>
+  );
+};
+
+export default TodayTasksCard;
\ No newline at end of file
diff --git a/javascript-version/tailwind.config.js b/javascript-version/tailwind.config.cjs
similarity index 91%
rename from javascript-version/tailwind.config.js
rename to javascript-version/tailwind.config.cjs
index e54c537a3..bb93ce8cd 100644
--- a/javascript-version/tailwind.config.js
+++ b/javascript-version/tailwind.config.cjs
@@ -9,4 +9,4 @@ const config = {
         extend: {}
     }
 };
-export default config;
+module.exports = config;
diff --git a/typescript-version/tsconfig.json b/javascript-version/tsconfig.json
similarity index 72%
rename from typescript-version/tsconfig.json
rename to javascript-version/tsconfig.json
index d0d1b1c54..8f745f766 100644
--- a/typescript-version/tsconfig.json
+++ b/javascript-version/tsconfig.json
@@ -1,29 +1,28 @@
 {
   "compilerOptions": {
-    "target": "ESNext",
-    "downlevelIteration": true,
     "lib": [
-      "DOM",
-      "DOM.Iterable",
-      "ESNext"
+      "dom",
+      "dom.iterable",
+      "esnext"
     ],
     "allowJs": true,
     "skipLibCheck": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
+    "strict": false,
     "noEmit": true,
+    "incremental": true,
+    "module": "esnext",
     "esModuleInterop": true,
-    "module": "ESNext",
-    "moduleResolution": "Bundler",
+    "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
-    "incremental": true,
     "plugins": [
       {
         "name": "next"
       }
     ],
+    // ===== ここから下をコピペして追加！ =====
+    "baseUrl": ".",
     "paths": {
       "@/*": [
         "./src/*"
@@ -50,16 +49,15 @@
         "./src/views/*"
       ]
     }
+     // ===== ここまで =====
   },
   "include": [
-    "next.config.mjs",
-    "tailwind.config.ts",
     "next-env.d.ts",
+    ".next/types/**/*.ts",
     "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts"
+    "**/*.tsx"
   ],
   "exclude": [
     "node_modules"
   ]
-}
+}
\ No newline at end of file
diff --git a/typescript-version/.editorconfig b/typescript-version/.editorconfig
deleted file mode 100644
index f7095100c..000000000
--- a/typescript-version/.editorconfig
+++ /dev/null
@@ -1,15 +0,0 @@
-# Editor configuration, see http://editorconfig.org
-root = true
-[*]
-charset = utf-8
-end_of_line = lf
-indent_style = space
-indent_size = 2
-insert_final_newline = true
-trim_trailing_whitespace = true
-[*.md]
-max_line_length = off
-trim_trailing_whitespace = false
-[*.yml]
-[*.{yml,yaml}]
-indent_size = 2
diff --git a/typescript-version/.env.example b/typescript-version/.env.example
deleted file mode 100644
index fdb8d2728..000000000
--- a/typescript-version/.env.example
+++ /dev/null
@@ -1,8 +0,0 @@
-# -----------------------------------------------------------------------------
-# App
-# -----------------------------------------------------------------------------
-BASEPATH=
-NEXT_PUBLIC_APP_URL=http://localhost:3000${BASEPATH}
-NEXT_PUBLIC_DOCS_URL=https://demos.themeselection.com/materio-mui-nextjs-admin-template/documentation
-NEXT_PUBLIC_PRO_URL=https://demos.themeselection.com/materio-mui-nextjs-admin-template/demo-1
-NEXT_PUBLIC_REPO_NAME=materio-mui-nextjs-admin-template-free
diff --git a/typescript-version/.eslintrc.js b/typescript-version/.eslintrc.js
deleted file mode 100644
index 70fda9102..000000000
--- a/typescript-version/.eslintrc.js
+++ /dev/null
@@ -1,128 +0,0 @@
-module.exports = {
-  extends: ['next/core-web-vitals', 'plugin:@typescript-eslint/recommended', 'plugin:import/recommended', 'prettier'],
-  rules: {
-    'jsx-a11y/alt-text': 'off',
-    'react/display-name': 'off',
-    'react/no-children-prop': 'off',
-    '@next/next/no-img-element': 'off',
-    '@next/next/no-page-custom-font': 'off',
-    '@typescript-eslint/consistent-type-imports': 'error',
-    '@typescript-eslint/ban-ts-comment': 'off',
-    '@typescript-eslint/no-explicit-any': 'off',
-    '@typescript-eslint/no-unused-vars': 'error',
-    '@typescript-eslint/no-non-null-assertion': 'off',
-    'lines-around-comment': [
-      'error',
-      {
-        beforeBlockComment: true,
-        beforeLineComment: true,
-        allowBlockStart: true,
-        allowObjectStart: true,
-        allowArrayStart: true
-      }
-    ],
-    'padding-line-between-statements': [
-      'error',
-      {
-        blankLine: 'any',
-        prev: 'export',
-        next: 'export'
-      },
-      {
-        blankLine: 'always',
-        prev: ['const', 'let', 'var'],
-        next: '*'
-      },
-      {
-        blankLine: 'any',
-        prev: ['const', 'let', 'var'],
-        next: ['const', 'let', 'var']
-      },
-      {
-        blankLine: 'always',
-        prev: '*',
-        next: ['function', 'multiline-const', 'multiline-block-like']
-      },
-      {
-        blankLine: 'always',
-        prev: ['function', 'multiline-const', 'multiline-block-like'],
-        next: '*'
-      }
-    ],
-    'newline-before-return': 'error',
-    'import/newline-after-import': [
-      'error',
-      {
-        count: 1
-      }
-    ],
-    'import/order': [
-      'error',
-      {
-        groups: ['builtin', 'external', ['internal', 'parent', 'sibling', 'index'], ['object', 'unknown']],
-        pathGroups: [
-          {
-            pattern: 'react',
-            group: 'external',
-            position: 'before'
-          },
-          {
-            pattern: 'next/**',
-            group: 'external',
-            position: 'before'
-          },
-          {
-            pattern: '~/**',
-            group: 'external',
-            position: 'before'
-          },
-          {
-            pattern: '@/**',
-            group: 'internal'
-          }
-        ],
-        pathGroupsExcludedImportTypes: ['react', 'type'],
-        'newlines-between': 'always-and-inside-groups'
-      }
-    ],
-    '@typescript-eslint/ban-types': [
-      'error',
-      {
-        extendDefaults: true,
-        types: {
-          Function: 'Use a specific function type instead',
-          Object: 'Use object instead',
-          Boolean: 'Use boolean instead',
-          Number: 'Use number instead',
-          String: 'Use string instead',
-          Symbol: 'Use symbol instead',
-          any: false,
-          '{}': false
-        }
-      }
-    ]
-  },
-  settings: {
-    react: {
-      version: 'detect'
-    },
-    'import/parsers': {
-      '@typescript-eslint/parser': ['.ts', '.tsx']
-    },
-    'import/resolver': {
-      node: {},
-      typescript: {
-        project: './tsconfig.json'
-      }
-    }
-  },
-  overrides: [
-    {
-      files: ['*.ts', '*.tsx', 'src/iconify-bundle/*'],
-      rules: {
-        '@typescript-eslint/explicit-module-boundary-types': 'off',
-        '@typescript-eslint/no-var-requires': 'off'
-      }
-    }
-  ]
-}
diff --git a/typescript-version/.gitignore b/typescript-version/.gitignore
deleted file mode 100644
index c5a2deee6..000000000
--- a/typescript-version/.gitignore
+++ /dev/null
@@ -1,41 +0,0 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# next.js
-/.next/
-/out/
-
-# production
-/build
-
-# misc
-.DS_Store
-*.pem
-
-# debug
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-.pnpm-debug.log*
-
-# local env files
-.env*.local
-.env
-
-# vercel
-.vercel
-
-# typescript
-*.tsbuildinfo
-next-env.d.ts
-
-# icon generated file
-src/assets/iconify-icons/generated-icons.js
-src/assets/iconify-icons/generated-icons.css
diff --git a/typescript-version/.npmrc b/typescript-version/.npmrc
deleted file mode 100644
index 4b10cef2a..000000000
--- a/typescript-version/.npmrc
+++ /dev/null
@@ -1,2 +0,0 @@
-auto-install-peers=true
-shamefully-hoist=true
diff --git a/typescript-version/.prettierrc.json b/typescript-version/.prettierrc.json
deleted file mode 100644
index fef33e0da..000000000
--- a/typescript-version/.prettierrc.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
-  "arrowParens": "avoid",
-  "bracketSpacing": true,
-  "htmlWhitespaceSensitivity": "css",
-  "insertPragma": false,
-  "bracketSameLine": false,
-  "jsxSingleQuote": true,
-  "printWidth": 120,
-  "proseWrap": "preserve",
-  "quoteProps": "as-needed",
-  "requirePragma": false,
-  "semi": false,
-  "singleQuote": true,
-  "tabWidth": 2,
-  "trailingComma": "none",
-  "useTabs": false
-}
diff --git a/typescript-version/.stylelintrc.json b/typescript-version/.stylelintrc.json
deleted file mode 100644
index 0408dc510..000000000
--- a/typescript-version/.stylelintrc.json
+++ /dev/null
@@ -1,16 +0,0 @@
-{
-  "plugins": [
-    "stylelint-use-logical-spec"
-  ],
-  "overrides": [
-    {
-      "customSyntax": "postcss-styled-syntax",
-      "files": [
-        "**/*.{js,ts,jsx,tsx}"
-      ]
-    }
-  ],
-  "rules": {
-    "liberty/use-logical-spec": "always"
-  }
-}
diff --git a/typescript-version/.vscode/custom.code-snippets b/typescript-version/.vscode/custom.code-snippets
deleted file mode 100644
index 141c1c60e..000000000
--- a/typescript-version/.vscode/custom.code-snippets
+++ /dev/null
@@ -1,109 +0,0 @@
-{
-  // JavaScript Snippets
-  "exportDefault": {
-    "prefix": "exp",
-    "body": [
-      "export default ${1:moduleName}",
-      ""
-    ]
-  },
-  "exportDestructing": {
-    "prefix": "exd",
-    "body": [
-      "export { ${2:destructuredModule} } from '${1:module}'",
-      ""
-    ]
-  },
-  "exportAs": {
-    "prefix": "exa",
-    "body": [
-      "export { ${2:originalName} as ${3:aliasName}} from '${1:module}'",
-      ""
-    ]
-  },
-  "exportDefaultFunction": {
-    "prefix": "edf",
-    "body": [
-      "export default (${1:params}) => {",
-      "  $0",
-      "}",
-      ""
-    ]
-  },
-  "exportDefaultNamedFunction": {
-    "prefix": "ednf",
-    "body": [
-      "export default function ${1:functionName}(${2:params}) {",
-      "  $0",
-      "}",
-      ""
-    ]
-  },
-  // React Snippets
-  "reactArrowFunctionExportComponent": {
-    "prefix": "rafce",
-    "body": [
-      "const ${1:ComponentName} = () => {",
-      "  return (",
-      "    $0",
-      "  )",
-      "}",
-      "",
-      "export default ${1:ComponentName}",
-      ""
-    ]
-  },
-  "reactArrowFunctionComponent": {
-    "prefix": "rafc",
-    "body": [
-      "const ${1:ComponentName} = () => {",
-      "  return (",
-      "    $0",
-      "  )",
-      "}",
-      ""
-    ]
-  },
-  "reactUseState": {
-    "prefix": "useState",
-    "body": [
-      "const [${1:state}, set${1/(.*)/${1:/capitalize}/}] = useState(${2:initialState})"
-    ]
-  },
-  "reactUseEffect": {
-    "prefix": "useEffect",
-    "body": [
-      "useEffect(() => {",
-      "  $0",
-      "}, [])"
-    ]
-  },
-  // Type Snippets
-  "exportType": {
-    "prefix": "exptp",
-    "body": [
-      "export type ${1:Props} = {",
-      "  ${2:name}: ${3:string}",
-      "}",
-      ""
-    ]
-  },
-  "type": {
-    "prefix": "tp",
-    "body": [
-      "type ${1:Props} = {",
-      "  ${2:name}: ${3:string}",
-      "}",
-      ""
-    ]
-  },
-  // Next Snippets
-  "nextImport": {
-    "prefix": "impn",
-    "body": [
-      "// Next Import",
-      "import ${2:second} from '${1:first}'",
-      ""
-    ]
-  }
-}
diff --git a/typescript-version/.vscode/extensions.json b/typescript-version/.vscode/extensions.json
deleted file mode 100644
index 74a42e05f..000000000
--- a/typescript-version/.vscode/extensions.json
+++ /dev/null
@@ -1,26 +0,0 @@
-{
-  "recommendations": [
-    "formulahendry.auto-close-tag",
-    "steoates.autoimport",
-    "mgmcdermott.vscode-language-babel",
-    "aaron-bond.better-comments",
-    "MohammadBaqer.better-folding",
-    "pustelto.bracketeer",
-    "streetsidesoftware.code-spell-checker",
-    "naumovs.color-highlight",
-    "mikestead.dotenv",
-    "EditorConfig.EditorConfig",
-    "usernamehw.errorlens",
-    "dbaeumer.vscode-eslint",
-    "eamodio.gitlens",
-    "antfu.iconify",
-    "xabikos.JavaScriptSnippets",
-    "christian-kohler.npm-intellisense",
-    "christian-kohler.path-intellisense",
-    "esbenp.prettier-vscode",
-    "yoavbls.pretty-ts-errors",
-    "jasonnutter.search-node-modules",
-    "stylelint.vscode-stylelint",
-    "styled-components.vscode-styled-components"
-  ]
-}
diff --git a/typescript-version/.vscode/settings.json b/typescript-version/.vscode/settings.json
deleted file mode 100644
index 8c49e5a5e..000000000
--- a/typescript-version/.vscode/settings.json
+++ /dev/null
@@ -1,51 +0,0 @@
-{
-  // JS
-  "javascript.updateImportsOnFileMove.enabled": "always",
-  // JSON
-  "[json]": {
-    "editor.defaultFormatter": "vscode.json-language-features"
-  },
-  "[jsonc]": {
-    "editor.defaultFormatter": "vscode.json-language-features"
-  },
-  // VSCode Editor
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "editor.formatOnSave": true,
-  "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": "explicit",
-    "source.organizeImports": "never",
-    "source.fixAll.stylelint": "explicit"
-  },
-  // Extension: Git
-  "git.rebaseWhenSync": true,
-  "git.autofetch": true,
-  "git.enableSmartCommit": true,
-  // Extension: Prettier
-  "prettier.requireConfig": true,
-  // Extension: ESLint
-  "eslint.validate": [
-    "javascript",
-    "typescript",
-    "javascriptreact",
-    "typescriptreact"
-  ],
-  "eslint.format.enable": true,
-  // Stylelint
-  "css.validate": false,
-  "less.validate": false,
-  "scss.validate": false,
-  "stylelint.enable": true,
-  "stylelint.validate": [
-    "css",
-    "scss",
-    "typescript",
-    "typescriptreact"
-  ],
-  "markdown.extension.toc.updateOnSave": false,
-  "files.insertFinalNewline": true,
-  "editor.linkedEditing": true,
-  "typescript.tsdk": "node_modules/typescript/lib",
-  "cSpell.words": [
-    "iconify"
-  ]
-}
diff --git a/typescript-version/README.md b/typescript-version/README.md
deleted file mode 100644
index f4da3c4c1..000000000
--- a/typescript-version/README.md
+++ /dev/null
@@ -1,34 +0,0 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
-
-## Getting Started
-
-First, run the development server:
-
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
-
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
diff --git a/typescript-version/next.config.mjs b/typescript-version/next.config.mjs
deleted file mode 100644
index 83bdc8219..000000000
--- a/typescript-version/next.config.mjs
+++ /dev/null
@@ -1,6 +0,0 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {
-  basePath: process.env.BASEPATH
-}
-
-export default nextConfig
diff --git a/typescript-version/package.json b/typescript-version/package.json
deleted file mode 100644
index 4e91a6744..000000000
--- a/typescript-version/package.json
+++ /dev/null
@@ -1,66 +0,0 @@
-{
-  "name": "next-app-test",
-  "version": "0.1.0",
-  "license": "Commercial",
-  "private": true,
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint",
-    "lint:fix": "next lint --fix",
-    "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\"",
-    "build:icons": "tsx src/assets/iconify-icons/bundle-icons-css.ts",
-    "postinstall": "npm run build:icons"
-  },
-  "dependencies": {
-    "@emotion/cache": "^11.11.0",
-    "@emotion/react": "^11.11.4",
-    "@emotion/styled": "^11.11.5",
-    "@mui/lab": "5.0.0-alpha.170",
-    "@mui/material": "^5.15.19",
-    "@mui/material-nextjs": "^5.15.11",
-    "apexcharts": "^3.49.1",
-    "classnames": "^2.5.1",
-    "next": "^14.2.3",
-    "react": "^18.3.1",
-    "react-apexcharts": "^1.4.1",
-    "react-dom": "^18.3.1",
-    "react-perfect-scrollbar": "^1.5.8",
-    "react-use": "^17.5.0",
-    "server-only": "^0.0.1"
-  },
-  "devDependencies": {
-    "@iconify/json": "^2.2.218",
-    "@iconify/tools": "^4.0.4",
-    "@iconify/types": "^2.0.0",
-    "@iconify/utils": "^2.1.24",
-    "@types/node": "^20.14.2",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^7.13.0",
-    "@typescript-eslint/parser": "^7.13.0",
-    "autoprefixer": "^10.4.19",
-    "eslint": "^8.57.0",
-    "eslint-config-next": "^14.2.3",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-import-resolver-typescript": "^3.6.1",
-    "eslint-plugin-import": "^2.29.1",
-    "postcss": "^8.4.38",
-    "postcss-styled-syntax": "^0.6.4",
-    "prettier": "^3.3.2",
-    "stylelint": "^16.6.1",
-    "stylelint-use-logical-spec": "^5.0.1",
-    "tailwindcss": "^3.4.4",
-    "tailwindcss-logical": "^3.0.1",
-    "tsx": "^4.15.2",
-    "typescript": "^5.4.5"
-  },
-  "resolutions": {
-    "rimraf": "^5.0.7"
-  },
-  "overrides": {
-    "react": "^18.3.1",
-    "rimraf": "^5.0.7"
-  }
-}
diff --git a/typescript-version/pnpm-lock.yaml b/typescript-version/pnpm-lock.yaml
deleted file mode 100644
index 9802f0663..000000000
--- a/typescript-version/pnpm-lock.yaml
+++ /dev/null
@@ -1,5895 +0,0 @@
-lockfileVersion: '9.0'
-
-settings:
-  autoInstallPeers: true
-  excludeLinksFromLockfile: false
-
-overrides:
-  rimraf: ^5.0.7
-
-importers:
-
-  .:
-    dependencies:
-      '@emotion/cache':
-        specifier: ^11.11.0
-        version: 11.11.0
-      '@emotion/react':
-        specifier: ^11.11.4
-        version: 11.11.4(@types/react@18.3.3)(react@18.3.1)
-      '@emotion/styled':
-        specifier: ^11.11.5
-        version: 11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)
-      '@mui/lab':
-        specifier: 5.0.0-alpha.170
-        version: 5.0.0-alpha.170(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@5.15.20(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@mui/material':
-        specifier: ^5.15.19
-        version: 5.15.20(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@mui/material-nextjs':
-        specifier: ^5.15.11
-        version: 5.15.11(@emotion/cache@11.11.0)(@mui/material@5.15.20(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(next@14.2.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)
-      apexcharts:
-        specifier: ^3.49.1
-        version: 3.49.1
-      classnames:
-        specifier: ^2.5.1
-        version: 2.5.1
-      next:
-        specifier: ^14.2.3
-        version: 14.2.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react:
-        specifier: ^18.3.1
-        version: 18.3.1
-      react-apexcharts:
-        specifier: ^1.4.1
-        version: 1.4.1(apexcharts@3.49.1)(react@18.3.1)
-      react-dom:
-        specifier: ^18.3.1
-        version: 18.3.1(react@18.3.1)
-      react-perfect-scrollbar:
-        specifier: ^1.5.8
-        version: 1.5.8(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react-use:
-        specifier: ^17.5.0
-        version: 17.5.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      server-only:
-        specifier: ^0.0.1
-        version: 0.0.1
-    devDependencies:
-      '@iconify/json':
-        specifier: ^2.2.218
-        version: 2.2.219
-      '@iconify/tools':
-        specifier: ^4.0.4
-        version: 4.0.4
-      '@iconify/types':
-        specifier: ^2.0.0
-        version: 2.0.0
-      '@iconify/utils':
-        specifier: ^2.1.24
-        version: 2.1.24
-      '@types/node':
-        specifier: ^20.14.2
-        version: 20.14.2
-      '@types/react':
-        specifier: ^18.3.3
-        version: 18.3.3
-      '@types/react-dom':
-        specifier: ^18.3.0
-        version: 18.3.0
-      '@typescript-eslint/eslint-plugin':
-        specifier: ^7.13.0
-        version: 7.13.0(@typescript-eslint/parser@7.13.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(typescript@5.4.5)
-      '@typescript-eslint/parser':
-        specifier: ^7.13.0
-        version: 7.13.0(eslint@8.57.0)(typescript@5.4.5)
-      autoprefixer:
-        specifier: ^10.4.19
-        version: 10.4.19(postcss@8.4.38)
-      eslint:
-        specifier: ^8.57.0
-        version: 8.57.0
-      eslint-config-next:
-        specifier: ^14.2.3
-        version: 14.2.4(eslint@8.57.0)(typescript@5.4.5)
-      eslint-config-prettier:
-        specifier: ^9.1.0
-        version: 9.1.0(eslint@8.57.0)
-      eslint-import-resolver-typescript:
-        specifier: ^3.6.1
-        version: 3.6.1(@typescript-eslint/parser@7.13.0(eslint@8.57.0)(typescript@5.4.5))(eslint-plugin-import@2.29.1)(eslint@8.57.0)
-      eslint-plugin-import:
-        specifier: ^2.29.1
-        version: 2.29.1(@typescript-eslint/parser@7.13.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)
-      postcss:
-        specifier: ^8.4.38
-        version: 8.4.38
-      postcss-styled-syntax:
-        specifier: ^0.6.4
-        version: 0.6.4(postcss@8.4.38)
-      prettier:
-        specifier: ^3.3.2
-        version: 3.3.2
-      stylelint:
-        specifier: ^16.6.1
-        version: 16.6.1(typescript@5.4.5)
-      stylelint-use-logical-spec:
-        specifier: ^5.0.1
-        version: 5.0.1(stylelint@16.6.1(typescript@5.4.5))
-      tailwindcss:
-        specifier: ^3.4.4
-        version: 3.4.4
-      tailwindcss-logical:
-        specifier: ^3.0.1
-        version: 3.0.1(postcss@8.4.38)
-      tsx:
-        specifier: ^4.15.2
-        version: 4.15.5
-      typescript:
-        specifier: ^5.4.5
-        version: 5.4.5
-
-packages:
-
-  '@alloc/quick-lru@5.2.0':
-    resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
-    engines: {node: '>=10'}
-
-  '@antfu/install-pkg@0.1.1':
-    resolution: {integrity: sha512-LyB/8+bSfa0DFGC06zpCEfs89/XoWZwws5ygEa5D+Xsm3OfI+aXQ86VgVG7Acyef+rSZ5HE7J8rrxzrQeM3PjQ==}
-
-  '@antfu/utils@0.7.8':
-    resolution: {integrity: sha512-rWQkqXRESdjXtc+7NRfK9lASQjpXJu1ayp7qi1d23zZorY+wBHVLHHoVcMsEnkqEBWTFqbztO7/QdJFzyEcLTg==}
-
-  '@babel/code-frame@7.24.7':
-    resolution: {integrity: sha512-BcYH1CVJBO9tvyIZ2jVeXgSIMvGZ2FDRvDdOIVQyuklNKSsx+eppDEBq/g47Ayw+RqNFE+URvOShmf+f/qwAlA==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/generator@7.24.7':
-    resolution: {integrity: sha512-oipXieGC3i45Y1A41t4tAqpnEZWgB/lC6Ehh6+rOviR5XWpTtMmLN+fGjz9vOiNRt0p6RtO6DtD0pdU3vpqdSA==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-environment-visitor@7.24.7':
-    resolution: {integrity: sha512-DoiN84+4Gnd0ncbBOM9AZENV4a5ZiL39HYMyZJGZ/AZEykHYdJw0wW3kdcsh9/Kn+BRXHLkkklZ51ecPKmI1CQ==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-function-name@7.24.7':
-    resolution: {integrity: sha512-FyoJTsj/PEUWu1/TYRiXTIHc8lbw+TDYkZuoE43opPS5TrI7MyONBE1oNvfguEXAD9yhQRrVBnXdXzSLQl9XnA==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-hoist-variables@7.24.7':
-    resolution: {integrity: sha512-MJJwhkoGy5c4ehfoRyrJ/owKeMl19U54h27YYftT0o2teQ3FJ3nQUf/I3LlJsX4l3qlw7WRXUmiyajvHXoTubQ==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-module-imports@7.24.7':
-    resolution: {integrity: sha512-8AyH3C+74cgCVVXow/myrynrAGv+nTVg5vKu2nZph9x7RcRwzmh0VFallJuFTZ9mx6u4eSdXZfcOzSqTUm0HCA==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-split-export-declaration@7.24.7':
-    resolution: {integrity: sha512-oy5V7pD+UvfkEATUKvIjvIAH/xCzfsFVw7ygW2SI6NClZzquT+mwdTfgfdbUiceh6iQO0CHtCPsyze/MZ2YbAA==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-string-parser@7.24.7':
-    resolution: {integrity: sha512-7MbVt6xrwFQbunH2DNQsAP5sTGxfqQtErvBIvIMi6EQnbgUOuVYanvREcmFrOPhoXBrTtjhhP+lW+o5UfK+tDg==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-validator-identifier@7.24.7':
-    resolution: {integrity: sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/highlight@7.24.7':
-    resolution: {integrity: sha512-EStJpq4OuY8xYfhGVXngigBJRWxftKX9ksiGDnmlY3o7B/V7KIAc9X4oiK87uPJSc/vs5L869bem5fhZa8caZw==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/parser@7.24.7':
-    resolution: {integrity: sha512-9uUYRm6OqQrCqQdG1iCBwBPZgN8ciDBro2nIOFaiRz1/BCxaI7CNvQbDHvsArAC7Tw9Hda/B3U+6ui9u4HWXPw==}
-    engines: {node: '>=6.0.0'}
-    hasBin: true
-
-  '@babel/runtime@7.24.7':
-    resolution: {integrity: sha512-UwgBRMjJP+xv857DCngvqXI3Iq6J4v0wXmwc6sapg+zyhbwmQX67LUEFrkK5tbyJ30jGuG3ZvWpBiB9LCy1kWw==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/template@7.24.7':
-    resolution: {integrity: sha512-jYqfPrU9JTF0PmPy1tLYHW4Mp4KlgxJD9l2nP9fD6yT/ICi554DmrWBAEYpIelzjHf1msDP3PxJIRt/nFNfBig==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/traverse@7.24.7':
-    resolution: {integrity: sha512-yb65Ed5S/QAcewNPh0nZczy9JdYXkkAbIsEo+P7BE7yO3txAY30Y/oPa3QkQ5It3xVG2kpKMg9MsdxZaO31uKA==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/types@7.24.7':
-    resolution: {integrity: sha512-XEFXSlxiG5td2EJRe8vOmRbaXVgfcBlszKujvVmWIK/UpywWljQCfzAv3RQCGujWQ1RD4YYWEAqDXfuJiy8f5Q==}
-    engines: {node: '>=6.9.0'}
-
-  '@csstools/css-parser-algorithms@2.6.3':
-    resolution: {integrity: sha512-xI/tL2zxzEbESvnSxwFgwvy5HS00oCXxL4MLs6HUiDcYfwowsoQaABKxUElp1ARITrINzBnsECOc1q0eg2GOrA==}
-    engines: {node: ^14 || ^16 || >=18}
-    peerDependencies:
-      '@csstools/css-tokenizer': ^2.3.1
-
-  '@csstools/css-tokenizer@2.3.1':
-    resolution: {integrity: sha512-iMNHTyxLbBlWIfGtabT157LH9DUx9X8+Y3oymFEuMj8HNc+rpE3dPFGFgHjpKfjeFDjLjYIAIhXPGvS2lKxL9g==}
-    engines: {node: ^14 || ^16 || >=18}
-
-  '@csstools/media-query-list-parser@2.1.11':
-    resolution: {integrity: sha512-uox5MVhvNHqitPP+SynrB1o8oPxPMt2JLgp5ghJOWf54WGQ5OKu47efne49r1SWqs3wRP8xSWjnO9MBKxhB1dA==}
-    engines: {node: ^14 || ^16 || >=18}
-    peerDependencies:
-      '@csstools/css-parser-algorithms': ^2.6.3
-      '@csstools/css-tokenizer': ^2.3.1
-
-  '@csstools/selector-specificity@3.1.1':
-    resolution: {integrity: sha512-a7cxGcJ2wIlMFLlh8z2ONm+715QkPHiyJcxwQlKOz/03GPw1COpfhcmC9wm4xlZfp//jWHNNMwzjtqHXVWU9KA==}
-    engines: {node: ^14 || ^16 || >=18}
-    peerDependencies:
-      postcss-selector-parser: ^6.0.13
-
-  '@dual-bundle/import-meta-resolve@4.1.0':
-    resolution: {integrity: sha512-+nxncfwHM5SgAtrVzgpzJOI1ol0PkumhVo469KCf9lUi21IGcY90G98VuHm9VRrUypmAzawAHO9bs6hqeADaVg==}
-
-  '@emotion/babel-plugin@11.11.0':
-    resolution: {integrity: sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==}
-
-  '@emotion/cache@11.11.0':
-    resolution: {integrity: sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==}
-
-  '@emotion/hash@0.9.1':
-    resolution: {integrity: sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==}
-
-  '@emotion/is-prop-valid@1.2.2':
-    resolution: {integrity: sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==}
-
-  '@emotion/memoize@0.8.1':
-    resolution: {integrity: sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==}
-
-  '@emotion/react@11.11.4':
-    resolution: {integrity: sha512-t8AjMlF0gHpvvxk5mAtCqR4vmxiGHCeJBaQO6gncUSdklELOgtwjerNY2yuJNfwnc6vi16U/+uMF+afIawJ9iw==}
-    peerDependencies:
-      '@types/react': '*'
-      react: '>=16.8.0'
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@emotion/serialize@1.1.4':
-    resolution: {integrity: sha512-RIN04MBT8g+FnDwgvIUi8czvr1LU1alUMI05LekWB5DGyTm8cCBMCRpq3GqaiyEDRptEXOyXnvZ58GZYu4kBxQ==}
-
-  '@emotion/sheet@1.2.2':
-    resolution: {integrity: sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA==}
-
-  '@emotion/styled@11.11.5':
-    resolution: {integrity: sha512-/ZjjnaNKvuMPxcIiUkf/9SHoG4Q196DRl1w82hQ3WCsjo1IUR8uaGWrC6a87CrYAW0Kb/pK7hk8BnLgLRi9KoQ==}
-    peerDependencies:
-      '@emotion/react': ^11.0.0-rc.0
-      '@types/react': '*'
-      react: '>=16.8.0'
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@emotion/unitless@0.8.1':
-    resolution: {integrity: sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==}
-
-  '@emotion/use-insertion-effect-with-fallbacks@1.0.1':
-    resolution: {integrity: sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==}
-    peerDependencies:
-      react: '>=16.8.0'
-
-  '@emotion/utils@1.2.1':
-    resolution: {integrity: sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg==}
-
-  '@emotion/weak-memoize@0.3.1':
-    resolution: {integrity: sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww==}
-
-  '@esbuild/aix-ppc64@0.21.5':
-    resolution: {integrity: sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==}
-    engines: {node: '>=12'}
-    cpu: [ppc64]
-    os: [aix]
-
-  '@esbuild/android-arm64@0.21.5':
-    resolution: {integrity: sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [android]
-
-  '@esbuild/android-arm@0.21.5':
-    resolution: {integrity: sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==}
-    engines: {node: '>=12'}
-    cpu: [arm]
-    os: [android]
-
-  '@esbuild/android-x64@0.21.5':
-    resolution: {integrity: sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [android]
-
-  '@esbuild/darwin-arm64@0.21.5':
-    resolution: {integrity: sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [darwin]
-
-  '@esbuild/darwin-x64@0.21.5':
-    resolution: {integrity: sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [darwin]
-
-  '@esbuild/freebsd-arm64@0.21.5':
-    resolution: {integrity: sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [freebsd]
-
-  '@esbuild/freebsd-x64@0.21.5':
-    resolution: {integrity: sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [freebsd]
-
-  '@esbuild/linux-arm64@0.21.5':
-    resolution: {integrity: sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [linux]
-
-  '@esbuild/linux-arm@0.21.5':
-    resolution: {integrity: sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==}
-    engines: {node: '>=12'}
-    cpu: [arm]
-    os: [linux]
-
-  '@esbuild/linux-ia32@0.21.5':
-    resolution: {integrity: sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==}
-    engines: {node: '>=12'}
-    cpu: [ia32]
-    os: [linux]
-
-  '@esbuild/linux-loong64@0.21.5':
-    resolution: {integrity: sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==}
-    engines: {node: '>=12'}
-    cpu: [loong64]
-    os: [linux]
-
-  '@esbuild/linux-mips64el@0.21.5':
-    resolution: {integrity: sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==}
-    engines: {node: '>=12'}
-    cpu: [mips64el]
-    os: [linux]
-
-  '@esbuild/linux-ppc64@0.21.5':
-    resolution: {integrity: sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==}
-    engines: {node: '>=12'}
-    cpu: [ppc64]
-    os: [linux]
-
-  '@esbuild/linux-riscv64@0.21.5':
-    resolution: {integrity: sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==}
-    engines: {node: '>=12'}
-    cpu: [riscv64]
-    os: [linux]
-
-  '@esbuild/linux-s390x@0.21.5':
-    resolution: {integrity: sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==}
-    engines: {node: '>=12'}
-    cpu: [s390x]
-    os: [linux]
-
-  '@esbuild/linux-x64@0.21.5':
-    resolution: {integrity: sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [linux]
-
-  '@esbuild/netbsd-x64@0.21.5':
-    resolution: {integrity: sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [netbsd]
-
-  '@esbuild/openbsd-x64@0.21.5':
-    resolution: {integrity: sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [openbsd]
-
-  '@esbuild/sunos-x64@0.21.5':
-    resolution: {integrity: sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [sunos]
-
-  '@esbuild/win32-arm64@0.21.5':
-    resolution: {integrity: sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [win32]
-
-  '@esbuild/win32-ia32@0.21.5':
-    resolution: {integrity: sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==}
-    engines: {node: '>=12'}
-    cpu: [ia32]
-    os: [win32]
-
-  '@esbuild/win32-x64@0.21.5':
-    resolution: {integrity: sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [win32]
-
-  '@eslint-community/eslint-utils@4.4.0':
-    resolution: {integrity: sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    peerDependencies:
-      eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
-
-  '@eslint-community/regexpp@4.10.1':
-    resolution: {integrity: sha512-Zm2NGpWELsQAD1xsJzGQpYfvICSsFkEpU0jxBjfdC6uNEWXcHnfs9hScFWtXVDVl+rBQJGrl4g1vcKIejpH9dA==}
-    engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
-
-  '@eslint/eslintrc@2.1.4':
-    resolution: {integrity: sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-
-  '@eslint/js@8.57.0':
-    resolution: {integrity: sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-
-  '@floating-ui/core@1.6.2':
-    resolution: {integrity: sha512-+2XpQV9LLZeanU4ZevzRnGFg2neDeKHgFLjP6YLW+tly0IvrhqT4u8enLGjLH3qeh85g19xY5rsAusfwTdn5lg==}
-
-  '@floating-ui/dom@1.6.5':
-    resolution: {integrity: sha512-Nsdud2X65Dz+1RHjAIP0t8z5e2ff/IRbei6BqFrl1urT8sDVzM1HMQ+R0XcU5ceRfyO3I6ayeqIfh+6Wb8LGTw==}
-
-  '@floating-ui/react-dom@2.1.0':
-    resolution: {integrity: sha512-lNzj5EQmEKn5FFKc04+zasr09h/uX8RtJRNj5gUXsSQIXHVWTVh+hVAg1vOMCexkX8EgvemMvIFpQfkosnVNyA==}
-    peerDependencies:
-      react: '>=16.8.0'
-      react-dom: '>=16.8.0'
-
-  '@floating-ui/utils@0.2.2':
-    resolution: {integrity: sha512-J4yDIIthosAsRZ5CPYP/jQvUAQtlZTTD/4suA08/FEnlxqW3sKS9iAhgsa9VYLZ6vDHn/ixJgIqRQPotoBjxIw==}
-
-  '@humanwhocodes/config-array@0.11.14':
-    resolution: {integrity: sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==}
-    engines: {node: '>=10.10.0'}
-    deprecated: Use @eslint/config-array instead
-
-  '@humanwhocodes/module-importer@1.0.1':
-    resolution: {integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==}
-    engines: {node: '>=12.22'}
-
-  '@humanwhocodes/object-schema@2.0.3':
-    resolution: {integrity: sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==}
-    deprecated: Use @eslint/object-schema instead
-
-  '@iconify/json@2.2.219':
-    resolution: {integrity: sha512-q8asqbM61woVZ9rJGm/gvW46i5vdeHrq4TqZQ/5wF5ypk4pAZU9+4qVa5NQE2MZngYkMPeO68PDGGl7WaEV8jQ==}
-
-  '@iconify/tools@4.0.4':
-    resolution: {integrity: sha512-hX1Z3i1Tm6JxyrDv45jNEijPpepZZfal/4leFGtUC04H9LsgRo597BOBFB9PUZsQdFGLOxVUUfv6lqU/dC+xXw==}
-
-  '@iconify/types@2.0.0':
-    resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
-
-  '@iconify/utils@2.1.24':
-    resolution: {integrity: sha512-H8r2KpL5uKyrkb3z9/3HD/22JcxqW3BJyjEWZhX2T7DehnYVZthEap1cNsEl/UtCDC3TlpNmwiPX8wg3y8E4dg==}
-
-  '@isaacs/cliui@8.0.2':
-    resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
-    engines: {node: '>=12'}
-
-  '@jridgewell/gen-mapping@0.3.5':
-    resolution: {integrity: sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==}
-    engines: {node: '>=6.0.0'}
-
-  '@jridgewell/resolve-uri@3.1.2':
-    resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
-    engines: {node: '>=6.0.0'}
-
-  '@jridgewell/set-array@1.2.1':
-    resolution: {integrity: sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==}
-    engines: {node: '>=6.0.0'}
-
-  '@jridgewell/sourcemap-codec@1.4.15':
-    resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==}
-
-  '@jridgewell/trace-mapping@0.3.25':
-    resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
-
-  '@mui/base@5.0.0-beta.40':
-    resolution: {integrity: sha512-I/lGHztkCzvwlXpjD2+SNmvNQvB4227xBXhISPjEaJUXGImOQ9f3D2Yj/T3KasSI/h0MLWy74X0J6clhPmsRbQ==}
-    engines: {node: '>=12.0.0'}
-    peerDependencies:
-      '@types/react': ^17.0.0 || ^18.0.0
-      react: ^17.0.0 || ^18.0.0
-      react-dom: ^17.0.0 || ^18.0.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@mui/core-downloads-tracker@5.15.20':
-    resolution: {integrity: sha512-DoL2ppgldL16utL8nNyj/P12f8mCNdx/Hb/AJnX9rLY4b52hCMIx1kH83pbXQ6uMy6n54M3StmEbvSGoj2OFuA==}
-
-  '@mui/lab@5.0.0-alpha.170':
-    resolution: {integrity: sha512-0bDVECGmrNjd3+bLdcLiwYZ0O4HP5j5WSQm5DV6iA/Z9kr8O6AnvZ1bv9ImQbbX7Gj3pX4o43EKwCutj3EQxQg==}
-    engines: {node: '>=12.0.0'}
-    peerDependencies:
-      '@emotion/react': ^11.5.0
-      '@emotion/styled': ^11.3.0
-      '@mui/material': '>=5.15.0'
-      '@types/react': ^17.0.0 || ^18.0.0
-      react: ^17.0.0 || ^18.0.0
-      react-dom: ^17.0.0 || ^18.0.0
-    peerDependenciesMeta:
-      '@emotion/react':
-        optional: true
-      '@emotion/styled':
-        optional: true
-      '@types/react':
-        optional: true
-
-  '@mui/material-nextjs@5.15.11':
-    resolution: {integrity: sha512-cp5RWYbBngyi7NKP91R9QITllfxumCVPFjqe4AKzNROVuCot0VpgkafxXqfbv0uFsyUU0ROs0O2M3r17q604Aw==}
-    engines: {node: '>=12.0.0'}
-    peerDependencies:
-      '@emotion/cache': ^11.11.0
-      '@emotion/server': ^11.11.0
-      '@mui/material': ^5.0.0
-      '@types/react': ^17.0.0 || ^18.0.0
-      next: ^13.0.0 || ^14.0.0
-      react: ^17.0.0 || ^18.0.0
-    peerDependenciesMeta:
-      '@emotion/cache':
-        optional: true
-      '@emotion/server':
-        optional: true
-      '@types/react':
-        optional: true
-
-  '@mui/material@5.15.20':
-    resolution: {integrity: sha512-tVq3l4qoXx/NxUgIx/x3lZiPn/5xDbdTE8VrLczNpfblLYZzlrbxA7kb9mI8NoBF6+w9WE9IrxWnKK5KlPI2bg==}
-    engines: {node: '>=12.0.0'}
-    peerDependencies:
-      '@emotion/react': ^11.5.0
-      '@emotion/styled': ^11.3.0
-      '@types/react': ^17.0.0 || ^18.0.0
-      react: ^17.0.0 || ^18.0.0
-      react-dom: ^17.0.0 || ^18.0.0
-    peerDependenciesMeta:
-      '@emotion/react':
-        optional: true
-      '@emotion/styled':
-        optional: true
-      '@types/react':
-        optional: true
-
-  '@mui/private-theming@5.15.20':
-    resolution: {integrity: sha512-BK8F94AIqSrnaPYXf2KAOjGZJgWfvqAVQ2gVR3EryvQFtuBnG6RwodxrCvd3B48VuMy6Wsk897+lQMUxJyk+6g==}
-    engines: {node: '>=12.0.0'}
-    peerDependencies:
-      '@types/react': ^17.0.0 || ^18.0.0
-      react: ^17.0.0 || ^18.0.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@mui/styled-engine@5.15.14':
-    resolution: {integrity: sha512-RILkuVD8gY6PvjZjqnWhz8fu68dVkqhM5+jYWfB5yhlSQKg+2rHkmEwm75XIeAqI3qwOndK6zELK5H6Zxn4NHw==}
-    engines: {node: '>=12.0.0'}
-    peerDependencies:
-      '@emotion/react': ^11.4.1
-      '@emotion/styled': ^11.3.0
-      react: ^17.0.0 || ^18.0.0
-    peerDependenciesMeta:
-      '@emotion/react':
-        optional: true
-      '@emotion/styled':
-        optional: true
-
-  '@mui/system@5.15.20':
-    resolution: {integrity: sha512-LoMq4IlAAhxzL2VNUDBTQxAb4chnBe8JvRINVNDiMtHE2PiPOoHlhOPutSxEbaL5mkECPVWSv6p8JEV+uykwIA==}
-    engines: {node: '>=12.0.0'}
-    peerDependencies:
-      '@emotion/react': ^11.5.0
-      '@emotion/styled': ^11.3.0
-      '@types/react': ^17.0.0 || ^18.0.0
-      react: ^17.0.0 || ^18.0.0
-    peerDependenciesMeta:
-      '@emotion/react':
-        optional: true
-      '@emotion/styled':
-        optional: true
-      '@types/react':
-        optional: true
-
-  '@mui/types@7.2.14':
-    resolution: {integrity: sha512-MZsBZ4q4HfzBsywtXgM1Ksj6HDThtiwmOKUXH1pKYISI9gAVXCNHNpo7TlGoGrBaYWZTdNoirIN7JsQcQUjmQQ==}
-    peerDependencies:
-      '@types/react': ^17.0.0 || ^18.0.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@mui/utils@5.15.20':
-    resolution: {integrity: sha512-mAbYx0sovrnpAu1zHc3MDIhPqL8RPVC5W5xcO1b7PiSCJPtckIZmBkp8hefamAvUiAV8gpfMOM6Zb+eSisbI2A==}
-    engines: {node: '>=12.0.0'}
-    peerDependencies:
-      '@types/react': ^17.0.0 || ^18.0.0
-      react: ^17.0.0 || ^18.0.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@next/env@14.2.4':
-    resolution: {integrity: sha512-3EtkY5VDkuV2+lNmKlbkibIJxcO4oIHEhBWne6PaAp+76J9KoSsGvNikp6ivzAT8dhhBMYrm6op2pS1ApG0Hzg==}
-
-  '@next/eslint-plugin-next@14.2.4':
-    resolution: {integrity: sha512-svSFxW9f3xDaZA3idQmlFw7SusOuWTpDTAeBlO3AEPDltrraV+lqs7mAc6A27YdnpQVVIA3sODqUAAHdWhVWsA==}
-
-  '@next/swc-darwin-arm64@14.2.4':
-    resolution: {integrity: sha512-AH3mO4JlFUqsYcwFUHb1wAKlebHU/Hv2u2kb1pAuRanDZ7pD/A/KPD98RHZmwsJpdHQwfEc/06mgpSzwrJYnNg==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [darwin]
-
-  '@next/swc-darwin-x64@14.2.4':
-    resolution: {integrity: sha512-QVadW73sWIO6E2VroyUjuAxhWLZWEpiFqHdZdoQ/AMpN9YWGuHV8t2rChr0ahy+irKX5mlDU7OY68k3n4tAZTg==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [darwin]
-
-  '@next/swc-linux-arm64-gnu@14.2.4':
-    resolution: {integrity: sha512-KT6GUrb3oyCfcfJ+WliXuJnD6pCpZiosx2X3k66HLR+DMoilRb76LpWPGb4tZprawTtcnyrv75ElD6VncVamUQ==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [linux]
-
-  '@next/swc-linux-arm64-musl@14.2.4':
-    resolution: {integrity: sha512-Alv8/XGSs/ytwQcbCHwze1HmiIkIVhDHYLjczSVrf0Wi2MvKn/blt7+S6FJitj3yTlMwMxII1gIJ9WepI4aZ/A==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [linux]
-
-  '@next/swc-linux-x64-gnu@14.2.4':
-    resolution: {integrity: sha512-ze0ShQDBPCqxLImzw4sCdfnB3lRmN3qGMB2GWDRlq5Wqy4G36pxtNOo2usu/Nm9+V2Rh/QQnrRc2l94kYFXO6Q==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [linux]
-
-  '@next/swc-linux-x64-musl@14.2.4':
-    resolution: {integrity: sha512-8dwC0UJoc6fC7PX70csdaznVMNr16hQrTDAMPvLPloazlcaWfdPogq+UpZX6Drqb1OBlwowz8iG7WR0Tzk/diQ==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [linux]
-
-  '@next/swc-win32-arm64-msvc@14.2.4':
-    resolution: {integrity: sha512-jxyg67NbEWkDyvM+O8UDbPAyYRZqGLQDTPwvrBBeOSyVWW/jFQkQKQ70JDqDSYg1ZDdl+E3nkbFbq8xM8E9x8A==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [win32]
-
-  '@next/swc-win32-ia32-msvc@14.2.4':
-    resolution: {integrity: sha512-twrmN753hjXRdcrZmZttb/m5xaCBFa48Dt3FbeEItpJArxriYDunWxJn+QFXdJ3hPkm4u7CKxncVvnmgQMY1ag==}
-    engines: {node: '>= 10'}
-    cpu: [ia32]
-    os: [win32]
-
-  '@next/swc-win32-x64-msvc@14.2.4':
-    resolution: {integrity: sha512-tkLrjBzqFTP8DVrAAQmZelEahfR9OxWpFR++vAI9FBhCiIxtwHwBHC23SBHCTURBtwB4kc/x44imVOnkKGNVGg==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [win32]
-
-  '@nodelib/fs.scandir@2.1.5':
-    resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
-    engines: {node: '>= 8'}
-
-  '@nodelib/fs.stat@2.0.5':
-    resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==}
-    engines: {node: '>= 8'}
-
-  '@nodelib/fs.walk@1.2.8':
-    resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
-    engines: {node: '>= 8'}
-
-  '@pkgjs/parseargs@0.11.0':
-    resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
-    engines: {node: '>=14'}
-
-  '@popperjs/core@2.11.8':
-    resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
-
-  '@rushstack/eslint-patch@1.10.3':
-    resolution: {integrity: sha512-qC/xYId4NMebE6w/V33Fh9gWxLgURiNYgVNObbJl2LZv0GUUItCcCqC5axQSwRaAgaxl2mELq1rMzlswaQ0Zxg==}
-
-  '@swc/counter@0.1.3':
-    resolution: {integrity: sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==}
-
-  '@swc/helpers@0.5.5':
-    resolution: {integrity: sha512-KGYxvIOXcceOAbEk4bi/dVLEK9z8sZ0uBB3Il5b1rhfClSpcX0yfRO0KmTkqR2cnQDymwLB+25ZyMzICg/cm/A==}
-
-  '@trysound/sax@0.2.0':
-    resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==}
-    engines: {node: '>=10.13.0'}
-
-  '@types/js-cookie@2.2.7':
-    resolution: {integrity: sha512-aLkWa0C0vO5b4Sr798E26QgOkss68Un0bLjs7u9qxzPT5CG+8DuNTffWES58YzJs3hrVAOs1wonycqEBqNJubA==}
-
-  '@types/json5@0.0.29':
-    resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
-
-  '@types/node@20.14.2':
-    resolution: {integrity: sha512-xyu6WAMVwv6AKFLB+e/7ySZVr/0zLCzOa7rSpq6jNwpqOrUbcACDWC+53d4n2QHOnDou0fbIsg8wZu/sxrnI4Q==}
-
-  '@types/parse-json@4.0.2':
-    resolution: {integrity: sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==}
-
-  '@types/prop-types@15.7.12':
-    resolution: {integrity: sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==}
-
-  '@types/react-dom@18.3.0':
-    resolution: {integrity: sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==}
-
-  '@types/react-transition-group@4.4.10':
-    resolution: {integrity: sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q==}
-
-  '@types/react@18.3.3':
-    resolution: {integrity: sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw==}
-
-  '@types/tar@6.1.13':
-    resolution: {integrity: sha512-IznnlmU5f4WcGTh2ltRu/Ijpmk8wiWXfF0VA4s+HPjHZgvFggk1YaIkbo5krX/zUCzWF8N/l4+W/LNxnvAJ8nw==}
-
-  '@types/yauzl@2.10.3':
-    resolution: {integrity: sha512-oJoftv0LSuaDZE3Le4DbKX+KS9G36NzOeSap90UIK0yMA/NhKJhqlSGtNDORNRaIbQfzjXDrQa0ytJ6mNRGz/Q==}
-
-  '@typescript-eslint/eslint-plugin@7.13.0':
-    resolution: {integrity: sha512-FX1X6AF0w8MdVFLSdqwqN/me2hyhuQg4ykN6ZpVhh1ij/80pTvDKclX1sZB9iqex8SjQfVhwMKs3JtnnMLzG9w==}
-    engines: {node: ^18.18.0 || >=20.0.0}
-    peerDependencies:
-      '@typescript-eslint/parser': ^7.0.0
-      eslint: ^8.56.0
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
-  '@typescript-eslint/parser@7.13.0':
-    resolution: {integrity: sha512-EjMfl69KOS9awXXe83iRN7oIEXy9yYdqWfqdrFAYAAr6syP8eLEFI7ZE4939antx2mNgPRW/o1ybm2SFYkbTVA==}
-    engines: {node: ^18.18.0 || >=20.0.0}
-    peerDependencies:
-      eslint: ^8.56.0
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
-  '@typescript-eslint/parser@7.2.0':
-    resolution: {integrity: sha512-5FKsVcHTk6TafQKQbuIVkXq58Fnbkd2wDL4LB7AURN7RUOu1utVP+G8+6u3ZhEroW3DF6hyo3ZEXxgKgp4KeCg==}
-    engines: {node: ^16.0.0 || >=18.0.0}
-    peerDependencies:
-      eslint: ^8.56.0
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
-  '@typescript-eslint/scope-manager@7.13.0':
-    resolution: {integrity: sha512-ZrMCe1R6a01T94ilV13egvcnvVJ1pxShkE0+NDjDzH4nvG1wXpwsVI5bZCvE7AEDH1mXEx5tJSVR68bLgG7Dng==}
-    engines: {node: ^18.18.0 || >=20.0.0}
-
-  '@typescript-eslint/scope-manager@7.2.0':
-    resolution: {integrity: sha512-Qh976RbQM/fYtjx9hs4XkayYujB/aPwglw2choHmf3zBjB4qOywWSdt9+KLRdHubGcoSwBnXUH2sR3hkyaERRg==}
-    engines: {node: ^16.0.0 || >=18.0.0}
-
-  '@typescript-eslint/type-utils@7.13.0':
-    resolution: {integrity: sha512-xMEtMzxq9eRkZy48XuxlBFzpVMDurUAfDu5Rz16GouAtXm0TaAoTFzqWUFPPuQYXI/CDaH/Bgx/fk/84t/Bc9A==}
-    engines: {node: ^18.18.0 || >=20.0.0}
-    peerDependencies:
-      eslint: ^8.56.0
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
-  '@typescript-eslint/types@7.13.0':
-    resolution: {integrity: sha512-QWuwm9wcGMAuTsxP+qz6LBBd3Uq8I5Nv8xb0mk54jmNoCyDspnMvVsOxI6IsMmway5d1S9Su2+sCKv1st2l6eA==}
-    engines: {node: ^18.18.0 || >=20.0.0}
-
-  '@typescript-eslint/types@7.2.0':
-    resolution: {integrity: sha512-XFtUHPI/abFhm4cbCDc5Ykc8npOKBSJePY3a3s+lwumt7XWJuzP5cZcfZ610MIPHjQjNsOLlYK8ASPaNG8UiyA==}
-    engines: {node: ^16.0.0 || >=18.0.0}
-
-  '@typescript-eslint/typescript-estree@7.13.0':
-    resolution: {integrity: sha512-cAvBvUoobaoIcoqox1YatXOnSl3gx92rCZoMRPzMNisDiM12siGilSM4+dJAekuuHTibI2hVC2fYK79iSFvWjw==}
-    engines: {node: ^18.18.0 || >=20.0.0}
-    peerDependencies:
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
-  '@typescript-eslint/typescript-estree@7.2.0':
-    resolution: {integrity: sha512-cyxS5WQQCoBwSakpMrvMXuMDEbhOo9bNHHrNcEWis6XHx6KF518tkF1wBvKIn/tpq5ZpUYK7Bdklu8qY0MsFIA==}
-    engines: {node: ^16.0.0 || >=18.0.0}
-    peerDependencies:
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
-  '@typescript-eslint/utils@7.13.0':
-    resolution: {integrity: sha512-jceD8RgdKORVnB4Y6BqasfIkFhl4pajB1wVxrF4akxD2QPM8GNYjgGwEzYS+437ewlqqrg7Dw+6dhdpjMpeBFQ==}
-    engines: {node: ^18.18.0 || >=20.0.0}
-    peerDependencies:
-      eslint: ^8.56.0
-
-  '@typescript-eslint/visitor-keys@7.13.0':
-    resolution: {integrity: sha512-nxn+dozQx+MK61nn/JP+M4eCkHDSxSLDpgE3WcQo0+fkjEolnaB5jswvIKC4K56By8MMgIho7f1PVxERHEo8rw==}
-    engines: {node: ^18.18.0 || >=20.0.0}
-
-  '@typescript-eslint/visitor-keys@7.2.0':
-    resolution: {integrity: sha512-c6EIQRHhcpl6+tO8EMR+kjkkV+ugUNXOmeASA1rlzkd8EPIriavpWoiEz1HR/VLhbVIdhqnV6E7JZm00cBDx2A==}
-    engines: {node: ^16.0.0 || >=18.0.0}
-
-  '@ungap/structured-clone@1.2.0':
-    resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
-
-  '@xobotyi/scrollbar-width@1.9.5':
-    resolution: {integrity: sha512-N8tkAACJx2ww8vFMneJmaAgmjAG1tnVBZJRLRcx061tmsLRZHSEZSLuGWnwPtunsSLvSqXQ2wfp7Mgqg1I+2dQ==}
-
-  '@yr/monotone-cubic-spline@1.0.3':
-    resolution: {integrity: sha512-FQXkOta0XBSUPHndIKON2Y9JeQz5ZeMqLYZVVK93FliNBFm7LNMIZmY6FrMEB9XPcDbE2bekMbZD6kzDkxwYjA==}
-
-  acorn-jsx@5.3.2:
-    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
-    peerDependencies:
-      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
-
-  acorn@8.12.0:
-    resolution: {integrity: sha512-RTvkC4w+KNXrM39/lWCUaG0IbRkWdCv7W/IOW9oU6SawyxulvkQy5HQPVTKxEjczcUvapcrw3cFx/60VN/NRNw==}
-    engines: {node: '>=0.4.0'}
-    hasBin: true
-
-  ajv@6.12.6:
-    resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
-
-  ajv@8.16.0:
-    resolution: {integrity: sha512-F0twR8U1ZU67JIEtekUcLkXkoO5mMMmgGD8sK/xUFzJ805jxHQl92hImFAqqXMyMYjSPOyUPAwHYhB72g5sTXw==}
-
-  ansi-regex@5.0.1:
-    resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
-    engines: {node: '>=8'}
-
-  ansi-regex@6.0.1:
-    resolution: {integrity: sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==}
-    engines: {node: '>=12'}
-
-  ansi-styles@3.2.1:
-    resolution: {integrity: sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==}
-    engines: {node: '>=4'}
-
-  ansi-styles@4.3.0:
-    resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
-    engines: {node: '>=8'}
-
-  ansi-styles@6.2.1:
-    resolution: {integrity: sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==}
-    engines: {node: '>=12'}
-
-  any-promise@1.3.0:
-    resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
-
-  anymatch@3.1.3:
-    resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
-    engines: {node: '>= 8'}
-
-  apexcharts@3.49.1:
-    resolution: {integrity: sha512-MqGtlq/KQuO8j0BBsUJYlRG8VBctKwYdwuBtajHgHTmSgUU3Oai+8oYN/rKCXwXzrUlYA+GiMgotAIbXY2BCGw==}
-
-  arg@5.0.2:
-    resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
-
-  argparse@2.0.1:
-    resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
-
-  aria-query@5.3.0:
-    resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==}
-
-  array-buffer-byte-length@1.0.1:
-    resolution: {integrity: sha512-ahC5W1xgou+KTXix4sAO8Ki12Q+jf4i0+tmk3sC+zgcynshkHxzpXdImBehiUYKKKDwvfFiJl1tZt6ewscS1Mg==}
-    engines: {node: '>= 0.4'}
-
-  array-includes@3.1.8:
-    resolution: {integrity: sha512-itaWrbYbqpGXkGhZPGUulwnhVf5Hpy1xiCFsGqyIGglbBxmG5vSjxQen3/WGOjPpNEv1RtBLKxbmVXm8HpJStQ==}
-    engines: {node: '>= 0.4'}
-
-  array-union@2.1.0:
-    resolution: {integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==}
-    engines: {node: '>=8'}
-
-  array.prototype.findlast@1.2.5:
-    resolution: {integrity: sha512-CVvd6FHg1Z3POpBLxO6E6zr+rSKEQ9L6rZHAaY7lLfhKsWYUBBOuMs0e9o24oopj6H+geRCX0YJ+TJLBK2eHyQ==}
-    engines: {node: '>= 0.4'}
-
-  array.prototype.findlastindex@1.2.5:
-    resolution: {integrity: sha512-zfETvRFA8o7EiNn++N5f/kaCw221hrpGsDmcpndVupkPzEc1Wuf3VgC0qby1BbHs7f5DVYjgtEU2LLh5bqeGfQ==}
-    engines: {node: '>= 0.4'}
-
-  array.prototype.flat@1.3.2:
-    resolution: {integrity: sha512-djYB+Zx2vLewY8RWlNCUdHjDXs2XOgm602S9E7P/UpHgfeHL00cRiIF+IN/G/aUJ7kGPb6yO/ErDI5V2s8iycA==}
-    engines: {node: '>= 0.4'}
-
-  array.prototype.flatmap@1.3.2:
-    resolution: {integrity: sha512-Ewyx0c9PmpcsByhSW4r+9zDU7sGjFc86qf/kKtuSCRdhfbk0SNLLkaT5qvcHnRGgc5NP/ly/y+qkXkqONX54CQ==}
-    engines: {node: '>= 0.4'}
-
-  array.prototype.toreversed@1.1.2:
-    resolution: {integrity: sha512-wwDCoT4Ck4Cz7sLtgUmzR5UV3YF5mFHUlbChCzZBQZ+0m2cl/DH3tKgvphv1nKgFsJ48oCSg6p91q2Vm0I/ZMA==}
-
-  array.prototype.tosorted@1.1.4:
-    resolution: {integrity: sha512-p6Fx8B7b7ZhL/gmUsAy0D15WhvDccw3mnGNbZpi3pmeJdxtWsj2jEaI4Y6oo3XiHfzuSgPwKc04MYt6KgvC/wA==}
-    engines: {node: '>= 0.4'}
-
-  arraybuffer.prototype.slice@1.0.3:
-    resolution: {integrity: sha512-bMxMKAjg13EBSVscxTaYA4mRc5t1UAXa2kXiGTNfZ079HIWXEkKmkgFrh/nJqamaLSrXO5H4WFFkPEaLJWbs3A==}
-    engines: {node: '>= 0.4'}
-
-  ast-types-flow@0.0.8:
-    resolution: {integrity: sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==}
-
-  astral-regex@2.0.0:
-    resolution: {integrity: sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==}
-    engines: {node: '>=8'}
-
-  asynckit@0.4.0:
-    resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
-
-  autoprefixer@10.4.19:
-    resolution: {integrity: sha512-BaENR2+zBZ8xXhM4pUaKUxlVdxZ0EZhjvbopwnXmxRUfqDmwSpC2lAi/QXvx7NRdPCo1WKEcEF6mV64si1z4Ew==}
-    engines: {node: ^10 || ^12 || >=14}
-    hasBin: true
-    peerDependencies:
-      postcss: ^8.1.0
-
-  available-typed-arrays@1.0.7:
-    resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==}
-    engines: {node: '>= 0.4'}
-
-  axe-core@4.7.0:
-    resolution: {integrity: sha512-M0JtH+hlOL5pLQwHOLNYZaXuhqmvS8oExsqB1SBYgA4Dk7u/xx+YdGHXaK5pyUfed5mYXdlYiphWq3G8cRi5JQ==}
-    engines: {node: '>=4'}
-
-  axios@1.7.2:
-    resolution: {integrity: sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw==}
-
-  axobject-query@3.2.1:
-    resolution: {integrity: sha512-jsyHu61e6N4Vbz/v18DHwWYKK0bSWLqn47eeDSKPB7m8tqMHF9YJ+mhIk2lVteyZrY8tnSj/jHOv4YiTCuCJgg==}
-
-  babel-plugin-macros@3.1.0:
-    resolution: {integrity: sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==}
-    engines: {node: '>=10', npm: '>=6'}
-
-  balanced-match@1.0.2:
-    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
-
-  balanced-match@2.0.0:
-    resolution: {integrity: sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==}
-
-  binary-extensions@2.3.0:
-    resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
-    engines: {node: '>=8'}
-
-  boolbase@1.0.0:
-    resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
-
-  brace-expansion@1.1.11:
-    resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
-
-  brace-expansion@2.0.1:
-    resolution: {integrity: sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==}
-
-  braces@3.0.3:
-    resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
-    engines: {node: '>=8'}
-
-  browserslist@4.23.1:
-    resolution: {integrity: sha512-TUfofFo/KsK/bWZ9TWQ5O26tsWW4Uhmt8IYklbnUa70udB6P2wA7w7o4PY4muaEPBQaAX+CEnmmIA41NVHtPVw==}
-    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
-    hasBin: true
-
-  buffer-crc32@0.2.13:
-    resolution: {integrity: sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==}
-
-  busboy@1.6.0:
-    resolution: {integrity: sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==}
-    engines: {node: '>=10.16.0'}
-
-  call-bind@1.0.7:
-    resolution: {integrity: sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==}
-    engines: {node: '>= 0.4'}
-
-  callsites@3.1.0:
-    resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
-    engines: {node: '>=6'}
-
-  camelcase-css@2.0.1:
-    resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
-    engines: {node: '>= 6'}
-
-  caniuse-lite@1.0.30001636:
-    resolution: {integrity: sha512-bMg2vmr8XBsbL6Lr0UHXy/21m84FTxDLWn2FSqMd5PrlbMxwJlQnC2YWYxVgp66PZE+BBNF2jYQUBKCo1FDeZg==}
-
-  chalk@2.4.2:
-    resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==}
-    engines: {node: '>=4'}
-
-  chalk@4.1.2:
-    resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
-    engines: {node: '>=10'}
-
-  cheerio-select@2.1.0:
-    resolution: {integrity: sha512-9v9kG0LvzrlcungtnJtpGNxY+fzECQKhK4EGJX2vByejiMX84MFNQw4UxPJl3bFbTMw+Dfs37XaIkCwTZfLh4g==}
-
-  cheerio@1.0.0-rc.12:
-    resolution: {integrity: sha512-VqR8m68vM46BNnuZ5NtnGBKIE/DfN0cRIzg9n40EIq9NOv90ayxLBXA8fXC5gquFRGJSTRqBq25Jt2ECLR431Q==}
-    engines: {node: '>= 6'}
-
-  chokidar@3.6.0:
-    resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
-    engines: {node: '>= 8.10.0'}
-
-  chownr@2.0.0:
-    resolution: {integrity: sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==}
-    engines: {node: '>=10'}
-
-  classnames@2.5.1:
-    resolution: {integrity: sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==}
-
-  client-only@0.0.1:
-    resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
-
-  clsx@2.1.1:
-    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
-    engines: {node: '>=6'}
-
-  color-convert@1.9.3:
-    resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
-
-  color-convert@2.0.1:
-    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
-    engines: {node: '>=7.0.0'}
-
-  color-name@1.1.3:
-    resolution: {integrity: sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==}
-
-  color-name@1.1.4:
-    resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
-
-  colord@2.9.3:
-    resolution: {integrity: sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==}
-
-  combined-stream@1.0.8:
-    resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
-    engines: {node: '>= 0.8'}
-
-  commander@4.1.1:
-    resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
-    engines: {node: '>= 6'}
-
-  commander@7.2.0:
-    resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==}
-    engines: {node: '>= 10'}
-
-  concat-map@0.0.1:
-    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
-
-  confbox@0.1.7:
-    resolution: {integrity: sha512-uJcB/FKZtBMCJpK8MQji6bJHgu1tixKPxRLeGkNzBoOZzpnZUJm0jm2/sBDWcuBx1dYgxV4JU+g5hmNxCyAmdA==}
-
-  convert-source-map@1.9.0:
-    resolution: {integrity: sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==}
-
-  copy-to-clipboard@3.3.3:
-    resolution: {integrity: sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==}
-
-  cosmiconfig@7.1.0:
-    resolution: {integrity: sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==}
-    engines: {node: '>=10'}
-
-  cosmiconfig@9.0.0:
-    resolution: {integrity: sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==}
-    engines: {node: '>=14'}
-    peerDependencies:
-      typescript: '>=4.9.5'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
-  cross-spawn@7.0.3:
-    resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
-    engines: {node: '>= 8'}
-
-  css-functions-list@3.2.2:
-    resolution: {integrity: sha512-c+N0v6wbKVxTu5gOBBFkr9BEdBWaqqjQeiJ8QvSRIJOf+UxlJh930m8e6/WNeODIK0mYLFkoONrnj16i2EcvfQ==}
-    engines: {node: '>=12 || >=16'}
-
-  css-in-js-utils@3.1.0:
-    resolution: {integrity: sha512-fJAcud6B3rRu+KHYk+Bwf+WFL2MDCJJ1XG9x137tJQ0xYxor7XziQtuGFbWNdqrvF4Tk26O3H73nfVqXt/fW1A==}
-
-  css-select@5.1.0:
-    resolution: {integrity: sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==}
-
-  css-tree@1.1.3:
-    resolution: {integrity: sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==}
-    engines: {node: '>=8.0.0'}
-
-  css-tree@2.2.1:
-    resolution: {integrity: sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==}
-    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
-
-  css-tree@2.3.1:
-    resolution: {integrity: sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==}
-    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
-
-  css-what@6.1.0:
-    resolution: {integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==}
-    engines: {node: '>= 6'}
-
-  cssesc@3.0.0:
-    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
-    engines: {node: '>=4'}
-    hasBin: true
-
-  csso@5.0.5:
-    resolution: {integrity: sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==}
-    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
-
-  csstype@3.1.3:
-    resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
-
-  damerau-levenshtein@1.0.8:
-    resolution: {integrity: sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==}
-
-  data-view-buffer@1.0.1:
-    resolution: {integrity: sha512-0lht7OugA5x3iJLOWFhWK/5ehONdprk0ISXqVFn/NFrDu+cuc8iADFrGQz5BnRK7LLU3JmkbXSxaqX+/mXYtUA==}
-    engines: {node: '>= 0.4'}
-
-  data-view-byte-length@1.0.1:
-    resolution: {integrity: sha512-4J7wRJD3ABAzr8wP+OcIcqq2dlUKp4DVflx++hs5h5ZKydWMI6/D/fAot+yh6g2tHh8fLFTvNOaVN357NvSrOQ==}
-    engines: {node: '>= 0.4'}
-
-  data-view-byte-offset@1.0.0:
-    resolution: {integrity: sha512-t/Ygsytq+R995EJ5PZlD4Cu56sWa8InXySaViRzw9apusqsOO2bQP+SbYzAhR0pFKoB+43lYy8rWban9JSuXnA==}
-    engines: {node: '>= 0.4'}
-
-  debug@3.2.7:
-    resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
-    peerDependencies:
-      supports-color: '*'
-    peerDependenciesMeta:
-      supports-color:
-        optional: true
-
-  debug@4.3.5:
-    resolution: {integrity: sha512-pt0bNEmneDIvdL1Xsd9oDQ/wrQRkXDT4AUWlNZNPKvW5x/jyO9VFXkJUP07vQ2upmw5PlaITaPKc31jK13V+jg==}
-    engines: {node: '>=6.0'}
-    peerDependencies:
-      supports-color: '*'
-    peerDependenciesMeta:
-      supports-color:
-        optional: true
-
-  deep-is@0.1.4:
-    resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
-
-  define-data-property@1.1.4:
-    resolution: {integrity: sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==}
-    engines: {node: '>= 0.4'}
-
-  define-properties@1.2.1:
-    resolution: {integrity: sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==}
-    engines: {node: '>= 0.4'}
-
-  delayed-stream@1.0.0:
-    resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
-    engines: {node: '>=0.4.0'}
-
-  dequal@2.0.3:
-    resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
-    engines: {node: '>=6'}
-
-  didyoumean@1.2.2:
-    resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
-
-  dir-glob@3.0.1:
-    resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
-    engines: {node: '>=8'}
-
-  dlv@1.1.3:
-    resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
-
-  doctrine@2.1.0:
-    resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
-    engines: {node: '>=0.10.0'}
-
-  doctrine@3.0.0:
-    resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==}
-    engines: {node: '>=6.0.0'}
-
-  dom-helpers@5.2.1:
-    resolution: {integrity: sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==}
-
-  dom-serializer@2.0.0:
-    resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==}
-
-  domelementtype@2.3.0:
-    resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==}
-
-  domhandler@5.0.3:
-    resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==}
-    engines: {node: '>= 4'}
-
-  domutils@3.1.0:
-    resolution: {integrity: sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==}
-
-  eastasianwidth@0.2.0:
-    resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
-
-  electron-to-chromium@1.4.803:
-    resolution: {integrity: sha512-61H9mLzGOCLLVsnLiRzCbc63uldP0AniRYPV3hbGVtONA1pI7qSGILdbofR7A8TMbOypDocEAjH/e+9k1QIe3g==}
-
-  emoji-regex@8.0.0:
-    resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
-
-  emoji-regex@9.2.2:
-    resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
-
-  end-of-stream@1.4.4:
-    resolution: {integrity: sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==}
-
-  enhanced-resolve@5.17.0:
-    resolution: {integrity: sha512-dwDPwZL0dmye8Txp2gzFmA6sxALaSvdRDjPH0viLcKrtlOL3tw62nWWweVD1SdILDTJrbrL6tdWVN58Wo6U3eA==}
-    engines: {node: '>=10.13.0'}
-
-  entities@4.5.0:
-    resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
-    engines: {node: '>=0.12'}
-
-  env-paths@2.2.1:
-    resolution: {integrity: sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==}
-    engines: {node: '>=6'}
-
-  error-ex@1.3.2:
-    resolution: {integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==}
-
-  error-stack-parser@2.1.4:
-    resolution: {integrity: sha512-Sk5V6wVazPhq5MhpO+AUxJn5x7XSXGl1R93Vn7i+zS15KDVxQijejNCrz8340/2bgLBjR9GtEG8ZVKONDjcqGQ==}
-
-  es-abstract@1.23.3:
-    resolution: {integrity: sha512-e+HfNH61Bj1X9/jLc5v1owaLYuHdeHHSQlkhCBiTK8rBvKaULl/beGMxwrMXjpYrv4pz22BlY570vVePA2ho4A==}
-    engines: {node: '>= 0.4'}
-
-  es-define-property@1.0.0:
-    resolution: {integrity: sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==}
-    engines: {node: '>= 0.4'}
-
-  es-errors@1.3.0:
-    resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
-    engines: {node: '>= 0.4'}
-
-  es-iterator-helpers@1.0.19:
-    resolution: {integrity: sha512-zoMwbCcH5hwUkKJkT8kDIBZSz9I6mVG//+lDCinLCGov4+r7NIy0ld8o03M0cJxl2spVf6ESYVS6/gpIfq1FFw==}
-    engines: {node: '>= 0.4'}
-
-  es-object-atoms@1.0.0:
-    resolution: {integrity: sha512-MZ4iQ6JwHOBQjahnjwaC1ZtIBH+2ohjamzAO3oaHcXYup7qxjF2fixyH+Q71voWHeOkI2q/TnJao/KfXYIZWbw==}
-    engines: {node: '>= 0.4'}
-
-  es-set-tostringtag@2.0.3:
-    resolution: {integrity: sha512-3T8uNMC3OQTHkFUsFq8r/BwAXLHvU/9O9mE0fBc/MY5iq/8H7ncvO947LmYA6ldWw9Uh8Yhf25zu6n7nML5QWQ==}
-    engines: {node: '>= 0.4'}
-
-  es-shim-unscopables@1.0.2:
-    resolution: {integrity: sha512-J3yBRXCzDu4ULnQwxyToo/OjdMx6akgVC7K6few0a7F/0wLtmKKN7I73AH5T2836UuXRqN7Qg+IIUw/+YJksRw==}
-
-  es-to-primitive@1.2.1:
-    resolution: {integrity: sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==}
-    engines: {node: '>= 0.4'}
-
-  esbuild@0.21.5:
-    resolution: {integrity: sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==}
-    engines: {node: '>=12'}
-    hasBin: true
-
-  escalade@3.1.2:
-    resolution: {integrity: sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==}
-    engines: {node: '>=6'}
-
-  escape-string-regexp@1.0.5:
-    resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
-    engines: {node: '>=0.8.0'}
-
-  escape-string-regexp@4.0.0:
-    resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
-    engines: {node: '>=10'}
-
-  eslint-config-next@14.2.4:
-    resolution: {integrity: sha512-Qr0wMgG9m6m4uYy2jrYJmyuNlYZzPRQq5Kvb9IDlYwn+7yq6W6sfMNFgb+9guM1KYwuIo6TIaiFhZJ6SnQ/Efw==}
-    peerDependencies:
-      eslint: ^7.23.0 || ^8.0.0
-      typescript: '>=3.3.1'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
-  eslint-config-prettier@9.1.0:
-    resolution: {integrity: sha512-NSWl5BFQWEPi1j4TjVNItzYV7dZXZ+wP6I6ZhrBGpChQhZRUaElihE9uRRkcbRnNb76UMKDF3r+WTmNcGPKsqw==}
-    hasBin: true
-    peerDependencies:
-      eslint: '>=7.0.0'
-
-  eslint-import-resolver-node@0.3.9:
-    resolution: {integrity: sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==}
-
-  eslint-import-resolver-typescript@3.6.1:
-    resolution: {integrity: sha512-xgdptdoi5W3niYeuQxKmzVDTATvLYqhpwmykwsh7f6HIOStGWEIL9iqZgQDF9u9OEzrRwR8no5q2VT+bjAujTg==}
-    engines: {node: ^14.18.0 || >=16.0.0}
-    peerDependencies:
-      eslint: '*'
-      eslint-plugin-import: '*'
-
-  eslint-module-utils@2.8.1:
-    resolution: {integrity: sha512-rXDXR3h7cs7dy9RNpUlQf80nX31XWJEyGq1tRMo+6GsO5VmTe4UTwtmonAD4ZkAsrfMVDA2wlGJ3790Ys+D49Q==}
-    engines: {node: '>=4'}
-    peerDependencies:
-      '@typescript-eslint/parser': '*'
-      eslint: '*'
-      eslint-import-resolver-node: '*'
-      eslint-import-resolver-typescript: '*'
-      eslint-import-resolver-webpack: '*'
-    peerDependenciesMeta:
-      '@typescript-eslint/parser':
-        optional: true
-      eslint:
-        optional: true
-      eslint-import-resolver-node:
-        optional: true
-      eslint-import-resolver-typescript:
-        optional: true
-      eslint-import-resolver-webpack:
-        optional: true
-
-  eslint-plugin-import@2.29.1:
-    resolution: {integrity: sha512-BbPC0cuExzhiMo4Ff1BTVwHpjjv28C5R+btTOGaCRC7UEz801up0JadwkeSk5Ued6TG34uaczuVuH6qyy5YUxw==}
-    engines: {node: '>=4'}
-    peerDependencies:
-      '@typescript-eslint/parser': '*'
-      eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8
-    peerDependenciesMeta:
-      '@typescript-eslint/parser':
-        optional: true
-
-  eslint-plugin-jsx-a11y@6.8.0:
-    resolution: {integrity: sha512-Hdh937BS3KdwwbBaKd5+PLCOmYY6U4f2h9Z2ktwtNKvIdIEu137rjYbcb9ApSbVJfWxANNuiKTD/9tOKjK9qOA==}
-    engines: {node: '>=4.0'}
-    peerDependencies:
-      eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8
-
-  eslint-plugin-react-hooks@4.6.2:
-    resolution: {integrity: sha512-QzliNJq4GinDBcD8gPB5v0wh6g8q3SUi6EFF0x8N/BL9PoVs0atuGc47ozMRyOWAKdwaZ5OnbOEa3WR+dSGKuQ==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0
-
-  eslint-plugin-react@7.34.2:
-    resolution: {integrity: sha512-2HCmrU+/JNigDN6tg55cRDKCQWicYAPB38JGSFDQt95jDm8rrvSUo7YPkOIm5l6ts1j1zCvysNcasvfTMQzUOw==}
-    engines: {node: '>=4'}
-    peerDependencies:
-      eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8
-
-  eslint-scope@7.2.2:
-    resolution: {integrity: sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-
-  eslint-visitor-keys@3.4.3:
-    resolution: {integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-
-  eslint@8.57.0:
-    resolution: {integrity: sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    hasBin: true
-
-  espree@9.6.1:
-    resolution: {integrity: sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-
-  esquery@1.5.0:
-    resolution: {integrity: sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==}
-    engines: {node: '>=0.10'}
-
-  esrecurse@4.3.0:
-    resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
-    engines: {node: '>=4.0'}
-
-  estraverse@5.3.0:
-    resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
-    engines: {node: '>=4.0'}
-
-  esutils@2.0.3:
-    resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
-    engines: {node: '>=0.10.0'}
-
-  execa@5.1.1:
-    resolution: {integrity: sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==}
-    engines: {node: '>=10'}
-
-  extract-zip@2.0.1:
-    resolution: {integrity: sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==}
-    engines: {node: '>= 10.17.0'}
-    hasBin: true
-
-  fast-deep-equal@3.1.3:
-    resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
-
-  fast-glob@3.3.2:
-    resolution: {integrity: sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==}
-    engines: {node: '>=8.6.0'}
-
-  fast-json-stable-stringify@2.1.0:
-    resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
-
-  fast-levenshtein@2.0.6:
-    resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
-
-  fast-loops@1.1.3:
-    resolution: {integrity: sha512-8EZzEP0eKkEEVX+drtd9mtuQ+/QrlfW/5MlwcwK5Nds6EkZ/tRzEexkzUY2mIssnAyVLT+TKHuRXmFNNXYUd6g==}
-
-  fast-shallow-equal@1.0.0:
-    resolution: {integrity: sha512-HPtaa38cPgWvaCFmRNhlc6NG7pv6NUHqjPgVAkWGoB9mQMwYB27/K0CvOM5Czy+qpT3e8XJ6Q4aPAnzpNpzNaw==}
-
-  fastest-levenshtein@1.0.16:
-    resolution: {integrity: sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==}
-    engines: {node: '>= 4.9.1'}
-
-  fastest-stable-stringify@2.0.2:
-    resolution: {integrity: sha512-bijHueCGd0LqqNK9b5oCMHc0MluJAx0cwqASgbWMvkO01lCYgIhacVRLcaDz3QnyYIRNJRDwMb41VuT6pHJ91Q==}
-
-  fastq@1.17.1:
-    resolution: {integrity: sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==}
-
-  fd-slicer@1.1.0:
-    resolution: {integrity: sha512-cE1qsB/VwyQozZ+q1dGxR8LBYNZeofhEdUNGSMbQD3Gw2lAzX9Zb3uIU6Ebc/Fmyjo9AWWfnn0AUCHqtevs/8g==}
-
-  file-entry-cache@6.0.1:
-    resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
-    engines: {node: ^10.12.0 || >=12.0.0}
-
-  file-entry-cache@9.0.0:
-    resolution: {integrity: sha512-6MgEugi8p2tiUhqO7GnPsmbCCzj0YRCwwaTbpGRyKZesjRSzkqkAE9fPp7V2yMs5hwfgbQLgdvSSkGNg1s5Uvw==}
-    engines: {node: '>=18'}
-
-  fill-range@7.1.1:
-    resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
-    engines: {node: '>=8'}
-
-  find-root@1.1.0:
-    resolution: {integrity: sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==}
-
-  find-up@5.0.0:
-    resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
-    engines: {node: '>=10'}
-
-  flat-cache@3.2.0:
-    resolution: {integrity: sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==}
-    engines: {node: ^10.12.0 || >=12.0.0}
-
-  flat-cache@5.0.0:
-    resolution: {integrity: sha512-JrqFmyUl2PnPi1OvLyTVHnQvwQ0S+e6lGSwu8OkAZlSaNIZciTY2H/cOOROxsBA1m/LZNHDsqAgDZt6akWcjsQ==}
-    engines: {node: '>=18'}
-
-  flatted@3.3.1:
-    resolution: {integrity: sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==}
-
-  follow-redirects@1.15.6:
-    resolution: {integrity: sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==}
-    engines: {node: '>=4.0'}
-    peerDependencies:
-      debug: '*'
-    peerDependenciesMeta:
-      debug:
-        optional: true
-
-  for-each@0.3.3:
-    resolution: {integrity: sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==}
-
-  foreground-child@3.2.1:
-    resolution: {integrity: sha512-PXUUyLqrR2XCWICfv6ukppP96sdFwWbNEnfEMt7jNsISjMsvaLNinAHNDYyvkyU+SZG2BTSbT5NjG+vZslfGTA==}
-    engines: {node: '>=14'}
-
-  form-data@4.0.0:
-    resolution: {integrity: sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==}
-    engines: {node: '>= 6'}
-
-  fraction.js@4.3.7:
-    resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}
-
-  fs-minipass@2.1.0:
-    resolution: {integrity: sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==}
-    engines: {node: '>= 8'}
-
-  fsevents@2.3.3:
-    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
-    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
-    os: [darwin]
-
-  function-bind@1.1.2:
-    resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
-
-  function.prototype.name@1.1.6:
-    resolution: {integrity: sha512-Z5kx79swU5P27WEayXM1tBi5Ze/lbIyiNgU3qyXUOf9b2rgXYyF9Dy9Cx+IQv/Lc8WCG6L82zwUPpSS9hGehIg==}
-    engines: {node: '>= 0.4'}
-
-  functions-have-names@1.2.3:
-    resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==}
-
-  get-intrinsic@1.2.4:
-    resolution: {integrity: sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==}
-    engines: {node: '>= 0.4'}
-
-  get-stream@5.2.0:
-    resolution: {integrity: sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==}
-    engines: {node: '>=8'}
-
-  get-stream@6.0.1:
-    resolution: {integrity: sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==}
-    engines: {node: '>=10'}
-
-  get-symbol-description@1.0.2:
-    resolution: {integrity: sha512-g0QYk1dZBxGwk+Ngc+ltRH2IBp2f7zBkBMBJZCDerh6EhlhSR6+9irMCuT/09zD6qkarHUSn529sK/yL4S27mg==}
-    engines: {node: '>= 0.4'}
-
-  get-tsconfig@4.7.5:
-    resolution: {integrity: sha512-ZCuZCnlqNzjb4QprAzXKdpp/gh6KTxSJuw3IBsPnV/7fV4NxC9ckB+vPTt8w7fJA0TaSD7c55BR47JD6MEDyDw==}
-
-  glob-parent@5.1.2:
-    resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
-    engines: {node: '>= 6'}
-
-  glob-parent@6.0.2:
-    resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
-    engines: {node: '>=10.13.0'}
-
-  glob@10.3.10:
-    resolution: {integrity: sha512-fa46+tv1Ak0UPK1TOy/pZrIybNNt4HCv7SDzwyfiOZkvZLEbjsZkJBPtDHVshZjbecAoAGSC20MjLDG/qr679g==}
-    engines: {node: '>=16 || 14 >=14.17'}
-    hasBin: true
-
-  glob@10.4.1:
-    resolution: {integrity: sha512-2jelhlq3E4ho74ZyVLN03oKdAZVUa6UDZzFLVH1H7dnoax+y9qyaq8zBkfDIggjniU19z0wU18y16jMB2eyVIw==}
-    engines: {node: '>=16 || 14 >=14.18'}
-    hasBin: true
-
-  global-modules@2.0.0:
-    resolution: {integrity: sha512-NGbfmJBp9x8IxyJSd1P+otYK8vonoJactOogrVfFRIAEY1ukil8RSKDz2Yo7wh1oihl51l/r6W4epkeKJHqL8A==}
-    engines: {node: '>=6'}
-
-  global-prefix@3.0.0:
-    resolution: {integrity: sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==}
-    engines: {node: '>=6'}
-
-  globals@11.12.0:
-    resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
-    engines: {node: '>=4'}
-
-  globals@13.24.0:
-    resolution: {integrity: sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==}
-    engines: {node: '>=8'}
-
-  globalthis@1.0.4:
-    resolution: {integrity: sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==}
-    engines: {node: '>= 0.4'}
-
-  globby@11.1.0:
-    resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==}
-    engines: {node: '>=10'}
-
-  globjoin@0.1.4:
-    resolution: {integrity: sha512-xYfnw62CKG8nLkZBfWbhWwDw02CHty86jfPcc2cr3ZfeuK9ysoVPPEUxf21bAD/rWAgk52SuBrLJlefNy8mvFg==}
-
-  gopd@1.0.1:
-    resolution: {integrity: sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==}
-
-  graceful-fs@4.2.11:
-    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
-
-  graphemer@1.4.0:
-    resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
-
-  has-bigints@1.0.2:
-    resolution: {integrity: sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==}
-
-  has-flag@3.0.0:
-    resolution: {integrity: sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==}
-    engines: {node: '>=4'}
-
-  has-flag@4.0.0:
-    resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
-    engines: {node: '>=8'}
-
-  has-property-descriptors@1.0.2:
-    resolution: {integrity: sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==}
-
-  has-proto@1.0.3:
-    resolution: {integrity: sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==}
-    engines: {node: '>= 0.4'}
-
-  has-symbols@1.0.3:
-    resolution: {integrity: sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==}
-    engines: {node: '>= 0.4'}
-
-  has-tostringtag@1.0.2:
-    resolution: {integrity: sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==}
-    engines: {node: '>= 0.4'}
-
-  hasown@2.0.2:
-    resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
-    engines: {node: '>= 0.4'}
-
-  hoist-non-react-statics@3.3.2:
-    resolution: {integrity: sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==}
-
-  html-tags@3.3.1:
-    resolution: {integrity: sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==}
-    engines: {node: '>=8'}
-
-  htmlparser2@8.0.2:
-    resolution: {integrity: sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==}
-
-  human-signals@2.1.0:
-    resolution: {integrity: sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==}
-    engines: {node: '>=10.17.0'}
-
-  hyphenate-style-name@1.0.5:
-    resolution: {integrity: sha512-fedL7PRwmeVkgyhu9hLeTBaI6wcGk7JGJswdaRsa5aUbkXI1kr1xZwTPBtaYPpwf56878iDek6VbVnuWMebJmw==}
-
-  ignore@5.3.1:
-    resolution: {integrity: sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==}
-    engines: {node: '>= 4'}
-
-  import-fresh@3.3.0:
-    resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
-    engines: {node: '>=6'}
-
-  imurmurhash@0.1.4:
-    resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
-    engines: {node: '>=0.8.19'}
-
-  ini@1.3.8:
-    resolution: {integrity: sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==}
-
-  inline-style-prefixer@7.0.0:
-    resolution: {integrity: sha512-I7GEdScunP1dQ6IM2mQWh6v0mOYdYmH3Bp31UecKdrcUgcURTcctSe1IECdUznSHKSmsHtjrT3CwCPI1pyxfUQ==}
-
-  internal-slot@1.0.7:
-    resolution: {integrity: sha512-NGnrKwXzSms2qUUih/ILZ5JBqNTSa1+ZmP6flaIp6KmSElgE9qdndzS3cqjrDovwFdmwsGsLdeFgB6suw+1e9g==}
-    engines: {node: '>= 0.4'}
-
-  is-array-buffer@3.0.4:
-    resolution: {integrity: sha512-wcjaerHw0ydZwfhiKbXJWLDY8A7yV7KhjQOpb83hGgGfId/aQa4TOvwyzn2PuswW2gPCYEL/nEAiSVpdOj1lXw==}
-    engines: {node: '>= 0.4'}
-
-  is-arrayish@0.2.1:
-    resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
-
-  is-async-function@2.0.0:
-    resolution: {integrity: sha512-Y1JXKrfykRJGdlDwdKlLpLyMIiWqWvuSd17TvZk68PLAOGOoF4Xyav1z0Xhoi+gCYjZVeC5SI+hYFOfvXmGRCA==}
-    engines: {node: '>= 0.4'}
-
-  is-bigint@1.0.4:
-    resolution: {integrity: sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==}
-
-  is-binary-path@2.1.0:
-    resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
-    engines: {node: '>=8'}
-
-  is-boolean-object@1.1.2:
-    resolution: {integrity: sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==}
-    engines: {node: '>= 0.4'}
-
-  is-callable@1.2.7:
-    resolution: {integrity: sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==}
-    engines: {node: '>= 0.4'}
-
-  is-core-module@2.13.1:
-    resolution: {integrity: sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==}
-
-  is-data-view@1.0.1:
-    resolution: {integrity: sha512-AHkaJrsUVW6wq6JS8y3JnM/GJF/9cf+k20+iDzlSaJrinEo5+7vRiteOSwBhHRiAyQATN1AmY4hwzxJKPmYf+w==}
-    engines: {node: '>= 0.4'}
-
-  is-date-object@1.0.5:
-    resolution: {integrity: sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==}
-    engines: {node: '>= 0.4'}
-
-  is-extglob@2.1.1:
-    resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
-    engines: {node: '>=0.10.0'}
-
-  is-finalizationregistry@1.0.2:
-    resolution: {integrity: sha512-0by5vtUJs8iFQb5TYUHHPudOR+qXYIMKtiUzvLIZITZUjknFmziyBJuLhVRc+Ds0dREFlskDNJKYIdIzu/9pfw==}
-
-  is-fullwidth-code-point@3.0.0:
-    resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
-    engines: {node: '>=8'}
-
-  is-generator-function@1.0.10:
-    resolution: {integrity: sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==}
-    engines: {node: '>= 0.4'}
-
-  is-glob@4.0.3:
-    resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
-    engines: {node: '>=0.10.0'}
-
-  is-map@2.0.3:
-    resolution: {integrity: sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==}
-    engines: {node: '>= 0.4'}
-
-  is-negative-zero@2.0.3:
-    resolution: {integrity: sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==}
-    engines: {node: '>= 0.4'}
-
-  is-number-object@1.0.7:
-    resolution: {integrity: sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==}
-    engines: {node: '>= 0.4'}
-
-  is-number@7.0.0:
-    resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
-    engines: {node: '>=0.12.0'}
-
-  is-path-inside@3.0.3:
-    resolution: {integrity: sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==}
-    engines: {node: '>=8'}
-
-  is-plain-object@5.0.0:
-    resolution: {integrity: sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==}
-    engines: {node: '>=0.10.0'}
-
-  is-regex@1.1.4:
-    resolution: {integrity: sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==}
-    engines: {node: '>= 0.4'}
-
-  is-set@2.0.3:
-    resolution: {integrity: sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==}
-    engines: {node: '>= 0.4'}
-
-  is-shared-array-buffer@1.0.3:
-    resolution: {integrity: sha512-nA2hv5XIhLR3uVzDDfCIknerhx8XUKnstuOERPNNIinXG7v9u+ohXF67vxm4TPTEPU6lm61ZkwP3c9PCB97rhg==}
-    engines: {node: '>= 0.4'}
-
-  is-stream@2.0.1:
-    resolution: {integrity: sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==}
-    engines: {node: '>=8'}
-
-  is-string@1.0.7:
-    resolution: {integrity: sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==}
-    engines: {node: '>= 0.4'}
-
-  is-symbol@1.0.4:
-    resolution: {integrity: sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==}
-    engines: {node: '>= 0.4'}
-
-  is-typed-array@1.1.13:
-    resolution: {integrity: sha512-uZ25/bUAlUY5fR4OKT4rZQEBrzQWYV9ZJYGGsUmEJ6thodVJ1HX64ePQ6Z0qPWP+m+Uq6e9UugrE38jeYsDSMw==}
-    engines: {node: '>= 0.4'}
-
-  is-weakmap@2.0.2:
-    resolution: {integrity: sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==}
-    engines: {node: '>= 0.4'}
-
-  is-weakref@1.0.2:
-    resolution: {integrity: sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==}
-
-  is-weakset@2.0.3:
-    resolution: {integrity: sha512-LvIm3/KWzS9oRFHugab7d+M/GcBXuXX5xZkzPmN+NxihdQlZUQ4dWuSV1xR/sq6upL1TJEDrfBgRepHFdBtSNQ==}
-    engines: {node: '>= 0.4'}
-
-  isarray@2.0.5:
-    resolution: {integrity: sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==}
-
-  isexe@2.0.0:
-    resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
-
-  iterator.prototype@1.1.2:
-    resolution: {integrity: sha512-DR33HMMr8EzwuRL8Y9D3u2BMj8+RqSE850jfGu59kS7tbmPLzGkZmVSfyCFSDxuZiEY6Rzt3T2NA/qU+NwVj1w==}
-
-  jackspeak@2.3.6:
-    resolution: {integrity: sha512-N3yCS/NegsOBokc8GAdM8UcmfsKiSS8cipheD/nivzr700H+nsMOxJjQnvwOcRYVuFkdH0wGUvW2WbXGmrZGbQ==}
-    engines: {node: '>=14'}
-
-  jackspeak@3.4.0:
-    resolution: {integrity: sha512-JVYhQnN59LVPFCEcVa2C3CrEKYacvjRfqIQl+h8oi91aLYQVWRYbxjPcv1bUiUy/kLmQaANrYfNMCO3kuEDHfw==}
-    engines: {node: '>=14'}
-
-  jiti@1.21.6:
-    resolution: {integrity: sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==}
-    hasBin: true
-
-  js-cookie@2.2.1:
-    resolution: {integrity: sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ==}
-
-  js-tokens@4.0.0:
-    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
-
-  js-yaml@4.1.0:
-    resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
-    hasBin: true
-
-  jsesc@2.5.2:
-    resolution: {integrity: sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==}
-    engines: {node: '>=4'}
-    hasBin: true
-
-  json-buffer@3.0.1:
-    resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
-
-  json-parse-even-better-errors@2.3.1:
-    resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
-
-  json-schema-traverse@0.4.1:
-    resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
-
-  json-schema-traverse@1.0.0:
-    resolution: {integrity: sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==}
-
-  json-stable-stringify-without-jsonify@1.0.1:
-    resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
-
-  json5@1.0.2:
-    resolution: {integrity: sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==}
-    hasBin: true
-
-  jsx-ast-utils@3.3.5:
-    resolution: {integrity: sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==}
-    engines: {node: '>=4.0'}
-
-  keyv@4.5.4:
-    resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
-
-  kind-of@6.0.3:
-    resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==}
-    engines: {node: '>=0.10.0'}
-
-  known-css-properties@0.31.0:
-    resolution: {integrity: sha512-sBPIUGTNF0czz0mwGGUoKKJC8Q7On1GPbCSFPfyEsfHb2DyBG0Y4QtV+EVWpINSaiGKZblDNuF5AezxSgOhesQ==}
-
-  kolorist@1.8.0:
-    resolution: {integrity: sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==}
-
-  language-subtag-registry@0.3.23:
-    resolution: {integrity: sha512-0K65Lea881pHotoGEa5gDlMxt3pctLi2RplBb7Ezh4rRdLEOtgi7n4EwK9lamnUCkKBqaeKRVebTq6BAxSkpXQ==}
-
-  language-tags@1.0.9:
-    resolution: {integrity: sha512-MbjN408fEndfiQXbFQ1vnd+1NoLDsnQW41410oQBXiyXDMYH5z505juWa4KUE1LqxRC7DgOgZDbKLxHIwm27hA==}
-    engines: {node: '>=0.10'}
-
-  levn@0.4.1:
-    resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
-    engines: {node: '>= 0.8.0'}
-
-  lilconfig@2.1.0:
-    resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
-    engines: {node: '>=10'}
-
-  lilconfig@3.1.2:
-    resolution: {integrity: sha512-eop+wDAvpItUys0FWkHIKeC9ybYrTGbU41U5K7+bttZZeohvnY7M9dZ5kB21GNWiFT2q1OoPTvncPCgSOVO5ow==}
-    engines: {node: '>=14'}
-
-  lines-and-columns@1.2.4:
-    resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
-
-  local-pkg@0.5.0:
-    resolution: {integrity: sha512-ok6z3qlYyCDS4ZEU27HaU6x/xZa9Whf8jD4ptH5UZTQYZVYeb9bnZ3ojVhiJNLiXK1Hfc0GNbLXcmZ5plLDDBg==}
-    engines: {node: '>=14'}
-
-  locate-path@6.0.0:
-    resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
-    engines: {node: '>=10'}
-
-  lodash.merge@4.6.2:
-    resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
-
-  lodash.truncate@4.4.2:
-    resolution: {integrity: sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw==}
-
-  loose-envify@1.4.0:
-    resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
-    hasBin: true
-
-  lru-cache@10.2.2:
-    resolution: {integrity: sha512-9hp3Vp2/hFQUiIwKo8XCeFVnrg8Pk3TYNPIR7tJADKi5YfcF7vEaK7avFHTlSy3kOKYaJQaalfEo6YuXdceBOQ==}
-    engines: {node: 14 || >=16.14}
-
-  mathml-tag-names@2.1.3:
-    resolution: {integrity: sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==}
-
-  mdn-data@2.0.14:
-    resolution: {integrity: sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==}
-
-  mdn-data@2.0.28:
-    resolution: {integrity: sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==}
-
-  mdn-data@2.0.30:
-    resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==}
-
-  meow@13.2.0:
-    resolution: {integrity: sha512-pxQJQzB6djGPXh08dacEloMFopsOqGVRKFPYvPOt9XDZ1HasbgDZA74CJGreSU4G3Ak7EFJGoiH2auq+yXISgA==}
-    engines: {node: '>=18'}
-
-  merge-stream@2.0.0:
-    resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
-
-  merge2@1.4.1:
-    resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
-    engines: {node: '>= 8'}
-
-  micromatch@4.0.7:
-    resolution: {integrity: sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==}
-    engines: {node: '>=8.6'}
-
-  mime-db@1.52.0:
-    resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
-    engines: {node: '>= 0.6'}
-
-  mime-types@2.1.35:
-    resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
-    engines: {node: '>= 0.6'}
-
-  mimic-fn@2.1.0:
-    resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==}
-    engines: {node: '>=6'}
-
-  minimatch@3.1.2:
-    resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
-
-  minimatch@9.0.3:
-    resolution: {integrity: sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==}
-    engines: {node: '>=16 || 14 >=14.17'}
-
-  minimatch@9.0.4:
-    resolution: {integrity: sha512-KqWh+VchfxcMNRAJjj2tnsSJdNbHsVgnkBhTNrW7AjVo6OvLtxw8zfT9oLw1JSohlFzJ8jCoTgaoXvJ+kHt6fw==}
-    engines: {node: '>=16 || 14 >=14.17'}
-
-  minimist@1.2.8:
-    resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
-
-  minipass@3.3.6:
-    resolution: {integrity: sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==}
-    engines: {node: '>=8'}
-
-  minipass@4.2.8:
-    resolution: {integrity: sha512-fNzuVyifolSLFL4NzpF+wEF4qrgqaaKX0haXPQEdQ7NKAN+WecoKMHV09YcuL/DHxrUsYQOK3MiuDf7Ip2OXfQ==}
-    engines: {node: '>=8'}
-
-  minipass@5.0.0:
-    resolution: {integrity: sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==}
-    engines: {node: '>=8'}
-
-  minipass@7.1.2:
-    resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
-    engines: {node: '>=16 || 14 >=14.17'}
-
-  minizlib@2.1.2:
-    resolution: {integrity: sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==}
-    engines: {node: '>= 8'}
-
-  mkdirp@1.0.4:
-    resolution: {integrity: sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==}
-    engines: {node: '>=10'}
-    hasBin: true
-
-  mlly@1.7.1:
-    resolution: {integrity: sha512-rrVRZRELyQzrIUAVMHxP97kv+G786pHmOKzuFII8zDYahFBS7qnHh2AlYSl1GAHhaMPCz6/oHjVMcfFYgFYHgA==}
-
-  ms@2.1.2:
-    resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
-
-  ms@2.1.3:
-    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
-
-  mz@2.7.0:
-    resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
-
-  nano-css@5.6.1:
-    resolution: {integrity: sha512-T2Mhc//CepkTa3X4pUhKgbEheJHYAxD0VptuqFhDbGMUWVV2m+lkNiW/Ieuj35wrfC8Zm0l7HvssQh7zcEttSw==}
-    peerDependencies:
-      react: '*'
-      react-dom: '*'
-
-  nanoid@3.3.7:
-    resolution: {integrity: sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==}
-    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
-    hasBin: true
-
-  natural-compare@1.4.0:
-    resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
-
-  next@14.2.4:
-    resolution: {integrity: sha512-R8/V7vugY+822rsQGQCjoLhMuC9oFj9SOi4Cl4b2wjDrseD0LRZ10W7R6Czo4w9ZznVSshKjuIomsRjvm9EKJQ==}
-    engines: {node: '>=18.17.0'}
-    hasBin: true
-    peerDependencies:
-      '@opentelemetry/api': ^1.1.0
-      '@playwright/test': ^1.41.2
-      react: ^18.2.0
-      react-dom: ^18.2.0
-      sass: ^1.3.0
-    peerDependenciesMeta:
-      '@opentelemetry/api':
-        optional: true
-      '@playwright/test':
-        optional: true
-      sass:
-        optional: true
-
-  node-releases@2.0.14:
-    resolution: {integrity: sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==}
-
-  normalize-path@3.0.0:
-    resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
-    engines: {node: '>=0.10.0'}
-
-  normalize-range@0.1.2:
-    resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==}
-    engines: {node: '>=0.10.0'}
-
-  npm-run-path@4.0.1:
-    resolution: {integrity: sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==}
-    engines: {node: '>=8'}
-
-  nth-check@2.1.1:
-    resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
-
-  object-assign@4.1.1:
-    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
-    engines: {node: '>=0.10.0'}
-
-  object-hash@3.0.0:
-    resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
-    engines: {node: '>= 6'}
-
-  object-inspect@1.13.1:
-    resolution: {integrity: sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==}
-
-  object-keys@1.1.1:
-    resolution: {integrity: sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==}
-    engines: {node: '>= 0.4'}
-
-  object.assign@4.1.5:
-    resolution: {integrity: sha512-byy+U7gp+FVwmyzKPYhW2h5l3crpmGsxl7X2s8y43IgxvG4g3QZ6CffDtsNQy1WsmZpQbO+ybo0AlW7TY6DcBQ==}
-    engines: {node: '>= 0.4'}
-
-  object.entries@1.1.8:
-    resolution: {integrity: sha512-cmopxi8VwRIAw/fkijJohSfpef5PdN0pMQJN6VC/ZKvn0LIknWD8KtgY6KlQdEc4tIjcQ3HxSMmnvtzIscdaYQ==}
-    engines: {node: '>= 0.4'}
-
-  object.fromentries@2.0.8:
-    resolution: {integrity: sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==}
-    engines: {node: '>= 0.4'}
-
-  object.groupby@1.0.3:
-    resolution: {integrity: sha512-+Lhy3TQTuzXI5hevh8sBGqbmurHbbIjAi0Z4S63nthVLmLxfbj4T54a4CfZrXIrt9iP4mVAPYMo/v99taj3wjQ==}
-    engines: {node: '>= 0.4'}
-
-  object.hasown@1.1.4:
-    resolution: {integrity: sha512-FZ9LZt9/RHzGySlBARE3VF+gE26TxR38SdmqOqliuTnl9wrKulaQs+4dee1V+Io8VfxqzAfHu6YuRgUy8OHoTg==}
-    engines: {node: '>= 0.4'}
-
-  object.values@1.2.0:
-    resolution: {integrity: sha512-yBYjY9QX2hnRmZHAjG/f13MzmBzxzYgQhFrke06TTyKY5zSTEqkOeukBzIdVA3j3ulu8Qa3MbVFShV7T2RmGtQ==}
-    engines: {node: '>= 0.4'}
-
-  once@1.4.0:
-    resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
-
-  onetime@5.1.2:
-    resolution: {integrity: sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==}
-    engines: {node: '>=6'}
-
-  optionator@0.9.4:
-    resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
-    engines: {node: '>= 0.8.0'}
-
-  p-limit@3.1.0:
-    resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
-    engines: {node: '>=10'}
-
-  p-locate@5.0.0:
-    resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
-    engines: {node: '>=10'}
-
-  parent-module@1.0.1:
-    resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
-    engines: {node: '>=6'}
-
-  parse-json@5.2.0:
-    resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
-    engines: {node: '>=8'}
-
-  parse5-htmlparser2-tree-adapter@7.0.0:
-    resolution: {integrity: sha512-B77tOZrqqfUfnVcOrUvfdLbz4pu4RopLD/4vmu3HUPswwTA8OH0EMW9BlWR2B0RCoiZRAHEUu7IxeP1Pd1UU+g==}
-
-  parse5@7.1.2:
-    resolution: {integrity: sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==}
-
-  path-exists@4.0.0:
-    resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
-    engines: {node: '>=8'}
-
-  path-key@3.1.1:
-    resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
-    engines: {node: '>=8'}
-
-  path-parse@1.0.7:
-    resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
-
-  path-scurry@1.11.1:
-    resolution: {integrity: sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==}
-    engines: {node: '>=16 || 14 >=14.18'}
-
-  path-type@4.0.0:
-    resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
-    engines: {node: '>=8'}
-
-  pathe@1.1.2:
-    resolution: {integrity: sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==}
-
-  pend@1.2.0:
-    resolution: {integrity: sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==}
-
-  perfect-scrollbar@1.5.5:
-    resolution: {integrity: sha512-dzalfutyP3e/FOpdlhVryN4AJ5XDVauVWxybSkLZmakFE2sS3y3pc4JnSprw8tGmHvkaG5Edr5T7LBTZ+WWU2g==}
-
-  picocolors@1.0.1:
-    resolution: {integrity: sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==}
-
-  picomatch@2.3.1:
-    resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
-    engines: {node: '>=8.6'}
-
-  pify@2.3.0:
-    resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
-    engines: {node: '>=0.10.0'}
-
-  pirates@4.0.6:
-    resolution: {integrity: sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==}
-    engines: {node: '>= 6'}
-
-  pkg-types@1.1.1:
-    resolution: {integrity: sha512-ko14TjmDuQJ14zsotODv7dBlwxKhUKQEhuhmbqo1uCi9BB0Z2alo/wAXg6q1dTR5TyuqYyWhjtfe/Tsh+X28jQ==}
-
-  possible-typed-array-names@1.0.0:
-    resolution: {integrity: sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==}
-    engines: {node: '>= 0.4'}
-
-  postcss-import@14.1.0:
-    resolution: {integrity: sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==}
-    engines: {node: '>=10.0.0'}
-    peerDependencies:
-      postcss: ^8.0.0
-
-  postcss-import@15.1.0:
-    resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
-    engines: {node: '>=14.0.0'}
-    peerDependencies:
-      postcss: ^8.0.0
-
-  postcss-js@4.0.1:
-    resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
-    engines: {node: ^12 || ^14 || >= 16}
-    peerDependencies:
-      postcss: ^8.4.21
-
-  postcss-load-config@3.1.4:
-    resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==}
-    engines: {node: '>= 10'}
-    peerDependencies:
-      postcss: '>=8.0.9'
-      ts-node: '>=9.0.0'
-    peerDependenciesMeta:
-      postcss:
-        optional: true
-      ts-node:
-        optional: true
-
-  postcss-load-config@4.0.2:
-    resolution: {integrity: sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==}
-    engines: {node: '>= 14'}
-    peerDependencies:
-      postcss: '>=8.0.9'
-      ts-node: '>=9.0.0'
-    peerDependenciesMeta:
-      postcss:
-        optional: true
-      ts-node:
-        optional: true
-
-  postcss-nested@6.0.0:
-    resolution: {integrity: sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==}
-    engines: {node: '>=12.0'}
-    peerDependencies:
-      postcss: ^8.2.14
-
-  postcss-nested@6.0.1:
-    resolution: {integrity: sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==}
-    engines: {node: '>=12.0'}
-    peerDependencies:
-      postcss: ^8.2.14
-
-  postcss-resolve-nested-selector@0.1.1:
-    resolution: {integrity: sha512-HvExULSwLqHLgUy1rl3ANIqCsvMS0WHss2UOsXhXnQaZ9VCc2oBvIpXrl00IUFT5ZDITME0o6oiXeiHr2SAIfw==}
-
-  postcss-safe-parser@7.0.0:
-    resolution: {integrity: sha512-ovehqRNVCpuFzbXoTb4qLtyzK3xn3t/CUBxOs8LsnQjQrShaB4lKiHoVqY8ANaC0hBMHq5QVWk77rwGklFUDrg==}
-    engines: {node: '>=18.0'}
-    peerDependencies:
-      postcss: ^8.4.31
-
-  postcss-selector-parser@6.1.0:
-    resolution: {integrity: sha512-UMz42UD0UY0EApS0ZL9o1XnLhSTtvvvLe5Dc2H2O56fvRZi+KulDyf5ctDhhtYJBGKStV2FL1fy6253cmLgqVQ==}
-    engines: {node: '>=4'}
-
-  postcss-styled-syntax@0.6.4:
-    resolution: {integrity: sha512-uWiLn+9rKgIghUYmTHvXMR6MnyPULMe9Gv3bV537Fg4FH6CA6cn21WMjKss2Qb98LUhT847tKfnRGG3FhSOgUQ==}
-    engines: {node: '>=14.17'}
-    peerDependencies:
-      postcss: ^8.4.21
-
-  postcss-value-parser@4.2.0:
-    resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
-
-  postcss@8.4.31:
-    resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==}
-    engines: {node: ^10 || ^12 || >=14}
-
-  postcss@8.4.38:
-    resolution: {integrity: sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==}
-    engines: {node: ^10 || ^12 || >=14}
-
-  prelude-ls@1.2.1:
-    resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
-    engines: {node: '>= 0.8.0'}
-
-  prettier@3.3.2:
-    resolution: {integrity: sha512-rAVeHYMcv8ATV5d508CFdn+8/pHPpXeIid1DdrPwXnaAdH7cqjVbpJaT5eq4yRAFU/lsbwYwSF/n5iNrdJHPQA==}
-    engines: {node: '>=14'}
-    hasBin: true
-
-  prop-types@15.8.1:
-    resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
-
-  proxy-from-env@1.1.0:
-    resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
-
-  pump@3.0.0:
-    resolution: {integrity: sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==}
-
-  punycode@2.3.1:
-    resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
-    engines: {node: '>=6'}
-
-  queue-microtask@1.2.3:
-    resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
-
-  quick-lru@5.1.1:
-    resolution: {integrity: sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==}
-    engines: {node: '>=10'}
-
-  react-apexcharts@1.4.1:
-    resolution: {integrity: sha512-G14nVaD64Bnbgy8tYxkjuXEUp/7h30Q0U33xc3AwtGFijJB9nHqOt1a6eG0WBn055RgRg+NwqbKGtqPxy15d0Q==}
-    peerDependencies:
-      apexcharts: ^3.41.0
-      react: '>=0.13'
-
-  react-dom@18.3.1:
-    resolution: {integrity: sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==}
-    peerDependencies:
-      react: ^18.3.1
-
-  react-is@16.13.1:
-    resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
-
-  react-is@18.3.1:
-    resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
-
-  react-perfect-scrollbar@1.5.8:
-    resolution: {integrity: sha512-bQ46m70gp/HJtiBOF3gRzBISSZn8FFGNxznTdmTG8AAwpxG1bJCyn7shrgjEvGSQ5FJEafVEiosY+ccER11OSA==}
-    peerDependencies:
-      react: '>=16.3.3'
-      react-dom: '>=16.3.3'
-
-  react-transition-group@4.4.5:
-    resolution: {integrity: sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==}
-    peerDependencies:
-      react: '>=16.6.0'
-      react-dom: '>=16.6.0'
-
-  react-universal-interface@0.6.2:
-    resolution: {integrity: sha512-dg8yXdcQmvgR13RIlZbTRQOoUrDciFVoSBZILwjE2LFISxZZ8loVJKAkuzswl5js8BHda79bIb2b84ehU8IjXw==}
-    peerDependencies:
-      react: '*'
-      tslib: '*'
-
-  react-use@17.5.0:
-    resolution: {integrity: sha512-PbfwSPMwp/hoL847rLnm/qkjg3sTRCvn6YhUZiHaUa3FA6/aNoFX79ul5Xt70O1rK+9GxSVqkY0eTwMdsR/bWg==}
-    peerDependencies:
-      react: '*'
-      react-dom: '*'
-
-  react@18.3.1:
-    resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==}
-    engines: {node: '>=0.10.0'}
-
-  read-cache@1.0.0:
-    resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
-
-  readdirp@3.6.0:
-    resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
-    engines: {node: '>=8.10.0'}
-
-  reflect.getprototypeof@1.0.6:
-    resolution: {integrity: sha512-fmfw4XgoDke3kdI6h4xcUz1dG8uaiv5q9gcEwLS4Pnth2kxT+GZ7YehS1JTMGBQmtV7Y4GFGbs2re2NqhdozUg==}
-    engines: {node: '>= 0.4'}
-
-  regenerator-runtime@0.14.1:
-    resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==}
-
-  regexp.prototype.flags@1.5.2:
-    resolution: {integrity: sha512-NcDiDkTLuPR+++OCKB0nWafEmhg/Da8aUPLPMQbK+bxKKCm1/S5he+AqYa4PlMCVBalb4/yxIRub6qkEx5yJbw==}
-    engines: {node: '>= 0.4'}
-
-  require-from-string@2.0.2:
-    resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
-    engines: {node: '>=0.10.0'}
-
-  resize-observer-polyfill@1.5.1:
-    resolution: {integrity: sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==}
-
-  resolve-from@4.0.0:
-    resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
-    engines: {node: '>=4'}
-
-  resolve-from@5.0.0:
-    resolution: {integrity: sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==}
-    engines: {node: '>=8'}
-
-  resolve-pkg-maps@1.0.0:
-    resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==}
-
-  resolve@1.22.8:
-    resolution: {integrity: sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==}
-    hasBin: true
-
-  resolve@2.0.0-next.5:
-    resolution: {integrity: sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==}
-    hasBin: true
-
-  reusify@1.0.4:
-    resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==}
-    engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
-
-  rimraf@5.0.7:
-    resolution: {integrity: sha512-nV6YcJo5wbLW77m+8KjH8aB/7/rxQy9SZ0HY5shnwULfS+9nmTtVXAJET5NdZmCzA4fPI/Hm1wo/Po/4mopOdg==}
-    engines: {node: '>=14.18'}
-    hasBin: true
-
-  rtl-css-js@1.16.1:
-    resolution: {integrity: sha512-lRQgou1mu19e+Ya0LsTvKrVJ5TYUbqCVPAiImX3UfLTenarvPUl1QFdvu5Z3PYmHT9RCcwIfbjRQBntExyj3Zg==}
-
-  run-parallel@1.2.0:
-    resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
-
-  safe-array-concat@1.1.2:
-    resolution: {integrity: sha512-vj6RsCsWBCf19jIeHEfkRMw8DPiBb+DMXklQ/1SGDHOMlHdPUkZXFQ2YdplS23zESTijAcurb1aSgJA3AgMu1Q==}
-    engines: {node: '>=0.4'}
-
-  safe-regex-test@1.0.3:
-    resolution: {integrity: sha512-CdASjNJPvRa7roO6Ra/gLYBTzYzzPyyBXxIMdGW3USQLyjWEls2RgW5UBTXaQVp+OrpeCK3bLem8smtmheoRuw==}
-    engines: {node: '>= 0.4'}
-
-  scheduler@0.23.2:
-    resolution: {integrity: sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==}
-
-  screenfull@5.2.0:
-    resolution: {integrity: sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA==}
-    engines: {node: '>=0.10.0'}
-
-  semver@6.3.1:
-    resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
-    hasBin: true
-
-  semver@7.6.2:
-    resolution: {integrity: sha512-FNAIBWCx9qcRhoHcgcJ0gvU7SN1lYU2ZXuSfl04bSC5OpvDHFyJCjdNHomPXxjQlCBU67YW64PzY7/VIEH7F2w==}
-    engines: {node: '>=10'}
-    hasBin: true
-
-  server-only@0.0.1:
-    resolution: {integrity: sha512-qepMx2JxAa5jjfzxG79yPPq+8BuFToHd1hm7kI+Z4zAq1ftQiP7HcxMhDDItrbtwVeLg/cY2JnKnrcFkmiswNA==}
-
-  set-function-length@1.2.2:
-    resolution: {integrity: sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==}
-    engines: {node: '>= 0.4'}
-
-  set-function-name@2.0.2:
-    resolution: {integrity: sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==}
-    engines: {node: '>= 0.4'}
-
-  set-harmonic-interval@1.0.1:
-    resolution: {integrity: sha512-AhICkFV84tBP1aWqPwLZqFvAwqEoVA9kxNMniGEUvzOlm4vLmOFLiTT3UZ6bziJTy4bOVpzWGTfSCbmaayGx8g==}
-    engines: {node: '>=6.9'}
-
-  shebang-command@2.0.0:
-    resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
-    engines: {node: '>=8'}
-
-  shebang-regex@3.0.0:
-    resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
-    engines: {node: '>=8'}
-
-  side-channel@1.0.6:
-    resolution: {integrity: sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==}
-    engines: {node: '>= 0.4'}
-
-  signal-exit@3.0.7:
-    resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
-
-  signal-exit@4.1.0:
-    resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
-    engines: {node: '>=14'}
-
-  slash@3.0.0:
-    resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
-    engines: {node: '>=8'}
-
-  slice-ansi@4.0.0:
-    resolution: {integrity: sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==}
-    engines: {node: '>=10'}
-
-  source-map-js@1.2.0:
-    resolution: {integrity: sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==}
-    engines: {node: '>=0.10.0'}
-
-  source-map@0.5.6:
-    resolution: {integrity: sha512-MjZkVp0NHr5+TPihLcadqnlVoGIoWo4IBHptutGh9wI3ttUYvCG26HkSuDi+K6lsZ25syXJXcctwgyVCt//xqA==}
-    engines: {node: '>=0.10.0'}
-
-  source-map@0.5.7:
-    resolution: {integrity: sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==}
-    engines: {node: '>=0.10.0'}
-
-  source-map@0.6.1:
-    resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
-    engines: {node: '>=0.10.0'}
-
-  stack-generator@2.0.10:
-    resolution: {integrity: sha512-mwnua/hkqM6pF4k8SnmZ2zfETsRUpWXREfA/goT8SLCV4iOFa4bzOX2nDipWAZFPTjLvQB82f5yaodMVhK0yJQ==}
-
-  stackframe@1.3.4:
-    resolution: {integrity: sha512-oeVtt7eWQS+Na6F//S4kJ2K2VbRlS9D43mAlMyVpVWovy9o+jfgH8O9agzANzaiLjclA0oYzUXEM4PurhSUChw==}
-
-  stacktrace-gps@3.1.2:
-    resolution: {integrity: sha512-GcUgbO4Jsqqg6RxfyTHFiPxdPqF+3LFmQhm7MgCuYQOYuWyqxo5pwRPz5d/u6/WYJdEnWfK4r+jGbyD8TSggXQ==}
-
-  stacktrace-js@2.0.2:
-    resolution: {integrity: sha512-Je5vBeY4S1r/RnLydLl0TBTi3F2qdfWmYsGvtfZgEI+SCprPppaIhQf5nGcal4gI4cGpCV/duLcAzT1np6sQqg==}
-
-  streamsearch@1.1.0:
-    resolution: {integrity: sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==}
-    engines: {node: '>=10.0.0'}
-
-  string-width@4.2.3:
-    resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
-    engines: {node: '>=8'}
-
-  string-width@5.1.2:
-    resolution: {integrity: sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==}
-    engines: {node: '>=12'}
-
-  string.prototype.matchall@4.0.11:
-    resolution: {integrity: sha512-NUdh0aDavY2og7IbBPenWqR9exH+E26Sv8e0/eTe1tltDGZL+GtBkDAnnyBtmekfK6/Dq3MkcGtzXFEd1LQrtg==}
-    engines: {node: '>= 0.4'}
-
-  string.prototype.trim@1.2.9:
-    resolution: {integrity: sha512-klHuCNxiMZ8MlsOihJhJEBJAiMVqU3Z2nEXWfWnIqjN0gEFS9J9+IxKozWWtQGcgoa1WUZzLjKPTr4ZHNFTFxw==}
-    engines: {node: '>= 0.4'}
-
-  string.prototype.trimend@1.0.8:
-    resolution: {integrity: sha512-p73uL5VCHCO2BZZ6krwwQE3kCzM7NKmis8S//xEC6fQonchbum4eP6kR4DLEjQFO3Wnj3Fuo8NM0kOSjVdHjZQ==}
-
-  string.prototype.trimstart@1.0.8:
-    resolution: {integrity: sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==}
-    engines: {node: '>= 0.4'}
-
-  strip-ansi@6.0.1:
-    resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
-    engines: {node: '>=8'}
-
-  strip-ansi@7.1.0:
-    resolution: {integrity: sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==}
-    engines: {node: '>=12'}
-
-  strip-bom@3.0.0:
-    resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
-    engines: {node: '>=4'}
-
-  strip-final-newline@2.0.0:
-    resolution: {integrity: sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==}
-    engines: {node: '>=6'}
-
-  strip-json-comments@3.1.1:
-    resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
-    engines: {node: '>=8'}
-
-  styled-jsx@5.1.1:
-    resolution: {integrity: sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==}
-    engines: {node: '>= 12.0.0'}
-    peerDependencies:
-      '@babel/core': '*'
-      babel-plugin-macros: '*'
-      react: '>= 16.8.0 || 17.x.x || ^18.0.0-0'
-    peerDependenciesMeta:
-      '@babel/core':
-        optional: true
-      babel-plugin-macros:
-        optional: true
-
-  stylelint-use-logical-spec@5.0.1:
-    resolution: {integrity: sha512-UfLB4LW6iG4r3cXxjxkiHQrFyhWFqt8FpNNngD+TyvgMWSokk5TYwTvBHS3atUvZhOogllTOe/PUrGE+4z84AA==}
-    engines: {node: '>=8.0.0'}
-    peerDependencies:
-      stylelint: '>=11 < 17'
-
-  stylelint@16.6.1:
-    resolution: {integrity: sha512-yNgz2PqWLkhH2hw6X9AweV9YvoafbAD5ZsFdKN9BvSDVwGvPh+AUIrn7lYwy1S7IHmtFin75LLfX1m0D2tHu8Q==}
-    engines: {node: '>=18.12.0'}
-    hasBin: true
-
-  stylis@4.2.0:
-    resolution: {integrity: sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==}
-
-  stylis@4.3.2:
-    resolution: {integrity: sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg==}
-
-  sucrase@3.35.0:
-    resolution: {integrity: sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==}
-    engines: {node: '>=16 || 14 >=14.17'}
-    hasBin: true
-
-  supports-color@5.5.0:
-    resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
-    engines: {node: '>=4'}
-
-  supports-color@7.2.0:
-    resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
-    engines: {node: '>=8'}
-
-  supports-hyperlinks@3.0.0:
-    resolution: {integrity: sha512-QBDPHyPQDRTy9ku4URNGY5Lah8PAaXs6tAAwp55sL5WCsSW7GIfdf6W5ixfziW+t7wh3GVvHyHHyQ1ESsoRvaA==}
-    engines: {node: '>=14.18'}
-
-  supports-preserve-symlinks-flag@1.0.0:
-    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
-    engines: {node: '>= 0.4'}
-
-  svg-tags@1.0.0:
-    resolution: {integrity: sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==}
-
-  svg.draggable.js@2.2.2:
-    resolution: {integrity: sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==}
-    engines: {node: '>= 0.8.0'}
-
-  svg.easing.js@2.0.0:
-    resolution: {integrity: sha512-//ctPdJMGy22YoYGV+3HEfHbm6/69LJUTAqI2/5qBvaNHZ9uUFVC82B0Pl299HzgH13rKrBgi4+XyXXyVWWthA==}
-    engines: {node: '>= 0.8.0'}
-
-  svg.filter.js@2.0.2:
-    resolution: {integrity: sha512-xkGBwU+dKBzqg5PtilaTb0EYPqPfJ9Q6saVldX+5vCRy31P6TlRCP3U9NxH3HEufkKkpNgdTLBJnmhDHeTqAkw==}
-    engines: {node: '>= 0.8.0'}
-
-  svg.js@2.7.1:
-    resolution: {integrity: sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA==}
-
-  svg.pathmorphing.js@0.1.3:
-    resolution: {integrity: sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==}
-    engines: {node: '>= 0.8.0'}
-
-  svg.resize.js@1.4.3:
-    resolution: {integrity: sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==}
-    engines: {node: '>= 0.8.0'}
-
-  svg.select.js@2.1.2:
-    resolution: {integrity: sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==}
-    engines: {node: '>= 0.8.0'}
-
-  svg.select.js@3.0.1:
-    resolution: {integrity: sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==}
-    engines: {node: '>= 0.8.0'}
-
-  svgo@3.3.2:
-    resolution: {integrity: sha512-OoohrmuUlBs8B8o6MB2Aevn+pRIH9zDALSR+6hhqVfa6fRwG/Qw9VUMSMW9VNg2CFc/MTIfabtdOVl9ODIJjpw==}
-    engines: {node: '>=14.0.0'}
-    hasBin: true
-
-  table@6.8.2:
-    resolution: {integrity: sha512-w2sfv80nrAh2VCbqR5AK27wswXhqcck2AhfnNW76beQXskGZ1V12GwS//yYVa3d3fcvAip2OUnbDAjW2k3v9fA==}
-    engines: {node: '>=10.0.0'}
-
-  tailwindcss-logical@3.0.1:
-    resolution: {integrity: sha512-mv585RJfzS/Cu9Rpl2M5H+JSOdU3qjLHzKMtg63oD5lXfehRJpldbEqll20Obvlexq0Cmyg86l7cmb/I5hEutg==}
-
-  tailwindcss@3.3.1:
-    resolution: {integrity: sha512-Vkiouc41d4CEq0ujXl6oiGFQ7bA3WEhUZdTgXAhtKxSy49OmKs8rEfQmupsfF0IGW8fv2iQkp1EVUuapCFrZ9g==}
-    engines: {node: '>=12.13.0'}
-    hasBin: true
-    peerDependencies:
-      postcss: ^8.0.9
-
-  tailwindcss@3.4.4:
-    resolution: {integrity: sha512-ZoyXOdJjISB7/BcLTR6SEsLgKtDStYyYZVLsUtWChO4Ps20CBad7lfJKVDiejocV4ME1hLmyY0WJE3hSDcmQ2A==}
-    engines: {node: '>=14.0.0'}
-    hasBin: true
-
-  tapable@2.2.1:
-    resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
-    engines: {node: '>=6'}
-
-  tar@6.2.1:
-    resolution: {integrity: sha512-DZ4yORTwrbTj/7MZYq2w+/ZFdI6OZ/f9SFHR+71gIVUZhOQPHzVCLpvRnPgyaMpfWxxk/4ONva3GQSyNIKRv6A==}
-    engines: {node: '>=10'}
-
-  text-table@0.2.0:
-    resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
-
-  thenify-all@1.6.0:
-    resolution: {integrity: sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==}
-    engines: {node: '>=0.8'}
-
-  thenify@3.3.1:
-    resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
-
-  throttle-debounce@3.0.1:
-    resolution: {integrity: sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg==}
-    engines: {node: '>=10'}
-
-  to-fast-properties@2.0.0:
-    resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
-    engines: {node: '>=4'}
-
-  to-regex-range@5.0.1:
-    resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
-    engines: {node: '>=8.0'}
-
-  toggle-selection@1.0.6:
-    resolution: {integrity: sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==}
-
-  ts-api-utils@1.3.0:
-    resolution: {integrity: sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==}
-    engines: {node: '>=16'}
-    peerDependencies:
-      typescript: '>=4.2.0'
-
-  ts-easing@0.2.0:
-    resolution: {integrity: sha512-Z86EW+fFFh/IFB1fqQ3/+7Zpf9t2ebOAxNI/V6Wo7r5gqiqtxmgTlQ1qbqQcjLKYeSHPTsEmvlJUDg/EuL0uHQ==}
-
-  ts-interface-checker@0.1.13:
-    resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
-
-  tsconfig-paths@3.15.0:
-    resolution: {integrity: sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==}
-
-  tslib@2.6.3:
-    resolution: {integrity: sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==}
-
-  tsx@4.15.5:
-    resolution: {integrity: sha512-iKi8jQ2VBmZ2kU/FkGkL2OSHBHsazsUzsdC/W/RwhKIEsIoZ1alCclZHP5jGfNHEaEWUJFM1GquzCf+4db3b0w==}
-    engines: {node: '>=18.0.0'}
-    hasBin: true
-
-  type-check@0.4.0:
-    resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
-    engines: {node: '>= 0.8.0'}
-
-  type-fest@0.20.2:
-    resolution: {integrity: sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==}
-    engines: {node: '>=10'}
-
-  typed-array-buffer@1.0.2:
-    resolution: {integrity: sha512-gEymJYKZtKXzzBzM4jqa9w6Q1Jjm7x2d+sh19AdsD4wqnMPDYyvwpsIc2Q/835kHuo3BEQ7CjelGhfTsoBb2MQ==}
-    engines: {node: '>= 0.4'}
-
-  typed-array-byte-length@1.0.1:
-    resolution: {integrity: sha512-3iMJ9q0ao7WE9tWcaYKIptkNBuOIcZCCT0d4MRvuuH88fEoEH62IuQe0OtraD3ebQEoTRk8XCBoknUNc1Y67pw==}
-    engines: {node: '>= 0.4'}
-
-  typed-array-byte-offset@1.0.2:
-    resolution: {integrity: sha512-Ous0vodHa56FviZucS2E63zkgtgrACj7omjwd/8lTEMEPFFyjfixMZ1ZXenpgCFBBt4EC1J2XsyVS2gkG0eTFA==}
-    engines: {node: '>= 0.4'}
-
-  typed-array-length@1.0.6:
-    resolution: {integrity: sha512-/OxDN6OtAk5KBpGb28T+HZc2M+ADtvRxXrKKbUwtsLgdoxgX13hyy7ek6bFRl5+aBs2yZzB0c4CnQfAtVypW/g==}
-    engines: {node: '>= 0.4'}
-
-  typescript@5.4.5:
-    resolution: {integrity: sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==}
-    engines: {node: '>=14.17'}
-    hasBin: true
-
-  ufo@1.5.3:
-    resolution: {integrity: sha512-Y7HYmWaFwPUmkoQCUIAYpKqkOf+SbVj/2fJJZ4RJMCfZp0rTGwRbzQD+HghfnhKOjL9E01okqz+ncJskGYfBNw==}
-
-  unbox-primitive@1.0.2:
-    resolution: {integrity: sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==}
-
-  undici-types@5.26.5:
-    resolution: {integrity: sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==}
-
-  update-browserslist-db@1.0.16:
-    resolution: {integrity: sha512-KVbTxlBYlckhF5wgfyZXTWnMn7MMZjMu9XG8bPlliUOP9ThaF4QnhP8qrjrH7DRzHfSk0oQv1wToW+iA5GajEQ==}
-    hasBin: true
-    peerDependencies:
-      browserslist: '>= 4.21.0'
-
-  uri-js@4.4.1:
-    resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
-
-  util-deprecate@1.0.2:
-    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
-
-  which-boxed-primitive@1.0.2:
-    resolution: {integrity: sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==}
-
-  which-builtin-type@1.1.3:
-    resolution: {integrity: sha512-YmjsSMDBYsM1CaFiayOVT06+KJeXf0o5M/CAd4o1lTadFAtacTUM49zoYxr/oroopFDfhvN6iEcBxUyc3gvKmw==}
-    engines: {node: '>= 0.4'}
-
-  which-collection@1.0.2:
-    resolution: {integrity: sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==}
-    engines: {node: '>= 0.4'}
-
-  which-typed-array@1.1.15:
-    resolution: {integrity: sha512-oV0jmFtUky6CXfkqehVvBP/LSWJ2sy4vWMioiENyJLePrBO/yKyV9OyJySfAKosh+RYkIl5zJCNZ8/4JncrpdA==}
-    engines: {node: '>= 0.4'}
-
-  which@1.3.1:
-    resolution: {integrity: sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==}
-    hasBin: true
-
-  which@2.0.2:
-    resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
-    engines: {node: '>= 8'}
-    hasBin: true
-
-  word-wrap@1.2.5:
-    resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
-    engines: {node: '>=0.10.0'}
-
-  wrap-ansi@7.0.0:
-    resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
-    engines: {node: '>=10'}
-
-  wrap-ansi@8.1.0:
-    resolution: {integrity: sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==}
-    engines: {node: '>=12'}
-
-  wrappy@1.0.2:
-    resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
-
-  write-file-atomic@5.0.1:
-    resolution: {integrity: sha512-+QU2zd6OTD8XWIJCbffaiQeH9U73qIqafo1x6V1snCWYGJf6cVE0cDR4D8xRzcEnfI21IFrUPzPGtcPf8AC+Rw==}
-    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
-
-  yallist@4.0.0:
-    resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
-
-  yaml@1.10.2:
-    resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
-    engines: {node: '>= 6'}
-
-  yaml@2.4.5:
-    resolution: {integrity: sha512-aBx2bnqDzVOyNKfsysjA2ms5ZlnjSAW2eG3/L5G/CSujfjLJTJsEw1bGw8kCf04KodQWk1pxlGnZ56CRxiawmg==}
-    engines: {node: '>= 14'}
-    hasBin: true
-
-  yauzl@2.10.0:
-    resolution: {integrity: sha512-p4a9I6X6nu6IhoGmBqAcbJy1mlC4j27vEPZX9F4L4/vZT3Lyq1VkFHw/V/PUcB9Buo+DG3iHkT0x3Qya58zc3g==}
-
-  yocto-queue@0.1.0:
-    resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
-    engines: {node: '>=10'}
-
-snapshots:
-
-  '@alloc/quick-lru@5.2.0': {}
-
-  '@antfu/install-pkg@0.1.1':
-    dependencies:
-      execa: 5.1.1
-      find-up: 5.0.0
-
-  '@antfu/utils@0.7.8': {}
-
-  '@babel/code-frame@7.24.7':
-    dependencies:
-      '@babel/highlight': 7.24.7
-      picocolors: 1.0.1
-
-  '@babel/generator@7.24.7':
-    dependencies:
-      '@babel/types': 7.24.7
-      '@jridgewell/gen-mapping': 0.3.5
-      '@jridgewell/trace-mapping': 0.3.25
-      jsesc: 2.5.2
-
-  '@babel/helper-environment-visitor@7.24.7':
-    dependencies:
-      '@babel/types': 7.24.7
-
-  '@babel/helper-function-name@7.24.7':
-    dependencies:
-      '@babel/template': 7.24.7
-      '@babel/types': 7.24.7
-
-  '@babel/helper-hoist-variables@7.24.7':
-    dependencies:
-      '@babel/types': 7.24.7
-
-  '@babel/helper-module-imports@7.24.7':
-    dependencies:
-      '@babel/traverse': 7.24.7
-      '@babel/types': 7.24.7
-    transitivePeerDependencies:
-      - supports-color
-
-  '@babel/helper-split-export-declaration@7.24.7':
-    dependencies:
-      '@babel/types': 7.24.7
-
-  '@babel/helper-string-parser@7.24.7': {}
-
-  '@babel/helper-validator-identifier@7.24.7': {}
-
-  '@babel/highlight@7.24.7':
-    dependencies:
-      '@babel/helper-validator-identifier': 7.24.7
-      chalk: 2.4.2
-      js-tokens: 4.0.0
-      picocolors: 1.0.1
-
-  '@babel/parser@7.24.7':
-    dependencies:
-      '@babel/types': 7.24.7
-
-  '@babel/runtime@7.24.7':
-    dependencies:
-      regenerator-runtime: 0.14.1
-
-  '@babel/template@7.24.7':
-    dependencies:
-      '@babel/code-frame': 7.24.7
-      '@babel/parser': 7.24.7
-      '@babel/types': 7.24.7
-
-  '@babel/traverse@7.24.7':
-    dependencies:
-      '@babel/code-frame': 7.24.7
-      '@babel/generator': 7.24.7
-      '@babel/helper-environment-visitor': 7.24.7
-      '@babel/helper-function-name': 7.24.7
-      '@babel/helper-hoist-variables': 7.24.7
-      '@babel/helper-split-export-declaration': 7.24.7
-      '@babel/parser': 7.24.7
-      '@babel/types': 7.24.7
-      debug: 4.3.5
-      globals: 11.12.0
-    transitivePeerDependencies:
-      - supports-color
-
-  '@babel/types@7.24.7':
-    dependencies:
-      '@babel/helper-string-parser': 7.24.7
-      '@babel/helper-validator-identifier': 7.24.7
-      to-fast-properties: 2.0.0
-
-  '@csstools/css-parser-algorithms@2.6.3(@csstools/css-tokenizer@2.3.1)':
-    dependencies:
-      '@csstools/css-tokenizer': 2.3.1
-
-  '@csstools/css-tokenizer@2.3.1': {}
-
-  '@csstools/media-query-list-parser@2.1.11(@csstools/css-parser-algorithms@2.6.3(@csstools/css-tokenizer@2.3.1))(@csstools/css-tokenizer@2.3.1)':
-    dependencies:
-      '@csstools/css-parser-algorithms': 2.6.3(@csstools/css-tokenizer@2.3.1)
-      '@csstools/css-tokenizer': 2.3.1
-
-  '@csstools/selector-specificity@3.1.1(postcss-selector-parser@6.1.0)':
-    dependencies:
-      postcss-selector-parser: 6.1.0
-
-  '@dual-bundle/import-meta-resolve@4.1.0': {}
-
-  '@emotion/babel-plugin@11.11.0':
-    dependencies:
-      '@babel/helper-module-imports': 7.24.7
-      '@babel/runtime': 7.24.7
-      '@emotion/hash': 0.9.1
-      '@emotion/memoize': 0.8.1
-      '@emotion/serialize': 1.1.4
-      babel-plugin-macros: 3.1.0
-      convert-source-map: 1.9.0
-      escape-string-regexp: 4.0.0
-      find-root: 1.1.0
-      source-map: 0.5.7
-      stylis: 4.2.0
-    transitivePeerDependencies:
-      - supports-color
-
-  '@emotion/cache@11.11.0':
-    dependencies:
-      '@emotion/memoize': 0.8.1
-      '@emotion/sheet': 1.2.2
-      '@emotion/utils': 1.2.1
-      '@emotion/weak-memoize': 0.3.1
-      stylis: 4.2.0
-
-  '@emotion/hash@0.9.1': {}
-
-  '@emotion/is-prop-valid@1.2.2':
-    dependencies:
-      '@emotion/memoize': 0.8.1
-
-  '@emotion/memoize@0.8.1': {}
-
-  '@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1)':
-    dependencies:
-      '@babel/runtime': 7.24.7
-      '@emotion/babel-plugin': 11.11.0
-      '@emotion/cache': 11.11.0
-      '@emotion/serialize': 1.1.4
-      '@emotion/use-insertion-effect-with-fallbacks': 1.0.1(react@18.3.1)
-      '@emotion/utils': 1.2.1
-      '@emotion/weak-memoize': 0.3.1
-      hoist-non-react-statics: 3.3.2
-      react: 18.3.1
-    optionalDependencies:
-      '@types/react': 18.3.3
-    transitivePeerDependencies:
-      - supports-color
-
-  '@emotion/serialize@1.1.4':
-    dependencies:
-      '@emotion/hash': 0.9.1
-      '@emotion/memoize': 0.8.1
-      '@emotion/unitless': 0.8.1
-      '@emotion/utils': 1.2.1
-      csstype: 3.1.3
-
-  '@emotion/sheet@1.2.2': {}
-
-  '@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)':
-    dependencies:
-      '@babel/runtime': 7.24.7
-      '@emotion/babel-plugin': 11.11.0
-      '@emotion/is-prop-valid': 1.2.2
-      '@emotion/react': 11.11.4(@types/react@18.3.3)(react@18.3.1)
-      '@emotion/serialize': 1.1.4
-      '@emotion/use-insertion-effect-with-fallbacks': 1.0.1(react@18.3.1)
-      '@emotion/utils': 1.2.1
-      react: 18.3.1
-    optionalDependencies:
-      '@types/react': 18.3.3
-    transitivePeerDependencies:
-      - supports-color
-
-  '@emotion/unitless@0.8.1': {}
-
-  '@emotion/use-insertion-effect-with-fallbacks@1.0.1(react@18.3.1)':
-    dependencies:
-      react: 18.3.1
-
-  '@emotion/utils@1.2.1': {}
-
-  '@emotion/weak-memoize@0.3.1': {}
-
-  '@esbuild/aix-ppc64@0.21.5':
-    optional: true
-
-  '@esbuild/android-arm64@0.21.5':
-    optional: true
-
-  '@esbuild/android-arm@0.21.5':
-    optional: true
-
-  '@esbuild/android-x64@0.21.5':
-    optional: true
-
-  '@esbuild/darwin-arm64@0.21.5':
-    optional: true
-
-  '@esbuild/darwin-x64@0.21.5':
-    optional: true
-
-  '@esbuild/freebsd-arm64@0.21.5':
-    optional: true
-
-  '@esbuild/freebsd-x64@0.21.5':
-    optional: true
-
-  '@esbuild/linux-arm64@0.21.5':
-    optional: true
-
-  '@esbuild/linux-arm@0.21.5':
-    optional: true
-
-  '@esbuild/linux-ia32@0.21.5':
-    optional: true
-
-  '@esbuild/linux-loong64@0.21.5':
-    optional: true
-
-  '@esbuild/linux-mips64el@0.21.5':
-    optional: true
-
-  '@esbuild/linux-ppc64@0.21.5':
-    optional: true
-
-  '@esbuild/linux-riscv64@0.21.5':
-    optional: true
-
-  '@esbuild/linux-s390x@0.21.5':
-    optional: true
-
-  '@esbuild/linux-x64@0.21.5':
-    optional: true
-
-  '@esbuild/netbsd-x64@0.21.5':
-    optional: true
-
-  '@esbuild/openbsd-x64@0.21.5':
-    optional: true
-
-  '@esbuild/sunos-x64@0.21.5':
-    optional: true
-
-  '@esbuild/win32-arm64@0.21.5':
-    optional: true
-
-  '@esbuild/win32-ia32@0.21.5':
-    optional: true
-
-  '@esbuild/win32-x64@0.21.5':
-    optional: true
-
-  '@eslint-community/eslint-utils@4.4.0(eslint@8.57.0)':
-    dependencies:
-      eslint: 8.57.0
-      eslint-visitor-keys: 3.4.3
-
-  '@eslint-community/regexpp@4.10.1': {}
-
-  '@eslint/eslintrc@2.1.4':
-    dependencies:
-      ajv: 6.12.6
-      debug: 4.3.5
-      espree: 9.6.1
-      globals: 13.24.0
-      ignore: 5.3.1
-      import-fresh: 3.3.0
-      js-yaml: 4.1.0
-      minimatch: 3.1.2
-      strip-json-comments: 3.1.1
-    transitivePeerDependencies:
-      - supports-color
-
-  '@eslint/js@8.57.0': {}
-
-  '@floating-ui/core@1.6.2':
-    dependencies:
-      '@floating-ui/utils': 0.2.2
-
-  '@floating-ui/dom@1.6.5':
-    dependencies:
-      '@floating-ui/core': 1.6.2
-      '@floating-ui/utils': 0.2.2
-
-  '@floating-ui/react-dom@2.1.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
-    dependencies:
-      '@floating-ui/dom': 1.6.5
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-
-  '@floating-ui/utils@0.2.2': {}
-
-  '@humanwhocodes/config-array@0.11.14':
-    dependencies:
-      '@humanwhocodes/object-schema': 2.0.3
-      debug: 4.3.5
-      minimatch: 3.1.2
-    transitivePeerDependencies:
-      - supports-color
-
-  '@humanwhocodes/module-importer@1.0.1': {}
-
-  '@humanwhocodes/object-schema@2.0.3': {}
-
-  '@iconify/json@2.2.219':
-    dependencies:
-      '@iconify/types': 2.0.0
-      pathe: 1.1.2
-
-  '@iconify/tools@4.0.4':
-    dependencies:
-      '@iconify/types': 2.0.0
-      '@iconify/utils': 2.1.24
-      '@types/tar': 6.1.13
-      axios: 1.7.2
-      cheerio: 1.0.0-rc.12
-      extract-zip: 2.0.1
-      local-pkg: 0.5.0
-      pathe: 1.1.2
-      svgo: 3.3.2
-      tar: 6.2.1
-    transitivePeerDependencies:
-      - debug
-      - supports-color
-
-  '@iconify/types@2.0.0': {}
-
-  '@iconify/utils@2.1.24':
-    dependencies:
-      '@antfu/install-pkg': 0.1.1
-      '@antfu/utils': 0.7.8
-      '@iconify/types': 2.0.0
-      debug: 4.3.5
-      kolorist: 1.8.0
-      local-pkg: 0.5.0
-      mlly: 1.7.1
-    transitivePeerDependencies:
-      - supports-color
-
-  '@isaacs/cliui@8.0.2':
-    dependencies:
-      string-width: 5.1.2
-      string-width-cjs: string-width@4.2.3
-      strip-ansi: 7.1.0
-      strip-ansi-cjs: strip-ansi@6.0.1
-      wrap-ansi: 8.1.0
-      wrap-ansi-cjs: wrap-ansi@7.0.0
-
-  '@jridgewell/gen-mapping@0.3.5':
-    dependencies:
-      '@jridgewell/set-array': 1.2.1
-      '@jridgewell/sourcemap-codec': 1.4.15
-      '@jridgewell/trace-mapping': 0.3.25
-
-  '@jridgewell/resolve-uri@3.1.2': {}
-
-  '@jridgewell/set-array@1.2.1': {}
-
-  '@jridgewell/sourcemap-codec@1.4.15': {}
-
-  '@jridgewell/trace-mapping@0.3.25':
-    dependencies:
-      '@jridgewell/resolve-uri': 3.1.2
-      '@jridgewell/sourcemap-codec': 1.4.15
-
-  '@mui/base@5.0.0-beta.40(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
-    dependencies:
-      '@babel/runtime': 7.24.7
-      '@floating-ui/react-dom': 2.1.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@mui/types': 7.2.14(@types/react@18.3.3)
-      '@mui/utils': 5.15.20(@types/react@18.3.3)(react@18.3.1)
-      '@popperjs/core': 2.11.8
-      clsx: 2.1.1
-      prop-types: 15.8.1
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-    optionalDependencies:
-      '@types/react': 18.3.3
-
-  '@mui/core-downloads-tracker@5.15.20': {}
-
-  '@mui/lab@5.0.0-alpha.170(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@5.15.20(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
-    dependencies:
-      '@babel/runtime': 7.24.7
-      '@mui/base': 5.0.0-beta.40(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@mui/material': 5.15.20(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@mui/system': 5.15.20(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)
-      '@mui/types': 7.2.14(@types/react@18.3.3)
-      '@mui/utils': 5.15.20(@types/react@18.3.3)(react@18.3.1)
-      clsx: 2.1.1
-      prop-types: 15.8.1
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-    optionalDependencies:
-      '@emotion/react': 11.11.4(@types/react@18.3.3)(react@18.3.1)
-      '@emotion/styled': 11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)
-      '@types/react': 18.3.3
-
-  '@mui/material-nextjs@5.15.11(@emotion/cache@11.11.0)(@mui/material@5.15.20(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(next@14.2.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)':
-    dependencies:
-      '@babel/runtime': 7.24.7
-      '@mui/material': 5.15.20(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      next: 14.2.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-    optionalDependencies:
-      '@emotion/cache': 11.11.0
-      '@types/react': 18.3.3
-
-  '@mui/material@5.15.20(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
-    dependencies:
-      '@babel/runtime': 7.24.7
-      '@mui/base': 5.0.0-beta.40(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@mui/core-downloads-tracker': 5.15.20
-      '@mui/system': 5.15.20(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)
-      '@mui/types': 7.2.14(@types/react@18.3.3)
-      '@mui/utils': 5.15.20(@types/react@18.3.3)(react@18.3.1)
-      '@types/react-transition-group': 4.4.10
-      clsx: 2.1.1
-      csstype: 3.1.3
-      prop-types: 15.8.1
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-      react-is: 18.3.1
-      react-transition-group: 4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-    optionalDependencies:
-      '@emotion/react': 11.11.4(@types/react@18.3.3)(react@18.3.1)
-      '@emotion/styled': 11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)
-      '@types/react': 18.3.3
-
-  '@mui/private-theming@5.15.20(@types/react@18.3.3)(react@18.3.1)':
-    dependencies:
-      '@babel/runtime': 7.24.7
-      '@mui/utils': 5.15.20(@types/react@18.3.3)(react@18.3.1)
-      prop-types: 15.8.1
-      react: 18.3.1
-    optionalDependencies:
-      '@types/react': 18.3.3
-
-  '@mui/styled-engine@5.15.14(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(react@18.3.1)':
-    dependencies:
-      '@babel/runtime': 7.24.7
-      '@emotion/cache': 11.11.0
-      csstype: 3.1.3
-      prop-types: 15.8.1
-      react: 18.3.1
-    optionalDependencies:
-      '@emotion/react': 11.11.4(@types/react@18.3.3)(react@18.3.1)
-      '@emotion/styled': 11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)
-
-  '@mui/system@5.15.20(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)':
-    dependencies:
-      '@babel/runtime': 7.24.7
-      '@mui/private-theming': 5.15.20(@types/react@18.3.3)(react@18.3.1)
-      '@mui/styled-engine': 5.15.14(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(react@18.3.1)
-      '@mui/types': 7.2.14(@types/react@18.3.3)
-      '@mui/utils': 5.15.20(@types/react@18.3.3)(react@18.3.1)
-      clsx: 2.1.1
-      csstype: 3.1.3
-      prop-types: 15.8.1
-      react: 18.3.1
-    optionalDependencies:
-      '@emotion/react': 11.11.4(@types/react@18.3.3)(react@18.3.1)
-      '@emotion/styled': 11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)
-      '@types/react': 18.3.3
-
-  '@mui/types@7.2.14(@types/react@18.3.3)':
-    optionalDependencies:
-      '@types/react': 18.3.3
-
-  '@mui/utils@5.15.20(@types/react@18.3.3)(react@18.3.1)':
-    dependencies:
-      '@babel/runtime': 7.24.7
-      '@types/prop-types': 15.7.12
-      prop-types: 15.8.1
-      react: 18.3.1
-      react-is: 18.3.1
-    optionalDependencies:
-      '@types/react': 18.3.3
-
-  '@next/env@14.2.4': {}
-
-  '@next/eslint-plugin-next@14.2.4':
-    dependencies:
-      glob: 10.3.10
-
-  '@next/swc-darwin-arm64@14.2.4':
-    optional: true
-
-  '@next/swc-darwin-x64@14.2.4':
-    optional: true
-
-  '@next/swc-linux-arm64-gnu@14.2.4':
-    optional: true
-
-  '@next/swc-linux-arm64-musl@14.2.4':
-    optional: true
-
-  '@next/swc-linux-x64-gnu@14.2.4':
-    optional: true
-
-  '@next/swc-linux-x64-musl@14.2.4':
-    optional: true
-
-  '@next/swc-win32-arm64-msvc@14.2.4':
-    optional: true
-
-  '@next/swc-win32-ia32-msvc@14.2.4':
-    optional: true
-
-  '@next/swc-win32-x64-msvc@14.2.4':
-    optional: true
-
-  '@nodelib/fs.scandir@2.1.5':
-    dependencies:
-      '@nodelib/fs.stat': 2.0.5
-      run-parallel: 1.2.0
-
-  '@nodelib/fs.stat@2.0.5': {}
-
-  '@nodelib/fs.walk@1.2.8':
-    dependencies:
-      '@nodelib/fs.scandir': 2.1.5
-      fastq: 1.17.1
-
-  '@pkgjs/parseargs@0.11.0':
-    optional: true
-
-  '@popperjs/core@2.11.8': {}
-
-  '@rushstack/eslint-patch@1.10.3': {}
-
-  '@swc/counter@0.1.3': {}
-
-  '@swc/helpers@0.5.5':
-    dependencies:
-      '@swc/counter': 0.1.3
-      tslib: 2.6.3
-
-  '@trysound/sax@0.2.0': {}
-
-  '@types/js-cookie@2.2.7': {}
-
-  '@types/json5@0.0.29': {}
-
-  '@types/node@20.14.2':
-    dependencies:
-      undici-types: 5.26.5
-
-  '@types/parse-json@4.0.2': {}
-
-  '@types/prop-types@15.7.12': {}
-
-  '@types/react-dom@18.3.0':
-    dependencies:
-      '@types/react': 18.3.3
-
-  '@types/react-transition-group@4.4.10':
-    dependencies:
-      '@types/react': 18.3.3
-
-  '@types/react@18.3.3':
-    dependencies:
-      '@types/prop-types': 15.7.12
-      csstype: 3.1.3
-
-  '@types/tar@6.1.13':
-    dependencies:
-      '@types/node': 20.14.2
-      minipass: 4.2.8
-
-  '@types/yauzl@2.10.3':
-    dependencies:
-      '@types/node': 20.14.2
-    optional: true
-
-  '@typescript-eslint/eslint-plugin@7.13.0(@typescript-eslint/parser@7.13.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(typescript@5.4.5)':
-    dependencies:
-      '@eslint-community/regexpp': 4.10.1
-      '@typescript-eslint/parser': 7.13.0(eslint@8.57.0)(typescript@5.4.5)
-      '@typescript-eslint/scope-manager': 7.13.0
-      '@typescript-eslint/type-utils': 7.13.0(eslint@8.57.0)(typescript@5.4.5)
-      '@typescript-eslint/utils': 7.13.0(eslint@8.57.0)(typescript@5.4.5)
-      '@typescript-eslint/visitor-keys': 7.13.0
-      eslint: 8.57.0
-      graphemer: 1.4.0
-      ignore: 5.3.1
-      natural-compare: 1.4.0
-      ts-api-utils: 1.3.0(typescript@5.4.5)
-    optionalDependencies:
-      typescript: 5.4.5
-    transitivePeerDependencies:
-      - supports-color
-
-  '@typescript-eslint/parser@7.13.0(eslint@8.57.0)(typescript@5.4.5)':
-    dependencies:
-      '@typescript-eslint/scope-manager': 7.13.0
-      '@typescript-eslint/types': 7.13.0
-      '@typescript-eslint/typescript-estree': 7.13.0(typescript@5.4.5)
-      '@typescript-eslint/visitor-keys': 7.13.0
-      debug: 4.3.5
-      eslint: 8.57.0
-    optionalDependencies:
-      typescript: 5.4.5
-    transitivePeerDependencies:
-      - supports-color
-
-  '@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.5)':
-    dependencies:
-      '@typescript-eslint/scope-manager': 7.2.0
-      '@typescript-eslint/types': 7.2.0
-      '@typescript-eslint/typescript-estree': 7.2.0(typescript@5.4.5)
-      '@typescript-eslint/visitor-keys': 7.2.0
-      debug: 4.3.5
-      eslint: 8.57.0
-    optionalDependencies:
-      typescript: 5.4.5
-    transitivePeerDependencies:
-      - supports-color
-
-  '@typescript-eslint/scope-manager@7.13.0':
-    dependencies:
-      '@typescript-eslint/types': 7.13.0
-      '@typescript-eslint/visitor-keys': 7.13.0
-
-  '@typescript-eslint/scope-manager@7.2.0':
-    dependencies:
-      '@typescript-eslint/types': 7.2.0
-      '@typescript-eslint/visitor-keys': 7.2.0
-
-  '@typescript-eslint/type-utils@7.13.0(eslint@8.57.0)(typescript@5.4.5)':
-    dependencies:
-      '@typescript-eslint/typescript-estree': 7.13.0(typescript@5.4.5)
-      '@typescript-eslint/utils': 7.13.0(eslint@8.57.0)(typescript@5.4.5)
-      debug: 4.3.5
-      eslint: 8.57.0
-      ts-api-utils: 1.3.0(typescript@5.4.5)
-    optionalDependencies:
-      typescript: 5.4.5
-    transitivePeerDependencies:
-      - supports-color
-
-  '@typescript-eslint/types@7.13.0': {}
-
-  '@typescript-eslint/types@7.2.0': {}
-
-  '@typescript-eslint/typescript-estree@7.13.0(typescript@5.4.5)':
-    dependencies:
-      '@typescript-eslint/types': 7.13.0
-      '@typescript-eslint/visitor-keys': 7.13.0
-      debug: 4.3.5
-      globby: 11.1.0
-      is-glob: 4.0.3
-      minimatch: 9.0.4
-      semver: 7.6.2
-      ts-api-utils: 1.3.0(typescript@5.4.5)
-    optionalDependencies:
-      typescript: 5.4.5
-    transitivePeerDependencies:
-      - supports-color
-
-  '@typescript-eslint/typescript-estree@7.2.0(typescript@5.4.5)':
-    dependencies:
-      '@typescript-eslint/types': 7.2.0
-      '@typescript-eslint/visitor-keys': 7.2.0
-      debug: 4.3.5
-      globby: 11.1.0
-      is-glob: 4.0.3
-      minimatch: 9.0.3
-      semver: 7.6.2
-      ts-api-utils: 1.3.0(typescript@5.4.5)
-    optionalDependencies:
-      typescript: 5.4.5
-    transitivePeerDependencies:
-      - supports-color
-
-  '@typescript-eslint/utils@7.13.0(eslint@8.57.0)(typescript@5.4.5)':
-    dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@8.57.0)
-      '@typescript-eslint/scope-manager': 7.13.0
-      '@typescript-eslint/types': 7.13.0
-      '@typescript-eslint/typescript-estree': 7.13.0(typescript@5.4.5)
-      eslint: 8.57.0
-    transitivePeerDependencies:
-      - supports-color
-      - typescript
-
-  '@typescript-eslint/visitor-keys@7.13.0':
-    dependencies:
-      '@typescript-eslint/types': 7.13.0
-      eslint-visitor-keys: 3.4.3
-
-  '@typescript-eslint/visitor-keys@7.2.0':
-    dependencies:
-      '@typescript-eslint/types': 7.2.0
-      eslint-visitor-keys: 3.4.3
-
-  '@ungap/structured-clone@1.2.0': {}
-
-  '@xobotyi/scrollbar-width@1.9.5': {}
-
-  '@yr/monotone-cubic-spline@1.0.3': {}
-
-  acorn-jsx@5.3.2(acorn@8.12.0):
-    dependencies:
-      acorn: 8.12.0
-
-  acorn@8.12.0: {}
-
-  ajv@6.12.6:
-    dependencies:
-      fast-deep-equal: 3.1.3
-      fast-json-stable-stringify: 2.1.0
-      json-schema-traverse: 0.4.1
-      uri-js: 4.4.1
-
-  ajv@8.16.0:
-    dependencies:
-      fast-deep-equal: 3.1.3
-      json-schema-traverse: 1.0.0
-      require-from-string: 2.0.2
-      uri-js: 4.4.1
-
-  ansi-regex@5.0.1: {}
-
-  ansi-regex@6.0.1: {}
-
-  ansi-styles@3.2.1:
-    dependencies:
-      color-convert: 1.9.3
-
-  ansi-styles@4.3.0:
-    dependencies:
-      color-convert: 2.0.1
-
-  ansi-styles@6.2.1: {}
-
-  any-promise@1.3.0: {}
-
-  anymatch@3.1.3:
-    dependencies:
-      normalize-path: 3.0.0
-      picomatch: 2.3.1
-
-  apexcharts@3.49.1:
-    dependencies:
-      '@yr/monotone-cubic-spline': 1.0.3
-      svg.draggable.js: 2.2.2
-      svg.easing.js: 2.0.0
-      svg.filter.js: 2.0.2
-      svg.pathmorphing.js: 0.1.3
-      svg.resize.js: 1.4.3
-      svg.select.js: 3.0.1
-
-  arg@5.0.2: {}
-
-  argparse@2.0.1: {}
-
-  aria-query@5.3.0:
-    dependencies:
-      dequal: 2.0.3
-
-  array-buffer-byte-length@1.0.1:
-    dependencies:
-      call-bind: 1.0.7
-      is-array-buffer: 3.0.4
-
-  array-includes@3.1.8:
-    dependencies:
-      call-bind: 1.0.7
-      define-properties: 1.2.1
-      es-abstract: 1.23.3
-      es-object-atoms: 1.0.0
-      get-intrinsic: 1.2.4
-      is-string: 1.0.7
-
-  array-union@2.1.0: {}
-
-  array.prototype.findlast@1.2.5:
-    dependencies:
-      call-bind: 1.0.7
-      define-properties: 1.2.1
-      es-abstract: 1.23.3
-      es-errors: 1.3.0
-      es-object-atoms: 1.0.0
-      es-shim-unscopables: 1.0.2
-
-  array.prototype.findlastindex@1.2.5:
-    dependencies:
-      call-bind: 1.0.7
-      define-properties: 1.2.1
-      es-abstract: 1.23.3
-      es-errors: 1.3.0
-      es-object-atoms: 1.0.0
-      es-shim-unscopables: 1.0.2
-
-  array.prototype.flat@1.3.2:
-    dependencies:
-      call-bind: 1.0.7
-      define-properties: 1.2.1
-      es-abstract: 1.23.3
-      es-shim-unscopables: 1.0.2
-
-  array.prototype.flatmap@1.3.2:
-    dependencies:
-      call-bind: 1.0.7
-      define-properties: 1.2.1
-      es-abstract: 1.23.3
-      es-shim-unscopables: 1.0.2
-
-  array.prototype.toreversed@1.1.2:
-    dependencies:
-      call-bind: 1.0.7
-      define-properties: 1.2.1
-      es-abstract: 1.23.3
-      es-shim-unscopables: 1.0.2
-
-  array.prototype.tosorted@1.1.4:
-    dependencies:
-      call-bind: 1.0.7
-      define-properties: 1.2.1
-      es-abstract: 1.23.3
-      es-errors: 1.3.0
-      es-shim-unscopables: 1.0.2
-
-  arraybuffer.prototype.slice@1.0.3:
-    dependencies:
-      array-buffer-byte-length: 1.0.1
-      call-bind: 1.0.7
-      define-properties: 1.2.1
-      es-abstract: 1.23.3
-      es-errors: 1.3.0
-      get-intrinsic: 1.2.4
-      is-array-buffer: 3.0.4
-      is-shared-array-buffer: 1.0.3
-
-  ast-types-flow@0.0.8: {}
-
-  astral-regex@2.0.0: {}
-
-  asynckit@0.4.0: {}
-
-  autoprefixer@10.4.19(postcss@8.4.38):
-    dependencies:
-      browserslist: 4.23.1
-      caniuse-lite: 1.0.30001636
-      fraction.js: 4.3.7
-      normalize-range: 0.1.2
-      picocolors: 1.0.1
-      postcss: 8.4.38
-      postcss-value-parser: 4.2.0
-
-  available-typed-arrays@1.0.7:
-    dependencies:
-      possible-typed-array-names: 1.0.0
-
-  axe-core@4.7.0: {}
-
-  axios@1.7.2:
-    dependencies:
-      follow-redirects: 1.15.6
-      form-data: 4.0.0
-      proxy-from-env: 1.1.0
-    transitivePeerDependencies:
-      - debug
-
-  axobject-query@3.2.1:
-    dependencies:
-      dequal: 2.0.3
-
-  babel-plugin-macros@3.1.0:
-    dependencies:
-      '@babel/runtime': 7.24.7
-      cosmiconfig: 7.1.0
-      resolve: 1.22.8
-
-  balanced-match@1.0.2: {}
-
-  balanced-match@2.0.0: {}
-
-  binary-extensions@2.3.0: {}
-
-  boolbase@1.0.0: {}
-
-  brace-expansion@1.1.11:
-    dependencies:
-      balanced-match: 1.0.2
-      concat-map: 0.0.1
-
-  brace-expansion@2.0.1:
-    dependencies:
-      balanced-match: 1.0.2
-
-  braces@3.0.3:
-    dependencies:
-      fill-range: 7.1.1
-
-  browserslist@4.23.1:
-    dependencies:
-      caniuse-lite: 1.0.30001636
-      electron-to-chromium: 1.4.803
-      node-releases: 2.0.14
-      update-browserslist-db: 1.0.16(browserslist@4.23.1)
-
-  buffer-crc32@0.2.13: {}
-
-  busboy@1.6.0:
-    dependencies:
-      streamsearch: 1.1.0
-
-  call-bind@1.0.7:
-    dependencies:
-      es-define-property: 1.0.0
-      es-errors: 1.3.0
-      function-bind: 1.1.2
-      get-intrinsic: 1.2.4
-      set-function-length: 1.2.2
-
-  callsites@3.1.0: {}
-
-  camelcase-css@2.0.1: {}
-
-  caniuse-lite@1.0.30001636: {}
-
-  chalk@2.4.2:
-    dependencies:
-      ansi-styles: 3.2.1
-      escape-string-regexp: 1.0.5
-      supports-color: 5.5.0
-
-  chalk@4.1.2:
-    dependencies:
-      ansi-styles: 4.3.0
-      supports-color: 7.2.0
-
-  cheerio-select@2.1.0:
-    dependencies:
-      boolbase: 1.0.0
-      css-select: 5.1.0
-      css-what: 6.1.0
-      domelementtype: 2.3.0
-      domhandler: 5.0.3
-      domutils: 3.1.0
-
-  cheerio@1.0.0-rc.12:
-    dependencies:
-      cheerio-select: 2.1.0
-      dom-serializer: 2.0.0
-      domhandler: 5.0.3
-      domutils: 3.1.0
-      htmlparser2: 8.0.2
-      parse5: 7.1.2
-      parse5-htmlparser2-tree-adapter: 7.0.0
-
-  chokidar@3.6.0:
-    dependencies:
-      anymatch: 3.1.3
-      braces: 3.0.3
-      glob-parent: 5.1.2
-      is-binary-path: 2.1.0
-      is-glob: 4.0.3
-      normalize-path: 3.0.0
-      readdirp: 3.6.0
-    optionalDependencies:
-      fsevents: 2.3.3
-
-  chownr@2.0.0: {}
-
-  classnames@2.5.1: {}
-
-  client-only@0.0.1: {}
-
-  clsx@2.1.1: {}
-
-  color-convert@1.9.3:
-    dependencies:
-      color-name: 1.1.3
-
-  color-convert@2.0.1:
-    dependencies:
-      color-name: 1.1.4
-
-  color-name@1.1.3: {}
-
-  color-name@1.1.4: {}
-
-  colord@2.9.3: {}
-
-  combined-stream@1.0.8:
-    dependencies:
-      delayed-stream: 1.0.0
-
-  commander@4.1.1: {}
-
-  commander@7.2.0: {}
-
-  concat-map@0.0.1: {}
-
-  confbox@0.1.7: {}
-
-  convert-source-map@1.9.0: {}
-
-  copy-to-clipboard@3.3.3:
-    dependencies:
-      toggle-selection: 1.0.6
-
-  cosmiconfig@7.1.0:
-    dependencies:
-      '@types/parse-json': 4.0.2
-      import-fresh: 3.3.0
-      parse-json: 5.2.0
-      path-type: 4.0.0
-      yaml: 1.10.2
-
-  cosmiconfig@9.0.0(typescript@5.4.5):
-    dependencies:
-      env-paths: 2.2.1
-      import-fresh: 3.3.0
-      js-yaml: 4.1.0
-      parse-json: 5.2.0
-    optionalDependencies:
-      typescript: 5.4.5
-
-  cross-spawn@7.0.3:
-    dependencies:
-      path-key: 3.1.1
-      shebang-command: 2.0.0
-      which: 2.0.2
-
-  css-functions-list@3.2.2: {}
-
-  css-in-js-utils@3.1.0:
-    dependencies:
-      hyphenate-style-name: 1.0.5
-
-  css-select@5.1.0:
-    dependencies:
-      boolbase: 1.0.0
-      css-what: 6.1.0
-      domhandler: 5.0.3
-      domutils: 3.1.0
-      nth-check: 2.1.1
-
-  css-tree@1.1.3:
-    dependencies:
-      mdn-data: 2.0.14
-      source-map: 0.6.1
-
-  css-tree@2.2.1:
-    dependencies:
-      mdn-data: 2.0.28
-      source-map-js: 1.2.0
-
-  css-tree@2.3.1:
-    dependencies:
-      mdn-data: 2.0.30
-      source-map-js: 1.2.0
-
-  css-what@6.1.0: {}
-
-  cssesc@3.0.0: {}
-
-  csso@5.0.5:
-    dependencies:
-      css-tree: 2.2.1
-
-  csstype@3.1.3: {}
-
-  damerau-levenshtein@1.0.8: {}
-
-  data-view-buffer@1.0.1:
-    dependencies:
-      call-bind: 1.0.7
-      es-errors: 1.3.0
-      is-data-view: 1.0.1
-
-  data-view-byte-length@1.0.1:
-    dependencies:
-      call-bind: 1.0.7
-      es-errors: 1.3.0
-      is-data-view: 1.0.1
-
-  data-view-byte-offset@1.0.0:
-    dependencies:
-      call-bind: 1.0.7
-      es-errors: 1.3.0
-      is-data-view: 1.0.1
-
-  debug@3.2.7:
-    dependencies:
-      ms: 2.1.3
-
-  debug@4.3.5:
-    dependencies:
-      ms: 2.1.2
-
-  deep-is@0.1.4: {}
-
-  define-data-property@1.1.4:
-    dependencies:
-      es-define-property: 1.0.0
-      es-errors: 1.3.0
-      gopd: 1.0.1
-
-  define-properties@1.2.1:
-    dependencies:
-      define-data-property: 1.1.4
-      has-property-descriptors: 1.0.2
-      object-keys: 1.1.1
-
-  delayed-stream@1.0.0: {}
-
-  dequal@2.0.3: {}
-
-  didyoumean@1.2.2: {}
-
-  dir-glob@3.0.1:
-    dependencies:
-      path-type: 4.0.0
-
-  dlv@1.1.3: {}
-
-  doctrine@2.1.0:
-    dependencies:
-      esutils: 2.0.3
-
-  doctrine@3.0.0:
-    dependencies:
-      esutils: 2.0.3
-
-  dom-helpers@5.2.1:
-    dependencies:
-      '@babel/runtime': 7.24.7
-      csstype: 3.1.3
-
-  dom-serializer@2.0.0:
-    dependencies:
-      domelementtype: 2.3.0
-      domhandler: 5.0.3
-      entities: 4.5.0
-
-  domelementtype@2.3.0: {}
-
-  domhandler@5.0.3:
-    dependencies:
-      domelementtype: 2.3.0
-
-  domutils@3.1.0:
-    dependencies:
-      dom-serializer: 2.0.0
-      domelementtype: 2.3.0
-      domhandler: 5.0.3
-
-  eastasianwidth@0.2.0: {}
-
-  electron-to-chromium@1.4.803: {}
-
-  emoji-regex@8.0.0: {}
-
-  emoji-regex@9.2.2: {}
-
-  end-of-stream@1.4.4:
-    dependencies:
-      once: 1.4.0
-
-  enhanced-resolve@5.17.0:
-    dependencies:
-      graceful-fs: 4.2.11
-      tapable: 2.2.1
-
-  entities@4.5.0: {}
-
-  env-paths@2.2.1: {}
-
-  error-ex@1.3.2:
-    dependencies:
-      is-arrayish: 0.2.1
-
-  error-stack-parser@2.1.4:
-    dependencies:
-      stackframe: 1.3.4
-
-  es-abstract@1.23.3:
-    dependencies:
-      array-buffer-byte-length: 1.0.1
-      arraybuffer.prototype.slice: 1.0.3
-      available-typed-arrays: 1.0.7
-      call-bind: 1.0.7
-      data-view-buffer: 1.0.1
-      data-view-byte-length: 1.0.1
-      data-view-byte-offset: 1.0.0
-      es-define-property: 1.0.0
-      es-errors: 1.3.0
-      es-object-atoms: 1.0.0
-      es-set-tostringtag: 2.0.3
-      es-to-primitive: 1.2.1
-      function.prototype.name: 1.1.6
-      get-intrinsic: 1.2.4
-      get-symbol-description: 1.0.2
-      globalthis: 1.0.4
-      gopd: 1.0.1
-      has-property-descriptors: 1.0.2
-      has-proto: 1.0.3
-      has-symbols: 1.0.3
-      hasown: 2.0.2
-      internal-slot: 1.0.7
-      is-array-buffer: 3.0.4
-      is-callable: 1.2.7
-      is-data-view: 1.0.1
-      is-negative-zero: 2.0.3
-      is-regex: 1.1.4
-      is-shared-array-buffer: 1.0.3
-      is-string: 1.0.7
-      is-typed-array: 1.1.13
-      is-weakref: 1.0.2
-      object-inspect: 1.13.1
-      object-keys: 1.1.1
-      object.assign: 4.1.5
-      regexp.prototype.flags: 1.5.2
-      safe-array-concat: 1.1.2
-      safe-regex-test: 1.0.3
-      string.prototype.trim: 1.2.9
-      string.prototype.trimend: 1.0.8
-      string.prototype.trimstart: 1.0.8
-      typed-array-buffer: 1.0.2
-      typed-array-byte-length: 1.0.1
-      typed-array-byte-offset: 1.0.2
-      typed-array-length: 1.0.6
-      unbox-primitive: 1.0.2
-      which-typed-array: 1.1.15
-
-  es-define-property@1.0.0:
-    dependencies:
-      get-intrinsic: 1.2.4
-
-  es-errors@1.3.0: {}
-
-  es-iterator-helpers@1.0.19:
-    dependencies:
-      call-bind: 1.0.7
-      define-properties: 1.2.1
-      es-abstract: 1.23.3
-      es-errors: 1.3.0
-      es-set-tostringtag: 2.0.3
-      function-bind: 1.1.2
-      get-intrinsic: 1.2.4
-      globalthis: 1.0.4
-      has-property-descriptors: 1.0.2
-      has-proto: 1.0.3
-      has-symbols: 1.0.3
-      internal-slot: 1.0.7
-      iterator.prototype: 1.1.2
-      safe-array-concat: 1.1.2
-
-  es-object-atoms@1.0.0:
-    dependencies:
-      es-errors: 1.3.0
-
-  es-set-tostringtag@2.0.3:
-    dependencies:
-      get-intrinsic: 1.2.4
-      has-tostringtag: 1.0.2
-      hasown: 2.0.2
-
-  es-shim-unscopables@1.0.2:
-    dependencies:
-      hasown: 2.0.2
-
-  es-to-primitive@1.2.1:
-    dependencies:
-      is-callable: 1.2.7
-      is-date-object: 1.0.5
-      is-symbol: 1.0.4
-
-  esbuild@0.21.5:
-    optionalDependencies:
-      '@esbuild/aix-ppc64': 0.21.5
-      '@esbuild/android-arm': 0.21.5
-      '@esbuild/android-arm64': 0.21.5
-      '@esbuild/android-x64': 0.21.5
-      '@esbuild/darwin-arm64': 0.21.5
-      '@esbuild/darwin-x64': 0.21.5
-      '@esbuild/freebsd-arm64': 0.21.5
-      '@esbuild/freebsd-x64': 0.21.5
-      '@esbuild/linux-arm': 0.21.5
-      '@esbuild/linux-arm64': 0.21.5
-      '@esbuild/linux-ia32': 0.21.5
-      '@esbuild/linux-loong64': 0.21.5
-      '@esbuild/linux-mips64el': 0.21.5
-      '@esbuild/linux-ppc64': 0.21.5
-      '@esbuild/linux-riscv64': 0.21.5
-      '@esbuild/linux-s390x': 0.21.5
-      '@esbuild/linux-x64': 0.21.5
-      '@esbuild/netbsd-x64': 0.21.5
-      '@esbuild/openbsd-x64': 0.21.5
-      '@esbuild/sunos-x64': 0.21.5
-      '@esbuild/win32-arm64': 0.21.5
-      '@esbuild/win32-ia32': 0.21.5
-      '@esbuild/win32-x64': 0.21.5
-
-  escalade@3.1.2: {}
-
-  escape-string-regexp@1.0.5: {}
-
-  escape-string-regexp@4.0.0: {}
-
-  eslint-config-next@14.2.4(eslint@8.57.0)(typescript@5.4.5):
-    dependencies:
-      '@next/eslint-plugin-next': 14.2.4
-      '@rushstack/eslint-patch': 1.10.3
-      '@typescript-eslint/parser': 7.2.0(eslint@8.57.0)(typescript@5.4.5)
-      eslint: 8.57.0
-      eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0)
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)
-      eslint-plugin-jsx-a11y: 6.8.0(eslint@8.57.0)
-      eslint-plugin-react: 7.34.2(eslint@8.57.0)
-      eslint-plugin-react-hooks: 4.6.2(eslint@8.57.0)
-    optionalDependencies:
-      typescript: 5.4.5
-    transitivePeerDependencies:
-      - eslint-import-resolver-webpack
-      - supports-color
-
-  eslint-config-prettier@9.1.0(eslint@8.57.0):
-    dependencies:
-      eslint: 8.57.0
-
-  eslint-import-resolver-node@0.3.9:
-    dependencies:
-      debug: 3.2.7
-      is-core-module: 2.13.1
-      resolve: 1.22.8
-    transitivePeerDependencies:
-      - supports-color
-
-  eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.13.0(eslint@8.57.0)(typescript@5.4.5))(eslint-plugin-import@2.29.1)(eslint@8.57.0):
-    dependencies:
-      debug: 4.3.5
-      enhanced-resolve: 5.17.0
-      eslint: 8.57.0
-      eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.13.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.13.0(eslint@8.57.0)(typescript@5.4.5))(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0)
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.13.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)
-      fast-glob: 3.3.2
-      get-tsconfig: 4.7.5
-      is-core-module: 2.13.1
-      is-glob: 4.0.3
-    transitivePeerDependencies:
-      - '@typescript-eslint/parser'
-      - eslint-import-resolver-node
-      - eslint-import-resolver-webpack
-      - supports-color
-
-  eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0):
-    dependencies:
-      debug: 4.3.5
-      enhanced-resolve: 5.17.0
-      eslint: 8.57.0
-      eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0)
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)
-      fast-glob: 3.3.2
-      get-tsconfig: 4.7.5
-      is-core-module: 2.13.1
-      is-glob: 4.0.3
-    transitivePeerDependencies:
-      - '@typescript-eslint/parser'
-      - eslint-import-resolver-node
-      - eslint-import-resolver-webpack
-      - supports-color
-
-  eslint-module-utils@2.8.1(@typescript-eslint/parser@7.13.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.13.0(eslint@8.57.0)(typescript@5.4.5))(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0):
-    dependencies:
-      debug: 3.2.7
-    optionalDependencies:
-      '@typescript-eslint/parser': 7.13.0(eslint@8.57.0)(typescript@5.4.5)
-      eslint: 8.57.0
-      eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@7.13.0(eslint@8.57.0)(typescript@5.4.5))(eslint-plugin-import@2.29.1)(eslint@8.57.0)
-    transitivePeerDependencies:
-      - supports-color
-
-  eslint-module-utils@2.8.1(@typescript-eslint/parser@7.13.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.13.0(eslint@8.57.0)(typescript@5.4.5))(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0):
-    dependencies:
-      debug: 3.2.7
-    optionalDependencies:
-      '@typescript-eslint/parser': 7.13.0(eslint@8.57.0)(typescript@5.4.5)
-      eslint: 8.57.0
-      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@7.13.0(eslint@8.57.0)(typescript@5.4.5))(eslint-plugin-import@2.29.1)(eslint@8.57.0)
-    transitivePeerDependencies:
-      - supports-color
-
-  eslint-module-utils@2.8.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0):
-    dependencies:
-      debug: 3.2.7
-    optionalDependencies:
-      '@typescript-eslint/parser': 7.2.0(eslint@8.57.0)(typescript@5.4.5)
-      eslint: 8.57.0
-      eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0)
-    transitivePeerDependencies:
-      - supports-color
-
-  eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.13.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0):
-    dependencies:
-      array-includes: 3.1.8
-      array.prototype.findlastindex: 1.2.5
-      array.prototype.flat: 1.3.2
-      array.prototype.flatmap: 1.3.2
-      debug: 3.2.7
-      doctrine: 2.1.0
-      eslint: 8.57.0
-      eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.13.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.13.0(eslint@8.57.0)(typescript@5.4.5))(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0)
-      hasown: 2.0.2
-      is-core-module: 2.13.1
-      is-glob: 4.0.3
-      minimatch: 3.1.2
-      object.fromentries: 2.0.8
-      object.groupby: 1.0.3
-      object.values: 1.2.0
-      semver: 6.3.1
-      tsconfig-paths: 3.15.0
-    optionalDependencies:
-      '@typescript-eslint/parser': 7.13.0(eslint@8.57.0)(typescript@5.4.5)
-    transitivePeerDependencies:
-      - eslint-import-resolver-typescript
-      - eslint-import-resolver-webpack
-      - supports-color
-
-  eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0):
-    dependencies:
-      array-includes: 3.1.8
-      array.prototype.findlastindex: 1.2.5
-      array.prototype.flat: 1.3.2
-      array.prototype.flatmap: 1.3.2
-      debug: 3.2.7
-      doctrine: 2.1.0
-      eslint: 8.57.0
-      eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0)
-      hasown: 2.0.2
-      is-core-module: 2.13.1
-      is-glob: 4.0.3
-      minimatch: 3.1.2
-      object.fromentries: 2.0.8
-      object.groupby: 1.0.3
-      object.values: 1.2.0
-      semver: 6.3.1
-      tsconfig-paths: 3.15.0
-    optionalDependencies:
-      '@typescript-eslint/parser': 7.2.0(eslint@8.57.0)(typescript@5.4.5)
-    transitivePeerDependencies:
-      - eslint-import-resolver-typescript
-      - eslint-import-resolver-webpack
-      - supports-color
-
-  eslint-plugin-jsx-a11y@6.8.0(eslint@8.57.0):
-    dependencies:
-      '@babel/runtime': 7.24.7
-      aria-query: 5.3.0
-      array-includes: 3.1.8
-      array.prototype.flatmap: 1.3.2
-      ast-types-flow: 0.0.8
-      axe-core: 4.7.0
-      axobject-query: 3.2.1
-      damerau-levenshtein: 1.0.8
-      emoji-regex: 9.2.2
-      es-iterator-helpers: 1.0.19
-      eslint: 8.57.0
-      hasown: 2.0.2
-      jsx-ast-utils: 3.3.5
-      language-tags: 1.0.9
-      minimatch: 3.1.2
-      object.entries: 1.1.8
-      object.fromentries: 2.0.8
-
-  eslint-plugin-react-hooks@4.6.2(eslint@8.57.0):
-    dependencies:
-      eslint: 8.57.0
-
-  eslint-plugin-react@7.34.2(eslint@8.57.0):
-    dependencies:
-      array-includes: 3.1.8
-      array.prototype.findlast: 1.2.5
-      array.prototype.flatmap: 1.3.2
-      array.prototype.toreversed: 1.1.2
-      array.prototype.tosorted: 1.1.4
-      doctrine: 2.1.0
-      es-iterator-helpers: 1.0.19
-      eslint: 8.57.0
-      estraverse: 5.3.0
-      jsx-ast-utils: 3.3.5
-      minimatch: 3.1.2
-      object.entries: 1.1.8
-      object.fromentries: 2.0.8
-      object.hasown: 1.1.4
-      object.values: 1.2.0
-      prop-types: 15.8.1
-      resolve: 2.0.0-next.5
-      semver: 6.3.1
-      string.prototype.matchall: 4.0.11
-
-  eslint-scope@7.2.2:
-    dependencies:
-      esrecurse: 4.3.0
-      estraverse: 5.3.0
-
-  eslint-visitor-keys@3.4.3: {}
-
-  eslint@8.57.0:
-    dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@8.57.0)
-      '@eslint-community/regexpp': 4.10.1
-      '@eslint/eslintrc': 2.1.4
-      '@eslint/js': 8.57.0
-      '@humanwhocodes/config-array': 0.11.14
-      '@humanwhocodes/module-importer': 1.0.1
-      '@nodelib/fs.walk': 1.2.8
-      '@ungap/structured-clone': 1.2.0
-      ajv: 6.12.6
-      chalk: 4.1.2
-      cross-spawn: 7.0.3
-      debug: 4.3.5
-      doctrine: 3.0.0
-      escape-string-regexp: 4.0.0
-      eslint-scope: 7.2.2
-      eslint-visitor-keys: 3.4.3
-      espree: 9.6.1
-      esquery: 1.5.0
-      esutils: 2.0.3
-      fast-deep-equal: 3.1.3
-      file-entry-cache: 6.0.1
-      find-up: 5.0.0
-      glob-parent: 6.0.2
-      globals: 13.24.0
-      graphemer: 1.4.0
-      ignore: 5.3.1
-      imurmurhash: 0.1.4
-      is-glob: 4.0.3
-      is-path-inside: 3.0.3
-      js-yaml: 4.1.0
-      json-stable-stringify-without-jsonify: 1.0.1
-      levn: 0.4.1
-      lodash.merge: 4.6.2
-      minimatch: 3.1.2
-      natural-compare: 1.4.0
-      optionator: 0.9.4
-      strip-ansi: 6.0.1
-      text-table: 0.2.0
-    transitivePeerDependencies:
-      - supports-color
-
-  espree@9.6.1:
-    dependencies:
-      acorn: 8.12.0
-      acorn-jsx: 5.3.2(acorn@8.12.0)
-      eslint-visitor-keys: 3.4.3
-
-  esquery@1.5.0:
-    dependencies:
-      estraverse: 5.3.0
-
-  esrecurse@4.3.0:
-    dependencies:
-      estraverse: 5.3.0
-
-  estraverse@5.3.0: {}
-
-  esutils@2.0.3: {}
-
-  execa@5.1.1:
-    dependencies:
-      cross-spawn: 7.0.3
-      get-stream: 6.0.1
-      human-signals: 2.1.0
-      is-stream: 2.0.1
-      merge-stream: 2.0.0
-      npm-run-path: 4.0.1
-      onetime: 5.1.2
-      signal-exit: 3.0.7
-      strip-final-newline: 2.0.0
-
-  extract-zip@2.0.1:
-    dependencies:
-      debug: 4.3.5
-      get-stream: 5.2.0
-      yauzl: 2.10.0
-    optionalDependencies:
-      '@types/yauzl': 2.10.3
-    transitivePeerDependencies:
-      - supports-color
-
-  fast-deep-equal@3.1.3: {}
-
-  fast-glob@3.3.2:
-    dependencies:
-      '@nodelib/fs.stat': 2.0.5
-      '@nodelib/fs.walk': 1.2.8
-      glob-parent: 5.1.2
-      merge2: 1.4.1
-      micromatch: 4.0.7
-
-  fast-json-stable-stringify@2.1.0: {}
-
-  fast-levenshtein@2.0.6: {}
-
-  fast-loops@1.1.3: {}
-
-  fast-shallow-equal@1.0.0: {}
-
-  fastest-levenshtein@1.0.16: {}
-
-  fastest-stable-stringify@2.0.2: {}
-
-  fastq@1.17.1:
-    dependencies:
-      reusify: 1.0.4
-
-  fd-slicer@1.1.0:
-    dependencies:
-      pend: 1.2.0
-
-  file-entry-cache@6.0.1:
-    dependencies:
-      flat-cache: 3.2.0
-
-  file-entry-cache@9.0.0:
-    dependencies:
-      flat-cache: 5.0.0
-
-  fill-range@7.1.1:
-    dependencies:
-      to-regex-range: 5.0.1
-
-  find-root@1.1.0: {}
-
-  find-up@5.0.0:
-    dependencies:
-      locate-path: 6.0.0
-      path-exists: 4.0.0
-
-  flat-cache@3.2.0:
-    dependencies:
-      flatted: 3.3.1
-      keyv: 4.5.4
-      rimraf: 5.0.7
-
-  flat-cache@5.0.0:
-    dependencies:
-      flatted: 3.3.1
-      keyv: 4.5.4
-
-  flatted@3.3.1: {}
-
-  follow-redirects@1.15.6: {}
-
-  for-each@0.3.3:
-    dependencies:
-      is-callable: 1.2.7
-
-  foreground-child@3.2.1:
-    dependencies:
-      cross-spawn: 7.0.3
-      signal-exit: 4.1.0
-
-  form-data@4.0.0:
-    dependencies:
-      asynckit: 0.4.0
-      combined-stream: 1.0.8
-      mime-types: 2.1.35
-
-  fraction.js@4.3.7: {}
-
-  fs-minipass@2.1.0:
-    dependencies:
-      minipass: 3.3.6
-
-  fsevents@2.3.3:
-    optional: true
-
-  function-bind@1.1.2: {}
-
-  function.prototype.name@1.1.6:
-    dependencies:
-      call-bind: 1.0.7
-      define-properties: 1.2.1
-      es-abstract: 1.23.3
-      functions-have-names: 1.2.3
-
-  functions-have-names@1.2.3: {}
-
-  get-intrinsic@1.2.4:
-    dependencies:
-      es-errors: 1.3.0
-      function-bind: 1.1.2
-      has-proto: 1.0.3
-      has-symbols: 1.0.3
-      hasown: 2.0.2
-
-  get-stream@5.2.0:
-    dependencies:
-      pump: 3.0.0
-
-  get-stream@6.0.1: {}
-
-  get-symbol-description@1.0.2:
-    dependencies:
-      call-bind: 1.0.7
-      es-errors: 1.3.0
-      get-intrinsic: 1.2.4
-
-  get-tsconfig@4.7.5:
-    dependencies:
-      resolve-pkg-maps: 1.0.0
-
-  glob-parent@5.1.2:
-    dependencies:
-      is-glob: 4.0.3
-
-  glob-parent@6.0.2:
-    dependencies:
-      is-glob: 4.0.3
-
-  glob@10.3.10:
-    dependencies:
-      foreground-child: 3.2.1
-      jackspeak: 2.3.6
-      minimatch: 9.0.4
-      minipass: 7.1.2
-      path-scurry: 1.11.1
-
-  glob@10.4.1:
-    dependencies:
-      foreground-child: 3.2.1
-      jackspeak: 3.4.0
-      minimatch: 9.0.4
-      minipass: 7.1.2
-      path-scurry: 1.11.1
-
-  global-modules@2.0.0:
-    dependencies:
-      global-prefix: 3.0.0
-
-  global-prefix@3.0.0:
-    dependencies:
-      ini: 1.3.8
-      kind-of: 6.0.3
-      which: 1.3.1
-
-  globals@11.12.0: {}
-
-  globals@13.24.0:
-    dependencies:
-      type-fest: 0.20.2
-
-  globalthis@1.0.4:
-    dependencies:
-      define-properties: 1.2.1
-      gopd: 1.0.1
-
-  globby@11.1.0:
-    dependencies:
-      array-union: 2.1.0
-      dir-glob: 3.0.1
-      fast-glob: 3.3.2
-      ignore: 5.3.1
-      merge2: 1.4.1
-      slash: 3.0.0
-
-  globjoin@0.1.4: {}
-
-  gopd@1.0.1:
-    dependencies:
-      get-intrinsic: 1.2.4
-
-  graceful-fs@4.2.11: {}
-
-  graphemer@1.4.0: {}
-
-  has-bigints@1.0.2: {}
-
-  has-flag@3.0.0: {}
-
-  has-flag@4.0.0: {}
-
-  has-property-descriptors@1.0.2:
-    dependencies:
-      es-define-property: 1.0.0
-
-  has-proto@1.0.3: {}
-
-  has-symbols@1.0.3: {}
-
-  has-tostringtag@1.0.2:
-    dependencies:
-      has-symbols: 1.0.3
-
-  hasown@2.0.2:
-    dependencies:
-      function-bind: 1.1.2
-
-  hoist-non-react-statics@3.3.2:
-    dependencies:
-      react-is: 16.13.1
-
-  html-tags@3.3.1: {}
-
-  htmlparser2@8.0.2:
-    dependencies:
-      domelementtype: 2.3.0
-      domhandler: 5.0.3
-      domutils: 3.1.0
-      entities: 4.5.0
-
-  human-signals@2.1.0: {}
-
-  hyphenate-style-name@1.0.5: {}
-
-  ignore@5.3.1: {}
-
-  import-fresh@3.3.0:
-    dependencies:
-      parent-module: 1.0.1
-      resolve-from: 4.0.0
-
-  imurmurhash@0.1.4: {}
-
-  ini@1.3.8: {}
-
-  inline-style-prefixer@7.0.0:
-    dependencies:
-      css-in-js-utils: 3.1.0
-      fast-loops: 1.1.3
-
-  internal-slot@1.0.7:
-    dependencies:
-      es-errors: 1.3.0
-      hasown: 2.0.2
-      side-channel: 1.0.6
-
-  is-array-buffer@3.0.4:
-    dependencies:
-      call-bind: 1.0.7
-      get-intrinsic: 1.2.4
-
-  is-arrayish@0.2.1: {}
-
-  is-async-function@2.0.0:
-    dependencies:
-      has-tostringtag: 1.0.2
-
-  is-bigint@1.0.4:
-    dependencies:
-      has-bigints: 1.0.2
-
-  is-binary-path@2.1.0:
-    dependencies:
-      binary-extensions: 2.3.0
-
-  is-boolean-object@1.1.2:
-    dependencies:
-      call-bind: 1.0.7
-      has-tostringtag: 1.0.2
-
-  is-callable@1.2.7: {}
-
-  is-core-module@2.13.1:
-    dependencies:
-      hasown: 2.0.2
-
-  is-data-view@1.0.1:
-    dependencies:
-      is-typed-array: 1.1.13
-
-  is-date-object@1.0.5:
-    dependencies:
-      has-tostringtag: 1.0.2
-
-  is-extglob@2.1.1: {}
-
-  is-finalizationregistry@1.0.2:
-    dependencies:
-      call-bind: 1.0.7
-
-  is-fullwidth-code-point@3.0.0: {}
-
-  is-generator-function@1.0.10:
-    dependencies:
-      has-tostringtag: 1.0.2
-
-  is-glob@4.0.3:
-    dependencies:
-      is-extglob: 2.1.1
-
-  is-map@2.0.3: {}
-
-  is-negative-zero@2.0.3: {}
-
-  is-number-object@1.0.7:
-    dependencies:
-      has-tostringtag: 1.0.2
-
-  is-number@7.0.0: {}
-
-  is-path-inside@3.0.3: {}
-
-  is-plain-object@5.0.0: {}
-
-  is-regex@1.1.4:
-    dependencies:
-      call-bind: 1.0.7
-      has-tostringtag: 1.0.2
-
-  is-set@2.0.3: {}
-
-  is-shared-array-buffer@1.0.3:
-    dependencies:
-      call-bind: 1.0.7
-
-  is-stream@2.0.1: {}
-
-  is-string@1.0.7:
-    dependencies:
-      has-tostringtag: 1.0.2
-
-  is-symbol@1.0.4:
-    dependencies:
-      has-symbols: 1.0.3
-
-  is-typed-array@1.1.13:
-    dependencies:
-      which-typed-array: 1.1.15
-
-  is-weakmap@2.0.2: {}
-
-  is-weakref@1.0.2:
-    dependencies:
-      call-bind: 1.0.7
-
-  is-weakset@2.0.3:
-    dependencies:
-      call-bind: 1.0.7
-      get-intrinsic: 1.2.4
-
-  isarray@2.0.5: {}
-
-  isexe@2.0.0: {}
-
-  iterator.prototype@1.1.2:
-    dependencies:
-      define-properties: 1.2.1
-      get-intrinsic: 1.2.4
-      has-symbols: 1.0.3
-      reflect.getprototypeof: 1.0.6
-      set-function-name: 2.0.2
-
-  jackspeak@2.3.6:
-    dependencies:
-      '@isaacs/cliui': 8.0.2
-    optionalDependencies:
-      '@pkgjs/parseargs': 0.11.0
-
-  jackspeak@3.4.0:
-    dependencies:
-      '@isaacs/cliui': 8.0.2
-    optionalDependencies:
-      '@pkgjs/parseargs': 0.11.0
-
-  jiti@1.21.6: {}
-
-  js-cookie@2.2.1: {}
-
-  js-tokens@4.0.0: {}
-
-  js-yaml@4.1.0:
-    dependencies:
-      argparse: 2.0.1
-
-  jsesc@2.5.2: {}
-
-  json-buffer@3.0.1: {}
-
-  json-parse-even-better-errors@2.3.1: {}
-
-  json-schema-traverse@0.4.1: {}
-
-  json-schema-traverse@1.0.0: {}
-
-  json-stable-stringify-without-jsonify@1.0.1: {}
-
-  json5@1.0.2:
-    dependencies:
-      minimist: 1.2.8
-
-  jsx-ast-utils@3.3.5:
-    dependencies:
-      array-includes: 3.1.8
-      array.prototype.flat: 1.3.2
-      object.assign: 4.1.5
-      object.values: 1.2.0
-
-  keyv@4.5.4:
-    dependencies:
-      json-buffer: 3.0.1
-
-  kind-of@6.0.3: {}
-
-  known-css-properties@0.31.0: {}
-
-  kolorist@1.8.0: {}
-
-  language-subtag-registry@0.3.23: {}
-
-  language-tags@1.0.9:
-    dependencies:
-      language-subtag-registry: 0.3.23
-
-  levn@0.4.1:
-    dependencies:
-      prelude-ls: 1.2.1
-      type-check: 0.4.0
-
-  lilconfig@2.1.0: {}
-
-  lilconfig@3.1.2: {}
-
-  lines-and-columns@1.2.4: {}
-
-  local-pkg@0.5.0:
-    dependencies:
-      mlly: 1.7.1
-      pkg-types: 1.1.1
-
-  locate-path@6.0.0:
-    dependencies:
-      p-locate: 5.0.0
-
-  lodash.merge@4.6.2: {}
-
-  lodash.truncate@4.4.2: {}
-
-  loose-envify@1.4.0:
-    dependencies:
-      js-tokens: 4.0.0
-
-  lru-cache@10.2.2: {}
-
-  mathml-tag-names@2.1.3: {}
-
-  mdn-data@2.0.14: {}
-
-  mdn-data@2.0.28: {}
-
-  mdn-data@2.0.30: {}
-
-  meow@13.2.0: {}
-
-  merge-stream@2.0.0: {}
-
-  merge2@1.4.1: {}
-
-  micromatch@4.0.7:
-    dependencies:
-      braces: 3.0.3
-      picomatch: 2.3.1
-
-  mime-db@1.52.0: {}
-
-  mime-types@2.1.35:
-    dependencies:
-      mime-db: 1.52.0
-
-  mimic-fn@2.1.0: {}
-
-  minimatch@3.1.2:
-    dependencies:
-      brace-expansion: 1.1.11
-
-  minimatch@9.0.3:
-    dependencies:
-      brace-expansion: 2.0.1
-
-  minimatch@9.0.4:
-    dependencies:
-      brace-expansion: 2.0.1
-
-  minimist@1.2.8: {}
-
-  minipass@3.3.6:
-    dependencies:
-      yallist: 4.0.0
-
-  minipass@4.2.8: {}
-
-  minipass@5.0.0: {}
-
-  minipass@7.1.2: {}
-
-  minizlib@2.1.2:
-    dependencies:
-      minipass: 3.3.6
-      yallist: 4.0.0
-
-  mkdirp@1.0.4: {}
-
-  mlly@1.7.1:
-    dependencies:
-      acorn: 8.12.0
-      pathe: 1.1.2
-      pkg-types: 1.1.1
-      ufo: 1.5.3
-
-  ms@2.1.2: {}
-
-  ms@2.1.3: {}
-
-  mz@2.7.0:
-    dependencies:
-      any-promise: 1.3.0
-      object-assign: 4.1.1
-      thenify-all: 1.6.0
-
-  nano-css@5.6.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
-    dependencies:
-      '@jridgewell/sourcemap-codec': 1.4.15
-      css-tree: 1.1.3
-      csstype: 3.1.3
-      fastest-stable-stringify: 2.0.2
-      inline-style-prefixer: 7.0.0
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-      rtl-css-js: 1.16.1
-      stacktrace-js: 2.0.2
-      stylis: 4.3.2
-
-  nanoid@3.3.7: {}
-
-  natural-compare@1.4.0: {}
-
-  next@14.2.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
-    dependencies:
-      '@next/env': 14.2.4
-      '@swc/helpers': 0.5.5
-      busboy: 1.6.0
-      caniuse-lite: 1.0.30001636
-      graceful-fs: 4.2.11
-      postcss: 8.4.31
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-      styled-jsx: 5.1.1(react@18.3.1)
-    optionalDependencies:
-      '@next/swc-darwin-arm64': 14.2.4
-      '@next/swc-darwin-x64': 14.2.4
-      '@next/swc-linux-arm64-gnu': 14.2.4
-      '@next/swc-linux-arm64-musl': 14.2.4
-      '@next/swc-linux-x64-gnu': 14.2.4
-      '@next/swc-linux-x64-musl': 14.2.4
-      '@next/swc-win32-arm64-msvc': 14.2.4
-      '@next/swc-win32-ia32-msvc': 14.2.4
-      '@next/swc-win32-x64-msvc': 14.2.4
-    transitivePeerDependencies:
-      - '@babel/core'
-      - babel-plugin-macros
-
-  node-releases@2.0.14: {}
-
-  normalize-path@3.0.0: {}
-
-  normalize-range@0.1.2: {}
-
-  npm-run-path@4.0.1:
-    dependencies:
-      path-key: 3.1.1
-
-  nth-check@2.1.1:
-    dependencies:
-      boolbase: 1.0.0
-
-  object-assign@4.1.1: {}
-
-  object-hash@3.0.0: {}
-
-  object-inspect@1.13.1: {}
-
-  object-keys@1.1.1: {}
-
-  object.assign@4.1.5:
-    dependencies:
-      call-bind: 1.0.7
-      define-properties: 1.2.1
-      has-symbols: 1.0.3
-      object-keys: 1.1.1
-
-  object.entries@1.1.8:
-    dependencies:
-      call-bind: 1.0.7
-      define-properties: 1.2.1
-      es-object-atoms: 1.0.0
-
-  object.fromentries@2.0.8:
-    dependencies:
-      call-bind: 1.0.7
-      define-properties: 1.2.1
-      es-abstract: 1.23.3
-      es-object-atoms: 1.0.0
-
-  object.groupby@1.0.3:
-    dependencies:
-      call-bind: 1.0.7
-      define-properties: 1.2.1
-      es-abstract: 1.23.3
-
-  object.hasown@1.1.4:
-    dependencies:
-      define-properties: 1.2.1
-      es-abstract: 1.23.3
-      es-object-atoms: 1.0.0
-
-  object.values@1.2.0:
-    dependencies:
-      call-bind: 1.0.7
-      define-properties: 1.2.1
-      es-object-atoms: 1.0.0
-
-  once@1.4.0:
-    dependencies:
-      wrappy: 1.0.2
-
-  onetime@5.1.2:
-    dependencies:
-      mimic-fn: 2.1.0
-
-  optionator@0.9.4:
-    dependencies:
-      deep-is: 0.1.4
-      fast-levenshtein: 2.0.6
-      levn: 0.4.1
-      prelude-ls: 1.2.1
-      type-check: 0.4.0
-      word-wrap: 1.2.5
-
-  p-limit@3.1.0:
-    dependencies:
-      yocto-queue: 0.1.0
-
-  p-locate@5.0.0:
-    dependencies:
-      p-limit: 3.1.0
-
-  parent-module@1.0.1:
-    dependencies:
-      callsites: 3.1.0
-
-  parse-json@5.2.0:
-    dependencies:
-      '@babel/code-frame': 7.24.7
-      error-ex: 1.3.2
-      json-parse-even-better-errors: 2.3.1
-      lines-and-columns: 1.2.4
-
-  parse5-htmlparser2-tree-adapter@7.0.0:
-    dependencies:
-      domhandler: 5.0.3
-      parse5: 7.1.2
-
-  parse5@7.1.2:
-    dependencies:
-      entities: 4.5.0
-
-  path-exists@4.0.0: {}
-
-  path-key@3.1.1: {}
-
-  path-parse@1.0.7: {}
-
-  path-scurry@1.11.1:
-    dependencies:
-      lru-cache: 10.2.2
-      minipass: 7.1.2
-
-  path-type@4.0.0: {}
-
-  pathe@1.1.2: {}
-
-  pend@1.2.0: {}
-
-  perfect-scrollbar@1.5.5: {}
-
-  picocolors@1.0.1: {}
-
-  picomatch@2.3.1: {}
-
-  pify@2.3.0: {}
-
-  pirates@4.0.6: {}
-
-  pkg-types@1.1.1:
-    dependencies:
-      confbox: 0.1.7
-      mlly: 1.7.1
-      pathe: 1.1.2
-
-  possible-typed-array-names@1.0.0: {}
-
-  postcss-import@14.1.0(postcss@8.4.38):
-    dependencies:
-      postcss: 8.4.38
-      postcss-value-parser: 4.2.0
-      read-cache: 1.0.0
-      resolve: 1.22.8
-
-  postcss-import@15.1.0(postcss@8.4.38):
-    dependencies:
-      postcss: 8.4.38
-      postcss-value-parser: 4.2.0
-      read-cache: 1.0.0
-      resolve: 1.22.8
-
-  postcss-js@4.0.1(postcss@8.4.38):
-    dependencies:
-      camelcase-css: 2.0.1
-      postcss: 8.4.38
-
-  postcss-load-config@3.1.4(postcss@8.4.38):
-    dependencies:
-      lilconfig: 2.1.0
-      yaml: 1.10.2
-    optionalDependencies:
-      postcss: 8.4.38
-
-  postcss-load-config@4.0.2(postcss@8.4.38):
-    dependencies:
-      lilconfig: 3.1.2
-      yaml: 2.4.5
-    optionalDependencies:
-      postcss: 8.4.38
-
-  postcss-nested@6.0.0(postcss@8.4.38):
-    dependencies:
-      postcss: 8.4.38
-      postcss-selector-parser: 6.1.0
-
-  postcss-nested@6.0.1(postcss@8.4.38):
-    dependencies:
-      postcss: 8.4.38
-      postcss-selector-parser: 6.1.0
-
-  postcss-resolve-nested-selector@0.1.1: {}
-
-  postcss-safe-parser@7.0.0(postcss@8.4.38):
-    dependencies:
-      postcss: 8.4.38
-
-  postcss-selector-parser@6.1.0:
-    dependencies:
-      cssesc: 3.0.0
-      util-deprecate: 1.0.2
-
-  postcss-styled-syntax@0.6.4(postcss@8.4.38):
-    dependencies:
-      postcss: 8.4.38
-      typescript: 5.4.5
-
-  postcss-value-parser@4.2.0: {}
-
-  postcss@8.4.31:
-    dependencies:
-      nanoid: 3.3.7
-      picocolors: 1.0.1
-      source-map-js: 1.2.0
-
-  postcss@8.4.38:
-    dependencies:
-      nanoid: 3.3.7
-      picocolors: 1.0.1
-      source-map-js: 1.2.0
-
-  prelude-ls@1.2.1: {}
-
-  prettier@3.3.2: {}
-
-  prop-types@15.8.1:
-    dependencies:
-      loose-envify: 1.4.0
-      object-assign: 4.1.1
-      react-is: 16.13.1
-
-  proxy-from-env@1.1.0: {}
-
-  pump@3.0.0:
-    dependencies:
-      end-of-stream: 1.4.4
-      once: 1.4.0
-
-  punycode@2.3.1: {}
-
-  queue-microtask@1.2.3: {}
-
-  quick-lru@5.1.1: {}
-
-  react-apexcharts@1.4.1(apexcharts@3.49.1)(react@18.3.1):
-    dependencies:
-      apexcharts: 3.49.1
-      prop-types: 15.8.1
-      react: 18.3.1
-
-  react-dom@18.3.1(react@18.3.1):
-    dependencies:
-      loose-envify: 1.4.0
-      react: 18.3.1
-      scheduler: 0.23.2
-
-  react-is@16.13.1: {}
-
-  react-is@18.3.1: {}
-
-  react-perfect-scrollbar@1.5.8(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
-    dependencies:
-      perfect-scrollbar: 1.5.5
-      prop-types: 15.8.1
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-
-  react-transition-group@4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
-    dependencies:
-      '@babel/runtime': 7.24.7
-      dom-helpers: 5.2.1
-      loose-envify: 1.4.0
-      prop-types: 15.8.1
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-
-  react-universal-interface@0.6.2(react@18.3.1)(tslib@2.6.3):
-    dependencies:
-      react: 18.3.1
-      tslib: 2.6.3
-
-  react-use@17.5.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
-    dependencies:
-      '@types/js-cookie': 2.2.7
-      '@xobotyi/scrollbar-width': 1.9.5
-      copy-to-clipboard: 3.3.3
-      fast-deep-equal: 3.1.3
-      fast-shallow-equal: 1.0.0
-      js-cookie: 2.2.1
-      nano-css: 5.6.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-      react-universal-interface: 0.6.2(react@18.3.1)(tslib@2.6.3)
-      resize-observer-polyfill: 1.5.1
-      screenfull: 5.2.0
-      set-harmonic-interval: 1.0.1
-      throttle-debounce: 3.0.1
-      ts-easing: 0.2.0
-      tslib: 2.6.3
-
-  react@18.3.1:
-    dependencies:
-      loose-envify: 1.4.0
-
-  read-cache@1.0.0:
-    dependencies:
-      pify: 2.3.0
-
-  readdirp@3.6.0:
-    dependencies:
-      picomatch: 2.3.1
-
-  reflect.getprototypeof@1.0.6:
-    dependencies:
-      call-bind: 1.0.7
-      define-properties: 1.2.1
-      es-abstract: 1.23.3
-      es-errors: 1.3.0
-      get-intrinsic: 1.2.4
-      globalthis: 1.0.4
-      which-builtin-type: 1.1.3
-
-  regenerator-runtime@0.14.1: {}
-
-  regexp.prototype.flags@1.5.2:
-    dependencies:
-      call-bind: 1.0.7
-      define-properties: 1.2.1
-      es-errors: 1.3.0
-      set-function-name: 2.0.2
-
-  require-from-string@2.0.2: {}
-
-  resize-observer-polyfill@1.5.1: {}
-
-  resolve-from@4.0.0: {}
-
-  resolve-from@5.0.0: {}
-
-  resolve-pkg-maps@1.0.0: {}
-
-  resolve@1.22.8:
-    dependencies:
-      is-core-module: 2.13.1
-      path-parse: 1.0.7
-      supports-preserve-symlinks-flag: 1.0.0
-
-  resolve@2.0.0-next.5:
-    dependencies:
-      is-core-module: 2.13.1
-      path-parse: 1.0.7
-      supports-preserve-symlinks-flag: 1.0.0
-
-  reusify@1.0.4: {}
-
-  rimraf@5.0.7:
-    dependencies:
-      glob: 10.4.1
-
-  rtl-css-js@1.16.1:
-    dependencies:
-      '@babel/runtime': 7.24.7
-
-  run-parallel@1.2.0:
-    dependencies:
-      queue-microtask: 1.2.3
-
-  safe-array-concat@1.1.2:
-    dependencies:
-      call-bind: 1.0.7
-      get-intrinsic: 1.2.4
-      has-symbols: 1.0.3
-      isarray: 2.0.5
-
-  safe-regex-test@1.0.3:
-    dependencies:
-      call-bind: 1.0.7
-      es-errors: 1.3.0
-      is-regex: 1.1.4
-
-  scheduler@0.23.2:
-    dependencies:
-      loose-envify: 1.4.0
-
-  screenfull@5.2.0: {}
-
-  semver@6.3.1: {}
-
-  semver@7.6.2: {}
-
-  server-only@0.0.1: {}
-
-  set-function-length@1.2.2:
-    dependencies:
-      define-data-property: 1.1.4
-      es-errors: 1.3.0
-      function-bind: 1.1.2
-      get-intrinsic: 1.2.4
-      gopd: 1.0.1
-      has-property-descriptors: 1.0.2
-
-  set-function-name@2.0.2:
-    dependencies:
-      define-data-property: 1.1.4
-      es-errors: 1.3.0
-      functions-have-names: 1.2.3
-      has-property-descriptors: 1.0.2
-
-  set-harmonic-interval@1.0.1: {}
-
-  shebang-command@2.0.0:
-    dependencies:
-      shebang-regex: 3.0.0
-
-  shebang-regex@3.0.0: {}
-
-  side-channel@1.0.6:
-    dependencies:
-      call-bind: 1.0.7
-      es-errors: 1.3.0
-      get-intrinsic: 1.2.4
-      object-inspect: 1.13.1
-
-  signal-exit@3.0.7: {}
-
-  signal-exit@4.1.0: {}
-
-  slash@3.0.0: {}
-
-  slice-ansi@4.0.0:
-    dependencies:
-      ansi-styles: 4.3.0
-      astral-regex: 2.0.0
-      is-fullwidth-code-point: 3.0.0
-
-  source-map-js@1.2.0: {}
-
-  source-map@0.5.6: {}
-
-  source-map@0.5.7: {}
-
-  source-map@0.6.1: {}
-
-  stack-generator@2.0.10:
-    dependencies:
-      stackframe: 1.3.4
-
-  stackframe@1.3.4: {}
-
-  stacktrace-gps@3.1.2:
-    dependencies:
-      source-map: 0.5.6
-      stackframe: 1.3.4
-
-  stacktrace-js@2.0.2:
-    dependencies:
-      error-stack-parser: 2.1.4
-      stack-generator: 2.0.10
-      stacktrace-gps: 3.1.2
-
-  streamsearch@1.1.0: {}
-
-  string-width@4.2.3:
-    dependencies:
-      emoji-regex: 8.0.0
-      is-fullwidth-code-point: 3.0.0
-      strip-ansi: 6.0.1
-
-  string-width@5.1.2:
-    dependencies:
-      eastasianwidth: 0.2.0
-      emoji-regex: 9.2.2
-      strip-ansi: 7.1.0
-
-  string.prototype.matchall@4.0.11:
-    dependencies:
-      call-bind: 1.0.7
-      define-properties: 1.2.1
-      es-abstract: 1.23.3
-      es-errors: 1.3.0
-      es-object-atoms: 1.0.0
-      get-intrinsic: 1.2.4
-      gopd: 1.0.1
-      has-symbols: 1.0.3
-      internal-slot: 1.0.7
-      regexp.prototype.flags: 1.5.2
-      set-function-name: 2.0.2
-      side-channel: 1.0.6
-
-  string.prototype.trim@1.2.9:
-    dependencies:
-      call-bind: 1.0.7
-      define-properties: 1.2.1
-      es-abstract: 1.23.3
-      es-object-atoms: 1.0.0
-
-  string.prototype.trimend@1.0.8:
-    dependencies:
-      call-bind: 1.0.7
-      define-properties: 1.2.1
-      es-object-atoms: 1.0.0
-
-  string.prototype.trimstart@1.0.8:
-    dependencies:
-      call-bind: 1.0.7
-      define-properties: 1.2.1
-      es-object-atoms: 1.0.0
-
-  strip-ansi@6.0.1:
-    dependencies:
-      ansi-regex: 5.0.1
-
-  strip-ansi@7.1.0:
-    dependencies:
-      ansi-regex: 6.0.1
-
-  strip-bom@3.0.0: {}
-
-  strip-final-newline@2.0.0: {}
-
-  strip-json-comments@3.1.1: {}
-
-  styled-jsx@5.1.1(react@18.3.1):
-    dependencies:
-      client-only: 0.0.1
-      react: 18.3.1
-
-  stylelint-use-logical-spec@5.0.1(stylelint@16.6.1(typescript@5.4.5)):
-    dependencies:
-      stylelint: 16.6.1(typescript@5.4.5)
-
-  stylelint@16.6.1(typescript@5.4.5):
-    dependencies:
-      '@csstools/css-parser-algorithms': 2.6.3(@csstools/css-tokenizer@2.3.1)
-      '@csstools/css-tokenizer': 2.3.1
-      '@csstools/media-query-list-parser': 2.1.11(@csstools/css-parser-algorithms@2.6.3(@csstools/css-tokenizer@2.3.1))(@csstools/css-tokenizer@2.3.1)
-      '@csstools/selector-specificity': 3.1.1(postcss-selector-parser@6.1.0)
-      '@dual-bundle/import-meta-resolve': 4.1.0
-      balanced-match: 2.0.0
-      colord: 2.9.3
-      cosmiconfig: 9.0.0(typescript@5.4.5)
-      css-functions-list: 3.2.2
-      css-tree: 2.3.1
-      debug: 4.3.5
-      fast-glob: 3.3.2
-      fastest-levenshtein: 1.0.16
-      file-entry-cache: 9.0.0
-      global-modules: 2.0.0
-      globby: 11.1.0
-      globjoin: 0.1.4
-      html-tags: 3.3.1
-      ignore: 5.3.1
-      imurmurhash: 0.1.4
-      is-plain-object: 5.0.0
-      known-css-properties: 0.31.0
-      mathml-tag-names: 2.1.3
-      meow: 13.2.0
-      micromatch: 4.0.7
-      normalize-path: 3.0.0
-      picocolors: 1.0.1
-      postcss: 8.4.38
-      postcss-resolve-nested-selector: 0.1.1
-      postcss-safe-parser: 7.0.0(postcss@8.4.38)
-      postcss-selector-parser: 6.1.0
-      postcss-value-parser: 4.2.0
-      resolve-from: 5.0.0
-      string-width: 4.2.3
-      strip-ansi: 7.1.0
-      supports-hyperlinks: 3.0.0
-      svg-tags: 1.0.0
-      table: 6.8.2
-      write-file-atomic: 5.0.1
-    transitivePeerDependencies:
-      - supports-color
-      - typescript
-
-  stylis@4.2.0: {}
-
-  stylis@4.3.2: {}
-
-  sucrase@3.35.0:
-    dependencies:
-      '@jridgewell/gen-mapping': 0.3.5
-      commander: 4.1.1
-      glob: 10.4.1
-      lines-and-columns: 1.2.4
-      mz: 2.7.0
-      pirates: 4.0.6
-      ts-interface-checker: 0.1.13
-
-  supports-color@5.5.0:
-    dependencies:
-      has-flag: 3.0.0
-
-  supports-color@7.2.0:
-    dependencies:
-      has-flag: 4.0.0
-
-  supports-hyperlinks@3.0.0:
-    dependencies:
-      has-flag: 4.0.0
-      supports-color: 7.2.0
-
-  supports-preserve-symlinks-flag@1.0.0: {}
-
-  svg-tags@1.0.0: {}
-
-  svg.draggable.js@2.2.2:
-    dependencies:
-      svg.js: 2.7.1
-
-  svg.easing.js@2.0.0:
-    dependencies:
-      svg.js: 2.7.1
-
-  svg.filter.js@2.0.2:
-    dependencies:
-      svg.js: 2.7.1
-
-  svg.js@2.7.1: {}
-
-  svg.pathmorphing.js@0.1.3:
-    dependencies:
-      svg.js: 2.7.1
-
-  svg.resize.js@1.4.3:
-    dependencies:
-      svg.js: 2.7.1
-      svg.select.js: 2.1.2
-
-  svg.select.js@2.1.2:
-    dependencies:
-      svg.js: 2.7.1
-
-  svg.select.js@3.0.1:
-    dependencies:
-      svg.js: 2.7.1
-
-  svgo@3.3.2:
-    dependencies:
-      '@trysound/sax': 0.2.0
-      commander: 7.2.0
-      css-select: 5.1.0
-      css-tree: 2.3.1
-      css-what: 6.1.0
-      csso: 5.0.5
-      picocolors: 1.0.1
-
-  table@6.8.2:
-    dependencies:
-      ajv: 8.16.0
-      lodash.truncate: 4.4.2
-      slice-ansi: 4.0.0
-      string-width: 4.2.3
-      strip-ansi: 6.0.1
-
-  tailwindcss-logical@3.0.1(postcss@8.4.38):
-    dependencies:
-      tailwindcss: 3.3.1(postcss@8.4.38)
-    transitivePeerDependencies:
-      - postcss
-      - ts-node
-
-  tailwindcss@3.3.1(postcss@8.4.38):
-    dependencies:
-      arg: 5.0.2
-      chokidar: 3.6.0
-      color-name: 1.1.4
-      didyoumean: 1.2.2
-      dlv: 1.1.3
-      fast-glob: 3.3.2
-      glob-parent: 6.0.2
-      is-glob: 4.0.3
-      jiti: 1.21.6
-      lilconfig: 2.1.0
-      micromatch: 4.0.7
-      normalize-path: 3.0.0
-      object-hash: 3.0.0
-      picocolors: 1.0.1
-      postcss: 8.4.38
-      postcss-import: 14.1.0(postcss@8.4.38)
-      postcss-js: 4.0.1(postcss@8.4.38)
-      postcss-load-config: 3.1.4(postcss@8.4.38)
-      postcss-nested: 6.0.0(postcss@8.4.38)
-      postcss-selector-parser: 6.1.0
-      postcss-value-parser: 4.2.0
-      quick-lru: 5.1.1
-      resolve: 1.22.8
-      sucrase: 3.35.0
-    transitivePeerDependencies:
-      - ts-node
-
-  tailwindcss@3.4.4:
-    dependencies:
-      '@alloc/quick-lru': 5.2.0
-      arg: 5.0.2
-      chokidar: 3.6.0
-      didyoumean: 1.2.2
-      dlv: 1.1.3
-      fast-glob: 3.3.2
-      glob-parent: 6.0.2
-      is-glob: 4.0.3
-      jiti: 1.21.6
-      lilconfig: 2.1.0
-      micromatch: 4.0.7
-      normalize-path: 3.0.0
-      object-hash: 3.0.0
-      picocolors: 1.0.1
-      postcss: 8.4.38
-      postcss-import: 15.1.0(postcss@8.4.38)
-      postcss-js: 4.0.1(postcss@8.4.38)
-      postcss-load-config: 4.0.2(postcss@8.4.38)
-      postcss-nested: 6.0.1(postcss@8.4.38)
-      postcss-selector-parser: 6.1.0
-      resolve: 1.22.8
-      sucrase: 3.35.0
-    transitivePeerDependencies:
-      - ts-node
-
-  tapable@2.2.1: {}
-
-  tar@6.2.1:
-    dependencies:
-      chownr: 2.0.0
-      fs-minipass: 2.1.0
-      minipass: 5.0.0
-      minizlib: 2.1.2
-      mkdirp: 1.0.4
-      yallist: 4.0.0
-
-  text-table@0.2.0: {}
-
-  thenify-all@1.6.0:
-    dependencies:
-      thenify: 3.3.1
-
-  thenify@3.3.1:
-    dependencies:
-      any-promise: 1.3.0
-
-  throttle-debounce@3.0.1: {}
-
-  to-fast-properties@2.0.0: {}
-
-  to-regex-range@5.0.1:
-    dependencies:
-      is-number: 7.0.0
-
-  toggle-selection@1.0.6: {}
-
-  ts-api-utils@1.3.0(typescript@5.4.5):
-    dependencies:
-      typescript: 5.4.5
-
-  ts-easing@0.2.0: {}
-
-  ts-interface-checker@0.1.13: {}
-
-  tsconfig-paths@3.15.0:
-    dependencies:
-      '@types/json5': 0.0.29
-      json5: 1.0.2
-      minimist: 1.2.8
-      strip-bom: 3.0.0
-
-  tslib@2.6.3: {}
-
-  tsx@4.15.5:
-    dependencies:
-      esbuild: 0.21.5
-      get-tsconfig: 4.7.5
-    optionalDependencies:
-      fsevents: 2.3.3
-
-  type-check@0.4.0:
-    dependencies:
-      prelude-ls: 1.2.1
-
-  type-fest@0.20.2: {}
-
-  typed-array-buffer@1.0.2:
-    dependencies:
-      call-bind: 1.0.7
-      es-errors: 1.3.0
-      is-typed-array: 1.1.13
-
-  typed-array-byte-length@1.0.1:
-    dependencies:
-      call-bind: 1.0.7
-      for-each: 0.3.3
-      gopd: 1.0.1
-      has-proto: 1.0.3
-      is-typed-array: 1.1.13
-
-  typed-array-byte-offset@1.0.2:
-    dependencies:
-      available-typed-arrays: 1.0.7
-      call-bind: 1.0.7
-      for-each: 0.3.3
-      gopd: 1.0.1
-      has-proto: 1.0.3
-      is-typed-array: 1.1.13
-
-  typed-array-length@1.0.6:
-    dependencies:
-      call-bind: 1.0.7
-      for-each: 0.3.3
-      gopd: 1.0.1
-      has-proto: 1.0.3
-      is-typed-array: 1.1.13
-      possible-typed-array-names: 1.0.0
-
-  typescript@5.4.5: {}
-
-  ufo@1.5.3: {}
-
-  unbox-primitive@1.0.2:
-    dependencies:
-      call-bind: 1.0.7
-      has-bigints: 1.0.2
-      has-symbols: 1.0.3
-      which-boxed-primitive: 1.0.2
-
-  undici-types@5.26.5: {}
-
-  update-browserslist-db@1.0.16(browserslist@4.23.1):
-    dependencies:
-      browserslist: 4.23.1
-      escalade: 3.1.2
-      picocolors: 1.0.1
-
-  uri-js@4.4.1:
-    dependencies:
-      punycode: 2.3.1
-
-  util-deprecate@1.0.2: {}
-
-  which-boxed-primitive@1.0.2:
-    dependencies:
-      is-bigint: 1.0.4
-      is-boolean-object: 1.1.2
-      is-number-object: 1.0.7
-      is-string: 1.0.7
-      is-symbol: 1.0.4
-
-  which-builtin-type@1.1.3:
-    dependencies:
-      function.prototype.name: 1.1.6
-      has-tostringtag: 1.0.2
-      is-async-function: 2.0.0
-      is-date-object: 1.0.5
-      is-finalizationregistry: 1.0.2
-      is-generator-function: 1.0.10
-      is-regex: 1.1.4
-      is-weakref: 1.0.2
-      isarray: 2.0.5
-      which-boxed-primitive: 1.0.2
-      which-collection: 1.0.2
-      which-typed-array: 1.1.15
-
-  which-collection@1.0.2:
-    dependencies:
-      is-map: 2.0.3
-      is-set: 2.0.3
-      is-weakmap: 2.0.2
-      is-weakset: 2.0.3
-
-  which-typed-array@1.1.15:
-    dependencies:
-      available-typed-arrays: 1.0.7
-      call-bind: 1.0.7
-      for-each: 0.3.3
-      gopd: 1.0.1
-      has-tostringtag: 1.0.2
-
-  which@1.3.1:
-    dependencies:
-      isexe: 2.0.0
-
-  which@2.0.2:
-    dependencies:
-      isexe: 2.0.0
-
-  word-wrap@1.2.5: {}
-
-  wrap-ansi@7.0.0:
-    dependencies:
-      ansi-styles: 4.3.0
-      string-width: 4.2.3
-      strip-ansi: 6.0.1
-
-  wrap-ansi@8.1.0:
-    dependencies:
-      ansi-styles: 6.2.1
-      string-width: 5.1.2
-      strip-ansi: 7.1.0
-
-  wrappy@1.0.2: {}
-
-  write-file-atomic@5.0.1:
-    dependencies:
-      imurmurhash: 0.1.4
-      signal-exit: 4.1.0
-
-  yallist@4.0.0: {}
-
-  yaml@1.10.2: {}
-
-  yaml@2.4.5: {}
-
-  yauzl@2.10.0:
-    dependencies:
-      buffer-crc32: 0.2.13
-      fd-slicer: 1.1.0
-
-  yocto-queue@0.1.0: {}
diff --git a/typescript-version/postcss.config.mjs b/typescript-version/postcss.config.mjs
deleted file mode 100644
index e64b252ed..000000000
--- a/typescript-version/postcss.config.mjs
+++ /dev/null
@@ -1,10 +0,0 @@
-/** @type {import('postcss-load-config').Config} */
-const config = {
-  plugins: {
-    'tailwindcss/nesting': {},
-    tailwindcss: {},
-    autoprefixer: {}
-  }
-}
-
-export default config
diff --git a/typescript-version/public/images/avatars/1.png b/typescript-version/public/images/avatars/1.png
deleted file mode 100644
index 51ec57e36..000000000
Binary files a/typescript-version/public/images/avatars/1.png and /dev/null differ
diff --git a/typescript-version/public/images/avatars/2.png b/typescript-version/public/images/avatars/2.png
deleted file mode 100644
index 5ff97c56f..000000000
Binary files a/typescript-version/public/images/avatars/2.png and /dev/null differ
diff --git a/typescript-version/public/images/avatars/3.png b/typescript-version/public/images/avatars/3.png
deleted file mode 100644
index a910a2b8c..000000000
Binary files a/typescript-version/public/images/avatars/3.png and /dev/null differ
diff --git a/typescript-version/public/images/avatars/4.png b/typescript-version/public/images/avatars/4.png
deleted file mode 100644
index dbcf6aa00..000000000
Binary files a/typescript-version/public/images/avatars/4.png and /dev/null differ
diff --git a/typescript-version/public/images/avatars/5.png b/typescript-version/public/images/avatars/5.png
deleted file mode 100644
index d4a13396e..000000000
Binary files a/typescript-version/public/images/avatars/5.png and /dev/null differ
diff --git a/typescript-version/public/images/avatars/6.png b/typescript-version/public/images/avatars/6.png
deleted file mode 100644
index 84af4d497..000000000
Binary files a/typescript-version/public/images/avatars/6.png and /dev/null differ
diff --git a/typescript-version/public/images/avatars/7.png b/typescript-version/public/images/avatars/7.png
deleted file mode 100644
index 148c5c370..000000000
Binary files a/typescript-version/public/images/avatars/7.png and /dev/null differ
diff --git a/typescript-version/public/images/avatars/8.png b/typescript-version/public/images/avatars/8.png
deleted file mode 100644
index 423c4ef52..000000000
Binary files a/typescript-version/public/images/avatars/8.png and /dev/null differ
diff --git a/typescript-version/public/images/cards/1.png b/typescript-version/public/images/cards/1.png
deleted file mode 100644
index bf5aee46b..000000000
Binary files a/typescript-version/public/images/cards/1.png and /dev/null differ
diff --git a/typescript-version/public/images/cards/2.png b/typescript-version/public/images/cards/2.png
deleted file mode 100644
index 29ce4f4d6..000000000
Binary files a/typescript-version/public/images/cards/2.png and /dev/null differ
diff --git a/typescript-version/public/images/cards/3.png b/typescript-version/public/images/cards/3.png
deleted file mode 100644
index d57fcfb67..000000000
Binary files a/typescript-version/public/images/cards/3.png and /dev/null differ
diff --git a/typescript-version/public/images/cards/4.png b/typescript-version/public/images/cards/4.png
deleted file mode 100644
index d93c0514d..000000000
Binary files a/typescript-version/public/images/cards/4.png and /dev/null differ
diff --git a/typescript-version/public/images/cards/5.png b/typescript-version/public/images/cards/5.png
deleted file mode 100644
index 9950c7de2..000000000
Binary files a/typescript-version/public/images/cards/5.png and /dev/null differ
diff --git a/typescript-version/public/images/cards/6.png b/typescript-version/public/images/cards/6.png
deleted file mode 100644
index 2e7d89c8e..000000000
Binary files a/typescript-version/public/images/cards/6.png and /dev/null differ
diff --git a/typescript-version/public/images/cards/aviato.png b/typescript-version/public/images/cards/aviato.png
deleted file mode 100644
index a91fc14ec..000000000
Binary files a/typescript-version/public/images/cards/aviato.png and /dev/null differ
diff --git a/typescript-version/public/images/cards/bitbank.png b/typescript-version/public/images/cards/bitbank.png
deleted file mode 100644
index 0df9bd694..000000000
Binary files a/typescript-version/public/images/cards/bitbank.png and /dev/null differ
diff --git a/typescript-version/public/images/cards/gumroad.png b/typescript-version/public/images/cards/gumroad.png
deleted file mode 100644
index 26a6ca9a5..000000000
Binary files a/typescript-version/public/images/cards/gumroad.png and /dev/null differ
diff --git a/typescript-version/public/images/cards/zipcar.png b/typescript-version/public/images/cards/zipcar.png
deleted file mode 100644
index fe2163bc2..000000000
Binary files a/typescript-version/public/images/cards/zipcar.png and /dev/null differ
diff --git a/typescript-version/public/images/illustrations/characters/5.png b/typescript-version/public/images/illustrations/characters/5.png
deleted file mode 100644
index 87a8e8d97..000000000
Binary files a/typescript-version/public/images/illustrations/characters/5.png and /dev/null differ
diff --git a/typescript-version/public/images/illustrations/characters/6.png b/typescript-version/public/images/illustrations/characters/6.png
deleted file mode 100644
index ce2d15559..000000000
Binary files a/typescript-version/public/images/illustrations/characters/6.png and /dev/null differ
diff --git a/typescript-version/public/images/illustrations/objects/tree-1.png b/typescript-version/public/images/illustrations/objects/tree-1.png
deleted file mode 100644
index afc8b1354..000000000
Binary files a/typescript-version/public/images/illustrations/objects/tree-1.png and /dev/null differ
diff --git a/typescript-version/public/images/illustrations/objects/tree-2.png b/typescript-version/public/images/illustrations/objects/tree-2.png
deleted file mode 100644
index 233339340..000000000
Binary files a/typescript-version/public/images/illustrations/objects/tree-2.png and /dev/null differ
diff --git a/typescript-version/public/images/logos/american-bank.png b/typescript-version/public/images/logos/american-bank.png
deleted file mode 100644
index 87b0e5e77..000000000
Binary files a/typescript-version/public/images/logos/american-bank.png and /dev/null differ
diff --git a/typescript-version/public/images/logos/asana.png b/typescript-version/public/images/logos/asana.png
deleted file mode 100644
index 09fbe0cd0..000000000
Binary files a/typescript-version/public/images/logos/asana.png and /dev/null differ
diff --git a/typescript-version/public/images/logos/aws.png b/typescript-version/public/images/logos/aws.png
deleted file mode 100644
index 99225c122..000000000
Binary files a/typescript-version/public/images/logos/aws.png and /dev/null differ
diff --git a/typescript-version/public/images/logos/behance.png b/typescript-version/public/images/logos/behance.png
deleted file mode 100644
index 03957b222..000000000
Binary files a/typescript-version/public/images/logos/behance.png and /dev/null differ
diff --git a/typescript-version/public/images/logos/citi-bank.png b/typescript-version/public/images/logos/citi-bank.png
deleted file mode 100644
index 49a9477f5..000000000
Binary files a/typescript-version/public/images/logos/citi-bank.png and /dev/null differ
diff --git a/typescript-version/public/images/logos/digital-ocean.png b/typescript-version/public/images/logos/digital-ocean.png
deleted file mode 100644
index 2b82abdf2..000000000
Binary files a/typescript-version/public/images/logos/digital-ocean.png and /dev/null differ
diff --git a/typescript-version/public/images/logos/dribbble.png b/typescript-version/public/images/logos/dribbble.png
deleted file mode 100644
index d91142d7b..000000000
Binary files a/typescript-version/public/images/logos/dribbble.png and /dev/null differ
diff --git a/typescript-version/public/images/logos/facebook.png b/typescript-version/public/images/logos/facebook.png
deleted file mode 100644
index a302753e9..000000000
Binary files a/typescript-version/public/images/logos/facebook.png and /dev/null differ
diff --git a/typescript-version/public/images/logos/github.png b/typescript-version/public/images/logos/github.png
deleted file mode 100644
index 95199b304..000000000
Binary files a/typescript-version/public/images/logos/github.png and /dev/null differ
diff --git a/typescript-version/public/images/logos/google.png b/typescript-version/public/images/logos/google.png
deleted file mode 100644
index ec0e3809a..000000000
Binary files a/typescript-version/public/images/logos/google.png and /dev/null differ
diff --git a/typescript-version/public/images/logos/linkedin.png b/typescript-version/public/images/logos/linkedin.png
deleted file mode 100644
index 2e2114c16..000000000
Binary files a/typescript-version/public/images/logos/linkedin.png and /dev/null differ
diff --git a/typescript-version/public/images/logos/mailchimp.png b/typescript-version/public/images/logos/mailchimp.png
deleted file mode 100644
index b45386516..000000000
Binary files a/typescript-version/public/images/logos/mailchimp.png and /dev/null differ
diff --git a/typescript-version/public/images/logos/mastercard.png b/typescript-version/public/images/logos/mastercard.png
deleted file mode 100644
index 6682dffd1..000000000
Binary files a/typescript-version/public/images/logos/mastercard.png and /dev/null differ
diff --git a/typescript-version/public/images/logos/slack.png b/typescript-version/public/images/logos/slack.png
deleted file mode 100644
index 97580d801..000000000
Binary files a/typescript-version/public/images/logos/slack.png and /dev/null differ
diff --git a/typescript-version/public/images/logos/stripe.png b/typescript-version/public/images/logos/stripe.png
deleted file mode 100644
index 31c7ba21a..000000000
Binary files a/typescript-version/public/images/logos/stripe.png and /dev/null differ
diff --git a/typescript-version/public/images/logos/twitter.png b/typescript-version/public/images/logos/twitter.png
deleted file mode 100644
index 22e077e84..000000000
Binary files a/typescript-version/public/images/logos/twitter.png and /dev/null differ
diff --git a/typescript-version/public/images/pages/auth-v1-mask-dark.png b/typescript-version/public/images/pages/auth-v1-mask-dark.png
deleted file mode 100644
index 03f9cfcc0..000000000
Binary files a/typescript-version/public/images/pages/auth-v1-mask-dark.png and /dev/null differ
diff --git a/typescript-version/public/images/pages/auth-v1-mask-light.png b/typescript-version/public/images/pages/auth-v1-mask-light.png
deleted file mode 100644
index d6abf9504..000000000
Binary files a/typescript-version/public/images/pages/auth-v1-mask-light.png and /dev/null differ
diff --git a/typescript-version/public/images/pages/misc-mask-dark.png b/typescript-version/public/images/pages/misc-mask-dark.png
deleted file mode 100644
index 03eb342af..000000000
Binary files a/typescript-version/public/images/pages/misc-mask-dark.png and /dev/null differ
diff --git a/typescript-version/public/images/pages/misc-mask-light.png b/typescript-version/public/images/pages/misc-mask-light.png
deleted file mode 100644
index d6abf9504..000000000
Binary files a/typescript-version/public/images/pages/misc-mask-light.png and /dev/null differ
diff --git a/typescript-version/public/images/pages/trophy.png b/typescript-version/public/images/pages/trophy.png
deleted file mode 100644
index 1a66f9486..000000000
Binary files a/typescript-version/public/images/pages/trophy.png and /dev/null differ
diff --git a/typescript-version/public/next.svg b/typescript-version/public/next.svg
deleted file mode 100644
index 5174b28c5..000000000
--- a/typescript-version/public/next.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
\ No newline at end of file
diff --git a/typescript-version/public/vercel.svg b/typescript-version/public/vercel.svg
deleted file mode 100644
index d2f842227..000000000
--- a/typescript-version/public/vercel.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>
\ No newline at end of file
diff --git a/typescript-version/src/@core/components/mui/Avatar.tsx b/typescript-version/src/@core/components/mui/Avatar.tsx
deleted file mode 100644
index 92512c5c8..000000000
--- a/typescript-version/src/@core/components/mui/Avatar.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-'use client'
-
-// React Imports
-import { forwardRef } from 'react'
-
-// MUI Imports
-import MuiAvatar from '@mui/material/Avatar'
-import { lighten, styled } from '@mui/material/styles'
-import type { AvatarProps } from '@mui/material/Avatar'
-
-// Type Imports
-import type { ThemeColor } from '@core/types'
-
-export type CustomAvatarProps = AvatarProps & {
-  color?: ThemeColor
-  skin?: 'filled' | 'light' | 'light-static'
-  size?: number
-}
-
-const Avatar = styled(MuiAvatar)<CustomAvatarProps>(({ skin, color, size, theme }) => {
-  return {
-    ...(color &&
-      skin === 'light' && {
-        backgroundColor: `var(--mui-palette-${color}-lightOpacity)`,
-        color: `var(--mui-palette-${color}-main)`
-      }),
-    ...(color &&
-      skin === 'light-static' && {
-        backgroundColor: lighten(theme.palette[color as ThemeColor].main, 0.84),
-        color: `var(--mui-palette-${color}-main)`
-      }),
-    ...(color &&
-      skin === 'filled' && {
-        backgroundColor: `var(--mui-palette-${color}-main)`,
-        color: `var(--mui-palette-${color}-contrastText)`
-      }),
-    ...(size && {
-      height: size,
-      width: size
-    })
-  }
-})
-
-const CustomAvatar = forwardRef<HTMLDivElement, CustomAvatarProps>((props: CustomAvatarProps, ref) => {
-  // Props
-  const { color, skin = 'filled', ...rest } = props
-
-  return <Avatar color={color} skin={skin} ref={ref} {...rest} />
-})
-
-export default CustomAvatar
diff --git a/typescript-version/src/@core/components/mui/IconButton.tsx b/typescript-version/src/@core/components/mui/IconButton.tsx
deleted file mode 100644
index 9a609f2b9..000000000
--- a/typescript-version/src/@core/components/mui/IconButton.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-'use client'
-
-import MuiButton from '@mui/material/Button'
-import { styled } from '@mui/material/styles'
-
-// Config Imports
-import themeConfig from '@configs/themeConfig'
-
-const CustomIconButton = styled(MuiButton)(({ color, size, theme, variant }) => {
-  return {
-    minInlineSize: 0,
-    ...(size === 'small'
-      ? {
-          fontSize: '20px',
-          padding: theme.spacing(variant === 'outlined' ? 1 : 1.25),
-          '& i, & svg': {
-            fontSize: 'inherit'
-          }
-        }
-      : {
-          ...(size === 'large'
-            ? {
-                fontSize: '24px',
-                padding: theme.spacing(variant === 'outlined' ? 2 : 2.25),
-                '& i, & svg': {
-                  fontSize: 'inherit'
-                }
-              }
-            : {
-                fontSize: '22px',
-                padding: theme.spacing(variant === 'outlined' ? 1.5 : 1.75),
-                '& i, & svg': {
-                  fontSize: 'inherit'
-                }
-              })
-        }),
-    ...(!color && {
-      color: 'var(--mui-palette-action-active)',
-      '&:not(.Mui-disabled):hover, &:not(.Mui-disabled):active': {
-        backgroundColor: 'rgb(var(--mui-palette-text-primaryChannel) / 0.08)'
-      },
-      ...(themeConfig.disableRipple && {
-        '&.Mui-focusVisible:not(.Mui-disabled)': {
-          backgroundColor: 'rgb(var(--mui-palette-text-primaryChannel) / 0.08)'
-        }
-      }),
-      '&.Mui-disabled': {
-        opacity: 0.45,
-        color: 'var(--mui-palette-action-active)'
-      },
-      ...(variant === 'outlined' && {
-        border: 'none !important',
-        ...(size === 'small'
-          ? {
-              padding: theme.spacing(1.5)
-            }
-          : {
-              ...(size === 'large'
-                ? {
-                    padding: theme.spacing(2.25)
-                  }
-                : {
-                    padding: theme.spacing(1.75)
-                  })
-            })
-      }),
-      ...(variant === 'contained' && {
-        boxShadow: 'none !important',
-        backgroundColor: 'transparent'
-      })
-    })
-  }
-}) as typeof MuiButton
-
-export default CustomIconButton
diff --git a/typescript-version/src/@core/components/option-menu/index.tsx b/typescript-version/src/@core/components/option-menu/index.tsx
deleted file mode 100644
index d78809083..000000000
--- a/typescript-version/src/@core/components/option-menu/index.tsx
+++ /dev/null
@@ -1,135 +0,0 @@
-'use client'
-
-// React Imports
-import { useRef, useState } from 'react'
-import type { ReactElement, ReactNode, SyntheticEvent } from 'react'
-
-// Next Imports
-import Link from 'next/link'
-
-// MUI Imports
-import Tooltip from '@mui/material/Tooltip'
-import Box from '@mui/material/Box'
-import Popper from '@mui/material/Popper'
-import MenuItem from '@mui/material/MenuItem'
-import MenuList from '@mui/material/MenuList'
-import ClickAwayListener from '@mui/material/ClickAwayListener'
-import Fade from '@mui/material/Fade'
-import Paper from '@mui/material/Paper'
-import IconButton from '@mui/material/IconButton'
-import Divider from '@mui/material/Divider'
-
-// Third-party Imports
-import classnames from 'classnames'
-
-// Type Imports
-import type { OptionsMenuType, OptionType, OptionMenuItemType } from './types'
-
-const IconButtonWrapper = (props: Pick<OptionsMenuType, 'tooltipProps'> & { children: ReactElement }) => {
-  // Props
-  const { tooltipProps, children } = props
-
-  return tooltipProps?.title ? <Tooltip {...tooltipProps}>{children}</Tooltip> : children
-}
-
-const MenuItemWrapper = ({ children, option }: { children: ReactNode; option: OptionMenuItemType }) => {
-  if (option.href) {
-    return (
-      <Box component={Link} href={option.href} {...option.linkProps}>
-        {children}
-      </Box>
-    )
-  } else {
-    return <>{children}</>
-  }
-}
-
-const OptionMenu = (props: OptionsMenuType) => {
-  // Props
-  const { tooltipProps, icon, iconClassName, options, leftAlignMenu, iconButtonProps } = props
-
-  // States
-  const [open, setOpen] = useState(false)
-
-  // Refs
-  const anchorRef = useRef<HTMLButtonElement>(null)
-
-  const handleToggle = () => {
-    setOpen(prevOpen => !prevOpen)
-  }
-
-  const handleClose = (event: Event | SyntheticEvent) => {
-    if (anchorRef.current && anchorRef.current.contains(event.target as HTMLElement)) {
-      return
-    }
-
-    setOpen(false)
-  }
-
-  return (
-    <>
-      <IconButtonWrapper tooltipProps={tooltipProps}>
-        <IconButton ref={anchorRef} size='small' onClick={handleToggle} {...iconButtonProps}>
-          {typeof icon === 'string' ? (
-            <i className={classnames(icon, iconClassName)} />
-          ) : (icon as ReactNode) ? (
-            icon
-          ) : (
-            <i className={classnames('ri-more-2-line', iconClassName)} />
-          )}
-        </IconButton>
-      </IconButtonWrapper>
-      <Popper
-        open={open}
-        anchorEl={anchorRef.current}
-        placement={leftAlignMenu ? 'bottom-start' : 'bottom-end'}
-        transition
-        disablePortal
-        sx={{ zIndex: 1 }}
-      >
-        {({ TransitionProps }) => (
-          <Fade {...TransitionProps}>
-            <Paper className='shadow-lg'>
-              <ClickAwayListener onClickAway={handleClose}>
-                <MenuList autoFocusItem={open}>
-                  {options.map((option: OptionType, index: number) => {
-                    if (typeof option === 'string') {
-                      return (
-                        <MenuItem key={index} onClick={handleClose}>
-                          {option}
-                        </MenuItem>
-                      )
-                    } else if ('divider' in option) {
-                      return option.divider && <Divider key={index} {...option.dividerProps} />
-                    } else {
-                      return (
-                        <MenuItem
-                          key={index}
-                          {...option.menuItemProps}
-                          {...(option.href && { className: 'p-0' })}
-                          onClick={e => {
-                            handleClose(e)
-                            option.menuItemProps && option.menuItemProps.onClick
-                              ? option.menuItemProps.onClick(e)
-                              : null
-                          }}
-                        >
-                          <MenuItemWrapper option={option}>
-                            {(typeof option.icon === 'string' ? <i className={option.icon} /> : option.icon) || null}
-                            {option.text}
-                          </MenuItemWrapper>
-                        </MenuItem>
-                      )
-                    }
-                  })}
-                </MenuList>
-              </ClickAwayListener>
-            </Paper>
-          </Fade>
-        )}
-      </Popper>
-    </>
-  )
-}
-
-export default OptionMenu
diff --git a/typescript-version/src/@core/components/option-menu/types.ts b/typescript-version/src/@core/components/option-menu/types.ts
deleted file mode 100644
index 795777f50..000000000
--- a/typescript-version/src/@core/components/option-menu/types.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-// React Imports
-import type { ReactNode } from 'react'
-
-// Next Imports
-import type { LinkProps } from 'next/link'
-
-// MUI Imports
-import type { IconButtonProps } from '@mui/material/IconButton'
-import type { MenuItemProps } from '@mui/material/MenuItem'
-import type { DividerProps } from '@mui/material/Divider'
-import type { BoxProps } from '@mui/material/Box'
-import type { TooltipProps } from '@mui/material/Tooltip'
-
-export type OptionDividerType = {
-  divider: boolean
-  dividerProps?: DividerProps
-  href?: never
-  icon?: never
-  text?: never
-  linkProps?: never
-  menuItemProps?: never
-}
-export type OptionMenuItemType = {
-  text: ReactNode
-  icon?: ReactNode
-  linkProps?: BoxProps
-  href?: LinkProps['href']
-  menuItemProps?: MenuItemProps
-  divider?: never
-  dividerProps?: never
-}
-
-export type OptionType = string | OptionDividerType | OptionMenuItemType
-
-export type OptionsMenuType = {
-  tooltipProps?: Omit<TooltipProps, 'children'>
-  icon?: ReactNode
-  iconClassName?: string
-  options: OptionType[]
-  leftAlignMenu?: boolean
-  iconButtonProps?: IconButtonProps
-}
diff --git a/typescript-version/src/@core/contexts/settingsContext.tsx b/typescript-version/src/@core/contexts/settingsContext.tsx
deleted file mode 100644
index b8a3df9c4..000000000
--- a/typescript-version/src/@core/contexts/settingsContext.tsx
+++ /dev/null
@@ -1,122 +0,0 @@
-'use client'
-
-// React Imports
-import type { ReactNode } from 'react'
-import { createContext, useMemo, useState } from 'react'
-
-// Type Imports
-import type { Mode } from '@core/types'
-
-// Config Imports
-import themeConfig from '@configs/themeConfig'
-
-// Hook Imports
-import { useObjectCookie } from '@core/hooks/useObjectCookie'
-
-// Settings type
-export type Settings = {
-  mode?: Mode
-}
-
-// UpdateSettingsOptions type
-type UpdateSettingsOptions = {
-  updateCookie?: boolean
-}
-
-// SettingsContextProps type
-type SettingsContextProps = {
-  settings: Settings
-  updateSettings: (settings: Partial<Settings>, options?: UpdateSettingsOptions) => void
-  isSettingsChanged: boolean
-  resetSettings: () => void
-  updatePageSettings: (settings: Partial<Settings>) => () => void
-}
-
-type Props = {
-  children: ReactNode
-  settingsCookie: Settings | null
-  mode?: Mode
-}
-
-// Initial Settings Context
-export const SettingsContext = createContext<SettingsContextProps | null>(null)
-
-// Settings Provider
-export const SettingsProvider = (props: Props) => {
-  // Initial Settings
-  const initialSettings: Settings = {
-    mode: themeConfig.mode
-  }
-
-  const updatedInitialSettings = {
-    ...initialSettings,
-    mode: props.mode || themeConfig.mode
-  }
-
-  // Cookies
-  const [settingsCookie, updateSettingsCookie] = useObjectCookie<Settings>(
-    themeConfig.settingsCookieName,
-    JSON.stringify(props.settingsCookie) !== '{}' ? props.settingsCookie : updatedInitialSettings
-  )
-
-  // State
-  const [_settingsState, _updateSettingsState] = useState<Settings>(
-    JSON.stringify(settingsCookie) !== '{}' ? settingsCookie : updatedInitialSettings
-  )
-
-  const updateSettings = (settings: Partial<Settings>, options?: UpdateSettingsOptions) => {
-    const { updateCookie = true } = options || {}
-
-    _updateSettingsState(prev => {
-      const newSettings = { ...prev, ...settings }
-
-      // Update cookie if needed
-      if (updateCookie) updateSettingsCookie(newSettings)
-
-      return newSettings
-    })
-  }
-
-  /**
-   * Updates the settings for page with the provided settings object.
-   * Updated settings won't be saved to cookie hence will be reverted once navigating away from the page.
-   *
-   * @param settings - The partial settings object containing the properties to update.
-   * @returns A function to reset the page settings.
-   *
-   * @example
-   * useEffect(() => {
-   *     return updatePageSettings({ theme: 'dark' });
-   * }, []);
-   */
-  const updatePageSettings = (settings: Partial<Settings>): (() => void) => {
-    updateSettings(settings, { updateCookie: false })
-
-    // Returns a function to reset the page settings
-    return () => updateSettings(settingsCookie, { updateCookie: false })
-  }
-
-  const resetSettings = () => {
-    updateSettings(initialSettings)
-  }
-
-  const isSettingsChanged = useMemo(
-    () => JSON.stringify(initialSettings) !== JSON.stringify(_settingsState),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [_settingsState]
-  )
-
-  return (
-    <SettingsContext.Provider
-      value={{
-        settings: _settingsState,
-        updateSettings,
-        isSettingsChanged,
-        resetSettings,
-        updatePageSettings
-      }}
-    >
-      {props.children}
-    </SettingsContext.Provider>
-  )
-}
diff --git a/typescript-version/src/@core/hooks/useImageVariant.ts b/typescript-version/src/@core/hooks/useImageVariant.ts
deleted file mode 100644
index f98c21580..000000000
--- a/typescript-version/src/@core/hooks/useImageVariant.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-// React Imports
-import { useMemo } from 'react'
-
-// Third-party imports
-import { useColorScheme } from '@mui/material'
-
-// Type imports
-import type { Mode } from '@core/types'
-
-export const useImageVariant = (mode: Mode, imgLight: string, imgDark: string): string => {
-  // Hooks
-  const { mode: muiMode } = useColorScheme()
-
-  return useMemo(() => {
-    const isServer = typeof window === 'undefined'
-
-    const currentMode = (() => {
-      if (isServer) return mode
-
-      return muiMode
-    })()
-
-    const isDarkMode = currentMode === 'dark'
-
-    return isDarkMode ? imgDark : imgLight
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [mode, muiMode])
-}
diff --git a/typescript-version/src/@core/hooks/useObjectCookie.ts b/typescript-version/src/@core/hooks/useObjectCookie.ts
deleted file mode 100644
index 0c1f7d0f5..000000000
--- a/typescript-version/src/@core/hooks/useObjectCookie.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-// React Imports
-import { useMemo } from 'react'
-
-// Third-party Imports
-import { useCookie } from 'react-use'
-
-export const useObjectCookie = <T>(key: string, fallback?: T | null): [T, (newVal: T) => void] => {
-  // Hooks
-  const [valStr, updateCookie] = useCookie(key)
-
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const value = useMemo<T>(() => (valStr ? JSON.parse(valStr) : fallback), [valStr])
-
-  const updateValue = (newVal: T) => {
-    updateCookie(JSON.stringify(newVal))
-  }
-
-  return [value, updateValue]
-}
diff --git a/typescript-version/src/@core/hooks/useSettings.tsx b/typescript-version/src/@core/hooks/useSettings.tsx
deleted file mode 100644
index 0844fde82..000000000
--- a/typescript-version/src/@core/hooks/useSettings.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-// React Imports
-import { useContext } from 'react'
-
-// Context Imports
-import { SettingsContext } from '@core/contexts/settingsContext'
-
-export const useSettings = () => {
-  // Hooks
-  const context = useContext(SettingsContext)
-
-  if (!context) {
-    throw new Error('useSettingsContext must be used within a SettingsProvider')
-  }
-
-  return context
-}
diff --git a/typescript-version/src/@core/styles/stepper.ts b/typescript-version/src/@core/styles/stepper.ts
deleted file mode 100644
index 9d2d0fe6b..000000000
--- a/typescript-version/src/@core/styles/stepper.ts
+++ /dev/null
@@ -1,103 +0,0 @@
-// MUI imports
-import Box from '@mui/material/Box'
-import { styled } from '@mui/material/styles'
-import type { BoxProps } from '@mui/material/Box'
-
-const StepperWrapper = styled(Box)<BoxProps>(({ theme }) => {
-  return {
-    [theme.breakpoints.down('md')]: {
-      '& .MuiStepper-horizontal:not(.MuiStepper-alternativeLabel)': {
-        flexDirection: 'column',
-        alignItems: 'flex-start'
-      }
-    },
-    '& .MuiStep-root': {
-      '& .MuiStepLabel-iconContainer:empty': {
-        display: 'none'
-      },
-      '& .step-label': {
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center'
-      },
-      '& .step-number': {
-        ...theme.typography.h4,
-        marginRight: theme.spacing(2)
-      },
-      '&:not(:has(.step-subtitle)) .step-number': {
-        ...theme.typography.h6
-      },
-      '& .step-title': {
-        ...theme.typography.body1,
-        letterSpacing: 0.15,
-        fontWeight: 500
-      },
-      '& .step-subtitle': {
-        ...theme.typography.body2,
-        color: 'var(--mui-palette-text-secondary)'
-      },
-      '& .MuiStepLabel-root.Mui-disabled': {
-        '& .step-number': {
-          color: 'var(--mui-palette-text-disabled)'
-        }
-      },
-      '& .Mui-error': {
-        '& .MuiStepLabel-labelContainer, & .step-number, & .step-title, & .step-subtitle': {
-          color: 'var(--mui-palette-error-main)'
-        }
-      }
-    },
-    '& .MuiStepConnector-root': {
-      '& .MuiStepConnector-line': {
-        borderBlockStartWidth: 3,
-        borderRadius: 3
-      },
-      '&.Mui-active, &.Mui-completed': {
-        '& .MuiStepConnector-line': {
-          borderColor: 'var(--mui-palette-primary-main)'
-        }
-      },
-      '&.Mui-disabled .MuiStepConnector-line': {
-        borderColor: 'var(--mui-palette-primary-lightOpacity)'
-      }
-    },
-    '& .MuiStepper-alternativeLabel': {
-      '& .MuiStepConnector-root': {
-        top: 9
-      },
-      '& .MuiStepLabel-labelContainer': {
-        display: 'flex',
-        alignItems: 'center',
-        flexDirection: 'column'
-      }
-    },
-    '& .MuiStepper-vertical': {
-      '& .MuiStep-root': {
-        '& .step-label': {
-          justifyContent: 'flex-start'
-        },
-        '& .MuiStepContent-root': {
-          borderInlineStartWidth: 3,
-          marginLeft: theme.spacing(2.25),
-          borderColor: 'var(--mui-palette-primary-main)'
-        },
-        '& .button-wrapper': {
-          marginTop: theme.spacing(4)
-        },
-        '&.active + .MuiStepConnector-root .MuiStepConnector-line': {
-          borderColor: 'var(--mui-palette-primary-main)'
-        }
-      },
-      '& .MuiStepConnector-root': {
-        marginLeft: theme.spacing(2.25),
-        '& .MuiStepConnector-line': {
-          borderBlockStartWidth: 0,
-          borderInlineStartWidth: 3,
-          borderRadius: 0
-        }
-      }
-    }
-  }
-})
-
-export default StepperWrapper
diff --git a/typescript-version/src/@core/styles/table.module.css b/typescript-version/src/@core/styles/table.module.css
deleted file mode 100644
index 22d3c9b38..000000000
--- a/typescript-version/src/@core/styles/table.module.css
+++ /dev/null
@@ -1,92 +0,0 @@
-.table {
-  inline-size: 100%;
-  border-collapse: collapse;
-  font-size: 0.875rem;
-  white-space: nowrap;
-
-  [align='right'] > * {
-    text-align: end;
-  }
-  [align='center'] > * {
-    text-align: center;
-  }
-
-  thead {
-    text-transform: uppercase;
-    color: var(--mui-palette-text-primary);
-
-    th {
-      font-weight: 500;
-      font-size: 0.8125rem;
-      letter-spacing: 0.2px;
-      line-height: 1.8462;
-      text-align: start;
-      block-size: 56px;
-      background-color: var(--mui-palette-customColors-tableHeaderBg);
-      &:not(:first-of-type):not(:last-of-type) {
-        padding-block: 0.5rem;
-        padding-inline: 1rem;
-      }
-      &:first-of-type {
-        &:not(:has(input[type='checkbox'])) {
-          padding-block: 0.5rem;
-          padding-inline: 1.25rem 1rem;
-        }
-        &:has(input[type='checkbox']) {
-          padding-inline-start: 0.6875rem;
-        }
-      }
-      &:last-of-type {
-        padding-block: 0.5rem;
-        padding-inline: 1rem 1.25rem;
-      }
-    }
-  }
-
-  tbody {
-    color: var(--mui-palette-text-secondary);
-
-    th,
-    td {
-      font-size: 0.9375rem;
-      line-height: 1.4667;
-      block-size: 50px;
-      &:not(:first-of-type):not(:last-of-type) {
-        padding-block: 0.5rem;
-        padding-inline: 1rem;
-      }
-      &:first-of-type {
-        &:not(:has(input[type='checkbox'])) {
-          padding-block: 0.5rem;
-          padding-inline: 1.25rem 1rem;
-        }
-        &:has(input[type='checkbox']) {
-          padding-inline-start: 0.6875rem;
-        }
-      }
-      &:last-of-type {
-        padding-block: 0.5rem;
-        padding-inline: 1rem 1.25rem;
-      }
-    }
-
-    tr:not(:last-child) {
-      border-block-end: 1px solid var(--border-color);
-    }
-  }
-}
-
-.cellWithInput input {
-  inline-size: 100%;
-  background-color: transparent;
-  font-size: inherit;
-  color: inherit;
-  border-radius: var(--mui-shape-customBorderRadius-sm);
-  padding-block: 6px;
-  padding-inline: 10px;
-  margin-inline: -10px;
-
-  &:focus-visible {
-    outline: 1px solid var(--mui-palette-primary-main);
-  }
-}
diff --git a/typescript-version/src/@core/styles/vertical/menuItemStyles.ts b/typescript-version/src/@core/styles/vertical/menuItemStyles.ts
deleted file mode 100644
index 98c5a5cc8..000000000
--- a/typescript-version/src/@core/styles/vertical/menuItemStyles.ts
+++ /dev/null
@@ -1,99 +0,0 @@
-// MUI Imports
-import { lighten } from '@mui/material/styles'
-import type { Theme } from '@mui/material/styles'
-
-// Type Imports
-import type { MenuItemStyles } from '@menu/types'
-
-// Util Imports
-import { menuClasses } from '@menu/utils/menuClasses'
-
-const menuItemStyles = (theme: Theme): MenuItemStyles => {
-  return {
-    root: {
-      marginBlockStart: theme.spacing(1.5),
-      [`&.${menuClasses.subMenuRoot}.${menuClasses.open} > .${menuClasses.button}, &.${menuClasses.subMenuRoot} > .${menuClasses.button}.${menuClasses.active}`]:
-        {
-          backgroundColor: 'var(--mui-palette-action-selected) !important'
-        },
-      [`&.${menuClasses.disabled} > .${menuClasses.button}`]: {
-        color: 'var(--mui-palette-text-disabled)',
-        [`& .${menuClasses.icon}`]: {
-          color: 'inherit'
-        }
-      },
-      [`&:not(.${menuClasses.subMenuRoot}) > .${menuClasses.button}.${menuClasses.active}`]: {
-        color: 'var(--mui-palette-primary-contrastText)',
-        background:
-          theme.direction === 'ltr'
-            ? `linear-gradient(270deg, var(--mui-palette-primary-main), ${lighten(
-                theme.palette.primary.main,
-                0.5
-              )} 100%)`
-            : `linear-gradient(270deg, ${lighten(
-                theme.palette.primary.main,
-                0.5
-              )}, var(--mui-palette-primary-main) 100%)`,
-        [`& .${menuClasses.icon}`]: {
-          color: 'inherit'
-        }
-      }
-    },
-    button: ({ active }) => ({
-      paddingBlock: theme.spacing(2),
-      '&:has(.MuiChip-root)': {
-        paddingBlock: theme.spacing(1.75)
-      },
-      paddingInlineStart: theme.spacing(5.5),
-      paddingInlineEnd: theme.spacing(3.5),
-      borderStartEndRadius: 50,
-      borderEndEndRadius: 50,
-      ...(!active && {
-        '&:hover, &:focus-visible': {
-          backgroundColor: 'var(--mui-palette-action-hover)'
-        },
-        '&[aria-expanded="true"]': {
-          backgroundColor: 'var(--mui-palette-action-selected)'
-        }
-      })
-    }),
-    icon: ({ level }) => ({
-      ...(level === 0 && {
-        fontSize: '1.375rem',
-        marginInlineEnd: theme.spacing(2)
-      }),
-      ...(level > 0 && {
-        fontSize: '0.75rem',
-        color: 'var(--mui-palette-text-secondary)',
-        marginInlineEnd: theme.spacing(3.5)
-      }),
-      ...(level === 1 && {
-        marginInlineStart: theme.spacing(1.5)
-      }),
-      ...(level > 1 && {
-        marginInlineStart: theme.spacing(1.5 + 2.5 * (level - 1))
-      }),
-      '& > i, & > svg': {
-        fontSize: 'inherit'
-      }
-    }),
-    prefix: {
-      marginInlineEnd: theme.spacing(2)
-    },
-    suffix: {
-      marginInlineStart: theme.spacing(2)
-    },
-    subMenuExpandIcon: {
-      fontSize: '1.375rem',
-      marginInlineStart: theme.spacing(2),
-      '& i, & svg': {
-        fontSize: 'inherit'
-      }
-    },
-    subMenuContent: {
-      backgroundColor: 'transparent'
-    }
-  }
-}
-
-export default menuItemStyles
diff --git a/typescript-version/src/@core/styles/vertical/menuSectionStyles.ts b/typescript-version/src/@core/styles/vertical/menuSectionStyles.ts
deleted file mode 100644
index b3282fd52..000000000
--- a/typescript-version/src/@core/styles/vertical/menuSectionStyles.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-// MUI Imports
-import type { Theme } from '@mui/material/styles'
-
-// Type Imports
-import type { MenuProps } from '@menu/vertical-menu'
-
-// Util Imports
-import { menuClasses } from '@menu/utils/menuClasses'
-
-const menuSectionStyles = (theme: Theme): MenuProps['menuSectionStyles'] => {
-  return {
-    root: {
-      marginBlockStart: theme.spacing(7),
-      [`& .${menuClasses.menuSectionContent}`]: {
-        color: 'var(--mui-palette-text-disabled)',
-        paddingInline: '0 !important',
-        paddingBlock: `${theme.spacing(1.75)} !important`,
-        gap: theme.spacing(2.5),
-
-        '&:before': {
-          content: '""',
-          blockSize: 1,
-          inlineSize: '0.875rem',
-          backgroundColor: 'var(--mui-palette-divider)'
-        },
-        '&:after': {
-          content: '""',
-          blockSize: 1,
-          flexGrow: 1,
-          backgroundColor: 'var(--mui-palette-divider)'
-        }
-      },
-      [`& .${menuClasses.menuSectionLabel}`]: {
-        flexGrow: 0,
-        fontSize: '13px',
-        lineHeight: 1.38462
-      }
-    }
-  }
-}
-
-export default menuSectionStyles
diff --git a/typescript-version/src/@core/styles/vertical/navigationCustomStyles.ts b/typescript-version/src/@core/styles/vertical/navigationCustomStyles.ts
deleted file mode 100644
index 58a4c857d..000000000
--- a/typescript-version/src/@core/styles/vertical/navigationCustomStyles.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-// MUI Imports
-import type { Theme } from '@mui/material/styles'
-
-// Util Imports
-import { menuClasses, verticalNavClasses } from '@menu/utils/menuClasses'
-
-const navigationCustomStyles = (theme: Theme) => {
-  return {
-    color: 'var(--mui-palette-text-primary)',
-    zIndex: 'var(--drawer-z-index) !important',
-    [`& .${verticalNavClasses.bgColorContainer}`]: {
-      backgroundColor: 'var(--mui-palette-background-default)'
-    },
-    [`& .${verticalNavClasses.header}`]: {
-      paddingBlock: theme.spacing(5),
-      paddingInline: theme.spacing(5.5, 4)
-    },
-    [`& .${verticalNavClasses.container}`]: {
-      transition: 'none',
-      borderColor: 'transparent',
-      [`& .${verticalNavClasses.toggled}`]: {
-        boxShadow: 'var(--mui-customShadows-lg)'
-      }
-    },
-    [`& .${menuClasses.root}`]: {
-      paddingBlockEnd: theme.spacing(2),
-      paddingInlineEnd: theme.spacing(4)
-    },
-    [`& .${verticalNavClasses.backdrop}`]: {
-      backgroundColor: 'var(--backdrop-color)'
-    }
-  }
-}
-
-export default navigationCustomStyles
diff --git a/typescript-version/src/@core/svg/Logo.tsx b/typescript-version/src/@core/svg/Logo.tsx
deleted file mode 100644
index 31d5dea4f..000000000
--- a/typescript-version/src/@core/svg/Logo.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-// React Imports
-import type { SVGAttributes } from 'react'
-
-const Logo = (props: SVGAttributes<SVGElement>) => {
-  return (
-    <svg width='1.2658em' height='1em' viewBox='0 0 100 79' fill='none' xmlns='http://www.w3.org/2000/svg' {...props}>
-      <path
-        fillRule='evenodd'
-        clipRule='evenodd'
-        d='M4.92008 0.501904L22.662 11.4573C23.614 12.0451 24.1936 13.0844 24.1936 14.2036V64.2521C24.1936 65.3871 23.5976 66.4387 22.6241 67.0214L4.8822 77.6429C3.35344 78.5581 1.37254 78.0602 0.457741 76.5307C0.158194 76.0299 0 75.4572 0 74.8736V3.24818C0 1.46582 1.44424 0.0209274 3.22581 0.0209274C3.82422 0.0209274 4.41085 0.18746 4.92008 0.501904Z'
-        fill='currentColor'
-      />
-      <path
-        opacity='0.077704'
-        fillRule='evenodd'
-        clipRule='evenodd'
-        d='M0 26.1063L24.1936 39.9852V53.5915L0 26.1063Z'
-        fill='black'
-      />
-      <path
-        opacity='0.077704'
-        fillRule='evenodd'
-        clipRule='evenodd'
-        d='M0 26.1063L24.1936 39.6319V47.9438L0 26.1063Z'
-        fill='black'
-      />
-      <path
-        fillRule='evenodd'
-        clipRule='evenodd'
-        d='M95.084 0.489601L77.3421 11.4083C76.3878 11.9956 75.8064 13.0362 75.8064 14.1571V64.2526C75.8064 65.3875 76.4024 66.4391 77.3759 67.0219L95.1178 77.6433C96.6466 78.5585 98.6275 78.0606 99.5423 76.5312C99.8418 76.0303 100 75.4576 100 74.874V3.23842C100 1.45605 98.5558 0.0111618 96.7742 0.0111618C96.1774 0.0111618 95.5923 0.176782 95.084 0.489601Z'
-        fill='currentColor'
-      />
-      <path
-        opacity='0.077704'
-        fillRule='evenodd'
-        clipRule='evenodd'
-        d='M100 26.1063L75.8064 39.956V54.0023L100 26.1063Z'
-        fill='black'
-      />
-      <path
-        opacity='0.077704'
-        fillRule='evenodd'
-        clipRule='evenodd'
-        d='M100 26.1063L75.8064 39.6199V48.3546L100 26.1063Z'
-        fill='black'
-      />
-      <path
-        fillRule='evenodd'
-        clipRule='evenodd'
-        d='M4.91149 0.475694L50 28.123V54.7479L0 26.0986V3.22726C0 1.44489 1.44424 0 3.22581 0C3.8208 0 4.4042 0.164633 4.91149 0.475694Z'
-        fill='currentColor'
-      />
-      <path
-        fillRule='evenodd'
-        clipRule='evenodd'
-        d='M4.91149 0.475694L50 28.123V54.7479L0 26.0986V3.22726C0 1.44489 1.44424 0 3.22581 0C3.8208 0 4.4042 0.164633 4.91149 0.475694Z'
-        fill='white'
-        fillOpacity='0.15'
-      />
-      <path
-        fillRule='evenodd'
-        clipRule='evenodd'
-        d='M95.0885 0.475694L50 28.123V54.7479L100 26.0986V3.22726C100 1.44489 98.5558 0 96.7742 0C96.1792 0 95.5958 0.164633 95.0885 0.475694Z'
-        fill='currentColor'
-      />
-      <path
-        fillRule='evenodd'
-        clipRule='evenodd'
-        d='M95.0885 0.475694L50 28.123V54.7479L100 26.0986V3.22726C100 1.44489 98.5558 0 96.7742 0C96.1792 0 95.5958 0.164633 95.0885 0.475694Z'
-        fill='white'
-        fillOpacity='0.3'
-      />
-    </svg>
-  )
-}
-
-export default Logo
diff --git a/typescript-version/src/@core/tailwind/plugin.ts b/typescript-version/src/@core/tailwind/plugin.ts
deleted file mode 100644
index ce91f0520..000000000
--- a/typescript-version/src/@core/tailwind/plugin.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-import plugin from 'tailwindcss/plugin'
-
-module.exports = plugin(function () {}, {
-  theme: {
-    borderColor: ({ theme }) => ({
-      ...theme('colors'),
-      DEFAULT: 'var(--border-color, currentColor)'
-    }),
-    borderRadius: {
-      none: '0px',
-      xs: 'var(--mui-shape-customBorderRadius-xs)',
-      sm: 'var(--mui-shape-customBorderRadius-sm)',
-      DEFAULT: '0.375rem',
-      md: 'var(--mui-shape-customBorderRadius-md)',
-      lg: 'var(--mui-shape-customBorderRadius-lg)',
-      xl: 'var(--mui-shape-customBorderRadius-xl)',
-      '2xl': '0.75rem',
-      '3xl': '1rem',
-      '4xl': '1.5rem',
-      full: '9999px'
-    },
-    screens: {
-      sm: '600px',
-      md: '900px',
-      lg: '1200px',
-      xl: '1536px',
-      '2xl': '1920px'
-    },
-    extend: {
-      boxShadow: {
-        xs: 'var(--mui-customShadows-xs)',
-        sm: 'var(--mui-customShadows-sm)',
-        DEFAULT: 'var(--mui-customShadows-md)',
-        md: 'var(--mui-customShadows-md)',
-        lg: 'var(--mui-customShadows-lg)',
-        xl: 'var(--mui-customShadows-xl)'
-      },
-      colors: {
-        primary: 'var(--primary-color)',
-        primaryLight: 'var(--mui-palette-primary-lightOpacity)',
-        primaryLighter: 'var(--mui-palette-primary-lighterOpacity)',
-        secondary: 'var(--mui-palette-secondary-main)',
-        error: 'var(--mui-palette-error-main)',
-        errorLight: 'var(--mui-palette-error-lightOpacity)',
-        errorLighter: 'var(--mui-palette-error-lighterOpacity)',
-        warning: 'var(--mui-palette-warning-main)',
-        info: 'var(--mui-palette-info-main)',
-        success: 'var(--mui-palette-success-main)',
-        textPrimary: 'var(--mui-palette-text-primary)',
-        textSecondary: 'var(--mui-palette-text-secondary)',
-        textDisabled: 'var(--mui-palette-text-disabled)',
-        actionActive: 'var(--mui-palette-action-active)',
-        actionHover: 'var(--mui-palette-action-hover)',
-        actionSelected: 'var(--mui-palette-action-selected)',
-        actionFocus: 'var(--mui-palette-action-focus)',
-        backgroundPaper: 'var(--mui-palette-background-paper)',
-        backgroundDefault: 'var(--mui-palette-background-default)',
-        track: 'var(--mui-palette-customColors-trackBg)',
-        backdrop: 'var(--backdrop-color)',
-        facebook: '#497ce2',
-        twitter: '#1da1f2',
-        github: '#272727',
-        googlePlus: '#db4437'
-      },
-      zIndex: {
-        header: 'var(--header-z-index)',
-        footer: 'var(--footer-z-index)',
-        customizer: 'var(--customizer-z-index)',
-        search: 'var(--search-z-index)',
-        drawer: 'var(--drawer-z-index)'
-      }
-    }
-  }
-})
diff --git a/typescript-version/src/@core/theme/colorSchemes.ts b/typescript-version/src/@core/theme/colorSchemes.ts
deleted file mode 100644
index 544c4bb61..000000000
--- a/typescript-version/src/@core/theme/colorSchemes.ts
+++ /dev/null
@@ -1,329 +0,0 @@
-// MUI Imports
-import type { Theme } from '@mui/material/styles'
-
-const colorSchemes = (): Theme['colorSchemes'] => {
-  const skin = 'default' as string
-
-  return {
-    light: {
-      palette: {
-        primary: {
-          main: '#8C57FF',
-          light: '#A379FF',
-          dark: '#7E4EE6',
-          lighterOpacity: 'rgb(var(--mui-palette-primary-mainChannel) / 0.08)',
-          lightOpacity: 'rgb(var(--mui-palette-primary-mainChannel) / 0.16)',
-          mainOpacity: 'rgb(var(--mui-palette-primary-mainChannel) / 0.24)',
-          darkOpacity: 'rgb(var(--mui-palette-primary-mainChannel) / 0.32)',
-          darkerOpacity: 'rgb(var(--mui-palette-primary-mainChannel) / 0.38)'
-        },
-        secondary: {
-          main: '#8A8D93',
-          light: '#A1A4A9',
-          dark: '#7C7F84',
-          contrastText: '#fff',
-          lighterOpacity: 'rgb(var(--mui-palette-secondary-mainChannel) / 0.08)',
-          lightOpacity: 'rgb(var(--mui-palette-secondary-mainChannel) / 0.16)',
-          mainOpacity: 'rgb(var(--mui-palette-secondary-mainChannel) / 0.24)',
-          darkOpacity: 'rgb(var(--mui-palette-secondary-mainChannel) / 0.32)',
-          darkerOpacity: 'rgb(var(--mui-palette-secondary-mainChannel) / 0.38)'
-        },
-        error: {
-          main: '#FF4C51',
-          light: '#FF7074',
-          dark: '#E64449',
-          contrastText: '#fff',
-          lighterOpacity: 'rgb(var(--mui-palette-error-mainChannel) / 0.08)',
-          lightOpacity: 'rgb(var(--mui-palette-error-mainChannel) / 0.16)',
-          mainOpacity: 'rgb(var(--mui-palette-error-mainChannel) / 0.24)',
-          darkOpacity: 'rgb(var(--mui-palette-error-mainChannel) / 0.32)',
-          darkerOpacity: 'rgb(var(--mui-palette-error-mainChannel) / 0.38)'
-        },
-        warning: {
-          main: '#FFB400',
-          light: '#FFC333',
-          dark: '#E6A200',
-          contrastText: '#fff',
-          lighterOpacity: 'rgb(var(--mui-palette-warning-mainChannel) / 0.08)',
-          lightOpacity: 'rgb(var(--mui-palette-warning-mainChannel) / 0.16)',
-          mainOpacity: 'rgb(var(--mui-palette-warning-mainChannel) / 0.24)',
-          darkOpacity: 'rgb(var(--mui-palette-warning-mainChannel) / 0.32)',
-          darkerOpacity: 'rgb(var(--mui-palette-warning-mainChannel) / 0.38)'
-        },
-        info: {
-          main: '#16B1FF',
-          light: '#45C1FF',
-          dark: '#149FE6',
-          contrastText: '#fff',
-          lighterOpacity: 'rgb(var(--mui-palette-info-mainChannel) / 0.08)',
-          lightOpacity: 'rgb(var(--mui-palette-info-mainChannel) / 0.16)',
-          mainOpacity: 'rgb(var(--mui-palette-info-mainChannel) / 0.24)',
-          darkOpacity: 'rgb(var(--mui-palette-info-mainChannel) / 0.32)',
-          darkerOpacity: 'rgb(var(--mui-palette-info-mainChannel) / 0.38)'
-        },
-        success: {
-          main: '#56CA00',
-          light: '#78D533',
-          dark: '#4DB600',
-          contrastText: '#fff',
-          lighterOpacity: 'rgb(var(--mui-palette-success-mainChannel) / 0.08)',
-          lightOpacity: 'rgb(var(--mui-palette-success-mainChannel) / 0.16)',
-          mainOpacity: 'rgb(var(--mui-palette-success-mainChannel) / 0.24)',
-          darkOpacity: 'rgb(var(--mui-palette-success-mainChannel) / 0.32)',
-          darkerOpacity: 'rgb(var(--mui-palette-success-mainChannel) / 0.38)'
-        },
-        text: {
-          primary: `rgb(var(--mui-mainColorChannels-light) / 0.9)`,
-          secondary: `rgb(var(--mui-mainColorChannels-light) / 0.7)`,
-          disabled: `rgb(var(--mui-mainColorChannels-light) / 0.4)`,
-          primaryChannel: 'var(--mui-mainColorChannels-light)',
-          secondaryChannel: 'var(--mui-mainColorChannels-light)'
-        },
-        divider: `rgb(var(--mui-mainColorChannels-light) / 0.12)`,
-        dividerChannel: 'var(--mui-mainColorChannels-light)',
-        background: {
-          default: skin === 'bordered' ? '#FFFFFF' : '#F4F5FA',
-          paper: '#FFFFFF'
-        },
-        action: {
-          active: `rgb(var(--mui-mainColorChannels-light) / 0.6)`,
-          hover: `rgb(var(--mui-mainColorChannels-light) / 0.04)`,
-          selected: `rgb(var(--mui-mainColorChannels-light) / 0.08)`,
-          disabled: `rgb(var(--mui-mainColorChannels-light) / 0.3)`,
-          disabledBackground: `rgb(var(--mui-mainColorChannels-light) / 0.12)`,
-          focus: `rgb(var(--mui-mainColorChannels-light) / 0.1)`,
-          focusOpacity: 0.1,
-          activeChannel: 'var(--mui-mainColorChannels-light)',
-          selectedChannel: 'var(--mui-mainColorChannels-light)'
-        },
-        Alert: {
-          errorColor: 'var(--mui-palette-error-main)',
-          warningColor: 'var(--mui-palette-warning-main)',
-          infoColor: 'var(--mui-palette-info-main)',
-          successColor: 'var(--mui-palette-success-main)',
-          errorStandardBg: 'var(--mui-palette-error-lightOpacity)',
-          warningStandardBg: 'var(--mui-palette-warning-lightOpacity)',
-          infoStandardBg: 'var(--mui-palette-info-lightOpacity)',
-          successStandardBg: 'var(--mui-palette-success-lightOpacity)',
-          errorFilledColor: 'var(--mui-palette-error-contrastText)',
-          warningFilledColor: 'var(--mui-palette-warning-contrastText)',
-          infoFilledColor: 'var(--mui-palette-info-contrastText)',
-          successFilledColor: 'var(--mui-palette-success-contrastText)',
-          errorFilledBg: 'var(--mui-palette-error-main)',
-          warningFilledBg: 'var(--mui-palette-warning-main)',
-          infoFilledBg: 'var(--mui-palette-info-main)',
-          successFilledBg: 'var(--mui-palette-success-main)'
-        },
-        Avatar: {
-          defaultBg: '#F0EFF0'
-        },
-        Chip: {
-          defaultBorder: 'var(--mui-palette-divider)'
-        },
-        FilledInput: {
-          bg: `rgb(var(--mui-mainColorChannels-light) / 0.06)`,
-          hoverBg: `rgb(var(--mui-mainColorChannels-light) / 0.08)`,
-          disabledBg: `rgb(var(--mui-mainColorChannels-light) / 0.06)`
-        },
-        LinearProgress: {
-          primaryBg: 'var(--mui-palette-primary-mainOpacity)',
-          secondaryBg: 'var(--mui-palette-secondary-mainOpacity)',
-          errorBg: 'var(--mui-palette-error-mainOpacity)',
-          warningBg: 'var(--mui-palette-warning-mainOpacity)',
-          infoBg: 'var(--mui-palette-info-mainOpacity)',
-          successBg: 'var(--mui-palette-success-mainOpacity)'
-        },
-        SnackbarContent: {
-          bg: '#1A0E33',
-          color: 'var(--mui-palette-background-paper)'
-        },
-        Switch: {
-          defaultColor: 'var(--mui-palette-common-white)',
-          defaultDisabledColor: 'var(--mui-palette-common-white)',
-          primaryDisabledColor: 'var(--mui-palette-common-white)',
-          secondaryDisabledColor: 'var(--mui-palette-common-white)',
-          errorDisabledColor: 'var(--mui-palette-common-white)',
-          warningDisabledColor: 'var(--mui-palette-common-white)',
-          infoDisabledColor: 'var(--mui-palette-common-white)',
-          successDisabledColor: 'var(--mui-palette-common-white)'
-        },
-        Tooltip: {
-          bg: '#1A0E33'
-        },
-        TableCell: {
-          border: 'var(--mui-palette-divider)'
-        },
-        customColors: {
-          bodyBg: '#F4F5FA',
-          chatBg: '#F7F6FA',
-          greyLightBg: '#FAFAFA',
-          inputBorder: `rgb(var(--mui-mainColorChannels-light) / 0.22)`,
-          tableHeaderBg: '#F6F7FB',
-          tooltipText: '#FFFFFF',
-          trackBg: '#F0F2F8'
-        }
-      }
-    },
-    dark: {
-      palette: {
-        primary: {
-          main: '#8C57FF',
-          light: '#A379FF',
-          dark: '#7E4EE6',
-          lighterOpacity: 'rgb(var(--mui-palette-primary-mainChannel) / 0.08)',
-          lightOpacity: 'rgb(var(--mui-palette-primary-mainChannel) / 0.16)',
-          mainOpacity: 'rgb(var(--mui-palette-primary-mainChannel) / 0.24)',
-          darkOpacity: 'rgb(var(--mui-palette-primary-mainChannel) / 0.32)',
-          darkerOpacity: 'rgb(var(--mui-palette-primary-mainChannel) / 0.38)'
-        },
-        secondary: {
-          main: '#8A8D93',
-          light: '#A1A4A9',
-          dark: '#7C7F84',
-          contrastText: '#fff',
-          lighterOpacity: 'rgb(var(--mui-palette-secondary-mainChannel) / 0.08)',
-          lightOpacity: 'rgb(var(--mui-palette-secondary-mainChannel) / 0.16)',
-          mainOpacity: 'rgb(var(--mui-palette-secondary-mainChannel) / 0.24)',
-          darkOpacity: 'rgb(var(--mui-palette-secondary-mainChannel) / 0.32)',
-          darkerOpacity: 'rgb(var(--mui-palette-secondary-mainChannel) / 0.38)'
-        },
-        error: {
-          main: '#FF4C51',
-          light: '#FF7074',
-          dark: '#E64449',
-          contrastText: '#fff',
-          lighterOpacity: 'rgb(var(--mui-palette-error-mainChannel) / 0.08)',
-          lightOpacity: 'rgb(var(--mui-palette-error-mainChannel) / 0.16)',
-          mainOpacity: 'rgb(var(--mui-palette-error-mainChannel) / 0.24)',
-          darkOpacity: 'rgb(var(--mui-palette-error-mainChannel) / 0.32)',
-          darkerOpacity: 'rgb(var(--mui-palette-error-mainChannel) / 0.38)'
-        },
-        warning: {
-          main: '#FFB400',
-          light: '#FFC333',
-          dark: '#E6A200',
-          contrastText: '#fff',
-          lighterOpacity: 'rgb(var(--mui-palette-warning-mainChannel) / 0.08)',
-          lightOpacity: 'rgb(var(--mui-palette-warning-mainChannel) / 0.16)',
-          mainOpacity: 'rgb(var(--mui-palette-warning-mainChannel) / 0.24)',
-          darkOpacity: 'rgb(var(--mui-palette-warning-mainChannel) / 0.32)',
-          darkerOpacity: 'rgb(var(--mui-palette-warning-mainChannel) / 0.38)'
-        },
-        info: {
-          main: '#16B1FF',
-          light: '#45C1FF',
-          dark: '#149FE6',
-          contrastText: '#fff',
-          lighterOpacity: 'rgb(var(--mui-palette-info-mainChannel) / 0.08)',
-          lightOpacity: 'rgb(var(--mui-palette-info-mainChannel) / 0.16)',
-          mainOpacity: 'rgb(var(--mui-palette-info-mainChannel) / 0.24)',
-          darkOpacity: 'rgb(var(--mui-palette-info-mainChannel) / 0.32)',
-          darkerOpacity: 'rgb(var(--mui-palette-info-mainChannel) / 0.38)'
-        },
-        success: {
-          main: '#56CA00',
-          light: '#78D533',
-          dark: '#4DB600',
-          contrastText: '#fff',
-          lighterOpacity: 'rgb(var(--mui-palette-success-mainChannel) / 0.08)',
-          lightOpacity: 'rgb(var(--mui-palette-success-mainChannel) / 0.16)',
-          mainOpacity: 'rgb(var(--mui-palette-success-mainChannel) / 0.24)',
-          darkOpacity: 'rgb(var(--mui-palette-success-mainChannel) / 0.32)',
-          darkerOpacity: 'rgb(var(--mui-palette-success-mainChannel) / 0.38)'
-        },
-        text: {
-          primary: `rgb(var(--mui-mainColorChannels-dark) / 0.9)`,
-          secondary: `rgb(var(--mui-mainColorChannels-dark) / 0.7)`,
-          disabled: `rgb(var(--mui-mainColorChannels-dark) / 0.4)`,
-          primaryChannel: 'var(--mui-mainColorChannels-dark)',
-          secondaryChannel: 'var(--mui-mainColorChannels-dark)'
-        },
-        divider: `rgb(var(--mui-mainColorChannels-dark) / 0.12)`,
-        dividerChannel: 'var(--mui-mainColorChannels-dark)',
-        background: {
-          default: skin === 'bordered' ? '#312D4B' : '#28243D',
-          paper: '#312D4B'
-        },
-        action: {
-          active: `rgb(var(--mui-mainColorChannels-dark) / 0.6)`,
-          hover: `rgb(var(--mui-mainColorChannels-dark) / 0.04)`,
-          selected: `rgb(var(--mui-mainColorChannels-dark) / 0.08)`,
-          disabled: `rgb(var(--mui-mainColorChannels-dark) / 0.3)`,
-          disabledBackground: `rgb(var(--mui-mainColorChannels-dark) / 0.12)`,
-          focus: `rgb(var(--mui-mainColorChannels-dark) / 0.1)`,
-          focusOpacity: 0.1,
-          activeChannel: 'var(--mui-mainColorChannels-dark)',
-          selectedChannel: 'var(--mui-mainColorChannels-dark)'
-        },
-        Alert: {
-          errorColor: 'var(--mui-palette-error-main)',
-          warningColor: 'var(--mui-palette-warning-main)',
-          infoColor: 'var(--mui-palette-info-main)',
-          successColor: 'var(--mui-palette-success-main)',
-          errorStandardBg: 'var(--mui-palette-error-lightOpacity)',
-          warningStandardBg: 'var(--mui-palette-warning-lightOpacity)',
-          infoStandardBg: 'var(--mui-palette-info-lightOpacity)',
-          successStandardBg: 'var(--mui-palette-success-lightOpacity)',
-          errorFilledColor: 'var(--mui-palette-error-contrastText)',
-          warningFilledColor: 'var(--mui-palette-warning-contrastText)',
-          infoFilledColor: 'var(--mui-palette-info-contrastText)',
-          successFilledColor: 'var(--mui-palette-success-contrastText)',
-          errorFilledBg: 'var(--mui-palette-error-main)',
-          warningFilledBg: 'var(--mui-palette-warning-main)',
-          infoFilledBg: 'var(--mui-palette-info-main)',
-          successFilledBg: 'var(--mui-palette-success-main)'
-        },
-        Avatar: {
-          defaultBg: '#3F3B59'
-        },
-        Chip: {
-          defaultBorder: 'var(--mui-palette-divider)'
-        },
-        FilledInput: {
-          bg: `rgb(var(--mui-mainColorChannels-dark) / 0.06)`,
-          hoverBg: `rgb(var(--mui-mainColorChannels-dark) / 0.08)`,
-          disabledBg: `rgb(var(--mui-mainColorChannels-dark) / 0.06)`
-        },
-        LinearProgress: {
-          primaryBg: 'var(--mui-palette-primary-mainOpacity)',
-          secondaryBg: 'var(--mui-palette-secondary-mainOpacity)',
-          errorBg: 'var(--mui-palette-error-mainOpacity)',
-          warningBg: 'var(--mui-palette-warning-mainOpacity)',
-          infoBg: 'var(--mui-palette-info-mainOpacity)',
-          successBg: 'var(--mui-palette-success-mainOpacity)'
-        },
-        SnackbarContent: {
-          bg: '#F7F4FF',
-          color: 'var(--mui-palette-background-paper)'
-        },
-        Switch: {
-          defaultColor: 'var(--mui-palette-common-white)',
-          defaultDisabledColor: 'var(--mui-palette-common-white)',
-          primaryDisabledColor: 'var(--mui-palette-common-white)',
-          secondaryDisabledColor: 'var(--mui-palette-common-white)',
-          errorDisabledColor: 'var(--mui-palette-common-white)',
-          warningDisabledColor: 'var(--mui-palette-common-white)',
-          infoDisabledColor: 'var(--mui-palette-common-white)',
-          successDisabledColor: 'var(--mui-palette-common-white)'
-        },
-        Tooltip: {
-          bg: '#F7F4FF'
-        },
-        TableCell: {
-          border: 'var(--mui-palette-divider)'
-        },
-        customColors: {
-          bodyBg: '#28243D',
-          chatBg: '#373452',
-          greyLightBg: '#373350',
-          inputBorder: `rgb(var(--mui-mainColorChannels-dark) / 0.22)`,
-          tableHeaderBg: '#3D3759',
-          tooltipText: '#312D4B',
-          trackBg: '#474360'
-        }
-      }
-    }
-  } as Theme['colorSchemes']
-}
-
-export default colorSchemes
diff --git a/typescript-version/src/@core/theme/customShadows.ts b/typescript-version/src/@core/theme/customShadows.ts
deleted file mode 100644
index 67d6a9495..000000000
--- a/typescript-version/src/@core/theme/customShadows.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-// MUI Imports
-import type { Theme } from '@mui/material/styles'
-
-// Type Imports
-import type { SystemMode } from '@core/types'
-
-const customShadows = (mode: SystemMode): Theme['customShadows'] => {
-  return {
-    xs: `0px 2px 4px rgb(var(--mui-mainColorChannels-${mode}Shadow) / ${mode === 'light' ? 0.16 : 0.2})`,
-    sm: `0px 3px 6px rgb(var(--mui-mainColorChannels-${mode}Shadow) / ${mode === 'light' ? 0.18 : 0.22})`,
-    md: `0px 4px 10px rgb(var(--mui-mainColorChannels-${mode}Shadow) / ${mode === 'light' ? 0.2 : 0.24})`,
-    lg: `0px 6px 16px rgb(var(--mui-mainColorChannels-${mode}Shadow) / ${mode === 'light' ? 0.22 : 0.26})`,
-    xl: `0px 8px 28px rgb(var(--mui-mainColorChannels-${mode}Shadow) / ${mode === 'light' ? 0.24 : 0.28})`
-  }
-}
-
-export default customShadows
diff --git a/typescript-version/src/@core/theme/index.ts b/typescript-version/src/@core/theme/index.ts
deleted file mode 100644
index 27137a690..000000000
--- a/typescript-version/src/@core/theme/index.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-// Next Imports
-import { Inter } from 'next/font/google'
-
-// MUI Imports
-import type { Theme } from '@mui/material/styles'
-
-// Type Imports
-import type { SystemMode } from '@core/types'
-
-// Theme Options Imports
-import overrides from './overrides'
-import colorSchemes from './colorSchemes'
-import spacing from './spacing'
-import shadows from './shadows'
-import customShadows from './customShadows'
-import typography from './typography'
-
-const inter = Inter({ subsets: ['latin'], weight: ['300', '400', '500', '600', '700', '800', '900'] })
-
-const theme = (mode: SystemMode, direction: Theme['direction']): Theme => {
-  return {
-    direction,
-    components: overrides(),
-    colorSchemes: colorSchemes(),
-    ...spacing,
-    shape: {
-      borderRadius: 6,
-      customBorderRadius: {
-        xs: 2,
-        sm: 4,
-        md: 6,
-        lg: 8,
-        xl: 10
-      }
-    },
-    shadows: shadows(mode),
-    typography: typography(inter.style.fontFamily),
-    customShadows: customShadows(mode),
-    mainColorChannels: {
-      light: '46 38 61',
-      dark: '231 227 252',
-      lightShadow: '46 38 61',
-      darkShadow: '19 17 32'
-    }
-  } as Theme
-}
-
-export default theme
diff --git a/typescript-version/src/@core/theme/overrides/accordion.tsx b/typescript-version/src/@core/theme/overrides/accordion.tsx
deleted file mode 100644
index 56d280f36..000000000
--- a/typescript-version/src/@core/theme/overrides/accordion.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-// MUI Imports
-import type { Theme } from '@mui/material/styles'
-
-// Type Imports
-import type { Skin } from '@core/types'
-
-const accordion = (skin: Skin): Theme['components'] => ({
-  MuiAccordion: {
-    defaultProps: {
-      ...(skin === 'bordered' && {
-        variant: 'outlined'
-      })
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        transition: theme.transitions.create(['margin', 'border-radius', 'box-shadow']),
-        ...(skin !== 'bordered'
-          ? {
-              boxShadow: 'var(--mui-customShadows-xs)'
-            }
-          : {
-              '&:not(.Mui-expanded) + &:not(.Mui-expanded)': {
-                borderBlockStart: 0
-              },
-              '&:not(.Mui-expanded):has(+ &:not(.Mui-expanded))': {
-                borderBlockEnd: 0
-              }
-            }),
-        '&:not(.Mui-expanded):has(+ .Mui-expanded)': {
-          borderBottomLeftRadius: 'var(--mui-shape-borderRadius)',
-          borderBottomRightRadius: 'var(--mui-shape-borderRadius)'
-        },
-        '&.Mui-expanded': {
-          borderRadius: 'var(--mui-shape-borderRadius)',
-          ...(skin !== 'bordered' && {
-            boxShadow: 'var(--mui-customShadows-md)'
-          }),
-          margin: theme.spacing(2, 0),
-          '& + .MuiAccordion-root': {
-            borderTopLeftRadius: 'var(--mui-shape-borderRadius)',
-            borderTopRightRadius: 'var(--mui-shape-borderRadius)',
-            '&:before': {
-              opacity: 0
-            }
-          }
-        }
-      })
-    }
-  },
-  MuiAccordionSummary: {
-    defaultProps: {
-      expandIcon: <i className='ri-arrow-down-s-line' />
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        padding: theme.spacing(3, 5),
-        color: 'var(--mui-palette-text-primary)',
-        '&.Mui-expanded': {
-          minHeight: 48
-        },
-        '& .MuiTypography-root': {
-          color: 'inherit',
-          fontWeight: theme.typography.fontWeightMedium
-        }
-      }),
-      content: {
-        margin: '0 !important'
-      },
-      expandIconWrapper: {
-        color: 'var(--mui-palette-text-primary)',
-        fontSize: '1.25rem',
-        '& i, & svg': {
-          fontSize: 'inherit'
-        }
-      }
-    }
-  },
-  MuiAccordionDetails: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        padding: theme.spacing(0, 5, 5),
-        '& .MuiTypography-root': {
-          color: 'var(--mui-palette-text-secondary)'
-        }
-      })
-    }
-  }
-})
-
-export default accordion
diff --git a/typescript-version/src/@core/theme/overrides/alerts.tsx b/typescript-version/src/@core/theme/overrides/alerts.tsx
deleted file mode 100644
index ddd0d1e97..000000000
--- a/typescript-version/src/@core/theme/overrides/alerts.tsx
+++ /dev/null
@@ -1,179 +0,0 @@
-// React Imports
-import React from 'react'
-
-// MUI Imports
-import type { Theme } from '@mui/material/styles'
-
-const alerts: Theme['components'] = {
-  MuiAlert: {
-    defaultProps: {
-      iconMapping: {
-        error: <i className='ri-error-warning-line' />,
-        warning: <i className='ri-alert-line' />,
-        info: <i className='ri-information-line' />,
-        success: <i className='ri-checkbox-circle-line' />
-      }
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        padding: theme.spacing(4),
-        gap: theme.spacing(4),
-        ...theme.typography.body1,
-        '&:not(:has(.MuiAlertTitle-root))': {
-          '& .MuiAlert-icon + .MuiAlert-message': {
-            alignSelf: 'center'
-          }
-        }
-      }),
-      icon: {
-        padding: 0,
-        margin: 0,
-        minWidth: 30,
-        height: 30,
-        borderRadius: 'var(--mui-shape-borderRadius)',
-        alignItems: 'center',
-        justifyContent: 'center',
-        '& i, & svg': {
-          fontSize: 'inherit'
-        }
-      },
-      message: {
-        padding: 0
-      },
-      action: {
-        padding: 0,
-        marginRight: 0
-      }
-    },
-    variants: [
-      {
-        props: { variant: 'standard', severity: 'error' },
-        style: {
-          '& .MuiAlert-icon': {
-            backgroundColor: 'var(--mui-palette-error-main)',
-            color: 'var(--mui-palette-error-contrastText)'
-          }
-        }
-      },
-      {
-        props: { variant: 'standard', severity: 'warning' },
-        style: {
-          '& .MuiAlert-icon': {
-            backgroundColor: 'var(--mui-palette-warning-main)',
-            color: 'var(--mui-palette-warning-contrastText)'
-          }
-        }
-      },
-      {
-        props: { variant: 'standard', severity: 'info' },
-        style: {
-          '& .MuiAlert-icon': {
-            backgroundColor: 'var(--mui-palette-info-main)',
-            color: 'var(--mui-palette-info-contrastText)'
-          }
-        }
-      },
-      {
-        props: { variant: 'standard', severity: 'success' },
-        style: {
-          '& .MuiAlert-icon': {
-            backgroundColor: 'var(--mui-palette-success-main)',
-            color: 'var(--mui-palette-success-contrastText)'
-          }
-        }
-      },
-      {
-        props: { variant: 'outlined', severity: 'error' },
-        style: {
-          borderColor: 'var(--mui-palette-error-main)',
-          '& .MuiAlert-icon': {
-            backgroundColor: 'var(--mui-palette-error-mainOpacity)',
-            color: 'var(--mui-palette-error-main)'
-          }
-        }
-      },
-      {
-        props: { variant: 'outlined', severity: 'warning' },
-        style: {
-          borderColor: 'var(--mui-palette-warning-main)',
-          '& .MuiAlert-icon': {
-            backgroundColor: 'var(--mui-palette-warning-mainOpacity)',
-            color: 'var(--mui-palette-warning-main)'
-          }
-        }
-      },
-      {
-        props: { variant: 'outlined', severity: 'info' },
-        style: {
-          borderColor: 'var(--mui-palette-info-main)',
-          '& .MuiAlert-icon': {
-            backgroundColor: 'var(--mui-palette-info-mainOpacity)',
-            color: 'var(--mui-palette-info-main)'
-          }
-        }
-      },
-      {
-        props: { variant: 'outlined', severity: 'success' },
-        style: {
-          borderColor: 'var(--mui-palette-success-main)',
-          '& .MuiAlert-icon': {
-            backgroundColor: 'var(--mui-palette-success-mainOpacity)',
-            color: 'var(--mui-palette-success-main)'
-          }
-        }
-      },
-      {
-        props: { variant: 'filled', severity: 'error' },
-        style: {
-          '& .MuiAlert-icon': {
-            backgroundColor: 'var(--mui-palette-common-white)',
-            color: 'var(--mui-palette-error-main)',
-            boxShadow: 'var(--mui-customShadows-xs)'
-          }
-        }
-      },
-      {
-        props: { variant: 'filled', severity: 'warning' },
-        style: {
-          '& .MuiAlert-icon': {
-            backgroundColor: 'var(--mui-palette-common-white)',
-            color: 'var(--mui-palette-warning-main)',
-            boxShadow: 'var(--mui-customShadows-xs)'
-          }
-        }
-      },
-      {
-        props: { variant: 'filled', severity: 'info' },
-        style: {
-          '& .MuiAlert-icon': {
-            backgroundColor: 'var(--mui-palette-common-white)',
-            color: 'var(--mui-palette-info-main)',
-            boxShadow: 'var(--mui-customShadows-xs)'
-          }
-        }
-      },
-      {
-        props: { variant: 'filled', severity: 'success' },
-        style: {
-          '& .MuiAlert-icon': {
-            backgroundColor: 'var(--mui-palette-common-white)',
-            color: 'var(--mui-palette-success-main)',
-            boxShadow: 'var(--mui-customShadows-xs)'
-          }
-        }
-      }
-    ]
-  },
-  MuiAlertTitle: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        ...theme.typography.h5,
-        marginTop: 0,
-        marginBottom: theme.spacing(1),
-        color: 'inherit'
-      })
-    }
-  }
-}
-
-export default alerts
diff --git a/typescript-version/src/@core/theme/overrides/autocomplete.tsx b/typescript-version/src/@core/theme/overrides/autocomplete.tsx
deleted file mode 100644
index b3589ae21..000000000
--- a/typescript-version/src/@core/theme/overrides/autocomplete.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-// React Imports
-import React from 'react'
-
-// MUI Imports
-import type { Theme } from '@mui/material/styles'
-
-// Type Imports
-import type { Skin } from '@core/types'
-
-const autocomplete = (skin: Skin): Theme['components'] => ({
-  MuiAutocomplete: {
-    defaultProps: {
-      ...(skin === 'bordered' && {
-        slotProps: {
-          paper: {
-            variant: 'outlined'
-          }
-        }
-      }),
-      ChipProps: {
-        size: 'small'
-      },
-      popupIcon: <i className='ri-arrow-down-s-line' />
-    },
-    styleOverrides: {
-      root: {
-        '& .MuiButtonBase-root.Mui-disabled i, & .MuiButtonBase-root.Mui-disabled svg': {
-          color: 'var(--mui-palette-action-disabled)'
-        },
-        '& .MuiOutlinedInput-input': {
-          height: '1.4375em'
-        }
-      },
-      input: {
-        '& + .MuiAutocomplete-endAdornment': {
-          right: '1rem',
-          '& i, & svg': {
-            fontSize: '1.5rem',
-            color: 'var(--mui-palette-text-primary)'
-          },
-          '& .MuiAutocomplete-clearIndicator': {
-            padding: 2
-          }
-        },
-        '&.MuiInputBase-inputSizeSmall + .MuiAutocomplete-endAdornment': {
-          '& i, & svg': {
-            fontSize: '1.375rem'
-          }
-        }
-      },
-      paper: {
-        ...(skin !== 'bordered' && {
-          boxShadow: 'var(--mui-customShadows-lg)',
-          marginBlockStart: '0.125rem'
-        })
-      },
-      listbox: ({ theme }) => ({
-        '& .MuiAutocomplete-option': {
-          padding: theme.spacing(2, 5),
-          '&[aria-selected="true"]': {
-            backgroundColor: 'var(--mui-palette-primary-lightOpacity)',
-            color: 'var(--mui-palette-primary-main)',
-            '&.Mui-focused, &.Mui-focusVisible': {
-              backgroundColor: 'var(--mui-palette-primary-mainOpacity)'
-            }
-          }
-        },
-        '& .MuiAutocomplete-option.Mui-focusVisible': {
-          backgroundColor: 'var(--mui-palette-action-hover)'
-        }
-      })
-    }
-  }
-})
-
-export default autocomplete
diff --git a/typescript-version/src/@core/theme/overrides/avatar.ts b/typescript-version/src/@core/theme/overrides/avatar.ts
deleted file mode 100644
index 512a04856..000000000
--- a/typescript-version/src/@core/theme/overrides/avatar.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-// MUI Imports
-import type { Theme } from '@mui/material/styles'
-
-const avatar: Theme['components'] = {
-  MuiAvatarGroup: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        justifyContent: 'flex-end',
-        '& .MuiAvatar-root': {
-          borderColor: 'var(--mui-palette-background-paper)'
-        },
-        '&.pull-up .MuiAvatar-root': {
-          cursor: 'pointer',
-          transition: theme.transitions.create(['box-shadow', 'transform'], {
-            easing: 'ease',
-            duration: theme.transitions.duration.shorter
-          }),
-          '&:hover': {
-            zIndex: 2,
-            boxShadow: 'var(--mui-customShadows-md)',
-            transform: 'translateY(-5px)'
-          }
-        }
-      })
-    }
-  },
-  MuiAvatar: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        color: 'var(--mui-palette-text-primary)',
-        fontSize: theme.typography.body1.fontSize,
-        lineHeight: 1.2
-      })
-    }
-  }
-}
-
-export default avatar
diff --git a/typescript-version/src/@core/theme/overrides/backdrop.ts b/typescript-version/src/@core/theme/overrides/backdrop.ts
deleted file mode 100644
index 7a596aa50..000000000
--- a/typescript-version/src/@core/theme/overrides/backdrop.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-// MUI Imports
-import type { Theme } from '@mui/material/styles'
-
-const backdrop: Theme['components'] = {
-  MuiBackdrop: {
-    styleOverrides: {
-      root: {
-        '&:not(.MuiBackdrop-invisible)': {
-          backgroundColor: 'var(--backdrop-color)'
-        }
-      }
-    }
-  }
-}
-
-export default backdrop
diff --git a/typescript-version/src/@core/theme/overrides/badges.ts b/typescript-version/src/@core/theme/overrides/badges.ts
deleted file mode 100644
index e8b913e43..000000000
--- a/typescript-version/src/@core/theme/overrides/badges.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-// MUI Imports
-import type { Theme } from '@mui/material/styles'
-
-const badges: Theme['components'] = {
-  MuiBadge: {
-    styleOverrides: {
-      standard: ({ theme }) => ({
-        height: 22,
-        minWidth: 22,
-        borderRadius: 20,
-        fontSize: theme.typography.subtitle2.fontSize,
-        lineHeight: 1.07,
-        padding: theme.spacing(1, 2)
-      })
-    }
-  }
-}
-
-export default badges
diff --git a/typescript-version/src/@core/theme/overrides/breadcrumbs.ts b/typescript-version/src/@core/theme/overrides/breadcrumbs.ts
deleted file mode 100644
index 01fd33878..000000000
--- a/typescript-version/src/@core/theme/overrides/breadcrumbs.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-// MUI Imports
-import type { Theme } from '@mui/material/styles'
-
-const breadcrumbs: Theme['components'] = {
-  MuiBreadcrumbs: {
-    styleOverrides: {
-      root: {
-        '& svg, & i': {
-          fontSize: '1.25rem'
-        },
-        '& a': {
-          textDecoration: 'none',
-          color: 'var(--mui-palette-text-secondary)',
-          '&:hover': {
-            color: 'var(--mui-palette-text-primary)'
-          }
-        }
-      },
-      li: ({ theme }) => ({
-        lineHeight: theme.typography.body1.lineHeight,
-        '& > *:not(a)': {
-          color: 'var(--mui-palette-text-primary)'
-        }
-      })
-    }
-  }
-}
-
-export default breadcrumbs
diff --git a/typescript-version/src/@core/theme/overrides/button-group.ts b/typescript-version/src/@core/theme/overrides/button-group.ts
deleted file mode 100644
index 869e89057..000000000
--- a/typescript-version/src/@core/theme/overrides/button-group.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-// MUI Imports
-import type { Theme } from '@mui/material/styles'
-
-// Config Imports
-import themeConfig from '@configs/themeConfig'
-
-const buttonGroup: Theme['components'] = {
-  MuiButtonGroup: {
-    defaultProps: {
-      disableRipple: themeConfig.disableRipple
-    },
-    styleOverrides: {
-      contained: ({ ownerState }) => ({
-        boxShadow: 'var(--mui-customShadows-xs)',
-        ...(ownerState.disabled && {
-          boxShadow: 'none'
-        })
-      })
-    },
-    variants: [
-      {
-        props: { variant: 'text', color: 'primary' },
-        style: {
-          '& .MuiButtonGroup-firstButton, & .MuiButtonGroup-middleButton': {
-            borderColor: 'var(--mui-palette-primary-main)'
-          }
-        }
-      },
-      {
-        props: { variant: 'text', color: 'secondary' },
-        style: {
-          '& .MuiButtonGroup-firstButton, & .MuiButtonGroup-middleButton': {
-            borderColor: 'var(--mui-palette-secondary-main)'
-          }
-        }
-      },
-      {
-        props: { variant: 'text', color: 'error' },
-        style: {
-          '& .MuiButtonGroup-firstButton, & .MuiButtonGroup-middleButton': {
-            borderColor: 'var(--mui-palette-error-main)'
-          }
-        }
-      },
-      {
-        props: { variant: 'text', color: 'warning' },
-        style: {
-          '& .MuiButtonGroup-firstButton, & .MuiButtonGroup-middleButton': {
-            borderColor: 'var(--mui-palette-warning-main)'
-          }
-        }
-      },
-      {
-        props: { variant: 'text', color: 'info' },
-        style: {
-          '& .MuiButtonGroup-firstButton, & .MuiButtonGroup-middleButton': {
-            borderColor: 'var(--mui-palette-info-main)'
-          }
-        }
-      },
-      {
-        props: { variant: 'text', color: 'success' },
-        style: {
-          '& .MuiButtonGroup-firstButton, & .MuiButtonGroup-middleButton': {
-            borderColor: 'var(--mui-palette-success-main)'
-          }
-        }
-      }
-    ]
-  }
-}
-
-export default buttonGroup
diff --git a/typescript-version/src/@core/theme/overrides/button.ts b/typescript-version/src/@core/theme/overrides/button.ts
deleted file mode 100644
index d43a3c9c6..000000000
--- a/typescript-version/src/@core/theme/overrides/button.ts
+++ /dev/null
@@ -1,377 +0,0 @@
-// MUI Imports
-import type { Theme } from '@mui/material/styles'
-
-// Config Imports
-import themeConfig from '@configs/themeConfig'
-
-const iconStyles = (size?: string) => ({
-  '& > *:nth-of-type(1)': {
-    ...(size === 'small'
-      ? {
-          fontSize: '14px'
-        }
-      : {
-          ...(size === 'medium'
-            ? {
-                fontSize: '16px'
-              }
-            : {
-                fontSize: '20px'
-              })
-        })
-  }
-})
-
-const button: Theme['components'] = {
-  MuiButtonBase: {
-    defaultProps: {
-      disableRipple: themeConfig.disableRipple
-    }
-  },
-  MuiButton: {
-    styleOverrides: {
-      root: ({ theme, ownerState }) => ({
-        ...(ownerState.variant === 'text'
-          ? {
-              ...(ownerState.size === 'small' && {
-                padding: theme.spacing(2, 2.5)
-              }),
-              ...(ownerState.size === 'medium' && {
-                padding: theme.spacing(2, 3.5)
-              }),
-              ...(ownerState.size === 'large' && {
-                padding: theme.spacing(2, 4.5)
-              })
-            }
-          : {
-              ...(ownerState.variant === 'outlined'
-                ? {
-                    ...(ownerState.size === 'small' && {
-                      padding: theme.spacing(1.75, 3.25)
-                    }),
-                    ...(ownerState.size === 'medium' && {
-                      padding: theme.spacing(1.75, 4.25)
-                    }),
-                    ...(ownerState.size === 'large' && {
-                      padding: theme.spacing(1.75, 5.25)
-                    })
-                  }
-                : {
-                    ...(ownerState.size === 'small' && {
-                      padding: theme.spacing(2, 3.5)
-                    }),
-                    ...(ownerState.size === 'medium' && {
-                      padding: theme.spacing(2, 4.5)
-                    }),
-                    ...(ownerState.size === 'large' && {
-                      padding: theme.spacing(2, 5.5)
-                    })
-                  })
-            })
-      }),
-      contained: ({ ownerState }) => ({
-        boxShadow: 'var(--mui-customShadows-xs)',
-        ...(!ownerState.disabled && {
-          '&:hover, &.Mui-focusVisible': {
-            boxShadow: 'var(--mui-customShadows-xs)'
-          },
-          '&:active': {
-            boxShadow: 'none'
-          }
-        })
-      }),
-      sizeSmall: ({ theme }) => ({
-        lineHeight: 1.38462,
-        fontSize: theme.typography.body2.fontSize,
-        borderRadius: 'var(--mui-shape-customBorderRadius-sm)'
-      }),
-      sizeLarge: {
-        fontSize: '1.0625rem',
-        lineHeight: 1.529412,
-        borderRadius: 'var(--mui-shape-customBorderRadius-lg)'
-      },
-      startIcon: ({ theme, ownerState }) => ({
-        ...(ownerState.size === 'small'
-          ? {
-              marginInlineEnd: theme.spacing(1.5)
-            }
-          : {
-              ...(ownerState.size === 'medium'
-                ? {
-                    marginInlineEnd: theme.spacing(2)
-                  }
-                : {
-                    marginInlineEnd: theme.spacing(2.5)
-                  })
-            }),
-        ...iconStyles(ownerState.size)
-      }),
-      endIcon: ({ theme, ownerState }) => ({
-        ...(ownerState.size === 'small'
-          ? {
-              marginInlineStart: theme.spacing(1.5)
-            }
-          : {
-              ...(ownerState.size === 'medium'
-                ? {
-                    marginInlineStart: theme.spacing(2)
-                  }
-                : {
-                    marginInlineStart: theme.spacing(2.5)
-                  })
-            }),
-        ...iconStyles(ownerState.size)
-      })
-    },
-    variants: [
-      {
-        props: { variant: 'text', color: 'primary' },
-        style: {
-          '&:not(.Mui-disabled):hover, &:not(.Mui-disabled):active, &.Mui-focusVisible:not(:has(span.MuiTouchRipple-root))':
-            {
-              backgroundColor: 'var(--mui-palette-primary-lighterOpacity)'
-            },
-          '&.Mui-disabled': {
-            opacity: 0.45,
-            color: 'var(--mui-palette-primary-main)'
-          }
-        }
-      },
-      {
-        props: { variant: 'text', color: 'secondary' },
-        style: {
-          '&:not(.Mui-disabled):hover, &:not(.Mui-disabled):active, &.Mui-focusVisible:not(:has(span.MuiTouchRipple-root))':
-            {
-              backgroundColor: 'var(--mui-palette-secondary-lighterOpacity)'
-            },
-          '&.Mui-disabled': {
-            opacity: 0.45,
-            color: 'var(--mui-palette-secondary-main)'
-          }
-        }
-      },
-      {
-        props: { variant: 'text', color: 'error' },
-        style: {
-          '&:not(.Mui-disabled):hover, &:not(.Mui-disabled):active, &.Mui-focusVisible:not(:has(span.MuiTouchRipple-root))':
-            {
-              backgroundColor: 'var(--mui-palette-error-lighterOpacity)'
-            },
-          '&.Mui-disabled': {
-            opacity: 0.45,
-            color: 'var(--mui-palette-error-main)'
-          }
-        }
-      },
-      {
-        props: { variant: 'text', color: 'warning' },
-        style: {
-          '&:not(.Mui-disabled):hover, &:not(.Mui-disabled):active, &.Mui-focusVisible:not(:has(span.MuiTouchRipple-root))':
-            {
-              backgroundColor: 'var(--mui-palette-warning-lighterOpacity)'
-            },
-          '&.Mui-disabled': {
-            opacity: 0.45,
-            color: 'var(--mui-palette-warning-main)'
-          }
-        }
-      },
-      {
-        props: { variant: 'text', color: 'info' },
-        style: {
-          '&:not(.Mui-disabled):hover, &:not(.Mui-disabled):active, &.Mui-focusVisible:not(:has(span.MuiTouchRipple-root))':
-            {
-              backgroundColor: 'var(--mui-palette-info-lighterOpacity)'
-            },
-          '&.Mui-disabled': {
-            opacity: 0.45,
-            color: 'var(--mui-palette-info-main)'
-          }
-        }
-      },
-      {
-        props: { variant: 'text', color: 'success' },
-        style: {
-          '&:not(.Mui-disabled):hover, &:not(.Mui-disabled):active, &.Mui-focusVisible:not(:has(span.MuiTouchRipple-root))':
-            {
-              backgroundColor: 'var(--mui-palette-success-lighterOpacity)'
-            },
-          '&.Mui-disabled': {
-            opacity: 0.45,
-            color: 'var(--mui-palette-success-main)'
-          }
-        }
-      },
-      {
-        props: { variant: 'outlined', color: 'primary' },
-        style: {
-          borderColor: 'var(--mui-palette-primary-main)',
-          '&:not(.Mui-disabled):hover, &:not(.Mui-disabled):active, &.Mui-focusVisible:not(:has(span.MuiTouchRipple-root))':
-            {
-              backgroundColor: 'var(--mui-palette-primary-lighterOpacity)'
-            },
-          '&.Mui-disabled': {
-            opacity: 0.45,
-            color: 'var(--mui-palette-primary-main)',
-            borderColor: 'var(--mui-palette-primary-main)'
-          }
-        }
-      },
-      {
-        props: { variant: 'outlined', color: 'secondary' },
-        style: {
-          borderColor: 'var(--mui-palette-secondary-main)',
-          '&:not(.Mui-disabled):hover, &:not(.Mui-disabled):active, &.Mui-focusVisible:not(:has(span.MuiTouchRipple-root))':
-            {
-              backgroundColor: 'var(--mui-palette-secondary-lighterOpacity)'
-            },
-          '&.Mui-disabled': {
-            opacity: 0.45,
-            color: 'var(--mui-palette-secondary-main)',
-            borderColor: 'var(--mui-palette-secondary-main)'
-          }
-        }
-      },
-      {
-        props: { variant: 'outlined', color: 'error' },
-        style: {
-          borderColor: 'var(--mui-palette-error-main)',
-          '&:not(.Mui-disabled):hover, &:not(.Mui-disabled):active, &.Mui-focusVisible:not(:has(span.MuiTouchRipple-root))':
-            {
-              backgroundColor: 'var(--mui-palette-error-lighterOpacity)'
-            },
-          '&.Mui-disabled': {
-            opacity: 0.45,
-            color: 'var(--mui-palette-error-main)',
-            borderColor: 'var(--mui-palette-error-main)'
-          }
-        }
-      },
-      {
-        props: { variant: 'outlined', color: 'warning' },
-        style: {
-          borderColor: 'var(--mui-palette-warning-main)',
-          '&:not(.Mui-disabled):hover, &:not(.Mui-disabled):active, &.Mui-focusVisible:not(:has(span.MuiTouchRipple-root))':
-            {
-              backgroundColor: 'var(--mui-palette-warning-lighterOpacity)'
-            },
-          '&.Mui-disabled': {
-            opacity: 0.45,
-            color: 'var(--mui-palette-warning-main)',
-            borderColor: 'var(--mui-palette-warning-main)'
-          }
-        }
-      },
-      {
-        props: { variant: 'outlined', color: 'info' },
-        style: {
-          borderColor: 'var(--mui-palette-info-main)',
-          '&:not(.Mui-disabled):hover, &:not(.Mui-disabled):active, &.Mui-focusVisible:not(:has(span.MuiTouchRipple-root))':
-            {
-              backgroundColor: 'var(--mui-palette-info-lighterOpacity)'
-            },
-          '&.Mui-disabled': {
-            opacity: 0.45,
-            color: 'var(--mui-palette-info-main)',
-            borderColor: 'var(--mui-palette-info-main)'
-          }
-        }
-      },
-      {
-        props: { variant: 'outlined', color: 'success' },
-        style: {
-          borderColor: 'var(--mui-palette-success-main)',
-          '&:not(.Mui-disabled):hover, &:not(.Mui-disabled):active, &.Mui-focusVisible:not(:has(span.MuiTouchRipple-root))':
-            {
-              backgroundColor: 'var(--mui-palette-success-lighterOpacity)'
-            },
-          '&.Mui-disabled': {
-            opacity: 0.45,
-            color: 'var(--mui-palette-success-main)',
-            borderColor: 'var(--mui-palette-success-main)'
-          }
-        }
-      },
-      {
-        props: { variant: 'contained', color: 'primary' },
-        style: {
-          '&:not(.Mui-disabled):active, &.Mui-focusVisible:not(:has(span.MuiTouchRipple-root))': {
-            backgroundColor: 'var(--mui-palette-primary-dark)'
-          },
-          '&.Mui-disabled': {
-            opacity: 0.45,
-            color: 'var(--mui-palette-primary-contrastText)',
-            backgroundColor: 'var(--mui-palette-primary-main)'
-          }
-        }
-      },
-      {
-        props: { variant: 'contained', color: 'secondary' },
-        style: {
-          '&:not(.Mui-disabled):active, &.Mui-focusVisible:not(:has(span.MuiTouchRipple-root))': {
-            backgroundColor: 'var(--mui-palette-secondary-dark)'
-          },
-          '&.Mui-disabled': {
-            opacity: 0.45,
-            color: 'var(--mui-palette-secondary-contrastText)',
-            backgroundColor: 'var(--mui-palette-secondary-main)'
-          }
-        }
-      },
-      {
-        props: { variant: 'contained', color: 'error' },
-        style: {
-          '&:not(.Mui-disabled):active, &.Mui-focusVisible:not(:has(span.MuiTouchRipple-root))': {
-            backgroundColor: 'var(--mui-palette-error-dark)'
-          },
-          '&.Mui-disabled': {
-            opacity: 0.45,
-            color: 'var(--mui-palette-error-contrastText)',
-            backgroundColor: 'var(--mui-palette-error-main)'
-          }
-        }
-      },
-      {
-        props: { variant: 'contained', color: 'warning' },
-        style: {
-          '&:not(.Mui-disabled):active, &.Mui-focusVisible:not(:has(span.MuiTouchRipple-root))': {
-            backgroundColor: 'var(--mui-palette-warning-dark)'
-          },
-          '&.Mui-disabled': {
-            opacity: 0.45,
-            color: 'var(--mui-palette-warning-contrastText)',
-            backgroundColor: 'var(--mui-palette-warning-main)'
-          }
-        }
-      },
-      {
-        props: { variant: 'contained', color: 'info' },
-        style: {
-          '&:not(.Mui-disabled):active, &.Mui-focusVisible:not(:has(span.MuiTouchRipple-root))': {
-            backgroundColor: 'var(--mui-palette-info-dark)'
-          },
-          '&.Mui-disabled': {
-            opacity: 0.45,
-            color: 'var(--mui-palette-info-contrastText)',
-            backgroundColor: 'var(--mui-palette-info-main)'
-          }
-        }
-      },
-      {
-        props: { variant: 'contained', color: 'success' },
-        style: {
-          '&:not(.Mui-disabled):active, &.Mui-focusVisible:not(:has(span.MuiTouchRipple-root))': {
-            backgroundColor: 'var(--mui-palette-success-dark)'
-          },
-          '&.Mui-disabled': {
-            opacity: 0.45,
-            color: 'var(--mui-palette-success-contrastText)',
-            backgroundColor: 'var(--mui-palette-success-main)'
-          }
-        }
-      }
-    ]
-  }
-}
-
-export default button
diff --git a/typescript-version/src/@core/theme/overrides/card.ts b/typescript-version/src/@core/theme/overrides/card.ts
deleted file mode 100644
index 393ffa86e..000000000
--- a/typescript-version/src/@core/theme/overrides/card.ts
+++ /dev/null
@@ -1,91 +0,0 @@
-// MUI Imports
-import type { Theme } from '@mui/material/styles'
-
-// Type Imports
-import type { Skin } from '@core/types'
-
-const card = (skin: Skin): Theme['components'] => {
-  return {
-    MuiCard: {
-      defaultProps: {
-        ...(skin === 'bordered' && {
-          variant: 'outlined'
-        })
-      },
-      styleOverrides: {
-        root: ({ ownerState }) => ({
-          ...(ownerState.variant !== 'outlined' && {
-            boxShadow: 'var(--mui-customShadows-md)'
-          })
-        })
-      }
-    },
-    MuiCardHeader: {
-      styleOverrides: {
-        root: ({ theme }) => ({
-          padding: theme.spacing(5),
-          '& + .MuiCardContent-root, & + .MuiCardActions-root': {
-            paddingBlockStart: 0
-          },
-          '& + .MuiCollapse-root .MuiCardContent-root:first-child, & + .MuiCollapse-root .MuiCardActions-root:first-child':
-            {
-              paddingBlockStart: 0
-            }
-        }),
-        subheader: ({ theme }) => ({
-          ...theme.typography.subtitle1,
-          color: 'rgb(var(--mui-palette-text-primaryChannel) / 0.55)'
-        }),
-        action: ({ theme }) => ({
-          ...theme.typography.body1,
-          color: 'var(--mui-palette-text-disabled)',
-          marginBlock: 0,
-          marginInlineEnd: 0,
-          '& .MuiIconButton-root': {
-            color: 'inherit'
-          }
-        })
-      }
-    },
-    MuiCardContent: {
-      styleOverrides: {
-        root: ({ theme }) => ({
-          padding: theme.spacing(5),
-          color: 'var(--mui-palette-text-secondary)',
-          '&:last-child': {
-            paddingBlockEnd: theme.spacing(5)
-          },
-          '& + .MuiCardHeader-root, & + .MuiCardContent-root, & + .MuiCardActions-root': {
-            paddingBlockStart: 0
-          },
-          '& + .MuiCollapse-root .MuiCardHeader-root:first-child, & + .MuiCollapse-root .MuiCardContent-root:first-child, & + .MuiCollapse-root .MuiCardActions-root:first-child':
-            {
-              paddingBlockStart: 0
-            }
-        })
-      }
-    },
-    MuiCardActions: {
-      styleOverrides: {
-        root: ({ theme }) => ({
-          padding: theme.spacing(5),
-          '&:where(.card-actions-dense)': {
-            padding: theme.spacing(2.5),
-            '& .MuiButton-text': {
-              paddingInline: theme.spacing(2.5)
-            }
-          },
-          '& + .MuiCardHeader-root, & + .MuiCardContent-root, & + .MuiCardActions-root': {
-            paddingBlockStart: 0
-          },
-          '& + .MuiCollapse-root .MuiCardHeader-root:first-child, & + .MuiCollapse-root .MuiCardContent-root:first-child, & + .MuiCollapse-root .MuiCardActions-root:first-child':
-            {
-              paddingBlockStart: 0
-            }
-        })
-      }
-    }
-  }
-}
-
-export default card
diff --git a/typescript-version/src/@core/theme/overrides/checkbox.tsx b/typescript-version/src/@core/theme/overrides/checkbox.tsx
deleted file mode 100644
index 058cad13b..000000000
--- a/typescript-version/src/@core/theme/overrides/checkbox.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-// React Imports
-import React from 'react'
-
-// MUI Imports
-import type { Theme } from '@mui/material/styles'
-
-const Icon = () => {
-  return (
-    <svg width='1em' height='1em' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
-      <path
-        d='M8 4h8a4 4 0 0 1 4 4v8a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4Z'
-        stroke='var(--mui-palette-text-secondary)'
-        strokeWidth='2'
-      />
-    </svg>
-  )
-}
-
-const IndeterminateIcon = () => {
-  return (
-    <svg width='1em' height='1em' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
-      <path d='M3 8a5 5 0 0 1 5-5h8a5 5 0 0 1 5 5v8a5 5 0 0 1-5 5H8a5 5 0 0 1-5-5V8Z' fill='currentColor' />
-      <path d='M8.5 11.5h7v1h-7v-1Z' fill='var(--mui-palette-common-white)' />
-    </svg>
-  )
-}
-
-const CheckedIcon = () => {
-  return (
-    <svg width='1em' height='1em' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
-      <path d='M3 8a5 5 0 0 1 5-5h8a5 5 0 0 1 5 5v8a5 5 0 0 1-5 5H8a5 5 0 0 1-5-5V8Z' fill='currentColor' />
-      <path
-        d='m11 13.586 4.596-4.597.707.707L11 15l-3.182-3.182.707-.707L11 13.586Z'
-        fill='var(--mui-palette-common-white)'
-      />
-    </svg>
-  )
-}
-
-const checkbox: Theme['components'] = {
-  MuiCheckbox: {
-    defaultProps: {
-      icon: <Icon />,
-      indeterminateIcon: <IndeterminateIcon />,
-      checkedIcon: <CheckedIcon />
-    },
-    styleOverrides: {
-      root: ({ theme, ownerState }) => ({
-        ...(ownerState.size === 'small'
-          ? {
-              padding: theme.spacing(1),
-              '& svg': {
-                fontSize: '1.25rem'
-              }
-            }
-          : {
-              padding: theme.spacing(1.5),
-              '& svg': {
-                fontSize: '1.5rem'
-              }
-            }),
-        '&.Mui-checked:not(.Mui-disabled) svg': {
-          filter: 'drop-shadow(var(--mui-customShadows-xs))'
-        },
-        '&.Mui-disabled': {
-          opacity: 0.45,
-          '&:not(.Mui-checked)': {
-            color: 'var(--mui-palette-text-secondary)'
-          },
-          '&.Mui-checked.MuiCheckbox-colorPrimary': {
-            color: 'var(--mui-palette-primary-main)'
-          },
-          '&.Mui-checked.MuiCheckbox-colorSecondary': {
-            color: 'var(--mui-palette-secondary-main)'
-          },
-          '&.Mui-checked.MuiCheckbox-colorError': {
-            color: 'var(--mui-palette-error-main)'
-          },
-          '&.Mui-checked.MuiCheckbox-colorWarning': {
-            color: 'var(--mui-palette-warning-main)'
-          },
-          '&.Mui-checked.MuiCheckbox-colorInfo': {
-            color: 'var(--mui-palette-info-main)'
-          },
-          '&.Mui-checked.MuiCheckbox-colorSuccess': {
-            color: 'var(--mui-palette-success-main)'
-          }
-        }
-      })
-    }
-  }
-}
-
-export default checkbox
diff --git a/typescript-version/src/@core/theme/overrides/chip.ts b/typescript-version/src/@core/theme/overrides/chip.ts
deleted file mode 100644
index f7e1e8c1b..000000000
--- a/typescript-version/src/@core/theme/overrides/chip.ts
+++ /dev/null
@@ -1,190 +0,0 @@
-// MUI Imports
-import type { Theme } from '@mui/material/styles'
-
-const chip: Theme['components'] = {
-  MuiChip: {
-    variants: [
-      {
-        props: { variant: 'tonal', color: 'primary' },
-        style: {
-          backgroundColor: 'var(--mui-palette-primary-lightOpacity)',
-          color: 'var(--mui-palette-primary-main)',
-          '&.Mui-focusVisible': {
-            backgroundColor: 'var(--mui-palette-primary-mainOpacity)'
-          },
-          '& .MuiChip-deleteIcon': {
-            color: 'rgb(var(--mui-palette-primary-mainChannel) / 0.7)',
-            '&:hover': {
-              color: 'var(--mui-palette-primary-main)'
-            }
-          },
-          '&.MuiChip-clickable:hover': {
-            backgroundColor: 'var(--mui-palette-primary-main)',
-            color: 'var(--mui-palette-common-white)'
-          }
-        }
-      },
-      {
-        props: { variant: 'tonal', color: 'secondary' },
-        style: {
-          backgroundColor: 'var(--mui-palette-secondary-lightOpacity)',
-          color: 'var(--mui-palette-secondary-main)',
-          '&.Mui-focusVisible': {
-            backgroundColor: 'var(--mui-palette-secondary-mainOpacity)'
-          },
-          '& .MuiChip-deleteIcon': {
-            color: 'rgb(var(--mui-palette-secondary-mainChannel) / 0.7)',
-            '&:hover': {
-              color: 'var(--mui-palette-secondary-main)'
-            }
-          },
-          '&.MuiChip-clickable:hover': {
-            backgroundColor: 'var(--mui-palette-secondary-main)',
-            color: 'var(--mui-palette-common-white)'
-          }
-        }
-      },
-      {
-        props: { variant: 'tonal', color: 'error' },
-        style: {
-          backgroundColor: 'var(--mui-palette-error-lightOpacity)',
-          color: 'var(--mui-palette-error-main)',
-          '&.Mui-focusVisible': {
-            backgroundColor: 'var(--mui-palette-error-mainOpacity)'
-          },
-          '& .MuiChip-deleteIcon': {
-            color: 'rgb(var(--mui-palette-error-mainChannel) / 0.7)',
-            '&:hover': {
-              color: 'var(--mui-palette-error-main)'
-            }
-          },
-          '&.MuiChip-clickable:hover': {
-            backgroundColor: 'var(--mui-palette-error-main)',
-            color: 'var(--mui-palette-common-white)'
-          }
-        }
-      },
-      {
-        props: { variant: 'tonal', color: 'warning' },
-        style: {
-          backgroundColor: 'var(--mui-palette-warning-lightOpacity)',
-          color: 'var(--mui-palette-warning-main)',
-          '&.Mui-focusVisible': {
-            backgroundColor: 'var(--mui-palette-warning-mainOpacity)'
-          },
-          '& .MuiChip-deleteIcon': {
-            color: 'rgb(var(--mui-palette-warning-mainChannel) / 0.7)',
-            '&:hover': {
-              color: 'var(--mui-palette-warning-main)'
-            }
-          },
-          '&.MuiChip-clickable:hover': {
-            backgroundColor: 'var(--mui-palette-warning-main)',
-            color: 'var(--mui-palette-common-white)'
-          }
-        }
-      },
-      {
-        props: { variant: 'tonal', color: 'info' },
-        style: {
-          backgroundColor: 'var(--mui-palette-info-lightOpacity)',
-          color: 'var(--mui-palette-info-main)',
-          '&.Mui-focusVisible': {
-            backgroundColor: 'var(--mui-palette-info-mainOpacity)'
-          },
-          '& .MuiChip-deleteIcon': {
-            color: 'rgb(var(--mui-palette-info-mainChannel) / 0.7)',
-            '&:hover': {
-              color: 'var(--mui-palette-info-main)'
-            }
-          },
-          '&.MuiChip-clickable:hover': {
-            backgroundColor: 'var(--mui-palette-info-main)',
-            color: 'var(--mui-palette-common-white)'
-          }
-        }
-      },
-      {
-        props: { variant: 'tonal', color: 'success' },
-        style: {
-          backgroundColor: 'var(--mui-palette-success-lightOpacity)',
-          color: 'var(--mui-palette-success-main)',
-          '&.Mui-focusVisible': {
-            backgroundColor: 'var(--mui-palette-success-mainOpacity)'
-          },
-          '& .MuiChip-deleteIcon': {
-            color: 'rgb(var(--mui-palette-success-mainChannel) / 0.7)',
-            '&:hover': {
-              color: 'var(--mui-palette-success-main)'
-            }
-          },
-          '&.MuiChip-clickable:hover': {
-            backgroundColor: 'var(--mui-palette-success-main)',
-            color: 'var(--mui-palette-common-white)'
-          }
-        }
-      }
-    ],
-    styleOverrides: {
-      root: ({ ownerState, theme }) => ({
-        ...theme.typography.body2,
-        fontWeight: theme.typography.fontWeightMedium,
-
-        '& .MuiChip-deleteIcon': {
-          ...(ownerState.size === 'small'
-            ? {
-                fontSize: '1rem',
-                marginInlineEnd: theme.spacing(1),
-                marginInlineStart: theme.spacing(-2)
-              }
-            : {
-                fontSize: '1.25rem',
-                marginInlineEnd: theme.spacing(2),
-                marginInlineStart: theme.spacing(-3)
-              })
-        },
-        '& .MuiChip-avatar, & .MuiChip-icon': {
-          '& i, & svg': {
-            ...(ownerState.size === 'small'
-              ? {
-                  fontSize: 13
-                }
-              : {
-                  fontSize: 15
-                })
-          },
-          ...(ownerState.size === 'small'
-            ? {
-                height: 16,
-                width: 16,
-                marginInlineStart: theme.spacing(1),
-                marginInlineEnd: theme.spacing(-2)
-              }
-            : {
-                height: 20,
-                width: 20,
-                marginInlineStart: theme.spacing(2),
-                marginInlineEnd: theme.spacing(-3)
-              })
-        }
-      }),
-      label: ({ ownerState, theme }) => ({
-        ...(ownerState.size === 'small'
-          ? {
-              paddingInline: theme.spacing(3)
-            }
-          : {
-              paddingInline: theme.spacing(4)
-            })
-      }),
-      iconMedium: {
-        fontSize: '1.25rem'
-      },
-      iconSmall: {
-        fontSize: '1rem'
-      }
-    }
-  }
-}
-
-export default chip
diff --git a/typescript-version/src/@core/theme/overrides/dialog.ts b/typescript-version/src/@core/theme/overrides/dialog.ts
deleted file mode 100644
index 928787914..000000000
--- a/typescript-version/src/@core/theme/overrides/dialog.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-// MUI Imports
-import type { Theme } from '@mui/material/styles'
-
-// Type Imports
-import type { Skin } from '@core/types'
-
-const dialog = (skin: Skin): Theme['components'] => ({
-  MuiDialog: {
-    styleOverrides: {
-      paper: ({ theme }) => ({
-        ...(skin !== 'bordered'
-          ? {
-              boxShadow: 'var(--mui-customShadows-xl)'
-            }
-          : {
-              boxShadow: 'none'
-            }),
-        [theme.breakpoints.down('sm')]: {
-          '&:not(.MuiDialog-paperFullScreen)': {
-            margin: theme.spacing(6)
-          }
-        }
-      })
-    }
-  },
-  MuiDialogTitle: {
-    defaultProps: {
-      variant: 'h5'
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        padding: theme.spacing(5),
-        '& + .MuiDialogActions-root': {
-          paddingTop: 0
-        }
-      })
-    }
-  },
-  MuiDialogContent: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        padding: theme.spacing(5),
-        '& + .MuiDialogContent-root, & + .MuiDialogActions-root': {
-          paddingTop: 0
-        }
-      })
-    }
-  },
-  MuiDialogActions: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        padding: theme.spacing(5),
-        '& .MuiButtonBase-root:not(:first-of-type)': {
-          marginInlineStart: theme.spacing(4)
-        },
-        '&:where(.dialog-actions-dense)': {
-          padding: theme.spacing(2.5),
-          '& .MuiButton-text': {
-            paddingInline: theme.spacing(2.5)
-          }
-        }
-      })
-    }
-  }
-})
-
-export default dialog
diff --git a/typescript-version/src/@core/theme/overrides/drawer.ts b/typescript-version/src/@core/theme/overrides/drawer.ts
deleted file mode 100644
index 6a90b55e6..000000000
--- a/typescript-version/src/@core/theme/overrides/drawer.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-// MUI Imports
-import type { Theme } from '@mui/material'
-
-// Type Imports
-import type { Skin } from '@core/types'
-
-const drawer = (skin: Skin): Theme['components'] => ({
-  MuiDrawer: {
-    defaultProps: {
-      ...(skin === 'bordered' && {
-        PaperProps: {
-          elevation: 0
-        }
-      })
-    },
-    styleOverrides: {
-      paper: {
-        ...(skin !== 'bordered' && {
-          boxShadow: 'var(--mui-customShadows-lg)'
-        })
-      }
-    }
-  }
-})
-
-export default drawer
diff --git a/typescript-version/src/@core/theme/overrides/fab.ts b/typescript-version/src/@core/theme/overrides/fab.ts
deleted file mode 100644
index b0817211b..000000000
--- a/typescript-version/src/@core/theme/overrides/fab.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-// MUI Imports
-import type { Theme } from '@mui/material/styles'
-
-const fab: Theme['components'] = {
-  MuiFab: {
-    variants: [
-      {
-        props: { color: 'default' },
-        style: {
-          color: 'rgb(var(--mui-mainColorChannels-light) / 0.9)',
-          '&.Mui-focusVisible:not(:has(span.MuiTouchRipple-root))': {
-            backgroundColor: 'var(--mui-palette-grey-A100)'
-          }
-        }
-      },
-      {
-        props: { color: 'primary' },
-        style: {
-          '&.Mui-focusVisible:not(:has(span.MuiTouchRipple-root))': {
-            backgroundColor: 'var(--mui-palette-primary-dark)'
-          }
-        }
-      },
-      {
-        props: { color: 'secondary' },
-        style: {
-          '&.Mui-focusVisible:not(:has(span.MuiTouchRipple-root))': {
-            backgroundColor: 'var(--mui-palette-secondary-dark)'
-          }
-        }
-      },
-      {
-        props: { color: 'error' },
-        style: {
-          '&.Mui-focusVisible:not(:has(span.MuiTouchRipple-root))': {
-            backgroundColor: 'var(--mui-palette-error-dark)'
-          }
-        }
-      },
-      {
-        props: { color: 'warning' },
-        style: {
-          '&.Mui-focusVisible:not(:has(span.MuiTouchRipple-root))': {
-            backgroundColor: 'var(--mui-palette-warning-dark)'
-          }
-        }
-      },
-      {
-        props: { color: 'info' },
-        style: {
-          '&.Mui-focusVisible:not(:has(span.MuiTouchRipple-root))': {
-            backgroundColor: 'var(--mui-palette-info-dark)'
-          }
-        }
-      },
-      {
-        props: { color: 'success' },
-        style: {
-          '&.Mui-focusVisible:not(:has(span.MuiTouchRipple-root))': {
-            backgroundColor: 'var(--mui-palette-success-dark)'
-          }
-        }
-      }
-    ]
-  }
-}
-
-export default fab
diff --git a/typescript-version/src/@core/theme/overrides/form-control-label.ts b/typescript-version/src/@core/theme/overrides/form-control-label.ts
deleted file mode 100644
index fb6a503b2..000000000
--- a/typescript-version/src/@core/theme/overrides/form-control-label.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-// MUI Imports
-import type { Theme } from '@mui/material/styles'
-
-const formControlLabel: Theme['components'] = {
-  MuiFormControlLabel: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        marginInlineStart: theme.spacing(-2)
-      }),
-      label: {
-        '&, &.Mui-disabled': {
-          color: 'var(--mui-palette-text-primary)'
-        },
-        '&.Mui-disabled': {
-          opacity: 0.45
-        }
-      }
-    }
-  }
-}
-
-export default formControlLabel
diff --git a/typescript-version/src/@core/theme/overrides/icon-button.ts b/typescript-version/src/@core/theme/overrides/icon-button.ts
deleted file mode 100644
index 18f997507..000000000
--- a/typescript-version/src/@core/theme/overrides/icon-button.ts
+++ /dev/null
@@ -1,140 +0,0 @@
-// MUI Imports
-import type { Theme } from '@mui/material/styles'
-
-// Config Imports
-import themeConfig from '@configs/themeConfig'
-
-const iconButton: Theme['components'] = {
-  MuiIconButton: {
-    styleOverrides: {
-      root: {
-        '& .MuiSvgIcon-root, & i, & svg': {
-          fontSize: 'inherit'
-        }
-      },
-      sizeSmall: ({ theme }) => ({
-        padding: theme.spacing(1.75),
-        fontSize: '1.25rem'
-      }),
-      sizeMedium: ({ theme }) => ({
-        padding: theme.spacing(2),
-        fontSize: '1.375rem'
-      }),
-      sizeLarge: ({ theme }) => ({
-        padding: theme.spacing(2.25),
-        fontSize: '1.5rem'
-      })
-    },
-    variants: [
-      {
-        props: { color: 'default' },
-        style: {
-          '&:not(.Mui-disabled):hover, &:not(.Mui-disabled):active': {
-            backgroundColor: 'rgb(var(--mui-palette-text-primaryChannel) / 0.08)'
-          },
-          ...(themeConfig.disableRipple && {
-            '&.Mui-focusVisible:not(.Mui-disabled)': {
-              backgroundColor: 'rgb(var(--mui-palette-text-primaryChannel) / 0.08)'
-            }
-          }),
-          '&.Mui-disabled': {
-            opacity: 0.45,
-            color: 'var(--mui-palette-action-active)'
-          }
-        }
-      },
-      {
-        props: { color: 'primary' },
-        style: {
-          '&:not(.Mui-disabled):hover, &:not(.Mui-disabled):active': {
-            backgroundColor: 'var(--mui-palette-primary-lighterOpacity)'
-          },
-          ...(themeConfig.disableRipple && {
-            '&.Mui-focusVisible:not(.Mui-disabled)': { backgroundColor: 'var(--mui-palette-primary-lighterOpacity)' }
-          }),
-          '&.Mui-disabled': {
-            opacity: 0.45,
-            color: 'var(--mui-palette-primary-main)'
-          }
-        }
-      },
-      {
-        props: { color: 'secondary' },
-        style: {
-          '&:not(.Mui-disabled):hover, &:not(.Mui-disabled):active': {
-            backgroundColor: 'var(--mui-palette-secondary-lighterOpacity)'
-          },
-          ...(themeConfig.disableRipple && {
-            '&.Mui-focusVisible:not(.Mui-disabled)': { backgroundColor: 'var(--mui-palette-secondary-lighterOpacity)' }
-          }),
-          '&.Mui-disabled': {
-            opacity: 0.45,
-            color: 'var(--mui-palette-secondary-main)'
-          }
-        }
-      },
-      {
-        props: { color: 'error' },
-        style: {
-          '&:not(.Mui-disabled):hover, &:not(.Mui-disabled):active': {
-            backgroundColor: 'var(--mui-palette-error-lighterOpacity)'
-          },
-          ...(themeConfig.disableRipple && {
-            '&.Mui-focusVisible:not(.Mui-disabled)': { backgroundColor: 'var(--mui-palette-error-lighterOpacity)' }
-          }),
-          '&.Mui-disabled': {
-            opacity: 0.45,
-            color: 'var(--mui-palette-error-main)'
-          }
-        }
-      },
-      {
-        props: { color: 'warning' },
-        style: {
-          '&:not(.Mui-disabled):hover, &:not(.Mui-disabled):active': {
-            backgroundColor: 'var(--mui-palette-warning-lighterOpacity)'
-          },
-          ...(themeConfig.disableRipple && {
-            '&.Mui-focusVisible:not(.Mui-disabled)': { backgroundColor: 'var(--mui-palette-warning-lighterOpacity)' }
-          }),
-          '&.Mui-disabled': {
-            opacity: 0.45,
-            color: 'var(--mui-palette-warning-main)'
-          }
-        }
-      },
-      {
-        props: { color: 'info' },
-        style: {
-          '&:not(.Mui-disabled):hover, &:not(.Mui-disabled):active': {
-            backgroundColor: 'var(--mui-palette-info-lighterOpacity)'
-          },
-          ...(themeConfig.disableRipple && {
-            '&.Mui-focusVisible:not(.Mui-disabled)': { backgroundColor: 'var(--mui-palette-info-lighterOpacity)' }
-          }),
-          '&.Mui-disabled': {
-            opacity: 0.45,
-            color: 'var(--mui-palette-info-main)'
-          }
-        }
-      },
-      {
-        props: { color: 'success' },
-        style: {
-          '&:not(.Mui-disabled):hover, &:not(.Mui-disabled):active': {
-            backgroundColor: 'var(--mui-palette-success-lighterOpacity)'
-          },
-          ...(themeConfig.disableRipple && {
-            '&.Mui-focusVisible:not(.Mui-disabled)': { backgroundColor: 'var(--mui-palette-success-lighterOpacity)' }
-          }),
-          '&.Mui-disabled': {
-            opacity: 0.45,
-            color: 'var(--mui-palette-success-main)'
-          }
-        }
-      }
-    ]
-  }
-}
-
-export default iconButton
diff --git a/typescript-version/src/@core/theme/overrides/index.ts b/typescript-version/src/@core/theme/overrides/index.ts
deleted file mode 100644
index bfa7f9f37..000000000
--- a/typescript-version/src/@core/theme/overrides/index.ts
+++ /dev/null
@@ -1,83 +0,0 @@
-// Override Imports
-import Accordion from './accordion'
-import Alerts from './alerts'
-import Autocomplete from './autocomplete'
-import avatar from './avatar'
-import backdrop from './backdrop'
-import badges from './badges'
-import breadcrumbs from './breadcrumbs'
-import button from './button'
-import buttonGroup from './button-group'
-import card from './card'
-import Checkbox from './checkbox'
-import chip from './chip'
-import dialog from './dialog'
-import drawer from './drawer'
-import fab from './fab'
-import formControlLabel from './form-control-label'
-import iconButton from './icon-button'
-import input from './input'
-import list from './list'
-import menu from './menu'
-import pagination from './pagination'
-import paper from './paper'
-import popover from './popover'
-import progress from './progress'
-import Radio from './radio'
-import Rating from './rating'
-import Select from './select'
-import slider from './slider'
-import snackbar from './snackbar'
-import switchOverrides from './switch'
-import tablePagination from './table-pagination'
-import tabs from './tabs'
-import timeline from './timeline'
-import toggleButton from './toggle-button'
-import tooltip from './tooltip'
-import typography from './typography'
-
-const overrides = () => {
-  const skin = 'default'
-
-  return Object.assign(
-    {},
-    Accordion(skin),
-    Alerts,
-    Autocomplete(skin),
-    avatar,
-    backdrop,
-    badges,
-    breadcrumbs,
-    button,
-    buttonGroup,
-    card(skin),
-    Checkbox,
-    chip,
-    dialog(skin),
-    drawer(skin),
-    fab,
-    formControlLabel,
-    iconButton,
-    input,
-    list,
-    menu(skin),
-    pagination,
-    paper,
-    popover(skin),
-    progress,
-    Radio,
-    Rating,
-    Select,
-    slider,
-    snackbar(skin),
-    switchOverrides,
-    tablePagination,
-    tabs,
-    timeline,
-    toggleButton,
-    tooltip,
-    typography
-  )
-}
-
-export default overrides
diff --git a/typescript-version/src/@core/theme/overrides/input.ts b/typescript-version/src/@core/theme/overrides/input.ts
deleted file mode 100644
index 1fc22c685..000000000
--- a/typescript-version/src/@core/theme/overrides/input.ts
+++ /dev/null
@@ -1,112 +0,0 @@
-// MUI Imports
-import type { Theme } from '@mui/material/styles'
-
-const input: Theme['components'] = {
-  MuiFormControl: {
-    styleOverrides: {
-      root: {
-        '&:has(.MuiRadio-root) .MuiFormHelperText-root, &:has(.MuiCheckbox-root) .MuiFormHelperText-root, &:has(.MuiSwitch-root) .MuiFormHelperText-root':
-          {
-            marginInline: 0
-          }
-      }
-    }
-  },
-  MuiInputBase: {
-    styleOverrides: {
-      root: {
-        lineHeight: 1.6,
-        '&.MuiInput-underline': {
-          '&:before': {
-            borderColor: 'var(--mui-palette-customColors-inputBorder)'
-          },
-          '&:not(.Mui-disabled, .Mui-error):hover:before': {
-            borderColor: 'var(--mui-palette-action-active)'
-          }
-        },
-        '&.Mui-disabled .MuiInputAdornment-root, &.Mui-disabled .MuiInputAdornment-root > *': {
-          color: 'var(--mui-palette-action-disabled)'
-        }
-      }
-    }
-  },
-  MuiFilledInput: {
-    styleOverrides: {
-      root: {
-        '&:before': {
-          borderBottom: '1px solid var(--mui-palette-text-secondary)'
-        },
-        '&.Mui-disabled:before': {
-          borderBottomStyle: 'solid'
-        }
-      }
-    }
-  },
-  MuiInputLabel: {
-    styleOverrides: {
-      shrink: ({ ownerState }) => ({
-        ...(ownerState.variant === 'outlined' && {
-          color: 'var(--mui-palette-text-secondary)',
-          transform: 'translate(14px, -8px) scale(0.867)'
-        }),
-        ...(ownerState.variant === 'filled' && {
-          transform: 'translate(12px, 7px) scale(0.867)'
-        }),
-        ...(ownerState.variant === 'standard' && {
-          transform: 'translate(0, -1.5px) scale(0.867)'
-        })
-      })
-    }
-  },
-  MuiOutlinedInput: {
-    styleOverrides: {
-      root: {
-        '&:not(.Mui-focused):not(.Mui-error):not(.Mui-disabled):hover .MuiOutlinedInput-notchedOutline': {
-          borderColor: 'var(--mui-palette-action-active)'
-        },
-        '&.Mui-disabled .MuiOutlinedInput-notchedOutline': {
-          borderColor: 'var(--mui-palette-action-disabledBackground)'
-        }
-      },
-      input: ({ theme, ownerState }) => ({
-        ...(ownerState?.size === 'medium' && {
-          '&:not(.MuiInputBase-inputMultiline, .MuiInputBase-inputAdornedStart)': {
-            paddingBlock: theme.spacing(4)
-          },
-          height: '1.5em'
-        }),
-        '& ~ .MuiOutlinedInput-notchedOutline': {
-          borderColor: 'var(--mui-palette-customColors-inputBorder)'
-        }
-      }),
-      notchedOutline: {
-        '& legend': {
-          fontSize: '0.867em'
-        }
-      }
-    }
-  },
-  MuiInputAdornment: {
-    styleOverrides: {
-      root: {
-        color: 'var(--mui-palette-text-primary)',
-        '& i, & svg': {
-          fontSize: '1.25rem'
-        },
-        '& *': {
-          color: 'inherit !important'
-        }
-      }
-    }
-  },
-  MuiFormHelperText: {
-    styleOverrides: {
-      root: {
-        lineHeight: 1,
-        letterSpacing: 'unset'
-      }
-    }
-  }
-}
-
-export default input
diff --git a/typescript-version/src/@core/theme/overrides/list.ts b/typescript-version/src/@core/theme/overrides/list.ts
deleted file mode 100644
index 7ea45aef9..000000000
--- a/typescript-version/src/@core/theme/overrides/list.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-// MUI Imports
-import type { Theme } from '@mui/material/styles'
-
-const list: Theme['components'] = {
-  MuiListItem: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        gap: theme.spacing(4)
-      }),
-      padding: ({ theme, ownerState }) => ({
-        ...(!ownerState.dense && {
-          paddingBlock: theme.spacing(2),
-          paddingInlineStart: theme.spacing(5)
-        })
-      })
-    }
-  },
-  MuiListItemAvatar: {
-    styleOverrides: {
-      root: {
-        minWidth: 'unset'
-      }
-    }
-  },
-  MuiListItemIcon: {
-    styleOverrides: {
-      root: {
-        minWidth: 0,
-        color: 'var(--mui-palette-text-primary)',
-        fontSize: '1.375rem',
-        '& > svg, & > i': {
-          fontSize: 'inherit'
-        }
-      }
-    }
-  },
-  MuiListItemButton: {
-    styleOverrides: {
-      root: ({ theme, ownerState }) => ({
-        gap: theme.spacing(4),
-        ...(!ownerState.dense && {
-          paddingBlock: theme.spacing(2)
-        }),
-        paddingInlineStart: theme.spacing(5),
-        '&.Mui-selected': {
-          backgroundColor: 'var(--mui-palette-primary-lightOpacity)',
-          '&:hover, &.Mui-focused, &.Mui-focusVisible': {
-            backgroundColor: 'var(--mui-palette-primary-mainOpacity)'
-          },
-          '& .MuiTypography-root': {
-            color: 'var(--mui-palette-primary-main)'
-          },
-          '& + .MuiListItemSecondaryAction-root .MuiIconButton-root': {
-            color: 'var(--mui-palette-primary-main)'
-          }
-        }
-      })
-    }
-  },
-  MuiListItemText: {
-    styleOverrides: {
-      root: {
-        margin: 0
-      },
-      primary: {
-        color: 'var(--mui-palette-text-primary)'
-      }
-    }
-  },
-  MuiListSubheader: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        ...theme.typography.subtitle2,
-        paddingBlock: 10,
-        paddingInline: theme.spacing(5)
-      })
-    }
-  }
-}
-
-export default list
diff --git a/typescript-version/src/@core/theme/overrides/menu.ts b/typescript-version/src/@core/theme/overrides/menu.ts
deleted file mode 100644
index 644e9740f..000000000
--- a/typescript-version/src/@core/theme/overrides/menu.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-// MUI Imports
-import type { Theme } from '@mui/material/styles'
-
-// Type Imports
-import type { Skin } from '@core/types'
-
-const menu = (skin: Skin): Theme['components'] => ({
-  MuiMenu: {
-    defaultProps: {
-      ...(skin === 'bordered' && {
-        slotProps: {
-          paper: {
-            elevation: 0
-          }
-        }
-      })
-    },
-    styleOverrides: {
-      paper: ({ theme }) => ({
-        marginBlockStart: theme.spacing(0.5),
-        ...(skin !== 'bordered' && {
-          boxShadow: 'var(--mui-customShadows-lg)'
-        })
-      })
-    }
-  },
-  MuiMenuItem: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        paddingBlock: theme.spacing(2),
-        color: 'var(--mui-palette-text-primary)',
-        '& i, & svg': {
-          fontSize: '1.375rem'
-        },
-        '& .MuiListItemIcon-root': {
-          minInlineSize: 0
-        },
-        '&.Mui-selected': {
-          backgroundColor: 'var(--mui-palette-primary-lightOpacity)',
-          color: 'var(--mui-palette-primary-main)',
-          '& .MuiListItemIcon-root': {
-            color: 'var(--mui-palette-primary-main)'
-          },
-          '&:hover, &.Mui-focused, &.Mui-focusVisible': {
-            backgroundColor: 'var(--mui-palette-primary-mainOpacity)'
-          }
-        },
-        '&.Mui-disabled': {
-          color: 'var(--mui-palette-text-disabled)',
-          opacity: 1
-        }
-      })
-    }
-  }
-})
-
-export default menu
diff --git a/typescript-version/src/@core/theme/overrides/pagination.ts b/typescript-version/src/@core/theme/overrides/pagination.ts
deleted file mode 100644
index 79f99acca..000000000
--- a/typescript-version/src/@core/theme/overrides/pagination.ts
+++ /dev/null
@@ -1,172 +0,0 @@
-// MUI Imports
-import type { Theme } from '@mui/material/styles'
-
-const pagination: Theme['components'] = {
-  MuiPagination: {
-    styleOverrides: {
-      ul: {
-        rowGap: 6
-      }
-    },
-    variants: [
-      {
-        props: { variant: 'text', color: 'primary' },
-        style: {
-          '& .MuiPaginationItem-root.Mui-selected.Mui-disabled': {
-            backgroundColor: 'var(--mui-palette-primary-main)',
-            color: 'var(--mui-palette-primary-contrastText)'
-          }
-        }
-      },
-      {
-        props: { variant: 'text', color: 'secondary' },
-        style: {
-          '& .MuiPaginationItem-root.Mui-selected.Mui-disabled': {
-            backgroundColor: 'var(--mui-palette-secondary-main)',
-            color: 'var(--mui-palette-secondary-contrastText)'
-          }
-        }
-      },
-      {
-        props: { variant: 'outlined', color: 'standard' },
-        style: {
-          '& .MuiPaginationItem-root.Mui-selected.Mui-disabled': {
-            borderColor: 'var(--mui-palette-action-selected)'
-          }
-        }
-      },
-      {
-        props: { variant: 'outlined', color: 'primary' },
-        style: {
-          '& .MuiPaginationItem-root.Mui-selected.Mui-disabled': {
-            color: 'var(--mui-palette-primary-main)',
-            backgroundColor: 'rgb(var(--mui-palette-primary-mainChannel) / var(--mui-palette-action-activatedOpacity))',
-            borderColor: 'rgba(var(--mui-palette-primary-mainChannel) / 0.5)'
-          }
-        }
-      },
-      {
-        props: { variant: 'outlined', color: 'secondary' },
-        style: {
-          '& .MuiPaginationItem-root.Mui-selected.Mui-disabled': {
-            color: 'var(--mui-palette-secondary-main)',
-            backgroundColor:
-              'rgb(var(--mui-palette-secondary-mainChannel) / var(--mui-palette-action-activatedOpacity))',
-            borderColor: 'rgba(var(--mui-palette-secondary-mainChannel) / 0.5)'
-          }
-        }
-      },
-      {
-        props: { variant: 'tonal' },
-        style: {
-          '& .MuiPaginationItem-root:not(.MuiPaginationItem-ellipsis)': {
-            backgroundColor: 'var(--mui-palette-action-selected)'
-          }
-        }
-      },
-      {
-        props: { variant: 'tonal', color: 'standard' },
-        style: {
-          '& .MuiPaginationItem-root.Mui-selected': {
-            backgroundColor: 'var(--mui-palette-primary-lightOpacity)',
-            color: 'var(--mui-palette-primary-main)',
-            '&:hover': {
-              backgroundColor: 'var(--mui-palette-primary-mainOpacity)'
-            }
-          },
-          '& .MuiPaginationItem-root:hover:not(.Mui-selected):not(.MuiPaginationItem-ellipsis)': {
-            backgroundColor: 'var(--mui-palette-action-focus)'
-          },
-          '& .MuiPaginationItem-root.Mui-selected.Mui-disabled': {
-            backgroundColor: 'var(--mui-palette-primary-lightOpacity)',
-            color: 'var(--mui-palette-primary-main)'
-          }
-        }
-      },
-      {
-        props: { variant: 'tonal', color: 'primary' },
-        style: {
-          '& .MuiPaginationItem-root.Mui-selected': {
-            backgroundColor: 'var(--mui-palette-primary-main)',
-            color: 'var(--mui-palette-primary-contrastText)',
-            '&:not(.Mui-disabled)': {
-              boxShadow: 'var(--mui-customShadows-xs)'
-            },
-            '&:hover': {
-              backgroundColor: 'var(--mui-palette-primary-dark)'
-            }
-          },
-          '& .MuiPaginationItem-root:hover:not(.Mui-selected):not(.MuiPaginationItem-ellipsis)': {
-            backgroundColor: 'var(--mui-palette-primary-lightOpacity)',
-            color: 'var(--mui-palette-primary-main)'
-          },
-          '& .MuiPaginationItem-root.Mui-selected.Mui-disabled': {
-            backgroundColor: 'var(--mui-palette-primary-main)',
-            color: 'var(--mui-palette-primary-contrastText)'
-          }
-        }
-      },
-      {
-        props: { variant: 'tonal', color: 'secondary' },
-        style: {
-          '& .MuiPaginationItem-root.Mui-selected': {
-            backgroundColor: 'var(--mui-palette-secondary-main)',
-            color: 'var(--mui-palette-secondary-contrastText)',
-            '&:not(.Mui-disabled)': {
-              boxShadow: 'var(--mui-customShadows-xs)'
-            },
-            '&:hover': {
-              backgroundColor: 'var(--mui-palette-secondary-dark)'
-            }
-          },
-          '& .MuiPaginationItem-root:hover:not(.Mui-selected):not(.MuiPaginationItem-ellipsis)': {
-            backgroundColor: 'var(--mui-palette-secondary-mainOpacity)',
-            color: 'var(--mui-palette-secondary-main)'
-          },
-          '& .MuiPaginationItem-root.Mui-selected.Mui-disabled': {
-            backgroundColor: 'var(--mui-palette-secondary-main)',
-            color: 'var(--mui-palette-secondary-contrastText)'
-          }
-        }
-      }
-    ]
-  },
-  MuiPaginationItem: {
-    styleOverrides: {
-      root: ({ ownerState }) => ({
-        ...(ownerState.size === 'medium' && {
-          height: '2.375rem',
-          minWidth: '2.375rem'
-        }),
-        ...(ownerState.shape !== 'rounded' && {
-          borderRadius: '50px'
-        }),
-        '&.Mui-selected.Mui-disabled': {
-          color: 'var(--mui-palette-text-primary)',
-          opacity: 0.45
-        },
-        '&.Mui-disabled': {
-          opacity: 0.45
-        },
-        ...(ownerState.shape === 'rounded' &&
-          ownerState.size === 'small' && {
-            borderRadius: 'var(--mui-shape-customBorderRadius-sm)'
-          }),
-        ...(ownerState.shape === 'rounded' &&
-          ownerState.size === 'large' && {
-            borderRadius: 'var(--mui-shape-customBorderRadius-lg)'
-          })
-      }),
-      sizeSmall: {
-        height: '2.125rem',
-        minWidth: '2.125rem'
-      },
-      sizeLarge: {
-        height: '2.625rem',
-        minWidth: '2.625rem'
-      }
-    }
-  }
-}
-
-export default pagination
diff --git a/typescript-version/src/@core/theme/overrides/paper.ts b/typescript-version/src/@core/theme/overrides/paper.ts
deleted file mode 100644
index 8a0a6efc0..000000000
--- a/typescript-version/src/@core/theme/overrides/paper.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-// MUI Imports
-import type { Theme } from '@mui/material/styles'
-
-const paper: Theme['components'] = {
-  MuiPaper: {
-    styleOverrides: {
-      root: {
-        backgroundImage: 'none'
-      }
-    }
-  }
-}
-
-export default paper
diff --git a/typescript-version/src/@core/theme/overrides/popover.ts b/typescript-version/src/@core/theme/overrides/popover.ts
deleted file mode 100644
index 0db70cd4d..000000000
--- a/typescript-version/src/@core/theme/overrides/popover.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-// MUI Imports
-import type { Theme } from '@mui/material/styles'
-
-// Type Imports
-import type { Skin } from '@core/types'
-
-const popover = (skin: Skin): Theme['components'] => ({
-  MuiPopover: {
-    styleOverrides: {
-      paper: {
-        ...(skin === 'bordered'
-          ? { boxShadow: 'none', border: '1px solid var(--mui-palette-divider)' }
-          : {
-              boxShadow: 'var(--mui-customShadows-sm)'
-            })
-      }
-    }
-  }
-})
-
-export default popover
diff --git a/typescript-version/src/@core/theme/overrides/progress.ts b/typescript-version/src/@core/theme/overrides/progress.ts
deleted file mode 100644
index 1e0e2ece8..000000000
--- a/typescript-version/src/@core/theme/overrides/progress.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-// MUI Imports
-import type { Theme } from '@mui/material/styles'
-
-const progress: Theme['components'] = {
-  MuiLinearProgress: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        height: 6,
-        borderRadius: theme.shape.borderRadius,
-        '& .MuiLinearProgress-bar': {
-          borderRadius: theme.shape.borderRadius
-        }
-      })
-    }
-  }
-}
-
-export default progress
diff --git a/typescript-version/src/@core/theme/overrides/radio.tsx b/typescript-version/src/@core/theme/overrides/radio.tsx
deleted file mode 100644
index 067ef95b9..000000000
--- a/typescript-version/src/@core/theme/overrides/radio.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-// React Imports
-import React from 'react'
-
-// MUI Imports
-import type { Theme } from '@mui/material/styles'
-
-const IconChecked = () => {
-  return (
-    <svg width='1em' height='1em' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
-      <path
-        d='M12 18.5a6.5 6.5 0 1 1 0-13 6.5 6.5 0 0 1 0 13Z'
-        fill='var(--mui-palette-common-white)'
-        stroke='currentColor'
-        strokeWidth='5'
-      />
-    </svg>
-  )
-}
-
-const UncheckedIcon = () => {
-  return (
-    <svg width='1em' height='1em' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
-      <path d='M12 20a8 8 0 1 1 0-16 8 8 0 0 1 0 16Z' stroke='var(--mui-palette-text-secondary)' strokeWidth='2' />
-    </svg>
-  )
-}
-
-const radio: Theme['components'] = {
-  MuiRadio: {
-    defaultProps: {
-      icon: <UncheckedIcon />,
-      checkedIcon: <IconChecked />
-    },
-    styleOverrides: {
-      root: ({ theme, ownerState }) => ({
-        ...(ownerState.size === 'small'
-          ? {
-              padding: theme.spacing(1),
-              '& svg': {
-                fontSize: '1.25rem'
-              }
-            }
-          : {
-              padding: theme.spacing(1.5),
-              '& svg': {
-                fontSize: '1.5rem'
-              }
-            }),
-        '&.Mui-checked:not(.Mui-disabled) svg': {
-          filter: 'drop-shadow(var(--mui-customShadows-xs))'
-        },
-        '&.Mui-disabled': {
-          opacity: 0.45,
-          '&:not(.Mui-checked)': {
-            color: 'var(--mui-palette-text-secondary)'
-          },
-          '&.Mui-checked.MuiRadio-colorPrimary': {
-            color: 'var(--mui-palette-primary-main)'
-          },
-          '&.Mui-checked.MuiRadio-colorSecondary': {
-            color: 'var(--mui-palette-secondary-main)'
-          },
-          '&.Mui-checked.MuiRadio-colorError': {
-            color: 'var(--mui-palette-error-main)'
-          },
-          '&.Mui-checked.MuiRadio-colorWarning': {
-            color: 'var(--mui-palette-warning-main)'
-          },
-          '&.Mui-checked.MuiRadio-colorInfo': {
-            color: 'var(--mui-palette-info-main)'
-          },
-          '&.Mui-checked.MuiRadio-colorSuccess': {
-            color: 'var(--mui-palette-success-main)'
-          }
-        }
-      })
-    }
-  }
-}
-
-export default radio
diff --git a/typescript-version/src/@core/theme/overrides/rating.tsx b/typescript-version/src/@core/theme/overrides/rating.tsx
deleted file mode 100644
index e08b8f4ec..000000000
--- a/typescript-version/src/@core/theme/overrides/rating.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-// MUI Imports
-import type { Theme } from '@mui/material/styles'
-
-const rating: Theme['components'] = {
-  MuiRating: {
-    defaultProps: {
-      emptyIcon: <i className='ri-star-line' />,
-      icon: <i className='ri-star-fill' />
-    },
-    styleOverrides: {
-      root: {
-        gap: '2px',
-        color: 'var(--mui-palette-warning-main)',
-        '& i, & svg': {
-          flexShrink: 0
-        },
-        '& .MuiRating-decimal > label:first-of-type, & .MuiRating-decimal > span:first-of-type': {
-          zIndex: 1
-        }
-      },
-      sizeSmall: {
-        '& .MuiRating-icon i, & .MuiRating-icon svg': {
-          fontSize: '1.25rem'
-        }
-      },
-      sizeLarge: {
-        '& .MuiRating-icon i, & .MuiRating-icon svg': {
-          fontSize: '1.75rem'
-        }
-      }
-    }
-  }
-}
-
-export default rating
diff --git a/typescript-version/src/@core/theme/overrides/select.tsx b/typescript-version/src/@core/theme/overrides/select.tsx
deleted file mode 100644
index b38fceff9..000000000
--- a/typescript-version/src/@core/theme/overrides/select.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-// React Imports
-import React from 'react'
-
-// MUI Imports
-import type { Theme } from '@mui/material/styles'
-
-const SelectIcon = () => {
-  return <i className='ri-arrow-down-s-line' />
-}
-
-const iconStyles = (theme: Theme) => ({
-  userSelect: 'none',
-  display: 'inline-block',
-  fill: 'currentColor',
-  flexShrink: 0,
-  transition: theme.transitions.create('fill', {
-    duration: theme.transitions.duration.shorter
-  }),
-  fontSize: '1.25rem',
-  position: 'absolute',
-  right: '1rem',
-  top: 'calc(50% - 0.5em)',
-  pointerEvents: 'none'
-})
-
-const select: Theme['components'] = {
-  MuiSelect: {
-    defaultProps: {
-      IconComponent: SelectIcon
-    },
-    styleOverrides: {
-      select: ({ theme, ownerState }) => ({
-        ...(ownerState.variant === 'outlined' && {
-          minHeight: '1.5em'
-        }),
-        '&[aria-expanded="true"] ~ i, &[aria-expanded="true"] ~ svg': {
-          transform: 'rotate(180deg)'
-        },
-        '& ~ i, & ~ svg': iconStyles(theme as Theme),
-        '&.MuiInputBase-inputSizeSmall': {
-          '& ~ i, & ~ svg': {
-            height: '1.375rem',
-            width: '1.375rem'
-          }
-        },
-        '&:not(aria-label="Without label") ~ .MuiOutlinedInput-notchedOutline > legend > span': {
-          paddingInline: '5px'
-        }
-      })
-    }
-  },
-  MuiNativeSelect: {
-    styleOverrides: {
-      select: ({ theme }) => ({
-        '& + i, & + svg': iconStyles(theme as Theme)
-      })
-    }
-  }
-}
-
-export default select
diff --git a/typescript-version/src/@core/theme/overrides/slider.ts b/typescript-version/src/@core/theme/overrides/slider.ts
deleted file mode 100644
index d49bb7f29..000000000
--- a/typescript-version/src/@core/theme/overrides/slider.ts
+++ /dev/null
@@ -1,100 +0,0 @@
-// MUI Imports
-import type { Theme } from '@mui/material/styles'
-
-const slider: Theme['components'] = {
-  MuiSlider: {
-    styleOverrides: {
-      root: ({ ownerState }) => ({
-        boxSizing: 'border-box',
-        ...(ownerState.orientation === 'horizontal'
-          ? ownerState.size !== 'small'
-            ? { height: 6 }
-            : { height: 4 }
-          : ownerState.size !== 'small'
-            ? { width: 6 }
-            : { width: 4 }),
-        '&.Mui-disabled': {
-          opacity: 0.45,
-          color: `var(--mui-palette-${ownerState.color}-main)`
-        }
-      }),
-      thumb: ({ ownerState }) => ({
-        ...(ownerState.size === 'small'
-          ? {
-              height: 14,
-              width: 14,
-              border: '2px solid currentColor',
-              '&:hover, &.Mui-focusVisible': {
-                boxShadow: `0 0 0 7px var(--mui-palette-${ownerState.color}-lightOpacity)`
-              },
-              '&.Mui-active.Mui-focusVisible': {
-                boxShadow: `0 0 0 10px var(--mui-palette-${ownerState.color}-lightOpacity)`
-              }
-            }
-          : {
-              height: 22,
-              width: 22,
-              border: '4px solid currentColor'
-            }),
-        backgroundColor: 'var(--mui-palette-common-white)',
-        ...(!ownerState.disabled && {
-          boxShadow: 'var(--mui-customShadows-sm)'
-        }),
-        '&:before': {
-          boxShadow: 'none'
-        },
-        '&:after': {
-          ...(ownerState.size === 'small'
-            ? {
-                height: 28,
-                width: 28
-              }
-            : {
-                height: 38,
-                width: 38
-              })
-        },
-        '&:hover, &.Mui-focusVisible': {
-          boxShadow: `0 0 0 8px var(--mui-palette-${ownerState.color}-lightOpacity)`
-        },
-        '&.Mui-active.Mui-focusVisible': {
-          boxShadow: `0 0 0 13px var(--mui-palette-${ownerState.color}-lightOpacity)`
-        }
-      }),
-      rail: ({ ownerState }) => ({
-        opacity: 1,
-        color: `var(--mui-palette-${ownerState.color}-lightOpacity)`,
-        ...(ownerState.track === 'inverted' && {
-          backgroundColor: `var(--mui-palette-${ownerState.color}-main)`
-        })
-      }),
-      valueLabel: ({ theme, ownerState }) => ({
-        ...(ownerState.size === 'small'
-          ? {
-              ...theme.typography.caption,
-              borderRadius: 'var(--mui-shape-customBorderRadius-sm)',
-              padding: theme.spacing(1, 2)
-            }
-          : {
-              ...theme.typography.body2,
-              fontWeight: theme.typography.fontWeightMedium,
-              borderRadius: 'var(--mui-shape-borderRadius)',
-              padding: theme.spacing(1, 2.5)
-            }),
-        color: 'var(--mui-palette-customColors-tooltipText)',
-        backgroundColor: 'var(--mui-palette-Tooltip-bg)',
-        '&:before': {
-          display: 'none'
-        }
-      }),
-      track: ({ theme, ownerState }) => ({
-        ...(ownerState.track === 'inverted' && {
-          backgroundColor: `color-mix(in srgb, ${theme.palette[ownerState.color || 'primary'].main} 16%, var(--mui-palette-background-paper))`,
-          borderColor: `color-mix(in srgb, ${theme.palette[ownerState.color || 'primary'].main} 16%, var(--mui-palette-background-paper))`
-        })
-      })
-    }
-  }
-}
-
-export default slider
diff --git a/typescript-version/src/@core/theme/overrides/snackbar.ts b/typescript-version/src/@core/theme/overrides/snackbar.ts
deleted file mode 100644
index 6ac0481a1..000000000
--- a/typescript-version/src/@core/theme/overrides/snackbar.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-// MUI Imports
-import type { Theme } from '@mui/material/styles'
-
-// Type Imports
-import type { Skin } from '@core/types'
-
-const snackbar = (skin: Skin): Theme['components'] => ({
-  MuiSnackbarContent: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        padding: theme.spacing(0, 4),
-        ...(skin !== 'bordered'
-          ? {
-              boxShadow: 'var(--mui-customShadows-xs)'
-            }
-          : {
-              boxShadow: 'none'
-            }),
-        '& .MuiSnackbarContent-message': {
-          paddingBlock: theme.spacing(3)
-        }
-      })
-    }
-  }
-})
-
-export default snackbar
diff --git a/typescript-version/src/@core/theme/overrides/switch.ts b/typescript-version/src/@core/theme/overrides/switch.ts
deleted file mode 100644
index ef3b367f4..000000000
--- a/typescript-version/src/@core/theme/overrides/switch.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-// MUI Imports
-import type { Theme } from '@mui/material/styles'
-
-const switchOverrides: Theme['components'] = {
-  MuiSwitch: {
-    defaultProps: {
-      disableRipple: true
-    },
-    styleOverrides: {
-      root: ({ theme, ownerState }) => ({
-        '&:has(.Mui-disabled)': {
-          opacity: 0.45
-        },
-        ...(ownerState.size !== 'small'
-          ? {
-              width: 46,
-              height: 36,
-              padding: theme.spacing(2.25, 2)
-            }
-          : {
-              width: 42,
-              height: 30,
-              padding: theme.spacing(1.75, 2),
-              '& .MuiSwitch-thumb': {
-                width: 12,
-                height: 12
-              },
-              '& .MuiSwitch-switchBase': {
-                padding: 7,
-                left: 3,
-                '&.Mui-checked': {
-                  left: -3
-                }
-              }
-            })
-      }),
-      switchBase: {
-        top: 2,
-        left: 1,
-        '&.Mui-checked': {
-          left: -7,
-          color: 'var(--mui-palette-common-white)',
-          '& + .MuiSwitch-track': {
-            opacity: 1
-          }
-        },
-        '&.Mui-disabled + .MuiSwitch-track': {
-          opacity: 1
-        },
-        '&:hover:not(:has(span.MuiTouchRipple-root))': {
-          backgroundColor: 'transparent'
-        }
-      },
-      thumb: {
-        width: 14,
-        height: 14,
-        boxShadow: 'var(--mui-customShadows-xs)'
-      },
-      track: {
-        opacity: 1,
-        borderRadius: 10,
-        backgroundColor: 'var(--mui-palette-action-focus)',
-        boxShadow: `0 0 4px rgb(0 0 0 / 0.16) inset`
-      }
-    }
-  }
-}
-
-export default switchOverrides
diff --git a/typescript-version/src/@core/theme/overrides/table-pagination.ts b/typescript-version/src/@core/theme/overrides/table-pagination.ts
deleted file mode 100644
index 9170280a9..000000000
--- a/typescript-version/src/@core/theme/overrides/table-pagination.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-// MUI Imports
-import type { Theme } from '@mui/material/styles'
-
-const tablePagination: Theme['components'] = {
-  MuiTablePagination: {
-    styleOverrides: {
-      toolbar: ({ theme }) => ({
-        paddingInlineEnd: `${theme.spacing(3)} !important`
-      }),
-      select: ({ theme }) => ({
-        ...theme.typography.body1,
-        paddingInlineStart: 0,
-        '& ~ i, & ~ svg': {
-          fontSize: 20,
-          right: '2px !important',
-          color: 'var(--mui-palette-action-active)'
-        }
-      }),
-      selectLabel: ({ theme }) => ({
-        ...theme.typography.body1,
-        color: 'var(--mui-palette-text-secondary)'
-      }),
-      input: ({ theme }) => ({
-        marginInlineEnd: theme.spacing(6)
-      }),
-      displayedRows: ({ theme }) => ({
-        ...theme.typography.body1
-      }),
-      actions: ({ theme }) => ({
-        marginInlineStart: theme.spacing(6),
-        '& .Mui-disabled': {
-          color: 'var(--mui-palette-action-active)'
-        },
-        '& .MuiIconButton-root:last-of-type': {
-          marginInlineStart: theme.spacing(2)
-        }
-      })
-    }
-  }
-}
-
-export default tablePagination
diff --git a/typescript-version/src/@core/theme/overrides/tabs.ts b/typescript-version/src/@core/theme/overrides/tabs.ts
deleted file mode 100644
index 33cadfbdc..000000000
--- a/typescript-version/src/@core/theme/overrides/tabs.ts
+++ /dev/null
@@ -1,92 +0,0 @@
-// MUI Imports
-import type { Theme } from '@mui/material/styles'
-
-const tabs: Theme['components'] = {
-  MuiTabs: {
-    styleOverrides: {
-      root: ({ theme, ownerState }) => ({
-        minBlockSize: 38,
-        ...(ownerState.orientation === 'horizontal'
-          ? {
-              borderBlockEnd: '1px solid var(--mui-palette-divider)'
-            }
-          : {
-              borderInlineEnd: '1px solid var(--mui-palette-divider)'
-            }),
-        '& .MuiTab-root:hover': {
-          ...(ownerState.orientation === 'horizontal'
-            ? {
-                paddingBlockEnd: theme.spacing(1.5),
-                ...(ownerState.textColor === 'secondary'
-                  ? {
-                      color: 'var(--mui-palette-secondary-main)',
-                      borderBlockEnd: '2px solid var(--mui-palette-secondary-lightOpacity)'
-                    }
-                  : {
-                      color: 'var(--mui-palette-primary-main)',
-                      borderBlockEnd: '2px solid var(--mui-palette-primary-lightOpacity)'
-                    })
-              }
-            : {
-                paddingInlineEnd: theme.spacing(5),
-                ...(ownerState.textColor === 'secondary'
-                  ? {
-                      color: 'var(--mui-palette-secondary-main)',
-                      borderInlineEnd: '2px solid var(--mui-palette-secondary-mainOpacity)'
-                    }
-                  : {
-                      color: 'var(--mui-palette-primary-main)',
-                      borderInlineEnd: '2px solid var(--mui-palette-primary-mainOpacity)'
-                    })
-              }),
-          '& .MuiTabScrollButton-root': {
-            borderRadius: theme.shape.borderRadius
-          }
-        },
-        '& ~ .MuiTabPanel-root': {
-          ...(ownerState.orientation === 'horizontal'
-            ? {
-                paddingBlockStart: theme.spacing(5)
-              }
-            : {
-                paddingInlineStart: theme.spacing(5)
-              })
-        }
-      }),
-      vertical: {
-        minWidth: 131,
-        '& .MuiTab-root': {
-          minWidth: 130
-        }
-      }
-    }
-  },
-  MuiTab: {
-    styleOverrides: {
-      root: ({ theme, ownerState }) => ({
-        lineHeight: 1.4667,
-        padding: theme.spacing(2, 5.5),
-        minBlockSize: 38,
-        color: 'var(--mui-palette-text-primary)',
-        '& > .MuiTab-iconWrapper': {
-          fontSize: '1.125rem',
-          ...(ownerState.iconPosition === 'start' && {
-            marginInlineEnd: theme.spacing(1.5)
-          }),
-          ...(ownerState.iconPosition === 'end' && {
-            marginInlineStart: theme.spacing(1.5)
-          })
-        }
-      })
-    }
-  },
-  MuiTabPanel: {
-    styleOverrides: {
-      root: {
-        padding: 0
-      }
-    }
-  }
-}
-
-export default tabs
diff --git a/typescript-version/src/@core/theme/overrides/timeline.ts b/typescript-version/src/@core/theme/overrides/timeline.ts
deleted file mode 100644
index d4e759b2b..000000000
--- a/typescript-version/src/@core/theme/overrides/timeline.ts
+++ /dev/null
@@ -1,161 +0,0 @@
-// MUI Imports
-import type { Theme } from '@mui/material/styles'
-
-const timeline: Theme['components'] = {
-  MuiTimeline: {
-    styleOverrides: {
-      root: {
-        padding: 0
-      }
-    }
-  },
-  MuiTimelineDot: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        margin: theme.spacing(3, 0),
-        boxShadow: 'none',
-        '&:has(> i), &:has(> svg)': {
-          padding: 6
-        },
-        '& > svg, & > i': {
-          fontSize: '1.25rem'
-        },
-        '&:has(svg)': {
-          width: 32,
-          height: 32,
-          alignItems: 'center',
-          justifyContent: 'center'
-        }
-      })
-    },
-    variants: [
-      {
-        props: { variant: 'outlined' },
-        style: {
-          padding: 5,
-          '& + .MuiTimelineConnector-root': {
-            backgroundColor: 'transparent',
-            borderInlineStart: '1px dashed var(--mui-palette-divider)'
-          },
-          '&:has(+ .MuiTimelineConnector-root)': {
-            marginBlock: '0.625rem'
-          }
-        }
-      },
-      {
-        props: { variant: 'filled', color: 'grey' },
-        style: {
-          boxShadow: '0 0 0 3px rgb(var(--mui-mainColorChannels-light) / 0.04)'
-        }
-      },
-      {
-        props: { variant: 'filled', color: 'primary' },
-        style: {
-          boxShadow: '0 0 0 3px var(--mui-palette-primary-lightOpacity)'
-        }
-      },
-      {
-        props: { variant: 'filled', color: 'secondary' },
-        style: {
-          boxShadow: '0 0 0 3px var(--mui-palette-secondary-lightOpacity)'
-        }
-      },
-      {
-        props: { variant: 'filled', color: 'error' },
-        style: {
-          boxShadow: '0 0 0 3px var(--mui-palette-error-lightOpacity)'
-        }
-      },
-      {
-        props: { variant: 'filled', color: 'warning' },
-        style: {
-          boxShadow: '0 0 0 3px var(--mui-palette-warning-lightOpacity)'
-        }
-      },
-      {
-        props: { variant: 'filled', color: 'info' },
-        style: {
-          boxShadow: '0 0 0 3px var(--mui-palette-info-lightOpacity)'
-        }
-      },
-      {
-        props: { variant: 'filled', color: 'success' },
-        style: {
-          boxShadow: '0 0 0 3px var(--mui-palette-success-lightOpacity)'
-        }
-      },
-      {
-        props: { variant: 'tonal' },
-        style: {
-          border: 0
-        }
-      },
-      {
-        props: { variant: 'tonal', color: 'grey' },
-        style: {
-          backgroundColor: 'var(--mui-palette-action-selected)',
-          color: 'var(--mui-palette-text-primary)'
-        }
-      },
-      {
-        props: { variant: 'tonal', color: 'primary' },
-        style: {
-          backgroundColor: 'var(--mui-palette-primary-lightOpacity)',
-          color: 'var(--mui-palette-primary-main)'
-        }
-      },
-      {
-        props: { variant: 'tonal', color: 'secondary' },
-        style: {
-          backgroundColor: 'var(--mui-palette-secondary-lightOpacity)',
-          color: 'var(--mui-palette-secondary-main)'
-        }
-      },
-      {
-        props: { variant: 'tonal', color: 'error' },
-        style: {
-          backgroundColor: 'var(--mui-palette-error-lightOpacity)',
-          color: 'var(--mui-palette-error-main)'
-        }
-      },
-      {
-        props: { variant: 'tonal', color: 'warning' },
-        style: {
-          backgroundColor: 'var(--mui-palette-warning-lightOpacity)',
-          color: 'var(--mui-palette-warning-main)'
-        }
-      },
-      {
-        props: { variant: 'tonal', color: 'info' },
-        style: {
-          backgroundColor: 'var(--mui-palette-info-lightOpacity)',
-          color: 'var(--mui-palette-info-main)'
-        }
-      },
-      {
-        props: { variant: 'tonal', color: 'success' },
-        style: {
-          backgroundColor: 'var(--mui-palette-success-lightOpacity)',
-          color: 'var(--mui-palette-success-main)'
-        }
-      }
-    ]
-  },
-  MuiTimelineConnector: {
-    styleOverrides: {
-      root: {
-        width: 1,
-        backgroundColor: 'var(--mui-palette-divider)'
-      }
-    }
-  },
-  MuiTimelineContent: {
-    styleOverrides: {
-      root: {
-        paddingBottom: '1rem'
-      }
-    }
-  }
-}
-
-export default timeline
diff --git a/typescript-version/src/@core/theme/overrides/toggle-button.ts b/typescript-version/src/@core/theme/overrides/toggle-button.ts
deleted file mode 100644
index 1d49d2fd8..000000000
--- a/typescript-version/src/@core/theme/overrides/toggle-button.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-// MUI Imports
-import type { Theme } from '@mui/material/styles'
-
-const toggleButton: Theme['components'] = {
-  MuiToggleButtonGroup: {
-    styleOverrides: {
-      root: ({ ownerState }) => ({
-        ...(ownerState.size === 'small' && {
-          borderRadius: 'var(--mui-shape-customBorderRadius-sm)'
-        }),
-        ...(ownerState.size === 'large' && {
-          borderRadius: 'var(--mui-shape-customBorderRadius-lg)'
-        })
-      })
-    }
-  },
-  MuiToggleButton: {
-    styleOverrides: {
-      root: {
-        '&:not(.Mui-selected):not(.Mui-disabled)': {
-          color: 'var(--mui-palette-text-secondary)'
-        }
-      },
-      sizeSmall: {
-        borderRadius: 'var(--mui-shape-customBorderRadius-sm)'
-      },
-      sizeLarge: {
-        borderRadius: 'var(--mui-shape-customBorderRadius-lg)'
-      }
-    }
-  }
-}
-
-export default toggleButton
diff --git a/typescript-version/src/@core/theme/overrides/tooltip.ts b/typescript-version/src/@core/theme/overrides/tooltip.ts
deleted file mode 100644
index d270401ad..000000000
--- a/typescript-version/src/@core/theme/overrides/tooltip.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-// MUI Imports
-import type { Theme } from '@mui/material/styles'
-
-const tooltip: Theme['components'] = {
-  MuiTooltip: {
-    styleOverrides: {
-      popper: {
-        '&[data-popper-placement*="bottom"] .MuiTooltip-tooltip': {
-          marginTop: '6px !important'
-        },
-        '&[data-popper-placement*="top"] .MuiTooltip-tooltip': {
-          marginBottom: '6px !important'
-        },
-        '&[data-popper-placement*="left"] .MuiTooltip-tooltip': {
-          marginRight: '6px !important'
-        },
-        '&[data-popper-placement*="right"] .MuiTooltip-tooltip': {
-          marginLeft: '6px !important'
-        }
-      },
-      tooltip: ({ theme }) => ({
-        borderRadius: 'var(--mui-shape-customBorderRadius-sm)',
-        fontSize: theme.typography.subtitle2.fontSize,
-        lineHeight: 1.539,
-        color: 'var(--mui-palette-customColors-tooltipText)',
-        paddingInline: theme.spacing(3)
-      })
-    }
-  }
-}
-
-export default tooltip
diff --git a/typescript-version/src/@core/theme/overrides/typography.ts b/typescript-version/src/@core/theme/overrides/typography.ts
deleted file mode 100644
index 0d23df9ae..000000000
--- a/typescript-version/src/@core/theme/overrides/typography.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-// MUI Imports
-import type { Theme } from '@mui/material/styles'
-
-const typography: Theme['components'] = {
-  MuiTypography: {
-    styleOverrides: {
-      gutterBottom: ({ theme }) => ({
-        marginBottom: theme.spacing(2)
-      })
-    },
-    variants: [
-      {
-        props: { variant: 'h1' },
-        style: { color: 'var(--mui-palette-text-primary)' }
-      },
-      {
-        props: { variant: 'h2' },
-        style: { color: 'var(--mui-palette-text-primary)' }
-      },
-      {
-        props: { variant: 'h3' },
-        style: { color: 'var(--mui-palette-text-primary)' }
-      },
-      {
-        props: { variant: 'h4' },
-        style: { color: 'var(--mui-palette-text-primary)' }
-      },
-      {
-        props: { variant: 'h5' },
-        style: { color: 'var(--mui-palette-text-primary)' }
-      },
-      {
-        props: { variant: 'h6' },
-        style: { color: 'var(--mui-palette-text-primary)' }
-      },
-      {
-        props: { variant: 'subtitle1' },
-        style: { color: 'rgb(var(--mui-palette-text-primaryChannel) / 0.55)' }
-      },
-      {
-        props: { variant: 'subtitle2' },
-        style: { color: 'rgb(var(--mui-palette-text-primaryChannel) / 0.55)' }
-      },
-      {
-        props: { variant: 'body1' },
-        style: { color: 'var(--mui-palette-text-secondary)' }
-      },
-      {
-        props: { variant: 'body2' },
-        style: { color: 'var(--mui-palette-text-secondary)' }
-      },
-      {
-        props: { variant: 'button' },
-        style: { color: 'var(--mui-palette-text-primary)' }
-      },
-      {
-        props: { variant: 'caption' },
-        style: { color: 'var(--mui-palette-text-disabled)', display: 'inline-block' }
-      },
-      {
-        props: { variant: 'overline' },
-        style: { color: 'var(--mui-palette-text-primary)', display: 'inline-block' }
-      }
-    ]
-  }
-}
-
-export default typography
diff --git a/typescript-version/src/@core/theme/shadows.ts b/typescript-version/src/@core/theme/shadows.ts
deleted file mode 100644
index 9a8f785be..000000000
--- a/typescript-version/src/@core/theme/shadows.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-// MUI Imports
-import type { Theme } from '@mui/material/styles'
-
-// Type Imports
-import type { SystemMode } from '@core/types'
-
-const shadows = (mode: SystemMode): Theme['shadows'] => {
-  const color = `var(--mui-mainColorChannels-${mode}Shadow)`
-
-  return [
-    'none',
-    `0px 2px 1px -1px rgb(${color} / 0.2),0px 1px 1px 0px rgb(${color} / 0.14),0px 1px 3px 0px rgb(${color} / 0.12)`,
-    `0px 3px 1px -2px rgb(${color} / 0.2),0px 2px 2px 0px rgb(${color} / 0.14),0px 1px 5px 0px rgb(${color} / 0.12)`,
-    `0px 3px 3px -2px rgb(${color} / 0.2),0px 3px 4px 0px rgb(${color} / 0.14),0px 1px 8px 0px rgb(${color} / 0.12)`,
-    `0px 2px 4px -1px rgb(${color} / 0.2),0px 4px 5px 0px rgb(${color} / 0.14),0px 1px 10px 0px rgb(${color} / 0.12)`,
-    `0px 3px 5px -1px rgb(${color} / 0.2),0px 5px 8px 0px rgb(${color} / 0.14),0px 1px 14px 0px rgb(${color} / 0.12)`,
-    `0px 3px 5px -1px rgb(${color} / 0.2),0px 6px 10px 0px rgb(${color} / 0.14),0px 1px 18px 0px rgb(${color} / 0.12)`,
-    `0px 4px 5px -2px rgb(${color} / 0.2),0px 7px 10px 1px rgb(${color} / 0.14),0px 2px 16px 1px rgb(${color} / 0.12)`,
-    `0px 5px 5px -3px rgb(${color} / 0.2),0px 8px 10px 1px rgb(${color} / 0.14),0px 3px 14px 2px rgb(${color} / 0.12)`,
-    `0px 5px 6px -3px rgb(${color} / 0.2),0px 9px 12px 1px rgb(${color} / 0.14),0px 3px 16px 2px rgb(${color} / 0.12)`,
-    `0px 6px 6px -3px rgb(${color} / 0.2),0px 10px 14px 1px rgb(${color} / 0.14),0px 4px 18px 3px rgb(${color} / 0.12)`,
-    `0px 6px 7px -4px rgb(${color} / 0.2),0px 11px 15px 1px rgb(${color} / 0.14),0px 4px 20px 3px rgb(${color} / 0.12)`,
-    `0px 7px 8px -4px rgb(${color} / 0.2),0px 12px 17px 2px rgb(${color} / 0.14),0px 5px 22px 4px rgb(${color} / 0.12)`,
-    `0px 7px 8px -4px rgb(${color} / 0.2),0px 13px 19px 2px rgb(${color} / 0.14),0px 5px 24px 4px rgb(${color} / 0.12)`,
-    `0px 7px 9px -4px rgb(${color} / 0.2),0px 14px 21px 2px rgb(${color} / 0.14),0px 5px 26px 4px rgb(${color} / 0.12)`,
-    `0px 8px 9px -5px rgb(${color} / 0.2),0px 15px 22px 2px rgb(${color} / 0.14),0px 6px 28px 5px rgb(${color} / 0.12)`,
-    `0px 8px 10px -5px rgb(${color} / 0.2),0px 16px 24px 2px rgb(${color} / 0.14),0px 6px 30px 5px rgb(${color} / 0.12)`,
-    `0px 8px 11px -5px rgb(${color} / 0.2),0px 17px 26px 2px rgb(${color} / 0.14),0px 6px 32px 5px rgb(${color} / 0.12)`,
-    `0px 9px 11px -5px rgb(${color} / 0.2),0px 18px 28px 2px rgb(${color} / 0.14),0px 7px 34px 6px rgb(${color} / 0.12)`,
-    `0px 9px 12px -6px rgb(${color} / 0.2),0px 19px 29px 2px rgb(${color} / 0.14),0px 7px 36px 6px rgb(${color} / 0.12)`,
-    `0px 10px 13px -6px rgb(${color} / 0.2),0px 20px 31px 3px rgb(${color} / 0.14),0px 8px 38px 7px rgb(${color} / 0.12)`,
-    `0px 10px 13px -6px rgb(${color} / 0.2),0px 21px 33px 3px rgb(${color} / 0.14),0px 8px 40px 7px rgb(${color} / 0.12)`,
-    `0px 10px 14px -6px rgb(${color} / 0.2),0px 22px 35px 3px rgb(${color} / 0.14),0px 8px 42px 7px rgb(${color} / 0.12)`,
-    `0px 11px 14px -7px rgb(${color} / 0.2),0px 23px 36px 3px rgb(${color} / 0.14),0px 9px 44px 8px rgb(${color} / 0.12)`,
-    `0px 11px 15px -7px rgb(${color} / 0.2),0px 24px 38px 3px rgb(${color} / 0.14),0px 9px 46px 8px rgb(${color} / 0.12)`
-  ]
-}
-
-export default shadows
diff --git a/typescript-version/src/@core/theme/spacing.ts b/typescript-version/src/@core/theme/spacing.ts
deleted file mode 100644
index c40a1685f..000000000
--- a/typescript-version/src/@core/theme/spacing.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-const spacing = {
-  spacing: (factor: number) => `${0.25 * factor}rem`
-}
-
-export default spacing
diff --git a/typescript-version/src/@core/theme/typography.ts b/typescript-version/src/@core/theme/typography.ts
deleted file mode 100644
index fd7e49a8f..000000000
--- a/typescript-version/src/@core/theme/typography.ts
+++ /dev/null
@@ -1,88 +0,0 @@
-// MUI Imports
-import type { Theme } from '@mui/material/styles'
-
-const typography = (fontFamily: string): Theme['typography'] =>
-  ({
-    fontFamily:
-      typeof fontFamily === 'undefined' || fontFamily === ''
-        ? [
-            'Inter',
-            'sans-serif',
-            '-apple-system',
-            'BlinkMacSystemFont',
-            '"Segoe UI"',
-            'Roboto',
-            '"Helvetica Neue"',
-            'Arial',
-            'sans-serif',
-            '"Apple Color Emoji"',
-            '"Segoe UI Emoji"',
-            '"Segoe UI Symbol"'
-          ].join(',')
-        : fontFamily,
-    fontSize: 13.125,
-    h1: {
-      fontSize: '2.875rem',
-      fontWeight: 500,
-      lineHeight: 1.478261
-    },
-    h2: {
-      fontSize: '2.375rem',
-      fontWeight: 500,
-      lineHeight: 1.47368421
-    },
-    h3: {
-      fontSize: '1.75rem',
-      fontWeight: 500,
-      lineHeight: 1.5
-    },
-    h4: {
-      fontSize: '1.5rem',
-      fontWeight: 500,
-      lineHeight: 1.58334
-    },
-    h5: {
-      fontSize: '1.125rem',
-      fontWeight: 500,
-      lineHeight: 1.5556
-    },
-    h6: {
-      fontSize: '0.9375rem',
-      fontWeight: 500,
-      lineHeight: 1.46667
-    },
-    subtitle1: {
-      fontSize: '0.9375rem',
-      lineHeight: 1.46667
-    },
-    subtitle2: {
-      fontSize: '0.8125rem',
-      fontWeight: 400,
-      lineHeight: 1.53846154
-    },
-    body1: {
-      fontSize: '0.9375rem',
-      lineHeight: 1.46667
-    },
-    body2: {
-      fontSize: '0.8125rem',
-      lineHeight: 1.53846154
-    },
-    button: {
-      fontSize: '0.9375rem',
-      lineHeight: 1.46667,
-      textTransform: 'none'
-    },
-    caption: {
-      fontSize: '0.8125rem',
-      lineHeight: 1.38462,
-      letterSpacing: '0.4px'
-    },
-    overline: {
-      fontSize: '0.75rem',
-      lineHeight: 1.16667,
-      letterSpacing: '0.8px'
-    }
-  }) as Theme['typography']
-
-export default typography
diff --git a/typescript-version/src/@core/types.ts b/typescript-version/src/@core/types.ts
deleted file mode 100644
index bbfa61f2e..000000000
--- a/typescript-version/src/@core/types.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-// React Imports
-import type { ReactNode } from 'react'
-
-export type Skin = 'default' | 'bordered'
-
-export type Mode = 'light' | 'dark'
-
-export type SystemMode = 'light' | 'dark'
-
-export type Direction = 'ltr' | 'rtl'
-
-export type ChildrenType = {
-  children: ReactNode
-}
-
-export type ThemeColor = 'primary' | 'secondary' | 'error' | 'warning' | 'info' | 'success'
diff --git a/typescript-version/src/@core/utils/serverHelpers.ts b/typescript-version/src/@core/utils/serverHelpers.ts
deleted file mode 100644
index 462b804c3..000000000
--- a/typescript-version/src/@core/utils/serverHelpers.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import 'server-only'
-
-// Next Imports
-import { cookies } from 'next/headers'
-
-// Type Imports
-import type { Settings } from '@core/contexts/settingsContext'
-import type { SystemMode } from '@core/types'
-
-// Config Imports
-import themeConfig from '@configs/themeConfig'
-
-export const getSettingsFromCookie = (): Settings => {
-  const cookieStore = cookies()
-
-  const cookieName = themeConfig.settingsCookieName
-
-  return JSON.parse(cookieStore.get(cookieName)?.value || '{}')
-}
-
-export const getMode = () => {
-  const settingsCookie = getSettingsFromCookie()
-
-  // Get mode from cookie or fallback to theme config
-  const _mode = settingsCookie.mode || themeConfig.mode
-
-  return _mode
-}
-
-export const getSystemMode = (): SystemMode => {
-  const mode = getMode()
-
-  return mode
-}
-
-export const getServerMode = () => {
-  const mode = getMode()
-
-  return mode
-}
diff --git a/typescript-version/src/@layouts/BlankLayout.tsx b/typescript-version/src/@layouts/BlankLayout.tsx
deleted file mode 100644
index 5a95552ac..000000000
--- a/typescript-version/src/@layouts/BlankLayout.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-'use client'
-
-// Third-party Imports
-import classnames from 'classnames'
-
-// Type Imports
-import type { ChildrenType } from '@core/types'
-
-// Util Imports
-import { blankLayoutClasses } from './utils/layoutClasses'
-
-const BlankLayout = ({ children }: ChildrenType) => {
-  return <div className={classnames(blankLayoutClasses.root, 'is-full bs-full')}>{children}</div>
-}
-
-export default BlankLayout
diff --git a/typescript-version/src/@layouts/LayoutWrapper.tsx b/typescript-version/src/@layouts/LayoutWrapper.tsx
deleted file mode 100644
index 964e93e6b..000000000
--- a/typescript-version/src/@layouts/LayoutWrapper.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-'use client'
-
-// React Imports
-import type { ReactElement } from 'react'
-
-const LayoutWrapper = ({ verticalLayout }: { verticalLayout: ReactElement }) => {
-  // Return the layout based on the layout context
-  return <div className='flex flex-col flex-auto'>{verticalLayout}</div>
-}
-
-export default LayoutWrapper
diff --git a/typescript-version/src/@layouts/VerticalLayout.tsx b/typescript-version/src/@layouts/VerticalLayout.tsx
deleted file mode 100644
index 1c953f3a6..000000000
--- a/typescript-version/src/@layouts/VerticalLayout.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-// React Imports
-import type { ReactNode } from 'react'
-
-// Third-party Imports
-import classnames from 'classnames'
-
-// Type Imports
-import type { ChildrenType } from '@core/types'
-
-// Component Imports
-import LayoutContent from './components/vertical/LayoutContent'
-
-// Util Imports
-import { verticalLayoutClasses } from './utils/layoutClasses'
-
-type VerticalLayoutProps = ChildrenType & {
-  navigation?: ReactNode
-  navbar?: ReactNode
-  footer?: ReactNode
-}
-
-const VerticalLayout = (props: VerticalLayoutProps) => {
-  // Props
-  const { navbar, footer, navigation, children } = props
-
-  return (
-    <div className={classnames(verticalLayoutClasses.root, 'flex flex-auto')}>
-      {navigation || null}
-      <div className={classnames(verticalLayoutClasses.contentWrapper, 'flex flex-col min-is-0 is-full')}>
-        {navbar || null}
-        {/* Content */}
-        <LayoutContent>{children}</LayoutContent>
-        {footer || null}
-      </div>
-    </div>
-  )
-}
-
-export default VerticalLayout
diff --git a/typescript-version/src/@layouts/components/vertical/Footer.tsx b/typescript-version/src/@layouts/components/vertical/Footer.tsx
deleted file mode 100644
index ffb649c02..000000000
--- a/typescript-version/src/@layouts/components/vertical/Footer.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-'use client'
-
-// Third-party Imports
-import classnames from 'classnames'
-import type { CSSObject } from '@emotion/styled'
-
-// Type Imports
-import type { ChildrenType } from '@core/types'
-
-// Util Imports
-import { verticalLayoutClasses } from '@layouts/utils/layoutClasses'
-
-// Styled Component Imports
-import StyledFooter from '@layouts/styles/vertical/StyledFooter'
-
-type Props = ChildrenType & {
-  overrideStyles?: CSSObject
-}
-
-const Footer = (props: Props) => {
-  // Props
-  const { children, overrideStyles } = props
-
-  return (
-    <StyledFooter
-      overrideStyles={overrideStyles}
-      className={classnames(
-        verticalLayoutClasses.footer,
-        verticalLayoutClasses.footerContentCompact,
-        verticalLayoutClasses.footerStatic,
-        verticalLayoutClasses.footerDetached,
-        'is-full'
-      )}
-    >
-      <div className={verticalLayoutClasses.footerContentWrapper}>{children}</div>
-    </StyledFooter>
-  )
-}
-
-export default Footer
diff --git a/typescript-version/src/@layouts/components/vertical/LayoutContent.tsx b/typescript-version/src/@layouts/components/vertical/LayoutContent.tsx
deleted file mode 100644
index cf3aad47c..000000000
--- a/typescript-version/src/@layouts/components/vertical/LayoutContent.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-'use client'
-
-// Third-party Imports
-import classnames from 'classnames'
-
-// Type Imports
-import type { ChildrenType } from '@core/types'
-
-// Util Imports
-import { verticalLayoutClasses } from '@layouts/utils/layoutClasses'
-
-// Styled Component Imports
-import StyledMain from '@layouts/styles/shared/StyledMain'
-
-const LayoutContent = ({ children }: ChildrenType) => {
-  return (
-    <StyledMain
-      isContentCompact={true}
-      className={classnames(verticalLayoutClasses.content, verticalLayoutClasses.contentCompact, 'flex-auto is-full')}
-    >
-      {children}
-    </StyledMain>
-  )
-}
-
-export default LayoutContent
diff --git a/typescript-version/src/@layouts/components/vertical/Navbar.tsx b/typescript-version/src/@layouts/components/vertical/Navbar.tsx
deleted file mode 100644
index ebd4e96ac..000000000
--- a/typescript-version/src/@layouts/components/vertical/Navbar.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-'use client'
-
-// Third-party Imports
-import classnames from 'classnames'
-import type { CSSObject } from '@emotion/styled'
-
-// Type Imports
-import type { ChildrenType } from '@core/types'
-
-// Util Imports
-import { verticalLayoutClasses } from '@layouts/utils/layoutClasses'
-
-// Styled Component Imports
-import StyledHeader from '@layouts/styles/vertical/StyledHeader'
-
-type Props = ChildrenType & {
-  overrideStyles?: CSSObject
-}
-
-const Navbar = (props: Props) => {
-  // Props
-  const { children, overrideStyles } = props
-
-  return (
-    <StyledHeader
-      overrideStyles={overrideStyles}
-      className={classnames(
-        verticalLayoutClasses.header,
-        verticalLayoutClasses.headerContentCompact,
-        verticalLayoutClasses.headerStatic,
-        verticalLayoutClasses.headerDetached
-      )}
-    >
-      <div className={classnames(verticalLayoutClasses.navbar, 'flex bs-full')}>{children}</div>
-    </StyledHeader>
-  )
-}
-
-export default Navbar
diff --git a/typescript-version/src/@layouts/styles/shared/StyledMain.tsx b/typescript-version/src/@layouts/styles/shared/StyledMain.tsx
deleted file mode 100644
index 8e95a28c1..000000000
--- a/typescript-version/src/@layouts/styles/shared/StyledMain.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-// Third-party Imports
-import styled from '@emotion/styled'
-
-// Config Imports
-import themeConfig from '@configs/themeConfig'
-
-type StyledMainProps = {
-  isContentCompact: boolean
-}
-
-const StyledMain = styled.main<StyledMainProps>`
-  padding: ${themeConfig.layoutPadding}px;
-  ${({ isContentCompact }) =>
-    isContentCompact &&
-    `
-    margin-inline: auto;
-    max-inline-size: ${themeConfig.compactContentWidth}px;
-  `}
-`
-
-export default StyledMain
diff --git a/typescript-version/src/@layouts/styles/vertical/StyledFooter.tsx b/typescript-version/src/@layouts/styles/vertical/StyledFooter.tsx
deleted file mode 100644
index 8bfbd72a2..000000000
--- a/typescript-version/src/@layouts/styles/vertical/StyledFooter.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-// Third-party Imports
-import styled from '@emotion/styled'
-import type { CSSObject } from '@emotion/styled'
-
-// Config Imports
-import themeConfig from '@configs/themeConfig'
-
-// Util Imports
-import { verticalLayoutClasses } from '@layouts/utils/layoutClasses'
-
-type StyledFooterProps = {
-  overrideStyles?: CSSObject
-}
-
-const StyledFooter = styled.footer<StyledFooterProps>`
-  margin-inline: auto;
-  max-inline-size: ${themeConfig.compactContentWidth}px;
-
-  & .${verticalLayoutClasses.footerContentWrapper} {
-    padding-block: 15px;
-    padding-inline: ${themeConfig.layoutPadding}px;
-  }
-
-  ${({ overrideStyles }) => overrideStyles}
-`
-
-export default StyledFooter
diff --git a/typescript-version/src/@layouts/styles/vertical/StyledHeader.tsx b/typescript-version/src/@layouts/styles/vertical/StyledHeader.tsx
deleted file mode 100644
index 3c72cad58..000000000
--- a/typescript-version/src/@layouts/styles/vertical/StyledHeader.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-// Third-party Imports
-import styled from '@emotion/styled'
-import type { CSSObject } from '@emotion/styled'
-
-// Config Imports
-import themeConfig from '@configs/themeConfig'
-
-// Util Imports
-import { verticalLayoutClasses } from '@layouts/utils/layoutClasses'
-
-type StyledHeaderProps = {
-  overrideStyles?: CSSObject
-}
-
-const StyledHeader = styled.header<StyledHeaderProps>`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  inline-size: 100%;
-  flex-shrink: 0;
-  min-block-size: var(--header-height);
-
-  .${verticalLayoutClasses.navbar} {
-    position: relative;
-    padding-block: 10px;
-    padding-inline: ${themeConfig.layoutPadding}px;
-    inline-size: 100%;
-    margin-inline: auto;
-    max-inline-size: ${themeConfig.compactContentWidth}px;
-  }
-
-  ${({ overrideStyles }) => overrideStyles}
-`
-
-export default StyledHeader
diff --git a/typescript-version/src/@layouts/utils/layoutClasses.ts b/typescript-version/src/@layouts/utils/layoutClasses.ts
deleted file mode 100644
index 3c5e78f3b..000000000
--- a/typescript-version/src/@layouts/utils/layoutClasses.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-// Classes for vertical layout
-export const verticalLayoutClasses = {
-  root: 'ts-vertical-layout',
-  contentWrapper: 'ts-vertical-layout-content-wrapper',
-  header: 'ts-vertical-layout-header',
-  headerStatic: 'ts-vertical-layout-header-static',
-  headerDetached: 'ts-vertical-layout-header-detached',
-  headerContentCompact: 'ts-vertical-layout-header-content-compact',
-  navbar: 'ts-vertical-layout-navbar',
-  navbarContent: 'ts-vertical-layout-navbar-content',
-  content: 'ts-vertical-layout-content',
-  contentCompact: 'ts-vertical-layout-content-compact',
-  footer: 'ts-vertical-layout-footer',
-  footerStatic: 'ts-vertical-layout-footer-static',
-  footerDetached: 'ts-vertical-layout-footer-detached',
-  footerContentWrapper: 'ts-vertical-layout-footer-content-wrapper',
-  footerContent: 'ts-vertical-layout-footer-content',
-  footerContentCompact: 'ts-vertical-layout-footer-content-compact'
-}
-
-// Classes for blank layout
-export const blankLayoutClasses = {
-  root: 'ts-blank-layout'
-}
diff --git a/typescript-version/src/@menu/components/RouterLink.tsx b/typescript-version/src/@menu/components/RouterLink.tsx
deleted file mode 100644
index c4ef1cbbc..000000000
--- a/typescript-version/src/@menu/components/RouterLink.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-'use client'
-
-// React Imports
-import { forwardRef } from 'react'
-
-// Next Imports
-import Link from 'next/link'
-import type { LinkProps } from 'next/link'
-
-// Type Imports
-import type { ChildrenType } from '../types'
-
-type RouterLinkProps = LinkProps &
-  Partial<ChildrenType> & {
-    className?: string
-  }
-
-export const RouterLink = forwardRef((props: RouterLinkProps, ref: any) => {
-  // Props
-  const { href, className, ...other } = props
-
-  return (
-    <Link ref={ref} href={href} className={className} {...other}>
-      {props.children}
-    </Link>
-  )
-})
diff --git a/typescript-version/src/@menu/components/vertical-menu/Menu.tsx b/typescript-version/src/@menu/components/vertical-menu/Menu.tsx
deleted file mode 100644
index 05bfeaeb0..000000000
--- a/typescript-version/src/@menu/components/vertical-menu/Menu.tsx
+++ /dev/null
@@ -1,193 +0,0 @@
-'use client'
-
-// React Imports
-import { createContext, forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import type { ForwardRefRenderFunction, MenuHTMLAttributes, MutableRefObject, ReactElement, ReactNode } from 'react'
-
-// Next Imports
-import { usePathname } from 'next/navigation'
-
-// Third-party Imports
-import classnames from 'classnames'
-import type { CSSObject } from '@emotion/styled'
-
-// Type Imports
-import type {
-  ChildrenType,
-  MenuItemStyles,
-  RootStylesType,
-  RenderExpandIconParams,
-  RenderExpandedMenuItemIcon
-} from '../../types'
-
-// Util Imports
-import { menuClasses } from '../../utils/menuClasses'
-
-// Styled Component Imports
-import StyledVerticalMenu from '../../styles/vertical/StyledVerticalMenu'
-
-// Style Imports
-import styles from '../../styles/styles.module.css'
-
-// Default Config Imports
-import { verticalSubMenuToggleDuration } from '../../defaultConfigs'
-
-export type MenuSectionStyles = {
-  root?: CSSObject
-  label?: CSSObject
-  prefix?: CSSObject
-  suffix?: CSSObject
-  icon?: CSSObject
-}
-
-export type OpenSubmenu = {
-  level: number
-  label: ReactNode
-  active: boolean
-  id: string
-}
-
-export type VerticalMenuContextProps = {
-  transitionDuration?: number
-  menuSectionStyles?: MenuSectionStyles
-  menuItemStyles?: MenuItemStyles
-  subMenuOpenBehavior?: 'accordion' | 'collapse'
-  renderExpandIcon?: (params: RenderExpandIconParams) => ReactElement
-  renderExpandedMenuItemIcon?: RenderExpandedMenuItemIcon
-  textTruncate?: boolean
-
-  /**
-   * @ignore
-   */
-  openSubmenu?: OpenSubmenu[]
-
-  /**
-   * @ignore
-   */
-  openSubmenusRef?: MutableRefObject<OpenSubmenu[]>
-
-  /**
-   * @ignore
-   */
-  toggleOpenSubmenu?: (...submenus: { level: number; label: ReactNode; active?: boolean; id: string }[]) => void
-}
-
-export type MenuProps = VerticalMenuContextProps &
-  RootStylesType &
-  Partial<ChildrenType> &
-  MenuHTMLAttributes<HTMLMenuElement>
-
-export const VerticalMenuContext = createContext({} as VerticalMenuContextProps)
-
-const Menu: ForwardRefRenderFunction<HTMLMenuElement, MenuProps> = (props, ref) => {
-  // Props
-  const {
-    children,
-    className,
-    rootStyles,
-    menuItemStyles,
-    renderExpandIcon,
-    renderExpandedMenuItemIcon,
-    menuSectionStyles,
-    subMenuOpenBehavior = 'accordion', // accordion, collapse
-    transitionDuration = verticalSubMenuToggleDuration,
-    textTruncate = true,
-    ...rest
-  } = props
-
-  // States
-  const [openSubmenu, setOpenSubmenu] = useState<OpenSubmenu[]>([])
-
-  // Refs
-  const openSubmenusRef = useRef<OpenSubmenu[]>([])
-
-  // Hooks
-  const pathname = usePathname()
-
-  const toggleOpenSubmenu = useCallback(
-    (...submenus: { level: number; label: ReactNode; active?: boolean; id: string }[]): void => {
-      if (!submenus.length) return
-
-      const openSubmenuCopy = [...openSubmenu]
-
-      submenus.forEach(({ level, label, active = false, id }) => {
-        const submenuIndex = openSubmenuCopy.findIndex(submenu => submenu.id === id)
-        const submenuExists = submenuIndex >= 0
-        const isAccordion = subMenuOpenBehavior === 'accordion'
-
-        const inactiveSubmenuIndex = openSubmenuCopy.findIndex(submenu => !submenu.active && submenu.level === 0)
-
-        // Delete submenu if it exists
-        if (submenuExists) {
-          openSubmenuCopy.splice(submenuIndex, 1)
-        }
-
-        if (isAccordion) {
-          // Add submenu if it doesn't exist
-          if (!submenuExists) {
-            if (inactiveSubmenuIndex >= 0 && !active && level === 0) {
-              openSubmenuCopy.splice(inactiveSubmenuIndex, 1, { level, label, active, id })
-            } else {
-              openSubmenuCopy.push({ level, label, active, id })
-            }
-          }
-        } else {
-          // Add submenu if it doesn't exist
-          if (!submenuExists) {
-            openSubmenuCopy.push({ level, label, active, id })
-          }
-        }
-      })
-
-      setOpenSubmenu(openSubmenuCopy)
-    },
-    [openSubmenu, subMenuOpenBehavior]
-  )
-
-  useEffect(() => {
-    setOpenSubmenu([...openSubmenusRef.current])
-    openSubmenusRef.current = []
-  }, [pathname])
-
-  const providerValue = useMemo(
-    () => ({
-      transitionDuration,
-      menuItemStyles,
-      menuSectionStyles,
-      renderExpandIcon,
-      renderExpandedMenuItemIcon,
-      openSubmenu,
-      openSubmenusRef,
-      toggleOpenSubmenu,
-      subMenuOpenBehavior,
-      textTruncate
-    }),
-    [
-      transitionDuration,
-      menuItemStyles,
-      menuSectionStyles,
-      renderExpandIcon,
-      renderExpandedMenuItemIcon,
-      openSubmenu,
-      openSubmenusRef,
-      toggleOpenSubmenu,
-      subMenuOpenBehavior,
-      textTruncate
-    ]
-  )
-
-  return (
-    <VerticalMenuContext.Provider value={providerValue}>
-      <StyledVerticalMenu
-        ref={ref}
-        className={classnames(menuClasses.root, className)}
-        rootStyles={rootStyles}
-        {...rest}
-      >
-        <ul className={styles.ul}>{children}</ul>
-      </StyledVerticalMenu>
-    </VerticalMenuContext.Provider>
-  )
-}
-
-export default forwardRef(Menu)
diff --git a/typescript-version/src/@menu/components/vertical-menu/MenuButton.tsx b/typescript-version/src/@menu/components/vertical-menu/MenuButton.tsx
deleted file mode 100644
index 07636f9e3..000000000
--- a/typescript-version/src/@menu/components/vertical-menu/MenuButton.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-// React Imports
-import { forwardRef } from 'react'
-import type { ForwardRefRenderFunction } from 'react'
-
-// Third-party Imports
-import { css } from '@emotion/react'
-
-// Type Imports
-import type { ChildrenType, MenuButtonProps } from '../../types'
-
-// Component Imports
-import { RouterLink } from '../RouterLink'
-
-// Util Imports
-import { menuClasses } from '../../utils/menuClasses'
-
-type MenuButtonStylesProps = Partial<ChildrenType> & {
-  level: number
-  active?: boolean
-  disabled?: boolean
-}
-
-export const menuButtonStyles = (props: MenuButtonStylesProps) => {
-  // Props
-  const { level, disabled, children } = props
-
-  return css({
-    display: 'flex',
-    alignItems: 'center',
-    minBlockSize: '30px',
-    textDecoration: 'none',
-    color: 'inherit',
-    boxSizing: 'border-box',
-    cursor: 'pointer',
-    paddingInlineEnd: '20px',
-    paddingInlineStart: `${level === 0 ? 20 : (level + 1) * 20}px`,
-
-    '&:hover, &[aria-expanded="true"]': {
-      backgroundColor: '#f3f3f3'
-    },
-
-    '&:focus-visible': {
-      outline: 'none',
-      backgroundColor: '#f3f3f3'
-    },
-
-    ...(disabled && {
-      pointerEvents: 'none',
-      cursor: 'default',
-      color: '#adadad'
-    }),
-
-    // All the active styles are applied to the button including menu items or submenu
-    [`&.${menuClasses.active}`]: {
-      ...(!children && { color: 'white' }),
-      backgroundColor: children ? '#f3f3f3' : '#765feb'
-    }
-  })
-}
-
-const MenuButton: ForwardRefRenderFunction<HTMLAnchorElement, MenuButtonProps> = (
-  { className, children, ...rest },
-  ref
-) => {
-  return rest.href ? (
-    <RouterLink ref={ref} className={className} href={rest.href} {...rest}>
-      {children}
-    </RouterLink>
-  ) : (
-    <a ref={ref} className={className} {...rest}>
-      {children}
-    </a>
-  )
-}
-
-export default forwardRef(MenuButton)
diff --git a/typescript-version/src/@menu/components/vertical-menu/MenuItem.tsx b/typescript-version/src/@menu/components/vertical-menu/MenuItem.tsx
deleted file mode 100644
index e91cb50de..000000000
--- a/typescript-version/src/@menu/components/vertical-menu/MenuItem.tsx
+++ /dev/null
@@ -1,186 +0,0 @@
-'use client'
-
-// React Imports
-import { forwardRef, useEffect, useState } from 'react'
-import type { AnchorHTMLAttributes, ForwardRefRenderFunction, ReactElement, ReactNode } from 'react'
-
-// Next Imports
-import { usePathname } from 'next/navigation'
-
-// Third-party Imports
-import classnames from 'classnames'
-import { useUpdateEffect } from 'react-use'
-import type { CSSObject } from '@emotion/styled'
-
-// Type Imports
-import type { ChildrenType, MenuItemElement, MenuItemExactMatchUrlProps, RootStylesType } from '../../types'
-
-// Component Imports
-import MenuButton from './MenuButton'
-
-// Hook Imports
-import useVerticalNav from '../../hooks/useVerticalNav'
-import useVerticalMenu from '../../hooks/useVerticalMenu'
-
-// Util Imports
-import { renderMenuIcon } from '../../utils/menuUtils'
-import { menuClasses } from '../../utils/menuClasses'
-
-// Styled Component Imports
-import StyledMenuLabel from '../../styles/StyledMenuLabel'
-import StyledMenuPrefix from '../../styles/StyledMenuPrefix'
-import StyledMenuSuffix from '../../styles/StyledMenuSuffix'
-import StyledVerticalMenuItem from '../../styles/vertical/StyledVerticalMenuItem'
-
-export type MenuItemProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'prefix'> &
-  RootStylesType &
-  Partial<ChildrenType> &
-  MenuItemExactMatchUrlProps & {
-    icon?: ReactElement
-    prefix?: ReactNode
-    suffix?: ReactNode
-    disabled?: boolean
-    target?: string
-    rel?: string
-    onActiveChange?: (active: boolean) => void
-
-    /**
-     * @ignore
-     */
-    level?: number
-  }
-
-const MenuItem: ForwardRefRenderFunction<HTMLLIElement, MenuItemProps> = (props, ref) => {
-  // Props
-  const {
-    children,
-    icon,
-    className,
-    prefix,
-    suffix,
-    level = 0,
-    disabled = false,
-    exactMatch = true,
-    activeUrl,
-    onActiveChange,
-    rootStyles,
-    ...rest
-  } = props
-
-  // States
-  const [active, setActive] = useState(false)
-
-  // Hooks
-  const pathname = usePathname()
-  const { menuItemStyles, renderExpandedMenuItemIcon, textTruncate } = useVerticalMenu()
-
-  const { toggleVerticalNav, isToggled, isBreakpointReached } = useVerticalNav()
-
-  // Get the styles for the specified element.
-  const getMenuItemStyles = (element: MenuItemElement): CSSObject | undefined => {
-    // If the menuItemStyles prop is provided, get the styles for the specified element.
-    if (menuItemStyles) {
-      // Define the parameters that are passed to the style functions.
-      const params = { level, disabled, active, isSubmenu: false }
-
-      // Get the style function for the specified element.
-      const styleFunction = menuItemStyles[element]
-
-      if (styleFunction) {
-        // If the style function is a function, call it and return the result.
-        // Otherwise, return the style function itself.
-        return typeof styleFunction === 'function' ? styleFunction(params) : styleFunction
-      }
-    }
-  }
-
-  // Handle the click event.
-  const handleClick = () => {
-    if (isToggled) {
-      toggleVerticalNav()
-    }
-  }
-
-  // Change active state when the url changes
-  useEffect(() => {
-    const href = rest.href
-
-    if (href) {
-      // Check if the current url matches any of the children urls
-      if (exactMatch ? pathname === href : activeUrl && pathname.includes(activeUrl)) {
-        setActive(true)
-      } else {
-        setActive(false)
-      }
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [pathname])
-
-  // Call the onActiveChange callback when the active state changes.
-  useUpdateEffect(() => {
-    onActiveChange?.(active)
-  }, [active])
-
-  return (
-    <StyledVerticalMenuItem
-      ref={ref}
-      className={classnames(
-        menuClasses.menuItemRoot,
-        { [menuClasses.disabled]: disabled },
-        { [menuClasses.active]: active },
-        className
-      )}
-      level={level}
-      disabled={disabled}
-      buttonStyles={getMenuItemStyles('button')}
-      menuItemStyles={getMenuItemStyles('root')}
-      rootStyles={rootStyles}
-    >
-      <MenuButton
-        className={classnames(menuClasses.button, { [menuClasses.active]: active })}
-        tabIndex={disabled ? -1 : 0}
-        {...rest}
-        onClick={e => {
-          handleClick()
-          rest.onClick && rest.onClick(e)
-        }}
-      >
-        {/* Menu Item Icon */}
-        {renderMenuIcon({
-          icon,
-          level,
-          active,
-          disabled,
-          renderExpandedMenuItemIcon,
-          styles: getMenuItemStyles('icon'),
-          isBreakpointReached
-        })}
-
-        {/* Menu Item Prefix */}
-        {prefix && (
-          <StyledMenuPrefix className={menuClasses.prefix} rootStyles={getMenuItemStyles('prefix')}>
-            {prefix}
-          </StyledMenuPrefix>
-        )}
-
-        {/* Menu Item Label */}
-        <StyledMenuLabel
-          className={menuClasses.label}
-          rootStyles={getMenuItemStyles('label')}
-          textTruncate={textTruncate}
-        >
-          {children}
-        </StyledMenuLabel>
-
-        {/* Menu Item Suffix */}
-        {suffix && (
-          <StyledMenuSuffix className={menuClasses.suffix} rootStyles={getMenuItemStyles('suffix')}>
-            {suffix}
-          </StyledMenuSuffix>
-        )}
-      </MenuButton>
-    </StyledVerticalMenuItem>
-  )
-}
-
-export default forwardRef(MenuItem)
diff --git a/typescript-version/src/@menu/components/vertical-menu/MenuSection.tsx b/typescript-version/src/@menu/components/vertical-menu/MenuSection.tsx
deleted file mode 100644
index 5cd726a8d..000000000
--- a/typescript-version/src/@menu/components/vertical-menu/MenuSection.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-'use client'
-
-// React Imports
-import { forwardRef } from 'react'
-import type { ForwardRefRenderFunction, CSSProperties, ReactElement, ReactNode } from 'react'
-
-// Third-party Imports
-import classnames from 'classnames'
-import type { CSSObject } from '@emotion/styled'
-
-// Type Imports
-import type { MenuSectionStyles } from './Menu'
-import type { ChildrenType, RootStylesType } from '../../types'
-
-// Hook Imports
-import useVerticalMenu from '../../hooks/useVerticalMenu'
-
-// Util Imports
-import { menuClasses } from '../../utils/menuClasses'
-
-// Styled Component Imports
-import StyledMenuIcon from '../../styles/StyledMenuIcon'
-import StyledMenuPrefix from '../../styles/StyledMenuPrefix'
-import StyledMenuSuffix from '../../styles/StyledMenuSuffix'
-import StyledMenuSectionLabel from '../../styles/StyledMenuSectionLabel'
-import StyledVerticalMenuSection from '../../styles/vertical/StyledVerticalMenuSection'
-
-export type MenuSectionProps = Partial<ChildrenType> &
-  RootStylesType & {
-    label: ReactNode
-    icon?: ReactElement
-    prefix?: ReactNode
-    suffix?: ReactNode
-
-    /**
-     * @ignore
-     */
-    className?: string
-  }
-
-type MenuSectionElement = keyof MenuSectionStyles
-
-const menuSectionWrapperStyles: CSSProperties = {
-  display: 'inline-block',
-  inlineSize: '100%',
-  position: 'relative',
-  listStyle: 'none',
-  padding: 0,
-  overflow: 'hidden'
-}
-
-const menuSectionContentStyles: CSSProperties = {
-  display: 'flex',
-  alignItems: 'center',
-  inlineSize: '100%',
-  position: 'relative',
-  paddingBlock: '0.75rem',
-  paddingInline: '1.25rem',
-  overflow: 'hidden'
-}
-
-const MenuSection: ForwardRefRenderFunction<HTMLLIElement, MenuSectionProps> = (props, ref) => {
-  // Props
-  const { children, icon, className, prefix, suffix, label, rootStyles, ...rest } = props
-
-  // Hooks
-  const { menuSectionStyles, textTruncate } = useVerticalMenu()
-
-  const getMenuSectionStyles = (element: MenuSectionElement): CSSObject | undefined => {
-    // If the menuSectionStyles prop is provided, get the styles for the element from the prop
-    if (menuSectionStyles) {
-      return menuSectionStyles[element]
-    }
-  }
-
-  return (
-    // eslint-disable-next-line lines-around-comment
-    // Menu Section
-    <StyledVerticalMenuSection
-      ref={ref}
-      rootStyles={rootStyles}
-      menuSectionStyles={getMenuSectionStyles('root')}
-      className={classnames(menuClasses.menuSectionRoot, className)}
-    >
-      {/* Menu Section Content Wrapper */}
-      <ul className={menuClasses.menuSectionWrapper} {...rest} style={menuSectionWrapperStyles}>
-        {/* Menu Section Content */}
-        <li className={menuClasses.menuSectionContent} style={menuSectionContentStyles}>
-          {icon && (
-            <StyledMenuIcon className={menuClasses.icon} rootStyles={getMenuSectionStyles('icon')}>
-              {icon}
-            </StyledMenuIcon>
-          )}
-          {prefix && (
-            <StyledMenuPrefix className={menuClasses.prefix} rootStyles={getMenuSectionStyles('prefix')}>
-              {prefix}
-            </StyledMenuPrefix>
-          )}
-          {label && (
-            <StyledMenuSectionLabel
-              className={menuClasses.menuSectionLabel}
-              rootStyles={getMenuSectionStyles('label')}
-              textTruncate={textTruncate}
-            >
-              {label}
-            </StyledMenuSectionLabel>
-          )}
-          {suffix && (
-            <StyledMenuSuffix className={menuClasses.suffix} rootStyles={getMenuSectionStyles('suffix')}>
-              {suffix}
-            </StyledMenuSuffix>
-          )}
-        </li>
-        {/* Render Child */}
-        {children}
-      </ul>
-    </StyledVerticalMenuSection>
-  )
-}
-
-export default forwardRef<HTMLLIElement, MenuSectionProps>(MenuSection)
diff --git a/typescript-version/src/@menu/components/vertical-menu/NavHeader.tsx b/typescript-version/src/@menu/components/vertical-menu/NavHeader.tsx
deleted file mode 100644
index 052a88615..000000000
--- a/typescript-version/src/@menu/components/vertical-menu/NavHeader.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-// Third-party Imports
-import styled from '@emotion/styled'
-
-// Type Imports
-import type { ChildrenType } from '../../types'
-
-// Util Imports
-import { verticalNavClasses } from '../../utils/menuClasses'
-
-const StyledNavHeader = styled.div`
-  padding: 15px;
-  padding-inline-start: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-`
-
-const NavHeader = ({ children }: ChildrenType) => {
-  return <StyledNavHeader className={verticalNavClasses.header}>{children}</StyledNavHeader>
-}
-
-export default NavHeader
diff --git a/typescript-version/src/@menu/components/vertical-menu/SubMenu.tsx b/typescript-version/src/@menu/components/vertical-menu/SubMenu.tsx
deleted file mode 100644
index 0d366ca2a..000000000
--- a/typescript-version/src/@menu/components/vertical-menu/SubMenu.tsx
+++ /dev/null
@@ -1,332 +0,0 @@
-'use client'
-
-// React Imports
-import { Children, cloneElement, forwardRef, useEffect, useId, useRef, useState } from 'react'
-import type {
-  AnchorHTMLAttributes,
-  ForwardRefRenderFunction,
-  KeyboardEvent,
-  MouseEvent,
-  ReactElement,
-  ReactNode
-} from 'react'
-
-// Next Imports
-import { usePathname } from 'next/navigation'
-
-// Third-party Imports
-import classnames from 'classnames'
-import styled from '@emotion/styled'
-import type { CSSObject } from '@emotion/styled'
-
-// Type Imports
-import type { OpenSubmenu } from './Menu'
-import type { MenuItemProps } from './MenuItem'
-import type { ChildrenType, RootStylesType, SubMenuItemElement } from '../../types'
-
-// Component Imports
-import SubMenuContent from './SubMenuContent'
-import MenuButton, { menuButtonStyles } from './MenuButton'
-
-// Icon Imports
-import ChevronRight from '../../svg/ChevronRight'
-
-// Hook Imports
-import useVerticalNav from '../../hooks/useVerticalNav'
-import useVerticalMenu from '../../hooks/useVerticalMenu'
-
-// Util Imports
-import { menuClasses } from '../../utils/menuClasses'
-import { confirmUrlInChildren, renderMenuIcon } from '../../utils/menuUtils'
-
-// Styled Component Imports
-import StyledMenuLabel from '../../styles/StyledMenuLabel'
-import StyledMenuPrefix from '../../styles/StyledMenuPrefix'
-import StyledMenuSuffix from '../../styles/StyledMenuSuffix'
-import StyledVerticalNavExpandIcon, {
-  StyledVerticalNavExpandIconWrapper
-} from '../../styles/vertical/StyledVerticalNavExpandIcon'
-
-export type SubMenuProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'prefix'> &
-  RootStylesType &
-  Partial<ChildrenType> & {
-    label: ReactNode
-    icon?: ReactElement
-    prefix?: ReactNode
-    suffix?: ReactNode
-    defaultOpen?: boolean
-    disabled?: boolean
-    contentClassName?: string
-    onOpenChange?: (open: boolean) => void
-
-    /**
-     * @ignore
-     */
-    level?: number
-  }
-
-type StyledSubMenuProps = Pick<SubMenuProps, 'rootStyles' | 'disabled'> & {
-  level: number
-  active?: boolean
-  menuItemStyles?: CSSObject
-  buttonStyles?: CSSObject
-}
-
-const StyledSubMenu = styled.li<StyledSubMenuProps>`
-  position: relative;
-  inline-size: 100%;
-  margin-block-start: 4px;
-
-  &.${menuClasses.open} > .${menuClasses.button} {
-    background-color: #f3f3f3;
-  }
-
-  ${({ menuItemStyles }) => menuItemStyles};
-  ${({ rootStyles }) => rootStyles};
-
-  > .${menuClasses.button} {
-    ${({ level, disabled, active, children }) =>
-      menuButtonStyles({
-        level,
-        active,
-        disabled,
-        children
-      })};
-    ${({ buttonStyles }) => buttonStyles};
-  }
-`
-
-const SubMenu: ForwardRefRenderFunction<HTMLLIElement, SubMenuProps> = (props, ref) => {
-  // Props
-  const {
-    children,
-    className,
-    contentClassName,
-    label,
-    icon,
-    title,
-    prefix,
-    suffix,
-    defaultOpen,
-    level = 0,
-    disabled = false,
-    rootStyles,
-    onOpenChange,
-    onClick,
-    onKeyUp,
-    ...rest
-  } = props
-
-  // States
-  const [active, setActive] = useState<boolean>(false)
-
-  // Refs
-  const contentRef = useRef<HTMLDivElement>(null)
-
-  // Hooks
-  const id = useId()
-  const pathname = usePathname()
-  const { isBreakpointReached } = useVerticalNav()
-
-  const {
-    renderExpandIcon,
-    renderExpandedMenuItemIcon,
-    menuItemStyles,
-    openSubmenu,
-    toggleOpenSubmenu,
-    transitionDuration,
-    openSubmenusRef,
-    textTruncate
-  } = useVerticalMenu()
-
-  // Vars
-  // Filter out falsy values from children
-  const childNodes = Children.toArray(children).filter(Boolean) as [ReactElement<SubMenuProps | MenuItemProps>]
-
-  const isSubMenuOpen = openSubmenu?.some((item: OpenSubmenu) => item.id === id) ?? false
-
-  const handleSlideToggle = (): void => {
-    toggleOpenSubmenu?.({ level, label, active, id })
-    onOpenChange?.(!isSubMenuOpen)
-    if (openSubmenusRef?.current && openSubmenusRef?.current.length > 0) openSubmenusRef.current = []
-  }
-
-  const handleOnClick = (event: MouseEvent<HTMLAnchorElement, globalThis.MouseEvent>) => {
-    onClick?.(event)
-    handleSlideToggle()
-  }
-
-  const handleOnKeyUp = (event: KeyboardEvent<HTMLAnchorElement>) => {
-    onKeyUp?.(event)
-
-    if (event.key === 'Enter') {
-      handleSlideToggle()
-    }
-  }
-
-  const getSubMenuItemStyles = (element: SubMenuItemElement): CSSObject | undefined => {
-    // If the menuItemStyles prop is provided, get the styles for the specified element.
-    if (menuItemStyles) {
-      // Define the parameters that are passed to the style functions.
-      const params = {
-        level,
-        disabled,
-        active,
-        isSubmenu: true,
-        open: isSubMenuOpen
-      }
-
-      // Get the style function for the specified element.
-      const styleFunction = menuItemStyles[element]
-
-      if (styleFunction) {
-        // If the style function is a function, call it and return the result.
-        // Otherwise, return the style function itself.
-        return typeof styleFunction === 'function' ? styleFunction(params) : styleFunction
-      }
-    }
-  }
-
-  useEffect(() => {
-    if (confirmUrlInChildren(children, pathname)) {
-      openSubmenusRef?.current.push({ level, label, active: true, id })
-    } else {
-      if (defaultOpen) {
-        openSubmenusRef?.current.push({ level, label, active: false, id })
-      }
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
-
-  // Change active state when the url changes
-  useEffect(() => {
-    // Check if the current url matches any of the children urls
-    if (confirmUrlInChildren(children, pathname)) {
-      setActive(true)
-
-      if (openSubmenusRef?.current.findIndex(submenu => submenu.id === id) === -1) {
-        openSubmenusRef?.current.push({ level, label, active: true, id })
-      }
-    } else {
-      setActive(false)
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [pathname])
-
-  /* useEffect(() => {
-    console.log(openSubmenu)
-  }, [openSubmenu]) */
-
-  const submenuContent = (
-    <SubMenuContent
-      ref={contentRef}
-      transitionDuration={transitionDuration}
-      open={isSubMenuOpen}
-      level={level}
-      className={classnames(menuClasses.subMenuContent, contentClassName)}
-      rootStyles={{
-        ...getSubMenuItemStyles('subMenuContent')
-      }}
-    >
-      {childNodes.map(node =>
-        cloneElement(node, {
-          level: level + 1
-        })
-      )}
-    </SubMenuContent>
-  )
-
-  return (
-    // eslint-disable-next-line lines-around-comment
-    /* Sub Menu */
-    <StyledSubMenu
-      ref={ref}
-      className={classnames(
-        menuClasses.subMenuRoot,
-        { [menuClasses.active]: active },
-        { [menuClasses.disabled]: disabled },
-        { [menuClasses.open]: isSubMenuOpen },
-        className
-      )}
-      menuItemStyles={getSubMenuItemStyles('root')}
-      level={level}
-      disabled={disabled}
-      active={active}
-      buttonStyles={getSubMenuItemStyles('button')}
-      rootStyles={rootStyles}
-    >
-      {/* Menu Item */}
-      <MenuButton
-        ref={null}
-        onClick={handleOnClick}
-        onKeyUp={handleOnKeyUp}
-        title={title}
-        className={classnames(menuClasses.button, { [menuClasses.active]: active })}
-        tabIndex={disabled ? -1 : 0}
-        {...rest}
-      >
-        {/* Sub Menu Icon */}
-        {renderMenuIcon({
-          icon,
-          level,
-          active,
-          disabled,
-          renderExpandedMenuItemIcon,
-          styles: getSubMenuItemStyles('icon'),
-          isBreakpointReached
-        })}
-
-        {/* Sub Menu Prefix */}
-        {prefix && (
-          <StyledMenuPrefix className={menuClasses.prefix} rootStyles={getSubMenuItemStyles('prefix')}>
-            {prefix}
-          </StyledMenuPrefix>
-        )}
-
-        {/* Sub Menu Label */}
-        <StyledMenuLabel
-          className={menuClasses.label}
-          rootStyles={getSubMenuItemStyles('label')}
-          textTruncate={textTruncate}
-        >
-          {label}
-        </StyledMenuLabel>
-
-        {/* Sub Menu Suffix */}
-        {suffix && (
-          <StyledMenuSuffix className={menuClasses.suffix} rootStyles={getSubMenuItemStyles('suffix')}>
-            {suffix}
-          </StyledMenuSuffix>
-        )}
-
-        {/* Sub Menu Toggle Icon Wrapper */}
-        {
-          <StyledVerticalNavExpandIconWrapper
-            className={menuClasses.subMenuExpandIcon}
-            rootStyles={getSubMenuItemStyles('subMenuExpandIcon')}
-          >
-            {renderExpandIcon ? (
-              renderExpandIcon({
-                level,
-                disabled,
-                active,
-                open: isSubMenuOpen
-              })
-            ) : (
-              // eslint-disable-next-line lines-around-comment
-              /* Expanded Arrow Icon */
-              <StyledVerticalNavExpandIcon open={isSubMenuOpen} transitionDuration={transitionDuration}>
-                <ChevronRight fontSize='1rem' />
-              </StyledVerticalNavExpandIcon>
-            )}
-          </StyledVerticalNavExpandIconWrapper>
-        }
-      </MenuButton>
-
-      {/* Sub Menu Content */}
-      {submenuContent}
-    </StyledSubMenu>
-  )
-}
-
-export default forwardRef<HTMLLIElement, SubMenuProps>(SubMenu)
diff --git a/typescript-version/src/@menu/components/vertical-menu/SubMenuContent.tsx b/typescript-version/src/@menu/components/vertical-menu/SubMenuContent.tsx
deleted file mode 100644
index 65e8f43e3..000000000
--- a/typescript-version/src/@menu/components/vertical-menu/SubMenuContent.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-// React Imports
-import { forwardRef, useEffect, useState } from 'react'
-import type { ForwardRefRenderFunction, HTMLAttributes, MutableRefObject } from 'react'
-
-// Type Imports
-import type { VerticalMenuContextProps } from './Menu'
-import type { ChildrenType, RootStylesType } from '../../types'
-
-// Styled Component Imports
-import StyledSubMenuContent from '../../styles/StyledSubMenuContent'
-
-// Style Imports
-import styles from '../../styles/styles.module.css'
-
-export type SubMenuContentProps = HTMLAttributes<HTMLDivElement> &
-  RootStylesType &
-  Partial<ChildrenType> & {
-    open?: boolean
-    transitionDuration?: VerticalMenuContextProps['transitionDuration']
-    level?: number
-  }
-
-const SubMenuContent: ForwardRefRenderFunction<HTMLDivElement, SubMenuContentProps> = (props, ref) => {
-  // Props
-  const { children, open, level, transitionDuration, ...rest } = props
-
-  // States
-  const [mounted, setMounted] = useState(false)
-
-  // Refs
-  const SubMenuContentRef = ref as MutableRefObject<HTMLDivElement>
-
-  useEffect(() => {
-    if (mounted) {
-      if (open) {
-        const target = SubMenuContentRef?.current
-
-        if (target) {
-          target.style.display = 'block'
-          target.style.overflow = 'hidden'
-          target.style.blockSize = 'auto'
-          const height = target.offsetHeight
-
-          target.style.blockSize = '0px'
-          target.offsetHeight
-
-          target.style.blockSize = `${height}px`
-
-          setTimeout(() => {
-            target.style.overflow = 'auto'
-            target.style.blockSize = 'auto'
-          }, transitionDuration)
-        }
-      } else {
-        const target = SubMenuContentRef?.current
-
-        if (target) {
-          target.style.overflow = 'hidden'
-          target.style.blockSize = `${target.offsetHeight}px`
-          target.offsetHeight
-          target.style.blockSize = '0px'
-
-          setTimeout(() => {
-            target.style.overflow = 'auto'
-            target.style.display = 'none'
-          }, transitionDuration)
-        }
-      }
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open, mounted, SubMenuContentRef])
-
-  useEffect(() => {
-    setMounted(true)
-  }, [])
-
-  return (
-    <StyledSubMenuContent ref={ref} level={level} open={open} transitionDuration={transitionDuration} {...rest}>
-      <ul className={styles.ul}>{children}</ul>
-    </StyledSubMenuContent>
-  )
-}
-
-export default forwardRef(SubMenuContent)
diff --git a/typescript-version/src/@menu/components/vertical-menu/VerticalNav.tsx b/typescript-version/src/@menu/components/vertical-menu/VerticalNav.tsx
deleted file mode 100644
index 1c96eb619..000000000
--- a/typescript-version/src/@menu/components/vertical-menu/VerticalNav.tsx
+++ /dev/null
@@ -1,138 +0,0 @@
-'use client'
-
-// React Imports
-import { useEffect } from 'react'
-import type { HTMLAttributes } from 'react'
-
-// Third-party Imports
-import classnames from 'classnames'
-import type { CSSObject } from '@emotion/styled'
-
-// Type Imports
-import type { BreakpointType } from '../../types'
-
-// Context Imports
-import type { VerticalNavState } from '../../contexts/verticalNavContext'
-
-// Hook Imports
-import useMediaQuery from '../../hooks/useMediaQuery'
-import useVerticalNav from '../../hooks/useVerticalNav'
-
-// Util Imports
-import { verticalNavClasses } from '../../utils/menuClasses'
-
-// Styled Component Imports
-import StyledBackdrop from '../../styles/StyledBackdrop'
-import StyledVerticalNav from '../../styles/vertical/StyledVerticalNav'
-import StyledVerticalNavContainer from '../../styles/vertical/StyledVerticalNavContainer'
-import StyledVerticalNavBgColorContainer from '../../styles/vertical/StyledVerticalNavBgColorContainer'
-
-// Default Config Imports
-import { defaultBreakpoints, verticalNavToggleDuration } from '../../defaultConfigs'
-
-export type VerticalNavProps = HTMLAttributes<HTMLHtmlElement> & {
-  width?: VerticalNavState['width']
-  breakpoint?: BreakpointType
-  customBreakpoint?: string
-  breakpoints?: Partial<typeof defaultBreakpoints>
-  transitionDuration?: VerticalNavState['transitionDuration']
-  backdropColor?: string
-  customStyles?: CSSObject
-}
-
-const VerticalNav = (props: VerticalNavProps) => {
-  // Props
-  const {
-    width = 260,
-    breakpoint = 'lg',
-    customBreakpoint,
-    breakpoints,
-    transitionDuration = verticalNavToggleDuration,
-    backdropColor,
-    className,
-    customStyles,
-    children,
-    ...rest
-  } = props
-
-  // Vars
-  const mergedBreakpoints = { ...defaultBreakpoints, ...breakpoints }
-
-  // Hooks
-  const {
-    updateVerticalNavState,
-    width: widthContext,
-    isBreakpointReached: isBreakpointReachedContext,
-    isToggled: isToggledContext,
-    transitionDuration: transitionDurationContext
-  } = useVerticalNav()
-
-  // Find the breakpoint from which screen size responsive behavior should enable and if its reached or not
-  const breakpointReached = useMediaQuery(customBreakpoint ?? (breakpoint ? mergedBreakpoints[breakpoint] : breakpoint))
-
-  // UseEffect, update verticalNav state to set initial values and update values on change
-  useEffect(() => {
-    updateVerticalNavState({
-      width,
-      transitionDuration,
-      isBreakpointReached: breakpointReached
-    })
-
-    if (!breakpointReached) {
-      updateVerticalNavState({ isToggled: false })
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [width, breakpointReached, updateVerticalNavState])
-
-  // Handle Backdrop(Content Overlay) Click
-  const handleBackdropClick = () => {
-    // Close the verticalNav
-    updateVerticalNavState({ isToggled: false })
-  }
-
-  return (
-    <StyledVerticalNav
-      width={width}
-      isBreakpointReached={isBreakpointReachedContext}
-      customStyles={customStyles}
-      transitionDuration={transitionDurationContext}
-      className={classnames(
-        verticalNavClasses.root,
-        {
-          [verticalNavClasses.toggled]: isToggledContext,
-          [verticalNavClasses.breakpointReached]: isBreakpointReachedContext
-        },
-        className
-      )}
-      {...rest}
-    >
-      <StyledVerticalNavContainer
-        width={widthContext}
-        className={verticalNavClasses.container}
-        transitionDuration={transitionDurationContext}
-      >
-        {/* VerticalNav Container to apply styling like background */}
-        <StyledVerticalNavBgColorContainer className={verticalNavClasses.bgColorContainer}>
-          {children}
-        </StyledVerticalNavBgColorContainer>
-      </StyledVerticalNavContainer>
-
-      {/* When verticalNav is toggled on smaller screen, show/hide verticalNav backdrop */}
-      {isToggledContext && breakpointReached && (
-        // eslint-disable-next-line lines-around-comment
-        /* VerticalNav Backdrop */
-        <StyledBackdrop
-          role='button'
-          tabIndex={0}
-          aria-label='backdrop'
-          onClick={handleBackdropClick}
-          onKeyPress={handleBackdropClick}
-          className={verticalNavClasses.backdrop}
-          backdropColor={backdropColor}
-        />
-      )}
-    </StyledVerticalNav>
-  )
-}
-
-export default VerticalNav
diff --git a/typescript-version/src/@menu/contexts/verticalNavContext.tsx b/typescript-version/src/@menu/contexts/verticalNavContext.tsx
deleted file mode 100644
index 0a9fadc30..000000000
--- a/typescript-version/src/@menu/contexts/verticalNavContext.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-'use client'
-
-// React Imports
-import { createContext, useCallback, useMemo, useState } from 'react'
-
-// Type Imports
-import type { ChildrenType } from '../types'
-
-export type VerticalNavState = {
-  width?: number
-  isToggled?: boolean
-  isBreakpointReached?: boolean
-  transitionDuration?: number
-}
-
-export type VerticalNavContextProps = VerticalNavState & {
-  updateVerticalNavState: (values: VerticalNavState) => void
-  toggleVerticalNav: (value?: VerticalNavState['isToggled']) => void
-}
-
-const VerticalNavContext = createContext({} as VerticalNavContextProps)
-
-export const VerticalNavProvider = ({ children }: ChildrenType) => {
-  // States
-  const [verticalNavState, setVerticalNavState] = useState<VerticalNavState>()
-
-  // Hooks
-  const updateVerticalNavState = useCallback((values: Partial<VerticalNavState>) => {
-    setVerticalNavState(prevState => ({
-      ...prevState,
-      ...values
-    }))
-  }, [])
-
-  const toggleVerticalNav = useCallback((value?: boolean) => {
-    setVerticalNavState(prevState => ({
-      ...prevState,
-      isToggled: value !== undefined ? Boolean(value) : !Boolean(prevState?.isToggled)
-    }))
-  }, [])
-
-  const verticalNavProviderValue = useMemo(
-    () => ({
-      ...verticalNavState,
-      updateVerticalNavState,
-      toggleVerticalNav
-    }),
-    [verticalNavState, updateVerticalNavState, toggleVerticalNav]
-  )
-
-  return <VerticalNavContext.Provider value={verticalNavProviderValue}>{children}</VerticalNavContext.Provider>
-}
-
-export default VerticalNavContext
diff --git a/typescript-version/src/@menu/defaultConfigs.ts b/typescript-version/src/@menu/defaultConfigs.ts
deleted file mode 100644
index 9ff98f82a..000000000
--- a/typescript-version/src/@menu/defaultConfigs.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-// Type Imports
-import type { BreakpointType } from './types'
-
-export const defaultBreakpoints: Record<BreakpointType, string> = {
-  xs: '480px',
-  sm: '600px',
-  md: '900px',
-  lg: '1200px',
-  xl: '1536px',
-  xxl: '1920px',
-  always: 'always'
-}
-
-export const verticalNavToggleDuration = 300
-export const verticalSubMenuToggleDuration = 300
diff --git a/typescript-version/src/@menu/hooks/useMediaQuery.tsx b/typescript-version/src/@menu/hooks/useMediaQuery.tsx
deleted file mode 100644
index 559e8394b..000000000
--- a/typescript-version/src/@menu/hooks/useMediaQuery.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-'use client'
-
-// React Imports
-import { useEffect, useState } from 'react'
-
-const useMediaQuery = (breakpoint?: string): boolean => {
-  // States
-  const [matches, setMatches] = useState(breakpoint === 'always')
-
-  useEffect(() => {
-    if (breakpoint && breakpoint !== 'always') {
-      const media = window.matchMedia(`(max-width: ${breakpoint})`)
-
-      if (media.matches !== matches) {
-        setMatches(media.matches)
-      }
-
-      const listener = () => setMatches(media.matches)
-
-      window.addEventListener('resize', listener)
-
-      return () => window.removeEventListener('resize', listener)
-    }
-  }, [matches, breakpoint])
-
-  return matches
-}
-
-export default useMediaQuery
diff --git a/typescript-version/src/@menu/hooks/useVerticalMenu.tsx b/typescript-version/src/@menu/hooks/useVerticalMenu.tsx
deleted file mode 100644
index d15849f8b..000000000
--- a/typescript-version/src/@menu/hooks/useVerticalMenu.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-// React Imports
-import { useContext } from 'react'
-
-// Type Imports
-import type { VerticalMenuContextProps } from '../components/vertical-menu/Menu'
-
-// Context Imports
-import { VerticalMenuContext } from '../components/vertical-menu/Menu'
-
-const useVerticalMenu = (): VerticalMenuContextProps => {
-  // Hooks
-  const context = useContext(VerticalMenuContext)
-
-  if (context === undefined) {
-    //TODO: set better error message
-    throw new Error('Menu Component is required!')
-  }
-
-  return context
-}
-
-export default useVerticalMenu
diff --git a/typescript-version/src/@menu/hooks/useVerticalNav.tsx b/typescript-version/src/@menu/hooks/useVerticalNav.tsx
deleted file mode 100644
index f15fba26f..000000000
--- a/typescript-version/src/@menu/hooks/useVerticalNav.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-// React Imports
-import { useContext } from 'react'
-
-// Context Imports
-import VerticalNavContext from '../contexts/verticalNavContext'
-
-const useVerticalNav = () => {
-  // Hooks
-  const context = useContext(VerticalNavContext)
-
-  if (context === undefined) {
-    //TODO: set better error message
-    throw new Error('VerticalNav Component is required!')
-  }
-
-  return context
-}
-
-export default useVerticalNav
diff --git a/typescript-version/src/@menu/styles/StyledBackdrop.tsx b/typescript-version/src/@menu/styles/StyledBackdrop.tsx
deleted file mode 100644
index a4e94cd3f..000000000
--- a/typescript-version/src/@menu/styles/StyledBackdrop.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-// Third-party Imports
-import styled from '@emotion/styled'
-
-// Type Imports
-import type { VerticalNavProps } from '../vertical-menu'
-
-type StyledBackdropProps = Pick<VerticalNavProps, 'backdropColor'>
-
-const StyledBackdrop = styled.div<StyledBackdropProps>`
-  position: fixed;
-  inset-inline-start: 0;
-  inset-block-start: 0;
-  inset-inline-end: 0;
-  inset-block-end: 0;
-  z-index: 1;
-  background-color: ${({ backdropColor }) => backdropColor || 'rgba(0, 0, 0, 0.3)'};
-  touch-action: none;
-`
-
-export default StyledBackdrop
diff --git a/typescript-version/src/@menu/styles/StyledMenuIcon.tsx b/typescript-version/src/@menu/styles/StyledMenuIcon.tsx
deleted file mode 100644
index efe30eada..000000000
--- a/typescript-version/src/@menu/styles/StyledMenuIcon.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-// Third-party Imports
-import styled from '@emotion/styled'
-
-// Type Imports
-import type { RootStylesType } from '../types'
-
-const StyledMenuIcon = styled.span<RootStylesType>`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-inline-end: 10px;
-  ${({ rootStyles }) => rootStyles};
-`
-
-export default StyledMenuIcon
diff --git a/typescript-version/src/@menu/styles/StyledMenuLabel.tsx b/typescript-version/src/@menu/styles/StyledMenuLabel.tsx
deleted file mode 100644
index 5d66fd754..000000000
--- a/typescript-version/src/@menu/styles/StyledMenuLabel.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-// Third-party Imports
-import styled from '@emotion/styled'
-
-// Type Imports
-import type { RootStylesType } from '../types'
-
-type StyledMenuLabelProps = RootStylesType & {
-  textTruncate?: boolean
-}
-
-const StyledMenuLabel = styled.span<StyledMenuLabelProps>`
-  flex-grow: 1;
-  ${({ textTruncate }) =>
-    textTruncate &&
-    `
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
-    `};
-  ${({ rootStyles }) => rootStyles};
-`
-
-export default StyledMenuLabel
diff --git a/typescript-version/src/@menu/styles/StyledMenuPrefix.tsx b/typescript-version/src/@menu/styles/StyledMenuPrefix.tsx
deleted file mode 100644
index 75af5ad15..000000000
--- a/typescript-version/src/@menu/styles/StyledMenuPrefix.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-// Third-party Imports
-import styled from '@emotion/styled'
-
-// Type Imports
-import type { RootStylesType } from '../types'
-
-type StyledMenuPrefixProps = RootStylesType
-
-const StyledMenuPrefix = styled.span<StyledMenuPrefixProps>`
-  margin-inline-end: 5px;
-  display: flex;
-  ${({ rootStyles }) => rootStyles};
-`
-
-export default StyledMenuPrefix
diff --git a/typescript-version/src/@menu/styles/StyledMenuSectionLabel.tsx b/typescript-version/src/@menu/styles/StyledMenuSectionLabel.tsx
deleted file mode 100644
index 5b6994fec..000000000
--- a/typescript-version/src/@menu/styles/StyledMenuSectionLabel.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-// Third-party Imports
-import styled from '@emotion/styled'
-
-// Type Imports
-import type { RootStylesType } from '../types'
-
-type StyledMenuSectionLabelProps = RootStylesType & {
-  textTruncate?: boolean
-}
-
-const StyledMenuSectionLabel = styled.span<StyledMenuSectionLabelProps>`
-  ${({ textTruncate }) =>
-    textTruncate &&
-    `
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    `};
-  ${({ rootStyles }) => rootStyles};
-`
-
-export default StyledMenuSectionLabel
diff --git a/typescript-version/src/@menu/styles/StyledMenuSuffix.tsx b/typescript-version/src/@menu/styles/StyledMenuSuffix.tsx
deleted file mode 100644
index 801087099..000000000
--- a/typescript-version/src/@menu/styles/StyledMenuSuffix.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-// Third-party Imports
-import styled from '@emotion/styled'
-
-// Type Imports
-import type { RootStylesType } from '../types'
-
-type StyledMenuSuffixProps = RootStylesType
-
-const StyledMenuSuffix = styled.span<StyledMenuSuffixProps>`
-  margin-inline-start: 5px;
-  display: flex;
-  ${({ rootStyles }) => rootStyles};
-`
-
-export default StyledMenuSuffix
diff --git a/typescript-version/src/@menu/styles/StyledSubMenuContent.tsx b/typescript-version/src/@menu/styles/StyledSubMenuContent.tsx
deleted file mode 100644
index faac2e7f3..000000000
--- a/typescript-version/src/@menu/styles/StyledSubMenuContent.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-// Third-party Imports
-import styled from '@emotion/styled'
-
-// Type Imports
-import type { SubMenuContentProps } from '../components/vertical-menu/SubMenuContent'
-
-const StyledSubMenuContent = styled.div<SubMenuContentProps>`
-  display: none;
-  overflow: hidden;
-  z-index: 999;
-  transition: ${({ transitionDuration }) => `block-size ${transitionDuration}ms ease-in-out`};
-  box-sizing: border-box;
-  position: static !important;
-  transform: none !important;
-
-  ${({ rootStyles }) => rootStyles};
-`
-
-export default StyledSubMenuContent
diff --git a/typescript-version/src/@menu/styles/styles.module.css b/typescript-version/src/@menu/styles/styles.module.css
deleted file mode 100644
index 729a5893c..000000000
--- a/typescript-version/src/@menu/styles/styles.module.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.ul {
-  list-style-type: none;
-  padding: 0;
-  margin: 0;
-}
diff --git a/typescript-version/src/@menu/styles/vertical/StyledVerticalMenu.tsx b/typescript-version/src/@menu/styles/vertical/StyledVerticalMenu.tsx
deleted file mode 100644
index ca3977d1f..000000000
--- a/typescript-version/src/@menu/styles/vertical/StyledVerticalMenu.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-// Third-party Imports
-import styled from '@emotion/styled'
-
-// Type Imports
-import type { MenuProps } from '../../components/vertical-menu/Menu'
-
-// Util Imports
-import { menuClasses } from '../../utils/menuClasses'
-
-const StyledVerticalMenu = styled.nav<Pick<MenuProps, 'rootStyles'>>`
-  & > ul > :first-of-type {
-    margin-block-start: 0;
-  }
-  &.${menuClasses.root} {
-    ${({ rootStyles }) => rootStyles}
-  }
-`
-
-export default StyledVerticalMenu
diff --git a/typescript-version/src/@menu/styles/vertical/StyledVerticalMenuItem.tsx b/typescript-version/src/@menu/styles/vertical/StyledVerticalMenuItem.tsx
deleted file mode 100644
index 7fb9b6c32..000000000
--- a/typescript-version/src/@menu/styles/vertical/StyledVerticalMenuItem.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-// Third-party Imports
-import styled from '@emotion/styled'
-import type { CSSObject } from '@emotion/styled'
-
-// Type Imports
-import type { MenuItemProps } from '../../components/vertical-menu/MenuItem'
-
-// Util Imports
-import { menuClasses } from '../../utils/menuClasses'
-
-// Style Imports
-import { menuButtonStyles } from '../../components/vertical-menu/MenuButton'
-
-type StyledVerticalMenuItemProps = Pick<MenuItemProps, 'rootStyles' | 'disabled'> & {
-  level: number
-  menuItemStyles?: CSSObject
-  buttonStyles?: CSSObject
-}
-
-const StyledVerticalMenuItem = styled.li<StyledVerticalMenuItemProps>`
-  position: relative;
-  margin-block-start: 4px;
-  ${({ menuItemStyles }) => menuItemStyles};
-  ${({ rootStyles }) => rootStyles};
-
-  > .${menuClasses.button} {
-    ${({ level, disabled }) =>
-      menuButtonStyles({
-        level,
-        disabled
-      })};
-    ${({ buttonStyles }) => buttonStyles};
-  }
-`
-
-export default StyledVerticalMenuItem
diff --git a/typescript-version/src/@menu/styles/vertical/StyledVerticalMenuSection.tsx b/typescript-version/src/@menu/styles/vertical/StyledVerticalMenuSection.tsx
deleted file mode 100644
index 378c73c3b..000000000
--- a/typescript-version/src/@menu/styles/vertical/StyledVerticalMenuSection.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-// Third-party Imports
-import styled from '@emotion/styled'
-import type { CSSObject } from '@emotion/styled'
-
-// Type Imports
-import type { MenuSectionProps } from '../../components/vertical-menu/MenuSection'
-
-// Util Imports
-import { menuClasses } from '../../utils/menuClasses'
-
-type StyledVerticalMenuSectionProps = Pick<MenuSectionProps, 'rootStyles' | 'children'> & {
-  menuSectionStyles?: CSSObject
-}
-
-const StyledVerticalMenuSection = styled.li<StyledVerticalMenuSectionProps>`
-  display: flex;
-  inline-size: 100%;
-  position: relative;
-  overflow: hidden;
-  margin-block-start: 15px;
-
-  & .${menuClasses.menuSectionContent} {
-    font-size: 14px;
-    color: #aaaaaa;
-  }
-
-  ${({ menuSectionStyles }) => menuSectionStyles};
-  ${({ rootStyles }) => rootStyles};
-`
-
-export default StyledVerticalMenuSection
diff --git a/typescript-version/src/@menu/styles/vertical/StyledVerticalNav.tsx b/typescript-version/src/@menu/styles/vertical/StyledVerticalNav.tsx
deleted file mode 100644
index f3bd6d658..000000000
--- a/typescript-version/src/@menu/styles/vertical/StyledVerticalNav.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-// Third-party Imports
-import styled from '@emotion/styled'
-
-// Type Imports
-import type { VerticalNavState } from '../../contexts/verticalNavContext'
-import type { VerticalNavProps } from '../../components/vertical-menu/VerticalNav'
-
-// Util Imports
-import { verticalNavClasses } from '../../utils/menuClasses'
-
-type StyledVerticalNavProps = VerticalNavProps & Pick<VerticalNavState, 'isBreakpointReached' | 'transitionDuration'>
-
-const StyledVerticalNav = styled.aside<StyledVerticalNavProps>`
-  position: sticky;
-  inset-block-start: 0;
-  block-size: 100dvh;
-  z-index: 9;
-
-  /* Transition */
-  transition-property: inline-size, min-inline-size, margin-inline-start, inset-inline-start;
-  transition-duration: ${({ transitionDuration }) => `${transitionDuration}ms`};
-  transition-timing-function: ease-in-out;
-
-  /* Width & Min Width & Margin */
-  inline-size: ${({ width }) => `${width}px`};
-  min-inline-size: ${({ width }) => `${width}px`};
-
-  /* Toggled */
-  &.${verticalNavClasses.breakpointReached} {
-    position: fixed;
-    block-size: 100%;
-    inset-block-start: 0;
-    inset-inline-start: ${({ width }) => `-${width}px`};
-    z-index: 100;
-    margin: 0;
-    &.${verticalNavClasses.toggled} {
-      inset-inline-start: 0;
-    }
-  }
-
-  ${({ width, isBreakpointReached }) =>
-    !isBreakpointReached &&
-    `
-    &.${verticalNavClasses.toggled} {
-      margin-inline-start: -${width}px;
-    }
-  `}
-
-  /* User Styles */
-  ${({ customStyles }) => customStyles}
-`
-
-export default StyledVerticalNav
diff --git a/typescript-version/src/@menu/styles/vertical/StyledVerticalNavBgColorContainer.tsx b/typescript-version/src/@menu/styles/vertical/StyledVerticalNavBgColorContainer.tsx
deleted file mode 100644
index aae728d5c..000000000
--- a/typescript-version/src/@menu/styles/vertical/StyledVerticalNavBgColorContainer.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-// Third-party Imports
-import styled from '@emotion/styled'
-
-const StyledVerticalNavBgColorContainer = styled.div`
-  position: relative;
-  block-size: 100%;
-  z-index: 3;
-  display: flex;
-  flex-direction: column;
-  overflow-y: auto;
-  overflow-x: hidden;
-  background-color: white;
-`
-
-export default StyledVerticalNavBgColorContainer
diff --git a/typescript-version/src/@menu/styles/vertical/StyledVerticalNavContainer.tsx b/typescript-version/src/@menu/styles/vertical/StyledVerticalNavContainer.tsx
deleted file mode 100644
index 99a394ba6..000000000
--- a/typescript-version/src/@menu/styles/vertical/StyledVerticalNavContainer.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-// Third-party Imports
-import styled from '@emotion/styled'
-
-// Type Imports
-import type { VerticalNavProps } from '../../components/vertical-menu/VerticalNav'
-
-type StyledVerticalNavContainerProps = Pick<VerticalNavProps, 'width' | 'transitionDuration'>
-
-const StyledVerticalNavContainer = styled.div<StyledVerticalNavContainerProps>`
-  position: relative;
-  block-size: 100%;
-  inline-size: 100%;
-  border-inline-end: 1px solid #efefef;
-
-  /* Transition */
-  transition-property: inline-size, inset-inline-start;
-  transition-duration: ${({ transitionDuration }) => `${transitionDuration}ms`};
-  transition-timing-function: ease-in-out;
-`
-
-export default StyledVerticalNavContainer
diff --git a/typescript-version/src/@menu/styles/vertical/StyledVerticalNavExpandIcon.tsx b/typescript-version/src/@menu/styles/vertical/StyledVerticalNavExpandIcon.tsx
deleted file mode 100644
index 46d610ce8..000000000
--- a/typescript-version/src/@menu/styles/vertical/StyledVerticalNavExpandIcon.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-// Third-party Imports
-import styled from '@emotion/styled'
-
-// Type Imports
-import type { RootStylesType } from '../../types'
-import type { VerticalMenuContextProps } from '../../components/vertical-menu/Menu'
-
-type StyledVerticalNavExpandIconProps = {
-  open?: boolean
-  transitionDuration?: VerticalMenuContextProps['transitionDuration']
-}
-
-export const StyledVerticalNavExpandIconWrapper = styled.span<RootStylesType>`
-  display: flex;
-  margin-inline-start: 5px;
-  ${({ rootStyles }) => rootStyles};
-`
-
-const StyledVerticalNavExpandIcon = styled.span<StyledVerticalNavExpandIconProps>`
-  display: flex;
-
-  & > i,
-  & > svg {
-    transition: ${({ transitionDuration }) => `transform ${transitionDuration}ms ease-in-out`};
-    ${({ open }) => open && 'transform: rotate(90deg);'}
-
-    [dir='rtl'] & {
-      transform: rotate(180deg);
-      ${({ open }) => open && 'transform: rotate(90deg);'}
-    }
-  }
-`
-
-export default StyledVerticalNavExpandIcon
diff --git a/typescript-version/src/@menu/svg/ChevronRight.tsx b/typescript-version/src/@menu/svg/ChevronRight.tsx
deleted file mode 100644
index 33182c6dd..000000000
--- a/typescript-version/src/@menu/svg/ChevronRight.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-// React Imports
-import type { SVGAttributes } from 'react'
-
-const ChevronRight = (props: SVGAttributes<SVGElement>) => {
-  return (
-    <svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' fontSize='1.5rem' viewBox='0 0 24 24' {...props}>
-      <path fill='currentColor' d='M10.707 17.707 16.414 12l-5.707-5.707-1.414 1.414L13.586 12l-4.293 4.293z' />
-    </svg>
-  )
-}
-
-export default ChevronRight
diff --git a/typescript-version/src/@menu/svg/Close.tsx b/typescript-version/src/@menu/svg/Close.tsx
deleted file mode 100644
index 324eec446..000000000
--- a/typescript-version/src/@menu/svg/Close.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-// React Imports
-import type { SVGAttributes } from 'react'
-
-const Close = (props: SVGAttributes<SVGElement>) => {
-  return (
-    <svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' fontSize='1.5rem' viewBox='0 0 24 24' {...props}>
-      <path
-        fill='currentColor'
-        d='m16.192 6.344-4.243 4.242-4.242-4.242-1.414 1.414L10.535 12l-4.242 4.242 1.414 1.414 4.242-4.242 4.243 4.242 1.414-1.414L13.364 12l4.242-4.242z'
-      />
-    </svg>
-  )
-}
-
-export default Close
diff --git a/typescript-version/src/@menu/types.ts b/typescript-version/src/@menu/types.ts
deleted file mode 100644
index 8ee58fd40..000000000
--- a/typescript-version/src/@menu/types.ts
+++ /dev/null
@@ -1,92 +0,0 @@
-// React Imports
-import type { AnchorHTMLAttributes, ReactElement, ReactNode } from 'react'
-
-// Third-party Imports
-import type { CSSObject } from '@emotion/styled'
-
-export type ChildrenType = {
-  children: ReactNode
-}
-
-// Breakpoints
-export type BreakpointType = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'always'
-
-// Exact match for active URL in menu item
-export type MenuItemExactMatchUrlProps =
-  | {
-      exactMatch: true
-      activeUrl?: never
-    }
-  | {
-      exactMatch: false
-      activeUrl: string
-    }
-  | {
-      exactMatch?: never
-      activeUrl?: never
-    }
-
-// Menu Item Elements for styling
-export type MenuItemElement = 'root' | 'button' | 'icon' | 'label' | 'prefix' | 'suffix'
-
-// Sub Menu Item Elements for styling
-export type SubMenuItemElement =
-  | 'root'
-  | 'button'
-  | 'label'
-  | 'prefix'
-  | 'suffix'
-  | 'icon'
-  | 'subMenuStyles'
-  | 'subMenuContent'
-  | 'subMenuExpandIcon'
-
-// Menu Button Props
-export type MenuButtonProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'prefix'> & Partial<ChildrenType>
-
-// Menu Item Styles Params Type
-export type MenuItemStylesParams = {
-  level: number
-  disabled: boolean
-  active?: boolean
-  isSubmenu: boolean
-  open?: boolean
-}
-
-// Menu Item Style Elements Type
-export type ElementStyles = CSSObject | ((params: MenuItemStylesParams) => CSSObject | undefined)
-
-// Menu Item Styles Type
-export type MenuItemStyles = {
-  root?: ElementStyles
-  button?: ElementStyles
-  label?: ElementStyles
-  prefix?: ElementStyles
-  suffix?: ElementStyles
-  icon?: ElementStyles
-  subMenuStyles?: ElementStyles
-  subMenuContent?: ElementStyles
-  subMenuExpandIcon?: ElementStyles
-}
-
-// Expand Icon
-export type RenderExpandIconParams = {
-  open: boolean
-  level: number
-  active: boolean
-  disabled: boolean
-}
-
-// Icon for menu items in expanded submenu
-export type RenderExpandedMenuItemIcon = {
-  icon:
-    | ReactElement
-    | ((params: { level?: number; active?: boolean; disabled?: boolean }) => ReactElement | null)
-    | null
-  level?: number
-}
-
-// Root Styles
-export type RootStylesType = {
-  rootStyles?: CSSObject
-}
diff --git a/typescript-version/src/@menu/utils/menuClasses.ts b/typescript-version/src/@menu/utils/menuClasses.ts
deleted file mode 100644
index 0f187b356..000000000
--- a/typescript-version/src/@menu/utils/menuClasses.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-// Common classes for menu components
-export const menuClasses = {
-  root: 'ts-menu-root',
-  menuSectionRoot: 'ts-menusection-root',
-  menuItemRoot: 'ts-menuitem-root',
-  subMenuRoot: 'ts-submenu-root',
-  button: 'ts-menu-button',
-  prefix: 'ts-menu-prefix',
-  suffix: 'ts-menu-suffix',
-  label: 'ts-menu-label',
-  icon: 'ts-menu-icon',
-  menuSectionWrapper: 'ts-menu-section-wrapper',
-  menuSectionContent: 'ts-menu-section-content',
-  menuSectionLabel: 'ts-menu-section-label',
-  subMenuContent: 'ts-submenu-content',
-  subMenuExpandIcon: 'ts-submenu-expand-icon',
-  disabled: 'ts-disabled',
-  active: 'ts-active',
-  open: 'ts-open'
-}
-
-// Classes for vertical navigation menu
-export const verticalNavClasses = {
-  root: 'ts-vertical-nav-root',
-  container: 'ts-vertical-nav-container',
-  bgColorContainer: 'ts-vertical-nav-bg-color-container',
-  header: 'ts-vertical-nav-header',
-  backdrop: 'ts-vertical-nav-backdrop',
-  toggled: 'ts-toggled',
-  breakpointReached: 'ts-breakpoint-reached'
-}
diff --git a/typescript-version/src/@menu/utils/menuUtils.tsx b/typescript-version/src/@menu/utils/menuUtils.tsx
deleted file mode 100644
index d573b4e06..000000000
--- a/typescript-version/src/@menu/utils/menuUtils.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-// React Imports
-import { isValidElement } from 'react'
-import type { ReactElement, ReactNode } from 'react'
-
-// Third-party Imports
-import type { CSSObject } from '@emotion/styled'
-
-// Type Imports
-import type { ChildrenType, RenderExpandedMenuItemIcon } from '../types'
-
-// Util Imports
-import { menuClasses } from './menuClasses'
-
-// Styled Component Imports
-import StyledMenuIcon from '../styles/StyledMenuIcon'
-
-type RenderMenuIconParams = {
-  level?: number
-  active?: boolean
-  disabled?: boolean
-  styles?: CSSObject
-  icon?: ReactElement
-  renderExpandedMenuItemIcon?: RenderExpandedMenuItemIcon
-  isBreakpointReached?: boolean
-}
-
-export const confirmUrlInChildren = (children: ChildrenType['children'], url: string): boolean => {
-  if (!children) {
-    return false
-  }
-
-  if (Array.isArray(children)) {
-    return children.some((child: ReactNode) => confirmUrlInChildren(child, url))
-  }
-
-  if (isValidElement(children)) {
-    const { component, href, exactMatch, activeUrl, children: subChildren } = children.props
-
-    if (component && component.props.href) {
-      return exactMatch === true || exactMatch === undefined
-        ? component.props.href === url
-        : activeUrl && url.includes(activeUrl)
-    }
-
-    if (href) {
-      return exactMatch === true || exactMatch === undefined ? href === url : activeUrl && url.includes(activeUrl)
-    }
-
-    if (subChildren) {
-      return confirmUrlInChildren(subChildren, url)
-    }
-  }
-
-  return false
-}
-
-/*
- * Render all the icons for Menu Item and SubMenu components for all the levels more than 0
- */
-export const renderMenuIcon = (params: RenderMenuIconParams) => {
-  const { icon, level, active, disabled, styles, renderExpandedMenuItemIcon, isBreakpointReached } = params
-
-  if (icon && (level === 0 || (!isBreakpointReached && level && level > 0))) {
-    return (
-      <StyledMenuIcon className={menuClasses.icon} rootStyles={styles}>
-        {icon}
-      </StyledMenuIcon>
-    )
-  }
-
-  if (
-    level &&
-    level !== 0 &&
-    renderExpandedMenuItemIcon &&
-    renderExpandedMenuItemIcon.icon !== null &&
-    (!renderExpandedMenuItemIcon.level || renderExpandedMenuItemIcon.level >= level)
-  ) {
-    const iconToRender =
-      typeof renderExpandedMenuItemIcon.icon === 'function'
-        ? renderExpandedMenuItemIcon.icon({ level, active, disabled })
-        : renderExpandedMenuItemIcon.icon
-
-    if (iconToRender) {
-      return (
-        <StyledMenuIcon className={menuClasses.icon} rootStyles={styles}>
-          {iconToRender}
-        </StyledMenuIcon>
-      )
-    }
-  }
-
-  return null
-}
diff --git a/typescript-version/src/@menu/vertical-menu/index.tsx b/typescript-version/src/@menu/vertical-menu/index.tsx
deleted file mode 100644
index 31b528476..000000000
--- a/typescript-version/src/@menu/vertical-menu/index.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-// Import all Vertical Nav components and export them
-import Menu from '../components/vertical-menu/Menu'
-import SubMenu from '../components/vertical-menu/SubMenu'
-import MenuItem from '../components/vertical-menu/MenuItem'
-import NavHeader from '../components/vertical-menu/NavHeader'
-import VerticalNav from '../components/vertical-menu/VerticalNav'
-import MenuSection from '../components/vertical-menu/MenuSection'
-import type { MenuProps } from '../components/vertical-menu/Menu'
-import type { SubMenuProps } from '../components/vertical-menu/SubMenu'
-import type { MenuItemProps } from '../components/vertical-menu/MenuItem'
-import type { MenuSectionProps } from '../components/vertical-menu/MenuSection'
-import type { VerticalNavProps } from '../components/vertical-menu/VerticalNav'
-
-export default VerticalNav
-export { Menu, MenuItem, SubMenu, MenuSection, NavHeader }
-export type { VerticalNavProps, MenuProps, MenuItemProps, SubMenuProps, MenuSectionProps }
diff --git a/typescript-version/src/app/(blank-layout-pages)/error/page.tsx b/typescript-version/src/app/(blank-layout-pages)/error/page.tsx
deleted file mode 100644
index 52e48c63f..000000000
--- a/typescript-version/src/app/(blank-layout-pages)/error/page.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-// Component Imports
-import NotFound from '@views/NotFound'
-
-// Server Action Imports
-import { getServerMode } from '@core/utils/serverHelpers'
-
-const Error = () => {
-  // Vars
-  const mode = getServerMode()
-
-  return <NotFound mode={mode} />
-}
-
-export default Error
diff --git a/typescript-version/src/app/(blank-layout-pages)/forgot-password/page.tsx b/typescript-version/src/app/(blank-layout-pages)/forgot-password/page.tsx
deleted file mode 100644
index 0aa9a4238..000000000
--- a/typescript-version/src/app/(blank-layout-pages)/forgot-password/page.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-// Component Imports
-import ForgotPassword from '@views/ForgotPassword'
-
-// Server Action Imports
-import { getServerMode } from '@core/utils/serverHelpers'
-
-const ForgotPasswordPage = () => {
-  // Vars
-  const mode = getServerMode()
-
-  return <ForgotPassword mode={mode} />
-}
-
-export default ForgotPasswordPage
diff --git a/typescript-version/src/app/(blank-layout-pages)/layout.tsx b/typescript-version/src/app/(blank-layout-pages)/layout.tsx
deleted file mode 100644
index f6ae45a61..000000000
--- a/typescript-version/src/app/(blank-layout-pages)/layout.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-// Type Imports
-import type { ChildrenType } from '@core/types'
-
-// Component Imports
-import Providers from '@components/Providers'
-import BlankLayout from '@layouts/BlankLayout'
-
-const Layout = ({ children }: ChildrenType) => {
-  // Vars
-  const direction = 'ltr'
-
-  return (
-    <Providers direction={direction}>
-      <BlankLayout>{children}</BlankLayout>
-    </Providers>
-  )
-}
-
-export default Layout
diff --git a/typescript-version/src/app/(blank-layout-pages)/login/page.tsx b/typescript-version/src/app/(blank-layout-pages)/login/page.tsx
deleted file mode 100644
index 8b866a206..000000000
--- a/typescript-version/src/app/(blank-layout-pages)/login/page.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-// Component Imports
-import Login from '@views/Login'
-
-// Server Action Imports
-import { getServerMode } from '@core/utils/serverHelpers'
-
-const LoginPage = () => {
-  // Vars
-  const mode = getServerMode()
-
-  return <Login mode={mode} />
-}
-
-export default LoginPage
diff --git a/typescript-version/src/app/(blank-layout-pages)/register/page.tsx b/typescript-version/src/app/(blank-layout-pages)/register/page.tsx
deleted file mode 100644
index 46ef6fe0e..000000000
--- a/typescript-version/src/app/(blank-layout-pages)/register/page.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-// Component Imports
-import Register from '@views/Register'
-
-// Server Action Imports
-import { getServerMode } from '@core/utils/serverHelpers'
-
-const RegisterPage = () => {
-  // Vars
-  const mode = getServerMode()
-
-  return <Register mode={mode} />
-}
-
-export default RegisterPage
diff --git a/typescript-version/src/app/(blank-layout-pages)/under-maintenance/page.tsx b/typescript-version/src/app/(blank-layout-pages)/under-maintenance/page.tsx
deleted file mode 100644
index d9bff3042..000000000
--- a/typescript-version/src/app/(blank-layout-pages)/under-maintenance/page.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-// Component Imports
-import UnderMaintenance from '@views/pages/misc/UnderMaintenance'
-
-// Server Action Imports
-import { getServerMode } from '@core/utils/serverHelpers'
-
-const UnderMaintenancePage = () => {
-  // Vars
-  const mode = getServerMode()
-
-  return <UnderMaintenance mode={mode} />
-}
-
-export default UnderMaintenancePage
diff --git a/typescript-version/src/app/(dashboard)/account-settings/page.tsx b/typescript-version/src/app/(dashboard)/account-settings/page.tsx
deleted file mode 100644
index cda6d0ca7..000000000
--- a/typescript-version/src/app/(dashboard)/account-settings/page.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-// React Imports
-import type { ReactElement } from 'react'
-
-// Next Imports
-import dynamic from 'next/dynamic'
-
-// Component Imports
-import AccountSettings from '@views/account-settings'
-
-const AccountTab = dynamic(() => import('@views/account-settings/account'))
-const NotificationsTab = dynamic(() => import('@views/account-settings/notifications'))
-const ConnectionsTab = dynamic(() => import('@views/account-settings/connections'))
-
-// Vars
-const tabContentList = (): { [key: string]: ReactElement } => ({
-  account: <AccountTab />,
-  notifications: <NotificationsTab />,
-  connections: <ConnectionsTab />
-})
-
-const AccountSettingsPage = () => {
-  return <AccountSettings tabContentList={tabContentList()} />
-}
-
-export default AccountSettingsPage
diff --git a/typescript-version/src/app/(dashboard)/card-basic/page.tsx b/typescript-version/src/app/(dashboard)/card-basic/page.tsx
deleted file mode 100644
index 876dbbc5b..000000000
--- a/typescript-version/src/app/(dashboard)/card-basic/page.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-// MUI Imports
-import Grid from '@mui/material/Grid'
-import Typography from '@mui/material/Typography'
-import Divider from '@mui/material/Divider'
-
-// Components Imports
-import CardInfluencingInfluencerWithImg from '@views/card-basic/CardInfluencingInfluencerWithImg'
-import CardUser from '@views/card-basic/CardUser'
-import CardWithCollapse from '@views/card-basic/CardWithCollapse'
-import CardMobile from '@views/card-basic/CardMobile'
-import CardHorizontalRatings from '@views/card-basic/CardHorizontalRatings'
-import CardWatch from '@views/card-basic/CardWatch'
-import CardLifetimeMembership from '@views/card-basic/CardLifetimeMembership'
-import CardInfluencingInfluencer from '@views/card-basic/CardInfluencingInfluencer'
-import CardVerticalRatings from '@views/card-basic/CardVerticalRatings'
-import CardSupport from '@views/card-basic/CardSupport'
-import CardWithTabs from '@views/card-basic/CardWithTabs'
-import CardWithTabsCenter from '@views/card-basic/CardWithTabsCenter'
-import CardTwitter from '@views/card-basic/CardTwitter'
-import CardFacebook from '@views/card-basic/CardFacebook'
-import CardLinkedIn from '@views/card-basic/CardLinkedIn'
-
-const CardBasic = () => {
-  return (
-    <Grid container spacing={6}>
-      <Grid item xs={12}>
-        <Typography variant='h3'>Basic Cards</Typography>
-        <Divider />
-      </Grid>
-      <Grid item xs={12} sm={6} md={4}>
-        <CardInfluencingInfluencerWithImg />
-      </Grid>
-      <Grid item xs={12} sm={6} md={4}>
-        <CardUser />
-      </Grid>
-      <Grid item xs={12} sm={6} md={4}>
-        <CardWithCollapse />
-      </Grid>
-      <Grid item xs={12} sm={6}>
-        <CardMobile />
-      </Grid>
-      <Grid item xs={12} sm={6}>
-        <CardHorizontalRatings />
-      </Grid>
-      <Grid item xs={12} sm={6} md={4}>
-        <CardWatch />
-      </Grid>
-      <Grid item xs={12} md={8}>
-        <CardLifetimeMembership />
-      </Grid>
-      <Grid item xs={12} sm={6} md={4}>
-        <CardInfluencingInfluencer />
-      </Grid>
-      <Grid item xs={12} sm={6} md={4}>
-        <CardVerticalRatings />
-      </Grid>
-      <Grid item xs={12} sm={6} md={4}>
-        <CardSupport />
-      </Grid>
-      <Grid item xs={12}>
-        <Typography variant='h3'>Navigation Cards</Typography>
-        <Divider />
-      </Grid>
-      <Grid item xs={12} md={6}>
-        <CardWithTabs />
-      </Grid>
-      <Grid item xs={12} md={6}>
-        <CardWithTabsCenter />
-      </Grid>
-      <Grid item xs={12}>
-        <Typography variant='h3'>Solid Cards</Typography>
-        <Divider />
-      </Grid>
-      <Grid item xs={12} sm={6} md={4}>
-        <CardTwitter />
-      </Grid>
-      <Grid item xs={12} sm={6} md={4}>
-        <CardFacebook />
-      </Grid>
-      <Grid item xs={12} sm={6} md={4}>
-        <CardLinkedIn />
-      </Grid>
-    </Grid>
-  )
-}
-
-export default CardBasic
diff --git a/typescript-version/src/app/(dashboard)/form-layouts/page.tsx b/typescript-version/src/app/(dashboard)/form-layouts/page.tsx
deleted file mode 100644
index aa5848e16..000000000
--- a/typescript-version/src/app/(dashboard)/form-layouts/page.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-// MUI Imports
-import Grid from '@mui/material/Grid'
-
-// Component Imports
-import FormLayoutsBasic from '@views/form-layouts/FormLayoutsBasic'
-import FormLayoutsIcon from '@views/form-layouts/FormLayoutsIcons'
-import FormLayoutsAlignment from '@views/form-layouts/FormLayoutsAlignment'
-
-const FormLayouts = () => {
-  return (
-    <Grid container spacing={6}>
-      <Grid item xs={12} md={6}>
-        <FormLayoutsBasic />
-      </Grid>
-      <Grid item xs={12} md={6}>
-        <FormLayoutsIcon />
-      </Grid>
-      <Grid item xs={12}>
-        <FormLayoutsAlignment />
-      </Grid>
-    </Grid>
-  )
-}
-
-export default FormLayouts
diff --git a/typescript-version/src/app/(dashboard)/layout.tsx b/typescript-version/src/app/(dashboard)/layout.tsx
deleted file mode 100644
index de5f6939e..000000000
--- a/typescript-version/src/app/(dashboard)/layout.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-// Type Imports
-import type { ChildrenType } from '@core/types'
-
-// Layout Imports
-import LayoutWrapper from '@layouts/LayoutWrapper'
-import VerticalLayout from '@layouts/VerticalLayout'
-
-// Component Imports
-import Providers from '@components/Providers'
-import Navigation from '@components/layout/vertical/Navigation'
-import Navbar from '@components/layout/vertical/Navbar'
-import VerticalFooter from '@components/layout/vertical/Footer'
-
-const Layout = async ({ children }: ChildrenType) => {
-  // Vars
-  const direction = 'ltr'
-
-  return (
-    <Providers direction={direction}>
-      <LayoutWrapper
-        verticalLayout={
-          <VerticalLayout navigation={<Navigation />} navbar={<Navbar />} footer={<VerticalFooter />}>
-            {children}
-          </VerticalLayout>
-        }
-      />
-    </Providers>
-  )
-}
-
-export default Layout
diff --git a/typescript-version/src/app/(dashboard)/page.tsx b/typescript-version/src/app/(dashboard)/page.tsx
deleted file mode 100644
index ad7d44e07..000000000
--- a/typescript-version/src/app/(dashboard)/page.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-// MUI Imports
-import Grid from '@mui/material/Grid'
-
-// Components Imports
-import Award from '@views/dashboard/Award'
-import Transactions from '@views/dashboard/Transactions'
-import WeeklyOverview from '@views/dashboard/WeeklyOverview'
-import TotalEarning from '@views/dashboard/TotalEarning'
-import LineChart from '@views/dashboard/LineChart'
-import DistributedColumnChart from '@views/dashboard/DistributedColumnChart'
-import DepositWithdraw from '@views/dashboard/DepositWithdraw'
-import SalesByCountries from '@views/dashboard/SalesByCountries'
-import CardStatVertical from '@components/card-statistics/Vertical'
-import Table from '@views/dashboard/Table'
-
-const DashboardAnalytics = () => {
-  return (
-    <Grid container spacing={6}>
-      <Grid item xs={12} md={4}>
-        <Award />
-      </Grid>
-      <Grid item xs={12} md={8} lg={8}>
-        <Transactions />
-      </Grid>
-      <Grid item xs={12} md={6} lg={4}>
-        <WeeklyOverview />
-      </Grid>
-      <Grid item xs={12} md={6} lg={4}>
-        <TotalEarning />
-      </Grid>
-      <Grid item xs={12} md={6} lg={4}>
-        <Grid container spacing={6}>
-          <Grid item xs={12} sm={6}>
-            <LineChart />
-          </Grid>
-          <Grid item xs={12} sm={6}>
-            <CardStatVertical
-              title='Total Profit'
-              stats='$25.6k'
-              avatarIcon='ri-pie-chart-2-line'
-              avatarColor='secondary'
-              subtitle='Weekly Profit'
-              trendNumber='42%'
-              trend='positive'
-            />
-          </Grid>
-          <Grid item xs={12} sm={6}>
-            <CardStatVertical
-              stats='862'
-              trend='negative'
-              trendNumber='18%'
-              title='New Project'
-              subtitle='Yearly Project'
-              avatarColor='primary'
-              avatarIcon='ri-file-word-2-line'
-            />
-          </Grid>
-          <Grid item xs={12} sm={6}>
-            <DistributedColumnChart />
-          </Grid>
-        </Grid>
-      </Grid>
-      <Grid item xs={12} md={6} lg={4}>
-        <SalesByCountries />
-      </Grid>
-      <Grid item xs={12} lg={8}>
-        <DepositWithdraw />
-      </Grid>
-      <Grid item xs={12}>
-        <Table />
-      </Grid>
-    </Grid>
-  )
-}
-
-export default DashboardAnalytics
diff --git a/typescript-version/src/app/[...not-found]/page.tsx b/typescript-version/src/app/[...not-found]/page.tsx
deleted file mode 100644
index 130673557..000000000
--- a/typescript-version/src/app/[...not-found]/page.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-// Component Imports
-import Providers from '@components/Providers'
-import BlankLayout from '@layouts/BlankLayout'
-import NotFound from '@views/NotFound'
-
-// Util Imports
-import { getServerMode } from '@core/utils/serverHelpers'
-
-const NotFoundPage = () => {
-  // Vars
-  const direction = 'ltr'
-  const mode = getServerMode()
-
-  return (
-    <Providers direction={direction}>
-      <BlankLayout>
-        <NotFound mode={mode} />
-      </BlankLayout>
-    </Providers>
-  )
-}
-
-export default NotFoundPage
diff --git a/typescript-version/src/app/favicon.ico b/typescript-version/src/app/favicon.ico
deleted file mode 100644
index 91e6db8b3..000000000
Binary files a/typescript-version/src/app/favicon.ico and /dev/null differ
diff --git a/typescript-version/src/app/globals.css b/typescript-version/src/app/globals.css
deleted file mode 100644
index db086cb76..000000000
--- a/typescript-version/src/app/globals.css
+++ /dev/null
@@ -1,113 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-:root {
-  --border-radius: var(--mui-shape-borderRadius);
-  --border-color: var(--mui-palette-divider);
-  --primary-color: var(--mui-palette-primary-main);
-  --background-color: var(--mui-palette-background-default);
-  --header-height: 64px;
-  --header-z-index: var(--mui-zIndex-appBar);
-  --footer-z-index: 10;
-  --customizer-z-index: var(--mui-zIndex-drawer);
-  --search-z-index: var(--mui-zIndex-tooltip);
-  --drawer-z-index: var(--mui-zIndex-drawer);
-  --backdrop-color: rgb(var(--mui-mainColorChannels-light) / 0.5);
-}
-
-[data-mui-color-scheme='dark'] {
-  --backdrop-color: rgb(21 16 43 / 0.6);
-}
-
-*,
-::before,
-::after {
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-  border-width: 0;
-  border-style: solid;
-  border-color: theme('borderColor.DEFAULT', currentColor);
-}
-
-html {
-  display: flex;
-  inline-size: 100%;
-  min-block-size: 100%;
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-ul:not([class]) {
-  margin-block: 1rem;
-  padding-inline-start: 40px;
-}
-
-.ps__rail-y {
-  inset-inline-end: 0 !important;
-  inset-inline-start: auto !important;
-  & .ps__thumb-y {
-    inset-inline-end: 3px !important;
-    inset-inline-start: auto !important;
-    background-color: var(--mui-palette-divider);
-    inline-size: 6px;
-    &:hover,
-    &:focus,
-    &.ps--clicking {
-      background-color: var(--mui-palette-action-disabled) !important;
-    }
-  }
-  &:hover,
-  &:focus,
-  &.ps--clicking {
-    background-color: var(--mui-palette-action-hover) !important;
-  }
-  &:hover,
-  &:focus,
-  &.ps--clicking {
-    .ps__thumb-y {
-      background-color: var(--mui-palette-action-disabled) !important;
-    }
-  }
-}
-
-.ts-vertical-nav-root {
-  .ps__thumb-y {
-    inline-size: 4px;
-    &:hover,
-    &:focus,
-    &.ps--clicking {
-      inline-size: 6px;
-    }
-  }
-  .ps__rail-y {
-    inline-size: 10px;
-    &:hover,
-    &:focus,
-    &.ps--clicking {
-      background-color: transparent !important;
-      .ps__thumb-y {
-        inline-size: 6px;
-      }
-    }
-  }
-}
-
-:where([class^='ri-']) {
-  font-size: 1.5rem;
-}
-
-code {
-  font-family: inherit;
-  padding-block: 2px;
-  padding-inline: 4px;
-  border-radius: 4px;
-  font-size: 90%;
-  color: var(--mui-palette-info-main);
-  background-color: rgb(var(--mui-palette-info-mainChannel) / 0.08);
-  border: 0;
-}
diff --git a/typescript-version/src/app/layout.tsx b/typescript-version/src/app/layout.tsx
deleted file mode 100644
index 0d54dbdae..000000000
--- a/typescript-version/src/app/layout.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-// Third-party Imports
-import 'react-perfect-scrollbar/dist/css/styles.css'
-
-// Type Imports
-import type { ChildrenType } from '@core/types'
-
-// Style Imports
-import '@/app/globals.css'
-
-// Generated Icon CSS Imports
-import '@assets/iconify-icons/generated-icons.css'
-
-export const metadata = {
-  title: 'Demo: Materio - NextJS Dashboard Free',
-  description:
-    'Develop next-level web apps with Materio Dashboard Free - NextJS. Now, updated with lightning-fast routing powered by MUI and App router.'
-}
-
-const RootLayout = ({ children }: ChildrenType) => {
-  // Vars
-  const direction = 'ltr'
-
-  return (
-    <html id='__next' dir={direction}>
-      <body className='flex is-full min-bs-full flex-auto flex-col'>{children}</body>
-    </html>
-  )
-}
-
-export default RootLayout
diff --git a/typescript-version/src/assets/iconify-icons/bundle-icons-css.ts b/typescript-version/src/assets/iconify-icons/bundle-icons-css.ts
deleted file mode 100644
index 530e3c905..000000000
--- a/typescript-version/src/assets/iconify-icons/bundle-icons-css.ts
+++ /dev/null
@@ -1,258 +0,0 @@
-/**
- * This is an advanced example for creating icon bundles for Iconify SVG Framework.
- *
- * It creates a bundle from:
- * - All SVG files in a directory.
- * - Custom JSON files.
- * - Iconify icon sets.
- * - SVG framework.
- *
- * This example uses Iconify Tools to import and clean up icons.
- * For Iconify Tools documentation visit https://docs.iconify.design/tools/tools2/
- */
-import { promises as fs } from 'node:fs'
-import { dirname, join } from 'node:path'
-
-// Installation: npm install --save-dev @iconify/tools @iconify/utils @iconify/json @iconify/iconify
-import { cleanupSVG, importDirectory, isEmptyColor, parseColors, runSVGO } from '@iconify/tools'
-import type { IconifyJSON } from '@iconify/types'
-import { getIcons, getIconsCSS, stringToIcon } from '@iconify/utils'
-
-/**
- * Script configuration
- */
-interface BundleScriptCustomSVGConfig {
-  // eslint-disable-next-line lines-around-comment
-  // Path to SVG files
-  dir: string
-
-  // True if icons should be treated as monotone: colors replaced with currentColor
-  monotone: boolean
-
-  // Icon set prefix
-  prefix: string
-}
-
-interface BundleScriptCustomJSONConfig {
-  // eslint-disable-next-line lines-around-comment
-  // Path to JSON file
-  filename: string
-
-  // List of icons to import. If missing, all icons will be imported
-  icons?: string[]
-}
-
-interface BundleScriptConfig {
-  // eslint-disable-next-line lines-around-comment
-  // Custom SVG to import and bundle
-  svg?: BundleScriptCustomSVGConfig[]
-
-  // Icons to bundled from @iconify/json packages
-  icons?: string[]
-
-  // List of JSON files to bundled
-  // Entry can be a string, pointing to filename or a BundleScriptCustomJSONConfig object (see type above)
-  // If entry is a string or object without 'icons' property, an entire JSON file will be bundled
-  json?: (string | BundleScriptCustomJSONConfig)[]
-}
-
-const sources: BundleScriptConfig = {
-  json: [
-    // Iconify JSON file (@iconify/json is a package name, /json/ is directory where files are, then filename)
-    require.resolve('@iconify/json/json/ri.json'),
-
-    // Custom file with only few icons
-    {
-      filename: require.resolve('@iconify/json/json/line-md.json'),
-      icons: ['home-twotone-alt', 'github', 'document-list', 'document-code', 'image-twotone']
-    }
-
-    // Custom JSON file
-    // 'json/gg.json'
-  ],
-
-  icons: [
-    'bx-basket',
-    'bi-airplane-engines',
-    'tabler-anchor',
-    'uit-adobe-alt',
-
-    // 'fa6-regular-comment',
-    'twemoji-auto-rickshaw'
-  ],
-
-  svg: [
-    /* {
-      dir: 'src/assets/iconify-icons/svg',
-      monotone: false,
-      prefix: 'custom'
-    } */
-    /* {
-      dir: 'src/assets/iconify-icons/emojis',
-      monotone: false,
-      prefix: 'emoji'
-    } */
-  ]
-}
-
-// File to save bundle to
-const target = join(__dirname, 'generated-icons.css')
-
-/**
- * Do stuff!
- */
-
-;(async function () {
-  // Create directory for output if missing
-  const dir = dirname(target)
-
-  try {
-    await fs.mkdir(dir, {
-      recursive: true
-    })
-  } catch (err) {
-    //
-  }
-
-  const allIcons: IconifyJSON[] = []
-
-  /**
-   * Convert sources.icons to sources.json
-   */
-  if (sources.icons) {
-    const sourcesJSON = sources.json ? sources.json : (sources.json = [])
-
-    // Sort icons by prefix
-    const organizedList = organizeIconsList(sources.icons)
-
-    for (const prefix in organizedList) {
-      const filename = require.resolve(`@iconify/json/json/${prefix}.json`)
-
-      sourcesJSON.push({
-        filename,
-        icons: organizedList[prefix]
-      })
-    }
-  }
-
-  /**
-   * Bundle JSON files and collect icons
-   */
-  if (sources.json) {
-    for (let i = 0; i < sources.json.length; i++) {
-      const item = sources.json[i]
-
-      // Load icon set
-      const filename = typeof item === 'string' ? item : item.filename
-      const content = JSON.parse(await fs.readFile(filename, 'utf8')) as IconifyJSON
-
-      // Filter icons
-      if (typeof item !== 'string' && item.icons?.length) {
-        const filteredContent = getIcons(content, item.icons)
-
-        if (!filteredContent) throw new Error(`Cannot find required icons in ${filename}`)
-
-        // Collect filtered icons
-        allIcons.push(filteredContent)
-      } else {
-        // Collect all icons from the JSON file
-        allIcons.push(content)
-      }
-    }
-  }
-
-  /**
-   * Bundle custom SVG icons and collect icons
-   */
-  if (sources.svg) {
-    for (let i = 0; i < sources.svg.length; i++) {
-      const source = sources.svg[i]
-
-      // Import icons
-      const iconSet = await importDirectory(source.dir, {
-        prefix: source.prefix
-      })
-
-      // Validate, clean up, fix palette, etc.
-      await iconSet.forEach(async (name, type) => {
-        if (type !== 'icon') return
-
-        // Get SVG instance for parsing
-        const svg = iconSet.toSVG(name)
-
-        if (!svg) {
-          // Invalid icon
-          iconSet.remove(name)
-
-          return
-        }
-
-        // Clean up and optimise icons
-        try {
-          // Clean up icon code
-          await cleanupSVG(svg)
-
-          if (source.monotone) {
-            // Replace color with currentColor, add if missing
-            // If icon is not monotone, remove this code
-            await parseColors(svg, {
-              defaultColor: 'currentColor',
-              callback: (attr, colorStr, color) => {
-                return !color || isEmptyColor(color) ? colorStr : 'currentColor'
-              }
-            })
-          }
-
-          // Optimise
-          await runSVGO(svg)
-        } catch (err) {
-          // Invalid icon
-          console.error(`Error parsing ${name} from ${source.dir}:`, err)
-          iconSet.remove(name)
-
-          return
-        }
-
-        // Update icon from SVG instance
-        iconSet.fromSVG(name, svg)
-      })
-
-      // Collect the SVG icon
-      allIcons.push(iconSet.export())
-    }
-  }
-
-  // Generate CSS from collected icons
-  const cssContent = allIcons
-    .map(iconSet => getIconsCSS(iconSet, Object.keys(iconSet.icons), { iconSelector: '.{prefix}-{name}' }))
-    .join('\n')
-
-  // Save the CSS to a file
-  await fs.writeFile(target, cssContent, 'utf8')
-
-  console.log(`Saved CSS to ${target}!`)
-})().catch(err => {
-  console.error(err)
-})
-
-/**
- * Sort icon names by prefix
- */
-function organizeIconsList(icons: string[]): Record<string, string[]> {
-  const sorted: Record<string, string[]> = Object.create(null)
-
-  icons.forEach(icon => {
-    const item = stringToIcon(icon)
-
-    if (!item) return
-
-    const prefix = item.prefix
-    const prefixList = sorted[prefix] ? sorted[prefix] : (sorted[prefix] = [])
-
-    const name = item.name
-
-    if (!prefixList.includes(name)) prefixList.push(name)
-  })
-
-  return sorted
-}
diff --git a/typescript-version/src/components/DirectionalIcon.tsx b/typescript-version/src/components/DirectionalIcon.tsx
deleted file mode 100644
index 2da845f5e..000000000
--- a/typescript-version/src/components/DirectionalIcon.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-'use client'
-
-// MUI Imports
-import { useTheme } from '@mui/material/styles'
-
-// Third-party Imports
-import classnames from 'classnames'
-
-type Props = {
-  ltrIconClass: string
-  rtlIconClass: string
-  className?: string
-}
-
-const DirectionalIcon = (props: Props) => {
-  // Props
-  const { ltrIconClass, rtlIconClass, className } = props
-
-  // Hooks
-  const theme = useTheme()
-
-  return (
-    <i
-      className={classnames(
-        {
-          [ltrIconClass]: theme.direction === 'ltr',
-          [rtlIconClass]: theme.direction === 'rtl'
-        },
-        className
-      )}
-    />
-  )
-}
-
-export default DirectionalIcon
diff --git a/typescript-version/src/components/Form.tsx b/typescript-version/src/components/Form.tsx
deleted file mode 100644
index 19c482331..000000000
--- a/typescript-version/src/components/Form.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-'use client'
-
-// React Imports
-import type { DetailedHTMLProps, FormHTMLAttributes } from 'react'
-
-type Props = DetailedHTMLProps<FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>
-
-const FormComponent = (props: Props) => {
-  // Props
-  const { onSubmit, ...rest } = props
-
-  return <form {...rest} onSubmit={onSubmit ? e => onSubmit(e) : e => e.preventDefault()} />
-}
-
-export default FormComponent
diff --git a/typescript-version/src/components/Illustrations.tsx b/typescript-version/src/components/Illustrations.tsx
deleted file mode 100644
index 79180345a..000000000
--- a/typescript-version/src/components/Illustrations.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-'use client'
-
-// React Imports
-import type { ReactNode } from 'react'
-
-// MUI Components
-import useMediaQuery from '@mui/material/useMediaQuery'
-import { styled, useTheme } from '@mui/material/styles'
-
-// Type Imports
-import type { Mode } from '@core/types'
-
-// Hook Imports
-import { useImageVariant } from '@core/hooks/useImageVariant'
-
-type ImageObj = {
-  src: string
-  alt?: string
-  className?: string
-  height?: number
-  width?: number
-}
-
-type IllustrationsProp = {
-  image1?: ReactNode | ImageObj
-  image2?: ReactNode | ImageObj
-  maskImg?: ReactNode | ImageObj
-  mode?: Mode
-}
-
-// Styled Components
-const MaskImg = styled('img')({
-  inlineSize: '100%',
-  position: 'absolute',
-  insetBlockEnd: 0,
-  zIndex: -1
-})
-
-const Illustrations = (props: IllustrationsProp) => {
-  // Props
-  const { image1, image2, maskImg, mode } = props
-
-  // Vars
-  const darkImg = '/images/pages/misc-mask-dark.png'
-  const lightImg = '/images/pages/misc-mask-light.png'
-
-  // Hook
-  const theme = useTheme()
-  const hidden = useMediaQuery(theme.breakpoints.down('md'))
-  const maskBackground = useImageVariant(mode as Mode, lightImg, darkImg)
-
-  function isImageObj(obj: any): obj is ImageObj {
-    return obj && typeof obj === 'object' && 'src' in obj
-  }
-
-  if (!hidden) {
-    return (
-      <>
-        {typeof image1 === 'undefined' || isImageObj(image1) ? (
-          <img
-            alt={image1?.alt || 'tree-1'}
-            src={image1?.src || '/images/illustrations/objects/tree-1.png'}
-            className={image1?.className || 'absolute inline-start-0 block-end-0'}
-            width={image1?.width}
-            height={image1?.height || 200}
-          />
-        ) : (
-          image1
-        )}
-        {typeof maskImg === 'undefined' || isImageObj(maskImg) ? (
-          <MaskImg
-            alt={maskImg?.alt || 'mask'}
-            src={maskImg?.src || maskBackground}
-            className={maskImg?.className}
-            width={maskImg?.width}
-            height={maskImg?.height}
-          />
-        ) : (
-          maskImg
-        )}
-        {typeof image2 === 'undefined' || isImageObj(image2) ? (
-          <img
-            alt={image2?.alt || 'tree-2'}
-            src={image2?.src || '/images/illustrations/objects/tree-2.png'}
-            className={image2?.className || 'absolute inline-end-0 block-end-0'}
-            width={image2?.width}
-            height={image2?.height || 200}
-          />
-        ) : (
-          image2
-        )}
-      </>
-    )
-  } else {
-    return null
-  }
-}
-
-export default Illustrations
diff --git a/typescript-version/src/components/Link.tsx b/typescript-version/src/components/Link.tsx
deleted file mode 100644
index dcfcafe24..000000000
--- a/typescript-version/src/components/Link.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-'use client'
-
-// React Imports
-import { forwardRef } from 'react'
-import type { ComponentProps, ForwardedRef, MouseEvent } from 'react'
-
-// Next Imports
-import NextLink from 'next/link'
-
-type Props = Omit<ComponentProps<typeof NextLink>, 'href' | 'onClick'> & {
-  href?: string
-  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void
-}
-
-const Link = (props: Props, ref: ForwardedRef<HTMLAnchorElement>) => {
-  // Props
-  const { href, onClick, ...rest } = props
-
-  return (
-    <NextLink
-      ref={ref}
-      {...rest}
-      href={href || '/'}
-      onClick={onClick ? e => onClick(e) : !href ? e => e.preventDefault() : undefined}
-    />
-  )
-}
-
-export default forwardRef(Link)
diff --git a/typescript-version/src/components/Providers.tsx b/typescript-version/src/components/Providers.tsx
deleted file mode 100644
index 183fbb142..000000000
--- a/typescript-version/src/components/Providers.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-// Type Imports
-import type { ChildrenType, Direction } from '@core/types'
-
-// Context Imports
-import { VerticalNavProvider } from '@menu/contexts/verticalNavContext'
-import { SettingsProvider } from '@core/contexts/settingsContext'
-import ThemeProvider from '@components/theme'
-
-// Component Imports
-import UpgradeToProButton from '@components/upgrade-to-pro-button'
-
-// Util Imports
-import { getMode, getSettingsFromCookie } from '@core/utils/serverHelpers'
-
-type Props = ChildrenType & {
-  direction: Direction
-}
-
-const Providers = (props: Props) => {
-  // Props
-  const { children, direction } = props
-
-  // Vars
-  const mode = getMode()
-  const settingsCookie = getSettingsFromCookie()
-
-  return (
-    <VerticalNavProvider>
-      <SettingsProvider settingsCookie={settingsCookie} mode={mode}>
-        <ThemeProvider direction={direction}>
-          {children}
-          <UpgradeToProButton />
-        </ThemeProvider>
-      </SettingsProvider>
-    </VerticalNavProvider>
-  )
-}
-
-export default Providers
diff --git a/typescript-version/src/components/card-statistics/Vertical.tsx b/typescript-version/src/components/card-statistics/Vertical.tsx
deleted file mode 100644
index 8b777ac79..000000000
--- a/typescript-version/src/components/card-statistics/Vertical.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-// MUI Imports
-import Card from '@mui/material/Card'
-import CardContent from '@mui/material/CardContent'
-import Typography from '@mui/material/Typography'
-
-// Types Imports
-import type { CardStatsVerticalProps } from '@/types/pages/widgetTypes'
-
-// Components Imports
-import CustomAvatar from '@core/components/mui/Avatar'
-import OptionMenu from '@core/components/option-menu'
-
-const CardStatVertical = (props: CardStatsVerticalProps) => {
-  // Props
-  const { title, stats, avatarIcon, avatarColor, trendNumber, trend, subtitle, avatarSkin, avatarSize, moreOptions } =
-    props
-
-  return (
-    <Card className='bs-full'>
-      <CardContent>
-        <div className='flex justify-between items-center is-full mbe-5'>
-          <CustomAvatar color={avatarColor} skin={avatarSkin} size={avatarSize} className='shadow-xs'>
-            <i className={avatarIcon} />
-          </CustomAvatar>
-          <OptionMenu
-            {...(moreOptions
-              ? moreOptions
-              : {
-                  options: ['Refresh', 'Share', 'Update'],
-                  iconButtonProps: { className: 'text-textPrimary' }
-                })}
-          />
-        </div>
-        <div className='flex flex-col gap-1'>
-          <Typography color='text.primary' className='font-medium'>
-            {title}
-          </Typography>
-          <div className='flex gap-x-2 gap-y-0.5 items-center flex-wrap'>
-            <Typography variant='h4'>{stats}</Typography>
-            <Typography color={trend === 'negative' ? 'error.main' : 'success.main'}>
-              {`${trend === 'negative' ? '-' : '+'}${trendNumber}`}
-            </Typography>
-          </div>
-          <Typography variant='body2'>{subtitle}</Typography>
-        </div>
-      </CardContent>
-    </Card>
-  )
-}
-
-export default CardStatVertical
diff --git a/typescript-version/src/components/layout/shared/Logo.tsx b/typescript-version/src/components/layout/shared/Logo.tsx
deleted file mode 100644
index 75013a1cb..000000000
--- a/typescript-version/src/components/layout/shared/Logo.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-'use client'
-
-// React Imports
-import type { CSSProperties } from 'react'
-
-// Third-party Imports
-import styled from '@emotion/styled'
-
-// Component Imports
-import MaterioLogo from '@core/svg/Logo'
-
-// Config Imports
-import themeConfig from '@configs/themeConfig'
-
-type LogoTextProps = {
-  color?: CSSProperties['color']
-}
-
-const LogoText = styled.span<LogoTextProps>`
-  color: ${({ color }) => color ?? 'var(--mui-palette-text-primary)'};
-  font-size: 1.25rem;
-  line-height: 1.2;
-  font-weight: 600;
-  letter-spacing: 0.15px;
-  text-transform: uppercase;
-  margin-inline-start: 10px;
-`
-
-const Logo = ({ color }: { color?: CSSProperties['color'] }) => {
-  return (
-    <div className='flex items-center min-bs-[24px]'>
-      <MaterioLogo className='text-[22px] text-primary' />
-      <LogoText color={color}>{themeConfig.templateName}</LogoText>
-    </div>
-  )
-}
-
-export default Logo
diff --git a/typescript-version/src/components/layout/shared/ModeDropdown.tsx b/typescript-version/src/components/layout/shared/ModeDropdown.tsx
deleted file mode 100644
index c7da85844..000000000
--- a/typescript-version/src/components/layout/shared/ModeDropdown.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-'use client'
-
-// React Imports
-import { useRef, useState } from 'react'
-
-// MUI Imports
-import Tooltip from '@mui/material/Tooltip'
-import IconButton from '@mui/material/IconButton'
-
-// Hook Imports
-import { useSettings } from '@core/hooks/useSettings'
-
-const ModeDropdown = () => {
-  // States
-  const [tooltipOpen, setTooltipOpen] = useState(false)
-
-  // Refs
-  const anchorRef = useRef<HTMLButtonElement>(null)
-
-  // Hooks
-  const { settings, updateSettings } = useSettings()
-
-  const handleToggle = () => {
-    if (settings.mode === 'dark') {
-      updateSettings({ mode: 'light' })
-    }
-
-    if (settings.mode === 'light') {
-      updateSettings({ mode: 'dark' })
-    }
-  }
-
-  const getModeIcon = () => {
-    if (settings.mode === 'dark') {
-      return 'ri-moon-clear-line'
-    } else {
-      return 'ri-sun-line'
-    }
-  }
-
-  return (
-    <>
-      <Tooltip
-        title={settings.mode + ' Mode'}
-        onOpen={() => setTooltipOpen(true)}
-        onClose={() => setTooltipOpen(false)}
-        open={tooltipOpen}
-        PopperProps={{ className: 'capitalize' }}
-      >
-        <IconButton ref={anchorRef} onClick={handleToggle} className='text-textPrimary'>
-          <i className={getModeIcon()} />
-        </IconButton>
-      </Tooltip>
-    </>
-  )
-}
-
-export default ModeDropdown
diff --git a/typescript-version/src/components/layout/shared/UserDropdown.tsx b/typescript-version/src/components/layout/shared/UserDropdown.tsx
deleted file mode 100644
index c6e874edf..000000000
--- a/typescript-version/src/components/layout/shared/UserDropdown.tsx
+++ /dev/null
@@ -1,144 +0,0 @@
-'use client'
-
-// React Imports
-import { useRef, useState } from 'react'
-import type { MouseEvent } from 'react'
-
-// Next Imports
-import { useRouter } from 'next/navigation'
-
-// MUI Imports
-import { styled } from '@mui/material/styles'
-import Badge from '@mui/material/Badge'
-import Avatar from '@mui/material/Avatar'
-import Popper from '@mui/material/Popper'
-import Fade from '@mui/material/Fade'
-import Paper from '@mui/material/Paper'
-import ClickAwayListener from '@mui/material/ClickAwayListener'
-import MenuList from '@mui/material/MenuList'
-import Typography from '@mui/material/Typography'
-import Divider from '@mui/material/Divider'
-import MenuItem from '@mui/material/MenuItem'
-import Button from '@mui/material/Button'
-
-// Styled component for badge content
-const BadgeContentSpan = styled('span')({
-  width: 8,
-  height: 8,
-  borderRadius: '50%',
-  cursor: 'pointer',
-  backgroundColor: 'var(--mui-palette-success-main)',
-  boxShadow: '0 0 0 2px var(--mui-palette-background-paper)'
-})
-
-const UserDropdown = () => {
-  // States
-  const [open, setOpen] = useState(false)
-
-  // Refs
-  const anchorRef = useRef<HTMLDivElement>(null)
-
-  // Hooks
-  const router = useRouter()
-
-  const handleDropdownOpen = () => {
-    !open ? setOpen(true) : setOpen(false)
-  }
-
-  const handleDropdownClose = (event?: MouseEvent<HTMLLIElement> | (MouseEvent | TouchEvent), url?: string) => {
-    if (url) {
-      router.push(url)
-    }
-
-    if (anchorRef.current && anchorRef.current.contains(event?.target as HTMLElement)) {
-      return
-    }
-
-    setOpen(false)
-  }
-
-  return (
-    <>
-      <Badge
-        ref={anchorRef}
-        overlap='circular'
-        badgeContent={<BadgeContentSpan onClick={handleDropdownOpen} />}
-        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
-        className='mis-2'
-      >
-        <Avatar
-          ref={anchorRef}
-          alt='John Doe'
-          src='/images/avatars/1.png'
-          onClick={handleDropdownOpen}
-          className='cursor-pointer bs-[38px] is-[38px]'
-        />
-      </Badge>
-      <Popper
-        open={open}
-        transition
-        disablePortal
-        placement='bottom-end'
-        anchorEl={anchorRef.current}
-        className='min-is-[240px] !mbs-4 z-[1]'
-      >
-        {({ TransitionProps, placement }) => (
-          <Fade
-            {...TransitionProps}
-            style={{
-              transformOrigin: placement === 'bottom-end' ? 'right top' : 'left top'
-            }}
-          >
-            <Paper className='shadow-lg'>
-              <ClickAwayListener onClickAway={e => handleDropdownClose(e as MouseEvent | TouchEvent)}>
-                <MenuList>
-                  <div className='flex items-center plb-2 pli-4 gap-2' tabIndex={-1}>
-                    <Avatar alt='John Doe' src='/images/avatars/1.png' />
-                    <div className='flex items-start flex-col'>
-                      <Typography className='font-medium' color='text.primary'>
-                        John Doe
-                      </Typography>
-                      <Typography variant='caption'>Admin</Typography>
-                    </div>
-                  </div>
-                  <Divider className='mlb-1' />
-                  <MenuItem className='gap-3' onClick={e => handleDropdownClose(e)}>
-                    <i className='ri-user-3-line' />
-                    <Typography color='text.primary'>My Profile</Typography>
-                  </MenuItem>
-                  <MenuItem className='gap-3' onClick={e => handleDropdownClose(e)}>
-                    <i className='ri-settings-4-line' />
-                    <Typography color='text.primary'>Settings</Typography>
-                  </MenuItem>
-                  <MenuItem className='gap-3' onClick={e => handleDropdownClose(e)}>
-                    <i className='ri-money-dollar-circle-line' />
-                    <Typography color='text.primary'>Pricing</Typography>
-                  </MenuItem>
-                  <MenuItem className='gap-3' onClick={e => handleDropdownClose(e)}>
-                    <i className='ri-question-line' />
-                    <Typography color='text.primary'>FAQ</Typography>
-                  </MenuItem>
-                  <div className='flex items-center plb-2 pli-4'>
-                    <Button
-                      fullWidth
-                      variant='contained'
-                      color='error'
-                      size='small'
-                      endIcon={<i className='ri-logout-box-r-line' />}
-                      onClick={e => handleDropdownClose(e, '/login')}
-                      sx={{ '& .MuiButton-endIcon': { marginInlineStart: 1.5 } }}
-                    >
-                      Logout
-                    </Button>
-                  </div>
-                </MenuList>
-              </ClickAwayListener>
-            </Paper>
-          </Fade>
-        )}
-      </Popper>
-    </>
-  )
-}
-
-export default UserDropdown
diff --git a/typescript-version/src/components/layout/shared/search/index.tsx b/typescript-version/src/components/layout/shared/search/index.tsx
deleted file mode 100644
index e94e5a82b..000000000
--- a/typescript-version/src/components/layout/shared/search/index.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-'use client'
-
-// MUI Imports
-import IconButton from '@mui/material/IconButton'
-
-// Hook Imports
-import useVerticalNav from '@menu/hooks/useVerticalNav'
-
-const NavSearch = () => {
-  // Hooks
-  const { isBreakpointReached } = useVerticalNav()
-
-  return isBreakpointReached ? (
-    <IconButton className='text-textPrimary'>
-      <i className='ri-search-line' />
-    </IconButton>
-  ) : (
-    <div className='flex items-center cursor-pointer gap-2'>
-      <IconButton className='text-textPrimary'>
-        <i className='ri-search-line' />
-      </IconButton>
-      <div className='whitespace-nowrap select-none text-textDisabled'>Search ⌘K</div>
-    </div>
-  )
-}
-
-export default NavSearch
diff --git a/typescript-version/src/components/layout/vertical/Footer.tsx b/typescript-version/src/components/layout/vertical/Footer.tsx
deleted file mode 100644
index 32138dc8e..000000000
--- a/typescript-version/src/components/layout/vertical/Footer.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-// Component Imports
-import LayoutFooter from '@layouts/components/vertical/Footer'
-import FooterContent from './FooterContent'
-
-const Footer = () => {
-  return (
-    <LayoutFooter>
-      <FooterContent />
-    </LayoutFooter>
-  )
-}
-
-export default Footer
diff --git a/typescript-version/src/components/layout/vertical/FooterContent.tsx b/typescript-version/src/components/layout/vertical/FooterContent.tsx
deleted file mode 100644
index 249369c36..000000000
--- a/typescript-version/src/components/layout/vertical/FooterContent.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-'use client'
-
-// Next Imports
-import Link from 'next/link'
-
-// Third-party Imports
-import classnames from 'classnames'
-
-// Hook Imports
-import useVerticalNav from '@menu/hooks/useVerticalNav'
-
-// Util Imports
-import { verticalLayoutClasses } from '@layouts/utils/layoutClasses'
-
-const FooterContent = () => {
-  // Hooks
-  const { isBreakpointReached } = useVerticalNav()
-
-  return (
-    <div
-      className={classnames(verticalLayoutClasses.footerContent, 'flex items-center justify-between flex-wrap gap-4')}
-    >
-      <p>
-        <span>{`© ${new Date().getFullYear()}, Made with `}</span>
-        <span>{`❤️`}</span>
-        <span>{` by `}</span>
-        <Link href='https://themeselection.com' target='_blank' className='text-primary'>
-          ThemeSelection
-        </Link>
-      </p>
-      {!isBreakpointReached && (
-        <div className='flex items-center gap-4'>
-          <Link href='https://themeselection.com/license' target='_blank' className='text-primary'>
-            License
-          </Link>
-          <Link href='https://themeselection.com' target='_blank' className='text-primary'>
-            More Themes
-          </Link>
-          <Link href={process.env.NEXT_PUBLIC_DOCS_URL as string} target='_blank' className='text-primary'>
-            Documentation
-          </Link>
-          <Link
-            href={`https://github.com/themeselection/${process.env.NEXT_PUBLIC_REPO_NAME}/issues`}
-            target='_blank'
-            className='text-primary'
-          >
-            Support
-          </Link>
-        </div>
-      )}
-    </div>
-  )
-}
-
-export default FooterContent
diff --git a/typescript-version/src/components/layout/vertical/NavToggle.tsx b/typescript-version/src/components/layout/vertical/NavToggle.tsx
deleted file mode 100644
index 72e618e59..000000000
--- a/typescript-version/src/components/layout/vertical/NavToggle.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-'use client'
-
-// Hook Imports
-import useVerticalNav from '@menu/hooks/useVerticalNav'
-
-const NavToggle = () => {
-  // Hooks
-  const { toggleVerticalNav, isBreakpointReached } = useVerticalNav()
-
-  const handleClick = () => {
-    toggleVerticalNav()
-  }
-
-  return (
-    <>
-      {/* <i className='ri-menu-line text-xl cursor-pointer' onClick={handleClick} /> */}
-      {/* Comment following code and uncomment above code in order to toggle menu on desktop screens as well */}
-      {isBreakpointReached && <i className='ri-menu-line text-xl cursor-pointer' onClick={handleClick} />}
-    </>
-  )
-}
-
-export default NavToggle
diff --git a/typescript-version/src/components/layout/vertical/Navbar.tsx b/typescript-version/src/components/layout/vertical/Navbar.tsx
deleted file mode 100644
index 7146c4f2d..000000000
--- a/typescript-version/src/components/layout/vertical/Navbar.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-// Component Imports
-import LayoutNavbar from '@layouts/components/vertical/Navbar'
-import NavbarContent from './NavbarContent'
-
-const Navbar = () => {
-  return (
-    <LayoutNavbar>
-      <NavbarContent />
-    </LayoutNavbar>
-  )
-}
-
-export default Navbar
diff --git a/typescript-version/src/components/layout/vertical/NavbarContent.tsx b/typescript-version/src/components/layout/vertical/NavbarContent.tsx
deleted file mode 100644
index ced3bc919..000000000
--- a/typescript-version/src/components/layout/vertical/NavbarContent.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-// Next Imports
-import Link from 'next/link'
-
-// MUI Imports
-import IconButton from '@mui/material/IconButton'
-
-// Third-party Imports
-import classnames from 'classnames'
-
-// Component Imports
-import NavToggle from './NavToggle'
-import NavSearch from '@components/layout/shared/search'
-import ModeDropdown from '@components/layout/shared/ModeDropdown'
-import UserDropdown from '@components/layout/shared/UserDropdown'
-
-// Util Imports
-import { verticalLayoutClasses } from '@layouts/utils/layoutClasses'
-
-const NavbarContent = () => {
-  return (
-    <div className={classnames(verticalLayoutClasses.navbarContent, 'flex items-center justify-between gap-4 is-full')}>
-      <div className='flex items-center gap-2 sm:gap-4'>
-        <NavToggle />
-        <NavSearch />
-      </div>
-      <div className='flex items-center'>
-        <Link
-          className='flex mie-2'
-          href={`https://github.com/themeselection/${process.env.NEXT_PUBLIC_REPO_NAME}`}
-          target='_blank'
-        >
-          <img
-            height={24}
-            alt='GitHub Repo stars'
-            src={`https://img.shields.io/github/stars/themeselection/${process.env.NEXT_PUBLIC_REPO_NAME}`}
-          />
-        </Link>
-        <ModeDropdown />
-        <IconButton className='text-textPrimary'>
-          <i className='ri-notification-2-line' />
-        </IconButton>
-        <UserDropdown />
-      </div>
-    </div>
-  )
-}
-
-export default NavbarContent
diff --git a/typescript-version/src/components/layout/vertical/Navigation.tsx b/typescript-version/src/components/layout/vertical/Navigation.tsx
deleted file mode 100644
index 99cce88c9..000000000
--- a/typescript-version/src/components/layout/vertical/Navigation.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-'use client'
-
-// React Imports
-import { useRef } from 'react'
-
-// Next Imports
-import Link from 'next/link'
-
-// MUI Imports
-import { styled, useTheme } from '@mui/material/styles'
-
-// Component Imports
-import VerticalNav, { NavHeader } from '@menu/vertical-menu'
-import VerticalMenu from './VerticalMenu'
-import Logo from '@components/layout/shared/Logo'
-
-// Hook Imports
-import useVerticalNav from '@menu/hooks/useVerticalNav'
-
-// Style Imports
-import navigationCustomStyles from '@core/styles/vertical/navigationCustomStyles'
-
-const StyledBoxForShadow = styled('div')(({ theme }) => ({
-  top: 60,
-  left: -8,
-  zIndex: 2,
-  opacity: 0,
-  position: 'absolute',
-  pointerEvents: 'none',
-  width: 'calc(100% + 15px)',
-  height: theme.mixins.toolbar.minHeight,
-  transition: 'opacity .15s ease-in-out',
-  background: `linear-gradient(var(--mui-palette-background-default) 5%, rgb(var(--mui-palette-background-defaultChannel) / 0.85) 30%, rgb(var(--mui-palette-background-defaultChannel) / 0.5) 65%, rgb(var(--mui-palette-background-defaultChannel) / 0.3) 75%, transparent)`,
-  '&.scrolled': {
-    opacity: 1
-  }
-}))
-
-const Navigation = () => {
-  // Hooks
-  const theme = useTheme()
-  const { isBreakpointReached, toggleVerticalNav } = useVerticalNav()
-
-  // Refs
-  const shadowRef = useRef(null)
-
-  const scrollMenu = (container: any, isPerfectScrollbar: boolean) => {
-    container = isBreakpointReached || !isPerfectScrollbar ? container.target : container
-
-    if (shadowRef && container.scrollTop > 0) {
-      // @ts-ignore
-      if (!shadowRef.current.classList.contains('scrolled')) {
-        // @ts-ignore
-        shadowRef.current.classList.add('scrolled')
-      }
-    } else {
-      // @ts-ignore
-      shadowRef.current.classList.remove('scrolled')
-    }
-  }
-
-  return (
-    // eslint-disable-next-line lines-around-comment
-    // Sidebar Vertical Menu
-    <VerticalNav customStyles={navigationCustomStyles(theme)}>
-      {/* Nav Header including Logo & nav toggle icons  */}
-      <NavHeader>
-        <Link href='/'>
-          <Logo />
-        </Link>
-        {isBreakpointReached && <i className='ri-close-line text-xl' onClick={() => toggleVerticalNav(false)} />}
-      </NavHeader>
-      <StyledBoxForShadow ref={shadowRef} />
-      <VerticalMenu scrollMenu={scrollMenu} />
-    </VerticalNav>
-  )
-}
-
-export default Navigation
diff --git a/typescript-version/src/components/layout/vertical/VerticalMenu.tsx b/typescript-version/src/components/layout/vertical/VerticalMenu.tsx
deleted file mode 100644
index ceb5741d1..000000000
--- a/typescript-version/src/components/layout/vertical/VerticalMenu.tsx
+++ /dev/null
@@ -1,289 +0,0 @@
-// MUI Imports
-import Chip from '@mui/material/Chip'
-import { useTheme } from '@mui/material/styles'
-
-// Third-party Imports
-import PerfectScrollbar from 'react-perfect-scrollbar'
-
-// Type Imports
-import type { VerticalMenuContextProps } from '@menu/components/vertical-menu/Menu'
-
-// Component Imports
-import { Menu, SubMenu, MenuItem, MenuSection } from '@menu/vertical-menu'
-
-// Hook Imports
-import useVerticalNav from '@menu/hooks/useVerticalNav'
-
-// Styled Component Imports
-import StyledVerticalNavExpandIcon from '@menu/styles/vertical/StyledVerticalNavExpandIcon'
-
-// Style Imports
-import menuItemStyles from '@core/styles/vertical/menuItemStyles'
-import menuSectionStyles from '@core/styles/vertical/menuSectionStyles'
-
-type RenderExpandIconProps = {
-  open?: boolean
-  transitionDuration?: VerticalMenuContextProps['transitionDuration']
-}
-
-const RenderExpandIcon = ({ open, transitionDuration }: RenderExpandIconProps) => (
-  <StyledVerticalNavExpandIcon open={open} transitionDuration={transitionDuration}>
-    <i className='ri-arrow-right-s-line' />
-  </StyledVerticalNavExpandIcon>
-)
-
-const VerticalMenu = ({ scrollMenu }: { scrollMenu: (container: any, isPerfectScrollbar: boolean) => void }) => {
-  // Hooks
-  const theme = useTheme()
-  const { isBreakpointReached, transitionDuration } = useVerticalNav()
-
-  const ScrollWrapper = isBreakpointReached ? 'div' : PerfectScrollbar
-
-  return (
-    // eslint-disable-next-line lines-around-comment
-    /* Custom scrollbar instead of browser scroll, remove if you want browser scroll only */
-    <ScrollWrapper
-      {...(isBreakpointReached
-        ? {
-            className: 'bs-full overflow-y-auto overflow-x-hidden',
-            onScroll: container => scrollMenu(container, false)
-          }
-        : {
-            options: { wheelPropagation: false, suppressScrollX: true },
-            onScrollY: container => scrollMenu(container, true)
-          })}
-    >
-      {/* Incase you also want to scroll NavHeader to scroll with Vertical Menu, remove NavHeader from above and paste it below this comment */}
-      {/* Vertical Menu */}
-      <Menu
-        menuItemStyles={menuItemStyles(theme)}
-        renderExpandIcon={({ open }) => <RenderExpandIcon open={open} transitionDuration={transitionDuration} />}
-        renderExpandedMenuItemIcon={{ icon: <i className='ri-circle-line' /> }}
-        menuSectionStyles={menuSectionStyles(theme)}
-      >
-        <SubMenu
-          label='Dashboards'
-          icon={<i className='ri-home-smile-line' />}
-          suffix={<Chip label='5' size='small' color='error' />}
-        >
-          <MenuItem
-            href={`${process.env.NEXT_PUBLIC_PRO_URL}/dashboards/crm`}
-            suffix={<Chip label='Pro' size='small' color='primary' variant='tonal' />}
-            target='_blank'
-          >
-            CRM
-          </MenuItem>
-          <MenuItem href='/'>Analytics</MenuItem>
-          <MenuItem
-            href={`${process.env.NEXT_PUBLIC_PRO_URL}/dashboards/ecommerce`}
-            suffix={<Chip label='Pro' size='small' color='primary' variant='tonal' />}
-            target='_blank'
-          >
-            eCommerce
-          </MenuItem>
-          <MenuItem
-            href={`${process.env.NEXT_PUBLIC_PRO_URL}/dashboards/academy`}
-            suffix={<Chip label='Pro' size='small' color='primary' variant='tonal' />}
-            target='_blank'
-          >
-            Academy
-          </MenuItem>
-          <MenuItem
-            href={`${process.env.NEXT_PUBLIC_PRO_URL}/dashboards/logistics`}
-            suffix={<Chip label='Pro' size='small' color='primary' variant='tonal' />}
-            target='_blank'
-          >
-            Logistics
-          </MenuItem>
-        </SubMenu>
-        <SubMenu
-          label='Front Pages'
-          icon={<i className='ri-file-copy-line' />}
-          suffix={<Chip label='Pro' size='small' color='primary' variant='tonal' />}
-        >
-          <MenuItem href={`${process.env.NEXT_PUBLIC_PRO_URL}/front-pages/landing-page`} target='_blank'>
-            Landing
-          </MenuItem>
-          <MenuItem href={`${process.env.NEXT_PUBLIC_PRO_URL}/front-pages/pricing`} target='_blank'>
-            Pricing
-          </MenuItem>
-          <MenuItem href={`${process.env.NEXT_PUBLIC_PRO_URL}/front-pages/payment`} target='_blank'>
-            Payment
-          </MenuItem>
-          <MenuItem href={`${process.env.NEXT_PUBLIC_PRO_URL}/front-pages/checkout`} target='_blank'>
-            Checkout
-          </MenuItem>
-          <MenuItem href={`${process.env.NEXT_PUBLIC_PRO_URL}/front-pages/help-center`} target='_blank'>
-            Help Center
-          </MenuItem>
-        </SubMenu>
-        <MenuSection label='Apps & Pages'>
-          <MenuItem
-            href={`${process.env.NEXT_PUBLIC_PRO_URL}/apps/email`}
-            icon={<i className='ri-mail-open-line' />}
-            suffix={<Chip label='Pro' size='small' color='primary' variant='tonal' />}
-            target='_blank'
-          >
-            Email
-          </MenuItem>
-          <MenuItem
-            href={`${process.env.NEXT_PUBLIC_PRO_URL}/apps/chat`}
-            icon={<i className='ri-wechat-line' />}
-            suffix={<Chip label='Pro' size='small' color='primary' variant='tonal' />}
-            target='_blank'
-          >
-            Chat
-          </MenuItem>
-          <MenuItem
-            href={`${process.env.NEXT_PUBLIC_PRO_URL}/apps/calendar`}
-            icon={<i className='ri-calendar-line' />}
-            suffix={<Chip label='Pro' size='small' color='primary' variant='tonal' />}
-            target='_blank'
-          >
-            Calendar
-          </MenuItem>
-          <MenuItem
-            href={`${process.env.NEXT_PUBLIC_PRO_URL}/apps/kanban`}
-            icon={<i className='ri-drag-drop-line' />}
-            suffix={<Chip label='Pro' size='small' color='primary' variant='tonal' />}
-            target='_blank'
-          >
-            Kanban
-          </MenuItem>
-          <MenuItem href='/account-settings' icon={<i className='ri-user-settings-line' />}>
-            Account Settings
-          </MenuItem>
-          <SubMenu label='Auth Pages' icon={<i className='ri-shield-keyhole-line' />}>
-            <MenuItem href='/login' target='_blank'>
-              Login
-            </MenuItem>
-            <MenuItem href='/register' target='_blank'>
-              Register
-            </MenuItem>
-            <MenuItem href='/forgot-password' target='_blank'>
-              Forgot Password
-            </MenuItem>
-          </SubMenu>
-          <SubMenu label='Miscellaneous' icon={<i className='ri-question-line' />}>
-            <MenuItem href='/error' target='_blank'>
-              Error
-            </MenuItem>
-            <MenuItem href='/under-maintenance' target='_blank'>
-              Under Maintenance
-            </MenuItem>
-          </SubMenu>
-          <MenuItem href='/card-basic' icon={<i className='ri-bar-chart-box-line' />}>
-            Cards
-          </MenuItem>
-        </MenuSection>
-        <MenuSection label='Forms & Tables'>
-          <MenuItem href='/form-layouts' icon={<i className='ri-layout-4-line' />}>
-            Form Layouts
-          </MenuItem>
-          <MenuItem
-            href={`${process.env.NEXT_PUBLIC_PRO_URL}/forms/form-validation`}
-            icon={<i className='ri-checkbox-multiple-line' />}
-            suffix={<Chip label='Pro' size='small' color='primary' variant='tonal' />}
-            target='_blank'
-          >
-            Form Validation
-          </MenuItem>
-          <MenuItem
-            href={`${process.env.NEXT_PUBLIC_PRO_URL}/forms/form-wizard`}
-            icon={<i className='ri-git-commit-line' />}
-            suffix={<Chip label='Pro' size='small' color='primary' variant='tonal' />}
-            target='_blank'
-          >
-            Form Wizard
-          </MenuItem>
-          <MenuItem
-            href={`${process.env.NEXT_PUBLIC_PRO_URL}/react-table`}
-            icon={<i className='ri-table-alt-line' />}
-            suffix={<Chip label='Pro' size='small' color='primary' variant='tonal' />}
-            target='_blank'
-          >
-            React Table
-          </MenuItem>
-          <MenuItem
-            href={`${process.env.NEXT_PUBLIC_DOCS_URL}/docs/user-interface/form-elements`}
-            icon={<i className='ri-radio-button-line' />}
-            suffix={<i className='ri-external-link-line text-xl' />}
-            target='_blank'
-          >
-            Form Elements
-          </MenuItem>
-          <MenuItem
-            href={`${process.env.NEXT_PUBLIC_DOCS_URL}/docs/user-interface/mui-table`}
-            icon={<i className='ri-table-2' />}
-            suffix={<i className='ri-external-link-line text-xl' />}
-            target='_blank'
-          >
-            MUI Tables
-          </MenuItem>
-        </MenuSection>
-        <MenuSection label='Misc'>
-          <MenuItem
-            href={`${process.env.NEXT_PUBLIC_DOCS_URL}/docs/user-interface/foundation`}
-            icon={<i className='ri-pantone-line' />}
-            suffix={<i className='ri-external-link-line text-xl' />}
-            target='_blank'
-          >
-            Foundation
-          </MenuItem>
-          <MenuItem
-            href={`${process.env.NEXT_PUBLIC_DOCS_URL}/docs/user-interface/components`}
-            icon={<i className='ri-toggle-line' />}
-            suffix={<i className='ri-external-link-line text-xl' />}
-            target='_blank'
-          >
-            Components
-          </MenuItem>
-          <MenuItem
-            href={`${process.env.NEXT_PUBLIC_DOCS_URL}/docs/menu-examples/overview`}
-            icon={<i className='ri-menu-search-line' />}
-            suffix={<i className='ri-external-link-line text-xl' />}
-            target='_blank'
-          >
-            Menu Examples
-          </MenuItem>
-          <MenuItem
-            href={`https://github.com/themeselection/${process.env.NEXT_PUBLIC_REPO_NAME}/issues`}
-            icon={<i className='ri-lifebuoy-line' />}
-            suffix={<i className='ri-external-link-line text-xl' />}
-            target='_blank'
-          >
-            Raise Support
-          </MenuItem>
-          <MenuItem
-            href={process.env.NEXT_PUBLIC_DOCS_URL}
-            icon={<i className='ri-book-line' />}
-            suffix={<i className='ri-external-link-line text-xl' />}
-            target='_blank'
-          >
-            Documentation
-          </MenuItem>
-          <SubMenu label='Others' icon={<i className='ri-more-line' />}>
-            <MenuItem suffix={<Chip label='New' size='small' color='info' />}>Item With Badge</MenuItem>
-            <MenuItem
-              href='https://themeselection.com'
-              target='_blank'
-              suffix={<i className='ri-external-link-line text-xl' />}
-            >
-              External Link
-            </MenuItem>
-            <SubMenu label='Menu Levels'>
-              <MenuItem>Menu Level 2</MenuItem>
-              <SubMenu label='Menu Level 2'>
-                <MenuItem>Menu Level 3</MenuItem>
-                <MenuItem>Menu Level 3</MenuItem>
-              </SubMenu>
-            </SubMenu>
-            <MenuItem disabled>Disabled Menu</MenuItem>
-          </SubMenu>
-        </MenuSection>
-      </Menu>
-    </ScrollWrapper>
-  )
-}
-
-export default VerticalMenu
diff --git a/typescript-version/src/components/stepper-dot/index.tsx b/typescript-version/src/components/stepper-dot/index.tsx
deleted file mode 100644
index 96c417333..000000000
--- a/typescript-version/src/components/stepper-dot/index.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-// MUI Imports
-import type { StepIconProps } from '@mui/material/StepIcon'
-
-// Third-party Imports
-import classnames from 'classnames'
-
-// Style Imports
-import styles from './styles.module.css'
-
-const StepperCustomDot = (props: StepIconProps) => {
-  // Props
-  const { active, completed, error } = props
-
-  if (error) {
-    return <i className='ri-alert-fill text-xl scale-[1.2] text-error' />
-  } else if (completed) {
-    return (
-      <div
-        className={classnames(styles.stepperCustomDot, 'flex items-center justify-center', {
-          [styles.completedStepperCustomDot]: completed
-        })}
-      >
-        <i className='ri-check-line text-sm text-white' />
-      </div>
-    )
-  } else {
-    return <div className={classnames(styles.stepperCustomDot, { [styles.activeStepperCustomDot]: active })} />
-  }
-}
-
-export default StepperCustomDot
diff --git a/typescript-version/src/components/stepper-dot/styles.module.css b/typescript-version/src/components/stepper-dot/styles.module.css
deleted file mode 100644
index 7b101162d..000000000
--- a/typescript-version/src/components/stepper-dot/styles.module.css
+++ /dev/null
@@ -1,23 +0,0 @@
-.stepperCustomDot {
-  inline-size: 20px;
-  block-size: 20px;
-  border-width: 3px;
-  border-radius: 50%;
-  border-style: solid;
-  border-color: var(--mui-palette-primary-main);
-
-  &.activeStepperCustomDot {
-    border-width: 5px;
-    border-color: var(--mui-palette-primary-main);
-    background-color: var(--mui-palette-common-white);
-  }
-
-  &.completedStepperCustomDot {
-    background-color: var(--mui-palette-primary-main);
-    border-color: var(--mui-palette-primary-main);
-  }
-}
-
-[data-mui-color-scheme='dark'] .activeStepperCustomDot {
-  background-color: var(--mui-palette-background-default);
-}
diff --git a/typescript-version/src/components/theme/ModeChanger.tsx b/typescript-version/src/components/theme/ModeChanger.tsx
deleted file mode 100644
index c32b40fee..000000000
--- a/typescript-version/src/components/theme/ModeChanger.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-// React Imports
-import { useEffect } from 'react'
-
-// MUI Imports
-import { useColorScheme } from '@mui/material/styles'
-
-// Hook Imports
-import { useSettings } from '@core/hooks/useSettings'
-
-const ModeChanger = () => {
-  // Hooks
-  const { setMode } = useColorScheme()
-  const { settings } = useSettings()
-
-  useEffect(() => {
-    if (settings.mode) {
-      setMode(settings.mode)
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [settings.mode])
-
-  return null
-}
-
-export default ModeChanger
diff --git a/typescript-version/src/components/theme/index.tsx b/typescript-version/src/components/theme/index.tsx
deleted file mode 100644
index 0ce6d607a..000000000
--- a/typescript-version/src/components/theme/index.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-'use client'
-
-// React Imports
-import { useMemo } from 'react'
-
-// MUI Imports
-import { deepmerge } from '@mui/utils'
-import {
-  Experimental_CssVarsProvider as CssVarsProvider,
-  experimental_extendTheme as extendTheme,
-  lighten,
-  darken
-} from '@mui/material/styles'
-import { AppRouterCacheProvider } from '@mui/material-nextjs/v14-appRouter'
-import CssBaseline from '@mui/material/CssBaseline'
-import type {} from '@mui/material/themeCssVarsAugmentation' //! Do not remove this import otherwise you will get type errors while making a production build
-import type {} from '@mui/lab/themeAugmentation' //! Do not remove this import otherwise you will get type errors while making a production build
-
-// Type Imports
-import type { ChildrenType, Direction } from '@core/types'
-
-// Component Imports
-import ModeChanger from './ModeChanger'
-
-// Config Imports
-import themeConfig from '@configs/themeConfig'
-import primaryColorConfig from '@configs/primaryColorConfig'
-
-// Hook Imports
-import { useSettings } from '@core/hooks/useSettings'
-
-// Core Theme Imports
-import defaultCoreTheme from '@core/theme'
-
-type Props = ChildrenType & {
-  direction: Direction
-}
-
-const ThemeProvider = (props: Props) => {
-  // Props
-  const { children, direction } = props
-
-  // Hooks
-  const { settings } = useSettings()
-
-  // Merge the primary color scheme override with the core theme
-  const theme = useMemo(() => {
-    const newColorScheme = {
-      colorSchemes: {
-        light: {
-          palette: {
-            primary: {
-              main: primaryColorConfig[0].main,
-              light: lighten(primaryColorConfig[0].main as string, 0.2),
-              dark: darken(primaryColorConfig[0].main as string, 0.1)
-            }
-          }
-        },
-        dark: {
-          palette: {
-            primary: {
-              main: primaryColorConfig[0].main,
-              light: lighten(primaryColorConfig[0].main as string, 0.2),
-              dark: darken(primaryColorConfig[0].main as string, 0.1)
-            }
-          }
-        }
-      }
-    }
-
-    const coreTheme = deepmerge(defaultCoreTheme(settings.mode || 'light', direction), newColorScheme)
-
-    return extendTheme(coreTheme)
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [settings.mode])
-
-  return (
-    <AppRouterCacheProvider options={{ prepend: true }}>
-      <CssVarsProvider
-        theme={theme}
-        defaultMode={settings.mode}
-        modeStorageKey={`${themeConfig.templateName.toLowerCase().split(' ').join('-')}-mui-template-mode`}
-      >
-        <>
-          <ModeChanger />
-          <CssBaseline />
-          {children}
-        </>
-      </CssVarsProvider>
-    </AppRouterCacheProvider>
-  )
-}
-
-export default ThemeProvider
diff --git a/typescript-version/src/components/theme/mergedTheme.ts b/typescript-version/src/components/theme/mergedTheme.ts
deleted file mode 100644
index 6f57c234f..000000000
--- a/typescript-version/src/components/theme/mergedTheme.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-/*
- * We recommend using the merged theme if you want to override our core theme.
- * This means you can use our core theme and override it with your own customizations.
- * Write your overrides in the userTheme object in this file.
- * The userTheme object is merged with the coreTheme object within this file.
- * Export this file and import it in the `@components/theme/index.tsx` file to use the merged theme.
- */
-
-// MUI Imports
-import { deepmerge } from '@mui/utils'
-import type { Theme } from '@mui/material/styles'
-
-// Type Imports
-import type { Settings } from '@core/contexts/settingsContext'
-import type { SystemMode } from '@core/types'
-
-// Core Theme Imports
-import coreTheme from '@core/theme'
-
-const mergedTheme = (settings: Settings, mode: SystemMode, direction: Theme['direction']) => {
-  // Vars
-  const userTheme = {
-    // Write your overrides here.
-  } as Theme
-
-  return deepmerge(coreTheme(mode, direction), userTheme)
-}
-
-export default mergedTheme
diff --git a/typescript-version/src/components/theme/types.ts b/typescript-version/src/components/theme/types.ts
deleted file mode 100644
index 3c2dda29a..000000000
--- a/typescript-version/src/components/theme/types.ts
+++ /dev/null
@@ -1,124 +0,0 @@
-/*
- ! This file is for adding custom types to the MUI theme, components and props.
- ! Please do not remove anything from this file as it may break the application.
- ! You can add your own custom types to the MUI theme, components and props in this file
- ! but you must be aware about the MUI theme structure along with MUI CSS Variables.
- ! MUI Theme: https://mui.com/material-ui/customization/default-theme/
- ! MUI CSS Variables: https://mui.com/material-ui/experimental-api/css-theme-variables/overview/
- */
-
-// MUI Imports
-import {} from '@mui/material/styles'
-
-declare module '@mui/material/styles' {
-  // eslint-disable-next-line lines-around-comment
-  // Theme
-  interface Theme {
-    shape: {
-      borderRadius: number
-      customBorderRadius: {
-        xs: number
-        sm: number
-        md: number
-        lg: number
-        xl: number
-      }
-    }
-    customShadows: {
-      xs: string
-      sm: string
-      md: string
-      lg: string
-      xl: string
-    }
-    mainColorChannels: {
-      light: string
-      dark: string
-      lightShadow: string
-      darkShadow: string
-    }
-  }
-  interface ThemeOptions {
-    shape?: {
-      borderRadius?: number
-      customBorderRadius?: {
-        xs?: number
-        sm?: number
-        md?: number
-        lg?: number
-        xl?: number
-      }
-    }
-    customShadows?: {
-      xs?: string
-      sm?: string
-      md?: string
-      lg?: string
-      xl?: string
-    }
-    mainColorChannels?: {
-      light?: string
-      dark?: string
-      lightShadow?: string
-      darkShadow?: string
-    }
-  }
-
-  // Palette Color
-  interface PaletteColor {
-    lighterOpacity?: string
-    lightOpacity?: string
-    mainOpacity?: string
-    darkOpacity?: string
-    darkerOpacity?: string
-  }
-  interface SimplePaletteColorOptions {
-    lighterOpacity?: string
-    lightOpacity?: string
-    mainOpacity?: string
-    darkOpacity?: string
-    darkerOpacity?: string
-  }
-
-  // Palette
-  interface Palette {
-    customColors: {
-      bodyBg: string
-      chatBg: string
-      greyLightBg: string
-      inputBorder: string
-      tableHeaderBg: string
-      tooltipText: string
-      trackBg: string
-    }
-  }
-  interface PaletteOptions {
-    customColors?: {
-      bodyBg?: string
-      chatBg?: string
-      greyLightBg?: string
-      inputBorder?: string
-      tableHeaderBg?: string
-      tooltipText?: string
-      trackBg?: string
-    }
-  }
-}
-
-declare module '@mui/material/Chip' {
-  interface ChipPropsVariantOverrides {
-    tonal: true
-  }
-}
-
-declare module '@mui/material/Pagination' {
-  interface PaginationPropsVariantOverrides {
-    tonal: true
-  }
-}
-
-declare module '@mui/lab/TimelineDot' {
-  interface TimelineDotPropsVariantOverrides {
-    tonal: true
-  }
-}
diff --git a/typescript-version/src/components/theme/userTheme.ts b/typescript-version/src/components/theme/userTheme.ts
deleted file mode 100644
index f8a677c5e..000000000
--- a/typescript-version/src/components/theme/userTheme.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-/*
- ! We do not recommend using your own custom theme built from scratch.
- ! Instead, we recommend using the merged theme (src/components/theme/mergedTheme.ts) and customizing it as per your needs.
- ! If you still want to use your own custom theme, you must be aware about the MUI theme structure along with MUI CSS Variables.
- ! MUI Theme: https://mui.com/material-ui/customization/default-theme/
- ! MUI CSS Variables: https://mui.com/material-ui/experimental-api/css-theme-variables/overview/
- ! Export this file and import it in the `@components/theme/index.tsx` file to use only this theme.
- */
-
-// MUI Imports
-import type { Theme } from '@mui/material/styles'
-
-// Type Imports
-/* Enable following line and the `settings` parameter in the below `userTheme`
-   function in order to access `settings` context value in your custom theme object
- */
-// import type { Settings } from '@core/contexts/settingsContext'
-
-const userTheme = (/* settings: Settings */): Theme => {
-  return {
-    // Write your custom theme object here.
-  } as Theme
-}
-
-export default userTheme
diff --git a/typescript-version/src/components/upgrade-to-pro-button/index.tsx b/typescript-version/src/components/upgrade-to-pro-button/index.tsx
deleted file mode 100644
index c5a704963..000000000
--- a/typescript-version/src/components/upgrade-to-pro-button/index.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-// MUI Imports
-import Tooltip from '@mui/material/Tooltip'
-import Card from '@mui/material/Card'
-import CardHeader from '@mui/material/CardHeader'
-import CardContent from '@mui/material/CardContent'
-import Typography from '@mui/material/Typography'
-import CardActions from '@mui/material/CardActions'
-import Button from '@mui/material/Button'
-
-// Third-party Imports
-import classnames from 'classnames'
-
-// Config Imports
-import themeConfig from '@configs/themeConfig'
-
-// Style Imports
-import styles from './styles.module.css'
-
-const TooltipContent = () => {
-  return (
-    <Card>
-      <a href='https://themeselection.com/item/materio-mui-nextjs-admin-template' target='_blank' className='flex'>
-        <img
-          src='https://cdn.themeselection.com/ts-assets/materio/materio-mui-nextjs-admin-template/banner/banner.png'
-          alt='Upgrade to Pro'
-          className='w-full'
-        />
-      </a>
-      <CardHeader title={`${themeConfig.templateName} - MUI Next.js Admin Template`} />
-      <CardContent>
-        <Typography color='textSecondary' className='mbe-4'>
-          {`${themeConfig.templateName} Admin is the most developer friendly & highly customizable Admin Dashboard Template based on MUI and Next.js.`}
-        </Typography>
-        <Typography color='textSecondary'>Click on below button to explore the PRO version.</Typography>
-      </CardContent>
-      <CardActions>
-        <Button variant='contained' href={process.env.NEXT_PUBLIC_PRO_URL as string} target='_blank'>
-          Demo
-        </Button>
-        <Button
-          variant='outlined'
-          href='https://themeselection.com/item/materio-mui-nextjs-admin-template'
-          target='_blank'
-          className='mis-4'
-        >
-          Download
-        </Button>
-      </CardActions>
-    </Card>
-  )
-}
-
-const UpgradeToProButton = () => {
-  return (
-    <div className={classnames(styles.wrapper, 'mui-fixed')}>
-      <Tooltip
-        title={<TooltipContent />}
-        placement='top-end'
-        slotProps={{ tooltip: { style: { padding: 0, backgroundColor: 'transparent', maxInlineSize: 400 } } }}
-      >
-        <a
-          className={styles.button}
-          role='button'
-          href='https://themeselection.com/item/materio-mui-nextjs-admin-template'
-          target='_blank'
-        >
-          Upgrade to Pro
-          <span className={styles.buttonInner} />
-        </a>
-      </Tooltip>
-    </div>
-  )
-}
-
-export default UpgradeToProButton
diff --git a/typescript-version/src/components/upgrade-to-pro-button/styles.module.css b/typescript-version/src/components/upgrade-to-pro-button/styles.module.css
deleted file mode 100644
index aef06ee83..000000000
--- a/typescript-version/src/components/upgrade-to-pro-button/styles.module.css
+++ /dev/null
@@ -1,66 +0,0 @@
-.wrapper {
-  position: fixed;
-  inset-inline-end: 1.5rem;
-  inset-block-end: 3.5rem;
-  z-index: 18;
-}
-
-.button,
-.buttonInner {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  outline: 0px;
-  border: 0px;
-  margin: 0px;
-  cursor: pointer;
-  vertical-align: middle;
-  appearance: none;
-  text-decoration: none;
-  line-height: 1.2;
-  font-size: 0.9375rem;
-  letter-spacing: 0.43px;
-  font-weight: 500;
-  border-radius: 6px;
-  color: rgba(255, 255, 255, 0.9);
-  min-inline-size: 50px;
-  text-transform: none;
-  padding-block: 0.625rem;
-  padding-inline: 1.25rem;
-  background: linear-gradient(-45deg, #ffa63d, #ff3d77, #338aff, #3cf0c5);
-  background-size: 600%;
-  animation: anime 12s linear infinite;
-}
-
-.button {
-  position: relative;
-  &:hover {
-    color: white;
-    text-decoration: none;
-  }
-
-  .buttonInner {
-    position: absolute;
-    inset: 0;
-    z-index: -1;
-    filter: blur(12px);
-    opacity: 0;
-    transition: opacity 200ms ease-in-out;
-  }
-  &:not(:hover) .buttonInner {
-    opacity: 0.8;
-  }
-}
-
-@keyframes anime {
-  0% {
-    background-position: 0% 50%;
-  }
-  50% {
-    background-position: 100% 50%;
-  }
-  100% {
-    background-position: 0% 50%;
-  }
-}
diff --git a/typescript-version/src/configs/primaryColorConfig.ts b/typescript-version/src/configs/primaryColorConfig.ts
deleted file mode 100644
index c50833c47..000000000
--- a/typescript-version/src/configs/primaryColorConfig.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-export type PrimaryColorConfig = {
-  name?: string
-  light?: string
-  main: string
-  dark?: string
-}
-
-// Primary color config object
-const primaryColorConfig: PrimaryColorConfig[] = [
-  {
-    name: 'primary-1',
-    light: '#A379FF',
-    main: '#8C57FF',
-    dark: '#7E4EE6'
-  }
-]
-
-export default primaryColorConfig
diff --git a/typescript-version/src/configs/themeConfig.ts b/typescript-version/src/configs/themeConfig.ts
deleted file mode 100644
index 18047b2a7..000000000
--- a/typescript-version/src/configs/themeConfig.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-/*
- * If you change the following items in the config object, you will not see any effect in the local development server
- * as these are stored in the cookie (cookie has the highest priority over the themeConfig):
- * 1. mode
- *
- * To see the effect of the above items, you can click on the reset button from the Customizer
- * which is on the top-right corner of the customizer besides the close button.
- * This will reset the cookie to the values provided in the config object below.
- *
- * Another way is to clear the cookie from the browser's Application/Storage tab and then reload the page.
- */
-
-// Type Imports
-import type { Mode } from '@core/types'
-
-export type Config = {
-  templateName: string
-  settingsCookieName: string
-  mode: Mode
-  layoutPadding: number
-  compactContentWidth: number
-  disableRipple: boolean
-}
-
-const themeConfig: Config = {
-  templateName: 'Materio',
-  settingsCookieName: 'materio-mui-next-free-demo',
-  mode: 'light', // 'light', 'dark'
-  layoutPadding: 24, // Common padding for header, content, footer layout components (in px)
-  compactContentWidth: 1440, // in px
-  disableRipple: false // true, false
-}
-
-export default themeConfig
diff --git a/typescript-version/src/libs/ApexCharts.tsx b/typescript-version/src/libs/ApexCharts.tsx
deleted file mode 100644
index 8510130a5..000000000
--- a/typescript-version/src/libs/ApexCharts.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import dynamic from 'next/dynamic'
-
-const Chart = dynamic(() => import('react-apexcharts'), { ssr: false })
-
-export default Chart
diff --git a/typescript-version/src/libs/styles/AppReactApexCharts.tsx b/typescript-version/src/libs/styles/AppReactApexCharts.tsx
deleted file mode 100644
index 554a6efff..000000000
--- a/typescript-version/src/libs/styles/AppReactApexCharts.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-'use client'
-
-// MUI Imports
-import Box from '@mui/material/Box'
-import { styled } from '@mui/material/styles'
-import type { BoxProps } from '@mui/material/Box'
-
-// Third-party Imports
-import type { Props } from 'react-apexcharts'
-
-// Component Imports
-import ReactApexcharts from '@/libs/ApexCharts'
-
-type ApexChartWrapperProps = Props & {
-  boxProps?: BoxProps
-}
-
-// Styled Components
-const ApexChartWrapper = styled(Box)<BoxProps>(({ theme }) => ({
-  '& .apexcharts-canvas': {
-    "& line[stroke='transparent']": {
-      display: 'none'
-    },
-    '& .apexcharts-tooltip': {
-      boxShadow: 'var(--mui-shadows-3)',
-      borderColor: 'var(--mui-palette-divider)',
-      background: 'var(--mui-palette-background-paper)',
-      ...(theme.direction === 'rtl' && {
-        '.apexcharts-tooltip-marker': {
-          marginInlineEnd: 10,
-          marginInlineStart: 0
-        },
-        '.apexcharts-tooltip-text-y-value': {
-          marginInlineStart: 5,
-          marginInlineEnd: 0
-        }
-      }),
-      '& .apexcharts-tooltip-title': {
-        fontWeight: 600,
-        borderColor: 'var(--mui-palette-divider)',
-        background: 'var(--mui-palette-background-paper)'
-      },
-      '&.apexcharts-theme-light': {
-        color: 'var(--mui-palette-text-primary)'
-      },
-      '&.apexcharts-theme-dark': {
-        color: 'var(--mui-palette-common-white)'
-      },
-      '& .apexcharts-tooltip-series-group:first-of-type': {
-        paddingBottom: 0
-      },
-      '& .bar-chart': {
-        padding: theme.spacing(2, 2.5)
-      }
-    },
-    '& .apexcharts-xaxistooltip': {
-      borderColor: 'var(--mui-palette-divider)',
-
-      // background: theme.palette.mode === 'light' ? theme.palette.grey[50] : theme.palette.customColors.bodyBg,
-      '&:after': {
-        // borderBottomColor: theme.palette.mode === 'light' ? theme.palette.grey[50] : theme.palette.customColors.bodyBg
-      },
-      '&:before': {
-        borderBottomColor: 'var(--mui-palette-divider)'
-      }
-    },
-    '& .apexcharts-yaxistooltip': {
-      borderColor: 'var(--mui-palette-divider)',
-
-      // background: theme.palette.mode === 'light' ? theme.palette.grey[50] : theme.palette.customColors.bodyBg,
-      '&:after': {
-        // borderLeftColor: theme.palette.mode === 'light' ? theme.palette.grey[50] : theme.palette.customColors.bodyBg
-      },
-      '&:before': {
-        borderLeftColor: 'var(--mui-palette-divider)'
-      }
-    },
-    '& .apexcharts-xaxistooltip-text, & .apexcharts-yaxistooltip-text': {
-      color: 'var(--mui-palette-text-primary)'
-    },
-    '& .apexcharts-yaxis .apexcharts-yaxis-texts-g .apexcharts-yaxis-label': {
-      textAnchor: theme.direction === 'rtl' ? 'start' : undefined
-    },
-    '& .apexcharts-text, & .apexcharts-tooltip-text, & .apexcharts-datalabel-label, & .apexcharts-datalabel, & .apexcharts-xaxistooltip-text, & .apexcharts-yaxistooltip-text, & .apexcharts-legend-text':
-      {
-        fontFamily: `${theme.typography.fontFamily} !important`
-      },
-    '& .apexcharts-pie-label': {
-      filter: 'none'
-    },
-    '& .apexcharts-marker': {
-      boxShadow: 'none'
-    }
-  }
-}))
-
-const AppReactApexCharts = (props: ApexChartWrapperProps) => {
-  // Props
-  const { boxProps, ...rest } = props
-
-  return (
-    <ApexChartWrapper {...boxProps}>
-      <ReactApexcharts {...rest} />
-    </ApexChartWrapper>
-  )
-}
-
-export default AppReactApexCharts
diff --git a/typescript-version/src/types/pages/widgetTypes.ts b/typescript-version/src/types/pages/widgetTypes.ts
deleted file mode 100644
index ea510ace5..000000000
--- a/typescript-version/src/types/pages/widgetTypes.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-// Type Imports
-import type { ThemeColor } from '@core/types'
-import type { OptionsMenuType } from '@core/components/option-menu/types'
-import type { CustomAvatarProps } from '@core/components/mui/Avatar'
-
-export type CardStatsVerticalProps = {
-  title: string
-  stats: string
-  avatarIcon: string
-  subtitle: string
-  avatarColor?: ThemeColor
-  trendNumber: string
-  trend?: 'positive' | 'negative'
-  avatarSkin?: CustomAvatarProps['skin']
-  avatarSize?: number
-  moreOptions?: OptionsMenuType
-}
diff --git a/typescript-version/src/utils/rgbaToHex.ts b/typescript-version/src/utils/rgbaToHex.ts
deleted file mode 100644
index 24cb988cc..000000000
--- a/typescript-version/src/utils/rgbaToHex.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-export const rgbaToHex = (colorStr: string, forceRemoveAlpha: boolean = false) => {
-  // Check if the input string contains '/'
-  const hasSlash = colorStr.includes('/')
-
-  if (hasSlash) {
-    // Extract the RGBA values from the input string
-    const rgbaValues = colorStr.match(/(\d+)\s+(\d+)\s+(\d+)\s+\/\s+([\d.]+)/)
-
-    if (!rgbaValues) {
-      return colorStr // Return the original string if it doesn't match the expected format
-    }
-
-    const [red, green, blue, alpha] = rgbaValues.slice(1, 5).map(parseFloat)
-
-    // Convert the RGB values to hexadecimal format
-    const redHex = red.toString(16).padStart(2, '0')
-    const greenHex = green.toString(16).padStart(2, '0')
-    const blueHex = blue.toString(16).padStart(2, '0')
-
-    // Convert alpha to a hexadecimal format (assuming it's already a decimal value in the range [0, 1])
-    const alphaHex = forceRemoveAlpha
-      ? ''
-      : Math.round(alpha * 255)
-          .toString(16)
-          .padStart(2, '0')
-
-    // Combine the hexadecimal values to form the final hex color string
-    const hexColor = `#${redHex}${greenHex}${blueHex}${alphaHex}`
-
-    return hexColor
-  } else {
-    // Use the second code block for the case when '/' is not present
-    return (
-      '#' +
-      colorStr
-        .replace(/^rgba?\(|\s+|\)$/g, '') // Get's rgba / rgb string values
-        .split(',') // splits them at ","
-        .filter((string, index) => !forceRemoveAlpha || index !== 3)
-        .map(string => parseFloat(string)) // Converts them to numbers
-        .map((number, index) => (index === 3 ? Math.round(number * 255) : number)) // Converts alpha to 255 number
-        .map(number => number.toString(16)) // Converts numbers to hex
-        .map(string => (string.length === 1 ? '0' + string : string)) // Adds 0 when length of one number is 1
-        .join('')
-    )
-  }
-}
diff --git a/typescript-version/src/views/ForgotPassword.tsx b/typescript-version/src/views/ForgotPassword.tsx
deleted file mode 100644
index 5355debe5..000000000
--- a/typescript-version/src/views/ForgotPassword.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-'use client'
-
-// Next Imports
-import Link from 'next/link'
-
-// MUI Imports
-import Card from '@mui/material/Card'
-import CardContent from '@mui/material/CardContent'
-import Typography from '@mui/material/Typography'
-import TextField from '@mui/material/TextField'
-import Button from '@mui/material/Button'
-
-// Type Imports
-import type { Mode } from '@core/types'
-
-// Component Imports
-import Form from '@components/Form'
-import DirectionalIcon from '@components/DirectionalIcon'
-import Illustrations from '@components/Illustrations'
-import Logo from '@components/layout/shared/Logo'
-
-// Hook Imports
-import { useImageVariant } from '@core/hooks/useImageVariant'
-
-const ForgotPassword = ({ mode }: { mode: Mode }) => {
-  // Vars
-  const darkImg = '/images/pages/auth-v1-mask-dark.png'
-  const lightImg = '/images/pages/auth-v1-mask-light.png'
-
-  // Hooks
-  const authBackground = useImageVariant(mode, lightImg, darkImg)
-
-  return (
-    <div className='flex flex-col justify-center items-center min-bs-[100dvh] relative p-6'>
-      <Card className='flex flex-col sm:is-[450px]'>
-        <CardContent className='p-6 sm:!p-12'>
-          <Link href='/' className='flex justify-center items-center mbe-6'>
-            <Logo />
-          </Link>
-          <Typography variant='h4'>Forgot Password 🔒</Typography>
-          <div className='flex flex-col gap-5'>
-            <Typography className='mbs-1'>
-              Enter your email and we&#39;ll send you instructions to reset your password
-            </Typography>
-            <Form noValidate autoComplete='off' className='flex flex-col gap-5'>
-              <TextField autoFocus fullWidth label='Email' />
-              <Button fullWidth variant='contained' type='submit'>
-                Send reset link
-              </Button>
-              <Typography className='flex justify-center items-center' color='primary'>
-                <Link href='/login' className='flex items-center'>
-                  <DirectionalIcon ltrIconClass='ri-arrow-left-s-line' rtlIconClass='ri-arrow-right-s-line' />
-                  <span>Back to Login</span>
-                </Link>
-              </Typography>
-            </Form>
-          </div>
-        </CardContent>
-      </Card>
-      <Illustrations maskImg={{ src: authBackground }} />
-    </div>
-  )
-}
-
-export default ForgotPassword
diff --git a/typescript-version/src/views/Login.tsx b/typescript-version/src/views/Login.tsx
deleted file mode 100644
index 525be6e28..000000000
--- a/typescript-version/src/views/Login.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-'use client'
-
-// React Imports
-import { useState } from 'react'
-import type { FormEvent } from 'react'
-
-// Next Imports
-import Link from 'next/link'
-import { useRouter } from 'next/navigation'
-
-// MUI Imports
-import Card from '@mui/material/Card'
-import CardContent from '@mui/material/CardContent'
-import Typography from '@mui/material/Typography'
-import TextField from '@mui/material/TextField'
-import IconButton from '@mui/material/IconButton'
-import InputAdornment from '@mui/material/InputAdornment'
-import Checkbox from '@mui/material/Checkbox'
-import Button from '@mui/material/Button'
-import FormControlLabel from '@mui/material/FormControlLabel'
-import Divider from '@mui/material/Divider'
-
-// Type Imports
-import type { Mode } from '@core/types'
-
-// Component Imports
-import Logo from '@components/layout/shared/Logo'
-import Illustrations from '@components/Illustrations'
-
-// Config Imports
-import themeConfig from '@configs/themeConfig'
-
-// Hook Imports
-import { useImageVariant } from '@core/hooks/useImageVariant'
-
-const Login = ({ mode }: { mode: Mode }) => {
-  // States
-  const [isPasswordShown, setIsPasswordShown] = useState(false)
-
-  // Vars
-  const darkImg = '/images/pages/auth-v1-mask-dark.png'
-  const lightImg = '/images/pages/auth-v1-mask-light.png'
-
-  // Hooks
-  const router = useRouter()
-  const authBackground = useImageVariant(mode, lightImg, darkImg)
-
-  const handleClickShowPassword = () => setIsPasswordShown(show => !show)
-
-  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
-    e.preventDefault()
-    router.push('/')
-  }
-
-  return (
-    <div className='flex flex-col justify-center items-center min-bs-[100dvh] relative p-6'>
-      <Card className='flex flex-col sm:is-[450px]'>
-        <CardContent className='p-6 sm:!p-12'>
-          <Link href='/' className='flex justify-center items-center mbe-6'>
-            <Logo />
-          </Link>
-          <div className='flex flex-col gap-5'>
-            <div>
-              <Typography variant='h4'>{`Welcome to ${themeConfig.templateName}!👋🏻`}</Typography>
-              <Typography className='mbs-1'>Please sign-in to your account and start the adventure</Typography>
-            </div>
-            <form noValidate autoComplete='off' onSubmit={handleSubmit} className='flex flex-col gap-5'>
-              <TextField autoFocus fullWidth label='Email' />
-              <TextField
-                fullWidth
-                label='Password'
-                id='outlined-adornment-password'
-                type={isPasswordShown ? 'text' : 'password'}
-                InputProps={{
-                  endAdornment: (
-                    <InputAdornment position='end'>
-                      <IconButton
-                        size='small'
-                        edge='end'
-                        onClick={handleClickShowPassword}
-                        onMouseDown={e => e.preventDefault()}
-                      >
-                        <i className={isPasswordShown ? 'ri-eye-off-line' : 'ri-eye-line'} />
-                      </IconButton>
-                    </InputAdornment>
-                  )
-                }}
-              />
-              <div className='flex justify-between items-center gap-x-3 gap-y-1 flex-wrap'>
-                <FormControlLabel control={<Checkbox />} label='Remember me' />
-                <Typography className='text-end' color='primary' component={Link} href='/forgot-password'>
-                  Forgot password?
-                </Typography>
-              </div>
-              <Button fullWidth variant='contained' type='submit'>
-                Log In
-              </Button>
-              <div className='flex justify-center items-center flex-wrap gap-2'>
-                <Typography>New on our platform?</Typography>
-                <Typography component={Link} href='/register' color='primary'>
-                  Create an account
-                </Typography>
-              </div>
-              <Divider className='gap-3'>or</Divider>
-              <div className='flex justify-center items-center gap-2'>
-                <IconButton size='small' className='text-facebook'>
-                  <i className='ri-facebook-fill' />
-                </IconButton>
-                <IconButton size='small' className='text-twitter'>
-                  <i className='ri-twitter-fill' />
-                </IconButton>
-                <IconButton size='small' className='text-github'>
-                  <i className='ri-github-fill' />
-                </IconButton>
-                <IconButton size='small' className='text-googlePlus'>
-                  <i className='ri-google-fill' />
-                </IconButton>
-              </div>
-            </form>
-          </div>
-        </CardContent>
-      </Card>
-      <Illustrations maskImg={{ src: authBackground }} />
-    </div>
-  )
-}
-
-export default Login
diff --git a/typescript-version/src/views/NotFound.tsx b/typescript-version/src/views/NotFound.tsx
deleted file mode 100644
index efb6b0861..000000000
--- a/typescript-version/src/views/NotFound.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-'use client'
-
-// Next Imports
-import Link from 'next/link'
-
-// MUI Imports
-import Button from '@mui/material/Button'
-import Typography from '@mui/material/Typography'
-
-// Type Imports
-import type { Mode } from '@core/types'
-
-// Component Imports
-import Illustrations from '@components/Illustrations'
-
-// Hook Imports
-import { useImageVariant } from '@core/hooks/useImageVariant'
-
-const NotFound = ({ mode }: { mode: Mode }) => {
-  // Vars
-  const darkImg = '/images/pages/misc-mask-dark.png'
-  const lightImg = '/images/pages/misc-mask-light.png'
-
-  // Hooks
-  const miscBackground = useImageVariant(mode, lightImg, darkImg)
-
-  return (
-    <div className='flex items-center justify-center min-bs-[100dvh] relative p-6 overflow-x-hidden'>
-      <div className='flex items-center flex-col text-center gap-10'>
-        <div className='flex flex-col gap-2 is-[90vw] sm:is-[unset]'>
-          <Typography className='font-medium text-8xl' color='text.primary'>
-            404
-          </Typography>
-          <Typography variant='h4'>Page Not Found ⚠️</Typography>
-          <Typography>We couldn&#39;t find the page you are looking for.</Typography>
-        </div>
-        <img
-          alt='error-illustration'
-          src='/images/illustrations/characters/5.png'
-          className='object-cover bs-[400px] md:bs-[450px] lg:bs-[500px]'
-        />
-        <Button href='/' component={Link} variant='contained'>
-          Back to Home
-        </Button>
-      </div>
-      <Illustrations maskImg={{ src: miscBackground }} />
-    </div>
-  )
-}
-
-export default NotFound
diff --git a/typescript-version/src/views/Register.tsx b/typescript-version/src/views/Register.tsx
deleted file mode 100644
index fff477200..000000000
--- a/typescript-version/src/views/Register.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-'use client'
-
-// React Imports
-import { useState } from 'react'
-
-// Next Imports
-import Link from 'next/link'
-
-// MUI Imports
-import Card from '@mui/material/Card'
-import CardContent from '@mui/material/CardContent'
-import Typography from '@mui/material/Typography'
-import TextField from '@mui/material/TextField'
-import IconButton from '@mui/material/IconButton'
-import InputAdornment from '@mui/material/InputAdornment'
-import Checkbox from '@mui/material/Checkbox'
-import Button from '@mui/material/Button'
-import FormControlLabel from '@mui/material/FormControlLabel'
-import Divider from '@mui/material/Divider'
-
-// Type Imports
-import type { Mode } from '@core/types'
-
-// Component Imports
-import Illustrations from '@components/Illustrations'
-import Logo from '@components/layout/shared/Logo'
-
-// Hook Imports
-import { useImageVariant } from '@core/hooks/useImageVariant'
-
-const Register = ({ mode }: { mode: Mode }) => {
-  // States
-  const [isPasswordShown, setIsPasswordShown] = useState(false)
-
-  // Vars
-  const darkImg = '/images/pages/auth-v1-mask-dark.png'
-  const lightImg = '/images/pages/auth-v1-mask-light.png'
-
-  // Hooks
-  const authBackground = useImageVariant(mode, lightImg, darkImg)
-
-  const handleClickShowPassword = () => setIsPasswordShown(show => !show)
-
-  return (
-    <div className='flex flex-col justify-center items-center min-bs-[100dvh] relative p-6'>
-      <Card className='flex flex-col sm:is-[450px]'>
-        <CardContent className='p-6 sm:!p-12'>
-          <Link href='/' className='flex justify-center items-start mbe-6'>
-            <Logo />
-          </Link>
-          <Typography variant='h4'>Adventure starts here 🚀</Typography>
-          <div className='flex flex-col gap-5'>
-            <Typography className='mbs-1'>Make your app management easy and fun!</Typography>
-            <form noValidate autoComplete='off' onSubmit={e => e.preventDefault()} className='flex flex-col gap-5'>
-              <TextField autoFocus fullWidth label='Username' />
-              <TextField fullWidth label='Email' />
-              <TextField
-                fullWidth
-                label='Password'
-                type={isPasswordShown ? 'text' : 'password'}
-                InputProps={{
-                  endAdornment: (
-                    <InputAdornment position='end'>
-                      <IconButton
-                        size='small'
-                        edge='end'
-                        onClick={handleClickShowPassword}
-                        onMouseDown={e => e.preventDefault()}
-                      >
-                        <i className={isPasswordShown ? 'ri-eye-off-line' : 'ri-eye-line'} />
-                      </IconButton>
-                    </InputAdornment>
-                  )
-                }}
-              />
-              <FormControlLabel
-                control={<Checkbox />}
-                label={
-                  <>
-                    <span>I agree to </span>
-                    <Link className='text-primary' href='/' onClick={e => e.preventDefault()}>
-                      privacy policy & terms
-                    </Link>
-                  </>
-                }
-              />
-              <Button fullWidth variant='contained' type='submit'>
-                Sign Up
-              </Button>
-              <div className='flex justify-center items-center flex-wrap gap-2'>
-                <Typography>Already have an account?</Typography>
-                <Typography component={Link} href='/login' color='primary'>
-                  Sign in instead
-                </Typography>
-              </div>
-              <Divider className='gap-3'>Or</Divider>
-              <div className='flex justify-center items-center gap-2'>
-                <IconButton size='small' className='text-facebook'>
-                  <i className='ri-facebook-fill' />
-                </IconButton>
-                <IconButton size='small' className='text-twitter'>
-                  <i className='ri-twitter-fill' />
-                </IconButton>
-                <IconButton size='small' className='text-github'>
-                  <i className='ri-github-fill' />
-                </IconButton>
-                <IconButton size='small' className='text-googlePlus'>
-                  <i className='ri-google-fill' />
-                </IconButton>
-              </div>
-            </form>
-          </div>
-        </CardContent>
-      </Card>
-      <Illustrations maskImg={{ src: authBackground }} />
-    </div>
-  )
-}
-
-export default Register
diff --git a/typescript-version/src/views/account-settings/account/AccountDelete.tsx b/typescript-version/src/views/account-settings/account/AccountDelete.tsx
deleted file mode 100644
index e1f500591..000000000
--- a/typescript-version/src/views/account-settings/account/AccountDelete.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-// MUI Imports
-import Card from '@mui/material/Card'
-import CardHeader from '@mui/material/CardHeader'
-import CardContent from '@mui/material/CardContent'
-import FormControlLabel from '@mui/material/FormControlLabel'
-import Checkbox from '@mui/material/Checkbox'
-import Button from '@mui/material/Button'
-
-const AccountDelete = () => {
-  return (
-    <Card>
-      <CardHeader title='Delete Account' />
-      <CardContent className='flex flex-col items-start gap-6'>
-        <FormControlLabel control={<Checkbox />} label='I confirm my account deactivation' />
-        <Button variant='contained' color='error' type='submit'>
-          Deactivate Account
-        </Button>
-      </CardContent>
-    </Card>
-  )
-}
-
-export default AccountDelete
diff --git a/typescript-version/src/views/account-settings/account/AccountDetails.tsx b/typescript-version/src/views/account-settings/account/AccountDetails.tsx
deleted file mode 100644
index bf5be8b1c..000000000
--- a/typescript-version/src/views/account-settings/account/AccountDetails.tsx
+++ /dev/null
@@ -1,301 +0,0 @@
-'use client'
-
-// React Imports
-import { useState } from 'react'
-import type { ChangeEvent } from 'react'
-
-// MUI Imports
-import Grid from '@mui/material/Grid'
-import Card from '@mui/material/Card'
-import CardContent from '@mui/material/CardContent'
-import Button from '@mui/material/Button'
-import Typography from '@mui/material/Typography'
-import TextField from '@mui/material/TextField'
-import FormControl from '@mui/material/FormControl'
-import InputLabel from '@mui/material/InputLabel'
-import Select from '@mui/material/Select'
-import MenuItem from '@mui/material/MenuItem'
-import Chip from '@mui/material/Chip'
-import type { SelectChangeEvent } from '@mui/material/Select'
-
-type Data = {
-  firstName: string
-  lastName: string
-  email: string
-  organization: string
-  phoneNumber: number | string
-  address: string
-  state: string
-  zipCode: string
-  country: string
-  language: string
-  timezone: string
-  currency: string
-}
-
-// Vars
-const initialData: Data = {
-  firstName: 'John',
-  lastName: 'Doe',
-  email: 'john.doe@example.com',
-  organization: 'ThemeSelection',
-  phoneNumber: '+1 (917) 543-9876',
-  address: '123 Main St, New York, NY 10001',
-  state: 'New York',
-  zipCode: '634880',
-  country: 'usa',
-  language: 'arabic',
-  timezone: 'gmt-12',
-  currency: 'usd'
-}
-
-const languageData = ['English', 'Arabic', 'French', 'German', 'Portuguese']
-
-const AccountDetails = () => {
-  // States
-  const [formData, setFormData] = useState<Data>(initialData)
-  const [fileInput, setFileInput] = useState<string>('')
-  const [imgSrc, setImgSrc] = useState<string>('/images/avatars/1.png')
-  const [language, setLanguage] = useState<string[]>(['English'])
-
-  const handleDelete = (value: string) => {
-    setLanguage(current => current.filter(item => item !== value))
-  }
-
-  const handleChange = (event: SelectChangeEvent<string[]>) => {
-    setLanguage(event.target.value as string[])
-  }
-
-  const handleFormChange = (field: keyof Data, value: Data[keyof Data]) => {
-    setFormData({ ...formData, [field]: value })
-  }
-
-  const handleFileInputChange = (file: ChangeEvent) => {
-    const reader = new FileReader()
-    const { files } = file.target as HTMLInputElement
-
-    if (files && files.length !== 0) {
-      reader.onload = () => setImgSrc(reader.result as string)
-      reader.readAsDataURL(files[0])
-
-      if (reader.result !== null) {
-        setFileInput(reader.result as string)
-      }
-    }
-  }
-
-  const handleFileInputReset = () => {
-    setFileInput('')
-    setImgSrc('/images/avatars/1.png')
-  }
-
-  return (
-    <Card>
-      <CardContent className='mbe-5'>
-        <div className='flex max-sm:flex-col items-center gap-6'>
-          <img height={100} width={100} className='rounded' src={imgSrc} alt='Profile' />
-          <div className='flex flex-grow flex-col gap-4'>
-            <div className='flex flex-col sm:flex-row gap-4'>
-              <Button component='label' size='small' variant='contained' htmlFor='account-settings-upload-image'>
-                Upload New Photo
-                <input
-                  hidden
-                  type='file'
-                  value={fileInput}
-                  accept='image/png, image/jpeg'
-                  onChange={handleFileInputChange}
-                  id='account-settings-upload-image'
-                />
-              </Button>
-              <Button size='small' variant='outlined' color='error' onClick={handleFileInputReset}>
-                Reset
-              </Button>
-            </div>
-            <Typography>Allowed JPG, GIF or PNG. Max size of 800K</Typography>
-          </div>
-        </div>
-      </CardContent>
-      <CardContent>
-        <form onSubmit={e => e.preventDefault()}>
-          <Grid container spacing={5}>
-            <Grid item xs={12} sm={6}>
-              <TextField
-                fullWidth
-                label='First Name'
-                value={formData.firstName}
-                placeholder='John'
-                onChange={e => handleFormChange('firstName', e.target.value)}
-              />
-            </Grid>
-            <Grid item xs={12} sm={6}>
-              <TextField
-                fullWidth
-                label='Last Name'
-                value={formData.lastName}
-                placeholder='Doe'
-                onChange={e => handleFormChange('lastName', e.target.value)}
-              />
-            </Grid>
-            <Grid item xs={12} sm={6}>
-              <TextField
-                fullWidth
-                label='Email'
-                value={formData.email}
-                placeholder='john.doe@gmail.com'
-                onChange={e => handleFormChange('email', e.target.value)}
-              />
-            </Grid>
-            <Grid item xs={12} sm={6}>
-              <TextField
-                fullWidth
-                label='Organization'
-                value={formData.organization}
-                placeholder='ThemeSelection'
-                onChange={e => handleFormChange('organization', e.target.value)}
-              />
-            </Grid>
-            <Grid item xs={12} sm={6}>
-              <TextField
-                fullWidth
-                label='Phone Number'
-                value={formData.phoneNumber}
-                placeholder='+1 (234) 567-8901'
-                onChange={e => handleFormChange('phoneNumber', e.target.value)}
-              />
-            </Grid>
-            <Grid item xs={12} sm={6}>
-              <TextField
-                fullWidth
-                label='Address'
-                value={formData.address}
-                placeholder='Address'
-                onChange={e => handleFormChange('address', e.target.value)}
-              />
-            </Grid>
-            <Grid item xs={12} sm={6}>
-              <TextField
-                fullWidth
-                label='State'
-                value={formData.state}
-                placeholder='New York'
-                onChange={e => handleFormChange('state', e.target.value)}
-              />
-            </Grid>
-            <Grid item xs={12} sm={6}>
-              <TextField
-                fullWidth
-                type='number'
-                label='Zip Code'
-                value={formData.zipCode}
-                placeholder='123456'
-                onChange={e => handleFormChange('zipCode', e.target.value)}
-              />
-            </Grid>
-            <Grid item xs={12} sm={6}>
-              <FormControl fullWidth>
-                <InputLabel>Country</InputLabel>
-                <Select
-                  label='Country'
-                  value={formData.country}
-                  onChange={e => handleFormChange('country', e.target.value)}
-                >
-                  <MenuItem value='usa'>USA</MenuItem>
-                  <MenuItem value='uk'>UK</MenuItem>
-                  <MenuItem value='australia'>Australia</MenuItem>
-                  <MenuItem value='germany'>Germany</MenuItem>
-                </Select>
-              </FormControl>
-            </Grid>
-            <Grid item xs={12} sm={6}>
-              <FormControl fullWidth>
-                <InputLabel>Language</InputLabel>
-                <Select
-                  multiple
-                  label='Language'
-                  value={language}
-                  onChange={handleChange}
-                  renderValue={selected => (
-                    <div className='flex flex-wrap gap-2'>
-                      {(selected as string[]).map(value => (
-                        <Chip
-                          key={value}
-                          clickable
-                          deleteIcon={
-                            <i className='ri-close-circle-fill' onMouseDown={event => event.stopPropagation()} />
-                          }
-                          size='small'
-                          label={value}
-                          onDelete={() => handleDelete(value)}
-                        />
-                      ))}
-                    </div>
-                  )}
-                >
-                  {languageData.map(name => (
-                    <MenuItem key={name} value={name}>
-                      {name}
-                    </MenuItem>
-                  ))}
-                </Select>
-              </FormControl>
-            </Grid>
-            <Grid item xs={12} sm={6}>
-              <FormControl fullWidth>
-                <InputLabel>TimeZone</InputLabel>
-                <Select
-                  label='TimeZone'
-                  value={formData.timezone}
-                  onChange={e => handleFormChange('timezone', e.target.value)}
-                  MenuProps={{ PaperProps: { style: { maxHeight: 250 } } }}
-                >
-                  <MenuItem value='gmt-12'>(GMT-12:00) International Date Line West</MenuItem>
-                  <MenuItem value='gmt-11'>(GMT-11:00) Midway Island, Samoa</MenuItem>
-                  <MenuItem value='gmt-10'>(GMT-10:00) Hawaii</MenuItem>
-                  <MenuItem value='gmt-09'>(GMT-09:00) Alaska</MenuItem>
-                  <MenuItem value='gmt-08'>(GMT-08:00) Pacific Time (US & Canada)</MenuItem>
-                  <MenuItem value='gmt-08-baja'>(GMT-08:00) Tijuana, Baja California</MenuItem>
-                  <MenuItem value='gmt-07'>(GMT-07:00) Chihuahua, La Paz, Mazatlan</MenuItem>
-                  <MenuItem value='gmt-07-mt'>(GMT-07:00) Mountain Time (US & Canada)</MenuItem>
-                  <MenuItem value='gmt-06'>(GMT-06:00) Central America</MenuItem>
-                  <MenuItem value='gmt-06-ct'>(GMT-06:00) Central Time (US & Canada)</MenuItem>
-                  <MenuItem value='gmt-06-mc'>(GMT-06:00) Guadalajara, Mexico City, Monterrey</MenuItem>
-                  <MenuItem value='gmt-06-sk'>(GMT-06:00) Saskatchewan</MenuItem>
-                  <MenuItem value='gmt-05'>(GMT-05:00) Bogota, Lima, Quito, Rio Branco</MenuItem>
-                  <MenuItem value='gmt-05-et'>(GMT-05:00) Eastern Time (US & Canada)</MenuItem>
-                  <MenuItem value='gmt-05-ind'>(GMT-05:00) Indiana (East)</MenuItem>
-                  <MenuItem value='gmt-04'>(GMT-04:00) Atlantic Time (Canada)</MenuItem>
-                  <MenuItem value='gmt-04-clp'>(GMT-04:00) Caracas, La Paz</MenuItem>
-                </Select>
-              </FormControl>
-            </Grid>
-            <Grid item xs={12} sm={6}>
-              <FormControl fullWidth>
-                <InputLabel>Currency</InputLabel>
-                <Select
-                  label='Currency'
-                  value={formData.currency}
-                  onChange={e => handleFormChange('currency', e.target.value)}
-                >
-                  <MenuItem value='usd'>USD</MenuItem>
-                  <MenuItem value='euro'>EUR</MenuItem>
-                  <MenuItem value='pound'>Pound</MenuItem>
-                  <MenuItem value='bitcoin'>Bitcoin</MenuItem>
-                </Select>
-              </FormControl>
-            </Grid>
-            <Grid item xs={12} className='flex gap-4 flex-wrap'>
-              <Button variant='contained' type='submit'>
-                Save Changes
-              </Button>
-              <Button variant='outlined' type='reset' color='secondary' onClick={() => setFormData(initialData)}>
-                Reset
-              </Button>
-            </Grid>
-          </Grid>
-        </form>
-      </CardContent>
-    </Card>
-  )
-}
-
-export default AccountDetails
diff --git a/typescript-version/src/views/account-settings/account/index.tsx b/typescript-version/src/views/account-settings/account/index.tsx
deleted file mode 100644
index 6590f2440..000000000
--- a/typescript-version/src/views/account-settings/account/index.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-// MUI Imports
-import Grid from '@mui/material/Grid'
-
-// Component Imports
-import AccountDetails from './AccountDetails'
-import AccountDelete from './AccountDelete'
-
-const Account = () => {
-  return (
-    <Grid container spacing={6}>
-      <Grid item xs={12}>
-        <AccountDetails />
-      </Grid>
-      <Grid item xs={12}>
-        <AccountDelete />
-      </Grid>
-    </Grid>
-  )
-}
-
-export default Account
diff --git a/typescript-version/src/views/account-settings/connections/index.tsx b/typescript-version/src/views/account-settings/connections/index.tsx
deleted file mode 100644
index a5d459bc2..000000000
--- a/typescript-version/src/views/account-settings/connections/index.tsx
+++ /dev/null
@@ -1,154 +0,0 @@
-// Next Imports
-import Link from 'next/link'
-
-// MUI Imports
-import Card from '@mui/material/Card'
-import CardHeader from '@mui/material/CardHeader'
-import CardContent from '@mui/material/CardContent'
-import Grid from '@mui/material/Grid'
-import Typography from '@mui/material/Typography'
-import Switch from '@mui/material/Switch'
-
-// Component Imports
-import CustomIconButton from '@core/components/mui/IconButton'
-
-type ConnectedAccountsType = {
-  title: string
-  logo: string
-  checked: boolean
-  subtitle: string
-}
-
-type SocialAccountsType = {
-  title: string
-  logo: string
-  username?: string
-  isConnected: boolean
-  href?: string
-}
-
-// Vars
-const connectedAccountsArr: ConnectedAccountsType[] = [
-  {
-    checked: true,
-    title: 'Google',
-    logo: '/images/logos/google.png',
-    subtitle: 'Calendar and Contacts'
-  },
-  {
-    checked: false,
-    title: 'Slack',
-    logo: '/images/logos/slack.png',
-    subtitle: 'Communications'
-  },
-  {
-    checked: true,
-    title: 'Github',
-    logo: '/images/logos/github.png',
-    subtitle: 'Manage your Git repositories'
-  },
-  {
-    checked: true,
-    title: 'Mailchimp',
-    subtitle: 'Email marketing service',
-    logo: '/images/logos/mailchimp.png'
-  },
-  {
-    title: 'Asana',
-    checked: false,
-    subtitle: 'Task Communication',
-    logo: '/images/logos/asana.png'
-  }
-]
-
-const socialAccountsArr: SocialAccountsType[] = [
-  {
-    title: 'Facebook',
-    isConnected: false,
-    logo: '/images/logos/facebook.png'
-  },
-  {
-    title: 'Twitter',
-    isConnected: true,
-    username: '@Theme_Selection',
-    logo: '/images/logos/twitter.png',
-    href: 'https://twitter.com/Theme_Selection'
-  },
-  {
-    title: 'Linkedin',
-    isConnected: true,
-    username: '@ThemeSelection',
-    logo: '/images/logos/linkedin.png',
-    href: 'https://in.linkedin.com/company/themeselection'
-  },
-  {
-    title: 'Dribbble',
-    isConnected: false,
-    logo: '/images/logos/dribbble.png'
-  },
-  {
-    title: 'Behance',
-    isConnected: false,
-    logo: '/images/logos/behance.png'
-  }
-]
-
-const Connections = () => {
-  return (
-    <Card>
-      <Grid container>
-        <Grid item xs={12} md={6}>
-          <CardHeader
-            title='Connected Accounts'
-            subheader='Display content from your connected accounts on your site'
-          />
-          <CardContent className='flex flex-col gap-4'>
-            {connectedAccountsArr.map((item, index) => (
-              <div key={index} className='flex items-center justify-between gap-4'>
-                <div className='flex flex-grow items-center gap-4'>
-                  <img height={32} width={32} src={item.logo} alt={item.title} />
-                  <div className='flex-grow'>
-                    <Typography className='font-medium' color='text.primary'>
-                      {item.title}
-                    </Typography>
-                    <Typography variant='body2'>{item.subtitle}</Typography>
-                  </div>
-                </div>
-                <Switch defaultChecked={item.checked} />
-              </div>
-            ))}
-          </CardContent>
-        </Grid>
-        <Grid item xs={12} md={6}>
-          <CardHeader title='Social Accounts' subheader='Display content from social accounts on your site' />
-          <CardContent className='flex flex-col gap-4'>
-            {socialAccountsArr.map((item, index) => (
-              <div key={index} className='flex items-center justify-between gap-4'>
-                <div className='flex flex-grow items-center gap-4'>
-                  <img height={32} width={32} src={item.logo} alt={item.title} />
-                  <div className='flex-grow'>
-                    <Typography className='font-medium' color='text.primary'>
-                      {item.title}
-                    </Typography>
-                    {item.isConnected ? (
-                      <Typography color='primary' component={Link} href={item.href || '/'} target='_blank'>
-                        {item.username}
-                      </Typography>
-                    ) : (
-                      <Typography variant='body2'>Not Connected</Typography>
-                    )}
-                  </div>
-                </div>
-                <CustomIconButton variant='outlined' color={item.isConnected ? 'error' : 'secondary'}>
-                  <i className={item.isConnected ? 'ri-delete-bin-7-line' : 'ri-links-line'} />
-                </CustomIconButton>
-              </div>
-            ))}
-          </CardContent>
-        </Grid>
-      </Grid>
-    </Card>
-  )
-}
-
-export default Connections
diff --git a/typescript-version/src/views/account-settings/index.tsx b/typescript-version/src/views/account-settings/index.tsx
deleted file mode 100644
index 4181f9fcc..000000000
--- a/typescript-version/src/views/account-settings/index.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-'use client'
-
-// React Imports
-import { useState } from 'react'
-import type { SyntheticEvent, ReactElement } from 'react'
-
-// MUI Imports
-import Grid from '@mui/material/Grid'
-import Tab from '@mui/material/Tab'
-import TabContext from '@mui/lab/TabContext'
-import TabList from '@mui/lab/TabList'
-import TabPanel from '@mui/lab/TabPanel'
-
-const AccountSettings = ({ tabContentList }: { tabContentList: { [key: string]: ReactElement } }) => {
-  // States
-  const [activeTab, setActiveTab] = useState('account')
-
-  const handleChange = (event: SyntheticEvent, value: string) => {
-    setActiveTab(value)
-  }
-
-  return (
-    <TabContext value={activeTab}>
-      <Grid container spacing={6}>
-        <Grid item xs={12}>
-          <TabList onChange={handleChange} variant='scrollable'>
-            <Tab label='Account' icon={<i className='ri-user-3-line' />} iconPosition='start' value='account' />
-            <Tab
-              label='Notifications'
-              icon={<i className='ri-notification-3-line' />}
-              iconPosition='start'
-              value='notifications'
-            />
-            <Tab label='Connections' icon={<i className='ri-link' />} iconPosition='start' value='connections' />
-          </TabList>
-        </Grid>
-        <Grid item xs={12}>
-          <TabPanel value={activeTab} className='p-0'>
-            {tabContentList[activeTab]}
-          </TabPanel>
-        </Grid>
-      </Grid>
-    </TabContext>
-  )
-}
-
-export default AccountSettings
diff --git a/typescript-version/src/views/account-settings/notifications/index.tsx b/typescript-version/src/views/account-settings/notifications/index.tsx
deleted file mode 100644
index fab1fa00e..000000000
--- a/typescript-version/src/views/account-settings/notifications/index.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-// MUI Imports
-import Card from '@mui/material/Card'
-import CardHeader from '@mui/material/CardHeader'
-import CardContent from '@mui/material/CardContent'
-import Typography from '@mui/material/Typography'
-import Checkbox from '@mui/material/Checkbox'
-import Select from '@mui/material/Select'
-import MenuItem from '@mui/material/MenuItem'
-import Grid from '@mui/material/Grid'
-import Button from '@mui/material/Button'
-
-// Component Imports
-import Link from '@components/Link'
-import Form from '@components/Form'
-
-// Style Imports
-import tableStyles from '@core/styles/table.module.css'
-
-type TableDataType = {
-  type: string
-  app: boolean
-  email: boolean
-  browser: boolean
-}
-
-// Vars
-const tableData: TableDataType[] = [
-  {
-    app: true,
-    email: true,
-    browser: true,
-    type: 'New for you'
-  },
-  {
-    app: true,
-    email: true,
-    browser: true,
-    type: 'Account activity'
-  },
-  {
-    app: false,
-    email: true,
-    browser: true,
-    type: 'A new browser used to sign in'
-  },
-  {
-    app: false,
-    email: true,
-    browser: false,
-    type: 'A new device is linked'
-  }
-]
-
-const Notifications = () => {
-  return (
-    <Card>
-      <CardHeader
-        title='Recent Devices'
-        subheader={
-          <>
-            We need permission from your browser to show notifications.
-            <Link className='text-primary'> Request Permission</Link>
-          </>
-        }
-      />
-      <Form>
-        <div className='overflow-x-auto'>
-          <table className={tableStyles.table}>
-            <thead>
-              <tr>
-                <th>Type</th>
-                <th>Email</th>
-                <th>Browser</th>
-                <th>App</th>
-              </tr>
-            </thead>
-            <tbody className='border-be'>
-              {tableData.map((data, index) => (
-                <tr key={index}>
-                  <td>
-                    <Typography color='text.primary'>{data.type}</Typography>
-                  </td>
-                  <td>
-                    <Checkbox defaultChecked={data.email} />
-                  </td>
-                  <td>
-                    <Checkbox defaultChecked={data.browser} />
-                  </td>
-                  <td>
-                    <Checkbox defaultChecked={data.app} />
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
-        <CardContent>
-          <Typography className='mbe-6 font-medium'>When should we send you notifications?</Typography>
-          <Grid container spacing={6}>
-            <Grid item xs={12} sm={6} md={4}>
-              <Select fullWidth defaultValue='online'>
-                <MenuItem value='online'>Only when I&#39;m online</MenuItem>
-                <MenuItem value='anytime'>Anytime</MenuItem>
-              </Select>
-            </Grid>
-            <Grid item xs={12} className='flex gap-4 flex-wrap'>
-              <Button variant='contained' type='submit'>
-                Save Changes
-              </Button>
-              <Button variant='outlined' color='secondary' type='reset'>
-                Reset
-              </Button>
-            </Grid>
-          </Grid>
-        </CardContent>
-      </Form>
-    </Card>
-  )
-}
-
-export default Notifications
diff --git a/typescript-version/src/views/card-basic/CardFacebook.tsx b/typescript-version/src/views/card-basic/CardFacebook.tsx
deleted file mode 100644
index 810817072..000000000
--- a/typescript-version/src/views/card-basic/CardFacebook.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-// MUI Imports
-import Card from '@mui/material/Card'
-import CardContent from '@mui/material/CardContent'
-import Typography from '@mui/material/Typography'
-import Avatar from '@mui/material/Avatar'
-
-const CardFacebook = () => {
-  return (
-    <Card className='bg-[#3b5998]'>
-      <CardContent>
-        <div className='flex items-center gap-2 mbe-4'>
-          <i className='ri-facebook-fill text-3xl text-white' />
-          <Typography variant='h5' className='text-white'>
-            Facebook Card
-          </Typography>
-        </div>
-        <Typography className='mbe-4 text-white'>
-          You&#39;ve read about the importance of being courageous, rebellious and imaginative. These are all vital
-          ingredients in an effective.
-        </Typography>
-        <div className='flex align-center justify-between flex-wrap gap-x-4 gap-y-2'>
-          <div className='flex items-center gap-2.5'>
-            <Avatar src='/images/avatars/1.png' />
-            <Typography className='text-white'>Eugene Clarke</Typography>
-          </div>
-          <div className='flex items-center gap-1.5'>
-            <i className='ri-thumb-up-fill text-xl text-white' />
-            <Typography variant='body2' className='text-white'>
-              2.5k
-            </Typography>
-            <i className='ri-share-line text-xl text-white' />
-            <Typography variant='body2' className='text-white'>
-              124
-            </Typography>
-          </div>
-        </div>
-      </CardContent>
-    </Card>
-  )
-}
-
-export default CardFacebook
diff --git a/typescript-version/src/views/card-basic/CardHorizontalRatings.tsx b/typescript-version/src/views/card-basic/CardHorizontalRatings.tsx
deleted file mode 100644
index dec416591..000000000
--- a/typescript-version/src/views/card-basic/CardHorizontalRatings.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-'use client'
-
-// MUI Imports
-import Card from '@mui/material/Card'
-import Grid from '@mui/material/Grid'
-import CardContent from '@mui/material/CardContent'
-import Typography from '@mui/material/Typography'
-import Rating from '@mui/material/Rating'
-import CardActions from '@mui/material/CardActions'
-import Button from '@mui/material/Button'
-
-const CardHorizontalRatings = () => {
-  return (
-    <Card>
-      <Grid container>
-        <Grid item xs={12} md={6} lg={7}>
-          <CardContent>
-            <Typography variant='h5' className='mbe-2'>
-              Stumptown Roasters
-            </Typography>
-            <div className='flex flex-wrap gap-x-2 gap-y-1 mbe-2'>
-              <Rating name='read-only' value={4} readOnly />
-              <Typography color='text.primary'>4 Star | 98 reviews</Typography>
-            </div>
-            <Typography>
-              Before there was a United States of America, there were coffee houses, because how are you supposed to
-              build.
-            </Typography>
-          </CardContent>
-          <CardActions className='card-actions-dense'>
-            <Button>Location</Button>
-            <Button>Reviews</Button>
-          </CardActions>
-        </Grid>
-        <Grid item xs={12} md={6} lg={5} className='flex items-center justify-center md:order-[unset] -order-1'>
-          <CardContent className='flex items-center justify-center'>
-            <img src='/images/cards/5.png' height='175' className='rounded' />
-          </CardContent>
-        </Grid>
-      </Grid>
-    </Card>
-  )
-}
-
-export default CardHorizontalRatings
diff --git a/typescript-version/src/views/card-basic/CardInfluencingInfluencer.tsx b/typescript-version/src/views/card-basic/CardInfluencingInfluencer.tsx
deleted file mode 100644
index 9981bab8c..000000000
--- a/typescript-version/src/views/card-basic/CardInfluencingInfluencer.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-// MUI Imports
-import Card from '@mui/material/Card'
-import CardContent from '@mui/material/CardContent'
-import Typography from '@mui/material/Typography'
-import CardActions from '@mui/material/CardActions'
-import Button from '@mui/material/Button'
-
-const CardInfluencingInfluencer = () => {
-  return (
-    <Card>
-      <CardContent>
-        <Typography variant='h5' className='mbe-2'>
-          Influencing Influencer
-        </Typography>
-        <Typography className='mbe-4'>
-          Computers have become ubiquitous in almost every facet of our lives. At work, desk jockeys spend hours in
-          front of their desktops, while delivery people scan bar codes with handhelds and workers in the field stay in
-          touch.
-        </Typography>
-        <Typography>
-          If you&#39;re in the market for new desktops, notebooks, or PDAs, there are a myriad of choices. Here&#39;s a
-          rundown of some of the best systems available.
-        </Typography>
-      </CardContent>
-      <CardActions className='card-actions-dense'>
-        <Button>Read More</Button>
-      </CardActions>
-    </Card>
-  )
-}
-
-export default CardInfluencingInfluencer
diff --git a/typescript-version/src/views/card-basic/CardInfluencingInfluencerWithImg.tsx b/typescript-version/src/views/card-basic/CardInfluencingInfluencerWithImg.tsx
deleted file mode 100644
index e6f84ffa7..000000000
--- a/typescript-version/src/views/card-basic/CardInfluencingInfluencerWithImg.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-// MUI Imports
-import Card from '@mui/material/Card'
-import CardMedia from '@mui/material/CardMedia'
-import CardContent from '@mui/material/CardContent'
-import Typography from '@mui/material/Typography'
-
-const CardInfluencingInfluencerWithImg = () => {
-  return (
-    <Card>
-      <CardMedia image='/images/cards/1.png' className='bs-[200px]' />
-      <CardContent>
-        <Typography variant='h5' className='mbe-2'>
-          Influencing The Influencer
-        </Typography>
-        <Typography>
-          Cancun is back, better than ever! Over a hundred Mexico resorts have reopened and the state tourism minister
-          predicts Cancun will draw as many visitors in 2006 as it did two years ago.
-        </Typography>
-      </CardContent>
-    </Card>
-  )
-}
-
-export default CardInfluencingInfluencerWithImg
diff --git a/typescript-version/src/views/card-basic/CardLifetimeMembership.tsx b/typescript-version/src/views/card-basic/CardLifetimeMembership.tsx
deleted file mode 100644
index 312d607c9..000000000
--- a/typescript-version/src/views/card-basic/CardLifetimeMembership.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-// MUI Imports
-import Card from '@mui/material/Card'
-import Grid from '@mui/material/Grid'
-import CardContent from '@mui/material/CardContent'
-import Typography from '@mui/material/Typography'
-import Divider from '@mui/material/Divider'
-import Button from '@mui/material/Button'
-
-const CardLifetimeMembership = () => {
-  return (
-    <Card>
-      <Grid container>
-        <Grid item xs={12} sm={7}>
-          <CardContent>
-            <Typography variant='h5' className='mbe-2'>
-              Lifetime Membership
-            </Typography>
-            <Typography>
-              Here, I focus on a range of items and features that we use in life without giving them a second thought
-              such as Coca Cola, body muscles and holding ones own breath. Though, most of these notes are not
-              fundamentally necessary, they are such that you can use them for a good laugh, at a drinks party or for
-              picking up women or men.
-            </Typography>
-            <Divider className='mbs-7 mbe-7' />
-            <Grid container>
-              <Grid item xs={12} sm={6} className='flex flex-col pie-5 gap-[26px]'>
-                <div className='flex items-center gap-2.5'>
-                  <div className='flex'>
-                    <i className='ri-lock-unlock-line text-xl text-textSecondary' />
-                  </div>
-                  <Typography>Full Access</Typography>
-                </div>
-                <div className='flex items-center gap-2.5'>
-                  <div className='flex'>
-                    <i className='ri-user-3-line text-xl text-textSecondary' />
-                  </div>
-                  <Typography>15 Members</Typography>
-                </div>
-              </Grid>
-              <Grid item xs={12} sm={6} className='flex flex-col max-sm:mbs-[26px] sm:pis-5 sm:border-is gap-[26px]'>
-                <div className='flex items-center gap-2.5'>
-                  <div className='flex'>
-                    <i className='ri-lock-unlock-line text-xl text-textSecondary' />
-                  </div>
-                  <Typography>Access all Features</Typography>
-                </div>
-                <div className='flex items-center gap-2.5'>
-                  <div className='flex'>
-                    <i className='ri-user-3-line text-xl text-textSecondary' />
-                  </div>
-                  <Typography>Lifetime Free Update</Typography>
-                </div>
-              </Grid>
-            </Grid>
-          </CardContent>
-        </Grid>
-        <Grid item xs={12} sm={5}>
-          <CardContent className='flex items-center justify-center bs-full bg-actionHover'>
-            <div className='flex flex-col items-center justify-center gap-2'>
-              <div className='flex items-baseline justify-center'>
-                <Typography variant='h5'>$</Typography>
-                <Typography variant='h1'>899</Typography>
-                <Typography variant='h5'>USD</Typography>
-              </div>
-              <Typography className='flex flex-col text-center'>
-                <span>5 Tips For Offshore</span>
-                <span>Software Development</span>
-              </Typography>
-              <Button variant='contained' className='mbs-5'>
-                Contact Now
-              </Button>
-            </div>
-          </CardContent>
-        </Grid>
-      </Grid>
-    </Card>
-  )
-}
-
-export default CardLifetimeMembership
diff --git a/typescript-version/src/views/card-basic/CardLinkedIn.tsx b/typescript-version/src/views/card-basic/CardLinkedIn.tsx
deleted file mode 100644
index 45fe70bac..000000000
--- a/typescript-version/src/views/card-basic/CardLinkedIn.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-// MUI Imports
-import Card from '@mui/material/Card'
-import CardContent from '@mui/material/CardContent'
-import Typography from '@mui/material/Typography'
-import Avatar from '@mui/material/Avatar'
-
-const CardLinkedIn = () => {
-  return (
-    <Card className='bg-[#007bb6]'>
-      <CardContent>
-        <div className='flex items-center gap-2 mbe-4'>
-          <i className='ri-linkedin-fill text-3xl text-white' />
-          <Typography variant='h5' className='text-white'>
-            LinkedIn Card
-          </Typography>
-        </div>
-        <Typography className='mbe-4 text-white'>
-          With the Internet spreading like wildfire and reaching every part of our daily life, more and more traffic is
-          directed.
-        </Typography>
-        <div className='flex align-center justify-between flex-wrap gap-x-4 gap-y-2'>
-          <div className='flex items-center gap-2.5'>
-            <Avatar src='/images/avatars/8.png' />
-            <Typography className='text-white'>Anne Burke</Typography>
-          </div>
-          <div className='flex items-center gap-1.5'>
-            <i className='ri-thumb-up-fill text-xl text-white' />
-            <Typography variant='body2' className='text-white'>
-              1.2k
-            </Typography>
-            <i className='ri-share-line text-xl text-white' />
-            <Typography variant='body2' className='text-white'>
-              56
-            </Typography>
-          </div>
-        </div>
-      </CardContent>
-    </Card>
-  )
-}
-
-export default CardLinkedIn
diff --git a/typescript-version/src/views/card-basic/CardMobile.tsx b/typescript-version/src/views/card-basic/CardMobile.tsx
deleted file mode 100644
index b8ea5d0da..000000000
--- a/typescript-version/src/views/card-basic/CardMobile.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-'use client'
-
-// React Imports
-import { useState } from 'react'
-import type { MouseEvent } from 'react'
-
-// MUI Imports
-import Card from '@mui/material/Card'
-import Grid from '@mui/material/Grid'
-import CardContent from '@mui/material/CardContent'
-import Typography from '@mui/material/Typography'
-import CardActions from '@mui/material/CardActions'
-import Button from '@mui/material/Button'
-import IconButton from '@mui/material/IconButton'
-import Menu from '@mui/material/Menu'
-import MenuItem from '@mui/material/MenuItem'
-
-const CardMobile = () => {
-  // States
-  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
-
-  const open = Boolean(anchorEl)
-
-  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
-    setAnchorEl(event.currentTarget)
-  }
-
-  const handleClose = () => {
-    setAnchorEl(null)
-  }
-
-  return (
-    <Card>
-      <Grid container>
-        <Grid item xs={12} md={5} className='flex items-center justify-center'>
-          <CardContent className='flex items-center justify-center'>
-            <img alt='iPhone 11 Pro' src='/images/cards/4.png' height={175} />
-          </CardContent>
-        </Grid>
-        <Grid item xs={12} md={7} className='md:border-is border-bs md:border-bs-0'>
-          <CardContent>
-            <Typography variant='h5' className='mbe-2'>
-              Apple iPhone 11 Pro
-            </Typography>
-            <Typography className='mbe-2'>
-              Apple iPhone 11 Pro smartphone. Announced Sep 2019. Features 5.8″ display Apple A13 Bionic
-            </Typography>
-            <div className='flex gap-1'>
-              <Typography color='text.primary'>Price:</Typography>
-              <Typography className='font-medium' color='text.primary'>
-                $899
-              </Typography>
-            </div>
-          </CardContent>
-          <CardActions className='justify-between card-actions-dense'>
-            <Button startIcon={<i className='ri-shopping-cart-2-line' />}>Add to Cart</Button>
-            <IconButton
-              id='share-button'
-              aria-haspopup='true'
-              {...(open && { 'aria-expanded': true, 'aria-controls': 'share-menu' })}
-              onClick={handleClick}
-            >
-              <i className='ri-share-line' />
-            </IconButton>
-            <Menu
-              anchorEl={anchorEl}
-              open={open}
-              MenuListProps={{ 'aria-labelledby': 'share-button' }}
-              onClose={handleClose}
-            >
-              <MenuItem onClick={handleClose}>
-                <i className='ri-facebook-fill text-xl' />
-              </MenuItem>
-              <MenuItem onClick={handleClose}>
-                <i className='ri-twitter-fill text-xl' />
-              </MenuItem>
-              <MenuItem onClick={handleClose}>
-                <i className='ri-linkedin-fill text-xl' />
-              </MenuItem>
-              <MenuItem onClick={handleClose}>
-                <i className='ri-google-fill text-xl' />
-              </MenuItem>
-            </Menu>
-          </CardActions>
-        </Grid>
-      </Grid>
-    </Card>
-  )
-}
-
-export default CardMobile
diff --git a/typescript-version/src/views/card-basic/CardSupport.tsx b/typescript-version/src/views/card-basic/CardSupport.tsx
deleted file mode 100644
index 72196e7a9..000000000
--- a/typescript-version/src/views/card-basic/CardSupport.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-// MUI Imports
-import Card from '@mui/material/Card'
-import CardContent from '@mui/material/CardContent'
-import Avatar from '@mui/material/Avatar'
-import Typography from '@mui/material/Typography'
-import Button from '@mui/material/Button'
-
-const CardSupport = () => {
-  return (
-    <Card>
-      <CardContent className='flex flex-col items-center text-center'>
-        <Avatar className='mbe-2 is-[56px] bs-[56px]'>
-          <i className='ri-question-line text-[32px]' />
-        </Avatar>
-        <Typography variant='h5' className='mbe-2'>
-          Support
-        </Typography>
-        <Typography className='mbe-4'>
-          According to us blisters are a very common thing and we come across them very often in our daily lives. It is
-          a very common occurrence like cold or fever depending upon your lifestyle.
-        </Typography>
-        <Button variant='contained'>Contact Now</Button>
-      </CardContent>
-    </Card>
-  )
-}
-
-export default CardSupport
diff --git a/typescript-version/src/views/card-basic/CardTwitter.tsx b/typescript-version/src/views/card-basic/CardTwitter.tsx
deleted file mode 100644
index 7643843a2..000000000
--- a/typescript-version/src/views/card-basic/CardTwitter.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-// MUI Imports
-import Card from '@mui/material/Card'
-import CardContent from '@mui/material/CardContent'
-import Typography from '@mui/material/Typography'
-import Avatar from '@mui/material/Avatar'
-
-const CardTwitter = () => {
-  return (
-    <Card className='bg-[#1d9bf0]'>
-      <CardContent>
-        <div className='flex items-center gap-2 mbe-4'>
-          <i className='ri-twitter-fill text-3xl text-white' />
-          <Typography variant='h5' className='text-white'>
-            Twitter Card
-          </Typography>
-        </div>
-        <Typography className='mbe-4 text-white'>
-          Turns out semicolon-less style is easier and safer in TS because most gotcha edge cases are type invalid as
-          well.
-        </Typography>
-        <div className='flex align-center justify-between flex-wrap gap-x-4 gap-y-2'>
-          <div className='flex items-center gap-2.5'>
-            <Avatar src='/images/avatars/6.png' />
-            <Typography className='text-white'>Mary Vaughn</Typography>
-          </div>
-          <div className='flex items-center gap-1.5'>
-            <i className='ri-thumb-up-fill text-xl text-white' />
-            <Typography variant='body2' className='text-white'>
-              1.6k
-            </Typography>
-            <i className='ri-share-line text-xl text-white' />
-            <Typography variant='body2' className='text-white'>
-              98
-            </Typography>
-          </div>
-        </div>
-      </CardContent>
-    </Card>
-  )
-}
-
-export default CardTwitter
diff --git a/typescript-version/src/views/card-basic/CardUser.tsx b/typescript-version/src/views/card-basic/CardUser.tsx
deleted file mode 100644
index e402f6aa3..000000000
--- a/typescript-version/src/views/card-basic/CardUser.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-// MUI Imports
-import Card from '@mui/material/Card'
-import CardMedia from '@mui/material/CardMedia'
-import CardContent from '@mui/material/CardContent'
-import Avatar from '@mui/material/Avatar'
-import Typography from '@mui/material/Typography'
-import Button from '@mui/material/Button'
-import AvatarGroup from '@mui/material/AvatarGroup'
-
-const CardUser = () => {
-  return (
-    <Card>
-      <CardMedia image='/images/cards/2.png' className='bs-[180px]' />
-      <CardContent className='relative'>
-        <Avatar
-          src='/images/avatars/3.png'
-          alt='Robert Meyer'
-          className='is-[78px] bs-[78px] border-[5px] border-backgroundPaper absolute start-[11px] block-start-[-39px]'
-        />
-        <div className='flex justify-between items-center flex-wrap gap-x-4 gap-y-2 mbe-5 mbs-[30px]'>
-          <div className='flex flex-col items-start'>
-            <Typography variant='h5'>Robert Meyer</Typography>
-            <Typography variant='body2'>London, UK</Typography>
-          </div>
-          <Button variant='contained'>Send Request</Button>
-        </div>
-        <div className='flex justify-between items-center flex-wrap gap-x-4 gap-y-2'>
-          <Typography variant='subtitle2' color='text.disabled'>
-            18 mutual friends
-          </Typography>
-          <AvatarGroup max={4}>
-            <Avatar src='/images/avatars/1.png' />
-            <Avatar src='/images/avatars/5.png' />
-            <Avatar src='/images/avatars/4.png' />
-            <Avatar src='/images/avatars/6.png' />
-            <Avatar src='/images/avatars/7.png' />
-            <Avatar src='/images/avatars/8.png' />
-          </AvatarGroup>
-        </div>
-      </CardContent>
-    </Card>
-  )
-}
-
-export default CardUser
diff --git a/typescript-version/src/views/card-basic/CardVerticalRatings.tsx b/typescript-version/src/views/card-basic/CardVerticalRatings.tsx
deleted file mode 100644
index a80478aef..000000000
--- a/typescript-version/src/views/card-basic/CardVerticalRatings.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-// MUI Imports
-import Card from '@mui/material/Card'
-import CardContent from '@mui/material/CardContent'
-import Typography from '@mui/material/Typography'
-import Rating from '@mui/material/Rating'
-import CardActions from '@mui/material/CardActions'
-import Button from '@mui/material/Button'
-
-const CardVerticalRatings = () => {
-  return (
-    <Card>
-      <CardContent>
-        <Typography variant='h5' className='mbe-2'>
-          The Best Answers
-        </Typography>
-        <div className='flex flex-wrap gap-x-2 gap-y-1 mbe-2'>
-          <Rating name='read-only' value={4} readOnly />
-          <Typography>4 Star | 98 reviews</Typography>
-        </div>
-        <Typography color='text.secondary' className='mbe-4'>
-          If you are looking for a new way to promote your business that won&#39;t cost you more money, maybe printing
-          is one of the options you won&#39;t resist.
-        </Typography>
-        <Typography color='text.secondary'>
-          Printing is a widely use process in making printed materials that are used for advertising. It become fast,
-          easy and simple.
-        </Typography>
-      </CardContent>
-      <CardActions className='card-actions-dense'>
-        <Button>Location</Button>
-        <Button>Review</Button>
-      </CardActions>
-    </Card>
-  )
-}
-
-export default CardVerticalRatings
diff --git a/typescript-version/src/views/card-basic/CardWatch.tsx b/typescript-version/src/views/card-basic/CardWatch.tsx
deleted file mode 100644
index 2d2c24d05..000000000
--- a/typescript-version/src/views/card-basic/CardWatch.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-// MUI Imports
-import Card from '@mui/material/Card'
-import CardMedia from '@mui/material/CardMedia'
-import CardContent from '@mui/material/CardContent'
-import Typography from '@mui/material/Typography'
-import Button from '@mui/material/Button'
-
-const CardWatch = () => {
-  return (
-    <Card>
-      <CardMedia image='/images/cards/6.png' className='bs-[140px]' />
-      <CardContent>
-        <Typography variant='h5' className='mbe-2'>
-          Apple Watch
-        </Typography>
-        <Typography className='mbe-2'>$249.40</Typography>
-        <Typography>3.1GHz 6-core 10th-generation Intel Core i5 processor, Turbo Boost up to 4.5GHz</Typography>
-      </CardContent>
-      <Button variant='contained' fullWidth className='rounded-none'>
-        Add to Cart
-      </Button>
-    </Card>
-  )
-}
-
-export default CardWatch
diff --git a/typescript-version/src/views/card-basic/CardWithCollapse.tsx b/typescript-version/src/views/card-basic/CardWithCollapse.tsx
deleted file mode 100644
index 2ef6ba576..000000000
--- a/typescript-version/src/views/card-basic/CardWithCollapse.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-'use client'
-
-// React Imports
-import { useState } from 'react'
-
-// MUI Imports
-import Card from '@mui/material/Card'
-import CardMedia from '@mui/material/CardMedia'
-import CardContent from '@mui/material/CardContent'
-import Typography from '@mui/material/Typography'
-import CardActions from '@mui/material/CardActions'
-import Button from '@mui/material/Button'
-import IconButton from '@mui/material/IconButton'
-import Collapse from '@mui/material/Collapse'
-import Divider from '@mui/material/Divider'
-
-const CardWithCollapse = () => {
-  const [expanded, setExpanded] = useState(false)
-
-  return (
-    <Card>
-      <CardMedia image='/images/cards/3.png' className='bs-[185px]' />
-      <CardContent>
-        <Typography variant='h5' className='mbe-3'>
-          Popular Uses Of The Internet
-        </Typography>
-        <Typography>Although cards can support multiple actions, UI controls, and an overflow menu.</Typography>
-      </CardContent>
-      <CardActions className='justify-between card-actions-dense'>
-        <Button onClick={() => setExpanded(!expanded)}>Details</Button>
-        <IconButton onClick={() => setExpanded(!expanded)}>
-          <i className={expanded ? 'ri-arrow-up-s-line' : 'ri-arrow-down-s-line'} />
-        </IconButton>
-      </CardActions>
-      <Collapse in={expanded} timeout={300}>
-        <Divider />
-        <CardContent>
-          <Typography>
-            I&#39;m a thing. But, like most politicians, he promised more than he could deliver. You won&#39;t have time
-            for sleeping, soldier, not with all the bed making you&#39;ll be doing. Then we&#39;ll go with that data
-            file! Hey, you add a one and two zeros to that or we walk! You&#39;re going to do his laundry? I&#39;ve got
-            to find a way to escape.
-          </Typography>
-        </CardContent>
-      </Collapse>
-    </Card>
-  )
-}
-
-export default CardWithCollapse
diff --git a/typescript-version/src/views/card-basic/CardWithTabs.tsx b/typescript-version/src/views/card-basic/CardWithTabs.tsx
deleted file mode 100644
index 0c74e9fa7..000000000
--- a/typescript-version/src/views/card-basic/CardWithTabs.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-'use client'
-
-// React Imports
-import { useState } from 'react'
-import type { SyntheticEvent } from 'react'
-
-// MUI Imports
-import Card from '@mui/material/Card'
-import CardContent from '@mui/material/CardContent'
-import TabContext from '@mui/lab/TabContext'
-import TabList from '@mui/lab/TabList'
-import Tab from '@mui/material/Tab'
-import TabPanel from '@mui/lab/TabPanel'
-import Typography from '@mui/material/Typography'
-import Button from '@mui/material/Button'
-
-const CardWithTabs = () => {
-  // ** State
-  const [value, setValue] = useState<string>('1')
-
-  const handleChange = (event: SyntheticEvent, newValue: string) => {
-    setValue(newValue)
-  }
-
-  return (
-    <Card>
-      <TabContext value={value}>
-        <TabList onChange={handleChange} aria-label='card navigation examples'>
-          <Tab value='1' label='Item One' />
-          <Tab value='2' label='Item Two' />
-          <Tab value='3' label='Item Three' />
-        </TabList>
-        <CardContent>
-          <TabPanel value='1'>
-            <Typography variant='h5' className='mbe-2'>
-              Header One
-            </Typography>
-            <Typography className='mbe-6'>
-              Pudding tiramisu caramels. Gingerbread gummies danish chocolate bar toffee marzipan. Wafer wafer cake
-              powder danish oat cake.
-            </Typography>
-            <Button variant='contained'>Button One</Button>
-          </TabPanel>
-          <TabPanel value='2'>
-            <Typography variant='h5' className='mbe-2'>
-              Header Two
-            </Typography>
-            <Typography className='mbe-6'>
-              Dragée chupa chups soufflé cheesecake jelly tootsie roll cupcake marzipan. Carrot cake sweet roll gummi
-              bears caramels jelly beans.
-            </Typography>
-            <Button variant='contained'>Button Two</Button>
-          </TabPanel>
-          <TabPanel value='3'>
-            <Typography variant='h5' className='mbe-2'>
-              Header Three
-            </Typography>
-            <Typography className='mbe-6'>
-              Icing cake macaroon macaroon jelly chocolate bar. Chupa chups dessert dessert soufflé chocolate bar
-              jujubes gummi bears lollipop.
-            </Typography>
-            <Button variant='contained'>Button Three</Button>
-          </TabPanel>
-        </CardContent>
-      </TabContext>
-    </Card>
-  )
-}
-
-export default CardWithTabs
diff --git a/typescript-version/src/views/card-basic/CardWithTabsCenter.tsx b/typescript-version/src/views/card-basic/CardWithTabsCenter.tsx
deleted file mode 100644
index 0e1cfc0aa..000000000
--- a/typescript-version/src/views/card-basic/CardWithTabsCenter.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-'use client'
-
-// React Imports
-import { useState } from 'react'
-import type { SyntheticEvent } from 'react'
-
-// MUI Imports
-import Card from '@mui/material/Card'
-import CardContent from '@mui/material/CardContent'
-import TabContext from '@mui/lab/TabContext'
-import TabList from '@mui/lab/TabList'
-import Tab from '@mui/material/Tab'
-import TabPanel from '@mui/lab/TabPanel'
-import Typography from '@mui/material/Typography'
-import Button from '@mui/material/Button'
-
-const CardWithTabsCenter = () => {
-  // ** State
-  const [value, setValue] = useState<string>('1')
-
-  const handleChange = (event: SyntheticEvent, newValue: string) => {
-    setValue(newValue)
-  }
-
-  return (
-    <Card>
-      <TabContext value={value}>
-        <TabList centered onChange={handleChange} aria-label='card navigation examples'>
-          <Tab value='1' label='Item One' />
-          <Tab value='2' label='Item Two' />
-          <Tab value='3' label='Item Three' />
-        </TabList>
-        <CardContent>
-          <TabPanel value='1' className='text-center'>
-            <Typography variant='h5' className='mbe-2'>
-              Header One
-            </Typography>
-            <Typography className='mbe-6'>
-              Pudding tiramisu caramels. Gingerbread gummies danish chocolate bar toffee marzipan. Wafer wafer cake
-              powder danish oat cake.
-            </Typography>
-            <Button variant='contained'>Button One</Button>
-          </TabPanel>
-          <TabPanel value='2' className='text-center'>
-            <Typography variant='h5' className='mbe-2'>
-              Header Two
-            </Typography>
-            <Typography className='mbe-6'>
-              Dragée chupa chups soufflé cheesecake jelly tootsie roll cupcake marzipan. Carrot cake sweet roll gummi
-              bears caramels jelly beans.
-            </Typography>
-            <Button variant='contained'>Button Two</Button>
-          </TabPanel>
-          <TabPanel value='3' className='text-center'>
-            <Typography variant='h5' className='mbe-2'>
-              Header Three
-            </Typography>
-            <Typography className='mbe-6'>
-              Icing cake macaroon macaroon jelly chocolate bar. Chupa chups dessert dessert soufflé chocolate bar
-              jujubes gummi bears lollipop.
-            </Typography>
-            <Button variant='contained'>Button Three</Button>
-          </TabPanel>
-        </CardContent>
-      </TabContext>
-    </Card>
-  )
-}
-
-export default CardWithTabsCenter
diff --git a/typescript-version/src/views/dashboard/Award.tsx b/typescript-version/src/views/dashboard/Award.tsx
deleted file mode 100644
index 137356f22..000000000
--- a/typescript-version/src/views/dashboard/Award.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-// MUI Imports
-import Card from '@mui/material/Card'
-import CardContent from '@mui/material/CardContent'
-import Typography from '@mui/material/Typography'
-import Button from '@mui/material/Button'
-
-const Award = () => {
-  return (
-    <Card>
-      <CardContent className='flex flex-col gap-2 relative items-start'>
-        <div>
-          <Typography variant='h5'>Congratulations John! 🎉</Typography>
-          <Typography>Best seller of the month</Typography>
-        </div>
-        <div>
-          <Typography variant='h4' color='primary'>
-            $42.8k
-          </Typography>
-          <Typography>78% of target 🚀</Typography>
-        </div>
-        <Button size='small' variant='contained'>
-          View Sales
-        </Button>
-        <img
-          src='/images/pages/trophy.png'
-          alt='trophy image'
-          height={102}
-          className='absolute inline-end-7 bottom-6'
-        />
-      </CardContent>
-    </Card>
-  )
-}
-
-export default Award
diff --git a/typescript-version/src/views/dashboard/DepositWithdraw.tsx b/typescript-version/src/views/dashboard/DepositWithdraw.tsx
deleted file mode 100644
index 19fc6321a..000000000
--- a/typescript-version/src/views/dashboard/DepositWithdraw.tsx
+++ /dev/null
@@ -1,150 +0,0 @@
-// MUI Imports
-import Card from '@mui/material/Card'
-import CardHeader from '@mui/material/CardHeader'
-import CardContent from '@mui/material/CardContent'
-import Typography from '@mui/material/Typography'
-import Grid from '@mui/material/Grid'
-
-// Component Imports
-import Link from '@components/Link'
-
-type DataType = {
-  logo: string
-  title: string
-  amount: string
-  subtitle: string
-}
-
-// Vars
-const depositData: DataType[] = [
-  {
-    amount: '+$4,650',
-    subtitle: 'Sell UI Kit',
-    title: 'Gumroad Account',
-    logo: '/images/cards/gumroad.png'
-  },
-  {
-    amount: '+$92,705',
-    title: 'Mastercard',
-    subtitle: 'Wallet deposit',
-    logo: '/images/logos/mastercard.png'
-  },
-  {
-    amount: '+$957',
-    title: 'Stripe Account',
-    subtitle: 'iOS Application',
-    logo: '/images/logos/stripe.png'
-  },
-  {
-    amount: '+$6,837',
-    title: 'American Bank',
-    subtitle: 'Bank Transfer',
-    logo: '/images/logos/american-bank.png'
-  },
-  {
-    amount: '+$446',
-    title: 'Bank Account',
-    subtitle: 'Wallet deposit',
-    logo: '/images/logos/citi-bank.png'
-  }
-]
-
-const withdrawData = [
-  {
-    amount: '-$145',
-    title: 'Google Adsense',
-    subtitle: 'Paypal deposit',
-    logo: '/images/logos/google.png'
-  },
-  {
-    amount: '-$1870',
-    title: 'Github Enterprise',
-    logo: '/images/logos/github.png',
-    subtitle: 'Security & compliance'
-  },
-  {
-    amount: '-$450',
-    title: 'Upgrade Slack Plan',
-    subtitle: 'Debit card deposit',
-    logo: '/images/logos/slack.png'
-  },
-  {
-    amount: '-$540',
-    title: 'Digital Ocean',
-    subtitle: 'Cloud Hosting',
-    logo: '/images/logos/digital-ocean.png'
-  },
-  {
-    amount: '-$21',
-    title: 'AWS Account',
-    logo: '/images/logos/aws.png',
-    subtitle: 'Choosing a Cloud Platform'
-  }
-]
-
-const DepositWithdraw = () => {
-  return (
-    <Card>
-      <Grid container>
-        <Grid item xs={12} md={6} className='border-be md:border-be-0 md:border-ie'>
-          <CardHeader
-            title='Deposit'
-            action={
-              <Typography component={Link} className='font-medium' color='primary'>
-                View All
-              </Typography>
-            }
-          />
-          <CardContent className='flex flex-col gap-5'>
-            {depositData.map((item, index) => (
-              <div key={index} className='flex items-center gap-4'>
-                <img src={item.logo} alt={item.title} width={30} />
-                <div className='flex justify-between items-center is-full flex-wrap gap-x-4 gap-y-2'>
-                  <div className='flex flex-col gap-0.5'>
-                    <Typography color='text.primary' className='font-medium'>
-                      {item.title}
-                    </Typography>
-                    <Typography>{item.subtitle}</Typography>
-                  </div>
-                  <Typography color='success.main' className='font-medium'>
-                    {item.amount}
-                  </Typography>
-                </div>
-              </div>
-            ))}
-          </CardContent>
-        </Grid>
-        <Grid item xs={12} md={6}>
-          <CardHeader
-            title='Withdraw'
-            action={
-              <Typography component={Link} className='font-medium' color='primary'>
-                View All
-              </Typography>
-            }
-          />
-          <CardContent className='flex flex-col gap-5'>
-            {withdrawData.map((item, index) => (
-              <div key={index} className='flex items-center gap-4'>
-                <img src={item.logo} alt={item.title} width={30} />
-                <div className='flex justify-between items-center is-full flex-wrap gap-x-4 gap-y-2'>
-                  <div className='flex flex-col gap-0.5'>
-                    <Typography color='text.primary' className='font-medium'>
-                      {item.title}
-                    </Typography>
-                    <Typography>{item.subtitle}</Typography>
-                  </div>
-                  <Typography color='error.main' className='font-medium'>
-                    {item.amount}
-                  </Typography>
-                </div>
-              </div>
-            ))}
-          </CardContent>
-        </Grid>
-      </Grid>
-    </Card>
-  )
-}
-
-export default DepositWithdraw
diff --git a/typescript-version/src/views/dashboard/DistributedColumnChart.tsx b/typescript-version/src/views/dashboard/DistributedColumnChart.tsx
deleted file mode 100644
index d86fbdb59..000000000
--- a/typescript-version/src/views/dashboard/DistributedColumnChart.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-'use client'
-
-// Next Imports
-import dynamic from 'next/dynamic'
-
-//MUI Imports
-import Card from '@mui/material/Card'
-import CardContent from '@mui/material/CardContent'
-import Typography from '@mui/material/Typography'
-import { useTheme } from '@mui/material/styles'
-
-// Third-party Imports
-import type { ApexOptions } from 'apexcharts'
-
-// Styled Component Imports
-const AppReactApexCharts = dynamic(() => import('@/libs/styles/AppReactApexCharts'))
-
-// Vars
-const series = [
-  {
-    name: '2022',
-    data: [45, 85, 65, 50, 70]
-  }
-]
-
-const DistributedColumnChart = () => {
-  // Hooks
-  const theme = useTheme()
-
-  // Vars
-  const primaryColor = 'var(--mui-palette-primary-main)'
-  const errorColor = 'var(--mui-palette-error-main)'
-  const trackBgColor = 'var(--mui-palette-customColors-trackBg)'
-
-  const options: ApexOptions = {
-    chart: {
-      type: 'bar',
-      stacked: false,
-      parentHeightOffset: 0,
-      toolbar: { show: false }
-    },
-    tooltip: {
-      x: { show: false }
-    },
-    grid: {
-      show: false,
-      padding: {
-        top: -10,
-        left: -3,
-        right: -2,
-        bottom: 5
-      }
-    },
-    legend: { show: false },
-    dataLabels: { enabled: false },
-    colors: [errorColor, primaryColor, errorColor, primaryColor, primaryColor],
-    plotOptions: {
-      bar: {
-        horizontal: false,
-        columnWidth: '24%',
-        borderRadius: 4,
-        borderRadiusApplication: 'around',
-        borderRadiusWhenStacked: 'all',
-        distributed: true,
-        colors: {
-          backgroundBarRadius: 5,
-          backgroundBarColors: [trackBgColor, trackBgColor, trackBgColor, trackBgColor, trackBgColor]
-        }
-      }
-    },
-    xaxis: {
-      labels: { show: false },
-      axisTicks: { show: false },
-      axisBorder: { show: false }
-    },
-    yaxis: { show: false },
-    responsive: [
-      {
-        breakpoint: 900,
-        options: {
-          plotOptions: {
-            bar: {
-              columnWidth: '18%'
-            }
-          }
-        }
-      },
-      {
-        breakpoint: theme.breakpoints.values.sm,
-        options: {
-          plotOptions: {
-            bar: {
-              columnWidth: '12%'
-            }
-          }
-        }
-      }
-    ]
-  }
-
-  return (
-    <Card>
-      <CardContent>
-        <Typography variant='h4'>2,856</Typography>
-        <AppReactApexCharts type='bar' height={88} width='100%' options={options} series={series} />
-        <Typography color='text.primary' className='font-medium text-center'>
-          Sessions
-        </Typography>
-      </CardContent>
-    </Card>
-  )
-}
-
-export default DistributedColumnChart
diff --git a/typescript-version/src/views/dashboard/LineChart.tsx b/typescript-version/src/views/dashboard/LineChart.tsx
deleted file mode 100644
index 3744648cb..000000000
--- a/typescript-version/src/views/dashboard/LineChart.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-'use client'
-
-// Next Imports
-import dynamic from 'next/dynamic'
-
-//MUI Imports
-import Card from '@mui/material/Card'
-import CardContent from '@mui/material/CardContent'
-import Typography from '@mui/material/Typography'
-
-import type { ApexOptions } from 'apexcharts'
-
-// Styled Component Imports
-const AppReactApexCharts = dynamic(() => import('@/libs/styles/AppReactApexCharts'))
-
-// Vars
-const series = [{ data: [0, 20, 5, 30, 15, 45] }]
-
-const LineChart = () => {
-  const primaryColor = 'var(--mui-palette-primary-main)'
-
-  const options: ApexOptions = {
-    chart: {
-      parentHeightOffset: 0,
-      toolbar: { show: false }
-    },
-    tooltip: { enabled: false },
-    grid: {
-      strokeDashArray: 6,
-      borderColor: 'var(--mui-palette-divider)',
-      xaxis: {
-        lines: { show: true }
-      },
-      yaxis: {
-        lines: { show: false }
-      },
-      padding: {
-        top: -10,
-        left: -7,
-        right: 5,
-        bottom: 5
-      }
-    },
-    stroke: {
-      width: 3,
-      lineCap: 'butt',
-      curve: 'straight'
-    },
-    colors: [primaryColor],
-    markers: {
-      size: 6,
-      offsetY: 4,
-      offsetX: -2,
-      strokeWidth: 3,
-      colors: ['transparent'],
-      strokeColors: 'transparent',
-      discrete: [
-        {
-          size: 5.5,
-          seriesIndex: 0,
-          strokeColor: primaryColor,
-          fillColor: 'var(--mui-palette-background-paper)',
-          dataPointIndex: series[0].data.length - 1
-        }
-      ]
-    },
-    xaxis: {
-      labels: { show: false },
-      axisTicks: { show: false },
-      axisBorder: { show: false }
-    },
-    yaxis: {
-      labels: { show: false }
-    }
-  }
-
-  return (
-    <Card>
-      <CardContent>
-        <Typography variant='h4'>$86.4k</Typography>
-        <AppReactApexCharts type='line' height={88} width='100%' options={options} series={series} />
-        <Typography color='text.primary' className='font-medium text-center'>
-          Total Profit
-        </Typography>
-      </CardContent>
-    </Card>
-  )
-}
-
-export default LineChart
diff --git a/typescript-version/src/views/dashboard/SalesByCountries.tsx b/typescript-version/src/views/dashboard/SalesByCountries.tsx
deleted file mode 100644
index f91366bf4..000000000
--- a/typescript-version/src/views/dashboard/SalesByCountries.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-// MUI Imports
-import Card from '@mui/material/Card'
-import CardHeader from '@mui/material/CardHeader'
-import CardContent from '@mui/material/CardContent'
-import Typography from '@mui/material/Typography'
-
-// Third-party Imports
-import classnames from 'classnames'
-
-// Type Imports
-import type { ThemeColor } from '@core/types'
-
-// Components Imports
-import OptionMenu from '@core/components/option-menu'
-import CustomAvatar from '@core/components/mui/Avatar'
-
-type DataType = {
-  avatarLabel: string
-  avatarColor?: ThemeColor
-  title: string
-  subtitle: string
-  sales: string
-  trend: 'up' | 'down'
-  trendPercentage: string
-}
-
-// Vars
-const data: DataType[] = [
-  {
-    avatarLabel: 'US',
-    avatarColor: 'success',
-    title: '$8,656k',
-    subtitle: 'United states of america',
-    sales: '894k',
-    trend: 'up',
-    trendPercentage: '25.8%'
-  },
-  {
-    avatarLabel: 'UK',
-    avatarColor: 'error',
-    title: '$2,415k',
-    subtitle: 'United kingdom',
-    sales: '645k',
-    trend: 'down',
-    trendPercentage: '6.2%'
-  },
-  {
-    avatarLabel: 'IN',
-    avatarColor: 'warning',
-    title: '$865k',
-    subtitle: 'India',
-    sales: '148k',
-    trend: 'up',
-    trendPercentage: '12.4%'
-  },
-  {
-    avatarLabel: 'JA',
-    avatarColor: 'secondary',
-    title: '$745k',
-    subtitle: 'Japan',
-    sales: '86k',
-    trend: 'down',
-    trendPercentage: '11.9%'
-  },
-  {
-    avatarLabel: 'KO',
-    avatarColor: 'error',
-    title: '$45k',
-    subtitle: 'Korea',
-    sales: '42k',
-    trend: 'up',
-    trendPercentage: '16.2%'
-  }
-]
-
-const SalesByCountries = () => {
-  return (
-    <Card>
-      <CardHeader
-        title='Sales by Countries'
-        action={<OptionMenu iconClassName='text-textPrimary' options={['Last 28 Days', 'Last Month', 'Last Year']} />}
-      />
-      <CardContent className='flex flex-col gap-[0.875rem]'>
-        {data.map((item, index) => (
-          <div key={index} className='flex items-center gap-4'>
-            <CustomAvatar skin='light' color={item.avatarColor}>
-              {item.avatarLabel}
-            </CustomAvatar>
-            <div className='flex items-center justify-between is-full flex-wrap gap-x-4 gap-y-2'>
-              <div className='flex flex-col gap-1'>
-                <div className='flex items-center gap-1'>
-                  <Typography color='text.primary' className='font-medium'>
-                    {item.title}
-                  </Typography>
-                  <div className={'flex items-center gap-1'}>
-                    <i
-                      className={classnames(
-                        item.trend === 'up' ? 'ri-arrow-up-s-line' : 'ri-arrow-down-s-line',
-                        item.trend === 'up' ? 'text-success' : 'text-error'
-                      )}
-                    ></i>
-                    <Typography color={item.trend === 'up' ? 'success.main' : 'error.main'}>
-                      {item.trendPercentage}
-                    </Typography>
-                  </div>
-                </div>
-                <Typography>{item.subtitle}</Typography>
-              </div>
-              <div className='flex flex-col gap-1'>
-                <Typography color='text.primary' className='font-medium'>
-                  {item.sales}
-                </Typography>
-                <Typography variant='body2' color='text.disabled'>
-                  Sales
-                </Typography>
-              </div>
-            </div>
-          </div>
-        ))}
-      </CardContent>
-    </Card>
-  )
-}
-
-export default SalesByCountries
diff --git a/typescript-version/src/views/dashboard/Table.tsx b/typescript-version/src/views/dashboard/Table.tsx
deleted file mode 100644
index 349cfbf40..000000000
--- a/typescript-version/src/views/dashboard/Table.tsx
+++ /dev/null
@@ -1,164 +0,0 @@
-// MUI Imports
-import Typography from '@mui/material/Typography'
-import Card from '@mui/material/Card'
-import Chip from '@mui/material/Chip'
-
-// Third-party Imports
-import classnames from 'classnames'
-
-// Components Imports
-import CustomAvatar from '@core/components/mui/Avatar'
-
-// Styles Imports
-import tableStyles from '@core/styles/table.module.css'
-
-type TableBodyRowType = {
-  avatarSrc?: string
-  name: string
-  username: string
-  email: string
-  iconClass: string
-  roleIcon?: string
-  role: string
-  status: string
-}
-
-// Vars
-const rowsData: TableBodyRowType[] = [
-  {
-    avatarSrc: '/images/avatars/1.png',
-    name: 'Jordan Stevenson',
-    username: '@amiccoo',
-    email: 'Jacinthe_Blick@hotmail.com',
-    iconClass: 'text-primary',
-    roleIcon: 'ri-vip-crown-line',
-    role: 'Admin',
-    status: 'pending'
-  },
-  {
-    avatarSrc: '/images/avatars/2.png',
-    name: 'Richard Payne',
-    username: '@brossiter15',
-    email: 'Jaylon_Bartell3@gmail.com',
-    iconClass: 'text-warning',
-    roleIcon: 'ri-edit-box-line',
-    role: 'Editor',
-    status: 'active'
-  },
-  {
-    avatarSrc: '/images/avatars/3.png',
-    name: 'Jennifer Summers',
-    username: '@jsbemblinf',
-    email: 'Tristin_Johnson@gmail.com',
-    iconClass: 'text-error',
-    roleIcon: 'ri-computer-line',
-    role: 'Author',
-    status: 'active'
-  },
-  {
-    avatarSrc: '/images/avatars/4.png',
-    name: 'Mr. Justin Richardson',
-    username: '@justin45',
-    email: 'Toney21@yahoo.com',
-    iconClass: 'text-warning',
-    roleIcon: 'ri-edit-box-line',
-    role: 'Editor',
-    status: 'pending'
-  },
-  {
-    avatarSrc: '/images/avatars/5.png',
-    name: 'Nicholas Tanner',
-    username: '@tannernic',
-    email: 'Hunter_Kuhic68@hotmail.com',
-    iconClass: 'text-info',
-    roleIcon: 'ri-pie-chart-2-line',
-    role: 'Maintainer',
-    status: 'active'
-  },
-  {
-    avatarSrc: '/images/avatars/6.png',
-    name: 'Crystal Mays',
-    username: '@crystal99',
-    email: 'Norene_Bins@yahoo.com',
-    iconClass: 'text-warning',
-    roleIcon: 'ri-edit-box-line',
-    role: 'Editor',
-    status: 'pending'
-  },
-  {
-    avatarSrc: '/images/avatars/7.png',
-    name: 'Mary Garcia',
-    username: '@marygarcia4',
-    email: 'Emmitt.Walker14@hotmail.com',
-    iconClass: 'text-info',
-    roleIcon: 'ri-pie-chart-2-line',
-    role: 'Maintainer',
-    status: 'inactive'
-  },
-  {
-    avatarSrc: '/images/avatars/8.png',
-    name: 'Megan Roberts',
-    username: '@megan78',
-    email: 'Patrick.Howe73@gmail.com',
-    iconClass: 'text-success',
-    roleIcon: 'ri-user-3-line',
-    role: 'Subscriber',
-    status: 'active'
-  }
-]
-
-const Table = () => {
-  return (
-    <Card>
-      <div className='overflow-x-auto'>
-        <table className={tableStyles.table}>
-          <thead>
-            <tr>
-              <th>User</th>
-              <th>Email</th>
-              <th>Role</th>
-              <th>Status</th>
-            </tr>
-          </thead>
-          <tbody>
-            {rowsData.map((row, index) => (
-              <tr key={index}>
-                <td className='!plb-1'>
-                  <div className='flex items-center gap-3'>
-                    <CustomAvatar src={row.avatarSrc} size={34} />
-                    <div className='flex flex-col'>
-                      <Typography color='text.primary' className='font-medium'>
-                        {row.name}
-                      </Typography>
-                      <Typography variant='body2'>{row.username}</Typography>
-                    </div>
-                  </div>
-                </td>
-                <td className='!plb-1'>
-                  <Typography>{row.email}</Typography>
-                </td>
-                <td className='!plb-1'>
-                  <div className='flex gap-2'>
-                    <i className={classnames(row.roleIcon, row.iconClass, 'text-[22px]')} />
-                    <Typography color='text.primary'>{row.role}</Typography>
-                  </div>
-                </td>
-                <td className='!pb-1'>
-                  <Chip
-                    className='capitalize'
-                    variant='tonal'
-                    color={row.status === 'pending' ? 'warning' : row.status === 'inactive' ? 'secondary' : 'success'}
-                    label={row.status}
-                    size='small'
-                  />
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-    </Card>
-  )
-}
-
-export default Table
diff --git a/typescript-version/src/views/dashboard/TotalEarning.tsx b/typescript-version/src/views/dashboard/TotalEarning.tsx
deleted file mode 100644
index 862a6582d..000000000
--- a/typescript-version/src/views/dashboard/TotalEarning.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-// MUI Imports
-import Card from '@mui/material/Card'
-import CardHeader from '@mui/material/CardHeader'
-import CardContent from '@mui/material/CardContent'
-import Avatar from '@mui/material/Avatar'
-import LinearProgress from '@mui/material/LinearProgress'
-
-import Typography from '@mui/material/Typography'
-
-// Type Imports
-import type { ThemeColor } from '@core/types'
-
-// Components Imports
-import OptionMenu from '@core/components/option-menu'
-
-type DataType = {
-  title: string
-  imgSrc: string
-  amount: string
-  progress: number
-  subtitle: string
-  color?: ThemeColor
-}
-
-// Vars
-const data: DataType[] = [
-  {
-    progress: 75,
-    title: 'Zipcar',
-    amount: '$24,895.65',
-    subtitle: 'Vuejs, React & HTML',
-    imgSrc: '/images/cards/zipcar.png'
-  },
-  {
-    progress: 50,
-    color: 'info',
-    title: 'Bitbank',
-    amount: '$8,650.20',
-    subtitle: 'Sketch, Figma & XD',
-    imgSrc: '/images/cards/bitbank.png'
-  },
-  {
-    progress: 20,
-    title: 'Aviato',
-    color: 'secondary',
-    amount: '$1,245.80',
-    subtitle: 'HTML & Angular',
-    imgSrc: '/images/cards/aviato.png'
-  }
-]
-
-const TotalEarning = () => {
-  return (
-    <Card>
-      <CardHeader
-        title='Total Earning'
-        action={<OptionMenu iconClassName='text-textPrimary' options={['Last 28 Days', 'Last Month', 'Last Year']} />}
-      ></CardHeader>
-      <CardContent className='flex flex-col gap-11 md:mbs-2.5'>
-        <div>
-          <div className='flex items-center'>
-            <Typography variant='h3'>$24,895</Typography>
-            <i className='ri-arrow-up-s-line align-bottom text-success'></i>
-            <Typography component='span' color='success.main'>
-              10%
-            </Typography>
-          </div>
-          <Typography>Compared to $84,325 last year</Typography>
-        </div>
-        <div className='flex flex-col gap-6'>
-          {data.map((item, index) => (
-            <div key={index} className='flex items-center gap-3'>
-              <Avatar src={item.imgSrc} variant='rounded' className='bg-actionHover' />
-              <div className='flex justify-between items-center is-full flex-wrap gap-x-4 gap-y-2'>
-                <div className='flex flex-col gap-0.5'>
-                  <Typography color='text.primary' className='font-medium'>
-                    {item.title}
-                  </Typography>
-                  <Typography>{item.subtitle}</Typography>
-                </div>
-                <div className='flex flex-col gap-2 items-center'>
-                  <Typography color='text.primary' className='font-medium'>
-                    {item.amount}
-                  </Typography>
-                  <LinearProgress
-                    variant='determinate'
-                    value={item.progress}
-                    className='is-20 bs-1'
-                    color={item.color}
-                  />
-                </div>
-              </div>
-            </div>
-          ))}
-        </div>
-      </CardContent>
-    </Card>
-  )
-}
-
-export default TotalEarning
diff --git a/typescript-version/src/views/dashboard/Transactions.tsx b/typescript-version/src/views/dashboard/Transactions.tsx
deleted file mode 100644
index 76fcd63bb..000000000
--- a/typescript-version/src/views/dashboard/Transactions.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-//MUI Imports
-import Card from '@mui/material/Card'
-import CardHeader from '@mui/material/CardHeader'
-import CardContent from '@mui/material/CardContent'
-import Typography from '@mui/material/Typography'
-import Grid from '@mui/material/Grid'
-
-// Type Imports
-import type { ThemeColor } from '@core/types'
-
-// Components Imports
-import OptionMenu from '@core/components/option-menu'
-import CustomAvatar from '@core/components/mui/Avatar'
-
-type DataType = {
-  icon: string
-  stats: string
-  title: string
-  color: ThemeColor
-}
-
-// Vars
-const data: DataType[] = [
-  {
-    stats: '245k',
-    title: 'Sales',
-    color: 'primary',
-    icon: 'ri-pie-chart-2-line'
-  },
-  {
-    stats: '12.5k',
-    title: 'Users',
-    color: 'success',
-    icon: 'ri-group-line'
-  },
-  {
-    stats: '1.54k',
-    color: 'warning',
-    title: 'Products',
-    icon: 'ri-macbook-line'
-  },
-  {
-    stats: '$88k',
-    color: 'info',
-    title: 'Revenue',
-    icon: 'ri-money-dollar-circle-line'
-  }
-]
-
-const Transactions = () => {
-  return (
-    <Card className='bs-full'>
-      <CardHeader
-        title='Transactions'
-        action={<OptionMenu iconClassName='text-textPrimary' options={['Refresh', 'Share', 'Update']} />}
-        subheader={
-          <p className='mbs-3'>
-            <span className='font-medium text-textPrimary'>Total 48.5% Growth 😎</span>
-            <span className='text-textSecondary'>this month</span>
-          </p>
-        }
-      />
-      <CardContent className='!pbs-5'>
-        <Grid container spacing={2}>
-          {data.map((item, index) => (
-            <Grid item xs={6} md={3} key={index}>
-              <div className='flex items-center gap-3'>
-                <CustomAvatar variant='rounded' color={item.color} className='shadow-xs'>
-                  <i className={item.icon}></i>
-                </CustomAvatar>
-                <div>
-                  <Typography>{item.title}</Typography>
-                  <Typography variant='h5'>{item.stats}</Typography>
-                </div>
-              </div>
-            </Grid>
-          ))}
-        </Grid>
-      </CardContent>
-    </Card>
-  )
-}
-
-export default Transactions
diff --git a/typescript-version/src/views/dashboard/WeeklyOverview.tsx b/typescript-version/src/views/dashboard/WeeklyOverview.tsx
deleted file mode 100644
index 4f7f80679..000000000
--- a/typescript-version/src/views/dashboard/WeeklyOverview.tsx
+++ /dev/null
@@ -1,116 +0,0 @@
-'use client'
-
-// Next Imports
-import dynamic from 'next/dynamic'
-
-// MUI Imports
-import Card from '@mui/material/Card'
-import Button from '@mui/material/Button'
-import { useTheme } from '@mui/material/styles'
-import CardHeader from '@mui/material/CardHeader'
-import Typography from '@mui/material/Typography'
-import CardContent from '@mui/material/CardContent'
-
-// Third Party Imports
-import type { ApexOptions } from 'apexcharts'
-
-// Components Imports
-import OptionsMenu from '@core/components/option-menu'
-
-// Styled Component Imports
-const AppReactApexCharts = dynamic(() => import('@/libs/styles/AppReactApexCharts'))
-
-const WeeklyOverview = () => {
-  // Hooks
-  const theme = useTheme()
-
-  // Vars
-  const divider = 'var(--mui-palette-divider)'
-  const disabled = 'var(--mui-palette-text-disabled)'
-
-  const options: ApexOptions = {
-    chart: {
-      parentHeightOffset: 0,
-      toolbar: { show: false }
-    },
-    plotOptions: {
-      bar: {
-        borderRadius: 7,
-        distributed: true,
-        columnWidth: '40%'
-      }
-    },
-    stroke: {
-      width: 2,
-      colors: ['var(--mui-palette-background-paper)']
-    },
-    legend: { show: false },
-    grid: {
-      xaxis: { lines: { show: false } },
-      strokeDashArray: 7,
-      padding: { left: -9, top: -20, bottom: 13 },
-      borderColor: divider
-    },
-    dataLabels: { enabled: false },
-    colors: [
-      'var(--mui-palette-customColors-trackBg)',
-      'var(--mui-palette-customColors-trackBg)',
-      'var(--mui-palette-customColors-trackBg)',
-      'var(--mui-palette-primary-main)',
-      'var(--mui-palette-customColors-trackBg)',
-      'var(--mui-palette-customColors-trackBg)'
-    ],
-    states: {
-      hover: {
-        filter: { type: 'none' }
-      },
-      active: {
-        filter: { type: 'none' }
-      }
-    },
-    xaxis: {
-      categories: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
-      tickPlacement: 'on',
-      labels: { show: false },
-      axisTicks: { show: false },
-      axisBorder: { show: false }
-    },
-    yaxis: {
-      show: true,
-      tickAmount: 4,
-      labels: {
-        offsetY: 2,
-        offsetX: -17,
-        style: { colors: disabled, fontSize: theme.typography.body2.fontSize as string },
-        formatter: value => `${value > 999 ? `${(value / 1000).toFixed(0)}` : value}k`
-      }
-    }
-  }
-
-  return (
-    <Card>
-      <CardHeader
-        title='Weekly Overview'
-        action={<OptionsMenu iconClassName='text-textPrimary' options={['Refresh', 'Update', 'Delete']} />}
-      />
-      <CardContent sx={{ '& .apexcharts-xcrosshairs.apexcharts-active': { opacity: 0 } }}>
-        <AppReactApexCharts
-          type='bar'
-          height={206}
-          width='100%'
-          series={[{ name: 'Sales', data: [37, 57, 45, 75, 57, 40, 65] }]}
-          options={options}
-        />
-        <div className='flex items-center mbe-4 gap-4'>
-          <Typography variant='h4'>45%</Typography>
-          <Typography>Your sales performance is 45% 😎 better compared to last month</Typography>
-        </div>
-        <Button fullWidth variant='contained'>
-          Details
-        </Button>
-      </CardContent>
-    </Card>
-  )
-}
-
-export default WeeklyOverview
diff --git a/typescript-version/src/views/form-layouts/FormLayoutsAlignment.tsx b/typescript-version/src/views/form-layouts/FormLayoutsAlignment.tsx
deleted file mode 100644
index 6e441c1da..000000000
--- a/typescript-version/src/views/form-layouts/FormLayoutsAlignment.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-'use client'
-
-// React Imports
-import { useState } from 'react'
-
-// MUI Imports
-import Card from '@mui/material/Card'
-import Grid from '@mui/material/Grid'
-import Button from '@mui/material/Button'
-import TextField from '@mui/material/TextField'
-import Typography from '@mui/material/Typography'
-import Checkbox from '@mui/material/Checkbox'
-import CardHeader from '@mui/material/CardHeader'
-import CardContent from '@mui/material/CardContent'
-import FormControlLabel from '@mui/material/FormControlLabel'
-import InputAdornment from '@mui/material/InputAdornment'
-import IconButton from '@mui/material/IconButton'
-
-const FormLayoutsAlignment = () => {
-  // States
-  const [isPasswordShown, setIsPasswordShown] = useState(false)
-
-  const handleClickShowPassword = () => setIsPasswordShown(show => !show)
-
-  return (
-    <Card>
-      <CardHeader title='Form Alignment' />
-      <CardContent className='flex flex-col items-center justify-center bs-[500px]'>
-        <form onSubmit={e => e.preventDefault()} className='p-12 max-is-[400px] border rounded'>
-          <Grid container spacing={5}>
-            <Grid item xs={12}>
-              <Typography variant='h5'>Sign In</Typography>
-            </Grid>
-            <Grid item xs={12}>
-              <TextField fullWidth label='Username' placeholder='johnDoe ' />
-            </Grid>
-            <Grid item xs={12}>
-              <TextField
-                fullWidth
-                label='Password'
-                placeholder='············'
-                id='form-layout-alignment-password'
-                type={isPasswordShown ? 'text' : 'password'}
-                InputProps={{
-                  endAdornment: (
-                    <InputAdornment position='end'>
-                      <IconButton
-                        size='small'
-                        edge='end'
-                        onClick={handleClickShowPassword}
-                        onMouseDown={e => e.preventDefault()}
-                        aria-label='toggle password visibility'
-                      >
-                        <i className={isPasswordShown ? 'ri-eye-off-line' : 'ri-eye-line'} />
-                      </IconButton>
-                    </InputAdornment>
-                  )
-                }}
-              />
-            </Grid>
-            <Grid item xs={12} className='pbs-2'>
-              <FormControlLabel control={<Checkbox />} label='Remember me' />
-            </Grid>
-            <Grid item xs={12} className='pbs-2'>
-              <Button variant='contained' type='submit' fullWidth>
-                Log In
-              </Button>
-            </Grid>
-          </Grid>
-        </form>
-      </CardContent>
-    </Card>
-  )
-}
-
-export default FormLayoutsAlignment
diff --git a/typescript-version/src/views/form-layouts/FormLayoutsBasic.tsx b/typescript-version/src/views/form-layouts/FormLayoutsBasic.tsx
deleted file mode 100644
index 413ce1314..000000000
--- a/typescript-version/src/views/form-layouts/FormLayoutsBasic.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-'use client'
-
-// React Imports
-import { useState } from 'react'
-
-// Next Imports
-import Link from 'next/link'
-
-// MUI Imports
-import Card from '@mui/material/Card'
-import Grid from '@mui/material/Grid'
-import Button from '@mui/material/Button'
-import TextField from '@mui/material/TextField'
-import Typography from '@mui/material/Typography'
-import CardHeader from '@mui/material/CardHeader'
-import CardContent from '@mui/material/CardContent'
-import IconButton from '@mui/material/IconButton'
-import InputAdornment from '@mui/material/InputAdornment'
-
-const FormLayoutsBasic = () => {
-  // States
-  const [isPasswordShown, setIsPasswordShown] = useState(false)
-  const [isConfirmPasswordShown, setIsConfirmPasswordShown] = useState(false)
-
-  const handleClickShowPassword = () => setIsPasswordShown(show => !show)
-
-  const handleClickShowConfirmPassword = () => setIsConfirmPasswordShown(show => !show)
-
-  return (
-    <Card>
-      <CardHeader title='Basic' />
-      <CardContent>
-        <form onSubmit={e => e.preventDefault()}>
-          <Grid container spacing={5}>
-            <Grid item xs={12}>
-              <TextField fullWidth label='Name' placeholder='John Doe' />
-            </Grid>
-            <Grid item xs={12}>
-              <TextField
-                fullWidth
-                type='email'
-                label='Email'
-                placeholder='johndoe@gmail.com'
-                helperText='You can use letters, numbers & periods'
-              />
-            </Grid>
-            <Grid item xs={12}>
-              <TextField
-                fullWidth
-                label='Password'
-                placeholder='············'
-                id='form-layout-basic-password'
-                type={isPasswordShown ? 'text' : 'password'}
-                helperText='Use 8 or more characters with a mix of letters, numbers & symbols'
-                InputProps={{
-                  endAdornment: (
-                    <InputAdornment position='end'>
-                      <IconButton
-                        size='small'
-                        edge='end'
-                        onClick={handleClickShowPassword}
-                        onMouseDown={e => e.preventDefault()}
-                        aria-label='toggle password visibility'
-                      >
-                        <i className={isPasswordShown ? 'ri-eye-off-line' : 'ri-eye-line'} />
-                      </IconButton>
-                    </InputAdornment>
-                  )
-                }}
-              />
-            </Grid>
-            <Grid item xs={12}>
-              <TextField
-                fullWidth
-                label='Confirm Password'
-                placeholder='············'
-                id='form-layout-basic-confirm-password'
-                type={isConfirmPasswordShown ? 'text' : 'password'}
-                helperText='Make sure to type the same password as above'
-                InputProps={{
-                  endAdornment: (
-                    <InputAdornment position='end'>
-                      <IconButton
-                        size='small'
-                        edge='end'
-                        onClick={handleClickShowConfirmPassword}
-                        onMouseDown={e => e.preventDefault()}
-                        aria-label='toggle confirm password visibility'
-                      >
-                        <i className={isConfirmPasswordShown ? 'ri-eye-off-line' : 'ri-eye-line'} />
-                      </IconButton>
-                    </InputAdornment>
-                  )
-                }}
-              />
-            </Grid>
-            <Grid item xs={12}>
-              <div className='flex items-center justify-between flex-wrap gap-5'>
-                <Button variant='contained' type='submit'>
-                  Get Started!
-                </Button>
-                <div className='flex items-center justify-center gap-2'>
-                  <Typography color='text.primary'>Already have an account?</Typography>
-                  <Link href='/' onClick={e => e.preventDefault()} className='text-primary'>
-                    Log In
-                  </Link>
-                </div>
-              </div>
-            </Grid>
-          </Grid>
-        </form>
-      </CardContent>
-    </Card>
-  )
-}
-
-export default FormLayoutsBasic
diff --git a/typescript-version/src/views/form-layouts/FormLayoutsIcons.tsx b/typescript-version/src/views/form-layouts/FormLayoutsIcons.tsx
deleted file mode 100644
index f523de745..000000000
--- a/typescript-version/src/views/form-layouts/FormLayoutsIcons.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-// MUI Imports
-import Card from '@mui/material/Card'
-import Grid from '@mui/material/Grid'
-import Button from '@mui/material/Button'
-import TextField from '@mui/material/TextField'
-import CardHeader from '@mui/material/CardHeader'
-import CardContent from '@mui/material/CardContent'
-import InputAdornment from '@mui/material/InputAdornment'
-
-// Component Imports
-import Form from '@components/Form'
-
-const FormLayoutsWithIcon = () => {
-  return (
-    <Card>
-      <CardHeader title='Basic with Icons' />
-      <CardContent>
-        <Form>
-          <Grid container spacing={5}>
-            <Grid item xs={12}>
-              <TextField
-                fullWidth
-                label='Name'
-                placeholder='John Doe'
-                InputProps={{
-                  startAdornment: (
-                    <InputAdornment position='start'>
-                      <i className='ri-user-3-line' />
-                    </InputAdornment>
-                  )
-                }}
-              />
-            </Grid>
-            <Grid item xs={12}>
-              <TextField
-                fullWidth
-                type='email'
-                label='Email'
-                placeholder='johndoe@gmail.com'
-                InputProps={{
-                  startAdornment: (
-                    <InputAdornment position='start'>
-                      <i className='ri-mail-line' />
-                    </InputAdornment>
-                  )
-                }}
-              />
-            </Grid>
-            <Grid item xs={12}>
-              <TextField
-                fullWidth
-                label='Phone No.'
-                placeholder='123-456-7890'
-                InputProps={{
-                  startAdornment: (
-                    <InputAdornment position='start'>
-                      <i className='ri-phone-fill' />
-                    </InputAdornment>
-                  )
-                }}
-              />
-            </Grid>
-            <Grid item xs={12}>
-              <TextField
-                fullWidth
-                rows={4}
-                multiline
-                label='Message'
-                placeholder='Bio...'
-                sx={{ '& .MuiOutlinedInput-root': { alignItems: 'baseline' } }}
-                InputProps={{
-                  startAdornment: (
-                    <InputAdornment position='start'>
-                      <i className='ri-message-2-line' />
-                    </InputAdornment>
-                  )
-                }}
-              />
-            </Grid>
-            <Grid item xs={12}>
-              <Button variant='contained' type='submit'>
-                Submit
-              </Button>
-            </Grid>
-          </Grid>
-        </Form>
-      </CardContent>
-    </Card>
-  )
-}
-
-export default FormLayoutsWithIcon
diff --git a/typescript-version/src/views/pages/misc/UnderMaintenance.tsx b/typescript-version/src/views/pages/misc/UnderMaintenance.tsx
deleted file mode 100644
index 0a81cc605..000000000
--- a/typescript-version/src/views/pages/misc/UnderMaintenance.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-'use client'
-
-// Next Imports
-import Link from 'next/link'
-
-// MUI Imports
-import Button from '@mui/material/Button'
-import Typography from '@mui/material/Typography'
-
-// Type Imports
-import type { Mode } from '@core/types'
-
-// Component Imports
-import Illustrations from '@components/Illustrations'
-
-// Hook Imports
-import { useImageVariant } from '@core/hooks/useImageVariant'
-
-const UnderMaintenance = ({ mode }: { mode: Mode }) => {
-  // Vars
-  const darkImg = '/images/pages/misc-mask-dark.png'
-  const lightImg = '/images/pages/misc-mask-light.png'
-
-  // Hooks
-  const miscBackground = useImageVariant(mode, lightImg, darkImg)
-
-  return (
-    <div className='flex items-center justify-center min-bs-[100dvh] relative p-6 overflow-x-hidden'>
-      <div className='flex items-center flex-col text-center gap-10'>
-        <div className='flex flex-col gap-2 is-[90vw] sm:is-[unset]'>
-          <Typography variant='h4'>Under Maintenance! 🚧</Typography>
-          <Typography>Sorry for the inconvenience but we&#39;re performing some maintenance at the moment</Typography>
-        </div>
-        <img
-          alt='error-illustration'
-          src='/images/illustrations/characters/6.png'
-          className='object-cover bs-[400px] md:bs-[450px] lg:bs-[500px]'
-        />
-        <Button href='/' component={Link} variant='contained'>
-          Back to Home
-        </Button>
-      </div>
-      <Illustrations maskImg={{ src: miscBackground }} />
-    </div>
-  )
-}
-
-export default UnderMaintenance
diff --git a/typescript-version/tailwind.config.ts b/typescript-version/tailwind.config.ts
deleted file mode 100644
index e47b1f0ac..000000000
--- a/typescript-version/tailwind.config.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import type { Config } from 'tailwindcss'
-
-const config: Config = {
-  content: ['./src/**/*.{js,ts,jsx,tsx,css}'],
-  corePlugins: {
-    preflight: false
-  },
-  important: '#__next',
-  plugins: [require('tailwindcss-logical'), require('./src/@core/tailwind/plugin')],
-  theme: {
-    extend: {}
-  }
-}
-
-export default config