Options Tracker - Copy this React, Tailwind Component to your project

###-**Web-Application-Description**-####-**App-Name:**-Options-Trading-Tracker-####-**Purpose:**-The-web-app-is-designed-to-help-users-manage-and-analyze-their-options-trades-efficiently.-It-enables-tracking-performance-metrics-at-both-aggregate-and-individual-strategy-levels,-providing-actionable-insights-to-optimize-trading-strategies.-The-app-incorporates-visually-intuitive-dashboards,-detailed-strategy-breakdowns,-and-a-monthly-performance-tracker-to-give-traders-a-holistic-view-of-their-trading-activity.-----###-**Key-Features**-1.-**Dashboard-Overview:**---Aggregates-performance-data-across-all-trading-strategies.---Displays-key-performance-indicators-(KPIs)-such-as-Total-P&L,-Return-on-Capital,-Win-Rate,-and-Total-Trades.---Visualizes-data-with-bar-and-pie-charts-to-highlight-trends-and-strategy-allocation.-2.-**Strategy-Specific-Analysis:**---Breaks-down-performance-by-individual-strategies.---Allows-users-to-view-open-and-closed-trades,-along-with-detailed-trade-statistics.---Includes-graphical-elements-like-cumulative-P&L-over-time-and-profit-distribution-per-trade.-3.-**Monthly-Performance-Tracker:**---Tracks-trading-results-on-a-monthly-basis.---Highlights-net-P&L,-ROI,-and-the-number-of-trades-executed.---Visualizes-performance-through-line-and-bar-charts.-4.-**Trade-Logging-and-Management:**---Enables-logging-of-new-trades-with-fields-such-as-Ticker,-Strike-Price,-Contract-Type,-and-Premium.---Allows-editing-and-closing-of-trades-directly-within-the-app.-5.-**Data-Export:**---Provides-an-option-to-export-all-trading-data-to-a-CSV-file-for-offline-analysis.-----###-**UX-Guidelines**-####-**1.-Accessibility**---Use-high-contrast-text-and-backgrounds-to-ensure-readability-for-all-users.---Ensure-all-buttons-and-interactive-elements-are-accessible-via-keyboard-navigation.---Add-alternative-text-to-icons-and-graphical-elements-for-screen-readers.-####-**2.-Simplicity-and-Clarity**---Adopt-a-minimalist-design-with-a-focus-on-clarity-and-ease-of-use.---Group-related-information-together,-using-cards-or-collapsible-sections-for-organization.---Use-intuitive-labels-and-tooltips-to-guide-users-through-the-interface.-####-**3.-Consistency**---Maintain-consistency-across-all-screens-and-components:---Fonts:-Use-a-single-sans-serif-font-(e.g.,-"Inter"-or-"Roboto")-throughout.---Colors:-Follow-a-defined-color-palette-(dark-theme-with-accent-colors-for-gains/losses).---Button-styles-and-table-layouts-should-remain-uniform-across-the-app.-####-**4.-Responsiveness**---Design-for-mobile,-tablet,-and-desktop-screens.---Use-responsive-components-that-adapt-to-different-screen-sizes-without-losing-functionality.-####-**5.-Interactivity**---Include-hover-effects-for-buttons,-table-rows,-and-graphical-data-points-to-provide-immediate-feedback.---Use-dropdowns-and-modals-for-actions-such-as-filtering,-adding-trades,-and-editing-strategies.-####-**6.-Data-Visualization**---Use-clear,-visually-distinct-charts-to-communicate-complex-data:---Line-charts-for-cumulative-P&L-trends.---Bar-charts-for-monthly-performance.---Pie-charts-for-strategy-allocation.-####-**7.-User-Feedback**---Display-success/error-notifications-for-user-actions-(e.g.,-"Trade-added-successfully").---Include-a-progress-indicator-when-data-is-loading.-####-**8.-Filtering-and-Search**---Allow-users-to-filter-trades-by-strategy,-month,-and-status.---Implement-a-global-search-bar-to-quickly-find-specific-trades-or-strategies.-####-**9.-Modularity**---Design-components-(e.g.,-KPIs,-tables,-charts)-as-modular-elements-to-facilitate-future-updates-and-scalability.-----###-**Page-Flow**-1.-**Login-Page:**---Simple-login-form-with-fields-for-username-and-password.---Option-to-remember-login-credentials.-2.-**Dashboard:**---Hero-section-with-KPIs.---Graphical-representation-of-overall-performance.---Strategy-performance-table.-3.-**Strategy-View:**---Select-a-strategy-from-a-dropdown-or-sidebar.---Display-open/closed-trades-in-separate-tabs.---Show-cumulative-P&L-and-profit-distribution-charts.-4.-**Monthly-Overview:**---Choose-a-month-from-a-dropdown.---Display-key-metrics-and-graphs-for-the-selected-month.---Provide-a-detailed-table-of-trades-executed-in-that-month.-5.-**Trade-Management:**---Dedicated-form-for-adding/editing-trades.---Action-buttons-for-closing-trades-or-exporting-data.-----###-**Design-System**-####-**Colors:**---**Background:**-Dark-navy-(#10161E).---**Text:**---Primary:-White-(#FFFFFF).---Secondary:-Light-gray-(#B0BEC5).---**Positive-Gains:**-Green-(#4CAF50).---**Negative-Gains:**-Red-(#E53935).---**Graphs:**-Use-a-palette-of-blue,-orange,-and-yellow-for-distinction.-####-**Typography:**---Font-Family:-"Inter"-or-"Roboto."---Font-Sizes:---Large-for-headers-and-KPIs-(24px+).---Medium-for-tables-and-charts-(16px–20px).---Small-for-secondary-details-and-notes-(12px–14px).-####-**Buttons:**---Primary-Buttons:-Bold-green-with-white-text.---Secondary-Buttons:-Light-gray-with-dark-text.-####-**Graphs-and-Charts:**---Use-**Chart.js**-or-**Recharts**-for-responsive-data-visualization.---Add-tooltips-for-precise-data-points-on-hover.-####-**Tables:**---Fixed-headers-for-scrollable-tables.---Highlight-rows-based-on-trade-status-(green-for-profit,-red-for-loss).-----This-description-ensures-that-the-web-app-is-both-visually-appealing-and-functionally-robust.-It-aligns-with-modern-UX-principles-while-tailoring-to-your-specific-trading-needs.-Let-me-know-if-you’d-like-to-expand-on-any-section-or-make-adjustments!