diff --git a/Areas/Inventory/Views/ItemMovement/ItemMovementUser.cshtml b/Areas/Inventory/Views/ItemMovement/ItemMovementUser.cshtml
index 59c3380..4357a51 100644
--- a/Areas/Inventory/Views/ItemMovement/ItemMovementUser.cshtml
+++ b/Areas/Inventory/Views/ItemMovement/ItemMovementUser.cshtml
@@ -15,6 +15,56 @@
     .table td img {
         display: block !important;
     }
+
+
+    .text-true {
+        color: green;
+    }
+
+    .text-false {
+        color: red;
+    }
+
+    .text-primary {
+        color: blue; /* Warna asal untuk 'Receive' */
+    }
+
+    .text-warning {
+        color: orange; /* Warna oren untuk 'Return' */
+    }
+
+    .fixed-label {
+        margin-left:100px;
+        font-weight: bold;
+        min-width: 120px; /* Ensure labels have same width */
+    }
+
+    .fixed-labelStatus {
+        margin-left: 25px;
+        font-weight: bold;
+        min-width: 20px; /* Ensure labels have same width */
+    }
+    .fixed-value {
+        min-width: 150px;
+        margin-right:-20px;
+        display: inline-block;
+    }
+
+    .gap-4 {
+        gap: 30px; /* Increase spacing between Send Date and Receive Date */
+    }
+
+    .gap-2 {
+        gap: 1rem !important; /* Ensure Status is closer to its value */
+    }
+
+    .me-5 {
+        margin-right: 2rem !important; /* Move Receive/Return further from Send Date */
+    }
+
+    .ms-auto {
+        margin-left: auto !important; /* Push Complete/Incomplete to right */
+    }
 </style>
 @await Html.PartialAsync("~/Areas/Inventory/Views/_InventoryPartialUser.cshtml");
 
@@ -49,40 +99,67 @@
     </div>
 
     <div v-if="sortBy === 'item'">
-        <div v-for="(group, itemId) in groupedByItem" :key="itemId" class="row card">
+        <div v-for="(group, itemId) in getGroupedByItem()" :key="itemId" class="row card">
             <div class="card-header">
                 <h2>Item Name: {{ group.productName }}</h2>
             </div>
             <div class="card-body">
                 <div v-for="movement in group.movements" :key="movement.id" class="movement-row">
                     <div class="row">
-                        <div class="col-md-12">
-                            <strong>{{ movement.toOther === 'On Delivery' ? 'Receive' : 'Return' }}:</strong>
-                            | <strong>Send Date:</strong> {{ movement.sendDate }}
-                            | <strong>Receive Date:</strong> {{ movement.receiveDate || 'Not arrive' }}
-                            | <strong>Status:</strong> {{ movement.latestStatus || movement.toOther }}
-                            | <button class="btn btn-info btn-sm" v-on:click="toggleDetails(movement.id)">More Details</button>
+                        <div class="col-md-12 d-flex align-items-center flex-wrap">
+
+                            <h3 :class="movement.toOther === 'On Delivery' ? 'text-primary' : 'text-warning'" class="me-5">
+                                {{ movement.toOther === 'On Delivery' ? 'Receive' : 'Return' }}
+                            </h3>
+
+                            <div class="d-flex align-items-center gap-4">
+                                <h4 class="fixed-label">Send Date:</h4>
+                                <span class="fixed-value">{{ movement.sendDate }}</span>
+                            </div>
+
+                            <div class="d-flex align-items-center gap-4">
+                                <h4 class="fixed-label">Receive Date:</h4>
+                                <span class="fixed-value">{{ movement.receiveDate || 'Not arrive' }}</span>
+                            </div>
+
+                            <div class="d-flex align-items-center gap-2">
+                                <h4 class="fixed-labelStatus">Action:</h4>
+                                <span class="fixed-value">{{ movement.action}}</span>
+                            </div>
+
+                            <div class="d-flex align-items-center gap-2">
+                                <h4 class="fixed-labelStatus">Status:</h4>
+                                <span class="fixed-value">{{ movement.latestStatus || movement.toOther }}</span>
+                            </div>
+
+                            <button class="btn btn-info btn-sm me-3" v-on:click="toggleDetails(movement.id)">More Details</button>
+
+                            <h4 :class="movement.movementComplete == 1 ? 'text-success' : 'text-danger'" class="ms-auto">
+                                {{ movement.movementComplete == 1 ? 'Complete' : 'Incomplete' }}
+                            </h4>
                         </div>
                     </div>
 
+                    <!-- Details Section -->
                     <div v-if="movement.showDetails" class="details-row mt-2">
                         <div class="row align-items-center">
                             <div class="col-md-4 text-center">
                                 <i class="fas fa-warehouse fa-2x"></i>
-                                <p>Information: {{ movement.toOther }}</p>
-                                <p>User: {{ movement.toUser }}</p>
-                                <p>Station: {{ movement.toStationName }}</p>
-                                <p>Store: {{ movement.toStoreName }}</p>
+                                <p><strong>Information:</strong> {{ movement.toOther }}</p>
+                                <p><strong>User:</strong> {{ movement.toUserName }}</p>
+                                <p><strong>Station:</strong> {{ movement.toStationName }}</p>
+                                <p><strong>Store:</strong> {{ movement.toStoreName }}</p>
                             </div>
                             <div class="col-md-4 text-center">
                                 <i class="fas fa-arrow-right fa-2x"></i>
+                                <p>{{ movement.latestStatus || movement.toOther }}</p>
                             </div>
                             <div class="col-md-4 text-center">
                                 <i class="fas fa-user fa-2x"></i>
-                                <p>Information: {{ movement.toOther }}</p>
-                                <p>User: {{ movement.lastUser }}</p>
-                                <p>Station: {{ movement.lastStationName }}</p>
-                                <p>Store: {{ movement.lastStoreName }}</p>
+                                <p><strong>Information:</strong> {{ movement.latestStatus }}</p>
+                                <p><strong>User:</strong> {{ movement.lastUserName }}</p>
+                                <p><strong>Station:</strong> {{ movement.lastStationName }}</p>
+                                <p><strong>Store:</strong> {{ movement.lastStoreName }}</p>
                             </div>
                         </div>
                     </div>
@@ -90,6 +167,7 @@
                 </div>
             </div>
         </div>
+
     </div>
 </div>
 
@@ -111,8 +189,12 @@
                 sortBy: 'all', // Sorting option
             }
         },
-        computed: {
-            groupedByItem() {
+        mounted() {
+            console.log("Vue app mounted!");
+            this.fetchItemMovement();
+        },
+        methods: {
+            getGroupedByItem() {
                 return this.itemMovements.reduce((acc, movement) => {
                     if (!acc[movement.itemId]) {
                         acc[movement.itemId] = {
@@ -120,15 +202,10 @@
                             movements: []
                         };
                     }
-                    acc[movement.itemId].movements.push({...movement, showDetails: false});
+                    acc[movement.itemId].movements.push(movement); // Jangan reset showDetails
                     return acc;
                 }, {});
             },
-        },
-        mounted() {
-            this.fetchItemMovement();
-        },
-        methods: {
             async fetchItemMovement() {
                 try {
                     const response = await fetch('/InvMainAPI/ItemMovementUser', {
@@ -155,7 +232,7 @@
                     if (this.itemMovementCompleteDatatable) {
                         this.itemMovementCompleteDatatable.clear().destroy();
                     }
-
+                    this.$forceUpdate();
                     this.renderTables();
                 } 
                 catch (error) {
@@ -234,12 +311,13 @@
             },
 
             toggleDetails(id) {
-                const movement = this.itemMovements.find(m => m.id === id);
+                const movement = this.itemMovements.find(mov => mov.id === id);
                 if (movement) {
-                    movement.showDetails = !movement.showDetails;
+                    movement.showDetails = !movement.showDetails; // Toggle value
                 }
             },
 
+
             resetForm() {
                 this.itemMovement = '';
             },