feat(auth): enterprise authentication and user management

2026-07-02 22:19:12 +02:00 · 2026-07-02 22:19:12 +02:00 · 86a32a942c
commit 86a32a942c
parent 4bc8b20a21
36 changed files with 2239 additions and 324 deletions
--- a/frontend/athena/components/common/DataTable.tsx
+++ b/frontend/athena/components/common/DataTable.tsx
@ -0,0 +1,117 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { ArrowDown, ArrowUp, ArrowUpDown } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+
+export type DataTableColumn<T> = {
+  key: string;
+  label: string;
+  sortable?: boolean;
+  className?: string;
+  render: (row: T) => ReactNode;
+};
+
+type Props<T> = {
+  columns: DataTableColumn<T>[];
+  rows: T[];
+  rowKey: (row: T) => string | number;
+  sortKey: string;
+  sortDirection: "asc" | "desc";
+  loading?: boolean;
+  error?: string;
+  emptyTitle: string;
+  emptyDescription: string;
+  onSort: (key: string) => void;
+};
+
+export default function DataTable<T>({
+  columns,
+  rows,
+  rowKey,
+  sortKey,
+  sortDirection,
+  loading = false,
+  error,
+  emptyTitle,
+  emptyDescription,
+  onSort,
+}: Props<T>) {
+  return (
+    <div className="overflow-hidden rounded-lg border bg-white">
+      <div className="overflow-x-auto">
+        <table className="w-full min-w-[920px] text-sm">
+          <thead className="bg-slate-50 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">
+            <tr>
+              {columns.map((column) => {
+                const active = sortKey === column.key;
+                const SortIcon = active
+                  ? sortDirection === "asc"
+                    ? ArrowUp
+                    : ArrowDown
+                  : ArrowUpDown;
+
+                return (
+                  <th key={column.key} className={column.className ?? "px-4 py-3"}>
+                    {column.sortable ? (
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        className="h-7 px-1 text-xs uppercase tracking-wide"
+                        onClick={() => onSort(column.key)}
+                      >
+                        {column.label}
+                        <SortIcon size={14} />
+                      </Button>
+                    ) : (
+                      column.label
+                    )}
+                  </th>
+                );
+              })}
+            </tr>
+          </thead>
+
+          <tbody>
+            {loading && (
+              <tr>
+                <td colSpan={columns.length} className="px-4 py-12 text-center text-slate-500">
+                  Daten werden geladen...
+                </td>
+              </tr>
+            )}
+
+            {!loading && error && (
+              <tr>
+                <td colSpan={columns.length} className="px-4 py-12 text-center text-red-600">
+                  {error}
+                </td>
+              </tr>
+            )}
+
+            {!loading && !error && rows.length === 0 && (
+              <tr>
+                <td colSpan={columns.length} className="px-4 py-12 text-center">
+                  <p className="font-medium text-slate-900">{emptyTitle}</p>
+                  <p className="mt-1 text-slate-500">{emptyDescription}</p>
+                </td>
+              </tr>
+            )}
+
+            {!loading && !error && rows.map((row) => (
+              <tr key={rowKey(row)} className="border-t hover:bg-slate-50">
+                {columns.map((column) => (
+                  <td key={column.key} className={column.className ?? "px-4 py-3"}>
+                    {column.render(row)}
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}