Fixed Large ID Precision Loss จาก Django DRF/JWT, CockroachDB Large IDs

web/src/components/ModelRegistry/ModelTable.jsx

@@ -16,13 +16,6 @@ const getStatusBadge = (status) => {
     }
 };
 
-/**
- * Component สำหรับแสดงตาราง Model Registry
- * @param {Array} models - ข้อมูล Models ที่กรองแล้ว (จาก useModelList)
- * @param {function} handleOpenEdit - Handler สำหรับเปิด Modal แก้ไข
- * @param {function} handleDelete - Handler สำหรับลบ Model
- * @param {boolean} deleteLoading - สถานะ Loading ของ Delete Mutation
- */
 function ModelTable({ models, handleOpenEdit, handleDelete, deleteLoading }) {
     // 1. Hook สำหรับทดสอบการเชื่อมต่อ (Test Connection)
     // ใช้ Hook ตรงนี้ เพราะเป็น Logic ที่เกี่ยวข้องกับ Action ในตารางโดยตรง
@@ -84,7 +77,7 @@ function ModelTable({ models, handleOpenEdit, handleDelete, deleteLoading }) {
                         <button
                             className="btn btn-outline btn-info btn-xs tooltip"
                             data-tip="Test Connection"
-                            onClick={() => handleTest(model.id)}
+                            onClick={() => handleTest(String(model.id))}
                             disabled={testConnectionMutation.isPending}
                         >
                             {testConnectionMutation.isPending ?
@@ -97,7 +90,7 @@ function ModelTable({ models, handleOpenEdit, handleDelete, deleteLoading }) {
                         <button
                             className="btn btn-outline btn-error btn-xs tooltip"
                             data-tip="Delete Model"
-                            onClick={() => handleDelete(model.id)}
+                            onClick={() => handleDelete(String(model.id))}
                             disabled={deleteLoading || testConnectionMutation.isPending}
                         >
                             <FaTrash className="w-3 h-3" />

web/src/services/axiosClient.js

@@ -2,12 +2,31 @@ import axios from 'axios';
 import { getStore } from '../app/store';
 import { logout } from '../features/auth/authSlice';
 
-// 1. สร้าง Axios Instance โดยใช้ Base URL จาก .env
+// REGEX ตรวจจับตัวเลขที่ใหญ่เกิน 15 หลัก (ซึ่งเกินขีดจำกัดความปลอดภัยของ JS)
+const bigIntRegex = /"id":(\d{15,})/g;
 
+// 1. สร้าง Axios Instance โดยใช้ Base URL จาก .env
 const axiosClient = axios.create({
     baseURL: import.meta.env.VITE_API_BASE_URL,
     // กำหนด Timeout เพื่อป้องกันการค้าง
     timeout: 15000,
+    transformResponse: [
+        function (data) {
+            if (typeof data === 'string') {
+                // 1. ใช้ Regex เพื่อค้นหาฟิลด์ "id" ที่มีตัวเลขเกิน 15 หลัก
+                data = data.replace(bigIntRegex, (match, p1) => {
+                    // 2. แปลงตัวเลขนั้นให้เป็น String ที่มีเครื่องหมายคำพูดล้อมรอบ
+                    return `"id":"${p1}"`;
+                });
+            }
+            // 3. เรียก JSON.parse หลังจากแปลงแล้ว
+            try {
+                return JSON.parse(data);
+            } catch {
+                return data; // คืนค่าเดิมถ้าไม่สามารถ Parse JSON ได้ (เช่น 404 text)
+            }
+        },
+    ].concat(axios.defaults.transformResponse || []),
 });