frontend/src/pages/AdminBlsImportPage.jsx

@@ -1,10 +1,35 @@
 import { useEffect, useState } from 'react'
 import { api } from '../utils/api'
 
+function FileImportBlock({ label, kind, busy, onRun }) {
+  const [file, setFile] = useState(null)
+  return (
+    <div className="form-row" style={{ flexDirection: 'column', alignItems: 'stretch', gap: 8, marginTop: 16 }}>
+      <label className="form-label">{label}</label>
+      <input
+        type="file"
+        accept=".xlsx"
+        className="form-input"
+        onChange={(e) => setFile(e.target.files?.[0] || null)}
+      />
+      {file && <p style={{ fontSize: 12, color: 'var(--text2)', margin: 0 }}>{file.name}</p>}
+      <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
+        <button type="button" className="btn btn-secondary" disabled={!file || busy} onClick={() => onRun(kind, file, true)}>
+          Prüfen
+        </button>
+        <button type="button" className="btn btn-primary" disabled={!file || busy} onClick={() => onRun(kind, file, false)}>
+          Anwenden
+        </button>
+      </div>
+    </div>
+  )
+}
+
 export default function AdminBlsImportPage() {
   const [status, setStatus] = useState(null)
   const [msg, setMsg] = useState(null)
   const [error, setError] = useState(null)
+  const [busy, setBusy] = useState(false)
 
   const load = () => {
     api.adminBlsStatus().then(setStatus).catch((e) => setError(e.message))
@@ -13,6 +38,7 @@ export default function AdminBlsImportPage() {
 
   const run = async (kind, file, dry) => {
     setError(null)
+    setBusy(true)
     setMsg(dry ? 'Prüfe…' : 'Importiere…')
     try {
       const fn = kind === 'components' ? api.adminBlsImportComponents : api.adminBlsImportFoods
@@ -22,6 +48,8 @@ export default function AdminBlsImportPage() {
     } catch (e) {
       setError(e.message)
       setMsg(null)
+    } finally {
+      setBusy(false)
     }
   }
 
@@ -39,17 +67,8 @@ export default function AdminBlsImportPage() {
         </p>
       )}
       {error && <p style={{ color: 'var(--danger)' }}>{error}</p>}
-      <div className="form-row" style={{ marginTop: 16 }}>
-        <label className="form-label">Components XLSX</label>
-        <input type="file" accept=".xlsx" onChange={(e) => e.target.files[0] && run('components', e.target.files[0], true)} />
-        <input type="file" accept=".xlsx" onChange={(e) => e.target.files[0] && run('components', e.target.files[0], false)} />
-      </div>
-      <p style={{ fontSize: 12, color: 'var(--text3)' }}>Erstes Feld = prüfen, zweites = anwenden.</p>
-      <div className="form-row">
-        <label className="form-label">Daten XLSX</label>
-        <input type="file" accept=".xlsx" onChange={(e) => e.target.files[0] && run('foods', e.target.files[0], true)} />
-        <input type="file" accept=".xlsx" onChange={(e) => e.target.files[0] && run('foods', e.target.files[0], false)} />
-      </div>
+      <FileImportBlock label="Components XLSX" kind="components" busy={busy} onRun={run} />
+      <FileImportBlock label="Daten XLSX" kind="foods" busy={busy} onRun={run} />
       {msg && <pre style={{ whiteSpace: 'pre-wrap', fontSize: 12, background: 'var(--surface2)', padding: 12, borderRadius: 8 }}>{msg}</pre>}
     </div>
   )