Added call dropdown

src/pages/admin/authorize.vue

@@ -0,0 +1,175 @@
+<!-- src/pages/admin/oilprice.vue -->
+<template>
+  <div class="flex">
+    <div class="w-full px-4 md:px-10 py-4">
+      <!-- Breadcrumbs & Title -->
+      <div class="text-sm breadcrumbs">
+        <ul>
+          <li><router-link :to="{ name: 'home' }">Home</router-link></li>
+          <li>Set Oil Pricing</li>
+        </ul>
+      </div>
+      
+      <h1 class="text-3xl font-bold mt-4">
+        Set Today's Oil Pricing
+      </h1>
+
+      <!-- Main Form Card -->
+      <div class="bg-neutral rounded-lg p-6 mt-6">
+        <form @submit.prevent="onSubmit" class="space-y-6">
+          
+          <!-- SECTION 1: Base Pricing -->
+          <div>
+            <h2 class="text-lg font-bold">Base Pricing</h2>
+            <p class="text-xs text-gray-400">Set the core price per gallon for different groups.</p>
+            <div class="divider mt-2 mb-4"></div>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+              <!-- Price from Supplier -->
+              <div class="form-control">
+                <label class="label"><span class="label-text">Price from Supplier</span></label>
+                <label class="input-group input-group-sm">
+                  <span>$</span>
+                  <input v-model.number="OilForm.price_from_supplier" type="number" step="0.01" placeholder="3.50" class="input input-bordered input-sm w-full" />
+                </label>
+              </div>
+              <!-- Price for Customer -->
+              <div class="form-control">
+                <label class="label"><span class="label-text">Price for Customer</span></label>
+                <label class="input-group input-group-sm">
+                   <span>$</span>
+                  <input v-model.number="OilForm.price_for_customer" type="number" step="0.01" placeholder="4.50" class="input input-bordered input-sm w-full" />
+                </label>
+              </div>
+              <!-- Price for Employee -->
+              <div class="form-control">
+                <label class="label"><span class="label-text">Price for Employee</span></label>
+                <label class="input-group input-group-sm">
+                   <span>$</span>
+                  <input v-model.number="OilForm.price_for_employee" type="number" step="0.01" placeholder="4.00" class="input input-bordered input-sm w-full" />
+                </label>
+              </div>
+            </div>
+          </div>
+
+          <!-- SECTION 2: Service Fees -->
+          <div>
+            <h2 class="text-lg font-bold">Service Fees</h2>
+            <p class="text-xs text-gray-400">Set the flat fees for special delivery services.</p>
+            <div class="divider mt-2 mb-4"></div>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+              <!-- Price Same Day -->
+              <div class="form-control">
+                <label class="label"><span class="label-text">Same Day Fee</span></label>
+                 <label class="input-group input-group-sm">
+                   <span>$</span>
+                  <input v-model.number="OilForm.price_same_day" type="number" step="1.00" placeholder="50.00" class="input input-bordered input-sm w-full" />
+                </label>
+              </div>
+              <!-- Price Prime -->
+              <div class="form-control">
+                <label class="label"><span class="label-text">Prime Fee</span></label>
+                <label class="input-group input-group-sm">
+                   <span>$</span>
+                  <input v-model.number="OilForm.price_prime" type="number" step="1.00" placeholder="75.00" class="input input-bordered input-sm w-full" />
+                </label>
+              </div>
+              <!-- Price Emergency -->
+              <div class="form-control">
+                <label class="label"><span class="label-text">Emergency Fee</span></label>
+                <label class="input-group input-group-sm">
+                   <span>$</span>
+                  <input v-model.number="OilForm.price_emergency" type="number" step="1.00" placeholder="150.00" class="input input-bordered input-sm w-full" />
+                </label>
+              </div>
+            </div>
+          </div>
+          
+          <!-- SUBMIT BUTTON -->
+          <div class="pt-4">
+            <button type="submit" class="btn btn-primary btn-sm">Update Pricing</button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+  <Footer />
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import axios from 'axios'
+import authHeader from '../../services/auth.header'
+import Footer from '../../layouts/footers/footer.vue'
+import { notify } from "@kyvg/vue3-notification";
+
+export default defineComponent({
+  name: 'auth',
+  components: {
+    Footer,
+  },
+  data() {
+    return {
+      user: null,
+      // --- REFACTORED: Simplified, flat form object ---
+      OilForm: {
+        price_from_supplier: 0,
+        price_for_customer: 0,
+        price_for_employee: 0,
+        price_same_day: 0,
+        price_prime: 0,
+        price_emergency: 0,
+      },
+    }
+  },
+  created() {
+    this.userStatus();
+  },
+  mounted() {
+    this.getCurrentPrices();
+  },
+  methods: {
+    userStatus() {
+      const path = import.meta.env.VITE_BASE_URL + '/auth/whoami';
+      axios.get(path, { withCredentials: true, headers: authHeader() })
+        .then((response: any) => {
+          if (response.data.ok) { this.user = response.data.user; }
+        })
+        .catch(() => { this.user = null; });
+    },
+    getCurrentPrices() {
+      const path = import.meta.env.VITE_BASE_URL + "/admin/oil/get";
+      axios.get(path, { withCredentials: true, headers: authHeader() })
+        .then((response: any) => {
+          if (response.data) {
+            // --- REFACTORED: Populate the flat form object ---
+            this.OilForm = response.data;
+          }
+        });
+    },
+    CreatePricing(payload: any) {
+      const path = import.meta.env.VITE_BASE_URL + "/admin/oil/create";
+      axios.post(path, payload, { withCredentials: true, headers: authHeader() })
+        .then((response: any) => {
+          if (response.data.ok) {
+            notify({
+              title: "Success",
+              text: "Prices have been updated!",
+              type: "success",
+            });
+            this.$router.push({ name: "home" });
+          } else {
+            notify({
+              title: "Error",
+              text: response.data.error || "An unknown error occurred.",
+              type: "error",
+            });
+          }
+        });
+    },
+    onSubmit() {
+      // --- REFACTORED: Submit the flat form object ---
+      this.CreatePricing(this.OilForm);
+    },
+  },
+});
+</script>

src/pages/automatic/home.vue

@@ -28,11 +28,23 @@
               <thead>
                 <tr>
                   <!-- SORTABLE HEADERS -->
-                  <th @click="sortBy('tank_level_percent')" class="cursor-pointer hover:text-white">Tank Level</th>
-                  <th @click="sortBy('days_since_last_fill')" class="cursor-pointer hover:text-white">Days Since Fill</th>
-                  <th @click="sortBy('customer_full_name')" class="cursor-pointer hover:text-white">Name</th>
+                  <th @click="sortBy('tank_level_percent')" :class="sortKey === 'tank_level_percent' ? 'cursor-pointer hover:text-white bg-orange-500' : 'cursor-pointer hover:text-white'">
+                    Tank Level
+                    <span v-if="sortKey === 'tank_level_percent'">{{ sortAsc ? '▲' : '▼' }}</span>
+                  </th>
+                  <th @click="sortBy('days_since_last_fill')" :class="sortKey === 'days_since_last_fill' ? 'cursor-pointer hover:text-white bg-orange-500' : 'cursor-pointer hover:text-white'">
+                    Days Since Fill
+                    <span v-if="sortKey === 'days_since_last_fill'">{{ sortAsc ? '▲' : '▼' }}</span>
+                  </th>
+                  <th @click="sortBy('customer_full_name')" :class="sortKey === 'customer_full_name' ? 'cursor-pointer hover:text-white bg-orange-500' : 'cursor-pointer hover:text-white'">
+                    Name
+                    <span v-if="sortKey === 'customer_full_name'">{{ sortAsc ? '▲' : '▼' }}</span>
+                  </th>
+                  <th @click="sortBy('house_factor')" :class="sortKey === 'house_factor' ? 'cursor-pointer hover:text-white bg-orange-500' : 'cursor-pointer hover:text-white'">
+                    Usage Factor
+                    <span v-if="sortKey === 'house_factor'">{{ sortAsc ? '▲' : '▼' }}</span>
+                  </th>
                   <th>Address</th>
-                  <th @click="sortBy('house_factor')" class="cursor-pointer hover:text-white">Usage Factor</th>
                   <th class="text-right">Actions</th>
                 </tr>
               </thead>
@@ -60,8 +72,8 @@
                       {{ oil.customer_full_name }}
                     </router-link>
                   </td>
-                  <td>{{ oil.customer_address }}, {{ oil.customer_town }}</td>
                   <td>{{ oil.house_factor }}</td>
+                  <td>{{ oil.customer_address }}, {{ oil.customer_town }}</td>
                   <td class="text-right">
                     <div class="flex items-center justify-end gap-2">
                      <router-link :to="{ name: 'customerEdit', params: { id: oil.customer_id } }" class="btn btn-sm btn-secondary">Edit Customer</router-link>
@@ -162,7 +174,7 @@ export default defineComponent({
       user: null,
       deliveries: [] as AutoDelivery[],
       // --- NEW: Data properties for sorting ---
-      sortKey: 'estimated_gallons_left' as keyof AutoDelivery | 'tank_level_percent',
+      sortKey: 'tank_level_percent' as keyof AutoDelivery | 'tank_level_percent',
       sortAsc: true,
     }
   },
@@ -249,4 +261,4 @@ export default defineComponent({
     },
   },
 })
-</script>
+</script>