diff --git a/NAVIGATION_AUDIT.md b/NAVIGATION_AUDIT.md new file mode 100644 index 0000000..78be92e --- /dev/null +++ b/NAVIGATION_AUDIT.md @@ -0,0 +1,70 @@ +# Navigation & Route Audit +Last Updated: 2026-02-16 + +## ✅ Working Routes +| Page/Component | Element | Route/Action | Status | +|----------------|---------|--------------|--------| +| Layout | "Home", "Portfolio", "Budget", etc. | `onSectionChange` (State) | ✅ Working | +| Layout | "Logout" | `onLogout` (Auth Hook) | ✅ Working | +| Profile | "Theme Switcher" | `setTheme` (Context) | ✅ Working | +| Savings | "Calculator" (Sliders/Input) | Local State | ✅ Working | +| Dashboard | "HeroStats" (Cards) | Display Only | ✅ Working | +| Portfolio | "Risk Analysis" (Cards) | Display Only | ✅ Working | + +## ❌ Non-Functional Elements +These elements are visually present but lack `onClick` handlers or backend integration. + +| Page/Component | Element | Expected Action | Issue | +|----------------|---------|-----------------|-------| +| **Dashboard** | | | | +| `TransactionsList` | "View All Transactions" button | `onSectionChange('budget')` or route | No handler | +| `GoalsList` | "Manage Goals" button | `onSectionChange('goals')` | No handler | +| `QuickActions` | "New Investment" card | Open Modal / Navigate | No handler | +| `QuickActions` | "Set Goals" card | Open Modal / Navigate | No handler | +| `QuickActions` | "View Reports" card | Open Modal / Navigate | No handler | +| `QuickActions` | "Savings Plan" card | Navigate to `savings` | No handler | +| **Portfolio** | | | | +| `QuickInvestmentForm` | "Buy Asset" button | Execute Trade / Modal | No handler | +| `QuickInvestmentForm` | "Sell Asset" button | Execute Trade / Modal | No handler | +| `HoldingsTable` | "+" / "-" Action buttons | Modify Position | No handler | +| **Budget** | | | | +| `AddExpenseForm` | "Add Expense" button | Submit Form | No handler | +| `SetBudgetForm` | "Set Budget" button | Submit Form | No handler | +| **Savings** | | | | +| `SavingsGoalsGrid` | "+1K", "+5K", "Custom" buttons | Add Funds | No handler | +| `SavingsAccountsTable` | "Settings" (Gear icon) | Open Settings | No handler | +| `AddGoalForm` | "Create Savings Goal" button | Submit Form | No handler | +| **Credit** | | | | +| `CreditCardsList` | "Pay Custom" button | Payment Modal | No handler | +| `CreditCardsList` | "Pay Min" button | Payment Modal | No handler | +| `CreditCardsList` | "More" (Three dots) button | Menu / Details | No handler | +| **Commitments** | | | | +| `UpcomingCommitments` | "Mark Paid" (Check) button | Update Status | No handler | +| `UpcomingCommitments` | "Delete" (Trash) button | Remove Item | No handler | +| `UpcomingCommitments` | "View All History" button | Navigate / Modal | No handler | +| `CommitmentAITips` | "View Credit Impact" button | Navigate / Modal | No handler | +| `CommitmentCalendar` | "Mark Paid" / "Delete" buttons | Update/Remove | No handler | +| `AddCommitmentForm` | "Add Commitment" button | Submit Form | No handler | + +## 🚧 Placeholder Buttons (No Action) +| Page/Component | Element | Notes | +|----------------|---------|-------| +| Dashboard | Hero Stat Cards | Could link to respective modules (e.g., Portfolio Value -> Portfolio) | +| Dashboard | "Recent Transactions" Items | Could broaden transaction details modal | +| Savings | "Savings Accounts" Items | Could open account details | +| Credit | "Credit Cards" Items | Could open card details/statements | + +## 📋 Recommended Actions +**High Priority:** +- [ ] **Dashboard Navigation:** Wire up `QuickActions` to navigate to respective modules (e.g., "New Investment" -> Portfolio, "Savings Plan" -> Savings). +- [ ] **View All buttons:** Connect "View All Transactions" to the specific transaction history view (or Budget module). +- [ ] **Forms:** Implement `onSubmit` handlers (even if just `console.log` + toast) for "Add Expense", "Set Budget", "Add Commitment", and "Add Goal". + +**Medium Priority:** +- [ ] **Interactive Actions:** Implement "Pay Min/Custom" logic in Credit Manager (show a payment success toast). +- [ ] **List Actions:** Implementation delete/mark-paid logic for Commitments (update local state). +- [ ] **Investment:** Add basic validation/toast for "Buy/Sell" in Portfolio. + +**Low Priority:** +- [ ] **Deep Linking:** Check/Trash buttons in tables. +- [ ] **Settings:** Account-level settings in Savings module. diff --git a/dist.tar.gz b/dist.tar.gz index 9a507cf..e92013b 100644 Binary files a/dist.tar.gz and b/dist.tar.gz differ diff --git a/src/components/Dashboard.tsx b/src/components/Dashboard.tsx index 26f04d0..3a75af8 100644 --- a/src/components/Dashboard.tsx +++ b/src/components/Dashboard.tsx @@ -12,7 +12,11 @@ import InvestmentPerformance from './dashboard/InvestmentPerformance'; import AIInsights from './dashboard/AIInsights'; import QuickActions from './dashboard/QuickActions'; -const Dashboard: React.FC = () => { +interface DashboardProps { + onNavigate?: (section: string) => void; +} + +const Dashboard: React.FC = ({ onNavigate }) => { // Hardcoded Header Data as per Target Design Reference const currentDate = "Sunday, February 15, 2026"; const monthlyWealthGrowth = "425,600"; // AED value @@ -63,12 +67,12 @@ const Dashboard: React.FC = () => {
{/* Left Column: Recent Transactions */}
- +
{/* Right Column: Financial Goals */}
- +
@@ -88,7 +92,7 @@ const Dashboard: React.FC = () => { {/* Footer Actions */}

Quick Actions

- +
); diff --git a/src/components/budget/AddExpenseForm.tsx b/src/components/budget/AddExpenseForm.tsx index 48d77b5..9fecfbd 100644 --- a/src/components/budget/AddExpenseForm.tsx +++ b/src/components/budget/AddExpenseForm.tsx @@ -7,7 +7,26 @@ import { Label } from '@/components/ui/label'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { DirhamIcon } from '@/components/ui/custom-icons'; +import { toast } from 'sonner'; + const AddExpenseForm: React.FC = () => { + const handleAddExpense = () => { + const amount = (document.getElementById('amount') as HTMLInputElement).value; + const desc = (document.getElementById('desc') as HTMLInputElement).value; + const category = (document.getElementById('category') as HTMLButtonElement | null)?.innerText || "Category"; + + if (!amount || !desc) { + toast.error("Please fill in amount and description"); + return; + } + + toast.success(`Expense Added: AED ${amount} to ${category}`); + + // Clear + (document.getElementById('amount') as HTMLInputElement).value = ''; + (document.getElementById('desc') as HTMLInputElement).value = ''; + }; + return (
@@ -45,7 +64,10 @@ const AddExpenseForm: React.FC = () => {
- diff --git a/src/components/budget/BudgetGoalPlanning.tsx b/src/components/budget/BudgetGoalPlanning.tsx new file mode 100644 index 0000000..1147203 --- /dev/null +++ b/src/components/budget/BudgetGoalPlanning.tsx @@ -0,0 +1,162 @@ +import React, { useState } from 'react'; +import { GlassCard } from '@/components/ui/GlassCard'; +import { Button } from '@/components/ui/button'; +import { Switch } from '@/components/ui/switch'; +import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; +import { Input } from '@/components/ui/input'; +import { Label } from '@/components/ui/label'; +import { Progress } from '@/components/ui/progress'; +import { DirhamIcon } from '@/components/ui/custom-icons'; +import { Target, Zap, Plus, Sparkles } from 'lucide-react'; +import { toast } from 'sonner'; + +const BudgetGoalPlanning: React.FC = () => { + // Left Column Data: Active Jars/Goals + const [goals, setGoals] = useState([ + { id: 1, name: 'Rainy Day Fund', current: 4500, target: 10000, color: 'bg-blue-500' }, + { id: 2, name: 'New Laptop', current: 3200, target: 8000, color: 'bg-purple-500' }, + { id: 3, name: 'Holiday Gift Fund', current: 500, target: 2000, color: 'bg-pink-500' }, + ]); + + // Right Column State: AI Config + const [aiEnabled, setAiEnabled] = useState(false); + + const handleAddFunds = (name: string) => { + toast.success(`Funds added to ${name}`); + }; + + const handleActivateAI = () => { + setAiEnabled(!aiEnabled); + if (!aiEnabled) { + toast.success("AI Auto-Save Activated!"); + } else { + toast.info("AI Auto-Save Paused"); + } + }; + + return ( +
+ {/* Left Column: Active Jars & Goals */} +
+
+

+ Active Jars & Goals +

+ +
+ +
+ {goals.map((goal) => { + const progress = (goal.current / goal.target) * 100; + return ( + +
+
+

{goal.name}

+

+ {goal.current.toLocaleString()} + / {goal.target.toLocaleString()} +

+
+ +
+ +
+
+ {progress.toFixed(0)}% Funded + {Math.max(0, goal.target - goal.current).toLocaleString()} remaining +
+ +
+ + ); + })} +
+
+ + {/* Right Column: AI Auto-Save Configuration */} +
+

+ Automate Your Savings +

+ + + {/* Background decoration */} +
+ +
+
+
+

Enable AI Logic

+

Allow WealthWise to save while you spend

+
+ +
+ +
+
+ + +
+ +
+
+ + +
+
+ +
+ AED + +
+
+
+ + {/* AI Insight Box */} +
+ +

+ Based on your spending habits, this rule will save approx AED 340/month without impacting your daily budget needs. +

+
+
+
+ +
+
+ ); +}; + +export default BudgetGoalPlanning; diff --git a/src/components/budget/SetBudgetForm.tsx b/src/components/budget/SetBudgetForm.tsx index 43400ae..c2f57fc 100644 --- a/src/components/budget/SetBudgetForm.tsx +++ b/src/components/budget/SetBudgetForm.tsx @@ -7,7 +7,24 @@ import { Label } from '@/components/ui/label'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { DirhamIcon } from '@/components/ui/custom-icons'; +import { toast } from 'sonner'; + const SetBudgetForm: React.FC = () => { + const handleSetBudget = () => { + const amount = (document.getElementById('budget-amount') as HTMLInputElement).value; + const category = (document.getElementById('category-budget') as HTMLButtonElement | null)?.innerText || "Category"; + + if (!amount) { + toast.error("Please enter a budget amount"); + return; + } + + toast.success(`Budget Updated: AED ${amount} for ${category}`); + + // Clear + (document.getElementById('budget-amount') as HTMLInputElement).value = ''; + }; + return (
@@ -40,7 +57,10 @@ const SetBudgetForm: React.FC = () => {
- diff --git a/src/components/commitment/AddCommitmentForm.tsx b/src/components/commitment/AddCommitmentForm.tsx index f9228b9..caf6b02 100644 --- a/src/components/commitment/AddCommitmentForm.tsx +++ b/src/components/commitment/AddCommitmentForm.tsx @@ -6,7 +6,26 @@ import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { Sparkles } from 'lucide-react'; +import { toast } from 'sonner'; + const AddCommitmentForm: React.FC = () => { + const handleAdd = () => { + const name = (document.getElementById('comm-name') as HTMLInputElement).value; + const amount = (document.getElementById('comm-amount') as HTMLInputElement).value; + + if (!name || !amount) { + toast.error("Please fill in name and amount"); + return; + } + + toast.success(`Commitment Added: ${name}`); + + // Reset + (document.getElementById('comm-name') as HTMLInputElement).value = ''; + (document.getElementById('comm-amount') as HTMLInputElement).value = ''; + (document.getElementById('comm-type') as HTMLInputElement).value = ''; + }; + return (
@@ -33,7 +52,10 @@ const AddCommitmentForm: React.FC = () => {
- diff --git a/src/components/commitment/UpcomingCommitmentsList.tsx b/src/components/commitment/UpcomingCommitmentsList.tsx index 736a247..3f295f6 100644 --- a/src/components/commitment/UpcomingCommitmentsList.tsx +++ b/src/components/commitment/UpcomingCommitmentsList.tsx @@ -6,6 +6,7 @@ import { Badge } from '@/components/ui/badge'; import { formatAmount } from '@/lib/utils'; import { DirhamIcon } from '@/components/ui/custom-icons'; import { Home, CreditCard, Zap, Trash2, Check } from 'lucide-react'; +import { toast } from 'sonner'; const UpcomingCommitmentsList: React.FC = () => { const commitments = [ @@ -63,10 +64,20 @@ const UpcomingCommitmentsList: React.FC = () => {
- -
diff --git a/src/components/credit/CreditCardsList.tsx b/src/components/credit/CreditCardsList.tsx index 77350b0..5bf5bcb 100644 --- a/src/components/credit/CreditCardsList.tsx +++ b/src/components/credit/CreditCardsList.tsx @@ -6,6 +6,7 @@ import { Badge } from '@/components/ui/badge'; import { formatAmount } from '@/lib/utils'; import { DirhamIcon } from '@/components/ui/custom-icons'; import { MoreHorizontal } from 'lucide-react'; +import { toast } from 'sonner'; const CreditCardsList: React.FC = () => { @@ -108,10 +109,17 @@ const CreditCardsList: React.FC = () => {

- -
diff --git a/src/components/dashboard/GoalsList.tsx b/src/components/dashboard/GoalsList.tsx index 9654afc..856a509 100644 --- a/src/components/dashboard/GoalsList.tsx +++ b/src/components/dashboard/GoalsList.tsx @@ -5,7 +5,11 @@ import { Button } from '@/components/ui/button'; import { Progress } from '@/components/ui/progress'; import { Target } from 'lucide-react'; -const GoalsList: React.FC = () => { +interface GoalsListProps { + onNavigate?: (section: string) => void; +} + +const GoalsList: React.FC = ({ onNavigate }) => { const goals = [ { name: 'Emergency Fund', @@ -53,7 +57,10 @@ const GoalsList: React.FC = () => { ))} - diff --git a/src/components/dashboard/HeroStats.tsx b/src/components/dashboard/HeroStats.tsx index 23ca2c6..4ea3bda 100644 --- a/src/components/dashboard/HeroStats.tsx +++ b/src/components/dashboard/HeroStats.tsx @@ -1,14 +1,18 @@ - import React from 'react'; import { GlassCard } from '@/components/ui/GlassCard'; +import { HoverPreview } from '@/components/ui/HoverPreview'; // Import HoverPreview import { DirhamIcon } from '@/components/ui/custom-icons'; import { TrendingUp, DollarSign, PieChart, - Shield + Shield, + ArrowUpRight, + ArrowDownRight, + CheckCircle2 } from 'lucide-react'; -import { formatAmount } from '@/lib/utils'; // Keep import for potential reuse, though hardcoded values requested for now +import { Progress } from '@/components/ui/progress'; // Assuming we have Progress for risk or charts +// import { formatAmount } from '@/lib/utils'; // Keep import for potential reuse const HeroStats: React.FC = () => { // Hardcoded data as per Target Design Reference @@ -20,7 +24,26 @@ const HeroStats: React.FC = () => { isPositive: true, icon: , color: 'from-purple-500 to-indigo-600', - iconBg: 'bg-white/20' + iconBg: 'bg-white/20', + preview: ( +
+

Top Holdings

+
+ {[ + { name: 'Apple (AAPL)', change: '+1.4%', up: true }, + { name: 'Bitcoin (BTC)', change: '+5.2%', up: true }, + { name: 'Dubai Real Estate', change: '+0.8%', up: true }, + ].map((item, i) => ( +
+ {item.name} + + {item.change} + +
+ ))} +
+
+ ) }, { label: 'Monthly Contributions', @@ -29,7 +52,26 @@ const HeroStats: React.FC = () => { isPositive: true, icon: , color: 'from-blue-500 to-cyan-600', - iconBg: 'bg-white/20' + iconBg: 'bg-white/20', + preview: ( +
+

Recent Deposits

+
+ {[ + { source: 'Salary', amount: '15k', date: '15th Feb' }, + { source: 'Freelance', amount: '2.5k', date: '10th Feb' }, + ].map((item, i) => ( +
+
+ {item.source} + {item.date} +
+ +{item.amount} +
+ ))} +
+
+ ) }, { label: 'Annual Returns', @@ -39,44 +81,107 @@ const HeroStats: React.FC = () => { icon: , color: 'from-emerald-500 to-teal-600', iconBg: 'bg-white/20', - isPercentage: true + isPercentage: true, + preview: ( +
+

Monthly Performance

+
+ {/* Simple CSS Bar Chart Simulation */} + {[ + { month: 'J', val: 70, color: 'bg-emerald-500' }, + { month: 'F', val: 90, color: 'bg-emerald-600' }, + { month: 'M', val: 40, color: 'bg-red-400' }, // Negative dip example + { month: 'A', val: 60, color: 'bg-emerald-500' }, + { month: 'M', val: 80, color: 'bg-emerald-500' }, + { month: 'J', val: 50, color: 'bg-emerald-400' }, + ].map((d, i) => ( +
+
+ {d.month} +
+ ))} +
+
+ Jan (+2%) + Feb (+3.1%) + Mar (-0.5%) +
+
+ ) }, { label: 'Risk Score', value: '3.2/10', change: '-0.3', - isPositive: true, // Lower risk score change might be positive contextually, but design shows -0.3. Assuming red for negative change generally unless specified. Design says (-0.3). + isPositive: true, icon: , color: 'from-orange-500 to-red-600', iconBg: 'bg-white/20', - isScore: true + isScore: true, + preview: ( +
+

Risk Factors

+
+ {[ + { label: 'Volatility', status: 'Low', color: 'text-green-600', bg: 'bg-green-100' }, + { label: 'Diversification', status: 'High', color: 'text-green-600', bg: 'bg-green-100' }, + { label: 'Sector Exposure', status: 'Balanced', color: 'text-blue-600', bg: 'bg-blue-100' }, + ].map((item, i) => ( +
+ {item.label} + + {item.status} + +
+ ))} +
+
+
+ Conservative + Aggressive +
+ +
+
+ ) } ]; return (
{stats.map((stat, idx) => ( - -
-
-
- {stat.icon} -
- - {stat.change} - + {/* Wrap in div to avoid ref issues with functional components if any, though GlassCard should handle it, explicit div is safer for trigger */} + +
+
+
+ {stat.icon} +
+ + {stat.change} + +
+
+

{stat.label}

+
+ {!stat.isPercentage && !stat.isScore && } +

{stat.value}

+
+
+
+ {/* Decorative background element */} +
+
-
-

{stat.label}

-
- {!stat.isPercentage && !stat.isScore && } -

{stat.value}

-
-
-
- {/* Decorative background element */} -
- + } + content={stat.preview} + /> ))}
); diff --git a/src/components/dashboard/QuickActions.tsx b/src/components/dashboard/QuickActions.tsx index cf6ceca..d4558a9 100644 --- a/src/components/dashboard/QuickActions.tsx +++ b/src/components/dashboard/QuickActions.tsx @@ -4,27 +4,35 @@ import { GlassCard } from '@/components/ui/GlassCard'; import { PlusCircle, Target, FileText, PiggyBank } from 'lucide-react'; import { Button } from '@/components/ui/button'; -const QuickActions: React.FC = () => { +interface QuickActionsProps { + onNavigate?: (section: string) => void; +} + +const QuickActions: React.FC = ({ onNavigate }) => { const actions = [ { label: 'New Investment', icon: , - color: 'hover:border-green-200 hover:bg-green-50/50 hover:text-green-700' + color: 'hover:border-green-200 hover:bg-green-50/50 hover:text-green-700', + action: () => onNavigate?.('portfolio') // Default to overview }, { label: 'Set Goals', icon: , - color: 'hover:border-blue-200 hover:bg-blue-50/50 hover:text-blue-700' + color: 'hover:border-blue-200 hover:bg-blue-50/50 hover:text-blue-700', + action: () => onNavigate?.('budget') // Now part of Budget Manager }, { label: 'View Reports', icon: , - color: 'hover:border-purple-200 hover:bg-purple-50/50 hover:text-purple-700' + color: 'hover:border-purple-200 hover:bg-purple-50/50 hover:text-purple-700', + action: () => onNavigate?.('budget') }, { label: 'Savings Plan', icon: , - color: 'hover:border-pink-200 hover:bg-pink-50/50 hover:text-pink-700' + color: 'hover:border-pink-200 hover:bg-pink-50/50 hover:text-pink-700', + action: () => onNavigate?.('savings') } ]; @@ -35,6 +43,7 @@ const QuickActions: React.FC = () => { key={idx} className={`p-4 flex flex-col items-center justify-center cursor-pointer transition-all active:scale-95 ${action.color} group`} hoverEffect + onClick={action.action} >
{action.icon} diff --git a/src/components/dashboard/TransactionsList.tsx b/src/components/dashboard/TransactionsList.tsx index 6d4e6b1..2ff0033 100644 --- a/src/components/dashboard/TransactionsList.tsx +++ b/src/components/dashboard/TransactionsList.tsx @@ -5,7 +5,11 @@ import { Button } from '@/components/ui/button'; import { DirhamIcon } from '@/components/ui/custom-icons'; import { ArrowUpRight, ArrowDownRight, Clock } from 'lucide-react'; -const TransactionsList: React.FC = () => { +interface TransactionsListProps { + onNavigate?: (section: string) => void; +} + +const TransactionsList: React.FC = ({ onNavigate }) => { const transactions = [ { id: 1, @@ -70,8 +74,8 @@ const TransactionsList: React.FC = () => { {tx.amount}
{tx.status} @@ -80,7 +84,11 @@ const TransactionsList: React.FC = () => { ))}
- diff --git a/src/components/features/BudgetManager.tsx b/src/components/features/BudgetManager.tsx index fe8716b..43536d9 100644 --- a/src/components/features/BudgetManager.tsx +++ b/src/components/features/BudgetManager.tsx @@ -12,6 +12,8 @@ import FullExpensesTable from '@/components/budget/FullExpensesTable'; import AddExpenseForm from '@/components/budget/AddExpenseForm'; import SetBudgetForm from '@/components/budget/SetBudgetForm'; +import BudgetGoalPlanning from '@/components/budget/BudgetGoalPlanning'; // Import new component + export default function BudgetManager() { return (
@@ -43,6 +45,7 @@ export default function BudgetManager() { Overview Budgets Expenses + Goal Planning Add Expense Set Budget @@ -65,12 +68,17 @@ export default function BudgetManager() { - {/* Tab 4: Add Expense */} + {/* Tab 4: Goal Planning */} + + + + + {/* Tab 5: Add Expense */} - {/* Tab 5: Set Budget */} + {/* Tab 6: Set Budget */} diff --git a/src/components/features/SavingsBooster.tsx b/src/components/features/SavingsBooster.tsx index b9949ac..a3934b9 100644 --- a/src/components/features/SavingsBooster.tsx +++ b/src/components/features/SavingsBooster.tsx @@ -45,7 +45,7 @@ export default function SavingsBooster() { Goals Accounts Calculator - Add Goal + Manual Goal {/* Tab 1: Overview */} @@ -61,18 +61,18 @@ export default function SavingsBooster() { - {/* Tab 3: Accounts */} + {/* Tab 4: Accounts */} - {/* Tab 4: Calculator */} + {/* Tab 5: Calculator */} - {/* Tab 5: Add Goal */} - + {/* Tab 6: Manual Goal (Renamed) */} + diff --git a/src/components/portfolio/HoldingsTable.tsx b/src/components/portfolio/HoldingsTable.tsx index 44afcef..5e852f1 100644 --- a/src/components/portfolio/HoldingsTable.tsx +++ b/src/components/portfolio/HoldingsTable.tsx @@ -15,6 +15,8 @@ import { TableRow, } from "@/components/ui/table"; +import { toast } from 'sonner'; + interface HoldingsTableProps { holdings: Array<{ name: string; @@ -30,6 +32,10 @@ interface HoldingsTableProps { } const HoldingsTable: React.FC = ({ holdings }) => { + const handleAction = (type: 'increase' | 'decrease', symbol: string) => { + toast.success(`Position ${type === 'increase' ? 'Increased' : 'Reduced'}: ${symbol}`); + }; + return ( @@ -71,10 +77,20 @@ const HoldingsTable: React.FC = ({ holdings }) => {
- -
diff --git a/src/components/portfolio/QuickInvestmentForm.tsx b/src/components/portfolio/QuickInvestmentForm.tsx index fef3053..f94db8f 100644 --- a/src/components/portfolio/QuickInvestmentForm.tsx +++ b/src/components/portfolio/QuickInvestmentForm.tsx @@ -7,11 +7,28 @@ import { Label } from '@/components/ui/label'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { DirhamIcon } from '@/components/ui/custom-icons'; +import { toast } from 'sonner'; + interface QuickInvestmentFormProps { holdings: Array<{ symbol: string; name: string }>; } const QuickInvestmentForm: React.FC = ({ holdings }) => { + const handleTrade = (type: 'buy' | 'sell') => { + const symbol = (document.getElementById('holding') as HTMLButtonElement | null)?.innerText || 'Asset'; + const amount = (document.getElementById('amount') as HTMLInputElement | null)?.value; + + if (!amount) { + toast.error("Please enter an amount"); + return; + } + + toast.success(`Order Placed: ${type === 'buy' ? 'Bought' : 'Sold'} AED ${amount} of ${symbol}`); + + // Reset form (simple dom reset for now) + if (document.getElementById('amount')) (document.getElementById('amount') as HTMLInputElement).value = ''; + }; + return (

Quick Investment

@@ -41,10 +58,18 @@ const QuickInvestmentForm: React.FC = ({ holdings }) =
- -
diff --git a/src/components/savings/AddGoalForm.tsx b/src/components/savings/AddGoalForm.tsx index d7dbefa..ffe9108 100644 --- a/src/components/savings/AddGoalForm.tsx +++ b/src/components/savings/AddGoalForm.tsx @@ -11,9 +11,28 @@ import { format } from 'date-fns'; import { cn } from '@/lib/utils'; import { Calendar as CalendarComponent } from '@/components/ui/calendar'; // Assuming shadcn Calendar exists +import { toast } from 'sonner'; + const AddGoalForm: React.FC = () => { const [date, setDate] = React.useState(); + const handleCreateGoal = () => { + const name = (document.getElementById('goal-name') as HTMLInputElement).value; + const amount = (document.getElementById('target-amount') as HTMLInputElement).value; + + if (!name || !amount) { + toast.error("Please fill in goal name and target amount"); + return; + } + + toast.success(`Goal Created: ${name}`); + + // Reset + (document.getElementById('goal-name') as HTMLInputElement).value = ''; + (document.getElementById('target-amount') as HTMLInputElement).value = ''; + setDate(undefined); + }; + return (
@@ -60,7 +79,10 @@ const AddGoalForm: React.FC = () => {
- diff --git a/src/components/savings/SavingsGoalsGrid.tsx b/src/components/savings/SavingsGoalsGrid.tsx index 26a658d..cc373b4 100644 --- a/src/components/savings/SavingsGoalsGrid.tsx +++ b/src/components/savings/SavingsGoalsGrid.tsx @@ -8,6 +8,8 @@ import { Progress } from '@/components/ui/progress'; import { Clock, Plus } from 'lucide-react'; import { motion } from 'framer-motion'; +import { toast } from 'sonner'; + const SavingsGoalsGrid: React.FC = () => { const goals = [ @@ -18,6 +20,14 @@ const SavingsGoalsGrid: React.FC = () => { { name: 'Home Downpayment', saved: 125000, target: 200000, daysLeft: 730, color: 'bg-indigo-500' }, ]; + const handleAddSavings = (amount: number | 'custom', goalName: string) => { + if (amount === 'custom') { + toast.info("Custom amount feature pending: Enter amount manually soon."); + } else { + toast.success(`Ajded AED ${amount} to ${goalName}`); + } + }; + return (
{goals.map((goal, index) => { @@ -49,13 +59,27 @@ const SavingsGoalsGrid: React.FC = () => {
- - -
diff --git a/src/components/ui/HoverPreview.tsx b/src/components/ui/HoverPreview.tsx new file mode 100644 index 0000000..752fa0e --- /dev/null +++ b/src/components/ui/HoverPreview.tsx @@ -0,0 +1,33 @@ +import React, { ReactNode } from 'react'; +import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/hover-card'; + +interface HoverPreviewProps { + trigger: ReactNode; + content: ReactNode; + openDelay?: number; + side?: "top" | "right" | "bottom" | "left"; + align?: "start" | "center" | "end"; +} + +export const HoverPreview: React.FC = ({ + trigger, + content, + openDelay = 200, + side = "bottom", + align = "start" +}) => { + return ( + + + {trigger} + + + {content} + + + ); +}; diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx index 3f3aa95..c127721 100644 --- a/src/pages/Index.tsx +++ b/src/pages/Index.tsx @@ -42,7 +42,7 @@ const Index = () => { const renderContent = () => { switch (activeSection) { case 'dashboard': - return ; + return ; case 'analyze': return ; @@ -65,8 +65,7 @@ const Index = () => { case 'insurance': return ; - case 'goals': - return ; + // Goals case removed as it is now part of BudgetManager case 'advisor': return ;