Skip to content

Commit d315d42

Browse files
chrisbbreuerchrisbbreuer
committed
chore: wip
1 parent 0ef91e8 commit d315d42

File tree

8 files changed

+2897
-0
lines changed

8 files changed

+2897
-0
lines changed

‎storage/framework/defaults/views/dashboard/commerce/categories/index.vue

Lines changed: 382 additions & 0 deletions
Large diffs are not rendered by default.

‎storage/framework/defaults/views/dashboard/commerce/coupons/index.vue

Lines changed: 504 additions & 0 deletions
Large diffs are not rendered by default.

‎storage/framework/defaults/views/dashboard/commerce/customers/index.vue

Lines changed: 434 additions & 0 deletions
Large diffs are not rendered by default.

‎storage/framework/defaults/views/dashboard/commerce/gift-cards/index.vue

Lines changed: 513 additions & 0 deletions
Large diffs are not rendered by default.

‎storage/framework/defaults/views/dashboard/commerce/index.vue

Lines changed: 263 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,263 @@
1+
<script lang="ts" setup>
2+
import { ref, computed } from 'vue'
3+
import { useHead } from '@vueuse/head'
4+
import { Line, Bar } from 'vue-chartjs'
5+
import {
6+
Chart as ChartJS,
7+
CategoryScale,
8+
LinearScale,
9+
PointElement,
10+
LineElement,
11+
BarElement,
12+
Title,
13+
Tooltip,
14+
Legend,
15+
Filler,
16+
} from 'chart.js'
17+
18+
ChartJS.register(
19+
CategoryScale,
20+
LinearScale,
21+
PointElement,
22+
LineElement,
23+
BarElement,
24+
Title,
25+
Tooltip,
26+
Legend,
27+
Filler,
28+
)
29+
30+
useHead({
31+
title: 'Dashboard - Commerce',
32+
})
33+
34+
// Sample data for the dashboard
35+
const revenueData = {
36+
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
37+
datasets: [
38+
{
39+
label: 'Revenue',
40+
backgroundColor: 'rgba(59, 130, 246, 0.2)',
41+
borderColor: 'rgba(59, 130, 246, 1)',
42+
borderWidth: 2,
43+
pointBackgroundColor: 'rgba(59, 130, 246, 1)',
44+
pointBorderColor: '#fff',
45+
pointHoverBackgroundColor: '#fff',
46+
pointHoverBorderColor: 'rgba(59, 130, 246, 1)',
47+
fill: true,
48+
tension: 0.4,
49+
data: [30000, 35000, 32000, 40000, 45000, 43000, 50000, 55000, 58000, 56000, 60000, 65000],
50+
},
51+
],
52+
}
53+
54+
const ordersData = {
55+
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
56+
datasets: [
57+
{
58+
label: 'Orders',
59+
backgroundColor: 'rgba(16, 185, 129, 0.8)',
60+
borderColor: 'rgba(16, 185, 129, 1)',
61+
borderWidth: 1,
62+
borderRadius: 4,
63+
data: [120, 150, 140, 160, 180, 170, 190, 210, 230, 220, 240, 260],
64+
},
65+
],
66+
}
67+
68+
const chartOptions = {
69+
responsive: true,
70+
maintainAspectRatio: false,
71+
plugins: {
72+
legend: {
73+
display: false,
74+
},
75+
},
76+
scales: {
77+
y: {
78+
beginAtZero: true,
79+
grid: {
80+
display: true,
81+
color: 'rgba(0, 0, 0, 0.05)',
82+
},
83+
},
84+
x: {
85+
grid: {
86+
display: false,
87+
},
88+
},
89+
},
90+
}
91+
92+
const topProducts = [
93+
{ id: 1, name: 'Premium Headphones', price: '$199.99', sales: 1245, stock: 78 },
94+
{ id: 2, name: 'Wireless Keyboard', price: '$89.99', sales: 987, stock: 124 },
95+
{ id: 3, name: 'Smart Watch', price: '$249.99', sales: 876, stock: 45 },
96+
{ id: 4, name: 'Bluetooth Speaker', price: '$129.99', sales: 765, stock: 92 },
97+
{ id: 5, name: 'USB-C Hub', price: '$59.99', sales: 654, stock: 210 },
98+
]
99+
100+
const recentOrders = [
101+
{ id: '#ORD-5432', customer: 'John Smith', date: '2023-12-01', total: '$349.97', status: 'Completed' },
102+
{ id: '#ORD-5431', customer: 'Sarah Johnson', date: '2023-12-01', total: '$129.99', status: 'Processing' },
103+
{ id: '#ORD-5430', customer: 'Michael Brown', date: '2023-11-30', total: '$459.98', status: 'Completed' },
104+
{ id: '#ORD-5429', customer: 'Emily Davis', date: '2023-11-30', total: '$89.99', status: 'Shipped' },
105+
{ id: '#ORD-5428', customer: 'David Wilson', date: '2023-11-29', total: '$199.99', status: 'Completed' },
106+
]
107+
108+
const timeRange = ref('Last 30 days')
109+
const timeRanges = ['Today', 'Last 7 days', 'Last 30 days', 'Last 90 days', 'Last year', 'All time']
110+
</script>
111+
112+
<template>
113+
<main>
114+
<div class="relative isolate overflow-hidden">
115+
<div class="px-6 py-6 sm:px-6 lg:px-8">
116+
<div class="mx-auto max-w-7xl">
117+
<h1 class="text-2xl font-semibold text-gray-900 dark:text-white">Commerce Dashboard</h1>
118+
119+
<!-- Time range selector -->
120+
<div class="mt-4 flex items-center justify-between">
121+
<p class="text-sm text-gray-500 dark:text-gray-400">
122+
Overview of your store's performance
123+
</p>
124+
<div class="relative">
125+
<select v-model="timeRange" class="block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-blue-600 sm:text-sm sm:leading-6 dark:bg-blue-gray-800 dark:text-white dark:ring-gray-700">
126+
<option v-for="range in timeRanges" :key="range" :value="range">{{ range }}</option>
127+
</select>
128+
</div>
129+
</div>
130+
131+
<!-- Stats -->
132+
<dl class="mt-5 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
133+
<div class="overflow-hidden rounded-lg bg-white px-4 py-5 shadow sm:p-6 dark:bg-blue-gray-800">
134+
<dt class="truncate text-sm font-medium text-gray-500 dark:text-gray-300">Total Revenue</dt>
135+
<dd class="mt-1 text-3xl font-semibold tracking-tight text-gray-900 dark:text-white">$548,290</dd>
136+
<dd class="mt-2 flex items-center text-sm text-green-600 dark:text-green-400">
137+
<div class="i-hugeicons-arrow-up-right h-4 w-4 mr-1"></div>
138+
<span>12.5% increase</span>
139+
</dd>
140+
</div>
141+
142+
<div class="overflow-hidden rounded-lg bg-white px-4 py-5 shadow sm:p-6 dark:bg-blue-gray-800">
143+
<dt class="truncate text-sm font-medium text-gray-500 dark:text-gray-300">Total Orders</dt>
144+
<dd class="mt-1 text-3xl font-semibold tracking-tight text-gray-900 dark:text-white">2,456</dd>
145+
<dd class="mt-2 flex items-center text-sm text-green-600 dark:text-green-400">
146+
<div class="i-hugeicons-arrow-up-right h-4 w-4 mr-1"></div>
147+
<span>8.2% increase</span>
148+
</dd>
149+
</div>
150+
151+
<div class="overflow-hidden rounded-lg bg-white px-4 py-5 shadow sm:p-6 dark:bg-blue-gray-800">
152+
<dt class="truncate text-sm font-medium text-gray-500 dark:text-gray-300">Average Order Value</dt>
153+
<dd class="mt-1 text-3xl font-semibold tracking-tight text-gray-900 dark:text-white">$223.25</dd>
154+
<dd class="mt-2 flex items-center text-sm text-green-600 dark:text-green-400">
155+
<div class="i-hugeicons-arrow-up-right h-4 w-4 mr-1"></div>
156+
<span>3.7% increase</span>
157+
</dd>
158+
</div>
159+
160+
<div class="overflow-hidden rounded-lg bg-white px-4 py-5 shadow sm:p-6 dark:bg-blue-gray-800">
161+
<dt class="truncate text-sm font-medium text-gray-500 dark:text-gray-300">Conversion Rate</dt>
162+
<dd class="mt-1 text-3xl font-semibold tracking-tight text-gray-900 dark:text-white">3.6%</dd>
163+
<dd class="mt-2 flex items-center text-sm text-red-600 dark:text-red-400">
164+
<div class="i-hugeicons-arrow-down-right h-4 w-4 mr-1"></div>
165+
<span>0.8% decrease</span>
166+
</dd>
167+
</div>
168+
</dl>
169+
170+
<!-- Charts -->
171+
<div class="mt-8 grid grid-cols-1 gap-5 lg:grid-cols-2">
172+
<div class="overflow-hidden rounded-lg bg-white shadow dark:bg-blue-gray-800">
173+
<div class="p-6">
174+
<h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">Revenue</h3>
175+
<div class="mt-2 h-80">
176+
<Line :data="revenueData" :options="chartOptions" />
177+
</div>
178+
</div>
179+
</div>
180+
181+
<div class="overflow-hidden rounded-lg bg-white shadow dark:bg-blue-gray-800">
182+
<div class="p-6">
183+
<h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">Orders</h3>
184+
<div class="mt-2 h-80">
185+
<Bar :data="ordersData" :options="chartOptions" />
186+
</div>
187+
</div>
188+
</div>
189+
</div>
190+
191+
<!-- Top Products -->
192+
<div class="mt-8">
193+
<div class="overflow-hidden rounded-lg bg-white shadow dark:bg-blue-gray-800">
194+
<div class="px-4 py-5 sm:px-6">
195+
<h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">Top Selling Products</h3>
196+
</div>
197+
<div class="border-t border-gray-200 dark:border-gray-700">
198+
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
199+
<thead class="bg-gray-50 dark:bg-blue-gray-700">
200+
<tr>
201+
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-300">Product</th>
202+
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-300">Price</th>
203+
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-300">Sales</th>
204+
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-300">Stock</th>
205+
</tr>
206+
</thead>
207+
<tbody class="bg-white divide-y divide-gray-200 dark:bg-blue-gray-800 dark:divide-gray-700">
208+
<tr v-for="product in topProducts" :key="product.id">
209+
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">{{ product.name }}</td>
210+
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">{{ product.price }}</td>
211+
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">{{ product.sales }}</td>
212+
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">{{ product.stock }}</td>
213+
</tr>
214+
</tbody>
215+
</table>
216+
</div>
217+
</div>
218+
</div>
219+
220+
<!-- Recent Orders -->
221+
<div class="mt-8">
222+
<div class="overflow-hidden rounded-lg bg-white shadow dark:bg-blue-gray-800">
223+
<div class="px-4 py-5 sm:px-6">
224+
<h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">Recent Orders</h3>
225+
</div>
226+
<div class="border-t border-gray-200 dark:border-gray-700">
227+
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
228+
<thead class="bg-gray-50 dark:bg-blue-gray-700">
229+
<tr>
230+
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-300">Order ID</th>
231+
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-300">Customer</th>
232+
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-300">Date</th>
233+
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-300">Total</th>
234+
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-300">Status</th>
235+
</tr>
236+
</thead>
237+
<tbody class="bg-white divide-y divide-gray-200 dark:bg-blue-gray-800 dark:divide-gray-700">
238+
<tr v-for="order in recentOrders" :key="order.id">
239+
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">{{ order.id }}</td>
240+
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">{{ order.customer }}</td>
241+
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">{{ order.date }}</td>
242+
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">{{ order.total }}</td>
243+
<td class="px-6 py-4 whitespace-nowrap">
244+
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full"
245+
:class="{
246+
'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300': order.status === 'Completed',
247+
'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300': order.status === 'Processing',
248+
'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300': order.status === 'Shipped'
249+
}">
250+
{{ order.status }}
251+
</span>
252+
</td>
253+
</tr>
254+
</tbody>
255+
</table>
256+
</div>
257+
</div>
258+
</div>
259+
</div>
260+
</div>
261+
</div>
262+
</main>
263+
</template>

0 commit comments

Comments
 (0)