function DataTable({ data = [], columns = [], itemsPerPage = 5, onSort, onFilter }) { const [currentPage, setCurrentPage] = useState(1); const [sortConfig, setSortConfig] = useState({ key: null, direction: "asc" }); const [filters, setFilters] = useState({}); const [displayData, setDisplayData] = useState([]); useEffect(()=>{ let filteredData = [ ...data ]; Object.keys(filters).forEach((key)=>{ if (filters[key]) { filteredData = filteredData.filter((item)=>String(item[key]).toLowerCase().includes(filters[key].toLowerCase())); } }); if (sortConfig.key) { filteredData.sort((a, b)=>{ if (a[sortConfig.key] < b[sortConfig.key]) return sortConfig.direction === "asc" ? -1 : 1; if (a[sortConfig.key] > b[sortConfig.key]) return sortConfig.direction === "asc" ? 1 : -1; return 0; }); } setDisplayData(filteredData); }, [ data, sortConfig, filters ]); const totalPages = Math.ceil(displayData.length / itemsPerPage); const paginatedData = displayData.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage); const handleSort = (key)=>{ const direction = sortConfig.key === key && sortConfig.direction === "asc" ? "desc" : "asc"; setSortConfig({ key, direction }); if (onSort) onSort(key, direction); }; const handleFilter = (key, value)=>{ setFilters((prev)=>({ ...prev, [key]: value })); setCurrentPage(1); if (onFilter) onFilter(key, value); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full overflow-x-auto", __source: { fileName: "", lineNumber: 57, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "min-w-full bg-white", __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { className: "bg-gray-100", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, columns.map((column)=>/*#__PURE__*/ React.createElement("th", { key: column.key, className: "px-6 py-3 text-left", __source: { fileName: "", lineNumber: 62, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 63, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleSort(column.key), className: "font-semibold text-gray-600 hover:text-gray-900", __source: { fileName: "", lineNumber: 64, columnNumber: 19 }, __self: this }, column.label, sortConfig.key === column.key && /*#__PURE__*/ React.createElement("i", { className: `ml-1 fas fa-sort-${sortConfig.direction === "asc" ? "up" : "down"}`, __source: { fileName: "", lineNumber: 70, columnNumber: 23 }, __self: this })), /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Filter", className: "mt-2 px-2 py-1 border rounded text-sm", onChange: (e)=>handleFilter(column.key, e.target.value), value: filters[column.key] || "", __source: { fileName: "", lineNumber: 75, columnNumber: 19 }, __self: this })))))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 87, columnNumber: 9 }, __self: this }, paginatedData.map((item, index)=>/*#__PURE__*/ React.createElement("tr", { key: index, className: "border-b hover:bg-gray-50", __source: { fileName: "", lineNumber: 89, columnNumber: 13 }, __self: this }, columns.map((column)=>/*#__PURE__*/ React.createElement("td", { key: column.key, className: "px-6 py-4", __source: { fileName: "", lineNumber: 91, columnNumber: 17 }, __self: this }, item[column.key])))))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mt-4 px-6", __source: { fileName: "", lineNumber: 100, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 101, columnNumber: 9 }, __self: this }, "Showing ", (currentPage - 1) * itemsPerPage + 1, " to", " ", Math.min(currentPage * itemsPerPage, displayData.length), " of", " ", displayData.length), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2", __source: { fileName: "", lineNumber: 106, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCurrentPage((p)=>Math.max(1, p - 1)), disabled: currentPage === 1, className: "px-3 py-1 border rounded hover:bg-gray-100 disabled:opacity-50", __source: { fileName: "", lineNumber: 107, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-left", __source: { fileName: "", lineNumber: 112, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCurrentPage((p)=>Math.min(totalPages, p + 1)), disabled: currentPage === totalPages, className: "px-3 py-1 border rounded hover:bg-gray-100 disabled:opacity-50", __source: { fileName: "", lineNumber: 114, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-right", __source: { fileName: "", lineNumber: 119, columnNumber: 13 }, __self: this }))))); } function DataTableStory() { const sampleData = [ { id: 1, name: "John Doe", age: 25, city: "New York" }, { id: 2, name: "Jane Smith", age: 32, city: "Los Angeles" }, { id: 3, name: "Bob Johnson", age: 45, city: "Chicago" }, { id: 4, name: "Alice Brown", age: 28, city: "Houston" }, { id: 5, name: "Charlie Wilson", age: 36, city: "Phoenix" }, { id: 6, name: "Diana Miller", age: 41, city: "Miami" } ]; const columns = [ { key: "name", label: "Name" }, { key: "age", label: "Age" }, { key: "city", label: "City" } ]; return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 144, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 145, columnNumber: 7 }, __self: this }, "Table Component Demo"), /*#__PURE__*/ React.createElement(DataTable, { data: sampleData, columns: columns, itemsPerPage: 3, __source: { fileName: "", lineNumber: 146, columnNumber: 7 }, __self: this })); } function MetricsCard({ icon, value, label, color = "blue" }) { const colorClasses = { blue: "bg-[#f0f7ff] text-[#0066ff]", green: "bg-[#f0fff4] text-[#00c853]", red: "bg-[#fff5f5] text-[#ff3d00]", purple: "bg-[#f6f3ff] text-[#7b1fa2]" }; const borderClasses = { blue: "border-[#0066ff]/10", green: "border-[#00c853]/10", red: "border-[#ff3d00]/10", purple: "border-[#7b1fa2]/10" }; return /*#__PURE__*/ React.createElement("div", { className: "inline-block rounded-xl p-6 bg-[#FFFFFF] border-2 hover:border-[#fbad04] transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:shadow-lg", __source: { fileName: "", lineNumber: 17, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `rounded-xl p-4 ${colorClasses[color]} border ${borderClasses[color]}`, __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fa ${icon} text-2xl`, __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-3xl font-bold font-roboto text-[#1c1c1c]", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }, value), /*#__PURE__*/ React.createElement("div", { className: "text-[#666666] font-roboto text-sm mt-1", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, label)))); } function MetricsCardStory() { return /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 p-8 bg-gray-50", __source: { fileName: "", lineNumber: 37, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MetricsCard, { icon: "fa-users", value: "1,234", label: "Total Users", color: "blue", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(MetricsCard, { icon: "fa-chart-line", value: "$5,678", label: "Revenue", color: "green", __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(MetricsCard, { icon: "fa-shopping-cart", value: "892", label: "Orders", color: "purple", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(MetricsCard, { icon: "fa-exclamation-circle", value: "18", label: "Issues", color: "red", __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this })); } function Chart1({ type = "line", data, title, className }) { const [chartData, setChartData] = useState(null); const canvasRef = useRef(null); useEffect(()=>{ if (!canvasRef.current || !data) return; const ctx = canvasRef.current.getContext("2d"); const colors = [ "#6366F1", "#8B5CF6", "#EC4899", "#F43F5E", "#F97316" ]; const newChart = new Chart(ctx, { type, data: { labels: data.labels, datasets: [ { data: data.values, backgroundColor: colors, borderColor: type === "line" ? "#6366F1" : colors, borderWidth: 2, tension: 0.4, fill: type === "line" ? false : true } ] }, options: { responsive: true, maintainAspectRatio: true, plugins: { legend: { position: "bottom", labels: { font: { family: "inter" } } }, title: { display: !!title, text: title, font: { family: "inter", size: 16 } } } } }); setChartData(newChart); return ()=>newChart.destroy(); }, [ type, data, title ]); return /*#__PURE__*/ React.createElement("div", { className: `bg-white rounded-lg shadow-sm p-4 ${className}`, __source: { fileName: "", lineNumber: 51, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("canvas", { ref: canvasRef, __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this })); } function Chart1Story() { const lineData = { labels: [ "Jan", "Feb", "Mar", "Apr", "May" ], values: [ 12, 19, 3, 5, 2 ] }; const pieData = { labels: [ "Red", "Blue", "Yellow", "Green", "Purple" ], values: [ 12, 19, 3, 5, 2 ] }; const barData = { labels: [ "Category 1", "Category 2", "Category 3", "Category 4", "Category 5" ], values: [ 20, 35, 15, 45, 30 ] }; return /*#__PURE__*/ React.createElement("div", { className: "space-y-8 p-4", __source: { fileName: "", lineNumber: 80, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Chart1, { type: "line", data: lineData, title: "Line Chart Example", className: "w-full h-[300px]", __source: { fileName: "", lineNumber: 81, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(Chart1, { type: "pie", data: pieData, title: "Pie Chart Example", className: "w-full h-[300px]", __source: { fileName: "", lineNumber: 87, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(Chart1, { type: "bar", data: barData, title: "Bar Chart Example", className: "w-full h-[300px]", __source: { fileName: "", lineNumber: 93, columnNumber: 7 }, __self: this })); } /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 103, columnNumber: 1 }, __self: this }, ` @import 'https://cdn.jsdelivr.net/npm/chart.js'; `); function Header({ notifications = [], userProfile = {} }) { const [isNotificationOpen, setIsNotificationOpen] = useState(false); const [isProfileOpen, setIsProfileOpen] = useState(false); return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 6, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#FFFFFF] shadow-md p-4 fixed w-full top-0 z-50", __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto flex items-center justify-between", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 9, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-bold font-roboto text-[#1c1c1c]", __source: { fileName: "", lineNumber: 10, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bolt text-[#fbad04]", __source: { fileName: "", lineNumber: 11, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "ml-2", __source: { fileName: "", lineNumber: 12, columnNumber: 15 }, __self: this }, "Bolt")), /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 15, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "search", name: "search", placeholder: "Search...", className: "w-[300px] px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:border-[#fbad04]", __source: { fileName: "", lineNumber: 16, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-search absolute right-3 top-3 text-gray-400", __source: { fileName: "", lineNumber: 22, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-6", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 27, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsNotificationOpen(!isNotificationOpen), className: "relative", __source: { fileName: "", lineNumber: 28, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bell text-xl text-[#1c1c1c] hover:text-gray-600", __source: { fileName: "", lineNumber: 32, columnNumber: 17 }, __self: this }), notifications.length > 0 && /*#__PURE__*/ React.createElement("span", { className: "absolute -top-1 -right-1 bg-[#fbad04] text-white text-xs w-[18px] h-[18px] flex items-center justify-center rounded-full", __source: { fileName: "", lineNumber: 34, columnNumber: 19 }, __self: this }, notifications.length)), isNotificationOpen && /*#__PURE__*/ React.createElement("div", { className: "absolute right-0 mt-2 w-80 bg-white rounded-lg shadow-lg border border-gray-100", __source: { fileName: "", lineNumber: 41, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 border-b border-gray-100", __source: { fileName: "", lineNumber: 42, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-medium", __source: { fileName: "", lineNumber: 43, columnNumber: 21 }, __self: this }, "Notifications")), /*#__PURE__*/ React.createElement("div", { className: "max-h-96 overflow-y-auto", __source: { fileName: "", lineNumber: 45, columnNumber: 19 }, __self: this }, notifications.map((notification, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "p-4 hover:bg-gray-50 border-b border-gray-100", __source: { fileName: "", lineNumber: 47, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 51, columnNumber: 25 }, __self: this }, notification.message), /*#__PURE__*/ React.createElement("span", { className: "text-xs text-gray-400 mt-1", __source: { fileName: "", lineNumber: 54, columnNumber: 25 }, __self: this }, notification.time)))))), /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 64, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsProfileOpen(!isProfileOpen), className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 65, columnNumber: 15 }, __self: this }, userProfile.avatar ? /*#__PURE__*/ React.createElement("img", { src: userProfile.avatar, alt: "Profile", className: "w-[40px] h-[40px] rounded-full object-cover", __source: { fileName: "", lineNumber: 70, columnNumber: 19 }, __self: this }) : /*#__PURE__*/ React.createElement("div", { className: "w-[40px] h-[40px] rounded-full bg-[#1c1c1c] flex items-center justify-center", __source: { fileName: "", lineNumber: 76, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user text-[#FFFFFF]", __source: { fileName: "", lineNumber: 77, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("span", { className: "text-sm font-medium", __source: { fileName: "", lineNumber: 80, columnNumber: 17 }, __self: this }, userProfile.name)), isProfileOpen && /*#__PURE__*/ React.createElement("div", { className: "absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-100", __source: { fileName: "", lineNumber: 84, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 border-b border-gray-100", __source: { fileName: "", lineNumber: 85, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-medium", __source: { fileName: "", lineNumber: 86, columnNumber: 21 }, __self: this }, userProfile.name), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 87, columnNumber: 21 }, __self: this }, userProfile.email)), /*#__PURE__*/ React.createElement("div", { className: "p-2", __source: { fileName: "", lineNumber: 91, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/profile", className: "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded-lg", __source: { fileName: "", lineNumber: 92, columnNumber: 21 }, __self: this }, "Profile"), /*#__PURE__*/ React.createElement("a", { href: "/settings", className: "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded-lg", __source: { fileName: "", lineNumber: 98, columnNumber: 21 }, __self: this }, "Settings"), /*#__PURE__*/ React.createElement("hr", { className: "my-2", __source: { fileName: "", lineNumber: 104, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-gray-100 rounded-lg", __source: { fileName: "", lineNumber: 105, columnNumber: 21 }, __self: this }, "Sign out")))))))); } function HeaderStory() { const mockNotifications = [ { message: "New message from John", time: "2 mins ago" }, { message: "Your report is ready", time: "1 hour ago" }, { message: "Meeting reminder", time: "3 hours ago" } ]; const mockUserProfile = { name: "John Doe", email: "john@example.com", avatar: null }; return /*#__PURE__*/ React.createElement("div", { className: "space-y-8", __source: { fileName: "", lineNumber: 133, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Header, { notifications: mockNotifications, userProfile: mockUserProfile, __source: { fileName: "", lineNumber: 134, columnNumber: 7 }, __self: this })); } function Sidebar({ activeTab }) { const navItems = [ { id: "dashboard", icon: "fa-tachometer-alt", label: "Dashboard", href: "/" }, { id: "deals", icon: "fa-percentage", label: "Deals", href: "/deals" }, { id: "calendar", icon: "fa-calendar", label: "Calendar", href: "/calendar" }, { id: "inbox", icon: "fa-inbox", label: "Inbox", href: "/inbox" }, { id: "contacts", icon: "fa-address-book", label: "Contacts", href: "/contacts" }, { id: "tasks", icon: "fa-tasks", label: "Tasks", href: "/tasks" }, { id: "reports", icon: "fa-chart-bar", label: "Reports", href: "/reports" }, { id: "insights", icon: "fa-lightbulb", label: "Insights", href: "/insights" }, { id: "settings", icon: "fa-cog", label: "Settings", href: "/settings" } ]; return /*#__PURE__*/ React.createElement("div", { className: "flex h-screen", __source: { fileName: "", lineNumber: 35, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("aside", { className: "w-64 bg-[#FFFFFF] text-[#1c1c1c] p-4 border-r border-[#fbad04]", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "space-y-1", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, navItems.map((item)=>/*#__PURE__*/ React.createElement("a", { key: item.id, href: item.href, className: `flex items-center gap-3 p-3 rounded-lg transition-colors ${activeTab === item.id ? "bg-[#fbad04] text-[#FFFFFF]" : "text-[#1c1c1c] hover:bg-[#fbad04]/10"}`, __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${item.icon} w-5`, __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-roboto", __source: { fileName: "", lineNumber: 49, columnNumber: 15 }, __self: this }, item.label))))), /*#__PURE__*/ React.createElement("main", { className: "flex-1 p-4", __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-xl", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, "Select a section"))); } function SidebarStory() { return /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 63, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Sidebar, { activeTab: "dashboard", __source: { fileName: "", lineNumber: 64, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(Sidebar, { activeTab: "deals", __source: { fileName: "", lineNumber: 65, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(Sidebar, { activeTab: "calendar", __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this })); } function MainComponent() { const [dashboardData, setDashboardData] = useState(null); const [loading, setLoading] = useState(true); const [refreshInterval, setRefreshInterval] = useState(30000); useEffect(()=>{ const fetchData = async ()=>{ try { const response = await fetch("/api/dashboard-data", { method: "POST" }); const data = await response.json(); if (data.success) { setDashboardData(data.data); setLoading(false); } } catch (error) { console.error("Failed to fetch dashboard data:", error); } }; fetchData(); const interval = setInterval(fetchData, refreshInterval); return ()=>clearInterval(interval); }, [ refreshInterval ]); const [activeTab, setActiveTab] = useState("dashboard"); const [searchQuery, setSearchQuery] = useState(""); const [notifications, setNotifications] = useState(3); const metrics = loading ? { monthlyRevenue: "Loading...", activeUsers: "Loading...", completedRides: "Loading...", avgRating: "Loading..." } : { monthlyRevenue: `£${dashboardData?.revenue?.monthly?.toLocaleString()}`, activeUsers: dashboardData?.activeUsers?.toLocaleString(), completedRides: "45,678", avgRating: "4.8" }; const tasks = [ { id: 1, title: "Resolve Payment Dispute", priority: "high", deadline: "2024-02-20" }, { id: 2, title: "Driver License Renewal", priority: "medium", deadline: "2024-02-25" }, { id: 3, title: "Customer Refund Request", priority: "low", deadline: "2024-02-28" } ]; const drivers = [ { id: 1, name: "John Smith", rating: 4.9, trips: 1234, status: "active" }, { id: 2, name: "Sarah Johnson", rating: 4.7, trips: 856, status: "warning" }, { id: 3, name: "Mike Davis", rating: 4.8, trips: 2341, status: "active" } ]; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#FFFFFF]", __source: { fileName: "", lineNumber: 75, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Header, { __source: { fileName: "", lineNumber: 76, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "pt-16 flex min-h-screen", __source: { fileName: "", lineNumber: 77, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(Sidebar, { activeTab: activeTab, setActiveTab: setActiveTab, __source: { fileName: "", lineNumber: 78, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("main", { className: "flex-1 ml-64 p-8", __source: { fileName: "", lineNumber: 79, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold font-roboto text-[#1c1c1c]", __source: { fileName: "", lineNumber: 81, columnNumber: 13 }, __self: this }, "Welcome back, Admin"), /*#__PURE__*/ React.createElement("p", { className: "text-[#1c1c1c] mt-1", __source: { fileName: "", lineNumber: 84, columnNumber: 13 }, __self: this }, new Date().toLocaleDateString("en-US", { weekday: "long", year: "numeric", month: "long", day: "numeric" }))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8", __source: { fileName: "", lineNumber: 93, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(MetricsCard, { icon: "fa-dollar-sign", value: metrics.monthlyRevenue, label: "Monthly Revenue", color: "blue", __source: { fileName: "", lineNumber: 94, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement(MetricsCard, { icon: "fa-users", value: metrics.activeUsers, label: "Active Users", color: "blue", __source: { fileName: "", lineNumber: 100, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement(MetricsCard, { icon: "fa-car", value: metrics.completedRides, label: "Completed Rides", color: "blue", __source: { fileName: "", lineNumber: 106, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement(MetricsCard, { icon: "fa-star", value: metrics.avgRating, label: "Average Rating", color: "blue", __source: { fileName: "", lineNumber: 112, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8", __source: { fileName: "", lineNumber: 119, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(React.Fragment, null), /*#__PURE__*/ React.createElement(React.Fragment, null)), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-6", __source: { fileName: "", lineNumber: 124, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#FFFFFF] border border-[#fbad04] p-6 rounded-xl shadow-sm", __source: { fileName: "", lineNumber: 125, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4 font-roboto text-[#1c1c1c]", __source: { fileName: "", lineNumber: 126, columnNumber: 15 }, __self: this }, "Recent Tasks"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 129, columnNumber: 15 }, __self: this }, tasks.map((task)=>/*#__PURE__*/ React.createElement("div", { key: task.id, className: "flex items-center justify-between p-4 border border-[#fbad04]/20 rounded-lg", __source: { fileName: "", lineNumber: 131, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 135, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-medium text-[#1c1c1c]", __source: { fileName: "", lineNumber: 136, columnNumber: 23 }, __self: this }, task.title), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-[#1c1c1c]", __source: { fileName: "", lineNumber: 139, columnNumber: 23 }, __self: this }, "Due: ", task.deadline)), /*#__PURE__*/ React.createElement("span", { className: `px-3 py-1 rounded-full text-sm ${task.priority === "high" ? "bg-[#fbad04] text-[#FFFFFF]" : task.priority === "medium" ? "bg-[#fbad04]/60 text-[#FFFFFF]" : "bg-[#fbad04]/30 text-[#FFFFFF]"}`, __source: { fileName: "", lineNumber: 143, columnNumber: 21 }, __self: this }, task.priority))))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#FFFFFF] border border-[#fbad04] p-6 rounded-xl shadow-sm", __source: { fileName: "", lineNumber: 158, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4 font-roboto text-[#1c1c1c]", __source: { fileName: "", lineNumber: 159, columnNumber: 15 }, __self: this }, "Top Drivers"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 162, columnNumber: 15 }, __self: this }, drivers.map((driver)=>/*#__PURE__*/ React.createElement("div", { key: driver.id, className: "flex items-center justify-between p-4 border border-[#fbad04]/20 rounded-lg", __source: { fileName: "", lineNumber: 164, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 168, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-10 h-10 rounded-full bg-[#fbad04] flex items-center justify-center", __source: { fileName: "", lineNumber: 169, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user text-[#FFFFFF]", __source: { fileName: "", lineNumber: 170, columnNumber: 25 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 172, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-medium text-[#1c1c1c]", __source: { fileName: "", lineNumber: 173, columnNumber: 25 }, __self: this }, driver.name), /*#__PURE__*/ React.createElement("div", { className: "flex items-center text-sm text-[#1c1c1c]", __source: { fileName: "", lineNumber: 176, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 177, columnNumber: 27 }, __self: this }, driver.rating, " ⭐"), /*#__PURE__*/ React.createElement("span", { className: "mx-2", __source: { fileName: "", lineNumber: 178, columnNumber: 27 }, __self: this }, "•"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 179, columnNumber: 27 }, __self: this }, driver.trips, " trips")))), /*#__PURE__*/ React.createElement("span", { className: `px-3 py-1 rounded-full text-sm ${driver.status === "active" ? "bg-[#fbad04] text-[#FFFFFF]" : "bg-[#fbad04]/60 text-[#FFFFFF]"}`, __source: { fileName: "", lineNumber: 183, columnNumber: 21 }, __self: this }, driver.status))))))))); }