Added sample details UI to upload

frontend/src/app/upload/upload.component.html

@@ -1,5 +1,5 @@
 <div class="container mx-auto p-4 mt-4">
-  <h1 class="text-4xl font-bold text-center text-gray-800 mb-10">Upload Your File</h1>
+  <h1 class="text-4xl font-bold text-center text-gray-800 mb-5">Upload Your File</h1>
   <div class="bg-white shadow-lg rounded-lg p-6">
     <div *ngIf="!uploadStarted" class="flex flex-col items-center justify-center lg:p-5">
       <!-- File Drop Area -->
@@ -52,11 +52,54 @@
       <p class="text-gray-700 mt-4">Uploading {{ fileToUpload.name }}...</p>
     </div>
     <!-- Upload Finished -->
-    <div *ngIf="uploadFinished" class="flex flex-col items-center justify-center animate-in fade-in duration-1000">
+    <div *ngIf="uploadFinished" class="flex flex-col items-center justify-center p-6 animate-fade-in-up">
-      <img class="w-16 mb-3" src="./assets/circle-check-solid.svg">
+      <div class="flex items-center justify-center rounded-full p-2 border-4 border-indigo-500">
-      <p class="text-gray-700 mb-3">File uploaded successfully!</p>
+        <img class="w-16" [ngClass]="{'animate-in spin-in-1 duration-1000': uploadFinished}" src="./assets/circle-check-solid.svg" alt="Success">
-      <button class="btn btn-primary w-full max-w-xs">Upload Another File</button>
+      </div>
+
+      <h3 class="text-lg font-semibold mt-3">File uploaded successfully!</h3>
+
+      <div class="flex flex-wrap mt-5 mb-5">
+        <div class="w-full px-4">
+          <div class="grid grid-cols-2 gap-4 items-center">
+            <div class="text-gray-600 text-right">File ID:</div>
+            <div>166554</div>
+
+            <div class="text-gray-600 text-right">Material:</div>
+            <div>Aluminum & Plastic</div>
+
+            <div class="text-gray-600 text-right">Color:</div>
+            <div>Black/Silver</div>
+
+            <div class="text-gray-600 text-right">Dimensions:</div>
+            <div>15 x 15 x 25 cm</div>
+
+            <div class="text-gray-600 text-right">Weight:</div>
+            <div>1.2 kg</div>
+
+            <div class="text-gray-600 text-right">Power:</div>
+            <div>10W LED (included)</div>
+
+            <div class="text-gray-600 text-right">Brightness:</div>
+            <div>700 lumens</div>
+
+            <div class="text-gray-600 text-right">Warranty:</div>
+            <div>2 years</div>
+          </div>
+        </div>
+      </div>
+
+
+
+      <p class="text-sm text-gray-500 mt-1">Your file is now securely stored on our servers.</p>
+
+      <div class="mt-4 flex flex-col w-full items-center">
+        <button class="btn btn-primary w-full max-w-xs">Upload Another File</button>
+        <button class="btn btn-outline btn-secondary mt-2 w-full max-w-xs">Download a file</button>
+      </div>
+      <a href="#" class="link link-primary mt-4">Manage your uploads</a>
     </div>
+
   </div>
 </div>
 <!-- Invisible SVGs to prevent lazy loading -->

frontend/src/app/upload/upload.component.ts

@@ -1,5 +1,5 @@
 import {Component, ElementRef, ViewChild} from '@angular/core';
-import {DecimalPipe, NgIf} from "@angular/common";
+import {DecimalPipe, NgClass, NgIf} from "@angular/common";
 import {FormatFileSizePipePipe} from "../format-file-size-pipe.pipe";
 import {FormsModule} from "@angular/forms";
 import axios, {AxiosProgressEvent} from "axios";
@@ -12,7 +12,8 @@ import { DevelopmentStore } from '../../store/DevelopmentStore';
     NgIf,
     FormatFileSizePipePipe,
     FormsModule,
-    DecimalPipe
+    DecimalPipe,
+    NgClass
   ],
   templateUrl: './upload.component.html',
   styleUrl: './upload.component.scss'
@@ -96,6 +97,7 @@ export class UploadComponent {
       axios.post(this.developmentStore.getBaseUrl() + 'api/v1/upload', formData, config)
       .then(response => {
         console.log('Upload completed successfully:', response.data);
+        console.log(response.data);
         this.uploadFinished = true;
       })
       .catch(error => {