task_list.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Task List</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
</head>
<body>
<?php

// Include header
include('header.php');
?>
    <div class="container">
        <div class="row">
            <!-- Include Left Navigation -->
            <?php include('nav.php'); ?>

            <!-- Main Content Section -->
            <div class="col-md-9">
                <h2>Task List</h2>
                <div class="mb-3 text-right">
                    <a href="add_task.php" class="btn btn-success">Add Task</a>
                </div>

                <table id="taskTable" class="table table-striped">
                    <thead>
                        <tr>
                            <th>Task Name</th>
                            <th>Description</th>
                            <th>Due Date</th>
                            <th>Created At</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php if ($result && mysqli_num_rows($result) > 0): ?>
                            <?php while ($task = mysqli_fetch_assoc($result)): ?>
                                <tr>
                                    <td><?php echo htmlspecialchars($task['task_name']); ?></td>
                                    <td><?php echo htmlspecialchars($task['task_description']); ?></td>
                                    <td><?php echo htmlspecialchars($task['due_date']); ?></td>
                                    <td><?php echo htmlspecialchars($task['created_at']); ?></td>
                                    <td>
                                        <a href="edit_task.php?task_id=<?php echo $task['task_id']; ?>" class="btn btn-warning btn-sm">Update</a>
                                        <a href="delete_task.php?task_id=<?php echo $task['task_id']; ?>" class="btn btn-danger btn-sm" onclick="return confirm('Are you sure you want to delete this task?');">Delete</a>
                                    </td>
                                </tr>
                            <?php endwhile; ?>
                        <?php else: ?>
                            <tr>
                                <td colspan="5" class="text-center">No tasks found.</td>
                            </tr>
                        <?php endif; ?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <?php
// Include footer
include('footer.php');
?>

    <script>
        $(document).ready(function() {
            $('#taskTable').DataTable();
        });
    </script>
</body>
</html>