Create expenses tracker application with Next.js
This commit is contained in:
@ -13,8 +13,8 @@ const geistMono = Geist_Mono({
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Create Next App",
|
||||
description: "Generated by create next app",
|
||||
title: "Ausgaben Tracker",
|
||||
description: "Eine einfache Anwendung zum Verfolgen von Ausgaben und Einnahmen",
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
|
||||
138
src/app/page.tsx
138
src/app/page.tsx
@ -1,103 +1,51 @@
|
||||
import Image from "next/image";
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Transaction } from '@/types';
|
||||
import TransactionForm from '@/components/TransactionForm';
|
||||
import TransactionList from '@/components/TransactionList';
|
||||
import Summary from '@/components/Summary';
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
|
||||
<main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
|
||||
<Image
|
||||
className="dark:invert"
|
||||
src="/next.svg"
|
||||
alt="Next.js logo"
|
||||
width={180}
|
||||
height={38}
|
||||
priority
|
||||
/>
|
||||
<ol className="list-inside list-decimal text-sm/6 text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
|
||||
<li className="mb-2 tracking-[-.01em]">
|
||||
Get started by editing{" "}
|
||||
<code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-[family-name:var(--font-geist-mono)] font-semibold">
|
||||
src/app/page.tsx
|
||||
</code>
|
||||
.
|
||||
</li>
|
||||
<li className="tracking-[-.01em]">
|
||||
Save and see your changes instantly.
|
||||
</li>
|
||||
</ol>
|
||||
const [transactions, setTransactions] = useState<Transaction[]>([]);
|
||||
|
||||
<div className="flex gap-4 items-center flex-col sm:flex-row">
|
||||
<a
|
||||
className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
|
||||
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
className="dark:invert"
|
||||
src="/vercel.svg"
|
||||
alt="Vercel logomark"
|
||||
width={20}
|
||||
height={20}
|
||||
// Load transactions from localStorage on component mount
|
||||
useEffect(() => {
|
||||
const savedTransactions = localStorage.getItem('transactions');
|
||||
if (savedTransactions) {
|
||||
setTransactions(JSON.parse(savedTransactions));
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Save transactions to localStorage whenever they change
|
||||
useEffect(() => {
|
||||
localStorage.setItem('transactions', JSON.stringify(transactions));
|
||||
}, [transactions]);
|
||||
|
||||
const handleAddTransaction = (transaction: Transaction) => {
|
||||
setTransactions([...transactions, transaction]);
|
||||
};
|
||||
|
||||
const handleDeleteTransaction = (id: string) => {
|
||||
setTransactions(transactions.filter(transaction => transaction.id !== id));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-100 py-8">
|
||||
<div className="container mx-auto px-4">
|
||||
<h1 className="text-3xl font-bold text-center mb-8">Ausgaben Tracker</h1>
|
||||
|
||||
<div className="flex flex-col items-center gap-6">
|
||||
<Summary transactions={transactions} />
|
||||
|
||||
<TransactionForm onAddTransaction={handleAddTransaction} />
|
||||
|
||||
<TransactionList
|
||||
transactions={transactions}
|
||||
onDeleteTransaction={handleDeleteTransaction}
|
||||
/>
|
||||
Deploy now
|
||||
</a>
|
||||
<a
|
||||
className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]"
|
||||
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Read our docs
|
||||
</a>
|
||||
</div>
|
||||
</main>
|
||||
<footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center">
|
||||
<a
|
||||
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
|
||||
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
aria-hidden
|
||||
src="/file.svg"
|
||||
alt="File icon"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
Learn
|
||||
</a>
|
||||
<a
|
||||
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
|
||||
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
aria-hidden
|
||||
src="/window.svg"
|
||||
alt="Window icon"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
Examples
|
||||
</a>
|
||||
<a
|
||||
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
|
||||
href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
aria-hidden
|
||||
src="/globe.svg"
|
||||
alt="Globe icon"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
Go to nextjs.org →
|
||||
</a>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
42
src/components/Summary.tsx
Normal file
42
src/components/Summary.tsx
Normal file
@ -0,0 +1,42 @@
|
||||
import { Transaction } from '@/types';
|
||||
|
||||
interface SummaryProps {
|
||||
transactions: Transaction[];
|
||||
}
|
||||
|
||||
export default function Summary({ transactions }: SummaryProps) {
|
||||
const totalIncome = transactions
|
||||
.filter(t => t.type === 'income')
|
||||
.reduce((sum, transaction) => sum + transaction.amount, 0);
|
||||
|
||||
const totalExpenses = transactions
|
||||
.filter(t => t.type === 'expense')
|
||||
.reduce((sum, transaction) => sum + transaction.amount, 0);
|
||||
|
||||
const balance = totalIncome - totalExpenses;
|
||||
|
||||
return (
|
||||
<div className="w-full max-w-md bg-white p-6 rounded-lg shadow-md mb-6">
|
||||
<h2 className="text-xl font-bold mb-4">Zusammenfassung</h2>
|
||||
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<div className="text-center">
|
||||
<p className="text-sm text-gray-500">Einnahmen</p>
|
||||
<p className="text-lg font-medium text-green-600">+{totalIncome.toFixed(2)} €</p>
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<p className="text-sm text-gray-500">Ausgaben</p>
|
||||
<p className="text-lg font-medium text-red-600">-{totalExpenses.toFixed(2)} €</p>
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<p className="text-sm text-gray-500">Bilanz</p>
|
||||
<p className={`text-lg font-medium ${balance >= 0 ? 'text-green-600' : 'text-red-600'}`}>
|
||||
{balance >= 0 ? '+' : ''}{balance.toFixed(2)} €
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
104
src/components/TransactionForm.tsx
Normal file
104
src/components/TransactionForm.tsx
Normal file
@ -0,0 +1,104 @@
|
||||
import { useState } from 'react';
|
||||
import { Transaction } from '@/types';
|
||||
|
||||
interface TransactionFormProps {
|
||||
onAddTransaction: (transaction: Transaction) => void;
|
||||
}
|
||||
|
||||
export default function TransactionForm({ onAddTransaction }: TransactionFormProps) {
|
||||
const [description, setDescription] = useState('');
|
||||
const [amount, setAmount] = useState('');
|
||||
const [type, setType] = useState<'expense' | 'income'>('expense');
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!description || !amount) return;
|
||||
|
||||
const newTransaction: Transaction = {
|
||||
id: Date.now().toString(),
|
||||
description,
|
||||
amount: parseFloat(amount),
|
||||
type,
|
||||
date: new Date().toISOString().split('T')[0]
|
||||
};
|
||||
|
||||
onAddTransaction(newTransaction);
|
||||
|
||||
// Reset form
|
||||
setDescription('');
|
||||
setAmount('');
|
||||
setType('expense');
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="w-full max-w-md bg-white p-6 rounded-lg shadow-md mb-6">
|
||||
<h2 className="text-xl font-bold mb-4">Neue Transaktion</h2>
|
||||
|
||||
<div className="mb-4">
|
||||
<label htmlFor="description" className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Beschreibung
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="description"
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mb-4">
|
||||
<label htmlFor="amount" className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Betrag (€)
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
id="amount"
|
||||
value={amount}
|
||||
onChange={(e) => setAmount(e.target.value)}
|
||||
step="0.01"
|
||||
min="0.01"
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Typ</label>
|
||||
<div className="flex gap-4">
|
||||
<label className="inline-flex items-center">
|
||||
<input
|
||||
type="radio"
|
||||
name="type"
|
||||
value="expense"
|
||||
checked={type === 'expense'}
|
||||
onChange={() => setType('expense')}
|
||||
className="h-4 w-4 text-blue-600 focus:ring-blue-500"
|
||||
/>
|
||||
<span className="ml-2">Ausgabe</span>
|
||||
</label>
|
||||
<label className="inline-flex items-center">
|
||||
<input
|
||||
type="radio"
|
||||
name="type"
|
||||
value="income"
|
||||
checked={type === 'income'}
|
||||
onChange={() => setType('income')}
|
||||
className="h-4 w-4 text-blue-600 focus:ring-blue-500"
|
||||
/>
|
||||
<span className="ml-2">Einnahme</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
|
||||
>
|
||||
Hinzufügen
|
||||
</button>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
47
src/components/TransactionList.tsx
Normal file
47
src/components/TransactionList.tsx
Normal file
@ -0,0 +1,47 @@
|
||||
import { Transaction } from '@/types';
|
||||
|
||||
interface TransactionListProps {
|
||||
transactions: Transaction[];
|
||||
onDeleteTransaction: (id: string) => void;
|
||||
}
|
||||
|
||||
export default function TransactionList({ transactions, onDeleteTransaction }: TransactionListProps) {
|
||||
if (transactions.length === 0) {
|
||||
return (
|
||||
<div className="w-full max-w-md bg-white p-6 rounded-lg shadow-md">
|
||||
<p className="text-center text-gray-500">Keine Transaktionen vorhanden</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="w-full max-w-md bg-white p-6 rounded-lg shadow-md">
|
||||
<h2 className="text-xl font-bold mb-4">Transaktionen</h2>
|
||||
<ul className="divide-y divide-gray-200">
|
||||
{transactions.map((transaction) => (
|
||||
<li key={transaction.id} className="py-4">
|
||||
<div className="flex justify-between">
|
||||
<div>
|
||||
<p className="font-medium">{transaction.description}</p>
|
||||
<p className="text-sm text-gray-500">{transaction.date}</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className={`font-medium ${transaction.type === 'income' ? 'text-green-600' : 'text-red-600'}`}>
|
||||
{transaction.type === 'income' ? '+' : '-'} {transaction.amount.toFixed(2)} €
|
||||
</span>
|
||||
<button
|
||||
onClick={() => onDeleteTransaction(transaction.id)}
|
||||
className="text-gray-400 hover:text-red-500"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
7
src/types/index.ts
Normal file
7
src/types/index.ts
Normal file
@ -0,0 +1,7 @@
|
||||
export interface Transaction {
|
||||
id: string;
|
||||
description: string;
|
||||
amount: number;
|
||||
type: 'expense' | 'income';
|
||||
date: string;
|
||||
}
|
||||
Reference in New Issue
Block a user