diff --git a/src/layouts/footers/footer.vue b/src/layouts/footers/footer.vue
index dbcb8f7..bd83d85 100755
--- a/src/layouts/footers/footer.vue
+++ b/src/layouts/footers/footer.vue
@@ -8,8 +8,10 @@
     </nav>
     <nav>
       <h6 class="footer-title">Quick Call</h6>
+      <div class="">WB Hill Tank Springfield - (413) 525-3678</div>
+      <div class="">LW Tank Uxbridge - (508) 234-6000</div>
       <div class="">Trask Tank Worcester - (508) 791-5064</div>
-      <div class="">Eddys Truck - (508) 304-9552</div>
+      <div class="">David Mechanic  - (774) 239-3776</div>
       <div class="">Spring Rebuilders - (508) 799-9342</div>
     </nav>
     <nav>
diff --git a/src/layouts/sidebar/sidebar.vue b/src/layouts/sidebar/sidebar.vue
index 088dbfb..a0093e1 100755
--- a/src/layouts/sidebar/sidebar.vue
+++ b/src/layouts/sidebar/sidebar.vue
@@ -72,15 +72,23 @@
             <div class=" hover:underline py-1">Finalized Tickets</div>
           </router-link>
         </li>
-
+        
         <div class="font-bold text-lg text-gray-500 pt-5">Service</div>
         <li class="text-white">
+          <router-link :to="{ name: 'ServiceCalendar' }">
+            <div class=" hover:underline py-1">Service Calendar</div>
+          </router-link>
           <router-link :to="{ name: 'ServiceHome' }">
-            <div class=" hover:underline py-1">Service Home</div>
+            <div class=" hover:underline py-1" v-if="upcoming_service_count > 0">
+              <div class="flex gap-5">
+                <div class="">Services</div>
+                <div class="text-orange-600"> ({{ upcoming_service_count }})</div>
+              </div>
+            </div>
+            <div class=" hover:underline py-1" v-else>Services</div>
           </router-link>
         </li>
-
-
+        
         <div class="font-bold text-lg text-gray-500 pt-5">Automatics</div>
         <li class="text-white">
           <router-link :to="{ name: 'auto' }">
@@ -123,11 +131,12 @@
 
 import { defineComponent } from "vue";
 import axios from 'axios';
-import authHeader from '../../services/auth.header'
+import authHeader from '../../services/auth.header';
 
 export default defineComponent({
   name: "SideBar",
   mounted() {
+    this.getUpcomingServiceCount();
     this.getTodayCount();
     this.getTommorrowCount();
     this.getWaitingCount();
@@ -139,6 +148,7 @@ export default defineComponent({
   },
   data() {
     return {
+      upcoming_service_count: 0,
       waiting_count: 0,
       today_count: 0,
       tommorrow_count: 0,
@@ -148,6 +158,21 @@ export default defineComponent({
   },
 
   methods: {
+    getUpcomingServiceCount() {
+      let path = import.meta.env.VITE_BASE_URL + '/service/upcoming/count';
+      axios({
+        method: 'get',
+        url: path,
+        headers: authHeader(),
+      }).then((response: any) => {
+        this.upcoming_service_count = response.data.count;
+      // --- THIS IS THE FIX ---
+      // Explicitly type the 'error' parameter as 'any'
+      }).catch((error: any) => {
+        console.error("Failed to get upcoming service count:", error);
+        this.upcoming_service_count = 0;
+      });
+    },
     updatestatus() {
       let path = import.meta.env.VITE_BASE_URL + '/delivery/updatestatus';
       axios({
diff --git a/src/pages/customer/profile/home.vue b/src/pages/customer/profile/home.vue
index a464a5e..b218dbb 100755
--- a/src/pages/customer/profile/home.vue
+++ b/src/pages/customer/profile/home.vue
@@ -234,13 +234,10 @@
                 </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>
 
-
               <div class="col-span-6  ">
                 <div class="grid grid-cols-12">
                   <div class="col-span-6 font-bold flex text-2xl">
@@ -269,7 +266,6 @@
                       Inspected
                     </div>
 
-
                     <div class="col-span-12 py-2 font-bold">Inside/Outside </div>
                     <div class="col-span-12 py-2 px-2 " v-if="customer_tank.outside_or_inside == true">
                       Inside
@@ -277,10 +273,8 @@
                     <div class="col-span-12 py-2 px-2 text-orange-600" v-else>
                       Outside
                     </div>
-
                   </div>
 
-
                   <div class="col-span-6  ">
                     <div class="grid grid-cols-12">
                       <div class="col-span-12 py-2  font-bold">Fill Location</div>
@@ -291,7 +285,6 @@
                       <div class="col-span-12 py-2 px-2">
                         {{ customer_tank.tank_size }}
                       </div>
-
                     </div>
                   </div>
                 </div>
@@ -344,13 +337,9 @@
                             <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 class=" pl-1 pr-1">/ </div>
-
                             <div class=""> {{ card.expiration_year }} </div>
-
                           </div>
-
                           <div class="flex p-1 pl-4">
                             {{ card.zip_code }}
                           </div>
@@ -358,7 +347,6 @@
                             {{ card.security_number }}
                           </div>
                           <div class="flex justify-between">
-
                             <a @click.prevent="editCard(card.id)" class="cursor-pointer underline hover:text-blue-300">
                               Edit Card
                             </a>
@@ -393,11 +381,8 @@
                             <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 class=" pl-1 pr-1">/ </div>
-
                             <div class=""> {{ card.expiration_year }} </div>
-
                           </div>
                           <div class="flex p-1 pl-4">
                             {{ card.zip_code }}
@@ -416,27 +401,22 @@
                         </div>
                       </div>
                     </div>
-
-
-
-
                   </div>
                 </div>
               </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">
-
                   <div class="mb-4">
                     <label class="block text-white text-sm font-bold mb-2">Customer Comment</label>
                     <textarea v-model="CreateSocialForm.basicInfo.comment" rows="4"
                       class="textarea block p-2.5 w-full input-bordered " id="description" type="text"
                       placeholder="Leave a Customer Comment" />
-
                   </div>
                   <div class="col-span-12 md:col-span-12 flex mt-5 mb-5">
                     <button class="btn btn-sm btn-secondary">
@@ -445,7 +425,6 @@
                   </div>
                 </form>
 
-
                 <div class="col-span-12">
                   <div v-for="comment in comments" :key="comment['id']">
                     <div class="grid grid-cols-12 bg-neutral my-5">
@@ -455,20 +434,16 @@
                       <div class="col-span-8">
                       </div>
                       <div class="col-span-1">
-
-
                       </div>
                       <div class="col-span-1">
                         <a href="" @click.prevent="deleteCustomerSocial(comment.id)" class="hover:text-blue-300">
                           Delete
                         </a>
                       </div>
-
                       <div class="col-span-12 p-5">
                         {{ comment.comment }}
                       </div>
                     </div>
-
                   </div>
                 </div>
               </div>
@@ -478,67 +453,103 @@
               <hr class=" h-1 mx-auto my-4 bg-gray-800 border-0 rounded  dark:bg-gray-400">
             </div>
 
-
             <div class="col-span-12  p-5">
               <div class="grid grid-cols-12">
-                <div class="col-span-12 font-bold flex text-2xl">Automatic Deliveries</div>
+                <div class="col-span-12 font-bold flex text-2xl mb-5">
+                  Service Call History
+                </div>
               </div>
-              <div class="grid grid-cols-12 bg-neutral">
-                <table class="table col-span-12">
-                  <!-- head -->
-                  <thead>
+              <div v-if="!serviceCalls || serviceCalls.length === 0" class="text-center p-10 bg-base-200 rounded-md">
+                <p>No service call history found for this customer.</p>
+              </div>
+              <div v-else class="overflow-x-auto rounded-lg">
+                <table class="min-w-full divide-y divide-gray-700">
+                  <thead class="bg-base-200">
                     <tr>
-                      <th>id</th>
-                      <th>Name</th>
-                      <th>Address</th>
-                      <th>Town</th>
-                      <th>Gallons</th>
-                      <th>Date</th>
+                      <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">Date</th>
+                      <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">Time</th>
+                      <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">Service Type</th>
+                      <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">Description</th>
                     </tr>
                   </thead>
-                  <tbody>
-                    <!-- row 1 -->
-                    <tr v-for="auto in autodeliveries" :key="auto['id']">
-                      <td>{{ auto['id'] }}</td>
-                      <td>{{ auto['customer_full_name'] }}</td>
-                      <td>{{ auto['customer_address'] }}</td>
-                      <td>{{ auto['customer_town'] }}</td>
-                      <td>{{ auto['gallons_delivered'] }}</td>
-                      <td>{{ auto['fill_date'] }}</td>
+                  <tbody class="bg-base-100 divide-y divide-gray-700">
+                    <tr v-for="service in serviceCalls" :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 font-medium" :style="{ color: getServiceTypeColor(service.type_service_call) }">
+                        {{ getServiceTypeName(service.type_service_call) }}
+                      </td>
+                      <td class="px-6 py-4 whitespace-normal text-sm">{{ service.description }}</td>
                     </tr>
                   </tbody>
                 </table>
               </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">Orders</div>
+                <div class="col-span-12 font-bold flex text-2xl mb-5">Automatic Deliveries</div>
               </div>
-              <div class="grid grid-cols-12 bg-neutral">
-
-                <table class="table col-span-12">
-                  <!-- head -->
-                  <thead>
+              <div v-if="!autodeliveries || autodeliveries.length === 0" class="text-center p-10 bg-base-200 rounded-md">
+                <p>No automatic delivery history found.</p>
+              </div>
+              <div v-else class="overflow-x-auto rounded-lg">
+                <table class="min-w-full divide-y divide-gray-700">
+                  <thead class="bg-base-200">
                     <tr>
-                      <th>id</th>
-                      <th>Status</th>
-                      <th>Name</th>
-                      <th>Address</th>
-                      <th>Town</th>
-                      <th>Gallons</th>
-                      <th>Date</th>
-
-                      <th></th>
+                      <th class="px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">id</th>
+                      <th class="px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">Name</th>
+                      <th class="px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">Address</th>
+                      <th class="px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">Town</th>
+                      <th class="px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">Gallons</th>
+                      <th class="px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">Date</th>
                     </tr>
                   </thead>
-                  <tbody>
-                    <!-- row 1 -->
-                    <tr v-for="oil in deliveries" :key="oil['id']">
-                      <td>{{ oil['id'] }}</td>
-                      <td>
+                  <tbody class="bg-base-100 divide-y divide-gray-700">
+                    <tr v-for="auto in autodeliveries" :key="auto['id']" class="hover:bg-base-300">
+                      <td class="px-6 py-4 whitespace-nowrap">{{ auto['id'] }}</td>
+                      <td class="px-6 py-4 whitespace-nowrap">{{ auto['customer_full_name'] }}</td>
+                      <td class="px-6 py-4 whitespace-nowrap">{{ auto['customer_address'] }}</td>
+                      <td class="px-6 py-4 whitespace-nowrap">{{ auto['customer_town'] }}</td>
+                      <td class="px-6 py-4 whitespace-nowrap">{{ auto['gallons_delivered'] }}</td>
+                      <td class="px-6 py-4 whitespace-nowrap">{{ auto['fill_date'] }}</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </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>
+              </div>
+              <div v-if="!deliveries || deliveries.length === 0" class="text-center p-10 bg-base-200 rounded-md">
+                <p>No order history found.</p>
+              </div>
+              <div v-else class="overflow-x-auto rounded-lg">
+                <table class="min-w-full divide-y divide-gray-700">
+                  <thead class="bg-base-200">
+                    <tr>
+                      <th class="px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">id</th>
+                      <th class="px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">Status</th>
+                      <th class="px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">Name</th>
+                      <th class="px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">Address</th>
+                      <th class="px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">Town</th>
+                      <th class="px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">Gallons</th>
+                      <th class="px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">Date</th>
+                      <th class="px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider"></th>
+                    </tr>
+                  </thead>
+                  <tbody class="bg-base-100 divide-y divide-gray-700">
+                    <tr v-for="oil in deliveries" :key="oil['id']" class="hover:bg-base-300">
+                      <td class="px-6 py-4 whitespace-nowrap">{{ oil['id'] }}</td>
+                      <td class="px-6 py-4 whitespace-nowrap">
                         <div v-if="oil['delivery_status'] == 0">Waiting</div>
                         <div v-else-if="oil['delivery_status'] == 1">cancelled</div>
                         <div v-else-if="oil['delivery_status'] == 2">Out for Delivery</div>
@@ -547,55 +558,53 @@
                         <div v-else-if="oil['delivery_status'] == 10">Finalized</div>
                         <div v-else></div>
                       </td>
-                      <td>{{ oil['customer_name'] }}</td>
-                      <td>{{ oil['customer_address'] }}</td>
-                      <td>{{ oil['customer_town'] }}</td>
-                      <td v-if="oil['delivery_status'] != 10">
+                      <td class="px-6 py-4 whitespace-nowrap">{{ oil['customer_name'] }}</td>
+                      <td class="px-6 py-4 whitespace-nowrap">{{ oil['customer_address'] }}</td>
+                      <td class="px-6 py-4 whitespace-nowrap">{{ oil['customer_town'] }}</td>
+                      <td class="px-6 py-4 whitespace-nowrap" v-if="oil['delivery_status'] != 10">
                         <div v-if="oil['customer_asked_for_fill'] == 1">Fill</div>
                         <div v-else> {{ oil['gallons_ordered'] }}</div>
                       </td>
-                      <td v-else>
+                      <td class="px-6 py-4 whitespace-nowrap" v-else>
                         {{ oil['gallons_delivered'] }}
                       </td>
-                      <td>{{ oil['expected_delivery_date'] }}</td>
-
-                      <td class="flex gap-5 ">
-                        <router-link :to="{ name: 'deliveryOrder', params: { id: oil['id'] } }">
-                          <button class="btn btn-secondary btn-sm">View</button>
-                        </router-link>
-
-                        <router-link :to="{ name: 'deliveryEdit', params: { id: oil['id'] } }">
-                          <button class="btn btn-sm btn-secondary">Edit</button>
-                        </router-link>
-
-                        <router-link :to="{ name: 'finalizeTicket', params: { id: oil['id'] } }"
-                          v-if="oil['delivery_status'] != 10">
-                          <button class="btn btn-secondary btn-sm">Finalize</button>
-                        </router-link>
-
-                        <router-link :to="{ name: 'Ticket', params: { id: oil['id'] } }">
-                          <button class="btn btn-success btn-sm">Print Ticket</button>
-                        </router-link>
-                        <!-- 
-                        <a @click.prevent="deleteCall(oil['id'])">
-                          <button class="btn btn-sm btn-error">Delete</button>
-                        </a> -->
+                      <td class="px-6 py-4 whitespace-nowrap">{{ oil['expected_delivery_date'] }}</td>
+                      <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                        <div class="flex gap-2">
+                          <router-link :to="{ name: 'deliveryOrder', params: { id: oil['id'] } }">
+                            <button class="btn btn-secondary btn-sm">View</button>
+                          </router-link>
+                          <router-link :to="{ name: 'deliveryEdit', params: { id: oil['id'] } }">
+                            <button class="btn btn-sm btn-secondary">Edit</button>
+                          </router-link>
+                          <router-link :to="{ name: 'finalizeTicket', params: { id: oil['id'] } }"
+                            v-if="oil['delivery_status'] != 10">
+                            <button class="btn btn-secondary btn-sm">Finalize</button>
+                          </router-link>
+                          <router-link :to="{ name: 'Ticket', params: { id: oil['id'] } }">
+                            <button class="btn btn-success btn-sm">Print Ticket</button>
+                          </router-link>
+                        </div>
                       </td>
                     </tr>
                   </tbody>
                 </table>
               </div>
             </div>
-
-
-
-
           </div>
         </div>
       </div>
     </div>
   </div>
   <Footer />
+
+  <ServiceEditModal
+      v-if="selectedServiceForEdit"
+      :service="selectedServiceForEdit"
+      @close-modal="closeEditModal"
+      @save-changes="handleSaveChanges"
+      @delete-service="handleDeleteService"
+  />
 </template>
 
 <script lang="ts">
@@ -609,120 +618,54 @@ import PaginationComp from "../../../components/pagination.vue";
 import { notify } from "@kyvg/vue3-notification";
 import "leaflet/dist/leaflet.css";
 import { LMap, LTileLayer } from "@vue-leaflet/vue-leaflet";
+import dayjs from 'dayjs';
+import ServiceEditModal from '../../service/ServiceEditModal.vue';
 
+interface ServiceCall {
+  id: number;
+  scheduled_date: string;
+  customer_name: string;
+  customer_address: string;
+  customer_town: string;
+  type_service_call: number;
+  description: string;
+}
 
 export default defineComponent({
   name: 'CustomerProfile',
-
   components: {
     Header,
     SideBar,
     Footer,
     LMap,
     LTileLayer,
+    ServiceEditModal,
   },
-
   data() {
     return {
       zoom: 14,
       token: null,
-      user: {
-        user_id: 0,
-        user_name: '',
-        confirmed: '',
-
-      },
+      user: { user_id: 0, user_name: '', confirmed: '' },
       isTrue: true,
       automatic_status: 0,
       automatic_response: 0,
       customer_last_delivery: '',
-      comments: [
-        {
-          id: 0,
-          created: '',
-          customer_id: 0,
-          poster_employee_id: 0,
-          comment: '',
-        }
-      ],
-      CreateSocialForm: {
-        basicInfo: {
-
-          comment: '',
-        },
-      },
-      credit_cards: [
-        {
-          id: 0,
-          name_on_card: '',
-          main_card: false,
-          card_number: '',
-          expiration_month: 0,
-          type_of_card: '',
-          last_four_digits: '',
-          expiration_year: '',
-          zip_code: '',
-          security_number: '',
-
-        }
-      ],
+      comments: [ { id: 0, created: '', customer_id: 0, poster_employee_id: 0, comment: '' } ],
+      CreateSocialForm: { basicInfo: { comment: '' } },
+      credit_cards: [ { id: 0, name_on_card: '', main_card: false, card_number: '', expiration_month: 0, type_of_card: '', last_four_digits: '', expiration_year: '', zip_code: '', security_number: '' } ],
       credit_cards_count: 0,
-      customer: {
-        id: 0,
-        user_id: 0,
-        customer_first_name: '',
-        customer_last_name: '',
-        customer_town: '',
-        customer_address: '',
-        customer_state: 0,
-        customer_zip: '',
-        customer_apt: '',
-        customer_home_type: 0,
-        customer_phone_number: '',
-        customer_latitude: 0,
-        customer_longitude: 0,
-        correct_address: true,
-        account_number: '',
-      },
-      customer_description: {
-        id: 0,
-        customer_id: 0,
-        account_number: '',
-        company_id: '',
-        fill_location: 0,
-        description: '',
-      },
-      customer_tank: {
-        id: 0,
-        last_tank_inspection: null,
-        tank_status: false,
-        outside_or_inside: false,
-        tank_size: 0,
-      },
-      customer_stats: {
-        id: 0,
-        customer_id: 0,
-        total_calls: 0,
-        service_calls_total: 0,
-        service_calls_total_spent: 0,
-        service_calls_total_profit: 0,
-        oil_deliveries: 0,
-        oil_total_gallons: 0,
-        oil_total_spent: 0,
-        oil_total_profit: 0,
-
-      },
+      customer: { id: 0, user_id: 0, customer_first_name: '', customer_last_name: '', customer_town: '', customer_address: '', customer_state: 0, customer_zip: '', customer_apt: '', customer_home_type: 0, customer_phone_number: '', customer_latitude: 0, customer_longitude: 0, correct_address: true, account_number: '' },
+      customer_description: { id: 0, customer_id: 0, account_number: '', company_id: '', fill_location: 0, description: '' },
+      customer_tank: { id: 0, last_tank_inspection: null, tank_status: false, outside_or_inside: false, tank_size: 0 },
+      customer_stats: { id: 0, customer_id: 0, total_calls: 0, service_calls_total: 0, service_calls_total_spent: 0, service_calls_total_profit: 0, oil_deliveries: 0, oil_total_gallons: 0, oil_total_spent: 0, oil_total_profit: 0 },
       deliveries: [],
       autodeliveries: [],
       delivery_page: 1,
       delivery_perPage: 50,
       delivery_recordsLength: 0,
-      delivery_options: {
-        delivery_edgeNavigation: false,
-        delivery_format: false,
-        delivery_template: PaginationComp
-      },
-
+      delivery_options: { delivery_edgeNavigation: false, delivery_format: false, delivery_template: PaginationComp },
+      serviceCalls: [] as ServiceCall[],
+      selectedServiceForEdit: null as ServiceCall | null,
     }
   },
   created() {
@@ -735,7 +678,6 @@ export default defineComponent({
   mounted() {
     this.getPage(this.delivery_page)
   },
-
   watch: {
     $route() {
       this.getCustomer(this.$route.params.id);
@@ -743,7 +685,6 @@ export default defineComponent({
   },
   methods: {
     getPage: function (page: any) {
-      // we simulate an api call that fetch the records from a backend
       this.getCustomerDelivery(this.$route.params.id, page)
     },
     userStatus() {
@@ -759,11 +700,8 @@ export default defineComponent({
             this.user = response.data.user;
           }
         })
-        .catch(() => {
-
-        })
+        .catch(() => { })
     },
-
     userAutomaticStatus(userid: any) {
       let path = import.meta.env.VITE_BASE_URL + '/customer/automatic/status/' + userid;
       axios({
@@ -773,17 +711,11 @@ export default defineComponent({
       }).then((response: any) => {
         this.automatic_status = response.data.status
         if (this.automatic_status === 1){
-      
           this.getCustomerAutoDelivery(this.customer.id)
         }
-
-
         this.checktotalOil(this.customer.id)
-
       })
     },
-
-
     userAutomatic(userid: any) {
       let path = import.meta.env.VITE_BASE_URL + '/customer/automatic/assign/' + userid;
       axios({
@@ -792,39 +724,20 @@ export default defineComponent({
         headers: authHeader(),
       }).then((response: any) => {
         this.automatic_response = response.data.status
-
         if (this.automatic_response == 1) {
-          this.$notify({
-            title: "Automatic Status",
-            text: 'Customer is now Automatic Customer',
-            type: 'Success'
-          });
+          this.$notify({ title: "Automatic Status", text: 'Customer is now Automatic Customer', type: 'Success' });
         } else if (this.automatic_response == 2) {
-          this.$notify({
-            title: "Automatic Status",
-            text: 'Customer does not have a main credit card.  Can not make automatic.',
-            type: 'Error'
-          });
+          this.$notify({ title: "Automatic Status", text: 'Customer does not have a main credit card.  Can not make automatic.', type: 'Error' });
         } else if (this.automatic_response == 3) {
-          this.$notify({
-            title: "Automatic Status",
-            text: 'Customer is now a Call in ',
-            type: 'Info'  // Adjust type if needed
-          });
+          this.$notify({ title: "Automatic Status", text: 'Customer is now a Call in ', type: 'Info' });
         } else {
-          this.$notify({
-            title: "Automatic Status",
-            text: 'Customer is now Manual Customer',
-            type: 'Warning'  // Adjust type if needed
-          });
+          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({
@@ -832,7 +745,6 @@ export default defineComponent({
         url: path,
         headers: authHeader(),
       }).then((response: any) => {
-
         this.customer = response.data
         this.checktotalOil(this.customer.id)
         this.getCustomerTank(this.customer.id)
@@ -840,7 +752,7 @@ export default defineComponent({
         this.getCustomerDescription(this.customer.id);
         this.getCustomerStats(this.customer.id);
         this.getCustomerLastDelivery(this.customer.id);
-
+        this.getServiceCalls(this.customer.id);
       })
     },
     getCustomerLastDelivery(userid: any) {
@@ -850,9 +762,7 @@ export default defineComponent({
         url: path,
         headers: authHeader(),
       }).then((response: any) => {
-
         this.customer_last_delivery = response.data.date
-
       })
     },
     getCustomerStats(userid: any) {
@@ -862,9 +772,7 @@ export default defineComponent({
         url: path,
         headers: authHeader(),
       }).then((response: any) => {
-
         this.customer_stats = response.data
-
       })
     },
     checktotalOil(userid: any) {
@@ -874,7 +782,6 @@ export default defineComponent({
         url: path,
         headers: authHeader(),
       })
-
     },
     getCustomerDescription(userid: any) {
       let path = import.meta.env.VITE_BASE_URL + '/customer/description/' + userid;
@@ -883,7 +790,6 @@ export default defineComponent({
         url: path,
         headers: authHeader(),
       }).then((response: any) => {
-
         this.customer_description = response.data
       })
     },
@@ -895,10 +801,8 @@ export default defineComponent({
         headers: authHeader(),
       }).then((response: any) => {
         this.customer_tank = response.data
-
       })
     },
-
     getCreditCards(user_id: any) {
       let path = import.meta.env.VITE_BASE_URL + '/payment/cards/' + user_id;
       axios({
@@ -906,11 +810,9 @@ export default defineComponent({
         url: path,
         headers: authHeader(),
       }).then((response: any) => {
-
         this.credit_cards = response.data
       })
     },
-
     getCreditCardsCount(user_id: any) {
       let path = import.meta.env.VITE_BASE_URL + '/payment/cards/onfile/' + user_id;
       axios({
@@ -918,11 +820,9 @@ export default defineComponent({
         url: path,
         headers: authHeader(),
       }).then((response: any) => {
-
         this.credit_cards_count = response.data.cards
       })
     },
-
     getCustomerAutoDelivery(userid: any) {
       let path = import.meta.env.VITE_AUTO_URL + '/delivery/all/profile/' + userid ;
       axios({
@@ -933,7 +833,6 @@ export default defineComponent({
         this.autodeliveries = response.data
       })
     },
-
     getCustomerDelivery(userid: any, delivery_page: any) {
       let path = import.meta.env.VITE_BASE_URL + '/delivery/customer/' + userid + '/' + delivery_page;
       axios({
@@ -944,11 +843,9 @@ export default defineComponent({
         this.deliveries = response.data
       })
     },
-
     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({
@@ -958,14 +855,9 @@ export default defineComponent({
       }).then(() => {
         this.getCreditCards(this.$route.params.id)
         this.getCreditCardsCount(this.$route.params.id)
-        notify({
-          title: "Card Status",
-          text: "Card Removed",
-          type: "Success",
-        });
+        notify({ title: "Card Status", text: "Card Removed", type: "Success" });
       })
     },
-
     deleteCall(delivery_id: any) {
       let path = import.meta.env.VITE_BASE_URL + '/delivery/delete/' + delivery_id;
       axios({
@@ -974,23 +866,13 @@ export default defineComponent({
         headers: authHeader(),
       }).then((response: any) => {
         if (response.data.ok) {
-          notify({
-            title: "Success",
-            text: "deleted delivery",
-            type: "success",
-          });
+          notify({ title: "Success", text: "deleted delivery", type: "success" });
           this.getPage(1)
         } else {
-          notify({
-            title: "Failure",
-            text: "error deleting delivery",
-            type: "success",
-          });
+          notify({ title: "Failure", text: "error deleting delivery", type: "success" });
         }
       })
     },
-
-
     deleteCustomerSocial(comment_id: number) {
       let path = import.meta.env.VITE_BASE_URL + '/social/delete/' + comment_id;
       axios({
@@ -1002,8 +884,6 @@ export default defineComponent({
         this.getCustomerSocial(this.customer.id, 1)
       })
     },
-
-
     getCustomerSocial(userid: any, delivery_page: any) {
       let path = import.meta.env.VITE_BASE_URL + '/social/posts/' + userid + '/' + delivery_page;
       axios({
@@ -1014,13 +894,7 @@ export default defineComponent({
         this.comments = response.data
       })
     },
-
-
-    CreateSocialComment(payload: {
-      comment: string;
-      poster_employee_id: number
-
-    }) {
+    CreateSocialComment(payload: { comment: string; poster_employee_id: number }) {
       let path = import.meta.env.VITE_BASE_URL + "/social/create/" + this.customer.id;
       axios({
         method: "post",
@@ -1031,7 +905,6 @@ export default defineComponent({
       })
         .then((response: any) => {
           if (response.data.ok) {
-
             this.getCustomerSocial(this.customer.id, 1)
           }
           if (response.data.error) {
@@ -1040,14 +913,64 @@ export default defineComponent({
         })
     },
     onSubmitSocial() {
-      let payload = {
-        comment: this.CreateSocialForm.basicInfo.comment,
-        poster_employee_id: this.user.user_id
-
-      };
+      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({
+            method: 'get',
+            url: path,
+            headers: authHeader(),
+            withCredentials: true,
+        }).then((response: any) => {
+            this.serviceCalls = response.data;
+        }).catch((error: any) => {
+            console.error("Failed to get customer service calls:", error);
+        });
+    },
+    openEditModal(service: ServiceCall) {
+      this.selectedServiceForEdit = service;
+    },
+    closeEditModal() {
+      this.selectedServiceForEdit = null;
+    },
+    async handleSaveChanges(updatedService: ServiceCall) {
+      try {
+        const path = `${import.meta.env.VITE_BASE_URL}/service/update/${updatedService.id}`;
+        await axios.put(path, updatedService, { headers: authHeader(), withCredentials: true });
+        this.getServiceCalls(this.customer.id);
+        this.closeEditModal();
+      } catch (error) {
+        console.error("Failed to save service call changes:", error);
+      }
+    },
+    async handleDeleteService(serviceId: number) {
+      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();
+      } catch (error) {
+        console.error("Failed to delete service call:", error);
+      }
+    },
+    formatDate(dateString: string): string {
+      if (!dateString) return 'N/A';
+      return dayjs(dateString).format('MMMM D, YYYY');
+    },
+    formatTime(dateString: string): string {
+      if (!dateString) return 'N/A';
+      return dayjs(dateString).format('h:mm A');
+    },
+    getServiceTypeName(typeId: number): string {
+      const typeMap: { [key: number]: string } = { 0: 'Tune-up', 1: 'No Heat', 2: 'Fix', 3: 'Tank Install', 4: 'Other' };
+      return typeMap[typeId] || 'Unknown Service';
+    },
+    getServiceTypeColor(typeId: number): string {
+       const colorMap: { [key: number]: string } = { 0: 'blue', 1: 'red', 2: 'green', 3: '#B58900', 4: 'black' };
+      return colorMap[typeId] || 'gray';
+    }
   },
 })
 </script>
diff --git a/src/pages/service/ServiceCalendar.vue b/src/pages/service/ServiceCalendar.vue
new file mode 100644
index 0000000..19d956c
--- /dev/null
+++ b/src/pages/service/ServiceCalendar.vue
@@ -0,0 +1,169 @@
+<template>
+  <Header />
+  <div class="flex">
+    <div class="">
+      <SideBar />
+    </div>
+    <div class="w-full px-10">
+      <div class="text-sm breadcrumbs mb-4">
+        <ul>
+          <li><router-link :to="{ name: 'home' }">Home</router-link></li>
+          <li><router-link :to="{ name: 'ServiceHome' }">Service</router-link></li>
+          <li>Master Calendar</li>
+        </ul>
+      </div>
+
+      <div class="flex text-2xl mb-5 font-bold">
+        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" />
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <Footer />
+
+  <!-- Re-using the powerful edit modal for this page -->
+  <ServiceEditModal
+    v-if="selectedServiceForEdit"
+    :service="selectedServiceForEdit"
+    @close-modal="closeEditModal"
+    @save-changes="handleSaveChanges"
+    @delete-service="handleDeleteService"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import Header from '../../layouts/headers/headerauth.vue';
+import SideBar from '../../layouts/sidebar/sidebar.vue';
+import Footer from '../../layouts/footers/footer.vue';
+import FullCalendar from '@fullcalendar/vue3';
+import dayGridPlugin from '@fullcalendar/daygrid';
+import interactionPlugin from '@fullcalendar/interaction';
+import { CalendarOptions, EventClickArg } from '@fullcalendar/core';
+import ServiceEditModal from './ServiceEditModal.vue'; 
+import axios from 'axios';
+import authHeader from '../../services/auth.header';
+
+// --- Interfaces ---
+interface ServiceCall {
+  id: number;
+  scheduled_date: string;
+  customer_name: string;
+  customer_address: string;
+  customer_town: string;
+  type_service_call: number;
+  description: string;
+}
+
+export default defineComponent({
+  name: 'ServiceCalendar',
+  components: { Header, SideBar, Footer, FullCalendar, ServiceEditModal },
+  data() {
+    return {
+      user: null, // For header/sidebar logic if needed
+      selectedServiceForEdit: null as Partial<ServiceCall> | null,
+      calendarOptions: {
+        plugins: [dayGridPlugin, interactionPlugin],
+        initialView: 'dayGridMonth',
+        weekends: true,
+        events: [] as any[],
+        eventClick: this.handleEventClick,
+      } as CalendarOptions,
+    };
+  },
+  created() {
+    this.userStatus();
+    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`;
+        const response = await axios.get(path, { headers: authHeader(), withCredentials: true });
+        this.calendarOptions.events = response.data;
+      } catch (error) {
+        console.error("Error fetching all calendar events:", error);
+      }
+    },
+
+    // This opens the modal when a calendar event is clicked
+    handleEventClick(clickInfo: EventClickArg): void {
+      const events = (this.calendarOptions.events as any[]) || [];
+      const originalEvent = events.find(e => e.id == clickInfo.event.id);
+
+      if (originalEvent) {
+          this.selectedServiceForEdit = {
+              id: originalEvent.id,
+              scheduled_date: originalEvent.start,
+              customer_name: originalEvent.title.split(': ')[1] || '',
+              customer_address: '',
+              customer_town: '',
+              type_service_call: originalEvent.extendedProps.type_service_call,
+              description: originalEvent.extendedProps.description,
+          };
+      }
+    },
+
+    // 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}`;
+        await axios.put(path, updatedService, { headers: authHeader(), withCredentials: true });
+        await this.fetchEvents();
+        this.closeEditModal();
+      } catch (error) {
+        console.error("Failed to save changes:", error);
+        alert("An error occurred while saving. Please check the console.");
+      }
+    },
+
+    // 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
+            this.closeEditModal();
+        } else {
+            console.error("Failed to delete event:", response.data.error);
+        }
+      } catch (error) { 
+        console.error("Error deleting event:", error); 
+      }
+    },
+
+    // Standard method for user status, e.g., for the header
+    userStatus() {
+      let path = import.meta.env.VITE_BASE_URL + '/auth/whoami';
+      axios({
+        method: 'get',
+        url: path,
+        withCredentials: true,
+        headers: authHeader(),
+      })
+        .then((response: any) => {
+          if (response.data.ok) {
+            this.user = response.data.user;
+          }
+        })
+        .catch(() => {
+          this.user = null
+        })
+    },
+  },
+});
+</script>
\ No newline at end of file
diff --git a/src/pages/service/ServiceEditModal.vue b/src/pages/service/ServiceEditModal.vue
index bf55fbc..15c3818 100644
--- a/src/pages/service/ServiceEditModal.vue
+++ b/src/pages/service/ServiceEditModal.vue
@@ -12,67 +12,48 @@
         </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"
-      >
-        <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 @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">
+        <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 -->
       <form @submit.prevent="saveChanges">
         <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <!-- Scheduled Date -->
+          <!-- 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.scheduled_date" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm text-black">
+            <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">
           </div>
 
-          <!-- Service Type -->
+          <!-- NEW: Time Input -->
           <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-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">
+              <option v-for="hour in 24" :key="hour" :value="hour - 1">{{ (hour - 1).toString().padStart(2, '0') }}:00</option>
             </select>
           </div>
         </div>
-
-        <!-- Description -->
+        
+        <!-- Service Type (Moved to its own row) -->
         <div class="mb-4">
-          <label for="edit-description" class="block text-sm font-medium text-gray-700">Description</label>
-          <!-- ====================================================== -->
-          <!-- ============== THIS LINE HAS BEEN UPDATED ============== -->
-          <!-- ====================================================== -->
-          <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>
-          <!-- ====================================================== -->
-          <!-- ================ END OF UPDATED LINE ================ -->
-          <!-- ====================================================== -->
+          <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>
+          </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>
         </div>
 
-        <!-- Action Buttons -->
         <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="px-4 py-2 bg-red-600 text-white font-medium rounded-md shadow-sm hover:bg-red-700">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="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>
           </div>
         </div>
       </form>
@@ -82,10 +63,11 @@
 
 <script lang="ts">
 import { defineComponent, PropType } from 'vue';
+import dayjs from 'dayjs'; // Import dayjs for easier date/time manipulation
 
 interface ServiceCall {
   id: number;
-  scheduled_date: string;
+  scheduled_date: string; // This is an ISO string like "2025-08-26T14:00:00"
   customer_name: string;
   customer_address: string;
   customer_town: string;
@@ -93,33 +75,43 @@ interface ServiceCall {
   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
+}
+
 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<ServiceCall>,
+      type: Object as PropType<Partial<ServiceCall>>,
       required: true,
     },
   },
   data() {
     return {
-      editableService: {} as Partial<ServiceCall>,
+      editableService: {} as Partial<EditableService>,
       serviceOptions: [
-        { text: 'Tune-up', value: 0 },
-        { text: 'No Heat', value: 1 },
-        { text: 'Fix', value: 2 },
-        { text: 'Tank Install', value: 3 },
-        { text: 'Other', value: 4 },
+        { text: 'Tune-up', value: 0 }, { text: 'No Heat', value: 1 }, { text: 'Fix', value: 2 },
+        { text: 'Tank Install', value: 3 }, { text: 'Other', value: 4 },
       ],
     };
   },
   watch: {
     service: {
       handler(newVal) {
-        this.editableService = JSON.parse(JSON.stringify(newVal));
-        if (this.editableService.scheduled_date) {
-            this.editableService.scheduled_date = this.editableService.scheduled_date.split('T')[0];
-        }
+        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(),
+        };
       },
       immediate: true,
       deep: true,
@@ -127,26 +119,33 @@ export default defineComponent({
   },
   methods: {
     saveChanges() {
-      this.$emit('save-changes', this.editableService);
+      // Re-combine date and time into a single ISO string before emitting
+      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,
+      };
+
+      this.$emit('save-changes', finalPayload);
     },
     confirmDelete() {
-      if (window.confirm(`Are you sure you want to delete this service call for "${this.service.customer_name}"?`)) {
+      if (this.service.id && window.confirm(`Are you sure you want to delete this service call?`)) {
         this.$emit('delete-service', this.service.id);
       }
     },
     getServiceTypeName(typeId: number | undefined | null): string {
-      if (typeId === undefined || typeId === null) {
-        return 'Unknown';
-      }
+      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',
       };
       return typeMap[typeId] || 'Unknown';
     },
     getServiceTypeColor(typeId: number | undefined | null): string {
-      if (typeId === undefined || typeId === null) {
-        return 'gray';
-      }
+      if (typeId === undefined || typeId === null) return 'gray';
       const colorMap: { [key: number]: string } = {
         0: 'blue', 1: 'red', 2: 'green', 3: '#B58900', 4: 'black',
       };
diff --git a/src/pages/service/ServiceHome.vue b/src/pages/service/ServiceHome.vue
index 3a9012f..f658364 100644
--- a/src/pages/service/ServiceHome.vue
+++ b/src/pages/service/ServiceHome.vue
@@ -7,47 +7,63 @@
     <div class=" w-full px-10  ">
       <div class="text-sm breadcrumbs mb-10">
         <ul>
-          <li><router-link :to="{ name: 'home' }">Home</router-link></li>
-          <li>Service Calls</li>
+          <li>
+            <router-link :to="{ name: 'home' }">
+              Home
+            </router-link>
+          </li>
+          <li>
+            Service Calls
+          </li>
         </ul>
       </div>
 
       <div class="flex text-2xl mb-5 font-bold">
-        Upcoming Service Calls
+         Service Calls
       </div>
      
       <div v-if="isLoading" class="text-center p-10">
-        <p>Loading upcoming service calls...</p>
+        <p>Loading service calls...</p>
       </div>
 
-      <div v-else-if="services.length === 0" class="text-center p-10 bg-gray-100 rounded-md">
-        <p>No upcoming service calls found.</p>
+      <div v-else-if="services.length === 0" class="text-center p-10 bg-base-200 rounded-md">
+        <p>No service calls found.</p>
       </div>
 
-      <div v-else class="overflow-x-auto">
-        <table class="min-w-full divide-y divide-gray-200">
-          <thead class=" bg-neutral">
+      <!-- ============================================= -->
+      <!-- ============== 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">
             <tr>
-              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Scheduled Date</th>
-              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Customer Name</th>
-              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Address</th>
-              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Service Type</th>
-              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Description</th>
+              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">Scheduled Date</th>
+              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">Time</th>
+              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">Customer Name</th>
+              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">Address</th>
+              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">Service Type</th>
+              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">Description</th>
             </tr>
           </thead>
-          <tbody class=" divide-y  bg-neutral">
-            <tr v-for="service in services" :key="service.id" @click="openEditModal(service)" class="hover:bg-blue-600 hover:text-black cursor-pointer">
+          <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">{{ 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) }}
               </td>
-              <td class="px-6 py-4 whitespace-normal text-sm text-gray-500">{{ service.description }}</td>
+              <td class="px-6 py-4 whitespace-normal text-sm">{{ service.description }}</td>
             </tr>
           </tbody>
         </table>
       </div>
+      <!-- ============================================= -->
+      <!-- ============== END UPDATED SECTION ============== -->
+      <!-- ============================================= -->
+
     </div>
   </div>
 
@@ -63,13 +79,14 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
-import axios from 'axios';
-import authHeader from '../../services/auth.header';
-import Header from '../../layouts/headers/headerauth.vue';
-import SideBar from '../../layouts/sidebar/sidebar.vue';
-import Footer from '../../layouts/footers/footer.vue';
-import ServiceEditModal from './ServiceEditModal.vue'; 
+import { defineComponent } from 'vue'
+import axios from 'axios'
+import authHeader from '../../services/auth.header'
+import Header from '../../layouts/headers/headerauth.vue'
+import SideBar from '../../layouts/sidebar/sidebar.vue'
+import Footer from '../../layouts/footers/footer.vue'
+import ServiceEditModal from './ServiceEditModal.vue'
+import dayjs from 'dayjs'; // Import dayjs to handle date/time formatting
 
 interface ServiceCall {
   id: number;
@@ -90,7 +107,7 @@ export default defineComponent({
       services: [] as ServiceCall[],
       isLoading: true,
       selectedServiceForEdit: null as ServiceCall | null,
-    };
+    }
   },
   created() {
     this.userStatus();
@@ -112,7 +129,7 @@ export default defineComponent({
         this.isLoading = false;
       }
     },
-
+    
     userStatus() {
       let path = import.meta.env.VITE_BASE_URL + '/auth/whoami';
       axios({
@@ -131,12 +148,53 @@ export default defineComponent({
         })
     },
 
-    // --- HELPER METHODS WITH IMPLEMENTATIONS RESTORED ---
+    openEditModal(service: ServiceCall) {
+      this.selectedServiceForEdit = service;
+    },
 
+    closeEditModal() {
+      this.selectedServiceForEdit = null;
+    },
+
+    async handleSaveChanges(updatedService: ServiceCall) {
+      try {
+        const path = `${import.meta.env.VITE_BASE_URL}/service/update/${updatedService.id}`;
+        const response = await axios.put(path, updatedService, { headers: authHeader(), withCredentials: true });
+        if (response.data.ok) {
+          const index = this.services.findIndex(s => s.id === updatedService.id);
+          if (index !== -1) {
+            this.services[index] = response.data.service;
+          }
+          this.closeEditModal();
+        }
+      } catch (error) {
+        console.error("Failed to save changes:", error);
+        alert("An error occurred while saving. Please check the console.");
+      }
+    },
+
+    async handleDeleteService(serviceId: number) {
+      try {
+        const path = `${import.meta.env.VITE_BASE_URL}/service/delete/${serviceId}`;
+        const response = await axios.delete(path, { headers: authHeader(), withCredentials: true });
+        if (response.data.ok) {
+          this.services = this.services.filter(s => s.id !== serviceId);
+          this.closeEditModal();
+        }
+      } catch (error) {
+        console.error("Failed to delete service call:", error);
+        alert("An error occurred while deleting. Please check the console.");
+      }
+    },
+    
     formatDate(dateString: string): string {
-      const options: Intl.DateTimeFormatOptions = { year: 'numeric', month: 'long', day: 'numeric' };
-      // Adding a timeZone option helps prevent off-by-one-day errors
-      return new Date(dateString).toLocaleDateString(undefined, { ...options, timeZone: 'UTC' });
+      if (!dateString) return 'N/A';
+      return dayjs(dateString).format('MMMM D, YYYY');
+    },
+
+    formatTime(dateString: string): string {
+      if (!dateString) return 'N/A';
+      return dayjs(dateString).format('h:mm A');
     },
 
     getServiceTypeName(typeId: number): string {
@@ -155,51 +213,11 @@ export default defineComponent({
         0: 'blue',
         1: 'red',
         2: 'green',
-        3: '#B58900', // A darker yellow for text
+        3: '#B58900',
         4: 'black',
       };
       return colorMap[typeId] || 'gray';
-    },
-    
-    // --- MODAL MANAGEMENT METHODS ---
-
-    openEditModal(service: ServiceCall) {
-      this.selectedServiceForEdit = service;
-    },
-    closeEditModal() {
-      this.selectedServiceForEdit = null;
-    },
-    async handleSaveChanges(updatedService: ServiceCall) {
-      try {
-        const path = `${import.meta.env.VITE_BASE_URL}/service/update/${updatedService.id}`;
-        const response = await axios.put(path, updatedService, { headers: authHeader(), withCredentials: true });
-
-        if (response.data.ok) {
-          const index = this.services.findIndex(s => s.id === updatedService.id);
-          if (index !== -1) {
-            this.services[index] = response.data.service;
-          }
-          this.closeEditModal();
-        }
-      } catch (error) {
-        console.error("Failed to save changes:", error);
-        alert("An error occurred while saving. Please check the console.");
-      }
-    },
-    async handleDeleteService(serviceId: number) {
-      try {
-        const path = `${import.meta.env.VITE_BASE_URL}/service/delete/${serviceId}`;
-        const response = await axios.delete(path, { headers: authHeader(), withCredentials: true });
-
-        if (response.data.ok) {
-          this.services = this.services.filter(s => s.id !== serviceId);
-          this.closeEditModal();
-        }
-      } catch (error) {
-        console.error("Failed to delete service call:", error);
-        alert("An error occurred while deleting. Please check the console.");
-      }
-    },
+    }
   },
-});
+})
 </script>
\ No newline at end of file
diff --git a/src/pages/service/calender/CalendarCustomer.vue b/src/pages/service/calender/CalendarCustomer.vue
index 8169435..5834760 100644
--- a/src/pages/service/calender/CalendarCustomer.vue
+++ b/src/pages/service/calender/CalendarCustomer.vue
@@ -24,11 +24,12 @@
           <FullCalendar ref="fullCalendar" :options="calendarOptions" />
         </div>
         
-        <EventModal
-          v-if="selectedEvent"
-          :event="selectedEvent"
-          @close-modal="selectedEvent = null"
-          @delete-event="handleEventDelete"
+        <ServiceEditModal
+          v-if="selectedServiceForEdit"
+          :service="selectedServiceForEdit"
+          @close-modal="closeEditModal"
+          @save-changes="handleSaveChanges"
+          @delete-service="handleDeleteService"
         />
       </div>
     </div>
@@ -41,25 +42,32 @@ import Header from '../../../layouts/headers/headerauth.vue';
 import FullCalendar from '@fullcalendar/vue3';
 import dayGridPlugin from '@fullcalendar/daygrid';
 import interactionPlugin from '@fullcalendar/interaction';
-import { CalendarOptions, EventApi, EventClickArg } from '@fullcalendar/core';
+// --- FIX: Removed 'EventApi' as it's no longer used ---
+import { CalendarOptions, EventClickArg } from '@fullcalendar/core';
 import EventSidebar from './EventSidebar.vue';
-import EventModal from './EventModal.vue'; 
+import ServiceEditModal from '../ServiceEditModal.vue'; 
 import axios from 'axios';
 import authHeader from '../../../services/auth.header';
 
-// --- Interfaces ---
+// --- 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 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; }
-interface EventExtendedProps { description: string; type_service_call: number; }
-interface AppEvent { id?: string; title: string; start: string; end?: string; extendedProps: EventExtendedProps; }
 
 export default defineComponent({
   name: 'CalendarCustomer',
-  components: { Header, FullCalendar, EventSidebar, EventModal },
+  components: { Header, FullCalendar, EventSidebar, ServiceEditModal },
   data() {
     return {
       isLoading: false,
-      selectedEvent: null as EventApi | null,
-      calendarOptions: {} as CalendarOptions,
+      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
+        eventClick: this.handleEventClick,
+      } as CalendarOptions,
       customer: null as Customer | null,
     };
   },
@@ -72,18 +80,44 @@ export default defineComponent({
     },
   },
   created() {
-    this.calendarOptions = {
-      plugins: [dayGridPlugin, interactionPlugin],
-      initialView: 'dayGridMonth',
-      weekends: true,
-      events: [],
-      eventClick: this.handleEventClick,
-    };
+    // The created hook is now only responsible for fetching data
     this.fetchEvents();
   },
   methods: {
-    // --- METHOD IMPLEMENTATIONS RESTORED ---
+    handleEventClick(clickInfo: EventClickArg): void {
+      const events = (this.calendarOptions.events as any[]) || [];
+      const originalEvent = events.find(e => e.id == clickInfo.event.id);
 
+      if (originalEvent) {
+          this.selectedServiceForEdit = {
+              id: originalEvent.id,
+              scheduled_date: originalEvent.start,
+              customer_name: originalEvent.title.split(': ')[1] || '',
+              customer_address: '',
+              customer_town: '',
+              type_service_call: originalEvent.extendedProps.type_service_call,
+              description: originalEvent.extendedProps.description,
+          };
+      }
+    },
+    closeEditModal() {
+        this.selectedServiceForEdit = null;
+    },
+    async handleSaveChanges(updatedService: ServiceCall) {
+      try {
+        const path = `${import.meta.env.VITE_BASE_URL}/service/update/${updatedService.id}`;
+        await axios.put(path, updatedService, { headers: authHeader(), withCredentials: true });
+        await this.fetchEvents();
+        this.closeEditModal();
+      } catch (error) {
+        console.error("Failed to save changes:", error);
+        alert("An error occurred while saving. Please check the console.");
+      }
+    },
+    async handleDeleteService(serviceId: number) {
+        await this.handleEventDelete(String(serviceId));
+        this.closeEditModal();
+    },
     async getCustomer(customerId: string): Promise<void> {
       this.isLoading = true;
       this.customer = null;
@@ -99,7 +133,6 @@ export default defineComponent({
         this.isLoading = false;
       }
     },
-
     async fetchEvents(): Promise<void> {
       try {
         const path = `${import.meta.env.VITE_BASE_URL}/service/all`;
@@ -109,11 +142,6 @@ export default defineComponent({
         console.error("Error fetching all calendar events:", error);
       }
     },
-
-    handleEventClick(clickInfo: EventClickArg): void {
-      this.selectedEvent = clickInfo.event;
-    },
-
     async handleEventScheduled(eventData: any): Promise<void> {
       if (!this.customer) {
           alert("Error: A customer must be loaded in the sidebar to create a new event.");
@@ -136,7 +164,6 @@ 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}`;
@@ -145,7 +172,6 @@ export default defineComponent({
             const calendarApi = (this.$refs.fullCalendar as any).getApi();
             const eventToRemove = calendarApi.getEventById(eventId);
             if (eventToRemove) eventToRemove.remove();
-            this.selectedEvent = null;
         } else {
             console.error("Failed to delete event:", response.data.error);
         }
diff --git a/src/pages/service/calender/EventSidebar.vue b/src/pages/service/calender/EventSidebar.vue
index 43977cd..352d709 100644
--- a/src/pages/service/calender/EventSidebar.vue
+++ b/src/pages/service/calender/EventSidebar.vue
@@ -40,11 +40,7 @@
         </select>
       </div>
 
-      <div class="mb-4">
-        <!-- CHANGED: Class updated to 'text-gray-200' for visibility on dark backgrounds -->
-        <label for="event-end-date" class="block text-sm font-medium text-gray-200">End Date (Optional for multi-day)</label>
-        <input type="date" id="event-end-date" v-model="event.endDate" :min="event.date" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm text-black">
-      </div>
+   
 
       <button type="submit" class="w-full bg-green-600 text-white py-2 px-4 rounded-md hover:bg-green-700">
         Add Event
@@ -161,4 +157,4 @@ export default defineComponent({
     },
   },
 });
-</script>
\ No newline at end of file
+</script>
diff --git a/src/pages/service/routes.ts b/src/pages/service/routes.ts
index 43e5ef3..351f84b 100644
--- a/src/pages/service/routes.ts
+++ b/src/pages/service/routes.ts
@@ -1,8 +1,7 @@
-
-
-
-import ServiceHome from './ServiceHome.vue' // Adjust the import path
+// Import the new component at the top
+import ServiceHome from './ServiceHome.vue'
 import CalendarCustomer from './calender/CalendarCustomer.vue'
+import ServiceCalendar from './ServiceCalendar.vue' 
 
 const serviceRoutes = [
   {
@@ -11,14 +10,20 @@ const serviceRoutes = [
     component: ServiceHome
   },
 
+  // --- NEW ROUTE FOR THE MASTER CALENDAR ---
+  {
+    path: '/service/calendar', // Note: No '/:id' parameter
+    name: 'ServiceCalendar',
+    component: ServiceCalendar,
+  },
+  // -----------------------------------------
 
-    {
-        path: '/service/calender/:id',
-        name: 'CalenderCustomer',
-        component: CalendarCustomer,
-    },
-
+  {
+    path: '/service/calender/:id', // Note the typo, should likely be 'calendar'
+    name: 'CalenderCustomer',
+    component: CalendarCustomer,
+  },
 ]
 
 export default serviceRoutes
-//sourceMappingURL=index.ts.map
+//sourceMappingURL=index.ts.map
\ No newline at end of file