Skip to content

Commit 2da2039

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

File tree

7 files changed

+424
-353
lines changed

7 files changed

+424
-353
lines changed

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

Lines changed: 59 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,65 @@
11
<template>
2-
<div class="mt-8 flow-root">
2+
<div class="mt-6 flow-root">
33
<div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
44
<div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
5-
<table class="min-w-full divide-y divide-gray-300 dark:divide-gray-700">
6-
<thead>
7-
<tr>
8-
<th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 dark:text-white sm:pl-6">Route ID</th>
9-
<th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-white">Driver</th>
10-
<th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-white">Vehicle</th>
11-
<th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-white">Start Location</th>
12-
<th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-white">Stops</th>
13-
<th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-white">Avg. Delivery Time</th>
14-
<th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-white">Total Distance</th>
15-
<th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-white">Last Active</th>
16-
<th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6">
17-
<span class="sr-only">Actions</span>
18-
</th>
19-
</tr>
20-
</thead>
21-
<tbody class="divide-y divide-gray-200 dark:divide-gray-700 bg-white dark:bg-blue-gray-800">
22-
<tr v-for="route in routes" :key="route.id">
23-
<td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 dark:text-white sm:pl-6">
24-
{{ route.id }}
25-
</td>
26-
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-300">
27-
{{ route.driver }}
28-
</td>
29-
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-300">
30-
{{ route.vehicle }}
31-
</td>
32-
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-300">
33-
{{ route.startLocation }}
34-
</td>
35-
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-300">
36-
{{ route.stops }}
37-
</td>
38-
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-300">
39-
{{ route.avgDeliveryTime }} hours
40-
</td>
41-
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-300">
42-
{{ route.totalDistance }} km
43-
</td>
44-
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-300">
45-
{{ formatDate(route.lastActive) }}
46-
</td>
47-
<td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
48-
<button type="button" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300 p-2 rounded-md border border-transparent hover:border-blue-200 dark:hover:border-blue-800 mr-2" @click="$emit('view-map', route)" title="View Map">
49-
<div class="i-hugeicons-map-01 h-5 w-5" />
50-
</button>
51-
<button type="button" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300 p-2 rounded-md border border-transparent hover:border-blue-200 dark:hover:border-blue-800 mr-2" title="Edit" @click="$emit('edit', route)">
52-
<div class="i-hugeicons-edit-01 h-5 w-5" />
53-
</button>
54-
<button type="button" class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300 p-2 rounded-md border border-transparent hover:border-red-200 dark:hover:border-red-800" title="Delete" @click="$emit('delete', route)">
55-
<div class="i-hugeicons-waste h-5 w-5" />
56-
</button>
57-
</td>
58-
</tr>
59-
</tbody>
60-
</table>
5+
<div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 sm:rounded-lg">
6+
<table class="min-w-full divide-y divide-gray-300 dark:divide-gray-700">
7+
<thead class="bg-gray-50 dark:bg-blue-gray-700">
8+
<tr>
9+
<th scope="col" class="py-4 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 dark:text-white sm:pl-6">Route ID</th>
10+
<th scope="col" class="px-4 py-4 text-left text-sm font-semibold text-gray-900 dark:text-white">Driver</th>
11+
<th scope="col" class="px-4 py-4 text-left text-sm font-semibold text-gray-900 dark:text-white">Vehicle</th>
12+
<th scope="col" class="px-4 py-4 text-left text-sm font-semibold text-gray-900 dark:text-white">Start Location</th>
13+
<th scope="col" class="px-4 py-4 text-left text-sm font-semibold text-gray-900 dark:text-white">Stops</th>
14+
<th scope="col" class="px-4 py-4 text-left text-sm font-semibold text-gray-900 dark:text-white">Avg. Delivery Time</th>
15+
<th scope="col" class="px-4 py-4 text-left text-sm font-semibold text-gray-900 dark:text-white">Total Distance</th>
16+
<th scope="col" class="px-4 py-4 text-left text-sm font-semibold text-gray-900 dark:text-white">Last Active</th>
17+
<th scope="col" class="relative py-4 pl-3 pr-4 sm:pr-6">
18+
<span class="sr-only">Actions</span>
19+
</th>
20+
</tr>
21+
</thead>
22+
<tbody class="divide-y divide-gray-200 dark:divide-gray-700 bg-white dark:bg-blue-gray-800">
23+
<tr v-for="route in routes" :key="route.id">
24+
<td class="whitespace-nowrap py-4.5 pl-4 pr-3 text-sm font-medium text-gray-900 dark:text-white sm:pl-6">
25+
{{ route.id }}
26+
</td>
27+
<td class="whitespace-nowrap px-4 py-4.5 text-sm text-gray-500 dark:text-gray-300">
28+
{{ route.driver }}
29+
</td>
30+
<td class="whitespace-nowrap px-4 py-4.5 text-sm text-gray-500 dark:text-gray-300">
31+
{{ route.vehicle }}
32+
</td>
33+
<td class="whitespace-nowrap px-4 py-4.5 text-sm text-gray-500 dark:text-gray-300">
34+
{{ route.startLocation }}
35+
</td>
36+
<td class="whitespace-nowrap px-4 py-4.5 text-sm text-gray-500 dark:text-gray-300">
37+
{{ route.stops }}
38+
</td>
39+
<td class="whitespace-nowrap px-4 py-4.5 text-sm text-gray-500 dark:text-gray-300">
40+
{{ route.avgDeliveryTime }} hours
41+
</td>
42+
<td class="whitespace-nowrap px-4 py-4.5 text-sm text-gray-500 dark:text-gray-300">
43+
{{ route.totalDistance }} km
44+
</td>
45+
<td class="whitespace-nowrap px-4 py-4.5 text-sm text-gray-500 dark:text-gray-300">
46+
{{ formatDate(route.lastActive) }}
47+
</td>
48+
<td class="relative whitespace-nowrap py-4.5 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
49+
<button type="button" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300 p-2 rounded-md border border-transparent hover:border-blue-200 dark:hover:border-blue-800 mr-2" @click="$emit('view-map', route)" title="View Map">
50+
<div class="i-hugeicons-map-01 h-5 w-5" />
51+
</button>
52+
<button type="button" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300 p-2 rounded-md border border-transparent hover:border-blue-200 dark:hover:border-blue-800 mr-2" title="Edit" @click="$emit('edit', route)">
53+
<div class="i-hugeicons-edit-01 h-5 w-5" />
54+
</button>
55+
<button type="button" class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300 p-2 rounded-md border border-transparent hover:border-red-200 dark:hover:border-red-800" title="Delete" @click="$emit('delete', route)">
56+
<div class="i-hugeicons-waste h-5 w-5" />
57+
</button>
58+
</td>
59+
</tr>
60+
</tbody>
61+
</table>
62+
</div>
6163
</div>
6264
</div>
6365
</div>

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

Lines changed: 60 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,66 @@
11
<template>
2-
<div class="mt-8 flow-root">
2+
<div class="mt-6 flow-root">
33
<div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
44
<div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
5-
<table class="min-w-full divide-y divide-gray-300 dark:divide-gray-700">
6-
<thead>
7-
<tr>
8-
<th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 dark:text-white sm:pl-6">Name</th>
9-
<th scope="col" class="px-4 py-4 text-left text-sm font-semibold text-gray-900 dark:text-white">Description</th>
10-
<th scope="col" class="px-4 py-4 text-left text-sm font-semibold text-gray-900 dark:text-white">Download Limit</th>
11-
<th scope="col" class="px-4 py-4 text-left text-sm font-semibold text-gray-900 dark:text-white">Expiry Days</th>
12-
<th scope="col" class="px-4 py-4 text-left text-sm font-semibold text-gray-900 dark:text-white">Requires Login</th>
13-
<th scope="col" class="px-4 py-4 text-left text-sm font-semibold text-gray-900 dark:text-white">Automatic Delivery</th>
14-
<th scope="col" class="px-4 py-4 text-left text-sm font-semibold text-gray-900 dark:text-white">Status</th>
15-
<th scope="col" class="relative py-4 pl-3 pr-4 sm:pr-6">
16-
<span class="sr-only">Actions</span>
17-
</th>
18-
</tr>
19-
</thead>
20-
<tbody class="divide-y divide-gray-200 dark:divide-gray-700 bg-white dark:bg-blue-gray-800">
21-
<tr v-for="method in methods" :key="method.id">
22-
<td class="whitespace-nowrap py-4.5 pl-4 pr-3 text-sm font-medium text-gray-900 dark:text-white sm:pl-6">
23-
{{ method.name }}
24-
</td>
25-
<td class="whitespace-nowrap px-4 py-4.5 text-sm text-gray-500 dark:text-gray-300">
26-
{{ method.description }}
27-
</td>
28-
<td class="whitespace-nowrap px-4 py-4.5 text-sm text-gray-500 dark:text-gray-300">
29-
{{ formatLimit(method.downloadLimit) }}
30-
</td>
31-
<td class="whitespace-nowrap px-4 py-4.5 text-sm text-gray-500 dark:text-gray-300">
32-
{{ formatExpiry(method.expiryDays) }}
33-
</td>
34-
<td class="whitespace-nowrap px-4 py-4.5 text-sm text-gray-500 dark:text-gray-300">
35-
{{ method.requiresLogin ? 'Yes' : 'No' }}
36-
</td>
37-
<td class="whitespace-nowrap px-4 py-4.5 text-sm text-gray-500 dark:text-gray-300">
38-
{{ method.automaticDelivery ? 'Yes' : 'No' }}
39-
</td>
40-
<td class="whitespace-nowrap px-4 py-4.5 text-sm">
41-
<span
42-
class="inline-flex items-center rounded-full px-3 py-1 text-xs font-medium"
43-
:class="{
44-
'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300': method.status === 'Active',
45-
'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300': method.status === 'Inactive'
46-
}"
47-
>
48-
{{ method.status }}
49-
</span>
50-
</td>
51-
<td class="relative whitespace-nowrap py-4.5 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
52-
<button type="button" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300 p-2 rounded-md border border-transparent hover:border-blue-200 dark:hover:border-blue-800 mr-2" title="Edit" @click="$emit('edit', method)">
53-
<div class="i-hugeicons-edit-01 h-5 w-5" />
54-
</button>
55-
<button type="button" class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300 p-2 rounded-md border border-transparent hover:border-red-200 dark:hover:border-red-800" title="Delete" @click="$emit('delete', method)">
56-
<div class="i-hugeicons-waste h-5 w-5" />
57-
</button>
58-
</td>
59-
</tr>
60-
</tbody>
61-
</table>
5+
<div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 sm:rounded-lg">
6+
<table class="min-w-full divide-y divide-gray-300 dark:divide-gray-700">
7+
<thead class="bg-gray-50 dark:bg-blue-gray-700">
8+
<tr>
9+
<th scope="col" class="py-4 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 dark:text-white sm:pl-6">Name</th>
10+
<th scope="col" class="px-4 py-4 text-left text-sm font-semibold text-gray-900 dark:text-white">Description</th>
11+
<th scope="col" class="px-4 py-4 text-left text-sm font-semibold text-gray-900 dark:text-white">Download Limit</th>
12+
<th scope="col" class="px-4 py-4 text-left text-sm font-semibold text-gray-900 dark:text-white">Expiry Days</th>
13+
<th scope="col" class="px-4 py-4 text-left text-sm font-semibold text-gray-900 dark:text-white">Requires Login</th>
14+
<th scope="col" class="px-4 py-4 text-left text-sm font-semibold text-gray-900 dark:text-white">Automatic Delivery</th>
15+
<th scope="col" class="px-4 py-4 text-left text-sm font-semibold text-gray-900 dark:text-white">Status</th>
16+
<th scope="col" class="relative py-4 pl-3 pr-4 sm:pr-6">
17+
<span class="sr-only">Actions</span>
18+
</th>
19+
</tr>
20+
</thead>
21+
<tbody class="divide-y divide-gray-200 dark:divide-gray-700 bg-white dark:bg-blue-gray-800">
22+
<tr v-for="method in methods" :key="method.id">
23+
<td class="whitespace-nowrap py-4.5 pl-4 pr-3 text-sm font-medium text-gray-900 dark:text-white sm:pl-6">
24+
{{ method.name }}
25+
</td>
26+
<td class="whitespace-nowrap px-4 py-4.5 text-sm text-gray-500 dark:text-gray-300">
27+
{{ method.description }}
28+
</td>
29+
<td class="whitespace-nowrap px-4 py-4.5 text-sm text-gray-500 dark:text-gray-300">
30+
{{ formatLimit(method.downloadLimit) }}
31+
</td>
32+
<td class="whitespace-nowrap px-4 py-4.5 text-sm text-gray-500 dark:text-gray-300">
33+
{{ formatExpiry(method.expiryDays) }}
34+
</td>
35+
<td class="whitespace-nowrap px-4 py-4.5 text-sm text-gray-500 dark:text-gray-300">
36+
{{ method.requiresLogin ? 'Yes' : 'No' }}
37+
</td>
38+
<td class="whitespace-nowrap px-4 py-4.5 text-sm text-gray-500 dark:text-gray-300">
39+
{{ method.automaticDelivery ? 'Yes' : 'No' }}
40+
</td>
41+
<td class="whitespace-nowrap px-4 py-4.5 text-sm">
42+
<span
43+
class="inline-flex items-center rounded-full px-3 py-1 text-xs font-medium"
44+
:class="{
45+
'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300': method.status === 'Active',
46+
'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300': method.status === 'Inactive'
47+
}"
48+
>
49+
{{ method.status }}
50+
</span>
51+
</td>
52+
<td class="relative whitespace-nowrap py-4.5 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
53+
<button type="button" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300 p-2 rounded-md border border-transparent hover:border-blue-200 dark:hover:border-blue-800 mr-2" title="Edit" @click="$emit('edit', method)">
54+
<div class="i-hugeicons-edit-01 h-5 w-5" />
55+
</button>
56+
<button type="button" class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300 p-2 rounded-md border border-transparent hover:border-red-200 dark:hover:border-red-800" title="Delete" @click="$emit('delete', method)">
57+
<div class="i-hugeicons-waste h-5 w-5" />
58+
</button>
59+
</td>
60+
</tr>
61+
</tbody>
62+
</table>
63+
</div>
6264
</div>
6365
</div>
6466
</div>

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

Lines changed: 13 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,17 @@
11
<template>
2-
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between">
3-
<div class="flex flex-col sm:flex-row sm:items-center space-y-3 sm:space-y-0 sm:space-x-4">
4-
<!-- Search -->
5-
<div class="relative rounded-md shadow-sm">
6-
<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
7-
<div class="i-hugeicons-search-01 h-5 w-5 text-gray-400" />
8-
</div>
9-
<input
10-
type="text"
11-
class="block w-full rounded-md border-0 py-1.5 pl-10 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6 dark:bg-blue-gray-800 dark:text-white dark:ring-gray-700 dark:placeholder:text-gray-500"
12-
:placeholder="placeholder"
13-
v-model="searchQuery"
14-
@input="$emit('search', searchQuery)"
15-
/>
2+
<div>
3+
<!-- Search -->
4+
<div class="relative rounded-md shadow-sm">
5+
<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
6+
<div class="i-hugeicons-search-01 h-5 w-5 text-gray-400" />
167
</div>
17-
</div>
18-
19-
<!-- Add Button -->
20-
<div class="mt-4 sm:mt-0">
21-
<button
22-
@click="$emit('add')"
23-
type="button"
24-
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"
25-
>
26-
<div class="i-hugeicons-plus-sign h-5 w-5 mr-1" />
27-
{{ addButtonText }}
28-
</button>
8+
<input
9+
type="text"
10+
class="block w-full rounded-md border-0 py-2.5 pl-10 pr-3 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 text-base leading-6 dark:bg-blue-gray-800 dark:text-white dark:ring-gray-700 dark:placeholder:text-gray-500"
11+
:placeholder="placeholder"
12+
v-model="searchQuery"
13+
@input="$emit('search', searchQuery)"
14+
/>
2915
</div>
3016
</div>
3117
</template>
@@ -37,14 +23,10 @@ const props = defineProps({
3723
placeholder: {
3824
type: String,
3925
default: 'Search...'
40-
},
41-
addButtonText: {
42-
type: String,
43-
default: 'Add New'
4426
}
4527
})
4628
47-
defineEmits(['search', 'add'])
29+
defineEmits(['search'])
4830
4931
const searchQuery = ref('')
5032
</script>

0 commit comments

Comments
 (0)