Skip to content

Commit c2695df

Browse files
EndyKaufmanEndyKaufman
committed
feat(app): add Analytics and Settings pages with delete functionality
- Add AnalyticsPageComponent with usage stats, device performance, recent activity, and data export - Implement AnalyticsDeletePageComponent for confirming permanent analytics data deletion - Add SettingsPageComponent with account and system preferences configuration - Implement SettingsDeletePageComponent for account deletion confirmation - Update navigation links to use proper hrefs for /analytics and /settings routes - Refine button gradient styles for consistency across dashboard and widget pages - Add DocumentationPageComponent with project overview, features, widgets, development guide, and resources - Update home page to link to documentation with styled button - Fix icon and style inconsistencies in dashboards and home pages for uniform UI appearance
1 parent 4ef208f commit c2695df

File tree

12 files changed

+782
-12
lines changed

12 files changed

+782
-12
lines changed

‎web/src/app/app.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -77,8 +77,8 @@ export const routeMeta: RouteMeta = {
7777
</a>
7878
7979
<a
80+
href="/analytics"
8081
class="flex items-center p-3 rounded-xl text-gray-600 font-medium transition-all duration-300 hover:bg-gray-100 hover:text-gray-800"
81-
(click)="showError()"
8282
>
8383
<i-lucide
8484
name="chart-bar-big"
@@ -88,7 +88,7 @@ export const routeMeta: RouteMeta = {
8888
</a>
8989
9090
<a
91-
(click)="showError()"
91+
href="/settings"
9292
class="flex items-center p-3 rounded-xl text-gray-600 font-medium transition-all duration-300 hover:bg-gray-100 hover:text-gray-800"
9393
>
9494
<i-lucide name="settings" class="w-6 h-6 mr-0 lg:mr-3"></i-lucide>

‎web/src/app/pages/analytics.page.ts‎

Lines changed: 182 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,182 @@
1+
import { RouteMeta } from '@analogjs/router';
2+
import { ChangeDetectionStrategy, Component } from '@angular/core';
3+
import { LucideAngularModule } from 'lucide-angular';
4+
5+
import { ShowNavGuard } from '../guards/nav.guard';
6+
7+
export const routeMeta: RouteMeta = {
8+
canActivate: [ShowNavGuard],
9+
};
10+
11+
@Component({
12+
selector: 'analytics-page',
13+
changeDetection: ChangeDetectionStrategy.OnPush,
14+
imports: [LucideAngularModule],
15+
template: `
16+
<h1 class="text-4xl font-extrabold text-gray-800 mb-2">Analytics (Mock)</h1>
17+
<p class="text-xl text-gray-500 mb-8">Track your dashboard usage and performance</p>
18+
19+
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
20+
<!-- Usage Statistics Card -->
21+
<div class="bg-white p-6 rounded-2xl long-shadow">
22+
<div class="flex items-center mb-4">
23+
<i-lucide
24+
name="chart-bar-big"
25+
class="w-10 h-10 text-pastel-blue bg-pastel-blue/10 rounded-lg">
26+
</i-lucide>
27+
<h2 class="text-2xl font-bold text-gray-800">Usage Statistics</h2>
28+
</div>
29+
30+
<div class="space-y-4">
31+
<div class="flex justify-between items-center pb-2 border-b border-gray-100">
32+
<span class="text-gray-600">Total Dashboards</span>
33+
<span class="text-2xl font-bold text-pastel-blue">12</span>
34+
</div>
35+
36+
<div class="flex justify-between items-center pb-2 border-b border-gray-100">
37+
<span class="text-gray-600">Active Devices</span>
38+
<span class="text-2xl font-bold text-pastel-blue">8</span>
39+
</div>
40+
41+
<div class="flex justify-between items-center pb-2 border-b border-gray-100">
42+
<span class="text-gray-600">Widgets Deployed</span>
43+
<span class="text-2xl font-bold text-pastel-blue">42</span>
44+
</div>
45+
46+
<div class="flex justify-between items-center">
47+
<span class="text-gray-600">Avg. Updates/Day</span>
48+
<span class="text-2xl font-bold text-pastel-blue">127</span>
49+
</div>
50+
</div>
51+
</div>
52+
53+
<!-- Device Performance Card -->
54+
<div class="bg-white p-6 rounded-2xl long-shadow">
55+
<div class="flex items-center mb-4">
56+
<i-lucide
57+
name="smartphone"
58+
class="w-10 h-10 text-pastel-blue bg-pastel-blue/10 rounded-lg">
59+
</i-lucide>
60+
<h2 class="text-2xl font-bold text-gray-800">Device Performance</h2>
61+
</div>
62+
63+
<div class="space-y-4">
64+
<div class="flex justify-between items-center pb-2 border-b border-gray-100">
65+
<span class="text-gray-600">Avg. Response Time</span>
66+
<span class="text-2xl font-bold text-pastel-blue">24ms</span>
67+
</div>
68+
69+
<div class="flex justify-between items-center pb-2 border-b border-gray-100">
70+
<span class="text-gray-600">Uptime</span>
71+
<span class="text-2xl font-bold text-pastel-blue">99.8%</span>
72+
</div>
73+
74+
<div class="flex justify-between items-center pb-2 border-b border-gray-100">
75+
<span class="text-gray-600">Offline Events</span>
76+
<span class="text-2xl font-bold text-pastel-blue">3</span>
77+
</div>
78+
79+
<div class="flex justify-between items-center">
80+
<span class="text-gray-600">Cache Hit Rate</span>
81+
<span class="text-2xl font-bold text-pastel-blue">87%</span>
82+
</div>
83+
</div>
84+
</div>
85+
</div>
86+
87+
<!-- Recent Activity Section -->
88+
<div class="bg-white p-6 rounded-2xl long-shadow mb-8">
89+
<div class="flex items-center mb-4">
90+
<i-lucide
91+
name="activity"
92+
class="w-10 h-10 text-pastel-blue bg-pastel-blue/10 rounded-lg">
93+
</i-lucide>
94+
<h2 class="text-2xl font-bold text-gray-800">Recent Activity</h2>
95+
</div>
96+
97+
<div class="overflow-x-auto">
98+
<table class="w-full">
99+
<thead>
100+
<tr class="text-left text-gray-500 border-b border-gray-100">
101+
<th class="pb-3">Time</th>
102+
<th class="pb-3">Device</th>
103+
<th class="pb-3">Action</th>
104+
<th class="pb-3">Status</th>
105+
</tr>
106+
</thead>
107+
<tbody>
108+
<tr class="border-b border-gray-100 hover:bg-gray-50">
109+
<td class="py-3 text-gray-600">2 hours ago</td>
110+
<td class="py-3">Kitchen Display</td>
111+
<td class="py-3">Dashboard Update</td>
112+
<td class="py-3">
113+
<span class="px-2 py-1 rounded-full text-xs bg-green-100 text-green-800">Success</span>
114+
</td>
115+
</tr>
116+
<tr class="border-b border-gray-100 hover:bg-gray-50">
117+
<td class="py-3 text-gray-600">5 hours ago</td>
118+
<td class="py-3">Living Room Tablet</td>
119+
<td class="py-3">Widget Added</td>
120+
<td class="py-3">
121+
<span class="px-2 py-1 rounded-full text-xs bg-green-100 text-green-800">Success</span>
122+
</td>
123+
</tr>
124+
<tr class="border-b border-gray-100 hover:bg-gray-50">
125+
<td class="py-3 text-gray-600">1 day ago</td>
126+
<td class="py-3">Bedroom Phone</td>
127+
<td class="py-3">Settings Changed</td>
128+
<td class="py-3">
129+
<span class="px-2 py-1 rounded-full text-xs bg-yellow-100 text-yellow-800">Warning</span>
130+
</td>
131+
</tr>
132+
<tr class="border-b border-gray-100 hover:bg-gray-50">
133+
<td class="py-3 text-gray-600">2 days ago</td>
134+
<td class="py-3">Office Display</td>
135+
<td class="py-3">Connection Lost</td>
136+
<td class="py-3">
137+
<span class="px-2 py-1 rounded-full text-xs bg-red-100 text-red-800">Error</span>
138+
</td>
139+
</tr>
140+
</tbody>
141+
</table>
142+
</div>
143+
</div>
144+
145+
<!-- Data Export Section -->
146+
<div class="bg-white p-6 rounded-2xl long-shadow">
147+
<div class="flex items-center mb-4">
148+
<i-lucide
149+
name="download"
150+
class="w-10 h-10 text-pastel-blue bg-pastel-blue/10 rounded-lg">
151+
</i-lucide>
152+
<h2 class="text-2xl font-bold text-gray-800">Data Export</h2>
153+
</div>
154+
155+
<p class="text-gray-600 mb-4">
156+
Export your analytics data for further analysis or reporting.
157+
</p>
158+
159+
<div class="flex flex-wrap gap-4">
160+
<button class="flex items-center text-lg font-bold py-3 px-6 rounded-xl text-white transition-all duration-300 transform hover:scale-[1.02] flat-btn-shadow bg-gradient-to-tr from-[#8A89F0] to-[#A2C0F5] tracking-wide">
161+
<i-lucide name="file-text" class="w-5 h-5 mr-2"></i-lucide>
162+
Export as CSV
163+
</button>
164+
<button class="flex items-center text-lg font-bold py-3 px-6 rounded-xl text-white bg-gray-500 transition-all duration-300 transform hover:scale-[1.02] flat-btn-shadow bg-gradient-to-tr from-[#AAB1BF] to-[#8B92A0] tracking-wide">
165+
<i-lucide name="chart-bar-big" class="w-5 h-5 mr-2"></i-lucide>
166+
Export as JSON
167+
</button>
168+
<a
169+
href="/analytics/delete"
170+
class="flex items-center text-lg font-bold py-3 px-6 rounded-xl text-white transition-all duration-300 transform hover:scale-[1.02] flat-btn-shadow bg-gradient-to-tr from-[#FF988A] to-[#FFD5A2] text-gray-800">
171+
<i-lucide name="trash-2" class="w-5 h-5 mr-2"></i-lucide>
172+
Delete Data
173+
</a>
174+
</div>
175+
</div>
176+
`,
177+
})
178+
export default class AnalyticsPageComponent {
179+
showError() {
180+
alert('Feature coming soon!');
181+
}
182+
}

‎web/src/app/pages/analytics/delete.page.ts‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import { RouteMeta } from '@analogjs/router';
2+
import { ChangeDetectionStrategy, Component } from '@angular/core';
3+
import { ReactiveFormsModule, UntypedFormGroup } from '@angular/forms';
4+
import { LucideAngularModule } from 'lucide-angular';
5+
6+
import { ShowNavGuard } from '../../guards/nav.guard';
7+
8+
export const routeMeta: RouteMeta = {
9+
canActivate: [ShowNavGuard],
10+
};
11+
12+
@Component({
13+
selector: 'analytics-delete-page',
14+
changeDetection: ChangeDetectionStrategy.OnPush,
15+
imports: [LucideAngularModule, ReactiveFormsModule],
16+
template: `
17+
<h1 class="text-4xl font-extrabold text-gray-800 mb-2">
18+
Delete Analytics Data
19+
</h1>
20+
<p class="text-xl text-gray-500 mb-8">
21+
<a
22+
href="/analytics"
23+
class="text-gray-500 hover:text-pastel-blue transition-colors mb-10 mt-2 flex items-center"
24+
>
25+
<i-lucide name="arrow-left" class="w-6 h-6 mr-0 lg:mr-2"></i-lucide>
26+
<span class="hidden lg:inline text-lg font-medium">Back to Analytics</span>
27+
</a>
28+
Permanently remove analytics data.
29+
</p>
30+
31+
<!-- Analytics Data Deletion Panel -->
32+
<div class="bg-white p-6 rounded-2xl long-shadow mb-8 space-y-4">
33+
<form
34+
[formGroup]="form"
35+
(ngSubmit)="onSubmit()"
36+
class="w-full"
37+
>
38+
<div class="mb-6">
39+
<p class="text-lg text-gray-700 mb-2">
40+
Are you sure you want to delete all analytics data?
41+
</p>
42+
<p class="text-gray-500">
43+
This action cannot be undone. All collected analytics data will be permanently removed.
44+
</p>
45+
</div>
46+
47+
<div class="flex gap-4">
48+
<a
49+
href="/analytics"
50+
class="flex items-center text-lg font-bold py-3 px-6 rounded-xl text-white bg-gray-500 transition-all duration-300 transform hover:scale-[1.02] flat-btn-shadow mb-8
51+
bg-gradient-to-tr from-[#AAB1BF] to-[#8B92A0] tracking-wide cursor-pointer"
52+
>
53+
<i-lucide name="x" class="w-5 h-5 mr-2"></i-lucide>
54+
Cancel
55+
</a>
56+
57+
<button
58+
type="submit"
59+
class="flex items-center text-lg font-bold py-3 px-6 rounded-xl text-white transition-all duration-300 transform hover:scale-[1.02] flat-btn-shadow mb-8
60+
bg-gradient-to-tr from-[#FF988A] to-[#FFD5A2] text-gray-800 cursor-pointer"
61+
>
62+
<i-lucide name="trash-2" class="w-5 h-5 mr-2"></i-lucide>
63+
Delete Analytics Data
64+
</button>
65+
</div>
66+
</form>
67+
</div>
68+
`,
69+
})
70+
export default class AnalyticsDeletePageComponent {
71+
form = new UntypedFormGroup({});
72+
73+
onSubmit() {
74+
alert('Analytics data deleted successfully!');
75+
// In a real application, this would call a service to delete the data
76+
}
77+
}

‎web/src/app/pages/dashboards/[dashboardId]/delete.page.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ export const routeMeta: RouteMeta = {
6565
<a
6666
href="/dashboards/{{ dashboard.id }}"
6767
class="flex items-center text-lg font-bold py-3 px-6 rounded-xl text-white bg-gray-500 transition-all duration-300 transform hover:scale-[1.02] flat-btn-shadow mb-8
68-
bg-gradient-to-tr from-[#9CA3AF] to-[#6B7280] tracking-wide cursor-pointer"
68+
bg-gradient-to-tr from-[#AAB1BF] to-[#8B92A0] tracking-wide cursor-pointer"
6969
>
7070
<i-lucide name="x" class="w-5 h-5 mr-2"></i-lucide>
7171
Cancel

‎web/src/app/pages/dashboards/[dashboardId]/widgets/[widgetId]/delete.page.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ export const routeMeta: RouteMeta = {
8080
dashboardAndWidget.widget.id
8181
}}"
8282
class="flex items-center text-lg font-bold py-3 px-6 rounded-xl text-white bg-gray-500 transition-all duration-300 transform hover:scale-[1.02] flat-btn-shadow mb-8
83-
bg-gradient-to-tr from-[#9CA3AF] to-[#6B7280] tracking-wide cursor-pointer"
83+
bg-gradient-to-tr from-[#AAB1BF] to-[#8B92A0] tracking-wide cursor-pointer"
8484
>
8585
<i-lucide name="x" class="w-5 h-5 mr-2"></i-lucide>
8686
Cancel

‎web/src/app/pages/dashboards/[dashboardId]/widgets/[widgetId]/index.page.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ export const routeMeta: RouteMeta = {
8888
<a
8989
href="/dashboards/{{ data.dashboard.id }}"
9090
class="flex items-center text-lg font-bold py-3 px-6 rounded-xl text-white bg-gray-500 transition-all duration-300 transform hover:scale-[1.02] flat-btn-shadow mb-8
91-
bg-gradient-to-tr from-[#9CA3AF] to-[#6B7280] tracking-wide cursor-pointer"
91+
bg-gradient-to-tr from-[#AAB1BF] to-[#8B92A0] tracking-wide cursor-pointer"
9292
>
9393
<i-lucide name="x" class="w-5 h-5 mr-2"></i-lucide>
9494
Cancel

‎web/src/app/pages/dashboards/[dashboardId]/widgets/add/[type]/index.page.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ export const routeMeta: RouteMeta = {
7676
<a
7777
href="/dashboards/{{ data.dashboard.id }}"
7878
class="flex items-center text-lg font-bold py-3 px-6 rounded-xl text-white bg-gray-500 transition-all duration-300 transform hover:scale-[1.02] flat-btn-shadow mb-8
79-
bg-gradient-to-tr from-[#9CA3AF] to-[#6B7280] tracking-wide cursor-pointer"
79+
bg-gradient-to-tr from-[#AAB1BF] to-[#8B92A0] tracking-wide cursor-pointer"
8080
>
8181
<i-lucide name="x" class="w-5 h-5 mr-2"></i-lucide>
8282
Cancel

‎web/src/app/pages/dashboards/index.page.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ export const routeMeta: RouteMeta = {
3737
<div class="flex justify-between items-start mb-4">
3838
<i-lucide
3939
name="layout-dashboard"
40-
class="w-10 h-10 text-pastel-blue bg-pastel-blue/10 p-2 rounded-lg"
40+
class="w-10 h-10 text-pastel-blue bg-pastel-blue/10 rounded-lg"
4141
></i-lucide>
4242
<span
4343
class="text-sm font-medium text-gray-500 px-3 py-1 bg-gray-100 rounded-full"

0 commit comments

Comments
 (0)