edit function

src/components/locations/EditLocationForm.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { useActionState, useEffect, useRef } from "react";
+import { useRouter } from "next/navigation";
+import { updateLocation } from "@/actions/locationActions";
+import type { FormState } from "@/actions/locationActions";
+import type { Location } from "@/generated/prisma/client";
+
+interface EditLocationFormProps {
+  location: Location;
+}
+
+export default function EditLocationForm({ location }: EditLocationFormProps) {
+  const [state, formAction] = useActionState(updateLocation, {} as FormState);
+  const formRef = useRef<HTMLFormElement>(null);
+  const router = useRouter();
+
+  useEffect(() => {
+    if (state.success) {
+      // Navigate back to the locations list after successful update
+      router.push("/locations");
+    }
+  }, [state.success, router]);
+
+  return (
+    <div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
+      <h2 className="text-base font-semibold text-slate-900 mb-4">Ort bearbeiten</h2>
+      <form ref={formRef} action={formAction} className="space-y-4">
+        <input type="hidden" name="id" value={location.id} />
+
+        <div>
+          <label htmlFor="loc-name" className="block text-sm font-medium text-slate-700 mb-1">
+            Name <span className="text-red-500">*</span>
+          </label>
+          <input
+            id="loc-name"
+            name="name"
+            type="text"
+            defaultValue={location.name}
+            required
+            className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent placeholder:text-slate-400"
+          />
+        </div>
+
+        <div>
+          <label htmlFor="loc-description" className="block text-sm font-medium text-slate-700 mb-1">
+            Beschreibung <span className="text-slate-400 font-normal">(optional, Markdown)</span>
+          </label>
+          <textarea
+            id="loc-description"
+            name="description"
+            rows={3}
+            defaultValue={location.description ?? ""}
+            className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent placeholder:text-slate-400 resize-y"
+          />
+        </div>
+
+        {state.error && (
+          <p className="text-sm text-red-600 bg-red-50 border border-red-100 px-3 py-2 rounded-lg">{state.error}</p>
+        )}
+
+        <div className="flex items-center gap-3">
+          <button
+            type="submit"
+            disabled={false}
+            className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg"
+          >
+            Speichern
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+}

src/components/locations/LocationsTabe.tsx

@@ -1,5 +1,6 @@
 import type { LocationWithCounts } from "@/lib/types";
 import DeleteLocationButton from "./DeleteLocationButton";
+import Link from "next/link";
 
 interface LocationsTableProps {
   locations: LocationWithCounts[];
@@ -73,10 +74,13 @@ export default function LocationsTable({ locations }: LocationsTableProps) {
                     </span>
                   </td>
                   <td className="px-6 py-4 text-right">
-                    <DeleteLocationButton
-                      id={location.id}
-                      cableCount={totalCables}
-                    />
+                    <div className="inline-flex items-center gap-2">
+                      <Link href={`/locations/${location.id}/edit`} className="text-sm text-blue-600 hover:text-blue-800">Bearbeiten</Link>
+                      <DeleteLocationButton
+                        id={location.id}
+                        cableCount={totalCables}
+                      />
+                    </div>
                   </td>
                 </tr>
               );