diff --git a/.env b/.env
index 053b85a..e69de29 100755
--- a/.env
+++ b/.env
@@ -1,4 +0,0 @@
-# VITE_BASE_URL="http://localhost:9511"
-# VITE_MONEY_URL="http://localhost:9513"
-# VITE_AUTO_URL="http://localhost:9514"
-# VITE_COMPANY_ID = 1
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 28372e2..cab0bc6 100755
--- a/package-lock.json
+++ b/package-lock.json
@@ -29,6 +29,7 @@
         "vuelidate": "^0.7.7"
       },
       "devDependencies": {
+        "@types/leaflet": "^1.9.20",
         "@vitejs/plugin-vue": "^4.5.2",
         "@vue-leaflet/vue-leaflet": "^0.10.1",
         "autoprefixer": "^10.4.16",
@@ -799,6 +800,21 @@
       "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
       "dev": true
     },
+    "node_modules/@types/geojson": {
+      "version": "7946.0.16",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.16.tgz",
+      "integrity": "sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==",
+      "dev": true
+    },
+    "node_modules/@types/leaflet": {
+      "version": "1.9.20",
+      "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.20.tgz",
+      "integrity": "sha512-rooalPMlk61LCaLOvBF2VIf9M47HgMQqi5xQ9QRi7c8PkdIe0WrIi5IxXUXQjAdL0c+vcQ01mYWbthzmp9GHWw==",
+      "dev": true,
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
     "node_modules/@types/web-bluetooth": {
       "version": "0.0.20",
       "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
diff --git a/package.json b/package.json
index d8c9e13..6251173 100755
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
     "vuelidate": "^0.7.7"
   },
   "devDependencies": {
+    "@types/leaflet": "^1.9.20",
     "@vitejs/plugin-vue": "^4.5.2",
     "@vue-leaflet/vue-leaflet": "^0.10.1",
     "autoprefixer": "^10.4.16",
diff --git a/src/pages/authorize/PaymentForm.vue b/src/pages/authorize/PaymentForm.vue
new file mode 100644
index 0000000..aaae276
--- /dev/null
+++ b/src/pages/authorize/PaymentForm.vue
@@ -0,0 +1,174 @@
+<!-- <template>
+  <div class="container mx-auto p-4">
+    <h1 class="text-2xl font-bold mb-4">HVAC Payment</h1>
+
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+      <div>
+        <h2 class="text-xl font-semibold mb-2">Direct Charge</h2>
+        <form @submit.prevent="submitDirectCharge">
+          <div class="form-control">
+            <label class="label">
+              <span class="label-text">Card Number</span>
+            </label>
+            <input type="text" v-model="directCharge.cardNumber" class="input input-bordered" required />
+          </div>
+          <div class="form-control">
+            <label class="label">
+              <span class="label-text">Expiration Date (MM/YY)</span>
+            </label>
+            <input type="text" v-model="directCharge.expirationDate" class="input input-bordered" required />
+          </div>
+          <div class="form-control">
+            <label class="label">
+              <span class="label-text">CVV</span>
+            </label>
+            <input type="text" v-model="directCharge.cvv" class="input input-bordered" required />
+          </div>
+          <div class="form-control">
+            <label class="label">
+              <span class="label-text">Amount</span>
+            </label>
+            <input type="number" v-model="directCharge.amount" class="input input-bordered" required />
+          </div>
+          <div class="form-control mt-6">
+            <button type="submit" class="btn btn-primary">Charge</button>
+          </div>
+        </form>
+      </div>
+
+      <div>
+        <h2 class="text-xl font-semibold mb-2">Authorize and Capture</h2>
+        <form @submit.prevent="submitAuthorization">
+          <div class="form-control">
+            <label class="label">
+              <span class="label-text">Card Number</span>
+            </label>
+            <input type="text" v-model="authorization.cardNumber" class="input input-bordered" required />
+          </div>
+          <div class="form-control">
+            <label class="label">
+              <span class="label-text">Expiration Date (MM/YY)</span>
+            </label>
+            <input type="text" v-model="authorization.expirationDate" class="input input-bordered" required />
+          </div>
+          <div class="form-control">
+            <label class="label">
+              <span class="label-text">CVV</span>
+            </label>
+            <input type="text" v-model="authorization.cvv" class="input input-bordered" required />
+          </div>
+          <div class="form-control">
+            <label class="label">
+              <span class="label-text">Amount</span>
+            </label>
+            <input type="number" v-model="authorization.amount" class="input input-bordered" required />
+          </div>
+          <div class="form-control mt-6">
+            <button type="submit" class="btn btn-secondary">Authorize</button>
+          </div>
+        </form>
+
+        <div v-if="authorizedTransactionId" class="mt-8">
+          <h3 class="text-lg font-semibold mb-2">Capture Authorized Amount</h3>
+          <p>Authorized Transaction ID: {{ authorizedTransactionId }}</p>
+          <form @submit.prevent="submitCapture">
+            <div class="form-control">
+              <label class="label">
+                <span class="label-text">Capture Amount</span>
+              </label>
+              <input type="number" v-model="capture.amount" class="input input-bordered" required />
+            </div>
+            <div class="form-control mt-6">
+              <button type="submit" class="btn btn-accent">Capture</button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="transactionResult" class="mt-8 p-4 rounded-lg" :class="transactionResult.status === 'approved' || transactionResult.status === 'authorized' || transactionResult.status === 'captured' ? 'bg-green-200' : 'bg-red-200'">
+      <h3 class="font-bold">Transaction Result</h3>
+      <p>Status: {{ transactionResult.status }}</p>
+      <p v-if="transactionResult.auth_net_transaction_id">Transaction ID: {{ transactionResult.auth_net_transaction_id }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios';
+
+const API_URL = 'http://localhost:8000/api'; // Your FastAPI backend URL
+
+export default {
+  data() {
+    return {
+      directCharge: {
+        cardNumber: '',
+        expirationDate: '',
+        cvv: '',
+        amount: 0,
+      },
+      authorization: {
+        cardNumber: '',
+        expirationDate: '',
+        cvv: '',
+        amount: 0,
+      },
+      capture: {
+        amount: 0,
+      },
+      authorizedTransactionId: null,
+      transactionResult: null,
+      customerId: 1 // Assuming a customer with ID 1 exists for this example
+    };
+  },
+  methods: {
+    async submitDirectCharge() {
+      try {
+        const response = await axios.post(`${API_URL}/charge/?customer_id=${this.customerId}`, {
+          card_number: this.directCharge.cardNumber,
+          expiration_date: this.directCharge.expirationDate,
+          cvv: this.directCharge.cvv,
+          amount: this.directCharge.amount,
+          transaction_type: 'charge'
+        });
+        this.transactionResult = response.data;
+      } catch (error) {
+        console.error(error);
+        this.transactionResult = { status: 'Error processing transaction' };
+      }
+    },
+    async submitAuthorization() {
+      try {
+        const response = await axios.post(`${API_URL}/authorize/?customer_id=${this.customerId}`, {
+          card_number: this.authorization.cardNumber,
+          expiration_date: this.authorization.expirationDate,
+          cvv: this.authorization.cvv,
+          amount: this.authorization.amount,
+          transaction_type: 'auth'
+        });
+        this.transactionResult = response.data;
+        if (response.data.status === 'authorized') {
+          this.authorizedTransactionId = response.data.auth_net_transaction_id;
+          this.capture.amount = this.authorization.amount; // Pre-fill capture amount
+        }
+      } catch (error) {
+        console.error(error);
+        this.transactionResult = { status: 'Error processing authorization' };
+      }
+    },
+    async submitCapture() {
+      try {
+        const response = await axios.post(`${API_URL}/capture/`, {
+          amount: this.capture.amount,
+          auth_net_transaction_id: this.authorizedTransactionId
+        });
+        this.transactionResult = response.data;
+      } catch (error) {
+        console.error(error);
+        this.transactionResult = { status: 'Error processing capture' };
+      }
+    },
+  },
+};
+</script> -->
\ No newline at end of file
diff --git a/src/pages/card/addcard.vue b/src/pages/card/addcard.vue
index 67af8cd..8abfad2 100755
--- a/src/pages/card/addcard.vue
+++ b/src/pages/card/addcard.vue
@@ -79,13 +79,15 @@
                 <label class="block text-white text-sm font-bold mb-2">Expiration Year</label>
                 <select v-model="CreateCardForm.basicInfo.expiration_year"
                   class="input input-bordered input-sm w-full max-w-xs" id="Month">
-                  <option>2024</option>
                   <option>2025</option>
                   <option>2026</option>
                   <option>2027</option>
                   <option>2028</option>
                   <option>2029</option>
                   <option>2030</option>
+                  <option>2031</option>
+                  <option>2032</option>
+
                 </select>
 
                 <span v-if="v$.CreateCardForm.basicInfo.expiration_year.$error" class="text-red-600 text-center">
diff --git a/src/pages/card/editcard.vue b/src/pages/card/editcard.vue
index 08aa595..c2dad28 100755
--- a/src/pages/card/editcard.vue
+++ b/src/pages/card/editcard.vue
@@ -91,13 +91,14 @@
                       class="input input-bordered input-sm w-full max-w-xs"
                       id="Month"
                        >
-                      <option>2024</option>
-                      <option>2025</option>
-                      <option>2026</option>
-                      <option>2027</option>
-                      <option>2028</option>
-                      <option>2029</option>
-                      <option>2030</option>
+                  <option>2025</option>
+                  <option>2026</option>
+                  <option>2027</option>
+                  <option>2028</option>
+                  <option>2029</option>
+                  <option>2030</option>
+                  <option>2031</option>
+                  <option>2032</option>
                 </select>
                 <span v-if="v$.CreateCardForm.basicInfo.expiration_year.$error"
                       class="text-red-600 text-center">
diff --git a/src/pages/customer/profile/home.vue b/src/pages/customer/profile/home.vue
index b218dbb..e6eec48 100755
--- a/src/pages/customer/profile/home.vue
+++ b/src/pages/customer/profile/home.vue
@@ -40,7 +40,7 @@
             </div>
             <div class="col-span-6  p-5">
               <div class="grid grid-cols-12 ">
-                <div class="col-span-12 font-bold flex justify-evenly pb-5">
+                <div class="col-span-12 font-bold flex justify-evenly pb-5 flex-wrap gap-2">
 
                   <router-link :to="{ name: 'deliveryCreate', params: { id: customer.id } }"
                     class="btn-sm btn bg-orange-600 text-white">
@@ -53,6 +53,8 @@
                     Create Service Call
                   </router-link>
 
+
+
                   <router-link :to="{ name: 'customerEdit', params: { id: customer.id } }"
                     class="btn-sm btn btn-secondary">
                     Edit Customer
@@ -60,12 +62,12 @@
 
                   <div v-if="automatic_status === 0">
                     <button v-on:click="userAutomatic(customer.id)" class="btn-sm btn btn-secondary">
-                      Become Automatic Customer
+                      Become Auto
                     </button>
                   </div>
                   <div v-else>
                     <button v-on:click="userAutomatic(customer.id)" class="btn bg-green-600 text-black  btn-sm">
-                      Become Will Call Customer
+                      Become Will Call
                     </button>
                   </div>
                 </div>
@@ -173,6 +175,7 @@
                           {{ customer.customer_phone_number }}
                         </div>
                       </div>
+                      
                     </div>
 
                     <div class="col-span-6">
@@ -290,6 +293,48 @@
                 </div>
               </div>
 
+              <div class="col-span-12 ">
+                <hr class=" h-1 mx-auto my-4 bg-gray-800 border-0 rounded  dark:bg-gray-400">
+                             <div class="col-span-12 ">
+                <div class="grid grid-cols-12">
+                    <div class="col-span-6 font-bold flex text-2xl">
+                      Equipment Parts
+                    </div>
+                    <div class="col-span-6 font-bold flex justify-start">
+                        <button @click="openPartsModal" class="btn-sm btn btn-secondary">Edit Parts</button>
+                    </div>
+                    
+                    <div v-if="currentParts" class="col-span-12 mt-4">
+                        <div v-if="hasPartsData" class="grid grid-cols-12 gap-4">
+                            
+                            <div v-if="currentParts.oil_filter" class="col-span-6">
+                                <div class="font-bold">Oil Filter 1:</div>
+                                <div>{{ currentParts.oil_filter }}</div>
+                            </div>
+
+                            <div v-if="currentParts.oil_filter_2" class="col-span-6">
+                                <div class="font-bold">Oil Filter 2:</div>
+                                <div>{{ currentParts.oil_filter_2 }}</div>
+                            </div>
+                            
+                            <div v-if="currentParts.oil_nozzle" class="col-span-6">
+                                <div class="font-bold">Oil Nozzle 1:</div>
+                                <div :style="{ color: getNozzleColor(currentParts.oil_nozzle), fontWeight: 'bold' }">{{ currentParts.oil_nozzle }}</div>
+                            </div>
+                            
+                            <div v-if="currentParts.oil_nozzle_2" class="col-span-6">
+                                <div class="font-bold">Oil Nozzle 2:</div>
+                                <div :style="{ color: getNozzleColor(currentParts.oil_nozzle_2), fontWeight: 'bold' }">{{ currentParts.oil_nozzle_2 }}</div>
+                            </div>
+
+                        </div>
+                         <div v-else>
+                            <p>No equipment parts information available.</p>
+                        </div>
+                    </div>
+                </div>
+                </div>
+              </div>
               <div class="col-span-12 ">
                 <hr class=" h-1 mx-auto my-4 bg-gray-800 border-0 rounded  dark:bg-gray-400">
               </div>
@@ -311,7 +356,7 @@
                       {{ credit_cards_count }} credit card(s) on file.
                     </div>
                   </div>
-                  <div v-for="card in credit_cards" class="col-span-12 ">
+                  <div v-for="card in credit_cards" :key="card.id" class="col-span-12 ">
                     <div class="flex flex-row ">
                       <div v-if="card.main_card" class="basis-1/2 p-2 ">
                         <div class="bg-neutral rounded-md border-2 ">
@@ -325,18 +370,8 @@
                             {{ card.card_number }}
                           </div>
                           <div class="flex p-1 pl-4">
-                            <div v-if="card.expiration_month == 1">01</div>
-                            <div v-if="card.expiration_month == 2">02</div>
-                            <div v-if="card.expiration_month == 3">03</div>
-                            <div v-if="card.expiration_month == 4">04</div>
-                            <div v-if="card.expiration_month == 5">05</div>
-                            <div v-if="card.expiration_month == 6">06</div>
-                            <div v-if="card.expiration_month == 7">07</div>
-                            <div v-if="card.expiration_month == 8">08</div>
-                            <div v-if="card.expiration_month == 9">09</div>
-                            <div v-if="card.expiration_month == 10">10</div>
-                            <div v-if="card.expiration_month == 11">11</div>
-                            <div v-if="card.expiration_month == 12">12</div>
+                            <div v-if="card.expiration_month < 10">0{{ card.expiration_month }}</div>
+                            <div v-else>{{ card.expiration_month }}</div>
                             <div class=" pl-1 pr-1">/ </div>
                             <div class=""> {{ card.expiration_year }} </div>
                           </div>
@@ -369,18 +404,8 @@
                             {{ card.card_number }}
                           </div>
                           <div class="flex p-1 pl-4">
-                            <div v-if="card.expiration_month == 1">01</div>
-                            <div v-if="card.expiration_month == 2">02</div>
-                            <div v-if="card.expiration_month == 3">03</div>
-                            <div v-if="card.expiration_month == 4">04</div>
-                            <div v-if="card.expiration_month == 5">05</div>
-                            <div v-if="card.expiration_month == 6">06</div>
-                            <div v-if="card.expiration_month == 7">07</div>
-                            <div v-if="card.expiration_month == 8">08</div>
-                            <div v-if="card.expiration_month == 9">09</div>
-                            <div v-if="card.expiration_month == 10">10</div>
-                            <div v-if="card.expiration_month == 11">11</div>
-                            <div v-if="card.expiration_month == 12">12</div>
+                             <div v-if="card.expiration_month < 10">0{{ card.expiration_month }}</div>
+                            <div v-else>{{ card.expiration_month }}</div>
                             <div class=" pl-1 pr-1">/ </div>
                             <div class=""> {{ card.expiration_year }} </div>
                           </div>
@@ -406,9 +431,6 @@
               </div>
             </div>
 
-            <!-- ====================================================== -->
-            <!-- ============== COMMENTS SECTION (FIXED LAYOUT) ============== -->
-            <!-- ====================================================== -->
             <div class="col-span-6 px-4">
               <div class="grid grid-cols-12">
                 <form class="rounded-md  col-span-12" enctype="multipart/form-data" @submit.prevent="onSubmitSocial">
@@ -486,9 +508,6 @@
               </div>
             </div>
 
-            <!-- ====================================================== -->
-            <!-- ============== AUTOMATIC DELIVERIES (FIXED) ============== -->
-            <!-- ====================================================== -->
             <div class="col-span-12  p-5">
               <div class="grid grid-cols-12">
                 <div class="col-span-12 font-bold flex text-2xl mb-5">Automatic Deliveries</div>
@@ -522,9 +541,6 @@
               </div>
             </div>
 
-            <!-- ====================================================== -->
-            <!-- ============== ORDERS TABLE (FIXED) ============== -->
-            <!-- ====================================================== -->
             <div class="col-span-12  p-5">
               <div class="grid grid-cols-12">
                 <div class="col-span-12 font-bold flex text-2xl mb-5">Orders</div>
@@ -605,6 +621,14 @@
       @save-changes="handleSaveChanges"
       @delete-service="handleDeleteService"
   />
+
+  <PartsEditModal
+      v-if="isPartsModalOpen && currentParts"
+      :customer-id="customer.id"
+      :existing-parts="currentParts"
+      @close-modal="closePartsModal"
+      @save-parts="handleSaveParts"
+    />
 </template>
 
 <script lang="ts">
@@ -617,9 +641,18 @@ import Footer from '../../../layouts/footers/footer.vue'
 import PaginationComp from "../../../components/pagination.vue";
 import { notify } from "@kyvg/vue3-notification";
 import "leaflet/dist/leaflet.css";
+import L from 'leaflet';
+import iconUrl from 'leaflet/dist/images/marker-icon.png';
+import shadowUrl from 'leaflet/dist/images/marker-shadow.png';
 import { LMap, LTileLayer } from "@vue-leaflet/vue-leaflet";
 import dayjs from 'dayjs';
 import ServiceEditModal from '../../service/ServiceEditModal.vue';
+import PartsEditModal from '../service/PartsEditModal.vue'; 
+
+L.Icon.Default.mergeOptions({
+  iconUrl: iconUrl,
+  shadowUrl: shadowUrl,
+});
 
 interface ServiceCall {
   id: number;
@@ -631,6 +664,15 @@ interface ServiceCall {
   description: string;
 }
 
+interface ServiceParts {
+  id?: number;
+  customer_id: number;
+  oil_filter: string;
+  oil_filter_2: string;
+  oil_nozzle: string;
+  oil_nozzle_2: string;
+}
+
 export default defineComponent({
   name: 'CustomerProfile',
   components: {
@@ -640,12 +682,13 @@ export default defineComponent({
     LMap,
     LTileLayer,
     ServiceEditModal,
+    PartsEditModal,
   },
   data() {
     return {
       zoom: 14,
       token: null,
-      user: { user_id: 0, user_name: '', confirmed: '' },
+user: null as { user_id: number; user_name: string; confirmed: string; } | null,
       isTrue: true,
       automatic_status: 0,
       automatic_response: 0,
@@ -666,26 +709,62 @@ export default defineComponent({
       delivery_options: { delivery_edgeNavigation: false, delivery_format: false, delivery_template: PaginationComp },
       serviceCalls: [] as ServiceCall[],
       selectedServiceForEdit: null as ServiceCall | null,
+      isPartsModalOpen: false,
+      currentParts: null as ServiceParts | null,
+    }
+  },
+  computed: {
+    hasPartsData() {
+      if (!this.currentParts) return false;
+      return !!(this.currentParts.oil_filter || this.currentParts.oil_filter_2 || this.currentParts.oil_nozzle || this.currentParts.oil_nozzle_2);
     }
   },
   created() {
-    this.userStatus()
     this.getCustomer(this.$route.params.id);
-    this.getCreditCards(this.$route.params.id)
-    this.getCreditCardsCount(this.$route.params.id)
-    this.getCustomerSocial(this.$route.params.id, 1)
   },
   mounted() {
-    this.getPage(this.delivery_page)
+    // getPage is now called from within getCustomer, so this can be removed if it's redundant
   },
   watch: {
-    $route() {
-      this.getCustomer(this.$route.params.id);
+    '$route.params.id'(newId) {
+      if (newId) {
+        this.getCustomer(newId);
+      }
     },
   },
   methods: {
     getPage: function (page: any) {
-      this.getCustomerDelivery(this.$route.params.id, page)
+      if (this.customer && this.customer.id) {
+        this.getCustomerDelivery(this.customer.id, page);
+      }
+    },
+    getCustomer(userid: any) {
+      if (!userid) return;
+      let path = import.meta.env.VITE_BASE_URL + '/customer/' + userid;
+      axios({
+        method: 'get',
+        url: path,
+        headers: authHeader(),
+      }).then((response: any) => {
+        this.customer = response.data;
+        
+        // --- ALL DEPENDENT API CALLS ARE NOW CHAINED HERE ---
+        this.userStatus();
+        this.getCreditCards(this.customer.id); // Assuming this uses user_id
+        this.getCreditCardsCount(this.customer.id); // Assuming this uses user_id
+        this.getCustomerSocial(this.customer.id, 1);
+        this.getPage(this.delivery_page);
+        this.checktotalOil(this.customer.id);
+        this.getCustomerTank(this.customer.id);
+        this.userAutomaticStatus(this.customer.id);
+        this.getCustomerDescription(this.customer.id);
+        this.getCustomerStats(this.customer.id);
+        this.getCustomerLastDelivery(this.customer.id);
+        this.getServiceCalls(this.customer.id);
+        this.fetchCustomerParts(this.customer.id);
+      }).catch((error: any) => {
+          console.error("CRITICAL: Failed to fetch main customer data. Aborting other calls.", error);
+      });
     },
     userStatus() {
       let path = import.meta.env.VITE_BASE_URL + '/auth/whoami';
@@ -694,13 +773,11 @@ export default defineComponent({
         url: path,
         withCredentials: true,
         headers: authHeader(),
-      })
-        .then((response: any) => {
+      }).then((response: any) => {
           if (response.data.ok) {
             this.user = response.data.user;
           }
-        })
-        .catch(() => { })
+      }).catch(() => { this.user = null });
     },
     userAutomaticStatus(userid: any) {
       let path = import.meta.env.VITE_BASE_URL + '/customer/automatic/status/' + userid;
@@ -734,26 +811,17 @@ export default defineComponent({
           this.$notify({ title: "Automatic Status", text: 'Customer is now Manual Customer', type: 'Warning' });
         }
         this.getCustomer(this.$route.params.id);
-        this.getCreditCards(this.$route.params.id)
-        this.getCreditCardsCount(this.$route.params.id)
       })
     },
-    getCustomer(userid: any) {
-      let path = import.meta.env.VITE_BASE_URL + '/customer/' + userid;
-      axios({
-        method: 'get',
-        url: path,
-        headers: authHeader(),
-      }).then((response: any) => {
-        this.customer = response.data
-        this.checktotalOil(this.customer.id)
-        this.getCustomerTank(this.customer.id)
-        this.userAutomaticStatus(this.customer.id);
-        this.getCustomerDescription(this.customer.id);
-        this.getCustomerStats(this.customer.id);
-        this.getCustomerLastDelivery(this.customer.id);
-        this.getServiceCalls(this.customer.id);
-      })
+    getNozzleColor(nozzleString: string): string {
+      if (!nozzleString || typeof nozzleString !== 'string') return '';
+      const firstChar = nozzleString.trim().toLowerCase().charAt(0);
+      switch (firstChar) {
+        case 'a': return '#EF4444';
+        case 'b': return '#3B82F6';
+        case 'w': return '#16a34a';
+        default: return 'inherit';
+      }
     },
     getCustomerLastDelivery(userid: any) {
       let path = import.meta.env.VITE_BASE_URL + '/stats/user/lastdelivery/' + userid;
@@ -853,8 +921,8 @@ export default defineComponent({
         url: path,
         headers: authHeader(),
       }).then(() => {
-        this.getCreditCards(this.$route.params.id)
-        this.getCreditCardsCount(this.$route.params.id)
+        this.getCreditCards(this.customer.user_id)
+        this.getCreditCardsCount(this.customer.user_id)
         notify({ title: "Card Status", text: "Card Removed", type: "Success" });
       })
     },
@@ -912,10 +980,15 @@ export default defineComponent({
           }
         })
     },
-    onSubmitSocial() {
-      let payload = { comment: this.CreateSocialForm.basicInfo.comment, poster_employee_id: this.user.user_id };
-      this.CreateSocialComment(payload);
-    },
+onSubmitSocial() {
+  if (!this.user) {
+    console.error("Cannot submit comment: user is not logged in.");
+    return; // Stop the function from proceeding
+  }
+  
+  let payload = { comment: this.CreateSocialForm.basicInfo.comment, poster_employee_id: this.user.user_id };
+  this.CreateSocialComment(payload);
+},
     getServiceCalls(customerId: number) {
         let path = `${import.meta.env.VITE_BASE_URL}/service/for-customer/${customerId}`;
         axios({
@@ -946,15 +1019,54 @@ export default defineComponent({
       }
     },
     async handleDeleteService(serviceId: number) {
+      if (!window.confirm("Are you sure you want to delete this service call?")) return;
       try {
         const path = `${import.meta.env.VITE_BASE_URL}/service/delete/${serviceId}`;
-        await axios.delete(path, { headers: authHeader(), withCredentials: true });
-        this.getServiceCalls(this.customer.id);
-        this.closeEditModal();
+        const response = await axios.delete(path, { headers: authHeader(), withCredentials: true });
+        if(response.data.ok) {
+            this.getServiceCalls(this.customer.id);
+            this.closeEditModal();
+             notify({ title: "Success", text: "Service call deleted!", type: "success" });
+        }
       } catch (error) {
         console.error("Failed to delete service call:", error);
       }
     },
+    async fetchCustomerParts(customerId: number) {
+        try {
+            const path = `${import.meta.env.VITE_BASE_URL}/service/parts/customer/${customerId}`;
+            const response = await axios.get(path, { headers: authHeader() });
+            this.currentParts = response.data;
+        } catch (error) {
+            console.error("Failed to fetch customer parts:", error);
+            notify({ title: "Error", text: "Could not fetch equipment parts.", type: "error" });
+        }
+    },
+    openPartsModal() {
+      if (this.currentParts) {
+        this.isPartsModalOpen = true;
+      } else {
+        notify({ title: "Info", text: "Parts data still loading, please wait.", type: "info" });
+      }
+    },
+    closePartsModal() {
+      this.isPartsModalOpen = false;
+    },
+    async handleSaveParts(partsToSave: ServiceParts) {
+        try {
+            const path = `${import.meta.env.VITE_BASE_URL}/service/parts/update/${partsToSave.customer_id}`;
+            const response = await axios.post(path, partsToSave, { headers: authHeader() });
+            
+            if(response.data.ok) {
+                this.currentParts = partsToSave;
+                 notify({ title: "Success", text: "Equipment parts saved successfully!", type: "success" });
+            }
+            this.closePartsModal();
+        } catch (error) {
+            console.error("Failed to save parts:", error);
+            notify({ title: "Error", text: "Failed to save equipment parts.", type: "error" });
+        }
+    },
     formatDate(dateString: string): string {
       if (!dateString) return 'N/A';
       return dayjs(dateString).format('MMMM D, YYYY');
diff --git a/src/pages/customer/service/PartsEditModal.vue b/src/pages/customer/service/PartsEditModal.vue
new file mode 100644
index 0000000..854db09
--- /dev/null
+++ b/src/pages/customer/service/PartsEditModal.vue
@@ -0,0 +1,190 @@
+<template>
+  <!-- Modal Overlay -->
+  <div class="fixed inset-0 bg-gray-800 bg-opacity-75 flex items-center justify-center z-50">
+    <!-- Modal Content -->
+    <div class="relative bg-base-100 text-base-content p-6 rounded-lg shadow-xl w-full max-w-2xl">
+      
+      <!-- Modal Header -->
+      <div class="flex justify-between items-center border-b border-gray-700 pb-3 mb-4">
+        <h3 class="text-2xl font-bold">Edit Oil Filters & Nozzles</h3>
+        <button @click="$emit('close-modal')" type="button" class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
+      </div>
+
+      <!-- Form for Editing -->
+      <form @submit.prevent="saveChanges">
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <!-- Oil Filter 1 Section -->
+          <div>
+            <label for="oil-filter-1" class="block text-sm font-medium mb-2">Oil Filter 1</label>
+            <select id="oil-filter-1" v-model="editableParts.oil_filter" class="select select-bordered w-full">
+              <option disabled value="">Select Filter</option>
+              <option v-for="item in oilFilterOptions" :key="`filter1-${item}`" :value="item">{{ item }}</option>
+            </select>
+          </div>
+
+          <!-- Oil Filter 2 Section -->
+          <div>
+            <label for="oil-filter-2" class="block text-sm font-medium mb-2">Oil Filter 2</label>
+            <select id="oil-filter-2" v-model="editableParts.oil_filter_2" class="select select-bordered w-full">
+              <option disabled value="">Select Filter</option>
+              <option v-for="item in oilFilterOptions" :key="`filter2-${item}`" :value="item">{{ item }}</option>
+            </select>
+          </div>
+
+          <!-- Oil Nozzle 1 Section -->
+          <div class="md:col-span-2 border-t border-gray-700 pt-4">
+            <label class="block text-sm font-medium mb-2">Oil Nozzle 1</label>
+            <div class="grid grid-cols-3 gap-2">
+              <select v-model="nozzle1.part1" class="select select-bordered w-full">
+                <option disabled value="">Type</option>
+                <option v-for="item in nozzlePart1Options" :key="`n1p1-${item}`" :value="item">{{ item }}</option>
+              </select>
+              <select v-model="nozzle1.part2" class="select select-bordered w-full">
+                <option disabled value="">Rate</option>
+                <option v-for="item in nozzlePart2Options" :key="`n1p2-${item}`" :value="item">{{ item }}</option>
+              </select>
+              <select v-model="nozzle1.part3" class="select select-bordered w-full">
+                <option disabled value="">Angle</option>
+                <option v-for="item in nozzlePart3Options" :key="`n1p3-${item}`" :value="item">{{ item }}</option>
+              </select>
+            </div>
+          </div>
+
+          <!-- Oil Nozzle 2 Section -->
+          <div class="md:col-span-2 border-t border-gray-700 pt-4">
+            <label class="block text-sm font-medium mb-2">Oil Nozzle 2</label>
+            <div class="grid grid-cols-3 gap-2">
+              <select v-model="nozzle2.part1" class="select select-bordered w-full">
+                <option disabled value="">Type</option>
+                <option v-for="item in nozzlePart1Options" :key="`n2p1-${item}`" :value="item">{{ item }}</option>
+              </select>
+              <select v-model="nozzle2.part2" class="select select-bordered w-full">
+                <option disabled value="">Rate</option>
+                <option v-for="item in nozzlePart2Options" :key="`n2p2-${item}`" :value="item">{{ item }}</option>
+              </select>
+              <select v-model="nozzle2.part3" class="select select-bordered w-full">
+                <option disabled value="">Angle</option>
+                <option v-for="item in nozzlePart3Options" :key="`n2p3-${item}`" :value="item">{{ item }}</option>
+              </select>
+            </div>
+          </div>
+        </div>
+        
+        <!-- Action Buttons -->
+        <div class="mt-8 flex justify-end space-x-3">
+          <button @click.prevent="$emit('close-modal')" type="button" class="btn btn-ghost">Cancel</button>
+          <button type="submit" class="btn btn-primary">Save Changes</button>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+
+// Interfaces remain the same
+interface ServiceParts {
+  id?: number;
+  customer_id: number;
+  oil_filter: string;
+  oil_filter_2: string;
+  oil_nozzle: string;
+  oil_nozzle_2: string;
+}
+
+interface NozzleParts {
+  part1: string;
+  part2: string;
+  part3: string;
+}
+
+export default defineComponent({
+  name: 'PartsEditModal',
+  props: {
+    existingParts: {
+      type: Object as PropType<ServiceParts>,
+      required: true
+    },
+    customerId: {
+        type: Number,
+        required: true
+    }
+  },
+  emits: ['close-modal', 'save-parts'],
+
+  data() {
+    return {
+      // All reactive state goes inside the data object
+      editableParts: {} as Partial<ServiceParts>,
+      nozzle1: { part1: '', part2: '', part3: '' } as NozzleParts,
+      nozzle2: { part1: '', part2: '', part3: '' } as NozzleParts,
+      
+      // ======================================================
+      // ============== THE UPDATED OIL FILTER LIST ==============
+      // ======================================================
+      oilFilterOptions: [
+        'RF-1',
+        'RF-4',
+        '88CR',
+        'Big Guy f80-24',
+        'Garber Model R',
+        'Garber Model M',
+        'PurePro f100-10W'
+      ],
+      
+      nozzlePart1Options: ['a', 'b', 'w'],
+      nozzlePart2Options: Array.from({ length: (200 - 45) / 5 + 1 }, (_, i) => (45 + i * 5).toString()),
+      nozzlePart3Options: Array.from({ length: (100 - 45) / 5 + 1 }, (_, i) => (45 + i * 5).toString()),
+    };
+  },
+
+  watch: {
+    // Watch for changes to the `existingParts` prop
+    existingParts: {
+      handler(newVal) {
+        if (!newVal) return;
+        // Update the component's internal data when the prop changes
+        this.editableParts = { ...newVal, customer_id: this.customerId };
+        this.nozzle1 = this.splitNozzle(newVal.oil_nozzle);
+        this.nozzle2 = this.splitNozzle(newVal.oil_nozzle_2);
+      },
+      immediate: true, // Run the handler immediately when the component is created
+      deep: true,      // Watch for nested changes within the object
+    },
+  },
+
+  methods: {
+    // Function to split a combined nozzle string (e.g., "a 55 75") into its parts
+    splitNozzle(nozzleStr: string | undefined): NozzleParts {
+      if (!nozzleStr || typeof nozzleStr !== 'string' || nozzleStr.trim() === '') {
+        return { part1: '', part2: '', part3: '' };
+      }
+      const parts = nozzleStr.split(' ');
+      return {
+        part1: parts[0] || '',
+        part2: parts[1] || '',
+        part3: parts[2] || '',
+      };
+    },
+
+    // Function to combine nozzle parts into a single string
+    combineNozzle(parts: NozzleParts): string {
+        if (parts.part1 && parts.part2 && parts.part3) {
+            return `${parts.part1} ${parts.part2} ${parts.part3}`;
+        }
+        return ''; // Return empty if any part is missing
+    },
+
+    // Form submission handler
+    saveChanges() {
+      // Before emitting, combine the nozzle parts back into a single string
+      this.editableParts.oil_nozzle = this.combineNozzle(this.nozzle1);
+      this.editableParts.oil_nozzle_2 = this.combineNozzle(this.nozzle2);
+      
+      // Emit the save event with the final payload
+      this.$emit('save-parts', this.editableParts);
+    },
+  },
+});
+</script>```
\ No newline at end of file
diff --git a/src/pages/delivery/create.vue b/src/pages/delivery/create.vue
index 28fef29..82f97e1 100755
--- a/src/pages/delivery/create.vue
+++ b/src/pages/delivery/create.vue
@@ -20,9 +20,10 @@
         </ul>
       </div>
 
-
-      <div class="grid grid-cols-12 ">
-        <div class="col-span-12 bg-neutral ">
+      <!-- TOP SECTION: Customer Info and Pricing Chart -->
+      <div class="grid grid-cols-12 gap-5 mb-5">
+        <!-- Customer Info -->
+        <div class="col-span-12 lg:col-span-6 bg-neutral rounded-lg p-5">
           <div class="col-span-12 py-5 ">
             <router-link :to="{ name: 'customerProfile', params: { id: customer['id'] } }"
               class="btn btn-secondary btn-sm">
@@ -36,19 +37,16 @@
               {{ customer.customer_last_name }}
             </div>
             <div class="col-span-12 font-bold flex">
-
               {{ customer.customer_address }}
               <div v-if="customer.customer_apt != 'None'">
                 {{ customer.customer_apt }}
               </div>
-
             </div>
             <div class="col-span-12 font-bold flex">
               <div class="pr-2">
                 {{ customer.customer_town }},
               </div>
               <div class="pr-2">
-
                 <div v-if="customer.customer_state == 0">Massachusetts</div>
                 <div v-else-if="customer.customer_state == 1">Rhode Island</div>
                 <div v-else-if="customer.customer_state == 2">New Hampshire</div>
@@ -62,7 +60,6 @@
                 {{ customer.customer_zip }}
               </div>
             </div>
-
             <div class="col-span-12 font-bold flex" v-if="customer.customer_apt !== 'None'">
               {{ customer.customer_apt }}
             </div>
@@ -81,7 +78,34 @@
           </div>
         </div>
 
-        <div class="col-span-6 rounded-md p-6 ">
+        <!-- Pricing Chart -->
+        <div class="col-span-12 lg:col-span-6 bg-neutral rounded-lg p-5">
+          <h3 class="text-xl font-bold mb-4">Price Per Gallon</h3>
+          <div class="overflow-x-auto">
+            <table class="table w-full">
+              <thead>
+                <tr>
+                  <th>Gallons</th>
+                  <th>Total Price</th>
+                </tr>
+              </thead>
+              <tbody>
+                <!-- THE FIX IS ON THE NEXT LINE -->
+                <tr v-for="(price, gallons) in pricingTiers" :key="gallons" class="hover">
+                  <th>{{ gallons }}</th>
+                  <td>${{ parseFloat(price).toFixed(2) }}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+
+
+      <!-- BOTTOM SECTION: Forms -->
+      <div class="grid grid-cols-12 gap-5">
+        <!-- Create Delivery Form -->
+        <div class="col-span-12 xl:col-span-6 rounded-md p-6 ">
           <div class="grid grid-cols-12">
             <div class="col-span-12 text-[24px] ">
               Create Delivery
@@ -147,10 +171,6 @@
               <div v-else>
                 <div class="col-span-12 md:col-span-4 mb-5 md:mb-0 py-5">
                   No Cards on File!
-               
-                  <!-- <router-link :to="{ name: 'cardadd', params: { id: customer.id } }">
-                    <button class="btn btn-sm bg-blue-700 text-white">Add Credit Card</button>
-                  </router-link> -->
                 </div>
               </div>
 
@@ -207,8 +227,6 @@
                 class="textarea block p-2.5 w-full input-bordered " id="description" type="text" placeholder="Notes on ticket" />
               </div>
 
-
-
               <div class="col-span-12 md:col-span-12 flex mt-5 mb-5">
                 <button class="btn-sm btn bg-orange-600 text-white">
                   Create Delivery
@@ -218,12 +236,10 @@
           </div>
         </div>
 
-
+        <!-- Add Credit Card Form -->
         <div class="col-span-12 xl:col-span-6 p-5">
-
           <div class="grid grid-cols-12 ">
             <div class="col-span-12  text-2xl">Add a Credit Card</div>
-
             <div class="col-span-12">
               <form class="rounded-md px-8 pt-6 pb-8 mb-4 w-full" enctype="multipart/form-data"
                 @submit.prevent="onSubmitCard">
@@ -321,9 +337,6 @@
                     class="input input-bordered input-sm w-full max-w-xs" id="title" type="text"
                     placeholder="Zip Code" />
                 </div>
-
-
-
                 <div class="col-span-12 md:col-span-12 flex mt-5 mb-5">
                   <button class="btn-sm btn bg-orange-600 text-white">
                     Save Credit Card
@@ -333,21 +346,17 @@
             </div>
           </div>
         </div>
-
       </div>
       <div class="grid grid-cols-12 ">
         <div class="col-span-12 text-center font-bold text-3xl">Remind customer of tank Inspection</div>
         <div class="col-span-12 text-center font-bold text-3xl">Ask how they heard about us</div>
       </div>
-
-
     </div>
   </div>
 
   <Footer />
 </template>
 
-
 <script lang="ts">
 import { defineComponent } from 'vue'
 import axios from 'axios'
@@ -376,6 +385,7 @@ export default defineComponent({
       userCards: [],
       promos: [],
       truckDriversList: [],
+      pricingTiers: {}, // NEW: To store pricing data
       CreateOilOrderForm: {
         basicInfo: {
           gallons_ordered: '',
@@ -452,6 +462,7 @@ export default defineComponent({
     this.userStatus()
     this.getDriversList()
     this.getPromos()
+    this.getPricingTiers() // NEW: Call the method to get prices
   },
   watch: {
     $route() {
@@ -462,11 +473,31 @@ export default defineComponent({
   },
   mounted() {
     this.getCustomer(this.$route.params.id)
-
     this.getPaymentCards(this.$route.params.id);
     this.getCustomerDelivery(this.$route.params.id)
   },
   methods: {
+    // NEW: Method to fetch pricing data
+    getPricingTiers() {
+      let path = import.meta.env.VITE_BASE_URL + "/info/price/oil/tiers";
+      axios({
+        method: "get",
+        url: path,
+        withCredentials: true,
+        headers: authHeader(),
+      })
+        .then((response: any) => {
+          this.pricingTiers = response.data;
+        })
+        .catch(() => {
+          notify({
+            title: "Pricing Error",
+            text: "Could not retrieve today's pricing.",
+            type: "error",
+          });
+        });
+    },
+
     userStatus() {
       let path = import.meta.env.VITE_BASE_URL + '/auth/whoami';
       axios({
@@ -494,7 +525,6 @@ export default defineComponent({
       })
         .then((response: any) => {
           this.customer = response.data;
-
         })
         .catch(() => {
           notify({
@@ -525,7 +555,6 @@ export default defineComponent({
       })
         .then((response: any) => {
           this.userCards = response.data;
-
         })
         .catch(() => {
         });
diff --git a/src/pages/service/ServiceCalendar.vue b/src/pages/service/ServiceCalendar.vue
index 19d956c..b0970b7 100644
--- a/src/pages/service/ServiceCalendar.vue
+++ b/src/pages/service/ServiceCalendar.vue
@@ -17,7 +17,6 @@
         Master Service Calendar
       </div>
 
-      <!-- This component has no sidebar, so the calendar takes up the full content area -->
       <div class="flex h-screen font-sans">
         <div class="flex-1 p-4 overflow-auto">
           <FullCalendar ref="fullCalendar" :options="calendarOptions" />
@@ -28,7 +27,6 @@
 
   <Footer />
 
-  <!-- Re-using the powerful edit modal for this page -->
   <ServiceEditModal
     v-if="selectedServiceForEdit"
     :service="selectedServiceForEdit"
@@ -51,10 +49,10 @@ import ServiceEditModal from './ServiceEditModal.vue';
 import axios from 'axios';
 import authHeader from '../../services/auth.header';
 
-// --- Interfaces ---
 interface ServiceCall {
   id: number;
   scheduled_date: string;
+  customer_id: string;
   customer_name: string;
   customer_address: string;
   customer_town: string;
@@ -67,7 +65,7 @@ export default defineComponent({
   components: { Header, SideBar, Footer, FullCalendar, ServiceEditModal },
   data() {
     return {
-      user: null, // For header/sidebar logic if needed
+      user: null,
       selectedServiceForEdit: null as Partial<ServiceCall> | null,
       calendarOptions: {
         plugins: [dayGridPlugin, interactionPlugin],
@@ -83,7 +81,6 @@ export default defineComponent({
     this.fetchEvents();
   },
   methods: {
-    // This method fetches ALL events for the master calendar
     async fetchEvents(): Promise<void> {
       try {
         const path = `${import.meta.env.VITE_BASE_URL}/service/all`;
@@ -94,30 +91,35 @@ export default defineComponent({
       }
     },
 
-    // This opens the modal when a calendar event is clicked
+    // --- THIS IS THE FIX ---
     handleEventClick(clickInfo: EventClickArg): void {
       const events = (this.calendarOptions.events as any[]) || [];
       const originalEvent = events.find(e => e.id == clickInfo.event.id);
 
       if (originalEvent) {
+          // We "flatten" the nested object from the calendar into the simple,
+          // flat structure that the modal expects.
           this.selectedServiceForEdit = {
               id: originalEvent.id,
               scheduled_date: originalEvent.start,
-              customer_name: originalEvent.title.split(': ')[1] || '',
-              customer_address: '',
-              customer_town: '',
+              customer_id: originalEvent.customer_id,
+              // Extract the customer name from the title
+              customer_name: originalEvent.title.split(': ')[1] || 'Unknown Customer',
+              // Pull the properties out of the nested extendedProps
               type_service_call: originalEvent.extendedProps.type_service_call,
               description: originalEvent.extendedProps.description,
+              
+              // Add dummy values for other fields the ServiceCall interface expects
+              customer_address: '',
+              customer_town: '',
           };
       }
     },
 
-    // Closes the modal
     closeEditModal() {
         this.selectedServiceForEdit = null;
     },
 
-    // Saves changes from the modal and refreshes the calendar
     async handleSaveChanges(updatedService: ServiceCall) {
       try {
         const path = `${import.meta.env.VITE_BASE_URL}/service/update/${updatedService.id}`;
@@ -130,13 +132,12 @@ export default defineComponent({
       }
     },
 
-    // Deletes the service from the modal and refreshes the calendar
     async handleDeleteService(serviceId: number) {
       try {
         const path = `${import.meta.env.VITE_BASE_URL}/service/delete/${serviceId}`;
         const response = await axios.delete(path, { withCredentials: true, headers: authHeader() });
         if (response.data.ok === true) {
-            await this.fetchEvents(); // Refresh the calendar from the database
+            await this.fetchEvents();
             this.closeEditModal();
         } else {
             console.error("Failed to delete event:", response.data.error);
@@ -146,7 +147,6 @@ export default defineComponent({
       }
     },
 
-    // Standard method for user status, e.g., for the header
     userStatus() {
       let path = import.meta.env.VITE_BASE_URL + '/auth/whoami';
       axios({
diff --git a/src/pages/service/ServiceEditModal.vue b/src/pages/service/ServiceEditModal.vue
index 15c3818..6abd281 100644
--- a/src/pages/service/ServiceEditModal.vue
+++ b/src/pages/service/ServiceEditModal.vue
@@ -2,58 +2,95 @@
   <!-- Modal Overlay -->
   <div class="fixed inset-0 bg-gray-800 bg-opacity-75 flex items-center justify-center z-50">
     <!-- Modal Content -->
-    <div class="relative bg-white p-6 rounded-lg shadow-xl w-full max-w-lg">
+    <div class="relative bg-base-100 text-base-content p-6 rounded-lg shadow-xl w-full max-w-4xl">
       
       <!-- Modal Header -->
-      <div class="flex justify-between items-center border-b pb-3 mb-4">
-        <h3 class="text-2xl font-bold text-gray-800">Edit Service Call</h3>
+      <div class="flex justify-between items-center border-b border-gray-700 pb-3 mb-4">
+        <h3 class="text-2xl font-bold">Edit Service Call</h3>
         <span class="font-bold text-white px-3 py-1 mr-10 rounded" :style="{ backgroundColor: getServiceTypeColor(editableService.type_service_call) }">
           {{ getServiceTypeName(editableService.type_service_call) }}
         </span>
       </div>
 
-      <button @click="$emit('close-modal')" type="button" class="absolute top-0 right-0 mt-4 mr-4 text-gray-400 hover:text-gray-600 focus:outline-none" aria-label="Close modal">
+      <button @click="$emit('close-modal')" type="button" class="absolute top-0 right-0 mt-4 mr-4 text-gray-500 hover:text-white focus:outline-none" aria-label="Close modal">
         <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
       </button>
 
-      <!-- Form for Editing -->
+      <!-- Customer & Parts Info Section (Two Columns) -->
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-4">
+        <!-- Left Column: Customer Info -->
+        <div v-if="customer" class="p-4 bg-base-200 rounded-md">
+          <div class="font-bold text-lg">{{ customer.account_number }}</div>
+          <div class="text-sm">{{ customer.customer_first_name }} {{ customer.customer_last_name }}</div>
+          <div class="text-sm">{{ customer.customer_address }}</div>
+          <div class="text-sm">{{ customer.customer_town }}, {{ customer.customer_state }} {{ customer.customer_zip }}</div>
+          <div class="text-sm mt-1">{{ customer.customer_phone_number }}</div>
+        </div>
+        <div v-else class="p-4 bg-base-200 rounded-md text-center">
+          <p>Loading customer details...</p>
+        </div>
+
+        <!-- ====================================================== -->
+        <!-- ============== SERVICE PARTS (VIEW-ONLY) ============== -->
+        <!-- ====================================================== -->
+        <div v-if="!isLoadingParts && serviceParts" class="p-4 bg-base-200 rounded-md">
+          <h4 class="font-bold text-lg mb-2">Service Parts on File</h4>
+          <div class="grid grid-cols-2 gap-x-4 gap-y-2 text-sm">
+            <div>
+              <label class="block text-xs font-medium opacity-70">Oil Filter</label>
+              <p class="font-semibold">{{ serviceParts.oil_filter || 'N/A' }}</p>
+            </div>
+            <div>
+              <label class="block text-xs font-medium opacity-70">Oil Filter 2</label>
+              <p class="font-semibold">{{ serviceParts.oil_filter_2 || 'N/A' }}</p>
+            </div>
+            <div>
+              <label class="block text-xs font-medium opacity-70">Oil Nozzle</label>
+              <p class="font-semibold">{{ serviceParts.oil_nozzle || 'N/A' }}</p>
+            </div>
+            <div>
+              <label class="block text-xs font-medium opacity-70">Oil Nozzle 2</label>
+              <p class="font-semibold">{{ serviceParts.oil_nozzle_2 || 'N/A' }}</p>
+            </div>
+          </div>
+        </div>
+         <div v-else class="p-4 bg-base-200 rounded-md text-center">
+          <p>Loading service parts...</p>
+        </div>
+        <!-- ====================================================== -->
+        <!-- ================ END VIEW-ONLY SECTION =============== -->
+        <!-- ====================================================== -->
+      </div>
+      
+      <!-- Form for Editing Service Call Details -->
       <form @submit.prevent="saveChanges">
         <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <!-- Scheduled Date Input -->
           <div class="mb-4">
-            <label for="edit-date" class="block text-sm font-medium text-gray-700">Scheduled Date</label>
-            <input type="date" id="edit-date" v-model="editableService.date" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm text-black">
+            <label for="edit-date" class="block text-sm font-medium">Scheduled Date</label>
+            <input type="date" id="edit-date" v-model="editableService.date" required class="input input-bordered w-full mt-1">
           </div>
-
-          <!-- NEW: Time Input -->
           <div class="mb-4">
-            <label for="edit-time" class="block text-sm font-medium text-gray-700">Scheduled Time</label>
-            <select id="edit-time" v-model.number="editableService.time" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm text-black">
+            <label for="edit-time" class="block text-sm font-medium">Scheduled Time</label>
+            <select id="edit-time" v-model.number="editableService.time" class="select select-bordered w-full mt-1">
               <option v-for="hour in 24" :key="hour" :value="hour - 1">{{ (hour - 1).toString().padStart(2, '0') }}:00</option>
             </select>
           </div>
         </div>
-        
-        <!-- Service Type (Moved to its own row) -->
         <div class="mb-4">
-          <label for="edit-service-type" class="block text-sm font-medium text-gray-700">Type of Service</label>
-          <select id="edit-service-type" v-model.number="editableService.type_service_call" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm text-black">
-            <option v-for="option in serviceOptions" :key="option.value" :value="option.value">
-              {{ option.text }}
-            </option>
+          <label for="edit-service-type" class="block text-sm font-medium">Type of Service</label>
+          <select id="edit-service-type" v-model.number="editableService.type_service_call" required class="select select-bordered w-full mt-1">
+            <option v-for="option in serviceOptions" :key="option.value" :value="option.value">{{ option.text }}</option>
           </select>
         </div>
-
         <div class="mb-4">
-          <label for="edit-description" class="block text-sm font-medium text-gray-700">Description</label>
-          <textarea id="edit-description" v-model="editableService.description" rows="4" required class="mt-1 block w-full rounded-md border border-gray-300 shadow-sm text-black focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"></textarea>
+          <label for="edit-description" class="block text-sm font-medium">Description</label>
+          <textarea id="edit-description" v-model="editableService.description" rows="4" required class="textarea textarea-bordered w-full mt-1"></textarea>
         </div>
-
         <div class="mt-6 flex justify-between items-center">
-          <button @click.prevent="confirmDelete" type="button" class="px-4 py-2 bg-red-600 text-white font-medium rounded-md shadow-sm hover:bg-red-700">Delete Call</button>
+          <button @click.prevent="confirmDelete" type="button" class="btn btn-error">Delete Call</button>
           <div class="flex space-x-3">
-            <button @click.prevent="$emit('close-modal')" type="button" class="px-4 py-2 bg-gray-200 text-gray-800 font-medium rounded-md shadow-sm hover:bg-gray-300">Cancel</button>
-            <button type="submit" class="px-4 py-2 bg-blue-600 text-white font-medium rounded-md shadow-sm hover:bg-blue-700">Save Changes</button>
+            <button @click.prevent="$emit('close-modal')" type="button" class="btn btn-ghost">Cancel</button>
+            <button type="submit" class="btn btn-primary">Save Changes</button>
           </div>
         </div>
       </form>
@@ -63,36 +100,25 @@
 
 <script lang="ts">
 import { defineComponent, PropType } from 'vue';
-import dayjs from 'dayjs'; // Import dayjs for easier date/time manipulation
+import dayjs from 'dayjs';
+import axios from 'axios';
+import authHeader from '../../services/auth.header';
 
-interface ServiceCall {
-  id: number;
-  scheduled_date: string; // This is an ISO string like "2025-08-26T14:00:00"
-  customer_name: string;
-  customer_address: string;
-  customer_town: string;
-  type_service_call: number;
-  description: string;
-}
-
-// Define the shape of our local, editable object
-interface EditableService extends Omit<ServiceCall, 'scheduled_date'> {
-    date: string; // 'YYYY-MM-DD'
-    time: number; // 0-23
-}
+// --- Interfaces ---
+interface ServiceCall { id: number; scheduled_date: string; customer_id: number; customer_name: string; customer_address: string; customer_town: string; type_service_call: number; description: string; }
+interface EditableService extends Omit<ServiceCall, 'scheduled_date'> { date: string; time: number; }
+interface Customer { account_number: string; customer_first_name: string; customer_last_name: string; customer_address: string; customer_town: string; customer_state: number; customer_zip: string; customer_phone_number: string; }
+interface ServiceParts { customer_id: number; oil_filter: string; oil_filter_2: string; oil_nozzle: string; oil_nozzle_2: string; }
 
 export default defineComponent({
   name: 'ServiceEditModal',
-  props: {
-    // The prop can be a full ServiceCall or a simplified object from the calendar
-    service: {
-      type: Object as PropType<Partial<ServiceCall>>,
-      required: true,
-    },
-  },
+  props: { service: { type: Object as PropType<Partial<ServiceCall>>, required: true } },
   data() {
     return {
       editableService: {} as Partial<EditableService>,
+      customer: null as Customer | null,
+      serviceParts: null as ServiceParts | null,
+      isLoadingParts: true,
       serviceOptions: [
         { text: 'Tune-up', value: 0 }, { text: 'No Heat', value: 1 }, { text: 'Fix', value: 2 },
         { text: 'Tank Install', value: 3 }, { text: 'Other', value: 4 },
@@ -103,34 +129,50 @@ export default defineComponent({
     service: {
       handler(newVal) {
         if (!newVal) return;
-
-        // The date string could be from the DB (full ISO) or from FullCalendar (simpler)
         const scheduled = dayjs(newVal.scheduled_date || new Date());
-
-        this.editableService = {
-            ...newVal,
-            date: scheduled.format('YYYY-MM-DD'),
-            time: scheduled.hour(),
-        };
+        this.editableService = { ...newVal, date: scheduled.format('YYYY-MM-DD'), time: scheduled.hour() };
+        if (newVal.customer_id) {
+          this.getCustomer(newVal.customer_id);
+          this.getServiceParts(newVal.customer_id);
+        }
       },
       immediate: true,
       deep: true,
     },
   },
   methods: {
-    saveChanges() {
-      // Re-combine date and time into a single ISO string before emitting
+    getCustomer(customerId: number) {
+      this.customer = null;
+      let path = import.meta.env.VITE_BASE_URL + '/customer/' + customerId;
+      axios.get(path, { headers: authHeader() })
+        .then((response: any) => { this.customer = response.data; })
+        .catch((error: any) => { console.error("Failed to fetch customer details for modal:", error); });
+    },
+    getServiceParts(customerId: number) {
+      this.isLoadingParts = true;
+      this.serviceParts = null;
+      let path = `${import.meta.env.VITE_BASE_URL}/service/parts/customer/${customerId}`;
+      axios.get(path, { headers: authHeader() })
+        .then((response: any) => { this.serviceParts = response.data; })
+        .catch((error: any) => { console.error("Failed to fetch service parts:", error); })
+        .finally(() => { this.isLoadingParts = false; });
+    },
+    // --- UPDATED: Simplified saveChanges method ---
+    async saveChanges() {
+      // This method now only saves the service call itself.
       const date = this.editableService.date;
       const time = this.editableService.time || 0;
       const combinedDateTime = dayjs(`${date} ${time}:00`).format('YYYY-MM-DDTHH:mm:ss');
+      const finalPayload = { ...this.service, ...this.editableService, scheduled_date: combinedDateTime };
       
-      const finalPayload = {
-        ...this.service,
-        ...this.editableService,
-        scheduled_date: combinedDateTime,
-      };
-
-      this.$emit('save-changes', finalPayload);
+      const path = `${import.meta.env.VITE_BASE_URL}/service/update/${finalPayload.id}`;
+      try {
+        await axios.put(path, finalPayload, { headers: authHeader(), withCredentials: true });
+        this.$emit('save-changes', finalPayload);
+      } catch (error) {
+         console.error("Failed to save changes:", error);
+        alert("An error occurred while saving. Please check the console.");
+      }
     },
     confirmDelete() {
       if (this.service.id && window.confirm(`Are you sure you want to delete this service call?`)) {
@@ -139,16 +181,12 @@ export default defineComponent({
     },
     getServiceTypeName(typeId: number | undefined | null): string {
       if (typeId === undefined || typeId === null) return 'Unknown';
-      const typeMap: { [key: number]: string } = {
-        0: 'Tune-up', 1: 'No Heat', 2: 'Fix', 3: 'Tank Install', 4: 'Other',
-      };
+      const typeMap: { [key: number]: string } = { 0: 'Tune-up', 1: 'No Heat', 2: 'Fix', 3: 'Tank Install', 4: 'Other' };
       return typeMap[typeId] || 'Unknown';
     },
     getServiceTypeColor(typeId: number | undefined | null): string {
       if (typeId === undefined || typeId === null) return 'gray';
-      const colorMap: { [key: number]: string } = {
-        0: 'blue', 1: 'red', 2: 'green', 3: '#B58900', 4: 'black',
-      };
+      const colorMap: { [key: number]: string } = { 0: 'blue', 1: 'red', 2: 'green', 3: '#B58900', 4: 'black' };
       return colorMap[typeId] || 'gray';
     }
   },
diff --git a/src/pages/service/ServiceHome.vue b/src/pages/service/ServiceHome.vue
index f658364..cf75004 100644
--- a/src/pages/service/ServiceHome.vue
+++ b/src/pages/service/ServiceHome.vue
@@ -30,9 +30,6 @@
         <p>No service calls found.</p>
       </div>
 
-      <!-- ============================================= -->
-      <!-- ============== UPDATED TABLE SECTION ============== -->
-      <!-- ============================================= -->
       <div v-else class="overflow-x-auto rounded-lg">
         <table class="min-w-full divide-y divide-gray-700">
           <thead class="bg-base-200">
@@ -46,11 +43,13 @@
             </tr>
           </thead>
           <tbody class="bg-base-100 divide-y divide-gray-700">
-            <!-- The hover color is now a slightly lighter shade of the background -->
             <tr v-for="service in services" :key="service.id" @click="openEditModal(service)" class="hover:bg-base-300 cursor-pointer">
               <td class="px-6 py-4 whitespace-nowrap">{{ formatDate(service.scheduled_date) }}</td>
               <td class="px-6 py-4 whitespace-nowrap">{{ formatTime(service.scheduled_date) }}</td>
-              <td class="px-6 py-4 whitespace-nowrap">{{ service.customer_name }}</td>
+              
+              <td class="px-6 py-4 whitespace-nowrap hover:text-blue-600">{{ service.customer_name }}</td>
+             
+
               <td class="px-6 py-4 whitespace-nowrap">{{ service.customer_address }}, {{ service.customer_town }}</td>
               <td class="px-6 py-4 whitespace-nowrap font-medium" :style="{ color: getServiceTypeColor(service.type_service_call) }">
                 {{ getServiceTypeName(service.type_service_call) }}
@@ -60,9 +59,6 @@
           </tbody>
         </table>
       </div>
-      <!-- ============================================= -->
-      <!-- ============== END UPDATED SECTION ============== -->
-      <!-- ============================================= -->
 
     </div>
   </div>
@@ -91,6 +87,7 @@ import dayjs from 'dayjs'; // Import dayjs to handle date/time formatting
 interface ServiceCall {
   id: number;
   scheduled_date: string;
+  customer_id: number;
   customer_name: string;
   customer_address: string;
   customer_town: string;
diff --git a/src/pages/service/calender/CalendarCustomer.vue b/src/pages/service/calender/CalendarCustomer.vue
index 5834760..6d52d81 100644
--- a/src/pages/service/calender/CalendarCustomer.vue
+++ b/src/pages/service/calender/CalendarCustomer.vue
@@ -42,15 +42,13 @@ import Header from '../../../layouts/headers/headerauth.vue';
 import FullCalendar from '@fullcalendar/vue3';
 import dayGridPlugin from '@fullcalendar/daygrid';
 import interactionPlugin from '@fullcalendar/interaction';
-// --- FIX: Removed 'EventApi' as it's no longer used ---
 import { CalendarOptions, EventClickArg } from '@fullcalendar/core';
 import EventSidebar from './EventSidebar.vue';
-import ServiceEditModal from '../ServiceEditModal.vue'; 
+import ServiceEditModal from '../../service/ServiceEditModal.vue'; 
 import axios from 'axios';
 import authHeader from '../../../services/auth.header';
 
-// --- Interfaces (no changes) ---
-interface ServiceCall { id: number; scheduled_date: string; customer_name: string; customer_address: string; customer_town: string; type_service_call: number; description: string; }
+interface ServiceCall { id: number; scheduled_date: string; customer_id: string; customer_name: string; customer_address: string; customer_town: string; type_service_call: number; description: string; }
 interface Customer { id: number; customer_last_name: string; customer_first_name: string; customer_town: string; customer_state: number; customer_zip: string; customer_phone_number: string; customer_address: string; customer_home_type: number; customer_apt: string; }
 
 export default defineComponent({
@@ -60,12 +58,11 @@ export default defineComponent({
     return {
       isLoading: false,
       selectedServiceForEdit: null as Partial<ServiceCall> | null,
-      // --- FIX: Define calendarOptions directly here to resolve "unused variable" warnings ---
       calendarOptions: {
         plugins: [dayGridPlugin, interactionPlugin],
         initialView: 'dayGridMonth',
         weekends: true,
-        events: [] as any[], // Start with a typed empty array
+        events: [] as any[],
         eventClick: this.handleEventClick,
       } as CalendarOptions,
       customer: null as Customer | null,
@@ -80,29 +77,35 @@ export default defineComponent({
     },
   },
   created() {
-    // The created hook is now only responsible for fetching data
     this.fetchEvents();
   },
   methods: {
+    // --- THIS IS THE FIX ---
+    // The logic from ServiceCalendar.vue is now correctly applied here.
     handleEventClick(clickInfo: EventClickArg): void {
       const events = (this.calendarOptions.events as any[]) || [];
       const originalEvent = events.find(e => e.id == clickInfo.event.id);
 
       if (originalEvent) {
+          // We "flatten" the nested object from the calendar into the simple,
+          // flat structure that the modal expects, ensuring customer_id is included.
           this.selectedServiceForEdit = {
               id: originalEvent.id,
               scheduled_date: originalEvent.start,
-              customer_name: originalEvent.title.split(': ')[1] || '',
-              customer_address: '',
-              customer_town: '',
+              customer_id: originalEvent.customer_id, // This was the missing piece
+              customer_name: originalEvent.title.split(': ')[1] || 'Unknown Customer',
               type_service_call: originalEvent.extendedProps.type_service_call,
               description: originalEvent.extendedProps.description,
+              customer_address: '',
+              customer_town: '',
           };
       }
     },
+
     closeEditModal() {
         this.selectedServiceForEdit = null;
     },
+
     async handleSaveChanges(updatedService: ServiceCall) {
       try {
         const path = `${import.meta.env.VITE_BASE_URL}/service/update/${updatedService.id}`;
@@ -114,10 +117,22 @@ export default defineComponent({
         alert("An error occurred while saving. Please check the console.");
       }
     },
+
     async handleDeleteService(serviceId: number) {
-        await this.handleEventDelete(String(serviceId));
-        this.closeEditModal();
+      try {
+        const path = `${import.meta.env.VITE_BASE_URL}/service/delete/${serviceId}`;
+        const response = await axios.delete(path, { withCredentials: true, headers: authHeader() });
+        if (response.data.ok === true) {
+            await this.fetchEvents();
+            this.closeEditModal();
+        } else {
+            console.error("Failed to delete event:", response.data.error);
+        }
+      } catch (error) { 
+        console.error("Error deleting event:", error); 
+      }
     },
+    
     async getCustomer(customerId: string): Promise<void> {
       this.isLoading = true;
       this.customer = null;
@@ -133,6 +148,7 @@ export default defineComponent({
         this.isLoading = false;
       }
     },
+
     async fetchEvents(): Promise<void> {
       try {
         const path = `${import.meta.env.VITE_BASE_URL}/service/all`;
@@ -142,6 +158,7 @@ export default defineComponent({
         console.error("Error fetching all calendar events:", error);
       }
     },
+
     async handleEventScheduled(eventData: any): Promise<void> {
       if (!this.customer) {
           alert("Error: A customer must be loaded in the sidebar to create a new event.");
@@ -154,7 +171,6 @@ export default defineComponent({
         };
         const path = import.meta.env.VITE_BASE_URL + "/service/create";
         const response = await axios.post(path, payload, { withCredentials: true, headers: authHeader() });
-
         if (response.data.ok === true) {
           await this.fetchEvents();
         } else {
@@ -164,20 +180,10 @@ export default defineComponent({
         console.error("Error creating event:", error);
       }
     },
+
     async handleEventDelete(eventId: string): Promise<void> {
-      try {
-        const path = `${import.meta.env.VITE_BASE_URL}/service/delete/${eventId}`;
-        const response = await axios.delete(path, { withCredentials: true, headers: authHeader() });
-        if (response.data.ok === true) {
-            const calendarApi = (this.$refs.fullCalendar as any).getApi();
-            const eventToRemove = calendarApi.getEventById(eventId);
-            if (eventToRemove) eventToRemove.remove();
-        } else {
-            console.error("Failed to delete event:", response.data.error);
-        }
-      } catch (error) { 
-        console.error("Error deleting event:", error); 
-      }
+        // This is a simple alias now, as handleDeleteService is more specific
+        await this.handleDeleteService(Number(eventId));
     },
   },
 });
diff --git a/src/shims-leaflet.d.ts b/src/shims-leaflet.d.ts
new file mode 100644
index 0000000..8b8ee73
--- /dev/null
+++ b/src/shims-leaflet.d.ts
@@ -0,0 +1 @@
+declare module 'leaflet';
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index 46de7e1..658499d 100755
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -22,6 +22,6 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }