put in new function call

Co-authored-by: and logout too

API/.vscode/launch.json

@@ -0,0 +1,54 @@
+{
+    "version": "0.2.0",
+    "configurations": [
+
+
+        {
+            "name": "C#: FamilyTreeAPI",
+            "type": "coreclr",
+            "request": "launch",
+            "preLaunchTask": "build",
+            "program": "${workspaceFolder}/FamilyTreeAPI/bin/Debug/net10.0/FamilyTreeAPI.dll",
+            "args": [],
+            "cwd": "${workspaceFolder}",
+            "stopAtEntry": false,
+            "console": "internalConsole",
+            
+            "env": {
+                "ASPNETCORE_ENVIRONMENT": "Development",
+                "ASPNETCORE_URLS": "http://localhost:5019"
+            },
+             "serverReadyAction": {
+                "action": "openExternally",
+                "pattern": "\\bNow listening on:\\s+(https?://\\S+)",
+                "uriFormat": "%s/swagger/index.html"
+            },
+           
+            "sourceFileMap": {
+                "/Views": "${workspaceFolder}/Views"
+            },
+            
+},
+{
+            "name": ".NET Core Launch (web) - Release",
+            "type": "coreclr",
+            "request": "launch",
+            "preLaunchTask": "publish",
+            "program": "${workspaceFolder}/FamilyTreeAPI/bin/Release/net10.0/linux-x64/FamilyTreeAPI.dll",
+            "serverReadyAction": {
+                "action": "openExternally",
+                "pattern": "listening on:\\s+(https?://\\S+)",
+                "uriFormat": "%s/swagger/index.html"
+            },
+            "env": {
+                "ASPNETCORE_ENVIRONMENT": "Production",
+                "ASPNETCORE_URLS": "https://localhost:5019"
+            },
+            "cwd": "${workspaceFolder}"
+        }
+
+            
+        
+         
+    ]
+}

API/.vscode/tasks.json

@@ -0,0 +1,31 @@
+{
+	"version": "2.0.0",
+	"tasks": [
+        {
+            "label": "build",
+            "command": "dotnet",
+            "type": "shell",
+            "args": [
+                "build",
+                "${workspaceFolder}/FamilyTreeAPI/FamilyTreeAPI.csproj",
+                "/property:GenerateFullPaths=true",
+                "/consoleloggerparameters:NoSummary"
+            ],
+            "problemMatcher": "$msCompile"
+        },
+          {
+            "label": "publish",
+            "command": "dotnet",
+            "type": "process",
+            "args": [
+                "publish",
+                "${workspaceFolder}/FamilyTreeAPI/FamilyTreeAPI.csproj",
+                "-c",
+                "Release"
+            ],
+            "problemMatcher": "$msCompile"
+        },
+
+       
+    ]
+}

API/FamilyTreeAPI.sln

@@ -1,5 +1,4 @@
-
-Microsoft Visual Studio Solution File, Format Version 12.00
+Microsoft Visual Studio Solution File, Format Version 12.00
 # Visual Studio Version 17
 VisualStudioVersion = 17.7.34202.233
 MinimumVisualStudioVersion = 10.0.40219.1

API/FamilyTreeAPI/Controllers/FileUploadController.cs

@@ -3,6 +3,7 @@ using FamilyTreeAPI.Repository;
 
 namespace FamilyTreeAPI.Controllers;
 
+using DocumentFormat.OpenXml.Drawing.Charts;
 using FamilyTreeAPI.Interface;
 using Microsoft.AspNetCore.Mvc;
 using Microsoft.Extensions.Primitives;
@@ -110,14 +111,44 @@ public class FileUploadController : ControllerBase
         return Ok(ret);
     }
 
+    [HttpPost("[action]")]
+    public async Task<IActionResult> DownloadPersonPhotoById(DeleteCriteria<int> criteria)
+    {
 
+        var result = await _personPhoto.DownloadPersonPhotoById(criteria.Id);
+        if (result.StatusCode > 0)
+            return File(result.Data.Content, result.Data.ContentType, result.Data.FileName);
+        else
+            return NotFound("not found image");
+    }  
     [HttpPost("[action]")]
     public async Task<IActionResult> DownloadPersonPhoto(DownloadFileCriteria criteria)
     {
 
-        var result = await _personPhoto.DownloadPersonPhoto(criteria.Id, criteria.FileName);
-
+        var result = await _personPhoto.DownloadPersonPhotoPerson(criteria.Id,criteria.PhotoType ,criteria.FileName);
+        if (result.StatusCode > 0)
             return File(result.Data.Content, result.Data.ContentType, result.Data.FileName);
+        else
+            return NotFound("not found image");
+    }
+    [HttpPost("[action]")]
+    public async Task<IActionResult> DownloadPersonPhoto64(DownloadFileCriteria criteria)
+    {
+
+        var result = await _personPhoto.DownloadPersonPhotoPerson(criteria.Id,criteria.PhotoType ,criteria.FileName);
+        if (result.StatusCode > 0)
+        {
+            byte[] file64 = result.Data.Content;
+            string rval = Convert.ToBase64String(file64);
+            ResultModel<string> retval = new() {
+                Data = rval,
+                StatusCode = 1,
+                Message = ""
+            };
+            return Ok(retval);
+          }
+        else
+            return NotFound("not found image");
     }
     [HttpPost("[action]")]
     public async Task<ActionResult> DeletePersonPhoto(DeleteFileCriteria criteria)
@@ -127,8 +158,18 @@ public class FileUploadController : ControllerBase
         if ( criteria.Id > 0)
         {
 
-            ret = await _personPhoto.DeletePersonPhoto(criteria.Id);
+            ret = await _personPhoto.DeletePersonPhoto(criteria.Id, criteria.PhotoType);
         }
         return Ok(ret);
     }
+    [HttpPost("[action]")]
+    public async Task<ActionResult> DeletePersonPhotoById(DeleteCriteria<int> criteria)
+    {
+
+        ResultModel<int> ret = new();
+    
+        ret = await _personPhoto.DeletePersonPhotoById(criteria.Id);
+        
+        return Ok(ret);
+    }
 }

API/FamilyTreeAPI/Controllers/PersonController.cs

@@ -14,6 +14,7 @@ namespace FamilyTreeAPI.Controllers
         {
             _repo = repo;
         }
+        
         [HttpPost("[action]")]
         public async Task<IActionResult> UploadImage(IFormFile file)
         {

API/FamilyTreeAPI/Controllers/UsersController.cs

@@ -37,8 +37,25 @@ public class UsersController : ControllerBase
     public async Task<IActionResult> LoginApiAD([FromBody] AuthenticateRequest model)
     {
         string remoteIpAddress = HttpContext.Connection.RemoteIpAddress?.ToString();
-        var response = await _userService.LoginApiAD(model, remoteIpAddress);
-        return Ok(response);
+                    var rval = await _userService.LoginApiAD(model, remoteIpAddress);
+          if (rval.Data  != null && rval.Data.Token != null)
+            {
+                // Configure cookie options
+
+                var cookieOptions = new CookieOptions
+                {
+                    HttpOnly = true,                  // Blocks client-side JavaScript reading/theft
+                    Secure = false,                    // Requires HTTPS connections
+                    SameSite = SameSiteMode.Unspecified,   // Prevents CSRF attacks
+                    Expires = DateTimeOffset.UtcNow.AddDays(1), // Match your token lifespan
+                    Path = "/"                        // Accessible across entire domain structure
+                };
+
+                // Write cookie into response headers
+                Response.Cookies.Append("token", rval.Data.Token, cookieOptions);
+            }
+            return Ok(rval);
+
     }
 
     [HttpPost("[action]")]
@@ -51,6 +68,14 @@ public class UsersController : ControllerBase
         string token = Request.Headers["Authorization"].FirstOrDefault()?.Split(" ").Last();
         string remoteIpAddress = Request.HttpContext.Connection.RemoteIpAddress.ToString();
         var response = await _userService.Logout(token, currentUser, remoteIpAddress);
+          Response.Cookies.Delete("token", new CookieOptions
+            {
+                HttpOnly = true,
+                Secure = false,
+                SameSite = SameSiteMode.Unspecified,
+                    Path = "/"
+            });
+
         return Ok(response);
     }
 

API/FamilyTreeAPI/Dockerfile

@@ -3,7 +3,7 @@
 # This stage is used when running from VS in fast mode (Default for Debug configuration)
 #FROM mcr.microsoft.com/dotnet/aspnet:9::.0 AS base
 ARG BUILD_CONFIGURATION=Release
-FROM mcr.microsoft.com/dotnet/sdk:9.0 AS build
+FROM mcr.microsoft.com/dotnet/sdk:10.0 AS build
 WORKDIR /src
 COPY ["FamilyTreeAPI/FamilyTreeAPI.csproj", "FamilyTreeAPI/"]
 RUN dotnet restore "./FamilyTreeAPI/FamilyTreeAPI.csproj"
@@ -31,7 +31,7 @@ FROM build AS publish
 RUN dotnet publish "./FamilyTreeAPI.csproj" -c Release -o /app/publish /p:UseAppHost=false
 
 # This stage is used in production or when running from VS in regular mode (Default when not using the Debug configuration)
-FROM mcr.microsoft.com/dotnet/aspnet:9.0 AS base
+FROM mcr.microsoft.com/dotnet/aspnet:10.0 AS base
 WORKDIR /app
 ENV ASPNETCORE_HTTP_PORTS=8080
 EXPOSE 8080

API/FamilyTreeAPI/Entities/FileContent.cs

@@ -15,16 +15,19 @@ public class DownloadFileCriteria
 {
     public string FileName { get; set; }
     public int Id { get; set; }
+
+    public int PhotoType {get; set;}
 }
 public class UploadCriteria
 {
     public string FileName { get; set; }
     public int PersonId { get; set; }
-  
+    public int PhotoType {get; set;}
     public IFormFile File { get; set; }
 }
 public class DeleteFileCriteria
 {
     public int Id { get; set; }
     public string Filename { get; set; }
+     public int PhotoType {get; set;}
 }

API/FamilyTreeAPI/Entities/PersonPhotoDto.cs

@@ -1,5 +1,12 @@
 namespace FamilyTreeAPI.Entities;
 
+
+//photo Type string number
+public enum enumPhotoType
+{
+    Profile = 1,
+    Other = 2
+}
 public class PersonPhotoDto
 {
     public int Id { get; set; }

API/FamilyTreeAPI/FamilyTreeAPI.csproj

@@ -1,5 +1,4 @@
 <Project Sdk="Microsoft.NET.Sdk.Web">
-
   <PropertyGroup>
     <TargetFramework>net10.0</TargetFramework>
     <Nullable>enable</Nullable>
@@ -7,28 +6,36 @@
     <DockerDefaultTargetOS>Linux</DockerDefaultTargetOS>
 	<PublishSingleFile>true</PublishSingleFile>
     <DockerComposeProjectPath>..\docker-compose.dcproj</DockerComposeProjectPath>
+    <AllowMissingPrunePackageData>true</AllowMissingPrunePackageData>
   </PropertyGroup>
 
-
-
   <ItemGroup>
-    <PackageReference Include="HotChocolate.AspNetCore" Version="16.0.0" />
-    <PackageReference Include="HotChocolate.Data.EntityFramework" Version="16.0.0" />
+    <PackageReference Include="HotChocolate.AspNetCore" Version="16.6.1" />
+    <PackageReference Include="HotChocolate.Data.EntityFramework" Version="16.6.1" />
     <PackageReference Include="HotChocolate.Pagination.EntityFramework" Version="14.3.1" />
-    <PackageReference Include="Microsoft.AspNetCore.Authentication.JwtBearer" Version="10.0.7" />
-    <PackageReference Include="Microsoft.EntityFrameworkCore" Version="10.0.7" />
-    <PackageReference Include="Microsoft.EntityFrameworkCore.Design" Version="10.0.7">
+    <PackageReference Include="Microsoft.AspNetCore.Authentication.JwtBearer" Version="10.0.11" />
+    <PackageReference Include="Microsoft.EntityFrameworkCore" Version="10.0.11" />
+    <PackageReference Include="Microsoft.EntityFrameworkCore.Design" Version="10.0.11">
       <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
       <PrivateAssets>all</PrivateAssets>
     </PackageReference>
-    <PackageReference Include="Microsoft.EntityFrameworkCore.Tools" Version="10.0.7">
+    <PackageReference Include="Microsoft.EntityFrameworkCore.Tools" Version="10.0.11">
       <PrivateAssets>all</PrivateAssets>
       <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
     </PackageReference>
     <PackageReference Include="Microsoft.VisualStudio.Azure.Containers.Tools.Targets" Version="1.23.0" />
-    <PackageReference Include="Npgsql.EntityFrameworkCore.PostgreSQL" Version="10.0.1" />
+    <PackageReference Include="Npgsql.EntityFrameworkCore.PostgreSQL" Version="10.0.3" />
     <PackageReference Include="SpreadsheetLight" Version="3.5.0" />
-    <PackageReference Include="Swashbuckle.AspNetCore" Version="10.1.7" />
+    <PackageReference Include="Swashbuckle.AspNetCore" Version="10.2.3" />
+    <PackageReference Include="System.Drawing.Common" Version="10.0.11" />
   </ItemGroup>
 
+<ItemGroup>
+  <Content Update="appsettings.json">
+    <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+  </Content>
+  <Content Update="appsettings.Development.json">
+    <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+  </Content>
+</ItemGroup>
 </Project>

API/FamilyTreeAPI/Helper/Helpers.cs

@@ -2,6 +2,12 @@
 {
     public class Helpers
     {
+        public static string GetFileExtension(string fileName)
+        {
+            string result = System.IO.Path.GetExtension(fileName);
+
+            return result;
+        }
         public static string GetFileContent(string extension)
         {
             string contentType = "";

API/FamilyTreeAPI/Interface/IPersonPhoto.cs

@@ -5,8 +5,9 @@ namespace FamilyTreeAPI.Interface;
 public interface IPersonPhoto
 {
     Task<ResultModel<int>> SaveAsync(UploadCriteria criteria);
-    Task<ResultModel<FileContent>> DownloadPersonPhoto(int id, string? filename);
-
-    Task<ResultModel<int>> DeletePersonPhoto(int id);
+    Task<ResultModel<FileContent>> DownloadPersonPhotoPerson(int personId, int photoType, string filename);
+ Task<ResultModel<FileContent>> DownloadPersonPhotoById(int id);
+    Task<ResultModel<int>> DeletePersonPhoto(int id, int photoType);
+     Task<ResultModel<int>> DeletePersonPhotoById(int id);
     Task<ResultModel<List<PersonPhotoDto>>> LoadPersonPhoto(int personId);
 }

API/FamilyTreeAPI/Program.cs

@@ -4,7 +4,6 @@ using Microsoft.EntityFrameworkCore.Infrastructure;
 using Microsoft.EntityFrameworkCore.Storage;
 using Microsoft.IdentityModel.Tokens;
 using System.Text;
-using DocumentFormat.OpenXml.Office2010.Drawing.Charts;
 using FamilyTreeAPI.Authorization;
 using FamilyTreeAPI.Entities;
 using FamilyTreeAPI.GraphQL.Query;
@@ -14,6 +13,15 @@ using FamilyTreeAPI.Repository;
 
 var builder = WebApplication.CreateBuilder(args);
 
+builder.Logging.ClearProviders();
+builder.Logging.AddConsole();
+builder.Logging.AddDebug();
+// Explicitly register the base paths for Linux container execution
+builder.Configuration
+    .SetBasePath(AppContext.BaseDirectory) // <-- Pulls from wherever the binary sits
+    .AddJsonFile("appsettings.json", optional: false, reloadOnChange: true)
+    .AddJsonFile($"appsettings.{builder.Environment.EnvironmentName}.json", optional: true, reloadOnChange: true)
+    .AddEnvironmentVariables();
 // Add services to the container.
 #region Services
 var services = builder.Services;
@@ -23,8 +31,10 @@ services.AddControllers();
 services.AddEndpointsApiExplorer();
 services.AddSwaggerGen();
 string skey = "Super Secret SIGN AND VERIFY JWT TOKENS";
+
+           
 var appSettingsSection = builder.Configuration.GetSection("AppSettings");
-if (appSettingsSection != null)
+if (appSettingsSection.Exists())
 {
     services.Configure<AppSettings>(appSettingsSection);
     var appSettings = appSettingsSection.Get<AppSettings>();
@@ -32,10 +42,13 @@ if (appSettingsSection != null)
         skey = appSettings.Secret;
     else
     {
-        skey = builder.Configuration.GetValue<string>("AppSettings:Secret");
+      string  tkey = builder.Configuration.GetValue<string>("AppSettings:Secret") ?? string.Empty;
+      if (!string.IsNullOrEmpty(tkey))
+            skey = tkey;
     }
 }
 
+
 var key = Encoding.ASCII.GetBytes(skey);
 
 services.AddAuthentication(x =>
@@ -122,9 +135,18 @@ using (var scope = app.Services.CreateScope())
                 {
                     //if (!databaseCreator.Exists())
                     try
+                    {
+                        // Check if database exists
+                        if (!databaseCreator.Exists()) 
+                        {
+                            databaseCreator.Create();
+                        }
+                        
+                        if (!databaseCreator.HasTables())
                         {
                             databaseCreator.CreateTables();
                         }
+                    }
                     catch 
                     {
                         //continue
@@ -165,6 +187,17 @@ app.Run();
 #endregion
 
 /*
+
+<ItemGroup>
+  <Content Update="appsettings.json">
+    <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+  </Content>
+  <Content Update="appsettings.Development.json">
+    <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+  </Content>
+</ItemGroup>
+</Project>
+
  https://www.youtube.com/watch?v=WQFx2m5Ub9M
 
 
@@ -180,14 +213,43 @@ PM> Scaffold-DbContext "Host=postgresdb;Port=5432;database=FamilyTreeDB;user id=
 https://www.youtube.com/watch?v=HnXA8RI7Tvc
 
 query {
-  family {
+  persons {
         nodes{
         id
-        firstname
-        lastname
+        firstName
+        sex
         email
         
         }
     }
   }
+
+  dotnet --list-sdks
+
+In the VS Code Explorer, click and open your <ProjectName>.csproj file.
+Locate the <TargetFramework> tag inside the <PropertyGroup> block.
+Change the value to your desired version (e.g., change net11.0 or net9.0 to net10.0
+
+now run to see out of date
+
+dotnet list package --outdated
+
+dotnet tool uninstall --global dotnet-outdated
+dotnet tool install --global dotnet-outdated-tool
+
+//update the outdate
+dotnet outdated -u
+
+update the package
+dotnet add package <Package_Name>
+
+Open the .vscode folder in your workspace and select launch.json.
+Look for lines containing your old framework directory string (e.g., /bin/Debug/net8.0/).
+Update those paths to reflect your new version (e.g., /bin/Debug/net9.0/).
+
+clear and rebuild 
+
+dotnet clean
+dotnet restore
+dotnet build
 */

API/FamilyTreeAPI/Properties/launchSettings.json

@@ -8,35 +8,17 @@
         "ASPNETCORE_ENVIRONMENT": "Development"
       },
       "dotnetRunMessages": true,
-      "applicationUrl": "http://localhost:5016",
-      "applicationUrl1": "http://192.168.8.188:5015"
+      "applicationUrl": "http://localhost:5016"
+     
     },
-    "IIS Express": {
-      "commandName": "IISExpress",
+    "http": {
+      "commandName": "Project",
       "launchBrowser": true,
       "launchUrl": "swagger",
-      "environmentVariables": {
-        "ASPNETCORE_ENVIRONMENT": "Development"
-      }
-    },
-    "Container (Dockerfile)": {
-      "commandName": "Docker",
-      "launchBrowser": true,
-      "launchUrl": "{Scheme}://{ServiceHost}:{ServicePort}/swagger",
-      "environmentVariables": {
-        "ASPNETCORE_HTTP_PORTS": "8080"
-      },
-      "publishAllPorts": true,
-      "useSSL": false
-    }
+      "applicationUrl": "http://localhost:5000"
     },
+   
   "$schema": "https://json.schemastore.org/launchsettings.json",
-  "iisSettings": {
-    "windowsAuthentication": false,
-    "anonymousAuthentication": true,
-    "iisExpress": {
-      "applicationUrl": "http://localhost:4559",
-      "sslPort": 0
-    }
+  
   }
 }

API/FamilyTreeAPI/Repository/PersonPhotoRepository.cs

@@ -3,6 +3,7 @@ using FamilyTreeAPI.Entities;
 using FamilyTreeAPI.Helper;
 using FamilyTreeAPI.Interface;
 using FamilyTreeAPI.Models;
+using HotChocolate.CostAnalysis.Types;
 using Microsoft.EntityFrameworkCore;
 
 namespace FamilyTreeAPI.Repository
@@ -31,12 +32,12 @@ namespace FamilyTreeAPI.Repository
             dto.PhotoType = model.PhotoType;
             return dto;
         }
-        private PersonPhoto FillModel(PersonPhoto model, int personId, string filename)
+        private PersonPhoto FillModel(PersonPhoto model, int personId, int photoType, string filename)
         {
 
             model.PersonId = personId;
             model.Photo = filename;
-            model.PhotoType = System.IO.Path.GetExtension(filename);
+            model.PhotoType = photoType.ToString(); //System.IO.Path.GetExtension(filename);
 
             return model;
         }
@@ -44,8 +45,10 @@ namespace FamilyTreeAPI.Repository
         {
             int result = default(int);
             int statuscode = 0;
-            string error = "";
-
+            string error = "";//Other
+            string photoType = "2"; //
+            if (criteria.PhotoType > 0)
+                photoType = criteria.PhotoType.ToString();
             HttpContext? httpContext = _httpContext.HttpContext;
             string loginName = "";
             if (httpContext != null)
@@ -63,7 +66,7 @@ namespace FamilyTreeAPI.Repository
             
                     model = new();
                     
-                    model = FillModel(model,criteria.PersonId, formfile.FileName);
+                    model = FillModel(model,criteria.PersonId, criteria.PhotoType,formfile.FileName);
                    
                     using (var stream = new MemoryStream())
                     {
@@ -90,15 +93,50 @@ namespace FamilyTreeAPI.Repository
                 Message = error
             };
         }
-
-        public async Task<ResultModel<FileContent>> DownloadPersonPhoto(int id, string? filename)
+        public async Task<ResultModel<FileContent>> DownloadPersonPhotoById(int Id)
         {
 
             int statusCode = -1;
             string error = "";
+            string extension = "";
             PersonPhoto? model = null;
             FileContent fileContent = new();
-            if (id < 1)
+            try {
+            
+                model = await _context.PersonPhotos.FindAsync(Id);
+                
+
+            if (model != null)
+            {
+                extension = Helpers.GetFileExtension(model.Photo);
+                fileContent.ContentType = Helpers.GetFileContent(extension);
+                fileContent.Content = (byte[])model.ImagePhoto;
+                fileContent.FileName = model.Photo;
+                statusCode = 1;
+            }
+            }
+            catch (Exception e)
+            {
+                error = e.ToString();
+                statusCode = -1;
+            }
+            return new ResultModel<FileContent>()
+            {
+                Data = fileContent,
+                StatusCode = statusCode,
+                Message = error
+            };
+        }
+
+        public async Task<ResultModel<FileContent>> DownloadPersonPhotoPerson(int personId, int photoType, string filename)
+        {
+
+            int statusCode = -1;
+            string error = "";
+            string extension = "";
+            PersonPhoto? model = null;
+            FileContent fileContent = new();
+            if (personId < 1)
             {
                 var rlist = await _context.PersonPhotos.Where(x => x.Photo == filename).ToListAsync();
                 if (rlist != null)
@@ -109,19 +147,26 @@ namespace FamilyTreeAPI.Repository
                     }
                 }
             }
+                 
             else
             {
-                model = await _context.PersonPhotos.FindAsync(id);
+                var rlist = await _context.PersonPhotos.Where (x => x.PersonId == personId && photoType.ToString() == x.PhotoType).ToListAsync();
+                for ( int i = 0; i < rlist.Count; i++)
+                {
+                    model = rlist[i];
+                   
+                    break;
+                }
             }  
 
             if (model != null)
             {
-                fileContent.ContentType = Helpers.GetFileContent(model.PhotoType);
+                extension = Helpers.GetFileExtension(model.Photo);
+                fileContent.ContentType = Helpers.GetFileContent(extension);
                 fileContent.Content = (byte[])model.ImagePhoto;
                 fileContent.FileName = model.Photo;
                 statusCode = 1;
             }
-
             return new ResultModel<FileContent>()
             {
                 Data = fileContent,
@@ -130,21 +175,70 @@ namespace FamilyTreeAPI.Repository
             };
         }
 
-        public async Task<ResultModel<int>> DeletePersonPhoto(int id)
+        public async Task<ResultModel<int>> DeletePersonPhoto(int personId, int photoType)
         {
             int result = default(int);
             int statuscode = 0;
             string error = "";
+            PersonPhoto? model;
             try
             {
-                PersonPhoto? model = await _context.PersonPhotos.FindAsync(id);
-                if (model != null)
+                if (photoType < 1)
                 {
+                    List<PersonPhoto> list = await _context.PersonPhotos.Where ( x => x.PersonId == personId).ToListAsync();
+                    for (int i = 0; i< list.Count; i++)
+                    {
+                        model = list[i];
                         _context.PersonPhotos.Remove(model);
                         await _context.SaveChangesAsync();
                         statuscode = 1;
                     }
                 }
+                else 
+                {
+                    List<PersonPhoto> list = await _context.PersonPhotos.Where ( x => x.PersonId == personId && x.PhotoType == photoType.ToString()).ToListAsync();
+                    for (int i = 0; i< list.Count; i++)
+                    {
+                        model = list[i];
+                        _context.PersonPhotos.Remove(model);
+                        await _context.SaveChangesAsync();
+                        statuscode = 1;
+                    }
+                }
+            }
+            catch (Exception ex)
+            {
+                error = ex.ToString();
+                statuscode = -1;
+            }
+            //var dto = await Task.Run(() => result);
+            return new ResultModel<int>()
+            {
+                Data = result,
+                StatusCode = statuscode,
+                Message = error
+            };
+        }
+
+         public async Task<ResultModel<int>> DeletePersonPhotoById(int id)
+        {
+            int result = default(int);
+            int statuscode = 0;
+            string error = "";
+        
+            try
+            {
+                
+                    PersonPhoto? model = await _context.PersonPhotos.FindAsync(id);
+                    if (model != null)
+                    {
+                        
+                        _context.PersonPhotos.Remove(model);
+                        await _context.SaveChangesAsync();
+                        statuscode = 1;
+                    }
+                
+            }
             catch (Exception ex)
             {
                 error = ex.ToString();

API/FamilyTreeAPI/Repository/PersonRepository.cs

@@ -283,7 +283,7 @@ public partial class PersonRepository : IPerson
                 node.Key = item.Id.ToString();
                 node.Type = type;
                 if (item.Image != null)
-                    node.Data.Image = await LoadPersonImage(item.Image);
+                    node.Data.Image = await LoadPersonImage(item.Id, (int) enumPhotoType.Profile, item.Image);
                
                 node.Icon = "T";  
                 node.StyleClass = getStyleClass(node.Icon);
@@ -319,8 +319,8 @@ public partial class PersonRepository : IPerson
         TreeNode<TreeData> child;
         PersonDto dto;
         Person pe;
-        int fatherId, motherId;
-        fatherId = motherId = 0;
+        int fatherId, motherId, personId;
+        personId = fatherId = motherId = 0;
         string data = person.Sex;
         TreeNode<TreeData> citem;
         string pName = "";
@@ -371,6 +371,7 @@ public partial class PersonRepository : IPerson
                         pName = pe.FirstName;
                         image = pe.Image;
                         key = motherId.ToString();
+                        personId = motherId;
                         data = pe.Sex;
                     }
                 }
@@ -382,6 +383,7 @@ public partial class PersonRepository : IPerson
                         pName = pe.FirstName;
                         image = pe.Image;
                         key = fatherId.ToString();
+                        personId = fatherId;
                         data = pe.Sex;
                     }
                 }
@@ -390,7 +392,7 @@ public partial class PersonRepository : IPerson
                 citem.Data = new();
                 citem.Label = pName;
                 if (image != null)
-                    citem.Data.Image = await LoadPersonImage(image);
+                    citem.Data.Image = await LoadPersonImage(personId, (int) enumPhotoType.Profile, image);
                
                citem.Icon = "P";    
                
@@ -411,7 +413,7 @@ public partial class PersonRepository : IPerson
                     child.Type = type;
                     image = dto.Image;
                     if (image != null)
-                        child.Data.Image = await LoadPersonImage(image);
+                        child.Data.Image = await LoadPersonImage(dto.Id,(int) enumPhotoType.Profile, image);
                     child.Icon = "C";
                     child.StyleClass = getStyleClass(child.Icon);
                     child.Label = dto.FirstName;
@@ -480,12 +482,12 @@ public partial class PersonRepository : IPerson
     /// <param name="fileName"></param>
     /// <param name="familyId"></param>
     /// <param name="base64"></param>
-    private string SaveFile(string fileName, int familyId, string base64)
+    private async Task<string> SaveFile(string fileName, int personId, string base64)
     {
         string path = "";
 
         int statusCode = 0;
-        string error = "";
+      // string error = "";
         string sdate = GetCurrentDateTime();
         string filename, extention;
         filename = extention = "";
@@ -494,14 +496,33 @@ public partial class PersonRepository : IPerson
         string rbase = base64.Substring(first, last - first);
 
         byte[] newBytes = Convert.FromBase64String(rbase);
+        extention = System.IO.Path.GetExtension(fileName);
+        filename = personId + "_" + sdate + extention;
+
+        // Wrap the byte array in a MemoryStream
+        var stream = new MemoryStream(newBytes);
+
+        // Create the IFormFile instance
+        IFormFile file = new FormFile(stream, 0, newBytes.Length, "Profile", filename)
+        {
+            Headers = new HeaderDictionary(),
+            ContentType = "application/octet-stream" // Change to your specific MIME type if known (e.g., "image/jpeg", "application/pdf")
+        };
+        //save to database.
+        UploadCriteria criteria = new();
+        criteria.FileName = filename;
+        criteria.PersonId = personId;
+        criteria.PhotoType = (int) enumPhotoType.Profile;
+        criteria.File = file;
+        var rval = await _personPhoto.SaveAsync(criteria);
+
+       /*
         path = _config["AppSettings:ImageFolder"];
         if (!Directory.Exists(path))
         {
             Directory.CreateDirectory(path);
         }
         
-        extention = System.IO.Path.GetExtension(fileName);
-        filename = familyId + "_" + sdate + extention;
         string fullpath = System.IO.Path.Combine(path, filename);
         /*
          using (var fileStream = new FileStream(fullpath, FileMode.Create))
@@ -520,10 +541,12 @@ public partial class PersonRepository : IPerson
 
         }
         */
+        /*
         using (FileStream fileStream = new FileStream(fullpath, FileMode.Create, FileAccess.Write, FileShare.None))
         {
             fileStream.Write(newBytes, 0, newBytes.Length);
         }
+        */
 
         return filename;
     }
@@ -571,7 +594,7 @@ public partial class PersonRepository : IPerson
                 if (!string.IsNullOrEmpty(container.FileName))
                 {
 
-                    string image = SaveFile(container.FileName, result, container.FormData);
+                    string image = await SaveFile(container.FileName, result, container.FormData);
                     // update the image in table to new 
                     model.Image = image;
                     await _context.SaveChangesAsync();
@@ -587,7 +610,7 @@ public partial class PersonRepository : IPerson
                     result = item.Id;
                     if (!string.IsNullOrEmpty(container.FileName))
                     {
-                        string image = SaveFile(container.FileName, result, container.FormData);
+                        string image = await SaveFile(container.FileName, result, container.FormData);
                         // update the image in table to new 
                         model1.Image = image;
                     }
@@ -714,17 +737,37 @@ public partial class PersonRepository : IPerson
         };
     }
 
-    private async Task<string> LoadPersonImage(string filename)
+    private async Task<string> LoadPersonImage_old(string filename)
     {
         string result = "";
 
         DownloadFileCriteria criteria = new() { FileName = filename };
         var resultModel = await _importPersonRepository.DownloadFile(criteria);
-        if (!string.IsNullOrEmpty((resultModel.Data)))
+        
+        
+        if (!string.IsNullOrEmpty(resultModel.Data))
             result = "data:image/png;base64," + resultModel.Data;
         return result;
     }
 
+    private async Task<string> LoadPersonImage(int personId, int photoType, string filename)
+    {
+        string result = "";
+
+      //  DownloadFileCriteria criteria = new() { FileName = filename };
+       
+        var resultModel = await _personPhoto.DownloadPersonPhotoPerson(personId, photoType , filename);
+        if (resultModel.StatusCode > 0)
+        {
+        
+        string base64String = Convert.ToBase64String(resultModel.Data.Content);
+        
+            if (!string.IsNullOrEmpty(base64String))
+                result = "data:image/png;base64," + base64String;
+        }
+        return result;
+    }
+
     public ResultModel<int> DeleteUploadFile(DeleteFileCriteria criteria)
     {
         int result = -1;

API/FamilyTreeAPI/Repository/Seed.cs

@@ -66,7 +66,6 @@ public class Seed
                 var conn = _context.Database.GetDbConnection();
                 try
                 {
-
                     conn.Open();
                     var command = conn.CreateCommand();
                     command.CommandText = sptext;

API/FamilyTreeAPI/appsettings.json

@@ -2,11 +2,11 @@
 
   "AppSettings": {
     "Secret": "Super Secret SIGN AND VERIFY JWT TOKENS, BEARER TOKEN USE WHEN CALLING THIS API.",
-    "SQLConnectionString": "host=localhost;port=5432;database=FamilyTreeDB;username=postgres;password=Positive~1;",
-    "SQLConnectionString_vm": "host=192.168.1.240;port=5432;database=FamilyTreeDB;username=postgres;password=Positive~1;",
+    "iSQLConnectionString_i": "host=localhost;port=5432;database=familytreedb;username=postgres;password=Positive~1;",
+    "SQLConnectionString": "host=127.0.0.1;port=5432;database=familytreedb;username=postgres;password=Positive~1;",
 
-    "ImageFolder": "c:\\temp\\Family",
-    "ImportFolder":  "c:\\temp"
+    "ImageFolder": "/temp/Family",
+    "ImportFolder":  "/temp"
 
   },
   "Logging": {
@@ -17,11 +17,12 @@
     }
   },
   "AllowedHosts": "*",
-  "Kestrel_not_use": {
+   
+  "Kestrel": {
     "Endpoints": {
       "Http": {
-        "Url": "http://*:5015"
-      }
+        "Url": "http://localhost:5016"
       }
     }
 }
+}

API/FamilyTreeAPI/familytreeapp.conf

@@ -14,13 +14,19 @@
 			  proxy_set_header   X-Forwarded-Proto $scheme;
 		}
 	  
+	    location / {
+	    	return 301 /familytreeui/; #if same one redirect to /familytreeui/
+	    }
+
 	    location /familytreeui {
 	    	return 301 /familytreeui/; #if same one redirect to /familytreeui/
 	    }
+
 	    location /familytreeui/ {
-			root /var/www/familytree/; #path must exist like /var/www/familytree/familytreeui and /var/www/familytree/api folder.
+			#root /var/www/familytree/; #path is real must exist like /var/www/familytree/familytreeui and /var/www/familytree/api folder.
+			alias /var/www/familytree/ui/; #location does not to match. but angular index baseurl must same as location.
 			#index index.html;
-			try_files $uri $uri/ /index.html;
+			try_files $uri $uri/ /familytreeui/index.html /index.html;
 		}
 
 

UI/package.json

@@ -23,35 +23,35 @@
   "private": true,
   "packageManager": "npm@11.6.4",
   "dependencies": {
-    "@angular/common": "^21.0.0",
-    "@angular/compiler": "^21.0.0",
-    "@angular/core": "^21.0.0",
-    "@angular/forms": "^21.0.0",
-    "@angular/platform-browser": "^21.0.0",
-    "@angular/router": "^21.0.0",
-    "@ngrx/effects": "^21.0.1",
-    "@ngrx/store": "^21.0.1",
-    "@ngrx/store-devtools": "^21.0.1",
-    "@primeuix/themes": "^2.0.2",
+    "@angular/common": "^22.0.0",
+    "@angular/compiler": "^22.0.0",
+    "@angular/core": "^22.0.0",
+    "@angular/forms": "^22.0.0",
+    "@angular/platform-browser": "^22.0.0",
+    "@angular/router": "^22.0.0",
+    "@ngrx/effects": "^22.0.0",
+    "@ngrx/store": "^22.0.0",
+    "@ngrx/store-devtools": "^22.0.0",
+    "@openng/optimus-ui": "^2.0.2",
     "@tailwindcss/postcss": "^4.1.17",
     "file-saver": "^2.0.5",
     "moment": "^2.30.1",
     "postcss": "^8.5.6",
-    "primeicons": "^7.0.0",
-    "primeng": "^21.0.1",
     "rxjs": "~7.8.0",
     "tailwindcss": "^4.1.17",
-    "tailwindcss-primeui": "^0.6.1",
     "tslib": "^2.3.0",
-    "xlsx": "^0.18.5"
+    "xlsx": "^0.18.5",
+    "@openng/icons": "^1.0.0",
+    "@openng/optimus-ui-themes": "^2.0.2",
+    "@openng/optimus-ui-tailwindcss": "^2.0.2"
   },
   "devDependencies": {
-    "@angular/build": "^21.2.7",
-    "@angular/cli": "^21.2.7",
-    "@angular/compiler-cli": "^21.0.0",
+    "@angular/build": "^22.0.0",
+    "@angular/cli": "^22.0.0",
+    "@angular/compiler-cli": "^22.0.0",
     "@types/file-saver": "^2.0.7",
     "jsdom": "^27.1.0",
-    "typescript": "~5.9.2",
+    "typescript": "~6.0.0",
     "vitest": "^4.0.8"
   }
 }

UI/public/config/appsetting.json

@@ -2,5 +2,7 @@
     "baseUrl1": "http://192.168.8.188:5015",    
     "baseUrl": "http://localhost:5016",   
      "baseUrl_docker": "http://localhost:8080",    
-    "attachment": "http://localhost/document/family"
+    "attachment": "http://localhost/document/family",
+    "username": "kham.vilaythong@gmail.com",
+    "prefill_ps": "passwor"
 }

UI/src/app/app.config.ts

@@ -1,9 +1,9 @@
 import { ApplicationConfig, provideBrowserGlobalErrorListeners ,
   provideAppInitializer} from '@angular/core';
 import { provideRouter, withComponentInputBinding } from '@angular/router';
-import { providePrimeNG } from 'primeng/config';
+import { provideOptimus } from '@openng/optimus-ui/config';
 import { provideHttpClient, withInterceptors } from '@angular/common/http';
-import { ConfirmationService, MessageService } from 'primeng/api';
+import { ConfirmationService, MessageService } from '@openng/optimus-ui/api';
 import { routes } from './app.routes';
 import MyPreset from './mythem';
 import { JwtInterceptor, ErrorInterceptor, initializeApp } from './shares';
@@ -29,13 +29,13 @@ export const appConfig: ApplicationConfig = {
     provideAppInitializer(initializeApp()),
     provideHttpClient(withInterceptors([JwtInterceptor, ErrorInterceptor])),
     provideRouter(routes, withComponentInputBinding()),
-    providePrimeNG({
+    provideOptimus({
         theme: {
             preset: MyPreset,
             options: {
                 cssLayer: {
-                    name: 'primeng',
-                    order: 'theme, base, primeng'
+                    name: 'optimus',
+                    order: 'theme, base, optimus'
                 }
             }
         }

UI/src/app/app.ts

@@ -2,8 +2,8 @@
 import { Component, signal } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 import { ToolbarComponent } from './toolbar/toolbar.component';
-import { ToastModule } from 'primeng/toast';
-import { ConfirmDialogModule } from 'primeng/confirmdialog';
+import { ToastModule } from '@openng/optimus-ui/toast';
+import { ConfirmDialogModule } from '@openng/optimus-ui/confirmdialog';
 @Component({
   selector: 'app-root',
   imports: [RouterOutlet,ToastModule,ToolbarComponent,ConfirmDialogModule],

UI/src/app/attachphoto/add.photo.ts

@@ -1,15 +1,15 @@
 import { ChangeDetectorRef, Component, inject, Inject, OnDestroy, OnInit, signal } from '@angular/core';
-import { DynamicDialogModule, DynamicDialogRef ,DynamicDialogConfig} from 'primeng/dynamicdialog';
+import { DynamicDialogModule, DynamicDialogRef ,DynamicDialogConfig} from '@openng/optimus-ui/dynamicdialog';
 
 import { LookupEdit } from '../models';
 import { UntypedFormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
 import { Subject, Subscription } from 'rxjs';
-import { ConfirmationService, MessageService } from 'primeng/api';
+import { ConfirmationService, MessageService } from '@openng/optimus-ui/api';
 import { LookupService } from '../shares';
 import { CommonModule } from '@angular/common';
-import { CheckboxModule } from 'primeng/checkbox';
-import { InputTextModule } from 'primeng/inputtext';
-import { ButtonModule } from 'primeng/button';
+import { CheckboxModule } from '@openng/optimus-ui/checkbox';
+import { InputTextModule } from '@openng/optimus-ui/inputtext';
+import { ButtonModule } from '@openng/optimus-ui/button';
 @Component({
     selector: 'add-photo',
     imports: [CommonModule, ReactiveFormsModule,

UI/src/app/attachphoto/photolist.html

@@ -16,7 +16,7 @@
                     <th>Id</th>
                     <th pSortableColumn="description">Description<p-sortIcon field="description"></p-sortIcon>
                     </th>
-                  
+                    <th>Photo Type</th>
                     <th>Action</th>
 
                 </tr>
@@ -25,6 +25,7 @@
                 <tr>
                     <td>{{item.id}}</td>
                     <td >{{item.photo}}</td>
+                    <td>{{item.photoType}}</td>
                     <td>
                         
                         <button pButton type="button" icon="pi pi-times"

UI/src/app/attachphoto/photolist.ts

@@ -2,16 +2,16 @@
 import { Component, OnInit, OnDestroy, inject, ChangeDetectorRef, signal, output } from '@angular/core';
 import { catchError, EMPTY, finalize, Subscription } from 'rxjs';
 import { CommonUtilities, HttpUtility, LookupService } from '../shares';
-import { DialogService ,DynamicDialogConfig,DynamicDialogModule, DynamicDialogRef} from 'primeng/dynamicdialog';
-import { ConfirmationService, MessageService } from 'primeng/api';
+import { DialogService ,DynamicDialogConfig,DynamicDialogModule, DynamicDialogRef} from '@openng/optimus-ui/dynamicdialog';
+import { ConfirmationService, MessageService } from '@openng/optimus-ui/api';
 import { AddPhoto } from './add.photo';
 import { PersonPhotoDto } from '../models';
 
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
-import { TableModule } from 'primeng/table';
-import { ButtonModule } from 'primeng/button';
-import { TooltipModule } from 'primeng/tooltip';
+import { TableModule } from '@openng/optimus-ui/table';
+import { ButtonModule } from '@openng/optimus-ui/button';
+import { TooltipModule } from '@openng/optimus-ui/tooltip';
 import { AuthenticationService } from '../user-services';
 import { HttpResponse } from '@angular/common/http';
 import { PersonService } from '../person';
@@ -69,11 +69,11 @@ export class PhotoList implements OnInit, OnDestroy {
   downloadAttachment(id: number): void {
     //GetReportFile
     
-    let typeofCall = "personId_" + id.toString();
+    let typeofCall = "personPhotoId_" + id.toString();
     
-    let criteria:any ={id, fileName:''};
+    let criteria: any = { id };
     this.downloadFile.set(false);
-    this.http.getFileResponse("api/FileUpload/downloadPersonPhoto", criteria).pipe(
+    this.http.getFileResponse("api/FileUpload/DownloadPersonPhotoById", criteria).pipe(
       catchError(err => {
         console.error(err.message);
         return EMPTY;
@@ -128,7 +128,7 @@ doRemove(id: number): void {
   }
   else
   {
-    const deletepersonPhoto$ = this.personService.deletePersonPhotoFile(id);
+    const deletepersonPhoto$ = this.personService.deletePersonPhotoFileById(id);
     this.subscription.add(deletepersonPhoto$.subscribe(
       {
         next: x => {

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

@@ -1,9 +1,9 @@
 import { Component, inject, OnInit } 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';
+import { ButtonModule } from '@openng/optimus-ui/button';
+import { FileUploadEvent, FileUploadModule } from '@openng/optimus-ui/fileupload';
+import { MessageService } from '@openng/optimus-ui/api';
+import { FileUpload } from '@openng/optimus-ui/fileupload';
+import { ToastModule } from '@openng/optimus-ui/toast';
 import { AppSettingService } from '../shares';
 /*
 interface UploadEvent {

UI/src/app/login/login.ts

@@ -5,15 +5,15 @@ import { first } from 'rxjs/operators';
 
 import { AuthenticationService } from '../user-services';
 
-import { ConfirmationService } from 'primeng/api';
+import { ConfirmationService } from '@openng/optimus-ui/api';
 import { Subject, Subscription } from 'rxjs';
 import { CommonModule } from '@angular/common';
-import { CardModule } from 'primeng/card';
+import { CardModule } from '@openng/optimus-ui/card';
 import { ReactiveFormsModule, FormsModule } from '@angular/forms';
-import { ButtonModule } from 'primeng/button';
-import { InputTextModule } from 'primeng/inputtext';
+import { ButtonModule } from '@openng/optimus-ui/button';
+import { InputTextModule } from '@openng/optimus-ui/inputtext';
 
-import { Utils } from '../shares';
+import { AppSettingService, Utils } from '../shares';
 @Component({
     templateUrl: './login.html',
     styleUrl: './login.css',
@@ -29,6 +29,7 @@ export class Login implements OnInit, OnDestroy {
   router = inject(Router);
   authenticationService = inject(AuthenticationService);
   formBuilder = inject(FormBuilder);
+   private appSetting =inject(AppSettingService);
   loading = false;
   homeUrl = "/person";
   submitted = false;
@@ -40,10 +41,11 @@ export class Login implements OnInit, OnDestroy {
   private subscription: Subscription = new Subscription();
 
   constructor() {
-
+    const default_us = this.appSetting.appSetting.username;
+    const pass = this.appSetting.appSetting.prefill_ps;
     this.loginForm = this.formBuilder.group({
-      username: ['kham.vilaythong@gmail.com', Validators.required],
-      password: ['password', Validators.required],
+      username: [default_us, Validators.required],
+      password: [pass, Validators.required],
 
     });
   }

UI/src/app/models/enum.ts

@@ -15,7 +15,10 @@ export enum mState {
   Modified = 1,
   New =2,
 };
-
+export enum enumPhoto {
+  Profile = 1,
+  Other = 2
+}
 export enum userRole {
   Normal = 1,
   Admin = 2,

UI/src/app/mythem.ts

@@ -1,51 +1,41 @@
 
 
 //mypreset.ts
-import { definePreset } from '@primeuix/themes';
-import Aura from '@primeuix/themes/aura';
-import { primitive } from '@primeuix/themes/aura/base';
+import { definePreset } from '@openng/optimus-ui-themes';
+import Aura from '@openng/optimus-ui-themes/aura';
 
 const MyPreset = definePreset(Aura, {
     semantic: {
-        colorScheme: {
-            primitive: {
-                cyan: {
-                    50: '{cyan.50}',
-                    100: '{cyan.100}',
-                    200: '{cyan.200}',
-                    300: '{cyan.300}',
-                   400: '{cyan.400}',
-                    500: '{cyan.500}',
-                   }
-
-            },
         primary: {
-            50: '{zinc.50}',
-            100: '{zinc.100}',
-            200: '{zinc.200}',
-            300: '{zinc.300}',
-            400: '{zinc.400}',
-            500: '{zinc.500}',
-            600: '{zinc.600}',
-            700: '{zinc.700}',
-            800: '{zinc.800}',
-            900: '{zinc.900}',
-            950: '{zinc.950}'
+            50: '{blue.50}',
+            100: '{blue.100}',
+            200: '{blue.200}',
+            300: '{blue.300}',
+            400: '{blue.400}',
+            500: '{blue.500}',
+            600: '{blue.600}',
+            700: '{blue.700}',
+            800: '{blue.800}',
+            900: '{blue.900}',
+            950: '{blue.950}'
         },
+        colorScheme: {
+
+
             light: {
                 surface: {
                     0: '#ffffff',
-                    50: '{zinc.50}',
-                    100: '{zinc.100}',
-                    200: '{zinc.200}',
-                    300: '{zinc.300}',
-                    400: '{zinc.400}',
-                    500: '{zinc.500}',
-                    600: '{zinc.600}',
-                    700: '{zinc.700}',
-                    800: '{zinc.800}',
-                    900: '{zinc.900}',
-                    950: '{zinc.950}'
+                    50: '{blue.50}',
+                    100: '{blue.100}',
+                    200: '{blue.200}',
+                    300: '{blue.300}',
+                    400: '{blue.400}',
+                    500: '{blue.500}',
+                    600: '{blue.600}',
+                    700: '{blue.700}',
+                    800: '{blue.800}',
+                    900: '{blue.900}',
+                    950: '{blue.950}'
                 }
             },
             dark: {
@@ -65,6 +55,7 @@ const MyPreset = definePreset(Aura, {
                 }
             }
         }
+
     }
 });
 

UI/src/app/person/family.orga.ts

@@ -1,23 +1,23 @@
 import { Component, OnInit, OnDestroy, inject, ChangeDetectorRef, signal} from '@angular/core';
 
 import { StaffView ,StaffSearch, Person, RelationShip } from '../models';
-import { OrganizationChartModule } from 'primeng/organizationchart';
+import { OrganizationChartModule } from '@openng/optimus-ui/organizationchart';
 
 import { take } from 'rxjs/operators';
 import { Subscription } from 'rxjs';
 import { PersonService } from './person.service';
-import { TableModule } from 'primeng/table';
+import { TableModule } from '@openng/optimus-ui/table';
 import { FormsModule } from '@angular/forms';
 import { CommonModule } from '@angular/common';
-import { ButtonModule } from 'primeng/button';
-import { TreeNode } from 'primeng/api';
-import { InputTextModule } from 'primeng/inputtext';
-import { DialogService, DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
+import { ButtonModule } from '@openng/optimus-ui/button';
+import { TreeNode } from '@openng/optimus-ui/api';
+import { InputTextModule } from '@openng/optimus-ui/inputtext';
+import { DialogService, DynamicDialogConfig, DynamicDialogRef } from '@openng/optimus-ui/dynamicdialog';
 import { PersonEdit } from './person.edit';
-import { MessageService } from 'primeng/api';
-import { TreeModule, TreeNodeDoubleClickEvent, TreeNodeSelectEvent } from 'primeng/tree';
+import { MessageService } from '@openng/optimus-ui/api';
+import { TreeModule, TreeNodeDoubleClickEvent, TreeNodeSelectEvent } from '@openng/optimus-ui/tree';
 import { Utils } from '../shares';
-import { PopoverModule } from 'primeng/popover';
+import { PopoverModule } from '@openng/optimus-ui/popover';
 
 @Component({
   selector: 'family-orga',
@@ -64,7 +64,7 @@ export class FamilyOrga implements OnInit, OnDestroy{
         {
             expanded: true,
             type: 'person',
-            styleClass: 'bg-indigo-500 text-white',
+        styleClass: 'bg-blue-500 text-white',
             data: {
                 image: 'https://primefaces.org/cdn/primeng/images/demo/avatar/amyelsner.png',
                 name: 'Amy Elsner',

UI/src/app/person/family.tree.ts

@@ -1,24 +1,24 @@
 import { Component, OnInit, OnDestroy, inject, ChangeDetectorRef, signal} from '@angular/core';
 
 import { StaffView ,StaffSearch, Person } from '../models';
-import { OrganizationChartModule } from 'primeng/organizationchart';
+import { OrganizationChartModule } from '@openng/optimus-ui/organizationchart';
 
 import { take } from 'rxjs/operators';
 import { Subscription } from 'rxjs';
 import { Router } from '@angular/router';
 import { PersonService } from './person.service';
 import { AuthenticationService } from '../user-services';
-import { TableModule } from 'primeng/table';
+import { TableModule } from '@openng/optimus-ui/table';
 import { FormsModule } from '@angular/forms';
 import { CommonModule } from '@angular/common';
-import { ButtonModule } from 'primeng/button';
-import { TreeNode } from 'primeng/api';
-import { InputTextModule } from 'primeng/inputtext';
-import { DialogService } from 'primeng/dynamicdialog';
+import { ButtonModule } from '@openng/optimus-ui/button';
+import { TreeNode } from '@openng/optimus-ui/api';
+import { InputTextModule } from '@openng/optimus-ui/inputtext';
+import { DialogService } from '@openng/optimus-ui/dynamicdialog';
 import { PersonEdit } from './person.edit';
-import { MessageService } from 'primeng/api';
-import { CheckboxModule } from 'primeng/checkbox';
-import { TreeModule, TreeNodeDoubleClickEvent, TreeNodeSelectEvent } from 'primeng/tree';
+import { MessageService } from '@openng/optimus-ui/api';
+import { CheckboxModule } from '@openng/optimus-ui/checkbox';
+import { TreeModule, TreeNodeDoubleClickEvent, TreeNodeSelectEvent } from '@openng/optimus-ui/tree';
 import { Utils } from '../shares';
 
 @Component({

UI/src/app/person/familylist.ts

@@ -8,17 +8,17 @@ import { Subscription } from 'rxjs';
 import { Router } from '@angular/router';
 import { PersonService } from './person.service';
 import { AuthenticationService } from '../user-services';
-import { Table, TableModule } from 'primeng/table';
+import { Table, TableModule } from '@openng/optimus-ui/table';
 import { FormsModule } from '@angular/forms';
 import { CommonModule } from '@angular/common';
-import { ButtonModule } from 'primeng/button';
-import { InputTextModule } from 'primeng/inputtext';
-import { DialogService } from 'primeng/dynamicdialog';
+import { ButtonModule } from '@openng/optimus-ui/button';
+import { InputTextModule } from '@openng/optimus-ui/inputtext';
+import { DialogService } from '@openng/optimus-ui/dynamicdialog';
 import { PersonEdit } from './person.edit';
-import { ConfirmationService, MenuItem, MessageService } from 'primeng/api';
-import { IconFieldModule } from 'primeng/iconfield';
-import { InputIconModule } from 'primeng/inputicon';
-import { Menu, MenuModule } from 'primeng/menu';
+import { ConfirmationService, MenuItem, MessageService } from '@openng/optimus-ui/api';
+import { IconFieldModule } from '@openng/optimus-ui/iconfield';
+import { InputIconModule } from '@openng/optimus-ui/inputicon';
+import { Menu, MenuModule } from '@openng/optimus-ui/menu';
 import { FamilyOrga } from './family.orga';
 
 import { saveAs } from 'file-saver';

UI/src/app/person/person.edit.ts

@@ -1,27 +1,28 @@
 import { ChangeDetectorRef, Component, inject, OnDestroy, OnInit, signal, ViewChild } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
-import {DialogService, DynamicDialogRef} from 'primeng/dynamicdialog';
-import {DynamicDialogConfig} from 'primeng/dynamicdialog';
+import {DialogService, DynamicDialogRef} from '@openng/optimus-ui/dynamicdialog';
+import {DynamicDialogConfig} from '@openng/optimus-ui/dynamicdialog';
 import { FormControl, ReactiveFormsModule, UntypedFormBuilder, Validators } from '@angular/forms';
 import { Subject, Subscription} from 'rxjs';
-import { ConfirmationService, MessageService } from 'primeng/api';
-import { DatePickerModule } from 'primeng/datepicker';
-import { Code, RelationShipView, Person, mState, RelationShip, PersonPhotoDto}  from '../models';
+import { ConfirmationService, MessageService } from '@openng/optimus-ui/api';
+import { DatePickerModule } from '@openng/optimus-ui/datepicker';
+import { Code, RelationShipView, Person, mState, RelationShip, PersonPhotoDto, enumPhoto } from '../models';
 import { AppSettingService, LookupService, Utils } from '../shares';
 import { PersonService } from './person.service';
-import { ButtonModule } from 'primeng/button';
-import { SelectModule } from 'primeng/select';
-import { CheckboxModule } from 'primeng/checkbox';
-import { InputTextModule } from 'primeng/inputtext';
+import { ButtonModule } from '@openng/optimus-ui/button';
+import { SelectModule } from '@openng/optimus-ui/select';
+import { CheckboxModule } from '@openng/optimus-ui/checkbox';
+import { InputTextModule } from '@openng/optimus-ui/inputtext';
 import moment from 'moment';
 import { HttpEvent } from '@angular/common/http';
-import { TableModule } from 'primeng/table';
+import { TableModule } from '@openng/optimus-ui/table';
 import { Pickperson } from '../pickperson/pickperson';
 import { ImageDisplayComponent } from '../pickperson/image.display';
-import { TooltipModule } from 'primeng/tooltip';
-import { AutoFocusModule } from 'primeng/autofocus';
+import { TooltipModule } from '@openng/optimus-ui/tooltip';
+import { AutoFocusModule } from '@openng/optimus-ui/autofocus';
 import { DomSanitizer } from '@angular/platform-browser';
 import { PhotoList } from '../attachphoto/photolist';
+import { InputNumberDesignTokens } from '@openng/optimus-ui-themes/types/inputnumber';
 
 export interface FileUploadEvent {
   originalEvent: HttpEvent<any>;
@@ -190,9 +191,9 @@ doDeleteFile(): void {
 		this.profileFile = null;
 }
 doDeleteImage(fileName:string) : void {
-	const familyId = this.adminuserForm.value.id;
-    const data = { fileName, familyId };
-    const delete$ = this.personService.deleteUploadFile(data);
+	const personId = this.adminuserForm.value.id;
+	const photoType = enumPhoto.Profile;
+	const delete$ = this.personService.deletePersonPhotoFile(personId, photoType);
     this.subscription.add(delete$.subscribe(
       {
         next: x => {
@@ -307,6 +308,8 @@ doViewImage(imageName:string): void {
 	const ref = this.dialogService.open(ImageDisplayComponent, {
       data: {         
 			imageName,    
+			personId: this._id,
+			photyType: enumPhoto.Profile    
     	},	  
       header: 'View Image',
 	  draggable: true,
@@ -358,7 +361,7 @@ assignValue(item:Person): void {
 		}
 		if (item.image && item.image.length > 0)
 		{
-			this.loadImage(item.image);
+			this.loadImage(item.image, item.id, enumPhoto.Profile);
 		}
 		// disable use false//true for not disable.
 		this.subChanged$.next(true);
@@ -367,8 +370,10 @@ assignValue(item:Person): void {
 	// convenience getter for easy access in form fields
 	get f() { return this.adminuserForm.controls;}
 	
-	loadImage(fileName: string| null): void {
-    const download = this.personService.downloadFile(fileName!);
+	loadImage(fileName: string | null,
+		personId: number, photoType: number): void {
+		if (fileName) {
+			const download = this.personService.downloadPersonPhoto64(fileName, personId, photoType);
     this.subscription.add(download.subscribe({
       next: x => {
         if (x.statusCode == 1)
@@ -385,6 +390,8 @@ assignValue(item:Person): void {
       error: e => console.error("error in download image", e)
     }));
 		}
+	}
+
 	displayIamge64(baseImage: string): void 
   { 
     const changeUrl = (this.sanitizer.bypassSecurityTrustResourceUrl(baseImage) as any).changingThisBreaksApplicationSecurity;

UI/src/app/person/person.service.ts

@@ -4,7 +4,7 @@ import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { Staff,StaffSearch, StaffView, ResultModel,ConfigureUrl,ResetPassword, Person, PersonContainer, RelationShip }  from '../models';
 import { AppSettingService } from '../shares';
-import { TreeNode } from 'primeng/api';
+import { TreeNode } from '@openng/optimus-ui/api';
 
 @Injectable({ providedIn: 'root' })
 export class PersonService {
@@ -77,33 +77,60 @@ export class PersonService {
 		const baseUrl = this.appSetting.appSetting.baseUrl + "/" + ConfigureUrl.personUrl + "/UploadImage";
 		return this.http.post<ResultModel<string>>(baseUrl, data);
 	}
-	downloadFile(imageName: string): Observable<ResultModel<string>> {
+	downloadFile_dontusethis(imageName: string, personId: number,
+		photoType: number): Observable<ResultModel<string>> {
 		const baseUrl = this.appSetting.appSetting.baseUrl + "/" + ConfigureUrl.FileUploadUrl + "/DownloadFile";
 		const data = {
-			fileName: imageName
+			fileName: imageName,
+			id: personId,
+			photoType
 		};
 		return this.http.post<ResultModel<string>>(baseUrl, data);
 	}
-	deleteUploadFile(data: any): Observable<ResultModel<number>> {
+	deleteUploadFile_dotnotuse(data: any): Observable<ResultModel<number>> {
 		//data ={filename};
 		const baseUrl = this.appSetting.appSetting.baseUrl + "/" + ConfigureUrl.personUrl + "/DeleteUploadFile";
 		return this.http.post<ResultModel<number>>(baseUrl, data);
 	}
-	deletePersonPhotoFile(id: number): Observable<ResultModel<number>> {
-		const data ={id, fileName:''};
+	deletePersonPhotoFile(personId: number, photoType: number): Observable<ResultModel<number>> {
+		const data = {
+			id: personId,
+			fileName: '',
+			photoType
+		};
 		const baseUrl = this.appSetting.appSetting.baseUrl + "/" + ConfigureUrl.FileUploadUrl + "/DeletePersonPhoto";
 		return this.http.post<ResultModel<number>>(baseUrl, data);
 	}
+	deletePersonPhotoFileById(id: number): Observable<ResultModel<number>> {
+		const data = {
+			id
+		};
+		const baseUrl = this.appSetting.appSetting.baseUrl + "/" + ConfigureUrl.FileUploadUrl + "/DeletePersonPhotoById";
+		return this.http.post<ResultModel<number>>(baseUrl, data);
+	}
 	savePersonPhotoList(data:FormData):  Observable<ResultModel<number>> {
 		const baseUrl = this.appSetting.appSetting.baseUrl + "/" + ConfigureUrl.FileUploadUrl + "/SavePersonPhoto";
 		return this.http.post<ResultModel<number>>(baseUrl, data);
 	}
-	downloadPersonPhoto(id: number): Observable<ResultModel<string>> {
-		const baseUrl = this.appSetting.appSetting.baseUrl + "/" + ConfigureUrl.FileUploadUrl + "/DownloadPersonPhoto";
+
+	downloadPersonPhoto64(imageName: string, personId: number,
+		photoType: number): Observable<ResultModel<string>> {
+		const baseUrl = this.appSetting.appSetting.baseUrl + "/" + ConfigureUrl.FileUploadUrl + "/DownloadPersonPhoto64";
 		const data = {
-			id,
-			fileName: ''
+			id: personId,
+			photoType,
+			fileName: imageName
 		};
 		return this.http.post<ResultModel<string>>(baseUrl, data);
 	}
+	downloadPersonPhoto(imageName: string, personId: number,
+		photoType: number): Observable<any> {
+		const baseUrl = this.appSetting.appSetting.baseUrl + "/" + ConfigureUrl.FileUploadUrl + "/DownloadPersonPhoto";
+		const data = {
+			id: personId,
+			photoType,
+			fileName: imageName
+		};
+		return this.http.post<any>(baseUrl, data);
+	}
 }

UI/src/app/pickperson/image.display.ts

@@ -5,8 +5,8 @@ import { PersonService } from '../person';
 import { Subscription } from 'rxjs';
 import { ActivatedRoute } from '@angular/router';
 import { CommonModule } from '@angular/common';
-import { ButtonModule } from 'primeng/button';
-import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
+import { ButtonModule } from '@openng/optimus-ui/button';
+import { DynamicDialogConfig, DynamicDialogRef } from '@openng/optimus-ui/dynamicdialog';
 
 @Component({
   selector: 'app-image-display',
@@ -28,11 +28,13 @@ export class ImageDisplayComponent implements OnInit, OnDestroy {
  ngOnInit(): void {
     
    const imageName = this.config.data.imageName;   
-    this.loadImage(imageName);
+   const personId = this.config.data.personId;
+   const photoType = this.config.data.photyType;
+   this.loadImage(imageName, personId, photoType);
 
   }
-  loadImage(fileName: string| null): void {
-    const download = this.personService.downloadFile(fileName!);
+  loadImage(fileName: string | null, personId: number, photoType: number): void {
+    const download = this.personService.downloadPersonPhoto64(fileName!, personId, photoType);
     this.subscription.add(download.subscribe({
       next: x => {
         if (x.statusCode == 1)

UI/src/app/pickperson/pickperson.ts

@@ -1,13 +1,13 @@
 import { CommonModule } from '@angular/common';
 import { Component, OnDestroy, OnInit, signal, ViewChild } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { Table, TableModule } from 'primeng/table';
+import { Table, TableModule } from '@openng/optimus-ui/table';
 import { Person } from '../models';
-import { IconFieldModule } from 'primeng/iconfield';
-import { InputIconModule } from 'primeng/inputicon';
-import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
-import { ButtonModule } from 'primeng/button';
-import { InputTextModule } from 'primeng/inputtext';
+import { IconFieldModule } from '@openng/optimus-ui/iconfield';
+import { InputIconModule } from '@openng/optimus-ui/inputicon';
+import { DynamicDialogConfig, DynamicDialogRef } from '@openng/optimus-ui/dynamicdialog';
+import { ButtonModule } from '@openng/optimus-ui/button';
+import { InputTextModule } from '@openng/optimus-ui/inputtext';
 
 @Component({
   selector: 'app-pickperson',

UI/src/app/shares/utils.ts

@@ -1,6 +1,6 @@
 import moment from "moment";
 import { Person, User, userRole } from "../models"
-import { TreeNode } from "primeng/api";
+import { TreeNode } from "@openng/optimus-ui/api";
 
 type MyProName = "fatherId" | "motherId";
 

UI/src/app/staff/staff.component.ts

@@ -9,11 +9,11 @@ import { Subscription } from 'rxjs';
 import { Router } from '@angular/router';
 import { StaffService } from './staff.service';
 import { AuthenticationService } from '../user-services';
-import { TableModule } from 'primeng/table';
+import { TableModule } from '@openng/optimus-ui/table';
 import { FormsModule } from '@angular/forms';
 import { CommonModule } from '@angular/common';
-import { ButtonModule } from 'primeng/button';
-import { InputTextModule } from 'primeng/inputtext';
+import { ButtonModule } from '@openng/optimus-ui/button';
+import { InputTextModule } from '@openng/optimus-ui/inputtext';
 import { selectStaffLoaded,selectStaff } from '../state/staff.selectors';
 
 @Component({

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

@@ -2,15 +2,15 @@ import { Component, inject, input, numberAttribute, OnDestroy, OnInit } from '@a
 import { Router, ActivatedRoute } from '@angular/router';
 import { ReactiveFormsModule, UntypedFormBuilder, Validators } from '@angular/forms';
 import { Subject, Subscription} from 'rxjs';
-import { MessageService } from 'primeng/api';
+import { MessageService } from '@openng/optimus-ui/api';
 
 import {Staff, Code, userRole}  from '../models';
 import { LookupService, Utils } from '../shares';
 import { StaffService } from './staff.service';
-import { ButtonModule } from 'primeng/button';
-import { SelectModule } from 'primeng/select';
-import { CheckboxModule } from 'primeng/checkbox';
-import { InputTextModule } from 'primeng/inputtext';
+import { ButtonModule } from '@openng/optimus-ui/button';
+import { SelectModule } from '@openng/optimus-ui/select';
+import { CheckboxModule } from '@openng/optimus-ui/checkbox';
+import { InputTextModule } from '@openng/optimus-ui/inputtext';
 
 @Component({
 templateUrl: 'staff.edit.component.html',

UI/src/app/staff/staff.pass.component.ts

@@ -2,13 +2,13 @@ import { Component, inject, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
 import { FormsModule, ReactiveFormsModule, UntypedFormBuilder, Validators } from '@angular/forms';
 import { Subject, Subscription} from 'rxjs';
-import { MessageService } from 'primeng/api';
+import { MessageService } from '@openng/optimus-ui/api';
 
 import {Staff, Code, userRole, ResetPassword}  from '../models';
 import { LookupService, Utils } from '../shares';
 import { StaffService } from './staff.service';
 import { CommonModule } from '@angular/common';
-import { ButtonModule } from 'primeng/button';
+import { ButtonModule } from '@openng/optimus-ui/button';
 
 @Component({
 templateUrl: 'staff.pass.component.html',

UI/src/app/toolbar/toolbar.component.html

@@ -1,17 +1,15 @@
-@if (currentUserS() && isAuth)
+@if (currentUserS() && isAuth == true)
 {
 <div class="flex flex-column justify-between md:flex-row rounded" style="background-color:transparent">
     <div style="margin-top:5px;padding-right:35px; cursor: pointer;width:400px;">
         <img (click)="onHome()" src="images/application_image.png" alt="Banner" style="height:80px;width:100%" />
     </div>
+    
     <div class="flex justify-end items-end flex-row">
         <div class="flex-column">
             <label class=" flex justify-end items-end mr-1 mb-2 myname">{{loginUser}}</label>
             <div>
-                <span class="md:hidden flex justify-end"> <!--hidden on md screen show on small-->
-                    <button type="button" pButton icon="pi pi-align-justify" (click)="onemenu.toggle($event);"></button>
-                    <p-menu #onemenu [popup]="true" [model]="oneMenu"></p-menu>
-                </span>
+               
                 <span class="hidden md:inline-flex"> <!--hidden when small screen-->
                  <p-buttonGroup >
                     <button type="button" pButton icon="pi pi-slack" label="Home" (click)="onHome()"
@@ -38,4 +36,9 @@
         </div>
     </div>
 </div>
+<!--put in the left new row if in mobile not much room-->
+<span class="md:hidden flex justify-start"> <!--hidden on md screen show on small-->
+                    <button type="button" pButton icon="pi pi-align-justify" (click)="onemenu.toggle($event);"></button>
+                    <p-menu #onemenu [popup]="true" [model]="oneMenu"></p-menu>
+</span>
 }

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

@@ -1,10 +1,10 @@
 import { Component, OnInit, OnDestroy, effect, computed, Signal, } from '@angular/core';
 import { Router } from '@angular/router';
 import { CommonModule } from '@angular/common';
-import { MenuItem } from 'primeng/api';
-import { MenuModule } from 'primeng/menu';
-import { ButtonModule} from 'primeng/button';
-import { ButtonGroupModule } from 'primeng/buttongroup';
+import { MenuItem } from '@openng/optimus-ui/api';
+import { MenuModule } from '@openng/optimus-ui/menu';
+import { ButtonModule} from '@openng/optimus-ui/button';
+import { ButtonGroupModule } from '@openng/optimus-ui/buttongroup';
 import { Subscription } from 'rxjs';
 import { AuthenticationService } from '../user-services';
 import { Utils } from '../shares';

UI/src/styles.css

@@ -1,7 +1,7 @@
 /* You can add global styles to this file, and also import other style files */
 @import "tailwindcss";
-@plugin "tailwindcss-primeui";
-@import "primeicons/primeicons.css";
+@plugin "@openng/optimus-ui-tailwindcss";
+@import "@openng/icons/openng-icons.css";
 html,
 body {
     height: 100%;

UI/tsconfig.json

@@ -10,7 +10,6 @@
     "noFallthroughCasesInSwitch": true,
     "skipLibCheck": true,
     "isolatedModules": true,
-    "experimentalDecorators": true,
     "importHelpers": true,
     "target": "ES2022",
     "module": "preserve"

angular_cookie.txt

@@ -0,0 +1,38 @@
+import { HttpInterceptorFn } from '@angular/common/http';
+
+export const credentialsInterceptor: HttpInterceptorFn = (req, next) => {
+  // Clone the request to add the withCredentials property
+  const clonedRequest = req.clone({
+    withCredentials: true
+  });
+  
+  return next(clonedRequest);
+};
+
+typescriptimport { provideHttpClient, withInterceptors } from '@angular/common/http';
+import { credentialsInterceptor } from './credentials.interceptor';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideHttpClient(
+      withInterceptors([credentialsInterceptor]) // Register it here
+    )
+  ]
+};
+
+2. Individual Request ConfigurationIf you only want to send cookies to specific endpoints, 
+pass the withCredentials option directly inside your service.
+
+typescriptimport { HttpClient } from '@angular/common/http';
+import { inject, Injectable } from '@angular/core';
+
+@Injectable({ providedIn: 'root' })
+export class ApiService {
+  private http = inject(HttpClient);
+
+  getData() {
+    return this.http.get('https://your-api-domain.com', {
+      withCredentials: true // Enables cookies for this request only
+    });
+  }
+}