Web: Chargen per Klick auf die ganze Zeile auswaehlen

Nicht nur die kleine Checkbox schaltet die Auswahl, sondern ein Klick irgendwo
in die Zeile (ausser auf Bedienelemente wie Lagerort-Dropdown/Link). Ausgewaehlte
Zeilen werden hervorgehoben. Neuer DataTable-Prop onRowClick.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

web/src/components/DataTable.jsx

@@ -29,7 +29,7 @@ function savePersisted(id, data) {
 export default function DataTable({
   id, columns, rows, getRowKey, rowClassName,
   empty = "Nichts gefunden.", loading = false, toolbarExtra = null, tree = null,
-  onVisibleRows = null,
+  onVisibleRows = null, onRowClick = null,
 }) {
   const colByKey = useMemo(() => Object.fromEntries(columns.map((c) => [c.key, c])), [columns]);
 
@@ -371,7 +371,9 @@ export default function DataTable({
           </thead>
           <tbody>
             {displayRows.map(({ row, depth, hasChildren }) => (
-              <tr key={getRowKey(row)} className={rowClassName?.(row) || ""}>
+              <tr key={getRowKey(row)} className={rowClassName?.(row) || ""}
+                onClick={onRowClick ? (e) => onRowClick(row, e) : undefined}
+                style={onRowClick ? { cursor: "pointer" } : undefined}>
                 {orderedCols.map((c) => (
                   <td key={c.key} className={c.align === "num" ? "num" : ""}>
                     {tree && treeActive && c.key === tree.column ? (

web/src/pages/Charges.jsx

@@ -178,6 +178,12 @@ export default function Charges() {
       <div className="card">
         <DataTable id="charges" columns={columns} rows={lots} loading={loading}
           onVisibleRows={setVisible}
+          rowClassName={(l) => (selected.has(l.id) ? "row-active" : "")}
+          onRowClick={(l, e) => {
+            // Klicks auf Bedienelemente (Checkbox, Lagerort-Dropdown, Link) nicht
+            // als Zeilenauswahl werten – überall sonst die Zeile umschalten.
+            if (!e.target.closest("input, select, a, button, label")) toggle(l.id);
+          }}
           getRowKey={(l) => l.id} empty="Keine Chargen im Bestand." />
       </div>
     </div>