Visual edit in Lovable
Edited UI in Lovable
This commit is contained in:
@@ -1,11 +1,9 @@
|
|||||||
|
|
||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
import NavBar from '@/components/NavBar';
|
import NavBar from '@/components/NavBar';
|
||||||
import ExpenseChart from '@/components/ExpenseChart';
|
import ExpenseChart from '@/components/ExpenseChart';
|
||||||
import AddTransactionButton from '@/components/AddTransactionButton';
|
import AddTransactionButton from '@/components/AddTransactionButton';
|
||||||
import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, Legend } from 'recharts';
|
import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, Legend } from 'recharts';
|
||||||
import { ChevronLeft, ChevronRight } from 'lucide-react';
|
import { ChevronLeft, ChevronRight } from 'lucide-react';
|
||||||
|
|
||||||
const Analytics = () => {
|
const Analytics = () => {
|
||||||
const [selectedPeriod, setSelectedPeriod] = useState('이번 달');
|
const [selectedPeriod, setSelectedPeriod] = useState('이번 달');
|
||||||
|
|
||||||
@@ -50,12 +48,10 @@ const Analytics = () => {
|
|||||||
income: 2550000,
|
income: 2550000,
|
||||||
expense: 1740000
|
expense: 1740000
|
||||||
}];
|
}];
|
||||||
|
|
||||||
const totalIncome = 2550000;
|
const totalIncome = 2550000;
|
||||||
const totalExpense = 1740000;
|
const totalExpense = 1740000;
|
||||||
const savings = totalIncome - totalExpense;
|
const savings = totalIncome - totalExpense;
|
||||||
const savingsPercentage = Math.round(savings / totalIncome * 100);
|
const savingsPercentage = Math.round(savings / totalIncome * 100);
|
||||||
|
|
||||||
return <div className="min-h-screen bg-neuro-background pb-24">
|
return <div className="min-h-screen bg-neuro-background pb-24">
|
||||||
<div className="max-w-md mx-auto px-6">
|
<div className="max-w-md mx-auto px-6">
|
||||||
{/* Header */}
|
{/* Header */}
|
||||||
@@ -115,7 +111,7 @@ const Analytics = () => {
|
|||||||
|
|
||||||
{/* Monthly Comparison */}
|
{/* Monthly Comparison */}
|
||||||
<div className="mt-6 mb-8">
|
<div className="mt-6 mb-8">
|
||||||
<h2 className="text-lg font-semibold mb-3">월별 추이</h2>
|
<h2 className="text-lg font-semibold mb-3">월별 그래프</h2>
|
||||||
<div className="neuro-card h-72">
|
<div className="neuro-card h-72">
|
||||||
<ResponsiveContainer width="100%" height="100%">
|
<ResponsiveContainer width="100%" height="100%">
|
||||||
<BarChart data={monthlyData} margin={{
|
<BarChart data={monthlyData} margin={{
|
||||||
@@ -181,5 +177,4 @@ const Analytics = () => {
|
|||||||
<NavBar />
|
<NavBar />
|
||||||
</div>;
|
</div>;
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Analytics;
|
export default Analytics;
|
||||||
Reference in New Issue
Block a user