Fix color name detection with fuzzy matching, fix checkout syntax errors, add error handling for products page

src/app/admin/products/page.tsx

@@ -12,8 +12,15 @@ export default async function AdminProductsPage({
   searchParams: { error?: string };
 }) {
   const activePromotions = await fetchActivePromotions();
-  const rows = await prisma.product.findMany({ orderBy: { createdAt: 'desc' } });
+  let products = [];
-  const products = rows.map((p) => toProductDTO(p, activePromotions));
+  try {
+    const rows = await prisma.product.findMany();
+    products = rows.map((p) => toProductDTO(p, activePromotions)).sort((a, b) =>
+      new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
+    );
+  } catch (err) {
+    console.error('Error fetching products:', err);
+  }
 
   return (
     <div className="mx-auto max-w-4xl px-6 py-12">

src/lib/colorNames.ts

@@ -95,13 +95,31 @@ const COLOR_NAMES: Record<string, string> = {
   '#f5f5f5': 'Smoke',
 };
 
+function hexDistance(a: string, b: string): number {
+  const [ar, ag, ab] = [1, 3, 5].map((i) => parseInt(a.slice(i, i + 2), 16));
+  const [br, bg, bb] = [1, 3, 5].map((i) => parseInt(b.slice(i, i + 2), 16));
+  return Math.sqrt((ar - br) ** 2 + (ag - bg) ** 2 + (ab - bb) ** 2);
+}
+
 /**
  * Get the friendly name for a hex color
- * Falls back to "Custom" if hex code is not in the standard palette
+ * Matches exactly if available, otherwise finds the nearest color in the palette
  */
 export function getColorName(hex: string): string {
   const normalized = hex.toLowerCase();
-  return COLOR_NAMES[normalized] || 'Custom';
+  if (COLOR_NAMES[normalized]) return COLOR_NAMES[normalized];
+
+  // Find nearest color by distance (tolerance for lighting/JPEG compression variations)
+  let nearest: string | null = null;
+  let minDistance = Infinity;
+  for (const [colorHex, colorName] of Object.entries(COLOR_NAMES)) {
+    const dist = hexDistance(normalized, colorHex);
+    if (dist < minDistance && dist < 40) {
+      minDistance = dist;
+      nearest = colorName;
+    }
+  }
+  return nearest || 'Custom';
 }
 
 /**