created view_tasks.html and code to display task for the selected user

src/main.py

@@ -4,6 +4,7 @@
 from src.forms.user_forms import RegisterForm, LogInForm
 from src.models import Base, SessionLocal, Users, engine
 from src.repository.users_repository import UsersRepository
+from src.repository.tasks_repository import TasksRespository
 from src.security import generate_password_hash
 
 app = Flask(__name__, static_folder="../static", template_folder="../templates")
@@ -88,5 +89,15 @@ def register():
     return render_template("register.html", form=form)
 
 
+@app.route("/tasks/<int:user_id>")
+@login_required
+def view_tasks(user_id):
+    session = SessionLocal()
+    task_repo = TasksRespository(session)
+    tasks = task_repo.find_tasks_by_user(user_id)
+    session.close()
+    return render_template("view_tasks.html", tasks=tasks)
+
+
 if __name__ == "__main__":
     app.run(debug=True, port=5001)

static/css/styles.css

@@ -22,3 +22,59 @@ body {
 .text-muted {
     text-decoration: line-through;
 }
+
+
+/* Table Sytling */
+.table-container {
+    background-color: #ffffff; /* Fully opaque white background */
+    margin: 40px auto;
+    padding: 20px;
+    border-radius: 15px;
+    max-width: 80%;
+    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+/* Heading Style */
+.table-heading {
+    color: #5a6b7a; /* Softer color to match background */
+    text-align: center;
+    margin-top: 20px;
+    font-size: 2rem;
+    font-weight: bold;
+    font-family: 'Georgia', serif; /* Creative font for heading */
+}
+
+/* Styled Table */
+.styled-table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-top: 20px;
+}
+
+.styled-table th, .styled-table td {
+    padding: 12px;
+    text-align: left;
+    font-family: 'Georgia', serif; /* Apply a creative font to match heading */
+}
+
+/* Column Header Style */
+.styled-table th {
+    background-color: #7ca78b; /* Soft green matching the background */
+    color: #ffffff; /* White text for contrast */
+    font-weight: bold;
+    font-size: 1.2rem; /* Larger font for headers */
+    text-transform: uppercase; /* Make header text uppercase for emphasis */
+}
+
+/* Table Rows */
+.styled-table tr:nth-child(even) {
+    background-color: #f7f7f7; /* Light gray for even rows */
+}
+
+.styled-table tr:nth-child(odd) {
+    background-color: #ffffff; /* White for odd rows */
+}
+
+.styled-table tr:hover {
+    background-color: #e0e0e0; /* Soft hover effect */
+}

templates/base.html

@@ -31,8 +31,5 @@
         {% block content %}{% endblock %}
     </div>
 
-    <footer class="footer text-center mt-4">
-        <p>&copy; 2023 ToDo Application</p>
-    </footer>
 </body>
 </html>

templates/view_tasks.html

@@ -0,0 +1,37 @@
+{% extends "base.html" %}
+
+{% block content %}
+<style>
+    /* Full-page background image */
+    body {
+        background-image: url("{{ url_for('static', filename='img/background.png') }}");
+        background-size: cover;
+        background-position: center;
+        background-attachment: fixed;
+    }
+</style>
+
+<div class="table-container">
+    <h2 class="table-heading">User Tasks</h2>
+    <table class="styled-table">
+        <thead>
+            <tr>
+                <th>Task ID</th>
+                <th>Title</th>
+                <th>Description</th>
+                <th>Status</th>
+            </tr>
+        </thead>
+        <tbody>
+            {% for task in tasks %}
+            <tr>
+                <td>{{ task.id }}</td>
+                <td>{{ task.title }}</td>
+                <td>{{ task.description }}</td>
+                <td>{{ task.status }}</td>
+            </tr>
+            {% endfor %}
+        </tbody>
+    </table>
+</div>
+{% endblock %}