From 73d0fd5fa26e6f41f43044d2cfd7ebdce65d5e3e Mon Sep 17 00:00:00 2001
From: Amelia <77553571+Fesaa@users.noreply.github.com>
Date: Sat, 16 Aug 2025 01:56:31 +0200
Subject: [PATCH 1/9] Fix something I don't understand why I can't just import
 the method wtf

---
 API/Data/Repositories/ProductRepository.cs      | 17 ++++++++---------
 .../QueryableExtensions.cs                      |  2 +-
 2 files changed, 9 insertions(+), 10 deletions(-)
 rename API/{Entities => Extensions}/QueryableExtensions.cs (91%)

diff --git a/API/Data/Repositories/ProductRepository.cs b/API/Data/Repositories/ProductRepository.cs
index 6433ff8..32a1ffc 100644
--- a/API/Data/Repositories/ProductRepository.cs
+++ b/API/Data/Repositories/ProductRepository.cs
@@ -1,6 +1,5 @@
 using API.DTOs;
 using API.Entities;
-using API.Entities.Enums;
 using API.Extensions;
 using AutoMapper;
 using AutoMapper.QueryableExtensions;
@@ -71,31 +70,31 @@ public async Task<IList<ProductDto>> GetDtoByIds(IEnumerable<int> ids)
 
     public async Task<IList<Product>> GetAll(bool onlyEnabled = false)
     {
-        return await ctx.Products
-            .WhereIf(onlyEnabled, p => p.Enabled)
+        return await QueryableExtensions
+            .WhereIf(ctx.Products, onlyEnabled, p => p.Enabled)
             .ToListAsync();
     }
 
     public async Task<IList<ProductDto>> GetAllDto(bool onlyEnabled = false)
     {
-        return await ctx.Products
-            .WhereIf(onlyEnabled, p => p.Enabled)
+        return await QueryableExtensions
+            .WhereIf(ctx.Products, onlyEnabled, p => p.Enabled)
             .ProjectTo<ProductDto>(mapper.ConfigurationProvider)
             .ToListAsync();
     }
 
     public async Task<IList<ProductCategory>> GetAllCategories(bool onlyEnabled = false)
     {
-        return await ctx.ProductCategories
-            .WhereIf(onlyEnabled, p => p.Enabled)
+        return await QueryableExtensions
+            .WhereIf(ctx.ProductCategories, onlyEnabled, p => p.Enabled)
             .OrderBy(p => p.SortValue)
             .ToListAsync();
     }
 
     public async Task<IList<ProductCategoryDto>> GetAllCategoriesDtos(bool onlyEnabled = false)
     {
-        return await ctx.ProductCategories
-            .WhereIf(onlyEnabled, p => p.Enabled)
+        return await QueryableExtensions
+            .WhereIf(ctx.ProductCategories, onlyEnabled, p => p.Enabled)
             .OrderBy(p => p.SortValue)
             .ProjectTo<ProductCategoryDto>(mapper.ConfigurationProvider)
             .ToListAsync();
diff --git a/API/Entities/QueryableExtensions.cs b/API/Extensions/QueryableExtensions.cs
similarity index 91%
rename from API/Entities/QueryableExtensions.cs
rename to API/Extensions/QueryableExtensions.cs
index fc01b98..67ec950 100644
--- a/API/Entities/QueryableExtensions.cs
+++ b/API/Extensions/QueryableExtensions.cs
@@ -1,6 +1,6 @@
 using System.Linq.Expressions;
 
-namespace API.Entities;
+namespace API.Extensions;
 
 public static class QueryableExtensions
 {

From a26af1dd32510bf76f5a25e18961112003bce8d6 Mon Sep 17 00:00:00 2001
From: Amelia <77553571+Fesaa@users.noreply.github.com>
Date: Sat, 16 Aug 2025 02:09:18 +0200
Subject: [PATCH 2/9] Simple telemetry base

---
 API/API.csproj                            |  5 +++
 API/Helpers/Telemetry/OperationTracker.cs | 30 +++++++++++++++
 API/Helpers/Telemetry/TelemetryHelper.cs  | 46 +++++++++++++++++++++++
 API/Services/StockService.cs              | 14 +++++--
 API/Startup.cs                            | 12 ++++++
 In-Out.sln.DotSettings.user               |  4 ++
 6 files changed, 107 insertions(+), 4 deletions(-)
 create mode 100644 API/Helpers/Telemetry/OperationTracker.cs
 create mode 100644 API/Helpers/Telemetry/TelemetryHelper.cs

diff --git a/API/API.csproj b/API/API.csproj
index 2e0fe3b..78ef9d5 100644
--- a/API/API.csproj
+++ b/API/API.csproj
@@ -25,6 +25,10 @@
       <PackageReference Include="Microsoft.Extensions.DependencyInjection" Version="9.0.7" />
       <PackageReference Include="MimeTypeMapOfficial" Version="1.0.17" />
       <PackageReference Include="Npgsql.EntityFrameworkCore.PostgreSQL" Version="9.0.4" />
+      <PackageReference Include="OpenTelemetry" Version="1.12.0" />
+      <PackageReference Include="OpenTelemetry.Exporter.OpenTelemetryProtocol" Version="1.12.0" />
+      <PackageReference Include="OpenTelemetry.Instrumentation.AspNetCore" Version="1.12.0" />
+      <PackageReference Include="OpenTelemetry.Instrumentation.Http" Version="1.12.0" />
       <PackageReference Include="Serilog" Version="4.3.0" />
       <PackageReference Include="Serilog.AspNetCore" Version="9.0.0" />
       <PackageReference Include="Serilog.Enrichers.Thread" Version="4.0.0" />
@@ -36,6 +40,7 @@
       <PackageReference Include="Serilog.Sinks.AspNetCore.App.SignalR" Version="1.2.2" />
       <PackageReference Include="Serilog.Sinks.Console" Version="6.0.0" />
       <PackageReference Include="Serilog.Sinks.File" Version="7.0.0" />
+      <PackageReference Include="SharpAbp.Abp.OpenTelemetry.Exporter.Prometheus.AspNetCore" Version="4.4.0" />
       <PackageReference Include="Swashbuckle.AspNetCore" Version="9.0.3" />
       <PackageReference Include="Swashbuckle.AspNetCore.Filters" Version="9.0.0" />
       <PackageReference Include="System.IO.Abstractions" Version="22.0.15" />
diff --git a/API/Helpers/Telemetry/OperationTracker.cs b/API/Helpers/Telemetry/OperationTracker.cs
new file mode 100644
index 0000000..71c3af4
--- /dev/null
+++ b/API/Helpers/Telemetry/OperationTracker.cs
@@ -0,0 +1,30 @@
+using System.Diagnostics;
+using System.Diagnostics.Metrics;
+
+namespace API.Helpers.Telemetry;
+
+public class OperationTracker: IDisposable
+{
+    private readonly Stopwatch _stopwatch;
+    private readonly Histogram<double> _histogram;
+    private readonly Dictionary<string, object?> _tags;
+    private bool _disposed;
+
+    internal OperationTracker(Histogram<double> histogram, string operationName, Dictionary<string, object?>? tags)
+    {
+        _histogram = histogram;
+        _tags = tags ?? [];
+        _stopwatch = Stopwatch.StartNew();
+
+        _tags["operation"] = operationName;
+    }
+
+    public void Dispose()
+    {
+        if (_disposed) return;
+
+        _stopwatch.Stop();
+        _histogram.Record(_stopwatch.Elapsed.TotalMilliseconds, _tags.ToArray());
+        _disposed = true;
+    }
+}
\ No newline at end of file
diff --git a/API/Helpers/Telemetry/TelemetryHelper.cs b/API/Helpers/Telemetry/TelemetryHelper.cs
new file mode 100644
index 0000000..31d7074
--- /dev/null
+++ b/API/Helpers/Telemetry/TelemetryHelper.cs
@@ -0,0 +1,46 @@
+using System.Diagnostics;
+using System.Diagnostics.Metrics;
+using Flurl.Util;
+
+namespace API.Helpers.Telemetry;
+
+public static class TelemetryHelper
+{
+
+    private static readonly ActivitySource ActivitySource;
+    private static readonly Meter Meter;
+
+    private static readonly Histogram<double> MethodTiming;
+    private static readonly Counter<long> InvalidOperationCounts;
+
+    static TelemetryHelper()
+    {
+        var serviceName = BuildInfo.AppName;
+
+        ActivitySource = new ActivitySource(serviceName);
+        Meter = new Meter(serviceName);
+
+        MethodTiming = Meter.CreateHistogram<double>(
+            "method_timing_duration_ms",
+            "ms",
+            "Duration of specific method, see method tag"
+            );
+
+        InvalidOperationCounts = Meter.CreateCounter<long>(
+            "invalid_operations_counter",
+            "absolute",
+            "Amount of invalid operations performed by users");
+    }
+
+    public static OperationTracker TrackOperation(string operationName, Dictionary<string, object?>? tags = null)
+    {
+        return new OperationTracker(MethodTiming, operationName, tags);
+    }
+
+    public static void InvalidOperation(string operationName, Dictionary<string, object?>? tags = null)
+    {
+        tags ??= [];
+        tags.Add("operation", operationName);
+        InvalidOperationCounts.Add(1, tags.ToArray());
+    }
+}
\ No newline at end of file
diff --git a/API/Services/StockService.cs b/API/Services/StockService.cs
index 5dd10f2..52df099 100644
--- a/API/Services/StockService.cs
+++ b/API/Services/StockService.cs
@@ -3,8 +3,8 @@
 using API.DTOs;
 using API.Entities;
 using API.Entities.Enums;
-using API.Extensions;
 using API.Helpers;
+using API.Helpers.Telemetry;
 
 namespace API.Services;
 
@@ -25,12 +25,18 @@ public class StockService(ILogger<StockService> logger, IUnitOfWork unitOfWork,
 
     public async Task<Result<IList<Stock>>> UpdateStockBulkAsync(User user, IList<UpdateStockDto> dtos) 
     {
-        if (dtos == null || !dtos.Any())
+        dtos = dtos.Where(dto => dto.Value != 0 || dto.Operation == StockOperation.Set).ToList();
+
+        if (!dtos.Any())
         {
             return Result<IList<Stock>>.Failure(await localization.Translate(user.Id, "stock-bulk-empty-list"));
         }
-        
-        dtos = dtos.Where(dto => dto.Value != 0 || dto.Operation == StockOperation.Set).ToList();
+
+        using var tracker = TelemetryHelper.TrackOperation("bulk_stock_update", new Dictionary<string, object?>
+        {
+            ["user_id"] = user.Id,
+            ["update_operations"] = dtos.Count,
+        });
 
         return await unitOfWork.ExecuteWithRetryAsync(async () =>
         {
diff --git a/API/Startup.cs b/API/Startup.cs
index 485289f..df22b53 100644
--- a/API/Startup.cs
+++ b/API/Startup.cs
@@ -10,6 +10,8 @@
 using Microsoft.AspNetCore.ResponseCompression;
 using Microsoft.Net.Http.Headers;
 using Microsoft.OpenApi.Models;
+using OpenTelemetry.Metrics;
+using OpenTelemetry.Resources;
 using Serilog;
 using Serilog.Events;
 
@@ -85,6 +87,15 @@ public void ConfigureServices(IServiceCollection services)
         });
         services.AddResponseCaching();
         // TODO: Rate limitter
+
+        services.AddOpenTelemetry()
+            .ConfigureResource(src => src
+                .AddService(BuildInfo.AppName))
+            .WithMetrics(metrics => metrics
+                .AddAspNetCoreInstrumentation()
+                .AddHttpClientInstrumentation()
+                .AddMeter(BuildInfo.AppName)
+                .AddPrometheusExporter());
     }
 
     public void Configure(IApplicationBuilder app, IServiceProvider serviceProvider, IHostApplicationLifetime applicationLifetime)
@@ -164,6 +175,7 @@ public void Configure(IApplicationBuilder app, IServiceProvider serviceProvider,
             //endpoints.MapHub<MessageHub>("hubs/messages");
             //endpoints.MapHub<LogHub>("hubs/logs");
             endpoints.MapFallbackToController("Index", "Fallback");
+            endpoints.MapPrometheusScrapingEndpoint();
         });
         
         applicationLifetime.ApplicationStarted.Register(() =>
diff --git a/In-Out.sln.DotSettings.user b/In-Out.sln.DotSettings.user
index f8ae1c9..35e7817 100644
--- a/In-Out.sln.DotSettings.user
+++ b/In-Out.sln.DotSettings.user
@@ -1,5 +1,9 @@
 <wpf:ResourceDictionary xml:space="preserve" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:s="clr-namespace:System;assembly=mscorlib" xmlns:ss="urn:shemas-jetbrains-com:settings-storage-xaml" xmlns:wpf="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
+	<s:String x:Key="/Default/CodeInspection/ExcludedFiles/FilesAndFoldersToSkip2/=7020124F_002D9FFC_002D4AC3_002D8F3D_002DAAB8E0240759_002Ff_003AAbpQueryableExtensions_002Ecs_002Fl_003A_002E_002E_003F_002E_002E_003FLibrary_003FApplication_0020Support_003FJetBrains_003FRider2025_002E1_003Fresharper_002Dhost_003FDecompilerCache_003Fdecompiler_003Ff7619338572a4bd6b0d6f039441a8abe30000_003F6d_003F25c9a86f_003FAbpQueryableExtensions_002Ecs/@EntryIndexedValue">ForceIncluded</s:String>
+	<s:String x:Key="/Default/CodeInspection/ExcludedFiles/FilesAndFoldersToSkip2/=7020124F_002D9FFC_002D4AC3_002D8F3D_002DAAB8E0240759_002Ff_003AAspNetCoreInstrumentationMeterProviderBuilderExtensions_002Ecs_002Fl_003A_002E_002E_003F_002E_002E_003FLibrary_003FApplication_0020Support_003FJetBrains_003FRider2025_002E1_003Fresharper_002Dhost_003FSourcesCache_003F7297519ad078988ec22f4244182a4be9e69be051f6717cc45f678d78a2c9287_003FAspNetCoreInstrumentationMeterProviderBuilderExtensions_002Ecs/@EntryIndexedValue">ForceIncluded</s:String>
+	<s:String x:Key="/Default/CodeInspection/ExcludedFiles/FilesAndFoldersToSkip2/=7020124F_002D9FFC_002D4AC3_002D8F3D_002DAAB8E0240759_002Ff_003AHttpClientInstrumentationMeterProviderBuilderExtensions_002Ecs_002Fl_003A_002E_002E_003F_002E_002E_003FLibrary_003FApplication_0020Support_003FJetBrains_003FRider2025_002E1_003Fresharper_002Dhost_003FSourcesCache_003F5e77e36a956011b43a705c853b1746f35f99d82ac23952e7fa47d2a19456ef_003FHttpClientInstrumentationMeterProviderBuilderExtensions_002Ecs/@EntryIndexedValue">ForceIncluded</s:String>
 	<s:String x:Key="/Default/CodeInspection/ExcludedFiles/FilesAndFoldersToSkip2/=7020124F_002D9FFC_002D4AC3_002D8F3D_002DAAB8E0240759_002Ff_003ALoggerConfiguration_002Ecs_002Fl_003AC_0021_003FUsers_003FAamel_003FAppData_003FRoaming_003FJetBrains_003FRider2024_002E3_003Fresharper_002Dhost_003FDecompilerCache_003Fdecompiler_003F74ca1d8fbb4e46c08b3445afb0cadf3927800_003F3b_003F662b0056_003FLoggerConfiguration_002Ecs/@EntryIndexedValue">ForceIncluded</s:String>
+	<s:String x:Key="/Default/CodeInspection/ExcludedFiles/FilesAndFoldersToSkip2/=7020124F_002D9FFC_002D4AC3_002D8F3D_002DAAB8E0240759_002Ff_003APrometheusExporterApplicationBuilderExtensions_002Ecs_002Fl_003A_002E_002E_003F_002E_002E_003FLibrary_003FApplication_0020Support_003FJetBrains_003FRider2025_002E1_003Fresharper_002Dhost_003FSourcesCache_003F40b4abe4f99b674acb3c3756e48f1ec672b359ed65b7f1bfde1589e2ff73a2_003FPrometheusExporterApplicationBuilderExtensions_002Ecs/@EntryIndexedValue">ForceIncluded</s:String>
 	<s:String x:Key="/Default/CodeInspection/ExcludedFiles/FilesAndFoldersToSkip2/=7020124F_002D9FFC_002D4AC3_002D8F3D_002DAAB8E0240759_002Ff_003AVersion_002Ecs_002Fl_003AC_0021_003FUsers_003FAamel_003FAppData_003FRoaming_003FJetBrains_003FRider2024_002E3_003Fresharper_002Dhost_003FSourcesCache_003Fe2a884fc9ca8537885d3c13b86387ec99428fc9c70b49fe548a2c43be866546_003FVersion_002Ecs/@EntryIndexedValue">ForceIncluded</s:String>
 	<s:String x:Key="/Default/Environment/AssemblyExplorer/XmlDocument/@EntryValue">&lt;AssemblyExplorer&gt;
   &lt;Assembly Path="/Users/amelia/.nuget/packages/testcontainers/4.6.0/lib/net9.0/Testcontainers.dll" /&gt;

From befbd36eaaf49c0858474e8c7fd4ba15b420d8ef Mon Sep 17 00:00:00 2001
From: Amelia <77553571+Fesaa@users.noreply.github.com>
Date: Sat, 16 Aug 2025 02:13:41 +0200
Subject: [PATCH 3/9] Track some more methods

---
 API/Services/DeliveryService.cs     | 17 +++++++++++++++++
 API/Services/LocalizationService.cs | 12 ++++++++++++
 2 files changed, 29 insertions(+)

diff --git a/API/Services/DeliveryService.cs b/API/Services/DeliveryService.cs
index 222afc7..82247c9 100644
--- a/API/Services/DeliveryService.cs
+++ b/API/Services/DeliveryService.cs
@@ -7,6 +7,7 @@
 using API.Entities.Enums;
 using API.Exceptions;
 using API.Extensions;
+using API.Helpers.Telemetry;
 
 namespace API.Services;
 
@@ -31,6 +32,11 @@ public async Task<Delivery> CreateDelivery(int userId, DeliveryDto dto)
         var client = await unitOfWork.ClientRepository.GetClientById(dto.ClientId);
         if (client == null)
             throw new InOutException("errors.client-not-found");
+        
+        using var tracker = TelemetryHelper.TrackOperation("create_client", new Dictionary<string, object?>
+        {
+            ["user_id"] = userId,
+        });
 
         var lines = dto.Lines.GroupBy(l => l.ProductId)
             .Select(g => new DeliveryLineDto
@@ -95,6 +101,11 @@ public async Task<Delivery> UpdateDelivery(ClaimsPrincipal actor, DeliveryDto dt
         var user = await userService.GetUser(actor);
         if (delivery.UserId != user.Id && !actor.IsInRole(PolicyConstants.CreateForOthers))
             throw new UnauthorizedAccessException();
+        
+        using var tracker = TelemetryHelper.TrackOperation("update_client", new Dictionary<string, object?>
+        {
+            ["user_id"] = user.Id,
+        });
 
         delivery.Message = dto.Message;
 
@@ -205,6 +216,12 @@ public async Task TransitionDelivery(ClaimsPrincipal actor, int deliveryId, Deli
             throw new InOutException("errors.invalid-next-state");
 
         delivery.State = nextState;
+
+        if (delivery.State == DeliveryState.Cancelled)
+        {
+            // TODO: Refund stock
+        }
+        
         await unitOfWork.CommitAsync();
     }
     
diff --git a/API/Services/LocalizationService.cs b/API/Services/LocalizationService.cs
index 581d169..cc78737 100644
--- a/API/Services/LocalizationService.cs
+++ b/API/Services/LocalizationService.cs
@@ -1,5 +1,6 @@
 using System.Text.Json;
 using API.Data;
+using API.Helpers.Telemetry;
 using Microsoft.Extensions.Caching.Memory;
 
 namespace API.Services;
@@ -78,6 +79,11 @@ public LocalizationService(ILogger<LocalizationService> logger, IDirectoryServic
 
     public async Task<Dictionary<string, string>?> LoadLanguage(string languageCode)
     {
+        using var tracker = TelemetryHelper.TrackOperation("load_language", new Dictionary<string, object?>
+        {
+            ["language"] = languageCode,
+        });
+        
         if (string.IsNullOrWhiteSpace(languageCode))
         {
             languageCode = DefaultLocale;
@@ -105,6 +111,12 @@ public LocalizationService(ILogger<LocalizationService> logger, IDirectoryServic
 
     public async Task<string> Get(string locale, string key, params object[] args)
     {
+        using var tracker = TelemetryHelper.TrackOperation("get_translations", new Dictionary<string, object?>
+        {
+            ["locale"] = locale,
+            ["key"] = key,
+        });
+        
         var cacheKey = $"{locale}_{key}";
         if (!_memoryCache.TryGetValue(cacheKey, out string? translatedString))
         {

From 99177366b31fb64c8d523a2b97d7ac4a36bb4c51 Mon Sep 17 00:00:00 2001
From: Amelia <77553571+Fesaa@users.noreply.github.com>
Date: Sat, 16 Aug 2025 09:21:08 +0200
Subject: [PATCH 4/9] Message field & client in title

---
 UI/Web/public/assets/i18n/en.json                    |  7 +++++--
 .../manage-delivery/manage-delivery.component.html   | 12 +++++++++++-
 .../app/manage-delivery/manage-delivery.component.ts |  3 ++-
 3 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/UI/Web/public/assets/i18n/en.json b/UI/Web/public/assets/i18n/en.json
index f16214c..8402a59 100644
--- a/UI/Web/public/assets/i18n/en.json
+++ b/UI/Web/public/assets/i18n/en.json
@@ -61,7 +61,8 @@
   "manage-delivery": {
     "loading": "Loading...",
     "new-delivery": "New Delivery",
-    "edit-delivery-with-id": "Edit Delivery #{{id}}",
+    "edit-delivery-with-id": "Edit Delivery #{{id}} to {{name}}",
+    "unknown": "unknown",
     "items-selected": "{{count}} items selected",
     "save-delivery": "Save Delivery",
     "save": "{{common.save}}",
@@ -71,7 +72,9 @@
     "from": "From",
     "success": "Successfully updated your delivery",
     "failed": "Failed to submit your delivery, check your input",
-    "delivery-locked": "This delivery cannot be changed in its current state"
+    "delivery-locked": "This delivery cannot be changed in its current state",
+    "message-label": "Message",
+    "message-tooltip": "An optional message, as extra information"
   },
 
   "filter": {
diff --git a/UI/Web/src/app/manage-delivery/manage-delivery.component.html b/UI/Web/src/app/manage-delivery/manage-delivery.component.html
index 73536f5..54e96f3 100644
--- a/UI/Web/src/app/manage-delivery/manage-delivery.component.html
+++ b/UI/Web/src/app/manage-delivery/manage-delivery.component.html
@@ -16,7 +16,7 @@ <h1 class="h3 mb-1" style="color: var(--text-primary);">
                 @if (delivery().id === -1) {
                   {{ t('new-delivery') }}
                 } @else {
-                  {{ t('edit-delivery-with-id', { id: delivery().id }) }}
+                  {{ t('edit-delivery-with-id', { id: delivery().id, name: selectedClient()?.name ?? t('unknown') }) }}
                 }
               </h1>
               @if (totalItems() > 0) {
@@ -169,6 +169,16 @@ <h5 class="mb-0" style="color: var(--text-primary);">
             }
           }
         </div>
+
+        <div class="col-12 mb-3">
+          @if (deliveryForm.get('message'); as formControl) {
+            <app-settings-item [canEdit]="false" [showEdit]="false" [title]="t('message-label')" [subtitle]="t('message-tooltip')" [control]="formControl">
+              <ng-template #view>
+                <textarea formControlName="message" class="form-control"></textarea>
+              </ng-template>
+            </app-settings-item>
+          }
+        </div>
       </div>
 
       <div class="mobile-menu-bar fixed-bottom d-md-none p-3">
diff --git a/UI/Web/src/app/manage-delivery/manage-delivery.component.ts b/UI/Web/src/app/manage-delivery/manage-delivery.component.ts
index 06ae610..26ed3ff 100644
--- a/UI/Web/src/app/manage-delivery/manage-delivery.component.ts
+++ b/UI/Web/src/app/manage-delivery/manage-delivery.component.ts
@@ -20,10 +20,11 @@ import {
 } from '../browse-deliveries/_components/transition-delivery-modal/transition-delivery-modal.component';
 import {DefaultModalOptions} from '../_models/default-modal-options';
 import {ModalService} from '../_services/modal.service';
+import {SettingsItemComponent} from '../shared/components/settings-item/settings-item.component';
 
 @Component({
   selector: 'app-manage-delivery',
-  imports: [CommonModule, ReactiveFormsModule, TranslocoDirective, TypeaheadComponent, RouterLink],
+  imports: [CommonModule, ReactiveFormsModule, TranslocoDirective, TypeaheadComponent, RouterLink, SettingsItemComponent],
   templateUrl: './manage-delivery.component.html',
   styleUrl: './manage-delivery.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush

From 0bc8714dcb74664575d6198a8c0785074417af7a Mon Sep 17 00:00:00 2001
From: Amelia <77553571+Fesaa@users.noreply.github.com>
Date: Sat, 16 Aug 2025 09:38:20 +0200
Subject: [PATCH 5/9] Postgres, api key for metrics

---
 API/API.csproj              |  1 +
 API/Startup.cs              | 23 +++++++++++++++++++++++
 In-Out.sln.DotSettings.user |  3 +++
 3 files changed, 27 insertions(+)

diff --git a/API/API.csproj b/API/API.csproj
index 78ef9d5..7f730cb 100644
--- a/API/API.csproj
+++ b/API/API.csproj
@@ -25,6 +25,7 @@
       <PackageReference Include="Microsoft.Extensions.DependencyInjection" Version="9.0.7" />
       <PackageReference Include="MimeTypeMapOfficial" Version="1.0.17" />
       <PackageReference Include="Npgsql.EntityFrameworkCore.PostgreSQL" Version="9.0.4" />
+      <PackageReference Include="Npgsql.OpenTelemetry" Version="9.0.3" />
       <PackageReference Include="OpenTelemetry" Version="1.12.0" />
       <PackageReference Include="OpenTelemetry.Exporter.OpenTelemetryProtocol" Version="1.12.0" />
       <PackageReference Include="OpenTelemetry.Instrumentation.AspNetCore" Version="1.12.0" />
diff --git a/API/Startup.cs b/API/Startup.cs
index df22b53..b293e3b 100644
--- a/API/Startup.cs
+++ b/API/Startup.cs
@@ -8,8 +8,10 @@
 using API.Middleware;
 using Microsoft.AspNetCore.Http.Features;
 using Microsoft.AspNetCore.ResponseCompression;
+using Microsoft.Extensions.Primitives;
 using Microsoft.Net.Http.Headers;
 using Microsoft.OpenApi.Models;
+using Npgsql;
 using OpenTelemetry.Metrics;
 using OpenTelemetry.Resources;
 using Serilog;
@@ -94,6 +96,7 @@ public void ConfigureServices(IServiceCollection services)
             .WithMetrics(metrics => metrics
                 .AddAspNetCoreInstrumentation()
                 .AddHttpClientInstrumentation()
+                .AddNpgsqlInstrumentation()
                 .AddMeter(BuildInfo.AppName)
                 .AddPrometheusExporter());
     }
@@ -169,6 +172,26 @@ public void Configure(IApplicationBuilder app, IServiceProvider serviceProvider,
                 ctx.Context.Response.Headers["X-Robots-Tag"] = "noindex,nofollow";
             }
         });
+
+
+
+        var apiKey = cfg.GetValue<string>("ApiKey");
+        app.Use(async (ctx, next) =>
+        {
+            if (ctx.Request.Path.StartsWithSegments("/metrics"))
+            {
+                if (!ctx.Request.Query.TryGetValue("api-key", out var key) ||
+                    key != apiKey || string.IsNullOrWhiteSpace(apiKey))
+                {
+                    ctx.Response.StatusCode = StatusCodes.Status401Unauthorized;
+                    await ctx.Response.WriteAsync("Unauthorized");
+                    return;
+                }
+            }
+
+            await next();
+        });
+        
         app.UseEndpoints(endpoints =>
         {
             endpoints.MapControllers();
diff --git a/In-Out.sln.DotSettings.user b/In-Out.sln.DotSettings.user
index 35e7817..71401df 100644
--- a/In-Out.sln.DotSettings.user
+++ b/In-Out.sln.DotSettings.user
@@ -1,9 +1,12 @@
 <wpf:ResourceDictionary xml:space="preserve" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:s="clr-namespace:System;assembly=mscorlib" xmlns:ss="urn:shemas-jetbrains-com:settings-storage-xaml" xmlns:wpf="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
 	<s:String x:Key="/Default/CodeInspection/ExcludedFiles/FilesAndFoldersToSkip2/=7020124F_002D9FFC_002D4AC3_002D8F3D_002DAAB8E0240759_002Ff_003AAbpQueryableExtensions_002Ecs_002Fl_003A_002E_002E_003F_002E_002E_003FLibrary_003FApplication_0020Support_003FJetBrains_003FRider2025_002E1_003Fresharper_002Dhost_003FDecompilerCache_003Fdecompiler_003Ff7619338572a4bd6b0d6f039441a8abe30000_003F6d_003F25c9a86f_003FAbpQueryableExtensions_002Ecs/@EntryIndexedValue">ForceIncluded</s:String>
 	<s:String x:Key="/Default/CodeInspection/ExcludedFiles/FilesAndFoldersToSkip2/=7020124F_002D9FFC_002D4AC3_002D8F3D_002DAAB8E0240759_002Ff_003AAspNetCoreInstrumentationMeterProviderBuilderExtensions_002Ecs_002Fl_003A_002E_002E_003F_002E_002E_003FLibrary_003FApplication_0020Support_003FJetBrains_003FRider2025_002E1_003Fresharper_002Dhost_003FSourcesCache_003F7297519ad078988ec22f4244182a4be9e69be051f6717cc45f678d78a2c9287_003FAspNetCoreInstrumentationMeterProviderBuilderExtensions_002Ecs/@EntryIndexedValue">ForceIncluded</s:String>
+	<s:String x:Key="/Default/CodeInspection/ExcludedFiles/FilesAndFoldersToSkip2/=7020124F_002D9FFC_002D4AC3_002D8F3D_002DAAB8E0240759_002Ff_003AHealthCheckEndpointRouteBuilderExtensions_002Ecs_002Fl_003A_002E_002E_003F_002E_002E_003FLibrary_003FApplication_0020Support_003FJetBrains_003FRider2025_002E1_003Fresharper_002Dhost_003FSourcesCache_003F4b9ef0955b90cd90f6838d866ade6191e884783cff47113b862dd93ace4c1247_003FHealthCheckEndpointRouteBuilderExtensions_002Ecs/@EntryIndexedValue">ForceIncluded</s:String>
 	<s:String x:Key="/Default/CodeInspection/ExcludedFiles/FilesAndFoldersToSkip2/=7020124F_002D9FFC_002D4AC3_002D8F3D_002DAAB8E0240759_002Ff_003AHttpClientInstrumentationMeterProviderBuilderExtensions_002Ecs_002Fl_003A_002E_002E_003F_002E_002E_003FLibrary_003FApplication_0020Support_003FJetBrains_003FRider2025_002E1_003Fresharper_002Dhost_003FSourcesCache_003F5e77e36a956011b43a705c853b1746f35f99d82ac23952e7fa47d2a19456ef_003FHttpClientInstrumentationMeterProviderBuilderExtensions_002Ecs/@EntryIndexedValue">ForceIncluded</s:String>
+	<s:String x:Key="/Default/CodeInspection/ExcludedFiles/FilesAndFoldersToSkip2/=7020124F_002D9FFC_002D4AC3_002D8F3D_002DAAB8E0240759_002Ff_003AIHealthCheck_002Ecs_002Fl_003A_002E_002E_003F_002E_002E_003FLibrary_003FApplication_0020Support_003FJetBrains_003FRider2025_002E1_003Fresharper_002Dhost_003FDecompilerCache_003Fdecompiler_003F6e1f1cecb1e548f29127651d9abe0f1d5600_003F15_003Fbe18ce27_003FIHealthCheck_002Ecs/@EntryIndexedValue">ForceIncluded</s:String>
 	<s:String x:Key="/Default/CodeInspection/ExcludedFiles/FilesAndFoldersToSkip2/=7020124F_002D9FFC_002D4AC3_002D8F3D_002DAAB8E0240759_002Ff_003ALoggerConfiguration_002Ecs_002Fl_003AC_0021_003FUsers_003FAamel_003FAppData_003FRoaming_003FJetBrains_003FRider2024_002E3_003Fresharper_002Dhost_003FDecompilerCache_003Fdecompiler_003F74ca1d8fbb4e46c08b3445afb0cadf3927800_003F3b_003F662b0056_003FLoggerConfiguration_002Ecs/@EntryIndexedValue">ForceIncluded</s:String>
 	<s:String x:Key="/Default/CodeInspection/ExcludedFiles/FilesAndFoldersToSkip2/=7020124F_002D9FFC_002D4AC3_002D8F3D_002DAAB8E0240759_002Ff_003APrometheusExporterApplicationBuilderExtensions_002Ecs_002Fl_003A_002E_002E_003F_002E_002E_003FLibrary_003FApplication_0020Support_003FJetBrains_003FRider2025_002E1_003Fresharper_002Dhost_003FSourcesCache_003F40b4abe4f99b674acb3c3756e48f1ec672b359ed65b7f1bfde1589e2ff73a2_003FPrometheusExporterApplicationBuilderExtensions_002Ecs/@EntryIndexedValue">ForceIncluded</s:String>
+	<s:String x:Key="/Default/CodeInspection/ExcludedFiles/FilesAndFoldersToSkip2/=7020124F_002D9FFC_002D4AC3_002D8F3D_002DAAB8E0240759_002Ff_003APrometheusExporterEndpointRouteBuilderExtensions_002Ecs_002Fl_003A_002E_002E_003F_002E_002E_003FLibrary_003FApplication_0020Support_003FJetBrains_003FRider2025_002E1_003Fresharper_002Dhost_003FSourcesCache_003F13936231af69c214273ff1a26928ac94e2e6febce688398cad1fb7a56cfb48e_003FPrometheusExporterEndpointRouteBuilderExtensions_002Ecs/@EntryIndexedValue">ForceIncluded</s:String>
 	<s:String x:Key="/Default/CodeInspection/ExcludedFiles/FilesAndFoldersToSkip2/=7020124F_002D9FFC_002D4AC3_002D8F3D_002DAAB8E0240759_002Ff_003AVersion_002Ecs_002Fl_003AC_0021_003FUsers_003FAamel_003FAppData_003FRoaming_003FJetBrains_003FRider2024_002E3_003Fresharper_002Dhost_003FSourcesCache_003Fe2a884fc9ca8537885d3c13b86387ec99428fc9c70b49fe548a2c43be866546_003FVersion_002Ecs/@EntryIndexedValue">ForceIncluded</s:String>
 	<s:String x:Key="/Default/Environment/AssemblyExplorer/XmlDocument/@EntryValue">&lt;AssemblyExplorer&gt;
   &lt;Assembly Path="/Users/amelia/.nuget/packages/testcontainers/4.6.0/lib/net9.0/Testcontainers.dll" /&gt;

From 6a3858900dada6c0cec05e0a46094d330ffb5e77 Mon Sep 17 00:00:00 2001
From: Amelia <77553571+Fesaa@users.noreply.github.com>
Date: Sat, 16 Aug 2025 09:39:32 +0200
Subject: [PATCH 6/9] Update appsettings template

---
 API/config/appsettings.json | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/API/config/appsettings.json b/API/config/appsettings.json
index 10f68b8..e04ad28 100644
--- a/API/config/appsettings.json
+++ b/API/config/appsettings.json
@@ -5,5 +5,12 @@
       "Microsoft.AspNetCore": "Warning"
     }
   },
-  "AllowedHosts": "*"
+  "OpenIdConnect": {
+    "Authority": "",
+    "ClientId": ""
+  },
+  "ConnectionStrings": {
+    "Postgres": ""
+  },
+  "ApiKey": ""
 }

From d01a1fbb3456b69d65fd7211e951a42c5fa49293 Mon Sep 17 00:00:00 2001
From: Amelia <77553571+Fesaa@users.noreply.github.com>
Date: Sun, 17 Aug 2025 15:12:05 +0200
Subject: [PATCH 7/9] Defaults values, nicer table sizes

---
 UI/Web/public/assets/i18n/en.json             |  1 +
 .../browse-deliveries.component.html          | 24 +++++++++++++------
 .../client-modal/client-modal.component.html  | 14 +++++------
 .../client-modal/client-modal.component.ts    |  4 +++-
 .../management-clients.component.html         | 10 +++++---
 .../management-clients.component.ts           |  2 ++
 UI/Web/src/theme/components/table.scss        |  6 +++++
 7 files changed, 43 insertions(+), 18 deletions(-)

diff --git a/UI/Web/public/assets/i18n/en.json b/UI/Web/public/assets/i18n/en.json
index f16214c..620a10a 100644
--- a/UI/Web/public/assets/i18n/en.json
+++ b/UI/Web/public/assets/i18n/en.json
@@ -89,6 +89,7 @@
     "from": "From",
     "to": "Recipient",
     "state": "Delivery state",
+    "size": "Size",
     "created": "Created on",
     "actions": "Actions",
     "transition": "Transition"
diff --git a/UI/Web/src/app/browse-deliveries/browse-deliveries.component.html b/UI/Web/src/app/browse-deliveries/browse-deliveries.component.html
index c29ea71..18a8810 100644
--- a/UI/Web/src/app/browse-deliveries/browse-deliveries.component.html
+++ b/UI/Web/src/app/browse-deliveries/browse-deliveries.component.html
@@ -12,6 +12,7 @@
         <th class="table-header-cell">{{t('from')}}</th>
         <th class="table-header-cell">{{t('to')}}</th>
         <th class="table-header-cell">{{t('state')}}</th>
+        <th class="table-header-cell">{{t('size')}}</th>
         <th class="table-header-cell">{{t('created')}}</th>
         <th class="table-header-cell">{{t('actions')}}</th>
       </tr>
@@ -23,16 +24,25 @@
       <td class="table-cell">
         <app-badge [colour]="stateBadgeColour(delivery.state)" [clickAble]="true" (click)="transitionDelivery(delivery)">{{delivery.state | deliveryState}}</app-badge>
       </td>
+      <td class="table-cell">
+        <app-badge>{{delivery.lines.length}}</app-badge>
+      </td>
       <td class="table-cell">{{ delivery.createdUtc ?? '—' | utcToLocalTime:'shortDate' }}</td>
-      <td class="table-cell d-flex align-items-center gap-2">
+      <td class="table-cell">
+
+        <div class="d-flex align-items-center gap-2">
+          <button class="btn btn-sm" [ngbTooltip]="t('transition')" (click)="transitionDelivery(delivery)">
+            <i class="fas fa-arrows-spin"></i>
+          </button>
 
-        <button class="btn btn-sm" [ngbTooltip]="t('transition')" (click)="transitionDelivery(delivery)">
-          <i class="fas fa-arrows-spin"></i>
-        </button>
+          <a class="btn btn-sm" href="/delivery/manage?deliveryId={{delivery.id}}" target="_blank" >
+            <i class="fas fa-pencil"></i>
+          </a>
 
-        <a class="btn btn-sm" href="/delivery/manage?deliveryId={{delivery.id}}" target="_blank" >
-          <i class="fas fa-pencil"></i>
-        </a>
+          <button class="btn btn-sm">
+            <i class="fas fa-info"></i>
+          </button>
+        </div>
 
       </td>
     </ng-template>
diff --git a/UI/Web/src/app/management/management-clients/_components/client-modal/client-modal.component.html b/UI/Web/src/app/management/management-clients/_components/client-modal/client-modal.component.html
index 86903a5..e000fad 100644
--- a/UI/Web/src/app/management/management-clients/_components/client-modal/client-modal.component.html
+++ b/UI/Web/src/app/management/management-clients/_components/client-modal/client-modal.component.html
@@ -22,7 +22,7 @@ <h5 class="modal-title">{{t('title')}}</h5>
             @if (clientForm.get('name'); as control) {
               <app-settings-item [control]="control" [title]="t('name')" [subtitle]="t('name-tooltip')">
                 <ng-template #view>
-                  {{control.value}}
+                  {{control.value | defaultValue}}
                 </ng-template>
                 <ng-template #edit>
                   <input formControlName="name" type="text" class="form-control" id="form-control-name">
@@ -35,7 +35,7 @@ <h5 class="modal-title">{{t('title')}}</h5>
             @if (clientForm.get('address'); as control) {
               <app-settings-item [control]="control" [title]="t('address')" [subtitle]="t('address-tooltip')">
                 <ng-template #view>
-                  {{control.value}}
+                  {{control.value | defaultValue}}
                 </ng-template>
                 <ng-template #edit>
                   <textarea formControlName="address" type="text" class="form-control" id="form-control-address"></textarea>
@@ -48,7 +48,7 @@ <h5 class="modal-title">{{t('title')}}</h5>
             @if (clientForm.get('companyNumber'); as control) {
               <app-settings-item [control]="control" [title]="t('companyNumber')" [subtitle]="t('companyNumber-tooltip')">
                 <ng-template #view>
-                  {{control.value}}
+                  {{control.value | defaultValue}}
                 </ng-template>
                 <ng-template #edit>
                   <input formControlName="companyNumber" type="text" class="form-control" id="form-control-companyNumber">
@@ -61,7 +61,7 @@ <h5 class="modal-title">{{t('title')}}</h5>
             @if (clientForm.get('contactEmail'); as control) {
               <app-settings-item [control]="control" [title]="t('contactEmail')" [subtitle]="t('contactEmail-tooltip')">
                 <ng-template #view>
-                  {{control.value}}
+                  {{control.value | defaultValue}}
                 </ng-template>
                 <ng-template #edit>
                   <input formControlName="contactEmail" type="text" class="form-control" id="form-control-contactEmail">
@@ -74,7 +74,7 @@ <h5 class="modal-title">{{t('title')}}</h5>
             @if (clientForm.get('contactName'); as control) {
               <app-settings-item [control]="control" [title]="t('contactName')" [subtitle]="t('contactName-tooltip')">
                 <ng-template #view>
-                  {{control.value}}
+                  {{control.value | defaultValue}}
                 </ng-template>
                 <ng-template #edit>
                   <input formControlName="contactName" type="text" class="form-control" id="form-control-contactName">
@@ -87,7 +87,7 @@ <h5 class="modal-title">{{t('title')}}</h5>
             @if (clientForm.get('contactNumber'); as control) {
               <app-settings-item [control]="control" [title]="t('contactNumber')" [subtitle]="t('contactNumber-tooltip')">
                 <ng-template #view>
-                  {{control.value}}
+                  {{control.value | defaultValue}}
                 </ng-template>
                 <ng-template #edit>
                   <input formControlName="contactNumber" type="text" class="form-control" id="form-control-contactNumber">
@@ -100,7 +100,7 @@ <h5 class="modal-title">{{t('title')}}</h5>
             @if (clientForm.get('invoiceEmail'); as control) {
               <app-settings-item [control]="control" [title]="t('invoiceEmail')" [subtitle]="t('invoiceEmail-tooltip')">
                 <ng-template #view>
-                  {{control.value}}
+                  {{control.value | defaultValue}}
                 </ng-template>
                 <ng-template #edit>
                   <input formControlName="invoiceEmail" type="text" class="form-control" id="form-control-invoiceEmail">
diff --git a/UI/Web/src/app/management/management-clients/_components/client-modal/client-modal.component.ts b/UI/Web/src/app/management/management-clients/_components/client-modal/client-modal.component.ts
index ad3210a..916dfc4 100644
--- a/UI/Web/src/app/management/management-clients/_components/client-modal/client-modal.component.ts
+++ b/UI/Web/src/app/management/management-clients/_components/client-modal/client-modal.component.ts
@@ -6,6 +6,7 @@ import {FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators} fr
 import {ModalDismissReasons, NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';
 import {ClientService} from '../../../../_services/client.service';
 import {SettingsItemComponent} from '../../../../shared/components/settings-item/settings-item.component';
+import {DefaultValuePipe} from '../../../../_pipes/default-value.pipe';
 
 @Component({
   selector: 'app-client-modal',
@@ -14,7 +15,8 @@ import {SettingsItemComponent} from '../../../../shared/components/settings-item
     LoadingSpinnerComponent,
     FormsModule,
     ReactiveFormsModule,
-    SettingsItemComponent
+    SettingsItemComponent,
+    DefaultValuePipe
   ],
   templateUrl: './client-modal.component.html',
   styleUrl: './client-modal.component.scss',
diff --git a/UI/Web/src/app/management/management-clients/management-clients.component.html b/UI/Web/src/app/management/management-clients/management-clients.component.html
index 87e5f52..3e05c6a 100644
--- a/UI/Web/src/app/management/management-clients/management-clients.component.html
+++ b/UI/Web/src/app/management/management-clients/management-clients.component.html
@@ -67,13 +67,17 @@ <h4 class="warning-title">{{t('no-clients.title')}}</h4>
             {{item.name}}
           </td>
           <td class="table-cell">
-            {{item.companyNumber}}
+            {{item.companyNumber | defaultValue}}
           </td>
           <td class="table-cell">
-            <a [href]="'mailto:' + item.contactEmail">{{item.contactEmail}}</a>
+            @if (item.contactEmail) {
+              <a [href]="'mailto:' + item.contactEmail">{{item.contactEmail}}</a>
+            } @else {
+              {{null | defaultValue}}
+            }
           </td>
           <td class="table-cell">
-            {{item.contactNumber}}
+            {{item.contactNumber | defaultValue}}
           </td>
           <td class="table-cell d-flex align-items-center gap-2">
             <button
diff --git a/UI/Web/src/app/management/management-clients/management-clients.component.ts b/UI/Web/src/app/management/management-clients/management-clients.component.ts
index 8b1daf8..2f76342 100644
--- a/UI/Web/src/app/management/management-clients/management-clients.component.ts
+++ b/UI/Web/src/app/management/management-clients/management-clients.component.ts
@@ -7,6 +7,7 @@ import {LoadingSpinnerComponent} from '../../shared/components/loading-spinner/l
 import {TableComponent} from '../../shared/components/table/table.component';
 import {ClientModalComponent} from './_components/client-modal/client-modal.component';
 import {DefaultModalOptions} from '../../_models/default-modal-options';
+import {DefaultValuePipe} from '../../_pipes/default-value.pipe';
 
 @Component({
   selector: 'app-management-clients',
@@ -14,6 +15,7 @@ import {DefaultModalOptions} from '../../_models/default-modal-options';
     TranslocoDirective,
     LoadingSpinnerComponent,
     TableComponent,
+    DefaultValuePipe,
   ],
   templateUrl: './management-clients.component.html',
   styleUrl: './management-clients.component.scss',
diff --git a/UI/Web/src/theme/components/table.scss b/UI/Web/src/theme/components/table.scss
index 2f22de8..8e9d32e 100644
--- a/UI/Web/src/theme/components/table.scss
+++ b/UI/Web/src/theme/components/table.scss
@@ -39,3 +39,9 @@
     font-weight: 500;
   }
 }
+
+.table-header-cell:last-child,
+.table-cell:last-child {
+  width: 1%;
+  white-space: nowrap;
+}

From 2206c549cf4670927f67435cd296fd0459a32ebd Mon Sep 17 00:00:00 2001
From: Amelia <77553571+Fesaa@users.noreply.github.com>
Date: Sun, 17 Aug 2025 16:49:44 +0200
Subject: [PATCH 8/9] Import clients

---
 API/Controllers/ClientController.cs           |  12 +
 API/Services/ClientService.cs                 |  18 +-
 UI/Web/package-lock.json                      |  35 +++
 UI/Web/package.json                           |   3 +
 UI/Web/public/assets/i18n/en.json             |  25 +-
 UI/Web/src/app/_pipes/client-field-pipe.ts    |  31 +++
 UI/Web/src/app/_services/client.service.ts    |   4 +
 .../clients-table.component.html              |  66 ++++++
 .../clients-table.component.scss              |   0
 .../clients-table/clients-table.component.ts  |  31 +++
 .../import-client-modal.component.html        |  61 +++++
 .../import-client-modal.component.scss        |   0
 .../import-client-modal.component.ts          | 224 ++++++++++++++++++
 .../management-clients.component.html         |  44 +---
 .../management-clients.component.ts           |  11 +-
 15 files changed, 523 insertions(+), 42 deletions(-)
 create mode 100644 UI/Web/src/app/_pipes/client-field-pipe.ts
 create mode 100644 UI/Web/src/app/management/management-clients/_components/clients-table/clients-table.component.html
 create mode 100644 UI/Web/src/app/management/management-clients/_components/clients-table/clients-table.component.scss
 create mode 100644 UI/Web/src/app/management/management-clients/_components/clients-table/clients-table.component.ts
 create mode 100644 UI/Web/src/app/management/management-clients/_components/import-client-modal/import-client-modal.component.html
 create mode 100644 UI/Web/src/app/management/management-clients/_components/import-client-modal/import-client-modal.component.scss
 create mode 100644 UI/Web/src/app/management/management-clients/_components/import-client-modal/import-client-modal.component.ts

diff --git a/API/Controllers/ClientController.cs b/API/Controllers/ClientController.cs
index 4fe6061..d32df58 100644
--- a/API/Controllers/ClientController.cs
+++ b/API/Controllers/ClientController.cs
@@ -52,6 +52,18 @@ public async Task<IActionResult> CreateClient(ClientDto dto)
         return Ok();
     }
 
+    /// <summary>
+    /// Create several clients at once
+    /// </summary>
+    /// <param name="dtos"></param>
+    /// <returns></returns>
+    [HttpPost("create-bulk")]
+    public async Task<ActionResult> CreateClientBulk(IList<ClientDto> dtos)
+    {
+        await clientService.CreateClients(dtos);
+        return Ok();
+    }
+
     /// <summary>
     /// Update an existing client
     /// </summary>
diff --git a/API/Services/ClientService.cs b/API/Services/ClientService.cs
index 2a4d44b..c6ff431 100644
--- a/API/Services/ClientService.cs
+++ b/API/Services/ClientService.cs
@@ -10,6 +10,7 @@ namespace API.Services;
 public interface IClientService
 {
     Task CreateClient(ClientDto dto);
+    Task CreateClients(IList<ClientDto> dtos);
     Task UpdateClient(ClientDto dto);
     Task DeleteClient(int id);
 }
@@ -18,6 +19,22 @@ public class ClientService(IUnitOfWork unitOfWork, ILogger<ClientService> logger
 {
 
     public async Task CreateClient(ClientDto dto)
+    {
+        await CreateClientFromDto(dto);
+        await unitOfWork.CommitAsync();
+    }
+
+    public async Task CreateClients(IList<ClientDto> dtos)
+    {
+        foreach (var dto in dtos)
+        {
+            await CreateClientFromDto(dto);
+        }
+
+        await unitOfWork.CommitAsync();
+    }
+
+    private async Task CreateClientFromDto(ClientDto dto)
     {
         if (!string.IsNullOrWhiteSpace(dto.CompanyNumber))
         {
@@ -39,7 +56,6 @@ public async Task CreateClient(ClientDto dto)
         };
         
         unitOfWork.ClientRepository.Add(client);
-        await unitOfWork.CommitAsync();
     }
 
     public async Task UpdateClient(ClientDto dto)
diff --git a/UI/Web/package-lock.json b/UI/Web/package-lock.json
index dd04610..c286309 100644
--- a/UI/Web/package-lock.json
+++ b/UI/Web/package-lock.json
@@ -16,6 +16,7 @@
         "@angular/forms": "^20.1.1",
         "@angular/platform-browser": "^20.1.1",
         "@angular/router": "^20.1.1",
+        "@iplab/ngx-file-upload": "^20.0.0",
         "@jsverse/transloco": "^7.6.1",
         "@ng-bootstrap/ng-bootstrap": "^19.0.1",
         "@popperjs/core": "^2.11.8",
@@ -23,6 +24,7 @@
         "bootstrap": "^5.3.6",
         "luxon": "^3.7.1",
         "ngx-toastr": "^19.0.0",
+        "papaparse": "^5.5.3",
         "rxjs": "~7.8.0",
         "tslib": "^2.3.0",
         "zone.js": "~0.15.0"
@@ -34,6 +36,7 @@
         "@angular/localize": "^20.1.1",
         "@types/jasmine": "~5.1.0",
         "@types/luxon": "^3.6.2",
+        "@types/papaparse": "^5.3.16",
         "jasmine-core": "~5.7.0",
         "karma": "~6.4.0",
         "karma-chrome-launcher": "~3.2.0",
@@ -1744,6 +1747,22 @@
         }
       }
     },
+    "node_modules/@iplab/ngx-file-upload": {
+      "version": "20.0.0",
+      "resolved": "https://registry.npmjs.org/@iplab/ngx-file-upload/-/ngx-file-upload-20.0.0.tgz",
+      "integrity": "sha512-cBUg9Y3WgIWcumS6ei6JX77EaZL9lR/jsu9T4FEE0kbZd6N3xcwFYscWcqNHHRhImeKHPHFMfVU4oW9CuiDFxQ==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/animations": "^20.0.0",
+        "@angular/common": "^20.0.0",
+        "@angular/core": "^20.0.0",
+        "@angular/forms": "^20.0.0",
+        "rxjs": "^7.0.0"
+      }
+    },
     "node_modules/@isaacs/cliui": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
@@ -3891,6 +3910,16 @@
         "undici-types": "~7.8.0"
       }
     },
+    "node_modules/@types/papaparse": {
+      "version": "5.3.16",
+      "resolved": "https://registry.npmjs.org/@types/papaparse/-/papaparse-5.3.16.tgz",
+      "integrity": "sha512-T3VuKMC2H0lgsjI9buTB3uuKj3EMD2eap1MOuEQuBQ44EnDx/IkGhU6EwiTf9zG3za4SKlmwKAImdDKdNnCsXg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@vitejs/plugin-basic-ssl": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-basic-ssl/-/plugin-basic-ssl-2.1.0.tgz",
@@ -8137,6 +8166,12 @@
         "node": "^20.17.0 || >=22.9.0"
       }
     },
+    "node_modules/papaparse": {
+      "version": "5.5.3",
+      "resolved": "https://registry.npmjs.org/papaparse/-/papaparse-5.5.3.tgz",
+      "integrity": "sha512-5QvjGxYVjxO59MGU2lHVYpRWBBtKHnlIAcSe1uNFCkkptUh63NFRj0FJQm7nR67puEruUci/ZkjmEFrjCAyP4A==",
+      "license": "MIT"
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
diff --git a/UI/Web/package.json b/UI/Web/package.json
index b45d0a3..caecbef 100644
--- a/UI/Web/package.json
+++ b/UI/Web/package.json
@@ -28,6 +28,7 @@
     "@angular/forms": "^20.1.1",
     "@angular/platform-browser": "^20.1.1",
     "@angular/router": "^20.1.1",
+    "@iplab/ngx-file-upload": "^20.0.0",
     "@jsverse/transloco": "^7.6.1",
     "@ng-bootstrap/ng-bootstrap": "^19.0.1",
     "@popperjs/core": "^2.11.8",
@@ -35,6 +36,7 @@
     "bootstrap": "^5.3.6",
     "luxon": "^3.7.1",
     "ngx-toastr": "^19.0.0",
+    "papaparse": "^5.5.3",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.15.0"
@@ -46,6 +48,7 @@
     "@angular/localize": "^20.1.1",
     "@types/jasmine": "~5.1.0",
     "@types/luxon": "^3.6.2",
+    "@types/papaparse": "^5.3.16",
     "jasmine-core": "~5.7.0",
     "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.2.0",
diff --git a/UI/Web/public/assets/i18n/en.json b/UI/Web/public/assets/i18n/en.json
index 620a10a..5ab1ea9 100644
--- a/UI/Web/public/assets/i18n/en.json
+++ b/UI/Web/public/assets/i18n/en.json
@@ -58,6 +58,26 @@
     "invoiceEmail-tooltip": "Email to receive invoices and billing-related communications"
   },
 
+  "import-client-modal": {
+    "title": "Import clients from CSV",
+    "cancel": "{{common.cancel}}",
+    "create": "{{common.create}}",
+    "close": "{{common.close}}",
+    "import": "Import",
+    "next": "Next",
+    "import-description": "Select your csv export, to mass import clients from a known source"
+  },
+
+  "client-field-pipe": {
+    "name": "Name",
+    "address": "Address",
+    "company-number": "Company Number",
+    "contact-email": "Contact Email",
+    "contact-name": "Contact Name",
+    "contact-number": "Contact Number",
+    "invoice-email": "Invoice email"
+  },
+
   "manage-delivery": {
     "loading": "Loading...",
     "new-delivery": "New Delivery",
@@ -305,7 +325,10 @@
           "companyNumber": "Company number",
           "contactEmail": "Email",
           "contactNumber": "Phone number",
-          "actions": "{{common.actions}}"
+          "actions": "{{common.actions}}",
+          "address": "Address",
+          "invoiceEmail": "Invoice Email",
+          "contactName": "Contact Name"
         }
       }
     }
diff --git a/UI/Web/src/app/_pipes/client-field-pipe.ts b/UI/Web/src/app/_pipes/client-field-pipe.ts
new file mode 100644
index 0000000..5519a94
--- /dev/null
+++ b/UI/Web/src/app/_pipes/client-field-pipe.ts
@@ -0,0 +1,31 @@
+import {Pipe, PipeTransform} from '@angular/core';
+import {
+  ClientField
+} from '../management/management-clients/_components/import-client-modal/import-client-modal.component';
+import {translate} from '@jsverse/transloco';
+
+@Pipe({
+  name: 'clientField'
+})
+export class ClientFieldPipe implements PipeTransform {
+
+  transform(value: ClientField): string {
+    switch (value) {
+      case ClientField.Name:
+        return translate('client-field-pipe.name');
+      case ClientField.Address:
+        return translate('client-field-pipe.address');
+      case ClientField.CompanyNumber:
+        return translate('client-field-pipe.company-number');
+      case ClientField.ContactEmail:
+        return translate('client-field-pipe.contact-email');
+      case ClientField.ContactName:
+        return translate('client-field-pipe.contact-name');
+      case ClientField.ContactNumber:
+        return translate('client-field-pipe.contact-number');
+      case ClientField.InvoiceEmail:
+        return translate('client-field-pipe.invoice-email');
+    }
+  }
+
+}
diff --git a/UI/Web/src/app/_services/client.service.ts b/UI/Web/src/app/_services/client.service.ts
index b972d68..69f5349 100644
--- a/UI/Web/src/app/_services/client.service.ts
+++ b/UI/Web/src/app/_services/client.service.ts
@@ -31,6 +31,10 @@ export class ClientService {
     return this.http.post<void>(this.baseUrl, dto);
   }
 
+  createBulk(dtos: Client[]): Observable<void> {
+    return this.http.post<void>(this.baseUrl+"create-bulk", dtos);
+  }
+
   update(dto: Client): Observable<void> {
     return this.http.put<void>(this.baseUrl, dto);
   }
diff --git a/UI/Web/src/app/management/management-clients/_components/clients-table/clients-table.component.html b/UI/Web/src/app/management/management-clients/_components/clients-table/clients-table.component.html
new file mode 100644
index 0000000..7353244
--- /dev/null
+++ b/UI/Web/src/app/management/management-clients/_components/clients-table/clients-table.component.html
@@ -0,0 +1,66 @@
+<app-table [items]="clients()" [trackByIdFunc]="clientTracker" *transloco="let t; prefix: 'management.clients.table'">
+  <ng-template #header>
+    <tr>
+      <th class="table-header-cell">
+        {{t('header.name')}}
+      </th>
+      <th class="table-header-cell">
+        {{t('header.address')}}
+      </th>
+      <th class="table-header-cell">
+        {{t('header.companyNumber')}}
+      </th>
+      <th class="table-header-cell">
+        {{t('header.invoiceEmail')}}
+      </th>
+      <th class="table-header-cell">
+        {{t('header.contactName')}}
+      </th>
+      <th class="table-header-cell">
+        {{t('header.contactEmail')}}
+      </th>
+      <th class="table-header-cell">
+        {{t('header.contactNumber')}}
+      </th>
+      @if (showActions()) {
+        <th class="table-header-cell">
+          {{t('header.actions')}}
+        </th>
+      }
+    </tr>
+  </ng-template>
+  <ng-template #cell let-item>
+    <td class="table-cell">
+      {{item.name}}
+    </td>
+    <td class="table-cell">
+      {{item.address | defaultValue}}
+    </td>
+    <td class="table-cell">
+      {{item.companyNumber | defaultValue}}
+    </td>
+    <td class="table-cell">
+      @if (item.invoiceEmail) {
+        <a [href]="'mailto:' + item.invoiceEmail">{{item.invoiceEmail}}</a>
+      } @else {
+        {{null | defaultValue}}
+      }
+    </td>
+    <td class="table-cell">
+      {{item.contactName | defaultValue}}
+    </td>
+    <td class="table-cell">
+      @if (item.contactEmail) {
+        <a [href]="'mailto:' + item.contactEmail">{{item.contactEmail}}</a>
+      } @else {
+        {{null | defaultValue}}
+      }
+    </td>
+    <td class="table-cell">
+      {{item.contactNumber | defaultValue}}
+    </td>
+    @if (showActions()) {
+      <ng-container [ngTemplateOutlet]="actionsRef" [ngTemplateOutletContext]="{$implicit: item}"></ng-container>
+    }
+  </ng-template>
+</app-table>
diff --git a/UI/Web/src/app/management/management-clients/_components/clients-table/clients-table.component.scss b/UI/Web/src/app/management/management-clients/_components/clients-table/clients-table.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/UI/Web/src/app/management/management-clients/_components/clients-table/clients-table.component.ts b/UI/Web/src/app/management/management-clients/_components/clients-table/clients-table.component.ts
new file mode 100644
index 0000000..c85ad5b
--- /dev/null
+++ b/UI/Web/src/app/management/management-clients/_components/clients-table/clients-table.component.ts
@@ -0,0 +1,31 @@
+import {ChangeDetectionStrategy, Component, ContentChild, input, TemplateRef, ViewChild} from '@angular/core';
+import {TableComponent} from '../../../../shared/components/table/table.component';
+import {Client} from '../../../../_models/client';
+import {TranslocoDirective} from '@jsverse/transloco';
+import {DefaultValuePipe} from '../../../../_pipes/default-value.pipe';
+import {NgTemplateOutlet} from '@angular/common';
+
+@Component({
+  selector: 'app-clients-table',
+  imports: [
+    TableComponent,
+    TranslocoDirective,
+    DefaultValuePipe,
+    NgTemplateOutlet
+  ],
+  templateUrl: './clients-table.component.html',
+  styleUrl: './clients-table.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ClientsTableComponent {
+
+  @ContentChild("actions") actionsRef!: TemplateRef<any>;
+
+  showActions = input.required<boolean>();
+  clients = input.required<Client[]>();
+
+  clientTracker(idx: number, client: Client): string {
+    return `${client.id}`
+  }
+
+}
diff --git a/UI/Web/src/app/management/management-clients/_components/import-client-modal/import-client-modal.component.html b/UI/Web/src/app/management/management-clients/_components/import-client-modal/import-client-modal.component.html
new file mode 100644
index 0000000..0a93e45
--- /dev/null
+++ b/UI/Web/src/app/management/management-clients/_components/import-client-modal/import-client-modal.component.html
@@ -0,0 +1,61 @@
+<ng-container *transloco="let t; prefix: 'import-client-modal'">
+  <div class="modal-container">
+    <div class="modal-header">
+      <h5 class="modal-title">{{t('title')}}</h5>
+      <button type="button" class="btn-close" [attr.aria-label]="t('close')" (click)="close()">
+      </button>
+    </div>
+
+    <div class="modal-body scrollable-modal">
+
+      @switch (currentStage()) {
+        @case (StageId.FileImport) {
+          <div class="row g-0">
+            <p>{{t('import-description')}}</p>
+            <form [formGroup]="uploadForm" enctype="multipart/form-data">
+              <file-upload [multiple]="false" formControlName="files"></file-upload>
+            </form>
+          </div>
+        }
+        @case (StageId.HeaderMatch) {
+          <form [formGroup]="headerMatchForm" class="row">
+            @for (headerMappingControl of headerArray.controls; track headerMappingControl.get('header')!.value) {
+              @let header = headerMappingControl.get('header')!.value;
+
+              <div class="col-md-6 col-sm-12">
+                <app-settings-item [control]="headerMappingControl" [title]="header" [canEdit]="false" [showEdit]="false">
+                  <ng-template #view>
+                    <div [formGroup]="headerMappingControl">
+                      <select class="form-select" formControlName="field">
+                        @for (field of fields; track field) {
+                          <option [ngValue]="field">{{field | clientField}}</option>
+                        }
+                      </select>
+                    </div>
+                  </ng-template>
+                </app-settings-item>
+              </div>
+
+            }
+          </form>
+        }
+        @case (StageId.Confirm) {
+          <app-clients-table [clients]="clients()" [showActions]="false"></app-clients-table>
+        }
+      }
+
+    </div>
+
+    <div class="modal-footer">
+      <button type="button" class="btn btn-secondary" (click)="close()">
+        {{t('cancel')}}
+      </button>
+      <button type="button" class="btn btn-olive" (click)="nextStep()" [disabled]="isSaving() || !canMoveToNext()">
+        @if (isSaving()) {
+          <app-loading-spinner />
+        }
+        <span>{{isSaving() ? t('saving') : buttonLabel()}}</span>
+      </button>
+    </div>
+  </div>
+</ng-container>
diff --git a/UI/Web/src/app/management/management-clients/_components/import-client-modal/import-client-modal.component.scss b/UI/Web/src/app/management/management-clients/_components/import-client-modal/import-client-modal.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/UI/Web/src/app/management/management-clients/_components/import-client-modal/import-client-modal.component.ts b/UI/Web/src/app/management/management-clients/_components/import-client-modal/import-client-modal.component.ts
new file mode 100644
index 0000000..3dfe792
--- /dev/null
+++ b/UI/Web/src/app/management/management-clients/_components/import-client-modal/import-client-modal.component.ts
@@ -0,0 +1,224 @@
+import {ChangeDetectionStrategy, Component, computed, inject, signal} from '@angular/core';
+import {LoadingSpinnerComponent} from '../../../../shared/components/loading-spinner/loading-spinner.component';
+import {translate, TranslocoDirective} from '@jsverse/transloco';
+import {ClientService} from '../../../../_services/client.service';
+import {NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';
+import {FormArray, FormControl, FormGroup, NonNullableFormBuilder, ReactiveFormsModule} from '@angular/forms';
+import {FileUploadComponent, FileUploadValidators} from '@iplab/ngx-file-upload';
+import {map} from 'rxjs';
+import {toSignal} from '@angular/core/rxjs-interop';
+import {ToastrService} from 'ngx-toastr';
+import Papa from 'papaparse';
+import {SettingsItemComponent} from '../../../../shared/components/settings-item/settings-item.component';
+import {ClientFieldPipe} from '../../../../_pipes/client-field-pipe';
+import {Client} from '../../../../_models/client';
+import {TableComponent} from '../../../../shared/components/table/table.component';
+import {DefaultValuePipe} from '../../../../_pipes/default-value.pipe';
+import {ClientsTableComponent} from '../clients-table/clients-table.component';
+
+enum StageId {
+  FileImport = 'file-import',
+  HeaderMatch = 'header-match',
+  Confirm  = 'confirm',
+}
+
+export enum ClientField {
+  Name = 0,
+  Address = 1,
+  CompanyNumber = 2,
+  InvoiceEmail = 3,
+  ContactName = 4,
+  ContactEmail = 5,
+  ContactNumber = 6,
+}
+
+const fields: ClientField[] = [ClientField.Name, ClientField.Address, ClientField.CompanyNumber,
+ClientField.InvoiceEmail, ClientField.ContactName, ClientField.ContactEmail, ClientField.ContactNumber];
+
+type HeaderMappingControl = FormGroup<{
+  header: FormControl<string>,
+  field: FormControl<ClientField>,
+  index: FormControl<number>
+}>;
+
+@Component({
+  selector: 'app-import-client-modal',
+  imports: [
+    LoadingSpinnerComponent,
+    TranslocoDirective,
+    ReactiveFormsModule,
+    FileUploadComponent,
+    SettingsItemComponent,
+    ClientFieldPipe,
+    TableComponent,
+    DefaultValuePipe,
+    ClientsTableComponent,
+  ],
+  templateUrl: './import-client-modal.component.html',
+  styleUrl: './import-client-modal.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ImportClientModalComponent {
+
+  private readonly clientService = inject(ClientService);
+  protected readonly modal = inject(NgbActiveModal);
+  private readonly toastr = inject(ToastrService);
+  private readonly fb = inject(NonNullableFormBuilder);
+
+  fileUploadControl = new FormControl<undefined | Array<File>>(undefined, [
+    FileUploadValidators.accept(['.csv']), FileUploadValidators.filesLimit(1)
+  ]);
+
+  uploadForm = new FormGroup({
+    files: this.fileUploadControl,
+  });
+
+  headerMatchForm: FormGroup<{headers: FormArray<HeaderMappingControl>}> = new FormGroup({
+    headers: new FormArray<HeaderMappingControl>([])
+  });
+
+  isSaving = signal(false);
+  currentStage = signal(StageId.FileImport);
+  // CSV data without header
+  data = signal<string[][]>([]);
+  clients = signal<Client[]>([]);
+
+  isFileSelected = toSignal(this.uploadForm.get('files')!.valueChanges
+    .pipe(map((files) => !!files && files.length == 1)), {initialValue: false});
+
+  buttonLabel = computed(() => {
+    switch (this.currentStage()) {
+      case StageId.FileImport:
+        return translate('import-client-modal.next');
+      case StageId.HeaderMatch:
+        return translate('import-client-modal.next');
+      case StageId.Confirm :
+        return translate('import-client-modal.import');
+    }
+  });
+  canMoveToNext = computed(() => {
+    switch (this.currentStage()) {
+      case StageId.FileImport:
+        return this.isFileSelected();
+      case StageId.HeaderMatch:
+        return this.headerMatchForm.valid;
+      case StageId.Confirm :
+        return true;
+    }
+  });
+
+  get headerArray(): FormArray<HeaderMappingControl> {
+    return this.headerMatchForm.get('headers')! as FormArray<HeaderMappingControl>;
+  }
+
+  async nextStep() {
+    switch (this.currentStage()) {
+      case StageId.FileImport:
+        await this.handleFileImport();
+        break;
+      case StageId.HeaderMatch:
+        await this.constructClients();
+        break;
+      case StageId.Confirm:
+        this.import();
+        break;
+    }
+  }
+
+  private async handleFileImport() {
+    const files = this.fileUploadControl.value;
+    if (!files || files.length === 0) {
+      this.toastr.error(translate('import-client-modal.select-files-warning'));
+      return;
+    }
+
+    const file = files[0];
+    const text = await file.text();
+    const res = Papa.parse<string[]>(text, {header: false, delimiter: ','});
+    if (res.errors.length > 0) {
+      console.log(res);
+      this.toastr.error(translate('import-client-modal.parse-error'));
+      return;
+    }
+
+    const data = res.data;
+    if (data.length < 2) {
+      this.toastr.error(translate('import-client-modal.header-only-or-none'));
+      return;
+    }
+
+    const headers = data[0];
+    this.headerArray.setValue([]);
+
+    headers.forEach((header, idx) => {
+      this.headerArray.push(this.fb.group({
+        header: this.fb.control(header),
+        field: this.fb.control(fields[idx % fields.length]),
+        index: this.fb.control(idx),
+      }));
+    });
+
+    this.data.set(res.data.slice(1).filter(d => d.length === headers.length));
+    this.currentStage.set(StageId.HeaderMatch);
+  }
+
+  private async constructClients() {
+    const mappings = this.headerArray.controls.map(c => c.value);
+
+    const clients: Client[] = [];
+
+    for (const dataRow of this.data()) {
+
+      const client: Partial<Client> = {};
+
+
+      for (const field of fields) {
+        const mapping = mappings.find(mapping => mapping.field === field);
+        const value = (mapping !== undefined && mapping.index !== undefined) ? dataRow[mapping.index] : '';
+
+        switch (field) {
+          case ClientField.Name:
+            client.name = value;
+            break;
+          case ClientField.Address:
+            client.address = value;
+            break;
+          case ClientField.ContactEmail:
+            client.contactEmail = value;
+            break;
+          case ClientField.CompanyNumber:
+            client.companyNumber = value;
+            break;
+          case ClientField.InvoiceEmail:
+            client.invoiceEmail = value;
+            break;
+          case ClientField.ContactNumber:
+            client.contactNumber = value;
+            break;
+          case ClientField.ContactName:
+            client.contactName = value;
+            break;
+        }
+      }
+
+      clients.push(client as Client);
+    }
+
+    this.clients.set(clients);
+    this.currentStage.set(StageId.Confirm);
+  }
+
+  private import() {
+    this.clientService.createBulk(this.clients()).subscribe({
+      next: () => this.close(),
+    });
+  }
+
+  close() {
+    this.modal.close();
+  }
+
+  protected readonly StageId = StageId;
+  protected readonly fields = fields;
+  protected readonly JSON = JSON;
+}
diff --git a/UI/Web/src/app/management/management-clients/management-clients.component.html b/UI/Web/src/app/management/management-clients/management-clients.component.html
index 3e05c6a..f0808e7 100644
--- a/UI/Web/src/app/management/management-clients/management-clients.component.html
+++ b/UI/Web/src/app/management/management-clients/management-clients.component.html
@@ -5,7 +5,8 @@ <h2 class="manager-title">{{t('title')}}</h2>
       <div class="action-buttons">
         <button
           type="button"
-          class="btn btn-olive">
+          class="btn btn-olive"
+          (click)="importClients()">
           <i class="fas fa-file-import" aria-hidden="true"></i>
           {{t('import-clients')}}
         </button>
@@ -42,43 +43,8 @@ <h4 class="warning-title">{{t('no-clients.title')}}</h4>
     <app-loading-spinner size="large"></app-loading-spinner>
   } @else {
     <div class="mt-4">
-      <app-table [items]="clients()" [trackByIdFunc]="clientTracker" *transloco="let t; prefix: 'management.clients.table'">
-        <ng-template #header>
-          <tr>
-            <th class="table-header-cell">
-              {{t('header.name')}}
-            </th>
-            <th class="table-header-cell">
-              {{t('header.companyNumber')}}
-            </th>
-            <th class="table-header-cell">
-              {{t('header.contactEmail')}}
-            </th>
-            <th class="table-header-cell">
-              {{t('header.contactNumber')}}
-            </th>
-            <th class="table-header-cell">
-              {{t('header.actions')}}
-            </th>
-          </tr>
-        </ng-template>
-        <ng-template #cell let-item>
-          <td class="table-cell">
-            {{item.name}}
-          </td>
-          <td class="table-cell">
-            {{item.companyNumber | defaultValue}}
-          </td>
-          <td class="table-cell">
-            @if (item.contactEmail) {
-              <a [href]="'mailto:' + item.contactEmail">{{item.contactEmail}}</a>
-            } @else {
-              {{null | defaultValue}}
-            }
-          </td>
-          <td class="table-cell">
-            {{item.contactNumber | defaultValue}}
-          </td>
+      <app-clients-table [clients]="clients()" [showActions]="true">
+        <ng-template #actions let-item>
           <td class="table-cell d-flex align-items-center gap-2">
             <button
               type="button"
@@ -96,7 +62,7 @@ <h4 class="warning-title">{{t('no-clients.title')}}</h4>
             </button>
           </td>
         </ng-template>
-      </app-table>
+      </app-clients-table>
     </div>
   }
 
diff --git a/UI/Web/src/app/management/management-clients/management-clients.component.ts b/UI/Web/src/app/management/management-clients/management-clients.component.ts
index 2f76342..add2a3a 100644
--- a/UI/Web/src/app/management/management-clients/management-clients.component.ts
+++ b/UI/Web/src/app/management/management-clients/management-clients.component.ts
@@ -8,6 +8,8 @@ import {TableComponent} from '../../shared/components/table/table.component';
 import {ClientModalComponent} from './_components/client-modal/client-modal.component';
 import {DefaultModalOptions} from '../../_models/default-modal-options';
 import {DefaultValuePipe} from '../../_pipes/default-value.pipe';
+import {ImportClientModalComponent} from './_components/import-client-modal/import-client-modal.component';
+import {ClientsTableComponent} from './_components/clients-table/clients-table.component';
 
 @Component({
   selector: 'app-management-clients',
@@ -16,6 +18,7 @@ import {DefaultValuePipe} from '../../_pipes/default-value.pipe';
     LoadingSpinnerComponent,
     TableComponent,
     DefaultValuePipe,
+    ClientsTableComponent,
   ],
   templateUrl: './management-clients.component.html',
   styleUrl: './management-clients.component.scss',
@@ -47,13 +50,19 @@ export class ManagementClientsComponent implements OnInit {
     return `${client.id}`
   }
 
+  importClients() {
+    const [modal, component] = this.modalService.open(ImportClientModalComponent, DefaultModalOptions);
+
+    modal.closed.subscribe(() => this.loadClients());
+  }
+
   createOrUpdateClient(client?: Client) {
     const [modal, component] = this.modalService.open(ClientModalComponent, DefaultModalOptions);
     if (client) {
       component.client.set(client);
     }
 
-    modal.closed.subscribe(() => this.loadClients())
+    modal.closed.subscribe(() => this.loadClients());
   }
 
   async deleteClient(client: Client) {

From f46043ebb49dbc9f76bb66b3f0fb7184c333acc8 Mon Sep 17 00:00:00 2001
From: Amelia <77553571+Fesaa@users.noreply.github.com>
Date: Fri, 22 Aug 2025 16:45:07 +0200
Subject: [PATCH 9/9] Allow env var for the db connection string

---
 API/Extensions/ApplicationServiceExtensions.cs | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/API/Extensions/ApplicationServiceExtensions.cs b/API/Extensions/ApplicationServiceExtensions.cs
index ab97e25..d197ba0 100644
--- a/API/Extensions/ApplicationServiceExtensions.cs
+++ b/API/Extensions/ApplicationServiceExtensions.cs
@@ -39,7 +39,8 @@ public static void AddApplicationServices(this IServiceCollection services, ICon
 
     private static void AddPostgres(this IServiceCollection services, IConfiguration configuration)
     {
-        var pgConnectionString = configuration.GetConnectionString("Postgres");
+        var pgConnectionString = Environment.GetEnvironmentVariable("CONNECTION_STRING")
+                                 ?? configuration.GetConnectionString("Postgres");
 
         services.AddDbContextPool<DataContext>(options =>
         {