{title}

{value.toLocaleString()}

{icon}

\n );\n\n const renderContent = () => {\n switch (activeTab) {\n case \"overview\":\n return (\n

Dashboard Overview

Welcome back, {user.name}!

\n\n {loading ? (\n

\n {[...Array(4)].map((_, i) => (\n

\n ))}\n

\n ) : stats ? (\n

\n \n \n \n \n

\n ) : null}\n\n {stats && (\n

Financial Overview

\n Total Fines Collected\n ${stats.total_fines.toFixed(2)}\n

\n Unpaid Fines\n ${stats.unpaid_fines.toFixed(2)}\n

\n\n

Quick Actions

\n setActiveTab(\"books\")}\n className=\"w-full text-left px-4 py-3 bg-blue-50 hover:bg-blue-100 rounded-lg transition-colors\"\n >\n 📚 Add New Book\n \n setActiveTab(\"transactions\")}\n className=\"w-full text-left px-4 py-3 bg-green-50 hover:bg-green-100 rounded-lg transition-colors\"\n >\n 📋 Issue Book\n \n setActiveTab(\"search\")}\n className=\"w-full text-left px-4 py-3 bg-purple-50 hover:bg-purple-100 rounded-lg transition-colors\"\n >\n 🔍 Search Catalog\n \n

\n )}\n

\n );\n\n case \"books\":\n return ;\n\n case \"users\":\n return ;\n\n case \"search\":\n return ;\n\n case \"transactions\":\n return ;\n\n case \"profile\":\n return (\n

Profile Settings

\n Name\n

{user.name}

\n Email\n

{user.email}

\n Role\n \n {user.role.charAt(0).toUpperCase() + user.role.slice(1)}\n \n

\n Status\n \n {user.is_verified ? \"Verified\" : \"Pending Verification\"}\n \n

\n );\n\n default:\n return

Page not found

;\n }\n };\n\n return (\n

\n {/* Mobile sidebar backdrop */}\n {sidebarOpen && (\n setSidebarOpen(false)}\n />\n )}\n\n {/* Sidebar */}\n

\n {/* Logo */}\n

\n 📚\n Library MS\n

\n setSidebarOpen(false)}\n className=\"lg:hidden text-gray-500 hover:text-gray-700\"\n >\n ✕\n \n

\n\n {/* Navigation */}\n

\n {\n setActiveTab(item.id as ActiveTab);\n setSidebarOpen(false);\n }}\n className={`w-full flex items-center px-4 py-3 text-left rounded-lg transition-colors ${\n activeTab === item.id\n ? \"bg-blue-50 text-blue-700 border-r-2 border-blue-700\"\n : \"text-gray-700 hover:bg-gray-50\"\n }`}\n >\n {item.icon}\n {item.name}\n \n

\n\n {/* User info and logout */}\n

\n \n {user.name.charAt(0).toUpperCase()}\n \n

{user.name}

{user.email}

\n \n 🚪\n Logout\n \n

\n\n {/* Main content */}\n

\n {/* Top bar */}\n

\n setSidebarOpen(true)}\n className=\"lg:hidden text-gray-500 hover:text-gray-700\"\n >\n \n \n

\n \n {new Date().toLocaleDateString(\"en-US\", {\n weekday: \"long\",\n year: \"numeric\",\n month: \"long\",\n day: \"numeric\"\n })}\n \n

\n\n {/* Page content */}\n

\n {renderContent()}\n

\n );\n}","deleted","label",[167,168,149],"frontend","components","permalink","https://www.val.town/x/priyanshu2307/untitled-7020/code/frontend/components/Dashboard.tsx","extension","actionData","errors"]