198 lines
7.3 KiB
Vue
198 lines
7.3 KiB
Vue
<!-- src/pages/admin/authorize.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>
|
|
|
|
<!-- Page Header -->
|
|
<div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4 mt-4 mb-6">
|
|
<div>
|
|
<h1 class="text-2xl md:text-3xl font-bold flex items-center gap-3">
|
|
<div
|
|
class="w-10 h-10 rounded-xl bg-gradient-to-br from-primary to-primary/60 flex items-center justify-center shadow-lg">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
|
|
stroke="currentColor" class="w-5 h-5 text-primary-content">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="M12 6v12m-3-2.818l.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
</div>
|
|
Set Today's Oil Pricing
|
|
</h1>
|
|
<p class="text-base-content/60 mt-1 ml-13">Set daily oil prices and service fees</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Form Card -->
|
|
<div class="modern-table-card 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>
|
|
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted } from 'vue';
|
|
import { useRouter } from 'vue-router';
|
|
import { notify } from "@kyvg/vue3-notification";
|
|
import { adminService } from '../../services/adminService';
|
|
import { authService } from '../../services/authService';
|
|
import { AxiosResponse, AxiosError } from '../../types/models';
|
|
|
|
// State
|
|
const user = ref<any>(null);
|
|
const OilForm = ref({
|
|
price_from_supplier: 0,
|
|
price_for_customer: 0,
|
|
price_for_employee: 0,
|
|
price_same_day: 0,
|
|
price_prime: 0,
|
|
price_emergency: 0,
|
|
});
|
|
|
|
const router = useRouter();
|
|
|
|
// Methods
|
|
const userStatus = async () => {
|
|
try {
|
|
const response: AxiosResponse<any> = await authService.whoami();
|
|
if (response.data.ok) {
|
|
user.value = response.data.user;
|
|
}
|
|
} catch (error) {
|
|
user.value = null;
|
|
}
|
|
};
|
|
|
|
const getCurrentPrices = async () => {
|
|
try {
|
|
const response: AxiosResponse<any> = await adminService.getOilPricing();
|
|
if (response.data) {
|
|
OilForm.value = response.data;
|
|
}
|
|
} catch (err) {
|
|
console.error("Failed to fetch oil prices", err);
|
|
}
|
|
};
|
|
|
|
const CreatePricing = async (payload: any) => {
|
|
try {
|
|
const response: AxiosResponse<any> = await adminService.updateOilPricing(payload);
|
|
if (response.data.ok) {
|
|
notify({
|
|
title: "Success",
|
|
text: "Prices have been updated!",
|
|
type: "success",
|
|
});
|
|
router.push({ name: "home" });
|
|
} else {
|
|
notify({
|
|
title: "Error",
|
|
text: response.data.error || "An unknown error occurred.",
|
|
type: "error",
|
|
});
|
|
}
|
|
} catch (err: unknown) {
|
|
const error = err as AxiosError<{ error?: string }>;
|
|
notify({
|
|
title: "Error",
|
|
text: error.response?.data?.error || "An error occurred while updating prices.",
|
|
type: "error",
|
|
});
|
|
}
|
|
};
|
|
|
|
const onSubmit = () => {
|
|
CreatePricing(OilForm.value);
|
|
};
|
|
|
|
// Lifecycle
|
|
onMounted(() => {
|
|
userStatus();
|
|
getCurrentPrices();
|
|
});
|
|
</script> |