Index: src/main/resources/templates/customer_admin.html
===================================================================
--- src/main/resources/templates/customer_admin.html	(revision 77205be723c8b2ffd1ee5618a05e1d12b1cee44a)
+++ src/main/resources/templates/customer_admin.html	(revision 77205be723c8b2ffd1ee5618a05e1d12b1cee44a)
@@ -0,0 +1,202 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
+    <title>Profile settings page</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
+          integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
+
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link href="css/headers.css" rel="stylesheet" />
+    <link href="css/customer_admin.css" rel="stylesheet"/>
+</head>
+<body>
+<!-- Navbar start -->
+<header class="p-3 mb-3 border-bottom">
+    <div class="row" style="justify-content: space-between;">
+        <div class="col-md-10 mb-10">
+            <h4>Profile settings for <span id="fullName"></span></h4>
+        </div>
+        <div class="col-md-1 mb-1">
+            <button id="profile" class="btn btn-primary btn-block" onclick="goToHomePage()">
+                Homepage
+            </button>
+        </div>
+        <div class="col-md-1 mb-1">
+            <button id="logout" class="btn btn-primary btn-block">
+                Logout
+            </button>
+        </div>
+    </div>
+</header>
+
+<nav>
+    <div class="nav nav-tabs" id="nav-customer-tab" role="tablist">
+        <a class="nav-link active" id="nav-profile-tab" data-bs-toggle="tab" href="#nav-profile" role="tab"
+           aria-controls="nav-profile" aria-selected="true">Profile Info</a>
+        <a class="nav-link" id="nav-appointment-tab" data-bs-toggle="tab" href="#nav-appointment" role="tab"
+           aria-controls="nav-appointment" aria-selected="false">Upcoming Appointments</a>
+        <a class="nav-link" id="nav-past-appointment-tab" data-bs-toggle="tab" href="#nav-past-appointment" role="tab"
+           aria-controls="nav-review" aria-selected="false">Past appointments</a>
+        <a class="nav-link" id="nav-review-tab" data-bs-toggle="tab" href="#nav-review" role="tab"
+           aria-controls="nav-review" aria-selected="false">My reviews</a>
+    </div>
+</nav>
+<div class="tab-content" id="nav-customer-tabContent">
+    <div class="tab-pane fade show active" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
+        <div class="col-lg-6 mb-5 mb-lg-0">
+            <div class="card-body py-5 px-md-5">
+                <form>
+                    <div class="row">
+                        <div class="col-md-6 mb-4">
+                            <div class="form-outline">
+                                <label for="firstName">First name</label>
+                                <input type="text" id="firstName" class="form-control" placeholder="First name"
+                                       aria-label="Firstname"/>
+                            </div>
+                        </div>
+                        <div class="col-md-6 mb-4">
+                            <div class="form-outline">
+                                <label for="lastName">Last name</label>
+                                <input type="text" id="lastName" class="form-control" placeholder="Last name"
+                                       aria-label="lastname"/>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Phone number input -->
+                    <div class="form-outline mb-4">
+                        <label for="phoneNumber">Phone number</label>
+                        <input type="number" id="phoneNumber" class="form-control" placeholder="Phone number"
+                               aria-label="phoneNumber"/>
+                    </div>
+
+                    <!-- Email input -->
+                    <div class="form-outline mb-4">
+                        <label for="email">Email</label>
+                        <input type="email" id="email" class="form-control" placeholder="Email"
+                               aria-label="Email"/>
+                    </div>
+                    <!-- Username input -->
+                    <div class="form-outline mb-4">
+                        <label for="username">Username</label>
+                        <input type="text" id="username" class="form-control" placeholder="Username"
+                               aria-label="username"/>
+                    </div>
+                    <button type="button" class="btn btn-primary btn-block mb-4" id="update_customer_button">
+                        Update profile
+                    </button>
+                </form>
+            </div>
+        </div>
+    </div>
+    <div class="tab-pane fade" id="nav-appointment" role="tabpanel" aria-labelledby="nav-appointment-tab">
+        <div class="form-outline col-lg-12 row">
+            <div class="form-outline col-lg-12">
+                <div class="table-responsive">
+                    <table class="table">
+                        <thead>
+                        <tr>
+                            <th scope="col">#</th>
+                            <th scope="col">Full name</th>
+                            <th scope="col">Email</th>
+                            <th scope="col">Phone number</th>
+                            <th scope="col">Time period</th>
+                            <th scope="col">Service</th>
+                            <th scope="col">Action</th>
+                        </tr>
+                        </thead>
+                        <tbody id="appointments-table-body">
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="tab-pane fade" id="nav-past-appointment" role="tabpanel" aria-labelledby="nav-past-appointment-tab">
+        <div class="form-outline col-lg-12 row">
+            <div class="form-outline col-lg-12">
+                <div class="table-responsive">
+                    <table class="table">
+                        <thead>
+                        <tr>
+                            <th scope="col">#</th>
+                            <th scope="col">Full name</th>
+                            <th scope="col">Email</th>
+                            <th scope="col">Phone number</th>
+                            <th scope="col">Time period</th>
+                            <th scope="col">Service</th>
+                            <th scope="col">Action</th>
+                        </tr>
+                        </thead>
+                        <tbody id="past-appointments-table-body">
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+        <div class="modal fade" id="reviewModal" tabindex="-1" aria-labelledby="reviewModalLabel" aria-hidden="true">
+            <div class="modal-dialog">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h1 class="modal-title fs-5" id="reviewModalLabel">New message</h1>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                    </div>
+                    <div class="modal-body">
+                        <form>
+                            <div class="mb-3">
+                                <label for="recipient-name" class="col-form-label">Recipient:</label>
+                                <input type="text" class="form-control" id="recipient-name" />
+                            </div>
+                            <div class="id-class"></div>
+                            <div class="rating">
+                                <input type="radio" name="rating" value="5" id="5">
+                                <label for="5">☆</label>
+                                <input type="radio" name="rating" value="4" id="4">
+                                <label for="4">☆</label>
+                                <input type="radio" name="rating" value="3" id="3">
+                                <label for="3">☆</label>
+                                <input type="radio" name="rating" value="2" id="2">
+                                <label for="2">☆</label>
+                                <input type="radio" name="rating" value="1" id="1">
+                                <label for="1">☆</label>
+                            </div>
+                            <div class="mb-3">
+                                <label for="message-text" class="col-form-label">Message:</label>
+                                <textarea class="form-control" id="message-text"></textarea>
+                            </div>
+                        </form>
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                        <button type="button" class="btn btn-primary" id="post-review-button">Leave a review</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="tab-pane fade" id="nav-review" role="tabpanel" aria-labelledby="nav-review-tab">
+        <div id="my-reviews" class="form-outline col-lg-12 row">
+            <div class="card m-3" style="max-width: 300px; padding: 0;">
+                <div class="card-header text-bg-success">
+                    ☆☆☆☆☆
+                </div>
+                <ul class="list-group list-group-flush">
+                    <li class="list-group-item"><i>Business:</i> Businessname<</li>
+                    <li class="list-group-item"><i>Service:</i> Customer Name</li>
+                    <li class="list-group-item"><i>Reviewer:</i> Customer Name</li>
+                    <li class="list-group-item"><i>Comment:</i> Lorem ipsum diem amet</li>
+                    <li class="list-group-item"><small class="text-body-secondary">Created on 29-11-2023T11:32:23</small></li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</div>
+
+
+<script src='js/jquery-1.10.2.js' type="text/javascript"></script>
+<script src="js/customer_admin.js" type="text/javascript"></script>
+<script src="js/bootstrap.bundle.min.js"></script>
+<script src="js/logout.js" type="text/javascript"></script>
+</body>
+</html>
