add scroll top

src/app/app.component.html

 <loading-spinner hidden></loading-spinner>
 <router-outlet />
+

src/app/app.module.ts

@@ -32,6 +32,8 @@ import { ProjectFAQComponent } from './pages/project-faq/project-faq.component';
 import { PsmStartComponent } from './pages/psm-start/psm-start.component';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { AccessDeniedComponent } from './pages/access-denied/access-denied.component';
+import { ScrollTopModule } from 'primeng/scrolltop';
+
 
 @NgModule({
   declarations: [
@@ -54,6 +56,7 @@ import { AccessDeniedComponent } from './pages/access-denied/access-denied.compo
     CoreModule,
     CustomersModule,
     SharedModule,
+    ScrollTopModule,
     NgxPaginationModule,
     BrowserAnimationsModule, // Required for toast animations
     ToastrModule.forRoot({

src/app/projects/components/modals/add-attachment-modal/add-attachment-modal.component.html

@@ -18,7 +18,7 @@
         />
       </div>
 
-      <div class="mb-3 col-8 offset-1">
+      <div class="mb-3 col-7 ">
         <label for="attachmentDescription" class="form-label">الوصف</label>
         <textarea
           [cols]="4"
@@ -37,7 +37,28 @@
         [(ngModel)]="item.file"  required />
       </div>
       
+        <p-fileUpload 
+        class="col-10  offset-1"
+        [customUpload]="true"
+        (uploadHandler)="onFileSelected($event)"
+        [multiple]="false"
+        
+        maxFileSize="1000000"
+        chooseLabel=" اختر ملف "
+        uploadLabel=" تحميل "
+        cancelLabel=" إلغاء "
+        >
+                <ng-template pTemplate="content">
+                    <ul *ngIf="uploadedFiles.length">
+                        <li *ngFor="let file of uploadedFiles">
+                            {{ file.name }} - {{ file.size }} bytes
+                        </li>
+                    </ul>
+                </ng-template>
+        </p-fileUpload>
+
       </div>
+
       <div class="row">
       <button
         [disabled]="form.invalid"

src/app/projects/components/modals/add-attachment-modal/add-attachment-modal.component.ts

@@ -13,6 +13,8 @@ import { ProjectService } from '../../../services/project.service';
 })
 export class AddAttachmentModalComponent {
   @Input() projectId :number 
+  uploadedFiles: any[] = [];
+  totalSize=0
   @Output() itemAdded= new EventEmitter<void>();
 
   item  : AddAttachmentRequest 
@@ -53,11 +55,41 @@ export class AddAttachmentModalComponent {
     })
   }
 
-  onFileSelected(event: Event): void {
-    const input = event.target as HTMLInputElement;
-    if (input.files?.length) {
-      this.selectedFile = input.files[0];
+
+  // Method to handle file selection
+  onFileSelected(event: any): void {
+    const files = event.files;
+    this.totalSize = files.reduce((acc: number, file: File) => acc + file.size, 0);
+    if (files.length > 0) {
+      this.selectedFile = files[0]; // Set the selected file
+    }
+  }
+
+  // Method to handle file upload
+  onTemplatedUpload(event: { files: File[] }): void {
+    if (!this.selectedFile) {
+      return;
+    }
+  }
+
+  choose(event: any, chooseCallback: Function): void {
+    chooseCallback();
+  }
+
+  uploadEvent(uploadCallback: Function): void {
+    uploadCallback();
+  }
+
+  onRemoveTemplatingFile(event: any, file: any, removeFileCallback: Function, index: number): void {
+    removeFileCallback(index);
   }
+  // File size formatting helper
+  formatSize(bytes: number): string {
+    if (bytes === 0) return '0 Bytes';
+    const k = 1024;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
   } 
     onClose():void {
     this.activeModal.close();

src/app/projects/pages/financial-spending/financial-spending.component.html

@@ -98,3 +98,7 @@
       </div>
     </div>
   </div>
+
+  <card-skeleton *ngif="!spends">
+
+  </card-skeleton>
\ No newline at end of file

src/app/projects/pages/project-details/project-details.component.html

@@ -120,4 +120,6 @@
 
 </div>
 
+<card-skeleton *ngIf="!project" class="col-10">
 
+</card-skeleton>  
\ No newline at end of file

src/app/projects/projects.module.ts

 import {  NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { FileUploadModule } from 'primeng/fileupload';
 import { TimelineModule } from 'primeng/timeline';
 import { ProjectItemComponent } from './components/project-item/project-item.component';
 import { ProjectListComponent } from './pages/project-list/project-list.component';
@@ -54,6 +55,9 @@ import { EditFinancialModalComponent } from './components/edit-financial-modal/e
 import { RemoveFinancialModalComponent } from './components/remove-financial-modal/remove-financial-modal.component';
 import { CardModule } from 'primeng/card';
 import { ButtonModule } from 'primeng/button';
+
+import { BadgeModule } from 'primeng/badge';
+
 import { ProgressBarModule } from 'primeng/progressbar';
 @NgModule({
   declarations: [
@@ -122,6 +126,8 @@ import { ProgressBarModule } from 'primeng/progressbar';
     ReactiveFormsModule ,
     SharedModule,
     SkeletonModule,
+    FileUploadModule,
+    BadgeModule,
     NgbTypeaheadModule
   ]
 })

src/app/shared/componenets/card-skeleton/card-skeleton.component.html

-<div class="card shadow mb-4 col-8 offset-2" *ngIf="!steps">
+<div class="card shadow mb-4 col-8 offset-2">
     <div class="card-header py-3">
         <div class="row align-items-center">
           <div class="col-auto">

src/app/shared/shared.module.ts

@@ -35,7 +35,8 @@ import { SkeletonModule } from 'primeng/skeleton';
   ],
   imports: [
     CommonModule,  
-    RouterModule 
+    RouterModule ,
+    SkeletonModule
     ],
   exports:[
     HeaderComponent,
@@ -45,7 +46,7 @@ import { SkeletonModule } from 'primeng/skeleton';
     FullnamePipe,
     StateTranslatePipe,
     CardItemComponent,
-    SkeletonModule,
+    CardSkeletonComponent,
     ProgressBarModule,
     LoadingSpinnerComponent
   ],schemas: [CUSTOM_ELEMENTS_SCHEMA]

src/app/shared/sharedLayout/layout/layout.component.css

@@ -8,11 +8,19 @@
 .nav-link, .navbar-brand {
   color: #fff!important;
 }
+
+
+.custom-scrolltop {
+  z-index: 1000; /* Ensure it's above other components */
+}
+
+
 /*--------------------------------------------------------------
 # Main
 --------------------------------------------------------------*/
 #main {
   margin-top: 60px;
+  overflow-y: auto;
   padding: 20px 30px;
   transition: all 0.3s;
 }

src/app/shared/sharedLayout/layout/layout.component.html

@@ -8,5 +8,6 @@
     </div>
     <app-sidebar [isToggled]="isToggled"></app-sidebar>        
     <app-footer [class.maine]="isToggled"></app-footer>
+    <p-scrollTop target="main" styleClass="custom-scrolltop" [threshold]="100" icon="pi pi-arrow-up" />
   
 </div>

src/styles.css

@@ -31,6 +31,7 @@
   background-size: var(--bs-accordion-btn-icon-width);
   transition: var(--bs-accordion-btn-icon-transition);
 }
+
 #toast-container {
   width: 100%;
   top: 30px;
@@ -75,6 +76,39 @@
   background-color: rgba(255, 255, 255, 0.7);
 }
 
+
+/* Override Toastr Styles to Look Like PrimeNG Toast */
+.toast {
+  background: var(--surface-card); /* Matches PrimeNG's background */
+  border: 1px solid var(--surface-border); /* Matches PrimeNG's border */
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
+  border-radius: 4px; /* Rounded corners */
+  color: var(--text-color); /* Matches PrimeNG's text color */
+  font-family: 'Arial', sans-serif; /* Matches PrimeNG's font */
+  margin-bottom: 1rem;
+  padding: 1rem;
+  width: 300px; /* PrimeNG's default width */
+}
+.toast-message {
+  display: flex;
+  align-items: center;
+}
+
+.toast-message .toast-title {
+  font-weight: bold;
+  margin-bottom: 0.5rem;
+}
+
+.toast-message .toast-body {
+  margin: 0;
+}
+
+.toast-close-button {
+  color: var(--text-color-secondary); /* Matches PrimeNG's close button color */
+}
+
+
+
 /*--------------------------------------------------------------
 # General
 --------------------------------------------------------------*/