Skip to content

Commit d456ce1

Browse files
glennmichael123glennmichael123
committed
chore: wip
1 parent 1ca6620 commit d456ce1

File tree

5 files changed

+474
-529
lines changed

5 files changed

+474
-529
lines changed

‎storage/framework/defaults/layouts/dashboard/default.vue‎

Lines changed: 48 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,68 @@
11
<script setup lang="ts">
2-
import { useLocalStorage } from '@vueuse/core'
3-
import { computed } from 'vue'
2+
/**
3+
* Dashboard Default Layout - macOS Style
4+
* Uses the modern DashboardLayout component for consistent styling.
5+
*/
6+
import DashboardLayout from '../../components/Dashboard/DashboardLayout.vue'
47
5-
// Import the sidebar collapsed state from localStorage
6-
const isSidebarCollapsed = useLocalStorage('sidebar-collapsed', false)
8+
// Window control handlers for Tauri/Electron integration
9+
function handleMinimize() {
10+
// @ts-ignore - Tauri API
11+
if (window.__TAURI__) {
12+
window.__TAURI__.window.appWindow.minimize()
13+
}
14+
}
15+
16+
function handleMaximize() {
17+
// @ts-ignore - Tauri API
18+
if (window.__TAURI__) {
19+
window.__TAURI__.window.appWindow.toggleMaximize()
20+
}
21+
}
722
8-
// Compute classes for the main content area
9-
const contentClasses = computed(() => {
10-
return {
11-
'lg:pl-64': !isSidebarCollapsed.value,
12-
'lg:pl-20': isSidebarCollapsed.value
23+
function handleClose() {
24+
// @ts-ignore - Tauri API
25+
if (window.__TAURI__) {
26+
window.__TAURI__.window.appWindow.close()
1327
}
14-
})
28+
}
1529
</script>
1630

1731
<template>
18-
<div>
19-
<!-- Off-canvas menu for mobile, show/hide based on off-canvas menu state. -->
20-
<MobileSidebar />
21-
<Sidebar />
22-
23-
<div :class="contentClasses" class="transition-all duration-300">
24-
<Navbar />
25-
26-
<RouterView v-slot="{ Component }">
27-
<main v-if="Component" class="bg-blue-gray-50 dark:bg-blue-gray-900">
28-
<Transition mode="out-in">
29-
<Suspense timeout="0">
30-
<Component :is="Component" />
31-
<template #fallback>
32-
Loading...
33-
</template>
34-
</Suspense>
35-
</Transition>
36-
</main>
37-
</RouterView>
32+
<DashboardLayout
33+
:show-window-controls="true"
34+
@minimize="handleMinimize"
35+
@maximize="handleMaximize"
36+
@close="handleClose"
37+
>
38+
<RouterView v-slot="{ Component }">
39+
<Transition mode="out-in">
40+
<Suspense timeout="0">
41+
<Component :is="Component" />
42+
<template #fallback>
43+
<div class="flex items-center justify-center py-12">
44+
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500" />
45+
</div>
46+
</template>
47+
</Suspense>
48+
</Transition>
49+
</RouterView>
3850

51+
<!-- Global toast notifications -->
52+
<template #overlays>
3953
<Toast />
40-
</div>
41-
</div>
54+
</template>
55+
</DashboardLayout>
4256
</template>
4357

4458
<style>
4559
body {
46-
@apply dark:bg-blue-gray-900 bg-blue-gray-50;
60+
@apply bg-neutral-100 dark:bg-neutral-950;
4761
}
4862
4963
.v-enter-active,
5064
.v-leave-active {
51-
transition: opacity 0.1s ease-in-out;
65+
transition: opacity 0.15s ease-in-out;
5266
}
5367
5468
.v-enter-from,

‎storage/framework/defaults/layouts/dashboard/guest.vue‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
11
<template>
2-
<div>
2+
<!-- macOS-style guest layout with subtle background -->
3+
<div class="min-h-screen bg-neutral-100 dark:bg-neutral-950">
34
<RouterView />
45
</div>
56
</template>
7+
8+
<style>
9+
body {
10+
@apply bg-neutral-100 dark:bg-neutral-950;
11+
}
12+
</style>

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

Lines changed: 90 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,93 @@
1+
<script lang="ts" setup>
2+
/**
3+
* Analytics Dashboard - macOS Style
4+
* Overview of analytics with macOS-inspired design.
5+
*/
6+
import { ref } from 'vue'
7+
import Card from '../../../components/Dashboard/UI/Card.vue'
8+
import StatsCard from '../../../components/Dashboard/UI/StatsCard.vue'
9+
10+
useHead({
11+
title: 'Dashboard - Analytics',
12+
})
13+
14+
const analyticsCards = ref([
15+
{ name: 'Web Analytics', description: 'Page views, sessions, and user behavior', icon: 'i-hugeicons-chart-line-data-02', to: '/analytics/web' },
16+
{ name: 'Blog Analytics', description: 'Post performance and engagement', icon: 'i-hugeicons-edit-02', to: '/analytics/blog' },
17+
{ name: 'Commerce Analytics', description: 'Sales and revenue insights', icon: 'i-hugeicons-shopping-cart-01', to: '/analytics/commerce/sales' },
18+
{ name: 'Marketing Analytics', description: 'Campaign performance', icon: 'i-hugeicons-megaphone-02', to: '/analytics/marketing' },
19+
{ name: 'Events', description: 'Custom event tracking', icon: 'i-hugeicons-calendar-03', to: '/analytics/events' },
20+
{ name: 'Referrers', description: 'Traffic sources', icon: 'i-hugeicons-link-01', to: '/analytics/referrers' },
21+
{ name: 'Pages', description: 'Top performing pages', icon: 'i-hugeicons-file-02', to: '/analytics/pages' },
22+
{ name: 'Countries', description: 'Geographic distribution', icon: 'i-hugeicons-globe-02', to: '/analytics/countries' },
23+
{ name: 'Devices', description: 'Device breakdown', icon: 'i-hugeicons-smart-phone-01', to: '/analytics/devices' },
24+
{ name: 'Browsers', description: 'Browser usage', icon: 'i-hugeicons-browser', to: '/analytics/browsers' },
25+
])
26+
</script>
27+
128
<template>
229
<div>
3-
<h1>Analytics</h1>
30+
<!-- Overview Stats -->
31+
<div class="mb-6 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
32+
<StatsCard
33+
title="Page Views"
34+
value="124,892"
35+
:trend="12"
36+
trend-label="vs last month"
37+
icon="i-hugeicons-chart-line-data-02"
38+
icon-bg="primary"
39+
/>
40+
<StatsCard
41+
title="Unique Visitors"
42+
value="45,231"
43+
:trend="8"
44+
trend-label="vs last month"
45+
icon="i-hugeicons-user-multiple-02"
46+
icon-bg="success"
47+
/>
48+
<StatsCard
49+
title="Avg. Session"
50+
value="4m 32s"
51+
:trend="-5"
52+
trend-label="vs last month"
53+
icon="i-hugeicons-clock-01"
54+
icon-bg="info"
55+
/>
56+
<StatsCard
57+
title="Bounce Rate"
58+
value="32.4%"
59+
:trend="-3"
60+
trend-label="Lower is better"
61+
icon="i-hugeicons-logout-02"
62+
icon-bg="neutral"
63+
/>
64+
</div>
65+
66+
<!-- Analytics Sections -->
67+
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
68+
<RouterLink
69+
v-for="card in analyticsCards"
70+
:key="card.name"
71+
:to="card.to"
72+
class="block"
73+
>
74+
<Card variant="default" padding="md" hoverable clickable>
75+
<div class="flex items-start gap-4">
76+
<div class="p-2.5 rounded-lg bg-blue-500/15 text-blue-600 dark:bg-blue-400/20 dark:text-blue-400 flex-shrink-0">
77+
<div :class="[card.icon, 'h-5 w-5']" />
78+
</div>
79+
<div class="flex-1 min-w-0">
80+
<h3 class="text-[14px] font-medium text-neutral-900 dark:text-white">
81+
{{ card.name }}
82+
</h3>
83+
<p class="mt-1 text-[12px] text-neutral-500 dark:text-neutral-400">
84+
{{ card.description }}
85+
</p>
86+
</div>
87+
<div class="i-hugeicons-arrow-right-01 h-4 w-4 text-neutral-400 flex-shrink-0" />
88+
</div>
89+
</Card>
90+
</RouterLink>
91+
</div>
492
</div>
5-
</template>
93+
</template>

0 commit comments

Comments
 (0)