feat(ui/admin): overhaul clientele tracking, implement responsive catalog sizing

- Refactored /admin/users/page.tsx to isolate strictly paid customers, mapping guest checkout metrics seamlessly while filtering pending carts. Implemented split mobile-card grid.
- Refactored images globally to use object-contain and object-center (rather than object-cover) to preserve absolute bounding box precision on random-sized media uploads without clipping.

Author: lead-matrix

app/admin/media/MediaLibraryClient.tsx

@@ -483,7 +483,7 @@ export default function MediaLibraryClient({ initialFiles, bucketBase, contentBl
                                             src={file.url}
                                             alt={file.name}
                                             fill
-                                            className="object-cover transition-transform duration-300 group-hover:scale-105"
+                                            className="object-contain object-center transition-transform duration-300 group-hover:scale-105"
                                             sizes="(max-width: 640px) 50vw, (max-width: 1024px) 25vw, 16vw"
                                             unoptimized
                                         />
@@ -562,7 +562,7 @@ export default function MediaLibraryClient({ initialFiles, bucketBase, contentBl
                                             <td className="p-4">
                                                 <div className="flex items-center gap-3">
                                                     <div className="w-10 h-10 rounded overflow-hidden bg-[#121214] flex-shrink-0">
-                                                        <Image src={file.url} alt={file.name} width={40} height={40} className="object-cover w-full h-full" unoptimized />
+                                                        <Image src={file.url} alt={file.name} width={40} height={40} className="object-contain object-center w-full h-full" unoptimized />
                                                     </div>
                                                     <div>
                                                         <p className="text-xs text-white font-medium truncate max-w-[200px]">{file.name}</p>

app/admin/orders/OrderList.tsx

@@ -122,7 +122,7 @@ function OrderDetailModal({ order, onClose, onStatusUpdate, onFulfill }: {
                                                     <img
                                                         src={item.product_variants.products.images[0]}
                                                         alt={productName}
-                                                        className="w-full h-full object-cover"
+                                                        className="w-full h-full object-contain object-center"
                                                     />
                                                 ) : (
                                                     <div className="w-full h-full flex items-center justify-center text-white/10">

app/admin/products/page.tsx

@@ -125,7 +125,7 @@ export default async function AdminProductsPage() {
                         <div className="flex items-start gap-4">
                             <div className="w-16 h-16 bg-black/40 border border-white/10 rounded overflow-hidden shadow-soft flex-shrink-0">
                                 {product.images?.[0] ? (
-                                    <img src={product.images[0]} alt={product.title} className="w-full h-full object-cover opacity-80" />
+                                    <img src={product.images[0]} alt={product.title} className="w-full h-full object-contain object-center opacity-80" />
                                 ) : (
                                     <div className="w-full h-full flex items-center justify-center text-white/10 bg-[#0B0B0D]/5">
                                         <Package size={20} />
@@ -213,7 +213,7 @@ export default async function AdminProductsPage() {
                                         <div className="flex items-center gap-4">
                                             <div className="w-12 h-12 bg-black/40 border border-white/10 rounded overflow-hidden shadow-soft flex-shrink-0 group-hover:border-gold/30 transition-colors">
                                                 {product.images?.[0] ? (
-                                                    <img src={product.images[0]} alt={product.title} className="w-full h-full object-cover opacity-80 group-hover:opacity-100 transition-opacity" />
+                                                    <img src={product.images[0]} alt={product.title} className="w-full h-full object-contain object-center opacity-80 group-hover:opacity-100 transition-opacity" />
                                                 ) : (
                                                     <div className="w-full h-full flex items-center justify-center text-white/10 bg-[#0B0B0D]/5">
                                                         <Package size={16} />