feat(ui): Massive frontend modernization including customer table redesign, new map features, and consistent styling
This commit is contained in:
@@ -9,15 +9,29 @@
|
||||
<li>Set Oil Pricing</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h1 class="text-3xl font-bold mt-4">
|
||||
Set Today's Oil Pricing
|
||||
</h1>
|
||||
|
||||
<!-- 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="bg-neutral rounded-lg p-6 mt-6">
|
||||
<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>
|
||||
@@ -29,23 +43,26 @@
|
||||
<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" />
|
||||
<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" />
|
||||
<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" />
|
||||
<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>
|
||||
@@ -60,30 +77,33 @@
|
||||
<!-- 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 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" />
|
||||
<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" />
|
||||
<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>
|
||||
@@ -92,7 +112,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@@ -118,52 +138,52 @@ 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;
|
||||
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);
|
||||
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",
|
||||
});
|
||||
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 = () => {
|
||||
|
||||
Reference in New Issue
Block a user