chore(release): v2.0.2 — dashboard "today's assignment" card

- New "Vaše dnešní zařazení" dashboard card: shows the logged-in user's
  work-plan entry for today (category + project/site + note, multi-day
  range badge), with a muted empty state.

No DB migrations. tsc -b --noEmit, npm run build, vitest 152/152 clean.

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

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "app-ts",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "app-ts",
-      "version": "2.0.0",
+      "version": "2.0.2",
       "license": "ISC",
       "dependencies": {
         "@dnd-kit/core": "^6.3.1",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "app-ts",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "description": "",
   "main": "dist/server.js",
   "scripts": {

src/admin/components/PlanCellModal.tsx

@@ -479,6 +479,7 @@ function ViewModal(props: Props) {
       onClose={onClose}
       onSubmit={onClose}
       submitText="Zavřít"
+      hideCancel
     >
       <Typography sx={{ mb: 1 }}>
         <strong>Datum:</strong> {formatDate(c.shift_date)}

src/admin/components/dashboard/DashActivityFeed.tsx

@@ -2,6 +2,7 @@ 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 { iconBadgeSx, type IconBadgeColor } from "../../theme";
 import {
   ENTITY_TYPE_LABELS,
   getActivityIconClass,
@@ -159,17 +160,20 @@ export default function DashActivityFeed({
                 }}
               >
                 <Box
-                  sx={{
+                  sx={[
-                    display: "flex",
+                    {
-                    alignItems: "center",
+                      display: "flex",
-                    justifyContent: "center",
+                      alignItems: "center",
-                    width: 32,
+                      justifyContent: "center",
-                    height: 32,
+                      width: 32,
-                    borderRadius: "50%",
+                      height: 32,
-                    flexShrink: 0,
+                      borderRadius: "50%",
-                    bgcolor: isDefault ? "grey.600" : `${badgeColor}.main`,
+                      flexShrink: 0,
-                    color: "common.white",
+                    },
-                  }}
+                    iconBadgeSx(
+                      isDefault ? "default" : (badgeColor as IconBadgeColor),
+                    ),
+                  ]}
                 >
                   {getActivityIcon(act.action)}
                 </Box>

src/admin/components/dashboard/DashProfile.tsx

@@ -10,6 +10,7 @@ import DialogActions from "@mui/material/DialogActions";
 import { useAuth } from "../../context/AuthContext";
 import { useAlert } from "../../context/AlertContext";
 import apiFetch from "../../utils/api";
+import { iconBadgeSx } from "../../theme";
 import { Card, Button, Modal, Field, TextField } from "../../ui";
 import useDialogScrollLock from "../../ui/useDialogScrollLock";
 
@@ -251,17 +252,18 @@ export default function DashProfile({
             >
               <Box sx={{ display: "flex", alignItems: "center", gap: 1.5 }}>
                 <Box
-                  sx={{
+                  sx={[
-                    width: 36,
+                    {
-                    height: 36,
+                      width: 36,
-                    borderRadius: "50%",
+                      height: 36,
-                    display: "flex",
+                      borderRadius: "50%",
-                    alignItems: "center",
+                      display: "flex",
-                    justifyContent: "center",
+                      alignItems: "center",
-                    flexShrink: 0,
+                      justifyContent: "center",
-                    bgcolor: totpEnabled ? "success.main" : "grey.600",
+                      flexShrink: 0,
-                    color: "common.white",
+                    },
-                  }}
+                    iconBadgeSx(totpEnabled ? "success" : "default"),
+                  ]}
                 >
                   <svg
                     width="18"
@@ -425,7 +427,8 @@ export default function DashProfile({
                   p: 1.5,
                   mb: 2,
                   borderRadius: 2,
-                  bgcolor: "warning.light",
+                  bgcolor:
+                    "rgba(var(--mui-palette-warning-mainChannel) / 0.12)",
                   color: "warning.main",
                   fontSize: "0.875rem",
                 }}

src/admin/components/dashboard/DashTodayPlan.tsx

@@ -0,0 +1,110 @@
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import { Card } from "../../ui";
+import { formatDate } from "../../utils/formatters";
+
+/** The logged-in user's resolved work plan for today (see GET /api/admin/dashboard). */
+export interface TodayPlan {
+  shift_date: string;
+  category: string;
+  category_label: string;
+  category_color: string | null;
+  project_id: number | null;
+  project_number: string | null;
+  project_name: string | null;
+  note: string;
+  source: "entry" | "override";
+  rangeFrom: string | null;
+  rangeTo: string | null;
+}
+
+function projectLabel(p: TodayPlan): string {
+  const parts = [p.project_number, p.project_name].filter(Boolean);
+  return parts.length > 0 ? parts.join(" — ") : "Bez projektu";
+}
+
+/**
+ * "Vaše dnešní zařazení" — shows the logged-in user's work-plan entry for today
+ * (category + project/site + note, with a range badge when the day is part of a
+ * multi-day range). `plan === null` = the user has plan access but nothing is
+ * scheduled today (muted empty state). Rendered near the clock-in on the
+ * dashboard; the caller gates it on the plan permission.
+ */
+export default function DashTodayPlan({ plan }: { plan: TodayPlan | null }) {
+  const color = plan?.category_color || "var(--mui-palette-primary-main)";
+  return (
+    <Card sx={{ mb: 3 }}>
+      <Typography
+        variant="subtitle2"
+        sx={{ mb: 1.5, fontWeight: 600, color: "text.secondary" }}
+      >
+        Vaše dnešní zařazení
+      </Typography>
+
+      {plan ? (
+        <Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
+          <Box
+            sx={{
+              display: "flex",
+              alignItems: "center",
+              gap: 1,
+              flexWrap: "wrap",
+            }}
+          >
+            <Box
+              sx={{
+                display: "inline-flex",
+                alignItems: "center",
+                gap: 0.75,
+                px: 1.25,
+                py: 0.5,
+                borderRadius: 999,
+                border: 1,
+                borderColor: "divider",
+                bgcolor: `color-mix(in srgb, ${color} 12%, transparent)`,
+              }}
+            >
+              <Box
+                sx={{
+                  width: 10,
+                  height: 10,
+                  borderRadius: "50%",
+                  bgcolor: color,
+                  flexShrink: 0,
+                }}
+              />
+              <Typography
+                component="span"
+                sx={{ fontWeight: 700, fontSize: "0.8rem" }}
+              >
+                {plan.category_label}
+              </Typography>
+            </Box>
+            {plan.rangeFrom &&
+              plan.rangeTo &&
+              plan.rangeFrom !== plan.rangeTo && (
+                <Typography variant="caption" color="text.secondary">
+                  součást rozsahu {formatDate(plan.rangeFrom)} –{" "}
+                  {formatDate(plan.rangeTo)}
+                </Typography>
+              )}
+          </Box>
+
+          <Typography variant="h6" sx={{ lineHeight: 1.25 }}>
+            {projectLabel(plan)}
+          </Typography>
+
+          {plan.note && (
+            <Typography variant="body2" color="text.secondary">
+              {plan.note}
+            </Typography>
+          )}
+        </Box>
+      ) : (
+        <Typography variant="body2" color="text.secondary">
+          Pro dnešek nemáte naplánováno.
+        </Typography>
+      )}
+    </Card>
+  );
+}

src/admin/pages/AttendanceHistory.tsx

@@ -5,6 +5,7 @@ import Typography from "@mui/material/Typography";
 import { useAuth } from "../context/AuthContext";
 import Forbidden from "../components/Forbidden";
 import { companySettingsOptions } from "../lib/queries/settings";
+import { iconBadgeSx } from "../theme";
 import {
   attendanceHistoryOptions,
   type AttendanceRecord,
@@ -533,17 +534,18 @@ export default function AttendanceHistory() {
             }}
           >
             <Box
-              sx={{
+              sx={[
-                display: "flex",
+                {
-                alignItems: "center",
+                  display: "flex",
-                justifyContent: "center",
+                  alignItems: "center",
-                width: 44,
+                  justifyContent: "center",
-                height: 44,
+                  width: 44,
-                borderRadius: 2,
+                  height: 44,
-                bgcolor: "info.main",
+                  borderRadius: 2,
-                color: "#fff",
+                  flexShrink: 0,
-                flexShrink: 0,
+                },
-              }}
+                iconBadgeSx("info"),
+              ]}
             >
               <svg
                 width="24"

src/admin/pages/Dashboard.tsx

@@ -12,12 +12,16 @@ import { require2FAOptions } from "../lib/queries/settings";
 import { getCzechDate } from "../utils/dashboardHelpers";
 import { useApiMutation } from "../lib/queries/mutations";
 import { Card, Button, StatusChip, PageEnter } from "../ui";
+import { iconBadgeSx } from "../theme";
 import DashKpiCards from "../components/dashboard/DashKpiCards";
 import DashQuickActions from "../components/dashboard/DashQuickActions";
 import DashActivityFeed from "../components/dashboard/DashActivityFeed";
 import DashAttendanceToday from "../components/dashboard/DashAttendanceToday";
 import DashProfile from "../components/dashboard/DashProfile";
 import DashSessions from "../components/dashboard/DashSessions";
+import DashTodayPlan, {
+  type TodayPlan,
+} from "../components/dashboard/DashTodayPlan";
 
 const API_BASE = "/api/admin";
 
@@ -68,6 +72,7 @@ interface DashData {
   pending_orders?: number;
   unpaid_invoices?: number;
   pending_leave_requests?: number;
+  today_plan?: TodayPlan | null;
   [key: string]: unknown;
 }
 
@@ -253,17 +258,18 @@ export default function Dashboard() {
           >
             <Box sx={{ display: "flex", alignItems: "center", gap: 1.5 }}>
               <Box
-                sx={{
+                sx={[
-                  width: 40,
+                  {
-                  height: 40,
+                    width: 40,
-                  borderRadius: "50%",
+                    height: 40,
-                  display: "flex",
+                    borderRadius: "50%",
-                  alignItems: "center",
+                    display: "flex",
-                  justifyContent: "center",
+                    alignItems: "center",
-                  bgcolor: "error.main",
+                    justifyContent: "center",
-                  color: "#fff",
+                    flexShrink: 0,
-                  flexShrink: 0,
+                  },
-                }}
+                  iconBadgeSx("error"),
+                ]}
               >
                 <svg
                   width="20"
@@ -315,6 +321,13 @@ export default function Dashboard() {
           <DashKpiCards dashData={dashData ?? null} />
         )}
 
+      {/* My work plan for today — paired with the clock-in below */}
+      {!dashLoading &&
+        (hasPermission("attendance.record") ||
+          hasPermission("attendance.manage")) && (
+          <DashTodayPlan plan={dashData?.today_plan ?? null} />
+        )}
+
       {/* Quick actions */}
       {!dashLoading && (
         <DashQuickActions

src/admin/pages/InvoiceDetail.tsx

@@ -64,6 +64,7 @@ import {
   LoadingState,
   PageEnter,
   RichTextView,
+  headerActionsSx,
 } from "../ui";
 
 const API_BASE = "/api/admin";
@@ -1114,14 +1115,7 @@ export default function InvoiceDetail() {
                 />
               </Box>
             </Box>
-            <Box
+            <Box sx={headerActionsSx}>
-              sx={{
-                display: "flex",
-                alignItems: "center",
-                gap: 1,
-                flexWrap: "wrap",
-              }}
-            >
               {hasPermission("invoices.export") && (
                 <Button
                   onClick={() => handleViewPdf(invoice.language || "cs")}
@@ -1140,7 +1134,11 @@ export default function InvoiceDetail() {
                 </Button>
               )}
               {hasPermission("invoices.delete") && (
-                <Button onClick={() => setDeleteConfirm(true)} color="error">
+                <Button
+                  onClick={() => setDeleteConfirm(true)}
+                  variant="outlined"
+                  color="error"
+                >
                   Smazat
                 </Button>
               )}
@@ -1656,14 +1654,7 @@ export default function InvoiceDetail() {
               )}
             </Box>
           </Box>
-          <Box
+          <Box sx={headerActionsSx}>
-            sx={{
-              display: "flex",
-              alignItems: "center",
-              gap: 1,
-              flexWrap: "wrap",
-            }}
-          >
             {isEdit && invoice && hasPermission("invoices.export") && (
               <Button
                 onClick={() => handleViewPdf(invoice.language || "cs")}
@@ -1710,7 +1701,11 @@ export default function InvoiceDetail() {
                     </Button>
                   ))}
                 {hasPermission("invoices.delete") && (
-                  <Button onClick={() => setDeleteConfirm(true)} color="error">
+                  <Button
+                    onClick={() => setDeleteConfirm(true)}
+                    variant="outlined"
+                    color="error"
+                  >
                     Smazat
                   </Button>
                 )}

src/admin/pages/OfferDetail.tsx

@@ -74,6 +74,7 @@ import {
   EmptyState,
   LoadingState,
   PageEnter,
+  headerActionsSx,
 } from "../ui";
 
 const API_BASE = "/api/admin";
@@ -1118,14 +1119,7 @@ export default function OfferDetail() {
               {isCompleted && <StatusChip label="Dokončeno" color="success" />}
             </Box>
           </Box>
-          <Box
+          <Box sx={headerActionsSx}>
-            sx={{
-              display: "flex",
-              alignItems: "center",
-              gap: 1,
-              flexWrap: "wrap",
-            }}
-          >
             {isEdit && hasPermission("offers.export") && (
               <Button
                 onClick={handlePdf}
@@ -1184,7 +1178,11 @@ export default function OfferDetail() {
               </Button>
             )}
             {isEdit && hasPermission("offers.delete") && (
-              <Button onClick={() => setDeleteConfirm(true)} color="error">
+              <Button
+                onClick={() => setDeleteConfirm(true)}
+                variant="outlined"
+                color="error"
+              >
                 Smazat
               </Button>
             )}

src/admin/pages/OrderDetail.tsx

@@ -32,6 +32,7 @@ import {
   LoadingState,
   PageEnter,
   RichTextView,
+  headerActionsSx,
   type DataColumn,
 } from "../ui";
 
@@ -424,14 +425,7 @@ export default function OrderDetail() {
               />
             </Box>
           </Box>
-          <Box
+          <Box sx={headerActionsSx}>
-            sx={{
-              display: "flex",
-              alignItems: "center",
-              gap: 1,
-              flexWrap: "wrap",
-            }}
-          >
             {order.invoice ? (
               <Button
                 component={RouterLink}

src/admin/pages/ProjectDetail.tsx

@@ -29,6 +29,7 @@ import {
   ConfirmDialog,
   LoadingState,
   PageEnter,
+  headerActionsSx,
 } from "../ui";
 
 const API_BASE = "/api/admin";
@@ -320,14 +321,7 @@ export default function ProjectDetail() {
             </Box>
           </Box>
           {canEdit && (
-            <Box
+            <Box sx={headerActionsSx}>
-              sx={{
-                display: "flex",
-                alignItems: "center",
-                gap: 1,
-                flexWrap: "wrap",
-              }}
-            >
               <Button onClick={handleSave} disabled={saving}>
                 {saving ? "Ukládání..." : "Uložit"}
               </Button>

src/admin/pages/Settings.tsx

@@ -33,6 +33,7 @@ import {
 
 import { useApiMutation } from "../lib/queries/mutations";
 import apiFetch from "../utils/api";
+import { iconBadgeSx } from "../theme";
 const API_BASE = "/api/admin";
 
 const PlusIcon = (
@@ -842,17 +843,18 @@ export default function Settings() {
               >
                 <Box sx={{ display: "flex", alignItems: "center", gap: 1.5 }}>
                   <Box
-                    sx={{
+                    sx={[
-                      width: 36,
+                      {
-                      height: 36,
+                        width: 36,
-                      borderRadius: "50%",
+                        height: 36,
-                      display: "flex",
+                        borderRadius: "50%",
-                      alignItems: "center",
+                        display: "flex",
-                      justifyContent: "center",
+                        alignItems: "center",
-                      bgcolor: require2FA ? "success.light" : "action.hover",
+                        justifyContent: "center",
-                      color: require2FA ? "success.main" : "text.secondary",
+                        flexShrink: 0,
-                      flexShrink: 0,
+                      },
-                    }}
+                      iconBadgeSx(require2FA ? "success" : "default"),
+                    ]}
                   >
                     <svg
                       width="18"

src/admin/pages/WarehouseInventory.tsx

@@ -157,7 +157,7 @@ export default function WarehouseInventory() {
           />
         </Box>
         {statusFilter && (
-          <Button variant="outlined" onClick={resetFilters}>
+          <Button variant="outlined" color="inherit" onClick={resetFilters}>
             Zrušit filtry
           </Button>
         )}

src/admin/pages/WarehouseInventoryDetail.tsx

@@ -24,6 +24,7 @@ import {
   PageHeader,
   PageEnter,
   ConfirmDialog,
+  headerActionsSx,
   type DataColumn,
 } from "../ui";
 
@@ -192,7 +193,7 @@ export default function WarehouseInventoryDetail() {
       <PageHeader
         title={s.session_number || "Inventura"}
         actions={
-          <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+          <Box sx={headerActionsSx}>
             <Button
               component={RouterLink}
               to="/warehouse/inventory"

src/admin/pages/WarehouseIssueDetail.tsx

@@ -24,6 +24,7 @@ import {
   PageHeader,
   ConfirmDialog,
   PageEnter,
+  headerActionsSx,
   type DataColumn,
 } from "../ui";
 
@@ -233,7 +234,7 @@ export default function WarehouseIssueDetail() {
             : undefined
         }
         actions={
-          <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+          <Box sx={headerActionsSx}>
             <Button
               component={RouterLink}
               to="/warehouse/issues"

src/admin/pages/WarehouseIssues.tsx

@@ -248,7 +248,7 @@ export default function WarehouseIssues() {
           />
         </Box>
         {hasActiveFilters && (
-          <Button variant="outlined" onClick={resetFilters}>
+          <Button variant="outlined" color="inherit" onClick={resetFilters}>
             Zrušit filtry
           </Button>
         )}

src/admin/pages/WarehouseItemDetail.tsx

@@ -29,6 +29,7 @@ import {
   PageHeader,
   ConfirmDialog,
   PageEnter,
+  headerActionsSx,
   type DataColumn,
 } from "../ui";
 
@@ -233,7 +234,7 @@ export default function WarehouseItemDetail() {
 
   // Edit / view mode action buttons
   const headerActions = canManage ? (
-    <Box sx={{ display: "flex", gap: 1 }}>
+    <Box sx={headerActionsSx}>
       {editing || isNew ? (
         <>
           {!isNew && (
@@ -362,7 +363,7 @@ export default function WarehouseItemDetail() {
         title={title}
         subtitle={subtitle}
         actions={
-          <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+          <Box sx={headerActionsSx}>
             <Button
               component={RouterLink}
               to="/warehouse/items"

src/admin/pages/WarehouseReceiptDetail.tsx

@@ -26,6 +26,7 @@ import {
   PageHeader,
   ConfirmDialog,
   PageEnter,
+  headerActionsSx,
   type DataColumn,
 } from "../ui";
 
@@ -301,7 +302,7 @@ export default function WarehouseReceiptDetail() {
         title={r.receipt_number || "Nový doklad"}
         subtitle={r.supplier?.name}
         actions={
-          <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+          <Box sx={headerActionsSx}>
             <Button
               component={RouterLink}
               to="/warehouse/receipts"

src/admin/pages/WarehouseReceipts.tsx

@@ -247,7 +247,7 @@ export default function WarehouseReceipts() {
           />
         </Box>
         {hasActiveFilters && (
-          <Button variant="outlined" onClick={resetFilters}>
+          <Button variant="outlined" color="inherit" onClick={resetFilters}>
             Zrušit filtry
           </Button>
         )}

src/admin/pages/WarehouseReservations.tsx

@@ -376,7 +376,7 @@ export default function WarehouseReservations() {
           </Box>
         )}
         {hasActiveFilters && (
-          <Button variant="outlined" onClick={resetFilters}>
+          <Button variant="outlined" color="inherit" onClick={resetFilters}>
             Zrušit filtry
           </Button>
         )}

src/admin/theme.ts

@@ -1,4 +1,4 @@
-import { createTheme } from "@mui/material/styles";
+import { createTheme, type Theme } from "@mui/material/styles";
 
 const FONT_BODY = "'Plus Jakarta Sans', system-ui, sans-serif";
 const FONT_HEADING = "'Urbanist', sans-serif";
@@ -7,6 +7,19 @@ const FONT_MONO = "'DM Mono', Menlo, monospace";
 // Standard Material easing (matches the legacy --transition cubic-bezier).
 const EASE = "cubic-bezier(0.4, 0, 0.2, 1)";
 
+// Dark-mode fills for FILLED colored surfaces (contained buttons, filled chips,
+// StatCard badges). The palette .main stays BRIGHT in dark mode (it drives text,
+// outlined buttons and row tints), but a bright fill makes WHITE text/glyphs
+// illegible — so filled surfaces drop to these darker shades (≈ the light-scheme
+// values) in dark mode. One rule everywhere: filled colored = white text,
+// readable in both themes. Light mode needs no override (its .main is dark).
+export const FILLED_DARK_BG = {
+  error: { bg: "#dc2626", hover: "#b91c1c" },
+  success: { bg: "#15803d", hover: "#166534" },
+  warning: { bg: "#b45309", hover: "#92400e" },
+  info: { bg: "#1d4ed8", hover: "#1e40af" },
+} as const;
+
 export const theme = createTheme({
   cssVariables: {
     colorSchemeSelector: "[data-theme='%s']",
@@ -80,6 +93,47 @@ export const theme = createTheme({
           },
           "&:active": { transform: "translateY(0) scale(0.97)" },
         },
+        // Filled colored buttons: WHITE text in BOTH themes (was per-scheme
+        // contrastText → near-black text on colored fills in dark mode, which
+        // also clashed with the always-white primary — "black text on one red
+        // button, white on another"). In dark mode the fill drops to a darker
+        // shade so white stays legible.
+        containedError: ({ theme }) => ({
+          color: "#fff",
+          ...theme.applyStyles("dark", {
+            "&:not(.Mui-disabled)": {
+              backgroundColor: FILLED_DARK_BG.error.bg,
+              "&:hover": { backgroundColor: FILLED_DARK_BG.error.hover },
+            },
+          }),
+        }),
+        containedSuccess: ({ theme }) => ({
+          color: "#fff",
+          ...theme.applyStyles("dark", {
+            "&:not(.Mui-disabled)": {
+              backgroundColor: FILLED_DARK_BG.success.bg,
+              "&:hover": { backgroundColor: FILLED_DARK_BG.success.hover },
+            },
+          }),
+        }),
+        containedWarning: ({ theme }) => ({
+          color: "#fff",
+          ...theme.applyStyles("dark", {
+            "&:not(.Mui-disabled)": {
+              backgroundColor: FILLED_DARK_BG.warning.bg,
+              "&:hover": { backgroundColor: FILLED_DARK_BG.warning.hover },
+            },
+          }),
+        }),
+        containedInfo: ({ theme }) => ({
+          color: "#fff",
+          ...theme.applyStyles("dark", {
+            "&:not(.Mui-disabled)": {
+              backgroundColor: FILLED_DARK_BG.info.bg,
+              "&:hover": { backgroundColor: FILLED_DARK_BG.info.hover },
+            },
+          }),
+        }),
       },
     },
     MuiCard: {
@@ -99,6 +153,54 @@ export const theme = createTheme({
           fontWeight: 700,
           transition: `background-color 200ms ${EASE}, box-shadow 200ms ${EASE}`,
         },
+        // Filled colored chips follow the same rule as filled buttons: white
+        // label in both themes, darker fill in dark mode so white stays legible.
+        // (Chip has no per-color `filledX` key, so target the color class and
+        // scope to the filled variant.)
+        colorError: ({ theme }) => ({
+          "&.MuiChip-filled": {
+            color: "#fff",
+            ...theme.applyStyles("dark", {
+              backgroundColor: FILLED_DARK_BG.error.bg,
+              "&.MuiChip-clickable:hover": {
+                backgroundColor: FILLED_DARK_BG.error.hover,
+              },
+            }),
+          },
+        }),
+        colorSuccess: ({ theme }) => ({
+          "&.MuiChip-filled": {
+            color: "#fff",
+            ...theme.applyStyles("dark", {
+              backgroundColor: FILLED_DARK_BG.success.bg,
+              "&.MuiChip-clickable:hover": {
+                backgroundColor: FILLED_DARK_BG.success.hover,
+              },
+            }),
+          },
+        }),
+        colorWarning: ({ theme }) => ({
+          "&.MuiChip-filled": {
+            color: "#fff",
+            ...theme.applyStyles("dark", {
+              backgroundColor: FILLED_DARK_BG.warning.bg,
+              "&.MuiChip-clickable:hover": {
+                backgroundColor: FILLED_DARK_BG.warning.hover,
+              },
+            }),
+          },
+        }),
+        colorInfo: ({ theme }) => ({
+          "&.MuiChip-filled": {
+            color: "#fff",
+            ...theme.applyStyles("dark", {
+              backgroundColor: FILLED_DARK_BG.info.bg,
+              "&.MuiChip-clickable:hover": {
+                backgroundColor: FILLED_DARK_BG.info.hover,
+              },
+            }),
+          },
+        }),
       },
     },
     MuiOutlinedInput: {
@@ -124,3 +226,29 @@ export const fonts = {
   heading: FONT_HEADING,
   mono: FONT_MONO,
 };
+
+export type IconBadgeColor =
+  | "default"
+  | "primary"
+  | "success"
+  | "warning"
+  | "error"
+  | "info";
+
+/**
+ * sx fragment for a solid icon-badge tile: a `<color>.main` fill with a WHITE
+ * glyph, darkened in dark mode (FILLED_DARK_BG) so white stays legible on the
+ * otherwise-bright success/warning/info/error fills. `default` = neutral grey.
+ * Single source of truth for every labelled icon badge — use in an sx array
+ * next to the tile's size/shape so they can never drift apart:
+ *   sx={[{ width: 40, height: 40, borderRadius: 2, display: "flex", … }, iconBadgeSx(color)]}
+ */
+export function iconBadgeSx(color: IconBadgeColor) {
+  const bg = color === "default" ? "grey.600" : `${color}.main`;
+  const darkBg = (FILLED_DARK_BG as Record<string, { bg: string }>)[color]?.bg;
+  return (theme: Theme) => ({
+    bgcolor: bg,
+    color: "common.white",
+    ...(darkBg ? theme.applyStyles("dark", { backgroundColor: darkBg }) : {}),
+  });
+}

src/admin/ui/PageHeader.tsx

@@ -1,6 +1,7 @@
 import type { ReactNode } from "react";
 import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
+import type { SxProps, Theme } from "@mui/material/styles";
 
 export interface PageHeaderProps {
   title: string;
@@ -8,6 +9,26 @@ export interface PageHeaderProps {
   actions?: ReactNode;
 }
 
+/**
+ * Shared sx for a header action-button group. On mobile each button gets its
+ * own full-width row (column + stretch); from `sm` up it's the usual right-
+ * aligned wrapping row. Use on the Box that wraps the header's action Buttons
+ * (page headers + detail-page headers) so the mobile layout is identical
+ * everywhere — no more buttons wrapping into a ragged grid on phones.
+ */
+export const headerActionsSx: SxProps<Theme> = {
+  display: "flex",
+  flexDirection: { xs: "column", sm: "row" },
+  alignItems: { xs: "stretch", sm: "center" },
+  justifyContent: { sm: "flex-end" },
+  flexWrap: { sm: "wrap" },
+  gap: 1,
+  width: { xs: "100%", sm: "auto" },
+  // Some detail-page headers keep a StatusChip in this same group — keep it at
+  // its natural size on mobile instead of stretching it into a full-width bar.
+  "& > .MuiChip-root": { alignSelf: { xs: "flex-start", sm: "auto" } },
+};
+
 /**
  * Standard page header: title (+ optional subtitle) on the left,
  * action controls on the right. No framer-motion — pages add their own entrance.
@@ -36,19 +57,7 @@ export default function PageHeader({
           </Typography>
         )}
       </Box>
-      {actions && (
+      {actions && <Box sx={headerActionsSx}>{actions}</Box>}
-        <Box
-          sx={{
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "flex-end",
-            gap: 1,
-            flexWrap: "wrap",
-          }}
-        >
-          {actions}
-        </Box>
-      )}
     </Box>
   );
 }

src/admin/ui/StatCard.tsx

@@ -2,6 +2,7 @@ import type { ReactNode } from "react";
 import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
 import Card from "./Card";
+import { iconBadgeSx } from "../theme";
 
 export type StatCardColor =
   | "default"
@@ -30,27 +31,23 @@ export default function StatCard({
   color = "default",
   footer,
 }: StatCardProps) {
-  // Solid tile + white glyph: high-contrast in both themes (the old light tint
-  // left the icon dark/low-visibility, esp. for the default variant).
-  const iconBg = color === "default" ? "grey.600" : `${color}.main`;
-  const iconColor = "common.white";
-
   return (
     <Card>
       <Box sx={{ display: "flex", alignItems: "flex-start", gap: 1.5 }}>
         {icon && (
           <Box
-            sx={{
+            sx={[
-              display: "flex",
+              {
-              alignItems: "center",
+                display: "flex",
-              justifyContent: "center",
+                alignItems: "center",
-              width: 40,
+                justifyContent: "center",
-              height: 40,
+                width: 40,
-              borderRadius: 2,
+                height: 40,
-              bgcolor: iconBg,
+                borderRadius: 2,
-              color: iconColor,
+                flexShrink: 0,
-              flexShrink: 0,
+              },
-            }}
+              iconBadgeSx(color),
+            ]}
           >
             {icon}
           </Box>

src/admin/ui/index.ts

@@ -18,7 +18,7 @@ export { default as Pagination } from "./Pagination";
 export { default as DateField } from "./DateField";
 export { default as MonthField } from "./MonthField";
 export { default as TimeField } from "./TimeField";
-export { default as PageHeader } from "./PageHeader";
+export { default as PageHeader, headerActionsSx } from "./PageHeader";
 export { default as EmptyState } from "./EmptyState";
 export { default as LoadingState } from "./LoadingState";
 export { default as FilterBar } from "./FilterBar";

src/routes/admin/dashboard.ts

@@ -4,6 +4,7 @@ import { requireAuth } from "../../middleware/auth";
 import { success } from "../../utils/response";
 import { localTimeStr } from "../../utils/date";
 import { toCzk } from "../../services/exchange-rates";
+import { resolveCell } from "../../services/plan.service";
 
 export default async function dashboardRoutes(
   fastify: FastifyInstance,
@@ -42,6 +43,29 @@ export default async function dashboardRoutes(
       result.my_shift = { has_ongoing: myShift !== null };
     }
 
+    // Today's work plan (personal) — powers the "Vaše dnešní zařazení" card.
+    // resolveCell applies override-beats-range precedence; null = the user has
+    // plan access but nothing is scheduled today. The category key is enriched
+    // with its label + colour so the widget needs no extra query. todayStr uses
+    // local (Europe/Prague) calendar date — the plan's @db.Date day.
+    if (has("attendance.record") || has("attendance.manage")) {
+      const todayStr = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}-${String(now.getDate()).padStart(2, "0")}`;
+      const cell = await resolveCell(userId, todayStr);
+      if (cell) {
+        const cat = await prisma.plan_categories.findUnique({
+          where: { key: cell.category },
+          select: { label: true, color: true },
+        });
+        result.today_plan = {
+          ...cell,
+          category_label: cat?.label ?? cell.category,
+          category_color: cat?.color ?? null,
+        };
+      } else {
+        result.today_plan = null;
+      }
+    }
+
     // Attendance admin — only for attendance.manage
     if (has("attendance.manage")) {
       const [todayAttendance, onLeaveToday, usersCount] = await Promise.all([