From db20a9c3d2e5d65842a1964aa4070136595c3d6b Mon Sep 17 00:00:00 2001
From: Akira <akia@keinafarm.com>
Date: Sun, 1 Mar 2026 17:04:47 +0900
Subject: [PATCH] =?UTF-8?q?=E6=96=BD=E8=82=A5=E8=A8=88=E7=94=BB=E3=83=BB?=
 =?UTF-8?q?=E8=82=A5=E6=96=99=E3=83=9E=E3=82=B9=E3=82=BF=E3=81=AE=E3=82=A8?=
 =?UTF-8?q?=E3=83=A9=E3=83=BC=E3=82=92=E3=82=A4=E3=83=B3=E3=83=A9=E3=82=A4?=
 =?UTF-8?q?=E3=83=B3=E8=A1=A8=E7=A4=BA=E3=81=AB=E5=A4=89=E6=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

alert() で表示していたバリデーションエラー・保存エラー・削除エラーを
赤いインラインバナーで表示するように変更。
ブラウザがダイアログをブロックしても確実にユーザーに通知できるようにした。

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../_components/FertilizerEditPage.tsx        | 25 +++++++++++++------
 frontend/src/app/fertilizer/masters/page.tsx  | 12 ++++++++-
 2 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/frontend/src/app/fertilizer/_components/FertilizerEditPage.tsx b/frontend/src/app/fertilizer/_components/FertilizerEditPage.tsx
index 3130e82..5f95e5a 100644
--- a/frontend/src/app/fertilizer/_components/FertilizerEditPage.tsx
+++ b/frontend/src/app/fertilizer/_components/FertilizerEditPage.tsx
@@ -66,6 +66,7 @@ export default function FertilizerEditPage({ planId }: { planId?: number }) {
 
   const [loading, setLoading] = useState(!isNew);
   const [saving, setSaving] = useState(false);
+  const [saveError, setSaveError] = useState<string | null>(null);
 
   // ─── 初期データ取得
   useEffect(() => {
@@ -286,9 +287,10 @@ export default function FertilizerEditPage({ planId }: { planId?: number }) {
 
   // ─── 保存（adjusted 優先、なければ calc 値を使用）
   const handleSave = async () => {
-    if (!name.trim()) return alert('計画名を入力してください');
-    if (!varietyId) return alert('品種を選択してください');
-    if (selectedFields.length === 0) return alert('圃場を1つ以上選択してください');
+    setSaveError(null);
+    if (!name.trim()) { setSaveError('計画名を入力してください'); return; }
+    if (!varietyId) { setSaveError('品種を選択してください'); return; }
+    if (selectedFields.length === 0) { setSaveError('圃場を1つ以上選択してください'); return; }
 
     const entries: { field_id: number; fertilizer_id: number; bags: number }[] = [];
     selectedFields.forEach((field) => {
@@ -303,8 +305,9 @@ export default function FertilizerEditPage({ planId }: { planId?: number }) {
       });
     });
 
-    if (entries.length === 0) {
-      if (!confirm('袋数が1件も入力されていません。このまま保存しますか？\n（後から編集画面で袋数を入力できます）')) return;
+    if (entries.length === 0 && planFertilizers.length > 0) {
+      setSaveError('袋数が1件も入力されていません。計算ボタンを押すか、直接数値を入力してください');
+      return;
     }
 
     setSaving(true);
@@ -315,12 +318,11 @@ export default function FertilizerEditPage({ planId }: { planId?: number }) {
       } else {
         await api.put(`/fertilizer/plans/${planId}/`, payload);
       }
-      alert('保存しました');
       router.push('/fertilizer');
     } catch (e: unknown) {
       const err = e as { response?: { data?: unknown } };
       console.error(err);
-      alert('保存に失敗しました: ' + JSON.stringify(err.response?.data));
+      setSaveError('保存に失敗しました: ' + JSON.stringify(err.response?.data));
     } finally {
       setSaving(false);
     }
@@ -390,6 +392,15 @@ export default function FertilizerEditPage({ planId }: { planId?: number }) {
           </div>
         </div>
 
+        {/* エラーバナー */}
+        {saveError && (
+          <div className="mb-4 flex items-start gap-2 bg-red-50 border border-red-300 text-red-700 rounded-lg px-4 py-3 text-sm">
+            <span className="font-bold shrink-0">⚠</span>
+            <span>{saveError}</span>
+            <button onClick={() => setSaveError(null)} className="ml-auto shrink-0 text-red-400 hover:text-red-600">✕</button>
+          </div>
+        )}
+
         {/* 基本情報 */}
         <div className="bg-white rounded-lg shadow p-4 mb-4 flex flex-wrap gap-4 items-end">
           <div className="flex-1 min-w-48">
diff --git a/frontend/src/app/fertilizer/masters/page.tsx b/frontend/src/app/fertilizer/masters/page.tsx
index a9ef22c..f8e5f78 100644
--- a/frontend/src/app/fertilizer/masters/page.tsx
+++ b/frontend/src/app/fertilizer/masters/page.tsx
@@ -24,6 +24,7 @@ export default function FertilizerMastersPage() {
   const [editingId, setEditingId] = useState<number | 'new' | null>(null);
   const [form, setForm] = useState(emptyForm());
   const [saving, setSaving] = useState(false);
+  const [deleteError, setDeleteError] = useState<string | null>(null);
 
   useEffect(() => {
     fetchFertilizers();
@@ -94,12 +95,13 @@ export default function FertilizerMastersPage() {
 
   const handleDelete = async (id: number, name: string) => {
     if (!confirm(`「${name}」を削除しますか？`)) return;
+    setDeleteError(null);
     try {
       await api.delete(`/fertilizer/fertilizers/${id}/`);
       await fetchFertilizers();
     } catch (e) {
       console.error(e);
-      alert('削除に失敗しました（施肥計画で使用中の肥料は削除できません）');
+      setDeleteError(`「${name}」の削除に失敗しました（施肥計画で使用中の肥料は削除できません）`);
     }
   };
 
@@ -131,6 +133,14 @@ export default function FertilizerMastersPage() {
           </button>
         </div>
 
+        {deleteError && (
+          <div className="mb-4 flex items-start gap-2 bg-red-50 border border-red-300 text-red-700 rounded-lg px-4 py-3 text-sm">
+            <span className="font-bold shrink-0">⚠</span>
+            <span>{deleteError}</span>
+            <button onClick={() => setDeleteError(null)} className="ml-auto shrink-0 text-red-400 hover:text-red-600">✕</button>
+          </div>
+        )}
+
         {loading ? (
           <p className="text-gray-500">読み込み中...</p>
         ) : (