thêm quét QR đăng nhập, sửa lại logic để gọi api bằng ip thiết bị

app/(tabs)/index.tsx

@@ -46,8 +46,9 @@ export default function HomeScreen() {
   const [circleRadius, setCircleRadius] = useState(100);
   const [zoomLevel, setZoomLevel] = useState(10);
   const [isFirstLoad, setIsFirstLoad] = useState(true);
-  const [polylineCoordinates, setPolylineCoordinates] =
-    useState<PolylineWithLabelProps | null>(null);
+  const [polylineCoordinates, setPolylineCoordinates] = useState<
+    PolylineWithLabelProps[]
+  >([]);
   const [polygonCoordinates, setPolygonCoordinates] = useState<
     PolygonWithLabelProps[]
   >([]);
@@ -69,7 +70,7 @@ export default function HomeScreen() {
       } else {
         setGpsData(null);
         setPolygonCoordinates([]);
-        setPolylineCoordinates(null);
+        setPolylineCoordinates([]);
       }
     };
     const queryAlarmData = (alarmData: Model.AlarmResponse) => {
@@ -121,7 +122,7 @@ export default function HomeScreen() {
   }, []);
 
   useEffect(() => {
-    setPolylineCoordinates(null);
+    setPolylineCoordinates([]);
     setPolygonCoordinates([]);
     if (!entityData) return;
     if (!banzoneData) return;
@@ -139,11 +140,14 @@ export default function HomeScreen() {
       }
       // Nếu danh sách zone rỗng, clear tất cả
       if (zones.length === 0) {
-        setPolylineCoordinates(null);
+        setPolylineCoordinates([]);
         setPolygonCoordinates([]);
         return;
       }
 
+      let polylines: PolylineWithLabelProps[] = [];
+      let polygons: PolygonWithLabelProps[] = [];
+
       for (const zone of zones) {
         // console.log("Zone Data: ", zone);
         const geom = banzoneData.find((b) => b.id === zone.zone_id);
@@ -161,7 +165,7 @@ export default function HomeScreen() {
             geom_lines || ""
           );
           if (coordinates.length > 0) {
-            setPolylineCoordinates({
+            polylines.push({
               coordinates: coordinates.map((coord) => ({
                 latitude: coord[0],
                 longitude: coord[1],
@@ -169,25 +173,31 @@ export default function HomeScreen() {
               label: zone?.zone_name ?? "",
               content: zone?.message ?? "",
             });
+          } else {
+            console.log("Không tìm thấy polyline trong alarm");
           }
         } else if (geom_type === 1) {
           // foundPolygon = true;
           const coordinates = convertWKTtoLatLngString(geom_poly || "");
           if (coordinates.length > 0) {
             // console.log("Polygon Coordinate: ", coordinates);
-            setPolygonCoordinates(
-              coordinates.map((polygon) => ({
-                coordinates: polygon.map((coord) => ({
-                  latitude: coord[0],
-                  longitude: coord[1],
-                })),
-                label: zone?.zone_name ?? "",
-                content: zone?.message ?? "",
-              }))
-            );
+            const zonePolygons = coordinates.map((polygon) => ({
+              coordinates: polygon.map((coord) => ({
+                latitude: coord[0],
+                longitude: coord[1],
+              })),
+              label: zone?.zone_name ?? "",
+              content: zone?.message ?? "",
+            }));
+            polygons.push(...zonePolygons);
+          } else {
+            console.log("Không tìm thấy polygon trong alarm");
           }
         }
       }
+
+      setPolylineCoordinates(polylines);
+      setPolygonCoordinates(polygons);
     }
   }, [banzoneData, entityData]);
 
@@ -301,7 +311,7 @@ export default function HomeScreen() {
             // console.log(`Rendering circle ${index}:`, point);
             return (
               <Circle
-                key={index}
+                key={`circle-${index}`}
                 center={{
                   latitude: point.lat,
                   longitude: point.lon,
@@ -315,27 +325,27 @@ export default function HomeScreen() {
               />
             );
           })}
-        {polylineCoordinates && (
-          <PolylineWithLabel
-            key={`polyline-${gpsData?.lat || 0}-${gpsData?.lon || 0}`}
-            coordinates={polylineCoordinates.coordinates}
-            label={polylineCoordinates.label}
-            content={polylineCoordinates.content}
-            strokeColor="#FF5733"
-            strokeWidth={4}
-            showDistance={false}
-            // zIndex={50}
-          />
+        {polylineCoordinates.length > 0 && (
+          <>
+            {polylineCoordinates.map((polyline, index) => (
+              <PolylineWithLabel
+                key={`polyline-${index}-${gpsData?.lat || 0}-${
+                  gpsData?.lon || 0
+                }`}
+                coordinates={polyline.coordinates}
+                label={polyline.label}
+                content={polyline.content}
+                strokeColor="#FF5733"
+                strokeWidth={4}
+                showDistance={false}
+                // zIndex={50}
+              />
+            ))}
+          </>
         )}
         {polygonCoordinates.length > 0 && (
           <>
             {polygonCoordinates.map((polygon, index) => {
-              // Tạo key ổn định từ tọa độ đầu tiên của polygon
-              const polygonKey =
-                polygon.coordinates.length > 0
-                  ? `polygon-${polygon.coordinates[0].latitude}-${polygon.coordinates[0].longitude}-${index}`
-                  : `polygon-${index}`;
-
               return (
                 <PolygonWithLabel
                   key={`polygon-${index}-${gpsData?.lat || 0}-${
@@ -365,11 +375,6 @@ export default function HomeScreen() {
               latitude: gpsData.lat,
               longitude: gpsData.lon,
             }}
-            title={
-              platform === IOS_PLATFORM
-                ? "Tàu của mình - iOS"
-                : "Tàu của mình - Android"
-            }
             zIndex={20}
             anchor={
               platform === IOS_PLATFORM