Dashboard - Copy this React, Tailwind Component to your project
Mother System Panel (Central Management Panel) 1. Dashboard Page Top Navigation Bar: Positioned at the top, with the logo on the left and user profile icon with a dropdown on the right. Dropdown includes options: Account Settings, Support, Logout. Left Sidebar Menu: Positioned on the left with the following menu items: Dashboard (Home) Store Owners Management License Management Transactions Reports & Analytics Settings Support Main Dashboard Section (Centered, Below Top Navigation): Quick Stats Section (top center): Display total store owners, active licenses, total transactions, total revenue. Recent Activity Feed (below Quick Stats, left side): Shows recent store owner registrations, payments, and system alerts. System Health Status (below Quick Stats, right side): Shows server status, uptime, and performance metrics. 2. Store Owners Management Page Search and Filter Bar: Positioned at the top of the page, allowing searching by name, email, or store URL. Store Owners List Table (Below Search Bar): Columns: Store Owner Name, Email, Domain, License Status, Last Payment Date, Actions. Action Buttons on each row: View, Edit, Suspend, Delete. Store Owner Details Panel (opens on the right when "View" is clicked): Store details, license status, API usage, payment methods connected, contact info. 3. License Management Page License Search and Filter Bar: Positioned at the top, allowing searching by license key, owner, or status. License List Table (Below Search Bar): Columns: License Key, Store Owner, Domain, Status, Expiry Date, Actions. Actions on each row: Renew, Revoke, Edit. Generate New License Panel (right side panel when clicked "Generate License"): Fields: Store Owner, Domain, Expiry Date, License Type, Generate Button. 4. Transactions Page Search and Filter Options: Positioned at the top, with filters for date range, payment method, status, store owner. Transactions Table (Below Filters): Columns: Transaction ID, Store Owner, Payment Method, Amount, Date, Status, Actions. Actions: View Details, Refund, Mark as Disputed. 5. Reports & Analytics Page Date Range Selector: Positioned at the top. Metrics Summary (Below Date Range Selector): Total Sales, Total Transactions, Most Used Payment Methods. Graphs and Charts Section (Below Metrics Summary): Sales Over Time, Payment Method Distribution, Revenue by Store. 6. Settings Page General Settings: Manage site settings, email configurations, payment provider settings. Security Settings: Manage API keys, enable two factor authentication, set up login alerts. Customization Settings: Change logo, color scheme, and dashboard layout preferences.
