Swap chart card positions

Swapped the positions of the category expense chart and the monthly comparison graph cards.
This commit is contained in:
gpt-engineer-app[bot]
2025-03-15 02:44:48 +00:00
parent 58eadde0ff
commit eb4d9c6d16

View File

@@ -4,6 +4,7 @@ import ExpenseChart from '@/components/ExpenseChart';
import AddTransactionButton from '@/components/AddTransactionButton';
import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, Legend } from 'recharts';
import { ChevronLeft, ChevronRight } from 'lucide-react';
const Analytics = () => {
const [selectedPeriod, setSelectedPeriod] = useState('이번 달');
@@ -48,10 +49,12 @@ const Analytics = () => {
income: 2550000,
expense: 1740000
}];
const totalIncome = 2550000;
const totalExpense = 1740000;
const savings = totalIncome - totalExpense;
const savingsPercentage = Math.round(savings / totalIncome * 100);
return <div className="min-h-screen bg-neuro-background pb-24">
<div className="max-w-md mx-auto px-6">
{/* Header */}
@@ -106,11 +109,8 @@ const Analytics = () => {
</div>
</header>
{/* Category Pie Chart */}
<ExpenseChart data={expenseData} />
{/* Monthly Comparison */}
<div className="mt-6 mb-8">
{/* Monthly Comparison - MOVED UP */}
<div className="mb-8">
<h2 className="text-lg font-semibold mb-3"> </h2>
<div className="neuro-card h-72">
<ResponsiveContainer width="100%" height="100%">
@@ -145,8 +145,11 @@ const Analytics = () => {
</div>
</div>
{/* Category Pie Chart - MOVED DOWN */}
<ExpenseChart data={expenseData} />
{/* Top Spending Categories */}
<h2 className="text-lg font-semibold mb-3"> </h2>
<h2 className="text-lg font-semibold mb-3 mt-6"> </h2>
<div className="neuro-card mb-6">
<div className="space-y-4">
{expenseData.map((category, index) => <div key={category.name} className="flex items-center justify-between">
@@ -177,4 +180,5 @@ const Analytics = () => {
<NavBar />
</div>;
};
export default Analytics;
export default Analytics;