feat: implement drain issue

src/hooks/use-frame-detection-map.ts

@@ -23,10 +23,8 @@ export const useFrameDetectionMap = (data: DetectionData, detectionType: string)
             .map((d: any) => ({
               ...d,
               _detType: (d.type || '').toLowerCase(),
-              // Map old ID fields for backward compatibility in UI components
-              pothole_id: d.type === 'pothole' ? d.detection_id : undefined,
-              signboard_id: d.type.includes('sign') ? d.detection_id : undefined,
-              culvert_id: d.type.includes('culvert') ? d.detection_id : undefined,
+              // Map old ID fields and new ID fields dynamically for backward compatibility
+              [`${(d.type || '').toLowerCase()}_id`]: d.detection_id,
             }));
 
           if (filteredDetections.length > 0) {
@@ -37,26 +35,30 @@ export const useFrameDetectionMap = (data: DetectionData, detectionType: string)
           let detections: any[] = [];
 
           enabledTypes.forEach((type) => {
-            const listKey =
-              type.id === 'pothole'
-                ? 'potholes'
-                : type.id.includes('sign')
-                  ? 'signboards'
-                  : type.id === 'good_culvert'
-                    ? 'good_culverts'
-                    : type.id === 'defective_culvert'
-                      ? 'defective_culverts'
-                      : null;
+            // Try common plural naming conventions for legacy support
+            const possibleKeys = [
+              `${type.id}s`,
+              type.id.endsWith('y') ? `${type.id.slice(0, -1)}ies` : `${type.id}s`,
+              type.listKey.replace('_list', 's'),
+              type.listKey,
+            ];
 
-            if (listKey && (frameData as any)[listKey]) {
-              detections = [
-                ...detections,
-                ...(frameData as any)[listKey].map((item: any) => ({
-                  ...item,
-                  _detType: type.id,
-                  type: type.id,
-                })),
-              ];
+            for (const listKey of possibleKeys) {
+              if ((frameData as any)[listKey]) {
+                detections = [
+                  ...detections,
+                  ...(frameData as any)[listKey].map((item: any) => ({
+                    ...item,
+                    _detType: type.id,
+                    type: type.id,
+                    [`${type.id.toLowerCase()}_id`]:
+                      (item as any).detection_id ??
+                      (item as any)[`${type.id.toLowerCase()}_id`] ??
+                      item.id,
+                  })),
+                ];
+                break;
+              }
             }
           });