Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Product Request Manager - Dashboard</title> | |
| <!-- React & ReactDOM --> | |
| <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script> | |
| <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> | |
| <!-- Babel for JSX --> | |
| <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> | |
| <!-- Tailwind CSS --> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <!-- Recharts --> | |
| <script src="https://unpkg.com/recharts@2.10.0/umd/recharts.min.js"></script> | |
| <!-- Lucide Icons --> | |
| <script src="https://unpkg.com/lucide@latest"></script> | |
| <!-- Custom Configuration & Styles --> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 50: '#eff6ff', | |
| 100: '#dbeafe', | |
| 200: '#bfdbfe', | |
| 300: '#93c5fd', | |
| 400: '#60a5fa', | |
| 500: '#3b82f6', // Main Blue | |
| 600: '#2563eb', | |
| 700: '#1d4ed8', | |
| 800: '#1e40af', | |
| 900: '#1e3a8a', | |
| }, | |
| slate: { | |
| 800: '#1e293b', | |
| 900: '#0f172a', | |
| } | |
| }, | |
| fontFamily: { | |
| sans: ['Inter', 'sans-serif'], | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: #f1f5f9; | |
| } | |
| /* Custom Scrollbar for the list */ | |
| .custom-scrollbar::-webkit-scrollbar { | |
| width: 6px; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar-track { | |
| background: #f1f1f1; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar-thumb { | |
| background: #cbd5e1; | |
| border-radius: 4px; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar-thumb:hover { | |
| background: #94a3b8; | |
| } | |
| /* Bento Box Grid */ | |
| .bento-grid { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| grid-template-rows: repeat(2, 1fr); | |
| gap: 1.5rem; | |
| } | |
| .bento-large { grid-column: span 2; } | |
| .bento-medium { grid-column: span 1; } | |
| .bento-small { grid-column: span 1; } | |
| @media (max-width: 1024px) { | |
| .bento-grid { | |
| grid-template-columns: 1fr 1fr; | |
| } | |
| .bento-large { grid-column: span 2; } | |
| } | |
| @media (max-width: 768px) { | |
| .bento-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .bento-large, .bento-medium, .bento-small { | |
| grid-column: span 1; | |
| } | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.5s ease-in-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="root"></div> | |
| <script type="text/babel"> | |
| const { useState, useEffect, useMemo } = React; | |
| const { BarChart, Bar, LineChart, Line, PieChart, Pie, Cell, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, AreaChart, Area } = Recharts; | |
| // --- Icons (Lucide) --- | |
| const Icons = { | |
| 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>, | |
| 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>, | |
| 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>, | |
| 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>, | |
| 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>, | |
| 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>, | |
| 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>, | |
| 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>, | |
| 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>, | |
| 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>, | |
| 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>, | |
| 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> | |
| }; | |
| // --- Mock Data --- | |
| const MOCK_USERS = { | |
| admin: { id: 'u1', name: 'Alex Johnson', role: 'admin', email: 'admin@company.com' }, | |
| finance: { id: 'u2', name: 'Sarah Smith', role: 'finance', email: 'finance@company.com' }, | |
| user: { id: 'u3', name: 'Mike Ross', role: 'user', email: 'mike.ross@company.com' } | |
| }; | |
| const MOCK_PROJECTS = [ | |
| { id: 'p1', name: 'Q3 Marketing Campaign', budget: 50000, spent: 35000 }, | |
| { id: 'p2', name: 'Server Infrastructure', budget: 120000, spent: 90000 }, | |
| { id: 'p3', name: 'New Office Furniture', budget: 15000, spent: 2500 }, | |
| { id: 'p4', name: 'Software Licenses', budget: 25000, spent: 24500 }, | |
| ]; | |
| const generateRequests = (userId) => { | |
| // Generate data based on user to simulate backend filtering | |
| const baseRequests = [ | |
| { id: 'REQ-101', title: 'MacBook Pro M3', status: 'Approved', requester: 'Mike Ross', amount: 3500, date: '2023-10-01', project: 'p1' }, | |
| { id: 'REQ-102', title: 'Monitor 4K 27"', status: 'Requested', requester: 'Sarah Smith', amount: 800, date: '2023-10-05', project: 'p2' }, | |
| { id: 'REQ-103', title: 'Office Chair Ergonomic', status: 'Approved', requester: 'Mike Ross', amount: 650, date: '2023-10-10', project: 'p3' }, | |
| { id: 'REQ-104', title: 'Cloud Services (AWS)', status: 'Ordered', requester: 'Alex Johnson', amount: 4200, date: '2023-10-12', project: 'p2' }, | |
| { id: 'REQ-105', title: 'Team Lunch Catering', status: 'Completed', requester: 'Mike Ross', amount: 150, date: '2023-10-15', project: 'p1' }, | |
| { id: 'REQ-106', title: 'Software Subscription', status: 'Pending Approval', requester: 'Sarah Smith', amount: 1200, date: '2023-10-18', project: 'p4' }, | |
| { id: 'REQ-107', title: 'Travel Expenses (NY Trip)', status: 'Rejected', requester: 'Mike Ross', amount: 2000, date: '2023-10-20', project: 'p1' }, | |
| { id: 'REQ-108', title: 'Keyboard Mechanical', status: 'Requested', requester: 'Alex Johnson', amount: 180, date: '2023-10-22', project: 'p3' }, | |
| { id: 'REQ-109', title: 'Headset Noise Cancelling', status: 'Approved', requester: 'Sarah Smith', amount: 350, date: '2023-10-24', project: 'p4' }, | |
| { id: 'REQ-110', title: 'Desk Lamp', status: 'Ordered', requester: 'Mike Ross', amount: 85, date: '2023-10-25', project: 'p3' }, | |
| ]; | |
| if (userId === MOCK_USERS.user.id) { | |
| return baseRequests.filter(r => r.requester === 'Mike Ross'); | |
| } else if (userId === MOCK_USERS.finance.id) { | |
| return baseRequests.filter(r => ['Pending Approval', 'Requested'].includes(r.status)); | |
| } | |
| return baseRequests; // Admin sees all | |
| }; | |
| // --- Helper Functions --- | |
| const formatCurrency = (value) => { | |
| return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(value); | |
| }; | |
| const formatDate = (dateString) => { | |
| return new Date(dateString).toLocaleDateString('en-US', { month: 'short', day: 'numeric' }); | |
| }; | |
| // --- Components --- | |
| // 1. KPI Card Component | |
| const KPICard = ({ title, value, icon: Icon, trend, color = "primary" }) => { | |
| const colorClasses = { | |
| primary: "bg-blue-50 text-blue-600", | |
| green: "bg-emerald-50 text-emerald-600", | |
| amber: "bg-amber-50 text-amber-600", | |
| slate: "bg-slate-100 text-slate-600" | |
| }; | |
| return ( | |
| <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"> | |
| <div className="flex justify-between items-start"> | |
| <div> | |
| <p className="text-sm font-medium text-slate-500 mb-1">{title}</p> | |
| <h3 className="text-3xl font-bold text-slate-800">{value}</h3> | |
| </div> | |
| <div className={`p-3 rounded-lg ${colorClasses[color]}`}> | |
| <Icon size={24} /> | |
| </div> | |
| </div> | |
| {trend && ( | |
| <div className="mt-4 flex items-center text-sm"> | |
| <span className={`font-semibold ${trend > 0 ? 'text-emerald-600' : 'text-red-500'}`}> | |
| {trend > 0 ? '+' : ''}{trend}% | |
| </span> | |
| <span className="text-slate-400 ml-2">vs last month</span> | |
| </div> | |
| )} | |
| </div> | |
| ); | |
| }; | |
| // 2. Activity List Component | |
| const RecentActivity = ({ activities, role }) => { | |
| const getStatusColor = (status) => { | |
| switch (status) { | |
| case 'Approved': return 'bg-emerald-100 text-emerald-700'; | |
| case 'Ordered': return 'bg-blue-100 text-blue-700'; | |
| case 'Requested': return 'bg-amber-100 text-amber-700'; | |
| case 'Pending Approval': return 'bg-orange-100 text-orange-700'; | |
| case 'Rejected': return 'bg-red-100 text-red-700'; | |
| default: return 'bg-slate-100 text-slate-700'; | |
| } | |
| }; | |
| return ( | |
| <div className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden flex flex-col h-full"> | |
| <div className="p-6 border-b border-slate-100 flex justify-between items-center"> | |
| <h3 className="text-lg font-bold text-slate-800">Recent Activity</h3> | |
| <button className="text-sm text-blue-600 hover:text-blue-800 font-medium">View All</button> | |
| </div> | |
| <div className="flex-1 overflow-y-auto custom-scrollbar p-4 space-y-4"> | |
| {activities.length === 0 ? ( | |
| <div className="text-center text-slate-400 py-8">No recent activity</div> | |
| ) : ( | |
| activities.map((activity, idx) => ( | |
| <div key={idx} className="flex items-start space-x-3 pb-4 border-b border-slate-50 last:border-0 last:pb-0"> | |
| <div className="mt-1 min-w-[32px] h-8 w-8 rounded-full bg-slate-100 flex items-center justify-center flex-shrink-0"> | |
| {activity.type === 'request' ? <Icons.Briefcase size={16} className="text-slate-600" /> : <Icons.Users size={16} className="text-slate-600" />} | |
| </div> | |
| <div className="flex-1 min-w-0"> | |
| <p className="text-sm font-medium text-slate-900 truncate">{activity.title}</p> | |
| <p className="text-xs text-slate-500 mt-0.5"> | |
| {activity.description} • <span className="text-slate-400">{formatDate(activity.date)}</span> | |
| </p> | |
| </div> | |
| <span className={`px-2 py-1 rounded text-[10px] font-semibold uppercase tracking-wide whitespace-nowrap ${getStatusColor(activity.status)}`}> | |
| {activity.status} | |
| </span> | |
| </div> | |
| )) | |
| )} | |
| </div> | |
| </div> | |
| ); | |
| }; | |
| // 3. Main Dashboard Component | |
| const Dashboard = ({ user }) => { | |
| // Hook to calculate data | |
| const dashboardData = useMemo(() => { | |
| const allRequests = generateRequests(user.id); | |
| // Helper to find project name | |
| const getProjectName = (pid) => MOCK_PROJECTS.find(p => p.id === pid)?.name || 'Unknown'; | |
| if (user.role === 'admin') { | |
| const totalRequests = allRequests.length; | |
| const pendingActions = allRequests.filter(r => ['Requested', 'Approved'].includes(r.status)).length; | |
| const totalSpendYTD = allRequests.filter(r => ['Approved', 'Ordered', 'Completed'].includes(r.status)) | |
| .reduce((acc, curr) => acc + curr.amount, 0); | |
| // Mock Trend Data | |
| const spendingTrend = [ | |
| { name: 'Jan', amount: 12000 }, { name: 'Feb', amount: 19000 }, { name: 'Mar', amount: 15000 }, | |
| { name: 'Apr', amount: 22000 }, { name: 'May', amount: 28000 }, { name: 'Jun', amount: 35000 }, | |
| { name: 'Jul', amount: 32000 }, { name: 'Aug', amount: 40000 }, { name: 'Sep', amount: 38000 }, | |
| { name: 'Oct', amount: totalSpendYTD / 10 }, // Current month estimation | |
| ]; | |
| // Status Distribution | |
| const statusCounts = {}; | |
| allRequests.forEach(r => { statusCounts[r.status] = (statusCounts[r.status] || 0) + 1; }); | |
| const statusData = Object.keys(statusCounts).map(status => ({ name: status, value: statusCounts[status] })); | |
| // Recent Activity (Global) | |
| const recent = allRequests.slice(0, 5).map(r => ({ | |
| type: 'request', | |
| title: r.title, | |
| description: `Request #${r.id} created by ${r.requester}`, | |
| status: r.status, | |
| date: r.date | |
| })); | |
| return { | |
| kpis: [ | |
| { title: 'Total Requests', value: totalRequests, icon: Icons.Briefcase, trend: 12, color: 'slate' }, | |
| { title: 'Pending Actions', value: pendingActions, icon: Icons.Clock, trend: 5, color: 'amber' }, | |
| { title: 'Total Spend (YTD)', value: formatCurrency(totalSpendYTD), icon: Icons.DollarSign, trend: 8.5, color: 'green' }, | |
| { title: 'Avg. Approval', value: '2.4 Days', icon: Icons.TrendingUp, trend: -1.2, color: 'primary' } | |
| ], | |
| charts: { | |
| main: { type: 'bar', data: spendingTrend, dataKey: 'amount', color: '#3b82f6' }, | |
| secondary: { type: 'pie', data: statusData } | |
| }, | |
| recent: recent | |
| }; | |
| } | |
| else if (user.role === 'finance') { | |
| const pendingApprovals = allRequests.filter(r => r.status === 'Pending Approval').length; | |
| const liability = allRequests.filter(r => r.status === 'Pending Approval').reduce((acc, curr) => acc + curr.amount, 0); | |
| // Mock Budget Utilization per Project | |
| const budgetData = MOCK_PROJECTS.map(p => { | |
| const totalSpent = allRequests.filter(r => r.project === p.id && r.status !== 'Rejected').reduce((acc, curr) => acc + curr.amount, 0); | |
| return { | |
| name: p.name.substring(0, 10), | |
| Budget: p.budget, | |
| Spent: totalSpent, | |
| Remaining: p.budget - totalSpent | |
| }; | |
| }); | |
| // Recent Activity (Finance Focus) | |
| const recent = allRequests | |
| .filter(r => ['Pending Approval', 'Requested', 'Approved'].includes(r.status)) | |
| .slice(0, 5) | |
| .map(r => ({ | |
| type: 'request', | |
| title: r.title, | |
| description: `${r.requester} submitted for budget review`, | |
| status: r.status, | |
| date: r.date | |
| })); | |
| return { | |
| kpis: [ | |
| { title: 'Pending Approvals', value: pendingApprovals, icon: Icons.AlertCircle, trend: 15, color: 'orange' }, | |
| { title: 'Liability (Pending)', value: formatCurrency(liability), icon: Icons.DollarSign, trend: -2.4, color: 'amber' }, | |
| { title: 'Budget Remaining', value: formatCurrency(200000), icon: Icons.LayoutDashboard, trend: 0, color: 'slate' }, | |
| { title: 'Rejected (YTD)', value: 3, icon: Icons.CheckCircle, trend: -10, color: 'primary' } | |
| ], | |
| charts: { | |
| main: { type: 'hbar', data: budgetData }, | |
| secondary: { type: 'line', data: [{week: 'W1', approved: 5}, {week: 'W2', approved: 8}, {week: 'W3', approved: 4}, {week: 'W4', approved: 12}] } | |
| }, | |
| recent: recent | |
| }; | |
| } | |
| else { | |
| // User View | |
| const activeRequests = allRequests.filter(r => ['Requested', 'Approved', 'Ordered'].includes(r.status)).length; | |
| const completed = allRequests.filter(r => r.status === 'Completed').length; | |
| const totalValue = allRequests.reduce((acc, curr) => acc + curr.amount, 0); | |
| // User Status Progress | |
| const statusCounts = {}; | |
| allRequests.forEach(r => { statusCounts[r.status] = (statusCounts[r.status] || 0) + 1; }); | |
| const userStatusData = Object.keys(statusCounts).map(status => ({ name: status, value: statusCounts[status] })); | |
| // Recent Activity (User Timeline) | |
| const recent = allRequests | |
| .sort((a, b) => new Date(b.date) - new Date(a.date)) | |
| .slice(0, 5) | |
| .map(r => ({ | |
| type: 'request', | |
| title: r.title, | |
| description: `Status updated to ${r.status}`, | |
| status: r.status, | |
| date: r.date | |
| })); | |
| return { | |
| kpis: [ | |
| { title: 'My Active Requests', value: activeRequests, icon: Icons.Briefcase, trend: 0, color: 'primary' }, | |
| { title: 'Approved/Ready', value: allRequests.filter(r => r.status === 'Approved').length, icon: Icons.CheckCircle, trend: 10, color: 'green' }, | |
| { title: 'Completed', value: completed, icon: Icons.LayoutDashboard, trend: 5, color: 'slate' }, | |
| { title: 'Total Value', value: formatCurrency(totalValue), icon: Icons.DollarSign, trend: 0, color: 'amber' } | |
| ], | |
| charts: { | |
| main: { type: 'bar', data: userStatusData, dataKey: 'value', color: '#10b981', nameKey: 'name' }, | |
| secondary: null // Optional for user | |
| }, | |
| recent: recent | |
| }; | |
| } | |
| }, [user]); | |
| // Helper to render charts | |
| const renderChart = (chartConfig, size = 'large') => { | |
| if (!chartConfig) return null; | |
| const containerClass = size === 'large' ? 'h-80 w-full' : 'h-64 w-full'; | |
| if (chartConfig.type === 'bar') { | |
| return ( | |
| <ResponsiveContainer width="100%" height="100%"> | |
| <BarChart data={chartConfig.data} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}> | |
| <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#e2e8f0" /> | |
| <XAxis dataKey={chartConfig.nameKey || 'name'} tick={{ fill: '#64748b', fontSize: 12 }} axisLine={false} tickLine={false} /> | |
| <YAxis tick={{ fill: '#64748b', fontSize: 12 }} axisLine={false} tickLine={false} /> | |
| <Tooltip | |
| formatter={(value) => [formatCurrency(value), 'Value']} | |
| contentStyle={{ borderRadius: '8px', border: 'none', boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)' }} | |
| /> | |
| <Bar dataKey={chartConfig.dataKey} fill={chartConfig.color} radius={[4, 4, 0, 0]} barSize={32} /> | |
| </BarChart> | |
| </ResponsiveContainer> | |
| ); | |
| } | |
| else if (chartConfig.type === 'hbar') { | |
| return ( | |
| <ResponsiveContainer width="100%" height="100%"> | |
| <BarChart data={chartConfig.data} orientation="horizontal" margin={{ top: 20, right: 30, left: 0, bottom: 5 }}> | |
| <CartesianGrid strokeDasharray="3 3" horizontal={false} stroke="#e2e8f0" /> | |
| <XAxis type="number" tick={{ fill: '#64748b', fontSize: 12 }} axisLine={false} tickLine={false} /> | |
| <YAxis dataKey="name" type="category" tick={{ fill: '#64748b', fontSize: 11 }} axisLine={false} tickLine={false} width={100} /> | |
| <Tooltip | |
| formatter={(value) => formatCurrency(value)} | |
| contentStyle={{ borderRadius: '8px', border: 'none', boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)' }} | |
| /> | |
| <Bar dataKey="Spent" fill="#3b82f6" radius={[0, 4, 4, 0]} barSize={16} /> | |
| <Bar dataKey="Remaining" fill="#e2e8f0" radius={[4, 0, 0, 4]} barSize={16} /> | |
| </BarChart> | |
| </ResponsiveContainer> | |
| ); | |
| } | |
| else if (chartConfig.type === 'pie') { | |
| const COLORS = ['#3b82f6', '#f59e0b', '#10b981', '#ef4444', '#6366f1']; | |
| return ( | |
| <ResponsiveContainer width="100%" height="100%"> | |
| <PieChart> | |
| <Pie | |
| data={chartConfig.data} | |
| cx="50%" | |
| cy="50%" | |
| innerRadius={60} | |
| outerRadius={80} | |
| paddingAngle={5} | |
| dataKey="value" | |
| > | |
| {chartConfig.data.map((entry, index) => ( | |
| <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} /> | |
| ))} | |
| </Pie> | |
| <Tooltip | |
| formatter={(value) => [`${value} Requests`, 'Count']} | |
| contentStyle={{ borderRadius: '8px', border: 'none', boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)' }} | |
| /> | |
| <Legend verticalAlign="bottom" height={36} iconType="circle" /> | |
| </PieChart> | |
| </ResponsiveContainer> | |
| ); | |
| } | |
| else if (chartConfig.type === 'line') { | |
| return ( | |
| <ResponsiveContainer width="100%" height="100%"> | |
| <LineChart data={chartConfig.data} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}> | |
| <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#e2e8f0" /> | |
| <XAxis dataKey="week" tick={{ fill: '#64748b', fontSize: 12 }} axisLine={false} tickLine={false} /> | |
| <YAxis tick={{ fill: '#64748b', fontSize: 12 }} axisLine={false} tickLine={false} /> | |
| <Tooltip | |
| contentStyle={{ borderRadius: '8px', border: 'none', boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)' }} | |
| /> | |
| <Line type="monotone" dataKey="approved" stroke="#10b981" strokeWidth={3} dot={{ r: 4, fill: '#10b981', strokeWidth: 2 }} /> | |
| </LineChart> | |
| </ResponsiveContainer> | |
| ); | |
| } | |
| return null; | |
| }; | |
| return ( | |
| <div className="min-h-screen bg-slate-50 p-4 md:p-8 fade-in"> | |
| {/* Header Section */} | |
| <header className="flex flex-col md:flex-row md:items-center justify-between mb-8 gap-4"> | |
| <div> | |
| <h1 className="text-3xl font-bold text-slate-900"> | |
| Good Morning, {user.name.split(' ')[0]}! 👋 | |
| </h1> | |
| <p className="text-slate-500 mt-1"> | |
| {new Date().toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })} | |
| </p> | |
| </div> | |
| <div className="flex items-center gap-3"> | |
| <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"> | |
| <Icons.Plus size={20} /> | |
| New Request | |
| </button> | |
| <button className="p-2.5 bg-white border border-slate-200 text-slate-600 hover:bg-slate-50 rounded-lg transition-colors shadow-sm"> | |
| <Icons.Settings size={20} /> | |
| </button> | |
| </div> | |
| </header> | |
| {/* Bento Grid Container */} | |
| <div className="bento-grid max-w-7xl mx-auto"> | |
| {/* 1. KPI Cards (Top Row) */} | |
| {dashboardData.kpis.map((kp, index) => ( | |
| <div key={index} className={`bento-medium fade-in`} style={{ animationDelay: `${index * 100}ms` }}> | |
| <KPICard | |
| title={kp.title} | |
| value={kp.value} | |
| icon={kp.icon} | |
| trend={kp.trend} | |
| color={kp.color} | |
| /> | |
| </div> | |
| ))} | |
| {/* 2. Main Chart Area (Spending/Budget) */} | |
| <div className={`bento-large fade-in`} style={{ animationDelay: '400ms' }}> | |
| <div className="bg-white p-6 rounded-xl shadow-sm border border-slate-200 h-full flex flex-col"> | |
| <div className="flex justify-between items-center mb-6"> | |
| <h3 className="text-lg font-bold text-slate-800"> | |
| {user.role === 'admin' ? 'Spending Trend (YTD)' : | |
| user.role === 'finance' ? 'Budget Utilization by Project' : 'My Request Status Overview'} | |
| </h3> | |
| <select className="text-sm border-slate-200 rounded-md text-slate-600 focus:ring-blue-500 focus:border-blue-500 bg-slate-50"> | |
| <option>Last 12 Months</option> | |
| <option>This Year</option> | |
| <option>Last Year</option> | |
| </select> | |
| </div> | |
| {renderChart(dashboardData.charts.main, 'large')} | |
| </div> | |
| </div> | |
| {/* 3. Secondary Chart (Status/Budget or Velocity) */} | |
| <div className={`bento-medium fade-in`} style={{ animationDelay: '500ms' }}> | |
| <div className="bg-white p-6 rounded-xl shadow-sm border border-slate-200 h-full flex flex-col"> | |
| <h3 className="text-lg font-bold text-slate-800 mb-4"> | |
| {user.role === 'admin' ? 'Request Status Distribution' : | |
| user.role === 'finance' ? 'Weekly Approval Velocity' : 'Budget Breakdown (Optional)'} | |
| </h3> | |
| <div className="flex-1 flex items-center justify-center"> | |
| {dashboardData.charts.secondary ? renderChart(dashboardData.charts.secondary, 'small') : ( | |
| <div className="text-slate-400 text-sm text-center">Data visualization for {user.role}</div> | |
| )} | |
| </div> | |
| </div> | |
| </div> | |
| {/* 4. Recent Activity (Bottom Full Width) */} | |
| <div className={`bento-large fade-in`} style={{ animationDelay: '600ms' }}> | |
| <RecentActivity activities={dashboardData.recent} role={user.role} /> | |
| </div> | |
| </div> | |
| {/* Footer / Branding */} | |
| <div className="mt-12 text-center pb-8"> | |
| <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"> | |
| Built with anycoder | |
| </a> | |
| </div> | |
| </div> | |
| ); | |
| }; | |
| // 4. Role Selection Wrapper (To simulate login) | |
| const App = () => { | |
| const [user, setUser] = useState(null); | |
| if (!user) { | |
| return ( | |
| <div className="min-h-screen flex items-center justify-center bg-slate-50 p-4"> | |
| <div className="max-w-md w-full bg-white p-8 rounded-2xl shadow-xl border border-slate-200"> | |
| <div className="text-center mb-8"> | |
| <div className="inline-flex items-center justify-center w-16 h-16 bg-blue-100 rounded-full mb-4"> | |
| <Icons.LayoutDashboard className="text-blue-600" size={32} /> | |
| </div> | |
| <h1 className="text-3xl font-bold text-slate-900">Product Request Manager</h1> | |
| <p className="text-slate-500 mt-2">Select your role to access the dashboard</p> | |
| </div> | |
| <div className="space-y-4"> | |
| <button | |
| onClick={() => setUser(MOCK_USERS.admin)} | |
| 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" | |
| > | |
| <div className="w-10 h-10 rounded-full bg-slate-100 flex items-center justify-center group-hover:bg-blue-200 transition-colors"> | |
| <Icons.Users className="text-slate-600 group-hover:text-blue-700" size={20} /> | |
| </div> | |
| <div> | |
| <h3 className="font-semibold text-slate-900">Admin</h3> | |
| <p className="text-sm text-slate-500">Control Tower View</p> | |
| </div> | |
| </button> | |
| <button | |
| onClick={() => setUser(MOCK_USERS.finance)} | |
| 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" | |
| > | |
| <div className="w-10 h-10 rounded-full bg-slate-100 flex items-center justify-center group-hover:bg-emerald-200 transition-colors"> | |
| <Icons.DollarSign className="text-slate-600 group-hover:text-emerald-700" size={20} /> | |
| </div> | |
| <div> | |
| <h3 className="font-semibold text-slate-900">Finance</h3> | |
| <p className="text-sm text-slate-500">Budget & Liability View</p> | |
| </div> | |
| </button> | |
| <button | |
| onClick={() => setUser(MOCK_USERS.user)} | |
| 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" | |
| > | |
| <div className="w-10 h-10 rounded-full bg-slate-100 flex items-center justify-center group-hover:bg-amber-200 transition-colors"> | |
| <Icons.Briefcase className="text-slate-600 group-hover:text-amber-700" size={20} /> | |
| </div> | |
| <div> | |
| <h3 className="font-semibold text-slate-900">User</h3> | |
| <p className="text-sm text-slate-500">My Orders & History</p> | |
| </div> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| ); | |
| } | |
| return <Dashboard user={user} />; | |
| }; | |
| const root = ReactDOM.createRoot(document.getElementById('root')); | |
| root.render(<App />); | |
| </script> | |
| </body> | |
| </html> |