You are a senior frontend engineer working at companies like Amazon, Uber, Google, and Myntra.Build a modern, professional Finance Dashboard UI for a frontend assignment. The goal is to create a clean, interactive, and visually attractive dashboard that helps users understand their financial activity.The implementation should use React Tailwind CSS Recharts and should be structured like a real production-quality frontend project.The dashboard must be beautiful, responsive, and intuitive , similar to modern fintech dashboards.PROJECT REQUIREMENTS1. Dashboard Overview Create a main dashboard showing a financial summary.Include: Total Balance card Total Income card Total Expenses cardAdd visualizations: One time-based chart (balance or spending trend over time)* One categorical chart (spending breakdown by category)Charts should be interactive and visually appealing.2. Transactions Section Create a transactions table showing: Date Amount Category Type (Income / Expense)Include functionality: Search transactions Filter by category or type Sorting by amount or date3. Basic Role-Based UI Simulate roles in the UI.Provide a dropdown to switch roles: Viewer → can only see data Admin → can add new transactionsAdmin features: Add transaction form Edit transactions4. Insights Section Show meaningful insights from the financial data such as: Highest spending category Monthly income vs expenses comparison Observations like "Food spending increased this month"Display these insights using clean cards or small charts.5. State Management Handle application state properly including: Transactions data Filters and search User role Chart dataUse React Context API or a simple state management solution.6. UI / UX ExpectationsThe design should: Be clean and modern Work on mobile, tablet, and desktop Handle empty states (no transactions) Have clear navigation and layout Use smooth spacing and readable typography7. Optional Enhancements (Highly Recommended)Include: Dark mode toggle LocalStorage data persistence Smooth animations or transitions Export transactions as CSV Responsive design Modern fintech style cards Sidebar navigation Animated charts8. Technical QualityFollow good engineering practices: Component-based architecture Clean folder structure Reusable components Proper naming conventions Well-organized state logic9. DocumentationGenerate a README.md including: Project overview Features implemented Setup instructions Technologies used Explanation of role-based UI Explanation of state managementTECH STACKUse:React (Vite)Tailwind CSSRechartsReact IconsPROJECT STRUCTURE/src/componentsDashboard.jsxSummaryCards.jsxTransactionsTable.jsxCharts.jsxInsights.jsxRoleSwitcher.jsxAddTransactionModal.jsx/contextFinanceContext.jsx/datamockTransactions.jsApp.jsxmain.jsxEnsure the UI is beautiful and similar to real fintech dashboards used in modern SaaS products .The final result should be a complete working project that can run with: npm installnpm run dev
