Skip to content

Commit f3d56de

Browse files
d-e-v-14d-e-v-14
committed
feat: analytics board
1 parent 02c768e commit f3d56de

File tree

2 files changed

+80
-201
lines changed

2 files changed

+80
-201
lines changed

‎frontend/src/pages/domain.jsx‎

Lines changed: 80 additions & 115 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,25 @@ import {
1010
FiCalendar,
1111
FiTrendingUp
1212
} from "react-icons/fi";
13-
import { dummyDomainUsers } from "./selection";
1413
import BackButton from "../components/backButton";
1514

15+
const analyticsData = {
16+
total_users_with_selection: 830,
17+
domain_counts: {
18+
CC: 235,
19+
WEB: 414,
20+
EVENTS: 318,
21+
APP: 136,
22+
"AI/ML": 284,
23+
"VIDEO EDITING": 72,
24+
"UI/UX": 110,
25+
PNM: 232,
26+
RND: 1,
27+
"GRAPHIC DESIGN": 1
28+
}
29+
};
30+
31+
1632
const DOMAIN_META = {
1733
WEB: { icon: <FiGlobe />, color: "text-blue-400" },
1834
APP: { icon: <FiSmartphone />, color: "text-green-400" },
@@ -23,140 +39,89 @@ const DOMAIN_META = {
2339
EVENTS: { icon: <FiCalendar />, color: "text-orange-400" },
2440
PNM: { icon: <FiTrendingUp />, color: "text-teal-400" }
2541
};
26-
2742
export default function DomainSelectionAnalytics() {
28-
const [users, setUsers] = useState([]);
2943
const [loading, setLoading] = useState(true);
44+
const [data, setData] = useState(null);
3045

3146
useEffect(() => {
32-
setUsers(dummyDomainUsers);
47+
setData(analyticsData);
3348
setLoading(false);
3449
}, []);
3550

36-
const userDomainMap = useMemo(
37-
() =>
38-
users.map((u) => ({
39-
email: u.email,
40-
username: u.username,
41-
domains: Object.values(u.domain || {}).flat()
42-
})),
43-
[users]
44-
);
45-
4651
const sortedDomains = useMemo(() => {
47-
const counts = Object.entries(DOMAIN_META).map(([domain]) => ({
48-
domain,
49-
count: users.reduce((c, u) => {
50-
const d = Object.values(u.domain || {}).flat();
51-
return d.includes(domain) ? c + 1 : c;
52-
}, 0)
53-
}));
54-
return counts.sort((a, b) => b.count - a.count);
55-
}, [users]);
52+
if (!data) return [];
53+
54+
return Object.keys(DOMAIN_META)
55+
.map((domain) => ({
56+
domain,
57+
count: data.domain_counts?.[domain] ?? 0
58+
}))
59+
.sort((a, b) => b.count - a.count);
60+
}, [data]);
5661

5762
return (
58-
<div className="min-h-screen bg-black px-4 py-8 sm:py-10 text-white">
63+
<div className="min-h-screen bg-black px-4 py-10 text-white">
5964
<div className="max-w-7xl mx-auto">
60-
<h1 className="text-3xl mt-10 sm:text-4xl md:text-5xl font-bold text-center mb-10 sm:mb-14 tracking-wide">
61-
Which Domain is Winning? (This is dummy data Rn)
62-
</h1>
6365
<BackButton label="Go Back" />
6466

67+
<h1 className="text-3xl sm:text-4xl font-bold text-center mb-10">
68+
Domain Selection Analytics
69+
</h1>
70+
6571
{loading ? (
66-
<p className="text-center text-neutral-400">Have Patience dude</p>
72+
<p className="text-center text-neutral-400">Loading...</p>
6773
) : (
6874
<>
69-
<div className="grid grid-cols-1 xs:grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-5 sm:gap-6 mb-14 sm:mb-16">
70-
{sortedDomains.map(({ domain, count }, idx) => (
71-
<div
72-
key={domain}
73-
className={`relative bg-white/5 backdrop-blur-xl border rounded-3xl p-6 sm:p-7 flex flex-col justify-center items-center text-center shadow-xl transition ${
74-
idx === 0
75-
? "border-yellow-400 scale-[1.05]"
76-
: "border-yellow-500/20 hover:scale-[1.03]"
77-
}`}
78-
>
79-
{idx === 0 && (
80-
<span className="absolute -top-3 bg-yellow-400 text-black text-xs font-bold px-3 py-1 rounded-full">
81-
Winner?
82-
</span>
83-
)}
84-
85-
<div
86-
className={`mb-4 text-4xl sm:text-5xl ${DOMAIN_META[domain].color}`}
87-
>
88-
{DOMAIN_META[domain].icon}
89-
</div>
90-
91-
<h2 className="text-lg sm:text-xl font-semibold mb-1">
92-
{domain}
93-
</h2>
94-
95-
<p className="text-3xl sm:text-4xl font-bold">
96-
{count}
97-
</p>
98-
99-
<p className="text-sm text-neutral-400 mt-1">
100-
Users
101-
</p>
102-
</div>
103-
))}
104-
</div>
105-
106-
<div className="bg-white/5 backdrop-blur-xl border border-white/10 rounded-3xl p-5 sm:p-6 shadow-2xl">
107-
<h2 className="text-xl sm:text-2xl font-bold mb-5 sm:mb-6 flex items-center gap-3">
108-
<FiUsers className="text-yellow-300" />
109-
User Selections
110-
</h2>
111-
112-
<div className="overflow-x-auto">
113-
<table className="w-full min-w-[640px] border-collapse">
114-
<thead>
115-
<tr className="border-b border-white/10 text-neutral-400 text-sm">
116-
<th className="py-3 px-2 text-left">Email</th>
117-
<th className="py-3 px-2 text-left">Username</th>
118-
<th className="py-3 px-2 text-left">Domains</th>
119-
</tr>
120-
</thead>
121-
<tbody>
122-
{userDomainMap.map((u, idx) => (
123-
<tr
124-
key={idx}
125-
className="border-b border-white/5 hover:bg-white/5 transition"
126-
>
127-
<td className="py-3 px-2 break-all">
128-
{u.email}
129-
</td>
130-
<td className="py-3 px-2">
131-
{u.username || "—"}
132-
</td>
133-
<td className="py-3 px-2">
134-
<div className="flex flex-wrap gap-2">
135-
{u.domains.map((d) => (
136-
<span
137-
key={d}
138-
className={`flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 text-xs sm:text-sm ${DOMAIN_META[d].color}`}
139-
>
140-
{DOMAIN_META[d].icon}
141-
{d}
142-
</span>
143-
))}
144-
</div>
145-
</td>
146-
147-
</tr>
148-
))}
149-
75+
<p className="text-center text-neutral-400 mb-8">
76+
Total users with selections: {" "}
77+
<span className="text-white font-semibold">
78+
{data.total_users_with_selection}
79+
</span>
80+
</p>
81+
82+
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
83+
{sortedDomains.map(({ domain, count }, idx) => (
84+
<div
85+
key={domain}
86+
className={`relative rounded-3xl p-[2px] transition-transform duration-300 bg-gradient-to-br from-white/20 to-white/5 hover:scale-[1.05]`
87+
}
88+
>
89+
<div
90+
className={`h-full rounded-3xl bg-black/70 backdrop-blur-xl px-8 py-10 text-center shadow-2xl`}
91+
>
92+
{idx === 0 && (
93+
<span className="absolute -top-4 left-1/2 -translate-x-1/2 bg-yellow-400 text-black text-sm font-extrabold px-4 py-1 rounded-full shadow-lg">
94+
Winner Winner
95+
Chicken Dinner?
96+
</span>
97+
)}
15098

151-
</tbody>
152-
</table>
99+
<div
100+
className={`text-6xl mb-6 mx-auto flex justify-center ${
101+
DOMAIN_META[domain].color
102+
} drop-shadow-[0_0_18px_currentColor]`}
103+
>
104+
{DOMAIN_META[domain].icon}
105+
</div>
106+
107+
<h2 className="text-xl sm:text-2xl font-bold tracking-wide mb-2">
108+
{domain}
109+
</h2>
110+
111+
<p className="text-4xl sm:text-5xl font-extrabold mb-1">
112+
{count}
113+
</p>
114+
115+
<p className="text-sm uppercase tracking-widest text-neutral-400">
116+
People
117+
</p>
118+
</div>
119+
</div>
120+
))}
121+
</div>
153122

154-
</div>
155-
</div>
156123
</>
157124
)}
158-
159-
160125
</div>
161126
</div>
162127
);

‎frontend/src/pages/selection.jsx‎

Lines changed: 0 additions & 86 deletions
This file was deleted.

0 commit comments

Comments
 (0)