89 lines
5.0 KiB
TypeScript
89 lines
5.0 KiB
TypeScript
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 (
|
|
<div className="space-y-6 animate-fade-in text-slate-800 pb-10">
|
|
|
|
{/* Header Section */}
|
|
<div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-8">
|
|
<div>
|
|
<h1 className="text-3xl font-light tracking-tight text-slate-900">
|
|
Budget <span className="font-semibold bg-clip-text text-transparent bg-gradient-to-r from-green-600 to-teal-600">Manager</span>
|
|
</h1>
|
|
<p className="text-slate-500 mt-1">Track every dirham with precision.</p>
|
|
</div>
|
|
<div className="flex gap-3">
|
|
<Button variant="outline" className="border-slate-200 text-slate-700 bg-white hover:bg-slate-50">
|
|
<Plus className="w-4 h-4 mr-2" /> Add Expense
|
|
</Button>
|
|
<Button className="bg-black text-white hover:bg-slate-800 shadow-md">
|
|
<Settings className="w-4 h-4 mr-2" /> Set Budget
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Summary Cards */}
|
|
<BudgetSummaryCards />
|
|
|
|
{/* Main Content Tabs */}
|
|
<Tabs defaultValue="overview" className="space-y-6 w-full">
|
|
<TabsList className="bg-white/60 p-1.5 rounded-2xl backdrop-blur-md border border-white/40 inline-flex w-auto flex-wrap lg:flex-nowrap shadow-sm h-auto">
|
|
<TabsTrigger value="overview" className="rounded-xl px-4 lg:px-6 py-2.5 text-sm font-medium data-[state=active]:bg-white data-[state=active]:text-slate-900 data-[state=active]:shadow-sm text-slate-500 transition-all">Overview</TabsTrigger>
|
|
<TabsTrigger value="budgets" className="rounded-xl px-4 lg:px-6 py-2.5 text-sm font-medium data-[state=active]:bg-white data-[state=active]:text-slate-900 data-[state=active]:shadow-sm text-slate-500 transition-all">Budgets</TabsTrigger>
|
|
<TabsTrigger value="expenses" className="rounded-xl px-4 lg:px-6 py-2.5 text-sm font-medium data-[state=active]:bg-white data-[state=active]:text-slate-900 data-[state=active]:shadow-sm text-slate-500 transition-all">Expenses</TabsTrigger>
|
|
<TabsTrigger value="goal-planning" className="rounded-xl px-4 lg:px-6 py-2.5 text-sm font-medium data-[state=active]:bg-white data-[state=active]:text-slate-900 data-[state=active]:shadow-sm text-slate-500 transition-all">Goal Planning</TabsTrigger>
|
|
<TabsTrigger value="add-expense" className="rounded-xl px-4 lg:px-6 py-2.5 text-sm font-medium data-[state=active]:bg-white data-[state=active]:text-slate-900 data-[state=active]:shadow-sm text-slate-500 transition-all">Add Expense</TabsTrigger>
|
|
<TabsTrigger value="set-budget" className="rounded-xl px-4 lg:px-6 py-2.5 text-sm font-medium data-[state=active]:bg-white data-[state=active]:text-slate-900 data-[state=active]:shadow-sm text-slate-500 transition-all">Set Budget</TabsTrigger>
|
|
</TabsList>
|
|
|
|
{/* Tab 1: Overview */}
|
|
<TabsContent value="overview" className="outline-none animate-in fade-in slide-in-from-bottom-2 duration-500">
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 h-auto lg:h-[450px]">
|
|
<BudgetOverviewList />
|
|
<RecentTransactionsCard />
|
|
</div>
|
|
</TabsContent>
|
|
|
|
{/* Tab 2: Budgets */}
|
|
<TabsContent value="budgets" className="outline-none animate-in fade-in slide-in-from-bottom-2 duration-500">
|
|
<BudgetCategoryGrid />
|
|
</TabsContent>
|
|
|
|
{/* Tab 3: Expenses */}
|
|
<TabsContent value="expenses" className="outline-none animate-in fade-in slide-in-from-bottom-2 duration-500">
|
|
<FullExpensesTable />
|
|
</TabsContent>
|
|
|
|
{/* Tab 4: Goal Planning */}
|
|
<TabsContent value="goal-planning" className="outline-none animate-in fade-in slide-in-from-bottom-2 duration-500">
|
|
<BudgetGoalPlanning />
|
|
</TabsContent>
|
|
|
|
{/* Tab 5: Add Expense */}
|
|
<TabsContent value="add-expense" className="outline-none animate-in fade-in slide-in-from-bottom-2 duration-500">
|
|
<AddExpenseForm />
|
|
</TabsContent>
|
|
|
|
{/* Tab 6: Set Budget */}
|
|
<TabsContent value="set-budget" className="outline-none animate-in fade-in slide-in-from-bottom-2 duration-500">
|
|
<SetBudgetForm />
|
|
</TabsContent>
|
|
|
|
</Tabs>
|
|
</div>
|
|
);
|
|
} |