プラン設定機能追加

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>
     </>

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;

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,
+  };
+};

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"
         >
           ユーザー一覧に戻る