From c78945b44ba8419e15728edf75be6c22edc7f53f Mon Sep 17 00:00:00 2001
From: Akira <akia@keinafarm.com>
Date: Sun, 15 Feb 2026 14:34:02 +0900
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=AD=A3=E5=AE=8C=E4=BA=86=20frontend?=
 =?UTF-8?q?/src/app/import/page.tsx=20=E3=81=AB=E4=B8=AD=E5=B1=B1=E9=96=93?=
 =?UTF-8?q?=E3=83=9E=E3=82=B9=E3=82=BF=E5=8F=96=E8=BE=BC=E3=82=BB=E3=82=AF?=
 =?UTF-8?q?=E3=82=B7=E3=83=A7=E3=83=B3=E3=82=92=E8=BF=BD=E5=8A=A0=E3=81=97?=
 =?UTF-8?q?=E3=81=BE=E3=81=97=E3=81=9F=EF=BC=9A=20-=20State=E8=BF=BD?=
 =?UTF-8?q?=E5=8A=A0:=20chusankanFile,=20chusankanResult,=20chusankanInput?=
 =?UTF-8?q?Ref=20-=20=E3=82=A2=E3=83=83=E3=83=97=E3=83=AD=E3=83=BC?=
 =?UTF-8?q?=E3=83=89=E9=96=A2=E6=95=B0:=20handleChusankanUpload=20(endpoin?=
 =?UTF-8?q?t:=20/fields/import/chusankan/)=20-=20UI=E8=BF=BD=E5=8A=A0:=20?=
 =?UTF-8?q?=E3=80=8C=E4=B8=AD=E5=B1=B1=E9=96=93=E3=83=9E=E3=82=B9=E3=82=BF?=
 =?UTF-8?q?=E5=8F=96=E8=BE=BC=E3=80=8D=E3=82=BB=E3=82=AF=E3=82=B7=E3=83=A7?=
 =?UTF-8?q?=E3=83=B3=EF=BC=88=E9=BB=84=E8=89=B2=EF=BC=89=20=E3=83=93?=
 =?UTF-8?q?=E3=83=AB=E3=83=89=E6=88=90=E5=8A=9F=E3=80=82http://localhost:3?=
 =?UTF-8?q?000/import=20=E3=81=A7=E7=A2=BA=E8=AA=8D=E3=81=A7=E3=81=8D?=
 =?UTF-8?q?=E3=81=BE=E3=81=99=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/app/import/page.tsx | 126 +++++++++++++++++++++++++++++++
 1 file changed, 126 insertions(+)

diff --git a/frontend/src/app/import/page.tsx b/frontend/src/app/import/page.tsx
index 552f50b..9a1dc36 100644
--- a/frontend/src/app/import/page.tsx
+++ b/frontend/src/app/import/page.tsx
@@ -15,11 +15,14 @@ interface ImportResult {
 export default function ImportPage() {
   const [kyosaiFile, setKyosaiFile] = useState<File | null>(null);
   const [yoshidaFile, setYoshidaFile] = useState<File | null>(null);
+  const [chusankanFile, setChusankanFile] = useState<File | null>(null);
   const [uploading, setUploading] = useState(false);
   const [kyosaiResult, setKyosaiResult] = useState<ImportResult | null>(null);
   const [yoshidaResult, setYoshidaResult] = useState<ImportResult | null>(null);
+  const [chusankanResult, setChusankanResult] = useState<ImportResult | null>(null);
   const kyosaiInputRef = useRef<HTMLInputElement>(null);
   const yoshidaInputRef = useRef<HTMLInputElement>(null);
+  const chusankanInputRef = useRef<HTMLInputElement>(null);
 
   const handleKyosaiUpload = async () => {
     if (!kyosaiFile) {
@@ -109,6 +112,50 @@ export default function ImportPage() {
     }
   };
 
+  const handleChusankanUpload = async () => {
+    if (!chusankanFile) {
+      alert('ファイルを選択してください');
+      return;
+    }
+
+    setUploading(true);
+    setChusankanResult(null);
+
+    try {
+      const formData = new FormData();
+      formData.append('file', chusankanFile);
+
+      const response = await api.post('/fields/import/chusankan/', formData, {
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        },
+      });
+
+      const data = response.data;
+      setChusankanResult({
+        success: true,
+        message: data.message || 'インポートが完了しました',
+        created: data.created,
+        updated: data.updated,
+      });
+    } catch (error: unknown) {
+      console.error('Upload failed:', error);
+      let errorMessage = 'アップロードに失敗しました';
+      if (error && typeof error === 'object' && 'response' in error) {
+        const axiosError = error as { response?: { data?: { error?: string } } };
+        if (axiosError.response?.data?.error) {
+          errorMessage = axiosError.response.data.error;
+        }
+      }
+      setChusankanResult({
+        success: false,
+        message: errorMessage,
+      });
+    } finally {
+      setUploading(false);
+    }
+  };
+
   return (
     <div className="min-h-screen bg-gray-50">
       <Navbar />
@@ -195,6 +242,85 @@ export default function ImportPage() {
             )}
           </div>
 
+          {/* 中山間マスタ取込 */}
+          <div className="bg-white rounded-lg shadow p-6">
+            <h2 className="text-lg font-semibold text-gray-900 mb-2">
+              中山間マスタ取込
+            </h2>
+            <p className="text-sm text-gray-600 mb-4">
+              中山間指定データをインポートします（ID, 大字, 字, 地番...）
+            </p>
+
+            <div className="flex items-center gap-4 mb-4">
+              <input
+                ref={chusankanInputRef}
+                type="file"
+                accept=".ods"
+                onChange={(e) => setChusankanFile(e.target.files?.[0] || null)}
+                className="hidden"
+              />
+              <button
+                onClick={() => chusankanInputRef.current?.click()}
+                className="px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-50 transition-colors"
+              >
+                {chusankanFile ? chusankanFile.name : 'ファイルを選択'}
+              </button>
+              {chusankanFile && (
+                <button
+                  onClick={() => {
+                    setChusankanFile(null);
+                    setChusankanResult(null);
+                  }}
+                  className="text-gray-500 hover:text-gray-700"
+                >
+                  クリア
+                </button>
+              )}
+            </div>
+
+            <button
+              onClick={handleChusankanUpload}
+              disabled={!chusankanFile || uploading}
+              className="w-full flex items-center justify-center px-4 py-2 bg-yellow-600 text-white rounded-md hover:bg-yellow-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+            >
+              {uploading ? (
+                <>
+                  <Loader2 className="h-5 w-5 mr-2 animate-spin" />
+                  アップロード中...
+                </>
+              ) : (
+                <>
+                  <Upload className="h-5 w-5 mr-2" />
+                  アップロード
+                </>
+              )}
+            </button>
+
+            {chusankanResult && (
+              <div
+                className={`mt-4 p-3 rounded-md flex items-center ${
+                  chusankanResult.success
+                    ? 'bg-green-50 text-green-700'
+                    : 'bg-red-50 text-red-700'
+                }`}
+              >
+                {chusankanResult.success ? (
+                  <CheckCircle className="h-5 w-5 mr-2" />
+                ) : (
+                  <XCircle className="h-5 w-5 mr-2" />
+                )}
+                <div>
+                  <p className="font-medium">{chusankanResult.message}</p>
+                  {chusankanResult.success && chusankanResult.created !== undefined && (
+                    <p className="text-sm">
+                      作成: {chusankanResult.created}件 / 更新: {chusankanResult.updated}件
+                    </p>
+                  )}
+                </div>
+              </div>
+            )}
+          </div>
+
           {/* 実圃場データ取込 */}
           <div className="bg-white rounded-lg shadow p-6">
             <h2 className="text-lg font-semibold text-gray-900 mb-2">