Scribd
Upload
11 views3 pages

Finance App

The document is a React component that serves as a financial dashboard, allowing users to manage transactions, categories, and investments. It includes functionalities for adding, editing, and deleting transactions and categories, as well as exporting transaction data to a CSV file. The component utilizes various subcomponents for displaying forms, lists, summaries, and charts related to financial data.

Uploaded by

masterlockonnis
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
11 views3 pages

Finance App

The document is a React component that serves as a financial dashboard, allowing users to manage transactions, categories, and investments. It includes functionalities for adding, editing, and deleting transactions and categories, as well as exporting transaction data to a CSV file. The component utilizes various subcomponents for displaying forms, lists, summaries, and charts related to financial data.

Uploaded by

masterlockonnis
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

"use client"

import { useState, useEffect } from "react"


import type { Transaction, Category, Investment, FinancialData } from "../types"
import { TransactionForm } from "../components/TransactionForm"
import { TransactionList } from "../components/TransactionList"
import { Summary } from "../components/Summary"
import { CategoryManager } from "../components/CategoryManager"
import { TransactionCharts } from "../components/TransactionCharts"
import { Investments } from "../components/Investments"
import { FinancialDashboard } from "../components/FinancialDashboard"
import { Button } from "@/components/ui/button"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

export default function Home() {


const [financialData, setFinancialData] = useState<FinancialData>({
transactions: [],
categories: [
{ id: "1", name: "Food" },
{ id: "2", name: "Transportation" },
{ id: "3", name: "Entertainment" },
{ id: "4", name: "Bills" },
],
investments: [],
})
const [exchangeRate, setExchangeRate] = useState({ ARS: 1, USD: 350 })

useEffect(() => {
// Here you would typically fetch the exchange rate from an API
// For this example, we're using a static value
}, [])

const addTransaction = (transaction: Transaction) => {


setFinancialData((prev) => ({
...prev,
transactions: [...prev.transactions, transaction],
}))
}

const editTransaction = (updatedTransaction: Transaction) => {


setFinancialData((prev) => ({
...prev,
transactions: prev.transactions.map((t) => (t.id === updatedTransaction.id ?
updatedTransaction : t)),
}))
}

const deleteTransaction = (transactionId: string) => {


setFinancialData((prev) => ({
...prev,
transactions: prev.transactions.filter((t) => t.id !== transactionId),
}))
}

const addCategory = (category: Category) => {


setFinancialData((prev) => ({
...prev,
categories: [...prev.categories, category],
}))
}

const editCategory = (updatedCategory: Category) => {


setFinancialData((prev) => ({
...prev,
categories: prev.categories.map((c) => (c.id === updatedCategory.id ?
updatedCategory : c)),
}))
}

const deleteCategory = (categoryId: string) => {


setFinancialData((prev) => ({
...prev,
categories: prev.categories.filter((c) => c.id !== categoryId),
}))
}

const addInvestment = (investment: Investment) => {


setFinancialData((prev) => ({
...prev,
investments: [...prev.investments, investment],
}))
}

const exportTransactions = () => {


const csvContent =
"data:text/csv;charset=utf-8," +
"ID,Description,Amount,Type,Currency,Date,Category\n" +
financialData.transactions
.map((t) => {
const category = financialData.categories.find((c) => c.id ===
t.categoryId)
return `${t.id},${t.description},${t.amount},${t.type},${t.currency},$
{new Date(t.date).toISOString()},${category?.name}`
})
.join("\n")

const encodedUri = encodeURI(csvContent)


const link = document.createElement("a")
link.setAttribute("href", encodedUri)
link.setAttribute("download", "transactions.csv")
document.body.appendChild(link)
link.click()
}

return (
<main className="container mx-auto px-4 py-8">
<h1 className="text-3xl font-bold mb-8 text-center text-primary">My
Finances</h1>
<FinancialDashboard transactions={financialData.transactions}
investments={financialData.investments} />
<Tabs defaultValue="dashboard" className="w-full mt-8">
<TabsList className="grid w-full grid-cols-5">
<TabsTrigger value="dashboard">Dashboard</TabsTrigger>
<TabsTrigger value="transactions">Transactions</TabsTrigger>
<TabsTrigger value="categories">Categories</TabsTrigger>
<TabsTrigger value="investments">Investments</TabsTrigger>
<TabsTrigger value="charts">Charts</TabsTrigger>
</TabsList>
<TabsContent value="dashboard">
<div className="grid gap-8 md:grid-cols-2">
<div>
<h2 className="text-2xl font-semibold mb-4">Add Transaction</h2>
<TransactionForm
onAddTransaction={addTransaction}
categories={financialData.categories}
exchangeRate={exchangeRate.USD}
/>
</div>
<div>
<h2 className="text-2xl font-semibold mb-4">Summary</h2>
<Summary transactions={financialData.transactions} />
</div>
</div>
</TabsContent>
<TabsContent value="transactions">
<h2 className="text-2xl font-semibold mb-4">Transactions</h2>
<TransactionList
transactions={financialData.transactions}
categories={financialData.categories}
onEditTransaction={editTransaction}
onDeleteTransaction={deleteTransaction}
exchangeRate={exchangeRate.USD}
/>
<div className="mt-4">
<Button onClick={exportTransactions}>Export Transactions</Button>
</div>
</TabsContent>
<TabsContent value="categories">
<h2 className="text-2xl font-semibold mb-4">Manage Categories</h2>
<CategoryManager
categories={financialData.categories}
onAddCategory={addCategory}
onEditCategory={editCategory}
onDeleteCategory={deleteCategory}
/>
</TabsContent>
<TabsContent value="investments">
<h2 className="text-2xl font-semibold mb-4">Investments</h2>
<Investments investments={financialData.investments}
onAddInvestment={addInvestment} />
</TabsContent>
<TabsContent value="charts">
<h2 className="text-2xl font-semibold mb-4">Charts</h2>
<TransactionCharts transactions={financialData.transactions} />
</TabsContent>
</Tabs>
</main>
)
}

You might also like