Hugging Face's logo

Spaces:
wilbin
/
anycoder-5b73c931
Running

App Files Community
wilbin commited on
Commit
891b3d2
·
verified ·
1 Parent(s): 7a34195

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +632 -19
index.html CHANGED
@@ -1,19 +1,632 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Product Request Manager - Dashboard</title>
7
+
8
+ <!-- React & ReactDOM -->
9
+ <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
10
+ <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
11
+
12
+ <!-- Babel for JSX -->
13
+ <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
14
+
15
+ <!-- Tailwind CSS -->
16
+ <script src="https://cdn.tailwindcss.com"></script>
17
+
18
+ <!-- Recharts -->
19
+ <script src="https://unpkg.com/recharts@2.10.0/umd/recharts.min.js"></script>
20
+
21
+ <!-- Lucide Icons -->
22
+ <script src="https://unpkg.com/lucide@latest"></script>
23
+
24
+ <!-- Custom Configuration & Styles -->
25
+ <script>
26
+ tailwind.config = {
27
+ theme: {
28
+ extend: {
29
+ colors: {
30
+ primary: {
31
+ 50: '#eff6ff',
32
+ 100: '#dbeafe',
33
+ 200: '#bfdbfe',
34
+ 300: '#93c5fd',
35
+ 400: '#60a5fa',
36
+ 500: '#3b82f6', // Main Blue
37
+ 600: '#2563eb',
38
+ 700: '#1d4ed8',
39
+ 800: '#1e40af',
40
+ 900: '#1e3a8a',
41
+ },
42
+ slate: {
43
+ 800: '#1e293b',
44
+ 900: '#0f172a',
45
+ }
46
+ },
47
+ fontFamily: {
48
+ sans: ['Inter', 'sans-serif'],
49
+ }
50
+ }
51
+ }
52
+ }
53
+ </script>
54
+ <style>
55
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
56
+
57
+ body {
58
+ font-family: 'Inter', sans-serif;
59
+ background-color: #f1f5f9;
60
+ }
61
+
62
+ /* Custom Scrollbar for the list */
63
+ .custom-scrollbar::-webkit-scrollbar {
64
+ width: 6px;
65
+ }
66
+ .custom-scrollbar::-webkit-scrollbar-track {
67
+ background: #f1f1f1;
68
+ }
69
+ .custom-scrollbar::-webkit-scrollbar-thumb {
70
+ background: #cbd5e1;
71
+ border-radius: 4px;
72
+ }
73
+ .custom-scrollbar::-webkit-scrollbar-thumb:hover {
74
+ background: #94a3b8;
75
+ }
76
+
77
+ /* Bento Box Grid */
78
+ .bento-grid {
79
+ display: grid;
80
+ grid-template-columns: repeat(2, 1fr);
81
+ grid-template-rows: repeat(2, 1fr);
82
+ gap: 1.5rem;
83
+ }
84
+
85
+ .bento-large { grid-column: span 2; }
86
+ .bento-medium { grid-column: span 1; }
87
+ .bento-small { grid-column: span 1; }
88
+
89
+ @media (max-width: 1024px) {
90
+ .bento-grid {
91
+ grid-template-columns: 1fr 1fr;
92
+ }
93
+ .bento-large { grid-column: span 2; }
94
+ }
95
+
96
+ @media (max-width: 768px) {
97
+ .bento-grid {
98
+ grid-template-columns: 1fr;
99
+ }
100
+ .bento-large, .bento-medium, .bento-small {
101
+ grid-column: span 1;
102
+ }
103
+ }
104
+
105
+ .fade-in {
106
+ animation: fadeIn 0.5s ease-in-out;
107
+ }
108
+
109
+ @keyframes fadeIn {
110
+ from { opacity: 0; transform: translateY(10px); }
111
+ to { opacity: 1; transform: translateY(0); }
112
+ }
113
+ </style>
114
+ </head>
115
+ <body>
116
+ <div id="root"></div>
117
+
118
+ <script type="text/babel">
119
+ const { useState, useEffect, useMemo } = React;
120
+ const { BarChart, Bar, LineChart, Line, PieChart, Pie, Cell, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, AreaChart, Area } = Recharts;
121
+
122
+ // --- Icons (Lucide) ---
123
+ const Icons = {
124
+ LayoutDashboard: (props) => <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect width="7" height="9" x="3" y="3" rx="1" /><rect width="7" height="5" x="14" y="3" rx="1" /><rect width="7" height="9" x="14" y="12" rx="1" /><rect width="7" height="5" x="3" y="16" rx="1" /></svg>,
125
+ Briefcase: (props) => <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect width="20" height="14" x="2" y="7" rx="2" ry="2" /><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16" /></svg>,
126
+ DollarSign: (props) => <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="12" x2="12" y1="2" y2="22" /><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" /></svg>,
127
+ Clock: (props) => <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10" /><polyline points="12 6 12 12 16 14" /></svg>,
128
+ TrendingUp: (props) => <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18" /><polyline points="17 6 23 6 23 12" /></svg>,
129
+ Users: (props) => <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" /><circle cx="9" cy="7" r="4" /><path d="M22 21v-2a4 4 0 0 0-3-3.87" /><path d="M16 3.13a4 4 0 0 1 0 7.75" /></svg>,
130
+ CheckCircle: (props) => <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" /><polyline points="22 4 12 14.01 9 11.01" /></svg>,
131
+ AlertCircle: (props) => <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10" /><line x1="12" x2="12" y1="8" y2="12" /><line x1="12" x2="12.01" y1="16" y2="16" /></svg>,
132
+ Plus: (props) => <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14" /><path d="M12 5v14" /></svg>,
133
+ Filter: (props) => <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3" /></svg>,
134
+ Search: (props) => <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" /></svg>,
135
+ Settings: (props) => <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.1a2 2 0 0 1-1-1.72v-.51a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" /><circle cx="12" cy="12" r="3" /></svg>
136
+ };
137
+
138
+ // --- Mock Data ---
139
+ const MOCK_USERS = {
140
+ admin: { id: 'u1', name: 'Alex Johnson', role: 'admin', email: 'admin@company.com' },
141
+ finance: { id: 'u2', name: 'Sarah Smith', role: 'finance', email: 'finance@company.com' },
142
+ user: { id: 'u3', name: 'Mike Ross', role: 'user', email: 'mike.ross@company.com' }
143
+ };
144
+
145
+ const MOCK_PROJECTS = [
146
+ { id: 'p1', name: 'Q3 Marketing Campaign', budget: 50000, spent: 35000 },
147
+ { id: 'p2', name: 'Server Infrastructure', budget: 120000, spent: 90000 },
148
+ { id: 'p3', name: 'New Office Furniture', budget: 15000, spent: 2500 },
149
+ { id: 'p4', name: 'Software Licenses', budget: 25000, spent: 24500 },
150
+ ];
151
+
152
+ const generateRequests = (userId) => {
153
+ // Generate data based on user to simulate backend filtering
154
+ const baseRequests = [
155
+ { id: 'REQ-101', title: 'MacBook Pro M3', status: 'Approved', requester: 'Mike Ross', amount: 3500, date: '2023-10-01', project: 'p1' },
156
+ { id: 'REQ-102', title: 'Monitor 4K 27"', status: 'Requested', requester: 'Sarah Smith', amount: 800, date: '2023-10-05', project: 'p2' },
157
+ { id: 'REQ-103', title: 'Office Chair Ergonomic', status: 'Approved', requester: 'Mike Ross', amount: 650, date: '2023-10-10', project: 'p3' },
158
+ { id: 'REQ-104', title: 'Cloud Services (AWS)', status: 'Ordered', requester: 'Alex Johnson', amount: 4200, date: '2023-10-12', project: 'p2' },
159
+ { id: 'REQ-105', title: 'Team Lunch Catering', status: 'Completed', requester: 'Mike Ross', amount: 150, date: '2023-10-15', project: 'p1' },
160
+ { id: 'REQ-106', title: 'Software Subscription', status: 'Pending Approval', requester: 'Sarah Smith', amount: 1200, date: '2023-10-18', project: 'p4' },
161
+ { id: 'REQ-107', title: 'Travel Expenses (NY Trip)', status: 'Rejected', requester: 'Mike Ross', amount: 2000, date: '2023-10-20', project: 'p1' },
162
+ { id: 'REQ-108', title: 'Keyboard Mechanical', status: 'Requested', requester: 'Alex Johnson', amount: 180, date: '2023-10-22', project: 'p3' },
163
+ { id: 'REQ-109', title: 'Headset Noise Cancelling', status: 'Approved', requester: 'Sarah Smith', amount: 350, date: '2023-10-24', project: 'p4' },
164
+ { id: 'REQ-110', title: 'Desk Lamp', status: 'Ordered', requester: 'Mike Ross', amount: 85, date: '2023-10-25', project: 'p3' },
165
+ ];
166
+
167
+ if (userId === MOCK_USERS.user.id) {
168
+ return baseRequests.filter(r => r.requester === 'Mike Ross');
169
+ } else if (userId === MOCK_USERS.finance.id) {
170
+ return baseRequests.filter(r => ['Pending Approval', 'Requested'].includes(r.status));
171
+ }
172
+ return baseRequests; // Admin sees all
173
+ };
174
+
175
+ // --- Helper Functions ---
176
+ const formatCurrency = (value) => {
177
+ return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(value);
178
+ };
179
+
180
+ const formatDate = (dateString) => {
181
+ return new Date(dateString).toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
182
+ };
183
+
184
+ // --- Components ---
185
+
186
+ // 1. KPI Card Component
187
+ const KPICard = ({ title, value, icon: Icon, trend, color = "primary" }) => {
188
+ const colorClasses = {
189
+ primary: "bg-blue-50 text-blue-600",
190
+ green: "bg-emerald-50 text-emerald-600",
191
+ amber: "bg-amber-50 text-amber-600",
192
+ slate: "bg-slate-100 text-slate-600"
193
+ };
194
+
195
+ return (
196
+ <div className="bg-white p-6 rounded-xl shadow-sm border border-slate-200 hover:shadow-md transition-shadow duration-200 flex flex-col justify-between h-full">
197
+ <div className="flex justify-between items-start">
198
+ <div>
199
+ <p className="text-sm font-medium text-slate-500 mb-1">{title}</p>
200
+ <h3 className="text-3xl font-bold text-slate-800">{value}</h3>
201
+ </div>
202
+ <div className={`p-3 rounded-lg ${colorClasses[color]}`}>
203
+ <Icon size={24} />
204
+ </div>
205
+ </div>
206
+ {trend && (
207
+ <div className="mt-4 flex items-center text-sm">
208
+ <span className={`font-semibold ${trend > 0 ? 'text-emerald-600' : 'text-red-500'}`}>
209
+ {trend > 0 ? '+' : ''}{trend}%
210
+ </span>
211
+ <span className="text-slate-400 ml-2">vs last month</span>
212
+ </div>
213
+ )}
214
+ </div>
215
+ );
216
+ };
217
+
218
+ // 2. Activity List Component
219
+ const RecentActivity = ({ activities, role }) => {
220
+ const getStatusColor = (status) => {
221
+ switch (status) {
222
+ case 'Approved': return 'bg-emerald-100 text-emerald-700';
223
+ case 'Ordered': return 'bg-blue-100 text-blue-700';
224
+ case 'Requested': return 'bg-amber-100 text-amber-700';
225
+ case 'Pending Approval': return 'bg-orange-100 text-orange-700';
226
+ case 'Rejected': return 'bg-red-100 text-red-700';
227
+ default: return 'bg-slate-100 text-slate-700';
228
+ }
229
+ };
230
+
231
+ return (
232
+ <div className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden flex flex-col h-full">
233
+ <div className="p-6 border-b border-slate-100 flex justify-between items-center">
234
+ <h3 className="text-lg font-bold text-slate-800">Recent Activity</h3>
235
+ <button className="text-sm text-blue-600 hover:text-blue-800 font-medium">View All</button>
236
+ </div>
237
+ <div className="flex-1 overflow-y-auto custom-scrollbar p-4 space-y-4">
238
+ {activities.length === 0 ? (
239
+ <div className="text-center text-slate-400 py-8">No recent activity</div>
240
+ ) : (
241
+ activities.map((activity, idx) => (
242
+ <div key={idx} className="flex items-start space-x-3 pb-4 border-b border-slate-50 last:border-0 last:pb-0">
243
+ <div className="mt-1 min-w-[32px] h-8 w-8 rounded-full bg-slate-100 flex items-center justify-center flex-shrink-0">
244
+ {activity.type === 'request' ? <Icons.Briefcase size={16} className="text-slate-600" /> : <Icons.Users size={16} className="text-slate-600" />}
245
+ </div>
246
+ <div className="flex-1 min-w-0">
247
+ <p className="text-sm font-medium text-slate-900 truncate">{activity.title}</p>
248
+ <p className="text-xs text-slate-500 mt-0.5">
249
+ {activity.description} • <span className="text-slate-400">{formatDate(activity.date)}</span>
250
+ </p>
251
+ </div>
252
+ <span className={`px-2 py-1 rounded text-[10px] font-semibold uppercase tracking-wide whitespace-nowrap ${getStatusColor(activity.status)}`}>
253
+ {activity.status}
254
+ </span>
255
+ </div>
256
+ ))
257
+ )}
258
+ </div>
259
+ </div>
260
+ );
261
+ };
262
+
263
+ // 3. Main Dashboard Component
264
+ const Dashboard = ({ user }) => {
265
+ // Hook to calculate data
266
+ const dashboardData = useMemo(() => {
267
+ const allRequests = generateRequests(user.id);
268
+
269
+ // Helper to find project name
270
+ const getProjectName = (pid) => MOCK_PROJECTS.find(p => p.id === pid)?.name || 'Unknown';
271
+
272
+ if (user.role === 'admin') {
273
+ const totalRequests = allRequests.length;
274
+ const pendingActions = allRequests.filter(r => ['Requested', 'Approved'].includes(r.status)).length;
275
+ const totalSpendYTD = allRequests.filter(r => ['Approved', 'Ordered', 'Completed'].includes(r.status))
276
+ .reduce((acc, curr) => acc + curr.amount, 0);
277
+
278
+ // Mock Trend Data
279
+ const spendingTrend = [
280
+ { name: 'Jan', amount: 12000 }, { name: 'Feb', amount: 19000 }, { name: 'Mar', amount: 15000 },
281
+ { name: 'Apr', amount: 22000 }, { name: 'May', amount: 28000 }, { name: 'Jun', amount: 35000 },
282
+ { name: 'Jul', amount: 32000 }, { name: 'Aug', amount: 40000 }, { name: 'Sep', amount: 38000 },
283
+ { name: 'Oct', amount: totalSpendYTD / 10 }, // Current month estimation
284
+ ];
285
+
286
+ // Status Distribution
287
+ const statusCounts = {};
288
+ allRequests.forEach(r => { statusCounts[r.status] = (statusCounts[r.status] || 0) + 1; });
289
+ const statusData = Object.keys(statusCounts).map(status => ({ name: status, value: statusCounts[status] }));
290
+
291
+ // Recent Activity (Global)
292
+ const recent = allRequests.slice(0, 5).map(r => ({
293
+ type: 'request',
294
+ title: r.title,
295
+ description: `Request #${r.id} created by ${r.requester}`,
296
+ status: r.status,
297
+ date: r.date
298
+ }));
299
+
300
+ return {
301
+ kpis: [
302
+ { title: 'Total Requests', value: totalRequests, icon: Icons.Briefcase, trend: 12, color: 'slate' },
303
+ { title: 'Pending Actions', value: pendingActions, icon: Icons.Clock, trend: 5, color: 'amber' },
304
+ { title: 'Total Spend (YTD)', value: formatCurrency(totalSpendYTD), icon: Icons.DollarSign, trend: 8.5, color: 'green' },
305
+ { title: 'Avg. Approval', value: '2.4 Days', icon: Icons.TrendingUp, trend: -1.2, color: 'primary' }
306
+ ],
307
+ charts: {
308
+ main: { type: 'bar', data: spendingTrend, dataKey: 'amount', color: '#3b82f6' },
309
+ secondary: { type: 'pie', data: statusData }
310
+ },
311
+ recent: recent
312
+ };
313
+ }
314
+ else if (user.role === 'finance') {
315
+ const pendingApprovals = allRequests.filter(r => r.status === 'Pending Approval').length;
316
+ const liability = allRequests.filter(r => r.status === 'Pending Approval').reduce((acc, curr) => acc + curr.amount, 0);
317
+
318
+ // Mock Budget Utilization per Project
319
+ const budgetData = MOCK_PROJECTS.map(p => {
320
+ const totalSpent = allRequests.filter(r => r.project === p.id && r.status !== 'Rejected').reduce((acc, curr) => acc + curr.amount, 0);
321
+ return {
322
+ name: p.name.substring(0, 10),
323
+ Budget: p.budget,
324
+ Spent: totalSpent,
325
+ Remaining: p.budget - totalSpent
326
+ };
327
+ });
328
+
329
+ // Recent Activity (Finance Focus)
330
+ const recent = allRequests
331
+ .filter(r => ['Pending Approval', 'Requested', 'Approved'].includes(r.status))
332
+ .slice(0, 5)
333
+ .map(r => ({
334
+ type: 'request',
335
+ title: r.title,
336
+ description: `${r.requester} submitted for budget review`,
337
+ status: r.status,
338
+ date: r.date
339
+ }));
340
+
341
+ return {
342
+ kpis: [
343
+ { title: 'Pending Approvals', value: pendingApprovals, icon: Icons.AlertCircle, trend: 15, color: 'orange' },
344
+ { title: 'Liability (Pending)', value: formatCurrency(liability), icon: Icons.DollarSign, trend: -2.4, color: 'amber' },
345
+ { title: 'Budget Remaining', value: formatCurrency(200000), icon: Icons.LayoutDashboard, trend: 0, color: 'slate' },
346
+ { title: 'Rejected (YTD)', value: 3, icon: Icons.CheckCircle, trend: -10, color: 'primary' }
347
+ ],
348
+ charts: {
349
+ main: { type: 'hbar', data: budgetData },
350
+ secondary: { type: 'line', data: [{week: 'W1', approved: 5}, {week: 'W2', approved: 8}, {week: 'W3', approved: 4}, {week: 'W4', approved: 12}] }
351
+ },
352
+ recent: recent
353
+ };
354
+ }
355
+ else {
356
+ // User View
357
+ const activeRequests = allRequests.filter(r => ['Requested', 'Approved', 'Ordered'].includes(r.status)).length;
358
+ const completed = allRequests.filter(r => r.status === 'Completed').length;
359
+ const totalValue = allRequests.reduce((acc, curr) => acc + curr.amount, 0);
360
+
361
+ // User Status Progress
362
+ const statusCounts = {};
363
+ allRequests.forEach(r => { statusCounts[r.status] = (statusCounts[r.status] || 0) + 1; });
364
+ const userStatusData = Object.keys(statusCounts).map(status => ({ name: status, value: statusCounts[status] }));
365
+
366
+ // Recent Activity (User Timeline)
367
+ const recent = allRequests
368
+ .sort((a, b) => new Date(b.date) - new Date(a.date))
369
+ .slice(0, 5)
370
+ .map(r => ({
371
+ type: 'request',
372
+ title: r.title,
373
+ description: `Status updated to ${r.status}`,
374
+ status: r.status,
375
+ date: r.date
376
+ }));
377
+
378
+ return {
379
+ kpis: [
380
+ { title: 'My Active Requests', value: activeRequests, icon: Icons.Briefcase, trend: 0, color: 'primary' },
381
+ { title: 'Approved/Ready', value: allRequests.filter(r => r.status === 'Approved').length, icon: Icons.CheckCircle, trend: 10, color: 'green' },
382
+ { title: 'Completed', value: completed, icon: Icons.LayoutDashboard, trend: 5, color: 'slate' },
383
+ { title: 'Total Value', value: formatCurrency(totalValue), icon: Icons.DollarSign, trend: 0, color: 'amber' }
384
+ ],
385
+ charts: {
386
+ main: { type: 'bar', data: userStatusData, dataKey: 'value', color: '#10b981', nameKey: 'name' },
387
+ secondary: null // Optional for user
388
+ },
389
+ recent: recent
390
+ };
391
+ }
392
+ }, [user]);
393
+
394
+ // Helper to render charts
395
+ const renderChart = (chartConfig, size = 'large') => {
396
+ if (!chartConfig) return null;
397
+
398
+ const containerClass = size === 'large' ? 'h-80 w-full' : 'h-64 w-full';
399
+
400
+ if (chartConfig.type === 'bar') {
401
+ return (
402
+ <ResponsiveContainer width="100%" height="100%">
403
+ <BarChart data={chartConfig.data} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
404
+ <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#e2e8f0" />
405
+ <XAxis dataKey={chartConfig.nameKey || 'name'} tick={{ fill: '#64748b', fontSize: 12 }} axisLine={false} tickLine={false} />
406
+ <YAxis tick={{ fill: '#64748b', fontSize: 12 }} axisLine={false} tickLine={false} />
407
+ <Tooltip
408
+ formatter={(value) => [formatCurrency(value), 'Value']}
409
+ contentStyle={{ borderRadius: '8px', border: 'none', boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)' }}
410
+ />
411
+ <Bar dataKey={chartConfig.dataKey} fill={chartConfig.color} radius={[4, 4, 0, 0]} barSize={32} />
412
+ </BarChart>
413
+ </ResponsiveContainer>
414
+ );
415
+ }
416
+ else if (chartConfig.type === 'hbar') {
417
+ return (
418
+ <ResponsiveContainer width="100%" height="100%">
419
+ <BarChart data={chartConfig.data} orientation="horizontal" margin={{ top: 20, right: 30, left: 0, bottom: 5 }}>
420
+ <CartesianGrid strokeDasharray="3 3" horizontal={false} stroke="#e2e8f0" />
421
+ <XAxis type="number" tick={{ fill: '#64748b', fontSize: 12 }} axisLine={false} tickLine={false} />
422
+ <YAxis dataKey="name" type="category" tick={{ fill: '#64748b', fontSize: 11 }} axisLine={false} tickLine={false} width={100} />
423
+ <Tooltip
424
+ formatter={(value) => formatCurrency(value)}
425
+ contentStyle={{ borderRadius: '8px', border: 'none', boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)' }}
426
+ />
427
+ <Bar dataKey="Spent" fill="#3b82f6" radius={[0, 4, 4, 0]} barSize={16} />
428
+ <Bar dataKey="Remaining" fill="#e2e8f0" radius={[4, 0, 0, 4]} barSize={16} />
429
+ </BarChart>
430
+ </ResponsiveContainer>
431
+ );
432
+ }
433
+ else if (chartConfig.type === 'pie') {
434
+ const COLORS = ['#3b82f6', '#f59e0b', '#10b981', '#ef4444', '#6366f1'];
435
+ return (
436
+ <ResponsiveContainer width="100%" height="100%">
437
+ <PieChart>
438
+ <Pie
439
+ data={chartConfig.data}
440
+ cx="50%"
441
+ cy="50%"
442
+ innerRadius={60}
443
+ outerRadius={80}
444
+ paddingAngle={5}
445
+ dataKey="value"
446
+ >
447
+ {chartConfig.data.map((entry, index) => (
448
+ <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
449
+ ))}
450
+ </Pie>
451
+ <Tooltip
452
+ formatter={(value) => [`${value} Requests`, 'Count']}
453
+ contentStyle={{ borderRadius: '8px', border: 'none', boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)' }}
454
+ />
455
+ <Legend verticalAlign="bottom" height={36} iconType="circle" />
456
+ </PieChart>
457
+ </ResponsiveContainer>
458
+ );
459
+ }
460
+ else if (chartConfig.type === 'line') {
461
+ return (
462
+ <ResponsiveContainer width="100%" height="100%">
463
+ <LineChart data={chartConfig.data} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
464
+ <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#e2e8f0" />
465
+ <XAxis dataKey="week" tick={{ fill: '#64748b', fontSize: 12 }} axisLine={false} tickLine={false} />
466
+ <YAxis tick={{ fill: '#64748b', fontSize: 12 }} axisLine={false} tickLine={false} />
467
+ <Tooltip
468
+ contentStyle={{ borderRadius: '8px', border: 'none', boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)' }}
469
+ />
470
+ <Line type="monotone" dataKey="approved" stroke="#10b981" strokeWidth={3} dot={{ r: 4, fill: '#10b981', strokeWidth: 2 }} />
471
+ </LineChart>
472
+ </ResponsiveContainer>
473
+ );
474
+ }
475
+ return null;
476
+ };
477
+
478
+ return (
479
+ <div className="min-h-screen bg-slate-50 p-4 md:p-8 fade-in">
480
+ {/* Header Section */}
481
+ <header className="flex flex-col md:flex-row md:items-center justify-between mb-8 gap-4">
482
+ <div>
483
+ <h1 className="text-3xl font-bold text-slate-900">
484
+ Good Morning, {user.name.split(' ')[0]}! 👋
485
+ </h1>
486
+ <p className="text-slate-500 mt-1">
487
+ {new Date().toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}
488
+ </p>
489
+ </div>
490
+ <div className="flex items-center gap-3">
491
+ <button className="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-5 py-2.5 rounded-lg font-medium transition-all shadow-md hover:shadow-lg active:scale-95">
492
+ <Icons.Plus size={20} />
493
+ New Request
494
+ </button>
495
+ <button className="p-2.5 bg-white border border-slate-200 text-slate-600 hover:bg-slate-50 rounded-lg transition-colors shadow-sm">
496
+ <Icons.Settings size={20} />
497
+ </button>
498
+ </div>
499
+ </header>
500
+
501
+ {/* Bento Grid Container */}
502
+ <div className="bento-grid max-w-7xl mx-auto">
503
+
504
+ {/* 1. KPI Cards (Top Row) */}
505
+ {dashboardData.kpis.map((kp, index) => (
506
+ <div key={index} className={`bento-medium fade-in`} style={{ animationDelay: `${index * 100}ms` }}>
507
+ <KPICard
508
+ title={kp.title}
509
+ value={kp.value}
510
+ icon={kp.icon}
511
+ trend={kp.trend}
512
+ color={kp.color}
513
+ />
514
+ </div>
515
+ ))}
516
+
517
+ {/* 2. Main Chart Area (Spending/Budget) */}
518
+ <div className={`bento-large fade-in`} style={{ animationDelay: '400ms' }}>
519
+ <div className="bg-white p-6 rounded-xl shadow-sm border border-slate-200 h-full flex flex-col">
520
+ <div className="flex justify-between items-center mb-6">
521
+ <h3 className="text-lg font-bold text-slate-800">
522
+ {user.role === 'admin' ? 'Spending Trend (YTD)' :
523
+ user.role === 'finance' ? 'Budget Utilization by Project' : 'My Request Status Overview'}
524
+ </h3>
525
+ <select className="text-sm border-slate-200 rounded-md text-slate-600 focus:ring-blue-500 focus:border-blue-500 bg-slate-50">
526
+ <option>Last 12 Months</option>
527
+ <option>This Year</option>
528
+ <option>Last Year</option>
529
+ </select>
530
+ </div>
531
+ {renderChart(dashboardData.charts.main, 'large')}
532
+ </div>
533
+ </div>
534
+
535
+ {/* 3. Secondary Chart (Status/Budget or Velocity) */}
536
+ <div className={`bento-medium fade-in`} style={{ animationDelay: '500ms' }}>
537
+ <div className="bg-white p-6 rounded-xl shadow-sm border border-slate-200 h-full flex flex-col">
538
+ <h3 className="text-lg font-bold text-slate-800 mb-4">
539
+ {user.role === 'admin' ? 'Request Status Distribution' :
540
+ user.role === 'finance' ? 'Weekly Approval Velocity' : 'Budget Breakdown (Optional)'}
541
+ </h3>
542
+ <div className="flex-1 flex items-center justify-center">
543
+ {dashboardData.charts.secondary ? renderChart(dashboardData.charts.secondary, 'small') : (
544
+ <div className="text-slate-400 text-sm text-center">Data visualization for {user.role}</div>
545
+ )}
546
+ </div>
547
+ </div>
548
+ </div>
549
+
550
+ {/* 4. Recent Activity (Bottom Full Width) */}
551
+ <div className={`bento-large fade-in`} style={{ animationDelay: '600ms' }}>
552
+ <RecentActivity activities={dashboardData.recent} role={user.role} />
553
+ </div>
554
+
555
+ </div>
556
+
557
+ {/* Footer / Branding */}
558
+ <div className="mt-12 text-center pb-8">
559
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" rel="noopener noreferrer" className="text-slate-400 hover:text-blue-600 text-sm transition-colors">
560
+ Built with anycoder
561
+ </a>
562
+ </div>
563
+ </div>
564
+ );
565
+ };
566
+
567
+ // 4. Role Selection Wrapper (To simulate login)
568
+ const App = () => {
569
+ const [user, setUser] = useState(null);
570
+
571
+ if (!user) {
572
+ return (
573
+ <div className="min-h-screen flex items-center justify-center bg-slate-50 p-4">
574
+ <div className="max-w-md w-full bg-white p-8 rounded-2xl shadow-xl border border-slate-200">
575
+ <div className="text-center mb-8">
576
+ <div className="inline-flex items-center justify-center w-16 h-16 bg-blue-100 rounded-full mb-4">
577
+ <Icons.LayoutDashboard className="text-blue-600" size={32} />
578
+ </div>
579
+ <h1 className="text-3xl font-bold text-slate-900">Product Request Manager</h1>
580
+ <p className="text-slate-500 mt-2">Select your role to access the dashboard</p>
581
+ </div>
582
+ <div className="space-y-4">
583
+ <button
584
+ onClick={() => setUser(MOCK_USERS.admin)}
585
+ className="w-full flex items-center gap-4 p-4 border-2 border-slate-200 rounded-xl hover:border-blue-500 hover:bg-blue-50 transition-all group text-left"
586
+ >
587
+ <div className="w-10 h-10 rounded-full bg-slate-100 flex items-center justify-center group-hover:bg-blue-200 transition-colors">
588
+ <Icons.Users className="text-slate-600 group-hover:text-blue-700" size={20} />
589
+ </div>
590
+ <div>
591
+ <h3 className="font-semibold text-slate-900">Admin</h3>
592
+ <p className="text-sm text-slate-500">Control Tower View</p>
593
+ </div>
594
+ </button>
595
+ <button
596
+ onClick={() => setUser(MOCK_USERS.finance)}
597
+ className="w-full flex items-center gap-4 p-4 border-2 border-slate-200 rounded-xl hover:border-emerald-500 hover:bg-emerald-50 transition-all group text-left"
598
+ >
599
+ <div className="w-10 h-10 rounded-full bg-slate-100 flex items-center justify-center group-hover:bg-emerald-200 transition-colors">
600
+ <Icons.DollarSign className="text-slate-600 group-hover:text-emerald-700" size={20} />
601
+ </div>
602
+ <div>
603
+ <h3 className="font-semibold text-slate-900">Finance</h3>
604
+ <p className="text-sm text-slate-500">Budget & Liability View</p>
605
+ </div>
606
+ </button>
607
+ <button
608
+ onClick={() => setUser(MOCK_USERS.user)}
609
+ className="w-full flex items-center gap-4 p-4 border-2 border-slate-200 rounded-xl hover:border-amber-500 hover:bg-amber-50 transition-all group text-left"
610
+ >
611
+ <div className="w-10 h-10 rounded-full bg-slate-100 flex items-center justify-center group-hover:bg-amber-200 transition-colors">
612
+ <Icons.Briefcase className="text-slate-600 group-hover:text-amber-700" size={20} />
613
+ </div>
614
+ <div>
615
+ <h3 className="font-semibold text-slate-900">User</h3>
616
+ <p className="text-sm text-slate-500">My Orders & History</p>
617
+ </div>
618
+ </button>
619
+ </div>
620
+ </div>
621
+ </div>
622
+ );
623
+ }
624
+
625
+ return <Dashboard user={user} />;
626
+ };
627
+
628
+ const root = ReactDOM.createRoot(document.getElementById('root'));
629
+ root.render(<App />);
630
+ </script>
631
+ </body>
632
+ </html>