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

Visual edit in Lovable

Browse Source 
Edited UI in Lovable
This commit is contained in:
gpt-engineer-app[bot]
2025-03-15 02:33:45 +00:00
parent aa6c059043
commit 98ec8d4043
1 changed files with 4 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/BudgetProgressCard.tsx
View File

@@ -1,17 +1,14 @@
import React, { useState } from 'react';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { Check, ChevronDown, ChevronUp } from 'lucide-react';
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
interface BudgetData {
targetAmount: number;
spentAmount: number;
remainingAmount: number;
}
interface BudgetProgressCardProps {
budgetData: {
daily: BudgetData;
@@ -24,7 +21,6 @@ interface BudgetProgressCardProps {
calculatePercentage: (spent: number, target: number) => number;
onSaveBudget: (type: 'daily' | 'weekly' | 'monthly', amount: number) => void;
}
const BudgetProgressCard: React.FC<BudgetProgressCardProps> = ({
budgetData,
selectedTab,
@@ -63,14 +59,12 @@ const BudgetProgressCard: React.FC<BudgetProgressCardProps> = ({
</Tabs>
</div>;
};
interface BudgetTabContentProps {
data: BudgetData;
formatCurrency: (amount: number) => string;
calculatePercentage: (spent: number, target: number) => number;
onSaveBudget: (amount: number) => void;
}
const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
data,
formatCurrency,
@@ -80,13 +74,11 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
const percentage = calculatePercentage(data.spentAmount, data.targetAmount);
const [isOpen, setIsOpen] = useState(false);
const [budgetInput, setBudgetInput] = useState(data.targetAmount.toString());
const handleInputChange = (value: string) => {
// Remove all non-numeric characters
const numericValue = value.replace(/[^0-9]/g, '');
setBudgetInput(numericValue);
};
const handleSave = () => {
const amount = parseInt(budgetInput, 10) || 0;
onSaveBudget(amount);
@@ -97,7 +89,6 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
const formatWithCommas = (amount: string) => {
return amount.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
};
return <div className="space-y-4">
<div>
<div className="flex items-center justify-between mb-2">
@@ -125,8 +116,8 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
<div className="pt-2 border-t border-gray-100">
<Collapsible open={isOpen} onOpenChange={setIsOpen}>
<CollapsibleTrigger className="flex items-center justify-between w-full px-1 py-2 text-left">
<span className="text-sm font-medium text-gray-600">예산 설정하기</span>
<CollapsibleTrigger className="flex items-center justify-between w-full px-1 text-left py-[12px]">
<span className="text-sm font-medium text-gray-600">월간 예산 설정하기</span>
{isOpen ? <ChevronUp size={16} className="text-gray-500" /> : <ChevronDown size={16} className="text-gray-500" />}
</CollapsibleTrigger>
@@ -137,11 +128,10 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
<Check size={18} />
</Button>
</div>
<p className="text-xs text-gray-500 mt-1 text-center">월간 예산을 입력하면 일일, 주간 예산이 자동으로 입력됩니다.</p>
<p className="text-xs text-gray-500 mt-1 text-center py-[6px]">월간 예산을 입력하면 일일, 주간 예산이 자동으로 입력됩니다.</p>
</CollapsibleContent>
</Collapsible>
</div>
</div>;
};
export default BudgetProgressCard;