remove loading procent while error, add circle progres bar

src/app/components/UploadSectionFile.tsx

@@ -602,15 +602,32 @@ export default function UploadSectionFile({
 															</>
 														)
 													}
-													<div>
-														<span className={
-															`upload-progress ${file.status === 'completed' ? 'text-green-600' :
-																file.status === 'uploading' ? 'text-blue-600' :
-																	'text-gray-600'
-															}`
-														}>
-															{file.progress} %
-														</span>
+													<div
+														className="flex"
+													>
+														{file.status !== 'error' && (
+															<div className="upload-progress-circle">
+																<svg viewBox="0 0 36 36" className="circular-chart">
+																	<path
+																		className="circle-bg"
+																		d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
+																		fill="none"
+																		stroke="#e5e7eb"
+																		strokeWidth="3"
+																	/>
+																	<path
+																		className="circle"
+																		d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
+																		fill="none"
+																		stroke={file.status === 'completed' ? '#10b981' : file.status === 'uploading' ? '#155dfc' : '#6b7280'}
+																		strokeWidth="4"
+																		strokeDasharray={`${file.progress}, 100`}
+																		strokeLinecap="round"
+																	/>
+																</svg>
+																<span className="circle-percentage">{file.progress}%</span>
+															</div>
+														)}
 														< button
 															className="btn btn-cancel"
 															onClick={() => handleClearFile(file.uploadId || file.name)}