๐ Dividend Portfolio Calendar & AI Analyst
This is a single-page web application designed to help dividend investors visualize their expected monthly income distribution and gain deeper insights into their holdings using Google's Gemini API with real-time web grounding.
The application allows users to input their stock holdings (ticker symbols and share counts) and generates a monthly dividend calendar and detailed pivot table. Crucially, it integrates an AI Analyst feature to provide financial summaries and dividend policy insights for individual stocks.
โจ Key Features
Monthly Dividend Visualization: Generates a bar chart and a detailed pivot table showing the estimated dividend income for each stock across all 12 months.
Portfolio Management: Easily add and remove stocks and their corresponding share counts from your portfolio. Data is persisted securely using Firebase Firestore.
AI-Powered Stock Analysis: Integrated with the Gemini API and Google Search grounding to provide on-demand, real-time analysis for any stock in the portfolio, summarizing its dividend history, financial outlook, and core business.
Responsive Design: Built with Tailwind CSS for a clean, responsive interface that works well on desktop and mobile devices.
Data Persistence: User portfolio data is securely saved and loaded using Firebase Authentication and Firestore.
๐ ๏ธ Technology Stack
Frontend: HTML5, JavaScript, Tailwind CSS
Charting: Plotly.js (for visualizing monthly income)
Backend/Data Storage:
Firebase Firestore: Used for persistent storage of the user's portfolio data.
Firebase Auth: Used for anonymous or custom token sign-in to secure user data.
Artificial Intelligence:
Gemini API (gemini-2.5-flash): Used for the "Dividend Analysis" feature, acting as an expert financial analyst.
Google Search Grounding: Ensures the AI analysis is based on the most up-to-date information found on the web.
๐ Getting Started
Since this application is designed to run within a specific Canvas environment, the setup assumes pre-configured Firebase and Gemini API access.
How to Use the Application
Add Stocks: In the left sidebar, enter a Stock Ticker (e.g., AAPL for US stock, 0050 or 0050.TW for Taiwanese stock) and your holding quantity in K Shares (e.g., 1.000 means 1000 shares).
Save Portfolio: Click "ๅ ๅ ฅๆธ ๅฎ" (Add to List). The portfolio is automatically saved.
Generate Calendar: Click the main button "้ๅง่จ็ฎๅๆ ๐" (Start Calculation Analysis) to generate the bar chart and detailed dividend tables based on simulated historical payout data.
Get AI Insight: Click the "โจ ่กๆฏๅๆ" (Dividend Analysis) button next to any stock in the sidebar to open the modal and receive a real-time, LLM-generated summary of its dividend profile and outlook.
๐ธ Screenshot
Note: The dividend data used in this application is simulated (MOCK_DIVIDENDS) for demonstration purposes. Users should always rely on official corporate announcements for actual payment schedules and amounts.