diff --git a/CPRNIMS.Infrastructure/Dto/Canvass/CanvassDto.cs b/CPRNIMS.Infrastructure/Dto/Canvass/CanvassDto.cs
index 31ae3d5..6fe078e 100644
--- a/CPRNIMS.Infrastructure/Dto/Canvass/CanvassDto.cs
+++ b/CPRNIMS.Infrastructure/Dto/Canvass/CanvassDto.cs
@@ -57,7 +57,7 @@ namespace CPRNIMS.Infrastructure.Dto.Canvass
         public long CanvassDetailId { get; set; }
         public long CanvassId { get; set; }
         public decimal QtyRequest { get; set; }
-        //public byte IsApproved { get; set; }   
+        public bool IsInternational { get; set; }   
         public long RRDetailId { get; set; }
         public long PRDetailId { get; set; }
         public decimal Quantity { get; set; }
@@ -75,6 +75,7 @@ namespace CPRNIMS.Infrastructure.Dto.Canvass
         public bool IsDenied { get; set; } = false;
         public string? FullName { get; set; }
         public string? Specification { get; set; }
+    
         public byte CurrencyId { get; set; } = 1;
         public bool VatInc { get; set; }=false;
         public string? TinNo { get; set; }
diff --git a/CPRNIMS.Infrastructure/Dto/Canvass/CanvassItemDto.cs b/CPRNIMS.Infrastructure/Dto/Canvass/CanvassItemDto.cs
new file mode 100644
index 0000000..9842e62
--- /dev/null
+++ b/CPRNIMS.Infrastructure/Dto/Canvass/CanvassItemDto.cs
@@ -0,0 +1,17 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace CPRNIMS.Infrastructure.Dto.Canvass
+{
+    public class CanvassItemDto
+    {
+        public long PRDetailsId { get; set; }
+        public long PRNo { get; set; }
+        public long ItemNo { get; set; }
+        public string ItemDescription { get; set; } = string.Empty;
+        public string ItemName { get; set; } = string.Empty;
+    }
+}
diff --git a/CPRNIMS.Infrastructure/Dto/Canvass/ForCanvassDto.cs b/CPRNIMS.Infrastructure/Dto/Canvass/ForCanvassDto.cs
new file mode 100644
index 0000000..204760e
--- /dev/null
+++ b/CPRNIMS.Infrastructure/Dto/Canvass/ForCanvassDto.cs
@@ -0,0 +1,22 @@
+using System;
+using System.Collections.Generic;
+using System.Data;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace CPRNIMS.Infrastructure.Dto.Canvass
+{
+    public class ForCanvassDto
+    {
+        public short Status {get;set;}
+        public string UserId { get; set; } = string.Empty;
+        public int SupplierId { get; set; }
+        public long PRNo { get; set; }
+        public long ItemNo { get; set; }
+        public int CanvassNo { get; set; }
+        public long PRDetailsId { get; set; }
+        public string FullName { get; set; } = string.Empty;
+        public string? Remarks { get; set; }
+    }
+}
diff --git a/CPRNIMS.Infrastructure/Dto/Canvass/Request/ForCanvassRequest.cs b/CPRNIMS.Infrastructure/Dto/Canvass/Request/ForCanvassRequest.cs
new file mode 100644
index 0000000..0c3a926
--- /dev/null
+++ b/CPRNIMS.Infrastructure/Dto/Canvass/Request/ForCanvassRequest.cs
@@ -0,0 +1,18 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace CPRNIMS.Infrastructure.Dto.Canvass.Request
+{
+    public class ForCanvassRequest
+    {
+        public string UserId { get; set; } = string.Empty;
+        public int SupplierId { get; set; }
+        public long PRNo { get; set; }
+        public long ItemNo { get; set; }
+        public int CanvassNo { get; set; }
+        public long PRDetailsId { get; set; }
+    }
+}
diff --git a/CPRNIMS.Infrastructure/Dto/Canvass/Request/StartCanvassRequest.cs b/CPRNIMS.Infrastructure/Dto/Canvass/Request/StartCanvassRequest.cs
new file mode 100644
index 0000000..4d30065
--- /dev/null
+++ b/CPRNIMS.Infrastructure/Dto/Canvass/Request/StartCanvassRequest.cs
@@ -0,0 +1,18 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Text.Json.Serialization;
+using System.Threading.Tasks;
+
+namespace CPRNIMS.Infrastructure.Dto.Canvass.Request
+{
+    public class StartCanvassRequest
+    {
+        [JsonPropertyName("isInternational")]
+        public bool IsInternational { get; set; }
+
+        [JsonPropertyName("items")]
+        public List<CanvassItemDto> Items { get; set; } = new();
+    }
+}
diff --git a/CPRNIMS.Infrastructure/Dto/Canvass/Request/SupplierRequest.cs b/CPRNIMS.Infrastructure/Dto/Canvass/Request/SupplierRequest.cs
index eb477b4..024be71 100644
--- a/CPRNIMS.Infrastructure/Dto/Canvass/Request/SupplierRequest.cs
+++ b/CPRNIMS.Infrastructure/Dto/Canvass/Request/SupplierRequest.cs
@@ -21,5 +21,6 @@ namespace CPRNIMS.Infrastructure.Dto.Canvass.Request
         public string Address { get; set; } = string.Empty;
         public long ItemNo { get; set; } = 0;
         public string Website { get; set; } = string.Empty;
+        public int SupplierId { get; set; }
     }
 }
diff --git a/CPRNIMS.Infrastructure/Dto/Canvass/Response/StartCanvassResponse.cs b/CPRNIMS.Infrastructure/Dto/Canvass/Response/StartCanvassResponse.cs
new file mode 100644
index 0000000..8fd978d
--- /dev/null
+++ b/CPRNIMS.Infrastructure/Dto/Canvass/Response/StartCanvassResponse.cs
@@ -0,0 +1,16 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace CPRNIMS.Infrastructure.Dto.Canvass.Response
+{
+    public class StartCanvassResponse
+    {
+        public Guid Id { get; set; }
+        public bool IsInternational { get; set; }
+        public string UserId { get; set; } = string.Empty;
+        public List<CanvassItemDto> Items { get; set; } = new();
+    }
+}
diff --git a/CPRNIMS.Infrastructure/Dto/Canvass/Response/SupplierResponse.cs b/CPRNIMS.Infrastructure/Dto/Canvass/Response/SupplierResponse.cs
index b394a14..288bd3f 100644
--- a/CPRNIMS.Infrastructure/Dto/Canvass/Response/SupplierResponse.cs
+++ b/CPRNIMS.Infrastructure/Dto/Canvass/Response/SupplierResponse.cs
@@ -10,18 +10,19 @@ namespace CPRNIMS.Infrastructure.Dto.Canvass.Response
     {
         public int SupplierId { get; set; }
         public string SupplierName { get; set; } = string.Empty;
-        public string EmailAddress { get; set; } = string.Empty;
-        public bool IsActive { get; set; } = true;
-        public string ContactNo { get; set; } = string.Empty;
-        public string ContactPerson { get; set; } = string.Empty;
-        public string LeadTime { get; set; } = string.Empty;
-        public bool VatInc { get; set; } = false;
-        public string Currency { get; set; } = string.Empty;
+        public string? EmailAddress { get; set; }
+        public bool IsActive { get; set; }
+        public string? ContactNo { get; set; }
+        public string? ContactPerson { get; set; }
+        public string? LeadTime { get; set; }
+        public bool? IsVatable { get; set; }
+        public byte? PaymentTermsId { get; set; }
+        public byte? CurrencyId { get; set; }
+        public string? TinNo { get; set; }
+        public string? Address { get; set; }
+        public string? Website { get; set; }
+        public bool VatInc { get; set; }
+        public string Currency { get; set; }=string.Empty;
         public string PaymentTerms { get; set; } = string.Empty;
-        public byte PaymentTermsId { get; set; } = 1;
-        public byte CurrencyId { get; set; } = 1;
-        public string TinNo { get; set; } = string.Empty;
-        public string Address { get; set; } = string.Empty;
-        public string Website { get; set; } = string.Empty;
     }
 }
diff --git a/CPRNIMS.Infrastructure/Dto/Canvass/Response/SupplierResponseDto.cs b/CPRNIMS.Infrastructure/Dto/Canvass/Response/SupplierResponseDto.cs
index bec53b1..7738b49 100644
--- a/CPRNIMS.Infrastructure/Dto/Canvass/Response/SupplierResponseDto.cs
+++ b/CPRNIMS.Infrastructure/Dto/Canvass/Response/SupplierResponseDto.cs
@@ -22,5 +22,6 @@ namespace CPRNIMS.Infrastructure.Dto.Canvass.Response
         public byte PaymentTermsId { get; set; } 
         public byte CurrencyId { get; set; }
         public string? TinNo { get; set; } 
+        public bool IsActive { get; set; }
     }
 }
diff --git a/CPRNIMS.Infrastructure/Dto/Canvass/Result/GroqSupplierResult.cs b/CPRNIMS.Infrastructure/Dto/Canvass/Result/GroqSupplierResult.cs
index bda468b..6f6fba1 100644
--- a/CPRNIMS.Infrastructure/Dto/Canvass/Result/GroqSupplierResult.cs
+++ b/CPRNIMS.Infrastructure/Dto/Canvass/Result/GroqSupplierResult.cs
@@ -1,9 +1,11 @@
 using System;
 using System.Collections.Generic;
+using System.Globalization;
 using System.Linq;
 using System.Text;
 using System.Text.Json;
 using System.Text.Json.Serialization;
+using System.Text.RegularExpressions;
 using System.Threading.Tasks;
 
 namespace CPRNIMS.Infrastructure.Dto.Canvass.Result
@@ -28,12 +30,43 @@ namespace CPRNIMS.Infrastructure.Dto.Canvass.Result
         [JsonPropertyName("source")]
         public string? Source { get; set; }
 
-        [JsonPropertyName("estimated_price_usd")]
+        [JsonConverter(typeof(FlexibleDecimalConverter))]  
         public decimal? EstimatedPriceUsd { get; set; }
 
         [JsonPropertyName("item_specifications")]
         public JsonElement? ItemSpecifications { get; set; }
     }
+    public class FlexibleDecimalConverter : JsonConverter<decimal?>
+    {
+        public override decimal? Read(ref Utf8JsonReader reader, Type typeToConvert, JsonSerializerOptions options)
+        {
+            switch (reader.TokenType)
+            {
+                case JsonTokenType.Number:
+                    return reader.TryGetDecimal(out var num) ? num : null;
+
+                case JsonTokenType.String:
+                    var str = reader.GetString()?.Trim();
+                    if (string.IsNullOrWhiteSpace(str)) return null;
+
+                    // Strip currency symbols and commas e.g. "$1,200.00" → 1200.00
+                    str = Regex.Replace(str, @"[^\d.]", "");
+                    return decimal.TryParse(str, NumberStyles.Any, CultureInfo.InvariantCulture, out var parsed)
+                        ? parsed
+                        : null;  // "contact for pricing", "varies", etc. → null
+
+                case JsonTokenType.Null:
+                default:
+                    return null;
+            }
+        }
+
+        public override void Write(Utf8JsonWriter writer, decimal? value, JsonSerializerOptions options)
+        {
+            if (value.HasValue) writer.WriteNumberValue(value.Value);
+            else writer.WriteNullValue();
+        }
+    }
     public class TavilySearchResult
     {
         public List<TavilyResult> Results { get; set; } = new();
@@ -46,7 +79,11 @@ namespace CPRNIMS.Infrastructure.Dto.Canvass.Result
         public string Content { get; set; } = string.Empty;
         public double Score { get; set; }
     }
-
+    public class GroqMatchResult
+    {
+        public bool Matched { get; set; }
+        public int? SupplierId { get; set; }
+    }
     public class GroqResponse
     {
         public List<GroqChoice> Choices { get; set; } = new();
diff --git a/CPRNIMS.WebApps/Views/CanvassMgmt/Canvass - Copy.cshtml b/CPRNIMS.WebApps/Views/CanvassMgmt/Canvass - Copy.cshtml
deleted file mode 100644
index 24a83dd..0000000
--- a/CPRNIMS.WebApps/Views/CanvassMgmt/Canvass - Copy.cshtml	
+++ /dev/null
@@ -1,1177 +0,0 @@
-<style>
-    :root {
-        --teal-dark: #0d5c63;
-        --teal-mid: #0e7c86;
-        --teal-light: #18a8b5;
-        --teal-pale: #e6f7f8;
-        --text-dark: #1a2e35;
-        --text-muted: #6b8890;
-        --border: #d6eaec;
-        --card-bg: #ffffff;
-        --bg-page: #f0f6f7;
-        --radius-lg: 14px;
-        --radius-sm: 8px;
-        --shadow-card: 0 2px 12px rgba(13,92,99,.10), 0 1px 3px rgba(0,0,0,.06);
-        --shadow-hover: 0 6px 24px rgba(13,92,99,.18);
-        --shadow-drop: 0 8px 28px rgba(13,92,99,.20);
-    }
-
-    * {
-        box-sizing: border-box;
-        margin: 0;
-        padding: 0;
-    }
-
-    /* ── PAGE WRAPPER — fills whatever container ASP.NET gives it ── */
-    .canvass-wrapper {
-        font-family: 'DM Sans', sans-serif;
-        background: var(--bg-page);
-        color: var(--text-dark);
-        width: 100%;
-        padding: 20px 24px 48px;
-    }
-
-    /* ── HEADER ─────────────────────────────────────────────── */
-    .cv-header {
-        background: linear-gradient(135deg, var(--teal-dark) 0%, var(--teal-mid) 55%, var(--teal-light) 100%);
-        padding: 26px 30px 22px;
-        border-radius: var(--radius-lg);
-        position: relative;
-        overflow: hidden;
-        margin-bottom: 18px;
-    }
-
-        .cv-header::before {
-            content: '';
-            position: absolute;
-            inset: 0;
-            background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
-        }
-
-    .cv-header-inner {
-        position: relative;
-        z-index: 1;
-        display: flex;
-        align-items: flex-start;
-        gap: 14px;
-    }
-
-    .cv-header-icon {
-        font-size: 2rem;
-        color: rgba(255,255,255,.85);
-        margin-top: 2px;
-    }
-
-    .cv-header h1 {
-        font-family: 'Space Grotesk', sans-serif;
-        font-size: 1.7rem;
-        font-weight: 700;
-        color: #fff;
-        line-height: 1.2;
-    }
-
-    .cv-header p {
-        font-size: .875rem;
-        color: rgba(255,255,255,.72);
-        margin-top: 4px;
-    }
-
-    /* ── TAB NAV ──────────────────────────────────────────── */
-    .cv-tabs {
-        display: flex;
-        gap: 6px;
-        background: #fff;
-        border-radius: var(--radius-lg);
-        padding: 6px;
-        box-shadow: var(--shadow-card);
-        margin-bottom: 18px;
-    }
-
-    .cv-tab-btn {
-        flex: 1;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        gap: 8px;
-        padding: 11px 18px;
-        border: none;
-        border-radius: var(--radius-sm);
-        background: transparent;
-        color: var(--text-muted);
-        font-family: 'DM Sans', sans-serif;
-        font-size: .875rem;
-        font-weight: 600;
-        cursor: pointer;
-        transition: all .2s ease;
-        white-space: nowrap;
-    }
-
-        .cv-tab-btn i {
-            font-size: .88rem;
-        }
-
-        .cv-tab-btn:hover {
-            background: var(--teal-pale);
-            color: var(--teal-dark);
-        }
-
-        .cv-tab-btn.active {
-            background: var(--teal-mid);
-            color: #fff;
-            box-shadow: 0 2px 8px rgba(14,124,134,.35);
-        }
-
-    .cv-panel {
-        display: none;
-    }
-
-        .cv-panel.active {
-            display: block;
-        }
-
-    /* ── FILTER BAR ───────────────────────────────────────── */
-    .cv-filters {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 10px;
-        align-items: stretch;
-        background: #fff;
-        border-radius: var(--radius-lg);
-        padding: 14px 16px;
-        box-shadow: var(--shadow-card);
-        margin-bottom: 16px;
-    }
-
-    .cv-search-box {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        border: 1.5px solid var(--border);
-        border-radius: var(--radius-sm);
-        padding: 0 12px;
-        flex: 1;
-        min-width: 140px;
-        background: #fff;
-        transition: border-color .2s;
-    }
-
-        .cv-search-box:focus-within {
-            border-color: var(--teal-mid);
-        }
-
-        .cv-search-box i {
-            color: var(--text-muted);
-            font-size: .8rem;
-            flex-shrink: 0;
-        }
-
-        .cv-search-box input {
-            border: none;
-            outline: none;
-            background: transparent;
-            padding: 9px 0;
-            font-family: 'DM Sans', sans-serif;
-            font-size: .875rem;
-            color: var(--text-dark);
-            width: 100%;
-        }
-
-            .cv-search-box input::placeholder {
-                color: var(--text-muted);
-            }
-
-    /* ── SUPPLIER DROPDOWN ────────────────────────────────── */
-    .cv-supplier-wrap {
-        position: relative;
-        flex: 1;
-        min-width: 210px;
-        max-width: 280px;
-    }
-
-    .cv-sup-trigger {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: 8px;
-        height: 100%;
-        min-height: 40px;
-        border: 1.5px solid var(--border);
-        border-radius: var(--radius-sm);
-        padding: 8px 12px;
-        background: #fff;
-        cursor: pointer;
-        user-select: none;
-        font-family: 'DM Sans', sans-serif;
-        font-size: .875rem;
-        transition: border-color .2s;
-    }
-
-        .cv-sup-trigger:hover,
-        .cv-sup-trigger.open {
-            border-color: var(--teal-mid);
-        }
-
-    .cv-sup-left {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        overflow: hidden;
-        color: var(--text-dark);
-    }
-
-        .cv-sup-left i {
-            color: var(--text-muted);
-            font-size: .8rem;
-            flex-shrink: 0;
-        }
-
-    .cv-sup-lbl {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-    }
-
-    .cv-sup-caret {
-        color: var(--text-muted);
-        font-size: .72rem;
-        flex-shrink: 0;
-        transition: transform .2s;
-    }
-
-    .cv-sup-trigger.open .cv-sup-caret {
-        transform: rotate(180deg);
-    }
-
-    .cv-sup-dropdown {
-        display: none;
-        position: absolute;
-        top: calc(100% + 5px);
-        left: 0;
-        right: 0;
-        z-index: 1000;
-        background: #fff;
-        border: 1.5px solid var(--border);
-        border-radius: var(--radius-sm);
-        box-shadow: var(--shadow-drop);
-        overflow: hidden;
-    }
-
-        .cv-sup-dropdown.open {
-            display: flex;
-            flex-direction: column;
-        }
-
-    .cv-sup-searchbox {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        padding: 8px 12px;
-        border-bottom: 1px solid var(--border);
-    }
-
-        .cv-sup-searchbox i {
-            color: var(--text-muted);
-            font-size: .8rem;
-            flex-shrink: 0;
-        }
-
-        .cv-sup-searchbox input {
-            border: none;
-            outline: none;
-            background: transparent;
-            font-family: 'DM Sans', sans-serif;
-            font-size: .85rem;
-            color: var(--text-dark);
-            width: 100%;
-        }
-
-            .cv-sup-searchbox input::placeholder {
-                color: var(--text-muted);
-            }
-
-    .cv-sup-list {
-        max-height: 250px;
-        overflow-y: auto;
-        overscroll-behavior: contain;
-    }
-
-        .cv-sup-list::-webkit-scrollbar {
-            width: 4px;
-        }
-
-        .cv-sup-list::-webkit-scrollbar-thumb {
-            background: var(--border);
-            border-radius: 4px;
-        }
-
-    .cv-sup-opt {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        padding: 9px 12px;
-        cursor: pointer;
-        font-size: .85rem;
-        color: var(--text-dark);
-        transition: background .15s;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-
-        .cv-sup-opt i {
-            color: var(--text-muted);
-            font-size: .78rem;
-            flex-shrink: 0;
-        }
-
-        .cv-sup-opt:hover {
-            background: var(--teal-pale);
-        }
-
-        .cv-sup-opt.active {
-            background: var(--teal-pale);
-            color: var(--teal-dark);
-            font-weight: 600;
-        }
-
-            .cv-sup-opt.active i {
-                color: var(--teal-mid);
-            }
-
-    .cv-sup-empty {
-        padding: 14px 12px;
-        font-size: .85rem;
-        color: var(--text-muted);
-        text-align: center;
-    }
-
-    /* ── FILTER RIGHT SIDE ────────────────────────────────── */
-    .cv-filter-right {
-        display: flex;
-        align-items: center;
-        gap: 10px;
-        margin-left: auto;
-        flex-shrink: 0;
-    }
-
-    .cv-pgsz-lbl {
-        font-size: .8rem;
-        color: var(--text-muted);
-        font-weight: 500;
-    }
-
-    .cv-pgsz-sel {
-        border: 1.5px solid var(--border);
-        border-radius: var(--radius-sm);
-        padding: 8px 10px;
-        background: #fff;
-        font-family: 'DM Sans', sans-serif;
-        font-size: .875rem;
-        color: var(--text-dark);
-        cursor: pointer;
-        outline: none;
-        transition: border-color .2s;
-    }
-
-        .cv-pgsz-sel:focus {
-            border-color: var(--teal-mid);
-        }
-
-    .cv-result-count {
-        font-size: .8rem;
-        font-weight: 600;
-        background: var(--teal-pale);
-        color: var(--teal-dark);
-        padding: 6px 14px;
-        border-radius: 50px;
-        white-space: nowrap;
-    }
-
-    /* ── CARD GRID ────────────────────────────────────────── */
-    .cv-grid {
-        display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
-        gap: 18px;
-        min-height: 220px;
-    }
-
-    /* ── SINGLE CARD ──────────────────────────────────────── */
-    .cv-card {
-        background: var(--card-bg);
-        border-radius: var(--radius-lg);
-        box-shadow: var(--shadow-card);
-        border: 1px solid var(--border);
-        overflow: hidden;
-        display: flex;
-        flex-direction: column;
-        transition: box-shadow .25s, transform .25s;
-    }
-
-        .cv-card:hover {
-            box-shadow: var(--shadow-hover);
-            transform: translateY(-2px);
-        }
-
-    .cv-card-hd {
-        background: linear-gradient(135deg, var(--teal-dark), var(--teal-mid));
-        padding: 14px 16px 12px;
-    }
-
-    .cv-card-code {
-        font-size: .7rem;
-        color: rgba(255,255,255,.62);
-        font-weight: 600;
-        letter-spacing: .06em;
-        text-transform: uppercase;
-        margin-bottom: 3px;
-    }
-
-    .cv-card-name {
-        font-family: 'Space Grotesk', sans-serif;
-        font-size: 1rem;
-        font-weight: 700;
-        color: #fff;
-        line-height: 1.25;
-        word-break: break-word;
-    }
-
-    .cv-card-email {
-        font-size: .77rem;
-        color: rgba(255,255,255,.68);
-        margin-top: 5px;
-        display: flex;
-        align-items: flex-start;
-        gap: 5px;
-        word-break: break-all;
-    }
-
-        .cv-card-email i {
-            margin-top: 2px;
-            flex-shrink: 0;
-        }
-
-    .cv-card-body {
-        padding: 14px 16px;
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        gap: 12px;
-    }
-
-    .cv-agg-row {
-        display: flex;
-        gap: 8px;
-    }
-
-    .cv-agg-badge {
-        flex: 1;
-        background: var(--teal-pale);
-        border: 1px solid var(--border);
-        border-radius: var(--radius-sm);
-        padding: 9px 11px;
-        display: flex;
-        flex-direction: column;
-        gap: 3px;
-    }
-
-    .cv-agg-lbl {
-        font-size: .67rem;
-        text-transform: uppercase;
-        letter-spacing: .06em;
-        color: var(--text-muted);
-        font-weight: 700;
-        display: flex;
-        align-items: center;
-        gap: 4px;
-    }
-
-    .cv-agg-val {
-        font-size: .83rem;
-        color: var(--teal-dark);
-        font-weight: 600;
-        line-height: 1.45;
-        word-break: break-word;
-    }
-
-    .cv-item-lbl {
-        font-size: .67rem;
-        text-transform: uppercase;
-        letter-spacing: .06em;
-        color: var(--text-muted);
-        font-weight: 700;
-        display: flex;
-        align-items: center;
-        gap: 4px;
-        margin-bottom: 6px;
-    }
-
-    .cv-item-tags {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 5px;
-    }
-
-    .cv-item-tag {
-        display: inline-block;
-        padding: 3px 9px;
-        background: #f3f8f9;
-        border: 1px solid var(--border);
-        border-radius: 4px;
-        font-size: .78rem;
-        color: var(--text-dark);
-        max-width: 100%;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-    }
-
-    .cv-item-more {
-        display: inline-block;
-        padding: 3px 9px;
-        background: var(--teal-pale);
-        border: 1px solid var(--border);
-        border-radius: 4px;
-        font-size: .78rem;
-        color: var(--teal-dark);
-        font-weight: 600;
-        cursor: default;
-    }
-
-    .cv-card-ft {
-        padding: 10px 16px 14px;
-        display: flex;
-        gap: 8px;
-        border-top: 1px solid var(--border);
-    }
-
-    .cv-btn {
-        flex: 1;
-        padding: 9px 14px;
-        border-radius: var(--radius-sm);
-        border: none;
-        cursor: pointer;
-        font-family: 'DM Sans', sans-serif;
-        font-size: .82rem;
-        font-weight: 600;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        gap: 6px;
-        transition: all .2s;
-    }
-
-    .cv-btn-primary {
-        background: var(--teal-mid);
-        color: #fff;
-    }
-
-        .cv-btn-primary:hover {
-            background: var(--teal-dark);
-        }
-
-    .cv-btn-outline {
-        background: transparent;
-        color: var(--teal-dark);
-        border: 1.5px solid var(--teal-mid);
-    }
-
-        .cv-btn-outline:hover {
-            background: var(--teal-pale);
-        }
-
-    /* ── STATE / SPINNER ──────────────────────────────────── */
-    .cv-state {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        padding: 64px 20px;
-        gap: 14px;
-    }
-
-        .cv-state i {
-            font-size: 2.4rem;
-            color: var(--border);
-        }
-
-        .cv-state p {
-            color: var(--text-muted);
-            font-size: .9rem;
-        }
-
-    .cv-spinner {
-        width: 34px;
-        height: 34px;
-        border: 3px solid var(--border);
-        border-top-color: var(--teal-mid);
-        border-radius: 50%;
-        animation: cvspin .7s linear infinite;
-    }
-
-    @@keyframes cvspin {
-        to {
-            transform: rotate(360deg);
-        }
-    }
-
-    /* ── PAGINATION ───────────────────────────────────────── */
-    .cv-pagination {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        flex-wrap: wrap;
-        gap: 12px;
-        margin-top: 20px;
-        padding: 14px 18px;
-        background: #fff;
-        border-radius: var(--radius-lg);
-        box-shadow: var(--shadow-card);
-    }
-
-    .cv-pg-info {
-        font-size: .82rem;
-        color: var(--text-muted);
-    }
-
-    .cv-pg-btns {
-        display: flex;
-        gap: 4px;
-        flex-wrap: wrap;
-    }
-
-    .cv-pg-btn {
-        min-width: 36px;
-        height: 36px;
-        padding: 0 8px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border-radius: var(--radius-sm);
-        border: 1.5px solid var(--border);
-        background: #fff;
-        color: var(--text-dark);
-        font-family: 'DM Sans', sans-serif;
-        font-size: .85rem;
-        font-weight: 600;
-        cursor: pointer;
-        transition: all .18s;
-    }
-
-        .cv-pg-btn:hover:not(:disabled) {
-            border-color: var(--teal-mid);
-            color: var(--teal-mid);
-            background: var(--teal-pale);
-        }
-
-        .cv-pg-btn.active {
-            background: var(--teal-mid);
-            border-color: var(--teal-mid);
-            color: #fff;
-        }
-
-        .cv-pg-btn:disabled {
-            opacity: .35;
-            cursor: default;
-        }
-
-    /* ── RESPONSIVE ───────────────────────────────────────── */
-    @@media (max-width: 768px) {
-        .canvass-wrapper {
-            padding: 12px 12px 36px;
-        }
-
-        .cv-grid {
-            grid-template-columns: 1fr;
-        }
-
-        .cv-filter-right {
-            margin-left: 0;
-            width: 100%;
-        }
-
-        .cv-supplier-wrap {
-            max-width: 100%;
-        }
-
-        .cv-header h1 {
-            font-size: 1.35rem;
-        }
-    }
-
-    @@media (min-width: 769px) and (max-width: 1100px) {
-        .cv-grid {
-            grid-template-columns: repeat(2, 1fr);
-        }
-    }
-</style>
-
-<div class="canvass-wrapper">
-
- @*    {{-- HEADER --}} *@
-    <div class="cv-header">
-        <div class="cv-header-inner">
-            <i class="fas fa-file-invoice cv-header-icon"></i>
-            <div>
-                <h1>Canvass Management</h1>
-                <p>Manage purchase canvass requests by supplier, status, and comparison</p>
-            </div>
-        </div>
-    </div>
-
-  @*   {{-- TABS --}} *@
-    <div class="cv-tabs" role="tablist">
-        <button class="cv-tab-btn active" data-tab="tab-for-tagging" role="tab">
-            <i class="fas fa-user-tag"></i> For Tagging
-        </button>
-        <button class="cv-tab-btn" data-tab="tab-per-supplier" role="tab">
-            <i class="fas fa-store"></i> For Canvass
-        </button>
-        <button class="cv-tab-btn" data-tab="tab-for-approval" role="tab">
-            <i class="fas fa-clock"></i> For Approval
-        </button>
-        <button class="cv-tab-btn" data-tab="tab-completed" role="tab">
-            <i class="fas fa-check-circle"></i> Completed
-        </button>
-    </div>
-
-    <div id="tab-for-tagging" class="cv-panel active">
-
-        @* -- Filter bar -- *@
-        <div class="cv-filters">
-
-            <div class="cv-search-box">
-                <i class="fas fa-hashtag"></i>
-                <input type="text" id="srchItemNo" placeholder="Item Number..." />
-            </div>
-
-            <div class="cv-search-box">
-                <i class="fas fa-box"></i>
-                <input type="text" id="srchItemName" placeholder="Item Name..." />
-            </div>
-
-            <div class="cv-search-box">
-                <i class="fas fa-file-alt"></i>
-                <input type="text" id="srchPRNo" placeholder="PR Number..." />
-            </div>
-
-            @*    {{-- Searchable supplier dropdown --}} *@
-            <div class="cv-supplier-wrap" id="supplierWrap">
-                <div class="cv-sup-trigger" id="supplierTrigger">
-                    <span class="cv-sup-left">
-                        <i class="fas fa-store"></i>
-                        <span class="cv-sup-lbl" id="supplierLabel">All Suppliers</span>
-                    </span>
-                    <i class="fas fa-chevron-down cv-sup-caret"></i>
-                </div>
-                <div class="cv-sup-dropdown" id="supplierDropdown">
-                    <div class="cv-sup-searchbox">
-                        <i class="fas fa-search"></i>
-                        <input type="text" id="supplierSearch" placeholder="Search supplier..." autocomplete="off" />
-                    </div>
-                    <div class="cv-sup-list" id="supplierList">
-                        <div class="cv-sup-opt active" data-value="">
-                            <i class="fas fa-th-large"></i> All Suppliers
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <div class="cv-filter-right">
-                <span class="cv-pgsz-lbl">Show</span>
-                <select class="cv-pgsz-sel" id="pageSizeSelect">
-                    <option value="6">6 per page</option>
-                    <option value="12" selected>12 per page</option>
-                    <option value="24">24 per page</option>
-                    <option value="48">48 per page</option>
-                </select>
-                <span class="cv-result-count" id="resultCount">0 results</span>
-            </div>
-        </div>
-
-        @*     {{-- Card grid --}} *@
-        <div class="cv-grid" id="canvassGrid">
-            <div class="cv-state" style="grid-column:1/-1">
-                <div class="cv-spinner"></div><p>Loading suppliers…</p>
-            </div>
-        </div>
-
-        @*    {{-- Pagination --}} *@
-        <div class="cv-pagination" id="paginationBar">
-            <span class="cv-pg-info" id="pageInfo"></span>
-            <div class="cv-pg-btns" id="pageButtons"></div>
-        </div>
-    </div>
-
-@*     {{-- ══ TAB 1 — PER SUPPLIER ═══════════════════════════ --}} *@
-    <div id="tab-per-supplier" class="cv-panel">
-
-@*         {{-- Filter bar --}} *@
-        <div class="cv-filters">
-
-            <div class="cv-search-box">
-                <i class="fas fa-hashtag"></i>
-                <input type="text" id="srchItemNo" placeholder="Item Number..." />
-            </div>
-
-            <div class="cv-search-box">
-                <i class="fas fa-box"></i>
-                <input type="text" id="srchItemName" placeholder="Item Name..." />
-            </div>
-
-            <div class="cv-search-box">
-                <i class="fas fa-file-alt"></i>
-                <input type="text" id="srchPRNo" placeholder="PR Number..." />
-            </div>
-
-         @*    {{-- Searchable supplier dropdown --}} *@
-            <div class="cv-supplier-wrap" id="supplierWrap">
-                <div class="cv-sup-trigger" id="supplierTrigger">
-                    <span class="cv-sup-left">
-                        <i class="fas fa-store"></i>
-                        <span class="cv-sup-lbl" id="supplierLabel">All Suppliers</span>
-                    </span>
-                    <i class="fas fa-chevron-down cv-sup-caret"></i>
-                </div>
-                <div class="cv-sup-dropdown" id="supplierDropdown">
-                    <div class="cv-sup-searchbox">
-                        <i class="fas fa-search"></i>
-                        <input type="text" id="supplierSearch" placeholder="Search supplier..." autocomplete="off" />
-                    </div>
-                    <div class="cv-sup-list" id="supplierList">
-                        <div class="cv-sup-opt active" data-value="">
-                            <i class="fas fa-th-large"></i> All Suppliers
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <div class="cv-filter-right">
-                <span class="cv-pgsz-lbl">Show</span>
-                <select class="cv-pgsz-sel" id="pageSizeSelect">
-                    <option value="6">6 per page</option>
-                    <option value="12" selected>12 per page</option>
-                    <option value="24">24 per page</option>
-                    <option value="48">48 per page</option>
-                </select>
-                <span class="cv-result-count" id="resultCount">0 results</span>
-            </div>
-        </div>
-
-    @*     {{-- Card grid --}} *@
-        <div class="cv-grid" id="canvassGrid">
-            <div class="cv-state" style="grid-column:1/-1">
-                <div class="cv-spinner"></div><p>Loading suppliers…</p>
-            </div>
-        </div>
-
-     @*    {{-- Pagination --}} *@
-        <div class="cv-pagination" id="paginationBar">
-            <span class="cv-pg-info" id="pageInfo"></span>
-            <div class="cv-pg-btns" id="pageButtons"></div>
-        </div>
-    </div>
-
-@*     {{-- ══ TAB 2 — FOR APPROVAL ════════════════════════════ --}} *@
-    <div id="tab-for-approval" class="cv-panel">
-        <div class="cv-state">
-            <i class="fas fa-clock"></i>
-            <p>For Approval — wire up this panel as needed.</p>
-        </div>
-    </div>
-
-   @*  {{-- ══ TAB 3 — COMPLETED ═══════════════════════════════ --}} *@
-    <div id="tab-completed" class="cv-panel">
-        <div class="cv-state">
-            <i class="fas fa-check-circle"></i>
-            <p>Completed — wire up this panel as needed.</p>
-        </div>
-    </div>
-
-</div>
-
-<input hidden id="supplierId" />
-@await Html.PartialAsync("PagesView/Canvass/_ForCanvass")
-
-<script>
-    (function () {
-        "use strict";
-
-        /* ── State ── */
-        const state = {
-            page: 1, pageSize: 12, totalCount: 0,
-            supplier: "", searchPR: "", searchItem: "", searchName: "",
-            allSuppliers: [], debounceTimer: null,
-        };
-
-        /* ── DOM ── */
-        const grid          = document.getElementById("canvassGrid");
-        const resultCount   = document.getElementById("resultCount");
-        const pageInfo      = document.getElementById("pageInfo");
-        const pageButtons   = document.getElementById("pageButtons");
-        const inItemNo      = document.getElementById("srchItemNo");
-        const inItemName    = document.getElementById("srchItemName");
-        const inPRNo        = document.getElementById("srchPRNo");
-        const inPageSize    = document.getElementById("pageSizeSelect");
-        const supWrap       = document.getElementById("supplierWrap");
-        const supTrigger    = document.getElementById("supplierTrigger");
-        const supDropdown   = document.getElementById("supplierDropdown");
-        const supLabel      = document.getElementById("supplierLabel");
-        const supSearch     = document.getElementById("supplierSearch");
-        const supList       = document.getElementById("supplierList");
-
-        /* ── Tabs ── */
-        document.querySelectorAll(".cv-tab-btn").forEach(btn =>
-            btn.addEventListener("click", () => {
-                document.querySelectorAll(".cv-tab-btn").forEach(b => b.classList.remove("active"));
-                document.querySelectorAll(".cv-panel").forEach(p => p.classList.remove("active"));
-                btn.classList.add("active");
-                document.getElementById(btn.dataset.tab).classList.add("active");
-            })
-        );
-
-        /* ── Supplier dropdown ── */
-        supTrigger.addEventListener("click", () => {
-            const open = supDropdown.classList.toggle("open");
-            supTrigger.classList.toggle("open", open);
-            if (open) { supSearch.value = ""; renderSupOpts(state.allSuppliers); supSearch.focus(); }
-        });
-
-        document.addEventListener("click", e => {
-            if (!supWrap.contains(e.target)) {
-                supDropdown.classList.remove("open");
-                supTrigger.classList.remove("open");
-            }
-        });
-
-        supSearch.addEventListener("input", () => {
-            const q = supSearch.value.trim().toLowerCase();
-            renderSupOpts(q ? state.allSuppliers.filter(s => s.toLowerCase().includes(q)) : state.allSuppliers);
-        });
-
-        supList.addEventListener("click", e => {
-            const opt = e.target.closest(".cv-sup-opt");
-            if (!opt) return;
-            state.supplier = opt.dataset.value;
-            supLabel.textContent = state.supplier || "All Suppliers";
-            supDropdown.classList.remove("open");
-            supTrigger.classList.remove("open");
-            supList.querySelectorAll(".cv-sup-opt").forEach(o =>
-                o.classList.toggle("active", o.dataset.value === state.supplier));
-            state.page = 1;
-            fetchData();
-        });
-
-        function renderSupOpts(list) {
-            const allHtml = `<div class="cv-sup-opt${state.supplier === "" ? " active" : ""}" data-value="">
-                <i class="fas fa-th-large"></i> All Suppliers
-            </div>`;
-            if (!list.length) {
-                supList.innerHTML = allHtml + `<div class="cv-sup-empty">No suppliers found</div>`;
-                return;
-            }
-            supList.innerHTML = allHtml + list.map(n =>
-                `<div class="cv-sup-opt${n === state.supplier ? " active" : ""}" data-value="${escAttr(n)}">
-                    <i class="fas fa-store"></i> ${escHtml(n)}
-                </div>`
-            ).join("");
-        }
-
-        /* ── Search inputs ── */
-        [inItemNo, inItemName, inPRNo].forEach(el =>
-            el.addEventListener("input", () => {
-                clearTimeout(state.debounceTimer);
-                state.debounceTimer = setTimeout(() => {
-                    state.searchItem = inItemNo.value.trim();
-                    state.searchName = inItemName.value.trim();
-                    state.searchPR   = inPRNo.value.trim();
-                    state.page = 1;
-                    fetchData();
-                }, 350);
-            })
-        );
-
-        inPageSize.addEventListener("change", () => {
-            state.pageSize = parseInt(inPageSize.value, 10);
-            state.page = 1;
-            fetchData();
-        });
-
-        /* ── Fetch ── */
-        async function fetchData() {
-            showLoading();
-            const p = new URLSearchParams({
-                searchPRNo:     state.searchPR,
-                searchItemNo:   state.searchItem,
-                searchItemName: state.searchName,
-                searchSupplier: state.supplier,
-                pageNumber:     state.page,
-                pageSize:       state.pageSize,
-                draw:           Date.now()
-            });
-            try {
-                const res  = await fetch(`/CanvassMgmt/GetCanvassPerSupplier?${p}`);
-                if (!res.ok) throw new Error(`HTTP ${res.status}`);
-                const json = await res.json();
-
-                state.totalCount   = json.recordsTotal ?? json.recordsFiltered ?? 0;
-
-                if (json.supplierList?.length) {
-                    state.allSuppliers = json.supplierList.filter(Boolean);
-                    renderSupOpts(state.allSuppliers);
-                }
-
-                renderCards(json.data ?? []);
-                renderPagination();
-                resultCount.textContent = `${state.totalCount.toLocaleString()} result${state.totalCount !== 1 ? "s" : ""}`;
-            } catch (err) {
-                console.error(err);
-                grid.innerHTML = `<div class="cv-state" style="grid-column:1/-1">
-                    <i class="fas fa-exclamation-triangle" style="color:#ff5c5c"></i>
-                    <p>Failed to load data. Please try again.</p>
-                </div>`;
-            }
-        }
-
-        /* ── Render cards ── */
-        function renderCards(data) {
-            if (!data.length) {
-                grid.innerHTML = `<div class="cv-state" style="grid-column:1/-1">
-                    <i class="fas fa-inbox"></i>
-                    <p>No records found for the selected filters.</p>
-                </div>`;
-                return;
-            }
-            grid.innerHTML = data.map(item => {
-                const prNos    = splitAggr(item.aggrePRNo);
-                const itemNos  = splitAggr(item.aggreItemNo);
-                const names    = splitAggr(item.aggreItemName);
-                const MAX = 3;
-                const vis  = names.slice(0, MAX);
-                const more = names.length - MAX;
-                return `
-                <div class="cv-card">
-                    <div class="cv-card-hd">
-                        <div class="cv-card-code">Supplier #${item.supplierId}</div>
-                        <div class="cv-card-name">${escHtml(item.supplierName ?? "—")}</div>
-                        <div class="cv-card-email">
-                            <i class="fas fa-envelope"></i>
-                            <span>${escHtml(item.emailAddress ?? "—")}</span>
-                        </div>
-                    </div>
-                    <div class="cv-card-body">
-                        <div class="cv-agg-row">
-                            <div class="cv-agg-badge">
-                                <span class="cv-agg-lbl"><i class="fas fa-file-alt"></i> PR No's</span>
-                                <span class="cv-agg-val">${escHtml(prNos.join(", ") || "—")}</span>
-                            </div>
-                            <div class="cv-agg-badge">
-                                <span class="cv-agg-lbl"><i class="fas fa-hashtag"></i> Item No's</span>
-                                <span class="cv-agg-val">${escHtml(itemNos.join(", ") || "—")}</span>
-                            </div>
-                        </div>
-                        <div>
-                            <div class="cv-item-lbl"><i class="fas fa-box"></i> Item Names</div>
-                            <div class="cv-item-tags">
-                                ${vis.map(n => `<span class="cv-item-tag" title="${escAttr(n)}">${escHtml(n)}</span>`).join("")}
-                                ${more > 0 ? `<span class="cv-item-more">+${more} more</span>` : ""}
-                                ${names.length === 0 ? `<span style="font-size:.82rem;color:var(--text-muted)">—</span>` : ""}
-                            </div>
-                        </div>
-                    </div>
-                    <div class="cv-card-ft">
-                
-                        <button class="cv-btn cv-btn-outline btn-email" data-id="${item.supplierId}">
-                            <i class="fas fa-paper-plane"></i> Send Email
-                        </button>
-                    </div>
-                </div>`;
-            }).join("");
-
-            grid.querySelectorAll(".btn-canvass").forEach(b =>
-                b.addEventListener("click", () => openCanvass(b.dataset.id)));
-            grid.querySelectorAll(".btn-email").forEach(b =>
-                b.addEventListener("click", () => sendEmail(b.dataset.id)));
-        }
-
-        /* ── Pagination ── */
-        function renderPagination() {
-            const total = Math.ceil(state.totalCount / state.pageSize) || 1;
-            const from  = Math.min((state.page - 1) * state.pageSize + 1, state.totalCount);
-            const to    = Math.min(state.page * state.pageSize, state.totalCount);
-            pageInfo.textContent = state.totalCount
-                ? `Showing ${from.toLocaleString()}–${to.toLocaleString()} of ${state.totalCount.toLocaleString()}`
-                : "No records";
-
-            pageButtons.innerHTML = "";
-            const prev = mkBtn('<i class="fas fa-chevron-left"></i>', state.page <= 1);
-            prev.addEventListener("click", () => { if (state.page > 1) { state.page--; fetchData(); } });
-            pageButtons.appendChild(prev);
-
-            buildRange(state.page, total).forEach(p => {
-                if (p === "…") {
-                    const d = document.createElement("span");
-                    d.className = "cv-pg-btn"; d.style.cursor = "default"; d.textContent = "…";
-                    pageButtons.appendChild(d); return;
-                }
-                const b = mkBtn(p, false, p === state.page);
-                b.addEventListener("click", () => { state.page = p; fetchData(); });
-                pageButtons.appendChild(b);
-            });
-
-            const next = mkBtn('<i class="fas fa-chevron-right"></i>', state.page >= total);
-            next.addEventListener("click", () => { if (state.page < total) { state.page++; fetchData(); } });
-            pageButtons.appendChild(next);
-        }
-
-        function mkBtn(html, disabled, active) {
-            const b = document.createElement("button");
-            b.className = "cv-pg-btn" + (active ? " active" : "");
-            b.innerHTML = html; b.disabled = !!disabled;
-            return b;
-        }
-
-        function buildRange(cur, total) {
-            if (total <= 7) return Array.from({length: total}, (_, i) => i + 1);
-            if (cur <= 4)         return [1, 2, 3, 4, 5, "…", total];
-            if (cur >= total - 3) return [1, "…", total-4, total-3, total-2, total-1, total];
-            return [1, "…", cur-1, cur, cur+1, "…", total];
-        }
-
-        /* ── Helpers ── */
-        function showLoading() {
-            grid.innerHTML = `<div class="cv-state" style="grid-column:1/-1">
-                <div class="cv-spinner"></div><p>Loading…</p></div>`;
-        }
-
-        /**
-         * Convert aggregated string from DB to clean array.
-         * Handles: "31<br>1049<br>1111"  → ["31","1049","1111"]
-         *          "31, 1049, 1111"       → ["31","1049","1111"]
-         */
-        function splitAggr(raw) {
-            if (!raw) return [];
-            return raw.replace(/<br\s*\/?>/gi, ",").split(",").map(s => s.trim()).filter(Boolean);
-        }
-
-        function escHtml(s) {
-            return String(s).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;");
-        }
-
-        function escAttr(s) {
-            return String(s).replace(/"/g,"&quot;").replace(/'/g,"&#39;");
-        }
-
-        /* ── Card actions — hook to your existing logic ── */
-        function openCanvass(id) {
-            document.getElementById("supplierId").value = id;
-            // e.g. $('#canvassModal').modal('show');
-            console.log("Open canvass:", id);
-        }
-        function sendEmail(id) {
-            console.log("Send email:", id);
-        }
-
-        /* ── Boot ── */
-        fetchData();
-    })();
-</script>
\ No newline at end of file
diff --git a/CPRNIMS.WebApps/Views/Components/CanvassMgmt/CanvassingTabPage/ForTagging.cshtml b/CPRNIMS.WebApps/Views/Components/CanvassMgmt/CanvassingTabPage/ForTagging.cshtml
index 0d5b7ba..8c6f807 100644
--- a/CPRNIMS.WebApps/Views/Components/CanvassMgmt/CanvassingTabPage/ForTagging.cshtml
+++ b/CPRNIMS.WebApps/Views/Components/CanvassMgmt/CanvassingTabPage/ForTagging.cshtml
@@ -1056,15 +1056,6 @@
                         searchable: false
                     },
                     {data: 'supplierName'}],
-            rowCallback: function (row, data) {
-                var statusCell = $('td:eq(9)', row);
-                var myStatus = statusCell.text().trim();
-                if (myStatus === 'Yes' || myStatus === 'true' || myStatus === true) {
-                    statusCell.text('Yes').addClass('status-active');
-                } else {
-                    statusCell.text('No').addClass('status-partial');
-                }
-            },
             error: errorHandler
         });
     }
diff --git a/CPRNIMS.WebApps/Views/Shared/PagesView/Canvass/_CanvassScript.cshtml b/CPRNIMS.WebApps/Views/Shared/PagesView/Canvass/_CanvassScript.cshtml
index 197cacd..980048c 100644
--- a/CPRNIMS.WebApps/Views/Shared/PagesView/Canvass/_CanvassScript.cshtml
+++ b/CPRNIMS.WebApps/Views/Shared/PagesView/Canvass/_CanvassScript.cshtml
@@ -15,9 +15,9 @@
 <script src="~/jsfunctions/common/IndexCard.js"></script>
 <script src="~/jsfunctions/common/ColumnCommonV2.js"></script>
 
-<script src="~/jsfunctions/canvass/CanvassViewV7.js"></script>
+<script src="~/jsfunctions/canvass/CanvassView.js"></script>
 <script src="~/jsfunctions/common/termsV2.js"></script>
-<script src="~/jsfunctions/canvass/PostPutV9.js"></script>
+<script src="~/jsfunctions/canvass/PostPut.js"></script>
 <script src="~/jsfunctions/common/PostPutV2.js"></script>
 <script src="~/jsfunctions/canvass/buttonsV5.js"></script>
 <script src="~/jsfunctions/canvass/rowCallBackV2.js"></script>
diff --git a/CPRNIMS.WebApps/Views/Shared/PagesView/Canvass/_Suppliers.cshtml b/CPRNIMS.WebApps/Views/Shared/PagesView/Canvass/_Suppliers.cshtml
index e93ecd4..8be427e 100644
--- a/CPRNIMS.WebApps/Views/Shared/PagesView/Canvass/_Suppliers.cshtml
+++ b/CPRNIMS.WebApps/Views/Shared/PagesView/Canvass/_Suppliers.cshtml
@@ -1,108 +1,447 @@
-<!-- Modal addNewEditSupplier -->
-<div class="modal fade custom-modal-backdrop" id="addNewEditSupplier" 
-data-bs-backdrop="static" tabindex="-1" aria-labelledby="ModalLabel">
-    <div class="modal-dialog modal-xl">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h5 class="modal-title" style="text-align: center; margin-left: auto; margin-right: auto;"
-                    id="headerNew">
-                    Add new supplier
-                </h5>
-                <h5 class="modal-title" style="text-align: center; margin-left: auto; margin-right: auto;"
-                    id="headerUpdate">
-                    Update supplier
-                </h5>
+<style>
+    :root {
+        --brand: #0f6e56;
+        --brand-light: #e1f5ee;
+        --brand-mid: #1d9e75;
+        --surface: #f7f8fa;
+        --card-bg: #ffffff;
+        --border: #e2e6ea;
+        --border-focus: #1d9e75;
+        --text-primary: #1a1f2b;
+        --text-muted: #6c757d;
+        --radius-card: 14px;
+        --radius-input: 8px;
+        --shadow-card: 0 2px 12px rgba(0,0,0,.07);
+        --shadow-modal: 0 8px 40px rgba(0,0,0,.16);
+    }
+
+    #btnAddNewSupplier {
+        width: auto !important;
+        display: inline-block !important;
+    }
+
+    body {
+        background: #dde3ec;
+        font-family: 'DM Sans', sans-serif;
+    }
+
+    /* ── Modal shell ── */
+    .modal-backdrop-card {
+        position: fixed;
+        inset: 0;
+        background: rgba(15,30,50,.45);
+        align-items: center;
+        justify-content: center;
+        padding: 1.25rem;
+    }
+
+    .modal-shell {
+        background: var(--surface);
+        border-radius: 20px;
+        box-shadow: var(--shadow-modal);
+        width: 100%;
+        max-width: 860px;
+        overflow: hidden;
+    }
+
+    /* ── Header ── */
+    .modal-hdr {
+        background: var(--brand);
+        padding: 1.1rem 1.75rem;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+        .modal-hdr h5 {
+            margin: 0;
+            font-size: 1rem;
+            font-weight: 600;
+            color: #fff;
+            letter-spacing: .3px;
+        }
+
+        .modal-hdr .badge-mode {
+            font-size: .7rem;
+            font-weight: 500;
+            background: rgba(255,255,255,.18);
+            color: #fff;
+            padding: .25rem .65rem;
+            border-radius: 20px;
+        }
+
+    /* ── Body ── */
+    .modal-body-wrap {
+        padding: 1.5rem 1.75rem;
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+    }
+
+    /* ── Card ── */
+    .m-card {
+        background: var(--card-bg);
+        border: 1px solid var(--border);
+        border-radius: var(--radius-card);
+        padding: 1.25rem 1.4rem;
+        box-shadow: var(--shadow-card);
+    }
+
+    .m-card-title {
+        font-size: .68rem;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: .8px;
+        color: var(--brand);
+        margin-bottom: 1rem;
+        display: flex;
+        align-items: center;
+        gap: .45rem;
+    }
+
+        .m-card-title::before {
+            content: '';
+            display: block;
+            width: 3px;
+            height: 14px;
+            background: var(--brand);
+            border-radius: 2px;
+        }
+
+    /* ── Grid layouts ── */
+    .grid-2 {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: .9rem 1.25rem;
+    }
+
+    .grid-3 {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+        gap: .9rem 1.25rem;
+    }
+
+    .grid-4 {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr 1fr;
+        gap: .9rem 1.25rem;
+    }
+
+    .span-2 {
+        grid-column: span 2;
+    }
+
+    .span-full {
+        grid-column: 1 / -1;
+    }
+
+    /* ── Form controls ── */
+    .f-group {
+        display: flex;
+        flex-direction: column;
+        gap: .3rem;
+    }
+
+    .f-label {
+        font-size: .78rem;
+        font-weight: 600;
+        color: var(--text-primary);
+    }
+
+    .f-control {
+        font-family: 'DM Sans', sans-serif;
+        font-size: .875rem;
+        color: var(--text-primary);
+        background: #fff;
+        border: 1.5px solid var(--border);
+        border-radius: var(--radius-input);
+        padding: .45rem .7rem;
+        width: 100%;
+        outline: none;
+        transition: border-color .18s, box-shadow .18s;
+    }
+
+        .f-control:focus {
+            border-color: var(--border-focus);
+            box-shadow: 0 0 0 3px rgba(29,158,117,.12);
+        }
+
+    textarea.f-control {
+        resize: vertical;
+        min-height: 72px;
+        line-height: 1.5;
+    }
+
+    select.f-control {
+        cursor: pointer;
+        appearance: none;
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236c757d' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
+        background-repeat: no-repeat;
+        background-position: right .75rem center;
+        padding-right: 2rem;
+    }
+
+    /* ── Toggle switch ── */
+    .toggle-row {
+        display: flex;
+        align-items: center;
+        gap: .65rem;
+        padding: .55rem 0;
+    }
+
+    .toggle-label {
+        font-size: .78rem;
+        font-weight: 600;
+        color: var(--text-primary);
+    }
+
+    .toggle-status {
+        font-size: .78rem;
+        color: var(--text-muted);
+        font-weight: 500;
+        min-width: 28px;
+    }
+
+    .sw {
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+    }
+
+        .sw input {
+            position: absolute;
+            opacity: 0;
+            width: 0;
+            height: 0;
+        }
+
+    .sw-track {
+        width: 40px;
+        height: 22px;
+        background: #d1d5db;
+        border-radius: 11px;
+        cursor: pointer;
+        transition: background .2s;
+        position: relative;
+        display: block;
+    }
+
+    .sw input:checked + .sw-track {
+        background: var(--brand-mid);
+    }
+
+    .sw-thumb {
+        position: absolute;
+        top: 3px;
+        left: 3px;
+        width: 16px;
+        height: 16px;
+        background: #fff;
+        border-radius: 50%;
+        transition: transform .2s;
+        pointer-events: none;
+        box-shadow: 0 1px 3px rgba(0,0,0,.2);
+    }
+
+    .sw input:checked ~ .sw-thumb {
+        transform: translateX(18px);
+    }
+
+    /* ── Footer ── */
+    .modal-ftr {
+        border-top: 1px solid var(--border);
+        padding: .9rem 1.75rem;
+        display: flex;
+        justify-content: flex-end;
+        gap: .6rem;
+        background: #fff;
+    }
+
+    .btn-back {
+        font-family: 'DM Sans',sans-serif;
+        font-size: .85rem;
+        font-weight: 600;
+        padding: .5rem 1.2rem;
+        border-radius: 8px;
+        border: 1.5px solid var(--border);
+        background: #fff;
+        color: var(--text-muted);
+        cursor: pointer;
+        transition: background .15s;
+    }
+
+        .btn-back:hover {
+            background: var(--surface);
+        }
+
+    .btn-save {
+        font-family: 'DM Sans',sans-serif;
+        font-size: .85rem;
+        font-weight: 600;
+        padding: .5rem 1.4rem;
+        border-radius: 8px;
+        border: none;
+        background: var(--brand);
+        color: #fff;
+        cursor: pointer;
+        transition: background .15s;
+    }
+
+        .btn-save:hover {
+            background: #0d5e48;
+        }
+
+    .btn-update {
+        font-family: 'DM Sans',sans-serif;
+        font-size: .85rem;
+        font-weight: 600;
+        padding: .5rem 1.4rem;
+        border-radius: 8px;
+        border: none;
+        background: #e9a820;
+        color: #fff;
+        cursor: pointer;
+        transition: background .15s;
+    }
+
+        .btn-update:hover {
+            background: #c98d10;
+        }
+    /* Kill Bootstrap's appended backdrop globally */
+    .modal-backdrop {
+        display: none !important;
+    }
+
+    #addNewEditSupplier::before {
+        content: '';
+        position: fixed;
+        inset: 0;
+        pointer-events: all;
+        z-index: 1060; /* ← add this — confirmation modal at 1080 sits above it */
+    }
+
+    #addNewEditSupplier .modal-dialog {
+        pointer-events: all;
+        position: relative;
+        z-index: 1061; /* ← just above ::before so card is clickable */
+    }
+</style>
+<!-- Modal addNewEditSupplier -->
+<div class="modal fade" id="addNewEditSupplier" tabindex="-1" aria-hidden="true" data-bs-backdrop="static">
+    <div class="modal-dialog modal-xl modal-dialog-centered" style="max-width:860px;">
+        <div class="modal-shell">
+
+            <!-- Header -->
+            <div class="modal-hdr">
+                <h5 id="headerNew">Add new supplier</h5>
+                <h5 id="headerUpdate" style="display:none;">Update supplier</h5>
+                <span class="badge-mode" id="modeBadge">New</span>
             </div>
-            <br />
-            <div class="modal-body">
-                <div class="row">
-                    <div class="col-md-4">
-                        <div class="form-group">
-                            <label for="supplierName">Supplier Name:</label>
-                            <input type="text" id="supplierName" class="form-control" style="margin-bottom:10px;" name="supplierName" />
-                        </div>
-                        <div class="form-group">
-                            <label for="emailAddress">Email Address:</label>
-                            <textarea type="text" id="emailAddress" name="emailAddress" style="width: 100%; height: 100px;"
-                                      placeholder="input here..."></textarea>
-                        </div>
-                   
-                        <div class="form-group">
-                            <label for="contactPerson">Contact Person:</label>
-                            <textarea type="text" id="contactPerson" name="contactPerson" style="width: 100%; height: 50px;margin-bottom:10px;"
-                                      placeholder="input here..."></textarea>
-                        </div>
-                    </div>
-                    <div class="col-md-4">
-                        <div class="form-group">
-                            <label for="contactNo">Contact No:</label>
-                            <input type="text" id="contactNo" class="form-control" style="margin-bottom:10px;" name="contactNo" />
-                        </div>
-                        <div class="form-group">
-                            <label for="address">Address:</label>
-                            <textarea type="text" id="address" name="address" style="width: 100%; height: 100px;margin-bottom:10px;"
-                                      placeholder="input here..."></textarea>
-                        </div>
-                        <div class="row">
-                            <div class="col-6">
-                                <div class="form-group">
-                                    <label for="currencyId">Currency:</label>
-                                    <select class="form-control" id="currencyId" style="margin-bottom:10px;">
-                                        <option value="" disabled selected>-Select Currency-</option>
-                                        <option value="1">PHP</option>
-                                        <option value="2">USD</option>
-                                        <option value="3">GBP</option>
-                                        <option value="4">YUAN</option>
-                                        <option value="5">POUND STERLING</option>
-                                        <option value="6">YEN</option>
-                                        <option value="7">CHF</option>
-                                        <option value="8">JPY</option>
-                                        <option value="9">EUR</option>
-                                    </select>
-                                </div>
-                            </div>
-                            <div class="col-6">
-                                <div class="form-group">
-                                    <label for="vatInc">VatInc:</label>
-                                    <input type="checkbox" id="vatInc" style="margin-bottom:10px;" name="vatInc" />
-                                </div>
-                            </div>
-                        </div>
-                    </div>
 
-                    <div class="col-md-4">
-                        <div class="form-group">
-                            <label for="tinNo">Tin No:</label>
-                            <input type="text" id="tinNo" class="form-control" style="margin-bottom:10px;" name="tinNo" />
-                        </div>
-                        <div class="form-group">
-                            <label for="leadTime">LeadTime:</label>
-                            <input type="text" id="leadTime" class="form-control" style="margin-bottom:10px;" name="leadTime" />
-                        </div>
+            <!-- Body -->
+            <div class="modal-body-wrap">
 
-                        <div class="form-group">
-                             <label for="C-paymentTerms">Payment Terms:</label>
-                            <input type="search" name="C-paymentTerms" id="C-paymentTerms" class="form-control" style="margin-bottom:5px;">
-                             <input type="hidden" id="C-paymentTermsId" name="C-paymentTermsId" />
+                <!-- Card 1: Basic Info -->
+                <div class="m-card">
+                    <div class="m-card-title">Basic Information</div>
+                    <div class="grid-2">
+                        <div class="f-group span-full">
+                            <label class="f-label" for="supplierName">Supplier Name</label>
+                            <input type="text" id="supplierName" name="supplierName" class="f-control" placeholder="Enter supplier name" />
                         </div>
-                        <div class="form-group">
-                            <label for="isActive">Status</label>
-                            <select class="form-control" id="isActive" style="margin-bottom:10px;">
-                                <option value="" disabled selected>-Select Status-</option>
-                                <option value="true">Active</option>
-                                <option value="false">Inactive</option>
-                            </select>
+                        <div class="f-group span-full">
+                            <label class="f-label" for="address">Address</label>
+                            <textarea id="address" name="address" class="f-control" placeholder="Enter full address" style="min-height:80px;"></textarea>
+                        </div>
+                        <div class="f-group span-full">
+                            <label class="f-label" for="emailAddress">Email Address</label>
+                            <input type="email" id="emailAddress" name="emailAddress" class="f-control" placeholder="supplier@example.com" />
                         </div>
                     </div>
                 </div>
-                <div>
-                </div>
-            </div>
-            <div class="modal-footer">
-                <button type="button" class="btn btn-primary" onclick="refreshSupplierTable();" data-bs-dismiss="modal">back</button>
-                <button type="button" id="btnaddNewSupplier" onclick="postPutMySupplier(1);" class="btn btn-success"> Save</button>
-                <button type="button" id="btnUpdateSupplier" onclick="postPutMySupplier(0);" class="btn btn-warning">Update</button>
+
+                <!-- Card 2: Contact & Financial -->
+                <div class="grid-2" style="gap:1rem;">
+
+                    <!-- Contact -->
+                    <div class="m-card">
+                        <div class="m-card-title">Contact Details</div>
+                        <div class="f-group" style="margin-bottom:.85rem;">
+                            <label class="f-label" for="contactNo">Contact No.</label>
+                            <input type="text" id="contactNo" name="contactNo" class="f-control" placeholder="63 9XX XXX XXXX" />
+                        </div>
+                        <div class="f-group">
+                            <label class="f-label" for="contactPerson">Contact Person</label>
+                            <input type="text" id="contactPerson" name="contactPerson" class="f-control" placeholder="e.g. MS. IVY" />
+                        </div>
+@*                         <div class="f-group">
+                            <label class="f-label" for="whatsappNo">WhatsApp No.</label>
+                            <input type="text" id="whatsappNo" name="whatsappNo" class="f-control" placeholder="63 9XX XXX XXXX" />
+                        </div> *@
+                    </div>
+
+                    <!-- Financial -->
+                    <div class="m-card">
+                        <div class="m-card-title">Financial Settings</div>
+                        <div class="grid-2" style="margin-bottom:.85rem;">
+                            <div class="f-group">
+                                <label class="f-label" for="currencyCode">Currency</label>
+                                <select class="form-control" id="currencyId" style="margin-bottom:10px;">
+                                    <option value="" disabled selected>-Select Currency-</option>
+                                    <option value="1">PHP</option>
+                                    <option value="2">USD</option>
+                                    <option value="3">GBP</option>
+                                    <option value="4">YUAN</option>
+                                    <option value="5">POUND STERLING</option>
+                                    <option value="6">YEN</option>
+                                    <option value="7">CHF</option>
+                                    <option value="8">JPY</option>
+                                    <option value="9">EUR</option>
+                                </select>
+                            </div>
+                            <div class="f-group">
+                                <label class="C-paymentTerms" for="creditTermName">Payment Termsm</label>
+                                <input type="search" id="C-paymentTerms" name="C-paymentTerms" class="f-control" placeholder="Search term..." />
+                                <input type="hidden" id="C-paymentTermsId" name="C-paymentTermsId" />
+                            </div>
+                        </div>
+
+                        <!-- Toggles -->
+                        <div style="border-top:1px solid var(--border); padding-top:.85rem; display:flex; flex-direction:column; gap:.1rem;">
+                            <label class="toggle-label" style="margin-bottom:.35rem; font-size:.72rem; text-transform:uppercase; letter-spacing:.6px; color:var(--text-muted);">Settings</label>
+
+                            <div class="toggle-row">
+                                <div class="sw">
+                                    <input type="checkbox" id="vatInc" name="vatInc">
+                                    <label for="vatInc" class="sw-track"></label>
+                                    <span class="sw-thumb"></span>
+                                </div>
+                                <span class="toggle-label">Vat Inc.</span>
+                                <span class="toggle-status" id="vatIncText">Yes</span>
+                            </div>
+
+                            <div class="toggle-row">
+                                <div class="sw">
+                                    <input type="checkbox" id="isActive" name="isActive">
+                                    <label for="isActive" class="sw-track"></label>
+                                    <span class="sw-thumb"></span>
+                                </div>
+                                <span class="toggle-label">Status</span>
+                                <span class="toggle-status" id="statusText">Active</span>
+                            </div>
+
+                        </div>
+                    </div>
+
+                </div><!-- /grid-2 -->
+            </div><!-- /modal-body-wrap -->
+            <!-- Footer -->
+            <div class="modal-ftr">
+                <button class="btn-back" type="button" onclick="refreshSupplierTable()" data-bs-dismiss="modal">Back</button>
+                <button class="btn-save" type="button" id="btnaddNewSupplier" onclick="postPutMySupplier(1)">Save</button>
+                <button class="btn-update" type="button" id="btnUpdateSupplier" onclick="postPutMySupplier(0)" style="display:none;">Update</button>
             </div>
+
         </div>
     </div>
 </div>
diff --git a/CPRNIMS.WebApps/wwwroot/Content/Uploads/PRAttachment/2551010b-44d7-4e24-8172-b0b4af6d4be7.xlsx b/CPRNIMS.WebApps/wwwroot/Content/Uploads/PRAttachment/2551010b-44d7-4e24-8172-b0b4af6d4be7.xlsx
new file mode 100644
index 0000000..a1efa0b
Binary files /dev/null and b/CPRNIMS.WebApps/wwwroot/Content/Uploads/PRAttachment/2551010b-44d7-4e24-8172-b0b4af6d4be7.xlsx differ
diff --git a/CPRNIMS.WebApps/wwwroot/Content/Uploads/PRAttachment/b2941d54-1962-4371-be05-db1b9e164221.xlsx b/CPRNIMS.WebApps/wwwroot/Content/Uploads/PRAttachment/b2941d54-1962-4371-be05-db1b9e164221.xlsx
new file mode 100644
index 0000000..a1efa0b
Binary files /dev/null and b/CPRNIMS.WebApps/wwwroot/Content/Uploads/PRAttachment/b2941d54-1962-4371-be05-db1b9e164221.xlsx differ
diff --git a/CPRNIMS.WebApps/wwwroot/Content/Uploads/PRAttachment/daedcbb2-1b7c-43b3-8715-2c6bc5adbd75.xlsx b/CPRNIMS.WebApps/wwwroot/Content/Uploads/PRAttachment/daedcbb2-1b7c-43b3-8715-2c6bc5adbd75.xlsx
new file mode 100644
index 0000000..a1efa0b
Binary files /dev/null and b/CPRNIMS.WebApps/wwwroot/Content/Uploads/PRAttachment/daedcbb2-1b7c-43b3-8715-2c6bc5adbd75.xlsx differ
diff --git a/CPRNIMS.WebApps/wwwroot/JsFunctions/Canvass/CanvassViewV7.js b/CPRNIMS.WebApps/wwwroot/JsFunctions/Canvass/CanvassView.js
similarity index 92%
rename from CPRNIMS.WebApps/wwwroot/JsFunctions/Canvass/CanvassViewV7.js
rename to CPRNIMS.WebApps/wwwroot/JsFunctions/Canvass/CanvassView.js
index 27162c6..36fd2c0 100644
--- a/CPRNIMS.WebApps/wwwroot/JsFunctions/Canvass/CanvassViewV7.js
+++ b/CPRNIMS.WebApps/wwwroot/JsFunctions/Canvass/CanvassView.js
@@ -125,47 +125,31 @@ function viewItemDetail(data) {
         error: errorHandler
     }, beforeComplete(loader)));
 }
-function viewSupplierById(data) {
+function viewSupplierById(item) {
     loader = $('#overlay, #loader').css('z-index', 1070);
 
-    SupplierId = data.supplierId;
+    SupplierId = item.supplierId;
 
-    $.ajax($.extend({
-        url: endpoint.GetSupplierById,
-        type: 'POST',
-        data: { SupplierId },
-        success: function (data) {
-            if (data && data.data && data.data.length > 0) {
-                var item = data.data[0];
-
-                $('#supplierId').val(item.supplierId);
-                $('#supplierName').val(item.supplierName);
-                $('#emailAddress').val(item.emailAddress);
-                $('#address').val(item.address);
-                $('#contactNo').val(item.contactNo);
-                $('#contactPerson').val(item.contactPerson);
-                const isActiveValue = item.isActive.toString();
-                $('#isActive').val(isActiveValue);
-                $('#tinNo').val(item.tinNo);
-                $('#leadTime').val(item.leadTime);
-                $('#vatInc').prop('checked', item.vatInc);
-                $('#currencyId').val(item.currencyId);
-                $('#C-paymentTerms').val(item.paymentTerms);
-                $('#C-paymentTermsId').val(item.paymentTermsId);
-                 $("#C-paymentTerms").on('keyup', function () {
-                    populateTerms();
-                });
-                showHideLabelButtons(0);
-                $('#addNewEditSupplier').modal('show');
-                $('#addNewEditSupplier').css('z-index', 1070);
-
-            } else {
-                console.log('Data is null or undefined');
-                // window.location.href = '/Home/Logout';
-            }
-        },
-        error: errorHandler
-    }, beforeComplete(loader)));
+    $('#supplierId').val(item.supplierId);
+    $('#supplierName').val(item.supplierName);
+    $('#emailAddress').val(item.emailAddress);
+    $('#address').val(item.address);
+    $('#contactNo').val(item.contactNo);
+    $('#contactPerson').val(item.contactPerson);
+    const isActiveValue = item.isActive.toString();
+    $('#isActive').val(isActiveValue);
+    $('#tinNo').val(item.tinNo);
+    $('#leadTime').val(item.leadTime);
+    $('#vatInc').prop('checked', item.vatInc);
+    $('#currencyId').val(item.currencyId);
+    $('#C-paymentTerms').val(item.paymentTerms);
+    $('#C-paymentTermsId').val(item.paymentTermsId);
+    $("#C-paymentTerms").on('keyup', function () {
+        populateTerms();
+    });
+    showHideLabelButtons(0);
+    $('#addNewEditSupplier').modal('show');
+    $('#addNewEditSupplier').css('z-index', 1070);
 }
 function viewItemWOEmail(data) {
     var loader = $('#overlay, #loader');
diff --git a/CPRNIMS.WebApps/wwwroot/JsFunctions/Canvass/PostPutV9.js b/CPRNIMS.WebApps/wwwroot/JsFunctions/Canvass/PostPut.js
similarity index 99%
rename from CPRNIMS.WebApps/wwwroot/JsFunctions/Canvass/PostPutV9.js
rename to CPRNIMS.WebApps/wwwroot/JsFunctions/Canvass/PostPut.js
index 5698a8e..61d8a4c 100644
--- a/CPRNIMS.WebApps/wwwroot/JsFunctions/Canvass/PostPutV9.js
+++ b/CPRNIMS.WebApps/wwwroot/JsFunctions/Canvass/PostPut.js
@@ -378,6 +378,7 @@ function postPutMySupplier(isNew) {
         }
         return;
     }
+   
     showConfirmation({
         title: 'Item Tagging',
         message: 'Are you sure you want to tag this item? This action cannot be undone.',
diff --git a/CPRNIMS.WebApps/wwwroot/lib/bootstrap-icons/font/fonts/bootstrap-icons.woff b/CPRNIMS.WebApps/wwwroot/lib/bootstrap-icons/font/fonts/bootstrap-icons.woff
new file mode 100644
index 0000000..ce6152b
Binary files /dev/null and b/CPRNIMS.WebApps/wwwroot/lib/bootstrap-icons/font/fonts/bootstrap-icons.woff differ
diff --git a/CPRNIMS.WebApps/wwwroot/lib/bootstrap-icons/font/fonts/bootstrap-icons.woff2 b/CPRNIMS.WebApps/wwwroot/lib/bootstrap-icons/font/fonts/bootstrap-icons.woff2
new file mode 100644
index 0000000..c1e0094
Binary files /dev/null and b/CPRNIMS.WebApps/wwwroot/lib/bootstrap-icons/font/fonts/bootstrap-icons.woff2 differ