Neeharika

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