Initial commit

backup/fina-1/app/__init__.py

@@ -0,0 +1,86 @@
+from flask import Flask
+from flask_sqlalchemy import SQLAlchemy
+from flask_login import LoginManager
+from flask_bcrypt import Bcrypt
+import redis
+import os
+from datetime import timedelta
+
+db = SQLAlchemy()
+bcrypt = Bcrypt()
+login_manager = LoginManager()
+redis_client = None
+
+def create_app():
+    app = Flask(__name__)
+    
+    # Configuration
+    app.config['SECRET_KEY'] = os.environ.get('SECRET_KEY', 'dev-secret-key-change-in-production')
+    app.config['SQLALCHEMY_DATABASE_URI'] = os.environ.get('DATABASE_URL', 'sqlite:///data/fina.db')
+    app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
+    app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024  # 16MB max file size
+    app.config['UPLOAD_FOLDER'] = os.path.abspath('uploads')
+    app.config['PERMANENT_SESSION_LIFETIME'] = timedelta(days=7)
+    app.config['WTF_CSRF_TIME_LIMIT'] = None
+    
+    # Initialize extensions
+    db.init_app(app)
+    bcrypt.init_app(app)
+    login_manager.init_app(app)
+    login_manager.login_view = 'auth.login'
+    
+    # Redis connection
+    global redis_client
+    try:
+        redis_url = os.environ.get('REDIS_URL', 'redis://localhost:6379/0')
+        redis_client = redis.from_url(redis_url, decode_responses=True)
+    except Exception as e:
+        print(f"Redis connection failed: {e}")
+        redis_client = None
+    
+    # Create upload directories
+    os.makedirs(app.config['UPLOAD_FOLDER'], exist_ok=True)
+    os.makedirs(os.path.join(app.config['UPLOAD_FOLDER'], 'documents'), exist_ok=True)
+    os.makedirs(os.path.join(app.config['UPLOAD_FOLDER'], 'avatars'), exist_ok=True)
+    os.makedirs('data', exist_ok=True)
+    
+    # Register blueprints
+    from app.routes import auth, main, expenses, admin, documents, settings
+    app.register_blueprint(auth.bp)
+    app.register_blueprint(main.bp)
+    app.register_blueprint(expenses.bp)
+    app.register_blueprint(admin.bp)
+    app.register_blueprint(documents.bp)
+    app.register_blueprint(settings.bp)
+    
+    # Serve uploaded files
+    from flask import send_from_directory, url_for
+    
+    @app.route('/uploads/<path:filename>')
+    def uploaded_file(filename):
+        """Serve uploaded files (avatars, documents)"""
+        upload_dir = os.path.join(app.root_path, '..', app.config['UPLOAD_FOLDER'])
+        return send_from_directory(upload_dir, filename)
+    
+    # Add avatar_url filter for templates
+    @app.template_filter('avatar_url')
+    def avatar_url_filter(avatar_path):
+        """Generate correct URL for avatar (either static or uploaded)"""
+        if avatar_path.startswith('icons/'):
+            # Default avatar in static folder
+            return url_for('static', filename=avatar_path)
+        else:
+            # Uploaded avatar
+            return '/' + avatar_path
+    
+    # Create database tables
+    with app.app_context():
+        db.create_all()
+    
+    return app
+
+from app.models import User
+
+@login_manager.user_loader
+def load_user(user_id):
+    return User.query.get(int(user_id))

backup/fina-1/app/models.py

@@ -0,0 +1,131 @@
+from app import db
+from flask_login import UserMixin
+from datetime import datetime
+import json
+
+class User(db.Model, UserMixin):
+    __tablename__ = 'users'
+    
+    id = db.Column(db.Integer, primary_key=True)
+    username = db.Column(db.String(80), unique=True, nullable=False)
+    email = db.Column(db.String(120), unique=True, nullable=False)
+    password_hash = db.Column(db.String(128), nullable=False)
+    is_admin = db.Column(db.Boolean, default=False)
+    totp_secret = db.Column(db.String(32), nullable=True)
+    two_factor_enabled = db.Column(db.Boolean, default=False)
+    backup_codes = db.Column(db.Text, nullable=True)  # JSON array of hashed backup codes
+    language = db.Column(db.String(5), default='en')
+    currency = db.Column(db.String(3), default='USD')
+    avatar = db.Column(db.String(255), default='icons/avatars/avatar-1.svg')
+    created_at = db.Column(db.DateTime, default=datetime.utcnow)
+    
+    expenses = db.relationship('Expense', backref='user', lazy='dynamic', cascade='all, delete-orphan')
+    categories = db.relationship('Category', backref='user', lazy='dynamic', cascade='all, delete-orphan')
+    documents = db.relationship('Document', backref='user', lazy='dynamic', cascade='all, delete-orphan')
+    
+    def __repr__(self):
+        return f'<User {self.username}>'
+
+
+class Category(db.Model):
+    __tablename__ = 'categories'
+    
+    id = db.Column(db.Integer, primary_key=True)
+    name = db.Column(db.String(50), nullable=False)
+    color = db.Column(db.String(7), default='#2b8cee')
+    icon = db.Column(db.String(50), default='category')
+    user_id = db.Column(db.Integer, db.ForeignKey('users.id'), nullable=False)
+    created_at = db.Column(db.DateTime, default=datetime.utcnow)
+    
+    expenses = db.relationship('Expense', backref='category', lazy='dynamic')
+    
+    def __repr__(self):
+        return f'<Category {self.name}>'
+    
+    def to_dict(self):
+        return {
+            'id': self.id,
+            'name': self.name,
+            'color': self.color,
+            'icon': self.icon,
+            'created_at': self.created_at.isoformat()
+        }
+
+
+class Expense(db.Model):
+    __tablename__ = 'expenses'
+    
+    id = db.Column(db.Integer, primary_key=True)
+    amount = db.Column(db.Float, nullable=False)
+    currency = db.Column(db.String(3), default='USD')
+    description = db.Column(db.String(200), nullable=False)
+    category_id = db.Column(db.Integer, db.ForeignKey('categories.id'), nullable=False)
+    user_id = db.Column(db.Integer, db.ForeignKey('users.id'), nullable=False)
+    tags = db.Column(db.Text, default='[]')  # JSON array of tags
+    receipt_path = db.Column(db.String(255), nullable=True)
+    date = db.Column(db.DateTime, default=datetime.utcnow)
+    created_at = db.Column(db.DateTime, default=datetime.utcnow)
+    updated_at = db.Column(db.DateTime, default=datetime.utcnow, onupdate=datetime.utcnow)
+    
+    def __repr__(self):
+        return f'<Expense {self.description} - {self.amount} {self.currency}>'
+    
+    def get_tags(self):
+        try:
+            return json.loads(self.tags)
+        except:
+            return []
+    
+    def set_tags(self, tags_list):
+        self.tags = json.dumps(tags_list)
+    
+    def to_dict(self):
+        return {
+            'id': self.id,
+            'amount': self.amount,
+            'currency': self.currency,
+            'description': self.description,
+            'category_id': self.category_id,
+            'category_name': self.category.name if self.category else None,
+            'category_color': self.category.color if self.category else None,
+            'tags': self.get_tags(),
+            'receipt_path': self.receipt_path,
+            'date': self.date.isoformat(),
+            'created_at': self.created_at.isoformat()
+        }
+
+
+class Document(db.Model):
+    """
+    Model for storing user documents (bank statements, receipts, invoices, etc.)
+    Security: All queries filtered by user_id to ensure users only see their own documents
+    """
+    __tablename__ = 'documents'
+    
+    id = db.Column(db.Integer, primary_key=True)
+    filename = db.Column(db.String(255), nullable=False)
+    original_filename = db.Column(db.String(255), nullable=False)
+    file_path = db.Column(db.String(500), nullable=False)
+    file_size = db.Column(db.Integer, nullable=False)  # in bytes
+    file_type = db.Column(db.String(50), nullable=False)  # PDF, CSV, XLSX, etc.
+    mime_type = db.Column(db.String(100), nullable=False)
+    document_category = db.Column(db.String(100), nullable=True)  # Bank Statement, Invoice, Receipt, Contract, etc.
+    status = db.Column(db.String(50), default='uploaded')  # uploaded, processing, analyzed, error
+    user_id = db.Column(db.Integer, db.ForeignKey('users.id'), nullable=False)
+    created_at = db.Column(db.DateTime, default=datetime.utcnow)
+    updated_at = db.Column(db.DateTime, default=datetime.utcnow, onupdate=datetime.utcnow)
+    
+    def __repr__(self):
+        return f'<Document {self.filename} - {self.user_id}>'
+    
+    def to_dict(self):
+        return {
+            'id': self.id,
+            'filename': self.original_filename,
+            'file_size': self.file_size,
+            'file_type': self.file_type,
+            'document_category': self.document_category,
+            'status': self.status,
+            'created_at': self.created_at.isoformat(),
+            'updated_at': self.updated_at.isoformat()
+        }

backup/fina-1/app/routes/admin.py

@@ -0,0 +1,110 @@
+from flask import Blueprint, request, jsonify
+from flask_login import login_required, current_user
+from app import db, bcrypt
+from app.models import User, Expense, Category
+from functools import wraps
+
+bp = Blueprint('admin', __name__, url_prefix='/api/admin')
+
+def admin_required(f):
+    @wraps(f)
+    def decorated_function(*args, **kwargs):
+        if not current_user.is_admin:
+            return jsonify({'success': False, 'message': 'Admin access required'}), 403
+        return f(*args, **kwargs)
+    return decorated_function
+
+
+@bp.route('/users', methods=['GET'])
+@login_required
+@admin_required
+def get_users():
+    users = User.query.all()
+    return jsonify({
+        'users': [{
+            'id': user.id,
+            'username': user.username,
+            'email': user.email,
+            'is_admin': user.is_admin,
+            'language': user.language,
+            'currency': user.currency,
+            'two_factor_enabled': user.two_factor_enabled,
+            'created_at': user.created_at.isoformat()
+        } for user in users]
+    })
+
+
+@bp.route('/users', methods=['POST'])
+@login_required
+@admin_required
+def create_user():
+    data = request.get_json()
+    
+    if not data.get('username') or not data.get('email') or not data.get('password'):
+        return jsonify({'success': False, 'message': 'Missing required fields'}), 400
+    
+    # Check if user exists
+    if User.query.filter_by(email=data['email']).first():
+        return jsonify({'success': False, 'message': 'Email already exists'}), 400
+    
+    if User.query.filter_by(username=data['username']).first():
+        return jsonify({'success': False, 'message': 'Username already exists'}), 400
+    
+    # Create user
+    password_hash = bcrypt.generate_password_hash(data['password']).decode('utf-8')
+    user = User(
+        username=data['username'],
+        email=data['email'],
+        password_hash=password_hash,
+        is_admin=data.get('is_admin', False),
+        language=data.get('language', 'en'),
+        currency=data.get('currency', 'USD')
+    )
+    
+    db.session.add(user)
+    db.session.commit()
+    
+    # Create default categories
+    from app.utils import create_default_categories
+    create_default_categories(user.id)
+    
+    return jsonify({
+        'success': True,
+        'user': {
+            'id': user.id,
+            'username': user.username,
+            'email': user.email
+        }
+    }), 201
+
+
+@bp.route('/users/<int:user_id>', methods=['DELETE'])
+@login_required
+@admin_required
+def delete_user(user_id):
+    if user_id == current_user.id:
+        return jsonify({'success': False, 'message': 'Cannot delete yourself'}), 400
+    
+    user = User.query.get(user_id)
+    if not user:
+        return jsonify({'success': False, 'message': 'User not found'}), 404
+    
+    db.session.delete(user)
+    db.session.commit()
+    
+    return jsonify({'success': True, 'message': 'User deleted'})
+
+
+@bp.route('/stats', methods=['GET'])
+@login_required
+@admin_required
+def get_stats():
+    total_users = User.query.count()
+    total_expenses = Expense.query.count()
+    total_categories = Category.query.count()
+    
+    return jsonify({
+        'total_users': total_users,
+        'total_expenses': total_expenses,
+        'total_categories': total_categories
+    })

backup/fina-1/app/routes/auth.py

@@ -0,0 +1,360 @@
+from flask import Blueprint, render_template, redirect, url_for, flash, request, session, send_file, make_response
+from flask_login import login_user, logout_user, login_required, current_user
+from app import db, bcrypt
+from app.models import User
+import pyotp
+import qrcode
+import io
+import base64
+import secrets
+import json
+from datetime import datetime
+
+bp = Blueprint('auth', __name__, url_prefix='/auth')
+
+
+def generate_backup_codes(count=10):
+    """Generate backup codes for 2FA"""
+    codes = []
+    for _ in range(count):
+        # Generate 8-character alphanumeric code
+        code = ''.join(secrets.choice('ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789') for _ in range(8))
+        # Format as XXXX-XXXX for readability
+        formatted_code = f"{code[:4]}-{code[4:]}"
+        codes.append(formatted_code)
+    return codes
+
+
+def hash_backup_codes(codes):
+    """Hash backup codes for secure storage"""
+    return [bcrypt.generate_password_hash(code).decode('utf-8') for code in codes]
+
+
+def verify_backup_code(user, code):
+    """Verify a backup code and mark it as used"""
+    if not user.backup_codes:
+        return False
+    
+    stored_codes = json.loads(user.backup_codes)
+    
+    for i, hashed_code in enumerate(stored_codes):
+        if bcrypt.check_password_hash(hashed_code, code):
+            # Remove used code
+            stored_codes.pop(i)
+            user.backup_codes = json.dumps(stored_codes)
+            db.session.commit()
+            return True
+    
+    return False
+
+@bp.route('/login', methods=['GET', 'POST'])
+def login():
+    if current_user.is_authenticated:
+        return redirect(url_for('main.dashboard'))
+    
+    if request.method == 'POST':
+        data = request.get_json() if request.is_json else request.form
+        username = data.get('username')
+        password = data.get('password')
+        two_factor_code = data.get('two_factor_code')
+        remember = data.get('remember', False)
+        
+        # Accept both username and email
+        user = User.query.filter((User.username == username) | (User.email == username)).first()
+        
+        if user and bcrypt.check_password_hash(user.password_hash, password):
+            # Check 2FA if enabled
+            if user.two_factor_enabled:
+                if not two_factor_code:
+                    if request.is_json:
+                        return {'success': False, 'requires_2fa': True}, 200
+                    session['pending_user_id'] = user.id
+                    return render_template('auth/two_factor.html')
+                
+                # Try TOTP code first
+                totp = pyotp.TOTP(user.totp_secret)
+                is_valid = totp.verify(two_factor_code)
+                
+                # If TOTP fails, try backup code (format: XXXX-XXXX or XXXXXXXX)
+                if not is_valid:
+                    is_valid = verify_backup_code(user, two_factor_code)
+                
+                if not is_valid:
+                    if request.is_json:
+                        return {'success': False, 'message': 'Invalid 2FA code'}, 401
+                    flash('Invalid 2FA code', 'error')
+                    return render_template('auth/login.html')
+            
+            login_user(user, remember=remember)
+            session.permanent = remember
+            
+            if request.is_json:
+                return {'success': True, 'redirect': url_for('main.dashboard')}
+            
+            next_page = request.args.get('next')
+            return redirect(next_page if next_page else url_for('main.dashboard'))
+        
+        if request.is_json:
+            return {'success': False, 'message': 'Invalid username or password'}, 401
+        
+        flash('Invalid username or password', 'error')
+    
+    return render_template('auth/login.html')
+
+
+@bp.route('/register', methods=['GET', 'POST'])
+def register():
+    if current_user.is_authenticated:
+        return redirect(url_for('main.dashboard'))
+    
+    if request.method == 'POST':
+        data = request.get_json() if request.is_json else request.form
+        username = data.get('username')
+        email = data.get('email')
+        password = data.get('password')
+        language = data.get('language', 'en')
+        currency = data.get('currency', 'USD')
+        
+        # Check if user exists
+        if User.query.filter_by(email=email).first():
+            if request.is_json:
+                return {'success': False, 'message': 'Email already registered'}, 400
+            flash('Email already registered', 'error')
+            return render_template('auth/register.html')
+        
+        if User.query.filter_by(username=username).first():
+            if request.is_json:
+                return {'success': False, 'message': 'Username already taken'}, 400
+            flash('Username already taken', 'error')
+            return render_template('auth/register.html')
+        
+        # Check if this is the first user (make them admin)
+        is_first_user = User.query.count() == 0
+        
+        # Create user
+        password_hash = bcrypt.generate_password_hash(password).decode('utf-8')
+        user = User(
+            username=username,
+            email=email,
+            password_hash=password_hash,
+            is_admin=is_first_user,
+            language=language,
+            currency=currency
+        )
+        
+        db.session.add(user)
+        db.session.commit()
+        
+        # Create default categories
+        from app.utils import create_default_categories
+        create_default_categories(user.id)
+        
+        login_user(user)
+        
+        if request.is_json:
+            return {'success': True, 'redirect': url_for('main.dashboard')}
+        
+        flash('Registration successful!', 'success')
+        return redirect(url_for('main.dashboard'))
+    
+    return render_template('auth/register.html')
+
+
+@bp.route('/logout')
+@login_required
+def logout():
+    logout_user()
+    return redirect(url_for('auth.login'))
+
+
+@bp.route('/setup-2fa', methods=['GET', 'POST'])
+@login_required
+def setup_2fa():
+    if request.method == 'POST':
+        data = request.get_json() if request.is_json else request.form
+        code = data.get('code')
+        
+        if not current_user.totp_secret:
+            secret = pyotp.random_base32()
+            current_user.totp_secret = secret
+        
+        totp = pyotp.TOTP(current_user.totp_secret)
+        
+        if totp.verify(code):
+            # Generate backup codes
+            backup_codes_plain = generate_backup_codes(10)
+            backup_codes_hashed = hash_backup_codes(backup_codes_plain)
+            
+            current_user.two_factor_enabled = True
+            current_user.backup_codes = json.dumps(backup_codes_hashed)
+            db.session.commit()
+            
+            # Store plain backup codes in session for display
+            session['backup_codes'] = backup_codes_plain
+            
+            if request.is_json:
+                return {'success': True, 'message': '2FA enabled successfully', 'backup_codes': backup_codes_plain}
+            
+            flash('2FA enabled successfully', 'success')
+            return redirect(url_for('auth.show_backup_codes'))
+        
+        if request.is_json:
+            return {'success': False, 'message': 'Invalid code'}, 400
+        
+        flash('Invalid code', 'error')
+    
+    # Generate QR code
+    if not current_user.totp_secret:
+        current_user.totp_secret = pyotp.random_base32()
+        db.session.commit()
+    
+    totp = pyotp.TOTP(current_user.totp_secret)
+    provisioning_uri = totp.provisioning_uri(
+        name=current_user.email,
+        issuer_name='FINA'
+    )
+    
+    # Generate QR code image
+    qr = qrcode.QRCode(version=1, box_size=10, border=5)
+    qr.add_data(provisioning_uri)
+    qr.make(fit=True)
+    img = qr.make_image(fill_color="black", back_color="white")
+    
+    buf = io.BytesIO()
+    img.save(buf, format='PNG')
+    buf.seek(0)
+    qr_code_base64 = base64.b64encode(buf.getvalue()).decode()
+    
+    return render_template('auth/setup_2fa.html', 
+                         qr_code=qr_code_base64,
+                         secret=current_user.totp_secret)
+
+
+@bp.route('/backup-codes', methods=['GET'])
+@login_required
+def show_backup_codes():
+    """Display backup codes after 2FA setup"""
+    backup_codes = session.get('backup_codes', [])
+    
+    if not backup_codes:
+        flash('No backup codes available', 'error')
+        return redirect(url_for('main.settings'))
+    
+    return render_template('auth/backup_codes.html', 
+                         backup_codes=backup_codes,
+                         username=current_user.username)
+
+
+@bp.route('/backup-codes/download', methods=['GET'])
+@login_required
+def download_backup_codes_pdf():
+    """Download backup codes as PDF"""
+    backup_codes = session.get('backup_codes', [])
+    
+    if not backup_codes:
+        flash('No backup codes available', 'error')
+        return redirect(url_for('main.settings'))
+    
+    try:
+        from reportlab.lib.pagesizes import letter
+        from reportlab.lib.units import inch
+        from reportlab.pdfgen import canvas
+        from reportlab.lib import colors
+        
+        # Create PDF in memory
+        buffer = io.BytesIO()
+        c = canvas.Canvas(buffer, pagesize=letter)
+        width, height = letter
+        
+        # Title
+        c.setFont("Helvetica-Bold", 24)
+        c.drawCentredString(width/2, height - 1*inch, "FINA")
+        
+        c.setFont("Helvetica-Bold", 18)
+        c.drawCentredString(width/2, height - 1.5*inch, "Two-Factor Authentication")
+        c.drawCentredString(width/2, height - 1.9*inch, "Backup Codes")
+        
+        # User info
+        c.setFont("Helvetica", 12)
+        c.drawString(1*inch, height - 2.5*inch, f"User: {current_user.username}")
+        c.drawString(1*inch, height - 2.8*inch, f"Email: {current_user.email}")
+        c.drawString(1*inch, height - 3.1*inch, f"Generated: {datetime.utcnow().strftime('%Y-%m-%d %H:%M UTC')}")
+        
+        # Warning message
+        c.setFillColorRGB(0.8, 0.2, 0.2)
+        c.setFont("Helvetica-Bold", 11)
+        c.drawString(1*inch, height - 3.7*inch, "IMPORTANT: Store these codes in a secure location!")
+        c.setFillColorRGB(0, 0, 0)
+        c.setFont("Helvetica", 10)
+        c.drawString(1*inch, height - 4.0*inch, "Each code can only be used once. Use them if you lose access to your authenticator app.")
+        
+        # Backup codes in two columns
+        c.setFont("Courier-Bold", 14)
+        y_position = height - 4.8*inch
+        x_left = 1.5*inch
+        x_right = 4.5*inch
+        
+        for i, code in enumerate(backup_codes):
+            if i % 2 == 0:
+                c.drawString(x_left, y_position, f"{i+1:2d}. {code}")
+            else:
+                c.drawString(x_right, y_position, f"{i+1:2d}. {code}")
+                y_position -= 0.4*inch
+        
+        # Footer
+        c.setFont("Helvetica", 8)
+        c.setFillColorRGB(0.5, 0.5, 0.5)
+        c.drawCentredString(width/2, 0.5*inch, "Keep this document secure and do not share these codes with anyone.")
+        
+        c.save()
+        buffer.seek(0)
+        
+        # Clear backup codes from session after download
+        session.pop('backup_codes', None)
+        
+        # Create response with PDF
+        response = make_response(buffer.getvalue())
+        response.headers['Content-Type'] = 'application/pdf'
+        response.headers['Content-Disposition'] = f'attachment; filename=FINA_BackupCodes_{current_user.username}_{datetime.utcnow().strftime("%Y%m%d")}.pdf'
+        
+        return response
+        
+    except ImportError:
+        # If reportlab is not installed, return codes as text file
+        text_content = f"FINA - Two-Factor Authentication Backup Codes\n\n"
+        text_content += f"User: {current_user.username}\n"
+        text_content += f"Email: {current_user.email}\n"
+        text_content += f"Generated: {datetime.utcnow().strftime('%Y-%m-%d %H:%M UTC')}\n\n"
+        text_content += "IMPORTANT: Store these codes in a secure location!\n"
+        text_content += "Each code can only be used once.\n\n"
+        text_content += "Backup Codes:\n"
+        text_content += "-" * 40 + "\n"
+        
+        for i, code in enumerate(backup_codes, 1):
+            text_content += f"{i:2d}. {code}\n"
+        
+        text_content += "-" * 40 + "\n"
+        text_content += "\nKeep this document secure and do not share these codes with anyone."
+        
+        # Clear backup codes from session
+        session.pop('backup_codes', None)
+        
+        response = make_response(text_content)
+        response.headers['Content-Type'] = 'text/plain'
+        response.headers['Content-Disposition'] = f'attachment; filename=FINA_BackupCodes_{current_user.username}_{datetime.utcnow().strftime("%Y%m%d")}.txt'
+        
+        return response
+
+
+@bp.route('/disable-2fa', methods=['POST'])
+@login_required
+def disable_2fa():
+    current_user.two_factor_enabled = False
+    current_user.backup_codes = None
+    db.session.commit()
+    
+    if request.is_json:
+        return {'success': True, 'message': '2FA disabled'}
+    
+    flash('2FA disabled', 'success')
+    return redirect(url_for('main.settings'))

backup/fina-1/app/routes/documents.py

@@ -0,0 +1,222 @@
+from flask import Blueprint, request, jsonify, send_file, current_app
+from flask_login import login_required, current_user
+from app import db
+from app.models import Document
+from werkzeug.utils import secure_filename
+import os
+import mimetypes
+from datetime import datetime
+
+bp = Blueprint('documents', __name__, url_prefix='/api/documents')
+
+# Max file size: 10MB
+MAX_FILE_SIZE = 10 * 1024 * 1024
+
+# Allowed file types for documents
+ALLOWED_DOCUMENT_TYPES = {
+    'pdf': 'application/pdf',
+    'csv': 'text/csv',
+    'xlsx': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+    'xls': 'application/vnd.ms-excel',
+    'png': 'image/png',
+    'jpg': 'image/jpeg',
+    'jpeg': 'image/jpeg'
+}
+
+def allowed_document(filename):
+    """Check if file type is allowed"""
+    return '.' in filename and \
+           filename.rsplit('.', 1)[1].lower() in ALLOWED_DOCUMENT_TYPES.keys()
+
+def get_file_type_icon(file_type):
+    """Get material icon name for file type"""
+    icons = {
+        'pdf': 'picture_as_pdf',
+        'csv': 'table_view',
+        'xlsx': 'table_view',
+        'xls': 'table_view',
+        'png': 'image',
+        'jpg': 'image',
+        'jpeg': 'image'
+    }
+    return icons.get(file_type.lower(), 'description')
+
+@bp.route('/', methods=['GET'])
+@login_required
+def get_documents():
+    """
+    Get all documents for current user
+    Security: Filters by current_user.id
+    """
+    page = request.args.get('page', 1, type=int)
+    per_page = request.args.get('per_page', 10, type=int)
+    search = request.args.get('search', '')
+    
+    # Security: Only get documents for current user
+    query = Document.query.filter_by(user_id=current_user.id)
+    
+    if search:
+        query = query.filter(Document.original_filename.ilike(f'%{search}%'))
+    
+    pagination = query.order_by(Document.created_at.desc()).paginate(
+        page=page, per_page=per_page, error_out=False
+    )
+    
+    return jsonify({
+        'documents': [doc.to_dict() for doc in pagination.items],
+        'total': pagination.total,
+        'pages': pagination.pages,
+        'current_page': page
+    })
+
+
+@bp.route('/', methods=['POST'])
+@login_required
+def upload_document():
+    """
+    Upload a new document
+    Security: Associates document with current_user.id
+    """
+    if 'file' not in request.files:
+        return jsonify({'success': False, 'message': 'No file provided'}), 400
+    
+    file = request.files['file']
+    
+    if not file or not file.filename:
+        return jsonify({'success': False, 'message': 'No file selected'}), 400
+    
+    if not allowed_document(file.filename):
+        return jsonify({
+            'success': False, 
+            'message': 'Invalid file type. Allowed: PDF, CSV, XLS, XLSX, PNG, JPG'
+        }), 400
+    
+    # Check file size
+    file.seek(0, os.SEEK_END)
+    file_size = file.tell()
+    file.seek(0)
+    
+    if file_size > MAX_FILE_SIZE:
+        return jsonify({
+            'success': False, 
+            'message': f'File too large. Maximum size: {MAX_FILE_SIZE // (1024*1024)}MB'
+        }), 400
+    
+    # Generate secure filename
+    original_filename = secure_filename(file.filename)
+    file_ext = original_filename.rsplit('.', 1)[1].lower()
+    timestamp = datetime.utcnow().timestamp()
+    filename = f"{current_user.id}_{timestamp}_{original_filename}"
+    
+    # Create documents directory if it doesn't exist
+    documents_dir = os.path.join(current_app.config['UPLOAD_FOLDER'], 'documents')
+    os.makedirs(documents_dir, exist_ok=True)
+    
+    # Save file
+    file_path = os.path.join(documents_dir, filename)
+    file.save(file_path)
+    
+    # Get document category from form data
+    document_category = request.form.get('category', 'Other')
+    
+    # Create document record - Security: user_id is current_user.id
+    document = Document(
+        filename=filename,
+        original_filename=original_filename,
+        file_path=file_path,
+        file_size=file_size,
+        file_type=file_ext.upper(),
+        mime_type=ALLOWED_DOCUMENT_TYPES.get(file_ext, 'application/octet-stream'),
+        document_category=document_category,
+        status='uploaded',
+        user_id=current_user.id
+    )
+    
+    db.session.add(document)
+    db.session.commit()
+    
+    return jsonify({
+        'success': True,
+        'message': 'Document uploaded successfully',
+        'document': document.to_dict()
+    }), 201
+
+
+@bp.route('/<int:document_id>/download', methods=['GET'])
+@login_required
+def download_document(document_id):
+    """
+    Download a document
+    Security: Checks document belongs to current_user
+    """
+    # Security: Filter by user_id
+    document = Document.query.filter_by(id=document_id, user_id=current_user.id).first()
+    
+    if not document:
+        return jsonify({'success': False, 'message': 'Document not found'}), 404
+    
+    if not os.path.exists(document.file_path):
+        return jsonify({'success': False, 'message': 'File not found on server'}), 404
+    
+    return send_file(
+        document.file_path,
+        mimetype=document.mime_type,
+        as_attachment=True,
+        download_name=document.original_filename
+    )
+
+
+@bp.route('/<int:document_id>', methods=['DELETE'])
+@login_required
+def delete_document(document_id):
+    """
+    Delete a document
+    Security: Checks document belongs to current_user
+    """
+    # Security: Filter by user_id
+    document = Document.query.filter_by(id=document_id, user_id=current_user.id).first()
+    
+    if not document:
+        return jsonify({'success': False, 'message': 'Document not found'}), 404
+    
+    # Delete physical file
+    if os.path.exists(document.file_path):
+        try:
+            os.remove(document.file_path)
+        except Exception as e:
+            print(f"Error deleting file: {e}")
+    
+    # Delete database record
+    db.session.delete(document)
+    db.session.commit()
+    
+    return jsonify({'success': True, 'message': 'Document deleted successfully'})
+
+
+@bp.route('/<int:document_id>/status', methods=['PUT'])
+@login_required
+def update_document_status(document_id):
+    """
+    Update document status (e.g., mark as analyzed)
+    Security: Checks document belongs to current_user
+    """
+    # Security: Filter by user_id
+    document = Document.query.filter_by(id=document_id, user_id=current_user.id).first()
+    
+    if not document:
+        return jsonify({'success': False, 'message': 'Document not found'}), 404
+    
+    data = request.get_json()
+    new_status = data.get('status')
+    
+    if new_status not in ['uploaded', 'processing', 'analyzed', 'error']:
+        return jsonify({'success': False, 'message': 'Invalid status'}), 400
+    
+    document.status = new_status
+    db.session.commit()
+    
+    return jsonify({
+        'success': True,
+        'message': 'Document status updated',
+        'document': document.to_dict()
+    })

backup/fina-1/app/routes/expenses.py

@@ -0,0 +1,349 @@
+from flask import Blueprint, request, jsonify, send_file, current_app
+from flask_login import login_required, current_user
+from app import db
+from app.models import Expense, Category
+from werkzeug.utils import secure_filename
+import os
+import csv
+import io
+from datetime import datetime
+
+bp = Blueprint('expenses', __name__, url_prefix='/api/expenses')
+
+ALLOWED_EXTENSIONS = {'png', 'jpg', 'jpeg', 'pdf'}
+
+def allowed_file(filename):
+    return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS
+
+
+@bp.route('/', methods=['GET'])
+@login_required
+def get_expenses():
+    page = request.args.get('page', 1, type=int)
+    per_page = request.args.get('per_page', 20, type=int)
+    category_id = request.args.get('category_id', type=int)
+    start_date = request.args.get('start_date')
+    end_date = request.args.get('end_date')
+    search = request.args.get('search', '')
+    
+    query = Expense.query.filter_by(user_id=current_user.id)
+    
+    if category_id:
+        query = query.filter_by(category_id=category_id)
+    
+    if start_date:
+        query = query.filter(Expense.date >= datetime.fromisoformat(start_date))
+    
+    if end_date:
+        query = query.filter(Expense.date <= datetime.fromisoformat(end_date))
+    
+    if search:
+        query = query.filter(Expense.description.ilike(f'%{search}%'))
+    
+    pagination = query.order_by(Expense.date.desc()).paginate(
+        page=page, per_page=per_page, error_out=False
+    )
+    
+    return jsonify({
+        'expenses': [expense.to_dict() for expense in pagination.items],
+        'total': pagination.total,
+        'pages': pagination.pages,
+        'current_page': page
+    })
+
+
+@bp.route('/', methods=['POST'])
+@login_required
+def create_expense():
+    data = request.form if request.files else request.get_json()
+    
+    # Validate required fields
+    if not data.get('amount') or not data.get('category_id') or not data.get('description'):
+        return jsonify({'success': False, 'message': 'Missing required fields'}), 400
+    
+    # Handle receipt upload
+    receipt_path = None
+    if 'receipt' in request.files:
+        file = request.files['receipt']
+        if file and file.filename and allowed_file(file.filename):
+            filename = secure_filename(f"{current_user.id}_{datetime.utcnow().timestamp()}_{file.filename}")
+            filepath = os.path.join(current_app.config['UPLOAD_FOLDER'], filename)
+            file.save(filepath)
+            receipt_path = filename
+    
+    # Create expense
+    expense = Expense(
+        amount=float(data.get('amount')),
+        currency=data.get('currency', current_user.currency),
+        description=data.get('description'),
+        category_id=int(data.get('category_id')),
+        user_id=current_user.id,
+        receipt_path=receipt_path,
+        date=datetime.fromisoformat(data.get('date')) if data.get('date') else datetime.utcnow()
+    )
+    
+    # Handle tags
+    if data.get('tags'):
+        if isinstance(data.get('tags'), str):
+            import json
+            tags = json.loads(data.get('tags'))
+        else:
+            tags = data.get('tags')
+        expense.set_tags(tags)
+    
+    db.session.add(expense)
+    db.session.commit()
+    
+    return jsonify({
+        'success': True,
+        'expense': expense.to_dict()
+    }), 201
+
+
+@bp.route('/<int:expense_id>', methods=['PUT'])
+@login_required
+def update_expense(expense_id):
+    expense = Expense.query.filter_by(id=expense_id, user_id=current_user.id).first()
+    
+    if not expense:
+        return jsonify({'success': False, 'message': 'Expense not found'}), 404
+    
+    data = request.form if request.files else request.get_json()
+    
+    # Update fields
+    if data.get('amount'):
+        expense.amount = float(data.get('amount'))
+    if data.get('currency'):
+        expense.currency = data.get('currency')
+    if data.get('description'):
+        expense.description = data.get('description')
+    if data.get('category_id'):
+        expense.category_id = int(data.get('category_id'))
+    if data.get('date'):
+        expense.date = datetime.fromisoformat(data.get('date'))
+    if data.get('tags') is not None:
+        if isinstance(data.get('tags'), str):
+            import json
+            tags = json.loads(data.get('tags'))
+        else:
+            tags = data.get('tags')
+        expense.set_tags(tags)
+    
+    # Handle receipt upload
+    if 'receipt' in request.files:
+        file = request.files['receipt']
+        if file and file.filename and allowed_file(file.filename):
+            # Delete old receipt
+            if expense.receipt_path:
+                old_path = os.path.join(current_app.config['UPLOAD_FOLDER'], expense.receipt_path)
+                if os.path.exists(old_path):
+                    os.remove(old_path)
+            
+            filename = secure_filename(f"{current_user.id}_{datetime.utcnow().timestamp()}_{file.filename}")
+            filepath = os.path.join(current_app.config['UPLOAD_FOLDER'], filename)
+            file.save(filepath)
+            expense.receipt_path = filename
+    
+    db.session.commit()
+    
+    return jsonify({
+        'success': True,
+        'expense': expense.to_dict()
+    })
+
+
+@bp.route('/<int:expense_id>', methods=['DELETE'])
+@login_required
+def delete_expense(expense_id):
+    expense = Expense.query.filter_by(id=expense_id, user_id=current_user.id).first()
+    
+    if not expense:
+        return jsonify({'success': False, 'message': 'Expense not found'}), 404
+    
+    # Delete receipt file
+    if expense.receipt_path:
+        receipt_path = os.path.join(current_app.config['UPLOAD_FOLDER'], expense.receipt_path)
+        if os.path.exists(receipt_path):
+            os.remove(receipt_path)
+    
+    db.session.delete(expense)
+    db.session.commit()
+    
+    return jsonify({'success': True, 'message': 'Expense deleted'})
+
+
+@bp.route('/categories', methods=['GET'])
+@login_required
+def get_categories():
+    categories = Category.query.filter_by(user_id=current_user.id).all()
+    return jsonify({
+        'categories': [cat.to_dict() for cat in categories]
+    })
+
+
+@bp.route('/categories', methods=['POST'])
+@login_required
+def create_category():
+    data = request.get_json()
+    
+    if not data.get('name'):
+        return jsonify({'success': False, 'message': 'Name is required'}), 400
+    
+    category = Category(
+        name=data.get('name'),
+        color=data.get('color', '#2b8cee'),
+        icon=data.get('icon', 'category'),
+        user_id=current_user.id
+    )
+    
+    db.session.add(category)
+    db.session.commit()
+    
+    return jsonify({
+        'success': True,
+        'category': category.to_dict()
+    }), 201
+
+
+@bp.route('/categories/<int:category_id>', methods=['PUT'])
+@login_required
+def update_category(category_id):
+    category = Category.query.filter_by(id=category_id, user_id=current_user.id).first()
+    
+    if not category:
+        return jsonify({'success': False, 'message': 'Category not found'}), 404
+    
+    data = request.get_json()
+    
+    if data.get('name'):
+        category.name = data.get('name')
+    if data.get('color'):
+        category.color = data.get('color')
+    if data.get('icon'):
+        category.icon = data.get('icon')
+    
+    db.session.commit()
+    
+    return jsonify({
+        'success': True,
+        'category': category.to_dict()
+    })
+
+
+@bp.route('/categories/<int:category_id>', methods=['DELETE'])
+@login_required
+def delete_category(category_id):
+    category = Category.query.filter_by(id=category_id, user_id=current_user.id).first()
+    
+    if not category:
+        return jsonify({'success': False, 'message': 'Category not found'}), 404
+    
+    # Check if category has expenses
+    if category.expenses.count() > 0:
+        return jsonify({'success': False, 'message': 'Cannot delete category with expenses'}), 400
+    
+    db.session.delete(category)
+    db.session.commit()
+    
+    return jsonify({'success': True, 'message': 'Category deleted'})
+
+
+@bp.route('/export/csv', methods=['GET'])
+@login_required
+def export_csv():
+    expenses = Expense.query.filter_by(user_id=current_user.id).order_by(Expense.date.desc()).all()
+    
+    output = io.StringIO()
+    writer = csv.writer(output)
+    
+    # Write header
+    writer.writerow(['Date', 'Description', 'Amount', 'Currency', 'Category', 'Tags'])
+    
+    # Write data
+    for expense in expenses:
+        writer.writerow([
+            expense.date.strftime('%Y-%m-%d %H:%M:%S'),
+            expense.description,
+            expense.amount,
+            expense.currency,
+            expense.category.name,
+            ', '.join(expense.get_tags())
+        ])
+    
+    output.seek(0)
+    
+    return send_file(
+        io.BytesIO(output.getvalue().encode('utf-8')),
+        mimetype='text/csv',
+        as_attachment=True,
+        download_name=f'fina_expenses_{datetime.utcnow().strftime("%Y%m%d")}.csv'
+    )
+
+
+@bp.route('/import/csv', methods=['POST'])
+@login_required
+def import_csv():
+    if 'file' not in request.files:
+        return jsonify({'success': False, 'message': 'No file provided'}), 400
+    
+    file = request.files['file']
+    if file.filename == '':
+        return jsonify({'success': False, 'message': 'No file selected'}), 400
+    
+    if not file.filename.endswith('.csv'):
+        return jsonify({'success': False, 'message': 'File must be CSV'}), 400
+    
+    try:
+        stream = io.StringIO(file.stream.read().decode('utf-8'))
+        reader = csv.DictReader(stream)
+        
+        imported_count = 0
+        errors = []
+        
+        for row in reader:
+            try:
+                # Find or create category
+                category_name = row.get('Category', 'Uncategorized')
+                category = Category.query.filter_by(user_id=current_user.id, name=category_name).first()
+                
+                if not category:
+                    category = Category(name=category_name, user_id=current_user.id)
+                    db.session.add(category)
+                    db.session.flush()
+                
+                # Parse date
+                date_str = row.get('Date', datetime.utcnow().strftime('%Y-%m-%d %H:%M:%S'))
+                expense_date = datetime.strptime(date_str, '%Y-%m-%d %H:%M:%S')
+                
+                # Create expense
+                expense = Expense(
+                    amount=float(row['Amount']),
+                    currency=row.get('Currency', current_user.currency),
+                    description=row['Description'],
+                    category_id=category.id,
+                    user_id=current_user.id,
+                    date=expense_date
+                )
+                
+                # Handle tags
+                if row.get('Tags'):
+                    tags = [tag.strip() for tag in row['Tags'].split(',')]
+                    expense.set_tags(tags)
+                
+                db.session.add(expense)
+                imported_count += 1
+                
+            except Exception as e:
+                errors.append(f"Row error: {str(e)}")
+        
+        db.session.commit()
+        
+        return jsonify({
+            'success': True,
+            'imported': imported_count,
+            'errors': errors
+        })
+    
+    except Exception as e:
+        db.session.rollback()
+        return jsonify({'success': False, 'message': f'Import failed: {str(e)}'}), 500

backup/fina-1/app/routes/main.py

@@ -0,0 +1,289 @@
+from flask import Blueprint, render_template, request, jsonify
+from flask_login import login_required, current_user
+from app import db
+from app.models import Expense, Category
+from sqlalchemy import func, extract
+from datetime import datetime, timedelta
+from collections import defaultdict
+
+bp = Blueprint('main', __name__)
+
+@bp.route('/')
+def index():
+    if current_user.is_authenticated:
+        return render_template('dashboard.html')
+    return render_template('landing.html')
+
+
+@bp.route('/dashboard')
+@login_required
+def dashboard():
+    return render_template('dashboard.html')
+
+
+@bp.route('/transactions')
+@login_required
+def transactions():
+    return render_template('transactions.html')
+
+
+@bp.route('/reports')
+@login_required
+def reports():
+    return render_template('reports.html')
+
+
+@bp.route('/settings')
+@login_required
+def settings():
+    return render_template('settings.html')
+
+
+@bp.route('/documents')
+@login_required
+def documents():
+    return render_template('documents.html')
+
+
+@bp.route('/api/dashboard-stats')
+@login_required
+def dashboard_stats():
+    now = datetime.utcnow()
+    
+    # Current month stats
+    current_month_start = now.replace(day=1, hour=0, minute=0, second=0, microsecond=0)
+    
+    # Previous month stats
+    if now.month == 1:
+        prev_month_start = now.replace(year=now.year-1, month=12, day=1)
+    else:
+        prev_month_start = current_month_start.replace(month=current_month_start.month-1)
+    
+    # Total spent this month
+    current_month_total = db.session.query(func.sum(Expense.amount)).filter(
+        Expense.user_id == current_user.id,
+        Expense.date >= current_month_start,
+        Expense.currency == current_user.currency
+    ).scalar() or 0
+    
+    # Previous month total
+    prev_month_total = db.session.query(func.sum(Expense.amount)).filter(
+        Expense.user_id == current_user.id,
+        Expense.date >= prev_month_start,
+        Expense.date < current_month_start,
+        Expense.currency == current_user.currency
+    ).scalar() or 0
+    
+    # Calculate percentage change
+    if prev_month_total > 0:
+        percent_change = ((current_month_total - prev_month_total) / prev_month_total) * 100
+    else:
+        percent_change = 100 if current_month_total > 0 else 0
+    
+    # Active categories
+    active_categories = Category.query.filter_by(user_id=current_user.id).count()
+    
+    # Total transactions this month
+    total_transactions = Expense.query.filter(
+        Expense.user_id == current_user.id,
+        Expense.date >= current_month_start
+    ).count()
+    
+    # Category breakdown
+    category_stats = db.session.query(
+        Category.name,
+        Category.color,
+        func.sum(Expense.amount).label('total')
+    ).join(Expense).filter(
+        Expense.user_id == current_user.id,
+        Expense.date >= current_month_start,
+        Expense.currency == current_user.currency
+    ).group_by(Category.id).all()
+    
+    # Monthly breakdown (last 6 months)
+    monthly_data = []
+    for i in range(5, -1, -1):
+        month_date = now - timedelta(days=30*i)
+        month_start = month_date.replace(day=1, hour=0, minute=0, second=0, microsecond=0)
+        if month_date.month == 12:
+            month_end = month_date.replace(year=month_date.year+1, month=1, day=1)
+        else:
+            month_end = month_date.replace(month=month_date.month+1, day=1)
+        
+        month_total = db.session.query(func.sum(Expense.amount)).filter(
+            Expense.user_id == current_user.id,
+            Expense.date >= month_start,
+            Expense.date < month_end,
+            Expense.currency == current_user.currency
+        ).scalar() or 0
+        
+        monthly_data.append({
+            'month': month_start.strftime('%b'),
+            'total': float(month_total)
+        })
+    
+    return jsonify({
+        'total_spent': float(current_month_total),
+        'percent_change': round(percent_change, 1),
+        'active_categories': active_categories,
+        'total_transactions': total_transactions,
+        'currency': current_user.currency,
+        'category_breakdown': [
+            {'name': stat[0], 'color': stat[1], 'amount': float(stat[2])}
+            for stat in category_stats
+        ],
+        'monthly_data': monthly_data
+    })
+
+
+@bp.route('/api/recent-transactions')
+@login_required
+def recent_transactions():
+    limit = request.args.get('limit', 10, type=int)
+    
+    expenses = Expense.query.filter_by(user_id=current_user.id)\
+        .order_by(Expense.date.desc())\
+        .limit(limit)\
+        .all()
+    
+    return jsonify({
+        'transactions': [expense.to_dict() for expense in expenses]
+    })
+
+
+@bp.route('/api/reports-stats')
+@login_required
+def reports_stats():
+    """
+    Generate comprehensive financial reports
+    Security: Only returns data for current_user (enforced by user_id filter)
+    """
+    period = request.args.get('period', '30')  # days
+    category_filter = request.args.get('category_id', type=int)
+    
+    try:
+        days = int(period)
+    except ValueError:
+        days = 30
+    
+    now = datetime.utcnow()
+    period_start = now - timedelta(days=days)
+    
+    # Query with security filter
+    query = Expense.query.filter(
+        Expense.user_id == current_user.id,
+        Expense.date >= period_start
+    )
+    
+    if category_filter:
+        query = query.filter_by(category_id=category_filter)
+    
+    expenses = query.all()
+    
+    # Total spent in period
+    total_spent = sum(exp.amount for exp in expenses if exp.currency == current_user.currency)
+    
+    # Previous period comparison
+    prev_period_start = period_start - timedelta(days=days)
+    prev_expenses = Expense.query.filter(
+        Expense.user_id == current_user.id,
+        Expense.date >= prev_period_start,
+        Expense.date < period_start,
+        Expense.currency == current_user.currency
+    ).all()
+    prev_total = sum(exp.amount for exp in prev_expenses)
+    
+    percent_change = 0
+    if prev_total > 0:
+        percent_change = ((total_spent - prev_total) / prev_total) * 100
+    elif total_spent > 0:
+        percent_change = 100
+    
+    # Top category
+    category_totals = {}
+    for exp in expenses:
+        if exp.currency == current_user.currency:
+            cat_name = exp.category.name
+            category_totals[cat_name] = category_totals.get(cat_name, 0) + exp.amount
+    
+    top_category = max(category_totals.items(), key=lambda x: x[1]) if category_totals else ('None', 0)
+    
+    # Average daily spending
+    avg_daily = total_spent / days if days > 0 else 0
+    prev_avg_daily = prev_total / days if days > 0 else 0
+    avg_change = 0
+    if prev_avg_daily > 0:
+        avg_change = ((avg_daily - prev_avg_daily) / prev_avg_daily) * 100
+    elif avg_daily > 0:
+        avg_change = 100
+    
+    # Savings rate (placeholder - would need income data)
+    savings_rate = 18.5  # Placeholder
+    
+    # Category breakdown for pie chart
+    category_breakdown = []
+    for cat_name, amount in sorted(category_totals.items(), key=lambda x: x[1], reverse=True):
+        category = Category.query.filter_by(user_id=current_user.id, name=cat_name).first()
+        if category:
+            percentage = (amount / total_spent * 100) if total_spent > 0 else 0
+            category_breakdown.append({
+                'name': cat_name,
+                'color': category.color,
+                'amount': float(amount),
+                'percentage': round(percentage, 1)
+            })
+    
+    # Daily spending trend (last 30 days)
+    daily_trend = []
+    for i in range(min(30, days)):
+        day_date = now - timedelta(days=i)
+        day_start = day_date.replace(hour=0, minute=0, second=0, microsecond=0)
+        day_end = day_start + timedelta(days=1)
+        
+        day_total = db.session.query(func.sum(Expense.amount)).filter(
+            Expense.user_id == current_user.id,
+            Expense.date >= day_start,
+            Expense.date < day_end,
+            Expense.currency == current_user.currency
+        ).scalar() or 0
+        
+        daily_trend.insert(0, {
+            'date': day_date.strftime('%d %b'),
+            'amount': float(day_total)
+        })
+    
+    # Monthly comparison (last 6 months)
+    monthly_comparison = []
+    for i in range(5, -1, -1):
+        month_date = now - timedelta(days=30*i)
+        month_start = month_date.replace(day=1, hour=0, minute=0, second=0, microsecond=0)
+        if month_date.month == 12:
+            month_end = month_date.replace(year=month_date.year+1, month=1, day=1)
+        else:
+            month_end = month_date.replace(month=month_date.month+1, day=1)
+        
+        month_total = db.session.query(func.sum(Expense.amount)).filter(
+            Expense.user_id == current_user.id,
+            Expense.date >= month_start,
+            Expense.date < month_end,
+            Expense.currency == current_user.currency
+        ).scalar() or 0
+        
+        monthly_comparison.append({
+            'month': month_start.strftime('%b'),
+            'amount': float(month_total)
+        })
+    
+    return jsonify({
+        'total_spent': float(total_spent),
+        'percent_change': round(percent_change, 1),
+        'top_category': {'name': top_category[0], 'amount': float(top_category[1])},
+        'avg_daily': float(avg_daily),
+        'avg_daily_change': round(avg_change, 1),
+        'savings_rate': savings_rate,
+        'category_breakdown': category_breakdown,
+        'daily_trend': daily_trend,
+        'monthly_comparison': monthly_comparison,
+        'currency': current_user.currency,
+        'period_days': days
+    })

backup/fina-1/app/routes/settings.py

@@ -0,0 +1,241 @@
+from flask import Blueprint, request, jsonify, current_app
+from flask_login import login_required, current_user
+from werkzeug.utils import secure_filename
+from app import db, bcrypt
+from app.models import User
+import os
+from datetime import datetime
+
+bp = Blueprint('settings', __name__, url_prefix='/api/settings')
+
+# Allowed avatar image types
+ALLOWED_AVATAR_TYPES = {'png', 'jpg', 'jpeg', 'gif', 'webp'}
+MAX_AVATAR_SIZE = 20 * 1024 * 1024  # 20MB
+
+def allowed_avatar(filename):
+    """Check if file extension is allowed for avatars"""
+    return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_AVATAR_TYPES
+
+
+@bp.route('/profile', methods=['GET'])
+@login_required
+def get_profile():
+    """
+    Get current user profile information
+    Security: Returns only current user's data
+    """
+    return jsonify({
+        'success': True,
+        'profile': {
+            'username': current_user.username,
+            'email': current_user.email,
+            'language': current_user.language,
+            'currency': current_user.currency,
+            'avatar': current_user.avatar,
+            'is_admin': current_user.is_admin,
+            'two_factor_enabled': current_user.two_factor_enabled,
+            'created_at': current_user.created_at.isoformat()
+        }
+    })
+
+
+@bp.route('/profile', methods=['PUT'])
+@login_required
+def update_profile():
+    """
+    Update user profile information
+    Security: Updates only current user's profile
+    """
+    data = request.get_json()
+    
+    if not data:
+        return jsonify({'success': False, 'error': 'No data provided'}), 400
+    
+    try:
+        # Update language
+        if 'language' in data:
+            if data['language'] in ['en', 'ro']:
+                current_user.language = data['language']
+            else:
+                return jsonify({'success': False, 'error': 'Invalid language'}), 400
+        
+        # Update currency
+        if 'currency' in data:
+            current_user.currency = data['currency']
+        
+        # Update username (check uniqueness)
+        if 'username' in data and data['username'] != current_user.username:
+            existing = User.query.filter_by(username=data['username']).first()
+            if existing:
+                return jsonify({'success': False, 'error': 'Username already taken'}), 400
+            current_user.username = data['username']
+        
+        # Update email (check uniqueness)
+        if 'email' in data and data['email'] != current_user.email:
+            existing = User.query.filter_by(email=data['email']).first()
+            if existing:
+                return jsonify({'success': False, 'error': 'Email already taken'}), 400
+            current_user.email = data['email']
+        
+        db.session.commit()
+        
+        return jsonify({
+            'success': True,
+            'message': 'Profile updated successfully',
+            'profile': {
+                'username': current_user.username,
+                'email': current_user.email,
+                'language': current_user.language,
+                'currency': current_user.currency,
+                'avatar': current_user.avatar
+            }
+        })
+        
+    except Exception as e:
+        db.session.rollback()
+        return jsonify({'success': False, 'error': str(e)}), 500
+
+
+@bp.route('/avatar', methods=['POST'])
+@login_required
+def upload_avatar():
+    """
+    Upload custom avatar image
+    Security: Associates avatar with current_user.id, validates file type and size
+    """
+    if 'avatar' not in request.files:
+        return jsonify({'success': False, 'error': 'No file provided'}), 400
+    
+    file = request.files['avatar']
+    
+    if not file or not file.filename:
+        return jsonify({'success': False, 'error': 'No file selected'}), 400
+    
+    if not allowed_avatar(file.filename):
+        return jsonify({
+            'success': False,
+            'error': 'Invalid file type. Allowed: PNG, JPG, JPEG, GIF, WEBP'
+        }), 400
+    
+    # Check file size
+    file.seek(0, os.SEEK_END)
+    file_size = file.tell()
+    file.seek(0)
+    
+    if file_size > MAX_AVATAR_SIZE:
+        return jsonify({
+            'success': False,
+            'error': f'File too large. Maximum size: {MAX_AVATAR_SIZE // (1024*1024)}MB'
+        }), 400
+    
+    try:
+        # Delete old custom avatar if exists (not default avatars)
+        if current_user.avatar and not current_user.avatar.startswith('icons/avatars/'):
+            old_path = os.path.join(current_app.root_path, 'static', current_user.avatar)
+            if os.path.exists(old_path):
+                os.remove(old_path)
+        
+        # Generate secure filename
+        file_ext = file.filename.rsplit('.', 1)[1].lower()
+        timestamp = int(datetime.utcnow().timestamp())
+        filename = f"user_{current_user.id}_{timestamp}.{file_ext}"
+        
+        # Create avatars directory in uploads
+        avatars_dir = os.path.join(current_app.config['UPLOAD_FOLDER'], 'avatars')
+        os.makedirs(avatars_dir, exist_ok=True)
+        
+        # Save file
+        file_path = os.path.join(avatars_dir, filename)
+        file.save(file_path)
+        
+        # Update user avatar (store relative path from static folder)
+        current_user.avatar = f"uploads/avatars/{filename}"
+        db.session.commit()
+        
+        return jsonify({
+            'success': True,
+            'message': 'Avatar uploaded successfully',
+            'avatar': current_user.avatar
+        })
+        
+    except Exception as e:
+        db.session.rollback()
+        return jsonify({'success': False, 'error': str(e)}), 500
+
+
+@bp.route('/avatar/default', methods=['PUT'])
+@login_required
+def set_default_avatar():
+    """
+    Set avatar to one of the default avatars
+    Security: Updates only current user's avatar
+    """
+    data = request.get_json()
+    
+    if not data or 'avatar' not in data:
+        return jsonify({'success': False, 'error': 'Avatar path required'}), 400
+    
+    avatar_path = data['avatar']
+    
+    # Validate it's a default avatar
+    if not avatar_path.startswith('icons/avatars/avatar-'):
+        return jsonify({'success': False, 'error': 'Invalid avatar selection'}), 400
+    
+    try:
+        # Delete old custom avatar if exists (not default avatars)
+        if current_user.avatar and not current_user.avatar.startswith('icons/avatars/'):
+            old_path = os.path.join(current_app.root_path, 'static', current_user.avatar)
+            if os.path.exists(old_path):
+                os.remove(old_path)
+        
+        current_user.avatar = avatar_path
+        db.session.commit()
+        
+        return jsonify({
+            'success': True,
+            'message': 'Avatar updated successfully',
+            'avatar': current_user.avatar
+        })
+        
+    except Exception as e:
+        db.session.rollback()
+        return jsonify({'success': False, 'error': str(e)}), 500
+
+
+@bp.route('/password', methods=['PUT'])
+@login_required
+def change_password():
+    """
+    Change user password
+    Security: Requires current password verification
+    """
+    data = request.get_json()
+    
+    if not data:
+        return jsonify({'success': False, 'error': 'No data provided'}), 400
+    
+    current_password = data.get('current_password')
+    new_password = data.get('new_password')
+    
+    if not current_password or not new_password:
+        return jsonify({'success': False, 'error': 'Current and new password required'}), 400
+    
+    # Verify current password
+    if not bcrypt.check_password_hash(current_user.password_hash, current_password):
+        return jsonify({'success': False, 'error': 'Current password is incorrect'}), 400
+    
+    if len(new_password) < 6:
+        return jsonify({'success': False, 'error': 'Password must be at least 6 characters'}), 400
+    
+    try:
+        current_user.password_hash = bcrypt.generate_password_hash(new_password).decode('utf-8')
+        db.session.commit()
+        
+        return jsonify({
+            'success': True,
+            'message': 'Password changed successfully'
+        })
+        
+    except Exception as e:
+        db.session.rollback()
+        return jsonify({'success': False, 'error': str(e)}), 500

backup/fina-1/app/static/icons/avatars/avatar-1.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none">
+  <circle cx="50" cy="50" r="50" fill="#3B82F6"/>
+  <circle cx="50" cy="35" r="15" fill="white"/>
+  <path d="M25 75 Q25 55 50 55 Q75 55 75 75" fill="white"/>
+</svg>

backup/fina-1/app/static/icons/avatars/avatar-2.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none">
+  <circle cx="50" cy="50" r="50" fill="#10B981"/>
+  <circle cx="50" cy="35" r="15" fill="white"/>
+  <path d="M25 75 Q25 55 50 55 Q75 55 75 75" fill="white"/>
+</svg>

backup/fina-1/app/static/icons/avatars/avatar-3.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none">
+  <circle cx="50" cy="50" r="50" fill="#F59E0B"/>
+  <circle cx="50" cy="35" r="15" fill="white"/>
+  <path d="M25 75 Q25 55 50 55 Q75 55 75 75" fill="white"/>
+</svg>

backup/fina-1/app/static/icons/avatars/avatar-4.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none">
+  <circle cx="50" cy="50" r="50" fill="#8B5CF6"/>
+  <circle cx="50" cy="35" r="15" fill="white"/>
+  <path d="M25 75 Q25 55 50 55 Q75 55 75 75" fill="white"/>
+</svg>

backup/fina-1/app/static/icons/avatars/avatar-5.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none">
+  <circle cx="50" cy="50" r="50" fill="#EF4444"/>
+  <circle cx="50" cy="35" r="15" fill="white"/>
+  <path d="M25 75 Q25 55 50 55 Q75 55 75 75" fill="white"/>
+</svg>

backup/fina-1/app/static/icons/avatars/avatar-6.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none">
+  <circle cx="50" cy="50" r="50" fill="#EC4899"/>
+  <circle cx="50" cy="35" r="15" fill="white"/>
+  <path d="M25 75 Q25 55 50 55 Q75 55 75 75" fill="white"/>
+</svg>

backup/fina-1/app/static/icons/create_logo.py

@@ -0,0 +1,87 @@
+from PIL import Image, ImageDraw, ImageFont
+import os
+
+def create_fina_logo(size):
+    # Create image with transparent background
+    img = Image.new('RGBA', (size, size), (0, 0, 0, 0))
+    draw = ImageDraw.Draw(img)
+    
+    # Background circle (dark blue gradient effect)
+    center = size // 2
+    for i in range(10):
+        radius = size // 2 - i * 2
+        alpha = 255 - i * 20
+        color = (0, 50 + i * 5, 80 + i * 8, alpha)
+        draw.ellipse([center - radius, center - radius, center + radius, center + radius], fill=color)
+    
+    # White inner circle
+    inner_radius = int(size * 0.42)
+    draw.ellipse([center - inner_radius, center - inner_radius, center + inner_radius, center + inner_radius], 
+                 fill=(245, 245, 245, 255))
+    
+    # Shield (cyan/turquoise)
+    shield_size = int(size * 0.25)
+    shield_x = int(center - shield_size * 0.5)
+    shield_y = int(center - shield_size * 0.3)
+    
+    # Draw shield shape
+    shield_points = [
+        (shield_x, shield_y),
+        (shield_x + shield_size, shield_y),
+        (shield_x + shield_size, shield_y + int(shield_size * 0.7)),
+        (shield_x + shield_size // 2, shield_y + int(shield_size * 1.2)),
+        (shield_x, shield_y + int(shield_size * 0.7))
+    ]
+    draw.polygon(shield_points, fill=(64, 224, 208, 200))
+    
+    # Coins (orange/golden)
+    coin_radius = int(size * 0.08)
+    coin_x = int(center + shield_size * 0.3)
+    coin_y = int(center - shield_size * 0.1)
+    
+    # Draw 3 stacked coins
+    for i in range(3):
+        y_offset = coin_y + i * int(coin_radius * 0.6)
+        # Coin shadow
+        draw.ellipse([coin_x - coin_radius + 2, y_offset - coin_radius + 2,
+                     coin_x + coin_radius + 2, y_offset + coin_radius + 2],
+                    fill=(100, 70, 0, 100))
+        # Coin body (gradient effect)
+        for j in range(5):
+            r = coin_radius - j
+            brightness = 255 - j * 20
+            draw.ellipse([coin_x - r, y_offset - r, coin_x + r, y_offset + r],
+                        fill=(255, 180 - j * 10, 50 - j * 5, 255))
+    
+    # Text "FINA"
+    try:
+        # Try to use a bold font
+        font_size = int(size * 0.15)
+        font = ImageFont.truetype("/usr/share/fonts/truetype/dejavu/DejaVuSans-Bold.ttf", font_size)
+    except:
+        font = ImageFont.load_default()
+    
+    text = "FINA"
+    text_bbox = draw.textbbox((0, 0), text, font=font)
+    text_width = text_bbox[2] - text_bbox[0]
+    text_height = text_bbox[3] - text_bbox[1]
+    text_x = center - text_width // 2
+    text_y = int(center + inner_radius * 0.5)
+    
+    # Text with cyan color
+    draw.text((text_x, text_y), text, fill=(64, 200, 224, 255), font=font)
+    
+    return img
+
+# Create logos
+logo_512 = create_fina_logo(512)
+logo_512.save('logo.png')
+logo_512.save('icon-512x512.png')
+
+logo_192 = create_fina_logo(192)
+logo_192.save('icon-192x192.png')
+
+logo_64 = create_fina_logo(64)
+logo_64.save('favicon.png')
+
+print("FINA logos created successfully!")

backup/fina-1/app/static/icons/create_round_logo.py

@@ -0,0 +1,112 @@
+from PIL import Image, ImageDraw, ImageFont
+import os
+
+def create_fina_logo_round(size):
+    # Create image with transparent background
+    img = Image.new('RGBA', (size, size), (0, 0, 0, 0))
+    draw = ImageDraw.Draw(img)
+    
+    center = size // 2
+    
+    # Outer border circle (light blue/cyan ring)
+    border_width = int(size * 0.05)
+    draw.ellipse([0, 0, size, size], fill=(100, 180, 230, 255))
+    draw.ellipse([border_width, border_width, size - border_width, size - border_width], 
+                 fill=(0, 0, 0, 0))
+    
+    # Background circle (dark blue gradient effect)
+    for i in range(15):
+        radius = (size // 2 - border_width) - i * 2
+        alpha = 255
+        color = (0, 50 + i * 3, 80 + i * 5, alpha)
+        draw.ellipse([center - radius, center - radius, center + radius, center + radius], fill=color)
+    
+    # White inner circle
+    inner_radius = int(size * 0.38)
+    draw.ellipse([center - inner_radius, center - inner_radius, center + inner_radius, center + inner_radius], 
+                 fill=(245, 245, 245, 255))
+    
+    # Shield (cyan/turquoise) - smaller for round design
+    shield_size = int(size * 0.22)
+    shield_x = int(center - shield_size * 0.6)
+    shield_y = int(center - shield_size * 0.4)
+    
+    # Draw shield shape
+    shield_points = [
+        (shield_x, shield_y),
+        (shield_x + shield_size, shield_y),
+        (shield_x + shield_size, shield_y + int(shield_size * 0.7)),
+        (shield_x + shield_size // 2, shield_y + int(shield_size * 1.2)),
+        (shield_x, shield_y + int(shield_size * 0.7))
+    ]
+    draw.polygon(shield_points, fill=(64, 224, 208, 220))
+    
+    # Coins (orange/golden) - adjusted position
+    coin_radius = int(size * 0.07)
+    coin_x = int(center + shield_size * 0.35)
+    coin_y = int(center - shield_size * 0.15)
+    
+    # Draw 3 stacked coins
+    for i in range(3):
+        y_offset = coin_y + i * int(coin_radius * 0.55)
+        # Coin shadow
+        draw.ellipse([coin_x - coin_radius + 2, y_offset - coin_radius + 2,
+                     coin_x + coin_radius + 2, y_offset + coin_radius + 2],
+                    fill=(100, 70, 0, 100))
+        # Coin body (gradient effect)
+        for j in range(5):
+            r = coin_radius - j
+            brightness = 255 - j * 20
+            draw.ellipse([coin_x - r, y_offset - r, coin_x + r, y_offset + r],
+                        fill=(255, 180 - j * 10, 50 - j * 5, 255))
+    
+    # Text "FINA"
+    try:
+        font_size = int(size * 0.13)
+        font = ImageFont.truetype("/usr/share/fonts/truetype/dejavu/DejaVuSans-Bold.ttf", font_size)
+    except:
+        font = ImageFont.load_default()
+    
+    text = "FINA"
+    text_bbox = draw.textbbox((0, 0), text, font=font)
+    text_width = text_bbox[2] - text_bbox[0]
+    text_height = text_bbox[3] - text_bbox[1]
+    text_x = center - text_width // 2
+    text_y = int(center + inner_radius * 0.45)
+    
+    # Text with cyan color
+    draw.text((text_x, text_y), text, fill=(43, 140, 238, 255), font=font)
+    
+    return img
+
+# Create all logo sizes
+print("Creating round FINA logos...")
+
+# Main logo for web app
+logo_512 = create_fina_logo_round(512)
+logo_512.save('logo.png')
+logo_512.save('icon-512x512.png')
+print("✓ Created logo.png (512x512)")
+
+# PWA icon
+logo_192 = create_fina_logo_round(192)
+logo_192.save('icon-192x192.png')
+print("✓ Created icon-192x192.png")
+
+# Favicon
+logo_64 = create_fina_logo_round(64)
+logo_64.save('favicon.png')
+print("✓ Created favicon.png (64x64)")
+
+# Small icon for notifications
+logo_96 = create_fina_logo_round(96)
+logo_96.save('icon-96x96.png')
+print("✓ Created icon-96x96.png")
+
+# Apple touch icon
+logo_180 = create_fina_logo_round(180)
+logo_180.save('apple-touch-icon.png')
+print("✓ Created apple-touch-icon.png (180x180)")
+
+print("\nAll round FINA logos created successfully!")
+print("Logos are circular/round shaped for PWA, notifications, and web app use.")

backup/fina-1/app/static/icons/logo.png.base64

@@ -0,0 +1 @@
+# Placeholder - the actual logo will be saved from the attachment

backup/fina-1/app/static/js/app.js

@@ -0,0 +1,168 @@
+// Global utility functions
+
+// Toast notifications
+function showToast(message, type = 'info') {
+    const container = document.getElementById('toast-container');
+    const toast = document.createElement('div');
+    
+    const colors = {
+        success: 'bg-green-500',
+        error: 'bg-red-500',
+        info: 'bg-primary',
+        warning: 'bg-yellow-500'
+    };
+    
+    toast.className = `${colors[type]} text-white px-6 py-3 rounded-lg shadow-lg flex items-center gap-3 animate-slide-in`;
+    toast.innerHTML = `
+        <span class="material-symbols-outlined text-[20px]">
+            ${type === 'success' ? 'check_circle' : type === 'error' ? 'error' : 'info'}
+        </span>
+        <span>${message}</span>
+    `;
+    
+    container.appendChild(toast);
+    
+    setTimeout(() => {
+        toast.style.opacity = '0';
+        toast.style.transform = 'translateX(100%)';
+        setTimeout(() => toast.remove(), 300);
+    }, 3000);
+}
+
+// Format currency
+function formatCurrency(amount, currency = 'USD') {
+    const symbols = {
+        'USD': '$',
+        'EUR': '€',
+        'GBP': '£',
+        'RON': 'lei'
+    };
+    
+    const symbol = symbols[currency] || currency;
+    const formatted = parseFloat(amount).toFixed(2);
+    
+    if (currency === 'RON') {
+        return `${formatted} ${symbol}`;
+    }
+    return `${symbol}${formatted}`;
+}
+
+// Format date
+function formatDate(dateString) {
+    const date = new Date(dateString);
+    const now = new Date();
+    const diff = now - date;
+    const days = Math.floor(diff / (1000 * 60 * 60 * 24));
+    
+    if (days === 0) return 'Today';
+    if (days === 1) return 'Yesterday';
+    if (days < 7) return `${days} days ago`;
+    
+    return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
+}
+
+// API helper
+async function apiCall(url, options = {}) {
+    try {
+        const response = await fetch(url, {
+            ...options,
+            headers: {
+                ...options.headers,
+                'Content-Type': options.body instanceof FormData ? undefined : 'application/json',
+            }
+        });
+        
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        
+        return await response.json();
+    } catch (error) {
+        console.error('API call failed:', error);
+        showToast('An error occurred. Please try again.', 'error');
+        throw error;
+    }
+}
+
+// Theme management
+function initTheme() {
+    // Check for saved theme preference or default to system preference
+    const savedTheme = localStorage.getItem('theme');
+    const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    
+    if (savedTheme === 'dark' || (!savedTheme && systemPrefersDark)) {
+        document.documentElement.classList.add('dark');
+        updateThemeUI(true);
+    } else {
+        document.documentElement.classList.remove('dark');
+        updateThemeUI(false);
+    }
+}
+
+function toggleTheme() {
+    const isDark = document.documentElement.classList.contains('dark');
+    
+    if (isDark) {
+        document.documentElement.classList.remove('dark');
+        localStorage.setItem('theme', 'light');
+        updateThemeUI(false);
+    } else {
+        document.documentElement.classList.add('dark');
+        localStorage.setItem('theme', 'dark');
+        updateThemeUI(true);
+    }
+    
+    // Dispatch custom event for other components to react to theme change
+    window.dispatchEvent(new CustomEvent('theme-changed', { detail: { isDark: !isDark } }));
+}
+
+function updateThemeUI(isDark) {
+    const themeIcon = document.getElementById('theme-icon');
+    const themeText = document.getElementById('theme-text');
+    
+    if (themeIcon && themeText) {
+        if (isDark) {
+            themeIcon.textContent = 'dark_mode';
+            themeText.textContent = 'Dark Mode';
+        } else {
+            themeIcon.textContent = 'light_mode';
+            themeText.textContent = 'Light Mode';
+        }
+    }
+}
+
+// Mobile menu toggle
+document.addEventListener('DOMContentLoaded', () => {
+    // Initialize theme
+    initTheme();
+    
+    // Theme toggle button
+    const themeToggle = document.getElementById('theme-toggle');
+    if (themeToggle) {
+        themeToggle.addEventListener('click', toggleTheme);
+    }
+    
+    // Mobile menu
+    const menuToggle = document.getElementById('menu-toggle');
+    const sidebar = document.getElementById('sidebar');
+    
+    if (menuToggle && sidebar) {
+        menuToggle.addEventListener('click', () => {
+            sidebar.classList.toggle('hidden');
+            sidebar.classList.toggle('flex');
+            sidebar.classList.toggle('absolute');
+            sidebar.classList.toggle('z-50');
+            sidebar.style.left = '0';
+        });
+        
+        // Close sidebar when clicking outside on mobile
+        document.addEventListener('click', (e) => {
+            if (window.innerWidth < 1024) {
+                if (!sidebar.contains(e.target) && !menuToggle.contains(e.target)) {
+                    sidebar.classList.add('hidden');
+                    sidebar.classList.remove('flex');
+                }
+            }
+        });
+    }
+});

backup/fina-1/app/static/js/dashboard.js

@@ -0,0 +1,236 @@
+// Dashboard JavaScript
+
+let categoryChart, monthlyChart;
+
+// Load dashboard data
+async function loadDashboardData() {
+    try {
+        const stats = await apiCall('/api/dashboard-stats');
+        
+        // Update KPI cards
+        document.getElementById('total-spent').textContent = formatCurrency(stats.total_spent, stats.currency);
+        document.getElementById('active-categories').textContent = stats.active_categories;
+        document.getElementById('total-transactions').textContent = stats.total_transactions;
+        
+        // Update percent change
+        const percentChange = document.getElementById('percent-change');
+        const isPositive = stats.percent_change >= 0;
+        percentChange.className = `${isPositive ? 'bg-red-500/10 text-red-400' : 'bg-green-500/10 text-green-400'} text-xs font-semibold px-2 py-1 rounded-full flex items-center gap-1`;
+        percentChange.innerHTML = `
+            <span class="material-symbols-outlined text-[14px]">${isPositive ? 'trending_up' : 'trending_down'}</span>
+            ${Math.abs(stats.percent_change)}%
+        `;
+        
+        // Load charts
+        loadCategoryChart(stats.category_breakdown);
+        loadMonthlyChart(stats.monthly_data);
+        
+        // Load recent transactions
+        loadRecentTransactions();
+        
+    } catch (error) {
+        console.error('Failed to load dashboard data:', error);
+    }
+}
+
+// Category pie chart
+function loadCategoryChart(data) {
+    const ctx = document.getElementById('category-chart').getContext('2d');
+    
+    if (categoryChart) {
+        categoryChart.destroy();
+    }
+    
+    if (data.length === 0) {
+        const isDark = document.documentElement.classList.contains('dark');
+        ctx.fillStyle = isDark ? '#92adc9' : '#64748b';
+        ctx.font = '14px Inter';
+        ctx.textAlign = 'center';
+        ctx.fillText('No data available', ctx.canvas.width / 2, ctx.canvas.height / 2);
+        return;
+    }
+    
+    categoryChart = new Chart(ctx, {
+        type: 'doughnut',
+        data: {
+            labels: data.map(d => d.name),
+            datasets: [{
+                data: data.map(d => d.amount),
+                backgroundColor: data.map(d => d.color),
+                borderWidth: 0
+            }]
+        },
+        options: {
+            responsive: true,
+            maintainAspectRatio: true,
+            plugins: {
+                legend: {
+                    position: 'bottom',
+                    labels: {
+                        color: document.documentElement.classList.contains('dark') ? '#92adc9' : '#64748b',
+                        padding: 15,
+                        font: { size: 12 }
+                    }
+                }
+            }
+        }
+    });
+}
+
+// Monthly bar chart
+function loadMonthlyChart(data) {
+    const ctx = document.getElementById('monthly-chart').getContext('2d');
+    
+    if (monthlyChart) {
+        monthlyChart.destroy();
+    }
+    
+    monthlyChart = new Chart(ctx, {
+        type: 'bar',
+        data: {
+            labels: data.map(d => d.month),
+            datasets: [{
+                label: 'Spending',
+                data: data.map(d => d.total),
+                backgroundColor: '#2b8cee',
+                borderRadius: 8
+            }]
+        },
+        options: {
+            responsive: true,
+            maintainAspectRatio: true,
+            plugins: {
+                legend: { display: false }
+            },
+            scales: {
+                y: {
+                    beginAtZero: true,
+                    ticks: { color: document.documentElement.classList.contains('dark') ? '#92adc9' : '#64748b' },
+                    grid: { color: document.documentElement.classList.contains('dark') ? '#233648' : '#e2e8f0' }
+                },
+                x: {
+                    ticks: { color: document.documentElement.classList.contains('dark') ? '#92adc9' : '#64748b' },
+                    grid: { display: false }
+                }
+            }
+        }
+    });
+}
+
+// Load recent transactions
+async function loadRecentTransactions() {
+    try {
+        const data = await apiCall('/api/recent-transactions?limit=5');
+        const container = document.getElementById('recent-transactions');
+        
+        if (data.transactions.length === 0) {
+            container.innerHTML = '<p class="text-[#92adc9] text-sm text-center py-8">No transactions yet</p>';
+            return;
+        }
+        
+        container.innerHTML = data.transactions.map(tx => `
+            <div class="flex items-center justify-between p-4 rounded-lg bg-slate-50 dark:bg-[#111a22] border border-border-light dark:border-[#233648] hover:border-primary/30 transition-colors">
+                <div class="flex items-center gap-3 flex-1">
+                    <div class="w-10 h-10 rounded-lg flex items-center justify-center" style="background: ${tx.category_color}20;">
+                        <span class="material-symbols-outlined text-[20px]" style="color: ${tx.category_color};">payments</span>
+                    </div>
+                    <div class="flex-1">
+                        <p class="text-text-main dark:text-white font-medium text-sm">${tx.description}</p>
+                        <p class="text-text-muted dark:text-[#92adc9] text-xs">${tx.category_name} • ${formatDate(tx.date)}</p>
+                    </div>
+                </div>
+                <div class="text-right">
+                    <p class="text-text-main dark:text-white font-semibold">${formatCurrency(tx.amount, tx.currency)}</p>
+                    ${tx.tags.length > 0 ? `<p class="text-text-muted dark:text-[#92adc9] text-xs">${tx.tags.join(', ')}</p>` : ''}
+                </div>
+            </div>
+        `).join('');
+    } catch (error) {
+        console.error('Failed to load transactions:', error);
+    }
+}
+
+// Expense modal
+const expenseModal = document.getElementById('expense-modal');
+const addExpenseBtn = document.getElementById('add-expense-btn');
+const closeModalBtn = document.getElementById('close-modal');
+const expenseForm = document.getElementById('expense-form');
+
+// Load categories for dropdown
+async function loadCategories() {
+    try {
+        const data = await apiCall('/api/expenses/categories');
+        const select = expenseForm.querySelector('[name="category_id"]');
+        
+        select.innerHTML = '<option value="">Select category...</option>' +
+            data.categories.map(cat => `<option value="${cat.id}">${cat.name}</option>`).join('');
+    } catch (error) {
+        console.error('Failed to load categories:', error);
+    }
+}
+
+// Open modal
+addExpenseBtn.addEventListener('click', () => {
+    expenseModal.classList.remove('hidden');
+    loadCategories();
+    
+    // Set today's date as default
+    const dateInput = expenseForm.querySelector('[name="date"]');
+    dateInput.value = new Date().toISOString().split('T')[0];
+});
+
+// Close modal
+closeModalBtn.addEventListener('click', () => {
+    expenseModal.classList.add('hidden');
+    expenseForm.reset();
+});
+
+// Close modal on outside click
+expenseModal.addEventListener('click', (e) => {
+    if (e.target === expenseModal) {
+        expenseModal.classList.add('hidden');
+        expenseForm.reset();
+    }
+});
+
+// Submit expense form
+expenseForm.addEventListener('submit', async (e) => {
+    e.preventDefault();
+    
+    const formData = new FormData(expenseForm);
+    
+    // Convert tags to array
+    const tagsString = formData.get('tags');
+    if (tagsString) {
+        const tags = tagsString.split(',').map(t => t.trim()).filter(t => t);
+        formData.set('tags', JSON.stringify(tags));
+    }
+    
+    // Convert date to ISO format
+    const date = new Date(formData.get('date'));
+    formData.set('date', date.toISOString());
+    
+    try {
+        const result = await apiCall('/api/expenses/', {
+            method: 'POST',
+            body: formData
+        });
+        
+        if (result.success) {
+            showToast('Expense added successfully!', 'success');
+            expenseModal.classList.add('hidden');
+            expenseForm.reset();
+            loadDashboardData();
+        }
+    } catch (error) {
+        console.error('Failed to add expense:', error);
+    }
+});
+
+// Initialize dashboard
+document.addEventListener('DOMContentLoaded', () => {
+    loadDashboardData();
+    
+    // Refresh data every 5 minutes
+    setInterval(loadDashboardData, 5 * 60 * 1000);
+});

backup/fina-1/app/static/js/documents.js

@@ -0,0 +1,442 @@
+// Documents Page Functionality
+let currentPage = 1;
+const itemsPerPage = 10;
+let searchQuery = '';
+let allDocuments = [];
+
+// Initialize documents page
+document.addEventListener('DOMContentLoaded', () => {
+    loadDocuments();
+    setupEventListeners();
+});
+
+// Setup event listeners
+function setupEventListeners() {
+    // File input change
+    const fileInput = document.getElementById('file-input');
+    if (fileInput) {
+        fileInput.addEventListener('change', handleFileSelect);
+    }
+    
+    // Drag and drop
+    const uploadArea = document.getElementById('upload-area');
+    if (uploadArea) {
+        uploadArea.addEventListener('dragover', (e) => {
+            e.preventDefault();
+            uploadArea.classList.add('!border-primary', '!bg-primary/5');
+        });
+        
+        uploadArea.addEventListener('dragleave', () => {
+            uploadArea.classList.remove('!border-primary', '!bg-primary/5');
+        });
+        
+        uploadArea.addEventListener('drop', (e) => {
+            e.preventDefault();
+            uploadArea.classList.remove('!border-primary', '!bg-primary/5');
+            const files = e.dataTransfer.files;
+            handleFiles(files);
+        });
+    }
+    
+    // Search input
+    const searchInput = document.getElementById('search-input');
+    if (searchInput) {
+        let debounceTimer;
+        searchInput.addEventListener('input', (e) => {
+            clearTimeout(debounceTimer);
+            debounceTimer = setTimeout(() => {
+                searchQuery = e.target.value.toLowerCase();
+                currentPage = 1;
+                loadDocuments();
+            }, 300);
+        });
+    }
+}
+
+// Handle file select from input
+function handleFileSelect(e) {
+    const files = e.target.files;
+    handleFiles(files);
+}
+
+// Handle file upload
+async function handleFiles(files) {
+    if (files.length === 0) return;
+    
+    const allowedTypes = ['pdf', 'csv', 'xlsx', 'xls', 'png', 'jpg', 'jpeg'];
+    const maxSize = 10 * 1024 * 1024; // 10MB
+    
+    for (const file of files) {
+        const ext = file.name.split('.').pop().toLowerCase();
+        
+        if (!allowedTypes.includes(ext)) {
+            showNotification('error', `${file.name}: Unsupported file type. Only PDF, CSV, XLS, XLSX, PNG, JPG allowed.`);
+            continue;
+        }
+        
+        if (file.size > maxSize) {
+            showNotification('error', `${file.name}: File size exceeds 10MB limit.`);
+            continue;
+        }
+        
+        await uploadFile(file);
+    }
+    
+    // Reset file input
+    const fileInput = document.getElementById('file-input');
+    if (fileInput) fileInput.value = '';
+    
+    // Reload documents list
+    loadDocuments();
+}
+
+// Upload file to server
+async function uploadFile(file) {
+    const formData = new FormData();
+    formData.append('file', file);
+    
+    try {
+        const response = await fetch('/api/documents/', {
+            method: 'POST',
+            body: formData
+        });
+        
+        const result = await response.json();
+        
+        if (response.ok) {
+            showNotification('success', `${file.name} uploaded successfully!`);
+        } else {
+            showNotification('error', result.error || 'Upload failed');
+        }
+    } catch (error) {
+        console.error('Upload error:', error);
+        showNotification('error', 'An error occurred during upload');
+    }
+}
+
+// Load documents from API
+async function loadDocuments() {
+    try {
+        const params = new URLSearchParams({
+            page: currentPage,
+            per_page: itemsPerPage
+        });
+        
+        if (searchQuery) {
+            params.append('search', searchQuery);
+        }
+        
+        const data = await apiCall(`/api/documents/?${params.toString()}`);
+        
+        allDocuments = data.documents;
+        displayDocuments(data.documents);
+        updatePagination(data.pagination);
+    } catch (error) {
+        console.error('Error loading documents:', error);
+        document.getElementById('documents-list').innerHTML = `
+            <tr>
+                <td colspan="5" class="px-6 py-8 text-center text-text-muted dark:text-[#92adc9]">
+                    <span data-translate="documents.errorLoading">Failed to load documents. Please try again.</span>
+                </td>
+            </tr>
+        `;
+    }
+}
+
+// Display documents in table
+function displayDocuments(documents) {
+    const tbody = document.getElementById('documents-list');
+    
+    if (documents.length === 0) {
+        tbody.innerHTML = `
+            <tr>
+                <td colspan="5" class="px-6 py-8 text-center text-text-muted dark:text-[#92adc9]">
+                    <span data-translate="documents.noDocuments">No documents found. Upload your first document!</span>
+                </td>
+            </tr>
+        `;
+        return;
+    }
+    
+    tbody.innerHTML = documents.map(doc => {
+        const statusConfig = getStatusConfig(doc.status);
+        const fileIcon = getFileIcon(doc.file_type);
+        
+        return `
+            <tr class="hover:bg-slate-50 dark:hover:bg-white/[0.02] transition-colors">
+                <td class="px-6 py-4">
+                    <div class="flex items-center gap-3">
+                        <span class="material-symbols-outlined text-[20px] ${fileIcon.color}">${fileIcon.icon}</span>
+                        <div class="flex flex-col">
+                            <span class="text-text-main dark:text-white font-medium">${escapeHtml(doc.original_filename)}</span>
+                            <span class="text-xs text-text-muted dark:text-[#92adc9]">${formatFileSize(doc.file_size)}</span>
+                        </div>
+                    </div>
+                </td>
+                <td class="px-6 py-4 text-text-main dark:text-white">
+                    ${formatDate(doc.created_at)}
+                </td>
+                <td class="px-6 py-4">
+                    <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-medium bg-slate-100 dark:bg-white/10 text-text-main dark:text-white">
+                        ${doc.document_category || 'Other'}
+                    </span>
+                </td>
+                <td class="px-6 py-4">
+                    <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium ${statusConfig.className}">
+                        ${statusConfig.hasIcon ? `<span class="material-symbols-outlined text-[14px]">${statusConfig.icon}</span>` : ''}
+                        <span data-translate="documents.status${doc.status.charAt(0).toUpperCase() + doc.status.slice(1)}">${doc.status}</span>
+                    </span>
+                </td>
+                <td class="px-6 py-4">
+                    <div class="flex items-center justify-end gap-2">
+                        <button onclick="downloadDocument(${doc.id})" class="p-2 text-text-muted dark:text-[#92adc9] hover:text-primary hover:bg-primary/10 rounded-lg transition-colors" title="Download">
+                            <span class="material-symbols-outlined text-[20px]">download</span>
+                        </button>
+                        <button onclick="deleteDocument(${doc.id})" class="p-2 text-text-muted dark:text-[#92adc9] hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-500/10 rounded-lg transition-colors" title="Delete">
+                            <span class="material-symbols-outlined text-[20px]">delete</span>
+                        </button>
+                    </div>
+                </td>
+            </tr>
+        `;
+    }).join('');
+}
+
+// Get status configuration
+function getStatusConfig(status) {
+    const configs = {
+        uploaded: {
+            className: 'bg-blue-100 dark:bg-blue-500/20 text-blue-700 dark:text-blue-400',
+            icon: 'upload',
+            hasIcon: true
+        },
+        processing: {
+            className: 'bg-purple-100 dark:bg-purple-500/20 text-purple-700 dark:text-purple-400 animate-pulse',
+            icon: 'sync',
+            hasIcon: true
+        },
+        analyzed: {
+            className: 'bg-green-100 dark:bg-green-500/20 text-green-700 dark:text-green-400',
+            icon: 'verified',
+            hasIcon: true
+        },
+        error: {
+            className: 'bg-red-100 dark:bg-red-500/20 text-red-700 dark:text-red-400',
+            icon: 'error',
+            hasIcon: true
+        }
+    };
+    
+    return configs[status] || configs.uploaded;
+}
+
+// Get file icon
+function getFileIcon(fileType) {
+    const icons = {
+        pdf: { icon: 'picture_as_pdf', color: 'text-red-500' },
+        csv: { icon: 'table_view', color: 'text-green-500' },
+        xlsx: { icon: 'table_view', color: 'text-green-600' },
+        xls: { icon: 'table_view', color: 'text-green-600' },
+        png: { icon: 'image', color: 'text-blue-500' },
+        jpg: { icon: 'image', color: 'text-blue-500' },
+        jpeg: { icon: 'image', color: 'text-blue-500' }
+    };
+    
+    return icons[fileType?.toLowerCase()] || { icon: 'description', color: 'text-gray-500' };
+}
+
+// Update pagination
+function updatePagination(pagination) {
+    const { page, pages, total, per_page } = pagination;
+    
+    // Update count display
+    const start = (page - 1) * per_page + 1;
+    const end = Math.min(page * per_page, total);
+    
+    document.getElementById('page-start').textContent = total > 0 ? start : 0;
+    document.getElementById('page-end').textContent = end;
+    document.getElementById('total-count').textContent = total;
+    
+    // Update pagination buttons
+    const paginationDiv = document.getElementById('pagination');
+    
+    if (pages <= 1) {
+        paginationDiv.innerHTML = '';
+        return;
+    }
+    
+    let buttons = '';
+    
+    // Previous button
+    buttons += `
+        <button onclick="changePage(${page - 1})" 
+            class="px-3 py-1.5 rounded-lg text-sm font-medium ${page === 1 ? 'bg-gray-100 dark:bg-white/5 text-text-muted dark:text-[#92adc9]/50 cursor-not-allowed' : 'bg-card-light dark:bg-card-dark text-text-main dark:text-white hover:bg-slate-100 dark:hover:bg-white/10 border border-border-light dark:border-[#233648]'} transition-colors"
+            ${page === 1 ? 'disabled' : ''}>
+            <span class="material-symbols-outlined text-[18px]">chevron_left</span>
+        </button>
+    `;
+    
+    // Page numbers
+    const maxButtons = 5;
+    let startPage = Math.max(1, page - Math.floor(maxButtons / 2));
+    let endPage = Math.min(pages, startPage + maxButtons - 1);
+    
+    if (endPage - startPage < maxButtons - 1) {
+        startPage = Math.max(1, endPage - maxButtons + 1);
+    }
+    
+    for (let i = startPage; i <= endPage; i++) {
+        buttons += `
+            <button onclick="changePage(${i})" 
+                class="px-3 py-1.5 rounded-lg text-sm font-medium ${i === page ? 'bg-primary text-white' : 'bg-card-light dark:bg-card-dark text-text-main dark:text-white hover:bg-slate-100 dark:hover:bg-white/10 border border-border-light dark:border-[#233648]'} transition-colors">
+                ${i}
+            </button>
+        `;
+    }
+    
+    // Next button
+    buttons += `
+        <button onclick="changePage(${page + 1})" 
+            class="px-3 py-1.5 rounded-lg text-sm font-medium ${page === pages ? 'bg-gray-100 dark:bg-white/5 text-text-muted dark:text-[#92adc9]/50 cursor-not-allowed' : 'bg-card-light dark:bg-card-dark text-text-main dark:text-white hover:bg-slate-100 dark:hover:bg-white/10 border border-border-light dark:border-[#233648]'} transition-colors"
+            ${page === pages ? 'disabled' : ''}>
+            <span class="material-symbols-outlined text-[18px]">chevron_right</span>
+        </button>
+    `;
+    
+    paginationDiv.innerHTML = buttons;
+}
+
+// Change page
+function changePage(page) {
+    currentPage = page;
+    loadDocuments();
+}
+
+// Download document
+async function downloadDocument(id) {
+    try {
+        const response = await fetch(`/api/documents/${id}/download`);
+        
+        if (!response.ok) {
+            throw new Error('Download failed');
+        }
+        
+        const blob = await response.blob();
+        const contentDisposition = response.headers.get('Content-Disposition');
+        const filename = contentDisposition 
+            ? contentDisposition.split('filename=')[1].replace(/"/g, '')
+            : `document_${id}`;
+        
+        const url = window.URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = filename;
+        document.body.appendChild(a);
+        a.click();
+        window.URL.revokeObjectURL(url);
+        document.body.removeChild(a);
+        
+        showNotification('success', 'Document downloaded successfully!');
+    } catch (error) {
+        console.error('Download error:', error);
+        showNotification('error', 'Failed to download document');
+    }
+}
+
+// Delete document
+async function deleteDocument(id) {
+    if (!confirm('Are you sure you want to delete this document? This action cannot be undone.')) {
+        return;
+    }
+    
+    try {
+        const response = await fetch(`/api/documents/${id}`, {
+            method: 'DELETE'
+        });
+        
+        const result = await response.json();
+        
+        if (response.ok) {
+            showNotification('success', 'Document deleted successfully!');
+            loadDocuments();
+        } else {
+            showNotification('error', result.error || 'Failed to delete document');
+        }
+    } catch (error) {
+        console.error('Delete error:', error);
+        showNotification('error', 'An error occurred while deleting');
+    }
+}
+
+// Format file size
+function formatFileSize(bytes) {
+    if (bytes === 0) return '0 B';
+    
+    const k = 1024;
+    const sizes = ['B', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    
+    return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
+}
+
+// Format date
+function formatDate(dateString) {
+    const date = new Date(dateString);
+    const now = new Date();
+    const diff = now - date;
+    const days = Math.floor(diff / (1000 * 60 * 60 * 24));
+    
+    if (days === 0) {
+        const hours = Math.floor(diff / (1000 * 60 * 60));
+        if (hours === 0) {
+            const minutes = Math.floor(diff / (1000 * 60));
+            return minutes <= 1 ? 'Just now' : `${minutes}m ago`;
+        }
+        return `${hours}h ago`;
+    } else if (days === 1) {
+        return 'Yesterday';
+    } else if (days < 7) {
+        return `${days}d ago`;
+    } else {
+        return date.toLocaleDateString('en-US', { 
+            year: 'numeric', 
+            month: 'short', 
+            day: 'numeric' 
+        });
+    }
+}
+
+// Escape HTML to prevent XSS
+function escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+}
+
+// Show notification
+function showNotification(type, message) {
+    // Create notification element
+    const notification = document.createElement('div');
+    notification.className = `fixed top-4 right-4 z-50 px-4 py-3 rounded-lg shadow-lg flex items-center gap-3 animate-slideIn ${
+        type === 'success' 
+            ? 'bg-green-500 text-white' 
+            : 'bg-red-500 text-white'
+    }`;
+    
+    notification.innerHTML = `
+        <span class="material-symbols-outlined text-[20px]">
+            ${type === 'success' ? 'check_circle' : 'error'}
+        </span>
+        <span class="text-sm font-medium">${escapeHtml(message)}</span>
+    `;
+    
+    document.body.appendChild(notification);
+    
+    // Remove after 3 seconds
+    setTimeout(() => {
+        notification.classList.add('animate-slideOut');
+        setTimeout(() => {
+            document.body.removeChild(notification);
+        }, 300);
+    }, 3000);
+}

backup/fina-1/app/static/js/i18n.js

@@ -0,0 +1,356 @@
+// Multi-language support
+
+const translations = {
+    en: {
+        // Navigation
+        'nav.dashboard': 'Dashboard',
+        'nav.transactions': 'Transactions',
+        'nav.reports': 'Reports',
+        'nav.admin': 'Admin',
+        'nav.settings': 'Settings',
+        'nav.logout': 'Log out',
+        
+        // Dashboard
+        'dashboard.total_spent': 'Total Spent',
+        'dashboard.active_categories': 'Active Categories',
+        'dashboard.total_transactions': 'Total Transactions',
+        'dashboard.vs_last_month': 'vs last month',
+        'dashboard.categories_in_use': 'categories in use',
+        'dashboard.this_month': 'this month',
+        'dashboard.spending_by_category': 'Spending by Category',
+        'dashboard.monthly_trend': 'Monthly Trend',
+        'dashboard.recent_transactions': 'Recent Transactions',
+        'dashboard.view_all': 'View All',
+        
+        // Login
+        'login.title': 'Welcome Back',
+        'login.tagline': 'Track your expenses, manage your finances',
+        'login.remember_me': 'Remember me',
+        'login.sign_in': 'Sign In',
+        'login.no_account': "Don't have an account?",
+        'login.register': 'Register',
+        
+        // Register
+        'register.title': 'Create Account',
+        'register.tagline': 'Start managing your finances today',
+        'register.create_account': 'Create Account',
+        'register.have_account': 'Already have an account?',
+        'register.login': 'Login',
+        
+        // Forms
+        'form.email': 'Email',
+        'form.password': 'Password',
+        'form.username': 'Username',
+        'form.language': 'Language',
+        'form.currency': 'Currency',
+        'form.amount': 'Amount',
+        'form.description': 'Description',
+        'form.category': 'Category',
+        'form.date': 'Date',
+        'form.tags': 'Tags (comma separated)',
+        'form.receipt': 'Receipt (optional)',
+        'form.2fa_code': '2FA Code',
+        
+        // Actions
+        'actions.add_expense': 'Add Expense',
+        'actions.save': 'Save Expense',
+        
+        // Modal
+        'modal.add_expense': 'Add Expense',
+        
+        // Reports
+        'reports.title': 'Financial Reports',
+        'reports.export': 'Export CSV',
+        'reports.analysisPeriod': 'Analysis Period:',
+        'reports.last30Days': 'Last 30 Days',
+        'reports.quarter': 'Quarter',
+        'reports.ytd': 'YTD',
+        'reports.allCategories': 'All Categories',
+        'reports.generate': 'Generate Report',
+        'reports.totalSpent': 'Total Spent',
+        'reports.topCategory': 'Top Category',
+        'reports.avgDaily': 'Avg. Daily',
+        'reports.savingsRate': 'Savings Rate',
+        'reports.vsLastMonth': 'vs last period',
+        'reports.spentThisPeriod': 'spent this period',
+        'reports.placeholder': 'Placeholder',
+        'reports.spendingTrend': 'Spending Trend',
+        'reports.categoryBreakdown': 'Category Breakdown',
+        'reports.monthlySpending': 'Monthly Spending',
+        
+        // User
+        'user.admin': 'Admin',
+        'user.user': 'User',
+        
+        // Documents
+        'nav.documents': 'Documents',
+        'documents.title': 'Documents',
+        'documents.uploadTitle': 'Upload Documents',
+        'documents.dragDrop': 'Drag & drop files here or click to browse',
+        'documents.uploadDesc': 'Upload bank statements, invoices, or receipts.',
+        'documents.supportedFormats': 'Supported formats: CSV, PDF, XLS, XLSX, PNG, JPG (Max 10MB)',
+        'documents.yourFiles': 'Your Files',
+        'documents.searchPlaceholder': 'Search by name...',
+        'documents.tableDocName': 'Document Name',
+        'documents.tableUploadDate': 'Upload Date',
+        'documents.tableType': 'Type',
+        'documents.tableStatus': 'Status',
+        'documents.tableActions': 'Actions',
+        'documents.statusUploaded': 'Uploaded',
+        'documents.statusProcessing': 'Processing',
+        'documents.statusAnalyzed': 'Analyzed',
+        'documents.statusError': 'Error',
+        'documents.showing': 'Showing',
+        'documents.of': 'of',
+        'documents.documents': 'documents',
+        'documents.noDocuments': 'No documents found. Upload your first document!',
+        'documents.errorLoading': 'Failed to load documents. Please try again.',
+        
+        // Settings
+        'settings.title': 'Settings',
+        'settings.avatar': 'Profile Avatar',
+        'settings.uploadAvatar': 'Upload Custom',
+        'settings.avatarDesc': 'PNG, JPG, GIF, WEBP. Max 20MB',
+        'settings.defaultAvatars': 'Or choose a default avatar:',
+        'settings.profile': 'Profile Information',
+        'settings.saveProfile': 'Save Profile',
+        'settings.changePassword': 'Change Password',
+        'settings.currentPassword': 'Current Password',
+        'settings.newPassword': 'New Password',
+        'settings.confirmPassword': 'Confirm New Password',
+        'settings.updatePassword': 'Update Password',
+        'settings.twoFactor': 'Two-Factor Authentication',
+        'settings.twoFactorEnabled': '2FA is currently enabled for your account',
+        'settings.twoFactorDisabled': 'Add an extra layer of security to your account',
+        'settings.enabled': 'Enabled',
+        'settings.disabled': 'Disabled',
+        'settings.regenerateCodes': 'Regenerate Backup Codes',
+        'settings.enable2FA': 'Enable 2FA',
+        'settings.disable2FA': 'Disable 2FA',
+        
+        // Two-Factor Authentication
+        'twofa.setupTitle': 'Setup Two-Factor Authentication',
+        'twofa.setupDesc': 'Scan the QR code with your authenticator app',
+        'twofa.step1': 'Step 1: Scan QR Code',
+        'twofa.step1Desc': 'Open your authenticator app (Google Authenticator, Authy, etc.) and scan this QR code:',
+        'twofa.manualEntry': "Can't scan? Enter code manually",
+        'twofa.enterManually': 'Enter this code in your authenticator app:',
+        'twofa.step2': 'Step 2: Verify Code',
+        'twofa.step2Desc': 'Enter the 6-digit code from your authenticator app:',
+        'twofa.enable': 'Enable 2FA',
+        'twofa.infoText': "After enabling 2FA, you'll receive backup codes that you can use if you lose access to your authenticator app. Keep them in a safe place!",
+        'twofa.setupSuccess': 'Two-Factor Authentication Enabled!',
+        'twofa.backupCodesDesc': 'Save these backup codes in a secure location',
+        'twofa.important': 'Important!',
+        'twofa.backupCodesWarning': "Each backup code can only be used once. Store them securely - you'll need them if you lose access to your authenticator app.",
+        'twofa.yourBackupCodes': 'Your Backup Codes',
+        'twofa.downloadPDF': 'Download as PDF',
+        'twofa.print': 'Print Codes',
+        'twofa.continueToSettings': 'Continue to Settings',
+        'twofa.howToUse': 'How to use backup codes:',
+        'twofa.useWhen': "Use a backup code when you can't access your authenticator app",
+        'twofa.enterCode': 'Enter the code in the 2FA field when logging in',
+        'twofa.oneTimeUse': 'Each code works only once - it will be deleted after use',
+        'twofa.regenerate': 'You can regenerate codes anytime from Settings',
+        
+        // Actions
+        'actions.cancel': 'Cancel'
+    },
+    ro: {
+        // Navigation
+        'nav.dashboard': 'Tablou de bord',
+        'nav.transactions': 'Tranzacții',
+        'nav.reports': 'Rapoarte',
+        'nav.admin': 'Admin',
+        'nav.settings': 'Setări',
+        'nav.logout': 'Deconectare',
+        
+        // Dashboard
+        'dashboard.total_spent': 'Total Cheltuit',
+        'dashboard.active_categories': 'Categorii Active',
+        'dashboard.total_transactions': 'Total Tranzacții',
+        'dashboard.vs_last_month': 'față de luna trecută',
+        'dashboard.categories_in_use': 'categorii în uz',
+        'dashboard.this_month': 'luna aceasta',
+        'dashboard.spending_by_category': 'Cheltuieli pe Categorii',
+        'dashboard.monthly_trend': 'Tendință Lunară',
+        'dashboard.recent_transactions': 'Tranzacții Recente',
+        'dashboard.view_all': 'Vezi Toate',
+        
+        // Login
+        'login.title': 'Bine ai revenit',
+        'login.tagline': 'Urmărește-ți cheltuielile, gestionează-ți finanțele',
+        'login.remember_me': 'Ține-mă minte',
+        'login.sign_in': 'Conectare',
+        'login.no_account': 'Nu ai un cont?',
+        'login.register': 'Înregistrare',
+        
+        // Register
+        'register.title': 'Creare Cont',
+        'register.tagline': 'Începe să îți gestionezi finanțele astăzi',
+        'register.create_account': 'Creează Cont',
+        'register.have_account': 'Ai deja un cont?',
+        'register.login': 'Conectare',
+        
+        // Forms
+        'form.email': 'Email',
+        'form.password': 'Parolă',
+        'form.username': 'Nume utilizator',
+        'form.language': 'Limbă',
+        'form.currency': 'Monedă',
+        'form.amount': 'Sumă',
+        'form.description': 'Descriere',
+        'form.category': 'Categorie',
+        'form.date': 'Dată',
+        'form.tags': 'Etichete (separate prin virgulă)',
+        'form.receipt': 'Chitanță (opțional)',
+        'form.2fa_code': 'Cod 2FA',
+        
+        // Actions
+        'actions.add_expense': 'Adaugă Cheltuială',
+        'actions.save': 'Salvează Cheltuiala',
+        
+        // Modal
+        'modal.add_expense': 'Adaugă Cheltuială',
+        
+        // Reports
+        'reports.title': 'Rapoarte Financiare',
+        'reports.export': 'Exportă CSV',
+        'reports.analysisPeriod': 'Perioadă de Analiză:',
+        'reports.last30Days': 'Ultimele 30 Zile',
+        'reports.quarter': 'Trimestru',
+        'reports.ytd': 'An Curent',
+        'reports.allCategories': 'Toate Categoriile',
+        'reports.generate': 'Generează Raport',
+        'reports.totalSpent': 'Total Cheltuit',
+        'reports.topCategory': 'Categorie Principală',
+        'reports.avgDaily': 'Medie Zilnică',
+        'reports.savingsRate': 'Rată Economii',
+        'reports.vsLastMonth': 'față de perioada anterioară',
+        'reports.spentThisPeriod': 'cheltuit în această perioadă',
+        'reports.placeholder': 'Substituent',
+        'reports.spendingTrend': 'Tendință Cheltuieli',
+        'reports.categoryBreakdown': 'Defalcare pe Categorii',
+        'reports.monthlySpending': 'Cheltuieli Lunare',
+        
+        // User
+        'user.admin': 'Administrator',
+        'user.user': 'Utilizator',
+        
+        // Documents
+        'nav.documents': 'Documente',
+        'documents.title': 'Documente',
+        'documents.uploadTitle': 'Încarcă Documente',
+        'documents.dragDrop': 'Trage și plasează fișiere aici sau click pentru a căuta',
+        'documents.uploadDesc': 'Încarcă extrase de cont, facturi sau chitanțe.',
+        'documents.supportedFormats': 'Formate suportate: CSV, PDF, XLS, XLSX, PNG, JPG (Max 10MB)',
+        'documents.yourFiles': 'Fișierele Tale',
+        'documents.searchPlaceholder': 'Caută după nume...',
+        'documents.tableDocName': 'Nume Document',
+        'documents.tableUploadDate': 'Data Încărcării',
+        'documents.tableType': 'Tip',
+        'documents.tableStatus': 'Stare',
+        'documents.tableActions': 'Acțiuni',
+        'documents.statusUploaded': 'Încărcat',
+        'documents.statusProcessing': 'În procesare',
+        'documents.statusAnalyzed': 'Analizat',
+        'documents.statusError': 'Eroare',
+        'documents.showing': 'Afișare',
+        'documents.of': 'din',
+        'documents.documents': 'documente',
+        'documents.noDocuments': 'Nu s-au găsit documente. Încarcă primul tău document!',
+        'documents.errorLoading': 'Eroare la încărcarea documentelor. Te rugăm încearcă din nou.',
+        
+        // Settings
+        'settings.title': 'Setări',
+        'settings.avatar': 'Avatar Profil',
+        'settings.uploadAvatar': 'Încarcă Personalizat',
+        'settings.avatarDesc': 'PNG, JPG, GIF, WEBP. Max 20MB',
+        'settings.defaultAvatars': 'Sau alege un avatar prestabilit:',
+        'settings.profile': 'Informații Profil',
+        'settings.saveProfile': 'Salvează Profil',
+        'settings.changePassword': 'Schimbă Parola',
+        'settings.currentPassword': 'Parola Curentă',
+        'settings.newPassword': 'Parolă Nouă',
+        'settings.confirmPassword': 'Confirmă Parola Nouă',
+        'settings.updatePassword': 'Actualizează Parola',
+        'settings.twoFactor': 'Autentificare Doi Factori',
+        'settings.twoFactorEnabled': '2FA este activată pentru contul tău',
+        'settings.twoFactorDisabled': 'Adaugă un nivel suplimentar de securitate contului tău',
+        'settings.enabled': 'Activat',
+        'settings.disabled': 'Dezactivat',
+        'settings.regenerateCodes': 'Regenerează Coduri Backup',
+        'settings.enable2FA': 'Activează 2FA',
+        'settings.disable2FA': 'Dezactivează 2FA',
+        
+        // Two-Factor Authentication
+        'twofa.setupTitle': 'Configurare Autentificare Doi Factori',
+        'twofa.setupDesc': 'Scanează codul QR cu aplicația ta de autentificare',
+        'twofa.step1': 'Pasul 1: Scanează Codul QR',
+        'twofa.step1Desc': 'Deschide aplicația ta de autentificare (Google Authenticator, Authy, etc.) și scanează acest cod QR:',
+        'twofa.manualEntry': 'Nu poți scana? Introdu codul manual',
+        'twofa.enterManually': 'Introdu acest cod în aplicația ta de autentificare:',
+        'twofa.step2': 'Pasul 2: Verifică Codul',
+        'twofa.step2Desc': 'Introdu codul de 6 cifre din aplicația ta de autentificare:',
+        'twofa.enable': 'Activează 2FA',
+        'twofa.infoText': 'După activarea 2FA, vei primi coduri de backup pe care le poți folosi dacă pierzi accesul la aplicația ta de autentificare. Păstrează-le într-un loc sigur!',
+        'twofa.setupSuccess': 'Autentificare Doi Factori Activată!',
+        'twofa.backupCodesDesc': 'Salvează aceste coduri de backup într-o locație sigură',
+        'twofa.important': 'Important!',
+        'twofa.backupCodesWarning': 'Fiecare cod de backup poate fi folosit o singură dată. Păstrează-le în siguranță - vei avea nevoie de ele dacă pierzi accesul la aplicația ta de autentificare.',
+        'twofa.yourBackupCodes': 'Codurile Tale de Backup',
+        'twofa.downloadPDF': 'Descarcă ca PDF',
+        'twofa.print': 'Tipărește Coduri',
+        'twofa.continueToSettings': 'Continuă la Setări',
+        'twofa.howToUse': 'Cum să folosești codurile de backup:',
+        'twofa.useWhen': 'Folosește un cod de backup când nu poți accesa aplicația ta de autentificare',
+        'twofa.enterCode': 'Introdu codul în câmpul 2FA când te autentifici',
+        'twofa.oneTimeUse': 'Fiecare cod funcționează o singură dată - va fi șters după folosire',
+        'twofa.regenerate': 'Poți regenera coduri oricând din Setări',
+        
+        // Actions
+        'actions.cancel': 'Anulează'
+    }
+};
+
+// Get current language from localStorage or default to 'en'
+function getCurrentLanguage() {
+    return localStorage.getItem('language') || 'en';
+}
+
+// Set language
+function setLanguage(lang) {
+    if (translations[lang]) {
+        localStorage.setItem('language', lang);
+        translatePage(lang);
+    }
+}
+
+// Translate all elements on page
+function translatePage(lang) {
+    const elements = document.querySelectorAll('[data-translate]');
+    
+    elements.forEach(element => {
+        const key = element.getAttribute('data-translate');
+        const translation = translations[lang][key];
+        
+        if (translation) {
+            if (element.tagName === 'INPUT' || element.tagName === 'TEXTAREA') {
+                element.placeholder = translation;
+            } else {
+                element.textContent = translation;
+            }
+        }
+    });
+}
+
+// Initialize translations on page load
+document.addEventListener('DOMContentLoaded', () => {
+    const currentLang = getCurrentLanguage();
+    translatePage(currentLang);
+});
+
+// Export functions
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = { getCurrentLanguage, setLanguage, translatePage, translations };
+}

backup/fina-1/app/static/js/pwa.js

@@ -0,0 +1,54 @@
+// PWA Service Worker Registration
+
+if ('serviceWorker' in navigator) {
+    window.addEventListener('load', () => {
+        navigator.serviceWorker.register('/static/sw.js')
+            .then(registration => {
+                console.log('ServiceWorker registered:', registration);
+            })
+            .catch(error => {
+                console.log('ServiceWorker registration failed:', error);
+            });
+    });
+}
+
+// Install prompt
+let deferredPrompt;
+
+window.addEventListener('beforeinstallprompt', (e) => {
+    e.preventDefault();
+    deferredPrompt = e;
+    
+    // Show install button if you have one
+    const installBtn = document.getElementById('install-btn');
+    if (installBtn) {
+        installBtn.style.display = 'block';
+        
+        installBtn.addEventListener('click', () => {
+            installBtn.style.display = 'none';
+            deferredPrompt.prompt();
+            
+            deferredPrompt.userChoice.then((choiceResult) => {
+                if (choiceResult.outcome === 'accepted') {
+                    console.log('User accepted the install prompt');
+                }
+                deferredPrompt = null;
+            });
+        });
+    }
+});
+
+// Check if app is installed
+window.addEventListener('appinstalled', () => {
+    console.log('FINA has been installed');
+    showToast('FINA installed successfully!', 'success');
+});
+
+// Online/Offline status
+window.addEventListener('online', () => {
+    showToast('You are back online', 'success');
+});
+
+window.addEventListener('offline', () => {
+    showToast('You are offline. Some features may be limited.', 'warning');
+});

backup/fina-1/app/static/js/reports.js

@@ -0,0 +1,367 @@
+// Reports page JavaScript
+
+let currentPeriod = 30;
+let categoryFilter = '';
+let trendChart = null;
+let categoryChart = null;
+let monthlyChart = null;
+
+// Load reports data
+async function loadReportsData() {
+    try {
+        const params = new URLSearchParams({
+            period: currentPeriod,
+            ...(categoryFilter && { category_id: categoryFilter })
+        });
+        
+        const data = await apiCall(`/api/reports-stats?${params}`);
+        displayReportsData(data);
+    } catch (error) {
+        console.error('Failed to load reports data:', error);
+        showToast('Failed to load reports', 'error');
+    }
+}
+
+// Display reports data
+function displayReportsData(data) {
+    // Update KPI cards
+    document.getElementById('total-spent').textContent = formatCurrency(data.total_spent, data.currency);
+    
+    // Spending change indicator
+    const spentChange = document.getElementById('spent-change');
+    const changeValue = data.percent_change;
+    const isIncrease = changeValue > 0;
+    spentChange.className = `flex items-center font-medium px-1.5 py-0.5 rounded ${
+        isIncrease 
+            ? 'text-red-500 dark:text-red-400 bg-red-500/10' 
+            : 'text-green-500 dark:text-green-400 bg-green-500/10'
+    }`;
+    spentChange.innerHTML = `
+        <span class="material-symbols-outlined text-[14px] mr-0.5">${isIncrease ? 'trending_up' : 'trending_down'}</span>
+        ${Math.abs(changeValue).toFixed(1)}%
+    `;
+    
+    // Top category
+    document.getElementById('top-category').textContent = data.top_category.name;
+    document.getElementById('top-category-amount').textContent = formatCurrency(data.top_category.amount, data.currency);
+    
+    // Average daily
+    document.getElementById('avg-daily').textContent = formatCurrency(data.avg_daily, data.currency);
+    
+    // Average change indicator
+    const avgChange = document.getElementById('avg-change');
+    const avgChangeValue = data.avg_daily_change;
+    const isAvgIncrease = avgChangeValue > 0;
+    avgChange.className = `flex items-center font-medium px-1.5 py-0.5 rounded ${
+        isAvgIncrease 
+            ? 'text-red-500 dark:text-red-400 bg-red-500/10' 
+            : 'text-green-500 dark:text-green-400 bg-green-500/10'
+    }`;
+    avgChange.innerHTML = `
+        <span class="material-symbols-outlined text-[14px] mr-0.5">${isAvgIncrease ? 'trending_up' : 'trending_down'}</span>
+        ${Math.abs(avgChangeValue).toFixed(1)}%
+    `;
+    
+    // Savings rate
+    document.getElementById('savings-rate').textContent = `${data.savings_rate}%`;
+    
+    // Update charts
+    updateTrendChart(data.daily_trend);
+    updateCategoryChart(data.category_breakdown);
+    updateMonthlyChart(data.monthly_comparison);
+}
+
+// Update trend chart
+function updateTrendChart(dailyData) {
+    const ctx = document.getElementById('trend-chart');
+    if (!ctx) return;
+    
+    // Get theme
+    const isDark = document.documentElement.classList.contains('dark');
+    const textColor = isDark ? '#94a3b8' : '#64748b';
+    const gridColor = isDark ? '#334155' : '#e2e8f0';
+    
+    if (trendChart) {
+        trendChart.destroy();
+    }
+    
+    trendChart = new Chart(ctx, {
+        type: 'line',
+        data: {
+            labels: dailyData.map(d => d.date),
+            datasets: [{
+                label: 'Daily Spending',
+                data: dailyData.map(d => d.amount),
+                borderColor: '#3b82f6',
+                backgroundColor: 'rgba(59, 130, 246, 0.1)',
+                fill: true,
+                tension: 0.4,
+                pointRadius: 4,
+                pointBackgroundColor: isDark ? '#1e293b' : '#ffffff',
+                pointBorderColor: '#3b82f6',
+                pointBorderWidth: 2,
+                pointHoverRadius: 6
+            }]
+        },
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: {
+                legend: {
+                    display: false
+                },
+                tooltip: {
+                    backgroundColor: isDark ? '#1e293b' : '#ffffff',
+                    titleColor: isDark ? '#f8fafc' : '#0f172a',
+                    bodyColor: isDark ? '#94a3b8' : '#64748b',
+                    borderColor: isDark ? '#334155' : '#e2e8f0',
+                    borderWidth: 1,
+                    padding: 12,
+                    displayColors: false,
+                    callbacks: {
+                        label: function(context) {
+                            return formatCurrency(context.parsed.y, 'USD');
+                        }
+                    }
+                }
+            },
+            scales: {
+                x: {
+                    grid: {
+                        color: gridColor,
+                        drawBorder: false
+                    },
+                    ticks: {
+                        color: textColor,
+                        maxRotation: 45,
+                        minRotation: 0
+                    }
+                },
+                y: {
+                    grid: {
+                        color: gridColor,
+                        drawBorder: false
+                    },
+                    ticks: {
+                        color: textColor,
+                        callback: function(value) {
+                            return '$' + value.toFixed(0);
+                        }
+                    }
+                }
+            }
+        }
+    });
+}
+
+// Update category pie chart
+function updateCategoryChart(categories) {
+    const ctx = document.getElementById('category-pie-chart');
+    if (!ctx) return;
+    
+    const isDark = document.documentElement.classList.contains('dark');
+    
+    if (categoryChart) {
+        categoryChart.destroy();
+    }
+    
+    if (categories.length === 0) {
+        categoryChart = null;
+        document.getElementById('category-legend').innerHTML = '<p class="col-span-2 text-center text-text-muted dark:text-[#92adc9]">No data available</p>';
+        return;
+    }
+    
+    categoryChart = new Chart(ctx, {
+        type: 'doughnut',
+        data: {
+            labels: categories.map(c => c.name),
+            datasets: [{
+                data: categories.map(c => c.amount),
+                backgroundColor: categories.map(c => c.color),
+                borderWidth: 2,
+                borderColor: isDark ? '#1a2632' : '#ffffff'
+            }]
+        },
+        options: {
+            responsive: true,
+            maintainAspectRatio: true,
+            plugins: {
+                legend: {
+                    display: false
+                },
+                tooltip: {
+                    backgroundColor: isDark ? '#1e293b' : '#ffffff',
+                    titleColor: isDark ? '#f8fafc' : '#0f172a',
+                    bodyColor: isDark ? '#94a3b8' : '#64748b',
+                    borderColor: isDark ? '#334155' : '#e2e8f0',
+                    borderWidth: 1,
+                    padding: 12,
+                    callbacks: {
+                        label: function(context) {
+                            const label = context.label || '';
+                            const value = formatCurrency(context.parsed, 'USD');
+                            const percentage = categories[context.dataIndex].percentage;
+                            return `${label}: ${value} (${percentage}%)`;
+                        }
+                    }
+                }
+            }
+        }
+    });
+    
+    // Update legend
+    const legendHTML = categories.slice(0, 6).map(cat => `
+        <div class="flex items-center gap-2">
+            <span class="size-3 rounded-full" style="background-color: ${cat.color}"></span>
+            <span class="text-text-muted dark:text-[#92adc9] flex-1 truncate">${cat.name}</span>
+            <span class="font-semibold text-text-main dark:text-white">${cat.percentage}%</span>
+        </div>
+    `).join('');
+    
+    document.getElementById('category-legend').innerHTML = legendHTML;
+}
+
+// Update monthly chart
+function updateMonthlyChart(monthlyData) {
+    const ctx = document.getElementById('monthly-chart');
+    if (!ctx) return;
+    
+    const isDark = document.documentElement.classList.contains('dark');
+    const textColor = isDark ? '#94a3b8' : '#64748b';
+    const gridColor = isDark ? '#334155' : '#e2e8f0';
+    
+    if (monthlyChart) {
+        monthlyChart.destroy();
+    }
+    
+    monthlyChart = new Chart(ctx, {
+        type: 'bar',
+        data: {
+            labels: monthlyData.map(d => d.month),
+            datasets: [{
+                label: 'Monthly Spending',
+                data: monthlyData.map(d => d.amount),
+                backgroundColor: '#3b82f6',
+                borderRadius: 6,
+                hoverBackgroundColor: '#2563eb'
+            }]
+        },
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: {
+                legend: {
+                    display: false
+                },
+                tooltip: {
+                    backgroundColor: isDark ? '#1e293b' : '#ffffff',
+                    titleColor: isDark ? '#f8fafc' : '#0f172a',
+                    bodyColor: isDark ? '#94a3b8' : '#64748b',
+                    borderColor: isDark ? '#334155' : '#e2e8f0',
+                    borderWidth: 1,
+                    padding: 12,
+                    displayColors: false,
+                    callbacks: {
+                        label: function(context) {
+                            return formatCurrency(context.parsed.y, 'USD');
+                        }
+                    }
+                }
+            },
+            scales: {
+                x: {
+                    grid: {
+                        display: false
+                    },
+                    ticks: {
+                        color: textColor
+                    }
+                },
+                y: {
+                    grid: {
+                        color: gridColor,
+                        drawBorder: false
+                    },
+                    ticks: {
+                        color: textColor,
+                        callback: function(value) {
+                            return '$' + value.toFixed(0);
+                        }
+                    }
+                }
+            }
+        }
+    });
+}
+
+// Load categories for filter
+async function loadCategoriesFilter() {
+    try {
+        const data = await apiCall('/api/expenses/categories');
+        const select = document.getElementById('category-filter');
+        
+        const categoriesHTML = data.categories.map(cat => 
+            `<option value="${cat.id}">${cat.name}</option>`
+        ).join('');
+        
+        select.innerHTML = '<option value="">All Categories</option>' + categoriesHTML;
+    } catch (error) {
+        console.error('Failed to load categories:', error);
+    }
+}
+
+// Period button handlers
+document.querySelectorAll('.period-btn').forEach(btn => {
+    btn.addEventListener('click', () => {
+        // Remove active class from all buttons
+        document.querySelectorAll('.period-btn').forEach(b => {
+            b.classList.remove('active', 'text-white', 'dark:text-white', 'bg-white/10', 'shadow-sm');
+            b.classList.add('text-text-muted', 'dark:text-[#92adc9]', 'hover:text-text-main', 'dark:hover:text-white', 'hover:bg-white/5');
+        });
+        
+        // Add active class to clicked button
+        btn.classList.add('active', 'text-white', 'dark:text-white', 'bg-white/10', 'shadow-sm');
+        btn.classList.remove('text-text-muted', 'dark:text-[#92adc9]', 'hover:text-text-main', 'dark:hover:text-white', 'hover:bg-white/5');
+        
+        currentPeriod = btn.dataset.period;
+        loadReportsData();
+    });
+});
+
+// Category filter handler
+document.getElementById('category-filter').addEventListener('change', (e) => {
+    categoryFilter = e.target.value;
+});
+
+// Generate report button
+document.getElementById('generate-report-btn').addEventListener('click', () => {
+    loadReportsData();
+});
+
+// Export report button
+document.getElementById('export-report-btn').addEventListener('click', () => {
+    window.location.href = '/api/expenses/export/csv';
+});
+
+// Handle theme changes - reload charts with new theme colors
+function handleThemeChange() {
+    if (trendChart || categoryChart || monthlyChart) {
+        loadReportsData();
+    }
+}
+
+// Listen for theme toggle events
+window.addEventListener('theme-changed', handleThemeChange);
+
+// Listen for storage changes (for multi-tab sync)
+window.addEventListener('storage', (e) => {
+    if (e.key === 'theme') {
+        handleThemeChange();
+    }
+});
+
+// Initialize on page load
+document.addEventListener('DOMContentLoaded', () => {
+    loadReportsData();
+    loadCategoriesFilter();
+});

backup/fina-1/app/static/js/settings.js

@@ -0,0 +1,265 @@
+// Settings Page Functionality
+
+document.addEventListener('DOMContentLoaded', () => {
+    setupAvatarHandlers();
+    setupProfileHandlers();
+    setupPasswordHandlers();
+});
+
+// Avatar upload and selection
+function setupAvatarHandlers() {
+    const uploadBtn = document.getElementById('upload-avatar-btn');
+    const avatarInput = document.getElementById('avatar-upload');
+    const currentAvatar = document.getElementById('current-avatar');
+    const sidebarAvatar = document.getElementById('sidebar-avatar');
+    const defaultAvatarBtns = document.querySelectorAll('.default-avatar-btn');
+    
+    // Trigger file input when upload button clicked
+    if (uploadBtn && avatarInput) {
+        uploadBtn.addEventListener('click', () => {
+            avatarInput.click();
+        });
+        
+        // Handle file selection
+        avatarInput.addEventListener('change', async (e) => {
+            const file = e.target.files[0];
+            if (!file) return;
+            
+            // Validate file type
+            const allowedTypes = ['image/png', 'image/jpeg', 'image/jpg', 'image/gif', 'image/webp'];
+            if (!allowedTypes.includes(file.type)) {
+                showNotification('error', 'Invalid file type. Please use PNG, JPG, GIF, or WEBP.');
+                return;
+            }
+            
+            // Validate file size (20MB)
+            if (file.size > 20 * 1024 * 1024) {
+                showNotification('error', 'File too large. Maximum size is 20MB.');
+                return;
+            }
+            
+            // Upload avatar
+            const formData = new FormData();
+            formData.append('avatar', file);
+            
+            try {
+                const response = await fetch('/api/settings/avatar', {
+                    method: 'POST',
+                    body: formData
+                });
+                
+                const result = await response.json();
+                
+                if (response.ok && result.success) {
+                    // Update avatar displays
+                    const avatarUrl = result.avatar.startsWith('icons/') 
+                        ? `/static/${result.avatar}?t=${Date.now()}`
+                        : `/${result.avatar}?t=${Date.now()}`;
+                    currentAvatar.src = avatarUrl;
+                    if (sidebarAvatar) sidebarAvatar.src = avatarUrl;
+                    
+                    showNotification('success', result.message || 'Avatar updated successfully!');
+                } else {
+                    showNotification('error', result.error || 'Failed to upload avatar');
+                }
+            } catch (error) {
+                console.error('Upload error:', error);
+                showNotification('error', 'An error occurred during upload');
+            }
+            
+            // Reset input
+            avatarInput.value = '';
+        });
+    }
+    
+    // Handle default avatar selection
+    defaultAvatarBtns.forEach(btn => {
+        btn.addEventListener('click', async () => {
+            const avatarPath = btn.getAttribute('data-avatar');
+            
+            try {
+                const response = await fetch('/api/settings/avatar/default', {
+                    method: 'PUT',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({ avatar: avatarPath })
+                });
+                
+                const result = await response.json();
+                
+                if (response.ok && result.success) {
+                    // Update avatar displays
+                    const avatarUrl = result.avatar.startsWith('icons/') 
+                        ? `/static/${result.avatar}?t=${Date.now()}`
+                        : `/${result.avatar}?t=${Date.now()}`;
+                    currentAvatar.src = avatarUrl;
+                    if (sidebarAvatar) sidebarAvatar.src = avatarUrl;
+                    
+                    // Update active state
+                    defaultAvatarBtns.forEach(b => b.classList.remove('border-primary'));
+                    btn.classList.add('border-primary');
+                    
+                    showNotification('success', result.message || 'Avatar updated successfully!');
+                } else {
+                    showNotification('error', result.error || 'Failed to update avatar');
+                }
+            } catch (error) {
+                console.error('Update error:', error);
+                showNotification('error', 'An error occurred');
+            }
+        });
+    });
+}
+
+// Profile update handlers
+function setupProfileHandlers() {
+    const saveBtn = document.getElementById('save-profile-btn');
+    
+    if (saveBtn) {
+        saveBtn.addEventListener('click', async () => {
+            const username = document.getElementById('username').value.trim();
+            const email = document.getElementById('email').value.trim();
+            const language = document.getElementById('language').value;
+            const currency = document.getElementById('currency').value;
+            
+            if (!username || !email) {
+                showNotification('error', 'Username and email are required');
+                return;
+            }
+            
+            // Email validation
+            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+            if (!emailRegex.test(email)) {
+                showNotification('error', 'Please enter a valid email address');
+                return;
+            }
+            
+            try {
+                const response = await fetch('/api/settings/profile', {
+                    method: 'PUT',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                        username,
+                        email,
+                        language,
+                        currency
+                    })
+                });
+                
+                const result = await response.json();
+                
+                if (response.ok && result.success) {
+                    showNotification('success', result.message || 'Profile updated successfully!');
+                    
+                    // Update language if changed
+                    const currentLang = getCurrentLanguage();
+                    if (language !== currentLang) {
+                        setLanguage(language);
+                        // Reload page to apply translations
+                        setTimeout(() => {
+                            window.location.reload();
+                        }, 1000);
+                    }
+                } else {
+                    showNotification('error', result.error || 'Failed to update profile');
+                }
+            } catch (error) {
+                console.error('Update error:', error);
+                showNotification('error', 'An error occurred');
+            }
+        });
+    }
+}
+
+// Password change handlers
+function setupPasswordHandlers() {
+    const changeBtn = document.getElementById('change-password-btn');
+    
+    if (changeBtn) {
+        changeBtn.addEventListener('click', async () => {
+            const currentPassword = document.getElementById('current-password').value;
+            const newPassword = document.getElementById('new-password').value;
+            const confirmPassword = document.getElementById('confirm-password').value;
+            
+            if (!currentPassword || !newPassword || !confirmPassword) {
+                showNotification('error', 'All password fields are required');
+                return;
+            }
+            
+            if (newPassword.length < 6) {
+                showNotification('error', 'New password must be at least 6 characters');
+                return;
+            }
+            
+            if (newPassword !== confirmPassword) {
+                showNotification('error', 'New passwords do not match');
+                return;
+            }
+            
+            try {
+                const response = await fetch('/api/settings/password', {
+                    method: 'PUT',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                        current_password: currentPassword,
+                        new_password: newPassword
+                    })
+                });
+                
+                const result = await response.json();
+                
+                if (response.ok && result.success) {
+                    showNotification('success', result.message || 'Password changed successfully!');
+                    
+                    // Clear form
+                    document.getElementById('current-password').value = '';
+                    document.getElementById('new-password').value = '';
+                    document.getElementById('confirm-password').value = '';
+                } else {
+                    showNotification('error', result.error || 'Failed to change password');
+                }
+            } catch (error) {
+                console.error('Change password error:', error);
+                showNotification('error', 'An error occurred');
+            }
+        });
+    }
+}
+
+// Show notification
+function showNotification(type, message) {
+    const notification = document.createElement('div');
+    notification.className = `fixed top-4 right-4 z-50 px-4 py-3 rounded-lg shadow-lg flex items-center gap-3 animate-slideIn ${
+        type === 'success' 
+            ? 'bg-green-500 text-white' 
+            : 'bg-red-500 text-white'
+    }`;
+    
+    notification.innerHTML = `
+        <span class="material-symbols-outlined text-[20px]">
+            ${type === 'success' ? 'check_circle' : 'error'}
+        </span>
+        <span class="text-sm font-medium">${escapeHtml(message)}</span>
+    `;
+    
+    document.body.appendChild(notification);
+    
+    setTimeout(() => {
+        notification.classList.add('animate-slideOut');
+        setTimeout(() => {
+            document.body.removeChild(notification);
+        }, 300);
+    }, 3000);
+}
+
+// Escape HTML
+function escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+}

backup/fina-1/app/static/js/transactions.js

@@ -0,0 +1,287 @@
+// Transactions page JavaScript
+
+let currentPage = 1;
+let filters = {
+    category_id: '',
+    start_date: '',
+    end_date: '',
+    search: ''
+};
+
+// Load transactions
+async function loadTransactions() {
+    try {
+        const params = new URLSearchParams({
+            page: currentPage,
+            ...filters
+        });
+        
+        const data = await apiCall(`/api/expenses/?${params}`);
+        displayTransactions(data.expenses);
+        displayPagination(data.pages, data.current_page, data.total || data.expenses.length);
+    } catch (error) {
+        console.error('Failed to load transactions:', error);
+    }
+}
+
+// Display transactions
+function displayTransactions(transactions) {
+    const container = document.getElementById('transactions-list');
+    
+    if (transactions.length === 0) {
+        container.innerHTML = `
+            <tr>
+                <td colspan="7" class="p-12 text-center">
+                    <span class="material-symbols-outlined text-6xl text-[#92adc9] mb-4 block">receipt_long</span>
+                    <p class="text-[#92adc9] text-lg">No transactions found</p>
+                </td>
+            </tr>
+        `;
+        return;
+    }
+    
+    container.innerHTML = transactions.map(tx => {
+        const txDate = new Date(tx.date);
+        const dateStr = txDate.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
+        const timeStr = txDate.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: true });
+        
+        // Get category color
+        const categoryColors = {
+            'Food': { bg: 'bg-green-500/10', text: 'text-green-400', border: 'border-green-500/20', dot: 'bg-green-400' },
+            'Transport': { bg: 'bg-orange-500/10', text: 'text-orange-400', border: 'border-orange-500/20', dot: 'bg-orange-400' },
+            'Entertainment': { bg: 'bg-purple-500/10', text: 'text-purple-400', border: 'border-purple-500/20', dot: 'bg-purple-400' },
+            'Shopping': { bg: 'bg-blue-500/10', text: 'text-blue-400', border: 'border-blue-500/20', dot: 'bg-blue-400' },
+            'Healthcare': { bg: 'bg-red-500/10', text: 'text-red-400', border: 'border-red-500/20', dot: 'bg-red-400' },
+            'Bills': { bg: 'bg-yellow-500/10', text: 'text-yellow-400', border: 'border-yellow-500/20', dot: 'bg-yellow-400' },
+            'Education': { bg: 'bg-pink-500/10', text: 'text-pink-400', border: 'border-pink-500/20', dot: 'bg-pink-400' },
+            'Other': { bg: 'bg-gray-500/10', text: 'text-gray-400', border: 'border-gray-500/20', dot: 'bg-gray-400' }
+        };
+        const catColor = categoryColors[tx.category_name] || categoryColors['Other'];
+        
+        // Status icon (completed/pending)
+        const isCompleted = true; // For now, all are completed
+        const statusIcon = isCompleted 
+            ? '<span class="material-symbols-outlined text-[16px]">check</span>'
+            : '<span class="material-symbols-outlined text-[16px]">schedule</span>';
+        const statusClass = isCompleted
+            ? 'bg-green-500/20 text-green-400'
+            : 'bg-yellow-500/20 text-yellow-400';
+        const statusTitle = isCompleted ? 'Completed' : 'Pending';
+        
+        return `
+        <tr class="group hover:bg-gray-50 dark:hover:bg-white/[0.02] transition-colors relative border-l-2 border-transparent hover:border-primary">
+            <td class="p-5">
+                <div class="flex items-center gap-3">
+                    <div class="size-10 rounded-full flex items-center justify-center shrink-0" style="background: ${tx.category_color}20;">
+                        <span class="material-symbols-outlined text-[20px]" style="color: ${tx.category_color};">payments</span>
+                    </div>
+                    <div class="flex flex-col">
+                        <span class="text-text-main dark:text-white font-medium group-hover:text-primary transition-colors">${tx.description}</span>
+                        <span class="text-text-muted dark:text-[#92adc9] text-xs">${tx.tags.length > 0 ? tx.tags.join(', ') : 'Expense'}</span>
+                    </div>
+                </div>
+            </td>
+            <td class="p-5">
+                <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium ${catColor.bg} ${catColor.text} border ${catColor.border}">
+                    <span class="size-1.5 rounded-full ${catColor.dot}"></span>
+                    ${tx.category_name}
+                </span>
+            </td>
+            <td class="p-5 text-text-muted dark:text-[#92adc9]">
+                ${dateStr}
+                <span class="block text-xs opacity-60">${timeStr}</span>
+            </td>
+            <td class="p-5">
+                <div class="flex items-center gap-2 text-text-main dark:text-white">
+                    <span class="material-symbols-outlined text-text-muted dark:text-[#92adc9] text-[18px]">credit_card</span>
+                    <span>•••• ${tx.currency}</span>
+                </div>
+            </td>
+            <td class="p-5 text-right">
+                <span class="text-text-main dark:text-white font-semibold">${formatCurrency(tx.amount, tx.currency)}</span>
+            </td>
+            <td class="p-5 text-center">
+                <span class="inline-flex items-center justify-center size-6 rounded-full ${statusClass}" title="${statusTitle}">
+                    ${statusIcon}
+                </span>
+            </td>
+            <td class="p-5 text-right">
+                <div class="flex items-center justify-end gap-1">
+                    ${tx.receipt_path ? `
+                    <button onclick="window.open('${tx.receipt_path}')" class="text-text-muted dark:text-[#92adc9] hover:text-text-main dark:hover:text-white p-1 rounded hover:bg-gray-100 dark:hover:bg-white/10 transition-colors" title="View Receipt">
+                        <span class="material-symbols-outlined text-[18px]">attach_file</span>
+                    </button>
+                    ` : ''}
+                    <button onclick="editTransaction(${tx.id})" class="text-text-muted dark:text-[#92adc9] hover:text-text-main dark:hover:text-white p-1 rounded hover:bg-gray-100 dark:hover:bg-white/10 transition-colors" title="Edit">
+                        <span class="material-symbols-outlined text-[18px]">edit</span>
+                    </button>
+                    <button onclick="deleteTransaction(${tx.id})" class="text-text-muted dark:text-[#92adc9] hover:text-red-400 p-1 rounded hover:bg-red-100 dark:hover:bg-white/10 transition-colors" title="Delete">
+                        <span class="material-symbols-outlined text-[18px]">delete</span>
+                    </button>
+                </div>
+            </td>
+        </tr>
+        `;
+    }).join('');
+}
+
+// Display pagination
+function displayPagination(totalPages, current, totalItems = 0) {
+    const container = document.getElementById('pagination');
+    
+    // Update pagination info
+    const perPage = 10;
+    const start = (current - 1) * perPage + 1;
+    const end = Math.min(current * perPage, totalItems);
+    
+    document.getElementById('page-start').textContent = totalItems > 0 ? start : 0;
+    document.getElementById('page-end').textContent = end;
+    document.getElementById('total-count').textContent = totalItems;
+    
+    if (totalPages <= 1) {
+        container.innerHTML = '';
+        return;
+    }
+    
+    let html = '';
+    
+    // Previous button
+    const prevDisabled = current <= 1;
+    html += `
+        <button 
+            onclick="changePage(${current - 1})" 
+            class="flex items-center gap-1 px-3 py-1.5 bg-background-light dark:bg-[#111a22] border border-border-light dark:border-[#233648] rounded-md text-text-muted dark:text-[#92adc9] hover:text-text-main dark:hover:text-white hover:border-text-muted dark:hover:border-[#92adc9] transition-colors text-sm ${prevDisabled ? 'opacity-50 cursor-not-allowed' : ''}" 
+            ${prevDisabled ? 'disabled' : ''}
+        >
+            <span class="material-symbols-outlined text-[16px]">chevron_left</span>
+            Previous
+        </button>
+    `;
+    
+    // Next button
+    const nextDisabled = current >= totalPages;
+    html += `
+        <button 
+            onclick="changePage(${current + 1})" 
+            class="flex items-center gap-1 px-3 py-1.5 bg-background-light dark:bg-[#111a22] border border-border-light dark:border-[#233648] rounded-md text-text-muted dark:text-[#92adc9] hover:text-text-main dark:hover:text-white hover:border-text-muted dark:hover:border-[#92adc9] transition-colors text-sm ${nextDisabled ? 'opacity-50 cursor-not-allowed' : ''}"
+            ${nextDisabled ? 'disabled' : ''}
+        >
+            Next
+            <span class="material-symbols-outlined text-[16px]">chevron_right</span>
+        </button>
+    `;
+    
+    container.innerHTML = html;
+}
+
+// Change page
+function changePage(page) {
+    currentPage = page;
+    loadTransactions();
+}
+
+// Delete transaction
+async function deleteTransaction(id) {
+    if (!confirm('Are you sure you want to delete this transaction?')) {
+        return;
+    }
+    
+    try {
+        await apiCall(`/api/expenses/${id}`, { method: 'DELETE' });
+        showToast('Transaction deleted', 'success');
+        loadTransactions();
+    } catch (error) {
+        console.error('Failed to delete transaction:', error);
+    }
+}
+
+// Load categories for filter
+async function loadCategoriesFilter() {
+    try {
+        const data = await apiCall('/api/expenses/categories');
+        const select = document.getElementById('filter-category');
+        
+        select.innerHTML = '<option value="">Category</option>' +
+            data.categories.map(cat => `<option value="${cat.id}">${cat.name}</option>`).join('');
+    } catch (error) {
+        console.error('Failed to load categories:', error);
+    }
+}
+
+// Toggle advanced filters
+function toggleAdvancedFilters() {
+    const advFilters = document.getElementById('advanced-filters');
+    advFilters.classList.toggle('hidden');
+}
+
+// Filter event listeners
+document.getElementById('filter-category').addEventListener('change', (e) => {
+    filters.category_id = e.target.value;
+    currentPage = 1;
+    loadTransactions();
+});
+
+document.getElementById('filter-start-date').addEventListener('change', (e) => {
+    filters.start_date = e.target.value;
+    currentPage = 1;
+    loadTransactions();
+});
+
+document.getElementById('filter-end-date').addEventListener('change', (e) => {
+    filters.end_date = e.target.value;
+    currentPage = 1;
+    loadTransactions();
+});
+
+document.getElementById('filter-search').addEventListener('input', (e) => {
+    filters.search = e.target.value;
+    currentPage = 1;
+    loadTransactions();
+});
+
+// More filters button
+document.getElementById('more-filters-btn').addEventListener('click', toggleAdvancedFilters);
+
+// Date filter button (same as more filters for now)
+document.getElementById('date-filter-btn').addEventListener('click', toggleAdvancedFilters);
+
+// Export CSV
+document.getElementById('export-csv-btn').addEventListener('click', () => {
+    window.location.href = '/api/expenses/export/csv';
+});
+
+// Import CSV
+document.getElementById('import-csv-btn').addEventListener('click', () => {
+    document.getElementById('csv-file-input').click();
+});
+
+document.getElementById('csv-file-input').addEventListener('change', async (e) => {
+    const file = e.target.files[0];
+    if (!file) return;
+    
+    const formData = new FormData();
+    formData.append('file', file);
+    
+    try {
+        const result = await apiCall('/api/expenses/import/csv', {
+            method: 'POST',
+            body: formData
+        });
+        
+        showToast(`Imported ${result.imported} transactions`, 'success');
+        if (result.errors.length > 0) {
+            console.warn('Import errors:', result.errors);
+        }
+        loadTransactions();
+    } catch (error) {
+        console.error('Failed to import CSV:', error);
+    }
+    
+    e.target.value = ''; // Reset file input
+});
+
+// Initialize
+document.addEventListener('DOMContentLoaded', () => {
+    loadTransactions();
+    loadCategoriesFilter();
+});

backup/fina-1/app/static/manifest.json

@@ -0,0 +1,63 @@
+{
+  "name": "FINA",
+  "short_name": "FINA",
+  "description": "Personal Finance Tracker - Track your expenses, manage your finances",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#111a22",
+  "theme_color": "#2b8cee",
+  "orientation": "portrait-primary",
+  "icons": [
+    {
+      "src": "/static/icons/icon-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/static/icons/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "/static/icons/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "/static/icons/apple-touch-icon.png",
+      "sizes": "180x180",
+      "type": "image/png",
+      "purpose": "any"
+    }
+  ],
+  "categories": ["finance", "productivity", "utilities"],
+  "shortcuts": [
+    {
+      "name": "Add Expense",
+      "short_name": "Add",
+      "description": "Quickly add a new expense",
+      "url": "/dashboard?action=add",
+      "icons": [
+        {
+          "src": "/static/icons/icon-96x96.png",
+          "sizes": "96x96"
+        }
+      ]
+    },
+    {
+      "name": "View Reports",
+      "short_name": "Reports",
+      "description": "View spending reports",
+      "url": "/reports",
+      "icons": [
+        {
+          "src": "/static/icons/icon-96x96.png",
+          "sizes": "96x96"
+        }
+      ]
+    }
+  ]
+}

backup/fina-1/app/static/sw.js

@@ -0,0 +1,89 @@
+const CACHE_NAME = 'fina-v1';
+const urlsToCache = [
+  '/',
+  '/static/js/app.js',
+  '/static/js/pwa.js',
+  '/static/manifest.json',
+  'https://cdn.tailwindcss.com',
+  'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap',
+  'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap'
+];
+
+// Install event - cache resources
+self.addEventListener('install', event => {
+  event.waitUntil(
+    caches.open(CACHE_NAME)
+      .then(cache => cache.addAll(urlsToCache))
+      .then(() => self.skipWaiting())
+  );
+});
+
+// Activate event - clean up old caches
+self.addEventListener('activate', event => {
+  event.waitUntil(
+    caches.keys().then(cacheNames => {
+      return Promise.all(
+        cacheNames.map(cacheName => {
+          if (cacheName !== CACHE_NAME) {
+            return caches.delete(cacheName);
+          }
+        })
+      );
+    }).then(() => self.clients.claim())
+  );
+});
+
+// Fetch event - serve from cache, fallback to network
+self.addEventListener('fetch', event => {
+  // Skip non-GET requests
+  if (event.request.method !== 'GET') {
+    return;
+  }
+
+  event.respondWith(
+    caches.match(event.request)
+      .then(response => {
+        // Cache hit - return response
+        if (response) {
+          return response;
+        }
+
+        // Clone the request
+        const fetchRequest = event.request.clone();
+
+        return fetch(fetchRequest).then(response => {
+          // Check if valid response
+          if (!response || response.status !== 200 || response.type !== 'basic') {
+            return response;
+          }
+
+          // Clone the response
+          const responseToCache = response.clone();
+
+          caches.open(CACHE_NAME)
+            .then(cache => {
+              cache.put(event.request, responseToCache);
+            });
+
+          return response;
+        }).catch(() => {
+          // Return offline page or fallback
+          return new Response('You are offline', {
+            headers: { 'Content-Type': 'text/plain' }
+          });
+        });
+      })
+  );
+});
+
+// Background sync for offline expense creation
+self.addEventListener('sync', event => {
+  if (event.tag === 'sync-expenses') {
+    event.waitUntil(syncExpenses());
+  }
+});
+
+async function syncExpenses() {
+  // Implement offline expense sync logic
+  console.log('Syncing expenses...');
+}

backup/fina-1/app/templates/auth/backup_codes.html

@@ -0,0 +1,126 @@
+{% extends "base.html" %}
+
+{% block title %}Backup Codes - FINA{% endblock %}
+
+{% block body %}
+<div class="min-h-screen flex items-center justify-center p-4 bg-background-light dark:bg-background-dark">
+    <div class="max-w-2xl w-full">
+        <!-- Success Header -->
+        <div class="text-center mb-8">
+            <div class="inline-flex items-center justify-center w-16 h-16 bg-green-100 dark:bg-green-500/20 rounded-full mb-4">
+                <span class="material-symbols-outlined text-green-600 dark:text-green-400 text-[32px]">verified_user</span>
+            </div>
+            <h1 class="text-2xl font-bold text-text-main dark:text-white mb-2" data-translate="twofa.setupSuccess">Two-Factor Authentication Enabled!</h1>
+            <p class="text-text-muted dark:text-[#92adc9]" data-translate="twofa.backupCodesDesc">Save these backup codes in a secure location</p>
+        </div>
+        
+        <div class="bg-card-light dark:bg-card-dark border border-border-light dark:border-[#233648] rounded-2xl p-6 md:p-8 shadow-sm">
+            <!-- Warning Alert -->
+            <div class="bg-yellow-50 dark:bg-yellow-500/10 border border-yellow-200 dark:border-yellow-500/30 rounded-lg p-4 mb-6">
+                <div class="flex gap-3">
+                    <span class="material-symbols-outlined text-yellow-600 dark:text-yellow-400 text-[20px] flex-shrink-0">warning</span>
+                    <div class="flex-1">
+                        <h3 class="font-semibold text-yellow-800 dark:text-yellow-400 mb-1" data-translate="twofa.important">Important!</h3>
+                        <p class="text-sm text-yellow-700 dark:text-yellow-300" data-translate="twofa.backupCodesWarning">Each backup code can only be used once. Store them securely - you'll need them if you lose access to your authenticator app.</p>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Backup Codes Grid -->
+            <div class="bg-background-light dark:bg-background-dark border border-border-light dark:border-[#233648] rounded-xl p-6 mb-6">
+                <h3 class="text-sm font-medium text-text-muted dark:text-[#92adc9] uppercase tracking-wide mb-4" data-translate="twofa.yourBackupCodes">Your Backup Codes</h3>
+                <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                    {% for code in backup_codes %}
+                    <div class="flex items-center gap-3 bg-card-light dark:bg-card-dark border border-border-light dark:border-[#233648] rounded-lg p-3">
+                        <span class="text-text-muted dark:text-[#92adc9] text-sm font-medium">{{ loop.index }}.</span>
+                        <code class="flex-1 text-primary font-mono font-bold text-base tracking-wider">{{ code }}</code>
+                        <button onclick="copyCode('{{ code }}')" class="text-text-muted dark:text-[#92adc9] hover:text-primary transition-colors" title="Copy">
+                            <span class="material-symbols-outlined text-[20px]">content_copy</span>
+                        </button>
+                    </div>
+                    {% endfor %}
+                </div>
+            </div>
+            
+            <!-- Actions -->
+            <div class="flex flex-col sm:flex-row gap-3">
+                <a href="{{ url_for('auth.download_backup_codes_pdf') }}" class="flex-1 inline-flex items-center justify-center gap-2 px-6 py-3 bg-primary text-white rounded-lg font-medium hover:bg-primary/90 transition-colors">
+                    <span class="material-symbols-outlined text-[20px]">download</span>
+                    <span data-translate="twofa.downloadPDF">Download as PDF</span>
+                </a>
+                <button onclick="printCodes()" class="flex-1 inline-flex items-center justify-center gap-2 px-6 py-3 bg-background-light dark:bg-background-dark border border-border-light dark:border-[#233648] text-text-main dark:text-white rounded-lg font-medium hover:bg-slate-100 dark:hover:bg-white/5 transition-colors">
+                    <span class="material-symbols-outlined text-[20px]">print</span>
+                    <span data-translate="twofa.print">Print Codes</span>
+                </button>
+            </div>
+            
+            <div class="mt-6 text-center">
+                <a href="{{ url_for('main.settings') }}" class="inline-flex items-center gap-2 text-text-muted dark:text-[#92adc9] hover:text-primary transition-colors text-sm font-medium">
+                    <span data-translate="twofa.continueToSettings">Continue to Settings</span>
+                    <span class="material-symbols-outlined text-[16px]">arrow_forward</span>
+                </a>
+            </div>
+        </div>
+        
+        <!-- Info Section -->
+        <div class="mt-6 bg-blue-50 dark:bg-blue-500/10 border border-blue-200 dark:border-blue-500/30 rounded-lg p-4">
+            <div class="flex gap-3">
+                <span class="material-symbols-outlined text-blue-600 dark:text-blue-400 text-[20px] flex-shrink-0">info</span>
+                <div class="text-sm text-blue-700 dark:text-blue-300">
+                    <p class="font-medium mb-1" data-translate="twofa.howToUse">How to use backup codes:</p>
+                    <ul class="list-disc list-inside space-y-1 text-blue-600 dark:text-blue-400">
+                        <li data-translate="twofa.useWhen">Use a backup code when you can't access your authenticator app</li>
+                        <li data-translate="twofa.enterCode">Enter the code in the 2FA field when logging in</li>
+                        <li data-translate="twofa.oneTimeUse">Each code works only once - it will be deleted after use</li>
+                        <li data-translate="twofa.regenerate">You can regenerate codes anytime from Settings</li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+function copyCode(code) {
+    navigator.clipboard.writeText(code).then(() => {
+        // Show success notification
+        const notification = document.createElement('div');
+        notification.className = 'fixed top-4 right-4 z-50 px-4 py-3 rounded-lg shadow-lg flex items-center gap-3 bg-green-500 text-white animate-slideIn';
+        notification.innerHTML = `
+            <span class="material-symbols-outlined text-[20px]">check_circle</span>
+            <span class="text-sm font-medium">Code copied to clipboard!</span>
+        `;
+        document.body.appendChild(notification);
+        
+        setTimeout(() => {
+            notification.classList.add('animate-slideOut');
+            setTimeout(() => document.body.removeChild(notification), 300);
+        }, 2000);
+    });
+}
+
+function printCodes() {
+    window.print();
+}
+</script>
+
+<style>
+@media print {
+    body * {
+        visibility: hidden;
+    }
+    .bg-card-light, .bg-card-dark {
+        visibility: visible;
+        position: absolute;
+        left: 0;
+        top: 0;
+    }
+    .bg-card-light *, .bg-card-dark * {
+        visibility: visible;
+    }
+    button, .mt-6, .bg-blue-50, .dark\:bg-blue-500\/10 {
+        display: none !important;
+    }
+}
+</style>
+{% endblock %}

backup/fina-1/app/templates/auth/login.html

@@ -0,0 +1,212 @@
+{% extends "base.html" %}
+
+{% block title %}Login - FINA{% endblock %}
+
+{% block extra_css %}
+<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+<style>
+    .material-icons {
+        font-family: 'Material Icons';
+        font-weight: normal;
+        font-style: normal;
+        font-size: 24px;
+        display: inline-block;
+        line-height: 1;
+        text-transform: none;
+        letter-spacing: normal;
+        word-wrap: normal;
+        white-space: nowrap;
+        direction: ltr;
+        -webkit-font-smoothing: antialiased;
+        text-rendering: optimizeLegibility;
+        -moz-osx-font-smoothing: grayscale;
+        font-feature-settings: 'liga';
+    }
+    
+    .radial-blue-bg {
+        background: radial-gradient(circle, #1e3a8a 0%, #1e293b 50%, #0f172a 100%);
+        position: relative;
+        overflow: hidden;
+    }
+    
+    .radial-blue-bg::before {
+        content: '';
+        position: absolute;
+        top: -50%;
+        left: -50%;
+        width: 200%;
+        height: 200%;
+        background: 
+            repeating-conic-gradient(from 0deg at 50% 50%, 
+                transparent 0deg, 
+                rgba(43, 140, 238, 0.1) 2deg, 
+                transparent 4deg);
+        animation: rotate 60s linear infinite;
+    }
+    
+    @keyframes rotate {
+        from { transform: rotate(0deg); }
+        to { transform: rotate(360deg); }
+    }
+    
+    .login-input {
+        background: #1e293b;
+        border: 1px solid #334155;
+        border-radius: 25px;
+        padding: 12px 20px;
+        font-size: 14px;
+        color: #e2e8f0;
+        transition: all 0.3s ease;
+    }
+    
+    .login-input:focus {
+        outline: none;
+        border-color: #3b82f6;
+        background: #0f172a;
+        color: #fff;
+    }
+    
+    .login-input::placeholder {
+        color: #64748b;
+    }
+    
+    .login-btn {
+        background: #3b82f6;
+        color: white;
+        border: none;
+        border-radius: 25px;
+        padding: 12px 40px;
+        font-size: 14px;
+        font-weight: 600;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+        box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
+    }
+    
+    .login-btn:hover {
+        background: #2563eb;
+        transform: translateX(2px);
+        box-shadow: 0 0 30px rgba(59, 130, 246, 0.5);
+    }
+</style>
+{% endblock %}
+
+{% block body %}
+<div class="min-h-screen flex">
+    <!-- Left Side - Logo with Radial Background -->
+    <div class="hidden lg:flex lg:w-1/2 radial-blue-bg items-center justify-center relative">
+        <div class="relative z-10">
+            <img src="{{ url_for('static', filename='icons/logo.png') }}" alt="FINA Logo" class="w-96 h-96 rounded-full shadow-2xl">
+        </div>
+    </div>
+    
+    <!-- Right Side - Login Form -->
+    <div class="w-full lg:w-1/2 flex items-center justify-center bg-slate-900 p-8">
+        <div class="w-full max-w-md">
+            <!-- Mobile Logo -->
+            <div class="lg:hidden flex justify-center mb-8">
+                <img src="{{ url_for('static', filename='icons/logo.png') }}" alt="FINA Logo" class="w-24 h-24 rounded-full shadow-lg">
+            </div>
+            
+            <!-- Login Header -->
+            <h1 class="text-3xl font-bold text-white mb-8">Login Here!</h1>
+            
+            <!-- Login Form -->
+            <form id="login-form" class="space-y-6">
+                <!-- Username Field -->
+                <div class="flex items-center gap-3">
+                    <span class="material-icons text-slate-400 text-[24px]">person</span>
+                    <input type="text" name="username" required autofocus
+                           class="login-input flex-1" 
+                           placeholder="username or email">
+                </div>
+                
+                <!-- Password Field -->
+                <div class="flex items-center gap-3">
+                    <span class="material-icons text-slate-400 text-[24px]">lock</span>
+                    <div class="flex-1 relative">
+                        <input type="password" name="password" id="password" required 
+                               class="login-input w-full pr-12" 
+                               placeholder="password">
+                        <button type="button" onclick="togglePassword()" class="absolute right-4 top-1/2 -translate-y-1/2 text-slate-400 hover:text-blue-400">
+                            <span class="material-icons text-[20px]" id="eye-icon">visibility</span>
+                        </button>
+                    </div>
+                </div>
+                
+                <!-- 2FA Field (hidden by default) -->
+                <div id="2fa-field" class="hidden flex items-center gap-3">
+                    <span class="material-icons text-slate-400 text-[24px]">security</span>
+                    <input type="text" name="two_factor_code" 
+                           class="login-input flex-1" 
+                           placeholder="2FA code">
+                </div>
+                
+                <!-- Remember Password & Login Button -->
+                <div class="flex items-center justify-between">
+                    <label class="flex items-center text-sm text-slate-300">
+                        <input type="checkbox" name="remember" id="remember" class="mr-2 rounded border-slate-500 bg-slate-700 text-blue-600">
+                        <span>Remember Password</span>
+                    </label>
+                    
+                    <button type="submit" class="login-btn">
+                        <span>LOGIN</span>
+                        <span class="material-icons text-[18px]">arrow_forward</span>
+                    </button>
+                </div>
+            </form>
+            
+            <!-- Register Link -->
+            <div class="mt-8 text-center text-sm text-slate-300">
+                Don't have an account? 
+                <a href="{{ url_for('auth.register') }}" class="text-blue-400 hover:text-blue-300 hover:underline font-medium">Create your account <span class="underline">here</span>!</a>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+function togglePassword() {
+    const passwordInput = document.getElementById('password');
+    const eyeIcon = document.getElementById('eye-icon');
+    
+    if (passwordInput.type === 'password') {
+        passwordInput.type = 'text';
+        eyeIcon.textContent = 'visibility_off';
+    } else {
+        passwordInput.type = 'password';
+        eyeIcon.textContent = 'visibility';
+    }
+}
+
+document.getElementById('login-form').addEventListener('submit', async (e) => {
+    e.preventDefault();
+    const formData = new FormData(e.target);
+    const data = Object.fromEntries(formData);
+    
+    try {
+        const response = await fetch('/auth/login', {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify(data)
+        });
+        
+        const result = await response.json();
+        
+        if (result.requires_2fa) {
+            document.getElementById('2fa-field').classList.remove('hidden');
+            showToast('Please enter your 2FA code', 'info');
+        } else if (result.success) {
+            window.location.href = result.redirect;
+        } else {
+            showToast(result.message || 'Login failed', 'error');
+        }
+    } catch (error) {
+        showToast('An error occurred', 'error');
+    }
+});
+</script>
+{% endblock %}

backup/fina-1/app/templates/auth/register.html

@@ -0,0 +1,93 @@
+{% extends "base.html" %}
+
+{% block title %}Register - FINA{% endblock %}
+
+{% block body %}
+<div class="min-h-screen flex items-center justify-center p-4 bg-background-dark">
+    <div class="max-w-md w-full">
+        <!-- Logo/Brand -->
+        <div class="text-center mb-8">
+            <img src="{{ url_for('static', filename='icons/logo.png') }}" alt="FINA Logo" class="w-32 h-32 mx-auto mb-4 rounded-full shadow-lg shadow-primary/30">
+            <h1 class="text-4xl font-bold text-white mb-2">FINA</h1>
+            <p class="text-[#92adc9]" data-translate="register.tagline">Start managing your finances today</p>
+        </div>
+        
+        <!-- Register Form -->
+        <div class="bg-card-dark border border-[#233648] rounded-2xl p-8">
+            <h2 class="text-2xl font-bold text-white mb-6" data-translate="register.title">Create Account</h2>
+            
+            <form id="register-form" class="space-y-4">
+                <div>
+                    <label class="text-[#92adc9] text-sm mb-2 block" data-translate="form.username">Username</label>
+                    <input type="text" name="username" required class="w-full bg-[#111a22] border border-[#233648] rounded-lg px-4 py-3 text-white focus:border-primary focus:ring-1 focus:ring-primary">
+                </div>
+                
+                <div>
+                    <label class="text-[#92adc9] text-sm mb-2 block" data-translate="form.email">Email</label>
+                    <input type="email" name="email" required class="w-full bg-[#111a22] border border-[#233648] rounded-lg px-4 py-3 text-white focus:border-primary focus:ring-1 focus:ring-primary">
+                </div>
+                
+                <div>
+                    <label class="text-[#92adc9] text-sm mb-2 block" data-translate="form.password">Password</label>
+                    <input type="password" name="password" required minlength="8" class="w-full bg-[#111a22] border border-[#233648] rounded-lg px-4 py-3 text-white focus:border-primary focus:ring-1 focus:ring-primary">
+                </div>
+                
+                <div class="grid grid-cols-2 gap-4">
+                    <div>
+                        <label class="text-[#92adc9] text-sm mb-2 block" data-translate="form.language">Language</label>
+                        <select name="language" class="w-full bg-[#111a22] border border-[#233648] rounded-lg px-4 py-3 text-white focus:border-primary focus:ring-1 focus:ring-primary">
+                            <option value="en">English</option>
+                            <option value="ro">Română</option>
+                        </select>
+                    </div>
+                    
+                    <div>
+                        <label class="text-[#92adc9] text-sm mb-2 block" data-translate="form.currency">Currency</label>
+                        <select name="currency" class="w-full bg-[#111a22] border border-[#233648] rounded-lg px-4 py-3 text-white focus:border-primary focus:ring-1 focus:ring-primary">
+                            <option value="USD">USD ($)</option>
+                            <option value="EUR">EUR (€)</option>
+                            <option value="GBP">GBP (£)</option>
+                            <option value="RON">RON (lei)</option>
+                        </select>
+                    </div>
+                </div>
+                
+                <button type="submit" class="w-full bg-primary hover:bg-primary/90 text-white py-3 rounded-lg font-semibold transition-colors" data-translate="register.create_account">Create Account</button>
+            </form>
+            
+            <div class="mt-6 text-center">
+                <p class="text-[#92adc9] text-sm">
+                    <span data-translate="register.have_account">Already have an account?</span>
+                    <a href="{{ url_for('auth.login') }}" class="text-primary hover:underline ml-1" data-translate="register.login">Login</a>
+                </p>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+document.getElementById('register-form').addEventListener('submit', async (e) => {
+    e.preventDefault();
+    const formData = new FormData(e.target);
+    const data = Object.fromEntries(formData);
+    
+    try {
+        const response = await fetch('/auth/register', {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify(data)
+        });
+        
+        const result = await response.json();
+        
+        if (result.success) {
+            window.location.href = result.redirect;
+        } else {
+            showToast(result.message || 'Registration failed', 'error');
+        }
+    } catch (error) {
+        showToast('An error occurred', 'error');
+    }
+});
+</script>
+{% endblock %}

backup/fina-1/app/templates/auth/setup_2fa.html

@@ -0,0 +1,100 @@
+{% extends "base.html" %}
+
+{% block title %}Setup 2FA - FINA{% endblock %}
+
+{% block body %}
+<div class="min-h-screen flex items-center justify-center p-4 bg-background-light dark:bg-background-dark">
+    <div class="max-w-md w-full">
+        <!-- Header -->
+        <div class="text-center mb-8">
+            <div class="inline-flex items-center justify-center w-16 h-16 bg-primary/10 rounded-full mb-4">
+                <span class="material-symbols-outlined text-primary text-[32px]">lock</span>
+            </div>
+            <h1 class="text-2xl font-bold text-text-main dark:text-white mb-2" data-translate="twofa.setupTitle">Setup Two-Factor Authentication</h1>
+            <p class="text-text-muted dark:text-[#92adc9]" data-translate="twofa.setupDesc">Scan the QR code with your authenticator app</p>
+        </div>
+        
+        <div class="bg-card-light dark:bg-card-dark border border-border-light dark:border-[#233648] rounded-2xl p-6 md:p-8 shadow-sm">
+            <!-- Instructions -->
+            <div class="mb-6">
+                <h3 class="text-sm font-semibold text-text-main dark:text-white mb-3" data-translate="twofa.step1">Step 1: Scan QR Code</h3>
+                <p class="text-sm text-text-muted dark:text-[#92adc9] mb-4" data-translate="twofa.step1Desc">Open your authenticator app (Google Authenticator, Authy, etc.) and scan this QR code:</p>
+                
+                <!-- QR Code -->
+                <div class="bg-white p-4 rounded-xl flex justify-center border border-border-light">
+                    <img src="data:image/png;base64,{{ qr_code }}" alt="2FA QR Code" class="max-w-full h-auto" style="max-width: 200px;">
+                </div>
+            </div>
+            
+            <!-- Manual Entry -->
+            <div class="mb-6">
+                <details class="group">
+                    <summary class="cursor-pointer list-none flex items-center justify-between text-sm font-medium text-text-main dark:text-white mb-2">
+                        <span data-translate="twofa.manualEntry">Can't scan? Enter code manually</span>
+                        <span class="material-symbols-outlined text-[20px] group-open:rotate-180 transition-transform">expand_more</span>
+                    </summary>
+                    <div class="mt-3 bg-background-light dark:bg-background-dark border border-border-light dark:border-[#233648] rounded-lg p-4">
+                        <p class="text-xs text-text-muted dark:text-[#92adc9] mb-2" data-translate="twofa.enterManually">Enter this code in your authenticator app:</p>
+                        <div class="flex items-center gap-2">
+                            <code id="secret-code" class="flex-1 text-primary font-mono text-sm break-all">{{ secret }}</code>
+                            <button onclick="copySecret()" class="p-2 text-text-muted dark:text-[#92adc9] hover:text-primary transition-colors" title="Copy">
+                                <span class="material-symbols-outlined text-[20px]">content_copy</span>
+                            </button>
+                        </div>
+                    </div>
+                </details>
+            </div>
+            
+            <!-- Verification -->
+            <form method="POST" class="space-y-4">
+                <div>
+                    <h3 class="text-sm font-semibold text-text-main dark:text-white mb-3" data-translate="twofa.step2">Step 2: Verify Code</h3>
+                    <p class="text-sm text-text-muted dark:text-[#92adc9] mb-3" data-translate="twofa.step2Desc">Enter the 6-digit code from your authenticator app:</p>
+                    <input type="text" name="code" maxlength="6" pattern="[0-9]{6}" required 
+                           class="w-full bg-background-light dark:bg-background-dark border border-border-light dark:border-[#233648] rounded-lg px-4 py-3 text-text-main dark:text-white text-center text-2xl tracking-widest font-mono focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition-all"
+                           placeholder="000000"
+                           autocomplete="off">
+                </div>
+                
+                <button type="submit" class="w-full bg-primary hover:bg-primary/90 text-white py-3 rounded-lg font-semibold transition-colors flex items-center justify-center gap-2">
+                    <span class="material-symbols-outlined text-[20px]">verified_user</span>
+                    <span data-translate="twofa.enable">Enable 2FA</span>
+                </button>
+            </form>
+            
+            <div class="mt-6 text-center">
+                <a href="{{ url_for('main.settings') }}" class="text-text-muted dark:text-[#92adc9] hover:text-primary transition-colors text-sm" data-translate="actions.cancel">Cancel</a>
+            </div>
+        </div>
+        
+        <!-- Info -->
+        <div class="mt-6 bg-blue-50 dark:bg-blue-500/10 border border-blue-200 dark:border-blue-500/30 rounded-lg p-4">
+            <div class="flex gap-3">
+                <span class="material-symbols-outlined text-blue-600 dark:text-blue-400 text-[20px] flex-shrink-0">info</span>
+                <p class="text-sm text-blue-700 dark:text-blue-300" data-translate="twofa.infoText">After enabling 2FA, you'll receive backup codes that you can use if you lose access to your authenticator app. Keep them in a safe place!</p>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+function copySecret() {
+    const secretCode = document.getElementById('secret-code').textContent;
+    navigator.clipboard.writeText(secretCode).then(() => {
+        // Show success notification
+        const notification = document.createElement('div');
+        notification.className = 'fixed top-4 right-4 z-50 px-4 py-3 rounded-lg shadow-lg flex items-center gap-3 bg-green-500 text-white animate-slideIn';
+        notification.innerHTML = `
+            <span class="material-symbols-outlined text-[20px]">check_circle</span>
+            <span class="text-sm font-medium">Secret code copied!</span>
+        `;
+        document.body.appendChild(notification);
+        
+        setTimeout(() => {
+            notification.classList.add('animate-slideOut');
+            setTimeout(() => document.body.removeChild(notification), 300);
+        }, 2000);
+    });
+}
+</script>
+{% endblock %}

backup/fina-1/app/templates/base.html

@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="FINA - Track your expenses, manage your finances">
+    <meta name="theme-color" content="#111a22">
+    <title>{% block title %}FINA - Personal Finance Tracker{% endblock %}</title>
+    
+    <!-- PWA Manifest -->
+    <link rel="manifest" href="{{ url_for('static', filename='manifest.json') }}">
+    
+    <!-- Icons -->
+    <link rel="icon" type="image/png" href="{{ url_for('static', filename='icons/favicon.png') }}">
+    <link rel="icon" type="image/png" sizes="96x96" href="{{ url_for('static', filename='icons/icon-96x96.png') }}">
+    <link rel="icon" type="image/png" sizes="192x192" href="{{ url_for('static', filename='icons/icon-192x192.png') }}">
+    <link rel="icon" type="image/png" sizes="512x512" href="{{ url_for('static', filename='icons/icon-512x512.png') }}">
+    <link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='icons/apple-touch-icon.png') }}">
+    
+    <!-- Fonts -->
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
+    
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+    <script>
+        tailwind.config = {
+            darkMode: "class",
+            theme: {
+                extend: {
+                    colors: {
+                        "primary": "#2b8cee",
+                        "background-light": "#f6f7f8",
+                        "background-dark": "#111a22",
+                        "card-dark": "#1a2632",
+                        "card-light": "#ffffff",
+                        "sidebar-light": "#ffffff",
+                        "border-light": "#e2e8f0",
+                        "text-main": "#0f172a",
+                        "text-muted": "#64748b",
+                    },
+                    fontFamily: {
+                        "display": ["Inter", "sans-serif"]
+                    },
+                    borderRadius: {
+                        "DEFAULT": "0.25rem",
+                        "lg": "0.5rem",
+                        "xl": "0.75rem",
+                        "2xl": "1rem",
+                        "full": "9999px"
+                    },
+                },
+            },
+        }
+    </script>
+    
+    <style>
+        /* Dark theme scrollbar */
+        .dark ::-webkit-scrollbar {
+            width: 8px;
+            height: 8px;
+        }
+        .dark ::-webkit-scrollbar-track {
+            background: transparent; 
+        }
+        .dark ::-webkit-scrollbar-thumb {
+            background: #324d67; 
+            border-radius: 4px;
+        }
+        .dark ::-webkit-scrollbar-thumb:hover {
+            background: #4b6a88; 
+        }
+        
+        /* Light theme scrollbar */
+        ::-webkit-scrollbar {
+            width: 8px;
+            height: 8px;
+        }
+        ::-webkit-scrollbar-track {
+            background: transparent; 
+        }
+        ::-webkit-scrollbar-thumb {
+            background: #cbd5e1; 
+            border-radius: 4px;
+        }
+        ::-webkit-scrollbarlight dark:bg-background-dark text-text-main dark:text-white font-display overflow-hidden transition-colors duration-200
+            background: #94a3b8; 
+        }
+        
+        .material-symbols-outlined {
+            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+        }
+        
+        .glass {
+            background: rgba(26, 38, 50, 0.7);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(35, 54, 72, 0.5);
+        }
+    </style>
+    
+    {% block extra_css %}{% endblock %}
+</head>
+<body class="bg-background-dark text-white font-display overflow-hidden">
+    {% block body %}{% endblock %}
+    
+    <!-- Toast Notification Container -->
+    <div id="toast-container" class="fixed top-4 right-4 z-50 space-y-2"></div>
+    
+    <script src="{{ url_for('static', filename='js/app.js') }}"></script>
+    <script src="{{ url_for('static', filename='js/pwa.js') }}"></script>
+    {% block extra_js %}{% endblock %}
+</body>
+</html>

backup/fina-1/app/templates/dashboard.html

@@ -0,0 +1,218 @@
+{% extends "base.html" %}
+
+{% block title %}Dashboard - FINA{% endblock %}
+
+{% block body %}
+<div class="flex h-screen w-full">
+    <!-- Side Navigation -->
+    <aside id="sidebar" class="hidden lg:flex w-64 flex-col bg-sidebar-light dark:bg-background-dark border-r border-border-light dark:border-[#233648] transition-all duration-300 shadow-sm dark:shadow-none">
+        <div class="p-6 flex flex-col h-full justify-between">
+            <div class="flex flex-col gap-8">
+                <!-- User Profile -->
+                <div class="flex gap-3 items-center">
+                    <img src="{{ current_user.avatar | avatar_url }}" alt="{{ current_user.username }}" class="size-10 rounded-full border-2 border-primary/30 object-cover">
+                    <div class="flex flex-col">
+                        <h1 class="text-text-main dark:text-white text-base font-bold leading-none">{{ current_user.username }}</h1>
+                        <p class="text-text-muted dark:text-[#92adc9] text-xs font-normal mt-1">
+                            {% if current_user.is_admin %}Admin{% else %}User{% endif %}
+                        </p>
+                    </div>
+                </div>
+                
+                <!-- Navigation Links -->
+                <nav class="flex flex-col gap-2">
+                    <a class="flex items-center gap-3 px-3 py-2.5 rounded-lg bg-primary/10 text-primary border border-primary/10" href="{{ url_for('main.dashboard') }}">
+                        <span class="material-symbols-outlined text-[20px]">dashboard</span>
+                        <span class="text-sm font-medium" data-translate="nav.dashboard">Dashboard</span>
+                    </a>
+                    <a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-text-muted dark:text-[#92adc9] hover:bg-slate-50 dark:hover:bg-[#233648] hover:text-text-main dark:hover:text-white transition-colors" href="{{ url_for('main.transactions') }}">
+                        <span class="material-symbols-outlined text-[20px]">receipt_long</span>
+                        <span class="text-sm font-medium" data-translate="nav.transactions">Transactions</span>
+                    </a>
+                    <a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-text-muted dark:text-[#92adc9] hover:bg-slate-50 dark:hover:bg-[#233648] hover:text-text-main dark:hover:text-white transition-colors" href="{{ url_for('main.reports') }}">
+                        <span class="material-symbols-outlined text-[20px]">pie_chart</span>
+                        <span class="text-sm font-medium" data-translate="nav.reports">Reports</span>
+                    </a>
+                    <a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-text-muted dark:text-[#92adc9] hover:bg-slate-50 dark:hover:bg-[#233648] hover:text-text-main dark:hover:text-white transition-colors" href="{{ url_for('main.documents') }}">
+                        <span class="material-symbols-outlined text-[20px]">folder_open</span>
+                        <span class="text-sm font-medium" data-translate="nav.documents">Documents</span>
+                    </a>
+                    {% if current_user.is_admin %}
+                    <a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-text-muted dark:text-[#92adc9] hover:bg-slate-50 dark:hover:bg-[#233648] hover:text-text-main dark:hover:text-white transition-colors" href="/admin">
+                        <span class="material-symbols-outlined text-[20px]">admin_panel_settings</span>
+                        <span class="text-sm font-medium" data-translate="nav.admin">Admin</span>
+                    </a>
+                    {% endif %}
+                </nav>
+            </div>
+            
+            <!-- Bottom Links -->
+            <div class="flex flex-col gap-2">
+                <button id="theme-toggle" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-text-muted dark:text-[#92adc9] hover:bg-slate-50 dark:hover:bg-[#233648] hover:text-text-main dark:hover:text-white transition-colors">
+                    <span class="material-symbols-outlined text-[20px]" id="theme-icon">light_mode</span>
+                    <span class="text-sm font-medium" id="theme-text">Light Mode</span>
+                </button>
+                <a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-text-muted dark:text-[#92adc9] hover:bg-slate-50 dark:hover:bg-[#233648] hover:text-text-main dark:hover:text-white transition-colors" href="{{ url_for('main.settings') }}">
+                    <span class="material-symbols-outlined text-[20px]">settings</span>
+                    <span class="text-sm font-medium" data-translate="nav.settings">Settings</span>
+                </a>
+                <a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-text-muted dark:text-[#92adc9] hover:bg-slate-50 dark:hover:bg-[#233648] hover:text-text-main dark:hover:text-white transition-colors" href="{{ url_for('auth.logout') }}">
+                    <span class="material-symbols-outlined text-[20px]">logout</span>
+                    <span class="text-sm font-medium" data-translate="nav.logout">Log out</span>
+                </a>
+            </div>
+        </div>
+    </aside>
+    
+    <!-- Main Content -->
+    <main class="flex-1 flex flex-col h-full overflow-hidden relative">
+        <!-- Top Header -->
+        <header class="h-16 flex items-center justify-between px-6 lg:px-8 border-b border-border-light dark:border-[#233648] bg-white/80 dark:bg-background-dark/95 backdrop-blur z-10 shrink-0 shadow-sm dark:shadow-none">
+            <div class="flex items-center gap-4">
+                <button id="menu-toggle" class="lg:hidden text-text-main dark:text-white">
+                    <span class="material-symbols-outlined">menu</span>
+                </button>
+                <h2 class="text-text-main dark:text-white text-lg font-bold" data-translate="nav.dashboard">Dashboard</h2>
+            </div>
+            <div class="flex items-center gap-6">
+                <!-- Search Bar -->
+                <div class="hidden md:flex items-center bg-slate-50 dark:bg-card-dark rounded-lg h-10 px-3 border border-border-light dark:border-[#233648] focus-within:border-primary transition-colors w-64">
+                    <span class="material-symbols-outlined text-text-muted dark:text-[#92adc9] text-[20px]">search</span>
+                    <input id="search-input" class="bg-transparent border-none text-text-main dark:text-white text-sm placeholder-slate-400 dark:placeholder-[#5f7a96] focus:ring-0 w-full ml-2" placeholder="Search expenses..." type="text"/>
+                </div>
+                
+                <!-- Actions -->
+                <div class="flex items-center gap-3">
+                    <button id="add-expense-btn" class="bg-primary hover:bg-primary/90 text-white h-9 px-4 rounded-lg text-sm font-semibold shadow-md shadow-primary/20 transition-all flex items-center gap-2">
+                        <span class="material-symbols-outlined text-[18px]">add</span>
+                        <span class="hidden sm:inline" data-translate="actions.add_expense">Add Expense</span>
+                    </button>
+                </div>
+            </div>
+        </header>
+        
+        <!-- Scrollable Content -->
+        <div class="flex-1 overflow-y-auto p-6 lg:p-8 scroll-smooth bg-[#f8fafc] dark:bg-background-dark">
+            <div class="max-w-7xl mx-auto flex flex-col gap-8 pb-10">
+                <!-- KPI Cards -->
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 lg:gap-6">
+                    <!-- Total Spent -->
+                    <div class="p-6 rounded-xl bg-white dark:bg-card-dark border border-border-light dark:border-[#233648] flex flex-col justify-between relative overflow-hidden group shadow-sm dark:shadow-none">
+                        <div class="absolute top-0 right-0 p-4 opacity-5 dark:opacity-10 group-hover:opacity-10 dark:group-hover:opacity-20 transition-opacity">
+                            <span class="material-symbols-outlined text-6xl text-primary">payments</span>
+                        </div>
+                        <div>
+                            <p class="text-text-muted dark:text-[#92adc9] text-sm font-medium" data-translate="dashboard.total_spent">Total Spent</p>
+                            <h3 id="total-spent" class="text-text-main dark:text-white text-3xl font-bold mt-2 tracking-tight">$0.00</h3>
+                        </div>
+                        <div class="flex items-center gap-2 mt-4">
+                            <span id="percent-change" class="bg-green-500/10 text-green-600 dark:text-green-400 text-xs font-semibold px-2 py-1 rounded-full flex items-center gap-1">
+                                <span class="material-symbols-outlined text-[14px]">trending_up</span>
+                                0%
+                            </span>
+                            <span class="text-text-muted dark:text-[#5f7a96] text-xs" data-translate="dashboard.vs_last_month">vs last month</span>
+                        </div>
+                    </div>
+                    
+                    <!-- Active Categories -->
+                    <div class="p-6 rounded-xl bg-white dark:bg-card-dark border border-border-light dark:border-[#233648] flex flex-col justify-between shadow-sm dark:shadow-none">
+                        <div>
+                            <p class="text-text-muted dark:text-[#92adc9] text-sm font-medium" data-translate="dashboard.active_categories">Active Categories</p>
+                            <h3 id="active-categories" class="text-text-main dark:text-white text-3xl font-bold mt-2 tracking-tight">0</h3>
+                        </div>
+                        <p class="text-text-muted dark:text-[#5f7a96] text-xs mt-6" data-translate="dashboard.categories_in_use">categories in use</p>
+                    </div>
+                    
+                    <!-- Total Transactions -->
+                    <div class="p-6 rounded-xl bg-white dark:bg-card-dark border border-border-light dark:border-[#233648] flex flex-col justify-between shadow-sm dark:shadow-none">
+                        <div>
+                            <p class="text-text-muted dark:text-[#92adc9] text-sm font-medium" data-translate="dashboard.total_transactions">Total Transactions</p>
+                            <h3 id="total-transactions" class="text-text-main dark:text-white text-3xl font-bold mt-2 tracking-tight">0</h3>
+                        </div>
+                        <p class="text-text-muted dark:text-[#5f7a96] text-xs mt-6" data-translate="dashboard.this_month">this month</p>
+                    </div>
+                </div>
+                
+                <!-- Charts Row -->
+                <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 lg:gap-6">
+                    <!-- Spending by Category -->
+                    <div class="p-6 rounded-xl bg-white dark:bg-card-dark border border-border-light dark:border-[#233648] shadow-sm dark:shadow-none">
+                        <h3 class="text-text-main dark:text-white text-lg font-bold mb-4" data-translate="dashboard.spending_by_category">Spending by Category</h3>
+                        <canvas id="category-chart" class="w-full" style="max-height: 300px;"></canvas>
+                    </div>
+                    
+                    <!-- Monthly Trend -->
+                    <div class="p-6 rounded-xl bg-white dark:bg-card-dark border border-border-light dark:border-[#233648] shadow-sm dark:shadow-none">
+                        <h3 class="text-text-main dark:text-white text-lg font-bold mb-4" data-translate="dashboard.monthly_trend">Monthly Trend</h3>
+                        <canvas id="monthly-chart" class="w-full" style="max-height: 300px;"></canvas>
+                    </div>
+                </div>
+                
+                <!-- Recent Transactions -->
+                <div class="p-6 rounded-xl bg-white dark:bg-card-dark border border-border-light dark:border-[#233648] shadow-sm dark:shadow-none">
+                    <div class="flex justify-between items-center mb-4">
+                        <h3 class="text-text-main dark:text-white text-lg font-bold" data-translate="dashboard.recent_transactions">Recent Transactions</h3>
+                        <a href="{{ url_for('main.transactions') }}" class="text-primary text-sm hover:underline" data-translate="dashboard.view_all">View All</a>
+                    </div>
+                    <div id="recent-transactions" class="space-y-3">
+                        <!-- Transactions will be loaded here -->
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+</div>
+
+<!-- Add Expense Modal -->
+<div id="expense-modal" class="hidden fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4">
+    <div class="bg-white dark:bg-card-dark border border-border-light dark:border-[#233648] rounded-2xl max-w-md w-full max-h-[90vh] overflow-y-auto shadow-xl">
+        <div class="p-6">
+            <div class="flex justify-between items-center mb-6">
+                <h3 class="text-text-main dark:text-white text-xl font-bold" data-translate="modal.add_expense">Add Expense</h3>
+                <button id="close-modal" class="text-text-muted dark:text-[#92adc9] hover:text-text-main dark:hover:text-white">
+                    <span class="material-symbols-outlined">close</span>
+                </button>
+            </div>
+            
+            <form id="expense-form" class="space-y-4">
+                <div>
+                    <label class="text-text-muted dark:text-[#92adc9] text-sm mb-2 block" data-translate="form.amount">Amount</label>
+                    <input type="number" step="0.01" name="amount" required class="w-full bg-slate-50 dark:bg-[#111a22] border border-border-light dark:border-[#233648] rounded-lg px-4 py-2 text-text-main dark:text-white focus:border-primary focus:ring-1 focus:ring-primary">
+                </div>
+                
+                <div>
+                    <label class="text-text-muted dark:text-[#92adc9] text-sm mb-2 block" data-translate="form.description">Description</label>
+                    <input type="text" name="description" required class="w-full bg-slate-50 dark:bg-[#111a22] border border-border-light dark:border-[#233648] rounded-lg px-4 py-2 text-text-main dark:text-white focus:border-primary focus:ring-1 focus:ring-primary">
+                </div>
+                
+                <div>
+                    <label class="text-text-muted dark:text-[#92adc9] text-sm mb-2 block" data-translate="form.category">Category</label>
+                    <select name="category_id" required class="w-full bg-slate-50 dark:bg-[#111a22] border border-border-light dark:border-[#233648] rounded-lg px-4 py-2 text-text-main dark:text-white focus:border-primary focus:ring-1 focus:ring-primary">
+                        <option value="">Select category...</option>
+                    </select>
+                </div>
+                
+                <div>
+                    <label class="text-text-muted dark:text-[#92adc9] text-sm mb-2 block" data-translate="form.date">Date</label>
+                    <input type="date" name="date" required class="w-full bg-slate-50 dark:bg-[#111a22] border border-border-light dark:border-[#233648] rounded-lg px-4 py-2 text-text-main dark:text-white focus:border-primary focus:ring-1 focus:ring-primary">
+                </div>
+                
+                <div>
+                    <label class="text-text-muted dark:text-[#92adc9] text-sm mb-2 block" data-translate="form.tags">Tags (comma separated)</label>
+                    <input type="text" name="tags" class="w-full bg-slate-50 dark:bg-[#111a22] border border-border-light dark:border-[#233648] rounded-lg px-4 py-2 text-text-main dark:text-white focus:border-primary focus:ring-1 focus:ring-primary">
+                </div>
+                
+                <div>
+                    <label class="text-text-muted dark:text-[#92adc9] text-sm mb-2 block" data-translate="form.receipt">Receipt (optional)</label>
+                    <input type="file" name="receipt" accept="image/*,.pdf" class="w-full bg-slate-50 dark:bg-[#111a22] border border-border-light dark:border-[#233648] rounded-lg px-4 py-2 text-text-main dark:text-white focus:border-primary focus:ring-1 focus:ring-primary file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-primary file:text-white hover:file:bg-primary/90">
+                </div>
+                
+                <button type="submit" class="w-full bg-primary hover:bg-primary/90 text-white py-3 rounded-lg font-semibold transition-colors shadow-md" data-translate="actions.save">Save Expense</button>
+            </form>
+        </div>
+    </div>
+</div>
+
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.js"></script>
+<script src="{{ url_for('static', filename='js/dashboard.js') }}"></script>
+{% endblock %}

backup/fina-1/app/templates/documents.html

@@ -0,0 +1,127 @@
+{% extends "base.html" %}
+
+{% block title %}Documents - FINA{% endblock %}
+
+{% block body %}
+<div class="flex h-screen w-full">
+    <!-- Sidebar -->
+    <aside id="sidebar" class="hidden lg:flex w-64 flex-col bg-sidebar-light dark:bg-background-dark border-r border-border-light dark:border-[#233648]">
+        <div class="p-6 flex flex-col h-full justify-between">
+            <div class="flex flex-col gap-8">
+                <div class="flex gap-3 items-center">
+                    <img src="{{ current_user.avatar | avatar_url }}" alt="{{ current_user.username }}" class="size-10 rounded-full border-2 border-primary/30 object-cover">
+                    <div class="flex flex-col">
+                        <h1 class="text-text-main dark:text-white text-base font-bold leading-none">{{ current_user.username }}</h1>
+                        <p class="text-text-muted dark:text-[#92adc9] text-xs font-normal mt-1">
+                            {% if current_user.is_admin %}<span data-translate="user.admin">Admin</span>{% else %}<span data-translate="user.user">User</span>{% endif %}
+                        </p>
+                    </div>
+                </div>
+                
+                <nav class="flex flex-col gap-2">
+                    <a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-text-muted dark:text-[#92adc9] hover:bg-background-light dark:hover:bg-[#233648] hover:text-text-main dark:hover:text-white transition-colors" href="{{ url_for('main.dashboard') }}">
+                        <span class="material-symbols-outlined text-[20px]">dashboard</span>
+                        <span class="text-sm font-medium" data-translate="nav.dashboard">Dashboard</span>
+                    </a>
+                    <a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-text-muted dark:text-[#92adc9] hover:bg-background-light dark:hover:bg-[#233648] hover:text-text-main dark:hover:text-white transition-colors" href="{{ url_for('main.transactions') }}">
+                        <span class="material-symbols-outlined text-[20px]">receipt_long</span>
+                        <span class="text-sm font-medium" data-translate="nav.transactions">Transactions</span>
+                    </a>
+                    <a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-text-muted dark:text-[#92adc9] hover:bg-background-light dark:hover:bg-[#233648] hover:text-text-main dark:hover:text-white transition-colors" href="{{ url_for('main.reports') }}">
+                        <span class="material-symbols-outlined text-[20px]">pie_chart</span>
+                        <span class="text-sm font-medium" data-translate="nav.reports">Reports</span>
+                    </a>
+                    <a class="flex items-center gap-3 px-3 py-2.5 rounded-lg bg-primary/20 text-primary border border-primary/10" href="{{ url_for('main.documents') }}">
+                        <span class="material-symbols-outlined text-[20px]">folder_open</span>
+                        <span class="text-sm font-medium" data-translate="nav.documents">Documents</span>
+                    </a>
+                </nav>
+            </div>
+            
+            <div class="flex flex-col gap-2">
+                <a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-text-muted dark:text-[#92adc9] hover:bg-background-light dark:hover:bg-[#233648] hover:text-text-main dark:hover:text-white transition-colors" href="{{ url_for('main.settings') }}">
+                    <span class="material-symbols-outlined text-[20px]">settings</span>
+                    <span class="text-sm font-medium" data-translate="nav.settings">Settings</span>
+                </a>
+                <a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-text-muted dark:text-[#92adc9] hover:bg-background-light dark:hover:bg-[#233648] hover:text-text-main dark:hover:text-white transition-colors" href="{{ url_for('auth.logout') }}">
+                    <span class="material-symbols-outlined text-[20px]">logout</span>
+                    <span class="text-sm font-medium" data-translate="nav.logout">Log out</span>
+                </a>
+            </div>
+        </div>
+    </aside>
+    
+    <main class="flex-1 flex flex-col h-full overflow-hidden relative bg-background-light dark:bg-background-dark">
+        <header class="h-16 flex items-center justify-between px-6 lg:px-8 border-b border-border-light dark:border-[#233648] bg-card-light/95 dark:bg-background-dark/80 backdrop-blur z-10 shrink-0">
+            <div class="flex items-center gap-4">
+                <button id="menu-toggle" class="lg:hidden text-text-main dark:text-white">
+                    <span class="material-symbols-outlined">menu</span>
+                </button>
+                <h2 class="text-text-main dark:text-white text-lg font-bold" data-translate="documents.title">Documents</h2>
+            </div>
+        </header>
+        
+        <div class="flex-1 overflow-y-auto p-6 lg:p-8 scroll-smooth">
+            <div class="max-w-7xl mx-auto flex flex-col gap-8 pb-10">
+                <!-- Upload Section -->
+                <div class="flex flex-col gap-4">
+                    <h3 class="text-base font-semibold text-text-main dark:text-white" data-translate="documents.uploadTitle">Upload Documents</h3>
+                    <div id="upload-area" class="bg-card-light dark:bg-card-dark border-2 border-dashed border-border-light dark:border-[#233648] rounded-xl p-10 flex flex-col items-center justify-center text-center hover:border-primary/50 hover:bg-slate-50 dark:hover:bg-white/[0.02] transition-all cursor-pointer group relative overflow-hidden">
+                        <input id="file-input" type="file" class="absolute inset-0 opacity-0 cursor-pointer z-10" accept=".pdf,.csv,.xlsx,.xls,.png,.jpg,.jpeg" multiple />
+                        <div class="bg-primary/10 p-4 rounded-full text-primary mb-4 group-hover:scale-110 transition-transform duration-300">
+                            <span class="material-symbols-outlined text-[32px]">cloud_upload</span>
+                        </div>
+                        <h3 class="text-lg font-semibold text-text-main dark:text-white mb-1" data-translate="documents.dragDrop">Drag & drop files here or click to browse</h3>
+                        <p class="text-text-muted dark:text-[#92adc9] text-sm max-w-sm leading-relaxed">
+                            <span data-translate="documents.uploadDesc">Upload bank statements, invoices, or receipts.</span><br/>
+                            <span class="text-xs text-text-muted/70 dark:text-[#92adc9]/70" data-translate="documents.supportedFormats">Supported formats: CSV, PDF, XLS, XLSX, PNG, JPG (Max 10MB)</span>
+                        </p>
+                    </div>
+                </div>
+                
+                <!-- Documents List -->
+                <div class="flex flex-col gap-4">
+                    <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
+                        <h3 class="text-base font-semibold text-text-main dark:text-white" data-translate="documents.yourFiles">Your Files</h3>
+                        <div class="flex flex-col sm:flex-row gap-3 w-full md:w-auto">
+                            <div class="relative flex-1 min-w-[240px]">
+                                <span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-text-muted dark:text-[#92adc9] text-[20px]">search</span>
+                                <input id="search-input" type="text" class="w-full bg-card-light dark:bg-card-dark border border-border-light dark:border-[#233648] rounded-lg py-2 pl-10 pr-4 text-sm text-text-main dark:text-white focus:ring-1 focus:ring-primary focus:border-primary outline-none transition-all placeholder:text-text-muted/50 dark:placeholder:text-[#92adc9]/50" placeholder="Search by name..." data-translate="documents.searchPlaceholder" />
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="bg-card-light dark:bg-card-dark border border-border-light dark:border-[#233648] rounded-xl overflow-hidden shadow-sm">
+                        <div class="overflow-x-auto">
+                            <table class="w-full text-sm text-left">
+                                <thead class="text-xs text-text-muted dark:text-[#92adc9] uppercase bg-slate-50 dark:bg-white/5 border-b border-border-light dark:border-[#233648]">
+                                    <tr>
+                                        <th class="px-6 py-4 font-medium" data-translate="documents.tableDocName">Document Name</th>
+                                        <th class="px-6 py-4 font-medium" data-translate="documents.tableUploadDate">Upload Date</th>
+                                        <th class="px-6 py-4 font-medium" data-translate="documents.tableType">Type</th>
+                                        <th class="px-6 py-4 font-medium" data-translate="documents.tableStatus">Status</th>
+                                        <th class="px-6 py-4 font-medium text-right" data-translate="documents.tableActions">Actions</th>
+                                    </tr>
+                                </thead>
+                                <tbody id="documents-list" class="divide-y divide-border-light dark:divide-[#233648]">
+                                    <!-- Documents will be loaded here -->
+                                </tbody>
+                            </table>
+                        </div>
+                        <div class="bg-slate-50 dark:bg-white/5 border-t border-border-light dark:border-[#233648] p-4 flex items-center justify-between">
+                            <span class="text-sm text-text-muted dark:text-[#92adc9]">
+                                <span data-translate="documents.showing">Showing</span> <span id="page-start" class="text-text-main dark:text-white font-medium">1</span>-<span id="page-end" class="text-text-main dark:text-white font-medium">5</span> <span data-translate="documents.of">of</span> <span id="total-count" class="text-text-main dark:text-white font-medium">0</span> <span data-translate="documents.documents">documents</span>
+                            </span>
+                            <div id="pagination" class="flex gap-2">
+                                <!-- Pagination buttons will be added here -->
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+</div>
+
+<script src="{{ url_for('static', filename='js/documents.js') }}"></script>
+{% endblock %}

backup/fina-1/app/templates/landing.html

@@ -0,0 +1,121 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>FINA - Personal Finance Manager</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <style>
+        .material-icons {
+            font-family: 'Material Icons';
+            font-weight: normal;
+            font-style: normal;
+            font-size: 24px;
+            display: inline-block;
+        }
+    </style>
+    <script>
+        tailwind.config = {
+            darkMode: 'class'
+        }
+    </script>
+</head>
+<body class="bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 min-h-screen text-white">
+    <!-- Navigation -->
+    <nav class="bg-slate-800/50 backdrop-blur-sm border-b border-slate-700/50">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex justify-between h-16">
+                <div class="flex items-center">
+                    <span class="text-2xl font-bold text-blue-400">FINA</span>
+                </div>
+                <div class="flex items-center space-x-4">
+                    <a href="/auth/login" class="text-slate-300 hover:text-blue-400 transition">Login</a>
+                    <a href="/auth/register" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition">Get Started</a>
+                </div>
+            </div>
+        </div>
+    </nav>
+
+    <!-- Hero Section -->
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
+        <div class="text-center">
+            <h1 class="text-5xl font-bold text-white mb-6">
+                Take Control of Your Finances
+            </h1>
+            <p class="text-xl text-slate-300 mb-8 max-w-2xl mx-auto">
+                FINA helps you track expenses, manage budgets, and achieve your financial goals with ease.
+            </p>
+            <div class="flex justify-center space-x-4">
+                <a href="/auth/register" class="bg-blue-600 text-white px-8 py-3 rounded-lg text-lg font-semibold hover:bg-blue-700 transition shadow-lg shadow-blue-500/50">
+                    Start Free
+                </a>
+                <a href="/auth/login" class="bg-slate-700 text-white px-8 py-3 rounded-lg text-lg font-semibold border-2 border-slate-600 hover:bg-slate-600 transition">
+                    Sign In
+                </a>
+            </div>
+        </div>
+
+        <!-- Features -->
+        <div class="grid md:grid-cols-3 gap-8 mt-20">
+            <div class="bg-slate-800/50 backdrop-blur-sm p-8 rounded-xl border border-slate-700/50 hover:border-blue-500/50 transition">
+                <span class="material-icons text-blue-400 text-5xl mb-4">account_balance_wallet</span>
+                <h3 class="text-2xl font-bold mb-3 text-white">Track Expenses</h3>
+                <p class="text-slate-300">Monitor your spending habits and categorize expenses effortlessly.</p>
+            </div>
+            <div class="bg-slate-800/50 backdrop-blur-sm p-8 rounded-xl border border-slate-700/50 hover:border-blue-500/50 transition">
+                <span class="material-icons text-blue-400 text-5xl mb-4">insights</span>
+                <h3 class="text-2xl font-bold mb-3 text-white">Visual Reports</h3>
+                <p class="text-slate-300">Get insights with beautiful charts and detailed financial reports.</p>
+            </div>
+            <div class="bg-slate-800/50 backdrop-blur-sm p-8 rounded-xl border border-slate-700/50 hover:border-blue-500/50 transition">
+                <span class="material-icons text-blue-400 text-5xl mb-4">description</span>
+                <h3 class="text-2xl font-bold mb-3 text-white">Document Management</h3>
+                <p class="text-slate-300">Store and organize receipts and financial documents securely.</p>
+            </div>
+        </div>
+
+        <!-- Additional Features -->
+        <div class="mt-16 bg-slate-800/50 backdrop-blur-sm rounded-xl border border-slate-700/50 p-8">
+            <h2 class="text-3xl font-bold text-center mb-8 text-white">Why Choose FINA?</h2>
+            <div class="grid md:grid-cols-2 gap-6">
+                <div class="flex items-start space-x-3">
+                    <span class="material-icons text-green-400">check_circle</span>
+                    <div>
+                        <h4 class="font-semibold text-white">Secure & Private</h4>
+                        <p class="text-slate-300">Your financial data is encrypted and protected with 2FA.</p>
+                    </div>
+                </div>
+                <div class="flex items-start space-x-3">
+                    <span class="material-icons text-green-400">check_circle</span>
+                    <div>
+                        <h4 class="font-semibold text-white">Easy to Use</h4>
+                        <p class="text-slate-300">Intuitive interface designed for everyone.</p>
+                    </div>
+                </div>
+                <div class="flex items-start space-x-3">
+                    <span class="material-icons text-green-400">check_circle</span>
+                    <div>
+                        <h4 class="font-semibold text-white">Mobile Ready</h4>
+                        <p class="text-slate-300">Access your finances from any device, anywhere.</p>
+                    </div>
+                </div>
+                <div class="flex items-start space-x-3">
+                    <span class="material-icons text-green-400">check_circle</span>
+                    <div>
+                        <h4 class="font-semibold text-white">Free to Use</h4>
+                        <p class="text-slate-300">No hidden fees, completely free personal finance management.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Footer -->
+    <footer class="bg-slate-800/50 backdrop-blur-sm mt-20 py-8 border-t border-slate-700/50">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center text-slate-400">
+            <p>&copy; 2025 FINA. All rights reserved.</p>
+        </div>
+    </footer>
+</body>
+</html>

backup/fina-1/app/templates/reports.html

@@ -0,0 +1,214 @@
+{% extends "base.html" %}
+
+{% block title %}Reports - FINA{% endblock %}
+
+{% block extra_css %}
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
+{% endblock %}
+
+{% block body %}
+<div class="flex h-screen w-full">
+    <!-- Sidebar -->
+    <aside id="sidebar" class="hidden lg:flex w-64 flex-col bg-sidebar-light dark:bg-background-dark border-r border-border-light dark:border-[#233648]">
+        <div class="p-6 flex flex-col h-full justify-between">
+            <div class="flex flex-col gap-8">
+                <div class="flex gap-3 items-center">
+                    <img src="{{ current_user.avatar | avatar_url }}" alt="{{ current_user.username }}" class="size-10 rounded-full border-2 border-primary/30 object-cover">
+                    <div class="flex flex-col">
+                        <h1 class="text-text-main dark:text-white text-base font-bold leading-none">{{ current_user.username }}</h1>
+                        <p class="text-text-muted dark:text-[#92adc9] text-xs font-normal mt-1">
+                            {% if current_user.is_admin %}<span data-translate="user.admin">Admin</span>{% else %}<span data-translate="user.user">User</span>{% endif %}
+                        </p>
+                    </div>
+                </div>
+                
+                <nav class="flex flex-col gap-2">
+                    <a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-text-muted dark:text-[#92adc9] hover:bg-background-light dark:hover:bg-[#233648] hover:text-text-main dark:hover:text-white transition-colors" href="{{ url_for('main.dashboard') }}">
+                        <span class="material-symbols-outlined text-[20px]">dashboard</span>
+                        <span class="text-sm font-medium" data-translate="nav.dashboard">Dashboard</span>
+                    </a>
+                    <a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-text-muted dark:text-[#92adc9] hover:bg-background-light dark:hover:bg-[#233648] hover:text-text-main dark:hover:text-white transition-colors" href="{{ url_for('main.transactions') }}">
+                        <span class="material-symbols-outlined text-[20px]">receipt_long</span>
+                        <span class="text-sm font-medium" data-translate="nav.transactions">Transactions</span>
+                    </a>
+                    <a class="flex items-center gap-3 px-3 py-2.5 rounded-lg bg-primary/20 text-primary border border-primary/10" href="{{ url_for('main.reports') }}">
+                        <span class="material-symbols-outlined text-[20px]">pie_chart</span>
+                        <span class="text-sm font-medium" data-translate="nav.reports">Reports</span>
+                    </a>
+                    <a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-text-muted dark:text-[#92adc9] hover:bg-background-light dark:hover:bg-[#233648] hover:text-text-main dark:hover:text-white transition-colors" href="{{ url_for('main.documents') }}">
+                        <span class="material-symbols-outlined text-[20px]">folder_open</span>
+                        <span class="text-sm font-medium" data-translate="nav.documents">Documents</span>
+                    </a>
+                </nav>
+            </div>
+            
+            <div class="flex flex-col gap-2">
+                <a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-text-muted dark:text-[#92adc9] hover:bg-background-light dark:hover:bg-[#233648] hover:text-text-main dark:hover:text-white transition-colors" href="{{ url_for('main.settings') }}">
+                    <span class="material-symbols-outlined text-[20px]">settings</span>
+                    <span class="text-sm font-medium" data-translate="nav.settings">Settings</span>
+                </a>
+                <a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-text-muted dark:text-[#92adc9] hover:bg-background-light dark:hover:bg-[#233648] hover:text-text-main dark:hover:text-white transition-colors" href="{{ url_for('auth.logout') }}">
+                    <span class="material-symbols-outlined text-[20px]">logout</span>
+                    <span class="text-sm font-medium" data-translate="nav.logout">Log out</span>
+                </a>
+            </div>
+        </div>
+    </aside>
+    
+    <main class="flex-1 flex flex-col h-full overflow-hidden relative bg-background-light dark:bg-background-dark">
+        <header class="h-16 flex items-center justify-between px-6 lg:px-8 border-b border-border-light dark:border-[#233648] bg-card-light/95 dark:bg-background-dark/80 backdrop-blur z-10 shrink-0">
+            <div class="flex items-center gap-4">
+                <button id="menu-toggle" class="lg:hidden text-text-main dark:text-white">
+                    <span class="material-symbols-outlined">menu</span>
+                </button>
+                <h2 class="text-text-main dark:text-white text-lg font-bold" data-translate="reports.title">Financial Reports</h2>
+            </div>
+            <div class="flex items-center gap-3">
+                <button id="export-report-btn" class="flex items-center gap-2 px-3 py-1.5 text-sm font-medium text-text-muted dark:text-[#92adc9] hover:text-text-main dark:hover:text-white hover:bg-background-light dark:hover:bg-white/5 rounded-lg border border-transparent hover:border-border-light dark:hover:border-[#233648] transition-all">
+                    <span class="material-symbols-outlined text-[18px]">download</span>
+                    <span class="hidden sm:inline" data-translate="reports.export">Export CSV</span>
+                </button>
+            </div>
+        </header>
+        
+        <div class="flex-1 overflow-y-auto p-6 lg:p-8 scroll-smooth">
+            <div class="max-w-7xl mx-auto flex flex-col gap-6 pb-10">
+                <!-- Period Selection -->
+                <div class="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-4 bg-card-light dark:bg-card-dark p-4 rounded-xl border border-border-light dark:border-[#233648] shadow-sm">
+                    <div class="flex items-center gap-3">
+                        <h3 class="text-sm font-semibold text-text-muted dark:text-[#92adc9] uppercase tracking-wider" data-translate="reports.analysisPeriod">Analysis Period:</h3>
+                        <div class="flex bg-background-light dark:bg-background-dark rounded-lg p-1 border border-border-light dark:border-[#233648]">
+                            <button class="period-btn active px-3 py-1 text-sm font-medium rounded transition-colors" data-period="30">
+                                <span data-translate="reports.last30Days">Last 30 Days</span>
+                            </button>
+                            <button class="period-btn px-3 py-1 text-sm font-medium rounded transition-colors" data-period="90">
+                                <span data-translate="reports.quarter">Quarter</span>
+                            </button>
+                            <button class="period-btn px-3 py-1 text-sm font-medium rounded transition-colors" data-period="365">
+                                <span data-translate="reports.ytd">YTD</span>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="flex flex-wrap items-center gap-3 w-full lg:w-auto">
+                        <select id="category-filter" class="px-3 py-2 bg-background-light dark:bg-background-dark border border-border-light dark:border-[#233648] rounded-lg text-text-muted dark:text-[#92adc9] hover:text-text-main dark:hover:text-white hover:border-primary/50 transition-colors text-sm w-full lg:w-48">
+                            <option value=""><span data-translate="reports.allCategories">All Categories</span></option>
+                        </select>
+                        <button id="generate-report-btn" class="flex-1 sm:flex-none bg-primary hover:bg-blue-600 text-white h-10 px-4 rounded-lg text-sm font-semibold shadow-lg shadow-primary/20 transition-all flex items-center justify-center gap-2">
+                            <span class="material-symbols-outlined text-[18px]">autorenew</span>
+                            <span data-translate="reports.generate">Generate Report</span>
+                        </button>
+                    </div>
+                </div>
+                
+                <!-- KPI Cards -->
+                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+                    <div class="bg-card-light dark:bg-card-dark p-5 rounded-xl border border-border-light dark:border-[#233648] shadow-sm hover:border-primary/30 transition-colors group">
+                        <div class="flex justify-between items-start mb-4">
+                            <div class="flex flex-col">
+                                <span class="text-text-muted dark:text-[#92adc9] text-xs font-medium uppercase tracking-wider" data-translate="reports.totalSpent">Total Spent</span>
+                                <h4 id="total-spent" class="text-2xl font-bold text-text-main dark:text-white mt-1">$0.00</h4>
+                            </div>
+                            <div class="p-2 bg-primary/10 rounded-lg text-primary group-hover:bg-primary group-hover:text-white transition-colors">
+                                <span class="material-symbols-outlined text-[20px]">payments</span>
+                            </div>
+                        </div>
+                        <div class="flex items-center gap-2 text-xs">
+                            <span id="spent-change" class="flex items-center font-medium px-1.5 py-0.5 rounded"></span>
+                            <span class="text-text-muted dark:text-[#92adc9]" data-translate="reports.vsLastMonth">vs last period</span>
+                        </div>
+                    </div>
+                    
+                    <div class="bg-card-light dark:bg-card-dark p-5 rounded-xl border border-border-light dark:border-[#233648] shadow-sm hover:border-accent/30 transition-colors group">
+                        <div class="flex justify-between items-start mb-4">
+                            <div class="flex flex-col">
+                                <span class="text-text-muted dark:text-[#92adc9] text-xs font-medium uppercase tracking-wider" data-translate="reports.topCategory">Top Category</span>
+                                <h4 id="top-category" class="text-2xl font-bold text-text-main dark:text-white mt-1">None</h4>
+                            </div>
+                            <div class="p-2 bg-accent/10 rounded-lg text-accent group-hover:bg-accent group-hover:text-white transition-colors">
+                                <span class="material-symbols-outlined text-[20px]">category</span>
+                            </div>
+                        </div>
+                        <div class="flex items-center gap-2 text-xs">
+                            <span id="top-category-amount" class="text-text-main dark:text-white font-semibold">$0</span>
+                            <span class="text-text-muted dark:text-[#92adc9]" data-translate="reports.spentThisPeriod">spent this period</span>
+                        </div>
+                    </div>
+                    
+                    <div class="bg-card-light dark:bg-card-dark p-5 rounded-xl border border-border-light dark:border-[#233648] shadow-sm hover:border-warning/30 transition-colors group">
+                        <div class="flex justify-between items-start mb-4">
+                            <div class="flex flex-col">
+                                <span class="text-text-muted dark:text-[#92adc9] text-xs font-medium uppercase tracking-wider" data-translate="reports.avgDaily">Avg. Daily</span>
+                                <h4 id="avg-daily" class="text-2xl font-bold text-text-main dark:text-white mt-1">$0.00</h4>
+                            </div>
+                            <div class="p-2 bg-warning/10 rounded-lg text-warning group-hover:bg-warning group-hover:text-white transition-colors">
+                                <span class="material-symbols-outlined text-[20px]">calendar_today</span>
+                            </div>
+                        </div>
+                        <div class="flex items-center gap-2 text-xs">
+                            <span id="avg-change" class="flex items-center font-medium px-1.5 py-0.5 rounded"></span>
+                            <span class="text-text-muted dark:text-[#92adc9]" data-translate="reports.vsLastMonth">vs last period</span>
+                        </div>
+                    </div>
+                    
+                    <div class="bg-card-light dark:bg-card-dark p-5 rounded-xl border border-border-light dark:border-[#233648] shadow-sm hover:border-success/30 transition-colors group">
+                        <div class="flex justify-between items-start mb-4">
+                            <div class="flex flex-col">
+                                <span class="text-text-muted dark:text-[#92adc9] text-xs font-medium uppercase tracking-wider" data-translate="reports.savingsRate">Savings Rate</span>
+                                <h4 id="savings-rate" class="text-2xl font-bold text-text-main dark:text-white mt-1">0%</h4>
+                            </div>
+                            <div class="p-2 bg-success/10 rounded-lg text-success group-hover:bg-success group-hover:text-white transition-colors">
+                                <span class="material-symbols-outlined text-[20px]">savings</span>
+                            </div>
+                        </div>
+                        <div class="flex items-center gap-2 text-xs">
+                            <span class="text-success flex items-center font-medium bg-success/10 px-1.5 py-0.5 rounded">
+                                <span class="material-symbols-outlined text-[14px] mr-0.5">arrow_upward</span>
+                                <span data-translate="reports.placeholder">Placeholder</span>
+                            </span>
+                            <span class="text-text-muted dark:text-[#92adc9]" data-translate="reports.vsLastMonth">vs last period</span>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Charts Row -->
+                <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+                    <!-- Spending Trend Chart -->
+                    <div class="lg:col-span-2 bg-card-light dark:bg-card-dark p-6 rounded-xl border border-border-light dark:border-[#233648] shadow-sm flex flex-col">
+                        <div class="flex justify-between items-center mb-6">
+                            <h3 class="text-lg font-bold text-text-main dark:text-white" data-translate="reports.spendingTrend">Spending Trend</h3>
+                        </div>
+                        <div class="flex-1 min-h-[300px]">
+                            <canvas id="trend-chart"></canvas>
+                        </div>
+                    </div>
+                    
+                    <!-- Category Breakdown -->
+                    <div class="lg:col-span-1 bg-card-light dark:bg-card-dark p-6 rounded-xl border border-border-light dark:border-[#233648] shadow-sm flex flex-col">
+                        <div class="flex justify-between items-center mb-6">
+                            <h3 class="text-lg font-bold text-text-main dark:text-white" data-translate="reports.categoryBreakdown">Category Breakdown</h3>
+                        </div>
+                        <div class="flex-1 flex items-center justify-center">
+                            <canvas id="category-pie-chart" class="max-h-[300px]"></canvas>
+                        </div>
+                        <div id="category-legend" class="mt-6 grid grid-cols-2 gap-3 text-sm">
+                            <!-- Legend items will be populated by JS -->
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Monthly Comparison -->
+                <div class="bg-card-light dark:bg-card-dark p-6 rounded-xl border border-border-light dark:border-[#233648] shadow-sm">
+                    <div class="flex justify-between items-center mb-6">
+                        <h3 class="text-lg font-bold text-text-main dark:text-white" data-translate="reports.monthlySpending">Monthly Spending</h3>
+                    </div>
+                    <div class="h-64">
+                        <canvas id="monthly-chart"></canvas>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+</div>
+
+<script src="{{ url_for('static', filename='js/reports.js') }}"></script>
+{% endblock %}

backup/fina-1/app/templates/settings.html

@@ -0,0 +1,223 @@
+{% extends "base.html" %}
+
+{% block title %}Settings - FINA{% endblock %}
+
+{% block body %}
+<div class="flex h-screen w-full">
+    <!-- Sidebar -->
+    <aside id="sidebar" class="hidden lg:flex w-64 flex-col bg-sidebar-light dark:bg-background-dark border-r border-border-light dark:border-[#233648]">
+        <div class="p-6 flex flex-col h-full justify-between">
+            <div class="flex flex-col gap-8">
+                <div class="flex gap-3 items-center">
+                    <img id="sidebar-avatar" src="{{ current_user.avatar | avatar_url }}" alt="{{ current_user.username }}" class="size-10 rounded-full border-2 border-primary/30 object-cover">
+                    <div class="flex flex-col">
+                        <h1 class="text-text-main dark:text-white text-base font-bold leading-none">{{ current_user.username }}</h1>
+                        <p class="text-text-muted dark:text-[#92adc9] text-xs font-normal mt-1">
+                            {% if current_user.is_admin %}<span data-translate="user.admin">Admin</span>{% else %}<span data-translate="user.user">User</span>{% endif %}
+                        </p>
+                    </div>
+                </div>
+                
+                <nav class="flex flex-col gap-2">
+                    <a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-text-muted dark:text-[#92adc9] hover:bg-background-light dark:hover:bg-[#233648] hover:text-text-main dark:hover:text-white transition-colors" href="{{ url_for('main.dashboard') }}">
+                        <span class="material-symbols-outlined text-[20px]">dashboard</span>
+                        <span class="text-sm font-medium" data-translate="nav.dashboard">Dashboard</span>
+                    </a>
+                    <a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-text-muted dark:text-[#92adc9] hover:bg-background-light dark:hover:bg-[#233648] hover:text-text-main dark:hover:text-white transition-colors" href="{{ url_for('main.transactions') }}">
+                        <span class="material-symbols-outlined text-[20px]">receipt_long</span>
+                        <span class="text-sm font-medium" data-translate="nav.transactions">Transactions</span>
+                    </a>
+                    <a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-text-muted dark:text-[#92adc9] hover:bg-background-light dark:hover:bg-[#233648] hover:text-text-main dark:hover:text-white transition-colors" href="{{ url_for('main.reports') }}">
+                        <span class="material-symbols-outlined text-[20px]">pie_chart</span>
+                        <span class="text-sm font-medium" data-translate="nav.reports">Reports</span>
+                    </a>
+                    <a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-text-muted dark:text-[#92adc9] hover:bg-background-light dark:hover:bg-[#233648] hover:text-text-main dark:hover:text-white transition-colors" href="{{ url_for('main.documents') }}">
+                        <span class="material-symbols-outlined text-[20px]">folder_open</span>
+                        <span class="text-sm font-medium" data-translate="nav.documents">Documents</span>
+                    </a>
+                </nav>
+            </div>
+            
+            <div class="flex flex-col gap-2">
+                <a class="flex items-center gap-3 px-3 py-2.5 rounded-lg bg-primary/20 text-primary border border-primary/10" href="{{ url_for('main.settings') }}">
+                    <span class="material-symbols-outlined text-[20px]">settings</span>
+                    <span class="text-sm font-medium" data-translate="nav.settings">Settings</span>
+                </a>
+                <a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-text-muted dark:text-[#92adc9] hover:bg-background-light dark:hover:bg-[#233648] hover:text-text-main dark:hover:text-white transition-colors" href="{{ url_for('auth.logout') }}">
+                    <span class="material-symbols-outlined text-[20px]">logout</span>
+                    <span class="text-sm font-medium" data-translate="nav.logout">Log out</span>
+                </a>
+            </div>
+        </div>
+    </aside>
+    
+    <main class="flex-1 flex flex-col h-full overflow-hidden relative bg-background-light dark:bg-background-dark">
+        <header class="h-16 flex items-center justify-between px-6 lg:px-8 border-b border-border-light dark:border-[#233648] bg-card-light/95 dark:bg-background-dark/80 backdrop-blur z-10 shrink-0">
+            <div class="flex items-center gap-4">
+                <button id="menu-toggle" class="lg:hidden text-text-main dark:text-white">
+                    <span class="material-symbols-outlined">menu</span>
+                </button>
+                <h2 class="text-text-main dark:text-white text-lg font-bold" data-translate="settings.title">Settings</h2>
+            </div>
+        </header>
+        
+        <div class="flex-1 overflow-y-auto p-6 lg:p-8 scroll-smooth">
+            <div class="max-w-4xl mx-auto flex flex-col gap-6 pb-10">
+                
+                <!-- Avatar Section -->
+                <div class="bg-card-light dark:bg-card-dark border border-border-light dark:border-[#233648] rounded-xl p-6 shadow-sm">
+                    <h3 class="text-lg font-semibold text-text-main dark:text-white mb-4" data-translate="settings.avatar">Profile Avatar</h3>
+                    
+                    <div class="flex flex-col md:flex-row gap-6">
+                        <div class="flex flex-col items-center gap-4">
+                            <img id="current-avatar" src="{{ current_user.avatar | avatar_url }}" alt="Current Avatar" class="size-24 rounded-full border-4 border-primary/20 object-cover shadow-md">
+                            <input type="file" id="avatar-upload" class="hidden" accept="image/png,image/jpeg,image/jpg,image/gif,image/webp">
+                            <button id="upload-avatar-btn" class="px-4 py-2 bg-primary text-white rounded-lg text-sm font-medium hover:bg-primary/90 transition-colors flex items-center gap-2">
+                                <span class="material-symbols-outlined text-[18px]">upload</span>
+                                <span data-translate="settings.uploadAvatar">Upload Custom</span>
+                            </button>
+                            <p class="text-xs text-text-muted dark:text-[#92adc9] text-center max-w-[200px]" data-translate="settings.avatarDesc">PNG, JPG, GIF, WEBP. Max 20MB</p>
+                        </div>
+                        
+                        <div class="flex-1">
+                            <p class="text-sm text-text-muted dark:text-[#92adc9] mb-3" data-translate="settings.defaultAvatars">Or choose a default avatar:</p>
+                            <div class="grid grid-cols-3 sm:grid-cols-6 gap-3">
+                                <button class="default-avatar-btn p-2 rounded-lg border-2 border-transparent hover:border-primary transition-all" data-avatar="icons/avatars/avatar-1.svg">
+                                    <img src="{{ url_for('static', filename='icons/avatars/avatar-1.svg') }}" alt="Avatar 1" class="w-full h-full rounded-full">
+                                </button>
+                                <button class="default-avatar-btn p-2 rounded-lg border-2 border-transparent hover:border-primary transition-all" data-avatar="icons/avatars/avatar-2.svg">
+                                    <img src="{{ url_for('static', filename='icons/avatars/avatar-2.svg') }}" alt="Avatar 2" class="w-full h-full rounded-full">
+                                </button>
+                                <button class="default-avatar-btn p-2 rounded-lg border-2 border-transparent hover:border-primary transition-all" data-avatar="icons/avatars/avatar-3.svg">
+                                    <img src="{{ url_for('static', filename='icons/avatars/avatar-3.svg') }}" alt="Avatar 3" class="w-full h-full rounded-full">
+                                </button>
+                                <button class="default-avatar-btn p-2 rounded-lg border-2 border-transparent hover:border-primary transition-all" data-avatar="icons/avatars/avatar-4.svg">
+                                    <img src="{{ url_for('static', filename='icons/avatars/avatar-4.svg') }}" alt="Avatar 4" class="w-full h-full rounded-full">
+                                </button>
+                                <button class="default-avatar-btn p-2 rounded-lg border-2 border-transparent hover:border-primary transition-all" data-avatar="icons/avatars/avatar-5.svg">
+                                    <img src="{{ url_for('static', filename='icons/avatars/avatar-5.svg') }}" alt="Avatar 5" class="w-full h-full rounded-full">
+                                </button>
+                                <button class="default-avatar-btn p-2 rounded-lg border-2 border-transparent hover:border-primary transition-all" data-avatar="icons/avatars/avatar-6.svg">
+                                    <img src="{{ url_for('static', filename='icons/avatars/avatar-6.svg') }}" alt="Avatar 6" class="w-full h-full rounded-full">
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Profile Settings -->
+                <div class="bg-card-light dark:bg-card-dark border border-border-light dark:border-[#233648] rounded-xl p-6 shadow-sm">
+                    <h3 class="text-lg font-semibold text-text-main dark:text-white mb-4" data-translate="settings.profile">Profile Information</h3>
+                    
+                    <div class="flex flex-col gap-4">
+                        <div>
+                            <label class="block text-sm font-medium text-text-main dark:text-white mb-2" data-translate="form.username">Username</label>
+                            <input type="text" id="username" value="{{ current_user.username }}" class="w-full bg-background-light dark:bg-background-dark border border-border-light dark:border-[#233648] rounded-lg px-4 py-2.5 text-text-main dark:text-white focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all">
+                        </div>
+                        
+                        <div>
+                            <label class="block text-sm font-medium text-text-main dark:text-white mb-2" data-translate="form.email">Email</label>
+                            <input type="email" id="email" value="{{ current_user.email }}" class="w-full bg-background-light dark:bg-background-dark border border-border-light dark:border-[#233648] rounded-lg px-4 py-2.5 text-text-main dark:text-white focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all">
+                        </div>
+                        
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                            <div>
+                                <label class="block text-sm font-medium text-text-main dark:text-white mb-2" data-translate="form.language">Language</label>
+                                <select id="language" class="w-full bg-background-light dark:bg-background-dark border border-border-light dark:border-[#233648] rounded-lg px-4 py-2.5 text-text-main dark:text-white focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all">
+                                    <option value="en" {% if current_user.language == 'en' %}selected{% endif %}>English</option>
+                                    <option value="ro" {% if current_user.language == 'ro' %}selected{% endif %}>Română</option>
+                                </select>
+                            </div>
+                            
+                            <div>
+                                <label class="block text-sm font-medium text-text-main dark:text-white mb-2" data-translate="form.currency">Currency</label>
+                                <select id="currency" class="w-full bg-background-light dark:bg-background-dark border border-border-light dark:border-[#233648] rounded-lg px-4 py-2.5 text-text-main dark:text-white focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all">
+                                    <option value="USD" {% if current_user.currency == 'USD' %}selected{% endif %}>USD ($)</option>
+                                    <option value="EUR" {% if current_user.currency == 'EUR' %}selected{% endif %}>EUR (€)</option>
+                                    <option value="RON" {% if current_user.currency == 'RON' %}selected{% endif %}>RON (lei)</option>
+                                    <option value="GBP" {% if current_user.currency == 'GBP' %}selected{% endif %}>GBP (£)</option>
+                                </select>
+                            </div>
+                        </div>
+                        
+                        <button id="save-profile-btn" class="w-full md:w-auto px-6 py-2.5 bg-primary text-white rounded-lg font-medium hover:bg-primary/90 transition-colors flex items-center justify-center gap-2">
+                            <span class="material-symbols-outlined text-[18px]">save</span>
+                            <span data-translate="settings.saveProfile">Save Profile</span>
+                        </button>
+                    </div>
+                </div>
+                
+                <!-- Password Change -->
+                <div class="bg-card-light dark:bg-card-dark border border-border-light dark:border-[#233648] rounded-xl p-6 shadow-sm">
+                    <h3 class="text-lg font-semibold text-text-main dark:text-white mb-4" data-translate="settings.changePassword">Change Password</h3>
+                    
+                    <div class="flex flex-col gap-4">
+                        <div>
+                            <label class="block text-sm font-medium text-text-main dark:text-white mb-2" data-translate="settings.currentPassword">Current Password</label>
+                            <input type="password" id="current-password" class="w-full bg-background-light dark:bg-background-dark border border-border-light dark:border-[#233648] rounded-lg px-4 py-2.5 text-text-main dark:text-white focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all">
+                        </div>
+                        
+                        <div>
+                            <label class="block text-sm font-medium text-text-main dark:text-white mb-2" data-translate="settings.newPassword">New Password</label>
+                            <input type="password" id="new-password" class="w-full bg-background-light dark:bg-background-dark border border-border-light dark:border-[#233648] rounded-lg px-4 py-2.5 text-text-main dark:text-white focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all">
+                        </div>
+                        
+                        <div>
+                            <label class="block text-sm font-medium text-text-main dark:text-white mb-2" data-translate="settings.confirmPassword">Confirm New Password</label>
+                            <input type="password" id="confirm-password" class="w-full bg-background-light dark:bg-background-dark border border-border-light dark:border-[#233648] rounded-lg px-4 py-2.5 text-text-main dark:text-white focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all">
+                        </div>
+                        
+                        <button id="change-password-btn" class="w-full md:w-auto px-6 py-2.5 bg-primary text-white rounded-lg font-medium hover:bg-primary/90 transition-colors flex items-center justify-center gap-2">
+                            <span class="material-symbols-outlined text-[18px]">lock_reset</span>
+                            <span data-translate="settings.updatePassword">Update Password</span>
+                        </button>
+                    </div>
+                </div>
+                
+                <!-- 2FA Settings -->
+                <div class="bg-card-light dark:bg-card-dark border border-border-light dark:border-[#233648] rounded-xl p-6 shadow-sm">
+                    <div class="flex items-center justify-between mb-4">
+                        <div>
+                            <h3 class="text-lg font-semibold text-text-main dark:text-white mb-1" data-translate="settings.twoFactor">Two-Factor Authentication</h3>
+                            <p class="text-sm text-text-muted dark:text-[#92adc9]">
+                                {% if current_user.two_factor_enabled %}
+                                <span data-translate="settings.twoFactorEnabled">2FA is currently enabled for your account</span>
+                                {% else %}
+                                <span data-translate="settings.twoFactorDisabled">Add an extra layer of security to your account</span>
+                                {% endif %}
+                            </p>
+                        </div>
+                        <span class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-sm font-medium {% if current_user.two_factor_enabled %}bg-green-100 dark:bg-green-500/20 text-green-700 dark:text-green-400{% else %}bg-slate-100 dark:bg-white/10 text-text-muted dark:text-[#92adc9]{% endif %}">
+                            <span class="material-symbols-outlined text-[16px]">{% if current_user.two_factor_enabled %}verified_user{% else %}lock{% endif %}</span>
+                            <span data-translate="{% if current_user.two_factor_enabled %}settings.enabled{% else %}settings.disabled{% endif %}">{% if current_user.two_factor_enabled %}Enabled{% else %}Disabled{% endif %}</span>
+                        </span>
+                    </div>
+                    
+                    <div class="flex flex-col sm:flex-row gap-3">
+                        {% if current_user.two_factor_enabled %}
+                        <a href="{{ url_for('auth.setup_2fa') }}" class="inline-flex items-center justify-center gap-2 px-4 py-2 bg-background-light dark:bg-background-dark border border-border-light dark:border-[#233648] text-text-main dark:text-white rounded-lg text-sm font-medium hover:bg-slate-100 dark:hover:bg-white/5 transition-colors">
+                            <span class="material-symbols-outlined text-[18px]">refresh</span>
+                            <span data-translate="settings.regenerateCodes">Regenerate Backup Codes</span>
+                        </a>
+                        <form method="POST" action="{{ url_for('auth.disable_2fa') }}" class="inline-block">
+                            <button type="submit" onclick="return confirm('Are you sure you want to disable 2FA?')" class="inline-flex items-center justify-center gap-2 px-4 py-2 bg-red-50 dark:bg-red-500/10 border border-red-200 dark:border-red-500/30 text-red-600 dark:text-red-400 rounded-lg text-sm font-medium hover:bg-red-100 dark:hover:bg-red-500/20 transition-colors">
+                                <span class="material-symbols-outlined text-[18px]">lock_open</span>
+                                <span data-translate="settings.disable2FA">Disable 2FA</span>
+                            </button>
+                        </form>
+                        {% else %}
+                        <a href="{{ url_for('auth.setup_2fa') }}" class="inline-flex items-center justify-center gap-2 px-4 py-2 bg-primary text-white rounded-lg text-sm font-medium hover:bg-primary/90 transition-colors">
+                            <span class="material-symbols-outlined text-[18px]">lock</span>
+                            <span data-translate="settings.enable2FA">Enable 2FA</span>
+                        </a>
+                        {% endif %}
+                    </div>
+                </div>
+                
+            </div>
+        </div>
+    </main>
+</div>
+
+<script src="{{ url_for('static', filename='js/settings.js') }}"></script>
+{% endblock %}

backup/fina-1/app/templates/transactions.html

@@ -0,0 +1,168 @@
+{% extends "base.html" %}
+
+{% block title %}Transactions - FINA{% endblock %}
+
+{% block body %}
+<div class="flex h-screen w-full">
+    <!-- Sidebar (reuse from dashboard) -->
+    <aside id="sidebar" class="hidden lg:flex w-64 flex-col bg-sidebar-light dark:bg-background-dark border-r border-border-light dark:border-[#233648]">
+        <div class="p-6 flex flex-col h-full justify-between">
+            <div class="flex flex-col gap-8">
+                <div class="flex gap-3 items-center">
+                    <img src="{{ current_user.avatar | avatar_url }}" alt="{{ current_user.username }}" class="size-10 rounded-full border-2 border-primary/30 object-cover">
+                    <div class="flex flex-col">
+                        <h1 class="text-text-main dark:text-white text-base font-bold leading-none">{{ current_user.username }}</h1>
+                        <p class="text-text-muted dark:text-[#92adc9] text-xs font-normal mt-1">
+                            {% if current_user.is_admin %}Admin{% else %}User{% endif %}
+                        </p>
+                    </div>
+                </div>
+                
+                <nav class="flex flex-col gap-2">
+                    <a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-text-muted dark:text-[#92adc9] hover:bg-background-light dark:hover:bg-[#233648] hover:text-text-main dark:hover:text-white transition-colors" href="{{ url_for('main.dashboard') }}">
+                        <span class="material-symbols-outlined text-[20px]">dashboard</span>
+                        <span class="text-sm font-medium">Dashboard</span>
+                    </a>
+                    <a class="flex items-center gap-3 px-3 py-2.5 rounded-lg bg-primary/20 text-primary border border-primary/10" href="{{ url_for('main.transactions') }}">
+                        <span class="material-symbols-outlined text-[20px]">receipt_long</span>
+                        <span class="text-sm font-medium">Transactions</span>
+                    </a>
+                    <a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-text-muted dark:text-[#92adc9] hover:bg-background-light dark:hover:bg-[#233648] hover:text-text-main dark:hover:text-white transition-colors" href="{{ url_for('main.reports') }}">
+                        <span class="material-symbols-outlined text-[20px]">pie_chart</span>
+                        <span class="text-sm font-medium">Reports</span>
+                    </a>
+                    <a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-text-muted dark:text-[#92adc9] hover:bg-background-light dark:hover:bg-[#233648] hover:text-text-main dark:hover:text-white transition-colors" href="{{ url_for('main.documents') }}">
+                        <span class="material-symbols-outlined text-[20px]">folder_open</span>
+                        <span class="text-sm font-medium">Documents</span>
+                    </a>
+                </nav>
+            </div>
+            
+            <div class="flex flex-col gap-2">
+                <a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-text-muted dark:text-[#92adc9] hover:bg-background-light dark:hover:bg-[#233648] hover:text-text-main dark:hover:text-white transition-colors" href="{{ url_for('main.settings') }}">
+                    <span class="material-symbols-outlined text-[20px]">settings</span>
+                    <span class="text-sm font-medium">Settings</span>
+                </a>
+                <a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-text-muted dark:text-[#92adc9] hover:bg-background-light dark:hover:bg-[#233648] hover:text-text-main dark:hover:text-white transition-colors" href="{{ url_for('auth.logout') }}">
+                    <span class="material-symbols-outlined text-[20px]">logout</span>
+                    <span class="text-sm font-medium">Log out</span>
+                </a>
+            </div>
+        </div>
+    </aside>
+    
+    <main class="flex-1 flex flex-col h-full overflow-hidden relative bg-background-light dark:bg-background-dark">
+        <header class="h-16 flex items-center justify-between px-6 lg:px-8 border-b border-border-light dark:border-[#233648] bg-card-light/95 dark:bg-background-dark/95 backdrop-blur z-10 shrink-0">
+            <div class="flex items-center gap-4">
+                <button id="menu-toggle" class="lg:hidden text-text-main dark:text-white">
+                    <span class="material-symbols-outlined">menu</span>
+                </button>
+                <h2 class="text-text-main dark:text-white text-lg font-bold">Transactions</h2>
+            </div>
+            <div class="flex items-center gap-3">
+                <button id="export-csv-btn" class="bg-background-light dark:bg-[#1a2632] border border-border-light dark:border-[#233648] text-text-muted dark:text-[#92adc9] hover:text-text-main dark:hover:text-white h-9 px-4 rounded-lg text-sm font-medium transition-colors flex items-center gap-2">
+                    <span class="material-symbols-outlined text-[18px]">download</span>
+                    <span class="hidden sm:inline">Export CSV</span>
+                </button>
+                <button id="import-csv-btn" class="bg-background-light dark:bg-[#1a2632] border border-border-light dark:border-[#233648] text-text-muted dark:text-[#92adc9] hover:text-text-main dark:hover:text-white h-9 px-4 rounded-lg text-sm font-medium transition-colors flex items-center gap-2">
+                    <span class="material-symbols-outlined text-[18px]">upload</span>
+                    <span class="hidden sm:inline">Import CSV</span>
+                </button>
+                <button id="add-expense-btn" class="bg-primary hover:bg-primary/90 text-white h-9 px-4 rounded-lg text-sm font-semibold shadow-lg shadow-primary/20 transition-all flex items-center gap-2">
+                    <span class="material-symbols-outlined text-[18px]">add</span>
+                    <span class="hidden sm:inline">Add Expense</span>
+                </button>
+            </div>
+        </header>
+        
+        <div class="flex-1 overflow-y-auto p-6 lg:p-8 bg-background-light dark:bg-background-dark">
+            <div class="max-w-7xl mx-auto">
+                <!-- Transactions Card -->
+                <div class="bg-card-light dark:bg-card-dark border border-border-light dark:border-[#233648] rounded-xl overflow-hidden">
+                    <!-- Header with Search and Filters -->
+                    <div class="p-6 border-b border-border-light dark:border-[#233648]">
+                        <div class="flex flex-col sm:flex-row gap-4 justify-between items-start sm:items-center">
+                            <!-- Search Bar -->
+                            <div class="relative flex-1 max-w-md">
+                                <span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-text-muted dark:text-[#92adc9] text-[20px]">search</span>
+                                <input 
+                                    type="text" 
+                                    id="filter-search" 
+                                    placeholder="Search transactions..." 
+                                    class="w-full bg-background-light dark:bg-[#111a22] border border-border-light dark:border-[#233648] rounded-lg pl-10 pr-4 py-2 text-text-main dark:text-white text-sm placeholder-text-muted dark:placeholder-[#5f7a96] focus:outline-none focus:ring-2 focus:ring-primary/50"
+                                >
+                            </div>
+                            
+                            <!-- Filter Buttons -->
+                            <div class="flex flex-wrap gap-2">
+                                <button id="date-filter-btn" class="flex items-center gap-2 px-3 py-2 bg-background-light dark:bg-[#111a22] border border-border-light dark:border-[#233648] rounded-lg text-text-muted dark:text-[#92adc9] hover:text-text-main dark:hover:text-white hover:border-primary/50 transition-colors text-sm">
+                                    <span class="material-symbols-outlined text-[18px]">calendar_today</span>
+                                    <span>Date</span>
+                                </button>
+                                <select id="filter-category" class="px-3 py-2 bg-background-light dark:bg-[#111a22] border border-border-light dark:border-[#233648] rounded-lg text-text-muted dark:text-[#92adc9] hover:text-text-main dark:hover:text-white hover:border-primary/50 transition-colors text-sm">
+                                    <option value="">Category</option>
+                                </select>
+                                <button id="more-filters-btn" class="flex items-center gap-2 px-3 py-2 bg-background-light dark:bg-[#111a22] border border-border-light dark:border-[#233648] rounded-lg text-text-muted dark:text-[#92adc9] hover:text-text-main dark:hover:text-white hover:border-primary/50 transition-colors text-sm">
+                                    <span class="material-symbols-outlined text-[18px]">tune</span>
+                                    <span>Filters</span>
+                                </button>
+                            </div>
+                        </div>
+                        
+                        <!-- Advanced Filters (Hidden by default) -->
+                        <div id="advanced-filters" class="hidden mt-4 pt-4 border-t border-border-light dark:border-[#233648]">
+                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                                <div>
+                                    <label class="text-text-muted dark:text-[#92adc9] text-sm mb-2 block">Start Date</label>
+                                    <input type="date" id="filter-start-date" class="w-full bg-background-light dark:bg-[#111a22] border border-border-light dark:border-[#233648] rounded-lg px-4 py-2 text-text-main dark:text-white text-sm">
+                                </div>
+                                <div>
+                                    <label class="text-text-muted dark:text-[#92adc9] text-sm mb-2 block">End Date</label>
+                                    <input type="date" id="filter-end-date" class="w-full bg-background-light dark:bg-[#111a22] border border-border-light dark:border-[#233648] rounded-lg px-4 py-2 text-text-main dark:text-white text-sm">
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <!-- Transactions Table -->
+                    <div class="overflow-x-auto">
+                        <table class="w-full">
+                            <thead class="bg-background-light dark:bg-[#0f1419]">
+                                <tr class="border-b border-border-light dark:border-[#233648]">
+                                    <th class="p-5 text-left text-text-muted dark:text-[#92adc9] text-sm font-medium">Transaction</th>
+                                    <th class="p-5 text-left text-text-muted dark:text-[#92adc9] text-sm font-medium">Category</th>
+                                    <th class="p-5 text-left text-text-muted dark:text-[#92adc9] text-sm font-medium">Date</th>
+                                    <th class="p-5 text-left text-text-muted dark:text-[#92adc9] text-sm font-medium">Payment</th>
+                                    <th class="p-5 text-right text-text-muted dark:text-[#92adc9] text-sm font-medium">Amount</th>
+                                    <th class="p-5 text-center text-text-muted dark:text-[#92adc9] text-sm font-medium">Status</th>
+                                    <th class="p-5 text-right text-text-muted dark:text-[#92adc9] text-sm font-medium">Actions</th>
+                                </tr>
+                            </thead>
+                            <tbody id="transactions-list" class="divide-y divide-border-light dark:divide-[#233648]">
+                                <!-- Transactions will be loaded here -->
+                            </tbody>
+                        </table>
+                    </div>
+                    
+                    <!-- Pagination Footer -->
+                    <div class="p-4 border-t border-border-light dark:border-[#233648] flex flex-col sm:flex-row gap-4 justify-between items-center bg-card-light dark:bg-card-dark">
+                        <span class="text-sm text-text-muted dark:text-[#92adc9]">
+                            Showing <span id="page-start" class="text-text-main dark:text-white font-medium">1</span> to 
+                            <span id="page-end" class="text-text-main dark:text-white font-medium">10</span> of 
+                            <span id="total-count" class="text-text-main dark:text-white font-medium">0</span> results
+                        </span>
+                        <div id="pagination" class="flex gap-2">
+                            <!-- Pagination buttons will be added here -->
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+</div>
+
+<!-- Hidden file input for CSV import -->
+<input type="file" id="csv-file-input" accept=".csv" class="hidden">
+
+<script src="{{ url_for('static', filename='js/transactions.js') }}"></script>
+{% endblock %}

backup/fina-1/app/utils.py

@@ -0,0 +1,41 @@
+from app import db
+from app.models import Category
+
+def create_default_categories(user_id):
+    """Create default categories for a new user"""
+    default_categories = [
+        {'name': 'Food & Dining', 'color': '#ff6b6b', 'icon': 'restaurant'},
+        {'name': 'Transportation', 'color': '#4ecdc4', 'icon': 'directions_car'},
+        {'name': 'Shopping', 'color': '#95e1d3', 'icon': 'shopping_bag'},
+        {'name': 'Entertainment', 'color': '#f38181', 'icon': 'movie'},
+        {'name': 'Bills & Utilities', 'color': '#aa96da', 'icon': 'receipt'},
+        {'name': 'Healthcare', 'color': '#fcbad3', 'icon': 'medical_services'},
+        {'name': 'Education', 'color': '#a8d8ea', 'icon': 'school'},
+        {'name': 'Other', 'color': '#92adc9', 'icon': 'category'}
+    ]
+    
+    for cat_data in default_categories:
+        category = Category(
+            name=cat_data['name'],
+            color=cat_data['color'],
+            icon=cat_data['icon'],
+            user_id=user_id
+        )
+        db.session.add(category)
+    
+    db.session.commit()
+
+
+def format_currency(amount, currency='USD'):
+    """Format amount with currency symbol"""
+    symbols = {
+        'USD': '$',
+        'EUR': '€',
+        'GBP': '£',
+        'RON': 'lei'
+    }
+    symbol = symbols.get(currency, currency)
+    
+    if currency == 'RON':
+        return f"{amount:,.2f} {symbol}"
+    return f"{symbol}{amount:,.2f}"