All first todos completed

src/app/projects/page.tsx

@@ -18,6 +18,7 @@ import type {
 
 const emptyGlobalDevice: CreateGlobalDeviceInput = {
   name: "",
+  displayName: "",
   category: "",
   quantity: 1,
   installedPowerPerUnitKw: 0.1,
@@ -42,6 +43,7 @@ export default function ProjectsPage() {
   const [projectName, setProjectName] = useState("");
   const [globalDeviceForm, setGlobalDeviceForm] = useState<Record<string, string>>({
     name: "",
+    displayName: "",
     category: "",
     quantity: "1",
     installedPowerPerUnitKw: "0.1",
@@ -92,6 +94,7 @@ export default function ProjectsPage() {
     }
     const payload: CreateGlobalDeviceInput = {
       name: globalDeviceForm.name.trim(),
+      displayName: globalDeviceForm.displayName.trim() || globalDeviceForm.name.trim(),
       category: globalDeviceForm.category.trim() || undefined,
       quantity: Number(globalDeviceForm.quantity),
       installedPowerPerUnitKw: Number(globalDeviceForm.installedPowerPerUnitKw),
@@ -108,6 +111,7 @@ export default function ProjectsPage() {
       setGlobalDevices((current) => [...current, created]);
       setGlobalDeviceForm({
         name: emptyGlobalDevice.name,
+        displayName: emptyGlobalDevice.displayName,
         category: emptyGlobalDevice.category ?? "",
         quantity: String(emptyGlobalDevice.quantity),
         installedPowerPerUnitKw: String(emptyGlobalDevice.installedPowerPerUnitKw),
@@ -139,11 +143,12 @@ export default function ProjectsPage() {
 
   async function handleQuickUpdateGlobalDevice(
     device: GlobalDeviceDto,
-    key: "name" | "category",
+    key: "name" | "displayName" | "category",
     value: string
   ) {
     const payload: CreateGlobalDeviceInput = {
       name: key === "name" ? value : device.name,
+      displayName: key === "displayName" ? value : device.displayName,
       category: key === "category" ? value : device.category ?? undefined,
       quantity: device.quantity,
       installedPowerPerUnitKw: device.installedPowerPerUnitKw,
@@ -238,12 +243,20 @@ export default function ProjectsPage() {
             <div className="col-12 col-md-3">
               <input
                 className="form-control"
-                placeholder="Bezeichnung"
+                placeholder="Interner Name"
                 value={globalDeviceForm.name}
                 onChange={(event) => setGlobalDeviceForm((current) => ({ ...current, name: event.target.value }))}
               />
             </div>
-            <div className="col-6 col-md-2">
+            <div className="col-12 col-md-3">
+              <input
+                className="form-control"
+                placeholder="Anzeigename"
+                value={globalDeviceForm.displayName}
+                onChange={(event) => setGlobalDeviceForm((current) => ({ ...current, displayName: event.target.value }))}
+              />
+            </div>
+            <div className="col-6 col-md-1">
               <input
                 className="form-control"
                 placeholder="Kategorie"
@@ -264,7 +277,7 @@ export default function ProjectsPage() {
                 }
               />
             </div>
-            <div className="col-6 col-md-2">
+            <div className="col-6 col-md-1">
               <input
                 className="form-control"
                 type="number"
@@ -315,7 +328,8 @@ export default function ProjectsPage() {
           <table className="table table-sm table-striped align-middle mb-0">
             <thead>
               <tr>
-                <th>Bezeichnung</th>
+                <th>Interner Name</th>
+                <th>Anzeigename</th>
                 <th>Kategorie</th>
                 <th>Anzahl</th>
                 <th>Leistung je Stück [kW]</th>
@@ -337,6 +351,17 @@ export default function ProjectsPage() {
                       }
                     />
                   </td>
+                  <td>
+                    <input
+                      className="form-control form-control-sm"
+                      defaultValue={device.displayName}
+                      onBlur={(event) =>
+                        event.target.value !== device.displayName
+                          ? handleQuickUpdateGlobalDevice(device, "displayName", event.target.value)
+                          : undefined
+                      }
+                    />
+                  </td>
                   <td>
                     <input
                       className="form-control form-control-sm"
@@ -364,7 +389,7 @@ export default function ProjectsPage() {
               ))}
               {!globalDevices.length ? (
                 <tr>
-                  <td colSpan={6} className="text-center text-secondary py-4">
+                  <td colSpan={7} className="text-center text-secondary py-4">
                     Noch keine globalen Geräte vorhanden.
                   </td>
                 </tr>