I'll create a comprehensive personal finance dashboard with all the components you requested. This will use the modern shadcn sidebar components and include interactive charts, transaction management, and financial tracking features.

I've created a comprehensive personal finance dashboard that includes all the components you requested:

Key Features:

Modern Sidebar Navigation

• Uses the new shadcn sidebar components for a clean, collapsible navigation
• Organized menu items for different financial sections

Clean Header & User Profile

• App logo with branding
• User profile dropdown with account management options
• Notification bell for alerts

Financial Overview

• Personalized welcome message with quick action buttons
• Net worth display with percentage change indicators
• Key metrics cards showing income, expenses, and savings rate

Interactive Data Visualizations

• Income vs Expenses bar chart showing 6-month trends
• Spending categories pie chart for expense breakdown
• Investment portfolio allocation visualization

Financial Goal Tracking

• Progress bars for multiple financial goals
• Current vs target amounts with completion percentages
• Visual progress indicators

Transaction Management

• Searchable and filterable transaction history
• Categorized transactions with color-coded amounts
• Clean table layout with sorting capabilities

Bills & Payments

• Upcoming bills section with due dates
• Quick payment buttons for each bill
• Status indicators for pending payments

Investment Portfolio

• Asset allocation pie chart
• Portfolio performance metrics
• Detailed breakdown by asset type

Actionable Insights

• Personalized financial tips based on spending patterns
• Color-coded alerts and recommendations
• Contextual advice for improving financial health

The dashboard uses a clean, accessible design with:

• Consistent color scheme with semantic colors (green for positive, red for negative)
• Clear visual hierarchy with proper spacing and typography
• Responsive layout that works on different screen sizes
• Interactive elements with hover states and proper accessibility

All charts are built using Recharts with the shadcn chart components for consistency and interactivity. The data is structured to be easily replaceable with real financial data from your backend.

I'll adapt the finance dashboard to be optimized for iPhone 15 screen width with a mobile-first responsive design.

I've optimized the finance dashboard for iPhone 15 screen width (393px) with these key mobile-first improvements:

Mobile Optimizations:

Responsive Layout

• Single-column layout for all sections
• 2x2 grid for key metrics cards to fit mobile width
• Reduced padding and spacing throughout

Mobile-Friendly Header

• Compact 56px height header
• Smaller avatar and icons
• Condensed user dropdown

Sidebar Enhancements

• Uses shadcn sidebar's mobile behavior (sheet overlay)
• Smaller icons and text sizes
• Compact navigation items

Chart Adaptations

• Smaller chart containers (200px height for bar charts, 180px for pie charts)
• Responsive chart components that scale properly
• Simplified chart margins and tick sizes

Card Layout Improvements

• Reduced card padding (12px instead of 24px)
• Compact card headers with smaller titles
• Abbreviated values (e.g., "$87.4K" instead of "$87,450")

Transaction List

• Stacked layout instead of table for better mobile readability
• Truncated descriptions with proper overflow handling
• Compact badges and date formatting

Touch-Friendly Elements

• Larger touch targets for buttons
• Proper spacing between interactive elements
• Scroll area for main content to prevent layout issues

Content Prioritization

• Most important information (net worth, key metrics) at the top
• Logical flow for mobile scrolling
• Condensed insights with shorter text

The dashboard now fits perfectly within iPhone 15's screen width while maintaining all functionality and visual appeal. The sidebar collapses into a mobile-friendly overlay, and all charts and data visualizations are optimized for the smaller screen size.