import React from 'react'; import { Button } from '@/components/ui/button'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; import { Plus, Settings } from 'lucide-react'; // Import New Modular Budget Components import BudgetSummaryCards from '@/components/budget/BudgetSummaryCards'; import BudgetOverviewList from '@/components/budget/BudgetOverviewList'; import RecentTransactionsCard from '@/components/budget/RecentTransactionsCard'; import BudgetCategoryGrid from '@/components/budget/BudgetCategoryGrid'; 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 (
{/* Header Section */}

Budget Manager

Track every dirham with precision.

{/* Summary Cards */} {/* Main Content Tabs */} Overview Budgets Expenses Goal Planning Add Expense Set Budget {/* Tab 1: Overview */}
{/* Tab 2: Budgets */} {/* Tab 3: Expenses */} {/* Tab 4: Goal Planning */} {/* Tab 5: Add Expense */} {/* Tab 6: Set Budget */}
); }