Added call dropdown

This commit is contained in:
2025-09-24 16:38:56 -04:00
parent a9ee292b23
commit c57ceb7e47
6 changed files with 512 additions and 70 deletions

View File

@@ -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>