Merge with Dev2

Areas/Identity/Pages/Account/ForgotPassword.cshtml

@@ -4,7 +4,6 @@
     ViewData["Title"] = "Forgot your password?";
 }
 
-<h1>@ViewData["Title"]</h1>
 <h2>Enter your email.</h2>
 <hr />
 <div class="row">

Areas/Identity/Pages/Account/ForgotPasswordConfirmation.cshtml

@@ -4,7 +4,6 @@
     ViewData["Title"] = "Forgot password confirmation";
 }
 
-<h1>@ViewData["Title"]</h1>
 <p>
     Please check your email to reset your password.
 </p>

Areas/Inventory/Views/InventoryMaster/ItemMovement.cshtml

@@ -44,10 +44,57 @@
         color: purple;
     }
 
-
     .ms-auto {
         margin-left: auto !important; /* Push Complete/Incomplete to right */
     }
+
+    .dropdown {
+        position: relative;
+        width: 100%;
+    }
+
+    .dropdown-toggle-box {
+        display: flex;
+        align-items: center;
+        border: 1px solid #ddd;
+        border-radius: 5px;
+        overflow: hidden;
+    }
+
+        .dropdown-toggle-box input {
+            flex: 1;
+            border: none;
+            padding: 8px;
+        }
+
+    .dropdown-btn {
+        border: none;
+        background-color: #007bff;
+        color: white;
+        padding: 8px 12px;
+        cursor: pointer;
+    }
+
+    .dropdown-content {
+        position: absolute;
+        width: 100%;
+        max-height: 200px;
+        overflow-y: auto;
+        background: #fff;
+        border: 1px solid #ddd;
+        z-index: 10;
+    }
+
+        .dropdown-content option {
+            padding: 10px;
+            cursor: pointer;
+            display: block;
+        }
+
+            .dropdown-content option:hover {
+                background-color: #f1f1f1;
+            }
+
 </style>
 @await Html.PartialAsync("~/Areas/Inventory/Views/_InventoryPartial.cshtml")
 <div id="registerItem" class="row">
@@ -73,14 +120,31 @@
     <div class="row mb-3" v-if="sortBy === 'station'">
         <h4 class="col-sm-1 col-form-h2" style="min-width:150px;">Search Station:</h4>
         <div class="col-sm-4">
-            <input type="text" class="form-control" v-model="searchStation" placeholder="Search by station name...">
+            <div class="dropdown" v-click-outside="closeDropdown">
+                <!-- Button + Input dalam satu box -->
+                <div class="dropdown-toggle-box" v-on:click="dropdownOpen = !dropdownOpen">
+                    <input type="text" class="form-control" v-model="searchQueryStation"
+                           placeholder="Search Station..." v-on:focus="dropdownOpen = true" v-on:click.stop />
+                    <button type="button" class="btn btn-primary dropdown-btn" v-on:click.stop="dropdownOpen = !dropdownOpen">
+                        ▼
+                    </button>
+                </div>
+
+                <!-- Dropdown list -->
+                <div v-if="dropdownOpen" class="dropdown-content" v-on:click.stop>
+                    <div v-for="(item, index) in stations"
+                         :key="index" class="dropdown-item" v-on:mousedown.prevent="selectStation(item)">
+                        {{ item.stationName }}
+                    </div>
+                </div>
+            </div>
         </div>
     </div>
 
     <div v-if="sortBy === 'all'">
         <div class="row card">
             <div class="card-header">
-                <h2>Pending Item Movement</h2>
+                <h2>Pending Item Transit</h2>
             </div>
             <div class="card-body">
                 <div v-if="loading">
@@ -96,6 +160,9 @@
             <div class="card-header">
                 <h2>Complete Item Movessment</h2>
             </div>
+            <div class="card-header">
+                <h4>All Item Movement</h4>
+            </div>
             <div class="card-body">
                 <div v-if="loading">
                     <div class="spinner-border text-info" role="status">
@@ -104,6 +171,18 @@
                 </div>
                 <table class="table table-bordered table-hover table-striped no-wrap" id="itemMovementCompleteDatatable" style="width:100%;border-style: solid; border-width: 1px"></table>
             </div>
+            <div class="card-header">
+                <h4>Assign Station</h4>
+            </div>
+            <div class="card-body">
+                <div v-if="loading">
+                    <div class="spinner-border text-info" role="status">
+                        <span class="visually-hidden">Loading...</span>
+                    </div>
+                </div>
+                <table class="table table-bordered table-hover table-striped no-wrap" id="assignStationDatatable"
+                       style="width:100%;border-style: solid; border-width: 1px"></table>
+            </div>
         </div>
     </div>
 
@@ -130,7 +209,7 @@
                 <span class="visually-hidden">Loading...</span>
             </div>
         </div>
-        <div v-for="(group, itemId) in filteredItems" :key="itemId" class="row card">
+        <div v-for="(group, itemId) in paginatedItems" :key="itemId" class="row card">
             <div class="card-header d-flex justify-content-between align-items-center">
                 @* <h2>Item : {{ group.uniqueID }}</h2> *@
                 <h2 v-if="group.uniqueID">Item : {{ group.uniqueID }}</h2>
@@ -159,13 +238,13 @@
                             </h3>
 
                             <!-- Send Date -->
-                            <div class="d-flex flex-wrap align-items-center gap-2 flex-grow-1" style="max-width:285px; min-width:285px;">
+                            <div class="d-flex flex-wrap align-items-center gap-2 flex-grow-1" style="max-width:310px; min-width:310px;">
-                                <h4 class="fixed-label m-0 text-nowrap">{{movement.action === 'Assign' ? 'Assign Date' : 'Send Date'}}</h4>
+                                <h4 class="fixed-label m-0 text-nowrap">{{movement.action === 'Assign' ? 'Assign Date' : movement.action === 'Register' ? 'Register Date' : 'Send Date'}}</h4>
-                                <span class="fixed-value text-truncate">{{ movement.sendDate }}</span>
+                                <span class="fixed-value text-truncate">{{movement.action !== 'Register' ? movement.sendDate : movement.date }}</span>
                             </div>
 
                             <!-- Receive Date -->
-                            <div v-if="movement.action !== 'Assign'" class="d-flex flex-wrap align-items-center gap-2 flex-grow-1" style="max-width:290px; min-width:290px;">
+                            <div v-if="movement.action !== 'Assign' && movement.action !== 'Register'" class="d-flex flex-wrap align-items-center gap-2 flex-grow-1" style="max-width:290px; min-width:290px;">
                                 <h4 class="fixed-label m-0 text-nowrap">Receive Date:</h4>
                                 <span class="fixed-value text-truncate" style="max-width:160px;">{{ movement.receiveDate || 'Not arrive' }}</span>
                             </div>
@@ -260,13 +339,13 @@
                             </h3> 
 
                             <!-- Send Date -->
-                            <div class="d-flex flex-wrap align-items-center gap-2 flex-grow-1" style="max-width:285px; min-width:285px;">
+                            <div class="d-flex flex-wrap align-items-center gap-2 flex-grow-1" style="max-width:310px; min-width:310px;">
-                                <h4 class="fixed-label m-0 text-nowrap">{{movement.action === 'Assign' ? 'Assign Date' : 'Send Date'}}</h4>
+                                <h4 class="fixed-label m-0 text-nowrap">{{movement.action === 'Assign' ? 'Assign Date' : movement.action === 'Register' ? 'Register Date' : 'Send Date'}}</h4>
-                                <span class="fixed-value text-truncate">{{ movement.sendDate }}</span>
+                                <span class="fixed-value text-truncate">{{movement.action !== 'Register' ? movement.sendDate : movement.date }}</span>
                             </div>
 
                             <!-- Receive Date -->
-                            <div v-if="movement.action !== 'Assign'" class="d-flex flex-wrap align-items-center gap-2 flex-grow-1" style="max-width:290px; min-width:290px;">
+                            <div v-if="movement.action !== 'Assign' && movement.action !== 'Register'" class="d-flex flex-wrap align-items-center gap-2 flex-grow-1" style="max-width:290px; min-width:290px;">
                                 <h4 class="fixed-label m-0 text-nowrap">Receive Date:</h4>
                                 <span class="fixed-value text-truncate" style="max-width:160px;">{{ movement.receiveDate || 'Not arrive' }}</span>
                             </div>
@@ -347,11 +426,9 @@
             </div>
         </div>
     </div>
-    
-
             <!--------------------------------------------STATION CATEGORY---------------------------------------------------------------------->
             <div v-if="sortBy === 'station'">
-                 <div v-for="(items, station) in filteredStation" :key="stationName" 
+                 <div v-for="(items, station) in filteredStation " :key="stationName" 
                  :class="{'bg-light-gray': station === 'Unassign Station', 'bg-white': station !== 'Unassign Station'}" class="station-category card mt-3"> 
                     <!-- Station Header -->
                     <div class="card-header d-flex justify-content-between align-items-center">
@@ -363,7 +440,7 @@
 
                     <!-- Show Items Under Each Station -->
                     <div v-show="categoryVisible[station]" class="card-body">
-                        <div v-for="(group, itemId) in items" :key="itemId" class="row card">
+                        <div v-for="(group, itemId) in paginatedItemsStation(items)" :key="itemId" class="row card">
                             <!-- Item Header -->
                             <div class="card-header d-flex justify-content-between align-items-center">
                                 @* <h2>Item : {{ group.uniqueID }}</h2> *@
@@ -390,14 +467,14 @@
 
                                         </h3>
 
-                                    <!-- Send Date -->
+                                            <!-- Send Date -->
-                                            <div class="d-flex flex-wrap align-items-center gap-2 flex-grow-1" style="max-width:285px; min-width:285px;">
+                                    <div class="d-flex flex-wrap align-items-center gap-2 flex-grow-1" style="max-width:310px; min-width:310px;">
-                                                <h4 class="fixed-label m-0 text-nowrap">{{movement.action === 'Assign' ? 'Assign Date' : 'Send Date'}}</h4>
+                                                <h4 class="fixed-label m-0 text-nowrap">{{movement.action === 'Assign' ? 'Assign Date' : movement.action === 'Register' ? 'Register Date' : 'Send Date'}}</h4>
-                                                <span class="fixed-value text-truncate">{{ movement.sendDate }}</span>
+                                                <span class="fixed-value text-truncate">{{movement.action !== 'Register' ? movement.sendDate : movement.date }}</span>
                                             </div>
 
                                             <!-- Receive Date -->
-                                            <div v-if="movement.action !== 'Assign'" class="d-flex flex-wrap align-items-center gap-2 flex-grow-1" style="max-width:290px; min-width:290px;">
+                                            <div v-if="movement.action !== 'Assign' && movement.action !== 'Register'" class="d-flex flex-wrap align-items-center gap-2 flex-grow-1" style="max-width:290px; min-width:290px;">
                                                 <h4 class="fixed-label m-0 text-nowrap">Receive Date:</h4>
                                                 <span class="fixed-value text-truncate" style="max-width:160px;">{{ movement.receiveDate || 'Not arrive' }}</span>
                                             </div>
@@ -484,14 +561,14 @@
 
                                         </h3>
 
-                                    <!-- Send Date -->
+                                            <!-- Send Date -->
-                                            <div class="d-flex flex-wrap align-items-center gap-2 flex-grow-1" style="max-width:285px; min-width:285px;">
+                                    <div class="d-flex flex-wrap align-items-center gap-2 flex-grow-1" style="max-width:310px; min-width:310px;">
-                                                <h4 class="fixed-label m-0 text-nowrap">{{movement.action === 'Assign' ? 'Assign Date' : 'Send Date'}}</h4>
+                                                <h4 class="fixed-label m-0 text-nowrap">{{movement.action === 'Assign' ? 'Assign Date' : movement.action === 'Register' ? 'Register Date' : 'Send Date'}}</h4>
-                                                <span class="fixed-value text-truncate">{{ movement.sendDate }}</span>
+                                                <span class="fixed-value text-truncate">{{movement.action !== 'Register' ? movement.sendDate : movement.date }}</span>
                                             </div>
 
                                             <!-- Receive Date -->
-                                            <div v-if="movement.action !== 'Assign'" class="d-flex flex-wrap align-items-center gap-2 flex-grow-1" style="max-width:290px; min-width:290px;">
+                                            <div v-if="movement.action !== 'Assign' && movement.action !== 'Register'" class="d-flex flex-wrap align-items-center gap-2 flex-grow-1" style="max-width:290px; min-width:290px;">
                                                 <h4 class="fixed-label m-0 text-nowrap">Receive Date:</h4>
                                                 <span class="fixed-value text-truncate" style="max-width:160px;">{{ movement.receiveDate || 'Not arrive' }}</span>
                                             </div>
@@ -602,6 +679,28 @@
             </div>
         </div>
 
+    <div class="d-flex justify-content-center align-items-center mt-3" v-if="sortBy === 'item' && totalPages > 0">
+        <button class="btn btn-secondary mx-1" v-on:click="goToPage(currentPage - 1)" :disabled="currentPage === 1">
+            Previous
+        </button>
+
+        <span class="mx-2">Page {{ currentPage }} of {{ totalPages }}</span>
+
+        <button class="btn btn-secondary mx-1" v-on:click="goToPage(currentPage + 1)" :disabled="currentPage === totalPages">
+            Next
+        </button>
+    </div>
+
+    <div class="d-flex justify-content-center align-items-center mt-3" v-if="sortBy === 'station' && totalPagesStation > 0">
+        <button class="btn btn-secondary mx-1" v-on:click="goToPageStation(currentPageStation - 1)" :disabled="currentPageStation === 1">
+            Previous
+        </button>
+
+        <span class="mx-2">Page {{ currentPageStation }} of {{ itemsPerPageStation }}</span>
+
+        <button class="btn btn-secondary mx-1" v-on:click="goToPageStation(currentPageStation + 1)" :disabled="currentPageStation === totalPages">
+            Next
+        </button>
     </div>
 </div>
 
@@ -644,6 +743,7 @@
                 selectedTeamType: "",
                 selectedtoStation: "",
                 consignmentNoteUrl: "",
+                assignStationDatatable: null,
                 showItemModal: false,
                 loading: false,
                 items: [],
@@ -651,20 +751,39 @@
                 currentUserCompanyDept: null,
                 sortBy: "all",
                 searchQuery: "",
+                searchQueryStation: "",
                 categoryVisible: {},
                 historyVisible: {},
                 detailsVisible: {},
                 currentRole:"",
                 stationName: "",
                 searchStation: "",
-
+                currentPage: 1, 
+                itemsPerPage: 10,
+                currentPageStation : 1,
+                itemsPerPageStation: 10,
+                dropdownOpen: false,
             }
         },
         mounted() {
             this.fetchItem();
-
+            this.fetchStation();
         },
         computed: {
+            paginatedItems() {
+                const start = (this.currentPage - 1) * this.itemsPerPage;
+                const end = start + this.itemsPerPage;
+                return Object.fromEntries(
+                    Object.entries(this.filteredItems).slice(start, end)
+                );
+            },
+            totalPages() {
+                return Math.ceil(Object.keys(this.filteredItems).length / this.itemsPerPage);
+            },
+
+            totalPagesStation() {
+                return Math.ceil(Object.keys(this.filteredStation).length / this.itemsPerPage);
+            },
             groupedItems() {
                 let grouped = this.items.reduce((acc, movement) => {
                     if (!acc[movement.itemId]) {
@@ -761,16 +880,16 @@
 
             },
             filteredStation() {
-                    if (!this.searchStation) {
+                    if (!this.searchQueryStation) {
                         return this.groupedByStation;
                     }
 
-                    let searchQuery = this.searchStation.toLowerCase();
+                    let searchQueryStation = this.toLowerCase();
                     let grouped = this.groupedByStation;
                     let filtered = {};
 
                     Object.keys(grouped).forEach(station => {
-                        if (station.toLowerCase().includes(searchQuery)) {
+                        if (station.toLowerCase().includes(searchQueryStation)) {
                             filtered[station] = grouped[station];
                         }
                     });
@@ -780,6 +899,30 @@
         },
         methods: {
             
+            paginatedItemsStation(item) {
+                const start = (this.currentPageStation - 1) * this.itemsPerPageStation;
+                const end = start + this.itemsPerPageStation;
+                return Object.fromEntries(
+                    Object.entries(item).slice(start, end)
+                );
+            },
+            selectStation(item) {
+                this.searchQueryStation = item.stationName;
+                this.dropdownOpen = false;
+            },
+            closeDropdown() {
+                this.dropdownOpen = false; // Tutup dropdown
+            },
+            goToPage(page) {
+                if (page >= 1 && page <= this.totalPages) {
+                    this.currentPage = page;
+                }
+            },
+            goToPageStation(page) {
+                    if (page >= 1 && page <= this.itemsPerPageStation) {
+                        this.currentPageStation = page;
+                }
+            },
             remark(remark) {
                     document.getElementById("remarkContent").innerText = remark || "No remark message provide.";
                     let modal = new bootstrap.Modal(document.getElementById("remarkModal"));
@@ -963,6 +1106,25 @@
                     console.error('There was a problem with the fetch operation:', error);
                 }
             },
+            async fetchStation() {
+                try {
+                    const response = await fetch('/InvMainAPI/StationList', {
+                        method: 'POST', // Specify the HTTP method
+                        headers: {
+                            'Content-Type': 'application/json'
+                        }
+                    });
+                    if (!response.ok) {
+                        throw new Error('Failed to fetch Station');
+                    }
+
+                    const data = await response.json();
+                    this.stations = data;
+
+                } catch (error) {
+                    console.error('Error fetching Station:', error);
+                }
+            },
             handleSorting() {
                 this.renderTables();
             },
@@ -979,11 +1141,15 @@
                     if (this.itemMovementCompleteDatatable) {
                         this.itemMovementCompleteDatatable.destroy();
                     }
+                    if (this.assignStationDatatable) {
+                        this.assignStationDatatable.destroy();
+                    }
 
                     this.itemMovementNotCompleteDatatable = $("#itemMovementNotCompleteDatatable").DataTable({
                             data: this.items.filter((m) => m.movementComplete == 0),
                         columns: [
                             { title: "Unique Id", data: "id" },
+                            { title: "Product Name", data: "productName", render: (data, type, full) => { return `${data} <br> ${renderFile(full.productImage)}`; } },
                             { title: "Product Code", data: "uniqueID" },
                             { title: "Action", data: "action" },
                             { title: "Send Date", data: "sendDate" },
@@ -994,35 +1160,7 @@
                             { title: "Start Status", data: "toOther" },
                             { title: "Product Category", data: "productCategory" },
                             { title: "Qty", data: "quantity" },
-                            {
+                            { title: "Note", data: "consignmentNote", render: renderFile },
-                                title: "Note", 
-                                data: "consignmentNote",
-                                render: function (data, type, full, meta) {
-                                    if (!data) {
-                                        return "No Document";
-                                    }
-
-                                    // Check if the document is an image based on file extension
-                                    var isImage = /\.(jpeg|jpg|png|gif)$/i.test(data);
-                                    var isPdf = /\.pdf$/i.test(data);
-
-                                    if (isImage) {
-                                        return `<a href="${data}" target="_blank" data-lightbox="image-1">
-                                                                <img src="${data}" alt="Image" class="img-thumbnail" style="width: 100px; height: 100px;" />
-                                                            </a>`;
-                                    }
-                                    else if (isPdf) {
-                                        return `<a href="${data}" target="_blank">
-                                                        <img src="https://upload.wikimedia.org/wikipedia/commons/8/87/PDF_file_icon.svg"
-                                                            alt="PDF Document" class="img-thumbnail"
-                                                            style="width: 50px; height: 50px;" />
-                                                        <br>View PDF
-                                                    </a>`;
-                                    } else {
-                                        return `<a href="${data}" target="_blank">Download File</a>`;
-                                    }
-                                },
-                            },
                             { title: "Remark", data: "remark" },
                         ],
                         order: [[0, "desc"]],
@@ -1030,9 +1168,10 @@
                     });
 
                     this.itemMovementCompleteDatatable = $("#itemMovementCompleteDatatable").DataTable({
-                        data: this.items.filter((m) => m.movementComplete == 1),
+                        data: this.items.filter((m) => m.movementComplete == 1 && m.action !== "Assign"),
                         columns: [
                             { title: "Unique Id", data: "id" },
+                            { title: "Product Name", data: "productName", render: (data, type, full) => { return `${data} <br> ${renderFile(full.productImage)}`; } },
                             { title: "Product Code", data: "uniqueID" },
                             { title: "Send Date", data: "sendDate" },
                             { title: "Receive Date", data: "receiveDate" },
@@ -1046,85 +1185,57 @@
                             { title: "Start Status", data: "toOther" },
                             { title: "Latest Status", data: "latestStatus" },
                             { title: "Product Category", data: "productCategory" },
-                            { title: "Qty", data: "quantity" },
+                            { title: "Note", data: "consignmentNote", render: renderFile },
-                            { title: "Note", 
-                              data: "consignmentNote",
-                              render: function (data, type, full, meta) {
-                                    if (!data) {
-                                        return "No Document";
-                                    }
-
-                                    // Check if the document is an image based on file extension
-                                    var isImage = /\.(jpeg|jpg|png|gif)$/i.test(data);
-                                    var isPdf = /\.pdf$/i.test(data);
-
-                                    if (isImage) {
-                                        return `<a href="${data}" target="_blank" data-lightbox="image-1">
-                                                                <img src="${data}" alt="Image" class="img-thumbnail" style="width: 100px; height: 100px;" />
-                                                            </a>`;
-                                    }
-                                    else if (isPdf) {
-                                        return `<a href="${data}" target="_blank">
-                                                        <img src="https://upload.wikimedia.org/wikipedia/commons/8/87/PDF_file_icon.svg"
-                                                            alt="PDF Document" class="img-thumbnail"
-                                                            style="width: 50px; height: 50px;" />
-                                                        <br>View PDF
-                                                    </a>`;
-                                    } else {
-                                        return `<a href="${data}" target="_blank">Download File</a>`;
-                                    }
-                              },
-                            },
                             { title: "Remark", data: "remark" },
                         ],
                         order: [[0, "desc"]],
                         responsive: true,
                     });
 
-                    this.stationDatatable = $("#stationDatatable").DataTable({
+                    this.assignStationDatatable = $("#assignStationDatatable").DataTable({
                         data: this.items.filter((m) => m.action === "Assign" ),
                         columns: [
                             { title: "Unique Id", data: "id" },
+                            { title: "Product Name", data: "productName", render: (data, type, full) => { return `${data} <br> ${renderFile(full.productImage)}`; } },
                             { title: "Product Code", data: "uniqueID" },
                             { title: "Assign Date", data: "sendDate" },
-                            { title: "From User", data: "toUserName" },
+                            { title: "Action", data: "action" },
+                            { title: "Station User PIC", data: "toUserName" },
                             { title: "From Station", data: "toStationName" },
                             { title: "Last Station", data: "lastStationName" },
                             { title: "Qty", data: "quantity" },
-                            {
+                            { title: "Note", data: "consignmentNote", render: renderFile },
-                                title: "Note",
-                                data: "consignmentNote",
-                                render: function (data, type, full, meta) {
-                                    if (!data) {
-                                        return "No Document";
-                                    }
-
-                                    // Check if the document is an image based on file extension
-                                    var isImage = /\.(jpeg|jpg|png|gif)$/i.test(data);
-                                    var isPdf = /\.pdf$/i.test(data);
-
-                                    if (isImage) {
-                                        return `<a href="${data}" target="_blank" data-lightbox="image-1">
-                                                                        <img src="${data}" alt="Image" class="img-thumbnail" style="width: 100px; height: 100px;" />
-                                                                    </a>`;
-                                    }
-                                    else if (isPdf) {
-                                        return `<a href="${data}" target="_blank">
-                                                                <img src="https://upload.wikimedia.org/wikipedia/commons/8/87/PDF_file_icon.svg"
-                                                                    alt="PDF Document" class="img-thumbnail"
-                                                                    style="width: 50px; height: 50px;" />
-                                                                <br>View PDF
-                                                            </a>`;
-                                    } else {
-                                        return `<a href="${data}" target="_blank">Download File</a>`;
-                                    }
-                                },
-                            },
                             { title: "Remark", data: "remark" },
                         ],
                         responsive: true,
                     });
-                },
+
+                    function renderFile(data, type, full, meta) {
+                        if (!data) {
+                            return "No Document";
+                        }
+
+                        // Check if the document is an image based on file extension
+                        var isImage = /\.(jpeg|jpg|png|gif)$/i.test(data);
+                        var isPdf = /\.pdf$/i.test(data);
+
+                        if (isImage) {
+                            return `<a href="${data}" target="_blank" data-lightbox="image-1">
+                                                                                <img src="${data}" alt="Image" class="img-thumbnail" style="width: 100px; height: 100px;" />
+                                                                            </a>`;
+                        }
+                        else if (isPdf) {
+                            return `<a href="${data}" target="_blank">
+                                                                        <img src="https://upload.wikimedia.org/wikipedia/commons/8/87/PDF_file_icon.svg"
+                                                                            alt="PDF Document" class="img-thumbnail"
+                                                                            style="width: 50px; height: 50px;" />
+                                                                        <br>View PDF
+                                                                    </a>`;
+                        } else {
+                            return `<a href="${data}" target="_blank">Download File</a>`;
+                        }
+                    }
+            },
                 toggleCategory(itemId) {
                     this.categoryVisible[itemId] = !this.categoryVisible[itemId];
 
@@ -1148,6 +1259,21 @@
                 },
 
         },
+        directives: {
+            clickOutside: {
+                beforeMount(el, binding) {
+                    el.clickOutsideEvent = (event) => {
+                        if (!(el.contains(event.target))) {
+                            binding.value?.(); // Guna optional chaining untuk elak error
+                        }
+                    };
+                    document.body.addEventListener("click", el.clickOutsideEvent);
+                },
+                unmounted(el) {
+                    document.body.removeEventListener("click", el.clickOutsideEvent);
+                }
+            }
+        }
     });
 </script>
 }

Areas/Inventory/Views/InventoryMaster/ItemRegistration.cshtml

@@ -80,14 +80,14 @@
         <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
             <div class="modal-content">
                 <div class="modal-header">
-                    <h5 class="modal-title" id="addItemModalLabel">Add Item</h5>
+                    <h5 class="modal-title" id="addItemModalLabel">{{editSection? 'Edit Item' : 'Add Item'}}</h5>
                     <button type="button" class="closeModal" data-dismiss="modal" aria-label="Close" v-on:click="showItemModal=false">
                         <span aria-hidden="true">&times;</span>
                     </button>
                 </div>
                 <div class="modal-body">
                     <div class="container-fluid">
-                        <form v-on:submit.prevent="addItem" data-aos="fade-right">
+                        <form v-on:submit.prevent="editSection ? submitEditItem() : addItem()" data-aos="fade-right">
                             <div class=" register" data-aos="fade-right">
                                 <div class="row" data-aos="fade-right">
 
@@ -95,7 +95,7 @@
                                     <div class="col-md-12">
                                         <div class="tab-content" id="myTabContent">
                                             <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
-                                                <h3 class="register-heading">REGISTRATION ITEM</h3>
+                                                <h3 class="register-heading">{{editSection? 'EDIT ITEM' : 'REGISTRATION ITEM'}}</h3>
                                                 <div class="row register-form">
                                                     <div class="col-md-6">
 
@@ -288,7 +288,7 @@
                                                         <div class="form-group row">
                                                             <label for="DONo" class="col-sm-4">Enter DO Number:</label>
                                                             <div class="col-sm-8">
-                                                                <input type="text" id="DONo" name="DONo" class="form-control" v-model="DONo" placeholder="DO123456">
+                                                                <input type="text" id="DONo" name="DONo" class="form-control" v-model="DONo" placeholder="DO123456" required>
                                                             </div>
                                                         </div>
 
@@ -296,7 +296,7 @@
                                                         <div class="form-group row">
                                                             <label for="DODate" class="col-sm-4">Enter DO Date:</label>
                                                             <div class="col-sm-8">
-                                                                <input type="date" id="DODate" name="DODate" class="form-control" v-on:input="calculateWarrantyEndDate()" v-model="DODate">
+                                                                <input type="date" id="DODate" name="DODate" class="form-control" v-on:input="calculateWarrantyEndDate()" v-model="DODate" required>
                                                             </div>
                                                         </div>
 
@@ -304,7 +304,7 @@
                                                         <div class="form-group row">
                                                             <label for="warranty" class="col-sm-4">Enter Warranty (Months):</label>
                                                             <div class="col-sm-8">
-                                                                <input type="number" id="warranty" name="warranty" class="form-control" placeholder="0 , 1 , 2 , 3, ..." step="1" min="0" v-on:input="calculateWarrantyEndDate()" required v-model="warranty">
+                                                                <input type="number" id="warranty" name="warranty" class="form-control" placeholder="0 , 1 , 2 , 3, ..." step="1" min="0" v-on:input="calculateWarrantyEndDate()" v-model="warranty" required>
                                                             </div>
                                                         </div>
 
@@ -320,7 +320,7 @@
                                                         <div class="form-group row">
                                                             <label for="invoiceNo" class="col-sm-4">Invoice Number:</label>
                                                             <div class="col-sm-8">
-                                                                <input type="text" id="invoiceNo" name="invoiceNo" class="form-control" v-model="invoiceNo" placeholder="Invoice123456">
+                                                                <input type="text" id="invoiceNo" name="invoiceNo" class="form-control" v-model="invoiceNo" placeholder="Invoice123456" required>
                                                             </div>
                                                         </div>
 
@@ -328,7 +328,7 @@
                                                         <div class="form-group row">
                                                             <label for="invoiceDate" class="col-sm-4">Invoice Date:</label>
                                                             <div class="col-sm-8">
-                                                                <input type="date" id="invoiceDate" name="invoiceDate" class="form-control" v-model="invoiceDate">
+                                                                <input type="date" id="invoiceDate" name="invoiceDate" class="form-control" v-model="invoiceDate" required>
                                                             </div>
                                                         </div>
 
@@ -367,6 +367,8 @@
             $('#addItemBtn').on('click', function () {
                 // Show the modal with the ID 'addManufacturerModal'.
                 $('#registerItemModal').modal('show');
+                this.addSection = true;
+                this.editSection = false;
             });
             $('.closeModal').on('click', function () {
                 // Show the modal with the ID 'addManufacturerModal'.
@@ -394,19 +396,22 @@
                     teamType: "",
                     productName: null,
                     imageProduct: null,
+                    addSection: false,
+                    editSection: false,
                     productCategory: null,
+                    itemID: null,
                     serialNumber: "",
                     quantity: 1,
                     supplierName: null,
                     purchaseDate: null,
                     PO: null,
                     currency: "MYR",
-                    DefaultPrice: 0.01,
+                    DefaultPrice: null,
                     currencyRate: 1,
                     convertPrice: 0.01,
                     DONo: null,
                     DODate: null,
-                    warranty: 0,
+                    warranty: null,
                     EndWDate: null,
                     invoiceNo: null,
                     invoiceDate: null,
@@ -450,6 +455,19 @@
                 this.fetchCompanies();
                 this.fetchProducts();
                 this.fetchSuppliers();
+
+                document.getElementById('addItemBtn').addEventListener('click', () => {
+                    this.resetForm();
+                    this.addSection = true;
+                    this.editSection = false;
+                    $('#registerItemModal').modal('show');
+                });
+
+                document.querySelectorAll('.closeModal').forEach(btn => {
+                    btn.addEventListener('click', () => {
+                        $('.modal').modal('hide');
+                    });
+                });
             },
             computed: {
                 filteredDepartments() {
@@ -462,7 +480,7 @@
                 },
                 showProduct() {
                     if (!this.selectedProduct) {
-                        return []; // No company selected, return empty list
+                        return []; // No company selected, return empty listx`
                     }
                     const product = this.products.find(c => c.productId === this.selectedProduct);
                     return product ? product : {};
@@ -473,6 +491,18 @@
             },
             methods: {
                 async addItem() {
+
+                    // List of required fields
+                    const requiredFields = ['DefaultPrice', 'DONo', 'DODate', 'warranty', 'invoiceNo', 'invoiceDate'];
+
+                    // Loop through required fields and check if any are null or empty
+                    for (let field of requiredFields) {
+                        if (this[field] === null || this[field] === '') {
+                            alert('Item Error', `Please fill in required fields: ${field}.`, 'warning');
+                            return;
+                        }
+                    }
+
                     if (this.showProduct.category == "Disposable") {
                         this.serialNumber = "";
                     }
@@ -489,9 +519,11 @@
                         DefaultPrice: this.DefaultPrice,
                         CurrencyRate: this.currencyRate,
                         ConvertPrice: this.convertPrice,
+                        DONo: this.DONo,
                         DODate: this.DODate,
                         Warranty: this.warranty,
                         EndWDate: this.EndWDate,
+                        InvoiceNo: this.invoiceNo,
                         InvoiceDate: this.invoiceDate,
                         CreatedByUserId: this.currentUser.id,
                         TeamType: this.selectedTeamType,
@@ -600,7 +632,7 @@
                             },
                             {
                                 "title": "Price(RM)",
-                                "data": "convertPrice",
+                                "data": (row) => parseFloat(row.convertPrice).toFixed(2),
                             },
                             {
                                 "title": "Register Date",
@@ -626,6 +658,15 @@
                                         Station: ${currentStation}`
                                 }
                             },
+                            {
+                                "title": "Edit",
+                                "data": "itemID",
+                                "render": function (data) {
+                                    var editButton = `<button type="button" class="btn btn-success edit-btn" data-id="${data}">Edit</button>`;
+                                    return editButton;
+                                },
+                                "className": "align-middle",
+                            },
                             {
                                 "title": "Delete",
                                 "data": "itemID",
@@ -671,6 +712,12 @@
                         }
                     })
 
+                    // Attach click event listener to the edit buttons
+                    $('#itemDatatable tbody').off('click', '.edit-btn').on('click', '.edit-btn', function () {
+                        const itemId = $(this).data('id');
+                        self.editItem(itemId);
+                    });
+
                     // Attach click event listener to the delete buttons
                     $('#itemDatatable tbody').off('click', '.delete-btn').on('click', '.delete-btn', function () {
                         const itemId = $(this).data('id');
@@ -796,48 +843,6 @@
                         console.error('Error fetching currency data:', error);
                     }
                 },
-                convertCurrency() {
-                    // Your currency conversion logic here
-                    console.log('Selected currency:', this.currency);
-                },
-                resetForm() {
-                    this.company = '';
-                    this.Dept = null;
-                    this.productName = null;
-                    this.imageProduct = null;
-                    this.serialNumber = '';
-                    this.quantity = 1;
-                    this.supplierName = null;
-                    this.purchaseDate = null;
-                    this.PO = null;
-                    this.currency = 'MYR';
-                    this.DefaultPrice = 0.01;
-                    this.currencyRate = 1;
-                    this.convertPrice = 0.01;
-                    this.DODate = null;
-                    this.warranty = 0;
-                    this.EndWDate = null;
-                    this.invoiceDate = null;
-                    this.selectedProduct = '';
-                    this.selectedSupplier = '';
-                    this.selectedCompany = this.currentUserCompanyDept.companyId;
-                    this.selectedDepartment = '';
-                    this.selectedTeamType = '';
-                    this.partNumber = null;
-                },
-
-                // FRONT END FUNCTIONS
-                //----------------------//
-                //Calculate Total Price
-                convertCurrency() {
-                    const total = this.DefaultPrice * this.currencyRate;
-                    this.convertPrice = total.toFixed(2);
-                    this.DefaultPrice = this.DefaultPrice
-                    // .replace(/[^0-9.]/g, '') // Remove non-numeric characters except decimal points
-                    // .replace(/(\..*)\..*/g, '$1') // Allow only one decimal point
-                    // .replace(/^(\d*\.\d{0,2})\d*$/, '$1'); // Limit to two decimal places
-
-                },
                 calculateWarrantyEndDate() {
                     // Check if DODate and warranty are valid
                     if (!this.DODate || isNaN(Date.parse(this.DODate))) {
@@ -856,6 +861,51 @@
                         this.EndWDate = null;
                     }
                 },
+                convertCurrency() {
+                    // Your currency conversion logic here
+                    console.log('Selected currency:', this.currency);
+                },
+                resetForm() {
+                    this.company = '';
+                    this.Dept = null;
+                    this.productName = null;
+                    this.imageProduct = null;
+                    this.serialNumber = '';
+                    this.quantity = 1;
+                    this.supplierName = null;
+                    this.purchaseDate = null;
+                    this.PO = null;
+                    this.currency = 'MYR';
+                    this.DefaultPrice = null;
+                    this.currencyRate = 1;
+                    this.convertPrice = 0.01;
+                    this.DODate = null;
+                    this.warranty = null;
+                    this.DONo = null;
+                    this.invoiceNo = null;
+                    this.EndWDate = null;
+                    this.invoiceDate = null;
+                    this.selectedProduct = '';
+                    this.selectedSupplier = '';
+                    // this.selectedCompany = this.currentUserCompanyDept.companyId;
+                    // this.selectedDepartment = '';
+                    this.selectedTeamType = '';
+                    this.partNumber = null;
+                },
+
+                // FRONT END FUNCTIONS
+                //----------------------//
+                //Calculate Total Price
+                convertCurrency() {
+                    const total = this.DefaultPrice * this.currencyRate;
+                    this.convertPrice = total.toFixed(2);
+                    this.DefaultPrice = this.DefaultPrice
+                    // .replace(/[^0-9.]/g, '') // Remove non-numeric characters except decimal points
+                    // .replace(/(\..*)\..*/g, '$1') // Allow only one decimal point
+                    // .replace(/^(\d*\.\d{0,2})\d*$/, '$1'); // Limit to two decimal places
+
+                },
+
                 async deleteItem(itemId) {
                     if (!confirm("Are you sure you want to delete this item?")) {
                         return;
@@ -886,6 +936,127 @@
                         this.loading = false;
                     }
                 },
+
+                async editItem(itemID) {
+                    // Cari data item yang dipilih
+                    const item = this.items.find(s => s.itemID === itemID);
+                    if (!item) {
+                        alert('Error', 'Item not found!', 'warning');
+                        return;
+                    }
+
+                    // Populate form fields
+                    this.itemID = itemID;
+                    this.selectedCompany = item.companyId;
+                    this.selectedDepartment = item.departmentId;
+                    this.selectedProduct = item.productId;
+                    this.serialNumber = item.serialNumber;
+                    this.quantity = item.quantity;
+                    this.selectedSupplier = item.supplier;
+                    this.purchaseDate = item.purchaseDate.split('/').reverse().join('-');
+                    this.PO = item.poNo;
+                    this.currency = item.currency;
+                    this.DefaultPrice = item.defaultPrice;
+                    this.currencyRate = item.currencyRate;
+                    this.convertPrice = item.convertPrice;
+                    this.DONo = item.doNo;
+                    this.DODate = item.doDate ? item.doDate.split('T')[0] : null;
+                    this.warranty = item.warranty;
+                    this.EndWDate = item.endWDate.split('/').reverse().join('-');
+                    this.invoiceNo = item.invoiceNo;
+                    this.invoiceDate = item.invoiceDate.split('/').reverse().join('-');
+                    this.selectedTeamType = item.teamType;
+                    this.partNumber = item.partNumber;
+                    // Tunjukkan modal edit
+                    $('#registerItemModal').modal('show');
+                    this.addSection = false;
+                    this.editSection = true;
+                },
+
+                async submitEditItem() {
+
+                    // List of required fields
+                    const requiredFields = ['DefaultPrice', 'DONo', 'DODate', 'warranty', 'invoiceNo', 'invoiceDate'];
+
+                    // Loop through required fields and check if any are null or empty
+                    for (let field of requiredFields) {
+                        if (this[field] === null || this[field] === '') {
+                            alert('Item Error', `Please fill in required fields: ${field}.`, 'warning');
+                            return;
+                        }
+                    }
+
+                    if (this.showProduct.category == "Disposable") {
+                        this.serialNumber = "";
+                    }
+                    const formData = {
+                        itemId : this.itemID,
+                        CompanyId: this.selectedCompany,
+                        DepartmentId: this.selectedDepartment,
+                        ProductId: this.selectedProduct,
+                        SerialNumber: this.serialNumber,
+                        Quantity: this.quantity,
+                        Supplier: this.selectedSupplier,
+                        PurchaseDate: this.purchaseDate,
+                        PONo: this.PO,
+                        Currency: this.currency,
+                        DefaultPrice: this.DefaultPrice,
+                        CurrencyRate: this.currencyRate,
+                        ConvertPrice: this.convertPrice,
+                        DONo: this.DONo,
+                        DODate: this.DODate,
+                        Warranty: this.warranty,
+                        EndWDate: this.EndWDate,
+                        InvoiceNo: this.invoiceNo,
+                        InvoiceDate: this.invoiceDate,
+                        TeamType: this.selectedTeamType,
+                        PartNumber: this.partNumber,
+                    };
+
+                    try {
+
+                        // Additional specific checks
+                        if (this.showSerialNumber) {
+                            this.quantity = 0;
+                            if (this.serialNumber === null || this.serialNumber === '') {
+                                alert('Serial Number Error', 'Serial Number must be filled when selecting Item or Part.', 'warning');
+                                return;
+                            }
+                        }
+                        else {
+                            this.serialNumber = null;
+                            if (this.quantity === 0 || this.quantity === null || this.quantity === '') {
+                                alert('quantity Error', 'Quantity is required when selecting Disposable.', 'warning');
+                                return;
+                            }
+                        }
+                        const response = await fetch('/InvMainAPI/EditItem', {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json'
+                            },
+                            body: JSON.stringify(formData)
+                        });
+
+                        if (!response.ok) {
+                            const errorData = await response.json();
+                            console.error('Error response:', errorData);
+                            this.errorMessage = 'Error: ' + (errorData.message || 'Unknown error');
+                            return;
+                        }
+
+                        // Refresh station list and reset form
+                        alert('Success!', 'Item form has been successfully submitted.', 'success');
+                        this.fetchItem();
+                        this.resetForm();
+                        this.editSection = false;
+                        this.addSection = false;
+                        $('.modal').modal('hide');
+                    } catch (error) {
+                        console.error('Error editing Item:', error);
+                        this.errorMessage = 'Error: ' + error.message;
+                    }
+                },
                 async printItem(itemId, imgSrc) {
                     try {
                         this.thisQRInfo.uniqueID = itemId;
@@ -898,7 +1069,7 @@
 
                         // Safely set image content
                         const sanitizedImgSrc = encodeURI(imgSrc); // Sanitize the URL
-                        container.innerHTML = `<img src="${sanitizedImgSrc}" alt="QR Code" class="text-center " />`;
+                        container.innerHTML = `<img src="${sanitizedImgSrc}" alt="QR Code" class="text-center" style="width: 127px; height: 127px";   />`;
 
                         // Fetch QR information
                         const qrInfo = this.getPrintedQR(uniqueQR);
@@ -952,21 +1123,21 @@
                 printQRInfo() {
                     // Create a virtual DOM element
                     const virtualElement = document.createElement('div');
-                    virtualElement.style.width = '330px '; // Match label size for 2 inches at 203 DPI
+                    virtualElement.style.width = '360px '; // Match label size for 2 inches at 203 DPI
-                    virtualElement.style.height = '160px';
+                    virtualElement.style.height = '180px';
                     virtualElement.style.position = 'absolute';
                     virtualElement.style.left = '-9999px'; // Position offscreen to avoid rendering on the main UI
                     // virtualElement.style.border = '1px solid #000'; // Optional: Add a border for debugging dimensions
 
                     // Populate the virtual DOM with content
                     virtualElement.innerHTML = `
-                            <div class="container-fluid my-3 QrPrintFont" style="font-family: 'OCR A', monospace;">
+                             <div class="container my-3 QrPrintFont" style="font-family: 'OCR A', monospace;">
-                                <div class="row" >
+                                <div class="row">
                                     <div class="col-5 text-center d-flex align-items-center justify-content-center">
                                         <div class="row">
                                             <div class="col-12">
                                                 <div>${this.thisQRInfo.imgContainer}</div>
-                                                    <div class="col-12 h4"style="font-family: 'Arial', monospace;"><b>${this.thisQRInfo.uniqueID}</b></div>
+                                                <div class="col-12 my-1 h4"style="font-family: 'Arial', monospace;"><b>${this.thisQRInfo.uniqueID}</b></div>
                                             </div>
                                         </div>
                                     </div>
@@ -1005,7 +1176,7 @@
                                 style: `
                                         @@media print {
                                             @@page {
-                                                margin: 5px 5px 0px 5px;
+                                                margin: 0px 0px 0px 0px;
                                             }
                                             body { margin: 0; }
                                         }

Areas/Inventory/Views/InventoryMaster/ItemRequestMaster.cshtml

@@ -65,8 +65,8 @@
         <h2 for="sortSelect" class="col-sm-1 col-form-h2" style="min-width:150px;">Sort by:</h2>
         <div class="col-sm-4">
             <select id="sortSelect" class="form-control" v-model="sortBy" v-on:change="handleSorting">
-                <option value="tech">Technician</option>
+                <option value="tech">Technician -> Inventory Master</option>
-                <option value="master">Inventory Master</option>
+                <option value="master">Inventory Master -> Inventory Master</option>
             </select>
         </div>
     </div>
@@ -407,7 +407,6 @@
             </div>
         </div>
     </div>
-
 </div>
 
 @section Scripts {

Areas/Inventory/Views/InventoryMaster/ProductRegistration.cshtml

@@ -99,11 +99,108 @@
                 </div>
             </form>
             <div class="row">
-                <button class="btn btn-danger col-md-3 m-1" v-on:click="addSection = false"><i class="fa fa-minus"></i>&nbsp;Hide Add Product Section</button>
+                <button class="btn btn-danger col-md-3 m-1" v-on:click=" resetForm(); addSection = false;"><i class="fa fa-minus"></i>&nbsp;Hide Add Product Section</button>
+            </div>
+        </div>
+        <div class="row" v-if="editSection == true">
+            <form v-on:submit.prevent="submitEditProduct" data-aos="fade-right">
+                <div class="container register" data-aos="fade-right">
+                    <div class="row" data-aos="fade-right">
+                        <div class="col-md-12">
+                            <div class="tab-content" id="myTabContent">
+                                <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
+                                    <div class="card-header">
+                                        <h3 class="register-heading">EDIT PRODUCT</h3>
+                                    </div>
+                                    <div class="row register-form card-body">
+                                        <div class="col-md-6">
+
+                                            @* Product Name *@
+                                            <div class="form-group row">
+                                                <label for="productName" class="col-sm-3">Product Name:</label>
+                                                <div class="col-sm-9">
+                                                    <input type="text" id="productName" name="productName" class="form-control" required v-model="productName">
+                                                </div>
+                                            </div>
+
+                                            @* Product Short Name *@
+                                            <div class="form-group row">
+                                                <label for="productName" class="col-sm-3">Product Short Name:</label>
+                                                <div class="col-sm-9">
+                                                    <input type="text" id="productShortName" name="productShortName" class="form-control" maxlength="13" v-model="productShortName" required>
+                                                    <p><em><small class="text-danger">* Product short name limited to 13 characters</small></em></p>
+                                                </div>
+                                            </div>
+
+                                            @* Manufacturer *@
+                                            <div class="form-group row">
+                                                <label class="col-sm-3">Manufacturer:</label>
+                                                <div class="col-sm-9">
+                                                    <div class="">
+                                                        <select class="btn btn-primary form-select" v-model="manufacturer" required>
+                                                            <option class="btn-light" value="" selected disabled>Select Manufacturer</option>
+                                                            <option class="btn-light" v-for="(item, index) in manufacturers" :key="item.manufacturerId" :value="item.manufacturerId">{{ item.manufacturerName ?? 'Select Manufacturer' }}</option>
+                                                        </select>
+                                                    </div>
+                                                </div>
+                                            </div>
+
+                                            @* Category *@
+                                            <div class="form-group row">
+                                                <label class="col-sm-3">Category:</label>
+                                                <div class="col-sm-9">
+                                                    <div class="">
+                                                        <select class="btn btn-primary form-select" v-model="category" required>
+                                                            <option class="btn-light" value="" selected disabled>Select Category</option>
+                                                            <option class="btn-light" v-for="(item, index) in categories" :key="item" :value="item">{{ item ?? 'Select Category'  }}</option>
+                                                        </select>
+                                                    </div>
+                                                </div>
+                                            </div>
+
+                                        </div>
+                                        <div class="col-md-6">
+
+                                            @* Model No Coding *@
+                                            <div class="form-group row">
+                                                <label for="modelNo" class="col-sm-3">Model No:</label>
+                                                <div class="col-sm-9">
+                                                    <input type="text" id="modelNo" name="modelNo" class="form-control" required v-model="modelNo">
+                                                </div>
+                                            </div>
+
+                                            @* Image Product Coding *@
+                                            <div class="form-group row">
+                                                <label for="imageProduct" class="col-sm-3">Image:</label>
+                                                <div class="col-sm-9">
+                                                    <input type="file" id="imageProduct" name="imageProduct" class="form-control" v-on:change="previewImage" accept="image/*" ref="fileInput">
+                                                    <small v-if="existingFileName">{{ existingFileName }}</small>
+                                                    <br>
+                                                    <img v-if="imageSrc" :src="imageSrc" alt="Image Preview" class="img-thumbnail" style="width: 200px; margin-top: 10px;" />
+                                                </div>
+                                            </div>
+
+
+                                        </div>
+                                        <div class="form-group row">
+                                            <div class="col-sm-9 offset-sm-3">
+                                                <button type="button" v-on:click="resetForm" class="btn btn-secondary mx-1">Reset</button>
+                                                <input type="submit" class="btn btn-primary mx-1">
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </form>
+            <div class="row">
+                <button class="btn btn-danger col-md-3 m-1" v-on:click=" resetForm(); editSection = false; addSection = false;"><i class="fa fa-minus"></i>&nbsp;Hide Edit Product Section</button>
             </div>
         </div>
         <div class="row">
-            <button id="addProductBtn" class="btn btn-success col-md-3 m-1" v-show="addSection == false" v-on:click="addSection = true"><i class="fa fa-plus"></i>&nbsp;Show Add Product Section</button>
+            <button id="addProductBtn" class="btn btn-success col-md-3 m-1" v-show="addSection == false" v-on:click="resetForm(); addSection = true; editSection = false;"><i class="fa fa-plus"></i>&nbsp;Show Add Product Section</button>
         </div>
         <div class="row table-responsive">
             <table class="table table-bordered table-hover table-striped no-wrap" id="productDatatable" style="width:100%;border-style: solid; border-width: 1px"></table>
@@ -120,76 +217,104 @@
         app.mount('#registerProduct');
     });
     const app = Vue.createApp({
-            data() {
+        data() {
-                return {
+            return {
-                    addSection: false,
+                editSection: null,
-                    productName: null,
+                productId: null,
-                    manufacturer: '',
+                addSection: false,
-                    manufacturers: null,
+                productName: null,
-                    category: '',
+                manufacturer: '',
-                    categories: ["Asset", "Part", "Disposable"],
+                manufacturers: null,
-                    modelNo: null,
+                category: '',
-                    imageProduct: null,
+                categories: ["Asset", "Part", "Disposable"],
-                    manufactures: [],
+                modelNo: null,
-                    showOtherManufacturer: false,
+                imageProduct: null,
-                    imageSrc: '',
+                manufactures: [],
-                    products: null,
+                showOtherManufacturer: false,
-                    productDatatable: null,
+                imageSrc: '',
-                    productShortName: null,
+                products: null,
-                }
+                productDatatable: null,
+                productShortName: null,
+                existingFileName: null,
+            }
         },
         mounted() {
             // Fetch companies, depts, and products from the API
             this.fetchManufactures();
             this.fetchProducts();
+        },
+        computed() {
+
         },
         methods: {
             initiateTable() {
                 this.productDatatable = $('#productDatatable').DataTable({
                     "data": this.products,
                     "columns": [
-                        {   "title": "Product Name", 
+                        {
+                            "title": "Product Name",
                             "data": "productName",
                         },
-                        {   "title": "Product Short Name", 
+                        {
+                            "title": "Product Short Name",
                             "data": "productShortName",
                         },
-                        {   "title": "Model Number", 
+                        {
+                            "title": "Model Number",
                             "data": "modelNo",
                         },
-                        {   "title": "Manufacturer", 
+                        {
+                            "title": "Manufacturer",
                             "data": "manufacturer.manufacturerName",
                         },
-                        {   "title": "Product Category", 
+                        {
+                            "title": "Product Category",
                             "data": "category",
                         },
-                        {   "title": "Product Stock", 
+                        {
+                            "title": "Product Stock",
                             "data": "quantityProduct",
                         },
-                        {   "title": "Image", 
+                        {
+                            "title": "Image",
                             "data": "imageProduct",
                             "render": function (data, type, full, meta) {
                                 var image = `<a href="${data}" target="_blank" data-lightbox="image-1">
-                                                <img src="${data}" alt="Image" class="img-thumbnail" style="width: 100px; height: 100px;" />
+                                                    <img src="${data}" alt="Image" class="img-thumbnail" style="width: 100px; height: 100px;" />
-                                            </a>`;
+                                                </a>`;
                                 return image;
                             },
                         },
+                        {
+                            "title": "Edit",
+                            "data": "productId",
+                            "render": function (data) {
+                                var editButton = `<button type="button" class="btn btn-success edit-btn" data-id="${data}">Edit</button>`;
+                                return editButton;
+                            },
+                        },
                         {
                             "title": "Delete",
                             "data": "productId",
                             "render": function (data) {
-                                    var deleteButton = `<button type="button" class="btn btn-danger delete-btn" data-id="${data}">Delete</button>`;
+                                var deleteButton = `<button type="button" class="btn btn-danger delete-btn" data-id="${data}">Delete</button>`;
                                 return deleteButton;
                             },
                         }
 
                     ],
-                    responsive:true,
+                    responsive: true,
                 })
                 self = this;
+
+                // Attach click event listener to the edit buttons
+                $('#productDatatable tbody').off('click', '.edit-btn').on('click', '.edit-btn', function () {
+                    const productId = $(this).data('id');
+                    self.editProduct(productId);
+                });
+
                 // Attach click event listener to the delete buttons
-                $('#productDatatable tbody').on('click', '.delete-btn', function () {
+                $('#productDatatable tbody').off('click', '.delete-btn').on('click', '.delete-btn', function () {
                     const productId = $(this).data('id'); // Get the manufacturer ID from the button
                     self.deleteProduct(productId); // Call the Vue method
                 });
@@ -198,14 +323,13 @@
             },
             async fetchManufactures() {
                 fetch('/InvMainAPI/ManufacturerList', {
-                        method: 'POST'
+                    method: 'POST'
-                    })
+                })
                     .then(response => response.json())
                     .then(data => {
-                    if (data != null && data.length > 0)
+                        if (data != null && data.length > 0) {
-                    {
+                            this.manufacturers = data;
-                        this.manufacturers = data;
+                        }
-                    }
                     })
                     .catch(error => {
                         console.error('There was a problem with the fetch operation:', error);
@@ -213,13 +337,16 @@
             },
             async fetchProducts() {
                 try {
-                    const response = await fetch('/InvMainAPI/ProductList',{
+                    const response = await fetch('/InvMainAPI/ProductList', {
                         method: 'POST'
                     }); // Call the API
                     if (!response.ok) {
                         throw new Error('Failed to fetch products');
                     }
                     this.products = await response.json(); // Store the fetched products
+                    if (this.productDatatable) {
+                        this.productDatatable.clear().destroy();
+                    }
                     this.$nextTick(() => {
                         this.initiateTable()
                     })
@@ -227,6 +354,79 @@
                     console.error('Error fetching products:', error);
                 }
             },
+            async editProduct(productId) {
+                // Find the selected station data
+                const product = this.products.find(s => s.productId === productId);
+                if (!product) {
+                    alert('Error', 'Product not found!', 'warning');
+                    return;
+                }
+
+                // Populate form fields
+                this.productId = productId;
+                this.productName = product.productName;
+                this.stationName = product.stationName;
+                this.productShortName = product.productShortName;
+                this.manufacturer = product.manufacturer.manufacturerId;
+                this.category = product.category;
+                this.modelNo = product.modelNo;
+                this.imageProduct = product.imageProduct;
+                this.previewImage(this.imageProduct);
+
+                // Show the edit form and hide the add form
+                this.addSection = false;
+                this.editSection = true;
+
+            },
+
+            async submitEditProduct() {
+                const formData = {
+                    ProductId: this.productId,
+                    productName: this.productName,
+                    ProductShortName: this.productShortName,
+                    ManufacturerId: this.manufacturer,
+                    category: this.category,
+                    ModelNo: this.modelNo,
+                    ImageProduct: this.imageProduct
+                };
+
+                try {
+                    // List of required fields
+                    const requiredFields = ['productName', 'manufacturer', 'category', 'modelNo', 'imageProduct'];
+
+                    // Loop through required fields and check if any are null or empty
+                    for (let field of requiredFields) {
+                        if (this[field] === null || this[field] === '') {
+                            alert('Product Error', `Please fill in required fields: ${field}.`, 'warning');
+                            return; // Exit early if validation fails
+                        }
+                    }
+                    const response = await fetch('/InvMainAPI/EditProduct', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json'
+                        },
+                        body: JSON.stringify(formData)
+                    });
+
+                    if (!response.ok) {
+                        const errorData = await response.json();
+                        console.error('Error response:', errorData);
+                        this.errorMessage = 'Error: ' + (errorData.message || 'Unknown error');
+                        return;
+                    }
+
+                    // Refresh station list and reset form
+                    alert('Success!', 'Product form has been successfully submitted.', 'success');
+                    this.fetchProducts();
+                    this.resetForm();
+                    this.editSection = false;
+                } catch (error) {
+                    console.error('Error editing Product:', error);
+                    this.errorMessage = 'Error: ' + error.message;
+                }
+            },
+
             async addProduct() {
                 // const existingProduct = this.products.find(p => p.modelNo === this.modelNo);
                 // if (existingProduct) {
@@ -285,6 +485,7 @@
             resetForm() {
                 this.productName = null;
                 this.manufacturer = '';
+                this.productShortName = '';
                 this.category = '';
                 this.modelNo = null;
                 this.imageProduct = null;
@@ -313,18 +514,25 @@
 
             // User Inserting an Image
             previewImage(event) {
-                const file = event.target.files[0];
+                if (typeof event === "string") {
+                    this.imageSrc = event;
+                    this.existingFileName = event.split('/').pop(); // Ambil nama fail daripada URL
+                    return;
+                }
 
+                const file = event.target.files[0];
                 if (file) {
                     const reader = new FileReader();
                     reader.onload = (e) => {
-                        this.imageSrc = e.target.result; // Show the image preview
+                        this.imageSrc = e.target.result;
-                        this.imageProduct = e.target.result.split(',')[1]; // Get Base64 string (remove metadata)
+                        this.imageProduct = e.target.result.split(',')[1];
+                        this.existingFileName = file.name; // Simpan nama fail
                     };
                     reader.readAsDataURL(file);
                 } else {
                     this.imageSrc = '';
                     this.imageProduct = null;
+                    this.existingFileName = null;
                 }
             },
             async deleteProduct(productId) {

Areas/Inventory/Views/InventoryMaster/StationRegistration.cshtml

@@ -27,11 +27,71 @@
                                     <div class="form-group row">
                                         <label class="col-sm-4 col-form-label">Station User PIC</label>
                                         <div class="col-sm-8">
-                                            <div class="dropdown">
+                                            <div class="">
-                                                <select class="btn btn-primary dropdown-toggle col-md-10" v-model="selectedUserName" :disabled="currentUser != null" required v-on:change="updateDepartment()">
+                                                <select class="btn btn-primary form-select" v-model="selectedUserName" :disabled="currentUser != null" required v-on:change="updateDepartment()">
                                                     <option class="btn-light" value="" disabled selected>Select User</option>
-                                                    <option v-for="(technicianUser, index) in users" :key="index" :value="technicianUser.fullname">
+                                                    <option class="btn-light" v-for="(technicianUser, index) in users" :key="index" :value="technicianUser.fullName">
-                                                        {{ technicianUser.fullname }}
+                                                        {{ technicianUser.fullName }}
+                                                    </option>
+
+                                                </select>
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    @* Department ID *@
+                                    <!-- Department Dropdown -->
+                                    <div class="form-group row">
+                                        <label class="col-sm-4 col-form-label">Department: </label>
+                                        <div class="col-sm-8">
+                                            <!-- Use a span to keep the same space occupied -->
+                                            <span v-if="selectedDepartment">{{ selectedDepartment }}</span>
+                                            <span v-else>No department assigned</span>
+                                        </div>
+                                    </div>
+
+
+                                </div>
+                                <div class="form-group row">
+                                    <div class="col-sm-9 offset-sm-3">
+                                        <button type="button" v-on:click="resetForm" class="btn btn-secondary m-1">Reset</button>
+                                        <button type="submit" class="btn btn-primary m-1">Submit</button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </form>
+    <form v-on:submit.prevent="submitEditStation" data-aos="fade-right" id="editStationForm" v-if="editStationForm">
+        <div class="container register" data-aos="fade-right">
+            <div class="row">
+                <div class="col-md-9 register-rights" data-aos="fade-right">
+                    <div class="tab-content" id="myTabContent" data-aos="fade-right">
+                        <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab" data-aos="fade-right">
+                            <h3 class="register-heading">EDIT STATION</h3>
+                            <div class="row register-form">
+                                <div class="col-md-61">
+
+                                    @* Station Name *@
+                                    <div class="form-group row">
+                                        <label for="stationName" class="col-sm-3">Station Name:</label>
+                                        <div class="col-sm-9">
+                                            <input type="text" id="stationName" name="stationName" class="form-control" required v-model="stationName">
+                                        </div>
+                                    </div>
+
+                                    @* User ID *@
+                                    <div class="form-group row">
+                                        <label class="col-sm-4 col-form-label">Station User PIC</label>
+                                        <div class="col-sm-8">
+                                            <div class="">
+                                                <select class="btn btn-primary form-select" v-model="selectedUserName" :disabled="currentUser != null" required v-on:change="updateDepartment()">
+                                                    <option class="btn-light" value="" disabled selected>Select User</option>
+                                                    <option class="btn-light" v-for="(technicianUser, index) in users" :key="index" :value="technicianUser.fullName">
+                                                        {{ technicianUser.fullName }}
                                                     </option>
 
                                                 </select>
@@ -95,6 +155,7 @@
         const app = Vue.createApp({
             data() {
                 return {
+                    stationId: null,
                     stationName: null,
                     stationUserPIC: null,
                     departmentId : null,
@@ -104,6 +165,7 @@
                     currentUser: null,
                     users : null,
                     registerStationForm: false,
+                    editStationForm: false,
                 }
             },
             mounted() {
@@ -113,12 +175,11 @@
             methods: {
                 async fetchUsers() {
                     try {
-                        const response = await fetch(`/IdentityAPI/GetTechnicianUserInformation/`, {
+                        const response = await fetch(`/InvMainAPI/UserList/`, {
                             method: 'POST',
                         });
                         if (response.ok) {
-                            const data = await response.json();
+                            this.users = await response.json();
-                            this.users = data.technicianUsers;
                         }
                         else {
                             console.error(`Failed to fetch user: ${response.statusText}`);
@@ -230,11 +291,19 @@
                             },
                             {
                                 "title": "Station User PIC",
-                                "data": "stationPicID",
+                                "data": "fullName",
                             },
                             {
-                                "title": "Department ID",
+                                "title": "Department",
-                                "data": "departmentId",
+                                "data": "departmentName",
+                            },
+                            {
+                                "title": "Edit",
+                                "data": "stationId",
+                                "render": function (data) {
+                                    var editButton = `<button type="button" class="btn btn-success edit-btn" data-id="${data}">Edit</button>`;
+                                    return editButton;
+                                },
                             },
                             {
                                 "title": "Delete",
@@ -248,9 +317,14 @@
                         responsive: true,
 
                     })
+                    // Attach click event listener to the edit buttons
+                    $('#stationDatatable tbody').off('click', '.edit-btn').on('click', '.edit-btn', function () {
+                        const stationId = $(this).data('id');
+                        self.editStation(stationId);
+                    });
 
                     // Attach click event listener to the delete buttons
-                    $('#stationDatatable tbody').on('click', '.delete-btn', function () {
+                    $('#stationDatatable tbody').off('click', '.delete-btn').on('click', '.delete-btn', function () {
                         const stationId = $(this).data('id');
                         self.deleteStation(stationId);
                     });
@@ -259,13 +333,78 @@
                 },
                 updateDepartment() {
                     // Find the selected user by their full name
-                    const selectedUser = this.users.find(user => user.fullname === this.selectedUserName);
+                    const selectedUser = this.users.find(user => user.fullName === this.selectedUserName);
+                    console.log(selectedUser);
                     if (selectedUser) {
                         this.stationUserPIC = selectedUser.id;
                         this.departmentId = selectedUser.department.departmentId;
                         this.selectedDepartment = selectedUser.department.departmentName; // Set department name
                     }
                 },
+                async editStation(stationId) {
+                    // Find the selected station data
+                    const station = this.stations.find(s => s.stationId === stationId);
+                    if (!station) {
+                        alert('Error', 'Station not found!', 'warning');
+                        return;
+                    }
+
+                    // Populate form fields
+                    this.stationId = stationId;
+                    this.stationName = station.stationName;
+                    this.selectedUserName = station.fullName;
+                    this.departmentId = station.departmentId;
+                    this.selectedDepartment = station.departmentName;
+                    this.stationUserPIC = station.stationPicID;
+
+                    // Show the edit form and hide the add form
+                    this.registerStationForm = false;
+                    this.editStationForm = true;
+                },
+
+                async submitEditStation() {
+                    const formData = {
+                        StationId: this.stationId,
+                        StationName: this.stationName,
+                        StationPicID: this.stationUserPIC,
+                        DepartmentId: this.departmentId,
+                    };
+
+                    try {
+                        // Ensure all required fields are filled
+                        const requiredFields = ['stationName', 'stationUserPIC', 'departmentId'];
+                        for (let field of requiredFields) {
+                            if (!this[field]) {
+                                alert('Error', `Please fill in required fields: ${field}`, 'warning');
+                                return;
+                            }
+                        }
+
+                        const response = await fetch('/InvMainAPI/EditStation', {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json'
+                            },
+                            body: JSON.stringify(formData)
+                        });
+
+                        if (!response.ok) {
+                            const errorData = await response.json();
+                            console.error('Error response:', errorData);
+                            this.errorMessage = 'Error: ' + (errorData.message || 'Unknown error');
+                            return;
+                        }
+
+                        // Refresh station list and reset form
+                        await this.fetchStations();
+                        this.resetForm();
+                        this.editStationForm = false;
+                    } catch (error) {
+                        console.error('Error editing station:', error);
+                        this.errorMessage = 'Error: ' + error.message;
+                    }
+                },
+
                 async deleteStation(stationId) {
                     if (!confirm("Are you sure you want to delete this station?")) {
                         return;

Areas/Inventory/Views/ItemMovement/ItemMovementUser.cshtml

@@ -28,6 +28,52 @@
         margin-left: auto !important; /* Push Complete/Incomplete to right */
     }
 
+    .dropdown {
+        position: relative;
+        width: 100%;
+    }
+
+    .dropdown-toggle-box {
+        display: flex;
+        align-items: center;
+        border: 1px solid #ddd;
+        border-radius: 5px;
+        overflow: hidden;
+    }
+
+        .dropdown-toggle-box input {
+            flex: 1;
+            border: none;
+            padding: 8px;
+        }
+
+    .dropdown-btn {
+        border: none;
+        background-color: #007bff;
+        color: white;
+        padding: 8px 12px;
+        cursor: pointer;
+    }
+
+    .dropdown-content {
+        position: absolute;
+        width: 100%;
+        max-height: 200px;
+        overflow-y: auto;
+        background: #fff;
+        border: 1px solid #ddd;
+        z-index: 10;
+    }
+
+        .dropdown-content option {
+            padding: 10px;
+            cursor: pointer;
+            display: block;
+        }
+
+            .dropdown-content option:hover {
+                background-color: #f1f1f1;
+            }
 
 </style>
 @await Html.PartialAsync("~/Areas/Inventory/Views/_InventoryPartialUser.cshtml")
@@ -54,14 +100,32 @@
     <div class="row mb-3" v-if="sortBy === 'station'">
         <h4 class="col-sm-1 col-form-h2" style="min-width:150px;">Search Station:</h4>
         <div class="col-sm-4">
-            <input type="text" class="form-control" v-model="searchStation" placeholder="Search by station name...">
+            <div class="dropdown" v-click-outside="closeDropdown">
+                <!-- Button + Input dalam satu box -->
+                <div class="dropdown-toggle-box" v-on:click="dropdownOpen = !dropdownOpen">
+                    <input type="text" class="form-control" v-model="searchQueryStation"
+                           placeholder="Search Station..." v-on:focus="dropdownOpen = true" v-on:click.stop />
+                    <button type="button" class="btn btn-primary dropdown-btn" v-on:click.stop="dropdownOpen = !dropdownOpen">
+                        ▼
+                    </button>
+                </div>
+
+                <!-- Dropdown list -->
+                <div v-if="dropdownOpen" class="dropdown-content" v-on:click.stop>
+                    <div v-for="(item, index) in stations"
+                         :key="index" class="dropdown-item" v-on:mousedown.prevent="selectStation(item)">
+                        {{ item.stationName }}
+                    </div>
+                </div>
+            </div>
         </div>
     </div>
 
     <div v-if="sortBy === 'all'">
+        <h5 style="color:cadetblue">*Each Items will display one record only*</h5>
         <div class="row card">
             <div class="card-header">
-                <h2>Pending Item Movement</h2>
+                <h2>Pending Item Transit</h2>
             </div>
             <div class="card-body">
                 <table class="table table-bordered table-hover table-striped no-wrap" id="itemMovementNotCompleteDatatable"
@@ -73,16 +137,26 @@
             <div class="card-header">
                 <h2>Complete Item Movement</h2>
             </div>
+            <div class="card-header">
+                <h4>All Item Movement</h4>
+            </div>
             <div class="card-body">
                 <table class="table table-bordered table-hover table-striped no-wrap" id="itemMovementCompleteDatatable" 
                 style="width:100%;border-style: solid; border-width: 1px"></table>
             </div>
+            <div class="card-header">
+                <h4>Assign Station</h4>
+            </div>
+            <div class="card-body">
+                <table class="table table-bordered table-hover table-striped no-wrap" id="assignStationDatatable"
+                       style="width:100%;border-style: solid; border-width: 1px"></table>
+            </div>
         </div>
     </div>
 
     <!--------------------------------------------ITEM CATEGORY---------------------------------------------------------------------->
     <div v-if="sortBy === 'item'">
-        <div v-for="(group, itemId) in filteredItems" :key="itemId" class="row card">
+        <div v-for="(group, itemId) in paginatedItems" :key="itemId" class="row card">
             <div class="card-header d-flex justify-content-between align-items-center">
                 <h2>Item : {{ group.uniqueID }}</h2>
                 <button class="btn btn-light" v-on:click="toggleCategory(itemId)">
@@ -532,6 +606,29 @@
             </div>
         </div>
     </div>
+    <div class="d-flex justify-content-center align-items-center mt-3" v-if="sortBy === 'item' && totalPages > 0">
+        <button class="btn btn-secondary mx-1" v-on:click="goToPage(currentPage - 1)" :disabled="currentPage === 1">
+            Previous
+        </button>
+
+        <span class="mx-2">Page {{ currentPage }} of {{ totalPages }}</span>
+
+        <button class="btn btn-secondary mx-1" v-on:click="goToPage(currentPage + 1)" :disabled="currentPage === totalPages">
+            Next
+        </button>
+    </div>
+
+    <div class="d-flex justify-content-center align-items-center mt-3" v-if="sortBy === 'station' && totalPagesStation > 0">
+        <button class="btn btn-secondary mx-1" v-on:click="goToPageStation(currentPageStation - 1)" :disabled="currentPageStation === 1">
+            Previous
+        </button>
+
+        <span class="mx-2">Page {{ currentPageStation }} of {{ itemsPerPageStation }}</span>
+
+        <button class="btn btn-secondary mx-1" v-on:click="goToPageStation(currentPageStation + 1)" :disabled="currentPageStation === totalPages">
+            Next
+        </button>
+    </div>
 </div>
 
 @section Scripts {
@@ -540,16 +637,18 @@
 }
 <script>
     $(function () {
-        app.mount('#ItemMovement');
+            app.mount('#ItemMovement');
     });
         const app = Vue.createApp({
             data() {
                 return {
+                    userId: null,
                     itemMovements: [],
+                    assignStationDatatable: null,
                     itemMovementCompleteDatatable: null,
-                    stationDatatable: null,
                     itemMovementNotCompleteDatatable: null,
                     searchQuery: "",
+                    searchQueryStation: "",
                     searchStation: "",
                     sortBy: "all",
                     historyVisible: {},
@@ -557,9 +656,29 @@
                     categoryVisible: {},
                     consignmentNoteUrl: "",
                     stationName: "",
+                    currentPage: 1,
+                    itemsPerPage: 10,
+                    currentPageStation: 1,
+                    itemsPerPageStation: 10,
+                    dropdownOpen: false,
+                    currentUser: null,
+                    stations:[],
                 };
             },
             computed: {
+                paginatedItems() {
+                    const start = (this.currentPage - 1) * this.itemsPerPage;
+                    const end = start + this.itemsPerPage;
+                    return Object.fromEntries(
+                        Object.entries(this.filteredItems).slice(start, end)
+                    );
+                },
+                totalPages() {
+                    return Math.ceil(Object.keys(this.filteredItems).length / this.itemsPerPage);
+                },
+                totalPagesStation() {
+                    return Math.ceil(Object.keys(this.filteredStation).length / this.itemsPerPage);
+                },
                 processedGroupedItems() {
                     let grouped = this.itemMovements.reduce((acc, movement) => {
                         if (!acc[movement.itemId]) {
@@ -686,16 +805,16 @@
                 },
 
                 filteredStation() {
-                    if (!this.searchStation) {
+                    if (!this.searchQueryStation) {
                         return this.groupedByStation;
                     }
 
-                    let searchQuery = this.searchStation.toLowerCase();
+                    let searchQueryStation = this.searchQueryStation.toLowerCase();
                     let grouped = this.groupedByStation;
                     let filtered = {};
 
                     Object.keys(grouped).forEach(station => {
-                        if (station.toLowerCase().includes(searchQuery)) {
+                        if (station.toLowerCase().includes(searchQueryStation)) {
                             filtered[station] = grouped[station];
                         }
                     });
@@ -703,10 +822,44 @@
                     return filtered;
                 },
             },
-            mounted() {
+            async mounted() {
                 this.fetchItemMovement();
+                await this.fetchUser();
+                await Promise.all([
+                    this.fetchStation(),
+                ]);
             },
             methods: {
+                paginatedItemsStation(item) {
+                    const start = (this.currentPageStation - 1) * this.itemsPerPageStation;
+                    const end = start + this.itemsPerPageStation;
+                    return Object.fromEntries(
+                        Object.entries(item).slice(start, end)
+                    );
+                },
+                selectStation(item) {
+                    this.searchQueryStation = item.stationName;
+                    this.dropdownOpen = false;
+                },
+                closeDropdown() {
+                    this.dropdownOpen = false; // Tutup dropdown
+                },
+                goToPage(page) {
+                    if (page >= 1 && page <= this.totalPages) {
+                        this.currentPage = page;
+                    }
+                },
+                goToPageStation(page) {
+                    if (page >= 1 && page <= this.itemsPerPageStation) {
+                        this.currentPageStation = page;
+                    }
+                },
+                remark(remark) {
+                    document.getElementById("remarkContent").innerText = remark || "No remark message provide.";
+                    let modal = new bootstrap.Modal(document.getElementById("remarkModal"));
+                    modal.show();
+                },
+
                 remark(remark) {
                     document.getElementById("remarkContent").innerText = remark || "No remark message provide.";
                     let modal = new bootstrap.Modal(document.getElementById("remarkModal"));
@@ -750,6 +903,45 @@
                     }
                 },
 
+                async fetchStation() {
+                    try {
+                        const response = await fetch('/InvMainAPI/StationList', {
+                            method: 'POST', // Specify the HTTP method
+                            headers: {
+                                'Content-Type': 'application/json'
+                            }
+                        });
+                        if (!response.ok) {
+                            throw new Error('Failed to fetch Station');
+                        }
+
+                        const data = await response.json();
+                        this.stations = data.filter(station => station.stationPicID === this.userId);
+
+                    } catch (error) {
+                        console.error('Error fetching Station:', error);
+                    }
+                },
+
+                async fetchUser() {
+                    try {
+                        const response = await fetch(`/IdentityAPI/GetUserInformation/`, {
+                            method: 'POST',
+                        });
+                        if (response.ok) {
+                            const data = await response.json();
+                            this.currentUser = data?.userInfo || null;
+                            this.userId = await this.currentUser.id;
+                        }
+                        else {
+                            console.error(`Failed to fetch user: ${response.statusText}`);
+                        }
+                    }
+                    catch (error) {
+                        console.error('There was a problem with the fetch operation:', error);
+                    }
+                },
+
                 handleSorting() {
                     this.renderTables();
                 },
@@ -767,8 +959,8 @@
                     if (this.itemMovementCompleteDatatable) {
                         this.itemMovementCompleteDatatable.destroy();
                     }
-                    if (this.stationDatatable) {
+                    if (this.assignStationDatatable) {
-                        this.stationDatatable.destroy();
+                        this.assignStationDatatable.destroy();
                     }
 
                     // Get latest movement per uniqueID after filtering
@@ -808,6 +1000,7 @@
 
                     let notCompleteData = [];
                     let completeData = [];
+                    let completeStationData = [];
 
                     latestMovements.forEach(movement => {
                         let filteredMovements = filterMovements([movement]);
@@ -815,8 +1008,10 @@
                         if (filteredMovements.length > 0) {
                             if (movement.movementComplete == 0) {
                                 notCompleteData.push(movement);
-                            } else if (movement.movementComplete == 1) {
+                            } else if (movement.movementComplete == 1 && movement.action !== "Assign") {
                                 completeData.push(movement);
+                            } else {
+                                completeStationData.push(movement);
                             }
                         }
                     });
@@ -826,7 +1021,7 @@
                         data: notCompleteData,
                         columns: [
                             { title: "Unique Id", data: "id" },
-                            { title: "Product Name", data: "productName" },
+                            { title: "Product Name", data: "productName", render: (data, type, full) => { return `${data} <br> ${renderFile(full.productImage)}`; } },
                             { title: "Product Code", data: "uniqueID" },
                             { title: "Action", data: "action" },
                             { title: "Send Date", data: "sendDate" },
@@ -847,7 +1042,7 @@
                         data: completeData,
                         columns: [
                             { title: "Unique Id", data: "id" },
-                            { title: "Product Name", data: "productName" },
+                            { title: "Product Name", data: "productName", render: (data, type, full) => { return `${data} <br> ${renderFile(full.productImage)}`; } },
                             { title: "Product Code", data: "uniqueID" },
                             { title: "Send Date", data: "sendDate" },
                             { title: "Receive Date", data: "receiveDate" },
@@ -867,6 +1062,25 @@
                         responsive: true,
                     }); 
 
+                    // Table 3: Station Movements
+                    this.assignStationDatatable = $("#assignStationDatatable").DataTable({
+                        data: completeStationData,
+                        columns: [
+                            { title: "Unique Id", data: "id" },
+                            { title: "Product Name", data: "productName", render: (data, type, full) => { return `${data} <br> ${renderFile(full.productImage)}`; }},
+                            { title: "Product Code", data: "uniqueID" },
+                            { title: "Assign Date", data: "sendDate" },
+                            { title: "Action", data: "action" },
+                            { title: "Station User PIC", data: "toUserName" },
+                            { title: "From Station", data: "toStationName" },
+                            { title: "Last Station", data: "lastStationName" },
+                            { title: "Qty", data: "quantity" },
+                            { title: "Note", data: "consignmentNote", render: renderFile },
+                            { title: "Remark", data: "remark" },
+                        ],
+                        responsive: true,
+                    });
+
                     // Function to render file (image/PDF)
                     function renderFile(data, type, full, meta) {
                         if (!data) {
@@ -917,6 +1131,22 @@
                 },
 
             },
+
+            directives: {
+                clickOutside: {
+                    beforeMount(el, binding) {
+                        el.clickOutsideEvent = (event) => {
+                            if (!(el.contains(event.target))) {
+                                binding.value?.(); // Guna optional chaining untuk elak error
+                            }
+                        };
+                        document.body.addEventListener("click", el.clickOutsideEvent);
+                    },
+                    unmounted(el) {
+                        document.body.removeEventListener("click", el.clickOutsideEvent);
+                    }
+                }
+            }
         });
 
 </script>

Areas/Inventory/Views/ItemMovement/ItemRequest.cshtml

@@ -573,14 +573,14 @@
                         }
                     });
                     if (!response.ok) {
-                        throw new Error('Failed to fetch suppliers');
+                        throw new Error('Failed to fetch Station');
                     }
 
                     const data = await response.json();
                     this.stations = data.filter(station => station.stationPicID === this.userId);
 
                 } catch (error) {
-                    console.error('Error fetching suppliers:', error);
+                    console.error('Error fetching Station:', error);
                 }
             },
 

Areas/Inventory/Views/_InventoryPartial.cshtml

@@ -94,7 +94,7 @@
                     <h1 class="font-light text-white">
                         <i class="mdi mdi-checkbox-multiple-blank-circle"></i>
                     </h1>
-                    <h6 class="text-white">QR Scanner</h6>
+                    <h6 class="text-white">Scan Items</h6>
                 </div>
             </a>
         </div>

Areas/Inventory/Views/_InventoryPartialUser.cshtml

@@ -20,7 +20,7 @@
                     <h1 class="font-light text-white">
                         <i class="mdi mdi-checkbox-multiple-blank-circle"></i>
                     </h1>
-                    <h6 class="text-white">QR Scanner</h6>
+                    <h6 class="text-white">Scan Items</h6>
                 </div>
             </a>
         </div>

Controllers/API/IdentityAPI.cs

@@ -69,45 +69,6 @@ namespace PSTW_CentralSystem.Controllers.API
                 return StatusCode(500, $"An error occurred: {ex.Message}");
             }
         }
-
-        [HttpPost("GetTechnicianUserInformation")]
-        public async Task<IActionResult> GetTechnicianUserInformation()
-        {
-            try
-            {
-                var users = await _identityDbContext.Users
-                    .Include(u => u.Department)
-                    .ToListAsync(); // Retrieve all users with department info
-
-                var technicianUsers = new List<object>();
-
-                foreach (var user in users)
-                {
-                    var roles = await _userManager.GetRolesAsync(user);
-                    if (roles.Contains("Technician"))
-                    {
-                        technicianUsers.Add(new
-                        {
-                            id = user.Id,
-                            fullname = user.FullName,
-                            department = user.Department
-                        });
-                    }
-                }
-
-                if (!technicianUsers.Any())
-                {
-                    return NotFound(new { message = "No technicians found" });
-                }
-
-                return Ok(new { technicianUsers = technicianUsers });
-            }
-            catch (Exception ex)
-            {
-                return StatusCode(500, new { message = $"An error occurred: {ex.Message}" });
-            }
-
-        }
         #endregion User
 
         #region LDAP Login

Controllers/API/Inventory/InvMainAPI.cs

@@ -183,6 +183,50 @@ namespace PSTW_CentralSystem.Controllers.API.Inventory
             }
         }
 
+        [HttpPost("EditProduct")]
+        public async Task<IActionResult> EditProduct([FromBody] ProductModel editedProduct)
+        {
+            if (!ModelState.IsValid)
+            {
+                return BadRequest(ModelState);
+            }
+            var product = await _centralDbContext.Products.FindAsync(editedProduct.ProductId);
+            if (product == null)
+            {
+                return NotFound("Product is null");
+            }
+
+            try
+            {
+                var productImage = editedProduct.ImageProduct; // Save image to wwwroot/media/inventory/images | Images name is product.ModelNo | product.ImageProduct is in base64 string
+                if (product.ImageProduct != editedProduct.ImageProduct)
+                {
+                    var bytes = Convert.FromBase64String(editedProduct.ImageProduct);
+                    var filePath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot/media/inventory/images", editedProduct.ModelNo + ".jpg");
+                    await System.IO.File.WriteAllBytesAsync(filePath, bytes);
+                    editedProduct.ImageProduct = "/media/inventory/images/" + editedProduct.ModelNo + ".jpg";
+                }
+
+                product.ProductName = editedProduct.ProductName;
+                product.ProductShortName = editedProduct.ProductShortName;
+                product.ManufacturerId = editedProduct.ManufacturerId;
+                product.Category = editedProduct.Category;
+                product.ModelNo = editedProduct.ModelNo;
+                product.ImageProduct = editedProduct.ImageProduct;
+
+
+                _centralDbContext.Products.Update(product);
+                await _centralDbContext.SaveChangesAsync();
+
+                var updatedList = await _centralDbContext.Products.Include("Manufacturer").Where(x => x.ManufacturerId == x.ManufacturerId).ToListAsync();
+                return Json(updatedList);
+            }
+            catch (Exception ex)
+            {
+                return BadRequest(ex.Message);
+            }
+        }
+
         [HttpDelete("DeleteProduct/{id}")]
         public async Task<IActionResult> DeleteProduct(int id)
         {
@@ -324,7 +368,10 @@ namespace PSTW_CentralSystem.Controllers.API.Inventory
                     item.Supplier,
                     PurchaseDate = item.PurchaseDate.ToString("dd/MM/yyyy"),
                     item.PONo,
+                    item.DONo,
                     item.Currency,
+                    item.InvoiceNo,
+                    item.TeamType,
                     item.DefaultPrice,
                     item.CurrencyRate,
                     item.ConvertPrice,
@@ -383,7 +430,6 @@ namespace PSTW_CentralSystem.Controllers.API.Inventory
                 var product = await _centralDbContext.Products.FirstOrDefaultAsync(p => p.ProductId == item.ProductId) ?? throw new Exception("Product not found");
                 var inventoryMaster = await _centralDbContext.InventoryMasters.Include("User").FirstOrDefaultAsync(i => i.UserId == item.CreatedByUserId) ?? new InventoryMasterModel{ UserId = item.CreatedByUserId };
                 var addToProduct = item.Quantity;
-                product.QuantityProduct += addToProduct;
 
                 if (product.Category == "Disposable")
                 {
@@ -391,6 +437,8 @@ namespace PSTW_CentralSystem.Controllers.API.Inventory
                 }
 
                 _centralDbContext.Items.Add(item);
+
+                product.QuantityProduct += addToProduct;
                 _centralDbContext.Products.Update(product);
 
                 await _centralDbContext.SaveChangesAsync(); // This generates the auto-incremented ItemID
@@ -467,6 +515,104 @@ namespace PSTW_CentralSystem.Controllers.API.Inventory
             }
         }
 
+        [HttpPost("EditItem")]
+        public async Task<IActionResult> EditItem([FromBody] ItemModel item)
+        {
+            if (!ModelState.IsValid)
+            {
+                return BadRequest(ModelState);
+            }
+
+            try
+            {
+                var savedItem = await _centralDbContext.Items.FirstOrDefaultAsync(i => i.ItemID == item.ItemID);
+                if (savedItem == null)
+                {
+                    return NotFound(new { success = false, message = "Item not found" });
+                }
+
+                var product = await _centralDbContext.Products.FirstOrDefaultAsync(p => p.ProductId == item.ProductId) ?? throw new Exception("Product not found");
+               
+                if (product.Category == "Disposable")
+                {
+                    item.SerialNumber = null;
+                }
+
+                savedItem.ItemID = item.ItemID;
+                savedItem.DefaultPrice = item.DefaultPrice;
+                savedItem.CompanyId = item.CompanyId;
+                savedItem.DepartmentId = item.DepartmentId;
+                savedItem.ProductId = item.ProductId;
+                savedItem.SerialNumber = item.SerialNumber;
+                savedItem.TeamType = item.TeamType;
+                savedItem.Quantity = item.Quantity;
+                savedItem.Supplier = item.Supplier;
+                savedItem.PurchaseDate = item.PurchaseDate;
+                savedItem.PONo = item.PONo;
+                savedItem.Currency = item.Currency;
+                savedItem.CurrencyRate = item.CurrencyRate;
+                savedItem.ConvertPrice = item.ConvertPrice;
+                savedItem.DONo = item.DONo;
+                savedItem.DODate = item.DODate;
+                savedItem.Warranty = item.Warranty;
+                savedItem.EndWDate = item.EndWDate;
+                savedItem.InvoiceNo = item.InvoiceNo;
+                savedItem.InvoiceDate = item.InvoiceDate;
+                savedItem.PartNumber = item.PartNumber;
+                savedItem.UniqueID = item.PartNumber;
+
+
+                _centralDbContext.Items.Update(savedItem);
+
+                await _centralDbContext.SaveChangesAsync(); // This generates the auto-incremented ItemID
+
+                if (savedItem != null)
+                {
+                    var companyDepartment = await GetDepartmentWithCompany(item.CompanyId, item.DepartmentId);
+                    var itemProduct = _centralDbContext.Products.Where(p => p.ProductId == item.ProductId).FirstOrDefault();
+
+                    string? companyInitial = companyDepartment!.CompanyName?.ToString().Substring(0, 1).ToUpper();
+                    string? departmentInitial = companyDepartment!.DepartmentName?.ToString().Substring(0, 1).ToUpper();
+                    string? deptCode = companyDepartment!.DepartmentCode?.ToString();
+                    char? initialCategory = itemProduct!.Category.ToString().Substring(0, 1).ToUpper().FirstOrDefault();
+                    string? productId = itemProduct!.ProductId.ToString("D3");
+                    string? itemId = item.ItemID.ToString("D5");
+                    var uniqueId = $"{deptCode}{initialCategory}{productId}{itemId}".ToUpper();
+                    savedItem.UniqueID = uniqueId;
+
+                    _centralDbContext.Items.Update(savedItem);
+                    await _centralDbContext.SaveChangesAsync();
+                }
+
+                var updatedItem = new
+                {
+                    savedItem!.ItemID,
+                    savedItem.UniqueID,
+                    savedItem.CompanyId,
+                    savedItem.DepartmentId,
+                    savedItem.ProductId,
+                    savedItem.SerialNumber,
+                    savedItem.Quantity,
+                    savedItem.Supplier,
+                    savedItem.PurchaseDate,
+                    savedItem.PONo,
+                    savedItem.Currency,
+                    savedItem.DefaultPrice,
+                    savedItem.CurrencyRate,
+                    savedItem.ConvertPrice,
+                    savedItem.DODate,
+                    savedItem.Warranty,
+                    savedItem.EndWDate,
+                    savedItem.InvoiceDate,
+                    savedItem.PartNumber,
+                };
+                return Json(updatedItem);
+            }
+            catch (Exception ex)
+            {
+                return BadRequest(ex.Message);
+            }
+        }
         [HttpDelete("DeleteItem/{id}")]
         public async Task<IActionResult> DeleteItem(int id)
         {
@@ -476,6 +622,11 @@ namespace PSTW_CentralSystem.Controllers.API.Inventory
                 return NotFound(new { success = false, message = "Item not found" });
             }
 
+            var products = _centralDbContext.Products
+                .FirstOrDefault(i => i.ProductId == item.ProductId);
+
+            products.QuantityProduct = products.QuantityProduct - 1;
+
             // Get related item movements
             var itemMovements = await _centralDbContext.ItemMovements
                 .Where(i => i.ItemId == item.ItemID)
@@ -488,6 +639,10 @@ namespace PSTW_CentralSystem.Controllers.API.Inventory
                 await _centralDbContext.SaveChangesAsync();
             }
 
+            //Handle Rules kalau itemMovement dia xde kat store
+
+            _centralDbContext.Products.Update(products);
+
             // Remove the item itself
             _centralDbContext.Items.Remove(item);
             await _centralDbContext.SaveChangesAsync();
@@ -622,6 +777,7 @@ namespace PSTW_CentralSystem.Controllers.API.Inventory
                 ToUserName = i.NextUser?.FullName,
                 ToStoreName = i.NextStore?.StoreName,
                 ToStationName = i.NextStation?.StationName,
+                ProductImage = i.Item?.Product?.ImageProduct,
                 i.ToOther,
                 i.sendDate,
                 i.Action,
@@ -1231,8 +1387,17 @@ namespace PSTW_CentralSystem.Controllers.API.Inventory
         [HttpPost("StationList")]
         public async Task<IActionResult> StationList()
         {
-            var stationList = await _centralDbContext.Stations.Include(i => i.StationPic).ToListAsync();
+            var stationList = await _centralDbContext.Stations.Include(i => i.StationPic).Include(i => i.Department).ToListAsync();
-            return Json(stationList);
+            
+            return Json(stationList.Select(i => new
+            {
+                i.StationId,
+                i.StationPicID,
+                i.StationName,
+                i.DepartmentId,
+                i.StationPic?.FullName,
+                i.Department?.DepartmentName,
+            }));
         }
 
         [HttpPost("AddStation")]
@@ -1256,6 +1421,27 @@ namespace PSTW_CentralSystem.Controllers.API.Inventory
             }
         }
         
+
+        [HttpPost("EditStation")]
+        public async Task<IActionResult> EditStation([FromBody] StationModel updatedStation)
+        {
+            var station = await _centralDbContext.Stations.FindAsync(updatedStation.StationId);
+            if (station == null)
+            {
+                return NotFound(new { success = false, message = "Station not found" });
+            }
+
+            station.StationId = updatedStation.StationId;
+            station.StationPicID = updatedStation.StationPicID;
+            station.StationName = updatedStation.StationName;
+            station.DepartmentId = updatedStation.DepartmentId;
+
+            _centralDbContext.Stations.Update(station);
+            await _centralDbContext.SaveChangesAsync();
+
+            return Ok(new { success = true, message = "Station Updated successfully" });
+        }
+
         [HttpDelete("DeleteStation/{id}")]
         public async Task<IActionResult> DeleteStation(int id)
         {
@@ -1311,6 +1497,7 @@ namespace PSTW_CentralSystem.Controllers.API.Inventory
         [HttpPost("UserList")]
         public async Task<IActionResult> UserList()
         {
+
             var userList = await _centralDbContext.Users.Include(i => i.Department).ToListAsync();
             return Json(userList.Select(i => new
             {
@@ -1321,7 +1508,6 @@ namespace PSTW_CentralSystem.Controllers.API.Inventory
             }));
         }
 
-
         #endregion AllUser
 
         #region ScannerUser

Views/Home/Index2.cshtml

@@ -552,7 +552,7 @@
                         <div class="ms-auto text-end">
                             <nav aria-label="breadcrumb">
                                 <ol class="breadcrumb">
-                                    <li class="breadcrumb-item"><a href="#">Home</a></li>
+                                    <li class="breadcrumb-item"><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li>
                                     <li class="breadcrumb-item active" aria-current="page">
                                         Library
                                     </li>

Views/Home/Privacy.cshtml

@@ -1,6 +1,5 @@
 @{
     ViewData["Title"] = "Privacy Policy";
 }
-<h1>@ViewData["Title"]</h1>
 
-<p>Use this page to detail your site's privacy policy.</p>
+<p>PSTW All right reserved 2025</p>

Views/Shared/_Layout.cshtml

@@ -125,7 +125,7 @@
                     <!-- ============================================================== -->
                     <!-- Logo -->
                     <!-- ============================================================== -->
-                    <a class="navbar-brand" href="index.html">
+                    <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">
                         <!-- Logo icon -->
                         <b class="logo-icon ps-2">
                             <!--You can put here icon as well // <i class="wi wi-sunset"></i> //-->
@@ -235,7 +235,7 @@
                         <!-- Comment -->
                         <!-- ============================================================== -->
                         <partial name="_LoginPartial" />
-                        <li class="nav-item dropdown">
+                        @* <li class="nav-item dropdown">
                             <a class="nav-link dropdown-toggle"
                             href="#"
                             id="navbarDropdown"
@@ -252,14 +252,14 @@
                                     <a class="dropdown-item" href="#">Something else here</a>
                                 </li>
                             </ul>
-                        </li>
+                        </li> *@
                         <!-- ============================================================== -->
                         <!-- End Comment -->
                         <!-- ============================================================== -->
                         <!-- ============================================================== -->
                         <!-- Messages -->
                         <!-- ============================================================== -->
-                        <li class="nav-item dropdown">
+                        @* <li class="nav-item dropdown">
                             <a class="nav-link dropdown-toggle waves-effect waves-dark"
                             href="#"
                             id="2"
@@ -350,21 +350,21 @@
                                     </li>
                                 </ul>
                             </ul>
-                        </li>
+                        </li> *@
                         <!-- ============================================================== -->
                         <!-- End Messages -->
                         <!-- ============================================================== -->
                         <!-- ============================================================== -->
                         <!-- User profile and search -->
                         <!-- ============================================================== -->
-                        <li class="nav-item dropdown">
+                        @* <li class="nav-item dropdown">
                             <a class="
-                    nav-link
+                                nav-link
-                    dropdown-toggle
+                                dropdown-toggle
-                    text-muted
+                                text-muted
-                    waves-effect waves-dark
+                                waves-effect waves-dark
-                    pro-pic
+                                pro-pic
-                            "
+                                        "
                             href="#"
                             id="navbarDropdown"
                             role="button"
@@ -393,7 +393,7 @@
                                     class="btn btn-sm btn-success btn-rounded text-white">View Profile</a>
                                 </div>
                             </ul>
-                        </li>
+                        </li> *@
                         <!-- ============================================================== -->
                         <!-- User profile and search -->
                         <!-- ============================================================== -->
@@ -831,7 +831,7 @@
             <!-- footer -->
             <!-- ============================================================== -->
             <footer class="footer text-center">
-                All Rights Reserved by Matrix-admin. Designed and Developed by
+                All Rights Reserved by PSTW. Designed and Developed by
                 <a href="https://www.wrappixel.com">WrapPixel</a>.
             </footer>
             <!-- ============================================================== -->