feat(mui): migrate Dashboard (Přehled) onto MUI kit

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

src/admin/components/dashboard/DashActivityFeed.tsx

@@ -1,4 +1,7 @@
-import { Link } from "react-router-dom";
+import { Link as RouterLink } from "react-router-dom";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import { Card, Button, EmptyState } from "../../ui";
 import {
   ENTITY_TYPE_LABELS,
   getActivityIconClass,
@@ -18,6 +21,16 @@ interface DashActivityFeedProps {
   activities: Activity[] | null;
 }
 
+// Maps the legacy activity-icon class to the MUI palette key used to tint the
+// circular icon badge (danger → error, accent → primary, muted → default).
+const ACTIVITY_BADGE_COLOR: Record<string, string> = {
+  success: "success",
+  info: "info",
+  danger: "error",
+  accent: "primary",
+  muted: "default",
+};
+
 function getActivityIcon(action: string) {
   switch (action) {
     case "create":
@@ -103,37 +116,92 @@ export default function DashActivityFeed({
   }
 
   return (
-    <div className="admin-card dash-activity-card">
-      <div className="admin-card-header flex-between">
-        <h2 className="admin-card-title">Audit log</h2>
-        <Link
+    <Card sx={{ display: "flex", flexDirection: "column" }}>
+      <Box
+        sx={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          mb: 2,
+        }}
+      >
+        <Typography variant="h6">Audit log</Typography>
+        <Button
+          component={RouterLink}
           to="/audit-log"
-          className="admin-btn admin-btn-primary admin-btn-sm"
+          size="small"
+          sx={{ flexShrink: 0 }}
         >
           Detail &rarr;
-        </Link>
-      </div>
-      <div className="admin-card-body" style={{ padding: 0 }}>
-        {activities.map((act) => (
-          <div key={act.id} className="dash-activity-row">
-            <div
-              className={`dash-activity-icon ${getActivityIconClass(act.action)}`}
-            >
-              {getActivityIcon(act.action)}
-            </div>
-            <div className="dash-activity-main">
-              <div className="dash-activity-text">{act.description}</div>
-              <div className="dash-activity-sub">
-                {act.username || "Systém"} ·{" "}
-                {ENTITY_TYPE_LABELS[act.entity_type] || act.entity_type}
-              </div>
-            </div>
-            <div className="dash-activity-time admin-mono">
-              {formatActivityTime(act.created_at)}
-            </div>
-          </div>
-        ))}
-      </div>
-    </div>
+        </Button>
+      </Box>
+
+      {activities.length === 0 ? (
+        <EmptyState title="Žádná aktivita" />
+      ) : (
+        <Box sx={{ display: "flex", flexDirection: "column" }}>
+          {activities.map((act) => {
+            const badgeColor =
+              ACTIVITY_BADGE_COLOR[getActivityIconClass(act.action)] ??
+              "default";
+            const isDefault = badgeColor === "default";
+            return (
+              <Box
+                key={act.id}
+                sx={{
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 1.5,
+                  py: 1.25,
+                  borderBottom: 1,
+                  borderColor: "divider",
+                  "&:last-of-type": { borderBottom: 0 },
+                }}
+              >
+                <Box
+                  sx={{
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    width: 32,
+                    height: 32,
+                    borderRadius: "50%",
+                    flexShrink: 0,
+                    bgcolor: isDefault ? "action.hover" : `${badgeColor}.light`,
+                    color: isDefault ? "text.secondary" : `${badgeColor}.main`,
+                  }}
+                >
+                  {getActivityIcon(act.action)}
+                </Box>
+                <Box sx={{ flex: 1, minWidth: 0 }}>
+                  <Typography
+                    variant="body2"
+                    sx={{ fontWeight: 500 }}
+                    noWrap
+                    title={act.description}
+                  >
+                    {act.description}
+                  </Typography>
+                  <Typography variant="caption" color="text.secondary" noWrap>
+                    {act.username || "Systém"} ·{" "}
+                    {ENTITY_TYPE_LABELS[act.entity_type] || act.entity_type}
+                  </Typography>
+                </Box>
+                <Typography
+                  variant="caption"
+                  color="text.secondary"
+                  sx={{
+                    fontFamily: "'DM Mono', Menlo, monospace",
+                    flexShrink: 0,
+                  }}
+                >
+                  {formatActivityTime(act.created_at)}
+                </Typography>
+              </Box>
+            );
+          })}
+        </Box>
+      )}
+    </Card>
   );
 }