Eamco/eamco_office_frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Updated charge close to working

Browse Source
This commit is contained in:
Edwin Eames
2025-09-09 18:26:21 -04:00
parent fd11c9e794
commit 98fe855e65
19 changed files with 1785 additions and 372 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
src/pages/delivery/create.vue
View File

@@ -46,7 +46,7 @@
</div>
<!-- Create Delivery Form (now in the left column) -->
<div class="bg-base-100 rounded-lg p-4">
<div class="bg-neutral rounded-lg p-4">
<h2 class="text-2xl font-bold mb-4">Create Delivery Order</h2>
<form class="space-y-4" @submit.prevent="onDeliverySubmit">
<!-- Gallons & Fill -->
@@ -55,7 +55,12 @@
<input v-model="formDelivery.gallons_ordered" :disabled="formDelivery.customer_asked_for_fill"
class="input input-bordered input-sm w-full max-w-xs" type="number" placeholder="# gallons" />
<div class="flex flex-wrap gap-2 mt-2">
<button v-for="amount in quickGallonAmounts" :key="amount" @click.prevent="setGallons(amount)" class="btn btn-xs btn-outline">{{ amount }} gal</button>
<button v-for="amount in quickGallonAmounts"
:key="amount"
@click.prevent="setGallons(amount)"
:class="['btn', 'btn-xs', selectedGallonsAmount == amount ? 'bg-blue-600 text-white border-blue-600' : 'btn-outline']">
{{ amount }} gal
</button>
</div>
<span v-if="v$.formDelivery.gallons_ordered.$error" class="text-red-500 text-xs mt-1">
Required unless "Fill" is checked.
@@ -107,12 +112,9 @@
<div v-if="userCards.length > 0 && formDelivery.credit">
<label class="label"><span class="label-text">Select Card</span></label>
<select class="select select-bordered select-sm w-full max-w-xs" v-model="formDelivery.credit_card_id">
<option disabled :value="0">Select a card</option>
<option v-for="card in userCards" :key="card.id" :value="card.id">
{{ card.type_of_card }} - {{ card.card_number }}
</option>
</select>
<div class="flex flex-wrap gap-2 mt-2">
<button v-for="card in userCards" :key="card.id" @click.prevent="selectCreditCard(card.id)" :class="['btn', 'btn-xs', formDelivery.credit_card_id === card.id ? 'bg-blue-600 text-white border-blue-600' : 'btn-outline']">{{ card.type_of_card }} - ****{{ card.last_four_digits }}</button>
</div>
<span v-if="v$.formDelivery.credit_card_id.$error" class="text-red-500 text-xs mt-1">
You must select a credit card when choosing CC option.
</span>
@@ -125,14 +127,23 @@
<label class="label"><span class="label-text font-bold">Expected Delivery Date</span></label>
<input v-model="formDelivery.expected_delivery_date" class="input input-bordered input-sm w-full max-w-xs" type="date" />
<div class="flex flex-wrap gap-2 mt-2">
<button @click.prevent="setDeliveryDate(0)" class="btn btn-xs btn-outline">Today</button>
<button @click.prevent="setDeliveryDate(1)" class="btn btn-xs btn-outline">Tomorrow</button>
<button @click.prevent="setDeliveryDate(2)" class="btn btn-xs btn-outline">In 2 Days</button>
<button @click.prevent="setDeliveryDate(3)" class="btn btn-xs btn-outline">In 3 Days</button>
<button @click.prevent="setDeliveryDate(1)" :class="['btn', 'btn-xs', isDeliveryDateSelected(1) ? 'bg-blue-600 text-white border-blue-600' : 'btn-outline']">Tomorrow</button>
<button @click.prevent="setDeliveryDate(2)" :class="['btn', 'btn-xs', isDeliveryDateSelected(2) ? 'bg-blue-600 text-white border-blue-600' : 'btn-outline']">In 2 Days</button>
<button @click.prevent="setDeliveryDate(3)" :class="['btn', 'btn-xs', isDeliveryDateSelected(3) ? 'bg-blue-600 text-white border-blue-600' : 'btn-outline']">In 3 Days</button>
<button @click.prevent="setDeliveryDate(0)" :class="['btn', 'btn-xs', isDeliveryDateSelected(0) ? 'bg-blue-600 text-white border-blue-600' : 'btn-outline']">Today</button>
</div>
<span v-if="v$.formDelivery.expected_delivery_date.$error" class="text-red-500 text-xs mt-1">Date is required.</span>
</div>
<!-- Optional Section Divider -->
<div class="flex items-center my-4">
<div class="flex-grow h-px bg-gray-300"></div>
<span class="px-3 text-gray-500 text-sm font-medium">Optional</span>
<div class="flex-grow h-px bg-gray-300"></div>
</div>
<div>
<label class="label"><span class="label-text font-bold">Apply Promotion</span></label>
<select class="select select-bordered select-sm w-full max-w-xs" v-model="formDelivery.promo_id">
@@ -144,7 +155,7 @@
</div>
<!-- Fees -->
<div class="p-4 border rounded-md">
<div class="p-4 ">
<label class="label-text font-bold">Fees & Options</label>
<div class="flex flex-wrap gap-x-6 gap-y-2">
<div class="form-control"><label class="label cursor-pointer gap-2"><span class="label-text">Emergency</span><input v-model="formDelivery.emergency" type="checkbox" class="checkbox checkbox-xs" /></label></div>
@@ -180,7 +191,7 @@
</tr>
</thead>
<tbody>
<tr v-for="tier in pricingTiers" :key="tier.gallons" class="hover">
<tr v-for="tier in pricingTiers" :key="tier.gallons" :class="isPricingTierSelected(tier.gallons) ? 'bg-blue-600 text-white hover:bg-blue-600' : 'hover'">
<td>{{ tier.gallons }}</td>
<td>${{ Number(tier.price).toFixed(2) }}</td>
</tr>
@@ -342,19 +353,19 @@ interface PricingTier {
price: number | string;
}
interface DeliveryFormData {
gallons_ordered: string;
customer_asked_for_fill: boolean;
expected_delivery_date: string;
dispatcher_notes_taken: string;
prime: boolean;
emergency: boolean;
same_day: boolean;
credit: boolean;
cash: boolean;
check: boolean;
other: boolean;
credit_card_id: number;
promo_id: number;
gallons_ordered?: string;
customer_asked_for_fill?: boolean;
expected_delivery_date?: string;
dispatcher_notes_taken?: string;
prime?: boolean;
emergency?: boolean;
same_day?: boolean;
credit?: boolean;
cash?: boolean;
check?: boolean;
other?: boolean;
credit_card_id?: number;
promo_id?: number;
}
interface CardFormData {
card_name: string;
@@ -374,7 +385,7 @@ export default defineComponent({
return {
v$: useValidate(),
user: null as any,
quickGallonAmounts: [100, 125, 150, 200, 220],
quickGallonAmounts: [100, 125, 150, 175, 200, 220],
userCards: [] as UserCard[],
promos: [] as Promo[],
truckDriversList: [] as Driver[],
@@ -463,7 +474,11 @@ export default defineComponent({
return types[this.customer.customer_home_type] || 'Unknown type';
},
isAnyPaymentMethodSelected(): boolean {
return this.formDelivery.credit || this.formDelivery.cash || this.formDelivery.check || this.formDelivery.other;
return !!(this.formDelivery?.credit || this.formDelivery?.cash || this.formDelivery?.check || this.formDelivery?.other);
},
selectedGallonsAmount(): number {
const value = this.formDelivery.gallons_ordered ?? '';
return Number(value);
}
},
created() {
@@ -488,11 +503,30 @@ export default defineComponent({
this.formDelivery.gallons_ordered = String(amount);
this.formDelivery.customer_asked_for_fill = false;
},
selectCreditCard(cardId: number) {
this.formDelivery.credit_card_id = cardId;
},
setDeliveryDate(days: number) {
const date = new Date();
date.setDate(date.getDate() + days);
this.formDelivery.expected_delivery_date = date.toISOString().split('T')[0];
},
isDeliveryDateSelected(days: number): boolean {
const date = new Date();
date.setDate(date.getDate() + days);
return this.formDelivery.expected_delivery_date === date.toISOString().split('T')[0];
},
isPricingTierSelected(tierGallons: number | string): boolean {
if (!this.formDelivery.gallons_ordered) return false;
const selectedGallons = Number(this.formDelivery.gallons_ordered);
if (isNaN(selectedGallons)) return false;
const tierNum = Number(tierGallons);
if (isNaN(tierNum)) return false;
const shouldHighlight = selectedGallons === tierNum;
return shouldHighlight;
},
getPricingTiers() {
let path = import.meta.env.VITE_BASE_URL + "/info/price/oil/tiers";
axios({ method: "get", url: path, withCredentials: true, headers: authHeader() })

471
src/pages/delivery/edit.vue
View File

@@ -1,150 +1,240 @@
<!-- src/pages/delivery/edit.vue -->
<template>
<div class="flex">
<!-- Main Content -->
<div class="w-full px-4 md:px-10 py-4">
<!-- Main container with reduced horizontal padding -->
<div class="w-full px-4 md:px-6 py-4">
<!-- Breadcrumbs Navigation -->
<div class="text-sm breadcrumbs">
<ul>
<li><router-link :to="{ name: 'home' }">Home</router-link></li>
<li>Edit Oil Delivery #{{ deliveryOrder.id }}</li>
<li>Edit Delivery </li>
</ul>
</div>
<!-- TOP SECTION: Customer and Payment Info -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 my-6">
<!-- Customer Info Card -->
<div v-if="customer.id" class="bg-neutral rounded-lg p-5">
<div class="flex justify-between items-center mb-4">
<div>
<div class="text-xl font-bold">{{ customer.customer_first_name }} {{ customer.customer_last_name }}</div>
<div class="text-sm text-gray-400">Account: {{ customer.account_number }}</div>
</div>
<router-link :to="{ name: 'customerProfile', params: { id: customer.id } }" class="btn btn-secondary btn-sm">
View Profile
</router-link>
</div>
<div>
<div>{{ customer.customer_address }}</div>
<div v-if="customer.customer_apt && customer.customer_apt !== 'None'">{{ customer.customer_apt }}</div>
<div>{{ customer.customer_town }}, {{ stateName }} {{ customer.customer_zip }}</div>
<div class="mt-2">{{ customer.customer_phone_number }}</div>
</div>
</div>
<!-- Payment Card on File Card -->
<div v-if="deliveryOrder.payment_type === 1 && userCard.id" class="bg-neutral rounded-lg p-5">
<h3 class="text-xl font-bold mb-4">Card on File</h3>
<div class="space-y-1">
<p><span class="font-semibold">Card Type:</span> {{ userCard.type_of_card }}</p>
<p><span class="font-semibold">Card Number:</span> {{ userCard.card_number }}</p>
<p><span class="font-semibold">Name:</span> {{ userCard.name_on_card }}</p>
<p><span class="font-semibold">Expires:</span> {{ userCard.expiration_month }}/{{ userCard.expiration_year }}</p>
<p><span class="font-semibold">CVV:</span> {{ userCard.security_number }}</p>
</div>
</div>
<!-- Main Title -->
<div class="mb-6">
<h1 class="text-3xl font-bold">Edit Delivery Order #{{ deliveryOrder.id }}</h1>
</div>
<!-- BOTTOM SECTION: Edit Form -->
<div class="bg-neutral rounded-lg p-6">
<h2 class="text-2xl font-bold mb-4">Update Delivery Details</h2>
<form @submit.prevent="onSubmit" class="space-y-4">
<!-- Gallons Ordered & Fill Checkbox -->
<div class="flex items-end gap-4">
<div class="flex-grow">
<label class="label"><span class="label-text font-bold">Gallons Ordered</span></label>
<input v-model="CreateOilOrderForm.basicInfo.gallons_ordered" :disabled="CreateOilOrderForm.basicInfo.customer_asked_for_fill"
class="input input-bordered input-sm w-full max-w-xs" type="number" placeholder="# gallons" />
<span v-if="v$.CreateOilOrderForm.basicInfo.gallons_ordered.$error" class="text-red-500 text-xs mt-1">
{{ v$.CreateOilOrderForm.basicInfo.gallons_ordered.$errors[0].$message }}
</span>
</div>
<div class="form-control pb-1">
<label class="label cursor-pointer justify-start gap-4">
<span class="label-text font-bold">Fill</span>
<input v-model="CreateOilOrderForm.basicInfo.customer_asked_for_fill" type="checkbox" class="checkbox checkbox-sm" />
</label>
</div>
</div>
<!-- Date Fields -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label class="label"><span class="label-text font-bold">Order Created Date</span></label>
<input v-model="CreateOilOrderForm.basicInfo.created_delivery_date" type="date" class="input input-bordered input-sm w-full" />
<!--
NEW LAYOUT: A single 2-column grid for the whole page.
Gaps and spacing are reduced for a more compact feel.
-->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mt-4">
<!-- LEFT COLUMN: Primary Information & Actions -->
<div class="space-y-4">
<!-- Customer Info Card -->
<div v-if="customer.id" class="bg-neutral rounded-lg p-5">
<div class="flex justify-between items-center mb-4">
<div>
<div class="text-xl font-bold">{{ customer.customer_first_name }} {{ customer.customer_last_name }}</div>
<div class="text-sm text-gray-400">Account: {{ customer.account_number }}</div>
</div>
<router-link :to="{ name: 'customerProfile', params: { id: customer.id } }" class="btn btn-secondary btn-sm">
View Profile
</router-link>
</div>
<div>
<label class="label"><span class="label-text font-bold">Expected Delivery Date</span></label>
<input v-model="CreateOilOrderForm.basicInfo.expected_delivery_date" type="date" class="input input-bordered input-sm w-full" />
<span v-if="v$.CreateOilOrderForm.basicInfo.expected_delivery_date.$error" class="text-red-500 text-xs mt-1">
{{ v$.CreateOilOrderForm.basicInfo.expected_delivery_date.$errors[0].$message }}
</span>
<div>{{ customer.customer_address }}</div>
<div v-if="customer.customer_apt && customer.customer_apt !== 'None'">{{ customer.customer_apt }}</div>
<div>{{ customer.customer_town }}, {{ stateName }} {{ customer.customer_zip }}</div>
<div class="mt-2">{{ customer.customer_phone_number }}</div>
</div>
</div>
<!-- Fees & Options -->
<div class="p-4 border rounded-md">
<label class="label-text font-bold">Fees & Options</label>
<div class="flex flex-wrap gap-x-6 gap-y-2 mt-2">
<div class="form-control"><label class="label cursor-pointer gap-2"><span class="label-text">Prime</span><input v-model="CreateOilOrderForm.basicInfo.prime" type="checkbox" class="checkbox checkbox-xs" /></label></div>
<div class="form-control"><label class="label cursor-pointer gap-2"><span class="label-text">Emergency</span><input v-model="CreateOilOrderForm.basicInfo.emergency" type="checkbox" class="checkbox checkbox-xs" /></label></div>
<div class="form-control"><label class="label cursor-pointer gap-2"><span class="label-text">Same Day</span><input v-model="CreateOilOrderForm.basicInfo.same_day" type="checkbox" class="checkbox checkbox-xs" /></label></div>
<!-- Edit Delivery Form (now in the left column) -->
<div class="bg-neutral rounded-lg p-4">
<form class="space-y-4" @submit.prevent="onSubmit">
<!-- Fill Checkbox (moved above Gallons Ordered) -->
<div class="form-control">
<label class="label cursor-pointer justify-start gap-4">
<span class="label-text font-bold">Fill</span>
<input v-model="CreateOilOrderForm.basicInfo.customer_asked_for_fill" type="checkbox" class="checkbox checkbox-sm" />
</label>
</div>
<!-- Gallons Ordered -->
<div>
<label class="label"><span class="label-text font-bold">Gallons Ordered</span></label>
<input v-model="CreateOilOrderForm.basicInfo.gallons_ordered" :disabled="CreateOilOrderForm.basicInfo.customer_asked_for_fill"
class="input input-bordered input-sm w-full max-w-xs" type="number" placeholder="# gallons" />
<div class="flex flex-wrap gap-2 mt-2">
<button v-for="amount in quickGallonAmounts" :key="amount" @click.prevent="setGallons(amount)" :class="['btn', 'btn-xs', selectedGallonsAmount == amount ? 'bg-blue-600 text-white border-blue-600' : 'btn-outline']">{{ amount }} gal</button>
</div>
<span v-if="v$.CreateOilOrderForm.basicInfo.gallons_ordered.$error" class="text-red-500 text-xs mt-1">
Required unless "Fill" is checked.
</span>
</div>
<!-- Payment Section -->
<div class="p-4 rounded-md space-y-2 border"
:class="{ 'border-red-500 bg-red-50/50': v$.isAnyPaymentMethodSelected.$error }">
<label class="label-text font-bold">Payment Method</label>
<div v-if="v$.isAnyPaymentMethodSelected.$error" class="text-red-600 text-sm font-medium">
Please select a payment method.
</div>
<div class="flex flex-wrap gap-x-6 gap-y-2">
<div v-if="userCards.length > 0" class="form-control">
<label class="label cursor-pointer gap-2">
<span class="label-text">Credit</span>
<input v-model="CreateOilOrderForm.basicInfo.credit" type="checkbox" class="checkbox checkbox-xs" />
</label>
</div>
<div class="form-control">
<label class="label cursor-pointer gap-2">
<span class="label-text">Cash</span>
<input v-model="CreateOilOrderForm.basicInfo.cash" type="checkbox" class="checkbox checkbox-xs" />
</label>
</div>
<div class="form-control">
<label class="label cursor-pointer gap-2">
<span class="label-text">Check</span>
<input v-model="CreateOilOrderForm.basicInfo.check" type="checkbox" class="checkbox checkbox-xs" />
</label>
</div>
<div class="form-control">
<label class="label cursor-pointer gap-2">
<span class="label-text">Other</span>
<input v-model="CreateOilOrderForm.basicInfo.other" type="checkbox" class="checkbox checkbox-xs" />
</label>
</div>
</div>
<div v-if="userCards.length > 0 && CreateOilOrderForm.basicInfo.credit">
<label class="label"><span class="label-text">Select Card</span></label>
<div class="flex flex-wrap gap-2 mt-2">
<button v-for="card in userCards" :key="card.id" @click.prevent="selectCreditCard(card.id)" :class="['btn', 'btn-xs', CreateOilOrderForm.basicInfo.credit_card_id === card.id ? 'bg-blue-600 text-white border-blue-600' : 'btn-outline']">{{ card.type_of_card }} - ****{{ card.last_four_digits }}</button>
</div>
<span v-if="v$.CreateOilOrderForm.basicInfo.credit_card_id.$error" class="text-red-500 text-xs mt-1">
You must select a credit card when choosing CC option.
</span>
</div>
<div v-if="userCards.length === 0" class="text-sm text-warning">No cards on file for credit payment.</div>
</div>
<!-- Date Fields -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label class="label"><span class="label-text font-bold">Order Created Date</span></label>
<input v-model="CreateOilOrderForm.basicInfo.created_delivery_date" type="date" class="input input-bordered input-sm w-full" />
</div>
<div>
<label class="label"><span class="label-text font-bold">Expected Delivery Date</span></label>
<input v-model="CreateOilOrderForm.basicInfo.expected_delivery_date" type="date" class="input input-bordered input-sm w-full" />
<div class="flex flex-wrap gap-2 mt-2">
<button @click.prevent="setDeliveryDate(0)" :class="['btn', 'btn-xs', isDeliveryDateSelected(0) ? 'bg-blue-600 text-white border-blue-600' : 'btn-outline']">Today</button>
<button @click.prevent="setDeliveryDate(1)" :class="['btn', 'btn-xs', isDeliveryDateSelected(1) ? 'bg-blue-600 text-white border-blue-600' : 'btn-outline']">Tomorrow</button>
<button @click.prevent="setDeliveryDate(2)" :class="['btn', 'btn-xs', isDeliveryDateSelected(2) ? 'bg-blue-600 text-white border-blue-600' : 'btn-outline']">In 2 Days</button>
<button @click.prevent="setDeliveryDate(3)" :class="['btn', 'btn-xs', isDeliveryDateSelected(3) ? 'bg-blue-600 text-white border-blue-600' : 'btn-outline']">In 3 Days</button>
</div>
<span v-if="v$.CreateOilOrderForm.basicInfo.expected_delivery_date.$error" class="text-red-500 text-xs mt-1">Date is required.</span>
</div>
</div>
<!-- Optional Section Divider -->
<div class="flex items-center my-4">
<div class="flex-grow h-px bg-gray-300"></div>
<span class="px-3 text-gray-500 text-sm font-medium">Optional</span>
<div class="flex-grow h-px bg-gray-300"></div>
</div>
<div>
<label class="label"><span class="label-text font-bold">Apply Promotion</span></label>
<select class="select select-bordered select-sm w-full max-w-xs" v-model="CreateOilOrderForm.basicInfo.promo_id">
<option :value="0">No Promotion</option>
<option v-for="promo in promos" :key="promo.id" :value="promo.id">
{{ promo.name_of_promotion }} (${{ promo.money_off_delivery }} off)
</option>
</select>
</div>
<!-- Fees & Options -->
<div class="p-4 rounded-md space-y-2">
<label class="label-text font-bold">Fees & Options</label>
<div class="flex flex-wrap gap-x-6 gap-y-2">
<div class="form-control"><label class="label cursor-pointer gap-2"><span class="label-text">Emergency</span><input v-model="CreateOilOrderForm.basicInfo.emergency" type="checkbox" class="checkbox checkbox-xs" /></label></div>
<div class="form-control"><label class="label cursor-pointer gap-2"><span class="label-text">Prime</span><input v-model="CreateOilOrderForm.basicInfo.prime" type="checkbox" class="checkbox checkbox-xs" /></label></div>
<div class="form-control"><label class="label cursor-pointer gap-2"><span class="label-text">Same Day</span><input v-model="CreateOilOrderForm.basicInfo.same_day" type="checkbox" class="checkbox checkbox-xs" /></label></div>
</div>
</div>
<!-- Notes -->
<div>
<label class="label"><span class="label-text font-bold">Dispatcher Notes</span></label>
<textarea v-model="CreateOilOrderForm.basicInfo.dispatcher_notes_taken" rows="3" class="textarea textarea-bordered w-full" placeholder="Notes for the driver..."></textarea>
</div>
<button type="submit" class="btn btn-primary btn-sm">Save Changes</button>
</form>
</div>
</div>
<!-- RIGHT COLUMN: Reference Information & Secondary Actions -->
<div class="space-y-4">
<!-- Pricing Chart Card -->
<div class="bg-neutral rounded-lg p-5">
<h3 class="text-xl font-bold mb-4">Today's Price Per Gallon</h3>
<div class="overflow-x-auto">
<table class="table table-sm w-full">
<thead>
<tr>
<th>Gallons</th>
<th>Total Price</th>
</tr>
</thead>
<tbody>
<tr v-for="tier in pricingTiers" :key="tier.gallons" :class="isPricingTierSelected(tier.gallons) ? 'bg-blue-600 text-white hover:bg-blue-600' : 'hover'">
<td>{{ tier.gallons }}</td>
<td>${{ Number(tier.price).toFixed(2) }}</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Payment Type Radio Group -->
<div class="p-4 border rounded-md space-y-3">
<label class="label-text font-bold">Payment Method</label>
<div class="flex flex-wrap gap-x-6 gap-y-2">
<div class="form-control"><label class="label cursor-pointer gap-2"><span class="label-text">Cash</span><input type="radio" v-model="CreateOilOrderForm.basicInfo.payment_type" :value="0" class="radio radio-xs" /></label></div>
<div v-if="userCards.length > 0" class="form-control"><label class="label cursor-pointer gap-2"><span class="label-text">Card</span><input type="radio" v-model="CreateOilOrderForm.basicInfo.payment_type" :value="1" class="radio radio-xs" /></label></div>
<div class="form-control"><label class="label cursor-pointer gap-2"><span class="label-text">Check</span><input type="radio" v-model="CreateOilOrderForm.basicInfo.payment_type" :value="3" class="radio radio-xs" /></label></div>
<div class="form-control"><label class="label cursor-pointer gap-2"><span class="label-text">Other</span><input type="radio" v-model="CreateOilOrderForm.basicInfo.payment_type" :value="4" class="radio radio-xs" /></label></div>
<!-- Credit Cards Display -->
<div v-if="customer && customer.id" class="bg-neutral rounded-lg p-5">
<div class="flex justify-between items-center">
<h2 class="text-xl font-bold">Credit Cards</h2>
<router-link :to="{ name: 'cardadd', params: { id: customer.id } }">
<button class="btn btn-xs btn-outline btn-success">Add New</button>
</router-link>
</div>
<!-- Customer Card Selection -->
<div v-if="userCards.length > 0 && CreateOilOrderForm.basicInfo.payment_type === 1">
<label class="label"><span class="label-text">Select Card</span></label>
<select v-model="CreateOilOrderForm.basicInfo.credit_card_id" class="select select-bordered select-sm w-full max-w-xs">
<option disabled :value="0">Select a card</option>
<option v-for="card in userCards" :key="card.id" :value="card.id">
{{ card.type_of_card }} {{ card.card_number }}
</option>
</select>
<div class="mt-2 text-sm" v-if="userCards.length === 0">
<p class="text-warning font-semibold">No cards on file.</p>
</div>
<div class="mt-4 space-y-3">
<div v-for="card in userCards" :key="card.id" class="p-3 rounded-lg border" :class="card.main_card ? 'bg-primary/10 border-primary' : 'bg-base-200 border-base-300'">
<div class="flex justify-between items-start">
<div>
<div class="font-bold text-sm">{{ card.name_on_card }}</div>
<div class="text-xs opacity-70">{{ card.type_of_card }}</div>
</div>
<div v-if="card.main_card" class="badge badge-primary badge-sm">Primary</div>
</div>
<div class="mt-2 text-sm font-mono tracking-wider">
<p>{{ card.card_number }}</p>
<p>Exp: <span v-if="card.expiration_month < 10">0</span>{{ card.expiration_month }} / {{ card.expiration_year }}</p>
<p>CVV: {{ card.security_number }}</p>
</div>
<div class="flex justify-end gap-2 mt-2">
<a @click.prevent="editCard(card.id)" class="link link-hover text-xs">Edit</a>
<a @click.prevent="removeCard(card.id)" class="link link-hover text-error text-xs">Remove</a>
</div>
</div>
</div>
</div>
<!-- Delivery Status & Driver -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label class="label"><span class="label-text font-bold">Delivery Status</span></label>
<select v-model="CreateOilOrderForm.basicInfo.delivery_status" class="select select-bordered select-sm w-full">
<option v-for="status in deliveryStatus" :key="status.value" :value="status.value">
{{ status.text }}
</option>
</select>
</div>
<!-- <div>
<label class="label"><span class="label-text font-bold">Assigned Driver</span></label>
<select v-model="CreateOilOrderForm.basicInfo.driver_employee_id" class="select select-bordered select-sm w-full">
<option disabled :value="0">Select a driver</option>
<option v-for="driver in truckDriversList" :key="driver.id" :value="driver.id">
{{ driver.employee_first_name }} {{ driver.employee_last_name }}
</option>
</select>
</div> -->
</div>
<!-- Dispatcher Notes -->
<div>
<label class="label"><span class="label-text font-bold">Dispatcher Notes</span></label>
<textarea v-model="CreateOilOrderForm.basicInfo.dispatcher_notes_taken" rows="3" class="textarea textarea-bordered w-full"></textarea>
</div>
<!-- Submit Button -->
<div class="pt-2">
<button type="submit" class="btn btn-primary btn-sm">Save Changes</button>
</div>
</form>
</div>
</div>
</div>
</div>
@@ -158,13 +248,14 @@ import Header from '../../layouts/headers/headerauth.vue'
import SideBar from '../../layouts/sidebar/sidebar.vue'
import Footer from '../../layouts/footers/footer.vue'
import useValidate from "@vuelidate/core";
import { required, minLength } from "@vuelidate/validators";
import { required, minLength, requiredIf } from "@vuelidate/validators";
import { notify } from "@kyvg/vue3-notification";
// Interfaces to describe the shape of your data
interface Customer { account_number: string; id: number; customer_first_name: string; customer_last_name: string; customer_address: string; customer_apt: string; customer_town: string; customer_state: number; customer_zip: string; customer_phone_number: string; }
interface DeliveryOrder { id: string; customer_id: number; payment_type: number; payment_card_id: number; gallons_ordered: number; customer_asked_for_fill: boolean | number; delivery_status: number; driver_employee_id: number; promo_id: number; expected_delivery_date: string; when_ordered: string; prime: boolean | number; emergency: boolean | number; same_day: boolean | number; dispatcher_notes: string; }
interface UserCard { id: number; type_of_card: string; card_number: string; name_on_card: string; expiration_month: string; expiration_year: string; last_four_digits: string; security_number: string; }
interface UserCard { id: number; type_of_card: string; card_number: string; name_on_card: string; expiration_month: number; expiration_year: number; last_four_digits: string; security_number: string; main_card: boolean; }
interface PricingTier { gallons: number; price: string | number; }
const STATE_MAP: { [key: number]: string } = { 0: 'Massachusetts', 1: 'Rhode Island', 2: 'New Hampshire', 3: 'Maine', 4: 'Vermont', 5: 'Connecticut', 6: 'New York' };
@@ -174,10 +265,12 @@ export default defineComponent({
data() {
return {
v$: useValidate(),
quickGallonAmounts: [100, 125, 150, 175, 200, 220],
deliveryStatus: [] as any[],
truckDriversList: [] as any[],
userCards: [] as UserCard[],
promos: [] as any[],
pricingTiers: [] as PricingTier[],
customer: {} as Customer,
deliveryOrder: {} as DeliveryOrder,
userCard: {} as UserCard,
@@ -197,6 +290,10 @@ export default defineComponent({
promo_id: 0,
payment_type: 0,
credit_card_id: 0,
credit: false,
cash: false,
check: false,
other: false,
},
},
}
@@ -206,11 +303,31 @@ export default defineComponent({
return {
CreateOilOrderForm: {
basicInfo: {
gallons_ordered: { required, minLength: minLength(1) },
// RESTORED: Add validation for expected date
gallons_ordered: {
required: requiredIf(function(this: any) {
return !this.CreateOilOrderForm.basicInfo.customer_asked_for_fill;
}),
minValue: function(this: any, value: string) {
if (this.CreateOilOrderForm.basicInfo.customer_asked_for_fill) return true;
if (!value) return true; // if empty, required will catch it
const num = parseInt(value, 10);
return num >= 1;
}
},
expected_delivery_date: { required },
credit_card_id: {
creditCardRequired: function(this: any, value: number) {
if (this.CreateOilOrderForm.basicInfo.credit) {
return value !== 0;
}
return true;
}
},
},
},
isAnyPaymentMethodSelected: {
mustBeTrue: (value: boolean) => value === true,
},
};
},
@@ -221,6 +338,25 @@ export default defineComponent({
}
return '';
},
isPricingTierSelected() {
return (tierGallons: number | string): boolean => {
if (!this.CreateOilOrderForm.basicInfo.gallons_ordered) return false;
const selectedGallons = Number(this.CreateOilOrderForm.basicInfo.gallons_ordered);
if (isNaN(selectedGallons)) return false;
const tierNum = Number(tierGallons);
if (isNaN(tierNum)) return false;
return selectedGallons === tierNum;
};
},
isAnyPaymentMethodSelected(): boolean {
return !!(this.CreateOilOrderForm.basicInfo?.credit || this.CreateOilOrderForm.basicInfo?.cash || this.CreateOilOrderForm.basicInfo?.check || this.CreateOilOrderForm.basicInfo?.other);
},
selectedGallonsAmount(): number {
const value = this.CreateOilOrderForm.basicInfo.gallons_ordered ?? '';
return Number(value);
}
},
mounted() {
@@ -233,6 +369,7 @@ export default defineComponent({
this.getPromos();
this.getDriversList();
this.getDeliveryStatusList();
this.getPricingTiers();
this.getDeliveryOrder(deliveryId);
},
@@ -244,6 +381,7 @@ export default defineComponent({
this.deliveryOrder = response.data.delivery; // <-- THIS IS THE CRITICAL CHANGE
// RESTORED: Populate all form fields from the API response
const paymentType = this.deliveryOrder.payment_type;
this.CreateOilOrderForm.basicInfo = {
gallons_ordered: String(this.deliveryOrder.gallons_ordered),
customer_asked_for_fill: !!this.deliveryOrder.customer_asked_for_fill,
@@ -256,8 +394,13 @@ export default defineComponent({
driver_employee_id: this.deliveryOrder.driver_employee_id || 0,
dispatcher_notes_taken: this.deliveryOrder.dispatcher_notes,
promo_id: this.deliveryOrder.promo_id || 0,
payment_type: this.deliveryOrder.payment_type,
payment_type: paymentType,
credit_card_id: this.deliveryOrder.payment_card_id || 0,
// Set the correct payment method checkbox based on payment_type
credit: paymentType === 1,
cash: paymentType === 0,
check: paymentType === 3,
other: paymentType === 4,
};
this.getCustomer(this.deliveryOrder.customer_id);
@@ -304,23 +447,79 @@ export default defineComponent({
axios.get(`${import.meta.env.VITE_BASE_URL}/query/deliverystatus`, { withCredentials: true })
.then((response: any) => { this.deliveryStatus = response.data; });
},
getPricingTiers() {
let path = import.meta.env.VITE_BASE_URL + "/info/price/oil/tiers";
axios({ method: "get", url: path, withCredentials: true, headers: authHeader() })
.then((response: any) => {
const tiersObject = response.data;
this.pricingTiers = Object.entries(tiersObject).map(([gallons, price]) => ({
gallons: parseInt(gallons, 10),
price: price as string | number,
}));
})
.catch(() => {
notify({ title: "Pricing Error", text: "Could not retrieve today's pricing.", type: "error" });
});
},
editCard(card_id: number) {
this.$router.push({ name: "cardedit", params: { id: card_id } });
},
removeCard(card_id: number) {
if (window.confirm("Are you sure you want to remove this card?")) {
let path = `${import.meta.env.VITE_BASE_URL}/payment/card/remove/${card_id}`;
axios.delete(path, { headers: authHeader() })
.then(() => {
notify({ title: "Card Removed", type: "success" });
this.getPaymentCards(this.customer.id);
})
.catch(() => {
notify({ title: "Error", text: "Could not remove card.", type: "error" });
});
}
},
selectCreditCard(cardId: number) {
this.CreateOilOrderForm.basicInfo.credit_card_id = cardId;
},
setGallons(amount: number) {
this.CreateOilOrderForm.basicInfo.gallons_ordered = String(amount);
this.CreateOilOrderForm.basicInfo.customer_asked_for_fill = false;
},
setDeliveryDate(days: number) {
const date = new Date();
date.setDate(date.getDate() + days);
this.CreateOilOrderForm.basicInfo.expected_delivery_date = date.toISOString().split('T')[0];
},
isDeliveryDateSelected(days: number): boolean {
const date = new Date();
date.setDate(date.getDate() + days);
return this.CreateOilOrderForm.basicInfo.expected_delivery_date === date.toISOString().split('T')[0];
},
async onSubmit() {
const isFormValid = await this.v$.CreateOilOrderForm.$validate();
const isPaymentValid = await this.v$.isAnyPaymentMethodSelected.$validate();
onSubmit() {
this.v$.$validate();
if (this.v$.$error) {
notify({ type: 'error', title: 'Validation Error', text: 'Please check the form fields.' });
if (!isFormValid || !isPaymentValid) {
notify({ title: "Form Incomplete", text: "Please review the fields marked in red.", type: "warn" });
return;
}
const formInfo = this.CreateOilOrderForm.basicInfo;
// Convert checkboxes back to payment_type number for API
let paymentType = 0; // Default to cash
if (formInfo.credit) paymentType = 1;
else if (formInfo.cash) paymentType = 0;
else if (formInfo.other) paymentType = 4;
else if (formInfo.check) paymentType = 3;
// The payload now automatically includes all the restored fields
const payload = {
...formInfo,
cash: formInfo.payment_type === 0,
credit: formInfo.payment_type === 1,
check: formInfo.payment_type === 3,
other: formInfo.payment_type === 4,
credit_card_id: formInfo.payment_type === 1 ? formInfo.credit_card_id : null,
payment_type: paymentType,
cash: formInfo.cash,
credit: formInfo.credit,
check: formInfo.check,
other: formInfo.other,
credit_card_id: formInfo.credit ? formInfo.credit_card_id : null,
};
axios.post(`${import.meta.env.VITE_BASE_URL}/delivery/edit/${this.deliveryOrder.id}`, payload, { withCredentials: true, headers: authHeader() })

7
src/pages/delivery/home.vue
View File

@@ -20,13 +20,10 @@
<!-- Today's Stats Card -->
<div class="stats stats-vertical sm:stats-horizontal shadow bg-base-100 text-center text-sm">
<div class="stat p-3">
<div class="stat-title text-xs">Today's Deliveries</div>
<div class="stat-title text-xs"> Deliveries</div>
<div class="stat-value text-lg">{{ delivery_count }}</div>
</div>
<div class="stat p-3">
<div class="stat-title text-xs">Completed</div>
<div class="stat-value text-lg">{{ delivery_count_delivered }} / {{ delivery_count }}</div>
</div>
</div>
</div>

19
src/pages/delivery/update_tickets/finalize_ticket.vue
View File

@@ -538,26 +538,11 @@ async onSubmit() {
// If a valid, approved, pre-auth transaction is found...
if (transactionResponse.data && transactionResponse.data.transaction_type === 1 && transactionResponse.data.status === 0) {
// ...redirect to the capture page. The delivery is already updated.
const gallons = this.FinalizeOilOrderForm.gallons_delivered || '0';
const pricePerGallon = parseFloat(this.deliveryOrder.customer_price);
let finalAmount = parseFloat(gallons) * pricePerGallon;
if (this.deliveryOrder.prime == 1) {
finalAmount += parseFloat(this.pricing.price_prime.toString()) || 0;
}
if (this.deliveryOrder.same_day == 1) {
finalAmount += parseFloat(this.pricing.price_same_day.toString()) || 0;
}
this.$router.push({
name: 'captureAuthorize',
params: { id: this.$route.params.id },
query: {
gallons: gallons,
amount: finalAmount.toFixed(2).toString()
}
params: { id: this.$route.params.id }
});
} else {

140
src/pages/delivery/view.vue
View File

@@ -130,8 +130,8 @@
</div>
<!-- Pricing & Fees -->
<div class="p-4 border rounded-md space-y-2">
<label class="label-text font-bold">Estimated Total</label>
<div class="p-4 border rounded-md space-y-2">
<label class="label-text font-bold">Estimated Total</label>
<!-- Finalized View -->
<div v-if="deliveryOrder.promo_id !== null">
<div>Before Discount: ${{ total_amount }}</div>
@@ -144,6 +144,35 @@
<div v-if="deliveryOrder.same_day == 1" class="text-sm text-gray-400">+ ${{ pricing.price_same_day }} Same Day Fee</div>
</div>
<!-- Transaction Summary -->
<div v-if="transaction && transaction.auth_net_transaction_id" class="p-4 border rounded-md">
<label class="label-text font-bold">Transaction Summary</label>
<div class="mt-2 space-y-2">
<div class="flex justify-between">
<span>Transaction ID:</span>
<span class="font-mono">{{ transaction.auth_net_transaction_id }}</span>
</div>
<div class="flex justify-between">
<span>Pre-Auth Amount:</span>
<span>${{ transaction.pre_auth_amount || '0.00' }}</span>
</div>
<div class="flex justify-between">
<span>Charge Amount:</span>
<span>${{ transaction.charge_amount || '0.00' }}</span>
</div>
<div class="flex justify-between">
<span>Date:</span>
<span>{{ format_date(transaction.transaction_date) }}</span>
</div>
<div class="flex justify-between">
<span>Status:</span>
<span :class="transaction.status === 0 ? 'text-success' : 'text-error'">
{{ transaction.status === 0 ? 'Approved' : 'Declined' }}
</span>
</div>
</div>
</div>
<!-- Delivery Summary -->
<div v-if="deliveryOrder.gallons_delivered && parseFloat(deliveryOrder.gallons_delivered) > 0" class="p-4 border rounded-md">
<label class="label-text font-bold">Delivery Summary FINAL</label>
@@ -193,50 +222,52 @@
</div>
<div class="space-y-4">
<!--
START: Replaced Payment Section
-->
<div class="p-4 border rounded-md">
<label class="label-text font-bold">Payment Method</label>
<div class="mt-1">
<div class="text-lg">
<span v-if="deliveryOrder.payment_type == 0">Cash</span>
<span v-else-if="deliveryOrder.payment_type == 1">Credit Card</span>
<span v-else-if="deliveryOrder.payment_type == 2">Credit Card & Cash</span>
<span v-else-if="deliveryOrder.payment_type == 3">Check</span>
<span v-else-if="deliveryOrder.payment_type == 4">Other</span>
<span v-else>Not Specified</span>
</div>
<!--
This is the new, styled card display.
It uses the same logic but applies the better CSS classes.
-->
<div v-if="userCardfound && [1, 2, 3].includes(deliveryOrder.payment_type)"
class="p-4 rounded-lg border mt-2"
:class="userCard.main_card ? 'bg-primary/10 border-primary' : 'bg-base-200 border-base-300'">
<div class="flex justify-between items-start">
<div>
<div class="font-bold">{{ userCard.name_on_card }}</div>
<div class="text-xs opacity-70">{{ userCard.type_of_card }}</div>
<!--
START: Replaced Payment Section
-->
<div class="p-4 border rounded-md">
<label class="label-text font-bold">Payment Method</label>
<div class="mt-1">
<div class="text-lg">
<span v-if="deliveryOrder.payment_type == 0">Cash</span>
<span v-else-if="deliveryOrder.payment_type == 1">Credit Card</span>
<span v-else-if="deliveryOrder.payment_type == 2">Credit Card & Cash</span>
<span v-else-if="deliveryOrder.payment_type == 3">Check</span>
<span v-else-if="deliveryOrder.payment_type == 4">Other</span>
<span v-else>Not Specified</span>
</div>
<!--
This is the new, styled card display.
It uses the same logic but applies the better CSS classes.
-->
<div v-if="userCardfound && [1, 2, 3].includes(deliveryOrder.payment_type)"
class="p-4 rounded-lg border mt-2"
:class="userCard.main_card ? 'bg-primary/10 border-primary' : 'bg-base-200 border-base-300'">
<div class="flex justify-between items-start">
<div>
<div class="font-bold">{{ userCard.name_on_card }}</div>
<div class="text-xs opacity-70">{{ userCard.type_of_card }}</div>
</div>
<div v-if="userCard.main_card" class="badge badge-primary badge-sm">Primary</div>
</div>
<div class="mt-3 text-sm font-mono tracking-wider">
<!-- Using last_four_digits is more secure and looks cleaner -->
<p>{{ userCard.card_number }}</p>
<p>
Exp:
<!-- Adds a leading zero for single-digit months -->
<span v-if="Number(userCard.expiration_month) < 10">0</span>{{ userCard.expiration_month }} / {{ userCard.expiration_year }}
</p>
<p>CVV: {{ userCard.security_number }}</p>
</div>
</div>
</div>
</div>
<div v-if="userCard.main_card" class="badge badge-primary badge-sm">Primary</div>
</div>
<div class="mt-3 text-sm font-mono tracking-wider">
<!-- Using last_four_digits is more secure and looks cleaner -->
<p>{{ userCard.card_number }}</p>
<p>
Exp:
<!-- Adds a leading zero for single-digit months -->
<span v-if="Number(userCard.expiration_month) < 10">0</span>{{ userCard.expiration_month }} / {{ userCard.expiration_year }}
</p>
<p>CVV: {{ userCard.security_number }}</p>
</div>
</div>
</div>
</div>
<!-- Notes & Options -->
<div class="p-4 border rounded-md">
@@ -379,6 +410,7 @@ export default defineComponent({
driver_last_name: '',
promo_id: 0,
},
transaction: null as any,
}
},
@@ -396,7 +428,8 @@ export default defineComponent({
this.getOilOrder(this.$route.params.id);
this.getOilOrderMoney(this.$route.params.id);
this.sumdelivery(this.$route.params.id);
this.getOilPricing()
this.getOilPricing();
this.getTransaction(this.$route.params.id);
},
methods: {
@@ -647,9 +680,20 @@ getOilOrder(delivery_id: any) {
return total.toFixed(2);
},
getTransaction(delivery_id: any) {
const path = `${import.meta.env.VITE_AUTHORIZE_URL}/api/transaction/delivery/${delivery_id}`;
axios.get(path, { withCredentials: true, headers: authHeader() })
.then((response: any) => {
console.log("Transaction API response:", response.data); // Debug log to see actual response structure
this.transaction = response.data;
})
.catch((error: any) => {
console.error("Error fetching transaction:", error);
this.transaction = null;
});
},
},
})
</script>