Working log in/route guard

src/pages/customer/create.vue

@@ -6,6 +6,7 @@
         <ul>
           <li><router-link :to="{ name: 'home' }">Home</router-link></li>
           <li><router-link :to="{ name: 'customer' }">Customers</router-link></li>
+          
           <li>Create New Customer</li>
         </ul>
       </div>

src/pages/customer/edit.vue

@@ -6,7 +6,11 @@
         <ul>
           <li><router-link :to="{ name: 'home' }">Home</router-link></li>
           <li><router-link :to="{ name: 'customer' }">Customers</router-link></li>
-          <li>Edit Customer</li>
+          <li v-if="customer && customer.id">
+            <router-link :to="{ name: 'customerProfile', params: { id: customer.id } }">
+              {{ customer.customer_first_name }} {{ customer.customer_last_name }}
+            </router-link>
+          </li>
         </ul>
       </div>
       

src/pages/customer/profile/profile.vue

@@ -12,10 +12,17 @@
         <div class="xl:col-span-8 space-y-6">
           
           <div class="grid grid-cols-1 xl:grid-cols-12 gap-6">
-            <ProfileMap 
-              class="xl:col-span-7"
-              :customer="customer" 
-            />
+        <ProfileMap 
+    v-if="customer && customer.customer_latitude != null && customer.customer_longitude != null"
+    class="xl:col-span-7"
+    :customer="customer" 
+  />
+  
+  <!-- You can add a placeholder for when the map isn't ready -->
+  <div v-else class="xl:col-span-7 bg-base-100 rounded-lg flex justify-center items-center">
+    <p class="text-gray-400">Location not available...</p>
+  </div>
+
             <ProfileSummary 
               class="xl:col-span-5"
               :customer="customer" 
@@ -428,18 +435,30 @@ export default defineComponent({
     editCard(card_id: any) {
       this.$router.push({ name: "cardedit", params: { id: card_id } });
     },
-    removeCard(card_id: any) {
-      let path = import.meta.env.VITE_BASE_URL + '/payment/card/remove/' + card_id;
-      axios({
-        method: 'delete',
-        url: path,
-        headers: authHeader(),
-      }).then(() => {
-        this.getCreditCards(this.customer.user_id)
-        this.getCreditCardsCount(this.customer.user_id)
-        notify({ title: "Card Status", text: "Card Removed", type: "Success" });
-      })
-    },
+removeCard(card_id: any) {
+  let path = import.meta.env.VITE_BASE_URL + '/payment/card/remove/' + card_id;
+  axios({
+    method: 'delete',
+    url: path,
+    headers: authHeader(),
+  }).then(() => {
+    // --- EFFICIENT FIX: Manipulate the local array directly ---
+    
+    // 1. Filter the 'credit_cards' array to remove the card with the matching id.
+    this.credit_cards = this.credit_cards.filter(card => card.id !== card_id);
+    
+    // 2. Decrement the count.
+    this.credit_cards_count--;
+
+    // --- END EFFICIENT FIX ---
+    
+    notify({ title: "Card Status", text: "Card Removed", type: "Success" });
+  })
+  .catch(() => {
+    
+      notify({ title: "Error", text: "Could not remove card.", type: "error" });
+  });
+},
     deleteCall(delivery_id: any) {
       let path = import.meta.env.VITE_BASE_URL + '/delivery/delete/' + delivery_id;
       axios({

src/pages/customer/tank/edit.vue

@@ -68,8 +68,8 @@
 
             <!-- Fill Location -->
             <div class="form-control md:col-span-2">
-              <label class="label"><span class="label-text">Fill Location Description</span></label>
-              <input v-model="TankForm.fill_location" type="text" placeholder="e.g., Left side of house, behind shed" class="input input-bordered input-sm w-full" />
+              <label class="label"><span class="label-text">Fill Location </span></label>
+              <input v-model="TankForm.fill_location" type="text" placeholder="0-12 only" class="input input-bordered input-sm w-full" />
             </div>
           </div>