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/ProgressBar.tsx

@@ -0,0 +1,56 @@
+interface ProgressBarProps {
+  value: number;
+  max?: number;
+  showLabel?: boolean;
+  size?: "sm" | "md" | "lg";
+  className?: string;
+}
+
+const sizeStyles = {
+  sm: "h-1.5",
+  md: "h-2",
+  lg: "h-8",
+};
+
+export function ProgressBar({ 
+  value, 
+  max = 100, 
+  showLabel = false, 
+  size = "md",
+  className = "" 
+}: ProgressBarProps) {
+  const percent = Math.min(100, Math.max(0, (value / max) * 100));
+  
+  return (
+    <div className={`relative ${sizeStyles[size]} bg-line rounded-full overflow-hidden ${className}`}>
+      <div 
+        className="absolute inset-y-0 left-0 bg-success rounded-full transition-all duration-300"
+        style={{ width: `${percent}%` }}
+      />
+      {showLabel && (
+        <span className="absolute inset-0 flex items-center justify-center text-sm font-semibold text-foreground">
+          {Math.round(percent)}%
+        </span>
+      )}
+    </div>
+  );
+}
+
+interface MiniProgressBarProps {
+  value: number;
+  max?: number;
+  className?: string;
+}
+
+export function MiniProgressBar({ value, max = 100, className = "" }: MiniProgressBarProps) {
+  const percent = Math.min(100, Math.max(0, (value / max) * 100));
+  
+  return (
+    <div className={`flex-1 h-1.5 bg-line rounded-full overflow-hidden ${className}`}>
+      <div 
+        className="h-full bg-success rounded-full transition-all duration-300"
+        style={{ width: `${percent}%` }}
+      />
+    </div>
+  );
+}