import React, { useState, useEffect } from 'react';
import { Plus, Trash2, Calculator, MapPin, Plane, FileText, Home, Package, DollarSign, TrendingUp } from 'lucide-react';
const MovingBudgetPlanner = () => {
const [expenses, setExpenses] = useState([]);
const [newExpense, setNewExpense] = useState({
category: 'travel',
description: '',
amount: '',
status: 'planned'
});
const categories = {
travel: { icon: Plane, label: 'Travel & Transportation', color: 'bg-blue-100 text-blue-800' },
visa: { icon: FileText, label: 'Visas & Documentation', color: 'bg-green-100 text-green-800' },
shipping: { icon: Package, label: 'Shipping & Moving', color: 'bg-orange-100 text-orange-800' },
accommodation: { icon: Home, label: 'Accommodation & Deposits', color: 'bg-purple-100 text-purple-800' },
setup: { icon: MapPin, label: 'Setup & Essentials', color: 'bg-pink-100 text-pink-800' },
other: { icon: DollarSign, label: 'Other Expenses', color: 'bg-gray-100 text-gray-800' }
};
const addExpense = () => {
if (newExpense.description && newExpense.amount) {
const expense = {
id: Date.now(),
...newExpense,
amount: parseFloat(newExpense.amount),
dateAdded: new Date().toLocaleDateString()
};
setExpenses([...expenses, expense]);
setNewExpense({
category: 'travel',
description: '',
amount: '',
status: 'planned'
});
}
};
const deleteExpense = (id) => {
setExpenses(expenses.filter(expense => expense.id !== id));
};
const updateExpenseStatus = (id, status) => {
setExpenses(expenses.map(expense =>
expense.id === id ? { ...expense, status } : expense
));
};
const getTotalByCategory = (category) => {
return expenses
.filter(expense => expense.category === category)
.reduce((sum, expense) => sum + expense.amount, 0);
};
const getTotalByStatus = (status) => {
return expenses
.filter(expense => expense.status === status)
.reduce((sum, expense) => sum + expense.amount, 0);
};
const grandTotal = expenses.reduce((sum, expense) => sum + expense.amount, 0);
return (
Digital Nomad Moving Budget
Track all your relocation expenses in one place
{/* Budget Summary Cards */}
Total Budget
${grandTotal.toLocaleString()}
Planned
${getTotalByStatus('planned').toLocaleString()}
Booked
${getTotalByStatus('booked').toLocaleString()}
Completed
${getTotalByStatus('completed').toLocaleString()}
{/* Add New Expense Form */}
{/* Category Breakdown */}
{Object.entries(categories).map(([categoryKey, category]) => {
const categoryExpenses = expenses.filter(e => e.category === categoryKey);
const categoryTotal = getTotalByCategory(categoryKey);
const IconComponent = category.icon;
return (
{category.label}
{categoryExpenses.length} items
${categoryTotal.toLocaleString()}
{categoryExpenses.map(expense => (
{expense.description}
Added {expense.dateAdded}
${expense.amount.toLocaleString()}
))}
{categoryExpenses.length === 0 && (
No expenses in this category yet
)}
);
})}
{/* Tips Section */}
💡 Digital Nomad Moving Tips
Common Expenses to Consider:
- • Flight tickets and airport transfers
- • Visa fees and document processing
- • Travel insurance
- • Temporary accommodation (first week/month)
- • Security deposits for rentals
- • Shipping personal items
- • Local SIM card and internet setup
- • Banking and financial setup costs
Money-Saving Tips:
- • Book flights 6-8 weeks in advance
- • Consider slow travel to reduce flight costs
- • Ship only essentials, buy locally
- • Use digital banking to avoid transfer fees
- • Research visa-free destinations
- • Join nomad communities for housing tips
- • Consider co-living spaces for lower deposits
- • Budget 20% extra for unexpected costs
);
};
export default MovingBudgetPlanner;
