From 78ac4a28e39ce2695a907c4df445d9f4ba02a025 Mon Sep 17 00:00:00 2001
From: jSasaki <takatsugu.sasaki@anti-pattern.co.jp>
Date: Fri, 26 Sep 2025 11:21:10 +0900
Subject: [PATCH 1/6] add-plan-setting-page

---
 src/App.tsx                    |   2 +
 src/pages/BillingDashboard.tsx |  48 ++-
 src/pages/PlanSettings.tsx     | 755 +++++++++++++++++++++++++++++++++
 src/pages/TenantList.tsx       |   4 +-
 src/pages/UserPage.tsx         |   9 +
 src/types/billing.ts           |  45 +-
 src/types/index.ts             |  23 +-
 src/utils.ts                   |  18 +-
 8 files changed, 862 insertions(+), 42 deletions(-)
 create mode 100644 src/pages/PlanSettings.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 7c133e3..055a9a4 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -13,6 +13,7 @@ import UserRegister from "./pages/UserRegister";
 import DeleteUserLog from "./pages/DeleteUserLog";
 import SelfSignUp from "./pages/SelfSignUp";
 import BillingDashboard from "./pages/BillingDashboard";
+import PlanSettings from "./pages/PlanSettings";
 import HeaderUserbox from "./components/header/HeaderUserbox";
 import UserInvitation from "./pages/UserInvitation";
 
@@ -41,6 +42,7 @@ const AppContent = () => {
           <Route path="/self_sign_up" element={<SelfSignUp />} />
           <Route path="/user_invitation" element={<UserInvitation />} />
           <Route path="/billing" element={<BillingDashboard />} />
+          <Route path="/plan-settings" element={<PlanSettings />} />
         </Route>
       </Routes>
     </>
diff --git a/src/pages/BillingDashboard.tsx b/src/pages/BillingDashboard.tsx
index bb4f24f..e94cbe4 100644
--- a/src/pages/BillingDashboard.tsx
+++ b/src/pages/BillingDashboard.tsx
@@ -2,14 +2,17 @@ import axios from "axios";
 import { useEffect, useState } from "react";
 import { useNavigate, useLocation } from "react-router-dom";
 import { API_ENDPOINT, LOGIN_URL } from "../const";
-import { idTokenCheck, randomUnixBetween, handleUserListClick } from "../utils";
+import {
+  idTokenCheck,
+  randomUnixBetween,
+  navigateToUserPageByRole,
+} from "../utils";
+import { UserInfo, Tenant } from "../types";
 import {
   BillingDashboardData,
   MeteringUnitBilling,
   PlanPeriodOption,
-  UserInfo,
-  Tenant,
-} from "../types";
+} from "../types/billing";
 import { Dialog, Transition } from "@headlessui/react";
 import { Fragment } from "react";
 import { XMarkIcon } from "@heroicons/react/24/outline";
@@ -50,7 +53,11 @@ const BillingDashboard = () => {
     Authorization: `Bearer ${jwtToken}`,
     "X-SaaSus-Referer": pagePath, // すべてのAPIでこの共通のパスを使用
   };
-  const getMeteringActionHeaders = (actionName: string, isAdd: boolean, value: number) => {
+  const getMeteringActionHeaders = (
+    actionName: string,
+    isAdd: boolean,
+    value: number
+  ) => {
     const method = isAdd ? "add" : "sub";
     return {
       ...commonHeaders,
@@ -126,7 +133,10 @@ const BillingDashboard = () => {
       const seen = new Set<string>();
       const uniqueMeters: MeteringUnitBilling[] = [];
       for (const u of data.metering_unit_billings) {
-        if (u.metering_unit_type !== "fixed" && !seen.has(u.metering_unit_name)) {
+        if (
+          u.metering_unit_type !== "fixed" &&
+          !seen.has(u.metering_unit_name)
+        ) {
           seen.add(u.metering_unit_name);
           uniqueMeters.push(u);
         }
@@ -229,10 +239,6 @@ const BillingDashboard = () => {
     if (!tenantId || !selectedPeriod) return;
     if (count <= 0) return;
 
-    const nowUnix = Math.floor(Date.now() / 1000);
-    const end = Math.min(selectedPeriod.end, nowUnix);
-    const ts = randomUnixBetween(selectedPeriod.start, end);
-
     try {
       await axios.post(
         `${API_ENDPOINT}/billing/metering/${tenantId}/${meterName}`,
@@ -241,7 +247,11 @@ const BillingDashboard = () => {
           count,
         },
         {
-          headers: getMeteringActionHeaders("update_meter_inline", isAdd, count),
+          headers: getMeteringActionHeaders(
+            "update_meter_inline",
+            isAdd,
+            count
+          ),
         }
       );
 
@@ -291,16 +301,6 @@ const BillingDashboard = () => {
     }
   }, [roleName, selectedPeriod, periodOptions]);
 
-  const buildMeteringReferer = (
-    prefix: string,
-    isAdd: boolean,
-    count: number
-  ): string => {
-    // ["add",3] or ["sub",1] という配列を文字列化
-    const payload = JSON.stringify([isAdd ? "add" : "sub", count]);
-    return `${prefix}:${payload}`;
-  };
-
   const formatNumber = (num: number): string => {
     return num.toLocaleString();
   };
@@ -573,7 +573,7 @@ const BillingDashboard = () => {
           </table>
         </div>
       </div>
-        {/* ▼ 注意書き */}
+      {/* ▼ 注意書き */}
       <div className="mt-2">
         <span className="ml-2 text-red-600 text-sm">
           ※Stripe連携を行っている場合、減算や過去のメータに対する変更はできません。
@@ -701,7 +701,9 @@ const BillingDashboard = () => {
       {/* ユーザー一覧へ戻るボタン */}
       <div className="flex justify-center mt-8 pt-6 border-t border-gray-200">
         <button
-          onClick={() => handleUserListClick(tenantId!, navigate)}
+          onClick={() =>
+            navigateToUserPageByRole(tenantId!, navigate, pagePath)
+          }
           className="bg-gray-600 hover:bg-gray-700 text-white font-semibold px-6 py-3 rounded-lg shadow"
         >
           ユーザー一覧に戻る
diff --git a/src/pages/PlanSettings.tsx b/src/pages/PlanSettings.tsx
new file mode 100644
index 0000000..c731de1
--- /dev/null
+++ b/src/pages/PlanSettings.tsx
@@ -0,0 +1,755 @@
+import axios from "axios";
+import { useEffect, useState } from "react";
+import { useNavigate, useLocation } from "react-router-dom";
+import { API_ENDPOINT } from "../const";
+import { idTokenCheck, navigateToUserPageByRole } from "../utils";
+import { Tenant } from "../types";
+import { PlanInfo, TaxRate, PricingPlan } from "../types/billing";
+
+// 定数定義
+const PLAN_SETTINGS_CONSTANTS = {
+  DELAYS: {
+    PLAN_CHANGE_SECONDS: 300, // 5分
+    EDIT_LOCK_THRESHOLD_SECONDS: 600, // 10分
+  },
+  MESSAGES: {
+    PLAN_UPDATE_SUCCESS: "プランの変更が完了しました。",
+    PLAN_UPDATE_ERROR: "プラン更新に失敗しました。",
+    PLAN_CANCEL_ERROR: "プラン解除に失敗しました。",
+    RESERVATION_CANCEL_ERROR: "予約取り消しに失敗しました。",
+    TENANT_INFO_ERROR: "テナント情報の取得に失敗しました。",
+    PRICING_PLANS_ERROR: "プラン一覧の取得に失敗しました。",
+    TAX_RATES_ERROR: "税率一覧の取得に失敗しました。",
+    MISSING_TENANT_OR_PLAN: "テナントIDまたはプランIDが設定されていません。",
+  },
+  UI: {
+    IMMEDIATE_LABEL: "すぐ反映（5分後）",
+    CUSTOM_LABEL: "日時指定",
+    UNSELECTED: "未選択",
+    LOADING: "読み込み中...",
+  }
+} as const;
+
+// プラン更新データの型定義
+interface PlanUpdateData {
+  next_plan_id: string;
+  tax_rate_id?: string;
+  using_next_plan_from?: number;
+}
+
+// APIエラーレスポンスの型定義
+interface ApiErrorResponse {
+  response?: {
+    data?: {
+      error?: string;
+    };
+  };
+  message?: string;
+}
+
+const PlanSettings = () => {
+  const [tenantId, setTenantId] = useState<string | null>(null);
+  const [tenantInfo, setTenantInfo] = useState<Tenant | null>(null);
+  const [currentPlan, setCurrentPlan] = useState<PlanInfo | null>(null);
+  const [pricingPlans, setPricingPlans] = useState<PricingPlan[]>([]);
+  const [taxRates, setTaxRates] = useState<TaxRate[]>([]);
+  const [selectedPlanId, setSelectedPlanId] = useState<string>("");
+  const [selectedTaxRateId, setSelectedTaxRateId] = useState<string>("");
+  const [usingNextPlanFrom, setUsingNextPlanFrom] = useState<string>("immediate");
+  const [customDate, setCustomDate] = useState<string>("");
+  const [updateLoading, setUpdateLoading] = useState<boolean>(false);
+  const [showConfirmModal, setShowConfirmModal] = useState<boolean>(false);
+  const [showCompletedModal, setShowCompletedModal] = useState<boolean>(false);
+  const [showCancelModal, setShowCancelModal] = useState<boolean>(false);
+  const [cancelLoading, setCancelLoading] = useState<boolean>(false);
+  const [showReservationCancelModal, setShowReservationCancelModal] = useState<boolean>(false);
+  const [reservationCancelLoading, setReservationCancelLoading] = useState<boolean>(false);
+  
+  const navigate = useNavigate();
+  const location = useLocation();
+  const pagePath = location.pathname;
+  const jwtToken = window.localStorage.getItem("SaaSusIdToken") as string;
+
+  const commonHeaders = {
+    "X-Requested-With": "XMLHttpRequest",
+    Authorization: `Bearer ${jwtToken}`,
+    "X-SaaSus-Referer": pagePath,
+  };
+
+  const getActionHeaders = (actionName: string) => {
+    return {
+      ...commonHeaders,
+      "X-SaaSus-Referer": `${pagePath}?action=${actionName}`,
+    };
+  };
+
+  // テナント情報取得（予約情報含む）
+  const getTenantInfo = async (tenantId: string) => {
+    try {
+      const tenantDetailRes = await axios.get(`${API_ENDPOINT}/tenants/${tenantId}/plan`, {
+        headers: commonHeaders,
+        withCredentials: true,
+      });
+      
+      if (tenantDetailRes.data) {
+        const detailedTenant = tenantDetailRes.data;
+        setTenantInfo(detailedTenant);
+        
+        // 現在のプラン情報を取得
+        if (detailedTenant.plan_id) {
+          const planRes = await axios.get<PlanInfo>(`${API_ENDPOINT}/pricing_plan`, {
+            headers: commonHeaders,
+            withCredentials: true,
+            params: { plan_id: detailedTenant.plan_id },
+          });
+          setCurrentPlan(planRes.data);
+        }
+      }
+    } catch (error) {
+      console.error("テナント情報の取得に失敗しました:", error);
+      const errorMessage = handleApiError(error, PLAN_SETTINGS_CONSTANTS.MESSAGES.TENANT_INFO_ERROR);
+      showError(errorMessage);
+    }
+  };
+
+  // プラン一覧取得
+  const getPricingPlans = async () => {
+    try {
+      const response = await axios.get(`${API_ENDPOINT}/pricing_plans`, {
+        headers: commonHeaders,
+        withCredentials: true,
+      });
+      
+      if (response.data && Array.isArray(response.data)) {
+        setPricingPlans(response.data);
+      } else {
+        setPricingPlans([]);
+      }
+    } catch (error) {
+      console.error("プラン一覧の取得に失敗しました:", error);
+      const errorMessage = handleApiError(error, PLAN_SETTINGS_CONSTANTS.MESSAGES.PRICING_PLANS_ERROR);
+      showError(errorMessage);
+      setPricingPlans([]);
+    }
+  };
+
+  // 税率一覧取得
+  const getTaxRates = async () => {
+    try {
+      const response = await axios.get(`${API_ENDPOINT}/tax_rates`, {
+        headers: commonHeaders,
+        withCredentials: true,
+      });
+      
+      if (response.data && Array.isArray(response.data)) {
+        setTaxRates(response.data);
+      } else {
+        setTaxRates([]);
+      }
+    } catch (error) {
+      console.error("税率一覧の取得に失敗しました:", error);
+      const errorMessage = handleApiError(error, PLAN_SETTINGS_CONSTANTS.MESSAGES.TAX_RATES_ERROR);
+      showError(errorMessage);
+      setTaxRates([]);
+    }
+  };
+
+  // 最新のテナント情報を再取得
+  const refreshTenantInfo = async () => {
+    if (tenantId) {
+      await getTenantInfo(tenantId);
+    }
+  };
+
+  // エラー表示の統一処理
+  const showError = (message: string) => {
+    alert(message); // 後でトーストやモーダルに置き換え可能
+  };
+
+  // 汎用エラーハンドリング関数
+  const handleApiError = (error: unknown, fallbackMessage: string): string => {
+    const apiError = error as ApiErrorResponse;
+    
+    // APIエラーメッセージの優先順位
+    if (apiError.response?.data?.error) {
+      return apiError.response.data.error;
+    }
+    
+    if (apiError.message) {
+      return apiError.message;
+    }
+    
+    // フォールバックメッセージ
+    return fallbackMessage;
+  };
+
+  // プラン更新データの作成
+  const buildPlanUpdateData = (): PlanUpdateData => {
+    const updateData: PlanUpdateData = {
+      next_plan_id: selectedPlanId,
+    };
+
+    // 税率IDが指定されている場合のみ設定
+    if (selectedTaxRateId) {
+      updateData.tax_rate_id = selectedTaxRateId;
+    }
+
+    // カスタム日時が指定されている場合のみ using_next_plan_from を設定
+    if (usingNextPlanFrom === "custom" && customDate) {
+      updateData.using_next_plan_from = Math.floor(new Date(customDate).getTime() / 1000);
+    }
+
+    return updateData;
+  };
+
+  // プラン更新の入力値検証
+  const validatePlanUpdateInput = (): boolean => {
+    if (!tenantId || !selectedPlanId) {
+      showError(PLAN_SETTINGS_CONSTANTS.MESSAGES.MISSING_TENANT_OR_PLAN);
+      return false;
+    }
+    return true;
+  };
+
+  // プラン更新APIの実行
+  const executePlanUpdate = async (updateData: PlanUpdateData): Promise<void> => {
+    await axios.put(`${API_ENDPOINT}/tenants/${tenantId}/plan`, updateData, {
+      headers: getActionHeaders("plan_update"),
+      withCredentials: true,
+    });
+  };
+
+  // プラン更新処理
+  const handlePlanUpdate = async () => {
+    // 入力値検証
+    if (!validatePlanUpdateInput()) {
+      return;
+    }
+
+    setUpdateLoading(true);
+    try {
+      // 更新データの作成
+      const updateData = buildPlanUpdateData();
+      
+      // API実行
+      await executePlanUpdate(updateData);
+
+      // 成功時の処理
+      setShowConfirmModal(false);
+      setShowCompletedModal(true);
+    } catch (error) {
+      console.error("プラン更新に失敗しました:", error);
+      
+      // エラーメッセージの抽出と表示
+      const errorMessage = handleApiError(error, PLAN_SETTINGS_CONSTANTS.MESSAGES.PLAN_UPDATE_ERROR);
+      showError(errorMessage);
+      
+      setUpdateLoading(false);  
+    }
+  };
+
+  useEffect(() => {
+    const startPlanSettings = async () => {
+      const urlParams = new URLSearchParams(window.location.search);
+      const tenantIdFromQuery = urlParams.get("tenant_id");
+      
+      if (!tenantIdFromQuery) {
+        navigate("/");
+        return;
+      }
+
+      setTenantId(tenantIdFromQuery);
+      await idTokenCheck(jwtToken);
+      await getTenantInfo(tenantIdFromQuery);
+      await getPricingPlans();
+      await getTaxRates();
+    };
+    
+    startPlanSettings();
+  }, []);
+
+  const getPlanDisplayName = (planId: string) => {
+    if (!planId) return PLAN_SETTINGS_CONSTANTS.UI.UNSELECTED;
+    const plan = pricingPlans.find(p => p && p.id === planId);
+    return plan ? (plan.display_name || plan.name || plan.id) : PLAN_SETTINGS_CONSTANTS.UI.LOADING;
+  };
+
+  const getTaxRateDisplayName = (taxRateId: string) => {
+    if (!taxRateId) return PLAN_SETTINGS_CONSTANTS.UI.UNSELECTED;
+    const taxRate = taxRates.find(tr => tr.id === taxRateId);
+    return taxRate ? `${taxRate.display_name} (${taxRate.percentage}%)` : PLAN_SETTINGS_CONSTANTS.UI.LOADING;
+  };
+
+  // 編集可能かどうかの判定（変更予定日時が現在日時と10分差ない場合は編集不可）
+  const canEdit = (): boolean => {
+    if (!tenantInfo?.plan_reservation?.using_next_plan_from) {
+      return true;
+    }
+    
+    const now = Math.floor(Date.now() / 1000);
+    const timeDiff = tenantInfo.plan_reservation.using_next_plan_from - now;
+    
+    // 変更予定日時が現在日時と10分差ない場合は、編集不可
+    if (timeDiff < PLAN_SETTINGS_CONSTANTS.DELAYS.EDIT_LOCK_THRESHOLD_SECONDS) {
+      return false;
+    }
+    return true;
+  };
+
+  // プラン解除ボタンの表示条件
+  const cancelButtonIsVisible = (): boolean => {
+    // 現在のプランなし
+    if (!tenantInfo?.plan_id) {
+      return false;
+    }
+    
+    // すでにプランが解除予定になっている場合は、非表示
+    if (!tenantInfo.plan_reservation?.next_plan_id && tenantInfo.plan_reservation?.using_next_plan_from) {
+      return false;
+    }
+    
+    return true;
+  };
+
+  // 変更予定削除ボタンの表示条件
+  const deleteScheduleButtonIsVisible = (): boolean => {
+    // 変更予定日時がない場合は、非表示
+    if (!tenantInfo?.plan_reservation?.using_next_plan_from) {
+      return false;
+    }
+    
+    return true;
+  };
+
+  // プラン解除処理
+  const handlePlanCancel = async () => {
+    if (!tenantId) return;
+    
+    setCancelLoading(true);
+    try {
+      // プラン解除時は5分後に設定
+      const usingNextPlanFrom = Math.floor(Date.now() / 1000) + PLAN_SETTINGS_CONSTANTS.DELAYS.PLAN_CHANGE_SECONDS;
+      
+      await axios.put(
+        `${API_ENDPOINT}/tenants/${tenantId}/plan`,
+        {
+          next_plan_id: "",
+          using_next_plan_from: usingNextPlanFrom,
+        },
+        {
+          headers: getActionHeaders("plan_cancel"),
+          withCredentials: true,
+        }
+      );
+      setShowCancelModal(false);
+      await refreshTenantInfo();
+    } catch (error) {
+      console.error("プラン解除に失敗しました:", error);
+      const errorMessage = handleApiError(error, PLAN_SETTINGS_CONSTANTS.MESSAGES.PLAN_CANCEL_ERROR);
+      showError(errorMessage);
+    }
+    setCancelLoading(false);
+  };
+
+  // 予約取り消し処理
+  const handleReservationCancel = async () => {
+    if (!tenantId) return;
+    
+    setReservationCancelLoading(true);
+    try {
+      // 予約を取り消すために、プラン更新APIを空のリクエストボディで呼び出す
+      await axios.put(
+        `${API_ENDPOINT}/tenants/${tenantId}/plan`,
+        {},
+        {
+          headers: getActionHeaders("reservation_cancel"),
+          withCredentials: true,
+        }
+      );
+      setShowReservationCancelModal(false);
+      await refreshTenantInfo();
+    } catch (error) {
+      console.error("予約取り消しに失敗しました:", error);
+      const errorMessage = handleApiError(error, PLAN_SETTINGS_CONSTANTS.MESSAGES.RESERVATION_CANCEL_ERROR);
+      showError(errorMessage);
+    }
+    setReservationCancelLoading(false);
+  };
+
+  // ロールに応じたナビゲーション
+  const navigateToUserPage = async () => {
+    if (!tenantId) return;
+    await navigateToUserPageByRole(tenantId, navigate, pagePath);
+  };
+
+  return (
+    <div className="p-6 max-w-4xl mx-auto">
+      <div className="mb-6">
+        <h1 className="text-2xl font-bold text-gray-800">プラン設定</h1>
+        <p className="text-gray-600 mt-2">テナントの料金プランを変更できます。</p>
+        
+        {/* 編集不可の場合の説明をページ上部に1箇所のみ表示 */}
+        {!canEdit() && (
+          <div className="mt-4 p-4 bg-orange-50 border border-orange-200 rounded-lg">
+            <div className="flex items-center">
+              <div className="flex-shrink-0">
+                <svg className="h-5 w-5 text-orange-400" viewBox="0 0 20 20" fill="currentColor">
+                  <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
+                </svg>
+              </div>
+              <div className="ml-3">
+                <p className="text-sm text-orange-800">
+                  <strong>編集制限中:</strong> 変更予定が10分以内のため、プラン設定・解除・予約取り消しができません。
+                </p>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* 現在のプラン情報 */}
+      <div className="bg-white shadow-md rounded-lg p-6 mb-6">
+        <div className="flex justify-between items-center mb-4">
+          <h2 className="text-lg font-semibold text-gray-800">現在のプラン</h2>
+          {/* プラン解除ボタン: SaaSus Platformと同じ制御 */}
+          {cancelButtonIsVisible() && canEdit() && (
+            <button
+              onClick={() => setShowCancelModal(true)}
+              className="px-4 py-2 bg-red-600 text-white text-sm rounded hover:bg-red-700"
+            >
+              プラン解除
+            </button>
+          )}
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div>
+            <span className="font-medium text-gray-600">現在のプラン：</span>
+            <span>{currentPlan?.display_name || "未設定"}</span>
+          </div>
+          <div>
+            <span className="font-medium text-gray-600">現在の税率：</span>
+            <span>
+              {tenantInfo?.tax_rate_id 
+                ? getTaxRateDisplayName(tenantInfo.tax_rate_id)
+                : "未設定"
+              }
+            </span>
+          </div>
+          {/* 予約情報の表示 */}
+          {tenantInfo?.plan_reservation && (
+            <>
+              <div className="md:col-span-2">
+                <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
+                  <div className="flex justify-between items-center mb-2">
+                    <h3 className="font-medium text-blue-800">プラン変更予約</h3>
+                    {/* 予約取り消しボタン: SaaSus Platformと同じ制御 */}
+                    {deleteScheduleButtonIsVisible() && canEdit() && (
+                      <button
+                        onClick={() => setShowReservationCancelModal(true)}
+                        className="px-3 py-1 bg-orange-500 text-white text-sm rounded hover:bg-orange-600"
+                      >
+                        予約取り消し
+                      </button>
+                    )}
+                  </div>
+                  <div className="grid grid-cols-1 md:grid-cols-3 gap-2 text-sm">
+                    <div>
+                      <span className="font-medium text-blue-700">予約プラン：</span>
+                      <span>{getPlanDisplayName(tenantInfo.plan_reservation.next_plan_id || "")}</span>
+                    </div>
+                    <div>
+                      <span className="font-medium text-blue-700">変更予定日時：</span>
+                      <span>
+                        {tenantInfo.plan_reservation.using_next_plan_from 
+                          ? new Date(tenantInfo.plan_reservation.using_next_plan_from * 1000).toLocaleString('ja-JP')
+                          : "未設定"
+                        }
+                      </span>
+                    </div>
+                    <div>
+                      <span className="font-medium text-blue-700">変更予定税率：</span>
+                      <span>
+                        {tenantInfo.plan_reservation.next_plan_tax_rate_id 
+                          ? getTaxRateDisplayName(tenantInfo.plan_reservation.next_plan_tax_rate_id)
+                          : "未設定"
+                        }
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+
+      {/* プラン変更フォーム */}
+      <div className="bg-white shadow-md rounded-lg p-6">
+        <div className="flex justify-between items-center mb-4">
+          <h2 className="text-lg font-semibold text-gray-800">プラン変更</h2>
+        </div>
+        
+        <div className="space-y-4">
+          {/* プラン選択 */}
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-2">
+              新しいプラン
+            </label>
+            <select
+              value={selectedPlanId}
+              onChange={(e) => setSelectedPlanId(e.target.value)}
+              disabled={!canEdit()}
+              className={`w-full p-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${
+                !canEdit() ? 'bg-gray-100 cursor-not-allowed' : ''
+              }`}
+            >
+              <option value="">プランを選択してください</option>
+              {pricingPlans.length > 0 ? (
+                pricingPlans.map((plan) => {
+                  if (!plan || !plan.id) {
+                    return null;
+                  }
+                  return (
+                    <option key={plan.id} value={plan.id}>
+                      {plan.display_name || plan.name || plan.id} - {plan.description || "説明なし"}
+                    </option>
+                  );
+                }).filter(Boolean)
+              ) : (
+                <option value="" disabled>プランが見つかりません</option>
+              )}
+            </select>
+          </div>
+
+          {/* 税率選択 */}
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-2">
+              税率
+            </label>
+            <select
+              value={selectedTaxRateId}
+              onChange={(e) => setSelectedTaxRateId(e.target.value)}
+              disabled={!canEdit()}
+              className={`w-full p-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${
+                !canEdit() ? 'bg-gray-100 cursor-not-allowed' : ''
+              }`}
+            >
+              <option value="">使用しない</option>
+              {taxRates.length > 0 ? (
+                taxRates.map((taxRate) => (
+                  <option key={taxRate.id} value={taxRate.id}>
+                    {taxRate.display_name} ({taxRate.percentage}%)
+                  </option>
+                ))
+              ) : (
+                <option value="" disabled>税率が見つかりません</option>
+              )}
+            </select>
+          </div>
+
+          {/* 反映び */}
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-2">
+              反映日
+            </label>
+            <div className="space-y-2">
+              <label className="flex items-center">
+                <input
+                  type="radio"
+                  value="immediate"
+                  checked={usingNextPlanFrom === "immediate"}
+                  onChange={(e) => setUsingNextPlanFrom(e.target.value)}
+                  disabled={!canEdit()}
+                  className="mr-2"
+                />
+                {PLAN_SETTINGS_CONSTANTS.UI.IMMEDIATE_LABEL}
+              </label>
+              <label className="flex items-center">
+                <input
+                  type="radio"
+                  value="custom"
+                  checked={usingNextPlanFrom === "custom"}
+                  onChange={(e) => setUsingNextPlanFrom(e.target.value)}
+                  disabled={!canEdit()}
+                  className="mr-2"
+                />
+                {PLAN_SETTINGS_CONSTANTS.UI.CUSTOM_LABEL}
+              </label>
+            </div>
+            
+            {usingNextPlanFrom === "custom" && (
+              <div className="mt-2">
+                <input
+                  type="datetime-local"
+                  value={customDate}
+                  onChange={(e) => setCustomDate(e.target.value)}
+                  min={new Date().toISOString().slice(0, 16)}
+                  disabled={!canEdit()}
+                  className={`w-full p-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${
+                    !canEdit() ? 'bg-gray-100 cursor-not-allowed' : ''
+                  }`}
+                />
+              </div>
+            )}
+          </div>
+
+          {/* ボタン */}
+          <div className="flex justify-end space-x-3 pt-4">
+            <button
+              onClick={navigateToUserPage}
+              className="px-4 py-2 text-gray-600 border border-gray-300 rounded hover:bg-gray-50"
+            >
+              戻る
+            </button>
+            <button
+              onClick={() => setShowConfirmModal(true)}
+              disabled={!canEdit() || !selectedPlanId || (usingNextPlanFrom === "custom" && !customDate)}
+              className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              プランを変更
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* 確認モーダル */}
+      {showConfirmModal && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+          <div className="bg-white rounded-lg p-6 max-w-md w-full mx-4">
+            <h3 className="text-lg font-semibold mb-4 text-gray-800">
+              プラン変更の確認
+            </h3>
+            <div className="space-y-2 mb-6">
+              <p className="text-gray-600">
+                <span className="font-medium">新しいプラン：</span>
+                {getPlanDisplayName(selectedPlanId)}
+              </p>
+              {selectedTaxRateId && (
+                <p className="text-gray-600">
+                  <span className="font-medium">税率：</span>
+                  {getTaxRateDisplayName(selectedTaxRateId)}
+                </p>
+              )}
+              <p className="text-gray-600">
+                <span className="font-medium">反映日：</span>
+                {usingNextPlanFrom === "immediate" 
+                  ? PLAN_SETTINGS_CONSTANTS.UI.IMMEDIATE_LABEL
+                  : `${PLAN_SETTINGS_CONSTANTS.UI.CUSTOM_LABEL}（${customDate}）`
+                }
+              </p>
+            </div>
+            <div className="flex justify-end space-x-3">
+              <button
+                onClick={() => setShowConfirmModal(false)}
+                className="px-4 py-2 text-gray-600 border border-gray-300 rounded hover:bg-gray-50"
+                disabled={updateLoading}
+              >
+                戻る
+              </button>
+              <button
+                onClick={handlePlanUpdate}
+                className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-50"
+                disabled={updateLoading}
+              >
+                {updateLoading ? "処理中..." : "変更する"}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* 完了モーダル */}
+      {showCompletedModal && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+          <div className="bg-white rounded-lg p-6 max-w-md w-full mx-4">
+            <h3 className="text-lg font-semibold mb-4 text-gray-800">
+              プラン変更完了
+            </h3>
+            <p className="text-gray-600 mb-6">
+              {PLAN_SETTINGS_CONSTANTS.MESSAGES.PLAN_UPDATE_SUCCESS}
+              {usingNextPlanFrom === "immediate" 
+                ? "5分後に新しいプランが適用されます。" 
+                : `指定した日時に新しいプランが適用されます。`
+              }
+            </p>
+            <div className="flex justify-end">
+              <button
+                onClick={async () => {
+                  setShowCompletedModal(false);
+                  await refreshTenantInfo();
+                }}
+                className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
+              >
+                閉じる
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* プラン解除確認モーダル */}
+      {showCancelModal && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+          <div className="bg-white rounded-lg p-6 max-w-md w-full mx-4">
+            <h3 className="text-lg font-semibold mb-4 text-gray-800">
+              プラン解除の確認
+            </h3>
+            <p className="text-gray-600 mb-6">
+              プランを解除すると、5分後に現在のプランが利用できなくなります。
+              本当に解除しますか？
+            </p>
+            <div className="flex justify-end space-x-3">
+              <button
+                onClick={() => setShowCancelModal(false)}
+                className="px-4 py-2 text-gray-600 border border-gray-300 rounded hover:bg-gray-50"
+                disabled={cancelLoading}
+              >
+                戻る
+              </button>
+              <button
+                onClick={handlePlanCancel}
+                className="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700 disabled:opacity-50"
+                disabled={cancelLoading}
+              >
+                {cancelLoading ? "処理中..." : "解除する"}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* 予約取り消し確認モーダル */}
+      {showReservationCancelModal && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+          <div className="bg-white rounded-lg p-6 max-w-md w-full mx-4">
+            <h3 className="text-lg font-semibold mb-4 text-gray-800">
+              予約取り消しの確認
+            </h3>
+            <p className="text-gray-600 mb-6">
+              プラン変更予約を取り消しますか？
+              取り消すと、現在のプランが継続されます。
+            </p>
+            <div className="flex justify-end space-x-3">
+              <button
+                onClick={() => setShowReservationCancelModal(false)}
+                className="px-4 py-2 text-gray-600 border border-gray-300 rounded hover:bg-gray-50"
+                disabled={reservationCancelLoading}
+              >
+                戻る
+              </button>
+              <button
+                onClick={handleReservationCancel}
+                className="px-4 py-2 bg-orange-600 text-white rounded hover:bg-orange-700 disabled:opacity-50"
+                disabled={reservationCancelLoading}
+              >
+                {reservationCancelLoading ? "処理中..." : "取り消す"}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default PlanSettings;
\ No newline at end of file
diff --git a/src/pages/TenantList.tsx b/src/pages/TenantList.tsx
index 1f98f06..218cf93 100644
--- a/src/pages/TenantList.tsx
+++ b/src/pages/TenantList.tsx
@@ -2,7 +2,7 @@ import axios from "axios";
 import { useEffect, useState } from "react";
 import { useNavigate, useLocation } from "react-router-dom";
 import { API_ENDPOINT } from "../const";
-import { idTokenCheck, handleUserListClick } from "../utils";
+import { idTokenCheck, navigateToUserPageByRole } from "../utils";
 import { Tenant, UserInfo, TenantAttributesResponse } from "../types";
 
 // テナント属性の値を適切にフォーマットする関数
@@ -111,7 +111,7 @@ const TenantList = () => {
                 <tr key={tenant.id} className="hover:bg-gray-50">
                   <td className="py-3 px-4 whitespace-nowrap">
                     <button
-                      onClick={() => handleUserListClick(tenant.id, navigate)}
+                      onClick={() => navigateToUserPageByRole(tenant.id, navigate, pagePath)}
                       className="py-1 px-3 bg-blue-600 text-white text-sm rounded hover:bg-blue-700"
                     >
                       ユーザー一覧に移動
diff --git a/src/pages/UserPage.tsx b/src/pages/UserPage.tsx
index a4905aa..0487587 100644
--- a/src/pages/UserPage.tsx
+++ b/src/pages/UserPage.tsx
@@ -329,6 +329,15 @@ const UserPage = () => {
                 情報が検証され、正常に動作中になっている必要があります。
               </span>
             </div>
+            <div>
+              <a
+                href={`/plan-settings?tenant_id=${tenantId}`}
+                className="text-blue-600 hover:text-blue-800 hover:underline"
+              >
+                プラン設定
+              </a>
+            </div>
+
           </div>
         </div>
       )}
diff --git a/src/types/billing.ts b/src/types/billing.ts
index 1a4b569..9cd9434 100644
--- a/src/types/billing.ts
+++ b/src/types/billing.ts
@@ -50,12 +50,51 @@ export type PlanPeriodOption = {
   end: number;
 };
 
+/**
+ * 税率情報の型定義
+ */
 export interface TaxRate {
   id: string;
-  name: string;
   display_name: string;
   percentage: number;
-  inclusive: boolean;
-  country?: string;
+  inclusive?: boolean;
+  description?: string;
+}
+
+/**
+ * プラン情報の型定義
+ */
+export interface PlanInfo {
+  display_name: string;
   description?: string;
+  tax_rate?: number;
+}
+
+/**
+ * 料金プランの型定義
+ */
+export interface PricingPlan {
+  id: string;
+  display_name: string;
+  description: string;
+  name: string;
+  used: boolean;
+  pricing_menus: PricingMenu[];
+}
+
+/**
+ * 料金メニューの型定義
+ */
+export interface PricingMenu {
+  display_name: string;
+  units: PricingUnit[];
+}
+
+/**
+ * 料金単位の型定義
+ */
+export interface PricingUnit {
+  id: string;
+  name: string;
+  [key: string]: unknown;
 }
\ No newline at end of file
diff --git a/src/types/index.ts b/src/types/index.ts
index 8a94344..71af37d 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -81,6 +81,15 @@ export interface TenantAttributesResponse {
   tenant_attributes?: Record<string, TenantAttribute>;
 }
 
+/**
+ * プラン予約情報の型定義
+ */
+export interface PlanReservation {
+  next_plan_id?: string;
+  using_next_plan_from?: number;
+  next_plan_tax_rate_id?: string;
+}
+
 /**
  * テナント情報の型定義
  */
@@ -90,6 +99,11 @@ export interface Tenant {
   envs: Environment[];
   plan_id?: string;
   user_attribute?: UserAttributeValues;
+  plan_reservation?: PlanReservation;
+  tax_rate_id?: string;
+  // SaaSus PlatformのAPIレスポンスに含まれる予約情報
+  next_plan_id?: string;
+  using_next_plan_from?: number;
 }
 
 /**
@@ -134,15 +148,6 @@ export interface Invitation {
   envs?: Environment[];
 }
 
-/**
- * プラン情報の型定義
- */
-export interface PlanInfo {
-  display_name: string;
-  description?: string;
-  amount?: number;
-  currency?: string;
-}
 
 /**
  * MFAステータスレスポンスの型定義
diff --git a/src/utils.ts b/src/utils.ts
index 224e1c6..1883b96 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -56,11 +56,16 @@ export const randomUnixBetween = (start: number, end: number): number => {
 };
 
 /**
- * テナントIDに基づいてユーザーのロールを取得し、適切なページにリダイレクトする
+ * ユーザーのロールに応じて適切なユーザーページに遷移する関数
  * @param tenantId テナントID
  * @param navigate React Routerのnavigate関数
+ * @param pagePath 現在のページパス
  */
-export const handleUserListClick = async (tenantId: string, navigate: (path: string) => void) => {
+export const navigateToUserPageByRole = async (
+  tenantId: string, 
+  navigate: (path: string) => void,
+  pagePath: string
+) => {
   try {
     // ロールの取得
     const jwtToken = window.localStorage.getItem("SaaSusIdToken");
@@ -68,7 +73,7 @@ export const handleUserListClick = async (tenantId: string, navigate: (path: str
       headers: {
         "X-Requested-With": "XMLHttpRequest",
         Authorization: `Bearer ${jwtToken}`,
-        "X-SaaSus-Referer": "GetRole",
+        "X-SaaSus-Referer": pagePath,
       },
       withCredentials: true,
     });
@@ -79,7 +84,7 @@ export const handleUserListClick = async (tenantId: string, navigate: (path: str
 
     const role = tenant?.envs[0]?.roles[0]?.role_name || "";
 
-    // リダイレクト
+    // ロールに応じてリダイレクト
     switch (role) {
       case "sadmin":
         navigate(`/sadmin/toppage?tenant_id=${tenantId}`);
@@ -92,6 +97,9 @@ export const handleUserListClick = async (tenantId: string, navigate: (path: str
         break;
     }
   } catch (error) {
-    console.error("Error fetching user list:", error);
+    console.error("ユーザー情報の取得に失敗しました:", error);
+    // エラーの場合はデフォルトでuser/toppageに遷移
+    navigate(`/user/toppage?tenant_id=${tenantId}`);
   }
 };
+

From 09407fd44e03e220fc3b480755ca7d501363720f Mon Sep 17 00:00:00 2001
From: jSasaki <takatsugu.sasaki@anti-pattern.co.jp>
Date: Fri, 26 Sep 2025 15:34:04 +0900
Subject: [PATCH 2/6] Add multi-format error handling for API responses

---
 src/pages/PlanSettings.tsx | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/pages/PlanSettings.tsx b/src/pages/PlanSettings.tsx
index c731de1..1a071c6 100644
--- a/src/pages/PlanSettings.tsx
+++ b/src/pages/PlanSettings.tsx
@@ -37,11 +37,13 @@ interface PlanUpdateData {
   using_next_plan_from?: number;
 }
 
-// APIエラーレスポンスの型定義
+// APIエラーレスポンスの型定義（複数形式対応）
 interface ApiErrorResponse {
   response?: {
     data?: {
-      error?: string;
+      error?: string;    // Go形式: {"error": "message"}
+      detail?: string;   // FastAPI形式: {"detail": "message"}
+      message?: string;  // その他の形式: {"message": "message"}
     };
   };
   message?: string;
@@ -170,11 +172,22 @@ const PlanSettings = () => {
   const handleApiError = (error: unknown, fallbackMessage: string): string => {
     const apiError = error as ApiErrorResponse;
     
-    // APIエラーメッセージの優先順位
+    // APIエラーメッセージの優先順位（複数形式対応）
     if (apiError.response?.data?.error) {
+      // Go形式: {"error": "message"}
       return apiError.response.data.error;
     }
     
+    if (apiError.response?.data?.detail) {
+      // FastAPI形式: {"detail": "message"}
+      return apiError.response.data.detail;
+    }
+    
+    if (apiError.response?.data?.message) {
+      // その他の形式: {"message": "message"}
+      return apiError.response.data.message;
+    }
+    
     if (apiError.message) {
       return apiError.message;
     }

From 264592808a895cb417b732d1310accb3be8b6214 Mon Sep 17 00:00:00 2001
From: jSasaki <takatsugu.sasaki@anti-pattern.co.jp>
Date: Mon, 29 Sep 2025 10:54:14 +0900
Subject: [PATCH 3/6] =?UTF-8?q?=E3=83=97=E3=83=A9=E3=83=B3=E8=A8=AD?=
 =?UTF-8?q?=E5=AE=9A=E3=81=AE=E3=82=A8=E3=83=A9=E3=83=BC=E3=83=8F=E3=83=B3?=
 =?UTF-8?q?=E3=83=89=E3=83=AA=E3=83=B3=E3=82=B0=E6=94=B9=E5=96=84=EF=BC=88?=
 =?UTF-8?q?404/=E3=83=8D=E3=83=83=E3=83=88=E3=83=AF=E3=83=BC=E3=82=AF?=
 =?UTF-8?q?=E3=82=A8=E3=83=A9=E3=83=BC=E5=AF=BE=E5=BF=9C=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/PlanSettings.tsx | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/pages/PlanSettings.tsx b/src/pages/PlanSettings.tsx
index 1a071c6..6854d92 100644
--- a/src/pages/PlanSettings.tsx
+++ b/src/pages/PlanSettings.tsx
@@ -21,6 +21,8 @@ const PLAN_SETTINGS_CONSTANTS = {
     PRICING_PLANS_ERROR: "プラン一覧の取得に失敗しました。",
     TAX_RATES_ERROR: "税率一覧の取得に失敗しました。",
     MISSING_TENANT_OR_PLAN: "テナントIDまたはプランIDが設定されていません。",
+    NOT_IMPLEMENTED: "この機能はまだ実装されていません。",
+    NETWORK_ERROR: "ネットワークエラー、CORS制限、またはこの機能が未実装の可能性があります。",
   },
   UI: {
     IMMEDIATE_LABEL: "すぐ反映（5分後）",
@@ -40,6 +42,7 @@ interface PlanUpdateData {
 // APIエラーレスポンスの型定義（複数形式対応）
 interface ApiErrorResponse {
   response?: {
+    status?: number;     // HTTPステータスコード
     data?: {
       error?: string;    // Go形式: {"error": "message"}
       detail?: string;   // FastAPI形式: {"detail": "message"}
@@ -172,18 +175,28 @@ const PlanSettings = () => {
   const handleApiError = (error: unknown, fallbackMessage: string): string => {
     const apiError = error as ApiErrorResponse;
     
+    // ネットワークエラーまたはレスポンスなしの場合
+    if (!apiError.response) {
+      return PLAN_SETTINGS_CONSTANTS.MESSAGES.NETWORK_ERROR;
+    }
+    
+    // 404エラーの場合（未実装機能）
+    if (apiError.response.status === 404) {
+      return PLAN_SETTINGS_CONSTANTS.MESSAGES.NOT_IMPLEMENTED;
+    }
+    
     // APIエラーメッセージの優先順位（複数形式対応）
-    if (apiError.response?.data?.error) {
+    if (apiError.response.data?.error) {
       // Go形式: {"error": "message"}
       return apiError.response.data.error;
     }
     
-    if (apiError.response?.data?.detail) {
+    if (apiError.response.data?.detail) {
       // FastAPI形式: {"detail": "message"}
       return apiError.response.data.detail;
     }
     
-    if (apiError.response?.data?.message) {
+    if (apiError.response.data?.message) {
       // その他の形式: {"message": "message"}
       return apiError.response.data.message;
     }

From 6b50731c5a02c35e5ee7da9f9dd2eccba78ac262 Mon Sep 17 00:00:00 2001
From: jSasaki <takatsugu.sasaki@anti-pattern.co.jp>
Date: Mon, 29 Sep 2025 13:40:10 +0900
Subject: [PATCH 4/6] =?UTF-8?q?=E3=83=97=E3=83=A9=E3=83=B3=E6=9B=B4?=
 =?UTF-8?q?=E6=96=B0=E6=88=90=E5=8A=9F=E6=99=82=E3=81=AE=E3=83=AD=E3=83=BC?=
 =?UTF-8?q?=E3=83=87=E3=82=A3=E3=83=B3=E3=82=B0=E7=8A=B6=E6=85=8B=E8=A7=A3?=
 =?UTF-8?q?=E9=99=A4=E3=82=92=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/PlanSettings.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/PlanSettings.tsx b/src/pages/PlanSettings.tsx
index 6854d92..0948a17 100644
--- a/src/pages/PlanSettings.tsx
+++ b/src/pages/PlanSettings.tsx
@@ -261,6 +261,7 @@ const PlanSettings = () => {
       await executePlanUpdate(updateData);
 
       // 成功時の処理
+      setUpdateLoading(false);
       setShowConfirmModal(false);
       setShowCompletedModal(true);
     } catch (error) {

From 4685061a7d3e51f2bfa6fab662ca7e990cc8293b Mon Sep 17 00:00:00 2001
From: jSasaki <takatsugu.sasaki@anti-pattern.co.jp>
Date: Mon, 29 Sep 2025 15:33:53 +0900
Subject: [PATCH 5/6] =?UTF-8?q?=E3=83=97=E3=83=A9=E3=83=B3=E8=A8=AD?=
 =?UTF-8?q?=E5=AE=9A=E3=81=AE=E6=97=A5=E6=99=82=E9=81=B8=E6=8A=9E=E3=81=AB?=
 =?UTF-8?q?=E3=83=90=E3=83=AA=E3=83=87=E3=83=BC=E3=82=B7=E3=83=A7=E3=83=B3?=
 =?UTF-8?q?=E6=A9=9F=E8=83=BD=E3=82=92=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/PlanSettings.tsx | 56 ++++++++++++++++++++++++++++++++++++--
 1 file changed, 53 insertions(+), 3 deletions(-)

diff --git a/src/pages/PlanSettings.tsx b/src/pages/PlanSettings.tsx
index 0948a17..d2213f5 100644
--- a/src/pages/PlanSettings.tsx
+++ b/src/pages/PlanSettings.tsx
@@ -6,11 +6,23 @@ import { idTokenCheck, navigateToUserPageByRole } from "../utils";
 import { Tenant } from "../types";
 import { PlanInfo, TaxRate, PricingPlan } from "../types/billing";
 
+// ユーティリティ関数
+const formatToDateTimeLocal = (date: Date): string => {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  const hours = String(date.getHours()).padStart(2, '0');
+  const minutes = String(date.getMinutes()).padStart(2, '0');
+  return `${year}-${month}-${day}T${hours}:${minutes}`;
+};
+
 // 定数定義
 const PLAN_SETTINGS_CONSTANTS = {
   DELAYS: {
     PLAN_CHANGE_SECONDS: 300, // 5分
     EDIT_LOCK_THRESHOLD_SECONDS: 600, // 10分
+    MIN_CUSTOM_DATE_MINUTES: 10, // カスタム日時の最小値（分）
+    MIN_DATETIME_MINUTES: 5, // datetime-localの最小値（分）
   },
   MESSAGES: {
     PLAN_UPDATE_SUCCESS: "プランの変更が完了しました。",
@@ -61,7 +73,11 @@ const PlanSettings = () => {
   const [selectedPlanId, setSelectedPlanId] = useState<string>("");
   const [selectedTaxRateId, setSelectedTaxRateId] = useState<string>("");
   const [usingNextPlanFrom, setUsingNextPlanFrom] = useState<string>("immediate");
-  const [customDate, setCustomDate] = useState<string>("");
+  const [customDate, setCustomDate] = useState<string>(() => {
+    // 初期値を10分後に設定（datetime-local形式）
+    const tenMinutesLater = new Date(Date.now() + PLAN_SETTINGS_CONSTANTS.DELAYS.MIN_CUSTOM_DATE_MINUTES * 60 * 1000);
+    return formatToDateTimeLocal(tenMinutesLater);
+  });
   const [updateLoading, setUpdateLoading] = useState<boolean>(false);
   const [showConfirmModal, setShowConfirmModal] = useState<boolean>(false);
   const [showCompletedModal, setShowCompletedModal] = useState<boolean>(false);
@@ -69,6 +85,7 @@ const PlanSettings = () => {
   const [cancelLoading, setCancelLoading] = useState<boolean>(false);
   const [showReservationCancelModal, setShowReservationCancelModal] = useState<boolean>(false);
   const [reservationCancelLoading, setReservationCancelLoading] = useState<boolean>(false);
+  const [dateValidationError, setDateValidationError] = useState<string>("");
   
   const navigate = useNavigate();
   const location = useLocation();
@@ -609,13 +626,46 @@ const PlanSettings = () => {
                 <input
                   type="datetime-local"
                   value={customDate}
-                  onChange={(e) => setCustomDate(e.target.value)}
-                  min={new Date().toISOString().slice(0, 16)}
+                  onChange={(e) => {
+                    const selectedDate = e.target.value;
+                    const fiveMinutesLater = new Date(Date.now() + PLAN_SETTINGS_CONSTANTS.DELAYS.MIN_DATETIME_MINUTES * 60 * 1000);
+                    const minDateString = formatToDateTimeLocal(fiveMinutesLater);
+                    
+                    // 選択された日時が5分後より前の場合は5分後に設定
+                    if (selectedDate < minDateString) {
+                      setCustomDate(minDateString);
+                      setDateValidationError(`5分後の日時より前は選択できません。${minDateString}に設定しました。`);
+                      // 3秒後にエラーメッセージを消す
+                      setTimeout(() => setDateValidationError(""), 3000);
+                    } else {
+                      setCustomDate(selectedDate);
+                      setDateValidationError("");
+                    }
+                  }}
+                  onBlur={(e) => {
+                    const selectedDate = e.target.value;
+                    const fiveMinutesLater = new Date(Date.now() + PLAN_SETTINGS_CONSTANTS.DELAYS.MIN_DATETIME_MINUTES * 60 * 1000);
+                    const minDateString = formatToDateTimeLocal(fiveMinutesLater);
+                    
+                    // フォーカスが外れた時にもバリデーション（テキスト入力時用）
+                    if (selectedDate && selectedDate < minDateString) {
+                      setCustomDate(minDateString);
+                      setDateValidationError(`5分後の日時より前は選択できません。${minDateString}に設定しました。`);
+                      // 3秒後にエラーメッセージを消す
+                      setTimeout(() => setDateValidationError(""), 3000);
+                    }
+                  }}
+                  min={formatToDateTimeLocal(new Date(Date.now() + PLAN_SETTINGS_CONSTANTS.DELAYS.MIN_DATETIME_MINUTES * 60 * 1000))}
                   disabled={!canEdit()}
                   className={`w-full p-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${
                     !canEdit() ? 'bg-gray-100 cursor-not-allowed' : ''
                   }`}
                 />
+                {dateValidationError && (
+                  <div className="mt-2 text-sm text-red-600 bg-red-50 border border-red-200 rounded-md p-2">
+                    {dateValidationError}
+                  </div>
+                )}
               </div>
             )}
           </div>

From 979dc0014398546e6ba4a2a2798455b956b03e07 Mon Sep 17 00:00:00 2001
From: jSasaki <takatsugu.sasaki@anti-pattern.co.jp>
Date: Thu, 2 Oct 2025 17:17:32 +0900
Subject: [PATCH 6/6] =?UTF-8?q?=E3=83=97=E3=83=A9=E3=83=B3=E8=A8=AD?=
 =?UTF-8?q?=E5=AE=9A=E3=81=AE=E6=97=A5=E6=99=82=E3=83=90=E3=83=AA=E3=83=87?=
 =?UTF-8?q?=E3=83=BC=E3=82=B7=E3=83=A7=E3=83=B3=E6=A9=9F=E8=83=BD=E3=81=A8?=
 =?UTF-8?q?=E3=82=A8=E3=83=A9=E3=83=BC=E8=A1=A8=E7=A4=BA=E3=82=92=E6=94=B9?=
 =?UTF-8?q?=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/dialogs/ErrorDialog.tsx | 35 +++++++++++++++++++++++++
 src/hooks/useErrorDialog.ts            | 23 ++++++++++++++++
 src/pages/PlanSettings.tsx             | 36 ++++++++++++++++----------
 3 files changed, 81 insertions(+), 13 deletions(-)
 create mode 100644 src/components/dialogs/ErrorDialog.tsx
 create mode 100644 src/hooks/useErrorDialog.ts

diff --git a/src/components/dialogs/ErrorDialog.tsx b/src/components/dialogs/ErrorDialog.tsx
new file mode 100644
index 0000000..4ff5bb6
--- /dev/null
+++ b/src/components/dialogs/ErrorDialog.tsx
@@ -0,0 +1,35 @@
+import React from "react";
+
+interface ErrorDialogProps {
+  open: boolean;
+  message: string;
+  onClose: () => void;
+}
+
+const ErrorDialog: React.FC<ErrorDialogProps> = ({ open, message, onClose }) => {
+  if (!open) return null;
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+      <div className="bg-white rounded-lg p-6 max-w-md w-full mx-4">
+        <div className="flex items-center mb-4">
+          <svg className="h-6 w-6 text-red-600 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
+          </svg>
+          <h3 className="text-lg font-semibold text-gray-800">エラー</h3>
+        </div>
+        <p className="text-gray-600 mb-6">{message}</p>
+        <div className="flex justify-end">
+          <button
+            onClick={onClose}
+            className="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700"
+          >
+            閉じる
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ErrorDialog;
\ No newline at end of file
diff --git a/src/hooks/useErrorDialog.ts b/src/hooks/useErrorDialog.ts
new file mode 100644
index 0000000..4816d72
--- /dev/null
+++ b/src/hooks/useErrorDialog.ts
@@ -0,0 +1,23 @@
+import { useState } from "react";
+
+export const useErrorDialog = () => {
+  const [showErrorModal, setShowErrorModal] = useState<boolean>(false);
+  const [errorMessage, setErrorMessage] = useState<string>("");
+
+  const showError = (message: string) => {
+    setErrorMessage(message);
+    setShowErrorModal(true);
+  };
+
+  const hideError = () => {
+    setShowErrorModal(false);
+    setErrorMessage("");
+  };
+
+  return {
+    showErrorModal,
+    errorMessage,
+    showError,
+    hideError,
+  };
+};
\ No newline at end of file
diff --git a/src/pages/PlanSettings.tsx b/src/pages/PlanSettings.tsx
index d2213f5..4924f83 100644
--- a/src/pages/PlanSettings.tsx
+++ b/src/pages/PlanSettings.tsx
@@ -1,10 +1,12 @@
 import axios from "axios";
-import { useEffect, useState } from "react";
+import { useEffect, useState, useRef } from "react";
 import { useNavigate, useLocation } from "react-router-dom";
 import { API_ENDPOINT } from "../const";
 import { idTokenCheck, navigateToUserPageByRole } from "../utils";
 import { Tenant } from "../types";
 import { PlanInfo, TaxRate, PricingPlan } from "../types/billing";
+import ErrorDialog from "../components/dialogs/ErrorDialog";
+import { useErrorDialog } from "../hooks/useErrorDialog";
 
 // ユーティリティ関数
 const formatToDateTimeLocal = (date: Date): string => {
@@ -86,6 +88,7 @@ const PlanSettings = () => {
   const [showReservationCancelModal, setShowReservationCancelModal] = useState<boolean>(false);
   const [reservationCancelLoading, setReservationCancelLoading] = useState<boolean>(false);
   const [dateValidationError, setDateValidationError] = useState<string>("");
+  const { showErrorModal, errorMessage, showError, hideError } = useErrorDialog();
   
   const navigate = useNavigate();
   const location = useLocation();
@@ -183,10 +186,7 @@ const PlanSettings = () => {
     }
   };
 
-  // エラー表示の統一処理
-  const showError = (message: string) => {
-    alert(message); // 後でトーストやモーダルに置き換え可能
-  };
+  // エラー表示の統一処理（useErrorDialogフックから取得）
 
   // 汎用エラーハンドリング関数
   const handleApiError = (error: unknown, fallbackMessage: string): string => {
@@ -239,7 +239,10 @@ const PlanSettings = () => {
 
     // カスタム日時が指定されている場合のみ using_next_plan_from を設定
     if (usingNextPlanFrom === "custom" && customDate) {
-      updateData.using_next_plan_from = Math.floor(new Date(customDate).getTime() / 1000);
+      const date = new Date(customDate);
+      if (!isNaN(date.getTime())) {
+        updateData.using_next_plan_from = Math.floor(date.getTime() / 1000);
+      }
     }
 
     return updateData;
@@ -401,7 +404,8 @@ const PlanSettings = () => {
     
     setReservationCancelLoading(true);
     try {
-      // 予約を取り消すために、プラン更新APIを空のリクエストボディで呼び出す
+      // NOTE: 空オブジェクトでの予約取り消しはSaaSus APIの仕様に合わせている
+      // バックエンドとフロントエンドで一貫性を保つため、同じ実装を採用
       await axios.put(
         `${API_ENDPOINT}/tenants/${tenantId}/plan`,
         {},
@@ -591,7 +595,7 @@ const PlanSettings = () => {
             </select>
           </div>
 
-          {/* 反映び */}
+          {/* 反映日 */}
           <div>
             <label className="block text-sm font-medium text-gray-700 mb-2">
               反映日
@@ -628,6 +632,10 @@ const PlanSettings = () => {
                   value={customDate}
                   onChange={(e) => {
                     const selectedDate = e.target.value;
+                    
+                    // ユーザーが入力を開始したらエラーメッセージをクリア
+                    setDateValidationError("");
+                    
                     const fiveMinutesLater = new Date(Date.now() + PLAN_SETTINGS_CONSTANTS.DELAYS.MIN_DATETIME_MINUTES * 60 * 1000);
                     const minDateString = formatToDateTimeLocal(fiveMinutesLater);
                     
@@ -635,11 +643,8 @@ const PlanSettings = () => {
                     if (selectedDate < minDateString) {
                       setCustomDate(minDateString);
                       setDateValidationError(`5分後の日時より前は選択できません。${minDateString}に設定しました。`);
-                      // 3秒後にエラーメッセージを消す
-                      setTimeout(() => setDateValidationError(""), 3000);
                     } else {
                       setCustomDate(selectedDate);
-                      setDateValidationError("");
                     }
                   }}
                   onBlur={(e) => {
@@ -651,8 +656,6 @@ const PlanSettings = () => {
                     if (selectedDate && selectedDate < minDateString) {
                       setCustomDate(minDateString);
                       setDateValidationError(`5分後の日時より前は選択できません。${minDateString}に設定しました。`);
-                      // 3秒後にエラーメッセージを消す
-                      setTimeout(() => setDateValidationError(""), 3000);
                     }
                   }}
                   min={formatToDateTimeLocal(new Date(Date.now() + PLAN_SETTINGS_CONSTANTS.DELAYS.MIN_DATETIME_MINUTES * 60 * 1000))}
@@ -825,6 +828,13 @@ const PlanSettings = () => {
           </div>
         </div>
       )}
+
+      {/* エラーダイアログ */}
+      <ErrorDialog
+        open={showErrorModal}
+        message={errorMessage}
+        onClose={hideError}
+      />
     </div>
   );
 };