feat(validation): complete validation editor and master data modules

validation-suite/frontend/atlas/components/resource-page.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+import { ColumnDef } from "@tanstack/react-table";
+import { Plus } from "lucide-react";
+import { useAuth } from "@/components/auth";
+import { DataTable } from "@/components/data-table";
+import { apiGet } from "@/lib/api";
+
+export function ResourcePage<T>({
+  title,
+  subtitle,
+  path,
+  columns
+}: {
+  title: string;
+  subtitle: string;
+  path: string;
+  columns: ColumnDef<T>[];
+}) {
+  const { token } = useAuth();
+  const query = useQuery({
+    queryKey: [path, token],
+    queryFn: () => apiGet<T[]>(path, token ?? ""),
+    enabled: Boolean(token)
+  });
+
+  return (
+    <div className="space-y-6">
+      <header className="flex flex-col justify-between gap-4 sm:flex-row sm:items-center">
+        <div>
+          <h1 className="text-3xl font-semibold text-text">{title}</h1>
+          <p className="mt-2 text-text-light">{subtitle}</p>
+        </div>
+        <button type="button" className="inline-flex h-12 items-center justify-center gap-2 rounded-lg bg-primary px-5 font-semibold text-white shadow-soft">
+          <Plus className="h-5 w-5" />
+          Neu
+        </button>
+      </header>
+      {query.isLoading ? (
+        <div className="rounded-lg border border-border bg-surface p-8 text-text-light shadow-soft">Daten werden geladen.</div>
+      ) : query.isError ? (
+        <div className="rounded-lg border border-danger/30 bg-surface p-8 text-danger shadow-soft">Daten konnten nicht geladen werden.</div>
+      ) : (
+        <DataTable data={query.data ?? []} columns={columns} />
+      )}
+    </div>
+  );
+}
+