feat(ui): Components refactoring with Tailwind - UI kit, icons, lazy loading images

- Created reusable UI components (Card, Button, Badge, Form, Icon)
- Added PageIcon and NavIcon components with consistent styling
- Refactored all pages to use new UI components
- Added non-blocking image loading with skeleton for book covers
- Created LibraryActions dropdown for library settings
- Added emojis to buttons for better UX
- Fixed Client Component issues with getBookCoverUrl

apps/backoffice/app/components/ui/StatBox.tsx

@@ -0,0 +1,33 @@
+import { ReactNode } from "react";
+
+interface StatBoxProps {
+  value: ReactNode;
+  label: string;
+  variant?: "default" | "primary" | "success" | "warning" | "error";
+  className?: string;
+}
+
+const variantStyles: Record<string, string> = {
+  default: "bg-muted/5",
+  primary: "bg-primary-soft",
+  success: "bg-success-soft",
+  warning: "bg-warning-soft",
+  error: "bg-error-soft",
+};
+
+const valueVariantStyles: Record<string, string> = {
+  default: "text-foreground",
+  primary: "text-primary",
+  success: "text-success",
+  warning: "text-warning",
+  error: "text-error",
+};
+
+export function StatBox({ value, label, variant = "default", className = "" }: StatBoxProps) {
+  return (
+    <div className={`text-center p-4 rounded-lg ${variantStyles[variant]} ${className}`}>
+      <span className={`block text-3xl font-bold ${valueVariantStyles[variant]}`}>{value}</span>
+      <span className={`text-xs ${valueVariantStyles[variant]}/80`}>{label}</span>
+    </div>
+  );
+}