Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>FinEdge | Accounting System</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/react@18/umd/react.development.js"></script> | |
| <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> | |
| <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| :root { | |
| --primary: #3b82f6; | |
| --secondary: #10b981; | |
| --accent: #6366f1; | |
| } | |
| .grid-stack { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); | |
| gap: 1.5rem; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar { | |
| width: 6px; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar-track { | |
| background: rgba(0, 0, 0, 0.05); | |
| } | |
| .custom-scrollbar::-webkit-scrollbar-thumb { | |
| background: rgba(0, 0, 0, 0.2); | |
| border-radius: 3px; | |
| } | |
| .sidebar-transition { | |
| transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.3s ease-in; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| .progress-ring__circle { | |
| transition: stroke-dashoffset 0.35s; | |
| transform: rotate(-90deg); | |
| transform-origin: 50% 50%; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 text-gray-800 font-sans"> | |
| <div id="root"></div> | |
| <script type="text/babel"> | |
| const { useState, useEffect, useRef } = React; | |
| // TypeScript type definitions | |
| type MenuItem = { | |
| id: string; | |
| icon: string; | |
| label: string; | |
| subItems?: MenuItem[]; | |
| }; | |
| type FinancialCard = { | |
| id: string; | |
| title: string; | |
| value: string; | |
| change: number; | |
| icon: string; | |
| color: string; | |
| }; | |
| type Transaction = { | |
| id: string; | |
| date: string; | |
| description: string; | |
| amount: number; | |
| type: 'income' | 'expense'; | |
| category: string; | |
| status: 'completed' | 'pending' | 'rejected'; | |
| }; | |
| type Invoice = { | |
| id: string; | |
| client: string; | |
| amount: number; | |
| dueDate: string; | |
| status: 'paid' | 'overdue' | 'pending'; | |
| }; | |
| type ChartData = { | |
| labels: string[]; | |
| datasets: { | |
| label: string; | |
| data: number[]; | |
| backgroundColor: string[]; | |
| borderColor: string[]; | |
| borderWidth: number; | |
| }[]; | |
| }; | |
| // Components | |
| const Navbar = ({ toggleSidebar }: { toggleSidebar: () => void }) => { | |
| return ( | |
| <header className="bg-white border-b border-gray-200 px-6 py-3 flex items-center justify-between sticky top-0 z-10 shadow-sm"> | |
| <div className="flex items-center space-x-4"> | |
| <button | |
| onClick={toggleSidebar} | |
| className="lg:hidden text-gray-500 hover:text-gray-700 focus:outline-none" | |
| > | |
| <i className="fas fa-bars text-xl"></i> | |
| </button> | |
| <div className="flex items-center"> | |
| <div className="w-8 h-8 rounded-full bg-gradient-to-r from-blue-500 to-emerald-400 flex items-center justify-center text-white"> | |
| <i className="fas fa-calculator"></i> | |
| </div> | |
| <h1 className="ml-3 text-xl font-bold text-blue-600">FinEdge</h1> | |
| </div> | |
| </div> | |
| <div className="flex items-center space-x-4"> | |
| <div className="relative hidden md:block"> | |
| <input | |
| type="text" | |
| placeholder="Search transactions, reports..." | |
| className="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm w-64" | |
| /> | |
| <i className="fas fa-search absolute left-3 top-3 text-gray-400"></i> | |
| </div> | |
| <button className="text-gray-500 hover:text-gray-700 focus:outline-none relative"> | |
| <i className="fas fa-bell"></i> | |
| <span className="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"></span> | |
| </button> | |
| <div className="flex items-center space-x-2"> | |
| <div className="w-8 h-8 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center"> | |
| <i className="fas fa-user"></i> | |
| </div> | |
| <span className="hidden md:inline text-sm font-medium">Admin</span> | |
| </div> | |
| </div> | |
| </header> | |
| ); | |
| }; | |
| const Sidebar = ({ isOpen, closeSidebar }: { isOpen: boolean, closeSidebar: () => void }) => { | |
| const [activeMenu, setActiveMenu] = useState('dashboard'); | |
| const [expandedMenus, setExpandedMenus] = useState<Record<string, boolean>>({}); | |
| const menuItems: MenuItem[] = [ | |
| { id: 'dashboard', icon: 'fa-tachometer-alt', label: 'Dashboard' }, | |
| { | |
| id: 'accounting', | |
| icon: 'fa-calculator', | |
| label: 'Accounting', | |
| subItems: [ | |
| { id: 'general-ledger', icon: 'fa-book', label: 'General Ledger' }, | |
| { id: 'accounts-payable', icon: 'fa-file-invoice-dollar', label: 'Accounts Payable' }, | |
| { id: 'accounts-receivable', icon: 'fa-hand-holding-usd', label: 'Accounts Receivable' }, | |
| { id: 'banking', icon: 'fa-university', label: 'Banking' }, | |
| ] | |
| }, | |
| { | |
| id: 'financial-reports', | |
| icon: 'fa-chart-bar', | |
| label: 'Financial Reports', | |
| subItems: [ | |
| { id: 'balance-sheet', icon: 'fa-balance-scale', label: 'Balance Sheet' }, | |
| { id: 'income-statement', icon: 'fa-file-alt', label: 'Income Statement' }, | |
| { id: 'cash-flow', icon: 'fa-exchange-alt', label: 'Cash Flow' }, | |
| ] | |
| }, | |
| { id: 'invoicing', icon: 'fa-file-invoice', label: 'Invoicing' }, | |
| { id: 'expenses', icon: 'fa-receipt', label: 'Expenses' }, | |
| { id: 'payroll', icon: 'fa-users', label: 'Payroll' }, | |
| { id: 'tax', icon: 'fa-file-contract', label: 'Tax' }, | |
| { id: 'inventory', icon: 'fa-boxes', label: 'Inventory' }, | |
| { id: 'settings', icon: 'fa-cog', label: 'Settings' }, | |
| ]; | |
| const toggleSubMenu = (menuId: string) => { | |
| setExpandedMenus(prev => ({ | |
| ...prev, | |
| [menuId]: !prev[menuId] | |
| })); | |
| }; | |
| return ( | |
| <aside className={`fixed lg:relative inset-y-0 left-0 w-64 bg-white border-r border-gray-200 flex flex-col z-20 sidebar-transition ${isOpen ? 'translate-x-0' : '-translate-x-full'} lg:translate-x-0`}> | |
| <div className="p-4 border-b border-gray-200 flex items-center justify-between"> | |
| <h2 className="text-lg font-semibold text-gray-800">Menu</h2> | |
| <button | |
| onClick={closeSidebar} | |
| className="lg:hidden text-gray-500 hover:text-gray-700 focus:outline-none" | |
| > | |
| <i className="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div className="flex-1 overflow-y-auto custom-scrollbar"> | |
| <nav className="p-4"> | |
| <ul className="space-y-1"> | |
| {menuItems.map(item => ( | |
| <li key={item.id}> | |
| {item.subItems ? ( | |
| <div> | |
| <button | |
| onClick={() => toggleSubMenu(item.id)} | |
| className={`w-full text-left px-4 py-3 rounded-lg flex items-center justify-between transition-colors ${activeMenu === item.id ? 'bg-blue-50 text-blue-600' : 'hover:bg-gray-50 text-gray-700'}`} | |
| > | |
| <div className="flex items-center"> | |
| <i className={`fas ${item.icon} mr-3 ${activeMenu === item.id ? 'text-blue-500' : 'text-gray-500'}`}></i> | |
| <span className="font-medium">{item.label}</span> | |
| </div> | |
| <i className={`fas fa-chevron-down text-xs transition-transform ${expandedMenus[item.id] ? 'transform rotate-180' : ''}`}></i> | |
| </button> | |
| {expandedMenus[item.id] && ( | |
| <ul className="ml-8 mt-1 space-y-1"> | |
| {item.subItems.map(subItem => ( | |
| <li key={subItem.id}> | |
| <button | |
| onClick={() => setActiveMenu(subItem.id)} | |
| className={`w-full text-left px-4 py-2 rounded-lg flex items-center text-sm ${activeMenu === subItem.id ? 'bg-blue-50 text-blue-600' : 'hover:bg-gray-50 text-gray-700'}`} | |
| > | |
| <i className={`fas ${subItem.icon} mr-3 ${activeMenu === subItem.id ? 'text-blue-500' : 'text-gray-500'}`}></i> | |
| {subItem.label} | |
| </button> | |
| </li> | |
| ))} | |
| </ul> | |
| )} | |
| </div> | |
| ) : ( | |
| <button | |
| onClick={() => setActiveMenu(item.id)} | |
| className={`w-full text-left px-4 py-3 rounded-lg flex items-center transition-colors ${activeMenu === item.id ? 'bg-blue-50 text-blue-600' : 'hover:bg-gray-50 text-gray-700'}`} | |
| > | |
| <i className={`fas ${item.icon} mr-3 ${activeMenu === item.id ? 'text-blue-500' : 'text-gray-500'}`}></i> | |
| <span className="font-medium">{item.label}</span> | |
| </button> | |
| )} | |
| </li> | |
| ))} | |
| </ul> | |
| </nav> | |
| </div> | |
| <div className="p-4 border-t border-gray-200"> | |
| <div className="bg-blue-50 rounded-lg p-3"> | |
| <div className="flex items-center"> | |
| <div className="w-10 h-10 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center"> | |
| <i className="fas fa-question-circle"></i> | |
| </div> | |
| <div className="ml-3"> | |
| <p className="text-sm font-medium text-gray-800">Need help?</p> | |
| <button className="text-xs text-blue-600 hover:underline">Contact support</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </aside> | |
| ); | |
| }; | |
| const FinancialCard = ({ title, value, change, icon, color }: FinancialCard) => { | |
| return ( | |
| <div className="bg-white rounded-xl shadow-sm p-5 border border-gray-200 hover:shadow-md transition-shadow"> | |
| <div className="flex justify-between items-start"> | |
| <div> | |
| <p className="text-sm font-medium text-gray-500 mb-1">{title}</p> | |
| <p className="text-2xl font-bold text-gray-800">{value}</p> | |
| <div className={`flex items-center mt-2 text-sm ${change >= 0 ? 'text-green-500' : 'text-red-500'}`}> | |
| {change >= 0 ? ( | |
| <i className="fas fa-arrow-up mr-1"></i> | |
| ) : ( | |
| <i className="fas fa-arrow-down mr-1"></i> | |
| )} | |
| <span>{Math.abs(change)}% from last month</span> | |
| </div> | |
| </div> | |
| <div className={`w-12 h-12 rounded-full ${color} bg-opacity-10 flex items-center justify-center`}> | |
| <i className={`fas ${icon} ${color} text-xl`}></i> | |
| </div> | |
| </div> | |
| </div> | |
| ); | |
| }; | |
| const ProgressRing = ({ radius, stroke, progress }: { radius: number, stroke: number, progress: number }) => { | |
| const normalizedRadius = radius - stroke * 2; | |
| const circumference = normalizedRadius * 2 * Math.PI; | |
| const strokeDashoffset = circumference - progress / 100 * circumference; | |
| return ( | |
| <svg height={radius * 2} width={radius * 2} className="transform -rotate-90"> | |
| <circle | |
| stroke="currentColor" | |
| fill="transparent" | |
| strokeWidth={stroke} | |
| strokeDasharray={circumference + ' ' + circumference} | |
| style={{ strokeDashoffset }} | |
| r={normalizedRadius} | |
| cx={radius} | |
| cy={radius} | |
| className="text-blue-100" | |
| /> | |
| <circle | |
| stroke="currentColor" | |
| fill="transparent" | |
| strokeWidth={stroke} | |
| strokeDasharray={circumference + ' ' + circumference} | |
| style={{ strokeDashoffset }} | |
| r={normalizedRadius} | |
| cx={radius} | |
| cy={radius} | |
| className="text-blue-500" | |
| /> | |
| </svg> | |
| ); | |
| }; | |
| const TransactionsTable = ({ transactions }: { transactions: Transaction[] }) => { | |
| return ( | |
| <div className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden"> | |
| <div className="p-4 border-b border-gray-200 flex items-center justify-between"> | |
| <h3 className="font-medium text-gray-800">Recent Transactions</h3> | |
| <button className="text-blue-600 text-sm font-medium hover:underline"> | |
| View all | |
| </button> | |
| </div> | |
| <div className="overflow-x-auto"> | |
| <table className="min-w-full divide-y divide-gray-200"> | |
| <thead className="bg-gray-50"> | |
| <tr> | |
| <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th> | |
| <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Description</th> | |
| <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Category</th> | |
| <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th> | |
| <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th> | |
| <th scope="col" className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody className="bg-white divide-y divide-gray-200"> | |
| {transactions.map((transaction) => ( | |
| <tr key={transaction.id} className="hover:bg-gray-50"> | |
| <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{transaction.date}</td> | |
| <td className="px-6 py-4 whitespace-nowrap"> | |
| <div className="text-sm font-medium text-gray-900">{transaction.description}</div> | |
| </td> | |
| <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{transaction.category}</td> | |
| <td className={`px-6 py-4 whitespace-nowrap text-sm font-medium ${transaction.type === 'income' ? 'text-green-600' : 'text-red-600'}`}> | |
| {transaction.type === 'income' ? '+' : '-'}${Math.abs(transaction.amount).toFixed(2)} | |
| </td> | |
| <td className="px-6 py-4 whitespace-nowrap"> | |
| <span className={`px-2 py-1 text-xs rounded-full ${ | |
| transaction.status === 'completed' ? 'bg-green-100 text-green-800' : | |
| transaction.status === 'pending' ? 'bg-yellow-100 text-yellow-800' : | |
| 'bg-red-100 text-red-800' | |
| }`}> | |
| {transaction.status.charAt(0).toUpperCase() + transaction.status.slice(1)} | |
| </span> | |
| </td> | |
| <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> | |
| <button className="text-blue-600 hover:text-blue-900 mr-3">Edit</button> | |
| <button className="text-gray-600 hover:text-gray-900">View</button> | |
| </td> | |
| </tr> | |
| ))} | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| ); | |
| }; | |
| const InvoicesList = ({ invoices }: { invoices: Invoice[] }) => { | |
| return ( | |
| <div className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden"> | |
| <div className="p-4 border-b border-gray-200 flex items-center justify-between"> | |
| <h3 className="font-medium text-gray-800">Recent Invoices</h3> | |
| <button className="text-blue-600 text-sm font-medium hover:underline"> | |
| View all | |
| </button> | |
| </div> | |
| <div className="divide-y divide-gray-200"> | |
| {invoices.map((invoice) => ( | |
| <div key={invoice.id} className="p-4 hover:bg-gray-50"> | |
| <div className="flex items-center justify-between"> | |
| <div> | |
| <p className="font-medium text-gray-900">{invoice.client}</p> | |
| <p className="text-sm text-gray-500">Due {invoice.dueDate}</p> | |
| </div> | |
| <div className="text-right"> | |
| <p className="font-medium text-gray-900">${invoice.amount.toFixed(2)}</p> | |
| <span className={`text-xs px-2 py-1 rounded-full ${ | |
| invoice.status === 'paid' ? 'bg-green-100 text-green-800' : | |
| invoice.status === 'overdue' ? 'bg-red-100 text-red-800' : | |
| 'bg-yellow-100 text-yellow-800' | |
| }`}> | |
| {invoice.status.charAt(0).toUpperCase() + invoice.status.slice(1)} | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| ))} | |
| </div> | |
| </div> | |
| ); | |
| }; | |
| const FinancialChart = () => { | |
| const [timeRange, setTimeRange] = useState('month'); | |
| const data: ChartData = { | |
| labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], | |
| datasets: [ | |
| { | |
| label: 'Income', | |
| data: [12000, 19000, 15000, 18000, 21000, 19000, 23000], | |
| backgroundColor: ['rgba(59, 130, 246, 0.2)'], | |
| borderColor: ['rgba(59, 130, 246, 1)'], | |
| borderWidth: 2 | |
| }, | |
| { | |
| label: 'Expenses', | |
| data: [8000, 12000, 10000, 9000, 11000, 13000, 10000], | |
| backgroundColor: ['rgba(239, 68, 68, 0.2)'], | |
| borderColor: ['rgba(239, 68, 68, 1)'], | |
| borderWidth: 2 | |
| } | |
| ] | |
| }; | |
| // This is a simplified representation - in a real app you would use a charting library | |
| return ( | |
| <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-4"> | |
| <div className="flex items-center justify-between mb-4"> | |
| <h3 className="font-medium text-gray-800">Financial Overview</h3> | |
| <div className="flex space-x-2"> | |
| <button | |
| onClick={() => setTimeRange('week')} | |
| className={`px-3 py-1 text-xs rounded-lg ${timeRange === 'week' ? 'bg-blue-100 text-blue-600' : 'bg-gray-100 text-gray-600'}`} | |
| > | |
| Week | |
| </button> | |
| <button | |
| onClick={() => setTimeRange('month')} | |
| className={`px-3 py-1 text-xs rounded-lg ${timeRange === 'month' ? 'bg-blue-100 text-blue-600' : 'bg-gray-100 text-gray-600'}`} | |
| > | |
| Month | |
| </button> | |
| <button | |
| onClick={() => setTimeRange('year')} | |
| className={`px-3 py-1 text-xs rounded-lg ${timeRange === 'year' ? 'bg-blue-100 text-blue-600' : 'bg-gray-100 text-gray-600'}`} | |
| > | |
| Year | |
| </button> | |
| </div> | |
| </div> | |
| <div className="relative h-64"> | |
| {/* This would be replaced with a real chart component */} | |
| <div className="absolute inset-0 flex items-center justify-center text-gray-300"> | |
| <i className="fas fa-chart-line text-5xl"></i> | |
| <p className="ml-4">Chart visualization would appear here</p> | |
| </div> | |
| {/* Legend */} | |
| <div className="absolute bottom-0 left-0 right-0 flex justify-center space-x-4"> | |
| <div className="flex items-center"> | |
| <div className="w-3 h-3 bg-blue-500 rounded-full mr-2"></div> | |
| <span className="text-xs text-gray-600">Income</span> | |
| </div> | |
| <div className="flex items-center"> | |
| <div className="w-3 h-3 bg-red-500 rounded-full mr-2"></div> | |
| <span className="text-xs text-gray-600">Expenses</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| ); | |
| }; | |
| const QuickActions = () => { | |
| const actions = [ | |
| { icon: 'fa-file-invoice', label: 'Create Invoice', color: 'bg-blue-100 text-blue-600' }, | |
| { icon: 'fa-receipt', label: 'Record Expense', color: 'bg-purple-100 text-purple-600' }, | |
| { icon: 'fa-exchange-alt', label: 'Bank Transfer', color: 'bg-green-100 text-green-600' }, | |
| { icon: 'fa-file-export', label: 'Export Report', color: 'bg-yellow-100 text-yellow-600' }, | |
| ]; | |
| return ( | |
| <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-4"> | |
| <h3 className="font-medium text-gray-800 mb-4">Quick Actions</h3> | |
| <div className="grid grid-cols-2 gap-3"> | |
| {actions.map((action, index) => ( | |
| <button | |
| key={index} | |
| className={`flex flex-col items-center justify-center p-3 rounded-lg hover:shadow-md transition-shadow ${action.color}`} | |
| > | |
| <i className={`fas ${action.icon} text-xl mb-2`}></i> | |
| <span className="text-xs font-medium">{action.label}</span> | |
| </button> | |
| ))} | |
| </div> | |
| </div> | |
| ); | |
| }; | |
| const App = () => { | |
| const [sidebarOpen, setSidebarOpen] = useState(false); | |
| const financialCards: FinancialCard[] = [ | |
| { id: '1', title: 'Total Revenue', value: '$48,526', change: 12.5, icon: 'fa-dollar-sign', color: 'text-green-500' }, | |
| { id: '2', title: 'Total Expenses', value: '$26,143', change: -4.3, icon: 'fa-receipt', color: 'text-red-500' }, | |
| { id: '3', title: 'Profit', value: '$22,383', change: 8.2, icon: 'fa-chart-line', color: 'text-blue-500' }, | |
| { id: '4', title: 'Cash Flow', value: '$15,927', change: 5.7, icon: 'fa-exchange-alt', color: 'text-purple-500' }, | |
| ]; | |
| const transactions: Transaction[] = [ | |
| { id: '1', date: '2023-06-15', description: 'Website Development', amount: 4500, type: 'income', category: 'Services', status: 'completed' }, | |
| { id: '2', date: '2023-06-14', description: 'Office Rent', amount: 1200, type: 'expense', category: 'Rent', status: 'completed' }, | |
| { id: '3', date: '2023-06-13', description: 'Software Subscription', amount: 299, type: 'expense', category: 'Software', status: 'pending' }, | |
| { id: '4', date: '2023-06-12', description: 'Consulting Fee', amount: 1800, type: 'income', category: 'Services', status: 'completed' }, | |
| { id: '5', date: '2023-06-11', description: 'Marketing Campaign', amount: 750, type: 'expense', category: 'Marketing', status: 'rejected' }, | |
| ]; | |
| const invoices: Invoice[] = [ | |
| { id: '1', client: 'Acme Corp', amount: 5200, dueDate: '2023-06-20', status: 'pending' }, | |
| { id: '2', client: 'Beta LLC', amount: 3200, dueDate: '2023-06-15', status: 'paid' }, | |
| { id: '3', client: 'Gamma Inc', amount: 2800, dueDate: '2023-06-10', status: 'overdue' }, | |
| { id: '4', client: 'Delta Co', amount: 4100, dueDate: '2023-06-25', status: 'pending' }, | |
| ]; | |
| const toggleSidebar = () => setSidebarOpen(!sidebarOpen); | |
| return ( | |
| <div className="flex h-screen overflow-hidden bg-gray-50"> | |
| <Sidebar isOpen={sidebarOpen} closeSidebar={() => setSidebarOpen(false)} /> | |
| <div className="flex-1 flex flex-col overflow-hidden"> | |
| <Navbar toggleSidebar={toggleSidebar} /> | |
| <main className="flex-1 overflow-y-auto custom-scrollbar p-6"> | |
| <div className="max-w-7xl mx-auto"> | |
| {/* Financial Overview Cards */} | |
| <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"> | |
| {financialCards.map(card => ( | |
| <FinancialCard key={card.id} {...card} /> | |
| ))} | |
| </div> | |
| {/* Main Content Area */} | |
| <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> | |
| <div className="lg:col-span-2"> | |
| <FinancialChart /> | |
| </div> | |
| <div> | |
| <QuickActions /> | |
| </div> | |
| </div> | |
| {/* Bottom Section */} | |
| <div className="grid grid-cols-1 lg:grid-cols-2 gap-6"> | |
| <TransactionsTable transactions={transactions} /> | |
| <InvoicesList invoices={invoices} /> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| ); | |
| }; | |
| const root = ReactDOM.createRoot(document.getElementById('root')); | |
| root.render(<App />); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=edwarddddr/nova" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |