File size: 2,649 Bytes
24d40b9 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 |
import { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import AppLayout from "@/components/layout/AppLayout";
import Header from "@/components/shared/Header";
import TransactionList from "@/components/transactions/TransactionList";
import { Transaction } from "@/components/dashboard/RecentTransactions";
import database from "@/services/database";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
const Transactions = () => {
const [transactions, setTransactions] = useState<Transaction[]>([]);
const [isLoading, setIsLoading] = useState(true);
const navigate = useNavigate();
useEffect(() => {
const loadTransactions = async () => {
try {
await database.initialize();
// Fetch transactions from SQLite
const results = database.exec('SELECT * FROM transactions ORDER BY date DESC');
// Convert the results to our Transaction type
const loadedTransactions: Transaction[] = results.map(row => ({
id: row.id,
title: row.title,
amount: parseFloat(row.amount),
type: row.type as 'income' | 'expense',
category: row.category,
date: new Date(row.date),
note: row.note || undefined
}));
setTransactions(loadedTransactions);
} catch (error) {
console.error('Error loading transactions:', error);
toast.error('Failed to load transactions');
} finally {
setIsLoading(false);
}
};
loadTransactions();
}, []);
return (
<AppLayout>
<div className="max-w-md mx-auto">
<Header
title="Transactions"
subtitle="Manage your financial activities"
/>
<div className="px-4 pb-6">
{isLoading ? (
<div className="flex justify-center py-8">
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
</div>
) : transactions.length > 0 ? (
<TransactionList transactions={transactions} />
) : (
<div className="text-center py-8">
<p className="text-muted-foreground">No transactions found</p>
<Button
onClick={() => navigate('/add-transaction')}
className="mt-4"
>
Add Transaction
</Button>
</div>
)}
</div>
</div>
</AppLayout>
);
};
export default Transactions;
|