340 lines
16 KiB
TypeScript
340 lines
16 KiB
TypeScript
|
|
import React from 'react';
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Progress } from '@/components/ui/progress';
|
|
import {
|
|
TrendingUp,
|
|
TrendingDown,
|
|
Wallet,
|
|
Target,
|
|
CreditCard,
|
|
PiggyBank,
|
|
AlertTriangle,
|
|
CheckCircle,
|
|
ArrowUpRight,
|
|
ArrowDownRight,
|
|
PieChart
|
|
} from 'lucide-react';
|
|
|
|
const Dashboard: React.FC = () => {
|
|
const portfolioData = {
|
|
totalValue: 9850000, // ₹98.5 lakhs
|
|
change: 3.2,
|
|
isPositive: true
|
|
};
|
|
|
|
const budgetData = {
|
|
spent: 45000, // ₹45,000
|
|
budget: 65000, // ₹65,000
|
|
categories: [
|
|
{ name: 'Food & Groceries', spent: 12500, budget: 18000 },
|
|
{ name: 'Transportation', spent: 8500, budget: 12000 },
|
|
{ name: 'Entertainment', spent: 6000, budget: 8000 },
|
|
{ name: 'Shopping & Bills', spent: 18000, budget: 27000 }
|
|
]
|
|
};
|
|
|
|
const savingsGoals = [
|
|
{ name: 'Emergency Fund', current: 450000, target: 800000, color: 'from-green-400 to-green-600' }, // ₹4.5L to ₹8L
|
|
{ name: 'Goa Trip', current: 85000, target: 150000, color: 'from-blue-400 to-blue-600' }, // ₹85K to ₹1.5L
|
|
{ name: 'New Car (Tata Nexon)', current: 620000, target: 1200000, color: 'from-purple-400 to-purple-600' } // ₹6.2L to ₹12L
|
|
];
|
|
|
|
const creditScore = 768; // Good CIBIL score range in India
|
|
const creditUtilization = 28;
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* Enhanced Welcome Header */}
|
|
<div className="fade-in">
|
|
<Card className="widget mb-8 overflow-hidden relative">
|
|
<div className="absolute inset-0 bg-gradient-to-br from-blue-50 via-cyan-50 to-purple-50 opacity-60"></div>
|
|
<div className="absolute top-0 right-0 w-64 h-64 bg-gradient-to-bl from-blue-400/10 to-cyan-400/10 rounded-full blur-3xl -translate-y-32 translate-x-32"></div>
|
|
<div className="absolute bottom-0 left-0 w-48 h-48 bg-gradient-to-tr from-purple-400/10 to-pink-400/10 rounded-full blur-3xl translate-y-24 -translate-x-24"></div>
|
|
|
|
<CardContent className="p-4 lg:p-8 relative z-10">
|
|
<div className="flex flex-col lg:flex-row lg:items-center lg:justify-between space-y-6 lg:space-y-0">
|
|
<div className="space-y-4">
|
|
<div className="flex items-center space-x-3 lg:space-x-4">
|
|
<div className="w-14 h-14 lg:w-16 lg:h-16 rounded-full bg-gradient-to-br from-blue-500 to-cyan-600 flex items-center justify-center shadow-lg flex-shrink-0">
|
|
<span className="text-xl lg:text-2xl font-bold text-white">A</span>
|
|
</div>
|
|
<div className="min-w-0 flex-1">
|
|
<h1 className="text-xl sm:text-2xl lg:text-4xl font-bold bg-gradient-to-r from-gray-900 via-blue-800 to-cyan-600 bg-clip-text text-transparent leading-tight">
|
|
Good {new Date().getHours() < 12 ? 'morning' : new Date().getHours() < 17 ? 'afternoon' : 'evening'}, Anjali!
|
|
<span className="ml-1 lg:ml-2 inline-block">
|
|
{new Date().getHours() < 12 ? '🌅' : new Date().getHours() < 17 ? '☀️' : '🌙'}
|
|
</span>
|
|
</h1>
|
|
<p className="text-sm lg:text-lg text-muted-foreground mt-1">
|
|
{new Date().toLocaleDateString('en-IN', {
|
|
weekday: 'long',
|
|
year: 'numeric',
|
|
month: 'long',
|
|
day: 'numeric'
|
|
})}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-col sm:flex-row sm:items-center sm:space-x-4 lg:space-x-6 space-y-2 sm:space-y-0 mt-4">
|
|
<div className="flex items-center space-x-2">
|
|
<div className="w-2 h-2 bg-green-500 rounded-full animate-pulse flex-shrink-0"></div>
|
|
<span className="text-xs lg:text-sm font-medium text-green-700">Portfolio growing strong</span>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<CheckCircle className="w-4 h-4 lg:w-4 lg:h-4 text-blue-500 flex-shrink-0" />
|
|
<span className="text-xs lg:text-sm font-medium text-blue-700">3 goals on track</span>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<Target className="w-4 h-4 lg:w-4 lg:h-4 text-purple-500 flex-shrink-0" />
|
|
<span className="text-xs lg:text-sm font-medium text-purple-700">₹2.4K savings this month</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="lg:text-right space-y-2 flex-shrink-0">
|
|
<div className="lg:text-right">
|
|
<p className="text-sm text-muted-foreground">Net Worth</p>
|
|
<p className="text-2xl lg:text-3xl font-bold bg-gradient-to-r from-green-600 to-emerald-600 bg-clip-text text-transparent">
|
|
₹{(portfolioData.totalValue / 100000).toFixed(1)}L
|
|
</p>
|
|
<div className="flex items-center lg:justify-end mt-1">
|
|
<ArrowUpRight className="w-4 h-4 text-green-500 mr-1 flex-shrink-0" />
|
|
<span className="text-sm font-medium text-green-600">+₹15.2K today</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-4 p-3 bg-white/50 rounded-lg border border-white/20 backdrop-blur-sm">
|
|
<p className="text-xs text-muted-foreground mb-1">Today's Financial Score</p>
|
|
<div className="flex items-center space-x-2">
|
|
<div className="w-8 h-8 rounded-full bg-gradient-to-br from-yellow-400 to-orange-500 flex items-center justify-center flex-shrink-0">
|
|
<span className="text-xs font-bold text-white">A+</span>
|
|
</div>
|
|
<div>
|
|
<p className="text-sm font-semibold">Excellent</p>
|
|
<p className="text-xs text-muted-foreground">Keep it up!</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Quick Action Bar */}
|
|
<div className="mt-6 pt-6 border-t border-white/20">
|
|
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between space-y-3 sm:space-y-0">
|
|
<p className="text-sm font-medium text-muted-foreground">Quick Actions</p>
|
|
<div className="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-3">
|
|
<Button size="sm" variant="outline" className="bg-white/50 border-white/30 hover:bg-white/70">
|
|
💰 Add Income
|
|
</Button>
|
|
<Button size="sm" variant="outline" className="bg-white/50 border-white/30 hover:bg-white/70">
|
|
📊 View Report
|
|
</Button>
|
|
<Button size="sm" variant="outline" className="bg-white/50 border-white/30 hover:bg-white/70">
|
|
🎯 Set Goal
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Key Metrics Row */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 slide-up">
|
|
<Card className="widget">
|
|
<CardContent className="p-4 lg:p-6">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm font-medium text-muted-foreground">Portfolio Value</p>
|
|
<p className="text-xl lg:text-2xl font-bold">₹{(portfolioData.totalValue / 100000).toFixed(1)}L</p>
|
|
<div className="flex items-center mt-1">
|
|
{portfolioData.isPositive ? (
|
|
<TrendingUp className="w-4 h-4 text-green-500 mr-1" />
|
|
) : (
|
|
<TrendingDown className="w-4 h-4 text-red-500 mr-1" />
|
|
)}
|
|
<span className={`text-sm ${portfolioData.isPositive ? 'text-green-500' : 'text-red-500'}`}>
|
|
{portfolioData.change}%
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div className="w-10 h-10 lg:w-12 lg:h-12 rounded-xl bg-gradient-to-br from-green-400 to-green-600 flex items-center justify-center">
|
|
<TrendingUp className="w-5 h-5 lg:w-6 lg:h-6 text-white" />
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="widget">
|
|
<CardContent className="p-4 lg:p-6">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm font-medium text-muted-foreground">Monthly Budget</p>
|
|
<p className="text-xl lg:text-2xl font-bold">₹{budgetData.spent.toLocaleString()}</p>
|
|
<p className="text-sm text-muted-foreground">of ₹{budgetData.budget.toLocaleString()}</p>
|
|
</div>
|
|
<div className="w-10 h-10 lg:w-12 lg:h-12 rounded-xl bg-gradient-to-br from-blue-400 to-blue-600 flex items-center justify-center">
|
|
<Wallet className="w-5 h-5 lg:w-6 lg:h-6 text-white" />
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="widget">
|
|
<CardContent className="p-4 lg:p-6">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm font-medium text-muted-foreground">Credit Score</p>
|
|
<p className="text-xl lg:text-2xl font-bold">{creditScore}</p>
|
|
<p className="text-sm text-green-500">Excellent</p>
|
|
</div>
|
|
<div className="w-10 h-10 lg:w-12 lg:h-12 rounded-xl bg-gradient-to-br from-purple-400 to-purple-600 flex items-center justify-center">
|
|
<CreditCard className="w-5 h-5 lg:w-6 lg:h-6 text-white" />
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="widget">
|
|
<CardContent className="p-4 lg:p-6">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm font-medium text-muted-foreground">Savings Rate</p>
|
|
<p className="text-xl lg:text-2xl font-bold">28%</p>
|
|
<p className="text-sm text-green-500">Above target</p>
|
|
</div>
|
|
<div className="w-10 h-10 lg:w-12 lg:h-12 rounded-xl bg-gradient-to-br from-cyan-400 to-cyan-600 flex items-center justify-center">
|
|
<PiggyBank className="w-5 h-5 lg:w-6 lg:h-6 text-white" />
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Main Content Grid */}
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4 lg:gap-6">
|
|
{/* Budget Overview */}
|
|
<Card className="widget">
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center">
|
|
<PieChart className="w-5 h-5 mr-2 text-primary" />
|
|
Budget Overview
|
|
</CardTitle>
|
|
<CardDescription>Track your spending across categories</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-4">
|
|
{budgetData.categories.map((category, index) => (
|
|
<div key={index} className="space-y-2">
|
|
<div className="flex justify-between text-sm">
|
|
<span className="font-medium">{category.name}</span>
|
|
<span className="text-muted-foreground">
|
|
₹{category.spent.toLocaleString()} / ₹{category.budget.toLocaleString()}
|
|
</span>
|
|
</div>
|
|
<Progress
|
|
value={(category.spent / category.budget) * 100}
|
|
className="h-2"
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<Button variant="outline" className="w-full mt-4 glass-button">
|
|
View Detailed Budget
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Savings Goals */}
|
|
<Card className="widget">
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center">
|
|
<Target className="w-5 h-5 mr-2 text-primary" />
|
|
Savings Goals
|
|
</CardTitle>
|
|
<CardDescription>Track progress towards your financial goals</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-4">
|
|
{savingsGoals.map((goal, index) => (
|
|
<div key={index} className="space-y-2">
|
|
<div className="flex justify-between text-sm">
|
|
<span className="font-medium">{goal.name}</span>
|
|
<span className="text-muted-foreground">
|
|
₹{(goal.current / 100000).toFixed(1)}L / ₹{(goal.target / 100000).toFixed(1)}L
|
|
</span>
|
|
</div>
|
|
<div className="w-full bg-gray-200 rounded-full h-3 overflow-hidden">
|
|
<div
|
|
className={`h-full bg-gradient-to-r ${goal.color} transition-all duration-500`}
|
|
style={{ width: `${(goal.current / goal.target) * 100}%` }}
|
|
></div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<Button variant="outline" className="w-full mt-4 glass-button">
|
|
Manage Goals
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* AI Recommendations */}
|
|
<Card className="widget">
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center">
|
|
<CheckCircle className="w-5 h-5 mr-2 text-primary" />
|
|
AI Recommendations
|
|
</CardTitle>
|
|
<CardDescription>Personalized insights to improve your financial health</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
|
|
<div className="p-4 rounded-lg bg-green-50 border border-green-200">
|
|
<div className="flex items-start">
|
|
<ArrowUpRight className="w-5 h-5 text-green-600 mr-2 mt-0.5" />
|
|
<div>
|
|
<h4 className="font-semibold text-green-800">Optimize Savings</h4>
|
|
<p className="text-sm text-green-700 mt-1">
|
|
Cancel unused Hotstar subscription to save ₹1,499/year
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="p-4 rounded-lg bg-blue-50 border border-blue-200">
|
|
<div className="flex items-start">
|
|
<TrendingUp className="w-5 h-5 text-blue-600 mr-2 mt-0.5" />
|
|
<div>
|
|
<h4 className="font-semibold text-blue-800">Investment Opportunity</h4>
|
|
<p className="text-sm text-blue-700 mt-1">
|
|
Consider rebalancing portfolio for better diversification
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="p-4 rounded-lg bg-purple-50 border border-purple-200">
|
|
<div className="flex items-start">
|
|
<CreditCard className="w-5 h-5 text-purple-600 mr-2 mt-0.5" />
|
|
<div>
|
|
<h4 className="font-semibold text-purple-800">Credit Optimization</h4>
|
|
<p className="text-sm text-purple-700 mt-1">
|
|
Pay down credit card to improve utilization ratio
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Dashboard;
|