Skip to content

Commit 86de6f7

Browse files
jobenjadajobenjada
authored
feat: add dashboard for demo resons (#25)
* add dashboard for demo resons * add guards as per CodeRabbit
1 parent 0752b6c commit 86de6f7

File tree

1 file changed

+311
-0
lines changed

1 file changed

+311
-0
lines changed

‎apps/playground/app/dashboard/page.tsx‎

Lines changed: 311 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,311 @@
1+
"use client";
2+
3+
import formbricks from "@formbricks/js";
4+
import { useEffect, useState } from "react";
5+
6+
export default function DemoPage(): React.JSX.Element {
7+
const [isInitialized, setIsInitialized] = useState(false);
8+
const [isDashboardOpen, setIsDashboardOpen] = useState(false);
9+
const userId = "Demo-demo-user";
10+
11+
useEffect(() => {
12+
const initFormbricks = () => {
13+
const addFormbricksDebugParam = (): void => {
14+
const url = new URL(globalThis.location.href);
15+
if (!url.searchParams.has("formbricksDebug")) {
16+
url.searchParams.set("formbricksDebug", "true");
17+
globalThis.history.replaceState({}, "", url.href);
18+
}
19+
};
20+
addFormbricksDebugParam();
21+
if (
22+
process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID &&
23+
process.env.NEXT_PUBLIC_FORMBRICKS_API_HOST
24+
) {
25+
formbricks.setup({
26+
environmentId: process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID,
27+
appUrl: process.env.NEXT_PUBLIC_FORMBRICKS_API_HOST,
28+
});
29+
setIsInitialized(true);
30+
}
31+
};
32+
initFormbricks();
33+
}, []);
34+
35+
const handleIdentifyUser = () => {
36+
if (!isInitialized || !userId) return;
37+
formbricks.setUserId(userId);
38+
formbricks.setAttribute("userType", "Demo-customer");
39+
formbricks.setAttribute("plan", "enterprise");
40+
};
41+
42+
const handleOpenDashboard = () => {
43+
setIsDashboardOpen(true);
44+
};
45+
46+
const handleCloseDashboard = () => {
47+
setIsDashboardOpen(false);
48+
if (!isInitialized) return;
49+
formbricks.track("dashboard-viewed");
50+
};
51+
52+
const handleUpgradeAction = () => {
53+
if (!isInitialized) return;
54+
formbricks.track("upgrade-clicked");
55+
};
56+
57+
return (
58+
<div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100">
59+
{/* Header */}
60+
<header className="border-b border-slate-200 bg-white shadow-sm">
61+
<div className="mx-auto max-w-7xl px-6 py-4">
62+
<div className="flex items-center justify-between">
63+
<div className="flex items-center gap-3">
64+
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-[#CF470C]">
65+
<span className="text-xl font-bold text-white">W</span>
66+
</div>
67+
<h1 className="text-xl font-semibold text-slate-900">cPanel</h1>
68+
</div>
69+
<div className="flex items-center gap-2">
70+
{isInitialized && (
71+
<div className="flex items-center gap-2 rounded-full bg-green-50 px-3 py-1 text-sm">
72+
<span className="relative flex h-2 w-2">
73+
<span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-400 opacity-75" />
74+
<span className="relative inline-flex h-2 w-2 rounded-full bg-green-500" />
75+
</span>
76+
<span className="text-green-700">Connected</span>
77+
</div>
78+
)}
79+
</div>
80+
</div>
81+
</div>
82+
</header>
83+
84+
{/* Main Content */}
85+
<main className="mx-auto max-w-7xl px-6 py-12">
86+
<div className="mb-8">
87+
<h2 className="text-3xl font-bold text-slate-900">
88+
Welcome to Your Dashboard
89+
</h2>
90+
<p className="mt-2 text-slate-600">
91+
Manage your hosting services and explore premium features
92+
</p>
93+
</div>
94+
95+
{/* Action Cards */}
96+
<div className="grid gap-6 md:grid-cols-3">
97+
{/* Identify User Card */}
98+
<div className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm transition-all hover:shadow-md">
99+
<div className="mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-blue-100">
100+
<svg
101+
className="h-6 w-6 text-blue-600"
102+
fill="none"
103+
stroke="currentColor"
104+
viewBox="0 0 24 24"
105+
>
106+
<path
107+
strokeLinecap="round"
108+
strokeLinejoin="round"
109+
strokeWidth={2}
110+
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
111+
/>
112+
</svg>
113+
</div>
114+
<h3 className="mb-2 text-lg font-semibold text-slate-900">
115+
Sign In
116+
</h3>
117+
<p className="mb-4 text-sm text-slate-600">
118+
Identify yourself and set user attributes for personalized
119+
experience
120+
</p>
121+
<button
122+
type="button"
123+
onClick={handleIdentifyUser}
124+
className="w-full rounded-lg bg-blue-600 px-4 py-2.5 text-sm font-medium text-white transition-colors hover:bg-blue-700"
125+
>
126+
Sign In as User
127+
</button>
128+
</div>
129+
130+
{/* Dashboard Action Card */}
131+
<div className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm transition-all hover:shadow-md">
132+
<div className="mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-[#CF470C]/20">
133+
<svg
134+
className="h-6 w-6 text-[#CF470C]"
135+
fill="none"
136+
stroke="currentColor"
137+
viewBox="0 0 24 24"
138+
>
139+
<path
140+
strokeLinecap="round"
141+
strokeLinejoin="round"
142+
strokeWidth={2}
143+
d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
144+
/>
145+
</svg>
146+
</div>
147+
<h3 className="mb-2 text-lg font-semibold text-slate-900">
148+
View Analytics
149+
</h3>
150+
<p className="mb-4 text-sm text-slate-600">
151+
Check your hosting metrics and performance data
152+
</p>
153+
<button
154+
type="button"
155+
onClick={handleOpenDashboard}
156+
className="w-full rounded-lg bg-[#CF470C] px-4 py-2.5 text-sm font-medium text-white transition-colors hover:bg-[#CF470C]/80"
157+
>
158+
Open Dashboard
159+
</button>
160+
</div>
161+
162+
{/* Upgrade Action Card */}
163+
<div className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm transition-all hover:shadow-md">
164+
<div className="mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-emerald-100">
165+
<svg
166+
className="h-6 w-6 text-emerald-600"
167+
fill="none"
168+
stroke="currentColor"
169+
viewBox="0 0 24 24"
170+
>
171+
<path
172+
strokeLinecap="round"
173+
strokeLinejoin="round"
174+
strokeWidth={2}
175+
d="M13 10V3L4 14h7v7l9-11h-7z"
176+
/>
177+
</svg>
178+
</div>
179+
<h3 className="mb-2 text-lg font-semibold text-slate-900">
180+
Upgrade Plan
181+
</h3>
182+
<p className="mb-4 text-sm text-slate-600">
183+
Unlock premium features and enhanced performance
184+
</p>
185+
<button
186+
type="button"
187+
onClick={handleUpgradeAction}
188+
className="w-full rounded-lg bg-emerald-600 px-4 py-2.5 text-sm font-medium text-white transition-colors hover:bg-emerald-700"
189+
>
190+
View Upgrade Options
191+
</button>
192+
</div>
193+
</div>
194+
</main>
195+
196+
{/* Dashboard Modal */}
197+
{isDashboardOpen && (
198+
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 p-4">
199+
<div className="relative w-full max-w-4xl rounded-2xl bg-white shadow-2xl">
200+
{/* Modal Header */}
201+
<div className="border-b border-slate-200 px-6 py-4">
202+
<div className="flex items-center justify-between">
203+
<h3 className="text-xl font-semibold text-slate-900">
204+
Analytics Dashboard
205+
</h3>
206+
<button
207+
type="button"
208+
onClick={handleCloseDashboard}
209+
className="rounded-lg p-1 text-slate-400 transition-colors hover:bg-slate-100 hover:text-slate-600"
210+
>
211+
<svg
212+
className="h-6 w-6"
213+
fill="none"
214+
stroke="currentColor"
215+
viewBox="0 0 24 24"
216+
>
217+
<path
218+
strokeLinecap="round"
219+
strokeLinejoin="round"
220+
strokeWidth={2}
221+
d="M6 18L18 6M6 6l12 12"
222+
/>
223+
</svg>
224+
</button>
225+
</div>
226+
</div>
227+
228+
{/* Modal Content */}
229+
<div className="p-6">
230+
<div className="grid gap-4 md:grid-cols-3">
231+
{/* Stat Cards */}
232+
<div className="rounded-lg border border-slate-200 bg-gradient-to-br from-blue-50 to-blue-100 p-4">
233+
<div className="text-sm font-medium text-blue-900">
234+
Total Users
235+
</div>
236+
<div className="mt-2 text-3xl font-bold text-blue-600">
237+
12,458
238+
</div>
239+
<div className="mt-1 text-xs text-blue-700">
240+
↑ 12% from last month
241+
</div>
242+
</div>
243+
244+
<div className="rounded-lg border border-slate-200 bg-gradient-to-br from-purple-50 to-purple-100 p-4">
245+
<div className="text-sm font-medium text-purple-900">
246+
Active Sessions
247+
</div>
248+
<div className="mt-2 text-3xl font-bold text-purple-600">
249+
3,247
250+
</div>
251+
<div className="mt-1 text-xs text-purple-700">
252+
↑ 8% from last week
253+
</div>
254+
</div>
255+
256+
<div className="rounded-lg border border-slate-200 bg-gradient-to-br from-emerald-50 to-emerald-100 p-4">
257+
<div className="text-sm font-medium text-emerald-900">
258+
Server Uptime
259+
</div>
260+
<div className="mt-2 text-3xl font-bold text-emerald-600">
261+
99.9%
262+
</div>
263+
<div className="mt-1 text-xs text-emerald-700">
264+
Last 30 days
265+
</div>
266+
</div>
267+
</div>
268+
269+
{/* Chart Placeholder */}
270+
<div className="mt-6 rounded-lg border border-slate-200 bg-slate-50 p-8">
271+
<div className="flex h-48 items-center justify-center">
272+
<div className="text-center">
273+
<svg
274+
className="mx-auto h-16 w-16 text-slate-400"
275+
fill="none"
276+
stroke="currentColor"
277+
viewBox="0 0 24 24"
278+
>
279+
<path
280+
strokeLinecap="round"
281+
strokeLinejoin="round"
282+
strokeWidth={2}
283+
d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
284+
/>
285+
</svg>
286+
<p className="mt-2 text-sm text-slate-600">
287+
Performance metrics chart
288+
</p>
289+
</div>
290+
</div>
291+
</div>
292+
</div>
293+
294+
{/* Modal Footer */}
295+
<div className="border-t border-slate-200 bg-slate-50 px-6 py-4">
296+
<div className="flex justify-end gap-3">
297+
<button
298+
type="button"
299+
onClick={handleCloseDashboard}
300+
className="rounded-lg bg-[#CF470C] px-6 py-2 text-sm font-medium text-white transition-colors hover:bg-[#CF470C]/80"
301+
>
302+
Close Dashboard
303+
</button>
304+
</div>
305+
</div>
306+
</div>
307+
</div>
308+
)}
309+
</div>
310+
);
311+
}

0 commit comments

Comments
 (0)