Merge remote-tracking branch 'origin/feature/amev-picker-and-collapsible-sidebar'

src/app/projects/page.tsx

@@ -14,6 +14,7 @@ import type {
   CreateGlobalDeviceInput,
   GlobalDeviceDto,
 } from "../../frontend/types";
+import { GzfPickerModal } from "../../frontend/components/gzf-picker-modal";
 
 const PROJECTS_CHANGED_EVENT = "leistungsbilanz:projects-changed";
 
@@ -67,6 +68,7 @@ export default function ProjectsPage() {
     id: string;
     name: string;
   } | null>(null);
+  const [isGzfPickerOpen, setIsGzfPickerOpen] = useState(false);
 
   async function loadData() {
     setError(null);
@@ -380,18 +382,28 @@ export default function ProjectsPage() {
                 }
               />
             </div>
-            <div className="col-6 col-md-1">
-              <input
-                className="form-control"
-                type="number"
-                step="0.01"
-                min="0"
-                max="1"
-                value={globalDeviceForm.demandFactor}
-                onChange={(event) =>
-                  setGlobalDeviceForm((current) => ({ ...current, demandFactor: event.target.value }))
-                }
-              />
+            <div className="col-6 col-md-2">
+              <div className="input-group">
+                <input
+                  className="form-control"
+                  type="number"
+                  step="0.01"
+                  min="0"
+                  max="1"
+                  value={globalDeviceForm.demandFactor}
+                  onChange={(event) =>
+                    setGlobalDeviceForm((current) => ({ ...current, demandFactor: event.target.value }))
+                  }
+                />
+                <button
+                  className="btn btn-outline-primary"
+                  onClick={() => setIsGzfPickerOpen(true)}
+                  title="Gleichzeitigkeitsfaktor nach AMEV wählen"
+                  type="button"
+                >
+                  AMEV
+                </button>
+              </div>
             </div>
             <div className="col-6 col-md-1">
               <select
@@ -505,6 +517,16 @@ export default function ProjectsPage() {
         </div>
       </section>
       </div>
+
+      {isGzfPickerOpen ? (
+        <GzfPickerModal
+          onClose={() => setIsGzfPickerOpen(false)}
+          onSelect={(value) => {
+            setGlobalDeviceForm((current) => ({ ...current, demandFactor: String(value) }));
+            setIsGzfPickerOpen(false);
+          }}
+        />
+      ) : null}
     </main>
   );
 }