click subpath

app/components/analytics/PathAnalytics.tsx

@@ -4,6 +4,7 @@ interface PathAnalyticsProps {
   startTime: string;
   endTime: string;
   linkId?: string;
+  onPathClick?: (path: string) => void;
 }
 
 interface PathData {
@@ -12,7 +13,7 @@ interface PathData {
   percentage: number;
 }
 
-const PathAnalytics: React.FC<PathAnalyticsProps> = ({ startTime, endTime, linkId }) => {
+const PathAnalytics: React.FC<PathAnalyticsProps> = ({ startTime, endTime, linkId, onPathClick }) => {
   const [loading, setLoading] = useState(true);
   const [pathData, setPathData] = useState<PathData[]>([]);
   const [error, setError] = useState<string | null>(null);
@@ -83,6 +84,13 @@ const PathAnalytics: React.FC<PathAnalyticsProps> = ({ startTime, endTime, linkI
     fetchPathData();
   }, [startTime, endTime, linkId]);
   
+  const handlePathClick = (path: string, e: React.MouseEvent) => {
+    e.preventDefault();
+    if (onPathClick) {
+      onPathClick(path);
+    }
+  };
+  
   if (loading) {
     return <div className="py-8 flex justify-center">
       <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-500" />
@@ -118,7 +126,15 @@ const PathAnalytics: React.FC<PathAnalyticsProps> = ({ startTime, endTime, linkI
           <tbody className="bg-white divide-y divide-gray-200">
             {pathData.map((item, index) => (
               <tr key={index} className={index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}>
-                <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{item.path}</td>
+                <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
+                  <a 
+                    href="#" 
+                    className="hover:text-blue-600 hover:underline cursor-pointer"
+                    onClick={(e) => handlePathClick(item.path, e)}
+                  >
+                    {item.path}
+                  </a>
+                </td>
                 <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 text-right">{item.count}</td>
                 <td className="px-6 py-4 whitespace-nowrap text-right">
                   <div className="flex items-center justify-end">