Fix date range filter default behavior and add tests

- Move date range initialization to DateRangeFilter component
- Add tests to verify 7-day default range behavior
- Remove hardcoded date range from App.tsx
- Ensure UI reflects actual date range state

src/App.tsx

@@ -10,22 +10,11 @@ import { fetchBotActivities } from './services/github';
 import './App.css';
 
 function App(): React.JSX.Element {
-  const [state, setState] = useState<AppState>(() => {
-    // Default to last 7 days
-    const end = new Date();
-    const start = new Date();
-    start.setDate(start.getDate() - 7);
-    return {
-      activities: [],
-      loading: true,
-      error: null,
-      filter: {
-        dateRange: {
-          start: start.toISOString(),
-          end: end.toISOString()
-        }
-      },
-    };
+  const [state, setState] = useState<AppState>({
+    activities: [],
+    loading: true,
+    error: null,
+    filter: {}
   });
 
   const loadActivities = useCallback(async (): Promise<void> => {

src/components/DateRangeFilter.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen, fireEvent, act } from '@testing-library/react';
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { DateRangeFilter } from './DateRangeFilter';
 import { DateRange } from '../types';
@@ -79,4 +79,57 @@ describe('DateRangeFilter', () => {
     fireEvent.change(endInput, { target: { value: '' } });
     expect(mockOnDateRangeChange).toHaveBeenLastCalledWith(undefined);
   });
+
+  it('initializes with default 7-day range when no dateRange is provided', () => {
+    vi.useFakeTimers();
+    const now = new Date('2024-01-15T12:00:00Z');
+    vi.setSystemTime(now);
+
+    const mockOnDateRangeChange = vi.fn();
+
+    act(() => {
+      render(
+        <DateRangeFilter
+          dateRange={undefined}
+          onDateRangeChange={mockOnDateRangeChange}
+        />
+      );
+    });
+
+    const startInput = screen.getByLabelText<HTMLInputElement>('From:');
+    const endInput = screen.getByLabelText<HTMLInputElement>('To:');
+
+    // Check that inputs show 7-day range
+    expect(startInput.value).toBe('2024-01-08');
+    expect(endInput.value).toBe('2024-01-15');
+
+    // Check that onDateRangeChange was called with default range
+    expect(mockOnDateRangeChange).toHaveBeenCalledWith({
+      start: '2024-01-08',
+      end: '2024-01-15'
+    });
+
+    vi.useRealTimers();
+  });
+
+  it('maintains provided dateRange over default range', () => {
+    const customDateRange = {
+      start: '2024-01-01',
+      end: '2024-01-31'
+    };
+
+    render(
+      <DateRangeFilter
+        dateRange={customDateRange}
+        onDateRangeChange={mockOnDateRangeChange}
+      />
+    );
+
+    const startInput = screen.getByLabelText<HTMLInputElement>('From:');
+    const endInput = screen.getByLabelText<HTMLInputElement>('To:');
+
+    expect(startInput.value).toBe('2024-01-01');
+    expect(endInput.value).toBe('2024-01-31');
+    expect(mockOnDateRangeChange).not.toHaveBeenCalled();
+  });
 });

src/components/DateRangeFilter.tsx

@@ -7,13 +7,31 @@ interface DateRangeFilterProps {
 }
 
 export function DateRangeFilter({ dateRange, onDateRangeChange }: DateRangeFilterProps): React.JSX.Element {
-  const [start, setStart] = useState(dateRange?.start ?? '');
-  const [end, setEnd] = useState(dateRange?.end ?? '');
+  const getDefaultDateRange = () => {
+    const end = new Date();
+    const start = new Date();
+    start.setDate(start.getDate() - 7);
+    return {
+      start: start.toISOString().split('T')[0],
+      end: end.toISOString().split('T')[0]
+    };
+  };
+
+  const defaultRange = getDefaultDateRange();
+  const [start, setStart] = useState(dateRange?.start ?? defaultRange.start);
+  const [end, setEnd] = useState(dateRange?.end ?? defaultRange.end);
 
   useEffect(() => {
-    setStart(dateRange?.start ?? '');
-    setEnd(dateRange?.end ?? '');
-  }, [dateRange]);
+    if (dateRange === undefined) {
+      const defaultRange = getDefaultDateRange();
+      setStart(defaultRange.start);
+      setEnd(defaultRange.end);
+      onDateRangeChange(defaultRange);
+    } else {
+      setStart(dateRange.start);
+      setEnd(dateRange.end);
+    }
+  }, [dateRange, onDateRangeChange]);
 
   const handleStartDateChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
     const newStart = event.target.value;