feat: Enhance report model and service to include original filename and file size, update frontend components for improved file metadata display

Author: adamrefaey

backend/src/reports/models/report.model.ts

@@ -60,6 +60,12 @@ export class Report {
   @ApiProperty({ description: 'File path of the report' })
   filePath: string;
 
+  @ApiProperty({ description: 'Original filename of the uploaded file' })
+  originalFilename: string;
+
+  @ApiProperty({ description: 'File size in bytes' })
+  fileSize: number;
+
   @ApiProperty({ description: 'Creation timestamp' })
   createdAt: string;
 

backend/src/reports/reports.controller.ts

@@ -157,18 +157,28 @@ export class ReportsController {
           type: 'string',
           description: 'S3 file path for the report',
         },
+        originalFilename: {
+          type: 'string',
+          description: 'Original filename of the uploaded file',
+        },
+        fileSize: {
+          type: 'number',
+          description: 'Size of the file in bytes',
+        },
       },
       required: ['filePath'],
     },
-    description: 'S3 file path for the report',
+    description: 'S3 file path and metadata for the report',
   })
   @Post()
   async createReport(
     @Body('filePath') filePath: string,
+    @Body('originalFilename') originalFilename: string,
+    @Body('fileSize') fileSize: number,
     @Req() request: RequestWithUser,
   ): Promise<Report> {
     const userId = this.extractUserId(request);
-    return this.reportsService.saveReport(filePath, userId);
+    return this.reportsService.saveReport(filePath, userId, originalFilename, fileSize);
   }
 
   private extractUserId(request: RequestWithUser): string {

backend/src/reports/reports.service.ts

@@ -282,7 +282,20 @@ export class ReportsService {
     }
   }
 
-  async saveReport(filePath: string, userId: string): Promise<Report> {
+  /**
+   * Save a new report to DynamoDB
+   * @param filePath S3 object path of the uploaded file
+   * @param userId User ID of the report owner
+   * @param originalFilename Original filename of the uploaded file
+   * @param fileSize Size of the file in bytes
+   * @returns The saved report
+   */
+  async saveReport(
+    filePath: string,
+    userId: string,
+    originalFilename: string = 'Unknown filename',
+    fileSize: number = 0,
+  ): Promise<Report> {
     if (!filePath) {
       throw new NotFoundException('File URL is required');
     }
@@ -296,6 +309,8 @@ export class ReportsService {
         id: uuidv4(),
         userId,
         filePath,
+        originalFilename,
+        fileSize,
         title: 'New Report',
         bookmarked: false,
         category: '',

frontend/src/common/api/reportService.ts

@@ -75,6 +75,8 @@ export const uploadReport = async (
       `${API_URL}/api/reports`,
       {
         filePath: s3Key,
+        originalFilename: file.name,
+        fileSize: file.size,
       },
       config,
     );

frontend/src/common/models/medicalReport.ts

@@ -53,6 +53,8 @@ export interface MedicalReport {
   summary: string;
   status: ReportStatus;
   filePath: string;
+  originalFilename: string;
+  fileSize: number;
   createdAt: string; // ISO date string
   updatedAt: string; // ISO date string
 }

frontend/src/pages/Reports/ReportDetailPage.scss

@@ -551,28 +551,28 @@
   }
 
   &__comments-section {
-    background-color: #ebecfd;
-    opacity: 0.9;
+    background-color: #F0F2FF;
     border-radius: 16px;
-    padding: 16px;
+    padding: 24px;
     margin-bottom: 16px;
   }
 
   &__comments-title {
     font-family: 'Inter', sans-serif;
-    font-size: 13px;
+    font-size: 18px;
     font-weight: 600;
-    color: #313e4c;
-    margin: 0 0 8px 0;
+    color: #313E4C;
+    margin: 0 0 12px 0;
     letter-spacing: 0.26px;
   }
 
   &__comments-text {
     font-family: 'Inter', sans-serif;
-    font-size: 13px;
-    color: #313e4c;
-    line-height: 20px;
+    font-size: 16px;
+    color: #313E4C;
+    line-height: 24px;
     margin: 0;
+    font-weight: 400;
   }
 
   &__uploaded-file {

frontend/src/pages/Reports/components/OriginalReport.tsx

@@ -8,6 +8,20 @@ interface OriginalReportProps {
 }
 
 const OriginalReport: React.FC<OriginalReportProps> = ({ reportData }) => {
+  // Function to format file size in KB or MB
+  const formatFileSize = (bytes: number): string => {
+    if (bytes < 1024) return bytes + ' B';
+    else if (bytes < 1048576) return Math.round(bytes / 1024) + ' KB';
+    else return (bytes / 1048576).toFixed(1) + ' MB';
+  };
+
+  // Get filename from originalFilename or fall back to file path
+  const filename =
+    reportData.originalFilename || reportData.filePath.split('/').pop() || 'Unknown file';
+
+  // Format file size if available
+  const fileSize = reportData.fileSize ? formatFileSize(reportData.fileSize) : 'Unknown size';
+
   return (
     <div className="report-detail-page__original-report">
       {/* Test results table */}
@@ -45,6 +59,12 @@ const OriginalReport: React.FC<OriginalReportProps> = ({ reportData }) => {
         ))}
       </div>
 
+      {/* Medical Comments Section */}
+      <div className="report-detail-page__comments-section">
+        <h4 className="report-detail-page__comments-title">Medical Comments:</h4>
+        <div className="report-detail-page__comments-text">{reportData.summary}</div>
+      </div>
+
       {/* Uploaded File Section */}
       <div className="report-detail-page__uploaded-file">
         <h4 className="report-detail-page__uploaded-file-title">Uploaded file</h4>
@@ -53,11 +73,9 @@ const OriginalReport: React.FC<OriginalReportProps> = ({ reportData }) => {
             <Icon icon="filePdf" />
           </div>
           <div className="report-detail-page__file-details">
-            <div className="report-detail-page__file-name">
-              {reportData.filePath.split('/').pop() || 'Exam_11_01_2024.pdf'}
-            </div>
+            <div className="report-detail-page__file-name">{filename}</div>
             <div className="report-detail-page__file-info">
-              <span className="report-detail-page__file-size">92 kb</span>
+              <span className="report-detail-page__file-size">{fileSize}</span>
               <span className="report-detail-page__file-separator">•</span>
               <span className="report-detail-page__file-date">
                 Uploaded ({format(new Date(reportData.createdAt), 'MM/dd/yyyy')})