From c52928fb1e549327a208916dc14a94e042a3fd48 Mon Sep 17 00:00:00 2001
From: Flook <admin@softwarecraft.tech>
Date: Mon, 10 Nov 2025 04:46:21 +0700
Subject: [PATCH] =?UTF-8?q?Fixed=20Large=20ID=20Precision=20Loss=20?=
 =?UTF-8?q?=E0=B8=88=E0=B8=B2=E0=B8=81=20Django=20DRF/JWT,=20CockroachDB?=
 =?UTF-8?q?=20Large=20IDs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ModelRegistry/ModelTable.jsx   | 11 ++--------
 web/src/services/axiosClient.js               | 21 ++++++++++++++++++-
 2 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/web/src/components/ModelRegistry/ModelTable.jsx b/web/src/components/ModelRegistry/ModelTable.jsx
index d874fc2..86d29db 100644
--- a/web/src/components/ModelRegistry/ModelTable.jsx
+++ b/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" />
diff --git a/web/src/services/axiosClient.js b/web/src/services/axiosClient.js
index bff0a1c..6612219 100644
--- a/web/src/services/axiosClient.js
+++ b/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 || []),
 });