refactor(structure): move to 7project dir

7project/frontend/src/App.tsx

@@ -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;

7project/frontend/src/components/Dashboard.tsx

@@ -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>
+  );
+};

7project/frontend/src/components/Layout.tsx

@@ -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>
+  );
+};

7project/frontend/src/components/Login.tsx

@@ -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>
+  );
+};

7project/frontend/src/components/ProtectedRoute.tsx

@@ -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}</>;
+};

7project/frontend/src/components/Register.tsx

@@ -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>
+  );
+};

7project/frontend/src/components/TransactionForm.tsx

@@ -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>
+  );
+};

7project/frontend/src/components/Transactions.tsx

@@ -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>
+  );
+};

7project/frontend/src/config/api.ts

@@ -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;

7project/frontend/src/contexts/AuthContext.tsx

@@ -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>
+  );
+};

7project/frontend/src/hooks/useTransactions.ts

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

7project/frontend/src/index.css

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

7project/frontend/src/main.tsx

@@ -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>
+);

7project/frontend/src/types/index.ts

@@ -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;
+  }>;
+}

7project/frontend/src/utils/api.ts

@@ -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();

7project/frontend/src/vite-env.d.ts

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