feat(projects): status filter tabs + per-status row tints on the list

Mirrors the offers page: centered status tabs (Vsechny/Aktivni/
Dokonceny/Zruseny) filtering server-side (?status= already supported),
filtered-vs-empty empty states, and row tints - dokonceny rows get the
info-channel low-alpha wash matching the badge, zruseny rows are faded
like invalidated offers.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

src/admin/pages/Projects.tsx

@@ -34,6 +34,8 @@ import {
   CheckboxField,
   LoadingState,
   PageEnter,
+  Tabs,
+  type TabDef,
   type DataColumn,
 } from "../ui";
 
@@ -54,6 +56,12 @@ const STATUS_COLORS: Record<
   zruseny: "default",
 };
 
+// Status filter tabs (mirrors the offers page): "" = all.
+const STATUS_TABS: TabDef[] = [
+  { value: "", label: "Všechny" },
+  ...Object.entries(STATUS_LABELS).map(([value, label]) => ({ value, label })),
+];
+
 interface Project {
   id: number;
   project_number: string;
@@ -120,6 +128,7 @@ export default function Projects() {
   const [search, setSearch] = useState("");
   const debouncedSearch = useDebounce(search, 300);
   const [page, setPage] = useState(1);
+  const [statusFilter, setStatusFilter] = useState("");
   const [deleteTarget, setDeleteTarget] = useState<Project | null>(null);
   const [deleteFiles, setDeleteFiles] = useState(false);
 
@@ -230,7 +239,13 @@ export default function Projects() {
     isPending,
     isFetching,
   } = usePaginatedQuery<Project>(
-    projectListOptions({ search: debouncedSearch, sort, order, page }),
+    projectListOptions({
+      search: debouncedSearch,
+      sort,
+      order,
+      page,
+      status: statusFilter || undefined,
+    }),
   );
 
   if (!hasPermission("projects.view")) return <Forbidden />;
@@ -372,6 +387,31 @@ export default function Projects() {
     },
   ];
 
+  // Per-status row tints (mirrors the offers list): LOW-ALPHA washes via the
+  // palette channel vars in the badge's color — never solid `.light` fills
+  // (invisible white text in dark mode). Cancelled rows are faded/muted like
+  // invalidated offers.
+  const rowSx = (p: Project) => {
+    if (p.status === "dokonceny") {
+      return {
+        backgroundColor: "rgba(var(--mui-palette-info-mainChannel) / 0.12)",
+        "&:hover": {
+          backgroundColor: "rgba(var(--mui-palette-info-mainChannel) / 0.18)",
+        },
+      };
+    }
+    if (p.status === "zruseny") {
+      return {
+        opacity: 0.6,
+        "& td": { color: "var(--mui-palette-text-secondary)" },
+      };
+    }
+    return {};
+  };
+
+  // Search/status filter active → empty means "nothing matches" (no CTA).
+  const isFiltered = !!debouncedSearch || !!statusFilter;
+
   return (
     <PageEnter>
       <Box
@@ -392,6 +432,17 @@ export default function Projects() {
         )}
       </Box>
 
+      <Box sx={{ display: "flex", justifyContent: "center", mb: 2.5 }}>
+        <Tabs
+          value={statusFilter}
+          onChange={(v) => {
+            setStatusFilter(v);
+            setPage(1);
+          }}
+          tabs={STATUS_TABS}
+        />
+      </Box>
+
       <FilterBar>
         <Box sx={{ flex: "1 1 320px" }}>
           <TextField
@@ -411,19 +462,31 @@ export default function Projects() {
           columns={columns}
           rows={projects}
           rowKey={(p) => p.id}
+          rowSx={rowSx}
           sortBy={sort}
           sortDir={order}
           onSort={handleSort}
           empty={
-            <Box sx={{ textAlign: "center", py: 6 }}>
-              <Typography color="text.secondary" gutterBottom>
-                Zatím nejsou žádné projekty.
-              </Typography>
-              <Typography variant="body2" color="text.secondary">
-                Projekty vznikají z objednávek nebo je můžete vytvořit ručně
-                tlačítkem „Přidat projekt".
-              </Typography>
-            </Box>
+            isFiltered ? (
+              <Box sx={{ textAlign: "center", py: 6 }}>
+                <Typography color="text.secondary" gutterBottom>
+                  Žádné projekty neodpovídají filtru.
+                </Typography>
+                <Typography variant="body2" color="text.secondary">
+                  Zkuste změnit filtr nebo hledaný výraz.
+                </Typography>
+              </Box>
+            ) : (
+              <Box sx={{ textAlign: "center", py: 6 }}>
+                <Typography color="text.secondary" gutterBottom>
+                  Zatím nejsou žádné projekty.
+                </Typography>
+                <Typography variant="body2" color="text.secondary">
+                  Projekty vznikají z objednávek nebo je můžete vytvořit ručně
+                  tlačítkem „Přidat projekt".
+                </Typography>
+              </Box>
+            )
           }
         />
         <Pagination