Automatically show the current month's timesheet when viewing the timesheets page

Redirect to the current month's timesheet detail page if it exists, otherwise show the list of timesheets.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 55837015-10e9-4be9-b857-7f5e6be73772
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: ca4f6ae2-ceaf-44e2-aa91-4c2204934186
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/1cc377db-7ea0-49f2-97ce-c3e87e0228cc/55837015-10e9-4be9-b857-7f5e6be73772/3QF56xd
Replit-Helium-Checkpoint-Created: true

artifacts/cra-app/src/pages/timesheets.tsx

@@ -1,5 +1,5 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
-import { Link } from "wouter";
+import { Link, useLocation } from "wouter";
 import { 
   useListTimesheets, 
   getListTimesheetsQueryKey,
@@ -19,14 +19,27 @@ import { MONTHS, formatMonthYear, STATUS_LABELS, STATUS_COLORS, cn } from "@/lib
 
 export default function TimesheetsPage() {
   const currentYear = new Date().getFullYear();
+  const currentMonth = new Date().getMonth() + 1;
   const [yearFilter, setYearFilter] = useState<string>(currentYear.toString());
   const [isCreateOpen, setIsCreateOpen] = useState(false);
+  const [, navigate] = useLocation();
+  const [redirectChecked, setRedirectChecked] = useState(false);
   
   const { data: timesheets, isLoading } = useListTimesheets(
     { year: parseInt(yearFilter) },
     { query: { queryKey: getListTimesheetsQueryKey({ year: parseInt(yearFilter) }) } }
   );
 
+  useEffect(() => {
+    if (!isLoading && timesheets && !redirectChecked && parseInt(yearFilter) === currentYear) {
+      setRedirectChecked(true);
+      const currentMonthTs = timesheets.find(ts => ts.month === currentMonth && ts.year === currentYear);
+      if (currentMonthTs) {
+        navigate(`/timesheets/${currentMonthTs.id}`);
+      }
+    }
+  }, [isLoading, timesheets, redirectChecked, yearFilter, currentYear, currentMonth, navigate]);
+
   return (
     <div className="space-y-6">
       <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">