Dashboard - Copy this React, Tailwind Component to your project

Objective:-Develop-a-responsive-and-user-friendly-interface-for-the-School-Payments-and-Dashboard-application.-The-focus-is-on-creating-a-React-based-frontend-that-integrates-with-the-backend-APIs-to-display-and-manage-data-dynamically.-Requirements-1.-Project-Setup--Use-React.js--Set-up-a-new-project-using-Vite-or-Create-React-App.--Style-the-application-with-Tailwind-CSS-or-any-CSS-framework-of-your-choice-(e.g.,-Material-UI,-Bootstrap).--Use-Axios-for-API-calls-and-React-Router-for-navigation.-2.-Core-Features-a)-Dashboard-Pages-1.-Transactions-Overview-o-Display-a-paginated-and-searchable-list-of-all-transactions-fetched-from-the-/transactions-API.-o-Columns:--collect_id--school_id--gateway--order_amount--transaction_amount--status--custom_order_id-o-Include-a-filter-dropdown-for-status-(e.g.,-"Success",-"Pending",-"Failed").-o-Include-a-filter-for-date-wise-transactions-(e.g.,-by-selecting-a-date-range).-2.-Transaction-Details-by-School-o-Create-a-page-that-fetches-and-displays-transactions-for-a-specific-school_id.-o-Provide-a-dropdown-or-search-bar-to-select-a-school_id.-3.-Transaction-Status-Check-o-A-dedicated-page-or-modal-where-users-can-input-custom_order_id-and-retrieve-the-current-status-of-a-transaction-using-the-check-status-API.-3.-Optional-Features-(Extra-Credit)-a)-Real-time-Data-Visualization-b)-Dark-Mode--Implement-a-toggle-for-light/dark-themes.