fix: annotations list show hourly granularity

Author: izadoesdev

apps/dashboard/components/charts/annotations-panel.tsx

@@ -37,13 +37,15 @@ interface AnnotationsPanelProps {
 	onEdit: (annotation: Annotation) => void;
 	onDelete: (id: string) => Promise<void>;
 	isDeleting?: boolean;
+	granularity?: 'hourly' | 'daily' | 'weekly' | 'monthly';
 }
 
 export function AnnotationsPanel({
 	annotations,
 	onEdit,
 	onDelete,
 	isDeleting = false,
+	granularity = 'daily',
 }: AnnotationsPanelProps) {
 	const [deleteId, setDeleteId] = useState<string | null>(null);
 	const [isOpen, setIsOpen] = useState(false);
@@ -115,7 +117,11 @@ export function AnnotationsPanel({
 													style={{ backgroundColor: annotation.color }}
 												/>
 												<span className="text-xs text-sidebar-foreground/70">
-													{formatAnnotationDateRange(annotation.xValue, annotation.xEndValue)}
+													{formatAnnotationDateRange(
+														annotation.xValue,
+														annotation.xEndValue,
+														granularity
+													)}
 												</span>
 												{annotation.annotationType === 'range' &&
 													annotation.xEndValue &&

apps/dashboard/components/charts/metrics-chart.tsx

@@ -322,6 +322,7 @@ export function MetricsChart({
 						annotations={annotations}
 						onEdit={onEditAnnotation || (() => {})}
 						onDelete={onDeleteAnnotation || (async () => {})}
+						granularity={granularity}
 					/>
 				</div>
 			)}

apps/dashboard/lib/annotation-utils.ts

@@ -5,29 +5,44 @@ type Granularity = 'hourly' | 'daily' | 'weekly' | 'monthly';
 
 /**
  * Formats a date to a readable string
+	 * Shows time if the date is within a 24-hour period or spans less than a day
  */
-export function formatAnnotationDate(date: Date | string): string {
-	return new Date(date).toLocaleDateString('en-US', {
-		month: 'short',
-		day: 'numeric',
-		year: 'numeric',
-	});
+export function formatAnnotationDate(date: Date | string, showTime = false): string {
+	const dateObj = dayjs(date);
+	if (showTime) {
+		return dateObj.format('MMM D, h:mm A');
+	}
+	return dateObj.format('MMM D, YYYY');
 }
 
 /**
  * Formats a date range for annotations
+ * Automatically detects if hourly format is needed based on granularity or date range
  */
 export function formatAnnotationDateRange(
 	start: Date | string,
-	end: Date | string | null
+	end: Date | string | null,
+	granularity: Granularity = 'daily'
 ): string {
-	const startDate = new Date(start);
-	const endDate = end ? new Date(end) : null;
+	const startDate = dayjs(start);
+	const endDate = end ? dayjs(end) : null;
+	
+	// If hourly granularity, always show time
+	const isHourly = granularity === 'hourly';
 
-	if (!endDate || startDate.getTime() === endDate.getTime()) {
-		return formatAnnotationDate(startDate);
+	if (!endDate || startDate.isSame(endDate)) {
+		// For single date, show time if hourly or if time is not midnight
+		const showTime = isHourly || !startDate.isSame(startDate.startOf('day'));
+		return formatAnnotationDate(start, showTime);
 	}
-	return `${formatAnnotationDate(startDate)} - ${formatAnnotationDate(endDate)}`;
+	
+	// Check if the range spans less than 24 hours or if times differ on same day
+	const isHourlyRange = startDate.isSame(endDate, 'day') || endDate.diff(startDate, 'hour') < 24;
+	
+	// If hourly granularity or range is within same day, show time
+	const showTime = isHourly || isHourlyRange || startDate.isSame(endDate, 'day');
+	
+	return `${formatAnnotationDate(start, showTime)} - ${formatAnnotationDate(end as Date | string, showTime)}`;
 }
 
 /**