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

tons fixes

Browse Source
This commit is contained in:
Edwin Eames
2025-08-25 17:58:30 -04:00
parent 4bcff598e6
commit adc1606312
15 changed files with 800 additions and 237 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.env
View File

@@ -1,4 +0,0 @@
# VITE_BASE_URL="http://localhost:9511"
# VITE_MONEY_URL="http://localhost:9513"
# VITE_AUTO_URL="http://localhost:9514"
# VITE_COMPANY_ID = 1

16
package-lock.json generated
View File

@@ -29,6 +29,7 @@
"vuelidate": "^0.7.7"
},
"devDependencies": {
"@types/leaflet": "^1.9.20",
"@vitejs/plugin-vue": "^4.5.2",
"@vue-leaflet/vue-leaflet": "^0.10.1",
"autoprefixer": "^10.4.16",
@@ -799,6 +800,21 @@
"integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
"dev": true
},
"node_modules/@types/geojson": {
"version": "7946.0.16",
"resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.16.tgz",
"integrity": "sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==",
"dev": true
},
"node_modules/@types/leaflet": {
"version": "1.9.20",
"resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.20.tgz",
"integrity": "sha512-rooalPMlk61LCaLOvBF2VIf9M47HgMQqi5xQ9QRi7c8PkdIe0WrIi5IxXUXQjAdL0c+vcQ01mYWbthzmp9GHWw==",
"dev": true,
"dependencies": {
"@types/geojson": "*"
}
},
"node_modules/@types/web-bluetooth": {
"version": "0.0.20",
"resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",

1
package.json
View File

@@ -30,6 +30,7 @@
"vuelidate": "^0.7.7"
},
"devDependencies": {
"@types/leaflet": "^1.9.20",
"@vitejs/plugin-vue": "^4.5.2",
"@vue-leaflet/vue-leaflet": "^0.10.1",
"autoprefixer": "^10.4.16",

174
src/pages/authorize/PaymentForm.vue Normal file
View File

@@ -0,0 +1,174 @@
<!-- <template>
<div class="container mx-auto p-4">
<h1 class="text-2xl font-bold mb-4">HVAC Payment</h1>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div>
<h2 class="text-xl font-semibold mb-2">Direct Charge</h2>
<form @submit.prevent="submitDirectCharge">
<div class="form-control">
<label class="label">
<span class="label-text">Card Number</span>
</label>
<input type="text" v-model="directCharge.cardNumber" class="input input-bordered" required />
</div>
<div class="form-control">
<label class="label">
<span class="label-text">Expiration Date (MM/YY)</span>
</label>
<input type="text" v-model="directCharge.expirationDate" class="input input-bordered" required />
</div>
<div class="form-control">
<label class="label">
<span class="label-text">CVV</span>
</label>
<input type="text" v-model="directCharge.cvv" class="input input-bordered" required />
</div>
<div class="form-control">
<label class="label">
<span class="label-text">Amount</span>
</label>
<input type="number" v-model="directCharge.amount" class="input input-bordered" required />
</div>
<div class="form-control mt-6">
<button type="submit" class="btn btn-primary">Charge</button>
</div>
</form>
</div>
<div>
<h2 class="text-xl font-semibold mb-2">Authorize and Capture</h2>
<form @submit.prevent="submitAuthorization">
<div class="form-control">
<label class="label">
<span class="label-text">Card Number</span>
</label>
<input type="text" v-model="authorization.cardNumber" class="input input-bordered" required />
</div>
<div class="form-control">
<label class="label">
<span class="label-text">Expiration Date (MM/YY)</span>
</label>
<input type="text" v-model="authorization.expirationDate" class="input input-bordered" required />
</div>
<div class="form-control">
<label class="label">
<span class="label-text">CVV</span>
</label>
<input type="text" v-model="authorization.cvv" class="input input-bordered" required />
</div>
<div class="form-control">
<label class="label">
<span class="label-text">Amount</span>
</label>
<input type="number" v-model="authorization.amount" class="input input-bordered" required />
</div>
<div class="form-control mt-6">
<button type="submit" class="btn btn-secondary">Authorize</button>
</div>
</form>
<div v-if="authorizedTransactionId" class="mt-8">
<h3 class="text-lg font-semibold mb-2">Capture Authorized Amount</h3>
<p>Authorized Transaction ID: {{ authorizedTransactionId }}</p>
<form @submit.prevent="submitCapture">
<div class="form-control">
<label class="label">
<span class="label-text">Capture Amount</span>
</label>
<input type="number" v-model="capture.amount" class="input input-bordered" required />
</div>
<div class="form-control mt-6">
<button type="submit" class="btn btn-accent">Capture</button>
</div>
</form>
</div>
</div>
</div>
<div v-if="transactionResult" class="mt-8 p-4 rounded-lg" :class="transactionResult.status === 'approved' || transactionResult.status === 'authorized' || transactionResult.status === 'captured' ? 'bg-green-200' : 'bg-red-200'">
<h3 class="font-bold">Transaction Result</h3>
<p>Status: {{ transactionResult.status }}</p>
<p v-if="transactionResult.auth_net_transaction_id">Transaction ID: {{ transactionResult.auth_net_transaction_id }}</p>
</div>
</div>
</template>
<script>
import axios from 'axios';
const API_URL = 'http://localhost:8000/api'; // Your FastAPI backend URL
export default {
data() {
return {
directCharge: {
cardNumber: '',
expirationDate: '',
cvv: '',
amount: 0,
},
authorization: {
cardNumber: '',
expirationDate: '',
cvv: '',
amount: 0,
},
capture: {
amount: 0,
},
authorizedTransactionId: null,
transactionResult: null,
customerId: 1 // Assuming a customer with ID 1 exists for this example
};
},
methods: {
async submitDirectCharge() {
try {
const response = await axios.post(`${API_URL}/charge/?customer_id=${this.customerId}`, {
card_number: this.directCharge.cardNumber,
expiration_date: this.directCharge.expirationDate,
cvv: this.directCharge.cvv,
amount: this.directCharge.amount,
transaction_type: 'charge'
});
this.transactionResult = response.data;
} catch (error) {
console.error(error);
this.transactionResult = { status: 'Error processing transaction' };
}
},
async submitAuthorization() {
try {
const response = await axios.post(`${API_URL}/authorize/?customer_id=${this.customerId}`, {
card_number: this.authorization.cardNumber,
expiration_date: this.authorization.expirationDate,
cvv: this.authorization.cvv,
amount: this.authorization.amount,
transaction_type: 'auth'
});
this.transactionResult = response.data;
if (response.data.status === 'authorized') {
this.authorizedTransactionId = response.data.auth_net_transaction_id;
this.capture.amount = this.authorization.amount; // Pre-fill capture amount
}
} catch (error) {
console.error(error);
this.transactionResult = { status: 'Error processing authorization' };
}
},
async submitCapture() {
try {
const response = await axios.post(`${API_URL}/capture/`, {
amount: this.capture.amount,
auth_net_transaction_id: this.authorizedTransactionId
});
this.transactionResult = response.data;
} catch (error) {
console.error(error);
this.transactionResult = { status: 'Error processing capture' };
}
},
},
};
</script> -->

4
src/pages/card/addcard.vue
View File

@@ -79,13 +79,15 @@
<label class="block text-white text-sm font-bold mb-2">Expiration Year</label>
<select v-model="CreateCardForm.basicInfo.expiration_year"
class="input input-bordered input-sm w-full max-w-xs" id="Month">
<option>2024</option>
<option>2025</option>
<option>2026</option>
<option>2027</option>
<option>2028</option>
<option>2029</option>
<option>2030</option>
<option>2031</option>
<option>2032</option>
</select>
<span v-if="v$.CreateCardForm.basicInfo.expiration_year.$error" class="text-red-600 text-center">

15
src/pages/card/editcard.vue
View File

@@ -91,13 +91,14 @@
class="input input-bordered input-sm w-full max-w-xs"
id="Month"
>
<option>2024</option>
<option>2025</option>
<option>2026</option>
<option>2027</option>
<option>2028</option>
<option>2029</option>
<option>2030</option>
<option>2025</option>
<option>2026</option>
<option>2027</option>
<option>2028</option>
<option>2029</option>
<option>2030</option>
<option>2031</option>
<option>2032</option>
</select>
<span v-if="v$.CreateCardForm.basicInfo.expiration_year.$error"
class="text-red-600 text-center">

266
src/pages/customer/profile/home.vue
View File

@@ -40,7 +40,7 @@
</div>
<div class="col-span-6 p-5">
<div class="grid grid-cols-12 ">
<div class="col-span-12 font-bold flex justify-evenly pb-5">
<div class="col-span-12 font-bold flex justify-evenly pb-5 flex-wrap gap-2">
<router-link :to="{ name: 'deliveryCreate', params: { id: customer.id } }"
class="btn-sm btn bg-orange-600 text-white">
@@ -53,6 +53,8 @@
Create Service Call
</router-link>
<router-link :to="{ name: 'customerEdit', params: { id: customer.id } }"
class="btn-sm btn btn-secondary">
Edit Customer
@@ -60,12 +62,12 @@
<div v-if="automatic_status === 0">
<button v-on:click="userAutomatic(customer.id)" class="btn-sm btn btn-secondary">
Become Automatic Customer
Become Auto
</button>
</div>
<div v-else>
<button v-on:click="userAutomatic(customer.id)" class="btn bg-green-600 text-black btn-sm">
Become Will Call Customer
Become Will Call
</button>
</div>
</div>
@@ -173,6 +175,7 @@
{{ customer.customer_phone_number }}
</div>
</div>
</div>
<div class="col-span-6">
@@ -290,6 +293,48 @@
</div>
</div>
<div class="col-span-12 ">
<hr class=" h-1 mx-auto my-4 bg-gray-800 border-0 rounded dark:bg-gray-400">
<div class="col-span-12 ">
<div class="grid grid-cols-12">
<div class="col-span-6 font-bold flex text-2xl">
Equipment Parts
</div>
<div class="col-span-6 font-bold flex justify-start">
<button @click="openPartsModal" class="btn-sm btn btn-secondary">Edit Parts</button>
</div>
<div v-if="currentParts" class="col-span-12 mt-4">
<div v-if="hasPartsData" class="grid grid-cols-12 gap-4">
<div v-if="currentParts.oil_filter" class="col-span-6">
<div class="font-bold">Oil Filter 1:</div>
<div>{{ currentParts.oil_filter }}</div>
</div>
<div v-if="currentParts.oil_filter_2" class="col-span-6">
<div class="font-bold">Oil Filter 2:</div>
<div>{{ currentParts.oil_filter_2 }}</div>
</div>
<div v-if="currentParts.oil_nozzle" class="col-span-6">
<div class="font-bold">Oil Nozzle 1:</div>
<div :style="{ color: getNozzleColor(currentParts.oil_nozzle), fontWeight: 'bold' }">{{ currentParts.oil_nozzle }}</div>
</div>
<div v-if="currentParts.oil_nozzle_2" class="col-span-6">
<div class="font-bold">Oil Nozzle 2:</div>
<div :style="{ color: getNozzleColor(currentParts.oil_nozzle_2), fontWeight: 'bold' }">{{ currentParts.oil_nozzle_2 }}</div>
</div>
</div>
<div v-else>
<p>No equipment parts information available.</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-span-12 ">
<hr class=" h-1 mx-auto my-4 bg-gray-800 border-0 rounded dark:bg-gray-400">
</div>
@@ -311,7 +356,7 @@
{{ credit_cards_count }} credit card(s) on file.
</div>
</div>
<div v-for="card in credit_cards" class="col-span-12 ">
<div v-for="card in credit_cards" :key="card.id" class="col-span-12 ">
<div class="flex flex-row ">
<div v-if="card.main_card" class="basis-1/2 p-2 ">
<div class="bg-neutral rounded-md border-2 ">
@@ -325,18 +370,8 @@
{{ card.card_number }}
</div>
<div class="flex p-1 pl-4">
<div v-if="card.expiration_month == 1">01</div>
<div v-if="card.expiration_month == 2">02</div>
<div v-if="card.expiration_month == 3">03</div>
<div v-if="card.expiration_month == 4">04</div>
<div v-if="card.expiration_month == 5">05</div>
<div v-if="card.expiration_month == 6">06</div>
<div v-if="card.expiration_month == 7">07</div>
<div v-if="card.expiration_month == 8">08</div>
<div v-if="card.expiration_month == 9">09</div>
<div v-if="card.expiration_month == 10">10</div>
<div v-if="card.expiration_month == 11">11</div>
<div v-if="card.expiration_month == 12">12</div>
<div v-if="card.expiration_month < 10">0{{ card.expiration_month }}</div>
<div v-else>{{ card.expiration_month }}</div>
<div class=" pl-1 pr-1">/ </div>
<div class=""> {{ card.expiration_year }} </div>
</div>
@@ -369,18 +404,8 @@
{{ card.card_number }}
</div>
<div class="flex p-1 pl-4">
<div v-if="card.expiration_month == 1">01</div>
<div v-if="card.expiration_month == 2">02</div>
<div v-if="card.expiration_month == 3">03</div>
<div v-if="card.expiration_month == 4">04</div>
<div v-if="card.expiration_month == 5">05</div>
<div v-if="card.expiration_month == 6">06</div>
<div v-if="card.expiration_month == 7">07</div>
<div v-if="card.expiration_month == 8">08</div>
<div v-if="card.expiration_month == 9">09</div>
<div v-if="card.expiration_month == 10">10</div>
<div v-if="card.expiration_month == 11">11</div>
<div v-if="card.expiration_month == 12">12</div>
<div v-if="card.expiration_month < 10">0{{ card.expiration_month }}</div>
<div v-else>{{ card.expiration_month }}</div>
<div class=" pl-1 pr-1">/ </div>
<div class=""> {{ card.expiration_year }} </div>
</div>
@@ -406,9 +431,6 @@
</div>
</div>
<!-- ====================================================== -->
<!-- ============== COMMENTS SECTION (FIXED LAYOUT) ============== -->
<!-- ====================================================== -->
<div class="col-span-6 px-4">
<div class="grid grid-cols-12">
<form class="rounded-md col-span-12" enctype="multipart/form-data" @submit.prevent="onSubmitSocial">
@@ -486,9 +508,6 @@
</div>
</div>
<!-- ====================================================== -->
<!-- ============== AUTOMATIC DELIVERIES (FIXED) ============== -->
<!-- ====================================================== -->
<div class="col-span-12 p-5">
<div class="grid grid-cols-12">
<div class="col-span-12 font-bold flex text-2xl mb-5">Automatic Deliveries</div>
@@ -522,9 +541,6 @@
</div>
</div>
<!-- ====================================================== -->
<!-- ============== ORDERS TABLE (FIXED) ============== -->
<!-- ====================================================== -->
<div class="col-span-12 p-5">
<div class="grid grid-cols-12">
<div class="col-span-12 font-bold flex text-2xl mb-5">Orders</div>
@@ -605,6 +621,14 @@
@save-changes="handleSaveChanges"
@delete-service="handleDeleteService"
/>
<PartsEditModal
v-if="isPartsModalOpen && currentParts"
:customer-id="customer.id"
:existing-parts="currentParts"
@close-modal="closePartsModal"
@save-parts="handleSaveParts"
/>
</template>
<script lang="ts">
@@ -617,9 +641,18 @@ import Footer from '../../../layouts/footers/footer.vue'
import PaginationComp from "../../../components/pagination.vue";
import { notify } from "@kyvg/vue3-notification";
import "leaflet/dist/leaflet.css";
import L from 'leaflet';
import iconUrl from 'leaflet/dist/images/marker-icon.png';
import shadowUrl from 'leaflet/dist/images/marker-shadow.png';
import { LMap, LTileLayer } from "@vue-leaflet/vue-leaflet";
import dayjs from 'dayjs';
import ServiceEditModal from '../../service/ServiceEditModal.vue';
import PartsEditModal from '../service/PartsEditModal.vue';
L.Icon.Default.mergeOptions({
iconUrl: iconUrl,
shadowUrl: shadowUrl,
});
interface ServiceCall {
id: number;
@@ -631,6 +664,15 @@ interface ServiceCall {
description: string;
}
interface ServiceParts {
id?: number;
customer_id: number;
oil_filter: string;
oil_filter_2: string;
oil_nozzle: string;
oil_nozzle_2: string;
}
export default defineComponent({
name: 'CustomerProfile',
components: {
@@ -640,12 +682,13 @@ export default defineComponent({
LMap,
LTileLayer,
ServiceEditModal,
PartsEditModal,
},
data() {
return {
zoom: 14,
token: null,
user: { user_id: 0, user_name: '', confirmed: '' },
user: null as { user_id: number; user_name: string; confirmed: string; } | null,
isTrue: true,
automatic_status: 0,
automatic_response: 0,
@@ -666,26 +709,62 @@ export default defineComponent({
delivery_options: { delivery_edgeNavigation: false, delivery_format: false, delivery_template: PaginationComp },
serviceCalls: [] as ServiceCall[],
selectedServiceForEdit: null as ServiceCall | null,
isPartsModalOpen: false,
currentParts: null as ServiceParts | null,
}
},
computed: {
hasPartsData() {
if (!this.currentParts) return false;
return !!(this.currentParts.oil_filter || this.currentParts.oil_filter_2 || this.currentParts.oil_nozzle || this.currentParts.oil_nozzle_2);
}
},
created() {
this.userStatus()
this.getCustomer(this.$route.params.id);
this.getCreditCards(this.$route.params.id)
this.getCreditCardsCount(this.$route.params.id)
this.getCustomerSocial(this.$route.params.id, 1)
},
mounted() {
this.getPage(this.delivery_page)
// getPage is now called from within getCustomer, so this can be removed if it's redundant
},
watch: {
$route() {
this.getCustomer(this.$route.params.id);
'$route.params.id'(newId) {
if (newId) {
this.getCustomer(newId);
}
},
},
methods: {
getPage: function (page: any) {
this.getCustomerDelivery(this.$route.params.id, page)
if (this.customer && this.customer.id) {
this.getCustomerDelivery(this.customer.id, page);
}
},
getCustomer(userid: any) {
if (!userid) return;
let path = import.meta.env.VITE_BASE_URL + '/customer/' + userid;
axios({
method: 'get',
url: path,
headers: authHeader(),
}).then((response: any) => {
this.customer = response.data;
// --- ALL DEPENDENT API CALLS ARE NOW CHAINED HERE ---
this.userStatus();
this.getCreditCards(this.customer.id); // Assuming this uses user_id
this.getCreditCardsCount(this.customer.id); // Assuming this uses user_id
this.getCustomerSocial(this.customer.id, 1);
this.getPage(this.delivery_page);
this.checktotalOil(this.customer.id);
this.getCustomerTank(this.customer.id);
this.userAutomaticStatus(this.customer.id);
this.getCustomerDescription(this.customer.id);
this.getCustomerStats(this.customer.id);
this.getCustomerLastDelivery(this.customer.id);
this.getServiceCalls(this.customer.id);
this.fetchCustomerParts(this.customer.id);
}).catch((error: any) => {
console.error("CRITICAL: Failed to fetch main customer data. Aborting other calls.", error);
});
},
userStatus() {
let path = import.meta.env.VITE_BASE_URL + '/auth/whoami';
@@ -694,13 +773,11 @@ export default defineComponent({
url: path,
withCredentials: true,
headers: authHeader(),
})
.then((response: any) => {
}).then((response: any) => {
if (response.data.ok) {
this.user = response.data.user;
}
})
.catch(() => { })
}).catch(() => { this.user = null });
},
userAutomaticStatus(userid: any) {
let path = import.meta.env.VITE_BASE_URL + '/customer/automatic/status/' + userid;
@@ -734,26 +811,17 @@ export default defineComponent({
this.$notify({ title: "Automatic Status", text: 'Customer is now Manual Customer', type: 'Warning' });
}
this.getCustomer(this.$route.params.id);
this.getCreditCards(this.$route.params.id)
this.getCreditCardsCount(this.$route.params.id)
})
},
getCustomer(userid: any) {
let path = import.meta.env.VITE_BASE_URL + '/customer/' + userid;
axios({
method: 'get',
url: path,
headers: authHeader(),
}).then((response: any) => {
this.customer = response.data
this.checktotalOil(this.customer.id)
this.getCustomerTank(this.customer.id)
this.userAutomaticStatus(this.customer.id);
this.getCustomerDescription(this.customer.id);
this.getCustomerStats(this.customer.id);
this.getCustomerLastDelivery(this.customer.id);
this.getServiceCalls(this.customer.id);
})
getNozzleColor(nozzleString: string): string {
if (!nozzleString || typeof nozzleString !== 'string') return '';
const firstChar = nozzleString.trim().toLowerCase().charAt(0);
switch (firstChar) {
case 'a': return '#EF4444';
case 'b': return '#3B82F6';
case 'w': return '#16a34a';
default: return 'inherit';
}
},
getCustomerLastDelivery(userid: any) {
let path = import.meta.env.VITE_BASE_URL + '/stats/user/lastdelivery/' + userid;
@@ -853,8 +921,8 @@ export default defineComponent({
url: path,
headers: authHeader(),
}).then(() => {
this.getCreditCards(this.$route.params.id)
this.getCreditCardsCount(this.$route.params.id)
this.getCreditCards(this.customer.user_id)
this.getCreditCardsCount(this.customer.user_id)
notify({ title: "Card Status", text: "Card Removed", type: "Success" });
})
},
@@ -912,10 +980,15 @@ export default defineComponent({
}
})
},
onSubmitSocial() {
let payload = { comment: this.CreateSocialForm.basicInfo.comment, poster_employee_id: this.user.user_id };
this.CreateSocialComment(payload);
},
onSubmitSocial() {
if (!this.user) {
console.error("Cannot submit comment: user is not logged in.");
return; // Stop the function from proceeding
}
let payload = { comment: this.CreateSocialForm.basicInfo.comment, poster_employee_id: this.user.user_id };
this.CreateSocialComment(payload);
},
getServiceCalls(customerId: number) {
let path = `${import.meta.env.VITE_BASE_URL}/service/for-customer/${customerId}`;
axios({
@@ -946,15 +1019,54 @@ export default defineComponent({
}
},
async handleDeleteService(serviceId: number) {
if (!window.confirm("Are you sure you want to delete this service call?")) return;
try {
const path = `${import.meta.env.VITE_BASE_URL}/service/delete/${serviceId}`;
await axios.delete(path, { headers: authHeader(), withCredentials: true });
this.getServiceCalls(this.customer.id);
this.closeEditModal();
const response = await axios.delete(path, { headers: authHeader(), withCredentials: true });
if(response.data.ok) {
this.getServiceCalls(this.customer.id);
this.closeEditModal();
notify({ title: "Success", text: "Service call deleted!", type: "success" });
}
} catch (error) {
console.error("Failed to delete service call:", error);
}
},
async fetchCustomerParts(customerId: number) {
try {
const path = `${import.meta.env.VITE_BASE_URL}/service/parts/customer/${customerId}`;
const response = await axios.get(path, { headers: authHeader() });
this.currentParts = response.data;
} catch (error) {
console.error("Failed to fetch customer parts:", error);
notify({ title: "Error", text: "Could not fetch equipment parts.", type: "error" });
}
},
openPartsModal() {
if (this.currentParts) {
this.isPartsModalOpen = true;
} else {
notify({ title: "Info", text: "Parts data still loading, please wait.", type: "info" });
}
},
closePartsModal() {
this.isPartsModalOpen = false;
},
async handleSaveParts(partsToSave: ServiceParts) {
try {
const path = `${import.meta.env.VITE_BASE_URL}/service/parts/update/${partsToSave.customer_id}`;
const response = await axios.post(path, partsToSave, { headers: authHeader() });
if(response.data.ok) {
this.currentParts = partsToSave;
notify({ title: "Success", text: "Equipment parts saved successfully!", type: "success" });
}
this.closePartsModal();
} catch (error) {
console.error("Failed to save parts:", error);
notify({ title: "Error", text: "Failed to save equipment parts.", type: "error" });
}
},
formatDate(dateString: string): string {
if (!dateString) return 'N/A';
return dayjs(dateString).format('MMMM D, YYYY');

190
src/pages/customer/service/PartsEditModal.vue Normal file
View File

@@ -0,0 +1,190 @@
<template>
<!-- Modal Overlay -->
<div class="fixed inset-0 bg-gray-800 bg-opacity-75 flex items-center justify-center z-50">
<!-- Modal Content -->
<div class="relative bg-base-100 text-base-content p-6 rounded-lg shadow-xl w-full max-w-2xl">
<!-- Modal Header -->
<div class="flex justify-between items-center border-b border-gray-700 pb-3 mb-4">
<h3 class="text-2xl font-bold">Edit Oil Filters & Nozzles</h3>
<button @click="$emit('close-modal')" type="button" class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
</div>
<!-- Form for Editing -->
<form @submit.prevent="saveChanges">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Oil Filter 1 Section -->
<div>
<label for="oil-filter-1" class="block text-sm font-medium mb-2">Oil Filter 1</label>
<select id="oil-filter-1" v-model="editableParts.oil_filter" class="select select-bordered w-full">
<option disabled value="">Select Filter</option>
<option v-for="item in oilFilterOptions" :key="`filter1-${item}`" :value="item">{{ item }}</option>
</select>
</div>
<!-- Oil Filter 2 Section -->
<div>
<label for="oil-filter-2" class="block text-sm font-medium mb-2">Oil Filter 2</label>
<select id="oil-filter-2" v-model="editableParts.oil_filter_2" class="select select-bordered w-full">
<option disabled value="">Select Filter</option>
<option v-for="item in oilFilterOptions" :key="`filter2-${item}`" :value="item">{{ item }}</option>
</select>
</div>
<!-- Oil Nozzle 1 Section -->
<div class="md:col-span-2 border-t border-gray-700 pt-4">
<label class="block text-sm font-medium mb-2">Oil Nozzle 1</label>
<div class="grid grid-cols-3 gap-2">
<select v-model="nozzle1.part1" class="select select-bordered w-full">
<option disabled value="">Type</option>
<option v-for="item in nozzlePart1Options" :key="`n1p1-${item}`" :value="item">{{ item }}</option>
</select>
<select v-model="nozzle1.part2" class="select select-bordered w-full">
<option disabled value="">Rate</option>
<option v-for="item in nozzlePart2Options" :key="`n1p2-${item}`" :value="item">{{ item }}</option>
</select>
<select v-model="nozzle1.part3" class="select select-bordered w-full">
<option disabled value="">Angle</option>
<option v-for="item in nozzlePart3Options" :key="`n1p3-${item}`" :value="item">{{ item }}</option>
</select>
</div>
</div>
<!-- Oil Nozzle 2 Section -->
<div class="md:col-span-2 border-t border-gray-700 pt-4">
<label class="block text-sm font-medium mb-2">Oil Nozzle 2</label>
<div class="grid grid-cols-3 gap-2">
<select v-model="nozzle2.part1" class="select select-bordered w-full">
<option disabled value="">Type</option>
<option v-for="item in nozzlePart1Options" :key="`n2p1-${item}`" :value="item">{{ item }}</option>
</select>
<select v-model="nozzle2.part2" class="select select-bordered w-full">
<option disabled value="">Rate</option>
<option v-for="item in nozzlePart2Options" :key="`n2p2-${item}`" :value="item">{{ item }}</option>
</select>
<select v-model="nozzle2.part3" class="select select-bordered w-full">
<option disabled value="">Angle</option>
<option v-for="item in nozzlePart3Options" :key="`n2p3-${item}`" :value="item">{{ item }}</option>
</select>
</div>
</div>
</div>
<!-- Action Buttons -->
<div class="mt-8 flex justify-end space-x-3">
<button @click.prevent="$emit('close-modal')" type="button" class="btn btn-ghost">Cancel</button>
<button type="submit" class="btn btn-primary">Save Changes</button>
</div>
</form>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, PropType } from 'vue';
// Interfaces remain the same
interface ServiceParts {
id?: number;
customer_id: number;
oil_filter: string;
oil_filter_2: string;
oil_nozzle: string;
oil_nozzle_2: string;
}
interface NozzleParts {
part1: string;
part2: string;
part3: string;
}
export default defineComponent({
name: 'PartsEditModal',
props: {
existingParts: {
type: Object as PropType<ServiceParts>,
required: true
},
customerId: {
type: Number,
required: true
}
},
emits: ['close-modal', 'save-parts'],
data() {
return {
// All reactive state goes inside the data object
editableParts: {} as Partial<ServiceParts>,
nozzle1: { part1: '', part2: '', part3: '' } as NozzleParts,
nozzle2: { part1: '', part2: '', part3: '' } as NozzleParts,
// ======================================================
// ============== THE UPDATED OIL FILTER LIST ==============
// ======================================================
oilFilterOptions: [
'RF-1',
'RF-4',
'88CR',
'Big Guy f80-24',
'Garber Model R',
'Garber Model M',
'PurePro f100-10W'
],
nozzlePart1Options: ['a', 'b', 'w'],
nozzlePart2Options: Array.from({ length: (200 - 45) / 5 + 1 }, (_, i) => (45 + i * 5).toString()),
nozzlePart3Options: Array.from({ length: (100 - 45) / 5 + 1 }, (_, i) => (45 + i * 5).toString()),
};
},
watch: {
// Watch for changes to the `existingParts` prop
existingParts: {
handler(newVal) {
if (!newVal) return;
// Update the component's internal data when the prop changes
this.editableParts = { ...newVal, customer_id: this.customerId };
this.nozzle1 = this.splitNozzle(newVal.oil_nozzle);
this.nozzle2 = this.splitNozzle(newVal.oil_nozzle_2);
},
immediate: true, // Run the handler immediately when the component is created
deep: true, // Watch for nested changes within the object
},
},
methods: {
// Function to split a combined nozzle string (e.g., "a 55 75") into its parts
splitNozzle(nozzleStr: string | undefined): NozzleParts {
if (!nozzleStr || typeof nozzleStr !== 'string' || nozzleStr.trim() === '') {
return { part1: '', part2: '', part3: '' };
}
const parts = nozzleStr.split(' ');
return {
part1: parts[0] || '',
part2: parts[1] || '',
part3: parts[2] || '',
};
},
// Function to combine nozzle parts into a single string
combineNozzle(parts: NozzleParts): string {
if (parts.part1 && parts.part2 && parts.part3) {
return `${parts.part1} ${parts.part2} ${parts.part3}`;
}
return ''; // Return empty if any part is missing
},
// Form submission handler
saveChanges() {
// Before emitting, combine the nozzle parts back into a single string
this.editableParts.oil_nozzle = this.combineNozzle(this.nozzle1);
this.editableParts.oil_nozzle_2 = this.combineNozzle(this.nozzle2);
// Emit the save event with the final payload
this.$emit('save-parts', this.editableParts);
},
},
});
</script>```

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

@@ -20,9 +20,10 @@
</ul>
</div>
<div class="grid grid-cols-12 ">
<div class="col-span-12 bg-neutral ">
<!-- TOP SECTION: Customer Info and Pricing Chart -->
<div class="grid grid-cols-12 gap-5 mb-5">
<!-- Customer Info -->
<div class="col-span-12 lg:col-span-6 bg-neutral rounded-lg p-5">
<div class="col-span-12 py-5 ">
<router-link :to="{ name: 'customerProfile', params: { id: customer['id'] } }"
class="btn btn-secondary btn-sm">
@@ -36,19 +37,16 @@
{{ customer.customer_last_name }}
</div>
<div class="col-span-12 font-bold flex">
{{ customer.customer_address }}
<div v-if="customer.customer_apt != 'None'">
{{ customer.customer_apt }}
</div>
</div>
<div class="col-span-12 font-bold flex">
<div class="pr-2">
{{ customer.customer_town }},
</div>
<div class="pr-2">
<div v-if="customer.customer_state == 0">Massachusetts</div>
<div v-else-if="customer.customer_state == 1">Rhode Island</div>
<div v-else-if="customer.customer_state == 2">New Hampshire</div>
@@ -62,7 +60,6 @@
{{ customer.customer_zip }}
</div>
</div>
<div class="col-span-12 font-bold flex" v-if="customer.customer_apt !== 'None'">
{{ customer.customer_apt }}
</div>
@@ -81,7 +78,34 @@
</div>
</div>
<div class="col-span-6 rounded-md p-6 ">
<!-- Pricing Chart -->
<div class="col-span-12 lg:col-span-6 bg-neutral rounded-lg p-5">
<h3 class="text-xl font-bold mb-4">Price Per Gallon</h3>
<div class="overflow-x-auto">
<table class="table w-full">
<thead>
<tr>
<th>Gallons</th>
<th>Total Price</th>
</tr>
</thead>
<tbody>
<!-- THE FIX IS ON THE NEXT LINE -->
<tr v-for="(price, gallons) in pricingTiers" :key="gallons" class="hover">
<th>{{ gallons }}</th>
<td>${{ parseFloat(price).toFixed(2) }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- BOTTOM SECTION: Forms -->
<div class="grid grid-cols-12 gap-5">
<!-- Create Delivery Form -->
<div class="col-span-12 xl:col-span-6 rounded-md p-6 ">
<div class="grid grid-cols-12">
<div class="col-span-12 text-[24px] ">
Create Delivery
@@ -147,10 +171,6 @@
<div v-else>
<div class="col-span-12 md:col-span-4 mb-5 md:mb-0 py-5">
No Cards on File!
<!-- <router-link :to="{ name: 'cardadd', params: { id: customer.id } }">
<button class="btn btn-sm bg-blue-700 text-white">Add Credit Card</button>
</router-link> -->
</div>
</div>
@@ -207,8 +227,6 @@
class="textarea block p-2.5 w-full input-bordered " id="description" type="text" placeholder="Notes on ticket" />
</div>
<div class="col-span-12 md:col-span-12 flex mt-5 mb-5">
<button class="btn-sm btn bg-orange-600 text-white">
Create Delivery
@@ -218,12 +236,10 @@
</div>
</div>
<!-- Add Credit Card Form -->
<div class="col-span-12 xl:col-span-6 p-5">
<div class="grid grid-cols-12 ">
<div class="col-span-12 text-2xl">Add a Credit Card</div>
<div class="col-span-12">
<form class="rounded-md px-8 pt-6 pb-8 mb-4 w-full" enctype="multipart/form-data"
@submit.prevent="onSubmitCard">
@@ -321,9 +337,6 @@
class="input input-bordered input-sm w-full max-w-xs" id="title" type="text"
placeholder="Zip Code" />
</div>
<div class="col-span-12 md:col-span-12 flex mt-5 mb-5">
<button class="btn-sm btn bg-orange-600 text-white">
Save Credit Card
@@ -333,21 +346,17 @@
</div>
</div>
</div>
</div>
<div class="grid grid-cols-12 ">
<div class="col-span-12 text-center font-bold text-3xl">Remind customer of tank Inspection</div>
<div class="col-span-12 text-center font-bold text-3xl">Ask how they heard about us</div>
</div>
</div>
</div>
<Footer />
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import axios from 'axios'
@@ -376,6 +385,7 @@ export default defineComponent({
userCards: [],
promos: [],
truckDriversList: [],
pricingTiers: {}, // NEW: To store pricing data
CreateOilOrderForm: {
basicInfo: {
gallons_ordered: '',
@@ -452,6 +462,7 @@ export default defineComponent({
this.userStatus()
this.getDriversList()
this.getPromos()
this.getPricingTiers() // NEW: Call the method to get prices
},
watch: {
$route() {
@@ -462,11 +473,31 @@ export default defineComponent({
},
mounted() {
this.getCustomer(this.$route.params.id)
this.getPaymentCards(this.$route.params.id);
this.getCustomerDelivery(this.$route.params.id)
},
methods: {
// NEW: Method to fetch pricing 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) => {
this.pricingTiers = response.data;
})
.catch(() => {
notify({
title: "Pricing Error",
text: "Could not retrieve today's pricing.",
type: "error",
});
});
},
userStatus() {
let path = import.meta.env.VITE_BASE_URL + '/auth/whoami';
axios({
@@ -494,7 +525,6 @@ export default defineComponent({
})
.then((response: any) => {
this.customer = response.data;
})
.catch(() => {
notify({
@@ -525,7 +555,6 @@ export default defineComponent({
})
.then((response: any) => {
this.userCards = response.data;
})
.catch(() => {
});

28
src/pages/service/ServiceCalendar.vue
View File

@@ -17,7 +17,6 @@
Master Service Calendar
</div>
<!-- This component has no sidebar, so the calendar takes up the full content area -->
<div class="flex h-screen font-sans">
<div class="flex-1 p-4 overflow-auto">
<FullCalendar ref="fullCalendar" :options="calendarOptions" />
@@ -28,7 +27,6 @@
<Footer />
<!-- Re-using the powerful edit modal for this page -->
<ServiceEditModal
v-if="selectedServiceForEdit"
:service="selectedServiceForEdit"
@@ -51,10 +49,10 @@ import ServiceEditModal from './ServiceEditModal.vue';
import axios from 'axios';
import authHeader from '../../services/auth.header';
// --- Interfaces ---
interface ServiceCall {
id: number;
scheduled_date: string;
customer_id: string;
customer_name: string;
customer_address: string;
customer_town: string;
@@ -67,7 +65,7 @@ export default defineComponent({
components: { Header, SideBar, Footer, FullCalendar, ServiceEditModal },
data() {
return {
user: null, // For header/sidebar logic if needed
user: null,
selectedServiceForEdit: null as Partial<ServiceCall> | null,
calendarOptions: {
plugins: [dayGridPlugin, interactionPlugin],
@@ -83,7 +81,6 @@ export default defineComponent({
this.fetchEvents();
},
methods: {
// This method fetches ALL events for the master calendar
async fetchEvents(): Promise<void> {
try {
const path = `${import.meta.env.VITE_BASE_URL}/service/all`;
@@ -94,30 +91,35 @@ export default defineComponent({
}
},
// This opens the modal when a calendar event is clicked
// --- THIS IS THE FIX ---
handleEventClick(clickInfo: EventClickArg): void {
const events = (this.calendarOptions.events as any[]) || [];
const originalEvent = events.find(e => e.id == clickInfo.event.id);
if (originalEvent) {
// We "flatten" the nested object from the calendar into the simple,
// flat structure that the modal expects.
this.selectedServiceForEdit = {
id: originalEvent.id,
scheduled_date: originalEvent.start,
customer_name: originalEvent.title.split(': ')[1] || '',
customer_address: '',
customer_town: '',
customer_id: originalEvent.customer_id,
// Extract the customer name from the title
customer_name: originalEvent.title.split(': ')[1] || 'Unknown Customer',
// Pull the properties out of the nested extendedProps
type_service_call: originalEvent.extendedProps.type_service_call,
description: originalEvent.extendedProps.description,
// Add dummy values for other fields the ServiceCall interface expects
customer_address: '',
customer_town: '',
};
}
},
// Closes the modal
closeEditModal() {
this.selectedServiceForEdit = null;
},
// Saves changes from the modal and refreshes the calendar
async handleSaveChanges(updatedService: ServiceCall) {
try {
const path = `${import.meta.env.VITE_BASE_URL}/service/update/${updatedService.id}`;
@@ -130,13 +132,12 @@ export default defineComponent({
}
},
// Deletes the service from the modal and refreshes the calendar
async handleDeleteService(serviceId: number) {
try {
const path = `${import.meta.env.VITE_BASE_URL}/service/delete/${serviceId}`;
const response = await axios.delete(path, { withCredentials: true, headers: authHeader() });
if (response.data.ok === true) {
await this.fetchEvents(); // Refresh the calendar from the database
await this.fetchEvents();
this.closeEditModal();
} else {
console.error("Failed to delete event:", response.data.error);
@@ -146,7 +147,6 @@ export default defineComponent({
}
},
// Standard method for user status, e.g., for the header
userStatus() {
let path = import.meta.env.VITE_BASE_URL + '/auth/whoami';
axios({

182
src/pages/service/ServiceEditModal.vue
View File

@@ -2,58 +2,95 @@
<!-- Modal Overlay -->
<div class="fixed inset-0 bg-gray-800 bg-opacity-75 flex items-center justify-center z-50">
<!-- Modal Content -->
<div class="relative bg-white p-6 rounded-lg shadow-xl w-full max-w-lg">
<div class="relative bg-base-100 text-base-content p-6 rounded-lg shadow-xl w-full max-w-4xl">
<!-- Modal Header -->
<div class="flex justify-between items-center border-b pb-3 mb-4">
<h3 class="text-2xl font-bold text-gray-800">Edit Service Call</h3>
<div class="flex justify-between items-center border-b border-gray-700 pb-3 mb-4">
<h3 class="text-2xl font-bold">Edit Service Call</h3>
<span class="font-bold text-white px-3 py-1 mr-10 rounded" :style="{ backgroundColor: getServiceTypeColor(editableService.type_service_call) }">
{{ getServiceTypeName(editableService.type_service_call) }}
</span>
</div>
<button @click="$emit('close-modal')" type="button" class="absolute top-0 right-0 mt-4 mr-4 text-gray-400 hover:text-gray-600 focus:outline-none" aria-label="Close modal">
<button @click="$emit('close-modal')" type="button" class="absolute top-0 right-0 mt-4 mr-4 text-gray-500 hover:text-white focus:outline-none" aria-label="Close modal">
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
</button>
<!-- Form for Editing -->
<!-- Customer & Parts Info Section (Two Columns) -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-4">
<!-- Left Column: Customer Info -->
<div v-if="customer" class="p-4 bg-base-200 rounded-md">
<div class="font-bold text-lg">{{ customer.account_number }}</div>
<div class="text-sm">{{ customer.customer_first_name }} {{ customer.customer_last_name }}</div>
<div class="text-sm">{{ customer.customer_address }}</div>
<div class="text-sm">{{ customer.customer_town }}, {{ customer.customer_state }} {{ customer.customer_zip }}</div>
<div class="text-sm mt-1">{{ customer.customer_phone_number }}</div>
</div>
<div v-else class="p-4 bg-base-200 rounded-md text-center">
<p>Loading customer details...</p>
</div>
<!-- ====================================================== -->
<!-- ============== SERVICE PARTS (VIEW-ONLY) ============== -->
<!-- ====================================================== -->
<div v-if="!isLoadingParts && serviceParts" class="p-4 bg-base-200 rounded-md">
<h4 class="font-bold text-lg mb-2">Service Parts on File</h4>
<div class="grid grid-cols-2 gap-x-4 gap-y-2 text-sm">
<div>
<label class="block text-xs font-medium opacity-70">Oil Filter</label>
<p class="font-semibold">{{ serviceParts.oil_filter || 'N/A' }}</p>
</div>
<div>
<label class="block text-xs font-medium opacity-70">Oil Filter 2</label>
<p class="font-semibold">{{ serviceParts.oil_filter_2 || 'N/A' }}</p>
</div>
<div>
<label class="block text-xs font-medium opacity-70">Oil Nozzle</label>
<p class="font-semibold">{{ serviceParts.oil_nozzle || 'N/A' }}</p>
</div>
<div>
<label class="block text-xs font-medium opacity-70">Oil Nozzle 2</label>
<p class="font-semibold">{{ serviceParts.oil_nozzle_2 || 'N/A' }}</p>
</div>
</div>
</div>
<div v-else class="p-4 bg-base-200 rounded-md text-center">
<p>Loading service parts...</p>
</div>
<!-- ====================================================== -->
<!-- ================ END VIEW-ONLY SECTION =============== -->
<!-- ====================================================== -->
</div>
<!-- Form for Editing Service Call Details -->
<form @submit.prevent="saveChanges">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<!-- Scheduled Date Input -->
<div class="mb-4">
<label for="edit-date" class="block text-sm font-medium text-gray-700">Scheduled Date</label>
<input type="date" id="edit-date" v-model="editableService.date" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm text-black">
<label for="edit-date" class="block text-sm font-medium">Scheduled Date</label>
<input type="date" id="edit-date" v-model="editableService.date" required class="input input-bordered w-full mt-1">
</div>
<!-- NEW: Time Input -->
<div class="mb-4">
<label for="edit-time" class="block text-sm font-medium text-gray-700">Scheduled Time</label>
<select id="edit-time" v-model.number="editableService.time" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm text-black">
<label for="edit-time" class="block text-sm font-medium">Scheduled Time</label>
<select id="edit-time" v-model.number="editableService.time" class="select select-bordered w-full mt-1">
<option v-for="hour in 24" :key="hour" :value="hour - 1">{{ (hour - 1).toString().padStart(2, '0') }}:00</option>
</select>
</div>
</div>
<!-- Service Type (Moved to its own row) -->
<div class="mb-4">
<label for="edit-service-type" class="block text-sm font-medium text-gray-700">Type of Service</label>
<select id="edit-service-type" v-model.number="editableService.type_service_call" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm text-black">
<option v-for="option in serviceOptions" :key="option.value" :value="option.value">
{{ option.text }}
</option>
<label for="edit-service-type" class="block text-sm font-medium">Type of Service</label>
<select id="edit-service-type" v-model.number="editableService.type_service_call" required class="select select-bordered w-full mt-1">
<option v-for="option in serviceOptions" :key="option.value" :value="option.value">{{ option.text }}</option>
</select>
</div>
<div class="mb-4">
<label for="edit-description" class="block text-sm font-medium text-gray-700">Description</label>
<textarea id="edit-description" v-model="editableService.description" rows="4" required class="mt-1 block w-full rounded-md border border-gray-300 shadow-sm text-black focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"></textarea>
<label for="edit-description" class="block text-sm font-medium">Description</label>
<textarea id="edit-description" v-model="editableService.description" rows="4" required class="textarea textarea-bordered w-full mt-1"></textarea>
</div>
<div class="mt-6 flex justify-between items-center">
<button @click.prevent="confirmDelete" type="button" class="px-4 py-2 bg-red-600 text-white font-medium rounded-md shadow-sm hover:bg-red-700">Delete Call</button>
<button @click.prevent="confirmDelete" type="button" class="btn btn-error">Delete Call</button>
<div class="flex space-x-3">
<button @click.prevent="$emit('close-modal')" type="button" class="px-4 py-2 bg-gray-200 text-gray-800 font-medium rounded-md shadow-sm hover:bg-gray-300">Cancel</button>
<button type="submit" class="px-4 py-2 bg-blue-600 text-white font-medium rounded-md shadow-sm hover:bg-blue-700">Save Changes</button>
<button @click.prevent="$emit('close-modal')" type="button" class="btn btn-ghost">Cancel</button>
<button type="submit" class="btn btn-primary">Save Changes</button>
</div>
</div>
</form>
@@ -63,36 +100,25 @@
<script lang="ts">
import { defineComponent, PropType } from 'vue';
import dayjs from 'dayjs'; // Import dayjs for easier date/time manipulation
import dayjs from 'dayjs';
import axios from 'axios';
import authHeader from '../../services/auth.header';
interface ServiceCall {
id: number;
scheduled_date: string; // This is an ISO string like "2025-08-26T14:00:00"
customer_name: string;
customer_address: string;
customer_town: string;
type_service_call: number;
description: string;
}
// Define the shape of our local, editable object
interface EditableService extends Omit<ServiceCall, 'scheduled_date'> {
date: string; // 'YYYY-MM-DD'
time: number; // 0-23
}
// --- Interfaces ---
interface ServiceCall { id: number; scheduled_date: string; customer_id: number; customer_name: string; customer_address: string; customer_town: string; type_service_call: number; description: string; }
interface EditableService extends Omit<ServiceCall, 'scheduled_date'> { date: string; time: number; }
interface Customer { account_number: string; customer_first_name: string; customer_last_name: string; customer_address: string; customer_town: string; customer_state: number; customer_zip: string; customer_phone_number: string; }
interface ServiceParts { customer_id: number; oil_filter: string; oil_filter_2: string; oil_nozzle: string; oil_nozzle_2: string; }
export default defineComponent({
name: 'ServiceEditModal',
props: {
// The prop can be a full ServiceCall or a simplified object from the calendar
service: {
type: Object as PropType<Partial<ServiceCall>>,
required: true,
},
},
props: { service: { type: Object as PropType<Partial<ServiceCall>>, required: true } },
data() {
return {
editableService: {} as Partial<EditableService>,
customer: null as Customer | null,
serviceParts: null as ServiceParts | null,
isLoadingParts: true,
serviceOptions: [
{ text: 'Tune-up', value: 0 }, { text: 'No Heat', value: 1 }, { text: 'Fix', value: 2 },
{ text: 'Tank Install', value: 3 }, { text: 'Other', value: 4 },
@@ -103,34 +129,50 @@ export default defineComponent({
service: {
handler(newVal) {
if (!newVal) return;
// The date string could be from the DB (full ISO) or from FullCalendar (simpler)
const scheduled = dayjs(newVal.scheduled_date || new Date());
this.editableService = {
...newVal,
date: scheduled.format('YYYY-MM-DD'),
time: scheduled.hour(),
};
this.editableService = { ...newVal, date: scheduled.format('YYYY-MM-DD'), time: scheduled.hour() };
if (newVal.customer_id) {
this.getCustomer(newVal.customer_id);
this.getServiceParts(newVal.customer_id);
}
},
immediate: true,
deep: true,
},
},
methods: {
saveChanges() {
// Re-combine date and time into a single ISO string before emitting
getCustomer(customerId: number) {
this.customer = null;
let path = import.meta.env.VITE_BASE_URL + '/customer/' + customerId;
axios.get(path, { headers: authHeader() })
.then((response: any) => { this.customer = response.data; })
.catch((error: any) => { console.error("Failed to fetch customer details for modal:", error); });
},
getServiceParts(customerId: number) {
this.isLoadingParts = true;
this.serviceParts = null;
let path = `${import.meta.env.VITE_BASE_URL}/service/parts/customer/${customerId}`;
axios.get(path, { headers: authHeader() })
.then((response: any) => { this.serviceParts = response.data; })
.catch((error: any) => { console.error("Failed to fetch service parts:", error); })
.finally(() => { this.isLoadingParts = false; });
},
// --- UPDATED: Simplified saveChanges method ---
async saveChanges() {
// This method now only saves the service call itself.
const date = this.editableService.date;
const time = this.editableService.time || 0;
const combinedDateTime = dayjs(`${date} ${time}:00`).format('YYYY-MM-DDTHH:mm:ss');
const finalPayload = { ...this.service, ...this.editableService, scheduled_date: combinedDateTime };
const finalPayload = {
...this.service,
...this.editableService,
scheduled_date: combinedDateTime,
};
this.$emit('save-changes', finalPayload);
const path = `${import.meta.env.VITE_BASE_URL}/service/update/${finalPayload.id}`;
try {
await axios.put(path, finalPayload, { headers: authHeader(), withCredentials: true });
this.$emit('save-changes', finalPayload);
} catch (error) {
console.error("Failed to save changes:", error);
alert("An error occurred while saving. Please check the console.");
}
},
confirmDelete() {
if (this.service.id && window.confirm(`Are you sure you want to delete this service call?`)) {
@@ -139,16 +181,12 @@ export default defineComponent({
},
getServiceTypeName(typeId: number | undefined | null): string {
if (typeId === undefined || typeId === null) return 'Unknown';
const typeMap: { [key: number]: string } = {
0: 'Tune-up', 1: 'No Heat', 2: 'Fix', 3: 'Tank Install', 4: 'Other',
};
const typeMap: { [key: number]: string } = { 0: 'Tune-up', 1: 'No Heat', 2: 'Fix', 3: 'Tank Install', 4: 'Other' };
return typeMap[typeId] || 'Unknown';
},
getServiceTypeColor(typeId: number | undefined | null): string {
if (typeId === undefined || typeId === null) return 'gray';
const colorMap: { [key: number]: string } = {
0: 'blue', 1: 'red', 2: 'green', 3: '#B58900', 4: 'black',
};
const colorMap: { [key: number]: string } = { 0: 'blue', 1: 'red', 2: 'green', 3: '#B58900', 4: 'black' };
return colorMap[typeId] || 'gray';
}
},

13
src/pages/service/ServiceHome.vue
View File

@@ -30,9 +30,6 @@
<p>No service calls found.</p>
</div>
<!-- ============================================= -->
<!-- ============== UPDATED TABLE SECTION ============== -->
<!-- ============================================= -->
<div v-else class="overflow-x-auto rounded-lg">
<table class="min-w-full divide-y divide-gray-700">
<thead class="bg-base-200">
@@ -46,11 +43,13 @@
</tr>
</thead>
<tbody class="bg-base-100 divide-y divide-gray-700">
<!-- The hover color is now a slightly lighter shade of the background -->
<tr v-for="service in services" :key="service.id" @click="openEditModal(service)" class="hover:bg-base-300 cursor-pointer">
<td class="px-6 py-4 whitespace-nowrap">{{ formatDate(service.scheduled_date) }}</td>
<td class="px-6 py-4 whitespace-nowrap">{{ formatTime(service.scheduled_date) }}</td>
<td class="px-6 py-4 whitespace-nowrap">{{ service.customer_name }}</td>
<td class="px-6 py-4 whitespace-nowrap hover:text-blue-600">{{ service.customer_name }}</td>
<td class="px-6 py-4 whitespace-nowrap">{{ service.customer_address }}, {{ service.customer_town }}</td>
<td class="px-6 py-4 whitespace-nowrap font-medium" :style="{ color: getServiceTypeColor(service.type_service_call) }">
{{ getServiceTypeName(service.type_service_call) }}
@@ -60,9 +59,6 @@
</tbody>
</table>
</div>
<!-- ============================================= -->
<!-- ============== END UPDATED SECTION ============== -->
<!-- ============================================= -->
</div>
</div>
@@ -91,6 +87,7 @@ import dayjs from 'dayjs'; // Import dayjs to handle date/time formatting
interface ServiceCall {
id: number;
scheduled_date: string;
customer_id: number;
customer_name: string;
customer_address: string;
customer_town: string;

58
src/pages/service/calender/CalendarCustomer.vue
View File

@@ -42,15 +42,13 @@ import Header from '../../../layouts/headers/headerauth.vue';
import FullCalendar from '@fullcalendar/vue3';
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '@fullcalendar/interaction';
// --- FIX: Removed 'EventApi' as it's no longer used ---
import { CalendarOptions, EventClickArg } from '@fullcalendar/core';
import EventSidebar from './EventSidebar.vue';
import ServiceEditModal from '../ServiceEditModal.vue';
import ServiceEditModal from '../../service/ServiceEditModal.vue';
import axios from 'axios';
import authHeader from '../../../services/auth.header';
// --- Interfaces (no changes) ---
interface ServiceCall { id: number; scheduled_date: string; customer_name: string; customer_address: string; customer_town: string; type_service_call: number; description: string; }
interface ServiceCall { id: number; scheduled_date: string; customer_id: string; customer_name: string; customer_address: string; customer_town: string; type_service_call: number; description: string; }
interface Customer { id: number; customer_last_name: string; customer_first_name: string; customer_town: string; customer_state: number; customer_zip: string; customer_phone_number: string; customer_address: string; customer_home_type: number; customer_apt: string; }
export default defineComponent({
@@ -60,12 +58,11 @@ export default defineComponent({
return {
isLoading: false,
selectedServiceForEdit: null as Partial<ServiceCall> | null,
// --- FIX: Define calendarOptions directly here to resolve "unused variable" warnings ---
calendarOptions: {
plugins: [dayGridPlugin, interactionPlugin],
initialView: 'dayGridMonth',
weekends: true,
events: [] as any[], // Start with a typed empty array
events: [] as any[],
eventClick: this.handleEventClick,
} as CalendarOptions,
customer: null as Customer | null,
@@ -80,29 +77,35 @@ export default defineComponent({
},
},
created() {
// The created hook is now only responsible for fetching data
this.fetchEvents();
},
methods: {
// --- THIS IS THE FIX ---
// The logic from ServiceCalendar.vue is now correctly applied here.
handleEventClick(clickInfo: EventClickArg): void {
const events = (this.calendarOptions.events as any[]) || [];
const originalEvent = events.find(e => e.id == clickInfo.event.id);
if (originalEvent) {
// We "flatten" the nested object from the calendar into the simple,
// flat structure that the modal expects, ensuring customer_id is included.
this.selectedServiceForEdit = {
id: originalEvent.id,
scheduled_date: originalEvent.start,
customer_name: originalEvent.title.split(': ')[1] || '',
customer_address: '',
customer_town: '',
customer_id: originalEvent.customer_id, // This was the missing piece
customer_name: originalEvent.title.split(': ')[1] || 'Unknown Customer',
type_service_call: originalEvent.extendedProps.type_service_call,
description: originalEvent.extendedProps.description,
customer_address: '',
customer_town: '',
};
}
},
closeEditModal() {
this.selectedServiceForEdit = null;
},
async handleSaveChanges(updatedService: ServiceCall) {
try {
const path = `${import.meta.env.VITE_BASE_URL}/service/update/${updatedService.id}`;
@@ -114,10 +117,22 @@ export default defineComponent({
alert("An error occurred while saving. Please check the console.");
}
},
async handleDeleteService(serviceId: number) {
await this.handleEventDelete(String(serviceId));
this.closeEditModal();
try {
const path = `${import.meta.env.VITE_BASE_URL}/service/delete/${serviceId}`;
const response = await axios.delete(path, { withCredentials: true, headers: authHeader() });
if (response.data.ok === true) {
await this.fetchEvents();
this.closeEditModal();
} else {
console.error("Failed to delete event:", response.data.error);
}
} catch (error) {
console.error("Error deleting event:", error);
}
},
async getCustomer(customerId: string): Promise<void> {
this.isLoading = true;
this.customer = null;
@@ -133,6 +148,7 @@ export default defineComponent({
this.isLoading = false;
}
},
async fetchEvents(): Promise<void> {
try {
const path = `${import.meta.env.VITE_BASE_URL}/service/all`;
@@ -142,6 +158,7 @@ export default defineComponent({
console.error("Error fetching all calendar events:", error);
}
},
async handleEventScheduled(eventData: any): Promise<void> {
if (!this.customer) {
alert("Error: A customer must be loaded in the sidebar to create a new event.");
@@ -154,7 +171,6 @@ export default defineComponent({
};
const path = import.meta.env.VITE_BASE_URL + "/service/create";
const response = await axios.post(path, payload, { withCredentials: true, headers: authHeader() });
if (response.data.ok === true) {
await this.fetchEvents();
} else {
@@ -164,20 +180,10 @@ export default defineComponent({
console.error("Error creating event:", error);
}
},
async handleEventDelete(eventId: string): Promise<void> {
try {
const path = `${import.meta.env.VITE_BASE_URL}/service/delete/${eventId}`;
const response = await axios.delete(path, { withCredentials: true, headers: authHeader() });
if (response.data.ok === true) {
const calendarApi = (this.$refs.fullCalendar as any).getApi();
const eventToRemove = calendarApi.getEventById(eventId);
if (eventToRemove) eventToRemove.remove();
} else {
console.error("Failed to delete event:", response.data.error);
}
} catch (error) {
console.error("Error deleting event:", error);
}
// This is a simple alias now, as handleDeleteService is more specific
await this.handleDeleteService(Number(eventId));
},
},
});

1
src/shims-leaflet.d.ts vendored Normal file
View File

@@ -0,0 +1 @@
declare module 'leaflet';

2
tsconfig.json
View File

@@ -22,6 +22,6 @@
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
},
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
"references": [{ "path": "./tsconfig.node.json" }]
}