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)}

src/app/styles/pages-styles.scss

@@ -521,7 +521,7 @@
 			gap: 8px;
 		}
 
-		.upload-progress {
+/* 		.upload-progress {
 			font-weight: 500;
 			font-size: 18px;
 			margin-right: 16px;
@@ -529,6 +529,41 @@
 			@media (max-width: 500px) {
 				margin-right: 0px;
 			}
+		} */
+
+		.upload-progress-circle {
+			position: relative;
+			width: 40px;
+			height: 40px;
+			margin-right: 16px;
+
+			@media (max-width: 500px) {
+				margin-right: 0px;
+			}
+		}
+
+		.circular-chart {
+			width: 100%;
+			height: 100%;
+			transform: rotate(-90deg);
+		}
+
+		.circle-bg {
+			stroke: #e5e7eb;
+		}
+
+		.circle {
+			transition: stroke-dasharray 0.3s ease;
+		}
+
+		.circle-percentage {
+			position: absolute;
+			top: 50%;
+			left: 50%;
+			transform: translate(-50%, -50%);
+			font-size: 10px;
+			font-weight: 600;
+			color: #374151;
 		}
 	}