Skip to content

Commit 80f7d61

Browse files
chrisbbreuerchrisbbreuer
committed
chore: wip
1 parent 2da2039 commit 80f7d61

File tree

10 files changed

+1525
-1080
lines changed

10 files changed

+1525
-1080
lines changed

‎storage/framework/defaults/components/Dashboard/Commerce/Delivery/TabNavigation.vue

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,28 +7,27 @@
77
name="tabs"
88
class="block w-full rounded-md border-gray-300 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-700 dark:bg-blue-gray-800 dark:text-white"
99
v-model="selectedTab"
10-
@change="$emit('update:modelValue', selectedTab)"
10+
@change="navigateToTab"
1111
>
1212
<option v-for="tab in tabs" :key="tab.value" :value="tab.value">{{ tab.name }}</option>
1313
</select>
1414
</div>
1515
<div class="hidden sm:block">
1616
<div class="border-b border-gray-200 dark:border-gray-700">
1717
<nav class="-mb-px flex space-x-8" aria-label="Tabs">
18-
<a
18+
<router-link
1919
v-for="tab in tabs"
2020
:key="tab.value"
21-
:href="tab.href"
21+
:to="tab.href"
2222
:class="[
2323
tab.value === modelValue
2424
? 'border-blue-500 text-blue-600 dark:border-blue-400 dark:text-blue-400'
2525
: 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:border-gray-600 dark:hover:text-gray-300',
2626
'whitespace-nowrap border-b-2 py-4 px-1 text-sm font-medium'
2727
]"
28-
@click.prevent="$emit('update:modelValue', tab.value)"
2928
>
3029
{{ tab.name }}
31-
</a>
30+
</router-link>
3231
</nav>
3332
</div>
3433
</div>
@@ -37,6 +36,7 @@
3736

3837
<script setup lang="ts">
3938
import { ref, watch } from 'vue'
39+
import { useRouter } from 'vue-router'
4040
4141
interface Tab {
4242
name: string
@@ -57,9 +57,17 @@ const props = defineProps({
5757
5858
defineEmits(['update:modelValue'])
5959
60+
const router = useRouter()
6061
const selectedTab = ref(props.modelValue)
6162
6263
watch(() => props.modelValue, (newValue) => {
6364
selectedTab.value = newValue
6465
})
66+
67+
const navigateToTab = () => {
68+
const selectedTabObj = props.tabs.find(tab => tab.value === selectedTab.value)
69+
if (selectedTabObj) {
70+
router.push(selectedTabObj.href)
71+
}
72+
}
6573
</script>

‎storage/framework/defaults/views/dashboard/commerce/delivery/delivery-routes.vue

Lines changed: 260 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,260 @@
1+
<script lang="ts" setup>
2+
import { ref, computed } from 'vue'
3+
import { useHead } from '@vueuse/head'
4+
import TabNavigation from '../../../../components/Dashboard/Commerce/Delivery/TabNavigation.vue'
5+
import SearchFilter from '../../../../components/Dashboard/Commerce/Delivery/SearchFilter.vue'
6+
import DeliveryRoutesTable from '../../../../components/Dashboard/Commerce/Delivery/DeliveryRoutesTable.vue'
7+
import Pagination from '../../../../components/Dashboard/Commerce/Delivery/Pagination.vue'
8+
import { DeliveryRoute as BaseDeliveryRoute } from '../../../../components/Dashboard/Commerce/Delivery/DeliveryRoutesTable.vue'
9+
10+
useHead({
11+
title: 'Dashboard - Delivery Routes',
12+
})
13+
14+
// Extend the DeliveryRoute interface to include additional properties
15+
interface DeliveryRoute extends BaseDeliveryRoute {
16+
name: string
17+
status: string
18+
startCoords: { lat: number; lng: number }
19+
endCoords: { lat: number; lng: number }
20+
waypoints: { lat: number; lng: number }[]
21+
}
22+
23+
// Sample delivery routes data
24+
const deliveryRoutes = ref<DeliveryRoute[]>([
25+
{
26+
id: 1,
27+
name: 'Downtown Route',
28+
driver: 'John Smith',
29+
vehicle: 'Van #103',
30+
startLocation: '123 Main St',
31+
stops: 8,
32+
avgDeliveryTime: 1.5,
33+
totalDistance: 12.4,
34+
lastActive: new Date('2023-06-15'),
35+
status: 'Active',
36+
startCoords: { lat: 40.7128, lng: -74.0060 },
37+
endCoords: { lat: 40.7328, lng: -73.9860 },
38+
waypoints: [
39+
{ lat: 40.7228, lng: -73.9960 },
40+
{ lat: 40.7328, lng: -73.9860 }
41+
]
42+
},
43+
{
44+
id: 2,
45+
name: 'Uptown Route',
46+
driver: 'Sarah Johnson',
47+
vehicle: 'Truck #205',
48+
startLocation: '456 Oak Ave',
49+
stops: 12,
50+
avgDeliveryTime: 2.2,
51+
totalDistance: 18.7,
52+
lastActive: new Date('2023-06-14'),
53+
status: 'Active',
54+
startCoords: { lat: 40.8128, lng: -73.9060 },
55+
endCoords: { lat: 40.8328, lng: -73.8860 },
56+
waypoints: [
57+
{ lat: 40.8228, lng: -73.8960 },
58+
{ lat: 40.8328, lng: -73.8860 }
59+
]
60+
},
61+
{
62+
id: 3,
63+
name: 'Suburban Route',
64+
driver: 'Michael Brown',
65+
vehicle: 'Van #104',
66+
startLocation: '789 Pine St',
67+
stops: 15,
68+
avgDeliveryTime: 2.8,
69+
totalDistance: 24.3,
70+
lastActive: new Date('2023-06-13'),
71+
status: 'Active',
72+
startCoords: { lat: 40.9128, lng: -73.8060 },
73+
endCoords: { lat: 40.9328, lng: -73.7860 },
74+
waypoints: [
75+
{ lat: 40.9228, lng: -73.7960 },
76+
{ lat: 40.9328, lng: -73.7860 }
77+
]
78+
},
79+
{
80+
id: 4,
81+
name: 'Rural Route',
82+
driver: 'Emily Davis',
83+
vehicle: 'Truck #206',
84+
startLocation: '101 Maple Rd',
85+
stops: 6,
86+
avgDeliveryTime: 3.5,
87+
totalDistance: 42.1,
88+
lastActive: new Date('2023-06-12'),
89+
status: 'Active',
90+
startCoords: { lat: 41.0128, lng: -73.7060 },
91+
endCoords: { lat: 41.0328, lng: -73.6860 },
92+
waypoints: [
93+
{ lat: 41.0228, lng: -73.6960 },
94+
{ lat: 41.0328, lng: -73.6860 }
95+
]
96+
},
97+
{
98+
id: 5,
99+
name: 'Express Route',
100+
driver: 'Robert Wilson',
101+
vehicle: 'Van #105',
102+
startLocation: '202 Cedar Blvd',
103+
stops: 4,
104+
avgDeliveryTime: 1.0,
105+
totalDistance: 8.6,
106+
lastActive: new Date('2023-06-11'),
107+
status: 'Active',
108+
startCoords: { lat: 40.7528, lng: -74.1060 },
109+
endCoords: { lat: 40.7728, lng: -74.0860 },
110+
waypoints: [
111+
{ lat: 40.7628, lng: -74.0960 },
112+
{ lat: 40.7728, lng: -74.0860 }
113+
]
114+
},
115+
{
116+
id: 6,
117+
name: 'Weekend Route',
118+
driver: 'Jennifer Lee',
119+
vehicle: 'Van #106',
120+
startLocation: '303 Birch Ln',
121+
stops: 10,
122+
avgDeliveryTime: 2.0,
123+
totalDistance: 16.8,
124+
lastActive: new Date('2023-06-10'),
125+
status: 'Inactive',
126+
startCoords: { lat: 40.6128, lng: -74.2060 },
127+
endCoords: { lat: 40.6328, lng: -74.1860 },
128+
waypoints: [
129+
{ lat: 40.6228, lng: -74.1960 },
130+
{ lat: 40.6328, lng: -74.1860 }
131+
]
132+
}
133+
])
134+
135+
// Search and filtering
136+
const searchQuery = ref('')
137+
const currentPage = ref(1)
138+
const itemsPerPage = 5
139+
140+
const filteredRoutes = computed(() => {
141+
if (!searchQuery.value) return deliveryRoutes.value
142+
143+
const query = searchQuery.value.toLowerCase()
144+
return deliveryRoutes.value.filter(route =>
145+
route.name.toLowerCase().includes(query) ||
146+
route.driver.toLowerCase().includes(query) ||
147+
route.vehicle.toLowerCase().includes(query) ||
148+
route.startLocation.toLowerCase().includes(query) ||
149+
route.status.toLowerCase().includes(query)
150+
)
151+
})
152+
153+
const paginatedRoutes = computed(() => {
154+
const start = (currentPage.value - 1) * itemsPerPage
155+
const end = start + itemsPerPage
156+
return filteredRoutes.value.slice(start, end)
157+
})
158+
159+
// Event handlers
160+
const handleSearch = (query: string) => {
161+
searchQuery.value = query
162+
currentPage.value = 1
163+
}
164+
165+
const handleAddRoute = () => {
166+
alert('Add delivery route functionality would go here')
167+
}
168+
169+
const handleEditRoute = (route: DeliveryRoute) => {
170+
alert(`Edit delivery route: ${route.name}`)
171+
}
172+
173+
const handleDeleteRoute = (route: DeliveryRoute) => {
174+
alert(`Delete delivery route: ${route.name}`)
175+
}
176+
177+
const viewRouteOnMap = (route: DeliveryRoute) => {
178+
alert(`View route on map: ${route.name} (${route.startLocation} to ${route.stops} stops)`)
179+
}
180+
181+
const handlePrevPage = () => {
182+
if (currentPage.value > 1) {
183+
currentPage.value--
184+
}
185+
}
186+
187+
const handleNextPage = () => {
188+
const totalPages = Math.ceil(filteredRoutes.value.length / itemsPerPage)
189+
if (currentPage.value < totalPages) {
190+
currentPage.value++
191+
}
192+
}
193+
194+
const handlePageChange = (page: number) => {
195+
currentPage.value = page
196+
}
197+
198+
// Tab configuration
199+
const tabs = [
200+
{ name: 'Shipping Methods', value: 'methods', href: '/commerce/delivery/shipping-methods' },
201+
{ name: 'Shipping Zones', value: 'zones', href: '/commerce/delivery/shipping-zones' },
202+
{ name: 'Shipping Rates', value: 'rates', href: '/commerce/delivery/shipping-rates' },
203+
{ name: 'Digital Delivery', value: 'digital', href: '/commerce/delivery/digital-delivery' },
204+
{ name: 'License Keys', value: 'license', href: '/commerce/delivery/license-keys' },
205+
{ name: 'Delivery Routes', value: 'routes', href: '/commerce/delivery/delivery-routes' },
206+
]
207+
</script>
208+
209+
<template>
210+
<div class="py-6">
211+
<div class="mx-auto max-w-7xl px-4 sm:px-6 md:px-8">
212+
<!-- Tab Navigation -->
213+
<TabNavigation
214+
modelValue="routes"
215+
:tabs="tabs"
216+
/>
217+
218+
<div class="mt-6 bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
219+
<div class="px-4 py-5 sm:px-6 border-b border-gray-200 dark:border-gray-700">
220+
<div class="flex justify-between items-center">
221+
<h2 class="text-lg font-medium text-gray-900 dark:text-white">Delivery Routes</h2>
222+
<button
223+
@click="handleAddRoute"
224+
type="button"
225+
class="inline-flex items-center rounded-md bg-blue-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
226+
>
227+
<div class="i-hugeicons-plus-sign h-5 w-5 mr-2" />
228+
Add Route
229+
</button>
230+
</div>
231+
<div class="mt-4">
232+
<SearchFilter
233+
placeholder="Search delivery routes..."
234+
@search="handleSearch"
235+
class="w-full md:w-96"
236+
/>
237+
</div>
238+
</div>
239+
240+
<DeliveryRoutesTable
241+
:routes="paginatedRoutes"
242+
@view-map="viewRouteOnMap"
243+
@edit="handleEditRoute"
244+
@delete="handleDeleteRoute"
245+
/>
246+
247+
<div class="px-4 py-3 bg-gray-50 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700">
248+
<Pagination
249+
:current-page="currentPage"
250+
:total-items="filteredRoutes.length"
251+
:items-per-page="itemsPerPage"
252+
@prev="handlePrevPage"
253+
@next="handleNextPage"
254+
@page="handlePageChange"
255+
/>
256+
</div>
257+
</div>
258+
</div>
259+
</div>
260+
</template>

0 commit comments

Comments
 (0)