Skip to content

Commit 13cdff1

Browse files
chrisbbreuerchrisbbreuer
committed
chore: wip
1 parent d358261 commit 13cdff1

File tree

4 files changed

+255
-3
lines changed

4 files changed

+255
-3
lines changed

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -205,7 +205,8 @@ const sectionContent: Record<string, SectionContent> = {
205205
]
206206
},
207207
{ to: '/dns', icon: 'i-hugeicons-global-search', text: 'DNS' },
208-
{ to: '/emails', icon: 'i-hugeicons-mailbox-01', text: 'Emails' },
208+
{ to: '/emails', icon: 'i-hugeicons-mail-01', text: 'Emails' },
209+
{ to: '/mailboxes', icon: 'i-hugeicons-mailbox-01', text: 'Mailboxes' },
209210
{ to: '/logs', icon: 'i-hugeicons-search-list-01', text: 'Logs' }
210211
]
211212
}
@@ -355,7 +356,7 @@ const switchTeam = (team: Team) => {
355356
class="flex items-center justify-between cursor-pointer"
356357
@click="toggleSection(sectionKey)"
357358
>
358-
<div class="flex items-center gap-2">
359+
<div class="flex items-center gap-2 -ml-3">
359360
<div
360361
class="i-hugeicons-drag-drop-horizontal h-4 w-4 text-gray-400 cursor-move drag-handle"
361362
@mousedown.stop

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ ChartJS.register(
2626
)
2727
2828
useHead({
29-
title: 'Dashboard - Emails',
29+
title: 'Dashboard - Your Inbox',
3030
})
3131
3232
const timeRange = ref<'day' | 'week' | 'month' | 'year'>('day')

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

Lines changed: 250 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,250 @@
1+
<script setup lang="ts">
2+
import { ref, onMounted } from 'vue'
3+
import { useHead } from '@vueuse/head'
4+
import { Line } from 'vue-chartjs'
5+
import {
6+
Chart as ChartJS,
7+
CategoryScale,
8+
LinearScale,
9+
PointElement,
10+
LineElement,
11+
Title,
12+
Tooltip,
13+
Legend,
14+
Filler,
15+
} from 'chart.js'
16+
17+
ChartJS.register(
18+
CategoryScale,
19+
LinearScale,
20+
PointElement,
21+
LineElement,
22+
Title,
23+
Tooltip,
24+
Legend,
25+
Filler,
26+
)
27+
28+
useHead({
29+
title: 'Dashboard - Emails',
30+
})
31+
32+
const timeRange = ref<'day' | 'week' | 'month' | 'year'>('day')
33+
const isLoading = ref(false)
34+
35+
// Chart options
36+
const chartOptions = {
37+
responsive: true,
38+
maintainAspectRatio: false,
39+
scales: {
40+
y: {
41+
beginAtZero: true,
42+
grid: {
43+
color: 'rgba(200, 200, 200, 0.1)',
44+
},
45+
ticks: {
46+
color: 'rgb(156, 163, 175)',
47+
font: {
48+
family: "'JetBrains Mono', monospace",
49+
},
50+
},
51+
},
52+
x: {
53+
grid: {
54+
display: false,
55+
},
56+
ticks: {
57+
color: 'rgb(156, 163, 175)',
58+
font: {
59+
family: "'JetBrains Mono', monospace",
60+
},
61+
},
62+
},
63+
},
64+
plugins: {
65+
legend: {
66+
display: true,
67+
position: 'top' as const,
68+
align: 'end' as const,
69+
labels: {
70+
color: 'rgb(156, 163, 175)',
71+
font: {
72+
family: "'JetBrains Mono', monospace",
73+
},
74+
boxWidth: 12,
75+
padding: 15,
76+
},
77+
},
78+
tooltip: {
79+
mode: 'index' as const,
80+
intersect: false,
81+
},
82+
},
83+
}
84+
85+
// Generate mock email activity data
86+
const getEmailActivityData = () => {
87+
const labels = Array.from({ length: 24 }, (_, i) => `${i}:00`)
88+
return {
89+
labels,
90+
datasets: [
91+
{
92+
label: 'Received',
93+
data: Array.from({ length: 24 }, () => Math.floor(Math.random() * 50) + 20),
94+
borderColor: 'rgb(59, 130, 246)', // Blue
95+
backgroundColor: 'rgba(59, 130, 246, 0.1)',
96+
fill: true,
97+
},
98+
{
99+
label: 'Sent',
100+
data: Array.from({ length: 24 }, () => Math.floor(Math.random() * 30) + 10),
101+
borderColor: 'rgb(16, 185, 129)', // Green
102+
backgroundColor: 'rgba(16, 185, 129, 0.1)',
103+
fill: true,
104+
},
105+
{
106+
label: 'Spam',
107+
data: Array.from({ length: 24 }, () => Math.floor(Math.random() * 10)),
108+
borderColor: 'rgb(239, 68, 68)', // Red
109+
backgroundColor: 'rgba(239, 68, 68, 0.1)',
110+
fill: true,
111+
},
112+
],
113+
}
114+
}
115+
116+
const emailActivityData = ref(getEmailActivityData())
117+
118+
// Watch for time range changes
119+
watch(timeRange, async () => {
120+
isLoading.value = true
121+
// Simulate API delay
122+
await new Promise(resolve => setTimeout(resolve, 500))
123+
emailActivityData.value = getEmailActivityData()
124+
isLoading.value = false
125+
})
126+
127+
// Initial load
128+
onMounted(async () => {
129+
isLoading.value = true
130+
await new Promise(resolve => setTimeout(resolve, 500))
131+
isLoading.value = false
132+
})
133+
</script>
134+
135+
<template>
136+
<div class="min-h-screen py-4 dark:bg-blue-gray-800 lg:py-8">
137+
<div class="px-4 lg:px-8 sm:px-6">
138+
<!-- Email Activity Chart -->
139+
<div class="mb-8 bg-white dark:bg-blue-gray-700 rounded-lg shadow">
140+
<div class="p-6">
141+
<div class="flex items-center justify-between mb-6">
142+
<div>
143+
<h3 class="text-base font-medium text-gray-900 dark:text-gray-100">Email Activity</h3>
144+
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Received, sent, and spam email volume</p>
145+
</div>
146+
<select
147+
v-model="timeRange"
148+
class="h-9 text-sm border-0 rounded-md bg-gray-50 dark:bg-blue-gray-600 py-1.5 pl-3 pr-8 text-gray-900 dark:text-gray-100 ring-1 ring-inset ring-gray-300 dark:ring-gray-600 focus:ring-2 focus:ring-blue-600"
149+
>
150+
<option value="day">Last 24 Hours</option>
151+
<option value="week">Last 7 Days</option>
152+
<option value="month">Last 30 Days</option>
153+
<option value="year">Last Year</option>
154+
</select>
155+
</div>
156+
<div class="h-[300px] relative">
157+
<div v-if="isLoading" class="absolute inset-0 flex items-center justify-center bg-white bg-opacity-75 dark:bg-blue-gray-700 dark:bg-opacity-75 z-10">
158+
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div>
159+
</div>
160+
<Line :data="emailActivityData" :options="chartOptions" />
161+
</div>
162+
</div>
163+
</div>
164+
165+
<div class="mb-8 sm:flex sm:items-center">
166+
<div class="sm:flex-auto">
167+
<h1 class="text-base text-gray-900 font-semibold leading-6">
168+
Mailbox
169+
</h1>
170+
<p class="mt-2 text-sm text-gray-700 dark:text-gray-400">
171+
A list of all your project's email inboxes.
172+
</p>
173+
</div>
174+
<div class="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
175+
<button type="button" class="block rounded-md bg-blue-600 px-3 py-2 text-center text-sm text-white font-semibold shadow-sm hover:bg-blue-500 focus-visible:outline-2 focus-visible:outline-blue-600 focus-visible:outline-offset-2 focus-visible:outline">
176+
Add Mailbox
177+
</button>
178+
</div>
179+
</div>
180+
181+
<div class="mt-8 flow-root">
182+
<div class="overflow-x-auto -mx-4 -my-2 lg:-mx-8 sm:-mx-6">
183+
<div class="inline-block min-w-full py-2 align-middle lg:px-8 sm:px-6">
184+
<div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 sm:rounded-lg">
185+
<table class="min-w-full divide-y divide-gray-300">
186+
<thead class="bg-gray-50">
187+
<tr>
188+
<th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm text-gray-900 font-semibold sm:pl-6">
189+
Inbox
190+
</th>
191+
192+
<th scope="col" class="px-3 py-3.5 text-left text-sm text-gray-900 font-semibold">
193+
Name
194+
</th>
195+
196+
<th scope="col" class="px-3 py-3.5 text-left text-right text-sm text-gray-900 font-semibold">
197+
Created At
198+
</th>
199+
200+
<th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6">
201+
<span class="sr-only">Edit</span>
202+
</th>
203+
</tr>
204+
</thead>
205+
206+
<tbody class="bg-white divide-y divide-gray-200">
207+
<tr>
208+
<td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm text-gray-900 font-medium sm:pl-6">
209+
chris@stacksjs.org
210+
</td>
211+
212+
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
213+
Chris Breuer
214+
</td>
215+
216+
<td class="whitespace-nowrap px-3 py-4 text-right text-sm text-gray-500">
217+
2023-08-01
218+
</td>
219+
220+
<td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
221+
<a href="#" class="text-blue-600 hover:text-blue-900">Edit<span class="sr-only">, Email Inbox</span></a>
222+
</td>
223+
</tr>
224+
225+
<tr>
226+
<td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm text-gray-900 font-medium sm:pl-6">
227+
blake@stacksjs.org
228+
</td>
229+
230+
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
231+
Blake
232+
</td>
233+
234+
<td class="whitespace-nowrap px-3 py-4 text-right text-sm text-gray-500">
235+
2024-01-11
236+
</td>
237+
238+
<td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
239+
<a href="#" class="text-blue-600 hover:text-blue-900">Edit<span class="sr-only">, Email Inbox</span></a>
240+
</td>
241+
</tr>
242+
</tbody>
243+
</table>
244+
</div>
245+
</div>
246+
</div>
247+
</div>
248+
</div>
249+
</div>
250+
</template>

‎storage/framework/types/dashboard-router.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ declare module 'vue-router/auto-routes' {
4848
'/jobs/[id]': RouteRecordInfo<'/jobs/[id]', '/jobs/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
4949
'/jobs/history': RouteRecordInfo<'/jobs/history', '/jobs/history', Record<never, never>, Record<never, never>>,
5050
'/logs/': RouteRecordInfo<'/logs/', '/logs', Record<never, never>, Record<never, never>>,
51+
'/mailboxes/': RouteRecordInfo<'/mailboxes/', '/mailboxes', Record<never, never>, Record<never, never>>,
5152
'/models/': RouteRecordInfo<'/models/', '/models', Record<never, never>, Record<never, never>>,
5253
'/models/subscribers': RouteRecordInfo<'/models/subscribers', '/models/subscribers', Record<never, never>, Record<never, never>>,
5354
'/models/teams': RouteRecordInfo<'/models/teams', '/models/teams', Record<never, never>, Record<never, never>>,

0 commit comments

Comments
 (0)