Skip to content

Commit 35ea94e

Browse files
chrisbbreuerchrisbbreuer
committed
chore: wip
1 parent f01d570 commit 35ea94e

File tree

11 files changed

+792
-99
lines changed

11 files changed

+792
-99
lines changed

‎storage/framework/defaults/components/Dashboard/Sidebar.vue

Lines changed: 18 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ const sections = useLocalStorage<Sections>('sidebar-sections', {
4747
library: true,
4848
app: true,
4949
data: true,
50+
commerce: true,
5051
management: true
5152
})
5253
@@ -58,7 +59,7 @@ const expandedItems = useLocalStorage<Record<string, boolean>>('sidebar-expanded
5859
})
5960
6061
// Create an ordered array of sections that we can reorder
61-
const sectionOrder = useLocalStorage<string[]>('sidebar-section-order', ['library', 'app', 'data', 'management'])
62+
const sectionOrder = useLocalStorage<string[]>('sidebar-section-order', ['library', 'app', 'data', 'commerce', 'management'])
6263
6364
// Toggle function for sections
6465
const toggleSection = (section: string) => {
@@ -167,26 +168,23 @@ const sectionContent: Record<string, SectionContent> = {
167168
{ to: '/jobs', icon: 'i-hugeicons-briefcase-01', text: 'Jobs' }
168169
]
169170
},
170-
{
171-
to: '#commerce',
172-
icon: 'i-hugeicons-shopping-cart-02',
173-
text: 'Commerce',
174-
children: [
175-
{ to: '/commerce', icon: 'i-hugeicons-dashboard-speed-01', text: 'Dashboard' },
176-
{ to: '/commerce/products', icon: 'i-hugeicons-package', text: 'Products' },
177-
{ to: '/commerce/categories', icon: 'i-hugeicons-tags', text: 'Categories' },
178-
{ to: '/commerce/orders', icon: 'i-hugeicons-search-list-01', text: 'Orders' },
179-
{ to: '/commerce/customers', icon: 'i-hugeicons-user-account', text: 'Customers' },
180-
{ to: '/commerce/coupons', icon: 'i-hugeicons-coupon-01', text: 'Coupons' },
181-
{ to: '/commerce/gift-cards', icon: 'i-hugeicons-gift-card', text: 'Gift Cards' },
182-
{ to: '/commerce/payments', icon: 'i-hugeicons-invoice-01', text: 'Payments' },
183-
{ to: '/commerce/shipping', icon: 'i-hugeicons-shipping-truck-01', text: 'Shipping' },
184-
{ to: '/commerce/analytics', icon: 'i-hugeicons-analytics-01', text: 'Analytics' }
185-
]
186-
},
187171
{ to: '/notifications', icon: 'i-hugeicons-notification-square', text: 'Notifications' }
188172
]
189173
},
174+
commerce: {
175+
items: [
176+
{ to: '/commerce', icon: 'i-hugeicons-dashboard-speed-01', text: 'Dashboard' },
177+
{ to: '/commerce/products', icon: 'i-hugeicons-package', text: 'Products' },
178+
{ to: '/commerce/categories', icon: 'i-hugeicons-tags', text: 'Categories' },
179+
{ to: '/commerce/orders', icon: 'i-hugeicons-search-list-01', text: 'Orders' },
180+
{ to: '/commerce/customers', icon: 'i-hugeicons-user-account', text: 'Customers' },
181+
{ to: '/commerce/coupons', icon: 'i-hugeicons-coupon-01', text: 'Coupons' },
182+
{ to: '/commerce/gift-cards', icon: 'i-hugeicons-gift-card', text: 'Gift Cards' },
183+
{ to: '/commerce/payments', icon: 'i-hugeicons-invoice-01', text: 'Payments' },
184+
{ to: '/commerce/shipping', icon: 'i-hugeicons-shipping-truck-01', text: 'Shipping' },
185+
{ to: '/commerce/analytics', icon: 'i-hugeicons-analytics-01', text: 'Analytics' }
186+
]
187+
},
190188
data: {
191189
items: [
192190
{ to: '/models', icon: 'i-hugeicons-dashboard-speed-01', text: 'Dashboard' },
@@ -408,22 +406,8 @@ const switchTeam = (team: Team) => {
408406
</div>
409407
</RouterLink>
410408

411-
<div v-if="item.to === '#commerce'" class="relative">
412-
<div
413-
v-if="expandedItems[item.to]"
414-
class="commerce-dropdown-container"
415-
>
416-
<div v-for="child in item.children" :key="child.to" class="commerce-dropdown-item">
417-
<RouterLink :to="child.to" class="sidebar-child-link group pl-8">
418-
<div :class="[child.icon, 'h-5 w-5 text-gray-400 transition duration-150 ease-in-out dark:text-gray-200 group-hover:text-gray-700 mt-0.5']" />
419-
<span class="truncate">{{ child.text }}</span>
420-
</RouterLink>
421-
</div>
422-
</div>
423-
</div>
424-
425-
<!-- Use transition for other dropdowns -->
426-
<transition name="dropdown" v-if="item.to !== '#commerce'">
409+
<!-- Use transition for all dropdowns -->
410+
<transition name="dropdown">
427411
<ul
428412
v-if="item.children && expandedItems[item.to]"
429413
role="list"
@@ -582,14 +566,6 @@ li[draggable="true"].dragging .drag-handle {
582566
@apply !text-gray-400 dark:!text-gray-200;
583567
}
584568
585-
.commerce-dropdown {
586-
@apply max-h-[800px] opacity-100;
587-
}
588-
589-
.queue-dropdown {
590-
@apply max-h-40 opacity-100;
591-
}
592-
593569
.dropdown-enter-active,
594570
.dropdown-leave-active {
595571
transition: all 0.3s ease;
@@ -601,46 +577,11 @@ li[draggable="true"].dragging .drag-handle {
601577
max-height: 0 !important;
602578
}
603579
604-
/* Commerce dropdown specific styling */
605-
.commerce-dropdown-container {
606-
width: 100%;
607-
background-color: white;
608-
border-radius: 0.375rem;
609-
margin-top: 0.25rem;
610-
z-index: 10;
611-
animation: fadeIn 0.3s ease;
612-
padding: 0.25rem 0;
613-
}
614-
615-
.commerce-dropdown-item {
616-
margin-bottom: 0.25rem;
617-
display: block;
618-
width: 100%;
619-
}
620-
621-
.commerce-dropdown-item .sidebar-child-link {
622-
padding-left: 2rem;
623-
display: flex;
624-
align-items: center;
625-
gap: 0.75rem;
626-
}
627-
628-
@keyframes fadeIn {
629-
from { opacity: 0; }
630-
to { opacity: 1; }
631-
}
632-
633580
.dropdown-list {
634581
overflow-y: auto;
635582
}
636583
637584
.dropdown-item {
638585
height: 40px;
639586
}
640-
641-
@media (prefers-color-scheme: dark) {
642-
.commerce-dropdown-container {
643-
background-color: #1e293b; /* dark:bg-blue-gray-800 */
644-
}
645-
}
646587
</style>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -187,7 +187,7 @@ function addCategory(): void {
187187
@click="openAddModal"
188188
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"
189189
>
190-
<div class="i-hugeicons-plus h-5 w-5 mr-1"></div>
190+
<div class="i-hugeicons-plus-sign h-5 w-5 mr-1"></div>
191191
Add category
192192
</button>
193193
</div>
@@ -197,7 +197,7 @@ function addCategory(): void {
197197
<div class="mt-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
198198
<div class="relative max-w-sm">
199199
<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
200-
<div class="i-hugeicons-search h-5 w-5 text-gray-400"></div>
200+
<div class="i-hugeicons-search-01 h-5 w-5 text-gray-400"></div>
201201
</div>
202202
<input
203203
v-model="searchQuery"

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -203,7 +203,7 @@ function addCoupon(): void {
203203
@click="openAddModal"
204204
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"
205205
>
206-
<div class="i-hugeicons-plus h-5 w-5 mr-1"></div>
206+
<div class="i-hugeicons-plus-sign h-5 w-5 mr-1"></div>
207207
Add coupon
208208
</button>
209209
</div>
@@ -213,7 +213,7 @@ function addCoupon(): void {
213213
<div class="mt-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
214214
<div class="relative max-w-sm">
215215
<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
216-
<div class="i-hugeicons-search h-5 w-5 text-gray-400"></div>
216+
<div class="i-hugeicons-search-01 h-5 w-5 text-gray-400"></div>
217217
</div>
218218
<input
219219
v-model="searchQuery"

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -224,7 +224,7 @@ function getStatusClass(status: string): string {
224224
</div>
225225
<div class="mt-4 sm:mt-0">
226226
<button type="button" 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">
227-
<div class="i-hugeicons-plus h-5 w-5 mr-1"></div>
227+
<div class="i-hugeicons-plus-sign h-5 w-5 mr-1"></div>
228228
Add customer
229229
</button>
230230
</div>
@@ -234,7 +234,7 @@ function getStatusClass(status: string): string {
234234
<div class="mt-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
235235
<div class="relative max-w-sm">
236236
<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
237-
<div class="i-hugeicons-search h-5 w-5 text-gray-400"></div>
237+
<div class="i-hugeicons-search-01 h-5 w-5 text-gray-400"></div>
238238
</div>
239239
<input
240240
v-model="searchQuery"
@@ -399,7 +399,7 @@ function getStatusClass(status: string): string {
399399
: 'text-gray-900 ring-gray-300 hover:bg-gray-50 dark:text-white dark:ring-gray-700 dark:hover:bg-blue-gray-700'
400400
]"
401401
>
402-
<div class="i-hugeicons-arrow-left h-5 w-5"></div>
402+
<div class="i-hugeicons-arrow-left-01 h-5 w-5"></div>
403403
</button>
404404
<button
405405
v-for="page in totalPages"
@@ -424,7 +424,7 @@ function getStatusClass(status: string): string {
424424
: 'text-gray-900 ring-gray-300 hover:bg-gray-50 dark:text-white dark:ring-gray-700 dark:hover:bg-blue-gray-700'
425425
]"
426426
>
427-
<div class="i-hugeicons-arrow-right h-5 w-5"></div>
427+
<div class="i-hugeicons-arrow-right-01 h-5 w-5"></div>
428428
</button>
429429
</div>
430430
</div>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -257,7 +257,7 @@ function addGiftCard(): void {
257257
@click="openAddModal"
258258
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"
259259
>
260-
<div class="i-hugeicons-plus h-5 w-5 mr-1"></div>
260+
<div class="i-hugeicons-plus-sign h-5 w-5 mr-1"></div>
261261
Create gift card
262262
</button>
263263
</div>
@@ -267,7 +267,7 @@ function addGiftCard(): void {
267267
<div class="mt-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
268268
<div class="relative max-w-sm">
269269
<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
270-
<div class="i-hugeicons-search h-5 w-5 text-gray-400"></div>
270+
<div class="i-hugeicons-search-01 h-5 w-5 text-gray-400"></div>
271271
</div>
272272
<input
273273
v-model="searchQuery"

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,7 @@ const timeRanges = ['Today', 'Last 7 days', 'Last 30 days', 'Last 90 days', 'Las
134134
<dt class="truncate text-sm font-medium text-gray-500 dark:text-gray-300">Total Revenue</dt>
135135
<dd class="mt-1 text-3xl font-semibold tracking-tight text-gray-900 dark:text-white">$548,290</dd>
136136
<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>
137+
<div class="i-hugeicons-analytics-up h-4 w-4 mr-1"></div>
138138
<span>12.5% increase</span>
139139
</dd>
140140
</div>
@@ -143,7 +143,7 @@ const timeRanges = ['Today', 'Last 7 days', 'Last 30 days', 'Last 90 days', 'Las
143143
<dt class="truncate text-sm font-medium text-gray-500 dark:text-gray-300">Total Orders</dt>
144144
<dd class="mt-1 text-3xl font-semibold tracking-tight text-gray-900 dark:text-white">2,456</dd>
145145
<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>
146+
<div class="i-hugeicons-analytics-up h-4 w-4 mr-1"></div>
147147
<span>8.2% increase</span>
148148
</dd>
149149
</div>
@@ -152,7 +152,7 @@ const timeRanges = ['Today', 'Last 7 days', 'Last 30 days', 'Last 90 days', 'Las
152152
<dt class="truncate text-sm font-medium text-gray-500 dark:text-gray-300">Average Order Value</dt>
153153
<dd class="mt-1 text-3xl font-semibold tracking-tight text-gray-900 dark:text-white">$223.25</dd>
154154
<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>
155+
<div class="i-hugeicons-analytics-up h-4 w-4 mr-1"></div>
156156
<span>3.7% increase</span>
157157
</dd>
158158
</div>
@@ -161,7 +161,7 @@ const timeRanges = ['Today', 'Last 7 days', 'Last 30 days', 'Last 90 days', 'Las
161161
<dt class="truncate text-sm font-medium text-gray-500 dark:text-gray-300">Conversion Rate</dt>
162162
<dd class="mt-1 text-3xl font-semibold tracking-tight text-gray-900 dark:text-white">3.6%</dd>
163163
<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>
164+
<div class="i-hugeicons-analytics-down h-4 w-4 mr-1"></div>
165165
<span>0.8% decrease</span>
166166
</dd>
167167
</div>

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -228,7 +228,7 @@ function getStatusClass(status: string): string {
228228
<div class="mt-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
229229
<div class="relative max-w-sm">
230230
<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
231-
<div class="i-hugeicons-search h-5 w-5 text-gray-400"></div>
231+
<div class="i-hugeicons-search-01 h-5 w-5 text-gray-400"></div>
232232
</div>
233233
<input
234234
v-model="searchQuery"
@@ -379,7 +379,7 @@ function getStatusClass(status: string): string {
379379
: 'text-gray-900 ring-gray-300 hover:bg-gray-50 dark:text-white dark:ring-gray-700 dark:hover:bg-blue-gray-700'
380380
]"
381381
>
382-
<div class="i-hugeicons-arrow-left h-5 w-5"></div>
382+
<div class="i-hugeicons-arrow-left-01 h-5 w-5"></div>
383383
</button>
384384
<button
385385
v-for="page in totalPages"
@@ -404,7 +404,7 @@ function getStatusClass(status: string): string {
404404
: 'text-gray-900 ring-gray-300 hover:bg-gray-50 dark:text-white dark:ring-gray-700 dark:hover:bg-blue-gray-700'
405405
]"
406406
>
407-
<div class="i-hugeicons-arrow-right h-5 w-5"></div>
407+
<div class="i-hugeicons-arrow-right-01 h-5 w-5"></div>
408408
</button>
409409
</div>
410410
</div>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -312,7 +312,7 @@ const totalAmount = computed(() => {
312312
<div class="mt-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
313313
<div class="relative max-w-sm">
314314
<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
315-
<div class="i-hugeicons-search h-5 w-5 text-gray-400"></div>
315+
<div class="i-hugeicons-search-01 h-5 w-5 text-gray-400"></div>
316316
</div>
317317
<input
318318
v-model="searchQuery"

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -187,7 +187,7 @@ function toggleSort(column: string): void {
187187
</div>
188188
<div class="mt-4 sm:mt-0">
189189
<button type="button" 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">
190-
<div class="i-hugeicons-plus h-5 w-5 mr-1"></div>
190+
<div class="i-hugeicons-plus-sign h-5 w-5 mr-1"></div>
191191
Add product
192192
</button>
193193
</div>
@@ -197,7 +197,7 @@ function toggleSort(column: string): void {
197197
<div class="mt-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
198198
<div class="relative max-w-sm">
199199
<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
200-
<div class="i-hugeicons-search h-5 w-5 text-gray-400"></div>
200+
<div class="i-hugeicons-search-01 h-5 w-5 text-gray-400"></div>
201201
</div>
202202
<input
203203
v-model="searchQuery"
@@ -345,7 +345,7 @@ function toggleSort(column: string): void {
345345
: 'text-gray-900 ring-gray-300 hover:bg-gray-50 dark:text-white dark:ring-gray-700 dark:hover:bg-blue-gray-700'
346346
]"
347347
>
348-
<div class="i-hugeicons-arrow-left h-5 w-5"></div>
348+
<div class="i-hugeicons-arrow-left-01 h-5 w-5"></div>
349349
</button>
350350
<button
351351
v-for="page in totalPages"
@@ -370,7 +370,7 @@ function toggleSort(column: string): void {
370370
: 'text-gray-900 ring-gray-300 hover:bg-gray-50 dark:text-white dark:ring-gray-700 dark:hover:bg-blue-gray-700'
371371
]"
372372
>
373-
<div class="i-hugeicons-arrow-right h-5 w-5"></div>
373+
<div class="i-hugeicons-arrow-right-01 h-5 w-5"></div>
374374
</button>
375375
</div>
376376
</div>

0 commit comments

Comments
 (0)