Update budget setting text

Replaced the budget setting text with a message indicating that entering the monthly budget will automatically set the daily and weekly budgets.
This commit is contained in:
gpt-engineer-app[bot]
2025-03-15 02:29:28 +00:00
parent f92c7cc3cd
commit d1ebbefb0a

View File

@@ -4,11 +4,13 @@ import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { Check, ChevronDown, ChevronUp } from 'lucide-react'; import { Check, ChevronDown, ChevronUp } from 'lucide-react';
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'; import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
interface BudgetData { interface BudgetData {
targetAmount: number; targetAmount: number;
spentAmount: number; spentAmount: number;
remainingAmount: number; remainingAmount: number;
} }
interface BudgetProgressCardProps { interface BudgetProgressCardProps {
budgetData: { budgetData: {
daily: BudgetData; daily: BudgetData;
@@ -21,6 +23,7 @@ interface BudgetProgressCardProps {
calculatePercentage: (spent: number, target: number) => number; calculatePercentage: (spent: number, target: number) => number;
onSaveBudget: (type: 'daily' | 'weekly' | 'monthly', amount: number) => void; onSaveBudget: (type: 'daily' | 'weekly' | 'monthly', amount: number) => void;
} }
const BudgetProgressCard: React.FC<BudgetProgressCardProps> = ({ const BudgetProgressCard: React.FC<BudgetProgressCardProps> = ({
budgetData, budgetData,
selectedTab, selectedTab,
@@ -59,12 +62,14 @@ const BudgetProgressCard: React.FC<BudgetProgressCardProps> = ({
</Tabs> </Tabs>
</div>; </div>;
}; };
interface BudgetTabContentProps { interface BudgetTabContentProps {
data: BudgetData; data: BudgetData;
formatCurrency: (amount: number) => string; formatCurrency: (amount: number) => string;
calculatePercentage: (spent: number, target: number) => number; calculatePercentage: (spent: number, target: number) => number;
onSaveBudget: (amount: number) => void; onSaveBudget: (amount: number) => void;
} }
const BudgetTabContent: React.FC<BudgetTabContentProps> = ({ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
data, data,
formatCurrency, formatCurrency,
@@ -74,11 +79,13 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
const percentage = calculatePercentage(data.spentAmount, data.targetAmount); const percentage = calculatePercentage(data.spentAmount, data.targetAmount);
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
const [budgetInput, setBudgetInput] = useState(data.targetAmount.toString()); const [budgetInput, setBudgetInput] = useState(data.targetAmount.toString());
const handleInputChange = (value: string) => { const handleInputChange = (value: string) => {
// Remove all non-numeric characters // Remove all non-numeric characters
const numericValue = value.replace(/[^0-9]/g, ''); const numericValue = value.replace(/[^0-9]/g, '');
setBudgetInput(numericValue); setBudgetInput(numericValue);
}; };
const handleSave = () => { const handleSave = () => {
const amount = parseInt(budgetInput, 10) || 0; const amount = parseInt(budgetInput, 10) || 0;
onSaveBudget(amount); onSaveBudget(amount);
@@ -89,6 +96,7 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
const formatWithCommas = (amount: string) => { const formatWithCommas = (amount: string) => {
return amount.replace(/\B(?=(\d{3})+(?!\d))/g, ','); return amount.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}; };
return <div className="space-y-4"> return <div className="space-y-4">
<div> <div>
<div className="flex items-center justify-between mb-2"> <div className="flex items-center justify-between mb-2">
@@ -128,10 +136,11 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
<Check size={18} /> <Check size={18} />
</Button> </Button>
</div> </div>
<p className="text-xs text-gray-500 mt-1"> : {formatWithCommas(budgetInput)}</p> <p className="text-xs text-gray-500 mt-1"> , .</p>
</CollapsibleContent> </CollapsibleContent>
</Collapsible> </Collapsible>
</div> </div>
</div>; </div>;
}; };
export default BudgetProgressCard;
export default BudgetProgressCard;