fix: address code review feedback

- Replace type assertions with type guards in types.ts (isDateString, isStringArray)
- Add useCallback for event handlers (handleTaskClick, handleKeyDown)
- Replace styled-jsx with CSS modules (gantt.module.css)
- Update tests to use CSS module class name patterns

apps/web/src/components/gantt/GanttChart.tsx

@@ -3,7 +3,8 @@
 import type { GanttTask, GanttChartProps, TimelineRange, GanttBarPosition } from "./types";
 import { TaskStatus } from "@mosaic/shared";
 import { formatDate, isPastTarget, isApproachingTarget } from "@/lib/utils/date-format";
-import { useMemo } from "react";
+import { useMemo, useCallback } from "react";
+import styles from "./gantt.module.css";
 
 /**
  * Represents a dependency line between two tasks
@@ -111,11 +112,11 @@ function getStatusClass(status: TaskStatus): string {
 function getRowStatusClass(status: TaskStatus): string {
   switch (status) {
     case TaskStatus.COMPLETED:
-      return "gantt-row-completed";
+      return styles.rowCompleted;
     case TaskStatus.IN_PROGRESS:
-      return "gantt-row-in-progress";
+      return styles.rowInProgress;
     case TaskStatus.PAUSED:
-      return "gantt-row-paused";
+      return styles.rowPaused;
     default:
       return "";
   }
@@ -232,20 +233,26 @@ export function GanttChart({
     [showDependencies, sortedTasks, timelineRange]
   );
 
-  const handleTaskClick = (task: GanttTask) => (): void => {
-    if (onTaskClick) {
-      onTaskClick(task);
-    }
-  };
-
-  const handleKeyDown = (task: GanttTask) => (e: React.KeyboardEvent<HTMLDivElement>): void => {
-    if (e.key === "Enter" || e.key === " ") {
-      e.preventDefault();
+  const handleTaskClick = useCallback(
+    (task: GanttTask) => (): void => {
       if (onTaskClick) {
         onTaskClick(task);
       }
-    }
-  };
+    },
+    [onTaskClick]
+  );
+
+  const handleKeyDown = useCallback(
+    (task: GanttTask) => (e: React.KeyboardEvent<HTMLDivElement>): void => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        if (onTaskClick) {
+          onTaskClick(task);
+        }
+      }
+    },
+    [onTaskClick]
+  );
 
   return (
     <div
@@ -415,19 +422,6 @@ export function GanttChart({
           </div>
         </div>
       </div>
-
-      {/* CSS for status classes */}
-      <style jsx>{`
-        .gantt-row-completed {
-          background-color: #f0fdf4;
-        }
-        .gantt-row-in-progress {
-          background-color: #eff6ff;
-        }
-        .gantt-row-paused {
-          background-color: #fefce8;
-        }
-      `}</style>
     </div>
   );
 }