Stock Analysis - Copy this React, Tailwind Component to your project
Redesign the stock analysis page for symbol 'ACB' using the following APIs data, focusing on creating a professional, modern, and scalable interface with clean code and detailed UI descriptions for each component: Data to display: General company info: 'organ_name', 'exchange', 'industry', 'company_type', 'no_shareholders', 'foreign_percent', 'outstanding_share', 'issue_share', 'established_year', 'no_employees', 'short_name', 'company_profile', 'business_risk', 'key_developments', 'business_strategies'. Shareholder details: 'share_holder', 'share_own_percent'. Transaction data: 'deal_announce_date', 'deal_action', 'deal_quantity', 'deal_price', 'deal_ratio'. Subsidiary information: 'sub_company_name', 'sub_own_percent'. Officers: 'officer_name', 'officer_position', 'officer_own_percent'. Technical indicators: Include multiple indicators (e.g., RSI, BB, MACD, MA), not just RSI. Financial data: Balance sheet: 'total_assets', 'total_liabilities', 'shareholder_equity', etc. Income statement: 'revenue', 'net_income', 'operating_expense', etc. Cash flow: 'operating_cash_flow', 'investing_cash_flow', 'financing_cash_flow', etc. Ratios: 'p_e', 'p_s', 'roe', 'roa', 'dividend_yield', etc. Historical stock prices: 'time', 'open', 'high', 'low', 'close', 'volume'. Live trade data: 'price', 'volume', 'match_type', 'acc_volume', 'acc_buy_volume', 'acc_sell_volume'. UI/UX Specifications: Header and Navigation Bar: Clean, minimalist header with the company logo, stock ticker (e.g., "ACB"), and primary navigation links (e.g., Overview, Financials, Indicators, Shareholders, Transactions). Company Profile Section: A well-organized card or grid view with basic company details. Use light background colors, modern fonts, and plenty of white space for readability. Stock Price Chart: Interactive chart component (e.g., TradingView) with historical and live stock prices. Users can toggle different timeframes (1D, 1W, 1M, 6M, YTD). Ensure smooth transitions between views. Financial Data Section: Display the balance sheet, income statement, cash flow, and financial ratios in separate tabs. Each tab should feature a clean table with proper spacing, alternating row colors, and a floating action bar for quick export to Excel or CSV. Technical Indicators Section: Display multiple technical indicators (e.g., RSI, MACD, BB) in an accordion format. Each indicator has a small, focused chart and a brief description. Shareholder Information Section: List major shareholders with a graphical representation (e.g., pie chart) of ownership percentage for clear visualization. Transaction Section: Display recent transactions in a clean table format with sortable columns (e.g., Date, Action, Quantity, Price). Expandable/Collapsible Sidebar: For additional tools and reports, include an intuitive sidebar that can be expanded or collapsed. It should have options for custom reports, downloadable PDFs, and more detailed company analysis. Code Structure and Clean Code Guidelines: Use React for frontend with modular, reusable components. Each component (e.g., company details, stock chart, financial data tabs) should be isolated for easy maintenance and scalability. CSS-in-JS or Styled Components for custom styling, ensuring the design remains responsive and consistent across different screen sizes. Follow SOLID principles to keep the codebase clean and maintainable. Use TypeScript for type safety, ensuring better scalability. Make sure the design is responsive and optimized for mobile, tablet, and desktop views. Implement lazy loading and code splitting for enhanced performance. Focus on clean UI and smooth user experience.
