improve this and upgrade it and ui ux and provide the full complete adjusted code :

<?php
session_start();
include 'functions.php';

if (isset($_GET['logout'])) {
    session_destroy();
    header("Location: dashboard_admin.php");
    exit();
}

$message = '';

if ($_SERVER['REQUEST_METHOD'] == 'POST' && !isset($_SESSION['admin_logged_in'])) {
    $username = $_POST['username'];
    $password = $_POST['password'];

    if (adminLogin($username, $password)) {
        $_SESSION['admin_logged_in'] = true;
        header("Location: dashboard_admin.php");
        exit();
    } else {
        $error = "Invalid login credentials.";
    }
}

if (!isset($_SESSION['admin_logged_in']) || !$_SESSION['admin_logged_in']) {
    echo renderAdminLogin(isset($error) ? $error : '');
    exit();
}

$users = [];
$cities = [];

fetchData($users, $cities);

function fetchData(&$users, &$cities) {
    global $conn;
    $users = $conn->query("SELECT users.id, users.username, users.approved, cities.name AS city_name FROM users JOIN cities ON users.city_id = cities.id")->fetch_all(MYSQLI_ASSOC);
    $cities = getCities();
}

if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['action'])) {
    $response = ['status' => 'error', 'message' => 'Invalid request'];

    header('Content-Type: application/json');

    $action = $_POST['action'];

    if ($action == 'approve_user') {
        $user_id = intval($_POST['user_id']);
        if (approveUser($user_id)) {
            $response = ['status' => 'success', 'message' => 'User approved successfully.'];
        } else {
            $response = ['status' => 'error', 'message' => 'Failed to approve user.'];
        }
    }

    if ($action == 'delete_user') {
        $user_id = intval($_POST['user_id']);
        if (deleteUser($user_id)) {
            $response = ['status' => 'success', 'message' => 'User deleted successfully.'];
        } else {
            $response = ['status' => 'error', 'message' => 'Failed to delete user.'];
        }
    }

    if ($action == 'add_city') {
        $city_name = $_POST['city_name'];
        if (!empty($city_name)) {
            $response = ['status' => 'success', 'message' => addCity($city_name)];
        }
    } elseif ($action == 'edit_city') {
        $city_id = intval($_POST['city_id']);
        $city_name = $_POST['city_name'];
        if (!empty($city_name)) {
            if (editCity($city_id, $city_name)) {
                $response = ['status' => 'success', 'message' => 'City updated successfully.'];
            } else {
                $response = ['status' => 'error', 'message' => 'Failed to update city.'];
            }
        }
    } elseif ($action == 'delete_city') {
        $city_id = intval($_POST['city_id']);
        if (deleteCity($city_id)) {
            $response = ['status' => 'success', 'message' => 'City deleted successfully.'];
        } else {
            $response = ['status' => 'error', 'message' => 'Failed to delete city.'];
        }
    }

    echo json_encode($response);
    exit();
}

function renderAdminLogin($error) {
    return '
    <div class="container d-flex align-items-center justify-content-center min-vh-100">
        <div class="card shadow-sm w-100" style="max-width: 420px;">
            <div class="card-body">
                <h3 class="card-title text-center mb-4">Admin Login</h3>
                '.(isset($error) ? "<div class='alert alert-danger'>{$error}</div>" : '').'
                <form method="POST">
                    <div class="form-group">
                        <label for="username">Username</label>
                        <input type="text" class="form-control" id="username" name="username" required>
                    </div>
                    <div class="form-group">
                        <label for="password">Password</label>
                        <input type="password" class="form-control" id="password" name="password" required>
                    </div>
                    <button type="submit" class="btn btn-primary btn-block">Login</button>
                </form>
            </div>
        </div>
    </div>';
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Admin Dashboard</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="#">Admin Dashboard</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a class="nav-link" href="?logout">Logout</a>
            </li>
        </ul>
    </div>
</nav>

<div class="container mt-5">
    <div id="message" class="alert" style="display: none;"></div>

    <div class="card mb-4">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h3>Manage Users</h3>
        </div>
        <div class="card-body table-responsive">
            <table class="table table-striped table-hover">
                <thead class="thead-dark">
                    <tr>
                        <th>Username</th>
                        <th>City</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody id="users-table">
                <?php foreach ($users as $user) : ?>
                    <tr>
                        <td><?php echo htmlspecialchars($user['username']); ?></td>
                        <td><?php echo htmlspecialchars($user['city_name']); ?></td>
                        <td>
                            <span class="badge badge-<?php echo $user['approved'] ? 'success' : 'warning'; ?>">
                                <?php echo $user['approved'] ? 'Approved' : 'Pending'; ?>
                            </span>
                        </td>
                        <td>
                            <?php if (!$user['approved']): ?>
                                <button class="btn btn-success btn-sm" onclick="approveUser(<?php echo $user['id']; ?>)">
                                    <i class="fas fa-check"></i> Approve
                                </button>
                            <?php endif; ?>
                            <button class="btn btn-danger btn-sm" onclick="deleteUser(<?php echo $user['id']; ?>)">
                                <i class="fas fa-trash"></i> Delete
                            </button>
                        </td>
                    </tr>
                <?php endforeach; ?>
                </tbody>
            </table>
        </div>
    </div>

    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h3>Manage Cities</h3>
            <button class="btn btn-primary" data-toggle="modal" data-target="#addCityModal">
                <i class="fas fa-plus"></i> Add City
            </button>
        </div>
        <div class="card-body table-responsive">
            <table class="table table-striped table-hover">
                <thead class="thead-dark">
                    <tr>
                        <th>City Name</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody id="cities-table">
                <?php foreach ($cities as $city) : ?>
                    <tr>
                        <td><?php echo htmlspecialchars($city['name']); ?></td>
                        <td>
                            <button class="btn btn-warning btn-sm" data-toggle="modal" data-target="#editCityModal"
                                    data-id="<?php echo $city['id']; ?>" data-name="<?php echo htmlspecialchars($city['name']); ?>">
                                <i class="fas fa-edit"></i> Edit
                            </button>
                            <button class="btn btn-danger btn-sm" onclick="deleteCity(<?php echo $city['id']; ?>)">
                                <i class="fas fa-trash"></i> Delete
                            </button>
                        </td>
                    </tr>
                <?php endforeach; ?>
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="modal fade" id="addCityModal" tabindex="-1" aria-labelledby="addCityModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="POST" id="add-city-form">
                <div class="modal-header">
                    <h5 class="modal-title" id="addCityModalLabel">Add New City</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="city_name">City Name</label>
                        <input type="text" class="form-control" id="city_name" name="city_name" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" onclick="addCity()">Add City</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="editCityModal" tabindex="-1" aria-labelledby="editCityModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="POST" id="edit-city-form">
                <div class="modal-header">
                    <h5 class="modal-title" id="editCityModalLabel">Edit City</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="editCityName">City Name</label>
                        <input type="text" class="form-control" name="city_name" id="editCityName" required>
                        <input type="hidden" id="editCityId" name="city_id">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" onclick="saveCityChanges()">Save changes</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
<script>
function displayMessage(type, message) {
    $('#message').removeClass('alert-success alert-danger').addClass('alert-' + type).text(message).slideDown();
    setTimeout(() => $('#message').slideUp(), 3000);
}

function updateContent() {
    $.get('dashboard_admin.php', function(data) {
        $('#users-table').html($(data).find('#users-table').html());
        $('#cities-table').html($(data).find('#cities-table').html());
    });
}

function approveUser(userId) {
    $.post('dashboard_admin.php', { action: 'approve_user', user_id: userId }, function(response) {
        displayMessage(response.status, response.message);
        updateContent();
    }, 'json');
}

function deleteUser(userId) {
    $.post('dashboard_admin.php', { action: 'delete_user', user_id: userId }, function(response) {
        displayMessage(response.status, response.message);
        updateContent();
    }, 'json');
}

function addCity() {
    const cityName = $('#city_name').val();
    $.post('dashboard_admin.php', { action: 'add_city', city_name: cityName }, function(response) {
        displayMessage(response.status, response.message);
        $('#addCityModal').modal('hide');
        $('#add-city-form')[0].reset();
        updateContent();
    }, 'json');
}

function saveCityChanges() {
    const cityId = $('#editCityId').val();
    const cityName = $('#editCityName').val();
    $.post('dashboard_admin.php', { action: 'edit_city', city_id: cityId, city_name: cityName }, function(response) {
        displayMessage(response.status, response.message);
        $('#editCityModal').modal('hide');
        updateContent();
    }, 'json');
}

function deleteCity(cityId) {
    $.post('dashboard_admin.php', { action: 'delete_city', city_id: cityId }, function(response) {
        displayMessage(response.status, response.message);
        updateContent();
    }, 'json');
}

$('#editCityModal').on('show.bs.modal', function(event) {
    const button = $(event.relatedTarget);
    const cityId = button.data('id');
    const cityName = button.data('name');
    $(this).find('#editCityId').val(cityId);
    $(this).find('#editCityName').val(cityName);
});
</script>
</body>
</html>