ZELLYY/zellyy-finance
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add summary card with tabs

Browse Source 
Adds a summary card to the app with tabs for daily, weekly, and monthly views, displaying target spending, actual spending, and remaining spendable amount.
This commit is contained in:
gpt-engineer-app[bot]
2025-03-08 08:03:11 +00:00
parent 9dc79cb562
commit 082b59d8fb
1 changed files with 102 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
src/pages/Index.tsx
View File

@@ -1,12 +1,15 @@
import React from 'react';
import React, { useState } from 'react';
import NavBar from '@/components/NavBar';
import BudgetCard from '@/components/BudgetCard';
import TransactionCard, { Transaction } from '@/components/TransactionCard';
import AddTransactionButton from '@/components/AddTransactionButton';
import { Wallet, TrendingUp, Bell } from 'lucide-react';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
const Index = () => {
const [selectedTab, setSelectedTab] = useState("daily");
// Sample data - in a real app, this would come from a data source
const transactions: Transaction[] = [
{
@@ -35,6 +38,33 @@ const Index = () => {
},
];
// 예산 데이터 - 실제 앱에서는 백엔드에서 가져와야 함
const budgetData = {
daily: {
targetAmount: 30000,
spentAmount: 15000,
remainingAmount: 15000,
},
weekly: {
targetAmount: 200000,
spentAmount: 120000,
remainingAmount: 80000,
},
monthly: {
targetAmount: 1200000,
spentAmount: 750000,
remainingAmount: 450000,
}
};
const formatCurrency = (amount: number) => {
return new Intl.NumberFormat('ko-KR', {
style: 'currency',
currency: 'KRW',
maximumFractionDigits: 0
}).format(amount);
};
return (
<div className="min-h-screen bg-neuro-background pb-24">
<div className="max-w-md mx-auto px-6">
@@ -51,22 +81,78 @@ const Index = () => {
</div>
</header>
{/* Balance Card */}
{/* 예산 카드 - 탭 추가 */}
<div className="neuro-card mb-6 overflow-hidden">
<div className="flex items-center justify-between mb-3">
<div className="flex items-center gap-2">
<Wallet className="text-neuro-accent" size={20} />
<h2 className="font-semibold">총 잔액</h2>
</div>
<TrendingUp className="text-neuro-income" size={20} />
</div>
<p className="text-3xl font-bold tracking-tight mb-1">
₩2,580,000
</p>
<p className="text-neuro-income text-sm font-medium">
지난 달보다 12% 증가
</p>
<Tabs defaultValue="daily" value={selectedTab} onValueChange={setSelectedTab} className="w-full">
<TabsList className="grid grid-cols-3 mb-4 bg-transparent">
<TabsTrigger
value="daily"
className="data-[state=active]:shadow-neuro-pressed data-[state=active]:bg-transparent">
오늘
</TabsTrigger>
<TabsTrigger
value="weekly"
className="data-[state=active]:shadow-neuro-pressed data-[state=active]:bg-transparent">
주간
</TabsTrigger>
<TabsTrigger
value="monthly"
className="data-[state=active]:shadow-neuro-pressed data-[state=active]:bg-transparent">
월간
</TabsTrigger>
</TabsList>
<TabsContent value="daily" className="space-y-4 mt-0">
<div className="space-y-3">
<div className="flex justify-between items-center">
<span className="text-gray-500 text-sm">목표 지출 금액</span>
<span className="font-medium">{formatCurrency(budgetData.daily.targetAmount)}</span>
</div>
<div className="flex justify-between items-center">
<span className="text-gray-500 text-sm">지출 금액</span>
<span className="font-medium text-neuro-expense">{formatCurrency(budgetData.daily.spentAmount)}</span>
</div>
<div className="flex justify-between items-center pt-2 border-t border-gray-100">
<span className="text-gray-500 text-sm">지출 가능 금액</span>
<span className="font-semibold text-neuro-income">{formatCurrency(budgetData.daily.remainingAmount)}</span>
</div>
</div>
</TabsContent>
<TabsContent value="weekly" className="space-y-4 mt-0">
<div className="space-y-3">
<div className="flex justify-between items-center">
<span className="text-gray-500 text-sm">목표 지출 금액</span>
<span className="font-medium">{formatCurrency(budgetData.weekly.targetAmount)}</span>
</div>
<div className="flex justify-between items-center">
<span className="text-gray-500 text-sm">지출 금액</span>
<span className="font-medium text-neuro-expense">{formatCurrency(budgetData.weekly.spentAmount)}</span>
</div>
<div className="flex justify-between items-center pt-2 border-t border-gray-100">
<span className="text-gray-500 text-sm">지출 가능 금액</span>
<span className="font-semibold text-neuro-income">{formatCurrency(budgetData.weekly.remainingAmount)}</span>
</div>
</div>
</TabsContent>
<TabsContent value="monthly" className="space-y-4 mt-0">
<div className="space-y-3">
<div className="flex justify-between items-center">
<span className="text-gray-500 text-sm">목표 지출 금액</span>
<span className="font-medium">{formatCurrency(budgetData.monthly.targetAmount)}</span>
</div>
<div className="flex justify-between items-center">
<span className="text-gray-500 text-sm">지출 금액</span>
<span className="font-medium text-neuro-expense">{formatCurrency(budgetData.monthly.spentAmount)}</span>
</div>
<div className="flex justify-between items-center pt-2 border-t border-gray-100">
<span className="text-gray-500 text-sm">지출 가능 금액</span>
<span className="font-semibold text-neuro-income">{formatCurrency(budgetData.monthly.remainingAmount)}</span>
</div>
</div>
</TabsContent>
</Tabs>
</div>
{/* Budget Progress */}