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/pages/Trips.tsx

@@ -1,4 +1,5 @@
-import { useState, useEffect, useCallback } from "react";
+import { useState } from "react";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useAlert } from "../context/AlertContext";
 import { useAuth } from "../context/AuthContext";
 import { Link } from "react-router-dom";
@@ -12,6 +13,9 @@ import Forbidden from "../components/Forbidden";
 import { formatDate } from "../utils/attendanceHelpers";
 import { formatKm } from "../utils/formatters";
 import apiFetch from "../utils/api";
+import { tripListOptions, tripVehiclesOptions } from "../lib/queries/trips";
+import { Skeleton } from "boneyard-js/react";
+import TripsFixture from "../fixtures/TripsFixture";
 const API_BASE = "/api/admin";
 
 interface Vehicle {
@@ -49,10 +53,20 @@ interface TripForm {
 export default function Trips() {
   const alert = useAlert();
   const { hasPermission } = useAuth();
-  const [loading, setLoading] = useState(true);
+  const queryClient = useQueryClient();
+
+  const { data: tripsData, isPending: tripsLoading } = useQuery(
+    tripListOptions({}),
+  );
+  const { data: vehiclesData } = useQuery(tripVehiclesOptions());
+
+  const trips = (tripsData ?? []) as Record<string, unknown>[] as Trip[];
+  const vehicles = (vehiclesData ?? []) as Record<
+    string,
+    unknown
+  >[] as Vehicle[];
+
   const [submitting, setSubmitting] = useState(false);
-  const [trips, setTrips] = useState<Trip[]>([]);
-  const [vehicles, setVehicles] = useState<Vehicle[]>([]);
   const [showModal, setShowModal] = useState(false);
   const [editingTrip, setEditingTrip] = useState<Trip | null>(null);
   const [deleteConfirm, setDeleteConfirm] = useState<{
@@ -72,37 +86,6 @@ export default function Trips() {
   const [errors, setErrors] = useState<Record<string, string>>({});
   const [, setLastKm] = useState(0);
 
-  const fetchData = useCallback(
-    async (showLoading = true) => {
-      if (showLoading) setLoading(true);
-      try {
-        const [tripsRes, vehiclesRes] = await Promise.all([
-          apiFetch(`${API_BASE}/trips`),
-          apiFetch(`${API_BASE}/vehicles`),
-        ]);
-        const tripsResult = await tripsRes.json();
-        const vehiclesResult = await vehiclesRes.json();
-        if (tripsResult.success) {
-          setTrips(Array.isArray(tripsResult.data) ? tripsResult.data : []);
-        }
-        if (vehiclesResult.success) {
-          setVehicles(
-            Array.isArray(vehiclesResult.data) ? vehiclesResult.data : [],
-          );
-        }
-      } catch {
-        alert.error("Nepodařilo se načíst data");
-      } finally {
-        if (showLoading) setLoading(false);
-      }
-    },
-    [alert],
-  );
-
-  useEffect(() => {
-    fetchData();
-  }, [fetchData]);
-
   useModalLock(showModal);
 
   if (!hasPermission("trips.record")) return <Forbidden />;
@@ -208,8 +191,7 @@ export default function Trips() {
 
       if (result.success) {
         setShowModal(false);
-        await fetchData(false);
-        await new Promise((resolve) => setTimeout(resolve, 300));
+        queryClient.invalidateQueries({ queryKey: ["trips"] });
         alert.success(result.message);
       } else {
         alert.error(result.error);
@@ -230,7 +212,7 @@ export default function Trips() {
       const result = await response.json();
 
       if (result.success) {
-        await fetchData(false);
+        queryClient.invalidateQueries({ queryKey: ["trips"] });
         alert.success(result.message);
       } else {
         alert.error(result.error);
@@ -248,65 +230,11 @@ export default function Trips() {
     return end > start ? end - start : 0;
   };
 
-  if (loading) {
+  if (tripsLoading) {
     return (
-      <div>
-        <div className="admin-skeleton" style={{ padding: 0, gap: "1.5rem" }}>
-          <div
-            className="admin-skeleton-row"
-            style={{ justifyContent: "space-between" }}
-          >
-            <div>
-              <div
-                className="admin-skeleton-line h-8"
-                style={{ width: "200px", marginBottom: "0.5rem" }}
-              />
-              <div className="admin-skeleton-line" style={{ width: "140px" }} />
-            </div>
-            <div
-              className="admin-skeleton-line h-10"
-              style={{ width: "140px", borderRadius: "8px" }}
-            />
-          </div>
-          <div className="admin-grid admin-grid-4">
-            {[0, 1, 2, 3].map((i) => (
-              <div key={i} className="admin-stat-card">
-                <div
-                  className="admin-skeleton-line"
-                  style={{
-                    width: "60%",
-                    height: "11px",
-                    marginBottom: "0.5rem",
-                  }}
-                />
-                <div
-                  className="admin-skeleton-line"
-                  style={{
-                    width: "40%",
-                    height: "28px",
-                    marginBottom: "0.5rem",
-                  }}
-                />
-                <div
-                  className="admin-skeleton-line"
-                  style={{ width: "50%", height: "12px" }}
-                />
-              </div>
-            ))}
-          </div>
-          <div className="admin-card">
-            <div className="admin-skeleton" style={{ gap: "1.25rem" }}>
-              {[0, 1, 2, 3, 4].map((i) => (
-                <div key={i} className="admin-skeleton-row">
-                  <div className="admin-skeleton-line w-1/4" />
-                  <div className="admin-skeleton-line w-1/3" />
-                  <div className="admin-skeleton-line w-1/4" />
-                </div>
-              ))}
-            </div>
-          </div>
-        </div>
-      </div>
+      <Skeleton name="trips" loading={tripsLoading} fixture={<TripsFixture />}>
+        <div />
+      </Skeleton>
     );
   }