lukas/uis-cloud-computing
1
0
Fork 0
mirror of https://github.com/dat515-2025/Group-8.git synced 2026-03-22 06:57:47 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor(structure): move to 7project dir

Browse Source
This commit is contained in:
Lukáš Trkan
2025-10-05 01:30:55 +02:00
parent 291305c2e5
commit d58d553945
111 changed files with 6638 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
.github/workflows/workflow.yml vendored
View File

@@ -4,12 +4,12 @@ on:
push: push:
branches: [ "main" ] branches: [ "main" ]
paths: paths:
- 'backend/**' - '7project/backend/**'
workflow_dispatch: workflow_dispatch:
jobs: jobs:
build-and-update: build-and-update:
runs-on: kbctl runs-on: ubuntu-latest
permissions: permissions:
contents: write contents: write
packages: write packages: write
@@ -28,27 +28,27 @@ jobs:
id: build id: build
uses: docker/build-push-action@v5 uses: docker/build-push-action@v5
with: with:
context: ./backend context: ./7project/backend
push: true push: true
tags: ${{ secrets.DOCKER_USER }}/cc-app-demo:latest tags: ${{ secrets.DOCKER_USER }}/cc-app-demo:latest
- name: Get image digest - name: Get image digest
run: echo "IMAGE_DIGEST=${{ steps.build.outputs.digest }}" >> $GITHUB_ENV run: echo "IMAGE_DIGEST=${{ steps.build.outputs.digest }}" >> $GITHUB_ENV
- name: Update manifests with new image digest #- name: Update manifests with new image digest
uses: OpsVerseIO/image-updater-action@0.1.0 # uses: OpsVerseIO/image-updater-action@0.1.0
with: # with:
branch: main # branch: main
targetBranch: main # targetBranch: main
createPR: 'false' # createPR: 'false'
message: "${{ github.event.head_commit.message }}" # message: "${{ github.event.head_commit.message }}"
token: ${{ secrets.GITHUB_TOKEN }} # token: ${{ secrets.GITHUB_TOKEN }}
changes: | # changes: |
{ # {
"deployment/app-demo-deployment.yaml": { # "deployment/app-demo-deployment.yaml": {
"spec.template.spec.containers[0].image": "${{ secrets.DOCKER_USER }}/cc-app-demo@${{ env.IMAGE_DIGEST }}" # "spec.template.spec.containers[0].image": "${{ secrets.DOCKER_USER }}/cc-app-demo@${{ env.IMAGE_DIGEST }}"
}, # },
"deployment/app-demo-worker-deployment.yaml": { # "deployment/app-demo-worker-deployment.yaml": {
"spec.template.spec.containers[0].image": "${{ secrets.DOCKER_USER }}/cc-app-demo@${{ env.IMAGE_DIGEST }}" # "spec.template.spec.containers[0].image": "${{ secrets.DOCKER_USER }}/cc-app-demo@${{ env.IMAGE_DIGEST }}"
} # }
} # }

0
.gitignore → 7project/.gitignore vendored
View File

0
README.md → 7project/README.md
View File

0
backend/Dockerfile → 7project/backend/Dockerfile
View File

0
backend/alembic.ini → 7project/backend/alembic.ini
View File

0
backend/alembic/env.py → 7project/backend/alembic/env.py
View File

0
backend/alembic/script.py.mako → 7project/backend/alembic/script.py.mako
View File

0
backend/alembic/versions/81f275275556_init_migration.py → 7project/backend/alembic/versions/81f275275556_init_migration.py
View File

0
backend/app/__init__.py → 7project/backend/app/__init__.py
View File

0
backend/app/api/.keep → 7project/backend/app/api/.keep
View File

0
backend/app/api/__init__.py → 7project/backend/app/api/__init__.py
View File

0
backend/app/app.py → 7project/backend/app/app.py
View File

0
backend/app/celery_app.py → 7project/backend/app/celery_app.py
View File

0
backend/app/core/__init__.py → 7project/backend/app/core/__init__.py
View File

0
backend/app/core/base.py → 7project/backend/app/core/base.py
View File

0
backend/app/core/db.py → 7project/backend/app/core/db.py
View File

0
backend/app/core/queue.py → 7project/backend/app/core/queue.py
View File

0
backend/app/models/__init__.py → 7project/backend/app/models/__init__.py
View File

0
backend/app/models/transaction.py → 7project/backend/app/models/transaction.py
View File

0
backend/app/models/user.py → 7project/backend/app/models/user.py
View File

0
backend/app/schemas/__init__.py → 7project/backend/app/schemas/__init__.py
View File

0
backend/app/schemas/user.py → 7project/backend/app/schemas/user.py
View File

0
backend/app/services/__init__.py → 7project/backend/app/services/__init__.py
View File

0
backend/app/services/db.py → 7project/backend/app/services/db.py
View File

0
backend/app/services/user_service.py → 7project/backend/app/services/user_service.py
View File

0
backend/app/workers/__init__.py → 7project/backend/app/workers/__init__.py
View File

0
backend/app/workers/celery_tasks.py → 7project/backend/app/workers/celery_tasks.py
View File

0
backend/main.py → 7project/backend/main.py
View File

0
backend/requirements.txt → 7project/backend/requirements.txt
View File

0
compose.yml → 7project/compose.yml
View File

0
create_migration.sh → 7project/create_migration.sh
View File

0
deployment/app-demo-database-grant.yaml → 7project/deployment/app-demo-database-grant.yaml
View File

0
deployment/app-demo-database-secret.yaml → 7project/deployment/app-demo-database-secret.yaml
View File

0
deployment/app-demo-database-user.yaml → 7project/deployment/app-demo-database-user.yaml
View File

0
deployment/app-demo-database.yaml → 7project/deployment/app-demo-database.yaml
View File

0
deployment/app-demo-deployment.yaml → 7project/deployment/app-demo-deployment.yaml
View File

0
deployment/app-demo-svc.yaml → 7project/deployment/app-demo-svc.yaml
View File

0
deployment/app-demo-worker-deployment.yaml → 7project/deployment/app-demo-worker-deployment.yaml
View File

0
deployment/tunnel.yaml → 7project/deployment/tunnel.yaml
View File

3
7project/frontend/.env Normal file
View File

@@ -0,0 +1,3 @@
# API Configuration
VITE_API_BASE_URL=http://localhost:8000
VITE_ENVIRONMENT=development

1
7project/frontend/README.md Normal file
View File

@@ -0,0 +1 @@
finance-tracker-bolt

28
7project/frontend/eslint.config.js Normal file
View File

@@ -0,0 +1,28 @@
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 },
],
},
}
);

2
frontend/index.html → 7project/frontend/index.html
View File

@@ -4,7 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>frontend</title> <title>Personal Finance Tracker React App</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

4923
7project/frontend/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

40
7project/frontend/package.json Normal file
View File

@@ -0,0 +1,40 @@
{
"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"
}
}

6
7project/frontend/postcss.config.js Normal file
View File

@@ -0,0 +1,6 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};

110
7project/frontend/src/App.tsx Normal file
View File

@@ -0,0 +1,110 @@
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;

194
7project/frontend/src/components/Dashboard.tsx Normal file
View File

@@ -0,0 +1,194 @@
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>
);
};

158
7project/frontend/src/components/Layout.tsx Normal file
View File

@@ -0,0 +1,158 @@
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>
);
};

126
7project/frontend/src/components/Login.tsx Normal file
View File

@@ -0,0 +1,126 @@
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>
);
};

25
7project/frontend/src/components/ProtectedRoute.tsx Normal file
View File

@@ -0,0 +1,25 @@
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}</>;
};

160
7project/frontend/src/components/Register.tsx Normal file
View File

@@ -0,0 +1,160 @@
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>
);
};

178
7project/frontend/src/components/TransactionForm.tsx Normal file
View File

@@ -0,0 +1,178 @@
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>
);
};

207
7project/frontend/src/components/Transactions.tsx Normal file
View File

@@ -0,0 +1,207 @@
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>
);
};

34
7project/frontend/src/config/api.ts Normal file
View File

@@ -0,0 +1,34 @@
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;

113
7project/frontend/src/contexts/AuthContext.tsx Normal file
View File

@@ -0,0 +1,113 @@
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>
);
};

131
7project/frontend/src/hooks/useTransactions.ts Normal file
View File

@@ -0,0 +1,131 @@
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,
};
};

3
7project/frontend/src/index.css Normal file
View File

@@ -0,0 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

10
7project/frontend/src/main.tsx Normal file
View File

@@ -0,0 +1,10 @@
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>
);

60
7project/frontend/src/types/index.ts Normal file
View File

@@ -0,0 +1,60 @@
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;
}>;
}

81
7project/frontend/src/utils/api.ts Normal file
View File

@@ -0,0 +1,81 @@
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 Normal file
View File

@@ -0,0 +1 @@
/// <reference types="vite/client" />

8
7project/frontend/tailwind.config.js Normal file
View File

@@ -0,0 +1,8 @@
/** @type {import('tailwindcss').Config} */
export default {
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
theme: {
extend: {},
},
plugins: [],
};

12
frontend/tsconfig.app.json → 7project/frontend/tsconfig.app.json
View File

@@ -1,17 +1,15 @@
{ {
"compilerOptions": { "compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", "target": "ES2020",
"target": "ES2022",
"useDefineForClassFields": true, "useDefineForClassFields": true,
"lib": ["ES2022", "DOM", "DOM.Iterable"], "lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext", "module": "ESNext",
"types": ["vite/client"],
"skipLibCheck": true, "skipLibCheck": true,
/* Bundler mode */ /* Bundler mode */
"moduleResolution": "bundler", "moduleResolution": "bundler",
"allowImportingTsExtensions": true, "allowImportingTsExtensions": true,
"verbatimModuleSyntax": true, "isolatedModules": true,
"moduleDetection": "force", "moduleDetection": "force",
"noEmit": true, "noEmit": true,
"jsx": "react-jsx", "jsx": "react-jsx",
@@ -20,9 +18,7 @@
"strict": true, "strict": true,
"noUnusedLocals": true, "noUnusedLocals": true,
"noUnusedParameters": true, "noUnusedParameters": true,
"erasableSyntaxOnly": true, "noFallthroughCasesInSwitch": true
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true
}, },
"include": ["src"] "include": ["src"]
} }

0
frontend/tsconfig.json → 7project/frontend/tsconfig.json
View File

10
frontend/tsconfig.node.json → 7project/frontend/tsconfig.node.json
View File

@@ -1,16 +1,14 @@
{ {
"compilerOptions": { "compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", "target": "ES2022",
"target": "ES2023",
"lib": ["ES2023"], "lib": ["ES2023"],
"module": "ESNext", "module": "ESNext",
"types": [],
"skipLibCheck": true, "skipLibCheck": true,
/* Bundler mode */ /* Bundler mode */
"moduleResolution": "bundler", "moduleResolution": "bundler",
"allowImportingTsExtensions": true, "allowImportingTsExtensions": true,
"verbatimModuleSyntax": true, "isolatedModules": true,
"moduleDetection": "force", "moduleDetection": "force",
"noEmit": true, "noEmit": true,
@@ -18,9 +16,7 @@
"strict": true, "strict": true,
"noUnusedLocals": true, "noUnusedLocals": true,
"noUnusedParameters": true, "noUnusedParameters": true,
"erasableSyntaxOnly": true, "noFallthroughCasesInSwitch": true
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true
}, },
"include": ["vite.config.ts"] "include": ["vite.config.ts"]
} }

10
7project/frontend/vite.config.ts Normal file
View File

@@ -0,0 +1,10 @@
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
optimizeDeps: {
exclude: ['lucide-react'],
},
});

0
tofu/main.tf → 7project/tofu/main.tf
View File

0
tofu/modules/argocd/argocd-ui.yaml → 7project/tofu/modules/argocd/argocd-ui.yaml
View File

0
tofu/modules/argocd/main.tf → 7project/tofu/modules/argocd/main.tf
View File

0
tofu/modules/argocd/variables.tf → 7project/tofu/modules/argocd/variables.tf
View File

0
tofu/modules/cert-manager/main.tf → 7project/tofu/modules/cert-manager/main.tf
View File

0
tofu/modules/cloudflare/cluster-tunnel.yaml → 7project/tofu/modules/cloudflare/cluster-tunnel.yaml
View File

0
tofu/modules/cloudflare/kustomization/kustomization.yaml → 7project/tofu/modules/cloudflare/kustomization/kustomization.yaml
View File

0
tofu/modules/cloudflare/main.tf → 7project/tofu/modules/cloudflare/main.tf
View File

0
tofu/modules/cloudflare/secret.yaml → 7project/tofu/modules/cloudflare/secret.yaml
View File

0
tofu/modules/cloudflare/variables.tf → 7project/tofu/modules/cloudflare/variables.tf
View File

0
tofu/modules/maxscale/charts/maxscale-helm/Chart.yaml → 7project/tofu/modules/maxscale/charts/maxscale-helm/Chart.yaml
View File

0
tofu/modules/maxscale/charts/maxscale-helm/templates/config.yaml → 7project/tofu/modules/maxscale/charts/maxscale-helm/templates/config.yaml
View File

0
tofu/modules/maxscale/charts/maxscale-helm/templates/grant.yaml → 7project/tofu/modules/maxscale/charts/maxscale-helm/templates/grant.yaml
View File

0
tofu/modules/maxscale/charts/maxscale-helm/templates/mariadb-service-0.yaml → 7project/tofu/modules/maxscale/charts/maxscale-helm/templates/mariadb-service-0.yaml
View File

0
tofu/modules/maxscale/charts/maxscale-helm/templates/mariadb-service-1.yaml → 7project/tofu/modules/maxscale/charts/maxscale-helm/templates/mariadb-service-1.yaml
View File

0
tofu/modules/maxscale/charts/maxscale-helm/templates/mariadb-service-2.yaml → 7project/tofu/modules/maxscale/charts/maxscale-helm/templates/mariadb-service-2.yaml
View File

0
tofu/modules/maxscale/charts/maxscale-helm/templates/maxscale-ui.yaml → 7project/tofu/modules/maxscale/charts/maxscale-helm/templates/maxscale-ui.yaml
View File

0
tofu/modules/maxscale/charts/maxscale-helm/templates/phpmyadmin-config-map.yaml → 7project/tofu/modules/maxscale/charts/maxscale-helm/templates/phpmyadmin-config-map.yaml
View File

0
tofu/modules/maxscale/charts/maxscale-helm/templates/phpmyadmin-deployment.yaml → 7project/tofu/modules/maxscale/charts/maxscale-helm/templates/phpmyadmin-deployment.yaml
View File

0
tofu/modules/maxscale/charts/maxscale-helm/templates/phpmyadmin-service.yaml → 7project/tofu/modules/maxscale/charts/maxscale-helm/templates/phpmyadmin-service.yaml
View File

0
tofu/modules/maxscale/charts/maxscale-helm/templates/phpmyadmin.yaml → 7project/tofu/modules/maxscale/charts/maxscale-helm/templates/phpmyadmin.yaml
View File

0
tofu/modules/maxscale/charts/maxscale-helm/templates/user.yaml → 7project/tofu/modules/maxscale/charts/maxscale-helm/templates/user.yaml
View File

0
tofu/modules/maxscale/charts/maxscale-helm/values.yaml → 7project/tofu/modules/maxscale/charts/maxscale-helm/values.yaml
View File

0
tofu/modules/maxscale/main.tf → 7project/tofu/modules/maxscale/main.tf
View File

0
tofu/modules/maxscale/mariadb-secret.yaml → 7project/tofu/modules/maxscale/mariadb-secret.yaml
View File

0
tofu/modules/maxscale/variables.tf → 7project/tofu/modules/maxscale/variables.tf
View File

0
tofu/modules/metallb/main.tf → 7project/tofu/modules/metallb/main.tf
View File

0
tofu/modules/metallb/variables.tf → 7project/tofu/modules/metallb/variables.tf
View File

0
tofu/modules/prometheus/grafana-ui.yaml → 7project/tofu/modules/prometheus/grafana-ui.yaml
View File

0
tofu/modules/prometheus/main.tf → 7project/tofu/modules/prometheus/main.tf
View File

0
tofu/modules/prometheus/values.yaml → 7project/tofu/modules/prometheus/values.yaml
View File

0
tofu/modules/prometheus/variables.tf → 7project/tofu/modules/prometheus/variables.tf
View File

0
tofu/modules/rabbitmq/main.tf → 7project/tofu/modules/rabbitmq/main.tf
View File

Some files were not shown because too many files have changed in this diff Show More