createing table balance:
1. Table for Recording Balance Changes:
You can create a balance table like this to store the changes:

sql
Copy
Edit
CREATE TABLE IF NOT EXISTS `balance` (
  `balance_id` INT NOT NULL AUTO_INCREMENT,
  `user_id` INT NOT NULL,
  `full_name` VARCHAR(100) NOT NULL,
  `total_balance` DECIMAL(12, 2) NOT NULL,
  `last_updated` DATETIME DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`balance_id`),
  FOREIGN KEY (`user_id`) REFERENCES `users`(`user_id`) ON DELETE CASCADE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;







2. Create Trigger for Automatic Record Insertion:
Now, you’ll need to create a trigger that fires whenever the balance in the accounts table is updated. The trigger will insert the updated balance into the balance table along with the user information.

sql
Copy
Edit
DELIMITER $$

CREATE TRIGGER `after_balance_update`
AFTER UPDATE ON `accounts`
FOR EACH ROW
BEGIN
    DECLARE user_full_name VARCHAR(100);

    -- Retrieve the full name from the users table
    SELECT full_name INTO user_full_name FROM users WHERE user_id = NEW.user_id;

    -- Insert the new balance into the balance table
    INSERT INTO `balance` (`user_id`, `full_name`, `total_balance`, `last_updated`)
    VALUES (NEW.user_id, user_full_name, NEW.balance, NOW());
END $$

DELIMITER ;
Explanation:
Trigger: This trigger runs after an update to the accounts table. It will insert the new balance into the balance table after each update.

full_name: The trigger fetches the full_name from the users table based on the user_id.

last_updated: This is automatically set to the current timestamp when a balance change occurs.

NEW keyword: Refers to the updated values in the accounts table.






Transaction css:
<style>/* General Reset and Fonts */
/* General Reset and Fonts */
/*———— Global & Reset ————*/
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  background-color: #f4f7fe;
  color: #2e3a59;
  opacity: 0;
  animation: fadeIn 0.8s ease-out forwards;
}

/*———— Keyframe Animations ————*/
@keyframes fadeIn {
  to { opacity: 1; }
}
@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}

/*———— Container & Layout ————*/
.container {
  padding: 20px 40px;
  max-width: 1200px;
  margin: auto;
  animation: slideUp 0.6s ease-out 0.2s both;
}

/*———— Header ————*/
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding-bottom: 20px;
}
header h1 {
  font-size: 28px;
  font-weight: 600;
  margin: 0;
  animation: slideUp 0.6s ease-out 0.4s both;
}
.logout {
  margin-top: 10px;
  text-decoration: none;
  color: #fff;
  background-color: #4a6cf7;
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 500;
  transition: background-color 0.3s, transform 0.3s;
  animation: slideUp 0.6s ease-out 0.5s both;
}
.logout:hover {
  background-color: #3a57e8;
  transform: translateY(-2px);
}

/*———— Nav ————*/
.dashboard-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 30px;
  border-bottom: 2px solid #e0e6f7;
  padding-bottom: 10px;
  animation: slideUp 0.6s ease-out 0.6s both;
}
.dashboard-nav a {
  position: relative;
  text-decoration: none;
  color: #5c6b8a;
  font-weight: 500;
  padding: 10px 14px;
  border-radius: 10px;
  transition: background-color 0.2s, color 0.2s;
}
.dashboard-nav a.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 10%;
  width: 80%;
  height: 3px;
  background: #4a6cf7;
  border-radius: 2px;
  animation: fadeIn 0.3s ease-out 0.8s both;
}
.dashboard-nav a:hover,
.dashboard-nav a.active {
  background-color: #e6ecff;
  color: #4a6cf7;
}

/*———— Cards & Charts ————*/
.weekly-activity-chart,
.content {
  background-color: #fff;
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 30px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.06);
  transform: translateY(20px);
  opacity: 0;
  animation: slideUp 0.6s ease-out 0.7s both;
}
.weekly-activity-chart h2,
.content h2 {
  font-size: 20px;
  margin: 0 0 20px;
  position: relative;
}
.weekly-activity-chart h2::after,
.content h2::after {
  content: '';
  display: block;
  width: 50px;
  height: 4px;
  background: #4a6cf7;
  border-radius: 2px;
  margin-top: 8px;
}

/*———— Table ————*/
.table-wrapper {
  overflow-x: auto;
}
.transactions-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px;
  transform: translateY(20px);
  opacity: 0;
  animation: slideUp 0.6s ease-out 0.8s both;
}
.transactions-table th,
.transactions-table td {
  padding: 12px 16px;
  text-align: left;
}
.transactions-table th {
  background-color: #f1f5ff;
  color: #6b7a99;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.transactions-table tr:nth-child(even) {
  background-color: #f9fbff;
}
.transactions-table td {
  font-size: 15px;
  border-bottom: 1px solid #e8edf5;
  transition: background-color 0.2s;
}
.transactions-table tbody tr:hover td {
  background-color: #f0f4ff;
}
.text-success {
  color: #20c997;
  font-weight: 600;
}
.text-danger {
  color: #f44336;
  font-weight: 600;
}

/*———— Responsive ————*/
@media (max-width: 1024px) {
  .container { padding: 15px 20px; }
  header h1 { font-size: 24px; }
  .weekly-activity-chart,
  .content { padding: 20px; }
}
@media (max-width: 768px) {
  header { flex-direction: column; align-items: flex-start; }
  .dashboard-nav { gap: 8px; }
  .weekly-activity-chart,
  .content { padding: 16px; }
}
@media (max-width: 480px) {
  .container { padding: 10px 15px; }
  header h1 { font-size: 20px; margin-bottom: 10px; }
  .logout { width: 100%; text-align: center; }
  .dashboard-nav a { padding: 8px 12px; font-size: 14px; }
  .weekly-activity-chart h2,
  .content h2 { font-size: 18px; }
  .transactions-table th,
  .transactions-table td {
    padding: 8px 10px;
    font-size: 13px;
  }
}

</style>




here's my current code:

profile.php: 
<?php
// Enable error reporting for debugging purposes
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

require_once '../includes/db.php';
require_once '../includes/functions.php';

redirectIfNotLoggedIn();

$userId = $_SESSION['user_id'];
$error = '';
$success = '';

$userId = $_SESSION['user_id'];
$stmt = $pdo->prepare("SELECT profile_picture FROM users WHERE user_id = ?");
$stmt->execute([$userId]);
$user = $stmt->fetch();

$profilePic = $user['profile_picture'] ? '../uploads/' . $user['profile_picture'] : '../assets/images/default-avatar.png';
// Fetch user's profile information

// Fetch user's loans
$stmt = $pdo->prepare("
    SELECT * FROM loans 
    WHERE user_id = ? 
    ORDER BY created_at DESC
");
$stmt->execute([$userId]);
$loans = $stmt->fetchAll();

// Fetch balance from the accounts table (optional - not currently used in this page)
$accountStmt = $pdo->prepare("SELECT balance FROM accounts WHERE user_id = ?");
$accountStmt->execute([$userId]);
$account = $accountStmt->fetch();
$balance = $account ? $account['balance'] : 0;

// Generate and store CSRF token to prevent double submissions
if (empty($_SESSION['loan_token'])) {
    $_SESSION['loan_token'] = bin2hex(random_bytes(32));
}
$token = $_SESSION['loan_token'];

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    if (!isset($_POST['token']) || $_POST['token'] !== $_SESSION['loan_token']) {
        $error = "Duplicate submission or invalid token.";
    } else {
        // Sanitize and validate input
        $amount = filter_var($_POST['amount'], FILTER_SANITIZE_NUMBER_FLOAT, FILTER_FLAG_ALLOW_FRACTION);
        $term = intval($_POST['term']);
        $purpose = htmlspecialchars($_POST['purpose'], ENT_QUOTES, 'UTF-8');

        if ($amount < 100) {
            $error = "Minimum loan amount is $100";
        } elseif ($term < 1 || $term > 60) {
            $error = "Loan term must be between 1 and 60 months";
        } else {
            // Calculate interest rate
            $interestRate = 5.0;
            if ($amount > 10000) $interestRate = 4.5;
            if ($term > 36) $interestRate += 1.0;

            try {
                $stmt = $pdo->prepare("
                    INSERT INTO loans (user_id, amount, interest_rate, term_months, status, purpose)
                    VALUES (?, ?, ?, ?, 'pending', ?)
                ");
                $stmt->execute([$userId, $amount, $interestRate, $term, $purpose]);

                // Regenerate token to prevent double submissions
                $_SESSION['loan_token'] = bin2hex(random_bytes(32));

                $success = "Loan application submitted successfully!";
            } catch (Exception $e) {
                $error = "Failed to submit loan application: " . $e->getMessage();
            }
        }
    }
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SecureBank - Loans</title>
    <link rel="stylesheet" href="../assets/css/main.css">
    <link rel="stylesheet" href="../assets/css/loans.css">

    <!-- NAVIGATION EFFECTS -->
    <script src="../assets/js/navhover.js"></script>

    <style>
    .profile-picture {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 2px solid #ccc;
}
/* Modal Background (overlay) */
.modal {
    display: none;
    position: fixed;
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    overflow: auto; /* Enable scrolling if necessary */
}

/* Modal Dialog Box */
.modal-dialog {
    position: relative;
    top: 10%;
    margin: auto;
    width: 80%; /* Modal width */
    max-width: 900px; /* Maximum width to prevent large images from making it too wide */
}

/* Modal Content */
.modal-content {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    position: relative;
}

/* Close Button (X) */
.close {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* Modal Image */
.modal-body img {
    max-width: 100%; /* Make sure image doesn't overflow */
    max-height: 80vh; /* Adjust this value to control the image size */
    display: block;
    margin: 0 auto;
}

/* Back Button */
#backButton {
    margin-left: 10px;
    background-color: #007bff;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
}
#backButton:hover {
    background-color: #0056b3;
}



</style>
</head>

<body>
    <div class="wrapper">

        <aside>
                        
            <img src="../assets/images/Logo-color.png" alt="SecureBank Logo" class="logo-container">

            <nav>
                    <a href="dashboard.php" class="btn">
                        <img 
                        src="../assets/images/inactive-dashboard.png" 
                        alt="dashboard-logo" 
                        class="nav-icon"
                        data-default="../assets/images/inactive-dashboard.png"
                        data-hover="../assets/images/hover-dashboard.png"
                        > 
                        Dashboard
                    </a>

                    <a href="deposit.php" class="btn">
                        <img 
                        src="../assets/images/inactive-deposit.png" 
                        alt="deposit-logo" 
                        class="nav-icon"
                        data-default="../assets/images/inactive-deposit.png"
                        data-hover="../assets/images/hover-deposit.png"
                        > 
                        Deposit
                    </a>

                    <a href="withdraw.php" class="btn">
                        <img 
                        src="../assets/images/inactive-withdraw.png" 
                        alt="withdraw-logo" 
                        class="nav-icon"
                        data-default="../assets/images/inactive-withdraw.png"
                        data-hover="../assets/images/hover-withdraw.png"
                        > 
                        Withdraw
                    </a>

                    <a href="transfer.php" class="btn">
                        <img 
                        src="../assets/images/inactive-transfer.png" 
                        alt="transfer-logo" 
                        class="nav-icon"
                        data-default="../assets/images/inactive-transfer.png"
                        data-hover="../assets/images/hover-transfer.png"
                        > 
                        Transfer
                    </a>

                    <a href="transactions.php" class="btn">
                        <img 
                        src="../assets/images/inactive-transaction.png" 
                        alt="transactions-logo" 
                        class="nav-icon"
                        data-default="../assets/images/inactive-transaction.png"
                        data-hover="../assets/images/hover-transaction.png"
                        > 
                        Transactions
                    </a>

                    <a href="investment.php" class="btn">
                        <img 
                        src="../assets/images/inactive-investment.png" 
                        alt="investment-logo" 
                        class="nav-icon"
                        data-default="../assets/images/inactive-investment.png"
                        data-hover="../assets/images/hover-investment.png"
                        > 
                        Investment
                    </a>

                    <a href="loan.php" class="btn dash-text">
                        <img 
                        src="../assets/images/hover-loans.png" 
                        alt="loans-logo" 
                        class="nav-icon"
                        data-default="../assets/images/hover-loans.png"
                        data-hover="../assets/images/hover-loans.png"
                        > 
                        Loans
                    </a>
                </nav>       

            <div class="logout-cont">
                <a href="../logout.php" class="logout">Logout</a>
            </div>
        </aside>
    
        <main class="container">
            <header>
                <h1>Profile Information</h1>
                <a href="../logout.php" class="logout">Logout</a>
            </header>

            <main class="content">
                 <form action="upload_picture.php" method="POST" enctype="multipart/form-data">
                    <label>Upload Profile Picture:</label>
                    <input type="file" name="profile_picture" accept="image/*" required>
                    <button type="submit">Upload</button>
                </form>

            <img src="<?= $profilePic ?>" alt="Profile Picture" class="profile-picture" data-toggle="modal" data-target="#imageModal">

               <!-- Modal -->
                <div id="imageModal" class="modal" tabindex="-1" role="dialog" aria-labelledby="imageModalLabel" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                                <button type="button" class="btn btn-secondary" id="backButton">Back</button>
                            </div>
                            <div class="modal-body">
                                <img src="<?= $profilePic ?>" alt="Profile Picture" class="img-fluid">
                            </div>
                        </div>
                    </div>
                </div>



        </main>
    </div>

    <script>
    document.querySelectorAll('[data-toggle="modal"]').forEach(item => {
    item.addEventListener('click', function() {
        const modal = document.getElementById('imageModal');
        modal.style.display = "block";
        });
    });

        document.querySelector('.close').addEventListener('click', function() {
            const modal = document.getElementById('imageModal');
            modal.style.display = "none";
        });

        document.getElementById('backButton').addEventListener('click', function() {
            const modal = document.getElementById('imageModal');
            modal.style.display = "none";
        });

        // Close modal when clicking outside of the modal
        window.onclick = function(event) {
            const modal = document.getElementById('imageModal');
            if (event.target === modal) {
                modal.style.display = "none";
            }
        };


</script>
</body>
</html>


upload_profile.php:
<?php
session_start();
require_once '../includes/db.php';

if (!isset($_SESSION['user_id'])) {
    die("Unauthorized access.");
}

$userId = $_SESSION['user_id'];

if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_FILES['profile_picture'])) {
    $file = $_FILES['profile_picture'];
    $allowed = ['image/jpeg', 'image/jpg', 'image/png'];

    if (in_array($file['type'], $allowed) && $file['size'] <= 2 * 1024 * 1024) {
        $ext = pathinfo($file['name'], PATHINFO_EXTENSION);
        $newName = 'profile_' . $userId . '_' . time() . '.' . $ext;
        $uploadPath = '../uploads/' . $newName;

        if (!is_dir('../uploads')) {
            mkdir('../uploads', 0777, true);
        }

        if (move_uploaded_file($file['tmp_name'], $uploadPath)) {
            $stmt = $pdo->prepare("UPDATE users SET profile_picture = ? WHERE user_id = ?");
            $stmt->execute([$newName, $userId]);

            header("Location: profile.php?upload=success");
            exit;
        } else {
            echo "Failed to move uploaded file.";
        }
    } else {
        echo "Invalid file type or size too large.";
    }
}
?>
 

 how can i make an input text box that will reflect all of the profile info of a user, that's come from this database data?  where in when he click an edit button he have an option to edit all of it's info and click save it and it wwill automatically also update on the database.?