mirror of
https://github.com/dat515-2025/Group-8.git
synced 2026-03-22 15:12:08 +01:00
refactor(structure): remove frontend placeholder
Some checks failed
Build, Push and Update Image in Manifest / build-and-update (push) Has been cancelled
Some checks failed
Build, Push and Update Image in Manifest / build-and-update (push) Has been cancelled
This commit is contained in:
@@ -1,3 +0,0 @@
|
|||||||
# API Configuration
|
|
||||||
VITE_API_BASE_URL=http://localhost:8000
|
|
||||||
VITE_ENVIRONMENT=development
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
finance-tracker-bolt
|
|
||||||
@@ -1,28 +0,0 @@
|
|||||||
import js from '@eslint/js';
|
|
||||||
import globals from 'globals';
|
|
||||||
import reactHooks from 'eslint-plugin-react-hooks';
|
|
||||||
import reactRefresh from 'eslint-plugin-react-refresh';
|
|
||||||
import tseslint from 'typescript-eslint';
|
|
||||||
|
|
||||||
export default tseslint.config(
|
|
||||||
{ ignores: ['dist'] },
|
|
||||||
{
|
|
||||||
extends: [js.configs.recommended, ...tseslint.configs.recommended],
|
|
||||||
files: ['**/*.{ts,tsx}'],
|
|
||||||
languageOptions: {
|
|
||||||
ecmaVersion: 2020,
|
|
||||||
globals: globals.browser,
|
|
||||||
},
|
|
||||||
plugins: {
|
|
||||||
'react-hooks': reactHooks,
|
|
||||||
'react-refresh': reactRefresh,
|
|
||||||
},
|
|
||||||
rules: {
|
|
||||||
...reactHooks.configs.recommended.rules,
|
|
||||||
'react-refresh/only-export-components': [
|
|
||||||
'warn',
|
|
||||||
{ allowConstantExport: true },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
}
|
|
||||||
);
|
|
||||||
@@ -1,13 +0,0 @@
|
|||||||
<!doctype html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
||||||
<title>Personal Finance Tracker React App</title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="root"></div>
|
|
||||||
<script type="module" src="/src/main.tsx"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
4923
7project/frontend/package-lock.json
generated
4923
7project/frontend/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -1,40 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "vite-react-typescript-starter",
|
|
||||||
"private": true,
|
|
||||||
"version": "0.0.0",
|
|
||||||
"type": "module",
|
|
||||||
"scripts": {
|
|
||||||
"dev": "vite",
|
|
||||||
"build": "vite build",
|
|
||||||
"lint": "eslint .",
|
|
||||||
"preview": "vite preview"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"@hookform/resolvers": "^5.2.2",
|
|
||||||
"@supabase/supabase-js": "^2.57.4",
|
|
||||||
"axios": "^1.12.2",
|
|
||||||
"lucide-react": "^0.344.0",
|
|
||||||
"react": "^18.3.1",
|
|
||||||
"react-dom": "^18.3.1",
|
|
||||||
"react-hook-form": "^7.63.0",
|
|
||||||
"react-router-dom": "^7.9.1",
|
|
||||||
"recharts": "^3.2.1",
|
|
||||||
"yup": "^1.7.1"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"@eslint/js": "^9.9.1",
|
|
||||||
"@types/react": "^18.3.5",
|
|
||||||
"@types/react-dom": "^18.3.0",
|
|
||||||
"@vitejs/plugin-react": "^4.3.1",
|
|
||||||
"autoprefixer": "^10.4.18",
|
|
||||||
"eslint": "^9.9.1",
|
|
||||||
"eslint-plugin-react-hooks": "^5.1.0-rc.0",
|
|
||||||
"eslint-plugin-react-refresh": "^0.4.11",
|
|
||||||
"globals": "^15.9.0",
|
|
||||||
"postcss": "^8.4.35",
|
|
||||||
"tailwindcss": "^3.4.1",
|
|
||||||
"typescript": "^5.5.3",
|
|
||||||
"typescript-eslint": "^8.3.0",
|
|
||||||
"vite": "^5.4.2"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,6 +0,0 @@
|
|||||||
export default {
|
|
||||||
plugins: {
|
|
||||||
tailwindcss: {},
|
|
||||||
autoprefixer: {},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
@@ -1,110 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
|
|
||||||
import { AuthProvider, useAuth } from './contexts/AuthContext';
|
|
||||||
import { Layout } from './components/Layout';
|
|
||||||
import { ProtectedRoute } from './components/ProtectedRoute';
|
|
||||||
import { Login } from './components/Login';
|
|
||||||
import { Register } from './components/Register';
|
|
||||||
import { Dashboard } from './components/Dashboard';
|
|
||||||
import { Transactions } from './components/Transactions';
|
|
||||||
|
|
||||||
const AppRoutes: React.FC = () => {
|
|
||||||
const { user, loading } = useAuth();
|
|
||||||
|
|
||||||
if (loading) {
|
|
||||||
return (
|
|
||||||
<div className="min-h-screen flex items-center justify-center bg-gray-50">
|
|
||||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Routes>
|
|
||||||
{!user ? (
|
|
||||||
<>
|
|
||||||
<Route path="/login" element={<Login />} />
|
|
||||||
<Route path="/register" element={<Register />} />
|
|
||||||
<Route path="*" element={<Navigate to="/login" replace />} />
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<Route path="/" element={
|
|
||||||
<ProtectedRoute>
|
|
||||||
<Layout>
|
|
||||||
<Dashboard />
|
|
||||||
</Layout>
|
|
||||||
</ProtectedRoute>
|
|
||||||
} />
|
|
||||||
<Route path="/transactions" element={
|
|
||||||
<ProtectedRoute>
|
|
||||||
<Layout>
|
|
||||||
<Transactions />
|
|
||||||
</Layout>
|
|
||||||
</ProtectedRoute>
|
|
||||||
} />
|
|
||||||
<Route path="/analytics" element={
|
|
||||||
<ProtectedRoute>
|
|
||||||
<Layout>
|
|
||||||
<Dashboard />
|
|
||||||
</Layout>
|
|
||||||
</ProtectedRoute>
|
|
||||||
} />
|
|
||||||
<Route path="/profile" element={
|
|
||||||
<ProtectedRoute>
|
|
||||||
<Layout>
|
|
||||||
<div className="p-6">
|
|
||||||
<h1 className="text-2xl font-bold text-gray-900">Profile</h1>
|
|
||||||
<p className="mt-4 text-gray-600">Profile management coming soon...</p>
|
|
||||||
</div>
|
|
||||||
</Layout>
|
|
||||||
</ProtectedRoute>
|
|
||||||
} />
|
|
||||||
<Route path="/settings" element={
|
|
||||||
<ProtectedRoute>
|
|
||||||
<Layout>
|
|
||||||
<div className="p-6">
|
|
||||||
<h1 className="text-2xl font-bold text-gray-900">Settings</h1>
|
|
||||||
<div className="mt-4 bg-white rounded-lg shadow-sm p-6 border border-gray-200">
|
|
||||||
<h2 className="text-lg font-semibold mb-4">API Configuration</h2>
|
|
||||||
<div className="space-y-4">
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-700">
|
|
||||||
API Base URL
|
|
||||||
</label>
|
|
||||||
<p className="mt-1 text-sm text-gray-600">
|
|
||||||
{import.meta.env.VITE_API_BASE_URL || 'http://localhost:8000'}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-700">
|
|
||||||
Environment
|
|
||||||
</label>
|
|
||||||
<p className="mt-1 text-sm text-gray-600">
|
|
||||||
{import.meta.env.VITE_ENVIRONMENT || 'development'}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Layout>
|
|
||||||
</ProtectedRoute>
|
|
||||||
} />
|
|
||||||
<Route path="*" element={<Navigate to="/" replace />} />
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</Routes>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
function App() {
|
|
||||||
return (
|
|
||||||
<Router>
|
|
||||||
<AuthProvider>
|
|
||||||
<AppRoutes />
|
|
||||||
</AuthProvider>
|
|
||||||
</Router>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default App;
|
|
||||||
@@ -1,194 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import { PieChart, Pie, Cell, ResponsiveContainer, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';
|
|
||||||
import { TrendingUp, TrendingDown, DollarSign, CreditCard } from 'lucide-react';
|
|
||||||
import { useTransactions } from '../hooks/useTransactions';
|
|
||||||
|
|
||||||
const COLORS = ['#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6', '#F97316'];
|
|
||||||
|
|
||||||
export const Dashboard: React.FC = () => {
|
|
||||||
const { summary, transactions, loading } = useTransactions();
|
|
||||||
|
|
||||||
if (loading) {
|
|
||||||
return (
|
|
||||||
<div className="p-6">
|
|
||||||
<div className="animate-pulse space-y-6">
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
||||||
{[...Array(3)].map((_, i) => (
|
|
||||||
<div key={i} className="h-24 bg-gray-200 rounded-lg"></div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
||||||
<div className="h-80 bg-gray-200 rounded-lg"></div>
|
|
||||||
<div className="h-80 bg-gray-200 rounded-lg"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const recentTransactions = transactions.slice(0, 5);
|
|
||||||
const monthlyData = transactions.reduce((acc, transaction) => {
|
|
||||||
const month = new Date(transaction.date).toLocaleDateString('en-US', { month: 'short' });
|
|
||||||
const existing = acc.find(item => item.month === month);
|
|
||||||
|
|
||||||
if (existing) {
|
|
||||||
if (transaction.type === 'income') {
|
|
||||||
existing.income += transaction.amount;
|
|
||||||
} else {
|
|
||||||
existing.expenses += transaction.amount;
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
acc.push({
|
|
||||||
month,
|
|
||||||
income: transaction.type === 'income' ? transaction.amount : 0,
|
|
||||||
expenses: transaction.type === 'expense' ? transaction.amount : 0,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
return acc;
|
|
||||||
}, [] as Array<{ month: string; income: number; expenses: number; }>);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="p-6 space-y-6">
|
|
||||||
{/* Summary Cards */}
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
||||||
<div className="bg-white rounded-lg shadow-sm p-6 border border-gray-200">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<div>
|
|
||||||
<p className="text-sm font-medium text-gray-500">Total Balance</p>
|
|
||||||
<p className={`text-2xl font-bold ${summary.balance >= 0 ? 'text-green-600' : 'text-red-600'}`}>
|
|
||||||
${summary.balance.toLocaleString('en-US', { minimumFractionDigits: 2 })}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className={`p-3 rounded-full ${summary.balance >= 0 ? 'bg-green-100' : 'bg-red-100'}`}>
|
|
||||||
<DollarSign className={`h-6 w-6 ${summary.balance >= 0 ? 'text-green-600' : 'text-red-600'}`} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="bg-white rounded-lg shadow-sm p-6 border border-gray-200">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<div>
|
|
||||||
<p className="text-sm font-medium text-gray-500">Total Income</p>
|
|
||||||
<p className="text-2xl font-bold text-green-600">
|
|
||||||
${summary.totalIncome.toLocaleString('en-US', { minimumFractionDigits: 2 })}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="p-3 rounded-full bg-green-100">
|
|
||||||
<TrendingUp className="h-6 w-6 text-green-600" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="bg-white rounded-lg shadow-sm p-6 border border-gray-200">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<div>
|
|
||||||
<p className="text-sm font-medium text-gray-500">Total Expenses</p>
|
|
||||||
<p className="text-2xl font-bold text-red-600">
|
|
||||||
${summary.totalExpenses.toLocaleString('en-US', { minimumFractionDigits: 2 })}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="p-3 rounded-full bg-red-100">
|
|
||||||
<TrendingDown className="h-6 w-6 text-red-600" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Charts */}
|
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
||||||
{/* Category Breakdown */}
|
|
||||||
<div className="bg-white rounded-lg shadow-sm p-6 border border-gray-200">
|
|
||||||
<h3 className="text-lg font-semibold text-gray-900 mb-4">Spending by Category</h3>
|
|
||||||
{summary.categoryBreakdown.length > 0 ? (
|
|
||||||
<ResponsiveContainer width="100%" height={300}>
|
|
||||||
<PieChart>
|
|
||||||
<Pie
|
|
||||||
data={summary.categoryBreakdown}
|
|
||||||
cx="50%"
|
|
||||||
cy="50%"
|
|
||||||
labelLine={false}
|
|
||||||
label={({ category, percentage }) => `${category} (${percentage.toFixed(1)}%)`}
|
|
||||||
outerRadius={80}
|
|
||||||
fill="#8884d8"
|
|
||||||
dataKey="amount"
|
|
||||||
>
|
|
||||||
{summary.categoryBreakdown.map((entry, index) => (
|
|
||||||
<Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
|
|
||||||
))}
|
|
||||||
</Pie>
|
|
||||||
<Tooltip formatter={(value: number) => [`$${value.toFixed(2)}`, 'Amount']} />
|
|
||||||
</PieChart>
|
|
||||||
</ResponsiveContainer>
|
|
||||||
) : (
|
|
||||||
<div className="flex items-center justify-center h-64 text-gray-500">
|
|
||||||
No transactions yet
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Monthly Trends */}
|
|
||||||
<div className="bg-white rounded-lg shadow-sm p-6 border border-gray-200">
|
|
||||||
<h3 className="text-lg font-semibold text-gray-900 mb-4">Monthly Trends</h3>
|
|
||||||
{monthlyData.length > 0 ? (
|
|
||||||
<ResponsiveContainer width="100%" height={300}>
|
|
||||||
<BarChart data={monthlyData}>
|
|
||||||
<CartesianGrid strokeDasharray="3 3" />
|
|
||||||
<XAxis dataKey="month" />
|
|
||||||
<YAxis />
|
|
||||||
<Tooltip formatter={(value: number) => [`$${value.toFixed(2)}`, '']} />
|
|
||||||
<Legend />
|
|
||||||
<Bar dataKey="income" fill="#10B981" name="Income" />
|
|
||||||
<Bar dataKey="expenses" fill="#EF4444" name="Expenses" />
|
|
||||||
</BarChart>
|
|
||||||
</ResponsiveContainer>
|
|
||||||
) : (
|
|
||||||
<div className="flex items-center justify-center h-64 text-gray-500">
|
|
||||||
No data available
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Recent Transactions */}
|
|
||||||
<div className="bg-white rounded-lg shadow-sm border border-gray-200">
|
|
||||||
<div className="p-6 border-b border-gray-200">
|
|
||||||
<h3 className="text-lg font-semibold text-gray-900">Recent Transactions</h3>
|
|
||||||
</div>
|
|
||||||
<div className="divide-y divide-gray-200">
|
|
||||||
{recentTransactions.length > 0 ? (
|
|
||||||
recentTransactions.map((transaction) => (
|
|
||||||
<div key={transaction.id} className="p-6 flex items-center justify-between hover:bg-gray-50 transition-colors">
|
|
||||||
<div className="flex items-center space-x-3">
|
|
||||||
<div className={`p-2 rounded-full ${
|
|
||||||
transaction.type === 'income' ? 'bg-green-100' :
|
|
||||||
transaction.type === 'expense' ? 'bg-red-100' : 'bg-blue-100'
|
|
||||||
}`}>
|
|
||||||
<CreditCard className={`h-4 w-4 ${
|
|
||||||
transaction.type === 'income' ? 'text-green-600' :
|
|
||||||
transaction.type === 'expense' ? 'text-red-600' : 'text-blue-600'
|
|
||||||
}`} />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p className="text-sm font-medium text-gray-900">{transaction.description}</p>
|
|
||||||
<p className="text-sm text-gray-500">
|
|
||||||
{transaction.category?.name} • {new Date(transaction.date).toLocaleDateString()}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<span className={`text-sm font-medium ${
|
|
||||||
transaction.type === 'income' ? 'text-green-600' : 'text-red-600'
|
|
||||||
}`}>
|
|
||||||
{transaction.type === 'income' ? '+' : '-'}${transaction.amount.toFixed(2)}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
))
|
|
||||||
) : (
|
|
||||||
<div className="p-6 text-center text-gray-500">
|
|
||||||
No transactions yet. Add your first transaction to get started.
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@@ -1,158 +0,0 @@
|
|||||||
import React, { useState } from 'react';
|
|
||||||
import { Link, useLocation, useNavigate } from 'react-router-dom';
|
|
||||||
import {
|
|
||||||
Home,
|
|
||||||
CreditCard,
|
|
||||||
PieChart,
|
|
||||||
User,
|
|
||||||
Settings,
|
|
||||||
LogOut,
|
|
||||||
Menu,
|
|
||||||
X,
|
|
||||||
DollarSign
|
|
||||||
} from 'lucide-react';
|
|
||||||
import { useAuth } from '../contexts/AuthContext';
|
|
||||||
|
|
||||||
interface LayoutProps {
|
|
||||||
children: React.ReactNode;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const Layout: React.FC<LayoutProps> = ({ children }) => {
|
|
||||||
const [sidebarOpen, setSidebarOpen] = useState(false);
|
|
||||||
const { user, logout } = useAuth();
|
|
||||||
const location = useLocation();
|
|
||||||
const navigate = useNavigate();
|
|
||||||
|
|
||||||
const navigation = [
|
|
||||||
{ name: 'Dashboard', href: '/', icon: Home },
|
|
||||||
{ name: 'Transactions', href: '/transactions', icon: CreditCard },
|
|
||||||
{ name: 'Analytics', href: '/analytics', icon: PieChart },
|
|
||||||
{ name: 'Profile', href: '/profile', icon: User },
|
|
||||||
{ name: 'Settings', href: '/settings', icon: Settings },
|
|
||||||
];
|
|
||||||
|
|
||||||
const handleLogout = async () => {
|
|
||||||
await logout();
|
|
||||||
navigate('/login');
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="min-h-screen bg-gray-50">
|
|
||||||
{/* Mobile sidebar */}
|
|
||||||
<div className={`lg:hidden ${sidebarOpen ? 'block' : 'hidden'}`}>
|
|
||||||
<div className="fixed inset-0 z-50 flex">
|
|
||||||
<div className="relative flex w-full max-w-xs flex-1 flex-col bg-white shadow-xl">
|
|
||||||
<div className="absolute top-0 right-0 -mr-12 pt-2">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="ml-1 flex h-10 w-10 items-center justify-center rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
|
|
||||||
onClick={() => setSidebarOpen(false)}
|
|
||||||
>
|
|
||||||
<X className="h-6 w-6 text-white" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-1 flex-col overflow-y-auto pb-4 pt-5">
|
|
||||||
<div className="flex items-center flex-shrink-0 px-4">
|
|
||||||
<DollarSign className="h-8 w-8 text-blue-600" />
|
|
||||||
<span className="ml-2 text-xl font-bold text-gray-900">FinanceTracker</span>
|
|
||||||
</div>
|
|
||||||
<nav className="mt-8 flex-1 space-y-1 px-2">
|
|
||||||
{navigation.map((item) => {
|
|
||||||
const isActive = location.pathname === item.href;
|
|
||||||
return (
|
|
||||||
<Link
|
|
||||||
key={item.name}
|
|
||||||
to={item.href}
|
|
||||||
className={`group flex items-center px-2 py-2 text-base font-medium rounded-md transition-colors ${
|
|
||||||
isActive
|
|
||||||
? 'bg-blue-100 text-blue-900'
|
|
||||||
: 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'
|
|
||||||
}`}
|
|
||||||
onClick={() => setSidebarOpen(false)}
|
|
||||||
>
|
|
||||||
<item.icon className={`mr-4 h-6 w-6 ${isActive ? 'text-blue-500' : 'text-gray-400'}`} />
|
|
||||||
{item.name}
|
|
||||||
</Link>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="w-14 flex-shrink-0"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Desktop sidebar */}
|
|
||||||
<div className="hidden lg:fixed lg:inset-y-0 lg:flex lg:w-64 lg:flex-col">
|
|
||||||
<div className="flex flex-1 flex-col min-h-0 bg-white shadow-lg">
|
|
||||||
<div className="flex items-center h-16 flex-shrink-0 px-4 bg-white border-b border-gray-200">
|
|
||||||
<DollarSign className="h-8 w-8 text-blue-600" />
|
|
||||||
<span className="ml-2 text-xl font-bold text-gray-900">FinanceTracker</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex-1 flex flex-col overflow-y-auto">
|
|
||||||
<nav className="flex-1 px-2 py-4 space-y-1">
|
|
||||||
{navigation.map((item) => {
|
|
||||||
const isActive = location.pathname === item.href;
|
|
||||||
return (
|
|
||||||
<Link
|
|
||||||
key={item.name}
|
|
||||||
to={item.href}
|
|
||||||
className={`group flex items-center px-2 py-2 text-sm font-medium rounded-md transition-colors ${
|
|
||||||
isActive
|
|
||||||
? 'bg-blue-100 text-blue-900'
|
|
||||||
: 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<item.icon className={`mr-3 h-5 w-5 ${isActive ? 'text-blue-500' : 'text-gray-400'}`} />
|
|
||||||
{item.name}
|
|
||||||
</Link>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Main content */}
|
|
||||||
<div className="lg:pl-64 flex flex-col flex-1">
|
|
||||||
{/* Header */}
|
|
||||||
<div className="sticky top-0 z-40 flex h-16 flex-shrink-0 items-center gap-x-4 border-b border-gray-200 bg-white px-4 shadow-sm sm:gap-x-6 sm:px-6 lg:px-8">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="p-2.5 text-gray-700 lg:hidden"
|
|
||||||
onClick={() => setSidebarOpen(true)}
|
|
||||||
>
|
|
||||||
<Menu className="h-6 w-6" />
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div className="flex flex-1 gap-x-4 self-stretch lg:gap-x-6">
|
|
||||||
<div className="flex flex-1 items-center">
|
|
||||||
<h1 className="text-lg font-semibold text-gray-900">
|
|
||||||
{navigation.find(item => item.href === location.pathname)?.name || 'Finance Tracker'}
|
|
||||||
</h1>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-x-4 lg:gap-x-6">
|
|
||||||
<div className="flex items-center gap-x-2">
|
|
||||||
<div className="text-sm text-gray-500">
|
|
||||||
Welcome, {user?.first_name || user?.email?.split('@')[0]}
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
onClick={handleLogout}
|
|
||||||
className="flex items-center gap-x-2 rounded-md bg-gray-100 px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-200 transition-colors"
|
|
||||||
>
|
|
||||||
<LogOut className="h-4 w-4" />
|
|
||||||
Logout
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Page content */}
|
|
||||||
<main className="flex-1">
|
|
||||||
{children}
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@@ -1,126 +0,0 @@
|
|||||||
import React, { useState } from 'react';
|
|
||||||
import { Link, useNavigate } from 'react-router-dom';
|
|
||||||
import { useForm } from 'react-hook-form';
|
|
||||||
import { yupResolver } from '@hookform/resolvers/yup';
|
|
||||||
import * as yup from 'yup';
|
|
||||||
import { DollarSign, Eye, EyeOff } from 'lucide-react';
|
|
||||||
import { useAuth } from '../contexts/AuthContext';
|
|
||||||
import { LoginCredentials } from '../types';
|
|
||||||
|
|
||||||
const schema = yup.object({
|
|
||||||
email: yup.string().email('Invalid email').required('Email is required'),
|
|
||||||
password: yup.string().required('Password is required'),
|
|
||||||
});
|
|
||||||
|
|
||||||
export const Login: React.FC = () => {
|
|
||||||
const [showPassword, setShowPassword] = useState(false);
|
|
||||||
const [error, setError] = useState('');
|
|
||||||
const { login } = useAuth();
|
|
||||||
const navigate = useNavigate();
|
|
||||||
|
|
||||||
const {
|
|
||||||
register,
|
|
||||||
handleSubmit,
|
|
||||||
formState: { errors, isSubmitting },
|
|
||||||
} = useForm<LoginCredentials>({
|
|
||||||
resolver: yupResolver(schema),
|
|
||||||
});
|
|
||||||
|
|
||||||
const onSubmit = async (data: LoginCredentials) => {
|
|
||||||
try {
|
|
||||||
setError('');
|
|
||||||
await login(data);
|
|
||||||
navigate('/');
|
|
||||||
} catch (err) {
|
|
||||||
setError('Invalid email or password');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
|
|
||||||
<div className="max-w-md w-full space-y-8">
|
|
||||||
<div>
|
|
||||||
<div className="flex justify-center">
|
|
||||||
<DollarSign className="h-12 w-12 text-blue-600" />
|
|
||||||
</div>
|
|
||||||
<h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
|
|
||||||
Sign in to your account
|
|
||||||
</h2>
|
|
||||||
<p className="mt-2 text-center text-sm text-gray-600">
|
|
||||||
Or{' '}
|
|
||||||
<Link
|
|
||||||
to="/register"
|
|
||||||
className="font-medium text-blue-600 hover:text-blue-500 transition-colors"
|
|
||||||
>
|
|
||||||
create a new account
|
|
||||||
</Link>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<form className="mt-8 space-y-6" onSubmit={handleSubmit(onSubmit)}>
|
|
||||||
{error && (
|
|
||||||
<div className="rounded-md bg-red-50 p-4">
|
|
||||||
<div className="text-sm text-red-700">{error}</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="rounded-md shadow-sm space-y-4">
|
|
||||||
<div>
|
|
||||||
<label htmlFor="email" className="block text-sm font-medium text-gray-700">
|
|
||||||
Email address
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
{...register('email')}
|
|
||||||
type="email"
|
|
||||||
autoComplete="email"
|
|
||||||
className="mt-1 appearance-none rounded-md relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm"
|
|
||||||
placeholder="Enter your email"
|
|
||||||
/>
|
|
||||||
{errors.email && (
|
|
||||||
<p className="mt-1 text-sm text-red-600">{errors.email.message}</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label htmlFor="password" className="block text-sm font-medium text-gray-700">
|
|
||||||
Password
|
|
||||||
</label>
|
|
||||||
<div className="mt-1 relative">
|
|
||||||
<input
|
|
||||||
{...register('password')}
|
|
||||||
type={showPassword ? 'text' : 'password'}
|
|
||||||
autoComplete="current-password"
|
|
||||||
className="appearance-none rounded-md relative block w-full px-3 py-2 pr-10 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm"
|
|
||||||
placeholder="Enter your password"
|
|
||||||
/>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="absolute inset-y-0 right-0 pr-3 flex items-center"
|
|
||||||
onClick={() => setShowPassword(!showPassword)}
|
|
||||||
>
|
|
||||||
{showPassword ? (
|
|
||||||
<EyeOff className="h-5 w-5 text-gray-400" />
|
|
||||||
) : (
|
|
||||||
<Eye className="h-5 w-5 text-gray-400" />
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
{errors.password && (
|
|
||||||
<p className="mt-1 text-sm text-red-600">{errors.password.message}</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
disabled={isSubmitting}
|
|
||||||
className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
|
||||||
>
|
|
||||||
{isSubmitting ? 'Signing in...' : 'Sign in'}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@@ -1,25 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import { Navigate } from 'react-router-dom';
|
|
||||||
import { useAuth } from '../contexts/AuthContext';
|
|
||||||
|
|
||||||
interface ProtectedRouteProps {
|
|
||||||
children: React.ReactNode;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const ProtectedRoute: React.FC<ProtectedRouteProps> = ({ children }) => {
|
|
||||||
const { user, loading } = useAuth();
|
|
||||||
|
|
||||||
if (loading) {
|
|
||||||
return (
|
|
||||||
<div className="min-h-screen flex items-center justify-center">
|
|
||||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!user) {
|
|
||||||
return <Navigate to="/login" replace />;
|
|
||||||
}
|
|
||||||
|
|
||||||
return <>{children}</>;
|
|
||||||
};
|
|
||||||
@@ -1,160 +0,0 @@
|
|||||||
import React, { useState } from 'react';
|
|
||||||
import { Link, useNavigate } from 'react-router-dom';
|
|
||||||
import { useForm } from 'react-hook-form';
|
|
||||||
import { yupResolver } from '@hookform/resolvers/yup';
|
|
||||||
import * as yup from 'yup';
|
|
||||||
import { DollarSign, Eye, EyeOff } from 'lucide-react';
|
|
||||||
import { useAuth } from '../contexts/AuthContext';
|
|
||||||
import { RegisterData } from '../types';
|
|
||||||
|
|
||||||
const schema = yup.object({
|
|
||||||
email: yup.string().email('Invalid email').required('Email is required'),
|
|
||||||
password: yup.string().min(6, 'Password must be at least 6 characters').required('Password is required'),
|
|
||||||
first_name: yup.string(),
|
|
||||||
last_name: yup.string(),
|
|
||||||
});
|
|
||||||
|
|
||||||
export const Register: React.FC = () => {
|
|
||||||
const [showPassword, setShowPassword] = useState(false);
|
|
||||||
const [error, setError] = useState('');
|
|
||||||
const { register: registerUser } = useAuth();
|
|
||||||
const navigate = useNavigate();
|
|
||||||
|
|
||||||
const {
|
|
||||||
register,
|
|
||||||
handleSubmit,
|
|
||||||
formState: { errors, isSubmitting },
|
|
||||||
} = useForm<RegisterData>({
|
|
||||||
resolver: yupResolver(schema),
|
|
||||||
});
|
|
||||||
|
|
||||||
const onSubmit = async (data: RegisterData) => {
|
|
||||||
try {
|
|
||||||
setError('');
|
|
||||||
await registerUser(data);
|
|
||||||
navigate('/');
|
|
||||||
} catch (err) {
|
|
||||||
setError('Registration failed. Please try again.');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
|
|
||||||
<div className="max-w-md w-full space-y-8">
|
|
||||||
<div>
|
|
||||||
<div className="flex justify-center">
|
|
||||||
<DollarSign className="h-12 w-12 text-blue-600" />
|
|
||||||
</div>
|
|
||||||
<h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
|
|
||||||
Create your account
|
|
||||||
</h2>
|
|
||||||
<p className="mt-2 text-center text-sm text-gray-600">
|
|
||||||
Or{' '}
|
|
||||||
<Link
|
|
||||||
to="/login"
|
|
||||||
className="font-medium text-blue-600 hover:text-blue-500 transition-colors"
|
|
||||||
>
|
|
||||||
sign in to your existing account
|
|
||||||
</Link>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<form className="mt-8 space-y-6" onSubmit={handleSubmit(onSubmit)}>
|
|
||||||
{error && (
|
|
||||||
<div className="rounded-md bg-red-50 p-4">
|
|
||||||
<div className="text-sm text-red-700">{error}</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="space-y-4">
|
|
||||||
<div className="grid grid-cols-2 gap-4">
|
|
||||||
<div>
|
|
||||||
<label htmlFor="first_name" className="block text-sm font-medium text-gray-700">
|
|
||||||
First Name
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
{...register('first_name')}
|
|
||||||
type="text"
|
|
||||||
className="mt-1 appearance-none rounded-md relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
|
|
||||||
placeholder="First name"
|
|
||||||
/>
|
|
||||||
{errors.first_name && (
|
|
||||||
<p className="mt-1 text-sm text-red-600">{errors.first_name.message}</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label htmlFor="last_name" className="block text-sm font-medium text-gray-700">
|
|
||||||
Last Name
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
{...register('last_name')}
|
|
||||||
type="text"
|
|
||||||
className="mt-1 appearance-none rounded-md relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
|
|
||||||
placeholder="Last name"
|
|
||||||
/>
|
|
||||||
{errors.last_name && (
|
|
||||||
<p className="mt-1 text-sm text-red-600">{errors.last_name.message}</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label htmlFor="email" className="block text-sm font-medium text-gray-700">
|
|
||||||
Email address
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
{...register('email')}
|
|
||||||
type="email"
|
|
||||||
autoComplete="email"
|
|
||||||
className="mt-1 appearance-none rounded-md relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
|
|
||||||
placeholder="Enter your email"
|
|
||||||
/>
|
|
||||||
{errors.email && (
|
|
||||||
<p className="mt-1 text-sm text-red-600">{errors.email.message}</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label htmlFor="password" className="block text-sm font-medium text-gray-700">
|
|
||||||
Password
|
|
||||||
</label>
|
|
||||||
<div className="mt-1 relative">
|
|
||||||
<input
|
|
||||||
{...register('password')}
|
|
||||||
type={showPassword ? 'text' : 'password'}
|
|
||||||
autoComplete="new-password"
|
|
||||||
className="appearance-none rounded-md relative block w-full px-3 py-2 pr-10 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
|
|
||||||
placeholder="Enter your password"
|
|
||||||
/>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="absolute inset-y-0 right-0 pr-3 flex items-center"
|
|
||||||
onClick={() => setShowPassword(!showPassword)}
|
|
||||||
>
|
|
||||||
{showPassword ? (
|
|
||||||
<EyeOff className="h-5 w-5 text-gray-400" />
|
|
||||||
) : (
|
|
||||||
<Eye className="h-5 w-5 text-gray-400" />
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
{errors.password && (
|
|
||||||
<p className="mt-1 text-sm text-red-600">{errors.password.message}</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
disabled={isSubmitting}
|
|
||||||
className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
|
||||||
>
|
|
||||||
{isSubmitting ? 'Creating account...' : 'Create account'}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@@ -1,178 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import { useForm } from 'react-hook-form';
|
|
||||||
import { yupResolver } from '@hookform/resolvers/yup';
|
|
||||||
import * as yup from 'yup';
|
|
||||||
import { Transaction, Category } from '../types';
|
|
||||||
import { X } from 'lucide-react';
|
|
||||||
|
|
||||||
const schema = yup.object({
|
|
||||||
amount: yup.number().required('Amount is required').min(0.01, 'Amount must be greater than 0'),
|
|
||||||
description: yup.string().required('Description is required'),
|
|
||||||
category_id: yup.string().required('Category is required'),
|
|
||||||
date: yup.string().required('Date is required'),
|
|
||||||
type: yup.string().oneOf(['income', 'expense', 'transfer']).required('Type is required'),
|
|
||||||
});
|
|
||||||
|
|
||||||
type FormData = yup.InferType<typeof schema>;
|
|
||||||
|
|
||||||
interface TransactionFormProps {
|
|
||||||
transaction?: Transaction;
|
|
||||||
categories: Category[];
|
|
||||||
onSubmit: (data: FormData) => Promise<void>;
|
|
||||||
onClose: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const TransactionForm: React.FC<TransactionFormProps> = ({
|
|
||||||
transaction,
|
|
||||||
categories,
|
|
||||||
onSubmit,
|
|
||||||
onClose,
|
|
||||||
}) => {
|
|
||||||
const {
|
|
||||||
register,
|
|
||||||
handleSubmit,
|
|
||||||
watch,
|
|
||||||
formState: { errors, isSubmitting },
|
|
||||||
} = useForm<FormData>({
|
|
||||||
resolver: yupResolver(schema),
|
|
||||||
defaultValues: {
|
|
||||||
amount: transaction?.amount || 0,
|
|
||||||
description: transaction?.description || '',
|
|
||||||
category_id: transaction?.category_id || '',
|
|
||||||
date: transaction?.date || new Date().toISOString().split('T')[0],
|
|
||||||
type: transaction?.type || 'expense',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const selectedType = watch('type');
|
|
||||||
const filteredCategories = categories.filter(cat => cat.type === selectedType);
|
|
||||||
|
|
||||||
const handleFormSubmit = async (data: FormData) => {
|
|
||||||
try {
|
|
||||||
await onSubmit(data);
|
|
||||||
onClose();
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Form submission error:', error);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
|
|
||||||
<div className="bg-white rounded-lg shadow-xl max-w-md w-full max-h-[90vh] overflow-y-auto">
|
|
||||||
<div className="flex items-center justify-between p-6 border-b">
|
|
||||||
<h2 className="text-lg font-semibold text-gray-900">
|
|
||||||
{transaction ? 'Edit Transaction' : 'Add Transaction'}
|
|
||||||
</h2>
|
|
||||||
<button
|
|
||||||
onClick={onClose}
|
|
||||||
className="text-gray-400 hover:text-gray-500 transition-colors"
|
|
||||||
>
|
|
||||||
<X className="h-6 w-6" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<form onSubmit={handleSubmit(handleFormSubmit)} className="p-6 space-y-4">
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
||||||
Type
|
|
||||||
</label>
|
|
||||||
<select
|
|
||||||
{...register('type')}
|
|
||||||
className="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
|
|
||||||
>
|
|
||||||
<option value="expense">Expense</option>
|
|
||||||
<option value="income">Income</option>
|
|
||||||
<option value="transfer">Transfer</option>
|
|
||||||
</select>
|
|
||||||
{errors.type && (
|
|
||||||
<p className="mt-1 text-sm text-red-600">{errors.type.message}</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
||||||
Amount
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="number"
|
|
||||||
step="0.01"
|
|
||||||
min="0"
|
|
||||||
{...register('amount')}
|
|
||||||
className="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
|
|
||||||
placeholder="0.00"
|
|
||||||
/>
|
|
||||||
{errors.amount && (
|
|
||||||
<p className="mt-1 text-sm text-red-600">{errors.amount.message}</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
||||||
Description
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
{...register('description')}
|
|
||||||
className="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
|
|
||||||
placeholder="Enter description"
|
|
||||||
/>
|
|
||||||
{errors.description && (
|
|
||||||
<p className="mt-1 text-sm text-red-600">{errors.description.message}</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
||||||
Category
|
|
||||||
</label>
|
|
||||||
<select
|
|
||||||
{...register('category_id')}
|
|
||||||
className="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
|
|
||||||
>
|
|
||||||
<option value="">Select a category</option>
|
|
||||||
{filteredCategories.map((category) => (
|
|
||||||
<option key={category.id} value={category.id}>
|
|
||||||
{category.name}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
{errors.category_id && (
|
|
||||||
<p className="mt-1 text-sm text-red-600">{errors.category_id.message}</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
||||||
Date
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="date"
|
|
||||||
{...register('date')}
|
|
||||||
className="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
|
|
||||||
/>
|
|
||||||
{errors.date && (
|
|
||||||
<p className="mt-1 text-sm text-red-600">{errors.date.message}</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex gap-3 pt-4">
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
disabled={isSubmitting}
|
|
||||||
className="flex-1 bg-blue-600 text-white py-2 px-4 rounded-md font-medium hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
|
||||||
>
|
|
||||||
{isSubmitting ? 'Saving...' : transaction ? 'Update' : 'Create'}
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={onClose}
|
|
||||||
className="px-4 py-2 text-gray-700 bg-gray-100 rounded-md font-medium hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition-colors"
|
|
||||||
>
|
|
||||||
Cancel
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@@ -1,207 +0,0 @@
|
|||||||
import React, { useState } from 'react';
|
|
||||||
import { Plus, Edit, Trash2, Search, Filter } from 'lucide-react';
|
|
||||||
import { useTransactions } from '../hooks/useTransactions';
|
|
||||||
import { TransactionForm } from './TransactionForm';
|
|
||||||
import { Transaction } from '../types';
|
|
||||||
|
|
||||||
export const Transactions: React.FC = () => {
|
|
||||||
const { transactions, categories, createTransaction, updateTransaction, deleteTransaction, loading } = useTransactions();
|
|
||||||
const [showForm, setShowForm] = useState(false);
|
|
||||||
const [editingTransaction, setEditingTransaction] = useState<Transaction | undefined>();
|
|
||||||
const [searchTerm, setSearchTerm] = useState('');
|
|
||||||
const [filterType, setFilterType] = useState<'all' | 'income' | 'expense' | 'transfer'>('all');
|
|
||||||
|
|
||||||
const filteredTransactions = transactions.filter(transaction => {
|
|
||||||
const matchesSearch = transaction.description.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
|
||||||
transaction.category?.name.toLowerCase().includes(searchTerm.toLowerCase());
|
|
||||||
const matchesType = filterType === 'all' || transaction.type === filterType;
|
|
||||||
return matchesSearch && matchesType;
|
|
||||||
});
|
|
||||||
|
|
||||||
const handleSubmit = async (data: any) => {
|
|
||||||
if (editingTransaction) {
|
|
||||||
await updateTransaction(editingTransaction.id, data);
|
|
||||||
} else {
|
|
||||||
await createTransaction(data);
|
|
||||||
}
|
|
||||||
setShowForm(false);
|
|
||||||
setEditingTransaction(undefined);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleEdit = (transaction: Transaction) => {
|
|
||||||
setEditingTransaction(transaction);
|
|
||||||
setShowForm(true);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleDelete = async (id: string) => {
|
|
||||||
if (window.confirm('Are you sure you want to delete this transaction?')) {
|
|
||||||
await deleteTransaction(id);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleCloseForm = () => {
|
|
||||||
setShowForm(false);
|
|
||||||
setEditingTransaction(undefined);
|
|
||||||
};
|
|
||||||
|
|
||||||
if (loading) {
|
|
||||||
return (
|
|
||||||
<div className="p-6">
|
|
||||||
<div className="animate-pulse space-y-4">
|
|
||||||
<div className="h-8 bg-gray-200 rounded w-1/4"></div>
|
|
||||||
<div className="space-y-3">
|
|
||||||
{[...Array(5)].map((_, i) => (
|
|
||||||
<div key={i} className="h-16 bg-gray-200 rounded"></div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="p-6">
|
|
||||||
<div className="mb-6">
|
|
||||||
<div className="flex justify-between items-center mb-4">
|
|
||||||
<h1 className="text-2xl font-bold text-gray-900">Transactions</h1>
|
|
||||||
<button
|
|
||||||
onClick={() => setShowForm(true)}
|
|
||||||
className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors"
|
|
||||||
>
|
|
||||||
<Plus className="h-4 w-4 mr-2" />
|
|
||||||
Add Transaction
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Search and Filter */}
|
|
||||||
<div className="flex flex-col sm:flex-row gap-4">
|
|
||||||
<div className="relative flex-1">
|
|
||||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
placeholder="Search transactions..."
|
|
||||||
value={searchTerm}
|
|
||||||
onChange={(e) => setSearchTerm(e.target.value)}
|
|
||||||
className="pl-10 pr-4 py-2 w-full border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="relative">
|
|
||||||
<Filter className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
|
|
||||||
<select
|
|
||||||
value={filterType}
|
|
||||||
onChange={(e) => setFilterType(e.target.value as any)}
|
|
||||||
className="pl-10 pr-8 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
|
|
||||||
>
|
|
||||||
<option value="all">All Types</option>
|
|
||||||
<option value="income">Income</option>
|
|
||||||
<option value="expense">Expense</option>
|
|
||||||
<option value="transfer">Transfer</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Transactions List */}
|
|
||||||
<div className="bg-white shadow-sm rounded-lg border border-gray-200 overflow-hidden">
|
|
||||||
{filteredTransactions.length > 0 ? (
|
|
||||||
<div className="divide-y divide-gray-200">
|
|
||||||
{filteredTransactions.map((transaction) => (
|
|
||||||
<div key={transaction.id} className="p-6 hover:bg-gray-50 transition-colors">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<div className="flex-1 min-w-0">
|
|
||||||
<div className="flex items-center space-x-3">
|
|
||||||
<div className={`flex-shrink-0 w-10 h-10 rounded-full flex items-center justify-center text-sm font-medium ${
|
|
||||||
transaction.type === 'income' ? 'bg-green-100 text-green-800' :
|
|
||||||
transaction.type === 'expense' ? 'bg-red-100 text-red-800' :
|
|
||||||
'bg-blue-100 text-blue-800'
|
|
||||||
}`}>
|
|
||||||
{transaction.category?.name.charAt(0).toUpperCase() || 'T'}
|
|
||||||
</div>
|
|
||||||
<div className="flex-1 min-w-0">
|
|
||||||
<p className="text-sm font-medium text-gray-900 truncate">
|
|
||||||
{transaction.description}
|
|
||||||
</p>
|
|
||||||
<div className="flex items-center space-x-2 mt-1">
|
|
||||||
<span className="text-xs text-gray-500">
|
|
||||||
{transaction.category?.name}
|
|
||||||
</span>
|
|
||||||
<span className="text-gray-300">•</span>
|
|
||||||
<span className="text-xs text-gray-500">
|
|
||||||
{new Date(transaction.date).toLocaleDateString()}
|
|
||||||
</span>
|
|
||||||
<span className="text-gray-300">•</span>
|
|
||||||
<span className={`text-xs font-medium px-2 py-1 rounded-full ${
|
|
||||||
transaction.type === 'income' ? 'bg-green-100 text-green-800' :
|
|
||||||
transaction.type === 'expense' ? 'bg-red-100 text-red-800' :
|
|
||||||
'bg-blue-100 text-blue-800'
|
|
||||||
}`}>
|
|
||||||
{transaction.type}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex items-center space-x-4">
|
|
||||||
<span className={`text-lg font-semibold ${
|
|
||||||
transaction.type === 'income' ? 'text-green-600' : 'text-red-600'
|
|
||||||
}`}>
|
|
||||||
{transaction.type === 'income' ? '+' : '-'}${transaction.amount.toFixed(2)}
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<div className="flex items-center space-x-2">
|
|
||||||
<button
|
|
||||||
onClick={() => handleEdit(transaction)}
|
|
||||||
className="p-2 text-gray-400 hover:text-blue-600 transition-colors"
|
|
||||||
>
|
|
||||||
<Edit className="h-4 w-4" />
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => handleDelete(transaction.id)}
|
|
||||||
className="p-2 text-gray-400 hover:text-red-600 transition-colors"
|
|
||||||
>
|
|
||||||
<Trash2 className="h-4 w-4" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="p-12 text-center">
|
|
||||||
<div className="text-gray-400 mb-4">
|
|
||||||
<Plus className="h-12 w-12 mx-auto" />
|
|
||||||
</div>
|
|
||||||
<h3 className="text-lg font-medium text-gray-900 mb-2">No transactions found</h3>
|
|
||||||
<p className="text-gray-500 mb-6">
|
|
||||||
{searchTerm || filterType !== 'all'
|
|
||||||
? 'Try adjusting your search or filter criteria.'
|
|
||||||
: 'Get started by adding your first transaction.'
|
|
||||||
}
|
|
||||||
</p>
|
|
||||||
{!searchTerm && filterType === 'all' && (
|
|
||||||
<button
|
|
||||||
onClick={() => setShowForm(true)}
|
|
||||||
className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors"
|
|
||||||
>
|
|
||||||
<Plus className="h-4 w-4 mr-2" />
|
|
||||||
Add Your First Transaction
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Transaction Form Modal */}
|
|
||||||
{showForm && (
|
|
||||||
<TransactionForm
|
|
||||||
transaction={editingTransaction}
|
|
||||||
categories={categories}
|
|
||||||
onSubmit={handleSubmit}
|
|
||||||
onClose={handleCloseForm}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@@ -1,34 +0,0 @@
|
|||||||
export const API_CONFIG = {
|
|
||||||
baseURL: import.meta.env.VITE_API_BASE_URL || 'http://localhost:8000',
|
|
||||||
environment: import.meta.env.VITE_ENVIRONMENT || 'development',
|
|
||||||
} as const;
|
|
||||||
|
|
||||||
export const API_ENDPOINTS = {
|
|
||||||
// Auth endpoints (fastapi-users)
|
|
||||||
auth: {
|
|
||||||
login: '/auth/jwt/login',
|
|
||||||
logout: '/auth/jwt/logout',
|
|
||||||
register: '/auth/register',
|
|
||||||
me: '/users/me',
|
|
||||||
refresh: '/auth/jwt/refresh',
|
|
||||||
},
|
|
||||||
// User endpoints
|
|
||||||
users: {
|
|
||||||
profile: '/users/me',
|
|
||||||
update: '/users/me',
|
|
||||||
},
|
|
||||||
// Transaction endpoints
|
|
||||||
transactions: {
|
|
||||||
list: '/transactions',
|
|
||||||
create: '/transactions',
|
|
||||||
update: (id: string) => `/transactions/${id}`,
|
|
||||||
delete: (id: string) => `/transactions/${id}`,
|
|
||||||
},
|
|
||||||
// Category endpoints
|
|
||||||
categories: {
|
|
||||||
list: '/categories',
|
|
||||||
create: '/categories',
|
|
||||||
update: (id: string) => `/categories/${id}`,
|
|
||||||
delete: (id: string) => `/categories/${id}`,
|
|
||||||
},
|
|
||||||
} as const;
|
|
||||||
@@ -1,113 +0,0 @@
|
|||||||
import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react';
|
|
||||||
import { User, AuthTokens, LoginCredentials, RegisterData } from '../types';
|
|
||||||
import { apiClient } from '../utils/api';
|
|
||||||
import { API_ENDPOINTS } from '../config/api';
|
|
||||||
|
|
||||||
interface AuthContextType {
|
|
||||||
user: User | null;
|
|
||||||
loading: boolean;
|
|
||||||
login: (credentials: LoginCredentials) => Promise<void>;
|
|
||||||
register: (data: RegisterData) => Promise<void>;
|
|
||||||
logout: () => Promise<void>;
|
|
||||||
updateProfile: (data: Partial<User>) => Promise<void>;
|
|
||||||
}
|
|
||||||
|
|
||||||
const AuthContext = createContext<AuthContextType | undefined>(undefined);
|
|
||||||
|
|
||||||
export const useAuth = () => {
|
|
||||||
const context = useContext(AuthContext);
|
|
||||||
if (!context) {
|
|
||||||
throw new Error('useAuth must be used within an AuthProvider');
|
|
||||||
}
|
|
||||||
return context;
|
|
||||||
};
|
|
||||||
|
|
||||||
interface AuthProviderProps {
|
|
||||||
children: ReactNode;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
|
|
||||||
const [user, setUser] = useState<User | null>(null);
|
|
||||||
const [loading, setLoading] = useState(true);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
checkAuth();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const checkAuth = async () => {
|
|
||||||
try {
|
|
||||||
const token = localStorage.getItem('access_token');
|
|
||||||
if (token) {
|
|
||||||
const userData = await apiClient.get<User>(API_ENDPOINTS.auth.me);
|
|
||||||
setUser(userData);
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
localStorage.removeItem('access_token');
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const login = async (credentials: LoginCredentials) => {
|
|
||||||
try {
|
|
||||||
const tokens = await apiClient.postForm<AuthTokens>(
|
|
||||||
API_ENDPOINTS.auth.login,
|
|
||||||
{
|
|
||||||
grant_type: "password",
|
|
||||||
username: credentials.email,
|
|
||||||
password: credentials.password
|
|
||||||
}
|
|
||||||
);
|
|
||||||
localStorage.setItem('access_token', tokens.access_token);
|
|
||||||
const userData = await apiClient.get<User>(API_ENDPOINTS.auth.me);
|
|
||||||
setUser(userData);
|
|
||||||
} catch (error) {
|
|
||||||
throw new Error('Invalid credentials');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const register = async (data: RegisterData) => {
|
|
||||||
try {
|
|
||||||
await apiClient.post<User>(API_ENDPOINTS.auth.register, data);
|
|
||||||
// Auto-login after registration
|
|
||||||
await login({ email: data.email, password: data.password });
|
|
||||||
} catch (error) {
|
|
||||||
throw new Error('Registration failed');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const logout = async () => {
|
|
||||||
try {
|
|
||||||
await apiClient.post(API_ENDPOINTS.auth.logout);
|
|
||||||
} catch (error) {
|
|
||||||
// Continue with logout even if API call fails
|
|
||||||
} finally {
|
|
||||||
localStorage.removeItem('access_token');
|
|
||||||
setUser(null);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const updateProfile = async (data: Partial<User>) => {
|
|
||||||
try {
|
|
||||||
const updatedUser = await apiClient.put<User>(API_ENDPOINTS.users.update, data);
|
|
||||||
setUser(updatedUser);
|
|
||||||
} catch (error) {
|
|
||||||
throw new Error('Failed to update profile');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<AuthContext.Provider
|
|
||||||
value={{
|
|
||||||
user,
|
|
||||||
loading,
|
|
||||||
login,
|
|
||||||
register,
|
|
||||||
logout,
|
|
||||||
updateProfile,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
</AuthContext.Provider>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@@ -1,131 +0,0 @@
|
|||||||
import { useState, useEffect } from 'react';
|
|
||||||
import { Transaction, Category, TransactionSummary } from '../types';
|
|
||||||
import { apiClient } from '../utils/api';
|
|
||||||
import { API_ENDPOINTS } from '../config/api';
|
|
||||||
|
|
||||||
export const useTransactions = () => {
|
|
||||||
const [transactions, setTransactions] = useState<Transaction[]>([]);
|
|
||||||
const [categories, setCategories] = useState<Category[]>([]);
|
|
||||||
const [loading, setLoading] = useState(false);
|
|
||||||
const [summary, setSummary] = useState<TransactionSummary>({
|
|
||||||
totalIncome: 0,
|
|
||||||
totalExpenses: 0,
|
|
||||||
balance: 0,
|
|
||||||
categoryBreakdown: [],
|
|
||||||
});
|
|
||||||
|
|
||||||
const fetchTransactions = async () => {
|
|
||||||
setLoading(true);
|
|
||||||
try {
|
|
||||||
const data = await apiClient.get<Transaction[]>(API_ENDPOINTS.transactions.list);
|
|
||||||
setTransactions(data);
|
|
||||||
calculateSummary(data);
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Failed to fetch transactions:', error);
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const fetchCategories = async () => {
|
|
||||||
try {
|
|
||||||
const data = await apiClient.get<Category[]>(API_ENDPOINTS.categories.list);
|
|
||||||
setCategories(data);
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Failed to fetch categories:', error);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const createTransaction = async (transaction: Omit<Transaction, 'id' | 'user_id' | 'created_at' | 'updated_at'>) => {
|
|
||||||
try {
|
|
||||||
const newTransaction = await apiClient.post<Transaction>(
|
|
||||||
API_ENDPOINTS.transactions.create,
|
|
||||||
transaction
|
|
||||||
);
|
|
||||||
setTransactions(prev => [newTransaction, ...prev]);
|
|
||||||
calculateSummary([newTransaction, ...transactions]);
|
|
||||||
return newTransaction;
|
|
||||||
} catch (error) {
|
|
||||||
throw new Error('Failed to create transaction');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const updateTransaction = async (id: string, updates: Partial<Transaction>) => {
|
|
||||||
try {
|
|
||||||
const updatedTransaction = await apiClient.put<Transaction>(
|
|
||||||
API_ENDPOINTS.transactions.update(id),
|
|
||||||
updates
|
|
||||||
);
|
|
||||||
setTransactions(prev =>
|
|
||||||
prev.map(t => (t.id === id ? updatedTransaction : t))
|
|
||||||
);
|
|
||||||
const newTransactions = transactions.map(t => (t.id === id ? updatedTransaction : t));
|
|
||||||
calculateSummary(newTransactions);
|
|
||||||
return updatedTransaction;
|
|
||||||
} catch (error) {
|
|
||||||
throw new Error('Failed to update transaction');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const deleteTransaction = async (id: string) => {
|
|
||||||
try {
|
|
||||||
await apiClient.delete(API_ENDPOINTS.transactions.delete(id));
|
|
||||||
setTransactions(prev => prev.filter(t => t.id !== id));
|
|
||||||
const newTransactions = transactions.filter(t => t.id !== id);
|
|
||||||
calculateSummary(newTransactions);
|
|
||||||
} catch (error) {
|
|
||||||
throw new Error('Failed to delete transaction');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const calculateSummary = (transactionList: Transaction[]) => {
|
|
||||||
const totalIncome = transactionList
|
|
||||||
.filter(t => t.type === 'income')
|
|
||||||
.reduce((sum, t) => sum + t.amount, 0);
|
|
||||||
|
|
||||||
const totalExpenses = transactionList
|
|
||||||
.filter(t => t.type === 'expense')
|
|
||||||
.reduce((sum, t) => sum + t.amount, 0);
|
|
||||||
|
|
||||||
const balance = totalIncome - totalExpenses;
|
|
||||||
|
|
||||||
const categoryTotals = transactionList.reduce((acc, transaction) => {
|
|
||||||
const categoryName = transaction.category?.name || 'Uncategorized';
|
|
||||||
acc[categoryName] = (acc[categoryName] || 0) + Math.abs(transaction.amount);
|
|
||||||
return acc;
|
|
||||||
}, {} as Record<string, number>);
|
|
||||||
|
|
||||||
const totalAmount = Object.values(categoryTotals).reduce((sum, amount) => sum + amount, 0);
|
|
||||||
const categoryBreakdown = Object.entries(categoryTotals)
|
|
||||||
.map(([category, amount]) => ({
|
|
||||||
category,
|
|
||||||
amount,
|
|
||||||
percentage: totalAmount > 0 ? (amount / totalAmount) * 100 : 0,
|
|
||||||
}))
|
|
||||||
.sort((a, b) => b.amount - a.amount);
|
|
||||||
|
|
||||||
setSummary({
|
|
||||||
totalIncome,
|
|
||||||
totalExpenses,
|
|
||||||
balance,
|
|
||||||
categoryBreakdown,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
fetchTransactions();
|
|
||||||
fetchCategories();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return {
|
|
||||||
transactions,
|
|
||||||
categories,
|
|
||||||
loading,
|
|
||||||
summary,
|
|
||||||
createTransaction,
|
|
||||||
updateTransaction,
|
|
||||||
deleteTransaction,
|
|
||||||
refreshTransactions: fetchTransactions,
|
|
||||||
refreshCategories: fetchCategories,
|
|
||||||
};
|
|
||||||
};
|
|
||||||
@@ -1,3 +0,0 @@
|
|||||||
@tailwind base;
|
|
||||||
@tailwind components;
|
|
||||||
@tailwind utilities;
|
|
||||||
@@ -1,10 +0,0 @@
|
|||||||
import { StrictMode } from 'react';
|
|
||||||
import { createRoot } from 'react-dom/client';
|
|
||||||
import App from './App.tsx';
|
|
||||||
import './index.css';
|
|
||||||
|
|
||||||
createRoot(document.getElementById('root')!).render(
|
|
||||||
<StrictMode>
|
|
||||||
<App />
|
|
||||||
</StrictMode>
|
|
||||||
);
|
|
||||||
@@ -1,60 +0,0 @@
|
|||||||
export interface User {
|
|
||||||
id: string;
|
|
||||||
email: string;
|
|
||||||
first_name?: string;
|
|
||||||
last_name?: string;
|
|
||||||
is_active: boolean;
|
|
||||||
is_verified: boolean;
|
|
||||||
created_at: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface Category {
|
|
||||||
id: string;
|
|
||||||
name: string;
|
|
||||||
type: 'income' | 'expense' | 'transfer';
|
|
||||||
color: string;
|
|
||||||
icon: string;
|
|
||||||
user_id: string;
|
|
||||||
created_at: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface Transaction {
|
|
||||||
id: string;
|
|
||||||
amount: number;
|
|
||||||
description: string;
|
|
||||||
category_id: string;
|
|
||||||
category?: Category;
|
|
||||||
date: string;
|
|
||||||
type: 'income' | 'expense' | 'transfer';
|
|
||||||
user_id: string;
|
|
||||||
created_at: string;
|
|
||||||
updated_at: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface AuthTokens {
|
|
||||||
access_token: string;
|
|
||||||
token_type: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface LoginCredentials {
|
|
||||||
email: string;
|
|
||||||
password: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface RegisterData {
|
|
||||||
email: string;
|
|
||||||
password: string;
|
|
||||||
first_name?: string;
|
|
||||||
last_name?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface TransactionSummary {
|
|
||||||
totalIncome: number;
|
|
||||||
totalExpenses: number;
|
|
||||||
balance: number;
|
|
||||||
categoryBreakdown: Array<{
|
|
||||||
category: string;
|
|
||||||
amount: number;
|
|
||||||
percentage: number;
|
|
||||||
}>;
|
|
||||||
}
|
|
||||||
@@ -1,81 +0,0 @@
|
|||||||
import axios, { AxiosInstance, AxiosResponse } from 'axios';
|
|
||||||
import { API_CONFIG } from '../config/api';
|
|
||||||
|
|
||||||
class ApiClient {
|
|
||||||
private client: AxiosInstance;
|
|
||||||
|
|
||||||
constructor() {
|
|
||||||
this.client = axios.create({
|
|
||||||
baseURL: API_CONFIG.baseURL,
|
|
||||||
timeout: 10000,
|
|
||||||
headers: {
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
this.setupInterceptors();
|
|
||||||
}
|
|
||||||
|
|
||||||
private setupInterceptors() {
|
|
||||||
// Request interceptor to add auth token
|
|
||||||
this.client.interceptors.request.use(
|
|
||||||
(config) => {
|
|
||||||
const token = localStorage.getItem('access_token');
|
|
||||||
if (token) {
|
|
||||||
config.headers.Authorization = `Bearer ${token}`;
|
|
||||||
}
|
|
||||||
return config;
|
|
||||||
},
|
|
||||||
(error) => Promise.reject(error)
|
|
||||||
);
|
|
||||||
|
|
||||||
// Response interceptor for token refresh
|
|
||||||
this.client.interceptors.response.use(
|
|
||||||
(response) => response,
|
|
||||||
async (error) => {
|
|
||||||
if (error.response?.status === 401) {
|
|
||||||
localStorage.removeItem('access_token');
|
|
||||||
window.location.href = '/login';
|
|
||||||
}
|
|
||||||
return Promise.reject(error);
|
|
||||||
}
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
async get<T>(url: string): Promise<T> {
|
|
||||||
const response: AxiosResponse<T> = await this.client.get(url);
|
|
||||||
return response.data;
|
|
||||||
}
|
|
||||||
|
|
||||||
async post<T>(url: string, data?: any): Promise<T> {
|
|
||||||
const response: AxiosResponse<T> = await this.client.post(url, data);
|
|
||||||
return response.data;
|
|
||||||
}
|
|
||||||
|
|
||||||
async put<T>(url: string, data?: any): Promise<T> {
|
|
||||||
const response: AxiosResponse<T> = await this.client.put(url, data);
|
|
||||||
return response.data;
|
|
||||||
}
|
|
||||||
|
|
||||||
async delete<T>(url: string): Promise<T> {
|
|
||||||
const response: AxiosResponse<T> = await this.client.delete(url);
|
|
||||||
return response.data;
|
|
||||||
}
|
|
||||||
|
|
||||||
async postForm<T>(url: string, data?: any): Promise<T> {
|
|
||||||
const params = new URLSearchParams();
|
|
||||||
for (const key in data) {
|
|
||||||
if (data[key] !== undefined && data[key] !== null) {
|
|
||||||
params.append(key, data[key]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const response: AxiosResponse<T> = await this.client.post(url, params, {
|
|
||||||
headers: {
|
|
||||||
'Content-Type': 'application/x-www-form-urlencoded',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
return response.data;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export const apiClient = new ApiClient();
|
|
||||||
1
7project/frontend/src/vite-env.d.ts
vendored
1
7project/frontend/src/vite-env.d.ts
vendored
@@ -1 +0,0 @@
|
|||||||
/// <reference types="vite/client" />
|
|
||||||
@@ -1,8 +0,0 @@
|
|||||||
/** @type {import('tailwindcss').Config} */
|
|
||||||
export default {
|
|
||||||
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
|
|
||||||
theme: {
|
|
||||||
extend: {},
|
|
||||||
},
|
|
||||||
plugins: [],
|
|
||||||
};
|
|
||||||
@@ -1,24 +0,0 @@
|
|||||||
{
|
|
||||||
"compilerOptions": {
|
|
||||||
"target": "ES2020",
|
|
||||||
"useDefineForClassFields": true,
|
|
||||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
|
||||||
"module": "ESNext",
|
|
||||||
"skipLibCheck": true,
|
|
||||||
|
|
||||||
/* Bundler mode */
|
|
||||||
"moduleResolution": "bundler",
|
|
||||||
"allowImportingTsExtensions": true,
|
|
||||||
"isolatedModules": true,
|
|
||||||
"moduleDetection": "force",
|
|
||||||
"noEmit": true,
|
|
||||||
"jsx": "react-jsx",
|
|
||||||
|
|
||||||
/* Linting */
|
|
||||||
"strict": true,
|
|
||||||
"noUnusedLocals": true,
|
|
||||||
"noUnusedParameters": true,
|
|
||||||
"noFallthroughCasesInSwitch": true
|
|
||||||
},
|
|
||||||
"include": ["src"]
|
|
||||||
}
|
|
||||||
@@ -1,7 +0,0 @@
|
|||||||
{
|
|
||||||
"files": [],
|
|
||||||
"references": [
|
|
||||||
{ "path": "./tsconfig.app.json" },
|
|
||||||
{ "path": "./tsconfig.node.json" }
|
|
||||||
]
|
|
||||||
}
|
|
||||||
@@ -1,22 +0,0 @@
|
|||||||
{
|
|
||||||
"compilerOptions": {
|
|
||||||
"target": "ES2022",
|
|
||||||
"lib": ["ES2023"],
|
|
||||||
"module": "ESNext",
|
|
||||||
"skipLibCheck": true,
|
|
||||||
|
|
||||||
/* Bundler mode */
|
|
||||||
"moduleResolution": "bundler",
|
|
||||||
"allowImportingTsExtensions": true,
|
|
||||||
"isolatedModules": true,
|
|
||||||
"moduleDetection": "force",
|
|
||||||
"noEmit": true,
|
|
||||||
|
|
||||||
/* Linting */
|
|
||||||
"strict": true,
|
|
||||||
"noUnusedLocals": true,
|
|
||||||
"noUnusedParameters": true,
|
|
||||||
"noFallthroughCasesInSwitch": true
|
|
||||||
},
|
|
||||||
"include": ["vite.config.ts"]
|
|
||||||
}
|
|
||||||
@@ -1,10 +0,0 @@
|
|||||||
import { defineConfig } from 'vite';
|
|
||||||
import react from '@vitejs/plugin-react';
|
|
||||||
|
|
||||||
// https://vitejs.dev/config/
|
|
||||||
export default defineConfig({
|
|
||||||
plugins: [react()],
|
|
||||||
optimizeDeps: {
|
|
||||||
exclude: ['lucide-react'],
|
|
||||||
},
|
|
||||||
});
|
|
||||||
24
frontend/.gitignore
vendored
24
frontend/.gitignore
vendored
@@ -1,24 +0,0 @@
|
|||||||
# Logs
|
|
||||||
logs
|
|
||||||
*.log
|
|
||||||
npm-debug.log*
|
|
||||||
yarn-debug.log*
|
|
||||||
yarn-error.log*
|
|
||||||
pnpm-debug.log*
|
|
||||||
lerna-debug.log*
|
|
||||||
|
|
||||||
node_modules
|
|
||||||
dist
|
|
||||||
dist-ssr
|
|
||||||
*.local
|
|
||||||
|
|
||||||
# Editor directories and files
|
|
||||||
.vscode/*
|
|
||||||
!.vscode/extensions.json
|
|
||||||
.idea
|
|
||||||
.DS_Store
|
|
||||||
*.suo
|
|
||||||
*.ntvs*
|
|
||||||
*.njsproj
|
|
||||||
*.sln
|
|
||||||
*.sw?
|
|
||||||
@@ -1,73 +0,0 @@
|
|||||||
# React + TypeScript + Vite
|
|
||||||
|
|
||||||
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
|
||||||
|
|
||||||
Currently, two official plugins are available:
|
|
||||||
|
|
||||||
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
|
|
||||||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
|
||||||
|
|
||||||
## React Compiler
|
|
||||||
|
|
||||||
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
|
|
||||||
|
|
||||||
## Expanding the ESLint configuration
|
|
||||||
|
|
||||||
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
|
|
||||||
|
|
||||||
```js
|
|
||||||
export default defineConfig([
|
|
||||||
globalIgnores(['dist']),
|
|
||||||
{
|
|
||||||
files: ['**/*.{ts,tsx}'],
|
|
||||||
extends: [
|
|
||||||
// Other configs...
|
|
||||||
|
|
||||||
// Remove tseslint.configs.recommended and replace with this
|
|
||||||
tseslint.configs.recommendedTypeChecked,
|
|
||||||
// Alternatively, use this for stricter rules
|
|
||||||
tseslint.configs.strictTypeChecked,
|
|
||||||
// Optionally, add this for stylistic rules
|
|
||||||
tseslint.configs.stylisticTypeChecked,
|
|
||||||
|
|
||||||
// Other configs...
|
|
||||||
],
|
|
||||||
languageOptions: {
|
|
||||||
parserOptions: {
|
|
||||||
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
|
||||||
tsconfigRootDir: import.meta.dirname,
|
|
||||||
},
|
|
||||||
// other options...
|
|
||||||
},
|
|
||||||
},
|
|
||||||
])
|
|
||||||
```
|
|
||||||
|
|
||||||
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
|
|
||||||
|
|
||||||
```js
|
|
||||||
// eslint.config.js
|
|
||||||
import reactX from 'eslint-plugin-react-x'
|
|
||||||
import reactDom from 'eslint-plugin-react-dom'
|
|
||||||
|
|
||||||
export default defineConfig([
|
|
||||||
globalIgnores(['dist']),
|
|
||||||
{
|
|
||||||
files: ['**/*.{ts,tsx}'],
|
|
||||||
extends: [
|
|
||||||
// Other configs...
|
|
||||||
// Enable lint rules for React
|
|
||||||
reactX.configs['recommended-typescript'],
|
|
||||||
// Enable lint rules for React DOM
|
|
||||||
reactDom.configs.recommended,
|
|
||||||
],
|
|
||||||
languageOptions: {
|
|
||||||
parserOptions: {
|
|
||||||
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
|
||||||
tsconfigRootDir: import.meta.dirname,
|
|
||||||
},
|
|
||||||
// other options...
|
|
||||||
},
|
|
||||||
},
|
|
||||||
])
|
|
||||||
```
|
|
||||||
@@ -1,23 +0,0 @@
|
|||||||
import js from '@eslint/js'
|
|
||||||
import globals from 'globals'
|
|
||||||
import reactHooks from 'eslint-plugin-react-hooks'
|
|
||||||
import reactRefresh from 'eslint-plugin-react-refresh'
|
|
||||||
import tseslint from 'typescript-eslint'
|
|
||||||
import { defineConfig, globalIgnores } from 'eslint/config'
|
|
||||||
|
|
||||||
export default defineConfig([
|
|
||||||
globalIgnores(['dist']),
|
|
||||||
{
|
|
||||||
files: ['**/*.{ts,tsx}'],
|
|
||||||
extends: [
|
|
||||||
js.configs.recommended,
|
|
||||||
tseslint.configs.recommended,
|
|
||||||
reactHooks.configs['recommended-latest'],
|
|
||||||
reactRefresh.configs.vite,
|
|
||||||
],
|
|
||||||
languageOptions: {
|
|
||||||
ecmaVersion: 2020,
|
|
||||||
globals: globals.browser,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
])
|
|
||||||
3405
frontend/package-lock.json
generated
3405
frontend/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -1,29 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "frontend",
|
|
||||||
"private": true,
|
|
||||||
"version": "0.0.0",
|
|
||||||
"type": "module",
|
|
||||||
"scripts": {
|
|
||||||
"dev": "vite",
|
|
||||||
"build": "tsc -b && vite build",
|
|
||||||
"lint": "eslint .",
|
|
||||||
"preview": "vite preview"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"react": "^19.1.1",
|
|
||||||
"react-dom": "^19.1.1"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"@eslint/js": "^9.36.0",
|
|
||||||
"@types/react": "^19.1.13",
|
|
||||||
"@types/react-dom": "^19.1.9",
|
|
||||||
"@vitejs/plugin-react": "^5.0.3",
|
|
||||||
"eslint": "^9.36.0",
|
|
||||||
"eslint-plugin-react-hooks": "^5.2.0",
|
|
||||||
"eslint-plugin-react-refresh": "^0.4.20",
|
|
||||||
"globals": "^16.4.0",
|
|
||||||
"typescript": "~5.8.3",
|
|
||||||
"typescript-eslint": "^8.44.0",
|
|
||||||
"vite": "^7.1.7"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.5 KiB |
@@ -1,42 +0,0 @@
|
|||||||
#root {
|
|
||||||
max-width: 1280px;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 2rem;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
height: 6em;
|
|
||||||
padding: 1.5em;
|
|
||||||
will-change: filter;
|
|
||||||
transition: filter 300ms;
|
|
||||||
}
|
|
||||||
.logo:hover {
|
|
||||||
filter: drop-shadow(0 0 2em #646cffaa);
|
|
||||||
}
|
|
||||||
.logo.react:hover {
|
|
||||||
filter: drop-shadow(0 0 2em #61dafbaa);
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes logo-spin {
|
|
||||||
from {
|
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-reduced-motion: no-preference) {
|
|
||||||
a:nth-of-type(2) .logo {
|
|
||||||
animation: logo-spin infinite 20s linear;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
padding: 2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.read-the-docs {
|
|
||||||
color: #888;
|
|
||||||
}
|
|
||||||
@@ -1,35 +0,0 @@
|
|||||||
import { useState } from 'react'
|
|
||||||
import reactLogo from './assets/react.svg'
|
|
||||||
import viteLogo from '/vite.svg'
|
|
||||||
import './App.css'
|
|
||||||
|
|
||||||
function App() {
|
|
||||||
const [count, setCount] = useState(0)
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<div>
|
|
||||||
<a href="https://vite.dev" target="_blank">
|
|
||||||
<img src={viteLogo} className="logo" alt="Vite logo" />
|
|
||||||
</a>
|
|
||||||
<a href="https://react.dev" target="_blank">
|
|
||||||
<img src={reactLogo} className="logo react" alt="React logo" />
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<h1>Vite + React</h1>
|
|
||||||
<div className="card">
|
|
||||||
<button onClick={() => setCount((count) => count + 1)}>
|
|
||||||
count is {count}
|
|
||||||
</button>
|
|
||||||
<p>
|
|
||||||
Edit <code>src/App.tsx</code> and save to test HMR
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<p className="read-the-docs">
|
|
||||||
Click on the Vite and React logos to learn more
|
|
||||||
</p>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default App
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
|
|
||||||
|
Before Width: | Height: | Size: 4.0 KiB |
@@ -1,68 +0,0 @@
|
|||||||
:root {
|
|
||||||
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
|
|
||||||
line-height: 1.5;
|
|
||||||
font-weight: 400;
|
|
||||||
|
|
||||||
color-scheme: light dark;
|
|
||||||
color: rgba(255, 255, 255, 0.87);
|
|
||||||
background-color: #242424;
|
|
||||||
|
|
||||||
font-synthesis: none;
|
|
||||||
text-rendering: optimizeLegibility;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
font-weight: 500;
|
|
||||||
color: #646cff;
|
|
||||||
text-decoration: inherit;
|
|
||||||
}
|
|
||||||
a:hover {
|
|
||||||
color: #535bf2;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
display: flex;
|
|
||||||
place-items: center;
|
|
||||||
min-width: 320px;
|
|
||||||
min-height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 3.2em;
|
|
||||||
line-height: 1.1;
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
border-radius: 8px;
|
|
||||||
border: 1px solid transparent;
|
|
||||||
padding: 0.6em 1.2em;
|
|
||||||
font-size: 1em;
|
|
||||||
font-weight: 500;
|
|
||||||
font-family: inherit;
|
|
||||||
background-color: #1a1a1a;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: border-color 0.25s;
|
|
||||||
}
|
|
||||||
button:hover {
|
|
||||||
border-color: #646cff;
|
|
||||||
}
|
|
||||||
button:focus,
|
|
||||||
button:focus-visible {
|
|
||||||
outline: 4px auto -webkit-focus-ring-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: light) {
|
|
||||||
:root {
|
|
||||||
color: #213547;
|
|
||||||
background-color: #ffffff;
|
|
||||||
}
|
|
||||||
a:hover {
|
|
||||||
color: #747bff;
|
|
||||||
}
|
|
||||||
button {
|
|
||||||
background-color: #f9f9f9;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,10 +0,0 @@
|
|||||||
import { StrictMode } from 'react'
|
|
||||||
import { createRoot } from 'react-dom/client'
|
|
||||||
import './index.css'
|
|
||||||
import App from './App.tsx'
|
|
||||||
|
|
||||||
createRoot(document.getElementById('root')!).render(
|
|
||||||
<StrictMode>
|
|
||||||
<App />
|
|
||||||
</StrictMode>,
|
|
||||||
)
|
|
||||||
@@ -1,7 +0,0 @@
|
|||||||
import { defineConfig } from 'vite'
|
|
||||||
import react from '@vitejs/plugin-react'
|
|
||||||
|
|
||||||
// https://vite.dev/config/
|
|
||||||
export default defineConfig({
|
|
||||||
plugins: [react()],
|
|
||||||
})
|
|
||||||
Reference in New Issue
Block a user