feat: clickable WAF event rows with detail drawer

- WafEvent model: expose rawData field from DB
- DataTable: add optional onRowClick prop with hover cursor
- WafEventsClient: clicking a row opens a right-side drawer showing
  all event fields plus the raw Coraza audit JSON (pretty-printed)

Safety: rawData is rendered via JSON.stringify into a <pre> element,
never via dangerouslySetInnerHTML, so attack payloads are displayed
as inert text.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/components/ui/DataTable.tsx

@@ -29,6 +29,7 @@ type DataTableProps<T> = {
   keyField: keyof T;
   emptyMessage?: string;
   loading?: boolean;
+  onRowClick?: (row: T) => void;
   pagination?: {
     total: number;
     page: number;
@@ -69,6 +70,7 @@ export function DataTable<T>({
   keyField,
   emptyMessage = "No data available",
   loading = false,
+  onRowClick,
   pagination,
 }: DataTableProps<T>) {
   return (
@@ -97,7 +99,11 @@ export function DataTable<T>({
               </TableRow>
             ) : (
               data.map((row) => (
-                <TableRow key={String(row[keyField])}>
+                <TableRow
+                  key={String(row[keyField])}
+                  onClick={onRowClick ? () => onRowClick(row) : undefined}
+                  sx={onRowClick ? { cursor: "pointer", "&:hover": { bgcolor: "action.hover" } } : undefined}
+                >
                   {columns.map((col) => (
                     <TableCell key={col.id} align={col.align || "left"}>
                       {col.render ? col.render(row) : (row as Record<string, unknown>)[col.id] as ReactNode}