Refactor headers, health UI, and workflow type handling

- Refactored HeaderTitle to support optional icons and improved layout; updated all usages to provide relevant icons for visual distinction.
- Enhanced Health page: added card layout, status chips with color/icons, refresh button, improved loading/empty states, and client-side filtering.
- Changed Health nav icon to MonitorHeart for consistency.
- Made "Add workflow" button more prominent in Workflows page.
- Refactored SearchablePluginsList to use "Type:Version" string for OnItemClick and removed default LocalFileSystem entry.
- Simplified WorkflowTask.Type to a string ("Plugin:Version") and updated WorkflowDesigner logic accordingly.
- Performed minor code cleanups and consistency improvements.

#91

Author: ziagham

src/Components/Layout/HeaderTitle.razor

@@ -1,15 +1,43 @@
-<MudText Typo="Typo.h5" Color="Color.Default" Class="@CombineClass("mb-0")">
-    @Title
-</MudText>
-<MudText Typo="Typo.subtitle2" Class="@CombineClass("mb-5 gray-subtitle")">
-    @Description
-</MudText>
+@using MudBlazor
+
+<MudStack Row="true"
+          Spacing="2"
+          AlignItems="AlignItems.Baseline"
+          Class="@CombineClass("mb-6")">
+
+    @if (!string.IsNullOrWhiteSpace(Icon))
+    {
+        <MudAvatar Size="Size.Medium"
+                   Color="@IconColor"
+                   Variant="Variant.Filled">
+            <MudIcon Icon="@Icon" />
+        </MudAvatar>
+    }
+
+    <MudStack Direction="Column" Spacing="1" AlignItems="AlignItems.Baseline">
+        <MudText Typo="Typo.h5" Class="font-weight-medium">
+            @Title
+        </MudText>
+
+        @if (!string.IsNullOrWhiteSpace(Description))
+        {
+            <MudText Typo="Typo.body2" Class="gray-subtitle">
+                @Description
+            </MudText>
+        }
+    </MudStack>
+</MudStack>
 
 @code {
     [Parameter] public required string Title { get; set; }
     [Parameter] public string? Description { get; set; }
     [Parameter] public string? Class { get; set; }
 
+    // Optional icon parameters
+    [Parameter] public string? Icon { get; set; }
+    [Parameter] public Color IconColor { get; set; } = Color.Default;
+    [Parameter] public Size IconSize { get; set; } = Size.Medium;
+
     private string CombineClass(string defaultClass)
     {
         // If user provided a class, combine it with default class

src/Components/Layout/NavMenu.razor

@@ -17,7 +17,7 @@
     <MudDivider />
     <MudNavLink Href="/health"
                 Match="NavLinkMatch.Prefix"
-                Icon="@Icons.Material.Filled.HealthAndSafety">Health</MudNavLink>
+                Icon="@Icons.Material.Filled.MonitorHeart">Health</MudNavLink>
     <MudDivider />
     <MudNavLink Href="/version"
                 Match="NavLinkMatch.Prefix"

src/Components/Pages/AllLogs/Logs.razor

@@ -11,7 +11,12 @@
 
 <PageTitle>FlowSynx Logs</PageTitle>
 
-<HeaderTitle Title="Logs" Description="Search and browse execution logs with filtering options." />
+<HeaderTitle 
+    Title="Logs" 
+    Description="Search and browse execution logs with filtering options." 
+    Icon="@Icons.Material.Filled.ReceiptLong"
+    IconColor="Color.Primary"
+    IconSize="Size.Large" />
 
 <MudPaper Class="px-4 pb-4 mb-4">
     <MudForm>

src/Components/Pages/Health/Health.razor

@@ -10,36 +10,78 @@
 
 <PageTitle>FlowSynx HealthCheck</PageTitle>
 
-<HeaderTitle Title="Health Check" Description="Checking the Health of the FlowSynx System and Its Components" />
-
-<MudTable 
-    T="IndividualHealthCheckResponse" 
-    ServerData="LoadData" 
-    Dense="true" 
-    Hover="true" 
-    Bordered="false" 
-    Striped="false" 
-    @ref="_table" LoadingProgressColor="Color.Primary">
-    <HeaderContent>
-        <MudTh>Component</MudTh>
-        <MudTh>Description</MudTh>
-        <MudTh>Status</MudTh>
-    </HeaderContent>
-    <RowTemplate>
-        <MudTd DataLabel="Component"><b>@context.Component</b></MudTd>
-        <MudTd DataLabel="Description">@context.Description</MudTd>
-        <MudTd DataLabel="Status">@context.Status</MudTd>
-    </RowTemplate>
-    <NoRecordsContent>
-        <MudText>No matching records found</MudText>
-    </NoRecordsContent>
-    <LoadingContent>
-        <MudText>Loading...</MudText>
-    </LoadingContent>
-</MudTable>
+<HeaderTitle 
+    Title="Health Check" 
+    Description="Checking the Health of the FlowSynx System and Its Components"
+    Icon="@Icons.Material.Filled.MonitorHeart"
+    IconColor="Color.Primary"
+    IconSize="Size.Large" />
+
+<MudContainer MaxWidth="MaxWidth.False" Class="pa-0">
+    <MudCard Elevation="1">
+        <MudTable 
+            T="IndividualHealthCheckResponse" 
+            ServerData="LoadData" 
+            Dense="true" 
+            Hover="true" 
+            Bordered="false" 
+            Striped="false" 
+            @ref="_table" 
+            LoadingProgressColor="Color.Primary"
+            RowClassFunc="GetRowClass">
+            <ToolBarContent>
+                <MudButton Variant="Variant.Outlined" 
+                           Color="Color.Default" 
+                           OnClick="RefreshAsync" 
+                           StartIcon="@Icons.Material.Filled.Refresh" 
+                           Size="@Size.Small">Refresh</MudButton>
+            </ToolBarContent>
+            <HeaderContent>
+                <MudTh>Component</MudTh>
+                <MudTh>Description</MudTh>
+                <MudTh>Status</MudTh>
+            </HeaderContent>
+            <RowTemplate>
+                <MudTd DataLabel="Component">
+                    <MudStack Direction="Row" Spacing="1">
+                        <MudText Typo="Typo.body1"><b>@context.Component</b></MudText>
+                    </MudStack>
+                </MudTd>
+                <MudTd DataLabel="Description">
+                    <MudText Typo="Typo.body2">@context.Description</MudText>
+                </MudTd>
+                <MudTd DataLabel="Status">
+                    <MudChip T="string" Color="@GetStatusColor(context.Status)" Variant="Variant.Filled" Icon="@GetStatusIcon(context.Status)" Dense="true">
+                        @context.Status
+                    </MudChip>
+                </MudTd>
+            </RowTemplate>
+            <NoRecordsContent>
+                <MudEmptyState Icon="@Icons.Material.Outlined.SearchOff"
+                               Title="No matching records"
+                               Description="Try adjusting your search or refresh the data." />
+            </NoRecordsContent>
+            <LoadingContent>
+                <MudStack Direction="Row" Spacing="2" Class="pa-4">
+                    <MudProgressCircular Color="Color.Primary" />
+                    <MudText>Loading…</MudText>
+                </MudStack>
+            </LoadingContent>
+        </MudTable>
+    </MudCard>
+</MudContainer>
 
 @code {
     private MudTable<IndividualHealthCheckResponse>? _table;
+    private string? _search;
+    private int _healthyCount;
+    private int _degradedCount;
+    private int _unhealthyCount;
+
+    private async Task RefreshAsync()
+    {
+        await (_table?.ReloadServerData() ?? Task.CompletedTask);
+    }
 
     private async Task<TableData<IndividualHealthCheckResponse>> LoadData(
         TableState state, 
@@ -55,22 +97,78 @@
                 return new TableData<IndividualHealthCheckResponse> { Items = [], TotalItems = 0 };
             }
 
-            var plugins = result.Payload.HealthChecks;
+            var plugins = result.Payload.HealthChecks?.ToList() ?? [];
+
+            // Apply search filter (client-side) using table state or local search box
+            var searchTerm = !string.IsNullOrWhiteSpace(_search) ? _search : "";
+            if (!string.IsNullOrWhiteSpace(searchTerm))
+            {
+                var s = searchTerm.Trim();
+                plugins = plugins.Where(p =>
+                    (p.Component?.Contains(s, StringComparison.OrdinalIgnoreCase) ?? false) ||
+                    (p.Description?.Contains(s, StringComparison.OrdinalIgnoreCase) ?? false) ||
+                    (p.Status?.Contains(s, StringComparison.OrdinalIgnoreCase) ?? false)).ToList();
+            }
+
+            // Compute summary counts
+            _healthyCount = plugins.Count(p => EqualsIgnoreCase(p.Status, "Healthy") || EqualsIgnoreCase(p.Status, "Ok") || EqualsIgnoreCase(p.Status, "Pass"));
+            _degradedCount = plugins.Count(p => EqualsIgnoreCase(p.Status, "Degraded") || EqualsIgnoreCase(p.Status, "Warn") || EqualsIgnoreCase(p.Status, "Warning"));
+            _unhealthyCount = plugins.Count(p => EqualsIgnoreCase(p.Status, "Unhealthy") || EqualsIgnoreCase(p.Status, "Fail") || EqualsIgnoreCase(p.Status, "Error"));
 
             return new TableData<IndividualHealthCheckResponse>
-                {
-                    Items = plugins,
-                    TotalItems = plugins.Count()
-                };
+            {
+                Items = plugins,
+                TotalItems = plugins.Count
+            };
         }
         catch (Exception ex)
         {
             SnackBar.Add($"Exception occurred: {ex.Message}", Severity.Error);
+            _healthyCount = 0;
+            _degradedCount = 0;
+            _unhealthyCount = 0;
+
             return new TableData<IndividualHealthCheckResponse>
-                {
-                    Items = [],
-                    TotalItems = 0
-                };
+            {
+                Items = [],
+                TotalItems = 0
+            };
         }
     }
+
+    private static Color GetStatusColor(string? status)
+    {
+        if (status is null) return Color.Default;
+        return status.ToLowerInvariant() switch
+        {
+            "healthy" or "ok" or "pass" => Color.Success,
+            "degraded" or "warn" or "warning" => Color.Warning,
+            "unhealthy" or "fail" or "error" => Color.Error,
+            _ => Color.Info
+        };
+    }
+
+    private static string GetStatusIcon(string? status)
+    {
+        if (status is null) return Icons.Material.Outlined.Info;
+        return status.ToLowerInvariant() switch
+        {
+            "healthy" or "ok" or "pass" => Icons.Material.Filled.CheckCircle,
+            "degraded" or "warn" or "warning" => Icons.Material.Filled.Warning,
+            "unhealthy" or "fail" or "error" => Icons.Material.Filled.Error,
+            _ => Icons.Material.Outlined.Info
+        };
+    }
+
+    private static string GetRowClass(IndividualHealthCheckResponse item, int rowNumber)
+        => GetStatusColor(item.Status) switch
+        {
+            Color.Success => "row-success",
+            Color.Warning => "row-warning",
+            Color.Error => "row-error",
+            _ => string.Empty
+        };
+
+    private static bool EqualsIgnoreCase(string? a, string b)
+        => string.Equals(a, b, StringComparison.OrdinalIgnoreCase);
 }

src/Components/Pages/Plugins/Plugins.razor

@@ -11,7 +11,12 @@
 
 <PageTitle>FlowSynx Plugins</PageTitle>
 
-<HeaderTitle Title="Installed plugins" Description="This section enumerates all plugins currently installed and available within the FlowSynx system. Each entry includes the plugin name, version, type, and a brief description of its functionality. " />
+<HeaderTitle 
+    Title="Managing plugins"
+    Description="This section enumerates all plugins currently installed and available within the FlowSynx system. Each entry includes the plugin name, version, type, and a brief description of its functionality."
+    Icon="@Icons.Material.Filled.GridView"
+    IconColor="Color.Primary"
+    IconSize="Size.Large" />
 
 <MudTable T="PluginsListResponse"
           ServerData="LoadData"

src/Components/Pages/Version/Version.razor

@@ -6,7 +6,12 @@
 
 <PageTitle>FlowSynx Version</PageTitle>
 
-<HeaderTitle Title="Version" Description="Details about the currently deployed version of the FlowSynx system" />
+<HeaderTitle 
+    Title="Version" 
+    Description="Details about the currently deployed version of the FlowSynx system"
+    Icon="@Icons.Material.Filled.Info"
+    IconColor="Color.Primary"
+    IconSize="Size.Large" />
 
 <MudTable T="VersionResponse" ServerData="LoadData" Dense="true" Hover="true" Bordered="false" Striped="false" @ref="_table" LoadingProgressColor="Color.Primary">
     <HeaderContent>

src/Components/Pages/Workflows/AddWorkflow.razor

@@ -11,7 +11,12 @@
 @inject NavigationManager Navigation
 
 <PageTitle>FlowSynx add workflow</PageTitle>
-<HeaderTitle Title="Workflow designer" Description="A visual interface to create, edit, and manage workflow." />
+<HeaderTitle 
+    Title="Workflow designer" 
+    Description="A visual interface to create, edit, and manage workflow." 
+    Icon="@Icons.Material.Filled.DesignServices"
+    IconColor="Color.Primary"
+    IconSize="Size.Large" />
 
 <MudTabs Outlined="true" Position="Position.Top" Rounded="true" Border="true"
          ApplyEffectsToContainer="true" Class="mb-4">

src/Components/Pages/Workflows/ManageWorkflow.razor

@@ -13,7 +13,12 @@
 @inject NavigationManager Navigation
 
 <PageTitle>FlowSynx manage workflow</PageTitle>
-<HeaderTitle Title="Workflow designer" Description="A visual interface to create, edit, and manage workflow." />
+
+<HeaderTitle Title="Workflow designer"
+             Description="A visual interface to create, edit, and manage workflow."
+             Icon="@Icons.Material.Filled.DesignServices"
+             IconColor="Color.Primary"
+             IconSize="Size.Large" />
 
 <MudTabs Outlined="true"
          Position="Position.Top"

src/Components/Pages/Workflows/SearchablePluginsList.razor

@@ -44,8 +44,9 @@
                     <MudList T="object" Dense="true">
                         @foreach (var version in item.Versions)
                         {
+                            var pluginType = $"{item.Type}:{version}";
                             <MudListItem T="object"
-                                         OnClick="@(() => OnItemClick.InvokeAsync((item.Type, version)))">
+                                         OnClick="@(() => OnItemClick.InvokeAsync(pluginType))">
                                 <MudText Typo="Typo.body2">Version: @version</MudText>
                             </MudListItem>
                         }
@@ -57,15 +58,14 @@
 </MudExpansionPanels>
 
 @code {
-    [Parameter] public EventCallback<(string Type, string Version)> OnItemClick { get; set; }
+    [Parameter] public EventCallback<string> OnItemClick { get; set; }
 
     private List<PluginTypeInfo> Items { get; set; } = new();
     private string _search = string.Empty;
 
     protected override async Task OnInitializedAsync()
     {
         Items = await LoadPluginTypes(CancellationToken.None);
-        Items.Insert(0, new PluginTypeInfo { Type = "LocalFileSystem", Versions = new List<string>() });
     }
 
     private List<PluginTypeInfo> FilteredItems =>
@@ -136,11 +136,12 @@
         if (plugin.Versions.Any())
         {
             var latest = plugin.Versions.First(); // versions are sorted descending
-            OnItemClick.InvokeAsync((plugin.Type, latest));
+            var pluginType = $"{plugin.Type}:{latest}";
+            OnItemClick.InvokeAsync(pluginType);
         }
         else
         {
-            OnItemClick.InvokeAsync((plugin.Type, string.Empty));
+            OnItemClick.InvokeAsync($"{plugin.Type}:latest");
         }
     }