Major Refactor
This commit is contained in:
@@ -1,104 +1,123 @@
|
||||
<template>
|
||||
<Header />
|
||||
<div class="flex">
|
||||
<div class="">
|
||||
<SideBar />
|
||||
</div>
|
||||
<div class=" w-full px-10 ">
|
||||
<div class="text-sm breadcrumbs pb-10">
|
||||
<div class="w-full px-4 md:px-10 py-4">
|
||||
<!-- Breadcrumbs & Title -->
|
||||
<div class="text-sm breadcrumbs">
|
||||
<ul>
|
||||
<li>
|
||||
<router-link :to="{ name: 'home' }">
|
||||
Home
|
||||
</router-link>
|
||||
</li>
|
||||
<li><router-link :to="{ name: 'home' }">Home</router-link></li>
|
||||
<li>Cancelled Deliveries</li>
|
||||
</ul>
|
||||
</div>
|
||||
<h1 class="text-3xl font-bold mt-4">Cancelled Deliveries</h1>
|
||||
|
||||
<div class="flex start pb-10 text-2xl">Cancelled Deliveries </div>
|
||||
|
||||
<!-- Main Content Card -->
|
||||
<div class="bg-neutral rounded-lg p-4 sm:p-6 mt-6">
|
||||
<!-- Header: Title and Count -->
|
||||
<div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4 mb-4">
|
||||
<h2 class="text-lg font-bold">Archived Cancelled Deliveries</h2>
|
||||
<div class="badge badge-ghost">{{ recordsLength }} items Found</div>
|
||||
</div>
|
||||
|
||||
<div class="overflow-x-auto bg-neutral">
|
||||
|
||||
<table class="table">
|
||||
<!-- head -->
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Status</th>
|
||||
<th>Address</th>
|
||||
<th>Town</th>
|
||||
|
||||
<th>Gallons</th>
|
||||
<th>Date</th>
|
||||
<th>Automatic</th>
|
||||
<th>Prime</th>
|
||||
<th>Same Day</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- row 1 -->
|
||||
<tr v-for="oil in deliveries" :key="oil['id']"> <router-link :to="{ name: 'customerProfile', params: { id: oil['customer_id'] } }">
|
||||
<td>
|
||||
<div class="hover:text-accent">{{ oil['customer_name'] }} </div>
|
||||
</td>
|
||||
</router-link>
|
||||
<td>
|
||||
<div v-if="oil['delivery_status'] == 0">Waiting</div>
|
||||
<div v-else-if="oil['delivery_status'] == 1">cancelled</div>
|
||||
<div v-else-if="oil['delivery_status'] == 2">Out for Delivery</div>
|
||||
<div v-else-if="oil['delivery_status'] == 3">tommorrow</div>
|
||||
<div v-else-if="oil['delivery_status'] == 4">Partial Delivery</div>
|
||||
<div v-else-if="oil['delivery_status'] == 5">Issue</div>
|
||||
<div v-else-if="oil['delivery_status'] == 10" class="bg-green-600">Finalized</div>
|
||||
<div v-else></div>
|
||||
<div class="divider"></div>
|
||||
|
||||
<!-- DESKTOP VIEW: Table -->
|
||||
<div class="overflow-x-auto hidden xl:block">
|
||||
<table class="table w-full">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Delivery #</th>
|
||||
<th>Name</th>
|
||||
<th>Status</th>
|
||||
<th>Town / Address</th>
|
||||
<th>Gallons</th>
|
||||
<th>Date</th>
|
||||
<th>Options</th>
|
||||
<th class="text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="oil in deliveries" :key="oil.id" class="hover:bg-blue-600 hover:text-white">
|
||||
<td>{{ oil.id }}</td>
|
||||
<td>
|
||||
<router-link :to="{ name: 'customerProfile', params: { id: oil.customer_id } }" class="link link-hover">
|
||||
{{ oil.customer_name }}
|
||||
</router-link>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge badge-sm badge-error">Cancelled</span>
|
||||
</td>
|
||||
<td>
|
||||
<div>{{ oil.customer_town }}</div>
|
||||
<div class="text-xs opacity-70">{{ oil.customer_address }}</div>
|
||||
</td>
|
||||
<td>
|
||||
<span v-if="oil.customer_asked_for_fill == 1" class="badge badge-info">FILL</span>
|
||||
<span v-else>{{ oil.gallons_ordered }}</span>
|
||||
</td>
|
||||
<td>{{ oil.expected_delivery_date }}</td>
|
||||
<td>
|
||||
<div class="flex flex-col gap-1">
|
||||
<span v-if="oil.prime" class="badge badge-error badge-xs">PRIME</span>
|
||||
<span v-if="oil.same_day" class="badge badge-error badge-xs">SAME DAY</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-right">
|
||||
<div class="flex items-center justify-end gap-2">
|
||||
<router-link :to="{ name: 'deliveryOrder', params: { id: oil.id } }" class="btn btn-sm btn-ghost">View</router-link>
|
||||
<router-link :to="{ name: 'deliveryEdit', params: { id: oil.id } }" class="btn btn-sm btn-secondary">Edit</router-link>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- MOBILE VIEW: Cards -->
|
||||
<div class="xl:hidden space-y-4">
|
||||
<div v-for="oil in deliveries" :key="oil.id" class="card bg-base-100 shadow-md">
|
||||
<div class="card-body p-4">
|
||||
<div class="flex justify-between items-start">
|
||||
<div>
|
||||
<h2 class="card-title text-base">{{ oil.customer_name }}</h2>
|
||||
<p class="text-xs text-gray-400">Delivery #{{ oil.id }}</p>
|
||||
</div>
|
||||
<div class="badge badge-error">
|
||||
Cancelled
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2 mt-2">
|
||||
<div v-if="oil.prime" class="badge badge-error badge-sm">PRIME</div>
|
||||
<div v-if="oil.same_day" class="badge badge-error badge-sm">SAME DAY</div>
|
||||
</div>
|
||||
|
||||
<div class="text-sm mt-2 grid grid-cols-2 gap-x-4 gap-y-1">
|
||||
<p><strong class="font-semibold">Address:</strong> {{ oil.customer_address }}</p>
|
||||
<p><strong class="font-semibold">Town:</strong> {{ oil.customer_town }}</p>
|
||||
<p><strong class="font-semibold">Gallons:</strong>
|
||||
<span v-if="oil.customer_asked_for_fill" class="badge badge-info badge-xs">FILL</span>
|
||||
<span v-else>{{ oil.gallons_ordered }}</span>
|
||||
</p>
|
||||
<p><strong class="font-semibold">Date:</strong> {{ oil.expected_delivery_date }}</p>
|
||||
</div>
|
||||
|
||||
</td>
|
||||
<td>{{ oil['customer_address'] }}</td>
|
||||
<td>{{ oil['customer_town'] }}</td>
|
||||
|
||||
<td>
|
||||
<div v-if="oil['customer_asked_for_fill'] == 1">Fill</div>
|
||||
<div v-else> {{ oil['gallons_ordered'] }}</div>
|
||||
</td>
|
||||
<td>{{ oil['expected_delivery_date'] }}</td>
|
||||
<td>
|
||||
<div v-if="oil['automatic'] == 0">No</div>
|
||||
<div v-else>Yes</div>
|
||||
</td>
|
||||
<td>
|
||||
<div v-if="oil['prime'] == 0">No</div>
|
||||
<div v-else>Yes</div>
|
||||
</td>
|
||||
<td>
|
||||
<div v-if="oil['same_day'] == 0">No</div>
|
||||
<div v-else>Yes</div>
|
||||
</td>
|
||||
|
||||
<td class="flex gap-5">
|
||||
<router-link :to="{ name: 'deliveryOrder', params: { id: oil['id'] } }">
|
||||
<button class="btn btn-secondary">View delivery</button>
|
||||
</router-link>
|
||||
<router-link :to="{ name: 'deliveryEdit', params: { id: oil['id'] } }">
|
||||
<button class="btn btn-secondary">Edit Delivery</button>
|
||||
</router-link>
|
||||
<!-- <button @click.prevent="deleteCall(oil['id'])" class="btn bg-red-600 text-black">DELETE</button> -->
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="card-actions justify-end flex-wrap gap-2 mt-2">
|
||||
<router-link :to="{ name: 'deliveryOrder', params: { id: oil.id } }" class="btn btn-sm btn-ghost">View</router-link>
|
||||
<router-link :to="{ name: 'deliveryEdit', params: { id: oil.id } }" class="btn btn-sm btn-secondary">Edit</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<pagination @paginate="getPage" :records="recordsLength" v-model="page" :per-page="50"
|
||||
:options="options" class="mt-10">
|
||||
</pagination>
|
||||
<div class="flex justify-center mb-10"> {{ recordsLength }} items Found</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div class="mt-6 flex justify-center">
|
||||
<pagination @paginate="getPage" :records="recordsLength" v-model="page" :per-page="50" :options="options">
|
||||
</pagination>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Footer/>
|
||||
<Footer />
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
@@ -124,7 +143,7 @@ export default defineComponent({
|
||||
return {
|
||||
token: null,
|
||||
user: null,
|
||||
deliveries: [],
|
||||
deliveries: [] as any[],
|
||||
page: 1,
|
||||
perPage: 50,
|
||||
recordsLength: 0,
|
||||
|
||||
@@ -1,99 +1,123 @@
|
||||
<template>
|
||||
<Header />
|
||||
<div class="flex">
|
||||
<div class="">
|
||||
<SideBar />
|
||||
</div>
|
||||
<div class=" w-full px-10 ">
|
||||
<div class="text-sm breadcrumbs pb-10">
|
||||
<div class="w-full px-4 md:px-10 py-4">
|
||||
<!-- Breadcrumbs & Title -->
|
||||
<div class="text-sm breadcrumbs">
|
||||
<ul>
|
||||
<li>
|
||||
<router-link :to="{ name: 'home' }">
|
||||
Home
|
||||
</router-link>
|
||||
</li>
|
||||
<li><router-link :to="{ name: 'home' }">Home</router-link></li>
|
||||
<li>Delivered Deliveries</li>
|
||||
</ul>
|
||||
</div>
|
||||
<h1 class="text-3xl font-bold mt-4">Delivered Deliveries</h1>
|
||||
|
||||
<div class="flex start pb-10 text-2xl">Delivered Deliveries </div>
|
||||
<!-- Main Content Card -->
|
||||
<div class="bg-neutral rounded-lg p-4 sm:p-6 mt-6">
|
||||
<!-- Header: Title and Count -->
|
||||
<div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4 mb-4">
|
||||
<h2 class="text-lg font-bold">Deliveries Awaiting Finalization</h2>
|
||||
<div class="badge badge-ghost">{{ recordsLength }} items Found</div>
|
||||
</div>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<div class="overflow-x-auto bg-neutral">
|
||||
|
||||
<table class="table">
|
||||
<!-- head -->
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Status</th>
|
||||
<th>Address</th>
|
||||
<th>Town</th>
|
||||
|
||||
<th>Gallons</th>
|
||||
<th>Date</th>
|
||||
<th>Automatic</th>
|
||||
<th>Prime</th>
|
||||
<th>Same Day</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- row 1 -->
|
||||
<tr v-for="oil in deliveries" :key="oil['id']">
|
||||
<router-link :to="{ name: 'customerProfile', params: { id: oil['customer_id'] } }">
|
||||
<td>
|
||||
<div class="hover:text-accent">{{ oil['customer_name'] }} </div>
|
||||
</td>
|
||||
</router-link>
|
||||
<td>
|
||||
<div v-if="oil['delivery_status'] == 0">Waiting</div>
|
||||
<div v-else-if="oil['delivery_status'] == 1">cancelled</div>
|
||||
<div v-else-if="oil['delivery_status'] == 2">Out for Delivery</div>
|
||||
<div v-else-if="oil['delivery_status'] == 3">tommorrow</div>
|
||||
<div v-else-if="oil['delivery_status'] == 4">Partial Delivery</div>
|
||||
<div v-else-if="oil['delivery_status'] == 5">Issue</div>
|
||||
<div v-else-if="oil['delivery_status'] == 10" class="bg-green-600">Finalized</div>
|
||||
<div v-else></div>
|
||||
<!-- DESKTOP VIEW: Table -->
|
||||
<div class="overflow-x-auto hidden xl:block">
|
||||
<table class="table w-full">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Delivery #</th>
|
||||
<th>Name</th>
|
||||
<th>Status</th>
|
||||
<th>Town / Address</th>
|
||||
<th>Gallons</th>
|
||||
<th>Date</th>
|
||||
<th>Options</th>
|
||||
<th class="text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="oil in deliveries" :key="oil.id" class="hover:bg-blue-600 hover:text-white">
|
||||
<td>{{ oil.id }}</td>
|
||||
<td>
|
||||
<router-link :to="{ name: 'customerProfile', params: { id: oil.customer_id } }" class="link link-hover">
|
||||
{{ oil.customer_name }}
|
||||
</router-link>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge badge-sm badge-success">Delivered</span>
|
||||
</td>
|
||||
<td>
|
||||
<div>{{ oil.customer_town }}</div>
|
||||
<div class="text-xs opacity-70">{{ oil.customer_address }}</div>
|
||||
</td>
|
||||
<td>
|
||||
<span v-if="oil.customer_asked_for_fill == 1" class="badge badge-info">FILL</span>
|
||||
<span v-else>{{ oil.gallons_ordered }}</span>
|
||||
</td>
|
||||
<td>{{ oil.expected_delivery_date }}</td>
|
||||
<td>
|
||||
<div class="flex flex-col gap-1">
|
||||
<span v-if="oil.prime" class="badge badge-error badge-xs">PRIME</span>
|
||||
<span v-if="oil.same_day" class="badge badge-error badge-xs">SAME DAY</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-right">
|
||||
<router-link :to="{ name: 'finalizeTicket', params: { id: oil.id } }" class="btn btn-sm btn-accent">
|
||||
Finalize
|
||||
</router-link>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- MOBILE VIEW: Cards -->
|
||||
<div class="xl:hidden space-y-4">
|
||||
<div v-for="oil in deliveries" :key="oil.id" class="card bg-base-100 shadow-md">
|
||||
<div class="card-body p-4">
|
||||
<div class="flex justify-between items-start">
|
||||
<div>
|
||||
<h2 class="card-title text-base">{{ oil.customer_name }}</h2>
|
||||
<p class="text-xs text-gray-400">Delivery #{{ oil.id }}</p>
|
||||
</div>
|
||||
<div class="badge badge-success">
|
||||
Delivered
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2 mt-2">
|
||||
<div v-if="oil.prime" class="badge badge-error badge-sm">PRIME</div>
|
||||
<div v-if="oil.same_day" class="badge badge-error badge-sm">SAME DAY</div>
|
||||
</div>
|
||||
|
||||
<div class="text-sm mt-2 grid grid-cols-2 gap-x-4 gap-y-1">
|
||||
<p><strong class="font-semibold">Address:</strong> {{ oil.customer_address }}</p>
|
||||
<p><strong class="font-semibold">Town:</strong> {{ oil.customer_town }}</p>
|
||||
<p><strong class="font-semibold">Gallons:</strong>
|
||||
<span v-if="oil.customer_asked_for_fill" class="badge badge-info badge-xs">FILL</span>
|
||||
<span v-else>{{ oil.gallons_ordered }}</span>
|
||||
</p>
|
||||
<p><strong class="font-semibold">Date:</strong> {{ oil.expected_delivery_date }}</p>
|
||||
</div>
|
||||
|
||||
</td>
|
||||
<td>{{ oil['customer_address'] }}</td>
|
||||
<td>{{ oil['customer_town'] }}</td>
|
||||
|
||||
<td>
|
||||
<div v-if="oil['customer_asked_for_fill'] == 1">Fill</div>
|
||||
<div v-else> {{ oil['gallons_ordered'] }}</div>
|
||||
</td>
|
||||
<td>{{ oil['expected_delivery_date'] }}</td>
|
||||
<td>
|
||||
<div v-if="oil['automatic'] == 0">No</div>
|
||||
<div v-else>Yes</div>
|
||||
</td>
|
||||
<td>
|
||||
<div v-if="oil['prime'] == 0">No</div>
|
||||
<div v-else>Yes</div>
|
||||
</td>
|
||||
<td>
|
||||
<div v-if="oil['same_day'] == 0">No</div>
|
||||
<div v-else>Yes</div>
|
||||
</td>
|
||||
|
||||
<td class="flex gap-5">
|
||||
<router-link :to="{ name: 'finalizeTicket', params: { id: oil['id'] } }">
|
||||
<button class="btn btn-success btn-sm">Finalize</button>
|
||||
</router-link>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="card-actions justify-end flex-wrap gap-2 mt-2">
|
||||
<router-link :to="{ name: 'finalizeTicket', params: { id: oil.id } }" class="btn btn-sm btn-accent">
|
||||
Finalize
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<pagination @paginate="getPage" :records="recordsLength" v-model="page" :per-page="50"
|
||||
:options="options" class="mt-10">
|
||||
|
||||
<!-- Pagination -->
|
||||
<div class="mt-6 flex justify-center">
|
||||
<pagination @paginate="getPage" :records="recordsLength" v-model="page" :per-page="50" :options="options">
|
||||
</pagination>
|
||||
<div class="flex justify-center mb-10"> {{ recordsLength }} items Found</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Footer/>
|
||||
<Footer />
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
@@ -119,7 +143,7 @@ export default defineComponent({
|
||||
return {
|
||||
token: null,
|
||||
user: null,
|
||||
deliveries: [],
|
||||
deliveries: [] as any[],
|
||||
page: 1,
|
||||
perPage: 50,
|
||||
recordsLength: 0,
|
||||
|
||||
@@ -1,111 +1,125 @@
|
||||
<template>
|
||||
<Header />
|
||||
<div class="flex">
|
||||
<div class="">
|
||||
<SideBar />
|
||||
</div>
|
||||
<div class=" w-full px-10 ">
|
||||
<div class="text-sm breadcrumbs pb-10">
|
||||
<div class="w-full px-4 md:px-10 py-4">
|
||||
<!-- Breadcrumbs & Title -->
|
||||
<div class="text-sm breadcrumbs">
|
||||
<ul>
|
||||
<li>
|
||||
<router-link :to="{ name: 'home' }">
|
||||
Home
|
||||
</router-link>
|
||||
</li>
|
||||
<li><router-link :to="{ name: 'home' }">Home</router-link></li>
|
||||
<li>Finalized Deliveries</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="flex start pb-10 text-2xl">Finalized Delivery </div>
|
||||
<!-- Main Content Card -->
|
||||
<div class="bg-neutral rounded-lg p-4 sm:p-6 mt-6">
|
||||
<!-- Header: Title and Count -->
|
||||
<div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4 mb-4">
|
||||
<h2 class="text-lg font-bold">Completed and Finalized Deliveries</h2>
|
||||
<div class="badge badge-ghost">{{ recordsLength }} items Found</div>
|
||||
</div>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<div class="overflow-x-auto bg-neutral">
|
||||
|
||||
<table class="table">
|
||||
<!-- head -->
|
||||
<!-- DESKTOP VIEW: Table -->
|
||||
<div class="overflow-x-auto hidden xl:block">
|
||||
<table class="table w-full">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Ticket Id</th>
|
||||
<th>Name</th>
|
||||
<th>Status</th>
|
||||
|
||||
<th>Address</th>
|
||||
<th>Town</th>
|
||||
<th>Gallons</th>
|
||||
<th>Date</th>
|
||||
<th>Automatic</th>
|
||||
<th>Prime</th>
|
||||
<th>Same Day</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Ticket #</th>
|
||||
<th>Name</th>
|
||||
<th>Status</th>
|
||||
<th>Town / Address</th>
|
||||
<th>Gallons</th>
|
||||
<th>Date</th>
|
||||
<th>Options</th>
|
||||
<th class="text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- row 1 -->
|
||||
<tr v-for="oil in deliveries" :key="oil['id']">
|
||||
<td>{{ oil['id'] }} </td>
|
||||
<router-link :to="{ name: 'customerProfile', params: { id: oil['customer_id'] } }">
|
||||
<td>
|
||||
<div class="hover:text-accent">{{ oil['customer_name'] }} </div>
|
||||
<tr v-for="oil in deliveries" :key="oil.id" class="hover:bg-blue-600 hover:text-white">
|
||||
<td>{{ oil.id }}</td>
|
||||
<td>
|
||||
<router-link :to="{ name: 'customerProfile', params: { id: oil.customer_id } }" class="link link-hover">
|
||||
{{ oil.customer_name }}
|
||||
</router-link>
|
||||
</td>
|
||||
</router-link>
|
||||
<td>
|
||||
<div v-if="oil['delivery_status'] == 0">Waiting</div>
|
||||
<div v-else-if="oil['delivery_status'] == 1">cancelled</div>
|
||||
<div v-else-if="oil['delivery_status'] == 2">Out for Delivery</div>
|
||||
<div v-else-if="oil['delivery_status'] == 3">tommorrow</div>
|
||||
<div v-else-if="oil['delivery_status'] == 4">Partial Delivery</div>
|
||||
<div v-else-if="oil['delivery_status'] == 5">Issue</div>
|
||||
<div v-else-if="oil['delivery_status'] == 10" class="bg-green-600">Finalized</div>
|
||||
<div v-else></div>
|
||||
|
||||
|
||||
</td>
|
||||
|
||||
<td>{{ oil['customer_address'] }}</td>
|
||||
<td>{{ oil['customer_town'] }}</td>
|
||||
<td>
|
||||
<div v-if="oil['customer_asked_for_fill'] == 1">Fill</div>
|
||||
<div v-else> {{ oil['gallons_ordered'] }}</div>
|
||||
</td>
|
||||
<td>{{ oil['expected_delivery_date'] }}</td>
|
||||
<td>
|
||||
<div v-if="oil['automatic'] == 0">No</div>
|
||||
<div v-else>Yes</div>
|
||||
</td>
|
||||
<td>
|
||||
<div v-if="oil['prime'] == 0">No</div>
|
||||
<div v-else>Yes</div>
|
||||
</td>
|
||||
<td>
|
||||
<div v-if="oil['same_day'] == 0">No</div>
|
||||
<div v-else>Yes</div>
|
||||
</td>
|
||||
|
||||
<td class="flex gap-5">
|
||||
<router-link :to="{ name: 'deliveryOrder', params: { id: oil['id'] } }">
|
||||
<button class="btn btn-secondary btn-sm">View Delivery</button>
|
||||
</router-link>
|
||||
<router-link :to="{ name: 'deliveryEdit', params: { id: oil['id'] } }">
|
||||
<button class="btn btn-secondary btn-sm">Edit Delivery</button>
|
||||
</router-link>
|
||||
<router-link :to="{ name: 'Ticket', params: { id: oil['id'] } }">
|
||||
<button class="btn btn-success btn-sm">
|
||||
Print Ticket
|
||||
</button>
|
||||
</router-link>
|
||||
<!-- <button @click.prevent="deleteCall(oil['id'])" class="btn bg-red-600 text-black">Delete</button> -->
|
||||
</td>
|
||||
</tr>
|
||||
<td>
|
||||
<span class="badge badge-sm badge-success">Finalized</span>
|
||||
</td>
|
||||
<td>
|
||||
<div>{{ oil.customer_town }}</div>
|
||||
<div class="text-xs opacity-70">{{ oil.customer_address }}</div>
|
||||
</td>
|
||||
<td>
|
||||
<span v-if="oil.customer_asked_for_fill == 1" class="badge badge-info">FILL</span>
|
||||
<span v-else>{{ oil.gallons_ordered }}</span>
|
||||
</td>
|
||||
<td>{{ oil.expected_delivery_date }}</td>
|
||||
<td>
|
||||
<div class="flex flex-col gap-1">
|
||||
<span v-if="oil.prime" class="badge badge-error badge-xs">PRIME</span>
|
||||
<span v-if="oil.same_day" class="badge badge-error badge-xs">SAME DAY</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-right">
|
||||
<div class="flex items-center justify-end gap-2">
|
||||
<router-link :to="{ name: 'deliveryOrder', params: { id: oil.id } }" class="btn btn-sm btn-ghost">View</router-link>
|
||||
<router-link :to="{ name: 'deliveryEdit', params: { id: oil.id } }" class="btn btn-sm btn-secondary">Edit</router-link>
|
||||
<router-link :to="{ name: 'Ticket', params: { id: oil.id } }" class="btn btn-sm btn-success">Print</router-link>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<pagination @paginate="getPage" :records="recordsLength" v-model="page" :per-page="50"
|
||||
:options="options" class="mt-10">
|
||||
</pagination>
|
||||
<div class="flex justify-center mb-10"> {{ recordsLength }} items Found</div>
|
||||
|
||||
<!-- MOBILE VIEW: Cards -->
|
||||
<div class="xl:hidden space-y-4">
|
||||
<div v-for="oil in deliveries" :key="oil.id" class="card bg-base-100 shadow-md">
|
||||
<div class="card-body p-4">
|
||||
<div class="flex justify-between items-start">
|
||||
<div>
|
||||
<h2 class="card-title text-base">{{ oil.customer_name }}</h2>
|
||||
<p class="text-xs text-gray-400">Ticket #{{ oil.id }}</p>
|
||||
</div>
|
||||
<div class="badge badge-success">
|
||||
Finalized
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2 mt-2">
|
||||
<div v-if="oil.prime" class="badge badge-error badge-sm">PRIME</div>
|
||||
<div v-if="oil.same_day" class="badge badge-error badge-sm">SAME DAY</div>
|
||||
</div>
|
||||
|
||||
<div class="text-sm mt-2 grid grid-cols-2 gap-x-4 gap-y-1">
|
||||
<p><strong class="font-semibold">Address:</strong> {{ oil.customer_address }}</p>
|
||||
<p><strong class="font-semibold">Town:</strong> {{ oil.customer_town }}</p>
|
||||
<p><strong class="font-semibold">Gallons:</strong>
|
||||
<span v-if="oil.customer_asked_for_fill" class="badge badge-info badge-xs">FILL</span>
|
||||
<span v-else>{{ oil.gallons_ordered }}</span>
|
||||
</p>
|
||||
<p><strong class="font-semibold">Date:</strong> {{ oil.expected_delivery_date }}</p>
|
||||
</div>
|
||||
|
||||
<div class="card-actions justify-end flex-wrap gap-2 mt-2">
|
||||
<router-link :to="{ name: 'deliveryOrder', params: { id: oil.id } }" class="btn btn-sm btn-ghost">View</router-link>
|
||||
<router-link :to="{ name: 'deliveryEdit', params: { id: oil.id } }" class="btn btn-sm btn-secondary">Edit</router-link>
|
||||
<router-link :to="{ name: 'Ticket', params: { id: oil.id } }" class="btn btn-sm btn-success">Print</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div class="mt-6 flex justify-center">
|
||||
<pagination @paginate="getPage" :records="recordsLength" v-model="page" :per-page="50" :options="options">
|
||||
</pagination>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Footer/>
|
||||
</template>
|
||||
</div>
|
||||
<Footer />
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {defineComponent} from 'vue'
|
||||
@@ -130,7 +144,7 @@
|
||||
return {
|
||||
token: null,
|
||||
user: null,
|
||||
deliveries: [],
|
||||
deliveries: [] as any[],
|
||||
page: 1,
|
||||
perPage: 50,
|
||||
recordsLength: 0,
|
||||
|
||||
@@ -1,111 +1,124 @@
|
||||
<template>
|
||||
<Header />
|
||||
<div class="flex">
|
||||
<div class="">
|
||||
<SideBar />
|
||||
</div>
|
||||
<div class=" w-full px-10 ">
|
||||
<div class="text-sm breadcrumbs pb-10">
|
||||
<div class="w-full px-4 md:px-10 py-4">
|
||||
<!-- Breadcrumbs & Title -->
|
||||
<div class="text-sm breadcrumbs">
|
||||
<ul>
|
||||
<li>
|
||||
<router-link :to="{ name: 'home' }">
|
||||
Home
|
||||
</router-link>
|
||||
</li>
|
||||
<li><router-link :to="{ name: 'home' }">Home</router-link></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex start pb-10 text-2xl">Issue with Delivery </div>
|
||||
<!-- Main Content Card -->
|
||||
<div class="bg-neutral rounded-lg p-4 sm:p-6 mt-6">
|
||||
<!-- Header: Title and Count -->
|
||||
<div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4 mb-4">
|
||||
<h2 class="text-lg font-bold">Deliveries Requiring Attention</h2>
|
||||
<div class="badge badge-ghost">{{ recordsLength }} items Found</div>
|
||||
</div>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<div class="overflow-x-auto bg-neutral">
|
||||
<table class="table">
|
||||
<!-- head -->
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Ticket Id</th>
|
||||
<th>Name</th>
|
||||
<th>Status</th>
|
||||
|
||||
<th>Address</th>
|
||||
<th>Town</th>
|
||||
<th>Gallons</th>
|
||||
<th>Date</th>
|
||||
<th>Automatic</th>
|
||||
<th>Prime</th>
|
||||
<th>Same Day</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- row 1 -->
|
||||
<tr v-for="oil in deliveries" :key="oil['id']">
|
||||
<td>{{ oil['id'] }} </td>
|
||||
<router-link :to="{ name: 'customerProfile', params: { id: oil['customer_id'] } }">
|
||||
<!-- DESKTOP VIEW: Table -->
|
||||
<div class="overflow-x-auto hidden xl:block">
|
||||
<table class="table w-full">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Ticket #</th>
|
||||
<th>Name</th>
|
||||
<th>Status</th>
|
||||
<th>Town / Address</th>
|
||||
<th>Gallons</th>
|
||||
<th>Date</th>
|
||||
<th>Options</th>
|
||||
<th class="text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="oil in deliveries" :key="oil.id" class="hover:bg-blue-600 hover:text-white">
|
||||
<td>{{ oil.id }}</td>
|
||||
<td>
|
||||
<div class="hover:text-accent">{{ oil['customer_name'] }} </div>
|
||||
</td>
|
||||
</router-link>
|
||||
<td>
|
||||
<div v-if="oil['delivery_status'] == 0">Waiting</div>
|
||||
<div v-else-if="oil['delivery_status'] == 1">cancelled</div>
|
||||
<div v-else-if="oil['delivery_status'] == 2">Out for Delivery</div>
|
||||
<div v-else-if="oil['delivery_status'] == 3">tommorrow</div>
|
||||
<div v-else-if="oil['delivery_status'] == 4">Partial Delivery</div>
|
||||
<div v-else-if="oil['delivery_status'] == 5">Issue</div>
|
||||
<div v-else-if="oil['delivery_status'] == 10" class="bg-green-600">Finalized</div>
|
||||
<div v-else></div>
|
||||
<router-link :to="{ name: 'customerProfile', params: { id: oil.customer_id } }" class="link link-hover">
|
||||
{{ oil.customer_name }}
|
||||
</router-link>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge badge-sm badge-error">Issue</span>
|
||||
</td>
|
||||
<td>
|
||||
<div>{{ oil.customer_town }}</div>
|
||||
<div class="text-xs opacity-70">{{ oil.customer_address }}</div>
|
||||
</td>
|
||||
<td>
|
||||
<span v-if="oil.customer_asked_for_fill == 1" class="badge badge-info">FILL</span>
|
||||
<span v-else>{{ oil.gallons_ordered }}</span>
|
||||
</td>
|
||||
<td>{{ oil.expected_delivery_date }}</td>
|
||||
<td>
|
||||
<div class="flex flex-col gap-1">
|
||||
<span v-if="oil.prime" class="badge badge-error badge-xs">PRIME</span>
|
||||
<span v-if="oil.same_day" class="badge badge-error badge-xs">SAME DAY</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-right">
|
||||
<div class="flex items-center justify-end gap-2">
|
||||
<router-link :to="{ name: 'deliveryOrder', params: { id: oil.id } }" class="btn btn-sm btn-ghost">View</router-link>
|
||||
<router-link :to="{ name: 'deliveryEdit', params: { id: oil.id } }" class="btn btn-sm btn-secondary">Edit</router-link>
|
||||
<router-link :to="{ name: 'Ticket', params: { id: oil.id } }" class="btn btn-sm btn-success">Print</router-link>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- MOBILE VIEW: Cards -->
|
||||
<div class="xl:hidden space-y-4">
|
||||
<div v-for="oil in deliveries" :key="oil.id" class="card bg-base-100 shadow-md">
|
||||
<div class="card-body p-4">
|
||||
<div class="flex justify-between items-start">
|
||||
<div>
|
||||
<h2 class="card-title text-base">{{ oil.customer_name }}</h2>
|
||||
<p class="text-xs text-gray-400">Ticket #{{ oil.id }}</p>
|
||||
</div>
|
||||
<div class="badge badge-error">
|
||||
Issue
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2 mt-2">
|
||||
<div v-if="oil.prime" class="badge badge-error badge-sm">PRIME</div>
|
||||
<div v-if="oil.same_day" class="badge badge-error badge-sm">SAME DAY</div>
|
||||
</div>
|
||||
|
||||
<div class="text-sm mt-2 grid grid-cols-2 gap-x-4 gap-y-1">
|
||||
<p><strong class="font-semibold">Address:</strong> {{ oil.customer_address }}</p>
|
||||
<p><strong class="font-semibold">Town:</strong> {{ oil.customer_town }}</p>
|
||||
<p><strong class="font-semibold">Gallons:</strong>
|
||||
<span v-if="oil.customer_asked_for_fill" class="badge badge-info badge-xs">FILL</span>
|
||||
<span v-else>{{ oil.gallons_ordered }}</span>
|
||||
</p>
|
||||
<p><strong class="font-semibold">Date:</strong> {{ oil.expected_delivery_date }}</p>
|
||||
</div>
|
||||
|
||||
</td>
|
||||
|
||||
|
||||
<td>{{ oil['customer_address'] }}</td>
|
||||
<td>{{ oil['customer_town'] }}</td>
|
||||
<td>
|
||||
<div v-if="oil['customer_asked_for_fill'] == 1">Fill</div>
|
||||
<div v-else> {{ oil['gallons_ordered'] }}</div>
|
||||
</td>
|
||||
<td>{{ oil['expected_delivery_date'] }}</td>
|
||||
<td>
|
||||
<div v-if="oil['automatic'] == 0">No</div>
|
||||
<div v-else>Yes</div>
|
||||
</td>
|
||||
<td>
|
||||
<div v-if="oil['prime'] == 0">No</div>
|
||||
<div v-else>Yes</div>
|
||||
</td>
|
||||
<td>
|
||||
<div v-if="oil['same_day'] == 0">No</div>
|
||||
<div v-else>Yes</div>
|
||||
</td>
|
||||
|
||||
<td class="flex gap-5">
|
||||
<router-link :to="{ name: 'deliveryOrder', params: { id: oil['id'] } }">
|
||||
<button class="btn btn-secondary">View</button>
|
||||
</router-link>
|
||||
<router-link :to="{ name: 'deliveryEdit', params: { id: oil['id'] } }">
|
||||
<button class="btn btn-secondary ">Edit</button>
|
||||
</router-link>
|
||||
<router-link :to="{ name: 'Ticket', params: { id: oil['id'] } }">
|
||||
<button class="btn btn-secondary btn-sm">
|
||||
Print Ticket
|
||||
</button>
|
||||
</router-link>
|
||||
|
||||
<!-- <button @click.prevent="deleteCall(oil['id'])" class="btn bg-red-600 text-black">Delete</button> -->
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="card-actions justify-end flex-wrap gap-2 mt-2">
|
||||
<router-link :to="{ name: 'deliveryOrder', params: { id: oil.id } }" class="btn btn-sm btn-ghost">View</router-link>
|
||||
<router-link :to="{ name: 'deliveryEdit', params: { id: oil.id } }" class="btn btn-sm btn-secondary">Edit</router-link>
|
||||
<router-link :to="{ name: 'Ticket', params: { id: oil.id } }" class="btn btn-sm btn-success">Print</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<pagination @paginate="getPage" :records="recordsLength" v-model="page" :per-page="50"
|
||||
:options="options" class="mt-10">
|
||||
|
||||
<!-- Pagination -->
|
||||
<div class="mt-6 flex justify-center">
|
||||
<pagination @paginate="getPage" :records="recordsLength" v-model="page" :per-page="50" :options="options">
|
||||
</pagination>
|
||||
<div class="flex justify-center mb-10"> {{ recordsLength }} items Found</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Footer/>
|
||||
<Footer />
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
@@ -131,7 +144,7 @@ export default defineComponent({
|
||||
return {
|
||||
token: null,
|
||||
user: null,
|
||||
deliveries: [],
|
||||
deliveries: [] as any[],
|
||||
page: 1,
|
||||
perPage: 50,
|
||||
recordsLength: 0,
|
||||
|
||||
@@ -1,139 +1,160 @@
|
||||
<template>
|
||||
<Header />
|
||||
<div class="flex">
|
||||
<div class="">
|
||||
<SideBar />
|
||||
<div class="flex">
|
||||
<div class="w-full px-4 md:px-10 py-4">
|
||||
<!-- Breadcrumbs & Title -->
|
||||
<div class="text-sm breadcrumbs">
|
||||
<ul>
|
||||
<li><router-link :to="{ name: 'home' }">Home</router-link></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class=" w-full px-10 ">
|
||||
<div class="text-sm breadcrumbs pb-10">
|
||||
<ul>
|
||||
<li>
|
||||
<router-link :to="{ name: 'home' }">
|
||||
Home
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- Main Content Card -->
|
||||
<div class="bg-neutral rounded-lg p-4 sm:p-6 mt-6">
|
||||
<!-- Header: Title and Count -->
|
||||
<div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4 mb-4">
|
||||
<h2 class="text-lg font-bold">Deliveries Awaiting Payment</h2>
|
||||
<div class="badge badge-ghost">{{ recordsLength }} items Found</div>
|
||||
</div>
|
||||
|
||||
<div class="flex start pb-10 text-2xl">Pending Payment Deliveries </div>
|
||||
<div class="flex justify-end pb-5">
|
||||
|
||||
</div>
|
||||
|
||||
<div class="overflow-x-auto">
|
||||
<table class="table">
|
||||
<!-- head -->
|
||||
<thead class=" bg-neutral">
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<!-- DESKTOP VIEW: Table -->
|
||||
<div class="overflow-x-auto hidden xl:block">
|
||||
<table class="table w-full">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Id</th>
|
||||
<th>Delivery #</th>
|
||||
<th>Name</th>
|
||||
<th>Status</th>
|
||||
|
||||
<th>Address</th>
|
||||
<th>Town</th>
|
||||
<th>Town / Address</th>
|
||||
<th>Gallons</th>
|
||||
<th>Date</th>
|
||||
<th>Auto</th>
|
||||
<th>Prime</th>
|
||||
<th>Same Day</th>
|
||||
<th>Emergency</th>
|
||||
<th>Payment</th>
|
||||
<th></th>
|
||||
<th>Options</th>
|
||||
<th class="text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="bg-neutral">
|
||||
<!-- row 1 -->
|
||||
|
||||
<tr v-for="oil in deliveries" :key="oil['id']">
|
||||
|
||||
<td>{{ oil['id'] }} </td>
|
||||
<router-link :to="{ name: 'customerProfile', params: { id: oil['customer_id'] } }">
|
||||
<td>
|
||||
<div class="hover:text-accent">{{ oil['customer_name'] }} </div>
|
||||
</td>
|
||||
</router-link>
|
||||
<tbody>
|
||||
<tr v-for="oil in deliveries" :key="oil.id" class="hover:bg-blue-600 hover:text-white">
|
||||
<td>{{ oil.id }}</td>
|
||||
<td>
|
||||
<div v-if="oil['delivery_status'] == 0">Waiting</div>
|
||||
<div v-else-if="oil['delivery_status'] == 1">cancelled</div>
|
||||
<div v-else-if="oil['delivery_status'] == 2">Out for Delivery</div>
|
||||
<div v-else-if="oil['delivery_status'] == 3">tommorrow</div>
|
||||
<div v-else-if="oil['delivery_status'] == 4">Partial Delivery</div>
|
||||
<div v-else-if="oil['delivery_status'] == 5">Issue</div>
|
||||
<div v-else-if="oil['delivery_status'] == 10" class="bg-green-600">Finalized</div>
|
||||
<div v-else></div>
|
||||
|
||||
|
||||
</td>
|
||||
|
||||
|
||||
<td>{{ oil['customer_address'] }}</td>
|
||||
<td>{{ oil['customer_town'] }}</td>
|
||||
<td>
|
||||
<div v-if="oil['customer_asked_for_fill'] == 1">Fill</div>
|
||||
<div v-else> {{ oil['gallons_ordered'] }}</div>
|
||||
</td>
|
||||
<td>{{ oil['expected_delivery_date'] }}</td>
|
||||
<td>
|
||||
<div v-if="oil['automatic'] == 0">No</div>
|
||||
<div v-else>Yes</div>
|
||||
</td>
|
||||
<td>
|
||||
<div v-if="oil['prime'] == 0">No</div>
|
||||
<div v-else class="text-red-600">Yes</div>
|
||||
</td>
|
||||
<td>
|
||||
<div v-if="oil['same_day'] == 0">No</div>
|
||||
<div v-else class="text-red-600">Yes</div>
|
||||
</td>
|
||||
<td>
|
||||
<div v-if="oil['emergency'] == 0">No</div>
|
||||
<div v-else class="text-red-600">Yes</div>
|
||||
</td>
|
||||
<td>
|
||||
|
||||
<div v-if="oil['payment_type'] == 0">Cash</div>
|
||||
<div v-else-if="oil['payment_type'] == 1">CC</div>
|
||||
<div v-else-if="oil['payment_type'] == 2">Cash/CC</div>
|
||||
<div v-else-if="oil['payment_type'] == 3">Check</div>
|
||||
<div v-else-if="oil['payment_type'] == 4">Other</div>
|
||||
|
||||
<div v-else></div>
|
||||
|
||||
</td>
|
||||
<td class="flex gap-2">
|
||||
|
||||
<router-link :to="{ name: 'deliveryOrder', params: { id: oil['id'] } }">
|
||||
<button class="btn btn-secondary btn-sm">View Delivery</button>
|
||||
<router-link :to="{ name: 'customerProfile', params: { id: oil.customer_id } }" class="link link-hover">
|
||||
{{ oil.customer_name }}
|
||||
</router-link>
|
||||
<router-link :to="{ name: 'deliveryEdit', params: { id: oil['id'] } }">
|
||||
<button class="btn btn-secondary btn-sm">Edit Delivery</button>
|
||||
</router-link>
|
||||
|
||||
<router-link :to="{ name: 'finalizeTicket', params: { id: oil['id'] } }">
|
||||
<button class="btn btn-secondary btn-sm">Finalize</button>
|
||||
</router-link>
|
||||
<router-link :to="{ name: 'Ticket', params: { id: oil['id'] } }">
|
||||
<button class="btn btn-success btn-sm">
|
||||
Print Ticket
|
||||
</button>
|
||||
</router-link>
|
||||
<!-- <button @click.prevent="deleteCall(oil['id'])" class="btn btn-error btn-sm">
|
||||
Delete
|
||||
</button> -->
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge badge-sm" :class="{
|
||||
'badge-warning': oil.delivery_status == 0,
|
||||
'badge-success': oil.delivery_status == 10,
|
||||
'badge-info': oil.delivery_status == 2,
|
||||
'badge-error': [1, 5].includes(oil.delivery_status),
|
||||
}">
|
||||
<span v-if="oil.delivery_status == 0">Waiting</span>
|
||||
<span v-else-if="oil.delivery_status == 1">Cancelled</span>
|
||||
<span v-else-if="oil.delivery_status == 2">Out for Delivery</span>
|
||||
<span v-else-if="oil.delivery_status == 10">Finalized</span>
|
||||
<span v-else>N/A</span>
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<div>{{ oil.customer_town }}</div>
|
||||
<div class="text-xs opacity-70">{{ oil.customer_address }}</div>
|
||||
</td>
|
||||
<td>
|
||||
<span v-if="oil.customer_asked_for_fill == 1" class="badge badge-info">FILL</span>
|
||||
<span v-else>{{ oil.gallons_ordered }}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span v-if="oil.payment_type == 0">Cash</span>
|
||||
<span v-else-if="oil.payment_type == 1">CC</span>
|
||||
<span v-else-if="oil.payment_type == 2">Cash/CC</span>
|
||||
<span v-else-if="oil.payment_type == 3">Check</span>
|
||||
<span v-else-if="oil.payment_type == 4">Other</span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="flex flex-col gap-1">
|
||||
<span v-if="oil.prime" class="badge badge-error badge-xs">PRIME</span>
|
||||
<span v-if="oil.same_day" class="badge badge-error badge-xs">SAME DAY</span>
|
||||
<span v-if="oil.emergency" class="badge badge-error badge-xs">EMERGENCY</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-right">
|
||||
<div class="flex items-center justify-end gap-2">
|
||||
<router-link :to="{ name: 'deliveryOrder', params: { id: oil.id } }" class="btn btn-sm btn-ghost">View</router-link>
|
||||
<router-link :to="{ name: 'deliveryEdit', params: { id: oil.id } }" class="btn btn-sm btn-secondary">Edit</router-link>
|
||||
<router-link :to="{ name: 'finalizeTicket', params: { id: oil.id } }" class="btn btn-sm btn-accent">Finalize</router-link>
|
||||
<router-link :to="{ name: 'Ticket', params: { id: oil.id } }" class="btn btn-sm btn-success">Print</router-link>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
<pagination @paginate="getPage" :records="recordsLength" v-model="page" :per-page="50" :options="options" class="mt-10">
|
||||
</pagination>
|
||||
<div class="flex justify-center mb-10"> {{ recordsLength }} items Found</div>
|
||||
|
||||
<!-- MOBILE VIEW: Cards -->
|
||||
<div class="xl:hidden space-y-4">
|
||||
<div v-for="oil in deliveries" :key="oil.id" class="card bg-base-100 shadow-md">
|
||||
<div class="card-body p-4">
|
||||
<div class="flex justify-between items-start">
|
||||
<div>
|
||||
<h2 class="card-title text-base">{{ oil.customer_name }}</h2>
|
||||
<p class="text-xs text-gray-400">Delivery #{{ oil.id }}</p>
|
||||
</div>
|
||||
<div class="badge" :class="{
|
||||
'badge-warning': oil.delivery_status == 0,
|
||||
'badge-success': oil.delivery_status == 10,
|
||||
'badge-info': oil.delivery_status == 2,
|
||||
'badge-error': [1, 5].includes(oil.delivery_status),
|
||||
}">
|
||||
<span v-if="oil.delivery_status == 0">Waiting</span>
|
||||
<span v-else-if="oil.delivery_status == 1">Cancelled</span>
|
||||
<span v-else-if="oil.delivery_status == 2">Out for Delivery</span>
|
||||
<span v-else-if="oil.delivery_status == 10">Finalized</span>
|
||||
<span v-else>N/A</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2 mt-2">
|
||||
<div v-if="oil.prime" class="badge badge-error badge-sm">PRIME</div>
|
||||
<div v-if="oil.same_day" class="badge badge-error badge-sm">SAME DAY</div>
|
||||
<div v-if="oil.emergency" class="badge badge-error badge-sm">EMERGENCY</div>
|
||||
</div>
|
||||
|
||||
<div class="text-sm mt-2 grid grid-cols-2 gap-x-4 gap-y-1">
|
||||
<p><strong class="font-semibold">Address:</strong> {{ oil.customer_address }}</p>
|
||||
<p><strong class="font-semibold">Town:</strong> {{ oil.customer_town }}</p>
|
||||
<p><strong class="font-semibold">Gallons:</strong>
|
||||
<span v-if="oil.customer_asked_for_fill" class="badge badge-info badge-xs">FILL</span>
|
||||
<span v-else>{{ oil.gallons_ordered }}</span>
|
||||
</p>
|
||||
<p><strong class="font-semibold">Payment:</strong>
|
||||
<span v-if="oil.payment_type == 0">Cash</span>
|
||||
<span v-else-if="oil.payment_type == 1">CC</span>
|
||||
<span v-else-if="oil.payment_type == 2">Cash/CC</span>
|
||||
<span v-else-if="oil.payment_type == 3">Check</span>
|
||||
<span v-else-if="oil.payment_type == 4">Other</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="card-actions justify-end flex-wrap gap-2 mt-2">
|
||||
<router-link :to="{ name: 'deliveryOrder', params: { id: oil.id } }" class="btn btn-sm btn-ghost">View</router-link>
|
||||
<router-link :to="{ name: 'deliveryEdit', params: { id: oil.id } }" class="btn btn-sm btn-secondary">Edit</router-link>
|
||||
<router-link :to="{ name: 'finalizeTicket', params: { id: oil.id } }" class="btn btn-sm btn-accent">Finalize</router-link>
|
||||
<router-link :to="{ name: 'Ticket', params: { id: oil.id } }" class="btn btn-sm btn-success">Print</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div class="mt-6 flex justify-center">
|
||||
<pagination @paginate="getPage" :records="recordsLength" v-model="page" :per-page="50" :options="options">
|
||||
</pagination>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
</template>
|
||||
</div>
|
||||
<Footer />
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue'
|
||||
@@ -158,7 +179,7 @@
|
||||
return {
|
||||
token: null,
|
||||
user: null,
|
||||
deliveries: [],
|
||||
deliveries: [] as any[],
|
||||
page: 1,
|
||||
perPage: 50,
|
||||
recordsLength: 0,
|
||||
|
||||
@@ -1,138 +1,170 @@
|
||||
<template>
|
||||
<Header />
|
||||
<div class="flex">
|
||||
<div class="">
|
||||
<SideBar />
|
||||
</div>
|
||||
<div class=" w-full px-10 ">
|
||||
<div class="text-sm breadcrumbs pb-10">
|
||||
<div class="w-full px-4 md:px-10 py-4">
|
||||
<!-- Breadcrumbs & Title -->
|
||||
<div class="text-sm breadcrumbs">
|
||||
<ul>
|
||||
<li>
|
||||
<router-link :to="{ name: 'home' }">
|
||||
Home
|
||||
</router-link>
|
||||
</li>
|
||||
<li><router-link :to="{ name: 'home' }">Home</router-link></li>
|
||||
<li>Today's Deliveries</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex start pb-10 text-2xl">Todays Deliveries </div>
|
||||
<div class="flex justify-end pb-5">
|
||||
<!-- Main Content Card -->
|
||||
<div class="bg-neutral rounded-lg p-4 sm:p-6 mt-6">
|
||||
<!-- Header: Search and Count -->
|
||||
<div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4 mb-4">
|
||||
<h2 class="text-lg font-bold">Todays Deliveries</h2>
|
||||
<div class="form-control">
|
||||
<label class="label pt-1 pb-0">
|
||||
<span class="label-text-alt">{{ recordsLength }} deliveries found</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
|
||||
<div class="overflow-x-auto">
|
||||
<table class="table">
|
||||
<!-- head -->
|
||||
<thead class=" bg-neutral">
|
||||
<tr>
|
||||
<th>Id</th>
|
||||
<th>Name</th>
|
||||
<th>Status</th>
|
||||
<th>Town</th>
|
||||
<th>Address</th>
|
||||
<th>Gallons</th>
|
||||
<th>Date</th>
|
||||
<th>Auto</th>
|
||||
<th>Prime</th>
|
||||
<th>Same Day</th>
|
||||
<th>Emergency</th>
|
||||
<th>Payment</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="bg-neutral">
|
||||
<!-- row 1 -->
|
||||
|
||||
<tr v-for="oil in deliveries" :key="oil['id']">
|
||||
|
||||
<td>{{ oil['id'] }} </td>
|
||||
<router-link :to="{ name: 'customerProfile', params: { id: oil['customer_id'] } }">
|
||||
<!-- DESKTOP VIEW: Table -->
|
||||
<div class="overflow-x-auto hidden xl:block">
|
||||
<table class="table w-full">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Delivery #</th>
|
||||
<th>Name</th>
|
||||
<th>Status</th>
|
||||
<th>Town / Address</th>
|
||||
<th>Gallons</th>
|
||||
<th>Options</th>
|
||||
<th>Payment</th>
|
||||
<th class="text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="oil in deliveries" :key="oil.id" class="hover:bg-blue-600 hover:text-white">
|
||||
<td>{{ oil.id }}</td>
|
||||
<td>
|
||||
<div class="hover:text-accent">{{ oil['customer_name'] }} </div>
|
||||
<router-link :to="{ name: 'customerProfile', params: { id: oil.customer_id } }" class="link link-hover">
|
||||
{{ oil.customer_name }}
|
||||
</router-link>
|
||||
</td>
|
||||
</router-link>
|
||||
<td>
|
||||
<div v-if="oil['delivery_status'] == 0">Waiting</div>
|
||||
<div v-else-if="oil['delivery_status'] == 1">cancelled</div>
|
||||
<div v-else-if="oil['delivery_status'] == 2">Out for Delivery</div>
|
||||
<div v-else-if="oil['delivery_status'] == 3">tommorrow</div>
|
||||
<div v-else-if="oil['delivery_status'] == 4">Partial Delivery</div>
|
||||
<div v-else-if="oil['delivery_status'] == 5">Issue</div>
|
||||
<div v-else-if="oil['delivery_status'] == 10" class="bg-green-600">Finalized</div>
|
||||
<div v-else></div>
|
||||
<td>
|
||||
<span class="badge badge-sm" :class="{
|
||||
'badge-warning': oil.delivery_status == 0,
|
||||
'badge-success': oil.delivery_status == 10,
|
||||
'badge-info': oil.delivery_status == 2,
|
||||
'badge-error': [1, 5].includes(oil.delivery_status),
|
||||
}">
|
||||
<span v-if="oil.delivery_status == 0">Waiting</span>
|
||||
<span v-else-if="oil.delivery_status == 1">Cancelled</span>
|
||||
<span v-else-if="oil.delivery_status == 2">Out for Delivery</span>
|
||||
<span v-else-if="oil.delivery_status == 3">Tomorrow</span>
|
||||
<span v-else-if="oil.delivery_status == 4">Partial</span>
|
||||
<span v-else-if="oil.delivery_status == 5">Issue</span>
|
||||
<span v-else-if="oil.delivery_status == 10">Finalized</span>
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<div>{{ oil.customer_town }}</div>
|
||||
<div class="text-xs opacity-70">{{ oil.customer_address }}</div>
|
||||
</td>
|
||||
<td>
|
||||
<span v-if="oil.customer_asked_for_fill == 1" class="badge badge-info">FILL</span>
|
||||
<span v-else>{{ oil.gallons_ordered }}</span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="flex flex-col gap-1">
|
||||
<span v-if="oil.prime" class="badge badge-error badge-xs">PRIME</span>
|
||||
<span v-if="oil.same_day" class="badge badge-error badge-xs">SAME DAY</span>
|
||||
<span v-if="oil.emergency" class="badge badge-error badge-xs">EMERGENCY</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<span v-if="oil.payment_type == 0">Cash</span>
|
||||
<span v-else-if="oil.payment_type == 1">CC</span>
|
||||
<span v-else-if="oil.payment_type == 2">Cash/CC</span>
|
||||
<span v-else-if="oil.payment_type == 3">Check</span>
|
||||
<span v-else-if="oil.payment_type == 4">Other</span>
|
||||
</td>
|
||||
<td class="text-right">
|
||||
<div class="flex items-center justify-end gap-2">
|
||||
<router-link :to="{ name: 'deliveryOrder', params: { id: oil.id } }" class="btn btn-sm btn-ghost">View</router-link>
|
||||
<router-link :to="{ name: 'deliveryEdit', params: { id: oil.id } }" class="btn btn-sm btn-secondary">Edit</router-link>
|
||||
<router-link :to="{ name: 'finalizeTicket', params: { id: oil.id } }" v-if="oil.delivery_status != 10" class="btn btn-sm btn-accent">Finalize</router-link>
|
||||
<router-link :to="{ name: 'Ticket', params: { id: oil.id } }" class="btn btn-sm btn-success">Print</router-link>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- MOBILE VIEW: Cards -->
|
||||
<div class="xl:hidden space-y-4">
|
||||
<div v-for="oil in deliveries" :key="oil.id" class="card bg-base-100 shadow-md">
|
||||
<div class="card-body p-4">
|
||||
<div class="flex justify-between items-start">
|
||||
<div>
|
||||
<h2 class="card-title text-base">{{ oil.customer_name }}</h2>
|
||||
<p class="text-xs text-gray-400">Delivery #{{ oil.id }}</p>
|
||||
</div>
|
||||
<div class="badge" :class="{
|
||||
'badge-warning': oil.delivery_status == 0,
|
||||
'badge-success': oil.delivery_status == 10,
|
||||
'badge-info': oil.delivery_status == 2,
|
||||
'badge-error': [1, 5].includes(oil.delivery_status),
|
||||
}">
|
||||
<span v-if="oil.delivery_status == 0">Waiting</span>
|
||||
<span v-else-if="oil.delivery_status == 1">Cancelled</span>
|
||||
<span v-else-if="oil.delivery_status == 2">Out for Delivery</span>
|
||||
<span v-else-if="oil.delivery_status == 3">Tomorrow</span>
|
||||
<span v-else-if="oil.delivery_status == 4">Partial</span>
|
||||
<span v-else-if="oil.delivery_status == 5">Issue</span>
|
||||
<span v-else-if="oil.delivery_status == 10">Finalized</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</td>
|
||||
<div class="flex gap-2 mt-2">
|
||||
<div v-if="oil.prime" class="badge badge-error badge-sm">PRIME</div>
|
||||
<div v-if="oil.same_day" class="badge badge-error badge-sm">SAME DAY</div>
|
||||
<div v-if="oil.emergency" class="badge badge-error badge-sm">EMERGENCY</div>
|
||||
</div>
|
||||
|
||||
<td>{{ oil['customer_town'] }}</td>
|
||||
<td>{{ oil['customer_address'] }}</td>
|
||||
<td>
|
||||
<div v-if="oil['customer_asked_for_fill'] == 1">Fill</div>
|
||||
<div v-else> {{ oil['gallons_ordered'] }}</div>
|
||||
</td>
|
||||
<td>{{ oil['expected_delivery_date'] }}</td>
|
||||
<td>
|
||||
<div v-if="oil['automatic'] == 0">No</div>
|
||||
<div v-else>Yes</div>
|
||||
</td>
|
||||
<td>
|
||||
<div v-if="oil['prime'] == 0">No</div>
|
||||
<div v-else class="text-red-600">Yes</div>
|
||||
</td>
|
||||
<td>
|
||||
<div v-if="oil['same_day'] == 0">No</div>
|
||||
<div v-else class="text-red-600">Yes</div>
|
||||
</td>
|
||||
<td>
|
||||
<div v-if="oil['emergency'] == 0">No</div>
|
||||
<div v-else class="text-red-600">Yes</div>
|
||||
</td>
|
||||
<td>
|
||||
|
||||
<div v-if="oil['payment_type'] == 0">Cash</div>
|
||||
<div v-else-if="oil['payment_type'] == 1">CC</div>
|
||||
<div v-else-if="oil['payment_type'] == 2">Cash/CC</div>
|
||||
<div v-else-if="oil['payment_type'] == 3">Check</div>
|
||||
<div v-else-if="oil['payment_type'] == 4">Other</div>
|
||||
|
||||
<div v-else></div>
|
||||
|
||||
</td>
|
||||
<td class="flex gap-2">
|
||||
|
||||
<router-link :to="{ name: 'deliveryOrder', params: { id: oil['id'] } }">
|
||||
<button class="btn btn-secondary btn-sm">View Delivery</button>
|
||||
</router-link>
|
||||
<router-link :to="{ name: 'deliveryEdit', params: { id: oil['id'] } }">
|
||||
<button class="btn btn-secondary btn-sm">Edit Delivery</button>
|
||||
</router-link>
|
||||
<router-link :to="{ name: 'finalizeTicket', params: { id: oil['id'] } }">
|
||||
<button class="btn btn-secondary btn-sm">Finalize</button>
|
||||
</router-link>
|
||||
<router-link :to="{ name: 'Ticket', params: { id: oil['id'] } }">
|
||||
<button class="btn btn-success btn-sm">
|
||||
Print Ticket
|
||||
</button>
|
||||
</router-link>
|
||||
<!-- <button @click.prevent="deleteCall(oil['id'])" class="btn btn-error btn-sm">
|
||||
Delete
|
||||
</button> -->
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="text-sm mt-2 grid grid-cols-2 gap-x-4 gap-y-1">
|
||||
<p><strong class="font-semibold">Address:</strong> {{ oil.customer_address }}</p>
|
||||
<p><strong class="font-semibold">Town:</strong> {{ oil.customer_town }}</p>
|
||||
<p><strong class="font-semibold">Gallons:</strong>
|
||||
<span v-if="oil.customer_asked_for_fill" class="badge badge-info badge-xs">FILL</span>
|
||||
<span v-else>{{ oil.gallons_ordered }}</span>
|
||||
</p>
|
||||
<p><strong class="font-semibold">Payment:</strong>
|
||||
<span v-if="oil.payment_type == 0">Cash</span>
|
||||
<span v-else-if="oil.payment_type == 1">CC</span>
|
||||
<span v-else-if="oil.payment_type == 2">Cash/CC</span>
|
||||
<span v-else-if="oil.payment_type == 3">Check</span>
|
||||
<span v-else-if="oil.payment_type == 4">Other</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="card-actions justify-end flex-wrap gap-2 mt-2">
|
||||
<router-link :to="{ name: 'deliveryOrder', params: { id: oil.id } }" class="btn btn-sm btn-ghost">View</router-link>
|
||||
<router-link :to="{ name: 'deliveryEdit', params: { id: oil.id } }" class="btn btn-sm btn-secondary">Edit</router-link>
|
||||
<router-link :to="{ name: 'finalizeTicket', params: { id: oil.id } }" v-if="oil.delivery_status != 10" class="btn btn-sm btn-accent">Finalize</router-link>
|
||||
<router-link :to="{ name: 'Ticket', params: { id: oil.id } }" class="btn btn-sm btn-success">Print</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div class="mt-6 flex justify-center">
|
||||
<pagination @paginate="getPage" :records="recordsLength" v-model="page" :per-page="50" :options="options">
|
||||
</pagination>
|
||||
</div>
|
||||
</div>
|
||||
<pagination @paginate="getPage" :records="recordsLength" v-model="page" :per-page="50" :options="options"
|
||||
class="mt-10">
|
||||
</pagination>
|
||||
<div class="flex justify-center mb-10"> {{ recordsLength }} items Found</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue'
|
||||
import axios from 'axios'
|
||||
@@ -156,7 +188,7 @@ export default defineComponent({
|
||||
return {
|
||||
token: null,
|
||||
user: null,
|
||||
deliveries: [],
|
||||
deliveries: [] as any[],
|
||||
page: 1,
|
||||
perPage: 50,
|
||||
recordsLength: 0,
|
||||
|
||||
@@ -1,115 +1,146 @@
|
||||
<template>
|
||||
<Header />
|
||||
<div class="flex">
|
||||
<div class="">
|
||||
<SideBar />
|
||||
</div>
|
||||
<div class=" w-full px-10 ">
|
||||
<div class="text-sm breadcrumbs mb-10">
|
||||
<div class="w-full px-4 md:px-10 py-4">
|
||||
<!-- Breadcrumbs & Title -->
|
||||
<div class="text-sm breadcrumbs">
|
||||
<ul>
|
||||
<li>
|
||||
<router-link :to="{ name: 'home' }">
|
||||
Home
|
||||
</router-link>
|
||||
</li>
|
||||
<li><router-link :to="{ name: 'home' }">Home</router-link></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="flex start pb-10 text-2xl">Tommorrows Deliveries </div>
|
||||
<div class="flex justify-end pb-5">
|
||||
<!-- Main Content Card -->
|
||||
<div class="bg-neutral rounded-lg p-4 sm:p-6 mt-6">
|
||||
<!-- Header: Title and Count (No Search Input) -->
|
||||
<div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4 mb-4">
|
||||
<h2 class="text-lg font-bold">Deliveries Scheduled</h2>
|
||||
<div class="badge badge-ghost">{{ recordsLength }} deliveries found</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
|
||||
<div class="overflow-x-auto bg-neutral">
|
||||
<div class="flex start"> </div>
|
||||
<table class="table">
|
||||
<!-- head -->
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Account Id</th>
|
||||
<th>Name</th>
|
||||
<th>Status</th>
|
||||
|
||||
<th>Address</th>
|
||||
<th>Town</th>
|
||||
<th>Gallons</th>
|
||||
<th>Date</th>
|
||||
<th>Automatic</th>
|
||||
<th>Prime</th>
|
||||
<th>Same Day</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- row 1 -->
|
||||
<tr v-for="oil in deliveries" :key="oil['id']">
|
||||
<td>{{ oil['id'] }} </td>
|
||||
<router-link :to="{ name: 'customerProfile', params: { id: oil['customer_id'] } }">
|
||||
|
||||
<td>
|
||||
<div class="hover:text-accent">{{ oil['customer_name'] }} </div>
|
||||
</td>
|
||||
</router-link>
|
||||
<td>
|
||||
<div v-if="oil['delivery_status'] == 0">Waiting</div>
|
||||
<div v-else-if="oil['delivery_status'] == 1">cancelled</div>
|
||||
<div v-else-if="oil['delivery_status'] == 2">Out for Delivery</div>
|
||||
<div v-else-if="oil['delivery_status'] == 3">tommorrow</div>
|
||||
<div v-else-if="oil['delivery_status'] == 4">Partial Delivery</div>
|
||||
<div v-else-if="oil['delivery_status'] == 5">Issue</div>
|
||||
<div v-else-if="oil['delivery_status'] == 10">Finalized</div>
|
||||
<div v-else></div>
|
||||
</td>
|
||||
|
||||
|
||||
<td>{{ oil['customer_address'] }}</td>
|
||||
<td>{{ oil['customer_town'] }}</td>
|
||||
<td>
|
||||
<div v-if="oil['customer_asked_for_fill'] == 1">Fill</div>
|
||||
<div v-else> {{ oil['gallons_ordered'] }}</div>
|
||||
</td>
|
||||
<td>{{ oil['expected_delivery_date'] }}</td>
|
||||
<td>
|
||||
<div v-if="oil['automatic'] == 0">No</div>
|
||||
<div v-else>Yes</div>
|
||||
</td>
|
||||
<td>
|
||||
<div v-if="oil['prime'] == 0">No</div>
|
||||
<div v-else>Yes</div>
|
||||
</td>
|
||||
<td>
|
||||
<div v-if="oil['same_day'] == 0">No</div>
|
||||
<div v-else>Yes</div>
|
||||
</td>
|
||||
|
||||
<td class="flex gap-5">
|
||||
<router-link :to="{ name: 'deliveryOrder', params: { id: oil['id'] } }">
|
||||
<button class="btn btn-secondary btn-sm">View Delivery</button>
|
||||
</router-link>
|
||||
<router-link :to="{ name: 'deliveryEdit', params: { id: oil['id'] } }">
|
||||
<button class="btn btn-secondary btn-sm">Edit Delivery</button>
|
||||
</router-link>
|
||||
<router-link :to="{ name: 'finalizeTicket', params: { id: oil['id'] } }">
|
||||
<button class="btn btn-secondary btn-sm">Finalize</button>
|
||||
<!-- DESKTOP VIEW: Table -->
|
||||
<div class="overflow-x-auto hidden xl:block">
|
||||
<table class="table w-full">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Delivery #</th>
|
||||
<th>Name</th>
|
||||
<th>Status</th>
|
||||
<th>Town / Address</th>
|
||||
<th>Gallons</th>
|
||||
<th>Options</th>
|
||||
<th class="text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="oil in deliveries" :key="oil.id" class="hover:bg-blue-600 hover:text-white">
|
||||
<td>{{ oil.id }}</td>
|
||||
<td>
|
||||
<router-link :to="{ name: 'customerProfile', params: { id: oil.customer_id } }" class="link link-hover">
|
||||
{{ oil.customer_name }}
|
||||
</router-link>
|
||||
<router-link :to="{ name: 'Ticket', params: { id: oil['id'] } }">
|
||||
<button class="btn btn-success btn-sm ">
|
||||
Print Ticket
|
||||
</button>
|
||||
</router-link>
|
||||
<!-- <button @click.prevent="deleteCall(oil['id'])" class="btn btn-error btn-sm">
|
||||
Delete
|
||||
</button> -->
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge badge-sm" :class="{
|
||||
'badge-warning': oil.delivery_status == 0,
|
||||
'badge-success': oil.delivery_status == 10,
|
||||
'badge-info': oil.delivery_status == 2,
|
||||
'badge-error': [1, 5].includes(oil.delivery_status),
|
||||
}">
|
||||
<span v-if="oil.delivery_status == 0">Waiting</span>
|
||||
<span v-else-if="oil.delivery_status == 1">Cancelled</span>
|
||||
<span v-else-if="oil.delivery_status == 2">Out for Delivery</span>
|
||||
<span v-else-if="oil.delivery_status == 3">Tomorrow</span>
|
||||
<span v-else-if="oil.delivery_status == 4">Partial</span>
|
||||
<span v-else-if="oil.delivery_status == 5">Issue</span>
|
||||
<span v-else-if="oil.delivery_status == 10">Finalized</span>
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<div>{{ oil.customer_town }}</div>
|
||||
<div class="text-xs opacity-70">{{ oil.customer_address }}</div>
|
||||
</td>
|
||||
<td>
|
||||
<span v-if="oil.customer_asked_for_fill == 1" class="badge badge-info">FILL</span>
|
||||
<span v-else>{{ oil.gallons_ordered }}</span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="flex flex-col gap-1">
|
||||
<span v-if="oil.prime" class="badge badge-error badge-xs">PRIME</span>
|
||||
<span v-if="oil.same_day" class="badge badge-error badge-xs">SAME DAY</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-right">
|
||||
<div class="flex items-center justify-end gap-2">
|
||||
<router-link :to="{ name: 'deliveryOrder', params: { id: oil.id } }" class="btn btn-sm btn-ghost">View</router-link>
|
||||
<router-link :to="{ name: 'deliveryEdit', params: { id: oil.id } }" class="btn btn-sm btn-secondary">Edit</router-link>
|
||||
<router-link :to="{ name: 'finalizeTicket', params: { id: oil.id } }" v-if="oil.delivery_status != 10" class="btn btn-sm btn-accent">Finalize</router-link>
|
||||
<router-link :to="{ name: 'Ticket', params: { id: oil.id } }" class="btn btn-sm btn-success">Print</router-link>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- MOBILE VIEW: Cards -->
|
||||
<div class="xl:hidden space-y-4">
|
||||
<div v-for="oil in deliveries" :key="oil.id" class="card bg-base-100 shadow-md">
|
||||
<div class="card-body p-4">
|
||||
<div class="flex justify-between items-start">
|
||||
<div>
|
||||
<h2 class="card-title text-base">{{ oil.customer_name }}</h2>
|
||||
<p class="text-xs text-gray-400">Delivery #{{ oil.id }}</p>
|
||||
</div>
|
||||
<div class="badge" :class="{
|
||||
'badge-warning': oil.delivery_status == 0,
|
||||
'badge-success': oil.delivery_status == 10,
|
||||
'badge-info': oil.delivery_status == 2,
|
||||
'badge-error': [1, 5].includes(oil.delivery_status),
|
||||
}">
|
||||
<span v-if="oil.delivery_status == 0">Waiting</span>
|
||||
<span v-else-if="oil.delivery_status == 1">Cancelled</span>
|
||||
<span v-else-if="oil.delivery_status == 2">Out for Delivery</span>
|
||||
<span v-else-if="oil.delivery_status == 3">Tomorrow</span>
|
||||
<span v-else-if="oil.delivery_status == 4">Partial</span>
|
||||
<span v-else-if="oil.delivery_status == 5">Issue</span>
|
||||
<span v-else-if="oil.delivery_status == 10">Finalized</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2 mt-2">
|
||||
<div v-if="oil.prime" class="badge badge-error badge-sm">PRIME</div>
|
||||
<div v-if="oil.same_day" class="badge badge-error badge-sm">SAME DAY</div>
|
||||
</div>
|
||||
|
||||
<div class="text-sm mt-2 grid grid-cols-2 gap-x-4 gap-y-1">
|
||||
<p><strong class="font-semibold">Address:</strong> {{ oil.customer_address }}</p>
|
||||
<p><strong class="font-semibold">Town:</strong> {{ oil.customer_town }}</p>
|
||||
<p><strong class="font-semibold">Gallons:</strong>
|
||||
<span v-if="oil.customer_asked_for_fill" class="badge badge-info badge-xs">FILL</span>
|
||||
<span v-else>{{ oil.gallons_ordered }}</span>
|
||||
</p>
|
||||
<p><strong class="font-semibold">Date:</strong> {{ oil.expected_delivery_date }}</p>
|
||||
</div>
|
||||
|
||||
<div class="card-actions justify-end flex-wrap gap-2 mt-2">
|
||||
<router-link :to="{ name: 'deliveryOrder', params: { id: oil.id } }" class="btn btn-sm btn-ghost">View</router-link>
|
||||
<router-link :to="{ name: 'deliveryEdit', params: { id: oil.id } }" class="btn btn-sm btn-secondary">Edit</router-link>
|
||||
<router-link :to="{ name: 'finalizeTicket', params: { id: oil.id } }" v-if="oil.delivery_status != 10" class="btn btn-sm btn-accent">Finalize</router-link>
|
||||
<router-link :to="{ name: 'Ticket', params: { id: oil.id } }" class="btn btn-sm btn-success">Print</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<pagination @paginate="getPage" :records="recordsLength" v-model="page" :per-page="50" :options="options" class="mt-10">
|
||||
|
||||
<!-- Pagination -->
|
||||
<div class="mt-6 flex justify-center">
|
||||
<pagination @paginate="getPage" :records="recordsLength" v-model="page" :per-page="50" :options="options">
|
||||
</pagination>
|
||||
<!-- <div class="flex justify-center mb-10"> {{ recordsLength }} items Found</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
</template>
|
||||
|
||||
@@ -136,7 +167,7 @@ export default defineComponent({
|
||||
return {
|
||||
token: null,
|
||||
user: null,
|
||||
deliveries: [],
|
||||
deliveries: [] as any[],
|
||||
page: 1,
|
||||
perPage: 50,
|
||||
recordsLength: 0,
|
||||
|
||||
@@ -1,115 +1,126 @@
|
||||
<template>
|
||||
<Header />
|
||||
<div class="flex">
|
||||
<div class="">
|
||||
<SideBar />
|
||||
</div>
|
||||
<div class=" w-full px-10 ">
|
||||
<div class="text-sm breadcrumbs pb-10">
|
||||
<div class="w-full px-4 md:px-10 py-4">
|
||||
<!-- Breadcrumbs & Title -->
|
||||
<div class="text-sm breadcrumbs">
|
||||
<ul>
|
||||
<li>
|
||||
<router-link :to="{ name: 'home' }">
|
||||
Home
|
||||
</router-link>
|
||||
</li>
|
||||
<li><router-link :to="{ name: 'home' }">Home</router-link></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="flex start pb-10 text-2xl">Waiting Deliveries </div>
|
||||
<div class="flex justify-end pb-5">
|
||||
<!-- Main Content Card -->
|
||||
<div class="bg-neutral rounded-lg p-4 sm:p-6 mt-6">
|
||||
<!-- Header: Title and Count -->
|
||||
<div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4 mb-4">
|
||||
<h2 class="text-lg font-bold">Deliveries Awaiting Dispatch</h2>
|
||||
<div class="badge badge-ghost">{{ recordsLength }} deliveries found</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
|
||||
<div class="overflow-x-auto bg-neutral">
|
||||
<table class="table">
|
||||
<!-- head -->
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Account Id</th>
|
||||
<th>Name</th>
|
||||
<th>Status</th>
|
||||
|
||||
<th>Address</th>
|
||||
<th>Town</th>
|
||||
<th>Gallons</th>
|
||||
<th>Date</th>
|
||||
<th>Automatic</th>
|
||||
<th>Prime</th>
|
||||
<th>Same Day</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- row 1 -->
|
||||
<tr v-for="oil in deliveries" :key="oil['id']">
|
||||
<td>{{ oil['id'] }} </td>
|
||||
<router-link :to="{ name: 'customerProfile', params: { id: oil['customer_id'] } }">
|
||||
<td>
|
||||
<div class="hover:text-accent">{{ oil['customer_name'] }} </div>
|
||||
</td>
|
||||
</router-link>
|
||||
<td>
|
||||
<div v-if="oil['delivery_status'] == 0">Waiting</div>
|
||||
<div v-else-if="oil['delivery_status'] == 1">delivered</div>
|
||||
<div v-else-if="oil['delivery_status'] == 2">Out for Delivery</div>
|
||||
<div v-else-if="oil['delivery_status'] == 3">Cancelled</div>
|
||||
<div v-else-if="oil['delivery_status'] == 4">Partial Delivery</div>
|
||||
<div v-else-if="oil['delivery_status'] == 5">Issue</div>
|
||||
<div v-else-if="oil['delivery_status'] == 10">Finalized</div>
|
||||
<div v-else></div>
|
||||
</td>
|
||||
|
||||
|
||||
<td>{{ oil['customer_address'] }}</td>
|
||||
<td>{{ oil['customer_town'] }}</td>
|
||||
<td>
|
||||
<div v-if="oil['customer_asked_for_fill'] == 1">Fill</div>
|
||||
<div v-else> {{ oil['gallons_ordered'] }}</div>
|
||||
</td>
|
||||
<td>{{ oil['expected_delivery_date'] }}</td>
|
||||
<td>
|
||||
<div v-if="oil['automatic'] == 0">No</div>
|
||||
<div v-else>Yes</div>
|
||||
</td>
|
||||
<td>
|
||||
<div v-if="oil['prime'] == 0">No</div>
|
||||
<div v-else>Yes</div>
|
||||
</td>
|
||||
<td>
|
||||
<div v-if="oil['same_day'] == 0">No</div>
|
||||
<div v-else>Yes</div>
|
||||
</td>
|
||||
|
||||
<td class="flex gap-2">
|
||||
<router-link :to="{ name: 'deliveryOrder', params: { id: oil['id'] } }">
|
||||
<button class="btn btn-secondary btn-sm">View Delivery</button>
|
||||
</router-link>
|
||||
<router-link :to="{ name: 'deliveryEdit', params: { id: oil['id'] } }">
|
||||
<button class="btn btn-secondary btn-sm">Edit Delivery</button>
|
||||
</router-link>
|
||||
|
||||
|
||||
<router-link :to="{ name: 'finalizeTicket', params: { id: oil['id'] } }">
|
||||
<button class="btn btn-secondary btn-sm">Finalize</button>
|
||||
<!-- DESKTOP VIEW: Table -->
|
||||
<div class="overflow-x-auto hidden xl:block">
|
||||
<table class="table w-full">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Delivery #</th>
|
||||
<th>Name</th>
|
||||
<th>Status</th>
|
||||
<th>Town / Address</th>
|
||||
<th>Gallons</th>
|
||||
<th>Date</th>
|
||||
<th>Options</th>
|
||||
<th class="text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="oil in deliveries" :key="oil.id" class="hover:bg-blue-600 hover:text-white">
|
||||
<td>{{ oil.id }}</td>
|
||||
<td>
|
||||
<router-link :to="{ name: 'customerProfile', params: { id: oil.customer_id } }" class="link link-hover">
|
||||
{{ oil.customer_name }}
|
||||
</router-link>
|
||||
<router-link :to="{ name: 'Ticket', params: { id: oil['id'] } }">
|
||||
<button class="btn btn-success btn-sm">
|
||||
Print Ticket
|
||||
</button>
|
||||
</router-link>
|
||||
<!-- <button @click.prevent="deleteCall(oil['id'])" class="btn btn-error btn-sm">
|
||||
Delete
|
||||
</button> -->
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge badge-sm badge-warning">
|
||||
Waiting
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<div>{{ oil.customer_town }}</div>
|
||||
<div class="text-xs opacity-70">{{ oil.customer_address }}</div>
|
||||
</td>
|
||||
<td>
|
||||
<span v-if="oil.customer_asked_for_fill == 1" class="badge badge-info">FILL</span>
|
||||
<span v-else>{{ oil.gallons_ordered }}</span>
|
||||
</td>
|
||||
<td>{{ oil.expected_delivery_date }}</td>
|
||||
<td>
|
||||
<div class="flex flex-col gap-1">
|
||||
<span v-if="oil.prime" class="badge badge-error badge-xs">PRIME</span>
|
||||
<span v-if="oil.same_day" class="badge badge-error badge-xs">SAME DAY</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-right">
|
||||
<div class="flex items-center justify-end gap-2">
|
||||
<router-link :to="{ name: 'deliveryOrder', params: { id: oil.id } }" class="btn btn-sm btn-ghost">View</router-link>
|
||||
<router-link :to="{ name: 'deliveryEdit', params: { id: oil.id } }" class="btn btn-sm btn-secondary">Edit</router-link>
|
||||
<router-link :to="{ name: 'finalizeTicket', params: { id: oil.id } }" class="btn btn-sm btn-accent">Finalize</router-link>
|
||||
<router-link :to="{ name: 'Ticket', params: { id: oil.id } }" class="btn btn-sm btn-success">Print</router-link>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- MOBILE VIEW: Cards -->
|
||||
<div class="xl:hidden space-y-4">
|
||||
<div v-for="oil in deliveries" :key="oil.id" class="card bg-base-100 shadow-md">
|
||||
<div class="card-body p-4">
|
||||
<div class="flex justify-between items-start">
|
||||
<div>
|
||||
<h2 class="card-title text-base">{{ oil.customer_name }}</h2>
|
||||
<p class="text-xs text-gray-400">Delivery #{{ oil.id }}</p>
|
||||
</div>
|
||||
<div class="badge badge-warning">
|
||||
Waiting
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2 mt-2">
|
||||
<div v-if="oil.prime" class="badge badge-error badge-sm">PRIME</div>
|
||||
<div v-if="oil.same_day" class="badge badge-error badge-sm">SAME DAY</div>
|
||||
</div>
|
||||
|
||||
<div class="text-sm mt-2 grid grid-cols-2 gap-x-4 gap-y-1">
|
||||
<p><strong class="font-semibold">Address:</strong> {{ oil.customer_address }}</p>
|
||||
<p><strong class="font-semibold">Town:</strong> {{ oil.customer_town }}</p>
|
||||
<p><strong class="font-semibold">Gallons:</strong>
|
||||
<span v-if="oil.customer_asked_for_fill" class="badge badge-info badge-xs">FILL</span>
|
||||
<span v-else>{{ oil.gallons_ordered }}</span>
|
||||
</p>
|
||||
<p><strong class="font-semibold">Date:</strong> {{ oil.expected_delivery_date }}</p>
|
||||
</div>
|
||||
|
||||
<div class="card-actions justify-end flex-wrap gap-2 mt-2">
|
||||
<router-link :to="{ name: 'deliveryOrder', params: { id: oil.id } }" class="btn btn-sm btn-ghost">View</router-link>
|
||||
<router-link :to="{ name: 'deliveryEdit', params: { id: oil.id } }" class="btn btn-sm btn-secondary">Edit</router-link>
|
||||
<router-link :to="{ name: 'finalizeTicket', params: { id: oil.id } }" class="btn btn-sm btn-accent">Finalize</router-link>
|
||||
<router-link :to="{ name: 'Ticket', params: { id: oil.id } }" class="btn btn-sm btn-success">Print</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<pagination @paginate="getPage" :records="recordsLength" v-model="page" :per-page="50" :options="options" class="mt-10">
|
||||
|
||||
<!-- Pagination -->
|
||||
<div class="mt-6 flex justify-center">
|
||||
<pagination @paginate="getPage" :records="recordsLength" v-model="page" :per-page="50" :options="options">
|
||||
</pagination>
|
||||
<div class="flex justify-center mb-10"> {{ recordsLength }} items Found</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
</template>
|
||||
|
||||
@@ -136,7 +147,7 @@ export default defineComponent({
|
||||
return {
|
||||
token: null,
|
||||
user: null,
|
||||
deliveries: [],
|
||||
deliveries: [] as any[],
|
||||
page: 1,
|
||||
perPage: 50,
|
||||
recordsLength: 0,
|
||||
|
||||
Reference in New Issue
Block a user