[KM-475][DED][FE] Align API services, fix document upload flow, add upload progress

ticket: https://bukittechnology.atlassian.net/browse/KM-475

- Align api.ts and interviewApi.ts with latest API contract (endpoint paths,
request/response shapes, error envelope, DocumentStatus types)
- Revert document upload to multipart/form-data; remove putFileToAzure (SAS flow)
- Replace fetch with XMLHttpRequest in uploadDocument to support onProgress callback
- Add upload progress bar (% indicator) in KnowledgeManagement UI
- Add post-process polling: after /process returns 202, poll GET /documents
every 3s until status resolves to completed or failed
- Add timing logs for /upload and /process endpoints for performance diagnostics

src/app/components/KnowledgeManagement.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import {
   Upload,
   Trash2,
@@ -62,6 +62,7 @@ export default function KnowledgeManagement({
   const [loadingDocs, setLoadingDocs] = useState(false);
   const [docsError, setDocsError] = useState<string | null>(null);
   const [uploading, setUploading] = useState(false);
+  const [uploadProgress, setUploadProgress] = useState<number>(0);
   const [uploadError, setUploadError] = useState<string | null>(null);
   const [processing, setProcessing] = useState<string | null>(null);
   const [deleting, setDeleting] = useState<string | null>(null);
@@ -76,12 +77,40 @@ export default function KnowledgeManagement({
   const [loadingDbTypes, setLoadingDbTypes] = useState(false);
   const [ingesting, setIngesting] = useState<string | null>(null);
   const [deletingClient, setDeletingClient] = useState<string | null>(null);
+  const pollingTimers = useRef<Map<string, ReturnType<typeof setInterval>>>(new Map());
 
   // ── DB credentials form state ───────────────────────────────────────────────
   const [connectionName, setConnectionName] = useState("");
   const [dbForm, setDbForm] = useState<Record<string, string | number | boolean>>({});
   const [connecting, setConnecting] = useState(false);
 
+  useEffect(() => {
+    return () => {
+      pollingTimers.current.forEach((timer) => clearInterval(timer));
+      pollingTimers.current.clear();
+    };
+  }, []);
+
+  const startPollingDocument = (userId: string, docId: string) => {
+    if (pollingTimers.current.has(docId)) return;
+    const timer = setInterval(async () => {
+      try {
+        const docs = await getDocuments(userId);
+        const updated = docs.find((d) => d.id === docId);
+        if (updated && (updated.status === "completed" || updated.status === "failed")) {
+          clearInterval(timer);
+          pollingTimers.current.delete(docId);
+          setDocuments((prev) =>
+            prev.map((d) => (d.id === docId ? { ...d, status: updated.status } : d))
+          );
+        }
+      } catch {
+        // ignore transient errors, keep polling
+      }
+    }, 3000);
+    pollingTimers.current.set(docId, timer);
+  };
+
   useEffect(() => {
     if (!open) return;
     const userId = getUserId();
@@ -92,15 +121,15 @@ export default function KnowledgeManagement({
       .then((types) => setDocTypes(types.filter((t) => t.status === "active")))
       .catch(() =>
         setDocTypes([
-          { doc_type: "pdf",  max_size: 10, status: "active", message: null },
-          { doc_type: "csv",  max_size: 10, status: "active", message: null },
-          { doc_type: "xlsx", max_size: 10, status: "active", message: null },
+          { type: "pdf",  max_size_mb: 10, status: "active", message: null },
+          { type: "csv",  max_size_mb: 10, status: "active", message: null },
+          { type: "xlsx", max_size_mb: 10, status: "active", message: null },
         ])
       );
   }, [open]);
 
-  const acceptedExtensions = docTypes.map((t) => `.${t.doc_type}`).join(",");
-  const supportedFormatsText = docTypes.map((t) => t.doc_type.toUpperCase()).join(", ");
+  const acceptedExtensions = docTypes.map((t) => `.${t.type}`).join(",");
+  const supportedFormatsText = docTypes.map((t) => t.type.toUpperCase()).join(", ");
 
   const loadDbData = async (userId: string) => {
     setLoadingDbTypes(true);
@@ -149,23 +178,25 @@ export default function KnowledgeManagement({
     if (!userId) return;
 
     setUploading(true);
+    setUploadProgress(0);
     setUploadError(null);
 
     for (let i = 0; i < files.length; i++) {
       const file = files[i];
+      console.log(`[upload] ── file selected: "${file.name}", ${(file.size / 1024).toFixed(1)} KB`);
+      const tClick = performance.now();
       try {
-        const uploadRes = await uploadDocument(userId, file);
+        console.log(`[upload] ── calling uploadDocument (pre-fetch delay: ${(performance.now() - tClick).toFixed(0)} ms)`);
+        const uploadRes = await uploadDocument(userId, file, setUploadProgress);
+        console.log(`[upload] ── uploadDocument returned, updating UI`);
         const newDoc: ApiDocument = {
+          ...uploadRes.data,
           id: uploadRes.data.id,
-          filename: uploadRes.data.filename,
-          status: "pending",
-          file_size: file.size,
-          file_type: file.name.split(".").pop() ?? "",
-          created_at: new Date().toISOString(),
         };
         setDocuments((prev) => [newDoc, ...prev]);
-        await processDocumentById(userId, uploadRes.data.id);
+        console.log(`[upload] ── done in ${(performance.now() - tClick).toFixed(0)} ms total`);
       } catch (err) {
+        console.error(`[upload] ✗ failed after ${(performance.now() - tClick).toFixed(0)} ms:`, err);
         setUploadError(err instanceof Error ? err.message : "Upload failed");
       }
     }
@@ -181,13 +212,12 @@ export default function KnowledgeManagement({
         d.id === docId ? { ...d, status: "processing" as DocumentStatus } : d
       )
     );
+    const tProcess = performance.now();
     try {
+      console.log(`[process] ── calling processDocument for doc: ${docId}`);
       await processDocument(userId, docId);
-      setDocuments((prev) =>
-        prev.map((d) =>
-          d.id === docId ? { ...d, status: "completed" as DocumentStatus } : d
-        )
-      );
+      console.log(`[process] ── accepted in ${(performance.now() - tProcess).toFixed(0)} ms, polling started`);
+      startPollingDocument(userId, docId);
     } catch {
       setDocuments((prev) =>
         prev.map((d) =>
@@ -398,11 +428,19 @@ export default function KnowledgeManagement({
                 </div>
                 <div className="text-center">
                   <p className="text-sm font-medium text-slate-700">
-                    {uploading ? "Uploading…" : (
+                    {uploading ? `Uploading… ${uploadProgress}%` : (
                       <>Drop files, or <span className="text-[#FF8F00]">browse</span></>
                     )}
                   </p>
-                  <p className="text-xs text-slate-400 mt-0.5">{supportedFormatsText}</p>
+                  {uploading && (
+                    <div className="w-32 h-1.5 bg-slate-200 rounded-full overflow-hidden mt-1.5 mx-auto">
+                      <div
+                        className="h-full bg-[#FF8F00] transition-all duration-300"
+                        style={{ width: `${uploadProgress}%` }}
+                      />
+                    </div>
+                  )}
+                  {!uploading && <p className="text-xs text-slate-400 mt-0.5">{supportedFormatsText}</p>}
                 </div>
                 <input
                   id="file-upload"

src/app/components/Main.tsx

@@ -763,11 +763,11 @@ export default function Main() {
             )}
           </button>
           <h1 className="text-base text-slate-900 flex-1 truncate min-w-0">
-            {currentChat?.title || "Chatbot"}
+            {currentChat?.title || "Data Eyond"}
           </h1>
           <button
             onClick={() => setKnowledgeOpen(true)}
-            className="flex items-center gap-2 bg-[#F59E0B] hover:bg-[#D97706] text-white px-3 py-2 rounded-lg transition-all duration-200 hover:scale-105 text-sm flex-shrink-0"
+            className="flex items-center gap-2 bg-[#F59E0B] hover:bg-[#D97706] text-white px-3 py-2 rounded-lg transition-all duration-200 hover:scale-105 active:scale-95 cursor-pointer text-sm flex-shrink-0 shadow-sm hover:shadow-md"
           >
             <Database className="w-4 h-4" />
             Knowledge

src/services/api.ts

@@ -53,26 +53,39 @@ export interface RoomDetail extends Room {
   messages: RoomMessage[];
 }
 
-export type DocumentStatus = "uploaded" | "processing" | "completed" | "failed";
+export type DocumentStatus = "uploading" | "uploaded" | "processing" | "completed" | "failed";
 
 export interface ApiDocument {
   id: string;
+  user_id?: string;
   filename: string;
+  blob_name?: string;
   status: DocumentStatus;
   file_size: number;
   file_type: string;
   created_at: string;
+  processed_at?: string;
+  error_message?: string;
 }
 
 export interface UploadDocumentResponse {
   status: string;
   message: string;
-  data: { id: string; filename: string; status: DocumentStatus };
+  data: {
+    id: string;
+    user_id: string;
+    filename: string;
+    blob_name: string;
+    file_size: number;
+    file_type: string;
+    status: DocumentStatus;
+    created_at: string;
+  };
 }
 
 export interface DocTypeInfo {
-  doc_type: string;
-  max_size: number;
+  type: string;
+  max_size_mb: number;
   status: "active" | "inactive";
   message: string | null;
 }
@@ -82,6 +95,8 @@ export interface DataCatalogSource {
   source_type: "schema" | "tabular" | "unstructured";
   name: string;
   location_ref: string;
+  table_count?: number;
+  updated_at?: string;
 }
 
 export interface DataCatalog {
@@ -106,8 +121,8 @@ async function request<T>(baseUrl: string, path: string, options?: RequestInit):
   if (!res.ok) {
     const err = await res
       .json()
-      .catch(() => ({ detail: `HTTP ${res.status}` }));
-    throw new Error(err.detail ?? `HTTP ${res.status}`);
+      .catch(() => ({ message: `HTTP ${res.status}` }));
+    throw new Error(err.message ?? `HTTP ${res.status}`);
   }
   return res.json() as Promise<T>;
 }
@@ -123,22 +138,22 @@ export const login = (email: string, password: string) =>
 // ─── Rooms ────────────────────────────────────────────────────────────────────
 
 export const getRooms = (userId: string): Promise<Room[]> =>
-  request<{ status: string; message: string; data: Room[] | null }>(ORCHESTRATION_BASE_URL, `/api/v1/rooms/${userId}`)
+  request<{ status: string; message: string; data: Room[] | null }>(ORCHESTRATION_BASE_URL, `/api/v1/chat-rooms?user_id=${userId}`)
     .then(res => res.data ?? []);
 
 export const getRoom = (roomId: string): Promise<RoomDetail> =>
-  request<{ status: string; message: string; data: RoomDetail }>(ORCHESTRATION_BASE_URL, `/api/v1/room/${roomId}`)
+  request<{ status: string; message: string; data: RoomDetail }>(ORCHESTRATION_BASE_URL, `/api/v1/chat-rooms/${roomId}`)
     .then(res => res.data);
 
 export const deleteRoom = (roomId: string, userId: string) =>
   request<{ status: string; message: string }>(
     ORCHESTRATION_BASE_URL,
-    `/api/v1/room/${roomId}?user_id=${userId}`,
+    `/api/v1/chat-rooms/${roomId}?user_id=${userId}`,
     { method: "DELETE" }
   );
 
 export const createRoom = (userId: string, title?: string) =>
-  request<CreateRoomResponse>(ORCHESTRATION_BASE_URL, "/api/v1/room/create", {
+  request<CreateRoomResponse>(ORCHESTRATION_BASE_URL, "/api/v1/chat-rooms", {
     method: "POST",
     body: JSON.stringify({ user_id: userId, title }),
   });
@@ -149,38 +164,71 @@ export const getDocuments = (userId: string): Promise<ApiDocument[]> =>
   request<{ status: string; message: string; data: ApiDocument[] | null }>(ORCHESTRATION_BASE_URL, `/api/v1/documents/${userId}`)
     .then(res => res.data ?? []);
 
-export const uploadDocument = async (
+export const uploadDocument = (
   userId: string,
-  file: File
-): Promise<UploadDocumentResponse> => {
-  const form = new FormData();
-  form.append("user_id", userId);
-  form.append("file", file);
-  const res = await fetch(
-    `${ORCHESTRATION_BASE_URL}/api/v1/document/upload`,
-    { method: "POST", body: form }
-  );
-  if (!res.ok) {
-    const err = await res
-      .json()
-      .catch(() => ({ detail: `HTTP ${res.status}` }));
-    throw new Error(err.detail ?? `HTTP ${res.status}`);
-  }
-  return res.json() as Promise<UploadDocumentResponse>;
-};
+  file: File,
+  onProgress?: (percent: number) => void
+): Promise<UploadDocumentResponse> =>
+  new Promise((resolve, reject) => {
+    const form = new FormData();
+    form.append("user_id", userId);
+    form.append("file", file);
+
+    console.log(`[upload] ▶ XHR start — file: "${file.name}", size: ${(file.size / 1024).toFixed(1)} KB`);
+    const t0 = performance.now();
+
+    const xhr = new XMLHttpRequest();
+
+    xhr.upload.onprogress = (e) => {
+      if (e.lengthComputable) {
+        const pct = Math.round((e.loaded / e.total) * 100);
+        console.log(`[upload] ↑ ${pct}% — ${(e.loaded / 1024).toFixed(0)} / ${(e.total / 1024).toFixed(0)} KB`);
+        onProgress?.(pct);
+      }
+    };
+
+    xhr.onload = () => {
+      console.log(`[upload] ◀ HTTP ${xhr.status}, elapsed: ${(performance.now() - t0).toFixed(0)} ms`);
+      if (xhr.status >= 200 && xhr.status < 300) {
+        try {
+          const data = JSON.parse(xhr.responseText) as UploadDocumentResponse;
+          console.log(`[upload] ✓ done — total: ${(performance.now() - t0).toFixed(0)} ms`);
+          resolve(data);
+        } catch {
+          reject(new Error("Failed to parse response"));
+        }
+      } else {
+        try {
+          const err = JSON.parse(xhr.responseText) as { message?: string };
+          reject(new Error(err.message ?? `HTTP ${xhr.status}`));
+        } catch {
+          reject(new Error(`HTTP ${xhr.status}`));
+        }
+      }
+    };
+
+    xhr.onerror = () => reject(new Error("Network error during upload"));
+    xhr.open("POST", `${ORCHESTRATION_BASE_URL}/api/v1/document/upload`);
+    xhr.send(form);
+  });
 
-export const processDocument = (_userId: string, documentId: string) =>
-  request<{ status: string; message: string }>(
+export const processDocument = async (userId: string, documentId: string) => {
+  console.log(`[process] ▶ fetch start — document_id: ${documentId}`);
+  const t0 = performance.now();
+  const result = await request<{ status: string; message: string; data: { document_id: string; file_type: string; status: string } }>(
     ORCHESTRATION_BASE_URL,
     `/api/v1/document/process`,
-    { method: "POST", body: JSON.stringify({ document_id: documentId }) }
+    { method: "POST", body: JSON.stringify({ user_id: userId, document_id: documentId }) }
   );
+  console.log(`[process] ✓ accepted — elapsed: ${(performance.now() - t0).toFixed(0)} ms, status: ${result.data?.status}`);
+  return result;
+};
 
-export const deleteDocument = (_userId: string, documentId: string) =>
+export const deleteDocument = (userId: string, documentId: string) =>
   request<{ status: string; message: string }>(
     ORCHESTRATION_BASE_URL,
     `/api/v1/document/delete`,
-    { method: "DELETE", body: JSON.stringify({ document_id: documentId }) }
+    { method: "DELETE", body: JSON.stringify({ document_id: documentId, user_id: userId }) }
   );
 
 export const getDocumentTypes = (): Promise<DocTypeInfo[]> =>
@@ -221,10 +269,21 @@ export interface DatabaseClient {
   updated_at: string | null;
 }
 
+export interface IngestColumn {
+  name: string;
+  data_type: string;
+  nullable: boolean;
+}
+
+export interface IngestTable {
+  name: string;
+  row_count: number;
+  columns: IngestColumn[];
+  fks: Array<{ column_name: string; foreign_table: string; foreign_column_name: string }>;
+}
+
 export interface IngestResponse {
-  status: string;
-  client_id: string;
-  chunks_ingested: number;
+  tables: IngestTable[];
 }
 
 export const getDatabaseClientTypes = (): Promise<DbTypeInfo[]> =>
@@ -253,10 +312,10 @@ export const deleteDatabaseClient = (clientId: string, userId: string) =>
     { method: "DELETE" }
   );
 
-export const ingestDatabaseClient = (clientId: string, _userId: string): Promise<IngestResponse> =>
+export const ingestDatabaseClient = (clientId: string, userId: string): Promise<IngestResponse> =>
   request<{ status: string; message: string; data: IngestResponse }>(
     ORCHESTRATION_BASE_URL,
-    `/api/v1/database-clients/${clientId}/ingest`,
+    `/api/v1/database-clients/${clientId}/ingest?user_id=${userId}`,
     { method: "POST" }
   ).then(res => res.data);
 

src/services/interviewApi.ts

@@ -93,9 +93,9 @@ export const createSession = (
   userId: string,
   roomId: string,
   mode: "text" | "audio" = "text",
-  language = "id-ID"
+  language = "id"
 ): Promise<CreateSessionResponse> =>
-  request<CreateSessionResponse>("/sessions", {
+  request<CreateSessionResponse>("/api/v1/interviews/sessions", {
     method: "POST",
     body: JSON.stringify({ framework_id: frameworkId, user_id: userId, room_id: roomId, mode, language }),
   });
@@ -104,7 +104,7 @@ export const sendMessage = (
   sessionId: string,
   message: string
 ): Promise<MessageResponse> =>
-  request<MessageResponse>(`/sessions/${sessionId}/message`, {
+  request<MessageResponse>(`/api/v1/interviews/sessions/${sessionId}/message`, {
     method: "POST",
     body: JSON.stringify({ message }),
   });
@@ -112,19 +112,19 @@ export const sendMessage = (
 export const finishSession = (
   sessionId: string
 ): Promise<FinishSessionResponse> =>
-  request<FinishSessionResponse>(`/sessions/${sessionId}/finish`, {
+  request<FinishSessionResponse>(`/api/v1/interviews/sessions/${sessionId}/finish`, {
     method: "POST",
   });
 
 export const getInterviewResult = (roomId: string): Promise<InterviewResult> =>
-  request<InterviewResult>(`/rooms/${roomId}/result`);
+  request<InterviewResult>(`/api/v1/interviews/${roomId}/result`);
 
 // SSE streaming — returns raw Response so caller can read the stream
 export const streamMessage = (
   sessionId: string,
   message: string
 ): Promise<Response> =>
-  fetch(`${INTERVIEW_BASE_URL}/sessions/${sessionId}/stream-message`, {
+  fetch(`${INTERVIEW_BASE_URL}/api/v1/interviews/sessions/${sessionId}/stream-message`, {
     method: "POST",
     headers: { "Content-Type": "application/json" },
     body: JSON.stringify({ message }),
@@ -145,7 +145,7 @@ export function openAudioSession(
   onClose: () => void
 ): AudioSessionHandle {
   const wsBase = INTERVIEW_BASE_URL.replace(/^http/, "ws");
-  const ws = new WebSocket(`${wsBase}/ws/audio?session_id=${sessionId}`);
+  const ws = new WebSocket(`${wsBase}/api/v1/interviews/ws/audio?session_id=${sessionId}`);
   ws.binaryType = "arraybuffer";
 
   ws.onmessage = (e) => {