small date fix

src/features/flyer/FlyerList.tsx

@@ -2,13 +2,16 @@
 import React from 'react';
 import type { Flyer } from '../../types';
 import { DocumentTextIcon } from '../../components/icons/DocumentTextIcon';
+import { parseISO, format } from 'date-fns';
 
 const formatShortDate = (dateString: string | null | undefined): string | null => {
     if (!dateString) return null;
-    // Dates from DB are YYYY-MM-DD, which can be interpreted as UTC midnight by new Date().
-    // Appending T00:00:00 ensures it's not shifted by local timezone.
+    // Using `parseISO` from date-fns is more reliable than `new Date()` for YYYY-MM-DD strings.
+    // It correctly interprets the string as a local date, avoiding timezone-related "off-by-one" errors.
     try {
-        return new Date(`${dateString}T00:00:00`).toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+        const date = parseISO(dateString);
+        // Format the date to "MMM d" (e.g., "Oct 5")
+        return format(date, 'MMM d');
     } catch {
         return null;
     }
@@ -36,21 +39,26 @@ export const FlyerList: React.FC<FlyerListProps> = ({ flyers, onFlyerSelect, sel
 
                         return (
                             <li
+                                data-testid={`flyer-list-item-${flyer.flyer_id}`}
                                 key={flyer.flyer_id}
                                 onClick={() => onFlyerSelect(flyer)}
-                                className={`p-4 flex items-center space-x-3 cursor-pointer transition-colors duration-200 ${selectedFlyerId === flyer.flyer_id ? 'bg-brand-light dark:bg-brand-dark/30' : 'hover:bg-gray-50 dark:hover:bg-gray-800'}`}
+                                className={`group p-4 flex items-center space-x-3 cursor-pointer transition-colors duration-200 ${selectedFlyerId === flyer.flyer_id ? 'bg-brand-light dark:bg-brand-dark/30' : 'hover:bg-gray-50 dark:hover:bg-gray-800'}`}
                             >
                                 <DocumentTextIcon className="w-6 h-6 text-brand-primary shrink-0" />
                                 <div className="grow min-w-0">
                                     <p className="text-sm font-semibold text-gray-900 dark:text-white truncate" title={flyer.store?.name || 'Unknown Store'}>
                                         {flyer.store?.name || 'Unknown Store'}
                                     </p>
-                                    <p className="text-sm text-gray-600 dark:text-gray-400 truncate" title={flyer.file_name}>
+                                    {/* The filename is now only visible on hover by default */}
+                                    <p className="text-sm text-gray-600 dark:text-gray-400 truncate opacity-0 group-hover:opacity-100 transition-opacity" title={flyer.file_name}>
                                         {flyer.file_name}
                                     </p>
                                     <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
-                                        {`Processed: ${new Date(flyer.created_at).toLocaleDateString()}`}
-                                        {dateRange && ` • Valid: ${dateRange}`}
+                                        {/* The "Processed" date is now only visible on hover */}
+                                        <span className="opacity-0 group-hover:opacity-100 transition-opacity">
+                                            {`Processed: ${format(parseISO(flyer.created_at), 'P')} • `}
+                                        </span>
+                                        {dateRange && `Valid: ${dateRange}`}
                                     </p>
                                 </div>
                             </li>