feat: implement admin login form localization, add import functionality, and enhance file handling

frontend/src/components/ImportGUI.tsx

@@ -0,0 +1,83 @@
+import React from "react";
+import CircleUpload from "./CircleUpload";
+import { CircleX } from "lucide-react";
+
+type ImportGUIProps = {
+  onClose: () => void;
+};
+
+const ImportGUI: React.FC<ImportGUIProps> = ({ onClose }) => {
+  return (
+    <div className="fixed inset-0 z-50 flex items-start justify-center pt-24">
+      {/* Backdrop */}
+      <div className="absolute inset-0 bg-black/40 backdrop-blur-sm" />
+
+      {/* Dialog Panel */}
+      <div className="relative z-10 w-11/12 max-w-lg rounded-2xl border border-black/10 bg-white/95 p-6 shadow-xl ring-1 ring-black/5">
+        <div className="flex items-start justify-between gap-4">
+          <div>
+            <h2 className="text-xl font-extrabold tracking-tight text-zinc-900">
+              Losnummern importieren
+            </h2>
+            <p className="mt-1 text-sm text-zinc-600 leading-relaxed">
+              Importieren Sie Losnummern als strukturierte Datei. Unterstützte
+              Formate:
+            </p>
+            <div className="mt-2 flex flex-wrap gap-2">
+              {[".csv"].map((fileFormat) => (
+                <span
+                  key={fileFormat}
+                  className="inline-flex items-center rounded-full border border-black/10 bg-zinc-100 px-3 py-0.5 text-xs font-medium text-zinc-700 shadow-inner"
+                >
+                  {fileFormat}
+                </span>
+              ))}
+            </div>
+            <a href="/Beispiel.csv" download>
+              <button className="inline-flex justify-center rounded bg-zinc-300 px-1 py-1 text-xs text-zinc-800 shadow transition hover:bg-zinc-400 active:bg-zinc-500">
+                Beispiel (Download)
+              </button>
+            </a>
+          </div>
+          <button
+            type="button"
+            onClick={onClose}
+            className="group rounded-full p-1.5 text-zinc-500 transition hover:bg-zinc-200/70 hover:text-zinc-700 active:scale-95"
+            aria-label="Schließen"
+          >
+            <CircleX className="h-6 w-6" strokeWidth={2.25} />
+          </button>
+        </div>
+
+        <div className="mt-6">
+          <CircleUpload accept=".csv" />
+        </div>
+
+        {/* Placeholder for optional file summary / mapping UI */}
+        <div className="mt-6 hidden rounded-xl border border-dashed border-black/15 bg-zinc-50/60 p-4 text-center text-xs text-zinc-500">
+          Ausgewählte Dateien werden hier aufgelistet.
+        </div>
+
+        {/* Actions */}
+        <div className="mt-8 flex flex-col-reverse gap-3 sm:flex-row sm:justify-end">
+          <button
+            type="button"
+            onClick={onClose}
+            className="inline-flex justify-center rounded-xl bg-zinc-300 px-5 py-3 text-sm font-bold text-zinc-800 shadow transition hover:bg-zinc-400 active:bg-zinc-500"
+          >
+            Abbrechen
+          </button>
+          <button
+            type="button"
+            className="inline-flex justify-center rounded-xl bg-blue-600 px-6 py-3 text-sm font-bold text-white shadow transition hover:bg-blue-700 active:bg-blue-800 disabled:opacity-60 disabled:cursor-not-allowed"
+            disabled
+          >
+            Importieren
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ImportGUI;