Personal Finance Dashboard - Copy this Html, Tailwind Component to your project
Modern dashboard interface for a Personal Finance Tracker. Below is a detailed description to help replicate the image using an AI agent or graphic design tool: Key Sections and Features: Header Section: Top Left Logo: A stylized logo with the name “Other Level’s” beside it, showing the branding of the application. Current Balance: Displays "Available Balance: $14,822" in a prominent light blue color. Date: On the top right corner, the current date is "Sunday, February 5, 2023". User Profile: Displays a circular user profile picture with the name "Simon K. Jimmy" and the job title “Mortgage Consultant.” Menu Options: Options for "Dashboard" and "Spreadsheet" are in the middle top of the dashboard. Side Navigation (Left Sidebar): A vertical navigation bar with month names (Jan, Feb, Mar, etc.) allowing the user to select and navigate different periods. Currently, "Jun" is highlighted. Main Content Sections: Total Net Worth: Large block displaying "Total Net Worth: $278,378" in a gradient color (orange to pink) with an eye catching rounded rectangle. Spendings Overview: Section for “Spendings” showing a total amount of $9,228, with a small line graph showing spending fluctuations. Category wise Spendings: Displays spendings in 3 categories: Housing: $3,452 (Icon of a house) Personal: $45,581 (Icon of people) Transportation: $2,190 (Icon of a car) Income Details: Income Sources: A bar graph breaking down income by source: E commerce: $2,100 Google AdSense: $950 My Shop: $8,000 Salary: $13,000 (Green bar to differentiate from others). Income Graph: A simple line graph displaying total income of $24,050 with month wise fluctuations. Goal Tracking: Income Goal Progress: Displays a progress bar showing “61% Income Goal” achieved, with a current progress of "$24,050 / $39,276". A purple progress bar visualizes this. Notifications and Reminders: Reminder Section: A notification panel on the right hand side indicating "3 Bills are past due. Pay soon to avoid late fees." Pet related Expenses: A breakdown of expenses for pets under the label "Expenses for My Dogs and Cats". This includes: Routine Vet: 140 Food: 950 Food Treats: 231 Kennel Boarding: 65 There’s a small cartoon dog icon near this section. Income & Expenses Graph: A graph that tracks Income & Expenses over time, displaying peaks and dips with the label “Max Expenses: $20,239 / Max Income: $20,239”. The graph has dotted lines for income and solid lines for expenses. Assets: A pie chart showing asset distribution: Gold: $15,700 Stock: $22,500 Warehouse: $120,000 Land: $135,000 Different colors are used to visually segment each asset category. Design Elements: Color Palette: Dark theme with navy blue and dark gray as the background. Bright and vibrant accent colors (light blue, orange, pink, green, and purple) for text and charts. Typography: Clean, modern sans serif fonts are used. Bold typography for headers like “Available Balance,” “Total Net Worth,” and other section titles. Icons: Simple icons representing categories such as housing, personal, transportation, and notifications, along with a profile picture. Instructions for AI Agent Replication: Create a dark themed dashboard layout with key financial metrics. Header should include a user profile picture, current date, and branding/logo with navigation options (e.g., "Dashboard," "Spreadsheet"). Side Navigation should include clickable months (Jan–Dec) on the left side. Main Metrics to display: Available Balance Total Net Worth Spending categories (with small icons) Income sources with a bar chart. Visual Elements: Pie chart for asset distribution. Line graph to show income and expenses over time. Notifications and reminders section for bills. Use bright accent colors (light blue, purple, green, orange) over a dark background to create contrast. Add icons and playful graphics (e.g., a cartoon dog for pet related expenses).
