v1.5.6: boneyard-js skeleton migration, TanStack Query refactor, rate-limit config

- Replace hand-coded skeleton CSS/JSX with boneyard-js auto-generated bones
- Remove skeleton.css and @keyframes shimmer from base.css
- Add <Skeleton> wrappers with fixtures to all 25+ page components
- Generate 20 bone captures via boneyard CLI (CDP auth-gated capture)
- Refactor data fetching from useEffect+useState to TanStack Query
- Extract query hooks into src/admin/lib/queries/ and apiAdapter
- Add usePaginatedQuery hook replacing useApiCall/useListData
- Fix parseFloat || 0 anti-pattern in OfferDetail and OffersTemplates inputs
- Fix customer_id mandatory validation on offer creation
- Fix leave-requests comma-separated status filter (Prisma enum in: [])
- Add cross-entity cache invalidation for orders/offers/invoices/projects
- Make rate limits configurable via env vars (RATE_LIMIT_MAX, RATE_LIMIT_REFRESH, etc.)
- Add boneyard.config.json with routes and breakpoints

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

src/admin/components/ProjectFileManager.tsx

@@ -1,7 +1,11 @@
-import { useState, useEffect, useRef, useCallback } from "react";
+import { useState, useRef } from "react";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { projectFilesOptions } from "../lib/queries/projects";
 import { useAlert } from "../context/AlertContext";
 import ConfirmModal from "./ConfirmModal";
 import apiFetch from "../utils/api";
+import { Skeleton } from "boneyard-js/react";
+import ProjectFileManagerFixture from "../fixtures/ProjectFileManagerFixture";
 
 const API_BASE = "/api/admin";
 
@@ -196,14 +200,11 @@ export default function ProjectFileManager({
   hasNasFolder,
 }: ProjectFileManagerProps) {
   const alert = useAlert();
+  const queryClient = useQueryClient();
   const fileInputRef = useRef<HTMLInputElement>(null);
   const isCancelling = useRef(false);
 
-  const [items, setItems] = useState<FileItem[]>([]);
-  const [loading, setLoading] = useState(true);
   const [currentPath, setCurrentPath] = useState("");
-  const [breadcrumb, setBreadcrumb] = useState<string[]>([""]);
-  const [fullPath, setFullPath] = useState("");
 
   const [dragOver, setDragOver] = useState(false);
   const [uploading, setUploading] = useState(false);
@@ -217,59 +218,25 @@ export default function ProjectFileManager({
 
   const [deleteTarget, setDeleteTarget] = useState<FileItem | null>(null);
   const [deleting, setDeleting] = useState(false);
-  const [errorMessage, setErrorMessage] = useState<string | null>(null);
 
   const canManage = hasPermission("projects.files");
 
-  const fetchFiles = useCallback(
-    async (path = "", options: { ignore?: boolean } = {}) => {
-      setLoading(true);
-      setErrorMessage(null);
-      try {
-        const params = new URLSearchParams({ project_id: String(projectId) });
-        if (path) {
-          params.set("path", path);
-        }
-        const res = await apiFetch(`${API_BASE}/project-files?${params}`);
-        if (options.ignore) return;
-        if (res.status === 401) return;
-        const data = await res.json();
-        if (data.success) {
-          setItems(data.data.items || []);
-          setBreadcrumb(data.data.breadcrumb || [""]);
-          setCurrentPath(data.data.path || "");
-          setFullPath(data.data.full_path || "");
-        } else if (res.status === 404) {
-          setItems([]);
-          setBreadcrumb([""]);
-        } else {
-          setErrorMessage(data.error || "Nepodařilo se načíst soubory");
-        }
-      } catch {
-        if (!options.ignore) {
-          setErrorMessage("Chyba připojení");
-        }
-      } finally {
-        if (!options.ignore) {
-          setLoading(false);
-        }
-      }
-    },
-    [projectId],
-  );
-
-  useEffect(() => {
-    const opts = { ignore: false };
-    fetchFiles("", opts);
-    return () => {
-      opts.ignore = true;
-    };
-  }, [fetchFiles]);
+  const {
+    data: filesData,
+    isPending: filesLoading,
+    error: filesError,
+  } = useQuery(projectFilesOptions(projectId, currentPath));
+  const items = filesData?.items ?? [];
+  const breadcrumb = filesData?.breadcrumb ?? [""];
+  const fullPath = filesData?.full_path ?? "";
+  const errorMessage = filesError
+    ? filesError.message || "Nepodařilo se načíst soubory"
+    : null;
 
   const navigateTo = (path: string) => {
     setNewFolderMode(false);
     setRenamingItem(null);
-    fetchFiles(path);
+    setCurrentPath(path);
   };
 
   const handleBreadcrumbClick = (index: number) => {
@@ -332,7 +299,9 @@ export default function ProjectFileManager({
           ? "Soubor byl nahrán"
           : `Nahráno ${successCount} souborů`;
       alert.success(msg);
-      fetchFiles(currentPath);
+      queryClient.invalidateQueries({
+        queryKey: ["projects", String(projectId), "files"],
+      });
     }
     if (errorMsg) {
       alert.error(errorMsg);
@@ -383,7 +352,9 @@ export default function ProjectFileManager({
         alert.success("Složka byla vytvořena");
         setNewFolderMode(false);
         setNewFolderName("");
-        fetchFiles(currentPath);
+        queryClient.invalidateQueries({
+          queryKey: ["projects", String(projectId), "files"],
+        });
       } else {
         alert.error(data.error || "Nepodařilo se vytvořit složku");
       }
@@ -444,7 +415,9 @@ export default function ProjectFileManager({
             ? "Složka byla smazána"
             : "Soubor byl smazán",
         );
-        fetchFiles(currentPath);
+        queryClient.invalidateQueries({
+          queryKey: ["projects", String(projectId), "files"],
+        });
       } else {
         alert.error(data.error || "Nepodařilo se smazat");
       }
@@ -479,7 +452,9 @@ export default function ProjectFileManager({
       const data = await res.json();
       if (data.success) {
         alert.success("Přejmenováno");
-        fetchFiles(currentPath);
+        queryClient.invalidateQueries({
+          queryKey: ["projects", String(projectId), "files"],
+        });
       } else {
         alert.error(data.error || "Nepodařilo se přejmenovat");
       }
@@ -495,32 +470,15 @@ export default function ProjectFileManager({
     setRenameValue(item.name);
   };
 
-  if (loading && items.length === 0 && !errorMessage) {
+  if (filesLoading && items.length === 0 && !errorMessage) {
     return (
-      <div className="admin-card">
-        <div className="admin-card-body">
-          <h3 className="admin-card-title">Soubory</h3>
-          <div className="admin-skeleton" style={{ padding: 0, gap: "0.5rem" }}>
-            {[0, 1, 2, 3].map((i) => (
-              <div key={i} className="admin-skeleton-row">
-                <div
-                  className="admin-skeleton-line"
-                  style={{
-                    width: "18px",
-                    height: "18px",
-                    borderRadius: "4px",
-                    flexShrink: 0,
-                  }}
-                />
-                <div
-                  className="admin-skeleton-line"
-                  style={{ width: `${60 + i * 10}%` }}
-                />
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
+      <Skeleton
+        name="project-file-manager"
+        loading={filesLoading && items.length === 0}
+        fixture={<ProjectFileManagerFixture />}
+      >
+        <div />
+      </Skeleton>
     );
   }
 
@@ -710,7 +668,7 @@ export default function ProjectFileManager({
             </div>
           )}
 
-          {items.length === 0 && !loading ? (
+          {items.length === 0 && !filesLoading ? (
             <div className="fm-empty">
               <svg
                 width="32"

src/admin/components/dashboard/DashSessions.tsx

@@ -1,27 +1,17 @@
-import { useState, useEffect, useCallback } from "react";
+import { useState } from "react";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { motion } from "framer-motion";
 import { useAlert } from "../../context/AlertContext";
 import ConfirmModal from "../ConfirmModal";
 import useModalLock from "../../hooks/useModalLock";
 import apiFetch from "../../utils/api";
 import { formatSessionDate } from "../../utils/dashboardHelpers";
+import { sessionsOptions, type Session } from "../../lib/queries/dashboard";
+import { Skeleton } from "boneyard-js/react";
+import DashSessionsFixture from "../../fixtures/DashSessionsFixture";
 
 const API_BASE = "/api/admin";
 
-interface DeviceInfo {
-  icon?: string;
-  browser?: string;
-  os?: string;
-}
-
-interface Session {
-  id: number | string;
-  is_current: boolean;
-  device_info?: DeviceInfo;
-  ip_address: string;
-  created_at: string;
-}
-
 interface DeleteModalState {
   isOpen: boolean;
   session: Session | null;
@@ -77,9 +67,10 @@ function getDeviceIcon(iconType?: string) {
 
 export default function DashSessions() {
   const alert = useAlert();
+  const queryClient = useQueryClient();
 
-  const [sessions, setSessions] = useState<Session[]>([]);
-  const [sessionsLoading, setSessionsLoading] = useState(true);
+  const { data: sessions = [], isPending: sessionsLoading } =
+    useQuery(sessionsOptions());
   const [deleteModal, setDeleteModal] = useState<DeleteModalState>({
     isOpen: false,
     session: null,
@@ -89,26 +80,6 @@ export default function DashSessions() {
 
   useModalLock(deleteAllModal);
 
-  const fetchSessions = useCallback(async () => {
-    try {
-      const response = await apiFetch(`${API_BASE}/sessions`);
-      const data = await response.json();
-      if (data.success) {
-        setSessions(
-          Array.isArray(data.data) ? data.data : data.data?.sessions || [],
-        );
-      }
-    } catch {
-      // session fetch failed silently
-    } finally {
-      setSessionsLoading(false);
-    }
-  }, []);
-
-  useEffect(() => {
-    fetchSessions();
-  }, [fetchSessions]);
-
   const handleDeleteSession = async () => {
     if (!deleteModal.session) {
       return;
@@ -122,7 +93,7 @@ export default function DashSessions() {
       const data = await response.json();
       if (data.success) {
         setDeleteModal({ isOpen: false, session: null });
-        setSessions((prev) => prev.filter((s) => s.id !== sessionId));
+        queryClient.invalidateQueries({ queryKey: ["sessions"] });
         alert.success("Relace byla ukončena");
       } else {
         alert.error(data.error || "Nepodařilo se ukončit relaci");
@@ -143,7 +114,7 @@ export default function DashSessions() {
       const data = await response.json();
       if (data.success) {
         setDeleteAllModal(false);
-        setSessions((prev) => prev.filter((s) => s.is_current));
+        queryClient.invalidateQueries({ queryKey: ["sessions"] });
         alert.success(data.message || "Ostatní relace byly ukončeny");
       } else {
         alert.error(data.error || "Nepodařilo se ukončit relace");
@@ -183,98 +154,84 @@ export default function DashSessions() {
           )}
         </div>
         <div className="admin-card-body" style={{ padding: 0 }}>
-          {sessionsLoading && (
-            <div
-              className="admin-skeleton"
-              style={{ padding: "1rem", gap: "1rem" }}
-            >
-              {[0, 1, 2].map((i) => (
-                <div key={i} className="admin-skeleton-row">
-                  <div className="admin-skeleton-line circle" />
-                  <div className="flex-1">
-                    <div
-                      className="admin-skeleton-line w-1/2"
-                      style={{ marginBottom: "0.5rem" }}
-                    />
-                    <div
-                      className="admin-skeleton-line w-1/3"
-                      style={{ height: "10px" }}
-                    />
-                  </div>
-                </div>
-              ))}
-            </div>
-          )}
-          {!sessionsLoading && sessions.length === 0 && (
-            <div
-              className="text-secondary"
-              style={{
-                padding: "1.5rem",
-                textAlign: "center",
-                fontSize: "0.875rem",
-              }}
-            >
-              Žádné aktivní relace
-            </div>
-          )}
-          {!sessionsLoading && sessions.length > 0 && (
-            <div className="dash-sessions-list">
-              {sessions.map((session) => (
+          <Skeleton
+            name="dash-sessions"
+            loading={sessionsLoading}
+            fixture={<DashSessionsFixture />}
+          >
+            <>
+              {sessions.length === 0 && (
                 <div
-                  key={session.id}
-                  className={`dash-session-item ${session.is_current ? "dash-session-item-current" : ""}`}
+                  className="text-secondary"
+                  style={{
+                    padding: "1.5rem",
+                    textAlign: "center",
+                    fontSize: "0.875rem",
+                  }}
                 >
-                  <div className="dash-session-icon">
-                    {getDeviceIcon(session.device_info?.icon)}
-                  </div>
-                  <div className="dash-session-info">
-                    <div className="dash-session-device">
-                      {session.device_info?.browser} na{" "}
-                      {session.device_info?.os}
-                      {session.is_current && (
-                        <span
-                          className="admin-badge admin-badge-success"
-                          style={{ marginLeft: "0.5rem" }}
-                        >
-                          Aktuální
-                        </span>
-                      )}
-                    </div>
-                    <div className="dash-session-meta">
-                      <span>{session.ip_address}</span>
-                      <span className="dash-session-meta-separator">|</span>
-                      <span>{formatSessionDate(session.created_at)}</span>
-                    </div>
-                  </div>
-                  <div className="dash-session-actions">
-                    {!session.is_current && (
-                      <button
-                        onClick={() =>
-                          setDeleteModal({ isOpen: true, session })
-                        }
-                        className="admin-btn-icon danger"
-                        title="Ukončit relaci"
-                        aria-label="Ukončit relaci"
-                      >
-                        <svg
-                          width="16"
-                          height="16"
-                          viewBox="0 0 24 24"
-                          fill="none"
-                          stroke="currentColor"
-                          strokeWidth="2"
-                        >
-                          <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
-                          <polyline points="16 17 21 12 16 7" />
-                          <line x1="21" y1="12" x2="9" y2="12" />
-                        </svg>
-                      </button>
-                    )}
-                  </div>
+                  Žádné aktivní relace
                 </div>
-              ))}
-            </div>
-          )}
+              )}
+              {sessions.length > 0 && (
+                <div className="dash-sessions-list">
+                  {sessions.map((session) => (
+                    <div
+                      key={session.id}
+                      className={`dash-session-item ${session.is_current ? "dash-session-item-current" : ""}`}
+                    >
+                      <div className="dash-session-icon">
+                        {getDeviceIcon(session.device_info?.icon)}
+                      </div>
+                      <div className="dash-session-info">
+                        <div className="dash-session-device">
+                          {session.device_info?.browser} na{" "}
+                          {session.device_info?.os}
+                          {session.is_current && (
+                            <span
+                              className="admin-badge admin-badge-success"
+                              style={{ marginLeft: "0.5rem" }}
+                            >
+                              Aktuální
+                            </span>
+                          )}
+                        </div>
+                        <div className="dash-session-meta">
+                          <span>{session.ip_address}</span>
+                          <span className="dash-session-meta-separator">|</span>
+                          <span>{formatSessionDate(session.created_at)}</span>
+                        </div>
+                      </div>
+                      <div className="dash-session-actions">
+                        {!session.is_current && (
+                          <button
+                            onClick={() =>
+                              setDeleteModal({ isOpen: true, session })
+                            }
+                            className="admin-btn-icon danger"
+                            title="Ukončit relaci"
+                            aria-label="Ukončit relaci"
+                          >
+                            <svg
+                              width="16"
+                              height="16"
+                              viewBox="0 0 24 24"
+                              fill="none"
+                              stroke="currentColor"
+                              strokeWidth="2"
+                            >
+                              <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
+                              <polyline points="16 17 21 12 16 7" />
+                              <line x1="21" y1="12" x2="9" y2="12" />
+                            </svg>
+                          </button>
+                        )}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </>
+          </Skeleton>
         </div>
       </motion.div>