feat(fe): file uploading

web/src/app/home/knowledge/components/kb-docs/KBDoc.tsx

@@ -1,5 +1,48 @@
 import { useEffect, useState } from 'react';
+import { httpClient } from '@/app/infra/http/HttpClient';
+import { KnowledgeBaseFile } from '@/app/infra/entities/api';
+import { columns, DocumentFile } from './documents/columns';
+import { DataTable } from './documents/data-table';
+import FileUploadZone from './FileUploadZone';
 
 export default function KBDoc({ kbId }: { kbId: string }) {
-  return <div>Documents</div>;
+  const [documentsList, setDocumentsList] = useState<DocumentFile[]>([]);
+
+  useEffect(() => {
+    getDocumentsList();
+  }, []);
+
+  async function getDocumentsList() {
+    const resp = await httpClient.getKnowledgeBaseFiles(kbId);
+    setDocumentsList(
+      resp.files.map((file: KnowledgeBaseFile) => {
+        return {
+          id: file.file_id,
+          name: file.file_name,
+          status: file.status,
+        };
+      }),
+    );
+  }
+
+  const handleUploadSuccess = () => {
+    // Refresh document list after successful upload
+    getDocumentsList();
+  };
+
+  const handleUploadError = (error: string) => {
+    // Error messages are already handled by toast in FileUploadZone component
+    console.error('Upload failed:', error);
+  };
+
+  return (
+    <div className="container mx-auto py-4">
+      <FileUploadZone
+        kbId={kbId}
+        onUploadSuccess={handleUploadSuccess}
+        onUploadError={handleUploadError}
+      />
+      <DataTable columns={columns()} data={documentsList} />
+    </div>
+  );
 }