add all change in now.

UI/src/app/app.config.ts

@@ -31,5 +31,5 @@ export const appConfig: ApplicationConfig = {
   ]
 };
 /*
-ng build --base-href "/FamilyTreeUI/" -c production
+ng build --base-href "/familytreeui/" -c production
 */

UI/src/app/import.com/import.com.html

@@ -0,0 +1,10 @@
+<div>
+<label class="flex mb-2"> Import Excel File</label>
+<p-fileupload #fu mode="basic" chooseLabel="Choose" 
+    chooseIcon="pi pi-upload" name="file" 
+    url="http://localhost:5015/api/FileUpload/UploadFile" 
+    maxFileSize="10000000000" (onUpload)="onUpload($event)" />
+<p-button styleClass="mt-4" label="Upload" (onClick)="fu.upload()" severity="primary" />
+
+
+</div>

UI/src/app/import.com/import.com.ts

@@ -0,0 +1,29 @@
+import { Component } from '@angular/core';
+import { ButtonModule } from 'primeng/button';
+import { FileUploadEvent, FileUploadModule } from 'primeng/fileupload';
+import { MessageService } from 'primeng/api';
+import { FileUpload } from 'primeng/fileupload';
+import { ToastModule } from 'primeng/toast';
+/*
+interface UploadEvent {
+    originalEvent: Event;
+    files: File[];
+}*/
+
+@Component({
+  selector: 'app-import.com',
+  imports: [FileUploadModule, ButtonModule,ToastModule,FileUpload],
+  templateUrl: './import.com.html',
+  styleUrl: './import.com.css'
+})
+export class ImportCom {
+   uploadedFiles: any[] = [];
+  constructor(private messageService: MessageService) {}
+onUpload(event:FileUploadEvent) {
+        for(let file of event.files) {
+            this.uploadedFiles.push(file);
+        }
+
+        this.messageService.add({severity: 'info', summary: 'File Uploaded', detail: ''});
+    }
+}

UI/src/app/login/login.html

@@ -1,5 +1,5 @@
 <div class="flex justify-center items-center h-full">
-  <form [formGroup]="loginForm" (ngSubmit)="onSubmit()" style="max-width: 600px;min-width: 450px;">
+  <form [formGroup]="loginForm" (ngSubmit)="onSubmit()" style="max-width: 600px;min-width: 300px;">
     <p-card>
       <div>
         <img class="border-round" style="width:100%;height:100px;" alt="Logo" src="images/application_image_login.png">

UI/src/app/person/familylist.html

@@ -2,7 +2,7 @@
 <h3>Person List</h3>
 <div>
   <form>
-    <div class="grid grid-cols-4 gap-2">
+    <div class="grid md:grid-cols-4 gap-2">
       <div class="">
         <label for="login">Email</label>
         <input id="login" pInputText name="login" type="text" [(ngModel)]="email"

UI/src/app/person/person.edit.html

@@ -1,7 +1,7 @@
 <div class=" mt-2">
    
     <form [formGroup]="adminuserForm" (ngSubmit)="onSubmit($event)" >        
-        <div class="ml-2 grid grid-cols-2 gap-3 p-2">           
+        <div class="ml-2 grid md:grid-cols-2 gap-3 p-2">           
             <div class="">
                 <label for="lastname1">Surname<strong class="app-require">*</strong></label>
                 <input id="lastname1" pInputText formControlName="lastname" type="text"
@@ -17,11 +17,11 @@
                 <p-select  [options]="sexList" optionLabel="name" optionValue="status" placeholder="Select Gender"
                     formControlName="sex" 
                     [class]="getClassForRequire('inputfield w-full p-inputtext-sm','sex')" 
-                    styleClass="w-full p-inputtext-sm mr-1"></p-select >
+                    class="w-full p-inputtext-sm mr-1"></p-select >
             </div>
              <div class="">
                 <label for="dob" class="flex w-full">DOB</label>               
-                <p-datepicker  ariaLabelledBy="dob" formControlName="dob" dateFormat="dd/mm/yy"></p-datepicker>
+                <p-datepicker  ariaLabelledBy="dob" formControlName="dob"  [iconDisplay]="'input'" [showIcon]="true" dateFormat="dd/mm/yy" ></p-datepicker>
             </div>
             <div class="">
                 <label for="login">Email</label>

UI/src/app/pickperson/pickperson.html

@@ -1,6 +1,6 @@
 <div class="flex-row w-full h-full">
-   <p-table #dt2 [value]="familyList()"  sortMode="multiple"  styleClass="p-datatable-sm"
-      styleClass="p-datatable-sm" responsiveLayout="stack" paginatorDropdownAppendTo="body"  
+   <p-table #dt2 [value]="familyList()"  sortMode="multiple"  
+      class="p-datatable-sm"  paginatorDropdownAppendTo="body"  
       dataKey="id" selectionMode="single" [(selection)]="selectedPerson"
       [paginator]="true" [globalFilterFields]="['lastName', 'firstName', 'sex']"
     [rows]="10" [rowsPerPageOptions]="[5,10, 20,50]"

UI/src/app/staff/staff.component.html

@@ -2,7 +2,7 @@
 <h3>Staff List</h3>
 <div>
   <form>
-    <div class="grid grid-cols-4 gap-2">
+    <div class="grid md:grid-cols-4 gap-2">
       <div class="">
         <label for="login">Email</label>
         <input id="login" pInputText name="login" type="text" [(ngModel)]="email"
@@ -28,8 +28,8 @@
   </form>
 </div>
 <div>
-  <p-table [value]="userList" sortMode="multiple"  styleClass="p-datatable-sm"
-      styleClass="p-datatable-sm" responsiveLayout="stack" [loading]="loading">
+  <p-table [value]="userList" sortMode="multiple"  
+      class="p-datatable-sm" [loading]="loading">
       <ng-template pTemplate="header">
         <tr>       
           <th pSortableColumn="email">Email<p-sortIcon field="email"></p-sortIcon>

UI/src/app/staff/staff.edit.component.html

@@ -3,7 +3,7 @@
       {{getEditText()}}
     </div>
     <form [formGroup]="adminuserForm" (ngSubmit)="onSubmit()" >        
-        <div class="ml-2 grid grid-cols-2 gap-3 p-2">           
+        <div class="ml-2 grid md:grid-cols-2 gap-3 p-2">           
             <div class="">
                 <label for="lastname1">Surname<strong class="app-require">*</strong></label>
                 <input id="lastname1" pInputText formControlName="lastname" type="text"

UI/src/app/toolbar/toolbar.component.ts

@@ -128,6 +128,13 @@ export class ToolbarComponent implements OnInit, OnDestroy {
 
         }
       },
+      {
+        label: 'Import', icon: 'pi pi-users',
+        command: () => {
+          this.router.navigate(['/import']);
+
+        }
+      },
        {
         label: 'Family tree', icon: 'pi pi-users',
         command: () => {