feat: Implement flexible date input

src/components/ui/flexible-date-display.tsx

@@ -0,0 +1,43 @@
+import { format } from 'date-fns';
+import type { DatePrecision } from './flexible-date-input';
+
+interface FlexibleDateDisplayProps {
+  date?: string | Date | null;
+  precision?: DatePrecision;
+  fallback?: string;
+  className?: string;
+}
+
+export function FlexibleDateDisplay({ 
+  date, 
+  precision = 'day', 
+  fallback = 'Unknown',
+  className 
+}: FlexibleDateDisplayProps) {
+  if (!date) {
+    return <span className={className || "text-muted-foreground"}>{fallback}</span>;
+  }
+  
+  const dateObj = typeof date === 'string' ? new Date(date) : date;
+  
+  // Check for invalid date
+  if (isNaN(dateObj.getTime())) {
+    return <span className={className || "text-muted-foreground"}>{fallback}</span>;
+  }
+  
+  let formatted: string;
+  switch (precision) {
+    case 'year':
+      formatted = format(dateObj, 'yyyy');
+      break;
+    case 'month':
+      formatted = format(dateObj, 'MMMM yyyy');
+      break;
+    case 'day':
+    default:
+      formatted = format(dateObj, 'PPP');
+      break;
+  }
+  
+  return <span className={className}>{formatted}</span>;
+}